@charset "UTF-8";

/* YLEISET MUOTOILUT koko saitille
--------------------------------------------------------------- */
body {
	background-color: #000000;
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	height: 100%;
	margin: 0;
	padding: 0;
}
h1 {
    font-family: 'Open Sans', sans-serif; 
	font-weight: 300;
	font-size: 40px;
}
h2 {
    font-family: 'Open Sans', sans-serif; 
	font-weight: 300;
	font-size: 20px;
}
h3 {
    font-family: 'Open Sans', sans-serif; 
	font-weight: 300;
	font-size: 20px;
	color:#000000;
}
.main {
	width: 1200px;
	float: left;
}
.wrapper {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
/* linkki */
a:link {
    color: #b7b7b7;
	text-decoration: none;
}

/* linkki - klikattu */
a:visited {
    color: #ffffff;
}

/* linkki - hiiri yllä */
a:hover {
    color: #828282;
}

/* linkki - valittu */
a:active {
    color: #828282;
}

/* RESPONSIIVISUUS
--------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {.main {width: 800px;}}
@media only screen and (max-width: 799px) {.main {width: 400px;}}


/* KOKO SIVUN TAUSTAKUVA
--------------------------------------------------------------- */

img#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
img#bg2 {
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
}

#content {
  position: relative;
  z-index: 2;
}

/* KUVA TAUSTAKUVAN PÄÄLLÄ */
#img {
  position: relative;
  z-index: 1;
  margin: auto;
  width: 960px;
}

@media only screen and (max-width: 959px) {
    #img {width: 100%;}}

/* KUVALISTAT
--------------------------------------------------------------- */	
.imgpsta {
	float: left;
	}	
ul.imgpsta {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  text-align: center;
}
li.kuvateksti {
	position: relative;
}
li.kuvateksti img {
	width: 400px
}
span.kuvateksti {
  text-align: left;
  padding-left: 20px;
  color: white;
  cursor: pointer;
  display: table;
  position: absolute;
  top: 0;
  width: 380px;
  opacity: 0;
}
ul.imgpsta li:hover span.kuvateksti {
  opacity: 1;
}

/* LOMAKE
--------------------------------------------------------------- */	
form {width:400px;margin:0px auto;text-align:left;}
p {width:400px;margin:auto;padding:0px 0px;border-top:1px dotted #c7c7c7;}
li {padding:0px 0px;min-height:27px;list-style-type:none;}
ul {padding:0px;}
img.some {padding:5px;height:30px;}
div.some {text-align:center;}
div.error {color:#ff0000;}

input, 
select, 
textarea, 
button {
	background:rgba(255,255,255,0.4);
	font-size:1em;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	color:#000000;
	border-radius: 5px;
	border: none;
	margin:0px;
}
input {
	height:50px;
	width:400px;
}

input[type=text]:focus, 
input[type=text]:active, 
input[type=email]:active, 
input[type=email]:focus, 
textarea:active, 
textarea:focus {
}
textarea {
	height:174px;
	border-radius: 5px;
	border: none;
	width:400px;
}
button {
	background: rgba(255,255,255,0.8);
	border-color: #eeeced;
    border-style: solid;
    border-width: 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding:5px 30px;
	cursor:pointer;
}
button:hover {
	background:#f5f5f5;
}
button:focus, 
button:active {
	background:#e8e8e8;
}
button.action {
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa765f', endColorstr='#e15d46',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 179, 166, 1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 179, 166, 1);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 179, 166, 1); 
	border-color: #d0432f;
	color:#b13e2d;
	text-shadow:0px 1px 0px #ffb3a5;
}
button.action:hover {
	background:#fa765f;
}
button.action:focus, 
button.action:active {
	background:#e15d46;
}


/* MENU-hampurilainen
--------------------------------------------------------------- */	
#menu-button {
  position: fixed;
  top: 20px;
  left: 20px;
  display: block;
  width: 50px;
  height: 50px;
  background: #111;
  border-radius: 5px;
  z-index: 99;
}
#menu-button:after {
  position: absolute;
  left:0;
  content: "☰";
  font-size: 42px;
  color: #FFF;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

#menu-button:hover {
  opacity: .8;
}

#menu-button.on:after {
  content: "x";
}

#overlay {
  display: none;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  right: 0;
  left: 0;
}

#overlay.open {
  display: block;
}

#hamburger-menu {
  height: 0;
  width: 0;
  background: #111;
  position: fixed;
  top: 20px;
  left: 90px;
  z-index: 101;
  overflow: hidden;
  border-radius: 5px;
}
#hamburger-menu nav {
  padding: 10px;
  z-index: 101;
  overflow-y: hidden;
  overflow-x: hidden;
}
#hamburger-menu nav a {
  display: block;
  padding: 10px;
  height: 1em;
  color: #CCC;
  font-size: 1em;
  line-height: 1em;
  text-decoration: none;
  overflow: hidden;
}
#hamburger-menu nav a:hover {
  cursor: pointer;
  color: #FFF;
  background: rgba(255, 255, 255, 0.02);
}