*, *:after, *:before { box-sizing: border-box; }
body { line-height: 1;   font-family: 'roboto', sans-serif; font-weight: lighter; color: #fff; margin:0; padding:0;}
a, p,h1, h2, span{margin: 0; padding:0;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
header { display: flex; justify-content: center; align-items: center; width: 100%; background: #fff; margin:0; padding:0; }
header .wrapper { width:1200px; display: flex; justify-content: center; align-items: center; margin: 0; padding: 92px 0px 92px 0px; }
header .wrapper figure { justify-content: center; align-items: center; padding:0; margin:0; }
header .wrapper figure img { padding:0; margin:0; } 

main { display: flex; justify-content: center; align-items: center; width: 100%; background: #f47421; margin:0; padding:0; }
main .wrapper { width:1200px; display: flex; justify-content: center; align-items: center; margin: 0; padding: 94px 0px 94px 0px;}
main .wrapper article{ text-align: center;  text-decoration: none; line-height: 1; font-family: 'roboto', sans-serif; font-weight: lighter; color: #fff;}
main .wrapper h2{ text-transform: uppercase; font-size: 35px; font-weight: bolder; line-height: 35px; font-family: 'roboto', sans-serif; color: #fff; }
main .wrapper p{  text-transform: uppercase; font-size: 20px; font-weight: lighter; line-height: 25px; font-family: 'roboto', sans-serif; color: #fff;}

footer { display: flex; justify-content: center; align-items: center; width: 100%; background: #505050; margin:0; padding:0; }
footer .wrapper { width:1200px; display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 0; padding: 92px 0px 92px 0px;}
footer .wrapper address{ text-align: center;  text-decoration: none; line-height: 24px;  font-family: 'roboto', sans-serif; font-weight: lighter; color: #fff; font-style: normal; }
footer .wrapper address h2{ text-transform: uppercase; font-size: 35px; font-weight: bolder; line-height: 35px; font-family: 'roboto', sans-serif; color: #fff; }
footer .wrapper address p{  text-transform: uppercase; font-size: 20px; font-weight: lighter; line-height: 25px; font-family: 'roboto', sans-serif; color: #fff;}
footer .wrapper label{ text-align: center;  text-decoration: none; text-transform: uppercase; font-size: 20px; font-weight: lighter; line-height: 25px; font-family: 'roboto', sans-serif; color: #fff;  }  
footer .wrapper label a{ text-decoration: none; line-height: 24px;  font-family: 'roboto', sans-serif; font-weight: lighter; color: #fff; color: #f47421; }

@media only screen and (min-width: 40em) and (max-width: 64em) and (orientation: landscape)  {
header .wrapper { width:100%;  margin:  0px; }
header .wrapper figure { width: 360px; }
header .wrapper figure img { width: 100%; }
main .wrapper { width:100%;  margin: 30px 0px; }
main .wrapper article{ padding: 0px 30px; }
footer .wrapper { width:100%;  margin:  0px; }
footer .wrapper address { padding: 0px 30px; }
}

@media only screen and ( min-width: 40em ) and ( max-width: 64em ) and ( orientation: portrait )  {
header .wrapper { width:100%;  margin: 30px 0px; }
header .wrapper figure { width: 360px; }
header .wrapper figure img { width: 100%; }
main .wrapper { width:100%;  margin: 30px 0px; }
main .wrapper article{ padding: 0px 30px; }
footer .wrapper { width:100%;  margin: 30px 0px; }
footer .wrapper address { padding: 0px 30px; }
}

@media only screen and ( max-width: 39.9375em ) {
header .wrapper { width:100%;  margin: 0px; }
header .wrapper figure { width: 360px; }
header .wrapper figure img { width: 100%; }
main .wrapper { width:100%;  margin: 30px 0px; }
main .wrapper article{ padding: 0px 30px; }
footer .wrapper { width:100%;  margin: 0px; }
footer .wrapper address { padding: 0px 30px; }
}