Teamcontact.css

body{
  font: 400 15px Lato, sans-serif;
  font-size:10vw;
  line-height: 1.8;
  color: #818181;
  margin:0;
  padding:0;
}
@media only screen and (min-width: 601px) {
  div.Team-contact {
    font-size: 10px;
    padding: 0px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.Team-contact {
    font-size: 10px;
    padding: 0px;
  }
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
.Team-contact{
  color: white;
  background: linear-gradient(to left,#FF69B4, #11171d, #2E8B57, #800080);
  background-size: 400% 400%;
  
}

.img-box-1{
  height: 300px;
  background: #D3D3D3;
  
  border-radius: 5px;
}

.img-box-2{
  height: 300px;
  background: #D3D3D3;
  
  border-radius: 5px;
}

.img-box-3{
  height: 300px;
  background: #D3D3D3;
  border-radius: 5px;
}
.img-box-4{
  height: 300px;
  background: #D3D3D3;
  border-radius: 5px;
}
.img-box-5{
  height: 300px;
  background: #D3D3D3;
  border-radius: 5px;
}
.img-box-6{
  height: 300px;
  background: #D3D3D3;
  border-radius: 5px;
}
.img-box-7{
  height: 300px;
  background: #D3D3D3; /* fallback for old browsers */
  
  border-radius: 5px;
}
.img-box-8{
  height: 300px;
  background: #D3D3D3; /* fallback for old browsers */
  
  border-radius: 5px;
}
.box {
    background-color: ;
    width: 30%;
    display: inline-block;
    margin:10px 0;
    border-radius: 5px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
}
.box{
  border-bottom: 3px solid #fff;
  
}
.text {
    font-size:10vw;
    padding: 30px 0;
    width: auto;
    height: auto;
    color: #000000;
    font-weight:bold;
    text-align:center;
}
#container {
    margin: 0 auto;
    max-width: 850px;
    margin-top: 150px;
    height: auto;
    white-space:nowrap;
    text-align:center;
}

.box:focus,
.box:hover {
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.16);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
}

.team-1{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/Ambuj.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}

.team-2{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/shahab.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}

.team-3{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/Avanti.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}
.team-4{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/Adarsh.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}
.team-5{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/gupt.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}
.team-6{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/Akhila.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}
.team-7{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/Nandini.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}
.team-8{
  position: relative;
  margin: 0 auto;
  top: 70px;
  background-image: url(assets/images/Rishivanth.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 70%;
  border-radius: 100%;
}
.text {
    padding: 30px 0;
    width: auto;
    height: auto;
    color: #fff;
    font-weight:bold;
    text-align:center;
}


  @-webkit-keyframes colorchange {
      0% {
        
        color: darkviolet;
      }
      
      10% {
        
        color: #fa3380;
      }
      
      20% {
        
        color: rgba(2,179,228,0.8);
      }
      
      30% {
        
        color: rgba(2,204,186,0.8);
      }
      
      40% {
        
        color: rgba(169,81,237,0.8);
      }
      
      50% {
        
        color: rgba(255,162,52,0.8);
      }
      
      60% {
        
        color: rgba(255,84,131,0.8);
      }
      
      70% {
        
        color: deepskyblue;
      }
      80% {
     
        color: purple;
      }
      
      90% {
     
        color: lightpink;
      }
      
      100% {
        
        color: rgba(125,151,173,0.8);
      }
    }




/*  FOLLOW*/


@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}