/* Configuração de variáveis */
:root{
    --azul: #4971b8;
    --azul2: #162642;
    --roxo: #952a7c;
}

/* Fontes */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.eot');
    src: url('fonts/Ubuntu-Regular.eot') format('embedded-opentype'),
         url('fonts/Ubuntu-Regular.woff2') format('woff2'),
         url('fonts/Ubuntu-Regular.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu-Bold';
    src: url('fonts/Ubuntu-Bold.eot');
    src: url('fonts/Ubuntu-Bold.eot') format('embedded-opentype'),
         url('fonts/Ubuntu-Bold.woff2') format('woff2'),
         url('fonts/Ubuntu-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body, html{
    font-family: "Ubuntu";
    scroll-behavior: smooth !important;
}

.bold{
    font-weight: bold;
}

.container{
    max-width: 1240px;
}

/* Padrão de cores */
.azul{
    color: var(--azul);
}
.azul2{
    color: var(--azul2);
}
.roxo{
    color: var(--roxo);
}


/*Padrão de fundos*/
.bg-azul{
    background: var(--azul);
}
.bg-azul2{
    background: var(--azul2);
}
.bg-roxo{
    background: var(--roxo);
}



/* =================================================================== */
/* ====================== NORMALIZAÇÃO =============================== */
/* =================================================================== */

iframe{
    width:  100%;
}

div.style{
    width: 50px;
    height: 2px;
    background: var(--azul);
    margin-bottom:  15px;
}

.esconder{
    display: none;
}

/* Links */
a{
    color: var(--azul);
    transition: .3s;
    cursor: pointer;
}

a:hover{
    text-decoration: none;
    opacity: .5;
    color: var(--azul);
}

/* titulos */

.linkBranco a{
    color: #fff;
}

/* IMAGENS */
img{
    width: 100%;
}

figure{
    overflow: hidden;
    margin:  0;
}

figure img{
    transition: .3s;
}

figure:hover img{
    transform:  scale(1.2);
}

/* Listas */
ul.inline{
    padding:  0;
    margin:  0;
}

ul.inline li{
    list-style: none;
    display: inline-block;
}

/* Botões */
.btn{
    transition: .3s;
    border-radius: 5px;
    padding: 10px 20px;
}
.btn:hover{
    transform: scale(1.1);
}
.btn i{
    margin-right: 7px;
}
.btn span+i{
    margin-right: 0;
    margin-left: 7px;
}
.btn.bg-azul,.btn.bg-azul2,.btn.bg-roxo{
    color: #fff;
}

.caixa{
    background: #fff;
    padding: 30px 15px;
    box-shadow: 2px 2px 5px #00000033;
    border-radius: 5px;
}

.opa70{
    opacity: .7;
    transition: .3s;
}

.opa70:hover{
    opacity: 1;
}

.opa50{
    opacity: .5;
    transition: .3s;
}

.opa50:hover{
    opacity: 1;
}

section+section{
    margin-top: 70px;
}

section.gray{
    background: #f4f4f4;
    padding: 70px 0;
}

.margin70{
    margin-top: 70px;
}

.margin50{
    margin-top: 50px;
}

.margin30{
    margin-top: 30px;
}

.margin15{
    margin-top: 15px;
}

/* Anucio */
div.ad img{
    border-radius: 10px;
}

.invisible-lg{
    display: none;
}

/* Metadados */
.meta.autor{
/*  display:  flex;
    flex-wrap: wrap;*/
}
.meta.autor>div{
    display:  inline-block;
    width: auto;
}

.meta ul{
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.meta img{
    border-radius: 100%;
    max-width: 50px;
    margin-top: -30px;
    margin-right: 15px;
}

/*.meta li::before{
    content: "\2022";
    font-size: 24px;
    display: inline-block;
    position: relative;
    color: var(--azul);
    margin-right: 5px;
}*/

/* ==================== Controlers Slider == */
ul.slick-dots{
    position: relative;
    z-index: 1;
    display: block;
}

ul.slick-dots li{
    display: inline-block;
}

ul.slick-dots button{
    background: #fff;
    font-size: 0;
    padding: 5px;
    border-radius: 100%;
    border: none;
    margin: 5px;
}

.slick-active button{
    background: #ffffffaa !important;
}

/* Arrows */
.slick-arrow{
    display: inline-block;
    position: absolute;
    bottom: 50%;
    left: 40px;
    z-index: 2;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    text-align: center;
    padding-top: 5px;
    background: #ffffff55;
    border: none;
    color: #000;
    transition: .3s;
}

.slick-arrow:hover{
    background: #fff;
}

.slick-next.slick-arrow{
    left: initial;
    right: 40px;
}   

/* Cabeçalho */
header{
    position: fixed;
    top: 0;
    width: 100%;
    padding:  15px 0;
    z-index: 1;
    transition: .3s;
}
header.newNav{
    background: var(--azul2);
    box-shadow: 0 3px 3px #00000055;
}
header .logotipo a{
    opacity: 1 !important;
}
header img{
    max-width: 150px;
    transition: .3s;
}
header.newNav img{
    max-width: 110px;
}

header .logo, footer .logo{
    color: #fff;
    padding:  10px;
    border: 4px dashed #fff;
    display: inline-block;
    margin-bottom: 0 !important;
}

/* ========== MENU ========== */
header #menu ul{
    list-style: none;
    padding:  0;
    margin:  0;
}
header #menu li{
    display:  inline-block;
    padding: 20px 50px 20px 0;
}
header.newNav #menu li{
    padding: 10px 50px 10px 0;
}
header #menu li::before, footer .widget-links li::before{
    content: '';
    position: relative;
    top: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("img/asset-01.svg") no-repeat;
    background-position: 0 -20px;
    background-size: contain;
    margin-bottom: -5px;
    margin-right: 5px;
    margin-left: -20px;
    transition:  .3s;
    animation: rotacao 120s infinite;
}
header #menu li:hover::before{
    background-position: 0px;
}
header #menu li.active::before{
    display:  none !important;
}
header #menu a{
    color: #fff;
    opacity: .85;
}
header #menu a:hover, header #menu li:hover a{
    opacity: 1;
}
header .active a{
    padding: 10px;
    border-radius: 7px;
    background: var(--azul) !important;
    color: #fff !important;
}
header .btn{
    background: transparent;
    color:  #fff;
    margin-top: 12px;
}

/* Títulos das secções */

section .titulo{
    padding-left: 50px;
}

section .titulo::before{
    content: '';
    position: absolute;
    top: 25px;
    left: 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url("img/asset-15.svg") no-repeat;
    background-position: 0;
    background-size: contain;
    transition:  .3s;
}

section:hover .titulo::before{
    animation: rotacao 120s infinite;
}

/* Animação titulos */
@keyframes rotacao{
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(10440deg)
    }
}


/* ===================================================== */
/* ======================= HOME ======================== */
/* ===================================================== */

/* ========== Banner ========== */
#Banner{
    
}
#Banner .efeito{
    height: 700px;
    background: linear-gradient(to top right, var(--roxo), var(--azul));
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 120px;
    margin-bottom: -700px;
}
#Banner .imagem{
    height: 750px;
    background-size: cover;
    background-position: bottom;
    border-bottom-right-radius: 350px;
    border-bottom-left-radius: 120px;
    overflow: hidden;
}
#Banner .overlay{
    background: linear-gradient(to bottom, #0e35d877, #081ea1aa, #05124c);
    height: 100%;
}
#Banner .conteudo{
    padding-top: 270px;
    text-align: center;
    color: #fff;
}
#Banner .conteudo h1{
    font-weight: bold;
    font-size: 7vh;    
    text-shadow: 5px 5px 5px #00000077;
}
#Banner .conteudo a+a{
    margin-left: 15px;
}
#Banner .conteudo a:hover{
    opacity: 1;
}
#Banner .conteudo .btn{
    background: #ffffff55;
    color: #fff;
}
#Banner .conteudo a+a .btn{
    background: #fff;
    color: var(--azul2);
}
#Banner .conteudo a:hover .btn{
    background:  #fff;
    color:  var(--azul2);
}
#Banner .conteudo a+a:hover .btn{
    background: var(--azul);
    color:  #fff;
}

/* ==============  Banner Promocional == */
#Banner .container{
    padding-top: 170px;
}

#Banner .container p{
    font-size: 26px;
    color: #fff;
    margin-top: 10px;
}

#Banner .form-control {
    border: none;
    background: #4971b833;
    height: 50px;
}

#Banner .caixa{
    padding: 40px 30px;
}

#Banner .btn{
    background: #4971b8;
    color:  #fff;
    font-weight: bold;
}

/* =============================================== */
/* ============== SECÇÃO SOBRE NÓS =============== */
/* =============================================== */

#Sobre .numeros{
    width: 70%;
    background: #fff;
    box-shadow: 0 0 5px #00000055;
    padding: 45px;
    margin: 30px auto;
}

/* =============================================== */
/* ============== SECÇÃO SERVIÇOS ================ */
/* =============================================== */
#Servicos::before{
    content: '';
    display: block;
    position: relative;
    background: #fff url('img/asset-21-23.svg');
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 100px;
    top: -50px;
}

#Servicos{
    background: #e6e6e6;
    background-size: 100%;
    padding: 50px 0 70px 0;
    margin-top: 0;
}

#Servicos .servico{
    border-radius: 7px;
    overflow: hidden;
}

#Servicos .servico .overlay{
    background: linear-gradient(to bottom, #162642bb, #162642);
    height: 370px;
    color:  #fff;
}

#Servicos .servico .conteudo1, #Servicos .servico .conteudo2{
    padding: 30px;
}

#Servicos .servico .conteudo2{
    display: none;
    height: 100%;
    background: #162642;    
}

#Servicos .servico h4{
    font-size: 20px;
    text-transform: uppercase;
}

#Servicos .servico i{
    font-size: 48px;
    margin-top: 70px;
}

/* =============================================== */
/* ============== SECÇÃO DEPOIMENTOS ============= */
/* =============================================== */
#Depoimentos{
    background: #952a7c11;
    padding: 70px 0;
    margin: 0 0 -100px 0;
}

.sliderDepoimentos{
    text-align: center;
}

.sliderDepoimentos img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    padding: 10px;
    background: white;
    box-shadow: 0 0 5px #00000020;
    position: absolute;
    top: 60px;
    left: 15px;
}

.sliderDepoimentos .caixa-shadow{
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 45px;
    padding: 30px;
    padding-left: 80px;
    box-shadow: 0 0 3px #00000033;
    border-radius: 10px;
    background: #fff;
}

.sliderDepoimentos p{
    margin: 0;
}

#Depoimentos ul.slick-dots{
    margin-bottom: 30px;
}

#Depoimentos ul.slick-dots,ul.slick-dots li{
    display: inline-block;
}

#Depoimentos ul.slick-dots button{
    background: #216cb0;
    font-size: 0;
    padding: 5px;
    border-radius: 100%;
    border: none;
    margin: 5px;
}

#Depoimentos .slick-active button{
    background: #952a7c !important;
}

#Depoimentos ul.slick-dots{
    display: none !important;
}


/* =============================================== */
/* ============== SECÇÃO CLIENTES ================ */
/* =============================================== */

#Clientes img{
    filter: grayscale(100%);
    transition: .3s;
}

#Clientes img:hover{
    filter: none;
}

/* ===================================================== */
/* ======================= RODAPÉ ====================== */
/* ===================================================== */
footer{
    background: var(--azul2);
    margin-top:  100px;
    padding-top: 30px;
    color: #fff;
}
footer img{
    max-width: 150px;
}
footer a{
    color: #ffffff99;
}
footer a:hover{
    text-decoration: none;
    color: #fff;
    opacity: 1;
}

footer .redes a{
    color: #fff;
}
footer .redes a:hover{
    color: var(--azul);
    transform: scale(1.1);
}
footer .redes a:hover i{
    transform: scale(1.1);
}

footer li{
    padding: 5px 0;
    transition: .3s;
}
footer .redes li{
    display: inline-block;
    font-size: 20px;
}
footer .redes li+li{
    padding-left: 15px;
}
footer ul{
    padding: 0;
    list-style: none;
}
footer .widgets li:hover{
    padding-left: 15px;
}

footer .copy{
    padding: 30px 0;
    background: #0d1726;
    color: #ffffff99;
}


/* Formulário */
footer form input.form-control{
    height:  45px;
    width: 60%;
    display: inline-block;
    margin-top: 2px;
    margin-right: 15px;
}

/* Caixa de contacto */
footer .caixa{
    margin-top: -60px;
    color: #fff;
    background: var(--azul);
}
footer .caixa i{
    font-size: 45px;
    transform: rotateY(180deg);
}
footer .caixa .titulo{
    color: #fff;
    display: block;
    font-size: 30px;
    font-weight: 600;
}

footer .contacto span{
    color: #ffffff99;
    display: inline-block;
    margin-left: 10px;
}
footer .contacto i{
    font-size: 20px;
}

/* =====================================================
================= EFEITO DE REVELAÇÃO ==================
=======================================================*/

/* Para cima */
.slideRev {visibility:hidden;}
.slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

/* Para Esquerda */
.slideRevLeft {visibility:hidden;}
.slideLeft {
  /* The name of the animation */
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(70%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}

/* Para Direita */
.slideRevRight {visibility:hidden;}
.slideRight {
  /* The name of the animation */
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}




/* Pulso */

.pulso{
    animation: pulso .7s infinite;
}


@keyframes pulso{
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.0125)
    }

    50% {
        transform: scale(1.025)
    }

    75% {
        transform: scale(1.0125)
    }

    100% {
        transform: scale(1)
    }
}