/* Website Designed by Francis Odozi Isibor */
/* CSS for iPads/Tablets */


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	.cols2a	{
		display:none;
	}
	.bannerwrapper	{
		width:85%;
		margin:0 auto;
	
		padding-top:70%;
		padding-bottom:20px;
		
	}
	.picm	{
		height:100px;
		margin-bottom:20px;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	.cols2a	{
	}
	.bannerwrapper	{
		width:85%;
		margin:0 auto;
	
		padding-top:30%;
		padding-bottom:20px;
		
	}
	.picm	{
		height:150px;
		margin-bottom:20px;
	}
}


@media screen and (min-device-width : 480px) and (max-device-width : 1024px)  { 
	
	/*	#######################	*/
	/* 	Elements */
	/*	#######################	*/

	.image	{
		margin-bottom:20px;
	}
	

	.image	img	{
		border-style:solid;
		border-width:2px;
		border-color:rgba(212,217,56,0.5);
		margin-right:20px;
	}
	/*	#######################	*/
	/* 	Positioning / Dimensions */
	/*	#######################	*/
		
	.force800	{
		width:80%;
		margin:0 auto;
	}
	.force800	img	{
		width:100%;
		margin:0 auto;
	}
	.bannerh2	{
		width:400px;
		float:right;
		position:relative;
		top:-40px;
	}
	
	/*	#######################	*/
	/* 	Columns */
	/*	#######################	*/
	.sidemenua	{
		width:17%;
		float:left;
		padding-left:0.5%;
		padding-right:0.5%;
		margin-left:1%;
		margin-right:1%;
	}
	.sidemenub	{
		width:75%;
		float:left;
		padding-left:1%;
		padding-right:1%;
		margin-left:1.5%;
		margin-right:1.5%;
	}
	
	.unselected	{
		padding-left:5px;
		padding-right:5px;
	
	}
	.unselected:hover	{
		color:rgba(212,217,56,1.0);
	
	}
	.selected	{
		background-color:#d4d938;
		color:white;
		
	}
	.apply	a	{
		padding-left:10px;
		padding-right:10px;
	}
	/*	#######################	*/
	/* 	Captions / Text Themes 	*/
	/*	#######################	*/
	
	.titlewrapper	{
		width:95%;
		margin:0 auto;
	}
	
	.bannerwrapper	{
		width:85%;
		margin:0 auto;
	
		padding-bottom:20px;
		
	}
	
	.basicwrapper	{
		width:85%;
		margin:0 auto;
		padding-top:20px;
		padding-left:0px;
		padding-right:0px;
		padding-bottom:20px;
		
	}
	.basicwrapperleft	{
		width:85%;
		margin:0 auto;
		padding-top:20px;
		padding-left:0px;
		padding-right:0px;
		padding-bottom:20px;
		
	}
	
	.basicwrapperleft	h4	{
		font-size:10px;
	}
	
	
	/*	#######################	*/
	/* 	Logo */
	/*	#######################	*/
	#logo	{
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;
		width:224px;
		height:50px;
		padding-left:2.5%;
	
	}
	#logo	img	{
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;
	
		overflow:hidden;
		max-width: 100%;
		height: 50px;
	}
	
	
	
	/*	#######################	*/
	/* 	Menu */
	/*	#######################	*/
	
	
	ul#menu	{
	
		display:none;
	}
	
	#newmenu	{
		display:block;
		
		-webkit-transition:all 0.5s ease-in-out;
		-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
		transition:all 0.5s ease-in-out;
		z-index:100;
		position:fixed;
		top:10px;
		left:94%;
	}
	#newmenu	img	{
		height:30px;
		width:30px;
	}
	
	#mobilemenu	{
		
		display:block;
		
		-webkit-transition:all 0.5s ease-in-out;
		-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
		transition:all 0.5s ease-in-out;
	
		

	
		z-index:100;
		
		
		
	
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
	}
	
	#mobilemenu		img	{
		height:30px;
		width:30px;
		position:relative;
		top:10px;
		left:94%;
	}
	
	.menunotclicked	{
		width:50px;
		height:50px;
		overflow:hidden;
		opacity:1.0;
	}
	
	.menunotclicked	a	{
		position:relative;
		top:50px;
		opacity:0;
	}
	
	.menuclicked	{
		/*
		background: -webkit-ease-in-out-gradient(#FB2B69, #34AADC);
		background: -o-ease-in-out-gradient(#FB2B69, #34AADC); 
		background: -moz-ease-in-out-gradient(#FB2B69, #34AADC); 
		background: ease-in-out-gradient(#FB2B69, #34AADC); 
		*/
		
		background: -webkit-linear-gradient(to right,rgba(0,0,0,0.0), rgba(0,0,0,0.8)); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(to right,rgba(0,0,0,0), rgba(0,0,0,0.8)); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(to right,rgba(0,0,0,0), rgba(0,0,0,0.8)); /* For Firefox 3.6 to 15 */
		background: linear-gradient(to right,rgba(0,0,0,0), rgba(0,0,0,0.8)); /* Standard syntax */
	
		position:fixed;
		top:0px;
		left:0px;
		width:30%;
		height:100%;
		overflow:hidden;
		z-index:100;
	}
	.menuclicked	a	{
		position:relative;
		top:0px;
		opacity:1.0;
	}
	
	.pageMoved	{
		/*
		-ms-transform: translate(-400px,0px); 
		-webkit-transform: translate(-400px,0px); 
		transform: translate(-400px,0px);
		*/
	}
	ul#fullmenu	{
		padding-top:50px;
	}
	ul#fullmenu	li	{
		padding-top:10px;
		padding-bottom:10px;
		list-style-type: none;
		width:100%;
		text-align:right;
		margin-top:2%;
		
		margin-bottom:2%;
	}
	ul#fullmenu	li	a{
		-webkit-transition:all 0.5s ease-in-out;
		-moz-transition:all 0.5s ease-in-out;
		-o-transition:all 0.5s ease-in-out;
		transition:all 0.5s ease-in-out;
		
		text-decoration:none;
		
		font-family: 'Montserrat', sans-serif;
		
		font-weight:400;
		font-size:34px;
		color:white;
		padding:15px;
		margin-right:50px;
		width:100%;
		
	}
	
	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/
	
	
	#background	{
		width:100%;
		height:100%;
		position:fixed;
	}
	
	#nav	{
		width:100%;
		margin:0 auto;
	}
	#singlebanner	{
		width:100%;
		height:100%;
		margin:25px auto;
		
		
		/* background-color:white; */
		/* box-shadow: 0px 5px 0px rgba(212,217,56,1.0); */
	
	}
	#about	{
		width:95%;
		margin:0 auto;
	}
	#services	{
		width:95%;
		margin:35px auto;
	}
	#careers	{
		width:95%;
		margin:35px auto;
	}
	#jobs	{
		width:95%;
		margin:35px auto;
	}
	#login	{
		width:95%;
		margin:35px auto;
	}
	#safety	{
		width:95%;
		margin:35px auto;
	}
	#ict	{
		width:95%;
		margin:35px auto;
	}
	#footer	{
		width:95%;
		margin:35px auto;
	}
	.map	{
		width:70%;
		max-width:700px;
		height:300px;
	
		overflow:hidden;
	
		float:left;
	
	
	
	}
	#credit	{	
		height:20px;
		width:100%;
		font-size:12px;
	}
	#credit	a{
		font-size:12px;
	}
	.credit	li	a{
		font-size:12px;
		
	}
	#banner	{
		width:95%;
		margin:0 auto;
		/* background-color:white; */
	
	}
}