@import url(https://fonts.googleapis.com/css?family=Fahkwang);
@import url(https://fonts.googleapis.com/css?family=Merienda);
@import url(https://fonts.googleapis.com/css?family=Anaheim);
@import url(https://fonts.googleapis.com/css?family=Italianno);


.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav-right{
    float: right;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

body{
    margin: 0em 5em 0em 5em;
    font-size: 1em;
}
p{
    font-size: .9em;
}




/* unvisited link */

.my_link a:link {
  color: blue;
}

/* visited link */
.my_link a:visited {
  color: green;
}

/* mouse over link */
.my_link a:hover {
  color: hotpink;
}

/* selected link */
.my_link a:active {
  color: teal;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #6ac1de;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #67b6bf;
}



li .active {
  background-color: #d1c7a7;
}

li.right{
    float: right;
    
}

#cart_tbl {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#cart_tbl td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#cart_tbl tr:nth-child(even){background-color: #f2f2f2;}

#cart_tbl tr:hover {background-color: #ddd;}

#cart_tbl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #66bad9;
  color: white;
}
#my_title{
    font-family: "Italianno";
    font-size: 5vw;
    color: #66bad9;
    text-align: center;
}

#my_font{
    font-family: "Merienda";
    font-size: 1vw;
    
    
}

#spa_tbl{
   border-collapse: collapse;
   text-align: center;
}

#spa_tbl td:{
    border-collapse: collapse;
    text-align: center;
    border: 1px solid;
    
}

#spa_tbl td:nth-child(2){
    text-align: left;
    width: 60em;
   
}

#spa_tbl th{
      background:#e3dada;
      text-align: center;
 
}
#spa_tbl tr{
    border:1px solid;
    background: #f7f2f7;
}
#spa_tbl tr:nth-child(odd){
    border:1px solid;
    background: #ffffff;
}
#spa_tbl tr:hover{
    background:#daf3f7;
}


#ctr_tbl{
    border: 4px solid;
    border-color: #66bad9;
}

#post_get_tbl{
    border-collapse: collapse;
    border: 1px solid;
    text-align: center;
    border-color: black;
}

#post_get_tbl td, #post_get_tbl th{
    border-collapse: collapse;
    border: 1px solid black;
    color: blue;
    
}

#post_get_tbl td:first-child{
      text-align: left;
      color: black;
}

#post_get_tbl tr:first-child{
      color: black;
      text-align: center;
}

.my_title{
    font-family: Italianno;
    font-size:8vw;
    color: #6ac1de ;
   
    
}

.my_slogan{
    font-family: Italianno;
    font-size: 3vw;
    text-align: center;
}

.my_paragraph{
    font-family: Italianno;
    font-size: 2em;
}
.my_div{
    background-color: #6ac1de; 
    color: #ffffff; 
   
   
    
    
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 3;
  
}

.div_header{
    background-image: url("/images/spa1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.my_responsive{
    max-width: 100%;
    height: auto;
}

.responsive{
    width: 100%;
    height: auto;
}

.button {
  background-color: #3fabcc; 
  border: none;
  color: white;
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius: 12px;
  width: 100%
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/*w3schools hoverable dropdown and clickable popup*/
/*.dropdown {
  position: relative;
  display: inline-block;
}*/





/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #d8f2ef;
  color: #555;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.center {
  padding: 10px 0;
  
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

/*@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
      position: absolute;
    right: 0;
    top: 0;
  }
  
 li.right, 
 li {float: none;}
    
}

@media only screen and (max-width: 300px) {
  li.right, 
 li {float: none;}
}
*/
/*mobile phones*/
[class*="col-"] {
  width: 100%;
}