/**************/
/*Dashboard*/
/************/
.site-wrapper {
    background-color: transparent;
}

.PhotoDashboardSA.heroPaneCTA span.boldError {
    font-weight: bold;
}
.PhotoDashboardSA.heroPaneCTA span.spanError {
    color: red;
}

/**************/
/*HeroPane*/
/**************/
.PhotoDashboardSA.heroPaneCTA {
    width: 100%;
    padding-top: 80vh;
    position: relative;
    overflow: hidden;
}

.PhotoDashboardSA.heroPaneCTA::after {
    content: " ";
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    height: 40px;
    width: 100%;
    display: inline-block;
    position: absolute;
}

[id^="heroPaneCTAImg"] {
    width: 100%;
    height: auto;
    z-index: 0;
    transform: scale(1.0);
}

.heroPlusImageContainer {
    display: none;
}

[id^="heroPaneCTADiv"] {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all .5s ease-out;
}

[id^="heroPaneCTADiv"]:after {
    padding-top: 88%;
    content: '';
}

.hero-media-link,
.hero-link-mobile {
    width: 44%;
    max-width: 700px;
    margin-top: 0%;
    bottom: 0;
    margin-left: 2%;
    font-family: "Roboto", "RobotoLocal", sans-serif;
    color: #FFFFFF;
    padding: 20px 20px 40px;
    text-align: left;
}

.hero-media-link {
    bottom: 1%;
    margin-left: 5%;
}
.hero-media-link-right {
    right: 0;
}

.hero-media-link,
.hero-display{
    position: absolute;
}

.hero-media-type.play,
.hero-media-type.image {
    border: 3px solid #FFFFFF;
    display: inline-block;
    float: left;
    margin: 5px 10px 10px 0;
}

.hero-media-link a,
.hero-link-mobile a
{
    display:block;
    position:relative;
    padding: 0 0 15px 15px;
    text-decoration:none;
    color: #FFFFFF;
}

.hero-media-link a:hover,
.hero-link-mobile a:hover{
    text-decoration:none;
    color: #FFFFFF;
}

.hero-media-title {
    font-weight: 700;
    display: inline-block;
    float: left;
}

.hero-media-location {
    font-weight: 700;
    display: inline-block;
    float: left;
    padding-right: 10px;
}

.hero-media-dateline {
    font-weight: 400;
    display: inline-block;
    float: left;
}

.hero-media-type i.fa-play {
    font-size: 23px;
    padding:5px;
}

.hero-media-type i.fa-image {
    font-size: 35px;
    padding:1px 4px 0;
}

.hero-display,
.hero-display-mobile,
.exclusive-callout {
    background: #444;
    width: 20%;
    margin-top: 15%;
    top: 0;
    margin-left: 2%;
    font-family: "Roboto", "RobotoLocal", sans-serif;
    color: #FFFFFF;
    padding: 20px;
}

.hero-display,
.exclusive-callout {
    position:absolute;
}


.hero-media-link,
.hero-display,
.exclusive-callout {
    z-index: 89;
}

.hero-link-mobile,
.hero-display-mobile,
.exclusive-callout-mobile {
    display: none;
}
.hero-display-mobile .a-media-link{
    color:#fff;
    display:inline-block;
    position: absolute;
    right: 10px;
    bottom: 30px;
}

.hero-callout-title {
    background: #444;
    font-family: "Roboto Slab", "RobotoSlabLocal", serif;
    color: #FFFFFF;
    font-size: 1.5vw;
    font-weight: 700;
    line-height: 1.3em;
    display: block;
    word-break: break-word;
}

.hero-callout-attention {
    background: #444;
    font-family: "Roboto Slab", "RobotoSlabLocal", serif;
    color: #FFFFFF;
    font-size: 1.5vw;
    font-weight: 700;
    line-height: 1.3em;
    word-break: break-word;
}

.hero-callout-caption {
    background: #444;
    font-family: "Roboto", "RobotoLocal", sans-serif;
    color: #FFFFFF;
    font-size: 1vw;
    font-weight: 400;
    line-height: 1.5em;
    margin: 2% 0 5%;
    word-break: break-word;
}

.callout-button {
    background: #777;
    padding: 10px;
    color: #FFFFFF;
    font-size: 1vw;
    font-family: "Roboto", "RobotoLocal", sans-serif;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1;
}
.media-callout-badge {
    position:relative;
    padding: 0 0 0 60px;
    float: right;
}
.media-callout-badge .hero-media-type.play,
.media-callout-badge .hero-media-type.image{
    position: absolute;
    left: 0;
    margin-top: 2px;
}
.media-callout-badge .hero-media-title{
    float: none;
}
.media-callout-badge .hero-media-location-dateline b {
    margin-right: 10px;
}


.callout-button > span{
    font-size: 1vw;
}

.callout-button > a {
    text-decoration: none;
    color: #fff;
}

.callout-button > a:hover {
    text-decoration: underline;
    color: #fff;
}

span.hero-exclusive-title {

}

.hero-exclusive > img {
    float: left;
    width: 20px;
    margin-top: 63px;
}

.hero-exclusive-topic {
    display: block;
    font: 700 30px/1.1 'roboto slab', serif;
}
@media(max-width: 800px) {
    .hero-exclusive-topic {
        font-size:24px;
    }
}

.exclusive-slider {
    position: absolute;
    display: block;
    left: 0;
    height: 4px;
    background-color: #ccc;
    width: 0%;
    transition: width 1s ease;
    bottom: -15px; /*match the bottom padding of the link with the bottom corner*/
}

a:hover .exclusive-slider {
    width: 100%
}

.hvr-underline-from-left {
    position: relative;
}
.exclusive-bottom-left {
    position:absolute;
    bottom:0;
    left:0;
    width: 20px;
    height: 20px;
    border-left: 4px solid #ccc;
    border-bottom: 4px solid #ccc;
}
/** Edge **/
@supports (-ms-ime-align:auto) {
    .hero-display {
        width: 22%;
    }

    .callout-button {
        font-size: 1.25vw;
    }

    .hero-callout-caption {
        font-size: 1.25vw;
    }
}
/** IE 11 **/
*::-ms-backdrop, .hero-display {
    width: 22%;
}

*::-ms-backdrop, .callout-button {
    font-size: 1.25vw;
}

*::-ms-backdrop, .hero-callout-caption {
    font-size: 1.25vw;
}

.hero-chevron-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

@media(min-width: 1301px) {
    .PhotoDashboardSA.heroPaneCTA::after {
        height: 200px;
        bottom: 0;
    }
}

@media(min-width: 1300px) and (max-height:900px){
    .PhotoDashboardSA.heroPaneCTA {
        max-height: 650px;
    }
}

@media (max-width: 1300px) {

    .PhotoDashboardSA.heroPaneCTA.heroPaneCTA_callout::after {
        position: relative;
        bottom: -10px;
    }

    .hero-chevron-container
    .heroPaneCTADiv {
        display: none;
    }

    .hero-media-link .a-media-link {
        display: none;
    }

    .heroPlusImageContainer {
        display: block;
        position:relative;
    }


    .hero-link-mobile,
    .hero-display-mobile,
    .exclusive-callout-mobile{
        width: 100%;
        max-width: 100%;
        clear: both;
        display: block;
        margin: 0;
        background: #444;
        position: relative;
    }

    .hero-display,
    .hero-media-link,
    .exclusive-callout {
        display: none;
    }

    .hero-callout-title {
        display:inline;
    }

    .hero-callout-title,
    .hero-callout-attention {
        font-size: 2.5vw;
    }

    .hero-callout-caption{
        font-size: 1.75vw;
    }

    .callout-button,
    .callout-button > span:after{
        font-size: 2.1vw;
    }

    .column {
        display: flex;
        flex-flow: column;
    }

    .media-callout-button {
        display: flex;
        flex-wrap: wrap;
        word-break: break-word;
    }
    .hero-media-dateline {
        padding-top: 7px;
    }

    .hero-media-location {
        padding-top: 7px;
    }

    .hero-media-type.image {
        padding: 0 9px 0 1px;
        width: 50px;
    }

    .callout-button{
        width: auto;
        display:inline-block;
        margin: 20px 0;
    }

    .a-media-link, .hero-link-mobile a {
        padding:0;
    }
}


@media (max-width: 991px){
    .hero-callout-title,
    .hero-callout-attention {
        font-size: 2.25vw;
    }

    .hero-callout-caption {
        font-size: 1.75vw;
    }

    .callout-button,
    .callout-button > span:after {
        font-size: 2vw;
    }

}

@media (max-width: 767px){
    .hero-callout-title,
    .hero-callout-attention {
        font-size: 4vw;
    }

    .hero-callout-caption {
        font-size: 3vw;
    }

    .callout-button > a,
    .callout-button > span:after {
        font-size: 4vw;
    }

}

@media (max-width: 420px) {
    .callout-button > a,
    .callout-button > span:after {
        font-size: 3.75vw;
    }

    .hero-media-title {
        font-size: 4.5vw;
        width: 70vw;
    }

    .media-callout-button {
        display: flex;
        flex-wrap: wrap;
    }

    .hero-media-dateline {
        font-size: 3.5vw;
        padding-top: 11px;
    }

    .hero-media-location {
        font-size: 3.5vw;
        padding-top: 11px;
    }

    .hero-media-type.image {
        padding: 0 9px 0 1px;
        width: 50px;
    }
}

@media(max-width: 320px){
    .callout-button {
        width: 65%
    }
}

.clear-both{
    clear:both;
}

[id^="hero-chevron-img-container"] {
    height: 200px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    width: 100%;
    color: #fff;
    position: absolute;
    bottom: 0;
}


[id^="hero-chevron-img-container"] i.fa-chevron-down,
.hero-chevron-container i.fa-chevron-down {
    color: #fff;
    font-size: 30px;
}

[id^="hero-chevron-img-container"] i.fa-chevron-down:hover,
.hero-chevron-container i.fa-chevron-down:hover {
    cursor: pointer;
}


.hero-chevron {
    width: 30px;
}

@media(max-width: 991px){
    #hero-chevron-img-container{
        height: 150px;
    }
}

/********* Button chevron animation *********/

.callout-button > span:after {
    font-family: "Font Awesome\ 5 Free";
    font-weight: bold;
    flex: 1;
    content: "\f054";
    margin-left: 15px;
    max-width: 20px;
    text-decoration: none;
}

.callout-button > a:hover + span:after {
    -webkit-animation: chevron-bounce .5s infinite;
    -moz-animation: chevron-bounce .5s infinite;
    -ms-animation: chevron-bounce .5s infinite;
    animation: chevron-bounce .5s infinite;
}

@keyframes chevron-bounce {
    0% {
        padding-left: 0;
    }

    25% {
        padding-left: 1px;
    }

    50% {
        padding-left: 2px;
    }

    75% {
        padding-left: 1px;
    }

    100% {
        padding-left: 0;
    }
}

a.galleryLoc {
    font-size: 21px;
    font-weight: 600;
}

/*************************************/
/***        Focal Point            ***/
/************************************/

/*modern browsers*/
picture.fixed-aspect {
    display: block;
    position: relative;
}

picture.fixed-aspect img {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: cover;
    object-position: 50% 50%; /*overidden inline if provided*/
}