/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}
.no-js #loader-wrapper {
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #16a085;
  -webkit-animation: spin 1.7s linear infinite;
          animation: spin 1.7s linear infinite;
  z-index: 11;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin-reverse 0.6s linear infinite;
          animation: spin-reverse 0.6s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

.avi_estilo{
    position: relative;
    display: block;
    color: #f9c922;
    font-size: 45px;
    z-index: 11;
    left: 41%;
    top: 50%;
}

  .avi_estilo{
    animation: avi_animacion linear 2s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: avi_animacion linear 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: avi_animacion linear 2s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: avi_animacion linear 2s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: avi_animacion linear 2s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;
  }

  @keyframes avi_animacion{
    0% {
      transform:  translate(0px,0px);
    }
    10% {
      transform:  translate(-10px,0px);
    }
    20% {
      transform:  translate(10px,0px);
    }
    30% {
      transform:  translate(-10px,0px);
    }
    40% {
      transform:  translate(10px,0px);
    }
    50% {
      transform:  translate(-10px,0px);
    }
    60% {
      transform:  translate(10px,0px);
    }
    70% {
      transform:  translate(-10px,0px);
    }
    80% {
      transform:  translate(10px,0px);
    }
    90% {
      transform:  translate(-10px,0px);
    }
    100% {
      transform:  translate(0px,0px);
    }
  }

  @-moz-keyframes avi_animacion{
    0% {
      -moz-transform:  translate(0px,0px);
    }
    10% {
      -moz-transform:  translate(-10px,0px);
    }
    20% {
      -moz-transform:  translate(10px,0px);
    }
    30% {
      -moz-transform:  translate(-10px,0px);
    }
    40% {
      -moz-transform:  translate(10px,0px);
    }
    50% {
      -moz-transform:  translate(-10px,0px);
    }
    60% {
      -moz-transform:  translate(10px,0px);
    }
    70% {
      -moz-transform:  translate(-10px,0px);
    }
    80% {
      -moz-transform:  translate(10px,0px);
    }
    90% {
      -moz-transform:  translate(-10px,0px);
    }
    100% {
      -moz-transform:  translate(0px,0px);
    }
  }

  @-webkit-keyframes avi_animacion {
    0% {
      -webkit-transform:  translate(0px,0px);
    }
    10% {
      -webkit-transform:  translate(-10px,0px);
    }
    20% {
      -webkit-transform:  translate(10px,0px);
    }
    30% {
      -webkit-transform:  translate(-10px,0px);
    }
    40% {
      -webkit-transform:  translate(10px,0px);
    }
    50% {
      -webkit-transform:  translate(-10px,0px);
    }
    60% {
      -webkit-transform:  translate(10px,0px);
    }
    70% {
      -webkit-transform:  translate(-10px,0px);
    }
    80% {
      -webkit-transform:  translate(10px,0px);
    }
    90% {
      -webkit-transform:  translate(-10px,0px);
    }
    100% {
      -webkit-transform:  translate(0px,0px);
    }
  }


  @-ms-keyframes avi_animacion {
    0% {
      -ms-transform:  translate(0px,0px)  ;
    }
    10% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    20% {
      -ms-transform:  translate(10px,0px)  ;
    }
    30% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    40% {
      -ms-transform:  translate(10px,0px)  ;
    }
    50% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    60% {
      -ms-transform:  translate(10px,0px)  ;
    }
    70% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    80% {
      -ms-transform:  translate(10px,0px)  ;
    }
    90% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    100% {
      -ms-transform:  translate(0px,0px)  ;
    }
  }

  /* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (max-width: 767px) {
/* Styles */
  .avi_estilo{
    left: 18%;
    font-size: 35px;
  }
  #loader {
    width: 200px;
    height: 200px;
    margin: -140px 0 0 -80px;
    border: 10px solid transparent;
    border-top-color: #16a085;
  }

  #loader:before{
        top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 10px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
        top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 10px solid transparent;
    border-top-color: #f9c922;
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
  /* .avi_estilo{
  left: 37%;
    } */
    #loader{
      width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
    }
    #loader:before{

    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;

#loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922e;;
  }    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
  /* .avi_estilo{
  left: 37%;
    } */
    #loader{
      width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
    }
    #loader:before{
      top: 30px;
      left: 30px;
      right: 30px;
      bottom: 30px;
      border: 20px solid transparent;
      border-top-color: #e74c3c;
    }
    #loader:after {
        top: 70px;
        left: 70px;
        right: 70px;
        bottom: 70px;
        border: 20px solid transparent;
        border-top-color: #f9c922;
      }   
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
  .avi_estilo{
    left: 28%;
    font-size: 70px;
  }
  #loader{
    width: 300px;
    height: 300px;
    margin: -230px 0 0 -166px;
    border: 10px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 10px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 10px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
    .avi_estilo{
      left: 30%;
    }
    #loader{
    width: 200px;
    height: 200px;
    margin: -300px 0 0 -90px;
    border: 10px solid transparent;
    border-top-color: #16a085;
    }
    #loader:before{

      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border: 10px solid transparent;
      border-top-color: #e74c3c;
    }
  #loader:after {
      top: 50px;
      left: 50px;
      right: 50px;
      bottom: 50px;
      border: 10px solid transparent;
      border-top-color: #f9c922;
    }    
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
    .avi_estilo{
    left: 17%;
    font-size: 36px;
  }
  #loader{
    width: 150px;
    height: 150px;
    margin: -190px 0 0 -80px;
    border: 5px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 5px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    border: 5px solid transparent;
    border-top-color: #f9c922;
  }
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .avi_estilo{
    left: 18%;
    font-size: 100px;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
.avi_estilo{
    left: 16%;
  }
  #loader{
    width: 200px;
    height: 200px;
    margin: -170px 0 0 -110px;
    border: 10px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 10px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 10px solid transparent;
    border-top-color: #f9c922;
  }
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 200px;
    height: 200px;
    margin: -170px 0 0 -110px;
    border: 10px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 10px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 10px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
    .avi_estilo{
    left: 10%;
    font-size: 36px;
  }
  #loader{
       width: 150px;
    height: 150px;
    margin: -180px 0 0 -70px;
    border: 5px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 5px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    border: 5px solid transparent;
    border-top-color: #f9c922;
  }
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 600px;
    height: 600px;
    margin: -350px 0 0 -300px;
    border: 20px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 20px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
    border: 20px solid transparent;
    border-top-color: #f9c922;
  }
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .avi_estilo{
    left: 37%;
  }
  #loader{
    width: 200px;
    height: 200px;
    margin: -190px 0 0 -110px;
    border: 10px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 10px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 10px solid transparent;
    border-top-color: #f9c922;
  }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .avi_estilo{
    left: 17%;
    font-size: 36px;
  }
  #loader{
    width: 300px;
    height: 300px;
    margin: -260px 0 0 -150px;
    border: 10px solid transparent;
    border-top-color: #16a085;
  }
  #loader:before{
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 10px solid transparent;
    border-top-color: #e74c3c;
  }
  #loader:after {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 10px solid transparent;
    border-top-color: #f9c922;
  }
}