/*
Verd: #5CE1C0;
Blau: #221B7D;
Gris: #E5E5E5;
*/

html,
body {
	font-size: 16px;
}

body {
	background: #fff;
	font-family: Roboto, sans-serif;
	color: #777;
}

h1,
h2,
h3 {
	font-family: 'Merriweather';
	color: #000;
}

h1 {
	font-size: 60px;
	text-align: center;
}


h2 {
	font-size: 40px;
}

h3 {
	font-size: 2.2em
}

b {
	color: #000
}

.container {
	max-width: 1000px
}
.btn{
	border-radius: 0 !important;
}
.btn.btn-primary {
	background: #5CE1C0;
	border: #5CE1C0;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
}

.btn.btn-primary:active {
	box-shadow: 0 0 10px #ccc
}

.btn.btn-primary:active,
.btn.btn-primary:hover {
	opacity: .8;
	background: #5CE1C0 !important;
	color: #fff;
	border: #5CE1C0 !important;
}

.btn.btn-secondary {
	background: #E5E5E5 !important;
	border: #E5E5E5 !important;
	color: #744;
	text-transform: uppercase;
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 0
}

.btn.btn-secondary:active {
	box-shadow: 0 0 10px #ccc
}

.btn.btn-secondary:active,
.btn.btn-secondary:hover {
	background: #E5E5E5 !important;
	color: #544;
	box-shadow: 0 0 5px #E5E5E5;
	border: #E5E5E5 !important;
}

.btn.green {
	background: #54A5A5;
	border-radius: .5em
}

.btn.red {
	background: #cb5543 !important;
	border-radius: .5em;
	color: #FFF !important
}

.btn.btn-disabled{
	background-color: grey;
	color: #ccc;
}

.col-12:not(.col-md-6)>h2 {
	text-align: center;
}

.subt {
	font-weight: 200;
	font-size: 16px;
	text-align: center;
	text-transform: uppercase
}

.fonsblau {
	background: #221B7D;
	color: #fff;
}

.fonsverd {
	background: #5CE1C0;
}

.fonsgris {
	background: #e5e5e5;
}

.caixa {
	margin-bottom: 2em;
}

.caixa .caixaContent {
	background: #fff;
	padding: 1em;
	border-radius: 1em;
	text-align: center;
	display: block;
	float: left;
	margin-bottom: 1em;
	width: 100%
}

.caixa.mateixaAlcada .caixaContent {
	height: 100%;
}

.caixa .caixaContent.nopadding {
	padding: 0
}

.caixa .caixaContent .btn {
	width: 100%;
	border-radius: .7em
}

.caixa .caixaContent.grey {
	background: #e5e5e5;
}

.caixa .caixaContent.green {
	background: #5CE1C0;
	background: #54A5A5;
}

.caixa .caixaContent.green h3 {
	color: #fff;
}

.caixa .caixaContent.green p {
	color: #555;
}

.caixa .caixaContent.black {
	background: #000;
}

.caixa .caixaContent.blue {
	background: #221B7D;
}

.caixa .caixaContent.twitch {
	background-color: #ac64c1;
	color: #FFF;
}

.caixa .caixaContent.trovo {
	background-color: #19d66b;
	color: #FFF;
}

.caixa .caixaContent.facebook {
	background-color: #0e4892;
	color: #FFF;
}

.caixa .caixaContent.google {
	background-color: #cb5543;
	color: #FFF;
}

.caixa .caixaContent.youtube {
	background-color: #FF0000;
	color: #FFF;
}

.caixa .caixaContent.instagram {
	background-color: #d35664;
	color: #FFF;
}

.caixa .caixaContent.notConnected {
	background-color: #f8f8f8;
	color: #222;
}

.caixa .caixaContent.blue h3,
.caixa .caixaContent.blue p,
.caixa .caixaContent.black h3,
.caixa .caixaContent.black p {
	color: #fff;
}

.text-blanc,
.text-blanc p,
.text-blanc b {
	color: #fff !important;
}

.caixa .caixaContent.blue {
	background: #221B7D;
	color: #fff;
}

.caixa .caixaContent.nopadding .imatge img {
	border-radius: 1em 1em 0 0;
}

.textCentrat {
	text-align: center;
}

.textGran {
	font-family: 'DM Serif Display', serif;
	font-size: 2em;
	font-weight: bold
}

.textGran .destacat {
	color: #5CE1C0;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea {
	border-radius: 3px;
	font-size: 1.2em;
	line-height: 1.5em;
	box-shadow: inset 1px 2px 2px #cecece;
	background: #efefef;
	border: none;
	width: 100%;
	margin-bottom: 1em;
	padding: .2em .5em;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #aaa;
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #aaa;
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #aaa;
}

input[type="submit"] {
	background: #5CE1C0;
	border: none;
	float: right;
	text-transform: uppercase;
	color: #4C8180;
	font-weight: bold
}

input[type="radio"],
input[type="checkbox"] {
	box-shadow: none;
	margin-right: .4em;
}

form .help-text {
	display: inline;
}

/*form select:invalid {color: #ddd;}*/

.separador {
	width: 70%;
	max-width: 600px;
	margin: 2em auto;
	display: block;
	border-top: 1px solid #ddd;
}

.btn.btn-social,
.btn.btn-social:hover {
	color: #fff;
	text-align: left;
}

.btn.btn-social:hover {
	opacity: .8;
	box-shadow: 0 0 10px #ccc;
}

.google,
.google:hover {
	background: #DB4437;
}

.twitch,
.twitch:hover {
	background: #6441a5;
	color: #fff;
}

.facebook,
.facebook:hover {
	background: #4267B2;
	color: #fff;
}

.twitter,
.twitter:hover {
	background: #1DA1F2;
	color: #fff;
}

.trovo,
.trovo:hover {
	background: #2cbd7a;
	color: #fff;
}

header {
	background: #fff;
	text-align: center;
	top: -350px;
	transition: top 2s;
	box-shadow: 0 10px 10px #aaa;
	padding-bottom: 1px;
	padding: 1em 0;
}

header .container {
	position: relative;
}

header .logo {
	color: #000;
	font-family: 'DM Serif Display', serif;
	font-size: 72px;
	line-height: 1em;
	margin-bottom: 0
}

header .navbar-expand-lg .navbar-nav a.nav-link {
	color: #777;
	display: inline-block;
	padding: 0 1em;
	text-transform: uppercase;
	font-size: 16px
}

header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%
}

header.sticky .logo {
	font-size: 48px;
}

header.sticky .navbar-expand-lg .navbar-nav a.nav-link {
	font-size: 14px;
}

header.header-2 {
	background: linear-gradient(0, #221B7D 0%, #221B7D 30%, #54A4A5 100%);
}

header.header-2 .logo {
	color: #fff;
}

header.header-2 .navbar-expand-lg .navbar-nav a.nav-link {
	color: #fff
}

footer {
	background: #E0E0E0;
	padding: 2em 0;
}

#portada {
	h1 {
		color: #FFF;
	}

	footer {
		background: transparent;
		padding: 0;
	}
}

footer p,
footer a {
	color: #777;
	text-decoration: none;
}

footer .logo {
	color: #777;
	font-family: 'DM Serif Display', serif;
	font-size: 32px;
	line-height: 1em;
	margin-bottom: 0
}

footer ul,
footer li {
	padding-left: 0;
	list-style: none
}

section {
	padding-top: 3em;
	padding-bottom: 3em;
}

section.fonsGradient {
	background: linear-gradient(0, #54A4A5 0%, #221B7D 35%, #221B7D 55%, #3E6994 100%);
}

section.fonsGradient h2 {
	color: #fff;
}

section.fonsGradient .subt {
	color: #5CE1C0;
	margin-bottom: 3em;
}

section.bg50 {
	text-align: center;
}

section.bg50 .col-12>* {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
}

section.bg50 .col-12:first-child {
	color: #ddd;
}

section.bg50 .col-12:first-child h1,
section.bg50 .col-12:first-child h2,
section.bg50 .col-12:first-child h3,
section.bg50 .col-12:first-child b {
	color: #fff;
}

section#passes {
	padding-bottom: 3em;
}

section#passes .lesPasses {
	margin-top: 3em;
}

section#passes .passa {
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

section#passes .passa .content {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	background: #88A;
	color: #fff;
	font-family: 'Patua One', cursive;
	font-size: 60px;
	text-align: center;
	margin: 0 auto;
	line-height: 85px
}

section#passes .passa.activa .content {
	background: #fff;
	color: #000;
	position: relative;
}

section#passes .passa.activa .content:after {
	width: 95px;
	height: 95px;
	border-radius: 50%;
	position: absolute;
	top: -5px;
	left: -5px;
	border: 3px solid #5CE1C0;
	content: " ";
}

section#passes .passa .desc {
	text-transform: uppercase;
	text-align: center;
	margin-top: 1em;
	color: #5CE1C0;
	opacity: .6
}

section#passes .passa.activa .desc {
	color: #fff;
	opacity: 1
}

section#registre {
	text-align: center;
	font-size: 18px;
	line-height: 1.8em;
	color: #888;
}

section#registre .col-md-6 {
	position: relative;
}

section#registre h2 {
	margin-bottom: .5em;
}

section#registre p {
	margin-bottom: 2em;
	padding: 30px;
}

section#registre form {
	max-width: 90%;
	margin: 0 auto;
}

section#registre .botonera .btn {
	width: 80%;
	margin: .5em auto;
	font-size: 18px
}

section#cta {
	text-align: center;
}

section#cta .btn {
	padding: .6em 3em;
	color: #fff;
}

section#cta a {
	text-decoration: none;
	color: #555;
}

.searchBox {
	margin-bottom: 2em;
}

.searchBox input.cercador {
	margin-bottom: 0;
}

.searchBox input[type="submit"] {
	width: 100%;
	height: 2.3em;
}

aside .caixa .caixaContent {
	text-align: left;
}

aside .caixa .caixaContent h3 {
	font-size: 20px
}

.xarxes a {
	font-size: 1.5em;
	margin: 1px;
	color: #888;
	display: block;
	float: left
}

.xarxes a.active {
	color: #fff
}

.xarxes a i {
	padding: .3em
}

.xarxes a i,
.xarxes a i {
	background: transparent
}

.label {
	box-shadow: inset 1px 1px 2px #ccc;
	display: inline-block;
	float: left;
	margin: 0 .5em .5em 0;
	border: 1px solid #ccc;
	padding: .2em 1.3em .2em 1em;
	border-radius: 3px;
	position: relative;
}

.label i.close {
	color: #000;
	position: absolute;
	right: .4em;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 1em
}

aside .xarxes a {
	width: 23%;
}

ul.options {
	list-style: none;
	padding: 0
}

ul.options .selected {
	color: #000
}

.tarjaUsuari {
	text-align: center;
}

.tarjaUsuari .nom {
	font-size: 20px;
	margin: .5em 0 0 0;
}

.tarjaUsuari .xarxes {
	padding: 0 1em .5em 1em;
	display: block;
	float: left;
}

/* Addicional, estils no Sergi */
.caixa.tarjaUsuari .imatge {
	overflow: hidden;
	border-radius: 1em 1em 0 0;
}

.caixa.tarjaUsuari .imatge img {
	transform-origin: 50% 65%;
	transition: transform 5s, filter 3s ease-in-out;
}

.caixa.tarjaUsuari:hover img {
	transform: scale(3);
}

.normativa {
	background: linear-gradient(90deg, #E5E5E5 15%, #221B7D 15%) !important;
}

.normativa .check input {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
	padding: 30px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	margin: 0;
}

.normativa .check input:checked {
	background-color: #5CE1C0;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
	color: #99a1a7;
}

.normativa .check::before {
	--uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
	width: 0.4em;
	height: 0.2em;
	border-left-width: var(--uiToggleArrowWidth);
	border-bottom-width: var(--uiToggleArrowWidth);
}

.normativa .text {
	color: #FFF !important;
}

/* FI: Addicional, estils no Sergi */
@media screen and (min-width: 787px) {
	header .nav-item:not(:last-child):after {
		content: "|";
		display: inline-block;
		color: #777;
	}

	header .navbar {
		margin-bottom: 1em;
	}

	header .navbar-toggler {
		position: absolute;
		top: -3.5em;
		right: 0
	}

	header .userMenu {
		position: absolute;
		top: 1em;
		right: 0;
		text-align: right;
	}

	header .usernick {
		float: left;
		display: block;
		margin-right: 1em
	}

	header .userMenu .nom {
		font-weight: bold;
		color: #000;
		width: 100%;
		display: block;
	}

	header .userMenu .nick {
		font-weight: bold;
		color: #5CE1C0;
		font-size: .8em;
		width: 100%;
		display: block;
		float: left;
	}

	header .userMenu #navbarDropdownMenuLink2 img {
		max-width: 40px;
		border-radius: 50%;
		float: left;
	}

	header .userMenu .dropdown-toggle::after {
		position: absolute;
		right: 0;
		top: 1em;
	}

	header.header-2 .userMenu .nom {
		color: #fff;
	}

	section.bg50 {
		background: linear-gradient(90deg, #221B7D 50%, #E5E5E5 50%);
	}

	section#passes .passa:after {
		content: " ";
		border: 2px dashed #E5E5E5;
		width: 100%;
		position: absolute;
		height: 3px;
		top: 40px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: -1;
	}

	section#passes .passa:first-child:after {
		width: 50%;
		left: 50%;
	}

	section#passes .passa:last-child:after {
		width: 50%;
		right: 50%;
	}

	section#registre .col-md-6:first-child {
		border-right: 1px solid #aaa
	}

	section#registre .col-md-6:first-child:after {
		font-family: 'Patua One', cursive;
		font-weight: bold;
		content: "o";
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: -1em;
		left: auto;
		background: #fff;
		font-size: 2em;
		width: 2em;
		height: 1.7em;
		color: #000;
		line-height: 1.3em
	}
}

@media screen and (max-width: 787px) {
	h1 {
		font-size: 2em
	}

	h2 {
		font-size: 1.5em;
	}

	h3 {
		font-size: 1.2em
	}


	header .container {
		padding-top: 2em;
	}

	header .logo {
		font-size: 2em;
		margin-top: .2em;
	}

	header .userMenu {
		width: 100%;
		background: #000;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		height: 2em;
		padding: 0;
		text-align: right;
	}

	header .container {
		padding-left: 0;
		padding-right: 0
	}

	header .userMenu>ul {
		margin-left: auto;
	}

	header .userMenu>ul>li,
	header .userMenu>ul>li>a {
		padding: 0 !important;
		float: left;
	}

	header .usernick {
		float: left;
		display: block;
		margin-right: 1em;
		font-size: .8em;
	}

	header .userMenu .nom {
		font-weight: bold;
		color: #000;
		width: 100%;
		display: none;
	}

	header .userMenu .nick {
		font-weight: bold;
		color: #5CE1C0;
		font-size: .8em;
		width: 100%;
		display: block;
		float: left;
	}

	header .userMenu .dropdown-toggle::after {
		position: relative;
		float: left;
		top: .5em;
	}

	header .userMenu #navbarDropdownMenuLink2 {
		margin-top: -.2em;
		margin-right: .5em
	}

	header .userMenu #navbarDropdownMenuLink2 img {
		max-width: 1em;
		border-radius: 50%;
		float: left;
	}

	header .userMenu #navbarUserDropdown ul.dropdown-menu {
		position: absolute;
		float: right;
		width: 100%
	}

	header .navbar-expand-lg .navbar-nav a.nav-link {
		padding: .5em 0;
		font-size: 1.2em;
	}

	header .navbar-toggler {
		position: absolute;
		top: -1.3em;
		right: 0;
		padding: 0;
		border: none;
	}

	section.bg50 .col-12:first-child {
		background: #221B7D;
	}


	section#registre .col-md-6:first-child {
		border-bottom: 1px solid #aaa;
		margin-bottom: 3em;
		padding-bottom: 2em;
	}

	section#registre .col-md-6:first-child:after {
		font-family: 'Patua One', cursive;
		font-weight: bold;
		content: "o";
		position: absolute;
		left: 0;
		bottom: -1.2em;
		margin: auto;
		right: 0;
		top: auto;
		background: #fff;
		font-size: 2em;
		width: 2em;
		height: 1.7em;
		color: #000;
	}
}