@charset "utf-8";

@font-face
{
    font-family: Comfortaa;
    src: url(fontes/Comfortaa/Comfortaa-Regular.ttf);
    font-style: normal;
    font-weight: 400;
}
@font-face
{
    font-family: Comfortaa;
    src: url(fontes/Comfortaa/Comfortaa-Bold.ttf);
    font-style: normal;
    font-weight: 700;
}
@font-face
{
    font-family: Comfortaa;
    src: url(fontes/Comfortaa/Comfortaa-Light.ttf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(fontes/MaterialDesign/MaterialIcons-Regular.ttf) format('truetype');
}

:root
{
    --cor-zero-claro-rgb: 227, 230, 230;
    --cor-zero-rgb: 170, 172, 172;
    
    --cor-um-rgb: 245, 0, 40;
    --cor-um-claro-rgb: 255, 210, 220;
    --cor-um-escuro-rgb: 170, 0, 20;
    
    --cor-dois-rgb: 255,210,75;
    --cor-dois-claro-rgb: 255, 255, 160;
    --cor-dois-escuro-rgb: 215, 140, 0;
    
    --cor-tres-rgb: 0, 215, 110;
    --cor-tres-claro-rgb: 175, 255, 215;
    --cor-tres-escuro-rgb: 0, 105, 55;
    
    --cor-quatro-rgb: 0, 135, 255;
    --cor-quatro-claro-rgb: 155, 205, 255;
    --cor-quatro-escuro-rgb: 0, 75, 150;
    
    --cor-cinco-rgb: 255, 125, 0;
    --cor-cinco-claro-rgb: 255, 200, 115;
    --cor-cinco-escuro-rgb: 215, 75, 0;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
    font-family: sans-serif;
}

html
{
    width: 100%;
    height: 100vh;
    font-size: 16px;
    overflow-x: hidden;
}

body
{
    background-color: white;
    overflow-x: hidden;
}

img, svg
{
    max-width: 100%;
    max-height: 100%;
}

a
{
    cursor: pointer;
    text-decoration: none;
}
a:hover
{
    text-decoration: underline;
}
a:active
{
    text-decoration: none;
}
a img
{
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    width: 100%;
    margin: 0.3em auto 0.35em;
    font-family: Comfortaa, sans-serif;
    font-weight: 700;
    text-align: left;
}
h1
{
    font-size: 2em;
    text-align: center;
}
h2
{
    font-size: 1.8em;
}
h3
{
    font-size: 1.6em;
}
h4
{
    font-size: 1.4em;
}
h5
{
    font-size: 1.2em;
}
h6
{
    font-size: 1em;
}

p
{
    text-align: justify;
    margin: 15px auto;
}

table
{
    width: 100%;
}

tr:nth-of-type(2n-1)
{
    background-color: lightgray;
}

td
{
    padding: 5px;
}

#cabecalho
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    padding: 15px;
    background-color: rgba(0,0,0,0.5);
}

#cabecalho::before
{
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: 0;
    left: -10px;
    background-image: url(../img/IMG_20190117_190409194_HDR_editado.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(5px);
    z-index: -1;
}

#logo
{
    margin-bottom: 20px;
}

#logo svg
{
    height: 25vh;
}

#logo svg *
{
    fill: #FFF;
}

#cabecalho .botoes
{
    display: flex;
    justify-content: center;
    width: 490px;
}

#cabecalho .botoes a:hover
{
    cursor: pointer;
    text-decoration: none;
}

#cabecalho .botoes a:active
{
    text-decoration: none;
    transform: scale(0.95);
}

#cabecalho .botoes button
{
    cursor: inherit;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    max-width: 150px;
    min-height: 50px;
    max-height: 50px;
    padding: 5px 0;
    border: 0;
    border-radius: 25px;
    font-family: Comfortaa;
    font-size: 1rem;
    color: white;
    transition: 300ms ease;
}

#cabecalho .botoes button span
{
    font-size: 0.875rem;
}

#telefone
{
    margin: 0 10px;
    background-color: rgba(var(--cor-tres-rgb),0.75);
}
#telefone:hover, #telefone:focus
{
    background-color: rgba(var(--cor-tres-rgb),1);
}

#facebook
{
    margin: 0 10px;
    background-color: rgba(66, 103, 178, 0.75);
}
#facebook:hover, #facebook:focus
{
    background-color: rgba(66, 103, 178,1);
}

#administrarOnline
{
    padding: 75px calc(50% - 300px);
}

#administrarOnline svg
{
    max-width: 100%;
}

#administrarOnline .conteudo
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#administrarOnline a:hover
{
    cursor: pointer;
    text-decoration: none;
}

#administrarOnline a:active
{
    text-decoration: none;
    transform: scale(0.95);
}

#administrarOnline button
{
    cursor: inherit;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    max-width: 150px;
    min-height: 50px;
    max-height: 50px;
    padding: 5px 0;
    border: 0;
    border-radius: 25px;
    font-family: Comfortaa;
    font-size: 1rem;
    color: white;
    transition: 300ms ease;
}

#administrarOnline button span
{
    font-size: 0.875rem;
}

#administrarOnline button
{
    margin: 0 10px;
    background-color: rgba(var(--cor-quatro-rgb),1);
}

#administrarOnline button:hover, #administrarOnline button:focus
{
    background-color: rgba(var(--cor-quatro-escuro-rgb),1);
}

.linha
{
    display: flex;
    flex-wrap: wrap;
}

footer
{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 25px calc(50% - 500px);
    background-color: rgb(var(--cor-um-rgb));
    color: white;
}

footer a
{
    font-weight: 700;
    color: white;
}

footer iframe
{
    min-height: 300px;
}

.fechar
{
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 0.8;
}

.fechar:hover
{
    cursor: pointer;
    color: red;
}

.fechar::before
{
    content: "X";
    color: currentColor;
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

[data-modal]
{
    cursor: pointer;
}

#divModal
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 150ms ease;
}

#divModal.ativo
{
    display: flex;
}

#divModal.ativo.animado
{
    opacity: 1;
    transition: opacity 150ms ease;
}

#modal
{
    position: relative;
    top: -20px;
    max-width: calc(100% - 20px);
    min-height: 50vh;
    max-height: calc(100vh - 40px);
    padding: 20px 10px 10px;
    border-radius: 25px;
    background-color: white;
    transition: 300ms ease;
    overflow: overlay;
}

#divModal.ativo.animado #modal
{
    top: 0;
    transition: 300ms ease;
}

@media (min-width: 1001px)
{
	.esconder-de-grande
    {
		display: none;
	}
	
	.g-12
    {
		flex: 12;
		min-width: 100%;
		max-width: 100%;
	}
	.g-11
    {
		flex: 11;
		min-width: 91.6666%;
		max-width: 91.6666%;
	}
	.g-10{
		flex: 10;
		min-width: 83.3333%;
		max-width: 83.3333%;
	}
	.g-9
    {
		flex: 9;
		min-width: 75%;
		max-width: 75%;
	}
	.g-8
    {
		flex: 8;
		min-width: 66.6666%;
		max-width: 66.6666%;
	}
	.g-7
    {
		flex: 7;
		min-width: 58.3333%;
		max-width: 58.3333%;
	}
	.g-6
    {
		flex: 6;
		min-width: 50%;
		max-width: 50%;
	}
	.g-5
    {
		flex: 5;
		min-width: 41.6666%;
		max-width: 41.6666%;
	}
	.g-4{
		flex: 4;
		min-width: 33.3333%;
		max-width: 33.3333%;
	}
	.g-3
    {
		flex: 3;
		min-width: 25%;
		max-width: 25%;
	}
	.g-2
    {
		flex: 2;
		min-width: 16.6666%;
		max-width: 16.6666%;
	}
	.g-1
    {
		flex: 1;
		min-width: 8.3333%;
		max-width: 8.3333%;
    }

    #novidades > div:nth-of-type(n + 4)
    {
        padding-top: 20px;
    }
    
    #modal
    {
        margin: 25px calc(50% - 500px);
    }
}

@media (min-width: 601px) and (max-width: 1000px)
{
	.esconder-de-media
    {
		display: none;
	}
	
	.mostrar-apenas-para-grande
    {
		display: none;
	}
    
    .linha
    {
        padding: 0 20px;
    }
	
	.m-12
    {
		flex: 12;
		min-width: 100%;
		max-width: 100%;
	}
	.m-11
    {
		flex: 11;
		min-width: 91.6666%;
		max-width: 91.6666%;
	}
	.m-10
    {
		flex: 10;
		min-width: 83.3333%;
		max-width: 83.3333%;
	}
	.m-9
    {
		flex: 9;
		min-width: 75%;
		max-width: 75%;
	}
	.m-8
    {
		flex: 8;
		min-width: 66.6666%;
		max-width: 66.6666%;
	}
	.m-7
    {
		flex: 7;
		min-width: 58.3333%;
		max-width: 58.3333%;
	}
	.m-6
    {
		flex: 6;
		min-width: 50%;
		max-width: 50%;
	}
	.m-5
    {
		flex: 5;
		min-width: 41.6666%;
		max-width: 41.6666%;
	}
	.m-4
    {
		flex: 4;
		min-width: 33.3333%;
		max-width: 33.3333%;
	}
	.m-3
    {
		flex: 3;
		min-width: 25%;
		max-width: 25%;
	}
	.m-2
    {
		flex: 2;
		min-width: 16.6666%;
		max-width: 16.6666%;
	}
	.m-1
    {
		flex: 1;
		min-width: 8.3333%;
		max-width: 8.3333%;
	}
    
    #novidades
    {
        margin: 0;
        padding: 25px 10px;
    }

    #novidades > div:nth-of-type(n + 3)
    {
        padding-top: 20px;
    }
    
    #administrarOnline
    {
        padding: 20px !important;
    }
    
    footer
    {
        padding: 20px !important;
    }
    
    #modal
    {
        margin: 25px 10px;
    }
}

@media (max-width: 600px)
{
	.esconder-de-pequena
    {
		display: none;
	}
	
	.mostrar-apenas-para-grande
    {
		display: none;
	}	
    
    .linha
    {
        padding: 20px;
    }
		
	.p-12
    {
		flex: 12;
		min-width: 100%;
		max-width: 100%;
	}
	.p-11
    {
		flex: 11;
		min-width: 91.6666%;
		max-width: 91.6666%;
	}
	.p-10
    {
		flex: 10;
		min-width: 83.3333%;
		max-width: 83.3333%;
	}
	.p-9
    {
		flex: 9;
		min-width: 75%;
		max-width: 75%;
	}
	.p-8
    {
		flex: 8;
		min-width: 66.6666%;
		max-width: 66.6666%;
	}
	.p-7
    {
		flex: 7;
		min-width: 58.3333%;
		max-width: 58.3333%;
	}
	.p-6
    {
		flex: 6;
		min-width: 50%;
		max-width: 50%;
	}
	.p-5
    {
		flex: 5;
		min-width: 41.6666%;
		max-width: 41.6666%;
	}
	.p-4
    {
		flex: 4;
		min-width: 33.3333%;
		max-width: 33.3333%;
	}
	.p-3
    {
		flex: 3;
		min-width: 25%;
		max-width: 25%;
	}
	.p-2
    {
		flex: 2;
		min-width: 16.6666%;
		max-width: 16.6666%;
	}
	.p-1
    {
		flex: 1;
		min-width: 8.3333%;
		max-width: 8.3333%;
	}	
    
    #cabecalho .botoes
    {
        flex-direction: column;
        align-items: center;
    }
    
    #cabecalho .botoes button
    {
        margin-top: 20px;
    }
    
    #novidades
    {
        padding: 10px;
        margin: 0;
    }
    
    #novidades > div
    {
        padding: 10px;
    }

    #novidades > div:nth-of-type(n + 2) > div
    {
        padding-top: 20px;
    }
    
    #administrarOnline
    {
        padding: 50px 20px !important;
    }
    
    #administrarOnline svg
    {
        max-height: 120px;
    }
    
    footer div
    {
        text-align: center;
    }
    
    footer iframe
    {
        margin-top: 20px;
    }
    
    #modal
    {
        margin: 10px;
    }
}