/*
se usa en: 

\includes\head_covid.asp
\includes\head.asp

*/


/* ################################ GENERAL ################################ */

body {background: #f8faf9;}
@media (min-width: 1200px){
	.container, .container-lg, .container-md, .container-sm, .container-xl section{
		max-width: 1365px;
	}
}
section {padding: 20px 0px 20px 0px;}
a {color: #7066CC;}



/* 2022 CUSTOM  */
/* ################################ HOME METRO UI ################################ */

.home-pannel {
	margin-bottom: -2px !important; 
	margin-top: 1px !important;
	padding-bottom: 15px;
	display: flex;
	justify-content: right;
	align-items: flex-end;
	cursor:pointer;
	padding-right: 0px
}

.menu-descripcio-compas {
	font-size: var(--texte_finder);
	color: white;
	font-family: "ff-real-headline-pro",sans-serif; 
	text-transform: initial;
	display: block;
	max-width: 250px;
	line-height: 1.15em;
	margin-top: 20px;
}

.menu-caixa-titol-update {
	height:93%;
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: flex-end;
	padding-bottom: 15px;
	padding-left: 0px;
}


.menu-titol-update {
	font-family: 'bebas-neue',sans-serif;
	margin-bottom: -2px !important; 
	margin-top: 1px !important;
	padding-bottom: 15px;
	padding-left:28px;
	color:white;
	
}

.menu-titol-update p {
	margin-top: 20px;
	font-size: var(--title-home);}

@media (max-width: 520px){
	.row-cols-5 .col {width: 100%; max-width: 100%; margin: auto; flex: auto;}
}

/* ################################### BURGUER MENU ################################## */
.fa-bars {color: #7066CC; font-size: 49px; margin-right: 19px;}
.fa-bars:hover {cursor: pointer; color: #5a4c9a;}

/* ################################### END MENU ################################## */



/* 2022 END CUSTOM */


/* ################################ MENU ################################ */
.log {font-size: 41px; margin-right: 20px; color: #7066CC; margin-top: 13px;}
.log:hover {color: #5a4c9a;}

.identificar {font-size: 27px; color: #fff;}
.identificar:hover {color: #7066CC;}

#sidebar-wrapper, .menu_user2a {font-family: 'Roboto', sans-serif;}
#sidebar-wrapper.active {width: 300px;}
#sidebar-wrapper .row {margin-left: 0px; margin-right: 0px;}

.a_menu2 {color: white; font-size: 16px; font-family: 'Oswald', sans-serif;}
.menu_user2 {padding-left: 30px!important; padding-right: 30px!important;}	
.menu_user2 p {margin-top: 0; margin-bottom: 1rem;}


/* ################################ SCROLLBAR ################################ */
::-webkit-scrollbar-track{
	-webkit-box-shadow: none; border-radius: 10px; background-color: #F5F5F5;}
::-webkit-scrollbar {width: 12px;background-color: #7066CC;}
::-webkit-scrollbar-thumb{
	border-radius: 10px; -webkit-box-shadow: none; background-color: #7066CC;}


/* ################################ NAVBAR ################################ */
.logo {max-width: 100px; text-align: left; float: left;}
.navbar {margin-top: 20px;}
.navbar-dark {background: #fbfbfb;}
.navbar-brand {min-width: 200px;}

.navbar-toggler {border:0px; color: #7066CC;}



/* ################################ SELECT TEXT COLOR ################################*/
::-moz-selection {color: #fff;background: #7066CC;}
::selection {color: #fff; background: #7066CC;}

/*TWITTER*/
.timeline-Header-title {color: #afa54d;}
.timeline-Widget {background-color: #fff!important;}

/*BUTLLETI ( + ) */
.butlleti-plus {
	height:20%;
	display: flex;
	justify-content: left;
	align-items: flex-end;
	padding-bottom: 15px;
	padding-left: 0px;
}

/*FUNDS*/
.img6 {
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	background-image: url(../img/funds.png);
	background-repeat: no-repeat;}

/*BTN FOOTER*/
.btn-footer {
	background: #9189d7; 
	color: white; 
	padding: 5px; 
	line-height: 45px;}

.btn-footer:hover {
	color: #ccc;
	background: #6760a7;
	text-decoration: none;}

.btn-footer:active {color: #ccc;}




footer {background-image: none; background-color: #ffffff00;}
footer {font-family: Arial, sans-serif; font-weight: 400; color: #555; line-height: 1.5;}
footer h3 {font-weight: 600; font-size: 18px; margin-bottom: 6px;}
footer a.info {color: #8b81d7; margin-top: 10px; display: block;}

a.pujar {color: #8b81d7; text-align: right; font-size: 2em; display: block;}
a.pujar i {border: 5px solid; border-radius: 100%; width: 1.5em; text-align: center;}



/* ################################ INFORMACIO ################################ */

.menu3 .row  {padding: 0px 0px;}
.menu3 .row .col-md-6, .menu3 .row .col-md-12 {margin: 1px 0px 0px 0px; padding: 1px;}

.infocard {
		width: 100%; 
		background: #fff; 
		border-radius: 0px; 
		padding: 40px 20px;
		margin-top: 2px;
		float: right;
}
.infocard:hover {text-decoration: none; }
.infocard p.th2 {font-size: 32px; font-family: 'Oswald'; color:#8c84d6; margin-bottom: 10px;}
.infocard p {font-size: 20px; font-weight: 300; font-family: 'Roboto'; color: #000;}
.infocard a:hover{color: #fff;}

.infocard img {max-width: 25%;}

@media (max-width: 768px){.infocard img {max-width: 50%;}}










/* ################################ SLIDER ################################ */

.custom-header {
	color: #000;
	margin-top: 0px/*125px*/;
	padding: 40px;
	/*min-height: 50vh;*/
	transition: 0.15s all ease;
	border-radius: .5rem;
	box-shadow: 0 2rem 1.5rem -1.5rem rgba(33,37,41,0.15),0 0 1.5rem 0.5rem rgba(33,37,41,0.05) !important;
	background: #fff;}


.slider {
	background-color: #6259b3;
	background-image: url(../img/bkg_img.svg), linear-gradient(135deg, #6259b3 0%, #aca6e4 100%);
	background-size: cover;
	margin-top: 20px;
	min-height: 500px;
	z-index: -50;
	padding: 0px 20px;}

@media (min-width: 992px){.slider {padding-top: 50px;}}


.title {
	font-size: 48px;
	font-weight: 100;
	margin-bottom: 60px;
	color: #f2f2f2;
	font-family: 'Oswald', sans-serif;
	-webkit-transform: scale(1,1.2);
	-moz-transform: scale(1,1.2);
	-ms-transform: scale(1,1.2);
	-o-transform: scale(1,1.2);
	transform: scale(1,1.2);
}

.intro {
	font-size: 22px;
	line-height: 1.25em;
	max-width: 90%;
	margin: 20px 0px 60px 0px;
	color: #f2f2f2;
}










/* ################################ NEW MEDIA CARDS ################################ */


.img-person, .img-person-general,
.img-person-empren, .img-person-funds, 
.img-person-update, .img-person-Update,	.img-person-knowledge, 
.img-person-panel, .img-personUpdate  {
	background-size: contain;
	background-repeat: no-repeat;
	float: right;
	right: 0;
	width: calc((100% / 6) * 5);
	height: calc((100% / 5) * 5);
	position: absolute;
}

.img-personUpdate {
	background-image: url(../img/personUpdate.svg); 
	width: 360px; height: 340px; z-index: 100; position: inherit; float: right;
}

/*animations*/
.img-person-general, .img-person-panel, .img-person-funds {
	width: 90%;		height: 90%;	top: 90px;
}

.img-person {background-image:url(../img/person_lite.svg);}
.img-person-general {background-image: url(../img/person_general.svg);}
.img-person-empren {background-image:url(../img/person_empren.svg);}
.img-person-funds {background-image:url(../img/person_funds.svg); top: 0px;}
.img-person-update {background-image:url(../img/person_update.svg); z-index: 7;}
.img-person-knowledge {background-image:url(../img/person_knowledge.svg); top: -50px;}
.img-person-panel {background-image:url(../img/person_panel.svg);}




/* corregir en el menu al cargar hover */
.load .img-person-general,
.load .img-person, 
.load .img-person-funds, 
.load .img-person-update,	
.load .img-person-knowledge, 
.load .img-person-panel {top: 100px;}

.load .engranaje1, .load .engranaje2, .load .engranaje3 {margin: 10px;}

/* ############ anim GENERAL ############ */
.documento1, .documento2, .documento3, .raton, .click {
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 5;
	animation-timing-function: ease;
	animation-play-state: running;           /* play the animation  */
}

.documento1 {
	transform: rotate(42deg);
	background-image: url(../img/documento1.svg); /* PDF */
	top: 179px; left: 82px;
	width: 80px; height: 80px;
	animation: documentoA 2s linear infinite;
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}

.documento2 {
	transform: rotate(12deg);
	background-image: url(../img/documento2.svg); /* DOCX */
	top: 118px; left: 208px;
	width: 57px; height: 80px;
	animation: documentoB 2s linear infinite;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.documento3 {
	transform: rotate(93deg);
	background-image: url(../img/documento3.svg); /* XLS */
	top: 150px; right: 53px;
	width: 46px; height: 70px;
	animation: documentoC 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.raton {
	background-image: url(../img/raton.svg); /* XLS */
	top: 392px; right: 23px;
	width: 42px; height: 70px;
	animation: raton 3s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.click {
	background-image: url(../img/click.svg); /* XLS */
	bottom: 150px; right: 43px;
	width: 46px; height: 70px;
	opacity: 0;
	animation: click 3s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@keyframes documentoA {
	0%, 100% {transform: rotate(42deg);}
	50% {transform: rotate(60deg);}
}

@keyframes documentoB {
	0%, 100% {top: 110px;}
	50% {top: 130px;}
}

@keyframes documentoC {
	0%, 100% {transform: rotate(93deg);}
	50% {transform: rotate(110deg);}
}

@keyframes raton {
	0%, 100% {top: 390px; transform: scale(0.75);}
	25% {top: 450px; transform: scale(1);}
	75% {top: 450px; transform: scale(1);}
	70%, 85% {transform: scale(1);}
}

@keyframes click {
	75%,  70%, 85%, 100% {opacity: 0}
	0% {opacity: 1;}
}
/* ############ end anim GENERAL ############ */


/* anim EMPREN*/
.engranaje, .engranaje2, .engranaje3 {
	float: right;
	background-image: url(../img/engranaje.svg); 
	background-size: cover;

	width: 100px;
	height: 100px;
	-webkit-animation-name: engranaje;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: engranaje;
	-moz-animation-duration: 10s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: engranaje;
	-ms-animation-duration: 10s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	animation-name: engranaje;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.engranaje2 {
	background-image: url(../img/engranaje2.svg); 
	margin-right: -20px;
	width: 140px;
	height: 140px;
	float: right;
	right: 0;
	z-index: -1;
}

.engranaje3 {
	float: right;
	width: 80px;
	height: 80px;
	margin-top: -70px;
	margin-right: -20px;}

@-ms-keyframes engranaje {
	from {-ms-transform: rotate(0deg);}
	to {-ms-transform: rotate(360deg);}
}

@-moz-keyframes engranaje {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes engranaje {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@keyframes engranaje {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}




/* anim FUNDS*/
.artilugio1, .artilugio2, .artilugio3 {
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 5;
	animation-timing-function: ease;
	animation-play-state: running;           /* play the animation  */
}

.artilugio1 {
	background-image: url(../img/artilugio1.svg); /* PDF */
	top: 156px; left: 162px;
	width: 80px; height: 80px;
	animation: libroA 2s linear infinite;
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}

.artilugio2 {
	background-image: url(../img/artilugio2.svg); /* DOCX */
	bottom: 90px; left: 100px;
	width: 80px; height: 80px;
	animation: libroB 2s linear infinite;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.artilugio3 {
	background-image: url(../img/artilugio3.svg); /* XLS */
	top: 157px; right: 23px;
	width: 77px; height: 70px;
	animation: libroC 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@keyframes artilugioA {
	0%, 100% {top: 156px;}
	50% {top: 176px;}
}

@keyframes artilugioB {
	0%, 100% {bottom: 90px;}
	50% {bottom: 120px;}
}

@keyframes artilugioC {
	0%, 100% {top: 157px;}
	50% {top: 177px;}
}


/* anim KNOWLEDGE */
.libro1, .libro2, .libro3 {
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 5;
	animation-timing-function: ease;
	animation-play-state: running;           /* play the animation  */
}

.libro1 {
	background-image: url(../img/libro1.svg); /* PDF */
	top: 156px; left: 162px;
	width: 80px; height: 80px;
	animation: libroA 2s linear infinite;
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}

.libro2 {
	background-image: url(../img/libro2.svg); /* DOCX */
	bottom: 90px; left: 100px;
	width: 80px; height: 80px;
	animation: libroB 2s linear infinite;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.libro3 {
	background-image: url(../img/libro3.svg); /* XLS */
	top: 157px; right: 23px;
	width: 77px; height: 70px;
	animation: libroC 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@keyframes libroA {
	0%, 100% {top: 156px;}
	50% {top: 176px;}
}

@keyframes libroB {
	0%, 100% {bottom: 90px;}
	50% {bottom: 120px;}
}

@keyframes libroC {
	0%, 100% {top: 157px;}
	50% {top: 177px;}
}





/* anim UPDATE */
.edit, .mail, .send, .send1, .send2, .send3, .line {
	float: right;
	background-size: contain;
	background-repeat: no-repeat;

	animation-timing-function: ease;
	animation-play-state: running;           /* play the animation  */
}

.line {
	background-image: url(../img/line.svg); 

	width: 212px; height: 40px;
	float: left;
	left: 142px; top: 224px;
	z-index: 6;
	position: absolute;

	animation: linia 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.edit {
	background-image: url(../img/edit.svg); 

	width: 50px; height: 40px;
	float: left;
	left: 188px; top: 195px;
	z-index: 7;
	position: absolute;

	animation: blinker 1s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.send {
	background-image: url(../img/send.svg); 

	width: 86px; height: 125px;
	float: left;
	left: 185px; top: 20px;
	position: absolute;
	z-index: 1;
	opacity: 1;

	animation: sendD 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.send1 {
	background-image: url(../img/send.svg); 

	width: calc(86px * 0.9); height: calc(125px * 0.9);
	float: left;
	left: 5px; top: 10px;
	position: absolute;
	z-index: 1;
	opacity: 1;

	animation: sendA 2.5s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.send2 {
	background-image: url(../img/send.svg); 

	width: calc(86px * 0.8); height: calc(125px * 0.8);
	float: right;
	left: 80px; top: 15px;
	position: absolute;
	z-index: 1;
	opacity: 1;

	animation: sendB 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.send3 {
	background-image: url(../img/send.svg); 

	width: calc(86px * 0.6); height: calc(125px * 0.6);
	float: right;
	right: 5px; top: 25px;
	position: absolute;
	z-index: 1;
	opacity: 1;

	animation: sendC 3s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}


.mail {
	background-image: url(../img/mail.svg); 

	width: 242px; height: 208px;
	float: left;
	left: 126px; top: 130px;
	position: absolute;
	z-index: 5;

	animation: mail 2s linear infinite;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

@keyframes linia {
	0% {width: 0px; height: 40px;}
	55% {width: 212px; height: 40px;}
	95% {width: 212px; height: 40px;}
	100% {width: 0px;}
}

@keyframes edit {
	0%, 100% {}
	50% {}
}

@keyframes sendD {
	0% {top: 20px; opacity: 0;}
	50% {opacity: 1;}
	70% {opacity: 1;}
	100% {top: 155px; opacity: 0;}
}

@keyframes sendA {
	0% {top: 10px; opacity: 0;}
	50% {opacity: 1;}
	80% {opacity: 1;}
	60% {opacity: 1;}
	100% {top: 135px; opacity: 0;}
}

@keyframes sendB {
	0% {top: 30px; opacity: 0;}
	50% {opacity: 1;}
	80% {opacity: 1;}
	90% {top: 165px; opacity: 0;}
	100% {top: 165px; opacity: 0;}
}

@keyframes sendC {
	0% {top: 25px; opacity: 0;}
	50% {opacity: 1;}
	80% {opacity: 1;}
	100% {top: 160px; opacity: 0;}
}

@keyframes mail {
	0%, 100% {}
	50% {}
}

/* ################################ NEW MEDIA CARDS ################################ */



/* ################################ ANIMACIONES GENERALES ################################ */

.fade-in {
	animation: fadeIn ease 500ms;
	-webkit-animation: fadeIn ease 500ms;
	-moz-animation: fadeIn ease 500ms;
	-o-animation: fadeIn ease 500ms;
	-ms-animation: fadeIn ease 500ms;
}

.fade-in2 {
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;
}

.fade-in3 {
	animation: fadeIn ease 1.5s;
	-webkit-animation: fadeIn ease 1.5s;
	-moz-animation: fadeIn ease 1.5s;
	-o-animation: fadeIn ease 1.5s;
	-ms-animation: fadeIn ease 1.5s;
}


@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-moz-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-o-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

.slide-up {overflow:hidden; animation: 1s slide-up;  margin-top:0%;}

@keyframes slide-up {
  from {margin-top: 20%;	opacity: 0%; }
  to {margin-top: 0%;	opacity: 100%;}
}

/* ################################ end ANIMACIONES GENERALES ################################ */


/* ################################## NEW HOME 2022 ################################## */
.menu1 .row, .menu2 .row, .menu3 .row, .menu4 .row  {padding: 0px 24px;}
.menu1 .row .col-md-3, 
.menu3 .row .col-md-6, 
.menu3 .row .col-md-12, 
.menu4 .row .col-md-12 {
	margin: 1px 0px 0px 0px; padding: 1px; }

.tile {
	font-size: 28px;
	font-weight: 100;
	font-family: 'Oswald';
	color:#fff; 
	width: 100%; 
	height: 295px;
	background: #8c84d6; 
	border-radius: 0px; 

	display: table-cell;  
	display: block;

	vertical-align: bottom;
	padding: 20px;

	background-size: 70%;
	background-position: right;
	background-position-y: bottom;
	background-repeat: no-repeat; float: right;
}


.tile:hover {background-color: #7066CC; color:#f2f2f2; text-decoration: none;}

.tile2 {
		font-size: 20px;
		font-weight: 300;
		font-family: 'Roboto';
		color:#8c84d6; 
		width: 100%; 
		height: 148px;
		background: #fff; 
		border-radius: 0px; 

		display: table-cell;  
		display: block;

		vertical-align: bottom;
		padding: 20px;

		background-size: 70%;
		background-position: right;
		background-position-y: bottom;
		background-repeat: no-repeat; float: right;
}
.tile2:hover, .tile3:hover {text-decoration: none;}
.tile2 span, .tile3 span {font-size: 32px; font-family: 'Oswald';}


.tile3 {
	font-size: 20px;
	font-weight: 300;
	font-family: 'Roboto';
	color:#8c84d6; 
	width: 100%; 
	height: 250px;
	background: #fff; 
	border-radius: 0px; 

	display: table-cell;  
	display: block;

	vertical-align: bottom;
	padding: 20px;

	background-size: 70%;
	background-position: right;
	background-position-y: bottom;
	background-repeat: no-repeat; float: right;
}

.menu-empren {background-image: url(../img/person_empren.svg);} 
.menu-funds {background-image: url(../img/person_funds.svg);} 
.menu-panel {background-image: url(../img/person_panel.svg);} 
.menu-knowlege {background-image: url(../img/person_knowlege.svg);}
.menu-update {background-image: url(../img/person_update.svg);}

.menu-empren,.menu-funds,
.menu-panel,.menu-knowlege {
	-webkit-transition: background-image 0.25s; /* For Safari 3.0 to 6.0 */
	transition: background-image 0.25s; /* For modern browsers */
}  

.menu-empren:hover, 
.menu-funds:hover, 
.menu-panel:hover,
.menu-update:hover, 
.menu-knowlege:hover {background-image: url(../img/person_hover.svg);}

.menu-explicacio {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 18px; line-height: 1;}

.menu2 .row {min-height: 45vh;}
#load {font-size: 20px; font-weight: 300; font-family: 'Roboto', sans-serif; line-height: 1.5em;}
.load {background:#fff; padding: 30px;}
.title-h2 {margin: auto; width: 90%;}

.loadTitle{font-weight: 400; font-family: 'Oswald'; font-size: 48px;}

footer {margin-top: 120px;}
#sidebar-wrapper {background: #7066CC;}


/* EFECTO OCULTAR FONDO EN HOVER */
.child {
	align-self: flex-end;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	transform-origin: bottom;
}
.bounce:hover {
	animation-name: bounce;
	animation-timing-function: ease;
	animation-play-state: running;           /* play the animation  */

}
@keyframes bounce {
	0%   {transform: translateY(0);}
	50%  {transform: translateY(-20px);}
	100% {transform: translateY(0);}
}


/* EFECTO ESCRITURA */
.css-typing {margin: auto; width: 90%; margin-top: 20px;}

.bounce .css-typing p {
	font-family: "Roboto";
	font-weight: 400;
	font-size: 18px;
	white-space: nowrap;
	overflow: hidden;
	width: 0em;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}
.bounce:hover .css-typing p:nth-child(1) {
  width: 12em;
  -webkit-animation: type 1s steps(40, end);
  animation: type 1s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.bounce:hover .css-typing p:nth-child(2) {
	width: 12em;
	opacity: 0;
	-webkit-animation: type2 1s steps(40, end);
	animation: type2 1s steps(40, end);
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.bounce:hover .css-typing p:nth-child(3) {
	width: 12em;
	opacity: 0;
	-webkit-animation: type3 1s steps(20, end), blink .5s step-end infinite alternate;
	animation: type3 1s steps(20, end), blink .5s step-end infinite alternate;
	-webkit-animation-delay: 1s;
	animation-delay: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@keyframes type {
	0% {width: 0;}
	99.9% {border-right: .15em solid transparent;}
	100% {border: none;}
}

@-webkit-keyframes type {
	0% {width: 0;}
	99.9% {border-right: .15em solid transparent;}
	100% {border: none;}
}

@keyframes type2 {
	0% {width: 0;}
	1% {opacity: 1;}
	99.9% {border-right: .15em solid transparent;}
	100% {opacity: 1; border: none;}
}

@-webkit-keyframes type2 {
	0% {width: 0;}
	1% {opacity: 1;}
	99.9% {border-right: .15em solid transparent;}
	100% {opacity: 1; border: none;}
}

@keyframes type3 {
	0% {width: 0;}
	1% {opacity: 1;}
	100% {opacity: 1;}
}

@-webkit-keyframes type3 {
	0% {width: 0;}
	1% {opacity: 1;}
	100% {opacity: 1;}
}

@keyframes blink {
	50% {border-color: transparent;}
}
@-webkit-keyframes blink {
	50% {border-color: tranparent;}
}

/* FLECHA INTERMITENTE */
.bounce .flecha {opacity: 0;}

.bounce:hover .flecha {
	font-size: 50px; text-align: right; display: block; bottom: 30px; right: 30px; position: absolute;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;
	-moz-animation-duration: 2s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: blinker;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}


/* ###################### 1600px ################### */
@media (min-width: 1281px) and (max-width: 1600px) {
	.tile2 span, .tile3 span, .title-h2.slide-up, h3.loadTitle {font-size: 28px;}
	#load, .bounce .css-typing p, .tile3 p {font-size: 16px;}
}


/* ###################### 1280px ################### */
@media (min-width: 993px) and (max-width: 1280px) {
	.tile2 span, .tile3 span, .title-h2.slide-up, h3.loadTitle {font-size: 26px;}
	#load, .bounce .css-typing p, .tile3 p {font-size: 14px;}
}

/* ###################### 992px ################### */
@media (min-width: 768px) and (max-width: 992px) {
	.tile2 span, .tile3 span, .title-h2.slide-up, h3.loadTitle {font-size: 24px;}
	#load, .bounce .css-typing p, .tile3 p {font-size: 12px;}

	.menu2 .row {min-height: 400px;}

	.documento1 {
		top: 90px; left: 40px;
		width: 40px; height: 40px;
	}

	.documento2 {
		top: 100px; left: 172px;
		width: 28px; height: 40px;
	}

	.documento3 {
		top: 50px; right: 82px;
		width: 24px; height: 35px;
	}
}




/* ###################### PHONE ################### */
@media (max-width: 500px) {
	.tile {height: 175px; background-size: 35%;}
	.tile3 {height: 100%;} 
	.tile3 span, .tile3 img {margin: 20px 0px; display: block;}
	.css-typing {width: 70%; margin: 20px 0px 0px 20px;}
	.menu-explicacio {font-size: 14px; line-height: 1.2em; display: block; margin-top: 10px;}


	.bounce .css-typing p {
		font-family: "Roboto";
		font-weight: 400;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		width: 0em;
		-webkit-animation-play-state: paused;
		-moz-animation-play-state: paused;
		-o-animation-play-state: paused;
		animation-play-state: paused;
	}
	.bounce .css-typing p:nth-child(1) {
	  width: 12em;
	  -webkit-animation: type 1s steps(40, end);
	  animation: type 1s steps(40, end);
	  -webkit-animation-fill-mode: forwards;
	  animation-fill-mode: forwards;
	}

	.bounce .css-typing p:nth-child(2) {
		width: 12em;
		opacity: 0;
		-webkit-animation: type2 1s steps(40, end);
		animation: type2 1s steps(40, end);
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.bounce .css-typing p:nth-child(3) {
		width: 12em;
		opacity: 0;
		-webkit-animation: type3 1s steps(20, end), blink .5s step-end infinite alternate;
		animation: type3 1s steps(20, end), blink .5s step-end infinite alternate;
		-webkit-animation-delay: 1s;
		animation-delay: 2s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}
}



/* ######################## UPDATE INICIAR SESSIÓ LOGIN  ######################## */
.iniciar-sessio-update {background: #f2f2f2; padding: 80px 0px;}
.iniciar-sessio-update img {max-width: 200px;}
.iniciar-sessio-update .btn-secondary {
	color: #f2f2f2;
	background-color: #8c84d6;
	border-color: #8c84d6;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 24px;
}

.iniciar-sessio-update .btn-secondary:hover {
	color: #f2f2f2;
	background-color: #6e68a0;
	border-color: #6e68a0;
}

.enlace-update {font-size: 18px; line-height: 2em;}


/* ########################  SUBSCRIU-TE AL COMPÀS UPDATE ######################## */
.input-group input {
	border-radius: 0px;
	border: 1px solid #7066CC;
	background-color: #eaf0f0;
}

button.btn-outline-secondary {
	background: #7066CC;
	color: #fff;
	border-radius: 0px!important;
	text-align: center;
	margin: 0px 5px;
	max-height: 2.4rem!important;
}

.ambits-interes {
	line-height: 1.2em;
	padding: 15px;
	border: none;
	color: #7066CC;
}


/* ######################### SLIDER UPDATE ########################### */
a.btn-outline-secondary{
	width: 100%;
	background: #7066CC;
	color: #fff;
	border-radius: 0px!important;
	text-align: center;
	margin: 0px 5px;
	max-height: 2.4rem!important;
	font-size: 20px;
}

a.btn-outline-alt {
	background: #eaf0f0;
    color: #7066CC;
    text-align: center;
    margin: 0px 5px;
    border: 1px solid #7066CC;
    min-height: 40px;
    width: 100%;
    font-size: 20px;
}

.btn-secondary {
    background: #eaf0f0;
    color: #7066CC;
    text-align: center;
    margin: 0px 5px;
    border: 1px solid #7066CC;
    min-height: 40px;
    font-size: 20px;
}

.consulta-historic {text-align: center; font-size: 20px; margin-top: 14px; width: 100%;}


/* alertas registro usuarios */

.container-missatge {
	max-width: 80vw;
	margin-top: 20vh;
	margin-bottom: 20vh;
}

.missatge {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.missatge > p.butlleti_titol {
	font-family: 'Roboto',sans-serif;
	text-transform: initial;
	font-size: 2rem;
}