@font-face {
    font-family: 'roboto_condensedbold';
    src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
         url('../fonts/robotocondensed-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_condensedlight';
    src: url('../fonts/robotocondensed-light-webfont.woff2') format('woff2'),
         url('../fonts/robotocondensed-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../fonts/robotocondensed-regular-webfont.woff2') format('woff2'),
         url('../fonts/robotocondensed-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html, body{
    font-family: 'roboto_condensedregular';
    margin: 0px;
    font-size: 12px;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.row{
    width: 100%;
    display: flex;
}

#top-bar{
    background-color: #17387a;
    width: 100%;
    height: 55px;
}

#top-bar .wrapper {
    display: flex;
    justify-content: space-between;
}
#top-bar .social{display: flex;}
#top-bar .social a{
    padding: 10px;
    display: block;
}
#top-bar .social img{
    height: 30px;
}

#top-bar .phone{display: flex;}
#top-bar .phone img{
    height: 30px;
    margin-right: 5px;
}
#top-bar .phone a{
    padding: 10px;
    display: block;
    color: #fff;text-decoration: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#menu .wrapper {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
}
#menu .logo img{
    height: 80px;
}

.padrao-texto{
    font-size: 14px;
}

.menu {
    list-style: none;
    float: left;
    margin: 0px;
    padding: 0px 0px 0px 4%;
}

.menu li{position:relative; display: inline-block;      text-align: center;margin: 0px 30px;} 
.menu li.active{border-bottom: 3px solid #001359;}

.menu li a{ font-size: 16px;color:#001359; text-decoration:none; padding:20px 0px; display:block;}

.menu li ul{position:absolute; z-index: 99; padding: 0px; top:60px; left:0px; background-color:#17387a; display:none; }
.menu li ul li a{padding: 10px; color: #fff; font-size: 14px; text-align: center;}

.menu li:hover ul, .menu li.over ul{display:block;}

.menu li ul li{border:1px solid #000000; display:block;     margin: 0; min-width:230px; text-align: left;}

.banner .info{
    position: absolute;
    bottom: 20px;
    background-color: rgb(23 56 122 / 70%);
    border-radius: 10px;
    padding: 5px 20px;
}
.banner .item{
    height: 450px;
    background-position: center;
    background-size: cover;
}

.banner a{
    text-decoration: none;
    color: #fff;
}

.banner h3{
    text-decoration: none;
    margin: 0;
    text-transform: uppercase;
    font-size: 14px;
}
.banner h2{
    text-decoration: none;
    margin: 0;
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 5px;
}
.banner .owl-dots{
    margin-top: -45px!important;
    position: relative;
}

.banner .owl-theme .owl-dots .owl-dot span{
    background-color: #b2b3b7;
}
.banner .owl-theme .owl-dots .owl-dot.active span{
    background-color: #00247d;
}

.categorias{

    padding-top: 30px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px;
display: grid;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}
.categorias .item{
    display: inline-block;
    margin: 20px;
    padding: 20px;
    border:2px solid #00247d;
    border-radius: 20px;
    position: relative;
    min-height: 380px;
}
a{
    text-decoration: none;
}
.categorias h2{
    color: #4d4d4d;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 20px;
}

.categorias p{
    color: #999999;
    font-size: 16px;
    margin: 30px 5px;
    min-height: 40px;
}

.categorias .item img{
    max-width: 100%;
}

.categorias button{
    color: #fff;
    font-size: 16px;
    background-color: #17387a;
    border: 0px;
    bottom: -1px;
    padding: 10px;
    left: 50%;
    margin-left: -50px;
    position: absolute;
}

footer{
    background: rgb(20,37,84);
    background: linear-gradient(90deg, rgba(20,37,84,1) 0%, rgba(23,56,122,1) 63%);
}

footer.copyright{
    border-top: 1px solid #8a97b3;
}

footer.copyright p{
    font-size: 12px;
    padding: 10px 20px;
}

footer .container{
    display: flex;
}
footer h2{
    color: #FFFFFF;
    font-size: 14px;
}
footer p{
    color: #FFFFFF;
    font-size: 12px;
}
footer ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
footer ul li{
    margin-top: 10px;
}
footer a{
    color: #FFFFFF;
}

footer .description{
    width: 50%;
    display: inline-block;
    padding: 20px 20px;
    text-align: justify;
}

footer .menu-footer{
    width: 20%;
    display: inline-block;
    border-left: 1px solid #8a97b3;
    padding: 20px 20px;
}

footer .contato-footer{
    width: 30%;
    display: inline-block;
    border-left: 1px solid #8a97b3;
    padding: 20px 20px;
}

.bg-menu{
    background-image: url(../images/fundo_titulos.png);
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px 20px;
}
.bg-menu .container{
    display: flex;
    justify-content: space-around;
}
.bg-menu .produto-titulo{
    color: #000000;
    font-size: 16px;
}

.bg-menu h2{
    color: #FFFFFF;
    margin: 0px;
    margin-top: 35px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
}
#institucional {
    padding: 20px 0px;
}
#institucional p {
    padding: 10px 20px;
    text-align: justify;
font-size: 16px;
}
#institucional h2{
    text-align: center;
    position: relative;
}
#institucional h2:after{
    content: ' ';
    width: 40%;
    height: 1px;
    background-color: #7f7f7f;
    position: absolute;
    bottom: -5px;
    left: 40%;
    margin-left: -10%;
}
.linha{
    width: 100%;
    height: 1px;
    background-color: #7f7f7f;
}
#institucional .container{
    display: flex;
}
#institucional .tipo{
    margin-top: 20px;
    display: inline-block;
    flex-grow: 1;
}
#produtos{
    margin-top: 20px;
    margin-bottom: 20px;
}
#produtos .container{
    display: flex;
	
}
#produtos .produtos{
    width: calc(25% - 20px);
    padding: 10px;
    display: inline-block;
}

    #produtos .descricao {
        width: calc(30% - 40px);
        padding: 0px 20px;
        border-left: 1px solid #c2c8d4;
        border-right: 1px solid #c2c8d4;
        display: inline-block;
    }

#produtos .solicitar-orcamento{
    background-color: #17387a;
    border:1px solid #000;
    color: #FFF;
    padding: 10px;
    margin-top: 20px;
    display: block;
    display: table;
}
img{
    max-width: 100%;
}
#produtos .descricao p{
    margin: 0;
    padding: 0;
   
}

#produtos .imagens{
    width: 45%;
    display: inline-block;
}
#produtos .imagens div{
    width: calc(50% - 22px);
    padding: 10px;
    display: inline-block;
}

#produtos .produtos ul{
    border:1px solid #000;
    border-top: 0;
    padding: 0px;
    margin: 0;
    list-style: none;
}

#produtos .produtos ul li{
    border-top: 1px solid #000;
    background-color: #17387a;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}

#produtos .produtos .container{
    display: flex;
}

.image-produto{
    height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#contato{
    margin-top: 20px;
    margin-bottom: 20px;
}
#contato .container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

#contato .form{
    width: calc(50% - 20px);
    display: inline-block;
    padding: 20px;
}

#contato .mapa{
    width: calc(50% - 20px);
    display: inline-block;
    padding: 20px;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.input {
  position: relative;
  width: 100%;
  height: 65px;
  display: inline-block;
}

.message {
  width: calc(100% - 2em);
  height: 200px;
}

textarea {
  border: none;
  resize: none;
}

.input__field {
  position: absolute;
  margin: 0.8em 0;
  padding: 0.4em;
  width: 100%;
  height: calc(100% - 1.6em);
  border: none;
  border-radius: 0;
  background: transparent;
  color: #001359;
  font-size: 1.55em;
  font-weight: bold;
  -webkit-appearance: none;/* for box shadows to show on iOS */
}

.input__field:focus {
  outline: none;
}

.input__label {
  position: absolute;
  padding: 0 1em;
  margin: 1.2em 0;
  width: 100%;
  height: calc(100% - 2.4em);
  color: #7f7f7f;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  font-size: 12px;
}

.input__label:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #7f7f7f;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.input__label::before {
  top: 0;
}

.input__label::after {
  bottom: 0;
}

.input__field:focus + .input__label .input__label-content,
.input--filled .input__label-content {
  -webkit-transform: translate3d(0, -90%, 0);
  transform: translate3d(0, -70%, 0);
  font-size: 10px;
}

.input__field:focus + .input__label::before,
.input--filled .input__label::before {
  -webkit-transform: translate3d(0, -0.5em, 0);
  transform: translate3d(0, -0.5em, 0);
}

.input__field:focus + .input__label::after,
.input--filled .input__label::after {
  -webkit-transform: translate3d(0, 0.5em, 0);
  transform: translate3d(0, 0.5em, 0);
}

#send-button {
  width: 200px;
  height: 60px;
  background-color: #7f7f7f;
  color: #FFF;
  border: 0;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

#send-button:hover,
#send-button:focus {
  outline: 0;
  background-color: #001359;
  color: #FFF;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.error{
    position: absolute;
    font-size: 12px;
    bottom: -5px;
    color: #fa5661;
}