:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --naranja: #FF5500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@font-face {
  font-family: 'Rauda';
  src: local('Rauda Solid'), local('Rauda-Solid'),
    url('../fonts/RaudaSolid.woff2') format('woff2'),
    url('../fonts/RaudaSolid.woff') format('woff'),
    url('../fonts/RaudaSolid.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cocomat';
  src: local('Cocomat'), local('CocomatU'),
    url('../fonts/Cocomat.ttf') format('truetype'),
    url('../fonts/CocomatU.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}




@font-face {
  font-family: "Hussar Bold";
  src: url("../fonts/HussarBold.eot?") format("eot"),
    url("../fonts/HussarBold.woff") format("woff"),
    url("../fonts/HussarBold.ttf") format("truetype"),
    url("../fonts/HussarBold.svg#HussarBold") format("svg");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "LemonMilk";
  src: url("../fonts/LEMONMILK-Bold.otf") format("otf"),
    url("../fonts/LEMONMILK-Light.otf") format("otf"),
    url("../fonts/LEMONMILK-Medium.otf") format("otf"),
    url("../fonts/LEMONMILK-Regular.otf") format("otf");
  font-weight: normal;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
p,
.promo,
.servicios,
.productos,
.empresa,
.contacto,
.footer,
.textos_header_caja,
.nav {
  overflow: hidden;

}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom,
      transparent,
      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}



p {
  display: block;
  margin-bottom: 2px !important;
}

b {
  display: block;
  margin-bottom: 4px !important;
  font-size: 15px;
}

.row{
  width: 100%;
}


.imagen_1 {
  width: 50%;
}



.contenedor {
  height: 100vh;
}

.header {
  display: block;

  max-width: 100%;
  background-image: url(../img/header_img.png);
  background-size: contain;
  /* padding-top: 20px;*/


}


.img_logo{
  width: 100%!important;
  
}




.contenedor_camion {

  height: 75vh;
  background-image: url(../img/camion_1.JPG);
  background-size: cover;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  margin-bottom: 200px;



}

.cajas_texto {

  color: #fff;
  padding-top: 4%;
  letter-spacing: 0.5px;
  font-size: 13px;

}

.pre-line {
  white-space: pre-line;
}


.mail_b {

  font-size: 12px;

}





.logo-link {
  display: block;

}


.textos_header_caja{

  width: 34%!important;

} 

.navegador {
  height: 30px;
  background-color: var(--naranja);
  z-index: 100;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-nav a{

  font-size: 25px;

}


.text_nav {
  float: left;
  color: #fff;
  font-weight: 600;
  font-size: 90%;
  display: block;
  margin: 0 80px;
  text-decoration: none;

}



.promo {

  max-height: 120% !important;
  background-image: url(../img/fondo_productos.png);
  background-size: cover;


}



@media screen and (min-width: 991px) {
  .promo {
    background-image: url(../img/promo_pagina3.png);

  }

  

  .promo_texto h1,
  .promo_texto p,
  .promo_texto h2 {

    color: #fff;

  }

  .promo_texto h1 {
    font-size: 150px !important;

  }

  .promo_texto h2 {
    font-size: 82px !important;

  }

  .promo_texto p {
    font-size: 23px !important;

  }


  .servicios_texto {
    margin-left: 550px !important;
  }


  .servicios {


    background-image: url(../img/servicios.png) !important;
    min-height: 105%!important;
   
    

  }




.promo {
  min-height: 100% !important
}

.empresa {
  background-image: url(../img/Empresa.png)!important;
  min-height: 105% !important

}

.texto_empresa {
  margin-right: 30%;
}

.contacto {
  min-height: 100% !important;
}

.productos {
  min-height: 100% !important;
}

.contenedor_grid {
  width: 65% !important;

}

.row_class .galeria_hormigon {

  border: 1px solid #fff;
}


.footer {

  min-height: 70% !important;



}

.logo_metkin_footer {


  background-size: 50%!important;

}

}





.promo_texto {

  color: #052a3f;
  margin-right: 35%;
  padding-top: 3%;
  letter-spacing: 2px;

}

.promo_texto h1 {
  display: flex;
  justify-content: center;
  font-size: 19vw;
  font-family: 'Rauda', sans-serif;
  font-weight: 200;
  letter-spacing: 2px;



}


.promo_texto h2 {
  display: flex;
  justify-content: center;

  font-size: 8vw;
  font-family: 'Hussar Bold', sans-serif;
  font-weight: 130;
  color: var(--naranja);
  letter-spacing: 2px;



}

.promo_texto p {
  display: flex;
  justify-content: center;
  font-size: 140%;
  font-family: 'Cocomat', sans-serif;
  font-weight: 200;
  margin-left: 5px;
  font-weight: 700;



}

.orange_bar {
  color: var(--naranja) !important;
  display: block;
  letter-spacing: 0 !important;





}

.side_orange {
  color: var(--naranja);
  font-size: 25px;
  padding: 1px 10px 0 0;


}

.servicios {

  min-height: 70%;
  background-image: url(../img/footer.png);
  background-size: cover;




}

.servicios_texto {

  color: #ffffff;
  margin-left: 0;

  text-align: center;

}


.servicios h2 {
  font-family: 'Hussar Bold', sans-serif;
  font-size: 38px;
  text-decoration: underline #FF5500 3px;
  text-decoration-skip: 10px;
  padding-bottom: 3%;





}

.servicios h3 {
  font-family: 'Cocomat', sans-serif;
  display: inline-block;
  font-size: 26px;
  font-weight: bolder;
  padding-top: 3%;
  padding-bottom: 1%;
  letter-spacing: 0.5px;


}

.servicios h3::before {
  content: '|';
  margin-right: 5px;
  color: var(--naranja);
}

.servicios h4 {
  font-family: 'Cocomat', sans-serif;
  padding-top: 6%;
  font-weight: 600;
  font-size: 21px;



}

.servicios_texto p {

  display: inline-block;

}


.productos {
  background-image: url(../img/fondo_productos.png);
  min-height: 110%;
  background-size: cover;
}

.productos h3 {
  display: inline;
  font-weight: bolder;
  font-size: 35px;
  color: #ffffff;
  margin-left: 90px;
  line-height: 60px;
  letter-spacing: 1px;
}



.modal-body p{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0.8px;
}


.bar_degrade {
  background-image: url(../img/bar_degradee.png);
  margin-top: 4%;
  display: flex;
  background-repeat: no-repeat;
  align-items: center;
}


.contenedor_grid {
  width: 100%!important;
  margin-top: 3.5%;
}

.row_class {
  display: flex;


}

.row_class .galeria_hormigon {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 250px;
  cursor: pointer;

}

.row_class .galeria_hormigon p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: bolder;
  font-size: 48px;
  color: #ffffff;

}

.row_class .galeria_hormigon:hover {
  filter: brightness(70%);
  transition: all 0.8s;
}

.galeria_hormigon:nth-child(1) {
  background-image: url(../img/grid_1.JPG);
}

.galeria_hormigon:nth-child(2) {
  background-image: url(../img/grid_2.JPG);
}

.galeria_hormigon:nth-child(3) {
  background-image: url(../img/grid_3.JPG);
}

.galeria_hormigon:nth-child(4) {
  background-image: url(../img/grid_4.JPG);
}

.galeria_hormigon:nth-child(5) {
  background-image: url(../img/grid_5.JPG);
}

.galeria_hormigon:nth-child(6) {
  background-image: url(../img/grid_6.JPG);
}


.empresa {
  background-image: url(../img/footer.png);
  background-size: cover;
 
  min-height: 70%;
  

}

.texto_empresa {
  color: #fff;

  padding-top: 3%;
  letter-spacing: 2px;



}

.texto_empresa h3 {

  font-family: 'Hussar Bold', sans-serif;
  font-weight: bold;
  font-size: 38px;
  text-decoration: underline #FF5500 3px;



}

.texto_empresa p {
  font-family: 'Cocomat', sans-serif;
  display: flex;
  justify-content: center;
  font-weight: 700;
  font-size: 23px;
  line-height: 40px;


}

.contacto {
  background-image: url(../img/fondo_productos.png);
  min-height: 120%;
  background-size: cover;

}


.contacto h3 {
  display: inline;
  font-weight: bolder;
  font-size: 35px;
  color: #ffffff;
  margin-left: 90px;
  line-height: 60px;
  letter-spacing: 1px;
}


.contacto iframe {

  margin-top: 3%;
  float: right;
}

.texto_contacto {
  float: left;
  width: 50%;
  padding-top: 4%;
}

.texto_contacto p {

  font-size: 19px;
  margin-left: 30px;

}

.texto_contacto div {
  margin: 8% 0 0 7%
}


.footer {
  background-image: url(../img/footer.png);
  min-height: 90%;
  background-size: cover;

}

.footer_row {


  padding-bottom: 100px;


}

.footer img {
  height: 10%;

}


.texto_footer {
  width: 100%;

  margin: 0 auto;

}


.texto_footer p {
  color: #fff;
  font-size: 30px;
  margin-left: 10px;
  font-size: 14px;
  padding-bottom: 7px;
  letter-spacing: 1px;

}

.logo_metkin_footer {

  background-image: url(../img/logo_metkin.png);
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 100px;
  background-size: 60%;

}

.derechos {
  color: #fff;

}

.derechos p {
  font-size: 12px;

}

.caja_logos_footer {
  padding: 60px 0px 30px 800px;
}

.caja_logos_footer p {
  font-size: 13px;
}


.logo_ig_white {
  background-image: url(../img/ig_logo_white.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 24px;
  background-size: contain;
  margin-right: 15px;


}

.seguinos {
  font-weight: bold;
}

.privacidad {
  font-size: 12px;
}


.modal_header {
  background-image: url(../img/fondo_productos.png);
}

.modal_footer {
  background-image: url(../img/fondo_productos.png);

}