body  {
         background-color: #000  ;
         overflow-wrap: break-word }
#WALL_s  {
         transition: all 1s 0s  ;
         position: fixed  ;
         backface-visibility: hidden  ;
         top: 60px  ;
         left: 0  ;
         height: 100vh  ;
         width: 100%  ;
         z-index: -1  ;
         background: url( 'IMG/stars.png' )  ;
         //background-image: linear-gradient( 60deg , rgb( 0,0,0 )30% , rgb( 250,250,250 )45% , rgb( 0,0,0 )52% ) }
#MAIN  {
         transition: all 1s 0s }
.f  {
         display: flex }
.f > div:nth-child( even )  {
         flex: 1  ;
         margin: 3% }
.f > div:nth-child( odd )  {
         margin: 3%  ;
         flex: 1 }
.monadi  {
         width: 80%  ;
         margin: auto  ;
         //background-image: linear-gradient( 60deg , rgba( 255,255,255,0.7 )15% , rgba( 200,200,200,0.6 )50% , rgba( 255,255,255,0.7 )100% )  ;
         background-color: #fff  ;
         padding: 150px 2% 2% 2%  ;
         //box-shadow: 10px 10px 40px 10px rgba( 0,0,0,.35 )  ;
         border-radius: 1%  ;
         position: relative  ;
         top: 90px  ;
         margin-bottom: 100px  ;
         font-size: 22px }
.monadi img  {
         box-shadow: 1px 0px 10px 1px rgba( 0,0,0,.3 )  ;
         border-radius: 1%  ;
         width: 100%  ;
         margin-bottom: 6%  ;
         margin-top: 6% }
.monadi a  {
         color: #222  ;
         text-decoration: none  ;
         font-size: 22px  ;
         font-weight: bold  ;
         text-shadow: 2px 2px 5px #666 }
.gal  {
         display: grid  ;
         grid-gap: 10px  ;
         grid-template-columns: 1fr 1fr  1fr }
.romb  {
         position: relative  ;
         z-index: 1  ;
         width: 180px  ;
         height: 180px  ;
         margin: auto  ;
         display: flex  ;
         transform: rotateZ( 45deg )  ;
         margin-bottom: -177px  ;
         margin-top: 50px  ;
         background-image: linear-gradient( -20deg , rgb( 80,60,30 )10% , rgb( 220,200,170 )50% , rgb( 200,180,150 )100% )  ;
         box-shadow: 1px 0px 10px 1px rgba( 0,0,0,.35 )  ;
         //animation: r 1 1s 0.2s forwards }
.romb > div  {
         padding: 1%  ;
         text-align: center  ;
         transform: rotateZ( -45deg )  ;
         margin: auto }
@keyframes r  {
         100%  {
                  transform: rotateZ( 405deg ) }}
.h1  {
         font-size: 150%  ;
         text-shadow: 5px 5px 10px #222 }
.h2  {
         text-align: center  ;
         margin-bottom: 6% }
.but_0  {
         margin-bottom: 5% }
.backToForm  {
         width: 200px }
.tri  {
         margin: auto  ;
         text-align: center  ;
         width: 250px  ;
         height: 125px /* width/2 */  ;
         background-image: linear-gradient( 30deg , rgb( 80,60,30 )15% , rgb( 220,200,170 )50% , rgb( 200,180,150 )90% )  ;
         border-bottom-left-radius: 125px  /* height */  ;
         border-bottom-right-radius: 125px /* height */  ;
         //border: 10px solid gray  ;
         //border-bottom: 0  ;
         box-shadow: 1px 0px 10px 1px rgba( 0,0,0,.35 )  ;
         margin-bottom: -20%  ;
         position: relative  ;
         z-index: 1  ;
         display: flex }
.tri div  {
         //transform: translate3d( 0 , -20% , 0 )  ;
         margin: auto  ;
         padding: 5% }
.skew1  {
         margin: auto  ;
         text-align: center  ;
         background-image: linear-gradient( 30deg , rgb( 80,60,30 )15% , rgb( 220,200,170 )50% , rgb( 200,180,150 )90% )  ;
         box-shadow: 1px 0px 10px 1px rgba( 0,0,0,.35 )  ;
         margin-bottom: -15%  ;
         position: relative  ;
         z-index: 1  ;
         display: flex  ;
         //transform: skewX( 20deg ) , skewX( -20deg )width: 0;  ;
         //transform: matrix( 1,0.2,0.2,1,0,0 )  ;
         animation: an 1 1s 0.5s forwards  ;
         transform-origin: 80%  ;
         max-width: 50%  ;
         transform: perspective( 200px ) rotateY( 5deg ) }
@keyframes an  {
         100%  {
                  transform: perspective( 200px ) rotateY( 5deg ) }
         100%  {
                  transform: perspective( 200px ) rotateY( -5deg ) }}
.skew div  {
         //transform: translate3d( 0 , -20% , 0 )  ;
         margin: auto  ;
         padding: 5% }
#GALC_MAIN , #GALC_STUDENT  {
         color: #fff  ;
         font-size: 44px  ;
         transform: translate3d( -200vw , 0 , 0 )  ;
         transition: all 1s 0s  ;
         //background-color: rgba( 100,100,100,0.8 )  ;
         position: fixed  ;
         z-index: 2  ;
         backface-visibility: hidden  ;
         top: 0  ;
         left: 0  ;
         right: 0  ;
         bottom: 0  ;
         //height: 100vh  ;
         //width: 100vw  ;
         overflow-y: hidden  ;
         overflow-x: scroll  ;
         //border: 7px solid  ;
         //border-image: linear-gradient( 30deg , rgb( 80,60,30 )10% , rgb( 200,180,150 )50% , rgb( 160,140,110 )100% )  ;
         //border-image-slice: 1 }
#GAL_MAIN , #GAL_STUDENT  {
         height: 100vh }
.item  {
         padding: 10vw  ;
         float: left  ;
         height: 100vh  ;
         width: 100vw  ;
         margin-right: 20vw  ;
         display: flex  ;
         overflow: hidden }
.item img  {
         margin: auto }
.fit_x  {
         height: 100%  ;
         width: auto }
.fit_y  {
         height: auto  ;
         width: 100% }
#CLOSE_MAIN , #CLOSE_STUDENT  {
         font-family: sans  ;
         font-size: 44px  ;
         font-weight: bold  ;
         transition: transform 1s 0s , opacity 0.5s 0s  ;
         position: fixed  ;
         backface-visibility: hidden  ;
         top: 0  ;
         right: 10px  ;
         z-index: 3  ;
         transform: translate3d( 100vw , 0 , 0 )  ;
         opacity: 0.0  ;
         color: #fff  ;
         padding-top: 70px  ;
         padding-right: 10px  ;
         width: 100%  ;
         text-align: right }
@media all and (max-width: 700px)  {
         .monadi  {
                  width: 90%  ;
                  box-shadow: 1px 0px 10px 1px rgba( 0,0,0,.35 ) }
         .f  {
                  flex-direction: column }}
@media screen and (orientation:portrait)  {
         .f  {
                  flex-direction: column }}