/*
Theme Name: Scorpion Jacks Custom Theme
Theme URI:
Author: MAK Media
Author URI: https://www.makmedia.com.au
Description: Custom theme for Scorpion Jacks International
Version: 1.0
License: (c)2021 Scorpion Jacks International Pty Ltd.  All rights reserved.
Text Domain: scorpion-jacks
Tags: black
*/

/* a5mm */
* { margin:0; padding:0; outline:0 }
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body { text-align:center; font-family:'Century Gothic','Mulish',sans-serif; font-size:20px; line-height:1.45; }
h1,h2 { text-transform:uppercase; margin-bottom:.7em; }
img { max-width:100%; height:auto; }
li { list-style-type:none; }
a { text-decoration:none; }

.section-title { font-size:32px; font-weight:700; }
.section-padding { padding:3em 20px; }
.orange-button {
	background-color: #f8901b;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
	padding: 8px 20px;
	margin: 0 auto;
    width:240px;
}


#header { display:grid; grid-template-columns:1fr 50px; color:#000; background-color:#fb901b; display:grid; padding:7px 20px; position:relative; box-shadow:0 3px 7px; }
#branding { width:240px; }

#mobile-navigation-toggle { width:40px; display:grid; align-content:center; text-align:right; }
#mobile-navigation-toggle a { color:#000; font-size:30px; }

#hero { height:445px; background-size:cover; display:flex; align-items:center; text-align:center; padding:0 20px; }
#hero h2 { font-weight:900; font-size:54px; color:#fff; text-shadow:4px 7px 7px rgba(0,0,0,.45); }
#hero a { color:#fff; font-weight:600; text-transform:uppercase; padding:10px 12px 10px 35px; background-color:#000; margin-top:10px; display:inline-block; max-width:45%; }

#navigation { text-align:left; margin-top:12px; padding:12px; border-top:1px solid rgba(0,0,0,.4); display:none; }
#navigation a { color:#000; text-transform:uppercase; font-weight:700; font-size:18px; }
#navigation ul.sub-menu { padding-left:30px; }
#navigation #products-submenu li { list-style-type:square; list-style-position:inside; }
#navigation #products-menu i { position:relative; top:-4px; left:5px; }
#navigation li { padding:8px 0 ;}
#navigation #menu-main-menu ul { display:none; }
#navigation #menu-main-menu > li.submenu-parent-open { border-top:1px solid #ffc98f; border-bottom:1px solid #ffc98f; }

#content { text-align:left; padding:2em 60px; }
#content p { margin-bottom:1.3em; line-height:1.27; }

#contact-form-inputs input, #contact-form-inputs textarea { background-color:#d1d3d4; color:#222; border:0; padding:12px; width:500px; }
#contact-form-inputs input:focus, #contact-form-inputs textarea:focus { background-color:#efefef; border:1px solid #ccc; }
.action-row input { border:1px solid #fb901b; background-color:#fff; color:#000; font-weight:bold; text-transform:uppercase; padding:8px 15px; margin-right:10px; }
.action-row input:hover { background-color:#fb901b; transition:all .4s; cursor: pointer ;}
.wpcf7 .action-row .ajax-loader { display:none; }

#footer { background-color:#fb901b; color:#000; display:grid; }
#footer > div { display:grid; }
#footer a, #footer a:visited { color:#000; }

#footer-contact h2 { font-size:22px; margin-bottom:40px; font-weight:700; }
#footer-contact h3 { font-size:22px; font-weight:600; margin-bottom:40px; }
#footer-contact ul { text-align:left; }
#footer-meta li { display:grid; grid-template-columns:35px 1fr; margin-bottom:8px; }
#footer-meta li span:last-child { padding-top:3px; padding-left:15px; }

#footer-navigation { background-image:url('template/footer-overlay.png'); background-size:cover; background-position-y:bottom; }
#footer-menu { grid-row:2; }
#footer-navmenu li { margin-bottom:18px; }
#footer-navmenu a { font-weight:700; text-transform:uppercase; font-size:18px; }
#footer-socials ul { display:inline-grid; grid-template-columns:1fr 1fr 1fr; column-gap:24px; margin-bottom:40px; }
#footer-socials li { width:44px; }
.footer-nav-contact-button { display:inline-block; background-color:black; padding:8px 15px; }
#footer .footer-nav-contact-button a { color:orange; }

#footer-legals { padding-top:30px; }
#footer-legals li { display:inline-block; font-size:16px; margin-right:8px; }
#footer-legals li:last-child{ margin-right:0; }
#footer-legals li::after { content:"|"; padding-left:8px; }
#footer-legals li:last-child::after { padding-left:0; content:""; }
#footer-legals li a { text-decoration:underline; font-weight:400; }

#copyright { background-color:black; color:#fff; font-weight:bold; padding:30px 0; }

#blurb { padding:3em 20px; font-size:1.3em; text-align:left; }
#blurb p { padding-bottom:1em; }

#locations-map { background-color:#fed09f; }
#locations-map svg { max-width:100%; height:auto; }
#locations-map-text { padding-bottom:4em; }
#locations-map-contact { margin-top:2em; }
#locations-map-contact a { display:inline-block; color:#fff; background-color:#000; padding:0 15px; line-height:36px; }

#product-set > div { padding:30px; border-bottom:1px solid #acacac; }
#product-set > div > a {
    display: flex;
    color: black;
    background-color: #fb901b;
    background-image:url('template/home-products-cta.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right center;
    width: 184px;
    height: 68px;
    text-align: left;
    padding-right: 40px;
    font-weight: bold;
    line-height: 1;
    align-items: center;
    padding-left: 7px;
    font-size: 22px;
}



#strengths-list { display:grid; padding:4em 0; }
#strengths-list p { font-weight:200; font-size:.85em; height:50px; margin:15px 0; }
#strengths-list img { width:60px; height:auto; }
#strengths-list a { display:inline-block; text-transform:uppercase; font-weight:700; border:1px solid #f7941d; font-size:.8em; color:#000; padding:7px 10px; transition:all .8s; }
#strengths-list a:hover { color:#fff; background-color:#f7941d; transition:all .3s; }

#inventory-product-summary { display:grid; padding:80px; }
#inventory-product-summary h2 { color:#f7941d; }
#inventory-product-summary #summary-details { text-align:left; }

#inventory-detail-tabs { padding:0; font-size:.8em; }

#detail-tab-navigation { border-bottom:1px solid #f8901b;}
#detail-tab-navigation ul { text-align:left; display:flex; }
#detail-tab-navigation li { border:1px solid #ccc; border-bottom:0; border-right:0; }
#detail-tab-navigation li:last-child { border-right:1px solid #ccc; }
#detail-tab-navigation li a { font-weight:bold; font-size:24px; color:#000; padding:8px 20px; background-color:#fee9d2; display:block; text-transform:uppercase; }
#detail-tab-navigation li a.active { background-color:#f8901b; }

#detail-tabs-content { display:grid; justify-content:left; }
#detail-tabs-content > div { grid-column:1; grid-row:1; opacity:0; text-align:left; transition:all .4s; }
#detail-tabs-content > div.active-content-tab { opacity:1; position:relative; z-index:100; }

#product-resources-list li { padding:7px 0 7px 22px; border-bottom:1px solid #444; }

#specs-table { border-collapse:collapse;  }
#specs-table tr { border-bottom:1px solid #000; }
#specs-table tr td:first-child { width:500px; text-align:left }
#specs-table tr td:last-child { padding-right:7px; text-align:left }

#specs-table td { padding:7px 0 7px 22px; }


#products-grid { display:grid; padding:20px; gap:10px; }
#products-grid .product-item { border:1px solid black; padding:15px; text-align:left; display:grid; grid-template-rows:1fr 80px; }
#products-grid .product-item h2 a, #products-grid .product-item h2, #products-grid .product-item h3 { color:#fb901b; font-size:34px; font-weight:bold; text-align:left; text-transform:uppercase; margin:0; line-height:1.1; }
#products-grid .product-item .product-catalog-spec { padding:8px 0; }
#products-grid .product-item .product-item-image { padding:40px; }
#products-grid .product-item .quote-button { margin-top:20px; text-align:center; }
#products-grid .product-item .quote-button a { background-color:#f8901b; color:#000; font-weight:bold; text-transform:uppercase; display:inline-block; padding:8px 20px; margin:0 auto; width:240px; }

#technical-catalog { display:grid; }
#technical-catalog > div { padding:30px; }
#technical-catalog > div:nth-child(odd) { background-color:#fee9d2; }
#technical-catalog > div > h2 { color:#fb901b; }

/* form button */
.form-button {
    display: flex;
}

.form-button input.wpcf7-form-control.has-spinner.wpcf7-submit {
    color: black;
    background-color: #fb901b;
    background-image: url(template/home-products-cta.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    width: 184px;
    height: 68px;
    text-align: left;
    padding-right: 40px;
    font-weight: bold;
    line-height: 1;
    align-items: center;
    padding-left: 7px;
    font-size: 22px;
	border: 0px;
}

.form-button input[type="reset"] {
    color: black;
    background-color: #fb901b;
    background-image: url(template/home-products-cta.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    width: 184px;
    height: 68px;
    text-align: left;
    padding-right: 40px;
    font-weight: bold;
    line-height: 1;
    align-items: center;
    padding-left: 7px;
    font-size: 22px;
	border: 0px;
}


#accessories-tab-grid { display:grid; row-gap:30px; column-gap:30px;  margin-top:30px; padding:0 30px; }
#accessories-tab-grid li { border:1px solid black; padding:30px; }
#accessories-tab-grid li h3 a { color:#f7941d; }
.accessory-list-thumbnail { text-align:center; }
#accessories-tab-grid li img { height:130px; width:auto; }
#accessories-tab-grid .quote-button { margin-top:20px; text-align:center; }
#accessories-tab-grid .quote-button a { background-color:#f8901b; color:#000; font-weight:bold; text-transform:uppercase; display:inline-block; padding:8px 20px; margin:0 auto; width:240px; }



@media screen and (min-width:460px) {
    #accessories-tab-grid { grid-template-columns:repeat(2,1fr); }
}


@media screen and (min-width:768px) {
    
    #header #branding img { width:100%; height:auto; }
    #products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .section-title { font-size:40px; }

    #inventory-detail-tabs { padding:80px; font-size:1em; }

    #accessories-tab-grid { grid-template-columns:repeat(3, 1fr); padding:0; }

}



@media screen and (max-width:990px) {
    #navigation .menu-item-has-children > a { display:flex; align-items:center; column-gap:7px; }
    #navigation .menu-item-has-children > a::after { content:' [+]'; font-size:13px; }
    #navigation .menu-item-has-children.submenu-parent-open > a::after { content:' [-]'; }
}


@media screen and (min-width:990px ) {

    #mobile-navigation-toggle { display:none; }

    #header { grid-template-columns:.5fr 1.5fr; }
    #hero { background-size:cover; text-align:left; padding:0 40px; }

    #navigation { display:grid; align-content:center; text-align:right;  margin-top:0; border-top:0; padding:0; }
    #menu-main-menu { justify-content:right; }
    #menu-main-menu { display:flex; }
    #navigation li { padding:0; } /* nullify the mobile version */
    #navigation #menu-main-menu li a { display:block; padding:4px 0; }
    #navigation #menu-main-menu > li { display:inline-block; position:relative; }
    #navigation #menu-main-menu > li > a { margin-left:30px; display:inline-block; padding:15px 0; }
    #navigation a { font-size:13px; }
    #navigation li > ul > li { display:block; }
    #navigation li > ul > li > a:hover { color:#fefefe; }
    #navigation #menu-main-menu > li > ul { display:none; position:absolute; top:50px; left:30px; border:2px solid #444; background-color:#fb901b; box-shadow:2px 3px 7px rgba(0,0,0,.6); text-align:left; white-space:nowrap; padding:12px 0; }
    #navigation #menu-main-menu > li:hover > ul { display:block; }
    #navigation #menu-main-menu > li li { list-style-type:none; list-style-position:inside; display:block; background-color:#fb901b; padding:0 14px; position:relative; z-index:10; }
    #navigation #menu-main-menu > li li > ul { position:absolute; left:100%; display:none; top:0; background-color:#fb901b; z-index:9; border:2px solid #444; }
    #navigation #menu-main-menu > li li:hover > ul { display:block; }

    #navigation #menu-main-menu > .menu-item-has-children > a { position:relative; padding-right:10px; }
    
    #navigation #menu-main-menu > .menu-item-has-children > a::after { content:''; display:table; position:absolute; right:-5px; top:50%; height:0; width:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid black;  }
    #navigation #menu-main-menu > .menu-item-has-children .menu-item-has-children > a 
        { position:relative; padding-right:30px; }
        #navigation #menu-main-menu > .menu-item-has-children .menu-item-has-children > a::after 
        { content:''; display:table; position:absolute; right:-5px; top:50%; height:0; width:0; border-left:5px solid black; border-top:5px solid transparent; border-bottom:5px solid transparent;  }
    #navigation ul.sub-menu { padding-left:0; }

    #blurb { padding:7em 3em; font-size:1.3em; text-align:left; }

    #footer { grid-template-columns:.32fr 1fr; }
    #footer-meta { text-align:left; padding:80px 60px; }
    #footer-navigation { text-align:right; padding:80px 80px 80px 0; }
    #footer > div { display:grid; grid-template-rows: 180px auto; }

    #strengths-list { margin:0 auto; max-width:990px; grid-template-columns:repeat(3,1fr); gap:140px; }
    #strengths-list h3 { font-size:20px; }

    #products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    #products-grid .product-item { padding:30px;  }

    #inventory-product-summary { grid-template-columns:1fr 1fr; }
    #summary-images-thumbnails { display:grid; grid-template-columns:repeat(3,1fr);  column-gap:10px; justify-items:center; }
    #summary-images-thumbnails > img { height:200px; width:200px; }

    #technical-catalog { grid-template-columns:repeat(5,minmax(0,1fr)); padding:40px; text-align:left; }
    #technical-catalog > div > h2 { height:40px; font-size:16px; }
    #technical-catalog h3 { margin-top:30px; font-size:14px; }
    #technical-catalog h3:first-of-type { margin-top:0; }
    #technical-catalog a { font-size:12px; }

    #product-set { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #000; border-bottom:1px solid #000; }
    #product-set > div { border-right:1px solid #444; position:relative; }
    #product-set > div:last-child { border-right:0; }
    #product-set > div > a {
        position: absolute;
        bottom: 30px;
        left: 0;
        display: flex;
        color: black;
        background-color: #fb901b;
        background-image:url('template/home-products-cta.png');
        background-size:contain;
        background-repeat:no-repeat;
        background-position:right center;
        width: 184px;
        height: 68px;
        text-align: left;
        padding-right: 40px;
        font-weight: bold;
        line-height: 1;
        align-items: center;
        padding-left: 7px;
        font-size: 22px;
    }

    #locations-map { padding:80px; }
    #locations-map-contact { display:none; }

}





@media screen and (min-width:1180px ) {

    #header { padding:7px 60px; }
    #header #branding { width:340px; }
    #navigation a { font-size:14px; }
    #hero { background-size:cover; text-align:left; padding-left:60px; }

}

@media screen and (min-width:1280px ) {
    #navigation a { font-size:16px; }
    #hero { height:745px; }
    #hero h2 { font-weight:900; font-size:90px; color:#fff; text-shadow:4px 7px 7px rgba(0,0,0,.45); }
    #products-grid { padding:60px; gap:60px; }
    #technical-catalog > div > h2 { height:70px; font-size:22px; }
    #technical-catalog h3 { font-size:20px; }
    #technical-catalog a { font-size:16px; }
}


@media screen and (min-width:1500px ) {
    #header #branding { width:440px; }
    #navigation a { font-size:18px; }
    #technical-catalog h3 { font-size:24px; }
    #technical-catalog a { font-size:18px; }
}


.clipwrap { display:none; }