/* font-family: 'Open Sans', sans-serif; */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; font-size: 100%; /*! font: inherit; */ vertical-align: baseline; } html { scroll-behavior: smooth; } body{ font-family: 'Open Sans', sans-serif; } h1{ /* font-family:evogria; */ font-size: 3rem; color:#02a6cb; /*! margin: 60px 0px; */ } h2{ /* font-family: evogria; */ font-size: 3rem; color:#263238; margin-bottom: 40px; margin-top: 80px; } h3{ font-size: 2rem; color:#02a6cb; } p{ font-size: 1.4rem; text-align: justify; } /* =============================HEADER */ header svg{ height: 20px; width: 20px; fill: #eeeeee; } header{ width:100%; height:auto; display:flex; flex-direction: column; align-items: center } .conteiner-header{ width: 70%; height: auto; display: flex; justify-content:space-between; align-items: center; } .header-1{ background-color: #263238; width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-around; } .header-1 a{ text-decoration: none; color:#ffffff } .header-1 .contato-header{ width: 400px; display: flex; flex-direction: row; justify-content: space-around } .header-1 .contato-header div{ display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; width: 300px; } .header-1 .contato-header svg{ margin: 0px 10px ; } .header-1 .contato-header svg:hover{ fill:#f44336; cursor: pointer; transition: 0.4s } .header-1 .social-icon-header svg:hover{ fill:#f44336; cursor: pointer; transition: 0.4s } .header-2 .box-logo-header img{ width: 150px; } .header-2 .box-logo-header{ display: flex; justify-items:center; align-items: center } .header-2{ display: flex; flex-direction: row; width: 100%; height:200px; justify-content: space-around; align-items: center; background-color: #f4f4f4 } .header-2 .atuacao{ width: 100%; display: flex; flex-direction: row; /*! flex-wrap: wrap; */ justify-content: flex-end; } .header-2 .box-atuacao{ height: auto; display: flex; justify-content: space-between; align-items: center; } .header-2 .box-atuacao>div{ width: 300px; display: flex; align-items: center; justify-content: center } .header-2 .box-atuacao h2{ margin: 0px; font-size: 1.1rem } .header-2 .box-atuacao p{ margin: 0px; font-size: 0.8rem } .header-2 .box-atuacao svg{ fill: #f44336; width: 60px; height: 60px; margin: 0px 10px; } /* ----------------------------------responsivo header--------------------- */ @media(max-width:1200px){ .header-1 .conteiner-header{ flex-direction: row; justify-content: space-between } .conteiner-header{ flex-direction: column; align-items: center; justify-content: center; } .header-2 .atuacao svg{ width: 45px } .header-2 .atuacao{ width: 100%; } .header-2 .box-atuacao >div{ width: 250px; justify-content: space-between; display: flex; align-items: center } .box-logo-header{ margin-bottom: 20px; } .descricao-atuacao{ width: 180px } } @media(max-width:980px){ .header-1{ height: 110px } .header-1 .conteiner-header{ flex-direction: column; justify-content: normal; } .header-1 .contato-header{ flex-direction: column; justify-content: center; align-items: center; width: 100% } .header-1 .contato-header div{ justify-content: center; align-items: center; margin: 4px; font-size: 0.9rem } .descricao-atuacao{ width: 170px } .header-2{ height: 470px; padding-bottom: 40px } .header-2 .atuacao{ height: 250px; justify-content: center; margin-left: 20px } .header-2 .box-atuacao{ height: 50px; flex-direction: column } .header-2 .box-atuacao>div{ height: 80px } .box-atuacao .box-consultoria{ margin: 30px } .header-2 .box-logo-header{ height: 100px; } .header-2 .box-logo-header img{ width: 200px; } } /* -----------------------------------------------------------970px */ /*-------------------------------------------------fim do responsivo header----------------------------------------- */ /* =========================FIM HEADER */ /* =========================MENU */ .menu-header{ top: -30px; width: 1200px; height: 60px; display: flex; justify-content: center; align-content: center; background-color: #263238; position: relative; border-radius: 6x; z-index: 5 } .menu-header a{ display: flex; align-items: center; height: 55px; text-decoration: none; color: #f3f3f3; } .menu-header ul{ display: flex; justify-content: space-around; align-items: center; width:100%; height: auto; list-style: none; } .menu-header ul li{ width: 160px; height: 55px; display: flex; font-weight: bold; flex-direction: row; justify-content: center; align-items: center; text-align: start; } .menu-header .li-curso ul{ overflow: hidden; height: 0px } .menu-header .li-curso:hover ul{ height: 50px } .menu-header ul li:hover{ border-bottom: 5px solid #f44336; } .menu-header ul li:hover a{ margin-bottom: -5px; } .menu-header ul ul{ position: absolute; width: 160px; top: 58px; float: left; background-color:#263238; justify-content: center; display: flex; flex-direction: column; justify-content: center; transition: 0.4s; text-align: center; } .menu-header .li-seguranca:hover ul{ height: 830px; transition: 0.4s } .menu-header .li-seguranca ul{ height: 0px; display: flex; flex-direction: column; justify-content: center; align-content: center; position: absolute; left: 160px; margin-top: -60px; width: 420px; background-color: #c4c4c4; transition: 0.4s; } .menu-header .li-seguranca ul a { color: #000; } .menu-header ul ul ul li{ height: 55px; display: flex; width:100%; justify-content: flex-start; border-bottom: 2px solid #fff; } .menu-header ul ul ul li a { margin-left: 10px; font-weight: normal; font-size: 0.9rem } .menu-header ul ul ul li:hover{ margin-bottom: -5px; } /* ------------------------------REPONSIVO-----------------------/ */ /* -1240PX------------------------------------------------- */ @media(max-width:1240px){ .menu-header{ width: 80% } } @media(max-width:1000px){ .menu-header{ display: none } } /* fim do Menu */ /* BOAS VINDAS */ #boas-vindas{ width:100%; height:auto; display:flex; Justify-content:center; align-items:center; margin-top:60px; } #conteiner-boas-vindas{ width:70%; height:auto; display:flex; Justify-content:center; align-items:center; } .box-img{ width:500px; height:auto; overflow:hidden; position:relative; } .detalhe-img{ position:relative; margin:60px; } .detalhe-img:before{ position:absolute; width:300px; height:350px; content:''; border: 10px solid #f44336; left:-40px; top: -40px } .detalhe-img:after{ position:absolute; width:150px; height:350px; content:''; border: 10px solid #f44336; right:-40px; bottom: 45px; z-index:-1 } .box-img img{ width:700px; height:auto; margin-left:-150px; } .box-img div{ width:100%; height:auto; font-size:3rem; font-weight:bold; display:flex; Justify-content:flex-end; align-items:center; margin-top:-30px; color: #263238; } .box-img div span{ background-color: #f44336; color: #f3f3f3; padding:20px; display:flex; justify-content:center; align-items:center; } .box-texto-boas-vindas{ width:400px; position:relative; min-width: 300px; } .box-texto-boas-vindas h2{ margin-top:0px; color: #f44336; font-size:1.5rem } .box-texto-boas-vindas p{ margin:40px 0px; font-size:1.2rem; line-height:1.7 } .box-texto-boas-vindas span{ font-weight: bold; line-height: 1.9; } .box-texto-boas-vindas p strong{ color:#f44336 } .box-texto-boas-vindas a{ background-color:#263238; color:#fff; text-decoration:none; font-weight:bold; font-size:1.4rem; padding: 10px 25px; position:absolute; right:0px } /*------------------------------------------------Responsivo Boa vindas------------------------- */ @media(max-width:1000px){ #conteiner-boas-vindas{ flex-direction: column; margin-bottom: 10px; } } @media(max-width: 830px){ .detalhe-img{ position:relative; margin:60px 0px; margin-left: 80px } .box-img img{ width: 550px } .detalhe-img:before{ position:absolute; width:250px; height:250px; content:''; border: 10px solid #f44336; left:-40px; top: -40px } .detalhe-img:after{ position:absolute; width:120px; height:250px; content:''; border: 10px solid #f44336; right:20px; bottom: 40px; z-index:-1 } .box-img div{ width:100%; height:auto; font-size:3rem; font-weight:bold; display:flex; Justify-content:flex-end; align-items:center; margin-top:-30px; color: #263238; margin-left: -60px } .box-texto-boas-vindas{ width: 90%; position:relative; /* height: 500px; */ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 60px; } .box-texto-boas-vindas a{ background-color:#263238; color:#fff; text-decoration:none; font-weight:bold; font-size:1.7rem; padding: 10px 25px; position: relative; right:50px; } } @media(max-width:550px){ .box-img img{ /* width: 450px; */ height:auto; } .box-img{ width: 100%; margin-left:0px; } #conteiner-boas-vindas{ width: 100%; } .detalhe-img:before{ position:absolute; width:180px; height:180px; content:''; border: 10px solid #f44336; left:-40px; top: -40px } .detalhe-img:after{ position:absolute; width:120px; height:190px; content:''; border: 10px solid #f44336; right: -30px; bottom: 40px; z-index:-1; display: none; } .box-img div{ width:100%; height:auto; font-size:2rem; font-weight:bold; display:flex; Justify-content:flex-end; align-items:center; margin-top:-30px; color: #263238; margin-left: -10px; } .detalhe-img{ position:relative; margin:0px; width: 90%; } .box-texto-boas-vindas a{ background-color:#263238; color:#fff; text-decoration:none; font-weight:bold; font-size: 1.2rem; padding: 10px 25px; position: relative; right: 0px; } } @media(max-width:320px){ .box-img{ margin-left: 45px } .box-img img{ width: 350px; height: auto; } .detalhe-img:before{ position:absolute; width:100px; height:100px; content:''; border: 10px solid #f44336; left:5px; top: -30px } .detalhe-img:after{ position:absolute; width:50px; height:100px; content:''; border: 10px solid #f44336; right:260px; bottom: 20px; z-index:-1 } .box-img div{ width:100%; height:auto; font-size:2rem; font-weight:bold; display:flex; Justify-content:flex-end; align-items:center; margin-top:-30px; color: #263238; margin-left: -280px } .detalhe-img{ position:relative; margin:60px 0px; margin-left: 245px } .box-texto-boas-vindas a{ background-color:#263238; color:#fff; text-decoration:none; font-weight:bold; font-size:1.7rem; padding: 10px 25px; position:absolute; right:-10px; } } /* seção 1 */ #secao-1{ width: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .conteiner-article{ display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 70%; } .conteiner-article h1{ color: #f44336; font-size: 2.5rem; text-align: center } .conteiner-article .secao-1-titulo p{ font-size: 1.5rem; margin-bottom: 40px; } .conteiner-article .secao-1-titulo{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .secao-1-imagens svg{ width:60px; fill: #f44336; height: 50px; } .secao-1-imagens{ display: flex; flex-direction: row; flex-wrap: wrap; height: auto; align-items: center; justify-content:space-around; } .secao-1-imagens .box-setion-1{ display: flex; flex-direction: column; justify-content:space-between; width: 400px; align-items:center; background-color: #ffffff; box-shadow: 5px 5px 15px #9a9a9a; margin-bottom:60px } .secao-1-imagens .box-setion-1 h3{ width: 400px; color: #263238; font-size: 1.1rem; margin-left:20px; } .box-setion-titulo{ border-left: 5px solid #f44336; width: 380px; height:50px; margin-top:20px; margin-bottom:20px; margin-left:20px } .secao-1-imagens .box-setion-titulo{ display: flex; flex-direction:row; align-items: center; justify-content: center; } .img-section-1{ width: 375px; text-align: center; position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .btn-img-curso{ color: #f3f3f3; z-index: 2; position: absolute; width: 100px; padding: 15px 15px; text-decoration: none; border: 1px solid #f3f3f3; font-size: 1.3rem; transition: 0.4s; font-weight: bold; } .btn-img-curso:hover{ background-color: #f44336; transition: 0.4s } .img-section-1:hover{ transform: 0.3s } .img-section-1 img{ width: 370px; height: 240px; } .img-section-1:hover:before{ content: ''; width: 370px; height: 242px; background-color: #000000; z-index: 2; opacity: 0.7; position: absolute; } .img-section-1:hover a{ color: #eeee; display: block; position: absolute; z-index: 5; width: 140px; } .img-section-1 a{ display: none; } /* ------------------------------------------------------fim da seção 1 -----------------------------------------------------------------*/ /* --------------------------------------------RESPONSIVO */ @media(max-width:1680px){ .secao-1-imagens .box-setion-1{ margin-bottom: 0; margin-top: 40px; } .conteiner-article{ width:90% } .secao-1-imagens{ width: 100% } } @media(max-width:1200px){ .conteiner-article{ width: 90%; } } @media(max-width:900px){ #secao-1{ width: 100% } .secao-1-titulo p{ width: 80%; height: 100px; text-align: center } } @media(max-width:600px){ .img-section-1:hover{ transform: 0.3s } .img-section-1 img{ width: 370px; height: 240px; } .img-section-1 a{ color: #eeee; display: block; position: absolute; z-index: 5; width: 140px; } .img-section-1 a{ display: visible; } .img-section-1:before{ content: ''; width: 370px; height: 240px; background-color: #000000; z-index: 2; opacity: 0.7; position: absolute; } .img-section-1{ width: 320px; } } @media(max-width:400px){ .secao-1-imagens .box-setion-1{ margin-top: 130px; width:320px } .secao-1-imagens .box-setion-1:first-child{ margin-top: 0px } .box-setion-1 .box-setion-titulo{ width: 280px; margin-left: 10px; } .box-setion-1 .box-setion-titulo h3{ text-align: start; margin: none; font-size: 1rem } .box-setion-1 .box-setion-titulo svg{ width: 100px } .box-setion-1 .img-section-1 img{ width: 280px; height: auto } .img-section-1:hover{ transform: 0.3s } .img-section-1:hover p{ color: #eeee; display: block; position: absolute; z-index: 5; width: 50%; font-size: 1rem } .img-section-1:before{ width: 280px; height: 100% } .img-section-1:hover:before{ width: 280px; height: 100% } } /* ------------------------------------------------------Seçã0 2------------------------------------------------------ */ .secao-2{width: 100%;height: 550px;background-image: url(../imagem/foto-aula.jpg);background-repeat: no-repeat; /*! background-position-y:-300px; */background-size: cover;text-align: center;position: relative;z-index: 1;display: flex;justify-content: center;margin-top: 80px;background-position-y: -300px;align-items: center;} .secao-2::before{ content: ''; width: 100%; height: 550px; position: absolute; background-color: #000; z-index: -1; opacity: 0.5; left: 0px; } .secao-2-imagem{ width: 90%; height: 120px; } .secao-2-imagem div{ display:flex; justify-content:center; align-items:center; width:100%; margin-top:-150px; flex-direction:column; } .secao-2-imagem p{ color: #eeeeee; font-size: 2rem; width: 70%; text-align:center } .secao-2-imagem span{ color: yellow; font-size: 3rem; width: 90%; text-align:center; font-weight:bold; } .secao-2-imagem hr{ width: 200px; height:5px; background-color:red; border: none; margin: 20px 0px } /* ----------------------------------------RESPONSIVO */ @media(max-width:1680px){ .secao-2{/* background-position-y:-200px; */} } @media(max-width:800px){ .secao-2 p{ font-size: 1.5rem } .secao-2 span{ font-size: 2.5rem } } @media(max-width:1300px){ .secao-2{ background-position-y: -100px; } } @media(max-width:530px){ .secao-2{ background-position-y: 0; background-position-x:-200px; } .secao-2-imagem{ width: 100% } } @media(max-width: 1024px){ .secao-2{ height:450px; } .secao-2:before{ height:370px; margin-bottom: 80px } } @media(max-width: 500px){ .secao-2:before{ height:450px; margin-top: 80px } } @media(max-width:380px){ .secao-2{ margin-top: 300px } .secao-2-imagem span{ width: 90%; font-size: 1.6rem; } } /*------------------------------------------------------ Fim da seção 2 ------------------------------------------------------*/ /*------------------------------------------------------ Seção 3------------------------------------------------------*/ .secao-3{ position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center } .secao-3-conteiner{ display: flex; width: 70%; justify-content: space-between; box-shadow: 2px 2px 5px 5px #cec6c6; position: absolute; z-index: 2; background-color: #ffffffff; margin-top: 250px; flex-direction: column; align-items: center; } .secao-3-conteiner .sessa-3-box{ display: flex; flex-direction: column; justify-content: center; align-items: center } .secao-3 article{ display: flex; flex-direction: row; /*! justify-content: space-between; */ align-items: center; position:relative } .secao-3-imagem img{ width: 100%; height: auto; } .secao-3-descricao{ width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 0px 30px; min-width: 350px; } .secao-3-descricao .secao-3-descricao-titulo h3{ font-size: 1.9rem; color: #263238; font-weight: bold; margin: 20px } .secao-3-descricao .secao-3-descricao-titulo p{ font-size: 1.1rem; padding: 5px; color: #263238; margin-left: 10px; } .secao-3-descricao-svg{ width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; fill: #f44336; } .secao-3-descricao-svg>div{ width: 300px; height: auto; display: flex; flex-direction: row; justify-content: start; align-items: center; margin: 20px 0px; } .secao-3-descricao-svg img{ /*! width: 50px; */ height: 50px; } .secao-3-descricao-svg h3{ font-size: 1.0rem; color: #263238 } .box-svg-sessao-3{ width: 50px; height: 50px; margin-right:10px } .secao-4{ width: 100%; height: 300px; margin-top: 100px; } .secao-3 .secao-3-conteiner>.secao-3-descricao-svg{ display: none } /* ----------------------------------Responsivo */ @media(max-width:1240px){ .secao-3 img{ width: 100%; /*! min-width: 380px; */ } .secao-3-imagem{ width: 50%; } .secao-3-descricao{ width: 45% } .secao-3-descricao-titulo p{ /*! width: 90%; */ } .secao-3 .secao-3-conteiner>.secao-3-descricao-svg{ display: flex} .secao-3-conteiner article .secao-3-descricao-svg{ display: none } } @media(max-width:950px){ .secao-3{ width: 100%; display: flex; align-items: center } .secao-3-conteiner article{ flex-direction: column; } .secao-3-descricao{ width: 90% } .secao-3-imagem{ width: 60%; } .secao-3-conteiner{ margin-top: 720px } .secao-4{ height: 700px; } } @media(max-width:700px){ .secao-3{ font-size: 2rem } .secao-3-conteiner{ margin-top: 800px } } @media(max-width:530px){ .secao-3{ height:900px; } .secao-3-conteiner{ margin-top: 200px; width: 90%; } .secao-3-conteiner .secao-3-descricao-titulo p, h3{ text-align: center; } .image-contatos-nr11 h3{ font-size: 2rem } .secao-3-descricao-svg h3{ width:200px; } .secao-4{ height: 870px } } @media(max-width:450px){ .secao-3{ font-size: 2rem } .secao-2-imagem p{ width: 90%; font-size: 1.1rem } .secao-3-descricao-svg { width: 250px; margin-left: 15px } .secao-3-descricao-svg h3{ font-size: 0.8rem; } .secao-3-descricao-svg img{ height: 40px; width: 40px } .secao-3-conteiner{ margin-top: 150px } } @media(max-width:400px){ .secao-3-conteiner .secao-3-descricao-titulo{ width: 80%; height: auto; display: flex; flex-direction: column; align-items: center } .secao-3-conteiner .secao-3-descricao-titulo p { font-size: 0.9rem } .secao-3-conteiner{ margin-top: 250px } .secao-3-imagem{ width: 100%; } } @media(max-width:700px){ .secao-4{ height:780px } } @media(max-width:530px){ .secao-4{ height:180px } } @media(max-width:400px){ .secao-4{ height:180px; display: none } .secao-3-conteiner{ margin-top:0px } } /*------------------------------------------------------ SESSÃO 5 ------------------------------------------------------ */ #sessao-5{ width:100%; height: 200px; display:flex; justify-content:center; align-items:center; margin-top: 100px; position: relative; } .conteiner-logo-home{ width: 70%; height: 200px; display:flex; justify-content:center; align-items:center; overflow:hidden; position:relative; } .box-logo-cliente{ position:absolute; width: 2500px; height:200px; display:flex; justify-content:space-around; align-items:center; left:-1100px; -webkit-animation: carrocel-logo 60s ease infinite; -moz-animation: carrocel-logo 60s ease infinite; animation: carrocel-logo 60s cubic-bezier(0.39, 0.58, 0.57, 1) infinite; } .logo-cliente{ width:250px; height:auto; z-index:3; cursor:pointer; } .logo-cliente img{ width:150px; height:auto; padding:20px; border-radius:10px } /*ANIMAÇÃO LOGOS CLIENTES8*/ @-webkit-keyframes carrocel-logo { 0%{left:-1100px} 50%{left:0px} 100%{left:-1100px} } .box-logo-cliente:hover{ animation-play-state: paused } .logo-cliente:hover img{ -webkit-animation: select-logo 10s cubic-bezier(0.13, 0.69, 0.75, 0.72) } @-webkit-keyframes select-logo { 0%{box-shadow: 5px 5px 10px #6660;} 100%{box-shadow: 5px 5px 20px #666;} } /*------------------------------------------------------ SESSÃO 06 ------------------------------------------------------ */ #sessao-6{ width:100%; height:700px; position:relative; display:flex; justify-content:flex-end; align-items:center; background-image: url(../imagem/bg-sesao-6.jpg); z-index:1; } #sessao-6:after{ content: ''; width: 100%; height: 700px; position: absolute; background-color: #000; opacity: 0.7; left: 0px; z-index:-1 ; } .conteiner-sessao-6{ width: 90%; height:auto; display:flex; justify-content:space-between; align-items:center; position:absolute; } .box-texto-sessao-6{ width:400px; height:500px; display:flex; flex-direction:column; justify-content:center; align-items:center; } .box-texto-sessao-6 span{ color:#f44336; font-weight:bold; font-size:1.5rem } .box-texto-sessao-6 a{ background-color:#f44336; text-decoration:none; width:200px; display:flex; justify-content:center; align-items:center; height:50px; color:#f3f3f3; font-weight:bold; margin-top:50px; } .box-texto-sessao-6 h2{ font-size: 2rem; font-weight:bold; color:#fff; text-align:justify; margin-bottom: 20px; margin-top: 20px; padding-left:10px } .box-texto-sessao-6 hr{ width:200px; height:5px; background-color:#fff; border:none } .box-texto-sessao-6 p{ width: 100%; color:#fff; border-left: 5px solid #f44336; padding-left: 10px; } .conteiner-cards-sessao-6{ width:1000px; height:700px; margin-left:100px; margin-right:200px; display:flex; justify-content:center; align-items:center; margin-top:200px; position:relative; z-index:0; /* background-color: #eff3f6; */ } .conteiner-cards-sessao-6:after{ position:absolute; content:''; width:1000px; height:700px; background-image:url(../imagem/bg-map.png); background-color:#263238; z-index:-1; right:-200px; } .box-cards-sessao-6{ width:320px; height: 420px; background-color: #fff; margin-right:20px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; } .box-cards-sessao-6:last-child{ margin-right:0px } .conteudo-sessao-6{ height:300px } .box-cards-sessao-6 h3{ font-size:1.3rem; margin: 20px; color:#263238 } .box-cards-sessao-6 p{ text-align:left; font-size:1rem; line-height:1.7 } .box-titulo-card{ height:50px; display:flex; align-items:center; border-left: 5px solid #f44336; margin-bottom:20px; } .box-svg-sessao-6{ position:relative; width:100%; height:110px; margin-top:20px; border-top: 2px solid #b5b0b0; } .box-cards-sessao-6 svg{ width:70px; height:auto; fill:#f44336; position:absolute; right:10px; bottom:10px; opacity:0.4 } .box-cards-sessao-6 a{ background-color:#263238; text-decoration:none; width:200px; display:flex; justify-content:center; align-items:center; height:50px; color:#f3f3f3; font-weight:bold; margin-left:50px } /* ---------------------------------------RESPONSIVO SESSÃO 6 */ @media(max-width:1680px){ #sessao-6{ flex-wrap:wrap; } .conteiner-sessao-6{ width:100% } .box-texto-sessao-6{ width: 350px; /* background-color: red; */ justify-content: center; align-items: center; margin-left:50px; } .conteiner-cards-sessao-6{ margin-right:50px; margin-left:20px } .conteiner-cards-sessao-6:after{ right: -50px } .box-texto-sessao-6 a{ padding: 10px } } @media(max-width:1440px){ #sessao-6{ height: 900px; background-color:#eff3f6; } #sessao-6:after{ height:900px } .conteiner-sessao-6{ flex-direction: column; justify-content:center; align-items:center; height: 10px; } .conteiner-cards-sessao-6{ /* margin:150px 0px 0px 0px; */ bottom:-200px; width:100%; margin-right: 0px; right:0px; } .conteiner-cards-sessao-6:after{ width:80%; right:0px; } .box-texto-sessao-6{ width:80%; height:auto; justify-content:center; margin-left: 0px; margin-bottom: -200px; } } @media(max-width:1200px){ #sessao-6{ height: 1700px; } #sessao-6:after{ height:1700px; } .conteiner-cards-sessao-6{ width:100%; margin-top: 50px; margin-left: 0px; flex-wrap: wrap; height:1700px; bottom: -300px; } .conteiner-cards-sessao-6:after{ width:100%; background-size:cover; background-repeat:no-repeat; background-attachment: fixed; height:1200px } .box-cards-sessao-6{ margin-bottom:60px } } @media(max-width: 760px){ #sessao-6{ height: 2300px; background-position-x:-250px } #sessao-6:after{ height:2300px; } .conteiner-cards-sessao-6{ width:100%; margin-top: -250px; margin-left: 0px; flex-wrap: wrap; height:1700px; } .conteiner-cards-sessao-6:after{ width:100%; background-size:cover; background-repeat:no-repeat; background-attachment: fixed; height:1900px } .box-cards-sessao-6{ margin-right: 0px; width: 320px; padding: 5px; height: 470px } .box-texto-sessao-6{ margin-top:-100px; margin-bottom: 200px; } .box-texto-sessao-6 p{ font-size: 1rem; } .box-cards-sessao-6 p{ padding: 0px 15px } .box-texto-sessao-6 h2{ font-size: 1.4rem } .conteudo-sessao-6{ height: 400px; padding-top:20px } .box-texto-sessao-6 span{ text-align: center } } /*------------------------------------------------------ SESSÃO 06 ------------------------------------------------------ */ #sessao-7{ width:100%; height:auto; background-color: #eff3f6; display: flex; justify-content:center; align-items:center; position:relative; padding-top: 200px; } #sessao-7 article{ width:70%; height:auto; display:flex; justify-content:center; align-items:center; margin-top: 200px; margin-bottom:80px } .box-img-sessao-7{ margin-right:40px; border-left: 7px solid #f44336; border-bottom: 7px solid #f44336; padding:0px 0px 10px 10px } .box-img-sessao-7 img{ height:700px; } .conteiner-texto-sessao-7{ height:auto; display:flex; flex-direction:column; justify-content:center; } .conteiner-texto-sessao-7 h3{ font-size:1.6rem; margin: 20px; color:#263238 } .conteiner-texto-sessao-7 span{ color:#f44336; font-weight:bold; font-size:1.5rem; padding-left: 20px } .conteiner-texto-sessao-7>p{ margin-bottom:40px; border-left: 5px solid #f44336; padding-left:20px; /*! line-height:1.7; */ } .conteiner-texto-sessao-7 div{ display:flex; align-items:center; margin-bottom:20px } .conteiner-texto-sessao-7 div img{ width:30px; height:30px; margin-right: 20px } #sessao-7>span{ position:absolute; right:10px; bottom: -25px; font-size:5rem; font-weight:bold; color: #1b1b1b; } .profissional{ width: 450px; background-color:#fff; padding:20px; box-shadow: 7px 7px 15px #d8d7d7; } @media(max-width:1000px){ #sessao-7 .box-img-sessao-7{ margin-bottom: 60px } #sessao-7 article{ flex-direction: column; } #sessao-7 .conteiner-texto-sessao-7{ align-items: center } } @media(max-width:500px){ #sessao-7 .box-img-sessao-7 img{ width: 340px; height: 480px } #sessao-7 .conteiner-texto-sessao-7{ align-items: center; } #sessao-7 .conteiner-texto-sessao-7 div{ width: 300px; } #sessao-7 p{ font-size: 1rem } #sessao-7>span{ position:relative; font-size: 2.5rem; margin-bottom: 10px; right: 0px; } #sessao-7{ flex-direction: column } } @media(max-width:400px){ #sessao-7 .box-img-sessao-7{ margin-left: 20px; } #sessao-7 .box-img-sessao-7 img{ width: 250px; height: 400px } } @media(max-width:380px){ #sessao-7 .conteiner-texto-sessao-7{ width: 99% } #sessao-7 .conteiner-texto-sessao-7 h3{ font-size: 1.3rem } #sessao-7 p{ font-size: 0.7rem } #sessao-7 .conteiner-texto-sessao-7 div{ width: 250px; } } /*------------------------------------------------------ acessoria ------------------------------------------------------ */ #acessoria-banner{ margin-bottom: 0px; background-image: url(../imagem/acessoria-banner.jpg) } #acessoria-banner::before{ content: ''; width: 100%; height: 350px; background-color: #000; opacity: 0.7; z-index: -1; } .acessoria-sect1{ width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 0px; background-color: #f3f3f3; margin-top: -60px } .acessoria-sect1 article{ width: 80%; height: auto; display: flex; flex-direction: column; justify-content: start; text-align: center } .acessoria-sect1 h2{ margin: 0px; font-size: 2.5rem; color: #f44336; } .acessoria-sect1 hr{ width: 30%; height: 3px; background-color:#263238; margin-bottom: 60px } .acessoria-sect1 p{ text-align: center; font-size: 1.7rem } .acessoria-sect2{ width: 100%; height: auto; display: flex; justify-content: center; align-items: center } .acessoria-sect2 article{ width: 90%; max-width: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center } .acessoria-titulo{ display: none } .acessoria-sect2 article .acessoria-sect2-box{ width: 100%; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .acessoria-sect2 article .acessoria-sect2-box-reverso{ flex-direction: row-reverse; text-align: end } .acessoria-sect2-box .acessoria-box{ display: flex; align-content: center } .acessoria-sect2 img { height: 300px; } .acessoria-box ul{ list-style: none; margin-top: 9px; border-left: 5px solid red; margin-left: 10px; padding: 0px 10px } .acessoria-sect2-box-reverso ul{ list-style: none; margin-top: 9px; border-right:5px solid red; margin-right:10px; border-left: none; } .acessoria-sect2 h3{ color: #263238; font-size: 1.7rem; } .acessoria-sect3{ width: 100%; height: auto; display: flex; justify-content: center; align-items: center } .acessoria-sect3 article{ height: 400px; background-image: url(../imagem/section3.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; position: relative; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: space-evenly; z-index: 1; } .acessoria-sect3 article::before{ content: ''; width: 100%; height: 400px; background-color: #000; position: absolute; opacity: 0.5; z-index: -1 } .acessoria-sect3 h3{ color: #f3f3f3; font-size: 2.0m; } .acessoria-sect3 a{ font-size: 1.2rem; background-color: #f44336; color: #f3f3f3; padding: 20px 40px; border: 2px solid #f3f3f3; border-radius: 3px; text-decoration: none; cursor: pointer; transition: 0.4s } .acessoria-sect3 a:hover{ background-color: #f3f3f3; color:#f44336; transition: 0.4s; } @media(max-width:800px){ .acessoria-sect2{ margin-bottom: 100px } .acessoria-titulo{ display: block; margin: 40px 0px } .acessoria-sect2 article .acessoria-sect2-box{ display: flex; flex-direction: column-reverse; justify-content: space-around; align-items: center } .acessoria-sect2 article .acessoria-sect2-box-reverso{ text-align: start; } .acessoria-sect2-box-reverso ul{ border-left:5px solid red; border-right: none; } .acessoria-sect2 img{ margin: 40px 0px } .acessoria-sect2 article div h3{ display: none } } @media(max-width:460px){ .acessoria-sect1 article { width: 100%; } .acessoria-sect1 article h2{ font-size: 2rem } .acessoria-sect2 .acessoria-sect2-box img{ width: 300px; height: auto } .acessoria-sect3 h3{ font-size: 1.5rem } .acessoria-sect3 a{ padding: 15px 10px } } /*------------------------------------------------------ Footer ------------------------------------------------------ */ .footer-1{ background-image: url(../imagem/5.jpg); width: 100%; height: 400px; display: flex; justify-content: space-around; flex-direction: row; align-items: center } .footer-logo>img{ width: 200px } .footer-1 .footer-conteiner{ display: flex; flex-direction: row; justify-content: space-between; width: 1200px; } .footer-1 .footer-descricao{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer-1 .footer-experiencia p{ color: #ffffff; width: 300px; font-size: 0.7rem; text-align: center; font-weight: bold; } .footer-1 .footer-logo{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 300px; } .footer-1 .footer-experiencia{ margin: 10px; } .footer-1 .footer-servico{ display: flex; justify-content: center; align-items: center } .footer-1 .footer-servico ul{ list-style:none; margin: 20px 2px } .footer-1 .footer-servico li{ margin: 3px 0px } .footer-servico h3{ font-size: 2rem; color: #eeee; } .footer-1 .footer-servico hr{ color: red; width: 60px; margin: 2px 0px } .footer-1 .footer-servico a{ text-decoration: none; color:#eeeeee; font-size: 1.1rem; font-weight: bold; } .footer-1 .footer-servico a:hover{ color: #f44336; transition: 0.3; cursor: pointer } .footer-2{ background-color: #f44336; color: #ffffff; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; font-weight: bold; } .footer-2 p{ font-size:0.9rem } .footer-formulario{ overflow: hidden; width: 300px; height: 400px; display: flex; flex-direction: row; justify-content: center; } .footer-contatos{ width: 35% } .conteiner-footer-contatos h3{ color: #f3f3f3 } .footer-contatos .conteiner-footer-contatos{ width: 100%; display: flex; justify-content: center; } .footer-contatos .conteiner-footer-contatos svg{ width: 40px; height: 30px; padding-right:10px; fill: #f44336; } .footer-contatos-icons div div{ width: 100%; display: flex;; flex-direction: row; justify-content: center; align-items: center; } .footer-contatos-icons div div div{ width: 240px; } .footer-contatos-icons div div a{ color: #f3f3f3; text-decoration: none; width: 200px } /* ----------------------------------------------------------RESPONSIVO */ @media(max-width:800px){ .footer-1{ height: 800px; } .footer-contatos{ width: 40% } .footer-contatos h3{ text-align: center } .footer-1 .footer-conteiner{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 700px; } .footer-servico{ text-align: center } } @media(max-width:800px){ .footer-2 p{ text-align: center } } @media(max-width:330px){ #formulario-footer input{ margin-left: 10px; width: 200px } .formulario-footer-cursos{ width: 200px; margin-left: 5px } #formulario-footer legend{ margin-left: 43px } #formulario-footer hr{ margin-left: 43px } } /*------------------------------------------------------ Fim do footer ------------------------------------------------------*/ #conteiner-form-lateral{ position: fixed; right: 20px; top:5%; background-color: #263238; height: auto; width: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 35px 25px; box-shadow: 2px 2px 15px #666; transition: 0.4s; z-index: 5; display: none; } #conteiner-form-lateral form{ width: 100%; height: auto; display: flex; position: relative; justify-content: center; flex-direction: column; align-items: center; } #conteiner-form-lateral #orcamento{ display: none } #conteiner-form-lateral form:after{ width: 300px; top: -15%; height: 20px; right: -25px; margin-bottom: 100px; position: absolute; content: ''; z-index: -1; padding: 35px 25px; background-color: #263238; } #conteiner-form-lateral form fieldset{ width: 300px; margin: 10px 0px; display: flex; flex-direction: column; overflow: hidden; justify-content:center; align-items:start; } #conteiner-form-lateral span, #conteiner-form-lateral button{ color: #f3f3f3; background-color: #3c515b;; padding: 10px 15px; margin: 0px 5px 0px 5px; cursor: pointer; transition: 0.4s; border: 1px solid #f7eeee; } #conteiner-form-lateral button{ margin-top: 10px; margin-left: 225px; background: #f44336; transition: 0.4s } #conteiner-form-lateral button:hover{ background-color: #f3f3f3; color: #f44336; transition: 0.4s } #conteiner-form-lateral span:hover{ background-color: #f3f3f3; color: #263238; transition: 0.4s } #conteiner-form-lateral span:active{ background-color:#f44336; color: #f3f3f3; } #conteiner-form-lateral form select{ width: 100%; height: 40px; overflow: hidden; font-family: 'Open Sans', sans-serif; background-color:#263238; border:none; border-left: 3px solid #fefefe; border-bottom: 3px solid #fefefe; border-radius: 0px 10px 0px; color: #fefefe; cursor: pointer; margin: 10px 0px } #conteiner-form-lateral form select:hover{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; transition: 0.4s } #conteiner-form-lateral form input{ width: 93%; height: 40px; margin: 10px 0px; font-family: 'Open Sans', sans-serif; background-color:#263238; border:none; border-left: 3px solid #fefefe; border-bottom: 3px solid #fefefe; border-radius: 0px 10px 0px; color: #f44336; padding-left: 5px; } #conteiner-form-lateral input::placeholder{ color: #f3f3f3; font-size: 1rem } #conteiner-form-lateral form input:focus{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; } #conteiner-form-lateral form input:hover{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; transition: 0.4s } select option:selection{ background-color:#f44336 } #fecha-form{ position: absolute; top: 0px; left: -20px; width: 40px; height: 40px; background-color: #f44336; border-radius: 5px; z-index: -1; display: flex; justify-content: center; align-items: center; transition: 0.4s; cursor: pointer } #fecha-form:hover{ left: -35px; transition: 0.4s } #fecha-form svg{ width: 15px; height: 15px; fill: #fefefe; } #ipt-esconde-form{ display: none } #ipt-esconde-form:checked~#conteiner-form-lateral{ right: -340px; transition: 0.4s } #ipt-esconde-form:checked~#conteiner-form-lateral div{ left: -35px } #ipt-esconde-form:checked~#conteiner-form-lateral div svg{ rotate: 180deg } /* ---------------------------------fim do formulario lateral-------------------------------- */ .contatos-formulario{ width: 100%; height: auto; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center } .conteiner-contatos{ display:flex; } .contatos-formulario-form{ width: 100%; height: auto; } .contatos-formulario-form div{ margin-bottom: 50px; } .contatos-formulario-form fieldset { width: 100%; height: auto ; display: flex; justify-content: center; align-items: center; flex-direction: column; } .contatos-formulario-form fieldset fieldset{ flex-direction: row; justify-content: space-between; margin: 10px 0px } .contatos-formulario-form .caixa-form-contato{ width: 45%; } #formulario-form{ width: 100%; } #formulario-form input{ height: 30px; display: flex; flex-direction: row; justify-content:space-between; } #formulario-form #caixa-name { width: 100% } #form-cursos{ width: 360px; height: 40px; display: flex; flex-direction: row; justify-content:space-between; margin: 10px; } #formulario-form #caixa-texto{ width: 100%; height: 200px; } .formulario-form textarea{ font-family: 'Open Sans', sans-serif; color: #263238; font-size: 0.9rem } input::placeholder{ padding: 10px; color: #263238; } .formulario-form .box-botao{ display: flex; align-items: end } .formulario-form .anexo{ flex-direction: row; align-items: center; justify-content: space-between } .formulario-form .anexo label { font-size: 0.9rem } .formulario-form #ipt-anexo{ height:22px } .formulario-form fieldset button{ padding: 10px 40px; background-color:#263238; color: #ccc; border: none; margin-top: 10px; font-weight: bold; border: 1px solid #ccc; transition: 0.4s } .formulario-form fieldset button:hover{ background-color: #f44336; border: 1px solid #263238; transition: 0.4s; cursor: pointer } .formulario-form fieldset button:active{ padding: 7px 36px; transition: 0.1s; margin-bottom: 6px; margin-right: 6px } .contatos-icones svg{ width: 35px; fill:#f44336; } .contatos-icones{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 20px } .icones-contados strong{ font-size: 0.7rem; color:#263238; } .icones-contados p{ font-size: 0.8rem; color: #263238; } .icones-contados{ width: 300px; height: 60px; display: flex; align-items: center; } .contatos-informacoes { display: flex; flex-direction: column; justify-content: center; margin-left: 12px } .conteiner-contatos legend{ font-size: 2.4rem; font-weight: bold; color: #f44336 } .contatos-formulario-form hr{ width: 100px; position: absolute; color: #263238; } .mapa iframe{ width: 100%; margin-top: 100px; } /*------------------- esponsivo Contatios*-----------------*/ @media(max-width:1100px){ .contatos-formulario{ height: 700px; } .conteiner-contatos{ flex-direction: column; align-items: center; height: 700px; width: 80%; } .contatos-icones{ flex-direction: row; width: 900px; } } @media(max-width:900px){ .contatos-icones{ flex-wrap: wrap; width: 600px; justify-content: center; } .contatos-formulario-form textarea{ width: 100%; } } @media(max-width:770px){ #formulario-form{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .contatos-formulario-form fieldset .caixa-form-contato{ width: 100%; } .contatos-formulario-form fieldset .box-email{ flex-direction: column; } .contatos-formulario-form fieldset .box-email input{ margin: 10px; } .contatos-formulario-form fieldset{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .contatos-formulario-form hr{ margin-bottom: 260px; } } @media(max-width:580px){ .contatos-formulario{ margin-bottom: 100px } .contatos-icones{ flex-direction: column; width: 300px; height: 400px; } .contatos-icones .icones-contados{ height: 80px } } @media(max-width:350px){ .contatos-icones{ margin-right: 30px } } /*-------------------------------Banner-------------------------- */ .banner-img{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; z-index: 0; position: relative; bottom: 60px } .banner-img .cadastro{ background-image: url(../imagem/banner-parceria.jpg); background-repeat: no-repeat;; background-size: cover; align-items:center; justify-content: center; width: 100%; height: 300px; z-index: 0; margin-bottom: 60px; position: relative; background-position: center center; } .banner-img .cadastro::before{ content: ''; background-color: #000; z-index: 0; width: 100%; height: 300px; opacity: 0.6; } .image-contatos{ background-image: url(../imagem/9.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; } .image-contatos img{ height: 300px; width: 100% } .image-contatos h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos a{ color: #f44336; text-decoration: none } @media(max-width:600px){ .image-contatos p{ font-size: 1.5rem; margin-top: 200px; } .image-contatos h3{ font-size: 2rem } } /*-------------------------------------NR5-------------------------------- */ .image-contatos-nr5{ background-image: url(../imagem/banner-1920/nr5.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr5::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr5 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr5 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr5 a{ color: #f44336; text-decoration: none; } @media(max-width:600px){ .image-contatos-nr5 h3{ font-size: 1.5rem; text-align: center } .image-contatos-nr5 a{ color: #f44336; text-decoration: none; font-size: 1rem; } } /*-------------------------------------NR6-------------------------------- */ .image-contatos-nr6{ background-image: url(../imagem/banner-1920/nr6.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr6::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr6 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr6 p{ color: #f3f3f3; position: absolute; margin-top: 200px; } .image-contatos-nr6 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR9-------------------------------- */ .image-contatos-nr9{ background-image: url(../imagem/banner-1920/nr9.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr9::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr9 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr9 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr9 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR10-------------------------------- */ .image-contatos-nr10{ background-image: url(../imagem/banner-1920/nr10.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr10::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr10 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr10 p{ color: #f3f3f3; position: absolute; margin-top: 200px; } .image-contatos-nr10 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR11-------------------------------- */ .image-contatos-nr11{ background-image: url(../imagem/banner-1920/nr11.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; /*! margin-bottom: 130px; */ position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center } .image-contatos-nr11::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr11 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr11 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr11 a{ color: #f44336; text-decoration: none } @media(max-width:500px){ .image-contatos-nr11 h3{ font-size: 2rem } .image-contatos-nr11 p{ margin-top:0px; margin-bottom:-200px } } /*-------------------------------------NR12-------------------------------- */ .image-contatos-nr12{ background-image: url(../imagem/banner-1920/nr12.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr12::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr12 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr12 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr12 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR14-------------------------------- */ .image-contatos-nr13{ background-image: url(../imagem/banner-1920/nr13.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr13::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr13 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr13 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr13 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR14-------------------------------- */ .image-contatos-nr14{ background-image: url(../imagem/banner-1920/nr14.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr14::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr14 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr14 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr14 a{ color: #f44336; text-decoration: none } /*------------------------------------------17----------------------------- */ .image-contatos-nr17{ background-image: url(../imagem/banner-1920/nr17.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr17::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr17 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr17 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr17 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR18-------------------------------- */ .image-contatos-nr18{ background-image: url(../imagem/banner-1920/nr18.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr18::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr18 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr18 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr18 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR20-------------------------------- */ .image-contatos-nr20{ background-image: url(../imagem/banner-1920/nr20.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr20::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr20 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr20 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr20 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR23-------------------------------- */ .image-contatos-nr23{ background-image: url(../imagem/banner-1920/nr23.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position-x: -500px; } .image-contatos-nr23:before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr23 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr23 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr23 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR25-------------------------------- */ .image-contatos-nr25{ background-image: url(../imagem/banner-1920/nr25.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr25::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr25 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr25 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr25 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR26-------------------------------- */ .image-contatos-nr26{ background-image: url(../imagem/banner-1920/nr26.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr26::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr26 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr26 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr26 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR33-------------------------------- */ .image-contatos-nr33{ background-image: url(../imagem/banner-1920/nr33.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr33::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr33 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr33 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr33 a{ color: #f44336; text-decoration: none } /*-------------------------------------NR35-------------------------------- */ .image-contatos-nr35{ background-image: url(../imagem/banner-1920/nr35.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-contatos-nr35::before{ content: ''; width: 100%; height: 350px; z-index: -1; position: absolute; background-color: #000; opacity: 0.5; } .image-contatos-nr35 h3{ color:#f3f3f3; position: absolute; font-size: 2.3rem; margin-bottom: 50px; text-align: center } .image-contatos-nr35 p{ color: #f3f3f3; position: absolute; margin-top: 100px; } .image-contatos-nr35 a{ color: #f44336; text-decoration: none } /*--------------------------------------Banner-responsivo 1280px --------------------------------------*/ @media(max-width:1280px){ .image-contatos-nr5{ background-image: url(../imagem/banner-1280/nr05-1280px.jpg) } .image-contatos-nr6{ background-image: url(../imagem/banner-1280/nr06-1280px.jpg) } .image-contatos-nr9{ background-image: url(../imagem/banner-1280/nr09-1280px.jpg) } .image-contatos-nr10{ background-image: url(../imagem/banner-1280/nr10-1280px.jpg) } .image-contatos-nr11{ background-image: url(../imagem/banner-1280/nr11-1280px.jpg) } .image-contatos-nr12{ background-image: url(../imagem/banner-1280/nr12-1280px.jpg) } .image-contatos-nr13{ background-image: url(../imagem/banner-1280/nr13-1280px.jpg) } .image-contatos-nr14{ background-image: url(../imagem/banner-1280/nr14-1280px.jpg) } .image-contatos-nr17{ background-image: url(../imagem/banner-1280/nr17-1280px.jpg) } .image-contatos-nr18{ background-image: url(../imagem/banner-1280/nr18-1280px.jpg) } .image-contatos-nr20{ background-image: url(../imagem/banner-1280/nr20-1280px.jpg) } .image-contatos-nr23{ background-image: url(../imagem/banner-1280/nr23-1280px.jpg) } .image-contatos-nr25{ background-image: url(../imagem/banner-1280/nr25-1280px.jpg) } .image-contatos-nr26{ background-image: url(../imagem/banner-1280/nr26-1280px.jpg) } .image-contatos-nr33{ background-image: url(../imagem/banner-1280/nr33-1280px.jpg) } .image-contatos-nr35{ background-image: url(../imagem/banner-1280/nr35-1280px.jpg) } } /* ------------------------------------banner responsivo-720px.jpeg------------------------------ */ @media(max-width:720px){ .image-contatos-nr5{ background-image: url(../imagem/banner-720/nr05-720px.jpg) } .image-contatos-nr6{ background-image: url(../imagem/banner-720/nr06-720px.jpg) } .image-contatos-nr9{ background-image: url(../imagem/banner-720/nr09-720px.jpg) } .image-contatos-nr10{ background-image: url(../imagem/banner-720/nr10-720px.jpg) } .image-contatos-nr11{ background-image: url(../imagem/banner-720/nr11-720px.jpg) } .image-contatos-nr12{ background-image: url(../imagem/banner-720/nr12-720px.jpg) } .image-contatos-nr13{ background-image: url(../imagem/banner-720/nr13-720px.jpg) } .image-contatos-nr14{ background-image: url(../imagem/banner-720/nr14-720px.jpg) } .image-contatos-nr17{ background-image: url(../imagem/banner-720/nr17-720px.jpg) } .image-contatos-nr18{ background-image: url(../imagem/banner-720/nr18-720px.jpg) } .image-contatos-nr20{ background-image: url(../imagem/banner-720/nr20-720px.jpg) } .image-contatos-nr23{ background-image: url(../imagem/banner-720/nr23-720px.jpg) } .image-contatos-nr25{ background-image: url(../imagem/banner-720/nr25-720px.jpg) } .image-contatos-nr26{ background-image: url(../imagem/banner-720/nr26-720px.jpg) } .image-contatos-nr33{ background-image: url(../imagem/banner-720/nr33-720px.jpg) } .image-contatos-nr35{ background-image: url(../imagem/banner-720/nr35-720px.jpg) } } /* ------------------------------------banner responsivo-400px------------------------------ */ @media(max-width:400px){ .image-contatos-nr5{ background-image: url(../imagem/banner-400/nr05-400px.jpg) } .image-contatos-nr6{ background-image: url(../imagem/banner-400/nr06-400px.jpg) } .image-contatos-nr9{ background-image: url(../imagem/banner-400/nr09-400px.jpg) } .image-contatos-nr10{ background-image: url(../imagem/banner-400/nr10-400px.jpg) } .image-contatos-nr11{ background-image: url(../imagem/banner-400/nr11-400px.jpg) } .image-contatos-nr12{ background-image: url(../imagem/banner-400/nr12-400px.jpg) } .image-contatos-nr13{ background-image: url(../imagem/banner-400/nr13-400px.jpg) } .image-contatos-nr14{ background-image: url(../imagem/banner-400/nr14-400px.jpg) } .image-contatos-nr17{ background-image: url(../imagem/banner-400/nr17-400px.jpg) } .image-contatos-nr18{ background-image: url(../imagem/banner-400/nr18-400px.jpg) } .image-contatos-nr20{ background-image: url(../imagem/banner-400/nr20-400px.jpg) } .image-contatos-nr23{ background-image: url(../imagem/banner-400/nr23-400px.jpg) } .image-contatos-nr25{ background-image: url(../imagem/banner-400/nr25-400px.jpg) } .image-contatos-nr26{ background-image: url(../imagem/banner-400/nr26-400px.jpg) } .image-contatos-nr33{ background-image: url(../imagem/banner-400/nr33-400px.jpg) } .image-contatos-nr35{ background-image: url(../imagem/banner-400/nr35-400px.jpg) } } /*-------------------------------Banner-------------------------- */ /*-------------------------------seção 1-2 intituto---------------*/ .section-instituto{ width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f3f3f3; padding: 60px 0px; } .article-instituto{ width: 85%; display: flex; flex-direction: row; align-items: center; justify-content: space-around; flex-wrap: wrap; text-align: center } .article-instituto img{ width: 550px; } .intituto-imagem{ width: 550px; } .informacoes-instituto{ width: 500px; min-width: 280px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; } .informacoes-instituto h2{ color: #f44336; font-size: 1.8rem; margin: 20px 0px; text-align: center; /*! background-color: #ccc; */ } .informacoes-instituto p{ color: #263238; font-size: 1rem; text-align: justify; text-indent: 30px; } .logo-parceiros{ width: 100%; height: auto; display: flex; justify-content: center; align-items: center; margin: 100px 0px; flex-direction: column; } .logo-parceiros h2{ color: #f44336; text-align: center; width: 90%; } .logo-parceiros .conteiner-logo{ width: 85%; height: auto; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 60px; } .logo-parceiros .conteiner-logo .box-logo{ width: 200px; height: 200px; display: flex; justify-content: center; align-items: center } .box-logo .img-logo { display: flex; justify-content: center; align-items: center; height: 140px; width: 140px; box-shadow: none; transition: 0.4s; border-radius: 10px } .box-logo .img-logo:hover{ box-shadow: 1px 2px 20px #6666; margin-bottom: 20px; transition: 0.4s } .box-logo img{ width: 120px; } /* ------------------------------------------------------REPONSIVO- */ @media(max-width:550px){ .article-instituto img{ width: 380px; margin-bottom: 40px; } } @media(max-width:400px){ .article-instituto img{ width: 250px; margin-bottom: 40px; } .informacoes-instituto{ width: 90%;} } /*-------------------------------fim seção 1-2 intituto---------------*/ .mvv{ width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center } .conteiner-mvv{ height: auto; width: 90%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; margin: 160px 0px; flex-wrap: wrap; transition: 0.4s } .conteiner-mvv svg{ width: 60px; height: 60px; fill: #263238; transition: 0.4 } .conteiner-mvv>div:hover svg{ fill: #f44336; transition: 0.4 } .conteiner-mvv>div{ width: 350px; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: #f3f3f3; box-shadow: 2px 5px 10px #6666; padding: 20px 5px; margin: 10px; transition: 0.4s; } .conteiner-mvv .box-mvv:hover{ top: -5px; transition: 0.5s; position: relative } .conteiner-mvv div div{ width: 95%; height: 350px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .conteiner-mvv div p{ margin-top: 10px; font-size: 0.7rem; color: #263238; font-weight: bold; } .conteiner-mvv div h3{ margin-top: 20px; color: #f44336; font-size: 1.5rem } .mvv-descricao{ width: 100%; height: auto; margin: 10px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media(max-width:1240px){ .article-instituto-2{ flex-direction: column-reverse } } @media(max-width:1100px){ .mvv .conteiner-mvv{ flex-direction: column; text-align: center; text-align: center } .intituto-imagem2{ margin-top: 100px } } @media(max-width:400px){ .conteiner-mvv{ width: 95%; } .conteiner-mvv>div{ width: 90%; } .conteiner-mvv div div{ height: 400px; } } /*----------------------------------------------------PAGINA DE CURSOS SELECAO DE CURSOS----------------------------- */ #secao-1-cursos{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #secao-2-cursos{ width: 100%; height: 100%; display: flex; background-color: #f3f3f3; justify-content: center; } #secao-2-cursos .conteiner-article-cursos{ padding-bottom: 20px; } .conteiner-article-cursos{ width: 70%; height: auto; } .secao-1-imagens-cursos svg{ width: 40px; height: 40px; fill: #f44336; margin: 0px 20px } .secao-1-imagens-cursos h3{ font-size: 1.1rem; color: #263238; } .secao-1-titulo-cursos{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .secao-1-titulo-cursos h2{ font-size: 4rem; color: #f44336; } .secao-1-imagens-cursos { display: flex; flex-direction: row; flex-wrap: wrap; height: auto; align-items: center; justify-content: space-around; margin-bottom: 200px; /*! width: 600px; */ } .box-setion-1-cursos{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 40px; } .box-setion-1-cursos .box-setion-titulo-cursos{ display: flex; flex-direction: row; align-items: center; justify-content: center; width: 400px; margin: 20px 0px; } .box-setion-1-cursos .img-section-1-cursos{ width: 400px; height: 300px; background-size: cover; text-align: center; position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; } .box-setion-1-cursos .img-section-1-cursos img{ width: 400px; height: 300px; } .img-section-1-cursos:before{ content: ''; width: 400px; height: 300px; background-color: #000000; z-index: 2; opacity: 0.7; position: absolute; } .img-section-1-cursos p{ display: none; color:red; } .img-section-1-cursos a{ color: #f3f3f3; z-index: 2; position: absolute; width: 140px; padding: 15px 30px; text-decoration: none; border: 1px solid #f3f3f3; font-size: 1.3rem; transition: 0.4s } .img-section-1-cursos a:hover{ background-color: #f44336; transition: 0.4s } @media(max-width:400px){ .box-setion-1-cursos .img-section-1-cursos img{ width: 300px; height: auto } .img-section-1-cursos:before{ width: 300px; height: 200px; } .box-setion-1-cursos .box-setion-titulo-cursos{ width: 80%; } .box-setion-titulo-cursos h3{ font-size: 1rem } } /*----------------------------------------------------PAGINA DE CURSOS----------------------------- */ .cursos-secao{ width: 100%; display: flex; justify-content: center; align-items: center; } .cursos-secao p{ text-indent: 20px } .conteiner-secao-cursos{ width: 80%; display: flex; justify-content: space-between; flex-wrap: wrap; } #video-depoimento{ width:100%; height:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; } #video-depoimento div{ width:80%; height:auto } #video-depoimento h2{ text-align:center; width: 100%; background-color: #263238; color: #fff; font-size: 2.0rem; text-align: center; margin-top: 0px } #video-depoimento article{ width:80%; height:auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding: 80px; margin: 0px; } #video-depoimento article iframe{ margin:20px; } @media(max-width:500px){ .conteiner-secao-cursos{ width:100% } #video-depoimento article{ width:100%; padding: 0px; } #video-depoimento div{ width:100%; } #video-depoimento div h2{ width: 100% } section .cursos-secao-2{ width: 100%; } } .cursos-secao-1{ width: calc(100% - 450px); min-width: 500px; flex-direction: column; } @media(max-width:1120px){ .cursos-secao-1{ width: 100%; min-width: 320px; } } .cursos-secao-1 article{ width: 100%; height:auto } .cursos-secao-1 hr{ color: #f44336; } .cursos-secao-1 article div{ margin-top: 0px } .cursos-secao-1 h2{ text-align: center; background-color: #263238; color: #fff; font-size: 2.0rem; text-align: center; margin-top: 0px } .cursos-secao-1 p{ font-size: 1rem; text-align: justify; width: 90%; line-height: 30px; } .box-texto{ width:100%; display: flex; justify-content: center } .cursos-secao-1 article ul img{ width: 20px; height: 20px; margin-right: 10px } .cursos-secao-1 article ul{ padding:20px; list-style: none; line-height: 35px } .cursos-secao-2{ width: 400px; } @media(max-width:1000px){ .cursos-secao-2{ width: 100%; } } .cursos-form{ width: 100%; height: auto; background-color: #263238; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative } .cursos-form form{ width: 100%; margin: 30px 10px; display: flex; flex-direction: column } @media(max-width:1120px){ .cursos-secao-2{ width: 100%; flex-direction: column-reverse; display: flex; } } @media(max-width:500px){ .cursos-form form{ margin: 30px 0px; } .cursos-form fieldset { width: 100% } .cursos-form fieldset input{ width:100% } } .cursos-form #orcamento{ display: none } .cursos-form fieldset{ width: 90%; display: flex; flex-direction: column; align-items: center; margin: 0px 10px; border: none; overflow: hidden; } .cursos-form div{ margin-top: 40px } .cursos-form span, .cursos-form button{ margin: 10px; color: #f3f3f3; cursor: pointer; transition: 0.4s; font-weight: bold; border: 1px solid #f7eeee; padding: 10px 20px; background-color: #3c515b; } @media(max-width:400px){ .cursos-form button{ font-size: 0.8rem; padding: 10px 10px; margin: 5px } .cursos-form span{ font-size: 0.8rem; margin: 5px } } .cursos-form span:hover{ background-color: #f3f3f3; color: #263238; transition: 0.4s } .cursos-form span:active{ background-color:#f44336; color: #f3f3f3; } .cursos-form fieldset input{ width:100%; padding-left: 0px; margin-bottom: 20px; height: 50px; border-bottom: 2px solid #f44336; border:none; border-left: 3px solid #fefefe; border-bottom: 3px solid #fefefe; border-radius: 0px 10px 0px; color: #f3f3f3; background-color: #263238; transition: 0.4s; font-size: 1.2rem; } .cursos-form fieldset input:hover{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; transition: 0.4s } .cursos-form fieldset input:focus{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; transition: 0.4s } @media(max-width:500px){ .cursos-form fieldset input{ width: 90%; } .cursos-form fieldset select{ width: 90% } } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } .cursos-form input::placeholder{ color: #ffffff; font-size: 1.2rem; } .cursos-form select{ width:100%; margin-bottom: 20px; height: 50px; border-bottom: 2px solid #f44336; border:none; border-left: 3px solid #fefefe; border-bottom: 3px solid #fefefe; border-radius: 0px 10px 0px; color: #f3f3f3; background-color: #263238; transition: 0.4s; font-size: 1.2rem; padding-left: 10px } .cursos-form select:hover{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; transition: 0.4s } .cursos-form select:focus{ border-left: 3px solid #f44336; border-bottom: 3px solid #f44336; transition: 0.4s } .cursos-form select option{ background-color: #f3f3f3; border: 1px solid #f44336; color: #f44336; } .cursos-form button{ margin-left: 225px; background: #f44336; transition: 0.4s } @media(max-width:1120px){ .cursos-form button{ margin-left: 0px; width: 300px; height: 50px } .cursos-form form{ display: flex; flex-direction: column; justify-content: center; align-items: center } } .cursos-form button:hover{ background-color: #f3f3f3; color: #f44336; transition: 0.4s } .cursos-secao-2 img{ width: 20px; height: 20px } .cursos-secao-2 h2{ text-align: center; background-color: #263238; color: #fff; font-size: 2.0rem; text-align: center; margin-top: 0px; } .cursos-secao-2 .box-informacoes{ width: 90%; display: flex; flex-direction: column; justify-content: center; } .box-informacoes h3{ color: #f44336; font-size: 1.2rem; margin: 20px 0px } .box-informacoes p{ font-size: 0.9rem; line-height: 25px; } .box-informacoes h4{ margin-top: 20px; text-align: center } /*----------------------------Checkout--------------------*/ .image-checkout{ background-image: url(../imagem/checkout-imagem.jpg); display: flex; align-items:center; justify-content: center; width: 100%; height: 350px; z-index: 0; margin-bottom: 130px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; margin-bottom: 0px; } .image-checkout::before{ content: ''; background-color: #000; opacity: 0.6; width: 100%; height: 350px; } #checkout{ width: 100%; height: auto; display: flex; align-items: start; justify-content: center; margin: 30px 0px } #checkout svg{ width: 200px; fill: #f44336; } #checkout article{ width: 90%; height: auto; display: flex; flex-direction:row; align-items: center; justify-content: space-around; text-align: center; margin-bottom: 60px } #checkout .informacoes-checkout h3{ color: #263238; font-size: 1.5rem; margin: 15px } #checkout .informacoes-checkout p{ font-size: 1rem; color: #263238; font-weight: bold; margin-top: 40px } #checkout .inicio-checkout{ margin: 50px 0px } #checkout .inicio-checkout a{ color: #f3f3f3; text-decoration: none; padding: 10px 30px; background-color: #f44336; border-radius: 40px } #checkout .imagem-checkout img{ width: 600px; } /*-------------------------------------- MENU-HEADER-RESPONSIVO-------------------------------------- */ #responsivo-menu{ position: relative; width: 100%; display: none; justify-content: center; align-items: start; height:auto; top: -36px; /*! background-color: #f4f4f4; */ } #conteiner-menu-responsivo{ position: relative; height: 45px; width:90%; /*! background-color: #263238; */ display: flex; align-items: flex-end; flex-direction: column; } #icon-menu-responsivo{ width: 50px; height: 50px; /*! margin: 10px 10px 3px 0px; */ display: flex; flex-direction: column; justify-content: center; cursor: pointer; background-color: #263238; align-items: center; } #icon-menu-responsivo div{ margin: 3px;} #inpt-menu-header{ display:none } #barra1,#barra2, #barra3{ width: 23px; height: 3px; background-color: #ccc; } #menu-header-responsivo{ width: 100%; height:0px; background-color: #263238; display: flex; justify-content: center; overflow:hidden; transition: 0.4; margin-top: 7px } #dropdown-menu-responsivo{ list-style: none; width: 100%; background-color: #263238; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center } #menu-header-responsivo ul li{ height: 50px; width: 100%; border-top: 1px solid #fff; display: flex; align-items: start; position: relative; flex-direction: column; } #menu-header-responsivo ul li:active{ background: red; } #menu-header-responsivo ul li a{ text-decoration: none; margin-left: 20px; color:#fff; transition: 0.4s; height: 50px; display: flex; align-items: center; width: calc(100% - 20px); height: 100% } @media(max-width:500px){ #menu-header-responsivo ul li a{ font-size: .7rem } } #menu-header-responsivo #cursos>a{ height: 50px } #menu-header-responsivo #cursos #seguranca>a{ height: 50px } #menu-header-responsivo ul ul{ background-color: #f44336; height: 0px; overflow:hidden; width: 100% } #inpt-menu-header:checked~#menu-header-responsivo{ /*INPUT MENU RESPONSIVO*/ overflow: visible; } .icon-sub-menu{ /*icone dropdown*/ width: 20px; height: 20px; background: #fff; position: absolute; right: 10px; top: 10px; display: flex; justify-content: center; align-items: center } .icon-sub-menu img{ /*icone dropdown*/ width: 30px; height: 30px; margin-left: 10px; margin-bottom: 5px; opacity:0%; transition: 0.4s; } #cursos{ /*CURSOS*/ display: flex; flex-direction: column; align-items: start; justify-content: center; transition: height 0.4s; } #menu-header-responsivo #cursos>ul{ /*dropdown-cursos*/ height:0px; transition: height 0.4s; width: 100%; display: flex; flex-direction: column; justify-content: start } #inpt-submenu-1,#inpt-submenu-2{ /*INPUTS*/ display:none} /*INPUT MENU CURSOS*/ #inpt-submenu-1:checked~#cursos{ overflow: visible; display: flex; flex-direction: column; align-items: start; justify-content: center; transition: height 0.4s; } #inpt-submenu-1:checked~#cursos #icon-sub-menu-1 img{ opacity: 100%; transition: 0.4s } #inpt-submenu-1:checked~#cursos>a{ margin-left: 45%; transition: 0.4s; } #inpt-submenu-1:checked~#cursos>ul{ transition: height 0.4s; } /*SEGURANÇA*/ #menu-header-responsivo #seguranca{ overflow: hidden; display: flex; flex-direction: column; align-items: start; } #menu-header-responsivo #seguranca ul{ /*dropdown-seguraça*/ background-color:#c4c4c4; overflow: hidden; border: none; } #menu-header-responsivo #seguranca ul a{ color: #101010; } /*INPUT MENU SEGURANÇA*/ #inpt-submenu-2:checked~ #seguranca{ overflow: visible; align-items: start; } #inpt-submenu-2:checked~ #seguranca #icon-sub-menu-2 img{ opacity: 100%; transition: 0.4s } #inpt-submenu-2:checked~#seguranca>a{ transition: 0.4s; } @media(max-width:1000px){ #responsivo-menu{ display: flex; z-index: 3 } } .ol-class ul li{ margin: 10px 0px 0px 20px } /* ===================BANNER=================== */ .conteiner-banners{ top: -60px; overflow:hidden; width: 100%; height: 850px; /* background-image: linear-gradient(150deg, #b623f5 20%,#006aff); */ display: flex; justify-content:center; align-items: center; margin: 0px; border: none; position: relative; } .conteiner-banners:after{ content: ""; width: 100%; height: 850px; position: absolute; background-color: #000000; opacity: 0.6 } .conteiner-banners video{ width: 100% } @media(max-width:1360px){ .conteiner-banners{ height:550px } .conteiner-banners:after{ height: 550px; } } @media(max-width:900px){ .conteiner-banners{ height: 500px } } @media(max-width:800px){ .conteiner-banners{ height: 450px } } @media(max-width:750px){ .conteiner-banners{ height:400px; } .conteiner-banners video{ width: auto; height: 400px } } #banner-texto{ width: 60%; height: 450px; position: absolute; display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ z-index: 1; } #banner-texto h1{position: absolute; /*! top: 0px; */width: 80%px;font-family: 'Raleway', sans-serif;font-size: 2rem;color: #fff;animation-name:titulo-banner;animation-duration: 2s;text-align: center;/* display: flex; *//* flex-direction: column; *//* align-items: center; */} #banner-texto a{ position:absolute; background-color: #f44336; color: white; font-weight: bold; border: none; padding: 20px 30px; cursor: pointer; border-radius: 5px; display: block; margin-top: 50px; bottom: 0px; font-size:1.5rem; animation-name:btn-banner; animation-duration: 3s; animation-delay: 0.5s; opacity: 0; animation-fill-mode: forwards; text-decoration: none; } @media(max-width:800px){ #banner-texto h1{ font-size: 2rem; width:80%; } #banner-texto{ height: 370px } } @media(max-width:750px){ #banner-texto{ width: 90%; height: 200px; margin-top: 50px; } .conteiner-banners:after{ height: 100%; } #banner-texto span{ width: 350px; display:none } #banner-texto h1{ font-size: 1rem; margin:0px; line-height: 1.7; } #banner-texto button{ margin-top:0px; /* margin-bottom: 10px; */ font-size: 1rem; padding: 5 10px } } #banner-texto h1 span{ position: relative; } #detalhe-equipamento{ position: absolute; /*! top: 118px; */ width: 500px; font-family: 'Raleway', sans-serif; animation-name:titulo-equipamentos; animation-duration: 2s; font-size: 1rem; } .descritivo-banner{ position: absolute; width: 500px; top: 160px; color: #fff; font-size: 1rem; text-align: justify; font-family: 'Open Sans', sans-serif; animation-name:texto-banner; animation-duration: 2s; } #banner-texto button:active{ padding: 18px 26px; bottom:2px; } /* ----------ANIMAÇÃO TEXTO----------- */ @keyframes titulo-banner{ from{top: -100px;opacity: 0} to{top: 0px;opacity: 1} } @keyframes btn-banner{ from{bottom: 150px;opacity: 0;} to{bottom: 0px;opacity: 1} } /* ----------FIM ANIMAÇÃO TEXTO----------- */ /*--------------------- botão whatsapp-------------------- */ #links-fixos{ position: fixed; right: 1%; top: 90%; width: 8em; margin-top: -2.5em; z-index: 10; width: 85px; height: 85px; border-radius: 70px; align-items: center; display: flex; justify-content: center; z-index: 10; } @media(max-height:800px){ #links-fixos{ left: 3%; } }