@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Rubik+Mono+One&display=swap');
:root {
   --index: calc(1vh + 1vw);
   --linear-gradient-primary: linear-gradient(0deg, #F46B45 0%, #ff891e 100%);
}
.nav-menuzord-transparent .menuzord-menu {
    display: none;
}
.navbar-sticky.nav-menuzord {
    background-color: rgba(255 255 255 / .8);
    backdrop-filter: blur(20px);
}

/*-----------SITE LOGO --------------------*/
.siteLogo{
    --siteLogo-transiction:0.85s cubic-bezier(.3, .3, 0, 1.2);
    --siteLogo-size:clamp(45px,calc(var(--index) * 3),70px);
    font-family: 'Rubik Mono One', sans-serif;
    font-size: clamp(50px,calc(var(--index) * 3.4),80px);
    display: inline-flex;
    line-height: 1;
    animation: 10s 10s k-siteLogo linear infinite;
    animation-direction:alternate;
    position: relative;
    z-index: 100;
}
.siteLogo:hover {
    animation-play-state: paused;
}
@keyframes k-siteLogo {
    1% { 
        transform: rotate(2deg);
    }
    3% { 
        transform: rotate(-2deg);
    }
    6% { 
        transform: rotate(0deg);
    }
}
.siteLogo__container {
    display:contents;
    position: relative;
}
.siteLogo__icon {
    position:relative;
    display:inline-block;
    width:var(--siteLogo-size);
    height:var(--siteLogo-size);
    background: var(--linear-gradient-primary);
    border:1px solid var(--orange);
    border-radius:calc(var(--index) / 5);
    overflow:hidden;
    flex: 0 0 auto;
    z-index: 1;
}
.siteLogo__icon:before  {
    content:'f';
    color: var(--white);
    transform: rotate(-10deg) translate(20%,20%);
    text-shadow: 1px 1px 2px #222;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: transform var(--siteLogo-transiction);
    transition-duration:.5s;
    will-change: transform;
}
.siteLogo__container:hover .siteLogo__icon:before {
    transform: scale(0.85);
}
.siteLogo__name-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--siteLogo-transiction);
    overflow: hidden;
    will-change: transform;
    /* backdrop-filter: blur(calc(var(--index) / 5)); */
    /* backdrop-filter: brightness(2) blur(calc(var(--index) / 5)); */
    border-top-right-radius: calc(var(--index) / 5);
    border-bottom-right-radius: calc(var(--index) / 5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    height: 100%;
    z-index: 0;
    padding: calc(var(--index) / 5);
}
.siteLogo__container:hover  .siteLogo__name-wrapper{
    opacity: 1;
    visibility: visible;
    transform: translateX(var(--siteLogo-size));
}
.siteLogo__name {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-evenly;
    height:100%;
    opacity:0;
    transition: opacity var(--siteLogo-transiction);
    will-change: opacity;
}
.siteLogo__fancy {
    font-size: 45%;
    text-transform: uppercase;
    font-weight: 500;
    -webkit-text-stroke: .75px var(--primary);
    -webkit-text-fill-color: transparent;
    line-height:.9;
    transform:  translateX(-150%);
    transition: transform var(--siteLogo-transiction);
    filter: drop-shadow(0px 2px 1px rgb(253 126 20 / 30%));
    will-change: transform;
}
.siteLogo__travel {
    font-family: 'Days One', sans-serif;
    font-size: 30%;
    line-height:.9;
    text-align: center;
    width:95%;
    transform: translateX(-150%) scale(.1);
    transition: transform var(--siteLogo-transiction);
    transition-delay:.08s; 
    color: var(--white);
    background: var(--linear-gradient-primary);
    border-radius:calc(var(--index) / 5);
    border:1px solid var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: transform;
}
.siteLogo__container:hover  .siteLogo__name,
.siteLogo__container:hover  .siteLogo__fancy,
.siteLogo__container:hover  .siteLogo__travel{
    opacity: 1;    
    transform:none;
}
@media(max-width:992px){
    .siteLogo__name-wrapper{
        opacity: 1;
        visibility: visible;
        transform: translateX(var(--siteLogo-size));
    }
    .siteLogo__fancy, .siteLogo__travel {
        transform:none;
    }
    .siteLogo__name {
        opacity:1;
    } 
}
/*---------------Section Title---------------------*/
.sectionTitle {
    --sectionTitle-color: var(--gray-dark);
    position:relative;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sectionTitle.sectionTitle-left {
   justify-content: flex-start;
}
.sectionTitle.sectionTitle-right {
   justify-content: flex-end;
}
.sectionTitle:before {
    content:'';
    position:absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    background-color: var(--primary);
}
.sectionTitle_wrapper {
    display: inline-block;
    padding: 1rem;
    text-align: center;
    position: relative;
}
.sectionTitle_wrapper.fancy:before,.sectionTitle_wrapper.fancy:after {
    content: attr(data-text-before);
    position: absolute;
    left: 50%;
    top: 115%;
    transform: translate(-50%, -50%);
    font-family: 'Rubik Mono One', sans-serif;
    font-size: calc(var(--index) * 3);
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: .5px var(--primary);
    opacity:0;
    will-change: scale;
    animation:k-fancy-scale 10s 8s linear infinite;
}
.sectionTitle_wrapper.fancy:after {
     content: attr(data-text-after);
     animation-delay:9.5s;
}
@keyframes k-fancy-scale {
    0%{
        transform: translate(-50%, -50%) scale(.6);
        opacity:0;
    }
    5% {
         transform: translate(-50%, -50%) scale(.8);
         opacity:.8;
    }
    10% {
         transform: translate(-50%, -50%) scale(1);
         opacity:.6;
    }
    15% {
         transform: translate(-50%, -50%) scale(1.2);
         opacity:0;
    }
    100% {
         transform: translate(-50%, -50%) scale(.6);
         opacity:0;
    }
}
.sectionTitle.sectionTitle-left .sectionTitle_wrapper {
    padding-left:0;
    text-align: left;
}
.sectionTitle.sectionTitle-right .sectionTitle_wrapper {
    padding-right:0;
    text-align: right;
}
.sectionTitle__title {
    font-size: calc(1.5rem + 0.5vw);
    color: var(--sectionTitle-color);
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom:.25rem;;
    z-index:1;
    position: relative;
}

.sectionTitle__title strong {
    color: var(--primary);
}
.sectionTitle__desc {
    font-size: calc(0.85rem + 0.5vw);
    color: var(--sectionTitle-color);
    margin-bottom: .5rem;
    line-height: 1;
    z-index:1;
    position: relative;
}
/*---------------Swiper Slider-----------------*/
.slider_tour__wrapper {
    position: relative;
    background-color: var(--light);
    border-bottom: 1px solid rgba(255, 137, 30, 0.3);
    overflow: hidden;
}
.slider_tour__title {
    position: absolute;
    font-size: calc(var(--index) * 4);
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    text-shadow: 0 8px 17px var(--light-gray);
}
.slider {
    --swiper-theme-color: var(--primary);
    --swiper-pagination-bullet-size: 10px;
    --transition: 1s cubic-bezier(.3, .5, 0, 1);
    padding-bottom:9vh;
    border-radius: calc(var(--index) / 2);
}
.slider.slider_mainPage {

}
@media(max-height:576px) {
    .slider {
        --swiper-navigation-size: 22px;
    }
}
.slider__wrapper {
	transition: var(--transition)!important;
	will-change: transform;
}
.slider__item {
    height: 55vh;
	min-height: 280px;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
	box-shadow: 0px 14px 14px -10px var(--secondary);
    border-radius: calc(var(--index) / 2);
    will-change: transform;
}
.slider_destination .slider__item, .slider_tour .slider__item {
    height: 65vh;
	min-height: 300px;
} 
@media(max-width:576px) {
    .slider_mainPage .slider__item {
    	height: 70vh;
    }
    .slider_destination .slider__item, .slider_tour .slider__item {
        height: 50vh;
    } 
}
.slider__item:hover {
    box-shadow: 0px 14px 14px -10px var(--primary)
}
.slider__img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	transition: var(--transition)!important;
	will-change: transform;
}
.slider_mainPage .slider__img {
	width: 200%;
	left: -50%;
}
img.slider__img{
    object-fit: cover;
}
.slider__item:hover .slider__img {
    filter: brightness(.85);
}
.slider_destination .slider__item:hover .slider__img {
   transform:scale(1.1);
}
.slider__item:hover .slider__title {
    color: var(--primary);
}
.slider__item:hover .slider__badge {
    color: var(--white);
}
.slider__item:hover .slider__group {
    opacity: 1;
}
.slider__item-caption {
    position: absolute;
    right: 5%;
    bottom: 20px;
    left: 5%;
    color: var(--white);
    text-align: right;
    font-size: calc(var(--index) * .84);
    text-shadow: 0 0 6px var(--dark);
    font-weight: 600;
    opacity: 0.75;
}
a.slider-img-overlay-link {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.slider__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--white);
    padding-bottom: 5%;
    transition: var(--transition)!important;
    position: relative;
}
.slider__content:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
}
.slider__title, .slider__group {
    width:90%;
    margin:0 auto;
    line-height:1;
    z-index:1;
}
.slider__group {
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: .5rem;
    opacity: .75;
    transition: opacity var(--transition);
}
.slider__title {
    font-size: 1.4275rem;
    margin-bottom: 1.5rem;
    transition: color var(--transition);
    font-weight: 500;
}
.slider__subtitle {
    width: max-content;
}
.slider__badge {
    font-size: 110%;
    width:max-content;
    text-align: right;
    text-transform: lowercase;
    color: var(--primary);
    font-weight: 600;
    transition: color var(--transition);
}
.slider__days {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.slider__days-count {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
.slider__days-count span {
    border: 1px solid var(--primary);
    border-radius: 100%;
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin-left: .7rem;
    font-weight: 500;
}
.slider__days-text {
    text-align: center;
    width: min-content;
    font-size: 80%;
    opacity: .85;
}
.slider__price {
    font-size:1.25rem;
}
.slider__price strong,
.slider__price span {
    font-size:120%;
    font-weight: 600;
    margin-left: .25rem;
}
.slider__price strong {
    color:var(--primary);
}
.swiper-button-next,
.swiper-button-prev {
    top:95%;
    outline: none;
}
.swiper-button-next {
    right: 20%;
    left: auto;
}
.swiper-button-prev {
    left: 20%;
    right: auto;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom:5%;
}
            
/*--------destination and tour---------*/
.tooltip-inner {
  background-color: var(--orange) !important;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--orange) !important;
}
a.underline {
    position:relative;
}
a.underline:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 30px;
    background-color: #ff891e;
    transition: all 0.3s;
}
a.underline:hover:before {
    width:100%;
}
#pdopage .btn-more, #pdopageReviews .btn-more {
    width:auto;
}
.button-group .button:before {
  content:"\f096";
  font-family: 'FontAwesome';
  margin-right: 10px;
  opacity: .5;
}

.button-group .button.is-checked:before {
  content:"\f046";
  opacity: 1;
}

.date {
    cursor: default;
    border: 1px solid;
    /* font-family: sans-serif; */
    position: relative;
    width:95px;
    text-align:center;
    line-height:1.8rem;
    border-radius: calc(var(--index) / 4);
    /* font-weight: 500; */
}
.date:after {
    content: attr(data-price);
    position: absolute;
    top: -7px;
    right: -7px;
    color: #fff;
    padding: 0 5px;
    line-height: 1.3;
    font-size: 82%;
    border-radius: 3px;
    font-family: 'Roboto', sans-serif;
    background: var(--danger);
    font-weight: 400;
}
.date.border-secondary:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    left: 0;
    background-color: #6c757d;
}
.destination-title {
    min-height: 90vh;
    position: relative;
    overflow: hidden;
}
.destination-title__image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fd7e14;
    -webkit-transition: transform 30s .5s ease-out;
    -moz-transition: transform 30s .5s ease-out;
    -ms-transition: transform 30s .5s ease-out;
    -o-transition: transform 30s .5s ease-out;
    transition: transform 30s .5s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.destination-title__image.scale {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    will-change: transform;
}
.destination-title__image:before {
    content:"";
    position:absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.destination-title__content {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 100%;
}
 .destination-title__content h1 {
    font-size: calc(2rem + 2vw);
    letter-spacing: calc(var(--index) / 10);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0px 4px 4px #2e475e;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.destination-title__content h1 .badge{
    text-shadow: none;
    padding: 0.63rem;
    font-size: 0.9rem;
}
.destination-title__content p {
  font-size: calc(0.875rem + 1vw);
  color: #fff;
  text-shadow: 0px 4px 4px #2e475e;
  line-height:1.25;
}
.destination-title__content .btn,
.destionation-how .btn,
.promo-calendar .btn{
    color: #fff;
    background-color: rgb(34 34 34 / 20%);
    font-size: calc(14px + 0.5vh);
    font-weight: 500;
    border: 2px solid var(--orange);
    border-radius: calc(var(--index) / 3);
}
.destination-title__content .btn:hover,
.destionation-how .btn:hover,
.promo-calendar .btn:hover{
    color: #fff;
    box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.5);
    background-color: var(--primary);
}

.destination-section {
  
}
.destination-section .breadcrumb-item + .breadcrumb-item:before,
.destination-section .breadcrumb li a{
    color: #f5f5f5;
}
.destination-section .transparent {
    font-weight: 500;
    font-size: 2rem;
    text-transform: uppercase;
    color: transparent;
    text-align: center;
    -webkit-text-stroke: 1px rgb(255 137 30 / 0.3);
    font-family: 'Rubik Mono One', sans-serif;
    line-height: 1;
}
.tourcard {
    width: 100%;
}
.tourcard .tour-id{
    position: absolute;
    bottom: 0;
    right: 3px;
    color: #dedede;
}
.tourcard figure, .tour-title__content figure {
   position:relative;
   margin:0;
}
.tourcard img {
}
.tourcard:hover img {
    transform: scale(1.1);
    -ms-filter: sepia(0);
}
.tourcard figure a {
    display:block;
    overflow:hidden;
    border-radius: 0.25rem;
}
.tourcard figure .icons {
    position: absolute;
    bottom: -17px;
    left: 0;
    width:100%;
}
.tourcard figure .icons ul {
    margin:0;
}
.tourcard figure .icons .icon-default {
    background-color: #fff;
    color: #31758d;
    border: 1px solid #31758d5c;
}
.tourcard figure .bottom {
   
}
.tourcard figure .label, .tour-title__content figure .label {
    position: absolute;
    right: 0px;
    top: 0px;
    border-radius: 0.25rem;
}
.tourcard figure .label span, .tour-title__content figure .label span {
    display: inline-block;
    padding: 7px 15px;
    font-style: normal;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}
.tourcard figure .bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    font-weight: 600;
    color: var(--white);
    /*background: linear-gradient(90deg, rgba(40, 62, 81, 0.9) 0%, rgba(75, 121, 161, 0.40) 50.08%, rgba(40, 62, 81, 0.90) 100%);*/
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(38 42 46 / 80%) 60%);
    cursor:default;
}
.tourcard .bottom .price {
    padding: .5rem 1.5rem 0;
    line-height: 1.75;
    font-size: 1.7rem;
    -ms-filter: drop-shadow(0 2px 2px #222);;
    filter: drop-shadow(0 2px 2px #222);;
}
.tourcard .price small {
    font-size: 70%;
    vertical-align: middle;
}
.tourcard .price strong {
    color: #ff891e;
    font-weight: 600;
    text-shadow: 0 2px 3px #262a2e;
}
.tourcard .price .oldPrice {
    position:relative;
    opacity: 0.8;
}
.tourcard .price .oldPrice:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    right: -5px;
    background-color: #fff;
    height: 1px;
    transform: rotateZ(22deg);
}
.tourcard figure .bottom .action {
    position:absolute;
    left: -5px;
    bottom: 0;
    transform: translateY(50%);
    padding: 5px 20px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    border-radius: 0;
    z-index: 1;
}
.tourcard.card .card-title {
    font-size: calc(16px + 0.1vw);
    font-weight: 700;
    transition: all .3s;
    display: block;
    text-transform: uppercase;
}
.tourcard .link a {
    color: #31758D;
}
.tourcard .link a:hover {
    color: #ff891e;
}
.destination-section .map {
    height:400px;
} 
.destination-section .destination-tabs .nav-item .nav-link {
    color: #31758d;
    font-weight: 500;
}
.destination-section .destinationTab-content h3 {
    color: #565b61;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.25125rem;
}
.destination-section .help-img {
    background-image: url(/assets/img/pages/callback.png);
    background-image: url(/assets/img/pages/callback.webp);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
} 
.destination-section a.clicktocall  {
    font-weight: 500;
    color: white;
    border-radius: 0;
    width: 100%;
    background: rgba(49, 117, 141, 0.7);
} 
.destination-section a.clicktocall:hover {
    background: rgb(252 97 13 / 70%);
}
.destination-section button.query  {
    width: 100%;
    border: 1px solid rgb(49 117 141 / 56%);
    border-radius: 0;
    color: #31758d;
    line-height: 1.8rem;
} 
.destination-section button.query i{
    transition:transform 1s;
}
.destination-section button.query:hover  {
    border-color: #ff891e;
    color: #ff891e;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
} 
.similar {
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
}
.description {
    cursor:default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.description .days{
    color: #222;
    opacity: 0.5;
}
.description .days ul{
    font-size: 200%;
    line-height: 1;
    color: #ff891e;
}
.description ul.datesmall li div  {
   cursor:default;
}
.description .icon {
    padding: 5px;
    border-color: rgb(49 117 141 / 0.5);
    color: #31758d;
    min-width:70px;
    min-height:65px;
    line-height:1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.description .icon .fa {
   font-size: 1.75rem;
   opacity: .75;
   position: relative;
}
.description .icon .fa-calendar-o:after {
   content:attr(data-total);
   position:absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -20%);
   font-size: 47%;
   font-family: 'Montserrat',sans-serif;
   font-weight: 600;
}
.description .icon:hover {
    border-color: #ff891e;
    color: #ff891e;
}
.block_l {
    font-size: calc(var(--index) * 3);
    font-weight: bold;
    opacity: .7;
}
.block_r {
    font-size: calc(0.75rem + 0.5vw);
    font-weight: 500; 
    background-image: url(/assets/img/pages/Ellipse.png);
    background-image: url(/assets/img/pages/Ellipse.svg);
    background-repeat: no-repeat;
    background-position: right; 
    background-size: contain;
    text-align: center;
    width:65%;
}
.block_text {
    font-size: calc(11px + 0.5vw);
    text-align:center;
    opacity:0.7;
}
.counter-up .counter-value {
    font-size: 3rem;
    color: #fff;
}
#tour .tour-title__paralax {
    height:100vh;
    transition-duration: 0s;
}
#tour .tour-title__paralax .paralax-container {
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 4px var(--stone));
}
.tour-title {
    padding-top: calc(var(--index) * 3);
}
.tour-title h1 {
    font-size: calc(1.5rem + 1.2vw);
    color: #FFF;
    font-weight: 500;
}
.tour-title .link, .tour-title .link a {
    font-size: 1rem;
    color:#dedede;
}
.tour-title .link a:hover {
    color:#ff891e;
}
.tour-title__content {
    padding-bottom:50px;
}
.tour-title__content .img-thumbnail {
    border-radius: var(--index);
    padding: calc(var(--index) / 3);
    background-color: transparent;
    border: 2px solid var(--orange);
}
.tour-title__content .wrapper_price {
    position:relative;
    color: #fff;
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.tour-title__content .wrapper_price .action {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(110%);
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    line-height: 2;
    font-weight: 600;
    opacity: .8;
}
.tour-title__content .price {
    color:#fff;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    font-size: calc(1rem + 1vw);
    position:relative;
}
.tour-title__content .price:before {
    content: "";
    position: absolute;
    bottom: 0;
    left:0;
    background-color: #ff891e;
    width: 100%;
    height: 1px;
}
.tour-title__content .price strong {
    color: #ff891e;
    font-weight: 600;
}
.tour-title__content .price .big {
    font-size: 180%;
}

.tour-title__content .price .oldPrice {
    position:relative;
    opacity: 0.5;
}
.tour-title__content .price .oldPrice:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    right: -5px;
    background-color: #fff;
    height: 1px;
    transform: rotateZ(22deg);
}
.tour-title__content .price span,
.tour-title__content .price small,
.tour-title__content .price strong {
    margin-right:5px;
    display: inline-block;
    line-height: 1;
}
.tour-title__content, .tour-title__content p {
    color:#fff;
}
.tour-title__content-row {
  
}
.tour-title__content .days {
    border: 1px solid var(--primary);
    border-radius: 50%;
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 2rem;
}
.tour-title__content .country li a {
    color: #fff;
}
.tour-title__content .icons {
    font-size: calc(0.8rem + 0.2vw);
}
.tour-title__content .icons .icon-default {
    width: auto;
    height: 100%;
    line-height: inherit;
    border: 1px solid #dedede;
    padding: 0.65rem 0.8rem;
    border-radius: 50%;
    margin-right: 0.51rem;
}
.tour-title__content button.booking {
    font-size: 1rem;
    color: white;
    background: rgb(255 137 30 / 0.45);
    text-transform: uppercase;
    padding: 1em 3em;
    font-weight: 600;
    border:1px solid var(--orange);
    border-radius: calc(var(--index) / 3);
}

.tour-title__content button.booking:hover {
    background: var(--primary);
}
.action-tour {
    position:relative;
    overflow: hidden;
}
.action-tour.ragged:before, .action-tour.ragged:after  {
    content: "";
    position: absolute;
    top: -1px;
    right: 0px;
    bottom: -1px;
    width: 20px;
    background: url(/assets/img/pages/ragged.svg) no-repeat;
    z-index: 1;
    background-size: cover;
    background-color: transparent;
}
.action-tour.ragged:after  {
    left:0px;
    transform: rotate(180deg);
}
@media (max-width: 576px){
    .action-tour.ragged:before, .action-tour.ragged:after {
        opacity:0;
    }
}
.action-tour h3 {
    font-weight: 400;
    font-size: calc(1.5rem + 0.2vw);
    text-transform: uppercase;
}
.action-tour .old-price {
   font-weight: 500;
   position:relative;
}
.action-tour .old-price:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    right: -5px;
    height: 2px;
    background-color: #e25a5a;
    transform: rotate(22deg);
}
.action-tour .new-price {
    font-size: 130%;
    color: #ff891e;
    font-weight: 600;
}
.action-tour .content {
    font-size: calc(1rem + 0.3vw);
    -ms-filter: drop-shadow(2px 4px 6px #222);
    filter: drop-shadow(2px 4px 6px #222);
    line-height: 1;
}
#info-tour .breadcrumb a {
    color:#fff;
}
#info-tour .tour-tabs li {
   flex: auto;
}
#info-tour .tour-tabs li a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #31758D;
    border-bottom: 1px solid rgb(255 137 30 / 40%);
    -ms-filter: drop-shadow(1px 4px 3px #f0f0f0);
    filter: drop-shadow(1px 4px 3px #f0f0f0);
}
#info-tour .tour-tabs li a:hover{
    border-color: #ff891e;
   /* color: #ff891e;*/
}
#info-tour .tour-tabs li .fa {
    font-size:1.3rem;
    /*color: #ff891e;*/
    opacity: 0.7;
    transition: all 0.3s;
    margin-right: 5px
}
#info-tour .tour-tabs li a:hover .fa{
    color: #ff891e;
    opacity: 1;
}
#info-tour .tour-tabs .nav-item:last-child {
    padding: 0px 15px;
}
.help-block {
    position:relative;
}
.help-block .bg-callback {
    background-image: url("/assets/img/pages/bg-callback.png");
    background-image: url("/assets/img/pages/bg-callback.webp");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100vw 30%;
    min-height: 300px;
}
.help-block .bg-callback img {
       width:100%;
       max-width: 260px;
}
.help-block .help-form {
    position:absolute;
    max-width:400px;
    margin: 0 auto;
    bottom:30px;
    right:70px;
    background: #FFFFFF;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    box-shadow: 0px 10px 21px rgba(62, 69, 89, 0.56);
    border-radius: 5px;
}
.sidebar-tour .sidebar-tour__title {
    color:#31758D;
    font-weight:600;
    font-size:1.1rem;
    position:relative;
}
.sidebar-tour .sidebar-tour__title:after {
   content:"";
   position:absolute;
   bottom:-5px;
   left:0;
   width:50%;
   height:1px;
   background-color:#ff891e;
}
.sidebar-tour .sidebar-tour__buttons {
   border:1px solid rgb(49 117 141 / 20%);
}
.sidebar-tour__buttons .sidebar-tour__btn {
    border-radius: calc(var(--index) / 3);
    border-color: rgb(49 117 141 / 0.5);
    color: #31758d;
}
.sidebar-tour__buttons .sidebar-tour__btn:hover {
    border-color: #ff891e;
    color: #ff891e;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.sidebar-tour__buttons .sidebar-tour__btn-booking {
    color: #ff891e;
    border: 1px solid #ff891e;
    border-radius: calc(var(--index) / 3);
}
.sidebar-tour__buttons .sidebar-tour__btn-booking:hover {
    color: #fff;
    background: #ff891e;
    border-color:solid #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.day-item {
    margin-bottom: calc(var(--index) * 1.5);
}
.day-item .day-num {
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
}
.day-item .day-title {
    font-size: 1.1rem;
    font-weight: 600;
}
.day-item .day-body {
   display:none;
   border-bottom: 1px solid #dedede;
}
.day-item .day-head {
    position:relative;
    cursor: pointer;
    border-bottom: 1px solid #dedede;
    color: #31758D;
    transition: all 0.3s;
    margin-top: var(--index);
}
.day-item .day-head:hover {
    color: #ff891e;
}
.day-item .day-head:before, .day-item .day-head:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 20px;
    height: 1px;
    background-color: #31758D;
    transition: all 0.5s;
}

.day-item .day-head:hover:before, .day-item .day-head:hover:after {
    background-color: #ff891e;
}
.day-item .day-head:after {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

.day-item .day-head.active:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.room-item {
    color:#3E4559;
    border-bottom: 1px solid #dedede;
}
.room-item .room-head {
    position:relative;
    padding: 1rem 1rem;
    background: linear-gradient(89.98deg, rgba(54, 173, 224, 0.1) 0.01%, rgba(255, 107, 0, 0.1) 99.98%);
    cursor: pointer;
   border-left: 10px solid rgb(255 137 30 / .1);
}
.room-item .room-head:before, .room-item .room-head:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 30px;
    height: 1px;
    background-color: #3E4559;
    transition: all 0.5s;
}
.room-item .room-head:after {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.room-item .room-head.active:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.room-item .room-head.active:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.room-item .room-head .room-title {
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0 30px 0 0;
}
.room-item .room-body {    
    padding: 0 0 15px 15px;
    display:none;
}
.room-item .room-body .room-price {
    display: inline;
    font-weight: 600;
    color: #ff891e;
    font-size: 1rem;
}
.room-item .room-body .room-map iframe{
    width:100%;
    height:400px;
}
.add-item {
    color:#3e4559;
    border: 1px solid #f8f9fa;
    border-radius: 0.5rem;
}

.add-item .add-title {
    font-size: 1.15rem;
    font-weight: 600;
}
.add-item .add-head {
    position:relative;
    padding: 1.3rem 1.7rem 1.5rem 1.7rem;
    background: linear-gradient(180deg, rgba(54, 173, 224, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0.5rem;
}
.add-item .add-head.include {
   background: linear-gradient(180deg, rgba(127, 206, 144, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
.add-item .add-head.exclude {
   background: linear-gradient(180deg, rgba(254, 127, 127, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
.add-item .add-body * {
    font-size:0.875rem;
    list-style: none;
    padding: 0;
    margin: 0;
    color:#3E4559;
}
.add-item .add-body ul {
  margin-left:1rem;
}
.add-item .add-body ul li, 
.add-item .add-body ol li,
.add-item .add-body p { 
    margin-left:1rem;
    margin-bottom: 0.8rem;
    position:relative;
}
.add-item .add-body ul li:before,
.add-item .add-body ol li:before,
.add-item .add-body p:before {
    content: "";
    position: absolute;
    left: -17px;
    top: 8px;
    width: 6px;
    height: 6px;
    background:  rgba(54, 173, 224, 0.6);
    transform: rotate(45deg);
}
.add-item .add-body.include ul li:before, 
.add-item .add-body.include ol li:before, 
.add-item .add-body.include p:before {background: rgba(127, 206, 144, 0.6);
}
.add-item .add-body.exclude ul li:before, 
.add-item .add-body.exclude ol li:before,
.add-item .add-body.exclude p:before {background: rgba(254, 127, 127, 0.6);
}
@media (max-width: 992px) {
    .counter-up .counter-value {
        font-size: 2rem;
    }
    .help-block .help-form {
        position:relative;
        bottom:30px;
        right:0;
    }
}

@media (max-width: 768px) {
     .counter-up .counter-value {
        font-size: 1.5rem;
    }
    .help-block .bg-callback img {
       max-width: 200px;
    }
}

@media (max-width: 364px) {
    .description, .description a {
        font-size: 0.8rem;
    }
}
@media (max-width: 350px) {
    .description, .description a, .description .datesmall{
        font-size: 0.6rem;
    }
    
    .destination-section .map {
        height:300px;
   } 
}
/*-----promo MEN---------------------------*/
.promo i {
font-weight: 400;
margin-right:0.31rem;
}
.promo .promo-wrapper__top {
    background-color:#3380C2;
    position:relative;
    z-index:1;
}
.promo .promo-wrapper__top:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background-image:url("/assets/img/pages/cloudTop.png");
    background-image:url("/assets/img/pages/cloudTop.webp");
    background-repeat: no-repeat;
    background-size: contain;
}
.promo .promo-bg {
    position:relative;
    display: flex;
    justify-content: center;
}
 .promo img.promo-bg__men, .promo img.promo-bg__sitename {
    width: 100%;
    height:auto;
    max-width: 800px;
 }
.promo img.promo-bg__men {
    display:none;
    position: absolute;
    top: -50px;
    -ms-filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.35));;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.35));;
}
.promo img.promo-bg__sitename {
    position:relative;
}
@media (min-width:280px){
   .promo .promo-bg__sitename {
        padding:0 44px;
    } 
     .promo img.promo-bg__men {
         display:block;
     }
}
@media (min-width:320px){
   .promo .promo-bg__sitename {
       padding:0 38px;
    } 
}
@media (min-width:400px){
   .promo .promo-bg__sitename {
       padding:0 33px;
    } 
}
@media (min-width:500px){
   .promo .promo-bg__sitename {
       padding:0 25px;
    } 
}
 @media (min-width:576px){
   .promo .promo-bg__sitename {
       padding:0 24px;
    } 
}
@media (min-width:768px){
   .promo .promo-bg__sitename {
      padding:0 7px;
    } 
}
@media (min-width:992px){
   .promo .promo-bg__sitename {
      padding:0;
    } 
}

.promo .promo-wrapper__bottom{
    background: linear-gradient(180deg, #FF891E 0%, #F46B45 99.97%);
    position:relative;
    z-index:0;
    box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.25), inset 0px -10px 20px rgba(0, 0, 0, 0.25);
}
.promo .promo-wrapper__bottom:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background-image: url("/assets/img/pages/offer-bg-f.png");
    background-image: url("/assets/img/pages/offer-bg-f.webp");
    background-repeat:no-repeat;
    background-size:cover;
    opacity:.1;
}
.promo-content__place, .promo-content__title, .promo-content__infotext {
    color:#fff;
    line-height: 1.2;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.promo-content__place {
    font-size: clamp(14px, 2vw, 18px);
}
.promo-content__title {
    font-size: clamp(16px, 3vw, 30px);
    font-weight:500;
    text-transform:uppercase;
  
}
.promo-content__title strong{
    font-size: 120%;
}
.promo-content__button {
    font-size: clamp(16px, 2vw, 20px);
    width:100%;
    color:#ff891e;
    background-color:#fff;
    line-height: 2rem;
    font-weight: 500;
    text-transform: capitalize;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.35);
    margin-bottom: 2rem;
    margin-top: 1rem;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.6rem 1.8125rem;
    border-radius: 0.25rem;
    transition: all 0.3s;
}
.promo-content__button:hover {
    color: #ff891e;
    background-color: #f8f9fa;
    box-shadow: none;
    
}
/*---------promo calendar----------------*/
.promo-calendar {
     position:relative;
}
.promo-calendar:before, .promo-calendar:after {
    content:"";
    position:absolute;
    height:3%;
    width:100%;
    z-index:1;
    opacity: 0.5;
}
.promo-calendar:before {
    top:0;
    background-image: linear-gradient(to top,rgba(0,0,0,0),#262a2e);
}
.promo-calendar:after {
    bottom:0;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0),#262a2e);
   
}
.promo-calendar__bg:before {
    content: '';
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,rgba(0,0,0,0),#ff891e);
}
.promo-calendar h2,.promo-calendar .h2 {
    color: #fff;
    font-size: calc(var(--index) * 2.5);
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 8px 12px #7c4410;
    transition: all 0.3s;
}
.promo-calendar p,
.promo-calendar .btn {
     filter: drop-shadow(0px 3px 2px #7c4410);
 }
.promo-calendar p {
    color: #fff;
    font-size: calc(14px + .5vw);
}
.promo-calendar .btn {
    width:80%;
}
.promo-calendar .btn:hover {
    box-shadow: 0 0 10px #7c4410;
}
/* ------- calendar page-----------------*/
.button:active {
    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
} 
.filters, .ui-group .button-group {
    display: flex;
}
.calendar .button {
    height: auto;
    padding: 0 0.3rem;
    text-transform: none;
    width:100%;
    white-space: nowrap;
    box-shadow: 0 1px 2px #eee;
}
.calendar .button:before, 
.calendar .button.is-checked:before {
  content:none
}
.ui-group {
    width: 100%
}
.ui-group p {
    margin:0;
    font-weight: 500;
}
.calendar_row {
    padding-top: 2rem;
    padding-bottom: 2.2rem;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    transition: none;
    position:relative;
    cursor: default;
} 
.calendar .button, .calendar_row, .calendar_row p, .calendar_row a, .calendar_row__title a {
    color: var(--gray-dark);
}
.calendar_row:before,.calendar_row:after  {
    content:"";
    position:absolute;
    bottom:-2px;
    width:0;
    height:3px;
    background-color: #ff891e;
    transition: width .3s;
}
.calendar_row:before  {
    left:50%;
}
.calendar_row:after  {
    right:50%;
}
.calendar_row:hover:before, .calendar_row:hover:after {
   width:50%;
}
.calendar_row__title {
}
.calendar_row__title h4 {
   font-weight: 500;
   font-size: 1.25125rem;
}
.calendar_row:hover .calendar_row__title a, 
.calendar_row:hover .calendar_row__new-price {
   color:#ff891e;
} 
.calendar_row__date {
    transition: all 0.3s;
    text-align: center;
    margin-top: .25rem;
}
.calendar_row__date h3{
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1.1rem;
}
.calendar_row__date .dayweek{
    margin-bottom: 0;
    font-size: 80%;
    font-weight: 400;
    line-height: 1.5;
}
.calendar_row__date .badge{
    width:100%;
    font-weight: 500;
    line-height: 0.7;
    padding: 0.35rem;
    opacity: .65;
}
.calendar_row__date .label{
    font-size: 80%;
    line-height: 1;
    padding: 0.5rem;
    display: inline-block;
    color: var(--orange);
    font-weight: 500;
}
.calendar_row:hover .calendar_row__date {
    /* transform: translateX(15%); */
}
.calendar_row:hover .calendar_row__date .badge {
   opacity: 1;
}
.calendar_row__days {
    
}
.calendar_row__days p {
    display: flex;
    justify-content: space-between;
    position:relative;
    margin-bottom: 0.15rem;
}
.calendar_row__days p:first-child {
    margin:0;
}
.calendar_row__days p strong {
    display: flex;
    justify-content:center;
    align-items: center;
    line-height: 1;
    color: #697582;
    font-weight: 600;
    background-color: var(--light);
    width: 30px;
    height: 30px;
    border: 1px solid var(--off-white);
    border-radius: 50%;
    transition: border-color .3s
    
}
.calendar_row:hover .calendar_row__days p strong {
    border-color:#ff891e;
}
.calendar_row__days p span {
    font-weight: 500;
    position:relative;
    transition: all .3s;
}
.calendar_row__days p span:after {
    position: absolute;
    content: attr(data-dayweekend);
    bottom: 0;
    left: 0;
    font-size: 70%;
    font-weight: 100;
    transform: translateY(50%);
}
 .calendar_row__price {
    text-align: right;
}
.calendar_row__price-currency {
    font-size: 120%;
}
.calendar_row__new-price {
    font-weight: 600;
    font-size: 140%;
    margin: 0;
    /* display:block; */
    transition: all .3s;
    line-height: 1;
}
.calendar_row__old-price {
   position:relative;
   color:#6c757d;
}
.calendar_row__old-price:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 50%;
    background-color: #222;
    transform: translateX(-50%);
    transition: all 0.3s;
}
.calendar_row:hover .calendar_row__old-price:after {
    width: 200%;
    background-color: #ff891e;
    transform: translateX(-50%) rotate(26deg); 
}
.calendar_row__btn {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 1px solid var(--off-white);
    margin-top: 1rem;
    padding: 0.35rem;
    color: var(--gray-color);
    border-radius: 5px;
}
.calendar_row__btn:hover {
    border-color:var(--primary);
    color:var(--primary);
}
.calendar_wrapper {
    position: relative;
    min-height: 50vh;
}
.calendar_wrapper:after {
    top: 60px;
    left: 0;
    width: 100%;
    position: absolute;
    z-index: -1;
    content:attr(data-text);
    font-size:1.3rem;
    text-align: center;
}
.calendar_wrapper .grid{
    background-color: white;
}
/*--------------------Click to Action-----------------------------------------------*/
.fancy_icon {
    background-image:url(/assets/img/icons/fancy_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
}
.plus_icon {
    background-image:url(/assets/img/icons/plus_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
}
.phone_icon {
    background-image:url(/assets/img/icons/phone_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-color:var(--primary);
}
.viber_icon {
    background-image:url(/assets/img/icons/viber_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-color:#665CA7;
}
.max_icon {
    background-image:url(/assets/img/icons/max_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-color:#9933DD;
}
.whatsapp_icon {
    background-image:url(/assets/img/icons/whatsapp_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-color:#2FBC1E;
}
 .telegram_icon {
    background-image:url(/assets/img/icons/telegram_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-color:#37AEE2;
}
.email_icon {
    background-image:url(/assets/img/icons/email_icon.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-color:#138996;
}
.clickToAction {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1030;
    display:none;
}
.clickToAction__group {
     display:inline-flex;
     justify-content: flex-start;
}
.clickToAction-button__group {
    display:inline-flex;
    justify-content: flex-start;
    padding: 0.25rem;
    opacity:1; 
    transition: all 0.3s;
    position: absolute;
    overflow: hidden;
    /* max-width: 500px; */
    transition: width .5s;
}
.clickToAction-button__group.show {
   position: relative;
}
.clickToAction-button__group a{
    width: calc(var(--index) * 4);
    text-align: center;
    margin-right: 0.25rem;
    color:#fff;
    border-radius: 0.25rem;
    opacity: 0;
    visibility:hidden;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.clickToAction-button__group a:last-child {
    margin-right: 0;
}
.clickToAction-button__group a:nth-child(1) {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
.clickToAction-button__group a:nth-child(2) {
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
    transform: translateX(-200%);
}
 .clickToAction-button__group a:nth-child(3) {
   -webkit-transform: translateX(-300%);
   -moz-transform: translateX(-300%);
   -ms-transform: translateX(-300%);
   -o-transform: translateX(-300%);
   transform: translateX(-300%);
}
.clickToAction-button__group a:nth-child(4) {
    -webkit-transform: translateX(-400%);
    -moz-transform: translateX(-400%);
    -ms-transform: translateX(-400%);
    -o-transform: translateX(-400%);
    transform: translateX(-400%);
}
.clickToAction-button__group a:nth-child(5) {
    -webkit-transform: translateX(-500%);
    -moz-transform: translateX(-500%);
    -ms-transform: translateX(-500%);
    -o-transform: translateX(-500%);
    transform: translateX(-500%);
} 
.clickToAction-button__group a:nth-child(6) {
    -webkit-transform: translateX(-600%);
    -moz-transform: translateX(-600%);
    -ms-transform: translateX(-600%);
    -o-transform: translateX(-600%);
    transform: translateX(-600%);
} 
.clickToAction-button__group.show a {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);   
    opacity:0.7;
    visibility:visible;
}
.clickToAction-button__group a:hover{
    opacity:1;
}
.clickToAction__group .close {
    font-weight: 500;
    font-size: 3rem;
    opacity:0.8;
    color:#fff;
    text-shadow:none;
    background:linear-gradient(#ff891e 0%, #F46B45 100%);
    min-width: 48px;
    height: 48px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 19px 38px 0 rgb(34 36 43 / 30%);
    position:relative;
}
@media(min-width: 768px) {
    .clickToAction__group .close {
        min-width: 52px;
        height: 52px;
    }
}
 @media(min-width: 992px) {
    .clickToAction__group .close {
        min-width: 55px;
        height: 55px;
    }
}
.clickToAction__group.closed .close:before,
.clickToAction__group.closed .close:after {
    border: 2px solid rgb(255 137 30 / 50%);
    content: " ";
    display: block;
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    border-radius: 10px;
    animation: pulseB 2s linear infinite;
    opacity: 0;
    backface-visibility: hidden;
    
}
.clickToAction__group.closed .close:after {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    animation-delay: .5s;
}
.clickToAction__group .close span{
    display: block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    height: 100%;
    -webkit-transition:  all .5s;
    -moz-transition:  all .5s;
    -ms-transition:  all .5s;
    -o-transition:  all .5s;
    transition:  all .5s;
    opacity: 1;
   
}
.clickToAction__group.closed .close span{
    opacity:0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
@keyframes pulseB {
    0% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0
    }
}
.clickToAction .carousel {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    -webkit-transition:  all .5s;
    -moz-transition:  all .5s;
    -ms-transition:  all .5s;
    -o-transition:  all .5s;
    transition:  all .5s;
}
.clickToAction__group.closed .carousel{
    opacity:1;
}
.clickToAction .carousel, 
.clickToAction .carousel-inner, 
.clickToAction .carousel-item {
    height:100%;
}
.clickToAction .carousel-item {
    background-color:transparent;
}
.clickToAction .carousel-item {
    opacity: 0;
    display:block;
    z-index: 0;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    transition: transform .5s ease, opacity .5s ease-out;
}
.clickToAction .carousel-item.active {
    opacity: 1;
    z-index: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/*-------------------------AVIA--------------------*/
a.underline {
    position:relative;
}
a.underline:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 30px;
    background-color: #ff891e;
    transition: all 0.3s;
}
a.underline:hover:before {
    width:100%;
}
#pdopage .btn-more {
    width:auto;
}
section {
    position:relative;
}
.main-title {
    height: 90vh;
    position: relative;
    overflow: hidden;
}
.main-title .breadcrumb {
    position: absolute;
    right: 0;
    top:5rem;
    z-index:1;
}
.main-title .breadcrumb-item + .breadcrumb-item::before {
    color: #f5f5f5;
}
.main-title .breadcrumb li a {
    color: #f5f5f5;
    font-size: 1rem;
    font-weight: 500;
}
.main-title .breadcrumb li a:hover {
   color:#ff891e;
}
.main-title__image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:100%;
    -webkit-transition: transform 30s .5s ease-out;
    -moz-transition: transform 30s .5s ease-out;
    -ms-transition: transform 30s .5s ease-out;
    -o-transition: transform 30s .5s ease-out;
    transition: transform 30s .5s ease-out;
}
.main-title__image.scale {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
.main-title__image:before {
    content:"";
    position:absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.main-title .main-title__content {
    position: absolute;
    transform: translateY(-50%);
    top: 45%;
    max-width:70%;
    -ms-filter: drop-shadow(0px 5px 5px #2e475e);
    filter: drop-shadow(0px 5px 5px #2e475e);
}
.main-title .main-title__content.gull:after {
   content: "";
    position: absolute;
    right: -100px;
    top: -100px;
    width: 125px;
    height: 125px;
    background-image: url(/assets/img/pages/gull.png);
    background-image: url(/assets/img/pages/gull.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
    animation: imgScale 40s 1s ease-out forwards;
    transition: all 1s;
    opacity:0.7;
}
@keyframes imgScale {
    0% {
         transform: scale(1);
    }
    100%{
        transform: scale(3);
    }
}
.main-title .main-title__content:hover.gull:after {
    top: 0px;
    right: -50px;
    opacity:1;
}
.main-title .main-title__content h1 {
    font-size: calc(2rem + 2vw);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}
.main-title .main-title__content p {
  font-size: calc(0.875rem + 1vw);
  color: #fff;
  line-height:1.25;
}
.main-title .main-title__content .btn
 {
    color: #fff;
    background-color: rgb(34 34 34 / 20%);
    font-size: calc(14px + 0.5vw);
    font-weight: 500;
    border: 2px solid #ff891e;
}
.main-title .main-title__content .btn:hover
{
    color: #fff;
    box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.5);
    background-color: #ff891e;
}
.main-title .main-title__links-wrapper {
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
    display:flex;
    flex-direction: column;
}
.main-title__links-wrapper p {
    color:#fff;
    font-size: 1rem;
    opacity:0.8;
    margin:0;
}
.main-title ul.main-title__links{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
 .main-title ul.main-title__links li{
    margin-right:1rem;
    position:relative;
}
 .main-title ul.main-title__links li a, a.main-title__link{
    color:#fff;
    position: relative;
    font-size: 1.3rem;
    align-self: start;
}
 .main-title ul.main-title__links li a:hover, a.main-title__link:hover{
     color:#dee2e6;
}
 .main-title ul.main-title__links li:before, a.main-title__link:before{
   content:"";
   position:absolute;
   left:0;
   bottom:0;
   height:1px;
   width:30px;
   background-color:#ff891e;
   transition:all 0.3s;
}
.main-title ul.main-title__links li:hover:before, a.main-title__link:hover:before{
   width:100%;
}
.hotels {
    overflow: hidden;
 }
.hotels .leaf, .hotels .starfish {
    position:relative;
    
}
.hotels .leaf:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    background-image:url('/assets/img/pages/leaf.png');
    background-image:url('/assets/img/pages/leaf.webp');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:top left;
    height: calc(115px + 5vw);
    width: calc(200px + 5vw);
    transform: scale(-1 ,1);
}
.hotels .starfish:before{
    content: "";
    position: absolute;
    background-image: url(/assets/img/pages/starfish.png);
    background-image: url(/assets/img/pages/starfish.webp);
    right: 0;
    bottom: 0;
    width: 10vw;
    height: 10vh;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(70%);
}
.hotels .hotels-hotel {
    box-shadow: 0px 0.4rem 0.7rem rgb(255 137 30 / 50%);
    transition: all 0.3s;
}
.hotels .hotels-hotel:hover {
    box-shadow: 0px 0.4rem 0.7rem rgb(0 0 0 / 20%); 
}
.hotel .breadcrumb-item a {
    color:#fff;
}
.hotel .breadcrumb-item a:hover {
    color:#ff891e;
}
.hotel-sticky-wrap {
    position: sticky;
    top: 0;
    box-shadow: 0px 0px 20px 0px #262a2e;
    z-index:1;
}
.hotel-carousel .owl-item.active {
    z-index: 2;
}
.hotel-carousel .owl-nav {
    position: absolute;
    bottom: 40px;
    right: 20px;
}
.hotel-carousel .owl-nav {
    font-size: 4.25rem;
    color: #fff;
}
.hotel-carousel .owl-nav .owl-prev, .hotel-carousel .owl-nav .owl-next {
    width:80px;
}
.hotel-carousel .owl-nav button:focus {
    outline: none
}
.hotel-carousel__item {
    position:relative;
    height:100vh;
}
.hotel-carousel__item:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.55));
    z-index: 1;
}
.hotel-carousel__img {
    width: 130%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    transform: translateX(-20%);
    animation: imgMove 20s linear infinite;
    
}
@keyframes imgMove {
    0%, 100% {
        transform: translateX(-20%);
    }
    50% {
        transform: translateX(0%);
    }
}
.hotel-carousel__content {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 0 2.5rem;
    bottom: 150px;
}
.hotel-carousel__content .hotel-title {
    color: #fff;
    line-height: 1.1;
    font-size: clamp(20px, 4vw, 30px);
}
.hotel-info p {
    font-size:1rem;
}
.hotel-content ul,.hotel-content h3{
    color: #6c757d;
}
.hotel-content li,.hotel-content p{
    line-height: 1.4rem;
}
.hotel-cost .cost {
    color:#fff;
    font-size:3rem;
    text-shadow: 0px 3px 10px #262a2e;
}
.hotel-cost a.btn {
    background-color: white;
    color: #ff891e;
    font-weight: 600;
    box-shadow: 0 1rem 1rem rgb(0 0 0 / 18%);
}
.hotel-cost a.btn:hover {
    background-color: #dedede;
    box-shadow: none;
}
.hotel-rating {
    display: block;
    height: 20px;
    background-image: url(/assets/img/icons/star.png);
    background-repeat: repeat-x;
    background-position: left center;
    max-width: 100px;
}
.hotel-include .hotel-include-content {
    font-size: calc(14px + 0.4vw);
    -ms-filter: drop-shadow(2px 3px 4px #262a2e);
    filter: drop-shadow(2px 3px 4px #262a2e);
}
.hotel-include .hotel-include-content li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(255 255 255 / 30%);
    cursor: default;
    position:relative;
    
}
.hotel-include .hotel-include-content li:before {
   content:"";
   position:absolute;
   left:0;
   bottom:-1px;
   height:1px;
   background-color: #ff891e;
   width:0;
   transition: all 0.3s;
}
.hotel-include .hotel-include-content li:hover:before {
   width:100%;
}
.hotel-include .hotel-include-content li i {
    margin: 0 1rem;
    font-size: calc(25px + 0.25vw);
    opacity:.5;
    transition: all 0.3s;
}
.hotel-include .hotel-include-content li:hover i {
    color:#ff891e;
    opacity:.9;
}
.hotel-howbuy .bg-img {
    background-attachment: scroll;
} 
@media(min-width:992px) {
    .hotel-howbuy .bg-img {
        background-attachment: fixed;
    }   
}
.hotel-howbuy .hotel-howbuy-block {
    display: flex;
    align-items: flex-end;
    font-size: calc(14px + 0.5vw);
    border:1px solid #6c757d;
    border-radius: 50px 50px 50px 0;
    padding: 5rem 2rem 3rem 2rem;
    margin: 1rem auto;
    text-align:center;
    color:#fff;
    position:relative;
    -ms-filter: drop-shadow(2px 3px 4px #262a2e);
    filter: drop-shadow(2px 3px 4px #262a2e);
    max-width:300px;
    cursor: default;
    background: rgb(96 125 139 / 56%);
    text-shadow: 0px 2px 5px rgb(0 0 0 / 50%);
}
.hotel-howbuy .hotel-howbuy-block p{
    color:#dedede;
    margin-top: 2rem;
    font-size: calc(14px + 0.2vw);
}
 .hotel-howbuy .hotel-howbuy-block i{
    font-size:4rem;
    position:absolute;
    padding:0 3rem;
    top:0;
    right:0;
    opacity: 0.6;
    transition: all 0.3s;
}
.hotel-howbuy .hotel-howbuy-block:hover i{
    color:#ff891e;
    opacity:.9;
}

.hotel-howbuy .hotel-howbuy-block span{
    font-size: 2rem;
    position: absolute;
    padding: 0 1rem;
    bottom: 0px;
    left: 0;
    opacity: 0.4;
    transition: all 0.3s;
}
.hotel-howbuy .hotel-howbuy-block:hover span{
    opacity: 1;
}

.hotel-howbuy .btn{
    background-color: rgb(0 0 0 / 10%);
}
.hotel-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    filter: drop-shadow(0px 4px 3px rgba(252, 97, 13, 0.2));
    -webkit-filter: drop-shadow(0px 4px 3px rgba(252, 97, 13, 0.2));
}
.hotel-partners .hotel-partners__item {
    margin: 10px;
    width: 125px;
}
.hotel-partners .hotel-partners__item img {
    width: 100%;
}

.hotel-choose .hotel-choose__item{
    padding: 25px 20px;
    text-align: center;
    font-size: 1.2em;
    color: #9fabb7;
    margin: 1rem auto;
    width: 100%;
}
.hotel-choose .hotel-choose__item i{
    font-size: 4rem;
    display: block;
    background: linear-gradient(90deg, #DC2424 0%, #ff891e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -ms-filter: drop-shadow(2px 2px 2px #ccc);
    filter: drop-shadow(2px 2px 2px #ccc);
}
 .hotel-choose .hotel-choose__item p{
    font-size: calc(1.2rem + 0.25vw);
    margin:0;
    font-weight: 500;
}
.site-name__wrap {
    position: sticky;
    top: 95px;
}
.site-name__wrap .site-name{
   font-size: 4rem;
    color: #fff;
    font-weight: 900;
    transform: rotate(270deg) translate(-100%,-15%);
    white-space: nowrap;
    position: absolute;
    transform-origin: left;
    left: 50%;
    opacity:.6;
}
.helper {
      position: relative;
}
.helper img{
    width:100%;
    -ms-filter: drop-shadow(0px -5px 5px #969696);
    filter: drop-shadow(0px -5px 5px #969696);
}
.helper .palm{
    position:relative;
 }
.helper .palm:before{
    content: "";
    position: absolute;
    background-image: url(/assets/img/pages/palm.png);
    background-image: url(/assets/img/pages/palm.webp);
    left: 0;
    bottom: 35%;
    width: 50%;
    height: 50%;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}
.helper  .helper-title {
     position: relative;
     overflow: hidden;
}
.helper  .helper-title i{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 5rem;
    line-height: 0;
    color: #ff891e;
    text-shadow: 0 1px 3px rgb(0 0 0 / 40%);
    animation: imgMove 1.5s linear infinite;
}
.helper .helper-bg {
    background-image: url(/assets/img/pages/bg-helper.png);
    background-image: url(/assets/img/pages/bg-helper.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100vw 30%;
    min-height: 300px;
}
.helper .helper-form {
    position: absolute;
    max-width: 400px;
    margin: 0 auto;
    bottom: 30px;
    right: 0px;
    background: #fafafa;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    box-shadow: 0px 10px 21px rgb(62 69 89 / 56%);
    border-radius: 5px;
}
@media (max-width:992px) {
    .helper .helper-form {
        position: relative;
        bottom: 30px;
        right: 0;
    }
}
/*-------------3D icon---------------------*/
.icon__3D {
    position:relative;
    z-index:500;
}
.icon__3D .perspective_wraper {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: center;
    -moz-perspective-origin: center;
    -ms-perspective-origin: center;
    perspective-origin: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
}
.icon__3D .perspective_container {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation:rotate-logo 20s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    width: 40px;
    height:40px;
    font-size: 44px;
    font-family: 'Rubik Mono One', sans-serif;
    font-weight: 400;
}
.icon__3D .perspective_container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.icon__3D .perspective_container:hover .front {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
}
.icon__3D .perspective_container:hover .right {
    -webkit-transform: translateX(102%);
    -moz-transform: translateX(102%);
    -ms-transform: translateX(102%);
    -o-transform: translateX(102%);
    transform: translateX(102%);
}
.icon__3D .perspective_container:hover .back {
    -webkit-transform: translateX(204%) !important;
    -moz-transform: translateX(204%) !important;
    -ms-transform: translateX(204%) !important;
    -o-transform: translateX(204%) !important;
    transform: translateX(204%) !important;
}
.icon__3D .perspective_container:hover .left {
    -webkit-transform: translateX(306%);
    -moz-transform: translateX(306%);
    -ms-transform: translateX(306%);
    -o-transform: translateX(306%);
    transform: translateX(306%);
}
.icon__3D .perspective_container:hover .top {
    -webkit-transform: translateX(408%);
    -moz-transform: translateX(408%);
    -ms-transform: translateX(408%);
    -o-transform: translateX(408%);
    transform: translateX(408%);
}
.icon__3D .perspective_container:hover .bottom {
    -webkit-transform: translateX(510%);
    -moz-transform: translateX(510%);
    -ms-transform: translateX(510%);
    -o-transform: translateX(510%);
    transform: translateX(510%);
}
.icon__3D .side-logo__icon {
    position: absolute;
    display:block;
    width: inherit;
    height: inherit;
    opacity: .8;
    background: linear-gradient(0deg, #F46B45 0%, #ff891e 100%);
    overflow:hidden;
    /* border: 1px solid #F46B45 ; */
    /* border-radius: 2.5px; */
    z-index: 1;
    box-shadow: 0 0 10px #ff891e;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.icon__3D .side-logo__icon.action-hot {
    background: linear-gradient(0deg, #e25a5a 0%, #ff891e 100%);
    box-shadow: 0 0 20px #e25a5a;   
}
.icon__3D .side-logo__icon.action-early {
    background: linear-gradient(0deg, #60a662 0%, #ff891e 100%);
    box-shadow: 0 0 20px #60a662;
}
.icon__3D .side-logo__icon:before {
    content:attr(data-letter);
    color: #fff;
    text-align: center;
    -webkit-transform: rotate(-10deg) translate(20%,20%);
    -moz-transform: rotate(-10deg) translate(20%,20%);
    -ms-transform: rotate(-10deg) translate(20%,20%);
    -o-transform: rotate(-10deg) translate(20%,20%);
    transform: rotate(-10deg) translate(20%,20%);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    line-height: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.icon__3D .side-logo__icon.bottom.travel:before {
    content:'travel';
    font-size: 18%;
    transform: rotate(0deg);
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
}
.icon__3D .side-logo__icon:hover {
    opacity:1;
}
.icon__3D .side-logo__icon:hover:before {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
} 
.icon__3D .side-logo__icon.back {
    -webkit-transform: translateZ(-20px) rotateY(180deg);
    -moz-transform: translateZ(-20px) rotateY(180deg);
    -ms-transform: translateZ(-20px) rotateY(180deg);
    -o-transform: translateZ(-20px) rotateY(180deg);
    transform: translateZ(-20px) rotateY(180deg);
    transition-delay: .1s;
}
.icon__3D .side-logo__icon.left {
    -webkit-transform:  translateX(-50%) rotateY(-90deg);
    -moz-transform:  translateX(-50%) rotateY(-90deg);
    -ms-transform:  translateX(-50%) rotateY(-90deg);
    -o-transform:  translateX(-50%) rotateY(-90deg);
    transform:  translateX(-50%) rotateY(-90deg);
    transition-delay: .15s;
}
.icon__3D .side-logo__icon.right {
    -webkit-transform: translateX(50%) rotateY(90deg);
    -moz-transform: translateX(50%) rotateY(90deg);
    -ms-transform: translateX(50%) rotateY(90deg);
    -o-transform: translateX(50%) rotateY(90deg);
    transform: translateX(50%) rotateY(90deg);
    transition-delay: .2s;
}
.icon__3D .side-logo__icon.top {
    -webkit-transform: translateY(-50%) rotateX(90deg);
    -moz-transform: translateY(-50%) rotateX(90deg);
    -ms-transform: translateY(-50%) rotateX(90deg);
    -o-transform: translateY(-50%) rotateX(90deg);
    transform: translateY(-50%) rotateX(90deg);
    transition-delay: .25s;
}
.icon__3D .side-logo__icon.bottom {
    -webkit-transform: translateY(50%) rotateX(-90deg);
    -moz-transform: translateY(50%) rotateX(-90deg);
    -ms-transform: translateY(50%) rotateX(-90deg);
    -o-transform: translateY(50%) rotateX(-90deg);
    transform: translateY(50%) rotateX(-90deg);
    transition-delay: .3s;
}
.icon__3D .side-logo__icon.front {
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
    -o-transform: translateZ(20px);
    transform: translateZ(20px);
    /* position:relative; */
}
@keyframes rotate-logo {
    100% {
        -webkit-transform: rotateY(-360deg) rotateZ(360deg);
        -moz-transform: rotateY(-360deg) rotateZ(360deg);
        -ms-transform: rotateY(-360deg) rotateZ(360deg);
        -o-transform: rotateY(-360deg) rotateZ(360deg);
        transform: rotateY(-360deg) rotateZ(360deg);
    }
}