#content{
    position:relative;
    width:100vw;
    height:100vh;
    background-image:url('/fondo-construccion.jpg');
    background-size:cover;
    background-position: center center;
    min-width:0px;
}
#crufiLogo{
    position: absolute;
    height: 50px;
    top: 50px;
    left: 3%;
    z-index: 3;
}
#crufimax{
    position: absolute;
    height: 100vh;
    left: 10%;
}
#contentTitle{
    font-family: Muro;
    color: white;
    font-size: 80px;
    position: absolute;
    margin: 0 auto;
    display: block;
    width: 480px;
    left: calc(10% + 70vh);
    top: calc(50% - 80px);
}
.hazel {
    position: absolute;
    width: 80px;
    z-index: 2;
    opacity: 1;
}

.chocolate {
    position: absolute;
    width: 80px;
    z-index: 2;
}

.hazel2 {
    width: 11%;
    min-width: 60px;
    top: 2%;
    left: 42%;
    transform: rotate(270deg);
}

.hazel1 {
    top: 52%;
    left: 83%;
    width: 16%;
    min-width: 80px;
}

@-webkit-keyframes hazelFloat1 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(8px, 10px);
    }
    50% {
        transform: translate(0px, 20px);
    }
    75% {
        transform: translate(-6px, 30px);
    }
    100% {
        transform: translate(-0px, -0px);
    }
}

@-webkit-keyframes hazelFloat2 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(-8px, -10px);
    }
    50% {
        transform: translate(0px, -30px);
    }
    75% {
        transform: translate(6px, -30px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes hazelFloat3 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(4px, 4px);
    }
    50% {
        transform: translate(-4px, 12px);
    }
    75% {
        transform: translate(8px, 6px);
    }
    100% {
        transform: translate(-0px, -0px);
    }
}

@-webkit-keyframes hazelFloat4 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(-12px, 4px);
    }
    50% {
        transform: translate(-2px, 10px);
    }
    75% {
        transform: translate(-6px, -4px);
    }
    100% {
        transform: translate(-0px, -0px);
    }
}

@-webkit-keyframes hazelFloat5 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(8px, 10px);
    }
    50% {
        transform: translate(0px, 20px);
    }
    75% {
        transform: translate(-6px, 30px);
    }
    100% {
        transform: translate(-0px, -0px);
    }
}

@-webkit-keyframes hazelFloat6 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(-8px, -10px);
    }
    50% {
        transform: translate(0px, -30px);
    }
    75% {
        transform: translate(6px, -30px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes hazelFloat7 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(4px, 4px);
    }
    50% {
        transform: translate(-4px, 12px);
    }
    75% {
        transform: translate(8px, 6px);
    }
    100% {
        transform: translate(-0px, -0px);
    }
}

@-webkit-keyframes hazelFloat8 {
    0% {
        transform: translate(0, 0px);
    }
    25% {
        transform: translate(-12px, 4px);
    }
    50% {
        transform: translate(-2px, 10px);
    }
    75% {
        transform: translate(-6px, -4px);
    }
    100% {
        transform: translate(-0px, -0px);
    }
}

.hazelFloat1 {
    animation-name: hazelFloat1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat2 {
    animation-name: hazelFloat2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat3 {
    animation-name: hazelFloat3;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat4 {
    animation-name: hazelFloat4;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat5 {
    animation-name: hazelFloat5;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat6 {
    animation-name: hazelFloat6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat7 {
    animation-name: hazelFloat7;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazelFloat8 {
    animation-name: hazelFloat8;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.hazel3 {
    width: 9%;
    min-width: 40px;
    top: 8%;
    transform: rotate(26deg);
    left: 66%;
}

.hazel4 {
    width: 12%;
    min-width: 65px;
    top: 30%;
    left: 2%;
}

.hazel5 {
    width: 12%;
    min-width: 65px;
    top: 85%;
    left: 1%;
}

.hazel6 {
    width: 8%;
    min-width: 30px;
    top: 32%;
    left: 73%;
}

.hazel7 {
    width: 15%;
    min-width: 80px;
    top: -5%;
    transform: rotate(14deg);
    left: 85%;
}

.hazel8 {
    width: 8%;
    min-width: 50px;
    transform: rotate(22deg);
    top: 71%;
    left: 63%;
}
@media (orientation:portrait){
    #crufiLogo{
        left: calc(50% - 77.5px);
    }
    #crufimax{
        position: relative;
        height: 70vh;
        left: calc(50% - 30vh);
    }
    #contentTitle{
        position: relative;
        left: auto;
        top: auto;
        width: 90%;
        font-size: 50px;
        text-align: center;
        margin-top: 20px;
        z-index: 3;
    }
    .hazel3{
        top: 46%;
        left: 77%;
    }
    .hazel6{
        top: 71%;
        left: 20%;
    }
    .hazel7{
        top:20%;
    }
    .hazel5{
        top:77%;
    }
    .hazel1{
        top:84%;
    }
}