body,h1,h2,h3,h4,h5,h6 {font-family: 'Playfair Display', serif;}
body, html {
    height: 100%;
    line-height: 1.8;
}



.lofe{
  background: none;
}
.brea{
  min-height: 600px;
}

/* Create a Parallax Effect */
.bgimg, .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg{
    background-image: url("../img/hut.jpg");
    min-height: 75%;
}

.bgimg-3 {
    background-image: url('../img/wre.jpg');
    min-height: 1100px;
}

.bgimg-1{
    background-image: url("../img/des.jpg");
    min-height: 400px;
}
.bgimg-2{
    background-image: url("../img/pol.jpg");
    min-height: 500px;
}



.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg, .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}

.menu {
    display: none;
}

.teo {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 2s; 
    /* When the animation is finished, start again */
    animation-iteration-count: infinite; 
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}