@charset "utf-8";
html{  position: relative;  min-height: 100%;  height:auto;	color:#000000;	width:100%;	margin:0;	padding:0;	background: url(i/bg_test.jpg) no-repeat fixed center top;	background-size: cover;}
body{color:#000000;	min-height:100%;	height:auto;	width:100%;	margin:0;	padding:0; /* Margin bottom by footer height */  margin-bottom: 140px;}
#frontpage{margin-bottom:65px;}
p{	font-family: 'PT Sans Narrow',sans-serif;	font-size:17px;}
#frontpage h1{	color:#FFFFFF;	font-family: 'Alfa Slab One', cursive;	font-size:96px;	text-align:center;	margin:45px auto 8px;	line-height:90px;	padding:0;	text-transform:uppercase;}
#frontpage h3{	color:#FFFFFF;	font-family: 'Amaranth', sans-serif;	font-size:30px;	text-align:center;	margin:0;	padding:0;	letter-spacing:4px;}

#bg{	position:fixed; 	top: 0px;	left: 0px;	min-width: 100%;	min-height: 100%;	width: auto;	height: auto;	z-index: -1000;	overflow: hidden;	background-size:cover;}

.container{ margin-bottom:30px;}
#frontpage #logo,#frontpage #logo2{	display:block;	margin:20px auto 0;	position:relative;	max-height:50px;}
.balls{ margin-top:30px;}
.ball{	z-index:110;	overflow:hidden !important; display:inline-block;    border-radius: 110px;	border:#FFFFFF 6px solid; /* 1px tai 6px*/	float:left;	width:100%;	height:auto;	margin-right:8px;
	-webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;    -webkit-transform:  translateZ(0);/*translate3d(0, 0, 0)*/    -moz-transform:  translateZ(0);    -webkit-transform:scale(1.0); }
.ball img{	padding:4px;    border-radius: 110px;}

.firstball{    /*border-radius:0 110px 110px 110px;*/}
.firstball img{/*   border-radius:0 110px 110px 110px;*/}
.lastball{/*border-radius:110px 0 110px 110px;*/}
.lastball img{/*    border-radius:110px 0 110px 110px;*/}
.ball a {	display:block;	overflow:hidden;}

.ball img {	z-index:2;    text-decoration: none;    display: block;	width:100%;  opacity: 1;/* 7*/
    -webkit-transform: scale(1,1);    -webkit-transition-timing-function: ease;    -webkit-transition-duration:1000ms;    -moz-transform: scale(1,1);    -moz-transition-timing-function: ease;
    -moz-transition-duration: 1000ms;    transform: scale(1,1);    transition-timing-function: ease;    transition-duration: 1000ms; }
.ball:hover img {  opacity: 1; /* 9*/
    -webkit-transform: scale(1.15);    -webkit-transition-timing-function: ease;    -webkit-transition-duration: 1000ms;    -moz-transform: scale(1.15);    -moz-transition-timing-function: ease;
    -moz-transition-duration: 1000ms;	transform: scale(1.15);    transition-timing-function: ease;    transition-duration: 1000ms;    position: relative;    z-index: 99;
}
#frontpage #facebook,#frontpage #facebook2{	position:absolute;	top:18px;	right:12px;}
	
.contenttxt{	clear:both;	color:#FFFFFF;	font-family: 'PT Sans Narrow',sans-serif;	font-size:17px;	text-align:center;	margin:65px auto 45px;	padding:0 6px;}
	/* BOTTOM */
#frontpage #m{	display:block;	margin:0px auto 0;	position:relative;	width:60px;	height:42px;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 1.3s;
    -webkit-animation-delay: 5.4s;
    animation-name: example;
    animation-duration:1.3s;
    animation-delay: 5.4s;
	 -webkit-transition: width 1.3s, height 1.3s, -webkit-transform 1.3s; /* Safari */
    transition: width 1.3s, height 1.3s, transform 1.3s;
}
#frontpage #m:hover{
	
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
}
@-webkit-keyframes example {
    0%   {-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg);}
    70% {-ms-transform: rotate(380deg); /* IE 9 */
    -webkit-transform: rotate(380deg); /* Safari */
    transform: rotate(380deg);}
    100% {-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes example {
    0%   {-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg);}
    70% {-ms-transform: rotate(380deg); /* IE 9 */
    -webkit-transform: rotate(380deg); /* Safari */
    transform: rotate(380deg);}
    100% {-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);}
}
.navbar{ margin:25px 0 60px;font-family: 'PT Sans Narrow', sans-serif; text-transform:uppercase; font-weight:700;
  letter-spacing: 1px;}

/* TYOT */
.tyot h1{
	font-family: 'Ovo', serif;
	color:#ffffff;line-height: 72px;
  color: #FFFFFF; margin:0;
  font-size: 60px;}
  .tyot .keskitys {
  text-align: center;
  margin-bottom: 40px;
  line-height: 23px;
  font-size: 19px;
  color: #FFFFFF;
  letter-spacing: 1px;}
.tyot .col-sm-4{padding:0 3px 6px 3px; /*padding:5px;border:#ffffff solid 1px;*/ padding-bottom:6px; margin:4px; width:32%}
.tyot .col-sm-4 img{ width:100%;}

/*.tyot p{ background-color:#ffffff; margin-bottom:0; padding:0 0 10px 10px; font-size: 10px;
  line-height: 12px;
  letter-spacing: 5px; text-transform:uppercase;}*/
.tyot h5{ margin-top:0; margin-bottom:0; padding:10px 0 2px 10px; background-color:#ffffff;font-size: 20px;
  line-height: 24px;
  font-family: 'Ovo', serif;}
  .tyot .col-sm-4 div{ background-color:#ffffff;}
.tyot .keskitys p { background-color:none;
  line-height: 23px;
  font-size: 19px;
  color: #FFFFFF;
  letter-spacing: 1px;
  font-family: 'PT Sans Narrow', sans-serif;
  }
/* yhteys */
.yhteys, .yhteys a{
	font-family: 'Ovo', serif;
	color:#ffffff;
}
.yhteys h1{ font-size:40px; margin-top:0;}
.yhteys h3{ font-size:18px; line-height:18px;}
.yhteys p{font-family: 'Ovo', serif; font-size:14px; line-height:16px;  margin: 0;  padding: 0;}
.yhteys img{ padding:4px; border:#ffffff solid 1px; margin-bottom:25px;}
.yhteys .pallo{
  width: 40px;
  height: 40px;
  margin-top:5px;
  border-style: none;
  border-color: transparent;
  background-color: #FFFFFF;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  position: relative;
}



.yhteys .henkilot{ margin-top:30px;margin-bottom:30px;}
.yhteys .henkilot h3{  font-size:20px;margin:0; line-height:20px;}
.yhteys p{ font-size:14px; line-height:16px;  margin-bottom: 15px;  padding: 0;}

/* TEKIJAT */

.tekijat{ color:#ffffff;}
.tekijat .keskitys{ text-align:center; margin-bottom:40px;
  line-height: 23px;
  font-size: 19px;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-align: center;
  }
 .tekijat .keskitys p{
  line-height: 23px;
  font-size: 19px;
  color: #FFFFFF;
  letter-spacing: 1px;font-family: 'PT Sans Narrow', sans-serif;}
  .tekijat h1{
	font-family: 'Ovo', serif;
	color:#ffffff;line-height: 72px;
  color: #FFFFFF; margin:0;
  font-size: 60px;}
.tekijat img{ padding:4px; border:#ffffff solid 1px; margin-bottom:25px; margin-top:10px;}
.tekijat h3{font-size: 35px;  line-height: 42px;  font-family: ovo, serif; margin-bottom:0; margin-top:5px;}
.tekijat h5{font-size: 15px;line-height: 18px;letter-spacing: 5px;font-family: 'PT Sans Narrow', sans-serif; text-transform:uppercase; margin-top:0;}
.tekijat p{  line-height: 18px;
	font-family: 'Ovo', serif;
  font-size: 15px;
  font-weight: 400;}
/* PALVELUT */
.palvelut{ color:#ffffff;}
.palvelut .keskitys{ text-align:center; margin-bottom:40px;
  line-height: 23px;
  font-size: 19px;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-align: center;
  }
 .palvelut .keskitys p{
  line-height: 23px;
  font-size: 19px;
  color: #FFFFFF;
  letter-spacing: 1px;font-family: 'PT Sans Narrow', sans-serif;}
  .palvelut h1{
	font-family: 'Ovo', serif;
	color:#ffffff;line-height: 72px;
  color: #FFFFFF; margin:0;
  font-size: 60px;}
  .palvelut .col-sm-6 hr{ margin:10px 0;}
   .palvelut .col-sm-6 p{
  font-size: 20px;
  line-height: 24px;
  font-family: 'Ovo', serif; margin:6px 0 0 0; text-align:center}
    .palvelut .col-sm-6 p.asiakas{font-size: 10px;
  line-height: 12px;
  letter-spacing: 5px;
  font-family:'PT Sans Narrow', sans-serif;
  text-transform:uppercase; margin-bottom:70px; margin-top:0;}
  .palvelut h3{
	font-family: 'Ovo', serif;
	  line-height: 35px;
  color: #FFFFFF; margin:40px 0 0 0;
  font-size: 39px;
  text-align: left;
  margin-top:0;}
  .palvelut h3.small{
  font-size: 27px;}
  .palvelut img{
   /* border-radius: 50%;
	padding:4px;
	border:#FFFFFF 1px solid;*/
	margin-top: 10px;/* 40px */
	margin-bottom: 30px;/* 40px */}
  .palvelut .palvelu p{ font-size:14px;
  color: #FFFFFF;
  letter-spacing: 1px;
  margin:0;
  font-family: ovo, serif;
  margin-bottom:20px;
  text-align:left;
  }
  .eikuva{ padding:0 15px 0 0;}
  
.footer{ 
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 135px;
  background-color:rgba(0,0,0,0.6);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
footer .container{margin-bottom:0;}
footer .col-sm-3,footer .col-sm-7,footer .col-sm-2{ padding-top:25px;}
footer p{color:#ffffff;line-height: 12px;font-size: 10px;letter-spacing: 3px;
  font-family: 'PT Sans Narrow', sans-serif;  font-weight: 400; margin-top:15px;}
  
  
.btn-front {
  border: #FFFFFF solid 1px;
  color: #FFFFFF;
  background-color: rgba(255,255,255,0.2);
  border-radius:0;
  width:100%;
  margin:20px 0;
  text-transform:uppercase;
  line-height: 30px;
  letter-spacing: 5px;
  font-family: 'PT Sans Narrow',sans-serif;
}
.btn-front:hover,
.btn-front:focus,
.btn-front.focus,
.btn-front:active,
.btn-front.active,
.open > .dropdown-toggle.btn-front {
  color: #FFFFFF;
  background-color: rgba(255,255,255,0.3);
  border: #FFFFFF solid 1px;
}

.modal-open .modal {
  height: 100%;}
  @media (min-width: 768px){
  .modal-dialog{
  width: 600px;
  margin: 30px auto 50px;}
}

@media (min-width: 940px) {
.container{
	width:940px;
	position:relative;
}
}
@media (max-width: 939px) {
	.buttons{
	padding:6px;
}
.buttons:hover{
	background-color:rgba(255,255,255,0.3)
}
.buttons p{
	letter-spacing:1px;
}
footer p{margin-top:5px;}
.btn-front {
  letter-spacing: 2px;
  width:100%;
}
.vimonen {
  margin-left:-12px;
  width:120%;
}
}
@media (max-width: 768px) {
	.ball{ width:100%; height:auto; border-radius:50%;}
	
	.ball img{ width:100%; height:auto; border-radius:50%;}
	.buttons{
		float:left;
		clear:both;
		width:100%;
	}

.palvelut img{ width:100%;}
}
@media (max-width: 616px) {
.tyot .col-sm-4{ width:48%}
.btn {
  padding: 2px 12px;}
  .navbar-brand > img { margin-top:5px; max-height: 50px;
}
.tekijat img {
  margin-bottom: 0px;
  margin-top: 25px;}
}
@media (max-width: 550px) {
#frontpage h1{
	font-size:56px;
	line-height:50px;
}
#frontpage h3{
	font-size:20px;
}
body{margin-bottom:220px}
.footer{ height:220px;}
footer p{margin-top:0px;}
}
@media (max-width: 470px) {
.tyot h5{ font-size:18px;}
}
@media (max-width: 420px) {
.tyot .col-sm-4{ width:98%}
}