/*********************************************************/
/*	STYLE CSS										 	 */
/*	DESENVOLVIDO POR: GLOBALWS							 */
/*	CEO: MICHAEL PICOLO									 */
/*********************************************************/
html, body {width:100%; height:100%; font-family: 'Poppins', sans-serif;}
/*********************************************************/
:root {
	--azul: #1357A1;
	--azul-claro: #1E92D1;
	--vermelho: #D62526;
}
.bgcover {background-repeat: no-repeat; background-size: cover; background-position: center center;}
.bg100  {background-repeat: no-repeat; background-size: 100%; background-position: center center;}


.bgcin {background-color: #f1f1f1; color: var(--azul);}
.bgred {background-color: rgba(214,37,39,0.8); color: #fff;}

p {color: #777777; line-height: 30px;}

.botao-azul {background-color: var(--azul-claro); color: #fff; font-family: 'Poppins', sans-serif; text-transform: uppercase; font-weight: 700; padding: 20px; cursor: pointer; border: 0;}
.botao-azul:hover {background-color: var(--azul);}

.botao-azul-a {background-color: transparent; background-image: url(../images/botao.png); background-repeat: no-repeat; background-size: 100%; color: #fff; font-family: 'Poppins', sans-serif; text-transform: uppercase; font-weight: 700; padding: 25px 40px; height: 80px; cursor: pointer; border: 0;}

.botao-azul-b {background-color: transparent; background-image: url(../images/botao.png); background-position: center center; background-repeat: no-repeat; background-size: 100%; color: #fff; font-family: 'Poppins', sans-serif; text-transform: uppercase; font-weight: 700; padding: 25px; cursor: pointer; border: 0;}
/*********************************************************/
/*	TOPO & RODAPE										 */
/*********************************************************/
header {width: 100%; background-image: url(../images/bg-topo.jpg); background-repeat: no-repeat; background-position: left top;}

header .esquerda {width: 45%; float: left; padding: 30px 5% 40px 5%; }
header .direita {width: 55%; float: right; position: relative; background-image: url(../images/bg-azul.jpg); background-position: bottom; background-repeat: no-repeat;}

header h1 {color: #444; text-transform: uppercase; font-weight: 800; font-size: 4.6em; line-height: 80px;}
header h1 span {color: var(--azul); font-weight: 400;}
header .logo {width: 260px; height: 320px; margin-bottom: 40px; display: inline-block;}

header .imagem {width: 95%; float: right; min-height: 1100px;}
header .chamada {width: 100%; position: relative; right: -72%; z-index: 9; margin: 40px 0; display: table;}
header .lados {width: 50%; float: left; text-align: center; padding: 30px 10px; text-transform: uppercase; font-weight: 900; font-size: 2em;}
header .fotos {position: absolute; bottom: -160px; z-index: 9; width: 95%;}
header .foto {width: 80%; height: 240px; margin: auto; border: 10px solid #f1f1f1;}

footer {width: 100%; text-align: center; padding: 20px 0; background-color: var(--azul-claro);}
footer p {color: #fff; font-size: 0.8em;}
footer a {color: #fff;}
footer a:hover {color: var(--vermelho);}
/*********************************************************/
.estrutura {width: 100%; background-image: url(../images/bg-2.jpg); background-repeat: no-repeat; background-position: top left; position: relative;}
.estrutura h1 {color: #444; text-transform: uppercase; font-weight: 800; font-size: 4em; line-height: 80px; padding-bottom: 20px;}
.estrutura h1 span {color: var(--azul); font-weight: 400;}

.estrutura .esquerda {width: 30%; float: left; padding: 30px 5% 40px 5%; }
.estrutura .direita {width: 70%; padding: 30px; position: absolute; bottom: -80px; right: 30px; z-index: 9;}
.estrutura .foto {width: 90%; margin: auto; height: 200px; border: 4px solid #ccc; border-radius: 10px; overflow: hidden;}
/*********************************************************/
.ensino {width: 100%; display: table; padding: 200px 0 140px 0; background-image: url(../images/bg-3.jpg); background-repeat: no-repeat; background-position: top; position: relative; background-size: 100%;}
.ensino h1 {color: #444; text-transform: uppercase; font-weight: 800; font-size: 4em; line-height: 80px; padding-bottom: 10px;}
.ensino h1 span {color: var(--azul); font-weight: 400;}
.ensino h2 {color: #444; font-size: 2em;}
.ensino h2 span {text-transform: uppercase; font-weight: 300; color: var(--vermelho);}

.ensino .esquerda {width: 50%; float: left; padding-left: 5%;}
.ensino .direita {width: 30%; float: right; margin-right: 10%;}
.ensino .quadro {width: 60%; float: right; text-align: right;}
/*********************************************************/
.escolha {width: 100%; display: table; background-image: url(../images/bg-4.jpg); position: relative; background-position: bottom center;}
.escolha h1 {color: #444; text-transform: uppercase; font-weight: 800; font-size: 3em; line-height: 60px; padding-bottom: 60px; text-align: right;}
.escolha h1 span {color: var(--azul); font-weight: 400;}
.escolha h2 {color: #fff; text-transform: uppercase; font-size: 2em; margin-bottom: 60px;}
.escolha h3 {color: var(--azul-claro); text-transform: uppercase; font-weight: 400;}

.escolha .esquerda {width: 35%; float: left; background-image: url(../images/bg-tr.png); background-repeat: no-repeat; background-size: 100%; min-height: 1300px; position: relative; margin-top: -200px; padding: 30% 0 0 40px;}
.escolha .direita {width: 55%; float: right; margin-right: 5%;}
.escolha .quadro {width: 45%; float: left; margin: 0 2.5% 20px 2.5%; text-align: center; height: 320px; }

.escolha .hash {width: 400px; height: 100px; background-image: url(../images/hash.png);}
.escolha .imagem {width: 100%; height: 240px; background-repeat: no-repeat; background-position: center center;}
.escolha .tp {padding-top: 40px;}
/*********************************************************/
.contatos {width: 100%; text-align: center; position: relative; margin-top: -120px; padding-bottom: 60px;}
.contatos .logo {width: 260px; height: 320px; margin: 0 auto 20px auto; display: block;}
.contatos p {line-height: 25px; font-weight: 500;}

.social {width: 100%; text-align: center;}
.social li {display: inline-block; margin: 0 10px; font-size: 1.6em; color: var(--azul-claro);}
.social li:hover {color: var(--vermelho);}
/*********************************************************/
.form-popup {display: none;	position: fixed; bottom: 0;	right: 15px; border: 3px solid var(--vermelho);	z-index: 99; }
.form-popup h3 {text-align: center; font-size: 1.4em; color: var(--azul);}
.form-container {width: 400px; padding: 20px;	background-color: #fff; }
.form-container input[type=text], .form-container input[type=email], .form-container input[type=tel] {width: 100%; padding: 15px;  margin: 5px 0 22px 0;	border: none; background: #f1f1f1; font-family: 'Poppins', sans-serif; }
.form-container input[type=text]:focus, .form-container input[type=email]:focus, .form-container input[type=tel]:focus {background-color: #ddd; outline: none;  }
.form-container .btn {background-color: var(--azul-claro); color: white; padding: 16px 20px; border: none;	cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8;   font-family: 'Poppins', sans-serif;  font-size: 1.1em;}
.form-container .cancel {background-color: var(--vermelho); }
.form-container .btn:hover, .open-button:hover {opacity: 1; }