/* 
Theme Name: evertheoptimist
Theme URI: http://evertheoptimist.com/
Description: Ever The Optimist (Responsive Mobile child theme)
Template: responsive-mobile
Version: 1.0.0
Author: Toby Hawkins (genobi)
Author URI: https://genobi.net/
*/

/* GENERAL STYLES */

    .clear
    {
        clear:both;
        height: 0px;
        margin: 0px;
        font-size: 1px;
        line-height: 0;
    }
    
    #container.site
    {
        min-width: 320px;
        overflow: hidden;
    }
    
    html, body
    {
        font-family: 'Roboto', arial, sans-serif !important;
        background: #000000 url(images/eto-photo-background.jpg) no-repeat center top;
	background-size: 100% auto;
    }
    
    #max-site-width
    {
        max-width: 1200px;
        margin: 0px auto;
    }

    h1, h2, h3, h4, h5
    {
        color: #312783;
        font-weight: bold;
        font-family: 'Libre Baskerville', serif;
    }
    
    .post-meta a, p a
    {
        font-family: 'Libre Baskerville', serif;
    }
    
    h1.post-title, #blog-latest h2
    {
        font-size: 24px;
        background: #4c96b7;
        color: #fff;
        padding: 5px;
        width: 100%;
        margin-bottom: 20px;
    }
    
    h1.post-title a
    {
        color: #fff;
    }
    
    main p
    {
        font-size: 16px;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .chevron
    {
        margin: 0px 10px;
    }
    
    .page-header h1
    {
        font-size: 26px;
        color: #4c96b7;
    }
    
    .breadcrumb
    {
        border-radius: 0px;
        padding: 0px;
        background: none;
    }
    
    .breadcrumb-list
    {
        padding: 0px 0px 0px 15px;
    }
    
/* END GENERAL STYLES */

/* HEADER STYLES */

    #site-branding
    {
        width: auto;
        float: left;
    }

    #secondary-header
    {
        margin-top: 30px;
        float: right;
    }

    .search-form input.search-submit
    {
        margin: 0px 10px;
        background: url(images/search.png) no-repeat 0 0;
        border: none;
        font-size: 0;
        line-height: 0;
        height: 34px;
        width: 34px;
    }
    
    .page-content .search-form input.search-submit
    {
        background: url(images/search-invert.png) no-repeat 0 0;
    }
    
    /* NAV STYLES */
    
        /* CHANGE MOBILE NAV TO 768px */
            @media (min-width: 768px)
            {
                #main-navigation ul
                {
                    display: block;
                }
            
                #mobile-nav-button
                {
                    display: none;
                }
                #mobile-current-item
                {
                    display:none;
                }
            
                #main-navigation ul
                {
                    display:block;
                }
            
                #main-navigation .main-nav ul
                {
                    padding: 0;
                }
            
                #main-navigation .main-nav ul:before,#main-navigation .main-nav ul:after
                {
                    content: " ";
                    display: table;
                }
            
                #main-navigation .main-nav ul:after
                {
                    clear: both;
                }
            
                #main-navigation .main-nav > ul > li
                {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    position: relative;
                    float: left;
                    width: 90px;
                    text-align: center;
                }
            
                #main-navigation .main-nav ul li:hover>ul
                {
                    display: block;
                }
            
                #main-navigation .main-nav ul li li:hover>ul
                {
                    left: 100%;
                    top: 0;
                }
            
                #main-navigation .main-nav ul li a
                {
                    margin: 0px;
                    color: #eeeeee;
                    display: block;
                }
                
                #main-navigation .main-nav ul li ul
                {
                    text-align: left;
                }
                
                #main-navigation .main-nav ul li ul li a
                {
                    margin: 0px;
                    padding: 0px 15px;
                    text-align: left;
                }
            
                #main-navigation .main-nav ul li a:hover
                {
                    text-decoration: none;
                    color: #000000;
                    background: #4c96b7;
                }
            
                #main-navigation .main-nav ul li>ul
                {
                    position: absolute;
                    z-index: 999;
                    width: auto;
                    min-width: 200px;
                    padding: 0;
                    background-color: #333333;
                }
            
                #main-navigation .main-nav ul li ul
                {
                    display: none;
                }
            
                #main-navigation .main-nav ul li ul li
                {
                    float: none;
                }
            
                #main-navigation .main-nav ul li ul li a
                {
                    line-height: 2.5em;
                    white-space: nowrap;
                }
            
                #main-navigation .main-nav .menu li li a::before
                {
                    content: '';
                    position: relative;
                    margin-left: 0;
                }
            }
            
            #main-navigation ul li a
            {
                display: block;
                padding: 0px 10px;
            }
            
            #main-navigation ul li a:hover
            {
                background: #4c96b7;
                color: #ffffff;
            }
            
            #main-navigation ul li.current_page_item > a
            {
                background: #4c96b7;
                color: #ffffff;
            }
            
            #main-navigation ul li.page-item-143 a, #main-navigation ul li#menu-item-741 a
            {
                background: #fdc010;
                color: #ffffff;
            }
        
    /* END NAV STYLES */

/* END HEADER STYLES */

/* SIDEBAR STYLES */

/* END SIDEBAR STYLES */

/* MAIN STYLES */

    #featured-area
    {
        padding: 0px;
    }

    #featured-content
    {
        width: 100% !important;
        padding: 0px !important;
    }

    .featured-content-link
    {
        color: #fff;
        background-color: #4c96b7;
        padding: 2px 5px;
        font-size: 2vw;
        position: absolute;
        bottom: 5%;
        right: 2%;
    }
    
    .featured-content-link:hover
    {
        color: #000 !important;
    }

    .slide > div
    {
        padding: 0%;
    }
    
    .featured-text
    {
        position: absolute;
        top: 10%;
        width: 40%;
        height: 80%;
        background: rgba(255,255,255,0.6);
    }
    
    .text-inner
    {
        padding: 5%;
        background: none;
        color: #000;
    }
    
    .text-inner p
    {
        font-family: 'Libre Baskerville', serif;
        padding: 0px;
        margin: 0px;
        font-size: 3.5vw;
        text-align: left !important;
    }

    .bx-pager
    {
        position: absolute;
        top: 10px !important;
        right: 15px !important;
        width: auto !important;
        padding: 0px !important;
    }
    
    .bx-wrapper .bx-pager.bx-default-pager a, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover
    {
        width: 30px !important;
        height: 30px !important;
        background: #fff;
        border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
    }
    
     .bx-wrapper .bx-pager.bx-default-pager a.active
     {
        background: #4c96b7;
     }
    
    .bx-wrapper .bx-viewport
    {
        left: 0px !important;
        margin: 0px !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border: none !important;
        background: none !important;
    }
    
    .bx-wrapper
    {
        margin: 0px !important;
    }
    
    #home-text, #blog-latest
    {
        padding-left: 0px;
    }
    
    #home-text p
    {
        font-size: 18px;
    }
    
    #music-promo
    {
        padding-right: 0px;
    }
    
    #music-promo h2, h2.widgettitle
    {
        font-size: 20px;
        background-color: #fdc010;
        color: #ffffff;
        padding: 5px;
    }
    
    #music-promo iframe
    {
        width: 100%;
        height: 470px;
    }
    
    #blog-latest h2
    {
        background: #2a5366;
    }
    
    #blog-latest h3
    {
        font-size: 20px;
        float: left;
        margin-right: 10px;
        margin-top: 0px;
        padding: 10px;
        border: 1px solid #4c96b7;
        color: #4c96b7;
    }
    
    .latest-post
    {
        margin-bottom: 20px;
    }
    
    .post-link
    {
        float: right;
    }

    #sidebar-list h2
    {
        font-size: 20px;
        background-color: #2a5366;
        color: #ffffff;
        padding: 5px;
    }
    
    #sidebar-list ul
    {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    
    #sidebar-list ul li
    {
        border: 1px solid #2a5366;
    }
    
    #sidebar-list ul li a
    {
        display: block;
        padding: 5px;
    }

    #sidebar-list ul.children li
    {
        margin-left: 30px;
        margin-right: 10px;
        background: #ffffff;
    }

    #sidebar-list ul li:hover
    {
        text-decoration: none;
        color: #ffffff;
        background: #2a5366;
    }
    
    #sidebar-list ul li a:hover
    {
        color: #ffffff;
    }
    
    #sidebar-list ul > li.current_page_item
    {
        color: #ffffff !important;
        background: #2a5366 !important;
    }
    
    #sidebar-list li.current_page_item > a
    {
        color: #ffffff;
    }
    
    #sidebar-list li ul
    {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .post-entry ul
    {
        padding-top: 15px;
        font-size: 16px;
    }
    
    .post-entry ul li
    {
        margin-bottom: 10px;
    }
    
    #mc_embed_signup_scroll h2
    {
        font-size: 20px;
        color: #4c96b7;
    }
    
    .indicates-required
    {
        float: right;
    }
    
    #mc_embed_signup_scroll .asterisk
    {
        color: #ff0000;
    }


/* END MAIN STYLES */

/* START FOOTER STYLES */


    
/* END FOOTER STYLES */

/* RESPONSIVE STYLES */

    @media screen and (min-width: 1200px)
    {
        #featured-area
        {
            width: 1140px;
        }
    }

    @media screen and (min-width: 992px)
    {
        .text-inner p
        {
            font-size: 35px;
        }
        
        .featured-content-link
        {
            font-size: 26px;
        }
    
    }

    @media screen and (min-width: 768px)
    {
        /* DESKTOP NAV STYLING */
        
        
        /* END DESKTOP NAV STYLING */
    }
    
    @media screen and (max-width: 1200px)
    {
        .bx-wrapper .bx-pager.bx-default-pager a, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover
        {
            width: 2.5vw !important;
            height: 2.5vw !important;
            border-radius: 1.25vw !important;
            -webkit-border-radius: 1.25vw !important;
        }
    
        #music-promo iframe
        {
            height: 42vw;
        }
        
    }
    
    @media screen and (max-width: 991px)
    {
        #music-promo iframe
        {
            height: 45vw;
        }
    }
    
    @media screen and (max-width: 920px)
    {

    }
    
    @media screen and (max-width: 890px)
    {
        #music-promo iframe
        {
            height: 47vw;
        }
    }
    
    @media screen and (max-width: 767px)
    {        
        #music-promo iframe
        {
            height: 111vw;
        }

        #music-promo, #home-text, #blog-latest
        {
            padding: 0px;
        }

    }

    @media screen and (max-width: 767px)
    {
        .main-nav > ul
        {
            margin-bottom: 15px !important;
        }

        #music-promo iframe
        {
            height: 115vw;
        }
        
        .latest-post p
        {
            clear: both;
        }
    }

    @media screen and (max-width:640px)
    {
        #site-branding, #secondary-header
        {
            display: block;
            text-align: center;
            width: 100%;
        }

        .bx-wrapper .bx-pager.bx-default-pager a, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover
        {
            width: 16px !important;
            height: 16px !important;
            border-radius: 8px !important;
            -webkit-border-radius: 8px !important;
        }
        
        .bx-pager
        {
            top: 5px !important;
            right: 5px !important;
        }
    
    }

    @media screen and (max-width: 495px)
    {        
        #music-promo iframe
        {
            height: 121vw;
        }
    }
    
    @media screen and (max-width:350px)
    {
        .text-inner p
        {
            font-size: 13px;
        }
        
        .featured-content-link
        {
            font-size: 10px;
        }

        #music-promo iframe
        {
            height: 123vw;
        }
    }
    
    @media screen and (max-width: 320px)
    {        
        #music-promo iframe
        {
            height: 420px;
        }
    }    