/* Start Part-00*/
/*
*{margin: 0; padding: 0; box-sizing: border-box;
  font-family: 'Roboto', sans-serif;} 
 *, *:before, *:after {
  box-sizing: inherit;
}

 body {font-family: Arial, Helvetica, sans-serif;}
/*Menu navbar css*/
  /* .navbar {
      width: 101%;
      background-color: #555;
      overflow: auto;
    }
   .navbar a {
      float: left;
      padding:1px;
      color: white;
      text-decoration: none;
      font-size: 17px;
      }
    .navbar a:hover {
       background-color: #000;
       }
    .active {
       background-color: #04AA6D;
       }
   @media screen and (max-width: 500px) {
     .navbar a {
       float: none;
       display: block;
       }
      }
/*Menu sidepanel css*/
 /*  .sidepanel  {
      width: 0;
      position: fixed;
      z-index: 1;
      height:100%;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
      }
    .sidepanel a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
      }
    .sidepanel a:hover {
      color: #f1f1f1;
      }
    .sidepanel .closebtn {
       position: absolute;
       top: 0;
       right: 25px;
       font-size: 36px;
       }
    .openbtn {
       font-size: 17px;
       cursor: pointer;
       background-color: #111;
       color: white;
       padding: 8px 10px;
       border: none;
       }
    .openbtn:hover {
       background-color:#444;
       }


/* Text styles ##########################################*/
/*.w3-tangerine {
  font-family: "Tangerine", serif;
}

.w3-sofia {
  font-family: Sofia, cursive;
}

samp {
  color: rgb(245, 31, 31);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size:24px;
text-shadow: #555;
  font-weight:800;
}

samp2 {
  color: navy;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

samp3 {
  color: hotpink;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  
}


samp4 {
  font-size: 26px;
  font-weight: 22;
  font-family: "Tangerine", serif;
  color: hotpink;
}

samp8 {
  color: bisque;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 21px;
}

span.psw {
  float: right;
  padding-top: 16px;
}



.w3-theme-gradient {
  color: #000 !important;
  background: -webkit-linear-gradient(top, #64B5F6 25%, #42A5F5 75%)
}

/

/* Menu styles ##########################################*/
 /* text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}


 


/* price styles */
.price {
/*  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.price .grey {
  background-color: #eee;
  font-size: 20px;
}
/* Card styles */*/

/* sidepanel styles */
/*
.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 760px;
  top: 0;
  left: 0;
  background-color: #111111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
/*
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}



/* Footer styles */
/*footer {
  width: 110%;
  color: #fff;
  padding: 0px;
  margin-left: -16px;
  margin-right: 0px;
  text-align: center;

}

/* CSS styles for Royal Homeo Academy website */
/* Make the image fully responsive */

/*
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}



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


.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.openbtn {
  font-size: 18px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px;
  border: none;
}

.openbtn:hover {
  background-color:#444;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
/*.container {
  position: relative;
}

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

/* Add a pointer when hovering over the thumbnail images */
/*.cursor {
  cursor: pointer;
}


 /* Collapsed sidepanel css 3*/
/*
.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 760px;
  top: 0;
  left: 0;
  background-color: #111111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}



 /* Collapsed sidepanel css 4*/

/*
.container {
  padding: 0 12px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}


  /*Collapsed sidepanel css 5*/
 /*
footer {
 width: 110%;
  color: #fff;
  padding: 0px;
  margin-left:-16px ;
  margin-right: 0px;
  text-align: center;
  }
  .dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  .dropup {
    position: relative;
    display: inline-block;
  }
  
  .dropup-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    bottom: 50px;
    z-index: 1;
  }
  
  .dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropup-content a:hover {background-color: #ccc}
  
  .dropup:hover .dropup-content {
    display: block;
  }
  
  .dropup:hover .dropbtn {
    background-color: #2980B9;
  }

 /*
form {
  border: 3px solid #f1f1f1;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}


#entry-01{
    width: 100%;
    height: 740px;
    background-color:  bisque;
    border-radius: 50% 10% 10% 10%;
    margin-left: 14px;
  }
  
table, th, td {
  border:1px solid black;
}
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
 margin-left: 130px;
 
}

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

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

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

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
 margin-left: 45px;
  text-align: center;
  background-color: #ffa500;
  color: white;
}

#example1 {
  border: 2px solid black;
  padding: 25px;
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {
  border: 2px solid black;
  padding: 25px;
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 500px 100px;
}

*/

body {
      font-family: Georgia, serif;
    }

    .navbar {
      width: 100%;
      background-color: #555;
      overflow: auto;
    }

    .navbar a {
      float: left;
      padding: 1px;
      color: black;
      text-decoration: none;
      font-size: 21px;
    }

    .navbar a:hover {
      background-color: #f1f1f1f1;
    }

    .active {
      background-color: #04AA6D;
    }

    @media screen and (max-width: 500px) {
      .navbar a {
        float: none;
        display: block;
      }
    }

    .vl {
      border-left: 6px solid green;
      height: 238px;
    }

    #p1 {
      background-color: hsla(120, 100%, 50%, 0.3);
    }

    #p2 {
      background-color: hsla(120, 100%, 75%, 0.3);
    }

    #p3 {
      background-color: hsla(120, 100%, 25%, 0.3);
    }

    #p4 {
      background-color: hsla(120, 60%, 70%, 0.3);
    }

    #p5 {
      background-color: hsla(290, 100%, 50%, 0.3);
    }

    #p6 {
      background-color: hsla(290, 60%, 70%, 0.3);
    }

    .mobile-container {
      max-width: 100%;
      margin: auto;
      background-color: #ddd;
      height: 300px;
      color: white;
      border-radius: 10px;
    }

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

    .topnav #myLinks {
      display: none;
    }

    .topnav a {
      color: white;
      padding: 2px;
      text-decoration: none;
      font-size: 17px;
      display: block;
    }

    .topnav a.icon {
      background: black;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }

    .topnav a:hover {
      background-color: #f1f1f1;
      color: black;
    }

    .active {
      background-color: #04AA6D;
      color: white;
    }

    .img {
      width: 20%;
      height: 13px;
    }

    .bg-text {
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/opacity/see-through */
      color: #f1f1f1;
      font-weight: bold;
      font-size: 28px;
      border: 10px solid #f1f1f1;
      position: relative;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 260px;
      padding: 4.1px;
      text-align: center;
    }

    @media screen and (max-width: 300px) {
      bg-text {
        display: block;
        width: 100%;
      }
    }

    #myDIV {
      background: black;
      animation: mymove 5s infinite;
    }

    @keyframes mymove {
      from {
        background-color: hsl(0, 100%, 92%);
      }

      to {
        background-color: rgb(210, 210, 210);
      }
    }