/* Media Queries for all mobile devices */


/* For 800px to 980px (Tablet) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

	/*body:before{
		content: 'Old Desktop/Tablet';
	}*/

	.header-container {
		min-height: 95px;
	}

		.logo {
			width: 170px;
			margin-left: 10%;
		}

		.main-nav {
			margin-top: 30px;
		}

			.main-nav li a {
				line-height: 35px;
			}

			/*.main-nav li:last-child a{
				margin-right: 0;
				padding-right: 0;
			}*/

			.main-nav li a, .main-nav li a:visited{
				margin: 0 5px;
				padding: 0 10px;
			}

			.main-left{
				width: 65%;
			}

			.main-right{
				width: 27%;
				padding-left: 4%;
			}

				.links li a{
					width: 100% !important;
				}

			.social li {
				/*width: 27px;
				height: 27px;*/
			}

	.container {
		padding: 3%;
	}
}


/* For 480px to 768px (Tablet) */
@media screen and (min-width: 481px) and (max-width: 767px) {

	/*body:before {
		content: 'Tablet';
	}*/

	.header-container {
		min-height: 50px;
		background: #ffffff;
	}

		.menuBtn {
			display: inline-block;
			margin-left: 30px;
			position: fixed;
			top: 0;
			right: 5%;
		}

		.top-header{
			position: fixed;
			min-height: 53px;
			background: rgba(255,255,255,0.9);
			width: 100%;
			box-shadow: 0 2px 4px rgba(0,0,0,0.15);
			z-index: 100;
			-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.15);
		}

			.top-nav, .main-nav{
				display: none;
			}

			.logo {
				float: none;
				/*margin-left: -100px;
				left: 50%;*/
				width: 200px;
				
				position: fixed;
				top: -10px;
				z-index: 102;

				margin-left: 10px;
			}

		.main-nav {
			/*width: 65% !important;
			margin: 30px auto !important;*/
			background: rgba(129,129,129,0.85);
			position: absolute;
			width: 300px !important;
			z-index: 2;
			margin-left: -150px;
			left: 50%;
			bottom: 0;
		}

			.main-nav li{
				display: block;
				border-bottom: 1px solid #A1A1A1;
			}

			.main-nav li a {
				font-size: 11px !important;
				font-weight: 800;
			}

			/*.main-nav li:last-child a{
				margin-right: 0;
				padding-right: 0;
			}*/

			.main-nav li a, .main-nav li a:visited{
				margin: 0;
				padding: 0;
			}

	.container {
		padding: 3%;
	}

			.container h2 {
				font-size: 12pt;
				background-position: center bottom;
			}

			.image-banner{
				width: 100%;
			}

			/* -- Small Image Banner on Collaboration Page -- */
			img.small-banner{
				width: 99%;
			}

			.main-left, .main-right {
				width: 100%;
				float: none;
			}

				.main-left p, .main-right p{
					font-size: 9pt;
				}

				.main-right h3, .mainContent h2{
					text-align: center;
					margin-top: 5px;
				}

			.main-left{
				min-height: 0;
			}

			.main-right {
				border-left: none;
				margin-bottom: 25px;
				padding-left: 0;
			}

				.links{
					margin: 20px 0 0;
				}

					.links li{
						list-style: none;
					}

					.links li > a, .links li > a:visited{
						background: #E7E7E7;
						margin-bottom: 15px;
						display: block;
						padding-left: 0;
						-webkit-border-radius: 5px;
						border-radius: 5px;
						text-align: center;
						/*font-weight: 800;*/
						-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.08);
						box-shadow: inset 0 0 8px rgba(0,0,0,0.08);
						width: 100%;
						text-transform: uppercase;
					}

				.social{
					text-align: center;
					height: 45px;
				}

					.social li{
						width: 40px;
						height: 40px;
					}

					/* -- On Contact Page -- */
			
					header.right-widget {
						text-align: center;
					}

					.homeAdd, .phone, .email, .mapLink{
						width: 100%;
						padding-left: 0;
					}

						.homeAdd {
							background-position: 20% 15px;
						}
						.phone, .mapLink, .email{
							background-position: 20% -2px;
						}
						.email{
							margin: 5px 0 25px;
						}
						.mapLink{
							margin-top: 0;
						}


		.image-map {
			height: 140px;
			width: 100%;
			border-width: 0;
		}
		
		.info-txt {
			font-size: 7pt;
		}

	.copyright {
		line-height: 22px;
	}

		.copyright p {
			font-size: 6pt;
		}


	#contact-form input[type='text'], #contact-form input[type='email'], #contact-form input[type='tel'], #contact-form input[type='url'], #contact-form textarea {
			width: 95%;
		}

	#contact-form input[type='text']:focus, #contact-form input[type='email']:focus, #contact-form input[type='tel']:focus, #contact-form input[type='url']:focus, #contact-form textarea:focus {
			width: 98%;
		}

	#submit{
		width: 80%;
	}

	/* -- On other pages => Bauxite and Alumina, Mining, Tailings and Services for an image's small image size --*/
	img.float_img{
		width: 175px;
	}

	img.float_img.large {
		width: 260px;
		float: none;
		margin: 0 0 20px;
		display: block;
	}

	.subLinks{
		float: none;
		text-align: center;
		margin-bottom: 10px;
		width: 100%;
	}

		.subLinks li:first-child{
			margin-right: 0;
		}

		.subLinks li:last-child a{
			margin-left: 0;
		}

	
	.border{
		background: none;
	}
}



/* For 320px to 480px (Small Phones) */
/*@media screen and (min-width: 320px) and (max-width: 480px){*/
	@media screen and (max-width: 480px){

	/*body:before {
		content: 'Tablet';
	}*/

	.header-container {
		min-height: 45px;
		background: #ffffff;
	}

		.menuBtn {
			display: inline-block;
			margin-left: 30px;
			position: fixed;
			top: -10px;
			right: 5%;
		}

		.top-header{
			position: fixed;
			min-height: 53px;
			background: rgba(255,255,255,0.9);
			width: 100%;
			z-index: 100;
			box-shadow: 0 2px 4px rgba(0,0,0,0.15);
			-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.15);
			z-index: 100;
		}

		.top-nav, .main-nav{
			display: none;
		}

			.logo {
				float: none;
				
				width: 170px;
				/*margin-left: -100px;
				left: 50%;*/

				position: fixed;
				top: -10px;
				z-index: 102;
			}

			.menuList li a, .menuList li a:visited{
				font-size: 9pt;
			}

		.main-nav {
			/*width: 65% !important;
			margin: 30px auto !important;*/
			background: rgba(129,129,129,0.85);
			position: absolute;
			width: 300px !important;
			z-index: 2;
			margin-left: -150px;
			left: 50%;
			bottom: 0;
		}

			.main-nav li{
				display: block;
				border-bottom: 1px solid #A1A1A1;
			}

			.main-nav li a {
				font-size: 11px !important;
				font-weight: 800;
			}

			/*.main-nav li:last-child a{
				margin-right: 0;
				padding-right: 0;
			}*/

			.main-nav li a, .main-nav li a:visited{
				margin: 0;
				padding: 0;
			}

			.full-menu{
				margin-right: -225px;
			}

	.container {
		padding: 3%;
	}

			.container h2 {
				font-size: 12pt;
			}

			.image-banner{
				width: 100%;
			}

			/* -- Small Image Banner on Collaboration Page -- */
			img.small-banner{
				width: 99%;
			}

			.main-left, .main-right {
				width: 100%;
				float: none;
			}

				.main-left p {
					font-size: 9pt;
				}

				.main-right p {
					font-size: 8pt;
				}

				.main-right h3, .mainContent h2{
					text-align: center;
					margin-top: 5px;
				}

			.main-left{
				min-height: 0;
			}

			.main-right {
				border-left: none;
				margin-bottom: 25px;
				padding-left: 0;
			}

				.links{
					margin: 20px 0 0;
				}

					.links li{
						list-style: none;
					}

					.links li > a, .links li > a:visited{
						background: #E7E7E7;
						margin-bottom: 15px;
						display: block;
						padding-left: 0;
						-webkit-border-radius: none;
						border-radius: none;
						text-align: center;
						/*font-weight: 800;*/
						-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.08);
						box-shadow: inset 0 0 8px rgba(0,0,0,0.08);
						width: 100%;
						text-transform: uppercase;
						font-size: 8pt;
					}

				.social{
					text-align: center;
					height: 35px;
				}

					.social li{
						width: 30px;
						height: 30px;
					}

			/* -- On Contact Page -- */
			
			header.right-widget {
				text-align: center;
			}

			.homeAdd, .phone, .email, .mapLink{
				width: 100%;
				padding-left: 0;
			}

				.homeAdd {
					background-position: 12% 15px;
				}
				.phone, .mapLink, .email{
					background-position: 12% -2px;
				}
				.email{
					margin: 5px 0 25px;
				}
				.mapLink{
					margin-top: 0;
				}


		.image-map {
			height: 140px;
			width: 100%;
			border-width: 0;
		}
		
		.info-txt {
			font-size: 7pt;
		}

	.copyright {
		line-height: 22px;
	}

		.copyright p {
			font-size: 6pt;
		}


	#contact-form input[type='text'], #contact-form input[type='email'], #contact-form input[type='tel'], #contact-form input[type='url'], #contact-form textarea {
			width: 95%;
		}

	#contact-form input[type='text']:focus, #contact-form input[type='email']:focus, #contact-form input[type='tel']:focus, #contact-form input[type='url']:focus, #contact-form textarea:focus {
			width: 98%;
		}

	#submit{
		width: 70%;
	}

	/* -- On other pages => Bauxite and Alumina, Mining, Tailings and Services for an image's small image size --*/
	img.float_img{
		float: none;
		display: block;
		margin: 0 auto 20px;
		width: 160px;
	}

	img.float_img.large {
		width: 60%;
		float: none;
		margin: 0 auto 20px;
		display: block;
	}

	.subLinks{
		float: none;
		text-align: center;
		margin-bottom: 10px;
		width: 100%;
	}

		.subLinks li:first-child{
			margin-right: 0;
		}

		.subLinks li:last-child a{
			margin-left: 0;
		}

	.block {
		text-align: center;
		display: block;
	}

	.border{
		background: none;
	}
}