/*
Classes para override algunas limitaciones de bootstrap-theme.css
*/


  /**********************************/
 /**** Carousel tipo 3 Custom 1 ****/
/**********************************/
.toolkit .carousel-inner > .item .place-hold-image-custom1 {
  height: 100%;
  width: 200px;
  margin-right: 30px;
  margin-bottom: 10px;
  background: url('../imagenes/carousel_3_custom1.jpg') no-repeat;
}
@media only screen and (max-width: 992px) {
  .toolkit .carousel-inner > .item .place-hold-image-custom1 {
    display: none;
  }
}


  /**********************************/
 /**** Carousel tipo 3 Custom 2 ****/
/**********************************/
.toolkit .carousel-inner > .item .place-hold-image-custom2 {
  height: 100%;
  width: 200px;
  margin-right: 30px;
  margin-bottom: 10px;
  background: url('../imagenes/carousel_3_custom2.jpg') no-repeat;
}
@media only screen and (max-width: 992px) {
  .toolkit .carousel-inner > .item .place-hold-image-custom2 {
    display: none;
  }
}


  /**********************************/
 /**** Carousel tipo 3 Custom 3 ****/
/**********************************/
.toolkit .carousel-inner > .item .place-hold-image {
  height: 100%;
  width: 200px;
  margin-right: 30px;
  margin-bottom: 10px;
  background: url('../imagenes/carousel_3_custom3.jpg') no-repeat;
}
@media only screen and (max-width: 992px) {
  .toolkit .carousel-inner > .item .place-hold-image {
    display: none;
  }
}


  /*************************/
 /**** Carousel tipo 4 ****/
/*************************/
.toolkit .carousel-bgimage-right-custom p, .toolkit .carousel-bgimage-right-custom h1{
  width: 100% !important;
}

@media only screen and (min-width: 600px) {
    .toolkit .carousel-bgimage-right-custom {
        background-size: 48% 100% !important;
        background-position: right 0px top !important;
        height: 100%; 
        margin-left: auto; 
        margin-right: auto; 
        padding: 40px 0px 40px 15px;
    }
    
    .toolkit .carousel-bgimage-right-custom p, .toolkit .carousel-bgimage-right-custom h1{
      width: 50% !important;
    }
    
    /*** Custom 1 ***/
    .toolkit .carousel-bgimage-right-custom1 {
        background: url('../imagenes/carousel_4_custom1.jpg') no-repeat transparent right;
    }

    /*** Custom 2 ***/
    .toolkit .carousel-bgimage-right-custom2 {
        background: url('../imagenes/carousel_4_custom2.jpg') no-repeat transparent right;
    }

    /*** Custom 3 ***/
    .toolkit .carousel-bgimage-right-custom3 {
        background: url('../imagenes/carousel_4_custom3.jpg') no-repeat transparent right;
    }

    /*** Custom 4 ***/
    .toolkit .carousel-bgimage-right-custom4 {
        background: url('../imagenes/carousel_4_custom4.jpg') no-repeat transparent right;
    }

    /*** Custom 5 ***/
    .toolkit .carousel-bgimage-right-custom5 {
        background: url('../imagenes/carousel_4_custom5.jpg') no-repeat transparent right;
    }

}

@media only screen and (max-width: 992px) {
    .toolkit .carousel-bgimage-right-custom {
      background-size: 40% 75% !important;
      background-position: right 35px top 50% !important;
    }
}
@media only screen and (max-width: 768px) {
    .toolkit .carousel-bgimage-right-custom {
      background-size: 40% 50% !important;
      background-position: right 25px top 50% !important;
    }
}
.toolkit .carousel-bgimage-right-custom h1,
.toolkit .carousel-bgimage-right-custom p {
  /*width: 650px;*/
  width: 50%;
  text-align: justify;
  /*margin-left: 100px;*/
}

@media (min-width: 768px) {
    .toolkit .carousel-bgimage-right-custom {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .toolkit .carousel-bgimage-right-custom {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .toolkit .carousel-bgimage-right-custom {
        width: 1170px;
    }
}




  /*********************/
 /**** Image Grids ****/
/*********************/

@media only screen and (min-width: 992px) {
    .centered-images{
        width: 100%;
    }
}

.centered-images .border{
    position:relative;
    float: left;
    width: 140px;
    height: 80px;
    margin: 0 0 20px;
    border-right: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
}

.centered-images .border img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

/***********************************************************************************/
.flecha_abajo{
    position: absolute;
    top:60px;left:0;
    background: url("/images/flecha_abajo.png") no-repeat center;
    width: 100%;
    height: 10px;
}

@keyframes anim_rotacion{
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    75% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.rotacion {
    animation-name: anim_rotacion;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


/** logo ***/
.toolkit .logo{
    margin-top: 0px;
    padding: 39px 0px 31px 0px;
}
.toolkit .logo>a{
    float:left;
}
.toolkit .logo>a>img{
    margin-right: 0px;
}
.toolkit .logo>div{
    left:-6px;
    position: relative;
}
.toolkit .logo>div>p{
    padding:0;
    margin:0;
}

/*** estilos header links **/

.top-header-links {
    position: inherit;
    width: 100%;
    color: #002c6c !important;
    z-index: 250;
}

.top-header-links a {
    color: #002c6c !important;
    font-weight: normal !important;
    font-size: 12px !important;
}

.top-header-links a.icon {
    font-size: 36px !important;
}


/** footer links **/
/** necesito override un padding-left de 30px**/
.footer-links{
    padding-left: 15px !important;
}