/*0
Theme Name: Jani 2014.
Description: :D
Author: Jani
Version: 1.1
Tags: IT-TukiJani, Jani Aaltonen, ResponsiiviJani
*/


    /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

	
html {margin:0;}
body {background:url(images/bg.png); overflow-x:hidden;}
img {max-width:100% !important;}




/* WP CORE */

/* == WordPress WYSIWYG Editor Styles == */

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

/* /WP CORE */

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {}


	.navbar-inverse .navbar-inner {
    background-color: #71E3FC;
    background-image: linear-gradient(to bottom, #00D2FF, #71E3FC);
    background-repeat: repeat-x;}
	.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

	.navbar .nav {
    font-size: 28px;
	position: relative;
    top: 47px;
}
	.navbar .nav > li > a {
    color: #1396E1;}
	.navbar .nav > li.current_page_item a {color:#333;}
	
	.navbar-wrapper {
	
	position:fixed; 
	top:0px; 
	width:100%; 
	min-width:300px; 
	border-bottom: 1px solid #ddd; 
	z-index:999;
	background-color: #FAFAFA;
    background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
	
	}
	.navbar-inner {
    background-color: #FAFAFA;
    background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
    border: none;
    border-radius: 0;
    box-shadow:none;
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}
	.navbar .brand{padding: 10px 10px; max-width:300px;}
	.navbar .btn-navbar {margin-top:32px;}
	.headerkuva {float:right; max-height:350px; max-width:33%;}
	.headerteksti {max-width:50%; float:left;}
	
 
    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }

	
.navbar {
    margin-bottom: 0;

}


html {
	max-width:100%;
	overflow-x:hidden;
}

body {
	margin:0;
	color:#fff;
	font-family: 'Press Start 2P', cursive;
	

}

#sad-IE { 
display:none; 
z-index:9999;
padding:15px 0;
background:#000;
position:fixed;
bottom:0;
left:0;
text-align:center;
font-size:200%;
width:100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Titillium Web', sans-serif;
	font-weight:600;
	margin-bottom:20px;
	text-shadow:2px 2px rgba(0, 0, 0, 0.5);

}


h1 {
	font-size:400%;
	margin-bottom:25px;
}

h2 {
	font-size:200%;
}

h3, h4 {
	font-size:140%;
}

p {font-family: 'Lato', sans-serif;
	color:#fff;
	font-size:110%;
	line-height:130%;
	margin-bottom:20px;
}

.main-wrap ul {
	padding:20px 20px 20px 35px;
	list-style: circle;
	font-size:130%;
	line-height:130%;
}
.main-wrap li {
	margin-bottom:20px;
}

#header {


padding:10px 0;
background:#fafafa;
border-bottom:10px solid #007FCA;
}

#header h1 {

color:#18ABFF;
padding:20px 50px;
font-size:450%;
font-family:Lato, arial;
}

.titletys {
	margin-top:79px;
	padding:50px 0;
}

.titletysInner, .maincontetn, .contatnt, .navbar-inner {
	margin:0 auto;
	max-width:1180px;
}
.titletysOtsikko, .titletysTeksti {
	display:inline-block;
	vertical-align:middle;
	width:45%;
	text-align:center;
}

.titletysTeksti img{max-height: 350px !important;}
.Jani .mainContWrap {
	background:url(images/jani2.jpg) no-repeat top center fixed;
}

.Palvelut .mainContWrap {
	background:url(images/serv-bg.jpg) no-repeat top center fixed;
}

.Referenssit .mainContWrap {
	background:url(images/supp-bg.jpg) no-repeat top center fixed;
}

.Yhteystiedot .mainContWrap, .Arviointi .mainContWrap  {
	background:url(images/cont-bg.jpg) no-repeat top center fixed;
}

.maincontetn {

	padding:200px 0 1600px 0;
	position:relative;

}
.contatnt {
	z-index:44;

	padding:20px;
}


.cont-wrap {margin:0; width:100%; height:auto;}

.cont1 {background:url(images/jani2.jpg) no-repeat top center;}

.cont2 {background:#E5A249;}

.cont3 {background:url(images/cont-bg.jpg) no-repeat top center;}

.cont4 {background:#55E248;}
.cont-kuva, .cont-teksti {
float:left;
width:48%;
padding:1%;

}

.cont-teksti p{

font-size:160%;
}
.cont-wrap-cent {
	margin:0 auto;
	max-width:1180px;
	padding:100px 0;
}

.footerwrap {
border-top:10px solid #007FCA;
padding:90px 0 0;
clear:both;
background:#333;
}

.flip-wrap {
position:relative;
margin-top: 80px;
}

.clearhr {
clear:both;
margin:0;
border-color:transparent;
height:0;
border-width:0;

}

.footerwrapCont {
margin:0 auto;
	max-width:1180px;
	padding:100px 0;
}
.flip-wrap {position:relative;}

		/* simple */
		.flip-container {
			-webkit-perspective: 1000;
			-moz-perspective: 1000;
			-ms-perspective: 1000;
			perspective: 1000;

			-ms-transform: perspective(1000px);
			-moz-transform: perspective(1000px);
    			-moz-transform-style: preserve-3d; 
    			-ms-transform-style: preserve-3d; 

			
			float:left;
		}

			/*
			.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
				transform: rotateY(180deg);
				filter: FlipH;
    			-ms-filter: "FlipH";
			}
			*/


			/* START: Accommodating for IE */
			.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
		
		/* END: Accommodating for IE */

		.flip-container {
			width: 25%;
			height: 0;
			padding-bottom:25%;
			overflow:hidden;
		}

		.flipper {
			-webkit-transition: 0.6s;
			-webkit-transform-style: preserve-3d;
			-ms-transition: 0.6s;

			-moz-transition: 0.6s;
			-moz-transform: perspective(1000px);
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;

			transition: 0.6s;
			transform-style: preserve-3d;

			position: relative;
		}

		.front, .back {
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;

		    -webkit-transition: 0.6s;
		    -webkit-transform-style: preserve-3d;

		    -moz-transition: 0.6s;
		    -moz-transform-style: preserve-3d;

		    -o-transition: 0.6s;
		    -o-transform-style: preserve-3d;

		    -ms-transition: 0.6s;
		    -ms-transform-style: preserve-3d;

		    transition: 0.6s;
		    transform-style: preserve-3d;

			position: absolute;
			top: 0;
			left: 0;
			
			width:100%;
			padding-bottom:100%;
		}

		.front {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			background: #18ABFF;
			z-index: 2;
			
		}
		
		.front img {max-width:100%; height:auto;}
		
		/* .fr1 {background:url(gam1.png) no-repeat top left;}
		
		.fr2 {background:url(gam2.png) no-repeat top left;}
		
		.fr3 {background:url(gam3.png) no-repeat top left;}
		
		.fr4 {background:url(gam4.png) no-repeat top left;} */

		.back {
			background: rgba(255,255,255,0.2);
			background: url(images/giphy.gif) no-repeat;
			background-size:cover;
			-webkit-transform: rotateY(-180deg);
		    -moz-transform: rotateY(-180deg);
		    -o-transform: rotateY(-180deg);
		    -ms-transform: rotateY(-180deg);
		    transform: rotateY(-180deg);
		}
		
		.bc1, .Jani .titletys {background:#478FE0;}
		.bc2, .Palvelut .titletys  {background:#E5A249;}
		.bc3, .Referenssit  .titletys {background:#E24B48;}
		.bc4, .Yhteystiedot .titletys, .Arviointi .titletys {background:#55E248;}

		.front .name {
			font-size: 2em;
			display: inline-block;
			background: rgba(33, 33, 33, 0.9);
			color: #f8f8f8;
			font-family: Courier;
			padding: 5px 10px;
			border-radius: 5px;
			bottom: 60px;
			left: 25%;
			position: absolute;
			text-shadow: 0.1em 0.1em 0.05em #333;
			display: none;

			-webkit-transform: rotate(-20deg);
			-moz-transform: rotate(-20deg);
			-ms-transform: rotate(-20deg);
			transform: rotate(-20deg);
		}

		.back-logo {
			position: absolute;
			top: 40px;
			left: 90px;
			width: 160px;
			height: 117px;
			background: url(logo.png) 0 0 no-repeat;
		}

		.back-title {
			font-weight: bold;
			color: #00304a;
			position: absolute;
			top: 180px;
			left: 0;
			right: 0;
			text-align: center;
			text-shadow: 0.1em 0.1em 0.05em #acd7e5;
			font-family: Courier;
			font-size: 2em;
		}

		.back p {
			
			text-align: left;
			padding: 0 20px;
			font-size:1vw;
		}
		
		.back h1 {
			
			text-align: center;
			padding: 30px 0 10px;
			font-size:250%;
		}
		
		.back a, .cont-teksti a{
			
			text-align: center;
			padding: 10px 20px;
			display:block;
			background:#44BAFF;
			background:rgba(255,255,255,0.2);
			color:#fff;
			margin:50px auto 0;
			width:55%;
			text-decoration:none;
			font-weight:700;
		}
		
		.back a:hover, .cont-teksti a:hover {
			
			background:#71C9FD;
			background:rgba(255,255,255,0.4);
		}

		/* vertical */
		.vertical.flip-container {
			position: relative;
		}

			.vertical .back {
				-webkit-transform: rotateX(180deg);
				-moz-transform: rotateX(180deg);
				-ms-transform: rotateX(180deg);
				transform: rotateX(180deg);
			}

			.vertical.flip-container .flipper {
				-webkit-transform-origin: 100% 213.5px;
				-moz-transform-origin: 100% 213.5px;
				-ms-transform-origin: 100% 213.5px;
				transform-origin: 100% 213.5px;
			}

			/*
			.vertical.flip-container:hover .flipper {
				-webkit-transform: rotateX(-180deg);
				-moz-transform: rotateX(-180deg);
				-ms-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
			}
			*/

			/* START: Accommodating for IE */
			.vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
			    -webkit-transform: rotateX(0deg);
			    -moz-transform: rotateX(0deg);
			    -o-transform: rotateX(0deg);
			    -ms-transform: rotateX(0deg);
			    transform: rotateX(0deg);
			}

			.vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
			    -webkit-transform: rotateX(180deg);
			    -moz-transform: rotateX(180deg);
			    -o-transform: rotateX(180deg);
			    transform: rotateX(180deg);
			}
		/* END: Accommodating for IE */
		
		
		
		/* MEADIAT ALKAA!! */
		
		@media (max-width:960px) {
		
			.navbar .nav {
    top: 0;
}
		
		.flip-container {
			width: 50%;
			height: 0;
			padding-bottom:50%;
			font-size:90%;
		}
				.back h1 {
    padding: 10px 0;
    text-align: center;
}

		.back p {
    font-size:2vw;
	width:96%;
	padding:0 2%;
}

		}
		
		@media (max-width:767px) {
		
		h1 {font-size:250%;}
		.navbar-wrapper {position:relative;}
		
		.flip-wrap {

margin-top: 0;
}
.back a, .cont-teksti a{
			

			margin:20px auto 0;

		}
.cont-teksti p{

font-size:120%;
}
				.flip-container {
			font-size:50%;
		}
		
			.navbar .brand {float:none;}


		
					.cont-kuva, .cont-teksti {

			width:98%;


			}
			
			.cont-kuva img{
				max-width:150px;
				width:30%;
				margin:10px auto;
			}
			
			.cont-kuva {
				float:none;
				text-align:center;
			}
			
			.hidMe {display:none;}
		

		
		.titletys {
	margin-top:0;
}

.titletysOtsikko, .titletysTeksti {
	width:100%;
	margin:30px 0;
}

.titletysTeksti img{
	max-width:200px !important;
	max-height:auto !important;
}

.maincontetn {

	padding:100px 0;

}
}		
		
		
				@media (max-width:450px) {
				
				.front img {position:relative; top:-40px;}
		
		.flip-container {
			width: 100%;

			padding-bottom:50%;

		}
}




#happiness .wpcf7-list-item > input[type="radio"] {
    border: 3px solid #fff;
    height: 20px !important;
    padding: 20px !important;
width:auto !important;
}

#happiness .wpcf7-list-item:nth-child(5) > input[type="radio"] {
    transform: scale(10, 1);
}
#happiness .wpcf7-list-item:nth-child(4) > input[type="radio"] {
    transform: scale(4, 1);
margin-right: 85px;
}
#happiness .wpcf7-list-item:nth-child(3) > input[type="radio"] {
    transform: scale(3, 1);
margin-right: 35px;
}
#happiness .wpcf7-list-item:nth-child(2) > input[type="radio"] {
    transform: scale(2, 1);
margin-right: 25px;
}
#happiness .wpcf7-list-item:nth-child(1) > input[type="radio"] {
    transform: scale(1, 1);
margin-right: 15px;
}
#happiness .wpcf7-list-item-label {display:none;}