/* Basic Styles */

body  {
   padding-top: 5px;
   background-color: #C3A7A7;
   font-family: 'Muli', sans-serif;
   font-size: 0.9rem;
   color: #404040;
}

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

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

@media (min-width: 550px) {
  body  { font-size: 1rem; }
}

@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: 'Cookie', cursive;
   font-weight: 400;
   font-style: italic;
}

a  {
   text-decoration: none;
   color: #404040;
}

a:hover  {
   color: #666666;
}

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

/* Upper page */

.lang-ref  {
   display: inline-block;
   float: right;
   position: relative;
   padding: 5px;
}

.logo  {
   width: 260px;
   margin: auto;
   display: block;
   position: relative;
   z-index: 99;
}

/* Navigation */

.mobile  {
   display: block;
}

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

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

.dropdown-content {
    display: none;
    position: relative;
    min-width: 100px;
}

.dropdown-content a {
   font-size: 1.9rem;
   font-family: 'Cookie', cursive;
   font-style: italic;
    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 10px;
}

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

/* Main page */

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

.fame_quote  {
   display: none;
}

.hd_hours {
   display: none;
}

.hours {
   width: 200px;
}

.hours td  {
      width: 50%;
   }

.leikkeet  {
   display: none;
}

.leikkeet img  {
   border: 2px solid #404040;
}

@media (min-width: 550px) {
      .hd_hours  {
      display: block;
   }
}

@media (min-width: 900px) {
.fame_quote  {
   display: block;
   text-align: center;
   margin-top: 40px;
   padding: 30px 20px;
   width: 170px;
   height: 200px;
}

.fame_quote q  {
   color: #404040;
   font-family: 'Cookie', cursive;
   font-weight: 400;
   font-size: 1.6rem;
   font-style: italic;
   letter-spacing: 0.1rem;
}
   
   .leikkeet  {
      display: block;
      position: relative;
      text-align: right;
   }
}

#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;
}

.filmstrip {
   display: block;
   width: 455px;
   margin: auto;
   background-color: #000;
   clear: left;
}

@media (min-width: 900px)  {
.filmstrip {
   display: block;
   position: relative;
   width: 900px;
   height: 176px;
   margin: auto;
   background-image: url('../img/product/film.jpg');
}
}

.filmstrip img  {
   padding-top: 0px;
   padding-left: 7px;
   opacity: 1;
}

.filmstrip img:hover  {
   opacity: 0.7;
   transition: 0.5s;
}


/* 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;
}