@import url('../../OneCol1/Css/OneCol1.css');

/* ############################################################################
   ## 
   ##  Landing Page
   ##
   ######################################################################### */

#Content {
}

    #Page {
    }

        #PageTop {
            display: none;
        }
    
        #PageContent {
        }

            #Primary {
                padding-top: 0px;
            }
        
            #Secondary {
            }

                #Secondary #SecondaryContent {
                    margin-left: -10000em;
                    margin-right: -10000em;
                    padding: var(--site-padding-thick) 10000em;
                }

        #PageBottom {
            display: none;
        }

        #Tertiary {
            display: none;
        }

.rotator {
    max-height: 100vh !important;
}

.rotator::after {
    content: "";
    width: 530px;
    position: absolute;
    height: 160px;
    z-index: 1;
    right: 0;
    bottom: 0;
    margin-right: 5%;
    margin-bottom: 240PX;
    background-size: 530px;
    background-repeat: no-repeat;
    background-image: url(/App_Sites/earthelec/Templates/Default/images/EEC-logo-text.png);
}

    .rotator.images_backgroundFill .rotator-elements .rotator-element .page-fragment.darkenImage .thumbnail::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    height: 100%;
    width: 100%;
    background-color: #000000;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.26;
    z-index: 1;
    }

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

    #Primary #PageTitle {
        margin-bottom: var(--site-box-margin-bottom);
        text-align: center;
    }

}

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

    #Header #AnchorMenu {
        /* display: block; */ /* Sometimes it's good to show the anchor menu on the home page in smaller screen views. */
    }

    #Header #MainMenu {
        /* display: block; */ /* Sometimes it's good to show the main menu on the home page in smaller screen views. */
    }

    #PrimaryContent {
        float: none;
        width: 100%;
    }

}

@media screen and (max-width: 767px) {
    .rotator {
        max-height: 70vh !important;
        margin: 0 -10px;
        width: calc(100% + 20px);
    }

        .rotator::after {
            width: 400px;
            height: 120px;
            background-size: 400px;
            margin-right: 5%;
            margin-bottom: 20px;
            opacity: 0.8;
        }
}


@media screen and (max-width: 600px) {
    .rotator.nav_overlay.nav_position_leftBottom .rotator-nav {
        display: flex;
        flex-direction: column;
        bottom: 25px !important;
    }

    .rotator.nav_overlay .rotator-nav .rotator-link {
        width: auto;
    }
}