.contain{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    animation: animate 16s ease-in-out infinite;
    background-size: cover;
    }
    @keyframes animate {
      0%,100%{
        background-image: url(../ICONS/homep.jpg);
      }
      25%{
        background-image: url(../ICONS/hash.jpg);
      }
      50%{
        background-image: url(../ICONS/kush.jpg);
      }
      75%{
        background-image: url(../ICONS/pey.jpg);
      }
    }

    
@media screen and (max-width: 600px) {
    .contain{
      position: relative;
      height: 60vh;
      width: auto;
    }
}@media screen and (max-width: 720px) {
    .contain{
      position: relative;
      height: 65vh;
      width: auto;
    }
}
@media screen and (max-width: 820px) {
    .contain{
      position: relative;
      height: 70vh;
      width: auto;
    }
}
 
#active{
  text-decoration: underline;
}

img {
    vertical-align: middle;
  }
  
  
/* Position the image container (needed to position the left and right arrows) */
.containe {
    position: relative;
    width: 60%;
    margin: auto;
    padding-top: 30px;
  }
  /* Hide the images by default */
.mySlides {
  display: none;
 margin-left: 35%;
 width: 100%;
  
}


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

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: black;
  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;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px ;
    color: white;
    height: 20px;
  }
  row:after {
    content: "";
    display: table;
    clear: both;
  }
  
/* Six columns side by side */
.column {
    float: left;
    width: 16.66%;
  }
/* Add a transparency effect for thumnbail images */
.demo {
    opacity: 0.6;
  }
  
.active,
.demo:hover {
  opacity: 1;
}
.cent{
  width: 80%;
  margin: auto;
  font-size: 20px;
  font-weight: bold;
}      

/* tabs*/
.tab {
  overflow: hidden;
  
 
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

#header__account a:hover{
  color: blue;
}

 @media screen and (max-width: 767px) {
     #hide{
         display:none;
     }
      #hide1{
         display:none;
     }
 }