.yritys { overflow: hidden; }
.yritys header { margin-top: 80px; z-index: 3; }
.yritys header .floater {
    top: 57%; right: 2%;
    width: 60%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.yritys section.header.big { margin-top: 4em; }
.yritys section.header.big h1 { font-size: 2.4em; position: relative; }
.yritys section.header.big h1 .icon {
    position: absolute; display: block;
    width: 3.6em; height: 3.6em;
    border-radius: 50%;
    border: 0.06em solid transparent;
    opacity: 0.25;
    top: 50%; left: 0;
    transform:            translate(-80%, -50%);
    -ms-transform:        translate(-80%, -50%);
    -webkit-transform:    translate(-80%, -50%);
}
.yritys section.header.big h1 .icon:after {
    content: '';
    position: absolute;
    width: 94%; height: 94%;
    margin: 3%; top: 0; left: 0;
    border: 0.04em solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
}

.yritys section.header.big h1 .icon svg {
    display: block;
    width: 70%; height: 70%;
    padding: 15%;
}

.yritys .flex { display: flex; }

.yritys section.image.narrow,
.yritys section.video.narrow {
    max-width: 800px;
}

.yritys section.no-bottom-margin { margin-bottom: 0; }

.yritys section.header.big h1 .icon { opacity: 0 !important; }

.heittomerkki { letter-spacing: 2.5px; }

.img-popup {
    opacity: 0; pointer-events: none;
    z-index: 99999;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);

    -webkit-transition: opacity 0.7s ease;
        -ms-transition: opacity 0.7s ease;
            transition: opacity 0.7s ease;
}

.img-popup.open {
    opacity: 1; pointer-events: auto;
}

.img-popup .content {
    position: absolute;
    top: 50%; left: 50%;
    width: 95%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.2));
    font-size: 1vw;
    padding: 2.3em;
    box-sizing: border-box;
    
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.img-popup .content:after {
    display: block;
    content: '\2715';
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #8a8a8a;
    font-family: "Encode Sans Semi Condensed", sans-serif;
    font-weight: 600;
    font-size: 1.7em;
    letter-spacing: 0.01em !important;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.img-popup img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}


/* VIDEO CONTAINER WITH CONTROLS */

.yritys .video-container.w-controls {
    position: relative;
}

.yritys .video-container.w-controls img.cover {
    opacity: 1;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: auto;

    -webkit-transition: opacity 0.7s ease;
        -ms-transition: opacity 0.7s ease;
            transition: opacity 0.7s ease;
}
.yritys .video-container.w-controls.started img.cover { opacity: 0; pointer-events: none; }

.yritys .video-container.w-controls .controls {
    z-index: 2;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    cursor: pointer;
}
.yritys .video-container.w-controls .controls svg {
    opacity: 1;
    pointer-events: none;
    position: absolute;
    top: 70%; left: 50%;
    width: 5em; height: 5em;
    fill: white;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    -webkit-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
}
.yritys .video-container.w-controls .controls:hover svg {
    opacity: 0.7;
}
.yritys .video-container.w-controls.playing .controls svg {
    opacity: 0;
}


/*
  PIE STUFF
*/

#pie-container { position: relative; overflow: visible; z-index: 2; }
#pie-container section:first-child { margin-top: 0; padding-top: 1em; }

.home-off #pie-container { position: absolute; left: 0; right: 0; pointer-events: none; }

#pie, #fakepie {
    pointer-events: auto;
    margin: 0 auto 5em auto;
    font-size: 0.65em;
    width: 57em;
}

#fakepie { display: none; position: relative; pointer-events: none; }
#fakepie:after {
    content: '';
    display: block; position: relative;
    width: 100%; padding-bottom: 100%;
}

#pieTopBar {
    width: 100%; background: white;
    position: relative; z-index: 3;
    display: none; overflow: hidden;
    height: 50px; line-height: 50px; max-height: 0;
    border-bottom: 0 solid rgba(198,215,96,1.0);

    text-align: center;
    color: white;

    transition:         max-height 0.5s ease, border 0.5s ease;
    -ms-transition:     max-height 0.5s ease, border 0.5s ease;
    -webkit-transition: max-height 0.5s ease, border 0.5s ease;
}

[data-page="1"] #pieTopBar { color: rgba(198,215,96,1.0); border-color: rgba(198,215,96,1.0); }
[data-page="2"] #pieTopBar { color: rgba(147,196,100,1.0); border-color: rgba(147,196,100,1.0); }
[data-page="3"] #pieTopBar { color: rgba(74,177,104,1.0); border-color: rgba(74,177,104,1.0); }
[data-page="4"] #pieTopBar { color: rgba(0,168,112,1.0); border-color: rgba(0,168,112,1.0); }
[data-page="5"] #pieTopBar,
[data-page="7"] #pieTopBar { color: rgba(0,161,140,1.0); border-color: rgba(0,161,140,1.0); }
[data-page="6"] #pieTopBar { color: rgba(53,182,178,1.0); border-color: rgba(53,182,178,1.0); }

.pie-wrap {
    width: 100%; top: 0; left: 0;
    position: relative;
    transition:         left 0.5s ease;
    -ms-transition:     left 0.5s ease;
    -webkit-transition: left 0.5s ease;
}

.big-pie .pie-wrap {
    transition:         top 0.5s ease;
    -ms-transition:     top 0.5s ease;
    -webkit-transition: top 0.5s ease;
}

.going-home .pie-wrap { position: absolute; }

#pie {
    position: absolute;
    top: 20px; left: auto; right: auto;
    z-index: 99;

    transition:         transform 0.5s ease;
    -ms-transition:     transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;

    transform:          translate(0, 0) scale(1);
    -ms-transform:      translate(0, 0) scale(1);
    -webkit-transform:  translate(0, 0) scale(1);
}

#pie.animate-top {
    transition:         transform 0.5s ease, top 0.5s ease;
    -ms-transition:     transform 0.5s ease, top 0.5s ease;
    -webkit-transition: transform 0.5s ease, top 0.5s ease;
}

.intro #pie { position: relative; }
.fixed-pie #pie { position: fixed; top: 80px; }

/*.floating-pie #pie {
  transform:            translate(-110%, -20%) scale(0.6);
  -ms-transform:        translate(-110%, -20%) scale(0.6);
  -webkit-transform:    translate(-110%, -20%) scale(0.6);
}*/

.floating-pie #pie {
    transform:            translate(-83%, -20%) scale(0.6);
    -ms-transform:        translate(-83%, -20%) scale(0.6);
    -webkit-transform:    translate(-83%, -20%) scale(0.6);
}

#pie:after {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
#pie > * { position: absolute; }
#pie .gfx,
#pie .overlay {
    display: block;
    top: 0; left: 0;
    width: 100%; height: 100%;

    transform:          rotate(0deg);
    -ms-transform:      rotate(0deg);
    -webkit-transform:  rotate(0deg);

    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;
}

#pie .gfx { z-index: 1; overflow: visible; }
#pie .overlay { z-index: 2; pointer-events: none; }

#pie .gfx .ring,
#pie .gfx .sector {
    cursor: pointer;
    transition:           fill 0.3s linear;
    -ms-transition:       fill 0.3s linear;
    -webkit-transition:   fill 0.3s linear;
}

#pie .gfx .ring 	{ fill: transparent; }

#pie .gfx .bg 		{ fill: #ffffff; }

#pie .gfx .center 	{}
#pie .gfx .half1 	{ fill: #93cbb2; }
#pie .gfx .half2 	{ fill: #f6f8e6; }

.sosiaalinenvastuu section.header.big h1 { color: rgba(198,215,96,1.0); }
.sosiaalinenvastuu section.header.big h1 .icon,
.sosiaalinenvastuu section.header.big h1 .icon:after { border-color: rgba(198,215,96,1.0); }
.sosiaalinenvastuu section.header.big h1 .icon svg,
#pie .gfx .sector.sector1,
#pie[data-hover="1"] .gfx .ring.sector1, 
#pie[data-selected="1"] .gfx .ring.sector1  { fill: rgba(198,215,96,1.0); }
#pie[data-hover="1"] .gfx .sector.sector1,
#pie[data-selected="1"] .gfx .sector.sector1 { fill: rgba(198,215,96,0.3); }

.tyontekijat section.header.big h1 { color: rgba(147,196,100,1.0); }
.tyontekijat section.header.big h1 .icon,
.tyontekijat section.header.big h1 .icon:after { border-color: rgba(147,196,100,1.0); }
.tyontekijat section.header.big h1 .icon svg,
#pie .gfx .sector.sector2,
#pie[data-hover="2"] .gfx .ring.sector2, 
#pie[data-selected="2"] .gfx .ring.sector2  { fill: rgba(147,196,100,1.0); }
#pie[data-hover="2"] .gfx .sector.sector2,
#pie[data-selected="2"] .gfx .sector.sector2    { fill: rgba(147,196,100,0.3); }

.ravitsemus section.header.big h1 { color: rgba(74,177,104,1.0); }
.ravitsemus section.header.big h1 .icon,
.ravitsemus section.header.big h1 .icon:after { border-color: rgba(74,177,104,1.0); }
.ravitsemus section.header.big h1 .icon svg,
#pie .gfx .sector.sector3,
#pie[data-hover="3"] .gfx .ring.sector3, 
#pie[data-selected="3"] .gfx .ring.sector3  { fill: rgba(74,177,104,1.0); }
#pie[data-hover="3"] .gfx .sector.sector3,
#pie[data-selected="3"] .gfx .sector.sector3    { fill: rgba(74,177,104,0.3); }

.pakkausmateriaalit section.header.big h1 { color: rgba(0,168,112,1.0); }
.pakkausmateriaalit section.header.big h1 .icon,
.pakkausmateriaalit section.header.big h1 .icon:after { border-color: rgba(0,168,112,1.0); }
.pakkausmateriaalit section.header.big h1 .icon svg,
#pie .gfx .sector.sector4,
#pie[data-hover="4"] .gfx .ring.sector4,
#pie[data-selected="4"] .gfx .ring.sector4  { fill: rgba(0,168,112,1.0); }
#pie[data-hover="4"] .gfx .sector.sector4,
#pie[data-selected="4"] .gfx .sector.sector4    { fill: rgba(0,168,112,0.3); }

.ilmastonsuojelu-hyvitys section.header.big h1,
.ilmastonsuojelu section.header.big h1 { color: rgba(0,161,140,1.0); }
.ilmastonsuojelu-hyvitys section.header.big h1 .icon,
.ilmastonsuojelu-hyvitys section.header.big h1 .icon:after,
.ilmastonsuojelu section.header.big h1 .icon,
.ilmastonsuojelu section.header.big h1 .icon:after  { border-color: rgba(0,161,140,1.0); }
.ilmastonsuojelu-hyvitys section.header.big h1 .icon svg,
.ilmastonsuojelu section.header.big h1 .icon svg,
#pie .gfx .sector.sector5,
#pie[data-hover="5"] .gfx .ring.sector5,
#pie[data-selected="5"] .gfx .ring.sector5  { fill: rgba(0,161,140,1.0); }
#pie[data-hover="5"] .gfx .sector.sector5,
#pie[data-selected="5"] .gfx .sector.sector5    { fill: rgba(0,161,140,0.3); }

.vastuullinentaysmehu section.header.big h1 { color: rgba(53,182,178,1.0); }
.vastuullinentaysmehu section.header.big h1 .icon,
.vastuullinentaysmehu section.header.big h1 .icon:after { border-color: rgba(53,182,178,1.0); }
.vastuullinentaysmehu section.header.big h1 .icon svg,
#pie .gfx .sector.sector6,
#pie[data-hover="6"] .gfx .ring.sector6, 
#pie[data-selected="6"] .gfx .ring.sector6  { fill: rgba(53,182,178,1.0); }
#pie[data-hover="6"] .gfx .sector.sector6,
#pie[data-selected="6"] .gfx .sector.sector6    { fill: rgba(53,182,178,0.3); }

#pie .overlay .sectors {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    text-align: center;
}
#pie .overlay .center {
    position: absolute;
    display: flex; align-items: center;
    top: 50%; left: 50%;
    width: 40%; height: 40%;

    transform:          translate(-50%, -50%);
    -ms-transform:      translate(-50%, -50%);
    -webkit-transform:  translate(-50%, -50%);
}
#pie .overlay .sectors > div {
    position: absolute;
    transform:          translate(-50%, -50%);
    -ms-transform:      translate(-50%, -50%);
    -webkit-transform:  translate(-50%, -50%);
}
#pie .overlay .sectors svg {
    position: relative;
    display: block; margin: auto;
    width: 6em; height: 6em;
    min-width: 6em; min-height: 6em;
    fill: #ffffff;

    transition:         fill 0.3s linear, min-width 0.3s ease, min-height 0.3s ease;
    -ms-transition:     fill 0.3s linear, min-width 0.3s ease, min-height 0.3s ease;
    -webkit-transition: fill 0.3s linear, min-width 0.3s ease, min-height 0.3s ease;
}

.floating-pie #pie .overlay .sectors svg { min-width: 9em; min-height: 9em; }

#pie .overlay .sectors strong {
    opacity: 1;

    transition:         transform 0.3s ease, opacity 0.3s linear;
    -ms-transition:     transform 0.3s ease, opacity 0.3s linear;
    -webkit-transition: transform 0.3s ease, opacity 0.3s linear;
}

#pie .overlay .sectors span {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 1.2em;
    line-height: 1.4;
    color: #333; white-space: nowrap;
    padding: 0.5em;

    transform:          translate(-50%, -50%) scale(1.2);
    -ms-transform:      translate(-50%, -50%) scale(1.2);
    -webkit-transform:  translate(-50%, -50%) scale(1.2);

    opacity: 0;
    transition:        	transform 0.3s ease, opacity 0.3s linear;
    -ms-transition:    	transform 0.3s ease, opacity 0.3s linear;
    -webkit-transition:	transform 0.3s ease, opacity 0.3s linear;
}

.floating-pie #pie .overlay .sectors span { display: none; }
.floating-pie #pie .overlay .sectors strong { opacity: 0; }
.floating-pie.float-ready-pie #pie .overlay .sectors strong {
    font-size: 2em;
    position: absolute;
    top: 50%; left: 50%;

    transform:          translate(-50%, -50%) scale(1.2);
    -ms-transform:      translate(-50%, -50%) scale(1.2);
    -webkit-transform:  translate(-50%, -50%) scale(1.2);
}

#pie .overlay .sectors .sector1 { top: 18%; left: 68%; }
#pie .overlay .sectors .sector2 { top: 49%; left: 86%; }
#pie .overlay .sectors .sector3 { top: 82%; left: 68%; }
#pie .overlay .sectors .sector4 { top: 82%; left: 32%; }
#pie .overlay .sectors .sector5 { top: 49%; left: 14%; }
#pie .overlay .sectors .sector6 { top: 18%; left: 32%; }

#pie .counterrot {
    transform:          rotate(0deg);
    -ms-transform:      rotate(0deg);
    -webkit-transform:  rotate(0deg);

    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;
}

#pie .overlay strong {
	display: block; margin: auto;
    color: white; font-size: 1.2em;
}

#pie .menu,
#pie .overlay .center .hint {
	position: absolute;
	top: 50%; left: 50%;
	transform:          translate(-50%, -50%) scale(1);
    -ms-transform:      translate(-50%, -50%) scale(1);
    -webkit-transform:  translate(-50%, -50%) scale(1);
}


#pie .menu {
	cursor: pointer;
	z-index: 3;
	opacity: 1;
	border-radius: 50%;
	background: white;
	width: 6em; height: 6em;
	border: 0.3em solid #93cbb2;
	box-sizing: border-box;

	transition:        	transform 0.3s ease, background 0.3s linear, opacity 0.3s linear;
    -ms-transition:    	transform 0.3s ease, background 0.3s linear, opacity 0.3s linear;
    -webkit-transition:	transform 0.3s ease, background 0.3s linear, opacity 0.3s linear;
}
#pie .menu:hover { background: #35b6b2; }
.intro #pie .menu { opacity: 0; pointer-events: none; }
.floating-pie #pie .menu {
	transform:          translate(-50%, -50%) scale(1.5);
    -ms-transform:      translate(-50%, -50%) scale(1.5);
    -webkit-transform:  translate(-50%, -50%) scale(1.5);
}

#pie .menu > div { width: 100%; height: 100%; }
#pie .menu > div > div {
	opacity: 1;
	position: absolute;
	top: 20%; left: 20%;
	width: 60%; height: 60%;

	transition:        	opacity 0.3s linear;
    -ms-transition:    	opacity 0.3s linear;
    -webkit-transition:	opacity 0.3s linear;
}
#pie .menu > div > div:first-child { top: 5%; }
#pie .menu > div > div:last-child, 
.floating-pie #pie .menu > div > div:first-child { opacity: 0; }
.floating-pie #pie .menu > div > div:last-child { opacity: 1; }

#pie .menu svg {
    display: block;
    fill: #35b6b2;
    width: 100%; height: 100%;

    transition:        	fill 0.3s linear;
    -ms-transition:    	fill 0.3s linear;
    -webkit-transition:	fill 0.3s linear;
}
#pie .menu:hover svg { fill: white; }
#pie .menu span {
    position: absolute; display: block;
    color: #35b6b2; top: 90%;
    transition:         color 0.3s linear;
    -ms-transition:     color 0.3s linear;
    -webkit-transition: color 0.3s linear;
}

#pie .menu:hover span { color: white; }

#pie .overlay .center .hint {
    display: none; opacity: 0;
    width: 5em; height: 5em;
}

.floating-pie #pie .overlay .center .hint {
    display: block;
    animation: 			hinting 5s ease 5s infinite;
    -webkit-animation: 	hinting 5s ease 5s infinite;
}

.floating-pie #pie:hover .overlay .center .hint {
    animation: 			none;
    -webkit-animation: 	none;
}

@keyframes hinting {
  0% {
  	opacity: 0;
  	transform:          translate(-50%, -50%) scale(1);
    -ms-transform:      translate(-50%, -50%) scale(1);
  }
  5% {
  	opacity: 1;
  	transform:          translate(-50%, -50%) scale(1);
    -ms-transform:      translate(-50%, -50%) scale(1);
  }
  10% {
  	opacity: 1;
  	transform:          translate(-50%, -50%) scale(0.7);
    -ms-transform:      translate(-50%, -50%) scale(0.7);
  }
  20% {
  	opacity: 1;
  	transform:          translate(-50%, -50%) scale(1);
    -ms-transform:      translate(-50%, -50%) scale(1);
  }
  25% {
  	opacity: 1;
  }
  35% {
  	opacity: 0;
  }
}
@-webkit-keyframes hinting {
  0% {
  	opacity: 0;
    -webkit-transform:  translate(-50%, -50%) scale(1);
  }
  5% {
  	opacity: 1;
    -webkit-transform:  translate(-50%, -50%) scale(1);
  }
  10% {
  	opacity: 1;
    -webkit-transform:  translate(-50%, -50%) scale(0.7);
  }
  20% {
  	opacity: 1;
    -webkit-transform:  translate(-50%, -50%) scale(1);
  }
  25% {
  	opacity: 1;
  }
  35% {
  	opacity: 0;
  }
}

#pie .overlay .center .hint svg { display: block; width: 100%; height: 100%; }
#pie .overlay .center .hint svg .stroke { fill: #333333; }
#pie .overlay .center .hint svg .fill { fill: #ffffff; }

#pie .overlay .center .half { width: 50%; }
#pie .overlay .center strong {
    opacity: 1;
    transition:        	opacity 0.3s linear;
    -ms-transition:    	opacity 0.3s linear;
    -webkit-transition:	opacity 0.3s linear;

    line-height: 1.2; color: #333;
    font-size: 2em;
}
#pie .overlay .sector1 > div strong br,
#pie .overlay .sector5 > div strong br { display: none; }
.floating-pie #pie .overlay .center strong { opacity: 0; }
#pie .overlay .center .half1 strong {
    color: #f6f8e6;
    transform:          rotate(-90deg);
    -ms-transform:      rotate(-90deg);
    -webkit-transform:  rotate(-90deg);
}
#pie .overlay .center .half2 strong {
    color: #93cbb2;
    transform:          rotate(90deg);
    -ms-transform:      rotate(90deg);
    -webkit-transform:  rotate(90deg);
}

#pie[data-hover="1"] .overlay .sector1 > div strong,
#pie[data-hover="2"] .overlay .sector2 > div strong,
#pie[data-hover="3"] .overlay .sector3 > div strong,
#pie[data-hover="4"] .overlay .sector4 > div strong,
#pie[data-hover="5"] .overlay .sector5 > div strong,
#pie[data-hover="6"] .overlay .sector6 > div strong { opacity: 0; }

#pie[data-hover="1"] .overlay .sector1 > div svg,
#pie[data-selected="1"] .overlay .sector1 > div svg { fill: rgba(198,215,96,1.0); }
.floating-pie #pie .overlay .sector1 > div strong,
#pie[data-selected="1"] .overlay .sector1 > div strong { color: rgba(198,215,96,1.0); }

#pie[data-hover="2"] .overlay .sector2 > div svg,
#pie[data-selected="2"] .overlay .sector2 > div svg { fill: rgba(147,196,100,1.0); }
.floating-pie #pie .overlay .sector2 > div strong,
#pie[data-selected="2"] .overlay .sector2 > div strong { color: rgba(147,196,100,1.0); }

#pie[data-hover="3"] .overlay .sector3 > div svg,
#pie[data-selected="3"] .overlay .sector3 > div svg { fill: rgba(74,177,104,1.0); }
.floating-pie #pie .overlay .sector3 > div strong,
#pie[data-selected="3"] .overlay .sector3 > div strong { color: rgba(74,177,104,1.0); }

#pie[data-hover="4"] .overlay .sector4 > div svg,
#pie[data-selected="4"] .overlay .sector4 > div svg { fill: rgba(0,168,112,1.0); }
.floating-pie #pie .overlay .sector4 > div strong,
#pie[data-selected="4"] .overlay .sector4 > div strong { color: rgba(0,168,112,1.0); }

#pie[data-hover="5"] .overlay .sector5 > div svg,
#pie[data-selected="5"] .overlay .sector5 > div svg { fill: rgba(0,161,140,1.0); }
.floating-pie #pie .overlay .sector5 > div strong,
#pie[data-selected="5"] .overlay .sector5 > div strong { color: rgba(0,161,140,1.0); }

#pie[data-hover="6"] .overlay .sector6 > div svg,
#pie[data-selected="6"] .overlay .sector6 > div svg { fill: rgba(53,182,178,1.0); }
.floating-pie #pie .overlay .sector6 > div strong,
#pie[data-selected="6"] .overlay .sector6 > div strong { color: rgba(53,182,178,1.0); }

#pie-container #pie[data-hover="1"] .overlay .sector1 > div svg,
#pie-container #pie[data-hover="2"] .overlay .sector2 > div svg,
#pie-container #pie[data-hover="3"] .overlay .sector3 > div svg,
#pie-container #pie[data-hover="4"] .overlay .sector4 > div svg,
#pie-container #pie[data-hover="5"] .overlay .sector5 > div svg,
#pie-container #pie[data-hover="6"] .overlay .sector6 > div svg { fill: transparent; }

body:not(.floating-pie) #pie-container #pie[data-hover="1"] .overlay .sector1 > div span,
body:not(.floating-pie) #pie-container #pie[data-hover="2"] .overlay .sector2 > div span,
body:not(.floating-pie) #pie-container #pie[data-hover="3"] .overlay .sector3 > div span,
body:not(.floating-pie) #pie-container #pie[data-hover="4"] .overlay .sector4 > div span,
body:not(.floating-pie) #pie-container #pie[data-hover="5"] .overlay .sector5 > div span,
body:not(.floating-pie) #pie-container #pie[data-hover="6"] .overlay .sector6 > div span,
.floating-pie #pie-container #pie[data-hover="1"] .overlay .sector1 strong,
.floating-pie #pie-container #pie[data-hover="2"] .overlay .sector2 strong,
.floating-pie #pie-container #pie[data-hover="3"] .overlay .sector3 strong,
.floating-pie #pie-container #pie[data-hover="4"] .overlay .sector4 strong,
.floating-pie #pie-container #pie[data-hover="5"] .overlay .sector5 strong,
.floating-pie #pie-container #pie[data-hover="6"] .overlay .sector6 strong {
    opacity: 1;
    transform:          translate(-50%, -50%) scale(1);
    -ms-transform:      translate(-50%, -50%) scale(1);
    -webkit-transform:  translate(-50%, -50%) scale(1);
}

.home-page,
.page-content {
    transition:         opacity 0.5s linear;
    -ms-transition:     opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
}

.page-content { opacity: 0.3; position: relative; z-index: 1; }
.home-off .page-content { min-height: 100vh; }
.home-page { opacity: 0; display: block; }
.home-on .home-page { opacity: 1; }
.home-off .home-page { display: none; }

.pie-page {
    display: none;  
    opacity: 0;
    transition:         opacity 0.5s linear;
    -ms-transition:     opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
}
.pie-page.selected { display: block; }
.pie-page.selected.current { opacity: 1; }

.floating-pie .page-content { opacity: 1; }

.floating-img-container {
    position: relative;
}

.floating-img-container section {
    position: relative;
    z-index: 2;
    background: transparent;
}

.floating-img-container section.last { margin-bottom: 3em; }
.floating-img-container .floating-img { position: absolute; pointer-events: none; }
.floating-img-container .floating-svg:after {
    content: '';
    width: 100%;
    display: block;
    position: relative;
}
.floating-img-container .floating-svg svg {
    position: absolute;
    width: 100%; height: 100%;
    display: block;
}

.wide-box {
    width: 100%;
    padding: 2em 0;
    position: relative;
    margin-bottom: 4em;
    z-index: 2;
}

.small-box {
    font-size: 0.8em; text-align: center;
    padding: 2.5em;
}

.wide-box section { background: transparent; margin: auto; }
.wide-box section.flex.text > div { padding-bottom: 0; }
.small-box.cool-green,
.wide-box.cool-green { background: #c2e5d4; }
.small-box.pale-green,
.wide-box.pale-green { background: #deeed1; }
.small-box.light-green,
.wide-box.light-green { background: #eef3d1; }
.small-box.light-turquoise,
.wide-box.light-turquoise { background: #c1e3dc; }

.reveal-on-scroll .animated-dashed-line .ref { opacity: 0; }


.wide-box.info-icons { text-align: center; }
.wide-box.info-icons .icon {
    display: block;
    background: white;
    border-radius: 50%;
    width: 6.2em; height: 6.2em;
    margin: auto;
}
.wide-box.info-icons .icon svg {
    display: block;
    width: 80%; height: 80%;
    padding: 10%; fill: #356031;
}
.wide-box.info-icons h2 { margin: 0.5em; }
.wide-box.info-icons.reveal-on-scroll .flex > div {
    opacity: 0;
    transform:          translateY(3em);
    -ms-transform:      translateY(3em);
    -webkit-transform:  translateY(3em);

    transition:         transform 1s ease, opacity 0.5s linear;
    -ms-transition:     transform 1s ease, opacity 0.5s linear;
    -webkit-transition: transform 1s ease, opacity 0.5s linear;
}

.wide-box.info-icons.reveal-on-scroll .flex > div:nth-of-type(2) {
    transition-delay:         0.2s;
    -ms-transition-delay:     0.2s;
    -webkit-transition-delay: 0.2s;
}
.wide-box.info-icons.reveal-on-scroll .flex > div:nth-of-type(3) {
    transition-delay:         0.4s;
    -ms-transition-delay:     0.4s;
    -webkit-transition-delay: 0.4s;
}
.wide-box.info-icons.reveal-on-scroll.reveal .flex > div {
    opacity: 1;
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.wide-box.info-icons .flex > div img {
    display: block; width: auto; max-width: 100%;
    margin: 0 auto;
    margin-bottom: 0.5em
}



/*
  
  HOME PAGE

*/

.home-page .teamrynkeby {
    display: none; margin: auto;
    width: 70%; max-width: 310px;
}
#pie-container .home-page:first-child section.flex { margin-bottom: 0; }
.home-page section.flex.color-boxes { margin-top: 1em; }
.home-page section.flex.color-boxes > div .col-wrap:before { background: transparent; }
.home-page section.flex > div:nth-of-type(1) .col-wrap img { max-width: 50%; }
.home-page section.flex > div:nth-of-type(2) .col-wrap img { max-width: 80%; }
.home-page section.flex > div:nth-of-type(3) .col-wrap img { max-width: 70%; }
.home-page section.flex > div:nth-of-type(4) .col-wrap img { max-width: 50%; }
.home-page section.flex > div:nth-of-type(5) .col-wrap img { max-width: 65%; }
.home-page section.flex > div:nth-of-type(6) .col-wrap img { max-width: 105%; }
.home-page section.flex > div:nth-of-type(7) .col-wrap img { max-width: 110%; } 

.home-page section.flex.video { align-items: center; }
.home-page section.flex.video > div { padding-left: 0; padding-right: 0; flex-basis: auto; }
.home-page section.flex.video > div:first-child { width: 60%; }
.home-page section.flex.video > div:last-child { width: 40%; }
.home-page section.flex.video h2 { text-align: center; padding: 0 1em; }
.home-page section.flex.video .big-btns .big-btn { max-width: 100%; }
.home-page section.flex.video .big-btns .big-btn:first-child { margin-top: 3em; }

.home-page section.flex.video > div:first-child h2 { display: none; }

.home-page section.flex.video.reveal-on-scroll h2 {
    -webkit-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
            transition-delay: 0.5s;
}

.home-page section.flex.video.reveal-on-scroll .big-btn {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.home-page .floating-img-container-1 .logo.floating-img {
    width: 59.4%; left: 50%; bottom: 0; padding-bottom: 28%;
}

.home-page .floating-img-container-1 .tj-logo p {
    display: none; position: absolute;
    left: 5%; bottom: 10%;
}
.home-page .floating-img-container-1 .tj-logo img { display: block; }
.home-page .floating-img-container-1 .tj.floating-img {
    width: 47.6%; left: 52%; bottom: 0;
}
.home-page .floating-img-container-1 section.last { margin-bottom: 0; padding-bottom: 2em; }

.home-page .floating-img-container-1 .tj.floating-img.reveal-on-scroll {
    transform:          translateY(5em);
    -ms-transform:      translateY(5em);
    -webkit-transform:  translateY(5em);

    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;
}
.home-page .floating-img-container-1 .tj.floating-img.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.home-page .floating-img-container-1 section.flex.text {
    margin-bottom: 0;
}

.home-page .tj-bg {
    position: relative;
}

.home-page .tj-bg .bg {
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
}

.home-page .tj-bg .bg:after {
    display: block;
    content: '';
    width: 100%;
    padding-bottom: 56.3%;
}

.home-page .tj-bg .floater {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    padding: 3em;
    width: 50%;
    max-width: 690px;
    top: 15%;
}

.home-page .tj-bg .floater:before {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    background: rgba(255,255,255,0.7);
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%) translateZ(0);
    -ms-transform: translateY(-50%) translateZ(0);
    transform: translateY(-50%) translateZ(0);
}

.home-page .tj-bg .floater > div {
    position: relative;
}

/*
  
  PAGE - VASTUULLINEN TÄYSMEHU

*/

.vastuullinentaysmehu .fruit {
    position: relative;
    width: 100%; max-width: 462px;
    margin: auto;
    margin-bottom: 0.5em;
}
.vastuullinentaysmehu .fruit img { display: block; }
.vastuullinentaysmehu .fruit .logo {
    position: absolute;
    top: 4%; left: -1%;
    width: 30%; z-index: 2;
}

.vastuullinentaysmehu .fruit .apple { position: relative; z-index: 1; width: 100%; }

.vastuullinentaysmehu .fruit.reveal-on-scroll .logo {
    opacity: 0;

    transition:         transform 0.4s ease-in 0.5s, opacity 0.2s linear 0.5s;
    -ms-transition:     transform 0.4s ease-in 0.5s, opacity 0.2s linear 0.5s;
    -webkit-transition: transform 0.4s ease-in 0.5s, opacity 0.2s linear 0.5s;

    transform:          scale(2);
    -ms-transform:      scale(2);
    -webkit-transform:  scale(2);
}

.vastuullinentaysmehu .fruit.reveal-on-scroll.reveal .logo {
    opacity: 1;
    transform:          scale(1);
    -ms-transform:      scale(1);
    -webkit-transform:  scale(1);
}

.vastuullinentaysmehu .small-box.reveal-on-scroll {
    opacity: 0;

    transition:         transform 1s ease, opacity 0.5s linear;
    -ms-transition:     transform 1s ease, opacity 0.5s linear;
    -webkit-transition: transform 1s ease, opacity 0.5s linear;

    transform:          translateY(5em);
    -ms-transform:      translateY(5em);
    -webkit-transform:  translateY(5em);
}

.vastuullinentaysmehu .small-box.reveal-on-scroll.reveal {
    opacity: 1;
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.vastuullinentaysmehu .floating-img-container-1 section.last { margin-bottom: 0; margin-top:-0.5em; }

.vastuullinentaysmehu .floating-img-container-1 section.no-bottom-margin h2 { display: none; }

.vastuullinentaysmehu .wide-box {
    margin-bottom: 3em;
}

.vastuullinentaysmehu .wide-box .wideWrapper:after {
    content: '';
    position: absolute;
    bottom: 1px; left: 50%;
    width: 0; height: 0;
    border-left: 0.75em solid transparent;
    border-right: 0.75em solid transparent;
    border-top: 1em solid #c1e3dc;

    transform:          translate(-50%, 0);
    -ms-transform:      translate(-50%, 0);
    -webkit-transform:  translate(-50%, 0);
}
.vastuullinentaysmehu .reveal-on-scroll .wide-box .wideWrapper:after {
    transition:         transform 0.7s ease;
    -ms-transition:     transform 0.7s ease;
    -webkit-transition: transform 0.7s ease;
}
.vastuullinentaysmehu .reveal-on-scroll.reveal .wide-box .wideWrapper:after {
    transform:          translate(-50%, 100%);
    -ms-transform:      translate(-50%, 100%);
    -webkit-transform:  translate(-50%, 100%);
}

.vastuullinentaysmehu section.flex.color-boxes { margin-top: 1em; justify-content: center; align-items: center; }
.vastuullinentaysmehu section.flex.color-boxes > div .col-wrap:before { display: none; }

.vastuullinentaysmehu section.flex.color-boxes > div { width: auto; box-sizing: content-box; }
.vastuullinentaysmehu section.flex.color-boxes > div:nth-of-type(1) { max-width: 257px; }
.vastuullinentaysmehu section.flex.color-boxes > div:nth-of-type(2) { max-width: 125px; }
.vastuullinentaysmehu section.flex.color-boxes > div:nth-of-type(3) { max-width: 401px; align-self: flex-end; }

.vastuullinentaysmehu section.flex.color-boxes > div .col-wrap { padding-bottom: 0; }
.vastuullinentaysmehu section.flex.color-boxes > div .col-wrap img {
    display: block;
    top: auto;
    left: auto;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.vastuullinentaysmehu .reveal-on-scroll section.flex.color-boxes > div .col-wrap img {
    -webkit-transform:  translate(-50%, -50%) scale(0);
    -ms-transform:      translate(-50%, -50%) scale(0);
    transform:          translate(-50%, -50%) scale(0);

    -webkit-transition:  transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.35);
    -ms-transition:      transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.35);
    transition:          transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.35);
}

.vastuullinentaysmehu .reveal-on-scroll section.flex.color-boxes > div .col-wrap img {
    -webkit-transform: scale(0);
    -ms-transform:     scale(0);
    transform:         scale(0);
}

.vastuullinentaysmehu .reveal-on-scroll section.flex.color-boxes > div:nth-of-type(1) .col-wrap img {
    -webkit-transition-delay:   0.7s;
    -ms-transition-delay:       0.7s;
    transition-delay:           0.7s;
}
.vastuullinentaysmehu .reveal-on-scroll section.flex.color-boxes > div:nth-of-type(2) .col-wrap img {
    -webkit-transition-delay:   0.9s;
    -ms-transition-delay:       0.9s;
    transition-delay:           0.9s;
}
.vastuullinentaysmehu .reveal-on-scroll section.flex.color-boxes > div:nth-of-type(3) .col-wrap img {
    -webkit-transition-delay:   1.1s;
    -ms-transition-delay:       1.1s;
    transition-delay:           1.1s;
}

.vastuullinentaysmehu .reveal-on-scroll.reveal section.flex.color-boxes > div .col-wrap img {
    -webkit-transform: scale(1);
    -ms-transform:     scale(1);
    transform:         scale(1);
}

.vastuullinentaysmehu .floating-img { display: block; }
.vastuullinentaysmehu .floating-img.leaves { width: 79.667%; left: 49%; bottom: 0; margin-bottom: -8%; }
.vastuullinentaysmehu .floating-img.oranges { width: 132.917%; left: 32%; bottom: 0; z-index: 2; }

.vastuullinentaysmehu .floating-img.leaves.reveal-on-scroll {
    transform:          translateY(4em);
    -ms-transform:      translateY(4em);
    -webkit-transform:  translateY(4em);

    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;
}

.vastuullinentaysmehu .floating-img.oranges.reveal-on-scroll {
    transform:          translateY(6em);
    -ms-transform:      translateY(6em);
    -webkit-transform:  translateY(6em);

    transition:         transform 1s ease 0.8s;
    -ms-transition:     transform 1s ease 0.8s;
    -webkit-transition: transform 1s ease 0.8s;
}

.vastuullinentaysmehu .floating-img.leaves.reveal-on-scroll.reveal,
.vastuullinentaysmehu .floating-img.oranges.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.vastuullinentaysmehu .big-btns {
    width: 42%;
    position: relative; z-index: 1;
    text-align: right;
    margin: 1em auto 0 18%;
    padding-bottom: 2em;
    }
.vastuullinentaysmehu .big-btns .big-btn { text-align: left; }
.vastuullinentaysmehu .big-btns .big-btn:nth-of-type(1) { min-width: 70%; }
.vastuullinentaysmehu .big-btns .big-btn:nth-of-type(2) { min-width: 80%; }
.vastuullinentaysmehu .big-btns .big-btn:nth-of-type(3) { min-width: 90%; }
.vastuullinentaysmehu .big-btns .big-btn:nth-of-type(4) { min-width: 100%; }


.vastuullinentaysmehu .big-btns.reveal-on-scroll .big-btn {
    opacity: 0;

    transition:         transform 0.5s ease, opacity 0.25s linear;
    -ms-transition:     transform 0.5s ease, opacity 0.25s linear;
    -webkit-transition: transform 0.5s ease, opacity 0.25s linear;

    transform:          translateX(4em);
    -ms-transform:      translateX(4em);
    -webkit-transform:  translateX(4em);
}

.vastuullinentaysmehu .big-btns.reveal-on-scroll.reveal .big-btn {
    opacity: 1;
    transform:          translateX(0);
    -ms-transform:      translateX(0);
    -webkit-transform:  translateX(0);
}

.vastuullinentaysmehu .big-btns.reveal-on-scroll .big-btn:nth-of-type(2) {
    transition-delay:         0.1s;
    -ms-transition-delay:     0.1s;
    -webkit-transition-delay: 0.1s;
}
.vastuullinentaysmehu .big-btns.reveal-on-scroll .big-btn:nth-of-type(3) {
    transition-delay:         0.2s;
    -ms-transition-delay:     0.2s;
    -webkit-transition-delay: 0.2s;
}
.vastuullinentaysmehu .big-btns.reveal-on-scroll .big-btn:nth-of-type(4) {
    transition-delay:         0.3s;
    -ms-transition-delay:     0.3s;
    -webkit-transition-delay: 0.3s;
}

.vastuullinentaysmehu section.image.appelsiiniviljemia {
    width: 100%;
    max-width: 900px;
    margin: 2em auto;
}


/*

  PAGE - SOSIAALINEN VASTUU

*/

.sosiaalinenvastuu .teamrynkeby { max-width: 537px; position: relative; margin: auto; }

.sosiaalinenvastuu .teamrynkeby img { display: block; }

.sosiaalinenvastuu .teamrynkeby .prod {
    margin-left: 10%;
    width: 44.7%; max-width: 240px;
}

.sosiaalinenvastuu .teamrynkeby .logo {
    position: absolute;
    top: -28%;
    right: 16%;
    width: 36%;
    max-width: 209px;
    background: #fdda25;
    border-radius: 50%;
}

.sosiaalinenvastuu .teamrynkeby.reveal-on-scroll .logo {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.sosiaalinenvastuu #topline polyline, 
.sosiaalinenvastuu #bottomline polyline {
    stroke-dasharray: 24;
    stroke: #fde700;
    fill: none;
    stroke-width: 5;
}

.sosiaalinenvastuu .topline-container { top: 0; left: 4%; width: 116%; }
.sosiaalinenvastuu .topline-container:after { padding-bottom: 48.06%; }
.sosiaalinenvastuu .bottomline-container { bottom: -2em; left: -15%; width: 90%; }
.sosiaalinenvastuu .bottomline-container svg { overflow: visible; }
.sosiaalinenvastuu .bottomline-container:after { padding-bottom: 26.48%; }

.sosiaalinenvastuu .bottomline-container .bike {
    -webkit-transition-delay: 1s;
        -ms-transition-delay: 1s;
            transition-delay: 1s;
}

.sosiaalinenvastuu .floating-img.people,
.sosiaalinenvastuu .floating-img.map {
    bottom: 0; left: 48%;
}

.sosiaalinenvastuu .floating-img.people { width: 89%; z-index: 2; }
.sosiaalinenvastuu .floating-img.map { width: 166.1%; }

.sosiaalinenvastuu .floating-img.people.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}

.sosiaalinenvastuu .floating-img.people.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.sosiaalinenvastuu .floating-img-container-1 { padding-bottom: 3em; }
.sosiaalinenvastuu .floating-img-container-1 .big-btn { padding-right: 4em; left: 13%; }

.sosiaalinenvastuu .wide-box-1 .flex {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.sosiaalinenvastuu .wide-box-1 .flex > div {
    box-sizing: border-box;
    width: 50%; padding: 1em;
}

.sosiaalinenvastuu .wide-box-1 .flex > div img {
    display: block; width: auto; max-width: 100%;
    margin: 0 auto;
}

.sosiaalinenvastuu .wide-box-1 .flex > div .num {
    font-size: 2.35em; border-radius: 50%;
    width: 2em; height: 2em;
    padding: 0.3em; background: white;
    color: #356031; margin: auto;
    text-align: center;
    line-height: 2em;
}

.sosiaalinenvastuu .wide-box-1 .flex > div h2 {
    text-align: center; margin: auto;
}

.sosiaalinenvastuu .wide-box-1.reveal-on-scroll .logot div:nth-of-type(2) .do-reveal {
    transition-delay:         0.3s;
    -ms-transition-delay:     0.3s;
    -webkit-transition-delay: 0.3s;
}

.sosiaalinenvastuu .wide-box-1.reveal-on-scroll div.do-reveal {
    transition-delay:         0.6s;
    -ms-transition-delay:     0.6s;
    -webkit-transition-delay: 0.6s;
}

.sosiaalinenvastuu .sporttistipendi { margin-bottom: 2em; }
.sosiaalinenvastuu .sporttistipendi img { width: auto; max-width: 100%; display: block; }
.sosiaalinenvastuu .sporttistipendi .logo {
    position: absolute;
    width: 39.1%;
    bottom: 0; left: 0;
    transform:          translate(-40%, 58%);
    -ms-transform:      translate(-40%, 58%);
    -webkit-transform:  translate(-40%, 58%);
}

.sosiaalinenvastuu .stipendi { text-align: center; margin-bottom: 1em; }
.sosiaalinenvastuu .stipendi.flex { justify-content: center; }
.sosiaalinenvastuu .stipendi img { display: block; margin: 0 auto 2em auto; width: 100%; max-width: 137px; }
.sosiaalinenvastuu .rahastipendi { margin-top: 14%; }
.sosiaalinenvastuu .tuotestipendi { z-index: 2; margin-bottom: 3em; }
.sosiaalinenvastuu .tuotestipendi img.tuotteet { display: block; width: 100%; max-width: 466px; margin: 0 auto 5em; }

.sosiaalinenvastuu .big-btns {
    width: 100%;
    top: 42.5em; z-index: 3; position: absolute;
}
.sosiaalinenvastuu .big-btns .big-btn { margin: 0.25em 0; }
.sosiaalinenvastuu .big-btns .big-btn:first-child { padding-left: 12%; }
.sosiaalinenvastuu .big-btns .big-btn:last-child { padding-left: 14%; }

.sosiaalinenvastuu .swimmer {
    display: block;
    float: right;
    width: auto; max-width: 100%;
    margin-top: -10em; margin-bottom: 4em;
    z-index: 1;
}

.sosiaalinenvastuu .swimmer.reveal-on-scroll {
    opacity: 0;
    transition:         opacity 0.5s linear;
    -ms-transition:     opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
}

.sosiaalinenvastuu .swimmer.reveal-on-scroll.reveal { opacity: 1; }

.sosiaalinenvastuu .floating-img.crowd { width: 72.5%; top: 16%; left: -31%; }
.sosiaalinenvastuu .floating-img.soccer { width: 39%; top: 23%; left: -25%; z-index: 4; }

.sosiaalinenvastuu .floating-img.crowd.reveal-on-scroll, 
.sosiaalinenvastuu .floating-img.soccer.reveal-on-scroll {
    transition:         transform 1s ease 0.5s;
    -ms-transition:     transform 1s ease 0.5s;
    -webkit-transition: transform 1s ease 0.5s;
}

.sosiaalinenvastuu .floating-img.crowd.reveal-on-scroll {
    transform:          translateX(-3em);
    -ms-transform:      translateX(-3em);
    -webkit-transform:  translateX(-3em);
}

.sosiaalinenvastuu .floating-img.soccer.reveal-on-scroll {
    transform:          translateX(-12em);
    -ms-transform:      translateX(-12em);
    -webkit-transform:  translateX(-12em);
}

.sosiaalinenvastuu .floating-img.crowd.reveal-on-scroll.reveal,
.sosiaalinenvastuu .floating-img.soccer.reveal-on-scroll.reveal {
    transform:          translateX(0);
    -ms-transform:      translateX(0);
    -webkit-transform:  translateX(0);
}

.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri { align-items: center; margin-bottom: 5em; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri > div { padding-left: 0; padding-right: 0; flex-basis: auto; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri > div:first-child { width: 60%; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri > div:last-child { width: 40%; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri .logo {
    margin: 1em auto; padding: 0 1em;
    width: 80%; max-width: 414px;
}
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri.reveal-on-scroll .logo {
    -webkit-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri > div:first-child .logo { display: none; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri .big-btn { max-width: 100%; margin-top: 1em; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri.reveal-on-scroll .big-btn {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri img { display: block; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri .wide-img { width: 100%; }
.sosiaalinenvastuu section.flex.ainutlaatuinen-saaristomeri .allekirjoita-vetoomus { padding-left: 1.5em; }

.sosiaalinenvastuu .kartonkikilpailu {
    align-items: center;
    margin-bottom: 2em;
}

.sosiaalinenvastuu .kartonkikilpailu img.pakkaukset {
    display: block;
    max-width: 100%;
}

.sosiaalinenvastuu .kartonkikilpailu .logo { 
    display: block;
    width: 90%;
    max-width: 306px;
}

.sosiaalinenvastuu .keraykset-suomessa .logot { max-width: 450px; margin: 0 auto; }

.sosiaalinenvastuu .teamrynkeby-koulujuoksu {
    align-items: center;
    margin-bottom: 2em;
}

.sosiaalinenvastuu .teamrynkeby-koulujuoksu .img-container {
    position: relative;
    width: 100%;
    max-width: 537px;
    margin: 0 auto;
}

.sosiaalinenvastuu .teamrynkeby-koulujuoksu img.koulujuoksu {
    display: block;
    width: 100%;
}

.sosiaalinenvastuu .teamrynkeby-koulujuoksu .logo {
    position: absolute;
    left: -10%;
    bottom: -26%;
    width: 45%;
    max-width: 240px;
}

/*

  PAGE - ILMASTON SUOJELU, HYVITYS

*/

.ilmastonsuojelu-hyvitys .slogan { text-align: center; }

.ilmastonsuojelu-hyvitys .floating-img-container-1 section.last { margin-bottom: 0; padding-bottom: 3em; }
.ilmastonsuojelu-hyvitys .floating-img-container-1 h2.mob { display: none; text-align: center; margin-top: 1.3em; }
.ilmastonsuojelu-hyvitys .floating-img.palms { width: 95.25%; right: -35%; bottom: 0; }
.ilmastonsuojelu-hyvitys .floating-img.children { width: 67%; right: -15%; bottom: 0; }

.ilmastonsuojelu-hyvitys .floating-img.palms.reveal-on-scroll {
    transform:          translateY(4em);
    -ms-transform:      translateY(4em);
    -webkit-transform:  translateY(4em);

    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;
}

.ilmastonsuojelu-hyvitys .floating-img.children.reveal-on-scroll {
    transform:          translateY(6em);
    -ms-transform:      translateY(6em);
    -webkit-transform:  translateY(6em);

    transition:         transform 1s ease 0.8s;
    -ms-transition:     transform 1s ease 0.8s;
    -webkit-transition: transform 1s ease 0.8s;
}

.ilmastonsuojelu-hyvitys .floating-img.palms.reveal-on-scroll.reveal,
.ilmastonsuojelu-hyvitys .floating-img.children.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.ilmastonsuojelu-hyvitys .wide-box .wideWrapper:after {
    content: '';
    position: absolute;
    top: -1px; left: 10%;
    width: 0; height: 0;
    border-left: 0.75em solid transparent;
    border-right: 0.75em solid transparent;
    border-top: 1em solid white;
}
.ilmastonsuojelu-hyvitys .wide-box.reveal-on-scroll .wideWrapper:after {
    left: -10%;
    transition:         left 0.7s ease;
    -ms-transition:     left 0.7s ease;
    -webkit-transition: left 0.7s ease;
}
.ilmastonsuojelu-hyvitys .wide-box.reveal-on-scroll.reveal .wideWrapper:after { left: 10%; }

.ilmastonsuojelu-hyvitys section.flex.image.wide .big-btn {
    margin: 0; width: 100%; height: 100%; display: block; text-align: center;
}

.ilmastonsuojelu-hyvitys section.flex.image.wide > div { padding-top: 0; padding-bottom: 0; }

.ilmastonsuojelu-hyvitys section.flex.image.wide.reveal-on-scroll > div:nth-of-type(2) {
    transition-delay:         0.3s;
    -ms-transition-delay:     0.3s;
    -webkit-transition-delay: 0.3s;
}

.ilmastonsuojelu-hyvitys section.youtube-embed > div {
    position: relative;
    width: 100%; max-width: 800px; margin: auto;
}

.ilmastonsuojelu-hyvitys section.youtube-embed > div:after {
    content: ''; z-index: -1;
    display: block; position: relative;
    width: 100%; padding-bottom: 56.25%;
}
.ilmastonsuojelu-hyvitys section.youtube-embed iframe { position: absolute; width: 100%; height: 100%; }


/*

  PAGE - TYONTEKIJAT

*/

.tyontekijat .wide-box.info-icons .icon svg {
    width: 73%;
    height: 73%;
    padding: 13.5%;
}
.tyontekijat  .wide-box.info-icons.reveal-on-scroll.reveal .flex > div:nth-of-type(2) .icon svg {
    margin-left: 5%;
}

.tyontekijat .berries img { display: block; }
.tyontekijat .berries .berry {
    margin: 0 auto;
    width: 90%;
    max-width: 250px; 
}

.tyontekijat .berries.reveal-on-scroll .berry {
    -webkit-transition-delay: 0.3s;
        -ms-transition-delay: 0.3s;
            transition-delay: 0.3s;
}

.tyontekijat .floating-img.people,
.tyontekijat .floating-img.people-shadows {
    bottom: 0; left: 46%;
}

.tyontekijat .floating-img.people { width: 76.8%; z-index: 2; }
.tyontekijat .floating-img.people-shadows { width: 76.8%; }

.tyontekijat .floating-img.people.reveal-on-scroll,
.tyontekijat .floating-img.people-shadows.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}

.tyontekijat .floating-img.people-shadows.reveal-on-scroll {
    transition-delay:         0.2s;
    -ms-transition-delay:     0.2s;
    -webkit-transition-delay: 0.2s;
}

.tyontekijat .floating-img.people.reveal-on-scroll.reveal,
.tyontekijat .floating-img.people-shadows.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.tyontekijat .floating-img-container-1 { padding-bottom: 3em; }
.tyontekijat .floating-img-container-1 .big-btn { padding-right: 15em; left: 26%; }
.tyontekijat .floating-img-container-1 section.first{ margin-bottom: 2em; }
.tyontekijat .floating-img-container-1 section.middle { margin-bottom: -2em; }
.tyontekijat .floating-img-container-1 section.last { text-align: center; margin-bottom: 2em; }
.tyontekijat .floating-img-container-1 h2.mob { display: none; text-align: center; margin-top: 1.3em; }

.tyontekijat .floating-img-container-2 { padding-bottom: 2em; }
.tyontekijat .floating-img-container-2 section.tavoitteet { margin-bottom: 2.5em; }

.tyontekijat .floating-img-container-1 section.last.reveal-on-scroll h2 {
    -webkit-transition-delay: 0.3s;
        -ms-transition-delay: 0.3s;
            transition-delay: 0.3s;
}

.tyontekijat .big-btns { z-index: 1; position: relative; }
.tyontekijat .big-btns .big-btn { margin: 0.5em 0; }
.tyontekijat .big-btns .big-btn:first-child { margin-left: 3.5%; }

.tyontekijat .tavoitteet .mob { display: none; }

.tyontekijat .nolla-tapaturmaa {
    align-items: center;
    margin-bottom: 3em;
}

.tyontekijat .nolla-tapaturmaa img.logo {
    display: block;
    width: 65%;
    max-width: 300px;
    margin: 1em auto 2em;
}

.tyontekijat .hyva-yritys-box {
    padding: 4em 0;
}

.tyontekijat .hyva-yritys {
    align-items: center;
}

.tyontekijat .hyva-yritys img.logo {
    display: block;
    width: 45%;
    max-width: 205px;
    margin: 1em auto 0;
}

.tyontekijat .vastuullisuuspaiva {
    margin-bottom: 1em;
}

.tyontekijat .vastuullisuuspaiva-kuvat {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1100px;
    height: 700px;
    margin: 1em auto 4em;
}

.tyontekijat .vastuullisuuspaiva-kuvat > div {
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.tyontekijat .vastuullisuuspaiva-kuvat > div.left-col { width: 64% }
.tyontekijat .vastuullisuuspaiva-kuvat > div.right-col { width: 36%; }

.tyontekijat .vastuullisuuspaiva-kuvat > div > div {
    position: relative;
    box-sizing: border-box;
}

.tyontekijat .vastuullisuuspaiva-kuvat .img-wrap { border: 0.5em solid white; }

.tyontekijat .vastuullisuuspaiva-kuvat .img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.tyontekijat .vastuullisuuspaiva-kuvat .left-col > div:nth-of-type(1) { width: 100%; height: 57.7%; }
.tyontekijat .vastuullisuuspaiva-kuvat .left-col > div:nth-of-type(2) { width: 60.5%; height:42.5%; }
.tyontekijat .vastuullisuuspaiva-kuvat .left-col > div:nth-of-type(2) .img { background-position: center left }
.tyontekijat .vastuullisuuspaiva-kuvat .left-col > div:nth-of-type(3) { width: 39.5%; height:42.5%; }
.tyontekijat .vastuullisuuspaiva-kuvat .right-col > div:nth-of-type(1) { width: 100%; height: 67.3%; }
.tyontekijat .vastuullisuuspaiva-kuvat .right-col > div:nth-of-type(2) { width: 100%; height: 32.7%; }

.tyontekijat .vastuullisuuspaiva-kuvat.reveal-on-scroll .img {
    opacity: 0;
    -webkit-transition: opacity 0.8s linear;
        -ms-transition: opacity 0.8s linear;
            transition: opacity 0.8s linear;
}

.tyontekijat .vastuullisuuspaiva-kuvat.reveal-on-scroll.reveal .img { opacity: 1; }

.tyontekijat .vastuullisuuspaiva-kuvat .left-col > div:nth-of-type(2) .img { transition-delay: 0.2s; }
.tyontekijat .vastuullisuuspaiva-kuvat .left-col > div:nth-of-type(3) .img { transition-delay: 0.4s; }
.tyontekijat .vastuullisuuspaiva-kuvat .right-col > div:nth-of-type(1) .img { transition-delay: 0.6s; }
.tyontekijat .vastuullisuuspaiva-kuvat .right-col > div:nth-of-type(2) .img { transition-delay: 0.8s; }

/*

  PAGE - ILMASTONSUOJELU

*/

.ilmastonsuojelu span.brmob { display: none; }

.ilmastonsuojelu section.ilmastoneutraali-yritys { z-index: 3; }
.ilmastonsuojelu section.vihreaa-energiaa { margin-bottom: -1em; }
.ilmastonsuojelu section.video.hoyrylaitos { margin-bottom: 4em; }
.ilmastonsuojelu section.hiilijalanjaljen-hyvittaminen { margin-bottom: -2em; }
.ilmastonsuojelu section.amazonin-sademetsa { margin-bottom: 2em; }
    
.ilmastonsuojelu .floating-img.tuulivoimala { width: 176%; z-index: 2; bottom: 0; left: -6%; }
.ilmastonsuojelu .floating-img.tuulivoimala-shadows { width: 112.5%; bottom: 0; left: 58%; }

.ilmastonsuojelu .floating-img.tuulivoimala.reveal-on-scroll,
.ilmastonsuojelu .floating-img.tuulivoimala-shadows.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}

.ilmastonsuojelu .floating-img.tuulivoimala-shadows.reveal-on-scroll {
    transition-delay:         0.1s;
    -ms-transition-delay:     0.1s;
    -webkit-transition-delay: 0.1s;
}

.ilmastonsuojelu .floating-img.tuulivoimala.reveal-on-scroll.reveal,
.ilmastonsuojelu .floating-img.tuulivoimala-shadows.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.ilmastonsuojelu .floating-img-container-1 { padding-bottom: 1em; }

.ilmastonsuojelu .floating-img-container-1 img.science-based-targets {
    display: block;
    max-width: 500px;
    margin: 3em 0 2em;
}

.ilmastonsuojelu .floating-img-container-1 img.climateneutral-logo-mob { display: none; }
.ilmastonsuojelu .floating-img-container-1 img.climateneutral-logo {
    display: block;
    width: 90%; height: auto; 
    max-width: 467px; 
    margin: 0em auto;
}

.ilmastonsuojelu section.flex.video.energiatehokkuus { align-items: center; margin-bottom: 2em; }
.ilmastonsuojelu section.flex.video.energiatehokkuus > div { padding-left: 0; padding-right: 0; flex-basis: auto; }
.ilmastonsuojelu section.flex.video.energiatehokkuus > div:first-child { width: 40%; z-index: 2; }
.ilmastonsuojelu section.flex.video.energiatehokkuus > div:last-child { width: 60%; }

.ilmastonsuojelu .energiatehokkuus .big-btn { float: right; padding-right: 4em; }

.ilmastonsuojelu .energiatehokkuus.reveal-on-scroll .big-btn {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.ilmastonsuojelu .energiatehokkuus .icon img {
    display: block;
    width: 60%; height: auto;
    max-width: 295px;
    margin: 2em auto 3em;
}
.ilmastonsuojelu .energiatehokkuus video { margin: 0 auto; max-width: 800px; }

.ilmastonsuojelu .energiatehokkuus.reveal-on-scroll > div:first-child {
    -webkit-transition-delay: 0.3s;
        -ms-transition-delay: 0.3s;
            transition-delay: 0.3s;
}

.ilmastonsuojelu section.flex.amazonin-sademetsa > div { flex-basis: auto; }
.ilmastonsuojelu section.flex.amazonin-sademetsa > div:first-child { width: 60%; padding-right: 0; }
.ilmastonsuojelu section.flex.amazonin-sademetsa > div:last-child { width: 40%; padding-left: 0; }

.ilmastonsuojelu .amazonin-sademetsa > div:first-child img.mob { display: none; }
.ilmastonsuojelu .amazonin-sademetsa > div:first-child img { width: 100%; max-width: 800px; margin: 0 auto; }

.ilmastonsuojelu .amazonin-sademetsa .icon { 
    position: relative;
    left: -1.5em;
    width: 100%;
    padding: 0 2em;
    box-sizing: border-box;
}
.ilmastonsuojelu .amazonin-sademetsa .icon img.palm { max-width: 129px; margin: 1em auto; }
.ilmastonsuojelu .amazonin-sademetsa .icon h2 { text-align: center; }
.ilmastonsuojelu .amazonin-sademetsa .icon img.climateneutral-logo {
    width: 90%;
    max-width: 240px;
    margin: 1em auto;
}

.ilmastonsuojelu .amazonin-sademetsa .big-btn { white-space: nowrap; }

.ilmastonsuojelu .amazonin-sademetsa.reveal-on-scroll .big-btn {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.ilmastonsuojelu .laskuri > div { padding: 0 1.8em; }
.ilmastonsuojelu .laskuri h2 { max-width: 570px; }
.ilmastonsuojelu .laskuri h3 { color: #356031; font-size: 0.9em; font-weight: bold; }

.ilmastonsuojelu .amazonin-sademetsa.reveal-on-scroll > div:last-child {
    -webkit-transition-delay: 0.3s;
        -ms-transition-delay: 0.3s;
            transition-delay: 0.3s;
}

/* Laskuri */
.ilmastonsuojelu .cp-section {
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
}
.ilmastonsuojelu .cp-wrapper {
    background: #c1e3dc;
    max-width: 64em;
    padding: 2.3em 3em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
}
.ilmastonsuojelu .cp-logo {
    font-style: italic;
    margin-bottom: 1.2em;
}
.ilmastonsuojelu .cp-logo > div,
.ilmastonsuojelu .cp-logo > a {
    display: inline-block;
    vertical-align: top;
    line-height: 0.9;
}
.ilmastonsuojelu .cp-logo img {
    width: 8em;
    margin-left: 0.25em;
}
.ilmastonsuojelu .cp-slider {
    width: 80%;
    margin: 1em 0;
}
.ilmastonsuojelu #cp-slider-handle {
    cursor: pointer;
    width: 8em;
    margin-left: -3em;
    margin-top: -1.2em;
    line-height: 2.4em;
    height: 2.4em;
    top: 50%;
    text-align: center;
    background: #4b734a;
    color: #c1e3dc;
    border: 1px solid #366031;
    font-weight: bold;
    border-radius: 2px;
    outline-color: #366031;
    text-shadow: -1px 0 #1f381d, 0 1px #1f381d, 1px 0 #1f381d, 0 -1px #1f381d;
}
.ilmastonsuojelu .cp-comparison {
  font-size: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
    width: 100%;
}
.ilmastonsuojelu .cp-comparison-item {
  color: #366031;
    flex: 0 1 25%;
    box-sizing: border-box;
    font-size: 0.9em;
    padding: 1em;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    max-width: 25%;
    white-space: nowrap;
}
.ilmastonsuojelu .cp-comparison-item img {
    max-width: 110px;
    margin: 0 auto;
}
.ilmastonsuojelu .cp-comparison-item span {
    font-size: 1.5em;
    font-weight: bold;
}
.ilmastonsuojelu .cp-comparison-item div {
    width: 100%;
}

.ilmastonsuojelu .sbti-graafi {
    width: 90%;
    max-width: 990px;
    margin: 1em auto;
}

.ilmastonsuojelu .sbti-graafi [data-action] {
    cursor: pointer;
}

.ilmastonsuojelu .sbti-graafi img {
    display: block;
    width: 100%;
    background: #c1e3dc;
}

.ilmastonsuojelu.img-popup img { background: #c1e3dc; }

.ilmastonsuojelu .sbti-graafi .mobile { display: none; }

.ilmastonsuojelu .emas-sertifikaatti .logo {
    display: block;
    width: 35%;
    max-width: 157px;
    margin: 1em auto;
}

.ilmastonsuojelu .paastojen-kehitys {
    margin-bottom: 1em;
}

.ilmastonsuojelu .paastojen-kehitys > *:nth-of-type(1) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ilmastonsuojelu .paastojen-kehitys > * img {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 1em auto;
}

.ilmastonsuojelu section.image.metsamaisema {
    margin-bottom: 4em;
}


/*

  PAGE - PAKKAUSMATERIAALIT

*/

.pakkausmateriaalit .wide-box .flex > div img {
    display: block; width: auto; max-width: 100%;
}

.pakkausmateriaalit section.luontokiittaa { margin-bottom: 0em; padding-bottom: 3.5em; }
.pakkausmateriaalit section.luontokiittaa > div { padding-bottom: 0; }
.pakkausmateriaalit section.kierratettavyys { margin-bottom: 1em; }
.pakkausmateriaalit section.kierratys-ohjeet { margin-bottom: 4em; }

.pakkausmateriaalit .floating-img.trees,
.pakkausmateriaalit .floating-img.trees-shadows {
    bottom: 0; left: 44%;
}

.pakkausmateriaalit .floating-img.trees { width: 112.8%; z-index: 2; }
.pakkausmateriaalit .floating-img.trees-shadows { width: 80.1%; }
.pakkausmateriaalit .floating-img.trees.reveal-on-scroll,
.pakkausmateriaalit .floating-img.trees-shadows.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}
.pakkausmateriaalit .floating-img.trees-shadows.reveal-on-scroll {
    transition-delay:         0.1s;
    -ms-transition-delay:     0.1s;
    -webkit-transition-delay: 0.1s;
}
.pakkausmateriaalit .floating-img.trees.reveal-on-scroll.reveal,
.pakkausmateriaalit .floating-img.trees-shadows.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.pakkausmateriaalit .floating-img.carbon-footprint { bottom: -10%; left: -40%; }
.pakkausmateriaalit .floating-img.carbon-footprint-shadows { top: 23%; left: -19%; }
.pakkausmateriaalit .floating-img.carbon-footprint.reveal-on-scroll {
    transition:         transform 1s ease 1s;
    -ms-transition:     transform 1s ease 1s;
    -webkit-transition: transform 1s ease 1s;

    transform:          translateX(-7em);
    -ms-transform:      translateX(-7em);
    -webkit-transform:  translateX(-7em);
}
.pakkausmateriaalit .floating-img.carbon-footprint.reveal-on-scroll.reveal {
    transform:          translateX(0);
    -ms-transform:      translateX(0);
    -webkit-transform:  translateX(0);
}

.pakkausmateriaalit .floating-img-container-1 { padding-bottom: 6.5em; }
.pakkausmateriaalit .floating-img-container-1 section.first{ margin-bottom: 2em; }

.pakkausmateriaalit .floating-img-container-2 section.first { margin-bottom: 5em; }
.pakkausmateriaalit .floating-img-container-2 section.second { margin-bottom: -1em; }
.pakkausmateriaalit .floating-img-container-2 section.third { margin-bottom: -3em; }
.pakkausmateriaalit .floating-img-container-2 section.second h1 { /*white-space: nowrap; */ }



.pakkausmateriaalit .luontokiittaa .luonto-line-container {
    width: 190%;
    height: 135%;
    top: -8%;
    left: -9%;
}

.pakkausmateriaalit .luontokiittaa .big-btn {
    position: absolute;
    bottom: 29%; left: -30%;
    padding-right: 4em
}
.pakkausmateriaalit .luontokiittaa img {
    z-index: 2;
    pointer-events: none;
    position: relative;
    width: 105.5%; max-width: 567px;
}




.pakkausmateriaalit .luontokiittaa-col {
    position: relative;
    width: 80%;
    margin-top: -5rem;
}

.pakkausmateriaalit .luontokiittaa-col .luontokiittaa,
.pakkausmateriaalit .luontokiittaa-col .luontokiittaa img {
    width: 100%;
}

.pakkausmateriaalit .luontokiittaa-col .luontokiittaa img {
    max-width: none;
}

.pakkausmateriaalit .luontokiittaa-col .luontokiittaa .luonto-line-container {
    width: 185%;
    height: 135%;
    top: -8%;
    left: -5%;
}






.pakkausmateriaalit .luontokiittaa img:not(.mob) { display: block; }
.pakkausmateriaalit .luontokiittaa img.mob { display: none; }

.pakkausmateriaalit .wide-box.kierratettavat-kartonkipakkaukset img.myyntiera {
    position: relative;
    left: -1em;
    width: 75%;
    max-width: 393px;
    margin: 1em auto;
}

.pakkausmateriaalit .wide-box.kierratettavat-kartonkipakkaukset img.logo { 
    position: absolute; 
    top: -2.8em; right: 30%;
    display: block;
    width: 40%;  
    max-width: 194px;
    margin: 0 auto;
}

.pakkausmateriaalit .uudet-pakkaukset img.mob { display: none; }

.pakkausmateriaalit .carbonneutral {
    position: relative;
    width: 75%;
    max-width: 315px;
    margin-left: 6%;
}
.pakkausmateriaalit .carbonneutral img { display: block; }
.pakkausmateriaalit .carbonneutral .prod { margin-left: 6%; width: 100%; }

.pakkausmateriaalit .carbonneutral .logo {
    position: absolute;
    top: -15%; left: 102%;
    width: 56%;
    max-width: 176px;
}

.pakkausmateriaalit .carbonneutral.reveal-on-scroll .logo {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.pakkausmateriaalit section.video.vastuullisempi-korkki {
    z-index: 2;
    position: relative;
    margin-bottom: 3em;
}

.pakkausmateriaalit section.video.vastuullisempi-korkki:not(.video-player) { display: none; }
.pakkausmateriaalit section.video.vastuullisempi-korkki:not(.video-player) .video-container { width: 100%; }
.pakkausmateriaalit section.video.vastuullisempi-korkki .video-container.w-controls .controls svg {
    transform: none;
    top: auto;
    bottom: 1em;
    left: 1em;
}

.pakkausmateriaalit section.video.vastuullisempi-korkki video {
    display: block;
    position: relative;
    width: 100%; margin: auto;
}

.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player > .flex { justify-content: space-around; }
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player > .flex > * { max-width: 45%; align-items: flex-start; }
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player .video-container {
    position: relative;
    will-change: transform;
    flex-grow: 1;

    -webkit-transition: max-width 0.4s ease;
        -ms-transition: max-width 0.4s ease;
            transition: max-width 0.4s ease;
}
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player.playing .video-container.playing {
    max-width: 100%;
}
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player .video-container img.cover { 
    -webkit-transition-duration: 0s;
        -ms-transition-duration: 0s;
            transition-duration: 0s;
}
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player .video-container:not(.playing) img.cover {
    opacity: 1;
}
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player.playing .video-container:not(.playing) {
    pointer-events: none !important;
    max-width: 0;
}
.pakkausmateriaalit section.video.vastuullisempi-korkki.video-player video {
    pointer-events: none !important;
}

.pakkausmateriaalit section.header.vastuullisempi-korkki,
.pakkausmateriaalit section.text.vastuullisempi-korkki { position: relative; background: transparent; }

.pakkausmateriaalit section.text.vastuullisempi-korkki {  margin-bottom: 1em; }
.pakkausmateriaalit section.text.vastuullisempi-korkki > div { padding: 0 1.8em; }
.pakkausmateriaalit section.video.vastuullisempi-korkki p { padding: 1.7em 1em 1em 1em; }

.pakkausmateriaalit .wide-box.paperipillit { padding-bottom: 0; padding-top: 1em; }
.pakkausmateriaalit .wide-box.paperipillit section.flex { align-items: center; }

.pakkausmateriaalit .pawprints.reveal-on-scroll .do-reveal {
    opacity: 0;
    transition:         opacity 0.5s linear;
    -ms-transition:     opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
}

.pakkausmateriaalit .pawprints.reveal-on-scroll img.do-reveal:nth-of-type(2) {
    transition-delay:         0.4s;
    -ms-transition-delay:     0.4s;
    -webkit-transition-delay: 0.4s;
}
.pakkausmateriaalit .pawprints.reveal-on-scroll img.do-reveal:nth-of-type(3) {
    transition-delay:         0.8s;
    -ms-transition-delay:     0.8s;
    -webkit-transition-delay: 0.8s;
}
.pakkausmateriaalit .pawprints.reveal-on-scroll img.do-reveal:nth-of-type(4) {
    transition-delay:         1.2s;
    -ms-transition-delay:     1.2s;
    -webkit-transition-delay: 1.2s;
}
.pakkausmateriaalit .pawprints.reveal-on-scroll.reveal .do-reveal { opacity: 1; }

.pakkausmateriaalit .pawprints { position: relative; }
.pakkausmateriaalit .pawprints img.paw {
    z-index: 1;
    position: absolute;
    top: 0; left: 0;   
}
.pakkausmateriaalit .pawprints img.prod {
    z-index: 2;
    position: relative;
}

.pakkausmateriaalit section.flex.video.kierratys-ohjeet { align-items: center; }
.pakkausmateriaalit section.flex.video.kierratys-ohjeet > div { padding-left: 0; padding-right: 0; flex-basis: auto; }
.pakkausmateriaalit section.flex.video.kierratys-ohjeet > div:first-child { width: 60%; }
.pakkausmateriaalit section.flex.video.kierratys-ohjeet > div:last-child { width: 40%; z-index: 2; }

.pakkausmateriaalit .kierratys-ohjeet .big-btn { margin-bottom: 3em; }

.pakkausmateriaalit .kierratys-ohjeet.reveal-on-scroll .big-btn {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.pakkausmateriaalit .kierratys-ohjeet .logos {
    max-width: 330px;
    display: flex;
    flex-wrap: wrap;
    padding: 1em;
    justify-content: center;
    align-items: center;
}
.pakkausmateriaalit .kierratys-ohjeet .logos > div { width: 35%; box-sizing: border-box; margin: 0 7%; }
.pakkausmateriaalit .kierratys-ohjeet .logos img { 
    display: block; 
    margin: 0.5em auto; 
    width: 100%; height: auto;
    max-width: 114px;
}

.pakkausmateriaalit .kierratys-ohjeet.reveal-on-scroll .logos > div:nth-of-type(2) {
    transition-delay:         0.3s;
    -ms-transition-delay:     0.3s;
    -webkit-transition-delay: 0.3s;
}
.pakkausmateriaalit .kierratys-ohjeet.reveal-on-scroll .logos > div:nth-of-type(3) {
    transition-delay:         0.6s;
    -ms-transition-delay:     0.6s;
    -webkit-transition-delay: 0.6s;
}

.pakkausmateriaalit .kierratys-ohjeet .big-btn.mob { display: none; }

.pakkausmateriaalit .tuoterivisto img {
    display: block;
    max-width: 72%;
    margin: 0 auto;
}


/*

  PAGE - RAVITSEMUS

*/

.ravitsemus .vahemmansokeria-tuotteet .prod {
    display: block;
    width: 71%; max-width: 377px;
    margin: 0 auto 1em;
}
.ravitsemus .vahemmansokeria-tuotteet.reveal-on-scroll .prod {
    -webkit-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
            transition-delay: 0.5s;
}

.ravitsemus .floating-img.omenat,
.ravitsemus .floating-img.omenat-shadows { width: 74.1%; bottom: 0; left: 55%; }
.ravitsemus .floating-img.omenat { z-index: 2; }
.ravitsemus .floating-img.omenat.reveal-on-scroll,
.ravitsemus .floating-img.omenat-shadows.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}
.ravitsemus .floating-img.omenat-shadows.reveal-on-scroll {
    transition-delay:         0.1s;
    -ms-transition-delay:     0.1s;
    -webkit-transition-delay: 0.1s;
}
.ravitsemus .floating-img.omenat.reveal-on-scroll.reveal,
.ravitsemus .floating-img.omenat-shadows.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.ravitsemus .floating-img.godmorgon,
.ravitsemus .floating-img.godmorgon-shadows { width: 67.4%; top: 0; left: -26%; max-width: 750px; }
.ravitsemus .floating-img.godmorgon { z-index: 2; }
.ravitsemus .floating-img.godmorgon.reveal-on-scroll,
.ravitsemus .floating-img.godmorgon-shadows.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}

.ravitsemus .floating-img.godmorgon-shadows.reveal-on-scroll {
    transition-delay:         0.1s;
    -ms-transition-delay:     0.1s;
    -webkit-transition-delay: 0.1s;
}

.ravitsemus .floating-img.godmorgon.reveal-on-scroll.reveal,
.ravitsemus .floating-img.godmorgon-shadows.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.ravitsemus .floating-img.ainesosat,
.ravitsemus .floating-img.ainesosat-shadows { width: 104.2%; bottom: 0;  left: 24%; }
.ravitsemus .floating-img.ainesosat { z-index: 2; }
.ravitsemus .floating-img.ainesosat.reveal-on-scroll {
    transition:         transform 1s ease;
    -ms-transition:     transform 1s ease;
    -webkit-transition: transform 1s ease;

    transform:          translateY(7em);
    -ms-transform:      translateY(7em);
    -webkit-transform:  translateY(7em);
}
.ravitsemus .floating-img.ainesosat.reveal-on-scroll.reveal {
    transform:          translateY(0);
    -ms-transform:      translateY(0);
    -webkit-transform:  translateY(0);
}

.ravitsemus .floating-img-container-1 { padding-bottom: 1em; }
.ravitsemus .floating-img-container-1 section.first { margin-bottom: 0.5em; }
.ravitsemus .floating-img-container-1 section.vahemmansokeria-tuotteet { margin-top: 0.5em; margin-bottom: 0; }
.ravitsemus .floating-img-container-1 section.last { margin-top: 0; margin-bottom: 0; }

.ravitsemus .floating-img-container-2 { padding-bottom: 16em; }
.ravitsemus .floating-img-container-2 section.first { margin-bottom: 1em; }
.ravitsemus .floating-img-container-2 section.taysmehu-tekeehyvaa { margin-bottom: -2em; }
.ravitsemus .floating-img-container-2 section.luomu-tuotteet { margin-bottom: 5em; }
.ravitsemus .floating-img-container-2 section.first h2 { margin: 3em 0 1em; text-align: center; }

.ravitsemus .floating-img-container-2 .big-btns-1 { max-width: 100%; margin-top: 8em; }
.ravitsemus .floating-img-container-2 .big-btns-1 .big-btn { padding-right: 25em; }
.ravitsemus .floating-img-container-2 .big-btns-1 .big-btn:nth-of-type(1) { left: 28%; }
.ravitsemus .floating-img-container-2 .big-btns-1 .big-btn:nth-of-type(2) { left: 15%; }
.ravitsemus .floating-img-container-2 .big-btns-1 .big-btn { white-space: nowrap; }
.ravitsemus .floating-img-container-2 .big-btns-2 { width: 100%; position: relative; bottom: 2.5em; }
.ravitsemus .floating-img-container-2 .big-btns-2 .big-btn { padding-right: 30em; white-space: nowrap; }
.ravitsemus .floating-img-container-2 .big-btns-2 .big-btn:nth-of-type(1) { left: 35%; }
.ravitsemus .floating-img-container-2 .big-btns-2 .big-btn:nth-of-type(2) { left: 29%; }
.ravitsemus .floating-img-container-2 .big-btns-2 .big-btn:nth-of-type(3) { left: 23%; }

.ravitsemus .floating-img-container-2 .big-btns-1 .big-btn.do-reveal {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.ravitsemus .wide-box {
    background: #cbe8d2;
}
.ravitsemus .wide-box.info-icons .wideWrapper { position: relative; }
.ravitsemus .wide-box.info-icons .wideWrapper:after {
    content: '';
    position: absolute;
    top: -43px; left: 7%;
    width: 0; height: 0;
    border-left: 0.75em solid transparent;
    border-right: 0.75em solid transparent;
    border-top: 1em solid white;
}
.ravitsemus .wide-box.info-icons.reveal-on-scroll .wideWrapper:after {
    left: -70%;
    transition:         left 0.7s ease;
    -ms-transition:     left 0.7s ease;
    -webkit-transition: left 0.7s ease;
}
.ravitsemus .wide-box.info-icons.reveal-on-scroll.reveal .wideWrapper:after { left: 7%; }
.ravitsemus .wide-box.info-icons .icon svg {
    width: 73%;
    height: 73%;
    padding: 13.5%;
}


.ravitsemus section.taysmehu-tekeehyvaa > div:last-child { padding: 0; }
.ravitsemus section.taysmehu-tekeehyvaa > div:last-child .col-wrap {
    background: #cbe8d2;
    padding: 2em;
    font-size: 75%;
    text-align: center;
}
.ravitsemus section.taysmehu-tekeehyvaa > div:last-child .col-wrap * { font-size: inherit; }
.ravitsemus section.taysmehu-tekeehyvaa > div:last-child .col-wrap p { margin-bottom: 0; }


.ravitsemus section.flex.fruitjuice-sciencecentre > div { flex-basis: auto; }
.ravitsemus section.flex.fruitjuice-sciencecentre > div:first-child { width: 60%; padding-right: 0; }
.ravitsemus section.flex.fruitjuice-sciencecentre > div:last-child { width: 40%; padding-left: 0; }

.ravitsemus .fruitjuice-sciencecentre > div:first-child img.mob { display: none; }
.ravitsemus .fruitjuice-sciencecentre > div:first-child img { width: 100%; margin: 0 auto; }

.ravitsemus .fruitjuice-sciencecentre .icon { 
    position: relative;
    left: -1.5em;
    width: 100%;
    padding: 0 2em;
    box-sizing: border-box;
}
.ravitsemus .fruitjuice-sciencecentre .icon img { max-width: 198px; margin: 2em auto; }
.ravitsemus .fruitjuice-sciencecentre .big-btn { white-space: nowrap; margin-top: 1em; }

.ravitsemus .fruitjuice-sciencecentre.reveal-on-scroll .big-btn.do-reveal {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}

.ravitsemus .fruitjuice-sciencecentre.reveal-on-scroll > div:last-child {
    -webkit-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
  
.ravitsemus section.flex.video.luomu-tuotteet { align-items: center; }
.ravitsemus section.flex.video.luomu-tuotteet > div { padding-left: 0; padding-right: 0; flex-basis: auto; }
.ravitsemus section.flex.video.luomu-tuotteet > div:first-child { width: 40%; }
.ravitsemus section.flex.video.luomu-tuotteet > div:last-child { width: 60%; z-index: 2; }

.ravitsemus .luomu-tuotteet .logos {
    width: 100%;
    position: absolute; 
    bottom: -2em; left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.ravitsemus .luomu-tuotteet .logos > div { width: auto; box-sizing: border-box; margin: 0 1.5em; }
.ravitsemus .luomu-tuotteet .logos img { width: 100%; margin: 0 auto; display: block; }
.ravitsemus .luomu-tuotteet .logos > div:nth-of-type(1) img { max-width: 122px; }
.ravitsemus .luomu-tuotteet .logos > div:nth-of-type(2) img { max-width: 142px; }

.ravitsemus .luomu-tuotteet.reveal-on-scroll h2 {
    -webkit-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
            transition-delay: 0.5s;
}

.ravitsemus .ifs-food img.logo { 
    display: block; 
    margin: 0 auto;
    width: 55%; height: auto;
    max-width: 203px;
}

.ravitsemus .sydanmerkki.flex { align-items: center; }
.ravitsemus .sydanmerkki.flex > div { padding-left: 0; padding-right: 0; flex-basis: auto; }
.ravitsemus .sydanmerkki.flex > div:first-child { width: 60%; max-width: 668px; }
.ravitsemus .sydanmerkki.flex > div:last-child { width: 40%; }
.ravitsemus .sydanmerkki.flex > div img { display: block; max-width: 100%; }
.ravitsemus .sydanmerkki.flex .sydanmerkki-text { padding-left: 4em; white-space: nowrap; }
.ravitsemus .sydanmerkki.flex .big-btns .big-btn { max-width: 100%; }
.ravitsemus .sydanmerkki.flex .big-btns .big-btn:first-child { margin-top: 3em; }

.ravitsemus .sydanmerkki.flex.reveal-on-scroll .sydanmerkki-text {
    -webkit-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
            transition-delay: 0.5s;
}

.ravitsemus .sydanmerkki.flex.reveal-on-scroll .big-btn {
    -webkit-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
            transition-delay: 0.7s;
}