﻿.navigation_checkbox{
	display:none;
	
}
.navigation_button{
	background-color:white;
	height:4rem;
	width:4rem;
	position:fixed;
	top:3rem;
	right:3rem;
	border-radius:50%;
	z-index:2000;
	box-shadow: 0 0.5rem 1.5rem #1A1A1A;
	text-align:center;
	cursor: pointer;
	
	/*left:50%;
	transform: translate(-50%,0%);*/

	

	
	
}
	
.navigation_background{
	height:3rem;
	width:3rem;
	border-radius:50%;
	position:fixed;
	top:3.5rem;
	right:3.5rem;
	background: #000000;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #000000, #1A1A1A);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #000000, #1A1A1A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	z-index:1000;
	opacity:1;
	
	/*left:50%;
	transform: translate(-50%,0%);*/

	

	transition:transform .8s cubic-bezier(0.67,-0.5, 0.06 ,1.4);
}
	
.navigation_nav{
	height:100vh;
	position:fixed;
	top:0;
	ledt:0;
	z-index:1500;
	visibility:hidden;
	opacity:0;
	width:0%;
	transition:all .8s;


	
}

.navigation_list{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	list-style:none;
	text-align:center;
	width:100%;
	
}


.navigation_item{
	margin:1rem;
	
}
.navigation_link:link, .navigation_link:visited{
	display:inline-block;
	font-size: 1.5rem;
	font-weight:300;
	padding:0.5rem 1.5rem;
	color:white;
	text-decoration:none;
	text-transform:uppercase;
	background-image: linear-gradient(120deg,  transparent 0%, transparent 50%, white 50%);
	background-size: 230%;
	
	transition:all .4s;
	
	
	
}

.navigation_link:hover, .navigation_link:active{

	background-position:100%;
	/*background: -webkit-linear-gradient(45deg, #663fb5, #00baff);  */
	background: -webkit-linear-gradient(45deg, #fc0000, #ff5100); 
	-webkit-background-clip: text;  
	-webkit-text-fill-color: transparent;
	font-weight:bold;
	translate: translateX(1rem);
	
}


.navigation_checkbox:checked ~ .navigation_background{
	transform: scale(100);
}


.navigation_checkbox:unchecked ~ .navigation_list{
	width:0%;	
}


.navigation_checkbox:checked ~ .navigation_nav{
	opacity:1;
	width:100%;
	visibility:visible;
}

.navigation_icon{
	position:relative;
	margin-top:2rem;
	
}


.navigation_icon,.navigation_icon:before,.navigation_icon:after{
	width:2rem;
	height:2px;
	background-color:#1A1A1A;
	display:inline-block;
	
}

.navigation_icon:before,.navigation_icon:after{
	content:"";
	position:absolute;
	left:0;
	transition:all .4s;
	
}

.navigation_icon:before{
	top: -0.5rem;
	
}

.navigation_icon:after{
	top: 0.5rem;
}

.navigation_button:hover .navigation_icon:before{
	top: -0.7rem;
	
}

.navigation_button:hover .navigation_icon:after{
	top: 0.7rem
	
}

.navigation_checkbox:checked + .navigation_button  .navigation_icon{
	background-color:transparent;
	
}

.navigation_checkbox:checked + .navigation_button  .navigation_icon::before{
	top:0;
	transform: rotate(135deg);
	
}

.navigation_checkbox:checked + .navigation_button  .navigation_icon::after{
	top:0;
	transform: rotate(-135deg);
	
}

.Subsccribe{
	position:fixed;
	bottom:0rem;
	right:0rem;
	border-radius:10px;
	padding:1rem;
	max-height:100%;
	width:300px;
	margin:3rem;
	
}



