*{box-sizing: border-box;}
body{
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}
img{width: 100%;}
a{text-decoration: none;}
ul{padding: 0;}
main{
    min-height: 100vh;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
@media only screen and (max-width: 767px){
    main{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.side-bar{
    width: 500px;
    padding: 20px;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
@media only screen and (max-width: 992px){
    .side-bar{width: 40%;}
}
@media only screen and (max-width: 767px){
    .side-bar{width: 100%; margin: 0 auto;}
}
.side-bar img{
    width: 80%;
    max-width: 300px;
}
@media only screen and (max-width: 575px){
    .side-bar img{
        width: 80%;
        max-width: 200px;
    }
}
.side-bar h1{
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    color: #f4679b;
    margin: 15px auto 0;
}


.box-conteudo{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    background: #FBCA3F;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.box-conteudo h3{
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
}
@media only screen and (max-width: 767px){
    .box-conteudo h3{text-align: center;}
    .box-conteudo .box-text{text-align: center;}
}
@media only screen and (max-width: 575px){
    .box-conteudo h3{font-size: 30px;}
}
.box-conteudo .box-text p{
    
}
@media only screen and (max-width: 767px){
    .box-conteudo .midias{margin: 10px auto 0;}
}
.box-conteudo .midias li{
    list-style: none;
}
.box-conteudo .midias a{
    color: #000;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.box-conteudo .midias a:hover{
    color: #f4679b;
}
.box-conteudo .midias i{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 8px;
}
.box-conteudo .midias span{
    font-size: 16px;
    color: #000;
}
.box-conteudo .midias a:hover span{
    color: #f4679b;
}

.bt-whats{
    width: max-content;
}
@media only screen and (max-width: 767px){
    .bt-whats{margin: 0 auto;}
}
.bt-whats a{
    width: 100%;
    background: #62c780;
    padding: 10px 20px;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.bt-whats a:hover{
    background: #3b7f50;
}
.bt-whats i{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 8px;
}
.bt-whats span{
    font-size: 16px;
    color: #fff;
}
.bt-whats span small{
    font-size: 12px;
    margin-right: 6px;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}