body h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    table {
        font-family: "Montserrat", sans-serif;
        font-size: calc(12px + 0.390625vw);
        font-weight:1000;
    }

    h1.title {
      
      font-size: calc(16px + 0.390625vw);
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      color:white;
 background-color: #070137dc;
      
  }

  h1.a2-font {
      
    font-size: calc(16px + 0.390625vw);
}

  h2.a2-font {
    color: white;
    font-family: "Anton", sans-serif;
    font-size: calc(25px + 0.390625vw);
}


    h2.a1-font {
        color: #221F1F;
        font-family: "Anton", sans-serif;
        font-size: calc(18px + 0.390625vw);
    }
    h3.a1-font {
      color: #221F1F;
      font-family: "Poppins", sans-serif;
      font-size: calc(15px + 0.390625vw);
  }
   

    .img-fit {
        position: relative;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    .img-responsive {

        width: 100%;
        height: auto;

    }

    .img-reflect{
     
       

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white));
    
    }

    .img-reflect1{
     
       

      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(white));
          
          }
      

    .hw-10 {
        height: 10%;
        width: 90%;
    }

    .container-video {
        position: relative;
        background-color: whitesmoke;
        border-radius: 20px;
        width: 100%;
    }

    .overlay {
        position: absolute;
        top: 22%;
        left: 20%;
        color: #48185D;
        width: auto;

    }

    .round-border {
        border-radius: 20px;
        background-color: #f5e4e6;
    }

    .round-img {
      border-radius: 20px;
  }
  .hround-img {
   
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
  
  .table-row-space{
    border-spacing: 0 10px;
  }

    .d-center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .back-color1 {

        background-color: #89CFF0;

    }

    .back-color2 {
        background-color: #96DED1;
    }

    /*.back-color3 {
        background-color: tomato;
        color: white;
    }*/

    .back-color3 {
      background-color: whitesmoke;
      color: #003300;
    }

    .parent-page {
        width: 90%;
        height: 100%;
        background-color: aqua;
        position: relative;
        margin: auto;
    }

    .page-header {
        top: 0;
        width: 100%;
        height: 10%;
        position: absolute;
        background-color: red;
    }

    .div-header-img {
        top: 0;
        width: 100%;
        height: 75%;
        background-color: white;
        position: absolute;

    }

    .flex-header-img {
        top: 0;
        position: absolute;
        display: inline-flex;
        margin-right: 0;
        right: 0;

    }

    .flex-header-img img {
        object-fit: contain;
        height: 70px;
        display: block;
        right: 0;
    }

    .div-header-links {
        top: 75%;
        width: 100%;
        height: 25%;
        position: absolute;
        background-color: white;

        text-align: center;
    }

    .ha:link, .ha:visited {
        background-color: #221F1F;
        color: white;
        padding: 6px 20px;
        text-align: center;
        text-decoration: none;
        display: inline;
        

    }

    .ha:hover, .ha:active {
        background-color: orange;

    }

    .home-section {
        top: 10%;
        width: 100%;
        height: 90%;
        position: absolute;
        background-color: bisque;
    }

    .page-footer {
        top: 90%;
        width: 100%;
        height: 5%;
        position: absolute;
        background-color: blue;
    }

    .lcircleinfo {


        background: radial-gradient(#d9d1dd, #e44b53);
        width: 120px;
        height: 120px;
        border-radius: 50%;
        text-align: center;
        line-height: 120px;
        font-size: 20px;
        animation: zoom-in-zoom-out 4s ease infinite;
        margin-left: auto;
        margin-right: auto;


    }

    .lborder {
        border-style: solid;
    }

    .responsive-img {
        width: 70%;
        height: auto;
    }

    #div1 {
        animation-timing-function: ease-in;
    }

    #div2 {
        animation-timing-function: ease-in;
    }

    #div3 {
        animation-timing-function: ease-in;
    }

    #div4 {
        animation-timing-function: ease-in;
    }

    #div5 {
        animation-timing-function: ease-in;
    }

    @keyframes myleft-move {
        from {
            left: 0px;
        }

        to {
            left: 40%;
        }
    }

    @keyframes myright-move {
        from {
            right: 0px;
        }

        to {
            left: 40%;
        }
    }

    .animated-left-div {
        width: 30%;
        height: 50px;
        background-color: red;
        font-weight: bold;
        position: relative;
        animation: myleft-move 20s infinite;
        margin-left: 0;
    }

    .animated-right-div {
        width: 30%;
        height: 50px;
        background-color: red;
        font-weight: bold;
        position: relative;
        animation: myright-move 20s infinite;
        margin-right: 0;
    }

    #container {
        width: 600px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .circle {
        border-radius: 50%;
        background-color: tomato;
        width: 150px;
        height: 150px;
        position: absolute;
        opacity: 0;
        animation: grow-s 4s infinite cubic-bezier(.36, .11, .89, .32);
    }

    @keyframes grow-s {
        from {
            transform: scale(.5, .5);
            opacity: .5;
        }

        to {
            transform: scale(2.5, 2.5);
            opacity: 0;
        }
    }

    .item {
        z-index: 100;

    }

    .item img {

        border-radius: 60%;
    }

    .swatch {
        display: block;
        text-align: center;
        position: relative;
        margin: auto;
       
      }
      .swatch div {
        width: 120px;
        height: 325px;
        position: absolute;
        color: white;
        top: 2px;
        border-radius: 5px;
        border-top: solid 2px rgba(0, 0, 0, 0.2);
        border-left: solid 3px rgba(255, 255, 255, 0.2);
        border-bottom: solid 3px rgba(0, 0, 0, 0.2);
        text-align: center;
        box-sizing: border-box;
        transform-origin: center 90%;
        display: inline-block;
        backface-visibility: hidden;
        margin-left: -35px;
        transform: rotate(0deg);
        overflow: auto;
      }
      .swatch div:before {
        width: 16px;
        height: 16px;
        content: "";
        background-color: #FFFFFF;
        display: inline-block;
        border-radius: 8px;
        bottom: 10px;
        position: absolute;
        margin-left: -8px;
        overflow: auto;
      }
      .swatch div:nth-child(1) {
        background-color: #815A8F;
        animation: swatch-purple-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      .swatch div:nth-child(2) {
        background-color: #6730EC;
        animation: swatch-blue-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      .swatch div:nth-child(3) {
        background-color: #9ED763;
        animation: swatch-green-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      .swatch div:nth-child(4) {
        background-color: #FBD400;
        animation: swatch-yellow-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      .swatch div:nth-child(5) {
        background-color: #FF9000;
        animation: swatch-orange-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      .swatch div:nth-child(6) {
        background-color: #F73F52;
        animation: swatch-red-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      @keyframes swatch-purple-motion {
        0% {
          transform: rotate(0deg);
        }
        30%,
        70% {
          transform: rotate(-65deg);
        }
        90%,
        10% {
          transform: rotate(0deg);
        }
      }
      @keyframes swatch-blue-motion {
        0% {
          transform: rotate(0deg);
        }
        30%,
        70% {
          transform: rotate(-40deg);
        }
        90%,
        10% {
          transform: rotate(0deg);
        }
      }
      @keyframes swatch-green-motion {
        0% {
          transform: rotate(0deg);
        }
        30%,
        70% {
          transform: rotate(-15deg);
        }
        90%,
        10% {
          transform: rotate(0deg);
        }
      }
      @keyframes swatch-yellow-motion {
        0% {
          transform: rotate(0deg);
        }
        30%,
        70% {
          transform: rotate(15deg);
        }
        90%,
        10% {
          transform: rotate(0deg);
        }
      }
      @keyframes swatch-orange-motion {
        0% {
          transform: rotate(0deg);
        }
        30%,
        70% {
          transform: rotate(40deg);
        }
        90%,
        10% {
          transform: rotate(0deg);
        }
      }
      @keyframes swatch-red-motion {
        0% {
          transform: rotate(0deg);
        }
        30%,
        70% {
          transform: rotate(65deg);
        }
        90%,
        10% {
          transform: rotate(0deg);
        }
      }
      
      .mobileHide { display: block;}
      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px){  .mobileHide { display: none;}}
      
      
      /* The Modal (background) */
.popup {
  /* display: none;  */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0%;
  width: 100%;
  height: 100%;
  
  background-color: rgba(0, 0, 0, 0.5); 
}


.popup2 {
  /* display: none;  */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  background-color: rgba(0, 0, 0, 0.5); 
}

/* Modal content (white box) */
.popup-content {
  position: relative;
  margin: auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  width: 80%;
 
  max-width: 1200px;

}

/* Close button */
.close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 50px;
  cursor: pointer;
}




.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
  color: #003300;
}

.accordion:after {
  content: '\02B';
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  text-align: left;
  font-size: 15px;
}



.w3-center button {

  background-color: #0c0251dc;
  color: #ffffff;

}

/* button :nth-child(odd) {
  background: grey;
} */

/*.w3-center .panel {*/
/*  background-color: #f5c367;*/
/*}*/


.newcolor {

    background-color: #2020eab3;
    color: #ffffff;
    
}

.mySlides {
      display: none;
    }

    img {
      vertical-align: middle;
    }

    /* Slideshow container */
    .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: auto;
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @keyframes fade {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .text {
        font-size: 11px
      }
    }