#sticky_banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    z-index: 9999;
}

body[data-is-menu-visible='true'] #sticky_banner {
    left: 82%;
}

.displayBlock {
    display: block !important;
}

.addOpacity {
    opacity: 1 !important;
}

#sticky_button_contact {
    position: absolute;
    display: block;
    width: 60px;
    height: 40px;
    top: -39px;
    left: calc(50% - 30px);
    z-index: 10000;
    background: #160205;
    text-align: center;
}

.sticky_button {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 15px 0 0 0;
    padding: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10" viewBox="0 0 18 10"><defs><style>.cls-1 {fill: #fff;fill-rule: evenodd;}</style></defs><path id="Arrow_copy_8" data-name="Arrow copy 8" class="cls-1" d="M375,282.007l9-7.156-1.8-2.862-7.2,5.724-7.2-5.724-1.8,2.862Z" transform="translate(-366 -272)"/></svg>') no-repeat center;
    background-size: contain;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

    -webkit-transition: transform 400ms ease;
    -moz-transition: transform 400ms ease;
    -ms-transition: transform 400ms ease;
    -o-transition: transform 400ms ease;
    transition: transform 400ms ease;
}

.flip_arrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#sticky_banner_content {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 0;
    background: #000;
    -webkit-transition: max-height 300ms ease-in-out;
    -moz-transition: max-height 300ms ease-in-out;
    -ms-transition: max-height 300ms ease-in-out;
    -o-transition: max-height 300ms ease-in-out;
    transition: max-height 300ms ease-in-out;
}

.sticky_banner_image {
    display: block;
    width: 100%;
    height: 50px;
    color: #fff;
    font-family: "AkzidenzGroteskBEBoldCn", Verdana, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    background-size: contain;
    background-repeat: no-repeat;
}

.setStandardHeight {
    height: 50px !important;
    line-height: 50px;
}

.sticky_banner_image img {
    display: inline-block;
    width: auto;
    height: 50px;
}

.sticky_open {
    max-height: 600px !important;
}

#sticky_banner_spotlight {
    position: relative;
    display: block;
    width: 100%;
    height: 400px;
}

#sticky_banner_spotlight .slide_content ul li {
    height: 400px;
}

@media screen and (max-width: 420px){
    #sticky_banner_spotlight {height: 430px}
    #sticky_banner_spotlight .slide_content ul li {height: 430px}
}

@media screen and (max-width: 360px){
    #sticky_banner_spotlight {height: 400px}
    #sticky_banner_spotlight .slide_content ul li {height: 400px}
}

@media screen and (max-width: 320px){
    #sticky_banner_spotlight {height: 370px}
    #sticky_banner_spotlight .slide_content ul li {height: 370px}
}

#sticky_banner_spotlight .slide_content .sticky_content_image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    margin: 0 0 20px 0;
    -webkit-transition: max-height 400ms ease;
    -moz-transition: max-height 400ms ease;
    -ms-transition: max-height 400ms ease;
    -o-transition: max-height 400ms ease;
    transition: max-height 400ms ease;
    z-index: 1;
}

#sticky_banner_spotlight .slide_content .sticky_content_image iframe {
    width: 100%;
    height: 100%;
}

#sticky_banner_spotlight .slide_content .sticky_content_image img {
    display: block;
    width: 100%;
    height: auto;
}

#sticky_banner_spotlight .slide_content .sticky_content_image .play_button {
    display: block;
    position: absolute;
    top: calc(50% - 49px);
    left: calc(50% - 49px);
    width: 98px;
    height: 98px;
    background: url('data:image/svg+xml;utf8,<svg id="play_button" data-name="play button" xmlns="http://www.w3.org/2000/svg" width="195.844" height="196.125" viewBox="0 0 195.844 196.125"><defs><style>.cls-1, .cls-2 {fill-rule: evenodd;}.cls-1 {opacity: 0.5;}.cls-2 {fill: none;stroke: #fff;stroke-width: 2px;}</style></defs><path id="Ellipse_3_copy_8" data-name="Ellipse 3 copy 8" class="cls-1" d="M424.376,594.022A98,98,0,1,1,290.627,629.9,98.094,98.094,0,0,1,424.376,594.022Z" transform="translate(-277.5 -580.844)"/><path id="Ellipse_3_copy_8-2" data-name="Ellipse 3 copy 8" class="cls-2" d="M404.794,627.98a58.8,58.8,0,1,1-80.25,21.529A58.857,58.857,0,0,1,404.794,627.98Z" transform="translate(-277.5 -580.844)"/><path class="cls-2" d="M395.926,678.773L364.6,660.152v37.242l31.325-18.621" transform="translate(-277.5 -580.844)"/></svg>') no-repeat center;
    background-size: contain;
    z-index: 5;
}

#sticky_banner_spotlight .slide_content .sticky_content_date {
    display:block;
    color: #e71836;
    font-size: 14px;
    text-align: center;
    margin: 0 20px 10px 20px;
}

#sticky_banner_spotlight .slide_content .sticky_content_title {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    margin: 0 20px 0 20px;
}

#sticky_banner_spotlight .slide_content .sticky_content_copy {
    display: block;
    color: #fff;
    font-size: 14px;
    text-align: left;
    margin: 20px 20px 0 20px;
}

#sticky_banner_spotlight .slide_controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
}

#sticky_banner_spotlight .slide_controls ul li {
    float: none !important;
    position: relative;
    display: inline-block;
    width: auto !important;
    height: auto !important;
    padding: 0;
    margin: 0;
    overflow: visible;
}

#sticky_banner_spotlight .slide_controls ul li a {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    color: #8D8D8D;
    text-decoration: none;
    padding: 0;
    margin: 0 3px;
    text-align: center;
    background-color: transparent;
    border: 1px solid #6e6e6e;
    border-radius: 10px;
}

#sticky_banner_spotlight .slide_controls ul li a.selected {
    background-color: #e71836;
    border: 1px solid #e71836;
}


#sticky_loader {
    position: absolute;
    top: 40%;
    left: 0;
    display: block;
    width: 100%;
    height: 100px;
    /* site specific styles */
    background-color: #000;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    z-index: 10;
}

.set_display_none {
    display: none;
}

.set_opacity_none {
    opacity: 0;
}

#sticky_loader .loader {
    margin: 20px auto 0 auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;

    /* site specific styles */
    border-top: 4px solid rgba(255, 255, 255, 0.2);
    border-right: 4px solid rgba(255, 255, 255, 0.2);
    border-bottom: 4px solid rgba(255, 255, 255, 0.2);
    border-left: 4px solid #e71836;

    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 800ms infinite linear;
    animation: load8 800ms infinite linear;
}

#sticky_loader .loader,
#sticky_loader .loader:after {
    border-radius: 50%;
    width: 5em;
    height: 5em;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.sticky_blank_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #000;
    opacity: .7;
}

/* --- start FL.com specific styles --- */
.footlocker-styles .sticky_content_date {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
}

.footlocker-styles .sticky_content_title {
    font-family:'AkzidenzGroteskBEBoldCn', Arial, Helvetica, sans-serif;
}
/* --- end FL.com specific styles --- */

/* --- start FLCA specific styles --- */
.footlockercanada-styles .sticky_content_copy {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
}

.footlockercanada-styles .sticky_content_date {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
}

.footlockercanada-styles .sticky_content_title {
    font-family:'AkzidenzGroteskBEBoldCn', Arial, Helvetica, sans-serif;
}

.footlockercanada-styles .sticky_content_copy {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
}
/* --- end FLCA specific styles --- */

/* --- start KFL specific styles --- */
.kidsfootlocker-styles #sticky_button_contact {
    width: 100px;
    left: calc(50% - 50px);
}
.kidsfootlocker-styles .sticky_banner_image {
    font-family: BPReplay, Helvetica, Arial sans-serif;
    border-top: 10px solid #14639b;
}

.kidsfootlocker-styles .sticky_content_date {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.kidsfootlocker-styles .sticky_content_title {
    font-family: BPReplay, Helvetica, Arial sans-serif;
}
/* --- end KFL specific styles --- */

/* --- start Landscape styles --- */
.landscapeMode .sticky_banner_image {
    height: 45px;
}

.landscapeMode .sticky_banner_image img {
    display: inline-block;
    width: auto;
    height: 45px;
}

.landscapeMode #sticky_banner_spotlight .slide_content .sticky_content_image {
    width: 200px;
    margin: 20px 0 0 20px;
}

.landscapeMode #sticky_banner_spotlight {
    height: 200px;
}

.landscapeMode .video_link,
.landscapeMode .image_link{
    float: left;
    margin: 0;
    padding: 0;
}

.landscapeMode .sticky_text {
    float: left;
    width: 58%;
    margin: 20px 0 0 0;
}

.landscapeMode #sticky_banner_spotlight .slide_content .sticky_content_date {
    text-align: left;
}

.landscapeMode #sticky_banner_spotlight .slide_content .sticky_content_title {
    text-align: left;
}
/* --- end Landscape styles --- */