@charset "utf-8";
/* CSS Document */

  #containererdf{
       font-size:0;
	width:100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    }
  
    .grow {
	height: 250px; /* Origional height */
	width: 23%; /* Origional width */
	margin: 5px 1% 5px 1%; /* Just for presentation (Not required) */
	float: left; /* Just for presentation (Not required) */
	position: relative; /* Just for presentation (Not required) */
	transition:height 2s; /* Animation time */
	-webkit-transition:height 2s; /* For Safari */
	z-index:1000;
	
}
.grow:hover {
    height: 600px;
	margin-bottom:10; /* This is the height on hover */
}

.bgc1{
	background-image: url(images/ind1.png);
	background-repeat: no-repeat;
	
}

.bgc2{
	background-image: url(images/ind2.png);
	background-repeat: no-repeat;
}
.bgc3{
	background-image: url(images/ind3.png);
	background-repeat: no-repeat;
}
.bgc4{
	background-image: url(images/ind4.png);
	background-repeat: no-repeat;
}

@media screen and (max-width: 430px) {
    #containererdf{
        width:100%;
		margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    }
	 .grow {
	height: 200px; /* Origional height */
	width:100%; /* Origional width */
	margin: 5px 1% 5px 1%; /* Just for presentation (Not required) */
	float: left; /* Just for presentation (Not required) */
	position: relative; /* Just for presentation (Not required) */
	transition:height 0.5s; /* Animation time */
	-webkit-transition:height 0.5s; /* For Safari */
	background-attachment: fixed;
	background-position: center top;
	background-repeat: no-repeat;
}
.grow:hover {
    height: 515px; /* This is the height on hover */
}

.bgc1{
	background-image: url(images/ind1.png);
	background-repeat: no-repeat;
}

.bgc2{
	background-image: url(images/ind2.png);
	background-repeat: no-repeat;
	clip: rect(250px,auto,auto,auto);
	}
.bgc3{
	background-image: url(images/ind3.png);
	background-repeat: no-repeat;
}
.bgc4{
	background-image: url(images/ind4.png);
	background-repeat: no-repeat;
}




}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #containererdf{
        width:100%;
    }
	.grow {
	font-size:20px;
	width: 93%;
	height:250px;
	margin:15px;
	background: gold;
	display:inline-block;
	-webkit-transition-property: height; /* Safari */
    -webkit-transition-duration: 1s; /* Safari */
    transition-property: height;
    transition-duration: 1s;
}

.grow:hover {
	font-size:20px;
	width: 93%;
	height:600px;
	margin:15px;
	background: gold;
	display:inline-block;
	-webkit-transition-property: height; /* Safari */
    -webkit-transition-duration: 1s; /* Safari */
    transition-property: height;
    transition-duration: 1s;
}

.bgc1{
	background-image: url(images/ind1.png);
	background-repeat: no-repeat;
}

.bgc2{
	background-image: url(images/ind2.png);
	background-repeat: no-repeat;
	
}
.bgc3{
	background-image: url(images/ind3.png);
	background-repeat: no-repeat;
	
}
.bgc4{
	background-image: url(images/ind4.png);
	background-repeat: no-repeat;
}


}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #containererdf{
        width:600px;
    }
	.grow {
	font-size:20px;
	width: 100px;
	height: 100px;
	margin:15px;
	background: gold;
	display:inline-block;
}
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #containererdf{
        width:800px;
    }
}