/* HERO STYLES */
.hero					{ background-image: url('../images/contact/hero_bg.jpg'); height: 300px; }

/* MAIN CONTENT STYLES */
.hldr					{ background-image: url('../images/global/shadowRight.png'); background-position: bottom right; padding: 0 0 6em 0; margin-bottom: -1em; }
#contactDetails			{ text-align: center; background-color: #ebebeb; padding: 4em 4% 4em; }
.content h4, .content h5 { letter-spacing: 0.05em; }
.content h5				{ color: #484848; font-size: 3em; padding-top: 0.5em; }
.content h4				{ float: left ; width: 30%; padding: 0.6em 0 0.6em 9%; font-size: 3.05em; text-align: left; background: #ebebeb url('../images/contact/contact_spr.png') no-repeat left top; background-size: 50px; }
.content h4 a			{ color: #484848; }
#phoneNo				{ background-position: left 12px; }
#emailAdd				{ background-position: left -88px; width: 50%; }
#postalAddress			{ font-size: 3.4em; }

/* CONTACT FORM STYLES */
#contactForm .fieldWrap { width: 49%; float: left; }
#contactForm .textareaWrap { width: 100%; }
#contactForm .textbox, #contactForm .textarea { margin-top: 1em; }
#contactForm .textbox:hover, #contactForm .textarea:hover { background-color: #f9fdff; }
#contactForm .textbox:focus, #contactForm .textarea:focus { background-color: #eefaff; }
#contactForm .textbox	{ width: 92%; padding: .5em 4%; }
#contactForm .textarea	{ width: 96%; padding: .5em 2%; }
#contactForm .mr		{ margin-right: 2%; }
#contactForm .button	{ padding: 0em 2em; margin: 0.5em 0; }
#contactForm .captcha	{ width: auto; clear: left; }
#contactForm .captcha-wrapper	{ margin-top: 10px; padding: 10px; background: #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center; }
#contactForm .captcha-field		{ margin-top: 10px; }
#contactForm #surname	{ display: none; }
#contactForm .phone-holder	{ text-align: justify; font-size: 2em; }
#contactForm .phoneNumber,
#contactForm .phoneArea	{ display: inline-block; box-sizing: border-box; font-size: 0.8em; }
#contactForm .phoneArea	{ width: 18%; }
#contactForm .phoneNumber	{ float: right; width: 75%; }

/* SOCIAL MEDIA BUTTONS */
#social					{ width: 55%; height: 80px; margin: 0 auto; padding-top: 3em; }
#social a				{ display: inline-block; height: 80px; width: 20%; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: 0; text-indent: -9999em; }
.socialBtn				{ background: #ebebeb url('../images/contact/social_sprite.png') no-repeat center top; }
#googlePlus				{ background-position: center 0px; }
#googlePlus:hover		{ background-position: center -80px; }
#facebook				{ background-position: center -160px; }
#facebook:hover			{ background-position: center -240px; }
#linkedIn				{ background-position: center -320px; }
#linkedIn:hover			{ background-position: center -400px; }
#twitter				{ background-position: center -480px; }
#twitter:hover			{ background-position: center -560px; }
#youTube				{ background-position: center -640px; }
#youTube:hover			{ background-position: center -720px; }

/* NOTIFICATION STYLING */
label.error, #warning	{ font-size: 1.55em; color: #b70000; }
label.error				{ display: block; text-align: left; padding-left: 4%; margin-top: 0.5em; }
#loader					{ margin-left: 20px; }
.notification			{ margin: 0 auto 1em; padding-left: 8%; background: #ebebeb url('../images/contact/notification_sprite.png') no-repeat left top; height: 53px; padding-top: 1.5em; }
#confirmation			{ color: #6eaf25; width: 60%; }
#warning				{ width: 20%; background-position: left -100px; }




/* ///////////////////////////////////////////////////////////// */
/* ///////////////////// MEDIA QUERIES ///////////////////////// */

/* MOBILE PHONES & TABLETS (SHARED STYLES) ///////////////////// */
@media screen and (max-width: 959px) {
	.socialBtn			{ background: #ebebeb url('../images/contact/socialMob_sprite.png') no-repeat center top; background-size: 65px; }
	.notification		{ background: #ebebeb url('../images/contact/notificationMob_sprite.png') no-repeat left top; background-size: 65px; }
}

/* TABLETS (IN PORTRAIT) /////////////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 959px) {
	#contactDetails		{ padding: 2em 4%; }
	.notification		{ padding-left: 10%; }
	#confirmation		{ width: 70%; }
	#social				{ width: 60%; }
	.content h4			{ width: 30%; font-size: 3.4em; padding: 0.4em 0 0.4em 10%; }
}

/* TABLETS (IN PORTRAIT) < 800PX /////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 800px) {
	.content h5			{ font-size: 2.8em; padding-top: 0.5em; }
	.textbox, .textarea	{ font-size: 1.8em; }
	label.error, #warning { font-size: 1.5em; }
	.notification		{ padding: 1em 0 0.5em 12%; }
	#confirmation		{ width: 73%; }
	#social				{ width: 70%; }
}

/* TABLETS (IN PORTRAIT) < 700PX /////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 860px) {
	.content h4			{ float: none; width: auto; margin: 0 auto; text-align: center; padding: 0.4em 0 0.4em 10%; }
	#phoneNo			{ background-position: 18% 10px; }
	#emailAdd			{ background-position: 10% -91px;  width: auto; }
	.content h5			{ font-size: 2.3em; }
	#contactForm .fieldWrap { width: 48%; }
	#contactForm .mr	{ margin-right: 4%; }
	.textbox, .textarea	{ font-size: 1.6em; }
	label.error, #warning { font-size: 1.4em; }
	.notification		{ padding-left: 14%; }
	#confirmation		{ width: 80%; }
	#social 			{ width: 80%; }
}

/* TABLETS (IN PORTRAIT) < 600PX /////////////////////////////// */
@media screen and (min-width: 569px) and (max-width: 600px) {
	
	.content h5			{ font-size: 1.95em; }
	
	.notification		{ padding: 0.5em 0 1em 15%; }
}

/* MOBILE PHONES <568px //////////////////////////////////////// */
@media screen and (max-width: 568px) {
	.hero				{ height: 200px; background-size: 1400px; background-position: 75% top; }
	.hero h1			{ font-size: 3.8em; }
	.hldr				{ padding: 0 0 6em 0; margin-right: 0; margin-bottom: -4.5em; }
	#contactDetails		{ padding: 1em 4%; }
	.content h4			{ float: none; width: auto; margin: 0 auto; text-align: center; font-size: 2.8em; padding: 0.4em 0 0.4em 10%; background-size: 40px;}
	.content h5			{ font-size: 1.95em; padding-top: 0; }
	#phoneNo			{ background-position: 26% 10px; }
	#emailAdd			{ background-position: 11% -70px;  width: auto; }
	.textbox, .textarea	{ font-size: 1.6em; }
	label.error, #warning { font-size: 1.4em; }
	.notification		{ padding-left: 15%; text-align: left; }
	#confirmation, #warning { width: 85%; }
	#social				{ width: 80%; padding-top: 1em;	}
}

/* MOBILE PHONES <480px //////////////////////////////////////// */
@media screen and (max-width: 480px) {
	.content h4			{ font-size: 2.2em; padding: 0.5em 0; background: none; }
	#phoneNo			{ background-position: 16% 7px; }
	#emailAdd			{ background-position: 0% -75px; }
	#contactForm .fieldWrap { float: none; width: 100%; }
	#loader				{ margin: 0 auto 0.5em; }
	.notification		{ padding-left: 20%; }
	#confirmation, #warning { width: 80%; }
	#social				{ width: 100%; }
}

/* MOBILE PHONES <350px //////////////////////////////////////// */
@media screen and (max-width: 350px) {
	.content h4			{ font-size: 2.2em; padding: 0.5em 0; background: none; }
	#phoneNo			{ background-position: 16% 7px; }
	#emailAdd			{ background-position: 0% -75px; }
	#contactForm .button { width: 100%; padding: 0; }
	.notification		{ background-size: 39px; height: 44px; padding: 0 0 0 20%; }
	#confirmation		{ width: 80%; }
	#social 			{ width: 80%; }
	#social, #social a	{ height: 48px; }
	.socialBtn			{ background-size: 39px; }
	#googlePlus			{ background-position: center 0px; }
	#googlePlus:hover	{ background-position: center -48px; }
	#facebook			{ background-position: center -96px; }
	#facebook:hover		{ background-position: center -144px; }
	#linkedIn			{ background-position: center -192px; }
	#linkedIn:hover		{ background-position: center -240px; }
	#twitter			{ background-position: center -288px; }
	#twitter:hover		{ background-position: center -336px; }
	#youTube			{ background-position: center -384px; }
	#youTube:hover		{ background-position: center -432px; }
}