/* ==============================================================================
* Website:
* Filename: homepage.css
* Media: screen
* Structure: TBC
============================================================================== */
.homepage #main { border: 0px; width: 100%; max-width: 100%; overflow: hidden; z-index: 10; }

.homepage #video { position:absolute; }

    .homepage #video.fillWidth { /*min-height:100%;*/ height:auto; width:100%; left:0; top:calc(50% - 70px); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); }
    .homepage #video.fillHeight { min-width:100%; width:auto; height:100%; position:absolute; left:50%; top:0; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); }


.homepage #loading { background:#fff; height:100%; width:100%; position:fixed; left:0; top:0; z-index:999999; }
.homepage #loading img { height:auto; width:auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

.homepagelinks * { box-sizing:border-box; }

.homepagelinks.parbase { position: relative; z-index: 99; top: 50%; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -ms-transform: translate(0, -50%); margin-top: -75px; }
.homepagelinks.parbase.crisis-low { position: absolute; z-index: 99; left: auto; top: 50%; left: initial; right: 0px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -ms-transform: translate(0, -50%); margin-top: -50px; width: 80.4%; }
.homepagelinks.parbase.crisis-hidden { display: none; }

.homepagelink { padding: 10px 10% 10px 0px; height:25vh; max-height: 200px; position: relative; overflow: hidden; }

.homepagelink.homelink-blue:hover { background-color: rgba(00,98,155,0); transition: background-color 0.3s linear; }
.homepagelink.homelink-purple:hover { background-color: rgba(155,98,182,0); transition: background-color 0.3s linear; }
.homepagelink.homelink-yellow:hover { background-color: rgba(242,169,00,0); transition: background-color 0.3s linear; }
.homepagelink.homelink-orange:hover { background-color: rgba(242,69,32,0); transition: background-color 0.3s linear; }
.homepagelink.homelink-grey:hover { background-color: rgba(100,100,100,0); transition: background-color 0.3s linear; }

.homepagelink.homelink-blue:hover { background-color: rgba(00,98,155,0.2); }
.homepagelink.homelink-purple:hover { background-color: rgba(155,98,182,0.5); }
.homepagelink.homelink-yellow:hover { background-color: rgba(242,169,00,0.5); }
.homepagelink.homelink-orange:hover { background-color: rgba(242,69,32,0.5); }
.homepagelink.homelink-grey:hover { background-color: rgba(100,100,100,0.5); }

.homepagelink a {}
.homepagelink a:hover { text-decoration: none; }

.homepagelinkcontent { text-align: left; width: 240px; position: absolute; right: 10%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -ms-transform: translate(0, -50%) }
.homepagelinkcontent h2 { font-size: 30px; color: #ffffff; margin-bottom: 8px; }
.homepagelinkcontent h3 { font-family: 'Libre Baskerville', Times New Roman, Times, serif; text-transform: capitalize; color: #ffffff; font-style: italic; font-size: 21px; margin-bottom: 8px; }
.homepagelinkcontent span { font-family: FlamaCondensed-Medium, arial, sans-serif; color: #ffffff; letter-spacing: 0.5px; text-transform: uppercase; font-size: 13px; position: relative; height: 15px; }
.homepagelinkcontent span:after { content: ""; display: inline-block; width: 15px; height: 15px; background: url(../../images/icons/homepage-link-arrow.png) no-repeat; vertical-align: middle; margin-left: 10px; }

span.rule { position: absolute; height: 100%; width: 6px; right: 0px; top: 100%; transition: top 0.2s linear; }
.homepagelink:hover span.rule { top: 0px; }

.homepagelink.homelink-blue span.rule { background: rgba(00,98,155,1); }
.homepagelink.homelink-purple span.rule { background: rgba(155,98,182,1); }
.homepagelink.homelink-yellow span.rule { background: rgba(242,169,00,1); }
.homepagelink.homelink-orange span.rule { background: rgba(242,69,32,1); }
.homepagelink.homelink-grey span.rule { background: rgba(100,100,100,1); }


.emergency-button { position: absolute !important; margin-top: -1px; z-index: 40000; display: block; color: #ffffff; padding: 5.5px 30px; background: #000000; font-family: FlamaCondensed-Medium, arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }

.bg-gradient { position: absolute; z-index: 98; width: 50%; height: 100%; right: 0px; top: 0px;
    background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.15)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.15)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.15)); /* Standard syntax (must be last) */
}


/* Crisis Notification */
.crisis-logo {  position: absolute; left: 50%; top: 50px; -webkit-transform: translate(-50% , 0); -ms-transform: translate(-50% , 0); transform: translate(-50% , 0); z-index: 100; width: 130px;  }

.crisissettings { }
.crisissettings h1 {}
.crisissettings h2 {}
.crisissettings p {}
.crisissettings a { font-family: FlamaCondensed-Medium, arial, sans-serif; letter-spacing: 0.5px; color: #ffffff; text-transform: uppercase; font-size: 13px; position: relative; height: 15px; }
.crisissettings a:after { content: ""; display: inline-block; width: 15px; height: 15px; background: url(../../images/icons/homepage-link-arrow.png) no-repeat; vertical-align: middle; margin-left: 10px; }

.crisissettings .crisis-level-medium .content-wrapper,
.crisissettings .crisis-level-high .content-wrapper {  width: calc(50% - 90px); margin: auto; height: calc(100% - 350px); position: relative; overflow: hidden; padding-right: 90px; }


/* Crisis Notification Low */
.crisissettings .crisis-level-low { color: #ffffff;  position: absolute; z-index: 99; background: rgba(0,0,0,0.5); padding: 30px; padding-top: 100px; width: calc(18% - 30px); min-width: 178px; height: 100%; }

/* Crisis Notification Medium */
.crisissettings .crisis-level-medium { color: #ffffff;  position: absolute; z-index: 99; background: rgba(0,0,0,0.5); padding: 30px; padding-top: 100px; width: calc(100% - 60px); height: 100%; }

/* Crisis Notification High */
.crisissettings .crisis-level-high { color: #ffffff;  position: absolute; z-index: 99; background: rgba(0,0,0,0.5); padding: 30px; padding-top: 195px; width: calc(100% - 60px); height: 100%; }


/* Custom Scrollbars */
.ps-container .ps-scrollbar-x-rail { display: none !important; }

.crisis-content .content-wrapper .ps-scrollbar-y-rail { position: absolute; /* please don't change 'position' */ right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */ width: 8px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; opacity: 1; filter: initial; -o-transition: initial; -webkit-transition: initial; -moz-transition:initial; transition: initial; background: #ffffff; height: 100% !important; }

.crisis-content .content-wrapper:hover .ps-scrollbar-y-rail,
.crisis-content .content-wrapper.hover .ps-scrollbar-y-rail { background-color: #ffffff; opacity: 1; filter: initial; }

.crisis-content .content-wrapper .ps-scrollbar-y-rail:hover,
.crisis-content .content-wrapper .ps-scrollbar-y-rail.hover { background-color: #ffffff; opacity: 1; filter: initial; }

.crisis-content .content-wrapper .ps-scrollbar-y-rail.in-scrolling { background-color: #ffffff; opacity: 1; filter: initial; }

.crisis-content .content-wrapper .ps-scrollbar-y { position: absolute; /* please don't change 'position' */ right: 0; /* there must be 'right' for ps-scrollbar-y */ width: 8px; background-color: #ff1093; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -o-transition: background-color .2s linear; -webkit-transition: background-color.2s linear; -moz-transition: background-color .2s linear; transition: background-color .2s linear; }

.crisis-content .content-wrapper.ie6 .ps-scrollbar-y { font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */ }

.crisis-content .content-wrapper .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
.crisis-content .content-wrapper .ps-scrollbar-y-rail.hover .ps-scrollbar-y { background-color: #ff1093; }

.crisis-content .content-wrapper.ie .ps-scrollbar-x,
.crisis-content .content-wrapper.ie .ps-scrollbar-y { visibility: visisble; }

.crisis-content .content-wrapper.ie:hover .ps-scrollbar-y,
.crisis-content .content-wrapper.ie.hover .ps-scrollbar-y { visibility: visible; }

/* Homapage menu */
.em-btn .dl-wrap-menuopen .dl-menuwrapper { padding-top: 35px; }

/* CQ */
body.index.cq-wcm-edit .emergency-button { position: absolute; z-index: 100; }

/* Responsive */
@media screen and (max-width: 1100px){
    .homepagelinks.parbase { margin-top: -55px; }
}

/*
@media screen and (min-width: 768px){
    .homepage #main { background-image: none !important; z-index: 15; }
}
*/

@media screen and (max-width: 768px){
    /*Low Crisis Level */
    .crisissettings .crisis-level-low { display: none; width: 0px; }
    .homepagelinks.parbase.crisis-low { width: 100%; }
    .homepagelinkcontent { text-align: left; width: 240px; position: absolute; right: 43%; top: 50%; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); }

    /* General Crisis wrapper */
    .crisissettings .content-wrapper {
        width: calc(100% - 90px);
    }
}

@media screen and (max-width: 767px){
    .homepage #video { display:none; }
}


@media screen and (max-width: 760px){
    html, body, #main { height: auto !important; }
    .homepagelinkcontent { text-align: left; width: 240px; position: absolute; right: 48%; top: 50%; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); }
    .homepagelinkcontent h2 { font-size: 23px; color: #ffffff; margin-bottom: 8px; }
    .bg-gradient { width: 100%; }

    .homepagelinks.parbase { top: 335px; }

    .homepagelinks.parbase {  top: 0; left: 0; right: initial; -webkit-transform: none; transform: none; -ms-transform: none; margin-top: 0; }
    .homepagelink { padding: 30px 0; height: auto; max-height: none; }
    .homepagelinkcontent { position: relative; left: 50%; right: initial; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -ms-transform: translateX(-50%); }

    span.rule { height: 100%; top: 100%; }
}

@media screen and (max-width: 1440px) and (min-width: 968px) {
    .crisis-content.crisis-level-low  .content-wrapper { max-height: 430px; overflow: hidden; }
}