.logo_arrive
    {
       -webkit-animation: logo_arrive 0.5s 1s ease-out;
        -moz-animation: logo_arrive 0.5s 1s ease-out;
        -ms-animation: logo_arrive 0.5s 1s ease-out;
        -o-animation: logo_arrive 0.5s 1s ease-out;
        animation: logo_arrive 0.5s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        margin-top: -50px; 
        opacity: 0;
    }
    
    @keyframes logo_arrive
    {
        from{opacity: 0; margin-top: -50px;}
        to{opacity: 1; margin-top: 0px;}
        
    }
    
    @-webkit-keyframes logo_arrive
    {
       from{opacity: 0; margin-top: -50px;}
        to{opacity: 1; margin-top: 0px;}
        
    }

.show
{
	opacity:1;
    margin-left: 0px;
	/* Firefox */
		-moz-transition: all 0.2s ease;
		/* WebKit */
		-webkit-transition: all 0.2s ease;
		-webkit-transition-delay: 0.3s;
		/* Opera */
		-o-transition: all 0.2s ease;
		/* Standard */
		transition: all 0.2s ease;
		transition-delay: 0.3s;
}

.hide
{
	opacity: 0;
    margin-left: -300px;
	/* Firefox */
		-moz-transition: all 0.1s ease;
		/* WebKit */
		-webkit-transition: all 0.1s ease;
		/* Opera */
		-o-transition: all 0.1s ease;
		/* Standard */
		transition: all 0.1s ease;
}

.suiv
{
		-webkit-animation: num 0.3s 1s ease-out;
        -moz-animation: num 0.3s 1s ease-out;
        -ms-animation: num 0.3s 1s ease-out;
        -o-animation: num 0.3s 1s ease-out;
        animation: num 0.3s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
}

@keyframes num
	{
	0% {right:-80px;transform: rotate(0deg);}
	100% {right:-25px;transform: rotate(-45deg);}
	}

	@-webkit-keyframes num /* Safari and Chrome */
	{
	0% {right:-80px;-webkit-transform: rotate(0deg)translateZ(0);}
	100% {right:-25px;-webkit-transform: rotate(-45deg)
    						translateZ(0);}
	}

.prec
{
		-webkit-animation: numprec 0.3s 1s ease-out;
        -moz-animation: numprec 0.3s 1s ease-out;
        -ms-animation: numprec 0.3s 1s ease-out;
        -o-animation: numprec 0.3s 1s ease-out;
        animation: numprec 0.3s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
}

@keyframes numprec
	{
	0% {left:-80px;transform: rotate(0deg);}
	100% {left:-25px;transform: rotate(45deg);}
	}

	@-webkit-keyframes numprec /* Safari and Chrome */
	{
	0% {left:-80px;-webkit-transform: rotate(0deg)translateZ(0);}
	100% {left:-25px;-webkit-transform: rotate(45deg)
    						translateZ(0);}
	}

.numleaveg
{
		position: fixed;
		font-family: "Josefin Slab", "Arial", serif; 
    	font-weight: 700; 
    	font-size: 10em;
    	left: -25px;
    	top: 40%;
    	color: #999;
    	cursor: pointer;
    	z-index: 999;
		-webkit-animation: numleaveg 0.4s ease-out;
        -moz-animation: numleaveg 0.4s ease-out;
        -ms-animation: numleaveg 0.4s ease-out;
        -o-animation: numleaveg 0.4s ease-out;
        animation: numleaveg 0.4s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
}

@keyframes numleaveg
	{
	0% {left:-25px;transform: rotate(45deg);}
	100% {left:-80px;transform: rotate(0deg);}
	}

	@-webkit-keyframes numleaveg /* Safari and Chrome */
	{
	0% {left:-25px;-webkit-transform: rotate(45deg)translateZ(0);}
	100% {left:-80px;-webkit-transform: rotate(0deg)
    						translateZ(0);}
	}

.numleaved
{
		position: fixed;
		font-family: "Josefin Slab", "Arial", serif; 
    	font-weight: 700; 
    	font-size: 10em;
    	right: -25px;
    	top: 40%;
    	color: #999;
    	cursor: pointer;
    	z-index: 999;
		-webkit-animation: numleaved 0.4s ease-out;
        -moz-animation: numleaved 0.4s ease-out;
        -ms-animation: numleaved 0.4s ease-out;
        -o-animation: numleaved 0.4s ease-out;
        animation: numleaved 0.4s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
}

@keyframes numleaved
	{
	0% {right:-25px;transform: rotate(-45deg);}
	100% {right:-80px;transform: rotate(0deg);}
	}

	@-webkit-keyframes numleaved /* Safari and Chrome */
	{
	0% {right:-25px;-webkit-transform: rotate(-45deg)translateZ(0);}
	100% {right:-80px;-webkit-transform: rotate(0deg)
    						translateZ(0);}
	}		

.menu_appear
	{
		animation: menu_appear 0.35s ease-out;
		-webkit-animation: menu_appear 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_off
	{
		animation: menu_appear_off 0.35s ease-out;
		-webkit-animation: menu_appear_off 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.global_focus
	{
		-webkit-box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);
		animation: global_focus 0.35s ease-out;
		-webkit-animation: global_focus 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.global_unfocus
	{
		-webkit-box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);
		animation: global_unfocus 0.35s ease-out;
		-webkit-animation: global_unfocus 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_li
	{
		opacity: 1;
		margin-top: -10%;
		margin-bottom: 10%;
		margin-top: 20px;
		animation: menu_appear_li 0.3s ease;
		animation-delay: 0,35s;
		-webkit-animation: menu_appear_li 0.3s ease; /* Safari and Chrome */
		-webkit-animation-delay: 0,35s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_li_off
	{
		opacity: 0;
		margin-top: 2%;
		margin-left: -20%;
		margin-bottom: -10%;
		animation: menu_appear_li_off 0.3s ease;
		animation-delay: 0,25s;
		-webkit-animation: menu_appear_li_off 0.3s ease; /* Safari and Chrome */
		-webkit-animation-delay: 0,5s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.logo_w
	{
		animation: logo_w 0.35s ease-out;
		-webkit-animation: logo_w 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transform: rotate(0deg);
	}

	.logo_b
	{
		animation: logo_b 0.35s ease-out;
		-webkit-animation: logo_b 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transform: rotate(0deg);
	}

	@keyframes logo_w
	{
	0% {transform: rotate(8deg);}
	5% {transform: rotate(13deg);}
	100% {transform: rotate(-360deg);}
	}

	@-webkit-keyframes logo_w /* Safari and Chrome */
	{
	0% {-webkit-transform: rotate(8deg);}
	5% {-webkit-transform: rotate(13deg);}
	100% {-webkit-transform: rotate(-360deg);}
	}

	@keyframes logo_b
	{
	0% {transform: rotate(8deg);}
	5% {transform: rotate(4deg);}
	100% {transform: rotate(360deg);}
	}

	@-webkit-keyframes logo_b /* Safari and Chrome */
	{
	0% {-webkit-transform: rotate(8deg);}
	5% {-webkit-transform: rotate(4deg);}
	100% {-webkit-transform: rotate(360deg);}
	}

	@keyframes global_focus
	{
	from {box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	to {box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	}

	@-webkit-keyframes global_focus /* Safari and Chrome */
	{
	from {-webkit-box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	to {-webkit-box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	}

	@keyframes global_unfocus
	{
	from {box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	to {box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	}

	@-webkit-keyframes global_unfocus /* Safari and Chrome */
	{
	from {-webkit-box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	to {-webkit-box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	}

	@keyframes menu_appear /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,0.0); width: 0%;}
	85% {background-color: rgba(255,255,255,1); width: 11%;}
	100% {background-color: rgba(255,255,255,1); width: 10%;}
	}

	@-webkit-keyframes menu_appear /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,0.0); width: 0%;}
	85% {background-color: rgba(255,255,255,1); width: 11%;}
	100% {background-color: rgba(255,255,255,1); width: 10%;}
	}

	@keyframes menu_appear_off
	{
	0% {background-color: rgba(255,255,255,1); width: 10%;}
	85% {background-color: rgba(255,255,255,0); width: 11%;}
	100% {background-color: rgba(255,255,255,0); width: 0%;}
	}

	@-webkit-keyframes menu_appear_off /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,1); width: 10%;}
	85% {background-color: rgba(255,255,255,0); width: 11%;}
	100% {background-color: rgba(255,255,255,0); width: 0%;}
	}

	@keyframes menu_appear_li
	{
	0% {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	100% {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	}

	@-webkit-keyframes menu_appear_li /* Safari and Chrome */
	{
	0% {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	100% {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	}

	@keyframes menu_appear_li_off
	{
	from {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	to {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	}

	@-webkit-keyframes menu_appear_li_off /* Safari and Chrome */
	{
	from {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	to {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	}

//PAGE INFOGRAPHIE

#s1
	{
		animation: s1 0.3s ease-out;
        animation-delay: 0.8s;
		-webkit-animation: s1 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 0.8s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}

#s2
	{
		animation: s2 0.3s ease-out;
        animation-delay: 0.9s;
		-webkit-animation: s2 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 0.9s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}

#s3
	{
		animation: s3 0.3s ease-out;
        animation-delay: 1s;
		-webkit-animation: s3 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 1s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}

#s4
	{
		animation: s4 0.3s ease-out;
        animation-delay: 1.1s;
		-webkit-animation: s4 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.1s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}
#s5
	{
		animation: s5 0.3s ease-out;
        animation-delay: 1.2s;
		-webkit-animation: s5 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.2s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}

#s6
	{
		animation: s6 0.3s ease-out;
        animation-delay: 1.4s;
		-webkit-animation: s6 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 0.4s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}

#s7
	{
		animation: s7 0.3s ease-out;
        animation-delay: 1.5s;
		-webkit-animation: s7 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.5s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}

#s8
	{
		animation: s8 0.3s ease-out;
        animation-delay: 1.6s;
		-webkit-animation: s8 0.3s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 1.6s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        top: 0px;
        opacity: 0;
	}


    @keyframes s1
	{
	from {top: 0px; opacity: 0;}
	to {top: 75px; opacity: 1;}
	}

	@-webkit-keyframes s1 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 75px; opacity: 1;}
	}

     @keyframes s2
	{
	from {top: 0px; opacity: 0;}
	to {top: 125px; opacity: 1;}
	}

	@-webkit-keyframes s2 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 125px; opacity: 1;}
	}
    
    @keyframes s3
	{
	from {top: 0px; opacity: 0;}
	to {top: 175px; opacity: 1;}
	}

	@-webkit-keyframes s3 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 175px; opacity: 1;}
	}
    
    @keyframes s4
	{
	from {top: 0px; opacity: 0;}
	to {top: 235px; opacity: 1;}
	}

	@-webkit-keyframes s4 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 235px; opacity: 1;}
	}

    @keyframes s5
	{
	from {top: 0px; opacity: 0;}
	to {top: 55px; opacity: 1;}
	}

	@-webkit-keyframes s5 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 55px; opacity: 1;}
	}

    @keyframes s6
	{
	from {top: 0px; opacity: 0;}
	to {top: 85px; opacity: 1;}
	}

	@-webkit-keyframes s6 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 85px; opacity: 1;}
	}

    @keyframes s7
	{
	from {top: 0px; opacity: 0;}
	to {top: 175px; opacity: 1;}
	}

	@-webkit-keyframes s7 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 175px; opacity: 1;}
	}

    @keyframes s8
	{
	from {top: 0px; opacity: 0;}
	to {top: 205px; opacity: 1;}
	}

	@-webkit-keyframes s8 /* Safari and Chrome */
	{
	from {top: 0px; opacity: 0;}
	to {top: 205px; opacity: 1;}
	}

#titre_2
    {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        opacity:0;
        background-image:url("../assets/img/2nd.png");
        background-repeat: no-repeat;
        animation:titre_2  1.5s ease-out;
		-webkit-animation:titre_2 1.5s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        
    }

    @keyframes titre_2
	{
	from {opacity: 0;}
	to {opacity: 1;}
	}

    @-webkit-keyframes titre_2
	{
	from {opacity: 0;}
	to {opacity: 1;}
	}

#cloud1
    {
        position: absolute;
        width: 200px;
        height: 135px;
        background-image:url("../assets/img/cloud.png");
        background-repeat: no-repeat;
        left: 0px;
        top: 160px;
        opacity: 0;
        animation:cloud1  0.4s ease-out;
        animation-delay: 2s;
		-webkit-animation:cloud1 0.4s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 2s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        
    }

    @keyframes cloud1
	{
	from {left: 0px; opacity: 0;}
	to {left: 50px; opacity: 1;}
	}

    @-webkit-keyframes cloud1
	{
	from {left: 0px; opacity: 0;}
	to {left: 50px; opacity: 1;}
	}

.cloud1
    {
        position: absolute;
        width: 200px;
        height: 135px;
        background-image:url("../assets/img/cloud.png");
        background-repeat: no-repeat;
        left: 0px;
        top: 1050px;
        opacity: 0;
    }


#cloud2
    {
        position: absolute;
        width: 200px;
        height: 135px;
        background-image:url("../assets/img/cloud2.png");
        background-repeat: no-repeat;
        right: 0px;
        top: 200px;
        opacity: 0;
        animation:cloud2  0.4s ease-out;
        animation-delay: 2.3s;
		-webkit-animation:cloud2 0.4s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 2.3s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        
    }

    @keyframes cloud2
	{
	from {right: 0px; opacity: 0;}
	to {right: 75px; opacity: 1;}
	}

    @-webkit-keyframes cloud2
	{
	from {right: 0px; opacity: 0;}
	to {right: 75px; opacity: 1;}
	}

    .cloud2
    {
        position: absolute;
        width: 200px;
        height: 135px;
        background-image:url("../assets/img/cloud2.png");
        background-repeat: no-repeat;
        right: 0px;
        top: 1110px;
        opacity: 0;
    }

    .cloud3
    {
        position: absolute;
        width: 200px;
        height: 135px;
        background-image:url("../assets/img/cloud.png");
        background-repeat: no-repeat;
        right: 0px;
        top: 1800px;
        opacity: 0;
    }

    .cloud4
        {
            position: absolute;
            width: 200px;
            height: 135px;
            background-image:url("../assets/img/cloud.png");
            background-repeat: no-repeat;
            right: 60px;
            top: 1920px;
            opacity: 0;
        }

    .cloud5
        {
            position: absolute;
            width: 200px;
            height: 135px;
            background-image:url("../assets/img/cloud2.png");
            background-repeat: no-repeat;
            left: 20px;
            top: 2150px;
            opacity: 0;
        }

        .cloud6
        {
            position: absolute;
            width: 200px;
            height: 135px;
            background-image:url("../assets/img/cloud2.png");
            background-repeat: no-repeat;
            right: 70px;
            top: 2700px;
            opacity: 0;
        }

        .cloud7
        {
            position: absolute;
            width: 200px;
            height: 135px;
            background-image:url("../assets/img/cloud2.png");
            background-repeat: no-repeat;
            left: 50px;
            top: 2850px;
            opacity: 0;
        }

        .cloud8
        {
            position: absolute;
            width: 200px;
            height: 135px;
            background-image:url("../assets/img/cloud.png");
            background-repeat: no-repeat;
            right: 30px;
            top: 2920px;
            opacity: 0;
        }

#stat1
    {
        position: absolute;
        width: 415px;
        height: 310px;
        background-image:url("../assets/img/ecran.png");
        background-repeat: no-repeat;
        left: -20px;
        top: 220px;
        opacity: 0;
        animation:stat1  0.4s ease-out;
        animation-delay: 2.8s;
		-webkit-animation:stat1 0.4s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 2.8s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        
    }

    @keyframes stat1
	{
	from {left: -20px; opacity: 0;}
	to {left: 0px; opacity: 1;}
	}

    @-webkit-keyframes stat1
	{
	from {top: 200px; opacity: 0;}
	to {top: 220px; opacity: 1;}
	}

#stat2
    {
       position: absolute;
        width: 280px;
        height: 270px;
        background-image:url("../assets/img/camembert.png");
        background-repeat: no-repeat;
        right: 0px;
        top: 245px;
        opacity: 0;
        animation:stat2  0.4s ease-out;
        animation-delay: 3.1s;
		-webkit-animation:stat2 0.4s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 3.1s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        
    }

    @keyframes stat2
	{
	0% {right: -20px; opacity: 0;}
	100% {right: 0px; opacity: 1;}
	}

    @-webkit-keyframes stat2
	{
	0% {top: 200px; opacity: 0;}
	100% {top: 245px; opacity: 1;}
	}

#stat3
    {
       position: absolute;
        width: 555px;
        height: 555px;
        background-image:url("../assets/img/info.png");
        background-repeat: no-repeat;
        top: 528px;
        left: 37px;
        opacity: 0;
        animation:stat3  0.4s ease-out;
        animation-delay: 2.9s;
		-webkit-animation:stat3 0.4s ease-out; /* Safari and Chrome */
        -webkit-animation-delay: 2.9s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        
    }

    @keyframes stat3
	{
	0% {top: 500px; opacity: 0;}
	100% {top: 528px; opacity: 1;}
	}

    @-webkit-keyframes stat3
	{
	0% {top: 500px; opacity: 0;}
	100% {top: 528px; opacity: 1;}
	}

    .come-inL	
    {
       -webkit-animation: come-inL 0.5s 1s ease-out;
        -moz-animation: come-inL 0.5s 1s ease-out;
        -ms-animation: come-inL 0.5s 1s ease-out;
        -o-animation: come-inL 0.5s 1s ease-out;
        animation: come-inL 0.5s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;  
        padding-left: -50px;
        opacity: 0;
    }
    
    @keyframes come-inL
    {
        from{margin-left: -50px; opacity: 0;}
        to{margin-left: 0px; opacity: 1;}
        
    }
    
    @-webkit-keyframes come-inL
    {
       from{margin-left: -50px; opacity: 0;}
        to{margin-left: 0px; opacity: 1;}
        
    }

    .come-inR
    {
       -webkit-animation: come-inR 0.5s 0.5s ease-out;
        -moz-animation: come-inR 0.5s 0.5s ease-out;
        -ms-animation: come-inR 0.5s 0.5s ease-out;
        -o-animation: come-inR 0.5s 0.5s ease-out;
        animation: come-inR 0.5s 0.5s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;  
        margin-right: -50px;
        opacity: 0;
    }
    
    @keyframes come-inR
    {
        from{margin-right:  -50px; opacity: 0;}
        to{margin-right: 0px; opacity: 1;}
        
    }
    
    @-webkit-keyframes come-inR
    {
       from{margin-right:  -50px; opacity: 0;}
        to{margin-right: 0px; opacity: 1;}
        
    }

    .come-inB
    {
        -webkit-animation: come-inB 0.5s 0.5s ease-out;
        -moz-animation: come-inB 0.5s 0.5s ease-out;
        -ms-animation: come-inB 0.5s 0.5s ease-out;
        -o-animation: come-inB 0.5s 0.5s ease-out;
        animation: come-inB 0.5s 0.5s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;  
        top: 1400px;
        opacity: 0;
    
    }

    @keyframes come-inB
    {
        from{top: 1400px; opacity: 0;}
        to{top: 1300px; opacity: 1;}
        
    }
    
    @-webkit-keyframes come-inB
    {
       from{top: 1400px; opacity: 0;}
        to{top: 1300px; opacity: 1;}
        
    }

.come-inI
    {
       -webkit-animation: come-inI 0.5s 1s ease-out;
        -moz-animation: come-inI 0.5s 1s ease-out;
        -ms-animation: come-inI 0.5s 1s ease-out;
        -o-animation: come-inI 0.5s 1s ease-out;
        animation: come-inR 0.5s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;  
        opacity: 0;
    }
    
    @keyframes come-inI
    {
        from{opacity: 0;}
        to{opacity: 1;}
        
    }
    
    @-webkit-keyframes come-inI
    {
       from{opacity: 0;}
        to{opacity: 1;}
        
    }

    .come-inT
    {
       -webkit-animation: come-inT 0.5s 1s ease-out;
        -moz-animation: come-inT 0.5s 1s ease-out;
        -ms-animation: come-inT 0.5s 1s ease-out;
        -o-animation: come-inT 0.5s 1s ease-out;
        animation: come-inT 0.5s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        top: 2400px;
        left: 45px;  
        opacity: 0;
    }
    
    @keyframes come-inT
    {
        from{opacity: 0; top: 2400px;}
        to{opacity: 1; top: 2534px;}
        
    }
    
    @-webkit-keyframes come-inT
    {
       from{opacity: 0; top: 2400px;}
        to{opacity: 1; top: 2534px;}
        
    }

    .come-inIco_txt
    {
       -webkit-animation: come-inIco_txt 0.5s 1s ease-out;
        -moz-animation: come-inIco_txt 0.5s 1s ease-out;
        -ms-animation: come-inIco_txt 0.5s 1s ease-out;
        -o-animation: come-inIco_txt 0.5s 1s ease-out;
        animation: come-inIco_txt 0.5s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        margin-bottom: 0px;  
        opacity: 0;
    }
    
    @keyframes come-inIco_txt
    {
        0%{opacity: 0; margin-bottom: 0px;}
       90%{opacity: 1; margin-bottom: 20px;}
       100%{opacity: 1; margin-bottom: 15px;}
        
    }
    
    @-webkit-keyframes come-inIco_txt
    {
       0%{opacity: 0; margin-bottom: 0px;}
       90%{opacity: 1; margin-bottom: 20px;}
       100%{opacity: 1; margin-bottom: 15px;}
        
    }

    .come-inIco_img
    {
       -webkit-animation: come-inIco_img 0.5s 1s ease-out;
        -moz-animation: come-inIco_img 0.5s 1s ease-out;
        -ms-animation: come-inIco_img 0.5s 1s ease-out;
        -o-animation: come-inIco_img 0.5s 1s ease-out;
        animation: come-inIco_img 0.5s 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        margin-bottom: 0px;  
        opacity: 0;
    }
    
    @keyframes come-inIco_img
    {
        0%{opacity: 0; margin-bottom: 0px;}
       90%{opacity: 1; margin-bottom: 25px;}
       100%{opacity: 1; margin-bottom: 20px;}
        
    }
    
    @-webkit-keyframes come-inIco_img
    {
      0%{opacity: 0; margin-bottom: 0px;}
       90%{opacity: 1; margin-bottom: 25px;}
       100%{opacity: 1; margin-bottom: 20px;}
        
    }

    @keyframes rotate
    {
        from{transform: rotate(0deg);}
        to{transform: rotate(360deg);}
        
    }
    
    @-webkit-keyframes rotate
    {
       from{-webkit-transform: rotate(0deg);}
        to{-webkit-transform: rotate(360deg);}
        
    }

    @keyframes rotnass {
	from {
		opacity: 1;
		transform: rotate(0deg)
		           translate(-220px)
		           rotate(0deg);
	}
	to {
		opacity: 1;
		transform: rotate(360deg)
		           translate(-220px) 
		           rotate(-360deg);
	}
}

@-webkit-keyframes rotnass {
	from {
		opacity: 1;
		-webkit-transform: rotate(0deg)
		           translate(-220px)
		           rotate(0deg);
	}
	to {
		opacity: 1;
		-webkit-transform: rotate(360deg)
		           translate(-220px) 
		           rotate(-360deg);
	}
}




@media screen and (max-width: 1920px), handheld and (max-device-width: 800px) and (orientation:landscape)
{

	.menu_appear
	{
		animation: menu_appear 0.35s ease-out;
		-webkit-animation: menu_appear 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_off
	{
		animation: menu_appear_off 0.35s ease-out;
		-webkit-animation: menu_appear_off 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.global_focus
	{
		-webkit-box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);
		animation: global_focus 0.35s ease-out;
		-webkit-animation: global_focus 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.global_unfocus
	{
		-webkit-box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);
		animation: global_unfocus 0.35s ease-out;
		-webkit-animation: global_unfocus 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_li
	{
		opacity: 1;
		margin-top: -10%;
		margin-bottom: 10%;
		margin-top: 20px;
		animation: menu_appear_li 0.3s ease;
		animation-delay: 0.35s;
		-webkit-animation: menu_appear_li 0.3s ease; /* Safari and Chrome */
		-webkit-animation-delay: 0.35s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_li_off
	{
		opacity: 0;
		margin-top: 2%;
		margin-bottom: -10%;
		animation: menu_appear_li_off 0.3s ease;
		animation-delay: 0.25s;
		-webkit-animation: menu_appear_li_off 0.3s ease; /* Safari and Chrome */
		-webkit-animation-delay: 0.5s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.logo_w
	{
		animation: logo_w 0.35s ease-out;
		-webkit-animation: logo_w 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transform: rotate(0deg);
	}

	.logo_b
	{
		animation: logo_b 0.35s ease-out;
		-webkit-animation: logo_b 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transform: rotate(0deg);
	}

	@keyframes logo_w
	{
	0% {transform: rotate(8deg);}
	5% {transform: rotate(13deg);}
	100% {transform: rotate(-360deg);}
	}

	@-webkit-keyframes logo_w /* Safari and Chrome */
	{
	0% {-webkit-transform: rotate(8deg);}
	5% {-webkit-transform: rotate(13deg);}
	100% {-webkit-transform: rotate(-360deg);}
	}

	@keyframes logo_b
	{
	0% {transform: rotate(8deg);}
	5% {transform: rotate(4deg);}
	100% {transform: rotate(360deg);}
	}

	@-webkit-keyframes logo_b /* Safari and Chrome */
	{
	0% {-webkit-transform: rotate(8deg);}
	5% {-webkit-transform: rotate(4deg);}
	100% {-webkit-transform: rotate(360deg);}
	}

	@keyframes global_focus
	{
	from {box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	to {box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	}

	@-webkit-keyframes global_focus /* Safari and Chrome */
	{
	from {-webkit-box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	to {-webkit-box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	}

	@keyframes global_unfocus
	{
	from {box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	to {box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	}

	@-webkit-keyframes global_unfocus /* Safari and Chrome */
	{
	from {-webkit-box-shadow: inset 0px 0px 50px 1px rgba(0, 0, 0, 0.3);}
	to {-webkit-box-shadow: inset 0px 0px 25px 1px rgba(0, 0, 0, 0.1);}
	}

	@keyframes menu_appear /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,0.0); width: 0%;}
	85% {background-color: rgba(255,255,255,1); width: 11%;}
	100% {background-color: rgba(255,255,255,1); width: 10%;}
	}

	@-webkit-keyframes menu_appear /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,0.0); width: 0%;}
	85% {background-color: rgba(255,255,255,1); width: 11%;}
	100% {background-color: rgba(255,255,255,1); width: 10%;}
	}

	@keyframes menu_appear_off
	{
	0% {background-color: rgba(255,255,255,1); width: 10%;}
	85% {background-color: rgba(255,255,255,0); width: 11%;}
	100% {background-color: rgba(255,255,255,0); width: 0%;}
	}

	@-webkit-keyframes menu_appear_off /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,1); width: 10%;}
	85% {background-color: rgba(255,255,255,0); width: 11%;}
	100% {background-color: rgba(255,255,255,0); width: 0%;}
	}

	@keyframes menu_appear_li
	{
	0% {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	100% {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	}

	@-webkit-keyframes menu_appear_li /* Safari and Chrome */
	{
	0% {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	100% {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	}

	@keyframes menu_appear_li_off
	{
	from {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	to {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	}

	@-webkit-keyframes menu_appear_li_off /* Safari and Chrome */
	{
	from {margin-top: 0%; margin-bottom: 10%; opacity: 1;}
	to {margin-top: -10%; margin-bottom: -10%; opacity: 0;}
	}

}

@media handheld, only screen and (max-width: 500px), only screen and (max-device-width: 500px) and (orientation: portrait), only screen and (max-width: 800px), only screen and (max-device-width: 800px) and (orientation: portrait)
{

	.menu_appear
	{
		animation: menu_appear 0.35s ease-out;
		-webkit-animation: menu_appear 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_off
	{
		animation: menu_appear_off 0.35s ease-out;
		-webkit-animation: menu_appear_off 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	#menu ul li
	{
		visibility: hidden;
	}

	.menu_appear_li
	{
		visibility: visible;
		opacity: 1;
		margin-top: -10%;
		margin-bottom: 10%;
		margin-top: 30px;
		font-size: 1em;
		animation: menu_appear_li 0.3s ease;
		animation-delay: 0.35s;
		-webkit-animation: menu_appear_li 0.3s ease; /* Safari and Chrome */
		-webkit-animation-delay: 0.35s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.menu_appear_li_off
	{
		visibility: visible;
		opacity: 0;
		margin-top: 2%;
		margin-bottom: -10%;
		animation: menu_appear_li_off 0.3s ease;
		animation-delay: 0.25s;
		-webkit-animation: menu_appear_li_off 0.3s ease; /* Safari and Chrome */
		-webkit-animation-delay: 0.5s;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
	}

	.logo_w
	{
		animation: logo_w 0.35s ease-out;
		-webkit-animation: logo_w 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transform: rotate(0deg);
	}

	.logo_b
	{
		animation: logo_b 0.35s ease-out;
		-webkit-animation: logo_b 0.4s ease-out; /* Safari and Chrome */
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transform: rotate(0deg);
	}

	@keyframes logo_w
	{
	0% {transform: rotate(8deg);}
	10% {transform: rotate(20deg);}
	100% {transform: rotate(-360deg);}
	}

	@-webkit-keyframes logo_w /* Safari and Chrome */
	{
	0% {-webkit-transform: rotate(8deg);}
	10% {-webkit-transform: rotate(20deg);}
	100% {-webkit-transform: rotate(-360deg);}
	}

	@keyframes logo_b
	{
	0% {transform: rotate(8deg);}
	10% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
	}

	@-webkit-keyframes logo_b /* Safari and Chrome */
	{
	0% {-webkit-transform: rotate(8deg);}
	10% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
	}

	@keyframes menu_appear /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,0.0); height: 0%;}
	85% {background-color: rgba(255,255,255,1); height: 31%;}
	100% {background-color: rgba(255,255,255,1); height: 30%;}
	}

	@-webkit-keyframes menu_appear /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,0.0); height: 0%;}
	85% {background-color: rgba(255,255,255,1); height: 31%;}
	100% {background-color: rgba(255,255,255,1); height: 30%;}
	}

	@keyframes menu_appear_off
	{
	0% {background-color: rgba(255,255,255,1); height: 30%;}
	85% {background-color: rgba(255,255,255,1); height: 31%;}
	100% {background-color: rgba(255,255,255,0.0); height: 0%;}
	}

	@-webkit-keyframes menu_appear_off /* Safari and Chrome */
	{
	0% {background-color: rgba(255,255,255,1); height: 20%;}
	85% {background-color: rgba(255,255,255,1); height: 31%;}
	100% {background-color: rgba(255,255,255,0.0); height: 0%;}
	}

	@keyframes menu_appear_li
	{
	0% {display: none; margin-top: -200px; opacity: 0;}
	1% {margin-top: -200px; opacity: 0;}
	100% {margin-top: 50px; opacity: 1;}
	}

	@-webkit-keyframes menu_appear_li /* Safari and Chrome */
	{
	0% {display: none; margin-top: -200px; opacity: 0;}
	1% {margin-top: -200px; opacity: 0;}
	100% {margin-top: 30px; opacity: 1;}
	}

	@keyframes menu_appear_li_off
	{
	0% {margin-top: 50px; opacity: 1;}
	99% {margin-top: -200px; opacity: 0;}
	100% {display: none; margin-top: -200px; opacity: 0;}
	}

	@-webkit-keyframes menu_appear_li_off /* Safari and Chrome */
	{
	0% {margin-top: 50px; opacity: 1;}
	99% {margin-top: -200px; opacity: 0;}
	100% {display: none; margin-top: -200px; opacity: 0;}
	}

}