/* ----------------------------- CONTAINER ----------------------------- */
#content {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	padding: 0px;
	
	background-size: 100%;
	background-repeat: no-repeat;
}
#content #headquarters{	
	margin: 8% auto;
	width: 43%;
	max-width: 500px;
	padding: 3% 2% 0 2%;
	background-color: #fff;
	border: 1px solid #FFAEBD;
}
/* ----------------------------- HEADER ----------------------------- */
#content #headquarters .headquarters-header{
	margin-bottom: 20px;
}
#content #headquarters .headquarters-header h3{
	color: #FE679A;
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 5px;
}
#content #headquarters  p{
	color: #000;
}
#headquarters p.intro {
	clear: both;
}
/* ----------------------------- HEADER INFO -------------------------- */
#content #headquarters .headerInfo  {
	margin: 0 0 15px 0;
	float: left;
	width: 100%;
	height: auto;
	overflow: hidden;
}
#content #headquarters .headerInfo ul {
	border: 0;
}
#content #headquarters .headerInfo ul li.margin {
	margin: 0 0 20px 0;
}
#content #headquarters .headerInfo ul li p.iconPhone {
	background: url("../media/img/icon-phone.gif") no-repeat 0 3px;
	padding: 0 0 0 16px;
}
#content #headquarters .headerInfo ul li span.iconLocation {
	background: url("../media/img/icon-locate.gif") no-repeat 0 0;
	float: left;
	display: block;
	height: 14px;
    width: 10px;
    margin: 2px 5px 0 0;
}
#content #headquarters .headerInfo ul li .block  {
	float: left;
}
#content #headquarters .headerInfo ul li .block span {
	display: block;
}
#content #headquarters .headerInfo ul li.uppercase {
    clear: both;
    float: none;
    margin: 0 0 4px;
}
#content #headquarters .headerInfo ul li.uppercase a {
 	background: url("../media/img/arrow-right-grey.jpg") no-repeat scroll 0 4px transparent;
    font-family: 'Open Sans',arial,sans-serif;
    font-weight: 700;
    font-size: 10px;
    padding: 0 0 0 11px;
    text-transform: uppercase;
    text-decoration: none;
    color: #898989;
}
#content #headquarters .image {
	float: right;
	width: 130px;
	height: 117px;
	display: block;
	margin: 10px;
}
/* ----------------------------- FORM PERSONAL INFO -------------------------- */
#content #headquarters fieldset {
	max-width: 390px;
}
#content .contactForm {
	margin: 25px 0 15px 0;
}
#content .contactForm .personalInfo {
	padding: 0 0 20px 0;
	border-bottom: 1px solid #c2c2c2;
}
#content .contactForm .personalInfo label {
	float: left;
	margin: 0 10px 10px 0;
}
#content .contactForm .personalInfo label.last {
	margin: 0 0 10px 0;
}
#content .contactForm span.inputTitle {
	text-transform: uppercase;
	font-size: 11px;
	line-height: 16px;
	display: block;
	margin: 0 0 0 2px;
}
#content .contactForm label input {
	border: 1px solid #c2c2c2;
	height: 28px;
	padding: 0 5px;
	width: 190px;
	color: #000;
}
/* ----------------------------- FORM MESSAGE -------------------------- */
#content .contactForm .consultInfo {
	margin: 25px 0 0 0;
}
#content .contactForm .consultInfo label {
	display: block;
	margin: 0 0 10px 0;
}
#content .contactForm .consultInfo textarea {
	border: 1px solid #C2C2C2;
    height: 70px;
    padding: 5px;
    width: 390px;
    font-size: 11px;
	color: #000;
}
/* ----------------------------- SUBMIT ----------------------------- */
#content #headquarters fieldset.submitBox {
	max-width: 100%;
	margin: 20px 0 20px 0;
}
#content #headquarters .button-submit{
	display: block;
	width: 35%;
	margin: 0 auto;
}
#content #headquarters .button-submit span{ 
	width: 100%;
	padding: 8px 0;
}
/* ----------------------------- FORM MESSAGES ----------------------------- */
#content #headquarters .contactInfo {
	margin-bottom: 20px;
}
#content #successMessage, #content #errorMessage {
	display: none;
	width: 400px;
	margin-bottom: 20px;
}
#content #headquarters .bold {
	margin: 0;
	font-weight: 600;
}
#content #headquarters .back{
	text-decoration: underline;
}
#content #headquarters input.error, #content #headquarters textarea.error {
  font-weight: normal;
  color: #000;
  border: 1px dashed #f00 !important;
}
#content #headquarters label.error {
	color: #FF0000;
    display: block;
    float: none !important;
    margin: 3px 0 0 !important;
    font-weight: 400;
}

/* ----------------------------- ARABIAN (direction RLT) ----------------------------- */
html[lang=ar] #content {
	transform: scaleX(-1);
	text-align: right;
}
html[lang=ar] #content #headquarters input, 
html[lang=ar] #content #headquarters textarea {
	text-align: right;
}
html[lang=ar] #content #headquarters .headerInfo {
	float: right;
}
html[lang=ar] #content #headquarters .headerInfo ul li p.iconPhone {
    background-position-x: 100%;
	padding-right: 16px;
}
html[lang=ar] #content #headquarters .headerInfo ul li span.iconLocation {
	float: right;
	margin: 2px 0px 0 5px;
}
html[lang=ar] #content #headquarters .headerInfo ul li .block {
	float: right;
}
html[lang=ar] #content #headquarters .headerInfo ul li.uppercase a {
	background: url("../media/img/arrow-left-grey.jpg") no-repeat scroll 100% 4px transparent;
	padding-right: 11px;
}

/* ----------------------------- RESPONSIVE SMALL DESKTOP  ----------------------------- */
@media screen and (max-width: 1400px) {
	#content {
		background-size: 140%;
	}
}
/* ----------------------------- RESPONSIVE TABLET ----------------------------- */
@media screen and (max-width: 1000px) {
	#content {
		background-size: 200%;
	}
	#content #headquarters  {
		width: 70%;
	}
}
@media screen and (max-width: 767px) {
	#content #headquarters .image{
		display: none;
	}
	#content {
		background-size: 300%;
		background-position: 51% 0;
		background-position-x: 51%;
		background-position-y: 0;
		background-repeat: no-repeat;
	}
	#content #headquarters{
		margin: 19% 15%;
		width: 66%;
	}
}
/* ----------------------------- RESPONSIVE MOBILE ----------------------------- */
@media screen and (max-width: 610px) {
	#content {
		background-size: 100%;
		background-position: 63% -2%;
		background-position-x: 63%;
		background-position-y: -2%;
		background-repeat: no-repeat;
	}
	#content #headquarters{
		margin: 44% 0 0 0;
		width: 96%;
		max-width: 96%;
		border: 0;
		padding: 2%;
	}	
	#content #headquarters fieldset {
		max-width: 100%;
	}
	#content #headquarters label, #content #headquarters input, #content #headquarters  textarea {
		width: 100%;
	}
	#content #headquarters .button-submit {
		margin: 0;
		width: 100%;
	}
	
}