/*
Theme Name: Gamp21
Theme URI: http://www.gamp21.com.br/
Description: Este tema foi desenvolvido única e exclusivamente para o Gamp21
Version: 2.0
Author: Fabio Lopes
Author URL: https://medium.com/@falopes83
Tags: institucional
*/

@charset "UTF-8";

@import url(css/home.css);
@import url(css/carousel.css);
@import url(css/gamp21.css);
@import url(css/servicos.css);
@import url(css/maespais.css);
@import url(css/cf7.css);


/* COLOR */
:root{
    --color-gamboge: #FF8630;
    --color-brown: #764A05;
    --color-oldlace: #FDF4E6;
    --color-red: #EC0943;
    --color-burgundy: #CC0000;
    --color-piggy: #FDE6EC;
    --color-black-olive: #3C3C3A;
    --color-oldsilver: #838383;
    --color-quicksilver: #9F9F9F;
    --color-silversand: #C6C6C6;
    --color-platinum: #E3E3E3;
    --color-flash-white: #FFFFFF;
    --color-brightgray: #EEEEEE;
    --color-green: #25D366;
    --color-dark-green: #075E54;
    --color-antique-white: #FBECD3;
    --color-gold: #DA9422;
    --color-linkedin: #0A66C2;
    --color-rose-white: #FFF9EF;
    --color-purple: #663B8F;
    --color-brown-2: #543535;
    --accordion-arrow-up: url(img/angle-up-solid-red.svg);
    --accordion-arrow-down: url(img/angle-down-solid-red.svg);
    
}

.color-brown{
    color: var(--color-brown-2);
}

.color-red{
    color: var(--color-burgundy);
}

/* ELEMENTS */
html, body{overflow-x: hidden; scroll-behavior: smooth;} 

hr{
    height: 13px;
    background: url(img/hr.svg) repeat-x;
    border: 0;
    opacity: .75;
}

/* FONTS */
h1{
    font-family: baloo;
    font-size: 36px;   
    color: var(--color-burgundy);
}

.h1banner{
    font-family: barlow;
    font-weight: bold;
    color: var(--color-flash-white);
    font-size: 36px;
}

.h1center{
    font-family: baloo;
    font-size: 26px;
    text-align: center;
    color: var(--color-gamboge);
}

.h1center::before,
.h1center::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid var(--color-brown);
    width: 40px;
    margin: -10px 1rem;
    transform: translateY(-1rem);
}

.h1center2{
    font-family: baloo;
    font-size: 26px;
    text-align: center;
    color: var(--color-flash-white);
}

.h1center2::before,
.h1center2::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid var(--color-gamboge);
    width: 40px;
    margin: -10px 1rem;
    transform: translateY(-1rem);
}

.h3banner{
    font-family: barlow;
    font-weight: bold;
    color: var(--color-flash-white);
    font-size: 24px;
}

a{
    color: var(--color-gamboge);
    text-decoration: none;
}

a:active,
a:hover{
    color: var(--color-brown-2);
    text-decoration: underline;
}

.rs a{
    text-decoration: none;
}

.rs a:active,
.rs a:hover{
    text-decoration: none;
}

p{
    font-family: barlow;
    font-size: 16px;
    color: var(--color-black-olive);
}

b{
    color: var(--color-gamboge);
}

h2, .list-title{
    font-family: Baloo;
}

h3{
    font-family: Baloo;
    color: var(--color-burgundy);
}

blockquote{
    font-family: Barlow;
}

li{
    font-family: barlow;
    color: var(--color-brown-2);
}

/* CARDS */
.card{
    border: 1px solid var(--color-gamboge);
    background-color: var(--color-flash-white);
}

.card-title{
    font-family: Barlow;
    color: var(--color-brown-2);
    font-weight: bold;
    min-height: 2.5em;
    display: flex;
    align-items: center;
}

.card-text a{
    color: var(--color-gamboge);
    text-decoration: none;
}

.card-text a:active,
.card-text a:hover{
    color: var(--color-brown-2);
    text-decoration: underline;
}

/* BUTTONS */
.btn{
    min-width: 120px;
}

.btn-gamboge{
    font-family: Baloo;
    background-color: var(--color-gamboge);
    color: var(--color-flash-white);    
}

.btn-gamboge:active,
.btn-gamboge:hover{
    background-color: var(--color-brown-2);
    color: var(--color-flash-white);
    text-decoration: none;
}

.btn-outline-brown {
    border-color: var(--color-brown-2);
    color: var(--color-brown-2);
    font-family: Baloo;
}

.btn-outline-brown:active,
.btn-outline-brown:hover{
    background-color: var(--color-brown-2);
    color: var(--color-flash-white);
    text-decoration: none;
}

#buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ACCORDION */
.accordion{
    --bs-accordion-border-color: var(--color-gamboge);
}

.accordion-button{
    font-family: baloo;
    color: var(--color-burgundy);
}

.accordion-button:not(.collapsed){
    color: var(--color-burgundy);
    background-color: var(--color-flash-white);
}

.accordion-button:not(.collapsed)::after{
    background-image: var(--accordion-arrow-up);
}

.accordion-button::after {    
    background-image: var(--accordion-arrow-up);
}

.accordion-body{
    --bs-accordion-bg: var(--color-rose-white);
}


/* HEADER */
.navbar>.container-fluid{
    width: 100%;
    max-width: 1320px;
}

#gampNav{
    background-color: var(--color-oldlace) !important;
}

#gampNav .nav-item{
    color: var(--color-brown-2) !important;
    margin: 0 10px;
    font-family: Baloo;
}

#gampNav .nav-link:hover,
#gampNav .nav-link:active{
    color: var(--color-gamboge);
}

.menu-fixo {
    position: fixed;
    top: 0;
    z-index: 99;
    transition: all .5s;
    width: 100%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(246, 246, 246, .7);
}

/* FOOTER */
#fixed_button{
    width: 64px;
    height: 64px;
    cursor: pointer;  
    background-color: var(--color-green);
    bottom: 95px;
    right: 30px;
    z-index: 1;
}

#whatsapp_fixed{
    display: block;
    padding: 4px 16px;
    text-decoration: none;
    color: var(--color-flash-white);
    font-size: 36px;
}

#whatsapp_fixed:hover{
    opacity: .7;
}

#tagAlfabeto a{
    margin: 8px;
    padding: 5px;
    border: 1px solid var(--color-gamboge);
    background: var(--color-flash-white);
    border-radius: 4px;
    text-align: center;
}

#tagSelect {
    display: none !important;
}

#tagAlfabeto {
    display: block !important;
}

footer{
    position: relative;
    background-color: var(--color-antique-white);
    width: 100%;
}

@media screen and (max-width: 575px) {
    #tagSelect {
      display: block !important;
    }
    
    #tagAlfabeto {
      display: none !important;
    }
  }