@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css');
@import url('https://use.fontawesome.com/releases/v5.6.0/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,900');
@import url('contacto.css');

* {
	font-family: 'Heebo', sans-serif;
}

body {
	overflow-x: hidden;
	font-family: 'Heebo', sans-serif;
}

#containtotal {
	margin: 0;
	padding: 0;
	width: 100%;
}

.navbar-custom {
	background-color: rgba(255, 255, 255, 0.95);
	border: none;
	height: 80px;
	top: 0;
}

/* change the brand and text color */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
	width: 10%;
	padding: .2rem;
	margin-left: 20px;
}

.navbar-brand img:hover {
	transform: scale(1.1);
	transition: all .2s ease-in-out;
}

/* change the link color */

.navbar-custom .navbar-nav .nav-link {
	color: #281a71;
	font-size: 20px;
	padding: 0px 10px;
	margin: 0px 10px;
	line-height: 60px;
	position: relative;
	font-weight: 500;
}

.navbar-custom .nav-item,
.nav-link.active {
	color: #000;
	padding: 0px 10px;
	margin: 0px 10px;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
	border-bottom: solid 4px #eb791e;
	transition: all .22s ease-in-out;
	color: #363636;
	padding: 0px 10px;
	margin: 0px 10px;
	line-height: 40px;
	font-weight: 700;
}

/* for dropdown only - change the color of dropdown */

.navbar-custom .dropdown-menu {
	background-color: #eb791e;
	border-radius: 0px;
}

.navbar-custom .dropdown-item {
	color: #f2f2f2;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
	color: #281a71;
	background-color: rgba(255, 255, 255, .85);
	transition: all .2s ease-in-out;
}

.navbar-toggler {
	background-color: #eb791e;
	border-radius: 0px;
}

.cont-invi {
	background: rgba(255, 255, 255, .80);
	height: 110px;
	color: rgba(255, 255, 255, .10);
	display: block;
	position: inherit;
	top: 0;
	padding: 40px;
}

.carousel {
	width: 100%;
	height: auto;
}

.carousel-inner {
	width: 100%;
	height: auto;
}

.top {
	overflow: hidden;
	display: block;
	padding: 0;
	margin: 0;
	top: 2em;
}

.content {
	top: 5em;
	background-color: #f2f2f2;
	width: 100%;
	padding: 60px 40px 80px 40px;
	height: auto;
}

.content h3 {
	text-align: center;
}

.content p {
	text-align: left;
}

.ban-prods {
	background-image: url(../images/Backs/BacksUS_Back1.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 300px;
	padding: 40px;
}

.ban-prods #prodss {
	font-weight: 700;
	text-align: left;
	font-size: 40px;
	padding: 45px 0px;
}

.ban-prods a {
	background-color: #281a71;
	font-size: 25px;
	padding: 15px;
	color: #f2f2f2;
	font-weight: 500;
	top: 2em;
	position: absolute;
}

.ban-prods a:hover {
	background-color: #eb791e;
	text-decoration: none;
	transition: all .22s ease-in-out;
}

.distrib {
	text-align: center;
	height: auto;
	padding: 40px;
}

.distrib h4 {
	font-size: 40px;
	color: #281a71;
	font-weight: 400;
}

.distrib img {
	filter: grayscale(1);
}

.distrib img:hover {
	filter: grayscale(0);
	cursor: pointer;
	transition: all .22s ease-in-out;
}

/*Prods*/
.prods-head {
	height: 200px;
	width: 100%;
	background-image: url(../images/Heads/HeadsUS_Head-Prods.jpg);
	background-attachment: fixed;
	position: relative;
	top: 0em;
	padding: 50px 50px 50px 200px;
}

.prods-head h2 {
	font-weight: 800;
	color: #f2f2f2;
	font-size: 80px;
}

#prods-tt {
	text-align: center;
	padding: 60px 50px 5px 50px;
	color: #281a71;
	font-size: 24px;
}

.decks-cardss {
	position: relative;
	top: 0em;
	height: 500px;
	padding: 40px;
}

.card {
	width: 300px;
	height: 346px;
}

.card-body {
	width: 200px;
	padding: 0;
}

.card-body .card-img-top {
	width: 300px;
	filter: blur(0);
}

.card-body .card-img-top:hover {
	transition: all .22s ease-in-out;
	filter: blur(1px);
	opacity: .75;
}

.card-link0,
.card-link1 {
	color: #f2f2f2;
	position: absolute;
	padding: 10px;
	width: 300px;
	left: 0;
	font-size: 18px;
	font-weight: 700;
}

.card-link0:hover,
.card-link1:hover {
	background-color: #eee;
	color: #eb791e;
	text-decoration: none;
	transition: all .22s ease-in-out;
	font-weight: 900;
}

.card-link0 {
	background-color: #eb791e;
}

.card-link1 {
	background-color: #281a71;
}

/*ProdsCont*/
.aceros-head {
	height: 200px;
	width: 100%;
	background-image: url('../images/steel.jpeg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(1);
	position: relative;
	top: 0em;
	padding: 50px 50px 50px 200px;
}

.cementos-head {
	height: 200px;
	width: 100%;
	background-image: url('../images/cementotoltec.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	position: relative;
	top: 0em;
	padding: 50px 50px 50px 200px;
}

/**
#info {
	background-color: #e2e2e2;
	color: #eb791e;
	padding: 20px;
	font-weight: 500;
}

#info:hover {
	background-color: #281a71;
	color: #f2f2f2;
	text-decoration: none;
	transition: all .22s ease-in-out;
}
**/
.grav-head {
	height: 200px;
	width: 100%;
	background-image: url('../images/Gravel.jpeg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(1);
	position: relative;
	top: 0em;
	padding: 50px 50px 50px 200px;
}

.otros-head {
	height: 200px;
	width: 100%;
	background-image: url('../images/otros.jpg');
	background-attachment: fixed;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(1);
	position: relative;
	top: 0em;
	padding: 50px 50px 50px 200px;
}

#contact-lk {
	text-decoration: none;
	color: #eb791e;
}

#contact-lk:hover {
	color: #281a71;
	transition: all .22s ease-in-out;
}

.aceros-cont,
.cementos-cont,
.grav-cont,
.otros-cont {
	padding: 50px;
	position: relative;
	top: 0em;
	height: 500px;
}

.aceros-cont h3,
.cementos-cont h3,
.grav-cont h3,
.otros-cont h3 {
	background-color: #281a71;
	padding: 20px;
	color: #f2f2f2;
	font-weight: 800;
}

.aceros-cont p,
.cementos-cont p,
.grav-cont p,
.otros-cont p {
	padding: 20px;
}


/*Servs*/
.servs-head {
	height: 200px;
	width: 100%;
	background-image: url(../images/Heads/HeadsUS_Head-Servs.jpg);
	background-position: bottom;
	background-attachment: fixed;
	position: relative;
	top: 0em;
	padding: 50px 50px 50px 200px;
}

.servs-head h2 {
	font-weight: 800;
	color: #f2f2f2;
	font-size: 80px;
}

.servs-cont {
	position: relative;
	top: 0em;
	padding: 40px;
}

.servs-cont p {
	font-size: 24px;
	text-align: center;
}

.servs-c {
	background-image: url(../images/Backs/BacksUS_Back2.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 250px;
	display: block;
	top: 0;
	padding: 40px;
}

.servs-c .row .col-sm-3 p {
	font-size: 20px;
	text-align: left;
	padding: 20px;
	font-weight: 500;
}

.servs-c .row .col-sm-3 span {
	color: #281a71;
}

#aceros-prods p,
#agregados-prods p,
#cementos-prods p {
	padding: 20px;
}

#aceros-prods br,
#agregados-prods br,
#cementos-prods bre {
	line-height: 1.8;
}

/*Contact*/
.contact-head {
	height: 200px;
	width: 100%;
	background-image: url(../images/Heads/HeadsUS_Head-Cont.jpg);
	background-position: bottom;
	background-attachment: fixed;
	position: relative;
	top: 4em;
	padding: 50px 50px 50px 200px;
}

.contact-head h2 {
	font-weight: 800;
	color: #f2f2f2;
	font-size: 80px;
}

.contact-cont {
	position: relative;
	top: 4em;
	padding: 40px;
	height: 705px;
}

.contact-cont #promoss {
	background-color: #281a71;
	color: #f2f2f2;
	width: 100%;
	padding: 0;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;
	height: 705px;
}

.contact-cont h4 {
	padding: 60px;
	text-align: left;
	font-size: 40px;
	width: 100%;
	left: 0;
	position: relative;
}

#cont-form {
	background-image: url(../images/Backs/BacksUS_Back4.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	height: 705px;
	right: 0;
	position: absolute;
	margin: auto;
	top: 0;
	text-align: center;
}

form {
	margin-left: 200px;
}

footer {
	width: 100%;
	height: 160px;
	background-color: #eb791e;
	position: sticky;
	padding: 40px;
	color: #fff;
	text-align: center;
}

.foot-img img {
	filter: brightness(100);
	margin-top: -25px;
}

footer h6 {
	font-size: 15px;
}

footer .enlaces {
	color: #f2f2f2;
	text-align: left;
	font-size:16px;
}

footer .reds {
	color: #eb791e;
}

footer .enlaces:hover {
	color: #281a71;
	transition: all .2s ease-in-out;
	text-decoration: none;
}

footer .reds:hover {
	color: #f2f2f2;
	transition: all .2s ease-in-out;
	text-decoration: none;
}

.rs-icon {
	width: 40px;
	height: 40px;
	background-color: white;
	border-radius: 50px;
	font-size: 20px;
	padding: 10px;
	text-align: center;
}

.rs-icon:hover {
	background-color: #281a71;
}

#message {
	background-image: url(../images/Backs/BacksUS_Back2.jpg);
	padding: 40px;
	height: 550px;
}

@media only screen and (max-width:360px) {

	.navbar-brand img {
		width: 100%;
	}

	.navbar-custom .navbar-brand,
	.navbar-custom .navbar-text {
		width: 50%;
	}

	.navbar-custom .navbar-nav .nav-link {
		text-align: center;
		background-color: rgba(255, 255, 255, .95);
		width: 100%;
		padding: 10px;
		margin-top: -13px;
		position: relative;
	}

	.navbar-toggler {
		background-color: #eb791e;
		border-radius: 0px;
	}

	/*Index*/

	#containtotal {
		display: block;
		position: relative;
	}

	.top {
		height: 1000px;
		width: 100%;
	}

	.content {
		height: auto;
		padding-bottom: 10px;
	}

	.ban-prods {
		height: 650px;
		padding: 20px;
	}

	.distrib {
		height: auto;
	}

	/*Servs*/
	.prods-head,
	.servs-head,
	.contact-head {
		width: 100%;
		height: auto;
		padding: 20px;
		text-align: center;
	}

	.prods-head h2,
	.servs-head h2,
	.contact-head h2 {
		font-size: 60px;
	}

	.servs-c {
		height: auto;
	}

	/*Prodss*/
	.decks-cardss {
		margin: 0;
		height: auto;
		padding-bottom: 100px;
	}

	.aceros-cont,
	.cementos-cont,
	.grav-cont,
	.otros-cont {
		height: auto;
		padding-bottom: 120px;
	}

	.contact-cont {
		height: auto;
		width: 100%;
		padding: 0;
	}

	.contact-cont #promoss {
		height: auto;
		position: relative;
	}

	.contact-cont #promoss h4 {
		font-size: 18px;
		width: 100%;
		padding: 20px;
	}

	#cont-form {
		position: relative;
		width: 100%;
	}

	form {
		position: relative;
		top: 2em;
		padding: 30px;
		margin: 0;
		display: block;
	}

	footer {
		height: auto;
		padding: 10px;
	}

	.foot-img {
		padding: 30px;
	}

	.enlances {
		padding: 40px;
	}

	#message {
		height: auto;
		text-align: center;
	}

}

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

	.navbar-custom {
		height: 140px;
	}

	.navbar-brand img {
		width: 100%;
	}

	.navbar-custom .navbar-brand,
	.navbar-custom .navbar-text {
		width: 50%;
	}

	.navbar-custom .navbar-nav .nav-link {
		text-align: center;
		background-color: rgba(255, 255, 255, .95);
		width: 100%;
		padding: 10px;
		margin-top: -13px;
		position: relative;
	}

	.navbar-toggler {
		background-color: #eb791e;
		border-radius: 0px;
	}

	/*Index*/

	#containtotal {
		display: block;
		position: relative;
	}

	.top {
		height: 1000px;
		width: 100%;
	}

	.content {
		height: auto;
		padding-bottom: 10px;
	}

	.ban-prods {
		height: 650px;
		padding: 20px;
	}

	.distrib {
		height: auto;
	}

	/*Servs*/
	.prods-head,
	.servs-head,
	.contact-head {
		width: 100%;
		height: auto;
		padding: 20px;
		text-align: center;
	}

	.prods-head h2,
	.servs-head h2,
	.contact-head h2 {
		font-size: 60px;
	}

	.servs-c {
		height: auto;
	}

	/*Prodss*/
	.decks-cardss {
		margin: 0;
		height: auto;
		padding-bottom: 100px;
	}

	.aceros-cont,
	.cementos-cont,
	.grav-cont,
	.otros-cont {
		height: auto;
		padding-bottom: 120px;
	}

	.contact-cont {
		height: auto;
		width: 100%;
		padding: 0;
	}

	.contact-cont #promoss {
		height: auto;
		position: relative;
	}

	.contact-cont #promoss h4 {
		font-size: 18px;
		width: 100%;
		padding: 20px;
	}

	#cont-form {
		position: relative;
		width: 100%;
	}

	form {
		position: relative;
		top: 2em;
		padding: 30px;
		margin: 0;
		display: block;
	}

	footer {
		height: auto;
		padding: 10px;
	}

	.foot-img {
		padding: 30px;
	}

	.enlances {
		padding: 40px;
	}

	#message {
		height: auto;
		text-align: center;
	}

}

@media (min-width: 320px) and (max-width: 480px){
	.navbar-custom {
		height: 140px;
	}

	.navbar-brand img {
		width: 100%;
	}

	.navbar-custom .navbar-brand,
	.navbar-custom .navbar-text {
		width: 50%;
	}

	.navbar-custom .navbar-nav .nav-link {
		text-align: center;
		background-color: rgba(255, 255, 255, .95);
		width: 100%;
		padding: 10px;
		margin-top: -13px;
		position: relative;
	}

	.navbar-toggler {
		background-color: #eb791e;
		border-radius: 0px;
	}

	/*Index*/

	#containtotal {
		display: block;
		position: relative;
	}

	.top {
		height: 1000px;
		width: 100%;
	}

	.content {
		height: auto;
		padding-bottom: 10px;
	}

	.ban-prods {
		height: 650px;
		padding: 20px;
	}

	.distrib {
		height: auto;
	}

	/*Servs*/
	.prods-head,
	.servs-head,
	.contact-head {
		width: 100%;
		height: auto;
		padding: 20px;
		text-align: center;
	}

	.prods-head h2,
	.servs-head h2,
	.contact-head h2 {
		font-size: 60px;
	}

	.servs-c {
		height: auto;
	}

	/*Prodss*/
	.decks-cardss {
		margin: 0;
		height: auto;
		padding-bottom: 100px;
	}

	.aceros-cont,
	.cementos-cont,
	.grav-cont,
	.otros-cont {
		height: auto;
		padding-bottom: 120px;
	}

	.contact-cont {
		height: auto;
		width: 100%;
		padding: 0;
	}

	.contact-cont #promoss {
		height: auto;
		position: relative;
	}

	.contact-cont #promoss h4 {
		font-size: 18px;
		width: 100%;
		padding: 20px;
	}

	#cont-form {
		position: relative;
		width: 100%;
	}

	form {
		position: relative;
		top: 2em;
		padding: 30px;
		margin: 0;
		display: block;
	}

	footer {
		height: auto;
		padding: 10px;
	}

	.foot-img {
		padding: 30px;
	}

	.enlances {
		padding: 40px;
	}

	#message {
		height: auto;
		text-align: center;
	}
}

@media (min-width: 768px) and (max-width: 1024px){
	.navbar-custom {
		height: 140px;
	}

	.navbar-brand img {
		width: 100%;
	}

	.navbar-custom .navbar-brand,
	.navbar-custom .navbar-text {
		width:30%;
	}

	.navbar-custom .navbar-nav .nav-link {
		text-align: center;
		background-color: rgba(255, 255, 255, .95);
		width: 100%;
		padding: 10px;
		margin-top: -13px;
		position: relative;
	}

	.navbar-toggler {
		background-color: #eb791e;
		border-radius: 0px;
	}

	/*Index*/

	#containtotal {
		display: block;
		position: relative;
	}

	.top {
		height:auto;
		width: 100%;
	}

	.content {
		height: auto;
		padding-bottom: 10px;
	}

	.ban-prods {
		height:AUTO;
		padding:20px;
	}

	.distrib {
		height:auto;
	}
	
	.distrib img{
		height: auto;
		width:150px;
	}

	/*Servs*/
	.prods-head,
	.servs-head,
	.contact-head {
		width: 100%;
		height: auto;
		padding: 20px;
		text-align: center;
	}

	.prods-head h2,
	.servs-head h2,
	.contact-head h2 {
		font-size: 60px;
	}

	.servs-c {
		height: auto;
	}

	/*Prodss*/
	.decks-cardss {
		margin: 0;
		height: auto;
		padding-bottom: 100px;
	}

	.aceros-cont,
	.cementos-cont,
	.grav-cont,
	.otros-cont {
		height: auto;
		padding-bottom: 120px;
	}

	.contact-cont {
		height: auto;
		width: 100%;
		padding: 0;
	}

	.contact-cont #promoss {
		height: auto;
		position: relative;
	}

	.contact-cont #promoss h4 {
		font-size: 18px;
		width: 100%;
		padding: 20px;
	}

	#cont-form {
		position: relative;
		width: 100%;
	}

	form {
		position: relative;
		top:2em;
		padding: 30px;
		margin: 0;
		display: block;
	}

	footer {
		height: auto;
		padding:20px;
		text-align: center;
	}

	.foot-img {
		padding:40px;
	}

	footer .reds {
		padding:10px;
	}
	
	footer .enlaces{
		font-size:13px;
	}
	
	.rs-icon{
		font-size:auto;
	}

	#message {
		height: auto;
		text-align: center;
	}
}