#slider { float:left; width:100%; height:750px;
background:
url('../images/home-banner-sky-background.png');
background-repeat:no-repeat;
background-position:left 0 bottom 80%;
background-size: cover;}

.slider  { float:left; width:100%;}

#slider .owl-dots { display: none;}

.slide1  { float:left; width:100%; height:750px;}
.slide1 .wrapper { display:table; }

.slide1 {
background:
url('../images/slide/van.png'),
url('../images/slide/houses.png'),
url('../images/slide/buildings-background.png'),
url('../images/slide/road-background.png');
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:left 15% bottom 8%,left 50% bottom 9%,left 60% bottom 12%,left 0 bottom 0%;
background-size:auto auto,auto auto,auto auto,100% auto;
animation: animatevan 4s normal 1;}

@keyframes animatevan {
    from {background-position:left -50% bottom 8%,left 50% bottom 9%,left 60% bottom 12%,left 0 bottom 0%;}
    to {background-position:left 15% bottom 8%,left 50% bottom 9%,left 60% bottom 12%,left 0 bottom 0%;}
}

.slide-text { vertical-align: top; display:table-cell; text-align: center; height:750px; padding:25px 0 0;}
.slide-text h2 { font-size:35px; line-height:50px; color:#fff; margin:0px; padding:0px;}
.slide-text h3 { font-size:24px; line-height:30px; color:#c4faff;margin:30px 0; padding:0px; font-weight: bold; }
.slide-text p { font-size:21px; line-height:30px; color:#57595c; margin:30px 0; padding:0px; display:inline-block;}
.slide-text p b { font-weight: bold; }
.slide-text p span img { width:auto !important; display:inline-block !important;}
.slide-text .btn { float:left; width:100%; margin:0;}
.slide-text .btn a {background: #1e6aaf url('../images/slide/phone.png'); color:#fff; background-repeat: no-repeat; border-radius:30px; background-position: top 14px left 20px;padding:12px 30px 12px 60px;
font-size:19px; margin:0; font-weight: normal; display:inline-block; font-family: 'TREBUCBD';}
.slide-text .btn a:hover  {background:#2d1d1c url('../images/slide/phone.png'); background-repeat:no-repeat; background-position:top 14px left 20px;}

.lifestyle {
background-image: 
url('../images/slide/wireless.png'),
url('../images/slide/10year-guarantee.png'),
url('../images/slide/wb-logo-banner.png'),
url('../images/slide/white-strip.png'),
url('../images/slide/greenstar-lifestyle-range-banner.jpg');
background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, no-repeat;
background-position: left 5% top 30%, right 2% top 20%, left 4% bottom 0%, left 0% bottom 0%, left 50%  bottom 	0%; 
background-size: auto auto, auto auto, auto auto, auto auto, cover;}
.lifestyle {float:left; width:100%; height:750px; position:relative;}
.lifestyle .wrapper{width:1170px; float:none; margin:0 auto; position:relative; display:table;}
.lifestyle .txtblock{display:table-cell; vertical-align:top; padding:12% 0 0; height:750px; width:30%;}
.lifestyle .txtblock h2{color:#252525; font-size:50px; line-height:60px; font-family: 'Montserrat Bold'; padding:0; margin:0;}
.lifestyle .txtblock p {color:#252525; font-size:30px; line-height:40px; font-family: 'Montserrat Regular'; padding:0; margin:20px 0;}
.lifestyle .txtblock p span{font-weight:bold;}
.lifestyle .txtblock a.btn{font-size:22px; display:inline-block; background:#000 url('../images/slide/btn-arrow.png') no-repeat right 8% top 50%; border-radius:25px; color:#fff; font-family: 'Montserrat Regular'; padding:10px 60px 10px 30px; margin:0; text-decoration:none;}
.lifestyle .txtblock a.btn:hover {background:#6bf3ff url('../images/slide/btn-arrow.png') no-repeat right 8% top 50%;}

@media only screen and ( max-width:1750px) {
.lifestyle .wrapper{width:50%;}	
}

@media only screen and ( max-width:1620px) {

}

@media only screen and ( max-width:1500px) {
.lifestyle .wrapper{width:50%;}	
.lifestyle {
background-position: left 6% bottom 50%, right 2% top 50%, left 5% bottom 0%, left 0% bottom 0%, right 20% top 0%; 
background-size:auto auto, auto auto, auto auto, auto auto, cover;}
}

@media only screen and ( max-width:1400px) {
.slide-text h2 { font-size:40px; line-height:50px; }
.slide-text p { font-size:20px;}

.slide1 {background-position:left 6% bottom 6%,left 60% bottom 7%,left 70% bottom 10%,left 0 bottom 0%;}
}

@media only screen and ( max-width:1300px) {
.lifestyle .txtblock h2{font-size:40px; line-height:35px;}
.lifestyle .txtblock p{font-size:20px; line-height:28px;}
.lifestyle .txtblock a.btn{font-size:20px;}

.slide1,.slide-text ,.lifestyle,.lifestyle .txtblock { height:700px;}


}

@media only screen and ( max-width:1200px) {
.slide-text {padding:20px 0 0;}

.slide1,.slide-text,.lifestyle,.lifestyle .txtblock { height:600px;}

.slide1 {
background-position:left 6% bottom 6%,left 60% bottom 7%,left 70% bottom 10%,left 0 bottom 0%;
background-size:16% auto,60% auto,60% auto,100% auto;}
.slide-text h2 { font-size:40px; line-height:50px; }

.lifestyle .wrapper{width:100%;}	
.lifestyle .txtblock{height:400px; text-align:center;}

.lifestyle {
background-image: 
url('../images/slide/wireless.png'),
url('../images/slide/10year-guarantee.png'),
url('../images/slide/wb-logo-banner.png'),
url('../images/slide/white-strip.png'),
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/greenstar-lifestyle-range-banner.jpg');
background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, no-repeat;
background-position: left 5% top 40%, right 2% bottom 50%, left 5% bottom 3%, left 0% bottom 0%, left 0% top 0%, left 90% top 0%; 
background-size:9% auto, 13% auto, 12% auto, auto auto, 100% 100%, cover;}
.lifestyle .txtblock h2{color:#fff; font-size:30px; line-height:30px;}
.lifestyle .txtblock p{color:#fff; font-size:16px; line-height:22px;}
.lifestyle .txtblock a.btn{font-size:20px;}
}

@media only screen and ( max-width:1050px) {
.slide1 {
background-position:left 6% bottom 5%,left 70% bottom 6%,left 90% bottom 8%,left 0 bottom 0%;
background-size:16% auto,60% auto,60% auto,100% auto;}
.slide-text h2 { font-size:30px; line-height:40px; }
.slide-text h3 { font-size:21px; line-height:30px;}
.slide-text p { font-size:18px;}
}

@media only screen and ( max-width:900px) {
.slide1 {
background-position:left 6% bottom 4%,left 70% bottom 5%,left 90% bottom 6%,left 0 bottom 0%;
background-size:16% auto,60% auto,60% auto,100% auto;}
.slide-text h2 { font-size:26px; line-height:35px; }
.slide-text h3 { font-size:19px; line-height:30px;}
}

@media only screen and ( max-width:768px) {
.slide1,.slide-text,.lifestyle,.lifestyle .txtblock { height:500px;}
.slide-text h2 { font-size:22px; line-height:30px; }
.slide-text h3 { font-size:17px; line-height:26px;}
.slide-text p { font-size:16px; line-height:25px; color:#fff;}
.slide-text p span img { width:30% !important;}
.slide-text h2 br { display:none;}
}

@media only screen and ( max-width:640px) {
.slide1 {
background-position:left 6% bottom 4%,left 70% bottom 4%,left 90% bottom 5%,left 0 bottom 0%;
background-size:16% auto,60% auto,60% auto,100% auto;}
}

@media only screen and ( max-width:560px) {
.slide-text h2 { font-size:20px; line-height:30px; }
.slide-text h3 { font-size:16px; line-height:26px;}
.slide1 {
background-position:left 6% bottom 3%,left 70% bottom 4%,left 90% bottom 4%,left 0 bottom 0%;
background-size:16% auto,60% auto,60% auto,100% auto;}
}

@media only screen and ( max-width:480px) {	
.lifestyle {background-position: left 5% bottom 50%, right 2% bottom 15%, left 5% bottom 0%, left 0% bottom 0%, left 0% top 0%, left 90% top 0%; 
background-size:16% auto, 24% auto, 20% auto, auto auto, 100% 100%, cover;}
.lifestyle .txtblock h2{font-size:20px; line-height:20px;}
.lifestyle .txtblock p{font-size:16px; line-height:22px;}
.lifestyle .txtblock a.btn{font-size:15px;}

.slide1 {
background-position:left 6% bottom 3%,left 70% bottom 3%,left 90% bottom 3%,left 0 bottom 0%;
background-size:16% auto,58% auto,58% auto,100% auto;}
}

@media only screen and ( max-width:400px) {	
.slide1,.slide-text,.lifestyle,.lifestyle .txtblock { height:400px;}
.slide-text h2 { font-size:18px; line-height:30px; }
.slide-text h3 { font-size:15px; line-height:26px;}
.slide-text p { margin:20px 0; font-size:15px; line-height:22px;}
.slide-text h3 { margin:15px 0;}
.slide-text .btn a,.slide-text .btn a:hover {background-position: top 9px left 20px; padding: 10px 30px 10px 50px;font-size: 16px; background-size: 10%;}	
}














