@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;400;600&family=Montserrat:wght@100;400;600&Roboto+Slab:wght@400;700&display=swap');

a:link {color:  white; text-decoration: none;}
a:visited {color:  snow; text-decoration: none;}
a:hover {color: rgb(52, 136, 204);}
a:active {color: #FF00CC; text-decoration: none;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*photo gallery imported code*/
}



/*photo gallery imported code starts, also there is one line of code at 10*/
/* Position the image container (needed to position the left and right arrows) */
.photos {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}


/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Number text (1/3 etc) */
.numbertext {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-family: 'Catamaran', sans-serif;
  font-weight: 100;
  font-size: 16px;
  color: white;
  padding: 8px 12px;
  position: absolute;
  top: 0;
} /*photo gallery imported code ends*/
.sidebar, .rightbar {
  padding-left: 2px;
}
#gallerylinkbg {
  background-color: rgb(171, 171, 171)
}
#gallerylink {
  height: 150px;
  line-height: 150px;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: white;
}

.back {display:none}
#back1 {display: none;}
#morevillas, #manager, #booknow, #abbrevs {
    background-color: rgb(171, 171, 171);
    border-radius: calc(var(--vw, 1vw) * 4);
    border: solid 1px rgb(121, 121, 121);
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-weight: 400;
    font-size: calc(var(--vw, 1vw) * 3.5);
    color: white;
    padding: 0 calc(var(--vw, 1vw) * 2);
    margin-left: calc(var(--vw, 1vw) * 0);
    margin-top:  calc(var(--vw, 1vw) * 4);
    margin-bottom:  calc(var(--vw, 1vw) * 4);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 2px;
}

  h3 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(var(--vw, 1vw) * 4);
    color: rgb(27, 27, 27);

  }
  .amenities, .details, .distances, .description, .twin, .reviews {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-size: calc(var(--vw, 1vw) * 3.75);
    color: rgb(71, 71, 71);
    /*padding-top: calc(var(--vh, 1vw) * 0);
    margin-right: calc(var(--vh, 1vw) * 0);*/
  }
  #more, #more2, #more3, #more4, #more5, #more6, #separator, #smallpic1, #smallpic2 {display: none;}
 #distances2, #calendarlocallink, #othervillas2, #manager2, #etv2, #booknow2 {display:none;}
 .google_ads, .whatsnearby2, .bigger, .details2 {display: none;}

  button {
    display: inline-block;
    background-color: rgb(171, 171, 171);
    border-radius: calc(var(--vw, 1vw) * 4);
    border: solid 1px rgb(121, 121, 121);
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-size: calc(var(--vw, 1vw) * 4);
    color: white;
    padding: 0 calc(var(--vw, 1vw) * 2);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 2px;
  }

  #myBtn3, #myBtn4, #myBtn2 { 
    background-color: rgb(171, 171, 171);
    border-radius: calc(var(--vw, 1vw) * 4);
    border: solid 1px rgb(121, 121, 121);
  }
  #booknow {
    border: solid 1px rgba(41, 102, 0, 0.8);
    background-color: rgba(41, 102, 0, 0.65);
    font-weight: 400;
  }

  .amenities {
    grid-area: amenities;
    margin-bottom: 6px;
    
    }
    #dots {
      display:inline;
    }
    .details {
    grid-area:details;
    margin-bottom: calc(var(--vh, 1vh) * 2);
    

    }
    .gems {
      margin-bottom: calc(var(--vh, 1vh) * 0);
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 
      "distances calendar";
    }
  .distances {
    grid-area: distances;


    }
    .twin {
      display:grid;
      grid-template-columns: 1fr;
      background-color: white;
    }

  .calendar {
    grid-area: calendar;

    }
  #more4 {
    height: 300px;
    width: 300px;
    background-color: lightcoral;
  }
  .description {
    grid-area: description;
    padding-bottom: calc(var(--vh, 1vh) * 4);
    }

.line {
  height:1px;
  width:100%;
  background-color: rgb(71, 71, 71);
}

.licence {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    color:#006633;
    font-size: calc(var(--vw, 1vw) * 3.5);
    text-align: right;
    margin-right: calc(var(--vh, 1vh) * 3);
}



  .reviews {
    grid-area: reviews;
    margin: calc(var(--vw, 1vw) * 3) calc(var(--vw, 1vw) * 3);
    margin-bottom: calc(var(--vh, 1vw) * 0);
    }

.lynx{ 
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: calc(var(--vw, 1vh) * 4)

    }
    .backtwo, .spacer {
      height: 30px;
      width: 30px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .fit {
      width: 100%;
      height: 100%;
      
  }
 .gems {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
 }
 .morevillas {
  margin-right: 30px;
  grid-area:morevillas
  }
 #manager, #booknow { 
   margin-right: calc(var(--vw, 1vh) * 8);
   margin-left: calc(var(--vw, 1vh) * 4);
 }

  .booknow {
    grid-area:booknow;
    }
@media only screen and (min-width:500px) {
  .backtwo, .spacer {
    height: 40px;
    width: 40px;
    margin-left: 20px;
    margin-right: 20px;
  }
}

  @media only screen and (min-width:600px) {
    .backtwo, .spacer {
      height: 50px;
      width: 50px;
      margin-left: 20px;
      margin-right: 20px;
    }

  }


@media only screen and (min-width:768px) {
  
        .details, .gems, .distances, .smaller {display: none;}
        #dots, #morevillas, #manager, #booknow, #abbrevs { display:none;}
        #myBtn2, #myBtn3, #myBtn4, #myBtn5, #myBtn7 {display:none;} /*hide elements created only for smaller displays in a way that allows for correct div nesting*/

        #bigscreenh5 {display: inline;}
        #distances2, #calendarlocallink, #othervillas2, #manager2, #etv2, #booknow2 {
          display:inline;
          font-family: 'Montserrat', sans-serif;
          font-size: calc(var(--vw, 1vw) * 1.8);
          font-weight: 100;
          color: white;
           }
        .sidebar { 
          display: flex;
          align-items: flex-end;
        }
     
        .smaller {
            display:inline;
        }
        .amenities {
          margin-left:  calc(var(--vw, 1vw) * 5);
          margin-right:  calc(var(--vw, 1vw) * 2);

      }
        .amenitwos {
          grid-area: amenitwos;
          font-size: calc(var(--vw, 1vw) * 1.7);
        }
        #saline {
          vertical-align: bottom;
        }   
        
        .photos {
          display: initial;
          height: calc(var(--vw, 1vh) * 29.2);
          object-fit: contain;
          object-position: center center;
          grid-area: photos;
  
        }
        #gallerylink {
          height: calc(var(--vw, 1vh) * 29.2);
          line-height: calc(var(--vw, 1vh) * 29.2);
          font-size: calc(var(--vw, 1vh) * 2.5);
      }
        #myBtn, #myBtn6, #more {
          font-size: calc(var(--vw, 1vw) * 1.5);
        }
        #smallpic1 {
          
          grid-area: smallpic1; 
        }
        #smallpic2 {
       
          grid-area: smallpic2; 
        }
        #smallpic1, #smallpic2 {
          height: auto;/*calc(var(--vw, 1vh) * 14.6);*/
          width: auto;
          background-size: cover;
          background-position: center center; 
          background-repeat: no-repeat;
          display:initial;
        }

        .description {
          display: initial;
          font-size: calc(var(--vw, 1vh) * 1.7);
          margin-top: calc(var(--vh, 1vw) * 3);
          margin-right: calc(var(--vh, 1vw) * 3);
          margin-bottom: calc(var(--vh, 1vw) * 0);
          margin-left: calc(var(--vh, 1vw) * 3);
          padding-bottom: calc(var(--vh, 1vw) * 0);
        }
        .bigger {
          display: inline;
          grid-area: bigger;
         
        }
        #calframe { 
          height: 470px;
          width: auto;
        }
        .back {
          display:initial;
          height: 30px;
          width: 30px;
        }
        #back1 {
          display:initial;
          height: 30px;
          width: 30px;
        }
        .whatsnearby2 {
          display: grid;
          grid-template-columns: 1fr 2fr;
          grid-template-rows: auto;
          grid-template-areas: 
          "distances3 location3";
          grid-area: whatsnearby2;

          
        }
        #distances3 {
          grid-area: distances3;
          font-family: Catamaran, sans-serif;
          font-size: calc(var(--vw, 1vh) * 1.5);
          color:rgb(71, 71, 71);
        }

        #location3 {
          grid-area: location3;
          height: 300px;
          width:300px;
          margin-top: 80px;
          background-size: contain;
          background-repeat: no-repeat;
        }

        .lynx {
          display:none;
          }
        .licence {
          display: none;
        }
        #abbrevs {
          display: none;
        }
        .reviews {
          display:initial;
          font-size: calc(var(--vw, 1vh) * 1.5);
          grid-area: reviews;
        }
        #dots5 {
          font-size: 0px;
        }
        .details2 {
          grid-area: details2;
          display: inline;
          font-family: Catamaran, sans-serif;
          font-size: calc(var(--vw, 1vh) * 1.5);
          color:rgb(71, 71, 71);
          margin-top: calc(var(--vh, 1vw) * 4);
          margin-right: calc(var(--vh, 1vw) * 6);
          margin-bottom: calc(var(--vh, 1vw) * 0);
          margin-left: calc(var(--vh, 1vw) * 7);

        }
        .maincontainer {
            
            display:grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: auto auto auto auto auto auto;
            row-gap: 0px;
            column-gap: 0px;
            grid-template-areas:
            "amenitwos photos"
            "navbar navbar"
            "details2 rightbar"
            "details2 bigger"
            "details2 whatsnearby2";

            }
            .photoscontainer {
              background-color: white;
              height: calc(var(--vw, 1vw) * 29.2);
              width: auto;
              display: grid;
              grid-template-columns: 2fr 1fr;
              grid-template-rows: 1fr 1fr;
              row-gap: 0px;
              column-gap: 0px;
              grid-template-areas:
              "photos smallpic1"
              "photos smallpic2";
            }
            .rightbar { 
              grid-area: rightbar;
              display: grid;
              grid-template-columns: 3fr 3fr;
              grid-template-rows: 1fr;
              row-gap: 0px;
              column-gap: 1px;
              grid-template-areas:
              "description reviews";
            }
            .navbar {
              grid-area: navbar;
              background-color: rgb(171, 171, 171);
              display: flex;
              flex-wrap: nowrap;
              align-content: center;
              justify-content: space-evenly; 
              border-top: 4px double rgb(171, 171, 171);
              border-bottom: 4px double rgb(171, 171, 171);
              margin-top: 0px;
              padding-top: calc(var(--vw, 1vh) * 0.75);
              z-index: 1;
          
            }
} /*closes 768 media query*/



@media only screen and (min-width:1111px) {

  #saline, #descripshun, #gemreviews, #myBtn, #myBtn6, #more, #distances3 {
    font-size: 19px;
  }
  .details2 {
    font-size: 19px;
  }
  h4 {
    font-size: 22px;
    font-family: Montserrat, sans-serif;
    color:rgb(111, 111, 111);
  }

}