.MainSite {
 margin: 0 auto;
}

.MainSite-header {
 background-color: #f3f3f3;
}

.MainSite-body {
 background-color: #f0f0f0;
}

.MainSite-content {
}

.banner1 {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 padding: 0.3rem 0.8rem;
}
.banner1 > .bannerlogo {
 flex: 0 1 auto;
 margin: 0.75rem 1rem;
}

.banner1 > .bannerside {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-end;
 flex: 1 1 auto;
 margin: 0 0 0 1rem;
}

.banner1 > .bannerside > .bannersb {
 flex: 1 1 auto;
 margin: 0 0 0 1rem;
 text-align: right;
 display: inline-block;
}
.bannersb>form.search {
 display: flex;
 flex-direction: row;
 flex: 1 1 16rem;
 align-items: stretch;
 flex-grow: 2;
 margin: 0 0 0 10%;
 justify-content: flex-end;
}
.bannersb>form.search>input.search_input {
 flex: 1 1 auto;
 max-width: 16rem;
 border: none;
 border-radius: 0.3rem 0 0 0;
}
.bannersb>form.search>.action {
 display: inline-block;
 flex: 0 1 auto;
 padding: 0.2rem 0.5rem;
 background-color: #080;
 color: #fff;
 margin: 0;
 border: none;
}
.bannersb>form.search>.action:hover {
 background-color: #0a0;
 border: none;
 color: #fff;
}

.banner1 > .bannerside > .langsel {
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 margin: 0.5rem 0 0 0;
}

.banner1 > .bannerside > .langsel>.langitem {
 display: block;
 margin-left: 1.5rem;
 color: #fff;
 padding: 0.25rem 0.5rem;
 border-radius: 0.25rem;
}

.banner1 > .bannerside > .langsel>.langitem:hover {
 color: #ff8;
 background-color: #064a86;
}

.banner1 > .bannerside > .langsel>.langitem.current {
 color: #ff0;
 background-color: #0a5da6;
}

.MainSite-menu {
  background-color: #f8f8f8;
}

.MainSite-footer {
 background-color: #222326;
 padding: 0.5rem 1rem;
}

.footerbox {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-around;
 align-content: flex-start;
 margin: 0 3% 1rem 3%;
}

.footerbox .footercol {
 font-family: sans-serif;
 font-size: 0.9rem;
 color: #fff;
 margin: 1rem 1.5rem 0 1.5rem;
 flex: 0 1 auto%;
}

.footerbox .footercol:first-child {
 margin-left: 0;
}
.footerbox .footercol:last-child {
 margin-right: 0;
}

.footerbox .footercol .footerh {
 font-size: 1.2rem;
 color: #bdbce8;
 margin: 0 0 0.25rem 0;
}

.footerbox .footercol .footert {
 font-size: 1rem;
}

.footerbox .footercol .footertb {
 font-size: 1rem;
 color: #fff;
 margin: 0.5rem 0 0.5rem 0;
}
.footerbox .footercol A {
 color: #FFF;
 text-decoration: none;
}
.footerbox .footercol A:hover {
 color: #FF8;
 text-decoration: none;
}
.footerbox .footercol.footermail {
 text-align: center;
}

.footerbox .footercol.footermail a.fa {
 color: #FFF;
 text-decoration: none;
}

.footerbox .footercol  a.text,
.footerbox .footercol.footermail a.text {
 color: #FFF;
 text-decoration: none;
}

.footerbox .footercol  a:hover,
.footerbox .footercol.footermail a:hover
{
color: #ff8;
}

.footerbox .openx,
.footerbox .opent {
 color: #aed1ee;
}

div.gvbox div.imgbox {
 min-width: 200px;
 max-width: 200px;
 height: 150px;
}

.cc_table {
 width: 100%;
}

.etukuvat .slick-slide h1.overlay {
 position: absolute;
 left: 1rem;
 top: 0.4rem;
 color: #fdfc9f;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.reggrantformbox {
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 align-items: center;
 margin: 2rem 0 2rem 0;
 background: #d9e8de;
 padding: 2rem 2rem;
 border-radius: 0.25rem;
 max-width: 550px;
}

.reggrantformbox .accesscodebox  {
 display: flex;
 flex: 1 1 auto;
 width: 100%;
}

.reggrantformbox .accesscodebox > label {
 display: none;
}
.reggrantformbox .accesscodebox > input.acode {
 flex: 1 1 auto;
 max-width: 100%;
 min-width: 5rem;
}
.reggrantformbox .accesscodebox > div.sendbuttonbox {
 flex: 0 0 auto;
}

.reggrantformbox i.sendbutton {
 border-radius: 3rem;
 background-color: #ffc;
 padding: 0.2rem 0.75rem;
 margin: 0 1rem 0 1rem;
 color: #666;
}

.reggrantformbox i.sendbutton:hover {
 background-color: #ff8;
 color: #222;
}
.reggrantformbox .error {
 color: #a00;
}

.etunews {
 padding: 1rem;
 background-color: #9eb1c1;
 border-radius: 4px;
}

.etunews .news_box {
  background-color: #ffa;
  border-radius: 4px;
}

.etunews h2 {
 color: #025;
}
.etunews a.etunewsmore {
 display: inline-block;
 padding: 0.5rem 1rem;
 margin: 0 0 0 1rem;
 background-color: #091e30;
 color: #fff;
 text-decoration: none;
 font-size: 1.2rem;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.etunews  > a.etunewsmore:hover  {
 background-color: #247bc2;
}
.etunews  > a.etunewsmore::after {
 font-family: "FontAwesome";
 content: "\f054";
 margin-left: 1rem;
 color: #fff;
}

.etutuotteet .slick-prev {
 left: -40px;
}
.etutuotteet .slick-next {
 right: -40px;
}

.etutuotteet .slick-prev::before,
.etutuotteet .slick-next::before {
 font-size: 40px;
}

.fpvideos {
 display: flex;
 flex-direction: column;
 margin: 2rem 0;
}

.fpvideo {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 margin: 1rem 0 1rem;
 max-width: 100%;
}
.fpvideo .vcap {
 margin-top: 0.25rem;
 font-size: 1rem;
}

.fpvideo video {
  max-width: 100%;
  height: auto !important;
}

.sidemenu .sidetitle {
 font-size: 1.5rem;
 color: #222326;
 margin: 0 0 1rem 0.75rem;
}
.sidemenu .sidetitle:first-letter{
 text-transform: capitalize
}

.pimagesliderbox {
  width: 400px;
}

div.sidecartbox a {
 background: linear-gradient(0deg, #231F20, #AEA3A6 );
}

div.sidecartbox a:hover {
 background: linear-gradient(0deg, #534A4C, #AEA3A6 );
}

ul.siteTopNav .navitem ul.subnavi {
 z-index: 5;
}

.productsheet > .mainbox > .mainrow > .col2 > .saatavuusbox {
 margin: 2rem 0 0 0;
}

.productsheet .stockvalues {
 display: flex;
 flex-direction: column;
}
.productsheet .stockvalues>.item {
 display: flex;
 flex-direction: row;
}
.productsheet .stockvalues>.item>.week {
 font-family: sans-serif;
 color: #444;
 min-width: 6rem;
 margin: 0 1rem 0 0;
}
.productsheet .stockvalues>.item>.stock {
 min-width: 4rem;
 margin: 0 1rem 0 0;
 font-family: sans-serif;
 color: #222;
 text-align: right;
}

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

.banner1 > .bannerlogo {
  max-width: 50%;
}
.banner1 > .bannersb input {
  max-height: 80%;
  min-height: 60%;
}
.cc_table {width: 95%;}

}

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

.banner1 > .bannerlogo {
  max-width: 50%;
}

.bannersb > form.search > input.search_input {
 max-width: 8rem;
}

div.pgat div.product {width: 150px;margin: 0.5rem 0.6rem;}
div.pgat div.product div.imgwrap {width: 150px;height: 150px;}

.cc_table {width: 100%;}

}