﻿/*animations*/
.loadingAnimation {
	-webkit-animation: animLoadContent 1s cubic-bezier(0.5,0,0.3,1) both;
	animation: animLoadContent 1s cubic-bezier(0.5,0,0.3,1) both;
}

.loadingAnimation {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@-webkit-keyframes animLoadContent {
	from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); }
}

@keyframes animLoadContent {
	from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); transform: scale3d(0.3,0.3,1); }
}

* {
   margin: 0px;
   padding: 0px;
}

html{
    font-family: 'Helvetica Neue';
    font-weight:300;
    /*text color*/
    color:#252525;

}

body {
    text-align: center;
    /*Without this, the body has excess horizontal scroll when the menu is open */
    /*overflow-x: hidden;*/  
    background-color:#2D2D30;
}

#logoImage{
    position: fixed;
    /*logo position*/
    /*left:0;*/
    /*right:0;*/
    /*margin:auto;*/
    z-index:3;
}

#menuTray{
    background-color:white;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    padding-left:15px;
    padding-bottom:10px;
    width:100%;
    border-bottom:solid 2px #F7A34A;
}

#blockContent{
    background-color:black;
    color:white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    height: 10%;
    opacity:.3;
    width:100%;
    overflow:hidden;
}

a{
    text-decoration:none;
    color:#ACBD5D;
    cursor:pointer;
}
a:hover{
    color:#F7A34A;
    /*text-decoration:underline;*/
}

a:visited{
    text-decoration:none;
    color:#ACBD5D;
}

/*Navigation Menu*/
.navigation {
    /* critical sizing and position styles */
    top: 0px;
    right: 0;
    left: 0;
    z-index: -201;
    /*bulleted style: none, numbers, letters, greek, etc...*/
    list-style: none;
    padding:0px 0px 0px 0px;

    /*vertical menu tray color*/
    background-color:#2D2D30;

    -webkit-overflow-scrolling:initial;
}

.nav-item {
    /*clears padding so it can be set at the correct top or left based on viewport size*/
    padding:0px;
}

.nav-item a {
    /* non-critical appearance styles of links*/
    color: white;
    text-decoration: none;
    /*sets how long the color change will take when hovering over menu item*/
    /*transition: color 0.2s, background 0.5s;*/
}

.nav-item a:hover {

}

/* Sub Menus */
.subMenu {
    width: inherit;
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    /*background-color: white;*/ /* Needs a background or else the nav will show through */

    /*background-color:#D7E0B2; 
    background-image: url('../images/dirty-old-black-shirt.png');*/

    background-color:#F3F5E7;

    /*top needs to be set to match the menuTray height in each css file*/
    top: 0;
    bottom: 0;
    left: 0;
    position:relative;
    z-index: 1;
    overflow-x: hidden;
    overflow:hidden;
    -webkit-overflow-scrolling: touch;
}

/* Nav Trigger */
.nav-trigger {
    /* critical styles - hide the checkbox input */
    position: fixed;
    visibility:hidden;
}

label[for="nav-trigger"] {
    /* critical positioning styles */
    position: fixed;
    left: 5px; 
    /*positions the hamburger icon*/
    top: 5px;
    z-index: 201;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap, #menuTray, #logoImage, #blockContent, #PhoneBanner, #LocationBanner, #footer {
    transition: left 0.5s;
}

.nav-trigger:checked + label {
    left: 73%;
}

.nav-trigger:checked ~ .site-wrap {
    left: 70%;
    box-shadow: 0 0 0px 0px #252526;
    overflow-x: hidden;
    position:fixed;
}

.nav-trigger:checked ~ #menuTray {
    left: 70%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.nav-trigger:checked ~ #logoImage {
    /*left: 80%;*/
    left:100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.nav-trigger:checked ~ #PhoneBanner {
    left: 95%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.nav-trigger:checked ~ #LocationBanner {
    left: 95%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.nav-trigger:checked ~ #footer {
    display:none;
    overflow-x: hidden;
    overflow-y: hidden;
}

.nav-trigger:checked ~ #blockContent {
    z-index:3;
    left: 70%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

#nav-icon{
    display: none;
    z-index:201;
}

#bottomFillerDiv {
     /*background-color:red;*/
}

.hundredWidth{
    width:100%;
}

.textHRight{
    text-align:right;
}

.textHLeft{
    text-align:left;
}

.textHCenter{
    text-align:center;
}

.noWrap{
    white-space: nowrap;
}

table.tableCenter {
    width:80%; 
    margin-left:10%; 
    margin-right:10%;
  }

.input{
    font-family: 'Lato', sans-serif;
    -moz-border-radius: 7px; /* Firefox */
    -webkit-border-radius: 7px; /* Safari, Chrome */
    -khtml-border-radius: 7px; /* KHTML */
    border-radius: 7px; /* CSS3 */
    border: 1px solid #006CB6;
    width: 98%; 
    line-height: 35px; 
    font-size: 25px;
}

.contactTableSpacer
{
    width:5%;
    /*outline:1px solid blue;*/
}

@media (max-width: 1025px) 
{
    .input 
    {
        line-height: 25px;
        font-size: 15px;
    }
    .contactTableSpacer
    {
        width:1%;
        /*outline:1px solid green;*/
    }
}

@media(min-width: 1024px)
{
    .contactTableSpacer
    {
        width:10%;
        /*outline:1px solid red;*/
    }
}

.validation{
    color:red;
}

/*FAQ CSS*/
label.faq {display:block; color:#069; cursor:pointer; padding:10px 0 0 0;}
label.faq + input {position:absolute; display:none;}

label.faq + input + p {
    padding: 0;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    color: #666;
    display: block;
    overflow: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: height 0ms 250ms, opacity 400ms ease-in-out;
    -moz-transition: height 0ms 250ms, opacity 400ms ease-in-out;
    -ms-transition: height 0ms 250ms, opacity 400ms ease-in-out;
    -o-transition: height 0ms 250ms, opacity 400ms ease-in-out;
    transition: height 0ms 250ms, opacity 400ms ease-in-out;
}

label.faq + input:checked + p.answer {
    height: 100%;
    opacity: 1;
    -webkit-transition: height 0s, opacity 250ms ease-in-out;
    -moz-transition: height 0s, opacity 250ms ease-in-out;
    -ms-transition: height 0s, opacity 250ms ease-in-out;
    -o-transition: height 0s, opacity 250ms ease-in-out;
    transition: height 0s, opacity 250ms ease-in-out;
}

/*Colums need to stack when width of page is reduced (for mobile browser, etc)*/
.row 
{
    font-size:17px;
}
.column-first 
{
    padding-bottom:20px;
}
.column-second {
    padding-bottom:20px;
}
.column-third {
    padding-bottom:20px;
}

.twoColumn-first 
{
    padding-bottom:20px;
}
.twoColumn-second {
    padding-bottom:20px;
}
.column-thirds{
    padding-bottom:20px;
}

@media (min-width: 1024px) 
{
	.row 
    {
		display: table;
		table-layout: fixed;
		width: 100%;
        text-align:left;
	}
	.column-first 
    {
		display: table-cell;
		width: 33%;
		padding: 0 20px;
        /*border-right:solid 3px #2D2D30;*/
		/*outline: 1px solid red;*/
	}
	.column-second 
    {
		display: table-cell;
		width: 33%;
		padding: 0 20px;
		/*outline: 1px solid red;*/
	}
	.column-third 
    {
		display: table-cell;
		width: 33%;
		padding: 0 20px;
        /*border-left:solid 3px #2D2D30;*/
		/*outline: 1px solid red;*/
	}
    .column-thirds{
		display: table-cell;
		width: 33%;
        padding: 10px 20px;
        padding-right:75px;
    }

    .twoColumn-first 
    {
		text-align:left;
        display: table-cell;
		width: 50%;
		padding: 0 20px;
        border-right:1px solid #E8E8E8;
    }
    .twoColumn-second {
        text-align:left;
		display: table-cell;
		width: 50%;
		padding: 0 20px;
    }

    .column-single-item-row 
    {
		display: table-cell;
		width: 50%;
		padding: 0 20px;
		/*outline: 1px solid red;*/
    }
    .spacer
    {
		display: table-cell;
		width: 10%;
		padding: 0 20px;
    }
}

.serviceTitle{
    /*background-color:#9186A4;*/
    background-color:#006CB6;
    font-size:22px;
    color:white;
}

.serviceLink{
    padding-top:8px;
}

.serviceLink a{
    color:#ACBD5D;
}

.serviceLink a:hover{
    color:#F7A34A;
    /*text-decoration:underline;*/
}

.sectionFooterRow{
    text-align:right;
    float:right;
}

@media (min-width: 1024px) {
	.sectionFooterRow {
		display: table;
		table-layout: fixed;
        /*outline: 1px solid blue;*/
	}
	.sectionFooterColumn {
		display: table-cell;
        white-space:nowrap;
		padding: 0 5px;
		/*outline: 1px solid red;*/
	}
}

@media (max-width: 1023px) {
	.sectionFooterRow {
		display: table;
		table-layout: fixed;
        /*outline: 1px solid blue;*/
	}
	.sectionFooterColumn {
		display: table-row;
        white-space:nowrap;
		padding: 0 5px;
		/*outline: 1px solid red;*/
	}
    .vertSpacer{
        display:none;
    }
}


.productTitle{
    background-color:#272463;
    color:white;
}

hr { 
    border: 0; 
    height: 1px; 
    background-color:#ACBD5D;
}

h3{
    text-align:left;
    padding-left:5px;
}

.cornersRound{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.topCornersRound{
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.bottomCornersRound{
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.sectionTitle{
    text-align:left;
    font-size:38px;
    color:#2D2D30;
    padding-top:25px;
    padding-bottom:10px;
}

.sectionTitleCenter{
    text-align:center;
    font-size:38px;
    color:#2D2D30;
    padding-top:25px;
    padding-bottom:10px;
}

table.center {
    margin-left:auto; 
    margin-right:auto;
}

.hidden{
    visibility:hidden;
}

.video{
    min-height:315px;
    width:100%;
    height:auto;
    max-width:500px;
}

#footer {
    position: fixed;
    text-align: left;
    background-color: #F3F5E7;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    bottom: 0;
    z-index: 2;
    font-size: 16px;
    opacity: 1;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

#footer:hover{
    /*background-color:#F4F4F4;*/
    color:#F7A34A;
    /*padding-right:10px;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    font-size:35px;*/
    opacity:1;
}

#socialFooter{
    position: fixed;
    bottom: 0;
    right:12px;
    z-index: 3;
    font-size:18px;
    opacity:1;
 
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

#socialFooter img{
    width:auto;
    max-height:20px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

/*#socialFooter:hover{
    background-color:#F4F4F4;
    padding-right:10px;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    font-size:25px;
    opacity:1;
}*/

/*#socialFooter:hover img{
    width:auto;
    max-height:50px;
}*/

.FaqAnswerSection{
    display:none;
}

.verticalSection1{
    /*background-color:#F8F7F8; 
    background-image:url('../images/blizzard.png');*/
    background-color:white;
    padding-bottom:15px;
    padding-left:5px;
    padding-right:5px;
}

.verticalSection2{
    /*background-color:#FBFDFE; */
    background-image:url('../images/blizzard.png');
    background-color:#FCFDFA;
    padding-bottom:15px;
    padding-left:5px;
    padding-right:5px;
}

.verticalSection3{
    background-color:#F3F8F8; 
    background-image:url('../images/light-wool.png');
    padding-bottom:15px;
    padding-left:5px;
    padding-right:5px;
}

.verticalSection4{
    background-color:#F2F7FB; 
    background-image:url('../images/blizzard.png');
    padding-left:5px;
    padding-right:5px;
}

.verticalSection5{

}

.verticalSection6{

}

.verticalSection7{

}

.verticalSection8{

}

.verticalSection9{

}

/*.highlightSection{
    background-color:#A1E2FD;
}*/

.highlightSection {
    -webkit-animation: target-fade 5s 1;
    -moz-animation: target-fade 5s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: #FAD1A4 }
    /*can specify new BG color if needed, but not defining returns to previous state*/
    100% { }
}
@-moz-keyframes target-fade {
    /*alternate green background color #DFE6C0*/
    0% { background-color: #FAD1A4 }
    /*can specify new BG color if needed, but not defining returns to previous state*/
    100% {}
}