@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body{
	margin: 0px;
	padding: 0;
	overflow-x: hidden;
	font-family: 'Roboto Condensed', sans-serif;
}

h1{
	text-align: center;
	margin: 50px 0 0 0;
	font-weight: 700;
    color: #2426b3;
}
h2{
	color: #2426b3;
}
hr{
	width: 153px;
    margin: 8px 0 40px 45%;
    border: 0.5px solid #2526B3;
}
#resources{
	margin: 60px 0 40px 0;
}
#resources .resour{
	margin: 20px 0 20px 0;
}
#resources .resour img{
	width: 200px;
    height: 200px;
    margin: 0 0 3% 21%;
}
#resources h4{
	text-align: center;
	font-size: 1.5em;
}
#resources a{
	color: #2426B3;
	text-decoration: none;
}
#resources a:hover{
	color: #0087C6;
}


/*RESPONSIVE*/

@media(max-width: 1080px){
	#resources .resour img {
    	margin: 0 0 3% 13%;
	}
    
}
@media(max-width: 1024px){
	#resources .resour img {
 	   margin: 0 0 3% 9%;
	}
    
}
@media(max-width: 960px){
    #resources .resour img {
 	   margin: 0 0 3% 16%;
	}
}
@media(max-width: 800px){
    #resources .resour img {
    	margin: 0 0 3% 17%;
	}
}
@media(max-width: 768px){
    #resources .resour img {
    	margin: 0 0 3% 18%;
	} 
}
@media(max-width: 736px){
    #resources .resour img {
    	margin: 0 0 3% 34%;
	} 
}
@media(max-width: 667px){
    #resources .resour img {
    	margin: 0 0 3% 34%;
	}
	hr{
    margin: 8px 0 40px 31%;
	}  
}
@media(max-width: 640px){
    #resources .resour img {
    	margin: 0 0 3% 33%;
	}
	hr{
    margin: 8px 0 40px 40%;
	}
}
@media(max-width: 600px){
	#resources .resour img {
    	margin: 0 0 3% 32%;
	}
	hr{
    margin: 8px 0 40px 36%;
	}
}
@media(max-width: 533px){
    #resources .resour img {
    	margin: 0 0 3% 29%;
	}
}
@media(max-width: 480px){
    h1{
    	margin: 0 0 0 0;
		font-size: 1.5em;
	}
	h2{
		font-size: 1.6em;
	}
	h4{
		font-size: 1.2em;
	}
	hr{
	width: 128px;
    margin: 8px 0 40px 36%;
	}
	#resources .resour img {
    	margin: 0 0 3% 27%;
	}
}
@media(max-width: 414px){
    #resources .resour img {
    	margin: 0 0 3% 23%;
	}
	hr{
    margin: 8px 0 40px 33%;
	}
}
@media(max-width: 384px){
    #resources .resour img {
    	margin: 0 0 3% 23%;
	}
}
@media(max-width: 375px){
	#resources .resour img {
    	margin: 0 0 3% 22%;
	}
}
@media(max-width: 360px){	
	#resources .resour img {
    	margin: 0 0 3% 20%;
	}
}
@media(max-width: 320px){
    #resources .resour img {
    	margin: 0 0 3% 16%;
	}
	hr{
    margin: 8px 0 40px 30%;
	}
}