/*toggle*/
.select {background: #848484; color: #fff; text-align: center; display: block; padding: 50px 0px;}
.topnav {background-color: #87B11E;}

.topnav a {
	float: right;
	display: block;
	color: #fff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}
.topnav a:hover {background-color: #ddd; color: blue;}
.topnav a.active {background-color: #4CAF50; color: red;}
.topnav .icon {display: none;}
.topnav a {display: none;}
.topnav a.icon {text-align: center; display: block;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {position: absolute; right: 0; top: 0;}
.topnav.responsive a {float: none;display: block;text-align: center;}


/*____________GENERAL____________*/
a {color: #7F4500;}
.hide-desktop {display: none;}
.hide-phone {display: block;}
.btn-primary {background: #87B11E; border: #87B11E;}
h2 {color:#87B11E; font-family: 'Basic', sans-serif; text-transform: none; font-size: 30px; text-align: left;}
h2.green {color:#87B11E; text-align: center;}
h2.green-2, h3.green-2, p.green-2 {color:#7F4500; text-align: left;}
h3 {font-family: 'Basic', sans-serif; text-transform: none; color: #87B11E; font-weight: 700; font-size: 14px;}
h3.green {color:#f5e5e5; text-align: center;}
h3.activitat {text-align: center; font-size: 40px; color: #111; font-weight: 100; text-transform: uppercase;}
h4 {font-family: 'Basic', sans-serif; text-transform: none; color: #565656; font-weight: 700; font-size: 14px; margin: 14px 0px;}
ul {list-style-type: none;}
.dot-list {list-style: disc;}
.dot-list li {margin-bottom: 8px;}
.number-list {list-style: decimal;}
.number-list li {margin-bottom: 8px;}
p, ul li {font-size: 14px; line-height: 1.3em;}
.change-display {display: flex;}
span {font-weight: 800;}
i {font-style: oblique;}
.contingut {margin-bottom: 0px;}
.cursiva {font-style: oblique; color: #87B11E; text-align: center; padding: 0% 10%;}
.cursiva2 {font-style: oblique; color: #87B11E; text-align: left; padding-left: 10%;}
.citar {color: #87B11E; text-align: left; padding-left: 10%;}
.separator {border-top: 4px dotted;}
strong {color: #565656;}

/*NAVBAR*/
.profile-phone {display: none;}
.bg-primary {background: #f5e5e5!important;}
.navbar-dark {color:#585858;}
.navbar-dark .navbar-brand {color: #000;}
.navbar-dark .navbar-nav .nav-link {color: #585858;}
.navbar-dark .navbar-toggler {color: #87B11E;}
.menu-separator {padding-top: 0px;}
.menu-separator-2 {margin-top: 15%; text-align: left; padding-left: 10px;}
.img-menu {width: 70px; align-self: center; padding-top: 15px;}
.credits {padding-top: 15%; padding-left: 5%; text-align: left;}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color: #87B11E;}
/*.nav-item a {font-size: 0.8rem}*/
#sideNav .navbar-nav .nav-item .nav-link {
	font-weight: 600;
	letter-spacing: .05rem;
	text-transform: inherit;
	font-size: 13px;
	line-height: 1rem}

#navbarSupportedContent > ul > li > a {padding: 10px 0px 0px 20px; text-align: left;}

/*_______________HOME_______________*/
section.resume-section {max-width: 100%; background: #fff;}
div.section-right {
	position: fixed;
	border: 1px solid #e6e6e6;
	padding: 40px;
	overflow: scroll;
	display: block;
	margin-top: 30px;
	transform: translateX(-50px);
	float: right;
	right: 0;
	background: #fff;
	height: 90vh;}

/* CUSTOM SCROLLBAR */
#custom-scrollbar::-webkit-scrollbar-track {border-radius: 10px; background-color: #fff;}
#custom-scrollbar::-webkit-scrollbar {width: 10px; background-color: #fff;}
#custom-scrollbar::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #f5e5e5;}

.home-background {
	background-image: url(../img/portada.svg);
	background-size: 70vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right;}

.left-section {margin-left: 40px;}

/*JAVASCRIPT*/
.p {color: #868e96; font-weight: 400;}
.llistat {color: #868e96; font-weight: 700; line-height: 8px; padding-top: 10px; border-top: 2px solid #ccc;}
.titol-h2 {color: #f5e5e5; font-weight: 700;}
.titol-h3 {font-weight: 700;}
.bullet {padding-left: 40px;}
.peu {color: #868e96; font-weight: 400; font-size: 12px; line-height: 14px; border-top: 1px solid;
 margin-top: 20px;}
.peu2 {color: #868e96; font-weight: 400; font-size: 12px; line-height: 14px; margin-top: 20px;}
.svg-mod {padding: 10px 0px;}

/*cards*/
.card {margin:15px; width: 18rem; border-radius: 0px;}
.card-body {background: #f5e5e5;}
.card-full {width: 58rem; margin:15px; margin-top: 50px;}
.card-full .card-body {background: #dce6cc;}
.card-full:hover .card-body {background: #87B11E;}
.card-full .card-body h5.card-title {color:#87B11E;}
.card-full:hover .card-body h5.card-title {color:#fff;}
h5.card-title {color:#7F4500; font-family: 'Basic', sans-serif; text-transform: none; font-size: 16px; margin-bottom: 0px;}
/*#nutrients1 h5, #nutrients2 h5, #nutrients3 h5, #nutrients4 h5, #gasos1 h5, #gasos2 h5, #gasos3 h5, #gasos4 h5, #informacio1 h5, #informacio2 h5, #informacio3 h5, #informacio4 h5 {padding-left: 10%;}*/
#nutrients1, #nutrients2, #nutrients3, #nutrients4, #gasos1, #gasos2, #gasos3, #gasos4, #informacio1, #informacio2, #informacio3, #informacio4 {
	border-left: 10px solid #dce6cc;}
h5.card-title:hover, .card-body:hover > h5 {color:#fff;}
.card-body:hover {background: #7F4500; text-decoration: none;}
a .card-text {color: #111; font-size: 14px;}
a .card-text:hover {text-decoration: none;}

.annex {
	max-width: 38rem; 
	width: 58rem;
    margin: 15px;
    margin-top: 50px;}
.annex .card-body{background-color: #dce6cc;}
.annex .card-body:hover{background-color: #87B11E;}


table {margin-bottom: 20px;}
.table-investigar tr {
	border-top: 1px solid black; 
	border-bottom: 1px solid black;
}
.table-investigar tr td {vertical-align: initial; padding: 10px 10px 0px 10px;}

/* tables final de tema */
table.end {margin-bottom: 20px; font-size: 12px; line-height: 14px; }
.end tr td, .end tr th {border: 1px solid #dee2e6;}
.selected, .no-slected {min-height: 10px; min-width: 10px;}
.no-selected {background-color: #ffffff;}
.selected {background-color: #87B11E;}

.requadre {background: #dce6cc; padding: 20px;}
.requadre a {color: #333; overflow-wrap: break-word; word-wrap: break-word;}


@media (min-width: 1601px) and (max-width: 1769px) {
	.card {width: 40%;}
	.card-full {width: 84%; margin:15px;}
	.card-full .card-body {background: #e4d8a7;}
	.card-full:hover .card-body {background: #7F4500;}
	.card-full .card-body h5.card-title {color:#87B11E;}
	.card-full:hover .card-body h5.card-title {color:#111;}
	div.section-right {border: 1px solid #e6e6e6; padding: 30px;}
}

/*TABLET HORITZONTAL*/
@media (min-width: 800px) and (max-width: 1675px) {
	h2 {font-size: 24px;}
	#sideNav {width: 13rem;}
	.left-section {margin: 0px; padding: 0px;}
	div.section-right {margin-top: 4px; height: 95vh; padding: 30px;}
	.card {width: 70%; margin: 5px;}
	.card-body {padding: 0.8rem}
	h5.card-title {font-size: 14px; margin: 0px;}
	p {font-size: 14px; line-height: 1.4em;}
	a .card-text {display: none; font-size: 0px;}
	.left-section {position: absolute;}
	.left-section, .card, .card-body {width: 280px;}
	section.resume-section {padding-top: 1rem!important; padding-bottom: 1rem!important;}
}

@media (min-width: 800px) and (max-width: 990px) {
	.profile-phone {display: inline-block; height: 40px; border-radius: 150px;}
	#sideNav {width: 100%;}
}
/*TABLET VERTICAL*/
@media (min-width: 768px) and (max-width: 799px) {
	.profile-phone {display: inline-block; height: 40px; border-radius: 150px; margin-right: 20px;}
	h2 {font-size: 28px;}
	section.resume-section {padding-top: 40px!important; max-width: 98%;}
	#sideNav .d-block {font-size: 25px;}
	.fa-ellipsis-v {font-size: 25px;}
	.left-section {margin-left: 30px;}
	.card {width: 100%; margin: 8px;}
	h5.card-title {font-size: 16px; margin: 0px;}
	a .card-text {display: none;}
	div.section-right {padding: 20px; margin-top: 10px; height: 88vh;}
	.nav-item {text-align: right;}
	.credits {text-align: right; padding-top: 1%;}
	.img-menu {position: flex; float: right;}
	.navbar-collapse, .navbar-nav {
		background: #f5e5e5!important; 
		width: 100%; 
		padding: 0px 10px;
		margin-top: 20px;
	}
	.left-section, .card, .card-body {width: 230px;}
	.credits {text-align: right;}
	#sideNav .navbar-nav .nav-item .nav-link {text-align: right;}
	.menu-separator-2 {margin-top: 20px;}
	.hide-tablet{display: none;}
}

/*PHONE*/
@media (min-width: 320px) and (max-width: 767px) {

	/*____________GENERAL____________*/
	.hide-desktop {display: block;}
	.hide-phone {display: none;}
	h1 {font-size: 32px; line-height: 36px; padding: 80px 30% 40px 10px;}
	img {margin-bottom: 10px;}
	p, h1, h2, h3, h4, h5, img {padding-left: 20px; padding-right: 20px;}
	ul {padding-right: 20px;}
	a img {padding: 0px;}

	/*NAVBAR*/
	.profile-phone {display: inline-block; height: 40px; border-radius:150px; margin-right: 20px;}
	.menu-separator {padding-top: 20px;}
	.img-menu {width: 90px; align-self: flex-end; padding: 10px 0px 0px 0px;}
	.img-menu, .img-menu a, .img-menu a img {float: right;}
	.credits {padding-top: 40px;}
	.title-phone {font-size: 9px;}
	.nav-item {text-align: right;}
	.credits {text-align: right; padding-right: 0px; padding-top: 20px;}
	a:active, a:focus, a:hover {color: #f5e5e5;}
	.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {color: #020200;}
	#navbarSupportedContent > ul > li > a {padding: 10px 0px 0px 20px; text-align: right;}


	/*______________HOME______________*/
	section.resume-section {max-width: 100%; background: #fff; padding-top: 20px !important;}
	.home-background {background-size: 50vw; background-position: right 10px top 80px;}
	div.section-right {
		border: 0px solid #e6e6e6;
		margin: 0px!important;
		padding: 0px;
		transform: translateX(0px);
		width: 100%;
		height: 100%;
		overflow: overlay;
		float: none;
		display: block;
		position: fixed;
		right: 0;
		left: 0;
	}

	/*scrollbar hide*/
	#custom-scrollbar::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #f5e5e5; z-index: -2;}
	#custom-scrollbar::-webkit-scrollbar {width: 0px; background-color: none;}

	/*other*/
	.img-portada {min-height: 65px; margin-top: 20px;}
	#load {display: block;}
	.contingut {margin-bottom: 80px;}
	.svg-mod {padding: 10px 0px; width: 70%; height: auto; text-align: center; transform: translateX(25%);}
	.svg-mod p {padding: 0px;}
	#prev {text-align: left;}
	#next {text-align: right;}

	/*cards*/
	.card {margin:10px; width: 100%;}
	a .card-text {display: none;}
	p, ul li {font-size: 14px; line-height: 1.3em;}
	h2 {font-size: 22px; margin-bottom: 5px; margin-top: 20px;}
	a i {color: #222;}

	/*menu*/
	.selector-menu .col-2 {padding: 0px;}
	.selector-menu {background: #f5e5e5; padding: 0px 15px 15px 15px;}
	.row .selector-menu {margin: 0px!important;}
	.selector-item {padding: 0px; margin: 0px;}
	.selector-title {margin: 0px; padding: 0px;}
	.menu-separator-2 {display: contents; padding-top: 10px;}
	.img-menu {padding: 0px;}
	#navbarSupportedContent > ul > p.menu-separator-2 > a {padding-top: 30px;}
	.menu-separator {padding-top: 0px;}
	.credits {padding-top: 5px;}

	.phone-selector {
		position: sticky;
		z-index: 2;
		bottom: 70px;
		text-align: center;
		width: 100%!important;
		margin: 0px;
		font-weight: 700;
		left: 0;
		right: 0;
		float: right;
	}

	/*dropup menu*/
	.dropbtn {
		background: none; 
		border: none; 
		color: #868e96; 
		font-family: 'Muli', sans-serif; 
		font-weight: 600; 
		width: 66vw; 
		padding: 0px; 
		margin: 0px;
	}

	.dropup {position: relative; display: inline-block;}

	.dropup-content {
		display: none;
		position: absolute;
		background-color: #f5e5e5;
		width: 100vw;
		bottom: 10px;
		z-index: -5;
		transform: translate(-20vw,-14px);
		max-height: 60vh;
		font-size: 14px;
		overflow: scroll;}

	.dropup-content a {
		color: #585858;
		font-weight: 800;
		padding: 4px 0px;
		text-decoration: none;
		text-transform: uppercase;
		display: block;}

	.dropup-content a:hover {background-color: #7F4500; color: #fff;}
	.dropup:hover .dropup-content {display: block;}
	.dropup:hover .dropbtn {color: #7F4500;}


	.dropup, .dropup button {width: 200px;}
	.dropdown-menu.show {
		background: #f5e5e5;
		border: none;
		border-radius: 0px;
		height: auto;
		max-height: 60vh;
		overflow-x: hidden;
		left: 4px!important;
		float: left;
		margin-bottom: 5px;
	}
	.dropdown-menu.show a {
		display: block;
		padding: 10px 0px;
		border-bottom: 1px solid #94bbca;
		width: 100vw;
		color: #333;
		font-weight: 300;
		text-align: left;
		padding-left: 10%;
	}

	.dropup, .dropup button {padding-top: 6px; background: #f5e5e5; border: 0px solid;}
	#prev, #next {padding-top: 12px;}

	/* CUSTOM SCROLLBAR */
	#menu-scrollbar::-webkit-scrollbar-track {border-radius: 0px; background-color: #f5e5e5;}
	#menu-scrollbar::-webkit-scrollbar {width: 10px; background-color: #f5e5e5;}
	#menu-scrollbar::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #7F4500;}
}

/*FIX CARDS RESOLUTION*/
@media (min-width: 1240px) and (max-width: 1675px) {.left-section, .card {width: 65%;} .card-body {width: 100%;}}
@media (min-width: 800px) and (max-width: 991px) {.fix-r1 {margin-left: 18px;}}

/*ULTRAWIDE*/
@media (min-width: 1640px) and (max-width: 2149px) {.card-full {max-width: 38rem;}}
@media (min-width: 2150px) and (max-width: 2560px) {.card-full {max-width: 58rem;}}
@media (min-width: 2570px) and (max-width: 2780px) {.card-full {max-width: 80rem;}}
@media (min-width: 2781px) and (max-width: 3421px) {.card-full {min-width: 78rem;}}

.table_2{
	border: 1px solid black;
}