:root {
	--tph-rojo: #E00E17;
	--tph-rojo-oscuro: #7e0a10;
	--tph-amarillo: #FFF700;
	--tph-negro-claro: #191919;
	--tph-color-piel: #FAE083;
	--tph-color-piel2: #EDD5AD;
	--tph-font-body: 'AVENIRNEXTLTPRO-REGULAR';

}

/********************************************************************* fuentes *********************************************************/

@font-face {
	font-family: 'AVENIRNEXTLTPRO-BOLD';
	src: url('../../../fonts/AVENIRNEXTLTPRO-BOLD.woff2') format('woff2'),
		url('../../../fonts/AVENIRNEXTLTPRO-BOLD.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'AVENIRNEXTLTPRO-REGULAR';
	src: url('../../../fonts/AVENIRNEXTLTPRO-REGULAR.woff2') format('woff2'),
		url('../../../fonts/AVENIRNEXTLTPRO-REGULAR.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'gooddognew';
	src: url('../../../fonts/gooddognew-webfont.woff2') format('woff2'),
		url('../../../fonts/gooddognew-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}



.font-special, .font-body {
	font-family: 'AVENIRNEXTLTPRO-REGULAR' !important;
}

.font-aven-regular {
	font-family: 'AVENIRNEXTLTPRO-REGULAR' !important;
}

.font-aven-bold {
	font-family: 'AVENIRNEXTLTPRO-BOLD' !important;
}

.font-gooddo, .font-especial {
	font-family: 'gooddognew' !important;
}

.cl-amarillo {
	color: var(--tph-amarillo);
}

.cl-piel {
	color: var(--tph-color-piel);
}

.cl-piel-2 {
	color: var(--tph-color-piel2);
}


body {
	font-family: var(--tph-font-body);
	background-color: var(--tph-negro-claro) !important;
	color: white;
}


.navbar-dark .navbar-nav .nav-link {
	color: #ffffff;
	font-weight: bold;
}


.h1-titulo {
	font-size: 4rem !important;
	font-family: 'gooddognew';
}

.mt--2 {
	margin-top: -2rem;
}

.alert-error {
	margin-bottom: 0.5rem;
}


/* .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.432);
  } */


/********************************************************************* Botones *********************************************************/
#inicio button {
	font-family: 'gooddognew';
	color: var(--tph-amarillo);
	background-color: var(--tph-rojo);
	border-color: transparent;
	border-radius: 2rem;
	font-size: 1.7rem;
	width: 24rem;
	transition: 0.3s background-color;
}

#inicio button:hover,
.btn-formulario:hover {
	background-color: var(--tph-rojo-oscuro);
}

.btn-formulario {
	color: var(--tph-rojo);
	background-color: var(--tph-amarillo);
	border-radius: 2rem;
	font-family: 'gooddognew';
	font-size: 1.96rem;
	transition: 0.3s background-color;
}


/********************************************************************* scrollbar css *********************************************************/
/* width */
::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--tph-rojo-oscuro);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: black;
}


/********************************************************************************** MENU  *******************************************************************************/

#logo {
	height: 4rem;
}

#mainMenu {
	padding-top: 0;
	padding-bottom: 0;
}

#accesoMicuentaLabel {
  color: black;
}

#mainMenu .container-fluid {
	background-color: var(--tph-rojo);
}

#mainMenu a:hover {
	color: var(--tph-rojo-oscuro);
}

.navbar-dark .navbar-nav .nav-link {
  color: #ffffff;
}

.navbar-dark .navbar-brand {
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link {
  color: var(--tph-rojo-oscuro);
  font-weight: bold;
}
/********************************************************************************** header  *******************************************************************************/

#inicio img {
	width: 100%;
}

#inicio img.fondo {
	display: none;
}




/********************************************************************************** mecánica  *******************************************************************************/
#mecanica {
	background-color: var(--tph-rojo);
	margin-top: -.15rem;
}

#mecanica .container .row .col-12 p{
	/* font-size: 1.5rem; */
	font-size: 1.2rem;
}


#mecanica h2 {
	color: var(--tph-amarillo);
	text-align: center;
	margin-bottom: 0;
}

/********************************************************************************** freidora  *******************************************************************************/


/********************************************************************************** participa  *******************************************************************************/


form#formReg_l label {
	display: block;
	color: var(--tph-color-piel2);
	font-family: var(--font-textos);
}

form#formReg_l input,
form#formReg_l select {
	border-radius: 5rem;
}

form#formReg_l p {
	font-size: 0.6rem;
}

#participa span.input-group-text {
	display: none;
}

/* promoción empieza*/

#participa .col-12.col-lg-8.text-center.pt-5 {
	font-family: 'gooddognew';
	color: var(--tph-color-piel);
}
#participa #countdown {
	margin-top: 3rem;
}

#participa .wrapper span{
	font-size: 2rem;
	padding-left: .5rem;
	padding-right: .5rem;
}

/* promoción termina*/
#participa .row.flex-content.justify-content-center.pb-5  .text-center{
padding-top: 2rem;
font-size: 1.4rem;
}

/********************************************************************************** premios  *******************************************************************************/

#premios {
	background: url(../../../img/tu-experiencia-cocteleo/seccion4_movil.png);
	background-size: 100% 100%;
	color: black;
}


#premios h3 {
	padding: 4rem;
	font-weight: bold;
}

.carousel-control-prev-icon {
	background-image: url(../../../img/tu-experiencia-cocteleo/arrow-l.png);
	height: 2rem;
	width: 3rem;
}

.carousel-control-next-icon {
	background-image: url(../../../img/tu-experiencia-cocteleo/arrow-r.png);
	height: 2rem;
	width: 3rem;

}

.botones-l-r {
	margin-top: -54rem;
    margin-bottom: 50rem
}

.carousel-control-next,
.carousel-control-prev {
	width: 100%;
	opacity: 1;
}

#premios .carousel-item .row .col-12 {
	padding-bottom: 1rem;
}

/********************************************************************************** contacto  *******************************************************************************/

#contacto img {
	height: 8rem;
}


/********************************************************************************** footer  *******************************************************************************/

footer {
	background-color: var(--tph-rojo);
}

footer ul {
	list-style: none;
}

footer a {
	text-decoration: none;
	color: white;
	transition: color 0.3s;
	font-size: 1rem !important;
}

footer a:hover {

	color: var(--tph-rojo-oscuro);
}

footer .small {
	color: rgb(255, 255, 255);
}

footer img .small {
	max-width: 1.5rem;
}

footer span {
	display: none;
}

.logoBonduellPie {
	max-width: 12rem;
}

.pull-right {
	float: right;
}

.xs-d-flex {
	flex-direction: column;
}


/********************************************************************************** media query  *******************************************************************************/

@media(max-width:424px) {

	/* Opcional - para medidas menores de 425px */
	#inicio button {
		font-size: 2rem;
		width: 15rem;
	}

	#contacto b {
		font-size: 1.35rem;
	}

	#mecanica .container .row .col-12 h1 {
		font-size: 1.2rem;
	}
	#mecanica .container .row .col-12 p{
		font-size: 1rem;
	}

}

@media (min-width: 768px) {

	#inicio p {
		font-size: 1.5rem;
	}

	#inicio button {
		font-size: 3rem;
		width: 40rem;
	}

	/* .card-img-top {
		height: 30rem;
	} */

	.btn-formulario {
		font-size: 3rem;
		width: 27rem;
		border-radius: 3rem;
	}

	.carousel-item img {
		height: 25rem;
	}

	.botones-l-r {
		margin-top: -21rem;
		margin-bottom: 18rem;
	}
	

	
	.carousel-item img {
		height: 15.5rem;
	}
}


@media (min-width: 1024px) {
	#logo {
		height: 5rem;
	}


	#inicio img {
		display: none;
	}
	#inicio img.fondo {
		display: block !important;

	}

	#inicio .container-fluid {
		/* margin-top: -27.5rem; */
		position: absolute;
		margin-top: -43vw;
		padding-left: 50vw;
	}

	#inicio h4, #inicio p {
		font-size: 1.5vw;
		margin-bottom: 0;
	}


	#inicio button {
		/* font-size: 2.2rem; */
		font-size: 3vw;
		width: 40vw;
	}

	 





	#mecanica .container .row .col-12 img {
		height: 14rem;
	}

	#mecanica .container .row .col-12 {
		width: calc(100%/3);
		display: block !important;
	}

	#mecanica .container .row .col-12.pt-5 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#premios {
		background: url(../../../img/tu-experiencia-cocteleo/seccion4.jpg);
		background-size: 100% 100%;
	}

	#premios h1 {
		padding-top: 3rem;
	}

	#premios h3 {
		padding-bottom: 10rem;
	}

	#contacto {
		background: url(../../../img/tu-experiencia-cocteleo/seccion5.jpg);
		background-size: 100% 100%;
	}

}


@media (min-width: 1200px) {

	#inicio .container-fluid {
		margin-top: -40vw;
	}


	#inicio button {
		/* font-size: 3rem;
		width: 40rem; */
		border-radius: 3rem;
	}
	#mecanica .container .row .col-12 img {
		height: 16rem;
	}


}


@media (min-width:1400px) {

	#contacto .container .row .col-12 {
		width: 30%;
	}

	#contacto .container .row .col-12.media {
		width: 40%;

	}

	#contacto #img1,
	#contacto #img3 {
		height: 18rem;
	}

	#contacto #img3 {
		margin-top: -8rem;
	}

	#contacto #img4,
	#contacto #img2 {
		height: 11rem;
		margin-top: 5rem;
	}
	#contacto .container .row .col-12.d-none {
		display: block !important;
	}


}


@media (min-width: 1600px) {



	.carousel-control-prev-icon {

		height: 3rem;
		width: 4rem;
		margin-left: -8rem;

	}

	.carousel-control-next-icon {
		height: 3rem;
		width: 4rem;
		margin-right: -8rem;

	}

	.carousel-control-prev {
		justify-content: start;

	}


	.carousel-control-next {
		justify-content: end;
	}

	.botones-l-r {
		margin-top: -10.5rem;
		margin-bottom: 9rem;
	}

	

	.container-fluid,
	section,
	header,
	footer,
	.div-espacio {
		max-width: 1920px;
		margin: 0 auto;
	}

}


@media (min-width: 1800px) {
	#inicio .container-fluid {
		margin-top: -45rem;
		padding-left: 55rem;
	}
	
	#inicio h4, #inicio p {
		font-size: 1.5rem;
	}
	#inicio button {
		font-size: 3rem;
		/* font-size: 3vw; */
		width: 40rem;
	}
}