/*'stingers' refer to the full-width banner used to present a dynamic heading/description with background image, as well as the smaller tiles used to link within a page*/

/*A banner stinger is made up of a bannerStinger container div which sets the layout dimensions, an H1 heading with usually 2 lines, and a caption (p element).
Additionally 2 empty divs are needed:
- div class "box" -- animated expanding outline.
- div class "bg" -- background image.
*/

.bannerStinger {
    font-family:'barlow medium', barlow, helvetica;
    font-weight:bold;
    display:block;
    height:350px;
    width:100%;
    position:relative;

    padding:0; margin:0;
    margin-bottom:15px;
}

.box {
    box-sizing: border-box;
    border: 3px solid teal;
    position:absolute;
    display:inline-block;

}

.bannerStinger .box {
    left:0; top:0;
    width:100%;height:100%;
    animation-name: expandbox;
    animation-duration: 1.8s;
    animation-timing-function: linear;

    z-index: 2;
}

.bannerStinger .bg {
    position:absolute;
    z-index: -1;
    display:block; width:100%; height:100%; 
    background-position: left center; 
    background-size:cover; 
    background-image:linear-gradient(white, rgba(255,255,255,0.9), rgba(200, 200, 255, 0.8), rgba(150,150,200,0.3), rgba(0,0,0,0.9), black), url('pexels-marta-branco-from-pexels-1194713.jpg') /*url('testpic.jpg')*/;

    animation-name: backgroundReveal;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
}

.bannerStinger h1 {
    padding-left:12px;
}

.bannerStinger h1 .subheading {
    display:inline-block;
    clear:left;
    position:relative;

        animation-name: subheadingReveal;
    animation-timing-function: steps(40);
    overflow:hidden; display:inline-block;
    animation-duration: 3.7s;
    margin-top:0;
    white-space: nowrap;
}

.bannerStinger p {

    position:absolute;
    overflow:hidden;
    display:inline-block;
    bottom:0;
    color:white;
    margin-left: 15px;
}

@keyframes expandbox {
    0% {width:9px; height:35px;  background-color:teal; border-style:none;}
    15% {border-style: none;}
    25% {background-color:blue;}
    45% {border-style: solid;}
    50% {width:9px; height:35px;}
    100% {top: 0px; background-color: none; width:100%; height:100%;}
}


@keyframes subheadingReveal {
    0% { width:0; }
    40% { width:0;}
    100%{width:100%;}
}

@keyframes backgroundReveal {
    0% {opacity: 0; background-position: left top;}
    20% {opacity:0.001;}
    
    85% {opacity: 1;}
    100% { background-position: left center; }

}



.tileStinger {
    margin: 5px 20px 20px 0px;
    display:inline-block;
    height:180px;
    width:250px;
    position:relative;
    overflow: hidden;

    padding:0;
    /*background: #F7F9FA;
    background-image: linear-gradient(#F0F5Fb, #FAFBFC);*/
    background: #FAFBFC;

}

.tileStinger:hover {
    background:white;
}

.tileStinger .box {
    position:absolute;
    left:0; top:0;
    width:100%;height:100%;
    animation-name: tileStingerExpand;
    animation-duration: 6s;
}

.tileStinger h2 {
    margin-top:2px;
}

.tileStinger p {
    margin-left:12px;
    position:absolute;
    bottom:0;
    margin-bottom:7px;    
}


@keyframes tileStingerExpand {
    0% {opacity:0;}
    20% {opacity: 0;}
    100% {opacity:100%;}
}