@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

@font-face {  
  font-family: Hemi Head;  
  src: url(../fonts/hemi-head-bold.ttf) format("truetype");
}

.navbar-transparent{
	background-color: transparent !important;
	transition: background-color .5s;
}

.navbar-visible{
	background-color: #222 !important;
	transition: background-color .5s;
}

.navbar-brand{
	font-family: 'Hemi Head';
	text-transform: uppercase;
	font-size: 2rem;
}

.navbar-brand img {
	width: 50px;
	margin-right: 20px;
}

.nav-item a{
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: #99BE32;
}

.green-font{
	color: #99BE32;
}

#banner {
	font-family: 'Oswald', sans-serif;
}

.banner-mask{
	background-color: rgba(0,0,0, .4);
}

.banner-content{
	padding: 30vh 0;
	color: #fff;
	font-size: 3rem;
	text-transform: uppercase;
}

.section{
	padding: 30px 0;
}

.section-title{
	font-family: 'Oswald', sans-serif;
	font-size: 1.75rem;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 50px;
	margin-top: 50px;
}

.section-text{
	font-family: 'Montserrat', sans-serif;
	text-align: justify;
}

.advantage img {
	width: 50%;
	margin: auto;
}

.advantage-title{
	color: #222;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	margin-top: 20px;
	text-transform: uppercase;
	margin-bottom: 50px;
}

.mini-banner{
	color: #fff;
}

.service{
	padding-bottom: 30px;
	text-align: center;
	color: #fff;
	filter: grayscale(0%);
}

.service:hover{
	filter: grayscale(100%);
	transition: filter .5s;
}

.service-1{
	background-image: url(../img/metales.jpg);
	background-size: cover;
	padding: 100px 0;
}

.service-2{
	background-image: url(../img/fierro.jpg);
	background-size: cover;
	padding: 100px 0;
}

.service-3{
	background-image: url(../img/electronicos.jpg);
	background-size: cover;
	padding: 100px 0;
}

.service-4{
	background-image: url(../img/plasticos.jpg);
	background-size: cover;
	padding: 100px 0;
}

.service-5{
	background-image: url(../img/servicios.jpg);
	background-size: cover;
	padding: 100px 0;
}

.service-title{
	font-size: 1.5rem;
	padding: 10px 0;
	margin-bottom: 20px;
	background-color: #222;
}

.mini-banner-content{
	padding: 100px 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5rem;
	font-family: 'Oswald', sans-serif;
}

footer{
	background-color: #222;
	padding: 50px 0;
	color: #fff;	
}

.logo{
	font-family: 'Hemi Head';
	text-transform: uppercase;
}

.logo img{
	width: 100px;
	margin-bottom: 20px;
}

.footer-header-text{
	color: #99BE32;
	text-align: left;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	margin-top: 20px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.footer-text {
	color: #fff;
	text-align: left;
	font-family: 'Oswald', sans-serif;
	font-size: 1rem;
	margin-top: 10px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.footer-small{
	text-transform: lowercase !important;
}

#whatsapp{
	background-color: green;
	transition: background-color .5s;
	color: #fff;
	padding: 0px 15px;
	font-size: 3rem;
	border-radius: 50px;
	position: fixed;
	bottom: 0;
	right: 0;
	margin-bottom: 50px;
	margin-right: 50px;
	z-index: 1000;
}

#whatsapp:hover{
	text-decoration: none;
	color: green;
	background-color: #fff;
	transition: background-color .5s;
}

.list li{
	margin-bottom: 10px;
}

#map{
	padding-left: 0;
    padding-right: 0;
}

.map-container{
	overflow: hidden;
    position: relative;
    height: 500px;
}

.map-container iframe{
	left:0;
	top:0;
	height:500px;
	width:100%;
	position:absolute;
}

.link{
	color: #fff;
}

.link:hover{
	color: #666;
	text-decoration: none;
}

.carousel-container{
	padding-right: 13vw;
	padding-left: 13vw;
	margin-top: 50px;
}

.disclaimer{
	color: #fff;
	background-color: #000;
	font-size: .8rem;
	padding: 10px;
}

.disclaimer a:hover{
	color: #fff;
}

.disclaimer a{
	color: #D75375;
}