@import url("lifestyle.css");

#slider { float:left; width:100%; position:relative; 
background-image:
url('../images/slide/slider-bg.png');
background-repeat: no-repeat;
background-position:left 0% bottom 40%; 
background-size:100% auto;}

#slider .wrapper {display:table;}

.slide1,.slide2,.slide3 {float:left; width:100%; height:450px;}

.slide1 { 
background-image:
url('../images/slide/slide1.png');
background-repeat: no-repeat;
background-position:right 22% top 0%; 
background-size:36% auto; }

.slide2 { 
background-image:
url('../images/slide/slide2.png');
background-repeat: no-repeat;
background-position:right 22% top 0%; 
background-size:36% auto; }

.slide3 { 
background-image:
url('../images/slide/slide3.png');
background-repeat: no-repeat;
background-position:right 22% top 0%; 
background-size:36% auto; }

.slide-text { display:table-cell; vertical-align:middle; height:450px; text-align: left}
.slide-text h1 { margin:0px; padding:0px; color:#00aeef; font-size:45px; line-height:50px;}
.slide-text h3 { margin:0px; padding:15px 0; color:#464647; font-size:26px; line-height:35px; font-weight:normal;}
.slide-text .btn { float: left; width:100%; margin:2% 0 0; }
.slide-text .btn a { background:#00aeef; color:#fff; border-radius:18px; padding:10px 22px; font-size:19px;font-family:'Montserrat Light';}
.slide-text .btn a:hover { background:#676564;}

@media only screen and ( max-width:1860px) {
.slide1 { background-position:right 20% top 0%;background-size:40% auto; }
.slide2 { background-position:right 20% top 0%;background-size:40% auto;}
.slide3 { background-position:right 20% top 0%;background-size:40% auto;}
}

@media only screen and ( max-width:1750px) {
.slide1 { background-position:right 0% top 0%;background-size:45% auto; }
.slide2 { background-position:right 0% top 0%;background-size:45% auto;}
.slide3 { background-position:right 0% top 0%;background-size:45% auto;}
}

@media only screen and ( max-width:1500px) {
.slide1,.slide2,.slide3,.slide-text {height:400px;}

.slide1 { background-position:right 0% top 0%;background-size:55% auto; }
.slide2 { background-position:right 0% top 0%;background-size:55% auto;}
.slide3 { background-position:right 0% top 0%;background-size:55% auto;}
}

@media only screen and ( max-width:1200px) {
.slide1,.slide2,.slide3,.slide-text {height:370px;}

.slide-text h1 {font-size:40px;line-height:40px;}
.slide-text h3 {font-size:22px;line-height:25px;}

}

@media only screen and ( max-width:1100px) {
.slide1,.slide2,.slide3,.slide-text {height:350px;}

.slide-text { text-align:center;}

.slide1 { 
background-image:
linear-gradient(rgba(0,109,169,0.7),rgba(0,109,169,0.7)),
url('../images/slide/slide1.png');
background-repeat: no-repeat, no-repeat;
background-position:left 0% top 0%, right 60% bottom 80%; 
background-size:100% 100%, auto 165%;}

.slide2 { 
background-image:
linear-gradient(rgba(0,109,169,0.7),rgba(0,109,169,0.7)),
url('../images/slide/slide2.png');
background-repeat: no-repeat, no-repeat;
background-position:left 0% top 0%, right 60% bottom 80%; 
background-size:100% 100%, auto 165%;}

.slide3 { 
background-image:
linear-gradient(rgba(0,109,169,0.7),rgba(0,109,169,0.7)),
url('../images/slide/slide3.png');
background-repeat: no-repeat, no-repeat;
background-position:left 0% top 0%, right 50% bottom 80%; 
background-size:100% 100%, auto 150%;}

.slide-text h1 { color:#fff;}
.slide-text h3 { color:#fff;}

}

@media only screen and ( max-width:767px) {
.slide1,.slide2,.slide3,.slide-text {height:300px;}

.slide-text .btn { margin: 3% 0 0;}
.slide-text .btn a {padding:8px 18px; font-size: 17px;}

}

@media only screen and ( max-width:640px) { 
.slide1,.slide2,.slide3,.slide-text {height:250px;}

#slider {background-size: 120% auto;}

.slide-text h1 {font-size:32px;line-height:40px;}
.slide-text h3 {font-size:19px;line-height:25px;}
.slide-text .btn { margin: 5% 0 0;}

.slide1 { background-position:left 0% top 0%, right 60% bottom 80%; background-size:100% 100%, auto 120%;}
.slide2 { background-position:left 0% top 0%, right 52% bottom 80%; background-size:100% 100%, auto 116%;}
.slide3 { background-position:left 0% top 0%, right 50% bottom 80%; background-size:100% 100%, auto 130%;}
}

@media only screen and ( max-width:480px) {
.slide-text h1 {font-size:24px;line-height:30px;}
.slide-text h3 {font-size:15px;line-height:25px;}

.slide1 { background-position:left 0% top 0%, right 45% bottom 80%; background-size:100% 100%, auto 110%;}
.slide3 { background-position:left 0% top 0%, right 50% bottom 80%; background-size:100% 100%, auto 110%;}

}