/* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: #222; font-size: 1em; line-height: 1.4; } /* * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Reset CSS ========================================================================== */ 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, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 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; } /* remember to define visible focus styles! :focus { outline: ?????; } */ /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* ========================================================================== Author's custom styles ========================================================================== */ html, body{height: 100%; width: 100%;} body{font-family: 'Poiret One', cursive; background: #008e82;} #mobile-nav{height:100%;padding:1.3rem 1.3rem 0 1.3rem;background: #008e82;position: fixed;display: block;z-index: 999;cursor: pointer;} /*.line_hamb{display: block;height: 0.1875rem;background: #FFF;width: 1.875rem;margin-bottom:0.3125rem;}*/ .hamburger-menu {position: absolute;top: 1rem;left: 0.3rem;right: 0;margin: auto;width: 40px;height: 10px;cursor: pointer;z-index: 999;} .bar, .bar:after, .bar:before {width: 30px;height: 5px;} .bar {position: relative;transform: translateY(25px);background: white; transition: all 0ms 300ms;} .bar.animate {background: rgba(255, 255, 255, 0);} .bar:before {content: "";position: absolute;left: 0;bottom: 10px;background: white;transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);} .bar:after {content: "";position: absolute;left: 0;top: 10px;background: white;transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);} .bar.animate:after {top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .bar.animate:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } nav .level1 {font-size: 1.75rem;margin-top: 5rem;} nav li{display: list-item; text-align: center;margin-bottom: 0.625rem;} nav li:nth-child(5){margin-bottom: 30%;} nav li.legales{font-size: 0.875rem;} nav li.legales a{text-transform: capitalize;} nav a {color: #FFF; display: block;text-transform: uppercase;text-decoration: none;padding: 0.375rem 0.625rem;} nav a:hover, nav a.active {background:rgba(0,0,0,0.3);} nav {height: 100%;width: 13.75rem;position: absolute;top: 0;left: -18em;z-index: 998;background: rgba(0,141,131,0.8); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s;} nav.open {left: 2.5rem; top: 0; } .caption{font-size: 5rem;position: absolute;text-align: center !important;margin:auto; right: 0;left: 0;color: #FFF; z-index: 40;width:100vw; height: auto; font-weight: bold;} .caption p{padding-left:20px;color: #FFF; font-size: 5rem; width: 95%; margin: 0 auto; text-align: center; font-weight: bold;} .logoFixed{position: absolute;z-index: 99 !important;padding: 1.25rem;border-radius: 0.625rem;} .logoFixed img{width: 100%;height: auto;} #terminos{display: none;} #aviso{display: none;} .lightbox{max-width:37.5rem;min-width: 16.25rem;font-family: Arial, Helvetica, Sans-serif;line-height: normal;padding: 1.875rem;} .lightbox h3{font-size: 1.875em;text-align: center;color:#008e82;} .lightbox p{font-size: 1em; color: #333;} .move {-webkit-animation: slideShow 36s linear 0s;-moz-animation: slideShow 36s linear 0s;-o-animation: slideShow 36s linear 0s;-ms-animation: slideShow 36s linear 0s;animation: slideShow 36s linear 0s;} #portada{width: 100%; height: 100%; position: relative; background: url(../img/contacto_bg.jpg) no-repeat center center rgba(0,0,0,0.6) ; background-size: cover; vertical-align: top; background-blend-mode: multiply;} .left-Content{width:40%; height: 100%; background: rgba(0,141,131,0.8); display: inline-block; position: relative;} .left-Content h1{ text-transform: uppercase; width: 70%; margin-left: 5rem; color: white; margin-top: 10rem; font-size: 3rem; text-align: center; font-weight: bold; } .colorTitle{color:#EB9CA7; } .left-Content p{ width: 40%; margin-left: 14rem !important; color:#EB9CA7; margin-top: 10rem; font-size: 1.2rem; text-align:left;line-height: 20px; font-weight: bold;} .titulo{ text-transform: uppercase; color: white; font-weight: bold;} .left-Content a{color:#EB9CA7; text-decoration:none;} .right-Content{width:60%; height: 100%;display: inline-block; position:absolute; top: 0;} .right-Content p{ width: 100%;color:white; margin-top: 11rem; font-size: 1rem; text-align:center;} .right-Content p a{color: #FFF;text-decoration: underline;} #formContacto{ width: 80%; margin: 2rem auto; display: flex; justify-content: space-between; flex-direction: column; align-items:center; /*background:rgba(235,156,167,0.5);*/} #formContacto input{margin-bottom: 1rem;} #formContacto input[type="text"]{ height: 42px; border: none; border-bottom: 1px solid #ffffff; background:transparent; width: 80%; color: #ededed; font-weight: bold; } #formContacto input[type="email"]{ height: 42px; border: none; border-bottom: 1px solid #ffffff; background:transparent; width: 80%; color: #ededed; font-weight: bold; } #formContacto textarea{ height:100px; border: none; border-bottom: 1px solid #ffffff; background:transparent; width: 80%; color: #ededed; font-weight: bold; margin-bottom: 2rem;} #formContacto input[type="submit"]{ height: 42px; border:none; background:#008e82; width: 20%; color: white; font-weight: bold; text-transform: uppercase;} #formContacto input[type="submit"]:hover { background:#EB9CA7; } #formContacto input[type="text"]::-webkit-input-placeholder, #formContacto input[type="email"]::-webkit-input-placeholder, #formContacto textarea::-webkit-input-placeholder {color: #FFF; } #formContacto input[type="text"]::-moz-placeholder, #formContacto input[type="email"]::-moz-placeholder, #formContacto textarea::-moz-placeholder { color: #FFF; } #formContacto input[type="text"]:-ms-input-placeholder, #formContacto input[type="email"]:-ms-input-placeholder, #formContacto textarea:-ms-input-placeholder { color: #FFF; } #formContacto input[type="text"]:-moz-placeholder, #formContacto input[type="email"]:-moz-placeholder, #formContacto textarea:-moz-placeholder { color: #FFF; } .success{padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;} .error{padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;color: #a94442;background-color: #f2dede;border-color: #ebccd1;} audio{position: absolute; display: block !important; bottom: 0; right: 0; width: 300px; z-index: 60;} .slider{width: 100%; height: 100vh; position: relative; z-index: 10;} #Main1{background: url(../img/slide1.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh; background-blend-mode: multiply;} #Main2{background: url(../img/slide2.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Main3{background: url(../img/img_slide1-03.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Main4{background: url(../img/slide4.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Main5{background: url(../img/slide5.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Main6{background: url(../img/slide6.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Main7{background: url(../img/slide7.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Conceptos1{background: url(../img/concepto1.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Conceptos2{background: url(../img/concepto2.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Conceptos3{background: url(../img/concepto3.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Conceptos4{background: url(../img/concepto4.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Catalogo1{background: url(../img/catalogo1.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Catalogo2{background: url(../img/catalogo2.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Catalogo3{background: url(../img/catalogo3.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Catalogo4{background: url(../img/catalogo4.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} #Catalogo5{background: url(../img/catalogo5.jpg) no-repeat center center rgba(0,0,0,0.5); background-size: cover;width: 100%; height: 100vh;background-blend-mode: multiply;} /* keyframes*/ @keyframes slideShow { 0% {opacity: 0;transform:scale(1);-ms-transform:scale(1);} 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 1; transform:scale(1.5); -ms-transform:scale(1.5); } 100% { opacity: 0; transform:scale(1); -ms-transformm:scale(1); } } @-o-keyframes slideShow { 0% { opacity: 0; -o-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -o-transform:scale(1.5); } 100% { opacity: 0; -o-transformm:scale(1); } } @-moz-keyframes slideShow { 0% { opacity: 0; -moz-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -moz-transform:scale(1.5); } 100% { opacity: 0; -moz-transformm:scale(1); } } @-webkit-keyframes slideShow { 0% { opacity: 0; -webkit-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -webkit-transform:scale(1.5); } 100% { opacity: 0; -webkit-transformm:scale(1); } } /*SLIDER*/ #slider li, #sliderHome li { text-align:center;position: relative;-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -ms-animation-duration: 0.5s; -ms-animation-timing-function: ease; animation-duration: 0.5s; animation-timing-function: ease; overflow: hidden; animation-direction: normal;} #slider, #sliderHome { width: auto; /*height: 390px;*/ list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /* Overall Wrapper */ .anythingSlider-default { margin: 0 auto; padding: 0; } /* slider window - top & bottom borders, default state */ .anythingSlider-default .anythingWindow { /*border-top: 3px solid #777; border-bottom: 3px solid #777;*/ } /* Navigation buttons + start/stop button, default state */ .anythingSlider-default .anythingControls a { /* top shadow */ background: #777 url(../img/default.png) center -288px repeat-x; color: #000; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } /* Make sure navigation text is visible */ .anythingSlider-default .anythingControls a span { visibility: visible; } /* Navigation current button, default state */ .anythingSlider-default .anythingControls a.cur { background: #888; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-default .anythingControls a.start-stop { background-color: #040; color: #ddd; } /* start-stop button, playing, default state */ .anythingSlider-default .anythingControls a.start-stop.playing { background-color: #800; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ .anythingSlider-default .anythingControls a.start-stop:hover, .anythingSlider-default .anythingControls a.start-stop.hover, .anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover { background-image: none; color: #ddd; } /* ================================= Active State (has keyboard focus) ================================= */ /* slider window - top & bottom borders, active state */ .anythingSlider-default.activeSlider .anythingWindow { border-color: #7C9127; } /* Navigation buttons, active state */ .anythingSlider-default.activeSlider .anythingControls a { /* background image = top shadow */ background-color: #7C9127; } /* Navigation current & hovered button, active state */ .anythingSlider-default.activeSlider .anythingControls a.cur, .anythingSlider-default.activeSlider .anythingControls a:hover { /* background image removed */ background: #7C9127; } /* start-stop button, stopped, active state */ .anythingSlider-default.activeSlider .anythingControls a.start-stop { background-color: #080; color: #fff; } /* start-stop button, playing, active state */ .anythingSlider-default.activeSlider .anythingControls a.start-stop.playing { background-color: #d00; color: #fff; } /* start-stop button, active slider hovered text color (when visible) */ .anythingSlider-default.activeSlider .start-stop:hover, .anythingSlider-default.activeSlider .start-stop.hover { color: #fff; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-default .arrow { top: 50%; position: absolute; display: block; z-index: 45; } .anythingSlider-default .arrow a { display: block; width: 45px; height: 140px; margin: -70px 0 0 0; /* half height of image */ text-align: center; outline: 0; background: url(../img/default.png) no-repeat; } /* back arrow */ .anythingSlider-default .back { left: 3.125rem; } .anythingSlider-default .back a { background-position: left top; } .anythingSlider-default .back a:hover, .anythingSlider-default .back a.hover { background-position: left -140px; } /* forward arrow */ .anythingSlider-default .forward { right: 0; } .anythingSlider-default .forward a { background-position: right top; } .anythingSlider-default .forward a:hover, .anythingSlider-default .forward a.hover { background-position: right -140px; } /* Navigation Links */ .anythingSlider-default .anythingControls { outline: 0; display: none; } .anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-default .anythingControls ul li { display: inline; } .anythingSlider-default .anythingControls ul a { font: 11px/18px Georgia, Serif; display: inline-block; text-decoration: none; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; text-align: center; outline: 0; } /* navigationSize window */ .anythingSlider-default .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* Autoplay Start/Stop button */ .anythingSlider-default .anythingControls .start-stop { padding: 2px 5px; width: 40px; text-align: center; text-decoration: none; float: right; z-index: 100; outline: 0; } /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../img/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('../img/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../img/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('../img/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../img/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('../img/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } .fraction-slider{ position:relative; width:100%; height:100%; overflow:visible; } .fraction-slider .slide{ display:none; width:100%; height:100%; position:absolute; z-index:5000; } .fraction-slider .active-slide{ z-index:9999; } .fraction-slider .fs_obj{ display:block; display:none; position:absolute; top:0px; left:100%; z-index:7000; } .fraction-slider .fs_fixed_obj{ z-index:6000; left:0; } .fraction-slider .fs_obj *{ display:inline-block; position:relative; top:0px; left:0px; } .fs_loader{ width:100%; height:400px; background:url(../img/fs.spinner.gif) center center no-repeat transparent; } /** CONTROLS **/ .fraction-slider .prev, .fraction-slider .next{ display:none; position:absolute; width:45px; height:45px; z-index:9999; } .fraction-slider .prev{ left:10px; top:45%; background:url(images/fs.prevnext.png) 0px 0px no-repeat transparent; } .fraction-slider .prev:hover{ background:url(images/fs.prevnext.png) 0px -45px no-repeat transparent; } .fraction-slider .next{ right:10px; top:185px; background:url(images/fs.prevnext.png) -45px 0px no-repeat transparent; } .fraction-slider .next:hover{ background:url(images/fs.prevnext.png) -45px -45px no-repeat transparent; } .fraction-slider:hover .prev, .fraction-slider:hover .next{ display:block; } /** PAGER **/ .fs-pager-wrapper{ position:absolute; left:10px; bottom:10px; z-index:9999; } .fs-pager-wrapper a{ display:inline-block; width:14px; height:14px; margin:0 5px 0 0; background:url(images/fs.pager.png) 0px -14px no-repeat transparent; } .fs-pager-wrapper .active{ background:url(images/fs.pager.png) 0px 0px no-repeat transparent; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-default .arrow { top: 30%; } .as-oldie .anythingSlider-default .arrow a { margin: 0; } /* margin between nav buttons just looks better */ .as-oldie .anythingSlider-default .anythingControls li { margin-left: 3px; } /* When using the navigationSize option, the side margins need to be zero None of the navigation panels look good in IE7 now =( */ .as-oldie .anythingSlider-default .anythingControls a { margin: 0; } .as-oldie .anythingSlider-default .anythingNavWindow { margin: 0 2px; } .as-oldie .anythingSlider-default .anythingNavWindow li { padding: 3px 0 0 0; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider, .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /* ANIMATIONS */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-ms-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-o-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% {-webkit-transform: perspective(400px) rotateX(90deg);opacity: 0;} 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } /* ========================================================================== Helper classes ========================================================================== */ /* * Hide visually and from screen readers */ .hidden { display: none !important; } /* * Hide only visually, but have it available for screen readers */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ /* Small screens 320px */ @media screen and (min-width: 17.5em) { .logoFixed{width: 40%;top: 1.25rem;right:0;left: 0; margin: 0 auto;} .move { height: 100vh; width: auto;} #portada{width: 100%; height:auto;} .caption{font-size: 2rem;position: absolute;text-align: center !important;margin:auto; right: 0;left: 0;color: #FFF; z-index: 40;width:100vw; height: auto; font-weight: bold;} .caption p{padding-left:30px;color: #FFF; font-size: 2rem; width: 90%; margin: 0 auto; text-align: center; font-weight: bold;} .left-Content{width:100%; height:auto; padding-bottom: 2rem; background:transparent;} .left-Content h1{ width: 100%; margin-left:0; margin-top: 10rem; font-size: 2.5rem; } .left-Content p{ width: 100%; margin-left:0 !important; margin-top: 3rem; text-align: center; } .right-Content{width:100%; height: auto;display:block; position:relative; top: 0; padding: 2rem 0;} .right-Content p{ width: 70%;color:white; font-size: 1rem; text-align:center; margin: 2rem auto;} #formContacto{ width: 80%; text-align: center;} #formContacto input[type="submit"]{ width: 50%;} audio{position:fixed; display: block !important; bottom: 0; right: 0; width: 300px; z-index: 60;} } /* Medium screens 768px */ @media screen and (min-width: 47.9375rem) { .logoFixed{width: 12.5rem;top: 1.25rem;right: 1.25rem;left: inherit; margin: 0;} .move { height:100vh; width: auto;} #portada{width: 100%; height:auto;} .caption{font-size: 5rem;position: absolute;text-align: center !important;margin:auto; right: 0;left: 0;color: #FFF; z-index: 40;width:100vw; height: auto; font-weight: bold;} .caption p{padding-left:20px;color: #FFF; font-size: 5rem; width: 95%; margin: 0 auto; text-align: center; font-weight: bold;} .left-Content{width:100%; height:auto; padding-bottom: 2rem; background:transparent;} .left-Content h1{ width: 100%; margin-left:0; margin-top: 10rem; font-size: 2.5rem; } .left-Content p{ width: 100%; margin-left:0 !important; margin-top: 3rem; text-align: center; } .right-Content{width:100%; height: auto;display:block; position:relative; top: 0; padding: 2rem 0;} .right-Content p{ width: 70%;color:white; font-size: 1rem; text-align:center; margin: 2rem auto;} #formContacto{ width: 80%; text-align: center;} #formContacto input[type="submit"]{ width: 50%;} audio{position: fixed; display: block !important; bottom: 0; right: 0; width: 300px; z-index: 60;} } /* Large screens 1024px */ @media screen and (min-width: 64.0625em) { .logoFixed{width: 12.5rem;top: 1.25rem;right: 1.25rem;left: inherit; margin: 0;} .move { height: auto; width: 100%;} #portada{width:auto; height:100vh;} .caption{font-size: 5rem;position: absolute;text-align: center !important;margin:auto; right: 0;left: 0;color: #FFF; z-index: 40;width:100vw; height: auto; font-weight: bold;} .caption p{padding-left:20px;color: #FFF; font-size: 5rem; width: 95%; margin: 0 auto; text-align: center; font-weight: bold;} .left-Content{width:40%; height:100%; padding-bottom:0; background: rgba(0,141,131,0.8);} .left-Content h1{ width: 80%; margin-left:5rem; margin-top: 10rem; font-size: 2.5rem; } .left-Content p{ width: 40%; margin-left:13rem !important; margin-top: 10rem; text-align: center; } .right-Content{width:60%; height: auto;display:inline-block; position:absolute; top: 0; padding:0;} .right-Content p{ width: 100%;color:white; font-size: 1rem; text-align:center; margin:auto; margin-top: 10rem;} #formContacto{ width: 80%; text-align: center;} #formContacto input[type="submit"]{ width: 30%;} audio{position: absolute; display: block !important; bottom: 0; right: 0; width: 300px; z-index: 60;} } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }