/* cbjfgsyf */

body {
                margin:0;
                background-size: cover;
                background-position: center;
            }

          /*  div div {
               border: 1pt #000 solid;
               
            } */
         

            .main {
                width: 100%;
                height: 100vh;
                background-image: url(../images/WEBbgPLEASE.png);
                margin:0;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                
            }
            
            .main .right .header {
               background-image: url(..images/abouttext.png);
            
            }

            .main .right .header img {
               width: 95%;
               height: auto;
               position: bottom;
            }



            .main .left {
                width: 380px;
                height: 100vh;
                float:left;
                background-image: url(../images/leftpanel.png);
                margin:0;
                background-size: cover;
                background-position: center;
                 background-repeat: no-repeat;
            }

             .main .left .buttons {
                width: 380px;
                height: 20vh
             }

             .main .left .buttons .hbutton {
                width: 110px;
                height: 125px;
                float:left;
                margin-left:45px;
                margin-top: 45px;
                background-image: url(../images/houseicon.png);
               background-size: contain;
               background-position: bottom;
               background-repeat:no-repeat;
             }

             .main .left .buttons .bbutton {
                width: 65px;
                height: 65px;
                float:left;
                margin-top: 105px;
                margin-left: 20px;
                background-image: url(../images/birdicon.png);
               background-size: contain;
               background-position: bottom;
               background-repeat:no-repeat;
             }

             .main .left .spacer {
                width: 380px;
                height: 57.5vh;
             }

             .main .left .logoage {
                width: 380px;
                height: 22vh;
             }

             .left .logoage .logo {
               width: 82.9%;
               height: 13.3vh;
               margin-left:30px;
              /*  background-image: url(../images/CRLlogoCRL.png);*/
                background-size: cover;
                background-position: center;
             }

             .left .logoage .logo img {
                height: 13.3vh;
                margin-left: 2%;
             }
             

             .left .logoage .text {
               width:82.9%;
               height:4.5vh;
               margin-left: 30px;
             }

             .main .left .logoage .text h3 {
                font-family: "p22-folk-art-block", sans-serif;
                font-weight: 400;
                font-style: normal;
                color: #e8eab6;
                font-size: clamp(33pt,2.2vw,2.44vw);
                line-height:0cap;
                margin:0;
                margin-top: 2vh;
                position: absolute;
            }

             .main .margin {
                height:100vh;
                width:1%;
                float: left;
            }

             .main .right {
                height: 100vh;
                width: 70%;
                float:right;
            }

             .main .right .rightimgs {
                float: right;
                width: 70%;
                height:100vh;
             }

             .main .right .rightimgs .top {
                width: 100%;
                height:35vh;
             }

             .main .right .rightimgs .bottom {
                width: 100%;
                height:60vh;
             }

             .main .right .rightimgs .top .bird {
                width:200px;
                height:200px;
                float:right;
                margin-top: 160px;
             }

             .main .right .rightimgs .bottom .house {
                width:85.1%;
                height:50vh;
                float:right;
                margin: 0 0 0 0;
                margin-top: 2vh
             }

             .main .right .rightimgs .bottom .house img {
               width: 800px;
               height: auto;
               float: right;
               margin-right: 2%;
             }

             

             /* ------- MEDIA QUERY -------- */

            @media only screen and (max-width:1400px) {

                div div {
                  /*  background-color: rgb(4, 249, 249); */
                }

                .main {
                width:100%;
                height: 100vh;
                background-image: url(../images/ipadpage.jpg);
                margin:0;
                background-size: cover;
                background-position: center;
                }
               
                .main .left {
                    height: 26vh;
                    width: 100%;
                   background-image: url(../images/ipadpanel.png);
             }

             .main .left .buttons, .main .left .spacer, .main .left .logoage {
               float:left;
             }
              
             .main .left .buttons {
               height:100vh;
               width: 33%;
             }

             .main .left .buttons .hbutton {
               width: 36%;
               height: 16.6vh;
               float: left;
               margin-left: 9.9%;
               margin-top: 4.8vh;
            }

             .main .left .buttons .bbutton {
               width: 23%;
               height: 11.1vh;
               float: left;
               margin-top: 10.35vh;
               margin-left: 4.4%;
             }

             .main .left .spacer {
               display:none;
             }

             .main .left .logoage {
               float:right;
               width:31.3%;
               height:26vh;
             }

             .left .logoage .logo, .left .logoage .text {
               float: right;
             }

             .left .logoage .logo {
               margin-top: 45px;
               margin-right: 7%;
               min-width: 315px;
               max-width:330px
             }

             .left .logoage .text {
               width: 82.9%;
               margin-right:7%;
               min-width:315px;
               max-width:330px
             }

             .main .margin {
               display: none;
             }

             .main .right, .main .right .rightimgs {
               width:100%;
               height:70vh;
               float:left;
             }

             .main .right .rightimgs .bottom .house {
              width: 600px;
              height:500px;
             }

             .main .right .rightimgs .bottom .house img {
               height:500px;
               width: auto;
             }

             .main .right .rightimgs .top {
                width: 100%;
                height:27vh;
             }

             .main .right .rightimgs .bottom {
                width: 100%;
                height:60vh;
             }

             .main .right .rightimgs .top .bird {
                width:200px;
                height:200px;
                float:right;
                margin-top: 60px;
             }

             .main .right .rightimgs .bottom .house {
                width:600px;
                height:500px;
                float:right;
                margin-top: 0;
             }


            

            }

            /* ----------- END MEDIA QUERY TABLET ----------- */


                        /* MEDIA QUERY PHONE 400-1100px*/
            @media only screen and (max-width:1100px) {

            div div {
                   /* background-color: rgb(224, 7, 79); */
                }

            .main {
               width:100%;
               height: 2200px;
               background-image: url(../images/PHONEbgPLEASEE.png);
               margin:0;
               background-size: cover;
               background-position: center;
            }
                
                .main .left {
                    height: 280px;
                    width: 100%;
             }

                .main .left .buttons {
                width: 40%;
                height: 280px;
             }
            
             .main .left .buttons .hbutton {
                width: 36%;
                height: 11vh;
                float:left;
                margin-left:15.5%;
                margin-top: 3vh;
             }

             .main .left .buttons .bbutton {
                width: 36%;
                height: 11vh;
               float: left;
               margin-top: 3vh;
               margin-left: 7%;
             }

             .main .left .spacer {
               display:none;
             }

             .main .left .logoage {
                width: 55%;
                height: 280px;
             }

             .left .logoage .logo {
               min-width:0px;
               width: 75%;
               height: 15vh;
               margin-top: 2.4vh;
             }

             .left .logoage .text {
               min-width:0px;
               width:75%;
               height:3vh;
             }

             .left .logoage .logo img {
               width: 100%;
               height:auto;
               float:right;
             }
             
             .left .logoage .text h3 {
               font-size: clamp(34pt,4.27vw,5vw) !important;
             }

             .logo, .text{
               min-width:70vw;
             }

             .main .right, .main .right .rightimgs {
                height: 1700px;
                width: 100%;
                float:left;
            }

            
             .main .right .rightimgs .top {
                width: 100%;
                height:313px;
             }

             .main .right .rightimgs .bottom {
                width: 100%;
                height:100vh;
             }

             .main .right .rightimgs .top .bird {
                width:200px;
                height:200px;
                float:right;
                margin-top: 60px;
             }

             .main .right .rightimgs .bottom .house {
                width:85%;
                height:1111px;
                float:none;
                margin-top: 0;
                margin-right: auto;
                margin-left:auto;
              
             }

            .main .right .rightimgs .bottom .house img {
               display: none;

             }

             .main .right .rightimgs .bottom .house  {
            
               background-image: url(../images/apartmentHOME.png);
               background-size: contain;
               background-position: bottom;
               background-repeat:no-repeat;
             }

             .main .right .rightimgs .bottom .flowers {
               width:100%;
               height:200px;
               background-image: url(../images/FLOWERS.png);
               background-size: contain;
               background-position: bottom;
               background-repeat:no-repeat;
             }



         }

         @media only screen and (max-width:700px) {


            .left .logoage .logo {
               height: 12.4vh;
            }

            .buttons {
               width: 25%;
            }

            .main .left .buttons .hbutton {
                width: 55%;
                height: 9vh; 
                margin-right:55px;
                margin-top: 1.7vh;
             } 

            .main .left .buttons .bbutton {
               width: 55%;
                height: 9vh;
               float: left;
               margin-top: 2vh; 
               margin-left:15.5%;
             } 

             .main .left .logoage .text h3 {
               font-size: clamp(5.8vw,5.8vw,6vw) !important;
             }

                          .main .right .rightimgs .bottom .house {
                width:97%;
                height:97vh;
                float:none;
                margin-top: 0;
                margin-right: auto;
                margin-left:auto;
              
             }

         }