* {
          box-sizing: border-box;
}


body{
    padding:auto;
    margin:auto;
    background-color:#fff;
    background-size:cover;
    background-position:center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

        @media screen and (max-width: 1300px) {
                          .body{
                              width:100vw;
                            background-attachment:fixed;
                            margin:auto;
                            height:80vh;
                          }
                        }


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

.contralto{
    background-image:url(katariinapoikela2015.jpg)
}

.blur{
    background-image:url()
}

.tarinabg{
    background-image:url(korpi1.JPG);
    background-position:top center;
}

.whitecalla{
    background-image:url(whitecalla_bg.png);
    background-position:top center;
    background-size: cover;
}

.whitecalla2{
    background-image:url(whitecalla_bg_2.png);
    background-position:top left;
    background-size: cover;
}



.somehiekka{
    font-size:2vmax;
    color:#FFF6EC;
    text-decoration: none;
    margin:10px;
}

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


                    @media screen and (max-width: 900px) {
                          .somehiekka{
                            font-size:8vmax;
                            margin-right:30px
                          }
                        }



.linkboxblank{
    padding:15px 20px;
    background-color:#B53818;
    color:#FFF6EC;
    text-decoration: none;
    font-family:'assistantbold';
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin:0px 10px 10px 0px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
}

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

    @media screen and (max-width: 1000px) {
                          .linkboxblank{
                            font-size:3.5vmax;
                            letter-spacing: 3px;
                            padding:30px 40px;
                              display: block
                          }
                        }

.linkboxblack{
    padding:10px;
    border:1px solid #081004;
    color:#081004;
    text-decoration: none;
    font-family:'abhaya_libresemibold';
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    margin:10px 10px 10px 0px;
    display: inline-block;
    text-align: center;
    vertical-align: top
}


           @media screen and (max-width: 1300px) {
                          .linkboxblack{
                            font-size:1.3vmax;
                            padding:15px;
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .linkboxblack{
                            font-size:3.0vmax;
                            letter-spacing: 3px;
                            padding:35px;
                              display: block;
                            border:3px solid #081004;
                            
                          }
                        }


.linkboxlohi{
    padding:10px;
    background-color: #D88E76;
    color:#FFF6EC;
    text-decoration: none;
    font-family:'assistantbold';
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin:10px 10px 10px 0px;
    display: inline-block;
    text-align: center;
    vertical-align: top
}


           @media screen and (max-width: 1300px) {
                          .linkboxlohi{
                            font-size:1.3vmax;
                            padding:15px;
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .linkboxlohi{
                            font-size:3.0vmax;
                            letter-spacing: 3px;
                            padding:35px;
                              display: block
                            
                          }
                        }



.linkboxlight{
    padding:10px;
    border:1px solid #FFF6EC;
    color:#FFF6EC;
    text-decoration: none;
    font-family:'abhaya_libresemibold';
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    
    display: inline-block;
    text-align: center;
    vertical-align: top
}


           @media screen and (max-width: 1300px) {
                          .linkboxlight{
                            font-size:1.4vmax;
                            padding:25px;
                              border:1px solid #FFF6EC;
                           
                              
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .linkboxlight{
                            font-size:2.8vmax;
                            letter-spacing: 3px;
                            padding:40px;
                             border:3px solid #FFF6EC;
                              margin-top:20px;
                               display: block
                          }
                        }

.linkboxcontact{
    padding:10px 0px 10px 0px;
    border-bottom:1px dotted #D88E76;
    color:#B53818;
    text-decoration: none;
    font-family:'abhaya_libreregular';
    text-transform: none;
    letter-spacing: 1px;
    font-size: 16px;
    margin:0px 0px 15px 0px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}


                   @media screen and (max-width: 1300px) {
                          .linkboxcontact{
                            font-size:1.5vmax;
                              border-bottom:2px dotted #D88E76;
                          }
                        }

                    @media screen and (max-width: 1000px) {
                          .linkboxcontact{
                            font-size:3.5vmax;
                            letter-spacing: 2px;
                            padding-bottom: 20px;
                            padding-top: 20px;
                              border-bottom:2px dotted #D88E76;
                          }
                        }



.numeropallo{
    padding:5px 15px;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    width:40px;
    height:40px;
    margin-right:15px
}









.contralto{
    background-image:url(iidalindeman-1.jpg);
    background-size:cover;
    background-position:top right;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin:auto;
            }

            @media screen and (max-width: 1300px) {
                          .home{
                            width:100vw;
                            background-size: cover;
                            background-attachment:fixed;
                            height:100vh;
                          }
                        }

            @media screen and (max-width: 1000px) {
                          .contralto{
                            padding:auto;
                            background-position:top center;
                            background-attachment: fixed;
                            background-size:cover;
                            margin:auto;
                            height:100vh;
                          }
                        }



content{
    width:100%;
    max-width:1200px;
    display:block;
    margin:auto;
    padding:auto;
}

                @media screen and (max-width: 1300px) {
                          content{
                            max-width:1200px;
                          }
                        }


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



.logo{

    width:200px;
    margin:auto;
    margin:20px 0px

}

                @media screen and (max-width: 1300px) {
                          .logo{
                            width:250px;
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .logo{
                            width:85%;
                            padding:30px 0px 10px 0px;
                            margin: auto;
                            font-size:2.9vmax;
                            margin-bottom:50px
                          }
                        }



.logoimg{
    width:50px;
    padding-bottom:10px;
    display: block;
    margin:auto;

}

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


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


.logonavi{
    width:150px;
}

                                @media screen and (max-width: 1300px) {
                          .logonavi{
                            width:200px;
                          }
                        }


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




.slogan{
    margin:0px 0px 0px 0px;
    text-align:left;
    color:#FFF6EC;
    max-width: 500px;
    padding:110px 80px 80px 80px;
    background-color: rgba(8,16,4,0.0);
    opacity:0.9;
}

                @media screen and (max-width: 1300px) {
                          .slogan{
                            padding:100px 40px 100px 40px;
                            max-width:1000px;
                              margin:auto;
                            margin-top:300px;
                              
                                background-color: rgba(8,16,4,0.6);
                              text-align: center
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .slogan{
                            padding:150px 45px 100px 45px;
                            max-width:100%;
                            margin:0px 0px 0px 0px;
                          }
                        }






.transparent{
    background-color:none;
    margin:auto;
    padding:auto;
}

.white{
    background-color:#fff;
            }

.offwhite{
    background-color:#fffcfa;
}
                                @media screen and (max-width: 1000px) {
                          .offwhite{
                            margin-bottom:0px;
                          }
                        }


.hiekka{
    background-color:#FFF6EC;
}

                                    @media screen and (max-width: 1000px) {
                          .hiekka{
                            margin-bottom:0px;
                          }
                        }

.v-vihrea{
    background-color:#EDEAD0;
}


.persikka{
    background-color:#eae6e4;
}

.lohi{
    background-color:#D88E76;
    color:#ffffff
}

.tummanpunainen{
    background-color:#71230F;
    color:#FFF6EC;
}

.keskivihrea{
    background-color:#42682F;
    color:#FFF6EC;
}



.tummanvihrea{
    background-color:#081004;
    color:#FFF6EC;
}


.footer{
    color:#FFF6EC;
    padding:100px 0px;
}

.lainausbox{
    
    color:#FFF6EC;
    opacity:0.9;
    padding-top:100px;
    margin: auto
}

                 @media screen and (max-width: 1300px) {
                          .lainausbox{
                           
                            padding:50px 40px;
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .lainausbox{
                        padding:150px 40px 100px 40px;
                          }
                        }

.tv-kuultava{
    background-color: rgba(8,16,4,0.8);
    color:#FFF6EC;
}


#korpi{
    background-image:url(korpi1.JPG);
    background-attachment: ;
    background-size: cover;
    min-height:400px;
}

#somebts1{
    background-image:url(some_bts2.JPG);
    background-attachment: ;
    background-size: cover;
    min-height:400px;
}


.youtube{
    width:100%;
    max-width:600px;
    height:350px;
    margin:auto;   
}

                @media screen and (max-width: 1300px) {
                          .youtube{
                            max-width:900px;
                            height:350px;
                         
                          }
                        }


                @media screen and (max-width: 1000px) {
                          .youtube{
                            max-width:900px;
                            height:550px;
                              margin-top:100px;
                              margin-bottom:100px;
                          }
                        }

.youtubepieni{
    width:100%;
    height:200px;
}

                @media screen and (max-width: 1300px) {
                          .youtubepieni{
                            width:90%;
                            height:200px;
                         
                          }
                        }


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


#pisarabox{
    border-top-right-radius: 40%;
    border-bottom-left-radius: 40%;
    width:100%;
    padding:45px;
    margin:0px
}

                    @media screen and (max-width: 1300px) {
                          #pisarabox{
                            padding:35px;
                            margin:0px;
                            border-top-right-radius: 0%;
                            border-bottom-left-radius: 0%;
                          }
                        }

.box1000{
    width:100%;
    max-width:1000px;
    margin:auto;
    display: block;
    padding:auto;
}
 
    @media screen and (max-width: 1100px) {
                          .box1000{
                            max-width:1000px;
                            margin:auto;
                            padding:0px 0px;
                          }
                        }

.mobiiliruutu{
    padding:50px;
}
    
    @media screen and (max-width: 1100px) {
                          .mobiiliruutu{
                            min-height: 50vh;
                            padding-top:150px;
                            padding-bottom: 150px;
                          }
                        }

.box800{
    width:100%;
    max-width:800px;
    margin:auto;
    display: block;
    padding:auto;
}
 
    @media screen and (max-width: 1100px) {
                          .box800{
                            max-width:100%;
                            margin:auto;
                            padding:auto;
                          }
                        }


.box600{
    max-width:600px;
    margin:auto;
    padding:auto;
    display: block;
    vertical-align: top;
    min-height: 300px;
}

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

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

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

        @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;
    margin-bottom:100px;
 
}

        @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%;
                          }
                        }


.box290{
    width:100%;
    max-width:270px;
    display:inline-block;
    margin:30px;
    padding:20px;
    vertical-align: top;
    text-align: center;
    background-color:#FBE3D3;
    border-top-left-radius:20%
}

        @media screen and (max-width: 1300px) {
                          .box290{
                            max-width:27%;
                            margin:25px;
                          }
                        }

        @media screen and (max-width: 1000px) {
                          .box290{
                            max-width:100%;
                            display: block;
                            margin: auto;
                            margin-bottom:30px;
                            padding:45px 30px;
                          }
                        }

.boximg{
    width:75%;
}

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

.boximgtarina{
    width:75%;
    float:right;
}

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


.iconimg{
    width:17%;
    margin-bottom:15px
}

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


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



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


.box50pros{
    width:50%;
    vertical-align:top;
    display:table-cell;
    margin:auto;
    padding:25px;
}

            @media screen and (max-width: 1000px) {
                          .box50pros{
                            width:100%;
                            display:block;
                            margin:0px;
                            padding:35px;
                          }
                        }


.box33pros{
    width:33%;
    vertical-align:top;
    display:table-cell;
    margin:auto;
  
}

            @media screen and (max-width: 1000px) {
                          .box33pros{
                            width:100%;
                            display:block;
                            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;
                          }
                        }


.colorbg{
    padding:0px;
}


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

                

                





                


.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:'abhaya_libreregular';
    text-transform: none;
    margin:auto;
    font-size:24px;
    line-height: 1.2;
    text-align: center;
    opacity: 0.8
}



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

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





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

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

.pitkaviiva{
    margin:30px 0px 0px 0px;
    width:100%;
    border-top:1px solid #081004;
}

    @media screen and (max-width: 1300px) {
                          .pitkaviiva{
                            border-top:2px solid #081004;
                            margin:40px 0px
                          }
                        }
















h1{
    font-family:'abhaya_librebold';
    font-weight:lighter;
    font-size:40px;
    margin:0px;
    line-height:1.1;
}

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

         @media screen and (max-width: 1000px) {
                          h1{
                            font-size:7.0vmax;
                          line-height:1.0;
                          }
                        }

h2{
    font-family:'abhaya_librebold';
    text-transform: none;
    font-weight:lighter;
    font-size:30px;
    margin:auto;
}

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

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


h3{
    font-family:'abhaya_librebold';
    font-weight:lighter;
    text-transform: none;
    margin:10px 0px 0px 0px;
    font-size: 22px;
}

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

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


h4{
    font-size:;
    padding:15px;
}

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

    @media screen and (max-width: 1000px) {
                          h4{
                            font-size:4.0vmax;
                            padding-top:40px;
                            padding-bottom: 40px;
                          }
                        }


p{
    font-family:'cormorantmedium';
    letter-spacing: 0px;
    line-height:1.6;
    font-size: 17px;
    
}

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

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


.subh{
    max-width:80%;
    margin:auto;
    font-size:23px;
}

   @media screen and (max-width: 1300px) {
                          .subh{
                            max-width: 100%;
                            font-size:1.6vmax;
                              font-family:'assistantregular';
                          }
                        }

    @media screen and (max-width: 1000px) {
                          .subh{
                                  max-width: 100%;
                            font-size:3.8vmax;
                          }
                        }



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

}


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

}


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

}



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

}



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

}






@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;

}


@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: 'cormorantmedium';
    src: url('Cormorant-Medium-webfont.eot');
    src: url('Cormorant-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cormorant-Medium-webfont.woff2') format('woff2'),
         url('Cormorant-Medium-webfont.woff') format('woff'),
         url('Cormorant-Medium-webfont.ttf') format('truetype'),
         url('Cormorant-Medium-webfont.svg#cormorantmedium') 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;

}


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

}




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

}





/* Add a black background color to the top navigation */
.topnav {
  background-color: #081004;
  overflow: hidden;
    padding:25px 25px;
    text-align: center

}

                  @media screen and (max-width: 1100px) {
                  .topnav {
                    padding:50px 30px;
                  font-size:4.5vmax;
                      text-align: left
                  }
                }

/* Style the links inside the navigation bar */
.topnav a {

  display: inline-block;
  color: #fff3e6;
  text-align: center;
vertical-align: middle;
  padding: 15px 25px;
  text-decoration: none;
  font-size: 13px;
    font-family: 'abhaya_libresemibold';
    letter-spacing: 2px;
    text-transform: uppercase
}

                  @media screen and (max-width: 1100px) {
                  .topnav a {
                    padding:60px 40px;
                  font-size:3vmax;
                    margin:0px;
                    letter-spacing: 4px
                  }
                }


/* Change the color of links on hover */
.topnav a:hover {
  background-color: none;
}

/* Add an active class to highlight the current page */
.topnav a.varaa {
  background-color: #B53818;
  color: #FFF6EC;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
float:right;
margin-top:15px;
font-family:'assistantbold';

}

                @media screen and (max-width: 1100px) {
                  .topnav a.varaa {
                    margin-left:0px;
                    margin-top:0px;
                      border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
                  
                  }
                }

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1100px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    font-size:6vmax;
    position: absolute;
    right: 0;
    top: 0;
    margin-right:20px;
    margin-top: 30px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1100px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;

  }
}




/* Add a black background color to the top navigation */
.topnav2 {
  background-color: #081004;
  overflow: hidden;
    padding:25px 25px;
    text-align: center

}

                  @media screen and (max-width: 1100px) {
                  .topnav2 {
                    padding:40px 30px;
                  font-size:4vmax;
                      text-align: left
                  }
                }

/* Style the links inside the navigation bar */
.topnav2 a {

  display: inline-block;
  color: #fff3e6;
  text-align: center;
vertical-align: middle;
  padding: 15px 25px;
  text-decoration: none;
  font-size: 13px;
    font-family: 'abhaya_libresemibold';
    letter-spacing: 2px;
    text-transform: uppercase
}

                  @media screen and (max-width: 1100px) {
                  .topnav2 a {
                      text-align: left;
                    padding:40px 60px;
                      display: block;
                  font-size:3vmax;
                    margin:0px;
                    letter-spacing: 4px
                  }
                }


/* Change the color of links on hover */
.topnav2 a:hover {
  background-color: none;
}






/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1100px) {
  .topnav2.responsive {position: relative;}
  .topnav2.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    
  }
  .topnav2.responsive a {
    float: none;
    display: block;
    text-align: left;

  }
}