@charset "UTF-8";
/* media CSS */


/*Medie Queries
############################################################################*/
@media only screen and (min-width: 835px) {
#main,
#header .logo {
	margin: 0 auto;
	width: 81.5em;
}	
}

@media only screen and (max-width: 835px) {
#main {
	padding-left: 2.4em;
	padding-right: 2.4em;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
} 
#header .logo img.silhouette {
	display: none;
}
#header .logo img {
	width: 16em;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}
#header .title h2 {
	font-size: 4.2em;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}
#header .title {
	width: 40em;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}

/* OFF-CANVAS-NAVIGATION */
#menu-trigger {
	display: block;
}
#menu {
	background: rgb(26,23,27);
	padding-top: 4.8em;
}
#menu ul {
	text-align: left;
}
#menu ul li {
	display: block;
	margin: 0 0 0 0;
}
#menu ul li a {
	color: rgb(255,255,255);
	padding: 0.8em 1.4em 0.8em 1.4em;
}
#menu ul li a:hover,
#menu ul li a:active,
#menu ul li a.current {
	background: rgb(45,120,139);
	webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;  
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
form {
	width: 100%;
}
}

@media only screen and (max-width: 600px) {
#main img.right {
	float: none;
	margin: 0 0 2.4em 0;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}
}

@media only screen and (max-width: 460px) {
#header .title {
	width: auto;
	padding-left: 2.4em;
	padding-right: 2.4em;
}
#header .title h2 {
	line-height: 1.5em;
}
#header .title h3 {
	font-size: 1.4em;
	line-height: 1.4em;
}
#header .logo img {
	width: 12em;
}
}