/*
 * Theme Name: My Timber Starter Theme
 * Description: Starter Theme to use with Timber
 * Author: Upstatement and YOU!
*/



/*
*
* Colors
*
* black: #0C120C
* grey: #6D7275
* light-grey: #C7D6D5
* white: #fff
* off-white: #fafafa
*
* BRAND COLORS
*
* red: #B22019
* magnolia: #ECEBF3 
*
*/

/* CSS HEX 
carnelian: #b22019;
rich-black-fogra-39: #0c120c;
sonic-silver: #6d7275;
light-gray: #c7d6d5;
magnolia: #ecebf3;
*/




/*
*
* Doc
*
*/

html{
    overflow-x:hidden
}


body{
    font-family: Lato, Helvetica, sans-serif;
    font-size:16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color:#0C120C;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

/*
*
* Base
*
*
*/

/*  CONTENT WRAPPER IS DOUBLED BECAUSE OF BASE.TWIG  */
.content-wrapper{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    padding-bottom:5vh;
    padding-top: 5vh;
    flex: 1;
}

h1{
    font-size: 50px;
    font-family: Lato, Helvetica, sans-serif;
    color:#B12A24;
}

h2{
    font-size: 21px;
}


h3{
    font-size: 18px;
    text-decoration: none;
    font-style:normal;
}

p{
    font-size: 16px; 
}

p .small{
    font-size: 10px;
}

a {
    color: #0C120C;
    text-decoration: none;
}

a:hover{
    color:#B12A24;
    text-decoration: none;
}

a:after{
    color: #0C120C;
    text-decoration: none;

}

.spacer{
    color: #6d7275;
    width:100%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    font-size: 48px;
    text-align: center;
    display: none;
}

/*
*
* Menu / Nav
*
*/

/* Full bar across, stuck to top of screen */
.navWrapper{
    width: 100%;
    height:auto;
    position: fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
    padding:0;
    background-color:#fafafa;
    align-items:center;
    z-index: 1;
}

/* Logo on the ftand side */
.navWrapper .logo{
    position: fixed;
    top:3vh;
    left:9.5vw;
    right:0;
    width: 50vw;
    padding-top: 12.5vw;
    padding-bottom:2vh; 
    z-index: 2;
}



/* Main nav with ul and li pieces */
nav{
    width: 50vw;
    margin:0;
    margin-right: 9.5vw;
    padding-top: 2vh;
    background-color: #fafafa;
    overflow:hidden;
    float:right;
    align-items: center;
}

nav .icon {
    padding-top: 0;
    padding-bottom: 5vh;
    margin:0;
    float: right;
    display: block;
    font-size: 5vw;
}

nav ul{
    display: none;
}

nav ul li{
    display: none;
}

/* RESPONSIVE WHEN MENU CLICKED*/

nav.responsive {
    width: 100vw;
    clear: both;
    overflow: hidden;
	position: -webkit-sticky; /* Safari */
    position: sticky;
    margin-right: 0;
}

nav.responsive .icon {
    position:absolute;
    top: 4.25vh;
    right: 9.5vw;
    margin:0;
    margin-bottom: 5vh;
    display: block;
    font-size: 5vw;
    clear: both;
}

nav.responsive .logo{
    margin-bottom: 15vh;
}

nav.responsive ul{
    display: block;
  	width: 100vw;
  	text-align: right;
 	margin: 0;
    padding: 0;
    padding-top: 2vh;
    margin-right: -9.5vw;
    float: none;
    clear: both;
}

nav.responsive ul li{
    display: inline-block;
  	width: 100vw;
  	text-align: center;
    margin: 0;
    padding: 0;
    float: none;
    clear: both;
}

nav.responsive ul li ul{
    margin-top: 0;
}

nav.responsive ul li ul li{
    margin-top: -2vh;
    color: #6d7275;
}

/* janky solution to menu float right, reverse order & the lack of space between an abs div and reg div */
nav.responsive .hide{
    display:block;
}

nav .hide{
    display:none;
    width: 100%;
    margin-top: 12vh;
}

nav .menu-regular ul{
    display: none;
}

nav .menu-reverse ul{
    display: block;
}

nav.responsive .menu-regular ul{
    display: block;
}

nav.responsive .menu-reverse ul{
    display: none;
}


/*
*
* Pages
*
*/


.heroImage{
    margin-left:-10vw;
    margin-right:-10vw;
    margin-top:0;
    padding-top:0;
}

.heroImage img{
    width:100%;
    margin-top:0;
    padding-top:0;
}


.overviewHead{
    width:100%;
    background-color:#fff;
}

.overviewHead h1{
    text-align: center;
    text-transform: uppercase;
    font-family: Lato, Helvetica, sans-serif;
    margin-bottom:0;
    margin-top: 5vh;
}
.overviewHead h2{
    text-transform: none;
    font-family: Lato, Helvetica, sans-serif;
    color:#6d7275;
    line-height: 2;
    text-align: center;
}

/*
*
* Home
*
*/

.heroInfo{
    margin-left: 10vw;
    width: 80vw;
    margin-right: 10vw;
}

.heroInfo h2{
    padding-top: 8vh;
    font-size: 36px;
    text-align: center;
    color: #fff;
}

.heroInfo .button{
    width: 30%;
    margin-left: 35%;
    margin-right: 35%;
    padding:0;
    height: 6vh;
    background-color:#B12A24;
    color: #fff;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.heroInfo .button:hover{
    opacity:0.8;
}

.contactInfo h2 {
    padding-top: 2vh;
}

.contactFormSide h2 {
    padding-top: 2vh;
    background-size: ;
}


/*
*
* Products
*
*/
.productSq {
    width: 100%;
    padding-top:100%;
    margin-top: 2vh;
    position:relative;
    float: left;
    background-color: #ecebf3;
}

.productSq:hover { 
    opacity: 0.5;
}

.productBody {
    width: 100%;
    padding-top:100%;
    position: absolute;
    top: 0;
    opacity: 0;
    display:flex;
    justify-content: center;
    align-items: center;
}

.productBody h2{

    display:none;
}

.productBody h2:hover {
    display:flex;
    opacity:1;
    background-size: contain;
    color:#B12A24;
    text-transform: uppercase;
    margin: 0;
}





/*
*
* Services & About (for team member section)
*
*/

.singleService{
    width:100%;
    margin-bottom: 2vh;
    margin-top: 2vh;
    float:left;
    clear:both;
}

.serviceImage{
    width:100%;
    padding-bottom:0;
    margin-bottom:0;
    float:left;
}

.serviceImage img{
    width:100%;
    padding:0;
}

/*
.serviceImage .button{
    width: 30%;
    height: 22%;
    margin-top:3vh;
    padding-left: 35%;
    padding-right: 35%;
    float:left;
    background-color:#B12A24;
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;

}

.serviceImage .button:hover { 
    opacity: .8;
}
*/


.serviceBody{
    margin-top:0;
    padding-top:0;
    width: 100%;
    float: left;

}

.serviceBody h2{
    margin-top:0;
    padding-top:1vh;
}


/*
*
* Contact Page
*
*/

.contactWrapper{
    width: 100%;
    height: auto;
}

.contactInfo{
    width: 100%;
    float:left;
}

.socials{
    float: left;
    width: 10%;
    padding-right: 5%;
    padding-top: 10%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    
}

.contactFormSide{
    width: 100%;
    float:left;
    padding-bottom: 5vh;
}


/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
 color:#0C120C; 
}
 
 
/** WPFORMS BUTTON COLOR **/
.wpforms-form button{
 background-color:#B22019; 
}
 
/** WPFORMS SUBMIT BUTTON **/
button.wpforms-submit{
 color:#fff; 
 background-color:#B22019; 
}
 
/** WPFORMS SUBMIT BUTTON Hover **/
button.wpforms-submit:hover{
 opacity: 0.8; 
}

/** WPFORMS CONFIRMATION **/
.wpforms-confirmation-container-full {
    background: #C7D6D5;
    color: #0C120C;
    border: none;
}



/*
*
* Footer
*
*/


footer{
    width: 100%;
    height: 25vh;
    margin:0;
    padding:0;
    float: left;
    clear: both;
    background-color: #fafafa;
}

footer h3{
    text-align:center;
    padding-top: 5vh;
    color:#B12A24;
    margin-bottom:0;
}

footer h4{
    text-align: center;
    font-size: 16px;
    color:#6d7275;
    margin-top:0;
}

footer p{
    text-align: center;
    font-size: 10px;
    color:#6d7275;
}