@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Montserrat-Regular.woff') format('woff'),
       url('fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Montserrat-Italic.woff') format('woff'),
       url('fonts/Montserrat-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-Bold.woff') format('woff'),
       url('fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-BoldItalic.woff') format('woff'),
       url('fonts/Montserrat-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Montserrat-Black.woff') format('woff'),
       url('fonts/Montserrat-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Montserrat-BlackItalic.woff') format('woff'),
       url('fonts/Montserrat-BlackItalic.ttf') format('truetype');
}

html, body {margin: 0;}
body {
	padding:0;
	font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
	color: #181818;
}
@media (max-width:768px) {
    body {font-size: 0.85rem;}
}

h1 {font-size: 2rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.2rem;}

.h1 {font-size: 2rem;}
.h2 {font-size: 1.6rem;}
.h3 {font-size: 1.4rem;}
.h4 {font-size: 1.2rem;}

.display-1 {font-size: 4em;}
.display-2 {font-size: 3em;}
.display-3 {font-size: 2.5em;}

strong {font-weight: 700;}
.extrabold {font-weight: 900;}
em, i {font-style: italic;}

.text-shadow {text-shadow: 3px 3px rgba(0, 0, 0, 0.3);}


.hr-white {border: 0; border-bottom: solid 2px #FFF;}
.hr-grey {border: 0; border-bottom: solid 2px rgba(0,0,0,0.2);}

/*containers*/
.container-1200 {max-width: 1200px; margin: auto;}
.container-1000 {max-width: 1000px; margin: auto;}
.container-900 {max-width: 900px; margin: auto;}
.container-800 {max-width: 800px; margin: auto;}
.container-600 {max-width: 600px; margin: auto;}
.container-400 {max-width: 600px; margin: auto;}

/*textos*/
.text-primary {color: #db1093!important;}
.text-primary-light {color: #ff6bb5;}
.text-secondary {color: #591ecc!important;}
.text-secondary-light {color: #b08bff;}
.text-tertiary {color: #00d9ff;}
.text-dark {color: #181818!important;}


a.text-black {color: #181818;}
a.text-black:hover {color: #000;}

/*fondos*/
.bg-primary {background-color: #db1093!important;}
.bg-primary-light {background-color: #ff6bb5;}
.bg-secondary {background-color: #591ecc!important;}
.bg-secondary-light {background-color: #d2bcff;}
.bg-tertiary {background-color: #00d9ff;}
.bg-tertiary-light {background-color: #80ecff;}

.bg-gradient {
	background: #591ecc;
	background: -webkit-linear-gradient(left, rgba(103, 40, 207, 1) 0%, rgba(255, 0, 156, 1) 100%);
	background: -o-linear-gradient(left, rgba(103, 40, 207, 1) 0%, rgba(255, 0, 156, 1) 100%);
	background: linear-gradient(to right, rgba(103, 40, 207, 1) 0%, rgba(255, 0, 156, 1) 100%);
}

.bg-image {
	background-size: cover;
	background-position: center center;
}

/*menu ppl*/
#main-nav {background-color: #591ecc; font-weight: 700;}
#main-nav .navbar-nav .nav-link {color: #fff!important; transition: all 0.15s linear;}
#main-nav .navbar-nav .nav-link:hover {color: #00d9ff!important; transform: scale(1.1); }
#main-nav .navbar-toggler {color: #FFF; border: 0;}
#main-nav .dropdown {margin-top: 0;}
#main-nav .dropdown:hover .dropdown-menu {display: block;}


/*slider*/
img.img-desk {display: block;}
img.img-mob {display: none;}
@media (max-width:768px) and (orientation:portrait) {
	img.img-desk {display: none;}
	img.img-mob {display: block;}
}

/*header*/
header {position: relative; background-color: #b08bff;}

.logo {width: 56%; max-width: 350px;}
.patrocinadores-cont {position: absolute; z-index: 10; margin-top: 2rem;}
.wa-label {width: 7%; max-width: 98px;}

/*BOTONES*/
.btn {border-radius: .75rem;}
.btn-primary {background-color: #db1093!important; border: solid 3px #db1093!important; color: #FFF;}
.btn-primary:hover {background-color: #bf0878!important; border: solid 3px #bf0878!important; color: #FFF;}

/*pastilla patrocinadores*/
.logos {display: -ms-flexbox!important; display: flex!important; -ms-flex-pack: justify!important; justify-content: space-between!important;}
.patrocinan {width: 25%; max-width: 360px;}
.pastilla {
	width: 100%;
	background-color: #591ecc;
    border: solid 1px #fff;
    border-radius: 1rem;
}

@media (max-width:768px) and (orientation:portrait) {
    .patrocinadores-cont {position: relative; margin-top: 0.5rem;}
    .patrocinan {width: 50%;}
	.wa-label {width: 16%;}
}

/*transiciones generales*/
.scale-up, .scale-down, .scale-rotate {transition: all 0.3s linear;}
.scale-up:hover {transform: scale(1.2); z-index: 10;}
.scale-down:hover {transform: scale(0.9);}
.scale-rotate:hover {transform: scale(1.2) rotate(-15deg);}

/*testimonios*/
#testimonials .carousel-inner {width: 80%; min-height: 130px;}
#testimonials span {display: block; color: #413e3b;}
#testimonials button {width: 10%;}
#testimonials .carousel-item div {font-size: 1.3rem;}
#testimonials .custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #313131;
  border-radius: 50%;
  padding: 8px;
}

#testimonials .custom-icon svg {
  width: 20px;
  height: 20px;
  fill: white;
}


/*footer*/
.roadrace-label {width:25%; max-width:80px; height: auto;}
.jk-credit{width: 36%; max-width: 130px;}

footer {font-size: 0.8rem;}
footer .footer_data {font-size: 0.9rem;}
footer .logos_footer img {width: 65%; max-width: 100px; height: auto;}
footer .footer_data i {margin-right: 3px;}
footer a, footer a:hover {color: #181818;}
footer a:hover {text-decoration: underline;}
@media (max-width:768px) {footer .footer_data span {display: block;}}

.social-icon {display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #451c9c; border-radius: 50%; font-size: 30px; transition: background-color 0.3s ease; text-decoration: none;}
@media (max-width:768px) {.social-icon {width: 40px; height: 40px; font-size: 20px;}}

.social-icon:hover {background-color: #b08bff; text-decoration: none;}
.social-icon i {pointer-events: none;}


/*solo del módulo de inscripciones**************************************************************/

.line-height-simple {line-height: 1.2em;}


/*PRINTABLE**************/
#printable .print-hide {display: block;}
#printable .print-show {display: none;}

@page {
    margin-top: 3cm;
    margin-left: 5cm;
    margin-right: 5cm;
    margin-bottom: 4cm;
}

@media print {
	body * {visibility: hidden;}
	body {width: 100%; background: #FFF; color: #333; margin: 5px;}
	#printable .print-hide {display: none;}
	#printable .print-show {display: block;}
    footer {display: none;}
	
	#printable, #printable * {visibility: visible; background: #FFF;}
	#printable {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
}


/*CUADRO TÉRMINOS Y CONDICIONES*/
.terminos {
    display: block;
    padding: 2%;
    height: 200px;
    overflow: auto;
    border: #999 solid 1px;
    text-align: justify;
}


/**FORM**/
fieldset {border: solid 2px #D6D6D6; border-radius: 0.5em; padding-bottom: 0.5em;}
legend {display: inline-block; width: auto; margin: auto; font-size: 1em; padding: 0.5em;}
fieldset h1 {font-weight: 700; font-size: 3em;}

.form-control, .custom-select {border: 1px solid #bec4cb;}
.form-control:focus, .custom-select:focus {border: 2px solid #999;}
.form-control[readonly] {background-color: #FFF; border: none;}

label {font-size: 0.9rem; font-weight: 600; margin: 0;}


/****ANIMACIÓN PRECIOS*****/
.animate-table {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.8s cubic-bezier(0.25, 1.5, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.animate-table.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays más largos */
.table-1.visible {
  transition-delay: 0s;
}

.table-2.visible {
  transition-delay: 0.6s;
}

.table-3.visible {
  transition-delay: 1.2s;
}