/* CARREGAR FONTES */
@font-face{
	font-family: 'FRegular';
	src: url('font/Roboto-Regular.ttf');
}
@font-face{
	font-family: 'FBold';
	src: url('font/Roboto-Bold.ttf');
}
@font-face{
	font-family: 'FBlack';
	src: url('font/Roboto-Black.ttf');
}
@font-face{
	font-family: 'FAS';
	src: url('font/fa-solid-900.ttf');
}
@font-face{
	font-family: 'FAR';
	src: url('font/fa-regular-400.ttf');
}
@font-face{
	font-family: 'FAB';
	src: url('font/fa-brands-400.ttf');
}
/* CHAMAR FONTES */
body, .regular{
	font-family: 'FRegular';
}
.bold{
	font-family: 'Fbold';
}
.black{
	font-family: 'Fblack';
}
.fas{
	font-family: 'FAS';
}
.far{
	font-family: 'FAR';
}
.fab{
	font-family: 'FAB';
}

/* ================= NORMALIZAÇÃO */

/*Cores*/

.azul{
	color: #142840;/*Azul*/
}

.azulC{
	color: #386586;/*Azul Claro*/
}

/* SECÇÕES */
section + section{
	margin-top: 70px;
}

/* IMAGENS */
img{
	max-width: 100%;
}

/* LISTAS */
ul,ol{
    padding-left: 15px;
}

/* LISTA DE REDES E MENU */
ul.redes, nav ul{
	padding: 0;
	margin: 0;
}
ul.redes, ul.redes li,nav ul ,nav ul li{
	display: inline-block;
}
ul.redes li+li, nav ul li+li{
	margin-left: 15px;
	margin-top: 5px;
}

/* LINKS */
a:hover{
	text-decoration: none;
}

/* OVERLAY */
.overlay{
	background: #0000009f;
}
.overlayC{
	background: #ffffffdd;
}

/* OPACIDADE */
.opa50{
	opacity: .5;
}

/* TAMANHOS */
.s22{
	font-size: 22px;
}

/* MARGENS */

.margem15{
	margin-top: 15px;
}

.margem50{
	margin-top: 50px;
}

.margem30{
	margin-top: 30px;
}

.margem70{
	margin-top: 70px;
}

/* BOTÕES */
.btn-primary{
	background: #386586;
	border-color: #386586;
}

/* ================= PÁGINA INICIAL */

/* TOPO */
#topo{
	background: #f4f4f4; 
}
#topo *{
	color: #142840;/*Azul*/
}
#topo .row{
	height: 40px;
}

/* MENU */
#menu{
	background: #fff;
	box-shadow: 0 0 5px #00000033;
}
#menu .row{
	height: 80px;
	padding: 5px 0;
	font-weight: bold;
	text-transform: uppercase;
}
#menu a{
	color: #142840;/*Azul*/
}

/* BANNER ========================= */

#Banner {
	background: url('img/asset1b.png');
	color:  #fff;
	background-size: 100%;
	background-position: center;
}
#Banner .row{
	height: 570px;
}
/* BOTÕES */
#Banner .btn{
	margin-right: 15px;
}

/* SERVIÇOS ====================== */

#Servicos{
	background: #f4f4f4;
	padding:  70px 0;
	/*margin-bottom: -70px;*/
}

/* CAIXAS */
#Servicos article{
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
}
#Servicos article .body{
	padding: 15px;
}

/* PROCEDIMENTOS ======================== */

#Procedimentos{
	background: url('img/asset2.jpg');
	margin: 0;
	background-position: right;
}

#Procedimentos .overlayC{
	padding:  70px 0;
	min-height: 500px;
}

#Procedimentos i{
	background: #386586; /*Azul Claro*/
	font-size: 26px;
	color:  #fff;
	padding: 30px;
	border-radius: 15px;
}

#Procedimentos .row{
	background: url('img/procedimentos.png');
	background-position:  center 15px;
	background-size: 100%;
	background-repeat: no-repeat;
}

/* RODAPÉ ================================== */

footer{
	background-color: #142840;/*Azul*/
	padding: 70px 0 0 0;
	background-image: url('img/pattern.png');
	color: #fff;
	margin-top: 70px;
	background-size: contain;
}

footer *{
	color:  #fff;
}

footer img{
	max-width: 250px;
}

footer ul{
	list-style: none;
	padding-left: 0;
}

footer .base{
	background: #142840;/*Azul*/
	margin-top: 70px;
	padding: 15px;
}



/* =================================================
==================== EFEITOS =======================
================================================= */

/* 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)
    }
}

/* =====================================================
================= 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%);
  }
}

/*======================================= */
/* ============= EFEITO CARTÃO SERVIÇO == */
.flip-card {
  background-color: #fff;
}

.flip-card-inner {
  padding: 30px;
  position: relative;
  width: 100%;
  height: 300px;
  text-align: center;
  transform-style: preserve-3d;
}

.flip-card-front, .row>div .flip-card-front{
    display: block;
    transition: .3s;
}

.flip-card-back, .row>div .flip-card-back{
    display: none;
    transition: .3s;
}

 .row>div{
    transition: .3s;
}
 .row>div:hover .flip-card-front {
    display: none;
}

.row>div:hover .flip-card-back {
    display: block;
}

/*.flip-card-front, .flip-card-back {*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  top: 0;*/
/*  -webkit-backface-visibility: hidden;*/
/*  backface-visibility: hidden;*/
/*}*/