body { padding: 0px !important; margin: 0px !important; font-family: Arial, Helvetica, sans-serif; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; } .tt-wrapper { padding: 0; } .tt-wrapper li { float: left; list-style: none; } .tt-wrapper li a { display: block; height: 25px; margin: 0 2px; outline: none; text-indent: -9000px; position: relative; cursor: default; } .tt-wrapper li .centeringping { background-image: url(../images/centeringping.png); width: 200px; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: -140px 0 0 -420px; } .tt-wrapper li .super_needle { background-image: url(../images/super_needle.png); width: 240px; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: -85px 0 0 -165px; } .tt-wrapper li .black_chrome { background-image: url(../images/black_chrome.png); width: 195px; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 285px; } .tt-wrapper li .forged_shank { background-image: url(../images/forged_shank.png); width: 137px; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: 75px 0 0 340px; } .tt-wrapper li .weighted_shank { background-image: url(../images/weighted_shank.png); width: 160px; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: 250px 0 0 -60px; } .tt-wrapper li .high_carbon { background-image: url(../images/high_carbon.png); width: 172px; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: 190px 0 0 -390px; } .tt-wrapper li .heading_hook { background-image: url(../images/heading_hook.png); width: 376px; height:35px; background-repeat: no-repeat; position: absolute; margin: 0px 0 0 0px; } .tt-wrapper li a span { width: 300px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -150px; font-weight: bold; font-style: normal; font-size: 15px; color: #fff; text-align: center; border: 0px solid #fff; background: #423e3e; text-indent: 0px; border-radius: 5px; position: absolute; bottom: 33px; opacity: 0; visibility: visible; pointer-events: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-family: Arial, Helvetica, sans-serif; } .tt-wrapper li a span:before, .tt-wrapper li a span:after { content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 0px solid rgba(62, 62, 62, 0.5); } .tt-wrapper li a span:after { bottom: -5px; margin-left: -5px; border-top: 5px solid rgba(62, 62, 62, 0.8); } .tt-wrapper li a:hover span { visibility: visible; opacity: 1; -webkit-transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -o-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1); } .text-on-image-wrap { position: relative; } .tt-wrapper li a:hover { z-index: 200; } .heading_hookk_m{position: absolute; margin: -40px 0px 0px 28%; z-index: 500; } .tool_tiop_w{ width:800px !important; left:10% !important; font-weight:normal !important; font-size:14px !important;} .tool_tiop_img{ width: auto; margin:0px auto;} @media only screen and (max-width: 1200px) { .tt-wrapper li .centeringping { margin: -155px 0 0 -420px; } .tt-wrapper li .super_needle { margin: -90px 0 0 -165px; } .tt-wrapper li .black_chrome { margin: -211px 0 0 260px; } .tt-wrapper li .forged_shank { margin: 70px 0 0 300px; } .tt-wrapper li .weighted_shank { margin: 240px 0 0 -60px; } .tt-wrapper li .high_carbon { margin: 185px 0 0 -345px; } } @media only screen and (max-width: 991px) { .tt-wrapper li .centeringping { margin: -170px 0 0 -350px; } .tt-wrapper li .super_needle { margin: -100px 0 0 -165px; } .tt-wrapper li .black_chrome { margin: -225px 0 0 160px; } .tt-wrapper li .forged_shank { margin: 55px 0 0 220px; } .tt-wrapper li .weighted_shank { margin: 230px 0 0 -60px; } .tt-wrapper li .high_carbon { margin: 170px 0 0 -350px; } .text-on-image-wrap { width: 720px; margin: 0 auto; } .heading_hookk_m{position: absolute; margin: -83px 0px 0px 24%; z-index: 500; } .tool_tiop_w{ width:650px !important;} } @media only screen and (max-width: 768px) { .tt-wrapper li .centeringping { margin: -105px 0 0 -210px; width: 150px; background-size: contain; } .tt-wrapper li .super_needle { margin: -60px 0 0 -110px; width: 180px; background-size: contain; } .tt-wrapper li .black_chrome { margin: -145px 0 0 65px; width: 145px; background-size: contain; } .tt-wrapper li .forged_shank { margin: 40px 0 0 115px; width: 102px; background-size: contain; } .tt-wrapper li .weighted_shank { margin: 150px 0 0 -50px; width: 120px; background-size: contain; } .tt-wrapper li .high_carbon { margin: 110px 0 0 -210px; width: 123px; background-size: contain; } .text-on-image-wrap { width: 430px; margin: 0 auto; } .tt-wrapper li a span { font-size: 11px; } .tt-wrapper li a span { width: 140px; margin-left: -70px; line-height: 15px; } .tt-wrapper li .heading_hook { width: 280px; } .heading_hookk_m{position: absolute; margin: -30px 0px 0px 24%; z-index: 500; } .tool_tiop_w{ width:500px !important;} } @media only screen and (max-width:650px) { .tt-wrapper li .heading_hook { width: 201px; } .heading_hookk_m{position: absolute; margin: -25px 0px 0px 24%; z-index: 500; } .tool_tiop_w{ width:350px !important; font-size:12px !important; line-height:15px;} } @media only screen and (max-width: 480px) { .tt-wrapper li .centeringping { margin: -70px 0 0 -140px; width: 100px; background-size: contain; } .tt-wrapper li .super_needle { margin: -40px 0 0 -60px; width: 120px; background-size: contain; } .tt-wrapper li .black_chrome { margin: -92px 0 0 35px; width: 100px; background-size: contain; } .tt-wrapper li .forged_shank { margin: 25px 0 0 76px; width: 68px; background-size: contain; } .tt-wrapper li .weighted_shank { margin: 95px 0 0 -32px; width: 80px; background-size: contain; } .tt-wrapper li .high_carbon { margin: 70px 0 0 -140px; width: 81px; background-size: contain; } .text-on-image-wrap { width: 274px; margin: 0 auto; } .tt-wrapper li .heading_hook { width: 201px; } .heading_hookk_m{position: absolute; margin: -51px 0px 0px 24%; z-index: 500; } .tool_tiop_w{ width:300px !important; left:-5% !important; } .tool_tiop_img{ width:70%; margin:0px auto;} }