/*** Various ***/
.reey, .card-title, .display-3, .pros {
    font-family: reeyregular !important;
}

.red {
    color: #eb695cff !important;
}

#reeylight {
    font-weight: 300;
    font-size: 1.3rem;
}

.jumbotron {
    background-color: white;
}

.bg2 {
    margin-top: -40px;
    background-image: url("../images/bgFooter3.8b031a248341.png"), url("../images/bgLong.4dec309df2f9.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
}

.bg2-spain {
    margin-top: -40px;
    background-image: url("../images/bgFooterSpain3.53623825bb2c.png"), url("../images/bgLong.4dec309df2f9.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
}

.emptySpace {
    height: 100px;
}

.emptySpaceBig {
    height: 350px;
}

a.custom-card,
a.custom-card:hover {
  text-decoration: none;
}

/*** Category buttons for mobile ***/
.mobWrapper {
    display: none;
    margin: 1vw 9vw 5vw 9vw;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3vw 6vw;
}

.categoryButton {
    color: white;
    font-weight: 800;
    font-size: 3vw;
    text-align: center;
    padding: 3.5vw 3vw 2.5vw 3vw;
    box-sizing: border-box;
    background-color: transparent;
    background-size: 100% 100%;
    filter: drop-shadow(4px 4px 4px #a0a0a0);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobWrapper a:hover {
    text-decoration: none !important;
}

#cat-mob-category1 {
    background-image: url("../images/btnCatCity.84f170f17631.png");
}
a:hover #cat-mob-category1 {
    background-image: url("../images/btnCatCity2.cc3180a49fea.png");
}
a:hover #cat-mob-category1 .cat-mob-text {
    color: #eb695cff;
}
#cat-mob-category2 {
    background-image: url("../images/btnCatTours.388deed9875d.png");
}
a:hover #cat-mob-category2 {
    background-image: url("../images/btnCatTours2.62ead21edcf4.png");
}
a:hover #cat-mob-category2 .cat-mob-text {
    color: #18b5c9ff;
}
#cat-mob-category3 {
    background-image: url("../images/btnCatSpecial.3191b92547b6.png");
}
a:hover #cat-mob-category3 {
    background-image: url("../images/btnCatSpecial2.3627b22a7926.png");
}
a:hover #cat-mob-category3 .cat-mob-text {
    color: #9d4690ff;
}
#cat-mob-category4 {
    background-image: url("../images/btnCatMeeting.7d0aee2474ab.png");
}
a:hover #cat-mob-category4 {
    background-image: url("../images/btnCatMeeting2.68acff58b8b9.png");
}
a:hover #cat-mob-category4 .cat-mob-text {
    color: #4f9079ff;
}
#cat-mob-category5 {
    background-image: url("../images/btnCatBeach.7ebea0dee4ec.png");
}
a:hover #cat-mob-category5 {
    background-image: url("../images/btnCatBeach2.ff9a67b06155.png");
}
a:hover #cat-mob-category5 .cat-mob-text {
    color: #fcc108ff;
}
#cat-mob-category6 {
    background-image: url("../images/btnCatWinter.d5c5c00b8b46.png");
}
a:hover #cat-mob-category6 {
    background-image: url("../images/btnCatWinter2.75ac4146ce6a.png");
}
a:hover #cat-mob-category6 .cat-mob-text {
    color: #256db0ff;
}

/*** Slider transition ***/

/* .carousel-item {
    transition: transform 1.5s ease-in-out;
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1.5s !important;
}

.carousel-fade .carousel-item.active {
    z-index: 1;
    opacity: 1;
} */

/*** Search Menu with Select Options ***/
.carousel-item img {
    width: 100%;
    height: auto;
}

#sliderFrame, #sliderFrameMob {
    margin-top: -41.666%;
    z-index: 10;
    position: absolute;
    display: block;
}

#sliderFrameMob {
    display: none;
}

#searchEventsLayer {
    width: 100%;
    z-index: 12;
    position: absolute;
    /* box-shadow: 4px 4px 7px #363636; */
    padding-top: 4%;
    margin: auto;
    padding-left: 6%;
    top: 0; left: 0; bottom: 0; right: 0;
}

.titleSearchMenu {
    color: white;
    width: 186pt;
    padding-left: 22pt;
}

#titleSearchS {
    display: none;
}

.directionLeft1, .directionRight1 {
    background-size: 21px, cover;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 90%;
    height: 40pt;
    width: 143pt;
    border-width: 0px;
}

.directionLeft1 {
    background-image: url("../images/arrow.5c3c11de3ae1.jpg"), url("../images/directionLeft1.0bcb5c666925.png");
}

.directionRight1 {
    background-image: url("../images/arrow.5c3c11de3ae1.jpg"), url("../images/directionRight1.1b88ffd76dd5.png");
}

.directionRight2 {
    height: 40pt;
    width: 21.5pt;
    background-image: url("../images/directionRight2.eabe22e35f8c.png");
    background-size: cover;
    background-color: transparent;
}

.directionLeft2 {
    height: 40pt;
    width: 21.5pt;
    background-image: url("../images/directionLeft2.badff815d586.png");
    background-size: cover;
    background-color: transparent;
}

.optionButton {
    background-image: url("../images/optionButton.4e809763dd7a.png");
    background-size: cover;
    background-color: transparent;
    height: 36pt;
    width: 143pt;
    color: #e63f34ff;
    font-weight: 500 !important;
    border-width: 0px;
}

select {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 15px;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

.mobColSearch select:hover {
    font-weight: 600;
}

.mobColSearch button:hover {
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.315);
}

.cat-mob-text {
    color: white;
}

.emptyField {
    height: 40pt;
    width: 21.5pt;
    background-color: transparent;
}

.exactWidth {
    flex-grow: 0;
}

.dropdown .btn-block {
    font-size: 15px;
}

/*** Bus Image and About Be Event ***/
.bus {
    background-image: url("../images/bus.5abacc5de969.jpg");
    background-position: right bottom;
    background-size: 50% auto;
    background-repeat: no-repeat;
    min-height: 405px;
    filter: drop-shadow(0px 35px 15px rgb(172, 172, 172));
}

.busText {
    padding-left: 5%;
    padding-right: 50%;
}

.bus a {
    color: #154b64ff !important;
    text-decoration: underline !important;
    text-decoration: #154b64ff;
}

.bus a:hover {
    font-style: italic;
}

/*** Cities ***/
.cityCards {
    margin-top: 20px;
    height: 800px;
}

.cityWrapper {
    margin-left: 85px;
    margin-right: 85px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 35px;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
}

.cityTitleFront {
    font-family: reeyregular;
    color:  #154b64ff;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}

.cityImgOverlay {
    position: absolute;
    top: 0%;
    left: 0%;
}

.flip-card {
    background-color: transparent;
    /* width: 300px;
    height: 450px; */
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 300px;
    height: 450px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.315);
}
  
.last-card-inner {
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.315);
    
    display: flex;
    justify-content: center;
    height: 100%;
}
  
.last-card-front {
    overflow: auto;
    position: relative !important;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    background-color: white;
    color: black;
}

.flip-card-back {
    background-image: url("../images/cityCardBack.12fd07d97bdd.png");
    background-size: cover;
    transform: rotateY(180deg);
} 

.cityCardLast {
    margin-top: 35px;
    grid-column: 2 / 4;
    grid-row: 1;
}

.cityCardLast:hover .last-card-inner{
    transform: rotateY(180deg);
}

.last-card-front, .last-card-back {
    position: absolute;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    background-color: white;
    color: black;
}

.last-card-back {
    background-image: url("../images/cityCardBackBlue.7523e3f5515e.png");
    background-size: 100%;
    transform: rotateY(180deg);
}
.last-card-back{
    background: url("../images/cityCardBackBlue.7523e3f5515e.png") bottom;
    background-size: cover;
    min-height: 307px;
    z-index: 10;
}
.cityCardLast:hover .last-card-back::before{
    background: url("../images/cityCardBackBlue.7523e3f5515e.png") bottom;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 0;
}

.last-card-back .card-title {
    background-color: #3469a2;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 20px 30px;
    position: relative;
    z-index: 2;
}
.last-card-back .cityPromo1 {
    margin: 0;
    padding: 30px 20px 16px;
    position: relative;
    z-index: 2;
}
.last-card-back  .cityPromo2 {
    margin: 0;
    padding: 0px 20px 16px;
    position: relative;
    z-index: 2;
}
.last-card-back .cardButton {
    width: 80px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background-image: url("../images/cityCardButtonBlue.c3db332ed6aa.png");
}


.last-card-back .cardButton:hover {
    background-image: url("../images/cityCardButtonBlue2.650b591dcdd9.png");
}

.titleBack {
    color: white;
    margin-top: 50px;
}

.cityPromo1 {
    color: black;
    font-size: 11pt;
    text-align: center;
    margin: 25% 5% 5% 5%;
    /* margin: 5vw 2vw 2vw 2vw; */
}

.cityPromo2 {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10%;
}

.cardButton {
    width: 50%;
    height: 13%;
    margin-left: 25%;
    background-image: url("../images/cityCardButton.6ba66f959f97.png");
    background-size: 100% 100%;
    filter: drop-shadow(2px 2px 5px #919191);
}

.cardButton:hover {
    background-image: url("../images/cityCardButton2.5bac040d41cd.png");
}

.cities {
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.315);
}

.cityImage2 {
    position: absolute;
    width: auto;
    height: 100%;
    bottom: 0px;
    right: 0px;
    /* z-index: 1; */
}

.cityOverlay {
    z-index: 2;
}

.card-img-overlay {
    z-index: 3;
}

/*** Top 3 Events ***/
#eventRow{
    margin-left: 0;
    margin-right: 0;
}

.events {
    width: 26rem;
    box-shadow: 4px 4px 7px #919191;
}

.events .card-title {
    color: black;
    position: relative;
}

.events .card-text {
    font-size: 15px;
    color: black;
}

.events .card-img {
    width: 100%;
    height: auto;
}

.events .card-img.overlay {
    position: absolute;
    margin-left: calc(-100% + 40px);
    width: calc(100% - 40px);
}

#event1 {
    -ms-transform: rotate(353deg); /* IE 9 */
    transform: rotate(353deg);
    margin-left: auto;
    margin-top: 30px;
}

#event2 {
    margin: auto;
}

#event3 {
    -ms-transform: rotate(7deg); /* IE 9 */
    transform: rotate(7deg);
    margin-right: auto;
    margin-top: 30px;
}

/*** Breaking News ***/
.news {
    background-image: url("../images/bgNews.c8324c6cde59.png");
    background-size: 100%;
    background-position: top;
    background-color: transparent;
    height: 42.5rem;
    width: 20rem;
    border-width: 0px;
    border-radius: 15px;
    filter: drop-shadow(4px 4px 7px #919191);
}

.newsSmall #newsRotate {
    z-index: 101;
    position: relative;
}

.events:hover .card-title, 
#newsRotate a:hover h3, 
.prosAll a:hover h2 {
    text-decoration: underline;
}

.news h3 {
    color: black;
    font-size: 2rem;
}

.news h5 {
    background-image: url("../images/newsTitle.d5223fbd7b15.png");
    background-size: 100% 100%;
    color: black;
    font-size: 1.1rem;
    padding-left: 10px;
}

.news p {
    color: white;
    font-size: 15px;
}

#newsRotate {
    padding-left: 35%;
    -ms-transform: rotate(352deg); /* IE 9 */
    transform: rotate(352deg);
}

/*** Voordelen van Be Event ***/
.textMagnifier {
    align-items: flex-end;
}

.prosAll {
    background-image: url("../images/magnifier_L.e7102701b9ad.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom;
    padding: 15% 1% 17% 5%;
    filter: drop-shadow(0px 15px 10px rgb(172, 172, 172));
}

.prosAll, .prosAll li {
    color: black;
    font-size: 1.5rem;
}

.prosAll .pros {
    font-size: 110%;
}
.prosAll li {
    font-size: 90%;
}

.prosAll h2 {
    color: black;
}

.prosAll {
    z-index: 100;
}

.prosAll a:hover {
    text-decoration: none;
    filter: drop-shadow(2px 2px 5px rgb(172, 172, 172));
}

/*** Responsive styles ***/
@media screen and (max-width: 1700px) {
    #searchEventsLayer {
        padding-top: 3.5%;
    }
    .emptySpaceBig {
        height: 250px;
    }
}

@media screen and (max-width: 1500px) {
    .bus {
        min-height: 27vw;
    }

    .last-card-back{
        min-height: 290px;
    }

    .busText {
        padding-left: 2%;
    }
    .cityCards {
        height: 53vw;
    }
    .cityWrapper {
        margin-left: 6vw;
        margin-right: 6vw;
        grid-gap: 2.3vw;
    }
    .flip-card-inner {
        width: 20vw;
        height: 30vw;
    }
    .titleBack {
        margin-top: 3vw;
    }
    .cityPromo1 {
        font-size: 1vw;
    }
    .cityCardLast {
        margin-top: 2.3vw;
    }
    #eventRow {
        margin-left: 85px;
        margin-right: 85px;
    }
    #event1 {
        margin: auto;
    }
    #event2 {
        -ms-transform: rotate(7deg); /* IE 9 */
        transform: rotate(7deg);
        margin-right: auto;
    }
    #event3 {
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg);
        margin: auto;
        margin-top: 10px;
    }
    .prosAll .pros {
        font-size: 100%;
    }
    .prosAll li {
        font-size: 80%;
    }
}

@media screen and (max-width: 1400px) {
    .red {
        font-size: 2rem;
    }
    #reeylight {
        font-size: 1.1rem;
    }
    #searchEventsLayer {
        padding-top: 4%;
        margin-left: -15px;
    }
    .titleSearchMenu {
        padding-left: 16.5pt;
        margin-bottom: -10pt;
    }
    .titleSearchMenu h4 {
        font-size: 1.3rem;
    }
    .directionRight1 {
        background-size: 18px, 100% 100%;
        height: 30pt;
        margin-bottom: 7pt !important;
    }
    .directionLeft1 {
        background-size: 18px, 100% 100%;
        height: 30pt;
        margin-bottom: -5pt !important;
    }
    .last-card-back{
        min-height: 274px;
    }
    .optionButton {
        background-size: 100% 100%;
        height: 27pt;
    }    
    .emptyField {
        height: 30pt;
        width: 16.125pt;
        margin-bottom: -5pt !important;
    }
    .directionRight2 {
        height: 30pt;
        width: 16.125pt;
        margin-bottom: -5pt !important;
    }
    .directionLeft2 {
        height: 30pt;
        width: 16.125pt;
        margin-bottom: -5pt !important;
    }
    .emptySpaceBig {
        height: 200px;
    }
    .prosAll .pros {
        font-size: 90%;
    }
    .prosAll li {
        font-size: 70%;
    }
}


@media screen and (max-width: 1300px) {
    .last-card-back{
        min-height: 252px;
    }
}

@media screen and (max-width: 1200px) {
    #searchEventsLayer {
        padding-top: 2.5%;
    }
    .bus {
        background-position-x: 115%;
    }
    .busText {
        padding-right: 45%;
    }
    .red {
        font-size: 1.7rem;
    }
    .cityWrapper {
        margin-left: 13.4vw;
        margin-right: 13.4vw;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 4vw;
    }
    .cityCards {
        margin-top: 0;
        height: 142vw;
    }
    .flip-card-inner {
        width: 34vw;
        height: 51vw;
    }

    .last-card-back{
        min-height: 411px;
    }

    .last-card-back .cityPromo1 {
        padding: 39px 48px 39px;
    }
    .last-card-back  .cityPromo2 {
        padding: 3px 10px 22px;
    }
    .last-card-back .card-title {
        font-size: 30px;
        padding: 22px 34px;
        margin: 0px;
    }

    .last-card-back .cardButton {
        width: 135px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .last-card-back .cardButton:hover {
        background-image: url("../images/cityCardButtonBlue2.650b591dcdd9.png");
    }

    .cityCardLast {
        margin-top: 4vw;
        grid-column: 1 / 3;
    }
    .titleBack {
        margin-top: 15%;
    }
    .cityPromo1 {
        font-size: 1.5vw;
    }
    .cityPromo2 {
        font-size: 1.5vw;
    }
    .display-3 {
        font-size: 300%;
    }
    #eventRow .card-title {
        font-size: 140%;
    }
    .events {
        width: 24rem;
    }
    .events .card-text {
        font-size: 14px;
    }
    .textMagnifier {
        align-items: flex-start;
    }
    .prosAll {
        background-image: url("../images/magnifier_M.906c08ae7fbb.png");
        background-size: 100%;
        background-position: top;
        padding: 10% 1% 17% 5%;
        margin-top: -50px;
        margin-left: -100px;
    }
}

@media screen and (max-width: 1100px) {
    .bg2 {
        background-image: url("../images/bgFooter3.8b031a248341.png"), url("../images/bgTablet.1f341dd357aa.jpg");
    }
    .bg2-spain {
        background-image: url("../images/bgFooterSpain3.53623825bb2c.png"), url("../images/bgTablet.1f341dd357aa.jpg");
    }
    #eventRow {
        margin-left: 50px;
        margin-right: 50px;
    }
    .prosAll {
        padding: 12% 2% 20% 7%;
        margin-left: -200px;
    }
}

@media screen and (max-width: 1000px) {
    #searchEventsLayer {
        padding-top: 3%;
    }
    .titleSearchMenu {
        padding-left: 16.5pt;
        margin-bottom: -10pt;
    }
    .titleSearchMenu h4 {
        font-size: 1.1rem;
    }
    select, .optionButton {
        font-size: 14px;
    }
    .directionRight1 {
        background-size: 16px, 100% 100%;
        background-position: 93%;
        width: 125pt;
        height: 25pt;
    }
    
    .last-card-back{
        min-height: 342px;
    }

    .directionLeft1 {
        background-size: 16px, 100% 100%;
        background-position: 93%;
        width: 125pt;
        height: 25pt;
    }
    .optionButton {
        background-size: 100% 100%;
        width: 125pt;
        height: 23pt;
    }    
    .emptyField {
        height: 25pt;
        width: 13.4pt;
        /* margin-bottom: -5pt !important; */
    }
    .directionRight2 {
        background-size: 100% 100%;
        height: 25pt;
        width: 13.4pt;
        margin-bottom: -4.2pt !important;
    }
    .directionLeft2 {
        background-size: 100% 100%;
        height: 25pt;
        width: 13.4pt;
        margin-bottom: -4.2pt !important;
    }
    .bus {
        background-position-x: 140%;
    }
    .busText {
        padding-left: 0;
        padding-right: 27%;
    }
    #eventRow {
        margin-left: 100px;
        margin-right: 100px;
    }
    #event2 {
        margin-top: 30px;
    }
    #event3 {
        -ms-transform: rotate(353deg); /* IE 9 */
        transform: rotate(353deg);
        margin-top: 30px;
    }
    #newsRotate {
        margin-top: 400px;
    }
    .prosAll {
        padding: 15% 2% 50% 8%;
        margin-left: -500px;
    }
    .prosAll .pros {
        font-size: 100%;
    }
    .prosAll li {
        font-size: 80%;
    }
}

@media screen and (max-width: 900px) {
    .cityWrapper {
        margin-left: 7.35vw;
        margin-right: 7.35vw;
    }
    .cityCards {
        height: 165vw;
    }
    .flip-card-inner {
        width: 40vw;
        height: 60vw;
    }
    .cityPromo1, .cityPromo2 {
        font-size: 1.8vw;
    }
    .prosAll {
        padding: 15% 2% 50% 8%;
        margin-left: -400px;
    }
    .prosAll .pros {
        font-size: 90%;
    }
    .prosAll li {
        font-size: 70%;
    }
}

@media screen and (max-width: 800px) {
    .bg2, .bg2-spain {
        background-size: 100% auto, 125% auto;
    }
    .mobWrapper {
        display: grid;
    }
    #searchEventsLayer {
        background-image: url("../images/mobSearchMenu.47d62aea4912.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        width: unset;
        height: unset;
        padding-top: 4vw;
        padding-right: 10vw;
        position: unset;
        margin: unset;
    }
    #sliderFrame {
        display: none;
    }
    #sliderFrameMob {
        display: block;
        /* box-shadow: 0px -8px 7px #75757570; */
    }
    .carousel-inner {
        box-shadow: 0px -8px 7px #75757570;
    }
    .tempColSearch, #titleSearchL {
        display: none;
    }

    .last-card-back{
        min-height: 305px;
    }

    .mobColSearch select, .mobColSearch button {
        background-image: none;
        background-color: white;
        border-radius: 50px !important;
        filter: drop-shadow(2px 2px 3px rgb(110, 110, 110));
    }
    /* .mobColSearch form {
        direction: rtl;
    } */
    .titleSearchMenu, .mobColSearch select {
        width: 100%;
    }
    .titleSearchMenu { 
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 3vw;
    }
    .mobColSearch button {
        width: 55%;
        margin-left: 45%;
        margin-bottom: 6vw !important;
    }
    #titleSearchS {
        display: contents;
        font-size: 3vw;
        color: #eb695cff;
    }
    .mobColSearch select {
        text-align: left;
        background-image: url("../images/arrow.5c3c11de3ae1.jpg");
        background-size: 21px;
        background-repeat: no-repeat;
        background-position: 90%;
        padding-left: 4vw;
    }
    .mobColSearch span {
        text-align: left !important;
        align-self: flex-end;
    }
    .mobSearchMenu {
        padding-left: 33vw;
    }
    .directionLeft1, .directionRight1, .optionButton {
        margin-top: 1.5vw !important;
        margin-bottom: 1.5vw !important;
        height: 30pt;
        font-size: 105%;
    }
    .display-3 {
        font-size: 240%;
    }
    #eventRow {
        margin: unset;
    }
    .prosAll {
        padding: 18% 2% 50% 8%;
        margin-left: -20%;
    }
    .prosAll .pros {
        font-size: 100%;
    }
    #newsRotate {
        -ms-transform: rotate(0deg); /* IE 9 */
        transform: rotate(0deg);
        margin-top: 425px;
    }
}

@media screen and (max-width: 700px) {
    .red {
        font-size: 1.3rem;
    }
    #reeylight {
        font-size: 0.9rem;
    }
    .cityWrapper {
        margin-left: 19.15vw;
        margin-right: 19.15vw;
        grid-template-columns: repeat(1, 1fr);
    }
    .cityCards {
        margin-top: 0;
        height: 400vw;
    }
    .flip-card-inner {
        width: 60vw;
        height: 90vw;
    }
    .cityCardLast {
        margin-top: 4vw;
        grid-column: 1;
    }
    .cityPromo1, .cityPromo2 {
        font-size: 2.5vw;
    }
    .cityCard2 img {
        margin-top: auto;
    }
    .cityCard2 h2 {
        margin-top: -5px !important;
    }
    .prosAll {
        padding: 19% 2% 50% 9%;
        margin-left: -35%;
    }
    .prosAll .pros {
        font-size: 90%;
    }
    .prosAll li {
        font-size: 65%;
    }
}

@media screen and (max-width: 650px) {
    .directionLeft1, .directionRight1, .optionButton {
        font-size: 100%;
    }
    .last-card-back {
        min-height: 100%;
    }
    .last-card-back .cityPromo1 {
        padding: 10px 8px 10px;
        font-size: 13px;
    }
    .last-card-back  .cityPromo2 {
        padding: 0px 10px 10px;
    }
    .last-card-back .card-title {
        font-size: 20px;
        padding: 10px 30px;
        margin: 0;
    }
    .cityCardLast:hover .last-card-back .cardButton {
        height: 30px;
    }
    .cityCardLast:hover .last-card-back {
        position: relative;
    }
    .cityCardLast:hover .last-card-back::before {
        height: 40px;
        bottom: 0;
        z-index: 0;
        background-size: 100%;
    }

    .last-card-back .cardButton {
        width: 66px;
        height: 26px;
    }
}

@media screen and (max-width: 600px) {
    /* .mobWrapper {
        margin: 1vw 9vw 5vw 9vw;
    } */
    .titleSearchMenu { 
        padding-bottom: 5vw;
    }
    .directionLeft1, .directionRight1, .optionButton {
        margin-top: 2vw !important;
        margin-bottom: 2vw !important;
        font-size: 95%;
        height: 25pt;
    }
    .prosAll {
        padding: 21% 2% 50% 9%;
        margin-left: -55%;
    }
    .last-card-back .cardButton {
        width: 66px;
        height: 26px;
    }
}

@media screen and (max-width: 550px) {
    #titleSearchS {
        font-size: 3.3vw;
    }
    .mobColSearch select {
        background-size: 19px;
    }
    .display-3 {
        font-size: 190%;
    }
    .cityPromo1, .cityPromo2 {
        font-size: 2.8vw;
    }
    .events {
        width: 20rem;
    }
    #eventRow .card-title {
        font-size: 18px;
    }
    #newsRotate {
        padding-left: 40px;
    }
}

@media screen and (max-width: 525px) {
    .mobColSearch button {
        width: 65%;
        margin-left: 35%;
    }
    .prosAll {
        padding: 22% 2% 50% 10%;
        margin-left: -65%;
    }
    .prosAll .pros {
        font-size: 85%;
    }
    .prosAll li {
        font-size: 60%;
    }
}

@media screen and (max-width: 475px) {
    .directionLeft1, .directionRight1, .optionButton {
        font-size: 90%;
    }
    .prosAll {
        padding: 23% 2% 50% 10%;
        margin-left: -75%;
    }
}

@media screen and (max-width: 450px) {
    #searchEventsLayer {
        margin-right: -2vw;
    }
    .mobSearchMenu {
        padding-left: 23vw;
    }
    #titleSearchS {
        font-size: unset;
    }
    .titleSearchMenu { 
        padding-left: 10vw;
    }
}

@media screen and (max-width: 400px) {
    .events {
        width: 15rem;
    }
    #newsRotate {
        padding-left: 0px;
    }
}

/*** Special shadow ***/
/* .bus:before, .bus:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px;
    left: 25px;
    width: 50%;
    top: 60%;
    max-width:550px;
    background: rgb(163, 163, 163);
    -webkit-box-shadow: 0 35px 30px rgb(163, 163, 163);
    -moz-box-shadow: 0 35px 30px rgb(163, 163, 163);
    box-shadow: 0 35px 30px rgb(163, 163, 163);
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

.bus:after
{
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 25px;
  left: auto;
} */