body {

/* Old browsers */


	padding-bottom:0px;
	font-family: 'Raleway', sans-serif;
}

.ie-show-only {
	display: none !important;
}


html {
	padding-bottom: 0;
}


@media only screen and (max-width: 1190px) {
	body {
		  background-position-x: 44%;
	}
}

@media only screen and (max-width: 1000px) {
	body {
		  background-position-x: 34%;
	}
}

@media only screen and (max-width: 800px) {
	body {
		  background-position-x: 36%;
	}
} 

@media only screen and (max-width: 670px) {
	body {
		  background-position-x: 36.7%;
	}
}

header {
	background-color: #282b2e;
	border-bottom: 3px solid #66be57;
	color: #fff;
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;
}
footer {
	background-color: #282b2e;
	text-align: center;
	padding: 30px 0px ;
	color: #fff;
}

footer img, header img {
	    margin-bottom: 18px;
}


.center {
	text-align: center;
}




button {
	margin-top: 2em;
	border-radius: 20px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	text-transform: uppercase;
	background: rgb(114,195,90); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyYzM1YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1N2ExNDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(114,195,90,1) 0%, rgba(87,161,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,195,90,1)), color-stop(100%,rgba(87,161,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(114,195,90,1) 0%,rgba(87,161,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(114,195,90,1) 0%,rgba(87,161,66,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(114,195,90,1) 0%,rgba(87,161,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(114,195,90,1) 0%,rgba(87,161,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72c35a', endColorstr='#57a142',GradientType=0 ); /* IE6-8 */
	font-weight: 100;
	font-family:"Raleway";
	font-size: 1.2em;
	padding: 10px 45px;
}

#main {
	margin-top:30px;
}



.error {
	position: fixed;
	top: 0px;
	width: 500px;
	box-shadow: 0px 0px 21px 15px rgba(0,0,0,0.2);
	max-width: 100%;
	background-color: #c32d2d;
	font-weight: 600;
	color: #fff;
	padding: 20px;
	z-index: 20;
	left: 50%;
	margin-left: -250px;
}

@media only screen and (max-width: 550px) {
	.error {
	position: fixed;
	top: 0px;
	
	box-shadow: 0px 0px 21px 15px rgba(0,0,0,0.2);
	width: 100%;
	background-color: #c32d2d;
	font-weight: 600;
	color: #fff;
	padding: 20px;
	left: 0%;
	margin-left: 0px;
}
}





/**
 *
 * Main image ja logot
 *
 */
#main-image {
	background-position: center top;
	padding-top: 50px;
	background-repeat: no-repeat;
	padding-bottom: 69px;
	background-image: url('../img/background.jpg');
	background-repeat:no-repeat;
	background-position:center top;
	font-family: 'Raleway', sans-serif;
	background-size:cover;
	background-attachment:fixed;
	position: relative;
}


@media (max-width: 700px) {
	#main-image {
		background-size: auto;
		padding-bottom: 30px;	
		background-size:contain;				
	}	
}


.kiitos #main-image,
.kiitos .blue,
.rekisteriseloste #main-image,
.rekisteriseloste .blue,
.kilpailun-saannot #main-image,
.kilpailun-saannot .blue {
	display: none;
}



#main-image-bg {
	width: 28%;
	z-index: -1;
	position: relative;
	height: 394px;
	float: right;
	background-color: #000;
}

img.collage {
   	display: none;
}
@media (min-width: 1000px) {
	img.collage {
   		max-width: 85%;
   		display: inline;
   		width: 900px;
   		position: absolute;
   		left: 50%;
   		top: 120px;
   		margin-left: -450px;   
	}	
}
@media (min-width: 1200px) {
	img.collage {
		display: inline;
		max-width: 85%;
		width: 1100px;
		position: absolute;
		left: 50%;
		top: 120px;
		margin-left: -550px;   
	}	
}




.abb {
	left: 41px;
	padding: 0;
	margin: 0;
    top: -16px;
    position: relative;
}



#video-frame {
	width: 560px;
	z-index: 12;
	margin: 20px auto;
	box-sizing: border-box;
	position:relative;
	background:#fcfcfc;
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
	-o-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
	max-width: 100%;	
}

#video-frame:before, #video-frame:after {

	content: "";
	position: absolute;
	z-index: -1;
	-ms-transform: skew(-3deg,-2deg);
	-webkit-transform: skew(-3deg,-2deg); /* Safari and Chrome */
	-o-transform: skew(-3deg,-2deg); /* Opera */
	-moz-transform: skew(-3deg,-2deg); /* Firefox */
	bottom: 12px;
	box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
	height: 50px;
	left: 1px;
	max-width: 50%;
	width: 50%;
}
#video-frame:after {

	-ms-transform: skew(3deg,2deg); /* IE 9 */
	-webkit-transform: skew(3deg,2deg); /* Safari and Chrome */
	-o-transform: skew(3deg,2deg); /* Opera */
	-moz-transform: skew(3deg,2deg); /* Firefox */
	left: auto;
	right: 1px;
}
				
iframe {
	border: 10px solid #fff;	
	max-width: 100%;
	display: block;
}

.blue {
	background-color: #28b4e8;
	font-family: 'Kalam', cursive;
	color: #fff;
	overflow: hidden;
	padding: 12px 0px 20px;
}
.blue h2 {
	color: #fff;	
}

.more-info {
	padding: 50px 0px 20px;	
	border-top: 1px solid #50b237;
}

#questions {
	border: 1px solid transparent;
	padding: 5px;
}

.lift a {
	    position: relative;
    top: -58px;
    height: 58px;
    padding-top: 10px;
    display: block;
    background-color: rgba(103, 191, 87, 0.79);
    vertical-align: -webkit-baseline-middle;
    color: #fff;
}

.lift a:hover {
	background-color: rgba(103, 191, 87, 0.99);
	}

@media only screen and (max-width: 1009px) {
}

@media only screen and (max-width: 622px) {
}

@media only screen and (max-width: 623px) {
}

@media only screen and (max-width: 587px) {
	
	input[type=submit], .activate, button {
		width:100% !important;
	}
	
	.small {
	
	}
	
}

.normal-page {
	padding: 30px 0px 45px;
	
}

.normal-page h1 {
	margin-bottom: 1em;
}

.bg {

	position:relative;

	padding-bottom: 30px;


}

.white {
	padding: 12px 0px 58px;
}

.form-details {
	background-image: url('../img/office-bg.jpg');
	padding: 45px 0px;
	background-attachment: fixed;
	background-size: cover;
}

.form-details h2 {
	margin-bottom: 20px;
}

.form-details * {
	color: #fff;
} 

.form-details a {
	color: #66be57;
}

.description {
	font-size: 0.9em;
	padding: 0px 0px 0px 0px;
	margin: -10px 0px 0px 0px;
	color: #f0f0f0;
	font-style: italic;
}

section {
	overflow:hidden;
	display:block;
}

.divider {
	width:100%;
	height:8px;
	background-color:#489932;
	margin:30px 0;
}

/**
 *
 * Lomake
 *
 */
 

input[type=submit]:hover, .activate:hover {
	background-color:#479c2e;
}



input[type=submit], .activate {
	transition:.4s all;
	border:none;
	margin: 30px auto;
	width: 50%;
	display:block;
	font-size:1em;
	font-weight:700;
	line-height:15px;
	outline-width:2px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:30px;
	padding-right:30px;
	text-align:center;
	text-decoration:none!important;
	transition:all .2s;
	color:#fff!important;
	background-color:#50b237;
	outline-color:#53b237;
	text-shadow:0 1px 0 rgba(0,0,0,0.3);
}

.error-field {
	border: 1px solid red !important;
}

form label {
	font-size:0.9em;	


	display: block;
	color: #000;
	font-weight: 100;
	margin-top: 7px;
}



form p.radio label {
	
	width: auto;
	float: none;
	display: block;
	color: #000;
	font-size: 18px;
	color: #65bb4c;
	font-weight: 100;
	margin-top: 0px;
}




form p {
	clear: both;
}


input[type=text],input[type=email], textarea {
	background-color:#fff;
	height: auto;
	border:none;
	font-size:1em;
	color:#272727;
	transition:.5s all;
	float: none;
	width: 100%;
	font-weight: 100;
	border-radius: 12px;
	padding: 15px 20px;
	outline:none!important;
	outline-style:none;
	box-shadow: none;

}

@media only screen and (max-width: 623px) {
	form label {
		float: none;
		width: auto;
	}
	input[type=text],input[type=email], textarea {
		float: none;
		width: 100%;
	}
	button {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	form p.radio label { 
		  font-size: 18px;
  max-width: 95%;
	}
	
}



input[type=text]:focus,input[type=email]:focus, textarea:focus {
	background-color:#f4f4f4;
	outline:none!important;
	outline-style:none;
	box-shadow: none;
}

input[type="text"][disabled] {
	background-color:#141414;
}




@media only screen and (max-width: 73em) {
	.row {
		max-width:90%;
	}
}

@media only screen and (max-width: 40em) {
	
	
	.row {
		max-width:95%;
	}
}



/**
 *
 * Animaatiot
 *
 */
.animated {
	-webkit-animation-duration:.6s;
	animation-duration:.6s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.animated-slow {
	-webkit-animation-duration:.6s;
	animation-duration:.6s;
	-webkit-animation-fill-mode:both;
	-webkit-animation-delay:1s;
/* Chrome, Safari, Opera */
	animation-delay:1s;
	animation-fill-mode:both;
}

.fadeInDown {
	-webkit-animation-name:fadeInDown;
	animation-name:fadeInDown;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity:0;
		-webkit-transform:translateY(-20px);
	}
	
	100% {
		opacity:1;
		-webkit-transform:translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity:0;
		transform:translateY(-20px);
	}
	
	100% {
		opacity:1;
		transform:translateY(0);
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
	}
	
	100% {
		opacity:1;
	}
}

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	
	100% {
		opacity:1;
	}
}

.fadeIn {
	-webkit-animation-name:fadeIn;
	animation-name:fadeIn;
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity:0;
		-webkit-transform:translateX(-20px);
	}
	
	100% {
		opacity:1;
		-webkit-transform:translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity:0;
		transform:translateX(-20px);
	}
	
	100% {
		opacity:1;
		transform:translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name:fadeInLeft;
	animation-name:fadeInLeft;
}
.bganimation {
	animation: animatedBackground 2s ease-in;
	-webkit-animation: animatedBackground 2s ease-in ;
	background-position-y: -10px;
}

@keyframes animatedBackground {
	from { background-position-y: 0px; }
	to { background-position-y: -10px; }
}

@-webkit-keyframes animatedBackground {
	from { background-position-y: 0px; }
	to { background-position-y: -10px; }
}



   
   
   /**
    *
    * radios
    *
    */
    
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  padding-right: 10px;
  margin-left  : -2em;
  line-height  : 1.5em;
}





input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  margin-right	   : 2em;	
  border           : 0.0625em solid rgb(192,192,192);

  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
  border-radius: 20px;
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=radio]:not(old):checked +  label > span > span{
  display          : block;
  width            : 0.50em;
  border-radius: 20px;
  height           : 0.50em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);

  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}



@media only screen and (max-width: 321px) {
	input[type=checkbox]:not(old) + label,
	input[type=radio   ]:not(old) + label{
	display      : inline-block;
	font-size: 10px;
	padding-right: 0px;
	margin-left  : -2em;
	line-height  : 1.5em;
}
input[type=checkbox]:not(old) + label > span, input[type=radio ]:not(old) + label > span {
	margin-right: 0.5em; 
}

.small {
	font-size: 10px;
}

.abb {
	left: 17px;
    top: -12px;
    position: relative;
}


}