:root{
	--var-gris: #979799;
}

body{
	min-width: 320px;
	color: var(--var-gris);
	font-size: 22px;
}
h1{
	margin: auto;
	width: 100%;
	color: var(--var-gris);
}
h2{
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 22px;
}

.btn-primary {
    color: #fff;
    background-color: #0000 !important;
    border-color: #007bff;
}


#carrusel .row,
#carrusel .col-7,
#carrusel .col-5,
#carrusel .col-6{
	margin: auto;
	text-align: center;
}

#carrusel .row{
	height: 320px;
}

#carrusel p{
	margin: auto;
	width: 100%;
	line-height: 20px;
}

#carrusel .carousel-control-prev-icon{
	background-image: url("../img/icono/left.svg");
}
#carrusel .carousel-control-prev{
	left: -90px;
}
#carrusel .carousel-control-next-icon{
	background-image: url("../img/icono/right.svg");
}
#carrusel .carousel-control-next{
	right: -90px;
}


#banner h2{
	margin-top: 30px;
	margin-bottom: 10px;
}

#banner #cargas,
#banner #aisladores,
#banner #ccs,
#banner #bt,
#banner #herraje{
	height: 130px;
	background-position: center;
	background-size: cover;
	filter: grayscale(0%);
}

#banner #cargas:hover,
#banner #aisladores:hover,
#banner #ccs:hover,
#banner #bt:hover,
#banner #herraje:hover{
	filter: grayscale(100%);
	transition:all .5s; 
}


#banner #cargas{
	background-image: url(../img/baner/sub_Cargas_Moldes.jpg);
	cursor: pointer;
}

#banner #aisladores{
	background-image: url(../img/baner/sub_Aisladores.jpg);
	cursor: pointer;
}
#banner #ccs{
	background-image: url(../img/baner/sub_CCS.jpg);
	cursor: pointer;
}
#banner #bt{
	background-image: url(../img/baner/sub_Conectores_BT.jpg);
	cursor: pointer;
}
#banner #herraje{
	background-image: url(../img/baner/sub_Herraje.jpg);
	cursor: pointer;
}

#banner .line{
	background: var(--var-gris);
	height: 1px;
	width: 84%;
	margin-left:8%;
	margin-top: 0px;
	margin-bottom: 25px;
}

#banner .link_cls{
	text-decoration: none;
	color: var(--var-gris);
}

#banner .link_cls:hover{
	color: #112549;
}

#banner .row{
	padding-top: 40px;
}

#nosotros h2{
	margin-bottom: 35px;
}
#nosotros iframe{
	margin-bottom: 40px;
}

#nosotros p{
	line-height: 30px;
}

#sinonimo h1{
	width: 90%;
}
#sinonimo h3{
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 40px;
}

#sinonimo p{
	margin-left: 5%;
	width: 90%;
	line-height: 25px;
}

#sinonimo{
	margin-bottom: 20px;
}

#sinonimo .line{
	background: var(--var-gris);
	height: 1px;
	width: 100%;
	margin-top: 25px;
	margin-bottom: 25px;
}



@media(min-width: 1200px){
	#carrusel .container{
		max-width: 1100px;
	}
	#nosotros .container{
		width: 900px;
	}
	.cls_video{
		width:860px; 
		height:500px;
	}
	
}

@media(min-width: 992px) and (max-width: 1190px){
	#carrusel .container{
		max-width: 790px;
	}
	#carrusel h1{
		font-size: 30px;
	}
	.cls_video{
		width:860px; 
		height:500px;
	}
	
}

@media(min-width: 768px) and (max-width: 991px){
	#carrusel .container{
		max-width: 700px;
	}
	#carrusel h1{
		font-size: 30px;
	}
	#carrusel{
		font-size: 15px;
	}
	#carrusel .carousel-control-next,
	#carrusel .carousel-control-prev{
		width: 10%;
	}
	#carrusel .carousel-control-prev{
		left: -40px;
	}

	#carrusel .carousel-control-next{
		right: -40px;
	}

	.cls_video{
		width:700px; 
		height:394px;
	}
	#sinonimo .container{
		width: 90%;
	}
	
}

@media(min-width: 576px) and (max-width: 767px){

	#carrusel .carousel-control-next,
	#carrusel .carousel-control-prev{
		width: 10%;
	}
	#carrusel .carousel-control-prev{
		left: -20px;
	}

	#carrusel .carousel-control-next{
		right: -20px;
	}

	#carrusel h1{
		font-size: 24px;
	}	
	#carrusel{
		font-size: 16px;
	}
	

}

@media(max-width: 576px) {	

	#carrusel{
		font-size: 16px;
	}
	.cls_video{
		width: 265px;
		height: 150px;
	}
	#boton_menu{
		width: 100%;
	}
	#boton_menu h3{
		width: 100%
	}
	#boton_menu .aislador h3{
		text-align: left;
		color: rgb(17,37,73);
	}

	#boton_menu .herraje h3{
		text-align: right;
		color: rgb(17,37,73);
	}
	#boton_menu .conector h3{
		text-align: left;
		color: #FFFFFF;
		bottom: calc(40px - 100%);
		color: rgb(17,37,73);
		position: relative;
	}

	#boton_menu .ccs h3{
		text-align: right;
		color: rgb(17,37,73);
		bottom: calc(40px - 100%);
		position: relative;
	}
	#boton_menu .btn_center h3{
		text-align: right;
		color: rgb(17,37,73);
		bottom: calc(40px - 100%);
		position: relative;
	}



	#boton_menu div{
		width: 100%;
	}
	#boton_menu .row{
		margin-right: 0px;
		margin-left: 0px;
	}
	#boton_menu .col-6{
		background-size: cover; 
		height: 50vw; 
		border-right:solid 2px white; 
		border-bottom: solid 2px white;
	}
	
	#boton_menu .aislador{
		background-image: url(../img/menu_responsive/aisladores.jpg); 
		filter: grayscale(0%);
		transition: all 0.5s;
	}
	#boton_menu .herraje{
		background-image: url(../img/menu_responsive/herraje.jpg);
		filter: grayscale(0%);
		transition: all 0.5s;
	}
	#boton_menu .conector{
		background-image: url(../img/menu_responsive/conectores.jpg);
		filter: grayscale(0%);
		transition: all 0.5s;
	}
	#boton_menu .ccs{
		background-image: url(../img/menu_responsive/cable_CCS.jpg); 
		filter: grayscale(0%);
		transition: all 0.5s;
	}

	#boton_menu .btn_center{
		background-image: url(../img/menu_responsive/moldes_cargas.jpg); 
		background-size: cover; 
		width: 50vw; 
		height: 50vw; 
		margin-left: 25vw; 
		margin-top: -75vw; 
		position: absolute;
		z-index: 1; 
		border: solid 4px white;
		filter: grayscale(0%);
		transition: all 0.5s;
	}

	#boton_menu .aislador:hover,
	#boton_menu .herraje:hover,
	#boton_menu .conector:hover,
	#boton_menu .ccs:hover,
	#boton_menu .btn_center:hover{
		filter: grayscale(100%);
 pointer;
	}

	#boton_menu .line,
	#sinonimo .line{
		background: var(--var-gris);
		height: 1px;
		width: 94%;
		margin-left:3%;
	}

	#boton_menu .line{
		margin-top: 50px;
		margin-bottom: 5px;
	}

	#sinonimo .line{
		margin-top: 35px;
		margin-bottom: 5px;
	}
	
}