/* BANNER */
#banner{position: relative;}
#banner ul{height: 100vh;position: relative;overflow: hidden;}
#banner ul li{width:100%;height: 100%;box-sizing: border-box;overflow: hidden;position: absolute;top: 0;opacity: 0;visibility: hidden;border-bottom-left-radius: 150px;}
#banner ul li.active{opacity: 1;visibility: visible;}
#banner ul li figure{width: 100%;height: 100vh;position: relative;margin: 0;}
#banner ul li img{position: absolute;top: -1%;left: -1%;width: 102%;height: 102%;opacity: 1;filter: blur(5px);}
#banner ul li .conteudo{width: 45%;position: absolute;top: 50%;left:10%;transform: translateY(-30%);border-left: 4px solid #ffc200;padding-left: 20px;padding-bottom: 20px;}
#banner ul li .conteudo.direita{left: initial;right: 10%;}
#banner ul li .conteudo h1{font-size: 60px;color: white;line-height: 60px;margin-bottom: 20px;max-width: 500px;}
#banner ul li .conteudo p{font-size: 18px;color: white;max-width: 500px;margin: 40px 0 30px 0;}
#banner ul li .conteudo a{display: none;}
#banner ul li .conteudo h5{font-size: 18px;font-weight: bold;color: white;}
#banner ul li form{width: 350px;background-color: white;padding: 16px;box-sizing: border-box;border-radius: 25px 25px 0 0;position: absolute;bottom: 0;right: 15%;z-index: 10;}
#banner ul li form::before{content:"";width: 50px;height: 50px;position: absolute;bottom: 0;right: 100%;background-image: url("../img/canto-esquerdo.png");}
#banner ul li form::after{content:"";width: 50px;height: 50px;position: absolute;bottom: 0;left: 100%;background-image: url("../img/canto-direito.png");}
#banner ul li form p{font-size: 18px;font-weight: bold;line-height: 20px;margin-bottom: 10px;}
#banner ul li form .detalhe{width: 60px;height:4px;border-radius: 2px;margin: 0 auto;}
#banner ul li form label{font-weight: bold;}
#banner ul li form input{margin-bottom: 5px !important;}
#banner ul li form button{display: block;background-color: #ffc200;color: white;font-size: 18px;margin-top: 10px;width: 100%;line-height: 50px;border-radius: 25px;box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);}
#banner ul li form button:hover{background-color: #f1a80a;}
#banner ul li a{margin-top: 40px;border-radius: 5px;background-color: #ffc200;}
#banner ul li a:hover{background-color: #f1a80a;}
#banner ul li a i{float: left;display: block;line-height: 40px;color: white;margin-right: 16px;}
#banner .passadores{width:100%;position: absolute;bottom:20px;left:0;text-align: center;padding: 10px;z-index: 2;box-sizing: border-box;}
#banner .passadores .passador{width: 20px;height: 20px;display: inline-block;margin: 0 5px;border-radius: 20px;border: 2px solid white;position: relative;box-sizing: border-box;}
#banner .passadores .passador::before{content:"";width:8px;height:8px;background-color: white;position: absolute;top: calc(50% - 4px);left: calc(50% - 4px);border-radius:10px;transform: scale(0,0);transition-duration: .2s;}
#banner .passadores .passador.active::before{transform: scale(1,1);}
/* QUEM SOMOS */
#quem{padding: 120px 10%;padding-bottom: 0;overflow: hidden;}
#quem .numeros{width: 50%;float: left;overflow: hidden;padding-bottom: 30px;}
#quem ul{float: left;width: 50%;}
#quem ul:nth-child(2){margin-top: 60px;}
#quem ul li{position: relative;width: calc(100% - 32px);float: left;overflow: hidden;padding: 30px 0;border-radius: 10px;box-shadow: 0px 8px 15px rgba(46, 141, 204, .2);margin: 16px;}
#quem ul li::before{content:"";width: 0;height: 100%;background-image: linear-gradient(-45deg, #1b5678,#56aeff);transition-duration: .2s;z-index: -1;position: absolute;top:0;left:0;}
#quem ul li:hover::before{width: 100%;}
#quem ul li h1{width: 100%;text-align: center;margin: 0;color: #2e8dcc;font-size: 50px;}
#quem ul li h6{font-size: 20px;text-align: center;color: #666;}
#quem ul li:hover h1,
#quem ul li:hover h6{color: white;}
#quem .conteudo{max-width: 500px;border-left: 4px solid #1b5678;float: right;font-size: 18px;padding-left: 20px;padding-bottom: 30px;margin-top: 40px;}
#quem .conteudo p{color: #666;}
/* DIFERENCIAIS */
#diferenciais{padding: 0 10%;}
#diferenciais ul{overflow: hidden;}
#diferenciais ul li{width: calc(33.333% - 16px);margin: 8px;float: left;border: 1px solid #ededed;border-radius: 10px;padding: 16px;}
#diferenciais ul li h5{text-align: center;}
#diferenciais ul li .detalhe{width: 60px;height: 4px;border-radius: 2px;background-color: #ffc200;display: block;margin: 6px auto;}
#diferenciais ul li p{text-align: justify;font-size: 18px;margin-top: 16px;color: #666;}
/* ATUAÇÃO */
#atuacao{padding: 60px 10%;text-align: center;}
#atuacao h2{margin-bottom: 60px;}
#atuacao ul.atuacoes{overflow: hidden;}
#atuacao ul.atuacoes li{width: 33.333%;float: left;padding: 0 25px;}
#atuacao ul.atuacoes li figure{margin: 0;}
#atuacao ul.atuacoes li h5{font-size: 28px;}
#atuacao ul.atuacoes li .separador{width: 60px;height: 4px;background-color: #ffc200;display: block;margin: 0 auto;margin-bottom: 16px;}
#atuacao ul.atuacoes li p{color: #666;font-size: 18px;}
#atuacao h4{margin-top: 50px;}
#atuacao ul.areas{overflow: hidden;margin-top: 30px;}
#atuacao ul.areas li{width: 20%;float: left;margin-bottom: 26px;}
#atuacao ul.areas li:last-of-type{float: none;margin: 0 auto;}
#atuacao ul.areas li figure{margin: 0;}
#atuacao ul.areas li h6{font-size: 18px;color: #666;}
/* SOLUÇÕES */
#solucoes{padding: 60px 10%;padding-bottom: 0;overflow: hidden;}
#solucoes .conteudo{max-width: 450px;border-left: 4px solid #1b5678;float: left;font-size: 18px;padding-left: 20px;padding-bottom: 30px;margin-top: 40px;}
#solucoes .conteudo p{color: #666;}
#solucoes .conteudo a{text-align: center;display: inline-block;background-color: #ffc200;color: white;font-size: 18px;margin-top: 30px;line-height: 50px;border-radius: 25px;box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);padding: 0 36px;}
#solucoes .conteudo a:hover{background-color: #f1a80a;}
#solucoes ul{float: right;width: 50%;}
#solucoes ul li{margin-bottom: 16px;border-radius: 5px;background-color: #f6f6f6;box-shadow: 0px 5px 8px rgba(0, 0, 0, .15);}
#solucoes ul li h5{background-color: #2e8dcc;color: white;font-weight: bold;font-size: 24px;border-radius: 5px;line-height: 50px;margin: 0;padding: 0 16px;}
#solucoes ul li h5 i{float: right;line-height: 50px;font-size: 30px;}
#solucoes ul li.active h5 i{transform: rotate(180deg);}
#solucoes ul li p{font-size: 18px;color: #666;padding: 16px;margin: 0;display: none;}
#solucoes ul li:nth-child(1) p{display: block;}
/* BLOG */
#blog{padding: 150px 10%;padding-top: 300px;overflow: hidden;background-image: linear-gradient(-45deg, #1b5678,#56aeff);position: relative;border-bottom-left-radius: 150px;}
#blog::before{content: "";width: 100%;height: 150px;border-bottom-left-radius: 150px;position: absolute;top: 0;left: 0;background-color: white;}
#blog .conteudo{width: 25%;border-left: 4px solid white;float: left;font-size: 18px;padding-left: 20px;padding-bottom: 30px;margin-top: 40px;}
#blog .conteudo h2{color: white;}
#blog .conteudo p{color: white;}
#blog .conteudo a{text-align: center;display: inline-block;background-color: #ffc200;color: white;font-size: 18px;margin-top: 30px;line-height: 50px;border-radius: 25px;box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);padding: 0 36px;}
#blog .conteudo a:hover{background-color: #f1a80a;}
#blog ul{width: 75%;float: right;overflow: hidden;}
#blog ul li{width: calc(50% - 70px);float: left;margin-left: 70px;overflow: hidden;border-radius: 0 15px 50px 0;border-left: 4px solid #1b5678;background-color: white;}
#blog ul li figure{margin: 0;}
#blog ul li figure img{display: block;width: 100%;}
#blog ul li h6{margin-top: 16px;display: inline-block;background-color: #1b5678;color:white;padding: 0px 10px;line-height: 22px;border-radius: 5px;margin-left: 16px;}
#blog ul li h5{margin-top: 0;padding: 0 16px;font-size: 22px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;color: #1b5678;}
#blog ul li:hover h5{color: #ffc200;}
#blog ul li p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;padding: 0 16px;font-size: 18px;color: #666;}
#blog ul li span{width: 190px;display: block;padding: 0 16px;line-height: 30px;margin-bottom: 16px;margin-top: 16px;color: white;background-color: #1b5678;border-radius: 0 20px 20px 0;}
#blog ul li span i{float: right;line-height: 30px;}
#blog ul li:hover span{color: #ffc200;}
/* PORTFOLIO */
#portfolio{padding: 60px 10%;overflow: hidden;}
#portfolio h2{text-align: center;}
#portfolio ul{overflow: hidden;margin: 50px 0;}
#portfolio ul li{width: 20%;float: left;border: 1px solid #ededed;box-sizing: border-box;border-collapse: collapse;}
#portfolio ul li a{display: block;margin-top: 65px;}
#portfolio ul li figure{margin: 0;}
#portfolio ul li figure img{width: 100%;filter: grayscale(1);}
#portfolio ul li:hover figure img{filter: grayscale(0);}
#portfolio .depoimento{width: calc(50% - 100px);background-color: white;border-left: 4px solid #2e8dcc;padding: 20px;float: left;margin: 0 50px;box-sizing: border-box;box-shadow: 0px 5px 8px rgba(0, 0, 0, .15);border-radius: 0 10px 25px 0;}
#portfolio .depoimento p{color: #666;}
#portfolio .depoimento h5{font-size: 18px;margin-top: 26px;margin-bottom: 0;}

@media only screen and (max-width: 480px){
    #banner ul{height: 100vh;}
    #banner ul li{border-bottom-left-radius: 50px;}
    #banner ul li img{left: -51%;width: auto;}
    #banner ul li figure{height: 100vh;}
    #banner ul li .conteudo{width: calc(100% - 32px);left: 0;top: 200px;transform: none;margin: 0 16px;}
    #banner ul li .conteudo h1{font-size: 40px;line-height: 50px;}
    #banner ul li .conteudo p{margin: 20px 0;}
    #banner ul li .conteudo a{display: inline-block;background-color: #ffc200;color: white;font-size: 18px;margin-top: 10px;line-height: 50px;border-radius: 25px;box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);padding: 0 36px;}
    #banner ul li form{display: none;}
    #quem{padding: 50px 16px;}
    #quem .numeros{width: 100%;}
    #quem ul{padding: 0;overflow: initial;}
    #quem ul li{width: calc(100% - 16px);margin: 8px;}
    #quem ul li h1{font-size: 22px;}
    #quem ul li h6{font-size: 16px;}
    #quem .conteudo h2{font-size: 28px;}
    #quem .conteudo p{font-size: 16px;text-align: justify;padding-right: 10px;}
    #atuacao{padding: 0 16px;}
    #atuacao h2{font-size: 28px;}
    #atuacao ul.atuacoes li{width: 100%;float: none;margin-bottom: 50px;padding: 0;}
    #atuacao ul.atuacoes li:last-child{margin: 0;}
    #atuacao ul.atuacoes li p{font-size: 16px;}
    #atuacao ul.areas li{width: 50%;}
    #atuacao ul.areas li h6{font-size: 16px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
    #diferenciais{padding: 0 16px;}
    #diferenciais ul li{width: 100%;margin: 0;margin-bottom: 16px;}
    #solucoes{padding: 50px 16px;}
    #solucoes .conteudo{width: 100%;float: none;overflow: hidden;}
    #solucoes .conteudo h2{font-size: 28px;}
    #solucoes .conteudo p{font-size: 16px;text-align: justify;padding-right: 10px;}
    #solucoes ul{float: none;width: 100%;margin-top: 30px;}
    #solucoes ul li h5{position: relative;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 18px;letter-spacing: 1px;padding-right: 50px;}
    #solucoes ul li h5 i{position: absolute;top: 0;right: 0;width: 50px;text-align: center;}
    #solucoes ul li p{font-size: 16px;}
    #blog{padding: 100px 16px;border-bottom-left-radius: 50px;}
    #blog::before{height: 50px;border-bottom-left-radius: 50px;}
    #blog .conteudo{width: 100%;float: none;overflow: hidden;}
    #blog .conteudo h2{font-size: 28px;}
    #blog ul{width: 100%;float: none;margin-top: 30px;}
    #blog ul li{width: 100%;float: none;margin: 0;}
    #blog ul li:nth-child(2){display: none;}
    #portfolio{padding: 50px 16px;}
    #portfolio h2{font-size: 28px;}
    #portfolio ul{text-align: center;}
    #portfolio ul li{float: none;display: inline-block;width: 48%;margin-bottom: 4px;}
    #portfolio .depoimento{width: 100%;float: none;margin: 0;margin-bottom: 20px;}
}