html{
  overflow-y:scroll;
}

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

button{
    border: 0;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner-background{ 
  background-color:rgba(255,255,255,1);
}


.introwrapper{
  padding:500px 15px 140px 15px;
  text-align:center;

}

.lg-thumb-outer.lg-grab {
  display:flex; justify-content: center;
}

#lg-counter {
  color: #FFF !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 300 !important;
}

.lg-backdrop {
    background: linear-gradient(0deg, #FFFFFF 5%, #FFFFFF00), linear-gradient(112deg, rgba(196,32,128,1) 0%, rgba(144,32,196,0.9) 12%, rgba(213,103,138,0.85) 39%, rgba(227,89,32,0.9) 59%, rgba(163,37,177,0.9) 91%, rgba(87,37,177,1) 100%);
}

.lg-icon:not(.lg-toggle-thumb) {
  color: #FFF !important;
}

.lg-icon:not(.lg-toggle-thumb):hover {
  color: #dc09e9 !important;
}


.lg-outer .lg-thumb-outer {
   background-color: #DDD!important;
}

.lg-toggle-thumb {
  color: #000 !important;
  background-color: #DDD!important;
}

.lg-toggle-thumb:hover {
  color: #dc09e9 !important;
}


.lg-actions .lg-next, .lg-actions .lg-prev {
  color: #FFF !important;
  background-color: #FFF0 !important;

}

.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
 
  color: #dc09e9 !important;
  
}

.lg-outer .lg-thumb-item { 
  border-radius: 0px !important;
}

.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: #dc09e9 !important;
}

.shrinkwrap{
  display:inline-flex;
}

.lauribox{
  display:inline-block;
}

.ls_prevnext{
  color:#AAAAAA;
}

.ls_prevnext:hover{
  color:#000000;
}

.cardwrapper{
    width: 460px;
    height: 500px;  
}

.text-capitalize {
  text-transform: capitalize;
}

.ytiedot {
    position:fixed;
    text-transform: uppercase;
    z-index:9999;
    bottom:0px;
    width:100%;
    height:50px;  
    text-align:center;
    background: #FFF;
}

.overlaylink {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

/*
.dioja4 .diakoko{  
  margin-left:3px;
  margin-right:3px;
}

.dioja3 .diakoko{
  width:85px !important;
  height:85px !important;
   margin-left:3px;
  margin-right:3px;
}

.dioja2 .diakoko{
  width:90px !important;
  height:90px !important;
   margin-left:3px;
  margin-right:3px;
}

.dioja1 .diakoko{
  width:100px;
  height:100px;
}
*/

.diakoko{
  
  width:100px;
  height:100px;

}

.width400{
  width:400px;
}


.kayntikortti{
 
  margin: 15px 15px 15px 15px;
  position: relative; 
  transform-style: preserve-3d;
  transform: translateZ(-230px) rotateY(0deg);  
  -moz-transform: translateZ(-230px) rotateY(0deg);  
  -webkit-transform: translateZ(-230px) rotateY(0deg);  
  transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  cursor: pointer;    
  animation-name:slidein;
  animation-duration:1s;
   
}
.kortti{
  
  margin: 15px 15px 15px 15px;
  position: relative; 
  transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  cursor: pointer; 
   
}

.korttiwrapper{
  --index: 0;
  z-index:1;
  display:inline-block;
  transition-delay: calc(0.025s * var(--index));
  perspective: 3000px;
  overflow:hidden;  
  box-sizing:border-box;
}

.vaaka {
  
  display:block;
  margin-bottom:5px;
}

.pysty {
  max-width:460px;
  display:inline-block;
  margin-bottom:5px;
}

.isopysty {
  max-width:1200px;
  width:80vw;
  display:inline-block;
  margin-bottom:5px;
}

@keyframes slidein{
  from{    
    opacity:0;
  }
  50%{    
    opacity:0;
  }
  to{    
    opacity:1;
  }
}

.biolinkki:hover{
  color: #b8178c !important;
}

.kommentit{
  display:inline-block;
}

.kommentit.sizeinvisible{
  display:none;
}

.kayntikortti > .front, .kayntikortti > .right, .kayntikortti > .left{
  position: absolute;  
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.kortti > .front, .kortti > .right{
 
  
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.front{  
  opacity: 1;
}

.right{      
  opacity: 0;
  transition: 300ms;
  position:absolute;
  left:0px;
  padding-top:65px;
  top:0px;
  z-index:0;
  /*
  background:#FFF;
  */
  width:100%;
  min-height:100%;
}

.left{      
  opacity: 0;
  transform: rotateY(180deg) translateZ(230px);  
  -moz-transform: rotateY(180deg) translateZ(230px);  
  -webkit-transform: rotateY(180deg) translateZ(230px);  
}

.back{      
  opacity: 0;
  transform: rotateY(270deg) translateZ(230px);  
  -moz-transform: rotateY(270deg) translateZ(230px);  
  -webkit-transform: rotateY(270deg) translateZ(230px);  
}

.slide {
  height: 100%;
  width: max-content/2;
}

/* animaatioframet */

.rotate0 { 
  transition: 0ms linear;
  transform: rotateY( 0deg);
  -moz-transform: rotateY( 0deg);
  -webkit-transform: translateZ(-230px) rotateY( 0deg);
}


.rotate90 {
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transform: translateZ(-230px) rotateY( -90deg);
  -moz-transform: translateZ(-230px) rotateY( -90deg);
  -webkit-transform: translateZ(-230px) rotateY( -90deg);
}

.rotate90_2 {
  --index: 0;
  transition-delay: calc(1s * var(--index));   
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transform: translateZ(-230px) rotateY( -90deg);
  -moz-transform: translateZ(-230px) rotateY( -90deg);
  -webkit-transform: translateZ(-230px) rotateY( -90deg);
}

.rotatehide{
  --index: 0;
  transition-delay: calc(0.05s * var(--index));
  transform: translateZ(-230px) rotateY( -90deg);
  -moz-transform: translateZ(-230px) rotateY( -90deg);
  -webkit-transform: translateZ(-230px) rotateY( -90deg);
}

.rotate180 {
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transform: translateZ(-230px) rotateY( -180deg);
  -moz-transform: translateZ(-230px) rotateY( -180deg);
  -webkit-transform: translateZ(-230px) rotateY( -180deg);
}


.rotate270 {
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transform: translateZ(-230px) rotateY( -270deg);
  -moz-transform: translateZ(-230px) rotateY( -270deg);
  -webkit-transform: translateZ(-230px) rotateY( -270deg);
}

.rotate360 {
  transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transform: translateZ(-230px) rotateY( -360deg);
  -moz-transform: translateZ(-230px) rotateY( -360deg);
  -webkit-transform: translateZ(-230px) rotateY( -360deg);
}

.opacity1{
  transition: all 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  opacity: 1;
}
.opacity0{
  transition: all 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  opacity: 0;
}

.opacitynolla{
  transition:250ms;
  opacity:0;
}

.showhamburger{
  transition:250ms;
  display:block !important;  
  opacity:1 !important;
  height:100vh !important;

}

.hamburger{  
  font-size:1.5rem;
  color: #FFF;
  margin-top:1px;
}

.pinkkihamburger{    
  color: #FFF !important; 
}

.hamburger:hover{  
  transition:100ms;
  color:rgba(199,99,199,1)
}

.linkbuttonclicked:not(.hidehamburger){
  
}

#hamburgermenu{
  display:none;
  transition:250ms;
  opacity:0;
  top:65px;
  height:1px;
  width:100%;
}
.pinkkilinkki{
  color: white !important;
}

.pinkkilinkki:hover{
  background-color: rgb(255,255,255) !important;
  color: rgb(199,99,199) !important;
}
.pinkki{
  transition:250ms;
  background: linear-gradient(0deg, #FFFFFF 5%, #FFFFFF00), linear-gradient(112deg, rgba(196,32,128,1) 0%, rgba(144,32,196,0.9) 12%, rgba(213,103,138,0.85) 39%, rgba(227,89,32,0.9) 59%, rgba(163,37,177,0.9) 91%, rgba(87,37,177,1) 100%) !important;

}
.valkoinen{
  transition:250ms;
  background: rgb(255,255,255);
}
.ylanapit{

  margin-top:0px;
  padding-top:25px;
  padding-bottom:15px;
}

.ohje{
  transition: 150ms ease-in-out;
  font-family:"Open Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing:0.035rem;
  padding:2px 8px 2px 8px;
  color: #000;
  cursor:pointer;
}

.linkbutton{  
  transition: 150ms ease-in-out;
  font-family:"Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight:300;
  letter-spacing:0.02rem;
  border: 1px solid transparent;
  padding:2px 8px 2px 8px;
  color: #FFF;
  cursor:pointer;
}



.linkbuttonclicked{
  transition: 150ms ease-in-out;
  background-color: rgb(231,191,231);
  border: 1px solid rgb(231,191,231) !important;
  text-decoration:none;
  color: rgb(199,99,199) !important;
}

.linkbutton:hover{
  transition: 150ms ease-in-out;
  color:  rgb(199,99,199);
  cursor:pointer !important;
}


.kortti:hover{
  transition-delay:200ms;
  
}


.kortti:hover .front{
  transition-delay:100ms;
  opacity:0.5;
}

.kortti:hover .right{
  transition-delay:200ms;
  opacity: 1; 
}

.lh_rem0p9 {
  line-height: 0.9rem;
}
.lh_rem1 {
  line-height: 1rem;
}

.lh_rem1p1 {
  line-height: 1.1rem;
}
.lh_rem1p3 {
  line-height: 1.3rem;
}
.lh_rem1p4 {
  line-height: 1.4rem;
}
.lh_rem1p5 {
  line-height: 1.5rem;
}
.lh_rem1p6 {
  line-height: 1.6rem;
}
.lh_rem1p7 {
  line-height: 1.7rem;
}
.lh_rem1p8 {
  line-height: 1.8rem;
}
.lh_rem2 {
  line-height: 2rem;
}
.lh_20 {
  line-height: 20px;
}
.lh_25 {
  line-height: 25px;
}
.lh_35 {
  line-height: 35px;
}
.otsikkovalistys {
  letter-spacing: 1.5px;
}
.ls0p5 {
  letter-spacing: 0.5px;
}
.ls1 {
  letter-spacing: 1px;
}
.ls1p5 {
  letter-spacing: 1.5px;
}
.ls2 {
  letter-spacing: 2px;
}
.italics {
  font-style: italic;
}

.w200 {
  font-weight: 200;
}

.w300 {
  font-weight: 300;
}

.w400 {
  font-weight: 400;
}

.w500 {
  font-weight: 500;
}

.w600 {
  font-weight: 600;
}

.w700 {
  font-weight: 700;
}

.w800 {
  font-weight: 800;
}

.w900 {
  font-weight: 900;
}

.rem0p9{
  font-size: 0.9rem;
}

.rem0p8{
  font-size: 0.8rem;
}

.rem0p7{
  font-size: 0.7rem;
}
.rem0p6{
  font-size: 0.6rem;
}
.rem0p5{
  font-size: 0.5rem;
}

.rem1 {
  font-size: 1rem;
}

.rem1p1 {
  font-size: 1.1rem;
}

.rem1p2 {
  font-size: 1.2rem;
}

.rem1p3 {
  font-size: 1.3rem;
}

.rem1p4 {
  font-size: 1.4rem;
}

.rem1p5 {
  font-size: 1.5rem;
}

.rem1p7 {
  font-size: 1.7rem;
}

.rem1p9 {
  font-size: 1.9rem;
}

.rem2 {
  font-size: 2rem;
}

.rem2p3 {
  font-size: 2.3rem;
}

.rem3 {
  font-size: 3rem;
}

.rem3p5 {
  font-size: 3.5rem;
}

.rem4 {
  font-size: 4rem;
}

.hcenter{
  text-align:center;
}

.bungee{
  font-family: 'Bungee Hairline', cursive;
}

.raleway{
  font-family:'Raleway', sans-serif;
}
.alegreya{
  font-family:'Alegreya Sans', sans-serif;
}
.montserrat{
  font-family:'Montserrat', sans-serif;
}
.opensans{
  font-family:'Open Sans', sans-serif;
}

.lora{
  font-family:'Lora', serif;
}

.turret{
  font-family:'Turret Road', cursive;
}

.bellota{
  font-family:'Bellota', cursive;
}

.gruppo{
  font-family:'Gruppo', cursive;
}




.rem0p8{
  font-size:0.8rem;
}
.white{
  color: #FFFFFF;
}
.black{
  color: #000000;
}
.magenta{
  color: #812358;
}
.lappukoko{  
 
  padding:0;  
  background-size:100%;
  -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
        box-sizing: content-box;  
}

.avainsanat{
  margin-top:15px;
  line-height:26px;
}

.hidden{
  display:none;
}

.size460x600{
  width:460px;
  height:500px; 
  opacity:1; 
}

.sizeinvisible{
  width:0px !important;
  height:0px !important;  
  opacity:0 !important;
  padding:0px !important;
  margin:0px !important;
}

.lg-off .lg-object {
    transform: none !important
}

.marginlr15{
  margin-left:15px;
  margin-right:15px;
}

.hidethis{
  position:absolute;
  visibility: hidden;
  opacity: 0;  
  --index: 0;
  transition-delay: calc(0.025s * var(--index));   
  transition: 0.5s ease-in-out;
}

.slidethis{
  --index: 0;
  transition-delay: calc(0.025s * var(--index));   
  width: 0px !important;
}

.rightsulkunappi{
  cursor:pointer;
}

.height400{
  height:400px;
}

.height412{
  height:412px;
}

.introteksti{
  padding-top:30px;
}

/*
#sisalto {
  background: linear-gradient(205deg, rgba(69,206,96,0.5) 0%, rgba(221,108,62,0.5) 50%, rgba(205,90,218,0.5) 100%);
  background-attachment: fixed;
}
*/

.gradientbox{   
  overflow:hidden;  
}

.gradient0{
 
}
.gradient1{
  background-image: linear-gradient(180deg, rgba(95,161,196,0) 40%, rgba(95,161,196,1));
}
.gradient2{
  background-image: linear-gradient(180deg, rgba(164,88,168,0) 40%, rgba(199,99,199,1));
}
.gradient3{
  background-image: linear-gradient(180deg, rgba(205,96,142,0) 50%, rgba(205,96,142,1));
}
.gradient4{
  background-image: linear-gradient(180deg, rgba(218,151,88,0) 50%, rgba(218,151,88,1));
}
  
.calc30{
  width:calc(100% - 3px);
}  
.etulappu{
  position:relative;
  top:0px;
  left:0px;
}

.ekapysty > a > img{
  max-width:700px;
}


.translatey30{
    transform:translateY(-70%);
  }

#hamburgermenucontainer{
  display:none;
  margin-top:2px !important;
}

.kolmekuvaa > a > img {
  width:100%;
}

.max1000levea {
  max-width:1000px !important;
}

.kaksikuvaa > a > img {
  width:100%;
}

.hamburgerlinkit{
  padding-left:15px;
  padding-top:5px;
}

.leipis {
  padding-left:30%;
  padding-right:30%;
}
.leipis2 {
  padding-left:30%;
  padding-right:30%;
}

.piilotaisolla{
  display:none;
}

@media screen and (max-width:1400px) {
  .piiloylanappi:not(.vaihdakieli){
    display:none;
  }
  #hamburgermenucontainer{
    display:inline-block;
  }
}

@media screen and (max-width:991px) {

  .headlinetext{
    padding-left:0px;
    font-size:1.7rem;
  }
  .diakoko{
    width:62px;
    height:62px;
  }
  .width400{
    width:300px;
  }
  .translatey30{
    transform:translateY(0%);
  }

  .leipis{
    padding-left:20%;
    padding-right:20%;
  }

  .leipis2{
    padding-left:15px;
    padding-right:15px;
  }

}

@media screen and (max-width:975px) {
  .vaihdakieli{
    display:none;
  }
  .size460x600{
    width:365px;
    height:420px;
  }  
  .height400{
    height:350px;
  }
  .height412{
    height:370px;
  }
  .headlinetext{
    padding-left:0px;
    font-size:1.7rem;
  }
  .introwrapper{
    padding: 120px 15px 60px 15px;

  }
  .introteksti{
    padding-right:150px;
    padding-left:150px;
  }

  .introwrapper > .row > div{
    color:#FFF;

  }
 
}

@media screen and (max-width:790px) {
  .piilotapienella2{
    display:none;
  }
}


@media screen and (max-width:768px) {
  .size460x600{
    width:354px;
    height:410px;
  }
  .headlinetext{
    padding-left:0px;
    font-size:1.2rem;
  }
  .height400{
    height:350px;
  }
  .height412{
    height:370px;
  }
  .clientagency{
   
  }  
  .ekapysty > a > img{
    max-width:100%;
  }
  
  .introteksti{
    padding-right:100px;
    padding-left:100px;
  }
   
  .ytietonapit{
    text-align:left;
    padding-left:22px;
  }
  .linkbutton{
    font-size:1rem;
    font-weight:300;
  }
  .sivustolink{
    font-size:0.9rem;
  }
  .avainsanat{
    margin-top:-10px;
  }

  .diakoko{
    width:58px;
    height:58px;
  }

  .dioja4 .diakoko{ 
  width:65px;
  height:65px; 
  margin-left:3px;
  margin-right:3px;
  }

  .introwrapper{
    padding:60px 45px 0px 15px;
    margin:15px;
    color:#FFF;

  }
  .introwrapper > .row > div{
    color:#FFF;

  }
  .introwrapper > .row > div > p{
    line-height:1.3rem  ;
  }

  .hamburgerlinkit{
    padding-left:22px;
  }
   .introteksti{
    padding-top:10px;
  }



}

@media screen and (max-width:575px){
  #hamburgermenu{
    padding-top:22px;
  }
   .otsikko_right{
    font-size:1.8rem !important;
  }
  

  .leipis{
    padding-left:20px;
    padding-right:20px;
  }

  .piilotapienella{
    display:none;
  }

  .piilotaisolla{
    display:inline-block;
  }
  .introteksti{
    padding-right:45px;
    padding-left:45px;
  }

}

@media screen and (max-width:412px) {
   .size460x600{
    width:360px;
    height:440px;
  }
  .height400{
    height:350px;
  }
  .height412{
    height:370px;
  }

  .introteksti{
    padding-right:30px;
    padding-left:30px;
  }
  

}
@media screen and (max-width:390px) {
  .size460x600{
    width:350px;
    height:370px;
  }
  .height400{
    height:250px;
  }
  .height412{
    height:270px;
  }
  .introteksti{
    padding-right:15px;
    padding-left:15px;
  }
  .introwrapper{
    padding:60px 0px 0px 10px;
    margin:15px;
    color:#FFF;

  }


}

@media screen and (max-width:375px) {
  .size460x600{
    width:341px;
    height:370px;
  }
  .height400{
    height:250px;
  }
  .height412{
    height:270px;
  }
  .otsikko_right{
    font-size:1.2rem;
  }
  .avainsanat{
    font-size:0.6rem;
    line-height:10px;
  }
  .introwrapper > .row{
    margin:0px 30px 0px 4px;
    padding:2px;
  }
  .introwrapper > .row > .col-12{ 
    padding:0px;
    margin:0px;
  }

  .introteksti{
    padding-top:12px !important;
  }

  


}
@media screen and (max-width:360px) {
  .size460x600{
    width:330px;
    height:370px;
  }
  .height400{
    height:250px;
  }
  .height412{
    height:270px;
  }
  .leipis{
  }
  .ytietonapit{
    margin:0px;
    padding:0px 0px 0px 10px;
  }
  #hamburgermenucontainer{
    margin-right:15px !important;
  }
  .hamburgerlinkit{
    padding-left:12px;
  }
  .infootsikko{
    font-size:1.4rem !important;
    letter-spacing:0.3rem !important;
    line-height:1.5rem !important;
  }
}

@media screen and (max-width:320px) {
  .size460x600{
    width:290px;
    height:340px;
  }
  .height400{
    height:250px;
  }
  .height412{
    height:270px;
  }
  .width400{
    width:250px;
  }
  .diakoko{
    width:48px;
    height:48px;
  }
  .introwrapper{
    padding:60px 0px 0px 10px;
    margin:3px;
    color:#FFF;

  }
  

}