/*!
 * Start Bootstrap - Agency v5.2.1 (https://startbootstrap.com/template-overviews/agency)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
 */

body {
	overflow-x: hidden;
	font-family: OpenSans, sans-serif;}

p {line-height: 1.75;}
a {color: #475561;}
a:hover {color: #44617b;}

.text-primary {color: #44617b !important;}

h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.page-section {	padding: 100px 0;}

.page-section h2.section-heading {
	font-size: 40px;
	margin-top: 0;
	margin-bottom: 15px;}

.page-section h3.section-subheading {
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 75px;
	text-transform: none;
	font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';}

@media (min-width: 768px) {
	section {padding: 150px 0;}
}

::-moz-selection {background: #475561; text-shadow: none;}

::selection {background: #475561; text-shadow: none;}

img::-moz-selection {background: transparent;}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}

.btn {font-family: OpenSans, sans-serif; font-weight: 700;}

.btn-xl {
	font-size: 18px;
	padding: 20px 40px;}

.btn-primary {background-color: #475561; border-color: #475561;}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
	background-color: #fec810 !important;
	border-color: #fec810 !important;
	color: white;}

.btn-primary:active, .btn-primary:focus {
	-webkit-box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
	box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;}

#mainNav {background-color: #212529;}

#mainNav .navbar-toggler {
	font-size: 12px;
	right: 0;
	padding: 13px;
	text-transform: uppercase;
	color: white;
	border: 0;
	background-color: #475561;
	font-family: OpenSans, sans-serif;}

#mainNav .navbar-brand {
	color: #475561;
	font-family: 'Kaushan Script', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
	color: #44617b;}

#mainNav .navbar-nav .nav-item .nav-link {
	font-size: 90%;
	font-weight: 400;
	padding: 0.75em 0;
	letter-spacing: 1px;
	color: white;
	font-family: OpenSans, sans-serif;}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
	color: #475561;}

@media (min-width: 992px) {
	#mainNav {
		padding-top: 25px;
		padding-bottom: 25px;
		-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
		transition: padding-top 0.3s, padding-bottom 0.3s;
		border: none;
		background-color: transparent;}

	#mainNav .navbar-brand {
		font-size: 1.75em;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;}

	#mainNav .navbar-nav .nav-item .nav-link {
		padding: 1.1em 1em !important;}

	#mainNav.navbar-shrink {padding-top: 0; padding-bottom: 0; background-color: #212529;}

	#mainNav.navbar-shrink .navbar-brand {font-size: 1.25em; padding: 12px 0;}
}

header.masthead {
	text-align: center;
	color: white;
	background-image: url("../img/header-bg.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
}

header.masthead .intro-text {padding-top: 150px; padding-bottom: 100px;}

header.masthead .intro-text .intro-lead-in {
	font-size: 22px;
	font-style: italic;
	line-height: 1.25em;
	margin-bottom: 25px;
	font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

header.masthead .intro-text .intro-heading {
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	margin-bottom: 25px;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@media (min-width: 768px) {
	header.masthead .intro-text {
		padding-top: 300px;
		padding-bottom: 200px;
	}
	header.masthead .intro-text .intro-lead-in {
		font-size: 40px;
		font-style: italic;
		line-height: 1.25em;
		margin-bottom: 25px;
		font-family: OpenSans, sans-serif;}

	header.masthead .intro-text .intro-heading {
		font-size: 75px;
		font-weight: 700;
		line-height: 75px;
		margin-bottom: 50px;
		font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	}
}

#portfolio * {z-index: 2;}


.portfolio-modal .close-modal .lr {
	/* Safari and Chrome */
	z-index: 1051;
	width: 1px;
	height: 75px;
	margin-left: 35px;
	/* IE 9 */
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: #212529;
}

.portfolio-modal .close-modal .lr .rl {
	/* Safari and Chrome */
	z-index: 1052;
	width: 1px;
	height: 75px;
	/* IE 9 */
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	background-color: #212529;
}

section#contact {
	background-color: #212529;
	background-image: url("../img/map-image.png");
	background-repeat: no-repeat;
	background-position: center;}

section#contact .section-heading {color: #fff;}
section#contact .form-group {margin-bottom: 25px;}

section#contact .form-group input,
section#contact .form-group textarea {padding: 20px;}

section#contact .form-group input.form-control {height: auto;}
section#contact .form-group textarea.form-control {height: 248px;}

section#contact .form-control:focus {
	border-color: #475561;
	-webkit-box-shadow: none;
	box-shadow: none;
}

section#contact ::-webkit-input-placeholder {
	font-weight: 100!important;
	color: #ced4da;
	font-family: OpenSans, sans-serif;}

section#contact :-moz-placeholder {
	font-weight: 100!important;
	color: #ced4da;
	font-family: OpenSans, sans-serif;}

section#contact ::-moz-placeholder {
	font-weight: 100!important;
	color: #ced4da;
	font-family: OpenSans, sans-serif;}

section#contact :-ms-input-placeholder {
	font-weight: 100!important;
	color: #ced4da;
	font-family: OpenSans, sans-serif;}

.footer {padding: 25px 0; text-align: center;}

.footer span.copyright {
	font-size: 90%;
	line-height: 40px;
	text-transform: none;
	font-family: OpenSans, sans-serif;}

ul.social-buttons {margin-bottom: 0;}

ul.social-buttons li a {
	font-size: 20px;
	line-height: 50px;
	display: block;
	width: 50px;
	height: 50px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	color: white;
	border-radius: 100%;
	outline: none;
	background-color: #212529;}

ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
	background-color: #475561;}


a.link {text-decoration: underline;}
a.link:hover {text-decoration: none;}


.form-control.is-invalid, .was-validated .form-control:invalid {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.invalid-feedback {background-color: #fff; padding: 2px 4px;}


.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label
{color: #fff;}

/* #########################################################################################
   ######################################################################################### */

/*
color: #475561
hover: #44617b
*/

* {font-family: OpenSans, sans-serif;}
a {color: #475561;}
a:hover {color: #44617b;}
.hide-phone {display: block;}
.hide-desktop {display: none;}
.tablet {display: none;}
.no-tablet {display: flex;}

.centres_3_desktop {display: block;}
.centres_3_tablet {display: none;}
.centres_3_phone {display: none;}

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

::-webkit-scrollbar {width: 12px;background-color: #44617b;}

::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: none;
	background-color: #44617b;}

/*MENU*/
#mainNav.navbar-shrink {background-color: #f1f1f1;}
#mainNav.nav-link {color: #fff;}
#mainNav .navbar-nav .nav-item .nav-link {color: #475561;}
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {color: #475561; font-weight: 700;}
.fa-bars {font-weight: 600; font-size: 24px;}
.menu-separator{border-left: 1px solid #475561; max-height: 20px; transform: translateY(75%);}

/*BTN*/
.btn-primary {background-color: #475561; border-color: #475561; border-radius: 0px;}
.btn-primary:hover {background: #475561!important;}
.text-primary {color: #475561!important;}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
	background-color: #44617b!important;
	border-color: #44617b!important;
	color: #fff;}

.btn-secondary:hover {background: #44617b!important;}


/*SLIDER*/
header.masthead{
	text-align:center;
	color:#fff;
	background-image:url(../img/header-bg.jpg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center center;
	background-size:cover}

header.investigadors{
	text-align:center;
	color:#fff;
	background-image:url(../img/header-bg-i.jpg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center center;
	background-size:cover}

/*CARDS*/
.card {margin-bottom: 20px;}
.btn-link {color: #475561; padding: 0px!important;}
.btn-link:hover {color:#44617b; text-decoration: none;}

/*REPOSITORI CARDS*/
.card-block {padding: 20px;}

/*PROJECTES*/
.pr-desc {margin: 20px 40px 0px 40px; line-height: 1.6em}

/*SECTION*/
::selection {background: #475561!important; color:#fff;}
.page-section h2.section-heading {
	font-size: 30px; 
	color: #475561; 
	font-family: OpenSans; 
	font-weight: 300;
	text-transform: none!important;}
h4 {color: #475561; font-size: 24px; margin-top: 18px;}
.separator {margin-top: 80px;}

/*CENTRES & INSTITUCIONS*/
.container div div ul {
	margin: 0.75em 0;
	padding: 0 1em;
	list-style: none;}

.container div div li:before { 
	content: "";
	border-color: transparent #475561;
	border-style: solid;
	border-width: 0.25em 0 0.25em 0.32em;
	display: block;
	height: 0;
	width: 0;
	left: -1em;
	top: 0.9em;
	position: relative;}

/* REPOSITORI */
.repositori-card {background: #f1f1f1; border-radius: 10px; box-shadow: 0px 0px 38px -13px rgba(0,0,0,0.44); border: none;}
.repositori-card > div > div > img {border-radius: 10px;}
.container div div ul.repositori-list li {padding: 8px 8px; border-bottom: 1px solid rgba(0,0,0,.125);}
.container div div ul.repositori-list li:hover {background-color: #fff;}
.container div div ul.repositori-list li:before {border-width: 0rem;}

#clients {margin-bottom: 0px!important;}

.logos {margin-top: 40px;}
.clients {margin-bottom: 0px;}

#about {padding-bottom: 0px;}

.card-e {min-height: 550px;}

/*CONTACT*/
.form-12>div {max-width: 600px; margin: auto;}

.form-investigadors > div.form-group > label,
.form-investigadors > div.form-check > label.form-check-label,
.form-investigadors > div.form-group > input.form-control::placeholder,
.form-investigadors > div.form-group > textarea.form-control::placeholder {font-weight: 300!important; }

.form-investigadors > div.form-check {margin-top: 40px;}
.form-investigadors > div.form-group  {margin-top: 0px;}

.btn-secondary {background-color: #fff; color: #475561; border-radius: 0px;}
.text-muted-contacta{color: #fff!important;}
section#contact{background:#475561;}


.form-control {
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 100;
	line-height: 1.3;
	color: #111;
	background-color: #fff;
	background-clip: padding-box;
	border: 0px;
	border-bottom: 1px solid #ced4da;
	border-radius: .2rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

label {
	width: 100%;
	/*height: calc(1.5em + .75rem + 2px);*/
	height: auto;
	padding: .375rem .75rem;
	font-size: 1.1rem;
	
	line-height: 1.3;
	color: #fff;
	background-color: #475561;
	background-clip: padding-box;
	border: 0px;
	border-bottom: 0px solid #ced4da;
	border-radius: .0rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	font-weight: 800;
}


section#contact .form-group textarea.form-control {height: 150px; padding: 20px 10px;}
.confirm {color: #fff; text-align: center; margin-top: 20px; background: #50b550; padding: 10px 4px;}
.error {color: #fff; text-align: center; margin-top: 20px; background: #db4f40; padding: 10px 4px;}

section#contact > p {font-size: 12px;}

/* CHECKBOX */
/* The container */
.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark
{
  background-color: #26b743;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
  left: 11px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox-text {font-size: 1rem; line-height: 1.3; font-weight: 300;}

label.custom-checkbox {height: auto;}


/* BOOTSTRAP CUSTOM SELECT */
.btn {font-size: 1rem;
    font-weight: 100;
    line-height: 1.3; padding: 20px;}

.selectpicker,
.bootstrap-select>.dropdown-toggle,
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn),
.selectpicker, .bootstrap-select>.dropdown-toggle, .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
{
	width: 100%!important; 
	margin: auto!important; 
	max-width: 600px!important;
	border-radius: 0.1rem;
	background-color: #fff!important; 
	color:#999!important;}
}
.bootstrap-select .dropdown-menu, .dropdown-menu .show {max-width: 600px!important; min-width: 480px!important;}
.form-group .bootstrap-select, .form-horizontal .bootstrap-select, .form-inline .bootstrap-select {padding:0px!important;}
.dropdown-header {font-size: 0px;}

li a span.text{
	word-wrap: break-word;
    white-space: normal;
    width: 90%;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

input::placeholder, textarea::placeholder {color: #555!important; line-height: 1.5; font-weight: 400!important;}

/*FOOTER*/
footer {text-align: left;}
.social-buttons {float: right;}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a {
	background: none;
	border: 1px solid #475561;
	border-radius: 80px;
	color: #475561;
	font-size: 1.2em;
	line-height: 40px;
	width: 40px;
	height: 40px;}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
	background:#44617b; color: #fff;}
footer .container div div li:before { 
	content: "";
	border-color: transparent;
	border-style: solid;
	border-width: 0.25em 0 0.25em 0.32em;
	display: block;
	height: 0;
	width: 0;
	left: -1em;
	top: 0.9em;
	position: relative;}

/*FIRTS NAV BEFORE CHANGE*/
#mainNav {
	padding-top: 25px;
	padding-bottom: 25px;
	-webkit-transition: padding-top .3s,padding-bottom .3s;
	transition: color .3s,color .3s;
	border: none;
	background: #f1f1f1;
}

.logo {width: 100px; color: #fff; 
	-webkit-transition: padding-top .3s,padding-bottom .3s!important;
	transition: padding-top .3s,padding-bottom .3s!important;}

.footer-text {text-align: left; line-height: 1em;}

/*CAPTCHA*/
iframe {margin: auto; margin-bottom: 10px;}

/* ALERTS */
section.container-alert {margin: 2em auto; margin-top: 10vh; max-width: 1280px; padding: 0px;}

/*PHONE & TABLET*/
@media (max-width: 990px) and (min-width: 0px) {
	#mainNav .navbar-toggler {color: #475561; background: none; border-radius: 0px; padding: 10px;}
	#mainNav .navbar-nav .nav-item .nav-link {text-align: right;}
	.btn-secondary {width: 100%;}
	.hide-phone {display: none;}
	.hide-desktop {display: block;}
	.tablet {display: flex;}
	.no-tablet {display: none;}
	.card-icons {margin-bottom: 40px;}
	.card-icons p {text-align: left;}

	.centres_3_desktop {display: none;}
	.centres_3_tablet {display: block;}
	.centres_3_phone {display: none;}
	.card-e {min-height: 0px;}
}

/*PHONE*/
@media (max-width: 530px) and (min-width: 0px) 	{
	.hide-phone{display: none;}
	header.masthead .intro-text .intro-heading {font-size: 30px; line-height: 36px;}
	.container div div ul {text-align: center; width: 100%;}

	.container div div ul.repositori-list {text-align: left; list-style: none;}
	.repositori-list > li {text-align: left; list-style: none;}
	.card-icons {margin-top: 80px;}
	.pr-desc {margin: 20px 10px 0px 10px;}
	.footer span.copyright {text-align: center; line-height: 1em;}
	.clients {margin-bottom: 80px;}
	.card-body ul li {text-align: left;}
	.container-logos {padding-left: 0px; padding-right: 0px;}
	#portfolio div div div ul li {text-align: left;}
	.card-header h5 button {text-align: left;}
	#about {padding-bottom: 50px;}
	.footer-text {text-align: center; line-height: 1.5em;}
	.hide-desktop {display: block;}
	.no-tablet {display: none;}
	.card-icons p {text-align: center;}

	.centres_3_desktop {display: none;}
	.centres_3_tablet {display: none;}
	.centres_3_phone {display: block;}
	.card-e {min-height: 0px;}

	.phone-separator {border-top: 1px solid #475561;}
	.navbar-collapse {padding: 10px;}
}