.banner
	{
		width:100%;
		height:550px;
		background-image:url("../images/CSR.jpg");
		background-position:center center;
		background-size:cover;
		top: 0;
		left: 0;
		opacity:1;	
	}
#content                    /* start content */
	{
		margin-top:20px;
	}
.green
	{
		margin-top:20px;
		margin-bottom:20px;
	}
.greenimg
	{
		width:300px;
		float:left;
	}
.greenimg img
	{
		border-radius:15px;
	}
.greencontent
	{
		width:740px;
		float:right;
	}
.plants img
	{
		display:inline-block;
		float:Left;
		padding-right:20px;
		box-sizing:border-box;
		border-radius:10px 25px 25px 10px;
		margin-bottom:20px;
	}
.lightbox-target /* background */{
		position: fixed;
		/* top: -100px; */
		background: rgba(0,0,0,.7);
		width: 100%;
		opacity: 0;
		left:0;
		-webkit-transition: opacity .5s ease-in-out;
		-moz-transition: opacity .5s ease-in-out;
		-o-transition: opacity .5s ease-in-out;
		transition: opacity .5s ease-in-out;
		overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
		margin:  auto;
		position: absolute;
		top: 0;
		left:0;
		right:0;
		bottom: 0;
		width: 70%;
		height:70%;
		box-shadow: 0px 0px 18px rgba(0,0,0,.1);
		box-sizing: border-box;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
}

 /* Styles the close link, adds the slide down transition */

a.lightbox-close {
		display: block;
		width:50px;
		height:50px;
		box-sizing: border-box;
		background: white;
		color: black;
		text-decoration: none;
		position: absolute;
		top:100px;
		left: 0;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
		content: "";
		display: block;
		height: 30px;
		width: 1px;
		background: black;
		position: absolute;
		left: 26px;
		top:10px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
		content: "";
		display: block;
		height: 30px;
		width: 1px;
		background: black;
		position: absolute;
		left: 26px;
		bottom:10px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
		opacity: 1;
		top: 0;
		bottom: 0;
}

/* .lightbox-target:target img {
		max-height: 100%;
		max-width: 100%;
}
 */
.lightbox-target:target a.lightbox-close {
		/* top: 80px; */
		left:95%;
}
@media screen and (min-width: 320px) and (max-width: 480px){
.greenimg
	{
		max-width:400px;
		width:100%;
		text-align:center;
	}
.greenimg img
	{
		width:300px;
	}
.greencontent
	{
		max-width:440px;
		width:100%;
	}
.plants
	{
		max-width:440px;
	}
}

@media screen and (min-width: 481px) and (max-width: 767px)
{
.greenimg
	{
		max-width:700px;
		width:100%;
		text-align:center;
	}
.greencontent
	{
		max-width:700px;
		width:100%;
	}
.plants
	{
		max-width:700px;
	}
}