::i-block-chrome, .pix-main-menu {
        width: auto;
        float: right;
      padding: 25px 0px;
    }  

::i-block-chrome, .pix-header.fixed .pix-main-menu {
     padding: 10px 0px;
}


  ::i-block-chrome, #menu-main {
    float: left;
}
  ::i-block-chrome, .pix-header nav > ul > li {
    height: auto;
}

  ::i-block-chrome, .pix-header .container {
    display: flex;
    flex-direction: column;
}

::i-block-chrome, .menu-logo {
    width: 91px;
    float: left;
}
::i-block-chrome, .pix-header.fixed .menu-logo .scroll {
    width: 51px;
    float: left;
}

::i-block-chrome, .slider-image {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

::i-block-chrome, .hero {
    position: relative;
}

::i-block-chrome, .hero .slide {
    height: 800px;
    position: relative;
    z-index: 99;
}

::i-block-chrome, .hero .slide .slide-caption {
    display: table;
}
::i-block-chrome, .hero .slide .row {
    display: table-cell;
  text-align: center;
  vertical-align: middle;
}
::i-block-chrome, .pix-question-form {
    width: 100%;
    float: left;
    position: relative;
}
::i-block-chrome, .safari-form-div01 {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
}
::i-block-chrome, .safari-form-div02 {
    position: absolute;
    top: 60px;
    right: 0px;
    text-align: right;
}
::i-block-chrome, .safari-form-div03 {
    position: absolute;
    top: 120px;
    right: 0px;
    text-align: right;
}
::i-block-chrome, .safari-form-div04 {
    position: absolute;
    top: 220px;
    right: 0px;
    text-align: right;
}
::i-block-chrome, footer .wpb_column {
    width: 33.3333%;
    float: left;
}
::i-block-chrome, .pix-footer {
    float: left;
    width: 100%;
}

.prCont01 .prImg {
    position: relative;
    top: 0px;
}
.pageContent .container-fluid {
    float: left;
}
.shop-area .container {
    width: 100%;
}
.pageContent {
    float:left; 
}
.container .contArea {
    float: left;
}
.prCont01 > .inner {
    float: left;
    height: auto;
}
.prCont01 .prTxt .txt {
    font-size: 16px;
}
@media screen and (min-width: 1366px) {

    .prMainVisual6 {
        background-position: center center;
    }
    .prMainVisual8 {
        background-position: center center;
    }
    .prMainVisual7 {
        background-position: center center;
    }

} 


@media screen and (max-width: 1024px) {
    .prCont01 .prTit {
        font-size: 28px;
    }
    .text-white-color .pix-title-h2 {
        width: 100%!important!important;
        padding: 0px!important;
    }
.prCont01 .prTxt .txt {
    padding: 0px;
    margin: 0px;
}
    .container {
        max-width: 100%;
    }
    .pix-submit-holder-2 {
    margin-bottom: 50px!important;
    display: inline-block;
    float: right;
}
    .pix-blog-article {
    display: flex;
    flex-direction: column;
}
    .deta-text-box ul li {
        width: 100%;
        margin-bottom: 20px;
    }
    .pix-footer {
        float: left;
    }
    .prMainVisual6 {
        height: 70vh;
    }
}


@media screen and ( max-width:1024px ) {

		/* Force table to not be like tables anymore */
		table.jis-table-automotive-en, .jis-table-automotive-en thead, .jis-table-automotive-en tbody, .jis-table-automotive-en th, .jis-table-automotive-en td, .jis-table-automotive-en tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.jis-table-automotive-en thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .jis-table-automotive-en tr {
      margin: 0 0 1rem 0;
    }
      
    
		.jis-table-automotive-en td {
			/* Behave  like a "row" */
			border: none;
            
			border-bottom: 1px solid #bdc8e6;
			position: relative;
			padding-left: 50%;
		}
        
    .jis-table-automotive-en tr:nth-child(odd) {
      background: #e1e9ff;
    }
    .jis-table-automotive-en tr:nth-child(even) {
      background: #fff;
    }
    
    .tr1 {
        background: transparent;
    }
		.jis-table-automotive-en td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 16px;
			left: 16px;
			width: 45%;
            text-align: left;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.jis-table-automotive-en td:nth-of-type(1):before { content: "Range"; }
		.jis-table-automotive-en td:nth-of-type(2):before { content: "Part Number"; }
		.jis-table-automotive-en td:nth-of-type(3):before { content: "BCI"; }
		.jis-table-automotive-en td:nth-of-type(4):before { content: "JIS"; }
		.jis-table-automotive-en td:nth-of-type(5):before { content: "Length"; }
		.jis-table-automotive-en td:nth-of-type(6):before { content: "Width"; }
		.jis-table-automotive-en td:nth-of-type(7):before { content: "Total Height"; }
		.jis-table-automotive-en td:nth-of-type(8):before { content: "Capacity 20hr (Ah) "; }
		.jis-table-automotive-en td:nth-of-type(9):before { content: "SAE/GSO CCA (A)"; }
		.jis-table-automotive-en td:nth-of-type(10):before { content: "RC (min)"; }
        .jis-table-automotive-en td:nth-of-type(11):before { content: "Terminal Type "; }
        .jis-table-automotive-en td:nth-of-type(12):before { content: "Layout"; }
        .jis-table-automotive-en td:nth-of-type(13):before { content: "Hold Down "; }
    
    
	}


@media screen and ( max-width:1024px ) {

		/* Force table to not be like tables anymore */
		table.jis-table-automotive-ar, .jis-table-automotive-ar thead, .jis-table-automotive-ar tbody, .jis-table-automotive-ar th, .jis-table-automotive-ar td, .jis-table-automotive-ar tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.jis-table-automotive-ar thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .jis-table-automotive-ar tr {
      margin: 0 0 1rem 0;
    }
      
    
		.jis-table-automotive-ar td {
			/* Behave  like a "row" */
			border: none;
            
			border-bottom: 1px solid #bdc8e6;
			position: relative;
			padding-left: 50%;
		}
        
    .jis-table-automotive-ar tr:nth-child(odd) {
      background: #e1e9ff;
    }
    .jis-table-automotive-ar tr:nth-child(even) {
      background: #fff;
    }
    
    .tr1 {
        background: transparent;
    }
		.jis-table-automotive-ar td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 16px;
			left: 16px;
			width: 45%;
            text-align: left;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.jis-table-automotive-ar td:nth-of-type(13):before { content: "Range"; }
		.jis-table-automotive-ar td:nth-of-type(12):before { content: "Part Number"; }
		.jis-table-automotive-ar td:nth-of-type(11):before { content: "BCI"; }
		.jis-table-automotive-ar td:nth-of-type(10):before { content: "JIS"; }
		.jis-table-automotive-ar td:nth-of-type(9):before { content: "Length"; }
		.jis-table-automotive-ar td:nth-of-type(8):before { content: "Width"; }
		.jis-table-automotive-ar td:nth-of-type(7):before { content: "Total Height"; }
		.jis-table-automotive-ar td:nth-of-type(6):before { content: "Capacity 20hr (Ah) "; }
		.jis-table-automotive-ar td:nth-of-type(5):before { content: "SAE/GSO CCA (A)"; }
		.jis-table-automotive-ar td:nth-of-type(4):before { content: "RC (min)"; }
        .jis-table-automotive-ar td:nth-of-type(3):before { content: "Terminal Type "; }
        .jis-table-automotive-ar td:nth-of-type(2):before { content: "Layout"; }
        .jis-table-automotive-ar td:nth-of-type(1):before { content: "Hold Down "; }
    
    
	}




@media screen and ( max-width:1024px ) {

		/* Force table to not be like tables anymore */
		table.heavy-duty-en-table, .heavy-duty-en-table thead, .heavy-duty-en-table tbody, .heavy-duty-en-table th, .heavy-duty-en-table td, .heavy-duty-en-table tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.heavy-duty-en-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .heavy-duty-en-table tr {
      margin: 0 0 1rem 0;
    }
      
    
		.heavy-duty-en-table td {
			/* Behave  like a "row" */
			border: none;
            
			border-bottom: 1px solid #bdc8e6;
			position: relative;
			padding-left: 50%;
		}
        
    .heavy-duty-en-table tr:nth-child(odd) {
      background: #e1e9ff;
    }
    .heavy-duty-en-table tr:nth-child(even) {
      background: #fff;
    }
    
    .tr1 {
        background: transparent;
    }
		.heavy-duty-en-table td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 16px;
			left: 16px;
			width: 45%;
            text-align: left;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.heavy-duty-en-table td:nth-of-type(1):before { content: "Part Number"; }
		.heavy-duty-en-table td:nth-of-type(2):before { content: "Length"; }
		.heavy-duty-en-table td:nth-of-type(3):before { content: "Width"; }
		.heavy-duty-en-table td:nth-of-type(4):before { content: "Total Height"; }
		.heavy-duty-en-table td:nth-of-type(5):before { content: "Capacity 20hr (Ah)	"; }
		.heavy-duty-en-table td:nth-of-type(6):before { content: "SAE/GSO CCA (A)"; }
		.heavy-duty-en-table td:nth-of-type(7):before { content: "Terminal Type"; }
		.heavy-duty-en-table td:nth-of-type(8):before { content: "Layout"; }
		.heavy-duty-en-table td:nth-of-type(9):before { content: "Hold Down"; }
    
    
	}


@media screen and ( max-width:1024px ) {

		/* Force table to not be like tables anymore */
		table.popup-en-automotive, .popup-en-automotive thead, .popup-en-automotive tbody, .popup-en-automotive th, .popup-en-automotive td, .popup-en-automotive tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.popup-en-automotive thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .popup-en-automotive tr {
      margin: 0 0 1rem 0;
    }
      
    
		.popup-en-automotive td {
			/* Behave  like a "row" */
			border: none;
            
			border-bottom: 1px solid #bdc8e6;
			position: relative;
			padding-left: 50%;
		}
        
    .popup-en-automotive tr:nth-child(odd) {
      background: #e1e9ff;
    }
    .popup-en-automotive tr:nth-child(even) {
      background: #fff;
    }
    
    .tr1 {
        background: transparent;
    }
		.popup-en-automotive td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 16px;
			left: 16px;
			width: 45%;
            text-align: left;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.popup-en-automotive td:nth-of-type(1):before { content: "AH"; }
		.popup-en-automotive td:nth-of-type(2):before { content: "CCA"; }
		.popup-en-automotive td:nth-of-type(3):before { content: "Dimension (mm) - Length (L)"; }
		.popup-en-automotive td:nth-of-type(4):before { content: "Dimension (mm) - Width (W)"; }
		.popup-en-automotive td:nth-of-type(5):before { content: "Dimension (mm) - Height (H)"; }
		.popup-en-automotive td:nth-of-type(6):before { content: "Layout"; }
		.popup-en-automotive td:nth-of-type(7):before { content: "Terminal"; }
		.popup-en-automotive td:nth-of-type(8):before { content: "Hold-Down"; }
	}



@media screen and ( max-width:1024px ) {

		/* Force table to not be like tables anymore */
		table.heavy-duty-ar-table, .heavy-duty-ar-table thead, .heavy-duty-ar-table tbody, .heavy-duty-ar-table th, .heavy-duty-ar-table td, .heavy-duty-ar-table tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.heavy-duty-ar-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .heavy-duty-ar-table tr {
      margin: 0 0 1rem 0;
    }
      
    
		.heavy-duty-ar-table td {
			/* Behave  like a "row" */
			border: none;
            
			border-bottom: 1px solid #bdc8e6;
			position: relative;
			padding-left: 50%;
		}
        
    .heavy-duty-ar-table tr:nth-child(odd) {
      background: #e1e9ff;
    }
    .heavy-duty-ar-table tr:nth-child(even) {
      background: #fff;
    }
    
    .tr1 {
        background: transparent;
    }
		.heavy-duty-ar-table td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 16px;
			left: 16px;
			width: 45%;
            text-align: left;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.heavy-duty-ar-table td:nth-of-type(9):before { content: "Part Number"; }
		.heavy-duty-ar-table td:nth-of-type(8):before { content: "Length"; }
		.heavy-duty-ar-table td:nth-of-type(7):before { content: "Width"; }
		.heavy-duty-ar-table td:nth-of-type(6):before { content: "Total Height"; }
		.heavy-duty-ar-table td:nth-of-type(5):before { content: "Capacity 20hr (Ah)	"; }
		.heavy-duty-ar-table td:nth-of-type(4):before { content: "SAE/GSO CCA (A)"; }
		.heavy-duty-ar-table td:nth-of-type(3):before { content: "Terminal Type"; }
		.heavy-duty-ar-table td:nth-of-type(2):before { content: "Layout"; }
		.heavy-duty-ar-table td:nth-of-type(1):before { content: "Hold Down"; }
    
    
    .prCont03 .tblH th, .prCont03 .tblH td {
	    padding: 15px 0px 14px 155px;
}
    
    .hero .slide .slider-image {
        width: 100%;
        height: 40vh;
        
        background-repeat: no-repeat;
    }
    .hero .slide .slider-image img {
        display: none;
    }
    .prMainVisual8 .visualTit {
        text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
        font-size:35px;
        line-height: 100px;
    }
    .prMainVisual8 {
     background:url(Heavy-01.jpg) no-repeat center 55%;
    background-size: cover;
    height: 283px;
}
    .hero-style-2, .hero-style-3 {
        height: 40vh;
    }
    .slide-caption {
        height: 40vh;
    }
    .prMainVisual7 {
    background: url(img_product_top_01_01.jpg) no-repeat center 55%;
    background-size: cover;
    height: 283px;
}
.prMainVisual7 .visualTit {
        text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
         font-size:35px;
        
    }


.prMainVisual7 .visualTit {
   
    color: #fff;
    margin-top: 119px!important;
    font-family: 'Raleway', sans-serif;
    width: 100%!important;
}


.prMainVisual7 .visualTxt {
    font-size: 52px;
    color: #fff;
    margin-top: 0px!important; 
    width: 100%!important;
}
    
	}