@import url("lifestyle.css");

#slider { float:left; width:100%;}

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


.slide1 {  
background-image:
url('../images/slide/home-slide1.png');
background-repeat:no-repeat; 
background-position:left 0 bottom 60%;
background-size:100% auto;}

.slide1 .wrapper { display:table;}


.slide1-text { text-align:right; height:500px; display:table-cell; vertical-align:middle;}
.slide1-text h1 { color:#f1592a; font-size:50px; line-height:55px;font-family:'ITC Avant Garde Gothic'; font-style:italic;}
.slide1-text h4 { color:#f8a43f; font-size:25px; line-height:30px; font-weight:normal; font-family:'Avant Garde Gothic'; font-style:italic; font-weight: bold;}
.slide1-text .btn { margin:20px 0 0;}
.slide1-text .btn a { color:#fff; background:#009ace url('../images/phone-icon.png'); background-repeat:no-repeat; background-position:top 15px left 20px; border-radius:22px;  font-size:26px; padding:8px 25px 8px 55px; font-weight:normal;}


.slide2 { 
background-image:
url('../images/slide/home-slide-graphic1.png'),
url('../images/slide/home-slide-graphic2.png'),
url('../images/slide/home-slide2.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position:left 35% top 50%, right 20% top 50%, right 0px bottom 55%;
background-size: 48% auto, 13% auto, 100% auto;}

.slide3 {  
background-image:
url('../images/slide/home-slide3.jpg');
background-repeat:no-repeat; 
background-position:left 0 bottom 60%;
background-size:100% auto;}

.slide3 .wrapper { display:table;}

.slide3-text { text-align: left; height:500px; display:table-cell; vertical-align:middle;}
.slide3-text h1 { color:#f1592a; font-size:50px; line-height:55px;font-family:'ITC Avant Garde Gothic'; font-style:italic;}
.slide3-text h4 { color:#f8a43f; font-size:25px; line-height:30px; font-weight:normal; font-family:'Avant Garde Gothic'; font-style:italic; font-weight: bold;}
.slide3-text .btn { margin:20px 0 0;}
.slide3-text .btn a { color:#fff; background:#009ace url('../images/phone-icon.png'); background-repeat:no-repeat;background-position:top 15px left 20px; border-radius:22px;  font-size:26px; padding:8px 25px 8px 55px; font-weight:normal;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, /* put webkit CSS here*/

}

@media only screen and ( max-width:1800px) {

}

@media only screen and ( max-width:1520px) {


}

@media only screen and ( max-width:1420px) {
.slide2 {
background-position: left 30% top 50%, right 15% top 50%, right 0px bottom 55%;
background-size: 50% auto, 14% auto, 100% auto;}
}

@media only screen and ( max-width:1320px) {
.slide1,.slide2,.slide3,.slide1-text,.slide3-text {height:350px;}	
.slide1-text,.slide3-text { text-align:center;}
.slide1-text h1 br,.slide1-text h4 br,.slide3-text h1 br,.slide3-text h4 br  { display:none;}
.slide1-text h1,.slide3-text h1 { color:#fff;}
.slide1-text h4,.slide3-text h4 { color:#fff;}

.slide1 {  
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/home-slide1.png');
background-repeat:no-repeat,no-repeat; 
background-position: top 0 left 0,left 0 bottom 60%;
background-size:100% 100%,160% auto;}

.slide3 {  
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/home-slide3.jpg');
background-repeat:no-repeat,no-repeat; 
background-position: top 0 left 0,left 0 bottom 60%;
background-size:100% 100%,100% auto;}

}

@media only screen and ( max-width:980px) {
.slide2 {
background-position:left 25% top 50%, right 15% top 50%, right 0% bottom 55%;
background-size:56% auto,16% auto,100% auto;}

}

@media only screen and ( max-width:800px) { 
.slide1 {  
background-position: top 0 left 0,left 0 bottom 0%;
background-size:100% 100%,200% auto;}

}

@media only screen and ( max-width:767px) {
.slide1-text h1,.slide3-text h1 { font-size:30px; line-height:30px;}
.slide1-text h4,.slide3-text h4 { font-size:18px; line-height:25px;}
.slide1-text .btn,.slide3-text .btn { margin:10px 0 0;}
.slide1-text .btn a,.slide3-text .btn a {background-position: top 10px left 15px;font-size: 20px;padding: 7px 20px 7px 50px;}

.slide2 {
background-position:left 25% top 50%, right 10% top 50%, right 0px bottom 55%;
background-size:60% auto,16% auto,120% auto;}

.slide3 {  
background-position: top 0 left 0,left 0 bottom 0%;}

}


@media only screen and ( max-width:640px) {
.slide1,.slide2,.slide3,.slide1-text,.slide3-text {height:300px;}	
.slide1 {  
background-position: top 0 left 0,left 20% bottom 70%;
background-size:100% 100%,260% auto;}

.slide3 {  
background-position: top 0 left 0,left 70% bottom 0%;
background-size:100% 100%,150% auto;}
}


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

.slide1,.slide3-text  { background-size:100% 100%,300% auto;}
.slide1-text h1,.slide3-text h1 { font-size:22px; line-height:26px;}
.slide1-text h4,.slide3-text h4 { font-size:16px; line-height:20px;}

.slide2 {
background-position:left 43% top 12%, right 50% top 88%, right 0px bottom 55%;
background-size:76% auto,18% auto,150% auto;}


}

@media only screen and ( max-width:420px) {	
.slide1 { background-size:100% 100%,350% auto;background-position: top 0 left 0,left 20% bottom 100%;}

.slide2 {
background-position: left 43% top 15%, right 44% top 88%, right 0px bottom 55%;
background-size: 82% auto,24% auto,200% auto;}

.slide3 {  
background-position: top 0 left 0,left 70% bottom 0%;
background-size:100% 100%,200% auto;}
}

@media only screen and ( max-width:350px) {	
.slide2 {
background-position: left 43% top 15%, right 44% top 85%, right 0px bottom 55%;
background-size: 88% auto,28% auto,200% auto;}
}