html { scroll-behavior: smooth; } 
@font-face {
    font-family: 'rawestmedium';
    src: url('font/rawest-medium-webfont.eot');
    src: url('font/rawest-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('font/rawest-medium-webfont.woff2') format('woff2'),
    url('font/rawest-medium-webfont.woff') format('woff'),
    url('font/rawest-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'rawestbold';
    src: url('font/rawest-bold-webfont.eot');
    src: url('font/rawest-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('font/rawest-bold-webfont.woff2') format('woff2'),
    url('font/rawest-bold-webfont.woff') format('woff'),
    url('font/rawest-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body { transition: background-color 3s ease; background-color: #8B0000; color: #fff; font-family: 'rawestmedium'; } 
.scroll-image { position: relative; overflow: hidden; height: 100%; } 
.scroll-image img { width: 100%; height: 100%; object-fit: cover; transform: translateY(0); transition: transform 0.2s ease-out; } 
footer { width: 100%; background: transparent; }
strong {font-family: 'rawestbold';}

.intro {padding:3rem;}

/*** ANIMACIONES ***/
.js-scroll { opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled { opacity: 1;}
.scrolled.entra { animation: fade-in 1s ease-in-out both; }
.scrolled.entra-abajo { animation: fade-in-bottom 1s ease-in-out both; }
.scrolled.entra-arriba { animation: fade-in-top 1s ease-in-out both; }
.scrolled.desliza-izq { animation: slide-in-left 1s ease-in-out both; }
.scrolled.desliza-dcha { animation: slide-in-right 1s ease-in-out both; }
.scrolled.desliza-abajo { animation: slide-in-bottom 1s ease-in-out both; }
.scrolled.desliza-arriba { animation: slide-in-top 1s ease-in-out both; }

@keyframes slide-in-left { 
0% { transform: translateX(-150px); opacity: 0; } 
100% { transform: translateX(0); opacity: 1; } 
}
@keyframes slide-in-right { 
0% { transform: translateX(150px); opacity: 0; } 
100% { transform: translateX(0); opacity: 1; } 
}
@keyframes slide-in-top { 
0% { transform: translateY(-150px); opacity: 0; } 
100% { transform: translateY(0); opacity: 1; } 
}
@keyframes slide-in-bottom { 
0% { transform: translateY(150px); opacity: 0; } 
100% { transform: translateY(0); opacity: 1; } 
}
@keyframes fade-in-top { 
0% { transform: translateY(-50px); opacity: 0; } 
100% { transform: translateY(0); opacity: 1; } 
}
@keyframes fade-in-bottom { 
0% { transform: translateY(50px); opacity: 0; } 
100% { transform: translateY(0); opacity: 1; } 
}
@keyframes fade-in { 
0% { opacity: 0; } 
100% { opacity: 1; } 
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  

    .intro {padding:3rem 1rem 3rem 1rem;}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  

    #descubre-sistema {text-align:center;}
    .intro {padding:3rem;}
    
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {    

 }