
body { font-family: 'Arial'; }

.text-heading { font-size: 120px; margin-top: 190px;  color: #FFF; }
.text-sub-heading { font-size: 35px; color: #FFF; }

.brand { float: right; margin-top: 50px; width: 285px; height: 120px; display:block; }

.bg-pic { background: #FF4800 url(http://image.relacionamento.arcelormittal.com.br/lib/fe3d157175640478701072/m/1/landing_bg.jpg) center top no-repeat; background-size: 100%  }
.bg-gray { background: #A8A8A8; color: #FFF; }

.color-orange { color: #FF4800; }

.main-content { height: 1050px; }

.form-wrap { float: right; margin-top: 40px; width: 465px; background: #FFF; border-top: 15px solid #FF4800; padding: 30px; border-bottom-left-radius: 80px; }
.form-wrap h3 { color: #FF4800; margin: 10px 0 30px 0; font-size: 35px; }
.form-wrap form { width: 100%; }
.form-wrap form .form-group { margin-bottom: 30px; }
.form-wrap label { font-size: 12px; color: #999; display: block; font-weight: normal; }
.form-wrap input[type="text"],
.form-wrap input[type="email"] { width: 100%; border: none; border-bottom: 1px solid #999; }
.btn-submit { background: #FF4800; color: #FFF; border: none; font-size: 20px; padding: 10px 20px; }
.checkbox { margin: 20px 0 25px 0; }
.checkbox label, .radio label { padding-left: 0; line-height: 20px; font-size: 15px; }
.checkbox label input[type="checkbox"] { margin-left: 0px; cursor: pointer; }

.social-network { padding: 30px 0 0px; }
.contact { font-size: 16px; padding: 20px 0 10px 0; font-family: 'Arial'; }
.privacy { font-size: 12px;padding: 20px 0; font-family: 'Arial'; }
.frequency { font-size: 20px; padding: 20px 0 10px 0; }
.line-orange { height: 20px; background: #FF4800; border: none; }

.onoffswitch {
	position: relative; 
	width: 40px;
	float: right;
	position: relative;
	top: -5px;
	-webkit-user-select:none; 
	-moz-user-select:none; 
	-ms-user-select: none;
}

.onoffswitch-checkbox {
	display: none;
}

.onoffswitch-label {
	display: block; 
	overflow: hidden; 
	cursor: pointer;
	height: 25px; 
	padding: 0; 
	border-radius: 22px;
	background-color: #e5e7ea;
	transition: background-color 0.3s ease-in;
}

.onoffswitch-label:before {
	content: "";
	display: block; 
	width: 23px;
	height: 23px; 
	margin: 0px;
	background: #FFFFFF;
	position: absolute; 
	top: 1px; 
	bottom: 0;
	right: 17px; 
	border-radius: 100%;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
	transition: all 0.3s ease-in 0s; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: green;
}

.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
	border-color: green;
}

.onoffswitch-checkbox:checked + .onoffswitch-label:before {
	right: 0px; 
}

@media only screen and (max-width: 768px)
and (orientation : portrait)  {
	.bg-pic { background-size: auto 100%; }
	.brand { float: none; width: 195px; height: 100px; margin: 20px auto 40px; }
	
	.mobile-heading { margin-left: 20px; }
	.mobile-heading .text-heading { font-size: 60px; margin-top: 20px;  }
	.mobile-heading .text-sub-heading { font-size: 20px; }
	.main-content { height: auto;  }

	.form-wrap { float: none; width: 95%; margin: 20px auto 40px; }
	.form-wrap h3 { font-size: 25px; text-align: center; }
	.checkbox label, .radio label { padding-left: 0; line-height: 25px; font-size: 14px; }

	.social-box { height: 140px;}

	.contact { font-size: 18px; }
	.frequency { font-size: 18px; }
	.contact-text,
	.privacy-text,
	.frequency-text { padding: 0 50px; }
}
