*, *:after, *:before  {
         margin: 0  ;
         padding: 0  ;
         -webkit-box-sizing: border-box  ;
         -moz-box-sizing: border-box  ;
         box-sizing: border-box }
html , body  {
         height: 100% }
body  {
         overflow-wrap: break-word  ;
         scroll-behavior: smooth  ;
         background-color: #000  ;
         color: #eee  ;
         overflow-x: hidden }
#test  {
         position: fixed  ;
         overflow-y: auto  ;
         word-wrap: break-word  ;
         padding: 11px  ;
         color: #f00  ;
         font-family: monospace  ;
         font-size: 22px  ;
         z-index: 11 }
#LogoCon  {
         position: fixed  ;
         transition: all 1s 0s  ;
         backface-visibility: hidden  ;
         width: 100%  ;
         height: 100vh  ;
         z-index: 2  ;
         display: flex }
#Logo  {
         padding-top: 6%  ;
         height: 77%  ;
         width: 77%  ;
         margin: auto }
#CON  {
         display: none }
#LOADING  {
         color: #fff  ;
         transition: transform 0.75s 0.25s ease-in-out , opacity 0.5s 0.5s ease-in-out  ;
         position: fixed  ;
         z-index: 11  ;
         top: 0  ;
         bottom: 0  ;
         left: 0  ;
         right: 0  ;
         display: flex  ;
         background-color: #000  ;
         perspective: 1000px }
#LOADING-TEX  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 33px  ;
         margin: auto  ;
         text-align: center  ;
         background-color: #000  ;
         width: 100%  ;
         animation: rot 3s linear infinite }
#LOADING-TEX  img  {
         width: 30% }
@keyframes rot  {
         0%  {
                  transform: rotateY( 0deg ) }
         100%  {
                  transform: rotateY( -360deg ) }}
@media all and (max-width: 700px)  {
         #LOADING-TEX  img  {
                  width: 80% }} 
#M a , #N a  {
         outline: none }
/* desktop - text */ 
#Mtitle  {
         font-family: Times new roman  ;
         font-size: 24px }
.mMainLi a  {
         //font-family: 'Open Sans Condensed', sans-serif  ;
         font-family: 'Open Sans Condensed'  ;
         font-size: 24px }
.mSubUl li a  {
         //font-family: 'Open Sans Condensed', sans-serif  ;
         font-family: 'Open Sans Condensed'  ;
         font-size: 22px }
/* desktop */ 
*  {
         outline: none }
#M  {
         //display: none /* temp dev */  ;
         transition: all 1.0s 0.3s  ;
         position: fixed  ;
         z-index: 6  ;
         top: 0  ;
         right: 0  ;
         height: 60px  ;
         width: 100%  ;
         overflow: hidden  ;
         padding: 10px  ;
         color: rgb( 250,250,250 )  ;
         border-bottom: 3px solid  ;
         border-image: linear-gradient( 30deg , rgb( 160,140,110 )10% , rgb( 220,200,170 )50% , rgb( 160,140,110 )80% )  ;
         border-image-slice: 1  ;
         background: url( './img/menu/stars.png' ) #000  ;
         background-position: 0px 60px  ;
         background-size: cover  ;
         background-repeat: no-repeat }
#M:hover  {
         background-position: 0px -60px  ;
         height: 300px }
#Mtitle  {
         display: none  ;
         float: left }
.mMainUl  {
         list-style-type: none }
.mMainLi  {
         float: right }
.mMainLi a  {
         color: rgb( 250,250,250 )  ;
         text-decoration: none  ;
         padding-right: 25px  ;
         padding-left: 5px  ;
         padding-bottom: 15px }
.mMainLi:hover .mSubUl  {
         opacity: 1.0  ;
         transform: rotateY( 0deg ) }
.mSubUl  {
         transition: all 0.8s 0.1s ease-in  ;
         position: absolute  ;
         margin-top: -5px  ;
         transform-origin: 50% 50%  ;
         transform: rotateY( 90deg )  ;
         opacity: 0.0  ;
         border-top: 1px solid #fff  ;
         list-style-type: none }
.mSubUl li  {
         clear: both }
.mSubUl li:hover a  {
         color: rgb( 220,180,130 ) }
.mSubUl li:before  {
         content: '⋅' }
#Mlogo  {
         padding-top: 40px }
#Mlogo img  {
         width: 300px }
.p  {
         margin-top: 20px  ;
         margin-bottom: 20px }
/* mobile - text */ 
.mainNodeTex  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 23px }
.singleNode a  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 23px }
.subNode a  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 20px }
#Nmenu  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 23px }
#Ntitle a  {
         //font-family: 'Open Sans Condensed', sans-serif  ;
         font-family: times new roman  ;
         font-size: 23px }
#Nclose  {
         //font-family: 'Open Sans Condensed', sans-serif  ;
         font-family: 'Tangerine'  ;
         font-size: 60px  ;
         font-weight: bold }
/* mobile */ 
#Ncon  {
         //display: none /* temp dev */  ;
         position: fixed  ;
         backface-visibility: hidden  ;
         z-index: 6  ;
         top: 0  ;
         right: 0  ;
         overflow: hidden  ;
         width: 100%  ;
         color: rgb( 250,250,250 ) }
#Ncon a  {
         text-decoration: none  ;
         color: rgb( 250,250,250 ) }
#Ncon a:hover  {
         color: rgb( 220,180,130 ) }
#N  {
         display: none  ;
         transition: all 1s 0s  ;
         height: auto  ;
         max-height: 60px  ;
         width: 100%  ;
         padding-top: 15px  ;
         padding-bottom: 40px  ;
         padding-left: 5px  ;
         border-bottom: 3px solid  ;
         border-image: linear-gradient( 30deg , rgb( 160,140,110 )10% , rgb( 220,200,170 )50% , rgb( 160,140,110 )80% )  ;
         border-image-slice: 1  ;
         background: url( './img/menu/stars.png' ) #000  ;
         background-position: 0px 60px  ;
         background-size: 200%  ;
         background-repeat: no-repeat }
#Nuls  {
         margin-top: 50px  ;
         overflow-y: auto  ;
         clear: both  ;
         max-height: 80vh }
#Ntitle  {
         //display: none  ;
         float: right  ;
         padding-left: 3% }
#Ntitle #TEL  {
         width: 30px  ;
         background-color: #fff  ;
         margin-right: 10px }
#Ntitle #PIN  {
         margin-right: 10px  ;
         width: 29px  ;
         background-color: #000 }
#Nmenu  {
         transition: transform 1s 0s  ;
         float: right  ;
         padding-right: 3% }
#Nmenu img  {
         width: 100% }
#Nlogo  {
         transition: all 1s 0s  ;
         position: absolute  ;
         right: -10px  ;
         top: 80px  ;
         left: 40%  ;
         transform: rotateY( 90deg )  ;
         opacity: 0.0 }
#Nlogo img  {
         width: 100% }
#Nclose  {
         position: absolute  ;
         right: 0px  ;
         top: -5px  ;
         //margin-top: -70px  ;
         padding-left: 10px  ;
         padding-right: 10px  ;
         //transform: translate3d( 500px , 0px , 0px )  ;
         transform: translateX( 100px )  ;
         transition: all 0.8s 0.0s  ;
         text-align: right }
#Nclose img  {
         width: 32px  ;
         height: 32px }
#N:hover  {
         background-position: 0px -40px  ;
         max-height: 100vh }
#N:hover #Nlogo  {
         transform: rotateY( 0deg )  ;
         opacity: 1.0 }
#N:hover #Nmenu  {
         //transform: translate3d( 100px , 0px , 0px )  ;
         transform: rotateY( 90deg ) }
#N:hover + #Nclose  {
         //transform: translate3d( 0px , 0px , 0px )  ;
         transform: translateX( 0px ) }
.mainNode , .singleNode  {
         width: 70%  ;
         position: relative  ;
         z-index: 2  ;
         overflow: hidden }
.subNode  {
         transition: all 1s  ;
         position: relative  ;
         z-index: 3  ;
         height: 0px  ;
         font-size: 20px  ;
         padding-left: 20px }
.mainNodeTex:after  {
         transition: all 1s  ;
         content: ' ▾ ' }
.mainNode:focus .mainNodeTex:after  {
         content: ' ▵ '  ;
         // ▵ ▿ ⇑ ⇓ ▴ ▾ }
.mainNode:focus .subNode  {
         height: 30px }
.mainNode:focus  {
         outline: 0  ;
         pointer-events: none }
.mainNode:focus .subNode  {
         pointer-events: auto }
.subNode:before  {
         content: ' ⋅ ' }
@media all and (max-width: 900px)  {
         #M  {
                  display: none }
         #N  {
                  display: block }} 
@keyframes move-twink-back  {
         from  {
                  background-position: 0 0 }
         to  {
                  background-position: -10000px 5000px }}
@keyframes move-clouds-back  {
         from  {
                  background-position: 0 0 }
         to  {
                  background-position: 10000px 0 }}
@-webkit-keyframes move-clouds-back  {
         from  {
                  background-position: 0 0 }
         to  {
                  background-position: 10000px 0 }}
@-moz-keyframes move-clouds-back  {
         from  {
                  background-position: 0 0 }
         to  {
                  background-position: 10000px 0 }}
@-ms-keyframes move-clouds-back  {
         from  {
                  background-position: 0 }
         to  {
                  background-position: 10000px 0 }}
#stars, #twinkling, #clouds  {
         position: absolute  ;
         z-index: -1  ;
         backface-visibility: hidden  ;
         transform: translate3d( 0px , 0px , 0px )  ;
         top: 0  ;
         left: 0  ;
         width: 100vw  ;
         height: 100vh }
#stars  {
         display: inline-block  ;
         background: #000 url(./img/stars.png) repeat top center  ;
         z-index: 0 }
#twinkling  {
         display: inline-block  ;
         background: transparent url(./img/twinkling.png) repeat top center  ;
         z-index: 1  ;
         //animation: move-twink-back 200s linear infinite }
#twinklingLogo  {
         display: inline-block  ;
         position: absolute  ;
         backface-visibility: hidden  ;
         top: 0  ;
         left: 0  ;
         width: 100%  ;
         height: 100%  ;
         background: transparent url(./img/twinkling.png) repeat top center  ;
         background-size: 220%  ;
         z-index: 1  ;
         //animation: move-twink-back 120s linear infinite } 
.cell  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 25px }
.title  {
         padding: 6%  ;
         border-top: 3px solid #333 }
.cell  {
         position: relative }
.cell img  {
         transition: all 1s }
.cellImg , .cellTex  {
         position: absolute  ;
         top: 0  ;
         bottom: 0  ;
         left: 0  ;
         right: 0  ;
         backface-visibility: hidden  ;
         transition: all 1s }
.cellImg  {
         background-color: rgba( 0,0,0,0.2 ) }
.cellTex  {
         z-index: 2  ;
         display: flex  ;
         color: #fff }
.cellTex a  {
         color: #ddd  ;
         text-decoration: none }
.cellTexC  {
         text-shadow: -1px 0 #222, 0 1px #222, 1px 0 #222, 0 -1px #222  ;
         text-align: center  ;
         margin: auto  ;
         display: flex  ;
         flex-direction: column }
.cellTexC > a  {
         margin: auto }
.more  {
         transition: all 1s  ;
         border: 1px solid #eee  ;
         margin-top: 1em  ;
         padding: 5%  ;
         width: 150px }
#PRV  {
         margin-top: -130px  ;
         margin-left: -100px }
#PRV img  {
         width: 80% }
#NAA  {
         margin-top: -250px  ;
         margin-left: -70px }
#NAA img  {
         width: 80% }
#A .cell:hover img  {
         transform: matrix( 1.1,0,0,1.1,0,0 ) }
#A .cell:hover .cellImg  {
         background-color: rgba( 0,0,0,0.8 ) }
#A .cell:hover .cellTex  {
         transform: translate3d( 0px , -25px , 0px ) }
#A  {
         position: relative  ;
         z-index: 2  ;
         padding-left: 15%  ;
         padding-right: 15%  ;
         //padding-top: 11%  ;
         padding-bottom: 17%  ;
         display: grid  ;
         grid-gap: 80px  ;
         grid-template-rows: auto auto auto auto auto auto  ;
         grid-template-columns: 1fr 1fr }
#cell0 , #cell1 , #cell2 , #cell3 , #cell4 , #cell5 , #cell6 , #cell7  {
         transition: all 1.0s 0s  ;
         opacity: 0.0  ;
         transform: translate3d( 0 , 100px , 0 )  ;
         background-color: #fff  ;
         text-align: center  ;
         padding-top: 20px  ;
         font-weight: bold }
.cell a  {
         text-decoration: none  ;
         color: #111 }
.imgA  {
         margin-top: 3%  ;
         overflow: hidden }
.romb  {
         position: relative  ;
         z-index: 1  ;
         width: 30px  ;
         height: 30px  ;
         margin: auto  ;
         transform: rotateZ( 45deg )  ;
         margin-bottom: 15px  ;
         margin-top: -35px  ;
         background-image: linear-gradient( -20deg , rgb( 80,60,30 )10% , rgb( 220,200,170 )50% , rgb( 200,180,150 )52% )  ;
         box-shadow: 1px 0px 10px 1px rgba( 0,0,0,.35 ) }
.reveal  {
         padding: 7px  ;
         background-image: linear-gradient( -20deg , rgb( 80,60,30 )15% , rgb( 220,200,170 )50% , rgb( 200,180,150 )92% )  ;
         border: none }
#HIDDEN_TEX  {
         display: none }
#A > .cell:nth-child( 1 )  {
         text-align: center  ;
         color: #fff }
#A > .cell:nth-child( 1 ) img  {
         margin-bottom: -7px  ;
         width: 90% }
#A > .cell:nth-child( 2 )  {
         text-align: left  ;
         color: #fff  ;
         font-size: 20px }
#A > .cell:nth-child( 3 )  {
         border: 1px solid #000 }
#A > .cell:nth-child( 3 ) img  {
         margin-bottom: -7px  ;
         width: 100% }
#A > .cell:nth-child( 5 )  {
         border: 1px solid #000 }
#A > .cell:nth-child( 5 ) img  {
         margin-bottom: -7px  ;
         width: 100% }
#A > .cell:nth-child( 4 )  {
         border: 1px solid #000 }
#A > .cell:nth-child( 4 ) img  {
         margin-bottom: -7px  ;
         width: 100% }
#A > .cell:nth-child( 6 )  {
         border: 1px solid #000  ;
         //grid-column: span 2 }
#A > .cell:nth-child( 6 ) img  {
         margin-bottom: -7px  ;
         width: 100% }
#A > .cell:nth-child( 7 )  {
         border: 1px solid #000 }
#A > .cell:nth-child( 7 ) img  {
         margin-bottom: -7px  ;
         width: 100%  ;
         //transform: translateX( -100px ) }
#A > .cell:nth-child( 8 )  {
         border: 1px solid #000  ;
         grid-column: span 1 }
#A > .cell:nth-child( 8 ) img  {
         margin-bottom: -7px  ;
         width: 100%  ;
         //transform: translateX( -25% ) }
#A > .cell:nth-child( 9 )  {
         border: 1px solid #000  ;
         grid-column: span 1 }
#A > .cell:nth-child( 9 ) img  {
         margin-bottom: -7px  ;
         width: 100% }
#A > .cell:nth-child( 10 )  {
         border: 1px solid #000  ;
         grid-column: span 1 }
#A > .cell:nth-child( 10 ) img  {
         margin-bottom: -7px  ;
         width: 100% }
#A > .cell:nth-child( 11 )  {
         grid-column: span 2  ;
         padding-top: 10%  ;
         margin: auto }
#A > .cell:nth-child( 11 ) img  {
         height: 140% }
@-webkit-keyframes stripes  {
         100%  {
                  background-position: 20000px }}
@media all and (max-width: 700px)  {
         #PRV  {
                  margin-top: -80px  ;
                  margin-left: -70px }
         #PRV img  {
                  width: 80% }
         #NAA  {
                  margin-top: -170px  ;
                  margin-left: -50px  ;
                  margin-bottom: -80px }
         #NAA img  {
                  width: 80% }
         #A  {
                  grid-template-rows: auto auto auto auto auto auto auto auto auto  ;
                  grid-template-columns: auto  ;
                  padding-left: 0  ;
                  padding-right: 0  ;
                  padding-top: 30px }
         #A > .cell:nth-child( 11 )  {
                  grid-column: span 1  ;
                  padding-top: 10% }
         #A > .cell:nth-child( 11 ) img  {
                  height: auto  ;
                  width: 100% }
         #A > .cell:nth-child( 2 )  {
                  margin-top: -100px }
         #A > .cell:nth-child( 2 )  {
                  padding-left: 7%  ;
                  padding-right: 7% }
         #A > .cell:nth-child( 1 ) img  {
                  width: 75% }} 
h1  {
         margin-bottom: 0.25em }
#I  {
         /* do not delete position relative - eventhough it works on desktop does not on mobile */  ;
         position: relative  ;
         z-index: 1  ;
         margin-top: 60px  ;
         backface-visibility: hidden  ;
         background-color: #000  ;
         opacity: 1.0  ;
         overflow: hidden  ;
         animation: I 1.0s forwards }
#I img  {
         width: 100% }
@keyframes I  {
         100%  {
                  opacity: 1.0 }}
#I_init  {
         opacity: 0.0 }
#I0 , #I0T , #I1 , #I1T  {
         position: absolute  ;
         width: 100% }
#I0T , #I1T  {
         //font-family: 'Open Sans Condensed', sans-serif  ;
         font-family: sans  ;
         font-weight: normal  ;
         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black  ;
         color: #fff  ;
         font-size: 50px  ;
         padding-top: 40%  ;
         padding-left: 10%  ;
         padding-right: 10% }
#I0T  {
         transform: translateY( 1500px ) }
#CONTACT  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         display: none  ;
         transition: all 1s 0s  ;
         position: fixed  ;
         backface-visibility: hidden  ;
         z-index: 0  ;
         bottom: 0px  ;
         width: 100%  ;
         overflow: hidden  ;
         opacity: 0.0  ;
         text-align: center  ;
         font-size: 25px  ;
         font-weight: bold  ;
         background-color: #fff }
#CONTACT_TITLE  {
         padding-top: 15px  ;
         padding-bottom: 15px }
#CONTACT img  {
         width: 100% }
#CONTACT .cell:hover .cellTex  {
         transform: translate3d( 0px , -25px , 0px ) }
#CONTACT a  {
         text-decoration: none  ;
         color: #111 }
.romb1  {
         position: relative  ;
         z-index: 1  ;
         width: 30px  ;
         height: 30px  ;
         margin: auto  ;
         transform: rotateZ( 45deg )  ;
         margin-top: -21px  ;
         background-image: linear-gradient( -20deg , rgb( 80,60,30 )10% , rgb( 220,200,170 )50% , rgb( 200,180,150 )52% )  ;
         box-shadow: 5px 5px 40px 5px rgba( 0,0,0,.35 ) }
#MAIN  {
         margin-top: -10px  ;
         background-color: #000  ;
         position: relative  ;
         z-index: 1 }
@media all and (max-width: 700px)  {
         #I img  {
                  width: 100%  ;
                  //transform: translate3d( -25% , 0 , 0 ) }
         #I0T , #I1T  {
                  font-size: 25px  ;
                  padding-top: 45%  ;
                  padding-left: 5%  ;
                  padding-right: 5% }
         #CONTACT img  {
                  height: 70vh  ;
                  width: auto  ;
                  transform: translate3d( -100px , 0 , 0 ) }}
a  {
         outline: none }
.fl  {
         display: flex  ;
         flex-wrap: wrap  ;
         justify-content: space-around }
.fl > div  {
         margin-top: 3%  ;
         margin-bottom: 3% }
.socmed  {
         width: 35px  ;
         margin: 10px }
.epos  {
         width: 30px  ;
         margin: 10px }
.epos1  {
         height: 20px  ;
         margin: 0px }
#EPILOGUE  {
         border-top: 1px solid #666  ;
         background-color: #000  ;
         color: #ccc  ;
         //padding-top: 1%  ;
         padding-bottom: 2%  ;
         transition: all 1s 0s  ;
         text-align: center  ;
         transform: translate3d( -3000px , 0px , 0px ) }
#EPILOGUE .tex  {
         font-family: 'Open Sans Condensed', sans-serif  ;
         font-size: 25px }
#EPILOGUE a  {
         transition: all 1s 0s  ;
         border-bottom: 1px solid #000 }
#EPILOGUE a:hover  {
         border-bottom: 1px solid #eee }
@media all and (max-width: 700px)  {
         #EPILOGUE  {
                  transform: translate3d( -1000px , 0px , 0px ) }
         #EPILOGUE .tex  {
                  font-size: 20px }} 
#Nclose  {
         top: 0px }
#ESPA  {
         position: fixed  ;
         backface-visibility: hidden  ;
         left: 0  ;
         bottom: 0  ;
         z-index: 2  ;
         background-color: #fff  ;
         text-align: right  ;
         width: 48%  ;
         //display: flex  ;
         display: none }
@media all and (max-width: 700px)  {
         #ESPA  {
                  width: 70% }}
#ESPA button  {
         color: #666  ;
         border: none  ;
         background-color: #fff  ;
         font-size: 120% }
#ESPA img  {
         width: 100% }