* { box-sizing: border-box;  margin: 0; }
html, body { width: 100%; height: auto; margin: 0; overflow-x: hidden !important;  position:relative; font-family: 'quendamedium'; letter-spacing: 1.5px;
             font-size: 18px !important; line-height: 22px;  color: #fff !important;
             font-optical-sizing: auto; font-style: normal; }
html { scroll-behavior: smooth; overflow-x: hidden !important;  } 

body { animation: fadein 3s;  -moz-animation: fadein 3s; -webkit-animation: fadein 2s;  -o-animation: fadein 3s;  }
@keyframes fadein { from { opacity:0; } to { opacity: 1;} } 
@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity: 1;} }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity: 1;} }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1;} }
header, footer, ul, li, a,  h1, h2, h3, h4, h5, h6, div, input, label, textarea, section { transition:all 300ms ease; position:relative; }
h1, h2, h3, h4, h5, h6 { font-family: 'milky_niceclean'; }

b { font-weight:700; }
a { text-decoration:none; }
a.logo-foo { display:block; width:170px; margin:35px auto; }
input { width:100%; min-height:45px; border:none; margin-bottom:12px; padding:15px; box-sizing: border-box; }
input[type=submit] { background:#c04f4f; color:#fff; }
::-webkit-input-placeholder { color: #93b4bb; }
::-moz-placeholder { color: #93b4bb; }
:-ms-input-placeholder { color: #93b4bb; }
:-moz-placeholder { color: #93b4bb; }

.azul-claro { color:; }
a.logo-top img { width:120px; }
.reviews { height:auto; overflow-y:auto; overflow-x:none !important; background:#fff; border-radius:15px;  }

li { list-style:none; }
footer { background:#1a1e29 url(img/pattern-foo.png) no-repeat right; bottom; color:#fff; padding:50px 0; }
footer ul li a { color:#fff;  }
footer a { color:#fff;  }
footer a:hover { opacity:.5;  }
section { width:100%; min-height:90vh; position:relative; padding:75px 0; }
form { margin:25px auto; }

.fondo { position: fixed; width:210px; left:6%; top:-25px; z-index:10; }
.logo-top { position: fixed; width:120px; left:10%; top:15px; z-index:20; }
.menu { position: fixed; width:180px; margin-top: -310px; right:10%; padding:0 0 30px 0; top:0px; z-index:10; background: url(img/ribbon.png) no-repeat center bottom; background-size:100% auto; text-align:center;  }
.menu:hover { margin-top: -20px; }
.menu ul { padding:40px 0px; padding:30px 0 20px 0; }
.menu ul li { text-align: center; width:100%; margin-bottom:10px; }
.menu ul li a { color:#fff; font-size:18px; }
.menu ul li a:hover { color:#81d2e8; }
.menu_ { font-size:24px; margin:15px auto; }
#contacto h3 { color:#1d7997; font-size:53px; }
#contacto h4 { color:#1d7997; font-size:20px; margin: -15px auto 15px auto;  font-family: 'quendamedium'; }
#contacto p  { font-size:16px; color:#1d7997; margin-bottom:0px; }
.pets { width:132px; margin:20px auto; }
.txt-intro { background:rgba(255, 255, 255, .7); border-radius:90px; padding:20px; margin:20px auto; max-width:290px; }

#equipom { color:#1d7998; }
#equipom p { font-size:14px !important; }
#equipom .col-sm-4 b { font-size:16px; display:block; margin-bottom:20px; }
#equipom .col-sm-4 img { width:100%; display:block; margin:0 auto 20px auto; }
#equipom .col-sm-4  { margin-bottom:35px; border-bottom:#BFE1EA solid 3px; }


a.tel  { height: 35px; padding: 10px 0; display: inline-block; line-height: 100%; position: relative; color:#1d7997; padding-left:40px; background: url(img/wh.svg) no-repeat left center; background-size:30px; }
a.hora { height: 35px; padding: 10px 0; display: inline-block; color:#1d7997; padding-left:40px; background: url(img/clock.svg) no-repeat left center; background-size:30px; }

.formulario { padding-left:2%; padding-right:2%; }
#medical-zoo { background:#f1f1f1 url(img/medical-zoo.jpg) no-repeat  center right; height:100vh; position:relative;  }

.box-ser { background-filter: blur(6px); vertical-align: top; margin: 15px; background: rgba(0, 0, 0, .5); text-align: left; width:290px; font-size: 17px; line-height: 18px; padding: 18px; color: #fff; height:auto; display:inline-block; border-radius:20px; } 
.box-ser h3 { display:block; color:#d1f1f9; }
.box-ser img  { display:block; margin:25px 0; }

.logo-intro { margin-top:35vh; }
.patern-intro { position:absolute; left:0px; bottom:0px; }
.ilustracion { width:270px; display:block; margin:30px auto; }

#servicios { background: url(img/pattern-ser.jpg) no-repeat; height:auto !important; background-size:cover; padding-top:150px; padding-bottom:50px; } 
#servicios h2 { font-size:82px; color:#1d7997;  }
#servicios h2 span { font-size:70px; color:#81d2e8; display:block; margin-bottom:-20px; }

#ser { margin:0 !important; background:#d6e8e7 url(img/pet2.jpg) no-repeat bottom right; text-align: center; background-size:auto 100% ; background-attachment: fixed;  color: #2e635d; font-size:20px; line-height: 32px; padding: 10% 8%; }
#contacto { background:#84b4c1; }
#cremacion { background: url(img/cremacion.jpg) no-repeat; min-height:100vh; background-size:cover; padding-top:15vw;  } 
#cremacion h2 { font-size:55px; color:#1d7997; }
#ventajas { background:#000; color:#fff; position:relative; }
#ventajas h3 { font-size:45px; color:#afe8f8; max-width:350px; line-height:40px; margin-bottom:25px; } 
.container, .container-fluid { position:relative; z-index:2; }
.perrito { position:absolute; left:0px; bottom:0px; z-index:1 !important; }
ul.menu { padding:0px; }
ul.menu li { background: url(img/paw-icon.pmg) no-repeat top left;  width:100%; text-align:center !important; }
ul.ventajas { padding:0px; }
ul.ventajas li { padding-left:60px; background: url(img/paw-icon.png) no-repeat top left; margin-bottom:20px; min-height:45px; }

.chip2 { background: url(img/fondo-chip.jpg) no-repeat  center !important;  background-size: cover; }
.seccion { padding:0px; }
.seccion-a { background: url(img/seccion-a.jpg) no-repeat  center; text-align: center; background-size: cover; padding:10%; min-height:90vh;  }
.seccion-a h3 { margin:20px auto; }

.seccion-a_ { background: url(img/seccion-a2.jpg) no-repeat  center; text-align: center; background-size: cover; padding:5%; min-height:90vh;  }
.seccion-a_ h3 { margin:20px auto;  font-size:28px; }
.seccion-b_ { background:#f60 url(img/seccion-b2.jpg) no-repeat  center; background-size: cover; padding:5%; min-height:45.6vh; color: #1d7997;}
.seccion-b_ h3 { margin-bottom:35px;  font-size:28px; }
.seccion-c_ { background: url(img/seccion-c2.jpg) no-repeat  center; background-size: cover; padding:5%; min-height:46vh;  }
.seccion-c_ h3 { margin-bottom:35px; font-size:28px; }

.seccion-b { background:#f60 url(img/seccion-b.jpg) no-repeat  center; background-size: cover; padding:5%; min-height:45.6vh; color: #1d7997;}
.seccion-b h3 { margin-bottom:35px; }
.seccion-c { background: url(img/seccion-c.jpg) no-repeat  center; background-size: cover; padding:5%; min-height:46vh;  }
.seccion-c h3 { margin-bottom:35px; }

.seccion-d { background: url(img/seccion-d.jpg) no-repeat  center; text-align: center; background-size: cover; padding:7%; min-height:60vh;  }
.seccion-d p { font-size:16px; line-height:28px !important; }
.seccion-e { background: url(img/seccion-e.jpg) no-repeat  center; text-align: center; background-size: cover; padding:7%; min-height:60vh;  }
.seccion-e p { font-size:16px; line-height:28px !important; }

#nosotros { background:#f1f1f1 url(img/nosotros.jpg) no-repeat; background-position: 15% bottom; background-size:auto 100%;  }
.nosotros_ { background: rgb(29, 121, 151, .65); padding:10% 5%; }
a.top { height: 50px; width: 50px; display: block; position: fixed; z-index: 999999; bottom: 18%; right: 28px; }
a.top img { height: 50px; width: 50px; }

a.wh { height: 50px; width: 50px; display: block; position: fixed; z-index: 999999; bottom: 26%; right: 28px; }
a.wh img { height: 50px; width: 50px; }

#galería { padding:75px 0; background: url(img/pattern.jpg) repeat; }
#galería h3 { text-align:center; color:#1e7a98; margin:45px auto; }
.zoo-gal { display:inline-block; margin: 10px; height:180px; border-radius:15px; }

.chipm { display:block; width:80%; }

#chip { background:#f1f1f1; color:#147999;  }
#chip span { color:#c35351;  }

#precios { padding:75px 0; }

.carousel {
  background: #FAFAFA;
  margin-bottom: 40px; transition: none !important;
}

.carousel-cell {
  width: 100%;
  height: auto;
  margin-right: 10px;
  background: #1d7997;
  padding: 3%; transition: none !important;
}


.carousel-nav .carousel-cell {
  min-height: 70px;
  width: 300px; padding: 15px; text-align:  center; transition: none !important;
}

.carousel-nav .carousel-cell:before {
  font-size: 50px; transition: none !important;
  line-height: 80px;
}

.carousel-nav .carousel-cell.is-nav-selected {
  background: #81d2e8;  color: #1d7997;  transition: none !important;
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -50px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
}

.eva { background:greenyellow; padding:8px; margin:15px; color: #1d7997; max-width:300px; }
/*
    Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
    */
tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    padding: 5px 15px !important;
}

    @media
      only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr {
            display: block; 
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
      margin: 0 0 1rem 0; 
    }
      
    tr:nth-child(odd) {
     background: #81d2e8;
    }
    
        td {
            /* Behave  like a "row" */
            border: none;
            position: relative;
            padding-left: 50%;
            padding: 15px !important;
        }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap; 

        }

        /*
        Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
        */
        td:nth-of-type(1):before { content: "Peso"; }
        td:nth-of-type(2):before { content: "Edad"; }
        td:nth-of-type(3):before { content: "Costo"; }
    }



   #scroll-percentage {
        position: fixed;
        top: 0;
        width: 100vw;
        color: #000;
        margin: 0;
        padding: 0;
        z-index: 999999999999;
    }

    [data-scrollPercentage] .percentage {
      display: inline-block;
      background-color: #c04f4f;
      height: 4px;
      width: 0;
    }
    #percentage-value {
      position: fixed;
      bottom: 10%;
      right: 0%;
      transform: translateX(-50%);
      height: 50px;
      width: 50px;
      color: #fff;
      background: #1d7998;
      text-align: center;
      padding-top: 15px;
      border-radius: 50%;
      font-size: .8em;
      z-index: 1000000;
    }
    @keyframes bounce {
      from, 20%, 53%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
      }

      40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
      }

      70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
      }

      90% {
        transform: translate3d(0,-4px,0);
      }
    }
    .instruction {
      position: fixed;
      z-index: 2;
      top: 60%;
      width: 100%;
      text-align: center;
      color: darkorange;
      animation: bounce 1s infinite;
    }



 /* Custom, iPhone Retina */ 
    @media only screen and (max-width: 550px) {
    .fondo { position: fixed; width:210px; left:-3%; top:-25px; z-index:10; }
    .menu { position: fixed; width:180px; margin-top: -310px; right:1%; padding:0 0 30px 0; top:0px; z-index:10; background: url(img/ribbon.png) no-repeat center bottom; background-size:100% auto; text-align:center;  }

#medical-zoo {
    background: #f1f1f1 url(img/medical-zoo.jpg) no-repeat center bottom; background-size: 100% auto;
    height: 100vh;
    position: relative;
}
#ser {
    margin: 0 !important;
    background: #d6e8e7 url(img/pet2.jpg) no-repeat bottom right;
    background-size:  100% auto;
    color: #2e635d;
    font-size: 20px;
    line-height: 32px;
    padding: 5vh 8% 40% 8%;
}

#servicios h2 {
    font-size: 52px;
    color: #1d7997;
}

#cremacion {
    background: url(img/cremacion.jpg) no-repeat;
    min-height: 100vh;
    background-size: cover;
    padding-top: 250px;
}

.perrito { position:absolute; left:0px; bottom:0px; z-index:1 !important; opacity:.5; }

#chip { background:#f1f1f1; color:#147999;  padding-top:250px;   }

    }

@media only screen and (max-width: 550px) {
.zoo-gal { display:inline-block; margin: 5px; height:80px; border-radius:15px; }
}