body{
  font-family: 'Poppins',  'Montserrat', sans-serif;
  color:black;
}

.hero{
  background-color:rgba(251,255,255,0.9); 
  padding:30px 200px 30px 100px; 
  max-width:700px; 
  color:black; 
  margin:0;
  margin-top:5%;
}



.main-img{
   width:550px;
}

@media only screen and (max-width: 768px) {
    .main-img{
      width:100%;
    }
    .hero{
      padding:20px 10px; 
    }
  }

a.btn.btn-primary {    padding: 10px 28px; color:black;   border-radius: 0;    background: transparent;    border: 2px solid black; transition: 0.5s;    font-weight: bold;transition: ease-out 0.4s; font-size:18px;}
a.btn.btn-primary:hover {    box-shadow: inset 0 0 0 50px transparent; }

a.btn2.btn2-primary {    padding: 10px 28px; color:black;   border-radius: 0;    background: transparent;    border: 2px solid black; transition: 0.5s;    font-weight: bold;transition: ease-out 0.4s; font-size:18px;}
a.btn2.btn2-primary:hover {    box-shadow: inset 0 0 0 50px transparent; }

.animatebtn2 {
  color: black;
  cursor: pointer;
  font-size: 22px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  width: 100%;
}
@media (min-width: 600px) {
  .animatebtn2 {
    margin: 0 1em 2em;
  }
}
.animatebtn2:hover {
  text-decoration: none;
  color: black;
}

.animatebtn-2 {
  letter-spacing: 0;
}

.animatebtn-2:hover,
.animatebtn-2:active {
  letter-spacing: 5px;
}

.animatebtn-2:after,
.animatebtn-2:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
  transition: all 280ms ease-in-out;
  width: 50%;
}

.animatebtn-2:hover:after,
.animatebtn-2:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #eae4de;
  color: black;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 22%;
  margin-left:5px;
}

.animatebtn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 22%;
}



.animatebtn3 {
  color: #95a9be;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  width: 100%;
}
@media (min-width: 600px) {
  .animatebtn3 {
    margin: 0 1em 2em;
  }
}
.animatebtn3:hover {
  text-decoration: none;
  color:#95a9be;
}

.animatebtn-3 {
  letter-spacing: 0;
}

.animatebtn-3:hover,
.animatebtn-3:active {
  letter-spacing: 5px;
}

.animatebtn-3:after,
.animatebtn-3:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
  transition: all 280ms ease-in-out;
  width: 50%;
}

.animatebtn-3:hover:after,
.animatebtn-3:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #95a9be;
  color:#95a9be;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 15%;
}

.animatebtn-3:hover:before {
  bottom: auto;
  top: 0;
  width: 15%;
}

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

.fade-in {
  opacity:0;
  opacity: 1 9; /*just in case ie*/
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:3s;
  -moz-animation-duration:3s;
  animation-duration:3s;
}

.fade-in.one {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.fade-in.two {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.fade-in.three {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-delay: 4s;
}

@media only screen and (max-width: 768px) 
           {
        .centered h1{
          font-size:20px;
      }

        .fade-in.two{
          padding-left:50px;  
      }
        .fade-in.three{
          padding-left:75px;
      }

   }

@media only screen and (max-width: 600px) 
               {

           .centered h1{
               top: 25%;
               left: 35%;
               transform: translate(-50%, -50%);
               font-size:10px;
  
}
          .fade-in.two{
          padding-left:20px;  
      }
        .fade-in.three{
          padding-left:30px;
      }
}