/*general*/ 
html, body {margin:0; padding:0; position: relative; font-family: sans-serif;}
body {width: 100%; background: linear-gradient(180deg, rgba(16,34,70,1) 17%, rgba(15,33,69,1) 28%, rgba(15,31,65,1) 39%, rgba(7,15,34,1) 46%);}
html{min-height: 100%;}
img {vertical-align: bottom; max-width: 100%;}
p{margin-bottom: -5px; color:rgb(0, 0, 0);}
button:hover{cursor: pointer;}
.list li{color:#171b35;margin-left: 23px;font-weight: bold;}
.list{padding-inline-start: 0px;}


/* Defaults */
.pxSize13{font-size: 13.5px;}
.underline{text-decoration: underline;}


/* Display None: on load */
#mobilePurchaseBtn, #mobileLearnBtn, #mobilePriceBtn_right, #mobilePriceBtn_left, #left_mainLogo, #right_main2,#mTest,#banner,#navBannerDiv{
    display: none !important;
}
.pm_logo_top, .hiddenList, .hiddenMobileImg, .pm-mobile{
    display: none;
}


/* -- IMAGES -- */
.mainPic1, .mainPic2, .mainPic3{margin-top:0px !important;}
.mainPic1{position: relative;}
.mainPic3{margin-top:-6px !important;}
#pm-mobile{position: absolute;right: 0;bottom: 0;width: 137px;padding:10px;}
#onlineLogo{width:68%;margin: 25px auto 0px;}
#productLogoContainer{height:75px;}
#pmProductLogo1{display:block; margin:0 auto; padding: 16px 0px; width: 205px;}
#pmProductLogo2{display:block; margin:0 auto; padding: 18.5px 0px 0px 0px; width: 236px;}
#pmProductLogo3{display:block; margin:0 auto; padding: 30px 0px 0px 0px; width: 200px;}
#osimPhotos{width:150px; display:block; margin: 0 auto; padding:15px 0px;}
#arrow2{width: 7px;vertical-align: 1px;margin-left: 5px;}
#arrow{width: 7px;vertical-align: 1px;margin-left: 5px;}
#mobileBrands{display: none;}
#exampleLogoSet{width: 160px;margin: 0 auto;display: block;}
.productLogoContainer3{background-color: #0d7dbc;}
.productLogoContainer2{background-color: #075b8a;}
.productLogoContainer1{background-color: #e6eaf5;}
.hiddenLogo{display:none !important;}


/* -- GRIDS --*/
.grid_container{
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "a b ."
      "c c c";
}
#left_main{
    grid-area: a;
    background-size: cover;
    position: relative;
}
#right_main{
    background-size: cover;
    grid-area: b;
}
#CTAcontainer{
    left: 0;
    top: 630px;
}


/* -- BUTTONS -- */
.mainBtnTitle{margin: 0px;color: white;font-weight: bold;font-size:initial !important;}
#buttonSection{
    display: flex;
    justify-content: center;
    margin-top: 45px;
    min-width: 50vw;
    max-width: 100vw;
    margin-top: 0px;
}
#buttonSection1,#buttonSection2,#buttonSection3{
    display: inline-block;
    margin-right: 15px;
    width: 280px;
    height: 512px;
    background-color: #fff;
    max-width: 50%;
    min-width: 150px;
    position: relative;
}
#actionButton{
    color: #fff;
    border: none !important;
    width: 78%;
    height: 55px;
    padding: 0px;
    margin: 0px auto;
    display: block;
    position: absolute;
    bottom: 15px;
    grid-area: c;
    left: 0;
    right: 0;
}
#pdfBtn{
    width: 525px;
    height: 45px;
    padding-right: 25px;
    background-color: #1473a9;
    color: #fff;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    line-height: 45px;
    letter-spacing: 1px;
}
#demoSpan{
    display: block;
    text-align: center;
    color: #ffff;
    font-weight:bold;
    line-height: 25px;
    margin-top: 0px;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
#demoBttn{
    color: white;
    background-color: red;
    display: inline-block;
    width: 60px;
    height: 22px;
    text-align: center;
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
    line-height: 22px;
    vertical-align: 8px;
}
#learnMoreBttn{
    background-color: red;
    width: 143px;
    color: white;
    margin: 0 auto;
    border-radius: 9px;
    height: 26px;
    line-height: 26px;
    font-size: 11px;
}
#learnMoreBttn:hover{box-shadow: 0px 0px 16px 1px #48484826}
#demoBttn:hover{cursor: pointer;}
#demoSpan:hover{cursor: pointer;}
.demoSpan1, .actionBttn1{background-color: #0C7BC0;}
.demoSpan2, .learnButton{background-color: #075b8a;}
.demoSpan3, .actionBttn3{background-color: #0C7BC0;}
.dropDownStyle{bottom: -85px !important;}
.dropDownMargin4{margin-top: 110px !important;}
.dropDownMargin5{margin-top: 110px !important;}

/* -- TEXT -- */
#blackBannerText{
    background-color: #000;
    color: #fff;
    text-align: center;
    display: block;
    font-size: 8.9px;
    height: 18px;
    font-weight: bold;
    line-height: 18px;
    margin-bottom:10px;
}
#diyPoint{
    color: white;
    width: 50%;
    display: inline-block;
    font-size: 10.5px !important;
    padding: 5px 0px;
    margin-left: 40px;
}
#learnMoreText{
    color: white;
    text-align: center;
    display: block;
    font-size: 10.5px;
    font-weight: bold;
    display: none;
}
#exampleText{
    color: #ffffff;
    font-size: 13px;
    display: block;
    text-align: left;
    padding-left: 5px;
    padding-bottom: 2px;
}
#blueBrandsText{color: #23b0e6; font-size: 19px;}
#launchingTxt{color: #23b0e6;}
#point{padding: 3px 0px; font-size: 100%;}
.point{color: #171b35 !important;margin-left: 35px !important;display: list-item !important;}
#headerText {color: #FFF;text-align: center;font-size: 1.35vw;letter-spacing: 1px;margin-bottom: 7px}
.headerText {color: #FFF;text-align: center;font-size: 1.35vw;letter-spacing: 1px;margin-bottom: 7px}
#headerText3 {color: #FFF;text-align: center;font-size: 1.22vw;letter-spacing: 1px;max-width: fit-content; margin: 0 auto; margin-bottom: 30px; margin-top: 15px;}
#prices{text-align: center;font-weight: bold;margin-bottom: 0px !important;}
.prices1{color: #0C7BC0;}
.prices2{color: #0C7BC0;}
.prices3{color: #0C7BC0;}


/* OTHER */
footer{background-color: #f5f2ef;}
#bottom_main{grid-area: c;}
#bodyWrapper{margin: 0 auto;max-width: 1860px;}
#blueBackground2, #blueBackground{display:none; height:322px !important; padding: 0px 0px 10px 0px !important;}
#brandsSection{text-align:center; margin:25px 0 30px 0;}
#seoTxt{background-color: #dfdede; padding: 30px; max-width: 1015px; display: block; margin: 25px auto; font-size: 15px; color:#000;}
#trustedText{background-color: #272c49; color:#fff; font-size:17px; height:45px; line-height:45px; letter-spacing: 1.5px;     font-weight: 600;}
#launching{font-size: 9px;color: white;float: right;margin-left: 10px;line-height: 7px;margin-top: 12px;text-align: center;position: absolute;}
.diyList{margin-top: 0px;padding-top: 0px;padding-inline-start: 0px;height: 100%;}
.demoDropDown1{background-color: #2ca5f1;}
.demoDropDown2{background-color: #075b8a;}


 
/*-- RESPONSIVE --*/
@media(max-height:800px) {
    #covidDiv{margin-top: 7%;}
}

@media(max-width:1370px){
    .grid_container {
        grid-template-columns: 35% 65%;
    }
    #pdfBtn{width: 95%;}
    #pmProductLogo1{width: 175px;}
    .productLogoTxt5{font-size: 9px;}
}

@media(max-width:1140px){
    .productLogoTxt5{font-size: 9.5px !important;}
    #pmProductLogo1{width: 160px;}
}

@media (max-width:1100px){
    body{min-height: 1500px;}

    /* --GRIDS-- */
    .grid_container {
        grid-template-columns: 100% 100%;
        grid-template-areas:
            "a"
            "b"
            "c";
    }

    /* --IMAGES-- */
    .hiddenLogo{display:block !important;}
    .showLogo{display:none !important;}
    #headerText3{display: none !important;}
    #pmProductLogo1{width: 205px;}
    #onlineLogo{
        top: 5px !important;
        left: 7.5%;
        position: absolute;
        width: 85% !important;
        margin-top: 30px !important;
        margin-left: 0px !important;
    }

    /* --TEXT-- */
    #headerText {font-size: 2.4vw;}
    #headerText2 {font-size: 2.65vw;}
    #seoTxt{margin: 25px 25px; font-size: 100%;}
    .headerText {font-size: 2.4vw;}
    .productLogoTxt5{font-size: 11px !important;}

    /* --BUTTONS-- */
    #buttonSection{
        position: absolute;
        bottom: unset;
        top: 320px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        margin-top: 10px;
    }
    #actionButton{bottom: 20px;}
    #buttonSection3{margin-right: 0px;}
    #pdfBtn{text-align: center; padding: 0px;}
    .btnTitle{padding-top: 10px;}
    .dropDownMargin4, .dropDownMargin5{margin-top: 50px !important; bottom: -100px !important;}

    /* --OTHER-- */
    #left_main{background-position: center;}
    #right_main{height: 650px; min-height: 525px; position: relative;}
    #brandsSection{margin:50px 0 30px 0;}
    #CTAcontainer{
        margin-top: 0px !important;
        grid-template-columns: auto;
        display: block;
        text-align: center;
        top:unset;
        left: unset;
        position: relative;
    }
    #CTAcontainer * {
        display: inline-block;
        margin: 0 auto;
    }
    #pdfBtn {
        width: 525px;
    }
    #videoWrapper {
        margin-top: 25% !important;
        max-width: 625px;
        padding: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 875px) {
    body {background: linear-gradient(180deg, rgba(16,34,70,1) 17%, rgba(15,33,69,1) 28%, rgba(15,31,65,1) 39%, rgba(7,15,34,1) 46%);}

    /* --IMAGES-- */
    #mobileBrands{display: block;}
    #desktopBrands{display: none;}
    #onlineLogo{top: 0px !important;}
    #banner{display: block !important;margin: 0 auto;width: 85%;}
    #pmProductLogo1{width: 235px; padding: 19px;}
    #pmProductLogo2{width: 250px; padding: 18px;}
    #pmProductLogo3{width: 240px; padding: 26px 0px 0px 0px;}

    /* --TEXT-- */
    #trustedText{font-size:11px;}
    #exampleText{padding-left: 0px;}

    /* --BUTTONS-- */
    #buttonSection {
        display: block;
        position: relative;
        margin-right: 0px;
        margin-top: 55px;
        transform: unset;
        top: unset;
        left: unset;
    }
    #buttonSection1, #buttonSection2, #buttonSection3{
        display: block;
        margin-right: 0px;
        max-width: unset;
        min-width: 280px;
        height: 520px;
        margin: 0 auto;
    }
    #buttonSection2, #buttonSection3{margin-top: 50px ;}
    #buttonSection1 {margin-top: 10px;}
    .dropDownStyle, .learnButton{margin-top:10px !important;}
    .dropDownStyle {bottom: -85px !important;}
    .dropDownMargin1{margin-top: 130px !important;}
    .dropDownMargin2{margin-top: 140px !important;}
    .dropDownMargin3{min-height: 525px !important;}
    .dropDownMargin4, .dropDownMargin5{bottom: 10px !important;}

    /* --OTHER-- */
    #bodyWrapper{position: relative;}
    #CTAcontainer {margin-top: 50px !important;}
    #brandsSection{bottom:0; width: 100%;}  
    #right_main{min-height: unset; height: auto;} 
    #productLogoContainer{height: 72.5px;}
}

@media (max-width:767px){
    .navbar-fixed-top .navbar-collapse{
        width: 100vw !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        background: #e9e9e9 !important;
    }
}

@media(max-width:550px){
    #CTAcontainer{margin-top:50px;}
    #bodyWrapper{min-height: unset;}
    #pdfBtn{bottom:-100px; width: 95vw; font-size: 15px;}
    #pdfBtn img{width: 25px !important;}
    #trustedText{font-size:1.2vw;}
    #blueBrandsText{font-size:1.5vw;}
    #onlineLogo{margin-top: 0px !important; top: 15px !important;}
    .solidBorder{border: solid 1px #fff !important; padding-bottom: 0px !important;}
  }

@media (max-width:430px){  
    #trustedText , #blueBrandsText{font-size:5px;} 
    #left_main{background-size: auto 80% !important;}
    #btnTitle{margin-top: -60px !important;}
    #banner{width: 100%;}
    #headerText2{font-size: 2.3vw;}
}


@media (min-width:2050px) {
    #onlineLogo{margin-left: 0px !important;}
    #buttonSection{justify-content: center;min-width: auto;max-width: inherit;}
    #headerText {font-size: 35px; white-space: nowrap;}
    .headerText {font-size: 35px; white-space: nowrap;}
    #headerText3 {font-size: 30px; white-space: nowrap;}
}