/*Beginning of CSS*/
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 16px/1.4 "Verdana", sans-serif;
  color: #777;
}


/*
h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Verdana", sans-serif;
  color: #111;
}
*/


/* General links */

a:link {
  color: #fff;
  text-decoration: none;
}

a:visited {
  color: #fff;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: red;
} 


/* Beginning of backgrounds */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9 {
  position: relative;
  opacity: 0.80;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("../img/002.jpg");
  min-height: 300px;
}

.bgimg-2 {
  background-image: url("../img/140.jpg");
  min-height: 300px;
}

.bgimg-3 {
  background-image: url("../img/050.jpg");
  min-height: 300px;
}

.bgimg-4 {
  background-image: url("../img/109.jpg");
  min-height: 300px;
}

.bgimg-5 {
  background-image: url("../img/313.jpg");
  min-height: 300px;
}

.bgimg-6 {
  background-image: url("../img/016.jpg");
  min-height: 300px;
}

.bgimg-7 {
  background-image: url("../img/308.jpg");
  min-height: 300px;
}

.bgimg-8 {
  background-image: url("../img/264.jpg");
  min-height: 300px;
}

.bgimg-9 {
  background-image: url("../img/019.jpg");
  min-height: 300px;
}


.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption2 {
  position: absolute;
  right: 5%;
  top: 20%;
  width: 150px;
  text-align: center;
  color: #000;
  background-color: #000;
  padding:10px;
  box-shadow: 1px 1px 1px 1px #707070;
}

.caption3 {
  position: absolute;
  left: 5%;
  top: 20%;
  width: 200px;
  text-align: center;
  color: #ccc;
  background-color: #000;
  padding:10px;
  box-shadow: 1px 1px 1px 1px #707070;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  letter-spacing: 1px;
}

.caption span.border2 {
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 14px;
  letter-spacing: 1px;
  box-shadow: 1px 1px 1px 1px #5d5d5d;
}
/* End of backgrounds */



/* Big Font*/
bigfont {
    float: left;
    width: 0.7em;
    font-size: 400%;
    font-family: algerian, courier;
    line-height: 90%;
    color:#d80000;
}

/*GoTo Top Button*/
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 30px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px; /* Some padding */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}


/*B E G I N N I N G of Boxes */
* {
    box-sizing: border-box;
}

/* Create TWO equal columns*/
.column2 {
    float: left;
    width: 50%;
    padding: 0px;
}

/* Create THREE equal columns*/
.column3 {
    float: left;
    width: 33.33%;
    padding: 20px;
}

/* Create FOUR equal columns*/
.column4 {
    float: left;
    width: 25%;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the T W O columns stack on top of each other*/
@media (max-width: 600px) {
    .column2 {
        width: 100%;
    }
}
/* Responsive layout - makes the THREE columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column3 {
        width: 100%;
    }
}
/* Responsive layout - makes the FOUR columns */
@media (max-width: 600px) {
    .column4 {
        width: 100%;
    }
}
/* E N D of Boxes*/


/* IMAGE overlay */
* {box-sizing: border-box;}

.ovcontainer {
  position: relative;
/*  
    width: 50%;
    max-width: 300px;
*/
}

.ovimage {
  display: block;
  width: 100%;
  height: auto;
}

.ovoverlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.ovcontainer:hover .ovoverlay {
  opacity: 1;
}


/* Avatar */
.avatar {
    border-radius: 50%;
}


/* Social Media Links */
.socmedia a {
    color: #f2f2f2;
    padding: 0px 4px;
    text-decoration: none;
    font-size: 27px;
}

/* Change the color of links on hover */
.socmedia a:hover {
    background-color: #ddd;
    color: black;
}


/* ROUNDed CORNERS */
#rcorners {
    border-radius: 15px 30px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}


/* Photo Gallery */
img,
.image{
    width: 40vw;
    max-width: 200px;
    max-height: 200px;
    margin: 0vh 0vw;
}
.image{
    display: inline-block;
    height: 20vw;
    max-height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.spotlight.image{
    cursor: pointer;
}



/* --------------------------------------- asia v2 */

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* Style the tab content */
.tabcontent {
    color: black;
    display: none;
    padding: 50px;
    text-align: center;
}

#Basic {background-color:white;}
#Medium {background-color:white;}
#Full {background-color:white;}
#Premium {background-color:white;}