@font-face {font-family: 'gotham-black'; src: url('../../assets/fonts/GothamHTF-Black.otf');}
@font-face {font-family: 'gotham-med'; src: url('../../assets/fonts/GothamHTF-Medium.otf');}
@font-face {font-family: 'gotham-narrow'; src: url('../../assets/fonts/GothamNarrow-Book.otf');}

h1 {font-family: 'gotham-med'; font-size: 1.5rem; font-weight: 100}
header {font-family: 'gotham-med'; position:relative; width: 100%;} 
table {margin-top: 1rem; width: 330px}
table .bg-dark {border-bottom: 1px solid #f4f4f4;}
table .bg-secondary {background-color:#404040!important; border-bottom: 1px solid #f4f4f4;}
table .bg-warning {background-color: #FFDD00!important; border-bottom: 1px solid #f4f4f4;}
table .bg-light {background-color: #ffffff!important}
table .text-warning {color: #FFDD00!important;  border-bottom: 3px solid #f4f4f4;}
td {border-right: 2px solid #dee2e6; font-size:0.8rem; padding:0 5px}
tr {margin-bottom:1rem;}

.advice {background-color: #FFDD00; padding: 2rem}
.advice h3 {color: #000000; font-family: 'gotham-black'; font-size: 2.8rem; line-height: 40px; margin-top:1rem; text-align: center; text-transform: uppercase;}
.advice h4 {color: #000000; font-family: 'gotham-black'; font-size: 1.5rem; line-height: 25px; margin-top:1rem; text-align: center; text-transform: uppercase;}
.advice-text {border-bottom: 1px solid #EAEDF0; padding-bottom:3rem}
.advice-text p {font-size: 1.3rem; margin: 0 auto; max-width: 500px;}
.ball {position: absolute; left:103px; top: 82px;}
.ball img {width: 80px}
.bg-centers {background-image: url('/2024/assets/img/bg-map.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 1.5rem 0.2rem 1.5rem 0.8rem}
.bg-centers a {color:#000000; display: block; text-decoration: none; text-transform: uppercase;}
.bg-centers a:hover {color: #FFDD00}
.bg-centers h3 {font-family:'gotham-black'; margin: 2rem 0; text-align: center; text-transform: uppercase;}
.bg-centers h5 {font-size: 1.2rem; text-align: left; padding: 0}
.bg-centers h6 {font-size: 1.1rem; margin: 2rem 0; text-align: left; text-transform: uppercase;}
.bg-hero {background-image:url('/assets/img/bg-hero-agosto.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; height: auto; padding: 8rem 0 2rem 0}
.bg-tips {background-image: url('/assets/img/bg-tips-mobile.png'); background-position: center; background-size: cover; background-repeat: no-repeat; height: auto;}
.bg-tips h4 {font-family:'gotham-black'; font-size:2rem; text-transform: uppercase; }
.bg-tips-content {padding: 2rem}
.bg-tips ol {padding-left: 1rem}
.bg-tips li {font-weight: 500; font-size: 1.1rem}
.bg-tires {background-image: url('/assets/img/bg-tires-julio-25.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 2rem 0;}
.bg-tires h3 {color: #000000; font-family: 'gotham-black'; font-size: 1.5rem; line-height: 25px; margin-top:0; text-transform: uppercase;}
.bg-tires p {font-size: 1.1rem; margin-top: 1.5rem; max-width: 100%}
.bg-tires-flash {background-image: url('/assets/img/bg-tires-flash.jpg'); background-size: cover; background-position: center; padding: 3rem 0 2.5rem 0}
.bg-tires-flash h3 {color:#FFDD00; font-family: 'gotham-black'; font-size: 1.5rem; line-height: 25px; margin-top:0; text-transform: uppercase;}
.bg-tires-flash p {color:#ffffff;font-size: 1.1rem; margin-top: 1.5rem; max-width: 100%}
.bg-warning {background-color: #FFDD00!important;}
.brand-container {background-color:#000000; padding: 0.7rem 0}
.brand-container img {max-width: 150px}
.br{display: inline;}
.btn-warning {background-color: #FEDA00}
.container-video {max-width: 90%}
.experience {margin:0 auto; margin-bottom: 0; margin-top: 3rem; max-width: 1200px;}
.experience h2 {font-family:'gotham-black'; font-size:1.5rem; text-transform: uppercase;}
.experience h3 {font-family:'gotham-black'; font-size:2.5rem; text-align: center; text-transform: uppercase;}
.experience p {font-size: 1.5rem; font-weight: 400; line-height: 1.8rem}
.experience-icons img {max-width: 200px; max-height: 200px}
.experience-icons p {color:#717171; font-size: 1.1rem; font-weight: 400; line-height: 20px}
.experience-icons .btn-warning {font-size: 1.1rem; font-weight: 500; width: 250px}
.experience-icons {padding: 1rem}
.experience-icons .col-lg-6 {margin-bottom:2rem;padding: 1rem}
.experience-text {margin-left: 0.5rem }
.fs-big {font-size: 40px; font-weight: bold; letter-spacing: 2px; margin-left: 5px}
.fs-med {font-size: 16px;}
.fs-normal {font-size: 20px;}
.fs-small {font-family:'gotham-narrow'; font-size: 14px; font-weight: bold; letter-spacing: 5px; margin-left: 2rem}
.hero {margin-top:0}
.hero-wrapper {margin: 0.5rem 2rem; max-width: 270px; position: relative; text-transform: uppercase;}
.hero-wrapper img {max-width: 150px}
.hero-wrapper h1 {color: #ffffff; line-height: 27px; text-transform: uppercase;}
.hero-wrapper h2 {color: #FFDD00; font-family:'gotham-black'; font-size: 0.7rem; line-height: 15px; text-align: left; text-transform: uppercase;}
.margin-between {margin: 0}
.nav {padding: 0.2rem 0 1rem 0}
.nav-container {background-color: #333; color:#ffffff; font-weight: bold;}
.nav-container a {color: #ffffff}
.nav-desktop {display: none}
.nav-item {text-transform: uppercase; width: 95%}
.nav-link {border-bottom: 1px solid #666666; font-size: 0.8rem; width: 100%}
.nav-link:hover {color: #FFDD00}
.nav-mobile {display: block;}
.performance-center {margin: 1.5rem}
.performance-center h4 {font-family: 'gotham-black'; font-size: 2rem; text-transform: uppercase;}
.text-yellow {color:#FEDA00!important}
.title-promos {margin-top:1.5rem; padding-bottom: 1rem}

@media (min-width: 768px) { 
	
	header {left:0; position:fixed; top:0; z-index: 10;}
	table {margin-top:0; width: 100%}
	td {font-size:0.9rem; padding:0 5px}

	.ball {position: absolute; left:184px; top: 178px;}
	.ball img {width: 150px}
	.bg-centers {padding: 2rem}
	.bg-centers h5 {font-size: 1.6rem; padding: 2rem 10rem 2rem 10rem; text-align: center;}
	.bg-centers h6 {font-size: 1.4rem; margin:0 0 2rem 0; text-align: center; text-transform: uppercase;}
	.bg-hero {padding: 20rem; background-size: contain; background-position: bottom;}
	.bg-tips {background-image: url('/assets/img/bg-tips.png');}
	.bg-tips li {font-size: 1rem}
	.bg-tips-content {padding: 5rem}
	.bg-tires {background-color: #FAFAFA; background-size: contain; background-position: top right; padding: 8rem 0 2.5rem 0}
	.bg-tires h3 {font-size: 3rem;line-height: 50px; margin-top:8rem;}
	.bg-tires p {font-size: 1.1rem; margin-top: 1.5rem; max-width: 340px}
	.bg-tires-flash h3 {color:#FFDD00;font-size: 3rem;line-height: 50px; text-transform:uppercase; max-width: 350px;}
	.bg-tires-flash p {color:#ffffff;font-size: 1.1rem; margin-top: 1.5rem; max-width: 350px}
	.br{display: block;}
	.brand-container {padding: 1.5rem 0}
	.container-max-800 {max-width: 1000px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px;}
	.container-video {max-width: 50%}
	.experience {margin:0 auto; margin-bottom: 2rem; margin-top: 3rem; max-width: 1200px;}
	.experience-icons {padding: 0}
	.experience-icons .col-lg-6 {margin-bottom:0;padding: 1rem}
	.experience-text {margin-left: 0}
	.fs-big {font-size: 70px;margin-left: 10px}
	.fs-med {font-size: 20px;}
	.fs-normal {font-size: 45px;}
	.fs-small {margin-left: 3rem}
	.hero {margin-top:5.8rem}
	.hero-wrapper {margin: 7rem; max-width: 400px}
	.hero-wrapper h1 {color: #ffffff; line-height: 40px; margin:2rem 0; max-width: 300px;}
	.hero-wrapper h2 {font-size: 1.1rem; line-height: 20px;}
	.hero-wrapper img {max-width: 300px}
	.margin-between {margin: 0 8rem}
	.nav {padding: 0}
	.nav-container {background-color: rgba(73, 74, 76, 0.7);}
	.nav-desktop {display: block}
	.nav-item {width: auto}
	.nav-link {border-bottom: 0; font-size: 1rem}
	.nav-mobile {display: none}
	.performance-center {margin: 5rem}
	.title-promos {margin-top:9.5rem;}
}