/* @import url('https://fonts.googleapis.com/css2?family=Geo:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); */

/* @font-face {
	font-family: 'Geo'; font-weight: 400;
	src: url('/_fonts/geo.otf') format("opentype");
} */


html, body{width: 100%; height: 100%; margin: 0; padding: 0; font-size: 18px; font-family: 'Open Sans', sans-serif; background: #fff; color: #000;}

body{
	--marker: #e5ff00;
	--space: 1rem;
	--space-md: calc(var(--space) * 2);
	--content-max-width: 1000px;
}
/* 				
--content-max-width: 75ch;
--content-max-width: 60ch; 
*/


img{display: block;}

h1, h2, h3, h4, h5, h6{margin: 0; padding: 0; font-weight: 400; line-height: 1.15em;}
/* .content h1{font-family: 'Geo', sans-serif; font-size: 58px; text-shadow: 4px 4px rgba(0, 0, 0, .2);}
h2{font-family: 'Geo', sans-serif; font-size: 60px; margin-top: 10px; text-shadow: 4px 4px rgba(0, 0, 0, .2);} */
/* h3{margin-top: 40px;}
h4{margin: 30px 0 10px 0; font-size: 15px;} */

table{width: 90%;}
table td{padding: 10px;}
table td.max{width: 100%;}

hr{opacity: .3; border: none; height: 1px; 
	background-image: linear-gradient(to right, black 25%, rgba(255, 255, 255, 0) 0%); background-position: bottom; 
	background-size: 4px 1px; background-repeat: repeat-x;
}


input{font-size: 22px; height: 47px; width: 250px; padding-left: 15px; border: 1px solid transparent; border-radius: 5px;  margin-bottom: 25px; position: relative;}
input::placeholder{color: #b2b2b2;}
button, .button{
	text-decoration: none; display: inline-block; position: relative;  width: 265px; height: auto;
	background: #000; 
	box-shadow: 0px 5px 38px #000; color: #fff;
	border: none; border-radius: 5px; cursor: pointer; padding: 17px 50px; font-size: 20px; text-transform: uppercase; transition: .2s transform;
}
button:before, .button:before{
	position: absolute; content: ''; width: 30px; height: 30px; 
	background-image: url(/_images/icn_next.png); z-index: 100;
	background-size: cover; margin-right: 40px; right: 0;
}
button:hover, .button:hover{transform: scale(1.05);}

.overlay{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #000000de; z-index: 100;}
.overlay .overlay_container{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex;}



.gridwrapper{
	display: grid; 
	grid-template-columns: 	[full-start] 1fr
							[content-start] min(var(--content-max-width), 100% - var(--space-md) * 2)
							[content-end] 1fr 
							[full-end];
}
.gridwrapper > *{grid-column: content;}
.gridwrapper > * + * {margin-block-start: var(--space);}





.dpfont{font-family: 'Geo', sans-serif;}

.logo{position: relative; background: url(/_images/logo.svg) no-repeat; width: 60px; height: 65px; background-size: contain;}

/* #header .menu{position: absolute; width: 100%; top: 0; right: 0;}
#header .menu:before{position: absolute; top: 35px; right: 0; font-family: 'Geo'; font-size: 25px; width: 50px; height: 50px; letter-spacing: -1.5px; content: '| | |'; color: #fff; transform: rotate(90deg); cursor: pointer;}
#header .menu ul{
	position: absolute; z-index: 200; left: -30px; top: -700px; 
	font-family: 'Geo'; color: #fff; list-style: none; margin: 0; padding: 32px 20px 20px 30px; width: calc(100% + 0px); display: nonea; 
	background: rgba(0, 0, 0, 1); box-shadow: 5px 5px 0px rgba(255, 255, 255, .5);
	transition: top .2s;
}
#header .menu ul a{color: #fff;}
#header .menu.on ul{display: blocka; top: -2px;}
#header .menu ul li{margin-bottom: 10px;}
#header .menu .logo{margin-bottom: 20px;}
#header .menu .menu:before{margin-top: 2px; right: 20px;} */



.p05{padding-top: 5px !important;}
.p{padding-top: 15px !important;}
.p1{padding-top: 10px !important;}
.p2{padding-top: 20px !important;}
.p3{padding-top: 30px !important;}
.p4{padding-top: 40px !important;}
.p5{padding-top: 50px !important;}
.p6{padding-top: 60px !important;}
.p7{padding-top: 70px !important;}
.p8{padding-top: 80px !important;}
.p9{padding-top: 90px !important;}

.pb1{padding-bottom: 10px !important;}
.pb2{padding-bottom: 20px !important;}
.pb3{padding-bottom: 30px !important;}
.pb4{padding-bottom: 40px !important;}
.pb5{padding-bottom: 50px !important;}
.pb6{padding-bottom: 60px !important;}
.pb7{padding-bottom: 70px !important;}
.pb8{padding-bottom: 80px !important;}
.pb9{padding-bottom: 90px !important;}

.pr1{padding-right: 10px !important;}
.pr2{padding-right: 20px !important;}
.pr3{padding-right: 30px !important;}
.pr4{padding-right: 40px !important;}
.pr5{padding-right: 50px !important;}

.pl1{padding-left: 10px !important;}
.pl2{padding-left: 20px !important;}
.pl3{padding-left: 30px !important;}
.pl4{padding-left: 40px !important;}
.pl5{padding-left: 50px !important;}

.m05{margin-top: 5px !important;}
.m{margin-top: 15px !important;}
.m1{margin-top: 10px !important;}
.m2{margin-top: 20px !important;}
.m3{margin-top: 30px !important;}
.m4{margin-top: 40px !important;}
.mm{margin-top: 50px !important;}
.mmm{margin-top: 100px !important;}
.ml{margin-left: 20px !important;}
.ml1{margin-left: 10px !important;}
.ml2{margin-left: 30px !important;}
.ml4{margin-left: 40px !important;}
.mr{margin-right: 20px !important;}
.mr05{margin-right: 5px !important;}
.mr5{margin-right: 50px !important;}
.mb05{margin-bottom: 5px !important;}
.mb{margin-bottom: 15px !important;}
.mb1{margin-bottom: 10px !important;}
.mb2{margin-bottom: 20px !important;}
.mb3{margin-bottom: 30px !important;}
.mb4{margin-bottom: 40px !important;}
.mb5{margin-bottom: 50px !important;}
.mb10{margin-bottom: 100px !important;}

.right{float: right;}
.left{float: left;}
.clear{clear: both;}

.tright{text-align: right;}
.tleft{text-align: left;}
/* .tcenter{text-align: center;}
.dark{color: rgba(0, 0, 0, .6);}
.light{color: rgba(255, 255, 255, .6);} */

/* .smaller{font-size: 15px;} */


.faded{opacity: .5;}

.marker{position: relative; display: inline-block; opacity: .99;}
.marker:before{position: absolute; z-index: -1; content: ''; left: -5%; width: 110%; height: 100%; background: var(--marker); transform: rotate(-4deg); opacity: .7;}


/* a{color: rgba(0, 0, 0, .6);} */



/* ==== PAGE NAV ====*/
.page_nav{
	grid-column: full; display: grid; grid-template-columns: inherit; overflow-x: scroll; 
	overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.page_nav ul{
	padding: 30px 0 60px 0;
	grid-column: content; display: flex; align-items: center; gap: var(--space);
}
.page_nav ul li{
	cursor: pointer; white-space: nowrap;
	display: flex; align-items: center; justify-content: center; scroll-snap-align: center; inline-size: 100%;
}
.page_nav ul li.clear{visibility: hidden;}




/* ==== SLIDERS ====*/
.slider{position: relative; transition: height .2s;}
.slider .slide{position: absolute; width: 100%; left: 210%; transition: left .3s; visibility: hidden;}
.slider .slide.on{left: 0; visibility: visible;}
.slider .slide.on.bye{left: -210%;}



#header{width: 100%; z-index: 200; position: absolute;}
#header .logo,
#footer .logo{cursor: pointer;}

#header .back{position: relative; float: left; padding-right: 20px;}
#header .back:before{position: absolute; content: '‣'; top: -5px; left: -25px; font-family: 'Geo'; font-size: 25px; transform: rotate(180deg); cursor: pointer; color: #fff;}

#header .logo{animation: rotate 5s linear; width: 30px; height: 33px;}



#main_bg{position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 80%;}
#main_bg:before{
	position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 50%; content: '';
	background-repeat: no-repeat; background-size: cover; background-position: center;
}
#main_bg:after{
	position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 50%; content: '';
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
}


#ot_wrapper{position: absolute; top: 0; left: 0; z-index: 10; width: 100%; min-height: 100%; height: 100%;}





#wrapper,
.wrapper{position: relative; margin: auto; width: 80%; max-width: 1000px;}

.wrapper{line-height: 1.8em;}

#wrapper{min-height: calc(100% - 00px);}

#wrapper ul.nav,
#wrapper ul.download_apps{margin: 0; padding: 0; list-style: none;}
#wrapper ul.nav li,
#wrapper ul.download_apps li{display: inline-block; margin-bottom: 10px;}

#wrapper ul.download_apps{margin: 150px 0; text-align: center;}
#wrapper ul.download_apps .download{display: inline-block; width: 47%;}
#wrapper ul.download_apps .download img{margin: auto; border: 3px solid #fff;}

#wrapper ul.nav{margin-top: 70px;}
#wrapper .main{margin-top: 50px; overflow-x: hidden;}

#header{padding: 30px 0;}
#wrapper .content{padding-top: 85px; padding-bottom: 50px; font-size: 20px;}
#wrapper .content .text{padding-right: 10%;}




.footer_wrapper{overflow: hidden; position: relative; background: #000; padding-top: 50px;}
.footer_wrapper:before{
	background-image: url(/_images/alien.svg); background-repeat: no-repeat; background-size: 52px 37px;
	position: absolute; content: ''; width: 52px; height: 37px; top: 32px; right: 10%;
	letter-spacing: 0; z-index: 1;
}
#footer{
	font-size: 14px; position: relative; min-height: 165px; padding-top: 30px; 
	/* 	border-top: 50px solid #FF00A9; */
	background: #FF00A9; overflow: hidden; padding-bottom: 20px;
}
#footer .logo{
	margin-bottom: 30px; background: url(/_images/logo_circle.png) no-repeat; width: 152px; height: 155px; background-size: contain;
	filter: drop-shadow(2px 2px 2px #a23f3fba);
/* 	box-shadow: 0 0 30px #5aa23fba; */
}

#footer:before{
    background-image: url(/_images/alien.svg); background-repeat: repeat; background-size: 52px 37px;
    position: absolute; content: ''; width: 300%; height: 300%; top: -150px; left: -100%;
	transform: rotate(-7deg);
    opacity: .3; mix-blend-mode: color;
}

/* #header .logo:before, */
#footer .logo:before{
	display: none;
	position: absolute; content: ''; top: 5px; left: 5px; opacity: .2; z-index: -1; filter: invert(1); background: url(/_images/logo.svg) no-repeat; width: 60px; height: 65px; background-size: contain;
}

#footer a{color: #fff;}

#footer .legal{float: right;}
#footer .legal ul{margin: 0; padding: 0; list-style: none;}
#footer .legal ul li{display: inline-block;}



@keyframes rotate{
	0%{transform: rotate(180deg);}
	45%{transform: rotate(180deg);}
	50%{transform: rotate(360deg);}
	95%{transform: rotate(360deg);}
	96%{transform: rotate(0deg);}
	100%{transform: rotate(180deg);}
}




@media only screen and (max-width: 750px){
	.overlay.loginpop .overlay_container{padding: 20px;}
	.overlay.loginpop .overlay_container .wrapper{width: 85%;}
	.overlay.loginpop .main-img{display: none;}
}


/* @media only screen and (max-height: 700px){
	#wrapper{min-height: calc(100% - 145px);}
	#footer{height: 120px; padding-top: 20px; font-size: 15px;}
	#footer .logo,
    #footer .logo:before{width: 40px; height: 44px; margin-bottom: 20px;}
} */