/*------------Works------------ */

/*Styles for Be an Eco Hero*/

.close-tab{
	padding-right: 30px;
	padding-top: 30px;
	display: flex;
	justify-content: end;
	background: #292828;
}

.meta-project-title{
	color: #FFF;
	position: relative;
	text-align: center;
	margin-bottom: 1em;
	margin-top: 120px;
}

.meta-project-title h1{
	font-size: 38px;
	font-weight: 500;
}

.meta-project-title h2{
	font-size: 18px;
	font-weight: 300;
}

.horizontal-line-container {
    width: 100%;
    padding: 25px;
}

.horizontal-line {
    width: 100%;
    border-top: 0.2px solid #444;
}

.video {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: #292828;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; 
	width: 100%; 
	max-width: 100%; 
}

.img-wrapper {
	position: relative;
	padding-bottom: 6%; 
	width: 100%; 
	max-width: 100%; 
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.content-description{
	margin-top: 50px;
	color: #FFF;
	position: relative;
	text-align: center;
	margin-bottom: 1em;
}

.content-description h4{
	font-size: 30px;
	font-weight: 300;
}

.content-description p{
	padding-top: 25px;
	text-align: center;
	padding-left: 100px;
	padding-right: 100px;
	font-size: 20px;
	font-weight: 200;
}

.ov-img{
	padding-left: 100px;
	padding-right: 100px;
	margin-top: 50px;
}

.meta-sub-title-1{
	margin-top: 50px;
	color: #FFF;
	position: relative;
	font-size: 35px;
	text-align: left;
	margin-bottom: 1em;
	margin-left: 50px;
}

.DS-main{
	margin-top: 50px;
	padding-left: 100px;
	padding-right: 100px;
}

.content-ds-1{
	font-size: 45px;
	color: #fff;
	font-weight: 300;
}

.content-ds-2{
	font-size: 16px;
	color: #a7a7a7;
	font-weight: 300;
}

.DS-img{
	margin-top: 50px;
	padding-left: 100px;
	padding-right: 100px;
}

.bts-main{
	margin-top: 50px;
	padding-left: 100px;
	padding-right: 100px;
	
}

.content-bts-1{
	font-size: 45px;
	color: #fff;
	font-weight: 300;
}

.bts-img{
	margin-top: 20px;
	padding-left: 100px;
	padding-right: 100px;
}

.ct-main{
	margin-top: 50px;
	padding-left: 100px;
	padding-right: 100px;
}

.content-ct-1{
	font-size: 45px;
	color: #fff;
	font-weight: 300;
}

.content-ct-2{
	font-size: 20px;
	color: #a7a7a7;
	font-weight: 300;
}

.suggest-head{
	padding-left: 100px;
	padding-right: 100px;
	font-size: 25px;
	color: #fff;
	font-weight: 300;
}

.sg-img{
	margin-top: 20px; 
	margin-bottom: 25px;
	padding-left: 100px;
	padding-right: 100px;
}

.copyright p{
	font-size: 20px;
}

img{
	-webkit-user-drag: none;
	user-select: none;
	-moz-user-select: none;
	pointer-events: none;
}

/*responsive for (768px) screens-horizondal line*/
@media screen and (max-width: 768px) {
    .horizontal-line-container {
        padding: 10px;
    }
}

/*responsive for Small Device*/
@media screen and (max-width: 768px) {

	.close-tab{
		padding-right: 10px;
	}

	.content-description h4{
		font-size: 22px;
		padding: 10px;
	}

	.content-description p{
		margin-top: 10px;
		padding:10px;
		position: relative;
		width: 100%;
		font-size: 18px;
		text-align: center;
		margin-bottom:0;
	} 

	.ov-img{
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 20px;
	}

	.DS-main{
		margin-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.content-ds-1{
		font-size: 30px;
		font-weight: 300;
	}
	
	.content-ds-2{
		font-size: 14px;
		font-weight: 300;
		line-height: normal;
		text-align: justify;
	}

	.DS-img{
		margin-top: 0;
		padding: 20px;
	}

	.bts-main{
		margin-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.content-bts-1{
		font-size: 30px;
		font-weight: 300;
	}

	.bts-img{
		margin-top: 0;
		padding: 20px;
	}

	.ct-main{
		margin-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.content-ct-1{
		font-size: 30px;
		font-weight: 300;
	}

	.content-ct-2{
		font-size: 14px;
		font-weight: 300;
	}

	.content-ct-2 p{
		margin-top: 20px;
	}

	.suggest-head{
		margin-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 15px;
		font-weight: 300;
	}

	.sg-img{
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 10px; 
		margin-bottom: 25px;
	}

	.copyright p{
		font-size: 15px;
	}
}

/*responsive for ultra-Small Device*/
@media screen and (max-width: 330px) {
	.content-bts-1{
		font-size: 25px;
	}

	.copyright p{
		font-size: 10px;
	}
}