/* Roboto Regular */
@font-face {
    font-family: "Roboto Condensed";
    src: url("/fonts/Roboto_Condensed/RobotoCondensed-Regular.eot");
    src: url("/fonts/Roboto_Condensed/RobotoCondensed-Regular.eot?#iefix") format('embedded-opentype'),
         url("/fonts/Roboto_Condensed/RobotoCondensed-Regular.woff2") format('woff2'),
         url("/fonts/Roboto_Condensed/RobotoCondensed-Regular.woff") format('woff'),
         url("/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}
/* Roboto Italic */
@font-face {
    font-family: "Roboto Condensed";
    src: url('/fonts/Roboto_Condensed/RobotoCondensed-Italic.eot');
    src: url('/fonts/Roboto_Condensed/RobotoCondensed-Italic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Roboto_Condensed/RobotoCondensed-Italic.woff2') format('woff2'),
         url('/fonts/Roboto_Condensed/RobotoCondensed-Italic.woff') format('woff'),
         url('/fonts/Roboto_Condensed/RobotoCondensed-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Roboto Bold */
@font-face {
    font-family: "Roboto Condensed";
    src: url('/fonts/Roboto_Condensed/RobotoCondensed-Bold.eot');
    src: url('/fonts/Roboto_Condensed/RobotoCondensed-Bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Roboto_Condensed/RobotoCondensed-Bold.woff2') format('woff2'),
         url('/fonts/Roboto_Condensed/RobotoCondensed-Bold.woff') format('woff'),
         url('/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
	font-family: "Roboto Condensed";
}

.container {
	width: 1920px;
	height: 1080px;
	float: none;
	display: block;
	margin: auto;
}
#home.container {
	background: #0f1a2e url("images/home-dashboard-vehicle-interior_bg.jpg") 0 0 no-repeat;
	text-align: center;
	color: #ffffff;
}
#home.container .logo {
	background: transparent url("images/white-bg-40.png") 0 0 repeat;
	padding: 35px 0;
}
#home.container h1 {
	font-weight: 400;
	font-size: 40px;
	line-height: 47px;
	width: 55%;
	display: block;
	margin: 100px auto 65px auto;
}
#home.container .buttons ul {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	width: 1500px;
	float: none;
	display: block;
}
#home.container .buttons ul li {
	display: block;
	float: left;
	width: 25%;
}
#home.container .buttons ul li a {
	color: #f6aa20;
	text-decoration: none;
	font-size: 30px;
	font-weight: 600;
}
#home.container .buttons ul li a:hover,
#home.container .buttons ul li a:active {
	color: #ffffff;
}
#home.container .buttons ul li a:before {
	display: block;
}
#home.container .buttons ul li a.who-we-are:before {
	content: url("images/icon_who-we-are_1.png");
}
#home.container .buttons ul li:hover a.who-we-are:before,
#home.container .buttons ul li:active a.who-we-are:before{
	content: url("images/icon_who-we-are_2.png");
}
#home.container .buttons ul li a.products:before {
	content: url("images/icon_products_1.png");
}
#home.container .buttons ul li:hover a.products:before,
#home.container .buttons ul li:active a.products:before{
	content: url("images/icon_products_2.png");
}
#home.container .buttons ul li a.customers-capabilities:before {
	content: url("images/icon_customers-capabilities_1.png");
}
#home.container .buttons ul li:hover a.customers-capabilities:before,
#home.container .buttons ul li:active a.customers-capabilities:before{
	content: url("images/icon_customers-capabilities_2.png");
}
#home.container .buttons ul li a.hybrid-tech-advantage:before {
	content: url("images/icon_hybrid-tech-advantage_1.png");
}
#home.container .buttons ul li:hover a.hybrid-tech-advantage:before,
#home.container .buttons ul li:active a.hybrid-tech-advantage:before{
	content: url("images/icon_hybrid-tech-advantage_2.png");
}
#home.container .buttons ul li.current {
	color: #ffffff;
}

.container.interior {
	/*background: #0d182d url("images/dark-page_bg.jpg") 0 0 no-repeat;*/
	background: rgb(13,24,45);
	background: linear-gradient(180deg, rgba(13,24,45,1) 0%, rgba(33,43,62,1) 46%, rgba(13,24,45,1) 100%);
	color: #ffffff;
}
.container.interior #header {
	background: transparent url("images/black-bg-30.png") 0 0 repeat;
}
.container.interior #header .logo {
	float: left;
	width: 440px;
	display: block;
	padding: 60px 35px;
	text-align: center;
}
.container.interior #header .top-nav  {
	float: right;
	width: 1350px;
	display: block;
	padding: 35px 35px 0 0;
}
.container.interior #header .top-nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.container.interior #header .top-nav ul li {
	float: left;
	width: 25%;
	
}
.container.interior #header .top-nav ul li a {
	border: 3px solid #f6aa20;
	border-radius: 15px;
	display: inline-block;
	padding: 5px 10px;
	margin: 25px 25px 0 0;
	height: 80px;
	width: 88%;
	
	font-size: 30px;
	color: #f6aa20;
	line-height: 35px;
	text-decoration: none;
	
	vertical-align: middle;
}
.container.interior #header .top-nav ul li a.who-we-are,
.container.interior #header .top-nav ul li a.products {
	line-height: 80px;
}
.container.interior #header .top-nav ul li a.customers-capabilities,
.container.interior #header .top-nav ul li a.hybrid-tech-advantage {
	padding: 10px 10px 0 10px;
}
.container.interior #header .top-nav ul li a:hover,
.container.interior #header .top-nav ul li a:active {
	border-color: #ffffff;
	color: #ffffff;
	background: transparent url("images/yellow-bg-60.png") 0 0 repeat;
}
.container.interior #header .top-nav ul li.current a {
	color: #ffffff;
	background: transparent url("images/yellow-bg-60.png") 0 0 repeat;
}
.container.interior #header .top-nav ul li a.who-we-are:before {
	content: url("images/top-nav-icon_who-we-are_1.png");
	float: left;
	margin: 3px 25px 0 5px;
}
.container.interior #header .top-nav ul li:hover a.who-we-are:before,
.container.interior #header .top-nav ul li:active a.who-we-are:before { 
	content: url("images/top-nav-icon_who-we-are_2.png");
}
.container.interior #header .top-nav ul li a.products:before {
	content: url("images/top-nav-icon_products_1.png");
	float: left;
	margin: 0px 25px 0 5px;
}
.container.interior #header .top-nav ul li:hover a.products:before,
.container.interior #header .top-nav ul li:active a.products:before { 
	content: url("images/top-nav-icon_products_2.png");
}
.container.interior #header .top-nav ul li a.customers-capabilities:before {
	content: url("images/top-nav-icon_customers-capabilities_1.png");
	float: left;
	margin: 0px 25px 0 5px;
}
.container.interior #header .top-nav ul li:hover a.customers-capabilities:before,
.container.interior #header .top-nav ul li:active a.customers-capabilities:before { 
	content: url("images/top-nav-icon_customers-capabilities_2.png");
	
}
.container.interior #header .top-nav ul li a.hybrid-tech-advantage:before {
	content: url("images/top-nav-icon_hybrid-advantage_1.png");
	float: left;
	margin: 0px 25px 0 5px;
}
.container.interior #header .top-nav ul li:hover a.hybrid-tech-advantage:before,
.container.interior #header .top-nav ul li:active a.hybrid-tech-advantage:before { 
	content: url("images/top-nav-icon_hybrid-advantage_2.png");
	
}
.container.interior #main {
	clear: both;
	display: block;
	position: relative;
	overflow: hidden;
	height: 868px;
}
.container.interior #main .sidebar {
	float: left;
	width: 440px;
	padding: 40px 35px;
	display: block;
}
.container.interior #main .sidebar .side-nav ul,
.container.interior #main .sidebar .side-nav ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.container.interior #main .sidebar .side-nav ul li a {
	border: 3px solid #f6aa20;
	border-radius: 15px;
	display: block;
	padding: 25px 0 10px 30px;
	margin: 25px 25px 0 0;
	height: 55px;
	font-size: 30px;
	color: #f6aa20;
	text-decoration: none;
}
.container.interior #main .sidebar .side-nav ul li.two-line a {
	height: 95px;
}
.container.interior #main .sidebar .side-nav ul li a:active,
.container.interior #main .sidebar .side-nav ul li a:hover {
	background: url("images/yellow-bg-60.png") 0 0 repeat;
	color: #ffffff;
}
.container.interior #main .sidebar .side-nav ul li.current a,
.container.interior #main .sidebar .side-nav ul li.current a:active,
.container.interior #main .sidebar .side-nav ul li.current a:hover {
	background: url("images/yellow-bg-60.png") 0 0 repeat;
	color: #ffffff !important;
}
.container.interior #main .content {
	float: right;
	width: 1300px;
	height: 100%;
	font-size: 30px;
	display: block;
	position: relative;
}
.container.interior #main .content.full-panel {
	padding: 30px 80px 0 0px;
}
.container.interior #main .content.full-panel.white-bg {
	background-color: #ffffff;
	color: #172234;
}
.container.interior #main .content.full-panel .full-left {
	float: left;
	width: 57%;
}
.container.interior #main .content.full-panel .full-right {
	float: right;
	width: 40%;
	text-align: center;
}
.container.interior #main .content.split-panel {
	padding: 30px 80px 0 0px;
}
.container.interior #main .content.split-panel .split-left {
	float: left;
	width: 30%;
	display: block;
	margin: 0;
	padding: 0;
}
.container.interior #main .content.split-panel .split-right {
	float: right;
	width: 75%;
	height: 100%;
	display: block;
	margin: -30px -80px 0 0;
	/*-moz-transform: skew(0deg, 0deg, 0deg, 15deg);
	-webkit-transform: skew(0deg, 0deg, 0deg, 15deg);
	-o-transform: skew(0deg, 0deg, 0deg, 15deg);
	-ms-transform: skew(0deg, 0deg, 0deg, 15deg);
	transform: skew(15deg, 0deg);*/
	/*margin: 0 -120px 0 0;*/
	background: transparent url("images/split-panel-white-bg.png") 0 0 no-repeat;
	background-size: cover;
	color: #0d182d;
}
.container.interior #main .content h1 {
	font-size: 45px;
}
.container.interior #main .content p {
	
}
.container.interior #main .content a {
	color: #f6aa20;
}
.container.interior #main .content p.check {
	display: block;
	padding-left: 55px;
}
.container.interior #main .content p.check:before {
	content: '';
	background: transparent url("images/check.png") 50% 50% no-repeat;
	display: inline-block;
	float: left;
	width: 45px;
	height: 45px;
	margin: 0px 0px 0 -50px;
	
}
.container.interior #main .content .highlight {
	border: 3px dashed #ffffff;
	border-radius: 20px;
	display: block;
	padding: 25px 30px 35px 30px;
}
.container.interior #main .content ul.float-list li {
	float: left;
	width: 50%;
}
.clear {
	clear: both;
}
.two-col {
	float: left;
	width: 50%;
}
.two-col img {
	/*max-width: 230px;*/
}
/********************************************************
	PAGINATION
********************************************************/
.container.interior #main .content .pagination {
	display: block;
	clear: both;
	text-align: center;
	padding: 10px 0 0 0;
	color: #f6aa20;
	font-size: 25px;
	line-height: 85px;
	position: absolute;
	margin: 0 auto;
	bottom: 50px;
	
}
.container.interior #main .content .pagination a.back,
.container.interior #main .content .pagination a.forward {
	display: inline-block;
	font-size: 0px;
	width: 69px;
	height: 73px;
}
.container.interior #main .content .pagination a.back {
	margin: 0 15px 0 0;
}
.container.interior #main .content .pagination a.forward {
	margin: 0 0 0 15px;
}
.container.interior #main .content .pagination a.back.on {
	background: transparent url("images/pagination_back-on.png") 50% 50% no-repeat;
}
.container.interior #main .content .pagination a.back.off {
	background: transparent url("images/pagination_back-off.png") 50% 50% no-repeat;
	cursor: default;
}
.container.interior #main .content .pagination a.forward.on {
	background: transparent url("images/pagination_forward-on.png") 50% 50% no-repeat;
}
.container.interior #main .content .pagination a.forward.off {
	background: transparent url("images/pagination_forward-off.png") 50% 50% no-repeat;
	cursor: default;
}
/********************************************************
	SLIDE CONTROLS / Backward + Forward
********************************************************/
.container #main .slide-controls {
	display: block;
	clear: both;
	text-align: center;
	padding: 0;
	color: #f6aa20;
	font-size: 25px;
	line-height: 85px;
	position: absolute;
	width: 100%;
	margin: 350px auto 0 auto;
	
	
}
.container #main .slide-controls a.back,
.container #main .slide-controls a.forward {
	display: inline-block;
	font-size: 0px;
	width: 69px;
	height: 73px;
}
.container #main .slide-controls a.back {
	float: left;
	margin: 0 0 0 120px;
}
.container #main .slide-controls a.forward {
	float: right;
	margin: 0 120px 0 0;
}
.container #main .slide-controls a.back.on {
	background: transparent url("images/pagination_back-on.png") 50% 50% no-repeat;
}
.container #main .slide-controls a.back.off {
	background: transparent url("images/pagination_back-off.png") 50% 50% no-repeat;
	cursor: default;
}
.container #main .slide-controls a.forward.on {
	background: transparent url("images/pagination_forward-on.png") 50% 50% no-repeat;
}
.container #main .slide-controls a.forward.off {
	background: transparent url("images/pagination_forward-off.png") 50% 50% no-repeat;
	cursor: default;
}
/********************************************************
	EXECUTIVE LEADERSHIP TEAM
	/executive-leadership-team
********************************************************/
.container.interior #main .content .team div {
	display: block;
	width: 32%;
	float: left;
	border: 2px solid #ffffff;
	border-radius: 15px;
	margin: 10px 10px 0 0;
}
.container.interior #main .content .team div img {
	max-width: 110px;
	float: left;
	margin: 20px;
}
.container.interior #main .content .team div h4 {
	margin: 0;
	padding: 30px 0 0 0;
	font-weight: 600;
}
.container.interior #main .content .team div h5 {
	margin: 0;
	padding: 0;
	font-weight: 300;
	font-size: 24px !important;
}
/********************************************************
	CONTACT US
	/contact-us
********************************************************/
.container.interior #main .content .contacts div {
	/*width: 29%;*/
	float: left;
	display: block;
	margin: 15px 45px 50px 0;
}
.container.interior #main .content .contacts div h4 {
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	font-size: 33px;
	border-bottom: 1px solid #f6aa20;
}
a.btn {
	display: inline-block;
	font-size: 40px;
	background-color: #f6aa20;
	color: #0d182d !important;
	text-align: center;
	padding: 15px 60px 20px 60px;
	margin: 20px 10px;
	text-decoration: none;
	border-radius: 50px;
}
a.btn:hover, a.btn:active {
	background-color: #f1b84e;
}
.container.interior #main .content a.btn-float {
	float: right;
	display: inline-block;
	font-size: 40px;
	background-color: #f6aa20;
	color: #0d182d;
	text-align: center;
	padding: 15px 40px 20px 40px;
	margin: 20px 0 0 0;
	text-decoration: none;
	border-radius: 50px;
}
.container.interior #main .content a.btn-float span {
	display: block;
	font-size: 23px;
}
.container.interior #main .content a.btn-float:hover,
.container.interior #main .content a.btn-float:active {
	background-color: #f1b84e;
}
/********************************************************
	CONTACT FORM
	/contact-form
********************************************************/
form#contact-arc fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 30px 0;
}
form#contact-arc fieldset:nth-of-type(odd) {
	float: left;
	width: 48%;
	clear: both;
	
}
form#contact-arc fieldset:nth-of-type(even) {
	float: right;
	width: 48%;
}
form#contact-arc fieldset:nth-of-type(6X) {
	float: left;
	clear: both;
	outline: 1px solid #ff0000;
}
form#contact-arc fieldset:last-of-type {
	clear: left;
}
form#contact-arc fieldset label {
	display: block;
	padding: 5px 0
}
form#contact-arc fieldset label span {
	font-size: 18px;
	display: inline-block;
	border-radius: 30px;
	padding: 3px 15px 4px 15px;
	margin: 10px 0 0 0px;
	position: relative;
	float: right;
	color: #ffffff;
	background-color: #ff0000;
	text-transform: uppercase;
}
form#contact-arc fieldset input {
	font-size: 30px;
	padding: 5px 10px;
	display: block;
	width: 95%;
	font-family: "Roboto Condensed";
}
form#contact-arc fieldset textarea {
	font-size: 30px;
	padding: 5px 10px;
	display: block;
	width: 95%;
	height: 200px;
	font-family: "Roboto Condensed";
}
form#contact-arc fieldset input[type="submit"] {
	display: block;
	margin: 25px auto 0 auto;
	width: 70%;
	background-color: #f6aa20;
	border-radius: 50px;
	padding: 20px 35px;
	border: 0;
	cursor: pointer;
	text-transform: uppercase;
}
form#contact-arc fieldset input[type="submit"]:active,
form#contact-arc fieldset input[type="submit"]:hover {
	opacity: .9;
}
/********************************************************
	GLOBAL FACILITIES MAP
	/global-facilities
********************************************************/
.maploc {
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
	
}
.maploc a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0px;
}
.maploc:hover a:before, .maploc:active a:before {
	content: '';
	font-size: 20px;
	display: block;
	
	/*border: 1px solid #f1b84e;*/
	border-radius: 5px;
}

.maploc.loc-knoxville {
	margin: 285px 0 0 335px;
}
.maploc.txt-knoxville {
	width: 180px;
	height: 100px;
	margin: 520px 0 0 470px;
}
.maploc.loc-hartsville {
	margin: 275px 0 0 325px;
}
.maploc.txt-hartsville {
	width: 170px;
	height: 25px;
	margin: 277px 0 0 400px;
}
.maploc.loc-morgantown {
	margin: 275px 0 0 315px;
}
.maploc.txt-morgantown {
	width: 130px;
	height: 50px;
	margin: 280px 0 0 100px;
}
.maploc.loc-reynosa {
	margin: 312px 0 0 283px;
}
.maploc.txt-reynosa {
	width: 150px;
	height: 25px;
	margin: 385px 0 0 143px;
}
.maploc.loc-skopje {
	margin: 265px 0 0 680px;
}
.maploc.txt-skopje {
	width: 180px;
	height: 25px;
	margin: 432px 0 0 770px;
}
.maploc.loc-ningbo {
	margin: 313px 0 0 1000px;
}
.maploc.txt-ningbo {
	width: 130px;
	height: 25px;
	margin: 352px 0 0 1050px;
}
.maploc.loc-xian {
	margin: 287px 0 0 970px;
}
.maploc.txt-xian {
	width: 115px;
	height: 25px;
	margin: 207px 0 0 1090px;
}
/********************************************************
	IMAGE TREATMENTS
********************************************************/
img.photo-album {
	border: 10px solid #ffffff;
	box-shadow: 2px 2px 22px #000000;
}
/********************************************************
	IMAGE TREATMENTS
********************************************************/
.video-src-emblem {
	display: block;
	position: absolute;
	width: 120px;
	height: 120px;
	background: #0e1623 url("images/arc-automotive-logo_symbol-dark-bg.png") 50% 50% no-repeat;
	border-radius: 100%;
	right: 90px;
	margin: -40px 0 0 0;
}

/********************************************************
	SCROLLING TEXT
********************************************************/
.scroll-left {
	height: 70px;	
	overflow: hidden;
	position: relative;
	background: transparent url("images/yellow-bg-60.png") 0 0 repeat;
	margin: 0 0 75px 0;
}
.scroll-left p {
	font-size: 48px;
	font-weight: 300;
	letter-spacing: 1px;
	text-transform: uppercase;
	/*color: #f6aa20;*/
	
	
	
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 70px;
	text-align: center;
	/* Starting position */
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);	
	transform:translateX(100%);
	/* Apply animation to this element */	
	-moz-animation: scroll-left 12s linear infinite;
	-webkit-animation: scroll-left 12s linear infinite;
	animation: scroll-left 12s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
/********************************************************
	FOOTNOTE on Homepage
********************************************************/
.footnote {
	position: absolute;
	left: 50%;
	margin: 1000px 0 0 -260px;
	width: 520px;
	text-align: center;
	font-size: 30px;
}
.footnote a {
	display: inline-block;
	padding: 5px 30px;
	text-decoration: none;
	border-radius: 30px;
	border: 1px solid #f6aa20;
	color: #f6aa20;
}
.footnote a:hover,
.footnote a:active {
	color: #ffffff;
	border-color: #ffffff;
}