/*----All tranistions----*/

/*---- INTRO ----*/
.intro-js {
    background: #071d49;
}
.intro-js h1,
.intro-js .discover{
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    -ms-transform: translate3d(0, 30px, 0);
            transform: translate3d(0, 30px, 0);  

    -webkit-transition: opacity 800ms ease-out 500ms, -webkit-transform 800ms ease-out 500ms;  
    transition: opacity 800ms ease-out 500ms, -webkit-transform 800ms ease-out 500ms;  
    -o-transition: opacity 800ms ease-out 500ms, transform 800ms ease-out 500ms;  
    transition: opacity 800ms ease-out 500ms, transform 800ms ease-out 500ms;  
    transition: opacity 800ms ease-out 500ms, transform 800ms ease-out 500ms, -webkit-transform 800ms ease-out 500ms;  

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.intro-js .line,
.intro-js p {
    opacity: 0;  
    -webkit-transform: translate3d(0, 10px, 0);  
            transform: translate3d(0, 10px, 0);  

    -webkit-transition: opacity 800ms ease-out 1000ms, -webkit-transform 800ms ease-out 1000ms;  
    transition: opacity 800ms ease-out 1000ms, -webkit-transform 800ms ease-out 1000ms;  
    -o-transition: opacity 800ms ease-out 1000ms, transform 800ms ease-out 1000ms;  
    transition: opacity 800ms ease-out 1000ms, transform 800ms ease-out 1000ms;  
    transition: opacity 800ms ease-out 1000ms, transform 800ms ease-out 1000ms, -webkit-transform 800ms ease-out 1000ms;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.intro-js .discover { 
    -webkit-transition-delay: 1600ms; 
         -o-transition-delay: 1600ms; 
            transition-delay: 1600ms;
}

.intro-js.intro-start h1 ,
.intro-js.intro-start .line ,
.intro-js.intro-start p ,
.intro-js.intro-start .discover {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 
    opacity: 1;
}
.zoomingVideo.zoom1 {
    -webkit-transform: scale3d(.9,.9,.9);
    -ms-transform: scale3d(.9,.9,.9);
    -o-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
    -webkit-transition: 700ms;
    -ms-transition: 700ms;
    transition: 700ms;
}  
.zoomingVideo.zoom1.start {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    -o-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}  
/*---- INTRO ----*/
@media screen and (min-width: 768px) {
/*---- Common Story ----*/
.imgSlideTop {
    opacity: 0;
    -webkit-transform: translate3d(0, 60px, 0);
    -ms-transform: translate3d(0, 60px, 0);
            transform: translate3d(0, 60px, 0); 

    -webkit-transition: opacity 500ms ease-out, -webkit-transform 600ms ease-out; 
    transition: opacity 500ms ease-out, -webkit-transform 600ms ease-out; 
    -o-transition: opacity 500ms ease-out, transform 600ms ease-out; 
    transition: opacity 500ms ease-out, transform 600ms ease-out; 
    transition: opacity 500ms ease-out, transform 600ms ease-out, -webkit-transform 600ms ease-out; 

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.commonStory-js [class^="col-"] {
    opacity: 0;  
    -webkit-transform: translate3d(0, 20px, 0);  
    -ms-transform: translate3d(0, 20px, 0);  
            transform: translate3d(0, 20px, 0);  

    -webkit-transition: opacity 600ms ease-out 500ms, -webkit-transform 600ms ease-out 500ms;  
    transition: opacity 600ms ease-out 500ms, -webkit-transform 600ms ease-out 500ms;  
    -o-transition: opacity 600ms ease-out 500ms, transform 600ms ease-out 500ms;  
    transition: opacity 600ms ease-out 500ms, transform 600ms ease-out 500ms;  
    transition: opacity 600ms ease-out 500ms, transform 600ms ease-out 500ms, -webkit-transform 600ms ease-out 500ms;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

/*---- Common Story ----*/

/*---- Common Anim ----*/
.artBg-anim {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 50px, 0);
    -ms-transform: translate3d(-50%, 50px, 0);
    transform: translate3d(-50%, 50px, 0); 

    -webkit-transition: opacity 750ms ease, -webkit-transform 750ms ease;   
    transition: opacity 750ms ease, -webkit-transform 750ms ease;   
    -o-transition: opacity 750ms ease, transform 750ms ease;   
    transition: opacity 750ms ease, transform 750ms ease;   
    transition: opacity 750ms ease, transform 750ms ease, -webkit-transform 750ms ease; 
}
.commonAnim-js [class^="col-"] {
    opacity: 0;  
    -webkit-transform: translate3d(0, 20px, 0); 
    -ms-transform: translate3d(0, 20px, 0);  
            transform: translate3d(0, 20px, 0);  

    -webkit-transition: opacity 600ms ease-out 0ms, -webkit-transform 600ms ease-out 0ms; 
    transition: opacity 600ms ease-out 0ms, -webkit-transform 600ms ease-out 0ms;  
    -o-transition: opacity 600ms ease-out 0ms, transform 600ms ease-out 0ms;  
    transition: opacity 600ms ease-out 0ms, transform 600ms ease-out 0ms;  
    transition: opacity 600ms ease-out 0ms, transform 600ms ease-out 0ms, -webkit-transform 600ms ease-out 0ms;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.start.artBg-anim {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);    
} 
.page-art.artmid.start {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);      
}

.commonAnim-js .mashbills-contents {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in 750ms;
    -o-transition: opacity 500ms ease-in 750ms;
    transition: opacity 500ms ease-in 750ms;
}
.commonAnim-js.start .mashbills-contents {
    opacity: 1;
}

/*---- Common Anim ----*/

/*---- Pinning Animation ----*/
.history-grain_hidden .columns ,
.slideUp {
    -webkit-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
            transform: translate3d(0, 50px, 0); 
    opacity: 0;

    -webkit-transition: opacity 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 700ms ease, -webkit-transform 700ms ease;
    -o-transition: opacity 700ms ease, transform 700ms ease;
    transition: opacity 700ms ease, transform 700ms ease;
    transition: opacity 700ms ease, transform 700ms ease, -webkit-transform 700ms ease;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.slideUpImg {
    -webkit-transform: translate3d(0, 70px, 0);
    -ms-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0); 
    opacity: 0;

    -webkit-transition: opacity 1000ms ease-out, -webkit-transform 1200ms ease-out;
    transition: opacity 1000ms ease-out, -webkit-transform 1200ms ease-out;
    -o-transition: opacity 1000ms ease-out, transform 1200ms ease-out;
    transition: opacity 1000ms ease-out, transform 1200ms ease-out;
    transition: opacity 1000ms ease-out, transform 1200ms ease-out, -webkit-transform 1200ms ease-out;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.history-grain_hidden .art-bgs_left ,
.history-grain_hidden .art-bgs_right { 
    -webkit-transform: translate3d(0, -45%, 0);
    -ms-transform: translate3d(0, -45%, 0);
            transform: translate3d(0, -45%, 0); 
}

.history-grain_hidden .art-bgs_right ,
.history-grain_hidden .art-bgs_left {
    opacity: 0;
    
    -webkit-transition: opacity 700ms ease, -webkit-transform 700ms ease;    
    transition: opacity 700ms ease, -webkit-transform 700ms ease;    
    -o-transition: opacity 700ms ease, transform 700ms ease;    
    transition: opacity 700ms ease, transform 700ms ease;    
    transition: opacity 700ms ease, transform 700ms ease, -webkit-transform 700ms ease;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.history-grain_hidden.start .art-bgs_right,
.history-grain_hidden.start .art-bgs_left {
    -webkit-transform: translate3d(0,-50%, 0);
    -ms-transform: translate3d(0,-50%, 0);
            transform: translate3d(0,-50%, 0);
    opacity: 1;
}

.h1 .leftVsliderInner{
    height: 25%;
}
.h2 .leftVsliderInner{
    height: 50%;
}
.h3 .leftVsliderInner{
    height: 75%;
}
.h4 .leftVsliderInner{
    height: 100%;
    height: calc(100% - -10px);
}


.barrel-making-steps .h1 .leftVsliderInner,
.historyGrain1 .h1 .leftVsliderInner {
    height: 16.6666%;
}
.barrel-making-steps .h2 .leftVsliderInner,
.historyGrain1 .h2 .leftVsliderInner {
    height: 33.3332%;
}
.barrel-making-steps .h3 .leftVsliderInner,
.historyGrain1 .h3 .leftVsliderInner {
    height: 49.9998%;
}
.barrel-making-steps .h4 .leftVsliderInner,
.historyGrain1 .h4 .leftVsliderInner {
    height: 66.6664%;
}
.barrel-making-steps .h5 .leftVsliderInner,
.historyGrain1 .h5 .leftVsliderInner {
    height: 83.333%;
}
.barrel-making-steps .h6 .leftVsliderInner,
.historyGrain1 .h6 .leftVsliderInner {
    height: 100%;
    height: calc(100% - -10px);
}

.mashbillAnim .h1 .leftVsliderInner{
    height: 33.33vh;
}
.mashbillAnim .h2 .leftVsliderInner{
    height: 66.66vh;
}
.mashbillAnim .h3 .leftVsliderInner{
    height: 100%;
    height: calc(100% - -10px);
}


/*---- Pinning Animation ----*/

/*---- Map ----*/
.mapwotrail .mapImgAnim {
    -webkit-transform: translate3d(-50%, 0 , 0) scale3d(1.6, 1.6, 1);
    -ms-transform: translate3d(-50%, 0 , 0) scale3d(1.6, 1.6, 1);
            transform: translate3d(-50%, 0 , 0) scale3d(1.6, 1.6, 1);

    -webkit-transition: -webkit-transform 2400ms;
    transition: -webkit-transform 2400ms;
    -o-transition: transform 2400ms;
    transition: transform 2400ms;
    transition: transform 2400ms, -webkit-transform 2400ms;

    will-change: transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.mapwotrail.start .mapImgAnim {
    -webkit-transform: translate3d(-50%, 0 , 0)  scale3d(1, 1, 1);
    -ms-transform: translate3d(-50%, 0 , 0)  scale3d(1, 1, 1);
            transform: translate3d(-50%, 0 , 0)  scale3d(1, 1, 1);
}

.mapwotrail .map-info_tab,
.mapHasTrail .map-info_tab {
    opacity: 0;
    transform: translate3d(0,30px,0);

    transition: opacity 700ms ease-out 1600ms, transform 700ms ease-out 1600ms;
}

.mapHasTrail .map-info_tab {
    -webkit-transition-delay: 3600ms;
         -o-transition-delay: 3600ms;
            transition-delay: 3600ms;
}

.mapwotrail.start .map-info_tab,
.mapHasTrail.start .map-info_tab {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.trail {
    opacity: 0;
    -webkit-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

.start .trail {
    opacity: 1;
}

.mapHasTrail .mapOverlay{
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1);
    will-change: transform,opacity;

    -webkit-transition: opacity 1000ms ease 3500ms, -webkit-transform 2000ms ease 1500ms;
    transition: opacity 1000ms ease 3500ms, -webkit-transform 2000ms ease 1500ms;
    -o-transition: transform 2000ms ease 1500ms, opacity 1000ms ease 3500ms;
    transition: transform 2000ms ease 1500ms, opacity 1000ms ease 3500ms;
    transition: transform 2000ms ease 1500ms, opacity 1000ms ease 3500ms, -webkit-transform 2000ms ease 1500ms;

    opacity: 1;

    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
}

.mapHasTrail.start .mapOverlay{
    -webkit-transform: scale3d(1.5,1.5,1);
    -ms-transform: scale3d(1.5,1.5,1);
            transform: scale3d(1.5,1.5,1);

    opacity: 0;

    -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
}
.mapHasTrail.start .mapOverlay.backwards {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.agingSection {
    -webkit-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
            transform: translate3d(0, 50px, 0); 
    opacity: 0;

    -webkit-transition: opacity 600ms ease-out, -webkit-transform 600ms ease-out;
    transition: opacity 600ms ease-out, -webkit-transform 600ms ease-out;
    -o-transition: opacity 600ms ease-out, transform 600ms ease-out;
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    transition: opacity 600ms ease-out, transform 600ms ease-out, -webkit-transform 600ms ease-out;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.aging-timeline.lineAnim::before {
    height: 0%;
    -webkit-transition: height 3000ms;
    -o-transition: height 3000ms;
    transition: height 3000ms;
}

.aging-timeline.lineAnim.lineStart::before {
    height: 100%;
}

.commonStory-js.start h2 ,
.commonStory-js.start .line ,
.commonStory-js.start p ,
.commonStory-js.start .imgSlideTop ,

.commonAnim-js.start [class^="col-"] ,

.history-grain_hidden.start .columns ,
.start .slideUp ,
.start .slideUpImg ,
.agingSection.start ,
.lineAnim .inposition .tl-copies {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 
    opacity: 1;
}

.lineAnim .tl-copies {
    -webkit-transform: translate3d(0, 70px, 0);
    -ms-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0); 
    opacity: 0;

    -webkit-transition: opacity 600ms ease-in, -webkit-transform 600ms ease-out;
    transition: opacity 600ms ease-in, -webkit-transform 600ms ease-out;
    -o-transition: opacity 600ms ease-in, transform 600ms ease-out;
    transition: opacity 600ms ease-in, transform 600ms ease-out;
    transition: opacity 600ms ease-in, transform 600ms ease-out, -webkit-transform 600ms ease-out;

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

}
@media screen and (min-width: 768px) and (max-width: 991px) {
.mapHasTrail .mapOverlay {
    left: 33%;
}    
}

@media screen and (max-width: 767px) {

.imgSlideTop {
    opacity: 0;
    -webkit-transform: translate3d(0, 60px, 0);
    -ms-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0); 

    -webkit-transition: opacity 500ms ease-out, -webkit-transform 500ms ease-out; 
    transition: opacity 500ms ease-out, -webkit-transform 500ms ease-out; 
    -o-transition: opacity 500ms ease-out, transform 500ms ease-out; 
    transition: opacity 500ms ease-out, transform 500ms ease-out; 
    transition: opacity 500ms ease-out, transform 500ms ease-out, -webkit-transform 500ms ease-out; 

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
} 

.commonAnim-js [class^="col-"] ,
.commonStory-js h2, 
.commonStory-js .line, 
.commonStory-js p {
    opacity: 0;  
    -webkit-transform: translate3d(0, 20px, 0);  
    -ms-transform: translate3d(0, 20px, 0);  
    transform: translate3d(0, 20px, 0);  

    -webkit-transition: opacity 500ms ease-out 0ms, -webkit-transform 500ms ease-out 0ms;  
    transition: opacity 500ms ease-out 0ms, -webkit-transform 500ms ease-out 0ms;  
    -o-transition: opacity 500ms ease-out 0ms, transform 500ms ease-out 0ms;  
    transition: opacity 500ms ease-out 0ms, transform 500ms ease-out 0ms;  
    transition: opacity 500ms ease-out 0ms, transform 500ms ease-out 0ms, -webkit-transform 500ms ease-out 0ms;  

    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.commonStory-js.start h2 ,
.commonStory-js.start .line ,
.commonStory-js.start p ,
.commonStory-js.start .imgSlideTop ,
.commonAnim-js.start [class^="col-"]  {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
    opacity: 1;
} 

}

@media screen and (min-width: 1680px) and (min-height: 1050px) {

    .map-info_tab ,
    .mapwotrail.start .map-info_tab,
    .mapHasTrail.start .map-info_tab {
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }  

    .mapwotrail .map-info_tab,
    .mapHasTrail .map-info_tab {
        -webkit-transform: translate3d(100%, -50%, 0);
        -ms-transform: translate3d(100%, -50%, 0);
        transform: translate3d(100%, -50%, 0);
    }  

}
@media screen and (min-width: 1440px) and (max-width: 1679px) and (min-height: 850px) {

    .map-info_tab ,
    .mapwotrail.start .map-info_tab,
    .mapHasTrail.start .map-info_tab {
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }  

    .mapwotrail .map-info_tab,
    .mapHasTrail .map-info_tab {
        -webkit-transform: translate3d(100%, -50%, 0);
        -ms-transform: translate3d(100%, -50%, 0);
        transform: translate3d(100%, -50%, 0);
    }  

}
@media screen and (min-width: 1180px) and (max-width: 1439px) and (min-height: 720px) {

    .map-info_tab ,
    .mapwotrail.start .map-info_tab,
    .mapHasTrail.start .map-info_tab {
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }  

    .mapwotrail .map-info_tab,
    .mapHasTrail .map-info_tab {
        -webkit-transform: translate3d(100%, -50%, 0);
        -ms-transform: translate3d(100%, -50%, 0);
        transform: translate3d(100%, -50%, 0);
    }  

}

@media screen and (min-width: 768px) and (max-width: 1179px) and (min-height: 540px) {

    .map-info_tab ,
    .mapwotrail.start .map-info_tab,
    .mapHasTrail.start .map-info_tab {
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }  

    .mapwotrail .map-info_tab,
    .mapHasTrail .map-info_tab {
        -webkit-transform: translate3d(0, -45%, 0);
        -ms-transform: translate3d(0, -45%, 0);
        transform: translate3d(0, -45%, 0);
    }  

}


/*----All tranistions----*/