/**
 * Strona grupy smaków
    * W tym przypadku, .out.forward i .forward jest tym samym, ponieważ elementy wyjeżdżają w tym samym kierunku, z którego wjeżdżają nowe.
 */

 .forward.load_type_2  #flavor_group_container .title_container,
 .backward.load_type_2  #flavor_group_container .title_container,
 .left.load_type_2  #flavor_group_container .title_container,
 .out.load_type_2  #flavor_group_container .title_container{
     -webkit-transform: translateY(-300px);
         -ms-transform: translateY(-300px);
             transform: translateY(-300px);
     opacity: 0;
 }
 
 .forward.load_type_2  #flavor_group_container .description_container,
 .backward.load_type_2  #flavor_group_container .description_container,
 .left.load_type_2  #flavor_group_container .description_container,
 .out.load_type_2  #flavor_group_container .description_container{
     -webkit-transform: translateY(300px);
         -ms-transform: translateY(300px);
             transform: translateY(300px);
     opacity: 0;
 }
  
 
 
 
 
 /**
  * Strona konkretnego smaku
  */
 /*  ------------------ TO SAMO WYSTĘPUJE W LOAD_WHOLE_HTML_1.CSS ---------------------
 .delay_forward.load_type_2 #specific_flavor_container .title_container{
     transition-delay: 0s;
 }
 .delay_forward.load_type_2 #specific_flavor_container .description_container .first_column{
     transition-delay: 0.1s;
 }
 .delay_forward.load_type_2 #specific_flavor_container .description_container .second_column{
     transition-delay: 0.2s;
 }
 .delay_forward.load_type_2 #specific_flavor_container .description_container .flavor_navigation_container{
     transition-delay: 0.3s;
 }
 .delay_backward.load_type_2 #specific_flavor_container .title_container{
     transition-delay: 0.2s;
 }
 .delay_backward.load_type_2 #specific_flavor_container .description_container .first_column{
     transition-delay: 0.1s;
 }
 .delay_backward.load_type_2 #specific_flavor_container .description_container .second_column{
     transition-delay: 0s;
 }
 .delay_backward.load_type_2 #specific_flavor_container .description_container .flavor_navigation_container{
     transition-delay: 0s;
 } */
 
 
 
 
 /**
  * Strona konkretnego smaku
  * * Stylowanie butelki
  * * * Animacja wejścia / wyjścia 
  */
 
 .forward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
 .forward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
     -webkit-transform: translateY( calc(100vh + var(--bottle_top_offset) * -1 ) );
         -ms-transform: translateY( calc(100vh + var(--bottle_top_offset) * -1 ) );
             transform: translateY( calc(100vh + var(--bottle_top_offset) * -1 ) );
 }
 
 .out.backward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
 .out.backward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
    -webkit-transform: translateY( calc(100vh + var(--bottle_top_offset) * -1 ) );
        -ms-transform: translateY( calc(100vh + var(--bottle_top_offset) * -1 ) );
            transform: translateY( calc(100vh + var(--bottle_top_offset) * -1 ) );
 }
 
 .backward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
 .backward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
     -webkit-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
             transform: translateY(-100%);
 }
 
 .out.forward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
 .out.forward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
     -webkit-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
             transform: translateY(-100%);
 }
 
 .forward.load_type_2 #specific_flavor_container .specific_flavor_background .background_container .background,
 .out.backward.load_type_2 #specific_flavor_container .specific_flavor_background .background_container .background{
     opacity: 0;
 }
 
 .backward.load_type_2 #specific_flavor_container .specific_flavor_background .background_container .background,
 .out.forward.load_type_2 #specific_flavor_container .specific_flavor_background .background_container .background{
     opacity: 0;
 }
 
 .load_type_2.delay_forward #specific_flavor_container .specific_flavor_background .background_container .background,
 .load_type_2.delay_backward #specific_flavor_container .specific_flavor_background .background_container .background{
     -webkit-transition-delay: 1s;
          -o-transition-delay: 1s;
             transition-delay: 1s;
 }
 .load_type_2.delay_forward.out #specific_flavor_container .specific_flavor_background .background_container .background,
 .load_type_2.delay_backward.backward #specific_flavor_container .specific_flavor_background .background_container .background{
     -webkit-transition-delay: 0s;
          -o-transition-delay: 0s;
             transition-delay: 0s;
 }
 
 @media all and (max-width: 767px){
    .backward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
    .backward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
        -webkit-transform: translateY(-100vh);
            -ms-transform: translateY(-100vh);
                transform: translateY(-100vh);
    }
    
    .out.forward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
    .out.forward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
        -webkit-transform: translateY(-100vh);
            -ms-transform: translateY(-100vh);
                transform: translateY(-100vh);
    }
    .forward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
    .forward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
        -webkit-transform: translateY( 100vh );
            -ms-transform: translateY( 100vh );
                transform: translateY( 100vh );
    }
    
    .out.backward.load_type_2 #specific_flavor_container .specific_flavor_background img.mask,
    .out.backward.load_type_2 #specific_flavor_container .specific_flavor_background .mask_modifier{
       -webkit-transform: translateY( 100vh );
           -ms-transform: translateY( 100vh );
               transform: translateY( 100vh );
    }
 }