.vasen {
	margin-left: 15%;
	margin-right: 35%;
	font-family: montsR;
}

.oikea {
	margin-left:30%;
	margin-right: 15%;
	font-family: montsR;
}

h1 {
	font-family: montsI;
}

.seuraavasivu {
	display:grid;
	grid-template-columns:90% 10%;
	margin-left:46.5%;
	margin-right: 15%;
	font-family: montsR;
	justify-content:right;
	align-items: right;
	text-align: right;
}

.palstattu {
	margin-right: 2em;
	margin-left: 2em;
}

.kuvallinenoikea {
	margin-right: 15%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 33% 66%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.kuvallinenoikeavasmargi {
	margin-left: 15%;
	margin-right: 15%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 33% 5% 62%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.kuvallinenvasenoikmargi {
	margin-left: 15%;
	margin-right: 15%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 62% 5% 33%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.kuvallinenoikeakapea {
	margin-left: 20%;
	margin-right: 20%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 40% 60%;
	justify-content:left;
	align-items: left;
	text-align: left;
}
.kuvallinenvasenkapea {
	margin-left: 20%;
	margin-right: 20%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 77% 23%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.vasenlevea {
	margin-left: 15%;
	margin-right: 20%;
	font-family: montsR;
}


.kuvallinenvasen {
	margin-left: 15%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 66% 33%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.kuvallinenvasenmargi {
	margin-left: 15%;
	margin-right: 15%;
	font-family: montsR;
	display:grid;
	grid-template-columns: 66% 33%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.kuvallinenoikeajoh {
	font-family: montsR;
	color: rgb(0,0,0);
	display:grid;
	grid-template-columns: 33% 66%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.kuvallinenvasenjoh {
	font-family: montsR;
	color: rgb(0,0,0);
	display:grid;
	grid-template-columns: 66% 33%;
	justify-content:left;
	align-items: left;
	text-align: left;
}

.keskitettyjoh {
	margin-left:10%;
	margin-right:10%;
	font-family: montsR;
	color: rgb(0,0,0);
	justify-content:center;
	align-items: center;
	text-align: center;
}

.keskitetty {
	margin-left:10%;
	margin-right:10%;
	font-family: montsR;
	justify-content:center;
	align-items: center;
	text-align: center;
}

.vasenp {
	margin-left:15%;
	margin-right: 45%;
	font-family: montsR;
	color: rgb(255,32,55);
}


.oikeap {
	margin-left:30%;
	margin-right: 15%;
	font-family: montsR;
	color: rgb(255,32,55);
}

.tekstinalku {
	height: 10em;
}
.otsikkogap {
	height: 1em;
}

.osiogap {
	height: 3em;
}

.prefootergap {
	height: 1em;
}
.paragap {
	height: 0.75em;
}

.rfooter {
	background-color: white;
	height: 8em;
}

.rfootergap {
	height: 0.25em;
}

.rfootertable {
	display: grid;
	grid-template-columns: 3fr 1fr 3fr;
	margin-left:5%;
	margin-right:5%;
}

.rfootertext {
	font-family: montsR;
	position:relative;
}

.rfooterspan {
    position: absolute;
    bottom: 0;
    right: 0;
}

.rfooterpic {
	display: flex;
	align-content: stretch;
	align-items: stretch;
}

.rfootertutustu {
	display: grid;
	position: relative;
	grid-template-columns: 7% 50% 43%;
}

.ideointinappiwrappi {
	display: grid;
	position: relative;
	grid-template-columns: 40% 60%;
}

.nappi {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 2em;
	border: 2px solid;
	cursor: pointer;
	color: rgb(0, 0, 0);
}

.rfooterimg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.tekstinloppu {
}

.mainmenutop {
	display:grid;
	margin-right: 5em;
	margin-left: 5em;
}

.mainmenumid {
	height: 80;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 6fr 1fr;
	overflow: hidden;
	justify-content:center;
	align-items: center;
	text-align: center;
}
.mainmenusisalto {
	display: grid;
	grid-template-columns: 1fr 12fr 1fr;
	overflow: hidden;
	justify-content:center;
	align-items: center;
	text-align: center;
}

@keyframes arrowanimleftkey {
  0% {
    left: 0;
  }
  100% {
    left: 0.1em;
    transform:translateX(7%);
  }
}

@keyframes johdantootsikkoanim {
  0% {
    letter-spacing: 0;
  }
  100% {
    letter-spacing: 0.1em;
  }
}


.johdantootsikko {
	animation: johdantootsikkoanim 1.5s linear infinite alternate;
	cursor:pointer;
}

@keyframes seurotsikkoanim {
  0% {
    letter-spacing: 0;
  }
  100% {
    letter-spacing: 0.05em;
  }
}

.seuraavasivuotsikko {
	display:flex;
	align-items: center;
	justify-content: center;
	cursor:pointer;
	animation: seurotsikkoanim 1.5s linear infinite alternate;
	font-family: montsB;
}

.seuraavasivuotsikko:hover {
	animation:"";
	letter-spacing: 0.1em;
	cursor:pointer;
	font-family: montsB;
}

.johdantootsikko:hover {
	animation:"";
	letter-spacing: 0.2em;
	cursor:pointer;
}


.johdantootsikkokuva {
	cursor:pointer;
}

.johdantootsikkokuva:hover {
	transform: scale(0.95);
}

@keyframes arrowanimleftkey {
  0% {
    left: 0;
  }
  100% {
    left: 0.1em;
    transform:translateX(7%);
  }
}

.arrowanimleft {
	animation: arrowanimleftkey 1.5s linear infinite alternate;
	cursor:pointer;
}

.arrowanimleft:hover {
	animation: "";
	transform: scale(1.25);
}


@keyframes arrowanimdownkey {
  0% {
    top: 0;
  }
  100% {
    top: 0.1em;
    transform:translateY(7%);
  }
}
.arrowanimdown {
	animation: arrowanimdownkey 1.5s linear infinite alternate;
	cursor:pointer;
	transform: scale(0.5);
}

.arrowanimdown:hover {
	animation: "";
	transform: scale(0.75);
}


@keyframes arrowanimrightkey {
  0% {
    left: 0.1em;
  }
  100% {
    left: 0;
    transform:translateX(-7%);
  }
}
.arrowanimright {
	animation: arrowanimrightkey 1.5s linear infinite alternate;
	cursor:pointer;
}

.arrowanimright:hover {
	animation: "";
	transform: scale(1.25);
}


.pallerot {
	z-index: 2147483645;
	position: fixed;
	right: 3.25em;
	top:45%;
	transform:scale(0.75);
}

.videoruutu {
	position: relative;
}

.videokuva {
	position: absolute;
}

.videofilmi {
	position: absolute;
        height: 600px;
        background: #000;
        border-radius: 1000px;
        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.muotibuttons {
    buttonWrapper: {
        position: "absolute",
        height: "100px",
        backgroundColor: "transparent",
        top: "calc(50% - 70px)",
        '&:hover': {
            '& $button': {
                backgroundColor: "black",
                filter: "brightness(120%)",
                opacity: "0.4"
            }
        }
    },
    fullHeightHoverWrapper: {
        height: "100%",
        top: "0"
    },
    buttonVisible:{
        opacity: "1"
    },
    buttonHidden:{
        opacity: "0",
    },
    button: {
        margin: "0 10px",
        position: "relative",
        backgroundColor: "#494949",
        top: "calc(50% - 20px) !important",
        color: "white",
        fontSize: "30px",
        transition: "200ms",
        cursor: "pointer",
        '&:hover': {
            opacity: "0.6 !important"
        },
    },
    // Applies to the "next" button wrapper
    next: {
        right: 0
    },
    // Applies to the "prev" button wrapper
    prev: {
        left: 0
    }
}


.laskurislidercont {
	margin: auto;
	width: 85%;
	display: grid;
	grid-template-columns: repeat(8, 1fr); 
	grid-auto-rows: minmax(80px, auto);
}
.laskurisliderotsbox {
	grid-row-start: 2;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 8;
	font-family: montsB;
}
.laskurislidervaihtoehdotboxeka
{
	grid-row-start: 4;
	grid-row-end: 4;
	grid-column-start: 1;
	grid-column-end: 3;
}
.laskurislidervaihtoehdotboxtoka
{
	grid-row-start: 4;
	grid-row-end: 4;
	grid-column-start: 4;
	grid-column-end: 6;
}
.laskurislidervaihtoehdotboxkolmas
{
	grid-row-start: 4;
	grid-row-end: 4;
	grid-column-start: 7;
	grid-column-end: 9;
}
.laskurisliderliukubox
{
	grid-row-start: 5;
	grid-row-end: 5;
	grid-column-start: 2;
	grid-column-end: 8;
}
.laskurislidertulosbox
{
	height: 15em;
	grid-row-start: 7;
	grid-row-end: 7;
	grid-column-start: 2;
	grid-column-end: 8;
}
.laskurisliderloppubox
{
	grid-row-start:8;
	grid-row-end:8;
	grid-column-start: 2;
	grid-column-end: 8;
}