.row-hero {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 50vh;
	min-height: 650px;  /* need this one for small width & short height mobile */
	/* width: 100vw; */
	width:1400px;
	margin:6rem auto 0 auto;
	position: relative;
	overflow: hidden;
}
.video {
	position: absolute;
	top: 50%;
	left: 50%;
	height: auto;
	width: auto;
	z-index: -1;
	transform: translateX(-50%) translateY(-50%);
	min-width: 100%;
	min-height: 100%;
}

.video_gradient {
    position: absolute;
    top: 0;
    height: 60%;
    width: 100%;
    background: linear-gradient(to bottom,#333,rgba(0,0,0,0) 100%);
}
/*--------- video quotation overlay text  ---------*/
.vquote-container {
	position: absolute;
    z-index: 1;	
	top: 50%;
	left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    width: 95%;
	display:grid;
	grid-template-columns:60% 40%;
	grid-template-rows:auto auto;
	grid-template-areas:
		"F11 F12" "F21 F21";
	max-width:1200px;
	margin:1rem auto;
	//background-color:blue;
	//border:3px solid white;
}
.g-VQ11 {
	grid-area: F11;
}
.g-VQ12 {
	grid-area: F12;
}
.g-VQ21 {
	grid-area: F21;
	text-align:left;
}
.vquote-item1 .vbutton {
	display:inline-block;
	color: white;
	font-size:1.5rem;
	text-decoration: none;
	border:2px solid;
	border-radius:3rem;
	padding:0.5rem 4rem;
	margin:1rem 0;
	background:#ffffff00;
	cursor: pointer;
}
.vquote-item1 {
}
.vquote-item1 .title {
	color:cornsilk;
	font-size:4rem;
	font-family: Roboto, sans-serif;
	text-align:left;
}
.vquote-item1 .p1{
	color:cornsilk;
	font-size:1.4rem;
	font-weight:450;
	text-align:left;
	line-height:2.5rem;
	margin:2.5rem auto;
}
.vquote-item2 {
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.vquote-item2 .p-group{
	position:relative;
	margin-bottom:3rem;
}
.vquote-item2 .divline{
	height:3px;
	width:12rem;
	text-align:left;
	margin:0 0 1rem 0;
	background:white;
}
.vquote-item2 .p-group .p1{
	color:cornsilk;
	text-align:left;
	font-size:1.5rem;
	line-height:1.5rem;
}
.vquote-item2 .p-group .p2{
	color:cornsilk;
	text-align:left;
	font-size:1.2rem;
	line-height:1.5rem;
}

/* 
.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)
*/
@media (min-width: 768px) and (max-width: 900px) {
	/*mid mobile */	
	.vquote-item1 .title {
		font-size:3rem;
	}

}

@media (min-width: 576px) and (max-width: 768px) {
	/*mid mobile */	
	.vquote-item1 .title {
		font-size:3rem;
	}
	.vquote-container {
		grid-template-columns:100%;
		grid-template-rows:auto auto;
		grid-template-areas:
			"F11" "F21";
		width:90%;
	}
	.g-VQ12 {
		display:none;
	}
	.g-VQ21 {
		/* display:none; */
	}	
}
@media screen and (max-width: 576px) {	/*mid mobile */	
	.vquote-item1 .title {
		font-size:3rem;
	}
	.vquote-container {
		grid-template-columns:100%;
		grid-template-rows:auto auto;
		grid-template-areas:
			"F11" "F21";
		width:90%;
	}
	.g-VQ12 {
		display:none;
	}
	.g-VQ21 {
		/* display:none; */
	}	
}