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


/* #FONTS */
@import url("../../assets/tarifas-luz/fonts/fonts.css");

/* #VARIABLES */
:root {
    --black: #000000;
    --white: #ffffff;

    --grey: #1a1a1a;
    --yellow: #F7E821;
    --red: #EA1B1B;
	--blue: #004AFA;
	
    --pink: #e378a4;
    --green: #b4dac1;
    --grey-light: #d8d8d8;
    --orange: #ff6900;

    --font-main: "SSF", sans-serif;
    --font-quest: "QM", serif;
	--font-answer: "AOC-Bold", sans-serif;
	--font-cont: "Open Sans", sans-serif;

}



/**
* #GENERAL
**/
.p-portada .site-header .logo {
	display: none;
}
.contenidor-continguts--textos {
    position: relative;
	padding-top: 0;
}
.p-portada .main-title {
	font-size: 25vh;
	font-weight: normal;
	line-height: 0.9em;
	text-align: left;
}

.p-portada .sub-title {
	font-size: 10vh;
    line-height: 0.8em;
    color: var(--red);
    position: absolute;
    bottom: 80px;
    left: 40%;
    width: 45%;
    text-align: left;
    transform: rotate(-4deg);
}
.p-portada .sub-txt {
	font-size: 1.8em;
    line-height: 0.9em;
	font-family: var(--font-answer);
}
.p-portada .sub-txt span {
    color: var(--red);
    background-color: var(--yellow);
    padding-left: 5px;
    padding-right: 5px;
}
.contenidor-continguts--botons {
	position: absolute;
    right: 5vw;
}
.p-portada .contenidor-continguts--botons {
    bottom: 5vw;
}
.llista-legal {
    font-size: 0.9rem;
    text-align: left;
}
.quest-txt {
    color: var(--red);
}
.b-onboarding-01 p, .b-onboarding-02 p, [class*="b-preguntes"] p {
    width: 50%;
    font-size: 4rem;
    line-height: 1em;
    margin-top: 1.5rem;
	margin-bottom: 2rem;
    transform: rotate(-4deg);
    text-align: left;
}
.p-portada .site-header {
	display: none;
}
.site-header a img {
	height: 25vh;
}
.barra-progres span {
    background: var(--yellow);
}
.nav-next {
    font-size: 11rem;
}
.nav-next .bt {
    color: var(--yellow);
	padding-right: 8rem;
    padding-left: 2rem;
}
.nav-next .fas {
    transform: rotate(272deg) scaleY(1.5) translate3d(5px,-5px,0);
    text-shadow: -10px 10px var(--black);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.nav-next .disabled .fas {
	transform: rotate(272deg) scaleY(1.5) translate3d(0,0,0);
    text-shadow: -5px 5px var(--black);
}
.nav-next .fas:before {
    content: "\f0e7" !important;
}
.p-portada .nav-next span {
    color: var(--black);
    font-size: 2rem;
    display: block;
    font-family: var(--font-main);
    line-height: 0.5em;
}
.p-portada .bt-send {
	text-decoration: none;
}
.resultats--title h1 {
    font-size: 10vh;
    line-height: 0.9em;
    letter-spacing: 0;
    font-family: var(--font-main);
    font-weight: normal;
}
.b-resultats .textos-textos h3 {
    width: 100%;
    font-size: 3.5rem;
    line-height: 0.8em;
    margin-top: 0;
    margin-bottom: 2rem;
    transform: rotate(-4deg);
    text-align: left;
    font-family: var(--font-quest);
    color: var(--red);
    letter-spacing: 0;
	font-weight: normal;
}
.b-resultats .container-resultats {
    margin-top: 0;
}
.b-resultats .nav-next {
    font-size: 12rem;
    width: 100%;
    text-align: center;
}
.b-resultats .site-contents {
	flex: none;
}
.b-resultats .container-resultats--textos {
    width: calc(50% - 50px);
    margin: auto;
}
.site-footer {
	position: absolute;
	bottom: 0;
}

/*1024*/
@media only screen and (max-width:1024px) {
	.site-header {
		width: 40%;
		text-align: right;
		margin: 1em;
	}
	.site-header a {
		display: block;
		width: 100%;
	}	
	.site-header a img {
		width: 100%;
		height: auto;
		display: block;
	}
	.contenidor-continguts--textos {
		padding-top: 10vw;
	}
	.p-portada .sub-txt {
		font-size: 1em;
		margin-bottom: 1em;
	}
	.p-portada .main-title {
		font-size: 24vw;
		line-height: 0.8em;
	}
	.p-portada .sub-title {
		position: relative;
		font-size: 7vh;
		width: 100%;
		left: 0;
		bottom: 0;
		margin: 0;
	}
	.b-onboarding-01 p, .b-onboarding-02 p, [class*="b-preguntes"] p {
		width: 100%;
		font-size: 3rem;
		line-height: 0.8em;
		margin-top: 0;
		margin-bottom: 0.5em;
	}
	.nav-next {
		font-size: 8rem;
		width: calc(100% - 10vw);
	}
	.nav-next .bt {
		padding-right: 0;
		padding-left: 0;
	}
	.p-portada .contenidor-continguts--botons {
		position: relative;
		right: auto;
	}
	.p-portada .nav-next {
		font-size: 8rem;
		width: 100%;
	}
	
	.llista-legal {
		font-size: 0.8rem;
		text-align: center;
	}	
	.site-footer {
		padding-top: 2em;
		width: 100%;
		position: relative;
	}
	.resultats--title h1 {
		font-size: 10vh;
		line-height: 0.8em;
		padding-top: 3rem;
	}
	.b-resultats .nav-next {
		font-size: 8rem;
	}
	.b-resultats .textos-textos h3 {
		font-size: 2.4rem;
	}
	.b-resultats .container-resultats--textos {
		width: 100%;
	}	
}