@import url(https://fonts.googleapis.com/css?family=Oswald);
@font-face {
    font-family: 'gotham_boldregular';
    src: url('gotham-bold-webfont.eot');
    src: url('gotham-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('gotham-bold-webfont.woff2') format('woff2'),
         url('gotham-bold-webfont.woff') format('woff'),
         url('gotham-bold-webfont.ttf') format('truetype'),
         url('gotham-bold-webfont.svg#gotham_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'gotham_light';
    src: url('gotham-light-webfont.eot');
    src: url('gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('gotham-light-webfont.woff2') format('woff2'),
         url('gotham-light-webfont.woff') format('woff'),
         url('gotham-light-webfont.ttf') format('truetype'),
         url('gotham-light-webfont.svg#gotham_bookregular') format('svg');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'gotham_bookregular';
    src: url('gotham-book-webfont.eot');
    src: url('gotham-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('gotham-book-webfont.woff2') format('woff2'),
         url('gotham-book-webfont.woff') format('woff'),
         url('gotham-book-webfont.ttf') format('truetype'),
         url('gotham-book-webfont.svg#gotham_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


*{margin:0; padding:0; box-sizing:border-box;}

html, body{max-height:100%; min-width:450px; overflow:hidden;}

body{font-family: "gotham_bookregular", sans-serif; background-color:#221f1a; min-height:800px; }

nav{font-family: Oswald, sans-serif; color:#fff; height:3em; position:relative; text-transform:uppercase; margin:auto; text-align: center;}

nav li{opacity:.55; display:inline-block; line-height:3em; margin:0 1em; transition:all .5s; cursor:pointer;}
nav li.active{opacity:1;}

#bg{
    width:100%; 
    top:0; bottom:0;
    overflow:hidden;
    position:fixed;
}

#bg img{transform-origin: left top; position:relative; left:0; transition: all 1s;}
#indicator{position:absolute; width:70px; height:8px;
    background:rgba(47, 1, 1, 0.75); 
    border-radius: 0 0 8px 8px; transition:all .5s; opacity:.6;}

#logo{position:fixed;
width:500px;
height:500px;
background:url(../images/Hg-logo-screened.png) no-repeat;
top:40%;
margin-top:-250px;
transition:all 1s;
}

section{position:absolute; width:58%; margin: 0 5% 0 33%; top:26vh;  opacity:0;  pointer-events:none; display:none;}
section.active{display:block;pointer-events:all;}
#svcs.li{position:relative;}

#thumbnails li{opacity:0;}
#thumbnails img:hover{transform:scale(1.1);}
#training{top:20vh; color:rgba(255, 255, 255, 0.65);}


input, textarea{width:370px; background:rgba(0,0,0,.4);color:#fff;border:solid 1px rgba(0,0,0,0); outline: none;padding:5px; font-size:.8em;margin-bottom:5px;
transition:all .3s ease-in-out;position:relative; opacity:0;
}
textarea{margin-top:3px;}
input[type=submit]{width:120px;margin-left:250px;
background:#000;color:#747474;transition:all .33s;
    -webkit-appearance: none; border:none;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
border:1px solid rgba(255, 144, 16, 0.75);
box-shadow:0 0 7px #ff8217;
    background-color:rgba(0,0,0,.4);
}
input[type=submit]:hover{background:#f78f16;color:#fff;}

.error{background-color:rgba(0,0,0,.6); border:1px solid #b40707;}
input.error:after{
content:" !";
    color:#b40707;
}

/* TYPOGRAPHY */

p, section ul{line-height:1.66em; margin-bottom:.66em}
section ul{padding-left: 1.25em;}
h1{font-size: 1.5em;  font-family: 'gotham_light'; margin-bottom:10px;}
h2{font-size:1.2em; font-family:gotham_boldregular; margin-top:.4em; margin-bottom:.2em;}
a, a:visited{color:#ffd144; text-decoration:none; opacity:.75; text-shadow: 1px 1px 2px rgba(60, 39, 5, 0.8); transition:all .4s; pointer-events:all;}



a:hover{color:#fff; text-shadow: 2px 2px 2px rgba(5, 5, 5, 0.9);}



#icons{float:left; list-style-type: none; margin-left: -90px; position:relative; }
#icons li{width:42px; height:42px; margin-bottom:12px; box-shadow:2px 2px 4px #000;opacity:0; }

#confirmation{opacity:0;pointer-events:none; color:rgba(255, 255, 255, 0.55);}


/* portfolio */
#work{margin:0 0 0 25%;  width:75%;max-width:700px;}
#thumbnails li{display:inline-block;  margin: 0 10px 10px 0; }
#thumbnails img{display:block;transition:all .3s; box-shadow: 4px 4px 37px #000; border-top: 1px solid rgba(255, 255, 255, .3);border-left: 1px solid rgba(255, 255, 255, .3); cursor:pointer; }


figure{position:absolute;
left:0; right:0; bottom:0; top: 52px;
background:rgba(0,0,0,.5);
    font-weight:300;
    padding: 100px 15% 0 20%;
 display:none;
    opacity:0;
}
figure img{box-shadow: 4px 5px 12px #000, 2px 2px 60px #000;max-width:100%;}
.noShadow{box-shadow: none !important;}
.x{font-size:3em; top:75px; right:25px; position:fixed; color:#fff; cursor:pointer; }
figcaption{margin-top:1em; color:#fff; font-size: 1.2em; transition:all .7s;}
.category{text-transform:uppercase; font-family:'gotham_boldregular';}
figcaption a{float:right;}


/* Contact Form */

.validationerror{border:none; background:none; color:#f00; float: right; width: 220px;}

@media  only screen and (max-width:450px){
    #logo, #icons, #thumbnails, #indicator{display:none;}
    section{width:100%; margin: 0; top: 5em; padding: 0 10px;}
    #training{top:5em;}
    p{line-height:1.4em;}
    .hfss{display:none;}
    #work{margin:auto;  width:90%;}
      nav li{ font-size: 1.1em; margin:0 8px;}
    nav{left:-50px;}
}