@charset "utf-8";
/* CSS Document */



.container{
	border-top: double;
	padding-top: 30px;
width: 	100%;
height: auto;
background: rgba(70,121,152,0.16);
	/* add flexbox style */
display: flex;

justify-content: space-around;	
flex-flow:wrap;	
flex-direction: row;
}


.responsive {
  max-width: 100%;
  height: auto;
}

#box-8{
	
	position: relative;
background-color: #44AA2B;
	margin-right: auto;
	margin-left: auto;
	width: 200px;
	height: 30px;
	font-size: 1.5em;
	margin-top: 10px;
	text-align: center;

}
#box-9{

	position: relative;
background-color: #E91515;
	margin-right: auto;
	margin-left: auto;
	width: 200px;
	height: 30px;
	font-size: 1.5em;
	margin-top: 10px;
	text-align: center;
}

.center{
display: block;	
margin-right: auto;
  margin-left: auto; 
	padding-top: 10px;
}

a:link {
  color: white;
}

/* visited link */
a:visited {
  color: lightgoldenrodyellow;
}

a:link {
  text-decoration: none;
}

@media only screen and (min-width : 1101px) {
	
	#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 5em;
		
	} 
	
	
	
		
	}
	
	.container-l{
	width: 45%;
		float: left;
		margin-left: 10px;
		background-color: whitesmoke;

	}
	
	.box-1, .box-2, .box-3, .box-4{
		
	width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;	
		
	}
	
.box-5, .box-6{
	text-align: right;
		direction: rtl;
		width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;
	}








@media only screen and (min-width : 601px) and (max-width : 1100px){
	
	#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 5em;
		
	} 
	
	
	
	
	.container-l{
	width: 45%;
		float: left;
		margin-left: 10px;
		background-color: whitesmoke;
	}
	
	.box-1, .box-2, .box-3, .box-4{
		
	width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;	
		
	}
	
	.box-5, .box-6{
		text-align: right;
		direction: rtl;
		width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;
	}

	
}





@media screen and (max-width: 600px) { 
	
	#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 2em;
		
	} 
	
	
	
	.container-l{
	width: 45%;
		float: left;
		margin-left: 10px;
		background-color: whitesmoke;
		
	}
	
	.box-1, .box-2, .box-3, .box-4{
		
	width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;	
		
	}
	
	.box-5, .box-6{
		text-align: right;
		direction: rtl;
		width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;
	}


}






@media only screen and (min-width : 150px) and (max-width : 600px){
	
	#top-name {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 2em;
		
	} 
	
	
	
	.container-l{
	width: 45%;
	float: left;
	margin-left: 10px;
		background-color: whitesmoke;
	}
	.box-1, .box-2, .box-3, .box-4{
		
	width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;	
		
	}
	
	.box-5, .box-6{
	text-align: right;
		direction: rtl;
		width: 30%;	
	height: auto;
	padding-left: 6px;
	padding-right: 6px;
		
	}

}