/* 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 */

/* Imagens */
img{
    max-width: 100%;
    transition: .3s;
}

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

/* Botões */
.btn, .form-control{
    border-radius: 0;  
    padding: 10px 15px;
}

/* MARGENS */

.margem15{
	margin-top: 15px;
}

.margem50{
	margin-top: 50px;
}

.margem30{
	margin-top: 30px;
}

.margem70{
	margin-top: 70px;
}

/* Cores */
.red{
    color: #4C0303;
}

.redC{
    color: #7D0404;
}

.yellow{
    color: #FB8600;
}

 /* Links */
 a{
    color: initial;
    text-decoration: none;
 }
 a:hover{
     text-decoration: none;
     color: #FB8600;
 }
 
 /* Efeito das imagens */
 figure{
    overflow: hidden;
    transition: .3s;
    max-height: 170px;
 }
 figure:hover img{
    max-width: 110%; 
 }

/* ================= HEADER */
header{
    
}
header img, footer img{
    max-width: 130px;
    padding: 10px;
}
header .topo{
    padding: 10px;
    padding-right: 20px;
    border-left: 1px solid #4C0303;
    border-bottom: 1px solid #4C0303;
}
header .menu{
    padding-right: 10px;
    border-left: 1px solid #4C0303;
}
header nav ul{
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
header nav li{
    display: inline-block;
    padding: 10px;
}

 /* Menu */
nav{
    font-weight: bold;
} 
nav a{
    text-decoration: none;
    color: #000;
    transition: .3s;
}
nav a:hover{
    color: #7D0404;
    text-decoration: none;
}
/* Nav Suspensa*/
#navpanel{
    display: none;
}

#navpanel li{
    text-align: left;
}
#navpanel a{
    display: block;
    padding: 15px;
}
#navpanel li+li{
    border-top: solid 1px #f4f4f4;
}

/* ============================ BANNER == */
#Banner{
    min-height: 600px;
    background: url('img/bannerr.jpg');
    background-attachment: fixed;
    color: #fff;
    animation: zoomBanner 45s infinite;
}
#Banner img{
    width: 80%;
}
#Banner a+.btn{
    margin-left: 15px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn:hover{
    background:  #7D0404 !important;
    color: #fff !important;
}

/* Banner-single */
#Banner-single{
    padding-top: 130px;
    text-align: center;
    min-height: 300px;
    background: url('img/bannerr.jpg');
    background-attachment: fixed;
    color: #fff;
}

/* Efeito do banner */
@keyframes zoomBanner{
    0% {
        background-size: 100%;
        background-position: left;
    }

    25% {
        background-size: 135%;
        background-position: right;
    }

    50% {
        background-size: 120%;
        background-position: center;
    }

    75% {
        background-size: 140%;
        background-position: right;
    }

    100% {
        background-size: 100%;
        background-position: left;
    }
}


/* ============================ About == */
#Sobre .btn, #Contacto .btn, header .btn{
    background: #4C0303;
    color: #fff;
}

/*============================ Portfólio == */
#Portfolio a{
    color: #fff;
    text-decoration: none;
}

#Portfolio .row>div{
    background-size: cover;
    background-position: center;
    color: #fff;
}
#Portfolio .overlay{
    background: #4C030399;
    height: 200px;
    padding: 85px;
    margin: 0 -15px;
}
#Portfolio .overlay.amarelo{
    background: #FB860099;
}

/* ============================ CONTACTO == */

#Contacto ul, footer ul{
    list-style: none;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* ============================ Footer == */
footer{
    margin-top: 70px;
    background: #4C0303;
    color: #fff !important;
    padding-bottom: 15px;
}

footer .container{
    padding-top: 70px;
    padding-bottom: 70px;
}

footer .redes li{
    display: inline-block;
    margin-right: 15px;
}

footer li{
    margin-top: 15px;
}

footer i{
    background: #00000055;
    color: #fff;
}

footer a {
    color: #fff;
}


/* =====================================================
================= RESPONSIVIDADE  ======================
=======================================================*/
/* Dispositivos Médios e Largos*/
@media screen and (min-width: 768px){

	.invisivel-desktop{
        display: none;
    }

}

/* Celulares */
@media screen and (max-width: 768px){

    .invisivel-mobile{
        display: none;
    }
    
    body, input{
        text-align: center;
    }
    
    #Banner{
        min-height: 430px;
    }
    
    #Banner, #Banner-single{
        background-attachment: none;
        background-size: cover;
        background-repeat: no-repeat;
        animation: none;
    }
    
    #Banner a+.btn{
        margin-left: 0;
        margin-top: 15px;
        display: block;
    }
    
    #Banner .botoes{
        texte-align: center
    }
    
    #Banner h1{
        margin-top: 100px;
        font-size: 35px;
    }
    
    #Sobre img, footer h3{
        margin-top: 30px;
        display: block;
    }
    
    #Contacto form{
        margin-top: 50px;
    }
    
     /* Efeito das imagens */
     figure{
        overflow: hidden;
        transition: .3s;
        max-height: 100%;
     }
     figure:hover img{
        max-width: 100%; 
     }

}



/* =================================================
==================== 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;*/
/*}*/