/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 576px) {
    .btnMouse {
        width: 30px;
        margin-top: 25px;
    }

    .mikeLogo {
        width: 100%;
    }

    .DBox {
        text-align: center !important;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .mikeLogo {
        width: 100%;
    }

    .DBox {
        text-align: center !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .mikeLogo {
        width: 100%;
    }

    .DBox {
        text-align: center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .mikeLogo {
        width: 80%;
    }

    .DBox {
        text-align: left;
    }

    /*.DmContainer {
        width: 85%;
    }*/

    /*.sarine-Content {
        width: 60%;
    }*/
}

@media only screen and (max-width: 990px) {
    .mobile-wrapper {
        display: block;
    }

    .offcenter-position {
        display: none;
    }

    .mobileButton, .mobileButton img {
        height: 110px;
        width: 110px;
        position: fixed;
        top: 100px;
    }

        .mobileButton .mobile-menu-icon {
            right: 0;
        }

    .mobilemenu .dl-menu {
        background: #FFF;
        /* background: rgba(91, 232, 205, 0.9); */
        width: 100%;
        height: 100vh;
        position: fixed;
        right: 0;
        top: 0%;
        margin: 51px -40px 0;
        transition: all 0.5s ease 0s;
        z-index: 8;
        color: #000;
    }

    ul.dl-menu {
        list-style-type: none;
    }

        ul.dl-menu li {
            padding: 10px;
            border-bottom: 1px solid #CCC;
        }

    .mobilemenu .dl-menu a {
        text-decoration: none;
        color: #000;
    }

    .menu-container {
        position: fixed;
        top: 100px;
        height: 110px;
        text-align: initial;
        /*background: #f5f5f5;*/
    }

        .menu-container.menuFix-scroll {
            position: fixed;
            top: 0px;
            height: 110px;
            text-align: initial;
            background: #f5f5f5;
        }

    .logo {
        display: block;
        position: fixed;
        z-index: 1000;
        height: 100px;
        top: 100px;
    }

    .menuFix-scroll .logo {
        top: 0;
    }

    .menuFix-scroll .mobileButton, .menuFix-scroll .mobileButton img {
        top: 10px;
    }

    .mobilemenu.isopen .dl-menu {
        right: 0;
        opacity: 1;
        margin: 210px 0 0;
    }

    .menuFix-scroll .mobilemenu.isopen .dl-menu {
        margin: 110px 0 0;
    }


    ul.dl-menu {
        list-style-type: none;
    }

        ul.dl-menu li {
            padding: 10px;
            border-bottom: 1px solid #CCC;
        }

    .mobilemenu .dl-menu a {
        text-decoration: none;
        color: #000;
    }

    .mobilemenu ul li a {
        position: relative;
    }

        .mobilemenu ul li a, .mobilemenu ul li a:after, .mobilemenu ul li a:before {
            transition: all .5s;
        }

            .mobilemenu ul li a:hover {
                text-decoration: none;
            }

                .mobilemenu ul li a:hover:after {
                    width: 100%;
                }

            .mobilemenu ul li a:after {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                width: 0%;
                content: '.';
                color: transparent;
                background: #aaa;
                height: 1px;
            }
}

@media only screen and (max-width: 1680px) {
    .sarine-Content {
        width: 35%;
    }

    .SarineiFrame {
        min-height: 550px;
    }

    .PerformanceiFrame {
        height: 580px;
    }

    /*.DmContainer {
        width: 50%;
    }*/
}

@media only screen and (max-width: 1660px) {
    .sarine-Content {
        width: 38%;
    }

    .SarineiFrame {
        min-height: 550px;
    }

    .PerformanceiFrame {
        height: 580px;
    }

    .DmContainer {
        width: 42%;
    }

    /*.DmContainer {
        width: 50%;
    }*/
}

@media only screen and (max-width: 1600px) {
    .SarineiFrame {
        min-height: 550px;
    }

    /*.DmContainer {
        width: 50%;
    }*/
}

@media only screen and (max-width: 1440px) {
    .sarine-Content {
        width: 40%;
    }

    .SarineiFrame {
        min-height: 500px;
    }

    .performanceContent {
        width: 41%;
    }

    .PerformanceiFrame {
        height: 570px;
    }

    .DmContainer {
        width: 40%;
    }

    /*.DmContainer {
        width: 50%;
    }*/
}

@media only screen and (max-width: 1366px) {
    .SarineiFrame {
        min-height: 700px;
    }

    .sarine-Content {
        width: 50%;
        padding: 90px 85px;
        transform: scale(1.4);
        margin-top: 20%;
    }

    .performanceContent {
        width: 48%;
        transform: scale(1.4);
        margin: 20% auto;
    }

    .PerformanceiFrame {
        height: 470px;
    }

    .DmContainer {
        width: 35%;
    }

    /*.DmContainer {
        width: 50%;
    }*/
}

@media only screen and (min-width: 1200px) {
    .mikeLogo {
        width: 80%;
    }

    .DBox {
        text-align: left;
    }

    /*.DmContainer {
        width: 50%;
    }*/
}

@media only screen and (max-width: 1023px) {
    .sarine-Content {
        width: 60%;
    }

    .DmContainer {
        width: 70%;
    }

     .CmprContainer{
        width:100%;
    }

    /*.SarineiFrame {
        min-height: 200px;
    }*/
}




/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    /*.sarine-Content {
        background: none;
        width: 90%;
        background-color: #f9f9f9;
        padding: 55px 55px;
    }

    .title6 {
        margin-bottom: 15px;
    }

    #SarineProfile {
        margin-top: 15px;
    }*/
    .iPad-Desk-view {
        display: none;
    }

    .DmContainerSarine {
        width: 100%;
        transform: scale(1.7);
        /*background-color: #f9f9f9;*/
    }

    .DmContainerPerform {
        transform: scale(1.5);
    }

    .DmContainer, CmprContainer {
        width: 100%;
    }

    .SarineiFrame {
        /*min-height: 750px;*/
        min-height: 750px;
        /*transform: scale(1.7);*/
        /*width: 470px;*/
        margin-top: 20px;
    }

    .PerformanceiFrame {
        height: 600px;
    }

    .p-5 {
        padding: 7rem !important;
    }

    .iPad-header {
        /*position: absolute;
        top: 0;
        width: 100%;*/
        background-color: #f9f9f9;
        padding: 10px;
    }

    .iPad-Mobile-view {
        display: inline-flex;
    }

    .btnMouse {
        margin-top: 250px;
    }
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    /*.sarine-Content {
        background: none;
        width: 80%;
        background-color: #f9f9f9;
        padding: 55px 55px;
    }

    .title6 {
        margin-bottom: 15px;
    }

    #SarineProfile {
        margin-top: 15px;
    }*/

}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    /*.sarine-Content {
        background: none;
        width: 90%;
        background-color: #f9f9f9;
        padding: 55px 55px;
    }

    .title6 {
        margin-bottom: 15px;
    }

    #SarineProfile {
        margin-top: 15px;
    }*/
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    /*.sarine-Content {
        background: none;
        width: 90%;
        background-color: #f9f9f9;
        padding: 55px 55px;
    }

    .title6 {
        margin-bottom: 15px;
    }

    #SarineProfile {
        margin-top: 15px;
    }*/
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    /*.sarine-Content {
        background: none;
        width: 90%;
        background-color: #f9f9f9;
        padding: 55px 55px;
    }

    .title6 {
        margin-bottom: 15px;
    }

    #SarineProfile {
        margin-top: 15px;
    }*/
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .DmContainer {
        width: 85%;
    }

    .CmprContainer{
        width:100%;
    }
}