/* Theme Name: Mondial Theme Theme URI: Author: Author URI: Description: Version: 0.1 License: License URI: Text Domain:bikes */ @font-face{ font-family: dinCond; src: url('fonts/DINWeb-CondBold.woff'); font-weight:700; font-style: normal; } @font-face{ font-family: dinAlt; src: url('fonts/DIN-Alternate-Bold.woff'); font-weight:700; font-style: normal; } @font-face{ font-family: icomoon; src: url('fonts/icomoon.ttf'); } html{ -webkit-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; } *,*:before, *:after{ -webkit-box-sizing: inherit; box-sizing: inherit; } div#wpadminbar{ z-index: 9999999999999999999999; } div.oculto{ display: none; } .contenedor, { width:100%; margin:0 auto; } a{ outline: none; } .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; background: url("img/bitmap.png") center no-repeat #fff; background-size: 130px; } /**MENUS-HEADER**/ div.logo{ text-align: center; margin-bottom: -13%; } /* div.logo img.logotipo, div.logo img.logotipo-new{ position: relative; top: 0px; right: 10px; width: 30%; z-index: 999; } */ div.logo img.logotipo{ display: none; } div.menu-movil{ position: fixed; width: 100%; padding-top: 2%; padding-bottom: 2%; background-color: #04203c; z-index: 100000; display: block; font-size: 0; } div.menu-movil a.movil::before{ font-family: 'FontAwesome'; content:"\f0c9"; text-align: center; color: #ffffff; font-size: 30px; margin-left: 25%; margin-top: 5%; } div.menu-movil a{ text-decoration: none; font-family: dinAlt; font-size: 20px; text-transform: uppercase; color: #ffffff; } div.menu-movil div.logo{ text-align: center; display: inline-block; width: 50%; vertical-align: middle; margin-bottom: 0; } div.menu-movil div.logo img{ width: 45%; top: 0; max-width: 200px; } div.menu-movil a.movil{ width: 25%; display: inline-block; vertical-align: middle; } div.contenedor-menu-movil{ position: absolute; -webkit-transform: translateX(-100%); transform: translateX(-100%); top: 98%; height: 100vh; bottom:0; z-index: 100000; width: 100%; background-color: #04203c; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: 100000000000; } div.contenedor-menu-movil.is-open{ -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: 100000000000; overflow: auto; } div.menu-movil div.button.financiacion, div.menu-movil ul{ list-style: none; padding-left: 15%; } div.menu-movil ul:first-child{ padding-top: 10%; } div.menu-movil ul li{ padding-bottom: 10%; } div.menu-movil ul li.es, div.menu-movil ul li.pt{ width: 50px; display: inline-block; } div.menu-movil ul li.es a, div.menu-movil ul li.pt a{ font-size: 0px; position: relative; } div.menu-movil ul li.es a::before{ content: ' '; font-family: 'Muli',sans-serif; font-size: 15px; background-image:url("img/002-spain.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 18px; height: 18px; display: inline-block; position: absolute; border: 2px solid #726437; border-radius: 50%; box-sizing: content-box; } div.menu-movil ul li.pt a:after{ content: ' '; font-family: 'Muli',sans-serif; font-size: 15px; background-image:url("img/003-portugal.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 18px; height: 18px; display: inline-block; position: absolute; opacity: 0.5; border: 2px solid #726437; border-radius: 50%; box-sizing: content-box; } div.contenedor-menu-movil li.menu-item-has-children ul{ margin-top: 10%; display: none; } @media only screen and (min-width: 1200px){ div.menu-movil{ display: none; } div.contenedor{ display: inline; } div.logo{ text-align: center; margin-bottom: -4%; } div.logo img.logotipo, div.logo img.logotipo-new{ position: relative; margin-top: 3%; width: 10%; top: 10px; right: 0px; z-index: 999; } div.logo img.logotipo-new { width: 8%; top: 25px; } div.contenedor-navegacion{ display: block; z-index: 1; } div.contenedor.menu{ position: absolute; z-index: 100000; width: 100%; top: -40px; } nav.menu-sitio{ position: relative; width: 80%; margin-left: 11%; text-align: center; top: 3px; z-index: 998; margin-bottom: 2%; background-color: #04203c; border: 2px solid #000000; } div.contenedor-navegacion ul { margin: 0; margin-left: 3%;/* arreglar esto al añadir financiacion de nuevo*/ /* margin-left: -5%; */ padding: 1% 0; width: 100%; margin-top: 0; list-style: none; } div.contenedor-navegacion ul li { display: inline-block; padding-right: 4%; } div.contenedor-navegacion ul li.es{ padding-right: 2%; } div.contenedor-navegacion ul li.es a, div.contenedor-navegacion ul li.pt a{ font-size: 0px; position: relative; } div.contenedor-navegacion ul li.es a::before{ content: ' '; top: -17px; font-family: 'Muli',sans-serif; font-size: 15px; background-image:url("img/002-spain.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 18px; height: 18px; display: inline-block; position: absolute; border: 2px solid #726437; border-radius: 50%; box-sizing: content-box; } div.contenedor-navegacion ul li.pt a:after{ content: ' '; top: -17px; font-family: 'Muli',sans-serif; font-size: 15px; background-image:url("img/003-portugal.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 18px; height: 18px; display: inline-block; position: absolute; opacity: 0.5; border: 2px solid #726437; border-radius: 50%; box-sizing: content-box; } div.contenedor-navegacion ul li#menu-item-66{ margin-right: 15%; } div.contenedor-navegacion ul .menu-item-has-children ul{ display: none; position: absolute; width: 11%; height: 150px; text-align: center; margin: 0 auto; margin-left: -2%; margin-top: 1%; background-color: #ffffff; border: 2px solid #000000; } div.contenedor-navegacion ul li a{ text-decoration: none; font-family: dinAlt; font-weight: 700; padding-top: 5%; text-transform: uppercase; font-size: 16px; color: #ffffff; } div.contenedor-navegacion ul .menu-item-has-children ul li a{ color: #04203c; font-size: 16px; } div.contenedor-navegacion ul .menu-item-has-children ul li a:hover{ color: #857647; } } @media only screen and (min-width: 1600px){ div.contenedor-navegacion ul li { padding-right: 4%; } div.contenedor-navegacion ul li#menu-item-66{ margin-right: 15%; } div.contenedor-navegacion ul .menu-item-has-children ul{ width: 10%; } } @media only screen and (min-width: 1800px){ div.contenedor-navegacion ul .menu-item-has-children ul { width: 8%; margin-left: -1%; } } /**PAGINA INICIO**/ div.contenedor{ display: none; overflow-x: hidden; } div.solo-movil div.caja-imagen{ display:inline; position: relative; width: 100%; height: 100%; overflow-x: hidden; } div.solo-movil div.caja-imagen h1{ position: absolute; margin-top: -64%; margin-left: 12%; font-family: dinCond; font-weight: 700; font-size: 40px; color: #ffffff; } div.solo-movil div.caja-imagen img{ padding-top: 20%; width: 100%; height: auto; } div.solo-movil div.button{ background: #04203c; position: absolute; width: 15%; margin-left: 14%; margin-top: -53%; z-index: 900; padding: 0.5%; text-align: center; } div.solo-movil div.button a{ text-decoration: none; color: #ffffff; margin: 0; text-transform: uppercase; font-family: dinAlt; font-weight: 700; font-size: 14px } @media only screen and (min-width: 375px){ div.solo-movil div.button{ margin-top: -50%; margin-left: 12%; } } @media only screen and (min-width: 500px){ div.solo-movil div.caja-imagen img{ padding-top: 10%; } } @media only screen and (min-width: 700px){ div.solo-movil div.caja-imagen h1{ font-size: 100px; } div.solo-movil div.button { margin-left: 13%; margin-top: -50%; } div.solo-movil div.button a { font-size: 16px; } } @media only screen and (min-width: 1024px){ div.solo-movil div.caja-imagen h1{ font-size: 160px; margin-top: -72%; margin-left: 10%; } div.solo-movil div.button { margin-left: 11%; margin-top: -55%; } } @media only screen and (min-width: 1200px){ div.solo-movil div.caja-imagen{ display: none; } div.solo-movil div.caja-imagen img{ padding-top: 0; } div.contenedor{ display: block; overflow-x: visible; } div.section div.contenedor{ height: 105vh; } div.contenedor div.caja-imagen{ position: relative; width: 100%; margin-right: -1%; overflow-x: hidden; overflow-y: hidden; height: 100%; } div.contenedor h1.parallax{ position: absolute; font-family: dinCond; font-weight: 700; font-size: 140px; margin: 0; top: 17% !important; left: 12.3% !important; color: #ffffff; } div.contenedor div.caja-imagen img{ width: 102%; margin-left: -1%; height: 100%; } div.contenedor div.caja-imagen img.imagen-fondo{ margin-top: -17%!important; } div.contenedor div.caja-imagen img.imagen-intermedia{ height: auto; margin-top: 0; } div.contenedor div.caja-imagen img.imagen-moto{ position: absolute; margin-top: 5%; width: 80%; height: auto; -webkit-transform: translate(15%, 7%) !important; transform: translate(15%, 7%) !important; } @media screen and (min-height:700px){ div.contenedor div.caja-imagen img.imagen-moto{ -webkit-transform: translate(15%, 10%) !important; transform: translate(15%, 10%) !important; } } div.contenedor div.button{ background: #04203c; position: absolute; width: 15%; padding: 15px; text-align: center; z-index: 100; left: 13%; top: 40%; } div.contenedor div.button a{ text-decoration: none; color: #ffffff; font-family: dinAlt; font-weight: 700; font-size: 17px; } div.contenedor div.links{ position: absolute; top: 40%; left: 85%; } div.contenedor div.links a{ display: block; padding: 9px; width: 100%; text-decoration: none; color: #ffffff; font-family: dinAlt; font-size: 20px; font-weight: 700; text-transform: uppercase; } section.mapa.inicio{ margin-top: -0.5%; } } @media only screen and (min-width: 1600px){ div.contenedor div.links a{ font-size: 30px; } div.contenedor h1.parallax{ font-size: 180px; } div.contenedor div.button a{ margin: 0; } } @media only screen and (min-width: 1800px){ div.contenedor h1.parallax { font-size: 210px; } } /**CATALOGO PAGINA INICIO**/ section.catalogo{ background-color: #ffffff; } div.contenedor-texto{ border-bottom: 1.5px double #04203c; overflow-x: hidden; } div.contenedor-texto h1{ font-size: 50px; font-weight: 700; font-style: normal; font-family: dinCond; color: #04203c; text-align: center; } div.contenedor-imagen-catalogo{ text-align: center; z-index:999; } div.contenedor-imagen-catalogo img{ width: 50%; margin-top: -20%; } div.texto-catalogo p{ position: relative; font-family: dinAlt; font-size: 16px; font-weight: 700; margin-bottom: 3%; padding-left: 5%; padding-right: 5%; text-align: left; } section.catalogo div.button-descarga{ background: #857647; position: relative; width: 60%; margin-left: 20%; margin-bottom: 5%; margin-top: 5%; padding: 2%; text-align: center; /* display: none; */ } section.catalogo div.button-descarga a{ text-decoration: none; color: #ffffff; font-family: dinAlt; font-size: 16px; font-weight: 700; margin: 0; text-transform: uppercase; } @media only screen and (min-width: 375px){ section.catalogo div.button-descarga a { margin: 0; } } @media only screen and (min-width: 500px){ div.contenedor-imagen-catalogo img { margin-top: -12%; } } @media only screen and (min-width: 768px){ div.contenedor-texto h1 { font-size: 70px; } div.contenedor-imagen-catalogo img { width: 30%; margin-top: -10%; } div.texto-catalogo p{ font-size: 16px; } section.catalogo div.button-descarga { width: 30%; margin-left: 35%; } section.catalogo div.button-descarga a{ font-size: 16px; } } @media only screen and (min-width: 1024px){ div.contenedor-texto h1 { font-size: 100px; } div.texto-catalogo p { font-size: 25px; } div.contenedor-imagen-catalogo img { width: 40%; margin-top: -15%; } section.catalogo div.button-descarga a { font-size: 20px; } } @media only screen and (min-width: 1200px){ div.contenedor-texto{ border-bottom: 2px double #04203c; } div.contenedor-texto h1{ font-size: 150px; font-weight: 700; font-style: normal; font-family: dinCond; color: #04203c; text-align: center; margin-top: 10%; margin-bottom: 4%; } div.contenedor-imagen-catalogo img{ text-align: center; z-index:999; margin-top: -13%; } div.texto-catalogo{ margin-left: 10%; margin-right: 10%; } div.texto-catalogo p{ position: relative; display: inline-block; width: 100%; font-family: dinAlt; font-size: 20px; font-weight: 700; margin-bottom: 5%; text-align: center; } div.texto-catalogo p.primer{ padding-right: 10px; } section.catalogo div.button-descarga{ background: #857647; position: relative; width: 18%; margin-top: 0; margin-left: 40%; margin-bottom: 5%; padding: 15px; } section.catalogo div.button-descarga a{ text-decoration: none; color: #ffffff; margin:0; text-align: center; font-family: dinAlt; font-size: 18px; font-weight: 700; text-transform: uppercase; } } @media only screen and (min-width: 1400px){ div.contenedor-texto h1{ margin-top: 10%; } div.texto-catalogo p{ position: relative; display: inline-block; width: 100%; font-family: dinAlt; font-size: 20px; font-weight: 700; } } @media only screen and (min-width: 1800px){ div.contenedor-texto h1{ margin-top: 10%; } div.contenedor-texto h1{ font-size:190px; } section.catalogo div.button-descarga { width: 15%; margin-left: 43%; } } /**CONTACTO**/ section.contacto{ background-color:#04203c; text-align: center; } div.pagina-contacto section.contacto{ padding-top: 30%; } section.contacto h1{ /* position: absolute; */ margin: 0; padding: 0; /* margin-left:9%; */ font-family: dinCond; font-weight: 700; font-size: 30px; color: #ffffff; } section.contacto div.texto-contacto-inicio{ display: none; } section.contacto div.texto-contacto-inicio-movil{ display: block; text-align: center; padding-top: 25%; } section.contacto h1.contacta{ margin-top: 5%; margin-left: 30%; } section.contacto h1.con-nosotros{ margin-top: 15%; margin-left: 25%; } section.contacto div.campo span input::-webkit-input-placeholder, section.contacto div.campos-misma-linea span input::-webkit-input-placeholder, section.contacto div.campo span textarea::-webkit-input-placeholder { color: white; font-weight: bold; } section.contacto div.campo span input:-ms-input-placeholder, section.contacto div.campos-misma-linea span input:-ms-input-placeholder, section.contacto div.campo span textarea:-ms-input-placeholder { color: white; font-weight: bold; } section.contacto div.campo span input::placeholder, section.contacto div.campos-misma-linea span input::placeholder, section.contacto div.campo span textarea::placeholder { color: white; font-weight: bold; } @media only screen and (min-width: 375px){ section.contacto h1.contacta { margin-top: 5%; margin-left: 35%; } section.contacto h1.con-nosotros { margin-top: 15%; margin-left: 29%; } } @media only screen and (min-width: 500px){ section.contacto h1.con-nosotros { margin-top: 15%; margin-left: 45%; } section.contacto h1.contacta { margin-top: 15%; margin-left: 25%; } } @media only screen and (min-width: 768px){ section.contacto h1{ font-size: 40px; } section.contacto h1.contacta{ margin-top: 5%; margin-left: 25%; } section.contacto h1.con-nosotros { margin-top: 5%; margin-left: 45%; } } @media only screen and (min-width: 1024px){ section.contacto h1{ margin: 0; padding: 0; font-family: dinCond; font-weight: 700; font-size: 70px; color: #ffffff; } } @media only screen and (min-width:1200px){ section.contacto div.texto-contacto-inicio-movil{ width: 50%; position: absolute; margin-top: 10%; margin-left: 39%; padding-top: 0; } section.contacto div.texto-contacto-inicio{ display: block; } section.contacto.inicio { background-image: url("img/Formulario-contacto.jpg"); padding: 0; background-repeat: no-repeat; background-position: left; background-size: contain; } section.contacto h1.contacta{ position: absolute; margin-top: 46%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: bottom left; transform-origin: bottom left; margin-left: 21%; } section.contacto h1.con-nosotros{ position: absolute; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: bottom left; transform-origin: bottom left; margin-top: 46%; margin-left: 26%; } } @media only screen and (min-width: 1400px){ section.contacto h1.contacta { margin-top: 43%; margin-left: 22%; } section.contacto h1.con-nosotros{ margin-top: 43%; margin-left: 26%; } } @media only screen and (min-width: 1600px){ section.contacto h1.contacta { margin-top: 40%; margin-left: 22%; } section.contacto h1.con-nosotros{ margin-top: 40%; margin-left: 26%; } } @media only screen and (min-width: 1800px){ section.contacto h1.con-nosotros, section.contacto h1.contacta{ font-size: 90px; } section.contacto h1.contacta{ margin-top: 35%; } section.contacto h1.con-nosotros{ margin-top: 35%; } } @media only screen and (min-width: 2400px){ /* section.contacto h1.contacta { margin-left: 17%; } section.contacto h1.con-nosotros { margin-top: 25%; } section.contacto h1.contacta { margin-top: 27%; }*/ } /**FORMULARIO**/ div.contacto-formulario{ width: 100%; } section.formulario{ position: relative; } div.contacto-formulario .campo{ margin-bottom: 20px; width: 100%; padding: 1px 25%; } /* section.contacto.inicio div.contacto-formulario{ padding-top: 10%; } */ div.contenedor-modelos.contacto div.contacto-formulario .campo:first-child{ padding-top: 15%; } div.contacto-formulario .campo input, div.contacto-formulario .campo1 input, div.contacto-formulario .campo2 input, div.contacto-formulario .campo textarea{ width:100%; outline: none; } div.contacto-formulario .button-holder{ text-align: center; } div.contacto-formulario .button{ /* margin-left: 30%; */ margin-bottom: 25%; padding: 7px 40px; text-decoration: none; color: #ffffff; font-family: dinALT; border: none; text-transform: uppercase; background-color: #857647; cursor: pointer; border: none } div.pagina-contacto div.contacto-formulario div.button-holder{ text-align: center; } div.pagina-contacto div.contacto-formulario .button{ margin-left: 0; } div.contacto-formulario .campo textarea{ height: 100px; } div.campos-misma-linea{ padding: 0 25%; } div.contenedor.contenedor-modelos.contacto section.formulario div.campo1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 20px; width: 100%; padding: 1px; } div.contenedor.contenedor-modelos.contacto section.formulario div.campo2{ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 20px; width: 50%; padding: 1px; } div.contacto-formulario .campo textarea, div.contacto-formulario .campo1 input, div.contacto-formulario .campo2 input, div.contacto-formulario .campo input{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-bottom: 2px solid #ffffff; font-family: dinAlt; font-weight: 700; font-size: 16px; color: #ffffff; } div.contacto-formulario div.campo2, div.contacto-formulario div.campo1{ padding-top: 1%; padding-bottom: 1%; } @media only screen and (min-width: 345px){ /* div.contacto-formulario .button { margin-left: 33%; } */ } @media only screen and (min-width: 768px){ /* section.contacto.inicio div.contacto-formulario{ padding-top: 15%; } */ div.contacto-formulario .campo textarea, div.contacto-formulario .campo1 input, div.contacto-formulario .campo2 input, div.contacto-formulario .campo input{ font-size: 25px; } /* div.contacto-formulario .button { margin-left: 40%; } */ } @media only screen and (min-width: 1024px){ /* div.contacto-formulario .button { margin-left: 42%; } */ } @media only screen and (min-width: 1200px){ section.contacto.inicio div.contacto-formulario{ background-color: #04203c; margin: 0; width: 73%; height: 100%; margin-left: 27%; padding: 0; } section.contacto.inicio div.contacto-formulario .campo{ margin-bottom: 20px; width: 100%; padding: 1px 25%; } section.contacto.inicio div.contacto-formulario .campo:first-child{ padding-top: 25%; } div.contacto-formulario .campo input, div.contacto-formulario .campo textarea{ width:100%; } div.contacto-formulario .button{ /* margin-left: 45%; */ margin-bottom: 10%; padding: 10px 52px; border-radius: 0; text-decoration: none; color: #ffffff; font-family: dinALT; border: none; background-color: #857647; cursor: pointer; border: none; } div.contacto-formulario .campo textarea{ height: 100px; } div.campos-misma-linea{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } div.contacto-formulario div.campo1{ width: 40%; margin-right: 20%; } div.contacto-formulario div.campo2{ width: 40%; } div.contenedor.contenedor-modelos.contacto section.formulario div.campo1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 20px; width: 100%; } div.contenedor.contenedor-modelos.contacto section.formulario div.campo2{ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 20px; width: 50%; padding: 1px; } div.contacto-formulario .campo textarea, div.contacto-formulario .campo1 input, div.contacto-formulario .campo2 input, div.contacto-formulario .campo input{ background: transparent; border: none; border-bottom: 2px solid #ffffff; font-family: dinAlt; font-weight: 700; font-size: 19px; padding-bottom: 1%; color: #ffffff; } div.contacto-formulario .campo textarea{ resize: none; } div.contenedor-modelos.contacto div.columna1 div.contenedor-blanco{ margin-top: -10%; } div.contenedor-modelos.contacto div.columna1 div.contenedor-modelos div.columna1 h1 { width: 25%; margin-left: 41%; position: relative; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario{ /* width: 70%; */ width: 95%; background-color: #ffffff; /* margin-top: 1%; margin-bottom: 15%; margin-left: 28% */ margin: 0 auto; margin-bottom: 2%; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campo{ padding: 0px 30%; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campo:first-child { padding-top: 7%; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campos-misma-linea{ padding: 0 30%; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campo textarea, div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campo1 input, div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campo2 input, div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .campo input { border-bottom: 2px solid #04203c; font-size: 16px; color: #0d253e; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario .button { /* margin-left: 36%; */ margin-bottom: 5%; } } @media only screen and (min-width: 1400px){ section.contacto.inicio div.contacto-formulario .campo { padding: 1px 19%; } section.contacto.inicio div.contacto-formulario div.campos-misma-linea{ padding: 0 19%; } } @media only screen and (min-width:1600px){ div.contenedor-modelos.contacto div.columna1 div.contenedor-blanco { margin-top: -8%; } section.contacto.inicio div.contacto-formulario .campo { padding: 1px 25%; } section.contacto.inicio div.contacto-formulario div.campos-misma-linea{ padding: 0 25%; } } @media only screen and (min-width:1800px){ div.contenedor-modelos.contacto div.columna1 div.contenedor-blanco { margin-top: -10%; } div.contenedor-modelos.contacto div.columna2 div.contacto-formulario{ margin-top: 0; } } @media only screen and (min-width:2400px){ section.contacto.inicio div.contacto-formulario .campo:first-child { padding-top: 5%; } } /**PAGINA-CONTACTO**/ section.contacto p{ font-family: dinCond; margin-bottom: 10%; font-size: 30px; font-weight: 700; text-transform: uppercase; color: #ffffff; position: relative; } /* section.contacto p.necesitas{ margin-left: 24%; } */ section.contacto span.informacion{ color: #867746; } section.contacto div.contacto-formulario .campo:first-child{ padding-top: 5%; } @media only screen and (min-width: 768px){ section.contacto div.contacto-formulario .campo:first-child{ padding-top: 10%; } div.pagina-contacto section.contacto{ padding-top: 10%; text-align: center; } section.contacto p{ font-size: 50px; } /* section.contacto p.necesitas { margin-left: 15%; margin-top: 10%; } */ } @media only screen and (min-width: 1024px){ section.contacto p{ font-family: dinCond; font-size: 40px; font-weight: 700; text-transform: uppercase; color: #ffffff; margin: 0 auto; position: relative; } section.contacto div.contacto-formulario{ background-color: #04203c; width: 100%; } div.pagina-contacto section.contacto { padding-top: 15%; } /* formulario .campo:first-child { padding-top: 25%; } */ /* section.contacto p.necesitas { margin-left: 28%; margin-top: 20%; } */ } @media only screen and (min-width:1200px){ section.contacto div.contacto-formulario{ background-color: #04203c; width: 100%; height: 100%; } /* section.contacto div.contacto-formulario .campo:first-child { padding-top: 20%; } */ section.contacto p{ font-size: 60px; margin-bottom: 5%; } /* section.contacto p.necesitas{ margin-left: 24%; margin-top: 22vh; } */ } @media only screen and (min-width: 1400px){ /* section.contacto p.necesitas { margin-left: 27%; margin-top: 13%; } */ } @media only screen and (min-width: 1600px){ div.contacto-formulario .campo { padding: 1px 32%; } div.campos-misma-linea { padding: 0 32%; } /* section.contacto div.contacto-formulario .campo:first-child { padding-top: 21%; } */ /* section.contacto p.necesitas{ margin-left: 30%; margin-top: 13%; } */ } @media only screen and (min-width: 1800px){ /* section.contacto div.contacto-formulario .campo:first-child { padding-top: 22%; } */ /* section.contacto p.necesitas{ margin-left: 32%; } */ } /**PAGINA-MODELOS-COMUNES**/ div.section.single-modelos{ padding-bottom: 5%; } div.single-modelos-motos{ background-color: #04203c; } h1.nombre-modelo{ position: absolute; margin-left: 15%; margin-top: 23%; font-family: dinCond; font-weight: 700; font-size: 60px; color: #ffffff; z-index: 10; } h1.nombre-modelo span{ color: #726437; font-size: 40px; } div.contenedor-imagen-movil h1.precio{ position: absolute; margin-top: 45%; margin-left: 15%; font-family: dinCond; color: #ffffff; font-size: 30px; } div.descripcion div.columna1 h1, div.descripcion div.img img, div.galeria div.columna1 h1, div.contacto div.columna1 h1, div.caracteristicas div.columna1 h1, div.caracteristicas div.img img, div.info-financiacion div.img img, div.contenedor-precios-long, div.zona-texto{ display: none; } div.contenedor-imagen-movil div.img img{ width: 70%; height: 50%; margin-top: 60%; margin-left: 20%; /* margin-bottom: 10%; */ } div.zona-texto-movil{ padding: 5%; } div.zona-texto-movil p{ font-family: dinCond; font-size: 10px; color: #ffffff; text-align: center; } div.botones-movil{ display: inline; } div.botones-movil { position: relative; width: 100%; margin-top: -5%; } div.botones-movil div.element{ display: inline-block; background: #ffffff; margin: 0; font-size: 0; position: relative; padding-top: 2%; padding-bottom: 2%; width: 100%; text-align: center; margin-bottom: 1%; } div.botones-movil div.caracteristicas{ background:#04203c; border:2px solid #ffffff; } div.botones-movil div.element a{ color: #04203c; margin: 0; text-decoration: none; font-family: dinAlt; font-weight: 700; font-size: 16px; text-transform: uppercase; } div.botones-movil div.caracteristicas a{ color:#ffffff; } div.zona-botones, section.selector-de-modelos{ display: none; } @media only screen and (min-width: 400px){ h1.nombre-modelo{ font-size: 90px; } } @media only screen and (min-width: 768px){ h1.nombre-modelo { position: absolute; margin-left: 12%; margin-top: 15%; font-family: dinCond; font-weight: 700; font-size: 200px; color: #ffffff; z-index: 10; } h1.nombre-modelo span, div.contenedor-imagen-movil h1.precio{ font-size: 70px; } div.contenedor-imagen-modelo div.img img{ margin-top: 30%; } } @media only screen and (min-width: 1024px){ h1.nombre-modelo{ margin-top: 15%; margin-left: 15% } div.contenedor-imagen-movil h1.precio{ margin-top: 40%; } div.contenedor-imagen-movil div.img img { width: 80%; height: 50%; margin-top: 35%; margin-left: 10%; /* margin-bottom: 10%; */ } } @media only screen and (min-width: 1200px){ div.contenedor-modelos{ height: 100%; } div.botones-movil, div.contenedor-imagen-movil{ display: none; } section.selector-de-modelos{ display: block; } div.zona-texto{ display: block; width: 65%; margin: 0 auto; margin-bottom: 2%; } div.zona-texto p{ font-family: dinCond; font-size: 12px; font-weight: 700; color: #ffffff; text-align: center; } div.zona-botones{ display: inline; } div.zona-botones { position: relative; width: 80%; margin-left: 17%; } div.zona-botones.long-ver{ margin-left: 10%; } div.galeria div.columna1 h1, div.contacto div.columna1 h1, div.descripcion div.columna1 h1, div.descripcion div.img img, div.caracteristicas div.columna1 h1, div.caracteristicas div.img img { display: inline; } div.single-modelos-motos{ background-color: #04203c; } div.contenedor-modelos{ display: block; position: relative; background-color: #04203c; padding: 10%; padding-bottom:0; padding-top: 5%; } div.contenedor-modelos.galeria{ padding-top: 5%; } div.contenedor-modelos.contacto{ padding-top:7%; } div.contenedor-imagen-modelo{ font-size: 0; display: block; margin-bottom: 2%; margin-top: 2%; } div.contenedor-modelos div.columna1{ position: relative; width: 50%; display: inline-block; margin: 0; padding: 0; vertical-align: middle; } div.contenedor-modelos div.columna1 h1{ width: 25%; /* margin-left: 50%; */ /* position: relative; */ display: none; } div.contenedor-modelos div.columna1 img{ display: block; width: 100%; } div.contenedor-blanco{ margin-top: -10%; position: absolute; padding: 10px; margin-left: 32%; padding-left: 10%; background-color: #ffffff; } div.contenedor-precios-long{ width: 95%; margin: 0 auto; display: block; } div.contenedor-precios-long h1{ display: inline-block; font-family: dinCond; font-weight: 700; color: #ffffff; font-size: 48px; text-transform: uppercase; margin-bottom: 5px; } div.contenedor-precios-long span{ color: #857647; font-size: 30px; } div.contenedor-modelos div.columna2{ /* width: 75%; */ width: 100%; } div.contenedor-modelos.descripcion div.columna2, div.contenedor-modelos.caracteristicas div.columna2, div.contenedor-modelos.info-financiacion div.columna2{ width: 50%; margin: 0 auto; display: inline-block; vertical-align: middle; } /* div.contenedor-modelos div.columna1, div.contenedor-modelos div.columna2{ float: left; } */ div.contenedor-modelos div.limpiar-float{ clear: both; } div.zona-botones div.element{ display: inline-block; background: #ffffff; margin: 0; font-size: 0; position: relative; padding-top: 1%; padding-bottom: 1%; width: 15%; text-align: center; margin-left: 1%; } div.zona-botones div.descripcion{ background:#04203c; border:2px solid #ffffff; } div.zona-botones div.element a{ color: #04203c; margin: 0; text-decoration: none; font-family: dinAlt; font-weight: 700; font-size: 16px; text-transform: uppercase; } div.zona-botones div.descripcion a{ color:#ffffff; } h1.nombre-modelo{ font-family: dinCond; font-weight: 700; font-size: 150px; color: #ffffff; z-index: 10; } div.contenedor-imagen-modelo div.img img{ position: relative; width: auto; height: 400px; max-height: 589px; z-index: 999; margin: 0 auto; left: 5%; } } @media only screen and (min-width: 1400px){ div.contenedor-imagen-modelo div.img img{ left: 12%; } } @media only screen and (min-width: 1600px){ div.contenedor-imagen-modelo div.img img{ left: 12%; height: 500px; } } /*SELECTOR DE MODELOS*/ div.selector-modelos.solo-movil{ background-color: #0d253e; } div.selector-modelos.solo-movil div.texto{ display: inline-block; vertical-align: middle; text-align: center; font-size: 16px; width: 100%; margin-top: 40%; margin-bottom: 0; } div.selector-modelos.solo-movil div.texto h3.descubre{ width: 100%; margin: 0 auto; font-family: dinCond; font-weight: 700; text-transform: uppercase; font-size: 40px; color: #ffffff; } div.selector-modelos.solo-movil div.caja-imagen img{ padding-top: 20%; width: 100%; padding-bottom: 20%; height: auto; } @media only screen and (min-width: 700px){ div.selector-modelos.solo-movil div.texto h3.descubre{ font-size: 80px; } div.selector-modelos.solo-movil div.texto{ margin-top: 30%; } div.selector-modelos.solo-movil div.caja-imagen h1{ margin-top: -78%; } div.selector-modelos.solo-movil div.button{ margin-top: -63%; } } @media only screen and (min-width: 1024px){ div.selector-modelos.solo-movil div.texto h3.descubre { font-size: 90px; } div.selector-modelos.solo-movil div.caja-imagen h1 { margin-top: -90%; margin-left: 65%; } div.selector-modelos.solo-movil div.button { margin-top: -68%; margin-left: 66%; } } @media only screen and (min-width: 1200px){ div.selector-modelos.solo-movil div.texto{ display: none; } section.selector-de-modelos div.contenedor-hijo div.imagen-slider .owl-carousel .owl-item img{ margin: 0 auto; width: auto !important; } } /** * MODELOS-DESCRIPCION * MODELOS-CARCATERISTICAS **/ div.descripcion-producto h1, div.caracteristicas-producto h1, div.info-financiacion h1{ width: 100%; margin: 0; margin-top: 15%; text-transform: uppercase; font-family: dinCond; font-size: 40px; color: #ffffff; text-align: center; } div.caracteristicas-producto h3{ margin: 0; margin-top: 5%; padding-left: 5%; text-align: inherit; text-transform: uppercase; font-family: dinCond; font-size: 25px; margin-bottom: 1%; color: #ffffff; } div.descripcion-producto p, div.caracteristicas-producto p, div.info-financiacion p{ font-family: dinAlt; text-align: left; font-weight: 700; padding: 5px; margin: 0; font-size: 16px; color: #ffffff; } div.caracteristicas-producto ul li{ font-family: dinAlt; font-weight: 700; text-align: inherit; font-size: 18px; color: #ffffff; } div.caracteristicas-producto p{ padding-bottom: 0; } div.caracteristicas-producto ul{ list-style: none; } div.caracteristicas-producto ul li::before{ content: "- " } @media only screen and (min-width: 1024px){ div.descripcion-producto h1, div.caracteristicas-producto h1{ font-size: 70px; } div.descripcion-producto p, div.caracteristicas-producto p{ font-size: 21px; } } @media only screen and (min-width: 1200px){ div.descripcion div.contenedor-blanco{ margin-top: -10%; } div.descripcion div.columna1 h1{ display: none; } div.descripcion-producto, div.caracteristicas-producto{ background-color: #ffffff; height: 338px; overflow: scroll; overflow-x: hidden; } div.contenedor-precios-long{ width: 95%; margin: 0 auto; display: block; font-size: 0; } div.contenedor-modelos.descripcion div.contenedor-precios-long, div.contenedor-modelos.caracteristicas div.contenedor-precios-long{ width: 100%; } div.contenedor-precios-long .cont-mod, div.contenedor-precios-long .cont-prec{ display: inline-block; width: 50%; text-align: left; } div.contenedor-precios-long .cont-prec, div.contenedor-precios-long .cont-prec{ text-align: right; } /* div.contenedor-modelos.caracteristicas div.contenedor-precios-long h1.modelo, div.contenedor-modelos.descripcion div.contenedor-precios-long h1.modelo{ margin-right: 40%; } */ div.fondo-blanco-texto{ width: 100%; margin: 0; padding: 8%; padding-left: 9.3%; padding-top: 5%; padding-bottom: 4%; background-color: #ffffff; } div.descripcion-producto h1, div.caracteristicas-producto h1{ margin: 0; margin-top: 1%; padding-left: 5%; text-align: inherit; text-transform: uppercase; font-family: dinCond; font-size: 45px; margin-bottom: 3%; color: #0d253e; } div.descripcion-producto h1{ width: 70%; } div.caracteristicas-producto h1{ width: 90%; } div.caracteristicas-producto h3{ color: #0d253e; } div.descripcion-producto p, div.caracteristicas-producto p, div.info-financiacion p{ font-family: dinAlt; font-weight: 700; text-align: inherit; font-size: 18px; color: #0d253e; } div.caracteristicas-producto ul li{ font-family: dinAlt; font-weight: 700; text-align: inherit; font-size: 18px; color: #0d253e; } } @media only screen and (min-width: 1400px){ div.caracteristicas-producto h1 { width: 80%; } div.descripcion-producto h1 { width: 60%; } } @media only screen and (min-width: 1600px){ div.contenedor-blanco { margin-top: -8%; } div.caracteristicas-producto h1 { width: 70%; } div.contenedor-imagen-modelo div.img img { margin-top: 5%; } div.descripcion-producto h1 { width: 85%; } div.descripcion div.contenedor-blanco { margin-top: -8%; } } @media only screen and (min-width: 1800px){ div.caracteristicas-producto h1 { width: 80%; } div.contenedor-blanco { margin-top: -5%; } div.contenedor-modelos div.columna1 h1 { width: 25%; } /* div.contenedor-modelos.descripcion div.columna2, div.contenedor-modelos.caracteristicas div.columna2{ margin-left: 25%; } */ div.contenedor-modelos.contacto div.columna1 h1{ font-size: 200px; } /* div.fondo-blanco-texto { width: 55%; } */ /* div.contenedor-imagen-modelo div.img img { width: 100%; margin-left: 8%; margin-top: 5%; } */ div.descripcion div.contenedor-blanco { margin-top: -6%; } } @media only screen and (min-width: 1900px){ div.caracteristicas-producto h1 { width: 75%; } } /**MODELOS-GALERIA**/ div.contenedor-imagen-modelo div.owl-nav div.owl-prev, div.contenedor-imagen-modelo div.owl-nav div.owl-next{ display: none; } div.contenedor-modelos.galeria .contenedor-imagen-modelo .contenedor-galeria{ margin-top: 25%; padding-bottom: 25%; padding-left: 3%; padding-right: 3%; } div.contenedor-modelos.galeria .contenedor-imagen-modelo .owl-dots{ margin-top: 5%; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background: #857647; } @media only screen and (min-width: 768px){ div.contenedor-modelos.galeria .contenedor-imagen-modelo .contenedor-galeria{ padding: 15%; padding-bottom: 10%; background-color: #ffffff; } div.contenedor-modelos.galeria .contenedor-imagen-modelo .owl-dots{ margin-top: 5%; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background: #857647; } } @media only screen and (min-width: 1200px){ div.contenedor-modelos.galeria .contenedor-imagen-modelo .contenedor-galeria{ width: 95%; padding: 3%; background-color: #ffffff; /* margin-left: 25%; margin-bottom: 10%; margin-top: -5%; */ margin: 0 auto; margin-bottom: 2%; } div.contenedor-galeria div.columna2 img{ width: 100%; height: auto; max-width: 100%; margin: 0; } div.contenedor-galeria div.carouselone.owl-carousel.owl-theme.owl-loaded.owl-drag{ width: 50%; height: auto; margin: 0 auto; } div.contenedor-imagen-modelo div.owl-nav div.owl-prev, div.contenedor-imagen-modelo div.owl-nav div.owl-next{ display: inline; height: 10%; margin-top: -39%; position: absolute; background-color: transparent; } div.contenedor-imagen-modelo div.owl-nav div.owl-prev{ left: -10%; } div.contenedor-imagen-modelo div.owl-nav div.owl-next{ right: -10%; } div.contenedor-imagen-modelo div.owl-nav div.owl-prev::after{ font-family: 'icomoon'; content: '\e900'; text-align: center; color: #04203c; font-size: 30px; } div.contenedor-imagen-modelo div.owl-nav div.owl-next::after{ font-family: 'icomoon'; content: '\e901'; text-align: center; color: #04203c; font-size: 30px; } div.contenedor-imagen-modelo div.owl-nav div.owl-next:hover{ background-color: transparent; } div.contenedor-imagen-modelo div.owl-nav div.owl-prev:hover{ background-color: transparent; } } /**PAGINA-EMPRESA**/ div.empresa{ background-attachment:fixed; text-align: justify; } div.empresa .quienes-somos{ position: relative; padding: 5%; padding-top: 30%; } div.empresa .historia-ganadores{ padding: 5%; } div.empresa .titulo-primera-entrada, div.empresa .titulo-segunda-entrada{ font-family: dinCond; font-weight: 700; font-size: 40px; text-transform: uppercase; color: #0d253e; padding-bottom: 5%; } div.empresa .titulo-segunda-entrada{ color: #857647; text-align: left; } div.empresa .subtitulo-primera-entrada{ font-family: dinAlt; font-weight: 700; font-size: 20px; text-align: left; color: #0d253e; width: 60%; border-bottom: 2px solid #857647; } div.empresa .primera-entrada p, div.empresa .segunda-entrada p{ font-family: dinAlt; font-size: 16px; font-weight: 700; color: #0d253e; } div.empresa .segunda-entrada p.parte0{ color: #857647; } div.empresa img{ display: none; } @media only screen and (min-width: 350px){ div.empresa .subtitulo-primera-entrada{ width: 55%; } } @media only screen and (min-width: 400px){ div.empresa .subtitulo-primera-entrada{ width: 47%; } } @media only screen and (min-width: 720px){ div.empresa .quienes-somos, div.empresa .historia-ganadores{ display: -webkit-box; display: -ms-flexbox; display: flex; } div.empresa .columna1, div.empresa .historia-ganadores .segunda-entrada{ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 50%; } div.empresa .columna2, div.empresa .historia-ganadores .titulo-segunda-entrada{ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 50%; } div.empresa .titulo-segunda-entrada{ margin-top: 15%; margin-left: 5%; } div.empresa .columna1 .titulo-primera-entrada{ width: 50%; margin-left: 10%; margin-top: 30%; font-size: 60px; } div.empresa .subtitulo-primera-entrada { width: 50%; } div.empresa .imagen1 img, div.empresa .imagen2 img{ display: inline; } div.empresa .segundas-fotos .imagen3 img, div.empresa .segundas-fotos .imagen4 img{ display: inline; } div.empresa .imagen1{ /* background-color: rgb(4, 28, 52); */ width: 67%; margin-left: 20%; margin-top: -6%; z-index: 0; } div.empresa .imagen2{ margin-top: -10%; margin-left: 10%; } div.empresa .segunda-entrada p.parte0{ position: absolute; margin-top: -69%; margin-left: 5%; width: 65%; } div.empresa .segunda-entrada .parte2{ position: absolute; margin-top: 75%; margin-left: 50%; width: 40%; } div.empresa .segundas-fotos .imagen3, div.empresa .segundas-fotos .imagen4{ position: absolute; } div.empresa .segundas-fotos .imagen4{ margin-top: 70%; margin-left: 35%; } div.empresa .segundas-fotos .imagen3{ margin-top: 50%; } div.empresa .segunda-entrada .parte3{ margin-top: 400%; } div.empresa .segundas-fotos .imagen5 img, div.empresa .segundas-fotos .imagen6 img{ display: inline; } div.empresa .segundas-fotos .imagen5, div.empresa .segundas-fotos .imagen6{ position: absolute; } div.empresa .segundas-fotos .imagen5{ margin-top: 155%; margin-left: -4%; z-index: -100; } div.empresa .segundas-fotos .imagen6{ margin-top: 185%; z-index: -10000; margin-left: 35%; } } @media only screen and (min-width: 1024px){ div.empresa .quienes-somos{ padding-top: 20%; } div.empresa .columna1 .titulo-primera-entrada{ margin-top: 20%; } div.empresa .subtitulo-primera-entrada { width: 47%; } div.empresa .imagen1{ width: 50%; margin-left: 28%; margin-top: -3%; } div.empresa .segunda-entrada p.parte0{ margin-top: -50%; } div.empresa .columna2, div.empresa .historia-ganadores .titulo-segunda-entrada{ padding-right: 10%; margin-top: 75px; } div.empresa .segundas-fotos .imagen3 { margin-top: 35%; } div.empresa .segundas-fotos .imagen4 { margin-top: 50%; margin-left: 30%; } div.empresa .segunda-entrada .parte2{ margin-top: 60%; } div.empresa .segundas-fotos .imagen5{ margin-top: 115%; margin-left: 3%; } div.empresa .segunda-entrada .parte3 { margin-top: 300%; } div.empresa .segundas-fotos .imagen6 { margin-top: 130%; margin-left: 45%; } } @media only screen and (min-width: 1200px){ div.empresa .quienes-somos { padding-top: 95px; } div.empresa .columna1 .titulo-primera-entrada { margin-top: 20%; margin-left: 30%; } div.empresa .subtitulo-primera-entrada{ text-align: left; font-size: 30px; width: 56%; } div.empresa .imagen1 img{ width: 100%; } div.empresa .imagen1 { width: 60%; margin-left: 29%; } div.empresa .imagen2 { margin-top: -15%; margin-left: 14%; } div.empresa .segunda-entrada p.parte0 { margin-top: -43%; margin-left: 9%; width: 40%; } div.empresa .segunda-entrada div.parte1 { margin-left: 21%; } div.empresa .historia-ganadores .titulo-segunda-entrada { text-align: left; padding-right: 10%; margin-top: 5%; width: 30%; margin-left: 15% } div.empresa .segundas-fotos .imagen3 { margin-top: 25%; margin-left: 9%; } div.empresa .segundas-fotos .imagen4 { margin-top: 35%; } div.empresa .segunda-entrada .parte2 { margin-top: 45%; margin-left: 43%; } div.empresa .segunda-entrada .parte3 { margin-top: 225%; margin-left: 20%; width: 90%; } div.empresa .segundas-fotos .imagen5 { margin-top: 85%; margin-left: 9%; } div.empresa .segundas-fotos .imagen6 { margin-top: 100%; margin-left: 49%; } } @media only screen and (min-width: 1400px){ div.empresa .subtitulo-primera-entrada { width: 52%; } div.empresa .historia-ganadores .titulo-segunda-entrada{ font-size: 50px; padding-right: 10%; } div.empresa .imagen2 img, div.empresa .imagen4 img{ width: 100%; } div.empresa .imagen2{ width: 40%; margin-top: -18%; } div.empresa .segunda-entrada p.parte0{ margin-top: -45%; margin-left: 15%; } div.empresa .segundas-fotos .imagen3 { margin-top: 20%; } div.empresa .segundas-fotos .imagen4 { width: 40%; margin-top: 24%; } div.empresa .segunda-entrada .parte2{ margin-top: 40%; } div.empresa .segundas-fotos .imagen5{ margin-top: 70%; } div.empresa .segundas-fotos .imagen6 { margin-top: 84%; } div.empresa .segunda-entrada .parte3 { margin-top: 195%; } } @media only screen and (min-width: 1600px){ div.empresa .quienes-somos { padding-top: 95px; } div.empresa .segunda-entrada .parte3 { margin-top: 185%; } div.empresa .segundas-fotos .imagen6 { margin-top: 77%; } } @media only screen and (min-width: 1800px){ div.empresa .quienes-somos { padding-top: 95px; } div.empresa .columna1 .titulo-primera-entrada { margin-top: 20%; margin-left: 40%; width: 40%; font-size: 60px; } div.empresa .subtitulo-primera-entrada { width: 45%; font-size: 35px; } div.empresa .segunda-entrada p.parte0{ width: 30%; margin-top: -42%; } div.empresa .historia-ganadores .titulo-segunda-entrada{ font-size: 60px; padding-right: 5%; margin-top: 0; width: 30%; margin-left: 10%; } div.empresa .segunda-entrada div.parte1 { margin-left: 25%; } div.empresa .segundas-fotos .imagen3 img{ width: 100%; } div.empresa .segundas-fotos .imagen3{ width: 25%; margin-top: 15%; margin-left: 11%; } div.empresa .segundas-fotos .imagen4{ margin-top: 20%; } div.empresa .segundas-fotos .imagen5 img{ width : 100%; } div.empresa .segundas-fotos .imagen5{ width: 30%; margin-top: 60%; } div.empresa .segundas-fotos .imagen6 img{ width: 100%; } div.empresa .segundas-fotos .imagen6{ width: 40%; margin-top: 67%; margin-left: 45%; } } /**UTILIDADES**/ div.utilidades div.primera-entrada{ padding: 15%; padding-top: 25%; } div.utilidades div.segunda-entrada{ background-color: #04203c; padding: 15%; } div.utilidades div.titulo-primera { font-family: dinCond; font-weight: 700; text-transform: uppercase; font-size: 30px; color: #04203c; } div.utilidades div.contenido-primera p{ font-family: dinAlt; font-size: 16px; font-weight: 700; color: #04203c; width: 100%; } div.utilidades a{ text-decoration: none; color: #726437; cursor: pointer; } div.utilidades h3, div.utilidades ol, div.utilidades ul{ font-family: dinAlt; color: #04203c; } div.utilidades div.titulo-segunda { font-family: dinCond; font-weight: 700; text-transform: uppercase; font-size: 30px; color: #857647; } div.utilidades div.contenido-segunda p{ font-family: dinAlt; font-size: 16px; font-weight: 700; color: #857647; width: 100%; } @media only screen and (min-width: 768px){ div.utilidades div.titulo-primera, div.utilidades div.titulo-segunda{ margin: 0 auto; text-align: center; font-size: 40px; } } @media only screen and (min-width: 1200px){ div.utilidades div.primera-entrada{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 15%; height: 100vh; } div.utilidades div.segunda-entrada{ background-color: #04203c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 15%; height: 100vh; } div.utilidades div.contenido-primera, div.utilidades div.contenido-segunda{ -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; overflow: scroll; overflow-x: hidden; height: 500px; width: 80%; padding: 5%; padding-top: 0; } div.utilidades div.titulo-primera { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; font-family: dinCond; font-weight: 700; text-transform: uppercase; font-size: 70px; color: #04203c; width: 50%; } div.utilidades div.contenido-primera p{ font-family: dinAlt; font-size: 16px; font-weight: 700; color: #04203c; width: 100%; } div.utilidades div.titulo-segunda { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; font-family: dinCond; font-weight: 700; text-transform: uppercase; font-size: 70px; color: #857647; width: 60%; } div.utilidades div.contenido-segunda p{ font-family: dinAlt; font-size: 16px; font-weight: 700; color: #857647; width: 100%; } } @media only screen and (min-width: 1600x){ div.utilidades div.contenido-primera p{ font-size: 18px; } } /**PUNTOS DE VENTA**/ section.mapa.puntos_venta{ padding-top: 15%; background-color: #202020; padding-bottom: 15%; } @media only screen and (min-width: 768px){ section.mapa.puntos_venta { padding-top: 10%; } section.mapa.puntos_venta div#mapa{ height: 620px; } section.mapa.puntos_venta p{ font-size: 50px; } section.mapa.puntos_venta p.encuentra{ width: 40%; margin-top: 20%; margin-left: 7%; } } @media only screen and (min-width: 1024px){ section.mapa.puntos_venta{ padding: 0; } } @media only screen and (min-width: 1200px){ section.mapa.puntos_venta div#mapa{ height: 100vh; } section.mapa.puntos_venta div.texto-mapa p{ font-size: 18px; margin-left: 7%; margin-top: -46vh; } section.mapa.puntos_venta p.encuentra{ width: 20%; margin-top: 30vh; margin-left: 7%; } } @media only screen and (min-width: 1400px){ section.mapa.puntos_venta div.texto-mapa p { margin-top: -46vh; } } @media only screen and (min-width: 1600px){ section.mapa.puntos_venta div.texto-mapa p{ margin-top: -50vh; } } @media only screen and (min-width: 1800px){ section.mapa.puntos_venta div.texto-mapa p{ margin-top: -52vh; } } /**FOOTER**/ footer{ display: block; background-color: #2b2b2b; padding: 5%; } footer .logo-footer{ display: inline-block; text-align: center; width: 100%; } footer .logo-footer img{ width: 30%; } footer .contenedor-menu-footer{ display: inline; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } footer .contenedor-menu-footer nav.menu-footer{ margin: 2% 0; } footer .contenedor-menu-footer nav.menu-footer ul{ margin: 0; padding: 0; } footer .contenedor-menu-footer nav.menu-footer li{ display: inline-block; list-style: none; } footer .contenedor-menu-footer nav.menu-footer li a[href*="facebook.com"] .sr-text{ display: none; } footer .contenedor-menu-footer nav.menu-footer li a[href*="facebook.com"]::before{ font-family: 'FontAwesome'; content:"\f082"; -webkit-font-smoothing: antialiased; color: white ; font-size: 15px; } footer .contenedor-menu-footer nav.menu-footer li a[href*="instagram.com"] .sr-text{ display: none; } footer .contenedor-menu-footer nav.menu-footer li a[href*="instagram.com"]::before{ font-family: 'FontAwesome'; content:"\f16d"; -webkit-font-smoothing: antialiased; color: white ; font-size: 15px; } footer .contenedor-menu-footer nav.menu-footer li a{ font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: 400; text-transform: uppercase; color: #ffffff; text-decoration: none; } span.separador{ color: #ffffff; } footer .contenedor-menu-footer ul li:last-child .separador{ display: none; } footer .texto-final{ display: inline; text-align: center; } footer .texto-final p{ font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 12px; color: #ffffff; border-top: 1px solid #59513a; padding-top: 3%; } @media only screen and (min-width: 700px){ footer{ padding: 1% 15%; } footer .logo-footer img{ width: auto; } } /**HELPER**/ div.contenedor-modelos.contacto, div.contenedor-modelos.caracteristicas, div.contenedor-modelos.galeria{ display: none; } /**SCROLLBARS**/ div.descripcion-producto::-webkit-scrollbar, div.caracteristicas-producto::-webkit-scrollbar, div.utilidades div.contenido-primera::-webkit-scrollbar, div.utilidades div.contenido-segunda::-webkit-scrollbar{ width: 6px; } div.descripcion-producto::-webkit-scrollbar-track, div.caracteristicas-producto::-webkit-scrollbar-track, div.utilidades div.contenido-primera::-webkit-scrollbar-track{ box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } div.descripcion-producto::-webkit-scrollbar-thumb, div.caracteristicas-producto::-webkit-scrollbar-thumb, div.utilidades div.contenido-primera::-webkit-scrollbar-thumb{ background-color: #04203c; outline: 0.5px solid #04203c; border-radius: 15px; } div.utilidades div.contenido-segunda::-webkit-scrollbar-thumb{ background-color:#857647; outline: 0.5px solid #FFFFFF; border-radius: 15px; } div.utilidades div.contenido-segunda::-webkit-scrollbar-track{ box-shadow: inset 0 0 3px #ffffff; -webkit-box-shadow: inset 0 0 3px #ffffff; background-color: #ffffff; border-radius: 15px; } /*Google Markers*/ div.informacion-marcador{ display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; margin-top: -15%; z-index: -100000000; -webkit-transform: translateY(-15%); transform: translateY(-15%); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; height: 40vh; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } div.informacion-marcador.visible{ -webkit-transform: translateY(-78%); transform: translateY(-78%); z-index: 100000000; height: 40vh; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } div.informacion-marcador div.icono-cerrar{ display: inline; font-family: 'FontAwesome'; text-align: center; color: #04203c; font-size: 23px; cursor: pointer; margin-left: 88%; margin-top: 0; background-color: #ffffff; width: 5%; height: 30px; position: absolute; -webkit-font-smoothing:antialiased; } div.informacion-marcador div.texto-marcador{ background-color: #ffffff; width: 100%; } div.informacion-marcador div.imagen-marcador{ display: none; } div.informacion-marcador div.texto-marcador h2{ font-family: dinCond; margin-top: 0; margin-bottom: 2%; padding: 1%; padding-left: 4%; text-transform: uppercase; font-size: 24px; width: 100%; font-weight: 700; color: #04203c; } div.informacion-marcador div.texto-marcador div.direccion, div.informacion-marcador div.texto-marcador div.telefono, div.informacion-marcador div.texto-marcador div.correo, div.informacion-marcador div.texto-marcador div.web{ position: relative; padding-top: 5%; padding-bottom: 2%; } div.informacion-marcador div.texto-marcador div.direccion p, div.informacion-marcador div.texto-marcador div.telefono p, div.informacion-marcador div.texto-marcador div.correo p, div.informacion-marcador div.texto-marcador div.web p{ font-family: dinAlt; font-weight: 700; font-size: 16px; padding: 1%; padding-left: 4%; margin: 0 auto; text-transform: none; width: 100%; color: #04203c; background-color: #ffffff; } div.informacion-marcador div.texto-marcador div.direccion p::before{ font-family: 'icomoon'; content: '\e903'; text-align: center; padding-right: 1%; color: #04203c; font-size: 20px; } div.informacion-marcador div.texto-marcador div.telefono p::before{ font-family: 'icomoon'; content: '\e904'; text-align: center; padding-right: 1%; color: #04203c; font-size: 20px; } /*div.informacion-marcador div.texto-marcador div.correo p::before{ font-family: 'icomoon'; content: '\f0e0'; text-align: center; padding-right: 1%; color: #04203c; font-size: 20px; } div.informacion-marcador div.texto-marcador div.web p::before{ font-family: 'icomoon'; content: '\f0ac'; text-align: center; padding-right: 1%; color: #04203c; font-size: 20px; }*/ @media only screen and (min-width: 345px){ div.informacion-marcador.visible{ -webkit-transform: translateY(-71%); transform: translateY(-71%); } div.informacion-marcador.visible{ height: 30vh; } } @media only screen and (min-width: 400px){ div.informacion-marcador.visible{ -webkit-transform: translateY(-60%); transform: translateY(-60%); } } @media only screen and (min-width: 768px){ div.informacion-marcador.visible{ height: 20vh; } div.informacion-marcador.visible{ -webkit-transform: translateY(-20%); transform: translateY(-20%); } div.informacion-marcador div.icono-cerrar{ margin-left: 90%; margin-top: -3%; width: 10%; } div.informacion-marcador div.icono-cerrar i{ padding-top: 15%; } } @media only screen and (min-width: 1024px){ div.informacion-marcador.visible{ height: 15vh; } div.informacion-marcador div.texto-marcador div.direccion, div.informacion-marcador div.texto-marcador div.telefono, div.informacion-marcador div.texto-marcador div.correo, div.informacion-marcador div.texto-marcador div.web { padding-top: 2%; } div.informacion-marcador div.texto-marcador h2{ margin-bottom: 0%; } div.informacion-marcador div.icono-cerrar{ margin-top: -2%; } } @media only screen and (min-width: 1200px){ div.informacion-marcador{ display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; margin-top: -15%; z-index: -100000000; -webkit-transform: translateY(50%); transform: translateY(50%); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; height: auto; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } div.informacion-marcador.visible{ -webkit-transform: translateY(-12%); transform: translateY(-12%); z-index: 100000000; height: auto; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } div.informacion-marcador div.icono-cerrar{ display: inline; font-family: 'FontAwesome'; text-align: center; color: #04203c; font-size: 23px; cursor: pointer; margin-left: 95%; margin-top: -2%; background-color: #ffffff; width: 5%; height: 30px; position: absolute; -webkit-font-smoothing:antialiased; } div.informacion-marcador div.texto-marcador{ background-color: #ffffff; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding: 1%; padding-left: 4%; width: 50%; } div.informacion-marcador div.imagen-marcador{ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: -webkit-box; display: -ms-flexbox; display: flex; width: 50%; } div.informacion-marcador div.imagen-marcador img{ width: 100%; height: 100%; } div.informacion-marcador div.texto-marcador div.direccion, div.informacion-marcador div.texto-marcador div.telefono, div.informacion-marcador div.texto-marcador div.correo, div.informacion-marcador div.texto-marcador div.web { padding-top: 4%; } div.informacion-marcador div.texto-marcador h2{ font-family: dinCond; margin-top: 0; margin-bottom: 0; text-transform: uppercase; font-size: 24px; width: 33%; padding: 0; font-weight: 700; color: #04203c; } div.informacion-marcador div.texto-marcador p.marcador{ font-family: dinAlt; font-weight: 700; font-size: 16px; padding: 0; margin: 0 auto; text-transform: none; width: 33%; color: #04203c; } } @media only screen and (min-width: 1600px){ div.informacion-marcador div.texto-marcador{ padding: 2%; } div.informacion-marcador div.icono-cerrar{ height: 38px; } div.informacion-marcador div.icono-cerrar i{ padding-top: 3%; } } @media only screen and (min-width: 1800px){ div.informacion-marcador div.icono-cerrar { height: 40px; } div.informacion-marcador div.texto-marcador h2{ font-size: 34px; } div.informacion-marcador div.texto-marcador p.marcador{ font-size: 20px; } div.informacion-marcador div.icono-cerrar i{ padding-top: 5%; } } /*SELECTOR DE MODELOS*/ div.slider-vertical div.item div.nombre{ margin-left: 83%; margin-top: -60%; position: absolute } div.slider-vertical div.item div.nombre p{ font-family: dinCond; font-size: 24px; text-transform: uppercase; color: #4d6073; } div.imagen-slider{ background-image: url("img/fondo-slider.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } div.imagen-slider div.slider-vertical{ margin: 0 auto; } div.imagen-slider div.owl-nav div.owl-prev::after{ font-family: 'FontAwesome'; content: '\f107'; text-align: center; color: #04203c; font-size: 50px; } div.imagen-slider div.owl-nav div.owl-prev{ margin-top: 2%; margin-left: 49%; position: absolute; } div.imagen-slider div.owl-nav div.owl-next::after{ font-family: 'FontAwesome'; content: '\f106'; text-align: center; color: #04203c; font-size: 50px; } div.imagen-slider div.owl-nav div.owl-next{ position: absolute; margin-top: -78%; margin-left: 48%; } div.contenedor-slider{ display: block; font-size: 0px; background-color: #ffffff; } div.texto, div.contenedor-hijo{ display: inline-block; vertical-align: middle; font-size: 16px; width: 50%; margin-top: 15%; margin-bottom: 15% } div.texto h3.descubre{ width: 50%; margin: 0 auto; font-family: dinCond; font-weight: 700; text-transform: uppercase; font-size: 60px; color: #0d253e; } div.texto span.modelos{ color: #857647; } /*SELECTOR DE COLOR*/ div.contenedor-modelos div.columna1 div.img div.color1, div.contenedor-modelos div.columna1 div.img div.color2{ width: 30px; height: 30px; position: absolute; margin-top: -100%; margin-left: 7%; z-index: 1100; border-radius: 25px; cursor: pointer; } div.contenedor-modelos div.columna1 div.img div.color1{ border: 3px solid black; } div.contenedor-modelos div.columna1 div.img div.color2{ margin-top: -87%; } @media only screen and (min-width: 400px){ div.contenedor-modelos div.columna1 div.img div.color1{ margin-top: -100%; } div.contenedor-modelos div.columna1 div.img div.color2{ margin-top: -90%; } } @media only screen and (min-width: 700px){ div.contenedor-modelos div.columna1 div.img div.color1, div.contenedor-modelos div.columna1 div.img div.color2{ width: 50px; height: 50px; margin-left: 10%; } div.contenedor-modelos div.columna1 div.img div.color1{ margin-top: -80%; } div.contenedor-modelos div.columna1 div.img div.color2{ margin-top: -70%; } } @media only screen and (min-width: 1024px){ div.contenedor-modelos div.columna1 div.img div.color1, div.contenedor-modelos div.columna1 div.img div.color2{ margin-left: 12%; } div.contenedor-modelos div.columna1 div.img div.color1{ margin-top: -75%; } div.contenedor-modelos div.columna1 div.img div.color2{ margin-top: -65%; } } @media only screen and (min-width: 1200px){ div.contenedor-modelos div.columna1 div.img div.color1, div.contenedor-modelos div.columna1 div.img div.color2{ width: 40px; height: 40px; margin-left: 3%; } div.contenedor-modelos div.columna1 div.img div.color1{ margin-top: 30%; } div.contenedor-modelos div.columna1 div.img div.color2{ margin-top: 40%; } } @media only screen and (min-width: 1600px){ div.contenedor-modelos div.columna1 div.img div.color1, div.contenedor-modelos div.columna1 div.img div.color2{ margin-left: 10%; } } /* @media only screen and (min-width: 1800px){ div.contenedor-modelos div.columna1 div.img div.color1, div.contenedor-modelos div.columna1 div.img div.color2 { width: 40px; height: 40px; margin-left: 10%; } }*/ /*PRUEBA OWL*/ .slider-vertical{ max-width: 520px; } .slider-vertical.owl-nav { padding-top: .4em; font-family: sans-serif; font-size: .8em; } .slider-vertical.owl-nav > div { padding: .4em 1.4em; border: 1px solid #333; background: #000; color: white; border-radius: .4em; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .3)), to(rgba(0, 0, 0, .2))); background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(0, 0, 0, .2)); -webkit-box-shadow: .1em .1em .4em rgba(0, 0, 0, .5); box-shadow: .1em .1em .4em rgba(0, 0, 0, .5); } .slider-vertical.owl-nav > div:hover { background-color: #333; } .owl-prev { float: left; } .owl-next { float: right; } /* * Esto es para evitar que el autocompletado en el form * salga con el background amarillo */ div.contacto-formulario input:-webkit-autofill, div.contacto-formulario input:-webkit-autofill:hover, div.contacto-formulario input:-webkit-autofill:focus, div.contacto-formulario input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #ffffff !important } div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill, div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill:hover, div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill:focus, div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #0d253e !important } div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill, div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill:hover, div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill:focus, div.contenedor-modelos.contacto div.contacto-formulario input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #0d253e !important } div.fin-wrapper input:-webkit-autofill, div.fin-wrapper input:-webkit-autofill:hover, div.fin-wrapper input:-webkit-autofill:focus, div.fin-wrapper input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #0d253e !important } /*MENSAJE DE ERROR FORMULARIO*/ span.wpcf7-not-valid-tip{ display: none; } .wpcf7-response-output{ display: none !important; } .wpcf7-not-valid{ border-bottom:2px solid red; } /*FINANCIACION*/ div.srp-financiacion{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 50%; } div.srp-financiacion div.finflexed.srp-centercol form span.modelo, div.srp-financiacion div.finflexed.srp-centercol form span.cuotamensual, div.srp-financiacion div.finflexed.srp-centercol form span.plazos, div.srp-financiacion div.finflexed.srp-centercol form span.importesolicitado, div.srp-financiacion div.finflexed.srp-centercol form span.tin, div.srp-financiacion div.finflexed.srp-centercol form span.tae, div.srp-financiacion div.finflexed.srp-centercol form span.comapertura, div.srp-financiacion div.finflexed.srp-centercol form span.importeseguro, div.srp-financiacion div.finflexed.srp-centercol form input.wpcf7-submit{ display: none; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fininfo{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fininfo-left{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } div.srp-financiacion div.finflexed.srp-centercol form span.ciudad select{ -moz-appearance: none; -webkit-appearance: none; -ms-progress-appearance: none; background: url('/wp-content/themes/bikes_theme/img/stroke-2-copy-3.png') no-repeat #FFFFFF; background-position-x: 90%; background-position-y: center; width: 100%; padding: 5% 0 5% 10%; border: none; font-family: dinCond; font-weight: 700; size: 14px; color: #0c1b2f; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fininfo-right{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } div.srp-financiacion div.finflexed.srp-centercol form input.wpcf7-text{ width: 100%; padding: 5% 0 5% 10%; border: none; } div.fin-wrapper h4{ font-family: dinCond; font-weight: 700; font-size: 20px; color: #0d253e; text-transform: uppercase; } div.fin-wrapper h4 span.thetitle{ color: #726437; } div.contenedor-financiacion{ background-color: #0d253e; padding-top: 5%; } div.finflexed.srp-leftcol div.finprod-img, div.finflexed.srp-leftcol div.pricecont div, div.finflexed.srp-leftcol div.yearcont div{ display: none; } div.finflexed.srp-leftcol div.pricecont, div.finflexed.srp-leftcol div.yearcont{ margin-bottom: 10%; } div.finflexed.srp-leftcol div.finprod-img img{ background-color: #ffffff; width: 100%; height: auto; } div.fin-wrapper{ color: #0d253e; font-family: dinCond; font-weight: 700; font-size: 16px; } div.fin-wrapper .price-disclaimer{ font-size: 14px; } div.fin-wrapper span.fin-precio, div.fin-wrapper span.fin-year{ font-size: 30px; } div.fin-wrapper.selector{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 10%; } div.fin-wrapper.selector span.fin-tag{ margin-bottom: 5%; } div.fin-wrapper.selector select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('/wp-content/themes/bikes_theme/img/stroke-2-copy-3.png') no-repeat #FFFFFF; background-position-x: 90%; background-position-y: center; border: none; font-family: dinCond; color: #0c1b2f; padding: 5% 0% 5% 10%; } span.seguro span#checkseguro span{ margin: 0; } div.contenedor-financiacion h1.intro-text{ position: absolute; width: 100%; text-align: center; text-transform: uppercase; font-family: dinCond; font-weight: 700; top: 80px; color: #ffffff; } div.contenedor-financiacion h1.intro-text span{ color: #857647; } /*SLIDER*/ input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } /*THUMB SLIDER*/ input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 14px; height: 14px; border: 3px solid #0d253e; border-radius: 10px; background: #857647; cursor: pointer; margin-top: -5px; } input[type=range]::-ms-track { width: 300px; height: 20px; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ background: #f3f3f3; /*leave room for the larger thumb to overflow with a transparent border */ border-color: #f3f3f3; border-width: 15px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #777; border-radius: 10px; } input[type=range]::-ms-fill-upper { background: #ddd; border-radius: 10px; } input[type=range]:focus::-ms-fill-lower { background: #888; } input[type=range]:focus::-ms-fill-upper { background: #ccc; } input[type=range]::-ms-thumb{ -webkit-appearance: none; width: 14px; height: 14px; border: 3px solid #0d253e; border-radius: 50%; background: #857647; cursor: pointer; } input[type=range]::-moz-range-thumb{ -webkit-appearance: none; width: 14px; height: 14px; border: 3px solid #0d253e; border-radius: 10px; background: #857647; cursor: pointer; } /*TRACK SLIDER*/ input[type=range]::-webkit-slider-runnable-track{ width: 100%; height: 2px; background: #0d253e; } input[type=range]::-moz-range-track{ width: 100%; height: 2px; background: #0d253e; } input[type=range]::-ms-track{ width: 100%; height: 2px; background: #0d253e; } div.fin-wrapper form input{ font-family: dinCond; font-weight: 700; size: 14px; color: #0c1b2f } div.fin-wrapper form span.seguro input[type=checkbox]{ -webkit-appearance: none; background-color: white; padding: 6px; position: absolute; left: 5px; border: 1px solid #726437; } div.fin-wrapper form span.seguro span.fin-tag{ display: block; padding-left: 10%; } div.fin-wrapper form span.seguro input[type=checkbox]:checked:after { content: '\2714'; font-size: 14px; position: absolute; top: 0px; left: 0px; color: #857647; } div.finflexedfull.button{ background-color: #857647; position: relative; width: 60%; margin: 0 auto; margin-bottom: 10%; margin-top: 10%; text-align: center; cursor: pointer; } div.finflexedfull.button p{ padding: 5% } div.finflexedfull.button span{ color: #ffffff; font-family: dinAlt; } div.srp-financiacion div.finflexed{ margin: 0 ; background-color: #f3f3f3; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper, div.srp-financiacion div.finflexed.srp-centercol div.fin-wrapper, div.srp-financiacion div.finflexed.srp-leftcol div.fin-wrapper{ padding: 5% 15%; } @media only screen and (min-width: 370px){ div.contenedor-financiacion h1.intro-text{ top: 100px; } } @media only screen and (min-width: 400px){ div.fin-wrapper{ font-size: 20px; } div.fin-wrapper h4{ font-size: 25px; } } @media only screen and (min-width: 700px){ div.contenedor-financiacion h1.intro-text { top: 140px; font-size: 70px; } div.fin-wrapper { font-size: 30px; } div.fin-wrapper span.fin-precio, div.fin-wrapper span.fin-year{ font-size: 50px; } div.fin-wrapper h4 { font-size: 45px; } div.finflexedfull.button{ width: 30%; } } @media only screen and (min-width: 1000px){ div.contenedor-financiacion h1.intro-text { top: 190px; font-size: 100px; } div.finflexedfull.button{ margin-bottom: 15%; margin-top: 5%; } } @media only screen and (min-width: 1200px){ div.srp-financiacion{ padding-top: 0; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper, div.srp-financiacion div.finflexed.srp-centercol div.fin-wrapper, div.srp-financiacion div.finflexed.srp-leftcol div.fin-wrapper{ padding: 0; } div.srp-financiacion{ display: -webkit-box; display: -ms-flexbox; display: flex; padding: 12% 5% 1% 5%; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.srp-financiacion div.finflexed{ width: 30% } div.fin-wrapper { font-size: 20px; } div.fin-wrapper h4 { font-size: 20px; } div.srp-financiacion div.finflexed{ margin: 0 1%; padding: 0% 5% 1% 5%; background-color: #f3f3f3; } div.srp-financiacion div.finflexed.srp-rightcol{ padding: 0; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper{ font-family: dinCond; font-weight: 700; font-size: 15px; color: #0c1b2f; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 5%; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper.top{ font-size: 18px; padding: 0% 5% 5% 5%; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper.top span.fin-precio{ font-size: 30px; margin: 2% 0; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fin-wrapper{ font-size: 13px; } div.srp-financiacion div.finflexed div.fin-wrapper div.finprod-img img{ width: 100%; height: auto; margin-bottom: 10%; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fininfo-left{ margin-right: 40%; } div.finflexedfull.button{ background-color: #857647; position: relative; width: 15%; margin-left: 80%; margin-bottom: 100px; margin-top: 50px; text-align: center; cursor: pointer; } div.finflexedfull.button p { padding: 0; } div.finflexedfull.button span{ color: #ffffff; font-family: dinAlt; } div.contenedor-financiacion h1.intro-text{ top: 100px; font-size: 70px; margin-top: 1%; margin-bottom: 1%; } div.fin-wrapper span.fin-precio, div.fin-wrapper span.fin-year{ font-size: 30px; } } @media only screen and (min-width:1400px){ div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fin-wrapper { font-size: 15px; } } @media only screen and (min-width:1600px){ div.srp-financiacion{ /* padding-top: 18%; */ } div.contenedor-financiacion h1.intro-text{ top: 120px; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper{ font-size: 17px; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper.top { font-size: 15px; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper{ padding: 5% 6% 0 15%; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper.top{ padding: 0% 0% 5% 14%; } div.fin-wrapper h4{ font-size: 25px; } div.contenedor.menu div.button.financiacion{ margin-top: -4.7%; } } @media only screen and (min-width: 1800px){ div.contenedor-financiacion h1.intro-text { top: 150px; font-size: 90px; } div.fin-wrapper h4 { font-size: 25px; } div.srp-financiacion div.finflexed.srp-rightcol div.fin-wrapper div.fin-wrapper{ font-size: 15px; } div.finflexed.srp-leftcol div.pricecont, div.finflexed.srp-leftcol div.yearcont { margin-bottom: 5%; } } /*BOTON FINANCIACION*/ @media only screen and (min-width: 1200px){ div.contenedor.menu div.button.financiacion{ margin: 0; padding: 0.8% 0; margin-top: -4.5%; margin-left: 89%; width: 10%; text-transform: uppercase; background-color: #857647; border: 2px solid #000000; } } /*PLACEHOLDER MAPA*/ div.link-a-mapa div.contenedor-texto-link div.button{ background: #857647; position: relative; width: 83%; margin-left: 20%; margin-bottom: 5%; margin-top: 5%; padding: 2%; text-align: center; } div.link-a-mapa div.contenedor-texto-link div.button a{ text-decoration: none; color: #ffffff; font-family: dinAlt; font-size: 16px; font-weight: 700; margin: 0; text-transform: uppercase; } section.mapa span.brand{ color: #867746; } div.link-a-mapa{ display: block ; font-size: 0px; padding: 10% 0; background-image: url("img/mapa-call.png"); background-size: cover; } div.link-a-mapa img.moto{ width: 100%; } div.contenedor-texto-link, div.contenedor-moto{ display: inline-block; font-size: 16px; vertical-align: middle; width: 50%; margin-top: 10%; margin-bottom: 10%; } div.contenedor-moto{ position: absolute; } div.link-a-mapa p{ width: 60%; font-family: dinCond; margin: 0; font-size: 17px; font-weight: 700; text-transform: uppercase; color: #ffffff; margin: 0 auto; position: relative; } @media only screen and (min-width: 720px){ div.link-a-mapa div.contenedor-texto-link div.button { width: 50%; } div.link-a-mapa p { font-size: 35px; } } @media only screen and (min-width: 1024px){ div.link-a-mapa p{ width: 50%; font-size: 50px; } div.link-a-mapa div.contenedor-texto-link div.button{ margin-left: 25%; } div.contenedor-moto{ width: 60%; margin-left: -20%; margin-top: 5%; } } @media only screen and (min-width: 1200px){ div.pagina-contacto{ display: block; font-size: 0; background-color: #04203c; } div.pagina-contacto div.section.contacto, div.pagina-contacto div.section.mapa{ display: inline-block; width: 50%; vertical-align: middle; } div.pagina-contacto section.contacto p{ margin-bottom: 0; } div.pagina-contacto div.section.mapa div.contenedor-moto{ display: none; } div.pagina-contacto div.link-a-mapa{ background-position: right; } div.pagina-contacto div.link-a-mapa p{ width: 90%; margin: 0; } div.pagina-contacto div.contenedor-texto-link{ margin: 20% 0% 20% 15%; } div.pagina-contacto div.link-a-mapa div.contenedor-texto-link div.button{ margin-left: 0; } div.pagina-contacto div.campos-misma-linea{ margin-bottom: 16px; padding: 0px 18%; } div.pagina-contacto div.contacto-formulario .campo{ margin-bottom: 16px; padding: 1px 18%; } div.pagina-contacto div.button-holder{ text-align: center; } div.pagina-contacto div.contacto-formulario .button{ margin-left: 0; font-size: 16px; margin-bottom: 18%; } div.link-a-mapa p{ width: 45%; } div.link-a-mapa div.contenedor-texto-link div.button{ margin-left: 28%; width: 40%; z-index: 100; } div.contenedor-moto{ margin-left: -26%; } } @media only screen and (min-width: 1800px){ div.link-a-mapa p{ font-size: 70px; } div.link-a-mapa div.contenedor-texto-link div.button{ width: 30%; z-index: 100; } div.pagina-contacto footer nav.menu-footer ul{ margin-top: -19%; } } /* UP-BUTTON */ div.fp-auto-height div#up-button{ display: none; } @media only screen and (min-width: 1200px){ div.fp-auto-height div#up-button{ display: none; text-align: center; cursor: pointer; position: fixed; width: 60px; height: 60px; background-color:#807347; z-index: 10000; top: 550px; right: 50px; } div#up-button .fa{ margin: 20%; } .fa-chevron-up:before { content: "\f106"; color: #fff; font-size: 35px; } } @media only screen and (min-width: 1400px){ div.fp-auto-height div#up-button{ top: 600px; } } @media only screen and (min-width: 1600px){ div.fp-auto-height div#up-button{ top: 800px; } } /* PAGINA MODELOS INTERMEDIA */ .container-aux{ max-width: 1500px; margin: auto } .contenedor-pagina-intermedia{ display: block; padding: 5%; padding-top: 25%; text-align: center; background-color: #0d253e; } .contenedor-pagina-intermedia .modelos-pagina-intermedia{ position: relative; display: inline-block; /* width: 50%; */ /* padding-bottom: 2%; */ margin: 5%; min-width: 200px; min-height: 237px; background-color: #ffffff; } .contenedor-pagina-intermedia .titulo h1{ font-family: dinCond; font-weight: 700; font-size: 30px; text-transform: uppercase; color: #ffffff; } .contenedor-pagina-intermedia .titulo span{ color: #857647; } .contenedor-pagina-intermedia .modelos-pagina-intermedia h3{ font-family: dinCond; font-weight: 700; width: 100%; text-align: right; margin-top: 5px; margin-right: 10px; font-size: 65px; top: 0; right: 0; color: #0d253e; position: absolute; } .contenedor-pagina-intermedia .modelos-pagina-intermedia img{ width: 100%; display: block; } .contenedor-pagina-intermedia .modelos-pagina-intermedia .overlay{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(13,37,62,0); } .contenedor-pagina-intermedia .modelos-pagina-intermedia span.cilindrada{ font-size: 30px; color: #857647; } .contenedor-pagina-intermedia .modelos-pagina-intermedia .button{ width: 70%; /* margin-left: 15%; */ padding: 4% 2%; top: 85%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #857647; position: absolute; } .contenedor-pagina-intermedia .modelos-pagina-intermedia .button a{ text-decoration: none; font-family: dinAlt; text-transform: uppercase; font-size: 14px; color: #ffffff; } @media only screen and (min-width:720px){ .contenedor-pagina-intermedia .modelos-pagina-intermedia{ min-width: 400px; } .contenedor-pagina-intermedia{ padding: 15%; } .contenedor-pagina-intermedia .titulo h1{ font-size: 50px; } } @media only screen and (min-width:1200px){ .contenedor-pagina-intermedia{ padding: 5%; } .contenedor-pagina-intermedia .titulo h1{ font-size: 70px; margin-top: 7%; margin-bottom: 0; } } /*POP-UPS CONTACTO*/ .success-pop-up, .fail-pop-up{ background-color: #f3f3f3; padding: 5%; text-align:center; position: absolute; width: 80%; z-index: 100000; top: 30%; left:10%; margin: 0 auto; display: none; } .contenedor-modelos.contacto .success-pop-up, .contenedor-modelos.contacto .fail-pop-up{ top: 10%; } .success-pop-up.open, .fail-pop-up.open{ display: block; } .success-pop-up h1.pop-up, .fail-pop-up h1.pop-up{ font-family: dinCond; font-weight: 700; margin: 2%; color: #857647; font-size: 30px; text-transform: uppercase; } .success-pop-up p.pop-up, .fail-pop-up p.pop-up{ font-family: dinAlt; font-weight: 700; color: #0d253e; font-size: 16px; } .success-pop-up h3.pop-up{ color: #9b9b9b; font-family: dinAlt; font-size: 16px; font-weight: 700; text-transform: uppercase; } .fail-pop-up ul.lista{ width: 100%; list-style: none; padding: 0; margin: 10px auto; } .fail-pop-up ul.lista li{ color: #e60000; font-family: dinAlt; font-size: 16px; font-weight: 700; text-transform: uppercase; } .overlay-pop-up{ display: none; } .overlay-pop-up.open{ display: block; top: 0; bottom: 0; right: 0; left: 0; position: absolute; background-color: rgba(169,169,169,0.8); } select::-ms-expand{ display: none; } input::-ms-clear{ display: none; } /* .cantidad{ display: none; } */ /*·············· Noticias ··············*/ .srp-maincont { padding-top: 20%; margin-bottom: 5%; font-family: 'dinAlt'; } .srp-maincont .title-holder { display: block; width: 100%; margin: 0 auto; margin-bottom: 30px; text-align: center; } .srp-maincont .title-holder h1 { font-family: 'dinCond'; font-size: 60px; font-weight: 700; text-transform: uppercase; color: #1a1a1a; display: inline-block; } .srp-maincont .noticias-holder { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: top; width: 85%; margin: 0 auto; } .srp-maincont .noticias-holder .post { flex-basis: 100%; margin-bottom: 20px; } .srp-maincont .noticias-holder .post .post-thumb { height: 30vh; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; margin-bottom: 20px; } .srp-maincont .noticias-holder .post .post-info .post-title { font-size: 35px; font-weight: 700; margin-bottom: 15px; } .srp-maincont .noticias-holder .post .post-info p, .srp-maincont .noticias-holder .post .post-info .content { color: #1a1a1a; font-size: 16px; font-weight: 400; } .srp-maincont .noticias-holder .post .post-info .link-to-post{ text-decoration: none; } .srp-maincont .noticias-holder .post .post-info .link-to-post .bttn { margin-top: 25px; width: 60%; background-color: #857647; color: white; font-size: 16px; font-weight: 700; text-transform: uppercase; padding: 2% 5%; text-align: center; transition: 0.3s linear all; } .srp-maincont .noticias-holder .post .post-info .link-to-post .bttn:hover{ background-color: #04203c; transition: 0.3s linear all; } .srp-maincont .noticias-holder .post .post-info .link-to-post .bttn p { color: white; margin: 0; } .srp-maincont .hero-container { position: relative; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; height: 35vh; } .srp-maincont .post-content { width: 85%; margin: 0 auto; font-size: 16px; color: #1a1a1a; font-weight: 700; } .srp-maincont .post-content .post-info { background-color: #0d253e; padding: 15px; position: relative; display: inline-block; padding-right: 12%; transform: translateY(-30%); } .srp-maincont .post-content .post-info h1 { color: white; text-transform: none; font-size: 36; font-weight: 700; } .srp-maincont .post-content .post-info .date { margin-top: 15px; color: white; font-size: 16px; font-weight: 400; } .srp-maincont .post-content p { margin-top: 15px; } .srp-maincont .post-content .cont-nav { width: 100%; text-align: center; } .srp-maincont .post-content .cont-nav .navegacion { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .srp-maincont .post-content .cont-nav .navegacion .nav-bttn { margin-top: 30px; padding: 15px 30px; background-color: #857647; color: white; transition: 0.3s linear all; } .srp-maincont .post-content .cont-nav .navegacion .nav-bttn:hover{ background-color: #04203c; transition: 0.3s linear all; } .srp-maincont .post-content .cont-nav .navegacion .nav-bttn p { margin: 0 auto; display: inline-block; } .srp-maincont .post-content .cont-nav .navegacion .nav-bttn:first-of-type { margin-right: 10px; } .srp-maincont .post-content .cont-nav .navegacion .nav-bttn:last-of-type { margin-right: 20px; } @media only screen and (min-width: 1200px){ /*·············· Noticias ··············*/ .srp-maincont { padding-top: 10%; } .srp-maincont .noticias-holder .post { flex-basis: 30%; margin: 0; margin-bottom: 20px; } .srp-maincont .noticias-holder .post:nth-of-type(3n - 1) { margin: 0 5%; margin-bottom: 20px; } .srp-maincont .post-content { max-width: 1400px; } }