html {
overflow-x: hidden;
font-family: "Manrope", sans-serif;
}
header {
height: 88px;
background-color: #0d0d0d;
}
body {
background-color: #0d0d0d;
}
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
height: 88px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 88px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
#logo {
margin-left: 60px;
width: 154px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 70px;
padding-right: 70px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
align-items: center;
margin-left: 60px;
margin-right: 60px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 40px;
line-height: 52.81px;
margin-left: 73px;
margin-top: 100px;
margin-right: 150px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
width: 615px;
margin-left: -40px;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 70px;
font-size: 30px;
border-bottom: solid 3px #f74d19;
margin-right: 250px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 22px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 28px;
color: #ffffff;
margin-left: 150px;
margin-right: 600px;
}
.linea {
margin-left: 70px;
margin-right: 70px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
position: relative;
z-index: 100;
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 100px 150px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 40px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 0px 0px 70px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 200px 0px 0px 104px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 18px;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
font-size: 13px;
font-family: "Manrope", sans-serif;
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 20px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: 200px 85px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 0px 0px 104px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 0px 200px 104px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 85px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 85px 0px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.gal {
position: relative;
z-index: 10000;
background-color: #0d0d0d;
}
.galeria-div {
display: flex;
justify-content: space-between;
margin-left: 70px;
margin-right: 70px;
margin-top: 50px;
margin-bottom: 100px;
}
.galeria {
width: 700px;
color: #ffffff;
border: solid 3px #f74d19;
font-weight: 800;
font-family: "Manrope", sans-serif;
font-size: 25px;
background-color: #202124;
padding: 20px;
border-radius: 20px;
}
.galeria:hover {
transition: ease-in-out 1s;
background-color: #f74d19;
color: #ffffff;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(-250px * 17));
transform: translateX(calc(-250px * 17));
}
}
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(-250px * 10.1));
transform: translateX(calc(-250px * 10.1));
}
}
.slider {
/*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);*/
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: 95%;
}
.slider::before,
.slider::after {
background: linear-gradient(to right, #202124, rgba(255, 255, 255, 0) 100%);
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::after {
right: 0;
top: 0;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.slider::before {
left: 0;
top: 0;
}
.slider .slide-track {
-webkit-animation: scroll 40s linear infinite;
animation: scroll 40s linear infinite;
display: flex;
align-items: center;
width: calc(250px * 17);
}
.slider .slide {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 250px;
}
.clientes h3 {
font-size: 40px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
.santander {
margin-top: 10px;
}
.cencosud {
margin-left: 20px;
}
.easy {
margin-left: 20px;
}
.poli {
margin-left: 10px;
}
.hipotecario {
margin-left: 20px;
}
.icl {
margin-left: 20px;
}
.itcom {
margin-left: 20px;
}
.la-caja {
margin-left: 20px;
}
.movistar {
margin-left: 0px;
}
.mundo {
margin-left: 0px;
}
.san-juan {
margin-left: 30px;
}
.sm {
margin-left: 30px;
}
.nixon {
margin-left: 30px;
}
.vea {
margin-left: 30px;
}
.santander-2 {
margin-left: 30px;
}
.cencosud-2 {
margin-left: 30px;
}
.easy-2 {
margin-left: 30px;
}
.poli-2 {
margin-left: 30px;
}
.hipotecario-2 {
margin-left: 30px;
}
.icl-2 {
margin-left: 30px;
}
.itcom-2 {
margin-left: 30px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 40px;
margin: 181px 200px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 181px 0px 0px 0px !important;
color: #ffffff;
}
input {
max-width: 600px;
padding-left: 20px;
color: #ffffff;
width: 600px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
max-width: 600px;
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 600px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 70px;
margin-top: 50px;
width: 200px;
}
.whasa:hover {
scale: 1.1;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
iframe {
filter: invert(100%) hue-rotate(180deg);
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
@media only screen and (max-width: 2560px) {
html {
font-family: "Manrope", sans-serif;
}
header {
height: 88px;
background-color: #0d0d0d;
}
body {
background-color: #0d0d0d;
}
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
height: 88px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 88px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
#logo {
margin-left: 60px;
width: 154px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 70px;
padding-right: 70px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
align-items: center;
margin-left: 60px;
margin-right: 60px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 40px;
line-height: 52.81px;
margin-left: 73px;
margin-top: 100px;
margin-right: 150px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
width: 515px;
margin-left: 100px;
margin-bottom: 50px;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 70px;
font-size: 30px;
border-bottom: solid 3px #f74d19;
margin-right: 250px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 22px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 28px;
color: #ffffff;
margin-left: 150px;
margin-right: 600px;
}
.linea {
margin-left: 70px;
margin-right: 70px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 200px 150px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 40px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 0px 0px 70px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 200px 0px 0px 104px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 18px;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
font-size: 13px;
font-family: "Manrope", sans-serif;
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 20px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: 200px 85px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 0px 0px 104px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 0px 200px 104px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 85px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 85px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 40px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 40px;
margin: 181px 200px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 181px 0px 0px 200px;
color: #ffffff;
}
input {
padding-left: 20px;
color: #ffffff;
width: 800px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 800px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}
@media only screen and (max-width: 1366px) {
.repre {
width: 615px;
margin-left: -80px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 40px;
margin: 181px 200px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 181px 0px 0px -90px;
color: #ffffff;
}
input {
padding-left: 20px;
color: #ffffff;
width: 600px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 600px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
}
@media only screen and (max-width: 1280px) {
html {
font-family: "Manrope", sans-serif;
}
header {
height: 88px;
background-color: #0d0d0d;
}
body {
background-color: #0d0d0d;
}
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
height: 88px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 88px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
#logo {
margin-left: 60px;
width: 154px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 70px;
padding-right: 70px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
align-items: center;
margin-left: 60px;
margin-right: 60px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 40px;
line-height: 52.81px;
margin-left: 73px;
margin-top: 100px;
margin-right: 150px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
width: 615px;
margin-left: -100px;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 70px;
font-size: 30px;
border-bottom: solid 3px #f74d19;
margin-right: 250px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 22px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 28px;
color: #ffffff;
margin-left: 150px;
margin-right: 600px;
}
.linea {
margin-left: 70px;
margin-right: 70px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 200px 150px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 40px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 0px 0px 70px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 200px 0px 0px 104px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 18px;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
font-size: 13px;
font-family: "Manrope", sans-serif;
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 20px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: 200px 85px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 0px 0px 104px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 0px 200px 104px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 85px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 85px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 40px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 40px;
margin: 181px 200px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 181px 0px 0px -90px;
color: #ffffff;
}
input {
padding-left: 20px;
color: #ffffff;
width: 600px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 600px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}
@media only screen and (max-width: 1024px) {
html {
font-family: "Manrope", sans-serif;
}
header {
height: 88px;
background-color: #0d0d0d;
}
body {
background-color: #0d0d0d;
}
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
height: 88px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 88px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
#logo {
margin-left: 60px;
width: 154px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 70px;
padding-right: 70px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
align-items: center;
margin-left: 60px;
margin-right: 60px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 30px;
line-height: 32.81px;
margin-left: 73px;
margin-top: 100px;
margin-right: 150px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
width: 415px;
margin-left: -40px;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 70px;
font-size: 30px;
border-bottom: solid 3px #f74d19;
margin-right: 150px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 22px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 28px;
color: #ffffff;
margin-left: 150px;
margin-right: 200px;
}
.linea {
margin-left: 70px;
margin-right: 70px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 200px 50px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 40px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 0px 0px 70px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 200px 20px 0px 20px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 15px;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
font-size: 13px;
font-family: "Manrope", sans-serif;
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 20px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: 200px 20px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 20px 0px 20px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 20px 200px 20px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 20px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 20px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.galeria {
margin-left: -310px;
width: 600px;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 40px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 40px;
margin: 181px 200px 0px 70px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 181px 0px 0px -90px;
color: #ffffff;
}
input {
padding-left: 20px;
color: #ffffff;
width: 450px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 450px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 70px;
margin-top: 50px;
width: 200px;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}
@media only screen and (max-width: 900px) {
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
z-index: 10000;
height: 30px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 80px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
#logo {
margin-left: 20px;
width: 104px;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 20px;
padding-right: 20px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
width: auto !important;
align-items: center;
margin-left: 20px;
margin-right: 20px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 22.81px;
margin-left: 20px;
margin-top: 80px;
margin-right: 20px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
margin-top: 50px;
display: flex;
padding-bottom: 50px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 20px;
font-size: 20px;
border-bottom: solid 3px #f74d19;
margin-right: 20px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 16px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 18px;
color: #ffffff;
margin-left: 0px;
margin-right: 0px;
}
.linea {
margin-left: 20px;
margin-right: 20px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 100px 20px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 20px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 20px 0px 20px;
font-size: 16px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 100px 20px 0px 20px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 10px;
}
.accordion-content {
font-family: "Manrope", sans-serif;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 45px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: 100px 20px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 20px 0px 20px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 20px 200px 20px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 20px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 20px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.galeria {
margin-left: -210px;
width: 400px;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 20px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 20px;
margin: 101px 80px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 101px 20px 0px 20px;
color: #ffffff;
}
input {
max-width: 360px;
padding-left: 20px;
color: #ffffff;
width: 325px;
height: 63px;
margin-left: 20px;
margin-right: 20px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
max-width: 360px;
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 325px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 70px;
margin-top: 50px;
width: 200px;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
body,
html {
overflow-x: hidden;
}
.cardhero,
.galeria-div,
.accordion,
.v-2,
.v-3,
.v-4,
.v-5,
.v-6 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.slider {
overflow-x: hidden;
}
.slider .slide-track {
width: auto !important;
flex-wrap: nowrap;
}
.repre {
max-width: 90%;
width: auto;
}
}
@media only screen and (max-width: 525px) {
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
z-index: 10000;
height: 30px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 80px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
#logo {
margin-left: 20px;
width: 104px;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 20px;
padding-right: 20px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
width: auto !important;
align-items: center;
margin-left: 20px;
margin-right: 20px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 22.81px;
margin-left: 20px;
margin-top: 100px;
margin-right: 20px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
display: flex;
padding-bottom: 50px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 20px;
font-size: 20px;
border-bottom: solid 3px #f74d19;
margin-right: 20px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 16px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 18px;
color: #ffffff;
margin-left: 0px;
margin-right: 0px;
}
.linea {
margin-left: 20px;
margin-right: 20px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 100px 20px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 20px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 20px 0px 20px;
font-size: 16px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 100px 20px 0px 20px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 15px;
}
.accordion-content {
font-family: "Manrope", sans-serif;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 45px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: -180px 20px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 20px 0px 20px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 20px 200px 20px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 20px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 20px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.galeria {
margin-right: 20px;
margin-left: 20px;
width: 88%;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 20px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
.slider::before,
.slider::after {
background: linear-gradient(to right, #202124, rgba(255, 255, 255, 0) 100%);
content: "";
height: 100px;
position: absolute;
width: 100px;
z-index: 2;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 20px;
margin: 101px 80px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 101px 20px 0px 20px;
color: #ffffff;
}
input {
max-width: 360px;
padding-left: 20px;
color: #ffffff;
width: 375px;
height: 63px;
margin-left: 20px;
margin-right: 20px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
max-width: 360px;
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 375px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 70px;
margin-top: 50px;
width: 200px;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}
@media only screen and (max-width: 428px) {
html {
zoom: 100%;
}
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
z-index: 10000;
height: 30px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 80px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
#logo {
margin-left: 20px;
width: 104px;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 20px;
padding-right: 20px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
width: auto !important;
align-items: center;
margin-left: 20px;
margin-right: 20px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 22.81px;
margin-left: 20px;
margin-top: 100px;
margin-right: 20px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
display: flex;
padding-bottom: 50px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 20px;
font-size: 20px;
border-bottom: solid 3px #f74d19;
margin-right: 20px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 16px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 18px;
color: #ffffff;
margin-left: 0px;
margin-right: 0px;
}
.linea {
margin-left: 20px;
margin-right: 20px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 100px 20px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 20px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 20px 0px 20px;
font-size: 16px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 100px 20px 0px 20px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 15px;
}
.accordion-content {
font-family: "Manrope", sans-serif;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 45px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: -180px 20px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 20px 0px 20px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 20px 200px 20px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 20px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 20px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.galeria {
width: 360px;
margin-left: 20px;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 20px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 20px;
margin: 101px 80px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 101px 20px 0px 20px;
color: #ffffff;
}
input {
max-width: 360px;
padding-left: 20px;
color: #ffffff;
width: 375px;
height: 63px;
margin-left: 20px;
margin-right: 20px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
max-width: 360px;
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 375px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 50px;
margin-top: 50px;
width: 200px;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}
@media only screen and (max-width: 415px) {
.galeria {
width: 350px;
margin-left: 20px;
}
.whasa {
margin-left: 50px;
margin-top: 50px;
width: 200px;
}
}
@media only screen and (max-width: 393px) {
.galeria {
width: 325px;
margin-left: 20px;
}
.whasa {
margin-left: 50px;
margin-top: 50px;
width: 200px;
}
}
@media only screen and (max-width: 375px) {
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
z-index: 10000;
height: 30px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 80px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
#logo {
margin-left: 20px;
width: 104px;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 20px;
padding-right: 20px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
width: auto !important;
align-items: center;
margin-left: 20px;
margin-right: 20px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 22.81px;
margin-left: 20px;
margin-top: 100px;
margin-right: 20px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
display: flex;
padding-bottom: 50px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 20px;
font-size: 20px;
border-bottom: solid 3px #f74d19;
margin-right: 20px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 16px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 18px;
color: #ffffff;
margin-left: 0px;
margin-right: 0px;
}
.linea {
margin-left: 20px;
margin-right: 20px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 100px 20px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 20px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 20px 0px 20px;
font-size: 16px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 100px 20px 0px 20px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 15px;
}
.accordion-content {
font-family: "Manrope", sans-serif;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 45px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: -180px 20px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 20px 0px 20px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 20px 200px 20px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 20px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 20px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.galeria {
width: 310px;
margin-left: 20px;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 20px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 20px;
margin: 101px 80px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 101px 20px 0px 20px;
color: #ffffff;
}
input {
max-width: 360px;
padding-left: 20px;
color: #ffffff;
width: 320px;
height: 63px;
margin-left: 20px;
margin-right: 20px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
max-width: 360px;
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 320px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 10px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 50px;
margin-top: 70px;
width: 200px;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}
@media only screen and (max-width: 360px) {
.galeria {
width: 295px;
}
.whasa {
margin-left: 50px;
margin-top: 50px;
width: 200px;
}
}
@media only screen and (max-width: 320px) {
/* NAVBAR */
.navbar .navbar-nav li a {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-left: 40px;
}
.navbar .navbar-nav li a:hover {
transform: scale(1.1);
color: #f74d19;
}
.navbar .navbar-nav li .contacto {
font-family: "Manrope", sans-serif;
color: #ffffff;
font-weight: 800;
font-size: 16px;
line-height: 17.6px;
margin-right: -40px;
}
.navbar1 {
height: 80px;
background-color: #0d0d0d;
margin-bottom: 400px;
}
.scroll {
height: 80px;
background-color: #0d0d0d;
border-radius: 20px;
margin-left: 0px;
margin-right: 0px;
}
.scroll #logo {
margin-left: 10px;
}
.navbar-collapse {
background-color: #0d0d0d;
padding-left: 80px;
padding-right: 120px;
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.active {
color: #f74d19 !important;
}
.navbar-nav .active a {
color: #f74d19 !important;
}
#logo {
margin-left: 20px;
width: 104px;
}
/* HERO */
#hero {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 87px;
padding-left: 20px;
padding-right: 20px;
}
.cardhero {
background: linear-gradient(90deg, #202124 5.45%, #0d0d0d 99%);
background-size: cover;
border-radius: 20px;
justify-content: center;
height: auto;
width: auto !important;
align-items: center;
margin-left: 40px;
margin-right: 40px;
}
.degra {
margin-left: 70px;
margin-right: 60px;
}
.h1h {
color: #ffffff;
z-index: 100;
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 22.81px;
margin-left: 20px;
margin-top: 100px;
margin-right: 20px;
margin-bottom: 87px;
}
.orange {
color: #f74d19;
}
.repre {
display: flex;
padding-bottom: 50px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
.flecha {
margin-top: -40px;
width: 105px;
margin-bottom: 40px;
}
.centrar {
text-align: center;
}
/* NOSOTROS */
#nosotros {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
padding-top: 100px;
}
#nosotros h3 {
color: #ffffff;
margin-left: 20px;
font-size: 20px;
border-bottom: solid 3px #f74d19;
margin-right: 20px;
}
#nosotros p {
line-height: 24px;
font-weight: 400;
font-size: 16px;
text-align: justify;
color: #ffffff;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
#nosotros h5 {
margin-top: 40px;
font-size: 18px;
color: #ffffff;
margin-left: 0px;
margin-right: 0px;
}
.linea {
margin-left: 20px;
margin-right: 20px;
border-bottom: solid 3px #f74d19;
}
/* OFRECEMOS */
.ofrecemos {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.h4-ofrecemos {
color: #ffffff;
margin: 100px 20px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.h4-ofrecemos h4 {
font-size: 20px;
}
.p-ofrecemos {
color: #ffffff;
margin: 43px 20px 0px 20px;
font-size: 16px;
}
.accordion {
font-family: "Manrope", sans-serif;
background-color: #202124;
max-width: 800px;
margin: 100px 20px 0px 20px;
border-radius: 20px;
}
.accordion_item {
background-color: #202124;
margin-bottom: 1px;
border-radius: 20px;
}
.accordion-header {
font-family: "Manrope", sans-serif;
border-radius: 20px;
background-color: #202124;
color: #fff;
padding: 15px;
font-weight: bold;
cursor: pointer;
}
.accordion-header p {
font-family: "Manrope", sans-serif;
margin-top: 10px;
font-size: 15px;
}
.accordion-content {
font-family: "Manrope", sans-serif;
}
.accordion-header:hover:not(.active) {
background-color: #f74d19;
}
.accordion-header:hover:not(.active) .cruz {
color: #ffffff;
}
.accordion-header.active {
color: #ffffff !important;
background-color: #202124;
}
.accordion-header.active:hover {
background-color: #202124;
}
.accordion-header.active .cruz {
color: #202124;
}
.cruz {
margin-top: 10px;
color: #f74d19;
}
.espacio-texto {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.accordion-content {
margin-top: -20px;
border-radius: 0px 0px 20px 20px;
color: #fff;
background-color: #202124;
padding: 45px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.v-2 {
margin: -180px 20px 0px 20px;
}
.cruz-2 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-2 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-2 {
color: #ffffff;
}
.v-3 {
margin: 20px 20px 0px 20px;
}
.cruz-3 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-3 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-3 {
color: #ffffff;
}
.v-4 {
margin: 20px 20px 200px 20px;
}
.cruz-4 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-4 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-4 {
color: #ffffff;
}
.v-5 {
margin: 20px 20px 0px 20px;
}
.cruz-5 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-5 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-5 {
color: #ffffff;
}
.v-6 {
margin: 20px 20px 200px 20px;
}
.cruz-6 {
margin-top: 10px;
font-weight: 600;
color: #f74d19;
}
.accordion-header.active .cruz-6 {
color: #202124;
}
.accordion-header:hover:not(.active) .cruz-6 {
color: #ffffff;
}
.galeria {
width: 255px;
margin-left: 20px;
}
/* MARCAS */
.clientes {
font-family: "Manrope", sans-serif;
height: 400px;
background-color: #202124;
display: flex;
align-items: center;
}
.clientes h3 {
font-size: 20px;
text-align: center;
color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
}
/* CONTACTO */
.contacto {
font-family: "Manrope", sans-serif;
background-color: #0d0d0d;
color: #ffffff;
}
.contacto h4 {
color: #ffffff;
font-size: 20px;
margin: 101px 20px 0px 20px;
border-bottom: solid 3px #f74d19;
}
.contacto p {
margin: 56px 192px 0px 70px;
color: #ffffff;
}
.form {
margin: 101px 20px 0px 20px;
color: #ffffff;
}
input {
max-width: 360px;
padding-left: 20px;
color: #ffffff;
width: 270px;
height: 63px;
margin-left: 20px;
margin-right: 20px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
::placeholder {
font-size: 20px;
padding-left: 20px;
}
label {
color: #ffffff;
font-size: 20px;
margin-left: 10px;
}
textarea {
max-width: 360px;
padding-top: 20px;
padding-left: 20px;
min-height: 63px;
color: #ffffff;
width: 270px;
height: 63px;
border-radius: 20px;
background-color: #202124;
border: #202124;
}
input[type="number"]::-moz-number-spin-box {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.form button {
font-size: 18px;
line-height: 24.75px;
margin-top: 20px;
width: 198px;
height: 55px;
background-color: #0d0d0d;
border: solid 3px #f74d19;
border-radius: 20px;
color: #f74d19;
margin-bottom: 220px;
transition: all 0.3s ease-in-out;
}
.form button:hover {
background-color: #f74d19;
color: #ffffff;
}
.telefono {
color: #ffffff;
font-size: 20px;
margin-top: 50px;
margin-left: 70px;
}
.telefono svg {
margin-right: 20px;
}
.telefono svg:hover {
color: #f74d19;
}
.wsp {
font-size: 20px;
margin-top: 30px;
margin-left: 70px;
}
.wsp svg {
margin-top: 0px;
margin-left: 0px;
margin-right: 20px;
}
.wsp a {
color: #ffffff;
text-decoration: none;
}
.wsp svg:hover {
color: #f74d19;
}
.whasa {
margin-left: 50px;
margin-top: 50px;
width: 200px;
}
/* MAPA */
.linea-gruesa {
height: 10px;
background-color: #f74d19;
}
.mapita svg {
width: 100%;
height: 400px;
}
/* FOOTER */
footer {
font-family: "Manrope", sans-serif;
background-color: #202124;
color: #ffffff;
font-size: 14px;
line-height: 19.12px;
height: 94px;
}
footer div {
background-color: #202124;
text-align: center;
}
footer div p {
margin-top: 38px;
}
}