@font-face {
    font-family: 'officinasanitcbooregular';
    src: url('../fonts/officina-sans-itc-book-webfont.woff2') format('woff2'),
         url('../fonts/officina-sans-itc-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Conv_OfficinaSansITC-Bold';
	src: url('../fonts/OfficinaSansITC-Bold.eot');
	src: local('☺'), url('../fonts/OfficinaSansITC-Bold.woff') format('woff'), url('../fonts/OfficinaSansITC-Bold.ttf') format('truetype'), url('../fonts/OfficinaSansITC-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
    font-display: swap;
}



/* SCROLLBAR */
::-webkit-scrollbar {
	width: 12px;
	border-radius: 20px;
}
/* Track */
::-webkit-scrollbar-track {
	background: #232323;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #00aeef;
	border-radius: 20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #00aeef;
}

.color-2{ color: #231F20}

.size-23{ font-size: 1.2vw}
.size-26{ font-size: 1.5vw}
.size-30{ font-size: 1.8vw}
.size-35{ font-size: 2vw}
.size-50{ font-size: 2.6vw}
.size-57{ font-size: 3.2vw}
.size-62{ font-size: 3.2vw}
.size-67{ font-size: 3.5vw}

.bold{font-family: 'Conv_OfficinaSansITC-Bold'}

html, body{ width: 100%; overflow-x: hidden; min-height: 100%; min-height: -webkit-fill-available; line-height: normal;  font-family: 'officinasanitcbooregular'}
img{ display: block}

body{ font-family: 'officinasanitcbooregular'; background: url('../img/body-bg.jpg') repeat-y; background-size: 100% auto}

.navbar{ align-items: flex-start}
.navbar .nav-item { position: relative; padding:0 1.2vw 0px 2vw; margin-left: 0.6vw; margin-right: 0.6vw}
.navbar .nav-item:last-child{ margin-right: 0.2vw}
.navbar-nav .nav-link{ letter-spacing:1px; font-size: 1.6vw; font-family: 'Conv_OfficinaSansITC-Bold'; color: #231f20 !important; line-height: 1; margin-bottom: .5rem}
.navbar-light .navbar-nav .nav-link span{ position: relative; z-index: 2}
.navbar-light .navbar-nav .nav-item:hover .nav-link::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7d406; border-radius:35px}
.navbar-light .navbar-nav .nav-link::after{ content: "";  position: absolute; bottom: .5rem; left: 1.7vw;
    width: 5vw; height: 0.8vw; background: #00aeef; margin-bottom: 3px; border-radius: 10px}

#myNavbar{ align-self: flex-end}
#header-menu-desktop{ margin-top: 5.1vw; align-self: flex-end}


.navbar-brand{ position: relative}
.navbar-brand img{ width: 16.5vw}
.navbar-brand::after{ content: ''; position: absolute; top: 50%; left: 100%; margin-top:9px; margin-left: 33px; 
	width: 1920px; height: 3px; background: url('../img/potilhado-menu.png') repeat-x;  }




#container{position: relative;
    background: url("../img/new-bg-desktop.png") no-repeat;
    background-size: 100% auto;
    color: #00aeef;
    letter-spacing: 0.6px;
    padding-bottom: 1px;
}

.container-fluid.wrapper{ position: relative; padding:0 9.2%}
#header .container-fluid.wrapper{ position: relative; padding:0 5.5%}

#header{position: relative; padding:2.9% 0 0.6vw}
#header::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: url('../img/potilhado-menu.png') repeat-x}


#section-1{ margin-top:6.3vw; line-height: 1.1}
#section-1 .grid{ display: flex; margin-top: 3.5vw}
#section-1 .grid .middle{ padding:0 10px}
#section-1 .title{ letter-spacing: 1.5px; line-height: 0.9; font-size:3.2vw; font-family: 'Conv_OfficinaSansITC-Bold'}
#section-1 .subtitle{ padding-top: 1.2vw; padding-left: 3vw; letter-spacing: 1.6px; text-align: center; line-height:1; font-size:3.9vw; color: #000000}
#section-1 .btn-saiba-mais{ display: table; margin:1vw auto 0}
#section-1 .btn-saiba-mais img{ width: 18vw}
#section-1 .seta{ display: table; margin:1vw auto 0}

#section-2{ line-height: 1.1; margin-top: 50vh;}
#section-2 .column-1-1{ transform: translateY(-50%); padding-top: 1.4vw} /* correção da metade da fonte */
#section-2 .txt-right{ text-align: right}
#section-2 .box{ background-color: #00aeef; margin-bottom: 1vw; padding: 1vw; border-radius: 8px; color: #fff; text-align: center; filter: drop-shadow(-3.536px 3.536px 0px rgba(187,187,187,0.53));}
#section-2 a{ text-decoration: none;}
#section-2 .btn-medio{ padding: 3.6vh 0vh 3.7vh 0vh;}
#section-2 .row-boxes{ padding: 20px 150px 0px 150px;}



.section-3{ padding-top: 9%; padding-left: 1%}
.section-3 .txt-title{ line-height: 1; font-size: 3.2vw; margin-bottom: 0}
.section-3 .txt{ text-align: center; font-family: 'Conv_OfficinaSansITC-Bold'; color: #000}
.section-3 .txt-description{ margin-top: 4vw; font-size: 1.7vw}
.section-3 .txt-description-2{ margin-top: 2vw; font-size: 1.7vw}
.section-3 .txt-common{ color: #000; margin-top: 2vw; font-size:1.4vw}

.section-3 .boxes-content{padding-left: 3vw; padding-top:13.1vw}
.section-3 .box{ background-color: #00aeef; margin-bottom: 3vw; padding: 1vw; border-radius: 8px; color: #fff}
.section-3 .box.p-extra{ padding:1.5vw 2.5vw 1.5vw}
.section-3 .box .title,
.section-3 .box-mini{ color: #231f20; font-family: 'Conv_OfficinaSansITC-Bold'; font-size:1.7vw; letter-spacing: 1px}
.section-3 .box p{ font-size:1.2vw}


.section-3 .box-mini{ padding:0.4vw 0; background-color: #00aeef; border-radius: 8px; text-align: center}
.section-3 .text-enem{ color: #231f20; font-family: 'Conv_OfficinaSansITC-Bold'; font-size:1vw; line-height: 1}




.section-4{ margin-top: 4.4vw}
.section-4 .text{ display: table; margin: 0 auto}
.section-4 .text span{ display: block; line-height: 0.95}
.section-4 .line-1{ padding-right:4vw; font-size: 3.5vw; color: #00aeef}
.section-4 .line-2{ padding-left:4vw; font-family: 'Conv_OfficinaSansITC-Bold'; font-size: 5.47vw; color: #231f20}
.section-4 .img-bicho{ opacity: 0; width: 61%; float: right; margin:-4vw 0 5vw}


#footer{ position: relative; text-align: center; margin-bottom: 1.5vw}
#footer .img-menina{ position: absolute; top: -1.5vw; margin-top: 3px; left:7.3vw; width: 34vw; transform: translateY(-100%)}

#footer::before{ content: ''; position: absolute; top: -1.5vw; left: 0; width: 100%; height: 3px; background: url('../img/potilhado-menu.png') repeat-x}
#footer::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: url('../img/potilhado-menu.png') repeat-x}



#footer .footer{ display: flex; align-items: center; font-size: 1.5vw; margin-bottom: 1vw} 
#footer .footer img{ margin-right: 1.5vw; max-width: 2vw} 
#footer .txt-footer-1{ color: #231F20; font-weight: bold; margin-bottom: 0.5vw}  
#footer .txt-footer-2,
#footer .text-footer-2{ color: #00aeef; font-family: 'Conv_OfficinaSansITC-Bold'}

.container-special-1{ padding: 0 4%}


@media screen and (max-width:1440px){
    .section-4 .img-bicho{ margin-bottom: 1vw}
}

@media screen and (max-width:991px){
    ::-webkit-input-placeholder{ font-size: 3.7vw}
	::-moz-placeholder{ font-size: 3.7vw}
	:-ms-input-placeholder{font-size: 3.7vw}
	input:-moz-placeholder{font-size: 3.7vw}
    ::-webkit-scrollbar{ display: none;}

    .desktop{ display: none !important}

    #container{ height: 100vh; background: url("../img/bg-mobile.jpg") no-repeat bottom fixed; background-size: cover}
    .container-fluid.wrapper{ padding: 0 7%}

    #header .navbar{ padding-bottom: 0}
    #header .menu-mobile-w100{ padding-bottom: 0}
    .navbar-brand{ margin-right:0; padding-bottom: 0}
    .navbar-brand img{ width: auto; max-width: 50%; margin: 0 auto}

    #section-1{ margin-top: 15px}
    #section-1 .photos{ display: flex; flex-direction: column}
    #section-1 .photos .grid{ flex-direction: column}
    #section-1 .size-62{ font-size: 6.8vw}


    
    #section-1 .photos .text{ margin-top: 9vh}
    #section-1 .photos .text .title{ line-height: 1.3; font-family: 'officinasanitcbooregular'; font-size: 6.5vw}
    #section-1 .photos .text .m-bold{ font-family: 'Conv_OfficinaSansITC-Bold'}
    #section-1 .photos .text .subtitle{ line-height: 1.3; font-size: 6.5vw; text-align: right}


    #section-1 .navbar-nav{ margin-top: 10vw; margin-bottom: 10vw;}
    #section-1 .navbar-nav .nav-link::after{ left: -2vw; width: 20vw; height: 4vw; bottom: 0.75rem}

    #section-1 .navbar-nav .nav-link{ font-size: 8vw; padding: 0.5rem}
    #section-1 .navbar-nav .nav-link span{ position: relative; z-index: 2}


    .caldera-form{ padding:15px; background-color: rgba(0, 172, 241, 0.5); border-radius: 15px}
    .caldera-form .mat-input .form-control{ height: 34px}
    
    .caldera-form .mat-input .control-label{ font-size: 14px; color: #616161; font-family: 'officinasanitcbooregular'}
    .caldera-form .btn, .btn-default{ font-size: 15px; margin-top: 10px} 
    .caldera-form input[type=submit] { font-size: 15px}
    .caldera-form{ padding-top: 5%; width: 100%; padding-right: 5%; padding-left: 5%}
    .caldera-form .row .col-sm-6{ max-width:50%}

    .caldera-form input[type=submit], .caldera-form .btn{ padding: 1vw 10vw; border-radius: 8px; box-shadow:none}


    .section-3 .txt-title{ display: table; margin-left: auto; margin-right: auto; font-size: 6.7vw}
    .section-3 .txt-title .m-blank{ color:#020202; font-family: 'Conv_OfficinaSansITC-Bold' }
    .section-3 .txt-description,
    .section-3 .txt-description-2{ font-size:4.65vw; margin-top:10vw}

    .section-3 .txt-common{ font-size:4.65vw}

    .section-3 .boxes-content{ padding:5vw 0 0}

    .section-3 .box{ margin-bottom: 3vw} 
    .section-3 .box .title, .section-3 .box-mini{ font-size: 4.65vw}
    .section-3 .box p{ font-size: 4.65vw}
    body .section-3 .box,
    body .section-3 .box.p-extra{ padding: 15px}
    body .section-3 .text-enem{ font-size: 3.5vw; padding-left: 0}


    .container-special-1{ padding: 0 7%}
    .section-4 .text{ margin-top: 15vw}
    .section-4 .line-1{ font-size: 7vw}
    .section-4 .line-2{ font-size: 10vw}
    .section-4 .img-bicho{ width: 100%; opacity: 1; margin: 2rem 0}

    #footer::before,
    #footer::after,
    #footer .img-menina{ display: none}

    #footer{ padding: 2rem; text-align: left}
    #footer .footer{ margin-bottom: 1rem; font-size: 6vw}
    #footer .txt-footer-1{ font-weight: normal}
    #footer .txt-footer-2{ font-weight: normal}
    #footer .txt-footer-1.mobile{font-family: 'Conv_OfficinaSansITC-Bold'}
    #footer .sup{ vertical-align: top; font-size: 70%}
    #footer .row{ flex-direction: column}


    #footer .footer img{ max-width: 22px; margin-right: 4vw}


    .navbar-light .navbar-nav .nav-item:hover .nav-link::before { display: none !important}
    

    #section-2{ margin-top: 6vw}
    #section-2 .column-1-1{ transform: translateY(0); font-size: 10vw }
    #section-2 .column-1-1 .txt-right{ margin-bottom: 0; }
    #section-2 .column-1-2 .m-blank{ color:#020202; font-size: 10vw; display: block; }
    #section-2 .column-1-2{  text-align: center; margin-bottom: 5vw;  }
    #section-2 .column-1-2 .m-text{  display: block;  }
    #section-2 .column-1-2 .m-help{  font-size: 10vw }
    #section-2 .column-1-2 .m-help-2{ margin: 15vw 0; font-family: 'Conv_OfficinaSansITC-Bold';  font-size: 6vw }
    #section-2 .btn-gmbr{ font-size: 6vw; color: #fff; background-color: #00adf2; padding: 1vw 10vw; border-radius: 8px}
    #section-2 .row-boxes{ padding: 0px 50px 0px 50px;}
    #section-2 .box{ padding: 1vw; margin-bottom: 1vw; border-radius: 8px; font-size: 4.65vw;}
    #section-2 .boxes{ margin-bottom: 5vw;}
    
    #section-2 .btn-medio{ padding: 12px 0vh 12px 0vh;}

}