/* 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;
   transition: 0.3s;
}

a:hover  {
   color: #666666;
}

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


/* Upper page */

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

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

.boxed {
   display: none;
}

@media (min-width: 200px) {
.banner  {
   margin: 0px;
   margin-top: -50px;
   width: 209px;
   height: 209px;
   display: block;
   position: absolute;
   right: 5%;
   top: 30%;
   z-index: 99;
   background-image: url('../img/ring.png');
}

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

.widgetbox  {
   display: block;
   position: absolute;
   background-color: #C3A7A7;
   border-right: 5px solid;
   border-color: #333333;
   margin-top: 50px;
   width: 0px;
   height: 150px;
   padding: 2px;
   z-index: 99;
       -webkit-transition: width 0.3s; /* For Safari 3.1 to 6.0 */
    transition: width 0.3s;
}

.widgetbox:hover  {
   width: 60px;
   height: 150px;
}

.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: 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: 250px;
}

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

.vuokragalleria {
   position: absolute;
   margin: 100px 30px;
   font-family: 'Cookie', cursive;
   font-weight: 400;
   font-style: italic;
   font-size: 2.3rem;
}

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