/*=================================
||			Index 
==================================*/
/*
|	0. Font import
|	1. Global

		1.1 Button
		1.2 Header
		1.3 Typography
		1.4 Common properties
		1.5 Footer
		1.6 Section Spacing

|	2. Home page

		2.1 Top info
		2.2 Header
		2.3 Cite
		2.4 Intro
		2.5 Feature
		2.6 Portfolio
		2.7 Twitter feed
		2.8 Business cards

|	3. About Page
		
		3.1 Story

|	4. 404 Page

|	5. Contact

		5.1 Leaflet map
*/

/*================================= 0. Font import  ===========================================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

/*==================================  1. Global  ========================================*/

:root {
	--main-bg-color: #ffffff;
	--light-bg-color: #fafafa;
	--highlight-bg-color: #72246c;
	--dark-bg-color: #72246c;
	--alfa-bg-color: rgb(251, 249, 251, 0.5); /* #fbf9fb con transparencia */
	--alfa-black-bg-color: rgb(0, 0, 0, 0.45); /* #000000 con transparencia */

	/*--main-btn-bg-color: #deefc8;*/
	--main-btn-bg-color: #72246c;
	--main-btn-alternative-bg-color: #78be20;
	/*--main-btn-hover-color: #ffffff;*/

	--main-body-text-color: #6a6a6a;
	--light-body-text-color: #ffffff;
	--main-heading-text-color: #72246c;
	--light-heading-text-color: #ffffff;
	--link-text-color: #6a6a6a;
	--light-link-text-color: #ffffff;
	--link-hover-text-color: #78be20;
	--cite-text-color: #6a6a6a;
	--cite-icon-color: #deefc8;

	--separator-color: #78be20;
	--timeline-color: #deefc8;
	--bullet-color: #72246c;
	--shadow-color: #eee;
	--border-color: #e1e1e1;
}

body {
	background-color: var(--main-bg-color);
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	font-weight: 200;
	letter-spacing: 0.03rem;
	line-height: 1.45;
	color: var(--main-body-text-color);
}

*:hover {
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
}

html {
	font-size: 0.875rem; /* 14px */
}

/* =-=--=-=-=-=-=-==-=-=-=-  1.1 Button   =-=-=-=-==-=-==-====-==-=- */

.btn {
	border-radius: 0px;
	margin-right: 15px; 
	padding: 10px 15px;
}

.btn span {
	font-size: 1.2rem;
}

.btn span::after {
	align-self: center;
	padding: 0 0.25rem;
	color: var(--light-link-text-color);
	font-family: 'bootstrap-icons';
	font-size: 0.8rem;
	content: "\f285";
}

.btn-green {
	background-color: var(--main-btn-alternative-bg-color);
	color: var(--light-link-text-color);
}

.btn-green:hover {
	filter: brightness(110%);
	color: var(--light-link-text-color);
}

.btn-violet {
	background-color: var(--main-btn-bg-color);
	color: var(--light-link-text-color);
}

.btn-violet:hover {
	filter: brightness(130%);
	color: var(--light-link-text-color);
}

/* phone portrait and landscape */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px),
only screen and (max-height: 480px),
only screen and (max-device-height: 480px) {
	
	/* Reducción del 30% */
	
	.btn span {
		font-size: 0.84rem;
	}
	
	.btn span::after {
		font-size: 0.56rem;
	}
}

/* =-=--=-=-=-=-=-==-=-=-=-  1.2 Header   =-=-=-=-==-=-==-====-==-=- */

#about-page .page-head {
	background: url(../images/policy-bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.page-head .header-wrapper {
	background-color: var(--alfa-black-bg-color);
	position: relative;
	padding: 65px 0px;
}

/* =-=--=-=-=-=-=-==-=-=-=-  1.3 Typography   =-=-=-=-==-=-==-====-==-=- */

p {
	color: var(--main-body-text-color);
	font-weight: 400;
	line-height: 1.7rem;
	margin-bottom: 1rem;
}

h1, h2, h3, h4 {
	color: var(--main-heading-text-color);
	margin: 1.7rem 0 0rem;
	font-weight: inherit;
	line-height: 4rem;
}

h1 {
	font-size: 3.157rem;
	line-height: 4.75rem;
	margin: 3.4rem 0 1.2rem;
}

h2 {
	font-size: 2.369rem;
	font-weight: 100;
}

h3 {
	font-size: 1.777rem;
	font-weight: 400;
}

h4 {
	font-size: 1.333rem;
	font-weight: 400;
}

h5 {
	color: var(--main-heading-text-color);
	font-size: 1.15rem;
	font-weight: 400;
}

/* =-=-=-=--=-=-==-=-=-=-=-  1.4 Other common properties    =-=-=-=-=-=-=-=-==-=-=-=-=-=-=*/

a {
	color: var(--link-text-color);
}

a:hover {
	color: var(--link-hover-text-color);
	text-decoration: none;
}

.breadcrumb {
	align-items: center;
	display: flex;
	background-color: transparent;
	font-size: 15px;
	float: right;
  	text-transform: uppercase;
}

.breadcrumb a {
	color: var(--light-body-text-color);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--link-hover-text-color);
}

.breadcrumb>.active {
	color: var(--light-link-text-color);
}

.breadcrumb>li+li:before {
	padding: 0 0.5rem;
	color: var(--light-link-text-color);
	font-family: 'bootstrap-icons';
	font-size: 0.75rem;
	content: "\f138";
}

.breadcrumb li {
	align-items: center;
	display: flex;
	list-style: none;
}

.section-title {
	display: flex;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 1rem;
}

.section-sub-title {
	color: var(--main-body-text-color);
	display: flex;
	justify-content: center;
	margin-bottom: 4rem;
	padding-left: 30%;
	padding-right: 30%;
	text-align: center;
	word-spacing: 1px;
	position: relative;
}

.section-sub-title::after {
	content:' ';
	position: absolute;
	top:100%;
	left:50%;
	width: 50px;
	border:1px solid var(--separator-color);
	border-radius:4px;
	transform:translateX(-50%);
	
}

/* ipad portrait */
@media only screen and (min-width: 481px) and (max-width : 1200px),
only screen and (min-device-width: 481px) and (max-device-width : 1200px)
{
	/* reducción 20% */
	.breadcrumb {
		font-size: 12px;
	}

	.breadcrumb>li+li:before {
		font-size: 0.60rem;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	/* reducción 40% */
	.breadcrumb {
		font-size: 9px;
	}

	.breadcrumb>li+li:before {
		font-size: 0.45rem;
	}
}

/* =-=--=-=-=-=-=-==-=-=-=- 1.5  Footer   =-=-=-=-==-=-==-====-==-=- */

footer {
	background-color: var(--main-bg-color);
	color: var(--main-heading-text-color);
	margin: 4.5rem;
}

.footer-widget h4{
	margin-top: 0;
}

footer .footer-links {
	padding: 0px;
}

.footer-links li {
	list-style: none;
	margin-bottom: 10px; 
}

.footer-links li a {
	color: var(--link-text-color);
	font-weight: 400;
	text-decoration: none;
}

.footer-links li:hover a {
	color: var(--link-hover-text-color);
}

.footer-links li a:before {
	color: var(--bullet-color);
	font-family: 'bootstrap-icons';
	font-size: 0.75rem;
	content: "\f231";
	margin-right: 10px;
}

.footer-contact-info {
}

.footer-contact-item{
	align-items: center;
	display: flex;
	margin-bottom: 1rem;
}

.footer-contact-text{
	color: var(--main-body-text-color);
	font-weight: 400;
	text-decoration: none;
}

.footer-contact-text a {
	text-decoration: none;
	color: var(--main-body-text-color);
}

.footer-contact-text a:hover {
	text-decoration: none;
	color: var(--link-hover-text-color);
}

.footer-contact-icon {
	display: flex;
	width: 5rem;
	height:5rem;
	align-items: center;
	justify-content: center;
	background-color: var(--dark-bg-color);
	color: var(--light-body-text-color);
	font-size: 2rem;
	font-weight:100;
	margin-right: 1.5rem;
	flex-shrink: 0;
}

/* Smart phones and tablets */
@media only screen and (max-width: 1200px),
only screen and (max-device-width: 1200px)
{
	.map-canvas {
		margin-top: 2.5rem;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	footer{
		margin: 4.5rem 5% 0;
	}

	.footer-contact-text{
		font-size: 0.9rem;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{
	footer{
		margin: 4.5rem 5% 0;
	}

	.footer-contact-text{
		font-size: 0.7rem;
	}
}

.footer-nav {
	background-color: var(--dark-bg-color);
	border-radius: 0px;
	margin: 4.5rem 0 0;
	padding: 2.5rem 0 0;
}

.footer-nav .navbar-brand a {
	color: var(--light-body-text-color);
    font-size: 1rem;
	text-decoration: none;
	text-transform: capitalize;
}

.footer-nav .navbar-brand a:hover {
    background-color: transparent;
    color: var(--link-hover-text-color);
}

/* Smart phones and tablets */
@media only screen and (max-width: 1200px),
only screen and (max-device-width: 1200px)
{
	.footer-nav .navbar-brand a {
    	font-size: 0.7rem;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	.footer-nav {
		padding: 2.5rem 5% 0;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{
	.footer-nav {
		padding: 2.5rem 5% 0;
	}
}

/* =-=--=-=-=-=-=-==-=-=-=-  1.6 Section-spacing   =-=-=-=-==-=-==-====-==-=- */

section {
	margin: 2rem 0;
	padding: 2.5rem 0;
}

.headline {
	margin-bottom: 2rem;
	padding-left: 10%;
	padding-right: 10%;
}

/*================================================================
							2. Home
==================================================================*/

/*------------------------------ 2.1 Top Info ----------------------------------*/

.top-info {
	display:flex;
	flex-direction: row;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.top-info img {
	height: 53px;
	width: 80px;
}

.top-info-item{
	align-items: center;
	margin-left: 6rem;
}

.top-info-text{
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	color: var(--main-heading-text-color);
	line-height: 1.5;
	text-decoration: none;
}

.top-info-text a {
	text-decoration: none;
	color: var(--main-heading-text-color);
}

.top-info-text a:hover {
	color: var(--link-hover-text-color);
	text-decoration: none;
}

.top-info-icon {
	display: flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	background-color: var(--dark-bg-color);
	color: var(--light-body-text-color);
	font-size: 1.2rem;
	font-weight:100;
	margin-right: 1.5rem;
}

/* ipad portrait */
@media only screen and (min-width: 481px) and (max-width : 1200px),
only screen and (min-device-width: 481px) and (max-device-width : 1200px)
{
	/* Reducción del 20% */
	.top-info {
		margin: 2rem;
	}

	/* Reducción del 20% */
	.top-info img {
		height: 42px;
		width: 64px;
	}
}

/* phone portrait and landscape */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px),
only screen and (max-height: 480px),
only screen and (max-device-height: 480px) {
	
	/* Reducción del 40% */
	.top-info {
		margin: 1.5rem;
	}

	/* Reducción del 40% */
	.top-info img {
		height: 32px;
		width: 48px;
	}

	/* Reducción del 30% */
	.top-info-text {
		font-size: 0.7rem;
	}

	/* Reducción del 40% */
	.top-info-icon {
		width: 1.2rem;
		height: 1.2rem;
		font-size: 0.72rem;
		margin-right: 0.9rem;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px) {

	/* Reducción del 50% */
	.top-info{
		margin: 1.25rem;
	}

	/* Reducción del 50% */
	.top-info img {
		height: 26px;
		width: 40px;
	}

	/* Reducción del 40% */
	.top-info-text{
		font-size: 0.6rem;
	}

	/* Reducción del 50% */
	.top-info-icon{
		width: 1rem;
		height: 1rem;
		font-size: 0.6rem;
		margin-right: 0.75rem;
	}
}

/* Watch */
@media only screen and (max-width : 319px),
only screen and (max-device-width : 319px){
	.top-info-icon {
		display: none;
	}

	/* Reducción del 50% */
	.top-info img {
		height: 26px;
		width: 40px;
	}
	
	.top-info-text {
		display: none;
	}
}

/*------------------------------ 2.2 Header -----------------------------------*/

#header {
    background: linear-gradient(
		to right, 
		rgba(255,255,255,1) 0%, 
		rgba(255,255,255,1) 15%, 
		rgba(255,255,255,1) 15%, 
		rgba(255,255,255,0) 60%,
		rgba(255,255,255,0) 60%,
		rgba(255,255,255,0) 100%),
		url(../images/home_person_writing_r.jpg) no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    display: table;
	height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
}

.header-wrapper-background {
	color: var(--main-heading-text-color);
	max-width: 700px;
	position: absolute;
	top: 50%;
  	transform: translate(0, -50%);
	width: 50%;
}

.header-wrapper-inner {
    display: table-cell;
	text-align: left;
    vertical-align: middle;
}

.header-wrapper-inner .welcome-speech {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.header-wrapper-inner .welcome-speech h1 {
	color: var(--main-heading-text-color);
	font-size: 5rem;
	font-weight: 100;
    margin-top: 0;
    text-transform: uppercase;
}

.header-wrapper-inner .welcome-speech h3 {
	color: var(--main-heading-text-color);
	font-size: 2rem;
	letter-spacing: 2px;
	margin-bottom: 3.5rem;
	text-transform: uppercase;
}

.header-wrapper-inner .welcome-speech p {
	color: var(--main-heading-text-color);
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 3.5rem;
}

/* ipad portrait */
@media only screen and (min-width: 481px) and (max-width : 1200px),
only screen and (min-device-width: 481px) and (max-device-width : 1200px)
{
	#header {
		background: linear-gradient(
		to right, 
		rgba(255,255,255,1) 0%, 
		rgba(255,255,255,1) 15%, 
		rgba(255,255,255,1) 15%, 
		rgba(255,255,255,0) 70%,
		rgba(255,255,255,0) 70%,
		rgba(255,255,255,0) 100%),
		url(../images/home_person_writing_r.jpg) no-repeat center center;
    	background-size: cover;
	}

	.header-wrapper-background {
		margin-left: 1.5rem;
		width: 80%;
	}

	/* reducción 20% */
	.header-wrapper-inner .welcome-speech h1 {
		font-size: 4rem;
		line-height: 3.8rem;
	}
	
	/* reducción 20% */
	.header-wrapper-inner .welcome-speech h3 {
		font-size: 1.6rem;
	}

	/* reducción 20% */
	.header-wrapper-inner .welcome-speech .btn {
		font-size: 0.96rem;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	#header {
		background: linear-gradient(
		to right, 
		rgba(255,255,255,1) 0%, 
		rgba(255,255,255,0) 100%),
		url(../images/home_person_writing_r.jpg) no-repeat center center;
    	background-size: cover;
	}

	.header-wrapper-background {
		margin-left: 1.5rem;
		width: 90%;
	}

	/* reducción 50% */
	.header-wrapper-inner .welcome-speech h1 {
		font-size: 2.5rem;
		line-height: 2.375rem;
	}
	
	/* reducción 60% */
	.header-wrapper-inner .welcome-speech h3 {
		font-size: 0.8rem;
		font-weight: 500;
	}

	/* reducción 40% */
	.header-wrapper-inner .welcome-speech .btn {
		font-size: 0.72rem;
	}
}

/* phone landscape */
@media only screen and (max-height: 480px),
only screen and (max-device-height: 480px) {
	
	.header-wrapper-background {
		transform: translate(0, -40%);
		width: 50%;
	}

	/* reducción 50% */
	.header-wrapper-inner .welcome-speech h1 {
		font-size: 2.5rem;
		line-height: 2.375rem;
	}
	
	/* reducción 50% */
	.header-wrapper-inner .welcome-speech h3 {
		font-size: 1rem;
		font-weight: 500;
		margin-top: -1rem;
		margin-bottom: 1rem;
	}

	/* reducción 40% */
	.header-wrapper-inner .welcome-speech .btn {
		font-size: 0.72rem;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{
	.header-wrapper-background {
		margin-left: 1.5rem;
		width: 90%;
	}

	/* reducción 50% */
	.header-wrapper-inner .welcome-speech h1 {
		font-size: 2.5rem;
		line-height: 2.375rem;
	}
	
	/* reducción 60% */
	.header-wrapper-inner .welcome-speech h3 {
		font-size: 0.8rem;
		font-weight: 500;
	}

	/* reducción 40% */
	.header-wrapper-inner .welcome-speech .btn {
		font-size: 0.72rem;
	}
}

/* small phone landscape */
@media only screen and (max-height: 350px),
only screen and (max-device-height: 350px) {

	.header-wrapper-background {
		width: 100%;
	}
}

/*--------------------------- 2.3 Cite -------------------------------------*/

.cite {
	background-color: var(--main-bg-color);
	margin-left: 3rem;
	margin-right: 3rem;
	padding-top: 5rem;
}

.cite blockquote {
	
}

.cite blockquote p {
	color: var(--cite-text-color);
	font-size: 2rem;
	line-height: 2.5rem;
}

blockquote p:before {
	color: var(--cite-icon-color);
	content: "''";
	font-family: 'Times New Roman', Times, serif;
    font-size: 7rem;
    margin-left: -2.5rem;
    position: absolute;
}

.cite .blockquote-footer {
	background-color: transparent;
	color: var(--main-heading-text-color);
	font-size: 1.2rem;
	padding-top: 1rem;
}

/* ipad portrait */
@media only screen and (min-width: 481px) and (max-width : 1200px),
only screen and (min-device-width: 481px) and (max-device-width : 1200px)
{
	/* Reducción de un 20% en todo */

	.cite blockquote p {
		font-size: 1.6rem;
		line-height: 2rem;
	}
	
	blockquote p:before {
		font-size: 5.6rem;
	}
	
	.cite .blockquote-footer {
		font-size: 0.96rem;
		padding-top: 0.8rem;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	/* Reducción de un 40% en todo */

	.cite blockquote p {
		font-size: 1.2rem;
		line-height: 1.50rem;
	}
	
	blockquote p:before {
		font-size: 4.2rem;
	}
	
	.cite .blockquote-footer {
		font-size: 0.72rem;
		padding-top: 0.6rem;
	}
	
}

/* phone landscape */
@media only screen and (max-height: 480px),
only screen and (max-device-height: 480px)
{

	/* Reducción de un 40% en todo */

	.cite blockquote p {
		font-size: 1.2rem;
		line-height: 1.50rem;
	}
	
	blockquote p:before {
		font-size: 4.2rem;
	}
	
	.cite .blockquote-footer {
		font-size: 0.72rem;
		padding-top: 0.6rem;
	}
	
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{

	/* Reducción de un 40% en todo */

	.cite blockquote p {
		font-size: 1.2rem;
		line-height: 1.50rem;
	}
	
	blockquote p:before {
		font-size: 4.2rem;
	}
	
	.cite .blockquote-footer {
		font-size: 0.72rem;
		padding-top: 0.6rem;
	}

}

/*--------------------------- 2.4 Intro  ------------------------------------*/

.container-fluid-intro {
	padding-left: 0px;
	padding-right: 0px;
}

.intro {
	background-color: var(--main-bg-color);
}

.row-intro {
	background-color: var(--highlight-bg-color);
}

.intro img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.linea-tiempo {
	position: relative;
	height: 100%;
}
	  
.linea-tiempo::before {
	content: '';
	position: absolute;
	width: 3px;
	background-color: var(--timeline-color);
	left: 50%;
	height: 100%;
	border-radius: 10px;
}
	  
.momento {
	margin: 3rem 0rem;
	position: relative;
	width: 45%;
}
	  
.momento:nth-child(even) {
	left: 55%;
}
	  
.momento::after {
	content: '';
	position: absolute;
	top: calc(50% + 10px);
	right: calc(-11.11% - 11.5px);
	height: 20px;
	width: 20px;
	background-color: var(--timeline-color);
	border-radius: 50%;
}
	  
.momento:nth-child(even)::after {
	left: calc(-11.11% - 8.5px);
}
	
.momento h4 {
	color: var(--light-body-text-color);
	margin-bottom: -10px;
	text-align: left;
}
	  
.momento .descripcion {
	color: var(--light-body-text-color);
	font-weight: 300;
}
	  
.momento .descripcion::after {
	content: '';
	position: absolute;
	right: -10px;
	top: calc(50% + 10px);
	height: 0;
	width: 0;
}

.intro .intro-description {
	padding-left: 50px;
	padding-right: 50px;
}

.intro .intro-description h2 {
	color: var(--light-body-text-color);
	text-transform: uppercase;
}

.intro .intro-description p {
	color: var(--light-body-text-color);
}

/* Smart phones and tablets */
@media only screen and (max-width: 1200px),
only screen and (max-device-width: 1200px)
{		
	.linea-tiempo::before {
		left: 0;
		height: 100%;
	}
	
	.momento {
		margin: 3rem 2rem;
		width: 95%;
	}

	.momento:nth-child(even) {
		left: 0;
	}

	.momento::after {
		top: 18px;
		left: -37px;
	}

	.momento:nth-child(even)::after {
		left: -37px;
	}
}

/* ipad portrait */
@media only screen and (min-width: 481px) and (max-width : 1200px),
only screen and (min-device-width: 481px) and (max-device-width : 1200px)
{
	/* Reducimos un 20% */
	.intro .intro-description h2 {
		font-size: 1.9rem;
	}
	
	.momento h3 {
		font-size: 1.42rem;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	/* Reducimos un 30% */
	.intro .intro-description h2 {
		font-size: 1.66rem;
	}

	.momento h3 {
		font-size: 1.24rem;
	}
}

/* phone landscape */
@media only screen and (max-height: 480px),
only screen and (max-device-height: 480px)
{
	/* Reducimos un 30% */
	.intro .intro-description h2 {
		font-size: 1.66rem;
	}

	.momento h3 {
		font-size: 1.24rem;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{
	/* Reducimos un 40% */
	.intro .intro-description h2 {
		font-size: 1.42rem;
	}

	.momento h3 {
		font-size: 1.07rem;
	}
}

/*--------------------------  2.5 Feature  ----------------------------------*/

.feature {
	background-color: var(--main-bg-color);
	padding-bottom: 0;
}

.feature-content {
    padding-bottom: 2.5rem;
}

.feature-icon-box {
	display: flex;
	justify-content: center;
}

.feature-icon {
	background-color: var(--light-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 50%;
	color: var(--main-heading-text-color);
    font-size: 45px;
    height: 90px;
    padding: 10px 0px 15px 3px;
    width: 90px;
}

.feature-heading {
    margin-bottom: 0px;
    margin-top: 15px;
}

.feature-description {
	font-size: 1.1rem;
    padding: 0px 10px 10px 10px;
	margin-top: -10px;
    margin-bottom: 0px;
}

/*---------------------------  2.6 Portfolio  ---------------------------------*/

#portfolio {
	background-color: var(--light-bg-color);
}

#portfolio .card {
	padding: 1%;
	background-color: var(--light-bg-color);
	border-width: 0px;
	margin-bottom: 2.5rem;
	width: 100%;
}

#portfolio .card p {
	margin-bottom: 0;
	text-transform: none;
}

#portfolio .card .card-img-top {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

#portfolio .card-body {
	padding-left: 0;
	padding-right: 0;
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	#portfolio .card {
		padding-left: 5%;
		padding-right: 5%;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{
	#portfolio .card {
		padding-left: 5%;
		padding-right: 5%;
	}
}

/*---------------------------  2.7 Twitter feed -------------------------------*/

#twit-feed {
	background: url(../images/twitter-feed-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0rem;
	margin-top: -2rem; /* Le quitamos el margen que le hemos puesto por defecto a las secciones. */
	margin-bottom: -2rem;
}

.row-twit-feed {
	padding: 4rem 0rem;
}

.twit-content {
	color: var(--light-body-text-color);
	margin: 0px 75px;
}

.twit-content .twit-icon i {
    font-size: 2rem;
}

.twit-content h3 {
	color: var(--light-link-text-color);
    font-weight: 100;
	line-height: 1.3;
	margin-bottom: 2rem;
}

.twit-content p {
	color: var(--light-body-text-color);
    font-size: 1rem;
    font-weight: 100;
}

.twit-content h3:hover {
	color: var(--link-hover-text-color);
}

.twit-content a:link{
	text-decoration: none;
}

/*---------------------------  2.8 Business cards ------------------------------*/

#business-cards {
	background-color: var(--light-bg-color);
}

.business-card {
	background: linear-gradient(
		to bottom, 
		var(--main-bg-color) 0%, 
		var(--main-bg-color) 40%, 
		var(--dark-bg-color) 40%, 
		var(--dark-bg-color) 100%
	);
	background-color: var(--main-bg-color);
    box-shadow: 1px 3px 7px var(--shadow-color);
    margin-bottom: 2.714rem;
	max-width: 300px;
	height: 450px;
	width: 100%;
	justify-content: center;
}

.business-card-container {
	display: flex;
	justify-content: center;
}

.business-card-body {
	padding-left: 40px;
	padding-top: 50px;
}

.business-card-body .business-card-person {
	padding-left: 55px;
	padding-right: 30px;
	min-height: 130px;
}

.business-card-body .business-card-person .card-title {
	color: var(--light-body-text-color);
	font-weight: 600;
	padding-top: 2rem;
}

.business-card-body .business-card-person .card-text {
	line-height: 1.2rem;
	color:var(--light-body-text-color);
	font-size: 0.9rem;
}

.business-card-body .business-card-contact-info {
	height: 35px;
	align-items: center;
	display: flex;
	margin-bottom: 0.5rem;
	color: var(--light-body-text-color);
}

.business-card-body .business-card-contact-info .business-card-contact-icon {
	display: flex;
	width: 35px;
	height: 35px;
	align-items: center;
	justify-content: center;
	background-color: var(--main-bg-color); 
	color: var(--dark-bg-color);
	font-size: 1.5rem;
	font-weight:100;
	flex-shrink: 0;
}

.business-card-logo {
	display: flex;
	align-items:center;
	justify-content: center;
}

.business-card-logo::after {
	content:' ';
	position: absolute;
	top:calc(40% - 10px);
	left:-1px;
	width: 40px;
	border:10px solid var(--separator-color);
	border-radius: 0px;
}

.business-card-body::before {
	content:' ';
	position: absolute;
	top:calc(40% - 2px);
	left: 95px;
	right: -1px;
	width: auto;
	border: 2px solid var(--separator-color);
	border-radius: 0px;
}

.business-card-logo img {
	max-height: 120px;
	object-fit:scale-down;
	padding: 0.5rem;
	width: 60%;
}

.business-card-contact-text .card-text {
	font-size: 0.9rem;
	line-height: 1.5;
	padding-left: 20px;
	padding-right: 30px;
	color: var(--light-body-text-color);
	text-decoration: none;
}

.business-card-contact-text .card-text a {
	text-decoration: none;
	color: var(--light-body-text-color);
}

.business-card-contact-text .card-text a:hover {
	text-decoration: none;
	color: var(--link-hover-text-color);
}

/*=============================================================================
						3. About page
=============================================================================*/

/*-----------------------------  3.1 Story   ------------------------------------*/

.story {
	background-color: var(--light-bg-color);
	margin-top: 0; /* Le quitamos el margen que le hemos puesto por defecto a las secciones. */
	padding-bottom: 4rem;
}

.story .headline {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
	text-align: center;
}

.story .headline h3 {
	line-height: 2rem;
}

.story .story-description {
	padding-left: 10%;
	padding-right: 10%;
	text-align: justify;
}

.story .story-description li {
	font-weight: 400;
	list-style: none;
}

.story .story-description li:before {
	padding: 0 0.5rem 0 0;
	color: var(--bullet-color);
	font-family: 'bootstrap-icons';
	font-size: 0.75rem;
	content: "\f231";
}

/* ipad portrait */
@media only screen and (min-width: 481px) and (max-width : 1200px),
only screen and (min-device-width: 481px) and (max-device-width : 1200px)
{
	/* reducción 20% */
	.story .headline h3 {
		font-size: 1.6rem;
		letter-spacing: 2px;
	}
}

/* phone portrait */
@media only screen and (min-width: 360px) and (max-width : 480px),
only screen and (min-device-width: 360px) and (max-device-width : 480px)
{
	/* reducción 40% */
	.story .headline h3 {
		font-size: 1.2rem;
		letter-spacing: 1.8px;
	}
}

/* phone landscape */
@media only screen and (max-height: 480px),
only screen and (max-device-height: 480px)
{
	/* reducción 50% */
	.story .headline h3 {
		font-size: 1rem;
		letter-spacing: 1.5px;
	}
}

/* small phone portrait */
@media only screen and (min-width: 320px) and (max-width : 359px),
only screen and (min-device-width: 320px) and (max-device-width : 359px)
{
	/* reducción 50% */
	.story .headline h3 {
		font-size: 1rem;
		letter-spacing: 1.5px;
	}
}

/*==================================================================================
					4. 404 page
==================================================================================---*/

#error-page .error-page-btn {
	padding: 4rem 0 3rem;
}

/*================================================================
						5. Contact page
==================================================================*/

/*---------------------------  5.1 Leaflet map --------------------------*/

.map-canvas 
{
    width: 100%;
	height: 400px;
}