@import "reset.css";
@import "helpers.css";

body{  font-family: 'Neo Sans Pro'; font-size: 1rem; font-weight: 500; color: #585858; }
.container{  width: 1400px; margin: 0 auto; position: relative; }
p{ line-height: 140%; }
.button-center{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.swiper-slide{ height: auto; }
.swiper-slide .item{ height: 100%; }

.section-title { text-align: center; line-height: 120%; color: #ffff; font-weight: 700; font-style: italic; font-size: 2rem; text-transform: uppercase; }

.topo{ background: #018144; padding: 2.1875rem 0; border-radius: 0 0 36px 36px; position: fixed; top: 0; left: 0; width: 100%; z-index: 40; transition: padding 200ms ease-in-out }
.topo.on-scroll{ padding: 1.5rem 0; }
.topo .container{ display: flex; align-items: center; justify-content: space-between; }
.topo .marca{ display: block; width: 10.625rem; height: auto; transition: width 200ms ease-in-out; }
.topo.on-scroll .marca{ width: 9.375rem; }
.topo .marca img{ max-width: 100%; height: auto; }
.topo .link a{ position: relative; display: block; overflow: hidden; background: #d36905; color: #fff; border-radius: 50px; padding: 14px 40px; font-weight: bold; font-style: italic; }
.topo .link a span{ color: #fff; z-index: 20;  transition: .5s; font-size: 1.8rem; display: block; position: relative; font-weight: bold; font-style: italic;}
.topo .link a::before{ content: ""; transition: .5s; width: 0; z-index: 10; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; }
.topo .link a:hover::before{width: 100%; }
.topo .link a:hover span{ color: #d36905; }

.banner-image{ width: 100%; position: relative; height: auto; }
.banner-image img{ width: 100%; height: auto; display: block; }

.banner{ width: 100%; position: relative; height: auto; }
.banner img{ width: 100%; height: auto; display: block; }
.banner .swiper-button-prev{ left: 50px; }
.banner .swiper-button-next{ right: 50px; }

.estrutura{ width: 100%; position: relative; height: auto; padding: 100px 0;}
.estrutura .title{ display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: 60px;  padding: 0 100px; }
.estrutura .title h2{ color: #2c438f; font-weight: bold; font-style: italic; font-size: 2.3rem; text-transform: uppercase; margin-bottom: 10px;  }
.estrutura .title p{ color: #585858; font-weight: 500; font-style: italic; font-size: 1.8rem; line-height: 120%; }
.estrutura .slide { padding: 0 70px; position: relative; }
.estrutura .slide .item{ width: 100%; height: 100%; text-align: center; }
.estrutura .slide .item img{width: 100%; height: 333px; object-fit:cover; border-radius: 21px; margin-bottom: 20px; }
.estrutura .slide .item h3{ border-radius: 50px; border: #7bb742 solid 2px; padding: 10px 20px; font-size: 1.1rem; display: inline-block; color: #585858; font-weight: 300; font-style: italic;  }
.estrutura .slide .swiper-button-next{ top: 43%; }
.estrutura .slide .swiper-button-prev{ top: 43%; }
.estrutura .slide .swiper-button-next:after{ color: #ced9de; }
.estrutura .slide .swiper-button-prev:after{ color: #ced9de; }

.agende{ width: 100%; position: relative; height: auto; padding: 130px 0; background: url(https://devlevel131.com.br/clientes/sesi-matriculas-2026/wp-content/uploads/2025/10/bg.jpg) top center no-repeat; background-size: cover; }
.agende .container{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.agende a{ border: #fff solid 2px; text-transform: uppercase; position: relative; border-radius: 50px; overflow: hidden;  padding: 14px 40px; }
.agende a span{ color: #fff; z-index: 20;  transition: .5s; font-size: 1.8rem; display: block; position: relative; font-weight: bold; font-style: italic;}
.agende a::before{ content: ""; transition: .5s; width: 0; z-index: 10; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; }
.agende a:hover::before{width: 100%; }
.agende a:hover span{ color: #2c438f; }

.video{ position: relative; padding: 100px 0; background: #d9d9d9;  }
.video .player{ padding: 0 70px; position: relative;  }
.video .player a{ width: 100%; height: 100%; display: block; position: relative; overflow: hidden; }
.video .player a img{ width: 100%; height: auto; display: block; transition: .5s; }
.video .player a::before{ content: ""; background: url(../img/icon-video.png) no-repeat; transition: .5s; z-index: 20; width: 100px; height: 100px; background-size: 100px; opacity: .4; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video .player a::after{ content: ""; background: #000; z-index: 10; width: 100%; height: 100%; transition: .5s; opacity: .6; position: absolute; top: 0; left: 0; display: block; }
.video .player a:hover::after{ opacity:0; }
.video .player a:hover::before{ width: 120px; height: 120px; background-size: 120px; opacity: 1; }
.video .player a:hover img{ transform: scale(1.050); }

.estudar{ width: 100%; position: relative; height: auto; padding: 100px 0; background: url(../img/bg2.jpg) top center no-repeat; background-size: cover; }
.estudar .title{ display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: 60px;  padding: 0 100px; }
.estudar .title h2{ color: #fff; font-weight: bold; font-style: italic; font-size: 2.3rem; text-transform: uppercase;  }
.estudar .slide { padding: 0 70px; position: relative; margin-bottom: 60px; }
.estudar .slide .item{ padding: 10px; background: #fff; border-radius: 30px; display: flex; align-items: center; height: auto; }
.estudar .slide .item img{  border-radius: 30px; width: 50%;  }
.estudar .slide .item .text{ width: 40%; margin-left: 3%; }
.estudar .slide .item .text h3{font-weight: bold; text-transform: uppercase; margin-bottom: 8px; font-style: italic; color: #2c438f; font-size: 1.6rem;}
.estudar .slide .item .text p{ font-weight: 300; font-style: italic; color: #2c438f; font-size: 1.1rem; margin-bottom:10px; }
.estudar .slide .item .text ul{ margin-left:20px; list-style:disc; }
.estudar .slide .item .text ul li{ font-weight: 300; font-style: italic; color: #2c438f; font-size: 1.1rem; line-height:120%; margin-bottom:10px; }
.estudar .slide .item .text strong{ font-weight:bold; }
.estudar .slide .swiper-button-next{ top: 47%; }
.estudar .slide .swiper-button-prev{ top: 47%; }
.estudar .button-center a{ position: relative; overflow: hidden; background: #02798d; text-transform: uppercase; color: #fff; border-radius: 50px; font-size: 1.8rem;  font-weight: bold; font-style: italic; padding: 14px 40px; }
.estudar .button-center a span{ color: #fff; z-index: 20;  transition: .5s; font-size: 1.8rem; display: block; position: relative; font-weight: bold; font-style: italic;}
.estudar .button-center a::before{ content: ""; transition: .5s; width: 0; z-index: 10; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; }
.estudar .button-center a:hover::before{width: 100%; }
.estudar .button-center a:hover span{ color: #02798d; }

.formulario{ width: 100%; position: relative; height: auto; padding: 100px 0; background: #02798d; }
.formulario .flex{ padding: 0 70px; display: flex; align-items: center; justify-content: center; }
.formulario .flex .text{ width: 43%; margin-right: 50px; }
.formulario .flex .text .section-title{ text-align: right; margin-bottom:10px; }
.formulario .flex .text p{ text-align: right; line-height: 120%; color: #ffff; font-weight: 500; font-style: italic; font-size: 1.4rem; text-transform: uppercase; }
.formulario .box-form{ background: #d9d9d9; border-radius: 30px; padding: 26px; width: 60%; }
.form-control { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.875rem; }
.form-control input, .form-control select{font-family: 'Neo Sans Pro'; border: none; text-transform: uppercase; color: #494949; font-size: 1rem; padding: 7px 15px; border-radius: 50px; font-weight: 500; font-style: italic; background-color: white; }
.box-form-white .form-control input, .box-form-white .form-control select { background-color: #d9d9d9;}
.form-control input::placeholder, .form-control select:invalid, .form-control select option[value=""] { color: #999; }
.box-form-white .form-control input::placeholder, .box-form-white .form-control select:invalid, .box-form-white .form-control select option[value=""] { color: #888; }
.form-control select{ appearance: none; }
.form-control .select-wrapper{ position: relative; z-index: 0; }
.form-control .select-wrapper select{ width: 100%; padding-right: 1.875rem; }
.form-control .select-wrapper svg{ width: 1.25rem; height: 1.25rem; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); right: 0.5rem; pointer-events: none; }
.form-control .w30{  grid-column: span 3; }
.form-control .w70{  grid-column: span 7; }
.form-control .w50{  grid-column: span 5; }
.form-control .w100{ grid-column: span 10; }
.form-control .telefone{ margin-right: 0; }
.form-control .flex-concordo{ display: flex; align-items: baseline; justify-content: space-between; gap: 0.875rem; }
.form-control .flex-concordo span{ font-size: .8rem; font-weight: 500; font-style: italic; }
.form-control button{font-family: 'Neo Sans Pro'; cursor: pointer; background: #7bb742; text-transform: uppercase; border: none; color: #fff; border-radius: 50px; font-size: 1rem;  font-weight: 500; font-style: italic; padding:7px 20px;  }
.form-control button:hover{ background: #02798d; }

.pergunte{ width: 100%; position: relative; height: auto; padding: 50px 0; }
.pergunte .container{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.pergunte h2{ color: #1d3585; font-weight: bold; font-style: italic; font-size: 2.3rem; text-transform: uppercase; margin-bottom: 20px;  }
.pergunte a{ border: #7bb742 solid 2px; position: relative; overflow: hidden; background: #7bb742; text-transform: uppercase; color: #fff; border-radius: 50px; font-size: 1.8rem;  font-weight: bold; font-style: italic; padding: 14px 40px;  }
.pergunte a span{ color: #fff; z-index: 20;  transition: .5s; font-size: 1.8rem; display: block; position: relative; font-weight: bold; font-style: italic;}
.pergunte a::before{ content: ""; transition: .5s; width: 0; z-index: 10; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; }
.pergunte a:hover::before{width: 100%; }
.pergunte a:hover span{ color: #7bb742; }

.alunos{ width: 100%; position: relative; height: auto; padding: 100px 0; background: url(../img/bg3.jpg) top center no-repeat; background-size: cover; }
.alunos .item{ background: #7bb742; overflow: hidden; border-radius: 20px; } 
.alunos .item img{ width: 100%; height: auto; margin-bottom: 20px; }
.alunos .item .text{ display: flex; justify-content: space-between; padding: 0 30px 40px 30px; flex-direction: column; color: #fff;  }
.alunos .item .text p{ font-weight: 500; font-style: italic; font-size: 1.1rem; margin-bottom: 20px;  }
.alunos .item .text .info h3{ font-weight: 600; font-style: italic; font-size: 1.4rem; margin-bottom: 7px;   }
.alunos .item .text .info span{ font-weight: 300; font-style: italic; font-size: 1.1rem;  }
.alunos .item.verde{ background: #7bb742; }
.alunos .item.azul-claro{ background: #00a8ad; }
.alunos .item.azul-escuro{ background: #02798d; }
.alunos .button-center{ padding-top: 60px; }
.alunos .button-center a{ position: relative; overflow: hidden; background: #019948; text-transform: uppercase; color: #fff; border-radius: 50px; font-size: 1.8rem;  font-weight: bold; font-style: italic; padding: 14px 40px; }
.alunos .button-center a span{ color: #fff; z-index: 20;  transition: .5s; font-size: 1.8rem; display: block; position: relative; font-weight: bold; font-style: italic;}
.alunos .button-center a::before{ content: ""; transition: .5s; width: 0; z-index: 10; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; }
.alunos .button-center a:hover::before{width: 100%; }
.alunos .button-center a:hover span{ color: #019948; }

.siga{ width: 100%; position: relative; height: auto; padding: 100px 0; background: url(../img/bg4.jpg) top center no-repeat; background-size: cover; }
.siga .title{ display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: 60px;  padding: 0 100px; }
.siga .title h2{ color: #fff; font-weight: bold; font-style: italic; font-size: 2.3rem; text-transform: uppercase; margin-bottom: 10px;  }
.siga .title p{ color: #fff; font-weight: 500; font-style: italic; font-size: 1.8rem; line-height: 120%; }
.siga .flex{ display: flex; justify-content: space-around; }
.siga .flex .sbi_photo_wrap{ overflow: hidden; border-radius: 20px; }
.siga .flex .item img{ width: 100%; height: auto; transition: .5s; }
.siga .flex .item:hover img{ transform: scale(1.050); }
.siga .flex .redes{ width: 40px; margin: 0 0 0 20px; display: flex; flex-wrap: wrap; flex-direction: column; height: auto; align-items: center; justify-content: center; }
.siga .flex .redes a{ margin: 0 0 16px 0; } 
.siga .flex .redes a img{ width: 40px; height: auto; }
.siga .flex .redes a:hover{ margin-left: -14px; }

.unidades{ width: 100%; position: relative; height: auto; padding: 100px 0; background: url(../img/bg5.jpg) top center no-repeat; background-size: cover; }
.unidades .slide { padding: 0 70px; position: relative; }
.unidades .item{ background: #fff; overflow: hidden; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } 
.unidades .item .text{ padding: 30px 30px 60px 30px; min-height: 190px; }
.unidades .item .text h3{ color: #02798d; font-weight: 500; font-style: italic; font-size: 1.4rem; line-height: 120%; margin-bottom: 7px; }
.unidades .item .text h4{ color: #019948; font-weight: 500; font-style: italic; font-size: 1.4rem; line-height: 120%; background: url(../img/maps.png) top left no-repeat; background-size: auto 100%; padding-left: 30px; }
.unidades .item .text .infos{ position: absolute; top: 20px; right: 20px; display: flex; }
.unidades .item .text .infos span{ background: #00a8ad;  border-radius: 50%; font-weight: 500; font-size: .9rem; text-transform: uppercase; width: 20px; height: 20px; line-height: 0; padding: 6px; display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 0 0 5px; }
.unidades .item .text .infos span.azul{ background: #00a8ad; }
.unidades .item .text .infos span.verde{ background: #7bb742; }
.unidades .item p{ font-size: 1.4rem; font-weight: 300; font-style: italic; color: #585858; margin-top: 10px; }
.unidades .item .image{ position: relative; }
.unidades .item .image span{ transition: .5s; position: absolute; top: -20px; left: 50%; z-index: 20; transform: translateX(-50%); overflow: hidden; background: #00a8ad; text-transform: uppercase; color: #fff; border-radius: 50px; font-size: 1.2rem;  font-weight: 500; font-style: italic; padding: 10px 40px; }
.unidades .item .image img{ transition: .5s; width: 100%; height: auto; z-index: 10; }
.unidades .item:hover .image span{  background: #7bb742; }
.unidades .item:hover .image img{  transform: scale(1.050); }
.unidades .swiper-button-next:after{ color: #00a8ad; } 
.unidades .swiper-button-prev:after{ color: #00a8ad; } 

.rodape{ background: #1d3585; position: relative; width: 100%; padding: 60px 0; }
.rodape .container{ display: flex; align-items: baseline; justify-content: space-between; }
.rodape .infos{ display: flex; align-items: center; }
.rodape .infos img{ width: 170px; height: auto; }
.rodape .infos ul{ margin: 0 0 0 70px; }
.rodape .infos ul li{ margin: 0 0 14px 0; }
.rodape .infos ul li a{ text-transform: uppercase; font-size: 1rem; color: #fff; font-style: italic; }
.rodape .infos ul li a:hover{ color: #66ba46; }
.rodape .redes{  display: flex; height: auto; align-items: center;  }
.rodape .redes a{ margin: 0 0 0 16px; } 
.rodape .redes a img{ width: 40px; height: auto; }
.rodape .redes a:hover{ margin-top: -14px; }


/* pages */

/* 404 */
body.error404 { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100dvh; }
body.error404 > * { min-width: 0; }
body.error404 .page404 { padding: 12rem 0 1.25rem; display: flex; justify-content: center; align-items: center; }
body.error404 .block404 { width: min(40rem, 90%); }
body.error404 .block404 > * ~ * { margin-top: 0.5rem; }
body.error404 .page404 h1 { font-size: 3rem; font-weight: 700; color: #1d3585; }
body.error404 .page404 h2 { font-size: 1.75rem; font-weight: 700; color: #018144; }
body.error404 .page404 a{ display: inline-block; border: #d36905 solid 2px; position: relative; overflow: hidden; background: #d36905; text-transform: uppercase; color: #fff; border-radius: 50px; font-size: 1.125rem;  font-weight: bold; font-style: italic; padding: 1rem 1.5rem; margin-top: 1rem; }
body.error404 .page404 a span{ color: #fff; z-index: 20;  transition: .5s; font-size: 1.125rem; display: block; position: relative; font-weight: bold; font-style: italic;}
body.error404 .page404 a::before{ content: ""; transition: .5s; width: 0; z-index: 10; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; }
body.error404 .page404 a:hover::before{width: 100%; }
body.error404 .page404 a:hover span{ color: #d36905; }


/* modal */

.modal-form, .modal-overlay{ background:rgba(0,0,0,.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:999999; display:none; }
.modal-overlay.show { display: block; animation: fadein 250ms forwards; }
.modal, .modal-form .aviso{background:#fff; border-radius: 1.25rem; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.modal-form .aviso{ text-align:center; width:420px; border:#018144 solid 0.375rem; padding: 2.5rem 1.875rem; }
.modal-form .aviso h3{ color:#02798d; font-size:32px; font-weight:bold; margin-bottom:16px;  font-style:italic; }
.modal-form .aviso p{ color:#535353; font-size:20px; font-weight: 300; font-style:italic; }

.modal .aviso h3{ color:#02798d; font-size:32px; font-weight:bold; margin-bottom:16px;  font-style:italic; }
.modal .aviso p{ color:#535353; font-size:20px; font-weight: 300; font-style:italic; }

.modal-close { appearance: none; position: absolute; color: #777; background-color: transparent; right: 1rem; top: 0.5rem; height: 2rem; width: 2rem; display: grid; place-items: center; padding: 0; }
.modal-close > svg{ height: 1.75rem; width: 1.75rem; pointer-events: none; }
.with-header .modal-close { color: #fff; top: 1.5rem; }
.modal { width: fit-content; max-width: min(64rem, 90%); }
.modal-header { padding: 1.5rem 2rem; padding-right: 4rem; background-color: #018144; color: #fff; border-radius: 1.25rem 1.25rem 0 0; font-size: 2rem; font-weight: 700; height: 5rem; display: flex; align-items: center; box-sizing: border-box; }
.modal-content { padding: 3rem 2rem 2.5rem; }
#pre-matricula-modal .modal {
    width: min(40rem, 90%);
}
#pre-matricula-modal .modal-content > * ~ * {
    margin-top: 1.5rem;
}

.fadeout { animation: fadeout 250ms forwards; }
.fadeout\! { animation: fadeout 250ms forwards !important; }

.overflow-hidden\!{ overflow: hidden; }


/* Responsivos */
/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1450.98px) { 
    .container{ width: 1200px; } 
}

/* Large devices (desktops, less than 1200px) */
 @media (max-width: 1199.98px) {
    .container{ width: 90%; }
    .banner-image{ margin-top: 60px; }
    .formulario .flex{ flex-direction: column; }
    .formulario .flex .text {  width: 100%; margin: 0 0 30px 0; }
    .formulario .flex .text .section-title{ text-align: center; }
    .formulario .flex .text p{ text-align: center; }
    .formulario .box-form{ width: 80%; }
    .rodape .infos ul{ margin: 0 0 0 40px; }

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    .section-title { font-size: 1.8rem;}
    .banner-image{ margin-top: 80px; }
    .estrutura{ padding: 50px 0; }
    .estrutura .title{ margin-bottom: 20px; padding: 0; }
    .estrutura .title h2{ font-size: 1.8rem; }
    .estrutura .title p{ font-size: 1.2rem; }
    .estrutura .slide .item h3{ font-size: .8rem; }
    .agende{ padding: 50px 0; }
    .agende a{ padding: 10px 30px; }
    .agende a span{ font-size: 1rem; }
    .video{ padding: 50px 0; }
    .video .player a::before{ width: 80px; height: 80px; background-size: 80px; }
    .estudar{ padding: 50px 0; }
    .estudar .title{ margin-bottom: 20px; padding: 0; }
    .estudar .title h2{ font-size: 1.8rem; }
    .estudar .slide{padding: 0; margin-bottom: 30px; }
    .estudar .button-center a{ padding: 10px 30px; }
    .estudar .button-center a span{ font-size: 1rem; }
    .estudar .slide .item{ flex-direction: column; padding: 20px; }
    .estudar .slide .item img{ width: 100%; }
    .estudar .slide .item .text{ width: 100%; margin:0; padding: 30px; }
    .formulario{ padding: 50px 0; }
    .formulario .box-form{ width: 100%; }
    .pergunte h2{ font-size: 1.8rem; margin-bottom: 12px; }
    .pergunte a{ padding: 10px 30px; }
    .pergunte a span{ font-size: 1rem; }
    .alunos{ padding: 50px 0; }
    .alunos .button-center{ padding-top: 30px; }
    .alunos .button-center a{ padding: 10px 30px; }
    .alunos .button-center a span{ font-size: 1rem; }
    .siga{ padding: 50px 0; }
    .siga .title{ margin-bottom: 20px; padding: 0; }
    .siga .title h2{ font-size: 1.8rem; }
    .siga .title p{ font-size: 1.2rem; }
    .siga .flex{ flex-wrap: wrap; }
    .siga .flex .item{ margin: 10px; }
    .siga .flex .redes{ width: 100%; margin-top: 20px; flex-direction: row; }
    .siga .flex .redes a{ margin: 0 10px; }
    .unidades{ padding: 50px 0; }
    .rodape .container{ flex-wrap: wrap; justify-content: center; align-items: center; }
    .rodape .redes{ margin: 30px 0 0 0; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
    .topo{ padding: 20px 0; }
    .topo .marca, .topo.on-scroll .marca{ width: 6.25rem; }
    .topo .link a{ padding: 10px 30px; }
    .topo .link a span{ font-size: 1rem;  }
    .banner-image{ margin-top: 30px; }
    .video .player{ padding: 0; }
    .form-control .w30{ grid-column: span 10; }
    .form-control .w70{ grid-column: span 10; }
    .form-control .w50{ grid-column: span 10;  }
    .form-control .flex-concordo{ flex-direction: column; }
    .unidades .slide{ padding: 0 50px; }
    .rodape{ padding: 40px 0; }
    .rodape .infos{ flex-direction: column; width: 100%; }
    .rodape .infos img{ width: 100px; }
    .rodape .infos ul{ margin: 30px 0 0 0; }
    .rodape .infos ul li a{ text-align: center; display: block; }
    .rodape .redes{ margin: 20px 0 0 0; }
    .banner .swiper-button-next{ right: 10px; }
    .banner .swiper-button-prev{ left: 10px; }

    body.error404 .page404 { padding: 7.5rem 0 1.25rem; }
    body.error404 .page404 a { padding: 0.625rem 1.25rem; text-align: center;}
    body.error404 .page404 a span { font-size: 1rem; }

}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    .banner-image{ margin-top: 60px; }
    .estrutura .slide{ padding: 0 50px; }
	.modal-form .aviso{ width:70%; }

    body.error404 .page404 h1 {
        font-size: 2rem;
    }
    body.error404 .page404 h2 {
        font-size: 1.25rem;
    }

    .formulario .flex { padding: 0 1.75rem; }

}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}