@font-face {
  font-family: ProximaNovaSemibold;
  src: url("/css/fonts/Proxima Nova Semibold-webfont.ttf");
  /*
  Proxima Nova Alt Regular-webfont.ttf
  Proxima Nova Alt Black-webfont.ttf
  Proxima Nova Alt Bold-webfont.ttf
  Proxima Nova Semibold-webfont.ttf
  */
}

@font-face {
  font-family: ProximaNovaThin;
  src: url("/css/fonts/Proxima Nova ScOsf Thin-webfont.ttf");
}

@font-face {
  font-family: ProximaNovaAltRegular;
  src: url("/css/fonts/Proxima Nova Alt Regular-webfont.ttf");
}

header {
    height:400px;
    min-height:600px;
    width:100%;
    /* border: 1px solid green; */
}

body {
    background-color:#000;
    color:#fff;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 0px;
    padding-left:0px;
    margin-right: 0px;
    padding-right:0px;
    margin-bottom: 0px;
    padding-bottom:0px;
    font-family: ProximaNovaThin;
    font-size: 2em;
}

footer {
    background-color:#444;
    /* height:300px; */
    padding-bottom:80px;
}

a { color: inherit; text-decoration:none; }

header > nav { 
    padding: 30px 0;
    /* border: 1px solid red; */
    text-align: right;
}

.logo{
    /* border:1px solid #f80; */
    float:left;
    padding-left:20px;
}

.logoImage {
    width:5vw;
}

.navLinks {
    padding-right:80px;
}

header nav a{
    color:#ccc;
    padding-left:20px;
    letter-spacing: 0.1em;
    font-family: ProximaNovaSemibold;
    font-size: 0.4em;
}

header nav a:hover { 
  color: #fff;
}

.headerHome {
    background: #000000 url(/img/home-hero.jpg) 100% 100% no-repeat;
    /* border: 1px solid green; */
    background-size: cover;
    height:400px;
    min-height:600px;
    width:100%;
}

.center {
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  
  border: 3px solid green;
  padding: 10px;
}

.headerText {
    padding: 170px 0;
    /* border: 1px solid blue; */
    text-align: center;
    font-size:2em;
    margin:auto;
    text-transform: uppercase;
    /* height:500px; */
}

.mainBody {
    width:100%;
    background-color:#eee;
    text-align:center;
}

.mainText {
    color:#000;
    padding-top:50px;
    padding-bottom:50px;
    /* margin-left:10%;
    margin-right:10%;
    */
    
    margin-left:10vw;
    margin-right:10vw;
    
    text-align:center;
}

footer > nav {
    padding: 30px 0;
    text-align: center;
    font-size: 0.5em;
}

footer nav a{
    color:#bbb;
    padding-left:20px;
    letter-spacing: 0.1em;
    font-family: ProximaNovaSemibold;
    font-size: 0.8em;
}

.copyright {
    color:yellow;
    text-align: center;
    font-size: 0.4em;
}

/* GENERAL CSS */


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  grid-auto-rows: 1fr;
}

.grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

/* Just to make the grid visible */

.grid > * {
  background: rgba(0,0,0,0.1);
  /* border: 10px solid none; */
  margin:20px;
}

menubutton {
    display:none;
    background-color:green;
}

.hamburger {
    display:none;
    background-color:green;
}

hamburger-box {
    display:none;
    background-color:green;
}

@media only screen and (max-width: 600px) {
    header nav a{
        /* color:red; */
        padding-left:10px;
        margin-right:20px;
        letter-spacing: 0.3em;
        font-family: ProximaNovaSemibold;
        font-size: 0.8em;
        display:block;
    }
    
    .headerText {
        padding: 70px 0;
        /* border: 1px solid blue; */
        text-align: center;
        font-size:1em;
        margin: auto;
        font-family: ProximaNovaSemibold;
        /* height:500px; */;
    }
    
    .logoImage {
        width:20vw;
    }

    .mainText {
        color:#000;
        font-size:0.6em;
        padding-top:50px;
        padding-bottom:50px;
        /* margin-left:10%;
        margin-right:10%;
        */
        
        margin-left:10vw;
        margin-right:10vw;
        
        text-align:center;
    }


}


/* iPhone X */

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {
        
        .mainText {
            
            font-size:0.6em;
            padding-top:50px;
            padding-bottom:50px;
            /* margin-left:10%;
            margin-right:10%;
            */
            
            margin-left:10vw;
            margin-right:10vw;
            
            text-align:center;
        }   
    }



/*
.grey { 
    filter: grayscale(100%); // Current draft standard
    -webkit-filter: grayscale(100%); // New WebKit
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); // Not yet supported in Gecko, Opera or IE
    filter: url(resources.svg#desaturate); // Gecko
    filter: gray; // IE
    -webkit-filter: grayscale(1); // Old WebKit
    
    -webkit-transition: width 2s; // Safari
    transition: width 2s;
}

.grey:hover { 
    filter: grayscale(0%); // Current draft standard
    -webkit-filter: grayscale(0%); // New WebKit
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); // Not yet supported in Gecko, Opera or IE
    filter: url(resources.svg#desaturate); // Gecko
    filter: gray; // IE
    -webkit-filter: grayscale(0); // Old WebKit
}
*/