/*NAVIGATION CONTENT */

.nav-title{
	font-size:1.6rem;
	line-height:2rem;
	margin: 4.2rem 0 1.6rem;
	padding: 0 1rem; 
}

input{
	position:absolute;
	opacity: 0;
	z-index:-1;
}
.tabs{
	
	overflow: hidden;
	border-radius: 10px;
	/*background-image: url("https://www.transparenttextures.com/patterns/stardust.png"),
	linear-gradient(
	240deg,
	rgba(164,88,255,0.75) 0%,
	rgba(53,68,255,0.75) 40%,
	rgba(10,47,158,0.75) 80%
	);*/ 
	
}

.tab{
	width:100%;
	color:white;
	overflow:hidden;
	
}

.tab-label{
	display: flex;
	justify-content:space-between;
	background-image: url("https://www.transparenttextures.com/patterns/stardust.png"),
	linear-gradient(
	240deg,
	rgba(164,88,255,0.75) 0%,
	rgba(53,68,255,0.75) 40%,
	rgba(10,47,158,0.75) 80%
	); 
	font-weight: bold;
	padding:1em;
	font-size:0.75 em;
	cursor: pointer;
}

.tab-label:hover{
	opacity:0.8;
}
.tab-label:after{
	content:"\276F";
	width:1rem;
	height:1rem;
	text-align:center;
	transition: all 0.35s;
}
.tab-content{
	max-height:0px;
	padding: 0 1em;
	color: #151025;
	
	transition: all 0.35s;
}
.tab-cntent ol,
.tab-content ul{
	margin-left:2rem;
	line-height: 2;
	
}
.tab-content li{
	counter-increment:step;
}
.tab-content li:before{
	content: counter(step);
	background: #101525;
	border-radius:5px;
	padding: 0 5px;
	color:white;
	transform: rotate(-10deg);
	left:-.6em;
	font-size:0.8 em;
	line-height:1.8em;
}
/*---------------------------------------------------------------------------------------*/

.tab-close{
	display:flex;
	justify-content:flex-end;
	padding:1 em;
	font-size:0.75 em;
	background-image: url("https://www.transparenttextures.com/patterns/stardust.png"),
	linear-gradient(
	240deg,
	rgba(164,88,255,0.75) 0%,
	rgba(53,68,255,0.75) 40%,
	rgba(10,47,158,0.75) 80%,
	); 
	cursor: pointer;
}

.tab-close:hover{
	opacity:0.8;
}

/*if its checked*/
input:checked + .tab-label{
	background:rgba(10,47,158,1);
} 
input:checked + .tab-label:after{
	transform:rotate(90deg);
}
input:checked ~ .tab-content{
	max-height:100vh;
	padding: 2rem;
}

/*off screen navigation*/

.navicon{
	color:#101525;
	left: .25rem;
	height: 3rem;
	position: fixed;
	top: .25rem;
	width: 3rem;
	z-index:20;
	transform: rotate(90deg);
	transition:0.3s all ease-in-out;
}
.navicon:before,
.navicon:after{
	background:transparent;
	border-bottom:2px solid white;
	border-top: 1px solid white;
	content: '';
	height: 7px;
	position: fixed;
	left: .5rem;
	top: 1.25rem;
	width: 55%;
	transition:0.3s all ease-in-out 0.3s;/*the last number is the delay*/
}
.navicon:before{
	transform:rotate(90deg);
	color:white;
}
.navicon:after{
	left:1.0625rem;
	transform: rotate(-90deg);
	border-top:white;
}
.nav-checkbox{
	cursor:pointer;
	left: 0.25rem;
	height: 3rem;
	opacity: 0;
	position:fixed;
	top:0.25rem;
	width:3rem;
	z-index: 21;
	transition: 0.3s all ease-in-out;
	
}

.nav-checkbox:checked + .navicon:before,
.nav-checkbox:checked + .navicon:after{
	
	border: none;
	color:white;	
	height:2px;
	left: 0.6875rem;
	top: 1.5rem;
	transition:0.3s all ease-in-out 0.3s;
	background: #101525;
}

.nav-checkbox:checked + .navicon:before{
	transform: rotate(45deg);
}
.nav-checkbox:checked + .navicon:after{
	transform: rotate(-45deg);
}
.nav-checkbox:checked ~ nav{
	left:0;
	transition: 0.3s all ease-in-out;
}
nav.site-navigation{
	width:100%;
	max-width: 320px;
	height: 100%;
	position:fixed;
	z-index:0;
	overflow-y:scroll;
	background-image: url("https://www.transparenttextures.com/patterns/stardust.png"),
	linear-gradient(
	240deg,
	rgba(164,88,255,1) 0%,
	rgba(53,68,255,1) 40%,
	rgba(10,47,158,1) 80%
	);
}


.nav-checkbox:checked + .navicon,
.nav-checkbox:checked{
	left: 2px;
		
}

.nav-checkbox:checked ~ .site-main{
	left: 300px;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.15);
}
.menu-social-container li{
	display: inline-block;
	margin-left:1rem;
	
}