@charset "utf-8";

  	@media (max-width:767px) {	

		.header {	
			display: flex;	
			flex-direction: row;
			flex-wrap: nowrap;			
			box-sizing: border-box;
			position: fixed;	
			top: 0;			
			justify-content: space-between;
			overflow: visible;
			width: 100%;	
			z-index: 9999999;
			margin: 0
		}	

		.header a{
			display: flex;
			flex-direction: row;
			position: fixed;
			top: 20px;
			left: 20px;
			overflow: visible;
			width: auto;
		}	
		
		.header a .logo{
			box-sizing: border-box;
		}

		.header a .logo #Mainlogo{
			box-sizing: border-box;
			height: auto;
			width: 150px;
		}

		.header a .logo #Mainlogo img{
			box-sizing: border-box;
			height: 50px;
			width: auto;}

		.header a .logo #SmallLogo{
			box-sizing: border-box;			
			height: 40px;
			width: auto;
		}

		.header a .logo #SmallLogo img{
			box-sizing: border-box;
			height: 40px;
			width: auto;
		}

		.header a .logo #Mainlogo img, .header a .logo #Mainlogo svg, .header a .logo #SmallLogo img, .header a .logo #SmallLogo svg{
			display: flex;
			overflow: visible;
			text-decoration: none;
			animation: burgerPop 0.4s ease forwards;
		}

		#Mainlogo,
		#SmallLogo {
			transition: opacity 0.3s ease, transform 0.3s ease;
		}

		.logo-hidden {
			opacity: 0;
			transform: scale(0.9);
			pointer-events: none;
			display: none;
		}

		.logo-visible {
			opacity: 1;
			transform: scale(1);
		}	    

		.header ul {
			margin: 0;
			list-style: none;
			overflow: hidden;
			background-color: #fff;
			padding: 0;
		}
		
		.menu ul li{
			text-decoration: none;
		}
	}

	@media (min-width:971px) {	

		.header {	
			display: flex;	
			flex-direction: row;
			flex-wrap: nowrap;			
			box-sizing: border-box;
			position: fixed;	
			top: 0;			
			justify-content: space-between;
			overflow: visible;
			width: 100%;	
			/*z-index: 9999999;*/
			margin: 0
		}	

		.header a{
			display: flex;
			flex-direction: row;
			position: fixed;
			top: 40px;
			left: 40px;
			overflow: visible;
			width: auto;
		}	
		
		.header a .logo{
			box-sizing: border-box;
		}

		.header a .logo #Mainlogo{
			box-sizing: border-box;
			height: auto;
			width: 200px;
		}

		.header a .logo #Mainlogo img{
			box-sizing: border-box;
			height: 50px;
			width: auto;}

		.header a .logo #SmallLogo{
			box-sizing: border-box;			
			height: 40px;
			width: auto;
		}

		.header a .logo #SmallLogo img{
			box-sizing: border-box;
			height: 40px;
			width: auto;
		}

		.header a .logo #Mainlogo img, .header a .logo #Mainlogo svg, .header a .logo #SmallLogo img, .header a .logo #SmallLogo svg{
			display: flex;
			overflow: visible;
			text-decoration: none;
			animation: burgerPop 0.4s ease forwards;
		}

		#Mainlogo,
		#SmallLogo {
			transition: opacity 0.3s ease, transform 0.3s ease;
		}

		.logo-hidden {
			opacity: 0;
			transform: scale(0.9);
			pointer-events: none;
			display: none;
		}

		.logo-visible {
			opacity: 1;
			transform: scale(1);
		}	 	

			

		.header ul {
		margin: 0;
		list-style: none;
		overflow: hidden;
		background-color: #fff;
		padding: 0;}

		
		.menu ul li{
		text-decoration: none;}
	

	.header li a {
		display: block;
		text-decoration: none;
		padding-top: 8px;
		padding-bottom: 8px;
		padding-right: 10px;
		padding-left: 30px;
		color: #000;
	}

	/* menu */
	.header .menu {
		clear: both;
		max-height: 0;
		transition: max-height .2s ease-out;
		padding-right: 20px;	
		
	}

	/* menu icon */

	.menu-icon {
		cursor: pointer;
		display: inline-block;
		position: relative;
		user-select: none;
		padding: 9px 0;
		transform: matrix(1, 0, 0, 1, 0, 0);
		animation: fade-in-main-content 4s ease-in forwards;
		-webkit-animation: fade-in-main-content 4s ease-in forwards;
		-moz-animation: fade-in-main-content 4s ease-in forwards;}

	.menu-icon .navicon {
		display: block;
		height: 2px;
		position: relative;
		transition: background .2s ease-out;
		width: 34px;
		background: var(--navicon-bg-color, #808080); /* Default background with fallback */
	}

	.menu-icon .navicon:before,
	.menu-icon .navicon:after {
		background: var(--navicon-bg-color, #808080); /* Default background with fallback */
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
	}

	.menu-icon .navicon:before {
	top: 9px;}

	.menu-icon .navicon:after {
	top: -9px;}

	/* menu btn */
	.menu-btn {
		display: none;}

	.menu-btn:checked ~ .menu {
	max-height: 240px;}

	.menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;}

	.menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);}

	.menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);}

	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;}

/* 48em = 768px */
	}

	@media (min-width: 3000px) {
	
	.logo {	
		display: flex;		
		text-decoration: none;
		animation: burgerPop 0.4s ease forwards;
	}

	.logo svg, .logo img{
		width: 100%;
		height: auto;
	}	
	
	
	.header li {
		float: left;
		color: #000;
	}

	.header li a {
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 10px;
		color: #000;
	}
	
	.selected {
		color: #F0F;	
	}
	
	
	.header .menu {
		clear: none;
		float: right;
		max-height: none;
	}
	
	/*.header .menu-icon {display: none;}
	
	.header .logo {
		float: left;
		font-size: 2em;
		text-decoration: none;
		display: block;
		font-weight: 800;
		color: #000;
		padding-left: 40px;}
	*/
	}