@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.font-raleway{
	font-family: 'Raleway', 'sans-serif';
}

.font-roboto{
	font-family: 'Roboto', 'sans-serif';
}

.grecaptcha-badge{
	display: none;
}

.wrapper-eres-mi-norte{
	width: 100%;
	min-height: 100vh;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

	.inner{
		max-width: 1100px;
		margin: 0 auto;

		.container-logo{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo{
				width: 260px;

				@media(max-width: 992px) {
					max-width: 120px;
				}
			}
		}

		.container-logo-accion{
			max-width: 870px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo-accion{
				width: 100%;
				margin-top: 30px;
				margin-bottom: 30px;
			}
		}

		.container-imagen-form{
			display: flex;

			.imagen-left{
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 60%;
				padding: 0 15px;
			}

			.form-right{
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 0 0 40%;
				padding: 0 15px;

				.pre-text-form{
					font-size: 25px;
					color: #FFF;
					font-weight: 500;
				}
			}

			@media(max-width: 992px) {
				flex-direction: column;

				.imagen-left{
					flex: 0 0 100%;
				}

				.form-right{
					flex: 0 0 100%;
				}
			}

			&.isnotwinner,
			&.iswinner{

				.imagen-left{
					display: none;
				}

				.form-right{
					flex: 0 0 100%;

					> .pre-text-form{
						display: none;
					}

					> form#hcg-participation-form{
						display: none;
					}
				}

				#response{

					table{
						background-color: transparent !important;
						color: #FFF !important;
					}
				}
			}
		}

		.footer-sorteo{
			display: flex;
			align-items: center;
			justify-content: center;
			
			.container-links{
				max-width: 900px;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				padding-top: 50px;
				padding-bottom: 20px;

				&.container-links-desktop{
					display: flex;
				}

				&.container-links-mobile{
					display: none;
					align-items: center;

					.isleft{

						.logo-footer{
							img{
								max-width: 50px;
							}
						}
					}

					.isright{
						display: flex;
						flex-direction: column;
						padding-left: 15px;
						
						.righttop{

							.footer-item.disclaimer{
								font-size: 10px;
							}
						}

						.rightbottom{
							display: flex;

							.footer-item a{
								font-size: 10px;
							}
						}
					}
				}

				@media(max-width: 992px) {

					&.container-links-desktop{
						display: none;
					}

					&.container-links-mobile{
						display: flex;
					}

				}

				.footer-item{
					padding-right: 10px;

					&:last-child{
						padding-right: 0;
					}

					a{
						color: #FFF;
						font-size: 12px;

						&:hover{
							text-decoration: none;
						}
					}

					&.disclaimer{
						color: #FFF;
						font-size: 12px;
					}

					&.logo-footer{

						img{
							width: 80px;
						}
					}
				}
			}
		}
	}	

	#hcg-participation-form{

		.form-row{
			margin-bottom: 10px;
			max-width: 350px;
		}

		input[type=text],
		input[type=email],
		select{
			outline: unset;
			color: #e30613;
			font-family: 'Roboto', 'sans-serif';
			font-weight: 500;
			font-size: 15px;
			width: 100%;
		    border: unset;
		    background-color: #FFF;

		    &::placeholder {
			    color: #e30613b3; /* Cambia este color */
			    opacity: 1; /* Asegura que no sea transparente */
			}

			&::-webkit-input-placeholder {
			    color: #e30613b3;
			}

			&::-moz-placeholder {
			    color: #e30613b3;
			}

			&:-ms-input-placeholder {
			    color: #e30613b3;
			}

			&:-moz-placeholder {
			    color: #e30613b3;
			}

		}

		input[type=text],
		input[type=email]{
			padding: 5px 5px 5px 15px;
		}

		select{
			cursor: pointer;
			padding: 5px 30px 5px 13px;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			color: #e30613b3;
		}

		.ticket_compra_label{
			width: 100%;
			height: 60px;
			background-color: #FFF;
			text-transform: uppercase;
			display: flex;
			align-items: center;
			color: #e30613b3;
			padding-left: 15px;
			font-size: 15px;
			font-weight: 500;
			cursor: pointer;
			margin-bottom: 10px;
		}

		.error-message{
			color: red;
			font-weight: bold;
			background-color: white;
			text-align: center;
		}

		.form-row-checkbox{
			display: flex;
        	margin-bottom: 10px;

			label{
				color: #FFF;
				font-family: 'Raleway', 'sans-serif';
				font-weight: 500;
				font-size: 12px;
				margin-left: 18px;

				a{
					color: #FFF;
					font-family: 'Raleway', 'sans-serif';
					font-size: 12px;
				}
			}
		}
		
		input[type=checkbox] {
			transform: scale(1.5);
			position: relative;
        	left: 2px;
		}

		.form-row-select{
			position: relative;

			&:after{
				content: "";
				display: block;
				position: absolute;
				top: 0;
				right: 30px;
				width: 2px;
				height: 100%;
				background-color: #e30613b3;
			}

			&:before{
				content: "";
			    position: absolute;
			    right: 12px;
			    top: 50%;
			    width: 8px;
			    height: 8px;
			    border-right: 2px solid #e30613b3;
			    border-bottom: 2px solid #e30613b3;
			    transform: translateY(-50%) rotate(45deg);
			    pointer-events: none;
			}
		}

		.form-row-submit{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 30px;
		}

		button[type=submit] {
			background-color: #E20613;
		    border: unset;
		    outline: unset;
		    color: #FFF;
		    text-transform: uppercase;
		    padding: 8px 18px;
		    font-size: 18px;
		    font-family: 'Roboto','sans-serif';
		}
	}
}


.wrapper-contacto{
	width: 100%;
	min-height: 100vh;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

	.inner{
		max-width: 1100px;
		margin: 0 auto;

		.container-logo{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo{
				width: 260px;

				@media(max-width: 992px) {
					max-width: 120px;
				}
			}
		}

		.container-logo-accion{
			max-width: 870px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo-accion{
				width: 100%;
				margin-top: 30px;
				margin-bottom: 30px;
			}
		}

		.container-faqs{
			max-width: 900px;
			margin: 0 auto;
			padding: 0 15px;
		}
		
	}

	.accordion-collapse {
	    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
	    transform-origin: top center;
	    opacity: 0;
	    transform: scaleY(0);
	}

	.accordion-collapse.show {
	    opacity: 1;
	    transform: scaleY(1);
	}

	.accordion {
	    border: none;
	}

	.accordion-body{
		margin-top: 1rem;
	}

	.accordion-item {
	    border: 1px solid #ddd;
	    margin-bottom: 15px;
	    border-radius: 0;
	    background-color: #f8f9fa80;
	}

	.accordion-button {
	    font-weight: bold;
	    font-size: 1.1rem;
	    color: #e30613;
	    background-color: #e9ecef;
	    border: none;
	    padding: 15px 20px;
	    outline: none;
	    box-shadow: unset;
	}

	.accordion-button:not(.collapsed) {
	    background-color: #d6d8dbb5;
	}

	.accordion-button::after {
	    filter: brightness(0.6);
	}

	.accordion-collapse {
	    background-color: #ffffffd1;
	    border-top: 1px solid #ddd;
	}

	.accordion-button.collapsed {
	    background-color: #f1f3f5cc;
	}

	.accordion-button:not(.collapsed)::after{
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e30613'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	}

	.accordion-button::after{
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e30613'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	}

	.container-form-contacto{
		max-width: 600px;
		margin: 0 auto;

		> p{
			text-align: center;
		}

		> form{
			max-width: 400px;
			margin: 0 auto;
			margin-top: 30px;

			&.loading{
				position: relative;

				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: ##ffffff8c;
				}
			}

			.form-row{
				margin-bottom: 10px;

				input[type=text],
				input[type=email],
				textarea{
					outline: unset;
					color: #e30613 !important;
					font-family: 'Roboto', 'sans-serif';
					font-weight: 500;
					font-size: 15px;
					width: 100%;
				    border: 1px solid gray;
				    background-color: #FFF !important;
				    padding: 5px 5px 5px 15px;

				    &::placeholder {
					    color: #e30613b3; /* Cambia este color */
					    opacity: 1; /* Asegura que no sea transparente */
					}

					&::-webkit-input-placeholder {
					    color: #e30613b3;
					}

					&::-moz-placeholder {
					    color: #e30613b3;
					}

					&:-ms-input-placeholder {
					    color: #e30613b3;
					}

					&:-moz-placeholder {
					    color: #e30613b3;
					}

				}
			}

			.form-row-submit{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 30px;
			}

			button[type=submit] {
				background-color: #E20613;
			    border: unset;
			    outline: unset;
			    color: #FFF;
			    text-transform: uppercase;
			    padding: 8px 18px;
			    font-size: 18px;
			    font-family: 'Roboto','sans-serif';
			}
		}

		#response_form_contacto{
			width: 100%;
			text-align: center;
			margin: 20px 0;
		}
	}
	
}



.wrapper-form-data{
	width: 100%;
	min-height: 100vh;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

	.inner{
		/*
		max-width: 1100px;
		margin: 0 auto;
		*/

		.container-logo{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo{
				width: 260px;

				@media(max-width: 992px) {
					max-width: 120px;
				}
			}
		}

		.container-logo-accion{
			max-width: 870px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.logo-accion{
				width: 100%;
				margin-top: 30px;
			}
		}

		.container-faqs{
			max-width: 900px;
			margin: 0 auto;
			padding: 0 15px;
		}

		.footer-sorteo{
			display: flex;
			align-items: center;
			justify-content: center;
			
			.container-links{
				max-width: 900px;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				padding-top: 50px;
				padding-bottom: 20px;

				&.container-links-desktop{
					display: flex;
				}

				&.container-links-mobile{
					display: none;
					align-items: center;

					.isleft{

						.logo-footer{
							img{
								max-width: 50px;
							}
						}
					}

					.isright{
						display: flex;
						flex-direction: column;
						padding-left: 15px;
						
						.righttop{

							.footer-item.disclaimer{
								font-size: 10px;
							}
						}

						.rightbottom{
							display: flex;

							.footer-item a{
								font-size: 10px;
							}
						}
					}
				}

				@media(max-width: 992px) {

					&.container-links-desktop{
						/*display: none;*/
					}

					&.container-links-mobile{
						/*display: flex;*/
					}

				}

				.footer-item{
					padding-right: 10px;

					&:last-child{
						padding-right: 0;
					}

					a{
						/*
						color: #FFF;
						font-size: 12px;
						*/

						&:hover{
							text-decoration: none;
						}
					}

					&.disclaimer{
						color: #FFF;
						font-size: 12px;
					}

					&.logo-footer{

						img{
							width: 80px;
						}
					}
				}
			}
		}
	}

	.container-form-data{
		max-width: 600px;
		margin: 0 auto;

		.texto-previo{
			margin-bottom: 20px;

			h2{
				color: #FFF;
				text-transform: uppercase;
				text-align: center;
				max-width: 475px;
				margin: 0 auto;
				font-size: 34px;
				font-weight: 600;
				margin-bottom: 30px;
			}

			.text1{
				max-width: 450px;
    			margin: 0 auto;
				color: #415404;
			    font-size: 22px;
			    font-weight: 600;
			    text-align: center;
			}

			.text2{
				max-width: 450px;
    			margin: 0 auto;
				color: #FFF;
			    font-size: 22px;
			    font-weight: 600;
			    text-align: center;
			}
		}

		.imagen-previa{
			display: flex;
    		align-items: center;
    		justify-content: center;
    		margin-bottom: 40px;
		}

		> p{
			text-align: center;
		}

		> form{
			max-width: 400px;
			margin: 0 auto;
			margin-top: 30px;

			&.loading{
				position: relative;

				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: #ffffff8c;
				}
			}

			.form-row{
				margin-bottom: 10px;

				input[type=text],
				input[type=email],
				textarea{
					outline: unset;
					color: #415404 !important;
					font-family: 'Roboto', 'sans-serif';
					font-weight: 500;
					font-size: 15px;
					width: 100%;
				    border: unset;
				    background-color: #FFF !important;
				    padding: 5px 5px 5px 15px;

				    &::placeholder {
					    color: #415404b3; /* Cambia este color */
					    opacity: 1; /* Asegura que no sea transparente */
					}

					&::-webkit-input-placeholder {
					    color: #415404b3;
					}

					&::-moz-placeholder {
					    color: #415404b3;
					}

					&:-ms-input-placeholder {
					    color: #415404b3;
					}

					&:-moz-placeholder {
					    color: #415404b3;
					}

				}
			}

			.form-row-checkbox{
				display: flex;
            	margin-bottom: 10px;
            	cursor: pointer;

				label{
					color: #FFF;
					font-family: 'Raleway', 'sans-serif';
					font-weight: 500;
					font-size: 12px;
					margin-left: 18px;

					a{
						color: #FFF;
						font-family: 'Raleway', 'sans-serif';
						font-size: 12px;
					}
				}
			}
			
			input[type=checkbox] {
				transform: scale(1.5);
				position: relative;
            	left: 2px;
			}

			.form-row-submit{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10px;
			}

			button[type=submit] {
				background-color: #FFF;
			    border: unset;
			    outline: unset;
			    color: #415404;
			    text-transform: uppercase;
			    padding: 8px 18px;
			    font-size: 18px;
			    font-weight: 600;
			    font-family: 'Roboto','sans-serif';
			    border-radius: 30px;
			}
		}

		#response_form_contacto{
			width: 100%;
			text-align: center;
			margin: 20px 0;
		}
	}
	
}









:root{
	--juver-green-principal: #95c11f;
	--juver-orange-principal: #EF7D00;
}

.color-naranja{
	color: #ef7d00 !important;
}

.color-verde{
	color: #95c11f !important;
}


.body-raffle{

	&.iswinner,
	&.isnotwinner{

		.raffle-header{

			.texto-promo{
				display: none !important;
			}
		}

		.raffle-body {

			.sides-body{
				align-items: center;
				justify-content: center;

				#response{

					table img{
						margin-bottom: 0 !important;
					}

					.container-form-ticket{
						background-color: var(--juver-green-principal);
						padding: 20px;
						padding-bottom: 40px;
						margin-left: 8.25%;
                        margin-right: 9.65%;
                        max-width: 800px;

                        @media(max-width: 426px) {
                        	margin-left: 5.46%;
                        	margin-right: 6.40%;
                        }

                        #response-ticket{
                        	text-align: center;
                        	color: #FFF;
                        	font-size: 20px;
                        	font-weight: 600;
                        	max-width: 600px;
                            margin: 0 auto;
                        }

                        .container-input-file-ticket{
                        	display: flex;
                        	margin-top: 10px;
                        	margin-bottom: 0px;

                        	@media(max-width: 426px) {
                        		flex-direction: column;

                        		> label{
                        			margin-right: 0 !important;
                        			padding: 10px 40px !important;
                        			margin-bottom: 3px;
                        		}
                        	}
                        }
					}
				}
			}
		}

		.raffle-copys{
			top: unset !important;
		}

		.footer-sorteo{
			top: unset !important;
			padding: 30px 0;
		}
	}

	.raffle-header{
		
		.container-logo-accion{
			max-width: 500px;
			margin: 0 auto;
			position: relative;
			z-index: 1;
			top: 40px;

			.logo-accion{
				pointer-events: none;
			}
		}

		.texto-promo{
			max-width: 900px;
			margin: 0 auto;
			border-radius: 30px;
			padding: 30px 20px;
			background-color: var(--juver-green-principal);
			position: relative;

			> div{
				font-size: 50px;
				font-weight: 700;
				text-align: center;
				line-height: 57px;

				&.texto1{
					font-size: 60px;
					line-height: 67px;
				}
			}
		}
	}

	.raffle-body{
		padding-top: 40px;

		.sides-body{
			display: flex;

			.side-left{
				display: flex;
                align-items: center;
                justify-content: center;
				flex: 0 0 45%;
				padding: 0 15px;
				position: relative;

				.container-imagen-izquierda{
					display: flex;
					align-items: center;
					justify-content: center;
					max-width: 500px;
					margin: 0 auto;
					cursor: pointer;
				}
			}

			.side-right{
				flex: 0 0 55%;
				padding: 40px 60px 30px 60px;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: var(--juver-orange-principal);
				border-radius: 30px;
				/*
				background-size: contain;
				background-repeat: no-repeat;
				background-position: top;
				*/
				position: relative;

				&:before{
					content: "";
					display: block;
					position: absolute;
					z-index: -1;
					bottom: -295px;
					width: 100%;
					height: 300px;
					background-color: var(--juver-orange-principal);
				}

				.container-form{

					.pretitulo{
						font-size: 40px;
						line-height: 47px;
						color: #FFF;
						margin-bottom: 15px;

						span{
							font-size: 52px;
							line-height: 59px;
							font-weight: 700;
							color: #FFF;
						}
					}

					#hcg-participation-form{

						.form-row{

							input[type=text],
							input[type=email],
							select{
								width: 100%;
                                margin-bottom: 12px;
                                outline: none;
                                padding: 10px 15px;
                                font-size: 16px;
                                font-weight: 600;
                                border: unset;
                                color: #683400;

                                &::placeholder {
    								color: #683400;
    							}
							}

							&.form-row-code{
								position: relative;

								&:after{
									content: "";
									display: block;
									width: 126px;
									height: 78px;
									background-image: url(../img/burbuja.svg);
									background-size: cover;
									background-repeat: no-repeat;
									background-position: center;
									position: absolute;
									top: 50%;
									right: -115px;
									transform: translateY(-50%);
								}

								#code{
									font-size: 18px;
									padding: 15px;
									margin-bottom: 0;
								}
							}

							&.form-row-checkbox{
								margin-bottom: 12px;
								position: relative;
								display: flex;
								align-items: flex-start;

								input[type=checkbox] {
									transform: scale(1.75);
									margin-right: 16px;
									position: relative;
									top: 5px;
									right: -5px;
									cursor: pointer;
								}

								label{
									color: #FFF;
									max-width: 450px;

									a{
										color: #FFF;
										text-decoration: underline;
									}
								}
							}

							&.form-row-submit{
								padding-bottom: 100px;

								button[type=submit] {
									margin-top: 20px;
									background-color: #FFF;
									font-size: 20px;
									line-height: 29px;
									font-weight: 700;
									text-transform: uppercase;
									width: fit-content;
									border-radius: 30px;
									color: #683400;
									outline: none;
	                                border: unset;
	                                padding: 5px 20px;
	                                position: relative;
                                    z-index: 1;
								}
							}
						}
					}
				}
			}
		}
	}

	.raffle-copys{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
		padding-top: 150px;
		position: relative;
        top: -150px;

        &:before{
        	content: "";
        	display: block;
        	position: absolute;
        	top: 10%;
        	z-index: -1;
        	background-color: #FFF;
        	width: 100%;
        	height: 100%;
        }

		.container-colecciona{
			max-width: 1100px;
			margin: 0 auto;
			background-color: #FFF;
			border-radius: 30px;
			padding: 50px 70px;
			position: relative;
    		top: 30px;
			
			.titulo{
				text-align: center;

				.linea1{
					font-size: 68px;
					line-height: 77px;
					font-weight: 700;
				}

				.linea2{
					font-size: 52px;
					line-height: 61px;
					font-weight: 600;
				}
			}

			.premios{
				display: flex;
				margin-top: 30px;

				.side-left{
					flex: 0 0 60%;
					padding: 0 15px;

					.linea1{
						text-align: center;
						font-size: 34px;
						line-height: 43px;
						font-weight: 700;
					}

					.linea2{
						text-align: center;
						font-size: 30px;
						line-height: 39px;
						font-weight: 700;
					}

					.foto-listado{
						display: flex;
						margin-top: 15px;

						.premio-left{
							flex: 0 0 34%;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.listado-right{
							flex: 0 0 66%;
							display: flex;
							flex-direction: column;

							.elem{
								font-size: 25px;
								line-height: 34px;
							}

							.btn-tapas-monumentales{
								margin-top: 24px;

								> a{
									display: flex;
									color: #FFF;
									text-transform: uppercase;
									font-size: 20px;
									line-height: 29px;
									font-weight: 600;
									background-color: var(--juver-green-principal);
									text-align: center;
									padding: 10px 20px;
									border-radius: 40px;
									text-decoration: none;
								}

								.explicacion{
									color: #000;
									text-align: center;
									font-size: 12px;
									margin-top: 5px;
									font-weight: 600;
								}
							}
						}
					}
				}

				.side-right{
					flex: 0 0 40%;
					padding: 0 15px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.anchor#banner-hosteleros{

			}

			.banner-hosteleros{
				margin-top: 40px;
				text-align: center;
				position: relative;
				display: flex;
    			justify-content: center;

				#banner-hosteleros-desktop{
					display: block;
				}

				#banner-hosteleros-mobile{
					display: none;
				}
			}
		}
	}
}

.footer-sorteo{
	position: relative;
	top: -75px;

	.container-links{
		max-width: 1100px;
        margin: 0 auto;
        display: flex;

        .footer-item{
        	flex: 0 0 16.66%;
        	padding: 0 15px;
        	text-align: center;
        	color: #000;
        	font-size: 14px;
        	line-height: 18px;
        	font-weight: 600;

        	a{
        		color: #000;
        		font-size: 14px;
        		line-height: 18px;
        		text-transform: uppercase;
        		text-decoration: none;
        		font-weight: 600;
        	}
        }
	}
}


@media(max-width: 1399px) {

	.body-raffle{

		.raffle-body{

			.sides-body{
				
				.side-right{
					padding-top: 50px;
					background-image: unset !important;
					background-color: var(--juver-orange-principal);
					border-top-left-radius: 30px;
					border-top-right-radius: 30px;
				}
			}
		}
	}
}


@media(max-width: 991px) {

	.body-raffle{

		.raffle-body{

			.sides-body{
				position: relative;

				.side-left{
					width: 250px;
					position: absolute;
					z-index: 2;
					top: 75%;
					right: 0%;
				}

				.side-right{
					flex: 0 0 100%;
					padding: 50px 20px;
					
					.container-form{

						.pretitulo{
							font-size: 30px;
							line-height: 37px;

							span{
								font-size: 42px;
								line-height: 49px;
							}
						}
					}
				}
			}
		}

		.raffle-copys{
			padding-top: 100px;

			.container-colecciona{
				padding: 40px;

				.titulo{

					.linea1{
						font-size: 58px;
						line-height: 65px;
					}

					.linea2{
						font-size: 42px;
						line-height: 49px;
					}
				}

				.premios{
					flex-direction: column;

					.side-left{
						order: 1;
					}

					.side-right{
						margin-bottom: 30px;
					}
				}
			}
		}

		.footer-sorteo{

			.container-links{
				flex-wrap: wrap;
				justify-content: center;

				.footer-item{
					margin-bottom: 20px;

					&.bases-legales-clientes{
						order: 0;
						flex: 0 0 33.33%;
					}

					&.bases-legales-hosteleros{
						order: 1;
						flex: 0 0 33.33%;
					}

					&.bases-legales-col-tapas{
						order: 2;
						flex: 0 0 33.33%;
					}

					&.politica-privacidad-cookies{
						order: 3;
						flex: 0 0 50%;
					}

					&.contacto{
						order: 4;
						flex: 0 0 50%;
					}

					&.disclaimer{
						order: 5;
						flex: 0 0 100%;
						margin-bottom: 0;
					}
				}
			}
		}
	}
}



@media(max-width: 768px) {

	.body-raffle{

		.raffle-header{

			.texto-promo{

				> div{
					font-size: 38px;
					line-height: 45px;

					&.texto1{
						font-size: 48px;
						line-height: 55px;
					}
				}
			}
		}

		.raffle-body{

			.sides-body{

				.side-left{
					/*top: 71%;*/
				}
				
				.side-right{
					padding-bottom: 100px;

					.container-form{

						#hcg-participation-form{

							.form-row{

								&.form-row-code{

									&:after{
										right: -30px;
									}
								}
							}
						}
					}
				}
			}
		}

		.raffle-copys{
			padding-top: 60px;

			.container-colecciona{
				padding: 40px 15px;

				.titulo{

					.linea1{
						font-size: 44px;
						line-height: 51px;
					}

					.linea2{
						font-size: 32px;
						line-height: 39px;
					}
				}

				.premios{

					.side-left{

						.foto-listado{
							flex-direction: column;

							.listado-right{

								.elem{
									font-size: 20px;
									line-height: 29px;
								}
							}
						}
					}
				}

				.banner-hosteleros{

					#banner-hosteleros-desktop{
						display: none;
					}

					#banner-hosteleros-mobile{
						display: block;
					}
				}
			}
		}
	}
}

@media(max-width: 430px) {

	.body-raffle {

        .raffle-copys {
            padding-top: 30px;
        }
    }
}





/********************
 * PÁGINA CONTACTO
 *******************/
 
 .wrapper-contacto{

 	.logo-accion{
 		margin-top: 40px;
 		margin-bottom: 30px;
 		display: flex;
 		align-items: center;
 		justify-content: center;

 		img{
 			max-width: 500px;
 			padding: 0 15px;
 		}
 	}

 	&.body-raffle{

 		.footer-sorteo{
 			position: unset;
 			top: unset;
 			max-width: 900px;
 			margin: 0 auto;
 			padding-top: 40px;
 			padding-bottom: 15px;
 		}
 	}

 }

 .wrapper-form-data{

 	.container-logo-accion{
 		max-width: 500px !important;
 	}

 	.texto-promo{
 		display: none;
 	}

 	.container-form-data{
 		background-color: var(--juver-green-principal);
 		padding: 30px;
 		padding-bottom: 120px;
 		border-top-left-radius: 30px;
 		border-top-right-radius: 30px;

 		@media(max-width: 767px) {
 			max-width: 95%;
 			padding-bottom: 150px;
 		}
 	}

 	form#hcg-form-data{
 		position: relative;
    	z-index: 1;

 		input[type=text],
 		textarea{
 			background-color: #8080805c !important;
 		}

 		.form-row.form-row-checkbox{
 			margin-top: 15px;
            margin-bottom: 0px !important;

 			label{
 				color: #FFF;

 				a{
 					color: #FFF;
 				}
 			}
 		}
 	}

 	.footer-sorteo{
 		
 		.disclaimer{
 			color: #000 !important;
 		}
 	}
}

table.table-ganador,
table.table-no-ganador{

	tr.img-desktop{
		display: block;

		@media(max-width: 426px) {
			display: none;
		}
	}

	tr.img-mobile{
		display: none;

		@media(max-width: 426px) {
			display: block;
		}
	}
}


.body-raffle{

	&.isnotwinner{

		#response{
			position: relative;

			&:after{
				content: "";
				display: flex;
				height: 200px;
				background-color: var(--juver-orange-principal);
				position: absolute;
		        left: 10.72%;
		        right: 13.1%;

		        @media(max-width: 426px) {
		        	left: 5.3%;
	            	right: 6.4%;
		        }
			}

			table.table-no-ganador{		

				tr.img-desktop img{
					position: relative;
			    	top: 30px;
				}
			}
		}
	}

	&.iswinner{

		#response{
			position: relative;

			&:after{
				content: "";
				display: flex;
				height: 200px;
				background-color: var(--juver-green-principal);
				position: absolute;
		        left: 8.2%;
		        right: 9.7%;

		        @media(max-width: 426px) {
		        	left: 5.3%;
	            	right: 6.4%;
		        }
			}

			table.table-no-ganador{		

				tr.img-desktop img{
					position: relative;
			    	top: 30px;
				}
			}
		}
	}
}


body.iswinner,
body.isnotwinner{

	main#theme-main{
		position: relative;
		top: -100px;

		.body-raffle{

			&.isnotwinner .raffle-header .container-logo-accion{
				top: 160px;

				@media(max-width: 767px) {
					max-width: 300px;
	            	top: 120px;
				}

				@media(max-width: 426px) {
					max-width: 250px;
	                top: 110px;
				}
			}

			&.iswinner .raffle-header .container-logo-accion{
				top: 160px;

				@media(max-width: 767px) {
					max-width: 300px;
	            	top: 120px;
				}

				@media(max-width: 426px) {
					max-width: 250px;
	                top: 110px;
				}
			}
		}
	}
}

body.not-starting-raffle{

	.raffle-body{

		.sides-body{
			justify-content: center;

			.side-left{
				display: none !important;
			}

			.side-right{

				&:before{
					bottom: -200px;
                    width: 100%;
                    height: 200px;
				}

				.container-form{

					.pretitulo{
						display: none !important;
					}

					.mensaje-previo{
						padding-top: 10%;
    					padding-bottom: 25%;
    					text-align: center;
					}
				}
			}
		}
	}

	.raffle-copys{
		height: 400px;

		.container-colecciona{
			display: none !important;
		}
	}

	@media(max-width: 426px) {

		.raffle-body{

			.sides-body{

				.side-right{
					padding-bottom: 50px;

					&:before{
						content: none;
					}
				}
			}
		}

		.raffle-copys{
			height: 100px;
			top: -80px;
		}
	}
}