/*
blau: #BCE4FA
blau 2: #009FE3
rosa: #E6007E

blau hover #92cae8
*/


/*
lila claro (orientativo): #b0aab6;
lila oscuro (orientativo): #38375f;
ocre oscuro (orientativo): #a29254;
ocre claro (orientativo): #bb9c5c;
*/


/*_______________HOME_______________*/
section.resume-section {max-width: 100%; background: #fff;}

/*chapter selector / cards*/
.book-section {padding: 10% 5%;}
.card {width: 22%; margin:15px; border-radius: 0px;}
.card-title {font-family: 'Basic', sans-serif; text-transform: none; font-size: 16px;}

.book1 .card-body {background: #BCE4FA;}
.book1 .card-body a {background: #E6007E;}
.book1 .card-body h5 {color: #E6007E;}

.book2 .card-body {background: #f2b872;}
.book2 .card-body a {background: #009d70;}
.book2 .card-body h5 {color: #009d70;}

.book3 .card-body {background: #cdcde8;}
.book3 .card-body a {background: #bba72e;}
.book3 .card-body h5 {color: #bba72e;}

.book4 .card-body {background: #dce6cc;}
.book4 .card-body a {background: #b01f48;}
.book4 .card-body h5 {color: #b01f48;}

.book5 .card-body{background: #85AF28;}
.book5 .card-body a{background: #7F4610;}
.book5 .card-body h5 {color: #7F4610;}

.book6 .card-body{background: #2986C5;}
.book6 .card-body a{background: #D5B300;}
.book6 .card-body h5 {color: #D5B300;}





.fa, .fas {color: #fdfdfd;}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
	background: #111; color: #fdfdfd;}



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

.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____________*/
.hide-desktop {display: none;}
.hide-phone {display: block;}

.btn-primary {background: #E6007E; border: #E6007E;}
h2 {color:#E6007E; font-family: 'Basic', sans-serif; text-transform: none; font-size: 30px;}
h3 {font-family: 'Basic', sans-serif; text-transform: none; color: #009FE3; font-weight: 700; font-size: 16px;}
h4 {font-family: 'Basic', sans-serif; text-transform: none; color: #868e96; font-weight: 700; font-size: 16px; margin-bottom: 0px;}
ul {list-style-type: none;}
.change-display {display: flex;}
span {font-weight: 800;}
.contingut {margin-bottom: 0px;}

/*NAVBAR*/
.profile-phone {display: none;}
.bg-primary {background: #f2f2f2!important;}
.navbar-dark {color:#fff;}
.navbar-dark .navbar-brand {color: #fff;}
.navbar-dark .navbar-nav .nav-link {color: #585858;}
.navbar-dark .navbar-toggler {color: #E6007E;}
.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: #E6007E;}
/*.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: 14px;}

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






@media (min-width: 1601px) and (max-width: 1769px) {
	.card {width: 40%;}
	div.section-right {border: 1px solid #e6e6e6; padding: 30px;}
}



/*TABLET HORITZONTAL*/
@media (min-width: 800px) and (max-width: 1600px) {

	/*menu section*/
	.book-section {position: absolute; padding-left: 25rem;}
	.card {width: 40%!important;}
	body {padding-left: 0px;}
	.hide-desktop {display: block;}
	.hide-phone {display: none;}
	#sideNav {width: 17rem;}
	h5.card-title {font-size: 14px;}
	
}




@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) {

	/*menu section*/
	.book-section {padding: 2% 5%; margin: 0px;}
	.card {width: 45%!important;}

	.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: 100%;}
	#sideNav .d-block {font-size: 25px;}
	.fa-ellipsis-v {font-size: 25px;}
	.fa, .fas {color: #424242;}
	.card-body a .fa, .card-body a .fas {color: #fff;}
	
	.nav-item {text-align: right;}
	.credits {text-align: right; padding-top: 1%;}
	.img-menu {position: flex; float: right;}
	.title-phone {color: #424242;}
	.navbar-collapse, .navbar-nav {
		background: #111!important; 
		width: 100%; 
		padding: 0px 10px;
		margin-top: 20px;
	}

	.credits {text-align: right;}
	#sideNav .navbar-nav .nav-item .nav-link {text-align: right;}
	.menu-separator-2 {margin-top: 20px;}
	.hide-desktop {display: block;}
	.hide-phone {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: 15px; color: #424242;}
	.nav-item {text-align: right;}
	.credits {text-align: right; padding-right: 0px; padding-top: 20px;}
	a:active, a:focus, a:hover {color: #bce4fa;}
	.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;
	}


	/*cards*/
	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: #bce4fa; padding: 0px 15px 15px 15px;}
	.row, .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: #bce4fa;
		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: #e6007d; color: #fff;}
	.dropup:hover .dropup-content {display: block;}
	.dropup:hover .dropbtn {color: #e6007d;}


	.dropup, .dropup button {width: 200px;}
	.dropdown-menu.show {
		background: #BCE4FA;
		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: center;
	}

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

	/*menu section*/
	.book-section {margin: 0px; padding: 0px;}
	.card {width: 100%; margin: 5%;}
	button i.fa, button i.fas {color: #424242;}
}