/* CSS Document */
/*===============================================
NEW MENU
================================================*/
.header {
 /* background:rgba(255,255,255, 0.7); */
	background:#fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: scroll;
  width: 100%;
  z-index: 3;
}

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

.header li a {
  display: block;
  padding: 10px 10px;
  color:#a71212;
  text-decoration: none;
	font-size:1.35em;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

.header .logo img {
	max-width:175px;
	height:auto;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
	overfow-y:hidden;
}

.header .menu li {
	text-align:center;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
    font-size:0.7em;
    line-height:2.5em;
    font-family: Arial, Verdana, sans-serif;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

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

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

/* menu btn */

.header .menu-btn {
  display: none;
}

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

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

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

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

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

.drop {
	display:none;
}

#subresources {
	display:block;
	font-size:1.2em;
	margin-top:1em;
}

#subresources ul {
	margin-top:15px;
}
#subresources a {
	
	padding-top:10px;
	padding-bottom:5px;
	
	font-size:1em;
}

/* 48em = 768px */

@media only screen and (min-width:768px){
	
	.mainmenu {
		position:relative;
	}
	
	.drop {
		display:block;
		margin-top:1.3em;
	}
	
	
  .header .menu li {
    float: left;
	  text-align:left;
  }
  .header li a {
    padding: 20px 9px;
	  font-size:0.75em;
  }
	
	.header .logo img {
	max-width:200px;
	height:auto;
}
  .header .menu {
    clear: none;
    
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }

	
	
	
	/* Submenus */
	
	#subresources {
		display:none;
	}
	
	
	.menu > li > div {
    position: absolute;
    z-index:60;
    right:0;
    top: 2.5em;
   
 	opacity: 0;
    visibility: hidden;
    overflow: hidden;
	width:80%;
		max-width:800px;
		
    background:rgba(215,215,215, 0.9);
    border-radius: 0 0 3px 3px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
	
}
	.menu > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}
	
		.menu > li > a {
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
	
	}
	
.menu > li:hover > a { background: #e4e4e4; }
 
.menu > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}
	
	.menu .nav-column {
    float: left;
    width: 33%;
	
    
	}
	.menu .nav-column ul {
	 padding:2px;
	 width:100%;
	
 }
 .menu .nav-column li {
	
	 font-size:1em;
	 letter-spacing:0.10em;
	 display:block;
	 float:none;
	 border-bottom:solid 1px #888;
	 
 }
	
.menu .nav-column li:last-child {
		border:none;
	}
.menu .nav-column li a {
     display:block;
	 
	 text-transform:none;
	padding: 5px 9px;
	font-size:0.85em;
	 
}
}

@media only screen and (min-width:1000px){
 .header .menu {
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
  }
	
	
	.header .logo img {
	max-width:300px;
	height:auto;
}
	
	.header li a {
    padding: 20px 12px 21px;
	  font-size:0.95em;
  }
  
}