/*@import "style-guide.css";*/

html
{
    /* paleta de cores */
    --color-primaria: #665EFF; 
    --color-titulo: #363940;   
    --color-texto: #40444B;
    --color-legenda: #777b81;
    --color-menu: #FFFFFF;
    --color-icone: #BABBBF;      
    --color-footer: #363940;   
    --color-background: #EEEEEE;
    --color-roxo: #98569e ;
    --color-azul: #6dc4c7;

    /* font */     
    font-size: 18px;
    /* styles
        Extra-light 200
        Light 300
        Regular 400
        Semi-bold 600
        Bold 700
        Extra-bold 800
        Black 900
    */
}

body
{     
    color: var(--color-texto);
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem;
    font-family: 'Nunito', sans-serif;
}

/* tipografia */

h1
{
    color: var(--color-titulo);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 3.5rem;
}

h2
{
    color: var(--color-titulo);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 3.5rem;
}

h3
{
    color: var(--color-menu);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.5rem;
}

h4
{
    color: var(--color-legenda);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 2.1rem;
    font-style: italic;
}

h5
{
    color: var(--color-primaria);
    font-size: 1rem;
    font-weight: 700; 
    line-height: 2rem;
}

p
{
    margin-top: 1.2rem;
}

a
{
    color: var(--color-primaria);
    text-decoration: none;
    font-weight: 600;
}

a:hover
{
    text-decoration: underline;
}

/* buttons */

.btn
{
    color: var(--color-menu);
    border-radius: 3rem;
    height: 3rem;
    width: 18rem;
    font-size: 1rem;
    font-weight: 700;
    border: 0px;
}

.btn-primario
{      
    background: var(--color-primaria);
    /*background: linear-gradient(to right top, var(--color-roxo), var(--color-azul));*/
    box-shadow: 2px 4px 12px #00000029;
    opacity: 1;    
}

.btn-secundario
{      
    background: var(--color-legenda);
    box-shadow: 2px 4px 12px #00000029;
    opacity: 1;    
}

.btn-outline
{      
    background: transparent;
    opacity: 1;    
}


.btn:hover
{
    color: var(--color-menu);
    opacity: 0.85; 
}

/* navbar */

.navbar
{
    background-color: var(--color-primaria);
    /*background: linear-gradient(to right top, var(--color-roxo), var(--color-azul));*/
    color: var(--color-menu);
    font-weight: 700;
    height: 12vh;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
}

.navbar-header svg,
.navbar-header img
{
    height: 4.5vh;
    width: auto;
    fill: var(--color-menu);
}

.navbar .logo
{
    height: 8vh;
    width: auto;
}

.navbar-header svg:hover,
.navbar-header img:hover
{
    opacity: 0.5;
}

/* banner */

.banner
{
    height: 65vh;
    padding: 0;    
    margin-top: 12vh;
}

.banner-principal
{
    height: 85vh;    
    margin-top: 12vh; 
    /*filter: blur(2.5px);*/
    filter: grayscale(40%);
    z-index: 1;
}

.conteudo
{    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);   
    z-index: 2;
}

.conteudo h4
{    
    color: var(--color-menu);
    font-weight: 800;
    text-shadow: 3px 3px 3px #000000;
}

.conteudo .typewrite
{     
    background-color: var(--color-menu);
    color: var(--color-titulo);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 3.5rem;
}

.conteudo .typewrite:hover
{
    color: var(--color-titulo);
    text-decoration: none;
}

/*https://www.w3schools.com/howto/howto_css_blurred_background.asp
https://css-tricks.com/snippets/css/typewriter-effect/*/

.conteudo > h1
{
    height: auto;
    width: auto;
}

.banner-footer
{
    height: 65vh;
    padding: 0;    	
    filter: grayscale(100%);
}

.parallax 
{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* backgrounds */

.bgprincipal
{
    background-image: url('../../../site/assets/img/banners/principal.jpg');
}

.bgstore
{
    background-image: url('../../../site/assets/img/banners/store.jpg');
}

.bgprojeto
{
    background-image: url('../../../site/assets/img/banners/projeto.jpg');
}

.bgapp
{
    background-image: url('../../../site/assets/img/banners/app.jpg');
}

.bgebook
{
    background-image: url('../../../site/assets/img/banners/ebook.jpg');
}

.bgcovid
{
    background-image: url('../../../site/assets/img/banners/covid19.jpg');
}

.bgtermos
{
    background-image: url('../../../site/assets/img/banners/termos.jpg');
}

.bgprivacidade
{
    background-image: url('../../../site/assets/img/banners/privacidade.jpg');
}

.bgequipe
{
    background-image: url('../../../site/assets/img/banners/equipe.jpg');
}

.bgacessibilidade
{
    background-image: url('../../../site/assets/img/banners/acessibilidade.jpg');
}

.bginstrucoes
{
    background-image: url('../../../site/assets/img/banners/instrucoes.jpg');
}

.bgbloco01
{
    background-image: url('../../../site/assets/img/app.jpg');
}

.bgbloco02
{
    background-image: url('../../../site/assets/img/ebook.jpg');
}

/* section */

section
{
    padding: 15vh 0 15vh 0;
}

.section-cinza
{
    background-color: var(--color-background);
}

.creditos
{
    padding-top: 0;
}

.container-fluid
{
    width: 85vw;
   /* background-color: #363940;*/
}

section .tela
{
    height: 70vh;
    width: auto;
}

.float-left
{
    float: left;
}

.float-right
{
    float: right;
}

.b-dark
{
    background-color: var(--color-footer);
}

.b-light
{
    background-color: var(--color-background);
}


.b-gradient
{
    background: linear-gradient(to right top, var(--color-roxo), var(--color-azul));
}

.t-white
{
    color: var(--color-menu);
}

/* blocos */

.bloco-img
{
    height: 70vh;
    margin: 4vh 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* imagens */

.aldir
{
    width: 80vw;
    height: auto;
}

.avatar
{
    height: 55vh;
    width: auto;
    margin-bottom: 3vh;
}

/* footer */

footer
{
    background-color: var(--color-titulo); 
    padding: 15vh 0 15vh 0;
}

footer img
{
    height: 15vh;
    width: auto;
}

footer .social svg
{
    height: 4.5vh;
    width: auto;
    margin-right: 0.5rem;
    fill: var(--color-icone);
}

footer .social svg:hover
{
    fill: var(--color-primaria);
}

footer a
{
    color: var(--color-menu);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
}

footer .list-unstyled a:hover, 
footer .list-unstyled a:focus
{    
    color: var(--color-menu);
    text-decoration: underline;
}