* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     user-select: none;
     list-style: none;
 }

 html {
     font-size: 0.625em;
 }

 body {
     font-family: "Quicksand", "Century Gothic";
     font-size: 1.6rem;
     color: ;
     background-color: black;
 }

 @keyframes fadeIn {
     0% {
         opacity: 0;
         transform: translateY(50%);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInDoc {
     100% {
         display: block;
         opacity: 1;
     }
 }

 @keyframes fadeOutDoc {
     100% {
         opacity: 0;
         display: none;
     }
 }



 /* ===== Scrollbar CSS ===== */
 /* Firefox */

 * {
     scrollbar-width: thin;
     scrollbar-color: #ffffff #000000;
 }

 Chrome,
 Edge,
 and Safari *::-webkit-scrollbar {
     width: 10px;
 }

 *::-webkit-scrollbar-track {
     background: #000000;
 }

 *::-webkit-scrollbar-thumb {
     background-color: #ffffff;
     border-radius: 2px;
     border: 2px solid #787878;
 }

 /* === MENU === */

 #index #menu {
     display: flex !important;
 }

 #menu {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     background-color: black;
 }

 .body #menu {
     height: 90vh;
     height: calc(var(--vh, 1vh) * 90);
     width: 100%;
     position: absolute;
     top: 10vh;
     top: calc(var(--vh, 1vh) * 10);
     left: 0;
     z-index: 5;
 }

 /* botones menu */

 .elemento-menu {
     flex-grow: 1;
     background-size: cover;
     background-position: center;
     cursor: pointer;
     color: white;
     text-transform: uppercase;
     position: relative;
     transition: 0.2s;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .elemento-menu:nth-of-type(1) {
     background-image: url(../img/menu-ppal-foto.webp);
 }

 .elemento-menu:nth-of-type(2) {
     background-image: url(../img/menu-ppal-video.webp);
 }

 .elemento-menu:nth-of-type(3) {
     background-image: url(../img/menu-ppal-otros.webp);
 }

 /* texto elementos menu */

 .elemento-menu > span {
     font-size: 7vw;
     transition: 0.2s;
     padding: 30px;
     position: relative;
 }

 .elemento-menu > span > span {
     transition: 0.2s;
 }

 .elemento-menu > span > span:first-of-type {
     letter-spacing: 1rem;
 }

 .elemento-menu:hover > span > span:first-of-type {
     letter-spacing: 1.5rem;
     font-size: 7vw;
     text-shadow: 0px -1px 15px rgba(0, 0, 0, 1);
 }

 .elemento-menu:hover > span {
     text-shadow: 0px -1px 15px rgba(0, 0, 0, 1);
 }

 /* fondo negro elementos menu */

 .elemento-menu::before {
     display: block;
     content: "";
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.48);
     position: absolute;
     top: 0;
     left: 0;
 }

 .elemento-menu:hover::before {
     background-color: rgba(0, 0, 0, 0);
 }

 /* === CLICKED === */

 /* texto elementos menu */

 .elemento-menu.clicked > span > span {
     letter-spacing: 1.5rem;
 }

 /* fondo negro elementos menu */

 .elemento-menu.clicked {
     flex-grow: 0;
 }

 .elemento-menu.clicked::before {
     background-color: rgba(0, 0, 0, 0.48);
 }

 /* submenu */

 .submenu {
     width: 100%;
     padding: 0 30px 30px 30px;
     display: none;
 }

 .submenu ul {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     text-align: center;
     font-size: 4vw;
 }

 .submenu li {
     width: 49%;
     border: 1px solid white;
     height: 0;
     padding-bottom: 25%;
     position: relative;
     background-size: cover;
     background-position: center;
     margin-bottom: 3%;
 }

 .submenu a {
     color: white;
     display: block;
     text-decoration: none;
     width: 100%;
     height: 100%;
 }

 .submenu li span {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     transform-origin: 50%;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .submenu li::before {
     display: block;
     content: "";
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     position: absolute;
     top: 0;
     left: 0;
 }

 .submenu li:hover::before {
     background-color: rgba(255, 255, 255, 0.5);
 }

 .submenu li:hover {
     background-color: rgba(255, 255, 255, 0.5);
     text-shadow: 0px -1px 15px rgba(255, 255, 255, 1);
 }

 .submenu li:hover a {
     color: black;
 }

 #sub-fotografia li:nth-of-type(1) {
     background-image: url(../img/1h-est-a.webp);
 }

 #sub-fotografia li:nth-of-type(2) {
     background-image: url(../img/2h-esp-a.webp);
 }

 #sub-fotografia li:nth-of-type(3) {
     background-image: url(../img/3h-pro-a.webp);
 }

 #sub-fotografia li:nth-of-type(4) {
     background-image: url(../img/4h-int-a.webp);
 }

 #sub-fotografia li:nth-of-type(5) {
     background-image: url(../img/5h-ret-a.webp);
 }

 #sub-fotografia li:nth-of-type(6) {
     background-image: url(../img/6h-ext-a.webp);
 }

 #sub-video li:nth-of-type(1) {
     background-image: url(../img/video-musical.webp);
 }

 #sub-video li:nth-of-type(2) {
     background-image: url(../img/video-youtubers.webp);
 }

 #sub-video li:nth-of-type(3) {
     background-image: url(../img/video-publi.webp);
 }

 #sub-video li:nth-of-type(4) {
     background-image: url(../img/video-documental.webp);
 }

 #sub-video li:nth-of-type(5) {
     background-image: url(../img/video-cortos.webp);
 }

 #sub-video li:nth-of-type(6) {
     background-image: url(../img/video-compilados.webp);
 }

 #sub-design li:nth-of-type(1) {
     background-image: url(../img/logos-1.svg);
     background-size: 30%;
     background-repeat: no-repeat
 }

 #sub-design li:nth-of-type(2) {
     background-image: url(../img/design-corporate.webp);
 }

 #sub-design li:nth-of-type(3) {
     background-image: url(../img/design-sm.webp);
 }

 #sub-design li:nth-of-type(4) {
     background-image: url(../img/design-posters.webp);
 }

 #sub-design li:nth-of-type(5) {
     background-image: url(../img/design-brochures.webp);
 }

 #sub-design li:nth-of-type(6) {
     background-image: url(../img/design-web.webp);
 }

 /* === ENCABEZADO === */

 /* = Página principal */

 #cont > header {
     height: 10vh;
     height: calc(var(--vh, 1vh) * 10);
     background-color: black;
     display: flex;
     align-items: center;
 }

 #encabezado {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #index #encabezado {
     min-height: 10vh;
     min-height: calc(var(--vh, 1vh) * 10);
     height: 10vh;
     height: calc(var(--vh, 1vh) * 10);
     background-color: black;
     border-bottom: 1px solid rgba(128, 128, 128, 0.27);
 }

 #encabezado > a::after {
     display: block;
     content: "";
     width: 25vw;
 }

 #encabezado > div > a {
     width: 40px;
     display: inline-block;
     max-width: 50%;
     margin-right: 10px;
 }

 #encabezado img {
     width: 100%;
     display: block;
     margin: auto;
 }

 /* Resto páginas */

 #site-header {
     display: flex;
     flex-direction: column;
 }

 #boton-menu-container {
     width: 20%;
     height: 100%;
     display: flex;
     justify-content: center;
 }

 #boton-menu {
     cursor: pointer;
     display: flex;
     width: 30px;
 }

 #boton-menu img {
     width: 100%;
 }

 #boton-menu .menu-flecha {
     width: 80%;
     object-fit: contain;
     transition: 0.2s;
 }

 #boton-menu .menu-flecha.clicked {
     transform: rotate(-180deg);
 }

 #boton-contacto {
     width: 20%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #index #boton-menu {
     position: static;
     visibility: hidden;
     width: 20%;
 }

 .mensaje-icono,
 #logo,
 #boton-menu {
     transform: scale(1);
 }

 #encabezado > #site-logo {
     width: 60%;
 }

 .languages,
 .lang-button {
     color: white;
     font-size: 3rem;
     opacity: 0.5;
     display: flex;
     flex-direction: column;
     line-height: 3rem;
     align-items: center;
     font-weight: 600;
 }

 #encabezado .lang-button {
     width: auto;
     text-decoration: none;
     position: relative;
 }

 #encabezado .lang-button::after {
     display: block;
     content: "";
     width: 100%;
     position: absolute;
     top: 100%;
     border-bottom: 2px solid white;
 }

 #index #menu .elemento-menu {
     animation: fadeIn 0.8s;
 }

 #index #menu .elemento-menu:nth-of-type(2) {
     animation-delay: 0.1s;
 }

 #index #menu .elemento-menu:nth-of-type(3) {
     animation-delay: 0.2s;
 }

 /* === PAGINA COMPLETA === */

 .galeria-slider-h,
 .galeria-slider-b,
 .intro-texto {
     display: none
 }

 #cont {
     display: flex;
     flex-direction: column;
 }

 /* === INDEX === */

 .index-cont {
     height: 100vh;
     height: calc(var(--vh, 1vh) * 100);
 }

 /* === LISTADOS FOTO/VIDEO/OTROS === */

 .listado-principal {
     display: flex;
     flex-direction: column;
     min-height: 90vh;
     min-height: calc(var(--vh, 1vh) * 90);
     height: 90vh;
     height: calc(var(--vh, 1vh) * 90);
     flex: 1;
     font-size: 3vw;
 }

 .listado-principal li {
     overflow: hidden;
     transition: 0.2s;
     /*height: 60px;*/
     height: 0;
     flex-grow: 1;
     border-bottom: 1px solid rgba(0, 0, 0, 0.11);
     position: relative;
 }

 .listado-principal li.show {
     height: 100vh;
     height: calc(var(--vh, 1vh) * 100);
     position: relative;
     margin-top: -10vh;
     margin-top: calc(var(--vh, 1vh) * -10);
     border-bottom: none;
     padding: 0 5vw 0 5vw;
     display: flex;
     flex-direction: column;
 }

 .listado-principal h2 {
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.3rem;
     cursor: pointer;
     flex-shrink: 0;
     height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: 0.2s;
     font-weight: normal;
 }

 .listado-principal li.show h2 {
     width: 100%;
     height: 10vh;
     height: calc(var(--vh, 1vh) * 10);
     padding: 0 30px;
 }

 .listado-principal li > h2 > span {
     position: relative;
     color: white;
 }

 .listado-principal li > h2 > span::after {
     display: block;
     content: "";
     position: absolute;
     border-bottom: 1px solid grey;
     width: 99%;
     transition: 0.2s;
     transform: scale(0);
     transform-origin: center;
 }

 .listado-principal li:hover span::after {
     transform: scale(1);
 }

 .listado-principal li.show:hover span::after {
     transform: scale(0);
 }

 .fa-angle-up {
     visibility: hidden;
     opacity: 0;
     color: white;
 }

 .listado-principal li.show .fa-angle-up {
     visibility: visible;
     opacity: 1;
 }

 .fa-angle-left,
 .fa-angle-right {
     color: white;
 }

 .listado-principal li.hide {
     /*  height: 0;*/
     border-bottom: none;
 }


 .listado-principal li:nth-of-type(7) {
     background-color: rgba(70, 70, 70, 1)
 }

 .listado-principal li:nth-of-type(6) {
     background-color: rgba(110, 110, 110, 1)
 }

 .listado-principal li:nth-of-type(5) {
     background-color: rgba(90, 90, 90, 1)
 }

 .listado-principal li:nth-of-type(4) {
     background-color: rgba(70, 70, 70, 1)
 }

 .listado-principal li:nth-of-type(3) {
     background-color: rgba(50, 50, 50, 1)
 }

 .listado-principal li:nth-of-type(2) {
     background-color: rgba(30, 30, 30, 1)
 }

 .listado-principal li:nth-of-type(1) {
     background-color: rgba(10, 10, 10, 1)
 }

 .listado-principal li:nth-of-type(7) {
     background-color: rgba(100, 100, 100, 1)
 }

 .listado-principal li:nth-of-type(8) {
     background-color: rgba(100, 100, 100, 1)
 }

 .listado-principal li:nth-of-type(9) {
     background-color: rgba(100, 100, 100, 1)
 }

 .listado-principal li:nth-of-type(10) {
     background-color: rgba(100, 100, 100, 1)
 }

 /* = Owl Carousel = */

 .galeria-slider-h,
 .galeria-slider-b {
     display: none !important;
 }

 /* = Listado vídeo = */

 .listado-principal li.show .vid-cont {
     position: relative;
     /*
     height: 100%;
     margin: auto;
*/
     /*     aspect-ratio: 16/9;*/
     width: 100%;
     display: flex;
     justify-content: center;
 }

 .listado-principal .apt-vid {
     display: flex;
     flex-direction: column;
 }

 .body-video .listado-principal li.show iframe {
     /*     height: 100%;*/
     top: 0;
     left: 0;
 }

 #cont > main > .listado-principal > li > iframe {
     margin: auto !important;
 }

 #publi .vid-cont > video {
     width: 100%
 }

 /* = texto bajo vídeos e iframes = */

 .listado-principal .texto {
     width: 100%;
     text-align: center;
     padding: 40px 40px 0 40px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     color: white;
 }

 .listado-principal .texto .detalles:first-of-type {
     font-size: 5vw;
     border-top: 2px solid grey;
     padding: 10px;
     border-bottom: 2px solid grey;
     margin-bottom: 20px;
 }

 .listado-principal .texto .detalles:last-of-type {
     font-size: 3vw;
     font-weight: bold;
 }

 /* === OTROS === */

 /* Corporate */

 #corporate p {
     color: white;
     text-align: center;
     margin-top: 20px;
 }

 #corporate a {
     font-size: 1rem;
     color: white;
 }

 #corporate a:hover {
     text-decoration: none;
 }

 /* Logos */


 #logo-design .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > div {
     display: flex;
     flex-direction: column;
 }

 #logo-design .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > div > p {
     font-size: 2.5rem;
     text-align: center;
     margin-bottom: auto;
     margin-top: 20px;
     color: white;
 }

 #logo-design .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > div > img {
     max-width: 80% !important;
     padding: 50px;
     margin: auto auto 0 auto;
     width: auto;
     /* margin-top: auto; */

 }

 #logo-design .white-bg {
     background-color: white
 }

 /* Maquetación */

 #brochures > div > div.owl-stage-outer > div > div.owl-item > div > img,
 #corporate img {
     height: 80%;
 }

 #brochures > div > div.owl-stage-outer > div > div.owl-item > div > p {
     font-size: 2.5rem;
     text-align: center;
     cursor: pointer;
     color: white;
 }

 #brochures > div > div.owl-stage-outer > div > div.owl-item > div > p:hover {
     font-weight: bold;
 }

 #documents #close-button {
     position: fixed;
     top: 8%;
     right: 3%;
     z-index: 9;
     font-size: 30px;
     cursor: pointer;
     background-color: black;
     font-weight: bold;
     padding: 10px 25px 15px;
     border-radius: 100%;
     box-shadow: 3px 3px 3px grey;
     color: white;
 }

 #documents #close-button:hover {
     background-color: white;
     color: black;

 }

 #documents {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 8;
     width: 100%;
     height: 100vh;
     display: none;
 }

 #documents iframe {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }

 .document {
     opacity: 0;
     transition: opacity 0.2s;
     transition-behavior: allow-discrete;
 }

 .document.fadeIn {
     opacity: 1;
     @starting-style {
         opacity: 0;
     }    
 }

 .logo-backs {
     opacity: .9;
     background-image: none !important;
     background-color: black;
 }

 /* Web */

 #web-dev {
     padding: 0;
 }

 #web-dev h2 {
     padding: 0 5vw;
 }

 #web-dev #websites {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: calc(var(--vh, 1vh) * 90);
 }

 #web-dev li,
 #web-dev .sub-categoria-web a,
 #web-dev .sub-categoria-web img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-bottom: none;
     object-position: center;
 }

 #web-dev .sub-categoria-web {
     display: flex;
     width: 100%;
     height: 100%;
 }

 #web-dev .sub-categoria-web li {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0);
     border-bottom: none;
     position: relative;
 }

 #web-dev .sub-categoria-web li .web-logo {
     position: absolute;
     height: 100%;
     width: 101%;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     padding: 12%;
     object-fit: contain;
     background-color: rgba(0, 0, 0, 0.9);
     transition: 0.2s;
 }

#web-dev .sub-categoria-web .white-bg .web-logo{
    background-color: rgba(255, 255, 255, 0.9);
}

 #web-dev .sub-categoria-web li:hover .web-logo {
     opacity: 0;
 }

 #github {
     background-color: white;
 }

 #github img {

     height: 60%;
     margin-left: auto;
     margin-right: 20px;
 }

 #github p {
     margin-right: auto;
 }

 #github a {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-transform: uppercase;
     text-decoration: none;
     color: black;
     font-size: 2.5rem;
     letter-spacing: 1rem;
     margin: auto;
     transition: 0.2s;
 }

 #github:hover a {
     letter-spacing: 1.5rem;
 }


 .body-video .listado-principal li.show .instagram-media {
     margin: auto !important;
     position: static;
     transform: translateY(10px);
 }

 /* TWEET */

 .owl-carousel.owl-loaded .owl-item .tweet-container * {
     width: auto;
 }

 .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item .tweet-container {
     background-color: rgb(21, 32, 43);
     color: white;
     max-width: 400px;
     border-radius: 15px;
     padding: 20px;
     font-family: 'Roboto';
     height: auto;
     margin: auto;
     transition: 0.2s;
     cursor: pointer;
     font-size: 1.6rem;
     position: relative;
 }

 .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item .tweet-container .twitter-logo {
     position: absolute;
     width: 20px;
     top: 15px;
     right: 15px;
     height: auto;
 }

 .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item .tweet-container p {
     cursor: text;
 }

 .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item .tweet-container:hover {
     background-color: rgb(30, 39, 50);
 }

 .owl-carousel .owl-item .tweet-container a {
     color: rgb(107, 201, 251);
     text-decoration: none;
 }

 .owl-carousel .owl-item .tweet-container a:hover {
     text-decoration: underline;
 }

 .owl-carousel .owl-item .tweet-header,
 .owl-carousel .owl-item .tweet-full-conversation {
     display: flex;
     align-items: center;
 }

 .owl-carousel .owl-item .tweet-profilepic {
     height: 60px;
     border-radius: 100%;
     margin-right: 5px;
     transition: 0.2s;
 }

 .owl-carousel .owl-item .tweet-profilepic:hover {
     opacity: 0.8;
 }

 .owl-carousel .owl-item .tweet-user {
     display: flex;
     flex-direction: column;
 }

 .owl-carousel .owl-item .tweet-user-name a {
     font-weight: bold;
     color: white;
     display: block;
     margin-bottom: 5px;
 }

 .owl-carousel .owl-item .tweet-username a:first-of-type {
     color: rgb(88, 100, 112);
 }

 .owl-carousel .owl-item .tweet-follow {
     font-weight: bold;
 }

 .owl-carousel .owl-item .tweet-body {
     border-left: 2px solid rgb(66, 83, 100);
     margin-left: 30px;
     padding-left: 30px;
     line-height: 1.3;
 }

 .owl-carousel .owl-item .tweet-body p {
     margin-bottom: 15px;
 }

 .owl-carousel .owl-item .tweet-video {
     position: relative;
     cursor: pointer;
 }

 .owl-carousel.owl-loaded .owl-item .tweet-container .tweet-video video {
     width: 100%;
     border-radius: 20px;
 }

 .owl-carousel .owl-item .tweet-video .play-button {
     width: 70px;
     position: absolute;
     z-index: 1;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     display: none;
     transition: 0.1s;
     height: auto;
 }

 .owl-carousel .owl-item .tweet-video .play-button:hover {
     filter: brightness(90%) contrast(1.3);
 }

 .owl-carousel .owl-item .tweet-video a {
     position: absolute;
     z-index: 2;
     padding: 10px 20px;
     border-radius: 18px;
     background-color: rgb(16, 22, 29);
     top: 10px;
     right: 10px;
     font-weight: bold;
     color: white;
     transition: 0.2s;
 }

 .owl-carousel .owl-item .tweet-video a:hover {
     background-color: rgb(34, 41, 48);
     text-decoration: none;
 }

 .watch-on-twitter {
     display: none;
 }


 .owl-carousel .owl-item .play-button.show,
 .watch-on-twitter.show {
     display: block;
 }

 .owl-carousel .owl-item .tweet-full-conversation img {
     height: 40px;
     margin: 5px 10px;
 }

 .owl-carousel .owl-item .tweet-date {
     margin-top: 10px;
     font-size: 14px;
 }

 .owl-carousel .owl-item .tweet-date a {
     color: rgb(139, 152, 165)
 }

 .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item #compilados-y-subtitulados .apt-vid .tweet-container {
     margin: auto;
 }

 #compilados-y-subtitulados .apt-vid .tweet-author-name {
     color: white;
 }

 #compilados-y-subtitulados .apt-vid .tweet-embed {
     background-color: rgb(21, 32, 43);
     color: white;
 }

 #compilados-y-subtitulados .apt-vid .tweet-embed .tweet-author {
     margin-right: auto;
 }

 #compilados-y-subtitulados .apt-vid .tweet-embed blockquote a {
     color: rgb(107, 201, 251);
     text-decoration: none;
 }

 #compilados-y-subtitulados .apt-vid .tweet-embed .tweet-time {
     border-bottom: 1px solid white
 }

 #compilados-y-subtitulados .apt-vid .tweet-embed .tweet-time a {
     color: white;
 }

 #compilados-y-subtitulados .apt-vid .tweet-embed circle {
     transform: scale(0.5) translate(50%, 50%);
 }

 /* === SECCIÓN CONTACTO === */

 #seccion-contacto {
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: black;
     color: white;
     border-top: 1px solid rgba(128, 128, 128, 0.27);
     min-height: 90vh;
     min-height: calc(var(--vh, 1vh) * 90);
     text-align: center;
     padding: 50px;
 }

 #seccion-contacto h2 {
     text-transform: uppercase;
     padding: 30px;
     font-size: 70px;
     font-weight: normal;
 }

 /* = Redes sociales = */

 #rrss ul::before {
     display: block;
     content: "";
     width: 120%;
     border-top: 3px solid black;
     position: absolute;
     left: -10%;
     top: -20px;
 }

 #rrss ul::after {
     display: block;
     content: "";
     width: 120%;
     border-bottom: 3px solid black;
     position: absolute;
     bottom: -20px;
     left: -10%;
 }

 #rrss ul {
     margin-top: 20px;
     display: flex;
     position: relative;
     margin-bottom: 30px;
 }

 #rrss li {
     font-size: 7vw;
     margin-right: 2vw;
 }

 #rrss li:last-of-type {
     margin-right: 0;
 }

 #rrss i {
     color: white;
 }

 #rrss li:hover i {
     color: black;
     transform: scale(1.2);
 }

 #rrss li:hover a {
     background-color: white;
 }

 /* = Formulario = */

 #contact-form label {
     display: block;
     margin-top: 20px;
     letter-spacing: 1px;
 }

 #contact-form .formulario {
     display: block;
     margin: 0 auto;
     width: 510px;
     max-width: 100vw;
 }

 #contact-form {
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 #contact-form input,
 #contact-form textarea {
     border: 2px solid #f6f6f6;
     padding: 10px;
     margin-top: 5px;
     font-size: 4vw;
     font-family: "Quicksand", "Century Gothic";
     font-weight: 600;
 }

 #contact-form textarea {
     height: 150px;
     margin-bottom: 50px;
 }

 #captchaHeading {
     margin-top: 20px;
     font-size: 4vw;
 }

 #captcha {
     letter-spacing: 5px;
     margin: auto;
     display: block;
     border: 1px solid white;
     margin: 20px;
     padding-top: 30px;
     width: 100%;
 }


 #contact-form #refreshButton {
     width: 200px;
     min-width: auto;
     background: none;
     color: white;
     border: none;
     padding: 5px;
     cursor: pointer;
     width: 70%;
 }

 #contact-form #refreshButton:hover {
     text-decoration: underline;
 }

 .incorrectCaptcha {
     color: #FF0000;
 }

 .formulario #contact-form #submit {
     -webkit-appearance: none;
     -webkit-border-radius: 0px;
     display: block;
     border: 2px solid white;
     margin-top: 70px;
     cursor: pointer;
     padding: 30px;
     font-size: 4vw;
     background-color: white;
     color: black;

 }

 .formulario #contact-form #submit.disabled {
     opacity: 0.2;
     cursor: default;
 }

 #contact-form #submit:hover {
     background-color: black;
     color: white;
 }

 .formulario #contact-form #submit.disabled:hover {
     background-color: white;
     color: black;
 }

 /* = Fin formulario = */

 @media(orientation: landscape) {


     body {
         background-color: white;
     }


     #index {
         overflow: hidden
     }

     .galeria-slider-h {
         display: flex !important;
     }

     .galeria-slider-v,
     .galeria-slider-b {
         display: none !important;
     }

     .listado-principal .texto {
         display: none;
     }

     .mensaje-icono,
     #logo,
     #boton-menu {
         transform: scale(1);
     }

     #boton-contacto .languages {
         flex-direction: row;
         padding-bottom: 2px;
         font-size: 2rem;
         line-height: 2rem;
     }

     #boton-contacto .languages .lang-button {
         margin: auto 5px;
         font-size: 2rem;
     }

     #encabezado .lang-button::after {
         top: 80%;
     }

     .formulario {
         width: 50%;
         max-width: 800px;
     }

     #contact-form {
         width: 100%;
     }

     #contact-form label {
         margin: 50px auto 10px auto;
     }

     #contact-form label,
     #contact-form input,
     #contact-form textarea,
     #captchaHeading {
         font-size: 2rem;
     }

     #contact-form input,
     #contact-form textarea {
         width: 100%;
     }

     #captchaHeading {
         margin-top: 40px;
     }

     #captcha,
     #textBox,
     #refreshButton {
         width: 50%;
         text-align: center;
     }

     .formulario #contact-form #textBox {
         width: 50%;
     }

     #captcha {
         padding-top: 20px;
     }

     .formulario #contact-form #submit {
         font-size: 2rem;
         width: 70%;
     }


 }

 @media(orientation: landscape) and (max-height: 700px) {

     #menu .submenu li {
         font-size: 3vh !important;
         padding-bottom: 8vh !important;
     }

     .mensaje-icono,
     #logo,
     #boton-menu {
         transform: scale(1);
     }

     #compilados-y-subtitulados .instagram-media {
         padding: 0 100px;
         background-color: rgba(0, 0, 0, 0);
         border: none !important;
         max-width: 300px !important;
         margin: auto !important;
     }

     .apt-vid .texto {
         display: none;
     }
 }

 @media(min-height: 600px) and (max-height: 900px) {

     #compilados-y-subtitulados .twitter-tweet {
         max-width: 300px !important
     }
 }

 @media(min-width: 600px) and (orientation: landscape),
 (min-width: 1200px) and (orientation: portrait) {

     /* === MENU === */

     #menu {
         flex-direction: row;
     }

     .body #menu {
         flex-direction: row;
         top: 10vh;
         top: calc(var(--vh, 1vh) * 10);
         height: 90vh;
         height: calc(var(--vh, 1vh) * 90);
     }

     /* botones menu */

     .elemento-menu {
         flex-basis: 0;
     }

     /* texto elementos menu */

     .elemento-menu > span {
         font-size: 3rem;
         padding: 0;
     }

     .elemento-menu > span > span,
     .elemento-menu:hover > span,
     .elemento-menu:hover > span > span:first-of-type {
         font-size: 3rem;
     }

     /* === CLICKED === */

     /* texto elementos menu */

     .elemento-menu.clicked {
         flex-grow: 1;
     }

     /* submenu */

     .submenu {
         padding: 15px;
         font-size: 3rem;
     }

     .submenu ul {
         margin-top: 10px;
         justify-content: center;
     }

     #menu .submenu li {
         font-size: 2rem;
         width: 79%;
         height: auto;
         padding-bottom: 70px;
     }

     /* === ENCABEZADO === */

     /* = página principal = */

     #index #encabezado {
         width: 100vw;
         padding: 0 5vw;
     }

     /* = resto de páginas = */

     .mensaje-icono,
     #logo,
     #boton-menu {
         transform: scale(1);
     }

     #encabezado {
         justify-content: space-between;
         width: 90vw;
     }

     #logo {
         max-width: 300px;
     }

     #boton-contacto > a {
         margin-right: 25px;
     }

     #boton-contacto,
     #boton-menu {
         position: static;
         display: flex;
         align-items: center;
     }

     #encabezado #boton-contacto .mensaje-icono {
         width: 80%;
     }

     #boton-menu img {
         width: 80%;
     }

     #boton-menu .menu-flecha {
         width: 50%;
     }

     /* === FIN ENCABEZADO === */

     /* === PÁGINA COMPLETA === */

     .intro-texto {
         height: 90vh;
         height: calc(var(--vh, 1vh) * 90);
         display: flex;
         flex-direction: column;
         justify-content: center;
         position: fixed;
         width: 50%;
         right: 0;
         padding: 5%;
         text-align: right;
         background-color: white;
     }

     .intro-texto::before {
         display: block;
         width: 50%;
         content: "";
         border-top: 3px solid rgba(0, 0, 0, 0.45);
         margin-left: auto;
         margin-bottom: 20px;
     }

     .intro-texto::after {
         display: block;
         width: 50%;
         content: "";
         border-top: 3px solid rgba(0, 0, 0, 0.45);
         margin-left: auto;
         margin-top: 20px;
     }

     .intro-texto h2 {
         text-transform: uppercase;
         font-size: 4rem;
         font-weight: normal;
         margin-bottom: 20px;
     }

     .intro-texto p {
         width: 60%;
         margin-left: auto;
         margin-bottom: 20px;
         line-height: 2.2rem;
     }

     .intro-texto p:last-of-type {
         margin-bottom: 0;
     }

     .listado-principal .texto .detalles:first-of-type {
         font-size: 20px;
     }

     .listado-principal .texto .detalles:last-of-type {
         font-size: 15px;
     }

     .listado-principal li.show span::after {
         border: none;
     }


     /* === LISTADO FOTO/VIDEO/OTROS === */

     .listado-principal {
         font-size: 1.5rem;
         position: relative;
         height: 90vh;
         height: calc(var(--vh, 1vh) * 90);
         flex-wrap: wrap;
         color: white;
     }

     .listado-principal li {
         width: 50%;
         height: 10px;
         order: 0;
         font-size: 1vw;
         transition: 0s;
     }

     .listado-principal li.hide {
         order: 0;
         height: 10px;
         z-index: 4
     }

     .listado-principal li.show {
         order: 2;
         top: 0;
         height: 90vh;
         height: calc(var(--vh, 1vh) * 90);
         margin-top: 0;
         position: absolute;
         z-index: 3;
         width: 100vw;
     }

     .listado-principal li .owl-carousel,
     .listado-principal li iframe,
     .listado-principal li embed {
         opacity: 0;
         visibility: hidden;
     }

     .listado-principal li.show .owl-carousel,
     .listado-principal li.show iframe,
     .listado-principal li.show embed {
         visibility: visible;
         opacity: 1;
         transition-duration: 0.2s;
     }


     /* = Owl Carousel = */

     .owl-carousel.owl-loaded > .owl-stage-outer {
         height: 90%;
     }

     .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage {
         height: 100%;
     }

     .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item {
         height: 100%;
         opacity: 0;
         visibility: hidden;
         transition: 0.2s;
         z-index: -3
     }

     .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > div {
         height: 100%;
         width: 100vw !important;
     }

     .owl-theme .owl-nav {
         margin-top: 5px;
     }

     .owl-carousel.owl-loaded {
         height: 10%;
         flex-grow: 1;
         flex-basis: 0;
         flex-shrink: 1;
     }

     .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item iframe {
         visibility: hidden;
         opacity: 0;
         transition: 0.2s;
     }

     .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item.active iframe {
         visibility: visible;
         opacity: 1;
         /*         aspect-ratio: 16/9;*/
     }

     .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item.active {
         height: 100%;
         width: 100vw !important;
         visibility: visible;
         z-index: auto;
     }

     .owl-item.cloned {
         opacity: 0;
         transition: 0.2s;
     }

     .owl-item.active {
         opacity: 1 !important;
     }

     /* === PÁGINA VÍDEO === */

     .body-video .listado-principal li.show h2 {
         width: auto;
         margin-left: 0;
     }

     /* === PÁGINA CONTACTO === */

     #seccion-contacto h2 {
         font-size: 30px;
     }

     #rrss li {
         font-size: 50px;
     }

     .formulario form {
         color: white;
         margin-bottom: 10vh;
     }

     #logo-design .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > div > img {
         border: 1px solid white;
         height: 500px;
     }

     #web-dev #websites {
         height: calc(var(--vh, 1vh) * 80);
     }
 }

 @media(min-width: 1000px) and (orientation: landscape),
 (min-width: 1500px) and (orientation: portrait) {

     .mensaje-icono,
     #logo,
     #boton-menu {
         transform: scale(1);
     }

     #site-logo #logo {
         transform: none
     }

     .listado-principal li.show {
         position: relative;
         width: 50%
     }

     .listado-principal .texto {
         display: flex;
     }

     .listado-principal li.show .vid-cont {
         width: 100%;
         position: relative;
         height: auto;
     }

     .listado-principal .apt-vid {
         flex-flow: column wrap;
         overflow: hidden;
     }

     .galeria-slider-h,
     .galeria-slider-v {
         display: none !important;
     }

     .galeria-slider-b {
         display: flex !important;
     }

 }

 @media(min-aspect-ratio: 16/9) {


     #logo,
     #boton-menu {
         transform: scale(0.7);
     }

 }

 @media(orientation: portrait) {

     .formulario {
         width: 80vw;
     }

     .formulario > form,
     .formulario > form > input,
     .formulario > form > textarea {
         width: 100%;
     }

     .formulario > #contact-form > label {
         font-size: 4vw;
         margin: 50px auto 20px auto;
     }

     #captchaHeading {
         margin-top: 4vh;
     }

     .formulario > form > input {
         font-size: 3vw;
         height: auto;
     }

     .formulario > form > textarea {
         font-size: 3vw;
         height: 300px;
     }



     #submit {
         height: auto;
         margin: 4vh 0;
         align-items: center;
         transform: scale(0.8)
     }

 }