html, body, div, a, p, img, ul, li, footer, header, section, h1, h2, h3, h4, span, small, br, figure {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
  vertical-align:baseline;
    background:transparent;
}
footer, header, section { 
    display:block;
}
:focus {
    outline:none; 
  }
::-moz-selection, ::selection { 
    color:#fff;
  background:#f43a3a;
  }
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .clearfix {
  display: block;
}

body {
  font-size:125%;
  font-family:futura-pt, Futura, Helvetica Neue, Arial, sans-serif;
  color:#fff;
  -webkit-text-size-adjust:100%;
  line-height:1.5em;
  background:url(../images/cartographer.png) repeat;
  } 
header {
    width:100%;
    text-align:center;
    position:relative;
  }
figure {
  width:100%;
  height: 500px
}
.logo {
  position:absolute;
  top:36%;
  width:100%;
  left:0;
}
h1 {
  font-family:Helvetica Neue, Arial, sans-serif;
  font-size:6em;
  letter-spacing:-7px;
  margin:0 0 1.2em 0;
  color:#f43a3a;
}
h1 br {
  display:none;
}
.sub_header {
border:solid 4px #f43a3a;
width:32%;
margin:0 0 0 34%;
padding:1em 0 1.1em 0;
font-size:1.2em;
font-weight:lighter;
color:#f43a3a;
}
.sub_header a {
  color:#000;
  text-decoration:none;
}
.sub_header a:hover {
  color:#fff;
}
.block h2 {
  font-size:2.4em;
  line-height:1.2em;
  text-align:center;
  font-weight:lighter;
  letter-spacing:-1px;
}
.main {
   width:100%;
   height:auto;
   float:left;
   }
.block {
  padding:7em 0 7.4em 0;
}
.dark {
  background:#000;
  color:#fff;
}
footer {
  background:#fff;
  color:#000;
  padding:3em 0;
}
footer a {
   color:#f43a3a;
   text-decoration:none;
}
footer a:hover {
   color:#62e3e1;
   }  
small {
  width:100%;
  display:block;
  text-align:center;
  font-size:0.9em;
   }  
small span {
  padding:0 1em;
}
small br {
  display:none;
}


@media (min-width: 1400px){
body {
  padding:3em 0 0 0;
}
}

@media (max-width: 1800px){
.sub_header {
width:22%;
margin:0 0 0 39%;
font-size:1em;
}
}

@media (max-width: 1700px){
.sub_header {
width:28%;
margin:0 0 0 36%;
}
}

@media (max-width: 1500px){
.sub_header {
width:30%;
margin:0 0 0 35%;
}
}

@media (max-width: 1400px){
h1 {
  font-size:5em;
  letter-spacing:-5px;
}
header {
    overflow:hidden;
  }
.main {
   width:130%;
   margin:0 0 0 -15%;
   }
.sub_header {
width:40%;
margin:0 0 0 30%;
}
}



@media (max-width: 1100px){
h1 {
  font-size:4em;
  letter-spacing:-4px;
  margin:0 0 0.8em 0;

}
.main {
   width:145%;
   margin:0 0 0 -22.5%;
   }
.block {
  padding:5em 0 5.4em 0;
}
.block h2 {
  font-size:2.2em;
  letter-spacing:0px;
}
.sub_header {
width:50%;
margin:0 0 0 25%;
}
}



@media (max-width: 880px){
h1 {
  font-size:3.2em;
}
.main {
   width:160%;
   margin:0 0 0 -30%;
   }
.block h2 {
  font-size:2em;
}
.cross {
  width:10%;
  height:auto;
}
.sub_header {
width:34%;
margin:0 0 0 33%;
}
}



@media (max-width: 700px){
h1 {
  font-size:2.6em;
  letter-spacing:-3px;
}
.main {
   width:180%;
   margin:0 0 0 -40%;
   }
.block {
  padding:4em 0 4.4em 0;
}
.block h2 {
  font-size:1.8em;
}
small br {
  display:block;
}
small span {
  display:none;
}
footer, .beige, .dark {
  background-image:none;
}
}



@media (max-width: 600px){
h1 {
  font-size:2.3em;
  letter-spacing:-2px;
}
.main {
   width:190%;
   margin:0 0 0 -45%;
   }
.sub_header {
border:none;
width:80%;
margin:0 0 0 10%;
}
}



@media (max-width: 500px){
.logo {
 top:16%;
}
h1 {
  font-size:3.2em;
  letter-spacing:-5px;
  line-height:1em;
  margin:0 0 0.25em 0;
}
h1 br {
  display:block;
}
.main {
   width:200%;
   margin:0 0 0 -50%;
   }
.block {
  padding:3em 0 3.4em 0;
}
.block h2 {
  font-size:1.2em;
}
.cross {
  width:15%;
}
footer {
  padding:2em 0;
}
small {
  font-size:0.7em;
   }
}


@media (max-width: 400px){
.logo {
 top:20%;
}
h1 {
  font-size:2.4em;
  letter-spacing:-4px;
}
h1 br {
  display:block;
}
.block {
  padding:3em 0 3.4em 0;
}
.block h2 {
  font-size:1.2em;
}
.cross {
  width:15%;
}
small {
  font-size:0.6em;
   }
}