/* ==========================================================================
    DEFINIÇÃO DE CONSTANTES
========================================================================== */
:root {
    --input-form-border: #d4d4d4;
    --cor-titulos-section: #CDC2B6;
}


/* ==========================================================================
    SECTION - SLIDER
========================================================================== */
/*.navbar.navbar-dark {
    
    box-shadow: none;
}

.hamburger,
.hamburger:before,
.hamburger:after {
    background-color: var(--cor-textos);
}*/

a.nav-link {
    color: var(--cor-textos);
}

a.nav-link:hover {
    color: var(--cor-3);
}



#header-slider {
    overflow: hidden;
    /* elimina o scroll possivel de ser aplicado no header-slider*/
    position: relative;
    /* necessário pois irá haver um caption com position absolute mais tarde*/
}

#header-slider .carousel-caption {
    
    /*
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: left;
    color: #FFF;
    margin-top: -100px;*/
    /* ajuda a subir os conteudos para os centrar verticalmente*/
    /* com o z-index superior, conseguimos fazer com que a DIV que contém a legenda fique subreposta à camada criada pela seletor .carousel-fade .carousel-inner .item:after que cria um sobreado sobre a imagem de fundo a publicar no slider */
    z-index: 10;
    text-align: left;

    transform: translateY(-45%);
    bottom: 0;
    /* top: 55%; */
    /* top: 65%; */
    /* top: 61%; */

    top: 54%;
}

#header-slider .carousel-caption h1 {
    /* font-size: 40px; */
    /* font-size: 32px; */
    /* margin-bottom: 30px; */
    /* text-transform: uppercase; */
    /* text-shadow: 1px 0px 5px #333; */
    font-family: 'Roboto-Bold',
    sans-serif;
    font-style: normal;

    text-align: left;
    color: #FFF;

    font-size: 42px;
    line-height: 50px;
    text-shadow: 0 1px 4px #8e8e8e;
    /* text-shadow: 0px 3px 6px #636363; */
}

#header-slider .carousel-caption p {
    /* font-size: 17px; */
    color: #FFF;
    /* text-shadow: 1px 2px 10px #333; */
    
    font-family: 'Roboto-Medium', sans-serif;
    margin-top: 25px;

    text-align: left;
    color:#FFF;

    font-size: 20px;
    line-height: 30px;

    /* text-shadow: 0 3px 10px var(--cor-botao-branco-sombra); */
    text-shadow: 0 1px 4px #696969;
    /* text-shadow: 1px 3px 5px #636363; */
}

#header-slider .btn-ver-mais {
    margin-top: 20px;

    /*
    text-transform: uppercase;
    font-size: 16px;
    padding: 7px 20px;
    border: 1px solid var(--cor-3);
    border-radius: 2px;
    color: #FFF;
    background-color: var(--cor-3);
    */

    font-family: 'Roboto-Medium', sans-serif;
    font-size: 18px;
    padding: 16px 22px;
    border: 1px solid var(--cor-botao-branco-border);
    border-radius: 30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -ms-border-radius:30px;
    -o-border-radius:30px;
    box-shadow: 0 3px 6px var(--cor-botao-branco-sombra);
    background-color: #FFF;
    color: var(--cor-botao-branco-textos);
}

#header-slider .btn-ver-mais:hover {
    /* color: var(--cor-3);
    background-color: transparent;
    border-color: var(--cor-3); */

    /* color: #FFF;
    background-color: var(--cor-3);
    border: 1px solid var(--cor-botao-branco-border); */

    color: var(--cor-3);
    background-color: #FFF;
    border: 1px solid var(--cor-botao-branco-border);
    
    
}

/* Header Slider, Carousel Configs */

/*
inspired from http://codepen.io/Rowno/pen/Afykb
*/

/* Não remover, usado para o slider Default */
#header-slider .carousel-inner .carousel-1 {
    background-image: url(../../../imagens/header-slider/tear.jpg);
}
/*
#header-slider .carousel-inner .carousel-2 {
    background-image: url(../../../imagens/header-slider/1B.jpg);
}

#header-slider .carousel-inner .carousel-3 {
    background-image: url(../../../imagens/header-slider/2b.jpg);
} */

.carousel .carousel-inner .carousel-item {
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    height: 100vh;
    height: 72vh; /* Temporario */
    height: 65vh; /* Temporario */
    min-height: 650px;
    /* background: no-repeat center center scroll; */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*
CRIA O OVERLAY
*/
.carousel .carousel-inner .carousel-item:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* background: rgba(0, 0, 0, .3); */
    /* background: rgba(70,70,70,.5); */
    /* background: rgba(240,240,240,.5); */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+31,0.7+61,0+100 */
    /* background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 20%, rgba(255, 255, 255, 0.75) 70%, rgba(255, 255, 255, 0.3) 100%); */
    /* FF3.6-15 */
    /* background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 20%, rgba(255, 255, 255, 0.75) 70%, rgba(255, 255, 255, 0.3) 100%); */
    /* Chrome10-25,Safari5.1-6 */
    /* background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 20%, rgba(255, 255, 255, 0.75) 70%, rgba(255, 255, 255, 0.3) 100%); */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); */
    /* IE6-9 */

    background: rgba(0, 0, 0, .1);
}




#header-slider .box-caption {
    /* width: 181px; */
    position: relative;
    /* right: 0; */
    left: 0;
    /* width: 45%; */
    /* width: 35%; */

    width: 45%;
    float: right;
    /* float: left; */

    /* border: 1px solid blue; */
}

#header-slider .box-caption span.linha {
    border: none;
    border-bottom: 1px solid #FFF;
    position: absolute;
    /* right: 0;
    top: 200px; */
    display: inline-block;
    height: 3px;
    width: 2000px;

    /* right: 0;
    border-bottom: 1px solid #4d4d4d; */
}

.carousel .carousel-inner .active {
    opacity: 1;
}

.carousel .carousel-inner .active.left,
.carousel .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel .carousel-inner .next.left,
.carousel .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-indicators .active {
    /*background-color: #fff;*/
    background-color: var(--cor-3);
}

.carousel-indicators li {
    /*background-color: rgba(255,255,255,.5);*/
    /* background-color: rgba(36, 194, 169, .5); */
    background-color: #FFF;
}

#header-slider .carousel-control-left,
#header-slider .carousel-control-right {
    position: absolute;
    top: 45%;
    height: 70px;
    /* altura da caixa de clique */
    width: 70px;
    /* comprimento da caixa de clique */
    line-height: 65px;
    /* ajuda a centralizar a seta de clique dentro da caixa */
    font-size: 40px;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 20;
    color: #FFF;
    /* hiperligação fica azul ao invés de branco */
    /* color: var(--cor-3); */
    color: #FFF;
}

#header-slider .carousel-control-left {
    left: -70px;
    /* oculta a seta, esta medida é igual à usada no height: 70px; | width: 70px; anterior */
}

#header-slider .carousel-control-right {
    right: -70px;
    /* igual ao caso anterior */
}

#header-slider .carousel-control-left:hover,
#header-slider .carousel-control-right:hover {
    color: #FFF;
    color: var(--cor-3);
}

#header-slider:hover .carousel-control-left {
    left: 30px;
    /* avanço da seta em relação à margem esq depois de visivel */
}

#header-slider:hover .carousel-control-right {
    right: 30px;
    /* avanço da seta em relação à margem dir depois de visivel */
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/

@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel .carousel-inner>.carousel-item.next,
    .carousel .carousel-inner>.carousel-item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel .carousel-inner>.carousel-item.prev,
    .carousel .carousel-inner>.carousel-item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel .carousel-inner>.carousel-item.next.left,
    .carousel .carousel-inner>.carousel-item.prev.right,
    .carousel .carousel-inner>.carousel-item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}











/*############################################################################

        SOLUÇÕES - TEMPORÁRIO

############################################################################*/
#home-page-content {
    padding-top: 76px;
    margin-bottom: 30px;
}

#home-page-content .bg-white {
    background-color: var(--cor-fundo-branco);
    position: relative;
}

#home-page-content .bg-white.historia {
    padding-bottom: 115px;
}

#home-page-content .bg-ghostwhite {
    background-color: var(--cor-fundo-branco-ghost);
    position: relative;
}

#home-page-content .bg-ghostwhite.bg-fundo-1 {
    background-color: var(--cor-fundo-branco-ghost);
    background-image: url(../../../imagens/home-page/identityfc_homepage.jpg);

    min-height: 550px;
    /* background: no-repeat center center scroll; */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

#home-page-content h2 {
    margin-bottom: 20px;
}

/* #home-page-content .img-poster-video {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
} */

#home-page-content span.legenda-video {
    margin-top: 10px;
    display: block;
    text-align: center;
    text-align: left;
    font-family: 'Roboto-Medium', sans-serif;
    color: var(--cor-subtitulos);
    font-size: 14px;
    line-height: 20px;
}

span.legenda-video a {
    color: var(--cor-3);
    text-decoration: none;
}

span.legenda-video a:hover {
    color: var(--cor-textos);
    text-decoration: none;
}

#home-page-content div.link-ver-mais {
    position: absolute;
    bottom: 50px;
    text-decoration: none;
}

#home-page-content .bg-fundo-1 div.link-ver-mais {
    position: static;
    margin-top: 70px;
    text-decoration: none;
}

#home-page-content div.link-ver-mais a.saber-mais,
#home-page-content a.saber-mais,
#home-page-content a.loja-online {
    text-decoration: none;

    font-family: 'Roboto-Medium', sans-serif;
    font-size: 18px;
    padding: 16px 22px;
    border: 1px solid var(--cor-botao-branco-border);
    border-radius: 30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -ms-border-radius:30px;
    -o-border-radius:30px;
    box-shadow: 0 3px 6px var(--cor-botao-branco-sombra);
    background-color: #FFF;
    color: var(--cor-botao-branco-textos);

    margin-right: 20px;

    display: inline-block;
}

#home-page-content div.link-ver-mais a.saber-mais:hover, 
#home-page-content a.saber-mais:hover,
#home-page-content a.loja-online:hover {
    color: var(--cor-3);
    background-color: #FFF;
    border: 1px solid var(--cor-botao-branco-border);
}


#home-page-content div.link-ver-mais button.ver-video, 
#home-page-content a.ver-video {
    text-decoration: none;

    font-family: 'Roboto-Medium', sans-serif;
    font-size: 18px;
    padding: 16px 22px;
    border: 1px solid var(--cor-botao-video-border);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    box-shadow: 0 3px 6px var(--cor-botao-video-sombra);
    background-color: var(--cor-botao-video-fundo);
    color: var(--cor-botao-video-textos);

    margin-right: 20px;

    display: inline-block;
}

#home-page-content div.link-ver-mais a.ver-video .fa,
#home-page-content a.ver-video .fa,
#home-page-content a.loja-online .fa {
    margin-left: 26px;
}

#home-page-content div.link-ver-mais a.ver-video:hover,
#home-page-content a.ver-video:hover {
    color: #FFF;
    background-color: var(--cor-botao-video-fundo-hover);
    border: 1px solid var(--cor-botao-video-border);
}


h2.mt-section-padrao {
    margin-top: 80px;
}


/*---------------------------------------------
    Section: Abrace o Futuro
---------------------------------------------*/
#home-page-content .marcas-tecnologias {
    padding-top: 90px;
    padding-bottom: 115px;
}

#home-page-content .marcas-tecnologias h2,
#home-page-content .marcas-tecnologias p {
    text-align: center !important;
}

#home-page-content .marcas-tecnologias div.link-ver-mais {
    position: static;
    margin-top: 90px;
    text-decoration: none;

    text-align: center;
}

#home-page-content .marcas-tecnologias .brands-box-home-page {
    margin-top: 60px;
}

.marcas-tecnologias .col-12,
.marcas-tecnologias .col-lg-3,
.marcas-tecnologias .col-md-4,
.marcas-tecnologias .col-sm-6,
.marcas-tecnologias .col-xl {
    padding-right: 0px;
    padding-left: 0px;
}




.flip-card-class .front {
    width: 210px !important;
    height: 210px !important;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;

    padding: 40px;

    /* centrar logotipo */
    display: flex;
    justify-content: center;
    align-items: center;

    /* margin-left: 10px; */
}

.flip-card-class .back {
    width: 210px !important;
    height: 210px !important;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;

    padding: 20px;    
}

.flip-card-class .back div.caixa-texto {
    min-height: 100px;
}

.flip-card-class .back p {
    color: #FFF;
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 20px;
    /* margin-bottom: 60px; */
}

.flip-card-class.bracein .front,
.flip-card-class.bracein .back {
    background-color: #00609c;
}

.flip-card-class.smartviewer .front,
.flip-card-class.smartviewer .back {
    background-color: #1f294d;
}

.flip-card-class.eprint .front,
.flip-card-class.eprint .back {
    background-color: #009fe3;
}

.flip-card-class.brandprotech .front,
.flip-card-class.brandprotech .back {
    background-color: #b7ac5e;
}

.flip-card-class.rfidin .front,
.flip-card-class.rfidin .back {
    background-color: #4e4d4d;
}


.btn-card {
    width: 100%;
    text-align: center;
}

#home-page-content .flip-card-class .back a.saber-mais {
    text-decoration: none;

    font-family: 'Roboto-Medium', sans-serif;
    font-size: 14px;
    padding: 7px 22px;
    border: 1px solid var(--cor-botao-branco-border);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    box-shadow: 0 3px 6px var(--cor-botao-branco-sombra);
    background-color: #FFF;
    color: var(--cor-botao-branco-textos);
    margin-right: 0px;
}

#home-page-content .flip-card-class .back a.saber-mais:hover {
    background-color: #FFF;
    border: 1px solid var(--cor-botao-branco-border);
    color: var(--cor-3);
}


/*---------------------------------------------
    Section: Soluções à medida
---------------------------------------------*/
#home-page-content .bg-ghostwhite.solucoes {
    background-color: #f6f6f6;
    padding-top: 90px;
    padding-bottom: 80px;
}

#home-page-content .solucoes img {
    margin-top: -30px;
}


#home-page-content .bg-darkgrey {
    background-color: var(--cor-fundo-cinza);
}


#home-page-content .bg-darkgrey.oferta-produtos h2 {
    color: #FFF;

    margin-top: 60px;
    margin-bottom: 60px;
}


#home-page-content .oferta-produtos a.loja-online {
    margin-top: 55px;
    margin-bottom: 45px;

    display: inline-block;
}


/*---------------------------------------------
    Section: ISPO
---------------------------------------------*/
#home-page-content .bg-ghostwhite.ispo {
    background-color: #f6f6f6;
    padding-top: 90px;
    padding-bottom: 80px;
    margin-top: -80px;

    margin-bottom: 80px;
}

#home-page-content .ispo img {
    margin-top: -30px;
}

#home-page-content .bg-ghostwhite.ispo .link-ver-mais  {
    position: static;
    margin-top: 50px;
}

.label-ispo-data {
    display: block;
    color: var(--cor-subtitulos);
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 25px;

}

/*---------------------------------------------
    Section: MODtissimo
---------------------------------------------*/
#home-page-content .bg-ghostwhite.modtissimo {
    background-color: #f6f6f6;
    padding-top: 90px;
    padding-bottom: 80px;
    margin-top: -80px;

    margin-bottom: 80px;
}

#home-page-content .modtissimo img {
    margin-top: -30px;
}

#home-page-content .bg-ghostwhite.modtissimo .link-ver-mais {
    position: static;
    margin-top: 50px;
}

.label-modtissimo-data {
    display: block;
    color: var(--cor-subtitulos);
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 25px;

}


#home-page-content .bg-ghostwhite.modtissimo a.link-registo {
    color: var(--cor-3);
    text-decoration: none;
}

#home-page-content .bg-ghostwhite.modtissimo a.link-registo:hover {
    color: var(--cor-textos);
    text-decoration: none;
}



/*---------------------------------------------
    Section: TECHTEXTIL
---------------------------------------------*/
#home-page-content .bg-ghostwhite.techtextil {
    background-color: #f6f6f6;
    padding-top: 90px;
    padding-bottom: 80px;
    margin-top: -80px;

    margin-bottom: 80px;
}

#home-page-content .techtextil img {
    margin-top: -30px;
}

#home-page-content .bg-ghostwhite.techtextil .link-ver-mais {
    position: static;
    margin-top: 50px;
}

.label-techtextil-data {
    display: block;
    color: var(--cor-subtitulos);
    font-size: 20px;
    margin-top: -5px;
    margin-top: -25px;
    margin-bottom: 25px;

}

a.link-feira-techtextil {
    display: block;
    color: var(--cor-3);
    font-size: 16px;
    margin-top: -25px;
    text-decoration: none;

    font-family: 'Roboto-Medium', sans-serif;
}

a.link-feira-techtextil:hover {
    color: var(--cor-textos);
    text-decoration: none;
}

/*---------------------------------------------
    Section: SOCCEREX EUROPE
---------------------------------------------*/
#home-page-content .bg-ghostwhite.soccerex {
    background-color: #f6f6f6;
    padding-top: 90px;
    padding-bottom: 80px;
    margin-top: -80px;

    margin-bottom: 80px;
}

#home-page-content .soccerex img {
    margin-top: -30px;
}

#home-page-content .bg-ghostwhite.soccerex .link-ver-mais {
    position: static;
    margin-top: 50px;
}

.label-soccerex-data {
    display: block;
    color: var(--cor-subtitulos);
    font-size: 20px;
    margin-top: -5px;
    margin-top: -25px;
    margin-bottom: 25px;

}

a.link-feira-soccerex {
    display: block;
    color: var(--cor-3);
    font-size: 16px;
    margin-top: -25px;
    text-decoration: none;

    font-family: 'Roboto-Medium', sans-serif;
}

a.link-feira-soccerex:hover {
    color: var(--cor-textos);
    text-decoration: none;
}

/*---------------------------------------------
    Section: A+A
---------------------------------------------*/
#home-page-content .bg-ghostwhite.aa {
    background-color: #f6f6f6;
    padding-top: 90px;
    padding-bottom: 80px;
    margin-top: -80px;

    margin-bottom: 80px;
}

#home-page-content .aa img {
    margin-top: -30px;
}

#home-page-content .bg-ghostwhite.aa .link-ver-mais {
    position: static;
    margin-top: 50px;
}

.label-aa-data {
    display: block;
    color: var(--cor-subtitulos);
    font-size: 20px;
    margin-top: -5px;
    margin-top: -25px;
    margin-bottom: 25px;

}

a.link-feira-aa {
    display: block;
    color: var(--cor-3);
    font-size: 16px;
    margin-top: -25px;
    text-decoration: none;

    font-family: 'Roboto-Medium', sans-serif;
}

a.link-feira-aa:hover {
    color: var(--cor-textos);
    text-decoration: none;
}


.logo-helio {
    width: 250px;
    height: auto;
    margin: auto;
    display: block;
    margin-top: 10px !important;
}