:root
{
 --main-bg-color: #f8f8f8;
 --main-font-color: #f8f8f8;
 --main-font-color-on-dark: #f8f8f8;
 --main-bg-dark-color: #15151E;
 --form-label-font-color: #BCBCD1;
}


.uppercase
{
 text-transform: uppercase;	
 color: #e2e2e2;
 font-weight: 300;
 letter-spacing: .15rem;
 width: 100%;
 
}

.uppercase.animate
{
 
 animation: slide-from-right ease-out 2s;
}

@keyframes slide-from-right {
  from {
   margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}

@keyframes slide-from-left {
  from {
   margin-left: -100%;
  }
  to {
    margin-right: 0;
  }
}

@keyframes opacity-animation {
  from {
   opacity: 0;
  }
  to {
    opacity: 1;
  }
}



.text-align-center
{
 text-align: center;
}

body
{
 font-family: Roboto;
 padding: 0;
 margin: 0;
 border: 0; 
 background: var(--main-bg-color);
 line-height: normal;

}

.main-content img
{
 max-width: 100%;	
}

.divider-gradient
{
background: rgb(220,136,0);
background: linear-gradient(90deg, rgba(220,136,0,1) 0%, rgba(206,0,233,1) 100%); 
width: 100%;
height: 1px;
display: inline-block;
 
}
.divider-gradient-white
{
width: 100%;
height: 1px;
display: inline-block;
background: #4D4D53;	
}
.main-wrapper
{
 width: 100%;
 text-align: center;
line-height: normal;
overflow: hidden;
box-sizing: border-box;
}
.border-wrapper-dark
{
 width: 100%;
 
 
 height: 100%;
 z-index: 1;
 text-align: left;
  box-sizing: border-box;
  grid-area: 1 / 1 / 2 / 2;
}





.main-content-wrapper
{
 	max-width: 1100px;
	width: 100%;
    background: transparent;
	
	text-align: left;
 box-sizing: border-box;
 display: grid;

grid-template-rows: 1fr; 
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: 0 auto;
z-index: 1;
position: relative;
box-sizing: border-box;
 padding: 0;
 border:0;
}

.main-content-wrapper-min-height
{
 min-height: 200px;	
}

.border-wrapper-dark-down
{
background-image: url(/images/valiviiva-alku.png);	
background-position: -1px top;
background-repeat: no-repeat;
background-size: 100% 200px;
}

.border-wrapper-dark-up
{
background-image: url(/images/valiviiva-loppu.png);	
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100% 200px;
height: 200px;
}

.bg-border
{
height: 100%;	
display: inline-block;
float: none; 
clear: none;


border-right: 1px solid #4D4D53; 	
 opacity: 0.6;
}

 .main-content-dark .bg-border
{

 opacity: 1;
}

.border-left
{
 
 width: 5%;
 left: 0;
 

}

.border-center
{
 left: 5%;
 width: 45%;
}

.border-right
{
 left: 50%;
 width: 45%;
}


.main-content
{
 width: 100%;
padding: 10%; 
padding-top: 32px;
box-sizing: border-box;
z-index: 5;
background-color: transparent;
text-align: center;
height: 100%;
grid-area: 1 / 1 / 2 / 2;
box-sizing: border-box;
}

.main-content-dark
{
 background: var(--main-bg-dark-color);	
 color: var(--main-font-color-on-dark);
}

.main-wrapper-kassa.main-content-dark
{
 background: #1c1417;	
 color: var(--main-font-color-on-dark);
}


.main-content-first
{
 height: 200px;	
}

.content-white-bg
{
	background: var(--main-bg-color);	
}

.logo
{
 height: 60px;	

}

.main-page-hero
{
  background: #15151E url(/images/indexhero7.png) right bottom no-repeat;
 background-size: auto 100%;
 
}	


#main-page-hero
{
 padding-top: 100px;
 padding-top: 15vh;
 text-shadow: 5px 5px 10px #111111; 
 color: #e5f2f2;
 min-height: 800px;
 position: relative;
 text-align: left;
}

@keyframes roate-hero {
  to 
  {
	 ctransform: perspective(400px) rotateY(-8deg);
	 background-size: auto 100%;
  }
}
/*
.main-hero-bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  background: url(./images/indexhero7.png) right center no-repeat;
  background-size: auto 50%;
 	  animation-name: roate-hero ;
  animation-duration: 16s;	
  animation-iteration-count: infinite; 
}
*/
.border-wrapper-dark:hover
{

}


.hero-p
{
 max-width: 400px;	
 color: #cccccc;
 font-size: 14pt;
 }

.hero-p.animate
{
 animation: slide-from-left ease-out 2s;	
}

.caption-p
{

 color: #cccccc;
 font-size: 12pt;
 }

@keyframes header-color {
  to 
  {
	background-position: 400% center;	
  }
}
.hero-h1-wrapper
{
 position: relative;	
 display: block;

}
.hero-h1
{
  
	color: #ffffff; /* fallback color */
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-size: 5rem;
	width: 100%;
	
	word-wrap: wrap;
	text-align: left;
    font-weight: 800; 
    letter-spacing: 1px;
	text-shadow: none;
	  
            background: linear-gradient(to right,#666666 0,#e5f2f2 50%, #666666 100%);
			
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;3);	
background-size: 200% auto;			
  animation-name: header-color;
  animation-duration: 16s;	
  animation-iteration-count: infinite;
  position: relative;
  
  z-index: 4;
  
}

.hero-h1.animate
{
 
 animation: opacity-animation ease-out 2s;
}


.hero-h1-shadow
{
 background: auto;
 color: transparent;
 font-size: 5rem;
 letter-spacing: 1px;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 10px;
  padding: 0;
  margin: 0;
  text-shadow: 0px 0px 10px #151515; 
}


.main-content h2
{
 padding-bottom: 0;	
 margin-bottom: 0;
 margin-top: 40px;
}

.header-divider-wrapper
{
 width: 100%;
display: inline-block; 
margin-bottom: 16px;
}

.header-divider
{
 width: 100px;
 height: 1px;
 margin-bottom: 1px;
 display: inline-block; 
 background: rgb(220,136,0);
background: linear-gradient(90deg, rgba(220,136,0,1) 0%, rgba(206,0,233,1) 100%); 
}

.customer_logos
{
  
  margin: 0 auto;
  
  display: inline-block;
  width: 100%;
    align-items: center;
  justify-content: center;
  
  user-select: none;
  touch-action: none;
  display: flex;
   flex-wrap: wrap;
   margin-top: 60px;
}

.customer_logos_logo
{
	display: flex;
    
	height: 100px;
  
  width: calc(100% * (1/4) );
  box-sizing: border-box;
  flex-grow: 1;
  align-items: center;
  text-align: center;
   justify-content: center;
}

.customer_logos_logo > img
{
 max-height: 50px;
max-width: 120px; 
 
vertical-align: middle;
}

.customer_logos_logo80 > img
{
 height: 80px;
max-height: 80px; 
}

.customer_logos_slider_logo > img
{
 max-height: 50px;
max-width: 120px; 
margin:0; 
padding: 0;
vertical-align: middle;
}

.left-side-1
{
 	
}

.left-side-2
{
 padding-right: 7.5%;
}

.right-side-1
{
 padding-left: 7.5%;	
}

.right-side-2
{
 padding-left: 2.5%;	
}

.scroller-wrapper
{
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);	
  width: 100%;
 display: grid;
}
.customer_logos_slider
{
   padding-block: 1rem;
  display: flex;
   justify-content: center;
 align-items: center;
  flex-wrap: wrap;
  gap: 3rem;	
  width: 90%;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 20s)
    var(--_animation-direction, forwards) linear infinite;  
	min-width: 0; 
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 1.0rem));
  }
}

.main-content-h1
{
 text-align: center;
 width: 100%; 
 font-weight: 200;
 margin-top: 40px;
}

.main-page-contact h1
{
 width: 100%;
 text-align: center; 
 margin-bottom: 80px;
 font-weight: 300;
 text-shadow: 5px 5px 10px #111111; 
}

.system-feature-column
{
 width: 49%;
 
display: inline-block;
float: none;
clear: none; 

margin: 0;
vertical-align: top;
background: #2b2b3b;
color: #ffffff;
box-shadow: 0px 0px 15px #ccc;
font-size: 14px;
padding: 16px;
box-sizing: border-box;
}

.system-feature-column h2
{
 font-size: 16px;	
 
}


.system-feature-card
{
  width: 95%;
  
  
display: inline-block;
float: none;
clear: none; 

margin: 2.5%;
vertical-align: top;
background: #2b2b3b;
color: #ffffff;
box-shadow: 0px 5px 15px #111111;
font-size: 14px;
padding: 24px;
padding-bottom: 80px;
box-sizing: border-box;
border-radius: 8px;	
text-align: left;
}

.system-feature-card ul {
 
 list-style-type:none;
 margin: 0;
 padding: 0;
}

.system-feature-card li {
 
 background: url('/images/icons/icon_ok_filled.svg') left top no-repeat;	
 background-size: 18px;
 padding-left: 40px;
 min-height: 18px;
 padding-top: 2px;
 font-size: 14px;	
 font-weight: normal;
 margin-top: 8px;
}


.system-feature-card .header-divider
{
 width: 100%;	
	
}
#main-page-contact-form
{
 width: 100%;
 display: inline-block;
 background: #2B2B3B; 
 box-sizing: border-box;
 padding-top: 5%;
 text-align: center;
 border-radius: 18px;
 height: 750px;
}

#contactForm
{
 padding: 10%;
 padding-top: 40px;
}

#main-page-contact-form h2
{
 width: 100%;
 text-align: center;
 font-weight: 300; 
 margin-bottom: 20px;
 margin-top: 10px;
}

#main-page-contact-form label
{
 padding-top: 40px;	
 display: inline-block;
 width: 100%;
 text-align: left;
 color: var(--form-label-font-color);
 font-size: 14px;
}

#main-page-contact-form label:first-child
{
 padding-top: 0px;	
}

#main-page-contact-form input
{
 width: 100%;
 margin-top: 10px; 
 box-sizing: border-box;
 padding: 8px;
 text-align: left;
 border-radius: 6px;
 border: 1px solid #111111;
}

#main-page-contact-form textarea
{
 width: 100%;
min-height: 50px; 
 margin-top: 10px; 
 border-radius: 6px;
}

#contactFormbuttons 
{
 
 padding-top: 80px;
}

#contactFormbuttons button
{
 width: 100%;
 padding: 16px;
 background: #15151e;
 border-radius: 12px;
 border: 1px solid #15151e;
 font-size: 16px;
 color: var(--form-label-font-color);
}

.background-switch
{
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><polygon points="0,0 100%,100% 0,100%" fill="#ffffff"/><polygon points="0,0 100%,0 100%,100%" fill="#111111"/></svg>');	
 
 
 
}

.main-content-hero-no-padding
{
 padding-bottom: 0;	
}

#jono-hero-mobiili
{
 padding-top: 40px;
 text-align: center;
}

#jono-hero-mobiili img
{
 height: 300px;	
 
}

.main-wrapper-404 a:link,
.main-wrapper-404 a:active,
.main-wrapper-404 a:visited
{
 color: #ffffff;	
}


.text-align-left
{
 text-align: left;	
}