/***************** FONTS ********************/

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

header {position: relative; z-index: 100;}
main {padding: 2rem;}

/************** .navmenuIGATION ***************/

.navmenu{
    background-color: #BC1723;
}
.navmenu ul {
	display: flex; 
	flex-wrap: wrap; 
	max-width: 1080px; 
	margin: 0 auto;	

}
.navmenu ul,
.navmenu li {
	flex: 1;	
}
.navmenu li:last-child {
   border-bottom: none;
}
.navmenu a {
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: 1.2rem;
    font-family: "Lato";
}
.navmenu a:hover {

	color: #fff;
}
.navmenu li {
	position: relative;
	line-height: 50px;
	color: #fff;
	text-align: center;
    list-style-type: none;
}  
.navmenu input,
.navmenu label {
	display: none;
	width: 36px; 
	height: 36px; 
	background: #555; 
	color: #fff; 
	text-align: center; 
	line-height: 36px;
	font-size: 1.6rem;
	border-radius: 2px;
} 
.navmenu label {
   position: absolute; 
   top: 8px; 
   right: 8px; 
   transition: .4s;
}
.navmenu label:hover {cursor:pointer;}
.navmenu label:before {
	font-family: FontAwesome;
	font-size: 24px;
	content: "\f0c9";
	text-align: center;
}

.apptmntbutton{display: none;}

/************* MEDIA QUERIES **************/

@media only screen and (max-width: 767px){
    .apptmntbutton{display: block;}

    .navmenu {
      position: relative;
   }
	.navmenu ul {
		transform: translateY(-100%);
		box-shadow: 0 0 5px rgba(0,0,0, .7);
      transition: all .5s;
      position: absolute;
      width: 100%;
	}
	.navmenu li {
		flex: none; 
		width: 100%;
		border-bottom: solid 1px #777;
	} 
	.navmenu input[type="checkbox"]:checked + ul  {
		transform: translateY(0);
		width: 100%;
		background: #999;   
      transition: all .5s;
      padding-left: 0px;
	}
	.navmenu label{
      display: block;
   }  
	.navmenu input[type="checkbox"]:checked + ul li:nth-child(1){

		color: #fff;
	}  

    
}