html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "Figtree", sans-serif;
        font-size: 16px; 	
        background-image: url("../graphics/BGdesign 1.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        text-align:left;
    }



/*header settings*/
    .header{
        position:relative;
        top:0px;
        left:0px;
        width:100%;
        height:120px;
    }
    .header_leftarea{
        position:absolute;
        top:0px;
        left:0px;
        width:25%;
        height:100%;
    }
    .ptlogo{
        position:absolute;
        top:50%;
        left:10px;
        width:14vw;
        height:calc(14vw * 437/1454);
        transform:translate(0%,-50%);
    }
    .header_centerarea{
        position:absolute;
        top:0px;
        left:50%;
        transform:translate(-50%,0%);
        width:45%;
        height:100%;
    }
    .header_rightarea{
        position:absolute;
        top:0px;
        right:0px;
        width:25%;
        height:100%;
    }
    .lmsxlogo_container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* Scale with viewport width */
        width: 30vw;
        height: calc(30vw / 4);

        /* Cap the height */
        max-height: 120px;               /* won’t grow taller than this */
        max-width: calc(120px * 4);      /* maintain aspect ratio at cap */
    }
    .lmslogo_img{       
        height:100%;
        width:auto;
    }

/*main body segement settings*/
    .main{
        position:relative;
        top:0px;
        left:0px;
        width:100%;
        min-height:calc(100vh - 200px);
    }

    .mainblock{
        position:relative;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:5%;
        margin-right:5%;
        width:90%;
        min-height:50px;
        height:auto;
    }
    .mainblock_80{
        position:relative;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:10%;
        margin-right:10%;
        width:80%;
        min-height:50px;
        height:auto;
    }
    
    .mainblock_95{
        position:relative;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:2.5%;
        margin-right:2.5%;
        width:95%;
        min-height:50px;
        height:auto;
    }
    .mainblock_98{
        position:relative;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:1%;
        margin-right:1%;
        width:98%;
        min-height:50px;
        height:auto;
    }

    .flexme{
        display:flex;
    }
    
    
    


    .planblock{
        position:relative;
        top:0px;
        font-size:.75em;
        width:24%;
        margin-left:.5%;
        margin-right:.5%;
        margin-top:0px;
        margin-bottom:0px;
        height:200px;
        background-color:white;
        border-radius:20px;
        /*border:solid #0b5cab 1px;*/
        box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.27); 
    }
    @media (max-width: 900px) {
        .flexme{
            display:inline;
        }
        .planblock{
            width:90%;
            margin-left:5%;
            margin-right:5%;
            margin-top:10px;
            margin-bottom:10px;
        }
    }

    .planblockinner{
        position:absolute;
        top:10px;
        left:10px;
        width:calc(100% - 20px);
        height:200px;
    }
    .planblock_topmatter{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100px;
    }

    .planblock_scaling{
        position:absolute;
        top:50px;
        left:50px;
        width:100px;
        height:10px;
        z-index:-1;
        opacity:0;
    }
    .planblock_scaling_sub{
        width:100%;
        background-color:pink;
    }
    .divinnertop{
        position:relative;
        top:0px;
        min-height:10px;
        max-height:600px;
        
        margin-top:0px;
    }
    .divinnerbottom{
        position:relative;
        min-height:10px;
        max-height:1600px;
        
        top:0px;
    }
    
    .popup{
        position:absolute;
        top:800px;
        left:50%;
        width:400px;
        height:calc(auto + 70px);
        transform:translate(-50%,0%);
        background-color: #fafbfc;
        border:none;
        border-radius:24px;
        padding: 20px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.4);    
        font-size:16px;
        z-index:-1;
        opacity:0;
    }

    @media (max-width: 1070px) {
        .popup{
            width:300px;
        }
    }
/*footer settings*/
    .footer{
        position:relative;
        height:80px;
        background-color: #274c80; 
    }
    
    .footerleft{
        position:absolute;
        top:50%;
        left:5px;
        transform:translate(0%,-50%);
        width:calc(40% - 5px);
        height:auto;        
        padding-left:5px;
    }
    .footermiddle{
    position:absolute;
    top:0px;
    left:50%;
    transform:translate(-50%,0%);
    width:20%;
    height:100%;
    }
    .footerright{
        position:absolute;
        top:50%;
        right:5px;
        width:calc(40% - 5px);
        transform:translate(0%,-50%);
        min-height:30px;
        max-height:78px;
        display:flex;
        justify-content:flex-end;
        align-content:space-between;
    }
    .copyrightinfo{    
        font-size:12px;
        color:white;
    }
    .contactinfo{
        font-size:14px;
        color:white;
    }
    #schedule-btn{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        padding: 8px 15px;
        min-width:160px;
        
        border-radius:12px;
        background-color: #ffde59;
        color: #274c80;
        border: none;
        white-space: nowrap;
        font-size: 16px;
        font-weight:bold;
        cursor: pointer;
        transition: background-color .3s, color 0.3s;
        
    }
    #schedule-btn:hover{
        background-color:#fcd000ff;
        transition: background-color 0.3s ease;
    }
    .social{
        position:relative;
        width:35px;
        height:35px;
        margin-left:5px;
        margin-right:5px;
        background-color:rgba(0,0,0,0);
        border:none;
        cursor:pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size:contain;
    }

    .s_bluesky{
        background-image:url("../graphics/square-bluesky-brands-solid-full.svg");
    }
    .s_facebook{
        background-image:url("../graphics/square-facebook-brands-solid-full.svg");
    }
    .s_instagram{
        background-image:url("../graphics/square-instagram-brands-solid-full.svg");
    }
    .s_linkedin{
        background-image:url("../graphics/square-linkedin-brands-solid-full.svg");
    }
    .s_twitter{
        background-image:url("../graphics/square-x-twitter-brands-solid-full.svg");
    }
    .s_youtube{
        background-image:url("../graphics/square-youtube-brands-solid-full.svg");
    }

    .centeredtext{
        text-align:center;
    }

    @media (max-width: 1070px) {
        .footer{
            position:relative;
            height:120px;
            background-color: #274c80; 
        }
        .footerleft{
            position:absolute;
            top:0%;
            left:5px;            
            width:90%;
            height:60px;            
            transform:translate(0%,0%);
            padding-left:5px;
        }
        .footermiddle{
            position:absolute;
            top:40px;
            left:calc(100% - 160px);
            width:160px;
            height:35px;
            transform:translate(0%,0%);
        }
        .footerright{
            position:absolute;
            top:80px;
            right:5px;
            width:calc(40% - 5px);
            transform:translate(0%,0%);
            min-height:30px;
            max-height:78px;
            display:flex;
            justify-content:flex-end;
            align-content:space-between;
        }
        #schedule-btn{
            position:absolute;
            top:0%;
            left:0%;
            transform:translate(0%,0%);
            padding: 8px 15px;
            min-width:160px;
            
            border-radius:12px;
            background-color: #ffde59;
            color: #274c80;
            border: none;
            white-space: nowrap;
            font-size: 16px;
            font-weight:bold;
            cursor: pointer;
            transition: background-color .3s, color 0.3s;
            
        }
        #schedule-btn:hover{
            background-color:#fcd000ff;
            transition: background-color 0.3s ease;
        }
    }

/*button settings*/
    .trialButton {
        font-size: 20px;    
        background-color: #066bb5;
        border-radius: 12px;
        border: none;/*1px solid rgba(5, 46, 87, 255);*/
        color: white;
        height: 37px;
        width: 100%;
        outline: none;
        box-shadow: none;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .trialButton:focus{
        outline:solid black 1px;
        outline-offset:2px;
    }
    .trialButton:hover {
        background-color: #337ec6; 
        transition: background-color 0.3s ease;
    }

    .yellowbutton{	
        padding: 8px 15px;
        border-radius:12px;
        background-color: #ffde59;
        color: #274c80;
        border: none;
        width: 100%;
        font-size: 20px;
        font-weight:bold;
        cursor: pointer;
        transition: background-color .3s, color 0.3s;
        margin-bottom:5px;
    }
    .yellowbutton:hover{
        background-color:#fcd0006e;
        transition: background-color 0.3s ease;
    }

    .popupbutton{
        position:relative;
        font-size: 20px;
        background-color: #066bb5;
        border-radius: 12px;
        border: none;/*1px solid rgba(5, 46, 87, 255);*/
        color: white;
        height: 37px;
        width: 120px;
        outline: none;
        box-shadow: none;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .popupbutton:hover{    
        background-color: #337ec6;
        transition: background-color 0.3s ease;
    }
    .popupbutton:focus{
        outline:solid black 1px;
        outline-offset:2px;
    }

    .links{
        position:absolute;
        top:15px;
        right:30px;
        color: #066bb5;
        font-size: 15px;
        line-height:16px;
        text-align:right;
        text-decoration:underline;
        white-space: nowrap;
    }

/*text settings*/
    h1{
        font-size:44px;
        font-weight:bold;
    }
    h2{
        font-size:38px;
        font-weight:bold;
    }
    h3{
        font-size:32px;
        font-weight:bold;
    }
    p{
        font-size:22px;
        font-weight:normal;
    }

    h2.plantable{
        font-size:21px;
        font-weight:bold;
    }
    p.plantable{
        font-size:14px;
        font-weight:normal;
    }
    .plantable_cost{
        font-size:28px;
        font-weight:bold;
    }
    h2.popuptitle{
        font-size:21px;
        font-weight:bold;
    }
    p.popupbody{
        font-size:16px;
        font-weight:normal;
    }
    a {
        display: inline;
        margin-top: 0px;
        color: #0b5cab;
        font-weight: bold;
        text-decoration: none;
    }

    a.inline {   
        display:inline;
        margin-top:0px; 
        color: #0b5cab;
        font-weight: bold;
        text-decoration: none;
    }

    a.inline2 {   
        display:inline;
        margin-top:0px; 
        color: #ffde59;
        font-weight: bold;
        text-decoration: none;
    }
    .contact{
        font-size:14px;
        font-weight:normal;
    }
    .infoText p {
        color: #033a61;
        font-size:14px;
        font-weight:normal;
        margin: 6px 0;
        word-wrap: break-word;
        padding-left: 1em;
        text-indent:-1em;
    }

    .infoText_noindent p {
        color: #033a61;
        font-size:14px;
        font-weight:normal;
        margin: 6px 0;
        word-wrap: break-word;
    }
 
    .PCheck::before {
        content: "✔ ";
        color: purple;
        padding-left: 0;
    }
    .textbubble{
        border-radius:20px;
        background-color:#ffffffad;
    }
    .spacetop{
        margin-top:10px;
    }

    /*css faildowns*/
@media (max-width: 1070px) {
    .copyrightinfo{    
        font-size:9px;
        color:white;
    }
    .contactinfo{
        font-size:10px;
        color:white;
    }
}