/* ESTILOS para LANDING PAGE = Bayer Animal health   */
/* Escrito por Ariel Páez, para Espacio360           */

html, body{
  font-family: "Bariol", Bariol, Verdana, sans-serif;
  font-size: 20px; color:#747172;
}

@media (min-width: 768px) { /* Medianos y grandes */
  html, body{ font-size: 26px;  }
}


#my_header{ background: url(../imgs/template/header_bg.png) top center repeat; }
.navbar-default {    background-color: transparent;    border: 0 none transparent;}
.navbar-brand {    height: 90px;    padding: 5px 15px;}

.navbar-header{position: relative;}

@media (min-width: 768px) { /* Medianos y grandes */
  .navbar-header{padding-top: 15px;}
}
#logo-holder{
  background-color: #c9899e;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 4px 4px 0 rgba(100,100,100,0.4);
  margin-bottom: 15px;
}


.h1, h1{font-weight: bold;}
sup{    font-size: 1em;    top:0;}



/* FUENTES */
.bold{font-weight: bold;}
.regular{ font-weight: 600;}
.light{font-weight: 300;}
.thin{font-weight: 100;}
.remarca {    font-size: 1.5em;    font-weight: bold;}
.font-2{ font-size: 2em !important; }
.blanco{color:white;}
.amarillo{color:#ffc107;}
.azul{color: #00bcd4;}
.jade{color:#43b19c;}
.naranja{color: #f26e26;}  .rosa{color: #b1062f;}
.verde{color: #50b448;}

.margin-bottom-negativo {
  position: relative;
  margin-bottom: -6%;
  z-index: 90;
}
.margin-top-1{    margin-top: 1em !important;}
.margin-top-2{    margin-top: 2em !important;}
.margin-top-neg-1{    margin-top: -1em !important;}

.margin-bottom-1{  margin-bottom: 1em !important;}



/*imagenes*/
img.intext{display: inline-block; vertical-align: top;}

/* ESTILOS */
.titulo-seccion {
  font-family: "din";
  text-align: center;
  font-weight: bold;
  font-size: 1.7em;
}

.text-center{ text-align: center;}
.pointer{cursor: pointer;}

.bg-h-repeat {
    background-position: top center;
    background-size: 10% 100%;
    background-repeat: repeat-x;
}
.bg-v-repeat {
    background-position: left center;
    background-size: 100% 10%;
    background-repeat: repeat-y;
}

/*Speech bubbles*/
.bubble {
    background: #f06f20;
    border-radius: 30px;
    color: #fff;
    margin: 1em 0 3em;
    padding: 15px;
    position: relative;
    text-align: center;
    min-height: 60px;
}

.bubble::after {
    border-color: #f06f20 transparent;
    border-style: solid;
    border-width: 20px 0 0 20px;
    bottom: -20px;
    content: "";
    display: block;
    left: 50px;
    position: absolute;
    width: 0;
}
.bubble.top::after {
    border-color: transparent #f06f20;
    border-width: 20px 20px 0 0;
    bottom: auto;
    left: 50px;
    top: -20px;
}
.bubble.left::after {    bottom: 20px;    left: -17px;}
.bubble.right::after {bottom: 20px;
    right: -18px;    left: auto;
    border-width: 0px 20px 20px 0px;
}


/* Cuadro con borde grueso separado*/
.cuadro1 {
    background: #b1062f;
    display: block;    position: relative;
    width: 80%;    margin:0 auto;
    border: 12px solid white;
}

.cuadro1::after {
    position: absolute;
    border: 8px solid #b1062f;
    width: calc(100% + 37px);
    height: calc(100% + 37px);
    content: "";
    top: -17px;    left: -17px;
}

/* Cuadro con una esquina chata */
.cuadro2{
  display: block;    position: relative;
  width: 80%;    margin:0 auto;
  border: 12px solid transparent;
  border-image-source: url(../imgs/template/esquina.png);
  border-image-slice: 67;  border-image-width: 67;
  border-image-outset: 8px;
  border-image-repeat: round;  
}
.esquina2{ border-image-source: url(../imgs/template/esquina2.png); }

@media (min-width: 992px){
  .cuadro2 p { 
    position: relative;    margin: 0 auto;   width: 85%;
    background: url(../imgs/template/esquina.png) center center no-repeat; background-size: 170% 320%;
  }
  .cuadro2.esquina2 p{ background-image: url(../imgs/template/esquina2.png);}
}

.cuadro3, .cuadro4 { display: block;    position: relative;    margin: 0 auto;
    background: url(../imgs/template/lesquina.png) center center no-repeat;    background-size: 100% 100%;
    padding: 0.3em 0.5em; max-width: 330px;
}
.cuadro4{background: url(../imgs/template/lesquina2.png) center center no-repeat; background-size: 100% 100%;}


/* Forma de escudo, punta en bottom */
.shield{  display: table;  position: relative;  margin: 0 auto;  width: 100%;  color:white;}
.shield>div{ position: relative; display:table-row; width: 100%;}
.shield-start img{ vertical-align: bottom; }
.shield-img {  width: 100%;  height: auto; }
.shield-content { background-image: url(../imgs/shield-medio.png);}
.shield-content>div{display: table-cell; padding:0 1em;}
.shield p {  margin: 0;}

.sprite{
  height: 0; display: block;
  margin: 1em auto 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.sankaku1{position: relative;}
.sankaku1::before {
    content: "";
    z-index: 0;
    top: -1px;    left: 15%;    width: 0;
    border-color: #fff transparent;    border-style: solid;
    border-width: 20px 20px 0;
    display: block;    position: absolute;
}
.sankaku1.derecha::before{ left:auto; right:25%; }

/* Centrado vertical, modo 1*/

/* Necesita una función para aplicar al parent la clase .vcenter-parent, */
/* para evitar en algunos casos imágenes un poco borrosas.               */
/* $(function(){                             */
/*  $(".vcenter").parent().addClass(".vcenter-parent");          */
/* });                                   */
.vcenter-parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.vcenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Escala animada */
.zoom-in { transition: all .2s ease-in-out; }
.zoom-in:hover { transform: scale(1.1); }


/* blink */
.blink{
  -webkit-animation-name:parpadeo;
     -moz-animation-name:parpadeo;
       -o-animation-name:parpadeo;
          animation-name:parpadeo;

  -webkit-animation-duration:0.5s;
     -moz-animation-duration:0.5s;
       -o-animation-duration:0.5s;
          animation-duration:0.5s;

  -webkit-animation-direction:alternate;
     -moz-animation-direction:alternate;
       -o-animation-direction:alternate;
          animation-direction:alternate;

  -webkit-animation-iteration-count:infinite;
     -moz-animation-iteration-count:infinite;
       -o-animation-iteration-count:infinite;
          animation-iteration-count:infinite;    
}

@-webkit-keyframes parpadeo{  from{opacity: 1;}  to {opacity: 0.3;} } 
   @-moz-keyframes parpadeo{  from{opacity: 1;}  to {opacity: 0.3;} } 
     @-o-keyframes parpadeo{  from{opacity: 1;}  to {opacity: 0.3;} } 
        @keyframes parpadeo{  from{opacity: 1;}  to {opacity: 0.3;} }


/* Animacion de entrada, según direcciones*/
.on.entraLeft, .on.entraRight, .on.entraTop, .on.entraBottom, .on.entraScale{
    -webkit-animation-duration:1s;
       -moz-animation-duration:1s;
         -o-animation-duration:1s;
            animation-duration:1s;

    -webkit-animation-direction:normal;
       -moz-animation-direction:normal;
         -o-animation-direction:normal;
            animation-direction:normal;

    -webkit-animation-iteration-count:1;
       -moz-animation-iteration-count:1;
         -o-animation-iteration-count:1;
            animation-iteration-count:1; 
}
.on.entraLeft{
    -webkit-animation-name:entraLeft;
       -moz-animation-name:entraLeft;
         -o-animation-name:entraLeft;
            animation-name:entraLeft;
}

@-webkit-keyframes entraLeft{
    from {  -webkit-transform: translate3d(-100%, 0, 0); opacity: 0; }
    to {    -webkit-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-moz-keyframes entraLeft{
    from {  -moz-transform: translate3d(-100%, 0, 0); opacity: 0; }
    to {    -moz-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-o-keyframes entraLeft{
    from {  -o-transform: translate3d(-100%, 0, 0); opacity: 0; }
    to {    -o-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes entraLeft{
    from {  transform: translate3d(-100%, 0, 0); opacity: 0; }
    to {    transform: translate3d(0, 0, 0);    opacity: 1; }
}

.on.entraRight{
    -webkit-animation-name:entraRight;
       -moz-animation-name:entraRight;
         -o-animation-name:entraRight;
            animation-name:entraRight;
}

@-webkit-keyframes entraRight{
    from {  -webkit-transform: translate3d(100%, 0, 0); opacity: 0; }
    to {    -webkit-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-moz-keyframes entraRight{
    from {  -moz-transform: translate3d(100%, 0, 0); opacity: 0; }
    to {    -moz-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-o-keyframes entraRight{
    from {  -o-transform: translate3d(100%, 0, 0); opacity: 0; }
    to {    -o-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes entraRight{
    from {  transform: translate3d(100%, 0, 0); opacity: 0; }
    to {    transform: translate3d(0, 0, 0);    opacity: 1; }
}



.on.entraTop{
    -webkit-animation-name:entraTop;
       -moz-animation-name:entraTop;
         -o-animation-name:entraTop;
            animation-name:entraTop;
}
@-webkit-keyframes entraTop{
    from {  -webkit-transform: translate3d(0, -100%, 0); opacity: 0; }
    to {    -webkit-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-moz-keyframes entraTop{
    from {  -moz-transform: translate3d(0, -100%, 0); opacity: 0; }
    to {    -moz-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-o-keyframes entraTop{
    from {  -o-transform: translate3d(0, -100%, 0); opacity: 0; }
    to {    -o-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes entraTop{
    from {  transform: translate3d(0, -100%, 0); opacity: 0; }
    to {    transform: translate3d(0, 0, 0);    opacity: 1; }
}

.on.entraBottom{
    -webkit-animation-name:entraBottom;
       -moz-animation-name:entraBottom;
         -o-animation-name:entraBottom;
            animation-name:entraBottom;
}
@-webkit-keyframes entraBottom{
    from {  -webkit-transform: translate3d(0, 100%, 0); opacity: 0; }
    to {    -webkit-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-moz-keyframes entraBottom{
    from {  -moz-transform: translate3d(0, 100%, 0); opacity: 0; }
    to {    -moz-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@-o-keyframes entraBottom{
    from {  -o-transform: translate3d(0, 100%, 0); opacity: 0; }
    to {    -o-transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes entraBottom{
    from {  transform: translate3d(0, 100%, 0); opacity: 0; }
    to {    transform: translate3d(0, 0, 0);    opacity: 1; }
}


.on.entraScale{
    -webkit-animation-name:entraScale;
       -moz-animation-name:entraScale;
         -o-animation-name:entraScale;
            animation-name:entraScale;
}
@-webkit-keyframes entraScale{
    from {  -webkit-transform: scale3d(0,0,0); opacity: 0; }
    65% {  -webkit-transform: scale3d(1.3,1.3,1.3); opacity: 0.8; }
    to {    -webkit-transform: scale3d(1,1,1); opacity: 1; }
}
@-moz-keyframes entraScale{
    from {  -moz-transform: scale3d(0,0,0); opacity: 0; }
    65% {  -moz-transform: scale3d(1.3,1.3,1.3); opacity: 0.8; }
    to {    -moz-transform: scale3d(1,1,1); opacity: 1; }
}
@-o-keyframes entraScale{
    from {  -o-transform: scale3d(0,0,0); opacity: 0; }
    65% {  -o-transform: scale3d(1.3,1.3,1.3); opacity: 0.8; }
    to {    -o-transform: scale3d(1,1,1); opacity: 1; }
}
@keyframes entraScale{
    from {  transform: scale3d(0,0,0); opacity: 0; }
    65% {  transform: scale3d(1.3,1.3,1.3); opacity: 0.8; }
    to {    transform: scale3d(1,1,1); opacity: 1; }
}