@import url('https://fonts.googleapis.com/css?family=Lora:400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&subset=latin-ext');


h1,h2,h3,h4{
  line-height:1.3;
}
h1,h2{
  text-transform: uppercase;
}

/* Popup newsletter */

 .newsletter-form-opener{
  font-family: Oswald;
    font-size: 20px;
    color: #04080D;
    color: rgb(4, 8, 13);
    border: 2px solid #57BFAA;
    padding: 5px 20px;
 }
.newsletter-form-opener:hover, .newsletter-form-opener:focus, .newsletter-form-opener:active{
    color: white;
    background-color: #57BFAA;
    text-decoration: none;
 }

.pum-container{
      padding: 50px 60px !important;
    box-shadow: none !important;
    border: none !important;
}

.pum-title{
  margin-bottom:30px !important;
}
.pum-container input{
      padding: 6px 10px;
}
.pum-container button{
      background: white;
    font-family: Oswald;
    font-size: 20px;
    color: #04080D;
    text-transform: uppercase;
    margin-top: 20px;
     border: 2px solid #57BFAA;
    padding: 5px 20px;
    transition: all 0.5s;
}
.pum-close{
    height: 30px !important;
    width: 30px !important;
    left: auto !important;
    right: 20px !important;
    bottom: auto !important;
    top: 0px !important;
    padding: 0px !important;
    color: black !important;
    font-family: inherit !important;
    font-size: 40px !important;
    line-height: 26px !important;
    border: 2px solid #ffffff !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: white !important;
}
input[type=checkbox]{
    margin-right: 10px !important;
}



/* Navbar */
.navbar {padding-top: 25px; padding-bottom: 20px;}


/* Header */
#header {min-height: 687px; background-size: cover;}
#header h1 {font-family : Oswald;font-weight : bold;font-size : 95px;color : #FFFFFF;color : rgb(255, 255, 255); text-align: center; padding-top: 75px;}
#header .readMore {transition:all 0.3s;background-image: url("../images/heart.png"); display:block; margin: 30px auto 0 auto; text-align: center; width: 130px; height: 110px; font-family : Oswald; font-size : 20px; color : #04080D; color : rgb(4, 8, 13);}
#header .readMore a {color : #04080D; color : rgb(4, 8, 13); width: 130px; height: 110px;padding-top: 35px; display: block;}
#header .readMore a:hover {text-decoration: none;}
#header .readMore.init:hover {transform: scale(1.2)}
#header .readMore.init{animation: beat 0.4s infinite alternate;animation-iteration-count: 4;animation-delay: 2s;}
/* Heartbeat animation */
@keyframes beat{to { transform: scale(1.1); } }

/* Menu */
.hamburger {position: absolute!important; right: 45px!important; top: 45px!important; left:unset!important; }
.fat-nav{top: 0px!important; background-image: url("../images/menuBG.png")!important; opacity:0;display:none !important;}
.fat-nav.active{z-index:1000;display:block !important;opacity:1 !important;}
.fat-nav ul {text-transform:uppercase;display:block!important; vertical-align:unset!important; padding-top: 40px!important; }
.fat-nav ul li a { font-family : Oswald; font-weight : bold;font-size : 60px; color : #FFFFFF; color : rgb(255, 255, 255);}
.fat-nav ul li a:hover {opacity:0.7;}
.fat-nav ul li ul { padding-top: 0px!important; border-top: 2px solid #EBAFD0; display: table!important; margin: 0 auto!important;}
.fat-nav ul li ul li{ padding: 0px!important; line-height: 42px;}
.fat-nav ul li ul li a { font-size : 28px; color : #FFFFFF; color : rgb(255, 255, 255);}
   
.hamburger.active .hamburger__icon:after, .hamburger.active .hamburger__icon:before {background-color: #fff!important;}


/* Header in Subpages */
#headerSubpage {min-height: 687px; background-size: cover; position: relative; margin-bottom:40px;}
#headerSubpage.headerServicesSub{min-height: 390px;}
#headerSubpage h1 {font-family: Oswald; font-weight : bold; font-size : 80px; color : #FFFFFF; color : rgb(255, 255, 255); padding-top: 75px; position: absolute; bottom: 45px;}
#headerSubpage h1.huge { position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: Oswald; font-weight : bold; font-size : 103px; color : #FFFFFF; color : rgb(255, 255, 255); padding-top:0; position: absolute; bottom: unset; margin-top:0;}

/* Section headers */
.sectionHeader h1{margin: 0; padding: 0; line-height: 1;}

/* Palvelut Section */
#palvelut{}
.palvelutHeader{background-color: #262626; padding-top: 60px; padding-bottom: 60px;}
.palvelutHeader h1{  font-family : Oswald; font-weight : bold; font-size : 74px; color : #FFFFFF; color : rgb(255, 255, 255); }

#palvelut h2 {font-family : Oswald; font-weight : bold; font-size : 60px; color : #04080D; color : rgb(4, 8, 13); padding-top: 50px; padding-bottom: 25px;}
#palvelut ul {padding-left: 20px; padding-bottom: 20px;}
#palvelut ul li {font-family : Lora; font-size : 22px; color : #04080D; color : rgb(4, 8, 13);}
#palvelut .palvelutItem:nth-child(1) a.readMore {font-family : Oswald; font-size : 20px; color : #04080D; color : rgb(4, 8, 13); border: 2px solid #00A0D4; padding: 5px 20px; z-index: 100; position: relative;}
#palvelut .palvelutItem:nth-child(2) a.readMore {font-family : Oswald; font-size : 20px; color : #04080D; color : rgb(4, 8, 13); border: 2px solid #57BFAA; padding: 5px 20px;}
#palvelut .palvelutItem:nth-child(3) a.readMore {font-family : Oswald; font-size : 20px; color : #04080D; color : rgb(4, 8, 13); border: 2px solid #DE7E84; padding: 5px 20px;}
#palvelut .palvelutItem a.readMore:hover{
  transition:all 0.5s;
  text-decoration: none;
  color:white;
}
#palvelut .palvelutItem:nth-child(1) a.readMore:hover{
  background: #00A0D4;
} 
#palvelut .palvelutItem:nth-child(2) a.readMore:hover{
  background: #57BFAA;
} 
#palvelut .palvelutItem:nth-child(3) a.readMore:hover{
  background: #DE7E84;
} 
.palvelutItem {clear: both;}
.stamp {padding-top: 30px; }
.stamp a{
        padding: 10px 20px;
      border: 2px solid red;
      color: black;
      font-size: 30px;
      text-decoration: none;
      transform: rotate(-10deg);
      letter-spacing: -1px;
      display: inline-block;
      transition: all 0.5s;
  }
  .stamp a:hover{
    transform: rotate(-5deg);
    border-width: 3px;
    padding: 12px 22px;
      font-size: 33px;
    text-decoration: none;  
  }



/* Tyot Section */
#tyot{margin-top: 60px;padding-bottom:60px;background-image: url("../images/tyotBG.png")}
#tyot img{max-width: 100%; max-height: 100%;}
#tyot .row.tyolistaus{padding-top:30px;}
.tyotHeader{background-color: #262626; padding-top: 60px; padding-bottom: 60px;}
.tyotHeader h1{  font-family : Oswald; font-weight : bold; font-size : 74px; color : #FFFFFF; color : rgb(255, 255, 255);margin: 0; padding: 0;line-height: 1;}

.tyotImage {overflow:hidden;}
.tyotImage img {-moz-transition: all 1s;-webkit-transition: all 1s;transition: all 1s;}
.tyotImage:hover img {-moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 
.tyotTitle {background-color:#262626;}
.tyotTitle h2{font-family: Oswald; font-weight : bold; font-size : 25px; color : #FFFFFF; color : rgb(255, 255, 255); margin: 0px; padding: 15px 10px; }
.tyotTitle h2 a{display:block; color:white;}
.tyotTitle h2 a:hover{text-decoration: none}
#tyot .container .col-xs-12 {margin-top:20px;margin-bottom:20px}

.tyotCats {position: absolute; right: 35px; z-index: 1000; top:15px; opacity: 0;}
.tyotCats span {display: block; padding: 5px; margin-top: 8px; width: 130px;   font-family : Oswald; font-weight : bold; font-size : 15px; color : #FFFFFF; color : rgb(255, 255, 255);}
.tyotCats span:nth-child(1) {background-color: #00A0D4}
.tyotCats span:nth-child(2) {background-color: #57BFAA}
.tyotCats span:nth-child(3) {background-color: #DE7E84}

.read-more-wrap{
  clear: left;text-align: center;padding: 30px 0 0;
}
a.readMore {
  background: white;
    font-family: Oswald;
    font-size: 20px;
    color: #04080D;
    border: 2px solid #DE7E84;
    padding: 5px 20px;
    transition: all 0.5s;
}
a.readMore:hover{
    background: #DE7E84;
    text-decoration: none;
    color: white;
}

/* Ajan Section */
#ajan{;}
#ajan img{max-width: 100%; max-height: 100%;}
#ajan h3{  font-family : Oswald; font-size : 22px; color : #04080D; color : rgb(4, 8, 13); }
#ajan h1.ajanSubpage { margin-top: 10px;}
#ajan h2.ajanSubpage {font-family : Oswald; font-size : 28px; color : #04080D; color : rgb(4, 8, 13); font-weight: 400; text-align: right; margin-bottom: 0px;}
#ajan h3.ajanSubpage {font-family : Lora; font-size : 22px; color : #04080D; color : rgb(4, 8, 13); font-weight: 300; text-align: right; margin-top: 0px; line-height: 32px}
#ajan h1 cite {  font-family : Oswald; font-size : 45px; color : #04080D; color : rgb(4, 8, 13); font-style: unset; font-weight: 400; line-height: 56px; padding-top: 0px;}
#ajan .social{margin-top:110px;}


.ajanHeader{background-color: #262626; padding-top: 60px; padding-bottom: 60px; margin-bottom: 50px;}
.ajanHeader h1{  font-family : Oswald; font-weight : bold; font-size : 74px; color : #FFFFFF; color : rgb(255, 255, 255);}

#ajan h2{text-transform: uppercase; font-family : Oswald; font-weight : bold; font-size : 40px; color : #04080D; color : rgb(4, 8, 13);  padding-top: 15px;}
#ajan h2 a{text-decoration: none;color:#04080D;}
#ajan h2 a:hover{text-decoration: underline;}
#ajan h2 span{padding:0 !important;color : #EBAFD0;}

#ajan p {font-family: Lora; font-size : 22px; color: #04080D;color: rgb(4, 8, 13); padding-top: 15px; padding-bottom: 10px;}

#ajan .col-sm-9 span, #ajan .col-sm-6 span{font-family: Oswald; font-size : 20px; color : #6C7277; color : rgb(108, 114, 119); padding-top: 20px; padding-bottom: 30px; display: block;}
#ajan .social img {margin-right: 15px; margin-top:-10px; width:56px;} 
#ajan .social img.social-last {margin-right: 25px;} 

#ajan .social h3 {display: inline; font-family: Oswald;font-size : 22px;color : #04080D;color : rgb(4, 8, 13); font-weight: 400; letter-spacing: 1px; margin-left: 5px; margin-top: 5px;} 
#ajan form {display: inline; font-family: Oswald; margin-left: 30px;}
#ajan form .input-group {margin: 20px auto; display: inline } 
#ajan form input.btn.btn-sm, input.btn.btn-sm:focus {border:1px solid #6f6d6c; background-color:#ffe4e0; outline: none; width: 320px; height: 45px; border-radius: 0px;font-size : 21px;} 
#ajan form button.btn {margin-left: -5px; background-color:#e0727a;width: 100px; height: 45px; border-radius: 0px; color : #FFFFFF; font-size : 21px;}
#ajan form button.btn:hover {opacity: 0.9;}
.tunnisteet a{text-transform: uppercase; color : #6C7277}

#ajan ul li{font-family: Lora;
font-size: 22px;
color: #04080D;
color: rgb(4, 8, 13);
padding-top: 15px;
padding-bottom: 10px;}
#ajan ul.ajan-navi {list-style-type: none; padding-left: 15px;}
#ajan ul.ajan-navi li:nth-child(1) {padding-top:10px;}
#ajan ul.ajan-navi li {text-transform: uppercase; font-family : Oswald;font-size : 22px;color : #04080D;color : rgb(4, 8, 13); line-height: 26px; padding-bottom: 25px; padding-top:25px; border-bottom:1px solid #04080d;}
#ajan ul.ajan-navi li a{color : #04080D;color : rgb(4, 8, 13); line-height: 26px;}
#ajan ul.ajan-navi span {color : #EBAFD0;color : rgb(235, 175, 208); font-weight: 300;}

#ajan aside {text-align: right; }
#ajan aside h2 {font-family : Oswald; font-size : 37px; color : #04080D; color : rgb(4, 8, 13); font-weight: 400; }
#ajan aside ul li a {font-family : Oswald; font-size : 37px; color : #04080D; color : rgb(4, 8, 13); font-weight: 300;  padding-bottom: 5px; border-bottom: 2px solid #EBAFD0}
#ajan aside ul li a:hover {opacity: 0.65; text-decoration: none;}
#ajan aside ul li {border: none; padding-top: 25px;list-style-type: none; text-transform: uppercase}
#ajan aside ul li:nth-child(1) { padding-top: 25px}



/* Tutustu */
#tutustu {background-image: url("../images/tyotBG.png"); padding-bottom: 45px}
#tutustu .tutustuHeader {background-color: #fff; padding-top: 25px; padding-bottom: 25px}
#tutustu .tutustuHeader h1 {  font-family : Oswald; font-weight:400; font-size : 25px; color : #04080D; color : rgb(4, 8, 13);}


.tutustuImage {overflow:hidden;}
.tutustuImage img {-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
.tutustuImage:hover img {-moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .tyotTitle {background-color:#262626;}
.tutustuTitle {background-color:#262626;}
.tutustuTitle h2{font-family: Oswald; font-weight : bold; font-size : 25px; color : #FFFFFF; color : rgb(255, 255, 255); margin: 0px; padding: 15px 10px; }

/* subpage */
.single-works .works-content a{
  color : #04080D;
  font-family : Oswald;
}
p a{
  color : #04080D;
  font-family : Oswald;
}
.clearfix{clear:both;}

/* Yhteystiedot */
#yhteystiedot{margin-top: 60px;}
#yhteystiedot img{max-width: 100%; max-height: 100%;}
.yhteystiedotHeader{background-color: #262626; padding-top: 60px; padding-bottom: 60px; margin-bottom: 30px;}
.yhteystiedotHeader h1{  font-family : Oswald; font-weight : bold; font-size : 74px; color : #FFFFFF; color : rgb(255, 255, 255);}

#yhteystiedot h2 {font-weight : bold; font-size : 40px; color : #04080D;font-family : Oswald;}
#yhteystiedot h3 {font-weight: 400; font-size : 22px; color : #04080D;font-family : Oswald; letter-spacing: 1px; line-height: 30px; padding-top: 8px;}
#yhteystiedot .main h3 {padding-top: 8px;}

#yhteystiedot .partner{padding-bottom: 20px}
#yhteystiedot .partner img {margin-top: 25px; margin-bottom: 25px}
#yhteystiedot .partner h3 {padding-top: 0px; margin: 0px; text-transform: uppercase;}
#yhteystiedot .partner h4 {padding-top: 0px; margin: 0px; font-family : Lora; font-size : 22px; color : #04080D; color : rgb(4, 8, 13);}
#yhteystiedot .partner p {font-family : Lora; font-size : 22px; color : #04080D; color : rgb(4, 8, 13); padding-top: 35px}

/* Google Map Full-width */
.googlemap {position: relative; padding-bottom: 760px; height: 0; margin-top: 100px; overflow: hidden; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.googlemap iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 760px !important; }


@media (min-width: 1300px)
{
.container {max-width: 1280px;}
}

@media (min-width: 1200px)
{

}


@media (min-width: 992px)
{
   
}

@media (min-width: 768px)
{
	.palvelutImage1 {position: absolute;margin-top: -170px;}
	.palvelutImage2 {position: absolute;margin-top: -40px; margin-left: 70px;}
	.palvelutImage3 {position: absolute;margin-top: -20px; margin-left: 130px;}
	.stamp {padding-top: 130px; padding-left: 80px;}

  #tyot .container .col-sm-6{
    padding-left:20px;
    padding-right:20px;
  }
  #tyot .row.tyolistaus{
    margin-left:-20px;
    margin-right:-20px;
  }
}

@media (max-width: 767px)
{	
  .headerServicesSub{background-image:none !important;}
  #header h1 {font-size: 45px;}
	.fat-nav ul {padding-top: 30px!important;}
	.palvelutImage1, .palvelutImage2, .palvelutImage3 {max-height: 100%;max-width: 100%;}
	.hamburger {position: absolute!important; right: 15px!important; top: 42px!important; left: unset!important; } 
	.fat-nav ul li a{font-size: 32px!important;}
	.fat-nav ul li ul li a{font-size: 24px!important;}
  .fat-nav ul li ul li {

    
    line-height: 32px;

}
  #ajan h2.ajanSubpage.quote-author {font-size : 24px; margin-bottom:5px; }
#ajan h3.ajanSubpage.quote-credentials { font-size : 18px;  line-height: 1.3}
#ajan h1.quote cite {  font-size : 35px; line-height: 1.3}
}



@media (min-width: 576px) and (max-width: 1100px)
{
   .palvelutImage3, .palvelutImage2, .palvelutImage1{max-width: 100%;max-height: 100%; position: relative; margin: 0px;}
   #ajan aside ul li a {font-size: 30px}
   #palvelut h2 {font-size:52px;}
}

@media (max-width: 575px)
{
  	#header h1 {font-size: 45px;}
	#header {min-height: 520px; background-size: cover;}
  p{font-size:18px;}
  .sectionHeader{padding-top:40px;padding-bottom: 40px}

  	.palvelutHeader h1, .tyotHeader h1, .ajanHeader h1, .yhteystiedotHeader h1 {font-size: 45px;}
    .palvelutItem{padding-top:20px;}
   	#palvelut h2 {font-size: 40px; padding-top: 0px;}
   	#palvelut ul li {font-size: 18px;}
   	#palvelut img{display:none;max-width: 60%; max-height: 60%; padding-top: 40px; }

	#ajan {margin-bottom: 20px}
	#ajan h2{ font-size: 31px;}
  #ajan p{font-size:18px;}
   	#ajan .social h3 {display: block; margin-left:0px; margin-top: 25px;}
   	#ajan form {margin-left: 0px; }
   	#ajan form input.btn.btn-sm, input.btn.btn-sm:focus {width: 190px;}
   	#ajan ul {padding-top: 50px; padding-left:0;}
    #ajan ul span{display: block; padding-top: 2px;}
   	#headerSubpage h1{font-size: 56px; padding-left: 15px;}
   	#headerSubpage {min-height: 380px;}
    #headerSubpage.headerServicesSub{min-height: 290px;}

   	.tutustuTitle {margin-bottom: 15px;}
   	#headerSubpage h1.huge {font-size: 70px; max-width: 95%;word-wrap: break-word;padding: 0 20px;}
    #ajan aside {text-align: left}
    #ajan aside ul li {padding-top:5px;}
   	#ajan aside ul li a {font-size: 26px;}
   	#ajan aside ul  {padding-top: 0px;padding-bottom:40px;}

    #yhteystiedot .partner p{font-size:18px;}
    table.footer td{
      width:100% !important;
      display:block;
      margin:0 0 -10px 0 !important;
      padding:30px 30px 0;

    }
   table.footer td.gdpr{
      padding-bottom: 40px;
margin-bottom: 0 !important;
    }
    .margin80{
      margin:0 !important;
    }
}


@media (max-width: 360px)
{
  	#header h1 {font-size: 38px;}
	#header {min-height: 520px; background-size: cover;}

  	.palvelutHeader h1, .tyotHeader h1, .ajanHeader h1, .yhteystiedotHeader h1 {font-size: 38px;}
}