@charset "utf-8"; /* CSS Document */ /* NIVELES 1000 ->
1500 -> Menu idiomas , Menu redes 1550 -> Boton contacta home 1600 -> Scroll 2000 -> Cookies FUENTES font-family: 'Montserrat', sans-serif; > Slider font-family: 'Mr Dafoe', cursive; > Slider font-family: 'Raleway', sans-serif; > Menu principal */ @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ html{width:100%;max-width:120em;margin:0 auto; padding:0 auto;background-color:#FFF;height:auto;overflow-x:hidden;margin-top:0px !important;padding-top:0px !important;} body{width:100%;max-width:120em;margin:0 auto; padding:0 auto;background-color:#FFF;height:auto;overflow-x:hidden;margin-top:0px !important;padding-top:0px !important;} header{width:100%;max-width:120em;z-index:1000;position:fixed;-webkit-transition: all 0.3s;-moz-transition:all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;background:rgb(255,255,255,1) !important;margin-top:0px !important;padding-top:0px !important;padding-bottom:0px;padding-top:0px;} .row{width:100%;max-width:120em;} #main{position:relative;padding-top:100px} .main{position:relative;padding-top:100px} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { header{z-index:1000;position:relative;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;} #main{position:relative;padding-top:0px;} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ header.smaller{background:rgb(255,255,255,1) !important} header.smaller .name img{width:130px;-webkit-transition: width 0.3s;-moz-transition: width 0.3s;-ms-transition: width 0.3s;-o-transition: width 0.3s;transition: width 0.3s;padding-top:0px;margin-top:0px} header.smaller .top-bar-menu1 .title-area h1 img{width:130px;-webkit-transition: width 0.3s;-moz-transition: width 0.3s;-ms-transition: width 0.3s;-o-transition: width 0.3s;transition: width 0.3s;padding-top:0px;margin-top:0px} header.smaller .top-bar-section-menu1 ul li {margin-top:15px !important;margin-bottom:10px !important} header.smaller .top-bar-section-menu1 ul li > a {background:transparent !important;color:#232323 !important} header.smaller .top-bar-section-menu1 ul li > a:hover {color:#f7a600 !important;background-color:#FFF !important} header.smaller .top-bar-section-menu1 ul li > a:hover span{color:#f7a600 !important;} header.smaller .top-bar-section-menu1 ul li.active > a {color:#f7a600 !important;} header.smaller .top-bar-section-menu1 ul li.active > a span{color:#f7a600 !important;} header.smaller .top-bar-section-menu1 ul li.active > a:hover {color:#000 !important;background-color:#FFF} /* TEXT FORMAT */ h1{font-family: 'Raleway', sans-serif;font-size:4em;margin-top:-10px;font-weight:800;} h2{font-family: 'Raleway', sans-serif;} h3{font-family: 'Raleway', sans-serif;} h3 span{color:#f7a600;} h4{font-family: 'Raleway', sans-serif;font-weight:800} h5{font-family: 'Raleway', sans-serif;} p{font-family: 'Muli', sans-serif;font-size:1.1em} #main ul li{font-family: 'Muli', sans-serif;font-size:1.1em} #main ol li{font-family: 'Muli', sans-serif;font-size:1.1em} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { h1{font-size:2.5em;} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* ELEMENTOS COMUNES */ /* MENU PRINCIPAL */ .top-bar-menu1 {background:rgb(255,255,255,1) !important;margin-top:0px !important;padding-top:0px !important;} .top-bar-menu1.expanded .title-area {} .top-bar-menu1 .title-area h1 {} .top-bar-menu1 .title-area h1 a{padding-top:10px;padding-bottom:5px} .top-bar-menu1 .title-area h1 img{width:190px} .top-bar-section-menu1{background:transparent !important} .top-bar-section-menu1 ul li {background:transparent !important;margin-top:30px !important;margin-bottom:30px !important} .top-bar-section-menu1 ul li > a {font-family: 'Raleway', sans-serif;font-size:1em;font-weight:800;letter-spacing:0.1em;color:#232323!important;background:transparent !important;-webkit-transition: all 0.3s;-moz-transition:all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} .top-bar-section-menu1 ul li > a span{font-size:1.5em} .top-bar-section-menu1 ul li > a:hover {color:#f7a600 !important;background:transparent!important} .top-bar-section-menu1 ul li > a:hover span{color:#f7a600 !important;} .top-bar-section-menu1 ul li.active > a {color:#f7a600 !important;background:transparent!important} .top-bar-section-menu1 ul li.active > a span {color:#f7a600 !important;} .top-bar-section-menu1 ul li.active > a:hover {color:#000 !important;background-color:#FFF} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .top-bar-menu1{height:70px;background-color:#FFF !important} .top-bar-section-menu1{height:70px;background-color:#FFF !important} .top-bar-menu1 .title-area {height:70px;background-color:#FFF !important} .top-bar-menu1 .title-area h1 img{width:100px} .top-bar .toggle-topbar.menu-icon a {color:#000;} /* color de la palabra MENU */ .top-bar .toggle-topbar.menu-icon a span::after {box-shadow: 0 0 0 1px #000, 0 7px 0 1px #000, 0 14px 0 1px #000;} /* color de la hamburguesa */ .top-bar.expanded .toggle-topbar a span::after {box-shadow: 0 0 0 1px #f7a600, 0 7px 0 1px #f7a600, 0 14px 0 1px #f7a600; } /* color de la hamburguesa presionado*/ .top-bar-section-menu1 ul li {margin-top:0px !important;margin-bottom:0px !important;padding-top:0px !important;padding-bottom:0px !important} .top-bar-section-menu1 ul li > a{margin-top:0px !important;margin-bottom:0px !important;padding-top:0px !important;padding-bottom:0px !important;line-height:2em;} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* SLIDER DE BANNERS*/ .layerslider-home{width:auto; height: 100%;min-height:50vh;/*position:absolute !important;top:0 !important;left:0 !important;*/} .layerslider-home h1{top:10vh;left:8%;padding:30px 20px 25px 20px;background-color: rgb(255, 255, 255,0.8);position:absolute !important;z-index:20 !important;font-family: 'Montserrat', sans-serif;font-size:5em;line-height:0.8em;letter-spacing:-0.03em;font-weight:900; color: #FFF !important;-webkit-text-stroke-width: 2px !important;-webkit-text-stroke-color: black !important; } .layerslider-home h1 span{font-family: 'Mr Dafoe', cursive;color:#232323;font-size:1.5em;margin-left:-10px} .layerslider-home hr{border:1.5px solid #232323;margin-top:10px;padding-bottom:0px;margin-bottom:0px} .layerslider-home p{margin-top:-40px;padding-top:0px;font-size:0.4em;font-family: 'Raleway', sans-serif;-webkit-text-stroke-width: 0px;color:#262626} .layerslider-home p a{font-family: 'Mr Dafoe', cursive;color:#f7a600;font-size:2em} .layerslider-home p a:hover{color:#232323;} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .layerslider-movil{width:626px;height:969px;} .layerslider-movil h1{background-color: rgb(255, 255, 255,0.8);z-index:20 !important;color: #FFF;top:25vh !important;left:10%;padding:30px 20px 25px 20px;position:absolute !important;font-family: 'Montserrat', sans-serif;font-size:3em;line-height:0.8em;letter-spacing:-0.03em;font-weight:900;width:70% !important; -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;} .layerslider-movil h1 span{font-family: 'Mr Dafoe', cursive;color:#232323;font-size:1.5em;margin-left:-10px} .layerslider-movil hr{border:1.5px solid #232323;margin-top:10px;padding-bottom:0px;margin-bottom:0px;border:1px solid #232323;} .layerslider-movil p{padding-top:10px;font-size:0.5em;font-family: 'Raleway', sans-serif;-webkit-text-stroke-width: 0px;color:#262626;margin-top:5px;line-height:0.9em} .layerslider-movil p a{font-family: 'Mr Dafoe', cursive;color:#f7a600;font-size:2em} .layerslider-movil p a:hover{color:#232323;} .layerslider-home-movil{} .layerslider-home-movil h1{background-color: rgb(255, 255, 255,0.8);z-index:20 !important;color: #FFF;top:25vh;left:5%;padding:30px 20px 25px 20px;position:absolute !important;font-family: 'Montserrat', sans-serif;font-size:6em;line-height:0.8em;letter-spacing:-0.03em;font-weight:900;width:70% !important; -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;} .layerslider-home h1 span{font-family: 'Mr Dafoe', cursive;color:#232323;font-size:1.5em;margin-left:-10px} .layerslider-home-movil hr{border:1.5px solid #232323;margin-top:10px;padding-bottom:0px;margin-bottom:0px;border:1px solid #232323;} .layerslider-home-movil p{padding-top:0px;font-size:0.9em;font-family: 'Raleway', sans-serif;-webkit-text-stroke-width: 0px;color:#262626;margin-top:5px;line-height:0.9em} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* MENU IDIOMAS */ .menu-idiomas{position:fixed;top:0;left:0;height:100vh;z-index:1500;margin-left:0%;width:3%;padding-top:150px;background-color:#F8F8F8} .menu-idiomas a{margin-top:0px;text-align:center;font-size:0.8em;font-weight:bold;color:#262626;font-family: 'Raleway', sans-serif; } .menu-idiomas a.active{color:#f8b144} .menu-idiomas a.tooltips {position: relative;display: inline;font-size:1.1em;} .menu-idiomas a.tooltips span {visibility: hidden;position: absolute;width:200px;color:#FFF;background: #262626;height: 30px;line-height: 30px;text-align: center;visibility: hidden;border-radius: 6px;font-size:0.9em !important} .menu-idiomas a.tooltips span:after {content: '';position:absolute;top:50%;left: 0%;margin-left: -8px;width: 0; height: 0; border-bottom: 8px solid #262626;border-right: 8px solid transparent;border-left: 8px solid transparent;} .menu-idiomas a:hover.tooltips span {font-family: 'Pacifico', cursive;font-size:0.9em;visibility: visible;top: -10px;left: 50%;margin-left: 30px;z-index: 999;font-weight:lighter; letter-spacing:0.1em} .menu-idiomas-movil{padding-top:18px;height:50px} .menu-idiomas-movil a{font-size:1em;font-weight:bold;color:#262626;font-family: 'Raleway', sans-serif;margin-right:10px;line-height:1.5em} .menu-idiomas-movil a.active{color:#f8b144} /* MENU REDES */ .menu-redes{position:fixed;bottom:0px !important;right:0;height:100vh;z-index:1500;margin-right:0%;width:3%;margin-top:30vh !important;background-color:#F8F8F8} .menu-redes .menu{margin-top:40vh} .menu-redes a{color:#FFF;margin-bottom:0px;text-align:center;font-size:0.8em;font-weight:bold; bottom:0 } .menu-redes a.red img{width:35px} .menu-redes a.red img:hover{opacity:0.8} .menu-redes a.tooltips {position: relative;display: inline;} .menu-redes a.tooltips span {visibility: hidden;position: absolute;width:200px;color:#FFF;background: #262626;height: 30px;line-height: 25px;text-align: right;visibility: hidden;border-radius: 6px;font-size:1.1em !important;padding-right:10px;margin-right:0px;} .menu-redes a.tooltips span:after {content: '';position:absolute;top:50%;width: 0; height: 0; border-bottom: 8px solid #262626;border-right: 8px solid transparent;border-left: 8px solid transparent;margin-left:0px} .menu-redes a:hover.tooltips span {font-family: 'Pacifico', cursive;font-size:0.9em;visibility: visible;top: -10px;margin-left:-250px;z-index: 999;font-weight:lighter; letter-spacing:0.1em} .menu-redes-movil{padding-top:15px;height:50px} .menu-redes-movil img{width:30px;margin-left:10px} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { .menu-redes a.red img{width:25px} } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* HOME */ /* Botón Envianos un mensaje */ .boton-contacta-home{position:fixed;bottom:0;left:30;z-index:1550;font-size: 1.2em;font-family: 'Raleway', sans-serif;color:#262626;font-weight: bold;margin-bottom:30px;margin-left:10px;writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr;writing-mode:vertical-lr;transform: rotate(180deg);height:400;white-space: nowrap;} .boton-contacta-home a{color:#262626;} .boton-contacta-home a span{color:#f7a600;} .boton-contacta-home:hover {animation: shake-boton 0.5s;/* Start the shake animation and make the animation last for 0.5 seconds */animation-iteration-count: infinite;/* When the animation is finished, start again */;} @keyframes shake-boton { 0% { transform: translate(1px, 1px) rotate(180deg); } 10% { transform: translate(-1px, -2px) rotate(179deg); } 20% { transform: translate(-3px, 0px) rotate(181deg); } 30% { transform: translate(3px, 2px) rotate(180deg); } 40% { transform: translate(1px, -1px) rotate(181deg); } 50% { transform: translate(-1px, 2px) rotate(179deg); } 60% { transform: translate(-3px, 1px) rotate(180deg); } 70% { transform: translate(3px, 1px) rotate(179deg); } 80% { transform: translate(-1px, -1px) rotate(181deg); } 90% { transform: translate(1px, 2px) rotate(180deg); } 100% { transform: translate(1px, -2px) rotate(179deg); } } /* Seccion social */ .home-social{background-color:#FFF;padding-top:60px;padding-bottom:60px; background-image: url('../imagenes/fondo-notas-pentagrama.png');background-repeat: no-repeat;background-size:100%;background-position:0px -400px} .home-social .col1-1{border-left:2px solid #f2f2f2;padding-top:20px;padding-bottom:20px} .home-social .col1-2{border-left:2px solid #f2f2f2;padding-top:20px;padding-bottom:20px} .home-social .col1-3{border-left:2px solid #f2f2f2;border-right:2px solid #f2f2f2;padding-top:20px;padding-bottom:20px} .home-social .col1-1 h3{font-weight:800;} .home-social .col1-2 h3{font-weight:800;} .home-social .col1-3 h3{font-weight:800;} .home-social .col2-1{border-left:2px solid #f2f2f2;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;} .home-social .col2-2{border-left:2px solid #f2f2f2;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;} .home-social .col2-3{border-left:2px solid #f2f2f2;border-right:2px solid #f2f2f2;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;padding:20px 20px 20px 20px} .home-social .col2-2 p{color:#262626;font-size:0.8em;} .home-social .col2-2 .btn-verperfil{padding:5px 10px 5px 10px;background-color:#0098f4;color:#FFF;font-family: 'Muli', sans-serif;font-size:0.7em;border-radius:3px;margin-right:10px} .home-social .col2-2 .btn-vermas{padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;margin-top:20px;line-height:3em;background-color:transparent;color:#0098f4;font-family: 'Muli', sans-serif;font-size:0.7em;} .home-social .col2-2 table{border:none;font-family: 'Muli', sans-serif;font-size:0.6em;padding-top:0px;padding-bottom:0px;margin-top:0px;margin-bottom:0px;background-color:transparent} .home-social .col2-2 table tr{padding-top:0px;padding-bottom:0px;margin-top:0px;margin-bottom:0px;background-color:transparent} .home-social .col2-2 table tr td{padding-top:0px;padding-bottom:0px;margin-top:0px;margin-bottom:0px;background-color:transparent} .home-social .col2-2 table td #username-instagram{font-weight:bold;font-size:0.9em;} .home-social .col2-2 table td #followed_by-instagram{font-weight:bold;font-size:0.8em;color:#CCC;} .home-social .col2-3 .evento:hover p{border-right:2px solid #f7a600;color:#CCC;background-color:#f7a600;color:#FFF} .home-social .col2-3 .evento p{color:#262626;background-color:#f3f4f6;padding:10px 10px 10px 10px} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .home-social{margin-top:-60px} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* Invitación a configurar tambor */ .home-configura-tambor{background-color:#FFF;padding-top:100px;padding-bottom:100px} .boton-configurar-home:hover img{-webkit-animation:spin 1s linear;-moz-animation:spin 1s linear;animation:spin 1s linear;} @-moz-keyframes spin { 100% { -moz-transform: rotate(45deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(45deg); } } @keyframes spin { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } } /* Vibracion */ /* EFECTO VIBRACIÓN IMAGEN*/ .vibracion img{ animation: shake-imagen 0.5s; animation-iteration-count: infinite; } @keyframes shake-imagen { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } /* CATALOGOS */ .catalogo-seccion{padding-top:80px;padding-bottom:80px} .catalogo-seccion .titulo{padding-bottom:30px} .hvrbox .hvrbox-layer_scale {Border-radius: 50%;-moz-transform: scale(0);-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);} .hvrbox:hover .hvrbox-layer_scale,.hvrbox.active .hvrbox-layer_scale {border-radius: 0%;-moz-transform: scale(1);-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} .hvrbox .hvrbox-text{font-family: 'Raleway', sans-serif;font-size:1em;font-weight:400;} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .catalogo-seccion{margin-top:-60px} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* CALENDARIO */ .eventos-seccion{background-color:#FFF;padding-top:60px;padding-bottom:80px} .eventos-seccion .titulo{padding-bottom:30px} .eventos-seccion .evento-detalle{} .eventos-seccion .evento-detalle .contenido{border:1px solid #232323;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} .eventos-seccion .evento-detalle .boton-evento:hover .contenido{background-color:#ffa700;border:1px solid #ffa700;} .eventos-seccion .evento-detalle .boton-evento:hover .contenido h5{color:#FFF} .eventos-seccion .evento-detalle .boton-evento:hover .contenido h5 span span{color:#232323 !important} .eventos-seccion .evento-detalle .boton-evento:hover .contenido h3{color:#FFF} .evento-seccion{padding-top:60px;padding-bottom:100px} .evento-seccion .contenido-izq h5{font-weight:bolder} .evento-seccion .contenido-izq h3{font-weight:bolder} .evento-seccion .contenido-dcha{} .evento-seccion .contenido-dcha .boton-enlace{font-size:0.9em;color:#000;font-family: 'Muli', sans-serif;} .evento-seccion .contenido-dcha .boton-enlace:hover{color:#FFF !important;} .evento-seccion .contenido-dcha .boton-enlace i{font-size:2em;} /* QUIENES SOMOS */ .quienes-seccion{background-color:#FFF;padding-top:80px;padding-bottom:80px; background-image: url('../imagenes/fondo-detalle-logo-gonalca.png');background-repeat: no-repeat;background-size:600px} .quienes-seccion .titulo{position:relative;z-index:200;padding-top:20px;padding-bottom:40px} .quienes-seccion .titulo h2{font-size:2.5em;line-height:2.5em;letter-spacing:-0.03em;font-weight:900;position:relative;z-index:200;font-family: 'Mr Dafoe', cursive;color:#232323;position:relative;z-index:250} .quienes-seccion .titulo h1{font-family: 'Raleway', sans-serif;font-size:3em;line-height:1em;font-weight:400} .quienes-seccion .titulo h1 span{font-weight:800} .quienes-catalogo{background-color:#FFF;padding-top:100px;padding-bottom:100px; background-image: url('../imagenes/detalle-flechas2.png');background-repeat: no-repeat;background-size:400px 400px} .quienes-catalogo .titulo{pposition:relative;z-index:200;padding-top:60px;padding-bottom:60px} .quienes-catalogo .titulo h2{font-size:2.5em;line-height:2.5em;letter-spacing:-0.03em;font-weight:900;position:relative;z-index:200;font-family: 'Mr Dafoe', cursive;color:#232323;position:relative;z-index:250} .quienes-catalogo .titulo h1{font-family: 'Raleway', sans-serif;font-size:3em;line-height:1em;font-weight:400} .quienes-catalogo .titulo h1 span{font-weight:800} .quienes-catalogo .boton{width:152%;height:100%;background-color:#f7a600;border-color:#f7a600;margin-left:-52%;z-index:100} .quienes-catalogo .boton i{font-size:3.2em;color:#262626;text-align:center;margin-left:50%;} .quienes-catalogo .boton div{position:relative;padding-top:6%;} a.boton-catalogo:hover .boton{background-color:#f3f4f6 !important;border-color:#f3f4f6 } a.boton-catalogo:hover i{color:#f7a600 !important} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .quienes-seccion{margin-top:-60px} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* CONTACTO */ .contacto-seccion{padding-top:60px;padding-bottom:100px;background-image: url('../imagenes/fondo-detalle-logo-gonalca.png');background-repeat: no-repeat;background-size:600px} .contacto-seccion .triangulo {width: 0;height: 0;border-left: 25px solid #f2f2f2;border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .contacto-seccion .texto{padding-top:50px} .contacto-seccion .texto .texto1{background:transparent;border-color:#f2f2f2;margin-bottom:0px;padding:30px 30px 30px 30px} .contacto-seccion .texto .texto2{background-color:#f2f2f2;border-color:#f2f2f2;margin-top:0px;padding:30px 30px 30px 30px;-webkit-transition: all 0.3s;-moz-transition:all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} .contacto-seccion .texto .texto2 h2{font-family: 'Raleway', sans-serif;font-size:2.5em;line-height:1em;font-weight:800} .contacto-seccion .texto .texto2 p{font-family: 'Raleway', sans-serif;font-size:1.7em;line-height:1.5em;font-weight:400} .contacto-seccion .texto .texto2 p a{color:#ffa800;font-weight:bold} .contacto-seccion .texto .texto2:hover{background-color:#ffa800;color:#FFF} .contacto-seccion .texto .texto2:hover h2{color:#FFF} .contacto-seccion .texto .texto2:hover p{color:#FFF} .contacto-seccion .texto .texto2:hover p a{color:#232323;text-decoration: underline;text-decoration-color:#FFF;} .contacto-seccion .texto .texto2:hover p a:hover{color:#FFF;text-decoration: underline;text-decoration-color:#FFF;} /* SECCIONES LEGALES */ .legal-seccion{background-color:#FFF;padding-top:60px;padding-bottom:100px} .legal-seccion p{font-size:0.9em} .legal-seccion ul li{font-size:0.9em !important} .legal-seccion ol li{font-size:0.9em !important} .legal-seccion a{color:#ffa700;} .legal-seccion a:hover{color:#CCC;} /* FORMULARIOS */ .boton{background-color:#FFF;color:#262626;border:1px solid #262626; width:auto;font-family: 'Montserrat', sans-serif;font-weight:600} .boton:hover{background-color:#262626;color:#FFF} fieldset{background-color:#f8f8f8;border:none} legend{} label{font-family: 'Muli', sans-serif;color:#232323;} input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, select {background-color:#F2F2F2 !important; height: 2.5rem; color:#232323;border-radius: 0px; border-color:#f2f2f2 !important;border-style:solid;border:none;-webkit-appearance: none;box-shadow: inset 0px 0px 0px 0px red;font-family: 'Muli', sans-serif;font-size:1em} select {font-size:1em;font-family: 'Muli', sans-serif !important;} select option{font-size:1em;font-family: 'Muli', sans-serif !important;} ::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #333;font-style: italic;} ::-moz-placeholder { /* Firefox 19+ */color: #333;font-style: italic;} :-ms-input-placeholder { /* IE 10+ */color: #333;font-style: italic;} :-moz-placeholder { /* Firefox 18- */color: #333;font-style: italic;} /* Customize the label (the container) */ .container {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 1em;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} /* Hide the browser's default checkbox */ .container input {position: absolute;opacity: 0;} /* Create a custom checkbox */ .checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #CCC;} /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark {background-color: #ffa700;} /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark {background-color: #ffa700;} /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after {content: "";position: absolute;display: none;} /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after {display: block;} /* Style the checkmark/indicator */ .container .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} /* CONFIGURA TU TAMBOR*/ .radio-toolbar { margin: 10px; } .radio-toolbar input[type="radio"] { opacity: 0; position: absolute; width: 0; } .radio-toolbar label{display:inline-block;background-color:#fff;padding:10px 20px;font-family: sans-serif, Arial;font-size:16px;border:1px solid #444;border:1px solid #FFF;border-radius:4px;margin-bottom:15px;margin-top:15px;} .radio-toolbar label:hover {background-color: #f2f2f2;background-color:#ffa700;color:#FFF; border: 1px solid #ffa800;} .radio-toolbar input[type="radio"]:focus + label {border: 2px dashed #ffa800;} .radio-toolbar input[type="radio"]:checked + label {background-color: #f2f2f2;border-color: #ffa800;background-color:#ffa700;color:#FFF;} .configura-tambor-seccion{background-color:#FFF;padding-top:60px;padding-bottom:30px;} .configura-pasos{background-color:#FFF;padding-top:0px;padding-bottom:0px;} .configura-pasos a:hover .numberCircle{background:#f8b144;border: 2px solid #f8b144;color: #FFF;text-align: center;font-size: 0.9em;font-family: 'Raleway', sans-serif;} .configura-pasos a:hover span{color:#262626;font-weight:800;font-size:0.9em;} .configura-pasos .numberCircle{margin:0 auto;border-radius:50%;width:40px;height:40px;padding:5px;background:#ccc;border:2px solid #ccc;color:#FFF;text-align:center;font-size:0.9em;font-family:'Raleway',sans-serif;font-weight:800;} .configura-pasos .numberCircle.active {background:#f8b144;border: 2px solid #f8b144;color: #FFF;text-align: center;font-size: 0.9em;font-family: 'Raleway', sans-serif;} .configura-pasos .paso span{font-family: 'Raleway', sans-serif;padding-top:10px;line-height:2em;color:#CCC;font-weight:800;font-size:0.9em;} .configura-pasos .paso span.active{color:#262626;font-weight:800;font-size:0.9em;} .configura-form{background-color:#FFF;padding-top:40px;padding-bottom:40px;} .configura-form label h4{font-family: 'Raleway', sans-serif;text-align:center;margin-bottom:30px} .configura-form label h4 span.numero{color:#dde6ef;font-size:1.4em;} .configura-form label h4 span.punto{color:#f8b144;font-size:1.4em;font-family: 'Raleway', sans-serif;} .configura-form label h4 a{color:#FFF;margin-top:-15px} .configura-form label h4 a img{margin-top:-25px;width:25px} .configura-form label{font-family: 'Muli', sans-serif;text-align:center;font-size:0.9em !important} .configura-form label span{font-weight:bolder;line-height:2em} .configura-form fieldset{background-color:#f8f8f8;} .configura-form label .lupa{padding-top:15px;margin-top:15px;font-size:2em;color:#FC3;} .configura-form label .lupa i{padding-top:15px;margin-top:15px;} .configura-form label .lupa:hover{color:#444;} .configura-form .tuseleccion{} .configura-form .texto1 {border-color:#f2f2f2;background-color:#FFF;font-size:1.3em} .configura-form .triangulo {width: 0;height: 0;border-top: 25px solid #f2f2f2;border-left: 20px solid transparent; border-right: 20px solid transparent; } .configura-form h5{background-color:#f2f2f2;padding:5px 5px 5px 10px;font-size:0.9em;font-family: 'Raleway', sans-serif;font-weight:600;line-height:2.2em;} .configura-form p{background-color:#FFF;padding:0px 5px 0px 10px;font-size:0.8em;font-family: 'Muli', sans-serif;} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .configura-pasos .paso span{display:none} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* Error Handling */ [data-abide] .error small.error, [data-abide] .error span.error, [data-abide] span.error, [data-abide] small.error { font-size:1em;font-family: 'Muli', sans-serif; font-style:normal; background: transparent; color: #f04124; } span.error, small.error { font-size:1em;font-family: 'Muli', sans-serif; font-style:normal; background: transparent; color: #f04124; } .error small.error { font-size:1em;font-family: 'Muli', sans-serif; font-style:normal; font-weight: normal; background: transparent; color:#f04124; } .error > label > small { background: transparent; color: #676767; } /* FORMULARIOS SIMPLES */ .form label{font-family: 'Muli', sans-serif;color:#232323;} .form label span{color:#ffa800; font-size:1.4em;line-height:0.8em} .form small.error {font-size:0.6em !important; font-family: 'Muli', sans-serif;font-style:normal;background: transparent;color: #f04124;} .form a{color:#ffa700;font-weight:bold;} .form a:hover{color:#CCC;} /* PIE DE PÁGINA */ footer .footer{padding-top:40px;padding-bottom:0px} footer .footer .col11{border-left:2px solid #f2f2f2;padding-top:20px;padding-bottom:20px;} footer .footer .col12{border-left:2px solid #f2f2f2;padding-top:20px;padding-bottom:20px;} footer .footer .col13{border-left:2px solid #f2f2f2;border-right:2px solid #f2f2f2;padding-top:20px;padding-bottom:20px;} footer .footer .col21{border-top:2px solid #f2f2f2;border-left:2px solid #f2f2f2;padding-top:40px;padding-bottom:40px} footer .footer .col22{border-top:2px solid #f2f2f2;border-left:2px solid #f2f2f2;padding-top:40px;padding-bottom:40px} footer .footer .col23{border-top:2px solid #f2f2f2;border-left:2px solid #f2f2f2;border-right:2px solid #f2f2f2;padding-top:40px;padding-bottom:40px} footer .footer h2{font-family: 'Raleway', sans-serif;COLOR:#222;font-size:1.5em;line-height:0.8em;letter-spacing:0em;font-weight:800} footer .footer h2 span{color:#f7a600;font-size:1.5em;} footer .footer p{color:#262626;font-size:0.9em} footer .footer p a{color:#262626;} footer .footer p a:hover{color:#f7a600 !important} footer .footer .creditos{border-left:2px solid #f2f2f2;border-top:2px solid #f2f2f2;border-right:2px solid #f2f2f2;border-bottom:0px solid #f2f2f2;padding-top:20px;padding-bottom:60px;} footer .footer .creditos p{color:#262626;font-size:0.8em} footer .footer .creditos p a{color:#262626} footer .footer .creditos p a:hover{color:#CCC} /* SCROLL */ .scrollup{width:55px;height:55px; position:fixed; bottom:0px; right:0px;display:none;text-indent:-9999px; background: url(../imagenes/icon-top-hover2.jpg) no-repeat;z-index:1600; background-size: 55px 55px;} .scrollup:hover{width:55px;height:55px; position:fixed; bottom:0px; right:0px;display:none;text-indent:-9999px; background: url(../imagenes/icon-top2.jpg) no-repeat;background-size:55px 55px;} @media only screen { } /* // Small screens Define mobile styles */ @media only screen and (max-width: 40em) { .scrollup{width:30px;height:30px; bottom:0px; right:30px;background-size: 30px 30px;} .scrollup:hover{width:30px;height:30px;bottom:0px;right:30px;background-size:30px 30px;} } /*// Small screens max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (min-width: 40.063em) { } /* // Medium screens min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* // Medium screens min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 64.063em) { } /* // Large screens min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* // Large screens min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width: 90.063em) { } /* // XLarge screens min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* // XLarge screens min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width: 120.063em) { } /*// XXLarge screens min-width 1921px, xxlarge screens */ /* AVISO COOKIES */ /* #overbox3 {position: fixed;bottom:0;left:0;width:50%;z-index:2000;display: block;opacity:0.8;margin-left:25%} #infobox3 {margin:auto;position:relative;top: 0px;height: auto;width: 100%;text-align:center;padding-top:30px;padding-bottom:10px;padding-left:20px;padding-right:20px;z-index: 9000;background-color: rgb(0, 0, 0,0.9) !important;} #infobox3 p {color:#FFF;line-height:normal;font-size:0.9em;text-align:center;z-index: 9000;line-height:2em} #infobox3 p a {color:#FFF !important;margin-right:5px;z-index: 99000;padding:5px 5px 5px 5px;text-decoration: none; } #infobox3 p a:hover {color:#f7a600 !important;} @media only screen { } @media only screen and (max-width: 40em) { #overbox3 {width:100% !important;z-index:2000;display:block;opacity:0.8;margin-left:0%} } @media only screen and (min-width: 40.063em) { } @media only screen and (min-width: 40.063em) and (max-width: 64em) { } @media only screen and (min-width: 64.063em) { } @media only screen and (min-width: 64.063em) and (max-width: 90em) { } @media only screen and (min-width: 90.063em) { } @media only screen and (min-width: 90.063em) and (max-width: 120em) { } @media only screen and (min-width: 120.063em) { } */ /*PAGINACION*/ #Paginacion {} #Paginacion li {list-style:none; float:left; } #Paginacion a {float: left; margin-right:0px;background:transparent; font-family: 'Hind', sans-serif !important;font-weight: 400;color:#FFF;font-size:0.9rem;border:0px;} #Paginacion .numero {font-family: 'Hind', sans-serif !important;font-size:0.9rem; background:transparent;padding: 9px 11px; color:#FFF;border:1px solid #FFF;} #Paginacion .numero:hover {background-color: #FFF;color:#232323;border:1px solid #FFF;font-weight:bolder;} #Paginacion .active {background-color: #FFF; color:#232323;padding: 9px 11px;border:1px solid #FFF;font-size:0.9rem;font-weight:bolder; } #Paginacion .end-off,#Paginacion .first-off,#Paginacion .previous-off,#Paginacion .next-off{background:transparent;color:#FFF;font-size:1.3em;padding-top:10px;padding-left:5px;padding-right:5px} #Paginacion .end-on,#Paginacion .first-on,#Paginacion .next-on,#Paginacion .previous-on{background:transparent;color:#232323;font-size:1.3em;padding-top:10px;padding-left:5px;padding-right:5px} #Paginacion .end-on:hover,#Paginacion .first-on:hover,#Paginacion .next-on:hover,#Paginacion .previous-on:hover{background:transparent;color:#FFF !important;font-size:1.3em;padding-top:10px;padding-left:5px;padding-right:5px;line-height:2em;}