@charset "utf-8";
/* CSS Document */

/**
* Projetos Moduli
*
* @project Componente Banner
* @version 1.0 2021
* @package layout
* @author Cláudia Martin Nascimento
* @copyright 2021 Acesso para Todos
*
* @colordef #555; standard gray
*/ 

/**
* BANNER ESTÁTICO
* Institucional contendo texto, link e imagem.
*
* @section Banner estático
*/

#banner-estatico {
    height: 86vh;
    min-height: 500px;
    position: relative;
    background-size: cover;
}


#banner-estatico .conteudo-banner {
    z-index: 5;
    position: absolute;
}

#banner-estatico h1 {
    padding: .2em .5em;
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;  
}

#banner-estatico .btn-lg {
    padding: .7rem 2rem;
    font-size: 1rem;
    border-radius: 45em;
}

#banner-estatico img {
    width: 100%;
    object-position: 54.0012% 77.1748%;
    object-fit: cover;
      }


/**
* BANNER ESTÁTICO
* Customizável
*/


/* Cor do texto */
#banner-estatico .texto-banner { color: #ffffff; }

/* Tamanho do texto e cor de fundo do h1 */
#banner-estatico h1 {
    font-size: calc(3.5 * 1rem);
     /* background-color: rgba(255, 255, 255, 0.8); */ }

/* Tamanho do texto e cor de fundo do parágrafo */

#banner-estatico p, .banner-estatico2 p {
     font-size: calc(1.8 * 1rem);
     font-family: 'Poppins Semibold';
     padding: 0;
       /* background-color: rgba(255, 255, 255, 0.8); */
}

@media (min-width: 1024px) {

    #banner-estatico p, .banner-estatico2 p {font-size: calc(2 * 1rem);}
    #banner-estatico .posicao-banner {margin-top: 30%;}
}

@media (max-width: 560px) {
    #banner-estatico p {
    font-size: calc(1.6 * 1rem); }}

#banner-estatico .modal-body p {
    font-size: calc(1em);
    font-family: 'Poppins Regular';

}


/* Botões */
#banner-estatico a.btn-dark {background-color: #ffffff; color: #01133e; font-weight: 600; border: 1px solid #ffffff;}
#banner-estatico a.btn-dark:hover, #banner-estatico a.btn-dark:focus {background-color: #211166; text-decoration: none; color: #ffffff; border: 1px solid #ffffff;}

/* Opacidade da imagem */
#banner-estatico img { opacity: 1; }

#banner-estatico img.setavideo {position: absolute; bottom:7%; right:5%; z-index: 40; width: 120px; height: auto; padding: 8px 7px; border: 2px solid transparent; border-radius: 50em; transition: all .3s ease 0s; -webkit-transition: all .3s ease 0s;}
#banner-estatico a:hover img.setavideo, #banner-estatico a:focus img.setavideo {border: 2px solid #f39325; border-radius: 50em; padding: 8px 7px;}

#banner-estatico a {text-decoration: none;}

@media (max-width: 991px) {
    #banner-estatico img.setavideo {left: 50%; top: 50%; transform: translate(-50%, -50%); }
    #banner-estatico {height: 86vh; min-height: 200px; padding: 0;}
}

/**
* BANNER ESTÁTICO modelo 2
* Institucional contendo texto, link e imagem.
*
* @section Banner estático
*/

#banner-estatico2 { height: auto; }

#banner-estatico2 .conteudo-banner2 {padding-left: 5rem;}

#banner-estatico2 p { 
    line-height: 1.3em;
    padding: .35em .3em;
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;  
}

#banner-estatico2 .btn-lg {
    padding: .9rem 2rem;
    font-size: 1.2rem;
    border-radius: 45em;
}

/**
* BANNER ESTÁTICO 2
* Customizável
*/

/* Com cor e textura de background */
/* #banner-estatico2 { background: #e3d0f5 url("../../../assets/img/bg-img.png") repeat-x bottom; } */


/* Cor e tamanho do título */
#banner-estatico2 h2 {
  font-size: calc(4 * 1rem);
  color: #000000;
}

@media only screen and (max-width: 1024px) { #banner-estatico2 h2 { font-size: calc(2.5 * 1rem); } }      

/* Largura da Imagem */
#banner-estatico2 img { max-width: 94%;}

@media only screen and (max-width: 991px) { #banner-estatico2 img { max-width: 100%;} }

/* Cor e tamanho do texto */
#banner-estatico2 p {color:#666666; font-size: calc(1.2 * 1rem);}

/* Botões */
#banner-estatico2 a.btn-outline-dark {background-color: transparent; color: #4d4d4d; font-weight: 600; border: 2px solid #211166;}
#banner-estatico2 a.btn-outline-dark:hover, #banner-estatico2 a.btn-outline-dark:focus {background-color: #211166; text-decoration: none; color: #ffffff; border: 2px solid #211166;}