/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){

    .rowIMG {
        width: 500px;
        height: 300px;
        position: absolute;
        left: 50px!important;
    }
    .flex1{
        position:relative!important;
        left:0rem!important;
    }
    .rowIMG2 {
        width: 500px;
        height: 300px;
        position: absolute;
        left: 50px!important;
        top:20rem;
    }
    .columnIMG {
        float: left;
        width: 50px;
        padding: 1px;
    }
    .sideArticle{
        display:none;
    }
    
    .footer {
       
        top: 74rem;
       
    }
    .deep2{
        top:134rem;
    }
    .deep3{
        top:136rem;
    }
    .art-page-footer {
       
        top: 78rem;
        
    }
    .sidePic15 {
        position: absolute;
        background-image: url("/assets/images/industry1.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin-bottom: 1rem;
        height: 250px;
        width: 200px;
        float: left;
        top: 11rem;
        left: 5rem;
    }
    .sidePic16 {
        position: absolute;
        background-image: url("/assets/images/industry2.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        margin-bottom: 1rem;
        height: 250px;
        width: 200px;
        float: right;
        top: 12rem;
        right: 5rem !important;
    }
    .footerLong{
        top:108rem;
    }
    .footerLong2{
        top:111rem;
    }
    .addSpace11 {
        margin-top: 2rem;
        position: relative;
        top: 18rem;
    }
    .sidePic17 {
        position: absolute;
        background-image: url("/assets/images/industry3.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        margin-bottom: 1rem;
        height: 250px;
        width: 250px;
        align-self: right;
        top: 30rem !important;
        left: 16rem !important;
    }
    .mainContnet{
        width:560px!important;
        position:relative;
        left:20px;
        padding:5px;
    }
    .sidePic1{
        width:250px;
        height:150px;
position:relative;
left:100px;
}
.addSpace2 {
    margin-top: 3rem;
    position: absolute;
    top: -2rem;
}
    .sidePic2{
        width:250px;
        height:150px;
        position:relative;
right:100px;
    }
    .sidePic3{
        width:250px;
        height:150px;
        position:relative;
left:100px;
top:13rem;
left:225px;
    }
    .sidePic4{
        width:250px;
        height:150px;
    }
    .sidePic5{
        width:100px;
        height:75px;
        left:0%;
        top:350px;
    }
    .addSpace7 {
        margin-top: 3rem;
        position: relative;
        top: 17rem;
    }
    .imageFlex {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
        width: 550px;
    }
    .sidePic6{
        width:100px;
        height:75px;
        left:25%;
        top:350px;
    }
    .sidePic7{
        width:100px;
        height:75px;
        right:25%;
        top:350px;

        
    }
    .addSpace88 {
        margin-top: 3rem;
        position: relative;
        top: 3rem;
    }
    .addSpace7 {
        margin-top: 3rem;
        position: relative;
        top: 3rem;
    }
    .sidePic8{
        width:100px;
        height:75px;
        right:0%;
        top:350px;

    }
    .addSpace8 {
        margin-top: 2rem;
        position: relative;
        top: 3rem;
        float: right;
        text-align: justify;
    }
    .space29 {
        position: relative !important;
        left: -105px;
        top: 1rem;
    }
    .space30{
        position:relative!important;
        right:100px;
    }
    .sidePic9{
        width:250px;
        height:125px;
        left:-150px;
        top:120%;
    }
    .sidePic10{
        width:250px;
        height:125px;
        left:25%;
        top:120%;
    }
    .sidePic11{
        width:250px;
        height:125px;
        right:50%;
        top:250%;

        
    }
    .sidePic12{
        width: 500px;
        height: 200px;
        right: 10%;
        top: 14rem;
        background-size: contain; /* Resize the background image to cover the entire container */


    }
   .containerGallery{
       display:none;
   }
   .containerGallery1{
    display:none;
}
    .sidePic16 {
        top: 11rem;
        right: -2rem;
    }
    .sidePic17 {

        top: 37rem;
        left: 3rem;
    }
    .aqua2 {
        position: absolute;
        top: 57.7rem;
        left: 17rem;
    }
    .addSpace6 {
        position:relative!important;
        left: 1rem;
        top: 4rem!important;
    }
    .addSpace4 {
        margin-top: 3rem;
        position: relative;
        top: 0rem;
    }
    .colFlex {
        flex: 25%;
        max-width: 25%;
    }
    .imageFlex {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
        width: 550px;
        left: 5rem;
        position: relative;
    }
    .sidePic13 {
        position: absolute;
        background-image: url("/assets/images/landscape_design1.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        background-position: center;
        background-size: cover;
        text-align: wrap;
        margin-bottom: 1rem;
        width: 600px;
        height: 300px;
        top: 4rem;
        left: 4rem;
    }
    .sidePic14 {
        position: absolute;
        background-image: url("/assets/images/landscape_design2.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        margin-bottom: 1rem;
        height: 200px;
        width: 250px;
        align-self: right;
        top: 33.5rem;
        left: 15rem;
    }
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px){

    .rowIMG {
        width: 500px;
        height: 300px;
        position: absolute;
        left: 150px!important;
    }
    .flex1{
        position:relative!important;
        left:-5rem!important;
    }
    .rowIMG2 {
        width: 500px;
        height: 300px;
        position: absolute;
        left: 150px!important;
        top:20rem;
    }
    .columnIMG {
        float: left;
        width: 75px;
        padding: 25px;
    }
    .sideArticle{
        display:none;
    }
    .footer {
       
        top: 72rem;
       
    }
    .art-page-footer {
       
        top: 76rem;
        
    }
    .sidePic15 {
        position: absolute;
        background-image: url("/assets/images/industry1.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin-bottom: 1rem;
        height: 250px;
        width: 200px;
        float: left;
        top: 11rem;
        left: 5rem;
    }
    .sidePic16 {
        position: absolute;
        background-image: url("/assets/images/industry2.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        margin-bottom: 1rem;
        height: 250px;
        width: 200px;
        float: right;
        top: 12rem;
        right: 5rem !important;
    }
    .footerLong{
        top:108rem;
    }
    .footerLong2{
        top:111rem;
    }
    .addSpace11 {
        margin-top: 2rem;
        position: relative;
        top: 18rem;
    }
    .sidePic17 {
        position: absolute;
        background-image: url("/assets/images/industry3.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        margin-bottom: 1rem;
        height: 250px;
        width: 250px;
        align-self: right;
        top: 30rem !important;
        left: 16rem !important;
    }
    .mainContnet{
        width:560px!important;
        position:relative;
        left:20px;
        padding:5px;
    }
    .sidePic1{
        width:250px;
        height:150px;
position:relative;
left:100px;
}
.addSpace2 {
    margin-top: 3rem;
    position: absolute;
    top: -2rem;
}
    .sidePic2{
        width:250px;
        height:150px;
        position:relative;
right:100px;
    }
    .sidePic3{
        width:250px;
        height:150px;
        position:relative;
left:100px;
top:13rem;
left:225px;
    }
    .sidePic4{
        width:250px;
        height:150px;
    }
    .sidePic5{
        width:100px;
        height:75px;
        left:0%;
        top:350px;
    }
    .addSpace7 {
        margin-top: 3rem;
        position: relative;
        top: 17rem;
    }
    .imageFlex {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
        width: 550px;
    }
    .sidePic6{
        width:100px;
        height:75px;
        left:25%;
        top:350px;
    }
    .sidePic7{
        width:100px;
        height:75px;
        right:25%;
        top:350px;

        
    }
    .addSpace88 {
        margin-top: 3rem;
        position: relative;
        top: 3rem;
    }
    .addSpace7 {
        margin-top: 3rem;
        position: relative;
        top: 3rem;
    }
    .sidePic8{
        width:100px;
        height:75px;
        right:0%;
        top:350px;

    }
    .addSpace8 {
        margin-top: 2rem;
        position: relative;
        top: 3rem;
        float: right;
        text-align: justify;
    }
    .space29 {
        position: relative !important;
        left: -105px;
        top: 1rem;
    }
    .space30{
        position:relative!important;
        right:100px;
    }
    .sidePic9{
        width:250px;
        height:125px;
        left:-150px;
        top:120%;
    }
    .sidePic10{
        width:250px;
        height:125px;
        left:25%;
        top:120%;
    }
    .sidePic11{
        width:250px;
        height:125px;
        right:50%;
        top:250%;

        
    }
    .sidePic12{
        width: 500px;
        height: 200px;
        right: 10%;
        top: 14rem;
        background-size: contain; /* Resize the background image to cover the entire container */


    }
   .containerGallery{
       display:none;
   }
   .containerGallery1{
    display:none;
}
    .sidePic16 {
        top: 11rem;
        right: -2rem;
    }
    .sidePic17 {

        top: 37rem;
        left: 3rem;
    }
    .aqua2 {
        position: absolute;
        top: 57.7rem;
        left: 17rem;
    }
    .addSpace6 {
        position:relative!important;
        left: 1rem;
        top: 4rem!important;
    }
    .addSpace4 {
        margin-top: 3rem;
        position: relative;
        top: 0rem;
    }
    .colFlex {
        flex: 25%;
        max-width: 25%;
    }
    .imageFlex {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
        width: 550px;
        left: 5rem;
        position: relative;
    }
    .sidePic13 {
        position: absolute;
        background-image: url("/assets/images/landscape_design1.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        background-position: center;
        background-size: cover;
        text-align: wrap;
        margin-bottom: 1rem;
        width: 600px;
        height: 300px;
        top: 4rem;
        left: 4rem;
    }
    .sidePic14 {
        position: absolute;
        background-image: url("/assets/images/landscape_design2.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: Justify;
        margin-bottom: 1rem;
        height: 200px;
        width: 250px;
        align-self: right;
        top: 33.5rem;
        left: 15rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body{
        width:768px;
    }

    .wrapper{
        width:768px;

    }

    nav{
        width:130%;
        position:absolute;
        left:-5%;
      }
      .pic1,.pic2, .pic3{
          top:4rem;
      }
      .sideArticle{
       position:absolute!important;
        height:85rem;
      top:28rem;
      width:17rem;
      left:50px;
    }
.sideTop{
    top:20rem;
}
    .navbar a {
        font-size: 12px;
  
        padding: 10px 10px;
      
    
      }
      .footer {
        position: absolute;
        left: 10%;
        top: 107rem;
        width: 80%;
        height: 4.5rem;
        background-color: #f1e4c7;
        color: white;
        text-align: center;
        border: 1px solid #f1e4c7;
        border-radius: 2%;
    }
    .footerText {
        position: relative;
        padding-left: 0rem;
        width: 100%;
    }
    .art-page-footer {
        margin: 1em;
        text-align: center;
        text-decoration: none;
        color: #F39B35;
        width: 75%;
        position: absolute;
        left: 11%;
        top: 113rem;
        font-family: Arial;
        font-size: 10px;
        letter-spacing: normal;
        word-spacing: normal;
        font-style: normal;
        font-weight: normal;
    }
      .mainContent{
       
        top:-115rem;
        width:55%;
        right:10%;

            }

            .sidePic13 {
                position: absolute;
                background-image: url("/assets/images/landscape_design1.jpg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                text-align: Justify;
                background-position: center;
                background-size: cover;
                text-align: wrap;
                margin-bottom: 1rem;
                width: 600px;
                height: 300px;
                top: 4rem;
                left: 0rem;
            }
            .sidePic14 {
                position: absolute;
                background-image: url("/assets/images/landscape_design2.jpg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                text-align: Justify;
                margin-bottom: 1rem;
                height: 200px;
                width: 250px;
                align-self: right;
                top: 36.5rem;
            }
            .sidePic15 {
                position: absolute;
                background-image: url("/assets/images/industry1.jpg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                margin-bottom: 1rem;
                height: 300px;
                width: 200px;
                float: left;
                top: 11rem;
            }
            .sidePic16 {
                position: absolute;
                background-image: url("/assets/images/industry2.jpg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                text-align: Justify;
                margin-bottom: 1rem;
                height: 300px;
                width: 200px;
                float: right;
                top: 11rem;
                right: 2rem;
            }
            .sidePic17 {
                position: absolute;
                background-image: url("/assets/images/industry3.jpg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                text-align: Justify;
                margin-bottom: 1rem;
                height: 400px;
                width: 400px;
                align-self: right;
                top: 37rem;
                left: 0.5rem;
            }
              .mainContent{
                width:450px;
                right:0%;
                top: 3em;
                
                    }
                    .imageFlex {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 4px;
                        width: 450px;
                    }
                    .rowIMG{
                        width: 500px;
                        height: 300px;
                        position: absolute;
                        left: 0%;
                      }
                      .rowIMG2{
                        width: 700px;
                        height: 300px;
                        position: absolute;
                        left: 0%;
                        top:20rem;
                      } 
                      .columnIMG {
                        float: left;
                        width: 100px;
                        padding: 5px;
                      
                      }
                      .addSpace2 {
                        margin-top: 3rem;
                        position: absolute;
                        top: -2rem;
                    }
                      .img1{
                          width:100px;
                      }
                      .sidePic1{
                        width:200px;
                        height:120px;
                    }
                    .sidePic2{
                        width:200px;
                        height:120px;
                        
                    }
                    .sidePic3{
                        width:200px;
                        height:120px;
                    }
                    .sidePic4{
                        width:200px;
                        height:120px;
                    }

                    .sidePic5{
                        width:100px;
                        height:75px;
                        left:0%;
                        top:35%;
                    }
                    .sidePic6{
                        width:100px;
                        height:75px;
                        left:25%;
                        top:35%;
                    }
                    .sidePic7{
                        width:100px;
                        height:75px;
                        right:25%;
                        top:35%;
            
                    }
                    .sidePic8{
                        width:100px;
                        height:75px;
                        right:0%;
                        top:35%;
            
                    }
                    .sidePic9{
                        width:100px;
                        height:75px;
                        left:5%;
                        top:12rem;
                                        }
                    .sidePic10{
                        width:100px;
                        height:75px;
                        left:30%;
                        top:12rem;
                    }
                    .sidePic11{
                        width:100px;
                        height:75px;
                        right:20%;
                        top:12rem;
            
                    }
                    .sidePic12{
                        width: 450px;
                        height: 200px;
                        right: 0%;
                        top: 14rem;
                        background-size: contain; /* Resize the background image to cover the entire container */
        
            
                    }
                    .addSpace3 {
                        margin-top: 3rem;
                        position: relative;
                        top: 8rem;
                    }
                    .space29{
                        position:absolute;
                        top: 4rem;

                    }
                    .space30{
                        position:absolute;
                        top: 8rem;
                    }
                    .aqua2 {
                        position: absolute;
                        top: 47rem;
                        left: 15rem;
                    }
                    .containerGallery1 {
                        width: 200px;
                    
                    }
                    .containerGallery {
                        width: 200px;
                    
                    }
                    .addSpace8 {
                        position: relative;
                        top: 18rem;
                    }
                    .addSpace88 {
                        position: relative;
                        top: 9rem;
                    }
                    .addSpace7 {
                        margin-top: 3rem;
                        position: relative;
                        top: 20rem;
                    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

    body{
        width:992px;
    }

    .wrapper{
        width:992px;

    }

    nav{
        width:100%!important;
        left:3%!important;
      }
  
    
    nav {
        font-family: monospace;
        position:relative;
        width:80%;
        left:7.5%;
      }
      
    .sideArticle{
        top:36rem;
        width:17rem;

         
        height:85rem;
      left:4.5rem!important;
    }

    .mainContent{
        width:500px;
        right:15%;
        top: 2.5em;
        
            }
            .rowIMG{
                width: 600px;
                height: 400px;
                position: absolute;
                left: 0%;
              }
              .rowIMG2{
                width: 600px;
                height: 400px;
                position: absolute;
                left: 0%;
                top:20rem;
              } 
              .columnIMG {
                float: left;
                width: 100px;
                padding-right: 97px;
              
              }
              .img1{
                  width:100px;
              }
            .sidePic1{
                width:250px;
                height:150px;
            }
            .sidePic2{
                width:250px;
                height:150px;
            }
            .sidePic3{
                width:250px;
                height:150px;
            }
            .sidePic4{
                width:250px;
                height:150px;
            }
            .sidePic5{
                width:100px;
                height:75px;
                left:0%;
                top:25%;
            }
            .addSpace7 {
                margin-top: 3rem;
                position: relative;
                top: 17rem;
            }
            .imageFlex {
                display: flex;
                flex-wrap: wrap;
                padding: 0 4px;
                width: 550px;
            }
            .sidePic6{
                width:100px;
                height:75px;
                left:25%;
                top:25%;
            }
            .sidePic7{
                width:100px;
                height:75px;
                right:25%;
                top:25%;
    
            }
            .sidePic8{
                width:100px;
                height:75px;
                right:0%;
                top:25%;
    
            }
            .sidePic9{
                width:250px;
                height:125px;
                left:0%;
                top:120%;
            }
            .sidePic10{
                width:250px;
                height:125px;
                left:50%;
                top:120%;
            }
            .sidePic11{
                width:250px;
                height:125px;
                right:25%;
                top:250%;
    
            }
            .sidePic12{
                width: 500px;
                height: 200px;
                right: 0%;
                top: 14rem;
                background-size: contain; /* Resize the background image to cover the entire container */

    
            }
            .sidePic13{
                top:4rem;
                left:0rem;
            }
            .aqua {
                position: absolute;
                top: 13rem;
                left: 4rem;
            }
            .sidePic16 {
                top: 11rem;
                right: -2rem;
            }
            .sidePic17 {
        
                top: 37rem;
                left: 3rem;
            }
            .aqua2 {
                position: absolute;
                top: 57.7rem;
                left: 17rem;
            }
            .sideTop{
                position:absolute;
                top:28rem;
                left:9rem;;
                    }
                    .sideTop2{
                        top:16rem;
                            }

        .footer{
            top:122rem;
        }
        .addSpace2{
            top:-4rem;
        }
        .addSpace3{
            top:7rem;
        }
        }

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .footerText{
        left:25%;
    }
    .footer{
        height:6rem;
    }
    .addSpace88{
        position:relative;
        top:14rem;
    }
    nav {
        font-family: monospace;
        position:relative;
        width:1000px!important;
        left:9.5%;
        transform: scaleX(1.25); /* Equal to scaleX(0.7) scaleY(0.7) */
      }
      .sideArticle{
        left:5%!important;
        top: 33rem;
        width:17rem;
        height:85rem;
    }

    
.mainContent{
    width:700px;
    padding-left:1rem;
    right:9%;
    top:4rem;
    
        }
        .rowIMG{
            width: 900px;
            height: 300px;
            position: absolute;
            left: -5%;
          }
          .rowIMG2{
            width: 900px;
            height: 300px;
            position: absolute;
            left: -5%;
            top:20rem;
          }
          .columnIMG {
            float: left;
            width: 200px;
            padding: 5px;
          
          }
        .sidePic1{
            width:250px;
            height:150px;
        }
        .sidePic2{
            width:250px;
            height:150px;
        }
        .sidePic3{
            width:250px;
            height:150px;
        }
        .sidePic4{
            width:250px;
            height:150px;
        }

        .sidePic5{
            width:100px;
            height:75px;
            left:0%;
            top:0%;
        }
        .sidePic6{
            width:100px;
            height:75px;
            left:25%;
            top:0%;
        }
        .sidePic7{
            width:100px;
            height:75px;
            right:25%;
            top:0%;

        }
        .sidePic8{
            width:100px;
            height:75px;
            right:0%;
            top:0%;

        }

        .sidePic9{
            width:250px;
            height:150px;
            left:1rem;
            top:10rem;
        }
        .sidePic10{
            width:250px;
            height:150px;
            right:10rem;
            top:10rem;
        }
        .sidePic11{
            width:400px;
            height:300px;
            right:32.5%;
            top:20rem;

        }
        .sidePic12{
            width: 700px;
            height: 200px;
            right: 0%;
            top: 14rem;

        }
        .sidePic13{
            width: 700px;
            height: 300px;
            right: 4%;
            top: 5rem;

        }
        .sideTop{
            position:absolute;
            top:18rem;
            left:7rem;
                }
}