
:root {
	--red: #ff0303;
	--gray: #909090;
	--jb-red: #E30613;
	--jb-black: #000000;
	--jb-dark-gray: #7C7C7B;
	--jb-light-gray: #C6C6C6;
	--jb-dark-blue: #424E5C;
	--jb-font-head:'Tungsten-Semibold','san-serif';
	--jb-font-heavy:'TungstenL','san-serif';
}

.oem-page{
    overflow: clip;
    max-width: 1920px;
}

@media screen and (min-width: 1920px) {
    .oem-page{
        justify-self: center;
    }
}

.oem-page > .page{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(3, auto);
}

.oem-page #hero-section{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 8.3% 83.4% 8.3%;
    grid-template-rows: 0.5fr auto 0.5fr;
}

.oem-page #hero-section .hero-wrap{
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    display: flex;
    justify-content: flex-end;
}

.oem-page #hero-section .hero-wrap img{
    flex: 1;
    max-width: unset;
    width: auto;
    height: 68vw;
    margin-right: -7.4vw;
}
@media screen and (min-width: 768px) {
    .oem-page #hero-section .hero-wrap img{
        width:100%;
        height: auto;
        margin:0;
    }
}

.oem-page #hero-section .post-title{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.oem-page #hero-section .entry-title{
    display: flex;
    flex-flow: row wrap;
    color: #ffffff;
    margin:0;
    padding:0.25rem 1rem;
    font-family: TungstenL, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    background: RGBA(0, 0, 0, 0);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.55) 100%)
}

@media screen and (min-width: 1000px) {
    .oem-page #hero-section .entry-title{
        background: transparent;
    }
}

.oem-page #hero-section .entry-title .title-first-word{
    flex: 1 0 100%;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
}
@media screen and (min-width: 1000px) {
    .oem-page #hero-section .entry-title .title-first-word{
        font-size:40px;
    }
}

.oem-page #hero-section .entry-title .remaining-words{
    flex:0 1 auto;
    font-size: 28px;
    border-top: 1px solid white;
}
@media screen and (min-width: 1000px) {
    .oem-page #hero-section .entry-title .remaining-words{
        font-size:36px;
    }
}

.oem-page #page-copy{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: 8.3% 83.4% 8.3%;
    grid-row: auto;
    background-color: #f2f2f2;
}
@media screen and (min-width: 768px) {
    .oem-page #page-copy{
        grid-template-columns: 16.6% 66.8% 16.6%;
    }
}

.oem-page #page-copy .copy-wrap{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding:30px 0 10px;
}
@media screen and (min-width: 768px) {
    .oem-page #page-copy .copy-wrap{
        padding: 50px 0 30px;
    }
}

.oem-page #page-copy .copy-wrap h2{
    font-family: TungstenL, sans-serif;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
}
@media screen and (min-width: 1000px) {
    .oem-page #page-copy .copy-wrap h2{
        font-size: 46px;
    }
}

.oem-page #page-copy .copy-wrap p{
    font-size: 16px;
    line-height: 1.8;
    margin-top: 20px;
}

.oem-page #oem-output{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 8.3% 83.4% 8.3%;
    grid-row: auto;
    background-color: var(--gray);
    padding:8.3vw 0;
}
@media screen and (min-width: 768px) {
    .oem-page #oem-output{
        padding:50px 0;
    }
}

.oem-page #oem-output ul{
    list-style: none;
    margin: 0;
    padding:0;
}

.oem-page #oem-output .oem-list{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
@media screen and (min-width: 768px) {
    .oem-page #oem-output .oem-list{
        display: flex;
        flex-flow: row wrap;
        gap:2rem;
    }
}

.oem-page #oem-output .oem-item{
    background-color: #515151;
    padding:15px 20px;
    margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
    .oem-page #oem-output .oem-item{
        flex: 0 1 calc(50% - 1rem);
        margin:0
    }
}

@media screen and (min-width: 1260px) {
    .oem-page #oem-output .oem-item{
        flex: 0 1 calc((100% - 4rem) / 3);
    }
}

.oem-page #oem-output .oem-item h3{
    font-family: "TungstenL", Sans-serif;
    font-size: 45px;
    font-weight: 600;
    text-transform: uppercase;
    color:#ffffff;
}

.oem-page #oem-output .category-item{
    margin-bottom: 1.5rem;
}

.oem-page #oem-output .oem-item h4{
    font-family: "Roboto", Sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color:#ffffff;
    margin:0;
    padding:0.5rem 0;
    cursor: pointer;
}
.oem-page #oem-output .oem-item h4:hover{
    color: var(--jb-red);
}

.oem-page #oem-output .oem-item .collapsed h4:before{
    content:"+";
    padding-right: 1rem;
    font-size: 20px;
    font-weight: 600;
}
.oem-page #oem-output .oem-item .expanded h4{
    color:var(--jb-red);
}

.oem-page #oem-output .oem-item .expanded h4:before{
    content:"-";
    padding-right: 1rem;
    font-size: 20px;
    font-weight: 600;
}

.oem-page #oem-output .products-list{
    padding:10px 30px;
}

.oem-page #oem-output .oem-item p{
    font-family: "Roboto", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color:#ffffff;
    margin:0
}

.oem-page .elementor-container{
    display: none !important;
}