*{
	margin:0;
	padding:0;
}
body{
    background: #340904;
}
a{
	text-decoration:none;
}

.wrapper{
	font-family: sans-serif;
}
.main-logo{
    width: 100%;
    text-align: center;
    padding: 14px 0 19px;
	background:#FFFFFF;
}

.main-logo.is-showing{
	opacity:1;
	transform:translateY(0px);
	transition:all 0.8s ease-in-out;
}

.back-img{
    min-height: 100px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #681209;
    padding: 0px 10px 0;
    box-sizing: border-box;
	
}

.back-img img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px #ffffff;
    margin: 15px;
    padding: 3px;
	display:none;
}


#ASN{
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    text-align: center;
    background:rgba(0,0,0,0.5);
    left: 0px;
}
#ASN h1{
    position: absolute;
    color: #fff;
    text-transform: uppercase;
    margin:15px 0;
    text-shadow: 1px 1px 1px #000;
    font-size: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#ASN h1 span{
	font-size:36px;
}

.school-logo{
    display: inline-block;
    width: 100%;
    text-align: center;
	position:absolute;
	margin-top:50px;
}



.log-div{
    margin: 10px;
    width: 20%;
    display: inline-block;
    padding: 25px;
    border-radius: 10px;
    cursor: pointer;
    height:214px;
	/*background:rgba(0,0,0,0.51);*/
	box-shadow:1px 1px 10px #880204;
}
.log-div h3{
    color: #fff;
    padding-top: 13px;
}

.log-div:hover{
	box-shadow:1px 1px 10px #880204;
}
#log1{
	opacity:0;
	transform:translateX(-200px);
	transition:all 0.8s ease-in-out;
    vertical-align: top;
}
#log1 img{
	margin-top:10px;
}
#log2{
	opacity:0;
	transform:translateX(200px);
	transition:all 0.8s ease-in-out;
    vertical-align: top;
}


#log1.is-showing{
	opacity:1;
	transform:translateY(0px);
	transition:all 0.8s ease-in-out;
}

#log2.is-showing{
	opacity:1;
	transform:translateY(0px);
	transition:all 0.8s ease-in-out;
}
#log1 p{
	color:#FFFFFF;
	font-size:12px;
	padding:5px;}
	#log2.is-showing p {
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px;
}
@media screen and (max-width:1155px)    
{
	.log-div {    
		width: 28%;
	}
	#ASN h1 { 
    	margin-top: 0px;
	}
	.school-logo {
		margin-top:0;
    bottom: 20px;
}
}
@media screen and (max-width:875px)    
{
	.log-div {    
		width:34%;
	}
}
@media screen and (max-width:756px)   
{
	.log-div h3 {
		padding-top: 9px;
		font-size: 16px;
	}
}
@media screen and (max-width:615px)  
{
	#ASN h1 {
    	padding-top: 40px;
		top: 0;
		transform: translate(-50%, 0%);

	}
	.back-img {
    	height: 720px;
	}

	.log-div {
		width: 70%;
    	margin: 20px 0px;
	}
	.school-logo {
		top: 270px;
	}
}