#expoHero{margin-top: 75px;position: relative;overflow: hidden;}
#expoHero img{min-width: 800px; }
@media only screen and (min-width: 200px) {
#expoHero img{position: relative; z-index: -1; right: 20%;}
}
@media only screen and (min-width: 768px) {
    #expoHero img{right: 0;}
    }
#expoHero #expoHeroInfo{position: absolute; top: 0; left: 0; padding-left: 5%; background: linear-gradient(90deg, rgba(0,0,0,0.5252293577981652) 41%, rgba(0,0,0,0) 100%); width: 100%; height: 100%;}
#expoHero #expoHeroInfo h1{ color: #fff; font-size: 48px; text-transform: uppercase; font-weight: bold;}
#expoHero #expoHeroInfo h1 span{ color: #00aad4;}
#expoHero #expoHeroInfo .btn.para{width: 280px;}
#expoHero #expoHeroInfo #expoSpecifics{border-left: solid 3px #00aad4; padding-left: 10px;}
#expoHero #expoHeroInfo #expoSpecifics h2{ margin: 0px 0px 10px; color: #fff;}

.expoCallout{background-color: #00aad4; padding: 10px 0;}
.expoCallout p{color: #fff; font-size: 36px; font-weight: bold;}

#expoEventDetails .col-sm-6 > div{padding: 50px 0px 40px;}

@media only screen and (min-width: 768px) {
    #expoEventDetails .col-sm-6 img{padding-top: 50px;}
}
@media only screen and (min-width: 992px) {
    #expoEventDetails .col-sm-6 img{padding: 30px;}
}
#expoEventDetails .col-sm-6 > div h3{font-size: 32px; color: #00aad4; font-weight: bold; margin-bottom: 20px;}
#expoEventDetails .col-sm-6 > div p{margin-bottom: 25px;}
#expoEventDetails .col-sm-6 > div .btn.para{width: 280px;}
#expoEventDetails .col-sm-6 > div .specifics{margin-top: 35px; border-left: solid 3px #00aad4; padding-left: 5px;}
#expoEventDetails .col-sm-6 > div .specifics p{margin-bottom: 5px;}

#expoWhatsThere {padding: 35px 0;}
#expoWhatsThere .card{border: solid 3px #fff; border-radius: 10px; padding: 15px; text-align: center; max-width: 500px; margin: 20px auto;}
#expoWhatsThere .card h4{font-size: 28px; text-transform: uppercase; font-weight: bold;display: flex; align-items: center; justify-content: center; min-height: 60px;}
#expoWhatsThere .card img{width:100%; max-width: 250px; margin: auto;  border-radius: 15px;}
#expoWhatsThere .card p{color: #fff; max-width: 250px; margin: 20px auto 0; font-weight: 500; font-size: 18px; }

.brands-represented {display:flex; flex-wrap: wrap; justify-content: center; row-gap: 20px; margin: 50px auto; padding-top: 20px; background-color: none;}
.brands-represented h3{margin-top: 0px;}
.brands-represented .support-logos__wrap{max-width: 600px; margin:0 auto; width: 100%; padding: 0 15px;}
.brands-represented ul.support-logos{display:flex; flex-wrap: wrap; justify-content: center; row-gap: 20px; margin: 30px auto 0; column-gap: 17px; padding-left: 0px;}
.brands-represented ul.support-logos a{width: 47%; border-radius: 5px; box-shadow:0 0 8px 4px #0000001a; background-color: #fff;}
.brands-represented ul.support-logos a li{border-radius: 5px; padding: 5px 10px; list-style: none;}
.brands-represented ul.support-logos li img{margin: 0 auto; display: block; max-width: 100%;}
@media only screen and (min-width: 767px) {
    .brands-represented ul.support-logos a{width: 20%;}
    .brands-represented .support-logos__wrap{max-width: 100%;}
}

@media only screen and (min-width: 1021px) {
    .brands-represented ul.support-logos a{width: 16%;}
}
.brands-represented a li, .brands-represented a li img{transition: .3s;}
.brands-represented a:hover li {background-color: #00aad4;}
.brands-represented a:hover li img{filter: brightness(0) invert(1);}

#coupLocator{padding: 20px 0;}
.maincontent #coupLocator ul li{font-size: 26px; color: #00aad4; line-height: 28px; font-weight: 500;}
@media only screen and (min-width: 992px) {
    .maincontent #coupLocator ul{margin-top: 75px;  }
}



.bg-ms-blue {
    background-color: #00aad4;
    color: #fff;
}
.bg-light-blue {
    background-color: rgba(0, 170, 212, .1);
}
.title-lg--ms-blue,
.maincontent .title-lg--ms-blue{
    font-size: 32px;
    color: #00aad4;
    font-weight: bold;
}
.title-lg--dark-gray,
.maincontent .title-lg--dark-gray{
    font-size: 32px;
    color: #414141;
    font-weight: bold;
}

#venueMap .col-md-12 > div{display: flex; justify-content: space-between; align-content: center;}
#venueMap .col-md-12 > div h4{font-size: 28px; color: #fff; font-weight: bold; margin: 35px 0;}
#venueMap .col-md-12 > div p{font-size: 18px; color: #fff; border-right: solid 3px #fff; margin: 35px 0; padding-right: 10px;}

@media only screen and (min-width: 300px) {
    #lightgallery {
        padding:0px 5px
    }

    #lightgallery a {
        display: block;
        max-width: 360px;
        width: 100%;
        margin: 5px auto
    }
}

@media only screen and (min-width: 768px) {
    #lightgallery {
        max-width:750px;
        margin: auto;
        width: 100%
    }

    #lightgallery a {
        display: inline-block;
        max-width: 200px;
        margin: 5px 5px
    }
}

@media only screen and (min-width: 992px) {
    #lightgallery {
        max-width:885px
    }
}

@media only screen and (min-width: 1200px) {
    #lightgallery {
        max-width:100%
    }

    #lightgallery a {
        max-width: 250px;
    }
}
iframe{margin-bottom: -5px; border: solid 5px #fff;}