'); } section.container-hero .hero h1 { display: block; justify-self: center; width: 40rem; align-self: end; color: #aaaaaa; /* color: @light-color; */ font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: 55px; text-align: center; line-height: calc(1); z-index: 1; } section.container-hero .hero h1 strong { color: #ebebe9; } section.container-hero .hero p { display: block; justify-self: center; width: 30rem; color: #aaaaaa; /* color: @white-color; */ font-size: 16.8px; font-family: 'Archivo Expanded Light', sans-serif; text-align: center; z-index: 1; } section.container-hero .hero p strong { color: #ebebe9; } section.container-hero .hero a { display: flex; flex-direction: column; align-items: center; justify-self: center; /* width: 80px; height: 90px; */ fill: none; stroke: #ebebe9; stroke-width: 2px; z-index: 1; } section.container-hero .hero .arrow-hero { padding: 12px; } section.container-hero .hero .arrow-hero svg { transition: all 0.5s ease-in-out; } section.container-hero .hero .arrow-hero:hover { transform: scale(1.1); transition: all 0.5s ease-in-out; } section.container-hero .hero .arrow-hero:hover p { display: block; margin-bottom: 24px; transition: all 0.5s ease-in-out; } section.container-hero .hero .overlay-hero { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; overflow: hidden; } section.container-hero .hero .overlay-hero:hover a { background-color: transparent; } section.container-hero .hero .overlay-hero a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 120px; /* height: auto; */ border-radius: 45px; transition: all 0.5s ease-in-out; opacity: .2; z-index: 1; animation: move 10s infinite; animation-duration: 10s; } section.container-hero .hero .overlay-hero a img { border-radius: 45px; animation: blur 6s infinite; } section.container-hero .hero .overlay-hero a img:hover { filter: blur(0); animation: none; } section.container-hero .hero .overlay-hero a:nth-child(1) img { animation-delay: 0s; } section.container-hero .hero .overlay-hero a:nth-child(2) img { animation-delay: 2s; } section.container-hero .hero .overlay-hero a:nth-child(3) img { animation-delay: 4s; } section.container-hero .hero .overlay-hero a:nth-child(4) img { animation-delay: 6s; } section.container-hero .hero .overlay-hero a:nth-child(5) img { animation-delay: 8s; } section.container-hero .hero .overlay-hero a:nth-child(6) img { animation-delay: 10s; } @keyframes blur { 0% { filter: blur(0); transform: scale(1); } 50% { filter: blur(1px); transform: scale(0.98); } 100% { filter: blur(0); transform: scale(1); } } section.container-hero .hero .overlay-hero a:hover { opacity: 1; transition: all 0.5s ease-in-out; z-index: 2; } @keyframes move { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.5%) scale(1.01); } 100% { transform: translateY(0) scale(1); } } section.container-hero .hero .overlay-hero img:hover { transform: scale(1.2); width: 155px; transition: all 0.5s ease-in-out; } section.container-hero .hero .overlay-hero a:nth-child(1) { left: 20%; top: 11%; } section.container-hero .hero .overlay-hero a:nth-child(1) img { width: 150px; } section.container-hero .hero .overlay-hero a:nth-child(1):hover, section.container-hero .hero .overlay-hero a:nth-child(2):hover { top: 12%; transition: all 0.5s ease-in-out; } section.container-hero .hero .overlay-hero a:nth-child(2) { top: 12%; left: auto; right: 10%; animation-duration: 12s; } section.container-hero .hero .overlay-hero a:nth-child(2) img { width: 150px; } section.container-hero .hero .overlay-hero a:nth-child(3) { top: auto; bottom: 15%; left: 2; } section.container-hero .hero .overlay-hero a:nth-child(3) img { width: 240px; } section.container-hero .hero .overlay-hero a:nth-child(3):hover { left: 2%; } section.container-hero .hero .overlay-hero a:nth-child(4) { top: auto; bottom: 0%; left: 25%; right: auto; animation-duration: 15s; } section.container-hero .hero .overlay-hero a:nth-child(4) img { width: 160px; } section.container-hero .hero .overlay-hero a:nth-child(4):hover { bottom: 5%; } section.container-hero .hero .overlay-hero a:nth-child(5) { top: auto; bottom: 1%; left: auto; right: 20%; animation-duration: 8s; } section.container-hero .hero .overlay-hero a:nth-child(5) img { width: 160px; } section.container-hero .hero .overlay-hero a:nth-child(5):hover { bottom: 5%; } section.container-hero .hero .overlay-hero a:nth-child(6) { top: auto; bottom: 15%; left: auto; right: -2%; animation-duration: 14s; } section.container-hero .hero .overlay-hero a:nth-child(6) img { width: 180px; } section.container-hero .hero .overlay-hero a:nth-child(6):hover { right: 2%; } /* ********************************************** */ /* Projects */ section.projects { overflow: hidden; } section.projects h2:first-child { display: none; } section.projects .grid-projects { display: grid; grid-template-columns: repeat(10, 10vw); grid-template-rows: 55px repeat(12, 10vw); /* .project-item:hover ~ :not(.project-item:hover) { opacity: 0.5; } */ /* .project-item:hover ~ :not(.project-item:hover) { opacity: 0.5; } */ /* .project-item h3, .project-item p { width: calc(10vw * 3); position: absolute; top: 110%; margin: 0; padding: 0; } .project-item p { position: absolute; top: 130%; } */ /* Corresponde a las imágenes */ /* Corresponde a los textos */ /* Líneas/guías de fondo */ } section.projects .grid-projects .project-item { position: relative; width: 100%; height: 100%; padding: 12px; background-color: #ebebe9; background-size: cover; background-position: center; border-radius: 15px; transition: all 0.5s ease-in-out; box-sizing: border-box; } section.projects .grid-projects .project-item img { display: none; } section.projects .grid-projects .project-item.text { position: relative; width: 100%; height: 100%; padding: 0; background-color: initial; border-radius: none; transition: all 0.5s ease-in-out; box-sizing: border-box; } section.projects .grid-projects .project-item.text h3 { color: #ebebe9; } section.projects .grid-projects .project-item.text p { color: #aaaaaa; font-family: 'Archivo Expanded ExtraLight', sans-serif; } section.projects .grid-projects .project-item:hover { background-color: #0142fe; transition: all 0.5s ease-in-out; transform: scale(1.4); z-index: 2; cursor: pointer; } section.projects .grid-projects .project-item.text:hover { background-color: initial; transition: all 0.5s ease-in-out; transform: none; cursor: auto; } section.projects .grid-projects .project-item:nth-child(1) { grid-column: 7 / span 3; grid-row: 2 / span 2; background-image: url('https://felixnieto.es/images/p-tape.jpg'); } section.projects .grid-projects .project-item:nth-child(2) { grid-column: 2 / span 4; grid-row: 3 / span 2; background-image: url('https://felixnieto.es/images/p-poemario3.jpg'); } section.projects .grid-projects .project-item:nth-child(3) { grid-column: 2 / span 1; grid-row: 7 / span 1; background-image: url('https://felixnieto.es/images/p-rdelaj.jpg'); } section.projects .grid-projects .project-item:nth-child(3):hover { transform: scale(3); } section.projects .grid-projects .project-item:nth-child(4) { grid-column: 6 / span 2; grid-row: 6 / span 3; background-image: url('https://felixnieto.es/images/p-nution4.jpg'); } section.projects .grid-projects .project-item:nth-child(5) { grid-column: 9 / span 1; grid-row: 5 / span 2; width: 100%; background-image: url('https://felixnieto.es/images/p-chollo.jpg'); } section.projects .grid-projects .project-item:nth-child(5):hover { grid-column: 8 / span 2; grid-row: 5 / span 2; width: 120%; background-size: 130%; } section.projects .grid-projects .project-item:nth-child(6) { grid-column: 9 / span 1; grid-row: 8 / span 1; background-image: url('https://felixnieto.es/images/p-slowlife.jpg'); } section.projects .grid-projects .project-item:nth-child(6):hover { transform: scale(3); background-size: 130%; } section.projects .grid-projects .project-item:nth-child(7) { grid-column: 8 / span 2; grid-row: 10 / span 2; background-image: url('https://felixnieto.es/images/p-abastores.jpg'); } section.projects .grid-projects .project-item:nth-child(8) { grid-column: 5 / span 1; grid-row: 10 / span 2; background-image: url('https://felixnieto.es/images/p-cuartodetono2.jpg'); } section.projects .grid-projects .project-item:nth-child(8):hover { grid-column: 4 / span 2; } section.projects .grid-projects .project-item:nth-child(9) { grid-column: 2 / span 2; grid-row: 9 / span 3; background-image: url('https://felixnieto.es/images/p-freepik.jpg'); } section.projects .grid-projects .project-item:nth-child(10) { grid-column: 6 / span 1; grid-row: 12 / span 1; background-image: url('https://felixnieto.es/images/p-madblading2.jpg'); } section.projects .grid-projects .project-item:nth-child(10):hover { transform: scale(3); } section.projects .grid-projects .project-item:nth-child(11) { grid-column: 7 / span 3; grid-row: 4 / span 1; } section.projects .grid-projects .project-item:nth-child(12) { grid-column: 2 / span 4; grid-row: 5 / span 1; } section.projects .grid-projects .project-item:nth-child(13) { grid-column: 2 / span 4; grid-row: 8 / span 1; } section.projects .grid-projects .project-item:nth-child(14) { grid-column: 6 / span 2; grid-row: 9 / span 1; } section.projects .grid-projects .project-item:nth-child(15) { grid-column: 9 / span 2; grid-row: 7 / span 1; } section.projects .grid-projects .project-item:nth-child(16) { grid-column: 9 / span 2; grid-row: 9 / span 1; } section.projects .grid-projects .project-item:nth-child(17) { grid-column: 8 / span 2; grid-row: 12 / span 1; } section.projects .grid-projects .project-item:nth-child(18) { grid-column: 6 / span 2; grid-row: 10 / span 1; padding: 0 12px; } section.projects .grid-projects .project-item:nth-child(19) { grid-column: 2 / span 2; grid-row: 12 / span 1; } section.projects .grid-projects .project-item:nth-child(20) { grid-column: 6 / span 2; grid-row: 13 / span 1; } section.projects .grid-projects .line-projects { margin: 50px; border-radius: 15px; opacity: 0.2; z-index: -2; transition: all 0.5s ease-in-out; } section.projects .grid-projects .opacity-line { transition: all 0.5s ease-in-out; opacity: 0.05; z-index: -2; } section.projects .grid-projects .line-projects:nth-of-type(1) { grid-column: 2 / span 6; grid-row: 2 / span 3; border-top: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; border-bottom-left-radius: 0; border-top-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(2) { grid-column: 2 / span 6; grid-row: 4 / span 4; border-left: 2px solid #aaaaaa; border-bottom: 2px solid #aaaaaa; border-top-left-radius: 0; border-bottom-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(3) { grid-column: 7 / span 4; grid-row: 5 / span 3; border-top: 2px solid #aaaaaa; border-right: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; border-radius: 15px 15px 0 0; } section.projects .grid-projects .line-projects:nth-of-type(4) { grid-column: 9 / span 2; grid-row: 7 / span 2; margin-top: calc(45px); border-bottom: 2px solid #aaaaaa; border-right: 2px solid #aaaaaa; border-top-right-radius: 0; border-bottom-left-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(5) { grid-column: 2 / span 8; grid-row: 8 / span 4; border-bottom: 2px solid #aaaaaa; border-right: 2px solid #aaaaaa; border-bottom-right-radius: 0; border-top-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(6) { grid-column: 2 / span 5; grid-row: 11 / span 2; /* margin-right: 65px; */ border-bottom: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; border-top-left-radius: 0; border-bottom-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(7) { grid-column: 5 / span 2; grid-row: 12 / span 2; /* margin-top: 44px; */ margin-bottom: -10px; border-right: 2px solid #aaaaaa; border-top-right-radius: 0; border-bottom-right-radius: 0; } section.projects .grid-projects.project-page { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: initial; grid-auto-rows: 300px; gap: 10px; padding: 10px; padding-top: 88px; padding-bottom: 55px; border-bottom: 1px solid #0142fe; } section.projects .grid-projects.project-page .project-item { grid-column: span 1; grid-row: span 1; padding: 55px; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; overflow: hidden; z-index: 1; } section.projects .grid-projects.project-page .project-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); /* border-radius: @border-radius; */ z-index: -1; } section.projects .grid-projects.project-page .project-item + .text { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; z-index: 2; cursor: pointer; } section.projects .grid-projects.project-page .project-item + .text h3, section.projects .grid-projects.project-page .project-item + .text p { cursor: pointer; } section.projects .grid-projects.project-page .project-item:nth-child(1), section.projects .grid-projects.project-page .project-item:nth-child(5), section.projects .grid-projects.project-page .project-item:nth-child(6), section.projects .grid-projects.project-page .project-item:nth-child(8) { grid-column: span 1; grid-row: span 1; width: 100%; background-size: cover; cursor: pointer; } section.projects .grid-projects.project-page .project-item:nth-child(1) h3, section.projects .grid-projects.project-page .project-item:nth-child(5) h3, section.projects .grid-projects.project-page .project-item:nth-child(6) h3, section.projects .grid-projects.project-page .project-item:nth-child(8) h3, section.projects .grid-projects.project-page .project-item:nth-child(1) p, section.projects .grid-projects.project-page .project-item:nth-child(5) p, section.projects .grid-projects.project-page .project-item:nth-child(6) p, section.projects .grid-projects.project-page .project-item:nth-child(8) p { cursor: pointer; } section.projects .grid-projects.project-page .project-item:nth-child(5) { grid-row: span 2; background-size: cover; } section.projects .grid-projects.project-page .project-item:nth-child(9) { grid-column: span 2; } section.projects .grid-projects.project-page .project-item:hover { transform: scale(1.01); } @media screen and (max-width: 1140px) { section.projects { overflow: hidden; } section.projects h2:first-child { display: none; } section.projects .grid-projects { /* Corresponde a las imágenes */ /* .project-item:nth-child(7):hover { background-position: -30px 50%; } */ /* Corresponde a los textos */ /* Líneas/guías de fondo */ } section.projects .grid-projects .tag { display: none; } section.projects .grid-projects .project-item:nth-child(1) { grid-column: 7 / span 3; grid-row: 2 / span 2; background-image: url('https://felixnieto.es/images/p-tape.jpg'); } section.projects .grid-projects .project-item:nth-child(2) { grid-column: 2 / span 4; grid-row: 2 / span 2; background-image: url('https://felixnieto.es/images/p-poemario3.jpg'); } section.projects .grid-projects .project-item:nth-child(3) { grid-column: 2 / span 2; grid-row: 6 / span 2; background-image: url('https://felixnieto.es/images/p-rdelaj.jpg'); } section.projects .grid-projects .project-item:nth-child(3):hover { transform: scale(1.5); } section.projects .grid-projects .project-item:nth-child(4) { grid-column: 5 / span 2; grid-row: 5 / span 2; background-image: url('https://felixnieto.es/images/p-nution4.jpg'); } section.projects .grid-projects .project-item:nth-child(5) { grid-column: 8 / span 3; grid-row: 5 / span 2; width: 100%; background-image: url('https://felixnieto.es/images/p-chollo.jpg'); } section.projects .grid-projects .project-item:nth-child(5):hover { grid-column: 8 / span 3; grid-row: 5 / span 2; width: 120%; background-size: cover; /* background-position: -35px 50%; */ } section.projects .grid-projects .project-item:nth-child(6) { grid-column: 8 / span 2; grid-row: 8 / span 1; background-image: url('https://felixnieto.es/images/p-slowlife.jpg'); background-size: cover; background-position: 0%; } section.projects .grid-projects .project-item:nth-child(6):hover { grid-column: 8 / span 2; grid-row: 7 / span 2; transform: scale(1.5); background-size: cover; background-position: 0%; } section.projects .grid-projects .project-item:nth-child(7) { grid-column: 8 / span 3; grid-row: 10 / span 2; background-image: url('https://felixnieto.es/images/p-abastores.jpg'); } section.projects .grid-projects .project-item:nth-child(8) { grid-column: 5 / span 2; grid-row: 8 / span 2; background-image: url('https://felixnieto.es/images/p-cuartodetono2.jpg'); } section.projects .grid-projects .project-item:nth-child(8):hover { grid-column: 5 / span 2; } section.projects .grid-projects .project-item:nth-child(9) { grid-column: 2 / span 2; grid-row: 9 / span 3; background-image: url('https://felixnieto.es/images/p-freepik.jpg'); } section.projects .grid-projects .project-item:nth-child(10) { grid-column: 5 / span 2; grid-row: 11 / span 2; background-image: url('https://felixnieto.es/images/p-madblading2.jpg'); } section.projects .grid-projects .project-item:nth-child(10):hover { transform: scale(1.5); } section.projects .grid-projects .project-item:nth-child(11) { grid-column: 7 / span 3; grid-row: 4 / span 1; } section.projects .grid-projects .project-item:nth-child(12) { grid-column: 2 / span 4; grid-row: 4 / span 1; } section.projects .grid-projects .project-item:nth-child(13) { grid-column: 2 / span 2; grid-row: 8 / span 1; } section.projects .grid-projects .project-item:nth-child(14) { grid-column: 5 / span 2; grid-row: 7 / span 1; } section.projects .grid-projects .project-item:nth-child(15) { grid-column: 8 / span 1; grid-row: 7 / span 1; } section.projects .grid-projects .project-item:nth-child(16) { grid-column: 9 / span 2; grid-row: 9 / span 1; } section.projects .grid-projects .project-item:nth-child(17) { grid-column: 8 / span 2; grid-row: 12 / span 1; } section.projects .grid-projects .project-item:nth-child(18) { grid-column: 6 / span 2; grid-row: 9 / span 1; padding: 0 12px; } section.projects .grid-projects .project-item:nth-child(19) { grid-column: 2 / span 2; grid-row: 12 / span 1; } section.projects .grid-projects .project-item:nth-child(20) { grid-column: 6 / span 2; grid-row: 12 / span 1; } section.projects .grid-projects .line-projects { margin: 50px; border-radius: 15px; opacity: 0.2; z-index: -2; transition: all 0.5s ease-in-out; } section.projects .grid-projects .opacity-line { transition: all 0.5s ease-in-out; opacity: 0.05; z-index: -2; } section.projects .grid-projects .line-projects:nth-of-type(1) { grid-column: 3 / span 6; grid-row: 2 / span 2; border-top: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; border-bottom-left-radius: 0; border-top-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(2) { grid-column: 3 / span 4; grid-row: 3 / span 4; border-left: 2px solid #aaaaaa; border-bottom: 2px solid #aaaaaa; border-top-left-radius: 0; border-bottom-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(3) { grid-column: 6 / span 4; grid-row: 5 / span 2; border-top: 2px solid #aaaaaa; border-right: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; border-radius: 15px 15px 0 0; } section.projects .grid-projects .line-projects:nth-of-type(4) { grid-column: 9 / span 2; grid-row: 6 / span 3; margin-top: calc(45px); border-bottom: 2px solid #aaaaaa; border-right: 2px solid #aaaaaa; border-top-right-radius: 0; border-bottom-left-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(5) { grid-column: 2 / span 7; grid-row: 8 / span 3; border-bottom: 2px solid #aaaaaa; border-right: 2px solid #aaaaaa; border-bottom-right-radius: 0; border-top-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(6) { grid-column: 2 / span 5; grid-row: 11 / span 1; /* margin-right: 65px; */ border-bottom: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; border-top-left-radius: 0; border-bottom-right-radius: 0; } section.projects .grid-projects .line-projects:nth-of-type(7) { grid-column: 5 / span 2; grid-row: 12 / span 2; /* margin-top: 44px; */ margin-bottom: -10px; border-right: 2px solid #aaaaaa; border-top-right-radius: 0; border-bottom-right-radius: 0; } section.projects .grid-projects { /* display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: @title-font repeat(39, 150px); gap: 10px; padding: 10px; */ /* .project-item:hover, .project-item:nth-child(1):hover, .project-item:nth-child(2):hover, .project-item:nth-child(3):hover, .project-item:nth-child(4):hover, .project-item:nth-child(5):hover, .project-item:nth-child(6):hover, .project-item:nth-child(7):hover, .project-item:nth-child(8):hover, .project-item:nth-child(9):hover, .project-item:nth-child(10):hover, .project-item:nth-child(11):hover, .project-item:nth-child(12):hover, .project-item:nth-child(13):hover, .project-item:nth-child(14):hover, .project-item:nth-child(15):hover, .project-item:nth-child(16):hover, .project-item:nth-child(17):hover, .project-item:nth-child(18):hover, .project-item:nth-child(19):hover, .project-item:nth-child(20):hover { background-color: @accent-color; transition: @transition; transform: scale(1.04); z-index: 2; cursor: pointer; } & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) { grid-column: span 1; grid-row: span 4; } & .line-projects, & .line-projects:nth-of-type(1), & .line-projects:nth-of-type(2), & .line-projects:nth-of-type(3), & .line-projects:nth-of-type(4), & .line-projects:nth-of-type(5), & .line-projects:nth-of-type(6), & .line-projects:nth-of-type(7) { display: none; } & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) { display: none; } */ } section.projects .grid-projects.project-page { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(10, 150px); grid-auto-rows: 300px; gap: 10px; padding: 10px; padding-top: 88px; padding-bottom: 55px; border-bottom: 1px solid #0142fe; } section.projects .grid-projects.project-page .project-item:nth-child(1), section.projects .grid-projects.project-page .project-item:nth-child(2), section.projects .grid-projects.project-page .project-item:nth-child(3), section.projects .grid-projects.project-page .project-item:nth-child(4), section.projects .grid-projects.project-page .project-item:nth-child(5), section.projects .grid-projects.project-page .project-item:nth-child(6), section.projects .grid-projects.project-page .project-item:nth-child(7), section.projects .grid-projects.project-page .project-item:nth-child(8), section.projects .grid-projects.project-page .project-item:nth-child(9), section.projects .grid-projects.project-page .project-item:nth-child(10), section.projects .grid-projects.project-page .project-item:nth-child(11), section.projects .grid-projects.project-page .project-item:nth-child(12), section.projects .grid-projects.project-page .project-item:nth-child(13), section.projects .grid-projects.project-page .project-item:nth-child(14), section.projects .grid-projects.project-page .project-item:nth-child(15), section.projects .grid-projects.project-page .project-item:nth-child(16), section.projects .grid-projects.project-page .project-item:nth-child(17), section.projects .grid-projects.project-page .project-item:nth-child(18), section.projects .grid-projects.project-page .project-item:nth-child(19), section.projects .grid-projects.project-page .project-item:nth-child(20) { grid-column: span 1; grid-row: span 2; } section.projects .grid-projects.project-page .project-item:nth-child(1):hover, section.projects .grid-projects.project-page .project-item:nth-child(2):hover, section.projects .grid-projects.project-page .project-item:nth-child(3):hover, section.projects .grid-projects.project-page .project-item:nth-child(4):hover, section.projects .grid-projects.project-page .project-item:nth-child(5):hover, section.projects .grid-projects.project-page .project-item:nth-child(6):hover, section.projects .grid-projects.project-page .project-item:nth-child(7):hover, section.projects .grid-projects.project-page .project-item:nth-child(8):hover, section.projects .grid-projects.project-page .project-item:nth-child(9):hover, section.projects .grid-projects.project-page .project-item:nth-child(10):hover, section.projects .grid-projects.project-page .project-item:nth-child(11):hover, section.projects .grid-projects.project-page .project-item:nth-child(12):hover, section.projects .grid-projects.project-page .project-item:nth-child(13):hover, section.projects .grid-projects.project-page .project-item:nth-child(14):hover, section.projects .grid-projects.project-page .project-item:nth-child(15):hover, section.projects .grid-projects.project-page .project-item:nth-child(16):hover, section.projects .grid-projects.project-page .project-item:nth-child(17):hover, section.projects .grid-projects.project-page .project-item:nth-child(18):hover, section.projects .grid-projects.project-page .project-item:nth-child(19):hover, section.projects .grid-projects.project-page .project-item:nth-child(20):hover { transform: scale(1.01); } section.projects .grid-projects.project-page .project-item:nth-child(5):hover { width: initial; background-size: cover; /* background-position: center; */ } section.projects .grid-projects.project-page .project-item:nth-child(6):hover { transform: scale(1.01); background-size: cover; /* background-position: center; */ } section.projects .grid-projects.project-page .project-item:nth-child(7):hover { width: initial; background-size: cover; /* background-position: center; */ } section.projects .grid-projects.project-page .tag { display: block; } } /* ********************************************** */ /* Highlights */ section.highlight { display: flex; flex-direction: column; justify-content: space-around; height: calc(25rem); padding: 14px; } section.highlight h2 { font-size: 36px; color: #aaaaaa; } section.highlight h2 strong { color: #ffffff; } section.highlight p { width: 50%; color: #aaaaaa; font-size: 16.8px; } section.highlight p strong { color: #ffffff; } /* ********************************************** */ /* Services */ section.services { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 12px; background-color: #aaaaaa; } section.services h2 { margin-bottom: calc(165px); font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: calc(34.375px); } section.services .btn_toggle { margin-bottom: 18px; } section.services .contain_toggle { display: flex; justify-content: center; align-items: center; padding: 0 24px 0 0; /* margin-top: @mid-font; */ } section.services .contain_toggle p { width: 96%; padding: 0 24px 0 0; color: #161825; font-size: 16.36363636px; line-height: 1.2; } section.services .contain_toggle a { display: flex; justify-content: center; align-items: center; box-sizing: border-box; } section.services .contain_toggle a svg { width: 40px; height: 50px; margin-right: 20px; fill: none; stroke: #ebebe9; stroke-width: 2px; transform: rotate(-90deg); } section.services .contain_toggle a:hover svg { stroke: #ffffff; } section.services .contain_toggle .btn_services { width: 70%; background-color: #161825; border-radius: 15px; } section.services .contain_toggle .btn_services:hover { width: 70%; color: #ffffff; background-color: #0142fe; } /* ********************************************** */ /* FOOTER */ footer { position: relative; display: grid; align-items: center; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 20px 50px; gap: 10px; height: 20rem; margin-top: 18px; padding: 12px; background-color: #0142fe; overflow: hidden; justify-content: center; /* & .arrow-footer { width: 200px; height: 90px; grid-column: 4 / span 1; grid-row: 1 / span 1; .display-flex-center(); justify-content: end; justify-self: end; padding: 0 @xsmall-font; } */ } footer h2 { grid-column: 1 / span 2; grid-row: 1 / span 1; font-size: calc(36.66666667px); font-weight: 900; } footer .img-footer { grid-column: 4 / span 1; grid-row: 1 / span 1; width: 100%; height: auto; border-radius: 15px; } footer .arrow-footer:hover { width: 200px; height: 90px; justify-content: center; color: #ebebe9; /* padding: @mid-font @large-font; */ background-color: #0142fe; border-radius: 15px; transform: translateY(4px); box-shadow: 0 4px 0 #012898; } footer .arrow-footer:hover svg { stroke-width: 3px; } footer .arrow-footer:active, footer .arrow-footer:focus, footer .arrow-footer:target { color: #ffffff; transform: translateY(4px); box-shadow: 0 4px 0 #012898; transition: all 0.5s ease-in-out; } footer .arrow-footer p { position: relative; left: -25px; width: 0%; opacity: 0; } footer .arrow-footer:hover p { display: block; left: 0; width: 100%; margin-left: 10px; opacity: 1; transition: all 0.5s ease-in-out; } footer .arrow-footer:hover svg { width: 50px; height: 50px; margin-right: 10px; transition: all 0.5s ease-in-out; } footer .arrow-footer:hover { transform: scale(1.1); transition: all 0.5s ease-in-out; } footer svg { width: 80px; height: 90px; padding: 0 10px; transform: rotate(-90deg); fill: none; stroke: #ebebe9; stroke-width: 2px; } footer .email-footer { grid-column: 1 / span 1; grid-row: 1 / span 1; align-self: flex-start; padding-top: 12px; font-size: 48px; font-weight: 100; } footer .email-footer a { display: inline-block; width: 100%; margin-top: 18px; border: 1px solid #161825; } footer .email-footer a:hover { position: relative; display: block; color: #ffffff; border: 1px solid #161825; padding: 10px; transition: all 0.5s ease-in-out; } footer .box-webmap:nth-of-type(2) { grid-column: 1 / span 1; grid-row: 3 / span 1; } footer .box-webmap:nth-of-type(3) { grid-column: 3 / span 1; grid-row: 3 / span 1; } footer .box-webmap:nth-of-type(4) { grid-column: 4 / span 1; grid-row: 3 / span 1; } footer .box-webmap h3 { margin-bottom: 18px; padding-bottom: 10px; color: #aaaaaa; border-bottom: 2px solid #aaaaaa; font-size: 12px; } footer .box-webmap a { display: block; margin-bottom: 10px; color: #ebebe9; font-size: 12px; } footer .box-webmap a:hover, footer .legal p:hover, footer .legal a:hover { display: block; color: #ffffff; background-color: #161825; } footer .legal { grid-column: 1 / span 4; grid-row: 4 / span 1; display: grid; grid-template-columns: repeat(4, 25.3%); padding-top: 25px; padding-bottom: 25px; border-top: 1px solid #aaaaaa; } footer .legal, footer .legal p, footer .legal a { justify-items: start; font-size: 12px; color: #aaaaaa; text-align: center; } footer .legal p { color: #ffffff; } footer .overlay-footer { display: flex; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: .2; z-index: -1; } footer .line-overlay-footer { position: absolute; top: 0; bottom: 0; right: 0; top: 12.5rem; left: 0; display: block; width: 160%; height: 1px; margin: 0 -100px; background-color: #0142fe; z-index: 1; } footer .email-footer:hover .overlay-footer .line-overlay-footer { opacity: 0; height: 10px; transition: all 0.5s ease-in-out; animation-play-state: running; } .legal-article { padding: 110px 55px 55px 55px; } .legal-article h1 { font-size: 82.5px; font-family: 'Archivo Expanded ExtraLight', sans-serif; color: #aaaaaa; } .legal-article h2 { margin-top: 55px; font-size: 24px; font-family: 'Archivo Expanded ExtraLight', sans-serif; color: #aaaaaa; } .legal-article p, .legal-article li { font-family: 'Archivo Expanded ExtraLight', sans-serif; line-height: 1.5; } /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ABOUT */ section.aboutus { padding: 19.5rem 60px 30px 60px; } @media (max-width: 845px) { section.aboutus { padding: 11.5rem 30px 30px 30px; } } section.aboutus h1 { color: #aaaaaa; font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: 7vw; line-height: 1; } section.aboutus h1 strong { color: #ffffff; } section.aboutus h2, section.aboutus p, section.aboutus li { margin-top: 18px; color: #dcdcdc; font-family: 'Archivo Expanded ExtraLight', sans-serif; } section.aboutus h2 { font-size: 39.28571429px; font-weight: bold; text-decoration: underline; /* border-bottom: 5px solid @light-color; */ } section.aboutus p { color: #aaaaaa; font-size: 18px; line-height: 1.5; } .aboutus { background-attachment: scroll; background-size: 300%; background-position: center; background-repeat: no-repeat; background-blend-mode: color-burn; display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 15vh 25vw 40vw 5vw; } .aboutus .cover-aboutus { grid-column: 1 / span 3; grid-row: 1 / span 1; } .aboutus .item1-aboutus { grid-column: span 2; grid-row: span 2; } .aboutus .item2-aboutus { grid-column: 2 / span 2; grid-row: 3 / span 1; } .aboutus .item2-aboutus p { display: inline-block; width: 33.33333333rem; } .aboutus .item2-aboutus li { color: #ffffff; font-size: 39.28571429px; } .aboutus .item3-aboutus { grid-column: 1 / span 2; grid-row: 4 / span 1; } .aboutus .cover-aboutus .image-aboutus { position: absolute; top: 0; bottom: 0; left: 0; right: 0; top: 7rem; width: 10rem; height: 10rem; overflow: hidden; border-radius: 0 15px 15px 0; z-index: 0; } .aboutus .cover-aboutus .image-aboutus img { width: 100%; height: auto; position: absolute; } @media (max-width: 845px) { .aboutus .cover-aboutus .image-aboutus { top: 1rem; z-index: 2; } } /* ********************************************** */ /* PROCESS */ section.process { display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr 100px 1fr 1fr; grid-template-rows: 200px 100px 1fr; padding: 0 55px 55px 55px; background-color: #161825; } section.process p { font-size: 18px; } section.process .title-process { grid-column: 1 / span 4; grid-row: 1 / span 1; font-size: 36.66666667px; color: #aaaaaa; font-family: 'Archivo Expanded ExtraLight', sans-serif; text-decoration: underline; } section.process .text-process { grid-column: 1 / span 1; grid-row: 2 / span 1; align-self: flex-start; font-size: 18px; color: #dcdcdc; font-family: 'Archivo Expanded ExtraLight', sans-serif; } section.process .svg-process { display: flex; grid-column: 1 / span 1; grid-row: 3 / span 1; justify-self: center; height: 100%; stroke-width: 1px; stroke: #aaaaaa; animation: rotate-process 10s infinite; animation-timing-function: linear; z-index: 0; } section.process .svg-process:hover { animation-play-state: paused; } @keyframes rotate-process { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } section.process .list-process { grid-column: 3 / span 2; grid-row: 2 / span 2; align-self: flex-start; font-size: 39.28571429px; color: #dcdcdc; font-family: 'Archivo Expanded ExtraLight', sans-serif; } section.process .list-process ol { display: block; list-style-type: decimal; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } section.process .list-process ol li { padding-bottom: 18px; } section.process .list-process ol li p { margin-top: 10px; margin-bottom: 10px; } /* ********************************************** */ /* FAQ */ section.container-faq { padding: 10px; background-color: #161825; } section.container-faq .faq { position: relative; padding: 24px; background-color: #dcdcdc; border-radius: 15px; grid-template-rows: 55% 25% 15%; } section.container-faq .faq h2 { align-self: start; margin-bottom: calc(165px); color: #161825; font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: calc(34.375px); } section.container-faq .faq .toggle h3 { color: #161825; border-bottom: 5px solid #161825; } section.container-faq .faq .toggle a { color: #161825; } section.container-faq .faq .toggle .btn_cta { color: #ebebe9; } section.container-faq .faq .toggle .btn_cta:hover { color: #ffffff; font-weight: bold; } section.container-faq .faq .toggle .btn_toggle { display: flex; margin-bottom: 18px; color: #161825; } section.container-faq .faq .toggle .btn_toggle span { margin-top: -5px; margin-right: 10px; color: #0142fe; font-size: 55px; } section.container-faq .faq .contain_toggle { display: flex; justify-content: center; align-items: center; padding: 0 24px 0 0; /* margin-top: @mid-font; */ } section.container-faq .faq .contain_toggle p { width: 96%; padding: 0 24px 0 0; color: #161825; font-size: 16.36363636px; line-height: 1.2; } section.container-faq .faq .contain_toggle a { display: flex; justify-content: center; align-items: center; color: #ffffff; } section.container-faq .faq .contain_toggle a svg { width: 40px; height: 50px; margin-right: 20px; fill: none; stroke: #ebebe9; stroke-width: 2px; transform: rotate(-90deg); } section.container-faq .faq .contain_toggle .btn_services { width: 70%; background-color: #161825; border-radius: 15px; } section.container-faq .faq .contain_toggle .btn_services:hover { width: 70%; color: #ffffff; background-color: #0142fe; } section.container-faq .containerSmallFaq { margin-top: 62pt; padding-bottom: 48pt; } section.container-faq .containerSmallFaq h2 { text-transform: uppercase; text-align: center; } section.container-faq .gridSmallFaq { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-columns: minmax(50px, 100%); gap: 10px; padding-top: 36pt; } section.container-faq .itemSmallFaq { width: 100%; height: 100%; padding: 24pt; background-color: #DCDCDC; border-radius: 50px; box-sizing: border-box; } section.container-faq .alignSmallFaq { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12pt; } section.container-faq .iconSmallFaq { width: 50px; height: 50px; margin-bottom: 12pt; background-color: white; border-radius: 15px; } section.container-faq .textSmallFaq h3 { font-weight: 900; margin-bottom: 6pt; } section.container-faq .textSmallFaq h3, section.container-faq .textSmallFaq p { color: #161825; font-size: 16px; text-align: left; } /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* CONTACT */ section.contact { display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr; align-items: start; justify-items: center; gap: 24px; /* margin: @large-font @title-font; */ /* padding: @title-font*4.5 @large-font @title-font*2 @large-font; */ background-color: #0142fe; } section.contact .title-contact a { text-decoration: underline; } section.contact .title-contact h1 { margin-bottom: 10px; } section.contact .title-contact { display: flex; flex-direction: column; padding: 55px; } section.contact .title-contact a { margin-bottom: 10px; font-size: 50px; text-decoration: underline; } section.contact .title-contact a:hover { color: #FFFFFF; background-color: black; text-decoration: none; } section.contact .form-contact form { display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: 0.3fr 0.3fr 1fr 1fr 0.3fr; gap: 24px; padding: 24px 24px 55px 24px; color: #161825; background-color: #dcdcdc; border-radius: 45px; box-shadow: 0 0 10px 0 #012898; } section.contact .form-contact form .name-contact, section.contact .form-contact form .email-contact, section.contact .form-contact form .website-contact, section.contact .form-contact form .budget-contact, section.contact .form-contact form .services-contact, section.contact .form-contact form .message-contact { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } section.contact .form-contact form label { margin-bottom: 10px; } section.contact .form-contact form input, section.contact .form-contact form select, section.contact .form-contact form textarea { padding: 10px; border-radius: 15px; box-sizing: border-box; } section.contact .form-contact form .services-contact { grid-column: 1 / span 2; } section.contact .form-contact form .services-contact div { font-size: 24px; color: #161825; font-family: 'Archivo Expanded ExtraLight', sans-serif; text-decoration: none; display: flex; } section.contact .form-contact form .services-contact div input[type="checkbox"] { display: inline-block; vertical-align: middle; position: relative; appearance: none; width: 20px; min-width: 20px; height: 20px; margin-bottom: 6px; margin-right: 10px; padding: initial; border: 2px solid #0142fe; border-radius: 4px; outline: none; cursor: pointer; } section.contact .form-contact form .services-contact div input[type="checkbox"]::before { /* padding: 10px; */ background-color: #0142fe !important; } section.contact .form-contact form .services-contact div input[type="checkbox"]::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #ebebe9; border-radius: 2px; opacity: 0; transition: opacity 0.2s ease-in-out; } section.contact .form-contact form .services-contact div input[type="checkbox"]:checked::before { opacity: 1; } section.contact .form-contact form .message-contact { grid-column: 1 / span 2; } section.contact .form-contact form .message-contact textarea { width: 100%; max-width: 100%; } section.contact .form-contact form #honey { position: absolute; left: -10000px; } section.contact .form-contact form button { grid-column: 1 / span 2; display: block; width: 100%; } section.contact h2 { color: #aaaaaa; font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: 36.66666667px; text-decoration: underline; } section.contact p { color: #dcdcdc; font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: 18px; } section.contact .form { display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* PROJECTS */ section.project { /* Información del proyecto */ /* Imágenes del trabajo */ } section.project .cover-image-project { background-position: center; background-size: cover; } section.project .box-img-cover img, section.project .item-project img { display: none; } section.project .box-img-cover { position: relative; /* width: 100%; */ height: 60vw; min-height: 500px; max-height: 900px; overflow: hidden; background-size: cover; } section.project .about-project { display: grid; justify-content: center; align-items: center; align-items: start; grid-template-columns: 1fr 1fr 200px 1.5fr; grid-template-rows: repeat(4, 1fr); min-height: 500px; max-height: 900px; padding: 55px; /* @media (min-width: 1400px) { width: 1400px; margin: 0 auto; } */ } section.project .about-project h1, section.project .about-project h2, section.project .about-project p { font-family: 'Archivo Expanded ExtraLight', sans-serif; color: #aaaaaa; } section.project .about-project h1 { color: #ffffff; font-size: 55px; text-transform: uppercase; } @media screen and (max-width: 845px) { section.project .about-project h1 { font-size: 44px; } } section.project .about-project .index-about { margin-bottom: 10px; padding-bottom: 2px; border-bottom: 1px solid #aaaaaa; } section.project .about-project .description-about { text-transform: initial; } section.project .about-project p { color: #aaaaaa; font-size: 12px; text-transform: uppercase; } section.project .about-project p span { display: inline-block; margin-bottom: 2.5px; color: #ffffff; } section.project .about-project p span::before { content: ""; display: inline-block; width: 10px; height: 10px; background-color: #0142fe; border-radius: 45px; margin: 0px 10px 2px 0px; vertical-align: bottom; } @media screen and (max-width: 845px) { section.project .about-project p { font-size: 14.4px; } } section.project .about-project .logo-about { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 15px; background-color: #ebebe9; border-radius: 45px; box-sizing: border-box; } section.project .about-project .logo-about img { width: 100%; max-width: 100px; height: auto; } section.project .about-project .logo-about svg { fill: #161825; width: 100%; max-width: 100px; height: auto; } section.project .about-project div:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 1; } section.project .about-project div:nth-child(2) { grid-column: 4 / span 1; grid-row: 1 / span 1; } section.project .about-project div:nth-child(3) { grid-column: 1 / span 2; grid-row: 2 / span 2; } section.project .about-project div:nth-child(4) { grid-column: 1 / span 1; grid-row: 4 / span 1; margin-top: -10px; } section.project .about-project div:nth-child(5) { grid-column: 4 / span 1; grid-row: 4 / span 1; } section.project .about-project h1 { hyphens: manual; } @media (max-width: 845px) { section.project .about-project { grid-template-columns: 1fr; grid-template-rows: 50px 150px 280px 100px 120px; } section.project .about-project div:nth-child(1), section.project .about-project div:nth-child(2), section.project .about-project div:nth-child(3), section.project .about-project div:nth-child(4), section.project .about-project div:nth-child(5) { grid-column: span 1; grid-row: span 1; /* word-break: break-word; overflow-wrap: break-word; */ } section.project .about-project div:nth-child(1) h1, section.project .about-project div:nth-child(2) h1, section.project .about-project div:nth-child(3) h1, section.project .about-project div:nth-child(4) h1, section.project .about-project div:nth-child(5) h1 { hyphens: auto; } } section.project .item-project { display: flex; justify-content: center; align-items: center; position: relative; /* height: 60vw; */ height: 100%; min-height: 350px; max-height: 900px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 15px; } section.project .item-project:hover { transform: scale(1.01); transition: all 0.5s ease-in-out; z-index: 2; } section.project .item-project:hover .floating-project { transform: translate(-50%, -50%) scale(1.05); transition: all 0.5s ease-in-out; } section.project .item-project img { display: none; } section.project .item-project video { width: 100%; /* height: 100%; */ } section.project .item-project-floating { overflow: visible; /* Actualizado */ } section.project .item-project-floating .floating-project { display: block; position: absolute; top: 62%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 130%; z-index: 2; } section.project .grid-project { display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr 1fr 1fr 1fr; /* @media (min-width: 1400px) { width: 1400px; margin: 0 auto; } */ gap: 10px; /* grid-auto-flow: dense; */ padding: 0 10px; } @media (max-width: 845px) { section.project .grid-project { grid-template-columns: 1fr; } } @media (max-width: 845px) { section.project .grid-project { grid-template-columns: 1fr; /* grid-template-rows: @title-font repeat(39, 150px); */ gap: 10px; padding: 10px; } section.project .grid-project .item-project { min-height: 450px; grid-column: span 1; grid-row: span 1; } section.project .grid-project .min-item-project { grid-column: span 1; grid-row: span 1; } } section.project .full-item-project { grid-column: span 4; grid-row: span 2; } section.project .fullhalf-item-project { grid-column: span 4; grid-row: span 1; } section.project .plushalf-item-project { grid-column: span 3; grid-row: span 2; } section.project .half-item-project { grid-column: span 2; grid-row: span 2; } section.project .quarter-item-project { grid-column: span 2; grid-row: span 1; } section.project .min-item-project { grid-column: span 1; grid-row: span 1; } section.project .item-project-minhalf { display: flex; gap: 10px; } @media (max-width: 845px) { section.project .item-project-minhalf { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(1, 1fr); gap: 10px; justify-items: center; align-items: center; justify-content: center; max-height: initial; } section.project .item-project-minhalf .minhalf-item-project { width: 100%; min-height: 450px; max-height: initial; background-size: cover; } } section.project .minhalf-item-project { width: 16.66vw; position: relative; /* height: 60vw; */ height: 100%; min-height: 350px; max-height: 900px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 15px; } section.project .rectangle-item-project { grid-column: span 3; grid-row: span 2; } section.project .plussquare-item-project { grid-column: span 2; grid-row: span 2; } section.project .square-item-project { grid-column: span 1; grid-row: span 1; } section.project .midrectangle-item-project { grid-column: span 1; grid-row: span 2; } section.project .midsquare-item-project { grid-column: span 2; grid-row: span 1; } /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* HIGHLIGHT */ @media (max-width: 845px) { section.highlight { height: 30rem; } section.highlight p { width: 70%; } } /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* LIGHTBOX */ .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; /* Hide the lightbox by default */ justify-content: center; align-items: center; z-index: 9999; } .lightbox img { max-width: 80%; max-height: 80%; border-radius: 45px; animation: slide-up 0.5s; animation-iteration-count: 1; animation-play-state: paused; } @keyframes slide-up { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } .opacity-item { opacity: 0.1; z-index: -1; } .opacity-line { opacity: 0.1; z-index: -2; } /* ********************************************** */ /* VIDEO PLAYER */ .item-project { position: relative; } .item-project img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .item-video-project { position: relative; } .item-project video { width: 430px; height: 100%; padding: 45px; object-fit: cover; border-radius: 85px; box-sizing: border-box; } .play-button { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); z-index: 10; } .play-button:hover { cursor: pointer; transform: translate(-50%, -50%) scale(1); } .item-video-project { display: flex; justify-content: center; align-items: center; } .item-project video { width: 430px; height: 100%; padding: 45px; object-fit: cover; border-radius: 85px; box-sizing: border-box; } /* MEDIA */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ /* ********************************************** */ @media screen and (max-width: 1140px) { section.container-hero .hero .title-hero { display: block; justify-self: center; width: 50rem; align-self: end; color: #ebebe9; font-family: 'Archivo Expanded ExtraLight', sans-serif; font-size: 55px; text-align: center; line-height: calc(1.2); z-index: 1; } /* ABOUT (MOBILE) */ .aboutus { grid-template-rows: 120px 0.8fr 1fr 0.2fr; } .aboutus .arrow-aboutus { height: 550px; } /* ********************************************** */ /* PROCESS (MOBILE) */ section.process { padding: 12px; display: grid; justify-content: center; align-items: center; position: relative; grid-template-rows: 150px 250px 100px 1fr; } section.process .title-process { grid-column: 1 / span 4; grid-row: 1 / span 1; } section.process .text-process { grid-column: 1 / span 4; grid-row: 3 / span 1; } section.process .svg-process { grid-column: 1 / span 4; grid-row: 2 / span 1; height: 150px; } section.process .list-process { grid-column: 1 / span 4; grid-row: 4 / span 1; } section.process .list-process ol { padding-left: 55px; } section.process .list-process ol h3 { font-size: calc(39.28571429px); margin-bottom: 10px; } .toggle h3 { font-size: 36.66666667px; } .open-toggle { margin: 0; margin-bottom: 24px; padding: 24px; box-sizing: border-box; } section.services .contain_toggle { flex-direction: column; gap: 20px; padding: 0; } } @media screen and (max-width: 845px) { section.container-hero { height: 98vh; } section.container-hero .hero { grid-template-rows: 20% 10% 20% 10%; height: calc(98vh - 20px); } section.container-hero .hero .title-hero { width: 100%; padding: 0 55px; font-size: 36.66666667px; } section.container-hero .hero h1 { width: 26rem; font-size: 40px; } section.container-hero .hero .illustration { width: 450px; height: 270px; } section.container-hero .hero p { width: 80%; } section.container-hero .hero .overlay-hero a:nth-child(1) { left: 20%; top: 5%; } section.container-hero .hero .overlay-hero a:nth-child(1):hover, section.container-hero .hero .overlay-hero a:nth-child(2):hover { top: 6%; } section.container-hero .hero .overlay-hero a:nth-child(2) { top: 6%; left: auto; right: 10%; } section.container-hero .hero .overlay-hero a:nth-child(3) { top: auto; bottom: 22%; left: -5%; } section.container-hero .hero .overlay-hero a:nth-child(3) img { width: 200px; } section.container-hero .hero .overlay-hero a:nth-child(3):hover { left: 2%; } section.container-hero .hero .overlay-hero a:nth-child(4) { top: auto; bottom: 1%; left: 34%; right: auto; } section.container-hero .hero .overlay-hero a:nth-child(4):hover { bottom: 5%; } section.container-hero .hero .overlay-hero a:nth-child(5) { top: auto; bottom: 1%; left: auto; right: 10%; } section.container-hero .hero .overlay-hero a:nth-child(5):hover { bottom: 5%; } section.container-hero .hero .overlay-hero a:nth-child(6) { top: auto; bottom: 22%; left: auto; right: -2%; } section.container-hero .hero .overlay-hero a:nth-child(6):hover { right: 2%; } .aboutus { grid-template-rows: 120px 0.8fr 1fr 0.2fr; } .aboutus .cover-aboutus { grid-column: 1 / span 3; } .aboutus .item1-aboutus { grid-column: 1 / span 3; /* align-self: flex-start; */ } .aboutus .item2-aboutus { grid-column: 1 / span 3; } .aboutus .item2-aboutus p { width: inherit; } .aboutus .item3-aboutus { grid-column: 1 / span 3; } .aboutus .arrow-aboutus { display: none; } /* ********************************************** */ /* FAQ (MOBILE) */ section.container-faq { padding: 10px; background-color: #0142fe; } section.container-faq .faq .toggle .btn_cta { width: 100%; color: #ebebe9; box-sizing: border-box; } section.container-faq .faq .toggle .btn_toggle { margin-bottom: 24px; } section.container-faq .faq h2 { text-align: center; } section.container-faq .faq .toggle h3 { font-size: 30.55555556px; } section.container-faq .faq .contain_toggle { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0; gap: 18px; } section.container-faq .faq .contain_toggle p { padding: 0; margin-bottom: 10px; } section.container-faq .gridSmallFaq { grid-template-columns: 1fr; } /* SERVICES (MOBILE) */ section.projects .grid-projects { grid-template-columns: 1fr; grid-template-rows: 55px repeat(39, 150px); gap: 10px; padding: 10px; /* display: grid; grid-template-columns: 1fr; grid-template-rows: @title-font repeat(39, 150px); gap: 10px; padding: 10px; &.project-page { grid-template-columns: 1fr; grid-template-rows: repeat(20, 150px); grid-auto-rows: 300px; gap: @xsmall-font; padding: @xsmall-font; padding-top: @title-font*1.6; padding-bottom: @title-font; border-bottom: 1px solid @accent-color; & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) { grid-column: span 1; grid-row: span 2; } } */ } section.projects .grid-projects.project-page { grid-template-columns: 1fr; grid-template-rows: repeat(20, 250px); grid-auto-rows: 300px; gap: 10px; padding: 10px; padding-top: 88px; padding-bottom: 55px; border-bottom: 1px solid #0142fe; } section.projects .grid-projects.project-page .project-item:nth-child(1), section.projects .grid-projects.project-page .project-item:nth-child(2), section.projects .grid-projects.project-page .project-item:nth-child(3), section.projects .grid-projects.project-page .project-item:nth-child(4), section.projects .grid-projects.project-page .project-item:nth-child(5), section.projects .grid-projects.project-page .project-item:nth-child(6), section.projects .grid-projects.project-page .project-item:nth-child(7), section.projects .grid-projects.project-page .project-item:nth-child(8), section.projects .grid-projects.project-page .project-item:nth-child(9), section.projects .grid-projects.project-page .project-item:nth-child(10), section.projects .grid-projects.project-page .project-item:nth-child(11), section.projects .grid-projects.project-page .project-item:nth-child(12), section.projects .grid-projects.project-page .project-item:nth-child(13), section.projects .grid-projects.project-page .project-item:nth-child(14), section.projects .grid-projects.project-page .project-item:nth-child(15), section.projects .grid-projects.project-page .project-item:nth-child(16), section.projects .grid-projects.project-page .project-item:nth-child(17), section.projects .grid-projects.project-page .project-item:nth-child(18), section.projects .grid-projects.project-page .project-item:nth-child(19), section.projects .grid-projects.project-page .project-item:nth-child(20) { grid-column: span 1; grid-row: span 2; background-size: cover; } section.projects .grid-projects.project-page .project-item:nth-child(1):hover, section.projects .grid-projects.project-page .project-item:nth-child(2):hover, section.projects .grid-projects.project-page .project-item:nth-child(3):hover, section.projects .grid-projects.project-page .project-item:nth-child(4):hover, section.projects .grid-projects.project-page .project-item:nth-child(5):hover, section.projects .grid-projects.project-page .project-item:nth-child(6):hover, section.projects .grid-projects.project-page .project-item:nth-child(7):hover, section.projects .grid-projects.project-page .project-item:nth-child(8):hover, section.projects .grid-projects.project-page .project-item:nth-child(9):hover, section.projects .grid-projects.project-page .project-item:nth-child(10):hover { grid-column: span 1; grid-row: span 2; margin: 0; transform: scale(1.01); background-position: cover; } section.projects .grid-projects .project-item:hover, section.projects .grid-projects .project-item:nth-child(1):hover, section.projects .grid-projects .project-item:nth-child(2):hover, section.projects .grid-projects .project-item:nth-child(3):hover, section.projects .grid-projects .project-item:nth-child(4):hover, section.projects .grid-projects .project-item:nth-child(5):hover, section.projects .grid-projects .project-item:nth-child(6):hover, section.projects .grid-projects .project-item:nth-child(7):hover, section.projects .grid-projects .project-item:nth-child(8):hover, section.projects .grid-projects .project-item:nth-child(9):hover, section.projects .grid-projects .project-item:nth-child(10):hover, section.projects .grid-projects .project-item:nth-child(11):hover, section.projects .grid-projects .project-item:nth-child(12):hover, section.projects .grid-projects .project-item:nth-child(13):hover, section.projects .grid-projects .project-item:nth-child(14):hover, section.projects .grid-projects .project-item:nth-child(15):hover, section.projects .grid-projects .project-item:nth-child(16):hover, section.projects .grid-projects .project-item:nth-child(17):hover, section.projects .grid-projects .project-item:nth-child(18):hover, section.projects .grid-projects .project-item:nth-child(19):hover, section.projects .grid-projects .project-item:nth-child(20):hover { background-color: #0142fe; transition: all 0.5s ease-in-out; transform: scale(1.04); z-index: 2; cursor: pointer; } section.projects .grid-projects .project-item:nth-child(1), section.projects .grid-projects .project-item:nth-child(2), section.projects .grid-projects .project-item:nth-child(3), section.projects .grid-projects .project-item:nth-child(4), section.projects .grid-projects .project-item:nth-child(5), section.projects .grid-projects .project-item:nth-child(6), section.projects .grid-projects .project-item:nth-child(7), section.projects .grid-projects .project-item:nth-child(8), section.projects .grid-projects .project-item:nth-child(9), section.projects .grid-projects .project-item:nth-child(10), section.projects .grid-projects .project-item:nth-child(11), section.projects .grid-projects .project-item:nth-child(12), section.projects .grid-projects .project-item:nth-child(13), section.projects .grid-projects .project-item:nth-child(14), section.projects .grid-projects .project-item:nth-child(15), section.projects .grid-projects .project-item:nth-child(16), section.projects .grid-projects .project-item:nth-child(17), section.projects .grid-projects .project-item:nth-child(18), section.projects .grid-projects .project-item:nth-child(19), section.projects .grid-projects .project-item:nth-child(20) { grid-column: span 1; grid-row: span 4; } section.projects .grid-projects .line-projects, section.projects .grid-projects .line-projects:nth-of-type(1), section.projects .grid-projects .line-projects:nth-of-type(2), section.projects .grid-projects .line-projects:nth-of-type(3), section.projects .grid-projects .line-projects:nth-of-type(4), section.projects .grid-projects .line-projects:nth-of-type(5), section.projects .grid-projects .line-projects:nth-of-type(6), section.projects .grid-projects .line-projects:nth-of-type(7) { display: none; } section.projects .grid-projects .project-item:nth-child(11), section.projects .grid-projects .project-item:nth-child(12), section.projects .grid-projects .project-item:nth-child(13), section.projects .grid-projects .project-item:nth-child(14), section.projects .grid-projects .project-item:nth-child(15), section.projects .grid-projects .project-item:nth-child(16), section.projects .grid-projects .project-item:nth-child(17), section.projects .grid-projects .project-item:nth-child(18), section.projects .grid-projects .project-item:nth-child(19), section.projects .grid-projects .project-item:nth-child(20) { display: none; } section.projects .grid-projects .project-item:nth-child(1):hover, section.projects .grid-projects .project-item:nth-child(2):hover, section.projects .grid-projects .project-item:nth-child(3):hover, section.projects .grid-projects .project-item:nth-child(4):hover, section.projects .grid-projects .project-item:nth-child(5):hover, section.projects .grid-projects .project-item:nth-child(6):hover, section.projects .grid-projects .project-item:nth-child(7):hover, section.projects .grid-projects .project-item:nth-child(8):hover, section.projects .grid-projects .project-item:nth-child(9):hover, section.projects .grid-projects .project-item:nth-child(10):hover { grid-column: span 1; grid-row: span 4; margin: 0; transform: scale(1.01); /* background-position: 50% 50%; */ /* grid-column: 5 / span 2; */ } /* ********************************************** */ /* FOOTER (MOBILE) */ footer { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 50% 35%; height: 100%; padding-bottom: 220px; /* .box-webmap h3 { margin-bottom: @large-font; padding-bottom: @xsmall-font; color: @dark-mid-color; border-bottom: 2px solid @dark-mid-color; font-size: @small-font; } */ /* .box-webmap a { display: block; margin-bottom: @xsmall-font; color: @light-color; font-size: @small-font; } .box-webmap a:hover, .legal p:hover, .legal a:hover { display: block; color: @white-color; background-color: @accent-color; } */ } footer h2 { grid-column: 1 / span 4; grid-row: 1 / span 1; text-align: center; } footer .arrow-footer { grid-column: 1 / span 4; grid-row: 3 / span 1; display: none; } footer .img-footer { grid-column: 1 / span 4; grid-row: 2 / span 1; width: auto; height: 100%; margin: 0 auto; } footer .email-footer { grid-column: 1 / span 4; grid-row: 1 / span 1; align-self: center; font-size: 33.6px; } footer .email-footer a { /* padding: 0; */ text-align: center; } footer .email-footer a:hover { padding: 10px; } footer .email-footer a { box-sizing: border-box; } footer .box-webmap { text-align: center; } footer .box-webmap:nth-of-type(2) { grid-column: 1 / span 4; grid-row: 4 / span 1; } footer .box-webmap:nth-of-type(3) { grid-column: 1 / span 4; grid-row: 5 / span 1; } footer .box-webmap:nth-of-type(4) { grid-column: 1 / span 4; grid-row: 6 / span 1; } footer .box-webmap h3, footer .box-webmap a, footer .box-webmap p { font-size: 14px; } footer .legal { grid-column: 1 / span 4; grid-row: 7 / span 1; display: flex; flex-direction: column; } footer .legal a { margin-top: 10px; } /* CONTACT (MOBILE) */ section.contact { grid-template-columns: 1fr; gap: 18px; margin-bottom: 10px; padding: 10px 10px 0 10px; } section.contact .title-contact { display: flex; flex-direction: column; padding: 55px; } section.contact .title-contact a { margin-bottom: 10px; font-size: 40px; text-decoration: underline; } section.contact .title-contact a:hover { color: #FFFFFF; background-color: black; text-decoration: none; } section.contact .form-contact form { /* padding: @title-font; */ box-sizing: border-box; } } .alert-top { position: absolute; top: 0; left: 0; right: 0; width: 100%; padding: 10px; text-align: center; font-size: 14px; color: #DCDCDC; background-color: #0142fe; z-index: 25; box-sizing: border-box; } .alert-top a { color: #FFFFFF; text-decoration: underline; }
Pantalla principal de un sitio web con un diagrama circular interactivo y fotos de perfil alrededor del logo 'TAPE'.

09/2021 - 11/2023 - felixnieto.es

Contenidos

Estrategia de Branding

Diseño Web

Diseño y Publicidad Digital

Sobre
Tape

Proceso creativo de proyectos experimentales

Descripción del SVG

TAPE es una plataforma online donde se muestran cómo nacen las ideas, ensayos, y como es todo el proceso de creación hasta que el proyecto sale a escena.

Página web mostrando una cuadrícula de proyectos creativos, una sección de 'TAPE' con descripciones.
Dos pantallas con anuncios y el característico diagrama circular interactivo del logo 'TAPE'.
Varias escenas de eventos en vivo con luces azules y rojas, personas interactuando.
Teléfono móvil mostrando el diagrama circular de 'TAPE' en la pantalla.
Computadora portátil mostrando una página web de 'TAPE'.
Pantalla interactiva de 'TAPE' con el diagrama circular.
Tarjetas y anuncios con diferentes estilos gráficos y el logo 'TAPE'
Tarjetas y anuncios con diferentes estilos gráficos y el logo 'TAPE'
Tarjetas y anuncios con diferentes estilos gráficos y el logo 'TAPE'
Tarjetas y anuncios con diferentes estilos gráficos y el logo 'TAPE'
Primer keyframe para la animación de introducción para YouTube con el logo 'TAPE' en el centro y líneas conectando los círculos.
Segundo keyframe de 'TAPE' con un diagrama de líneas conectadas.
Tercer keyframe de 'TAPE' en el que desaparecen los círculos y líneas conectadas.
Final de animación con el logo 'TAPE' y espacio para el título y subtítulo de un proyecto.
Anuncios y publicaciones para redes sociales de TAPE.
Logotipo de Tape y eslogan 'Proceso creativo de proyectos experimentales'
Propuesta de redes sociales de TAPE con un estilo analógico y minimalista.
Stories para Instagram en el que se invita a visitar la página web y descubrir el proceso de los proyectos en TAPE.
Stories para instagram en el que se muestra el eslogan de 'Tira, engancha y TAPE'