/*
Theme Name: CV Twenty Twenty One Child Theme
Description: A child theme for Twenty Twenty One.
Author: Fernando Graells
Author URI: https://creacionvisual.net/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
html{
	font-size: 62.5%;
}
@font-face {
	font-family: 'Graphik';
	src: local('Graphik Semi bold'), local('Graphik-Semi-bold'),
		url('./fonts/Graphik-Semibold.woff2') format('woff2'),
		url('./fonts/Graphik-Semibold.woff') format('woff'),
		url('./fonts/Graphik-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Graphik';
	src: local('Graphik Medium'), local('Graphik-Medium'),
        url('./fonts/Graphik-Medium.woff2') format('woff2'),
        url('./fonts/Graphik-Medium.woff') format('woff'),
        url('./fonts/Graphik-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Graphik';
	src: local('Graphik Regular'), local('Graphik-Regular'),
		url('./fonts/Graphik-Regular.woff2') format('woff2'),
		url('./fonts/Graphik-Regular.woff') format('woff'),
		url('./fonts/Graphik-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

/* Variables */
:root {

	/* Font Family */
	--global--font-primary: var(--font-headings, 'Nunito Sans', sans-serif);
	--global--font-secondary: var(--font-base, 'Nunito Sans', sans-serif);
	
	/* Font Size */
	--global--font-size-base: 2rem;
	--global--font-size-xs: 1rem;
	--global--font-size-sm: 1.4rem;
	--global--font-size-md: 1.6rem;
	--global--font-size-lg: 2rem;
	--global--font-size-xl: 3.2rem;
	--global--font-size-xxl: 4rem;
	--global--font-size-xxxl: 5.6rem;
	--global--font-size-page-title: var(--global--font-size-xxxl);
	--global--letter-spacing: normal;

	/* Line Height */
	--global--line-height-body: 1.5;
	--global--line-height-heading: 1.3;
	--global--line-height-page-title: 1.1;
	
	/* Headings */
	--heading--font-family: var(--global--font-primary);
	--heading--font-size-h6: var(--global--font-size-xs);
	--heading--font-size-h5: var(--global--font-size-sm);
	--heading--font-size-h4: var(--global--font-size-lg);
	--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
	--heading--font-size-h2: var(--global--font-size-xxl);
	--heading--font-size-h1: var(--global--font-size-page-title);
	
	--heading--font-weight: 300;
	--heading--font-weight-page-title: 700;
	--heading--font-weight-strong: 600;
	
	/* Block: Latest posts */
	--latest-posts--title-font-family: var(--heading--font-family);
	--latest-posts--title-font-size: var(--heading--font-size-h3);
	--latest-posts--description-font-family: var(--global--font-secondary);
	--latest-posts--description-font-size: var(--global--font-size-sm);
	--list--font-family: var(--global--font-secondary);
	--definition-term--font-family: var(--global--font-primary);
	
	/* Colors */
	--global--color-black: #000;
	--global--color-dark-gray: #28303d;
	--global--color-gray: #777375;
	--global--color-light-gray: #f0f0f0;
	--global--color-green: #d1e4dd;
	--global--color-blue: #d1dfe4;
	--global--color-purple: #d1d1e4;
	--global--color-red: #e4d1d1;
	--global--color-orange: #D8A62B;
	--global--color-yellow: #eeeadd;
	--global--color-blanco-roto: #E4E3E3;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);
	
	/* Mint, default body background */
	--global--color-border: var(--global--color-orange);
	
	/* Buttons */
	--button--color-text: var(--global--color-background);
	--button--color-text-hover: var(--global--color-secondary);
	--button--color-text-active: var(--global--color-secondary);
	--button--color-background: var(--global--color-secondary);
	--button--color-background-active: var(--global--color-background);
	--button--font-family: var(--global--font-primary);
	--button--font-size: var(--global--font-size-md);
	--button--font-weight: 600;
	--button--line-height: 2.4rem;
	--button--border-width: 1px;
	--button--border-radius: 0;
	--button--padding-vertical: 15px;
	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
	
	/* Main navigation */
	--primary-nav--font-size: var(--global--font-size-md);
	--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
	--primary-nav--font-size-mobile: var(--global--font-size-sm);
	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
	--primary-nav--font-size-button: var(--global--font-size-xs);
	--primary-nav--font-style: normal;
	--primary-nav--font-style-sub-menu-mobile: normal;
	--primary-nav--font-weight: normal;
	--primary-nav--font-weight-button: 500;
	--primary-nav--color-link: var(--global--color-primary);
	--primary-nav--color-link-hover: var(--global--color-primary-hover);
	--primary-nav--color-text: var(--global--color-primary);
	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
	--primary-nav--border-color: var(--global--color-primary);
	
	/* Footer */
	--footer--color-text: var(--global--color-gray);
	--footer--color-link: var(--global--color-primary);
	--footer--color-link-hover: var(--global--color-primary-hover);
	--footer--font-family: var(--global--font-primary);
	--footer--font-size: var(--global--font-size-sm);
}
@media only screen and (max-width: 481px){
	:root {
		--global--font-size-page-title: var(--global--font-size-xl);
	}
}
@media only screen and (min-width: 1024px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 940px);
		--responsive--cabecera-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
	}
}

body {
	font-weight: 300;
	color: var(--global--color-primary);
	text-align: left;
	background-color: var(--global--color-background);
}
.site{
	background: linear-gradient(180deg, #222228 0%, #4E4E54 35%, #151414 100%);
}
@media only screen and (min-width: 482px){
	.site-header {
    	padding-bottom: calc(1.5 * var(--global--spacing-vertical));
	}
}
@media only screen and (min-width: 822px){
	.site-header {
    	padding-top: calc(1 * var(--global--spacing-vertical));
	}
}

/* **********
* MENU
*********** */
@media only screen and (max-width: 481px){	
	.primary-navigation-open .menu-button-container{
		background: none;
	}
}
.primary-navigation {
	text-transform:uppercase;
}
.primary-navigation .current-menu-item > a:first-child,
.primary-navigation .current_page_item > a:first-child,
.primary-navigation  .current-menu-ancestor > a,
.primary-navigation  .current-menu-ancestor{
	color: var(--global--color-orange);
}
.primary-navigation .current-menu-item > a:first-child:hover,
.primary-navigation .current_page_item > a:first-child:hover{
	text-decoration-style: solid;
}
.primary-navigation .current-menu-item > a:first-child,
.primary-navigation .current_page_item > a:first-child{
	text-decoration: none;
}
.primary-navigation .current-menu-item > a, .primary-navigation a{
	padding-bottom: 10px;
}
.primary-navigation a:hover{
	color: var(--global--color-orange);
	text-decoration: none;
	text-decoration-style: solid;
}
.primary-navigation > div > .menu-wrapper .sub-menu-toggle{
	width: auto;
}
.primary-navigation .sub-menu {
	border: 0;
}

@media only screen and (min-width: 482px){
	.primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
	.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
		border: 0;
	}
}
.has-background p{
	color: var(--global--color-blanco-roto);
}
/* *********
* HEADER
********** */
.singular .entry-header {
	border: 0;
	padding-bottom: 0;
}
.singular .entry-title{
	text-transform:uppercase;
	text-align:center;
}
.single-post h1.entry-title{
	text-transform: none;
	font-size: var(--global--font-size-xxl);
}

.entry-content h2.subtitle{
	text-transform: capitalize;
}

/* **********
* FOOTER
********** */
.site-footer{
	padding-bottom:0;
}
.footer-sma{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--global--spacing-horizontal);
}
.footer-sma .site-name{
	grid-column: span 4;
}
.footer-sma .footer-content{
	grid-column: span 8;
	color: var(--footer--color-text);
    font-family: var(--footer--font-family);
    font-size: var(--footer--font-size);
    line-height: var(--global--line-height-body);
    border-top: 2px solid var(--global--color-border);
	padding-top: var(--global--spacing-vertical);
}

.footer-sma .footer-navigation{
	float: right;
}
.no-widgets .site-footer {
    margin-top: var(--global--spacing-vertical);
}

nav.footer-navigation{
	display: inline-block;
}
.footer-navigation{
	margin-top: 0;
	margin-bottom: 0;
}
.footer-navigation-wrapper li .svg-icon{
	fill: #D8A62B;
}
.footer-navigation.legal-menu{
	float: none;
	margin-left: 40px;
}
.legal-menu .footer-navigation-wrapper li a {
    padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
    transition: transform 0.1s ease;
    color: var(--footer--color-link);
	font-size: var(--global--font-size-sm);
	text-decoration: none;
}

@media only screen and (max-width: 481px){	
	.footer-sma .site-name{
		grid-column: span 12;
	}
	.footer-sma .footer-content{
		grid-column: span 12;
		text-align: center;
	}
	.footer-sma .site-name .site-logo{
		text-align: center;
	}
	.footer-navigation.legal-menu{
		margin: 0 auto;
	}
	.footer-sma .footer-navigation {
		float: none;
		display: block;
	}
}
/* **********
* BLOQUES
********** */
/* ********* media-text ******** */
.wp-block-media-text.is-style-first-column-33{
	grid-template-columns: 33% auto;
}

/* ********* parrafo ******** */
.is-style-doble-columna{
	column-count: 2;
	column-gap: 40px;
}

/* ********** botones ********* */

.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
	background: none;
}
.wp-block-button.is-style-outline{
	border: 1px solid #E4E3E3;
	padding: 0.3rem 1.5rem;
}
.wp-block-button a.wp-block-button__link, .is-dark-theme .wp-block-contact-form-7-contact-form-selector input.wpcf7-form-control.wpcf7-submit{
	color: #2E2C2C;
	letter-spacing: -0.2px;
	padding: 0.7rem 1.2rem;
	background-color: var(--global--color-orange);
	border: 0;
}
.wp-block-button a.wp-block-button__link:hover, .is-dark-theme .wp-block-contact-form-7-contact-form-selector input.wpcf7-submit:hover{
	color: #fff !important;
	background-color: transparent !important;
	border: 1px solid #fff;
}
.wp-block-button.is-style-outline a.wp-block-button__link{
	color: #E4E3E3;
	letter-spacing: -0.2px;
	padding: 0.5rem 2.8rem 0.5rem 0;
	background: transparent url(./images/arrow-right_p.png) no-repeat right;
	border: 0;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
	color: var(--global--color-blanco-roto);
}

.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
	color: var(--global--color-blanco-roto);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:active{
	background-color: transparent !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:active{
	color: var(--global--color-orange) !important;
}
/* ************** cover ***************** */

.wp-block-cover.is-style-cover-bottom-right,
.wp-block-cover.is-style-cover-top-right,
.wp-block-cover.is-style-cover-top-left,
.wp-block-cover.is-style-cover-cabecera{
	background-color: transparent;
	justify-content: initial;
}
.wp-block-cover.is-style-cover-bottom-right{
    align-items: flex-start;
	padding-top: 0;
	min-height: fit-content;
}
.wp-block-cover.is-style-cover-cabecera{
	max-width: var(--responsive--cabecera-width) !important;
}
.wp-block-cover.is-style-cover-bottom-right img.wp-block-cover__image-background,
.wp-block-cover.is-style-cover-top-right img.wp-block-cover__image-background,
.wp-block-cover.is-style-cover-top-left img.wp-block-cover__image-background{
	width: 50%;
	height:auto;
}
.wp-block-cover.is-style-cover-top-left img.wp-block-cover__image-background{
	width: 60%;
	bottom:50%;
	right:50%;
}
.wp-block-cover.is-style-cover-cabecera img.wp-block-cover__image-background{
	width: 83.33%;
	height: auto;
	left: initial;
	background: linear-gradient(180deg, #282C33 0%, #232429 100%);
	box-shadow: 4px 6px 12px 0 rgba(0,0,0,0.24);
}
.wp-block-cover.is-style-cover-bottom-right img.wp-block-cover__image-background{
	top:50%;
	left:50%;
}
.wp-block-cover.is-style-cover-top-right img.wp-block-cover__image-background{
	bottom:50%;
	left:50%;
}

.wp-block-cover.is-style-cover-bottom-right .wp-block-cover__inner-container,
.wp-block-cover.is-style-cover-top-right .wp-block-cover__inner-container,
.wp-block-cover.is-style-cover-top-left .wp-block-cover__inner-container{
	background: linear-gradient(180deg,rgb(40,44,51) 0%,rgb(35,36,41) 100%) padding-box;
	box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.24);
    padding: var(--global--spacing-vertical);
	z-index: 100;
	position: relative;
	border: solid 0 transparent;
	/*border-width: 0 calc(1.25em + 6px) calc(1.25em + 6px) 0;*/
	border-width: 0;
	place-self: center;
	width: 66%;
}
.wp-block-cover.is-style-cover-top-left .wp-block-cover__inner-container{
    padding: calc(2 * var(--global--spacing-vertical));
	margin-left: 50%;
}
.wp-block-cover.is-style-cover-bottom-right .wp-block-cover__inner-container{
	margin-top: 0;
}
.wp-block-cover.is-style-cover-bottom-right::before,
.wp-block-cover.is-style-cover-top-right::before,
.wp-block-cover.is-style-cover-top-left::before,
.wp-block-cover.is-style-cover-cabecera::before{
	content: "";
    position: absolute;
    height: 70%;
    width: 65%;
    top: 5%;
    left: 16.66%;
    border: inherit;
    border-width: 0;
    box-shadow: inset 0 0 0 2px var(--global--color-orange);
    pointer-events: none;
    z-index: 1;
}
.wp-block-cover.is-style-cover-top-left::before{
    height: 90%;
}
.wp-block-cover.is-style-cover-cabecera::before{
	left: 0;
}
@media (max-width: 812px){
	.wp-block-cover.is-style-cover-bottom-right .wp-block-cover__inner-container,
	.wp-block-cover.is-style-cover-top-right .wp-block-cover__inner-container,
	.wp-block-cover.is-style-cover-top-left .wp-block-cover__inner-container{
		width: 90%;
	}
	.wp-block-cover.is-style-cover-bottom-right::before, .wp-block-cover.is-style-cover-top-right::before,
	.wp-block-cover.is-style-cover-top-left::before, .wp-block-cover.is-style-cover-cabecera::before {
		width: 80%;
	}
}

/* *************** imagen cabecera **************** */
.wp-block-image.is-style-cover-cabecera{
	background-color: transparent;
	justify-content: initial;
	max-width: var(--responsive--cabecera-width) !important;
	position: relative;
	text-align: right;
	margin-bottom: 10%;
}
.wp-block-image.is-style-cover-cabecera img{
	width: 83.33%;
	height: auto;
	left: initial;
	background: linear-gradient(180deg, #282C33 0%, #232429 100%);
	box-shadow: 4px 6px 12px 0 rgba(0,0,0,0.24);
}
.wp-block-image.is-style-cover-cabecera::before{
	content: "";
    position: absolute;
    height: 100%;
    width: 75%;
    top: 20%;
    left: 0;
    border: inherit;
    border-width: 0;
    box-shadow: inset 0 0 0 2px var(--global--color-orange);
    pointer-events: none;
    z-index: 1;
}
@media only screen and (max-width: 1024px){
	.wp-block-image.is-style-cover-cabecera{
		padding: 0 20px;
		margin-bottom: 15%;
	}
	.wp-block-image.is-style-cover-cabecera::before{
		left: 20px;
	}
}
/* ************** logos gallery ***************** */
.logos-gallery .wp-block-latest-posts__featured-image{
	height: 100% !important;
	max-height: 150px;
	padding: 25px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logos-gallery .wp-block-latest-posts__featured-image img{
	/*height: auto !important;*/	
	height: 100% !important;
    /*max-height: 100px;*/
    width: 100% !important;
	object-fit: contain;
    vertical-align: middle;
}
.logos-gallery.wp-block-latest-posts > li > a{
	font-size: var(--global--font-size-base);
	margin-bottom: 0px;
}
.logos-gallery .post-taxonomies{
	color: var(--global--color-gray);
	font-family: Graphik;
	font-size: var(--global--font-size-sm);
	margin: 0;
}

.logos-gallery .wp-block-latest-posts__post-full-content:before{
	content: "";
    display: block;
    /* margin: 0 auto; */
    width: 20%;
    padding-top: 15px;
    border-top: 2px solid var(--global--color-border);
}
/* Style The Dropdown Button */
.site .dropdown-filter button.dropbtn {
  background: transparent url(./images/filter-alt.svg) no-repeat 90% 50%;
  padding: 0.8rem 3.5rem 0.8rem 1.5rem;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid #E4E3E3;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown-filter {
  position: relative;
  display: inline-block;
  float: right;
}

/* Dropdown Content (Hidden by Default) */
ul.dropdown-content {
  display: none;
  position: absolute;
  padding: 0;
  background-color: var(--global--color-background);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content li {
	font-size: var(--global--font-size-sm);
    font-style: var(--primary-nav--font-style);
	color: var(--primary-nav--color-link-hover);
	padding: 0.8rem 1.6rem;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content li:hover {
	color: var(--global--color-orange);
	cursor: pointer;
}

/* Show the dropdown menu on hover */
.dropdown-filter:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-filter:hover .dropbtn {
  color: var(--global--color-orange);
}
/* ********
* HOME
********** */
.home .site-branding{
	display: none;
}
@media only screen and (min-width: 482px){
	.home .primary-navigation {
		margin-right: auto;
	}
}
.bg-mountain{
	background-image: url('./images/bg-mountains.png');
	/*background-color: rgba(41,41,41,0.52);*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.width-66{
	width:66%;
}
.width-10col{
	width: calc(83.33% - 30px);
}
@media only screen and (max-width: 482px){
	.width-10col{
		width: 100%;
	}
}
.alignmiddle .width-10col{
	max-width: fit-content !important;
}
.is-style-cover-top-left.width-10col{
	max-width: 83.33% !important;
}
/* ************** Latest news ************** */

.wp-block-latest-posts.is-grid li {
    margin: var(--global--spacing-vertical) 1.25em 1.25em 0;
}
.entry-content h2{
	text-transform: uppercase;
}
.wp-block-latest-posts .wp-block-latest-posts__post-date,
p.my-work {
    color: var(--global--color-gray);
    font-size: var(--global--font-size-md);
	font-weight: 600;
    line-height: var(--global--line-height-body);
    position: relative;
}

.wp-block-latest-posts .wp-block-latest-posts__post-date span {
    /*background-color: var(--global--color-background);*/
    padding-right: 60px;
}

.wp-block-latest-posts .wp-block-latest-posts__post-date:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 40%;
    right: 0;
    height: 0.75em;
    border-top: 2px solid var(--global--color-border);
    /*z-index: -1;*/
}
.wp-block-latest-posts a{
	text-decoration: none;
}
.wp-block-latest-posts a:hover, .wp-block-latest-posts a:focus{
	text-decoration: underline;
	color: var(--global--color-orange);
}

/* ***********
* ABOUT US
************ */
h3.subsection{
	font-size: var(--global--font-size-xl);
	font-weight: 600;
}
h3.subsection img{
	margin-right: 12px;
}
.personal-cv-redux{
	background: linear-gradient(180deg, #282C33 0%, #232429 100%);
	box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.24);
	padding: var(--global--spacing-vertical) 8.33%;
}
.personal-cv-redux{
	margin-bottom: 10% !important;
}
.has-media-on-the-right.personal-cv-redux{
	position: relative;
}
.personal-cv-redux .wp-block-media-text__media{
	position: absolute;
}
.has-media-on-the-right.personal-cv-redux .wp-block-media-text__media{
	right: 16%;
}/**/
.wp-block-media-text .wp-block-media-text__content h3.your-name{
	font-size: var(--global--font-size-xl);
	margin-bottom: calc( 0.3 * var(--global--spacing-vertical));
	padding-top: 24px;
	font-weight: 600;
}
.wp-block-media-text .wp-block-media-text__content h3.your-name::before {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    /*margin: 0 auto;*/ /* This will center the border. */
    width: 20%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-top: 4px solid var(--global--color-border); /* This creates the border. Replace black with whatever color you want. */
}
.wp-block-media-text .wp-block-media-text__content p.my-work {
	margin-top: 0;
	margin-bottom: calc( 1.5 * var(--global--spacing-vertical));
}
.hide{
	display:none;
}
.featherlight .featherlight-content{
	/*border: 1px solid orange;
	box-shadow: 5px 8px 16px 0 rgb(255 255 255 / 24%);*/
	background-color: var(--global--color-background) !important;
    padding: 50px !important;
}
.featherlight .featherlight-close-icon{
	background: none !important;
	color: #fff !important;
}
#cv-turner{
	background-color: var(--global--color-background);
}
.team-social-networks figure{
	display:inline;
}
/* *************
* FORMULARIOS DE CONTACTO
*************** */
.is-dark-theme .wp-block-contact-form-7-contact-form-selector label{
	color: var(--global--color-gray);
	padding-top: 24px;
}
.is-dark-theme .wp-block-contact-form-7-contact-form-selector input, .is-dark-theme .wp-block-contact-form-7-contact-form-selector textarea{
	background:none;
	color: #fff;
	border: 0;
	border-bottom: 2px solid #5F5B5D;
}