/* ----------- VARIABLES */ @color_primario: #69b9dd; @color_secundario: #dbaf48; @color_terciario: #edeef0; @color_main_letras : #81878a; /* ----------- FUENTES */ body, h1, h2, h3, h4, h5, h6, .montserrat{ font-family: 'Montserrat', sans-serif; font-weight: 300; } body{ font-size: 18px; } /* ----------- COLORES */ a, a:hover, .uk-navbar-dropdown-nav>li>a, .color-general{ color: black; } em, .buybutton, .uk-navbar-dropdown-nav>li>a:hover, .color-primary, .color-primary-hover:hover{ color: @color_primario; } .buybutton:hover, .social, .color-secondary{ color: @color_secundario; } .color-terciario{ color: @color_terciario; } .color-verde{ color: #22cf5b; } .color-rojo{ color: #c4262e; } .color-rojo-vivo{ color: #ff0000; } .color-gris-9{ color: #8c8b8b; } .color-gris-7{ color: #777; } .color-gris-6{ color: #666; } .color-gris-4{ color: #444; } .color-gris{ color: #a7a6a4; } .color-gris-3{ color: #333; } .color-gris-2{ color: #222; } .color-gris-a, .color-gris-a:hover{ color: #a6a8ab; } .color-gris-d{ color: #ddd; } .uk-accordion-title:focus, .uk-accordion-title:hover, .color-blanco, .color-blanco:hover{ color: white; } .uk-slidenav, .color-negro{ color: black; } .color-texto{ color:@color_main_letras; } .color-texto-circulo > p>strong{ color:@color_secundario; } /* ----------- FONDOS */ .bg-primary{ background: @color_primario; } .ajax-file-upload{ background: @color_primario!important; } .bg-secondary{ background: @color_secundario; } .uk-slidenav, .bg-none{ background: none; } .bg-danger, .bg-red{ background: #e30613; } .bg-success{ background: #32d296; } .bg-blue{ background: #1e87f0; } .bg-warning, .bg-yellow{ background: #f6b61a; } .uk-navbar-dropdown, .bg-white{ background: white; } .bg-gris-claro{ background: #DDD; } .bg-gris{ background: #888; } .uk-subnav-pill > .uk-active > a, .bg-gris-oscuro{ background: #444; } .bg-black{ background: black; } .bg-footer{ background: #dbaf48; } .bg-dark{ background: rgba(0,0,0,.8); } .bg-oscuro{ background: rgba(0,0,0,.5); } .bg-claro{ background: rgba(250,250,250,.7); } .bg-test1{ background: #ff0; } .bg-test2{ background: #f0f; } .bg-test3{ background: #0ff; } .grayscale{ filter: grayscale(100%); } .grayscale:hover{ filter: grayscale(0%); transition: .5s; } /* ----------- NAVEGACIÓN */ .uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle { border-bottom: solid 3px transparent; color: white; font-family: 'montserrat', sans-serif; font-size: 15px; padding: 0 20px; min-height: 50px; text-transform: capitalize; } .uk-navbar-nav > li.uk-active > a, .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a.uk-open { color: @color_secundario; outline: none; } .uk-navbar-dropdown-nav{ text-align: left; } .uk-navbar-dropdown { margin: 0; } .uk-navbar-dropdown-nav>li>a{ font-size: 14px!important; margin: 0; padding-left: 5px; } /* Off canvas */ .uk-offcanvas-bar{ background: black; } .uk-offcanvas-bar a{ border:solid 1px #666; color: #CCC; background: #222; font-size: 1em!important; text-align: left; padding-left: 10px!important; } .uk-offcanvas-bar a:hover{ color:#DDD; background: #333; } .uk-offcanvas-bar li{ border-radius: 10px; margin-top: 5px; } .uk-offcanvas-bar .uk-nav-sub a{ padding-left: 20px; } /* ----------- TEMPLATE */ .dot{ background-color: #d7a635; display: block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; } .card_servicios{ .titulo{ color: @color_primario; } .text{ } &:hover{ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; background:@color_primario; .titulo{ color:white; } .text{ color: white; } .icono{ filter: hue-rotate(60deg) brightness(500%); } } } .input-personal{ border: solid 1px @color_primario; } .container_slider{ } .left_margin_0{ margin-left:0; } .left_padding_0{ padding-left:0; } .shadow-container{ -webkit-box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.84); -moz-box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.84); box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.84); } .bg_azul{ background:rgba(252, 182, 61, 0.8); } .container_somos{ .left_margin_0; div{ .left_padding_0; div{ height:70vh;width:100%; } } } .circulo-size{ height:340px; width:340px; } .circulo-size-about{ height:500px; width:500px; } .circulo-mision{ height:500px; width:500px; } .num-circulo{ font-size:280px; font-weight:600; font-family: 'Raleway', sans-serif; } .text-circulo{ font-size: 1.3em; color:#81878a } .circulo-blanco-container{ height:220px; width:220px; background: white; } .border-soluciones{ margin-top:-55px!important; border-top:2px solid @color_primario; z-index:1; } .somos-container{ margin-left: -20px; padding:50px; } .button-somos{ border-radius: 20px; font-weight: 400!important; padding-top:5px; padding-bottom:5px; font-size: 1.1em; } .testimonio-white-card{ border-radius: 30px; color:#dbaf48; text-align: center; -webkit-box-shadow: 5px 4px 9px -2px rgba(0,0,0,0.75); -moz-box-shadow: 5px 4px 9px -2px rgba(0,0,0,0.75); box-shadow: 5px 4px 9px -2px rgba(0,0,0,0.75); .contenido{ margin-top: 5marpx; color:#cbcbcd; font-size: .8em; } &:hover{ background:@color_primario; color: white; .contenido{ margin-top: 5px; color:white; font-size: .8em; } } } .testimonio-blue-card{ background:@color_primario; border-radius: 30px; color:white; text-align: center; -webkit-box-shadow: 5px 4px 9px -2px rgba(0,0,0,0.75); -moz-box-shadow: 5px 4px 9px -2px rgba(0,0,0,0.75); box-shadow: 5px 4px 9px -2px rgba(0,0,0,0.75); .contenido{ margin-top: 5px; color:white; font-size: .8em; } } .custom-input{ color:#fff; font-weight:100; border:1px solid transparent!important; background:transparent; border:solid white; &::-webkit-input-placeholder { color:white!important; } &:-ms-input-placeholder { color:white!important; } &::placeholder { color:white!important; } &::autocomplete{ border:1px solid white; color:white!important; } } .custom-input:focus { outline: none !important; color:white!important; background:transparent; border:1px solid transparent!important; } .negritas{ font-weight: 700; } .semi-negritas{ font-weight: 600; } .boton-banner{ border: 2px solid white; border-radius: 5px; color: white; } .baner-circulos{ margin:40px; border: solid; border-radius: 60px; width: 20px; height: 30px; color: white; svg{ margin:3px; } } .contacto-padding{ padding-left:25px; padding-right:25px; } .circulo-contacto{ .title{ font-size: 6em; } font-size: 1em; border-radius: 100%; background: rgba(15,194,255, 0.4); height: 450px; width: 450px; } .banner-text{ color: white; font-size: 3em; } #map{ min-height: 850px!important; } .padding-messages{ padding:35px; } .card-padding{ padding:30px; } .mision-texto{ font-size: 1.1em; } .promo-text p{ padding:0; margin:0; } /* ---------- GENERALES */ .uk-pagination li{ padding-left: 5px; } .uk-pagination a{ padding: 2px 10px; border-radius: 100%; background: white; border: @color_primario 1px solid; color: @color_primario; } .uk-pagination .uk-active, .uk-pagination a:hover{ background: @color_primario; color: white; border: @color_primario 1px solid; } .pagination-arrows{ background: none!important; border: none!important; color: @color_primario!important; } #cotizacion-fixed{ top:0; right:0px; width:30px; z-index: 1011; } #cotizacion-fixed div{ width: 40px; position: fixed; right: 0; top: 50%; margin-top: -150px; } #cotizacion-fixed img{ box-shadow: 0 0 20px white; border-radius: 10px 0 0 10px; } a{ text-decoration: none!important; } a, a:hover, .uk-button, .uk-button:hover, .transicion, .transicion:hover{ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } h1{ font-size: 1.2em; } h2{ font-size: 1.1em; } h3,h4,h5,h6{ font-size: 1em; } .alpha0{ opacity: 0; } .claro, .alpha-1-5:hover{ opacity:.6; } .oscuro, .alpha-1-0:hover{ opacity:0; } .alpha-1-0, .alpha-1-5, .claro:hover, .oscuro:hover, .alpha1hover:hover{ opacity: 1; } .margin-0{ margin: 0; } .margin-top-5{ margin-top: 5px!important; } .margin-top-10{ margin-top: 10px!important; } .margin-top-20{ margin-top: 20px!important; } .margin-top-25{ margin-top: 25px!important; } .margin-top-40{ margin-top: 40px!important; } .margin-top-50{ margin-top: 50px; } .margin-top-100{ margin-top: 100px; } .margin-top-menos-150{ margin-top: -150px; } .margin-top-menos-100{ margin-top: -100px; } .margin-top-menos-50{ margin-top: -50px; } .margin-top-menos-20{ margin-top: -20px; } .margin-top-menos-10{ margin-top: -10px; } .margin-bottom-10{ margin-bottom: 10px; } .margin-bottom-50{ margin-bottom: 50px; } .margin-h-5{ margin-left: 5px; margin-right: 5px; } .margin-h-10{ margin-left: 10px; margin-right: 10px; } .margin-v-20{ margin-bottom: 20px; margin-top: 20px; } .margin-v-25{ margin-bottom: 25px; margin-top: 25px; } .margin-v-50{ margin-bottom: 50px; margin-top: 50px; } .margin-v-70{ margin-bottom: 70px; margin-top: 70px; } .margin-right-20{ margin-right: 20px; } .margin-right-menos-50{ margin-right: -45px; } .margin-right-menos-20{ margin-right: -15px; } .padding-bottom-10{ padding-bottom: 10px; } .padding-bottom-20{ padding-bottom: 20px; } .padding-bottom-50{ padding-bottom: 50px; } .padding-bottom-60{ padding-bottom: 60px; } .padding-bottom-100{ padding-bottom: 100px; } .padding-bottom-200{ padding-bottom: 200px; } .padding-top-5{ padding-top: 5px; } .padding-top-10{ padding-top: 10px; } .padding-top-20{ padding-top: 20px; } .padding-top-30{ padding-top: 30px; } .padding-top-40{ padding-top: 40px; } .padding-top-50{ padding-top: 50px; } .padding-top-70{ padding-top: 70px; } .padding-top-100{ padding-top: 100px; } .padding-top-200{ padding-top: 200px; } .padding-v-3{ padding-bottom: 3px; padding-top: 3px; } .padding-v-5{ padding-bottom: 5px; padding-top: 5px; } .padding-v-10{ padding-bottom: 10px; padding-top: 10px; } .padding-v-20{ padding-bottom: 20px; padding-top: 20px; } .padding-v-50{ padding-bottom: 50px; padding-top: 50px; } .padding-v-100{ padding-bottom: 100px; padding-top: 100px; } .padding-v-200{ padding-bottom: 200px; padding-top: 200px; } .padding-left-10{ padding-left: 10px; } .padding-left-20{ padding-left: 20px; } .padding-left-50{ padding-left: 50px; } .padding-left-100{ padding-left: 100px; } .padding-right-10{ padding-right: 10px; } .padding-right-20{ padding-right: 20px; } .padding-right-50{ padding-right: 50px; } .padding-h-5{ padding-left: 5px; padding-right: 5px; } .padding-h-10{ padding-left: 10px; padding-right: 10px; } .padding-h-20{ padding-left: 20px; padding-right: 20px; } .padding-h-30{ padding-left: 30px; padding-right: 30px; } .padding-h-50{ padding-left: 50px; padding-right: 50px; } .padding-h-70{ padding-left: 70px; padding-right: 70px; } .padding-0{ padding: 0px; } .padding-5{ padding:5px; } .padding-10{ padding:10px; } .padding-15{ padding:15px; } .padding-20{ padding:20px; } .padding-30{ padding:30px; } .padding-50{ padding:50px; } .min-height-150px{ min-height: 150px; } .min-height-250px{ min-height: 250px; } .max-height-300px{ max-height: 300px; } .min-height-500px{ min-height: 500px; } .max-width-200{ max-width: 200px; } .max-width-600{ max-width: 600px; } .pointer{ cursor: pointer; } #map{ min-height: 400px; } .text-5{ font-size: .5em; } .text-6{ font-size: .6em; } .text-xs, .text-7{ font-size: .7em; } .text-8{ font-size: .8em; } .text-sm, .text-9 { font-size: .9em; } .text-11 { font-size: 1.1em; } .text-lg{ font-size: 1.2em; } .text-xl{ font-size: 1.5em; } .text-xxl{ font-size: 2em; } .text-xxxl{ font-size: 3em; } .text-v{ writing-mode: vertical-lr; transform: rotate(180deg); } .z1{ z-index: 1; } .z2{ z-index: 2; } textarea{ resize:none; } /* BOTONES */ .uk-button{ font-weight: 700; text-transform: none; } /* Danger */ .uk-button-danger{ background: #f00; color: #fff; } .uk-button-danger:active, .uk-button-danger.uk-active, .uk-button-danger:hover, .uk-button-danger:focus{ background: #a00; color: #fff; } /* Blanco */ .uk-button-white { background-color: #fff; color: #333; border: 1px solid #fff; } /* Hover + Focus */ .uk-button-white:hover, .uk-button-white:focus, .uk-button-white:active, .uk-button-white.uk-active { background-color: #ddd; color: #000; } /* Personal */ .uk-button-personal { background: @color_primario; color: white; border: solid 2px @color_primario; } .uk-button-secundario{ background: @color_secundario; color: white; border: solid 2px @color_secundario; } /* Hover + Focus */ .uk-button-personal:active, .uk-button-personal.uk-active, .uk-button-personal:hover, .uk-button-personal:focus { background-color: white; border: solid 2px @color_primario; color: @color_primario; } .uk-lightbox { background: rgba(0,0,0,.7)!important; } .uk-notification-message{ background: none!important; color: white; text-align: center; } .uk-notification-message div{ padding-top: 20px; padding-bottom: 20px; } /* ----------- XML SITE MAP */ urlset{ background: url(../img/design/logo.png) no-repeat top center @color_primario; padding-top: 110px; } url { background: #fff; display: block; padding: 10px } loc{ display: block; margin: 0 auto; width: 1200px; } /* ----------- MEDIA QUERY */ @media (min-width: 1800px){ .somos-img{ min-height: 620px; } } @media (max-width: 1600px){/*Tamaño xl*/ .somos-img{ min-height: 450; } .circulo-mision{ height:420px; width:420px; } } @media (max-width: 1400px){ .somos-img{ min-height: 400; } .circulo-mision{ height:400px; width:400px; } } @media (max-width: 1200px){/*Tamaño l*/ .somos-img{ min-height: 370px; } .circulo-mision{ height:300px; width:300px; } .mision-texto{ font-size: .6em; } .logo-movil{ max-height: 120px; max-width: 180px; margin-top: 25px; } .circulo-size{ height:280px; width:280px; } } @media (max-width: 960px){ /*Tamaño m*/ .somos-img{ min-height: 460px; } .circulo-mision{ height:300px; width:300px; } .mision-texto{ font-size: .6em; } .text-circulo{ font-size: 1.2em; color:#81878a } } @media (max-width: 820px){ .banner-text{ color: white; font-size: 1.5em; } .uk-icon-button { width: 36px!important; height: 36px; } .somos-img{ min-height: 360px; } } @media (max-width: 640px){/* Tamaño s*/ .testimonios-movil{ margin-top: -150px!important; } .contacto-padding{ padding-left:0; padding-right:0; } .padding-left-s{ padding-left:15px; } .circulo-contacto{ .title{ font-size: 3em; } font-size: .7em; border-radius: 100%; background: rgba(15,194,255, 0.4); height: 250px; width: 250px; } .banner-text{ color: white; font-size: 1em; } .text-xxxl { font-size: 2em; } .img-somos-size{ max-height:90px; max-width:250px; } .img-porque-size{ max-height:120px; max-width:350px; } .circulo-size{ height:250px; width:250px; } .num-circulo{ font-size:260px; font-weight:bold; } .somos-container{ margin-left: 5px; padding-left:5px; padding-right:5px; margin-top: -20px; } .somos-img{ min-height: 220px; } #map{ min-height: 450px!important; } .padding-messages{ padding:0; } .card-padding{ padding:15px; } .logo-movil{ max-height: 120px; max-width: 180px; margin-top: 25px; } .circulo-mision{ height:320px; width:320px; } } @media (max-width: 550px){ .somos-img{ min-height: 220px; } }