/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 200 to 800 */

/*.dosis-<uniquifier> {
  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

*{

  box-sizing: border-box;

}

#coming-soon {

  width: 100%;
  height: auto;
  display: block;
  float: left;
  padding-top: 25vh;


}

.col-left{

  width: 50%;
  height: auto;
  float: left;

}

.col-left img{

  margin: auto;
  display: block;

}

.col-right{

  width: 50%;
  height: auto;
  float: right;
  display: block;
  padding-top: 10vh;

}

.col-right h1{

  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: block;
  font-size: 42px;
  text-align: center;
  color: #181317;

}

.col-right h2{

  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: block;
  font-size: 38px;
  text-align: center;
  color: #181317;

}

#section-bottom{

  width: 100%;
  height: auto;
  display: block;
  float: left;
  padding-top: 20vh;

}

#section-bottom h3{

  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: block;
  font-size: 38px;
  text-align: center;
  color: #181317;

}

#element{

  color: #e64a53;
  font-style: normal;
  
}

/* Medium devices (landscape tablets, 768px and down) */
@media only screen and (max-width: 768px) {


  .col-left{

    width: 100%;
    height: auto;
    float: left;
  
  }

  .col-right{

    width: 100%;
    height: auto;
    float: left;
    display: block;
    padding-top: 10vh;
  
  }

  #section-bottom{

    width: 100%;
    height: auto;
    display: block;
    float: left;
    padding-top: 10vh;
  
  }
  
  #section-bottom h3{
  
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    display: block;
    font-size: 32px;
    text-align: left;
    color: #181317;
  
  }


}