/** OPS EMPRESAS AGOSTO 2020 **/

/* 1. Sobre Nós
=----------------*/
#sobrenos {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative;}
#sobrenos .box h1 {font-size: 30px; line-height: 35px; font-weight: bold; color: #03394a;}
#sobrenos .box p {font-size: 16px; line-height: 21px; margin: 15px auto; color: #03394a;} 

/* 2. Produtos
=----------------*/
#produtos {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative; background: #EEE;}
#produtos h1 {max-width: 100%; width: 100%; height: auto; margin: 0px auto 10px; text-align: center; font-size: 30px; line-height: 35px; font-weight: bold; color: #03394a;}
#produtos p {max-width: 100%; width: 100%; height: auto; text-align: center; margin: 0px auto 30px; color: #03394a;}
#produtos .box {max-width: 100%; width: 100%; height: auto; margin: 10px auto; text-align: center; transition: .7s;}
#produtos .box:hover {transform: translateY(-10px);}
#produtos .box img {border-radius: 100%; height: 240px; object-fit: contain; max-width: 250px; width: 100%; margin-bottom: 15px; box-shadow: 0px 0px 5px #696969; background: #fff;}
#produtos .box h2 {font-size: 20px; line-height: 25px; font-weight: bold; color: #03394a;}
#produtos .box .botao {margin: 20px auto 0;}
#produtos .box .botao a {background: #3295b5; color: #fff; font-size: 16px; line-height: 21px; font-weight: 400; padding: 10px 30px; border-radius: 5px;}
#produtos .box .botao a:hover {background: #1f9bc3;}

#produtos .btn {background: #3295b5; color: #fff; font-size: 16px; line-height: 21px; font-weight: 400; padding: 10px 30px; border-radius: 5px;}
#produtos .btn a {color: #FFF}
/* 3. Serviços
=----------------*/
#logistica {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative; background: #3295B5;}
#logistica .row {max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0;}
#logistica img {max-width: 100%; width: 100%; height: auto; max-height: 400px; object-fit: cover;}
#logistica h2 {font-size: 20px; line-height: 25px; font-weight: bold; text-transform: uppercase; color: #FFF;}
#logistica p {font-size: 16px; line-height: 21px; font-weight: normal; margin: 20px auto; color: #FFF;}

#despachante {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative; background: #EEE;}
#despachante .row {max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0;}
#despachante img {max-width: 100%; width: 100%; height: auto; max-height: 400px; object-fit: cover;}
#despachante h2 {font-size: 20px; line-height: 25px; font-weight: bold; text-transform: uppercase; color: #03394A;}
#despachante p {font-size: 16px; line-height: 21px; font-weight: normal; margin: 20px auto; color: #03394A;}

#liberacao {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative; background: #3295B5;}
#liberacao .row {max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0;}
#liberacao img {max-width: 100%; width: 100%; height: auto; max-height: 400px; object-fit: cover;}
#liberacao h2 {font-size: 20px; line-height: 25px; font-weight: bold; text-transform: uppercase; color: #FFF;}
#liberacao p {font-size: 16px; line-height: 21px; font-weight: normal; margin: 20px auto; color: #FFF}

/* 4. Contato
=----------------*/
#contato {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative; z-index: 0;}
#contato h1 {max-width: 100%; width: 100%; height: auto; margin: 0px auto 20px; text-align: center; font-size: 30px; line-height: 35px; font-weight: bold; color: #03394a;}
#contato form {text-align: center;}
#contato form input {margin: 10px 0; border-radius: 5px; box-shadow: 2px 2px 5px #ddd;}
#contato form textarea {margin: 10px 0; border-radius: 5px; box-shadow: 2px 2px 5px #ddd;}
#contato form button {background: #3295b5; color: #fff; font-size: 16px; line-height: 21px; font-weight: 500; padding: 10px 30px; border-radius: 5px; border: none; text-transform: uppercase;}
#contato form button:hover {background: #1f9bc3;}
#contato .box {text-align: center; margin: 10px auto 0;}
#contato .box h3 {margin-bottom: 20px; color: #03394a;}
#contato .box p {font-size: 16px; line-height: 21px; font-weight: normal; color: #03394a;}
#contato .box a {font-weight: bold; color: #3295b5;}
#contato .box i {font-size: 20px;}

/* 5. Categoria
=----------------*/
#categoria h2 {font-size: 25px; line-height: 30px; font-weight: 400; color: #03394a;}
#categoria .w-100 p {font-size: 11px; line-height: 16px; color: #03394a;}
#categoria .w-100 a {color: #3295b5; font-weight: bold;}
#categoria .w-100 a:hover {text-decoration: underline;}
#categoria .box {width: 100%; height: 290px; box-shadow: 0px 0px 5px #bbb; transition: .7s; border-radius: 5px;}
#categoria .box:hover {transform: translateY(-10px);}
#categoria .box img {width: 100%; height: 115px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
#categoria .box .text {height: 120px; padding: 10px; text-align: center;}
#categoria .box .text h3 {font-size: 18px; line-height: 23px; font-weight: 400; text-align: center; margin: 10px auto 0; padding: 0 10px; color: #03394a;}
#categoria .box .text p {font-size: 18px; line-height: 25px; text-align: center; padding: 0 10px; margin: 5px auto; color: #03394a;}
#categoria .box .text p span {font-size: 13px; line-height: 18px;}
#categoria .box .footer {text-align: center;}


/* 6. Produto
=----------------*/
#produto {max-width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative;}
#produto #info {border-bottom: 1px dashed #ddd; padding-bottom: 30px;}
#produto h1 {font-size: 25px; line-height: 30px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px dashed #ddd; color: #03394a;}
#produto .botao {margin: 30px auto 20px;}
#produto .botao a {background: #3295b5; color: #fff; font-size: 16px; line-height: 21px; font-weight: bold; padding: 7px 25px; border-radius: 5px; border: none; text-transform: uppercase;}
#produto .botao a:hover {background: #1f9bc3;}
#produto img {max-width: 100%; width: 100%; height: 300px; max-height: 250px; object-fit: contain; box-shadow: 0px 0px 5px #bbb; border-radius: 5px;}
#produto .preco {font-size: 20px; line-height: 25px;}
#produto .preco span {font-size: 13px; line-height: 15px;}
#produto .sociais a {font-size: 25px; line-height: 30px; color: #3295b5; margin: 0 1px;}
#produto .sociais a:hover {color: #1f9bc3;}
#produto .box {margin: 10px auto;}
#produto .box .manual {max-width: 100%; width: 100%; height: auto; margin: 30px auto 0; text-align: center;}
#produto .box .manual a {background: #3295b5; color: #fff; font-size: 16px; line-height: 21px; font-weight: bold; padding: 7px 25px; border-radius: 5px; border: none; text-transform: uppercase;}
#produto .box .manual a:hover {background: #1f9bc3;}

#produto #descricao {max-width: 100%; width: 100%; height: auto; border-bottom: 1px dashed #ddd; padding: 30px 0;}
#produto #descricao h2 {font-size: 20px; line-height: 25px; font-weight: bold; color: #03394a;}
#produto #descricao p {font-size: 16px; line-height: 21px; margin: 15px 0; text-align: justify; color: #03394a;}

#produto #maisfotos {max-width: 100%; width: 100%; height: auto; padding-top: 30px;}
#produto #maisfotos h2 {font-size: 20px; line-height: 25px; font-weight: bold; color: #03394a;}
#produto #maisfotos img {max-width: 100%; width: 100%; height: auto; margin: 15px auto; object-fit: cover; border-radius: 5px; box-shadow: 0px 0px 5px #bbb; transition: .7s; cursor: pointer;}
#produto #maisfotos img:hover {transform: translateY(-10px);}
#produto #maisfotos .vermais {background: #3295b5; color: #fff; font-size: 16px; line-height: 21px; font-weight: bold; padding: 7px 25px; border-radius: 5px; border: none; text-transform: uppercase; font-style: normal; cursor: pointer;}
#produto #maisfotos .vermais:hover {background: #1f9bc3;}

.zoom {display:inline-block; position: relative;}
.zoom:after {content:''; display:block; width:33px; height:33px; position:absolute; top:0; right:0; background:url(icon.png);}
.zoom img {display: block;}
.zoom img::selection {background-color: transparent;}
#demo img:hover { cursor: url(grab.cur), default; }
#demo img:active { cursor: url(grabbed.cur), default; }