@media (min-width: 300px) 

  and (max-width: 900px) {

  	header {

margin-top: 10px;

margin-left: 0px;

}

#header-content h1{

	float: none;

font-size: 100%;

margin-left: 0px;

}



#header-content nav {

	float: none;

		margin: 0;

		}

			#header-content ul {

			 list-style: none; padding: 0px; margin: 0px; 

			}



#header-content nav ul li {

		float: none;

		font-family: "Roboto", sans-serif;

	text-transform: uppercase;

	margin-top: 20px;

	margin-left: 0px;

	text-align: left;

padding:10px;



font-size: 30px;

			display: block; 

			font-weight: bold;

			}



			#header-content nav ul li.active, #header-content nav ul li:active {

    background-color: #ddd;

}





			#header-content nav li {

				float: none;



				

				margin-right: 0px;

			

				padding-left:0px;

				list-style: none;

	

			}



#header-content  nav ul ul {

	display: none;

 vertical-align: middle;

z-index: 100;

}



	#header-content  nav ul li:active > ul {

		display: block;text-align: center;



	}



#header-content  	nav ul:after {

		content: ""; clear: both; display: block;

	}

#header-content 	nav ul ul {

display: none;

	background: #000; 

	opacity: .7;

	border-radius: 0px; 

	padding: 0;

	position: absolute; 

	top: 65%;



	width: 200px;





}

	#header-content nav ul ul li {

		display: block;

		float: none; 

         padding:10px 0 10px 0px;

		position: relative;

        text-align: center;

        width: 200px;

			opacity: 1;

	}

		





		nav ul ul li a {

			opacity:1;

			padding: 0px;

			color: #fff;

		

						}	

			nav ul ul li:hover {

				opacity: 1;

				background: #4b545f;

				padding:0px 15px 0 15px;
				
				position: relative;

			}

#header-content img{

	width:10%;

margin-top: -30px;

margin-left: 0px;

	float:none;

}



#banner {

	height: 100%;

	position: fixed;

	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(../images/mainimage.jpg); 

	background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.4) 0%,rgba(0, 0, 0, 0.4) 100%), url(../images/mainimage.jpg); 

	background-size: 250%;

	background-position:  center right;

	width: 100%;

	top: 00px;

	z-index: 0;



}



/*Copyright: <a href='http://www.123rf.com/profile_wavebreakmediamicro'>wavebreakmediamicro / 123RF Stock Photo</a>*/



#banner h2{

	width: 40%;

	display: block;

	padding-top: 10%;

margin-left: 400px;

text-align: right;

line-height: 80px;

	font-size: 65px;

}

#banner h3{

	float: none;

	font-size: 20pt;

	padding-top: 1%;

	padding-bottom: 3%;

margin-left:400px;

	width: 40%;

	text-align: right;

}

.scrollbutton{

display: none;



}

.box{



	background: -moz-linear-gradient(top, #fdc735 0%, #e3a702 100%); 

	background: -webkit-linear-gradient(top, #fdc735 0%, #e3a702 100%);

	width:100px;

	height: 100px;

overflow: auto;

border-radius: 50px;

	margin-top: 10px;

	margin-left: 0px;

	

display: inline-block;

padding-left: 0px;

transition: ease-in-out 0.2s;

}

.box:hover, .box2:hover, .box3:hover{

 -ms-transform: scale(2, 2); /* IE 9 */

    -webkit-transform: scale(2, 2); /* Safari */

    transform: scale(1.1, 1.1);

}

.box2{

background: -moz-linear-gradient(top, #1eaace 0%, #1994b3 100%); 

	background: -webkit-linear-gradient(top, #1eaace 0%, #1994b3 100%);

	width:100px;

	height: 100px;

overflow: auto;

border-radius: 50px;

	margin-top: 10px;

	margin-left: 5px;

	transition: ease-in-out 0.2s;

display: inline-block;

padding-left: 0px;

}

.box3{

background: -moz-linear-gradient(top, #1dbb90 0%, #189a78 100%); 

	background: -webkit-linear-gradient(top, #1dbb90 0%, #189a78 100%);

		width:100px;

	height: 100px;

overflow: auto;

border-radius: 50px;

	margin-top: 10px;

	margin-left: 05px;

	transition: ease-in-out 0.2s;

display: inline-block;

padding-left: 0px;

}

.box h2, .box2 h2, .box3 h2{

	color: #fff;

	width: 100px;

	padding-top: 15px;

	padding-left: 0px;

	padding-bottom: 0px;

	font-size: 13px;

	font-weight: 700;

	letter-spacing: 0px;

	text-transform: uppercase;

font-family: Roboto Slab;

	word-break: break-all;



}

.box p, .box2 p, .box3 p{

display: none;



}

.box .icon, .box2 .icon, .box3 .icon{

font-size: 10px;

padding:0;

}





#content{

	top: 700px;

	width: 100%;



}

article {

	width: 80%; padding: 50px 0 50px 0;

	margin: 0 auto;

}

	article p {

		margin: 0 0 30px 0;

		padding-top: 20px;

		text-align: justify;

		font-size: 15px;

	}

	article h2{

		margin: 5px 0 20px 0;

		text-align: center;

		font-size: 37px;

		text-transform: uppercase;

		color:#1eaace;

		font-weight: 700;

		line-height: 37px;

		letter-spacing: 0px;



	}

		article h3{

		font-family: Roboto;

		text-align: center;

		font-weight: 600;

		font-size: 24px;

		padding-bottom: 10px;

		text-transform: uppercase;

		color:#333333;



	}

  }

}