/* Generated by Font Squirrel (https://www.fontsquirrel.com) on May 6, 2016 */
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on May 6, 2016 */
@font-face {
    font-family: 'ralewaylight';
    src: url('fonts/raleway-light-webfont.eot');
    src: url('fonts/raleway-light-webfont.svg#ralewaylight') format('svg'),
    	 url('fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-light-webfont.woff2') format('woff2'),
         url('fonts/raleway-light-webfont.woff') format('woff'),
         url('fonts/raleway-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya_sansregular';
    src: url('fonts/alegreyasans-regular-webfont.eot');
    src: url('fonts/alegreyasans-regular-webfont.svg#alegreya_sansregular') format('svg'),
    	 url('fonts/alegreyasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alegreyasans-regular-webfont.woff2') format('woff2'),
         url('fonts/alegreyasans-regular-webfont.woff') format('woff'),
         url('fonts/alegreyasans-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
* { 
  margin: 0; 
  padding: 0; 
}
html,body{
	height:100%;
	font-family: 'alegreya_sansregular', sans-serif;
}
img{
	max-width:100%;
}
.siteWrapper{
    height:100%;
}
.noScroll{
    overflow: hidden;
}
.clear{
    clear:both;
}
a{
    text-decoration: none;
}
/*------------------Page Transitions--------------------*/
.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/*------------------Top Panel Styling-------------------*/
/*------------------Showroom Button---------------------*/
.showroomButton{
    position: fixed;
    bottom:1em;
    left:1em;
    opacity:.5;
    z-index:999;
    max-width:90px;
}
.showroomButton:hover{
    opacity:1.0;
}
/*-----------------Social Buttons-----------------------*/
.socialWrapper{
    position:   fixed;
    z-index: 9999;
    right: 1.35em;
    top:1em;
    display:block;
    z-index:3;
}
.socialStuck{
    top:3em;
}
.social ul li{
    list-style: none;
}
/*-----------------Main Menu Styling--------------------*/
.menuWrapper{
    display:block;
    width:100%;
    background-color: #FFFFFF;
    position: fixed;
    top:0;
    z-index:9999;
}
.menu{
    width:100%;
    background-color: #669999;
    height:2em;
}
#ulMenu{
    display:none;
}
.leftMenu, .rightMenu, .endMenu{
    width:48%;
    float: left;
    text-align: right;
    padding-right: 2%;
}
.rightMenu{
    background-color: #999999;
    height:2em;
}
.menu a{
    text-decoration: none;
    font-family: 'alegreya_sansregular', sans-serif;
    color:#FFFFFF;
    font-size: 1em;
    font-weight:300;
    vertical-align: middle;
}
/*--------------Video Styling---------------------------*/
video.mainVideo { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.playDiv{
    position:fixed;
    top:50%;
    left:50%;
    cursor: pointer;
    z-index: 1;
}
.closeVideo{
    display:none;
    position: fixed;
    top:3em;
    right:1em;
    cursor:pointer;
    z-index: 1;
}
.showroomBackgroundImage{
    background: url(../images/main/showrooms/videoBackground.jpg) no-repeat;    
}
.backgroundImage{
    background: url(../images/main/videoBackground.jpg) no-repeat;
}
.backgroundImage, .showroomBackgroundImage{
    position:fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; 
}
/*--------------Main Logo-------------------------------*/
.mainLogo{
    z-index: 99;
    position: absolute;
    top:8%;
    left:4%;
}
/*--------------About Section Styling-------------------*/
.spacer {
    display: block;
    height: 100%;
    position: relative;
}
.aboutWrapper {
    background-color: #676766;
    z-index: 2;
    position: relative;
    padding:4%;
    color:#FFFFFF;
}
.aboutHeader{
    text-align: center;
}
.aboutHeader h2{
    font-family: 'ralewaylight';
    font-weight: 100;
}
.aboutInner{
    text-align: center;
}
.aboutInline {
    display: inline-block;
    width: 80%;
    padding: 4%;
    vertical-align: top;
    text-align: left;
}
.aboutImage{
    margin-bottom:1.5em;
}
.aboutText p {
    line-height: 2em;
}
/*----------------Work Section -------------------------*/
.workWrapper{
    z-index:2;
    position: relative;
    font-family: 'ralewaylight';
    background-color: #FFFFFF;
}
.workHeader{
    padding:1em;
    text-align: center;
}
.workHeader h2{
    font-weight: 100;
}
.workBox, .activeBox{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    cursor: pointer;
    height: 0;
    padding-bottom: 50%;
}
.workImageWrapper{
    opacity: 1;
    -o-transition:opacity .2s ease-out, background 1s ease-in;
    -ms-transition:opacity .2s ease-out, background 1s ease-in;
    -moz-transition:opacity .2s ease-out, background 1s ease-in;
    -webkit-transition:opacity .2s ease-out, background 1s ease-in;
    /* ...and now override with proper CSS property */
    transition:opacity .2s ease-out, background 1s ease-in;
}
.workText {
    margin: 0 auto;
    position: relative;
    margin-top: -100%;
    width: 80%;
    text-align: center;
    color:#FFFFFF;
    background-color: rgba(103, 103, 102, 0.55);
}
.visit{
    display:none;
    border: .075em #FFFFFF solid;
    padding: .5em;
    margin: 0 auto;
}
.activeBox .workImageWrapper{
    opacity:.025;
}
.activeBox .workText{
    background: transparent;
}
.workBox:hover .workImageWrapper{
    opacity:.025;
}
.workBox:hover .visit{
    display:block;
}
.workBox:hover .workText{
    background: transparent;
}

.workText h1 {
    font-size: 1.25em;
    font-weight: 300;
    padding:4%;
}
#workCorporate{
    background-color: #669999;
}
#multiFamily{
    background-color:#666666;
}
#workMillwork{
    background-color:#CC6600;
}
#workResidential{
    background-color:#006699;
}
#showroomComponents{
    background-color: #6B646A;
}
#showroomFloorplans{
    background-color: #D3BC8B;
}
#showroomMillwork{
    background-color: #333329;
}
#showroomJobs{
    background-color: #99CCCC;
}
/*----------------Slick Styling-------------------------*/
.slick-slider{
    z-index: 4;
}
.slick-prev, .slick-next {
    font-size: 0;
    height: 69px;
    width: 69px;
    position: absolute;
    top: 75%;
    z-index: 999;
    border: 0;
    opacity: .50;
}
.slick-prev{
    background-image: url('images/prev.png');
    background-repeat: no-repeat;
    left: 1em;
}
.slick-next{
    background-image: url('images/next.png');
    background-repeat: no-repeat;
    right:1em;
}
.slick-dots{
    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: #CACACA;
}
.slick-dots li button:hover{
    background:#494949;
}
li.slick-active button {
    background: #494949;
}
button{
    background-color: transparent;
}
.workSliderBackground{
    padding:1.5em;
}
.workSliderLabelWrapper{
    margin-left:3%;
    margin-right:3%;
}
.workSliderLabel {
    text-align: center;
}
a>.workSliderLabelWrapper>.workSliderLabel h2{
    color: #505050;
    background: rgba(255, 255, 255, 0.50);
    padding: .5em;
    font-family: 'ralewaylight';
    position: relative;
}
.workDetailWrapper{
    background-color: #FFFFFF;
    position: relative;
    z-index: 4;
}
.workHide{
    visibility: hidden;
    overflow: hidden;
    height:0;
}
.workActive{
    visibility: visible;
}
/*----------------Team Styling--------------------------*/
.teamWrapper {
    position: relative;
    background-color: white;
    z-index: 4;
}
.hide{
    display:none;
}
#teamHeader{
    text-align: center;
    color:#999999;
    padding:2em;
}
#teamHeader h1{
    font-family: 'ralewaylight';
    font-weight:100;
}
.teamMember {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}
.teamImageNameWrapper{
    padding:5%;
    cursor: pointer;
}
.teamMemberName {
    text-align: center;
    color: #999999;
}
.teamMemberName h3 {
    font-weight: 100;
}
.teamMemberContent {
    display: none;
}
.teamMemberContentIcons{
    padding:1em;
}
.teamMemberContent{
    padding:1.5em;
}
.teamHero{
    cursor: pointer;
}
.closeButton{
    cursor: pointer;
}
img.closeButton {
    width: 35px;
    height: 35px;
    position: relative;
    float: right;
}
/*----------------Contact Styling-----------------------*/
.contactWrapper{
    clear:both;
    padding:2em;
    font-family: 'alegreya_sansregular', sans-serif;
    color:#FFFFFF;
    background-color: #666666;
    z-index:4;
    position: relative;
}
.contactHeader{
    text-align: center;
}
.contactHeader h2{
    font-family: 'ralewaylight';
    font-weight: 100;
    margin-bottom:1em;
}
.contactContent{
    width:100%;
}
.formContainer{
    margin:0 auto;
    max-width:38em;
}
.hawkinsInput{
    width:100%;
    margin-bottom: 1em;
    background-color: #666666;
    border: .10em #FFFFFF solid;
    padding:.30em;
}
::-webkit-input-placeholder {
   color: #FFFFFF;
   text-align: center;
   font-weight: lighter;
}

:-moz-placeholder { /* Firefox 18- */
   color: #FFFFFF; 
   text-align: center; 
   font-weight: lighter;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #FFFFFF; 
   text-align: center; 
   font-weight: lighter;
}

:-ms-input-placeholder {  
   color: #FFFFFF;  
   text-align: center;
   font-weight: lighter;
}
textarea{
    height:auto;
    font-size: 1.25em;
    border: .075em #FFFFFF solid !important;
    font-weight: lighter;
}
.g-recaptcha {
    margin: 0 auto;
    width: 50%;
    display: block;
    margin-bottom: 2em;
    overflow: hidden;
}
.submit{
    background-color: #666666;
    border: .10em #FFFFFF solid;
    padding:1em;
    color:#FFFFFF;
    font-weight: lighter;
}
.submitContainer{
    text-align: center;
}
/*----------------Responsive Queries--------------------*/
@media all and (min-width:45em){
    /*Responsive Menu */
    #ulMenu{
    display:block;
    }
    .menu ul li{
    list-style: none;
    display:inline;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
    height: 2em;
    background-color: white;
    }
    .menu li a{
    color:#999999;
    }
    .leftMenu{
    width:32%;
    }
    .rightMenu{
    width:64%;
    }
    /*Responsive About */
    .aboutInline {
    width: 42%;
    padding: 4%;
    vertical-align: top;
    }
    .aboutRight{
    width:42%;
    float:right;
    }
    /*Responsive Work */
    .workBox, .activeBox {
    width: 25%;
    padding-bottom:25%;
    }
    /*Responsive Team */
    .teamMember{
        width:20%;
    }
    .workText{
        margin-top:-80%;
    }
}
@media all and (min-width:61em){
    .leftMenu, .rightMenu{
        width:48%;
    }
    .menu ul li{
        padding-left: 4%;
        padding-right: 4%;
    }
}