/*
 * Theme Name: Custom Business Theme
 * Description: Client focused theme using twig templates and ACF. 2-10-2021.
 * Author: Jeremiah Su
*/



/*
*
* 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: 80px;
    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; 
    text-align: justify;
}

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:10%;
    padding-top: 10%;
    margin-left: 45%;
    margin-right: 45%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    font-size: 48px;
    text-align: center;
    background-image: url('./assets/sineWave.png'); 
    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
}

/*
*
* 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:2vh;
    left:9.5vw;
    right:0;
    width: 40vh;
    padding-top: 10vh; 
    z-index: 2;
}



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

.nav-main .icon {
    display: none;
}

.nav-main ul{
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow:hidden;
    align-items: center;
}

.nav-main ul li{
    display: inline-block;
    float:right;
    padding-left: 5vw;
    align-items:center;
    padding-bottom:5vh;
}

.nav-main ul li:hover{
    display: inline-block;
    float:right;
    padding-left: 5vw;
    align-items:center;
    padding-bottom:5vh;
}


.nav-main ul li ul {
    display: none;
    clear: both;
    position: absolute;
    background-color: #fafafa;
    padding-top: 5vh;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-left: -4vw;
    margin-right: 4vw;
    flex-direction: column;
}

.nav-main ul li:hover ul {
    display: flex;

}

nav ul li ul li { 
	margin-top: 0;
    margin-bottom: -2.5vh;
    padding-left: 0;
    width: 100%;
    clear: both;
    display: block;
    
}

nav .hide{
    display:none;
}

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


/*
*
* Pages
*
*/


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

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


.overviewHead{
    width:80%;
    padding-left:10%;
    padding-right: 10%;
    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;
}

/*
*
* Home
*
*/

.heroInfo{
    margin-left: 10vw;
    width: 40%;
}

.heroInfo h2{
    padding-top: 12vh;
    font-size: 36px;
    color: #fff;
}

.heroInfo .button{
    width: 24%;
    margin-left: 28%;
    margin-right: 48%;
    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;
}


/*
*
* Products
*
*/
.productSq {
    width: 30.33333%;
    padding-top:30.33333%;
    position:relative;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 1.5%;
    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:80%;
    padding-left: 10%;
    padding-right: 10%;
    float:left;
    clear:both;
}

.serviceImage{
    width:40%;
    float:left;

}

.serviceImage img{
    width:80%;
    margin-right:20%;
    margin-left:0;
    margin-top:3vh;
    padding:0;
}

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

}

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

.serviceBody{
    width: 60%;
    float: left;

}


/*
*
* Contact Page
*
*/

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

.contactInfo{
    width: 45%;
    padding-right: 5%;
    float:left;
}

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

.contactFormSide{
    width: 45%;
    padding-left: 5%;
    height:auto;
    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;
}