html {
  position:relative;
  min-height: 100%;
}

html, body{
  margin:0;
  padding:0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

a {
  color: #789F42;
  text-decoration: none;
  font-weight: stronger;
}

a:hover {
  color: #789F42;
  font-weight: stronger;
}

a:active {
  color: #789F42;
  font-weight: stronger;
}

a:visited {
  color: #789F42;
  font-weight: stronger;
}


.Cairo {
  font-family: 'Cairo', sans-serif;
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

.Arial {
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

.Verdana {
  font-family: Verdana;
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

.Helvetica {
  font-family: Helvetica;
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

.Georgia {
  font-family: Georgia;
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

div {
  background-color: transparent;
}

ol {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
}

/*
li {
  margin-top: 10px;
}
*/

.font-color-black {
  color: black;
}

.error {
  color: #ff0000;
  font-family: EraGrotesk-Medium, sans-serif !important;
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}

.font-color-white {
  color: white;
}

.font-color-red {
  color: #ff0000;
}

.font-color-graytext {
  color: #999999;
}

.font-size-50px {
  font-size: 50px;
}

.font-size-26px {
  font-size: 26px;
}

.font-size-25px {
  font-size: 25px;
}

.font-size-24px {
  font-size: 24px;
}

.font-size-20px {
  font-size: 20px;
}

.font-size-19px {
  font-size: 19px;
}

.font-size-16px {
  font-size: 16px;
}

.font16-20px {
  font-size: 16px;
  line-height: 20px;
}

.font16-26px {
  font-size: 16px;
  line-height: 26px;
}

.font-size-14px {
  font-size: 13px;
}

.font-size-13px {
  font-size: 13px;
}

/* common / home specific css */

.demo {
  background-color: red;
}

.height-60vw {
    height: 60vh;
}

.width-80-00-vw {
  width: 80.00vw; /* 1128/2 px in 1180 px window */
}

.width-60-00-vw {
  width: 60.00vw; /* 1128/2 px in 1180 px window */
}

.width-47-80-vw {
  width: 47.8vw; /* 1128/2 px in 1180 px window */
}

.width-95-60-vw {
  width: 95.6vw; /* 1128 px in 1180 px window */
}

.width-95-25-vw {
  width: 95.25vw; /* 1124 px in 1180 px window */
}

.width-11-95-vw {
  width: 11.95vw; /* 147.5px in 1180px window */
}

.width-12-50-vw {
  width: 12.5vw; /* 147.5px in 1180px window */
}

.width-29-66-vw {
  width: 29.66vw;  /* 350px in 1180px window */
}

.width-31-02-vw {
  width: 31.02vw;
}

.width-29-40-vw {
  width: 29.4vw;
}

.width-02-12-vw {
  width: 2.12vw;
}

.width-24-00-vw {
  width: 24.00vw;
}

.width-49-12-vw {
  width: 49.12vw;
}

.width-01-76-vw {
  width: 1.76vw; /* 22px in 1250px window */
}

.width-22-46-vw {
  width: 22.46vw;
}

.width-12-29-vw {
  width: 12.29vw;
}

.width-02-54-vw {
  width: 2.54vw;
}

.width-22-63-vw {
  width: 22.63vw;
}

.width-46-96-vw {
  width: 46.96vw;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

div.container100p {
 width: 100%;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.bggray {
  background-color: #4C4C4C;
}

.bgvitalitas {
  background-color: rgba(164, 199, 25, .8);
}

.bggray2 {
  background-color: #D1D1CF;
}

.bgblack {
  background-color: black;
}

.bgblackgray1 {
  background-color: #959595;
}

.bgblackgray2 {
  background-color: #A4A4A4;
}

.bgblackgray3 {
  background-color: #BDBDBD;
}

.bgblackgray4 {
  background-color: #BFBFBF
}

.bgblackgray5 {
  background-color: #CFCFCF
}
.bgblackgray6 {
  background-color: #EFEFEF
}

.bgcyanwhite {
  background-color: #EEFCFB;
}

.bgblackopa30 {
  background: rgba(0,0,0,.1);
}

.bglightgray {
  background-color: #EEEEEE;
}

.bglightgray2 {
  background-color: #EEEDED;
}

.bgwhite {
  background-color: #FFFFFF;
}

.bgcyanish {
  background-color: #D8FEFA;
}

.bglightgreen {
  background-color: #D4FCCD;
}

.lightgray {
  color: #A09F9F;
}

.lightred {
  color: #E86B6E;
}
.pagewidthset {
  margin: auto;
  max-width: 1180px;
}

.flexcontainer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; /* or inline-flex */
  /* flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
}

.flex-justify-left {
  -ms-flex-pack: start;
  -moz-box-pack: start;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-justify-right {
  -ms-flex-pack: end;
  -moz-box-pack: end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-justify-center {
  -ms-flex-pack: center;
  -moz-box-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.flex-justify-space-between {
  -ms-flex-pack: justify;
  -moz-box-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-justify-space-around {
  -ms-flex-pack: justify;
  -moz-box-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flex-align-middle {
  -ms-flex-align: center;
  -moz-box-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.flex-align-bottom {
  -ms-flex-align: end;
  -moz-box-align: end;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.flex-align-top {
  -ms-flex-align: start;
  -moz-box-align: start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-item {
  flex-shrink: 1; /* default is 1 */
  display: block;
}

.flex-item-align-bottomnotinuse {
  align-self: flex-end;
}

.styled-select {
   /* background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0; */
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;

}

/* css select start */

/*the container must be positioned relative:*/
.custom-select {
 position: relative;
 font-family: Arial;
}
.custom-select select {
 display: none; /*hide original SELECT element:*/
}
.select-selected {
 background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
 position: absolute;
 content: "";
 top: 14px;
 right: 10px;
 width: 0;
 height: 0;
 border: 6px solid transparent;
 border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
 border-color: transparent transparent #fff transparent;
 top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
 color: #ffffff;
 padding: 8px 16px;
 border: 1px solid transparent;
 border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
 cursor: pointer;
}
/*style items (options):*/
.select-items {
 position: absolute;
 background-color: DodgerBlue;
 top: 100%;
 left: 0;
 right: 0;
 z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
 display: none;
}
.select-items div:hover, .same-as-selected {
 background-color: rgba(0, 0, 0, 0.1);
}

/* css select end */

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.blue    {
  /* background-color: #a4c719; */
  font-size: 16px;
  color: black;
}

.blue select    { color: #fff; }

#topnavi-fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#topnavi {
  color: black;
  font-size: 12px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}

.topnavi-item img {
  vertical-align: middle;
}

#topnavi-item-header {
  color: black;
  vertical-align: middle;
  text-align: left;
}

#topnavi-item-cart {
  text-align: right;
}

#logo img {
    width:100%;
}

.taustakuva img {
  width:100%;
}

.henkilokuva img {
  width:100%;
  max-width: 400px;
  padding-right: 15px;
  padding-bottom: 25px;
  float: left;
}

.italic {
  font-style: italic;
}

#taustakuvateksti {
  color: white;
  background-color: rgba(164, 199, 25,.6);
}

.container {
    position: relative;
    text-align: center;
    color: white;
}

.bggreenish {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  background-color: rgba(164, 199, 25,.5);
}

.centered {
    width: 80%;
    background-color: rgba(164, 199, 25,.5);
    position: absolute;
    top: 30vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:1vw;
}

.centered p {
    font-size: 24px;
    font-weight: 500;
}

.centered p a {
    color: #7DA02F;
    text-shadow: 1px 1px #7DA02F;
}

#yhteystiedot a {
    color: white;
    text-shadow: 1px 1px #7DA02F;
    font-weight: bolder;
}

.slickheightset {
  margin-top: 25px;
  height: 45.0vw;
  max-height: 450px;
}

/* hide slick while loading page */
.slick {
  display: none;
}

/* show slick after loading page */
.slick.slick-initialized {
  display: block;
}

.slickhome {
  font-family: 'Arial';
  font-size: 200px;
  font-size: 22.0vw;
}

#slickhome1 {
  color: black;
}

#slickhome2 {
  color: red;
}

#slickhome3 {
  color: green;
}

#showcases {
  height: 25.85vw; /* 305px in 1180px window */
  max-height: 305px;
}

#showcases2 {
  height: 25.85vw; /* 305px in 1180px window */
  max-height: 305px;
}

.adbox, .custombox {
  margin-left: 8px;
  margin-right: 8px;
  -webkit-box-shadow: 1px 1px 3px 0px #343434;
  -moz-box-shadow: 1px 1px 3px 0px #343434;
  box-shadow: 1px 1px 3px 0px #343434;
  text-align: left;
  font-size: 12px;
}

.adbox {
  padding: 0.68vw;
  max-width: 350px;
  height: 21.95vw;
  max-height: 259px;
}

.custombox {
  max-width: 366px;
  height: 29.66vw;
  max-height: 350px;
}

.custombox img {
  width: 100%;
  max-width: 366px;
}

.intro img {
    width: 100%;
    /* max-width: 900px; */
}

#custom {
  padding-top: 8px;
  padding-bottom: 8px;
  max-height: 545px;
  height: 100%;
}

.adt {
  height: 6.355vw; /* 75px in 1180px window */
  max-height: 75px;
  padding-left: 5px;
}

.adt a {
  color: #B0AEAE;
}

.admore {
  text-align: right;
}

.admoretxt {
  border-radius: 2px;
  border: 1px solid #969696;
  padding: 1px 3px 1px 3px;
  margin-top: 10px;
  margin-bottom: 4px;
}

.admoretxt a {
  color: #969696;
  font-size: 9px;
}

.showcaseimg {
  max-width: 347px;
}

.showcaseicon {
  max-width: 25px;
}

.spacer1px {
  height: 1px;
}

.fontcolorvitalitas {
  color: #789F42;
  font-weight: bolder;
}

.fonts {
  height: 20vw;
  max-height: 200px;
}

.fontbox {
  max-width: 284px;
  height: 11.02vw;
  max-height: 130px;
  text-align: center;
  font-size: 12px;
}

.lmarginsetnavi {
  margin-left: 5.085vw;
}

.rmarginsetnavi {
  margin-right: 5.085vw;
}

.lmarginset {
  margin-left: 0px;
}

.rmarginset {
  margin-right: 0px;
}

.fontboxdemo,
.fontboxdemo a:link,
.fontboxdemo a:visited,
.fontboxdemo a:hover,
.fontboxdemo a:active {
  font-size: 100px;
  color: black;
}

.showunder780px {
  display: none;
}

.showunder520px {
  display: none;
}

.showunder500px {
  display: none;
}

/* /fonts specific css */

.stylelocator {
  height: 12.53vw;
  max-height: 100px;
}

/* /family specific css */

#specimen-header {
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 14px;
  color: black;
}

.speci-item {
  font-size: 19px;
  color: black;
  line-height: 33px;
  height: 33px;
  border-top: 1px solid #969696;
}

.speci-spacer {
  line-height: 33px;
  height: 33px;
  max-width: 22px;
}

.cart-item  {
  font-size: 14px;
  color: black;
  line-height: 33px;
}

.cart-item-discount {
  max-width: 265px;
  color: #E39689;
  text-align: right;
}

.cart-item-price {
  width: 12.29vw;
  max-width: 145px;
  color: #7C9477;
  text-align: right;
}

.cart-item-add {
  max-width: 30px;
  text-align: right;
}

.family-preview-0 {
  font-size: 11px;
  color: #5A5A5A;
  line-height: 20px;
  border-top: 1px solid #969696;
}

.margintop10px {
  margin-top: 10px;
}

.margintop30px {
  margin-top: 30px;
}

.margintop50px {
  margin-top: 50px;
}

.margintop70px {
  margin-top: 70px;

}

.family-preview-1 {
  font-size: 100px;
  color: black;
  line-height: 100px;
}

.family-preview-2 {
  font-size: 35px;
  color: black;
  line-height: 35px;
}

.family-preview-3 {
  font-size: 11px;
  line-height: 20px;
  color: #5A5A5A;
  border-top: 1px solid #969696;
}

.lmarginsetprev {
  margin-left: 1.69vw; /* 20px in 1180px window */
}

.family-preview-3demo {
  font-size: 200px;
  color: black;
  line-height: 200px;
}

.family-preview-3demo2 {
  font-size: 30px;
  color: black;
  line-height: 30px;
}

.family-preview-4 {
  font-size: 11px;
  line-height: 20px;
  color: #5A5A5A;
  border-top: 1px solid #969696;
}

.family-preview-4demo {
  font-size: 14px;
  color: #8C8C8C;
  line-height: 14px;
}

.family-preview-5 {
  font-size: 11px;
  line-height: 20px;
  color: black;
  border-top: 1px solid #969696;
}

.family-preview-5demo {
  font-size: 18px;
  color: #8C8C8C;
  line-height: 18px;
}

.family-preview-6demo {
  font-size: 400px;
  color: black;
  line-height: 400px;
}

.family-preview-7demo {
  font-size: 9.75vw; /* 115px in 1180 window */
  color: black;
  line-height: 10.5vw;
  text-align: center;
}

/* /font single page specific css */

.text-grayed-out {
  color: #CCCCCC;
}

.margintop45px {
  margin-top: 45px;
}

.margintop70px {
  margin-top: 70px;
}

.font250px {
  font-size: 250px;
  line-height: 250px;
}

.font30-32px {
  font-size: 30px;
  line-height: 32px;
}

.singledemobox260px {
  height: 260px;
  overflow-y: hidden;
}

.text-align-right {
  text-align: right;
}

.font225px {
  font-size: 225px;
  line-height: 225px;
}

.font26-28px {
  font-size: 26px;
  line-height: 28px;
}

.singledemobox200px {
  height: 200px;
  overflow-y: hidden;
}

.font200px {
  font-size: 200px;
  line-height: 200px;
}

.font24-26px {
  font-size: 24px;
  line-height: 26px;
}

.singledemobox186px {
  height: 186px;
  overflow-y: hidden;
}

.font175px {
  font-size: 175px;
  line-height: 175px;
}

.font22-24px {
  font-size: 22px;
  line-height: 24px;
}

.singledemobox146px {
  height: 146px;
  overflow-y: hidden;
}

.singledemobox136px {
  height: 136px;
  overflow-y: hidden;
}

.font150px {
  font-size: 150px;
  line-height: 150px;
}

.font20-22px {
  font-size: 20px;
  line-height: 22px;
}

.font80-85px {
  font-size: 80px;
  line-height: 85px;
}

/* cart */

table {
  border-collapse: separate;
  border-spacing: 0px;
  width: 100%;
  max-width: 600px;
  margin-left: 60px;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 1.7vw;
  padding-right: 1.7vw;
  background-color: #D1D1CF;
  border-bottom: 1px solid white;
  border-collapse: collapse;
}

.paddingtop-5px {
  padding-top: -5px;
}

td.valign-top {
  padding-top: 17px;
  vertical-align: top;
}

td.valign-middle {
  /* padding-top: 10px; */
  vertical-align: middle;
}

td.name {
  width: 30%;
}

td.cbox {
  width: 1.6vw;
}

td.volume {
  width: 21%;
}

td.remove {
  width: 11%;
  border-right: 1px solid white;
  text-align: right;
}

td.price {
  width: 15%;
  text-align: right;
}

td.rightborderwhite {
  border-right: 1px solid white;
}

td.nobordersright {
  text-align: right;
  border: 0px;
}


td.header {
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.license-hidden {
  display: none;
  padding-top: 10px;
}

.paddingleft200px {
  padding-left: 175px;
}

.paddingleft40px {
  padding-left: 40px;
}

.cart {
  padding-top: 20px;
}

#delivery, #billing {
  width: 45vw;
  max-width: 550px;
  line-height: 30px;
  }

input.orderform {
  margin-right: 6px;
  margin-bottom: 5px;
  margin-top: -5px;
}

input[type="radio"].orderform-mac {
  padding:0 10px 0 0;
  position:relative;
  top:-2px;
}

input[type="radio"].orderform-others {
  padding:0 10px 0 0;
  position:relative;
  top: 1px;
}

input[type="text"].orderform {
  width: 99%;
  outline: none;
  background-color: #ebebeb;
  border: none;
  border-color: transparent;
  padding-left: 4px;
  font-size: 22px;
  line-height: 35px;
  transition:width 0.1s; /* for automatic size resize */
}

select.orderform {
  width: 100%;
  outline: none;
  background-color: #ebebeb;
  border: none;
  border-color: transparent;
  padding-left: 4px;
  font-size: 22px;
  line-height: 35px;
  height: 35px;
  transition:width 0.1s; /* for automatic size resize */
  /* if you want remove round corners and arrow
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  */
  margin-bottom: 5px;
  margin-top: -5px;
}

select.prod-select {
  outline: none;
  background-color: transparent;
  border: none;
  border-color: transparent;
  border-radius: 0px;
  font-size: 16px;
  line-height: 16px;
  height: 18px;
  transition:width 0.1s; /* for automatic size resize */
  /* if you want remove round corners and arrow */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

#loader {
  display: none;
}

div#laheta {
  height: 60px;
  background-color:	gray;
  width: 100%;
}

#lahetanappi {
  border: 1px;
  padding-top: 5px;
  font-size: 14px !important;
  height: 26px;
  background-color:	#99ff99;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 10px;
}

.hidden {
  display: none;
}

@media screen and (max-width:780px) {

  h1 {
    font-size: 25px;
  }
  .hideunder780px {
    display: none;
  }

  .showunder780px {
    display: block;
  }

  .under780px-width-92-30 {
    width: 92.30vw;
  }

  .under780px-width-44-67-vw {
    width: 44.67vw;
  }

  .under780px-width-20-86-vw {
    width: 20.86vw;
  }

  .under780px-width-11-53-vw {
    width: 11.53vw;
  }
  .lmarginsetprev {
    margin-left: 2.96vw;
  }


  .fixedheight320under780px {
    overflow-y: hidden;
    height: 320px;
  }

  .fixedheight190under780px {
    overflow-y: hidden;
    height: 190px;
  }

  .henkilokuva img {
    width:100%;
    max-width: 730px;
    padding-top: 15px;
    padding-bottom: 15px;
    float: none;;
  }

}

@media screen and (max-width:520px) {

  .hideunder520px {
    display: none;
  }

  .showunder520px {
    display: block;
  }

  .font-size-24px {
    font-size: 20px;
  }

  .font-size-20px {
    font-size: 18px;
  }

  .font-size-16px {
    font-size: 14px;
  }

}