environment.css

/*Title of category*/
.image-text{
    margin-top: 250px;
    width: 450px;
    text-align: right;   
}
.image-text h1{
    font-size: 60px;
    font-style: italic;
}
.image-text h2{ /*Subtitle*/
    font-size: 21px;
}
/*Image of category*/
.image-border{
    padding-top: 50px;
}
/*when screen>1350px move text*/
@media (min-width:1350px){
    #move{
        position: absolute;
    }
    .image-text{
        position: relative;
        margin-top: 100px;
    }
}
.image-border img{
    height: 530px;
    width: 100%;
}
/*Side picture*/
.green{
    margin-top: 80px;
}
.natural_effects{
    position: relative;
    margin-top: 60px;
    font-size: 20px;
}
.natural_effects h1{
    font-size: 35px;
}
.natural_effects h2{ /*Subtitle*/
    font-size: 21px;
}
hr{
    border-top: 1px solid black;
}
.air{
   padding-top: 7%;;
   height: 100%;
   font-size: 20px;
   text-align: center;
}
.air_fog{
  background-image: url("media/air_pollution.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.air_fog_text{
    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
}
.park1{
    padding-top:180px;
    padding-left:5%;
}
.park2{
    padding-top:180px;
    padding-left:5%;
}
.park3{
    padding-top:180px;
    padding-left:5%;
}
.water h1{
    padding-top:7%;
    text-align: center;
    font-size: 40px;
}
.water_text{
    padding-top: 100px;
    font-size: 20px;
}
.water_img{
    padding-top:25%;
}
.water_img1 {
    padding-top:25%;
}
@media (max-width:992px){
    .park1{
        padding-top:50px;
        padding-left: 10%;
    }
    .park2 , .park3{
        padding-top: 20px;
        padding-left: 10%;
    }
}
@media (min-width:1028px) and (max-width:1416px){
    .water_text{
        width: 50%;
    }

}
@media (min-width:993px) and (max-width:1028px){
    .water_text{
        width: 50%;
    }
    .water_img img,.water_img1 img{
       width: 400px;
       height: 300px;
    }
}
@media (min-width:2085px){
    .park1 img{
        width:500px;
    }
    .park2 img{
        width:500px;
    }
    .park3 img{
        width:400px;
    }
}
@media (min-width:452px) and (max-width:519px){
    .green img{
        width: 80%;
    }
    .water_img img,.water_img1 img{
        width: 400px;
        height: 300px;
    }
}
@media (min-width:300px) and (max-width:452px){
    .green img{
        width: 60%;
    }
    .water_img img,.water_img1 img{
        width: 300px;
        height: 200px;
    }
    .image-text{
        width: 250px;
        text-align: left;
    }
    .image-text h1{
        font-size: 40px;
    }
    .image-text h2{
        font-size: 15px;
    }
    .image-border img{
        height: 250px ;
    }
}
@media (min-width:1350px){
    .image-text{
        width: 430px;
    }
}
@media (max-width:1350px){
    .image-text{
        margin-top: 50px;
    }
}
@media (min-width:746px) and (max-width:1330px){
    .image-text , .image-border{
       margin-left: 100px;
    }
}
@media (min-width:1800px){
    .container{
        width: 1400px;
    }
}