/*************************************************** hoja de estilo principal */
@font-face{
	font-family: Roboto-Regular;
	src: url(Roboto-Regular.ttf);
}
@font-face{
	font-family: Roboto-Light;
	src: url(Roboto-Light.ttf);
}
@font-face{
	font-family: Roboto-Thin;
	src: url(Roboto-Thin.ttf);
}
@keyframes boton{
  from { opacity: 1; }
  to { opacity: 0.25; }
}

* { box-sizing: border-box; }

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] { float: left; }
[class*="cold-"] { float: right; }

html, body{ margin: 0; padding: 0; font-family: Roboto-Light,arial,helvetica,verdana; font-size: 18px; background: #fff;
	-webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none;
	scroll-behavior: smooth;
}

h1{ font-family: Roboto-Light,arial; font-weight: 100; font-size: 32px; margin: 0; padding: 0 0 3vw 0;}
h2{ font-family: Roboto-Light,arial; font-weight: 100; font-size: 32px; margin: 0; padding: 0 0 3vw 0;}
h3{ font-family: Roboto-Light,arial; font-weight: 100; font-size: 26px; margin: 0; padding: 0;}

p{ font-size: 18px;}
p.grande{ font-size: 36px;}
p.form{ margin: 0; padding: 0;}
p.titulo{ font-size: 32px; margin: 0; padding: 0 0 3vw 0; }

a{ text-decoration: none; color:#b60027; }
a:hover{ color:#f00; }

.menutop ul, .menutop li, .pie ul,.pie li{ padding: 0; margin: 0; list-style: none;}

.limit{ margin: 0 auto; width: 60vw; max-width: 1336px; }
.limit2{ margin: 0 auto; width: 90vw; max-width: 1336px; }
.mlimit{ margin: 0 auto; width: 40vw;}
/******************************************************************** botones */
.boton{
	position: absolute;
	width: 128px;
	height: 64px;
	left: 50%;
	margin-left: -64px;
	background: url(../img/flecha.png) no-repeat center;
  animation-name: boton;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: 5000;
  bottom: 0px;
}
.boton_dist{
	position: fixed;
	top: 96px;
	right: 48px;
	background: #f00;
	padding: 16px;
	border-radius: 16px;
	z-index: 10000;
}
.boton_dist a{ color: #fff;
	font-family: Roboto-Regular;
	margin: auto;
}
.boton_dist p{ margin: 0;}

.bajantes_x_metro{
	position: absolute;
	bottom: 20vh;
	left: 4vw;
	width: 9vw;
	height: auto;
}
.bxm_medidas{
	right: 4vw;
	left: auto;
	bottom: 4vw;
	width: 5vw;
}
.icono_calculadora img{ width: 80%; height: auto; padding: 36px;  border-radius: 32px; background: white; margin: 4vw auto;}
/*.calculadora_resultado{ width: 50%; overflow: auto; margin: 0 auto; }*/
.ico_bajante{ background: url(../img/goulotte-a-gravats-estandar-ico-itm.png) no-repeat white; float: right;}
.ico_boca{ background: url(../img/goulotte-a-gravats-estandar-avec-tremie-ico-itm.png) no-repeat white; float: left;}
.ico_bajante_maxi{ background: url(../img/goulotte-a-gravats-maxi-ico-itm.png) no-repeat white; float: right;}
.ico_boca_maxi{ background: url(../img/goulotte-a-gravats-maxi-avec-tremie-ico-itm.png) no-repeat white; float: left;}
.ico_calculadora{	width: 256px; padding: 64px;  background-position: 12px 12px; margin: 0 auto; margin: 16px; border-radius: 32px;}
.flot_der{ float: right;}
.flot_izq{ float: left; }

#bot_subir{
	position: fixed;
	width: 0px;
	height: 40px;
	right: 0px;
	bottom: 96px;
	font-family: Roboto-Regular;
	font-size: 48px;
	background: #fff;
	color: #000;
	border: none;
	z-index:1000;
	border-radius: 16px 0px 0px 16px;
  transition: width 0.25s, border 0.25s;
}
.boton_cruzada{
	width: 192px;
	height: auto;
/*	background: url(../img/tambien-puede-interesarte.png) no-repeat center 16px rgba(255,255,255,0.60);
	background-size: 70%;
	border: solid 1px #aaa;
	border-radius: 32px;
	padding-top: 8px;
	padding-top: 24px;
*/	
	padding: 16px;
}
.boton_cruzada p{ padding: 0; margin: 0; text-align: center; font-size: 12px;}

.marcoblanco{padding: 32px; background: #fff; border-radius: 32px;}
/***************************************************************** indice web */
.indice{ padding: 2vw; background: white; border-radius: 32px; width: 40%; margin: auto;}
.indice ul,.indice li{ list-style-type: none;}
.indice li a{ color: #000;}
.indice li a:hover { color: #C20D0E;}
.indice h1, .indice h2, .indice h3{ padding: 0; margin: 0; font-size: 18px;}
.indice h1{ font-family: Roboto-Regular; font-size: 24px;}
.indice h2{ font-family: Roboto-Light; font-size: 22px;}
.indice h3{ font-family: Roboto-Thin; font-size: 18px;}
.imini{ width: 25%; }
/***************************************************************** FORMULARIO */
input,textarea{ width: 100%; background: #d9d9d9; border: none; padding: 4px; font-size: 14px; margin-bottom: 16px;}
textarea{	max-width: 100%; min-width: 100%;}
input.check{ width: 16px; }
input.submit{ float: right; width: 10vw; }
input.calcula{ width: 10vw; background: white; border: solid 1px #aaa;}
.rojo{
	color: #f00;
}
.verde{
	color: #0a0;
}
.feedback{
	width: 100%;
	text-align: center;
	font-family: Roboto-Regular;
	font-weight: 100;
}

/********************************************************* principal: portada */
.principal{ width: 100%;	height: 100vh;}
/*************************************************************** Para móviles */
[class*="col-"] { width: 100%; }
[class*="cold-"] { width: 100%; }
@media only screen and (max-width: 829px)  {
  .menutop{ height: 124px; }
  .limit{ width: 100%; }
  .iconoitm{ width: 30%;}
  .botmenu{ width: 70%; float: right;margin-top: -68px;}
	.botmenu li,.botmenu span{ float: right; text-align: right; padding-right: 16px;}
	.telefono{ float: right; text-align: right;}
	.boton{ bottom: 8px; }
/*	#produits{ padding-top: 96px; }
/*	#index{ padding-top: 112px; }*/
	#mapa{ width: 90%; height: 50vh; }
	.principal{ width: 100%;	height: 90vh;}
	.idioma{ display: none; }
	.desplegable{ margin-top: -16px; }
	.boton_dist{	top: 78px; left: 16px; right: auto; }
	.paddcontact{ height: 32px; width: 100%;}
	input.calcula{ width: 30vw;}
	#calculadora{ padding-top: 140px; }
	.bajantes_x_metro{ width: 30vw; height: auto;}
	.icono_calculadora img{ width: 60%; height: auto;}
	.bxm_medidas{ width: 15vw; }
	.ico_bajante, .ico_boca, .ico_bajante_maxi, .ico_boca_maxi {float: none; margin: 10px auto;}
	p.titulo{ font-size: 26px;}
	.indice{ width: 100%;}
	.imini{ width: 90%; }
	.indice h1{ font-family: Roboto-Regular,arial; font-size: 22px;}
	.indice h2{ font-family: Roboto-Light,arial; font-size: 20px;}
	.indice h3{ font-family: Roboto-Thin,arial; font-size: 18px;}
	.indice ul{ padding-left: 16px;}
	.ocultomovil{ display: none; }
	.boton_cruzada{ width: 128px; display: none;}
	.tbtpi{ display: none; }
}
/*************************************************************** Para tablets */
@media only screen and (min-width: 830px) {

  h1 { font-size: 26px;}
  h2 { font-size: 26px;}
  h3 { font-size: 22px;}
  p,a,span{ font-size: 12px;}
  p.grande{ font-size: 24px;}
  p.medio{ font-size: 14px;}
  .menutop{ height: 64px; }
	.limit{ width: 100%; }
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-25 {width: 20%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  .boton{ bottom: 0px; }
  .idioma{ margin-top: 1px; }
  .idioma2{ display: none;}
	#mapa{ width: 60%; height: 50vh; }
	.indice{ width: 50%;}
	.imini{ width: 40%; }
	.indice h1{ font-family: Roboto-Regular; font-size: 20px;}
.indice h2{ font-family: Roboto-Light; font-size: 18px;}
.indice h3{ font-family: Roboto-Thin; font-size: 14px;}
}
/******************************************************************** Para pc */
@media only screen and (min-width: 1025px) {

  h1 { font-size: 32px;}
  h2 { font-size: 32px;}
  h3 { font-size: 24px;}
  p,a,span{ font-size: 14px;}
  p.grande{ font-size: 28px;}
  p.medio{ font-size: 18px;}
  .menutop{ height: 64px; }
	.limit{ width: 80%; }
  .col-1 {width: 8.33%; font-size: 22px;}
  .col-2 {width: 16.66%; font-size: 22px;}
  .col-25 {width: 20%; font-size: 22px;}
  .col-3 {width: 25%; font-size: 22px;}
  .col-4 {width: 33.33%; font-size: 22px;}
  .col-5 {width: 41.66%; font-size: 22px;}
  .col-6 {width: 50%; font-size: 22px;}
  .col-7 {width: 58.33%; font-size: 22px;}
  .col-8 {width: 66.66%; font-size: 22px;}
  .col-9 {width: 75%; font-size: 22px;}
  .col-10 {width: 83.33%; font-size: 22px;}
  .col-11 {width: 91.66%; font-size: 22px;}
  .col-12 {width: 100%; font-size: 22px;}
  .boton{ bottom: 0px; }
  .idioma{ margin-top: 4px; }
  .idioma2{ display: none;}
	#mapa{ width: 60%; height: 50vh; }
	.indice{ width: 50%;}
	.imini{ width: 40%; }
	.indice h1{ font-family: Roboto-Regular; font-size: 22px;}
.indice h2{ font-family: Roboto-Light; font-size: 20px;}
.indice h3{ font-family: Roboto-Thin; font-size: 16px;}
}
/******************************************************************** Full HD */
@media only screen and (min-width: 1336px) {
  h1 { font-size: 42px;}
  h2 { font-size: 42px;}
  h3 { font-size: 26px;}
  p,a,span{ font-size: 18px;}
  p.grande{ font-size: 36px;}
  p.medio{ font-size: 26px;}
  .menutop{ height: 64px; }
	.limit{ width: 80%; }
  .boton{ bottom: 0px; }
  .idioma{ margin-top: 0px; }
  .idioma2{ display: none;}
	#mapa{ width: 60%; height: 50vh; }
		.indice{ width: 45%;}
		.imini{ width: 25%; }
	.indice h1{ font-family: Roboto-Regular; font-size: 24px;}
.indice h2{ font-family: Roboto-Light; font-size: 22px;}
.indice h3{ font-family: Roboto-Thin; font-size: 18px;}
}

.bg_blanco{ background: #fff; color: #000; }
.bg_blanco h1{ color: #000; }

.bg_negro{ background: #000; color: #fff; }
.bg_negro h1{ color: #fff; }
.bg_negro a{ color: #fff; text-decoration: none; }
.bg_negro a:hover{ color:#b60027;}

.bg_grisclaro{ background: #eee; color: #000; }
.bg_gris{ background: #ddd; color: #000; }
.bg_gris h1{ color: #000; }

.bg_amarillo{ background: #F5EFB1; color: #000; }
.bg_amarillo h1{ color: #000; }

.txt_gris{ color: #666; }

.txt_centrado{ text-align: center; }
.txt_right{ text-align: right; }
.txt_left{ text-align: left; }
.txt_justificado{ text-align: justify;}

.border{ border: solid 1px red; }
.borderleft{ border-left: solid 1px #99A0CE; font-size: 16px; padding-top: 68px;text-align: right;font-weight: bold;}
.borderleft sub{ font-size: 10px;font-weight: 100;}
.borderround{ border: solid 1px #aaa; border-radius: 32px; }

.pag{ position: relative; margin: 0; padding: 0; width: 100%; }

.margin2{ margin: 2vw; }
.marginbot-6{ margin-bottom: -6px; }

.padding1{ padding-top: 2vw;padding-bottom: 1vw;}
.padding2{ padding-top: 2vw;padding-bottom: 2vw;}
.padding3{ padding-top: 3vw;padding-bottom: 3vw;}
.padding4{ padding-top: 4vw;padding-bottom: 4vw;}
.padding42{ padding-top: 4vw;padding-bottom: 4vw; padding-left: 2vw; padding-right: 2vw;}
.padding22{ padding: 2vw;}
.padding32{ padding-top: 3vw;padding-bottom: 2vw; padding-left: 2vw; padding-right: 2vw;}
.padding44{ padding: 4vw;}
.padding02{ padding-top: 0;padding-bottom: 0; padding-left: 2vw; padding-right: 2vw;}
.paddingtop2{padding-top: 2vw;}
.paddingtop4{padding-top: 4vw;}
.paddingbottom4{padding-bottom: 4vw;}
.paddingtop32{ padding-top: 32px; }
.paddingtop64{ padding-top: 64px; }
.paddingrl64{ padding: 0 64px 0 64px;}
.bottom64{ padding-bottom: 64px; }
.paddingtop0{ padding-top: 0; }
.paddingbottom0{ padding-bottom: 0; }

.img15 img{ width: 15%; }
.img25 img{ width: 25%; }
.img30 img{ width: 30%; }
.img35 img{ width: 35%; }
.img40 img{ width: 40%; }
.img50 img{ width: 50%; }
.img60 img{ width: 60%; }
.img75 img{ width: 75%; }
.img100 img{ width: 100%; }

.h230px{ height: 240px;}
.w50{ width: 50%; }
.w33{ width: 33.3%; }
.p16{ padding: 16px; }
.p-16{ margin-bottom: -16px; }
.ml-16{ margin-left: -16px; }
.pb0{ padding-bottom: 0px; margin-bottom: -16px;}
.p0{ padding: 0px; margin: 0px;}
.top16{ padding-top: 16px; }
.w256{ width: 272px; margin: 0 auto;}
.h64{ height: 64px; }
.overflow_auto{ overflow: auto; }
.overflow_hidden{ overflow: hidden; }
.overflow_visible{ overflow: visible; }
.bottom{ bottom: 0px; }
.right{ right: 0px; }
.margintop0{ margin-top: 0px;}
.margin-top-208{ margin-top: -208px;}
.top-154{ top: -130px; }
.top-118{ top: -118px; }
.abstop0{ top: 0px; }
/************************************************************************ pie */
.pie { padding-top: 3vh;}
.logo_pie{ padding-bottom: 3vh; padding-top: 3vh;}
.logo_pie p{ font-size: 14px; font-style: italic; font-weight: bold; margin: 0; padding-right: 7px;}
.logo_pie img{ width: 96px; }
img.isos{ height: 10vh; margin-bottom: 1vh;}
.copy{ width: 100%; text-align: center; font-size: 12px; font-family: Roboto-Thin,arial;}

/************************************************************** menu cabecera */
.menutop{ position: absolute; width: 100%; bottom: 0px; left: 0px; z-index: 1000;}
img.logo_top{ height: 64px; padding: 8px; padding-left: 16px;}
.menutop li { display: inline; }
.telefono img{ width: 18px; margin-bottom: -3px;}
.sticky { position: fixed; top: 0; width: 100%;}
img.wassup{ width: 25px; padding-left: 4px; padding-right: 4px; margin-bottom: -2px; }
.tlfmenu{ min-width: 160px;}

.idioma, .idioma2{ float: right; }
.idioma2{ margin-top: -4px;}
.tit{ margin: 0; padding: 4px; margin-right: 32px;}
.lang{ float: right; margin: 4px; margin-top: -22px; margin-right: 16px; width: 16px; height: 16px; background: url(../img/flags.png) no-repeat top right; background-size: 16px auto; }
.es{ background-position: right 0px;}
.en{ background-position: right -16px; }
.de{ background-position: right -32px; }
.fr{ background-position: right -48px; height: 20px;}
.desplegable{ display: none; position: absolute;  width: 96px; border: solid 1px white; box-shadow: 0px 0px 2px #000;}
.desplegable p{ margin: 0px; padding: 4px; text-align: left; font-size: 14px;}
.desplegable .lang{ margin-right: 4px;}
.desplegable a{ color: #000; }
.idioma:hover .desplegable{ display: block;}
.idioma .tit{ margin-top: -16px; padding-top: 20px;}

/******************************************************** enlace a documentos */
.enlacepdf{ margin-top: 4vh;}
.enlacepdf a{ font-family: Roboto-Regular,arial; color: #fff; background: #C20D0E; padding: 4px 8px; border-radius: 8px; width: 160px; text-align: center;border: solid 1px #C20D0E;}
.enlacepdf a:hover{ color: #C20D0E; background: #fff;}

.test{ position: relative; border-top: solid 4px red; overflow: hidden;}
/*
.dualpan{
	display: grid;
	grid-template-columns: 50% 50%;
}
.triplepan{
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
}*/
.paneles::after{
  clear: both;
  display: table;
}
.dospan{
	float: left;
	width: 50%;
}
.trespan{
	float: left;
	width: 33.3%;
}
table,td,tr{ border: none; padding: 0; margin: 0;}
table{width: 100%;}
hr{border: none; border-bottom: solid 1px #aaa; margin-top: 0;}
.campoform2{ padding-right: 8px; text-align: right;}

/*############################################################################*/
.logo_pie{ width: 200px; margin: auto; margin-bottom: 24px;}
.logo_pie p{ font-size: 14px; font-style: italic; font-weight: bold; margin: 0; padding: 0;}
.logo_pie img{ width: 96px; }
a .logo_pie p{ color: #fff;}

.marcas{ width: 200px; text-align: left; margin: 0 auto;}
.pcontacto{ width: 200px; text-align: left; margin: 0 auto; }
.pie_foto{ font-size: 14px;}

.pie { padding-top: 4vh;}
.pie p{ font-size: 12px; padding-top: 0px;}
.pie h3{ font-size: 18px; font-family: Roboto-Regular; }
.pie a{ font-size: 14px;}

img.isos{ height: 10vh; margin-bottom: 1vh;}
.copy{ width: 100%; text-align: center; font-size: 12px; font-family: Roboto-Thin;}
/*.redes_sociales{ float: right; }

/*a.idioma{ margin-right: 32px; margin-top: 4px;}*/
.pie p.tlfn{ font-size: 26px; margin-bottom: 0; margin-top: 0;}

.pie .telefonopie img{ width: 18px; margin-bottom: -3px;}

/*############################################################################*/
.logo_validacion{ text-align: right; width: 200px; margin: auto; padding-bottom: 128px;}
.logo_validacion p{ font-size: 14px; font-style: italic; font-weight: bold; margin: 0; padding: 0;}
.logo_validacion img{ width: 96px; }
a .logo_validacion p{ color: #000; }

.bot_catalogo{
	border: solid 1px #999;
}
.bot_catalogo:hover{
	border: solid 1px #000;
}
/*############################################################################*/
/*############################################################################*/


.fondomenumovil{ background: #000; position: fixed; top: 0; width: 100%; height: 41px; z-index: 100000;  font-family: Roboto-Regular;}
.menumovil {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border: solid 1px transparent;
}

.menumovil a {
  float: left;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  padding: 8px 12px;
	font-size: 18px;
	border: solid 1px transparent;
	background: #000;
}

.menumovil a:hover {
	color: #fff;
	background: #444;
}
.menumovil a.nohover:hover{ background:#000;}
.menumovil a.active {
	background: #000;
	color: #a00;
}
.menumovil a.pedidos {
	background: #FFD500;
	color: #000;
}
.menumovil a.pedidos:hover {
	background: #FFD500;
	color: #fff;
}

.menumovil .icono {
  display: none;
}

.separador{
	width: 100%;
	height: 37px;
	margin: 0;
}

.itm_construccion{
	height: 37px;
 	width: 200px;
	background: url(../img/itm-construccion.png) no-repeat;
	background-size: contain;
 	background-position: 0px 6px;
}

.nomovil_fd{
	float: right;
}
.nomoviltel{
	color: #fff;
	margin: 10px 32px 0px 32px;
}
.nomoviltel span{	font-size: 18px;}

.dio{
	display: none;
	width: 90px;
	margin-top: 40px;
	margin-left: 295px;
}
.dio a{
	float: none;
	width: 120px;
	text-align: left;
	font-size: 14px;
	background: #ddd;
	color: #000;
}
.botondistribuidores{
	position: fixed;
	top: 41px;
	right: 0px;
	background: #f00;
	color: #fff;
	font-family: Roboto-Regular;
	font-size: 18px;
	padding: 10px;
	z-index: 10000;
	border-left: solid 1px #f00;
	border-bottom: solid 1px #f00;	
	border-bottom-left-radius: 10px;
}
.botondistribuidores:hover{
	background: #fff;
	color: #f00;
	border-left: solid 1px #f00;
	border-bottom: solid 1px #f00;	
}

@media screen and (max-width: 675px) {
  .menumovil a:not(:first-child) {display: none;}
  .menumovil a.icono {
    float: right;
    display: block;
    padding: 0px;
  }
  .itm_construccion{
  	width: 160px;
  	background-position: 0px 8px;
  }
  .nomovil_fd{
  	float: none;
  }
}

@media screen and (max-width: 675px) {
  .menumovil.resp {position: relative;}
  .menumovil.resp .icono {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menumovil.resp a {
    float: none;
    display: block;
    text-align: left;
  }
  .separador.resp {height: 0px;}
  .dio{ margin: 0; width: 100%;}
  .dio a{ background: rgb(0,0,0,0.8); color: #fff; width: 100%;}
  .botondistribuidores{
  	bottom: 0px;
  	top: auto;
  	width: 100%;
  	border-bottom-left-radius: 0px;
  	text-align: center;
  	border: solid 1px #f00;
  }
}

@media screen and (max-width: 950px) {
	.itm_construccion{
		width: 160px;
		background-position: 0px 8px;
	}
	.ocultomovil{
	display: none;
	}
}

.menumovil a.itm{
	font-weight: bold;
	font-style: italic;
	float: left;
	padding: 0 16px;
}

.icono_sprite{
	width: 32px;
	height: 32px;
	background: url(../img/sprite.png) no-repeat;
}
.icono_sprite.bot_movil{
	width: 38px;
	height: 38px;
	background-size: cover;
	background-position: 0px -381px;
	margin: 0 8px;
}
.icoidi{
	width: 16px;
	height: 16px;
	background: url(../img/sprite.png) no-repeat;
	background-size: cover;
	display: inline-block;
	margin-left: 4px;
	margin-bottom: -2px;
}
.icoidi.es{ background-position: 0px 0px;}
.icoidi.en{ background-position: 0px -16px;}
.icoidi.de{ background-position: 0px -32px;}
.icoidi.fr{ background-position: 0px -48px;}

.container-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
}

.container-item-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.item-grid-1 { grid-area: 1 / 1 / 2 / 2; }
.item-grid-2 { grid-area: 1 / 2 / 2 / 3; }
.item-grid-3 { grid-area: 2 / 1 / 3 / 2; }
.item-grid-4 { grid-area: 2 / 2 / 3 / 3; }