/*
	aw.css

	Alexander-Wright.com Stylesheet.

	Contains mobile phone styles for the Alexander Wright website.

	© Alexander Wright, 2013

	Design

	 ___________________________________________________
	|                                                   |
	|   Head                              				|
	|___________________________________________________|
	|   Navigation						                |
	|___________________________________________________|
	|  	Content                                          |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|___________________________________________________|
	|    Foot                                           |
	|___________________________________________________|



	Green Colour:	#339933 - on white backgrounds
					#66cc66 - on black backgrounds


 */



/*
 	Layout:
	===============================================================================
 */

 @media (max-width: 700px) {

	#headerIndex {
		padding: 					30px 10px 20px 10px;
		font-size:					0.8em;
	}

	.headerImageIndex {
		width: 						60%;
	}



	.alertLeftIcon {
		float: 						none;
		padding: 					10px;
		width:						100%;
	}

	.alertLeft {
		float: 						left;
		padding: 					10px;
		width:						80%;
	}

	.alertRight {
		float: 						right;
		padding: 					10px;
		margin-top: 				5px;
		display:					inline;
	}



	.logoBox {
		float: 						none;
		width: 						100%;
		padding: 					20px;
	}

	.logoIm {
		width: 						100%;
	}


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

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

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

	h1{
		font-size:					1.5em;
	}

	h2{
		font-size:					1.4em;
	}

	.navText {
		font-size:					1.2em;
	}

	.gradBoxContainer {
		width: 						25%;
		float: 						left;
		text-align: 				center;
	}

	.gradBoxContainerHalf {
		width: 						100%;
		float: 						left;
		text-align: 				center;
	}

	.gradBoxArt {
		padding: 					10px;
	}


	.screenList {
		display: 					none;
	}

	.mobileGrid {
		display: 					inline;
	}

    .mobileGridST1 {
		display: 					inline;
	}

    .curricListText{
		margin: 					15px 5px;
		float: 						left;
	}

    .curricListTextSize {
        font-size:                  0.8em;
    }



	.gradBoxContainerSlide {
		width: 						50%;
		float: 						left;
		text-align: 				center;
	}

	.gradBoxContainerSlideHalf {
		width: 						100%;
		float: 						left;
		text-align: 				center;
	}

	.buttonHalfContainer {
		float: 						left;
		width: 						47%;
		padding: 					5px;
	}
	
	/* 
	 * Added 10-05-2024
	 **********************************************/
		.container-centre {
		  position: relative;
		  height: 200px;
		  border: 0px solid #704e92;
		}

		.centered-element {
		  margin: 0;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}

	.gradBoxContainer2 {
		width: 						100%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
	}
	 /**********************************************/

}


 @media (max-width: 500px) {

	 .buttonHalfContainer {
		float: 						left;
		width: 						45%;
		padding: 					5px;
	}

	.gradBoxContainer {
		width: 						50%;
		float: 						left;
		text-align: 				center;
	}

	.gradBoxContainerSlide {
		width: 						100%;
		float: 						left;
		text-align: 				center;
	}

	.screenListThird {
		width:						100%;
		float: 						none;
	}

	.imHalf {
		float: 						none;
		width: 						98%;
	}
	
	/* 
	 * Added 10-05-2024
	 **********************************************/
		.container-centre {
		  position: relative;
		  height: 200px;
		  border: 0px solid #704e92;
		}

		.centered-element {
		  margin: 0;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}

	.gradBoxContainer2 {
		width: 						100%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
	}
	 /**********************************************/

}

 @media (max-width: 250px) {
	.gradBoxContainer {
		width: 						100%;
		float: 						left;
		text-align: 				center;
	}

	.gradBoxContainerSlide {
		width: 						100%;
		float: 						left;
		text-align: 				center;
	}

	
	/* 
	 * Added 10-05-2024
	 **********************************************/
		.container-centre {
		  position: relative;
		  height: 200px;
		  border: 0px solid #704e92;
		}

		.centered-element {
		  margin: 0;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}

	.gradBoxContainer2 {
		width: 						100%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
	}
	 /**********************************************/

}