/*animacje*/

.scale-in-ver-top {
        -webkit-animation: scale-in-ver-top 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    animation: scale-in-ver-top 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        
        @-webkit-keyframes scale-in-ver-top {
            0% {
            
            opacity: 0;
            }
            100% {
            
            opacity: 1;
            }
            }
            @keyframes scale-in-ver-top {
            0% {
            opacity: 0;
            }
            100% {
            
            opacity: 1;
            }
        }







.scale-in-ver-left {
    -webkit-animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    @keyframes scale-in-ver-left {
        0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
        }
        25% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    
        width: 5px;
        }
    
        55%{
            top:25vh;
        width: 95vw;
        }
        70% {
        height: 60vh;
        top: 25vh
        }
        100% {
        width: 60px;
        height: 70px;
        top: 0;
    
        }
        
        
}
@media only screen and (min-width: 320px) and (orientation: landscape) {
        .scale-in-ver-left {
                        -webkit-animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                                animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                        }
                        @keyframes scale-in-ver-left {
                            0% {
                            -webkit-transform: scaleY(0);
                            transform: scaleY(0);
                            -webkit-transform-origin: 100% 0%;
                            transform-origin: 100% 0%;
                            opacity: 1;
                            }
                            25% {
                            -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                            -webkit-transform-origin: 100% 0%;
                            transform-origin: 100% 0%;
                            opacity: 1;
                        
                            width: 5px;
                            }
                        
                            55%{
                                top:10vh;
                            width: 60vw;
                            }
                            70% {
                            height: 90vh;
                            top: 10vh
                            }
                            100% {
                                width: 60px;
                                height: 70px;
                                top: 0;
                            }
                            
                            
                        }
               

}
        
@media only screen and (min-width: 760px) and (orientation: portrait) {
                .scale-in-ver-left {
                                -webkit-animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                                        animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                                }
                                @keyframes scale-in-ver-left {
                                    0% {
                                    -webkit-transform: scaleY(0);
                                    transform: scaleY(0);
                                    -webkit-transform-origin: 100% 0%;
                                    transform-origin: 100% 0%;
                                    opacity: 1;
                                    }
                                    25% {
                                    -webkit-transform: scaleY(1);
                                    transform: scaleY(1);
                                    -webkit-transform-origin: 100% 0%;
                                    transform-origin: 100% 0%;
                                    opacity: 1;
                                
                                    width: 5px;
                                    }
                                
                                    55%{
                                        top:30vh;
                                        width: 90vw;
                                        height: 60vh;
                                    }
                                    80%{
                                        top:30vh;
                                        height: 60vh;
                                    }
                                 
                                    100% {
                                        width: 60px;
                                        height: 70px;
                                        top: 0;
                                    }
                                    
                                    
                                }
                       
        
}








.photo-hidden {
            -webkit-animation: photo-hidden 0.5s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    animation: photo-hidden 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        
        @-webkit-keyframes photo-hidden {
            0% {
            
            opacity: 0;
            }
            100% {
            
            opacity: 1;
            }
            }
            @keyframes photo-hidden {
            0% {
            opacity: 0;
            }
            100% {
            
            opacity: 1;
            }
        }
        .photoHidden {
            opacity: 0;
        }
        .team-photo {
            -webkit-animation: team-photo 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    animation: team-photo 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
            @keyframes team-photo {
               
                25% {
                
                opacity: 1;
            
                width: 2px;
                }
            
                35%{
                height: 100%;
                
                }
                50% {
                    width: 100%;
        
                }
               
                
                100% {
                width: 0;
                height: 100%;
                }
            }
           
        
            .photo-hidden {
                -webkit-animation: photo-hidden 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                        animation: photo-hidden 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
            
            @-webkit-keyframes photo-hidden {
                0% {
                
                opacity: 0;
                }
                100% {
                
                opacity: 1;
                }
                }
                @keyframes photo-hidden {
                0% {
                opacity: 0;
                }
                100% {
                
                opacity: 1;
                }
            }
            .photoHidden {
                opacity: 0;
            }
            
        .text-top {
            -webkit-animation: text-top 1s  cubic-bezier(.445,.05,.55,.95) both;
                    animation: text-top 1s  cubic-bezier(.445,.05,.55,.95) both;
        }
        
        @-webkit-keyframes text-top {
            0% {
            -webkit-transform: translateY(100px);
                    transform: translateY(100px);
            }
            100% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
            }
        }
        @keyframes text-top {
            0% {
            -webkit-transform: translateY(100px);
                    transform: translateY(100px);
                    opacity: 0;
            }
        
            100% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
                    opacity: 1;
            }
        }
        .textTop {
            opacity: 0;
        }
        .name-animation {
            -webkit-animation: name-animation 1.3s 0.3s  cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
                animation: name-animation 1.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        }
           
        @-webkit-keyframes name-animation {
            0% {
              letter-spacing: 1em;
              -webkit-transform: translateZ(400px);
                      transform: translateZ(400px);
              opacity: 0;
            }
            40% {
              opacity: 0.6;
            }
            100% {
              -webkit-transform: translateZ(0);
                      transform: translateZ(0);
              opacity: 1;
            }
          }
          @keyframes name-animation {
            0% {
              letter-spacing: 0.3em;
              -webkit-transform: translateZ(400px);
                      transform: translateZ(400px);
              opacity: 0;
            }
            40% {
              opacity: 0.6;
            }
            100% {
              -webkit-transform: translateZ(0);
                      transform: translateZ(0);
              opacity: 1;
            }
          }
        
          .name {
              opacity: 0;
          }
        
        .description-animation {
                -webkit-animation: description-animation 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                        animation: description-animation 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        
         @-webkit-keyframes description-animation {
            0% {
              -webkit-transform: translateY(20px);
                      transform: translateY(20px);
                opacity: 0;
            }
            100% {
              -webkit-transform: translateY(0);
                      transform: translateY(0);
                opacity: 1;
            }
          }
          @keyframes description-animation {
            0% {
              -webkit-transform: translateY(20px);
                      transform: translateY(20px);
                opacity: 0;
            }
            100% {
              -webkit-transform: translateY(0);
                      transform: translateY(0);
                opacity: 1;
            }
          }
        
          .scale-line {
                -webkit-animation: scale-line 0.5s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                        animation: scale-line 0.5s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }
        
         @-webkit-keyframes scale-line {
            0% {
              -webkit-transform: scaleX(0);
                      transform: scaleX(0);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
            }
            100% {
              -webkit-transform: scaleX(1);
                      transform: scaleX(1);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
            }
          }
          @keyframes scale-line {
            0% {
              -webkit-transform: scaleX(0);
                      transform: scaleX(0);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
            }
            100% {
              -webkit-transform: scaleX(1);
                      transform: scaleX(1);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
            }
          }
        
          
          
          .squer-animation
           {
            -webkit-animation: squer-animation 0.7s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    animation: squer-animation 0.7s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        
        
        
         @-webkit-keyframes squer-animation {
            0% {
              -webkit-transform: scale(0);
                      transform: scale(0);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
                      
            }
            100% {
              -webkit-transform: scale(1);
                      transform: scale(1);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
            }
          }
          @keyframes squer-animation {
            0% {
              -webkit-transform: scale(0);
                      transform: scale(0);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
            }
            100% {
              -webkit-transform: scale(1);
                      transform: scale(1);
              -webkit-transform-origin: 0% 0%;
                      transform-origin: 0% 0%;
                      opacity: 1;
            }
          }
          
          .squeranimation {
              opacity: 0;
          }
         
          @media screen and (min-width: 1100px) {
        
            .name-animation {
                -webkit-animation: name-animation 1.3s 0.3s  cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
                    animation: name-animation 1.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
            }
               
            @-webkit-keyframes name-animation {
                0% {
                  letter-spacing: 1em;
                  -webkit-transform: translateZ(400px);
                          transform: translateZ(400px);
                  opacity: 0;
                }
                40% {
                  opacity: 0.6;
                }
                100% {
                  -webkit-transform: translateZ(0);
                          transform: translateZ(0);
                  opacity: 1;
                }
              }
              @keyframes name-animation {
                0% {
                  letter-spacing: 0.7em;
                  -webkit-transform: translateZ(400px);
                          transform: translateZ(400px);
                  opacity: 0;
                }
                40% {
                  opacity: 0.6;
                }
                100% {
                  -webkit-transform: translateZ(0);
                          transform: translateZ(0);
                  opacity: 1;
                }
              }
            
              .name {
                  opacity: 0;
              }
        
        
        
          }




@media screen and (min-width: 997px) {
    
    .scale-in-ver-top {
        -webkit-animation: scale-in-ver-top 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: scale-in-ver-top 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    @-webkit-keyframes scale-in-ver-top {
        0% {
        
        opacity: 0;
        }
        100% {
        
        opacity: 1;
        }
        }
        @keyframes scale-in-ver-top {
        0% {
        opacity: 0;
        }
        100% {
        
        opacity: 1;
        }
    }
    
    .photo-hidden {
        -webkit-animation: photo-hidden 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: photo-hidden 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    @-webkit-keyframes photo-hidden {
        0% {
        
        opacity: 0;
        }
        100% {
        
        opacity: 1;
        }
        }
        @keyframes photo-hidden {
        0% {
        opacity: 0;
        }
        100% {
        
        opacity: 1;
        }
    }
    .photoHidden {
        opacity: 0;
    }
    
    
    
    .scale-in-ver-left {
    -webkit-animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-in-ver-left 2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    @keyframes scale-in-ver-left {
        0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
        }
        25% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    
        width: 10px;
        }
    
        55%{
        width: 60vw;
        }
        70% {
        height: 80vh;
        top: 10vh
        }
        90%{
        top:10vh;
    
        }
        100% {
        width: 60px;
        height: 50%;
        top: 0;
    
        }
    }
    .team-photo {
        -webkit-animation: team-photo 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: team-photo 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        @keyframes team-photo {
           
            25% {
            
            opacity: 1;
        
            width: 2px;
            }
        
            35%{
            height: 100%;
            
            }
            50% {
                width: 100%;
    
            }
           
            
            100% {
            width: 0;
            height: 100%;
            }
        }
       
    
        .photo-hidden {
            -webkit-animation: photo-hidden 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    animation: photo-hidden 0.3s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        
        @-webkit-keyframes photo-hidden {
            0% {
            
            opacity: 0;
            }
            100% {
            
            opacity: 1;
            }
            }
            @keyframes photo-hidden {
            0% {
            opacity: 0;
            }
            100% {
            
            opacity: 1;
            }
        }
        .photoHidden {
            opacity: 0;
        }
        
    .text-top {
        -webkit-animation: text-top 1s  cubic-bezier(.445,.05,.55,.95) both;
                animation: text-top 1s  cubic-bezier(.445,.05,.55,.95) both;
    }
    
    @-webkit-keyframes text-top {
        0% {
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
        }
        100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        }
    }
    @keyframes text-top {
        0% {
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
                opacity: 0;
        }
    
        100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
        }
    }
    .textTop {
        opacity: 0;
    }
    .name-animation {
        -webkit-animation: name-animation 1.3s 0.3s  cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
            animation: name-animation 1.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }
       
    @-webkit-keyframes name-animation {
        0% {
          letter-spacing: 1em;
          -webkit-transform: translateZ(400px);
                  transform: translateZ(400px);
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
        100% {
          -webkit-transform: translateZ(0);
                  transform: translateZ(0);
          opacity: 1;
        }
      }
      @keyframes name-animation {
        0% {
          letter-spacing: 0.3em;
          -webkit-transform: translateZ(400px);
                  transform: translateZ(400px);
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
        100% {
          -webkit-transform: translateZ(0);
                  transform: translateZ(0);
          opacity: 1;
        }
      }
    
      .name {
          opacity: 0;
      }
    
    .description-animation {
        -webkit-animation: description-animation 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: description-animation 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
     @-webkit-keyframes description-animation {
        0% {
          -webkit-transform: translateY(20px);
                  transform: translateY(20px);
            opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
            opacity: 1;
        }
      }
      @keyframes description-animation {
        0% {
          -webkit-transform: translateY(20px);
                  transform: translateY(20px);
            opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
            opacity: 1;
        }
      }
    
      .scale-line {
        -webkit-animation: scale-line 0.5s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: scale-line 0.5s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    
     @-webkit-keyframes scale-line {
        0% {
          -webkit-transform: scaleX(0);
                  transform: scaleX(0);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
        }
        100% {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
        }
      }
      @keyframes scale-line {
        0% {
          -webkit-transform: scaleX(0);
                  transform: scaleX(0);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
        }
        100% {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
        }
      }
    
      
      
      .squer-animation
       {
        -webkit-animation: squer-animation 0.7s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: squer-animation 0.7s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    
    
     @-webkit-keyframes squer-animation {
        0% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
                  
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
        }
      }
      @keyframes squer-animation {
        0% {
          -webkit-transform: scale(0);
                  transform: scale(0);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: 0% 0%;
                  transform-origin: 0% 0%;
                  opacity: 1;
        }
      }
      
      .squeranimation {
          opacity: 0;
      }
     
      @media screen and (min-width: 1100px) {
    
        .name-animation {
            -webkit-animation: name-animation 1.3s 0.3s  cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
                animation: name-animation 1.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        }
           
        @-webkit-keyframes name-animation {
            0% {
              letter-spacing: 1em;
              -webkit-transform: translateZ(400px);
                      transform: translateZ(400px);
              opacity: 0;
            }
            40% {
              opacity: 0.6;
            }
            100% {
              -webkit-transform: translateZ(0);
                      transform: translateZ(0);
              opacity: 1;
            }
          }
          @keyframes name-animation {
            0% {
              letter-spacing: 0.7em;
              -webkit-transform: translateZ(400px);
                      transform: translateZ(400px);
              opacity: 0;
            }
            40% {
              opacity: 0.6;
            }
            100% {
              -webkit-transform: translateZ(0);
                      transform: translateZ(0);
              opacity: 1;
            }
          }
        
          .name {
              opacity: 0;
          }
    
    
    
      }
      
    
    }