/*
 Theme Name:     voh
 Theme URI:      http://www.elegantthemes.com/gallery/foxy/
 Description:    VoH
 Author:         Mark Cinco
 Author URI:     http://www.dotfivesystems.com
 Template:       twentysixteen
 Version:        1.0.0
*/

@import url("../twentysixteen/style.css");

/* =Theme customization starts here
------------------------------------------------------- */

body{font-family: AvenirNextLTProCn; color: #000;}
body:before, body:after{content: none !important;}
body{background: url("img/header.png") no-repeat; background-position: top; background-size: 100% 150px;}
a:hover, a:focus{text-decoration: none; outline: none;}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{background-color: transparent;}

.full-background{background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;}
.flex{display: flex; align-items: center;}

.main{font-family: "montserratlight"; padding-top: 60px;}

nav{background-color: transparent; background: transparent;}
#navbar{position: relative; z-index: 999; margin-top: 20px;}
#navbar img{width: 175px; }
.navbar{margin: 0;}
.navbar-brand{height: auto;}
.navbar-brand img{width: 200px;}
.nav>li>a:focus, .nav>li>a:hover{background-color: transparent;}
.nav > li > a{font-size: 2em; color: #000; text-transform: uppercase; padding: 10px;}
.nav > li:nth-child(n+2) > a{ color: #000; text-transform: uppercase;}
.dropdown-menu{left: -20px; padding-bottom: 30px; background: url("img/nav-bg.png"); background-size: 100% 100%; border: none; box-shadow: none;}
.dropdown-menu>li{text-align: center;}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover{background-color: transparent; background: url("img/nav-hover.png") no-repeat; background-size: 100% 100%;}
/*.nav > li > a{font-size: 1.25em; padding-top:0; padding-bottom: 0; color: #000;}*/

.content{font-size: 1.5em;}

#page{position: relative; padding-top: 100px;}
.home .main,
.page-template-afterschoolprogram .main,
.page-template-education .main,
.page-template-homecare .main,
.page-template-afterschoolprogram .main{padding-top: 0;}

.home .main img{margin: 0 auto;}
.home #home-advo{padding: 100px 0; display: flex; align-items: center; background: url("img/home/bg-advocacy.png") no-repeat; background-position: center; background-size: 100% 100%;}
.home .splash-img{position: relative; z-index: 5;}
.home .main section{position: relative; top: -120px;}
.home-button{margin-top: 20px;}
.home-button a{display: inline-block; padding: 20px 40px 20px 20px; width: 180px; background: url("img/home/hopewithus-btn.png") no-repeat; background-size: contain; background-position: center; color: #fff; font-size: 1.3em;}
#home-advo{font-size: 1.5em;}
#home-advo .home-button a{width: 230px; padding: 20px 50px 20px 20px;}
.home #home-advo h2,
.home #home-news h3{font-family: "caveat_brushregular"; font-size: 3em; color: #EC9347;}
.home #home-advo h2{margin-bottom: 20px; color: #EC9347;}
.home #home-advo .advo-content{height:300px;}
.home #home-advo .advo-content [class*=-shape]{width:15%; height:100%;}
.home #home-advo .advo-content .left-shape{float: left; shape-outside: polygon(0 0, 0% 100%, 100% 100%); -webkit-shape-outside: polygon(0 0, 0% 100%, 100% 100%);}
.home #home-advo .advo-content .right-shape{float: right; shape-outside: polygon(100% 0, 0% 100%, 100% 100%); -webkit-shape-outside: polygon(100% 0, 0% 100%, 100% 100%);}
.home #home-news .pge-title{font-size: 6em; line-height: 1.25;}
.home #home-news .pge-title + p{font-size: 1.5em;}
.home #home-news h3{border-bottom: 2px solid #3c572e;}
.home #home-news .content{font-size: 1.4em;}
.home .news-item{background-color: #F8F8F8; min-height: 100px; margin: 10px 15px;}
.home .news-item .row > div{min-height: 100px;}
.home .news-item .news-content{padding: 10px 0;}
.home .news-item .news-content h4{font-size: 1.5em; font-weight: bold;}
.home .news-item .news-content h5{font-size: 1.2em; margin: 2.5px 0 5px;}
.home .news-item .news-content p{font-size: 1em; line-height: 1;}
.news-box{margin-bottom: 20px;}
.news-box a{color: #fff;}
.news-thumb{height:150px;}
.news-thumb.full-background{background-position: top center !important;}
.news-content{position: relative; height: 300px; padding: 10px 10px 60px; border-top: 5px solid #C06D25; color: #fff; background: url("img/news-back.png") no-repeat; background-size: 100% 100%; }
.news-content h4{margin-bottom: 20px;}
.news-content > a{position: absolute; bottom: 60px; right: 20px; text-decoration: underline;}

#brush-area{position: absolute; top:0; right:0;}
#brush-area img{max-height: 200px;}

.feat-image{position: relative;}
.feat-image-title{font-family: "caveat_brushregular"; position: absolute; bottom: 0; left: 0; font-size: 3em; color: #EC9347; text-shadow: 3px 3px #fff; }



.page-template-afterschoolprogram section > .container{position: relative; top: -50px;}
.page-template-afterschoolprogram .feat-image-title{margin: 0 auto; left: 0; right: 0; bottom: -5px; text-align: center;}
.page-template-education section > .container{position: relative; top: -50px;}
.page-template-education .feat-image-title{left: 15%; bottom: 5%;}
.page-template-ourdream section .post-thumbnail img{margin: 0 auto;}
.page-template-homecare section > .container{position: relative; top: -20px;}
.page-template-homecare .feat-image-title{margin: 0 auto; left: 0; right: 0; bottom: 10%; text-align: center;}
.page-template-ourcall section > .container{margin-top: 70px;}
.page-template-ourcall .content h5{line-height: 2;}
.page-template-ourcall .content h5 + h5{margin: 15px 0;}
.page-template-ourcall section h2{margin-bottom: 20px;}
.page-template-giftsofhope .pge-title{color: #fa9600; font-size: 5em; margin-bottom: 20px;}

.pge-title{font-family: "caveat_brushregular"; font-size: 4em; color: #fa9600;}

.category .pge-title{font-size: 6em;}

.single .pge-title{margin-bottom: 20px; font-size: 6em; color: #EC9347;}
.single .content .title{margin-bottom: 20px; font-size: 1.75em; letter-spacing: 2px;}
.single .feat-image{float: right; width: 350px; margin: -10px 0 20px 20px;}

.page-template-share .tab-nav{margin: 20px 0;}
.page-template-share .tab-nav a{display: block; font-size: 1.8em; padding: 10px 20px; border-bottom: 2px solid #3c572e; text-transform: uppercase; font-weight: bold; color: #000;}
.page-template-share .tab-nav .active a{color: #fff; background: url("img/tabbg.png") no-repeat; background-size: 100% 100%; background-position: center;}
.page-template-share .tab-content{background: none; background-size: contain !important; }
.page-template-share .tab-content p{margin-bottom: 0;}
.page-template-share .tab-content .form-control{height: 30px;}
.page-template-share .tab-content .control-label{padding-top: 0; font-size: 0.8em;}
.page-template-share .tab-content button{background-color: #3c572e; color: #fff;}
.share-box{font-size: 1.25em; padding: 60px 40px 0; background: url("img/hopewithusbg.png") no-repeat; background-position: top; background-size: contain !important; min-height: 550px;}
#give .share-box,
#give .share-box,
#pray .share-box{background: none;}
/*#share .img{max-height: 300px; margin-top: 20px;}*/
#give .share-box{position: relative; top:-90px; padding-top: 0; min-height: inherit;}
#volunteer .img{max-height: 350px;}
#share img{max-height: 300px;}
#share .share-box{display: flex; align-items: center; padding: 0px 60px 160px;}
#volunteer .share-box{padding-top: 100px;}

.arch-item{margin-top: 30px; margin-bottom: 30px;}
.arch-photo{height: 200px;}
.arch-head{position: relative; margin-top: 10px;}
.arch-title{margin: 10px 0;}
.arch-more a{display: inline-block; padding: 20px 40px 20px 20px; width: 150px; background: url("img/button-readmore.png") no-repeat; background-size: contain; background-position: center; color: #fff; font-size: 1.2em;}
.arch-head:before{content: ""; position: absolute; bottom:0; margin:0 auto; left: 0; right: 0; border-bottom: 1px solid #000; width: 100px;}

.content-box{background-position: right !important; background-size: contain !important; background-repeat: no-repeat !important; min-height: 600px;}

.more-link {display: none;}

.page-template-underconstruction{overflow: hidden;}
.page-template-underconstruction footer{display: none;}
.construction-area{position: relative; height: 500px;}
.construction-area img{position: fixed;}
.construction-area .paint{max-height: 70%; top: 30%; right: 0;}
.construction-area .clip{max-height: 20%; top: 30%; right: 5%;}
.construction-area .brushes{max-height: 40%; bottom: -10%; left: -5%;}

.item-box .item-title{padding: 5px 0; border-bottom: 1px solid; margin-bottom: 5px;}
.item-box .item-colors{opacity: 0; transition: 0.5s opacity;}
.item-box:hover .item-colors{opacity: 1;}
.item-box .item-colors .color{display: inline-block; height: 15px; width: 15px;}

.home footer{margin-top: -50px;}
footer{position: relative; font-size: 1.25em; padding: 20px 0; background-color: #ebd9bc; margin-top: 70px;}
footer:before{content: ""; position: absolute; height: 100px; width: 100%; top: -50px; left: 0; background: url("img/footer.png") no-repeat; background-size: cover;}
footer img{max-height: 60px;}
footer .social-icons img{max-height: 40px;}
footer .fimgbox{min-height: 75px; position: relative;}
footer .fimgbox .fimgoff{position: absolute; bottom: 10px; height: 40px;}
/*footer #sitemap li{padding: 0;}*/
/*footer #sitemap li a{padding: 0 20px; color: #000; font-size: 1.2em;}*/
/*footer #sitemap li a:hover{text-decoration: none;}*/
/*footer #sitemap li:nth-child(n+2) a{border-left: 1px solid #000;}*/

.nav-toggle{position: absolute; top: -10px; right: -40px; height: 150px; width: 150px; background: url('img/Mmenu.png') no-repeat; background-size: 100% 100%; background-position: center; z-index: 999;}

@media only screen and (max-width : 768px) {
    body{background: none;}
    nav{background: url("img/header.png") no-repeat fixed; background-position: top; background-size: 100% 150px;}
    #navbar{margin-top: 0; top: -30px; background: url("img/mobile-dropdownbg.png") no-repeat; background-size: 100% 100%;}
    .nav .open>a,
    .nav .open>a:focus,
    .nav .open>a:hover{background-color: transparent; border-color: transparent;}
    .nav .open>a:hover{background: url("img/nav-hover.png") no-repeat; background-size: 100% 100%;}
    .navbar-nav .glyphicon{color: #e08c34; font-size: 0.7em; }
    .navbar-header{position: relative; padding: 10px 0; background: url("img/navbg.png") no-repeat; background-size: 150% 100%; background-position: center top;}
    .navbar-brand img{width: 120px;}
    .navbar-nav{text-align: center;}
    .navbar-nav .open .dropdown-menu{background: none;}

    .feat-image .post-thumbnail{margin: 0;}

    .page-template-education section > .container{top: -10px;}
    .page-template-education .post-thumbnail{margin: 0;}

    .page-template-ourcall .main{padding-top: 0;}
    .page-template-ourcall section > .container{margin-top: 0;}
    .page-template-ourcall .content-box{background: none !important;}
    .page-template-ourcall .feat-img img{max-height: 300px;}

    .page-template-share .tab-nav li{margin-bottom: 20px;}
    .page-template-share .tab-nav a {font-size: 1.25em;}
    .page-template-share .share-box{background-size: 100% 111% !important;}
    .page-template-share #give .share-box{padding: 0;}
}
@media only screen and (min-width : 768px) {
    body{background-size: 100% 350px;}
    .home #home-advo{padding: 200px 0 150px;}
    .home .main section{top: -200px;}
    .navbar{position: static;}
    #navbar{background: url("img/navbg.png") no-repeat; background-size: cover; background-position: center;}
    .dropdown:hover .dropdown-menu {display: block;}
    #page{padding-top: 0;}
    #volunteer .share-box{ background: url("img/handssplatter.png") no-repeat center; padding-top: 275px;}
    .feat-image-title{font-size: 6em;}
    .page-template-homecare .feat-image-title{font-size: 7em;}
}

@media only screen and (min-width : 768px) and (max-width : 992px){

}

@media only screen and (min-width : 992px) {
    .nav{display: flex; align-items: center;}
    .nav-tabs > li, .nav-pills > li {
        float:none;
        display:inline-block;
        display:inline; /* ie7 fix */
        zoom:1; /* hasLayout ie7 trigger */
    }

    .nav-tabs, .nav-pills {
        text-align:center;
    }

    .feat-image-title{font-size: 8.5em;}
}


@media only screen and (min-width : 1200px) {

}