/* 
Responsive CSS for ONTRAX 22 
by SUPERREBEL DIGITAL
*/
@media only screen and (orientation: landscape) {
    #headerVid {
        aspect-ratio: auto;
    }
}
@media only screen and (max-width:1200px) {
    #ontraxExample {
        margin: auto;
        width: 100%;
    }
}
@media only screen and (min-width:992px) {
    .content p {
        margin-bottom: 20px;
    }
    .content h2 {
        margin-bottom: 2.4rem;
        margin-top: 4rem;
    }
    .content h3 {
        margin-top: 10px;
    }
    .wp-block-pb-accordion-item h2 {
        margin: 0;
    }
}
@media only screen and (max-width:992px) {
    #logo > svg {
        max-width: calc(100% - 60px);
    }
    #homeHeader {
        overflow: hidden;
    }
    #headerVid,
    #headerVid > video {
        width: auto;
        height: 100vh;
    }
    #langSwitch {
        width: 240px;
    }
    #navHeader a {
        margin-left: 10px;
    }
    #navToggle {
        left: -50px;
        width: 50px;
    }
    #topNavs.toggled > #navToggle {
        left: -75px;
    }
    .bar {
        margin-left: 0;
    }
    .headerNav > ul {
        height: auto;
    }
    #topNavs {            
        width: 80vw;
        background-color: #fff;
        color: #000;
        right: -80vw;
        position: absolute;
        height: 100vh;
        top: 0;
        z-index: 100;
        padding-top: 3rem;
        padding-bottom: 6rem;
        margin: 0;
        flex-direction: column;
        justify-content: space-between;
        transition: .35s;
    }
    #topNavs.toggled {
        right: 0vw;
    }
    .headerNav a {
        color: #000;
    }
    #headerVidContent {
        top: auto;
        bottom: 0;
        aspect-ratio: auto;
        height: calc(100vh - 60px);
    }
    .wpml-ls-current-language::before {
        content: '';
        width: 20%;
        height: calc(100% + 23px);
        display: block;
        position: absolute;
    }
}
@media only screen and (min-width:576px) {
    .productShortcode {
        min-width: 200px;
    }
}
@media only screen and (max-width:576px) {
    h1 {
        font-size: 12vw;
        line-height: 12vw;
        z-index: 10;
        position: relative;
    }
    h2 {
        font-size: 8vw;
        line-height: 8vw;
    }
    #logo {
        max-width: calc(100% - 80px);
    }
    #headerVidContent h1 {
        font-size: 20vw;
        line-height: 20vw;
    }
    .headerNav li {
        width: 100%;
    }
    .serviceList > li:after {
        content: '';
    }
    .productList li > a, 
    .productShortcode > a,
    .productList li > div,
    .impressionList li > div,
    .serviceCard,
    .serviceList > li > a {
        clip-path: polygon( 0 20px, 20px 0, 100% 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 100%);
    }
    .serviceList > li > a
    .serviceList > li:hover,
    .serviceList > li > a:hover {
        clip-path: none;
    }
    .serviceCard {
        height: auto;
    }
    .edgeWhiteAfterBR:after {
        content: inherit;
    }
    .contentHeader h1 {
        margin-bottom: calc(2rem + 50px);
        margin-left: 2rem;
    }
    .content img {
        clip-path: polygon(
            0 0,
            calc(100% - 20px) 0,
            100% 20px,
            100% 100%,
            20px 100%,
            0 calc(100% - 20px));
        max-width: 100%;
        height: auto;
    }
    .serviceImg {
        min-height: 8rem;
    }
    .serviceContent {
        padding: 20px;
    }
    .serviceRow .serviceImg {
        height: 30vh;
    }
}
@media only screen and (max-width:768px) {

    /* Fix */
    #homeImg {
        bottom: 40vh;
        max-width: 30vh;
    }
    .btn {
        max-height: 20vh;
    }
    #products > div {
        margin-top: 0;
    }
    #productList li {
        margin-top: 0;
        margin-bottom: 20px;
    }
    #productlist img {
        max-height: 200px;
    }
    #ontraxExample {
        margin: 0;
        width: 100%;
    }
    .footerRef {
        height: 80px;
    }
}