/* 
    ZIELSKO.COM
    
    ANIMATION CSS
    */
    
    div.slideHoverLeft {
        -webkit-animation:slideHoverLoopLeft 6s infinite linear;
        -moz-animation:slideHoverLoopLeft 6s infinite linear;
        -ms-animation:slideHoverLoopLeft 6s infinite linear;
        opacity:1;
    }
    
    div.slideHoverLeft:hover { 
         -webkit-animation:slideHoverLoopLeft 1s infinite linear;
         -moz-animation:slideHoverLoopLeft 1s infinite linear;
         -ms-animation:slideHoverLoopLeft 1s infinite linear;
         -o-animation:slideHoverLoopLeft 1s infinite linear;
    } 
    
    div.slideHoverRight {
        -webkit-animation:slideHoverLoopRight 6s infinite linear;
        -moz-animation:slideHoverLoopRight 6s infinite linear;
        -ms-animation:slideHoverLoopRight 6s infinite linear;
        opacity:1;
    }
    
    div.slideHoverRight:hover { 
         -webkit-animation:slideHoverLoopRight 1s infinite linear;
         -moz-animation:slideHoverLoopRight 1s infinite linear;
         -ms-animation:slideHoverLoopRight 1s infinite linear;
         -o-animation:slideHoverLoopRight 1s infinite linear;
    } 

    @keyframes slideHoverLoopLeft {
  	0%   { transform:rotate(0deg);}          100% { transform:rotate(-720deg); }      
    } 
    @-webkit-keyframes slideHoverLoopLeft {
  	0%   { -webkit-transform:rotate(0deg);}  100% { -webkit-transform:rotate(-720deg);}      
    } 
    @-moz-keyframes slideHoverLoopLeft{
 	0%   { -moz-transform:rotate(0deg);}     100% { -moz-transform:rotate(-720deg); }           
    }
    @-ms-keyframes slideHoverLoopLeft{
	0%   { -ms-transform:rotate(0deg);}      100% { -ms-transform:rotate(-720deg); }            
    }
    @-o-keyframes slideHoverLoopLeft {
	0%   { -o-transform:rotate(0deg);}       100% { -o-transform:rotate(-720deg); }      
    }
    
    
    @keyframes slideHoverLoopRight {
  	0%   { transform:rotate(0deg);}          100% { transform:rotate(720deg);}      
    } 
    @-webkit-keyframes slideHoverLoopRight {
  	0%   { -webkit-transform:rotate(0deg);}  100% { -webkit-transform:rotate(720deg);}      
    } 
    @-moz-keyframes slideHoverLoopRight{
 	0%   { -moz-transform:rotate(0deg);}     100% { -moz-transform:rotate(720deg);}           
    }
    @-ms-keyframes slideHoverLoopRight{
	0%   { -ms-transform:rotate(0deg);}      100% { -ms-transform:rotate(720deg);}            
    }
    @-o-keyframes slideHoverLoopRight {
	0%   { -o-transform:rotate(0deg);}       100% { -o-transform:rotate(720deg);}     
    }
    
    .swietlik {
        width:80px;
        height:80px;
        position: absolute;
        z-index:50;
        top:1000px;
        opacity:0;
	-webkit-animation-name: fall, fade, spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
	-webkit-animation-timing-function:easy-in-out;
        -webkit-animation-duration: 25s;	
        
        -moz-animation-name: fall, fade, spin;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
	-moz-animation-timing-function:easy-in-out;
        -moz-animation-duration: 25s;	
        
        -o-animation-name: fall, fade, spin;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
	-o-animation-timing-function:easy-in-out;
        -o-animation-duration: 25s;	
    }
    
    .swietlik.f1 { background-image: url('../images/swietlik.png'); margin-left:60px;   }
    .swietlik.f2 { background-image: url('../images/swietlik1.png'); margin-left:800px; }
    .swietlik.f3 { background-image: url('../images/swietlik.png'); margin-left:0px;    }
    .swietlik.f4 { background-image: url('../images/swietlik2.png'); ritht:0;           }
    
    
     /* GENERAL */
     
     /* CHROME, SAFARI */
     
     @-webkit-keyframes fade   {0%   { opacity: 0; } 5%   { opacity: 0; } 15%   { opacity: 5; } 90%   { opacity: 1; }100% { opacity: 0; }}             
     @-webkit-keyframes top    {0% {top: 1000px; }  100% {top: -80px;}}
    
    .swietlik.f1 { -webkit-animation-duration: 50s;-webkit-animation-name: fall_1, top, fade; }
    .swietlik.f2 { -webkit-animation-duration: 44s;-webkit-animation-name: fall_2, top, fade; }
    .swietlik.f3 { -webkit-animation-duration: 56s;-webkit-animation-name: fall_3, fade; }
    .swietlik.f4 { -webkit-animation-duration: 35s;-webkit-animation-name: fall_4, top, fade; }
    
     /* MOZILLA */
     
     @-moz-keyframes fade{0%   { opacity: 0; } 5%   { opacity: 0; } 15%   { opacity: 5; } 90%   { opacity: 1; }100% { opacity: 0; }}             
     @-moz-keyframes top    {0% {top: 1000px; }  100% {top: -80px;}}
     
    .swietlik.f1 { -moz-animation-duration: 50s;-moz-animation-name: fall_1, top, fade; }
    .swietlik.f2 { -moz-animation-duration: 44s;-moz-animation-name: fall_2, top, fade; }
    .swietlik.f3 { -moz-animation-duration: 56s;-moz-animation-name: fall_3, fade; }
    .swietlik.f4 { -moz-animation-duration: 35s;-moz-animation-name: fall_4, top, fade; }
    
     /* OPERA */
     
     @-o-keyframes fade{0%   { opacity: 0; } 5%   { opacity: 0; } 15%   { opacity: 5; } 90%   { opacity: 1; }100% { opacity: 0; }}             
     @-o-keyframes top    {0% {top: 1000px; }  100% {top: -80px;}}
     
    .swietlik.f1 { -o-animation-duration: 50s;-o-animation-name: fall_1, top, fade; }
    .swietlik.f2 { -o-animation-duration: 44s;-o-animation-name: fall_2, top, fade; }
    .swietlik.f3 { -o-animation-duration: 56s;-o-animation-name: fall_3, fade; }
    .swietlik.f4 { -o-animation-duration: 35s;-o-animation-name: fall_4, top, fade; }
    
   

    /* CHROME, SAFARI */
    
    @-webkit-keyframes fall_1 {
        0%    { -webkit-transform: rotate(0deg); }
        25%   { -webkit-transform: rotate(0deg); margin-left:100px; }
        30%   { -webkit-transform: rotate(25deg);  }
        45%   { -webkit-transform: rotate(5deg);  margin-left:250px; }
        62%   { -webkit-transform: rotate(40deg) }
        87%   { -webkit-transform: rotate(-10deg); margin-left:580px; }
        100%  { -webkit-transform: rotate(20deg);  margin-left:700px;  }
    }
    
    @-webkit-keyframes fall_2 {
        0%    {  }
        20%   { -webkit-transform: rotate(7deg);}
        30%   {  margin-left:1000px; }
        60%   { -webkit-transform: rotate(-10deg);}
        100%  { -webkit-transform: rotate(-10deg);  margin-left:700px;  }
    }
    
    @-webkit-keyframes fall_3 {
        0%    { top:1000px; }
        30%   { top:500px;}       
        40%   { top:500px; margin-left:-100px; -webkit-transform: rotate(-5deg);}
        75%   { -webkit-transform: rotate(-30deg);}
        100%  { top: 0px; margin-left:-600px;  }
    }
    @-webkit-keyframes fall_4 {
        0%    { right:0;-webkit-transform: rotate(-10deg); }
        100%  { right:300px;-webkit-transform: rotate(-10deg); }
    }
    
    /* MOZILLA */
    
    @-moz-keyframes fall_1 {
        0%    { -moz-transform: rotate(0deg); }
        25%   { -moz-transform: rotate(0deg); margin-left:100px; }
        30%   { -moz-transform: rotate(25deg);  }
        45%   { -moz-transform: rotate(5deg);  margin-left:250px; }
        62%   { -moz-transform: rotate(40deg) }
        87%   { -moz-transform: rotate(-10deg); margin-left:580px; }
        100%  { -moz-transform: rotate(20deg);  margin-left:700px;  }
    }
    
    @-moz-keyframes fall_2 {
        0%    {  }
        20%   { -moz-transform: rotate(7deg);}
        30%   {  margin-left:1000px; }
        60%   { -moz-transform: rotate(-10deg);}
        100%  { -moz-transform: rotate(-10deg);  margin-left:700px;  }
    }
    
    @-moz-keyframes fall_3 {
        0%    { top:1000px; }
        30%   { top:500px;}       
        40%   { top:500px; margin-left:-100px; -moz-transform: rotate(-5deg);}
        75%   { -moz-transform: rotate(-30deg);}
        100%  { top: 0px; margin-left:-600px;  }
    }
    @-moz-keyframes fall_4 {
        0%    { right:0;-moz-transform: rotate(-10deg); }
        100%  { right:300px;-moz-transform: rotate(-10deg); }
    }
    
    /* OPERA */
    
    @-o-keyframes fall_1 {
        0%    { -o-transform: rotate(0deg); }
        25%   { -o-transform: rotate(0deg); margin-left:100px; }
        30%   { -o-transform: rotate(25deg);  }
        45%   { -o-transform: rotate(5deg);  margin-left:250px; }
        62%   { -o-transform: rotate(40deg) }
        87%   { -o-transform: rotate(-10deg); margin-left:580px; }
        100%  { -o-transform: rotate(20deg);  margin-left:700px;  }
    }
    
    @-o-keyframes fall_2 {
        0%    {  }
        20%   { -o-transform: rotate(7deg);}
        30%   {  margin-left:1000px; }
        60%   { -o-transform: rotate(-10deg);}
        100%  { -o-transform: rotate(-10deg);  margin-left:700px;  }
    }
    
    @-o-keyframes fall_3 {
        0%    { top:1000px; }
        30%   { top:500px;}       
        40%   { top:500px; margin-left:-100px; -o-transform: rotate(-5deg);}
        75%   { -o-transform: rotate(-30deg);}
        100%  { top: 0px; margin-left:-600px;  }
    }
    @-o-keyframes fall_4 {
        0%    { right:0;-o-transform: rotate(-10deg); }
        100%  { right:300px;-o-transform: rotate(-10deg); }
    }
    
    

    .sliderImg img {
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    .sliderImg .sliderMask {
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        position:absolute;
        background-color: rgba(0,5,16, 0.7);
        background-image: url('../images/slider-frame.png'); 
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .sliderImg h2 {
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .sliderImg p {
        -webkit-transform: translateY(278px);
        -moz-transform: translateY(278px);
        -o-transform: translateY(278px);
        -ms-transform: translateY(278px);
        transform: translateY(278px);
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    .sliderImg:hover img {
        -webkit-transform: scale(1.1,1.1);
        -moz-transform: scale(1.1,1.1);
        -o-transform: scale(1.1,1.1);
        -ms-transform: scale(1.1,1.1);
        transform: scale(1.1,1.1);
    }

    .sliderImg:hover .sliderMask {
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }
    .sliderImg:hover h2,
    .sliderImg:hover p{
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    .sliderImg:hover p {
        -webkit-transition-delay: 0.1s;
        -moz-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        -ms-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }