body {


  font-family: "Century Gothic", 'Lato', sans-serif;


}


img {





    width: 550px!important;


}


a {


  text-decoration: none;


}


.et-hero-tabs,


.et-slide {


  display: flex;


  flex-direction: column;


  justify-content: center;


  align-items: center;


  height:752px;


  position: relative;


  background-color:rgba(255, 255, 255, 0.75);


  text-align: center;


}


.et-hero-tabs h1,


.et-slide h1 {


  font-size: 2rem;


  margin: 25px;


  letter-spacing: 1rem;


  color:black;


}





.et-hero-tabs h3,


.et-slide h3 {


  font-size: 1rem;


  letter-spacing: 0.3rem;


  opacity: 99.6;


}


.et-slide h3 a {


color:red;


}


#tab-angular{


height:auto;








}


#tab-other{


height:auto;








}


#tab-react{


height:auto;


color:black;


z-index:9;


 font-weight:bold;





}


#tab-react img{


margin-top:15px;


}


#tab-flexbox{


height:auto;


padding-top:90px;


}


#tab-flexbox img{


margin-top:85px;	


width:450px;





}


.et-hero-tabs-container {


  display: flex;


  flex-direction: row;


  position: absolute;


  bottom: 0;


  width: 100%;


  height: 70px;


  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);


  background: #fff;


  z-index: 10;


}


.et-hero-tabs-container--top {


  position: fixed;


  top: 0;


  z-index:100px;


}





.et-hero-tab {


  display: flex;


  justify-content: center;


  align-items: center;


  flex: 1;


  color: #000;


  letter-spacing: 0.1rem;


  transition: all 0.5s ease;


  font-size: 0.8rem;


}


.et-hero-tab:hover {


  color: white;


  background:black;


  transition: all 0.5s ease;


}





.et-hero-tab-slider {


  position: absolute;


  bottom: 0;


  width: 0;


  height: 6px;


  background: black;


  transition: left 0.3s ease;


}





@media (min-width: 800px) {


  .et-hero-tabs h1,


  .et-slide h1 {


    font-size: 3rem;


  }


  .et-hero-tabs h3,


  .et-slide h3 {


    font-size: 1rem;


  }





  .et-hero-tab {


    font-size: 1rem;


  }


}