.animate_delay_1ms{
    animation-delay: .1s;
}
.animate_delay_2ms{
    animation-delay: .2s;
}
.animate_delay_5ms{
    animation-delay: .5s;
}
.animate_delay_6ms{
    animation-delay: .6s;
}
.animate_delay_7ms{
    animation-delay: .7s;
}
.animate_delay_8ms{
    animation-delay: .8s;
}
.animate_delay_9ms{
    animation-delay: .9s;
}
.animate_delay_1s{
    animation-delay: 1s;
}
.animate_delay_1_1s{
    animation-delay: 1.1s;
}
.animate_delay_1_2s{
    animation-delay: 1.2s;
}
.animate_delay_1_3s{
    animation-delay: 1.3s;
}
.animate_delay_1_4s{
    animation-delay: 1.4s;
}
.animate_delay_1_5s{
    animation-delay: 1.5s;
}
.animate_delay_1_8s{
    animation-delay: 1.8s;
}
.animate_delay_2s{
    animation-delay: 2s;
}


.animate_speed_5ms{
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}
.animate_speed_6ms{
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
}
.animate_speed_7ms{
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
}
.animate_speed_8ms{
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
}
.animate_speed_9ms{
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
}
.animate_speed_1s{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.animate_speed_1_5s{
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.animate_speed_2s{
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.animate_speed_2_5s{
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}

.animate_speed_20s{
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

.animation_opacity0{
    opacity: 0;
}


.animation_zoom{
    -webkit-animation-name: zoom;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-name: zoom;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
@-webkit-keyframes zoom{
    0%{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    100%{
        -webkit-transform:scale(1.3);
        transform:scale(1.3);
    }
}
@keyframes zoom{
    0%{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    100%{
        -webkit-transform:scale(1.3);
        transform:scale(1.3);
    }
}


.animation_slide_to_left{
    -webkit-animation-name: slide_to_left;
    animation-name: slide_to_left;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@-webkit-keyframes slide_to_left{
    0%{
        transform: translate(100%, 0px);
        -webkit-transform: translate(100%, 0px);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes slide_to_left{
    0%{
        transform: translate(100%, 0px);
        -webkit-transform: translate(100%, 0px);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

.animation_box_slide_to_right{
    -webkit-animation-name: box_slide_to_right;
    animation-name: box_slide_to_right;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    transform: translate(-200%, 0px);
    -webkit-transform: translate(-200%, 0px);
    -webkit-opacity: 0;
    opacity: 0;
}

@-webkit-keyframes box_slide_to_right{
    0%{
        transform: translate(-200%, 0px);
        -webkit-transform: translate(-200%, 0px);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes box_slide_to_right{
    0%{
        transform: translate(-200%, 0px);
        -webkit-transform: translate(-200%, 0px);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

.animation_slide_to_right{
    -webkit-animation-name: slide_to_right;
    animation-name: slide_to_right;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    transform: translate(-100%, 0px);
    -webkit-transform: translate(-100%, 0px);
    -webkit-opacity: 0;
    opacity: 0;
}

@-webkit-keyframes slide_to_right{
    0%{
        transform: translate(-100%, 0px);
        -webkit-transform: translate(-100%, 0px);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes slide_to_right{
    0%{
        transform: translate(-100%, 0px);
        -webkit-transform: translate(-100%, 0px);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

.animation_slide_to_top{
    -webkit-animation-name: slide_to_top;
    animation-name: slide_to_top;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@-webkit-keyframes slide_to_top{
    0%{
        transform: translate(0, 20%);
        -webkit-transform: translate(0, 20%);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0, 0%);
        -webkit-transform: translate(0, 0%);
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes slide_to_top{
    0%{
        transform: translate(0, 20%);
        -webkit-transform: translate(0,20%);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

.animation_slide_to_bottom{
    -webkit-animation-name: slide_to_bottom;
    animation-name: slide_to_bottom;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@-webkit-keyframes slide_to_bottom{
    0%{
        transform: translate(0, -100%);
        -webkit-transform: translate(0, -100%);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0, 0%);
        -webkit-transform: translate(0, 0%);
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes slide_to_bottom{
    0%{
        transform: translate(0, -100%);
        -webkit-transform: translate(0, -100%);
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

.animation_fade_in{
    -webkit-animation-name: fade_in;
    animation-name: fade_in;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fade_in{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes fade_in{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
    }
    100%{
        -webkit-opacity: 1;
        opacity: 1;
    }
}


.animation_width_slide{
    -webkit-animation-name: width_slide;
    animation-name: width_slide;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}


@-webkit-keyframes width_slide{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
        -webkit-width: 0;
        width: 0;
        
    }
    100%{
        -webkit-opacity: 1;
        opacity: 1;
        -webkit-width: 35%;
        width: 35%;
    }
}
@keyframes width_slide{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
        -webkit-width: 0;
        width: 0;
    }
    100%{
        -webkit-opacity: 1;
        opacity: 1;
        -webkit-width: 35%;
        width: 35%;
    }
}

.animation_hover_zoom{
    position: relative;
    overflow: hidden;
}
.animation_hover_zoom:hover > img {
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.animation_hover_zoom > img{
    width: 100%;
    height: auto;
    -webkit-backface-visibility: hidden;
    -o-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
}

@-webkit-keyframes zoom{
    0%{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    100%{
        -webkit-transform:scale(1.3);
        transform:scale(1.3);
    }
}
@keyframes zoom{
    0%{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    100%{
        -webkit-transform:scale(1.3);
        transform:scale(1.3);
    }
}



.animation_box_display{
    width: 0;
    opacity: 0;
    overflow: hidden;
    animation:  expandWidth 1s .5s forwards;
}
@-webkit-keyframes expandWidth{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
        -webkit-width: 0;
        width: 0;
        padding:0
    }
    100%{
        -webkit-width: 35%;
        width: 35%;
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes expandWidth{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
        -webkit-width: 0;
        width: 0;
    }
    100%{
        -webkit-width: 35%;
        width: 35%;
        -webkit-opacity: 1;
        opacity: 1;
    }
}







.animation_box_display{
    width: 0;
    opacity: 0;
    overflow: hidden;
    animation:  expandWidth 1s .5s forwards;
}
@-webkit-keyframes expandWidth{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
        -webkit-width: 0;
        width: 0;
        padding:0
    }
    100%{
        -webkit-width: 35%;
        width: 35%;
        -webkit-opacity: 1;
        opacity: 1;
    }
}
@keyframes expandWidth{
    0%{
        -webkit-opacity: 0;
        opacity: 0;
        -webkit-width: 0;
        width: 0;
    }
    100%{
        -webkit-width: 35%;
        width: 35%;
        -webkit-opacity: 1;
        opacity: 1;
    }
}




.animation_pop_in{
    -webkit-animation-name: pop_in;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-direction: alternate;
    animation-name: pop_in;
    animation-timing-function: linear;
    animation-iteration-count: 10;
    animation-direction: alternate;
}
@-webkit-keyframes pop_in{
    0%{
        transform:scale(0.8);
    }
    50%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.1);
    }
}
@keyframes pop_in{
    0%{
        transform:scale(.8);
    }
    50%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.1);
    }
}


/* Bouncing entrances  */

.animate_bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
  }
@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }



  /*==========  Mobile First Method  ==========*/

@media only screen and (max-width : 320px) and (min-width : 200px) {
    @-webkit-keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
            padding:0
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
    @keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
}
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 480px) and (min-width : 320px) {
    @-webkit-keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
            padding:0
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
    @keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 768px) and (min-width : 480px) {
    @-webkit-keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
            padding:0
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
    @keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 992px) and (min-width : 768px) {
    @-webkit-keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
            padding:0
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
    @keyframes expandWidth{
        0%{
            -webkit-opacity: 0;
            opacity: 0;
            -webkit-width: 0;
            width: 0;
        }
        100%{
            -webkit-width: 75%;
            width: 75%;
            -webkit-opacity: 1;
            opacity: 1;
        }
    }
}

/* Medium Devices, Desktops */
@media (max-width:999px)and (min-width: 992px) {   

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    
}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}