/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
/* edited, formatted & enhanced by August Tamminen April-June 2023 */


/* ULKOASU/LAYOUT CSS */

html {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

body {
margin:0;
}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section {
display:block;
}

summary {
display:list-item;
}

audio,canvas,progress,video {
display:inline-block;
}

progress {
vertical-align:baseline;
}

audio:not([controls]) {
display:none;height:0
}

[hidden],template {
display:none;
}

/* Linkkien ulkoasu - Link Appearance */
a {
background-color:transparent;
color:inherit;
}

/* Linkkien hover ja aktiiviset linkit - Link hover and active links */
a:active,a:hover {
outline-width:0;
}

.a-footer { /* There is no underline in the footer links */
  background-color:transparent;
  color:inherit;
  text-decoration: none;
  }


.a-footer:hover { /* There is an underline in the footer links when the user hovers over them */
  background-color:transparent;
  color:inherit;
  text-decoration: underline;
  }

.a-card { /* There is no underline in the card links */
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}


.a-card:hover { /* There is an underline in the card links*/
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

/* Fonttikoot & Typografia - Font Sizes & Typography */
html,body {
font-family:Verdana,sans-serif, Helvetica;
font-size:14px;
line-height:1.5
}

.font-size-20 {font-size: 20px !important}
.font-size-22 {font-size: 22px !important}
.font-size-30 {font-size: 30px !important}
.font-size-120 {font-size: 120px !important}
.font-size-140 {font-size: 140px !important}
.font-size-150 {font-size: 150px !important}
.font-size-170 {font-size: 170px !important}
.font-size-180 {font-size: 180px !important}


.tiny {
    font-size: 10px !important
}
.small{font-size:12px!important}
.medium{font-size:15px!important}
.large{font-size:18px!important}
.xlarge{font-size:24px!important}
.xxlarge{font-size: 36px !important}
.xxxlarge{font-size:48px!important}
.jumbo{font-size:64px!important}
.serif{font-family:serif}
.sans-serif{font-family:sans-serif}
.cursive{font-family:cursive}
.monospace{font-family:monospace}

small {font-size:80%;}

sub,sup { 
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}

sub {bottom:-0.25em}
sup {top:-0.5em}

.wide{letter-spacing:4px}

code,kbd,pre,samp
{font-family:monospace,monospace;font-size:1em}

html{overflow-x:hidden}

/* Tekstien koristelu - Text Decoration */
abbr[title]{
border-bottom:none;
text-decoration:underline;
text-decoration:underline dotted;
}

/* Lihavoitu teksti - Bolded text */
b,strong {
font-weight:bolder;
}

/* Kursivoitu teksti - Italicized text */
i, italics{
font-style:italic;
}

/* Koodin näkyminen eri fontilla */
.code,.codespan{font-family:Consolas,"courier new";font-size:16px}
.code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.codespan{color:rgb(92, 18, 59);background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}

/* Otsikot - Headings */
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}


h1,h2,h3,h4,h5,h6 {
font-family:"Segoe UI",Arial,sans-serif;
font-weight:400;
margin:10px 0
}


/* Kuvat & Kuviot - Images & Figures */
img{border-style:none}

.image, img {
max-width:100%;
height:auto
}

.image2 {
max-height: 100%;
width: auto
}

img{vertical-align:middle}

figure {margin:1em 40px;}

.bmcert {
  max-height: 60%;
  max-width: 60%;
}

/* The header <h5 class="text-theme">We convert data into refined information</h5> image */
.header-image {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
  background-image: /*linear-gradient(#ffffff, #b4b4b4),*/ url("../kuvat/header.jpg");

  /* Set a specific height */
  height: 50%;

  /* Position and center the image to scale on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.header-content {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* Osakerekisteri hero image */
.hero-osakerekisteri {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
  background-image: /*linear-gradient(#ffffff, #b4b4b4),*/ url("../kuvat/atmo_gradient.jpg");
}

.hero-lims {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
  background-image: /*linear-gradient(#ffffff, #b4b4b4),*/ url("../kuvat/atmo_swirl.jpg");
}

.hero-osakerekisteri, .hero-lims {
  /* Set a specific height */
  height: 50%;
  /* Position and center the image to scale on all screens */
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Kuvituskuvat "cover"-tyylisesti cropattuna kaikki samansuuruisiksi */
.center-cropped, .bottom-cropped, .top-cropped {
        object-fit: cover;
        height: 280px;
        width: 100%;
        /*width: 2000px;*/
      }

 /* Keskeltä rajattu */ .center-cropped {object-position: 0px 75%;}
 /* Alareunasta rajattu */ .bottom-cropped {object-position: bottom;}
 /* Yläreunasta rajattu */ .top-cropped {object-position: top;}

.theme-grey, .theme-gray {
    background-color: #eee !important   /*hiukan oletusta vaaleampi*/
}

/* Läpinäkyvyys */
.opacity-full {opacity: 1.00;} /* 100% */
.opacity-75 {opacity: 0.75;} /* 75% */
.opacity-50 {opacity: 0.50;} /* 50% */
.opacity-25 {opacity: 0.25;} /* 25% */
.opacity-0 {opacity: 0;} /* läpinäkyvä */

/* 50% Läpinäkyvä harmaa tausta mustalla textillä*/
.transparent {
color: #363232;
  background-color: rgba(255,255,255,0.50);
}

/* Jakoviiva - Separator */
hr {
box-sizing:content-box;
height:0;
overflow:visible;
}

hr {
border:0;
border-top:1px solid #eee;
margin:20px 0
}

/* Nappulat - Buttons */
button,input,select,textarea,optgroup,.button-card {
font:inherit;
margin:0
}

button,input,.button-card {
overflow:visible;
}

button,select,.button-card{
text-transform:none;
}

button,.button-card[type=button],[type=reset],[type=submit]{
-webkit-appearance:button;
}

.button-card,button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{
border-style:none;padding:0;
}

.button-card, button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{
outline:1px dotted ButtonText;
}

.button-card,.btn,.button {
border:none;
border-radius: 0px;
display:inline-block;
padding:8px 16px;
vertical-align:middle;
text-overflow:ellipsis;
text-decoration:none;
color:inherit;
background-color:inherit;
text-align:center;
cursor:pointer;
white-space:nowrap;
-webkit-transition-duration:0.4s; /* Safari */
transition-duration: 0.4s;
/* box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 3px 3px 10px 2px rgba(0,0,0,0.19); */
}

.button-card {
position:absolute;
max-width: 60%;
left:20%;
right:20%;
bottom:10px;
}

.button:hover, .button-card:hover {box-shadow:0 8px 8px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.19)}

.btn,.button,.button-menu,.button-card {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}   

.disabled,.btn:disabled,.button:disabled,.button-card:disabled{cursor:not-allowed;opacity:0.3}
.disabled *,:disabled *{pointer-events:none}
.btn.disabled:hover,.btn:disabled:hover{box-shadow:none}


/* Taulukot - Tables */
.table,.table-all {
border-collapse:collapse;
border-spacing:0;
border-radius: 5px;
width:100%;
display:table;
}

.table-all{border:1px solid #ccc}
.bordered tr,.table-all tr{border-bottom:1px solid #ddd}
.striped tbody tr:nth-child(even){background-color:#f1f1f1}
.table-all tr:nth-child(odd){background-color:#fff}
.table-all tr:nth-child(even){background-color:#f1f1f1}
.hoverable tbody tr:hover,.ul.hoverable li:hover{background-color:#ccc}
.centered tr th,.centered tr td{text-align:center}

.table td,.table th,.table-all td,.table-all th{
padding:8px 8px;
display:table-cell;
text-align:left;
vertical-align:top;
border-radius:5px;
}

.table th:first-child,.table td:first-child,.table-all th:first-child,.table-all td:first-child{padding-left:16px}

/* Navigointi & palkit - Navigation & bars */
.sidebar {
height:100%;
width:200px;
background-color:#fff;
position:fixed!important;
z-index:3;
overflow:auto;
display: none;
}

.bar-block .dropdown-hover,.bar-block .dropdown-click{width:100%}
.bar-block .dropdown-hover .dropdown-content,.bar-block .dropdown-click .dropdown-content{min-width:100%}
.bar-block .dropdown-hover .button,.bar-block .dropdown-click .button {
  width:100%;
  text-align:left;
  padding:8px 16px
}

.main,#main{transition:margin-left .4s}
.bar{width:100%;overflow:hidden}
.center .bar{display:inline-block;width:auto}

.bar .bar-item {
padding:8px 16px;
float:left;
width:auto;
border:none;
display:block;
outline:0
}

.bar .dropdown-hover,.bar .dropdown-click{position:static;float:left}
.bar .button .button-card {white-space:normal}

.bar-block .bar-item {
width:100%;
display:block;
padding:8px 16px;
text-align:left;
border:none;
white-space:normal;
float:none;
outline:0
}

.bar-block.center .bar-item{text-align:center}.block{display:block;width:100%}

/* Lomakkeet & Listat - Forms and Lists */
.badge,.tag{
background-color:none;
color:#fff;
display:inline-block;
padding-left:8px;
padding-right:8px;
text-align:center;
}

.badge{border-radius:50%}
.ul {
list-style-type:none;
padding:0;
margin:0;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 3px 3px 10px 2px rgba(0,0,0,0.19);
}

.ul li{padding:8px 16px;border-bottom:1px solid #ddd;}
.ul li:last-child{border-bottom:none}
.tooltip,.display-container{position:relative}
.tooltip .text{display:none}
.tooltip:hover 
.text{display:inline-block}
.ripple:active{opacity:0.5}.ripple{transition:opacity 0s}

.input{
padding:8px;
display:block;
border:none;
border-bottom:1px solid #ccc;
width:100%
}

.select {
padding:9px 0;
width:100%;
border:none;
border-bottom:1px solid #ccc
}

.dropdown-click,.dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.dropdown-hover:hover .dropdown-content{display:block}
.dropdown-hover:first-child,.dropdown-click:hover{background-color:#ccc;color:#000}
.dropdown-hover:hover > .button:first-child,.dropdown-click:hover > .button:first-child{background-color:#ccc;color:#000}

.dropdown-content {
cursor:auto;
color:#363232;
background-color:#fff;
display:none;
position:absolute;
min-width:160px;
margin:0;
padding:0;
z-index:2
}

.check,.radio {
width:24px;
height:24px;
position:relative;
top:6px
}


/* RESPONSIIVISUUS - RESPONSIVENESS */
.responsive{display:block;overflow-x:auto}

/* Containerit, divit & palstat - Containerit, dividers & columns */

.child {
  display: inline-block;
}

.container:after,.container:before,.panel:after,.panel:before,.row:after,.row:before,.row-padding:after,.row-padding:before,
.cell-row:before,.cell-row:after,.clear:after,.clear:before,.bar:before,.bar:after{content:"";display:table;clear:both}

.col,.half,.third,.twothird,.threequarter,.quarter,.fifth{float:left;width:100%}

.col.s1{width:8.33333%}
.col.s2{width:16.66666%}
.col.s3{width:24.99999%}
.col.s4{width:33.33333%}
.col.s5{width:41.66666%}
.col.s6{width:49.99999%}
.col.s7{width:58.33333%}
.col.s8{width:66.66666%}
.col.s9{width:74.99999%}
.col.s10{width:83.33333%}
.col.s11{width:91.66666%}
.col.s12{width:99.99999%}

@media (min-width:601px){
.col.m1{width:8.33333%}
.col.m2,.fifth{width:20%}
.col.m3,.quarter{width:24.99999%}
.col.m4,.third{width:33.33333%}
.col.m5{width:41.66666%}
.col.m6,.half{width:49.99999%}
.col.m7{width:58.33333%}
.col.m8,.twothird{width:66.66666%}
.col.m9,.threequarter{width:74.99999%}
.col.m10{width:83.33333%}
.col.m11{width:91.66666%}
.col.m12{width:99.99999%}
}

@media (min-width:993px){
.col.l1{width:8.33333%}
.col.l2{width:16.66666%}
.col.l3{width:24.99999%}
.col.l4{width:33.33333%}
.col.l5{width:41.66666%}
.col.l6{width:49.99999%}
.col.l7{width:58.33333%}
.col.l8{width:66.66666%}
.col.l9{width:74.99999%}
.col.l10{width:83.33333%}
.col.l11{width:91.66666%}
.col.l12{width:99.99999%}
}


/* Sisällön mukautuminen - Content Adaptation */
.rest{overflow:hidden}
.stretch{margin-left:-16px;margin-right:-16px}
.content,.auto{margin-left:auto;margin-right:auto}
.content{max-width:980px}
.auto{max-width:1140px}
.cell-row{display:table;width:100%}
.cell{display:table-cell}
.cell-top{vertical-align:top}
.cell-middle{vertical-align:middle}
.cell-bottom{vertical-align:bottom}
.hide{display:none!important}
.show-block,.show{display:block!important}
.show-inline-block{display:inline-block!important}
@media (max-width:1205px){.auto{max-width:95%}
}

@media (max-width:600px){
.dropdown-hover.mobile .dropdown-content,.dropdown-click.mobile .dropdown-content{position:relative}	
.hide-small{display:none!important}
.mobile{display:block;width:100%!important}
.bar-item.mobile,.dropdown-hover.mobile,.dropdown-click.mobile{text-align:center}
.dropdown-hover.mobile,.dropdown-hover.mobile .btn,.dropdown-hover.mobile .button,.dropdown-click.mobile,.dropdown-click.mobile .btn,.dropdown-click.mobile .button{width:100%}
}

@media (max-width:404px){
  h5{font-size: 16px;}
}


@media (min-width:993px){.hide-large{display:none!important}.sidebar.collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.hide-medium{display:none!important}}
@media (max-width:992px){.sidebar.collapse{display:none}.main{margin-left:0!important;margin-right:0!important}.auto{max-width:100%}}


/* Asemointi/Näyttö - Orientation/Display */
.top,.bottom{position:fixed;width:100%;z-index:1}
.top{top:0}
.bottom{bottom:0}
.static{position: static}
.relative{position: relative}
.fixed{position: fixed}
.absolute{position: absolute}
.sticky{position: sticky}
.hidden{visibility: hidden}

/* Pääsivulla oleva laatikosto cover-kuvan päällä */ 
.tag {
    position: absolute;
    top: 15%;
    left: 2%;
    max-width: 30%;
    z-index: 2

}
.min-height-100 {min-height: 100px}

/*Laatikosto katoaa mobiilissa*/
@media screen and (max-width: 1300px) {
    .tag { display: none; }}

.overlay{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.display-topleft{position:absolute;left:0;top:0}
.display-topright{position:absolute;right:0;top:0}
.display-bottomleft{position:absolute;left:0;bottom:0}
.display-bottomright{position:absolute;right:0;bottom:0}
.display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-container:hover .display-hover{display:block}
.display-container:hover span
.display-hover{display:inline-block}
/*.display-hover{display:none}*/
.display-position{position:absolute}
.circle{border-radius:50%}
.round-small{border-radius:2px}
.round,.round-medium{border-radius:4px}
.round-large{border-radius:8px}
.round-xlarge{border-radius:16px}
.round-xxlarge{border-radius:32px}
.container,.panel{padding: 0.01em 16px}
.panel{margin-top:16px;margin-bottom:16px}
.left-align{text-align:left!important}
.right-align{text-align:right!important}.justify{text-align:justify!important}.center{text-align:center!important}


/* Margin & Padding */
.row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col>.fifth{padding:0 8px}

.margin{margin:16px!important}
.margin-64{margin:64px!important}
.margin-top{margin-top:16px!important}
.margin-bottom{margin-bottom:16px!important}
.margin-left{margin-left:16px!important}
.margin-right{margin-right:16px!important}
.margin-none{margin:0px!important}
.padding-small{padding:4px 8px!important}
.padding{padding:8px 16px!important}
.padding-equal{padding:16px!important}
.padding-large{padding:12px 24px!important}
.padding-0 {padding: 0px}
.padding-16{padding-top:16px!important;padding-bottom:16px!important}
.padding-24{padding-top:24px!important;padding-bottom:24px!important}
.padding-32{padding-top:32px!important;padding-bottom:32px!important}
.padding-48{padding-top:48px!important;padding-bottom:48px!important}
.padding-64{padding-top:64px!important;padding-bottom:64px!important}
.padding-top-64{padding-top:64px!important}
.padding-top-48{padding-top:48px!important}
.padding-top-32{padding-top:32px!important}
.padding-top-24{padding-top:24px!important}
.padding-top-16{padding-top:16px!important}
.padding-bottom-16{padding-bottom:16px!important}
.min-height-144 {min-height: 144.4px}
.min-height-159 {min-height:159px}
.min-height-150 {min-height: 150px}
.min-height-250 {min-height: 250px}
.min-height-300 {min-height: 300px}
.min-height-350 {min-height: 350px}
.min-height-380 {min-height: 380px}
.min-height-420 {min-height: 420px}
.min-height-460 {min-height: 460px}
.max-height-460 {max-height: 460px}
.min-height-480 {min-height: 480px}
.min-height-500 {min-height: 500px}
.min-height-510 {min-height: 510px}
.min-height-550 {min-height: 550px}
.min-height-600 {min-height: 600px}
.min-height-700 {min-height: 700px}
.max-width-70 {max-width: 70%}
.max-width-100 {max-width: 100%}
.max-height-100 {max-height: 100px}
.image-max {max-height: 100%;max-width: 100%}



.left {
    float: left !important
}.right{float:right!important}
.transparent,.hover-none:hover{background-color:transparent!important}
.hover-none:hover{box-shadow:none!important}

/* "Korttien" muotoilu - "Card" formatting */
.card,.card-2, .card-4 {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  border-radius: 5px;
  position:relative;
  align-content: auto;
  align-items: auto;
}

.card-4,.hover-shadow:hover {
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
position:relative;
border-radius: 5px;
}

.cardstyle {
    color: #00C7C8
}

.cardstyle-2 {
    color: #0063C8
}

.img {
    max-height: 80%;
    max-width: 80%
}

.email {
    padding:4px; 
    border-radius:25%; 
    font-size:17px; 
    color:#ffffff
}

.icon {
    padding: 3px;
    border-radius: 25%;
    font-size: 25px;
    color: #ffffff
}

.center-align {
    text-align: center
}

/* Footer */

.footer-style {
    margin: 0;
    padding: 0
}

.footer-size-1 {
    font-size: 25px !important
}

.footer-size-2 {
    font-size: 17px !important
}

.up {
    position:relative;
    bottom:1px
}
.up-top {
    position: relative;
    bottom: 20px
}

/* Animaatiot - Animations */
.spin{animation:spin 2s infinite linear}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-fading-faster{animation:fading 6.0s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;animation:animatetop 0.6s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-top-slow{position:relative;animation:animatetop 0.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 0.6s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right {position: relative;animation: animateright 0.6s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;animation:animatebottom 0.6s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-input{transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}
.opacity,.hover-opacity:hover{opacity:0.60}.opacity-off,.hover-opacity-off:hover{opacity:1}
.opacity-max{opacity:0.25}.opacity-min{opacity:0.75}

/* Efektit - Effects*/
.greyscale-max,.grayscale-max,.hover-greyscale:hover,.hover-grayscale:hover{filter:grayscale(100%)}
.greyscale,.grayscale{filter:grayscale(75%)}.greyscale-min,.grayscale-min{filter:grayscale(50%)}
.sepia{filter:sepia(75%)}.sepia-max,.hover-sepia:hover{filter:sepia(100%)}.sepia-min{filter:sepia(50%)}

/* Reunukset - Borders */
.border-0{border:0!important}
.border{border:2px solid #ccc!important}
.border-top{border-top:1px solid #ccc!important}.border-bottom{border-bottom:1px solid #ccc!important}
.border-left{border-left:1px solid #ccc!important}.border-right{border-right:1px solid #ccc!important}
.topbar{border-top:6px solid #ccc!important}.bottombar{border-bottom:6px solid #ccc!important}
.leftbar{border-left:6px solid #ccc!important}.rightbar{border-right:6px solid #ccc!important}
.section,.code{margin-top:16px!important;margin-bottom:16px!important}

/* MISC */
mark {
background:#ff0;
color:#363232;
}

optgroup {font-weight:bold}

fieldset{
border:1px solid #c0c0c0;
margin:0 2px;
padding:.35em .625em .75em
}

legend {
color:inherit;
display:table;
max-width:100%;
padding:0;
white-space:normal
}

textarea {
overflow: auto
}

[type=checkbox],[type=radio]{padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]{
-webkit-appearance:textfield;
outline-offset:-2px
}

[type=search]::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-file-upload-button{
-webkit-appearance:button;
font:inherit;}

/* VÄREJÄ: Yleinen - COLORS: General */
.amber,.hover-amber:hover{color:#363232!important;background-color:#ffc107!important}
.aqua,.hover-aqua:hover{color:#363232!important;background-color:#00ffff!important}
.blue,.hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.light-blue,.hover-light-blue:hover{color:#363232!important;background-color:#87CEEB!important}
.brown,.hover-brown:hover{color:#fff!important;background-color:#795548!important}
.cyan,.hover-cyan:hover{color:#363232!important;background-color:#00bcd4!important}
.blue-grey,.hover-blue-grey:hover,.blue-gray,.hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.green,.hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.light-green,.hover-light-green:hover{color:#363232!important;background-color:#8bc34a!important}
.indigo,.hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.khaki,.hover-khaki:hover{color:#363232!important;background-color:#f0e68c!important}
.lime,.hover-lime:hover{color:#363232!important;background-color:#cddc39!important}
.orange,.hover-orange:hover{color:#363232!important;background-color:#ff9800!important}
.deep-orange,.hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.pink,.hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.purple,.hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.deep-purple,.hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.red,.hover-red:hover{color:#fff!important;background-color:#f44336!important}
.sand,.hover-sand:hover{color:#363232!important;background-color:#fdf5e6!important}
.teal,.hover-teal:hover{color:#fff!important;background-color:#009688!important}
.yellow,.hover-yellow:hover{color:#363232!important;background-color:#ffeb3b!important}
.white,.hover-white:hover{color:#363232!important;background-color:#fff!important}
.black,.hover-black:hover{color:#fff!important;background-color:#363232!important}
.grey,.hover-grey:hover,.gray,.hover-gray:hover{color:#363232!important;background-color:#9e9e9e!important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#363232!important;background-color:#f1f1f1!important}
.dark-grey,.hover-dark-grey:hover,.dark-gray,.hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.pale-red,.hover-pale-red:hover{color:#363232!important;background-color:#ffdddd!important}
.pale-green,.hover-pale-green:hover{color:#363232!important;background-color:#ddffdd!important}
.pale-yellow,.hover-pale-yellow:hover{color:#363232!important;background-color:#ffffcc!important}
.pale-blue,.hover-pale-blue:hover{color:#363232!important;background-color:#ddffff!important}

/* VÄREJÄ: Tekstit - COLORS: Text */
.text-amber,.hover-text-amber:hover{color:#ffc107!important}
.text-aqua,.hover-text-aqua:hover{color:#00ffff!important}
.text-blue,.hover-text-blue:hover{color:#2196F3!important}
.text-light-blue,.hover-text-light-blue:hover{color:#87CEEB!important}
.text-brown,.hover-text-brown:hover{color:#795548!important}
.text-cyan,.hover-text-cyan:hover{color:#00bcd4!important}
.text-blue-grey,.hover-text-blue-grey:hover,.text-blue-gray,.hover-text-blue-gray:hover{color:#607d8b!important}
.text-green,.hover-text-green:hover{color:#4CAF50!important}
.text-light-green,.hover-text-light-green:hover{color:#8bc34a!important}
.text-indigo,.hover-text-indigo:hover{color:#3f51b5!important}
.text-khaki,.hover-text-khaki:hover{color:#b4aa50!important}
.text-lime,.hover-text-lime:hover{color:#cddc39!important}
.text-orange,.hover-text-orange:hover{color:#ff9800!important}
.text-deep-orange,.hover-text-deep-orange:hover{color:#ff5722!important}
.text-pink,.hover-text-pink:hover{color:#e91e63!important}
.text-purple,.hover-text-purple:hover{color:#9c27b0!important}
.text-deep-purple,.hover-text-deep-purple:hover{color:#673ab7!important}
.text-red,.hover-text-red:hover{color:#f44336!important}
.text-sand,.hover-text-sand:hover{color:#fdf5e6!important}
.text-teal,.hover-text-teal:hover{color:#009688!important}
.text-yellow,.hover-text-yellow:hover{color:#d2be0e!important}
.text-white,.hover-text-white:hover{color:#fff!important}
.text-black,.hover-text-black:hover{color:#363232!important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575!important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:#f1f1f1!important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:#3a3a3a!important}

/* VÄREJÄ: Reunukset - COLORS: Borders */
.border-amber,.hover-border-amber:hover{border-color:#ffc107!important}
.border-aqua,.hover-border-aqua:hover{border-color:#00ffff!important}
.border-blue,.hover-border-blue:hover{border-color:#2196F3!important}
.border-light-blue,.hover-border-light-blue:hover{border-color:#87CEEB!important}
.border-brown,.hover-border-brown:hover{border-color:#795548!important}
.border-cyan,.hover-border-cyan:hover{border-color:#00bcd4!important}
.border-blue-grey,.hover-border-blue-grey:hover,.border-blue-gray,.hover-border-blue-gray:hover{border-color:#607d8b!important}
.border-green,.hover-border-green:hover{border-color:#4CAF50!important}
.border-light-green,.hover-border-light-green:hover{border-color:#8bc34a!important}
.border-indigo,.hover-border-indigo:hover{border-color:#3f51b5!important}
.border-khaki,.hover-border-khaki:hover{border-color:#f0e68c!important}
.border-lime,.hover-border-lime:hover{border-color:#cddc39!important}
.border-orange,.hover-border-orange:hover{border-color:#ff9800!important}
.border-deep-orange,.hover-border-deep-orange:hover{border-color:#ff5722!important}
.border-pink,.hover-border-pink:hover{border-color:#e91e63!important}
.border-purple,.hover-border-purple:hover{border-color:#9c27b0!important}
.border-deep-purple,.hover-border-deep-purple:hover{border-color:#673ab7!important}
.border-red,.hover-border-red:hover{border-color:#f44336!important}
.border-sand,.hover-border-sand:hover{border-color:#fdf5e6!important}
.border-teal,.hover-border-teal:hover{border-color:#009688!important}
.border-yellow,.hover-border-yellow:hover{border-color:#ffeb3b!important}
.border-white,.hover-border-white:hover{border-color:#fff!important}
.border-black,.hover-border-black:hover{border-color:#363232!important}
.border-grey,.hover-border-grey:hover,.border-gray,.hover-border-gray:hover{border-color:#9e9e9e!important}
.border-light-grey,.hover-border-light-grey:hover,.border-light-gray,.hover-border-light-gray:hover{border-color:#f1f1f1!important}
.border-dark-grey,.hover-border-dark-grey:hover,.border-dark-gray,.hover-border-dark-gray:hover{border-color:#616161!important}
.border-pale-red,.hover-border-pale-red:hover{border-color:#ffe7e7!important}
.border-pale-green,.hover-border-pale-green:hover{border-color:#e7ffe7!important}
.border-pale-yellow,.hover-border-pale-yellow:hover{border-color:#ffffcc!important}
.border-pale-blue,.hover-border-pale-blue:hover{border-color:#e7ffff!important}