#Login {
    background: #0B1742;
}
div#LoginLogo {
    position: relative;
    margin: 130px auto 0 auto;
}
figure#LogoAts1 {
    left: 50%;
    position: absolute;
    margin-left: -30px;
    opacity: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

figure#LogoAts1.Active {
    left: 0;
    margin-left: 0px;
    opacity: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
figure#LogoYazi {
    position: absolute;
    top: 30px;
    left: -50px;
    opacity: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
figure#LogoYazi.Active {
    left: 100px;
    opacity: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}





@media screen and (max-width: 99999px) and (min-width: 1025px) { /* PC 768px+ ~ 1024px */
	
	div#LoginLogo {
	    width: 50%!important;
	}

	figure#LogoAts1 {
	    width: 20%!important;
left: 115px !important;
	}

	figure#LogoYazi {
	    width: 40%;
	left: 280px !important;	
	}


}

@media screen and (max-width: 1024px) and (min-width: 768px) { /* PC 768px+ ~ 1024px */
	
	div#LoginLogo {
		width: 45%;
left: 30px !important;
	}
	figure#LogoAts1 {
		width: 25%;
	}
	figure#LogoYazi {
		width: 50%;

	}
	figure#LogoYazi {
	left: 130px !important;	
top: 33px;
	}

	
}

@media screen and (max-width: 767px) and (min-width: 640px) { /* TABLET 640+ ~ 768 */
	div#LoginLogo {
	    width: 50%;
	}

	figure#LogoAts1 {
	    width: 30%;
	}

	figure#LogoYazi {
	    width: 50%;
left: 115px !important;
	}
	
}

@media screen and (max-width: 639px) and (min-width: 416px) { /* Tablet 480+ ~ 640 */
	figure#LogoAts1 {
	    width: 100px;
	    left: 70px;
	}
	figure#LogoAts1.Active {
		left: 0;
	}
	figure#LogoYazi {
	    width: 180px;
	    top: 30px;
	}
	figure#LogoYazi.Active {
	    left: 110px;
	}

	div#LoginLogo {
		width: 50%;
	}
	div#LoginLogo {
	    display: block !important;
	}
	
}

@media screen and (max-width: 415px) and (min-width: 0px) { /* MOBILE 480+ ~ 640 */
	figure#LogoAts1 {
	    width: 80px;
	    left: 0px;
	}
	figure#LogoAts1.Active {
		left: -90px;
	}
	figure#LogoYazi {
	    width: 160px;
	}
	figure#LogoYazi.Active {
	    left: 0px;
	    top: 20px;
	}

	div#LoginLogo {
		width: 30%;
	}
	div#LoginLogo {
	    display: block !important;
	}
	

}