body {
     background: #222;
}
 .navbar {
     font-family: 'Julius Sans One', sans-serif;
     z-index: 3;
}
 h1,h2,h3,h4 {
     font-family: 'Julius Sans One', sans-serif;
}
 .direction-reveal__card {
     font-family: 'Julius Sans One', sans-serif;
}
 .mj-dark {
     background: #000000a3 
}
 .vh {
     height: 100vh;
}
 .modal-content {
     font-family: 'Julius Sans One', sans-serif;
     background-color: #000000d4;
     color: #fff;
     border-radius: 0px;
}
 .meta-post-mj {
     position: absolute;
     bottom: 0em;
     padding: 0em 3em 0 3em;
     left: 0;
     right: 0;
     text-align: center;
}
 .meta-post-mj p {
     font-family: 'Julius Sans One', sans-serif;
     color: #fff;
     background: #000000a1;
     padding: 8px;
}
 .full-link {
     width: 100%;
     height: 100%;
     position: absolute;
     z-index: 1;
}
 .documental {
     position: relative;
}
 .documental img {
     opacity: 0.6;
}
 .documental i {
     position: absolute;
     top: 35%;
     left: 0;
     right: 0;
     text-align: center;
     color: #fff;
     font-size: 6em;
}
 .cover:before {
     position: absolute;
     content: '';
     width: 100%;
     height: 100vh;
     background:url(data:image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGUlEQVQYV2NkYGD4z8DAwMiABFA4MHEKBQFmoAEGlW1mUAAAAABJRU5ErkJggg==) repeat;
}
 .down {
     position: absolute;
     text-align: center;
     bottom: 0;
     left: 0;
     right: 0;
     margin-left: auto;
     margin-right: auto;
}
 .down i {
     font-size: 3em;
     color: #fff;
}
 @-webkit-keyframes rebote {
     from{
         -webkit-transform: translate(0px,0px);
    }
     to {
         -webkit-transform: translate(0px,-15px);
    }
}
 @-moz-keyframes rebote {
     from {
         -moz-transform: translate(0px,0px);
    }
     to {
         -moz-transform: translate(0px,-15px);
    }
}
 .rebote {
     -webkit-animation-name: rebote;
     -webkit-animation-duration:.5s;
     -webkit-animation-direction:alternate;
     -webkit-animation-timing-function:linear;
     -webkit-animation-delay:0s;
     -webkit-animation-iteration-count:infinite;
     -moz-animation-name: rebote;
     -moz-animation-duration:.5s;
     -moz-animation-direction:alternate;
     -moz-animation-timing-function:linear;
     -moz-animation-delay:0s;
     -moz-animation-iteration-count:infinite;
}


/***/

@media (max-width: 575.98px) { 
   
   .vh {
    height: 100%;
    }

    .cover {
        position: relative;
    }

    .cover .hi {
        position: relative;
            top: 0;
            left: 0;
            transform: none;
    }

    p {
   
    font-size: 0.9em;
    text-align: justify;
        }

    .hi h3 {
            font-size: 1em;
    }

    .direction-reveal__text {

    font-size: 0.5em;
    text-align: center;
        }

    .bg-post {
            background-image: none!important;
    }

    .documental i {
            font-size: 3em;
    }

 }