/* NAVIGOINTI */
#nav ul {display: block; list-style: none;}
#nav li {display: block;}
#nav ul li a:hover{color: #FFDD0E;}
#nav ul li a {text-decoration: none; transition: all 0.2s linear; color:#fff;}
.js #nav {clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1;}
#nav.opened {max-height: 9999px;}
#nav ul li {float: left; margin-left: 2em; font-weight:normal; font-size:0.85rem;}
#nav-toggle {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; width: 320px; height: 80px; float: left; text-indent: -9999px; overflow: hidden; background: url("hamburger.gif") no-repeat 10% 45%; padding-left:35px;}


/* SLIDERI */

.slider {position: relative; height: 100%; overflow: hidden;}
.slides {height: 100%;
		
/* Simple clear fix */
overflow: hidden;

/**	
* Prevent blinking issue
* Not tested. Experimental.
*/
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

/**
* Here is CSS transitions 
* responsible for slider animation in modern broswers
*/
-webkit-transition: all 1500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-moz-transition: all 1500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-ms-transition: all 1500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-o-transition: all 1500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
transition: all 1500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}	

.slide { height: 100%; float: left; clear: none;}
.slider-arrow {position: absolute; display: block; margin-bottom: -20px; padding: 20px; color:#FFFFFF; z-index:999;}
.slider-arrow--right { bottom: 50%; right: 30px; }
.slider-arrow--left { bottom: 50%; left: 30px; }
.slider-nav {position: absolute; bottom: 30px;  display:none; }
.slider-nav__item {width: 12px; height: 12px; float: left; clear: none; display: block; margin: 0 5px; background: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.slider-nav__item:hover { background: #fff200; }
.slider-nav__item--current { background: #fff200; }

.box1 {background-image: url(../img/slide1.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}
.box2 {background-image: url(../img/slide2.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}
.box3 {background-image: url(../img/slide3.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}
.box4 {background-image: url(../img/slide4.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}
.box5 {background-image: url(../img/slide5.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}
.box6 {background-image: url(../img/slide6.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}
.box7 {background-image: url(../img/slide7.jpg);background-repeat: no-repeat; background-position: center; background-size: cover;width: 100%; height: 100%;}

/* SLIDERI LOPPUU */

/* FONTTI */
@import url(http://fonts.googleapis.com/css?family=Raleway:400,900,700,200);


/* AVITUKSET */
html {margin: 0;}
body {background-color:#E9EBEE;}
.fullwidth {width:100%;}
.nomargintop {margin-top:0px;}
.minusmargintop {margin-top: -2px;}
.minusfivemargintop {margin-top: -5px;}
.paddingbottom {padding-bottom: 20px;}
.paddingleft {padding-left:40px;}
.paddingright {padding-right:40px;}
.margin-zero {margin-top:0px;}
.paddingleftright {padding-left:20px; padding-right:20px;}
.paddingtopbottom {padding-top:20px; padding-bottom:25px;}
footer {padding:22px 0px 25px 0px;}
footer p{font-size:0.8rem; letter-spacing:0.04rem;}
footer a:hover{ background-color: #fff200;}
.logo {height:30px;}
a {color:#272820; text-decoration:underline;}
a:hover {}
.selected {color: #FFDD0E !important;}
.center {margin-left:auto; margin-right:auto;}
header {padding: 40px 0px 55px 0px; background-color:#0d010a;}
.socialcontact {border-top: 1px solid #120810;}
.socialcontact p{ font-size:0.9em; padding-top:10px; padding-right:32px; margin-bottom: 36px;}
.socialcontact a:hover{ color:#fff; background-color: #120810; cursor:pointer;}
.socialcontact a{background-color: #FFF200; float: right; margin: 0 0 5px 5px; padding: 3px 8px; text-decoration: none; transition: all 0.3s linear 0s}
.fronttext {position: absolute; z-index:888; top:50%;}
.fronttext h1{ text-transform:uppercase; letter-spacing:0.8rem; text-decoration:underline; color:#fff; font-weight:900; font-weight:700;}
.fronttext h2{color:#fff;}
.productions {background-color: #ffffff; padding-bottom: 30px; text-align: center;}
.productions p {margin: 0 100px 0 100px; text-align: left;}
.productions h1 {text-decoration:underline; text-transform:uppercase; text-align:center; padding-top:50px; padding-bottom:50px;}
.productions h2 {text-align:center; margin-top:-10px;}
.productions img {padding-bottom:10px; padding-top:10px;}
.product img {width:100%;}
.product h2 {margin:0;}

.kuvaajatiedot {text-transform: uppercase; font-size: 12px; padding-bottom: 40px; text-align: center !important;}

.focusimg img {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.focusimg img:hover {opacity:0.4; }


@media screen and (min-width: 861px) {
.js #nav {position: relative;}
.js #nav.closed {max-height: none;}
#nav-toggle {display: none;}
}

@media screen and (max-width: 860px) {
#nav {margin-top:10px; margin-left:-30px; width:100%; clear:both; display:block; z-index:999;}
#nav ul {width: 100%;}
#nav ul li{ width: 100%; color: #fff; background-color: #0D010A; margin-top: 1px; border-bottom-color: #FFFFFF; border-bottom-width: thin; border-style: solid;
}
#nav ul li:hover{background-color: #0D010A;}
#nav ul li:hover a{color:#666; text-decoration:none;}
#nav ul li a{margin-left:25px; width:100%; color:#fff; padding-top: 9px; padding-bottom: 9px; display:block;}
#nav ul li a:hover{color:#666;}
.selected {border: none; text-decoration:none !important;}
.logo {display:none;}
.margintop {margin-top: 0px;}
header {padding: 0px; z-index:1001 !important;}
.paddingleft {padding-left:0px;}
.paddingright {padding-right:0px;}
footer p{text-align:center;}
.fronttext { position: absolute; top: 230px; padding-left:1%; padding-right:1%;}
.fronttext h1{ font-size:28px;}
.slider {height:500px;}
.productions p {margin: 0 20px 0 20px;}
.slider-arrow { display:none;}

}