#content{
background:lightgrey;
}

#content h2{
	padding-top:30px;
}

#top{
	display:flex;
	background:lightgrey;
}

#top img{
	width: 100%;
	vertical-align:top;
}

#topLeft{
	width:45%;
	padding-bottom:20px;
}
#topRight{
	width:55%;
}

#bottom{
	display:flex;
	background:#b4b4b4;
}

#bottom img{
	width:100%;
	vertical-align:top;
}

#bottomLeft{
	flex:1.55;
}
#bottomRight{
	flex:1;
}

/*tablet*/

@media screen and (max-width: 900px) {
	
	#top{
	flex-direction:column;
	}


	#topLeft{
	width:80%;
	padding:0 10% 0px 10%;
	}
	#topRight{
	width:60%;
	padding:0 20% 20px 20%;
	}

	#bottom{
	flex-direction:column-reverse;
	}

	#bottomLeft{
	width:80%;
	padding:0 10% 0px 10%;
	}
	#bottomRight{
	width:80%;
	padding:0 10% 20px 10%;
	}
	
}
/*Mobile*/

@media screen and (max-width: 700px) {
	
	#topLeft{
	width:100%;
	padding:0 0 0 0;
	}
	
	#topRight{
	width:80%;
	padding:0 10% 0 10%;
	}

	#bottomLeft{
	width:100%;
	padding:0 0 0 0;
	}
	
	#bottomRight{
	width:100%;
	padding:0 0 10px 0;
	}
}