@charset "utf-8";
/* CSS Document */
.main-header {
/*	position: fixed;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 30px 4vw;
	z-index: 1;
	transition: 0.4s ease-out;
}
 .main-header a {
	 text-decoration: none;
}
 .main-header .nav-links {
	 display: flex;
	 list-style: none;
}
.main-header li {
	display: inline-block;
	margin-right: 50px;
}
.main-header li:last-child {
	margin-right: 0;
}
.main-header .nav-links .nav-link a {
	color: #FFF;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.50px;
	position: relative;
}
.main-header li a::after {
	position: absolute;
	content: '';
	background: #d51116;
	left: 0;
	bottom: -10px;
	width: 0%;
	height: 2px;
	transition: 0.4s ease-out;
}
.main-header .nav-links .nav-link a:hover {
	color: #d51116;
}
.main-header li a:hover::after {
	width: 100%;
}

.main-header .menu-icon {
	position: relative;
	padding: 26px 10px;
	cursor: pointer;
	z-index: 9;
	display: none;
}
 .main-header .menu-icon__line {
	 display: block;
	 position: relative;
	 background: #d51116;
	 height: 2px;
	 width: 20px;
	 border-radius: 4px;
}
 .main-header .menu-icon__line::before, .main-header .menu-icon__line::after {
	 content: '';
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 border-radius: 4px;
	 background: #d51116;
	 transition: background 0.8s ease;
}
 .main-header .menu-icon__line::before {
	 transform: translateY(-5px);
}
 .main-header .menu-icon__line::after {
	 transform: translateY(5px);
}
 .main-header .menu-btn {
	 display: none;
}
.main-header.scrolled {
	position: fixed;
	top: 0;
	z-index: 99;
	background: rgba(0, 0, 0, 0.9);
	padding: 20px 30px;
}
.main-header.scrolled img {
	max-width: 80%;
}
.logo img {
	transition: 0.4s ease-out;
}
 .main-header.scrolled .menu-icon__line, .main-header.scrolled .menu-icon__line::before, .main-header.scrolled .menu-icon__line::after {
	 background: white;
}

.get_btn a {
	font-size: 16px;
	font-weight: 400;
	color: #FFF;
	border: 2px solid #8e8e8e;
	padding: 14px 40px;
	display: inline-block;
	border-radius: 30px;
	transition: 0.4s ease-out;
}
.get_btn a:hover {
	background: #d51116;
	border: 2px solid #d51116;
	color: #000;
}


 @media screen and (max-width: 767px) {
 .main-header li a::after {
	 display: none;
 }	 
.get_btn {
	display: none;
}	 
 .main-header .menu-icon {
	 display: block;
}
 .main-header .menu-icon__line {
	 animation: closedMid 0.8s backwards;
	 animation-direction: reverse;
}
 .main-header .menu-icon__line::before {
	 animation: closedTop 0.8s backwards;
	 animation-direction: reverse;
}
 .main-header .menu-icon__line::after {
	 animation: closedBtm 0.8s backwards;
	 animation-direction: reverse;
}
.main-header .nav-links {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* padding: 10rem 0; */
	width: 100vw;
	height: 100vh;
	font-size: 2rem;
	color: #fff;
	background: #000000f2;
	transition: opacity 0.8s 0.5s, clip-path 1s 0.5s;
	clip-path: circle(200px at top right);
	z-index: 3;
}
.main-header .nav-links .nav-link {
	opacity: 0;
	transform: translateX(100%);
	width: 100%;
	text-align: left;
	padding-left: 50px;
}
.main-header .nav-links .nav-link a {
	display: block;
	padding: 20px 0;
}
 .main-header .menu-btn:checked ~ .nav-links {
	 opacity: 1;
	 clip-path: circle(100% at center);
}
 .main-header .menu-btn:checked ~ .nav-links .nav-link {
	 opacity: 1;
	 transform: translateX(0);
	 transition: opacity 0.4s ease-in-out, transform 0.6s cubic-bezier(0.175, 0.085, 0.32, 1.275);
}
 .main-header .menu-btn:checked ~ .nav-links .nav-link:nth-of-type(1) {
	 transition-delay: 0.7s;
}
 .main-header .menu-btn:checked ~ .nav-links .nav-link:nth-of-type(2) {
	 transition-delay: 0.8s;
}
 .main-header .menu-btn:checked ~ .nav-links .nav-link:nth-of-type(3) {
	 transition-delay: 0.9s;
}
 .main-header .menu-btn:checked ~ .nav-links .nav-link:nth-of-type(4) {
	 transition-delay: 1s;
}
 .main-header .menu-btn:checked ~ .menu-icon {
	 border-radius: 50%;
	 animation: pulse 1s;
}
 .main-header .menu-btn:checked ~ .menu-icon .menu-icon__line {
	 background: #fff;
	 animation: openMid 0.8s forwards;
}
 .main-header .menu-btn:checked ~ .menu-icon .menu-icon__line::before {
	 background: white;
	 animation: openTop 0.8s forwards;
}
 .main-header .menu-btn:checked ~ .menu-icon .menu-icon__line::after {
	 background: white;
	 animation: openBtm 0.8s forwards;
}
}
 @keyframes pulse {
	 from {
		 box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.6);
		 background: rgba(255, 255, 255, 0.6);
	}
	 to {
		 box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0);
		 background: rgba(255, 255, 255, 0);
	}
}
 @keyframes openTop {
	 0% {
		 transform: translateY(-5px) rotate(0deg);
	}
	 50% {
		 transform: translateY(0px) rotate(0deg);
	}
	 100% {
		 transform: translateY(0px) rotate(90deg);
	}
}
 @keyframes closedTop {
	 0% {
		 transform: translateY(-5px) rotate(0deg);
	}
	 50% {
		 transform: translateY(0px) rotate(0deg);
	}
	 100% {
		 transform: translateY(0px) rotate(90deg);
	}
}
 @keyframes openMid {
	 50% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(45deg);
	}
}
 @keyframes closedMid {
	 50% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(45deg);
	}
}
 @keyframes openBtm {
	 0% {
		 transform: translateY(5px) rotate(0deg);
	}
	 50% {
		 transform: translateY(0px) rotate(0deg);
	}
	 100% {
		 transform: translateY(0px) rotate(90deg);
	}
}
 @keyframes closedBtm {
	 0% {
		 transform: translateY(5px) rotate(0deg);
	}
	 50% {
		 transform: translateY(0px) rotate(0deg);
	}
	 100% {
		 transform: translateY(0px) rotate(90deg);
	}
}