/*
Theme Name: Stardust Tours
Text Domain: stardusttours
Version: 1.0
Description: tardusttours Theme
Tags: stardusttours
Author: Sherman Ward
Author URI:https://www.webateljee.co.za/
*/

body {
    /*background: radial-gradient(circle at bottom, lightgrey 15%, blue 65%, black 85%);
    background: radial-gradient(circle at bottom, lightgrey 15%, blue 65%, transparent);*/
    background: radial-gradient(circle at bottom, lightgrey 15%, blue 65%, black 85%);
    height: 100%;
    overflow: auto;
    z-index: 1;
}

.copyright4{
    font-size: 85%;
    margin: -10px 0px 0px 0px;
}

.row > * {
  flex-shrink: 0%;
}

.logo {
    float:left;
    margin:-30px 5px 0px -0px;
    width:105px;
    height:100px;
}

#navbar {
  position: fixed;
  top: 10px;
  right: 5%;
  max-width: 1420px;
  display: block;
  transition: top 0.3s;
  z-index: 10;
}
navlogo{
    max-width: 100%;
}
.navpos{
    font-size: 1.2vw;
    position: absolute;
    left: 50%;
    top: -15%;
    max-width: 100%;
}

/*CellPhone*/
.b-pos{
    margin: 15px 0px 0px 50px;
}
.hamburger-icon {
    display: block;
    cursor: pointer;
    font-size: 3.0vh;
    zindex: 99999;
}
/* Style the dropdown menu */
.mobile-menu {
    display: none; /* Hide by default */
}
.mobile-menu.active {
    display: block; /* Show when active */
}
.main-navigation {
    display: flex;
}
#menu {
    display: block;
}
@media (max-width: 360px) {
    .mobile-menu {
        display: block; /* Hide by default */
    }
    #menu {
        display: none;
    }
    #menu.active {
        display: block;
    }
}
@media (max-width: 1080px) {
    .mobile-menu {
        display: block; /* Hide by default */
    }
    #menu {
        display: none;
    }
    #menu.active {
        display: block;
    }
}
/*cellPhone*/

.star-container {
    position: relative;
    width: 100%;
    height: 500px;
}
.star {
    position: absolute;
    background-color: silver;
    border-radius: 50%;
    opacity: 0.8;
    animation: flicker 1.5s infinite alternate;

    background: linear-gradient(-45deg, silver, rgba(0, 0, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px #699BFF);
    animation: tail 3s ease-in-out infinite,
               falling 3s ease-in-out infinite;
}

.star:nth-child(1) { width: 1px; height: 1px; top: 10%; left: 5%; }
.star:nth-child(2) { width: 1px; height: 1px; top: 15%; left: 20%; }
.star:nth-child(3) { width: 1px; height: 1px; top: 5%; left: 35%; }
.star:nth-child(4) { width: 1px; height: 1px; top: 20%; left: 50%; }
.star:nth-child(5) { width: 1px; height: 1px; top: 25%; left: 70%; }
.star:nth-child(6) { width: 1px; height: 1px; top: 30%; left: 80%; }
.star:nth-child(7) { width: 1px; height: 1px; top: 5%; left: 60%; }
.star:nth-child(8) { width: 1px; height: 1px; top: 20%; left: 12%; }
.star:nth-child(9) { width: 1px; height: 1px; top: 10%; left: 90%; }
.star:nth-child(10) { width: 1px; height: 1px; top: 29%; left: 25%; }
.star:nth-child(11) { width: 1px; height: 1px; top: 16%; left: 55%; }
.star:nth-child(12) { width: 1px; height: 1px; top: 30%; left: 45%; }
.star:nth-child(13) { width: 1px; height: 1px; top: 10%; left: 75%; }
.star:nth-child(14) { width: 1px; height: 1px; top: 20%; left: 40%; }
.star:nth-child(15) { width: 1px; height: 1px; top: 25%; left: 10%; }
.star:nth-child(16) { width: 1px; height: 1px; top: 5%; left: 30%; }
.star:nth-child(17) { width: 1px; height: 1px; top: 15%; left: 85%; }
.star:nth-child(18) { width: 1px; height: 1px; top: 27%; left: 65%; }
.star:nth-child(19) { width: 1px; height: 1px; top: 20%; left: 20%; }
.star:nth-child(20) { width: 1px; height: 1px; top: 25%; left: 75%; }
.star:nth-child(21) { width: 1px; height: 1px; top: 10%; left: 50%; }
.star:nth-child(22) { width: 1px; height: 1px; top: 21%; left: 14%; }
.star:nth-child(23) { width: 1px; height: 1px; top: 15%; left: 35%; }
.star:nth-child(24) { width: 1px; height: 1px; top: 20%; left: 80%; }
.star:nth-child(25) { width: 1px; height: 1px; top: 10%; left: 25%; }

.star:nth-child(26) { width: 2px; height: 2px; top: 10%; left: 5%; }
.star:nth-child(27) { width: 2px; height: 2px; top: 15%; left: 10%; }
.star:nth-child(28) { width: 2px; height: 2px; top: 5%; left: 15%; }
.star:nth-child(29) { width: 2px; height: 2px; top: 20%; left: 30%; }
.star:nth-child(30) { width: 2px; height: 2px; top: 25%; left: 35%; }
.star:nth-child(31) { width: 2px; height: 2px; top: 30%; left: 40%; }
.star:nth-child(32) { width: 2px; height: 2px; top: 5%; left: 60%; }
.star:nth-child(33) { width: 2px; height: 2px; top: 23%; left: 5%; }
.star:nth-child(34) { width: 2px; height: 2px; top: 10%; left: 90%; }
.star:nth-child(35) { width: 2px; height: 2px; top: 25%; left: 5%; }
.star:nth-child(36) { width: 2px; height: 2px; top: 23%; left: 11%; }
.star:nth-child(37) { width: 2px; height: 2px; top: 30%; left: 20%; }
.star:nth-child(38) { width: 2px; height: 2px; top: 10%; left: 75%; }
.star:nth-child(39) { width: 2px; height: 2px; top: 33%; left: 90%; }
.star:nth-child(40) { width: 2px; height: 2px; top: 25%; left: 10%; }
.star:nth-child(41) { width: 2px; height: 2px; top: 5%; left: 3%; }
.star:nth-child(42) { width: 2px; height: 2px; top: 15%; left: 9%; }
.star:nth-child(43) { width: 2px; height: 2px; top: 30%; left: 17%; }
.star:nth-child(44) { width: 2px; height: 2px; top: 15%; left: 23%; }
.star:nth-child(45) { width: 2px; height: 2px; top: 18%; left: 27%; }
.star:nth-child(46) { width: 2px; height: 2px; top: 10%; left: 20%; }
.star:nth-child(47) { width: 2px; height: 2px; top: 20%; left: 15%; }
.star:nth-child(48) { width: 2px; height: 2px; top: 29%; left: 35%; }
.star:nth-child(49) { width: 2px; height: 2px; top: 17%; left: 80%; }
.star:nth-child(50) { width: 2px; height: 2px; top: 10%; left: 25%; }

.star:nth-child(51) { width: 1px; height: 1px; top: 45%; left: 11%; }
.star:nth-child(52) { width: 1px; height: 1px; top: 47%; left: 5%; }
.star:nth-child(53) { width: 1px; height: 1px; top: 50%; left: 10%; }
.star:nth-child(54) { width: 1px; height: 1px; top: 40%; left: 13%; }
.star:nth-child(55) { width: 1px; height: 1px; top: 45%; left: 8%; }
.star:nth-child(56) { width: 1px; height: 1px; top: 37%; left: 14%; }
.star:nth-child(57) { width: 1px; height: 1px; top: 42%; left: 12%; }
.star:nth-child(58) { width: 1px; height: 1px; top: 45%; left: 2%; }
.star:nth-child(59) { width: 1px; height: 1px; top: 35%; left: 1%; }
.star:nth-child(60) { width: 1px; height: 1px; top: 30%; left: 3%; }
.star:nth-child(61) { width: 1px; height: 1px; top: 40%; left: 2%; }
.star:nth-child(62) { width: 1px; height: 1px; top: 50%; left: 1%; }
.star:nth-child(63) { width: 1px; height: 1px; top: 35%; left: 85%; }
.star:nth-child(64) { width: 1px; height: 1px; top: 30%; left: 95%; }
.star:nth-child(65) { width: 1px; height: 1px; top: 40%; left: 80%; }
.star:nth-child(66) { width: 1px; height: 1px; top: 44%; left: 85%; }
.star:nth-child(67) { width: 1px; height: 1px; top: 45%; left: 97%; }
.star:nth-child(68) { width: 1px; height: 1px; top: 37%; left: 98%; }
.star:nth-child(69) { width: 1px; height: 1px; top: 33%; left: 99%; }
.star:nth-child(70) { width: 1px; height: 1px; top: 42%; left: 98%; }
.star:nth-child(71) { width: 1px; height: 1px; top: 50%; left: 97%; }
.star:nth-child(72) { width: 1px; height: 1px; top: 48%; left: 99%; }
.star:nth-child(73) { width: 1px; height: 1px; top: 46%; left: 85%; }
.star:nth-child(74) { width: 1px; height: 1px; top: 47%; left: 95%; }
.star:nth-child(75) { width: 1px; height: 1px; top: 20%; left: 90%; }

.star:nth-child(76) { width: 1px; height: 1px; top: 15%; left: 60%; }
.star:nth-child(77) { width: 1px; height: 1px; top: 14%; left: 65%; }
.star:nth-child(78) { width: 1px; height: 1px; top: 15%; left: 45%; }
.star:nth-child(79) { width: 1px; height: 1px; top: 8%; left: 40%; }
.star:nth-child(80) { width: 1px; height: 1px; top: 10%; left: 45%; }

@keyframes flicker {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}
.star::before, .star::after {
    content: '';
    position: absolute;
    right: 0;
    height: 1px;
    width: 1px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5F91FF, rgba(0, 0, 255, 0));
    border-radius: 100%;
    transform: translateX(50%) rotateZ(90deg);
    animation: shining 3s ease-in-out infinite;
}
        
    @keyframes shining{
        0%{
            width: 7px;
        }
        50%{
            width: -7px;
        }
        100%{
            width: -7px;
        }
    }
    .star::after {
        transform: translateX(50%) rotateZ(0deg);
    }
    
.book-button{
        font-size: 170%;
        padding: 10px 25px;
    }    
    
.overflo{
        max-width: 100%;

    }
.container1 {
    max-width: 1080px;
    margin: 0 auto;
    position: absolute;
    left: 20%;
    z-index: 1;
}
.container2 {
    max-width: 1080px;
    margin: 0 auto;
    position: absolute;
    top: 450px;
    left: 25%;
    position: absolute;
    z-index: 1;
}
.container3 {
    max-width: 100%;
}

.mySlides {
    display: none;
}

.slider{
    transform: translate(25%, 20%);
}
.option1{
    margin: 16px 0px 0px -17px;
    color: silver;
    padding: 15px;
}
.carousel-text{
    margin: -0px 255px -0px -0px;
    font-size: 3.5vw;
    text-align: left;
    transform: translate(-140%, -110%);
    position: fixed;
}
.carousel-caption{
    position: absolute;
    left: 5%;
}
.option2{
    text-align: left;
    font-size: 1.5vw;
    transform: translate(-13%,0%);
    color: silver;
    padding: 0px 0px 0px 100px;
}
.option3{
    text-align: left;
    font-size: 1.5vw;
    transform: translate(-13%,0%);
    color: silver;
    padding: 0px 0px 0px 100px;
}
.about{
    text-align: left;
    font-size: 1.6vw;
    position: absolute;
    left: 55%;
    transform: translate(-85%, -100%);
    color: silver;
    z-index: 1;
}
.about2{
    text-align: left;
    font-size: 1.6vw;
    position: absolute;
    left: 55%;
    transform: translate(-65%, 30%);
    color: silver;
    z-index: 1;
}

.prev1,
.next1 {
    cursor: pointer;
    position: absolute;
    top: 170%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    -webkit-user-select: none;
}
.next1 {
    right: 10px;
    border-radius: 3px 0 0 3px;
}
.prev1:hover,
.next1:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.column {
    float: left;
    max-width: 45%;
    margin:0px 10px 0px 45px;
    overflow: hidden;
}
.demo1 {
    opacity: 0.6;
}
.active,
.demo1:hover {
    opacity: 1;
}

.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    margin-bottom: 20px;
}
.mySlides {
    display: none;
}
.prev2, .next2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
.next2 {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev2:hover, .next2:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


#map {
    height: 100vh;
    width: 100%;
}
.tours-button{
    transform: translate(-245%, 180%);
    /*color: #006cff;*/
    position: absolute;
    z-index: 20;
}
.tours-button2{
    /*color: #006cff;*/
}
a:link, a:visited {
    font-size: 170%;
    /*background-color: transparent;*/
    padding: 10px 25px;
    text-align: center;
    text-decoration: black;
    display: inline-block;
    z-index: 999;
}
a:hover, a:active {
  color: #006cff;
  text-decoration: underline;
  z-index: 999;
}
li a {
    color: silver;
}

.btn-btn {
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  margin:-15px 90px 0px 0px;
  z-index: 999;
}
.btn-btn:hover, .btn-btn:active {
  color: silver;
  text-decoration: underline;
  z-index: 999;
}
.tour1{
    transform: translate(0%, -0%);
    margin:-0px 0px 0px -0px;
}
.tour2{
    
}

.boy{
    position: absolute;
    transform: translate(0%, -30%);
    max-width: 140.0vw;
    z-index: 9;
}
/*Contacts*/
.wpforms-container1 {
    margin: 0 auto;
    overflow: hidden;
    color: silver;
}
.wpforms-container1 label.wpforms-field-label,
.wpforms-container1 legend.wpforms-field-label{
    font-family: 'MyCustomFont', sans-serif;
    color: silver;
}
/*Contacts*/

.book1 {
    transform: translate(20%, 100%);
    margin: -250px 0px 0px -0px;
    overflow: hidden;
}
.bookbtn1{
    transform: translate(1%, 90%);
    overflow: hidden;
}
.book2 {
    transform: translate(20%, 100%);
    margin: 100px 0px 0px 0px;
    overflow: hidden;
}
.bookbtn2{
    transform: translate(2%, 90%);
    overflow: hidden;
}
.about1{
    text-align: left;
    font-size: 150%;
    position: absolute;
    left: 80%;
    transform: translate(-302%, 0%);
    color: silver;
    z-index: 1;
}
.about3{
    text-align: left;
    font-size: 150%;
    position: absolute;
    left: 80%;
    transform: translate(-93%, 0%);
    color: silver;
    z-index: 1;
}
.column1 {
    display: flex; /* Enable flexbox for the column */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding: 10px; /* Optional spacing */
}


.responsive-image {
    max-width: 100%; /* Ensure it doesn’t exceed column width */
}

.responsive-image img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Optional: set a max height */
}
.responsive-image1 {
    max-width: 100%; /* Ensure it doesn’t exceed column width */
}

.responsive-image1 img {
    max-width: 100%; /* Make the image responsive */
    max-height: 100%; /* Maintain aspect ratio */
}

.tour-gallery {
    display: flex;
}
.column {
    flex: 1;
}
.tours{
    max-height: 100%;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.tour-galla1{
    position: absolute;
    right: 35%;
    left: 0%;
}
@media screen and (min-width: 360px){
    .tour-galla1 {
    top: 0%;
  }
}
@media screen and (min-width: 412px){
    .tour-galla1 {
    top: 0%;
  }
}
@media screen and (max-width: 1080px){
    .tour-galla1 {
    top: -13%;
  }
}
.tours2{
    max-height: 100%;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.tour-galla2{
    position: absolute;
    right: 0%;
    left: 49%;
}
@media screen and (min-width: 360px){
    .tour-galla2 {
    top: 0%;
  }
}
@media screen and (min-width: 412px){
    .tour-galla2 {
    top: 0%;
  }
}
@media screen and (max-width: 1080px){
    .tour-galla2 {
    top: -13%;
  }
}

.about-button{
    max-width: 80%;
    transform: translate(150%, 150%);
    /*color: #006cff;*/
}
.tours-view-button{
    transform: translate(-20%, 0%);
    z-index:123;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    float: right;
}
p.large {
    font-size: 400%;
}
.vl {
    border-left: 3px solid lightskyblue;
    height: 120px;
}
.vl2 {
    border-left: 3px solid lightskyblue;
}
.blue2 {
     background-color:#235784;
     border-radius:10px;
}
.blue3 {
    background-color:#ddeaf6;
}
.Blue4 {
    color:#235784;
}
.rnd {
    border-radius:10px;
}
.img1 {
  border-radius: 50%;
}
.img2 {
  border-radius: 50%;
  height:330px;
  width: 0px;
  margin:17%;
}


.my-custom-div {
    padding: 75px 0;
}
.my-custom-div .col-sm-6 {
    padding: 0 0;
}
.my-custom-div .left-column {
    background-color: transparent;
    padding: 30px 50px;
}
blockquote.light {
    border-left: 3px solid lightskyblue;
    color: #ffffff;
    padding: 15px 0px 15px 30px;
}
blockquote p {
    font-size: 18px
}
blockquote.dark {
    border-left: 3px solid lightskyblue;
    color: #000000;
    padding: 15px 0px 15px 15px;
}
.rating {
    display: flex;
    justify-content: center;
    font-size: 2em;
    color: lightgray;
    cursor: pointer;
}
.rating span {
    padding: 0 5px;
}
.rating span.selected,
.rating span:hover,
.rating span:hover ~ span {
    color: gold;
}
#ratingResult {
    text-align: center;
    font-size: 1.2em;
    margin-top: 10px;
}

label {
    display: block;
    margin: 10px 0 5px;
}

button {
    padding: 10px 15px;
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
}

.hero-text {
    text-align: left;
    position: relative;
    font-size: 1.0vw;
    color: silver;
    overflow: hidden;
    z-index: 1;
}
.hero-text1 {
    margin:-150px 0px 0px 175px;
    text-align: left;
    font-size: 45px;
    color: silver;
    z-index: 1;
}
.hero-text2 {
    text-align: left;
    color: silver;
    z-index: 1;
}
.hero-text3 {
    text-align: center;
    color: silver;
    z-index: 1;
    margin: 50px;
}
.hero-text4 {
    text-align: right;
    color: silver;
    z-index: 1;
    margin: 50px;
}
.hero-text6 {
  margin: 0px 0px 0px 75px;
  text-align: left;
  font-size: 25px;
  color: silver;
  overflow: hidden;
  z-index: 1;
}

.p1 {
    font-family: "Times New Roman", Times, serif;
    text-shadow: 5px 5px 5px #ababab;
}
.p2 {
    font-family: Arial, Helvetica, sans-serif;
}
.p3 {
    font-family: "Lucida Console", "Courier New", monospace;
}
.p4 {
    font-family: "Times New Roman", Times, serif;
    text-shadow: 5px 5px 5px #ababab;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('assets/fonts/SpaceBT-Bold.otf') format('otf'),
         url('assets/fonts/SpaceBT-Bold.otf') format('truetype'),
         url('assets/fonts/Space_Bd_BT_Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.space5 {
    font-family: 'MyCustomFont', sans-serif;
}

.swiper {
  width: 600px;
  height: 300px;
}
/*
.image-container {
    display: inline-block;
    transform: translate(5%, -1%);
    max-width: 100%;
}*/
.image-container img {
    transition: transform 0.3s ease;
    display: block;
}
.image-container img:hover {
    transform: scale(1.1);
}

.carousel-item {
    transition: opacity 1s ease-in-out;
}

.swiperslide1 {
    height: 33vw;  /* Set a fixed height for the slide */
    width: 57vw;    /* Set width to 100% or any desired width */
}
.swiperslide1 img {
    Position: absolute;
    Left: 0;
    Bottom: 0;
    Right: 0;
    Top:0;
    Margin: auto auto;
}

.container-slide-text {
  position: relative;
  max-width: 100%;
}

.overlay {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  background-color: transparent;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.container-slide-text:hover .overlay {
  bottom: -100%;
  height: 100%;
}
.text {
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.collection{
    height: 90vh;
    display: flex;
    align-items: center;
}
.collection .content{
    width: 50%;
    border-radius: .7rem;
    overflow: hidden;
}

/*
@media screen and (min-width: 0px) and (max-width: 0px) {
    .boy {
  }
}*/

.container4 {
    margin: -400px 0px 0px -0px;
}
.windmill{
    transform: translate(0%, 17%);
    margin:-0px 0px 0px 0px;
    max-width:100%;
    max-height:100%;
}

.content img{
    width: 100%;
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
}

.content source{
    width: 100%;
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
}

.btn{
    padding: .2rem;
    font-size: .8rem;
    border-radius: .5rem;
    margin: 1rem 0;
    cursor: pointer;
    z-index: 999;
}
.btn-group-vertical{
    text-align: right;
    font-size:10px;
    margin:10px 0px 0px -70px;
}

footer {
    background-color: rgb(1, 1, 1);
    padding: 50px;
    color: white;
}
.phone {
    font-size: 20px;
    color: silver;
    transform: translate(-130%, 120%);
}
.phone2 {
    font-size: 20px;
    color: silver;
    transform: translate(-130%, 120%);
}
.phone3 {
    font-size: 30px;
    color: silver;
    transform: translate(-115%, 100%);
}
.phone4{
    font-size: 20px;
}
.phone5 {
    text-align: left;
}
.copyright{
    color: silver;
    text-align: center;
    width: auto;
}
.copyright2{
    margin: 0px 0px 0px 0px;
}
.copyright3{
    margin: 0px 0px -0px 0px;
}

@media screen and (min-width: 360px) and (max-width: 424px){
    .tour-article1 {
    transform: translate(-25%, -320%);
    margin: 0px 0px 0px -200px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
  .boy {
    position: relative;
    transform: translate(-32%, 10%);
  }
    .tour-article2 {
    transform: translate(-21%, -320%);
    margin: 0px 0px 0px -210px;
    padding: 0px 0px 0px -200px;
    text-align: left;
    font-size: 3.0vw;
  }
    .book1 {
        transform: translate(20%, 0%);
        margin: -0px 0px 0px -70px;
        padding: 0px 0px 0px 40px;
    }
    .bookbtn1{
        transform: translate(2%, 90%);
        overflow: hidden;
    }
    .book2 {
        transform: translate(20%, 0%);
        margin: 0px 0px 0px -70px;
        padding:0px 0px 0px 40px;
    }
    .bookbtn2{
        transform: translate(2%, 90%);
        overflow: hidden;
    }
    .hamburger-icon {
        font-size: 4.5vh;
      }
    .hero-text1{
        transform: translate(-40%, 0%);
    }
    .wpforms-container1 {
        margin: 0 auto;
        overflow: hidden;
        color: silver;
    }
    .logo {
        float:left;
        margin:-30px 5px 0px -0px;
        width:105px;
        height:100px;
    }
    .navpos {
      font-size: 15px;
      position: absolute;
      left: 50%;
      top: -15%;
      max-width: 100%;
    }
    .row > * {
        flex-shrink: 1;
      }
    .tours-button {
        top: 125%;
        left: 40%;
        transform: translate(0%, 0%);
      }
      .about-button{
        max-width: 80%;
        transform: translate(0%, 150%);
      }
      .about {
        text-align: left;
        font-size: 12px;
        position: absolute;
        left: 55%;
        transform: translate(-85%, -100%);
        color: silver;
        z-index: 1;
      }
      .about2 {
        text-align: left;
        font-size: 12px;
        position: absolute;
        left: 55%;
        transform: translate(-65%, 5%);
        color: silver;
        z-index: 1;
      }
      .phone5 {
          text-align: center;
      }
      .phone {
          transform: translate(-370%, 120%);
      }
      .phone2 {
          transform: translate(-370%, 120%);
      }
      .phone3 {
          transform: translate(-545%, 100%);
      }
      .footer-block {
        color: white;
        text-align: center;
      }
}
@media screen and (min-width: 425px) and (max-width: 559px){
    .tour-article1 {
    transform: translate(-25%, -320%);
    margin: 0px 0px 0px -200px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .tour-article2 {
    transform: translate(-21%, -320%);
    margin: 0px 0px 0px -210px;
    padding: 0px 0px 0px -200px;
    text-align: left;
    font-size: 3.0vw;
  }
    .boy {
        position: relative;
        transform: translate(-30%, 25%);
  }
    .book1 {
        transform: translate(20%, 0%);
        margin: -0px 0px 0px -70px;
        padding: 0px 0px 0px 40px;
    }
    .bookbtn1{
        transform: translate(2%, 90%);
        overflow: hidden;
    }
    .book2 {
        transform: translate(20%, 0%);
        margin: 0px 0px 0px -70px;
        padding:0px 0px 0px 40px;
    }
    .bookbtn2{
        transform: translate(2%, 90%);
        overflow: hidden;
    }
    .hamburger-icon {
        font-size: 4.5vh;
      }
    .hero-text1{
        transform: translate(-40%, 0%);
    }
    .wpforms-container1 {
        margin: 0 auto;
        overflow: hidden;
        color: silver;
    }
    .logo {
        float:left;
        margin:-30px 5px 0px -0px;
        width:105px;
        height:100px;
    }
    .navpos {
      font-size: 19.5px;
      position: absolute;
      left: 50%;
      top: -15%;
      max-width: 100%;
    }
    .row > * {
        flex-shrink: 1;
      }
    .tours-button {
        top: 125%;
        left: 40%;
        transform: translate(0%, 0%);
      }
    .about-button{
        max-width: 80%;
        transform: translate(20%, 150%);
      }
    .about {
        text-align: left;
        font-size: 12px;
        position: absolute;
        left: 55%;
        transform: translate(-85%, -100%);
        color: silver;
        z-index: 1;
      }
      .about2 {
        text-align: left;
        font-size: 12px;
        position: absolute;
        left: 55%;
        transform: translate(-65%, 5%);
        color: silver;
        z-index: 1;
      }
      .phone5 {
          text-align: center;
      }
      .phone {
          transform: translate(-370%, 120%);
      }
      .phone2 {
          transform: translate(-370%, 120%);
      }
      .phone3 {
          transform: translate(-545%, 100%);
      }
      .footer-block {
        color: white;
        text-align: center;
      }
}
@media screen and (min-width: 560px) and (max-width: 639px){
    .tour-article1 {
    transform: translate(-155%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .tour-article2 {
    transform: translate(-39%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .boy {
        margin: 0px 0px 200px -65px;
        position: relative;
  }
    .book1 {
        transform: translate(20%, 95%);
        margin: -0px 0px 0px -70px;
        padding: 0px 0px 0px 0px;
    }
    .bookbtn1{
        transform: translate(2%, 50%);
        overflow: hidden;
    }
    .book2 {
        transform: translate(80%, 95%);
        margin: 0px 0px 0px -70px;
        padding:0px 0px 0px 0px;
    }
    .bookbtn2{
        transform: translate(2%, 50%);
        overflow: hidden;
    }
    .hamburger-icon {
        font-size: 4.0vh;
      }
    .hero-text1{
        transform: translate(-120%, 0%);
    }
    .wpforms-container1 {
        margin: 0 auto;
        overflow: hidden;
        color: silver;
    }
    .logo {
    float:left;
    margin:-30px 5px 0px -0px;
    width:105px;
    height:100px;
    }
    .navpos {
      font-size: 2.6vw;
      position: absolute;
      left: 50%;
      top: -15%;
      max-width: 100%;
    }
    .menu{
        transform: translate(10%, 0%);
        margin: 0px 0px 0px -240px;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 75%;
  }
    .row > * {
        flex-shrink: 1;
      }
    .tours-button {
        top: 125%;
        left: 40%;
        transform: translate(0%, 0%);
      }
    .about-button{
        max-width: 80%;
        transform: translate(30%, 150%);
      }
    .about {
        text-align: left;
        font-size: 13px;
        position: absolute;
        left: 55%;
        transform: translate(-85%, -100%);
        color: silver;
        z-index: 1;
      }
      .about2 {
        text-align: left;
        font-size: 13px;
        position: absolute;
        left: 55%;
        transform: translate(-65%, 5%);
        color: silver;
        z-index: 1;
      }
      .phone5 {
          text-align: center;
      }
      .phone {
          transform: translate(-370%, 120%);
      }
      .phone2 {
          transform: translate(-370%, 120%);
      }
      .phone3 {
          transform: translate(-545%, 100%);
      }
      .footer-block {
        color: white;
        text-align: center;
      }
}
@media screen and (min-width: 640px) and (max-width: 766px){
    .tour-article1 {
    transform: translate(-155%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .tour-article2 {
    transform: translate(-39%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .boy {
        position: relative;
        transform: translate(-15%, 50%);
  }
    .book1 {
        transform: translate(20%, 95%);
        margin: -0px 0px 0px -70px;
        padding: 0px 0px 0px 0px;
    }
    .bookbtn1{
        transform: translate(2%, 50%);
        overflow: hidden;
    }
    .book2 {
        transform: translate(80%, 95%);
        margin: 0px 0px 0px -70px;
        padding:0px 0px 0px 0px;
    }
    .bookbtn2{
        transform: translate(2%, 50%);
        overflow: hidden;
    }
    .hamburger-icon {
        font-size: 4.0vh;
      }
    .hero-text1{
        transform: translate(-120%, 0%);
    }
    .wpforms-container1 {
        margin: 0 auto;
        overflow: hidden;
        color: silver;
    }
    .logo {
    float:left;
    margin:-30px 5px 0px -0px;
    width:105px;
    height:100px;
    }
    .navpos {
      font-size: 2.6vw;
      position: absolute;
      left: 50%;
      top: -15%;
      max-width: 100%;
    }
    .menu{
        transform: translate(10%, 0%);
        margin: 0px 0px 0px -240px;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 75%;
  }
    .row > * {
        flex-shrink: 1;
      }
    .tours-button {
        top: 125%;
        left: 40%;
        transform: translate(0%, 0%);
      }
    .about-button{
        max-width: 80%;
        transform: translate(60%, 150%);
      }
    .about {
        text-align: left;
        font-size: 13px;
        position: absolute;
        left: 55%;
        transform: translate(-85%, -100%);
        color: silver;
        z-index: 1;
      }
      .about2 {
        text-align: left;
        font-size: 13px;
        position: absolute;
        left: 55%;
        transform: translate(-65%, 5%);
        color: silver;
        z-index: 1;
      }
      .phone5 {
          text-align: center;
      }
      .phone {
          transform: translate(-370%, 120%);
      }
      .phone2 {
          transform: translate(-370%, 120%);
      }
      .phone3 {
          transform: translate(-545%, 100%);
      }
      .footer-block {
        color: white;
        text-align: center;
      }
}
@media screen and (min-width: 767px) and (max-width: 990px){
    .tour-article1 {
    transform: translate(-154%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .tour-article2 {
    transform: translate(-47%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 3.0vw;
  }
    .boy {
        position: relative;
        transform: translate(23%, 80%);
  }
    .book1 {
        transform: translate(20%, 95%);
        margin: -0px 0px 0px -70px;
        padding: 0px 0px 0px 0px;
    }
    .bookbtn1{
        transform: translate(2%, 50%);
        overflow: hidden;
    }
    .book2 {
        transform: translate(80%, 95%);
        margin: 0px 0px 0px -70px;
        padding:0px 0px 0px 0px;
    }
    .bookbtn2{
        transform: translate(2%, 50%);
        overflow: hidden;
    }
    .hero-text {
        transform: translate(0%, -90%);
}
    .hero-text1{
        transform: translate(-120%, 0%);
    }
    .wpforms-container1 {
        margin: 0 auto;
        overflow: hidden;
        color: silver;
    }
    .hamburger-icon {
        font-size: 4.5vh;
      }
      .logo {
    float:left;
    margin:-30px 5px 0px -0px;
    width:105px;
    height:100px;
    }
    .navpos {
      font-size: 2.0vw;
      position: absolute;
      left: 50%;
      top: -15%;
      max-width: 100%;
    }
    .menu{
        transform: translate(17%, -40%);
        margin: 0px 0px 0px -170px;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 75%;
  }
    .row > * {
        flex-shrink: 1;
      }
    .tours-button {
        top: 125%;
        left: 40%;
        transform: translate(0%, 0%);
      }
    .about-button{
        max-width: 80%;
        transform: translate(70%, 150%);
      }
      .phone5 {
          text-align: center;
      }
      .phone {
          transform: translate(-370%, 120%);
      }
      .phone2 {
          transform: translate(-370%, 120%);
      }
      .phone3 {
          transform: translate(-545%, 100%);
      }
      .footer-block {
        color: white;
        text-align: center;
      }
}
@media screen and (min-width: 991px) and (max-width: 1199px){
     .tour-article1 {
    transform: translate(-178%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 2.5vw;
  }
    .tour-article2 {
    transform: translate(-50%, 0%);
    margin: 0px 0px 0px -100px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    font-size: 2.5vw;
  }
  .logo {
    float:left;
    margin:-30px 5px 0px -0px;
    width:105px;
    height:100px;
    }
  .boy {
      position: relative;
    margin: 0px 0px 100px -250px;
    position: relative;
  }
    .book1 {
        transform: translate(20%, 85%);
        margin: -0px 0px 0px -70px;
        padding: 0px 0px 0px 0px;
        z-index: 99999;
    }
    .bookbtn1{
        transform: translate(0%, 50%);
        overflow: hidden;
    }
    .book2 {
        transform: translate(80%, 85%);
        margin: 0px 0px 0px -70px;
        padding:0px 0px 0px 0px;
        z-index: 99999;
    }
    .bookbtn2{
        transform: translate(0%, 50%);
        overflow: hidden;
    }
    .hamburger-icon {
        font-size: 4.5vh;
      }
    .hero-text1{
        transform: translate(-50%, 0%);
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 75%;
  }
    .tours-button {
        top: 125%;
        left: 40%;
        transform: translate(0%, 0%);
      }
    .about-button{
        max-width: 80%;
        transform: translate(100%, 150%);
      }
      .footer-block {
        color: white;
        text-align: center;
      }
}