@charset "UTF-8";
/* CSS Document */

body {
    background-color: #FFFFFF;
}

page.tyonaytteet {
  display: flex;
  justify-content: center;
  flex-flow: row wrap; 
}

page.tyonaytteet {
  margin-top: 80px; 
}

page.tyonaytteet.korkea {
    margin-top: 100px; 
}


/* TYÖNÄYTEIKKUNA */
.tyonayteikkuna {
    display: block;	
	position:relative;
	float:left;
    width: 90%;
	text-align:center;
}

.tyonayteikkuna.kaksipalikkainen {
    width: 644px;
    margin: 30px auto;
}

.tyonayteikkuna.kolmepalikkainen {
    width: 986px;
    margin: 30px auto;
}

#kuvitusnayteikkuna {	
	display:block;
	position:absolute;
	top:210px;
	left:530px;
	width:800px;
	height:450px;
}


#tyonayteotsikko {
	display:block;
	width:705px;
	position:absolute;
	top:160px;
	left:535px;
}

.tyonaytteet h1 {
	margin-bottom: 10px;
}

h1.tyonayteportaali {
    margin: 0 0 80px;
}

h3.palaa {
    width: 100%;
    color: #e32527;
    margin-top: 0;
    margin-bottom: 80px;
}

h3.palaa:hover, h3.palaa:active, h3.palaa:target {
    color: #777777;
}


#tyonayteotsikko h3 {
	font-family:Raleway, sans-serif;
	font-style:normal;
	font-variant:normal;
	line-height:1.3em;
	font-weight:300;
	color:#CCC;
	text-align:center;
	font-size:1.6em;
	letter-spacing:2.1em;
}

#tyonayteotsikko a {
	color:#CCC;
}

#tyonayteotsikko a:hover {
	color:#F00;
}

#nayteteksti {
	width:700px;
	position:absolute;
	top:450px;
	left:0px;
	z-index:1000;
}

#nayteteksti h3 {
	margin:0;
	text-align:center;
}



/* TYÖNÄYTEDIVIT */	
.kategoria {
	position:relative;
	display:inline-block;
	float:none;
    width: 298px;
	height: 221px;
    margin: 2% calc(12.5% - 150px);
	text-align:center;
	background-color:#FFF;
	border:1px solid #BCBCBC;
    /*border-radius: 6px;*/
    background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
	vertical-align: bottom;
    /* transitions */
    -webkit-transition: background-image 0.5s ease-in-out;
    -moz-transition: background-image 0.5s ease-in-out;
    -ms-transition: background-image 0.5s ease-in-out;
    -o-transition: background-image 0.5s ease-in-out;
    transition: background-image 0.5s ease-in-out;
}

.kategoria img.paalla {
    opacity: 1;
    z-index: 2;
}

.kategoria:hover img.paalla, .kategoria:active img.paalla, .kategoria:target img.paalla {
    opacity: 0;
}

.kategoria img.alla {
    opacity: 1;
    z-index: 1;
}

div > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}


/* TYPO */
page.tyonaytteet h1 {
    margin-top: 0;
}

h2.tyonayte {
    display: none;
    color: #FFFFFF;
    line-height: 223px;
    margin-top:0;
    margin-bottom: 0;
}

.visut h2 {
    text-shadow: 3px 3px 5px #000000;
}


.kategoria:hover img.text, .kategoria:active img.text, .kategoria:target img.text {
	display:block;
}


.kategoria:hover h2, .kategoria:active h2, .kategoria:target h2 {
	display:block;
}