body{margin: 0; padding: 0; height: 100%; font-family: 'Archivo Narrow', sans-serif;  font-size: 16px; }
html{height: 100%;}
*{box-sizing: border-box;}
a {text-decoration: none; color: inherit; -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
.menu li a:hover, .blocos-servicos:before, .blocos-servicos:hover:before { -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms; }
h1, h2, h3 {font-weight: normal; }

#banner { width: 100%; position: absolute; top: 100px; overflow: hidden; }
.fotos { background-size: cover; width: 100%; background-position: center; min-height: 500px; }
.container { width: 98%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 999; }
.flex { display: flex; }
.margem { padding: 50px 0; }
.wrap{flex-wrap: wrap;}
.space { justify-content: space-between; }
.vert{align-items: center;}

#topo {position: relative; z-index: 1000;}
#faixav { background: #b3b3b3; max-width: 350px; min-width: 290px; display: flex; justify-content: center; align-content: center; min-height: 700px; flex-wrap: wrap; }
.logo { width: 100%; }
.logo img {width: 100%; max-width: 310px; height: auto; display: block; margin: 0 auto;}
.mainmenu { width: 100%; margin: 30px 0; }
.menu { color: #fff; width: 100%; list-style: none; margin: 0; padding: 0; }
.menu li {text-align: center; padding: 5px 0; } 
.menu li a { font-size: 25px; text-transform: uppercase; font-family: 'Open Sans Condensed', sans-serif; padding: 3px; border-bottom: solid 1px rgba(255, 255, 255, .1) !important; border: solid 1px rgba(255, 255, 255, .0); display: inline-block; }
.menu li a:hover { border: solid 1px rgba(255, 255, 255, .3) !important; }

.control-nav{display: none;}
.control-nav-close{display: none;}

.redes { display: flex; }
.redes .fa { color: #252A6C; margin: 0 5px; width: 40px; line-height: 40px; background: rgba(255, 255, 255, .7); text-align: center; }
.redes .fa:hover { background: rgba(255, 255, 255, 1); }

/*#welcome { font-family: 'Dancing Script', cursive; font-size: 50px; color: #fff; background: #314396; margin: 0; align-self: flex-end; padding: 40px;}*/
#msys { font-family: 'Dancing Script', cursive; font-size: 30px; color: #fff; background: #314396; margin: 0; align-self: flex-end; padding: 30px; }
#msys h2 { margin:0; }
#msys input { margin-right: 3px; margin-bottom: 5px; border: 0; padding: 10px 5px; outline:none;}
#msys button { border: 0; padding: 10px; background: rgba(255, 255, 255, .3); color: #fff; }
#msys button:nth-child(2) { margin: 0 5px; }

.titulo-inicial{ color: rgb(100, 100, 100); text-transform: uppercase; font-size: 36px; font-family: 'Open Sans Condensed', sans-serif; }
.titulo-inicial small{ display: block; font-weight: 200; font-size: 24px; }
.titulo-inicial:after{ content: ''; display: block; height: 1px; width: 190px; background: #252A6C; margin-top: 10px; }

.inicial{ flex: 1 450px; }
.inicial p{ width: 100%; color: rgb(100, 100, 100); text-align: justify; }

.textos h1 {color: rgb(100, 100, 100); text-transform: uppercase; font-size: 36px; font-family: 'Open Sans Condensed', sans-serif;}
.textos h2 {color: rgb(100, 100, 100); text-transform: uppercase; font-size: 24px; font-family: 'Open Sans Condensed', sans-serif;}
.textos li {color: rgb(100, 100, 100); text-align: justify;}
.textos p {color: rgb(100, 100, 100); text-align: justify;}

.servicos { width: 100%; }
.blocos {flex: 1; justify-content: flex-end; }
.blocos:not(:last-child) { text-align: right; }
.blocos h2 { width: 100%; color: #fff; font-size: 70px; font-family: 'Dancing Script', cursive; margin-right: 50px; }
.blocos a { color: #fff; border: 1px solid rgba(255, 255, 255, 1); display: inline-block; padding: 30px; align-self: flex-end; margin: 50px; }
.blocos a:hover { border: 1px solid rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 1); color: rgb(100, 100, 100); }
.blocos-servicos { width: 50%; min-height: 300px; position: relative; background-size: cover; text-align: center; }
.blocos-servicos:before { content: ""; position: absolute; width: 100%; top: 0; left: 0; height: 100%; background: rgba(50, 50, 50, .4); z-index: 1; }
.blocos-servicos:hover:before { background: rgba(50, 50, 50, .2); }
.blocos-servicos h2 { font-size: 40px; padding-top: 10px; position: relative; z-index: 10; }
.blocos-servicos p { color: #fff; padding: 0 20px; position: relative; z-index: 10; }

.titulo-sistemas { color: rgb(100, 100, 100); text-transform: uppercase; font-size: 36px; margin: 0; font-family: 'Open Sans Condensed', sans-serif; text-align: center; }
.titulo-sistemas small { display: block; font-weight: 200; font-size: 24px; }
.programacao-container { flex: 1; }
.programacao {border: 1px solid rgba(100, 100, 100, .5); padding: 40px; margin: 5px; }
.programacao h2 { color: rgb(100, 100, 100); text-transform: uppercase; font-size: 22px; margin: 0; font-family: 'Open Sans Condensed', sans-serif; }
.programacao p { color: rgb(100, 100, 100); font-size: 18px; margin: 0; font-family: 'Open Sans Condensed', sans-serif; }
.icone-programacao { margin: 5px 10px 0 0; background: #314396; color: #fff; width: 60px; line-height: 60px; text-align: center; border-radius: 50%; align-self: flex-start; }
.programacao:hover {border: 1px solid rgba(100, 100, 100, 0); background: #314396;}
.programacao:hover h2 {color: #fff;}
.programacao:hover p {color: #fff;}
.programacao:hover .icone-programacao {color: #314396; background: #fff;}

.noticias{padding: 45px 0; background: #252A6C; position: relative; z-index: 999;}
.noticias .titulo-inicial{color: rgb(255, 255, 255); margin: 0 !important; flex: 1 450px; }
.noticias .titulo-inicial:after{background: rgb(255, 255, 255);}
.noticias_slide{flex: 2 450px; overflow: hidden;}
.noticias_slide h3{color: rgb(255, 255, 255); font-size: 24px; }
.noticias_slide p{color: rgb(255, 255, 255);}
.owl-buttons{position: absolute; top: -5px; right: 0;}
.owl-theme .owl-controls .owl-buttons div{width: 20px; line-height: 20px; padding: 0; text-align: center; border: 1px solid rgb(255, 255, 255); opacity: 1; background: none ; border-radius: 0 ;}
.owl-theme .owl-controls .owl-buttons div:hover{background: rgba(255, 255, 255, .3);}

.fd-links {width: 100%; background: url(imagens/links.jpg) center; background-size: cover; padding: 50px 0;}
.fd-links .titulo-sistemas {color: #fff;}
.box-consultas{flex: 1 300px; margin: 20px 10px; position: relative; padding: 10px; border: 1px solid transparent;}
.box-consultas h3{color: #fff; font-family: 'Open Sans Condensed', sans-serif; font-size: 24px; text-transform: uppercase; margin: 0;}
.box-consultas p{color: #fff; font-family: 'Open Sans Condensed', sans-serif; margin: 0;}
.box-consultas:hover {border: 1px solid rgba(255, 255, 255, 1); background: rgba(255, 255, 255, .08);}

.obrigado {width: 100%; color:rgb(255, 255, 255); background: #314396; text-align: center; font-size: 50px; font-family: 'Dancing Script', cursive;}

.contato {width: 100%; background: #252A6C; }
.bloco-contato {flex: 1; padding: 50px;}
.bloco-contato p {color: #fff; font-family: 'Open Sans Condensed', sans-serif; font-size: 16px; text-align: center;}
.bloco-contato h2 {color: #fff; font-family: 'Open Sans Condensed', sans-serif; font-size: 50px; text-align: center;}
.bloco-contato a {color: #fff; font-family: 'Open Sans Condensed', sans-serif; font-size: 16px; text-align: center; display: block;}
.branco::-webkit-input-placeholder{color: rgb(255, 255, 255);}
#formcontato input[name='palavra'] {margin: 0; border: none; background: #252A6C; margin-top: 10px;}



@media screen and (max-width:800px){
    .blocos {flex: 1 100%;} 
    .blocos:last-child {display: none;}
    #msys {display: flex; flex-wrap: wrap; }
    #msys input {width: 100%;}
    #msys div {flex: 1; margin-top: -5px;}
}

@media screen and (max-width:650px){
    .inicial{ flex: 1 100%; }
    #msys input {width: 100%;}
    #msys div {margin-top: 5px;}
    .programacao { flex:1 100%;}
    .box-consultas { flex: 1 200px; }
    .bloco-contato{ flex: 1 100%;}
    .prog-container {flex-wrap: wrap;}
}

@media screen and (max-width:480px){
    .logo img {width: 100%;}
    #banner { top: 0; }
    #topo {flex-wrap: wrap;}
    #faixav {max-width: 100%; min-height: 0; align-self: flex-start; padding: 20px 10px; margin: 5px 0;}
    .mainmenu{width: 100%; height: 100%; position: fixed; z-index: 9999; top: -30px; right: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .9); -webkit-transform: translate(100%, 0); transform: translate(100%, 0);  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    .menu{width: 50%; height: 60%; flex-direction: column; position: relative; z-index: 10000;}
    .menu li a{text-transform: uppercase; background: none;}
    
    .control-nav {display: block; cursor: pointer; color: rgb(255, 255, 255); margin-bottom: 0 !important; position: absolute; right: 20px; top: 20px;}
    .control-nav-close {width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; color: rgb(255, 255, 255); opacity: 0; -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    #control-nav:checked ~ .control-nav{-webkit-transform: translate(0, 0); transform: translate(0, 0);}
    #control-nav:checked ~ .mainmenu .control-nav-close{opacity: 1; z-index: 999; display: block;}
    #control-nav:checked ~ .mainmenu{-webkit-transform: translate(0, 0); transform: translate(0, 0);}
    
    .redes {align-self: center;}
    .fotos {min-height: 600px;}
    .box-consultas {flex: 1 100%; text-align: center;}
    .bloco-contato {padding: 25px;}
}