/*-------------------
    Common
-------------------*/
body {
   padding-bottom: 0;
   background: url(../../images/bg_shadow.jpg) center center repeat-y #eee;
   font-family: Helvetica, san-serif;
   font-size: 14px
}

.container {
   padding: 0;
   background: url(../../images/bg_header.jpg) top center no-repeat #fff;
}

.content {
    padding: 30px;
    background: url(../../images/bg_erapsdraw.jpg) bottom left no-repeat #fff;
    min-height: 400px
}

.row {
    padding: 20px 0
}

a, a:visited, a:focus {
    text-decoration: none;
    border: 0;
    outline: 0
}

a:hover {
    color: #be1d2c
}

p, a, ul, li, table {
    color: #000;
    margin: 0;
    padding: 0
}

button:focus {
    outline: 0
}

input, select, textarea {
    padding: 2px 5px;
    width: 100%;
    border: 1px solid #dcdcdc;
    background: #fff
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid #be1d2c;
    border: 1px solid #fff;
    -webkit-transition: all 0s ;
    -moz-transition: all 0s ;
    transition: all 0s ;
}

* {
    -webkit-transition: all 0.3s ;
    -moz-transition: all 0.3s ;
    transition: all 0.3s ;
}

::-moz-selection { background: rgba(0,0,0,0.2);}
::selection { background: rgba(0,0,0,0.2);}

h1 , .inner .bg_grey h3, .inner h1.grey, .inner button{
    font-family: 'Oswald', sans-serif;
}

/*-------------------
    Header
-------------------*/
.header h3 {
    margin: 4px 20px
}

.header nav{
    font-family: 'Maven Pro', sans-serif;
    margin-top: 70px;
    font-size: 1.3em;
    font-weight: 500;
    letter-spacing: -0.08em;
}

.header nav li:before{
    content: '';
    background: url(../../images/icon_menu.png) center center no-repeat transparent;
    width: 2px;
    height: 42px;
    display: inline-block;
    position: absolute;
    bottom: 15px;
    left: 5px;
}   

.header nav li{
    margin-right: 8px;
    -webkit-transition: all 0.1s ;
    -moz-transition: all 0.1s ;
    transition: all 0.1s ;
}

.header nav li:hover {
    font-weight: 600
}

.main .header nav li:nth-child(1) a,
.about .header nav li:nth-child(2) a,
.products .header nav li:nth-child(3) a,
.catalogue .header nav li:nth-child(4) a,
.news .header nav li:nth-child(4) a,
.links .header nav li:nth-child(5) a,
.contact .header nav li:nth-child(6) a
{color: #be1d2c; font-weight: bold}


/*-------------------
    slideshow
-------------------*/
.carousel-inner{
    box-shadow: 0 5px 5px #ddd
}
.carousel-control.left, .carousel-control.right{
    background-image: none
}
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
    left: 0;
}
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    right: 0;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    top: 40%
}
.glyphicon-chevron-left:before {
    content: '';
    background: url(../../images/btn_slide_prev.png) center left no-repeat transparent;
    width: 57px;
    height: 106px;
    display: block
}
.glyphicon-chevron-right:before {
    content: '';
    background: url(../../images/btn_slide_next.png) center right no-repeat transparent;
    width: 57px;
    height: 106px;
    display: block
}


/*-------------------
    Main Page
-------------------*/
.main {
    font-family: 'Maven Pro', sans-serif;
}
.main .products .col-sm-3 {
    padding: 0;
    text-align: center;
}

.main .products h4 {
    position: absolute;
    top: 50px;
    left: 50px;
    color: #fff;
    z-index: -1;
}

.main .products span {
    display: inline-block;
}

.main .products span img {
    opacity: 1;
    background: #fff
}

.main .products span:hover img {
    opacity: 0
}

.main .products span#product-1 {
    background: url(../../images/main/BrakePads_hover.png) center center no-repeat transparent;
    background-size: cover;
}
.main .products span#product-2 {
    background: url(../../images/main/DiscRotors_hover.png) center center no-repeat transparent;
    background-size: cover;
}
.main .products span#product-3 {
    background: url(../../images/main/BrakeShoes_hover.png) center center no-repeat transparent;
    background-size: cover;
}
.main .products span#product-4 {
    background: url(../../images/main/WearSensors_hover.png) center center no-repeat transparent;
    background-size: cover;
}

.menulist .pull-right a{
    float: right
}

.menulist .pull-right {
    text-align: right
}

.main .menulist a h4 {
    color: #262626;
    font-size: 1.7em;
    letter-spacing: -0.03em;
    font-weight: bold
}

.main .menulist a:hover {
    text-decoration: none;
}

.main .menulist a:before {
    content: '';
    width: 460px;
    height: 197px;
    background: url(../../images/btn_details.png) center bottom no-repeat rgba(0,0,0,0.7);
    display: inline-block;
    position: absolute;
    left: 10px;
    opacity: 0;
    -webkit-transition: all 0.3s ;
    -moz-transition: all 0.3s ;
    transition: all 0.3s ;
    
}

.main .menulist .pull-right a:before {
    left: inherit;
    right: 10px
}

.main .menulist a:hover:before {
    background: url(../../images/btn_details.png) center center no-repeat rgba(0,0,0,0.7);
    opacity: 1
}

/*-------------------
    Inner Page
-------------------*/
.inner h1 {
    margin: 5px auto;
    font-weight: 100;
    font-size: 2em;
    letter-spacing: 0.02em;
    color: #404040
}

.inner h1.grey {
    color: rgba(203, 203, 203, 0.7);
    text-align: center;
    font-weight: bold;
    font-size: 2.3em
}

.inner p{
    font-size: 1.1em
}

.inner .red_strong{
    color:#ca1f2f;
    font-weight: bold;
    font-style: italic
}

.inner hr {
    width: 100px;
    border-top: 1px solid #4e4e4e;
    margin-bottom: 30px;
}

.inner hr.grey {
    border-top: 1px solid #dbdbdb;
}

.inner .tab {
    height: 55px;
    overflow: hidden;
    color: #fff;
    background: #4e4e4e;
    border-radius: 8px;
    margin-bottom: 10px;
}

.inner .tab span{
    width: 90px;
    text-align: center;
    float: left;
    border-right: 1px solid #fff;
    line-height: 1.2em;
    font-size: 4.5em;
    color: #989898;
}

.inner .tab.red, .inner .tab.red span {
    background: #ca1f2f;
    color: #fff
}

.inner .tab p{
    color: #fff;
    font-size:1.1em;
    padding: 5px 20px;
    height: 55px;
    display: table-cell;
    vertical-align: middle;
}

.inner .menu {
    background: #f2f2f2;
    padding: 20px;
    width: 100%;
    display: inline-block;
}

.inner .menu .tab{
    height: 35px;
    border-radius: 5px;
}

.inner .menu .tab p {
    height: 35px;
    padding: 5px 10px;
}

.inner .menu .tab span {
    width: 50px;
    font-size: 3em;
}

.inner .bg_grey{
    background: #f2f2f2;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px
}

.inner .bg_grey h3{
    width: 250px;
    text-align: center;
    background: #fff;
    color: #2f2f2f;
    border: 1px solid #4e4e4e;
    border-radius: 50px;
    box-shadow: 2px 2px 3px #acacac;
    line-height: 2em;
    font-weight: bold;
    font-size:1.1em;
    padding-top:2px;
    margin: 5px 10px
}

.inner .bg_grey h4 {
    color: #535353;
    font-size: 1em;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 10px
}

.inner .bg_grey p{
    text-align: justify;
    padding: 5px 10px;
    font-size: 1.1em;
    line-height: 1.8em;
}

.inner .bg_grey hr {
    margin-top: 30px
}

.inner .border {
    background: #fff;
    border: 1px solid #c1c1c1;
    padding: 10px 20px;
}

.inner .border h1, .inner h1.line{
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid #9a9a9a;
    padding-bottom: 5px;
    padding-left: 20px;
    margin: 0px 10px 10px -20px;
    width: 155px;
    white-space: nowrap;
}

.inner .border h1 span{
    text-transform: capitalize;
    font-size: 0.7em;
    font-style: italic;
    color: #ca1f2f;
    letter-spacing: 0em
}

.inner .border ul{
    padding: 5px 30px
}

.inner .border ul li{
    margin-bottom: 8px;
    line-height: 1.3em
}

.inner .border img {
    width: 100%
}

.inner .highlight {
    color: #ca1f2f;
    font-weight: bold
}

.inner button{
    font-weight: bold;
    font-size: 1.8em;
    vertical-align: bottom;
    background: transparent;
    border: 0;
    position: absolute;
    bottom: 0;
    right: 10px;
    padding: 0 25px 5px 0;
    text-align: right;
    color: #9a9a9a;
}

.inner button:after, .inner button.red:after{
    content: '';
    background: url(../../images/btn_arrow.png) right bottom no-repeat transparent;
    width: 29px;
    height: 25px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.inner button, .inner button:after{
    -webkit-transition: all 0s ;
    -moz-transition: all 0s ;
    transition: all 0s ;
}

.inner button:hover, .inner button.red, .inner .menu a:hover{
    color: #ca1f2f;
    text-decoration: none
}

.inner button:hover:after, .inner button.red:after {
    background: url(../../images/btn_arrow_red.png) right bottom no-repeat transparent;
}


/*-------------------
    Inner - About us
-------------------*/
.about .why {
    padding-top: 0
}
.about .timetable {
	padding: 0
}

.about .timetable table {
    width: 100%;
    padding: 10px;
    line-height: 2em;
    font-size: 1.1em;
    text-align: center;
    vertical-align: middle
}

.about .timetable h2{
    color: #000;
    text-align: center;
    font-weight: 400;
    font-size:1em;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #bbb;
}

.about .content ul {
    padding-left: 20px;
    margin-bottom: 10px
}

.about .content ul li {    
    font-size: 1.1em;
    line-height: 2.2em
}

.about .timetable .timebox {
    margin-top: 15px;
    background: #4e4e4e;
    color: #fff;
    width: 150px;
    display: inline-block;
    border-radius: 50px;
    line-height: 1.4em
}

/*-------------------
    Inner - products
-------------------*/
.products .border {
    padding-bottom: 50px
}

.products p{
    margin-bottom: 30px
}

.products p.slogan {
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    color: #ca1f2f;
}


/*-------------------
    Inner - category
-------------------*/
.catalogue.login .border {
	width: 450px;
    height: 200px;
    margin: auto
}

.catalogue.login .content table {
    width: 60%;
    margin: auto
}

.catalogue .content table tr td {
    padding: 3px 5px;
    font-size: 1.1em;
    color: #4e4e4e
}

.catalogue .content button {
    width: 450px;
    margin: auto;
    position: absolute;
    right: 20px;
    bottom: -34px;
}

.catalogue.login .content button {
    position: relative;
}

.catalogue .content .tab-wrapper {
    width: 450px;
    margin: auto
}

.catalogue .content .tab-wrapper.menu-logout {
    text-align: right
}

.catalogue .content .tab-wrapper.menu-logout a {
    display: inline-block;
    margin-left: 10px
}

.catalogue .content .tab-wrapper a:hover {
    text-decoration: none
}

.catalogue .content .tab-wrapper a:hover .tab{
    background: #b11524;
}

.catalogue .content .tab {
    width: 180px;
    height: 35px;
    text-align: right;
    margin-right: 0;
    margin-left: auto;
    border-radius: 5px;
}

.catalogue .content .tab span{
    width: 60px;
    height: 35px;
    line-height: 2.2em;
    font-size: 1em
}

.catalogue .content .tab span img {
    width: auto
}

.catalogue .content .tab  p {
    font-size: 0.9em;
    padding: 0px 25px;
    height: 35px;
    text-transform: uppercase
}

.catalogue .content .tab.small {
    margin-left: 0;
    width: 100px;
    height: 20px;
    background: #b3b3b3;
    border-radius: 3px;
}

.catalogue .content .tab.small span {
    width: 35px;
    height: 20px;
    line-height: 1.6em;
}

.catalogue .content .tab.small p {
    height: 20px;
    padding: 0px 15px;
    line-height: 1.8em;
    display: block;
}

.catalogue .content h5{
	color: #ca1f2f;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.2em
}

.catalogue .content p{
    margin-bottom: 10px
}

.catalogue.reg .content table {
    border-collapse: separate;
    border-spacing: 5px;
}

.catalogue.reg button {
    bottom: -10px;
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 30px
}

.catalogue.reg button[type=reset] {
    right: -21px;
}

.catalogue.reg button[type=submit] {
    right: 80px
}

.catalogue.menu .menu-list .tab{
    width: auto;
    text-align: center;
    margin-bottom: 20px
}

.catalogue.menu .menu-list .tab span {
    font-size: 3em;
    line-height: 1.3em;
    color: #fff
}

.catalogue.menu .menu-list .tab p{
    text-transform: capitalize;
    font-size: 1em
}

.catalogue.details .content p{
    line-height: 1.1em
}

.catalogue.details .cataloguebar {
    display: block
}

.catalogue.details .cataloguebar li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    background: #707070;
    color: #fff;
    border-radius: 30px;
    width: auto;
    padding: 2px 15px;
    cursor: pointer
}

.catalogue.details .cataloguebar li:hover {
    background: #ca1f2f;
}

.catalogue.details .cataloguebar li a, .catalogue.details .cataloguebar li a:hover{
    color: #fff;
    text-decoration: none
}

.catalogue.details .info_table {
    width: 100%;
    margin-bottom:10px;
    color: #000;
    background: #fff;
}

.catalogue.details .info_table tr {
    border: 1px solid #bbbbbb;
    height: 30px
}

.catalogue.details .info_table tr td {
    padding: 0 5px;
    height: 25px;
    line-height: 1em;
    font-size: 0.85em
}

.catalogue.details .info_table tr:nth-child(1), .catalogue.details .info_table tr:nth-child(1) td  {
    font-weight: bold;
    color: #000;
    font-size: 0.95em;
    border: 0
}

.catalogue.details .info_table a {
    color:#ca1f2f;
}

.catalogue.details .info_table2 {
    width: 100%
}

.catalogue.details .info_table2 input[type=radio],
.catalogue.details .info_table2 .arialbold {
    width: auto;
    cursor: pointer
}

.catalogue.details .info_table2 input[type=submit] {
    padding: 3px 15px;
    cursor: pointer
}


.catalogue.details button.edit {
    position: relative;
    width: auto;
    bottom: inherit;
    right: inherit
}

.catalogue.details button.edit:before {
    content: '';
    background: url('../../images/icon_edit.png') center center no-repeat transparent;
    width: 17px;
    height: 17px;
    display: inline-block;
}

.catalogue.details button.edit:after {
    display: none
}


/*-------------------
    Inner - news
-------------------*/
.news .content h1 {
    color:#ca1f2f;
    text-transform: capitalize
}

.news .content p {
    line-height: 1.5em
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url(../../images/btn_close.png); 
    background-size: cover;
    position: fixed;
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px
}


/*-------------------
    Inner - links
-------------------*/
.links .content .border {
    min-height: 200px
}

.links .content .wrapper {
    display: block;
    margin-bottom: 20px
}

.links .content .logo, .links .content ul {
    display: table-cell;
    width: auto;
    vertical-align: top
}

.links .content ul{
    padding-left: 50px;
}

.links .content ul li{
    font-size: 1.1em;
    line-height: 1.6em
}

.links .content  ul.videotab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    margin-bottom: 20px
}

.links .content  ul.videotab li {float: left;}
.links .content  ul.videotab li img { margin-bottom: 10px; width: 100%}
.links .content  ul.videotab li a {
    display: inline-block;
    padding: 10px 8px 15px 8px;
    vertical-align: top;
    text-align: left;
    width: 180px;
    line-height: 1.1em;
    text-decoration: none;
    cursor: pointer
}

.links .content .tabcontent {
    display: none;
    padding: 6px 12px;
}

.links .content .tabcontent.active {
    display: block
}
                                
.links .content .tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
                          
/*-------------------
    Inner - Contact
-------------------*/
.contact .location p{
    line-height: 1.4em;
    font-weight: 600
}

.contact .location h3 {
    margin-left: 20px
}

.contact form div {
    padding: 0
}

.contact table {
    widows: 100%;
}

.contact table tr td {
    padding: 3px 0
}

.checkbox {
    width: 100%;
    text-align: center;
    margin: 30px 0;
    font-size: 1.1em
}

input[type=checkbox] {
  display: none;
}
.checkbox label:before {
  content: '';
  background:#fff;
  border: 1px solid #ccc;
  font-size: 15px;
  text-align: center;
  width: 15px;
  height: 15px;
  line-height: 10px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle
}

input[type=checkbox]:checked + label:before {
  content: "\2713";
  color: #444;
  font-weight: bold
}

.contact button {
    bottom: -31px;
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 30px
}

.contact button[type=reset] {
    right: -21px;
}

.contact button[type=submit] {
    right: 80px
}

/*-------------------
    Button - Page Control
-------------------*/
.btn_control {
    text-align: center
}

.btn_control button {
    margin: 0 5px;
    background: transparent;
    border: 0;
    vertical-align: text-bottom;
    height: 28px;
    width: 28px
}

.btn_control button:focus {
    outline: 0
}

.btn_control button.first {
    background: url(../../images/btn_front.png) center center no-repeat;
}

.btn_control button.prev {
    background: url(../../images/btn_prev02.png) center center no-repeat;
}

.btn_control button.next {
    background: url(../../images/btn_next02.png) center center no-repeat;
}

.btn_control button.last {
    background: url(../../images/btn_last.png) center center no-repeat;
}

.btn_control button.page_num {
    font-family: 'OptimaLTStd', san-serif;
    font-size: 2em;
    line-height: 1em;
    font-weight: normal
}

.btn_control button.page_num.current {
    text-decoration: underline;
    font-weight: bold
}


/*-------------------
    Footer
-------------------*/
footer .row {
    font-family: 'Maven Pro', sans-serif;
    background-color: #1f1f1f;
    padding: 30px 40px;
    margin: 0
}

footer .row  div {
    content:'';
    background: #919191;
    height: 1px;
    width: 100%;
    display: inline-block;
}

footer .copyright, footer .copyright a {
    text-transform: capitalize;
    color: #fff;
    background: #1f1f1f;
    text-align: center;
    font-size: 1.05em;
    font-weight: normal;
    margin: 0 auto;
    width: 500px;
    margin-top: -10px;
}

/* -----------------------------------------
   Back to top Button
----------------------------------------- */
#back-top {
    position: fixed;
    right: 0;
    bottom: 0;
    background: #1f1f1f;
}
#back-top a {
	width: 48px;
    height: 48px;
	display: block;
	text-align: center;
    font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
    background: url(../../images/btn_backtotop.jpg) center center no-repeat;
	color: #fff;
    /* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #fff;
    opacity: 0.9
}