@keyframes loaded {
  0% {
    opacity:1;
    z-index:25;
  }
  99% {
    opacity:0;
    z-index:25;
  }
  100% {
    opacity:0;
    z-index:-1;
  }
}

@keyframes dash-load {
  0% {
    stroke-dashoffset: 250px;
    stroke-opacity:1;
  }
  33% {
    stroke-dashoffset: 0;
    stroke-opacity:1;
  }
  66% {
    stroke-dashoffset: 0;
    stroke-opacity:1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-opacity:0;
  }
}

#webdoor .banner-rot {background-size:cover;background-position:center center;position:relative;width:100%;height:100%;;position: absolute;}
#webdoor .banner-rot.b-ativo {opacity:1;transform:scale(1);transition:transform 0.4s 0.4s,opacity 0.4s 0s;z-index:20;}
#webdoor .banner-rot.b-inativo {opacity:0;transform:scale(0.8);transition:transform 0.4s 0s,opacity 0.4s 0.4s;z-index:1;}
#webdoor .banner-rot.b-ativo .link {height: 100%;position: absolute;width: 100%;}
#webdoor .banner-rot.b-ativo .link a {display: block;width:100%;height:100%;}

@media screen and (min-width:1281px) {
	#webdoor .banner1 {background-image:url('/assets/img/webdoor-banner1-1920.webp');}
}

@media screen and (min-width:601px) and (max-width:1281px) {
	#webdoor .banner1 {background-image:url('/assets/img/webdoor-banner1-1280.webp');}
}

@media screen and (min-width:451px) and (max-width:600px) {
	/* #webdoor .banner1 {background-image:url('/assets/img/webdoor-banner1-600.webp');} */
	/*#webdoor .banner1 {background-image:url('/assets/img/site-banner-apresentacao-mobile.jpg');}*/
	#webdoor .banner1 {background-image:url('/assets/img/site-banner-apresentacao-mobile.webp');}
	#webdoor .banner-container .banner-load,
	#webdoor .banner-container .textura-e,
	#webdoor .banner-container .textura-d { display:none; }
}

@media screen and (max-width:450px) {
	/* #webdoor .banner1 {background-image:url('/assets/img/webdoor-banner1-450.webp');} */
	/*#webdoor .banner1 {background-image:url('/assets/img/site-banner-apresentacao-mobile.jpg');}*/
	#webdoor .banner1 {background-image:url('/assets/img/site-banner-apresentacao-mobile.webp');}
	#webdoor .banner-container .banner-load,
	#webdoor .banner-container .textura-e,
	#webdoor .banner-container .textura-d { display:none; }
}

#webdoor .banner .textura-e {width: 16vw;height: 33vw;position: absolute;bottom: 0;background-image: url('/assets/img/l-tex.webp');left: 0;background-size: contain;background-repeat: no-repeat;}
#webdoor .banner .textura-d {width: 16vw;height: 33vw;position: absolute;top: 0;background-image: url('/assets/img/r-tex.webp');right: 0;background-size: contain;background-repeat: no-repeat;background-position:right top;transform:scaleY(-1);}

#webdoor .banner-container .textura-e {width: 16vw;height: 33vw;position: absolute;bottom: 0;background-image: url('/assets/img/l-tex.webp');left: 0;background-size: contain;background-repeat: no-repeat;}
#webdoor .banner-container .textura-d {width: 16vw;height: 33vw;position: absolute;top: 0;background-image: url('/assets/img/r-tex.webp');right: 0;background-size: contain;background-repeat: no-repeat;background-position:right top;transform:scaleY(-1);}

#webdoor #txt-abertura {position: absolute;text-align: left;bottom: 8vw;left: 21vw;}
#webdoor #txt-abertura a::after {display:none;}
#webdoor #txt-abertura p {text-transform: uppercase;font-size: 0.8em;}
#webdoor #txt-abertura p.banner-titulo { font-size: 1.1em; font-weight:600; color:var(--darkblue); }

@media screen and (min-width:850px) {
	#webdoor #txt-abertura {font-size: 1.975vw;width:25vw;}
}

@media screen and (max-width:849px) {
	#webdoor #txt-abertura {font-size: 17px;width:212px;text-shadow: 0 0 7px rgb(255, 255, 255,1);}
}

#content .principal h1 {color: var(--darkblue);font-size: 3em;text-transform: uppercase;font-weight: 600; max-width: 1000px;margin: 0 auto 1rem;}
#content .principal h2.intro {color: #333; font-size: 1.7em;text-transform: uppercase;font-weight: 400; max-width: 1000px;margin: 0 auto;}
#content .section .logo-intro {width:30vw;margin:3vw auto;display:block;height: auto;}
#content .principal p.txt-intro {max-width: 1100px;margin: 0 auto;font-size: 1.2em;padding: 2em 0 0 0;width: 94%;}
#content .principal div.proposito { max-width: 1000px; margin: 2vh auto 0; font-size: 1.1em; }
#content .principal div.proposito p { margin-bottom: 1em;}
#content .principal div.proposito p a {color:#0074d0;}

.section .principal {flex:1;width:100%;}

#content .section .cardholder {width:80vw;margin:1vw auto;display:flex;justify-content:center;flex-wrap:wrap;}
#content .section .cardholder .card {width:15.5em;display:flex;flex-direction:column;font-size:21px;border-radius: 1.1em;overflow: hidden;margin:2vw;box-shadow:0 0 9px 3px rgba(0,0,0,0.1);background-color: var(--darkblue);}
#content .section .cardholder .card .topo {height:7.5em;background-color:var(--darkblue);display: flex;justify-content:center;align-items:flex-end;}
#content .section .cardholder .card .topo .icon {height:4.5em;width:4.5em;background-color: var(--green);border-radius:500px;margin-bottom:-2.25em;/*! box-shadow:0px 3px 5px 2px rgba(0,0,0,0.17); */color:#ffffff;display:flex;justify-content: center;align-items: center;border: 6px solid #fff;position: relative;}
#content .section .cardholder .card .topo .icon i {font-size:2em;}
#content .section .cardholder .card .topo .icon img {width:2em;}
#content .section .cardholder .card .txt {padding:4em 1em 3em 1em;background-color:var(--darkblue);color:#ffffff;}
#content .section .cardholder .card .txt h3 {font-size:1em;padding:0 0 0.5em 0; color: #fff; text-transform: none; font-weight: bold;}
#content .section .cardholder .card .txt h3 span {color:var(--lightblue);font-size:1.5em;display:block;}
#content .section .cardholder .card .txt p {font-size:0.85em;}

#content .section .cardholder .card .card-personalizacao {background-image: url('/assets/img/conteudo-personalizado.webp');background-size: cover;background-position: center center;background-repeat: no-repeat;}
#content .section .cardholder .card .card-dicas {background-image: url('/assets/img/dicas-especiais.webp');background-size: cover;background-position: center center;background-repeat: no-repeat;}
#content .section .cardholder .card .card-material-exclusivo {background-image: url('/assets/img/material-exclusivo.webp');background-size: cover;background-position: center center;background-repeat: no-repeat;}

@media screen and (min-width:1550px) {
	#content .section .cardholder .card {font-size:21px;}
	#content .section .cardholder .card:first-child {margin-left:0;}
	#content .section .cardholder .card:last-child {margin-right:0;}
	.bt-cta {font-size:20px;}
}

@media screen and (min-width:1280px) and (max-width:1549px) {
	#content .section .cardholder .card {font-size:18px;}
	#content .section .cardholder .card:first-child {margin-left:0;}
	#content .section .cardholder .card:last-child {margin-right:0;}
	.bt-cta {font-size:19px;}
}

@media screen and (min-width:768px) and (max-width:1279px) {
	#content .section .cardholder .card {font-size:16px;}
	.principal .bt-cta {font-size:18px;}
}

@media screen and (max-width:767px) {
	#content .section .cardholder .card {font-size:16px;margin:18px;}
	.principal .bt-cta {font-size:16px;}
}

@media screen and (max-width:680px) and (orientation:landscape){
	#content .section .cardholder .card {flex-direction:row;width:25em;}
	#content .section .cardholder .card .topo {height:unset;width:19em;justify-content: flex-end;align-items: center;}
	#content .section .cardholder .card .topo .icon {margin-bottom: unset;margin-right:-2.25em;}
	#content .section .cardholder .card .txt {padding: 4em 1em 3em 2.8em;}
}

/*
CARROSSEL
*/

#destaque {padding:5vw 2vw 10vw 2vw;background-color: var(--lightgrey);font-size:18px;}
#destaque p.titulo-detalhe {color:var(--lightblue);font-size:1.2em;text-transform:uppercase;letter-spacing:0.05em;}
#destaque .carrossel-container {width:94%;max-width:1450px;margin:4vw auto;}
#destaque .carrossel-container .draggable {padding: 15px 0;}
#destaque .carrossel-item {text-align: left;margin:0 auto;position: relative;box-shadow: 0 0 9px 3px rgba(0,0,0,0.1);border-radius: 20px;overflow: hidden;background-color:#ffffff;}
#destaque .carrossel-item .carr-img {position: absolute;height: 100%;top: 0px;overflow: hidden;}
#destaque .carrossel-item .carr-img img {width:100%;object-fit: cover;width: 100%;display: block;}
#destaque .carrossel-item .carr-txt {padding: 1.25em;margin: 13em 0 0 0;position: relative;background-color: #ffffff;min-height: 18em;display: flex;flex-direction: column;}
#destaque .carrossel-item .carr-txt h3 {color:var(--darkblue);font-size:1.1em;padding:0.5em 0;font-weight:700;}
#destaque .carrossel-item .carr-txt h3 a:hover { text-decoration: underline; }
#destaque .carrossel-item .carr-txt h3 a::after { display:none; }
#destaque .carrossel-item .carr-txt p.data {font-size: 0.85em !important;padding: 0 0 1em 0;}
#destaque .carrossel-item .carr-txt p.data:before {font-family:'Material Design Icons'; content:'\F0E17';margin:0 5px 0 0;font-size:1em;}
#destaque .carrossel-item .carr-txt p {font-size: 0.85em;}
#destaque .carrossel-item .carr-txt p:last-child a {overflow:hidden;display:inline-block;background-color:var(--lightblue);width: max-content;width: -webkit-max-content;padding:0.6em 1.25em;color:#ffffff;font-size:1.1em;margin:0.5em 0 0 auto;border-radius:500px;transition:all 0.4s;}
#destaque .carrossel-item .carr-txt p:last-child a:after {display:none;}
#destaque .carrossel-item .carr-txt p:last-child a:hover {background-color:var(--green);}
#destaque .carrossel-item .carr-txt p:last-child a:before {display:none;}
#destaque .carrossel-item .carr-txt p:last-child a:hover:before {left:0;}

#destaque .carrossel-item .carr-txt p:last-child {display: flex;flex-direction: column;justify-content: space-between;flex: 1;}
#destaque .carrossel-item .novidade-blog:before {content: 'BLOG';position: absolute;right: 0;background-color: var(--lightblue);color: #ffffff;padding: 0 1em 0 1.5em;top: -1.5625em;border-top-left-radius: 1.5625em;border-bottom-left-radius: 1.5625em;height: 3.125em;display: flex;align-items: center;border-top: 5px solid #ffffff;border-left: 5px solid #ffffff;border-bottom: 5px solid #ffffff;box-sizing: border-box !important;}
#destaque .carrossel-item .novidade-dicas:before {content: 'DICAS';position: absolute;right: 0;background-color: var(--green);color: #ffffff;padding: 0 1em 0 1.5em;top: -1.5625em;border-top-left-radius: 1.5625em;border-bottom-left-radius: 1.5625em;height: 3.125em;display: flex;align-items: center;border-top: 5px solid #ffffff;border-left: 5px solid #ffffff;border-bottom: 5px solid #ffffff;box-sizing: border-box !important;}
#destaque .carrossel-item .novidade-faq:before {content: 'FAQ';position: absolute;right: 0;background-color: var(--darkblue);color: #ffffff;padding: 0 1em 0 1.5em;top: -1.5625em;border-top-left-radius: 1.5625em;border-bottom-left-radius: 1.5625em;height: 3.125em;display: flex;align-items: center;border-top: 5px solid #ffffff;border-left: 5px solid #ffffff;border-bottom: 5px solid #ffffff;box-sizing: border-box !important;}


@media screen and (min-width:1550px) {
	#destaque {font-size:17px;}
	#destaque .carrossel-item {width:325px;}
}

@media screen and (min-width:1280px) and (max-width:1549px) {
	#destaque {font-size:16px;}
	#destaque .carrossel-item {width:300px;}
}

@media screen and (min-width:768px) and (max-width:1279px) {
	#destaque {font-size:15px;}
	#destaque .carrossel-item {width:280px;}
}

@media screen and (max-width:767px) {
	#destaque {font-size:14px;}
	#destaque .carrossel-item {width:280px;}
	#destaque .carrossel-item .carr-txt p:last-child a { width:100%; text-align:center; margin:1em 0 0 0; }
}

.bt-cta {background-color: var(--lightblue);border-radius: 600px;height:4em;display: flex;width: max-content;width: -webkit-max-content;margin: 2vw auto;transition:all 0.4s;}
.bt-cta:after {display:none;}
.bt-cta span:first-child {background-color: rgba(0,0,0,0.17);border-radius:500px;color:#ffffff;height:2em;width:2em;display: inline-flex;justify-content:center;align-items:center;font-size:2em;}
.bt-cta span:last-child {font-size:1.5em;font-weight:300;color:#ffffff;padding:0 1.4em 0 0.7em;display: inline-flex; justify-content: center;align-items: center;width: max-content;width: -webkit-max-content;}
.bt-cta:hover {background-color: var(--green);}

.bt-cta span img {width:1em;}

@media screen and (max-width:500px) {
	#content .principal h1 {
		font-size: 2.2em;
	}
	.section .principal {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#destaque .carrossel-item .carr-txt p:last-child {
		font-size: .9rem;
	}
}