@charset "utf-8";

/* SVG */
:root{ --color-white:#fff;--color-black:#000;--color-quaternary:#075ebd;--color-tertiary:#142850;--color-primary:#3689e2;--color-success:#208436;--color-secondary:#6c757d;--color-primary-2:#007bff;--color-warning:#ffc107}.svg-12{width:.75rem;height:.75rem}.svg-14{width:.875rem;height:.875rem}.svg-16{width:1rem;height:1rem}.svg-18{width:1.125rem;height:1.125rem}.svg-20{width:1.25rem;height:1.25rem}.svg-24{width:1.5rem;height:1.5rem}.svg-28{width:1.75rem;height:1.75rem}.svg-32{width:2rem;height:2rem}.svg-36{width:2.25rem;height:2.25rem}.svg-40{width:2.5rem;height:2.5rem}.svg-44{width:2.75rem;height:2.75rem}.svg-48{width:3rem;height:3rem}.svg-52{width:3.25rem;height:3.25rem}.svg-fill-black{fill:var(--color-black)}.svg-fill-white{fill:var(--color-white)}.svg-fill-primary{fill:var(--color-primary)}.svg-fill-primary-2{fill:var(--color-primary-2)}.svg-fill-quaternary{fill:var(--color-quaternary)}.svg-fill-tertiary{fill:var(--color-tertiary)}.svg-fill-success{fill:var(--color-success)}.svg-fill-secondary{fill:var(--color-secondary)}.svg-fill-warning{fill:var(--color-warning)}

/* HOTSITE */
body {font-family: 'Roboto', Verdana, Arial, sans-serif; padding-top: 1rem}
html {scroll-behavior: smooth;}
.bg-warning{background:#FFF100!important;}
.bg-tertiary {background: #2a5893;}
.btn-dark {background: #163b6a;}
.btn-dark:hover {background: #0c2c55;}

header .navbar-toggler {background-color:#4770a5}
.banner-cover {background-size: 100%;background-repeat: no-repeat;background-position: top;background-position: center center;}
@media (min-width: 992px) {.banner-cover > .container > .row {  height: calc(100vh);}}
@media (max-width: 991px) {.banner-cover > .container > .row {  min-height: 200px!important;}}

#sobre::before,
#como::before,
#orientacoes::before,
#edital::before,
#manual::before,
#portaria::before {
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden;
}

/* Efeito com cor e opacidade nas fotos bg do jumbotron */
.overlay-dark {position: relative;}
.overlay-dark:before { position: absolute;  content: "";  left: 0;  bottom: 0;  right: 0;  top: 0; background: rgba(20, 75, 147, 0.9);}


/*CAROUSEL*/
.carousel-indicators li {    box-sizing: content-box;-ms-flex: 0 1 auto;flex: 0 1 auto;width: 15px;height: 15px;margin-right: 5px;margin-left: 5px;text-indent: -999px;cursor: pointer;background-color: #fc0;background-clip: padding-box;border-top: none!important;border-bottom:  none!important;border-radius: 30px!important;opacity: .2;transition: opacity .6s ease;}
.carousel-indicators li.active {width: 17px; height: 17px;}