* {
          box-sizing: border-box;
}


body{
    padding:auto;
    margin:auto;
    background-color:#fff;
}

            @media screen and (max-width: 1300px) {
                          body{
                            margin:auto;
                            padding:auto;
                          }
                        }

.logo{

    color:#fff;
    font-family: 'new_athena_unicoderegular';
    font-size:40px;
    letter-spacing: 0px;
    text-transform: none;
    text-align:left;
    padding:80px 10px 10px 10px;
    vertical-align: top;

}

                @media screen and (max-width: 1300px) {
                          .logo{
                            padding:50px 10px 20px 45px;
                            margin: auto;
                            font-size: 4vmax;
                            
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .logo{
                            font-size:5.5vmax;
                            padding:50px 20px 20px 45px;
                            margin: auto;
                            
                          }
                        }



.logoimg{
    width:40px;
    vertical-align: top;

}

                @media screen and (max-width: 1300px) {
                          .logoimg{
                            width:60px
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .logoimg{
                            width:80px;
                            
                          }
                        }



.alto{
    font-family: 'assistantlight';
    color:#fff;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding:80px 10px 0px 10px;
    margin:auto;
    vertical-align: top;

}

                  @media screen and (max-width: 1300px) {
                          .alto{
                            font-size:2vmax;
                            padding:50px 0px 0px 0px;
                          }
                        }

                @media screen and (max-width: 1000px) {
                          .alto{
                            font-size:3.3vmax;
                            padding:50px 0px 0px 0px;
                          }
                        }




.slogan{
    padding:10px 10px 20px 10px;
    margin:40px 0px 0px 0px;
    text-align:left;
    position: absolute;
}

                @media screen and (max-width: 1300px) {
                          .slogan{
                            padding:40px 45px;
                            max-width:100%;
                            font-size:3vmax;
                         
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .slogan{
                            padding:40px 45px;
                            max-width:100%;
                            margin: auto;
                            font-size:2.5vmax;
                          }
                        }




.empty{
    background-image:none;
    background-color:none;

}

.home{
    background-image:url(heina12_bg.png);
    background-size:cover;
    background-position:center center;
    background-attachment: fixed;
    
    margin:auto;
    margin-bottom:30px;
    height:110vh;
            }

            @media screen and (max-width: 1300px) {
                          .home{
                            padding:0px 0px 30px 0px;
                            width:100vw;
                            background-attachment:fixed;
                            margin:auto;
                            height:90vh;
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .home{
                            padding:0px 0px 30px 0px;
                            background-position:center center;
                            background-attachment: scroll;
                            margin:auto;
                            height:110vh;
                          }
                        }



.header{
    height:80vh;
}


.contralto{
    background-image:url(iidalindeman-1.jpg);
    background-size:cover;
    background-position:bottom right;
    background-attachment: fixed;
    
    margin:auto;
    margin-bottom:30px;
    height:110vh;
            }

            @media screen and (max-width: 1300px) {
                          .contralto{
                            padding:0px 0px 30px 0px;
                            width:100vw;
                            background-size:cover;
                            background-attachment:fixed;
                            margin:auto;
                            height:90vh;
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .contralto{
                            padding:0px 0px 30px 0px;
                            background-position:bottom right;
                            background-attachment: scroll;
                            margin:auto;
                            height:110vh;
                          }
                        }




.white{
    background-color:#fff;
    color:#2a0d11;
    margin:auto;
            }

            


.white h1{
    color:#2a0d11;
    }

.white h2{
    color:#2a0d11;
    }
                    

.white p{
    color:#2a0d11;
    }


.black h1, h2, p{
    color:#DAB1A4;
    }

.black a{
    color:#DAB1A4;
    text-decoration: none;
    }






.lightred{
    background-color:#FAEEE3;
    color:#000;
    margin:auto;
            }

            
            @media screen and (max-width: 1300px) {
                          .lightred{
                            padding:30px 30px 30px 45px;
                          }
                        }


#english{
    background-color:#F3EFED;
    padding:30px 30px 30px 30px;
    margin-top:50px;
    border:1px solid #9A230A;
    outline:10px solid #F3EFED;
}


                @media screen and (max-width: 1300px) {
                          #english{
                            border:none;
                            outline:40px solid #F3EFED;
                          }
                        }


#tarina{
    text-align:center;
}

                @media screen and (max-width: 1300px) {
                          #tarina{
                            text-align: left;
                            max-width: 700px;
                            margin:auto;
                            margin-top:40px;
                            margin-bottom:40px;
                          }
                        }

                @media screen and (max-width: 1000px) {
                          #tarina{
                            text-align: left;
                            max-width: 100%;
                            margin:auto;
                            margin-top:80px;
                            margin-bottom:80px;
                          }
                        }


#palvelut{
    background-color:#EAF0DC;
    max-width:1000px;
}


                @media screen and (max-width: 1300px) {
                          #palvelut{
 
                          }
                        }

                @media screen and (max-width: 1000px) {
                          #palvelut{
                            border:none;
                            outline:40px solid #EAF0DC;

                          }
                        }



.lightred h1{
    color:#000;
    }

.lightred h2{
    color:#000;
    }
                    

.lightred p{
    color:#000;
    }


.grey{
    background-color:#12320F;
    color:#F1E6E3;
    padding:20px;
    margin:auto;
    border-top:1px solid #606060
            }

            
            @media screen and (max-width: 1300px) {
                          .grey{
                            padding:20px;
                          }
                        }

.grey h1{
    color:#D6C4B2;
    }

.grey h2{
    color:#D6C4B2;
    }
                    

.grey p{
    color:#D6C4B2;
    }


.black{
    background-color:#000;
    }


.black h1, h2, p{
    color:#DAB1A4;
    }

.black a{
    color:#DAB1A4;
    text-decoration: none;
    }


            @media screen and (max-width: 1300px) {
                          .black{
                            padding:30px 0px 30px 0px;
                          }
                        }

.color{
    background-image:url(kevat_3_pieni.JPG);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:top center;
    min-height:60vh;
    margin:0px;
    padding:auto;
    color:#d6c3ae;
            }

            @media screen and (max-width: 1300px) {
                          .color{
                          }
                        }

.color h2{
    color:#d6c3ae;
}

.color p{
    color:#d6c3ae;
}


.overlayblack{
    background-color: rgba(8,35,36,0.8);
    margin:0px;
    color:#d6c3ae;
    min-height:60vh;
    padding:auto;
    padding-top:30px;
    padding-bottom:30px;
}



.columns2{
    column-count: 2;
    column-gap: 40px;
}

            @media screen and (max-width: 1300px) {
                          .columns2{
                            column-count:1;
                            max-width:700px;
                            margin:auto
                          }
                        }


            @media screen and (max-width: 1000px) {
                          .columns2{
                            column-count:1;
                            max-width:100%;
                            margin:auto
                          }
                        }

.columns2 p{
}


.columns3{
    column-count: 3;
    column-gap: 40px;
    padding:30px 0px;
}

            @media screen and (max-width: 1300px) {
                          .columns3{
                            column-count:1;
                          }
                        }


#whitebox{
    background-color: #fff;
    padding:10px 30px 30px 30px;
}

        @media screen and (max-width: 1300px) {
                          #whitebox{
                            padding:0px;
                            padding-top:10px;
                            margin-top:200px;
                          }
                        }

#whitebox p{
    color:#000
}

.boxfull{
    width:100%;
    background-color:#fff;
}

.box1000{
    width:100%;
    max-width:1000px;
    margin:auto;
}
 
    @media screen and (max-width: 1300px) {
                          .box1000{
                            max-width:100%;
                          }
                        }

.box800{
    width:100%;
    max-width:800px;
    margin:auto;
}

    @media screen and (max-width: 1300px) {
                          .box800{
                            max-width:100%;
                            padding:0px 20px 0px 45px
                          }
                        }

.box600{
    max-width:600px;
    margin:auto;
    border-left:1px solid #000;
    padding:10px 30px 40px 30px;
}

        @media screen and (max-width: 1300px) {
                          .box600{
                              max-width:100%;
                          
                              margin-left:50px
                          }
                        }

        @media screen and (max-width: 1000px) {
                          .box600{
                            max-width:100%;
                       
                            border-left:none
                          }
                        }

.box500{
    width:100%;
    max-width:500px;
display:inline-block;
    vertical-align:top;
}

        @media screen and (max-width: 1100px) {
                          .box500{
                            max-width:100%;
                          }
                        }


.box450{
    width:100%;
    max-width:450px;
    display:inline-block;
    vertical-align:top;
}

        @media screen and (max-width: 1000px) {
                          .box450{
                            max-width:100%;
                          }
                        }

.box400{
    width:100%;
    max-width:400px;
    display:inline-block;
    vertical-align:top;
}

        @media screen and (max-width: 1000px) {
                          .box400{
                            max-width:100%;
                          }
                        }

.box350{
    width:100%;
    max-width:350px;
    display:inline-block;
}

        @media screen and (max-width: 1300px) {
                          .box350{
                            max-width:35%;
                          }
                        }

        @media screen and (max-width: 1000px) {
                          .box350{
                            max-width:100%;
                          }
                        }


.palvelukuva{
    width:100%;
    vertical-align: top
}



        @media screen and (max-width: 1000px) {
                          .palvelukuva{
                            max-width:100%;
                          }
                        }


.box50pros{
    width:100%;
    max-width:48%;
    vertical-align:top;
    display:inline-block;
    margin:auto;
    margin-bottom:30px;
}

            @media screen and (max-width: 1200px) {
                          .box50pros{
                            max-width:100%;
                            margin:0px;
                          }
                        }

.box65pros{
    max-width:60%;
    vertical-align:top;
    display:inline-block;
    margin:auto;
    margin-bottom:30px;
}

            @media screen and (max-width: 1300px) {
                          .box65pros{
                            max-width:60%;
                            margin-right:0px;
                          }
                        }

            @media screen and (max-width: 1100px) {
                          .box65pros{
                            max-width:100%;
                            margin-right:0px;
                          }
                        }

content{
    width:100%;
    max-width:1000px;
    display:block;
    margin:auto;
    padding:70px 15px;
    clear:both;
}

                @media screen and (max-width: 1300px) {
                          content{
                            padding:100px 30px;
                            max-width:1000px;
                          }
                        }


            @media screen and (max-width: 1000px) {
                          .content{
                            padding:
                          }
                        }

.colorbg{
    padding:0px;
}


header{
    width:100%;
    margin:auto;
    padding:0px;
}

                

                    




.halfimg{
    width:100%;
    max-width:400px;
    display: inline-block;
    vertical-align: top;
    padding:0px;
    margin-right:20px;
}

        
        @media screen and (max-width: 1300px) {
                          .halfimg{
                            margin-bottom:30px;
                            max-width:100%;
                          }
                        }


                
h1{
    font-family:'new_athena_unicoderegular';
    text-transform: none;
    font-size:45px;
    font-weight:lighter;
}

         @media screen and (max-width: 1300px) {
                          h1{
                            font-size:4.5vmax;
                          }
                        }

         @media screen and (max-width: 1000px) {
                          h1{
                            font-size:10vmax;
                            margin-top:100px;
                            text-align: left;
                          }
                        }

h2{
    font-family:'new_athena_unicoderegular';
    text-transform: none;
    font-weight:lighter;
    font-size:39px;
}

    @media screen and (max-width: 1300px) {
                          h2{
                            font-size:4vmax;
                          }
                        }

    @media screen and (max-width: 1000px) {
                          h2{
                            font-size:7vmax;
                          }
                        }


h3{
    font-family:'new_athena_unicoderegular';
    font-weight:lighter;
    text-transform: none;
    margin:30px 0px 0px 0px;
    font-size: 29px;
    color:#000
}

    @media screen and (max-width: 1300px) {
                          h3{
                            font-size:3.8vmax;
                          }
                        }

    @media screen and (max-width: 1000px) {
                          h3{
                            font-size:5.5vmax;
                              margin:100px 0px 0px 0px;
                          }
                        }

p{
    font-family:'assistantlight';
    letter-spacing: 0px;
    line-height:1.4;
    
}

    @media screen and (max-width: 1300px) {
                          p{
                            font-size:1.5vmax;
                              font-family:'assistantregular';
                          }
                        }

    @media screen and (max-width: 1000px) {
                          p{
                            font-size:3.5vmax;
                          }
                        }

.alaotsikko{
    font-family: 'assistantbold';
    letter-spacing: 1px;
    text-transform: uppercase;
}

            @media screen and (max-width: 1300px) {
                          .alaotsikko{
                            font-size:2vmax;
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .alaotsikko{
                            font-size:4.5vmax;
                          }
                        }


.lainaus{
    font-family:'new_athena_unicoderegular';
    text-transform: none;
    margin:0px 0px 30px 0px;
    padding:0px 150px;
    color:#787878;
    font-size:28px;
    line-height: 1.0;
    text-align: center;
}



    @media screen and (max-width: 1300px) {
                          .lainaus{
                            font-size:3.3vmax;
                            margin:20px 0px 40px 0px;
                            padding:0px 100px
                          }
                        }

    @media screen and (max-width: 1000px) {
                          .lainaus{
                            font-size:4.5vmax;
                            padding:0px 75px;
                          }
                        }





.lyhytviiva{
    margin:auto;
    max-width:80px;
    border-top:1px solid #000
}

    @media screen and (max-width: 1300px) {
                          .lyhytviiva{
                            border-top:2px solid #000;
                            max-width:120px
                          }
                        }


/* PUTOAVA SISÄLTÖ */



            .mobile-container {
              max-width: 800px;
              margin: auto;

            }

            .topnav {
              overflow: hidden;
              background-color: #fff;
              position: relative;
            }

            .topnav #myLinks {
              display: none;
            }

            .topnav #myLinks2 {
              display: none;
            }

            .topnav a {
              color: #000;
              padding: 30px;
              text-decoration: none;
              display: block;
                border:1px solid #000;
            }

            .topnav a.icon {
              background: white;
              display: block;
              position: absolute;
              right: 0;
              top: 0;
            }

            .topnav a:hover {
              background-color: #fff;
              color: black;
            }

            .active {
              background-color: #fff;
              color: black;
            }








/* LINKKILAATIKOT, VALK & MUSTA & VIHREÄ*/

.linkboxwhite{
    background-color:none;
    background-color:none;
    border-bottom:1px solid #F14E43;
    padding: 15px 0px;
    margin-right:15px;
    color:#F14E43;
    text-decoration: none;
    font-family:'assistantlight';
    font-size:18px
}

                @media screen and (max-width: 1300px) {
                          .linkboxwhite{
                            display: inline-block;
                            font-size:1.7vmax;
                            padding:23px 0px;
                            border-bottom:2px solid #F14E43;
                          }
                        }

                                @media screen and (max-width: 1000px) {
                          .linkboxwhite{
                            display: inline-block;
                            font-size:3vmax;
                            padding:30px 0px;
                            border-bottom:3px solid #F14E43;
                            font-family: 'assistantregular';
                          }
                        }

.linkboxwhite:hover{

}

                 @media screen and (max-width: 1000px) {
                          .linkboxwhite:hover{
                            display: inline-block;
                            font-size:3vmax;
                            padding:30px;
                          }
                        }


.linkboxblack{
    display: inline-block;
    background-color:none;
    padding: 15px;
    margin:auto;
    text-decoration: none;
    font-family:'cormorantitalic';
    border:1px solid #000
}

                @media screen and (max-width: 1000px) {
                          .linkboxblack{
                            font-size:4vmax;
                            padding:30px;
                          }
                        }

.linkboxblack:hover{
    background-color:#000;
    color:#DAB1A4;
    border:1px solid #000;
}


.linkboxred{
    display: inline-block;
    background-color:#950000;
    color:#fff;
    padding: 15px;
    margin:auto;
    font-size: 15px;
    text-decoration: none;
    font-family:'assistantregular';
    border:1px solid #950000
}

                @media screen and (max-width: 1000px) {
                          .linkboxred{
                            font-size:3vmax;
                            padding:30px;
                          }
                        }

.linkboxred:hover{
    background-color:#950000;
    color:#fff;
    border:1px solid #950000;
}







/* FRONT AD, ETUSIVUN ENSIMMÄINEN OTSIKKO*/

.frontad{
    max-width:350px;
    background-color:#171513;
    padding:10px;
    margin-bottom:40px;
    text-align:center
   
}
                    @media screen and (max-width: 1300px) {
                          .frontad{
    
                          }
                        }

            .frontad h1{
                color:#d1b6a8;
            }

.frontad p a{
    color:#fff;
    text-decoration: none;
}



/* FRONT SOME, ETUSIVUN NÄKYMÄ*/

.frontsome{
    display:block;
    margin:auto;
    text-align:center;
    background-color:#000;
    padding:0px 0px 0px 0px;
    clear:both;
}


    .frontsome a{
    color:#DAB1A4;
    padding:10px 10px 10px 10px;
    font-size:35px;
    display:inline-block;
}

    .frontsome a:hover {
                    background-color:#000;
                  ;
                }

            @media screen and (max-width: 1300px) {
                          .frontsome{
                              position:none;
                              bottom:0;
                              left:0;
                              width:100%;
                                margin:auto;
                              text-align: center;
                          }
                        }


            @media screen and (max-width: 1300px) {
                          .frontsome a{
                              display:inline-block;
                              text-align:center;
                              color:#DAB1A4;
                              font-size: 7vmax;
                              padding:20px 20px
                          }
                        }


footer{
    background-color:#000;
    color:#DAB1A4;
    font-family:'cormorantitalic';
    text-transform: none;
    text-align: center;
    padding:50px;
}

        @media screen and (max-width: 1000px) {
                          footer{
                              font-size: 4vmax;
                          }
                        }


@font-face {
    font-family: 'new_athena_unicoderegular';
    src: url('new_athena_unicode.woff2') format('woff2'),
         url('new_athena_unicode.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cormorantregular';
    src: url('Cormorant-Regular-webfont.eot');
    src: url('Cormorant-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cormorant-Regular-webfont.woff2') format('woff2'),
         url('Cormorant-Regular-webfont.woff') format('woff'),
         url('Cormorant-Regular-webfont.ttf') format('truetype'),
         url('Cormorant-Regular-webfont.svg#cormorantregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cormorantitalic';
    src: url('Cormorant-Italic-webfont.eot');
    src: url('Cormorant-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cormorant-Italic-webfont.woff2') format('woff2'),
         url('Cormorant-Italic-webfont.woff') format('woff'),
         url('Cormorant-Italic-webfont.ttf') format('truetype'),
         url('Cormorant-Italic-webfont.svg#cormorantitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 27, 2024 */



@font-face {
    font-family: 'assistantlight';
    src: url('assistant-light-webfont.woff2') format('woff2'),
         url('assistant-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 27, 2024 */



@font-face {
    font-family: 'assistantregular';
    src: url('assistant-regular.woff2') format('woff2'),
         url('assistant-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 27, 2024 */



@font-face {
    font-family: 'assistantbold';
    src: url('assistant-bold.woff2') format('woff2'),
         url('assistant-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}