/*
STYLE SHEET DEVELOPED FOR petol.com BY PROMIT (www.texaswebmarketing.com)
ALL RIGHTS RESERVED. COPYRIGHT 2022 PROMIT.
*/

#off-canvas-content { background: url(/images/steel-plate-banner.jpg) fixed rgba(255,255,255,0.3); background-size: cover; }
#off-canvas-content .header { background: rgba(255,255,255,1); }
.pp-viewing-Home #off-canvas-content .header { background: linear-gradient(rgba(255,255,255,0.3),transparent); }
#off-canvas-content #topnav .navbar-brand img { min-width: 80px; transition: all 1000ms; }

h1, .h1 {  font-family: eurostile-extended, sans-serif; font-weight: 900; font-style: normal; font-size: 2rem; }
h1 span { font-size: 2rem; vertical-align: auto; }

a { font-weight: bold; }
.section { background-size: cover; }
.section.banner { opacity: 1; }
.section .pp-tableCell { position: relative; height: 100%; background-color: rgba(255,255,255,0.3); }
.section p { margin-bottom: 0; }
section.p-content { padding-top: 80px;background-color: rgba(255,255,255,0.5); padding-top: 80px; padding-bottom: 100px; min-height: 3400px; }
section.p-content nav { position: absolute; width: 100%; }
section.p-content > div.container-fluid, section.p-content > div.container { padding-top: 60px; }
ol.breadcrumb { font-size: 0.8rem; padding: .5rem 2rem;  background-color: #e9d5c9; }
.breadcrumb a { font-weight: bold; }

ol ol li {
    display: list-item;
    list-style-type: lower-alpha;
    margin: 6px auto;
}
ol ol ol li {
    display: list-item;
    list-style-type: lower-roman;
    margin: 6px auto;
}

.top-text {
    display: block;
    position: absolute;
    top: 16px;
    left: 15%;
    letter-spacing: 1px;
    font-size: 17px;
    line-height: 1.1em;
    color: #000;
    opacity: 1;
    z-index: 99;
    pointer-events: none;
    transform-origin: left;
    transition: all 5000ms;
}
.active .top-text { left: 30%; opacity: 1; letter-spacing: 2px; }

small { display: inline-block; font-size: 0.8em; line-height: 1.25em; }
#lblMessage { display:block; position: absolute; top: 160px; left: 100px; }
#mainImgBlock { display: block; padding-left: 60px; position: relative; }        
#mainImg { width: 100%; padding-left: 2%; float: left; position: relative; overflow: visible; margin-bottom: 20px; }
#mainImg img { max-height: 45vh; }
li.thmImages { word-wrap: break-word; margin: 0; margin-bottom: 8px; }
li.thmImages span.thmButtonOuter { border: 1px solid #a2a6ac; border-radius: 2px; height: auto; overflow: visible; background-color: #fff; display: inline-block; padding: 0; text-align: center; text-decoration: none; vertical-align: middle; }
li.thmImages span.thmButtonOuter.active, li.thmImages span.thmButtonOuter:active, li.thmImages span.thmButtonOuter:focus, li.thmImages span.thmButtonOuter:hover { border: 1px solid #ff6c0e; box-shadow: 0 0 3px 2px rgb(228 121 17 / 50%); }
span.thmImage { padding: 0; line-height: 19px; text-align: left; white-space: normal; color: #0f1111; background-color: transparent; border: 0; display: block; font-size: 13px; margin: 0; outline: 0; }
#thmImages { width: 60px; margin-left: -60px; float: left; position: relative; overflow: visible; zoom: 1; }        
#thmImages li.thmImages img { width: 60px; border-radius: 2px; vertical-align: top; border: 0; }

#pnlTheTool { border: 2px solid #e77600; }
        
#moDetail { min-height: 45vh; position: relative; }
#moDetail .tab-top { display: none; }
#moDetail ul.nav-tabs { border: none; position: relative; border-top: 4px solid #ff6c0e; background-color: transparent; }
#moDetail .nav-tabs .nav-link { margin-bottom: -1px; position: relative; top: -2px; border: 1px solid #ff6c0e; border-radius: 0 0 12px 12px; color: #000; }
#moDetail .nav-tabs .nav-link:focus, #moDetail .nav-tabs .nav-link:hover { border-color: #ff6c0e; background-color: rgba(255,255,255,0.3); }
#moDetail .nav-tabs .nav-item.show .nav-link, #moDetail .nav-tabs .nav-link.active { color: #000; background-color: #a2a6ac; border: 2px solid #ff6c0e; }
#moDetail div.tab-content { position: absolute; width: 95%; }
#moDetail div.warnLabel { border: 2px solid #000000; max-width: 500px; background: #ff6c0e url(/images/symbol-warning.png) top center no-repeat; background-size: contain; min-width: 350px;}
#moDetail div#metricConv, #moDetail div#torqConv { border: 2px solid #000000; background-color: #ff6c0e; }

.reapImg { max-height: 100px; max-width: 150px; }
label { font-weight: bold; }
input[type=radio], input[type=checkbox] { margin-right: 6px; }

.table-responsive {
    background:
    linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.9) 100%);
    background-repeat: no-repeat;
    background-color: darkgray;
    background-attachment: local;
    padding: 1em;
}
table.catno th, table.catno td { text-align: center; }
table.catno td { white-space: nowrap; }
table.catno tr td:first-child, table.catno tr th:first-child { text-align: left; }
table.catno thead tr th { text-align: center !important; }
table.catno tr:hover { background-color: rgba(229,90,0,0.3); }
table.catno tr.notes td { white-space: normal; }
table.catno td#tableSpacer { width: 20px; border: none; }

table.chaintorx { background-color: #fff; padding: 1em; margin: 0; }
table.chaintorx th, table.chaintorx td { text-align: center; }
table.chaintorx th { white-space: nowrap; }

#navright .navbar-toggler { border: 2px outset; }
#navright .bars > div { clear: left; float: left; }
.list-group-item-petol { color: #383d41; background-color: #d6d8db; border-color: #666; }
.list-group-item-petol.active { color: #383d41; background-color: #ff6c0e; border-color: #666; }		
.list-group-item-petol.list-group-item-action:focus, .list-group-item-petol.list-group-item-action:hover { color: #383d41;	background-color: #ff6c0e; }
.border.border-petol { border: 1px solid #000 !important; }
span#lblLevelName h5 { font-family: eurostile, sans-serif;font-variant-caps:all-small-caps; background-color: #666; color: #fff; padding:2px 2px 8px 6px; line-height:1em; margin: 0; border-radius: 0; }
#snTop .list-group-item-petol { border-radius: 0; }

#off-canvas-content { z-index: auto; }
.modal-backdrop { z-index: 1; }
.modal { z-index: 9050; }
button.close { color: #fff; background-color: #ff6c0e; border-color: #ff6c0e; white-space: nowrap; opacity: 1; }

div#accGroup div.card { background-color: transparent;}
div#accGroup div.show { background-color: #fff;}

div.hytPlayerWrap .video-container {
    position: absolute;
    top: 0;
    left: 0;
}
div.hytPlayerWrap .video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 15px 35px;
    border-radius: 10px;
    font-size: 60px;
    transition: 0.3s;
}
.video-container:hover .play-button {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
}

/*
.hytPlayerWrap { display: inline-block; position: relative; }
.hytPlayerWrap.ended::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
.hytPlayerWrap.paused::after {
    content: "";
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 50px;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
*/
/******** FOR SCROLLING BELOW BANNER SECTION  ***********/
.footer.scroll-line {
    letter-spacing: 1px;
    padding: 10px 0 !important;
    background: #000 !important;
    text-align: center;
}
.footer.scroll-line a, .footer.scroll-line p, .footer.scroll-line .address p, .footer.scroll-line .address a { color: #fff; }
.footer.scroll-line .footer-left span { padding: 0 6px; } 
.footer.scroll-line p { padding: 0; margin: 0; }
.footer.scroll-line .footer-right, .footer.scroll-line .footer-left p:not(.phone-email), .footer.scroll-line .footer-logo { display: none; }
/*******************************************************/
@media (max-height: 430px)  {
    .active .rw-sentence { top: auto; bottom: 20%; }
}
@media (min-width: 576px) {
    table.catno td#tableSpacer { width: 0; padding: 0; }
}
@media (min-height: 600px) {
    #mainImg img { max-height: 65vh; }
}
@media (min-width: 650px) {
    .active .top-text { left: 25%; opacity: 1; letter-spacing: 3px; }
    #mainImgBlock { display: block; padding-left: 80px; position: relative; }
    #thmImages { width: 80px; margin-left: -80px; float: left; position: relative; overflow: visible; zoom: 1; }        
    #thmImages li.thmImages img { width: 80px; border-radius: 2px; vertical-align: top; border: 0; }
}
@media (min-width: 768px) {
    .top-text { display: block; top: 16px; left: 20%; letter-spacing: 1px; font-size: 22px; }
    .active .top-text { left: 30%; opacity: 1; letter-spacing: 3px; }
    /*.rw-sentence { top: 45%; left: 40%; font-size: 200%; }*/
    #leftCol { top: 90px; float: left; position: sticky; }
    table.catno.narrow { width: 75%; margin: 1rem auto 0 auto; }
    #moDetail div.tab-content { width: 97%; }
}

@media (min-width: 992px) {
    .pp-viewing-Home #off-canvas-content #topnav .navbar-brand img { min-width: 250px; }
	section.p-content { padding-bottom: 200px; }
    .top-text { top: 40px; left: 20%; letter-spacing: 2px; font-size: 36px; }
    .active .top-text { left: 35%; opacity: 1; letter-spacing: 5px; }
}
@media (min-width: 1200px) {
    section.p-content { padding-bottom: 300px; }
}