/* =======SECTIONS======= */
*,
html { font-family: 'Montserrat', sans-serif; }
h3, h4, h5 h6 { font-weight: 500; }
nav ul a { font-weight: 700; letter-spacing: 0.25px; }
section, .section { padding: 60px 0 35px; }
.bg-grey { background-color: #e6e6e6; }
.bg-grey { background-color: #e6e6e6; }
.bg-blue { background-color: #1c6377; }
.bg-blue-dark { background-color: #0B3448; }
.bg_img { background-position: center; background-size: cover; background-repeat: no-repeat; }
.row {margin-bottom: 0;}
.justify-text { text-align: justify; }
.right-text { text-align: right; }
.w-700 { font-weight: 700; }
.w-600 { font-weight: 600; }
.wh-90 { width: 90% }
h1 {
font-size: 3.2rem;
font-weight: 600;
}
nav {
height: initial;
}
h2 {
font-size: 2.2rem;
font-weight: 600;
margin: 0 0 2.424rem 0;
color: #0b3448;
}
p { text-align: justify; }
a { transition: all .4s; }
img { max-width: 100%; }
.clear { clear: both; }
.pre-footer p img {
max-width: 16px;
margin-right: 10px;
position: relative;
float: left;
top: 1px;
margin-bottom: 4px;
}
/* =======HEADER======= */
.navbar-fixed nav > .container.nav-wrapper {
padding: 0 15px;
}
.img_productos.center figure {
background: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px #00000038;
}
nav .brand-logo figure {
margin: 0;
width: 200px;
line-height: initial;
padding-top: 7%;
}
.buscador {
position: fixed;
top: -1000px;
transition: all .5s;
border-top: 1px solid;
z-index: -1;
background: #0b3448;
width: 315px;
right: 8%;
}
.buscador.activado {
top: 80px;
border-radius: 0 0 7px 7px;
overflow: hidden;
}
.buscador .cerrar_buscador {
position: absolute;
right: 5px;
top: 10px;
color: #fff;
padding: 6px;
cursor: pointer;
}
.buscador p {
margin: 0px 0px 8px 0px;
line-height: initial;
}
[type="radio"]:not(:checked) + span:before, [type="radio"]:not(:checked) + span:after {
border: 2px solid #f9fafc;
}
.buscador label {
font-size: 0.8rem;
color: #f7f8fb;
}
.buscador ul.collapsible {
margin: 0 !important;
border: 0;
}
.buscador .collapsible-header {
line-height: 1.5;
padding: 1rem;
background-color: #1c6377;
border-bottom: 1px solid #f7f8fab0;
color: #fff;
padding: 15px 30px;
font-size: 15px;
font-weight: 600;
position: relative;
}
.buscador .collapsible-header:after {
content: "";
position: absolute;
right: 27px;
width: 10px;
height: 10px;
/* background: transparent; */
transform: rotate(135deg);
border-color: #fff;
border-style: solid;
border-bottom: 2px;
border-width: 1px 1px 0px 0px;
transition: all .4s;
top: 19px;
}
.buscador li.active .collapsible-header:after {
transform: rotate(317deg);
top: 24px;
}
.buscador .input-field {
margin: 0 0 -8px 0;
}
.buscador .input-field input#search {
padding: 20px 45px;
box-sizing: border-box;
height: auto;
line-height: initial;
color: #fff;
}
.buscador .input-field i.material-icons {
margin-top: 19px;
}
#nav-mobile {
transition: all .4s;
}
#nav-mobile.activado {
width: 270px !important;
left: 270px !important;
/*top: 56px !important;*/
}
#nav-mobile .cierreMenu {
opacity: 0;
}
#nav-mobile.activado .cierreMenu {
opacity: 1;
}
.btn_shearch {
cursor: pointer;
padding-left: 25px;
}
.breadcrumb2 {
white-space: inherit;
font-size: 12.5px;
}
/* =======FLEX======= */
.flex {
display: flex;
flex-wrap: wrap;
}
.flex_center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex_right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
}
/* =======SLIDERS======= */
.slider-home .sliders{
height: 90vh;
}
.slider-home .slider_1 {
background-image: url(../img/slider/banner1-sistema-bombeo.png);
}
.slider-home .slider_1 .cont_slider {
padding-top: 40%;
}
.slider-home .slider_2{
background-image: url(../img/slider/banner2-medioambiente.png);
}
.slider-home .slider_3{
background-image: url(../img/slider/banner3-sistema-dosificacion.png);
}
.slider-home .slider_4{
background-image: url(../img/slider/banner4-pulverizacion.png);
}
.slider-home .slider_5{
background-image: url(../img/slider/banner5-medicion-valvulas.png);
}
.slider-home .cont_slider {
padding-top: 0% !important;
margin-top: 22.5%;
}
.slider-home .cont_slider h1 {
margin: 0;
font-size: 2.5em;
font-weight: 700;
line-height: 1.25;
}
.slider-home .cont_slider h3 {
font-size: 2em;
margin: 7px 0 0 0;
}
.bg-banner{
width: 100%;
height: auto;
/*background: rgba(11, 52, 72, 0.75);*/
box-sizing: border-box;
padding: 23px 18px;
}
.bg-banner h1 span {
display: block;
background: rgba(11, 52, 72, 0.75);
width: max-content;
padding: 0px 10px;
}
.bg-banner h3 span {
margin-top: -8px;
display: block;
background: rgba(11, 52, 72, 0.75);
padding: 2px 10px;
}
/* =======OWL CAROUSEL======= */
.owl-nav {
transition: all .5s;
opacity: 0;
}
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
position: absolute;
/* top: 45%; */
bottom: 45%;
width: 40px;
height: 40px;
border: 1px solid #fff !important;
border-radius: 2px;
transition: all .5s;
}
.owl-nav button.owl-prev span,
.owl-nav button.owl-next span {
color: #fff;
font-size: 35px;
line-height: .5;
}
.owl-nav button.owl-prev {
left: 50px;
/*right: 13.5%;*/
}
.owl-nav button.owl-next {
right: 50px;
/*right: 10%;*/
}
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
background: #013650 !important;
border-color: #0b3448 !important;
}
.slider-home:hover .owl-nav {
opacity: 1;
}
.owl-dots {
text-align: center;
position: absolute;
bottom: 30px;
width: 100%;
}
.owl-dots button.owl-dot {
background: #fff;
width: 10px;
height: 10px;
padding: 0;
margin: 0px 4px;
border-radius: 50%;
opacity: .5;
}
.owl-dots button.owl-dot.active {
opacity: 1;
}
/* =======FOOTER======= */
.pre-footer .col {
/* padding: 0 40px */
}
.pre-footer .row .s4:nth-child(3) {
padding-left: 85px;
}
.pre-footer .row .s4:nth-child(2) {
padding-left: 100px;
}
.pre-footer figure {
margin: 0 0 5px;
width: 210px;
}
.pre-footer h3 {
margin: 13px 0 22px;
font-size: 1.3em;
}
.pre-footer p, .pre-footer a {
font-size: 0.90em;
margin-bottom: 7px;
margin-top: 0;
}
.pre-footer a {
padding: 5px 0;
color: #fff;
}
.pre-footer a:hover {
color: #0B3448;
}
.pre-footer i.material-icons {
font-size: 17px;
vertical-align: sub;
margin-right: 7px;
}
.redes a:nth-child(1) img {
position: relative;
top: -2px;
max-width: 35px;
}
.copy-footer {
padding: 1px;
}
.redes img {
max-width: 32px;
vertical-align: initial;
margin-right: 7px;
margin-top: 12px;
}
.cdrl_industria {
background: #fff;
margin-bottom: 30px;
border-radius: 10px;
padding: 20px;
border: 1px solid #000000ba;
box-shadow: 0 0 5px #000;
text-align: center;
display: block;
}
.cdrl_industria span {
margin: 10px 0 0 0;
font-size: 18px;
font-weight: 700;
display: block;
color: #1c6377;
}
.indus_full span {
padding: 15px 15px 32px;
}
.cdrl_industria:hover {
background: #0b3448;
}
.cdrl_industria:hover span {
color: #fff;
}
.cdrl_industria:hover img{
filter: invert(50%);
}
/*
.cdrl_industria:hover img[src="assets/img/industria-img-1.png"] {
filter: invert(100%);
content: url(../img/industria-img-1-white.png);*
}
.cdrl_industria:hover img[src="assets/img/industria-img-2.png"] {
content: url(../img/industria-img-2-white.png);
}
.cdrl_industria:hover img[src="assets/img/industria-img-3.png"] {
content: url(../img/industria-img-3-white.png);
}
.cdrl_industria:hover img[src="assets/img/industria-img-4.png"] {
content: url(../img/industria-img-4-white.png);
}
.cdrl_industria:hover img[src="assets/img/industria-img-5.png"] {
content: url(../img/industria-img-5-white.png);
}
.cdrl_industria:hover img[src="assets/img/industria-img-6.png"] {
content: url(../img/industria-img-6-white.png);
}
.cdrl_industria:hover img[src="assets/img/industria-img-7.png"] {
content: url(../img/industria-img-7-white.png);
}
*/
/* ========================
BANNERS
======================== */
.banners {
height: 79vh;
background-color: rgba(0, 0, 0, 0.49);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.banners.productos {
background-image: url(../img/banner-productos.png);
height: 80vh;
}
.paginacion {
width: 100%;
display: block;
text-align: center;
}
.paginacion ul {
list-style: none;
}
.paginacion ul .enl {
width: auto;
display: inline-block;
}
.paginacion .enl a {
border: 2px solid #1c6377;
color: #1c6377;
border-radius: 4px;
padding: 5px 10px;
margin-left: 5px;
font-weight: 600;
}
.banners.nosotros {
/* background-image: url(../img/banner-nosotros-1.png); */
/* background-image: url(../img/banner-nosotros.jpg); */
padding: 0;
/* margin-top: 70px; */
height: auto;
background-color: #0b3448;
}
.banners.nosotros video {
/* position: absolute; */
/* left: 0; */
width: 100%;
/* height: 130%; */
/* z-index: -1; */
margin: auto;
max-width: 1380px;
box-shadow: 0 0 20px #ffffff7a;
border-radius: 20px;
}
.banners.servicios{
padding: 55px 0;
background-color: #f7f8fa;
}
.banners.servicios .container {
background-image: url(../img/paginas/banner-servicios.png);
background-size: contain;
background-position: left;
background-repeat: no-repeat;
height: 100%;
justify-content: flex-end;
}
.banners.contacto {
background-image: url(../img/paginas/banner-contactanos.png);
padding-bottom: 60px
}
.portada-servicios{
background-image: url(../img/paginas/banner-servicios.png) !important;
background-size: cover;
}
.dropdown-content {
min-width: 185px !important;
top: 80px !important;
background-color: #1c6377;
}
.dropdown-content li > a, .dropdown-content li > span {
font-size: 14px;
color: #ffffff;
line-height: auto;
padding: 14px 16px;
}
.dropdown-content li > a:hover {
background: #0b3448
}
/* ========================
PRODUCTOS
======================== */
.cadricula_producto {
margin-bottom: 45px;
padding: 0 5px;
min-height: 299px; /*[BORRAR ESTO LEUGO]*/
}
.cadricula_producto figure {
position: relative;
margin-bottom: 15px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 4px #000;
}
.cadricula_producto figure img {
margin-bottom: -4px;
width: 100%;
height: auto;
min-height: 212px;
max-height: 212px;
object-fit: cover;
}
.cadricula_producto figure a {
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
left: 0;
bottom: 0;
width: 100%;
padding: 6px 20px 5px;
font-weight: 600;
color: #0b3448;
background: #ffffff;
font-size: 14px;
transition: all .4s;
text-align: center;
min-height: 85px;
line-height: 1.2;
max-height: 50px;
}
.cadricula_producto figure a:after {
content: "";
opacity: 0;
width: 100%;
height: 242px;
background-image: url(../img/add-plus.png);
/*background-size: 62px;*/
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0;
top: -500px;
z-index: 9;
background-color: #0b344896;
transition: all .5s;
}
.cadricula_producto:hover figure a:after {
top: -230px;
opacity: 1;
}
.cadricula_producto:hover figure a {
color: #fff;
background: #0b3448;
}
.cont_productos {
padding-left: 30px;
}
.cont_productos ul {
padding-left: 20px;
}
.cont_productos ul li {
padding-left: 2px;
position: relative;
list-style: disc;
margin-bottom: 3px;
}
ul.lista li {
padding-left: 20px;
position: relative;
}
ul.lista li:before {
content: "";
position: absolute;
left: 3px;
top: 10px;
width: 7px;
height: 2px;
background: #0B3448;
}
/*.bg-grey > .container > .row > .col.s3:nth-child(4n+5) {
clear: both;
}*/
/* ========================
NOSOTROS
======================== */
.quienes_somos .col {
padding: 0;
}
.quienes_somos .cont_nosotros {
padding: 80px 101px;
}
.quienes_somos .img_nosotros img {
width: 100%;
height: 530px;
object-fit: cover;
margin-bottom: -4px;
}
.mision-vision {
padding-top: 0px;
white-space:pre;
}
.mision-vision .container {
white-space: initial;
}
.mision-vision:before {
content: "Con nuestras soluciones,\A todo fluye.";
top: 79px;
left: 10%;
position: relative;
color: #0B3448 !important;
font-weight: 600;
font-style: oblique;
font-size: 27px;
line-height: 1.1;
}
.mision-vision h3,
.mision-vision p{
white-space: initial;
}
.mision-vision .row {
background-image: url(../img/paginas/banner-procesos-nosotros.png);
padding-top: 400px;
background-size: contain;
}
/* ========================
SERVICIOS
======================== */
.card-servicios .card {
background-color: transparent;
box-shadow: initial !important;
min-height: 405px;
}
.card-servicios .card .card-reveal i.material-icons {
position: absolute;
right: 15px;
top: 30px;
}
.card-servicios .card .card-content {
padding: 0;
}
.card-servicios .card-content span.card-title {
text-align: center;
padding: 15px;
font-size: 20px;
line-height: initial;
font-weight: 400;
margin: 0;
}
.card-servicios .card-content span.card-title i {
display: block;
margin: auto;
font-size: 30px;
padding-top: 4px;
margin-top: 30px;
background: #ffffff;
color: #0b3448;
font-weight: 800;
}
.card-servicios .card .card-image {
position: relative;
padding: 45px 70px 0;
}
.card-servicios .card .card-reveal {
background-color: #0b3448;
border: 1px solid #ddd;
border-radius: 20px;
}
.card-servicios ul.lista li {
margin-bottom: 4px;
}
.card-servicios ul.lista li:before {
background: #fff;
}
/* ========================
CONTACTO
======================== */
.seccion-contacto {
padding-bottom: 60px;
}
.input-field .prefix {
margin-left: 9px;
top: .8rem;
color: #0b3448;
}
.input-field .prefix ~ input, .input-field .prefix ~ textarea, .input-field .prefix ~ label, .input-field .prefix ~ .validate ~ label, .input-field .prefix ~ .helper-text, .input-field .prefix ~ .autocomplete-content {
margin-left: 3.5rem;
width: 75% !important;
width: calc(100% - 3.5rem);
}
.input-field .prefix ~ label {
margin-left: 3.5rem;
}
textarea {
max-height: 130px !important;
}
li.linkProductos {
position: relative;
transition: all 3s;
}
li.linkProductos ul#dropdown1 {
height: 0;
opacity: 0;
transition: all 3s;
}
li.linkProductos:hover ul#dropdown1 {
display: block !important;
opacity: 1;
position: absolute;
height: 440px;
}
.right-contacto {
padding-left: 60px !important;
margin-top: 33px;
}
.right-contacto h4 {
font-size: 1em;
font-weight: 500;
margin: 0;
}
.right-contacto p {
margin: 3px;
}
.right-contacto i.material-icons {
margin-right: 7px;
font-size: 28px;
position: relative;
top: -5px;
}
.modal {
}
.right-contacto a.waves-effect {
color: #ffffff;
font-weight: 600;
margin-left: 36px;
margin-top: 25px;
}
.modal {
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: #00000094;
max-height: initial;
width: 100%;
margin: 0;
overflow: initial !important;
will-change: initial;
}
.modal .modal-content {
padding: 30px;
background: #fff;
border-radius: 10px;
width: 330px;
position: relative;
}
.modal h3 {
font-size: 30px;
text-align: center;
color: #0b3448;
font-weight: 500;
}
.modal_activo {
display: flex !important;
justify-content: center;
align-items: center;
z-index: 999 !important;
top: 0;
width: 100%;
}
.cierre_modal {
position: absolute;
right: 5px;
top: 5px;
background: #1a5b6e;
padding: 5px 6px 1px;
border-radius: 50%;
color: #fff;
cursor: pointer;
}
.cierre_modal i {
font-size: 14px;
}
.og-image { display: none; }
@keyframes pulse-animation {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.2);
}
}
.whatsapp-ico::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: inherit;
border-radius: inherit;
transition: opacity 0.3s, transform 0.3s;
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
z-index: -1;
}
.whatsapp-ico:hover::before {
opacity: 0;
transform: scale(1.2);
}
.whatsapp-ico {
fill: white;
width: 50px;
height: 50px;
padding: 3px;
background-color: #4dc247;
border-radius: 50%;
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
position: fixed;
bottom: 20px;
right: 20px;
z-index: 10;
}
.whatsapp-ico:hover {
box-shadow: 2px 2px 11px rgba(0,0,0,0.7);
}
@media screen and (min-width: 1600px) and (max-width: 2000px){
.slider-home .sliders {
height: 680px;
}
.banners.productos {
height: 580px;
}
.banners {
height: 580px;
}
}
@media screen and (max-width: 1350px){
.breadcrumb2 {
font-size: 11px;
/*white-space: nowrap;*/
}
}
@media screen and (min-width: 999px) and (max-width: 1100px){
.slider-home .sliders {
height: 600px;
}
.banners.productos {
height: 520px;
}
.banners {
height: 520px;
}
.breadcrumb2 {
font-size: 8px;
white-space: nowrap;
}
.cadricula_producto figure a {
font-size: 12px;
}
}
@media (max-width: 600px) {
.breadcrumb2 {
font-size: 0.72em;
}
.cdrl_industria.indus_full {
margin: 0 10px;
}
.indus_full span {
padding: 0;
}
.cdrl_industria img {
max-width: 140px;
}
.slider-home .cont_slider {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
margin-top: 0 !important;
}
.bg-banner h1 span {
width: inherit;
}
.sidenav {
background-color: #0b3448;
padding-top: 40px;
overflow: visible;
}
.cierreMenu {
color: white;
position: absolute;
right: -55px;
background: #0b3448;
font-size: 20px;
top: 0;
padding: 0 20px;
}
.sidenav li > a {
color: #fff;
}
.row .col {
width: 100% !important;
}
nav .brand-logo figure {
width: 160px;
padding-top: 6%;
}
.quienes_somos .cont_nosotros {
padding: 30px;
}
.mision-vision .row {
background-image: initial;
padding-top: 0px;
background-size: contain;
}
.blue-text,
.right-text {
text-align: left;
}
div#modal1 {
width: 100% !important;
}
.col.s6.right-contacto {
padding-left: 30px !important;
padding-right: 30px;
}
h1 {
font-size: 3rem;
}
.owl-nav button.owl-prev {
right: 90px;
left: initial;
}
.owl-nav button.owl-next {
right: 40px;
left: initial;
}
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
bottom: 18%;
}
nav .brand-logo {
left: 25.5%;
}
nav .sidenav-trigger {
float: right;
margin-right: -6px !important;
}
.slider-home .sliders {
height: 300px;
}
.slider-home .cont_slider {
/*
padding-top: 30%;
padding-bottom: 50%;
*/
}
.slider-home .cont_slider .bg-banner {
padding: 15px 20px;
}
.slider-home .cont_slider h1 {
font-size: 1.45em;
line-height: 1.35;
}
.pre-footer .row .s4:nth-child(2), .pre-footer .row .s4:nth-child(3) {
padding-left: 10px;
}
.pre-footer figure {
margin: initial;
}
.wh-90 {
width: 100%;
}
.pre-footer .col.s4 {
text-align: left;
}
.pre-footer i.material-icons {
/*font-size: 0;*/
/* margin-right: 0;*/
}
.cont_productos {
padding-left: 0;
}
.row .col.s3 > img {
max-width: 165px;
}
.banners.nosotros {
padding: 40px 26px;
}
.mision-vision:before {
top: 5px;
left: 10%;
font-size: 22px;
}
}
.btn:hover, .btn-large:hover, .btn-small:hover {
background-color: #0B3448;
border: 1px solid #fff;
}
.activo a{
background: #1c6377;
color: #fff !important;
}