html {
  height: 100vh;
  width: 100vw;
}

/* paletti:
#ECE3CE
#739072
#4F6F52 (lapinakyvyydella 4f6f52c2)
#3A4D39

mahdollinen huomiovari #cb7220
 */

:root {
  touch-action: auto;
    max-width: 100%;
  overflow-x: hidden; 
}

body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	min-width: 100%;	
	height: 100vh;
	/* width: 100vw; */
	background: #ECE3CE;
	background-size: 30px;
	font-family: Kanit;
	font-size: larger;
	color: #3A4D39;
}

a:link { text-decoration:none;color:#4ab1ae; }
a:visited { text-decoration:none;color:#4ab1ae; }
a:hover { text-decoration:none;color:#4ab1ae; }
a:active { text-decoration:none;color:#4ab1ae; }

section {
  display: block;
}

.bg-black {
  background: black;
}

.perus-alamargini {
  
  margin-bottom:35%;
}

.keskinkertainen-alamargini {
  margin-bottom:10%;
}

.nowrap{
	flex-wrap: nowrap;
	}

div.taustakuva1 {
  /* background-color: black; */
  text-align: right;
  margin: auto;
  /* margin-top: 15vh; */
 /* margin-bottom: 15vh; */
  overflow: hidden;  
}
div.taustakuva2 {
  /* background-color: black; */
  text-align: right;
  margin-left: 0;
  margin-top: 15vh;
  margin-bottom: 10vh;
  overflow: hidden;  
}
div.otsikkolaatikko {
	z-index:3;
	margin-left:15vw;
	margin-right:15vw;
	margin-top:1vh;
	padding-top:1vh;
	}

.isompi_fontti {
	font-size:larger;
}

.navtext {
  
  margin-right:1.5em;
  text-align: center;
}

.tilausalue2 {
  /* background-color: black; */
  margin-top: 30px;
  padding-top: 20px;
}			

	.pieni_punainen_gradientti {
      /* background: linear-gradient(260deg, #606676 0%, #708871 50%); */
      background: linear-gradient(260deg, #4F6F52 0%, #3A4D39 50%);
	}
	
		.otsikkoteksti {
		/* font-family: Oswald; */
		/* font-family: Kanit;	 */	
		font-family: "Carter One", system-ui;
		/* font-family: Protest Revolution;		 */				
		font-size: xx-large;
		color: #ECE3CE;
	}
		.otsikkoteksti:hover {		
		color: #4ab1ae;
	}		
		.otsikkoteksti2 {
		/* font-family: Oswald; */
		/* font-family: Kanit;	 */	
		font-family: "Carter One", system-ui;				
		font-size: 7rem;
	}	
		
ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}	

.fixedtopkorjaus {
  position:absolute;
  /* width:100vw; */
  overflow:hidden;  
}	

.ylapalkki {
  display:inline-flex;
  height:10vh;
}	

.pelikuva_container {
  display:inline-flex;
  position: relative;
  width: 20%;
  flex:0.2;
  border:0;
   /*  padding: 0; */
   /*  border-color: #00000000; */
   /*  border-radius: 15px; */
   /*  border-top-width: 1px; */
   /* border-bottom-width: 1px; */
   /* border-left-width: 0px; */
   /* border-right-width: 0px; */
  background: none;
}

		.pelikuva_container:hover {
		   /*      background: blue; */
			opacity: 50%;
		}

.pelikuva_image {
  display: block;
  width: 15vw;
  height: auto;
}

.pelikuva_text {
  color: white;
  /* font-size: 20px;*/
  position: absolute;
  top: 42%;
  left: 35%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.taustaelementti1 {
    top: 0;
    position: fixed;
    z-index: -5;
    height: 150vh;
    opacity: 30%;
	overflow:hidden;
}

.giffi {
	width:auto;
}

.taustavideo {
	/* width:100%;*/
	max-height: 80vh;
}

.pitkasti{
   display:inline-block;
}

.lyhyesti{
   display:none;
}

.peliboxi {
	display: block;
    text-align: center;
    background: #4f6f52c2;
	padding-top: 2rem;
	padding-left: 10vw;
	padding-right: 10vw;
	padding-bottom: 5rem;
}
.rigiboxi {
	display: flex;
    text-align: center;
	color: #ECE3CE;
    background: #4f6f52c2;
	padding-top: 1.5rem;
	padding-left: 10vw;
	padding-right: 10vw;
	padding-bottom: 0;	
}

.kuvaboxi {
	display: block;
    text-align: center;
	overflow: hidden;
}

/* Styles the thumbnail */

a.lightbox img {
height: 150px;
/*border: 3px solid white; */
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
 
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
  
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
left: 0;
bottom: 0;
  overflow:scroll;
  z-index:1500;
}

.lightbox-target:target img {
	width: 40rem;
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
position: fixed;	
top: 0;
}

.sulje_kokoroska {
	left: 0;
    position: fixed;
    height: 100%;
    width: 100%;
}



.container {
  margin-top: 20px;
}

.fixcontainer {
  /*margin-top: 20px;*/
}
.alkublokkeri {
	background:#00000047;
	width:100vw;
	height:4.5rem;
	z-index:6000;
	}
.palkkilogo {
	width:4rem;
}
.tabi {
    top: 0;
    left: 0;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
	z-index: 2;	
}

.tabi::-webkit-scrollbar {
  display: none;
}
.tabi_content {
    position: fixed;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #4F6F52;
	padding-top:0;
	overflow: scroll;
	color:#ECE3CE;
	animation-name: slaidi;
	animation-duration: 1s;
}
.tabi_content::-webkit-scrollbar {
  display: none;
}
				@keyframes slaidi {
				  from {left: -30vw;}
				  to {left: 0;}
				}
.tabi_sivu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000000bf;
	z-index: -1;
}
.tabi_samplekuva {
    width: 100%;
    left: 0;
	padding-bottom:1rem;
	margin-top: -10vh;
}
.tabi_teksti {
    font-size:medium;
	padding: 1rem;
}
.tabi_otsikkoteksti {
    font-size:large;
	display:inline-flex;
}
.kabi {
    top: 0;
    left: 0;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
	z-index: 2;	
}
.kabi_content {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #4F6F52;
	padding: 1rem
	overflow: scroll;
	color:#ECE3CE;
	align-content: center;
}
.kabi_sivu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: none;
}
.kabikuva {
    height: 80vh;
}
.kabi_samplekuva {
    width: 100%;
    left: 0;
	padding-bottom:2rem;
}
.kabi_teksti {
    font-size:unset;
}

.softaikonit {
	width: 3rem;
	padding-top:5px;
}

.box {
    display: flex;
    flex-flow: column;
    height: 77vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
    /*background: #00000047;*/
	background: linear-gradient(180deg, #212529c7 0%, #2125297a 35%, #00000000 100%);
	overflow: hidden;
    width: 100vw;	
			padding-right:0;
		padding-left:0;
		margin-right:0;
		margin-left:0;
}
.box .row.header {
  flex: 0 1 auto;
}
.box .row.content {
    flex: 1 1 auto;
    display: flex; /* new */
    width: 100vw;
		padding-right:0;
		padding-left:0;
		margin-right:0;
		margin-left:0;
}
.box .row.footer {
  flex: 0 1 40px;
}
.brow.content iframe {
  width: 100vw;
  border: 0;
}
.alkuvideo {
	max-width:90vw;
	max-height:85vh;
	margin-left:auto;
	margin-right:auto;
}
.etusivutyyli {
  padding-bottom: 0;
  background: #00000047;	
}

.floating {  

}
.floating:hover {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    /*margin-left: 30px;*/
    /*margin-top: 5px;*/
} 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, -2vh); }
    100%   { transform: translate(0, -0px); }    
}

.huomiotekstipalkki {
    background: #3a4d39cc;
    color: #ECE3CE;
    font-size: xxx-large;
    text-align: center;
    margin-top: 2rem;
	margin-bottom: 0;
	padding-top: 2rem;
	padding-bottom: 1vh;
}
.blur-load {
	display: initial;
	background-repeat: no-repeat;
	background-size: cover;
}
.blur-load-video {
	display: initial;
	/*background-image: url(img/video_placeholder.png);*/
	background-repeat: no-repeat;
	background-size: cover;
}
.collapsible {
  background-color: #3A4D39;
  color: #ECE3CE;
  cursor: pointer;
  padding: 0.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  text-align: center;
}
.active, .collapsible:hover {
  background-color: #4F6F52;
}
.content {
  /*padding: 0 18px;*/
  display: none;
  overflow: hidden;
  background-color: none;
}
.cvlogo {
	position:absolute;
	height:2rem;
	right:10px;
	top:28px;
}