/*.site-header__top:has(+ #header.sticky) {
    background: var(--color1) !important;
}*/
#showcase a.btn.btn-switcher-primary.btn-switcher-secondary {
    border-color: var(--color3);
    color: var(--color3);
}
#showcase a.btn.btn-switcher-primary.btn-switcher-secondary:hover {
    border-color: var(--color3) !important;
    color: var(--color4) !important;
    background: var(--color3) !important;
}
#showcase a.btn.btn-switcher-primary.btn-switcher-secondary:hover {
    border-color: var(--color3);
    color: var(--color3);
}
.kiitos {
    padding-top: 10rem;
}
.kiitos h1 {
    font-size: 2rem;
	max-width:900px;
	margin:0 auto;
}
.kiitos-col .editor-content__item {
    max-width: 500px;
    margin: 0 auto;
}
.flags img {
    max-width: 35px;
    box-shadow: rgb(255 255 255 / 27%) 0px 2px 24px;
}
.flags ul li a {
    padding: 6px;
}
@media (max-width:991px) {
	.kiitos {
		padding-top: 5rem;
	}
	.kiitos h1 {
		font-size: 1.3rem;
	}
}
.jalleenmyyja {
    margin-bottom: 0 !important;
}
.jalleenmyyja {
    margin-bottom: 0 !important;
    border-top: 2px solid var(--color3);
    padding-top: 2rem;
}
section.content-section:has(.jalleenmyyja) img {
    max-width: 200px;
}

@media (min-width:768px) {
.nav-gradient .site-header__top {
        position: relative !important;
        padding-top: 1.2rem;
    }
/*.nav-gradient .site-header .sticky {
        background: var(--color1) !important;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
        transition: background 0.5s ease, box-shadow 0.5s ease;
    }*/
.nav-gradient .site-header__bottom:not(.sticky), #header.sticky {
        padding: 1.5rem 1.5rem 1.5rem !important;
    }
}
/* Kieliversiot */

@media (min-width: 991.98px) {
.ml-1.top-buttons {
    padding-right: 1.2rem;
}
#header.sticky {
	transition: background 0.5s ease, box-shadow 0.5s ease;
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 10000;
}
   /* .site-header__top:has(+ #header.sticky) {
        position: fixed;
        width: 100%;
        top: 0;
        min-height: 0;

    }*/
}



/*fontit */

h1, h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

h3, h4 {
	font-weight: bold;
}	

#content-top a:not(.btn) {
    color: var(--color3);
}

h2 span {
	color: var(--color3);
}

.faq li, 
.faq a {
	color: var(--color4)!important;
}

/* Valikko */

.desktop-main-menu a {
    font-weight: bold;
	text-transform: uppercase;
}

.desktop-main-menu li.current > a {
    color: var(--color3)!important; 
}


/* Button */

.btn {
	font-weight: bold;
	border: 2px solid;
}	

/* Hero */


.hero-slider__overlay {
    background: #121212;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.62) 54%, rgba(18, 18, 18, 1) 100%);
}


.hero-slider__video {
    border: 2px solid #121212;
}



/* Logot */

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 14))}
}


.logot {
	margin: auto;
	overflow:hidden;
	position: relative;
	width: 100%;
}
	.logot:before,
	.logot:after {
		
		content: "";
		height: 100px;
		position: absolute;
		width: 200px;
		z-index: 2;
	}
	
	.logot:after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	.logot:before {
		left: 0;
		top: 0;
	}
	
	.logo-track {
		animation: scroll 40s linear infinite;
		display: flex;
		width: calc(250px * 28);
	}
	
	.slide {
		height: 100px;
		width: 250px;
		align-content: center;
	}



.logot {padding:50px 0;}

.logot img {

max-width:150px;
min-width:150px;
height:auto;
padding:10px;
background:none;
filter:grayscale(1) invert(1);
}

/* Rakenne */

.pad-top {
	padding-top: 3rem;
}	

.pad-bot {
	padding-bottom: 2rem;
}	

#main-content {
	background-color: var(--color1);
}	

#main-content h1,
#main-content h2,
#main-content p,
#main-content li {
	color: var(--color4);
}
#main-content a {
	color: var(--color3);
}

#main-content .btn {
	border-color: var(--color3);
}

#section-tertiary h2, 
#section-tertiary h3 {
	color: var(--color4);
}

#section-tertiary .btn {
	color: var(--color4)!important;
	border-color: var(--color4)!important;
}

#section-primary h3 {
	color: var(--color3);
}
#main-before {
	background-color: var(--color1);
}	

/* Editori */


.editor {
    padding: 1rem;
}



/* Blogi */
.newspost1 .newspost__item blockquote {
    position: relative;
    font-style: italic;
    padding: 1rem 3.5rem;
    margin-left: 1rem; 
}

.newspost1 .newspost__item blockquote::before {
    content: "";
    position: absolute;
    left: 1.5rem; 
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color3);
}

.newspost1 .newspost__item blockquote p {
	font-size: 1.4rem;
}	

.newspost1 .newspost__item-img-holder img {
    width: 100%;
    max-height: 700px;
}

.news1 .newslist-item__img-holder {
    position: relative; 
    height: 300px; 
}


/* lomake */

.basic-form h2 {
	color:var(--color3)!important;
}	

.form-control {
    color: var(--color3)!important;
	border-width: 2px; 
    border-style: solid; 
    border-color: var(--color3) !important;
    background-color: var(--color1);
}
	

.d-block {
	font-weight: bold;
	color:var(--color3);
}	

span {
    color: var(--color3);
}

input {
	background-color: var(--color1)!important;
}

.form-control-static {
	color: var(--color3)!important;
}	

.sivu31 .btn, .sivu67 .btn, .sivu85 .btn  {
	color: var(--color3)!important;
}	


/* Footer */


.site-footer { 
    background: linear-gradient(180deg, rgba(18, 18, 18, 1) 0%, rgba(18, 18, 18, 0.62) 56%, rgba(18, 18, 18, 0) 100%), 
                url("/media/tiedostot/kuvituskuvat/adobestock_195303913.jpeg");
}




/* Liukuteksti viidelle sloganille beamace */

#liukuteksti5 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  min-height: 6em;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#liukuteksti5 .teksti-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#liukuteksti5 h2 {
  margin: 0;
  opacity: 0;
  position: absolute;
  animation: fadeInText5 15s infinite;
  width: 100%;
  font-size: 3rem;
  line-height: 1.2;
}

#liukuteksti5 h2:nth-child(1) { animation-delay: 0s; }
#liukuteksti5 h2:nth-child(2) { animation-delay: 3s; }
#liukuteksti5 h2:nth-child(3) { animation-delay: 6s; }
#liukuteksti5 h2:nth-child(4) { animation-delay: 9s; }
#liukuteksti5 h2:nth-child(5) { animation-delay: 12s; }

@keyframes fadeInText5 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }  
  100% { opacity: 0; }
}




/* Liukuteksti kolmelle sloganille / yritys */

#liukuteksti  {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  min-height: 4em;  
}

#liukuteksti .teksti-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#liukuteksti h2 {
  margin: 0;
  opacity: 0;
  position: absolute;
  animation: fadeInText 9s infinite;
  width: 100%;
  font-size: 3rem;
  line-height: 1.2;
}

#liukuteksti h2:nth-child(1) { animation-delay: 0s; }
#liukuteksti h2:nth-child(2) { animation-delay: 3s; }
#liukuteksti h2:nth-child(3) { animation-delay: 6s; }


@keyframes fadeInText {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}



/* Liukuteksti hero */

#liukuteksti-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 20rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

#liukuteksti-hero .teksti-wrapper {
  display: flex;
  justify-content: center; 
  align-items: center;
  width: 100%;
  position: relative;
}

#liukuteksti-hero h2 {
  margin: 0;
  opacity: 0;
  position: absolute;
  animation: fadeInTextHero 9s infinite;
  width: 100%;
  font-size: clamp(1.5rem, 5vw, 3rem); 
  text-align: center;
  padding: 0 1rem;
  box-sizing: border-box;
  line-height: 1.2;
}

#liukuteksti-hero h2:nth-child(1) { animation-delay: 0s; }
#liukuteksti-hero h2:nth-child(2) { animation-delay: 3s; }
#liukuteksti-hero h2:nth-child(3) { animation-delay: 6s; }

@keyframes fadeInTextHero {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}


/* Testimonials */

.testimonials .slick-dots li {
	background: var(--color4);	
}


/* Respo */

@media (min-width: 2560px) { 
  #liukuteksti,   #liukuteksti5 {
    min-height: 8em;
    max-height: 12em;
  }

  #liukuteksti h2,  #liukuteksti5 h2 {
    font-size: 3.2rem; 
  }
}

@media (max-width: 1024px) {
  #liukuteksti h2, #liukuteksti5 h2 {
    font-size: 2.5rem;
    line-height: 1.4;
  }
   #liukuteksti-hero h2 {
    font-size: 2.5rem!important;
  } 
}

@media (min-width: 1200px) {
  body #content-top > .editor {
    padding-top: 8rem;
    padding-bottom: 8rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
 

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.75rem;
  }
  #showcase h1,
  #showcase h2 {
    font-size: 3rem !important;
  }	
}

@media (max-width: 1199px) {
  body #content-top > .editor {
    padding: 5rem 2rem;
  }

  .jattiteksti {
    font-size: 2.2rem;
  }	
}

@media (max-width: 991px) {
  #liukuteksti-hero {
    height: 15rem;
    padding: 1rem;
    box-sizing: border-box;
  }
  .mob-basic-color .mobile-menu a, .mm-spn.mm-spn--navbar.mm-spn--main:after {
    color: var(--color4);
    font-family: var(--fontbody);
    font-weight: 600;
    font-size: 1.1rem;
}
}

@media (max-width: 768px) {
  #liukuteksti h2, #liukuteksti5 h2 {
    font-size: 2rem;
    line-height: 1.5;
  }
   #liukuteksti-hero h2 {
    font-size: 2rem;
  } 
}

@media (max-width:767px) {
.flags ul li.current {
    display: none;
}
.flags img {
        width: 27px;
        height: 16.4px;
    }
div#mobile-buttons {
    padding-right: 15px;
}
.mob-basic-color .mobileTop #header:before {
	content: "";
	background: rgb(23, 30, 41);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	position: fixed;
	bottom: auto;
	top: 0;
	right: 0;
	left: 0;
	height: 100px;
	opacity: 0.6;
	}
	.mob-basic-color .mobileTop .site-header__bottom {
		top: 0;
		bottom: auto;
	}
	.mob-basic-color .site-header__bottom > div {
		position: relative;
	}
	.mob-basic-color .mobile-menu__bars {
        color: var(--color4);
    }
.mob-basic-color .site-header__bottom {
        background: none !important;
        box-shadow: none !important;
        position: fixed;
    }

}
@media (max-width: 480px) {
  #liukuteksti h2, #liukuteksti5 h2 {
    font-size: 1.5rem;
    line-height: 1.6;
  }
    #liukuteksti-hero h2 {
    font-size: 1.5rem!important;
  }
}