/* Custom Bootstrap CSS */
/* Add '-Custom' keyword after each starting word*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body{
    margin:0;
}
html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: border-box;
}

/* Container Blocks */
.container-custom {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.container-custom-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.container-full-custom-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0px;
    padding-left: 0px;
}

/* Row Block */
.row-custom {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
}

.row-full-custom {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* Column Blocks */
.col-custom {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Padding Classes */
.p-custom-0 { padding: 0; }
.p-custom-1 { padding: 0.25rem; }
.p-custom-2 { padding: 0.5rem; }
.p-custom-3 { padding: 1rem; }
.p-custom-4 { padding: 1.5rem; }
.p-custom-5 { padding: 3rem; }

/* Margin Classes */
.m-custom-0 { margin: 0; }
.m-custom-1 { margin: 0.25rem; }
.m-custom-2 { margin: 0.5rem; }
.m-custom-3 { margin: 1rem; }
.m-custom-4 { margin: 1.5rem; }
.m-custom-5 { margin: 3rem; }

/* Display Classes */
.d-none-custom { display: none !important; }

/* Customized Bootstrap Classes */
/* Spacing */
.mt-custom-1 { margin-top: 0.25rem; }
.mt-custom-2 { margin-top: 0.5rem; }
.mt-custom-3 { margin-top: 1rem; }
.mt-custom-4 { margin-top: 1.5rem; }
.mt-custom-5 { margin-top: 3rem; }

.mr-custom-1 { margin-right: 0.25rem; }
.mr-custom-2 { margin-right: 0.5rem; }
.mr-custom-3 { margin-right: 1rem; }
.mr-custom-4 { margin-right: 1.5rem; }
.mr-custom-5 { margin-right: 3rem; }

.mb-custom-1 { margin-bottom: 0.25rem; }
.mb-custom-2 { margin-bottom: 0.5rem; }
.mb-custom-3 { margin-bottom: 1rem; }
.mb-custom-4 { margin-bottom: 1.5rem; }
.mb-custom-5 { margin-bottom: 3rem; }

.ml-custom-1 { margin-left: 0.25rem; }
.ml-custom-2 { margin-left: 0.5rem; }
.ml-custom-3 { margin-left: 1rem; }
.ml-custom-4 { margin-left: 1.5rem; }
.ml-custom-5 { margin-left: 3rem; }

/* Padding */
.pt-custom-1 { padding-top: 0.25rem; }
.pt-custom-2 { padding-top: 0.5rem; }
.pt-custom-3 { padding-top: 1rem; }
.pt-custom-4 { padding-top: 1.5rem; }
.pt-custom-5 { padding-top: 3rem; }

.pr-custom-1 { padding-right: 0.25rem; }
.pr-custom-2 { padding-right: 0.5rem; }
.pr-custom-3 { padding-right: 1rem; }
.pr-custom-4 { padding-right: 1.5rem; }
.pr-custom-5 { padding-right: 3rem; }

.pb-custom-1 { padding-bottom: 0.25rem; }
.pb-custom-2 { padding-bottom: 0.5rem; }
.pb-custom-3 { padding-bottom: 1rem; }
.pb-custom-4 { padding-bottom: 1.5rem; }
.pb-custom-5 { padding-bottom: 3rem; }

.pl-custom-1 { padding-left: 0.25rem; }
.pl-custom-2 { padding-left: 0.5rem; }
.pl-custom-3 { padding-left: 1rem; }
.pl-custom-4 { padding-left: 1.5rem; }
.pl-custom-5 { padding-left: 3rem; }


/* Display Classes */
.d-custom-block { display: block !important; }
.d-custom-inline { display: inline !important; }
.d-custom-inline-block { display: inline-block !important; }
.d-custom-flex { display: flex !important; }
.d-custom-table { display: table !important; }
.d-custom-table-row { display: table-row !important; }
.d-custom-table-cell { display: table-cell !important; }

/* Text Alignment */
.text-custom-left { text-align: left; }
.text-custom-center { text-align: center; }
.text-custom-right { text-align: right; }
.text-custom-justify { text-align: justify; }

/* Text Color */
.text-custom-primary { color: #00839A; }
.text-custom-secondary { color: #6c757d; }
.text-custom-success { color: #28a745; }
.text-custom-danger { color: #dc3545; }
.text-custom-warning { color: #ffc107; }
.text-custom-info { color: #17a2b8; }
.text-custom-light { color: #f8f9fa; }
.text-custom-dark { color: #343a40; }

/* Background Color */
.bg-custom-primary { background-color: #00839A; }
.bg-custom-secondary { background-color: #6c757d; }
.bg-custom-success { background-color: #28a745; }
.bg-custom-danger { background-color: #dc3545; }
.bg-custom-warning { background-color: #ffc107; }
.bg-custom-info { background-color: #17a2b8; }
.bg-custom-light { background-color: #f8f9fa; }
.bg-custom-dark { background-color: #343a40; }

/* Custom Classes for Hiding Elements on Specific Devices */
/* Hide on Tablet & Phone*/
@media (max-width: 991.98px) {
    .hide-on-tablet {
        display: none !important;
    }
    .footer-makita-container{
        flex:none!important;
    }
    .footer-makita-container{
        margin:10px 15px!important;
        flex:none!important;
        width: 90%;
        margin: auto;
    }
    
    
}

/* Hide on Phone */
@media (max-width: 575.98px) {
    .hide-on-phone {
        display: none !important;
    }
    .makita-foo-btn-container {
        flex-direction: column!important;
        gap: 10px!important;
        text-align: center!important;
    }
}


/* Hide on Phone */
@media (max-width: 760.98px) {
    .logo-makita-cont{
        text-align: center!important;
        width: 100%;
    }
    .row-logo-makita{
        gap: 10px;
        width: 100%;
    }
    .border-only-btn{
        justify-self: center;
        display: block;
    }
}


/* Hide on Desktop */
@media (min-width: 992px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Responsive Classes */
@media (min-width: 576px) {
    .col-custom {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Small devices (576px and up) */
    .col-custom-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-custom-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-custom-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-custom-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-custom-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-custom-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-custom-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-custom-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-custom-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-custom-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-custom-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-custom-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Extra small devices (less than 576px) */
@media (max-width: 575.98px) {
    .col-custom-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-custom-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-custom-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .col-custom-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-custom-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-custom-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .col-custom-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-custom-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-custom-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .col-custom-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-custom-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-custom-xs-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
    /* Medium devices (768px and up) */
    .col-custom-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-custom-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-custom-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-custom-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-custom-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-custom-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-custom-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-custom-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-custom-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-custom-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-custom-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-custom-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    /* Large devices (992px and up) */
    .col-custom-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-custom-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-custom-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-custom-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-custom-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-custom-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-custom-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-custom-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-custom-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-custom-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-custom-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-custom-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
    /* Extra large devices (1200px and up) */
    .col-custom-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-custom-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-custom-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-custom-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-custom-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-custom-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-custom-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-custom-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-custom-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-custom-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-custom-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-custom-xl-12 { flex: 0 0 100%; max-width: 100%; }
}



/*** EXTRA CSS FOR THE TEMPLATE ****/
h4.cordless-expert{
    color: white;
    font-family: 'Open Sans';
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    margin: auto;
}
.hero-bg {
    background-color: #00839A;
}

a.promo-makita-link {
    color: black !important;
    font-family: Arial;
    font-size: 18px;
    font-weight: 700;
    text-underline-offset: 5px;
    padding-bottom: 10px;
    padding-top:10px;
    display: block;
}

.border-only-btn {
    color: white !important;
    text-decoration: none;
    font-family: Arial;
    border: 1px solid white !important;
    padding: 10px 15px 10px 15px;
}

.secondary-hero {
    background-color: black;
}

body {
    overflow-x: hidden;
}

.inno-sect-gray {
    background: #2a2d2f;
}

.inno-sect {
    width: auto;
    padding: 3em 0em;
    box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;
    text-align: center;
}

.inno-sect-teal {
    background: #00839A;
}

.inno-sect-black {
    background: black;
}

h4.battery-number {
    text-align: center;
    font-size: 24px;
    color: white;
    font-family: Arial;
    padding: 10px 5px;
}

a.img-fit-width-battery.battery-all {
    margin-bottom: -6em;
}

a.img-fit-width-battery>img {
    max-width: 300px;
    margin: auto;
    width: 100%;
}

a.img-fit-width-battery.battery-all>img {
    transition: transform 1s;
}

a.img-fit-width-battery.battery-all>img:hover {
    transform: scale(1.1);
}

.battery_font {
    color: black;
    text-align: center;
}

h1.battery_font,
h1.prodject_font {
    font-size: calc((24px) + (42 - 24) * (100vw - (375px)) / (1920 - 375));
    font-family: Arial;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4em;
}

h1.prodject_font {
    color: white;
    text-align: center;
}

p.battery_font {
    font-size: calc((16px) + (20 - 16) * (100vw - (375px)) / (1920 - 375));
    font-family: Arial;
    margin: 0;
}

.img-fit-width-battery {
    text-align: center;
}

.battery-safety-container>.inno-sect {
    display: flex;
    flex-direction: column;
}

h4.battery-number {
    margin: 0;
    font-weight: 900;
}

.battery-safety-container {
    margin-left: 15px;
    margin-right: 15px;
}

.battery-bg {
    background-image: url('../images/battery-platforms.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

a.img-fit-width>img {
    max-width: 226px;
}

div.tile {
    text-align: center;
}

a,
p {
    margin: 0;
}

.tile-text {
    color: #00839A;
    font-family: Arial;
    font-size: 18px;
    text-decoration-color: #00839A;
}

a:visited {
    color: #00839A;
    text-decoration-color: #00839A;
}

.promo-makita-tile {
    text-align: center;
    padding: 0px 15px;
}

.promo-makita-img {
    max-width: 100%;
}

.promo-makita-text {
    font-family: Arial;
    font-size: 18px;
    color: black;
    text-decoration: none;
    padding: 10px 5px;
    margin-bottom: 10px;
    ;
}

.promo-makita-text:visited {
    text-decoration: none;
}

.promo-makita-link-block {
    text-decoration: none;
}

.promo-makita-link {
    color: black;
}

a.promo-makita-link:visited {
    color: black;
    text-decoration-color: black;
}

.bg-teal {
    background-color: #00839A;
}

.project-makita-text {
    color: white;
    font-family: Arial;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    text-underline-offset: 5px;
    padding-top: 10px;
    text-decoration: underline;
}

.project-makita-img {
    width: 100%;
}

.project-makita-tile {
    text-align: center;
    padding: 15px 15px;            
}

.new-product-makita-tile {
    text-align: center;
}

.makita-logo {
    max-width: 200px;
}

h1.footer-makita-font {
    color: white;
    font-family: 'Arial';
    font-size: calc((22px) + (28 - 22) * (100vw - (375px)) / (1920 - 375));
    font-weight: 800;
    margin-top: 0em;
    line-height: 1.4em;
}

.footer-sub-makita-text {
    color: white;
    margin: 0;
    font-family: 'Arial';
    font-size: calc((14px) + (18 - 14) * (100vw - (375px)) / (1920 - 375));
}

.footer-sub-makita-text2 {
    font-size: 14px;
    color: white;
    margin: 0;
    font-family: 'Arial';
}

.footer-makita-container-main {
    align-items: stretch;
}
.footer-makita-tile > img{
    width: 85px;
    padding-bottom: 5px;
}
.footer-makita-container {
    margin: 0px 15px;
    display: flex;
    flex: 1;
    background: #00839A;
    height: inherit;
    padding: 20px 30px;
    flex-grow: 1;
    border: 1px solid white;
}
.footer-makita-tile{
    margin: auto;
}
.footer-sub-makita-text > span,.footer-sub-makita-text2 > span {
    display: block;
    font-size: 12px;
    padding-top: 15px;
}
a.makita-foo-btn-website {
    background: black;
    color: white;
    font-family: 'Arial';
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
}
.makita-foo-btn-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-top: 20px;
}
.makita-foo-btn-contact{
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0)!important;
    font-family: 'Arial';
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
}
.whats-new-makita-banner{
    min-height: 40vh;
    width: 100%;
    object-fit: cover;
}
.logo-makita-cont{
    align-content: center;
    text-align: left;
}
.shop-all-link-mkt{
    align-content: center;
    text-align: right;
}
a {
    text-decoration-color: #00839a;
}