.top-text{display: none;}
.hcaption1{font-size:6.4em; line-height:1.2;}
.hcaption2{font-size:4.8em; line-height:1.2;}
.hcaption3{font-size:3.2em; line-height:1.2;}
.txt-white{color: #ffffff;}
.txt-white-green{color:#ffffff;}
.txt-intro{font-size:18px; line-height:1.6;}
.section-title-head{margin-left:3.5em;}
.top-cta{float:right; padding-top:1em;}
@media only screen and (max-width: 767px) {
	.top-text{
		display: block;
		position: absolute;
		top: 30%;
		left: 36%;
		font-size: 20px;
	}
	.top-text h4{color: #ffffff;}
	.top-cta{display: none;}
	.hcaption1{font-size:4em; line-height:1.2;}
	.hcaption2{font-size:2.8em; line-height:1.2;}
	.hcaption3{font-size:2.8em; line-height:1.2;}
	/*.txt-white-green{color:#75611c;}*/
	.txt-white-green{color:#ffffff;}
	.txt-intro{font-size:22px; font-weight:600;}
	.section-title-head{margin-left:0;line-height:1.2;}
	.mg-box{margin:0 1em;}
}

.hero-image {
	background-image: linear-gradient(rgba(248, 11, 122, 0.3), rgba(248, 11, 122, 0.3)), url("../images/hydrate-jumbo.jpg");
	/* background-image: linear-gradient(rgba(252, 221, 86, 0.6), rgba(250, 221, 86, 0.6)), url("../images/hydrate-jumbo.jpg"); */
  /* main----background-image: linear-gradient(rgba(248, 11, 122, 0.3), rgba(248, 11, 122, 0.3)), url("../images/hydrate-jumbo.jpg"); */
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-image-mobi {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/hydrate-jumbo.jpeg");
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
  }

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}
.hero-text h1{
        font-size:80px; line-height: 1.2;
    }

@media (max-width: 767px){
    .hero-text h1{
        text-align:center;
        font-size:68px;
    }
}

.bond-layer{
	/* background: #D1913C; */
	/* background: -webkit-linear-gradient(to right, #FFD194, #D1913C); */
	/* background-image: url("../images/hydrate-hero.jpeg");  */
	/* background: linear-gradient(
    to bottom,
    rgba(255, 201, 122, 0.6),
    rgba(0,0,0, 0.9)
  ),url("../images/hydrate-hero.jpeg"); */
	/* background-image: url("../images/hydrate-hero.jpeg"), linear-gradient(blue, yellow); */
	background-image: linear-gradient(to bottom,  rgba(238, 62, 86, 0.5), rgba(255, 201, 122, 0.7)),url("../images/hydrate-hero.jpeg"); 
	/* background-image: linear-gradient(to right, #ffca7b, #ee3d55),url("../images/hydrate-hero.jpeg");  */

	/* background-image: linear-gradient(rgba(95, 3, 60, 0.6), rgba(240, 62, 166, 0.6)), url("../images/hydrate-hero.jpeg"); */
	/* background-image: linear-gradient(rgba(243, 210, 61, 0.4), rgba(250, 221, 86, 0.4)), url("../images/hydrate-hero.jpeg"); */
	/*pre background-image: linear-gradient(rgba(252, 221, 86, 0.6), rgba(250, 221, 86, 0.6)), url("../images/hydrate-hero.jpeg"); */
	/* background-image: linear-gradient(rgba(243, 145, 205, 0.6), rgba(240, 150, 202, 0.6)), url("../images/hydrate-hero.jpeg"); */
}
.bond-layer-dark{
    /*background-image: linear-gradient(to bottom,  rgb(238, 62, 86, 0.8), rgba(255, 201, 122, 0.8)); */
    /*background-image: -webkit-linear-gradient(to bottom,  rgb(238, 62, 86, 0.8), rgba(255, 201, 122, 0.8)),url("../images/hydrate-hero.jpeg"); */
    background-image: linear-gradient(to bottom,  rgba(238, 62, 86, 0.8), rgba(255, 201, 122, 0.8)),url("../images/hydrate-hero.jpeg"); 
}
@media (max-width: 767px){
    .bond-layer{
        background-image: linear-gradient(rgba(238, 62, 86, 0.5), rgba(255, 201, 122, 0.7)),url("../images/hydrate-hero.jpeg"); /* removed to bottom,  for some screen size and browser issues*/
    }
    .bond-layer-dark{
        background-image: linear-gradient(rgba(238, 62, 86, 0.9), rgba(255, 201, 122, 0.9)),url("../images/hydrate-hero.jpeg"); 
    }
}
.rose-bond{
	background: #700330;
	background: #d40c60;/*--default-best-picked*/
	background: #d4af37;
	background: #ffcbc8; /* rose plain variation */
	background: #C02E4C; /* old rose */
	/* background: #c02e4c */
}
.gold-bond{
	/* background: #e4c357; */
	background: url("../images/metallic-gold-bg.jpg");
}
.black-bond {
	background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.92)), url("../images/hydrate-hero.jpeg");
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.mobi-off-mtop{margin-top:5em;}

.brand-image img {    
    /* max-width: 377px; */
    position: absolute;
    top: 0;
	width: 50%;
	/* height: 100%; */
}
.brand-image-hero img {    
    width: 45%;
	height: 100%; 
}
.brand-image-post img{
    width: 50%;
	/*height: 20%; */
}
.brand-image-mobile{display: none;}
.brand-image-mobile-2{display: none;}
.title-mini{font-size:48px;}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.mobi-off-mtop{margin-top:0;}
	.brand-image img { max-width: 300px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .brand-image img { max-width: 200px;}
}
@media (max-width: 767px){
	/* .brand-image img { width: 100%;} */
	.brand-image img {display:none;}
	.brand-image-mobile{display: block; width: 36.5em}
	.brand-image-mobile img {width: 100%; margin-left: -8em;}
	.brand-image-mobile-2{display: block; width: 38em}
	.brand-image-mobile-2 img {width: 65%;}
	/* .img-mobi-center{width: 48em;}
	.img-mobi-center img{width: 100%;} */
	
	.mobi-off-mtop{margin-top:0;}
	.title-mini{font-size:28px;}
	.brand-image-post img{width: 100%; height:100%;}
}


.btn-01{
	font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0 auto;
	display:inline-block;
    padding: 12px 40px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
	transition: color 0.3s ease 0s, background 0.3s ease 0s;
	-ms-transition: color 0.3s ease 0s, background 0.3s ease 0s;
	-webkit-transition: color 0.3s ease 0s, background 0.3s ease 0s;
	-moz--webkit-transition: color 0.3s ease 0s, background 0.3s ease 0s;
	-o--webkit-transition: color 0.3s ease 0s, background 0.3s ease 0s;	
}

/* 6.1-White border button style */
.btn-01 {border: 3px solid #FFFFFF; border-radius: 3.8em; color: #fff !important;}
.btn-01:hover {background-color: #FFFFFF;color: #212121 !important;}

.footer .footer-lnks-col{
	margin-top: 2em;
	/* margin-left: 3em; */
}

.footer .footer-lnks-col .footer-lnks{
	color: #ffffff;
	font-size: 18px;
}
.footer .mobi-off{
	display: block;
}
.footer .mobi-on{
	display: none;
}


@media (max-width: 767px){
	.footer .footer-lnks-col{
		margin-top: 5px;
	}
	.footer .mobi-off{
		display: none;
	}
	.footer .mobi-on{
		display: block;
	}
}


.blc-qoute {
    color: #30343c;
    font-size: 16px;
    position: relative;
	margin:10px 60px 6px;
}
.blc-qoute p {
    font-size: 24px;
	line-height:30px;
}
.blc-qoute::before {
    color: #212121;
    content: "\f10d";
    font-family: "FontAwesome";
    font-size: 30px;
    left: -40px;
    position: absolute;
    top: 0;
}
@media only screen and (max-width: 767px) {
	.blc-qoute {margin:10px 60px 1px;}
	.blc-qoute p {font-size:18px;line-height:24px;}
}
@media only screen and (max-width: 320px){
	.blc-qoute {margin:30px 40px 30px;}
	.blc-qoute p {font-size:16px;line-height:22px;}
}
.p-big{font-size: 18px; line-height: 1.8; color: #252525;}
/* .product-wrap img{
	height: 350px; width: 420px;
}
.product-wrap img{
	height: 75%;
} */


.product-wrap img{
	min-height:220px;
	max-height:220px;
}

/*--------------------------------------------------*/
.swiper-container{
    backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.swiper-wrapper {
	background: url(../images/ydrate-jumbo.jpeg);
    position: relative;
    transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-moz-transform: translate3d(0px, 0px, 0px);
    transition-duration: 0s;
	-webkit-transition-duration: 0s;
    transition-property: transform, left, top;
	-webkit-transition-property: transform, left, top;
    transition-timing-function: ease;
	-webkit0transition-timing-function: ease;
    width: 100%;
}
.swiper-slide {
    float: left;
    position: relative;
	cursor: grab;
}
.slide-1-color{background-color:rgba(34,41,48,.4);}
.slide-2-color{background-color:rgba(78,177,186,.4);}
.slide-3-color{background-color:rgba(255, 140, 29, 0.4);}


.slider {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 100% !important;
}
.slider.content {
    float: left;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    width: 100% !important;
}

.swiper-slide {
    background-position: center center;
    background-size: cover;
	-webkit-background-size: cover;
}

.swiper-slide .slider-teaser {
    left: 50%;
    margin-left: -310px;
    margin-top: -7%;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(150px, 0px);
	-webkit-transform: translate(150px, 0px);
	-moz-transform: translate(150px, 0px);
    transition: all 1.2s ease-in-out .5s;
	-webkit-transition: all 1.2s ease-in-out 0s;
	-moz-transition: all 1.2s ease-in-out 0s;
	-o-transition: all 1.2s ease-in-out 0s;	
    width: 620px;
    z-index: 100;
}

.swiper-slide.swiper-slide-active .slider-teaser {
    opacity: 1;
    transform: translate(0px, 0px);
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	transition: all 1.2s ease-in-out 0s;
	-webkit-transition: all 1.2s ease-in-out 0s;
	-moz-transition: all 1.2s ease-in-out 0s;
	-o-transition: all 1.2s ease-in-out 0s;	
}

.swiper-slide .slider-teaser .slider-teaser-text p {
    display: block;
    float: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 8px 0 35px;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
    width: 100%;
	color:#fff;
}


/* ==== Slider pagination dots ==== */

.pagination {
    bottom: 10px;
    left: 50%;
    position: absolute;
    text-align: center;
    width: auto;
    z-index: 100;
}
.swiper-pagination-switch {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #fff;
    border-radius: 10px;
	-webkit-border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 0 3px;
    width: 10px;
}
.swiper-active-switch {
    background: none repeat scroll 0 0 #fff;
}

/* ==== End Slider pagination dots ==== */

/* ==== Slider bottom arrow ==== */

.arrow {
    bottom: 20px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 3;
}
.arrow-right2 {    
    position: absolute;
    right: 6%;
    top: 50%;
	font-size:60px;
    transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;    
    z-index:99;
}
.arrow-left2 {
    left: 6%;
    position: absolute;
    top: 50%;
	font-size:60px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
    z-index:99;
}
.arrow-left2:hover {
    color:rgba(0,0,0,.5)
}
.arrow-right2:hover {
    color:rgba(0,0,0,.5)
}

/*Swiper slider nav arrow style 2*/

.arrow-right {    
    height: 30px;
    position: absolute;
    right: 6%;
    top: 50%;
    transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;    
    z-index:99;
}
.arrow-left {
    height: 30px;
    left: 6%;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
    z-index:99;
}
.arrow-left:after{
	content: "\f053";
    font-family: 'FontAwesome';
}
.arrow-right:after{
	content: "\f054";
    font-family: 'FontAwesome';
}
.arrow-left:hover {
    transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
}
.arrow-right:hover {
    transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
}

/* ==== End Slider bottom arrow ==== */
@media (max-width: 768px) {
	.swiper-slide .slider-teaser {left:0%;width:100%;margin:0 auto;padding:0 40px;top:38%;}
}


.swiper-mockup{
	position:absolute;
	right:20%;
	width:100%;
	bottom:-150px;
	width:280px;
	z-index:100;
}
.swiper-mockup img{
	max-width:100%;
}
.swiper-slide3{
	left:10% !important;	
	margin-left:0 !important;
	margin-top:0px !important;
	position: absolute;
	text-align:left !important;
	top: 30% !important;	
	transition: all 1.2s ease-in-out 0s;
	-webkit-transition: all 1.2s ease-in-out 0s;
	-moz-transition: all 1.2s ease-in-out 0s;
	-o-transition: all 1.2s ease-in-out 0s;	
	transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	width: 420px !important;
	z-index: 100;
}
.swiper-slide3 h1{
	line-height:60px !important;
}
.swiper-slide3 .intro-text{
	font-size:16px;
}

#home-swiper3 .arrow-left,#home-swiper3 .arrow-right{color:#fff !important;}

@media only screen and (max-width: 992px) {
	.swiper-mockup{display:none;}
	.swiper-slide3 {
		left: 0 !important;
		margin: 0 auto;
		padding: 0 80px !important;
		top: 30% !important;
		width: 100% !important;
		text-align:center !important
	}
}

@media (max-width: 480px) {
.swiper-slide3{
	left:15% !important;	
	width: 75% !important;	
	padding: 0 20px !important;
}
.swiper-slide3 h1{
	font-size:20px !important;
	line-height:20px !important;
}
	
}