/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.content {width:960px; margin: auto}
form textarea, form input{box-sizing: border-box; -moz-box-sizing: border-box;}
input, textarea {width: 100%; border: none; padding: 12px; margin-top: 8px; background: #E5E5E5; color: #1455A3; font-weight: 700; font-size: 0.8em;
-webkit-border-radius: 10px;
border-radius: 10px;
}
a {text-decoration: none;}
a, a:hover, a:active, a:focus {outline:0;}
nav ul {margin: 0; padding: 0; list-style: none;}
nav ul li {display: inline-block;}
img {width: auto; height: auto}
input[type='checkbox'] {display: inline-block; width: inherit;}
input[type='radio'] {display: inline-block; width: inherit;}
input[type='submit'] {background: #1455A3; color: #fff; text-transform: uppercase;}
/*
* {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;}
*/
body {font-family: 'Roboto', sans-serif; color: #686868}
h1, h2, h3, h4,h5, h6 {font-family: 'Oswald', sans-serif;}

header {background: #fff; padding: 20px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 99}
#logo {height: 71px; width:300px; overflow: hidden; float: left;}
#logo h1 {margin:0; margin-left: -500px; height: 0;}

nav {float: right; width: 50%; text-align: right; padding-top: 20px}
nav li {display: inline-block; margin-left: 50px}
nav a {color: #1455A3;}

#home {height: 600px; margin-top: 111px; position: relative;}

.slider1 {height: 600px; background: url(../img/banner_1403.webp); no-repeat center center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; background-position: center;}
.slider2 {height: 600px; background: url(../img/banner_7857.webp); no-repeat center center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; background-position: center;}
.slider3 {height: 600px; background: url(../img/banner_8684.webp); no-repeat center center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; background-position: center;}
.slider4 {height: 600px; background: url(../img/banner_8686.webp); no-repeat center center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; background-position: center;}
/*
#home h2 {margin: 0 20%; display:block; color: #fff ; font-weight: 300; font-size: 2.5em; padding-top: 100px; text-transform: uppercase; line-height: 1.2em; position: absolute; width: 960; z-index: 50}
#home h2 span {font-weight: 500}
*/
#home p {
    font-family: 'Oswald', sans-serif; margin: 0 20%; display:block; color: #fff ; font-weight: 300; font-size: 3em; padding-top: 100px; text-transform: uppercase; line-height: 1.2em; position: absolute; width: 960; z-index: 50;
    text-shadow: 1px 1px 10px #000;
}
#home p span {font-weight: 500}

#nosotros h3 {color: #3E356C; text-transform: uppercase; font-size: 3em; font-weight: 500}
.green {color: #068D40; font-weight: 400}
#nosotros .info {width: 35%; float: left; font-size: 1.4em; font-weight: 300}
.acerca {width: 65%; float: right;}
.acerca .icons {display: block; float: left; width: 25%; text-align: center; font-size: 0.8em; font-weight: 700}
.acerca .icons p {margin:0 2% 10px 3%; }
.acerca .icon {display: block; width: 60px; height: 60px; background: url(../img/nosotros-icon.png) center top; margin: 0 auto}
.acerca .icon2 {background-position: center -60px}
.acerca .icon3 {background-position: center -120px}
.acerca .icon4 {background-position: center -180px}
.acerca .icon5 {background-position: center -240px}
.acerca .icon6 {background-position: center -300px}
.acerca .icon7 {background-position: center -360px}
.acerca .icon8 {background-position: center -420px}

#usos {border: solid 1px #068D40; padding: 30px; margin-top: 40px; position: relative; color: #000; margin: 100px 0;
-webkit-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
}
#usos img {float: left; width: 30%;}
#usos h4 {
position: absolute;
font-family: 'Roboto', sans-serif;
top: -58px;
border: solid 1px #068D40;
border-bottom: solid 1px transparent;
display: block;
padding: 12px;
font-size: 12px;
text-transform: uppercase;
color: #fff;
left: -1px;
background: #068D40;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
cursor: pointer;
}

.obras, .eventos, .plus, .portatil, .lavamanos {height: 0; overflow: hidden;}
.obras.active, .eventos.active, .plus.active, .portatil.active, .lavamanos.active {height: auto}
#usos h4.plust {left: 120px}
#usos h4.obrast {left: 280px}
#usos h4.portatilt {left: 390px}
#usos h4.lavamanost {left: 520px}
#usos h4.active {color: #068D40; background: #fff}
#usos h4 br {display: none;}

#usos ul { list-style-position: inside; color: #1463B2}
#usos ul span {color: #000}
#usos h5 {color: #068D40; text-transform: uppercase; font-size: 1.8em; margin: 0; font-weight: 500}
#usos h6 {color: #068D40; text-transform: uppercase; font-size: 1em; margin: 0; font-weight: 500}

#usos .txt {width: 60%; float: right;}

#incluye {margin-bottom: 80px}
#incluye h3 {font-size: 1.2em; font-family: 'Roboto', sans-serif; color: #068D40; text-align: center; font-weight: 700}
#incluye ul { font-weight: 300; font-size: 1.2em; width: 90%; margin: auto; color: #3E356C;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
#incluye ul li {margin-bottom: 15px}
#incluye ul li span {color: #686868}

#galeria img {width: 100%;  min-height:720px; object-fit: cover;}

#servicios {margin: 40px 0}
#servicios h2 {color: #3E356C; text-transform: uppercase; font-size: 2em; font-weight: 500}
#servicios ul {list-style: none; text-align: center; vertical-align: text-top; text-align: center; font-size: 0.8em; font-weight: 700}
#servicios li {display: inline-block; width: 16%; vertical-align: text-top; margin-bottom: 15px}
#servicios span {display: block; width: 60px; height: 60px; background: url(../img/servicios-icon.png) center top; margin: 0 auto}
#servicios .icon2 {background-position: center -60px}
#servicios .icon3 {background-position: center -120px}
#servicios .icon4 {background-position: center -180px}
#servicios .icon5 {background-position: center -240px}
#servicios .icon6 {background-position: center -300px}
#servicios .icon7 {background-position: center -360px}
#servicios .icon8 {background-position: center -420px}
#servicios .icon9 {background-position: center -480px}
#servicios .icon10 {background-position: center -540px}
#servicios .icon11 {background-position: center -600px}
#servicios .icon12 {background-position: center -660px}

#contacto {margin: 80px 0}
#contacto h2 {color: #3E356C; text-transform: uppercase; font-size: 2em; font-weight: 500; margin-top: 0}
#contacto p {margin: 0}
#contacto .info {width: 40%; float: left;}
#map-canvas {float: right; width: 50%; height: 450px;}
form {margin-top: 20px}
.whatsapp{ 
    display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #25d366; border-radius: 50%; color: #fff; font-size: 25px; text-align: center; line-height: 50px; position: fixed; 
    bottom: 0; right: 0; 
    margin-right: 15px; margin-bottom: 15px;
    transform: scale(1);
    animation: pulse 2s infinite;
}

@media only screen and (min-width: 720px) {
    .whatsapp{
        width: 70px; height: 70px;
        font-size: 40px;
        margin-right: 30px; margin-bottom: 30px;
    }
}
footer {background: #3E356C; color: #fff; text-align: center; padding: 15px 0; font-size: 0.8em}
footer a {color: #fff; margin:0 5px;}
footer {background: #3E356C; color: #fff; text-align: center; padding: 15px 0; font-size: 0.8em}
footer a {color: #fff; margin:0 5px;}

#galeria .slick-prev {background: url(../img/arrow-l.png) center center; width: 57px; height: 126px; left: -70px;}
#galeria .slick-next {background: url(../img/arrow-r.png) center center; width: 57px; height: 126px; right: -70px}
#galeria .slick-next::before, #galeria .slick-prev::before {content: ""}

#slider-top .slick-dots {bottom: 30px;}
#slider-top .slick-dots li {margin: 0 20px}
#slider-top .slick-dots li button::before {font-size:15px; color: #fff; border: solid 2px #fff; opacity: 1; color: transparent;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#slider-top .slick-dots li.slick-active button::before {background: #fff;}

.error {color: red}
.complete {color: green}

#galeria .slick-disabled {opacity: 0.2; cursor: default;}



/* =========================================
=================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

@media only screen and (max-width: 1200px) {
    .content {width: 960px;}

}

@media only screen and (max-width: 960px) {
    .content {width: 720px;}
    nav li {margin-left: 30px}
    nav {width:55%}
    #nosotros .info {width: 100%; float: none;}
    .acerca {float: none; width: 95%; margin: auto}

}

@media only screen and (max-width: 720px) {
    .content {width: 560px;}
    nav {width:100%; float:none; text-align: center;}
    nav li {margin: 0 20px}
    #logo {float: none; margin: 0 auto}
    #home h2 {font-size: 2em}
    #galeria img { min-height: 253px;}
    #galeria .slick-prev {left: 10px; z-index: 40}
    #galeria .slick-next {right: 10px}
    header {position: relative;}
    #home {margin-top: 0}
    #home p { font-size: 1.8em; padding-top: 50px; line-height: 1.1em;}


}

@media only screen and (max-width: 560px) {
    .content {width: 90%;}
    .slider1, .slider2, .slider3, .slider4, #home {height: 300px}
    #home h2 {padding-top: 50px}
    .acerca .icons {width: 50%;}
    #incluye ul {
    -moz-column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-count: 1;
    -webkit-column-gap: 0px;
    column-count: 1;
    column-gap: 0px;
    }
    #servicios li {width: 31%}
    #contacto .info {width: 100%; float: none;}
    #map-canvas {width: 100%!important; margin-top: 40px; float: none;}
    #usos img {float: none; width: 80%; display: block; margin: 15px auto}
    #usos .txt {width: 100%; float: none;}
    nav ul li {margin: 0; margin-bottom: 10px; display: block; float: none;}
    nav li a {display: block; border: solid 1px #1455A3; padding: 8px 0; text-align: center; display: block;}
    #usos h4 {max-width: 50px;  height: 40px; top: -80px; font-size: 10px; text-align: center; padding-left: 3px; }
    #usos h4.plust {left: 62px}
    #usos h4.obrast {left: 132px}
    #usos h4.portatilt {left: 200px}
    #usos h4.lavamanost {left: 270px;}
    #usos h4 br {display: block;}

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(27,211,102, 0.7);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(27,211,102, 0);
    }
    
    100% {
        box-shadow: 0 0 0 0 rgba(27,211,102, 0);
    }
}