/* Jotta videon aspect ratio s�ilyy-----------------------*/

iframe {
    width: 100%;
    border: 0;
}
.videot {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 51%;
}
    .videot iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

    }
/*------------------------------------------------*/



/* vasemmalla yl�kylmassa oleva kuva on kuva1 ja headeri on yl�osan kuva-----------------------*/



.headeri {

    margin-top: -16px;
    width: 100%;
    padding-top: 45px;
    float: right;
    background-color: rgba(225, 221, 208, 1);
    /*background-image: url(../kuvat/banneri.png);*/
    text-align: center;
    font-size: 45px;
    font-family: Arial;
    font-weight: bolder;
    float: left;
    text-shadow: 3px 4px 4px #535353;
}



.kuva1 img {
    padding-top: 0px;
    margin-left: 15px;
    width:350px;
    float:center;

}


/* --------------------------------------------*/



/* kaikkien columnien m��ritykset jos nettisivun koko on yli 900px-----------------------*/


.vasencolumn {
    margin-left: 10%;
  width: 45%;
  float: left;
  margin-top: 10px;
  margin-bottom: 30px;
  padding-top: 10px;
  background-color: #0d0d0d;
    
}

.oikeacolumn {
    margin-right: 10%;
    width: 35%;
    float: right;
    margin-top: 10px;
    margin-bottom: 30px;
    padding-top: 10px;
    background-color: #0d0d0d;
    
}




h1 {
    background: rgba(0, 0, 0, 0.8);
    color: #e6e6e6;
    margin: -10px;
    margin-bottom: 40px;
    text-align:center;
    text-shadow: 1px 1px 1px #55741d;
    padding:5px;
    font-size:24px;

}


.yksicolumn,.col-container {

   
    padding-top:30px;
    padding-bottom:30px;
    text-align: center;
    
}
.viiva{
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px 0px rgba(0, 0, 0, 0.1);*/
    border-bottom: 1px solid black;
    padding-bottom:30px;
    margin-left: 10%;
    margin-right: 10%;
}
.col-container {
background-color:rgba(225, 221, 208, 1);
}
/* --------------------------------------------------------------*/
.oikeacolumn, .vasencolumn, .yksicolumn {
     background-color:#abb663;
        }

p,ul{
    font-size: 18px;
    
    color: black;
    line-height: 2;
   
    padding-left: 20px;
    padding-right: 20px;

}


ul li, ol li {
    margin-left: 30px;
  line-height: 2.5;
}

p a:link {
  color: #55741d;
}
p a:visited {
  color: #55741d;
}

/* mouse over link */
p a:hover {
  color: #55741d;
}

/* selected link */
p a:active {
  color: #55741d;
}

/* sivun runko hommat kun nettisivun koko on yli 900px-----------------------*/
body {
font-family: times new roman ;
    background-color:rgba(225, 221, 208, 1);
    /*background-image: url(../kuvat/tausta.jpg);*/
    background-size: 100%;
    margin-left: 15%;
    margin-right: 15%;

}
/* --------------------------------------------------------------*/

  .otsakekuva .cycle-slideshow img{
     box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    display: block;
     height: 100%;
     width: 100%;

    }


.alapalkki{
    margin-left:0%;
    margin-right:0%;
    text-align:center;
    color:#e6e6e6;
    background-color: black;
     padding: 5px;
          box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
          margin-bottom: 0px;
}
.alapalkki p{
    color:white;

}

 .otsakekuva {
        padding-top: 150px;

    }

    .close .topnav {
    transition: background-color 0.5s ease-out;
    background-color:#abb663;

    }
     .open .topnav {
     transition: background-color 0.5s ease-out;
    background-color:#abb663;
    background-color:rgba(225, 221, 208, 1);
    }

      .close .topnav a.social {
            float: left;
            display: block;
            padding: 0;
        }
           .open .topnav a.social {
        float: left;
        width: 0px;
        padding: 0px;
        margin:0px;
         opacity: 0;
        }
     .close .topnav .social img{
        float:left;
        width: 30px;
        padding: 10px;
        padding-left: 0px;
        padding-right: 0px;
         opacity: 1;
    }
    .open .topnav .social img{
        float: left;
        width: 0px;
        padding: 0px;
        margin:0px;
         opacity: 0;
    }
    

    .topnav {
    overflow: hidden;
    
    text-align: right;
    text-align: center;
    /*border-bottom: 3px solid #55741d;*/
    position:absolute;
    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    z-index: 999;
    float: center;
     width: 100%;
     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 3px 0px 0px rgba(0, 0, 0, 0.03);
}


  .col-container:after {
  
  content: "";
  display: table;
  clear: both;
 
}
.col {
  float: left;
  width: 50%;
}
  

     @media screen and (min-width: 1250px) {
       .otsakekuva {
        margin-left: 10%;
         margin-right: 10%;
         width: 80%;
        }
       
          .topnav {
        width: 56%
        }
     }
       @media screen and (max-width: 1249px) {

        .topnav {
        width: 70%;
        }
       }
    
/* kun ruudun koko laskee alle 900px columnit muuttuvat-----------------------*/
    @media screen and (max-width: 1000px) {
       
       .topnav {
        width: 100%;
        }
        
        body {

            margin-left: 0%;
            margin-right: 0%;
        }
        
    }
/* --------------------------------------------------------------*/


/* yläpalkin linkkihommat kun nettisivun koko on yli 660px -----------------------*/

    .topnav a {

        float: left;
        color: black;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-left: 10px;
        text-decoration: none;
        font-size: 18px;
        text-align: left;
        box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    }
     .topnav .social a {
      box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
     }

    .topnav .icon {
        display: none;
        text-align: left;
    }

  
    .topnav a:active {
        transition:all 0.3s ease;
        background-color: #bbae90;
        color: #e6e6e6;
        text-align: left;
        transition:all 0.4s ease;
        border-radius:25px;

      
    }

    .profiilikuva {
 padding: 20px;
 padding-right: 40px;
 vertical-align: middle;
 }
    .profiilikuva img {
    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
     max-width: 195px;
     margin-top:0px;
    /*
    border-bottom: 5px solid #55741d;
    border-top: 5px solid #55741d;*/

}
   
/* --------------------------------------------------------------*/
@media screen and (min-width: 720px) {
    .topnav .social img{
        position:absolute;
        float: left;
        width: 0px;
        padding: 0px;
        margin:0px;
        opacity: 0;
    }
     .topnav .social a{
        position:absolute;
        float: left;
        width: 0px;
        padding: 0px;
        margin:0px;
        opacity: 0;
    }
     .otsakekuva .cycle-slideshow img{
      object-fit: cover;
     height: 600px;
     width: 100%;

    }
    
    .topnav{
   margin-top: 0px;
   }

   * {
  box-sizing: border-box;
}


  .topnav a:hover{
        transition:all 0.3s ease;
        background-color: #7c853f; 
        color: #e6e6e6;
        text-align: left;
        transition:all 0.4s ease;
        border-radius:25px;
      
    }
     .topnav a:active{
        transition:all 0.3s ease;
        background-color: #7c853f; 
        color: #e6e6e6;
        text-align: left;
        transition:all 0.4s ease;
        border-radius:25px;
      
    }


   
     .col-container , .yksicolumn {
        margin-left: 0%;
         margin-right: 0%;
         width: 100%;
        }

}
.keskelle{
margin: auto;
width: 100%;
}
/* ylapalkin linkkihommat kun nettisivun koko on alle 660px -----------------------*/
    @media screen and (max-width: 719px) {
    

    .profiilikuva img {
     margin-top:-150px;
     }
    .kuva1 img {
    width:200px;
    float:left;
    }
    .otsakekuva {
        padding-top: 100px;

    }
    .col {
    text-align: center;
    width: 100%;
    }
     .col-container , .yksicolumn {
        margin-left: 0px;
         margin-right: 0px;
         width: 100%;
     }
     .keskelle{
    margin: auto;
    width: 100%;
    }
     .profiilikuva{
    padding-right:0px;
    padding-left:10px;
    padding-bottom:0px;
    }
     .profiilikuva img {
     max-width: 160px;
     }
   
    .otsakekuva .cycle-slideshow img{
    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    display: block;
     height: 100%;
     width: 100%;

    }


        .topnav a {

            display: none;
            padding-top: 11px;
            padding-bottom: 8px;
        }

        .topnav a.icon {
            float: right;
            display: block;
            width: 20px;
        }
       
        .responsive {
        position: absolute;
           
        }

        .topnav.responsive .icon {
            position: absolute;
            
            right: 0;
            top: 0;
        }

            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
                padding-top: 15px;
                padding-bottom: 15px;
            }       
    }



    @media screen and (min-width: 1250px) {

 .col-container,.yksicolumn,.alapalkki {
        margin-left: 10%;
         margin-right: 10%;
         width: 80%;

        }
        }

    .vasemmalle{
        text-align: left;
	}

    .gallery img{
     transition: 1s;
     height: 200px;
     max-width: 98%;
     padding:15px;
     object-fit: contain;
	}

     .gallery img:hover{
      filter: grayscale(100%);
      transform:scale(1.1);
	 }


/* Clear floats after the columns */