/*general*/ 
html, body {margin:0; padding:0; position: relative; font-family: sans-serif; background-color: #c2e9fb;}
body {width: 100%; background: rgb(11,33,70);background: linear-gradient(180deg, rgba(11,33,70,1) 0%, rgba(17,40,76,1) 9%, rgba(130,163,188,1) 37%, rgba(194,233,251,1) 44%)}
img {vertical-align: bottom; max-width: 100%;}
p{margin-bottom: -5px; color:#ffff;}
button:hover{cursor: pointer;}
.pxSize13{font-size: 13.5px;}
.underline{text-decoration: underline;}



/* Images */
#pm-mobile{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 137px;
    padding:10px;
}
#onlineLogo{
    width:75%;
    margin-top: 50px;
    margin-bottom: 25px;
    margin-left: -3px;
}


/* Top to bottom */
#bodyWrapper{margin: 0 auto;max-width: 1860px;}
#listItem{color: #091d3e; white-space: nowrap;font-size: 15px;}
#listLeft{float: left;display: inline-block;}
#listRight{display: inline-block;margin-left: 180px;}

.grid_container{
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-areas: 
    "a b";
}

#left_main{grid-area: a;background-size: cover;}
#right_main{background-size: cover;height: 100vh;grid-area: b;}
#detailsContainer{padding: 8px 0px 20px 15px;display: inline-block;}
.detailHeader{
    white-space: nowrap;
    font-size: 22.5px;
    margin-left: -13px;
    font-weight: 200;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#buttonSection{display: flex;justify-content: center;margin-top: 25px;}
#buttonSection1,#buttonSection2,#buttonSection3{
    display: inline-block;
    margin-right: 15px;
    width: 295px;
    height: 149px;
    background: linear-gradient(180deg, rgba(255,255,255,1) 3%, rgba(193,232,250,0) 71%);
}
#actionButton{
    background-color: #091d3e;
    color: #fff;
    border: none !important;
    width: 89.5%;
    height: 55px;
    padding: 0px;
    margin: 20px auto;
    display: block;
    grid-area: c;
    left: 30px;
}
.btnTitle{
    font-size: 16px;
    color: #091d3e;
    font-weight: bold;
    width: auto;
    text-align: center;
}
#CTAcontainer{
    margin-top: 60px;
    display: grid;
    padding: 0px 50px;
    gap: 20px;
    align-items: center;
    justify-items: center;
    grid-template-columns: 100%;
    grid-template-areas: 
    "a";
}
#CTAcontainer *{
    padding: 0px;
    width: 300px;
    height: 60px;
    font-weight: bold;
    font-size: 18.5px;
    background-color: #091d3e;
    color: white;
    border: none;
}
.projBttnTitle{
    margin: 0px;
    color: white;
    font-weight: bold;
    font-size: 16px;
}



/*-- Responsive --*/

@media (max-width:1570px){
   #listLeft{float: none;}
   #listRight{margin-left: 100px;}
}
@media (max-width:1440px){
    #listRight{margin-left: auto;}
}

@media (max-width:1020px){
    #listItem,.detailHeader{ color: #091d3e;}
    .detailHeader{font-weight: bold;}
    #buttonSection3, #mobileHiddenBtn, .shownMainImg, #trustedBrands_mobile, .fade{display: none !important;}
    #listRight{display: block;}

    /* Grids */
    .grid_container {
        display: grid;
        grid-template-columns: 100% 100%;
        grid-template-areas:
            "a"
            "b" !important;
    }
    #detail_grid_container{
        display: block;
        margin-top: -55px !important;
        align-items: center;
        justify-items: center;
        grid-template-areas: "e f";
        margin-top: -20px;
    }
   

    /* Images */
    #onlineLogo{
        top: 100px !important;
        padding:20px;
        position: absolute;
        width: 80% !important;
        margin-top: 0px !important;
        margin-left: 0px !important;
    }
    #left_main{
        background-position: center;
    }
    
    #buttonSection1,#buttonSection2{
        width: 255px;
        height: 150px;
        background: linear-gradient(180deg, rgba(255,255,255,0.40940126050420167) 3%, rgba(193,232,250,0) 71%);
    } 
    #CTAcontainer{
        grid-template-columns: auto;
        display: block;
        text-align: center;
    }
    #CTAcontainer * {
        display: inline-block;
        margin: 0 auto;
    }
    #buttonSection2{margin-right: 0px !important;}
    #buttonSection{ margin-top: 50px;}
    #detailsContainer{padding: 0px 36px;}
    .detailHeader{font-size: 28.5px;}  
}


@media (max-width: 720px) {
    body{
        background: linear-gradient(180deg, rgba(11,33,70,1) 1%, 
        rgba(33,57,92,1) 10%,
         rgba(95,125,153,1) 24%, 
         rgba(193,232,250,1) 34%);
    }
    #CTAcontainer{
        margin-top: 10px;
    }
    #buttonSection{
        margin-top: 50px;
    } 
    #buttonSection1{
        margin-right: 20px;
    }
    #detailsContainer{
        margin-left: 0px;
        padding: 0px 36px;
    }
}

@media (max-width: 530px){
    #actionButton{
        width: 49vw !important;
        height: 90px;
        margin: 20px auto !important;
    }
    .mobileLeft,.mobileRight{
        vertical-align: top;
        display: inline-block !important;
        width: 50vw !important;
        text-align: center;
    }
    .btnTitle{
        width: 49vw !important;
        margin-top: 0px;
        padding: 0px;
    }
    #buttonSection{
        margin-top: 15px !important;
    }
    #buttonSection1, #buttonSection2{
        background: none !important;
        width:  50vw !important;
    }
    #buttonSection3{
        margin: 0px !important;
    }
    #buttonSection1{
        margin-right: 0px ;
    }
    #hrefsMobile{
        display: inline-block;
    }
    .btnTitle{
        width: auto;
    }
    .projBttnTitle{
        font-size: 3.5vw;
    }
    #CTAcontainer{
        padding: 0px !important;
    }
}

@media (max-width:430px){
    #left_main{
        background-size: auto 80% !important;
    }
    #pm-mobile{
        top: -60px;
    }
    #detail_grid_container{
        padding-left: 5%;
    }
    #detailsContainer{
        padding: 0px 0px 23px 6% !important;
    } 
    #btnTitle{
        margin-top: -60px !important;
    }
    .btnTitle{
        font-size: 3.8vw
    }
    #listItem{
        font-size: 15px;
        white-space: normal;
    }
    .pm-mobile {
        margin-top: -110px !important;
    }
}


@media (min-width: 1024px) and (orientation:landscape) {
    #outer {width:90vw;}
 }