
nav a{ text-transform: uppercase; font-family: 'Karla', sans-serif; font-size:1.2rem; text-decoration: none; }

.bg-dark{ background:#333333 !important; }

.bg-primary{ background:rgba(0,0,0,1) !important; }
.btn-primary{ background:rgba(0,0,0,1) !important; border:0; }
.text-primary{ color:rgba(0,0,0,1) !important; }

.text-transparent{ opacity: 0.7; filter:alpha(opacity=70); }
.text-grey{ color:#CCCCCC !important; }

.carousel-caption{ bottom:8rem; }
.carousel-caption h1{ font-size:3rem; font-style: italic; }
.carousel-caption h1 span{ background:rgba(0,0,0,0.6); padding:10px; }
.carousel-item{ height: 44rem; }

div.logo{ position: absolute; top: 0; left: 0; z-index: 100000; }
div.menu{ position:absolute; z-index:2; width: 100%; height: 100px; }

.display-3{ line-height:0.8; }
.display-5{ font-size:23px; }

.col-20{ float:left; width: 20%; }	
.p-2{ padding:1rem !important; }
.mobile{ display: none; }
.mobile-no{ display: block; }

.bg-transparente{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+80&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 30%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 30%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */		
}


div footer div div:first-child{ text-align: left !important; }
div footer div div:nth-child(2){ text-align: right !important; }

a.ir-a.active{ color: #000000 !important; font-weight:bold; text-decoration: none; }
a:hover{ color:#000000 !important; text-decoration: none; }

.border-radius{ border-radius: 10px; }
.height-200{ height: 230px; }
.height-400{ height: 320px; }

.pt-100{ padding-top: 120px; }
.pb-100{ padding-bottom: 120px; }

.navbar-light .navbar-toggler{ border: none; }

.nav-dinamic{ border-bottom:1px solid #EEEEEE; position: absolute; width: 100%; height: 104px; top: -27px; background: url(../img/logo.png) top center no-repeat; background-size: 49%; left: 0 }

@media (max-width: 86rem) {
	div.logo{ position: absolute; top: 40px; left: 5px; }
	div.menu{ position:fixed; z-index:1; height:178px; top:-30px; }
	.carousel-item{ height: 40rem; }
	#cd-vertical-nav{ top:90%; right: -114px; }
}

@media (max-width: 64rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; width: 100%; }
	div.menu{ position:fixed; z-index:1; height:118px; top:-30px; }
	.carousel-item{ height: 40rem; }
	a.ir-a.active{ color: #000000 !important; font-weight:bold; }
	a:hover{ color:#000000 !important; }
	.text-center.text-grey.mobile{ display:none !important; }
	.col-20, .col-md-2{ float:left; width: 33% !important; max-width: 33% !important; flex: 0 0 33%; }
	.mobile{ display: block; }
	.mobile-no{ display: none; }
	.height-400{ height: 250px; }
	.pt-100{ padding-top: 20px; }
	.pb-100{ padding-bottom: 20px; }
	
	.nav-dinamic{ background-size:18%; }
	
}

@media (max-width: 51rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; width: 100%; }
	div.menu{ position:fixed; z-index:1; height:118px; }
	.text-center.text-grey.mobile{ display:block !important; }
	.col-20, .col-md-2{ float:none; width: 100% !important; max-width: 100% !important; flex: 0 0 100%; }
	.img-content img{ width: 100% !important;}
	.carousel-item{ height: 24rem; }
	.carousel-caption h1{ font-size: 1rem; }
	.carousel-caption{ display: none; }
	.nav-dinamic{ background-size:23%; }
}

@media (max-width:48rem ) and (max-height:64rem) {
	.nav-dinamic{ background-size:23% !important; }
}

@media (max-width:64rem ) and (max-height:48rem) {
	.nav-dinamic{ background-size:17% !important; }
}

@media (max-width: 48rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; width: 100%; }
	div.menu{ position:fixed; z-index:1; height:112px; }
	div footer div div:first-child{ text-align: center !important; }
	div footer div div:nth-child(2){ text-align: center !important; }
	.display-5{ font-size:20px; }
	.display-4{ font-size: 36px;}
	.logo.mobile.bg-transparente img{ width: 45%; }
	.carousel-item{ height: 24rem; }
	.carousel-caption h1{ font-size: 1rem; }
	.carousel-caption{ display: none; }
	.nav-dinamic{ background-size:48%; }
}

@media (max-width: 40rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; width: 100%; }
	div.menu{ position:absolute; z-index:1; height:700px; }
	.carousel-item{ height: 45rem; }
	.carousel-caption h1{ font-size:1.3rem; }
	.carousel-caption{ bottom:13rem; }
	.display-4{ font-size: 2.5rem; line-height: 2.5rem; }	
	.carousel-item{ height: 20rem; }
	.nav-dinamic{ background-size:43%; }
}

@media (max-width:46rem ) and (max-height:26rem) {
	.nav-dinamic{ background-size:24% !important; }
}

@media (max-width:26rem ) and (max-height:51rem) {
	.nav-dinamic{ background-size:48% !important; }
}

@media (max-width:51rem ) and (max-height:26rem) {
	.nav-dinamic{ background-size:22% !important; }
}

@media (max-width: 26rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; }
	.carousel-item{ height: 40rem; }	
	.carousel-caption{ display: block; }
	.nav-dinamic{ background-size:43%; }
}

@media (max-width:42rem ) and (max-height:24rem) {
	.nav-dinamic{ background-size:27% !important; }
}

@media (max-width: 24rem) and (max-height:36rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; }
	.carousel-item{ height: 40rem; }
	.nav-dinamic{ background-size:56%; }
}

@media (max-width:36rem ) and (max-height:24rem) {
	.nav-dinamic{ background-size:30% !important; }
}

@media (max-width: 20rem) {
	div.logo{ position: absolute; top: 0; left: 0; padding-top: 2rem; }
	.carousel-item{ height: 40rem; }
}

.banner-1{ background:url(../img/banner-1.jpg) no-repeat right center; background-size: cover; }
.banner-2{ background:url(../img/banner-2.jpg) no-repeat center center; background-size: cover; }
.banner-3{ background:url(../img/banner-3.jpg) no-repeat center center; background-size: cover; }

.img-1{ background: url(../img/img-refrigeracion.jpg) center center no-repeat; background-size: cover; }
.img-2{ background: url(../img/img-equipos_industriales.jpg) center center no-repeat; background-size: cover; }
.img-3{ background: url(../img/img-refractario.jpg) center center no-repeat; background-size: cover; }
.img-4{ background: url(../img/img-inspeccion.jpg) center center no-repeat; background-size: cover; }
.img-5{ background: url(../img/img-bolas.jpg) center center no-repeat; background-size: cover; }
.img-6{ background: url(../img/img-tecnologia.jpg) center center no-repeat; background-size: cover; }

.flex-equal > * { -ms-flex: 1; flex: 1; }
@media (min-width: 768px) {
  .flex-md-equal > * { -ms-flex: 1; flex: 1; }
}
.overflow-hidden { overflow: hidden; }
