/* Basic Styles */

body  {
   padding-top: 0px;
   background-color: #FFFFFF;
   font-family: 'Montserrat', sans-serif;
   font-size: 0.9rem;
   color: #404040;
}

.upperpage {
   background-color: #FFFFFF;
}

.divider {
   width: 100%; height: 1px; background-color: #123123;
   margin: 0px;
   box-sizing: border-box;
}

  .container {
   width:80%;
   margin: auto;
   box-sizing: border-box;}

.isoruutu  {
   display: none;}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

@media (min-width: 550px) {
  body  { font-size: 1rem; }
  .isoruutu  {
   display: block;
   position: relative;}
  .container {
   width:40%;
   margin: auto;
   box-sizing: border-box;}
}

@media (min-width: 900px) 
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns             { width: 4.66666666667%; }
  .two.columns             { width: 13.3333333333%; }
  .three.columns           { width: 22%;            }
  .four.columns            { width: 30.6666666667%; }
  .five.columns            { width: 39.3333333333%; }
  .six.columns             { width: 48%;            }
  .seven.columns           { width: 56.6666666667%; }
  .eight.columns           { width: 65.3333333333%; }
  .nine.columns            { width: 74.0%;          }
  .ten.columns             { width: 82.6666666667%; }
  .eleven.columns          { width: 91.3333333333%; }
  .twelve.columns          { width: 100%; margin-left: 0; }
   
}

h1  {
    font-family: 'Roboto', sans-serif;
}

}

h2  {
    font-family: 'Roboto', sans-serif;
}


a  {
   text-decoration: none;
   color: #999999;
   transition: 0.3s;
}

a:hover  {
   color: red;
}

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


/* Upper page */

.top_banner  {
   display: none;
}


@media (min-width: 550px) {
.top_banner  {
   margin: 0px;
   margin-top: 0px;
   display: block;
   position: relative;
}
}


.logo  {
   width: 260px;
   margin: auto;
   display: block;
   position: relative;
}

.boxed {
   display: none;
}

@media (min-width: 200px) {
.banner  {
   margin: 0px;
   margin-top: 0px;
   width: 209px;
   height: 209px;
   display: block;
   position: relative;
   right: 5%;
   top: 30%;
}

.banner_text  {
   margin-top: 30px;
   padding: 18px;
   text-align: center;
   font-family: 'Montserrat';
   font-size: 1.5rem;
}

.boxed  {
   display: block;
   width: 30px;
   height: 30px;
   margin: 15px 0px 0px 20px;
   opacity: 0.6;
}

.boxed:hover  {
   opacity: 1;
   cursor: pointer;
}
}

/* Navigation */

.mobile  {
   display: block;
}

.mobile-navi  {
   display: inline-block;
   cursor: pointer;
   position: absolute;
   margin-left: 20px;
   margin-bottom: 10px;
}

.mobile-navi img {
   opacity: 0.7;
   border: 0px;
   border-radius: 2px;
}

.dropdown-content {
    display: none;
    background-color: #FFFFFF;
    position: relative;
    min-width: 100px;
    z-index: 99;
}

.dropdown-content a {
   font-size: 1.2rem;
   font-family: 'Montserrat';
    padding: 6px 0px;
    text-decoration: none;
    display: block;
}

.mobile-navi:hover .dropdown-content {
    display: block;
}


.nav_top  { display: none; }

.navibar  { display: none; }

@media (min-width: 550px) {
   .mobile-navi  { display: none; }
   .logo  {
   display: inline;
   width: 100%;
   margin-left: 10%;
}

   .nav_top  {
   display: block;
   padding: 0px;
   margin-top: -5%;
   margin-bottom: 0px;
}

.navibar  {
   display: block;
   padding: 0px;
   margin: 0px;
}
   
   .mobile  {
      display: none;
   }
}

.navibar li {
   display: inline;
   padding: 0px 30px;
}

.navibar h2  {
   display: inline;
   text-align: center;
   text-transform: uppercase;
   font-size: 1.4rem;
   font-weight: 400;
   }

/* Main page */

.content  {
   display: block;
   position: relative;
   max-width: 900px;
   margin: auto;
}

.hinnasto  {
   display: block;
   position: relative;
   max-width: 900px;
   margin: auto;
}

.hinnat  {
   display: block;
   position: relative;
   text-align: right;
   width: 50px;
   margin: auto;
} 

.hd_hours {
   display: none;
}

.hours {
   width: 250px;
}

.hours td  {
      width: 50%;
   }


#extra {
   display: none;
   clear: left;
   position: relative;
}

.hide  {
   opacity: 0.8;
   cursor: pointer;
}

.hide:hover  {
   opacity: 1;
}

.minigalleria:hover {
   opacity: 0.7;
}

/* Tuotteet */

.facebook  {
   margin: auto;
   margin-top: 50px;
}

/* Media */

.media div {
   display: inline-block;
   background-color: #000;
}

.media img {
   opacity: 0.6;
   transition: 1.2s;
}

.media img:hover {
   opacity: 1;
   cursor: pointer;
}

.media span  {
   margin-top: 180px;
   max-width: 300px;
   width: 100%;
   color: #cccccc;
   position: absolute;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 99;
}

/* Yhteystiedot */

.map  {
   margin-top: 50px;
   margin-bottom: 40px;
}


.footer  {
   clear: left;
   padding: 30px 0px 0px 0px;
   margin-bottom: 20px;
   display: block;
   width: 100%;
   text-align: center;
   font-size: 0.7rem;
}