body,html {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

html {
    background: rgba(0,0,0,.01);
}

.overlay{
    position: absolute;
    left: 0;
    top: 0;
    right:0;
    display: none;
    align-items: center;
    justify-content: center;
    
}

.overlayShow{
    background: rgba(0,0,0,.1);
    height: 100%;
    width: 100%;
    z-index: 10;
    display: flex;

}

.overlayContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    max-width: 800px;
    background: white;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    overflow: hidden;
}

.overlayContainer p{
    color: rgba(0,0,0, 0.8);
    padding: 5px;
}

.active {
}

.contactContainer{
    background: #998969;
    height: 56px;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.contactText{
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.headerContainer{
    height: 64px;
    padding: 6px;
   /*  border-bottom: 1px solid rgba(0,0,0,.1); */
    display: flex;
    justify-content: center;
    align-items: center;
    position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;

  background: rgba(255,255,255,.5);
  z-index: 4;
  /* box-shadow: 1px 0px 6px rgba(0,0,0,.2); */
  -webkit-backdrop-filter: blur(5px) brightness(120%) ;
            backdrop-filter: blur(5px) brightness(120%) ;
}

.headerLogo{
    color: rgb(108 89 56);
    font-size: 1.6rem;
    font-weight: 300;
    text-align: center;
}

.headerContactContainer{

}

#phone{
    /* fill: black; */
    /* height: 24px;
    width: 24px; */
}


.section{
    width: 100%;
    padding-top: 10px;
    overflow: hidden;
   /*  border-bottom: solid 1px rgba(0,0,0, 0.2); */
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*  */
}

.sectionTitle{
    color: rgba(0,0,0,.8);
    font-weight: 300;
    font-size: 26px;
    margin: 0;
    margin-left: 10px;
}

.bg-image {
    position: absolute;
    /* The image used */
    background-image: url("kuvat/15_Sookari_some.jpg");
  
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
  
    /* Full height */
    width: 100%;
    height: 100%;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.postsContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.postsWrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px;
}

.postsHeader{
    
}

.sectionWrapper{
    max-width: 800px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Post */

.postContainer{
    position: relative;
    height: 200px;
    min-width: 300px;
    max-width: 450px;
    background: rgba(236,137,56,.2);
    margin: 10px;
    border-radius: 2px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    overflow: hidden;

    will-change: transform;
    transition: transform .2s ease;
}

.postContainer:hover{
    transform: translateY(-10px);
    cursor: pointer;
}

.postImage{
    position: absolute;
    left:0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

.postTitle{
    position: absolute;
    left:0;
    bottom: 0;
    right: 0;
    padding: 10px;
    font-weight: 400;
    font-size: 18px;
    color: rgba(255,255,255,.9);
    background-color: rgba(0,0,0,.2);
    /* background: rgba(0,0,0,.3); */
    /* -webkit-backdrop-filter: blur(5px) brightness(80%) ;
            backdrop-filter: blur(5px) brightness(80%) ; */
}

.sookariColor {
    background: rgba(236,137,56,.1);
}

#video{
  min-width: 100%;
  max-width: 100%;
  box-shadow: 1px 1px 6px rgba(0,0,0, 0.2);
  margin-top: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
}

.card{
    display: flex;
    flex-direction: column;
    padding: 12px;
    margin: 20px;
    border-radius: 2px;
    box-shadow: 1px 1px 6px rgba(0,0,0, 0.1);
    color: rgba(0,0,0, 0.7);
    background: white;
    font-size: 15px;
}


/* Footer */
.footerContainer{
    /* background-color: rgba(0,0,0,.1); */
    background: #998969;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255, 1);
    padding: 10px;
    font-size: 14px;
}

p{
    margin: 0;
    padding: 2px;
}

.imageContainer{
    /* The image used */
    background-image: url("kuvat/14_Sookari_some.jpg");
  
    /* Full height */
    width: 100%;
    height: 50vh;
  
    /* Center and scale the image nicely */
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.imageMatkat{
    /* The image used */
    background-image: url("kuvat/15_Sookari_some.jpg");
  
    /* Full height */
    width: 100%;
    height: 50vh;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.tripleImageContainer{
    /* The image used */
    background-image: url("kuvat/13_Sookari_some.jpg");
  
    /* Full height */
    min-width: 100%;
    height: 60vh;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 10px;
    box-shadow: 1px 6px 10px rgba(0,0,0,.2);
}

.triplecontainer {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-between;
}

.tripleColumn{
    display: flex;
    flex-direction: column;
    position: relative;
    flex-basis: 1;
    flex-shrink: 1;
}

/* Tarjouspyyntö */

#offer{
    background: #E7DCC6;
    border-radius: 4px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    margin: 10px;
    padding: 20px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: auto;
}

.inputContainer{
    display: flex;
    flex-direction: column;
}

.offerLabel {
    color: rgba(0,0,0, 0.8);
    font-weight: 300;
    margin-bottom: 5px;
    margin-top: 5px;
}

.offerInput {
    padding: 8px 14px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    border-radius: 4px;
}

.larger{
    height: 150px;
}

.submit {
    padding: 8px 14px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    border-radius: 4px;
    color: rgba(0,0,0,.8);
}

.submit:hover{
    background-color: #BCAE90;
    cursor: pointer;
}