@font-face {
    font-family: montserrat;
    src: url(font/montserrat-regular-webfont.woff);
	src: url(font/montserrat-regular-webfont.woff2);
}

html { background: #fff; }
body, header { margin: 0; padding: 0; position: relative; }

.kiitos { text-align: center; font-size: 22pt; padding: 40pt 0 20pt 0; }

.footer { font-family: montserrat, sans-serif; font-size: 10pt; text-align: center; margin: 20pt 0 0 0; padding: 25pt 10pt 15pt 10pt; color: #999; clear: both; }

.content { margin: 0 auto; padding: 0; width: 100%; overflow: auto; }

.contact-content { margin: 0 auto; padding: 0; width: 70%;  }

.bullet-list { font-family: montserrat, sans-serif; font-weight: normal; }

a:link { color: #3bf; text-decoration: none; }
a:visited { color: #3bf; text-decoration: none; }
a:hover { color: #9ff; text-decoration: none; }

h2 { text-align: left; font-family: montserrat, sans-serif; font-size: 32pt; font-weight: bold; margin: 0; padding: 4pt 10pt 0pt 0pt; color: #fff; overflow: hidden; text-shadow: 0 1pt 2pt #333; }
h3 { font-family: montserrat, sans-serif; font-size: 11pt; font-weight: bold; margin: 0; }

p { text-align: left; margin: 0; padding: 0; font-family: montserrat, sans-serif; font-weight: normal; }

img.logo { width: 80%; max-width: 800px; display: block;  left: 0; right: 0; margin: 0 auto; overflow: visible;}
div.description { text-align:center; display: block; position: absolute; top: 10%; left: 0; right: 0; margin: 0 auto; margin-top:-20pt; overflow: visible; font-family: montserrat, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 10px #000; z-index: 1000;}
img.banner { width: 100%; height: 100%; padding: 0; margin: 0; object-fit: cover;}
img.social { padding: 0 5px 0 5px; float: right; }


/* MENU */
#stickymenu { position: fixed; top: 0; display: none; z-index: 999; width: 100%;}
ul.menu { padding: 6pt 0 5pt 0; margin: 0; width: 100%; font-family: montserrat, sans-serif; font-size: 14pt; font-weight: normal; text-transform: uppercase; text-align: center; background: #333; }
.menu li { display: inline; white-space: nowrap; margin: 0 5pt 0 5pt; }
.menu-item a:link { text-decoration: none; color: #fb0; }
.menu-item a:visited { text-decoration: none; color: #fb0; }
.menu-item a:hover { text-decoration: none; color: #ff0; }
.menu-item-u a:link { text-decoration: none; color: #9ef; }
.menu-item-u a:visited { text-decoration: none; color: #9ef; }
.menu-item-u a:hover { text-decoration: none; color: #fff; }

/* BLOCKS */
.block-container-light { position: relative; vertical-align: top; display: inline-block; width: 100%; overflow: auto; margin: 0; padding: 0; background: #fff; box-shadow:inset 0 2pt 2pt #aaa; }
.block-container-dark { position: relative; vertical-align: top; display: inline-block; width: 100%; overflow: auto; margin: 0; padding: 0; background: #ccc; box-shadow:inset 0 2pt 2pt #999; }
.link-block { width: 100%; display: block; position: relative; padding: 0; overflow: hidden; border-radius: 2pt; }

.block-container-light h2 { color: #666; text-shadow: none; }
.contact h2 { color: #666; text-shadow: none; }

.block { display: block; position: relative; width: 70%; margin: 5em auto 5em auto; padding: 0; overflow: hidden; border-radius: 1pt 1pt 1pt 1pt; }
.block p { text-align: left; margin: auto 0; padding: 3pt 10pt 10pt 0; font-size: 12pt; color: #333; overflow: hidden; } 
.block a:link { color: #19e;}
.block a:visited { color: #19e;}
.block a:hover { color: #7bf;}

.toimittajat { margin: 0 0 1em 0; padding: 0; }
.toimittajat li { display: inline-block; padding: 5pt 5pt 5pt 5pt; border-left: 1px solid #000; }
.toimittajat li:first-child { border: 0; padding-left: 0pt; }
.toimittajat p { padding: 2pt 0 0 0; }

.tuote-block-container { position: relative; vertical-align: top; display: inline-block; overflow: auto; margin: 0; padding: 0; }

img.block-image { width: 3em; display: block; float:left; margin: 1em 0 0 -5em;}
img.thumb { display: inline-block; margin: 0; padding: 0; width: 8em; border-radius: 0.1em; box-sizing: border-box; border: 1px solid #fff}
img.extra-image { float: right; width: 30%; border-radius: 0.1em; }
img.extra-image2 { display: inline-block; height: 8em; margin-right: 2em;}

/* FORM */
.contact-form {	margin: 0; }
.form-input { width: 90%; padding: 5pt; margin: 0; background-color: #ddd; border: none; font-family: montserrat, sans-serif; font-size: 10pt; }
.form-area { width: 90%; min-height: 10em; padding: 5pt; background-color: #ddd; border: none; font-family: montserrat, sans-serif; font-size: 10pt; }
.form-send { background-color: #000; border: 0; color: #fff; padding: 5pt 10pt 5pt 10pt; font-family: montserrat, sans-serif; font-size: 10pt; }
.form-label { padding-top: 6pt; }

.contact-map { width: 100%; float: right; margin: 0; height: 25em; border: 1px solid #6a6a6a; }

/* CONTACT */
.contact { display: block; width: 100%; margin: 0 0 20pt 0; padding: 0 0 10pt 0; overflow:auto; border-bottom: 1px solid #6a6a6a; box-sizing: border-box; }
.contact-box { float:left; margin: 10pt 30pt 0 0; display: block; }
.contact-box2 { width: 50%; float: left; }
.contact-map {}

/* GALLERY */
.gallery .control-operator:target~.controls .control-button{color:#ccc;color:rgba(255,255,255,.4)}.gallery .control-button:first-of-type,.gallery .control-operator:nth-of-type(1):target~.controls .control-button:nth-of-type(1),.gallery .control-operator:nth-of-type(2):target~.controls .control-button:nth-of-type(2),.gallery .control-operator:nth-of-type(3):target~.controls .control-button:nth-of-type(3),.gallery .control-operator:nth-of-type(4):target~.controls .control-button:nth-of-type(4),.gallery .control-operator:nth-of-type(5):target~.controls .control-button:nth-of-type(5){color:#fff;color:rgba(255,255,255,.8)}.gallery .item:first-of-type{position:static;pointer-events:auto;opacity:1}.gallery .item{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .5s}.gallery .control-operator{display:none}.gallery .control-operator:target~.item{pointer-events:none;opacity:0;animation:none}.gallery .control-operator:target~.controls .control-button{animation:none}@keyframes controlAnimation-2{0%{color:#ccc;color:rgba(255,255,255,.4)}14.3%,50%{color:#fff;color:rgba(255,255,255,.8)}64.3%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-2{0%{opacity:0}14.3%,50%{opacity:1}64.3%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.items-2.autoplay .control-button{animation:controlAnimation-2 14s infinite}.items-2.autoplay .item{animation:galleryAnimation-2 14s infinite}.items-2 .control-button:nth-of-type(1),.items-2 .item:nth-of-type(1){animation-delay:-2s}.items-2 .control-button:nth-of-type(2),.items-2 .item:nth-of-type(2){animation-delay:5s}@keyframes controlAnimation-3{0%{color:#ccc;color:rgba(255,255,255,.4)}9.5%,33.3%{color:#fff;color:rgba(255,255,255,.8)}42.9%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-3{0%{opacity:0}9.5%,33.3%{opacity:1}42.9%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(3):target~.item:nth-of-type(3){pointer-events:auto;opacity:1}.items-3.autoplay .control-button{animation:controlAnimation-3 21s infinite}.items-3.autoplay .item{animation:galleryAnimation-3 21s infinite}.items-3 .control-button:nth-of-type(1),.items-3 .item:nth-of-type(1){animation-delay:-2s}.items-3 .control-button:nth-of-type(2),.items-3 .item:nth-of-type(2){animation-delay:5s}.items-3 .control-button:nth-of-type(3),.items-3 .item:nth-of-type(3){animation-delay:12s}@keyframes controlAnimation-4{0%{color:#ccc;color:rgba(255,255,255,.4)}7.1%,25%{color:#fff;color:rgba(255,255,255,.8)}32.1%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-4{0%{opacity:0}7.1%,25%{opacity:1}32.1%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(3):target~.item:nth-of-type(3){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(4):target~.item:nth-of-type(4){pointer-events:auto;opacity:1}.items-4.autoplay .control-button{animation:controlAnimation-4 28s infinite}.items-4.autoplay .item{animation:galleryAnimation-4 28s infinite}.items-4 .control-button:nth-of-type(1),.items-4 .item:nth-of-type(1){animation-delay:-2s}.items-4 .control-button:nth-of-type(2),.items-4 .item:nth-of-type(2){animation-delay:5s}.items-4 .control-button:nth-of-type(3),.items-4 .item:nth-of-type(3){animation-delay:12s}.items-4 .control-button:nth-of-type(4),.items-4 .item:nth-of-type(4){animation-delay:19s}@keyframes controlAnimation-5{0%{color:#ccc;color:rgba(255,255,255,.4)}5.7%,20%{color:#fff;color:rgba(255,255,255,.8)}25.7%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-5{0%{opacity:0}5.7%,20%{opacity:1}25.7%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(3):target~.item:nth-of-type(3){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(4):target~.item:nth-of-type(4){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(5):target~.item:nth-of-type(5){pointer-events:auto;opacity:1}.items-5.autoplay .control-button{animation:controlAnimation-5 35s infinite}.items-5.autoplay .item{animation:galleryAnimation-5 35s infinite}.items-5 .control-button:nth-of-type(1),.items-5 .item:nth-of-type(1){animation-delay:-2s}.items-5 .control-button:nth-of-type(2),.items-5 .item:nth-of-type(2){animation-delay:5s}.items-5 .control-button:nth-of-type(3),.items-5 .item:nth-of-type(3){animation-delay:12s}.items-5 .control-button:nth-of-type(4),.items-5 .item:nth-of-type(4){animation-delay:19s}.items-5 .control-button:nth-of-type(5),.items-5 .item:nth-of-type(5){animation-delay:26s}
.gallery .control-button { color: #ccc; color: rgba(255, 255, 255, 0.4); }
.gallery .control-button:hover { color: white; color: rgba(255, 255, 255, 0.8); }

/* Theme controls how everything looks in Gallery CSS. */
.gallery { position: relative; margin: 0; padding: 0; }
.gallery .item { width: 100%; height: 25em; overflow: hidden; text-align: center; background: #4d87e2; margin: 0; padding: 0; }
.gallery .controls { position: absolute; bottom: 0; width: 100%; text-align: center; }
.gallery .control-button { display: inline-block; margin: 0 .02em; font-size: 3em; text-align: center; text-decoration: none; transition: color .1s; }