@charset "UTF-8";
/* CSS Document */


#header {
    border-bottom: 4px solid #E3B547;
}

#header_container_wrapper {
    width:100%;
    position:absolute;
    z-index:10;
    background: transparent;
    background-color: rgba(37,37,37,0.3);
    zoom: 1;
    *filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14252525',endColorstr='#14252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#14252525,endColorstr=#14252525)";
}

#header_container {
    height: 130px;
    width: 1250px;
    margin: 0px auto;
    position: relative;
}

#home {
    width: 322px;
    height: 135px;
    display: block;
    background: url(/wp-content/themes/archdiocese/includes/images/arch-logo.svg) top left no-repeat;
    position: absolute;
    bottom: -17px;
    text-indent: -999em;
    overflow: hidden;
    z-index:10;
}

#nav_container {
    padding-top:28px;
    position:relative;
}
#secondary_nav {
    text-align: right;
    margin-bottom:30px;
}

#secondary_nav li {
    list-style: none;
    display: inline-block;
    margin: 0px 0px 0px 30px;
}

#secondary_nav li a {
    color: #fff;
    font-size:18px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform:uppercase;
}
#secondary_nav li a:hover {
    border-bottom: 2px solid #e2b606;
}


#main_nav {
    text-align: right;
    margin-bottom:0;
}

#main_nav li {
    list-style: none;
    display: inline-block;
    margin: 0px 0px 0px 30px;
}

#main_nav li a {
    color: #fff;
    font-size:20px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-transform:uppercase;
}

#main_nav li a:hover {
    border-bottom: 3px solid #e2b606;
}
#main_nav li a.menu {
    display:inline-block;
    width:32px;
    height:16px;
    background: url(../images/nav_menu_icon.png) left top no-repeat;
}
#main_nav li a.menu:hover,
#main_nav li a.menu.active  {
    background: url(../images/nav_menu_icon_on.png) left top no-repeat;
    border-bottom:none;
}
#main_nav li a.menu.active {
    /*display: none;*/
}


#flyout-menu {
    box-sizing:border-box;
    background: transparent;
    background-color: rgba(54,54,54,0.85);
    zoom: 1;
    *filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55363636',endColorstr='#55363636');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#55363636,endColorstr=#55363636)";

    padding:52px 0;
    width:0;
    position:absolute;
    top:130px;
    right:0;
    overflow:hidden;
    z-index:500;

    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition:all 0.2s;
}
#flyout-menu.active {
    width:23%;
    padding:52px 22px;
}
#flyout-menu .close-wrapper {
    position:relative;
    min-width:289px;
}
#flyout-menu a.close {
    display: inline-block;
    font-size: 30px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    position: absolute;
    top: -32px;
    right: 4px;
}
#flyout-menu a.close:hover {
    color:#e2b606;
}

#flyout-menu .mobile {
    display:none;
}

#flyout-menu ul.child-menu {
    margin-bottom:50px;
    min-width:289px;
}
#flyout-menu ul.child-menu li {
    margin-bottom:15px;
}
#flyout-menu ul.child-menu li a {
    color: #fff;
    font-size:18px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    text-decoration: none;
    text-transform:uppercase;
}
#flyout-menu ul.child-menu li a:hover {
    border-bottom: 1px solid #e2b606;
}
#flyout-menu .search-box {
    background-color:white;
    width:241px;
    height:40px;
    display:inline-block;
    position:relative;
    min-width:289px;
}
#flyout-menu .search-box input[type=text] {
    width:186px;
    height:40px;
    border:none;
    padding:0 45px 0 10px;
    font-family: 'Lato', sans-serif;
    font-weight:400;
}
#flyout-menu .search-box input[type=submit] {
    width:23px;
    height:23px;
    padding:0;
    background: url(../images/search_icon.gif) left top no-repeat;
    border:none;
    cursor:pointer;
    position:absolute;
    top:8px;
    right:10px;
}

#flyout-menu .social-icons {
    margin-top:50px;
    min-width:289px;
}

#flyout-menu .social-icons .twitter,
#flyout-menu .social-icons .facebook,
#flyout-menu .social-icons .youtube {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin-right:25px;
}

#flyout-menu .social-icons .twitter {
    background: url(../images/twitter.png) center center no-repeat;
}
#flyout-menu .social-icons .twitter:hover {
    background-image: url(../images/twitter_on.png);
}
#flyout-menu .social-icons .facebook {
    background: url(../images/facebook.png) center center no-repeat;
}
#flyout-menu .social-icons .facebook:hover {
    background-image: url(../images/facebook_on.png);
}
#flyout-menu .social-icons .youtube {
    margin-right:0;
    background: url(../images/youtube.png) center center no-repeat;
}
#flyout-menu .social-icons .youtube:hover {
    background-image: url(../images/youtube_on.png);
}






.banner-image {
    background-size:cover;
    background-position:center center;
}

.banner-image.interior.with-image {
    height:450px;
}
.banner-image.interior.without-image {
    height:130px;
}
.banner-image .flexslider {
    height:652px;
}
.banner-image .flexslider .slides li {
    height:652px;
    background-size:cover;
    background-position:center center;
}
.banner-image .flexslider .slides li .slide-content-wrapper {
    width: 1250px;
    margin: 0px auto;
    position:absolute;
    left:50%;
    bottom:60px;
}
.banner-image .flexslider .slides li .slide-content-wrapper .slide-content {
    box-sizing:border-box;
    width:100%;
    text-align:left;
    padding:210px 30% 0 20px;
    position: relative;
    left:-50%;
}
.banner-image .flexslider .slides li .slide-content-wrapper .slide-content h1 {
    color:#212121;
    text-shadow: 2px 2px 3px black;
    font-size:43px;
    line-height:60px;
    text-transform:uppercase;
    font-family: 'Lato', san-serif;
    font-weight: 600;
}
.banner-image .flexslider .slides li .slide-content-wrapper .slide-content h2 {
    margin-top:0;
    margin-bottom:0;
    color:#724E00;
    text-shadow: 2px 2px 2px black;
    font-size:25px;
    line-height:34px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;

}
.banner-image .flexslider .slides li .slide-content-wrapper .slide-content a.button {
    margin-top:15px;
    display:inline-block;
    color:#fff;
    font-size:25px;
    line-height:25px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    background-color:#E2B606;
    border: 4px solid #A88614;
    padding:18px;
    text-transform:uppercase;
    text-decoration:none;
}

.banner-image .flexslider .flex-control-nav {
    width: 1250px;
    margin: 0px auto;
    text-align:left;
    position:relative;
    /*bottom:100px;*/
    bottom:30px;
    left:20px;
    z-index:50;
}
.banner-image .flexslider .flex-control-nav li {
    margin: 0 8px 0 0;
}
.banner-image .flexslider .flex-control-nav li a {
    background-color:#e3b647;
}
.banner-image .flexslider .flex-control-nav li a.flex-active,.banner-image .flexslider .flex-control-nav li a:hover  {
    background-color:#e01a22;
}



@media screen and (max-width: 768px) {
    #header_container {
        box-sizing: border-box;
        width: 100%;
        height: 100px;
        padding: 0 15px;
        z-index: 501;
    }

    #header_container_wrapper {
        z-index: 501;
    }

    #home {
        width: 231px;
        height: 97px;
        background-size: 100%;
        bottom: -10px;
        z-index: 501;
    }

    #nav_container {
        padding-top: 60px;
    }

    #secondary_nav {
        display: none;
    }

    #main_nav li {
        display: none;
    }

    #main_nav li.menu-item {
        display: inline-block;
    }

    #flyout-menu {
        top: 100px;
        overflow:hidden;
    }
    #flyout-menu.active {
        width: 100%;
    }

    #flyout-menu .close-wrapper {
        min-width: 276px;
    }

    #flyout-menu .mobile {
        display: block;
    }

    #flyout-menu ul.child-menu {
        margin-bottom: 40px;
        min-width: 276px;
    }

    #flyout-menu ul.child-menu li {
        margin-bottom: 10px;
    }

    #flyout-menu ul.child-menu li a {
        font-size: 20px;
    }

    #flyout-menu .social-icons {
        margin-top: 40px;
        min-width: 276px;
    }

    #flyout-menu .search-box {
        min-width: 276px;
    }



    .banner-image {
    }

    .banner-image.interior.with-image {
        height: 320px;
    }
    .banner-image.interior.without-image {
        height:100px;
    }

    .banner-image .flexslider {
        height: 380px;
    }

    .banner-image .flexslider .slides li {
        height: 380px;
    }
    .banner-image .flexslider .slides li {
        /*display:none !important;*/
    }
    .banner-image .flexslider .slides li:first-child {
        display:block !important;
    }

    .banner-image .flexslider .slides li .slide-content-wrapper {
        width: 100%;
    }

    .banner-image .flexslider .slides li .slide-content-wrapper .slide-content {
        padding: 125px 3% 0 3%;
    }

    .banner-image .flexslider .slides li .slide-content-wrapper .slide-content h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .banner-image .flexslider .slides li .slide-content-wrapper .slide-content h2 {
        margin-top: 10px;
        font-size: 16px;
        line-height: 18px;
        width:50%;
    }

    .banner-image .flexslider .slides li .slide-content-wrapper .slide-content a.button {
        margin-top: 5px;
        font-size: 15px;
        line-height: 15px;
        background-color: #E2B606;
        border: 3px solid #A88614;
        padding: 9px;
    }

    .banner-image .flexslider .flex-control-nav {
        display:none;
    }
}

/*
Social Icons
*/
.social-icons a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    width: 44px;
    height: 44px;
    margin-right:25px;
}
.social-icons a:hover {
    color: #e3b547;
}
.social-icons a span.nav-icons {
    font-size: 44px;
}