﻿@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

* {margin:0;padding:0;list-style:none;vertical-align:baseline;}
body{font-family: 'Lato', sans-serif;background-color:#09334C;}
b{font-weight:800;}


/*----------------------------------CSS Geral----------------------------------*/
.content{max-width:1024px;width:100%;margin:auto;text-align:center;}
h1.titulo{font-size:1.9em;color:#fff;text-transform:uppercase;}
h1.titulo span{font-size:1.9em;color:#BDD119;font-weight:900;line-height:80px;}

/*----------------------------------CSS Menu Superior----------------------------------*/
.logo,img.menu{cursor:pointer}
header.menu{position:fixed;top:0;width:90%;max-width:1190px;right:0;left:0;margin:0 auto;padding:15px 0;z-index:8000;}
div.logo{float:left;position:relative;width:15%;}
img.logo{position:absolute;right:0;}
img.logo.colorido2{transition:all 0.3s ease-out;opacity:0}
img.logo.colorido{transition:all 0.3s ease-out;opacity:0}

img.menu{float:right;transform:translatey(70%)}
img.logo.logoColoridoExibir{opacity:1;}
.menuContent{ position: relative; float: right; width: 15%; text-align: left; }

/*----------------------------------CSS Conceitual--------------------------------------*/
section.conceitual{overflow:hidden;height:100vh;position:relative}
.conceitual img.fones{margin:4% 0 0;width:34%}
.conceitual .content{margin-top:3%;}
/*Efeito Parallax*/
section.conceitual > div.parallax{background-image:url('../Images/conceitual_yes.png'),url('../Images/filtro.png');background-repeat:no-repeat;background-size:cover,100% 100%;background-position:center;background-blend-mode: overlay;height:130%;position:relative;top:-62%;}
#parallaxConceitual .content{position: absolute;top: 0;bottom: 0;left: 0;margin:auto 0;height: 75%;width:100%;max-width:none;}

/*----------------------------------CSS TXTDestaque ||  CSS TXTDestaque2----------------------------------*/
.txtDestaque {background-color: #BED21B;padding: 0;transition: all 0.6s ease;transform: scale(1, 0);transform-origin: top;padding: 3% 0;height: auto;position: absolute;width: 100%;z-index: 99;}
.txtDestaque p {color:#FFF;font-size:2.1em;text-transform:uppercase;text-align:center;line-height:41px;}
/*Flecha da seção*/
.txtDestaque:before{content: '';width: 0px;height: 0px;border-left: 28px solid rgba(128, 124, 124, 0);border-right: 28px solid transparent;border-bottom: 28px solid #BED21B;position: absolute;top: -28px;left: 0;right: 0;margin: 0 auto;}

.txtDestaque2{background-color:#204D84;background: linear-gradient(45deg, #204D84 15%, transparent 18%, transparent 90%, #204D84 89%),linear-gradient(135deg, transparent 35%, rgba(2, 50, 113, 0.1) 37%, rgba(2, 50, 113, 0.1) 55%, transparent 58%),linear-gradient(45deg, transparent 35%, #204D84 0, #204D84 63%, transparent 0) #204D84;background-size:17px 17px;padding:5vh 0;position:relative;transition: all 0.6s ease;transform: scale(1, 0);transform-origin: top;}
.txtDestaque2 p {color:#FFF;font-size:2.1em;text-transform:uppercase;text-align:center;letter-spacing:5px;height:115px;}
.txtDestaque2 p span{color:#FFF;font-size:2.1em;text-transform:uppercase;text-align:center;line-height:75px;font-weight:800;}
/*Flecha da seção*/
.txtDestaque2:before{content: '';width: 0px;height: 0px;border-left: 28px solid #f6f6f6;border-right: 28px solid #f6f6f6;border-bottom: 28px solid transparent;position: absolute;top: -28px;left: 0;right: 0;margin: 0 auto;background: linear-gradient(45deg, #204D84 15%, transparent 18%, transparent 90%, #204D84 89%),linear-gradient(135deg, transparent 35%, rgba(2, 50, 113, 0.1) 37%, rgba(2, 50, 113, 0.1) 55%, transparent 58%),linear-gradient(45deg, transparent 35%, #204D84 0, #204D84 63%, transparent 0) #204D84;background-size:17px 17px;}

/*Efeito para exibir*/
.zap {transform: scale(1, 1);}

/*----------------------------------CSS TXTImgFundo----------------------------------*/
.txtImgFundo{height: 100vh;overflow: hidden;position:relative;}
.txtImgFundo p{color:#fff;font-size:2.9em;}
.txtImgFundo p span{color:#BED319;font-size:1.2em;font-weight:800;line-height:63px;text-transform:uppercase}
/*Efeito Parallax*/
.txtImgFundo > div.parallax{background:url('../Images/bg_session2.jpg') no-repeat center;background-color:rgba(0,52,113,0.7);background-blend-mode:multiply;background-size:cover;height: 125%;position: relative;top: -50%;}
#parallaxImgFundo .content{position: absolute;top: 0;right: 0;left: 0;bottom: 0;display: inline-block;height: 190px;padding:12% 0 0;transform:matrix(0.1, 0, 0, 0.1, 0, 0);transition:all 1s ease;opacity:0}
#parallaxImgFundo .zapScal{transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;}

/*----------------------------------CSS Slider----------------------------------*/
section.slider {position: relative; width: 100%; min-height: 240px; overflow-x: hidden;background:#fff;height:100vh;}
section.slider header{margin:3% 0 5% 0;text-align:center;transform:translate(0px,-100%);opacity:0;transition:all 0.6s ease;}
section.slider header.tituloSlider{transform:translate(0px,0px);opacity:1;}
section.slider header h1{color:#07344C;text-transform:uppercase;font-weight:500;letter-spacing:2px;font-size:2.1em;line-height:50px;}
section.slider header h1 span{font-size:1.2em;letter-spacing:6px;}
section.slider ul.slide {position: relative; overflow-x: hidden; height: 60%;opacity:0;transition:all 0.9s ease}
section.slider ul.sliderOpen{opacity:1;}
section.slider #slider li.item {float: left; position: relative; cursor: move;cursor: grab;cursor: -moz-grab;cursor: -webkit-grab;color:#00346F;}
section.slider #slider li.item h1{display:inline-block;vertical-align:top;line-height:0.99em;font-size:4.2em;font-weight:800;}
section.slider #slider li.item p {display:inline-block;text-align:left;width:40%;vertical-align:top;font-size:1.6em;margin:0 4% 0 4%;letter-spacing:3px;}
section.slider #slider li.item img{display:inline-block;vertical-align:top;width:18%;}
section.slider span.ant,section.slider span.prox{height:95px;width:50px;position:absolute;top:0;vertical-align:middle;display:inline-block;bottom:0;margin:auto;cursor:pointer}
section.slider span.prox{background:url(../Images/RightArrow.png) no-repeat;background-size:100% 100%;right:-65px;transition:all 0.6s ease-out;}
section.slider span.ant{background:url(../Images/RightArrow.png) no-repeat;background-size:100% 100%;left:-65px;transition:all 0.6s ease-out;-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:"FlipH"}
section.slider span.proxExibir{right:8%}
section.slider span.antExibir{left:8%;}
section.slider ul.pontos-slider {margin:0 auto; margin-top:1%;text-align:center;opacity:0;transform:translate(0px, -70px);transition:all 0.6s ease-out}
section.slider ul.pontosExibir {transform:translate(0px, 0px);opacity:1;}
section.slider ul.pontos-slider li {display: inline-block; padding: 0px 58px;border-radius:10px; font-size: 6px; background: transparent; color: #fff; margin: 0 23px; cursor: pointer;border:#B6B6B6 solid 1px;}
section.slider ul.pontos-slider li.ativo {background: #023271; color: #023271; border:#023271 1px solid}

/*----------------------------------CSS IMGLinks----------------------------------*/
.imgLinks{background-color:#fff;text-align:center;padding:4vh 0 4vh;height:80px;display:table;width:100%;}
.imgLinks img{margin: 0 4%;width:16%;}


/*----------------------------------CSS txtPadrao----------------------------------*/
.txtPadrao { height: calc(78vh - 195px); background-color: #f6f6f6; width: 100%; display:table; text-align: center; }
.txtPadrao div{ display: table-cell; vertical-align: middle; }
.txtPadrao p { font-size: 1.3em; width: 55%; margin: auto; text-align: center; color: #07334E; font-size: 1.9em; transition:all 0.6s ease-out; transform:scale(0.8,0.8); opacity:0; }
.txtPadrao p.exibir{ transform:scale(1,1); opacity:1; }

/*----------------------------------CSS MENU----------------------------------*/

.fundo{ background-image: url(../Images/filtro.png); position: fixed; height: 100vh; top: 0; left: 0; z-index: 999; width: 100%; background-color: rgba(9,51,76,0.9); background-blend-mode: multiply; background-size: 100% 100%; display:table; }
.fundo div.fundomenu{ display: table-cell; vertical-align: middle; }
.menuOpcoes{ width: 100%; text-align: center; }
ul.menuOpcoes li{ width: 12%; display: inline-block; vertical-align: top; margin:0 5%; cursor:pointer; }
ul.menuOpcoes li div{ border: 4px solid #fff; width: 135px; height: 135px; border-radius: 100px; display: inline-block; position: relative; }
ul.menuOpcoes li div img{ position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; }
ul.menuOpcoes li h1{ color: #fff; text-transform: uppercase; font-weight: 500; font-size: 1.8em; margin: 30px 0 0; }
ul.menuOpcoes li.meio { margin: 0; padding: 0 5%; border-left: 1px rgba(255,255,255,0.2) solid; border-right: 1px rgba(255,255,255,0.2) solid; }
li.como img{ width:31%; }
li.download img{ width:40%; }
li.oque img{ width:36%; }

/*----------------------------------CSS ÍCONE MENU----------------------------------*/
#menu { width: 60px; height: 45px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; float:left; transform:translatey(32%); }
#menu span { display: block; position: absolute; height: 5px; width: 90%; background: #fff; border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
#menu span.azul{ background-color:#003471; }
#menu span:nth-child(1) { top: 0px; }
#menu span:nth-child(2),#menu span:nth-child(3) { top: 18px; }
#menu span:nth-child(4) { top: 36px; }
#menu.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
#menu.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#menu.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#menu.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }

/*----------------------------------CSS RODAPÉ----------------------------------*/
footer#direitos{ background: #f6f6f6; display: table; width: 100%; }
.direitos{ font-size: 0.72em; opacity: 0.6; width: 100%; margin: 0 auto; height: 4vh; display: table-cell; vertical-align: middle; text-align: center; padding: 0 7%; }
ul.direitoslist{ float: left; width: 290px; }
ul.direitoslist li{ float:left; margin-left:2%; text-transform:uppercase; cursor:pointer; }
ul.direitoslist li p{ cursor:pointer; }
ul.direitoslist li:first-child{ padding: 0 2% 0 0; border-right: 1px rgba(168,168,168,0.7) solid; margin-left:0; }
.reservados{ display:inline-block; }
.criado{ float:right; }