@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/******* Comman Classes Start ********/
*{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box}
.fluid {clear:both;margin:0 auto;width:100%;float:left;display:block;}
.fluidList {list-style:none; list-style-image:none; margin:0; padding:0;}
.fix-width{width:1245px; margin:auto;}
.margin-zero{margin:0 !important}
.left{ float:left;}
.right{ float:right;}

.circle-content, .circle-content h4, .circle-content p, .page-left, .dark-bg, .login-panel{-webkit-transition: all 0.3s linear 0.1s;-moz-transition: all 0.3s linear 0.1s;-ms-transition: all 0.3s linear 0.1s;-o-transition: all 0.3s linear 0.1s;transition: all 0.3s linear 0.1s;}

.submit-row input, .content-light p, .content-dark p{font-family: 'Open Sans', sans-serif;}
.home-heading, .upload-grids h2, .reason-to-join li{font-family: 'Raleway', sans-serif;}

.gridContainer {margin:auto;width:100%; padding:0 0 0 284px; overflow-x:hidden}

.phone a{ color:#fff;}
.phone figure, .phone p{ display:inline-block; vertical-align:middle; padding:0 7px;}
.phone p{ margin:0; font-size:22px; font-weight:700; color:#fff;}

.content-grid{ width:655px;}
.content-grid1{ width:890px;}

.heading-light, .heading-dark{ font-size:60px; margin:0; padding:0 0 60px; font-weight:200;}
.heading-light strong, .heading-dark strong{ font-weight:400;}
.heading-light{ color:#fff;}
.heading-dark { color:#505050}

.content-light p, .content-dark p{ font-size:18px; font-weight:400; margin:0; padding:0 0 18px 24px;}
.content-light p{ color:#d6d6d6;}
.content-dark p{ color:#757575}
/******* Comman Classes End ********/


/******* Top Bar Classes Start ********/
.top-bar{ position:fixed; top:0; left:0; right:0; background:#ce0000; z-index:999;}
.top-right{ padding:18px 0 0;}
.top-text{ float:left; font-size:14px; padding:7px 24px; text-transform:uppercase; color:#fff;}
.top-phone{ float:right; padding:0 26px;}

.logo{background:#fff; margin:0; float:left; width:284px;}
.logo a{ display:block; padding:17px 32px 14px 32px; position:relative}
.logo a:before, .logo a:after{ position:absolute;  content:""; display:block;}
.logo a:before{ top:0; left:100%; bottom:0; background:url(../images/top-right-bg.png) no-repeat left top; width:10px;}
.logo a:after{border-left:284px solid #fff; border-bottom:26px solid transparent; top:99%; left:0;}
/******* Top Bar Classes End ********/


/******* Page Left Classes Start ********/
.page-left{ position:fixed; top:0; bottom:0; left:0; z-index:99; background:#151515; width:284px; padding:148px 0 0;}

.mobi_menu{display:none; cursor:pointer}
.main-nav li { font-size:15px; font-weight:600; text-transform:uppercase;}
.main-nav li a{ display:block; padding:10px 0 10px 46px; color:#fff; cursor:pointer}
.main-nav li a:hover, .main-nav li.selected a{color:#ce0000}

.left-bottom{ position:absolute; left:0; right:0; bottom:0;}
.left-phone{ background:#2c2c2c; text-align:center; padding:18px;}

.parts-online{ background:#f1f1f1;}
.parts-online h2{ background:#ce0000; font-size:16px; font-weight:900; margin:0; padding:24px 0; text-align:center; color:#fff; text-transform:uppercase; position:relative;}
.parts-online h2:before, .parts-online h2:after{ position:absolute; top:100%; left:50%; content:""; display:block;}
.parts-online h2:before{ border-top:#ce0000 solid 14px; border-left:14px solid transparent; border-right:14px solid transparent; margin-left:-14px;}
.parts-online h2:after{ border-top:#fff solid 8px; border-left:8px solid transparent; border-right:8px solid transparent; margin-left:-8px;}

.parts-online form{ padding:30px 38px 0;}
.parts-online .form-row{ clear:both; width:100%; margin:0 0 12px;}
.parts-online .form-row input{ border:#c7d3dd solid 1px; border-bottom-color:#b3c3d1; width:100%; font-size:14px; color:#969696; font-style:italic; padding:4px 10px; border-radius:2px;}
.submit-row{ padding:8px 0 18px; text-align:center;}
.submit-row input{background:#85b600; font-size:14px; font-weight:700; color:#fff; padding:6px 15px; border-radius:3px; border:0; border-bottom:#6d8726 solid 2px;}
.submit-row input:hover{ background:#3c5200; border-bottom-color:#3c5200;}
/******* Page Left Classes End ********/


/******* Header Classes Start ********/
video#bgvid {position:absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index:-101; background-image:url(../images/header.jpg); background-size: cover; background-position:center;}
.home-wrap{position:relative; z-index:1; text-align:center;}

.home-heading{font-size:34px; color:#fff; font-weight:900; text-shadow:2px 2px 0 #424242; margin:0;}
.home-heading span, .home-heading figure{ display:inline-block; vertical-align:middle; padding:0 7px;}
.upload-grids{ padding:0; width:1065px; margin:140px auto; position:relative;}
.upload-grids h2{ margin:0; padding:0; font-size:24px; font-weight:700; color:#fff; text-shadow:2px 2px 0 #424242;}

.circle1{top:220px; left:0%;}
.circle2{top:260px; left:430px;}
.circle3{top:220px; left:auto; right:0}

.header-circle{ position:absolute; width:206px;}
.header-circle-in{ position:relative;}
.circle-grid{ background:#797979; padding:5px; border-radius:50%; position:relative; z-index:2;}
.circle-grid a{ width:196px; height:196px; display:block; display:block; background:#fff; border-radius:50%; padding:22px 0 0;}
.circle-grid a h3{color:#374352; font-size:22px; font-weight:700; margin:0; padding:0;}
.circle-content{ position:absolute; top:0; opacity:0; border-bottom:0; text-align:center; margin:103px 0 0; padding:0;background: -moz-linear-gradient(top,  rgba(255,255,255,0) 2%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,0)), color-stop(36%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 2%,rgba(255,255,255,1) 36%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 2%,rgba(255,255,255,1) 36%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 2%,rgba(255,255,255,1) 36%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 2%,rgba(255,255,255,1) 36%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
.circle-content h4{ margin:0; padding:0 0 8px; font-size:18px; font-weight:400; color:#ce0000;}
.circle-content p{ margin:0; padding:0 18px 16px; color:#767676; font-size:16px; font-weight:300;}

.header-circle:hover .circle-content{ height:auto; top:0; padding:113px 0 0; border-bottom:#ce0000 solid 2px; opacity:1}
.circle-grid:hover a{ background:url(../images/circle-bg.png);}
.circle-grid:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2);background: rgb(188,0,0);
background: -moz-linear-gradient(-45deg,  rgba(188,0,0,1) 0%, rgba(255,21,21,1) 49%, rgba(176,0,0,1) 51%, rgba(164,0,0,1) 100%); 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(188,0,0,1)), color-stop(49%,rgba(255,21,21,1)), color-stop(51%,rgba(176,0,0,1)), color-stop(100%,rgba(164,0,0,1)));
background: -webkit-linear-gradient(-45deg,  rgba(188,0,0,1) 0%,rgba(255,21,21,1) 49%,rgba(176,0,0,1) 51%,rgba(164,0,0,1) 100%);
background: -o-linear-gradient(-45deg,  rgba(188,0,0,1) 0%,rgba(255,21,21,1) 49%,rgba(176,0,0,1) 51%,rgba(164,0,0,1) 100%);
background: -ms-linear-gradient(-45deg,  rgba(188,0,0,1) 0%,rgba(255,21,21,1) 49%,rgba(176,0,0,1) 51%,rgba(164,0,0,1) 100%);
background: linear-gradient(135deg,  rgba(188,0,0,1) 0%,rgba(255,21,21,1) 49%,rgba(176,0,0,1) 51%,rgba(164,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc0000', endColorstr='#a40000',GradientType=1 );}
/******* Header Classes End ********/


/******* PUT YOUR PARTS  ONLINE Classes Start ********/
#section1{ position:relative; z-index:9;}
#section1, #section3, #section5{background-size:cover;}
.online-parts p{ margin:0 98px 0 0;}
/******* PUT YOUR PARTS  ONLINE Classes End ********/


/******* EXPORTING TO ACES Classes Start ********/
#section2, #section4{ background:url(../images/texture-bg.jpg);}
.export-aces h2{margin:84px 0 0;}
.export-aces p{ margin:0 280px 0 0}

.export-aces-right{ width:590px; height:470px; background:url(../images/dark-box-bg.jpg) no-repeat; background-size:cover;}
.export-aces-right p{ font-size:18px; color:#fff; font-weight:300; padding:62px 0 0 170px; margin:0}
.export-aces-right p span{ display:block; padding:0 0 0 40px;}
/******* EXPORTING TO ACES Classes Start ********/


/******* PROVIDE A CATALOG Classes Start ********/
.provide-catalog p{ margin:0 98px 0 0;}
/******* PROVIDE A CATALOG Classes End ********/


/******* MANAGE YOUR CATALOG Classes Start ********/
.manage-calalog h2{margin:84px 0 0;}
.manage-calalog p{ margin:0 222px 0 0;}
.manage-calalog-right{width:590px;}
/******* MANAGE YOUR CATALOG Classes End ********/

/******* REASONS TO JOIN Classes Start ********/
.reason-to-join ul{ padding:0 0 60px 30px;}
.reason-to-join li{ font-size:22px; padding:15px 0;}
.reason-to-join li span{ color:#d7d7d7; font-weight:800; display:block; padding:3px 0 3px 36px; background:url(../images/menu-icon.png) no-repeat center left;}
.reason-to-join li span:hover, .reason-to-join li.selected span{ font-weight:900; background:url(../images/menu-icon-up.png) no-repeat center left;}

.reason-to-join h3{ color:#d6d6d6; font-size:35px; margin:0; padding:0 0 0 36px; font-weight:400; text-transform:uppercase;}
.reason-to-join h3 a, .reason-to-join h3 span{ color:#ce0000}
/******* REASONS TO JOIN Classes End ********/

/******* Footer Classes Start ********/
.footer{ background:#000; color:#fff; padding:0 60px; text-align:right; font-size:14px; font-weight:400; text-transform:uppercase; height:125px; display:table; width:100%;}
.footer p{ display:table-cell; width:100%; vertical-align:middle;}
.footer a{ color:#e40000;}
.footer a:hover{ color:#333;}
/******* Footer Classes End ********/


.showMenu .page-left{left:0;}
.showMenu .dark-bg, .login-show .dark-bg{ position:fixed; background:rgba(0,0,0,0.8); top:0; left:0; right:0; bottom:0; z-index:90;}
.login-show .dark-bg{ z-index:9888}
.login-show .login-panel{ top:50%}

.login-panel{ position:fixed; top:-100%; left:50%; z-index:9999; width:285px; height:255px; margin:-128px 0 0 -143px;}
.login-panel form{ display:block !important}

@media only screen and (max-width:1680px) {
.heading-light, .heading-dark {font-size: 55px; padding: 0 0 40px;}
}

@media only screen and (max-width:1536px) {
.fix-width{width:1045px;}
.heading-light, .heading-dark {font-size:45px; padding: 0 0 30px;}
.content-light p, .content-dark p {font-size: 16px;}

.content-grid, .export-aces-right, .manage-calalog-right{ width:50%}
.online-parts p, .provide-catalog p {margin: 0;}
.export-aces p {margin: 0 180px 0 0;}
.manage-calalog p {margin: 0 40px 0 0;}

.export-aces-right { background-size:contain}
.export-aces-right p {padding: 40px 0 0 140px;}

.reason-to-join li {font-size: 18px;}
.reason-to-join h3 {font-size: 28px;}
}

@media only screen and (max-width:1439px) {
.fix-width {width: 945px;}
.heading-light, .heading-dark {font-size:40px; padding: 0 0 20px;}
.content-light p, .content-dark p {padding: 0 0 18px 12px; font-size: 15px;}

.home-wrap{padding:0 20px;}
.upload-grids{width:100%}
.circle1, .circle3{top:180px;}
.circle2{left:50%; margin-left:-103px; top:220px;}

.manage-calalog h2, .export-aces h2{margin: 41px 0 0;}
.export-aces p {margin: 0 100px 0 0;}
.export-aces-right { height:390px;}
.export-aces-right p { font-size:16px;}


.reason-to-join li {font-size: 17px; padding: 8px 0;}
.reason-to-join h3 {font-size: 24px;}
}

@media only screen and (max-width:1365px) {
.heading-light, .heading-dark {font-size: 36px;}
}

@media only screen and (max-width:1279px) {
.gridContainer{padding:0;}

.upload-grids {width:85%;}
.top-right {padding: 17px 0 0; }
.top-text{ border-left:#750000 solid 1px;padding: 7px 20px;}

.page-left{ display:block; overflow-y:scroll; padding:110px 0 0; left:-100%;}
.left-bottom { position:static}
.main-nav ul{ margin:0 0 20px;}
.parts-online form {display:block !important;}
.left-phone{padding: 10px 18px;}
.parts-online h2{ padding:16px 0}

.mobi_menu{display:block; float:left; margin:5px 0; text-align:right !important;}
.mobi_menu a{ font-size:16px; font-weight:700; color:#fff; text-decoration:none; display:block; text-transform:uppercase; padding:0 20px;}
.mobi_menu a:hover{ color:#000;}
.mobi_menu a:hover span{background:#000;  box-shadow:0px 5px 0px #000, 0px 10px 0px #000;}
.mobi_menu span{ display:inline-block; height:2px; border-radius:4px; background:#fff; width:30px;vertical-align:top; margin:5px 5px 0 0; box-shadow:0px 5px 0px #fff, 0px 10px 0px #fff;}
.mobi_menu p{ display:inline-block; margin:1.3px 0; padding:0;}

.footer{text-align:center}
}

@media only screen and (max-width:1135px) {
.upload-grids {width:90%;}	
}

@media only screen and (max-height:700px) {
.home-wrap {padding:100px 20px 0;}
.circle1, .circle3 {top: 123px;}
.circle2 {top: 165px;}
}


@media only screen and (max-height: 1079px) {
.upload-grids{margin:90px auto 160px;}
}
@media only screen and (max-height:960px) {
.upload-grids{margin:50px auto 160px;}
}
@media only screen and (max-height:864px) {
.upload-grids{margin:30px auto 180px;}
.page-left {padding:108px 0 0;}
}
@media only screen and (max-height:768px) {
.upload-grids{margin:20px auto 200px;}

.parts-online h2{ cursor:pointer;}
.parts-online form{display:none;}
}


@media only screen and (max-width:1023px) {
.fix-width{width:790px;}
.upload-grids {width:90%; margin:20px auto 280px;}
.heading-light, .heading-dark, .home-heading {font-size:28px;}
.content-light p, .content-dark p {font-size: 14px; padding: 0 0 18px;}

.top-text{ display:none;}
.top-phone {padding: 0 12px;}

.upload-grids h2 {font-size: 20px;}

.export-aces p, .manage-calalog h2, .export-aces h2, .content-light p, .content-dark p{margin:0}

.fp-tableCell {vertical-align:top !important;}

.content-grid, .content-grid1, .export-aces-right, .manage-calalog-right {width:100%; clear:both; text-align:center;}
.content-grid1{ text-align:left;}
.export-aces-right{ background-position:center; text-align:left; width:500px; float:none; margin:auto}
#section1 .fix-width, #section3 .fix-width{ padding:100px 0 200px;}
#section2 .fix-width, #section4 .fix-width{ padding:120px 0 50px;}
#section5 .fix-width{ padding:120px 0 180px;}

.reason-to-join ul {padding: 0 0 25px 10px;}
.reason-to-join h3 {font-size: 20px;}

video#bgvid {position: fixed;}
.upload-grids {margin: 20px auto 80px;}

.parts-online h2 {cursor:auto;}
}

@media only screen and (max-width:853px) {
.fix-width{width:90%;}

.display-none{ display:none;}
.circle1, .circle2, .circle3{ position:static; margin:15px auto;}
.circle-content{position:relative; top:0;}
.circle-content, .header-circle:hover .circle-content{padding:0;top:0; border-bottom:#ce0000 solid 2px; opacity:1; margin:0;}

.manage-calalog-right{ width:90%; margin:auto; float:none;}
}

@media only screen and (max-width:719px) {
.heading-light, .heading-dark, .home-heading {font-size: 24px;}	
	
.phone figure img{ width:70%;}
.phone figure{ text-align:right;}
.phone p {font-size: 18px;}

.logo, .page-left {width: 240px;}
.logo a:after {border-left:240px solid #fff; border-bottom:16px solid transparent;}
.page-left{ padding:90px 0 0;}
.mobi_menu {margin: 1px 0;}

.reason-to-join li span{ background-position:0 5px;}
.reason-to-join li span:hover, .reason-to-join li.selected span{ background-position:0 0;}

#section1 .fix-width, #section3 .fix-width{ padding:90px 0 200px;}
#section2 .fix-width, #section4 .fix-width{ padding:90px 0 50px;}
#section5 .fix-width{ padding:90px 0 180px;}

video#bgvid{ display:none;}
#section0{ background:url(../images/header.jpg) no-repeat 0 80px fixed; background-size:contain;}
}

@media only screen and (max-width:640px) {
.mobi_menu {margin: 0;}
.phone figure, .phone p {padding: 0 3px;}
.mobi_menu a {padding: 0 15px;}

.logo a {padding: 14px 32px;}
#section1 .fix-width, #section3 .fix-width{ padding:90px 0;}
#section2 .fix-width, #section4 .fix-width{ padding:90px 0;}
#section5 .fix-width{ padding:90px 0;}

.fp-tableCell {vertical-align:middle !important;}

.reason-to-join li {font-size: 16px; padding: 5px 0;}
.reason-to-join h3 {font-size: 18px;}

.export-aces-right, .manage-calalog-right{ width:100%}
}

@media only screen and (max-width:540px) {
.main-nav li a {padding: 10px 0 10px 25px;}
.parts-online form {padding: 30px 25px 0;}

.top-phone figure{ display:none;}
.top-phone{ position:absolute; top:2px; right:0; }
.top-phone p{font-size: 16px;}

.mobi_menu{ float:right;}
.top-right {padding: 30px 0 0;}

.home-heading {font-size: 22px;}
.home-heading figure img{ width:60%}
.home-heading span, .home-heading figure {padding: 0;}

.export-aces-right p {padding: 40px 0 0 97px;}
}

@media only screen and (max-width:480px) {
.home-heading figure{ display:block; padding:10px 0; }	
.home-heading figure img { width:auto;}

.export-aces-right {height: 334px;}
.export-aces-right p {font-size: 14px;}
}

@media only screen and (max-width:420px) {
.logo {width:200px;}
.logo a {padding: 12px 14px;}
.logo a::after {border-bottom:12px solid transparent; border-left:200px solid #fff;}

.export-aces-right p {font-size: 12px;}
.export-aces-right p {padding: 40px 0 0 61px;}

.export-aces-right {height: 300px;}
}

@media only screen and (max-width:360px) {
.top-right {padding: 26px 0 0;}
}