/*  
Theme Name: O2 Solutions 2018
Description: Custom Theme for O2 Solutions Inc
Version: 1.0
Author: Daniel N Chinchilla

*/

/* COLOR PALETTE

#D74E87
O2 Pink  

#64324B
Wine

#F4F0F5
Grape Gray

#9F3D69
Dark Pink

*/

body {
    font-family: 'Muli', sans-serif;
    background: #F4F0F5;
    color: #64324B;
}

/* NAV * HEADER */
header {
    background: #D74E87;
}

.contact-bar {
    background: #9F3D69;
}

.contact-bar a {
    color: white;
    text-decoration: none;
    padding: 1em;
}

.contact-bar a:hover {
    background: rgba(0,0,0,0.2);
}

.contact-bar a img {
    padding: 0 0.5em;
}

.logo a {
    display: block;
    max-width: 220px;
}

.logo a img {
    max-width: 100%;
    height: auto;
}

nav {
    padding: 2em 1em;
}

nav .links {
    justify-content: flex-end;
}

nav .links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.3em;
    padding: 0.8em;
    border-radius: 3px;
}

nav .links a:hover {
    background: #9F3D69;
}

ul#menu-o2-navmenu {
    display: flex;
    justify-content: flex-end;
}

/* HERO BAR */

.hero-bar {
    background-color: white;
    background-image: 
        url(img/bubbles-l.svg),
        url(img/bubbles-r.svg);
    background-position:
        left -60px center,
        right -60px center;
    
    background-repeat: no-repeat;
    font-weight: bolder;
    color: #D74E87;
    height: 80vh;
    text-align: center;


}

.hero-bar h1 {
    padding: 3vh 10%;
    font-size: 2.4em;
    max-width: 1024px;
}

.hero-bar .chevrons {
    display: block;
    max-width: 32px;
    height: auto;
    margin: 1em auto;
}

/* FEATURED CARDS */
section.featured-cards {
    margin: 6em 5%;
}


.card {
    background: #D74E87;
    color: white;
    border-radius: 4px;
    padding: 3em;
    margin: 1em;
    box-sizing: border-box;
    text-align: center;
}

.card img {
    margin: 1em;;
}

.card h2 {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
}

/* BANNERS */
section.everything-sleep {
    color: white;
    background: #13203D;
    text-align: center;
    padding: 4em 5%;
    position: relative;
}

section.everything-sleep::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(img/bg-sleep.jpg) no-repeat center;
    left: 0;
    top: 0;
    opacity: 0.6;
    z-index: 0;
}

section.everything-sleep h3,
section.carecredit h3 {
    font-size: 2.8em;
    padding: 0 5%;
    font-weight: bold;
    z-index: 3;
    color: white;
}

section.carecredit h4 {
    font-weight: 600;
    color: white;
}

section.everything-sleep span {
    font-size: 1.6em;
    z-index: 3;
}

section.carecredit {
    color: white;
    background-image: linear-gradient(-180deg, #007060 0%, #3D8D48 100%);
    padding: 4em 5%;
    position: relative;
}

section.carecredit .title,
section.carecredit .description {
    z-index: 3;
    margin: 1em 3em;
}

section.carecredit::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(img/bg-credit.jpg) no-repeat center;
    left: 0;
    top: 0;
    opacity: 0.3;
    z-index: 0;
    mix-blend-mode: soft-light;
}

section.carecredit p {
    z-index: 3;

}

/* BUTTONS */

a.pink-btn {
    border: 2px solid #D74E87;
    background: #D74E87;
    border-radius: 3px;
    color: white;
    text-align: center;
    padding: 0.8em 1em;
    font-weight: bold;
    z-index: 4;
}

a.pink-btn:hover {
    background: #9F3D69;
    border-color: #9F3D69;
}

a.white-btn {
    border: 2px solid white;
    border-radius: 3px;
    color: white;
    display: inline-block;
    padding: 0.8em 1em;
    margin: 0em 0.2em;
    font-weight: bold;
    z-index: 4;
}

a.white-btn:hover {
    background: white;
}



.blue-hover:hover {
    color: #27477F;
}
.green-hover:hover {
    color: #247B48;
}



/* FOOTER */
footer {
    background-color: white;
    text-align: center;
    color: #9F3D69;
    background-image: 
        url(img/bubbles-l.svg),
        url(img/bubbles-r.svg);
    background-position:
        left -60px center,
        right -60px center;
    
    background-repeat: no-repeat;
    
}

.copyright {
    padding: 3em 5%;
    font-size: 1.2em;
}

.webmail-bar {
    text-align: center;
    background: #D74E87;
    padding: 0.5em;;
}

.webmail-bar a {
    color: white;
    text-decoration: none;
}

.webmail-bar a:hover {
    text-decoration: underline;
}


/* GENERIC PAGE TEMPLATE */

article.page {
    border-top: #D74E87 6px solid;
    background: white;
    max-width: 820px;
    margin: 0em auto 4em auto;
    padding: 4em 6em;
    box-sizing: border-box;
}


.page-title {
    text-align: center;
    padding: 1.5em 5%;
    margin: 0 auto;
    max-width: 960px;
}

h1, h2, h3, h4, h5 {
    color: #D74E87;
}

article.page p {
    font-size: 1.1em;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

article.page iframe {
    margin-bottom: 1.6em;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    vertical-align: middle;
}

/* CONTACT US */

.contact-blocks {
    margin: 1em 5% 5em 5%;
}

.map-block, .location-block, .form-block {
    margin-top: 2em;
}

.map-block iframe {
    width: 100%;
    border: 2px solid #d6c9d9;
}

.map-block a.pink-btn {
    display: inline-block;
    margin: 1em auto;
}


.location-block {
    background: white;
    border-radius: 3px;
}

.location-block img {
    width: 100%;
    height: auto;
}

.location-content {
    padding: 3em 3em;
}

address {
    font-style: normal;
    display: inline;
}

/* FORM  */

.form-block {}

.form-block input,
.form-block textarea {
    border: none;
    border-radius: 3px;
    padding: 1.6em 1em;
    box-sizing: border-box;
    color: #64324B;
    outline: none;
    
}

.form-block label {
    color: #64324B;
}

.form-block textarea {
    max-height: 120px;
}

.form-block input:focus,
.form-block textarea:focus {
    background: #D74E87;
    color: white;
    outline: none;
    border: none;
}


.form-block input[type="submit"] {
    border: 2px solid #D74E87;
    background: #D74E87;
    border-radius: 3px;
    color: white;
    text-align: center;
    padding: 0.8em 1em;
    margin: 1em auto;
    font-weight: bold;
    display: inline-block;   
}

.form-block input[type="submit"]:hover {
    background: #9F3D69;
    border-color: #9F3D69;
    cursor: pointer;
}

div.wpcf7-response-output /* NOTIFICATION */ {
	color: rgba(0,0,0,0.5);
	text-align: center;
	border-radius: 4px;
	border: none !important;
	padding: 1em 1.2em !important;
	background: #82d443;
	margin: 0;
}


span.wpcf7-not-valid-tip {
	
    color: #f34646 !important;
    font-weight: 600;
	border-radius: 3px;
    border: none;
    margin: 0;
	padding: 0.4em;

}


.wpcf7-mail-sent-ok {background: #A4C53D;} /* EMAIL NOT SENT */
.wpcf7-mail-sent-ng {background: #F05A23;} /* COULDNT SEND EMAIL */
.wpcf7-validation-errors {background: #face2d !important;} /* NEEDS VALIDATION */


/* MEDIA QUERIES */

@media (max-width: 580px) {
    
    .contact-bar a span {
        display: none;
    }

    .logo a {
        max-width: 180px;
        margin: 0 auto;
    }

    .hero-bar h1 {
        font-size: 1.8em;
    }

    nav .links {
        margin-top: 1em;
    }

    nav .links a {
        font-size: 1.1em;
    }

    ul#menu-o2-navmenu {
        justify-content: center;
    }

    article.page {
        padding: 2em 3em;
    }

    article.page p {
        font-size: 1em;
    }

    .hero-bar {background: white;}

    footer {background: white;}
}