@media only screen and (min-width: 1680px) {
.hat_picture img {width:100%;}
.top_site{margin:1.8% 0 0 0;}
}

@media only screen and (max-width: 1680px) {
.logo{padding:15.5% 0 0 0;}
.top_site{margin:2.7% 0 0 0;}
}

@media only screen and (max-width: 1600px) {
.logo{padding:14.5% 0 0 0;}
.top_site{margin:2.8% 0 0 0;}
}

@media only screen and (max-width: 1440px) {
.logo{padding:13% 0 0 0;}
.top_site{margin:3.1% 0 0 0;}
}

@media only screen and (max-width: 1366px) {
.logo{padding:12% 0 0 0;}
.top_site{margin:3.3% 0 0 0;}
}

@media only screen and (max-width: 1280px) {
.logo{padding:11% 0 0 0;}
.top_site{margin:3.5% 0 0 0;}
}

@media only screen and (max-width: 1152px) {
.top_site{margin:3.8% 0 0 0;}
.menu_width{width:99%;}
.inner_width_hat{width:98%;}
.inner_width{width:98%;}
h5{font-size:1.438em;}
}

@media only screen and (max-width: 1024px) {
.top_site{margin:5.3% 0 0 0;}
nav {width:55%;}
nav a{margin:0 15% 0 0;}
nav ul li {padding:0 1% 0 0;}
.menu_buttons{width:30%;}
a.reg_btn{padding:4% 0 3% 8%; margin:0;}
a.cont_btn{padding:4% 0 3% 12%; margin:0 0 0 1.5%;}
article{-webkit-column-gap: 6em; -moz-column-gap: 6em; column-gap: 6em;}
a.facebook{padding:0 8% 0 0; margin:0; width:25%;}
a.youtube{padding:0 8% 0 8%; margin:0; width:35%;}
a.linkedin{padding:0 8% 0 8%; margin:0; width:35%;}
h5{margin:0 2%; font-size:1.375em;}
button{width:20%;}
}

@media only screen and (max-width: 800px) {
.top_site{margin:4.1% 0 0 0;}
.menu-trigger{display:block; width:10%; margin:0.7% 0 0 60%;}
nav {width:100%; margin:0; position:absolute; z-index:90;}
nav ul li{display:block; border-bottom:1px solid #000000; background:#1d1d1b; padding:2% 0 2% 5%;}
nav ul{display:none; margin:1.0% 0 0 0;}
nav a {color:#ffffff;}
.menu_buttons{width:30%; float:right; z-index:1000; position:relative;}
a.reg_btn{padding:4% 0 3% 8%; margin:0; font-size:0.688em;}
a.cont_btn{padding:4% 0 3% 12%; margin:0 0 0 1.5%; font-size:0.688em;}
article{-webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em;}
article ul li{padding:0 0 2% 0; margin:0 0 0 3%;}
a.facebook{padding:0 7% 0 0; margin:0; width:25%;}
a.youtube{padding:0 7% 0 7%; margin:0; width:35%;}
a.linkedin{padding:0 7% 0 7%; margin:0; width:35%;}
h5{margin:0 2%; font-size:1.100em;}
article{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-width: 100%; -moz-column-width: 100%; column-width: 100%;}
button{width:30%;}
}

@media only screen and (max-width: 768px) {
.top_site{margin:3.9% 0 0 0;}
.menu_buttons{width:26%; margin:0 0 0 0%;}
a.reg_btn{padding:4% 0 3% 5%; margin:0; font-size:0.688em;}
a.cont_btn{padding:4% 0 3% 8%; margin:0 0 0 1.5%; font-size:0.688em;}
nav ul{display:none; margin:0.7% 0 0 0;}
.colleague{width:100%;}
.f1{width:100%; margin: 0 2.5% 2.5% 0; padding: 1.5% 0 1.5% 2%;}
.f2{width:100%; margin: 0 2.5% 2.5% 0; padding: 1.5% 0 1.5% 2%;}
}

@media only screen and (max-width: 640px) {
.top_site{margin:5% 0 0 0;}
.logo_menu{width:20%;}
.menu_buttons{width:40%;}
a.reg_btn{padding:3% 0 3% 8%; width:50%;}
a.cont_btn{padding:3% 0 3% 12%; width:48.5%;}
.menu-trigger{display:block; width:10%; margin:0.7% 0 0 48%;}
nav ul{display:none; margin:1.2% 0 0 0;}
.step_title{display: inline-block; margin: 0; padding:0; font-weight:lighter; font-size:0; text-align: center; color: #1d1d1b; background:#313131; width:24%; padding:0.4% 0%;}
.step_title:after {margin: 0; font-size: 18px;}
h5{margin:0 2%; font-size:0.850em;}
.bottom{font-size:0.700em;}
button{width:35%;}
.wizard > .content > .body label.error{font-size:0.850em;}
}

@media only screen and (max-width: 600px) {
.menu-trigger{width:15%;}
h5{margin:0 2%; font-size:0.800em;}
.logo{padding:10.5% 0 0 0; margin:0; width:25%; float:left;}
.slogan{padding:1% 0 0 0; margin:6% 0 0 0; width:100%; float:left; font-size:0.750em; font-weight:lighter; color:#1d1d1b; line-height:1.750em;}
.wizard > .content > .body label.error{font-size:0.750em;}
}

@media only screen and (max-width: 480px) {
.top_site{margin:5.3% 0 0 0;}
.logo_menu{width:25%;}
.hat_picture{padding:1% 0 0 0;}
.logo{padding:10% 0 0 0; margin:0; width:35%; float:left;}
.slogan{margin:7% 0 0 0;}
.menu_buttons{width:50%;}
a.reg_btn{padding:3% 0 3% 8%; width:50%;}
a.cont_btn{padding:3% 0 3% 12%; width:48.5%;}
.menu-trigger{display:block; width:15%; margin:0.7% 0 0 35%;}
nav ul{display:none; margin:1.3% 0 0 0;}
.social{width:40%;}
.connect_info{width:100%; margin:3% 0 0 0; border-top:1px solid #dddddd; padding:2% 0 0 0;}
h5{margin:0 2%; font-size:0.720em;}
.bottom{font-size:0.600em;}
button{width:48%;}
.wizard > .content > .body label.error{font-size:0.720em;}
}

@media only screen and (max-width: 360px) {
.top_site{margin:5.6% 0 0 0;}
.logo_menu{width:30%;}
.hat_picture{padding:2% 0 0 0;}
.logo{padding:11% 0 0 0; margin:0; width:35%; float:left;}
a.reg_btn{padding:3% 0 3% 5%; width:50%;  font-size:0.600em;}
a.cont_btn{padding:3% 0 3% 9%; width:48.5%; font-size:0.600em;}
.menu-trigger{display:block; width:20%; margin:0.7% 0 0 30%;}
nav ul{display:none; margin:1.0% 0 0 0;}
h1{font-size:2em;}
h2{font-size:2em;}
.final_form_info{padding:4% 0 0 0; margin:0 2% 0 0; width:100%; float:left;}
h5{margin:0 2%; font-size:0.580em;}
.left{width:100%;}
.right{padding:1% 0 0 0; margin:5% 0 0 0; float:left; width:100%; text-align:left; border-top:1px solid #dddddd;}
button{width:56%;}
.wizard > .content > .body label.error{font-size:0.600em;}
}