.flex-slide:hover .flex-title {
	color: #fff;
	font-weight: 700;
	top: 15% !important;
}
.flex-container {
	height: 500px;
	width: 100%;
	display: -webkit-flex;
	/* Safari */
	display: flex;
	overflow: hidden;
	
}
@media screen and (max-width: 767px) {
.flex-container {
	flex-direction: column;
}
}
.flex-title {
	font-family: 'Poppins', sans-serif;
	color: #c0c0c0;
	position: relative;
	font-size: 30px;
	font-weight: 700;
	margin: auto;
	text-align: center;
	transform: rotate(0deg) !important;
	top: 45% !important;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
.flex-title {
	transform: rotate(0deg) !important;
}
}
.flex-about {
	opacity: 0;
	color: #f1f1f1;
	position: relative;
	width: 90%;
	font-size: 2vw;
	padding: 3px;
	top: 0%;
	border: 5px solid #fff;
	line-height: 1.3;
	margin: auto;
	text-align: left;
	transform: rotate(0deg);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
 @media screen and (max-width: 768px) {
.flex-about {
	
	border: 3px solid #f1f1f1;
}
}
.flex-slide {
	-webkit-flex: 1;
	/* Safari 6.1+ */
	-ms-flex: 1;
	/* IE 10 */
	flex: 1;
	cursor: pointer;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	border-right: 2px solid #000;
}
.flex-slide:last-child {
	border: none;
}
@media screen and (max-width: 768px) {
.flex-slide {
	overflow: auto;
	overflow-x: hidden;
}
}
 @media screen and (max-width: 768px) {
.flex-slide p {
	font-size: 2em;
}
}
 @media screen and (max-width: 768px) {
.flex-slide ul li {
	font-size: 2em;
}
}
.flex-slide:hover {
	-webkit-flex-grow: 3 !important;
	flex-grow: 3 !important;
}

@media screen and (min-width: 768px) {
.faucet {
	-moz-animation: aboutFlexSlide;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 0s;
	-webkit-animation: aboutFlexSlide;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	animation: aboutFlexSlide;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-delay: 0s;
}
}
 @keyframes aboutFlexSlide {
 0% {
 -webkit-flex-grow: 1;
 flex-grow: 1;
}
 50% {
 -webkit-flex-grow: 3;
 flex-grow: 3;
}
 100% {
 -webkit-flex-grow: 1;
 flex-grow: 1;
}
}
@media screen and (min-width: 768px) {
.flex-title-faucet {
	transform: rotate(90deg);
	top: 45%;
	-moz-animation: homeFlextitle;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 0s;
	-webkit-animation: homeFlextitle;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	animation: homeFlextitle;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-delay: 0s;
}
}
 @keyframes homeFlextitle {
 0% {
 transform: rotate(90deg);
 top: 15%;
}
 50% {
 transform: rotate(0deg);
 top: 15%;
}
 100% {
 transform: rotate(90deg);
 top: 15%;
}
}
.flex-about-faucet {
	opacity: 0;
}
@media screen and (min-width: 768px) {
.flex-about-faucet {
	-moz-animation: flexAboutHome;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 0s;
	-webkit-animation: flexAboutHome;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	animation: flexAboutHome;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-delay: 0s;
}
}
 @keyframes flexAboutHome {
 0% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
.faucet {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bnr-bg-1.jpg) no-repeat;
	background-position:center center;
	background-size: cover;
	
}
.shower {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bnr-bg-3.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	
}
.sink {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bnr-bg-2.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	
}
.main-others
{
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/bnr-other.jpg) no-repeat;
	background-position:center center;
	background-size: cover;
}