body
{overflow-x: hidden;}

html, body
{height: 100%;
background: #333;}


.kiri {
width: 80%;
text-align: center;
position: absolute;
top: 82%;
font-size:18px;
margin-left: 10%;
text-shadow:0 0 1px transparent;
   -webkit-text-stroke: 0.5px black;
   color: white;
   text-shadow:
      1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000

}


.slider {
width: 100%;
position: fixed;
right: -50%;
overflow: hidden;
display: inline-block;
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
pointer-events: none;
top: 0;
bottom: 0
}

.slider2
{right: auto;
left: -50%}


.box { 
width: 100%;
height: 330px;
}

.sunset {

-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
right: 32%;
background: url(../img/hostel.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
pointer-events: auto; /* allow pointer events for the box */
position: relative;
}

.sunrise {
background:  url(../img/bow_saal.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;   /* remove from flow so sunset is placed on top */
left: 0;
left: 25%;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);

}



.imageLink {
display: inline-block;
margin-left: auto;
margin-right: auto;
-webkit-transition: margin-top 1s ease-in;
top: 0;
left: 0;
right: 0;
position: absolute;
}

.imageLink:hover
{
-webkit-transition:margin-top 1s ease-in;
margin-top:-20px;
}



.landingWrap
{
position: absolute;
top: 50%;
margin-top: -150px;
width: 100%;


}

.landingBody
{
background: url(../img/landing.jpg) no-repeat center center scroll; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
}

.screenHolder
{
width: 80%;
text-align: center;
height: 410px;
position: absolute;
top: 50%;
margin-top: -205px;
margin-left: 10% }



.screens
{display: inline-block;
width: 50%;
margin: 0;
position: relative;
height: 330px;
float: left;}

.screenTxt
{width: 100%;
text-align: center;

bottom: 0;
position: absolute;}

.screenTxt a
{font-family: "Lato";
font-size: 70px;
-webkit-text-stroke: 0.1px black;
text-transform: uppercase;
font-weight: 500;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
text-decoration: none;}

.screenTxt.dark a
{ 	
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
      1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
}

.screenTxt.light a {
	text-shadow:0 0 2px transparent;
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
      1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
}


.screenTxt a:hover
{opacity: 0.2;
letter-spacing: 2px}



.screenTxt a.subtitle
{font-size: 20px;
-webkit-text-stroke: 0px white;
color: #fff;
max-width: 263px;
overflow: hidden;
display: block;
float: none;
margin: 0 auto;
font-weight: 400}

@media only screen and (max-width: 850px){
.screens {width: 100%; margin-bottom: 20px;}
.screenHolder {
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
top: 20px;
margin-top: 0;}
.slider {display: none !important}
.box {top: 0; bottom: 0; position: absolute;}
.screenTxt.light a {color: #fff;}
}