/*============== ============== ============== 
================ FONTS
================ ============== ============== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root{
	--space: 1rem;
	--space-md: calc(var(--space)* 2);

	--wrapper-width: 1000px;
	--wrapper-width-padding: 40px;
	--wrapper-height-padding: 40px;

	--text-size: 30px;
	
	--text-h1-size: 50px;
	--text-h1-padding: 190px;
	
	--text-h2-size: 80px;
	--text-h3-size: 40px;
	
	--logo-size: 70px;
}

@media only screen and (max-width: 750px){
	:root{
		--text-h1-size: 30px;
    	--text-h1-padding: 155px;
		--text-h2-size: 40px;
		--text-size: 22px;
	}
}


/*============== ============== ============== 
================ CORE
================ ============== ============== */
html, body{width: 100%; height: 100%; margin: 0; padding: 0; background: #000; color: #fff; font-size: var(--text-size); font-family: "Nunito", serif;}

h1, h2, h3, h4, h5, h6{margin: 0; padding: 0;}
h1, h2{font-weight: 600;}
h1{font-size: var(--text-h1-size); text-transform: uppercase;}
h2{font-size: var(--text-h2-size);}
h3{font-size: var(--text-h3-size);}

a{color: #ffb766;}


/*============== ============== ============== 
================ CLASSES
================ ============== ============== */
.href{cursor: pointer;}

.p{padding-top: 30px;}
.faded{opacity: .5;}

.clear{clear: both;}


.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;}




.wrapper{
/* 				position: relative;  */
	width: calc(100% - var(--wrapper-width-padding) - var(--wrapper-width-padding)); 
	max-width: var(--wrapper-width); 
	margin: auto; padding: 0 var(--wrapper-width-padding);
}


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


.logo{width: 50px; height: 50px; background-image: url(/_images/logo.svg?v=2); background-size: contain; background-repeat: no-repeat;}

.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{
	font-size: 30px; padding: 30px 0 30px 0;
	grid-column: content; display: flex; align-items: center; gap: var(--space);
}
.page_nav ul li{
	white-space: nowrap;
	display: flex; align-items: center; justify-content: center; scroll-snap-align: center; inline-size: 100%;
	cursor: pointer; transition: box-shadow .2s, transform .2s; background: #ffffff3d; padding: 10px 35px; margin: 0 15px 0 0;
}
.page_nav ul li.clear{visibility: hidden;}





.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%;}



/*============== ============== ============== 
================ OBJECTS
================ ============== ============== */
#wrapper{width: 100%; height: 100%; height: 100%; min-height: 100%;}

#header{width: 100%; top: 0; position: fixed; z-index: 100; height: 80px; padding: var(--wrapper-height-padding) 0; backdrop-filter: blur(6px); background: #0000000a;}
#header .logo{width: var(--logo-size); height: var(--logo-size); font-size: 20px;}
/* #header .logo:before{position: absolute; content: ''; width: var(--logo-size); height: var(--logo-size); border: 5px solid #ffffff; border-radius: 100%; padding: 6px; margin-top: -11px; margin-left: -11px;}
#header .logo:after{content: 'DP Technology Group.'; left: 105px; top: -4px; position: relative;} */
/* #header.on .logo:after{visibility: visible;} */

#main{
	position: relative; width: 100%; padding-top: var(--text-h1-padding); min-height: calc(100% - var(--text-h1-padding));
	padding-bottom: 50px;
}

#footer{position: relative; background: #fff; color: #000; font-size: 10px; height: 20px;}
#footer .wrapper{padding-top: 3px;}
#footer .wrapper ul{margin: 0; padding: 0; list-style: none; float: right;}
#footer .wrapper ul li{
	display: inline-block; position: relative;
	margin-right: 4px; padding-right: 10px;
	}
	#footer .wrapper ul li:after{position: absolute; content: '|'; right: 0;}
	#footer .wrapper ul li:last-child{margin-right: 0; padding-right: 0;}
	#footer .wrapper ul li:last-child:after{display: none;}
#footer .wrapper a{color: #000;}



@media only screen and (max-width: 600px){
	#footer{height: auto;}
	#footer .wrapper ul{float: none; padding-bottom: 3px;}
}




@media only screen and (max-width: 400px){
	:root{
		--wrapper-width-padding: 20px;
		--wrapper-height-padding: 20px;
		
		--text-size: 20px;
		--text-h1-size: 30px;
    	--text-h1-padding: 105px;
		--text-h2-size: 40px;
		--text-h3-size: 30px;
		
		--logo-size: 50px;
	}
	
	#header{height: 55px;}
	#header .logo{font-size: 13px;}
	#header .logo:before{border-width: 4px; padding: 3px; margin-top: -7px; margin-left: -7px;}
	#header .logo:after{left: 72px; top: 0;}
	
	.page_nav{grid-template-columns: var(--wrapper-width-padding);}
	.page_nav ul{padding-top: 10px; padding-bottom: 0; font-size: 17px;}
	.page_nav ul li{margin-right: 0;}
}