﻿.top-ten-column {
    margin-bottom: 30px;
    overflow: hidden;
    contain: content;
    border-radius: 6px;
    transform-style: flat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: perspective(1px) translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0,0,0,.2);
    transition: transform .2s ease-out,box-shadow .2s ease-out
}

    .top-ten-column:focus, .top-ten-column:hover, .top-ten-column[focus-within] {
        box-shadow: 0 4px 16px rgba(0,0,0,.12)
    }

    .top-ten-column:focus, .top-ten-column:focus-within, .top-ten-column:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,.12)
    }

@media screen and (min-width:992px) {
    .top-ten-column {
        margin-bottom: 0
    }
}

@media screen and (max-width:767.98px) {
    [top-ten-region-3] > .top-ten-column {
        margin-bottom: 0
    }
}

@media screen and (min-width:1200px) {
    .top-ten-column:active .top-ten-column__heading, .top-ten-column:hover .top-ten-column__heading {
        transform-style: flat;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000px;
        transform: perspective(1px) translateY(40%) scale(1.025)
    }

    .top-ten-column:active .top-ten-column__image:after, .top-ten-column:active .top-ten-column__image:before, .top-ten-column:hover .top-ten-column__image:after, .top-ten-column:hover .top-ten-column__image:before {
        transform-style: flat;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000px;
        transform: perspective(1px) translateY(-10%) scale(1.2)
    }
}

.top-ten-column__wrapper {
    contain: content;
    min-height: 720px
}

.top-ten-column__heading, .top-ten-column__image:before {
    position: absolute;
    z-index: 2;
    transition: transform .2s ease-out;
    transform-style: flat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px
}

.top-ten-column__heading {
    font-weight: 500;
    font-family: brandon-grotesque,Brandon Grotesque,open-sans,Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,blinkmacsystemfont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial;
    letter-spacing: 1.2px;
    font-display: swap;
    font-size: 24px;
    line-height: 32px;
    bottom: 70px;
    left: 20%;
    width: 60%;
    margin: 0;
    padding: 14px;
    text-align: center;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 6px;
    transform: perspective(1px) translateY(50%) scale(1)
}

@media screen and (min-width:992px) {
    .top-ten-column__heading {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 1.2px
    }
}

@media screen and (min-width:768px) {
    .top-ten-column__heading {
        bottom: 50px
    }
}

@media screen and (min-width:992px) {
    .top-ten-column__heading {
        bottom: 50px;
        left: 15%;
        width: 70%;
        font-size: 22px;
        line-height: 20px
    }
}

@media screen and (min-width:1500px) {
    .top-ten-column__heading {
        bottom: 70px;
        left: 20%;
        width: 60%;
        font-size: 24px;
        line-height: 20px
    }
}

.top-ten-column__image {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
    padding-top: 66.667%;
    overflow: hidden;
    contain: content;
    background-position: 50%;
    background-size: cover
}

    .top-ten-column__image img {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 100%;
        height: auto;
        min-height: 128px;
        object-fit: cover;
        object-position: top;
        font-family: "object-fit: cover; object-position: top"
    }

    .top-ten-column__image:before {
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 0 0 70px 450px;
        transform: perspective(1px) translateY(0) scale(1)
    }

@media screen and (min-width:768px) {
    .top-ten-column__image:before {
        border-width: 0 0 50px 345px;
        content: ""
    }
}

@media screen and (min-width:992px) {
    .top-ten-column__image:before {
        border-width: 0 0 50px 294px
    }
}

@media screen and (min-width:1200px) {
    .top-ten-column__image:before {
        border-width: 0 0 50px 360px
    }
}

@media screen and (min-width:1500px) {
    .top-ten-column__image:before {
        border-width: 0 0 70px 450px
    }
}

.top-ten-column__image:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 70px;
    transform-style: flat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: perspective(1px) translateY(0) scale(1);
    opacity: .6;
    transition: transform .2s ease-out;
    content: ""
}

@media screen and (min-width:768px) {
    .top-ten-column__image:after {
        height: 50px
    }
}

@media screen and (min-width:992px) {
    .top-ten-column__image:after {
        height: 50px
    }
}

@media screen and (min-width:1500px) {
    .top-ten-column__image:after {
        height: 70px
    }
}

.top-ten-column__image a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4
}

.top-ten-column__deals {
    width: 100%
}

@media screen and (min-width:992px) {
    .top-ten-column__deals {
        min-height: auto
    }
}

.top-ten-column__deals tr:last-child td {
    height: 46px;
    text-align: center;
    background-color: rgba(0,0,0,.08)
}

    .top-ten-column__deals tr:last-child td a {
        color: #fff;
        font-weight: 400;
        font-size: 18px
    }

        .top-ten-column__deals tr:last-child td a:focus, .top-ten-column__deals tr:last-child td a:hover {
            text-decoration: none
        }

.top-ten-column__price {
    text-align: right
}

    .top-ten-column__price span {
        color: #fff;
        font-weight: 600;
        font-size: 32px;
        font-family: brandon-grotesque,Brandon Grotesque,open-sans,Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,blinkmacsystemfont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial;
        text-align: right
    }

        .top-ten-column__price span:before {
            display: block;
            margin-right: 26px;
            font-size: 12px;
            text-align: right;
            content: "FROM"
        }

        .top-ten-column__price span:after {
            display: inline-block;
            font-size: 16px;
            text-align: right;
            vertical-align: super;
            content: "*"
        }

    .top-ten-column__price i {
        width: 16px;
        font-size: 20px;
        vertical-align: top
    }

    .top-ten-column__description:before, .top-ten-column__price:before {
        position: absolute;
        top: 0;
        right: 12px;
        left: 0;
        border-top: 1px solid #fff;
        opacity: .3;
        transition: opacity .2s ease-out;
        content: ""
    }

.top-ten-column__description {
    color: #fff;
    font-size: 20px;
    position: relative
}

    .top-ten-column__description:before {
        right: 0;
        left: 12px
    }

.top-ten-column__price {
    position: relative
}

    .top-ten-column__description a, .top-ten-column__price a {
        display: block;
        padding: 6px 12px;
        color: #fff;
        font-weight: 400;
        font-size: 14px;
        text-decoration: none
    }

.top-ten-column__description {
    width: calc(100% - 100px);
    min-width: calc(100% - 100px);
    max-width: calc(100% - 100px);
    padding: 0
}

.top-ten-column__price {
    width: 146px;
    min-width: 146px;
    max-width: 146px;
    padding: 0;
    overflow: hidden;
    contain: content;
    text-overflow: ellipsis
}

.top-ten-column__row {
    background-color: transparent;
    transition: background-color .2s ease-out;
    border-bottom: 1px solid rgba(0,0,0,.09);
}

    .top-ten-column__row:focus, .top-ten-column__row:hover {
        background-color: rgba(0,0,0,.05)
    }

.top-ten-column__footer a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 46px;
    text-align: center;
    background-color: transparent;
    transition: background-color .2s ease-out
}

    .top-ten-column__footer a:active, .top-ten-column__footer a:hover {
        background-color: rgba(0,0,0,.075)
    }

.top-ten-column-wrapper:first-child .top-ten-column {
    background-color: #fff; border: 1px solid #e0e0e0;
}

    .top-ten-column-wrapper:first-child .top-ten-column .top-ten-column__heading {
        color: #ffc800
    }

.top-ten-column-wrapper:first-child .top-ten-column__image {
    background-color: #dbac00
}

/*    .top-ten-column-wrapper:first-child .top-ten-column__image:before {
        border-color: transparent transparent #ffc800
    }

    .top-ten-column-wrapper:first-child .top-ten-column__image:after {
        background-color: #ffc800
    }
*/
.top-ten-column-wrapper:nth-child(2) .top-ten-column {
    background-color: #fff
}

    .top-ten-column-wrapper:nth-child(2) .top-ten-column .top-ten-column__heading {
        color: #62d7bd
    }

.top-ten-column-wrapper:nth-child(2) .top-ten-column__image {
    background-color: #30bc9d
}

/*    .top-ten-column-wrapper:nth-child(2) .top-ten-column__image:before {
        border-color: transparent transparent #62d7bd
    }

    .top-ten-column-wrapper:nth-child(2) .top-ten-column__image:after {
        background-color: #00b58d
    }*/

.top-ten-column-wrapper:nth-child(3) .top-ten-column {
    background-color: #fff
}

    .top-ten-column-wrapper:nth-child(3) .top-ten-column .top-ten-column__heading {
        color: #047fd1
    }

.top-ten-column-wrapper:nth-child(3) .top-ten-column__image {
    background-color: #03619f
}

@media screen and (min-width:768px)and (max-width:991.98px) {
    .top-ten-column-wrapper:nth-child(3) .top-ten-column__image {
        padding-top: 33.334%
    }
}

/*.top-ten-column-wrapper:nth-child(3) .top-ten-column__image:before {
    border-color: transparent transparent #047fd1
}*/

/*@media screen and (min-width:768px)and (max-width:991.98px) {
    .top-ten-column-wrapper:nth-child(3) .top-ten-column__image:before {
        border-width: 0 0 50px 720px
    }
}

.top-ten-column-wrapper:nth-child(3) .top-ten-column__image:after {
    background-color: #047fd1
}*/

.top-ten-title {
    margin-top: 0;
    margin-bottom: 18px;
    color: #452325;
    text-transform: uppercase
}

.col_2bsty {
    color: #0a438b !important;
}

.callnowsavebig {
    font-weight: 300 !important;
    color: #2b2b2b !important;
    font-size: 13px !important;
}
.textupp {
    text-transform: uppercase !important;
}




.plane-animation {
    animation-name: plane-animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes plane-animation {
    0% {
        transform: translateY(-50px)
    }

    50% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-50px)
    }
}




/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }

    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }

    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }

    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
    -webkit-animation: animateCloud 35s linear infinite;
    -moz-animation: animateCloud 35s linear infinite;
    animation: animateCloud 35s linear infinite;
    opacity: 0.3 !important;
    -webkit-transform: scale(0.65);
    -moz-transform: scale(0.65);
    transform: scale(0.65);
}

.x2 {
    -webkit-animation: animateCloud 20s linear infinite;
    -moz-animation: animateCloud 20s linear infinite;
    animation: animateCloud 20s linear infinite;
    opacity: 0.3 !important;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x3 {
    -webkit-animation: animateCloud 30s linear infinite;
    -moz-animation: animateCloud 30s linear infinite;
    animation: animateCloud 30s linear infinite;
    opacity: 0.3 !important;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x4 {
    -webkit-animation: animateCloud 18s linear infinite;
    -moz-animation: animateCloud 18s linear infinite;
    animation: animateCloud 18s linear infinite;
    opacity: 0.3 !important;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x5 {
    -webkit-animation: animateCloud 25s linear infinite;
    -moz-animation: animateCloud 25s linear infinite;
    animation: animateCloud 25s linear infinite;
    opacity: 0.3 !important;
    -webkit-transform: scale(0.55);
    -moz-transform: scale(0.55);
    transform: scale(0.55);
}

/* OBJECTS */

.cloud {
    background: #fff;
    background: -moz-linear-gradient(top, #7ed3e6 5%, #f1f1f1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #bfecf6), color-stop(100%,#f1f1f1));
    background: -webkit-linear-gradient(top, #fff 5%,#bfecf6 100%);
    background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%);
    background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%);
    background: linear-gradient(top, #fff 5%,#f1f1f1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    height: 120px;
    position: relative;
    width: 350px;
}

    .cloud:after, .cloud:before {
        background: #fff;
        content: '';
        position: absolute;
        z-indeX: -1;
    }

    .cloud:after {
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        height: 100px;
        left: 50px;
        top: -50px;
        width: 100px;
    }

    .cloud:before {
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        border-radius: 200px;
        width: 180px;
        height: 180px;
        right: 50px;
        top: -90px;
    }