/* ==============================================================================
* Website:
* Filename: sectionpage.css
* Media: screen
* Structure: TBC
============================================================================== */

.sectionpage-spinner-wrapper { position: absolute; width: 100%; height: calc(100% - 150px); }

.sectionpagespinneritem { float: left; width: calc(25% - 3px); border-right: 3px solid white; cursor: pointer; }

.sectionpagelink { width: 100%; height: 100%; }

.sectionpagelink { background-size: cover; background-position: center; position: relative; }

.em-btn .functional-heading { border-bottom: 0px !important; }

/* Slides */
.sectionpagelinkcontent { width: calc(100% - 60px); position: absolute; bottom: 30px; padding: 0 30px; color: #ffffff; }
.sectionpagelinkcontent h2 { font-size: 28px; margin-bottom: 0px; }
.sectionpagelinkcontent h3 { font-family: 'Libre Baskerville',  Times New Roman, Times, serif; font-style: italic; font-size: 16px; line-height:1.2; margin:10px 0 20px 0; min-height:50px; text-transform: initial; }
.sectionpagelinkcontent span.calltoaction { font-family: FlamaCondensed-Medium, arial, sans-serif; color: #ffffff; letter-spacing: 0.5px; text-transform: uppercase; font-size: 13px; position: relative; height: 15px; }
.sectionpagelinkcontent span.calltoaction:after { content: ""; position: absolute; top: 3px; display: inline-block; width: 11px; height: 11px; background: url(../../images/icons/homepage-link-arrow.png) no-repeat; background-size: cover; vertical-align: middle; margin-left: 7px; }

.sectionpagelink .hover-overlay { width: 100%; height: 100%; background: rgba(0,0,0,0.2); transition: opacity 0.3s linear; opacity: 0; }
.sectionpagelink:hover .hover-overlay { opacity: 1; }

.sectionpagelink:before {
    content:""; display:block; height:50%; width:100%; position:absolute; left:0; bottom:0; 
    background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); /* For Safari 5.1 to 6.0 */
    background: -moz-linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); /* Standard syntax (must be last) */
}

.sectionpagelink > a { display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; }

/* Slick Slider */
.slick-prev,
.slick-next { position: absolute; top: 50%; margin-top: -15px; background: #da137b; padding: 5px; border: 0px; width: 50px; height: 50px }

.slick-prev { left: 0px; }
.slick-next { right: 0px; }

.slick-prev.chevron::before,
.slick-next.chevron::before { border-style: solid; border-width: 2px 2px 0 0; border-color: #ffffff; content: ''; display: inline-block; height: 1.2em; left: 0.15em; position: relative; top: 0.15em; transform: rotate(-45deg); vertical-align: top; width: 1.2em; }

.slick-next.chevron:before { left: 0; margin-right: 0.6em; -ms-transform: rotate(45deg); transform: rotate(45deg); }
.slick-prev.chevron:before { left: 50%; margin-left: -1.9em; -ms-transform: rotate(-135deg); transform: rotate(-135deg); }

/* Emergency Button */
.emergency-button { position: absolute; z-index: 40000; display: block; color: #ffffff; padding: 6px 30px; background: #000000; font-family: FlamaCondensed-Medium, arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
body.cq-wcm-edit .emergency-button { position: absolute; z-index: 100; }


/* CQ */
body.sectionpage.cq-wcm-edit { overflow: scroll; }
body.sectionpage.cq-wcm-edit .sectionpage-spinner-wrapper { position: relative; width: 100%; }
body.sectionpage.cq-wcm-edit .sectionpagespinneritem { float: left; width: calc(25% - 3px); border-right: 3px solid grey; border-bottom: 3px solid grey; }
body.sectionpage.cq-wcm-edit #footer { position: relative; }

@media screen and (max-width: 1440px){
    
    .sectionpagelinkcontent { bottom: 60px; }
   
}

@media screen and (max-width: 968px){
    
    .sectionpagelinkcontent { bottom: 30px; }
   
}

@media screen and (max-width: 768px){
    
    .sectionpage-spinner-wrapper { position: relative; }
    .sectionpagespinneritem { width: 100%; border-right: 0px; }
    
}

@media screen and (max-width: 767px){
    
    .sectionpagelink:before { height:100%; }
    
}