/* ========================================================================== JHTT styles ========================================================================== */ /* used for logos in home page "training per manufacturer" to center logos in their space */ .mycenter {margin: auto;} body { color: #fff; background: #000; font-family: 'Arial', 'Helvetica', sans-serif; font-weight: 300; margin: 0px; padding: 0px } h1{font-size: 60px} .header{ background: url(../images/header_bg.jpg) center center repeat-x; color: #fff; padding: 10px 0px; margin-bottom: 25px; } a, a:link{color: red;} .navbar-brand img.img-fluid{margin-top: 22px} .page-header, .icons{ display: none !important} /* custom style to hide the scroll bar at the bottom of the "training per manufacturer" content on home page */ .home-page .accordion-inner { overflow-y: hidden!important; overflow-x: hidden!important; } .home-page .rl_sliders.accordion>.accordion-group, .home-page .panel-group .panel, .home-page .panel-group { margin-bottom: 0px; } .home-page .rl_sliders.accordion { margin-bottom: 0em; } .rl_sliders.accordion>.accordion-group.active>.accordion-heading>a.accordion-toggle{color: #fff; background: url(../images/accordion_bg.jpg) #000; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; border: 1px solid #fff} .rl_sliders.accordion>.accordion-group>.accordion-heading>a.accordion-toggle{color: #fff; background: url(../images/accordion_bg.jpg) #000; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; border: 1px solid #fff; border-radius: 0px} .rl_sliders.accordion>.accordion-group>.accordion-heading>a.accordion-toggle:hover{color: #fff} .rl_sliders.accordion>.accordion-group>.accordion-body>.accordion-inner{background: #999; color: #000; border-color: #3e3a31} .rl_sliders.accordion>.accordion-group>.accordion-body>.accordion-inner .col-md-4{margin-bottom: 20px} .rl_sliders.accordion>.accordion-group>.accordion-body>.accordion-inner img.shadow{box-shadow: 0px 0px 5px #000} .rl_sliders.accordion>.accordion-group.active>.accordion-heading>a.accordion-toggle{color: #fff !important; font-size: 16px;} .accordion-heading>a:before { font-size: 20px; content: "\002B"; float: right; transition: all 0.5s; opacity: .9 } .active .accordion-heading a:before { font-size: 20px; content: "\002D"; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .accordion-heading:first-child{ display:none; } .litetooltip-hotspot-container .blink{-webkit-animation: litetooltip_hotspot_blink 1.2s ease-in infinite} /* TABS */ .rl_tabs.top>ul.nav-tabs>li.active a{ background: #ca2136; box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); color: #fff; border-radius: 0px; } .rl_tabs.top>ul.nav-tabs>li a{ background: #434444; box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); color: #fff; border-radius: 0px;} .rl_tabs.top>ul.nav-tabs>li.active a:hover{color: #000} .rl_tabs.top>ul.nav-tabs>li a:hover{background: #000} .rl_tabs.outline_content>.tab-content{border-color: #000 !Important; border-top: none !important; padding: 15px 0px 0px 0px !important} .additional{background: #3e3e3e; padding: 25px; border: 1px solid #ededed; margin: 15px 15px 30px 15px} .img-fluid{max-width: 100%; height: auto} button{background: #ca2136; box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); color: #fff; border-radius: 0px;} .rl_tabs .nav-tabs{ border-bottom: none !important} ul.builddetails, ul.builddetails li{list-style: none; padding:0px; margin-left: 0px; width: 100%} ul.builddetails li{display: block; text-transform: uppercase} ul.builddetails li a{background: #434444; box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); color: #fff; border-radius: 0px; display: block; padding: 9px 10px; width: 100%} ul.builddetails li a.active{background: #ca2136; box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); color: #fff; border-radius: 0px;} ul.build6 a{padding: 28px 10px !important; } ul.build4 a{padding: 47px 10px !important; } /* GALLERY */ ul.sigFreeClassic li.sigFreeThumb{ margin: 16px; box-shadow: 0px 0px 5px #000} /* load king originator */ ul#sigFreeId493d14b23c a.sigFreeLink, ul#sigFreeId493d14b23c a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId493d14b23c img{ width:320px; height: 249px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* load king originator SPECS */ ul#sigFreeId510a2fbb3e a.sigFreeLink, ul#sigFreeId510a2fbb3e a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId510a2fbb3e img {height: 420px !Important; background: cover cover !Important; background-position: 100% 100% !important; } /* load king 503-554 */ ul#sigFreeIdd301d55cb0 a.sigFreeLink, ul#sigFreeIdd301d55cb0 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdd301d55cb0 img{ width:320px; height: 249px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* load king 503-554 SPECS */ ul#sigFreeId5947953e58 a.sigFreeLink, ul#sigFreeId5947953e58 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId5947953e58 img{ width:320px; height: 414px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* Workhorse FLYER */ ul#sigFreeIda90d0f9209 a.sigFreeLink, ul#sigFreeIda90d0f9209 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIda90d0f9209 img{ width:320px; height: 414px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* Workhorse SPECS */ ul#sigFreeId9d59dd3da2 a.sigFreeLink, ul#sigFreeId9d59dd3da2 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId9d59dd3da2 img{ width:320px; height: 414px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeIda801fb0e45 a.sigFreeLink, ul#sigFreeIda801fb0e45 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIda801fb0e45 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId6c110ef1de a.sigFreeLink, ul#sigFreeId6c110ef1de a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId6c110ef1de img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId2e27d76f3f a.sigFreeLink, ul#sigFreeId2e27d76f3f a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId2e27d76f3f img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeIdf556919f48 a.sigFreeLink, ul#sigFreeIdf556919f48 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdf556919f48 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeIdb378a763f3 a.sigFreeLink, ul#sigFreeIdb378a763f3 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdb378a763f3 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId4fb83641d9 a.sigFreeLink, ul#sigFreeId4fb83641d9 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId4fb83641d9 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId9f54643444 a.sigFreeLink, ul#sigFreeId9f54643444 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId9f54643444 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId975a603885 a.sigFreeLink, ul#sigFreeId975a603885 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId975a603885 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* XL 110 */ ul#sigFreeId3a9aa7b2ad a.sigFreeLink, ul#sigFreeId3a9aa7b2ad a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId3a9aa7b2ad img{ height: 250px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId1686535ddd a.sigFreeLink, ul#sigFreeId1686535ddd a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId1686535ddd img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* XL 80 */ ul#sigFreeIdbfe3cc4ba0 a.sigFreeLink, ul#sigFreeIdbfe3cc4ba0 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdbfe3cc4ba0 img{ height: 240px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* ul#sigFreeIdbfe3cc4ba0 a.sigFreeLink, ul#sigFreeIdbfe3cc4ba0 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdbfe3cc4ba0 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} */ ul#sigFreeId3863768e89 a.sigFreeLink, ul#sigFreeId3863768e89 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId3863768e89 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId746dfa7ad8 a.sigFreeLink, ul#sigFreeId746dfa7ad8 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId746dfa7ad8 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId02528584a6 a.sigFreeLink, ul#sigFreeId02528584a6 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId02528584a6 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId9372e24b72 a.sigFreeLink, ul#sigFreeId9372e24b72 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId9372e24b72 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId2ae5f1c327 a.sigFreeLink, ul#sigFreeId2ae5f1c327 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId2ae5f1c327 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeIdf8483a86eb a.sigFreeLink, ul#sigFreeIdf8483a86eb a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdf8483a86eb img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeIdc1fe4c4769 a.sigFreeLink, ul#sigFreeIdc1fe4c4769 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdc1fe4c4769 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId7d63f6857c a.sigFreeLink, ul#sigFreeId7d63f6857c a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId7d63f6857c img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId0ea019f505 a.sigFreeLink, ul#sigFreeId0ea019f505 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId0ea019f505 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId66f5611f6e a.sigFreeLink, ul#sigFreeId66f5611f6e a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId66f5611f6e img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId47d6aa2cba a.sigFreeLink, ul#sigFreeId47d6aa2cba a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId47d6aa2cba img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* COMPARISONS */ ul#sigFreeId499f61f602 a.sigFreeLink, ul#sigFreeId499f61f602 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId499f61f602 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeIdf310f826b1 a.sigFreeLink, ul#sigFreeIdf310f826b1 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeIdf310f826b1 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId0aedeeccc0 a.sigFreeLink, ul#sigFreeId0aedeeccc0 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId0aedeeccc0 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} ul#sigFreeId85ac63dc97 a.sigFreeLink, ul#sigFreeId85ac63dc97 a.sigFreeLink:hover img.sigFreeImg, ul#sigFreeId85ac63dc97 img{ height: 410px !Important; background: cover cover !Important; background-position: 100% 100% !important} /* HOTSPOTS */ .hotspot{box-shadow: 0px 0px 5px #000; width: 20px !important; height: 20px !important} /* VIDEO */ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal-dialog {width: 70% !important;} /* FOOTER */ footer{ background: url(../images/header_bg.jpg) center center repeat-x; height: 258px; border-top: 2px solid #fff; color: #fff; padding: 10px 0px;} footer a{color: #fff} /* LOGIN */ .well{background-image: none !Important; background-color: #000 !Important; border: none !Important} .form-horizontal .control-label, .controls{ text-align: center; margin: 0 auto} form#member-profile fieldset:nth-child(2){display: none !Important} legend{color: #fff; text-align:center} form#member-profile input{color: #000 !important} button.btn{background: red !important; background-image: none; color: #fff; padding: 7px 14px; border: none; margin-top: 10px} /*custom tooltip*/ .hotspot>.tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .hotspot .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .hotspot:hover .tooltiptext { visibility: visible; } .leftlogo{padding-left: 0px !Important} .rightlogo{padding-right: 0px !important} #jhtt-logo { width: 500px; float: left; } .hawklogo { width: unset; margin-top: 30px; margin-left: 130px; padding-left: 100px; padding-bottom: 10px; } /* ##################################### Non-Mobile First Method ##################################### */ /* ##################################### Large Devices, Wide Screens ##################################### */ @media only screen and (max-width : 1200px) { #jhtt-logo { width: 500px; float: left; } .hawklogo { width: unset; margin-top: 35px; margin-left: 30px; padding-left: 0px; } .modal-dialog { width: 870px; margin: 30px auto; } ul.builddetails li a{padding: 6px 10px 5px} } /* ##################################### Medium Devices, Desktops ##################################### */ @media only screen and (max-width : 992px) { ul.builddetails { font-size: 12px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .modal-dialog { width: 870px; margin: 30px auto; } } /* ##################################### Small Devices, Tablets ##################################### */ @media only screen and (max-width : 768px) { #jhtt-logo { width: 250px; float: left; } .hawklogo { width: 125px; margin-top: 25px; margin-left: 30px; float: left; padding-left: 0px; } /* addds padding to the bottom of the side dump logo on home page */ .my-padding-bottom { margin-bottom: 15px; } .modal-dialog { width: 670px; margin: 30px auto; } h1{ font-size: 40px } } /* ##################################### Extra Small Devices, Phones ##################################### */ @media only screen and (max-width : 480px) { #jhtt-logo { width: 200px; float: left; } .hawklogo { width: 75px; margin-top: 15px; float: left; padding-left: 0px; } /* addds padding to the bottom of the side dump logo on home page */ .my-padding-bottom {margin-bottom: 15px;} ul.builddetails{ font-size: 12px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .header{ background: url(../images/header_bg_mobile2.jpg) center center repeat-x; height: 108px; color: #fff; padding: 10px 0px; margin-bottom: 25px} .navbar-brand img.img-fluid{max-height: 70px; margin-top: 3px !important} footer{ background: url(../images/header_bg_mobile2.jpg) center center repeat-x; height: 108px; border-top: 2px solid #fff; color: #fff; padding: 0px 10px !Important; } footer img{max-height: 20px !Important; width: auto !important} footer h3{margin-top: 0px} .rl_sliders.accordion>.accordion-group>.accordion-heading>a.accordion-toggle{color: #fff; text-shadow: 0px 0px 4px #000} .rl_tabs.top>ul.nav-tabs>li a{ font-size: 11px !important} h1{font-size: 28px !important} /* HOTSPOTS */ .hotspot{box-shadow: 0px 0px 5px #000; width: 10px !important; height: 10px !important} .leftlogo{padding-left: 10px !Important} .rightlogo{padding-right: 10px !important} } .sam>li{ height:unset !important; } div.sam a{ height:unset !important; } div.sam img.sigFreeImg{ height:unset !important; background-size: contain !important; }