* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: Lato;

    font-weight: 400;

    color: #343333;

    user-select: none;

}



#pagepiling{

    display: none;

}





body{

    width: 100%;

    height: 100%;

}



mobile{

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    position: absolute;    

}



#logo{

    position: relative;

    z-index: 5;

}



.menu{

    -webkit-transition: 0.6s ease;

    -moz-transition: 0.6s ease;

    -ms-transition: 0.6s ease;

    -o-transition: 0.6s ease;

    transition: 0.6s ease;

    padding: 6vh 6vh 6vh 6vh;

    top: 0;

    left: 0;

    z-index: 1;

    position: fixed;

    height: 32%;

    width: 100vw;

    overflow: hidden;

    background-color: #eae6e5;

}



.menu.open{

    height: 100%;

    color: #EF6449; 

}



.menu.open .menuline{

    transform: rotate(90deg);

    background-color: #EF6449;

}

.menu.open .menuclick{

    color: #EF6449;

}



#logo img{

    width: 100%;

}



#logo p{

    margin-top: 1vh;

    color: #EF6449; 

    font-size: 2.7vh;

}



.menuclick{

    position: relative;

    -webkit-transition: 0.4s ease;

    -moz-transition: 0.4s ease;

    -ms-transition: 0.4s ease;

    -o-transition: 0.4s ease;

    transition: 0.4s ease;

    width: 13vw;

    z-index: 10;

    margin-top: 5vh;

    color: #343333; 

    font-size: 2.7vh;

}



.menuline{

    -webkit-transition: 0.4s ease;

    -moz-transition: 0.4s ease;

    -ms-transition: 0.4s ease;

    -o-transition: 0.4s ease;

    transition: 0.4s ease;

    transform-origin: top left;

    margin: .85vh 0 0 0;

    height: .3vh;

    width: 6.8vh;

    background-color: #545353;

}



h3{

    font-size: 4.5vh;

    font-weight: 400;

    text-decoration: none;

}



a{

    text-decoration: none;

}



#blockcolor{

    position: fixed;

    height: 33.5%;

    width: 100%;

    background-color: #eae6e5;

    z-index: 2;

    top: 0;

    left: 0;

}



.open #blockcolor{

     -webkit-transition: height 0.4s ease;

    -moz-transition: height 0.4s ease;

    -ms-transition: height 0.4s ease;

    -o-transition: height 0.4s ease;

    transition: height 0.4s ease;

    height: 42vh;

}



.voci{

    position: absolute;

    top: 0;

    z-index: -1;

    display: flex;

    flex-direction: column-reverse;

    height: 100%;

    vertical-align: bottom;

    padding-bottom: 6vh;

}



.voci h3{

    margin-top: 5vh;

}





.wallpaper {

    z-index: -1;

    top: 0;

    left: 0;

    position: fixed;

    width: 100%;

    height: 100%;

    background-color: #eae6e5;

}



#calice {

    position: relative;

    top: 36.5%; 

    height: 32%;

    background-image: url(../media/backpic/calice3.png);

    background-position: 6vh 50%;

    background-size: cover;

    background-repeat: no-repeat;

    background-blend-mode: multiply;

    background-color: #eae6e5;

}



.subtitle{

    left: 6vh;

    z-index: 0;

    position: absolute;

    bottom: 6.4%;

}