/* ==========================================================================
CSS Queries
========================================================================== */

@media screen and (max-width:640px) {
    .shop-btn { padding: 15px 25px; font-size: 10px; }
}


@media screen and (max-width:890px) {
    body .tapahtumat{
        
        padding-left:1em;
        padding-right:1em;
    }
   body .tapahtumat .tapahtuma{ width:33.33%;}
}

@media screen and (max-width:670px) {
    body .tapahtumat{
        
        padding-left:1em;
        padding-right:1em;
    }
   body .tapahtumat .tapahtuma{ width:50%;}
}
@media screen and (max-width:500px) {
    body .tapahtumat{
        
        padding-left:1em;
        padding-right:1em;
    }
   body .tapahtumat .tapahtuma{ width:100%;}
}
@media screen and (max-width:1200px) {
    p{font-size: 14px; }
    .thin-sep { display: none; }
    .arrow { display: none; }
    nav { height: auto; width: 100%; background: none; margin: 70px 0 0 0; }
    .nav-wrapper { background-color: #fff; }
    nav ul { width: 100%; display: block; height: auto; padding: 0; }
    nav li { width: 100%; float: left; position: relative; text-align: center;background-color:rgba(0,0,0,.6); }
    nav ul li a { width: 100%; float: left; position: relative; padding: 25px 0; text-align: center; border-bottom: 1px dotted red; font-size:1.2em;margin: 0px; }
    nav ul li a.last { border-bottom: none; }
    nav ul li.dot { display: none; }
    .responsive-logo { background: url(../img/main-logo-white.png) no-repeat center center; width: 94px; height: 50px; position: absolute; top: 30px; left: 10%; }
    .logo-1 { position: absolute; left: 50%; top: 50%; }
    .logo-holder { display: none; }
    .logo-2 { position: absolute; left: 50%; top: 50%; }
    .logo-3 { position: absolute; left: 50%; top: 50%; }
    .footer-leftcol p, .footer-rightcol p { text-align: center; }
    .footer-midcol ul { margin-top: 40px; }
    .submit-btn { margin-top: 10px; }
}
@media only screen and (max-width:1200px) {
    nav { border-bottom: 0; }
    nav ul { display: none; height: auto; }
    .pullcontainer { width: 100%; text-align: right; padding: 20px 20px 0 0; }
    .pullcontainer a#pull { display: block; width: 100%; color: #242a2c; }
}

.responsive-logo,.logo-holder{
    background-size:cover;
}

#tapahtumat p{
  
        text-align: center;
    
}

.menut{
    display: flex;
    flex-wrap: wrap;
   
   
    
}
.menut .menu{
    width:100%;
   
     padding-top:1em;
      padding-bottom:1em;
    margin-bottom:1em;
}

.col.section-text{
    height:auto;
    margin-bottom:100px;
}

.menut .menu img{
    width:100%;
    height: auto;
    max-width:120px;
    padding-right:1em;
    
}
.menut .menu .inner a.shop-btn{
    border: solid 1px black;
    color:black;
}
.menut .menu .inner{
    
   display: flex;
        align-items: center;
   justify-content: center;
       
     height: 100%;
    
}

#menut .menut .menu .inner a.shop-btn{
    border:1px solid white;
    color:white;
}

.tapahtumat{
    display: flex;
    flex-wrap: wrap;
    
}
.tapahtumat .tapahtuma{
    width:25%;
    
}
.tapahtumat .tapahtuma .inner{
   display: flex;
        align-items: center;
   
   
    
}

.tapahtumat .tapahtuma h3{
    background-color:white;
    display: inline-block;
    color:black;
    font-size:20px;
    padding:5px;
    
}
.tapahtumat .tapahtuma span{
   padding-left:10px;
    font-weight: bold;
    color:white;
    
}
h2.frame{
 font-size:24px;   
}
p{
    font-family: 'Open Sans', sans-serif;
}
.black p{
    color:black;
}
a#pull{
    color:red!important;
}
#about{
    
  
    color:white;
}
#about h1,#about p.text-intro{
    color:white;
    padding-left:1em;
    padding-right:1em;
}
h1, span{
    
    
}
.hero{
    background:none!important;
}

#fixed-bg{
    
      background-image:url("../img/hero-bg.jpg");
     background-repeat: no-repeat;

    background-size:cover;
    background-position: center center;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index: 0;
    
}
#all{
    position:relative;
    width:100%;
    z-index:1;
}
body{
  background-color:black;
    
}

@media screen and (max-width:520px) {
  
    
    #fixed-bg{
    
      background-image:url("../img/hero-bg-mobile.jpg");
    }
    
}





.black{
    background-color:rgba(0, 0, 0, 0.6);
    margin-bottom:200px;
}
.black.white{
    background-color:rgba(0, 0, 0, 0.6);
}
header{
    background: none!important;
    
}
.black h2,.black h2.frame,.black p{
    color:white;
    
}
.black h2{
    color:red!important;
}
.section-text p{
    padding:0!important;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    word-spacing: 0px;
    
}
.open h2{
    
  color:white!important;
    text-align: center;
    text-transform: uppercase;
    padding-top:1.5em;
}
.open p.it{
    font-size:.9em;
    font-style:italic;
}
#sijainti h2.frame{
    
    margin-top:60px;
}
.sijainti-block > div{
    padding-left:1em;
    padding-right:1em;
}
.sijainti-block p{
    text-align: left;
}
.sijainti-block p span{
   font-style:italic;
    font-size:.9em;
}
.sijainti-block p{
    margin-top:5px;
     margin-bottom:7px;
}
.sijainti-block p.last{
  
     margin-bottom:32px;
}
.sijainti-block p a{
  color:white;
    text-decoration: underline;

}
.sijainti-block p strong{
    
    display: block;
    color:red;
    text-transform: uppercase;  
}
.footer-midcol ul li a{
    color:white;
}
.button-container .juicer-button{
   border: 2px solid white!important;
    color:white!important;
}
a#pull{
    outline:none;
    border:none;
}
.map img{
    width:100%;
    height:auto;
}
p.maps-btn{
    
    margin-bottom:50px;
}
.footer-leftcol img{
  width:100%;
    height: auto;
    max-width:90px;
    margin-bottom:1em;
}
#some > p a{
    color:white;
    text-decoration: underline;
}
#some > p a:hover{
    color:red;
    text-decoration: underline;
}
footer p{
    color:white;
}
/*
body{
    background-color:black;
    color:white;
}
p.text-intro{
    color:black;
}
p,h2,h2.frame{
    color:white;
}*/