@charset "utf-8";
/* CSS Document */
#teaser { height:765px; width:100%; margin:0 auto; position:relative; z-index:0;     }
.top { position:absolute; z-index:100; top:0; left:0}
.wrap { position: relative; overflow: hidden; width:100%; height: 765px;   margin:0 auto; z-index:0; } 
#teaserWrapper { width:200%; height:100%; overflow: hidden; }


.teaser-item { height:765px; width:50%; overflow: hidden;  float:left;  position: relative; z-index:10; text-align:center;   }
#text_block { position:absolute; z-index:100; top:500px; width:50%; left:50%; margin-left:-25%; font-family: "Montserrat", Arial, Helvetica, sans-serif; text-align:left; }
#text_block p  { margin:0; padding:0; }
#text_block  h2 { margin-bottom:10px}
.watch {
    border-radius: 25px;
	background:#1f2228;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    margin: 2px;
    padding: 12px 40px;
    text-transform: uppercase;
	display:inline
}
.t-join {
    border-radius: 25px;
	background:#bb3273;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    margin: 10px;
    padding: 12px 40px;
    text-transform: uppercase;
}

/* next / prev buttons */
#teaserNavigationLinks { width:100%; left:50%; margin-left:-50%;   text-align:center; position:absolute; z-index:100; top:43%;}
#teaserNavigationLinks a.prev-link, #teaserNavigationLinks a.next-link { text-decoration:none;   width:45px; height:45px;  }
#teaserNavigationLinks a span { display: none; }


#teaserNavigationLinks .prev-link  {  background:url(../images/slider-controls.png) 0px 0px; cursor: pointer; display:block; float:left; margin-left:30px}
#teaserNavigationLinks .prev-link:hover { background-position:0px -45px}

#teaserNavigationLinks .next-link  { background:url(../images/slider-controls.png)  -45px 0; cursor: pointer; display:block; float:right; margin-right:30px }
#teaserNavigationLinks .next-link:hover { background-position:-45px -45px}

.pic01{ background:url(../images/slider-pic-02.jpg) no-repeat top center   }
.pic02{ background:url(../images/image2a.jpg) no-repeat top center   }
.pic03{ background:url(../images/slider-pic-03.jpg) no-repeat top center   }
.pic04{ background:url(../images/slider-pic-04.jpg) no-repeat top center   }
.pic05{ background:url(../images/image3a.jpg) no-repeat top center   }



@media all and (max-width: 1000px)
{
.pic01 { background-position:30% -100px}	
.pic02 { background-position:45% -80px}	
.pic03 { background-position:55% -120px}	
.pic04 { background-position:50% -120px}	
#teaser, .wrap, .teaser-item  { height:600px}
#text_block { top:350px; width:90%; left:50%; margin-left:-45%}
#text_block  h2 { font-size:20px}


}

@media all and (max-width: 800px)
{

.pic02 { background-position:45% -155px}
.pic03 { background-position:75% -80px}		
.pic04 { background-position:30% -120px}
#text_block  { font-size:14px}
}

@media all and (max-width: 600px)
{

.pic01 { background-position:20% -100px}	
.pic02 { background-position:45% -155px}
.pic03 { background-position:75% -80px}		
.pic04 { background-position:30% -120px}	
#text_block  { font-size:12px}
.watch, .t-join { display: inline-block; font-size:14px; padding: 6px 25px;}
}