/* .main-header */





/*------------------ Variables ------------------*/
.html
{
    /* Sub Nav - Toggle Button - Colors */
    --sub-nav-func-root--toggle-button--fg-color: var(--white--color);
}





/*------------------ Main Header ------------------*/
.main-header---cr
{
    position: relative;
}





/*------------------ Web Product Main Info ------------------*/
.web-product-main-info
{
    position: absolute;
    left: 0;
    z-index: 1;
    
    width: 100%;
}

.web-product-main-logo--enabled .wbp-main-info---ct_cr
{
    position: relative;
}





/*------------------ Main Nav ------------------*/
.main-nav
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    
    margin-top: var(--elem--height--md);
    
    width: 100%;   
}

.main-nav---cr
{
    background-color: transparent;
}

.applicator--easy-access-nav .main-nav a
{
    color: white;
}

.main-nav.sub-nav-func .children a,
.main-nav.sub-nav-func .sub-menu a
{
    color: black;
}

.main-nav---ct_cr > .menu-container > ul > li > .sub-nav-toggle .sub-nav-tog---b_l
{
    color: var(--sub-nav-func-root--toggle-button--fg-color);
}

.widget-content---ct_cr > * > ul > li > .sub-nav-toggle .sub-nav-tog---b_l
{
    color: var(--sub-nav-func-branches--toggle-button--fg-color);
}

.children .sub-nav-tog---b_l,
.sub-menu .sub-nav-tog---b_l
{
    color: var(--sub-nav-func-branches--toggle-button--fg-color);
}

.applicator--easy-access-nav .main-nav---ct_cr > .menu-container > ul
{
    justify-content: center;
}





/*------------------ Main Search ------------------*/
.main-search-func
{
    z-index: 1;
}





/*------------------ Web Product Main Media Banner ------------------*/
.wbp-main-media-banner---g
{
    position: relative;
    
    background-color: var(--image--bg-color);
}

.wbp-main-media-banner---g::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    
    width: 100%;
    height: 100%;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0.5+100 */
    background: -moz-linear-gradient(top, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, hsla(0,0%,0%,1) 0%,hsla(0,0%,0%,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, hsla(0,0%,0%,1) 0%,hsla(0,0%,0%,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
    
    opacity: .5;
    
    transition: var(--transition--generic);
    transition-property: opacity;
}

.apl--main-search--active .wbp-main-media-banner---g::before
{
    opacity: .75;
}





/*------------------ Web Product Main Name, Description ------------------*/
.web-product-main-logo--disabled .web-product-main-name,
.web-product-main-logo--disabled .web-product-main-description

{
    justify-content: center;
}





/*------------------ Media Banner ------------------*/
.web-product-main-media-banner
{
    overflow: hidden;
}

.wbp-main-media-banner---g
{
    padding-bottom: 0;
    
    height: 20rem;
    min-height: 25vh;
    
    background-position: top;
}





/*------------------ Viewport Width: 768 ------------------*/

@media only screen and ( min-width: 48em )
{

    .wbp-main-media-banner---g
    {
        min-height: 10rem;

    }

}