@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');

:root{ 

    font-family: 'Poppins', sans-serif;

    /* cores padrões */
    --color-primary: #CAE014;
    --color-secondary: #2C282D;
    --color-text: #666;
    --color-back: #FFF;
    --color-dark: linear-gradient(135deg, #424042 0%, #2C282D 50%, #424042 100%); /*linear-gradient(135deg, #00041A 0%,#005879 50%, #00041A 100%)*/
    --color-light: #F5F6FA;

    /* botões */
    --btn-back: var(--color-primary);
    --btn-back-hover: var(--color-secondary);
    --btn-color: #FFF;
    --btn-color-hover: var(--btn-color);

    /* top bar */
    --bar-back: transparent;
    --bar-color: #FFF;
    --bar-icon-color: #FFF;
    --bar-icon-redes-color: #FFF;
    --bar-icon-redes-color-hover: var(--color-primary);

    /* top */
    --top-logo-padding: 0px;
    --top-logo-padding-responsive: 20px;
    --top-logo-width-responsive: 200px;
    --top-logo-height-responsive: 120px;
    --top-back: transparent;    
    --top-nav-back: transparent;
    --top-nav-color: #FFF;    
    --top-nav-hover-back: transparent;
    --top-nav-hover-color: var(--color-primary);
    --top-drop-back: var(--color-primary);    
    --top-drop-color: var(--top-nav-color);
    --top-drop-hover-back: rgba(0,0,0,0.05);
    --top-drop-hover-color: var(--top-nav-color);

    /* footer */
    --footer-back: var(--color-dark);
    --footer-color: var(--top-nav-color);
    --footer-copy-back: rgba(0,0,0,0.1);
    --footer-copy-color: rgba(255,255,255,.6);
    --footer-icon-color: var(--color-primary);
    --footer-icon-redes-color: var(--color-primary);
    --footer-icon-redes-color-hover: var(--bar-icon-redes-color-hover);

    /* title */
    --title-color: var(--color-primary);
    --title-line-color: var(--color-secondary);
    --title-line-size: 150px;
    --title-post-color: #333;

    --title-internal-color: var(--color-primary);
    --title-internal-back: var(--color-dark);

}


#bar a { font-size: 1.4em !important; margin-top: 15px; }

header { background: url('https://sitescriar.com.br/6530i0ixjh/images/banner/1.jpg'); }
header #top.navbar { padding-top: 0; }

/*header { position: absolute; z-index:999; width: 100%; }

.header-foto {  position: relative; width: 100%; height:400px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.header-foto img { width: 100%;  }
*/

header .navbar-nav a { font-size: 0.85em; font-weight: 700; letter-spacing:0.2em; }
header .navbar-nav .dropdown-menu a { letter-spacing:0em; color: #FFF !important; }

h2.title { font-weight: 700; line-height: 1.3em; letter-spacing: 0.05em; color: var(--color-secondary); } 
h2.title em { font-size: 1.5em; font-weight: 900; color: var(--color-primary); }

.banner-text { color: var(--color-secondary); font-size: 1.6em; letter-spacing: 0.02em; line-height: 1.7em; font-weight: 500; }
.banner-text strong { color: var(--color-primary); }

.photo { height: 500px; display: flex; width: 100%; padding: 0; box-sizing: border-box;  }
.photo .box { flex: 1; overflow: hidden; transition: .5s; margin: 0; line-height: 0; } 
.photo .box > img { width: 200%; height: 100%; object-fit: cover; transition: .5s; opacity: .8; filter: grayscale(1) contrast(1.2); }
.photo .box:hover { flex: 1 1 50%; }
.photo .box:hover > img { width: 100%; height: 100%; opacity: 1; filter: grayscale(0) contrast(1); }

footer { border-top: 6px solid var(--color-primary); } 

.slider-main {  border-top: 6px solid var(--color-primary); border-bottom: 6px solid var(--color-primary); }

.titulo h2 { letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }

footer { margin-top: -5px; }
footer .redes a.fab, footer .redes a.far { font-size: 4em; }

#sobre { background: var(--color-light); background: linear-gradient(90deg, var(--color-light) 0%, var(--color-light) 50%, var(--color-back) 50%, var(--color-back) 100%); }
#sobre p { font-size: 1.15em; font-weight: 500; line-height: 1.7em; }

#slider-rodape {display: flex; flex-wrap: wrap;}
#slider-rodape .slider-item {height: 40vh;flex-grow: 1;}
#slider-rodape .slider-item:last-child {flex-grow: 20;}
#slider-rodape .slider-item img { max-height: 100%;min-width: 100%;object-fit: cover;vertical-align: bottom;}

#servicos .image { display: flex; height: 50vh; flex-grow: 1; }
#servicos .image img { max-height: 100%; min-width: 100%; object-fit: cover;vertical-align: bottom; }
#servicos h2 { color: var(--color-primary); }

#treino-box .border { font-size: 0.9em; border: 3px solid var(--color-primary) !important; border-radius: 5px !important; }

@media (max-width:991.99px){
   .header-foto {  height:200px; }
   .photo { height: 200px; }
   
   header #menu { position: fixed; z-index: 999; width: 100%; height: 100vh; top: 0; bottom: 0; background: var(--color-dark); }
   header .navbar-nav { margin-top: 70px !important; }
   header .navbar-nav a { text-align: center; }
   header #top.navbar .navbar-toggler { z-index: 9999; } 
   header #top.navbar .navbar-toggler.active { position: fixed; right: 0; }
   .banner-text { font-size: 1.2em; line-height: 1.6em;  }
   h2.title { font-size: 1.4em; }
   .titulo h2 { font-size: 1.1em; padding: 15px 0; }
   footer .redes h2 { font-size: 1.1em; }
   footer .redes a.fab, footer .redes a.far { font-size: 3em; }

}

@media (max-width: 767.99px) {
    .header-foto {  height:100px; }
    #sobre { background: var(--color-light); }
}

@media (max-height: 480px) {
	#slider-rodape .slider-item {height: 10vh; }
	#servicos .image { height: 30vh; }
}