@media all and (max-width:1100px) {
	html {font-size:75%;}
	header h1 {text-align:left;left:10px;}
	header.header .container-fluid {padding:0;}
	header.header .socials {display:none;}
	footer {height:auto !important;padding:20px 0;background:none;background-color:#262624 !important;background-image:none !important;}
	footer > * {text-align:center;margin:0 auto;}
	footer .container > * {text-align:center;}
	footer .site-name {display:none;position:absolute!important;bottom:0;}

	header .login {display:none;}

	#nav {width:100%;position:absolute;top:0;margin:0;z-index:999999999999999999999999;}

	body.home main.hero {width:100%;height:90%;font-size:40%;}
	body.home main.hero p {margin:0;padding:0;}
	.arrow-down {position:relative;margin:-80px auto 0 auto;}
	.arrow-down img {width:38px;height:60px;}

}


@media only screen and ( max-width:640px ) {

	header > * {text-align:center;}
	header h1 {text-align:center !important;}

	#nav {position:relative;}
	#nav > a {right:-2px;width:80px;top:-60px !important;height:60px;text-indent:-9999px;position:absolute !important;background:#f58678 url(../images/bg-responsive-nav.png) 50% 50% no-repeat;}
	#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display:block;}

	.menu {background:#000;}

	.toggleMenu {width:100% !important;}

	/* first level */
	#nav > ul {height: auto;display: none;position: absolute;left: 0;right: 0;top:0px;background:#f58678;}
	#nav:target > ul {display: block;}
	#nav > ul > li {width: 100%;float: none;}
	#nav > ul > li > a {height: auto;text-align: left;padding: 0 0.833em; /* 20 (24) */}
	#nav > ul > li:not( :last-child ) > a {border-right: none;border-bottom: 1px solid #cc470d;}

	/* second level */
	#nav li ul {position: static;padding: 1.25em;padding-top: 0;}

	footer > * {text-align:center !important;}
}