@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,800;0,900;1,600&display=swap');
@font-face {
    font-family: 'intro_demoblack_caps';
    src: url('../fonts/introdemoblackcaps-webfont.woff2') format('woff2'),
         url('../fonts/introdemoblackcaps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body{
    font-family: 'Montserrat', sans-serif;
    background: url(../images/bg.png) repeat-x center top #808080;
}
header, footer, article{
    width: 100%;
    float: left;
}
header{   
   
    min-height: 300px;
    position: relative;
}
.navbar{
    padding: 24px 0;   
    z-index: 10;
    position: absolute;
    width: 100%;
    float: left;
    z-index: 8;
}
.navbar-expand-lg .navbar-nav .nav-link{
    color: #fff !important;
    font-size: 16px;
    padding: 10px  18px;
}
.redes-sociais{
    margin: 12px 0;
}
.redes-sociais .facebook{
    background: url(../images/icone-rede-sociais.png) no-repeat left;
    width: 21px;
    height: 21px;
    float: left;
}
.redes-sociais .instagram{
    background: url(../images/icone-rede-sociais.png) no-repeat center;
    width: 21px;
    height: 21px;
    float: left;
    margin-left:8px;
}
.redes-sociais .whatsapp{
    color: #fff !important;
    font-size: 15px;
    margin-left:80px;
    float: left;
    margin-left: 8px;
}
.redes-sociais .whatsapp span{
    background: url(../images/icone-rede-sociais.png) no-repeat right ;
    width: 21px;
    height: 21px;
    float: left;
    margin-right: 8px;
}
.redes-sociais .whatsapp p{
    margin: 0;
    float: left;
}
.whatsapp-rodape{
    font-size: 50px;
    color: #fff !important;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 60px;
    height: 60px;
    padding: 11px 14px;
    border-radius: 50px;
    background: #4caf50;
    z-index: 99999999;
    font-size: 18px;
}
.whatsapp-rodape .fa {
    float: left;
    font-size: 35px;
}
.sombra{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 11%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 11%, rgba(0,0,0,1) 100%);
    background: linear-gradient(0deg, rgba(255,255,255,0) 11%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
    height: 300px;
    float: left;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.carousel-inner{
    position: relative;
    z-index: 1;
    height: 700px;
}
.logo{
    background: url(../images/logo-dns.svg) no-repeat center ;
    width: 180px;
    height: 52px;
    float: left;
    text-indent: -500000px;
}
article{
    background: #808080;
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 11%, #808080 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 11%, #808080 100%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 11%, #808080 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
}
article, footer{
    position: relative;
}
.seg-container{
    width: 100%;
    float: left;
}
.titulo h2{    
    font-size: 40px;
    float: left;
    color: #000;
    content: "";
    font-family: 'intro_demoblack_caps';
    padding: 16px 40px;
    background:url(../images/d-titulo.svg) no-repeat center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    letter-spacing: -2px;
    margin-top: -40px; 
    margin-left: 15px; 
    position: relative;
    z-index: 4;   
}
.titulo h1{    
    font-size: 40px;
    float: left;
    color: #000;
    content: "";
    font-family: 'intro_demoblack_caps';
    padding: 16px 40px;
    background:url(../images/d-titulo.svg) no-repeat center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    letter-spacing: -2px;
    margin-top: -40px; 
    margin-left: 15px; 
    margin-bottom: 50px;
    position: relative;
    z-index: 5;   
}
.solucoes, .sobre-nos{
    background: #fff;
    width: 100%;
    float: left;
    padding: 0 75px 75px 75px;
    position: relative;
}

.solucoes .item{
    margin-top: 25px;
}
.solucoes .item figure{  
    width: 100%;
    height: 200px;
    float: left;
    background-color: #000;
    margin-bottom: 25px;
    position: relative;
    background-size: cover !important;
    -webkit-background-size: cover !important;
}
.solucoes .item .d1, .solucoes .item .d2, .solucoes .item .d3,  .solucoes .item .d4{
    width: 15px;
    height: 15px;
}
.solucoes .item h3{
    font-size: 22px;
    color: #000;
    font-weight: 800;
    text-align:center;
    margin-bottom: 0;
    letter-spacing: -1px;
}
.solucoes .item p{
    font-size: 15px;
    color: #000;
    text-align:center; 
    line-height: 18px;
}
.sobre-nos  .titulo h2{
    position: absolute;
   
}
.sobre-nos p{
    font-size: 15px;
    color: #000;
    text-align:justify; 
    line-height: 27px;
}
.sobre-nos figure{
    margin-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 3;
    height: 500px;
    background-size: cover !important;
    -webkit-background-size: cover !important;
}
.d1{
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    float: left;
    left: -1px;
    top: -1px;
    z-index: 3;
    clip-path: polygon(0 0, 0 100%, 100% 0);
}
.d2{
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    float: left;
    right: -1px;
    bottom: -1px;
    z-index: 3;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

}
.d3{
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    float: left;
    right: -1px;
    top: -1px;
    z-index: 3;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.d4{
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    float: left;
    left: -1px;
    bottom: -1px;
    z-index: 3;
    clip-path:polygon(100% 100%, 0% 100%, 0 0);
}
.dtl2{
    width: 50px;
    height: 50px;
    background: #808080;
    position: absolute;
    float: left;
    right: -1px;
    bottom: -1px;
    z-index: 3;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

}
.contato{
    width: 100%;
    float: left;
    background: #E6E6E6;
    padding: 75px;
    position: relative;
}

.endereco span{
    width: 23px;
    height:40px;
    float: left;
    margin-right: 8px;
    background: url(../images/icone-localizacao.svg) no-repeat center;
}
.telefone span{
    width: 14px;
    height:24px;
    float: left;
    margin-right: 8px;
    background: url(../images/icone-telefone.svg) no-repeat center;
}
.email span{
    width: 14px;
    height:24px;
    float: left;
    margin-right: 8px;
    background: url(../images/icone-email.svg) no-repeat center;
}
.contato p, .contato a, .fale-conosco p, .fale-conosco a {
    font-size: 15px;
    color: #000 !important;
    position: relative;
    width: 100%;
    float: left;
}
a, a:hover {
     text-decoration: none;
}
.whatsapp-suporte{
    width: 215px !important;
    float: left;
}
.mapa{
    width: 100%;
    float: left;
    height: 310px;
    position: relative;
}
.contato .d2, .contato .d1{
    background-color: #E6E6E6;
}

/*Institucional*/
.institucional{
    width: 100%;
    float: left;
    position: relative;
    background: #FFFFFF;
    padding: 0 75px 75px 75px;  
}
.institucional h2{
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 15px;
    color: #000;
    line-height: 27px;
}
.institucional p{
    font-size: 16px;
    color: #000;
    line-height: 27px;
}
.foto-principal{
    width: 100%;
    position: relative;
    float: left;
}
.galeria figure .d1, .galeria figure .d2, .galeria figure .d3,  .galeria figure .d4{
    width: 15px;
    height: 15px;
}
.galeria figure{
    margin-bottom: 30px;
    width: 100%;
    position: relative;
    z-index: 3;
    height: 200px;
}
/*Clientes*/
.clientes{
    width: 100%;
    float: left;
    background: #FFFFFF;
    position: relative;
    padding: 0 75px 75px 75px; 
}
.clientes .item figure{
    width: 100%;
    float: left;
    height: 180px;
    position: relative;
    margin: 0;
}
.clientes .item figure img{
    max-height: 98%;
    max-width: 98%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    position: absolute;
}
.clientes .item h2{
    font-size: 22px;
    color: #000;
    font-weight: 800;
    text-align:center;
    margin-bottom: 0;
    letter-spacing: -1px;
}
/*Fale Contato*/
.fale-conosco{
    width: 100%;
    float: left;
    position: relative;
    background: #FFFFFF;
    padding: 0 75px 75px 75px; 
}
.seg-contato{
    width: 300px;
    float: left;
}
.form-control{
    background:#E6E6E6 !important;
    border: none;
    font-size: 15px !important;
}
.btn-envio{
    padding: 14px 40px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.5px;
    background: url(../images/d-titulo.svg) no-repeat center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    border: none;
}
.mapa2{
    width: 100%;
    float: left;
    height: 500px;
    position: relative;
}
/*Rodape*/
footer{
    padding: 50px 0 40px 0;
    background: #808080;
}
footer .rodape{
    width: 100%;
    float: left;
    padding: 0 40px ;
}
footer p{
    color: #000;
    font-size: 18px;
    margin-bottom: 0;
}
footer .sm{
    background: url(../images/logo-studiomega.svg) no-repeat center;
    width: 100px;
    height: 54px;
    float: left;
    text-indent: -500000px;
}
.navbar-light .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    background-image:url(../images/menu.svg) !important ;
}

/*Aviso de Cookies*/

.box-cookies.hide {
    display: none !important;
  }
  
  .box-cookies {
    position: fixed;
    background: #fffffff2;;
    width: 90%;
    margin-left: 5%;
    z-index: 999999999999998;
    bottom: 10px;
    display: flex;

    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 40%);
    border: solid 1px #eeeeee;
  }
  
  .box-cookies .msg-cookies {
    
    font-size: 15px;
    color: #333;   
    line-height: 22px;
    margin: 0;
    padding: 15px;
  }
  .box-cookies .btn-cookies{
    margin: 15px;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
  }
  .box-cookies .btn-cookies {
    background:#F2AF0D;
    cursor: pointer;
    align-self: normal;
    font-weight: 800;
   
  }

  @media screen and (max-width: 600px) {
    .box-cookies {
      flex-direction: column;
    }
  } 

  /*MEDIA*/  

@media (min-width: 1400px){
    .container{ max-width: 1450px;  }
    
}

@media (max-width:1200px) {
    .carousel-inner { height: 550px;}
}
@media (max-width:990px) {
    .sobre-nos figure{ height: 300px;}
    .navbar{ background: #000;
        background: -moz-linear-gradient(180deg, rgb(0 0 0 / 96%) 25%, #00000008 100%);
        background: -webkit-linear-gradient(180deg, rgb(0 0 0 / 96%) 25%, #00000008 100%);
        background: linear-gradient(180deg, rgb(0 0 0 / 96%) 25%, #00000008 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
    }   
    .navbar-expand-lg .navbar-nav .nav-link{ text-align: center;}
    .carousel-inner{ height: auto; padding: 70px 0;}   
    .solucoes, .sobre-nos { padding: 0 45px 75px 45px; }
    .titulo h2 , .titulo h1 { font-size: 30px; }
    .redes-sociais .whatsapp p{ display: none;}
    body{ background: url(../images/bg-2.png) no-repeat center top #808080;}
    .carousel { padding-top: 100px;}
    .navbar-expand-lg .navbar-nav .nav-link { padding: 5px 18px; color: #000 !important; }
    .navbar-nav{ background:#ebebeb !important; margin: 20px 0 !important; padding: 20px;  }
    footer p{ text-align: center;}  
    
}
@media (max-width: 768px) {
    .seg-contato{ width: 100%; margin-bottom: 40px;}
    header {  min-height: 200px;}
    .mapa2{ height: 300px;}
}
@media (max-width: 450px) { 
    .logo{ width: 130px;  height: 37px;}
    .solucoes, .sobre-nos { padding: 0 25px 55px 25px; }
    .contato{ padding:50px 25px;}
    .institucional, .fale-conosco, .clientes{    padding: 0 25px 50px 25px;}
    .clientes .item figure{ height: 120px;}

}