* {
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
}
/* - - - - - - - - - - - - - - Bloco Inicial 1ª section - - - - - - - - - - - - */
#header{
    height: 100vh;
    background-image: url(nuvem.jpeg);
    background-image: center;
    background-size: cover;
}
.container{
    margin-right: 100px;
    margin-left: 100px;

}
.logo{
    margin-top:30px;
    width: 120px;
}
.header-text{
    width: 80%;
    color: #fff;
    margin: 16% auto 0;
    text-align: center;
}
.header-text h2{
    margin-top: 50px;
    font-size: 64px;

}
.header-text p{
    font-size: 14px;
    margin: 20px 0 50px;
}
.header-text a{
    text-decoration: none;
    color: #fff;
    border: 1px solid #343335;
    display: block;
    padding: 10px;
    width: 180px;
    margin: auto;
    background:#343335;
    transition: .1s;
}
.header-text a:hover{
    background: transparent;
    color: rgb(0, 0, 0);

}
/* - - - - - - - - - - - - - - Bloco Inicial FINAL - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - Menu Side Bar - - - - - - - - - - - - */
#sideNav{
    width: 250px;
    height: 100vh;
    position: fixed;
    right: -250px;
    top: 0;
    background: #1312124b;
    z-index: 2;
    transition: .5s;
 }

 nav ul{
    margin-top: 100px;
 }
 nav ul li{
     list-style: none;
     margin: 30px 20px;

 }
 nav ul li a{
     text-decoration: none;
     color: #fff;
 }
 nav ul li a:hover{
      text-decoration: none;
      color: #333;
     
 }
 #menuBtn{
     width: 30px;
     position: fixed;
     right: 40px;
     top: 30px;
     z-index: 2;
     cursor:pointer;
 }
 /* - - - - - - - - - - - - - - Menu Side Bar - - - - - - - - - - - - */
 /* - - - - - - - - - - - - - - Serviços - - - - - - - - - - - - */
.content-boxmarcas{
   background: #f4f3ff;
   height: 100%;
   width: 100%;
 }

.content-boxmarcas{
    background: #f4f3ff;
    height: 100%;
    width: 100%;
}
.content-boxmarcas h1 {
   text-align: center;
   padding-top: 200px;
}
.content-boxmarcas h1::after{
   content: '';
   background: #ff4d73;
   display: block;
   height: 3px;
   width: 170px;
   margin: 20px auto 50px;
}
.marcas .icon{
   font-size: 30px;
   margin: 20px auto;
   padding: 12px;
   height: 70px;
   width: 70px;
   border: 1px solid #ff4d73;
   border-radius: 50%;
   color: #ff4d73;
}
.marcas p{
   font-size: 12px;
   margin-top: 10px;
   color: #777;
   padding: 20px;
}
.marcas span{
   color: #ff4d73;
   transition: 0.1s;
}
.marcas .col-md-3:hover{
   background: #ff4d73;
   cursor: pointer;
   color: #fff;
   box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.4);
   transition: 0.1s;

}
.marcas .col-md-3:hover .icon{
  border: 1px solid #fff;
  color: #fff;
}
.marcas .col-md-3:hover p{
   color: #fff;
}
.marcas .col-md-3:hover span{
   color: #fff;
}

/* - - - - - - - - - - - - - - Serviços2 - - - - - - - - - - - - */
.content-boxmarkting{
   background: #f4f3ff;
   height: 100%;
   width: 100%;
 }

.content-boxmarkting{
    background: #f4f3ff;
    height: 100%;
    width: 100%;
}
.content-boxmarkting h1 {
   text-align: center;
   padding-top: 200px;
}
.content-boxmarkting h1::after{
   content: '';
   background: #ff4d73;
   display: block;
   height: 3px;
   width: 170px;
   margin: 20px auto 50px;
}
.markting .icon{
   font-size: 30px;
   margin: 20px auto;
   padding: 12px;
   height: 70px;
   width: 70px;
   border: 1px solid #ff4d73;
   border-radius: 50%;
   color: #ff4d73;
}
.markting p{
   font-size: 12px;
   margin-top: 10px;
   color: #777;
   padding: 20px;
}
.markting span{
   color: #ff4d73;
   transition: 0.1s;
}
.markting .col-md-3:hover{
   background: #ff4d73;
   cursor: pointer;
   color: #fff;
   box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.4);
   transition: 0.1s;

}
.markting .col-md-3:hover .icon{
  border: 1px solid #fff;
  color: #fff;
}
.markting .col-md-3:hover p{
   color: #fff;
}
.markting .col-md-3:hover span{
   color: #fff;
}
/* - - - - - - - - - - - - - - Serviços3 - - - - - - - - - - - - */

.content-boxoutros{
   background: #f4f3ff;
   height: 100%;
   width: 100%;
 }

.content-boxoutros{
    background: #f4f3ff;
    height: 100%;
    width: 100%;
}
.content-boxoutros h1 {
   text-align: center;
   padding-top: 200px;
}
.content-boxoutros h1::after{
   content: '';
   background: #ff4d73;
   display: block;
   height: 3px;
   width: 170px;
   margin: 20px auto 50px;
}
.outros .icon{
   font-size: 30px;
   margin: 20px auto;
   padding: 12px;
   height: 70px;
   width: 70px;
   border: 1px solid #ff4d73;
   border-radius: 50%;
   color: #ff4d73;
}
.outros p{
   font-size: 12px;
   margin-top: 10px;
   color: #777;
   padding: 20px;
}
.outros span{
   color: #ff4d73;
   transition: 0.1s;
}
.outros .col-md-3:hover{
   background: #ff4d73;
   cursor: pointer;
   color: #fff;
   box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.4);
   transition: 0.1s;

}
.outros .col-md-3:hover .icon{
  border: 1px solid #fff;
  color: #fff;
}
.outros .col-md-3:hover p{
   color: #fff;
}
.outros .col-md-3:hover span{
   color: #fff;
}

/*------------------Features-----------------*/
.feature h2{
    margin-top: 30px;
}
.feature h2::after{
   content: '';
   background: #ff4d73;
   display: block;
   height: 3px;
   width: 100px;
   margin: 20px auto 50px;
   position: absolute;
   left: 17px;
}
.feature ul{
   margin-top: 30px;
   margin-left: 50px;
   list-style-type: none;
}
.feature ul li{
   line-height: 30px;
   font-size: 14px;
   position: relative;
}
.feature ul li::after{
   content: '';
   height: 7px;
   width: 7px;
   background: #ff4d73;
   transform: rotate(45deg);
   position: absolute;
   top: 17px;
   left: -25px;
}
.feature img{
   position: relative;
   margin-top: 100px;
   margin-left: 250px;
}

/*----------------------------------Footer----------------------*/
.footer h1{
     padding-top: 20px;
}
.contact-form{
   display:none;
   padding: 15px;
}
.form-control{
   border-radius: 0 !important;
   border: none !important;
   box-shadow: none !important;
}
::placeholder{
   font-size: 12px;
}
.contact-form button{
   border: none !important;
   background: #ff4d73 !important;
   box-shadow: none !important;
   border-radius: 0;
}
#enviar{
   border: none !important;
   background: #ff4d73 !important;
   box-shadow: none !important;
   border-radius: 0;
   }
#enviar a{
   text-decoration: none;
   background: transparent;
   color: #fff;
}

#enviar a:hover{
   text-decoration: none;
   background: transparent;
   color: rgb(0, 0, 0);
}


.contact-form a{
   background: transparent;
   color: #fff;
}

.contact-form a:hover{
   background: transparent;
   color: rgb(0, 0, 0);
}
.contact-info .follow{
  background-color: #fff;
  padding: 8px;
  margin: 15px;
}
.contact-info .fa{
   margin: 10px;
   font-size: 20px !important;
   color: #ff4d73 !important;
   font-weight: bold;
   padding-right: 20px;
}
.contact-info span{
   font-size: 14px;
   
}
.copywrite{
   text-align: center;
   font: 14px;
}
.fa-heart-o{
   color: red;
   font-size: 17px;
}
.footer hr{
   margin-top: 50px;
   background: #ff4d73;
}
.service,.feature,.footer{
   margin-top: 10%;
}








@media only screen and (max-width: 770px){
   #header{
      background-image:none;
      background-COLOR: #ff4d73;
   }
      .container{
         margin-right: auto;
         margin-left: auto;
         width: 0%;
         padding-right: 0px;
         padding-left: 0px;
         }
     .logo{
         margin-top:27px;
         width: 70px;
     }
     .header-text{
         width: 80%;
         color: #fff;
         margin: 40% auto 0;
         text-align: center;
     }
     .header-text h2{
         margin-top: 27px;
         font-size: 30px;
     
     }
     .header-text p{
         font-size: 12px;
         margin: 10px 0 25px;
     }
     .header-text a{
        font-size: 10px;
  }
     #menuBtn{
      width: 30px;
      right: 50px;
     }
     
     .feature img{
      width: 50px;
      margin-top: 20px;
      margin-left: 110px;
      
   }
   .copywrite{
      text-align: center;
      font-size: 8px;
   }

   .feature ul li{
      font-size: 10px;
      position: relative;
   } 
   .contact-info span{
      font-size: 10px;
    } 
    .contact-info .fa{
      margin: 5px;
      font-size: 20px !important;
      color: #ff4d73 !important;
      font-weight: bold;
      padding-right: 10px;
   }  
}