/* ---------- ALINHAMENTOS DE IMAGENS (Superior/inferior esquerdo e direito) ---------*/

#banner .item img.imagemTopoEsquerda,
#banner .item img.imagemTopoDireita,
#banner .item img.imagemInferiorEsquerdo,
#banner .item img.imagemInferiorDireito {width: auto}

.imagemTopoEsquerda {position: absolute;left: 0;top: 173px;}
.imagemTopoDireita {position: absolute;right: 0;top: 173px;}
.imagemInferiorEsquerdo {position: absolute;left: 0;bottom: 0;}
.imagemInferiorDireito {position: absolute;right: 103px;bottom: 40px;}
.imagemCenter {margin: 0 auto;}
.conteudoPrincipalBanner .imagemTopoDireita,
.conteudoPrincipalBanner .imagemTopoEsquerda {top: -341px;}
@media screen and (max-width:1380px) {
.imagemTopoEsquerda,.imagemTopoDireita { top: 165px;}
#banner .item .conteudoPrincipalBanner .imagemTopoDireita img,
#banner .item .conteudoPrincipalBanner .imagemTopoEsquerda  img {width: auto !important;}
#banner .item .conteudoPrincipalBanner .imagemTopoDireita,
#banner .item .conteudoPrincipalBanner .imagemTopoEsquerda {top: -251px;}
}
@media screen and (max-width:1320px) {
.imagemTopoEsquerda {width: 112px; }
.imagemTopoDireita {width: 112px}
}
@media screen and (max-width:1055px) {
.imagemTopoEsquerda {top: 78px;}
.imagemTopoDireita {top: 78px;}
#banner .item .conteudoPrincipalBanner .imagemTopoDireita,
#banner .item .conteudoPrincipalBanner .imagemTopoEsquerda {top: -195px;}
}
@media screen and (max-width:975px) {
.imagemTopoEsquerda,
.imagemTopoDireita {display:none;}
}

/* -------------------------- ALINHAR ELEMENTOS DE BLOCO---------------------------------*/

.centralizarElementoVertical_Container {
	display: table;	
	height: 500px;
}

.centralizarElementoVertical {
	display:table-cell;
	vertical-align: middle;
	
}



/* ------------------------------------ COLUNAS ------------------------------------------*/

/* 2 colunas */
#banner .SliderCol2 {width: 48%;float:left;box-sizing: border-box;margin-right: 3%;}
#banner .SliderCol2.ultimo { margin-right:0 !important}




/* ====================== ESTILO 0: NEUTRO =================================*/
#banner .item .conteudoPrincipalBanner  img {
	width:initial;
}
#banner .item .bgBanner {
	position: absolute;
	height: 824px;
	width: 100%;
	background-repeat: no-repeat;
background-position: bottom;
}
#banner .item .alinhaVerticalContainer{display:table;height: 674px;padding-top: 140px;width: 100%;position: relative;}
#banner .item .alinhaVerticalContainer .alinhaVertical{display:table-cell; vertical-align:middle;}
@media screen and (max-width:1380px){ 
#banner .item .bgBanner {
    height: 636px;
}
#banner .item .alinhaVerticalContainer {
    display: table;
    height: 636px;
    padding-top: 132px;
}
}
@media screen and (max-width:1055px){ 
#banner .item .bgBanner,
#banner .item .alinhaVerticalContainer {
    height: 484px;
}
#banner .item .alinhaVerticalContainer {
    padding-top: 0;
}
}
@media screen and (max-width:768px){ 
#banner .item .alinhaVerticalContainer {
    display: block;  
	padding-top: 30px;
}
#banner .item .alinhaVerticalContainer .alinhaVertical {
   display: inline;
    width: 100%;
}
}

/* ====================== ESTILO 1: BG + 1 PNG Centralizado =================================*/

#banner .item.PngFrente .bgBanner,
#banner .item.PngFrente .bgBannerMobile {position: absolute; width: 100%; height:  100%; background-size: cover;background-position: center;}
#banner .item.PngFrente .overlayBanner {background: rgba(255, 255, 255, 0.7)}
#banner .item.PngFrente .bgBannerMobile {display:none}
#banner .item.PngFrente .alinhaVerticalContainer{display:table;height: 683px;padding-top: 173px;position: relative;width: 100%;}
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical{display:table-cell; vertical-align:middle;}
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-left: 19%;padding-right: 19%;TEXT-ALIGN: CENTER;position:relative;}
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner img {height: auto;width: auto;display:inline;}

@media screen and (max-width:1380px){
#banner .item.PngFrente .alinhaVerticalContainer {height: 503px;padding-top: 165px;}	
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-top: 0;padding-bottom: 0;padding-left: 15%;padding-right: 15%;}	
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner img {width: 30%;}
#banner .item.PngFrente .bgBanner{height: 668px !important;}
}
@media screen and (max-width:1055px){
#banner .item.PngFrente .alinhaVerticalContainer{margin-top:0;height: 391px;padding-top: 78px;}
#banner .item.PngFrente .alinhaVerticalContainer {z-index: 1;}
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding: 0;margin: 0 auto;width: 100%;text-align: center;}
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner img {width: 237px;}
}
@media screen and (max-width:768px){ 
#banner .item.PngFrente .bgBannerMobile {display: block;background-position: 0 81px;background-repeat: no-repeat;} 
}
@media screen and (max-width:320px){ 
#banner .item.PngFrente .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner img {width:235px}
}
/*
<a href="https://mindway.edu.es/business-school/lifestyle-brands/">
	<div class="item PngFrente">	
		<div class="overlayBanner" style="background: rgba(255, 255, 255, 0.7)"></div>
		<div class="bgBanner" style="background-image:url('images/background-lifestyle-brands.jpg'); position: absolute; width: 100% ;height:  100%; background-size: cover;background-position: center;"> </div>		
	
		<!-- Caso precisar, use a div abaixo p/ colocar uma img menor p/ celulares. OBS: sera preciso dar display none em .bgBanner no breakpoint 768px pro banner especifico -->
		<div class="bgBannerMobile" style="background-image:url('images/slider/background-lifestyle-brands_mob.jpg');"> </div>	
		
		<div class="alinhaVerticalContainer">			
			<div class="alinhaVertical">				
				<div class="conteudoPrincipalBanner">			
					<img src="images/slider/infos-lifestyle-brands.png" alt=""> <!-- ALTURA MAXIMA PNG: 560px -->
				</div>
			</div>
		</div>			
	</div>
</a> */

/*  fim estilo 1 */





/* ====================== ESTILO 2: BG + 2 PNGs (1 Direito e 1 Esquerdo) ===========================                         

		Exemplo arte: http://mirror.faap.br/images/slider/estilos-banners-exemplo-mod-2.jpg
		
====================================================================================================*/

#banner .item.PNGsEsquDireito .bgBanner,
#banner .item.PNGsEsquDireito .bgBannerMobile {position: absolute; width: 100%; height:  100%; background-size: cover;background-position: center;}
#banner .item.PNGsEsquDireito .overlayBanner {background: rgba(255, 255, 255, 0.7)}
#banner .item.PNGsEsquDireito .bgBannerMobile {display:none}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer{display:table;height: 683px;padding-top: 173px;position: relative;width: 100%;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical{display:table-cell; vertical-align:middle;width:100%}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-left: 19%;padding-right: 19%;TEXT-ALIGN: CENTER;position:relative;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner img {height: auto;width: auto;display:inline;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda {left: 18%;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita {right: 18%;}

@media screen and (max-width:1680px){ 
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda {left: 12%;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita {right: 12%;}
}
@media screen and (max-width:1380px){ 
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda {left: 8%;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita {right: 12%;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda img,
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita img {width: 75% !important;}
}
@media screen and (max-width:1320px){ 
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda {width: 47% !important;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita { width: 18% !important;}
}
@media screen and (max-width:1055px){ 
#banner .item.PNGsEsquDireito .alinhaVerticalContainer {display: table; height: 422px; padding-top: 78px; position: relative; z-index: 1; width: 100%;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner  {max-width: 625px;margin: 0 auto;padding-right: 0;padding-left: 0;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda,
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita {margin-top: 0;position: unset;  margin: 0 auto;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda {width: 76% !important;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita {width: 28% !important;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda img {width: 100% !important;}
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita img {width: 100% !important;}
}
@media screen and (max-width:975px){ 
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoEsquerda,
#banner .item.PNGsEsquDireito .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner .imagemTopoDireita { display:block;}
}
@media screen and (max-width:768px){ 
#banner .item.PNGsEsquDireito .bgBannerMobile {display: block;background-position: 0 81px;background-repeat: no-repeat;} 
}

/* CÓDIGO DE EXEMPLO ABAIXO:*/
/*
	<a href="http://vestibular.faap.br/cursos/processos-gerenciais-empreendedorismo-inovacao" target="blank">
		<div class="item PNGsEsquDireito">	
			<div class="overlayBanner"></div>
			<div class="bgBanner" style="background-image:url('images/bg-processos.jpg');"> </div>
			
			<!-- Caso precisar, use a div abaixo p/ colocar uma img menor p/ celulares. OBS: sera preciso dar display none em .bgBanner no breakpoint 768px pro banner especifico -->			
			<div class="bgBannerMobile" style="background-image:url('images/slider/bg-processos_mob.jpg');"> </div>			
			
			<div class="alinhaVerticalContainer">				
				<div class="alinhaVertical">				
					<div class="conteudoPrincipalBanner">	
						<div class="imagemTopoEsquerda"><img src="images/slider/titulo-processos.png" alt=""> </div>
						<div class="imagemTopoDireita infos"><img src="images/slider/vestibular-processos-v3.png" alt=""> </div>
					</div>
				</div>
			</div>			
		</div>
	</a>
*/
/*  fim estilo 2  */



/* ====================== ESTILO 3: BG + Texto Centralizado =========================================*/

#banner .item.TextoCenter .bgBanner,
#banner .item.TextoCenter .bgBannerMobile {position: absolute; width: 100% ;height:  100%; background-size: cover;background-position: center;}
#banner .item.TextoCenter .bgBannerMobile {display:none}
#banner .item.TextoCenter .alinhaVerticalContainer{display:table;height: 683px;background: rgba(255, 255, 255, 0.8588235294117647);padding-top: 173px;position: relative;width: 100%;}
#banner .item.TextoCenter .alinhaVerticalContainer h2{color: #173146;font-size:40px;}
#banner .item.TextoCenter .alinhaVerticalContainer ul {margin-bottom:40px;}
#banner .item.TextoCenter .alinhaVerticalContainer ul li{color: #173146;font-size:30px;list-style: disc;font-weight:600;padding:0;line-height: 40px;list-style-position: inside;}
#banner .item.TextoCenter .alinhaVerticalContainer img {width:initial;}
#banner .item.TextoCenter .alinhaVerticalContainer p{color: #173146;font-size:30px;font-weight:600;padding:0;line-height: 40px;}
#banner .item.TextoCenter .alinhaVerticalContainer em{font-style:italic;}
#banner .item.TextoCenter .alinhaVerticalContainer strong{font-weight:900;}
#banner .item.TextoCenter .alinhaVerticalContainer a{color:#1384af;}
#banner .item.TextoCenter .alinhaVerticalContainer a:hover {color:#27a6d6}
#banner .item.TextoCenter .alinhaVerticalContainer .alinhaVertical{display:table-cell; vertical-align:middle;}
#banner .item.TextoCenter .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-left: 19%;padding-right: 19%;text-align: center;position:relative;}

@media screen and (max-width:1616px){
#banner .item.TextoCenter .alinhaVerticalContainer p{font-size:27px;}
}
@media screen and (max-width:1380px){
#banner .item.TextoCenter .alinhaVerticalContainer {height: 504px;padding-top: 164px;}	
#banner .item.TextoCenter .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-left: 15%;padding-right: 15%;}
#banner .item.TextoCenter .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner p {font-size:23px}
#banner .item.TextoCenter .bgBanner{height: 668px !important;}
}
@media screen and (max-width:1055px){
#banner .item.TextoCenter .overlayBanner {background: rgba(255, 255, 255, 0.8588235294117647);}
#banner .item.TextoCenter .alinhaVerticalContainer{margin-top:0;height: 378px;padding-top: 78px;z-index: 1;background: none;}	
#banner .item.TextoCenter .alinhaVerticalContainer p{font-size:20px;line-height: 27px;color: #00274b;}
#banner .item.TextoCenter .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding: 0 20px;margin-top: 0;background: none;}
}
@media screen and (max-width:869px){
#banner .item.TextoCenter .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{background:none;}
#banner .item.TextoCenter .alinhaVerticalContainer p{line-height:33px;color:#112434;}
}
@media screen and (max-width:768px){ 
#banner .item.TextoCenter .bgBannerMobile {display: block;background-position: 0 0;background-repeat: no-repeat;} 
}
@media screen and (max-width:600px){
#banner .item.TextoCenter .alinhaVerticalContainer p{font-size:22px;}
}
@media screen and (max-width:455px){
#banner .item.TextoCenter .alinhaVerticalContainer p{line-height:24px;}
}

/* CÓDIGO DE EXEMPLO ABAIXO:*/
/*
<a href="#">
	<div class="item TextoCenter">
		<div class="overlayBanner"></div>		
		<div class="bgBanner" style="background-image:url('images/slider/10-melhores-enem-colegio-rp-faap_bg.jpg'); position: absolute; width: 100% ;height:  100%; background-size: cover;background-position: center;"> </div>
		
		<!-- Caso precisar, use a div abaixo p/ colocar uma img menor p/ celulares. OBS: sera preciso dar display none em .bgBanner no breakpoint 768px pro banner especifico -->
		<div class="bgBannerMobile" style="background-image:url('images/slider/10-melhores-enem-colegio-rp-faap_mob.jpg');"> </div>
		
		<div class="alinhaVerticalContainer">			
			<div class="alinhaVertical">				
				<div class="conteudoPrincipalBanner">	
					<p>
					Lorem ipsum dolor <em>sit amet</em>, consectetur <a href="#">adipiscing elit</a>.  <strong>Donec commodo</strong> dignissim porttitor. In id ullamcorper ipsum
					</p>
				</div>
			</div>
		</div>		
	</div>
</a>
*/
/* fim estilo 3  */




/* ====================== ESTILO 4: BG + 2 colunas =========================================

		Exemplo arte: http://mirror.faap.br/images/slider/estilos-banners-exemplo-mod-4.jpg
		
====================================================================================================*/

#banner .item.Colunas2 .bgBanner,
#banner .item.Colunas2 .bgBannerMobile {position: absolute; width: 100% ;height:  100%; background-size: cover;background-position: center;}
#banner .item.Colunas2 .bgBannerMobile {display:none}
#banner .item.Colunas2 .alinhaVerticalContainer{display:table;height: 683px;padding-top: 173px;position: relative;width: 100%;}
#banner .item.Colunas2 .alinhaVerticalContainer h2{color: #173146;font-size:40px;}
#banner .item.Colunas2 .alinhaVerticalContainer ul {margin-bottom:40px;}
#banner .item.Colunas2 .alinhaVerticalContainer ul li{color: #173146;font-size:30px;list-style: disc;font-weight:600;padding:0;line-height: 40px;list-style-position: inside;}
#banner .item.Colunas2 .alinhaVerticalContainer img {width:initial;}
#banner .item.Colunas2 .alinhaVerticalContainer p{color: #173146;font-size:30px;font-weight:600;padding:0;line-height: 40px;}
#banner .item.Colunas2 .alinhaVerticalContainer em{font-style:italic;}
#banner .item.Colunas2 .alinhaVerticalContainer strong{font-weight:900;}
#banner .item.Colunas2 .alinhaVerticalContainer a{color:#1384af;}
#banner .item.Colunas2 .alinhaVerticalContainer a:hover {color:#27a6d6}
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical{display:table-cell; vertical-align:middle;}
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-left: 19%;padding-right: 19%;text-align: center;position:relative;}

@media screen and (max-width:1616px){
#banner .item.Colunas2 .alinhaVerticalContainer p{font-size:27px;}
}
@media screen and (max-width:1380px){ 
#banner .item.Colunas2 .alinhaVerticalContainer {height: 504px;padding-top: 30px;}	
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding-left: 15%;padding-right: 15%;}
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner p {font-size:23px}
#banner .item.Colunas2 .bgBanner{height: 668px !important;}
}
@media screen and (max-width:1055px){
#banner .item.Colunas2 .overlayBanner {background: rgba(255, 255, 255, 0.8588235294117647);}
#banner .item.Colunas2 .alinhaVerticalContainer{margin-top:0;height: 378px;padding-top: 78px;z-index: 1;background: none;}	
#banner .item.Colunas2 .alinhaVerticalContainer p{font-size:20px;line-height: 27px;color: #00274b;}
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{padding: 0 20px;margin-top: 0;background: none;}
#banner .item.Colunas2 .bgBanner {height: 500px !important;}
.centralizarElementoVertical_Container { height: 282px;}
}
@media screen and (max-width:869px){
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner{background:none;}
#banner .item.Colunas2 .alinhaVerticalContainer p{line-height:33px;color:#112434;}
}
@media screen and (max-width:768px){ 
#banner .item.Colunas2 .bgBannerMobile {display: block;background-position: 0 0;background-repeat: no-repeat;} 
}

@media screen and (max-width:748px){ 
#banner .SliderCol2 {width: 100%; float: none;  margin-right: 0;}
#banner .item.Colunas2 .alinhaVerticalContainer h2 {font-size: 26px;  padding: 17px 0 14px 0;}
#banner .item.Colunas2 .alinhaVerticalContainer .alinhaVertical .conteudoPrincipalBanner p{font-size: 16px;  font-weight: 500; padding-bottom: 21px;}
}
@media screen and (max-width:600px){
#banner .item.Colunas2 .alinhaVerticalContainer p{font-size:22px;}
}
@media screen and (max-width:455px){
#banner .item.Colunas2 .alinhaVerticalContainer p{line-height:24px;}
}

/* CÓDIGO DE EXEMPLO ABAIXO:*/
/*
<a href="">
	<div class="item Colunas2" id="">
		<div class="overlayBanner"></div>		
		<div class="bgBanner" style="background-image:url('images/slider/bg-mod4.jpg');"> </div>
		<!-- Caso precise mudar imagem no mobile, usar abaixo: -->
		<!--<div class="bgBannerMobile" style="background-image:url('images/slider/chines-negocios-ead-lancamento_bg_mob.jpg')"> </div>	-->	
		<div class="alinhaVerticalContainer">				
			<div class="alinhaVertical">				
				<div class="conteudoPrincipalBanner">
					<div class="SliderCol2">
						<h2>Coluna 1</h2>
						<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Sed pretium felis non ligula finibus porta. In interdum lorem eget dui dictum rhoncus.
						</p>
					</div>
					<div class="SliderCol2 ultimo">
						<h2>Coluna 2</h2>
						<p>Orci varius natoque penatibus et magnis dis <strong>parturient montes</strong>, nascetur ridiculus mus. Mauris orci est, commodo luctus feugiat et, mattis id quam. Duis sit amet finibus nunc.
						</p>
					</div>
				</div>
			</div>
		</div>		
	</div>
</a>

*/


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}