@font-face {
    font-family: Metropolis;
    src: url('../fonts/metropolis-latin-400-normal.ttf');  
} 
@font-face {
  font-family: OpenSans;
  src: url('../fonts/OpenSans-Regular.ttf');  
}
@font-face {
  font-family: MysteryQuest;
  src: url('../fonts/MysteryQuest-Regular.ttf');  
}
/** BODY*/
body {   
    font-family: "Open Sans", sans-serif;    
    font-size: 17px;   
    line-height: 200%;   
    margin: auto;       
    background-color: black;
}
h2 {
    text-align: center;
   
}
h3, h5 {
    text-align: center;
}
/**OUTERWRAP*/

/** HEADER */
header {
   color: white;   
   background-color: black;
   padding: 20px;
   width: 1600px;
}

.site-id {
    text-align: left;
    width: 50%;
}
.site-title   {
    font-family: 'Allura', serif;
    font-family: 'MysteryQuest', serif;
    font-size: 40px;     
    color: white;
    letter-spacing: 3px;
    line-height: 150%;
}
   
.site-description {     
    letter-spacing: 2px;
    font-size: 16x;
    color: white;
    
}
/** MENU */
.menu {
    text-align: right;
    width: 50%;
}
.css-menu ul {
    text-align: right;
    background-color: black;
}
.menuitem, .css-menu li a, .menu-node {
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    padding: 3px 0;
   
}
/**JS MENU */
.menuwrap1 {
    width: 300px;
}
.menucontent1 {
    background-color: white;
}
.menuitem1 {
    color: black;
    
}
/** TAGs*/
a {
    color: black;
    cursor: pointer;
}
h1 {
    font-size: 56px;
    line-height: 130%;
    font-family: 'Metropolis';   
    text-align: center;
}
.home h1 {
    padding-top: 70px;
}
 p {
  line-height: 170%;
}

ul {
    text-align: left;
}
h2 {
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: white;
}
.section-2 h2 {
    color: black;
}
/** MAIN */


/** SECTIONS AND SECTIONS */
.section-1 {
    background-color: black;
    color: white;
     padding: 15px 0;
}
.section-2 {
    background-color: white;
    color: black;
     padding: 15px 0;
}
.section-inner {
    text-align: left;
   
}
/**HOME*/
.home .section-inner {
    text-align: center;
}
.home.textblock .image-large {
    float: right;

}
.full-column {
    width: 1400px;
    margin: auto;
    max-width: 100%;
}
/** LINKS */
.linkbutton {
    width: 350px;
    margin: 15px;   
    padding: 15px;
}
.linkbutton img {
    width: 300px;
}
.section-1 .linkbutton {   
    background-color: white;   
}
.section-1 a {
    color: black;
}
.section-2 .linkbutton {
    background-color: black;        
}
.section-2 a {
    color: white;
}
.section-inner {
    width: 1600px;
    margin: auto;
}

.link-content-above p {
    margin: 5px auto;
}
/** BUTTONS */
.button1, .button2  {
    display: inline-block;
    border: 1px solid white;
    border-radius: 5px;
    padding: 6px 12px;
    margin: 8px;
    
}
.button2 {
    background-color: darkmagenta;
   
}
.button1 p, .button2 p {
    margin: 0;
    padding: 0;
    line-height: 100%;
  
}
.textblock .button1  a , .textblock .button2 a, .button1 a, .button2 a{
  color: white;
  text-decoration: none;
}

.textblock {
    padding: 0 20px;
    width: 1000px;
    margin: auto;
   
}
.textblock a {
    text-decoration: underline;
}
/** HOME PAGE */
.home .half-column-1, .home-half-column-2 {
    padding: 0 30px;
    
}
.home .half-column-1 {
    text-align: left;
}
.home.textblock {
   width: 1600px;
}
/** CONTACT */
.contact-form {
    width: 600px;
    margin: auto;
}

/** FOOTER */
footer {
   color: white;   
   background-color: black;
   padding: 20px;
}

footer .menu {
    width: 100%;
    text-align: center;
}
/**BREAKPOINTS */

@media only screen and (max-width: 1250px) {
    .home .textblock h1 {
        font-size: 45px;
    }
}
@media only screen and (max-width: 1050px) {
    .home .textblock h1 {
        font-size: 35px;
        padding-top: 40px;
    }
}
@media only screen and (max-width: 850px) {  
   
    .css-menu {
        display: none;        
    }
    .js-menu {
        display: block;
    }
    .site-title {
        font-size: 35px;
    }

    .menubutton {
        display: block;
        margin: auto;
       
    }     
    .menuitem {
        display: block;
    }
    .menucontent  {      
        display: none;           
    } 
    .menuwrap1 {
        display: block; 
        margin: auto;        
    } 
     .home .textblock h1 {
        font-size: 30px;
        padding-top: 0;
    }   
   
}
@media only screen and (max-width: 750px) { 
    .site-id, .menu {
        width: 100%;
        text-align: center;
    }
    .home .half-column-1, .home .half-column-2 {
        width: 100%;
        text-align: center;      
    }
    .home.textblock .image-large {
        float: none;
    }
    .home .half-column-2 img {
        width: 300px;
        padding: 20px 0;
    }
    .textblock{
        padding: 0 15px;
    }

}