@charset "utf-8";
/* CSS Document */

*{
	box-sizing: border-box;
	padding:0;
	margin:0;
	color: white;
}

body{
	font-family:sans-serif;
	background-color: black;
}

nav{
	background: transparent;
	padding:5px 20px;
	
}

ul{
	list-style-type: none;
}

a{
	color: white;
	text-decoration: none;
	position: relative;
	padding:10px 45px;
}

a::after{
	content:'';
	background: #ff3d00;
	width: 0;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: width 0.5s;
	
}

a:hover::after{
	width: 100%;
	
}

.container1{
	 position: absolute;
  width: 635px;
  padding-right: 15px;
  padding-left: 35px;

	letter-spacing: 5px;
	text-align: left;
	font-size: 14px;
	}





.container2{
	text-align: center;
	
	}

.image{
	
}






.menu li{
	font-size:16px;
	padding:15px 5px;
	
}
.menu li a{
	display:block;
}

.logo a{
	font-size:20px;
}

.button.secondary{
	border-bottom: 1px #444 solid;
}

/* Mobile Menu */

.menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.toggle{
	order:1;
}

.item.button{
	order:2;
	
}

.item{
	width: 100%;
	text-align: center;
	order:3;
	display:none;
}

.item.active{
	display: block;
}



.toggle{
	cursor: pointer;
}

.bars{
	background: #999;
    display: inline-block;
	height:2px;
	position: relative;
	width:18px;
}
.bars::before,.bars::after{
	background: #999;
	content:"";
    display: inline-block;
	height:2px;
	position: absolute;
	width:18px;
}
.bars::before{
	top:5px;
}

.bars::after{
	top:-5px;
}

/* Tablet Menu */

@media all and (min-width:1068px){
	.menu{
	  justify-content: center;
	}
	.logo{
		flex:1;
	}
	.item.button{
		width: auto;
		order:1;
		display:block;
	}
	
	.toggle{
		order:2;
	}
	.button.secondary{
		border: 0;
	}
	
	.button a{
		text-decoration: none;
		padding:7px 15px;
		background: teal;
		border:1px solid #006d6d;
		border-radius:50em;
	}
	.button.secondary a{
		background: transparent;
	}
	.button a:hover{
		transition:all .25s;
	}
	
	.button:not(.secondary) a:hover{
		background: #006d6d;
		border-color:#005959;
	}
	
	
	.button.secondary a:hover{
		color:#ddd;
	}
	
}

/* Desktop Menu */

@media all and (min-width: 1268px){
	
	.item{
		display: block;
		width: auto;
	}
	.toggle{
		display:none;
	}
	.logo{
		order:0;
		
	}
	.item{
		order:1;
	}
	
	.button{
		order:2;
	}
	.menu li{
		padding:15px 10px;
	}
	.menu li.button{
		padding-right:0;
	}
}