/* Indice: -Fonts -RESET -VARS -Video Fondo -Logo -Menú -input:range -Contenido -Flickity -CV -Aviso -Contacto -Preloader -Pie -Error -Responsivo 1000 -Menú -Cajón -input:range -Responsivo 730 -Contenido -Responsivo 414 */ /* Fonts */ @font-face { font-family: 'montserrat'; src: url('montserrat-regular.eot'); src: url('montserrat-regular.eot?#iefix') format('embedded-opentype'), url('montserrat-regular.woff') format('woff'), url('montserrat-regular.ttf') format('truetype'), url('montserrat-regular.svg#montserratregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'montserrat'; src: url('montserrat-blackitalic.eot'); src: url('montserrat-blackitalic.eot?#iefix') format('embedded-opentype'), url('montserrat-blackitalic.woff') format('woff'), url('montserrat-blackitalic.ttf') format('truetype'), url('montserrat-blackitalic.svg#montserratblack_italic') format('svg'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'montserrat'; src: url('montserrat-bolditalic.eot'); src: url('montserrat-bolditalic.eot?#iefix') format('embedded-opentype'), url('montserrat-bolditalic.woff') format('woff'), url('montserrat-bolditalic.ttf') format('truetype'), url('montserrat-bolditalic.svg#montserratbold_italic') format('svg'); font-weight: 700; font-style: italic; font-display: swap; } /* /Fonts */ /* RESET */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* RESET */ /*-VARS*/ :root{ --letra: 'montserrat', 'Arial Black', Impact, "Avant Garde", Arial, sans-serif; --colorPrim:#fcbe11; /*amarillo*/ --colorClaro:#aaa; --colorTexto: #fff; --transparencia: rgba(0,0,0,.6); } * { box-sizing: border-box; } html { width: 100vw; height: 100vh; overflow: hidden; } body { width: 100vw; height: 100vh; font-family: var(--letra); font-size: 16px; color: var(--colorTexto); overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--colorPrim); font-style: italic; text-shadow: 1px 1px 0px #000; font-family: var(--letra); } h2 { font-size: 30px; margin-bottom: 20px; } h3 { font-size: 25px; margin-bottom: 15px; margin-top: 25px; } blockquote { padding-left: 20px; border-left: solid 3px var(--colorPrim); margin-left: 10px; font-style: italic; font-weight: 700; color: var(--colorClaro); margin-top: 30px; } blockquote p {margin:0; line-height: 1.3em;} p { font-family: var(--letra); margin:20px 0; line-height: 1.4em; } p a:link, p a:visited { color: var(--colorPrim); text-decoration: none; text-shadow: 1px 1px 0px #000; } p a:hover {text-decoration: underline;} ul { list-style: disc; list-style-position: inside; } li { padding-left: 30px; margin: 10px 0; } /* -Video Fondo */ #bgvid { object-fit: cover; position: fixed; left: 0; top: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -9999; animation: fadeIn 500ms linear; } @keyframes fadeIn{ from { opacity: 0.5; } to { opacity: 1; } } .fondo { background-color: rgba(0,0,0,.3); background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255, 255, 255, .1) 1px, rgba(255,255,255,.1) 2px); position: fixed; left: 0; top: 0; bottom:0; right:0; min-width: 100%; min-height: 100%; z-index: -9998; } /* -Logo */ .logo { position:absolute; top:10px; left: 10px; width: 257px; height: 45px; color:#000; text-decoration: none; } .logo img { width: 75px; vertical-align: bottom; } .logo h1 { font-size: 40px; display: inline; font-style: italic; font-weight: 900; } /* -Menú */ nav.menu { position: absolute; top: calc(50% - 100px); height: 200px; width: 200px; } nav.menu a { position: absolute; left: 80px; } nav.menu a::before { content: ""; position: absolute; bottom: -2px; left: 0; height: 2px; width: 0%; background-color: var(--colorPrim); transition:all .3s ease-out; box-shadow: 1px 1px 0px #000; } nav.menu a:link, nav.menu a:visited { font-weight: 700; font-style: italic; color: var(--colorPrim); text-decoration: none; text-shadow: 1px 1px 0px #000; } nav.menu a:hover {} nav.menu a:hover::before {width: 100%;} nav.menu a:nth-child(2) { top: 7px; } nav.menu a:nth-child(3) { top: 37px; } nav.menu a:nth-child(4) { top: 67px; } nav.menu a:nth-child(5) { top: 97px; } nav.menu a:nth-child(6) { top: 127px; } nav.menu a:nth-child(7) { top: 157px; } nav.menu a:nth-child(8) { top: 187px; } /* -input:range */ /*customised range*/ input[type="range"].range { cursor: pointer; width: 175px !important; -webkit-appearance: none; z-index: 200; border: 1px solid #e6e6e6; background-color: #e6e6e696; background-image: linear-gradient(right, #e6e6e696, #d2d2d296); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6e6e696), to(#d2d2d296)); background-image: -webkit-linear-gradient(right, #e6e6e696, #d2d2d296); background-image: -moz-linear-gradient(right, #e6e6e696, #d2d2d296); background-image: -ms-linear-gradient(right, #e6e6e696, #d2d2d296); position: absolute; top: 81px; left: -50px; } /*customised range when focusing on input */ input[type="range"].range:focus { border: 0 !important; outline: none !important; } /*customised range slider icon*/ input[type="range"].range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background-color: #555; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4DDBFF), to(#00CCFF)); background-image: -webkit-linear-gradient(right, #4DDBFF, #00CCFF); background-image: -moz-linear-gradient(right, #4DDBFF, #00CCFF); background-image: -ms-linear-gradient(right, #4DDBFF, #00CCFF); background-image: linear-gradient(right, #4DDBFF, #00CCFF); } /*setting round corners to the range */ input[type="range"].round { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } /*setting round corners to the range slider icon*/ input[type="range"].round::-webkit-slider-thumb { border-radius: 10px 0px 10px 10px; -webkit-border-radius: 10px 0px 10px 10px; -moz-border-radius: 10px 0px 10px 10px; -o-border-radius: 10px 0px 10px 10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } /* set range from 0 - 1 horizontal as by default */ .horizontal-lowest-first { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } /* set range from 1 - 0 horizontal (highest first) */ .horizontal-highest-first { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } /* set range from 0 - 1 vertically (lowest on top) */ .vertical-lowest-first { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } /* set range from 1 - 0 vertically (highest on top) */ .vertical-heighest-first { -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); } /* -Contenido */ #contenido { display: flex; height: 100vh; } .contenido { box-sizing: content-box; margin:auto; background-color: var(--transparencia); border-radius: 5px; border: solid #000 1px; padding: 30px; box-shadow:0px 0px 3px #000; overflow: hidden; z-index:2; } /* -Flickity */ .carrusel { width: 640px; background-color: #000; } .carousel-main { background: #000; } .carousel-cell { width: 100%; height: 360px; margin-right: 10px; background: #000; border-radius: 0px; counter-increment: carousel-cell; } .carousel-cell a {text-decoration: none;} .carousel-cell a h3 { position: relative; z-index: 1; text-align: right; padding-right: 20px; } .carousel-cell a img {position: absolute; top:0; width: 100%;} /* -CV */ .cv, .aviso, .contacto { font-family: var(--letra); width: 600px; height: 450px; position: relative; overflow: auto; } .cv h2, .aviso h2, .contacto h2 {margin-bottom: 0;} /* -Aviso */ .aviso {margin: 30px auto; color:#fff;} /* -Contacto */ .contacto a:link, .contacto a:visited { color: var(--colorClaro); padding-left: 50px; } .contacto a:hover { color: var(--colorPrim); } .espacio { height: 100px; } /* -Preloader */ #cargador { width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); display: flex; z-index: 9999; } #cargador div { margin: auto; width: 100px; height: 100px; position: relative; } #cargador div::before, #cargador div::after { content: ""; box-sizing: border-box; position:absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; border-radius: 100%; } #cargador div::before { border: solid 10px #aaa; } #cargador div::after { border: solid 10px transparent; border-top: solid 10px var(--colorPrim); animation: vuelta 1s infinite linear; } @keyframes vuelta{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .cargador.listo { visibility: hidden; opacity: 0; } /* -Pie */ footer { position: absolute; bottom: 0; width: 100%; } footer p { text-align: center; font-size: 12px; margin:5px 0; } .sep { font-size: 1.5em; color:#d94d4c; } #movil {display: none;} #btn-movil {display: none;} /* -Error */ #error { width: 260px; height: 170px; position: absolute; left: calc(50% - 130px); top: calc(50% - 85px); text-align: center; } #error h2 { font-size: 120px; line-height: 1em; margin: 0; padding: 0; } #error h3 { font-size: 45px; line-height: 1em; margin: 0; padding: 0; } #error h3:nth-child(2) {margin-top: -25px;} #error h3:nth-child(3) {font-size: 42px; margin-top:-10px;} /* -Responsivo 1000 */ @media only screen and (max-width: 1085px) { /* -Menú */ #btn-movil { display: block; border:solid 3px var(--colorPrim); background-color: var(--transparencia); padding:6px; width: 45px; position: absolute; right:20px; top: 20px; z-index: 200; cursor: pointer; transition:all .8s .3s; } #btn-movil div { width: 100%; height: 3px; background-color: var(--colorPrim); transition:all .8s .3s; } #btn-movil div:nth-child(2) { margin: 6px 0; } #movil:checked ~ #btn-movil div:nth-child(1) { transform: translateY(9px) rotate(-45deg); } #movil:checked ~ #btn-movil div:nth-child(2) {opacity:0;} #movil:checked ~ #btn-movil div:nth-child(3) { transform: translateY(-9px) rotate(45deg); } /* -Cajón */ .cajon { position:absolute; overflow: hidden; height: 350px; width: 0px; top: calc(50% - 175px); right: 0; transition: all 1s; } #movil:checked ~ .cajon {width: 300px;} nav.menu { position: absolute; top: 0; left: 400px; height: 350px; width: 300px; background-color: rgba(0,0,0,.7); z-index: 199; border-top: solid 1px var(--colorClaro); border-bottom: solid 1px var(--colorClaro); border-left: solid 1px var(--colorClaro); border-radius: 5px 0 0 5px; box-shadow:0px 0px 3px #000; transition: all 1s; } #movil:checked ~ .cajon nav.menu{left: 0px;} nav.menu a { left: 160px; } nav.menu a:nth-child(2) { top: 76px; } nav.menu a:nth-child(3) { top: 106px; } nav.menu a:nth-child(4) { top: 136px; } nav.menu a:nth-child(5) { top: 166px; } nav.menu a:nth-child(6) { top: 196px; } nav.menu a:nth-child(7) { top: 226px; } nav.menu a:nth-child(8) { top: 256px; } /* -input:range */ input[type="range"].range { left: 30px; top:160px; } /* -Contenido */ .contenido { box-sizing: content-box; overflow: hidden; } .contenido .tit-apartado { padding-left: 30px; } /* -CV */ .cv, .aviso, .contacto { width: 100%; padding: 0px 10px 80px; box-sizing: border-box; } .espacio { height: 100px; } /* Cierre 1000 */ } /* -Responsivo 730 */ @media only screen and (max-width: 730px) { /* -Contenido */ .contenido { box-sizing: border-box; width: 100%; background-color: var(--transparencia); border-radius: 0px; border: none; border-top: solid #000 1px; border-bottom: solid #000 1px; padding: 30px 0px; box-shadow:0px 0px 3px #000; } /* -Flickity */ .carrusel { width: 100%; background-color: #000; } .carousel-main { background: #000; } .carousel-cell { width: 100%; /* height: 350px;*/ margin-right: 10px; background: #000; border-radius: 0px; counter-increment: carousel-cell; } /* Cierre 730 */ } /* -Responsivo 414 */ @media only screen and (max-width: 415px) { /*.contenido { height: 460px; top: calc(50% - 230px); }*/ .carousel-cell { height: 232px; } .carousel-cell a h3 { font-size: 15px; } /* Cierre 414 */ }