/* --> Rodamientos El Palomar Website <<<-----*/

/* -------> Media Queries <<<-----------*/

@media (max-width: 1280px) {

	.center {width: 100%;}
	#home .nosotros .center {width: 100%; padding-left:20px; padding-right: 20px; }
	#home .nosotros .center img {max-width:586px; width: 50%!important; height: auto;} 
	#home .nosotros .center .text {width: 50%; margin-top: 20px;}
	
	.productos ul li {width: 45%;}
	.productos ul li img {}
	.productos .center {padding: 80px 20px;}
	#home .servicios .center {width: 100%; padding: 80px 20px;}
	#home .empresas {padding: 60px 20px;}
	
	footer {padding: 40px 20px;}
	
	#nosotros .center {width: 100%; }
	#nosotros .detail {padding: 80px 20px;}
	
	#contacto .detail {padding: 80px 0;}
	
	header, .hero-small {padding-left: 20px; padding-right: 20px;}

}
	
@media (max-width: 1080px) {
	

header {padding: 20px;}
p, .btn, #home .servicios ul li, .section .text li {font-size: 1.1em;}	
.hero-small {padding-left: 0; padding-right: 0;}
	
#hamburger {display: block;}

#hamburger span {
  background:#00FFE3!important;
}
	
.navMenu {position: absolute; top: 0; right: 0; width: 100%; height: 100vh; background-color:var(--black); display: none!important; transition: 0.5s; z-index: 300; }
.navMenu .logo-menu {display: flex; flex-direction: column; /*align-items: center;*/ margin-left: 20px;}
.navMenu .linkedin-icon {}
.navMenu ul {width: 100%; display: flex; flex-direction: column; align-items: center; }
.navMenu ul.left {margin-top: 80px!important;}
.navMenu ul.right { margin-top: 0px!important;}
.navMenu li { padding: 12px 0; font-size: 1.4375em; }
.navMenu li a {color:var(--white);}
.navMenu a:hover {opacity: 0.7;}
.logo-menu img {filter: brightness(0) saturate(100%) invert(91%) sepia(14%) saturate(275%) hue-rotate(330deg) brightness(107%) contrast(93%);}
.logo-menu {padding-top: 20px;}
.btn-contacto {color:var(--blue); display:inline-block; transition: all 0.5s ease-out; padding: 16px 2px; position: absolute; top:5px; right:70px; font-size: 1.1em; }
.btn-contacto::after {content: ""; background: url("../images/point.svg") no-repeat; background-size:7px 7px; width: 7px; height: 7px; position: relative; display: inline-block; margin-left: 20px;}
.btn-contacto:hover {font-weight: 700;}

.header-light .navMenu ul a {color:var(--white);}
.header-light .navMenu .nav-active a {color:var(--green);}
.header-light .navMenu .nav-active a::after {background: var(--green);}
.header-light .navMenu ul a:hover {transition: all 0.5s ease-out; color:var(--green);}	
	
header.smaller .navMenu .nav-active a {color:var(--green);}
header.smaller .navMenu ul a:hover {color:var(--green);}
header.smaller .navMenu li a {color:var(--white);}
	
header.smaller #hamburger.toggle div { background-color:var(--white);}

	.navMenu .social {flex-direction: row; gap: 20px; justify-content:center; margin-top: 40px; }	
	.navMenu .social img {filter:invert(96%) sepia(21%) saturate(5%) hue-rotate(42deg) brightness(104%) contrast(104%);}
	
	
	
/* Extra utility classes to be added with JS */
.nav-active {transform: translateX(0);display:block!important;}
#hamburger.toggle div {background-color:var(--white);}
.toggle #bar1 {transform: rotate(-45deg) translate(-5px, 5px);}
.toggle #bar2 {opacity: 0;}
.toggle #bar3 {transform: rotate(45deg) translate(-5px, -5px);}
	
	
.hero {height: 60vh; min-height: 300px!important; padding: 0 20px;} 
.hero h1 {font-size: 1.8125em; margin-top: 30vh;}
	#home .nosotros h2 {font-size: 1.825em;}
	
	#home .nosotros .center	{flex-direction:column-reverse; padding: 40px 20px; }
	#home .nosotros .center img {width:100%!important;}	
	#home .nosotros .center .text {width: 100%; padding-left: 0; margin-top:0; margin-bottom: 40px;}
	
	.productos .center {padding: 50px 20px 0;}
	.productos ul li {width: 100%; text-align: center;}
	.productos ul li img {width: 100%; max-width:370px;  height: auto; margin: 0 auto; }
	.productos p.intro {font-size: 1.8em; text-transform: none; margin-bottom: 30px;}
	.productos ul li h3, .productos ul li p {text-align:left;}
	
	#home .servicios .center {padding: 40px 20px;}
	#home .servicios img {display: none;}
	#home .servicios .left li::before {content:""; display: block; width:12px; height:12px; background: var(--blue); border-radius:50%; position: absolute; left: 0; top:4px;}
	#home .servicios .left {text-align:left;}
	#home .servicios ul {width: 100%!important; height: auto;}
	#home .servicios .left li {padding-right: 0; padding-left: 20px; margin-bottom: 10px;}
	#home .servicios li {margin-bottom: 10px;}
    #home .servicios .left li:nth-child(2) {margin-right: 0;}
	#home .servicios .right li:nth-child(2) {margin-left: 0;}
	#home .servicios .content {flex-direction:column; }
	#home .servicios h2 {text-align: left; font-size: 1.9em;}
	#home .servicios .bajada {text-align: left; width: 100%;}
	
	.btn {width: 100%; text-align: center;}
	
	#home .empresas {padding: 40px 20px;}
	#home .empresas .logos {display: flex; justify-content:space-between; flex-wrap:wrap;}
	
	footer .center .content div {width: 100%; text-align: center; margin-bottom: 20px;}
	footer .center .content {flex-direction:column;}
	footer .center .copy {text-align: center;}
	
	.hero-small .center {padding: 120px 20px 0;}
	.hero-small {min-height:250px;}
	.hero-small p {width: 100%;}
	.hero-small h1 {font-size: 1.9em;}
	
	.prefooter .center {width:100%; padding: 40px 20px;}
	.prefooter {padding: 0;}
	
	.section .center {width:100%; padding: 40px 20px 0; flex-direction:column; align-content: center!important;}
	.section .text {padding:0 20px 0 0; }
	.section img {margin: 20px auto 0; width: 100%; max-width:554px;}
	.product-detail .section:last-child {margin-bottom: 40px;}
	#servicios .detail .section:nth-child(4) { margin-bottom: 40px;}
	#servicios h1 {margin-bottom: 0; font-size: 1.9em;}
	
	.section .text { width: 100%;}
	
	.section-list .center {flex-direction:column; padding:0;}
	.section-list .col-2 {width: 100%; margin-top:0;}
	.section-list .col-1 {width: 100%;}
	.section-list {background-image:none; background-color: var(--black); padding: 40px 20px;}
	
	#nosotros .detail {padding:80px 0 0;}
	#nosotros .s-right .text {padding-right:0;}
	#nosotros h2 {margin-bottom: 0; font-size: 1.9em;}
	.section-3col {padding: 40px 20px; margin-top: 40px;}
	.section-3col ul {flex-direction:column;}
	.section-3col ul li {width:100%; margin-bottom: 30px;}
	
	#contacto .detail {padding:80px 0 40px;}
	#contacto .section .text {padding: 0 0 20px 0;}
	#contacto h2 {margin-bottom: 0; font-size: 1.9em;}
	
	.section h2 {font-size: 1.5em;}
	

	
}