@charset "utf-8";
/* BANNER */
a {text-decoration: none; color: inherit}

.textobanner {font-family: Satoshi-Italic; line-height: 1; font-size: 1vw; color: black; text-align: center; float: left; width: 10%}
.textobanner2{font-family: Satoshi-Italic; line-height: 1; font-size: 1vw; color: black; text-align: center; float: left; width: 10%; display: none}
/* Diseñadora multidisciplinar, fotógrafa y especialista en visualización arquitectónica. */
.textodescripcion {font-family: Satoshi-Light; line-height: 1; font-size: 1.7vw; text-align: center; }
/* NOMBRE */
.YongshiGranada {font-family: CabinetGrotesk-Regular; line-height: 1; margin: 0; font-size: 11vw; text-align: center; }
.YongshiGranadamovil { display: none }
/* texto BIENVENIDOS A MI PORFOLIO */
.textoporfolio {font-family: Satoshi-Regular; line-height: 1; font-size: 1.3vw; text-align: center; margin-bottom: 0px; position: absolute; z-index: 5}
.botonporfolio:hover {-webkit-filter: blur(5px);filter: blur(5px);} 
.botonporfolio:active {-webkit-filter: blur(5px);filter: blur(5px);}
.botonporfolio {text-decoration: none; color: #000000; font-family: helvetica-neue-lt-pro, sans-serif; font-weight: 800; font-style: italic; line-height: 2vw; font-size: 1.3vw; text-align: center; margin-bottom: 0px}
/* menu de abajo. */
.textorow4:hover {font-family: Satoshi-Bold;}
.textorow4:active {font-family: Satoshi-Bold;}
.textorow4 {font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}

.FRAN, .ABOUTME {text-align: right; float: right }

.Eng {display: block; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}
.EngMovil {display: none; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}

.Fran {display: block; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}
.FranMovil {display: none; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}

.FechaMovil {display: none; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}
.Fecha{display: block; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}

.AboutmeMovil {display: none; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}
.Aboutme {display: block; font-family: Satoshi-Regular; line-height: 1; font-size: 1vw; margin: 0; text-align: center; width: auto; text-decoration: none; color: inherit;}
/* YONGSHI GRANADA arriba a la izquierda. */
.texto1C {font-family: CabinetGrotesk-Regular;  line-height: 1; margin: 0; font-size: 4vw; text-align: left;}
.texto1CMovil {display: none; font-family: CabinetGrotesk-Regular;  line-height: 1; margin: 0; font-size: vw; text-align: left;}
/* mail, linkedin, instagram y behance */
.textocontacto {font-family: Satoshi-Light;  line-height: 1.3; margin: 0; font-size: 1vw; text-align: left;}
.textocontactolink {font-family: Satoshi-LightItalic;  line-height: 1.3; margin: 0; font-size: 1vw; text-align: left; color: inherit; text-decoration: none}
.textocontactolink:hover {color: #000000} 
.textocontactolink:active {color: #00FFEB}
/* menu proyectos: BRAND, MOTION, POSTER Y PHTOTGRAFIA */
.textoMenu {font-family: Satoshi-MediumItalic; line-height: 1.3; font-size: 1.1vw; text-align: left; margin: 0}
.texto3D {font-family: Satoshi-MediumItalic; line-height: 1.3; font-size: 1.1vw; text-align: left; margin: 0; margin-left: 0.1vw }
.textoMenu[aria-expanded="true"], 
.textoMenu.is-open {filter: blur(5px); -webkit-filter: blur(5px);}
/* texto del submenu de cada proyecto */
.textoseccion {font-family: Satoshi-Regular; line-height: 2; font-size: 1vw; text-align: justify; margin-right: 2vw; padding: 0}
/* ids para desplegar los submenus: los proyectos de cada categoria */
#branding {display: none; width: 100%}
#motionillustration {display: none}
#poster {display: none}
#photography {display: none}
#branding::after, #photography::after, #poster::after, #motionillustration::after {content: ""; display: inline-block; width: 100%;}
/* estilo e ids para el despliegue de los textos de cada proyecto */
.textocolumna {font-family: Satoshi-Regular; line-height: 1.2; font-size: 2vh; text-align: left; text-wrap: pretty;  hyphens: auto;  margin: 0; column-fill: auto; -webkit-column-count: 2; -webkit-column-gap: 1vw; column-count: 2; column-gap: 1vw; height: 100%}
.textocolumna b{line-height: 2}
#textopicnicampus, #textoyung, #textothepetitecakes, #textoheadintheclouds, #textowhileitshot, #textovestidosdeacordes, #textobulgae, #textosesionpaula, #textomargot, #textopaula2021, #textocamilo, #textoresiliencia, #textosummernights, #textolekitgraphique, #textopierrecreton, #textogillsans, #textomenuetereo, #textomigrains { display: none;}
#textopicnicampus, #textoyung, #textothepetitecakes, #textoheadintheclouds {text-wrap: pretty;  hyphens: auto;  margin: 0; column-fill: balance; -webkit-column-count: 2; -webkit-column-gap: 1vw; column-count: 2; column-gap: 1vw;}
/* ids para los carruseles y las imagenes por cada proyecto */
/* PICNIC CAMPUS */
#picnicampusimgs {display: none; width: 100%}
#picnicampus01, #picnicampus02, #picnicampus03, #picnicampus04, #picnicampus05 {width: 100%;  height: auto !important; align-self: center; margin-top: 4vw}
/* YUNG */
#yungimgs {display: none; width: 100%}
#yung01, #yung02, #yung03, #yung04 {width: 100%; height: auto !important; align-self: center; margin-top: 4vw}
/* THE PETITE CAKES */
#thepetitecakesimgs {display: none; width: 100%}
#thepetitecakes01, #thepetitecakes02, #thepetitecakes03, #thepetitecakes04 {width: 100%;   height: auto !important; align-self: center; margin-top: 4vw}
/* HEAD IN THE CLOUDS */
#headinthecloudsimgs {display: none; width: 100%;}
#headintheclouds01, #headintheclouds02, #headintheclouds03, #headintheclouds04, #headintheclouds05, #headintheclouds06, #headintheclouds07, #headintheclouds08 {width: 100%;  height: auto !important; align-self: center; margin-top: 4vw}
/* VESTIDOS DE ACORDES */
#Vestidosdeacordes {display: none; width: 100%}
#vestidosdeacordes01, #vestidosdeacordes02, #vestidosdeacordes03, #vestidosdeacordes04, #vestidosdeacordes05, #vestidosdeacordes06, #vestidosdeacordes07, #vestidosdeacordes08, #vestidosdeacordes09, #vestidosdeacordes10, #vestidosdeacordes11, #vestidosdeacordes12, #vestidosdeacordes13, #vestidosdeacordes14, #vestidosdeacordes15, #vestidosdeacordes16, #vestidosdeacordes17, #vestidosdeacordes18, #vestidosdeacordes19, #vestidosdeacordes20, #vestidosdeacordes21, #vestidosdeacordes22, #vestidosdeacordes23, #vestidosdeacordes24, #vestidosdeacordes25, #vestidosdeacordes26, #vestidosdeacordes27, #vestidosdeacordes28, #vestidosdeacordes29, #vestidosdeacordes30, #vestidosdeacordes31 {width: 50%}
/* SUMMER NIGHTS */
#summernights {display: none; height: 100%; position: relative; align-content: center}
#summernightsVideo {display:block; width:100%; height:auto; max-height:80vh; background:#000;}
/* LE KIT GRAPHIQUE */
#lekitgraphique
#lekitgraphiqueimgs, #lekitgraphique01 {display: none; width: 100%}
/* PIERRE CRETON */
#pierrecreton
#pierrecretonimgs, #pierrecreton01 {display: none; width: 100%}
/* GILL SANS  */
#gillsans
#gillsansimgs, #gillsans01 {display: none; width: 100%}
/* MENU ETEREO  */
#menuetereo
#menuetereoimgs, #menuetereo01 {display: none; width: 100%}


#mechacosmosimgs {height: 100%; align-content: center}
#mechacosmos01 {width: 100%; height: auto;}

.textodisclaimer {font-family: Satoshi-Regular; line-height: 1.2; font-size: 1.2vw; text-align: justify;}

.cargando { font-family: Satoshi-Regular; line-height: 1.2; font-size: 6vw;
	display: none;
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 1rem;
	text-align: center;
	pointer-events: none;
}

@media (max-width: 768px) {
	#picnicampusimgs, #yungimgs, #thepetitecakesimgs, #headinthecloudsimgs {overflow-x: hidden; overflow-y: scroll !important  }
	#picnicampusimgs img, #yungimgs img, #thepetitecakesimgs img, #headinthecloudsimgs img {position: static !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; opacity: 1 !important; display: block !important;    margin: 0 0 12px 0;}
	a {text-decoration: none}
	.textobanner, .textobanner2 {font-size: 3.5vw; font-family: Satoshi-Light;}
	.textodescripcion {line-height: 1.2; font-size: 4vw;}
	.textoporfolio {line-height: 4vw; font-size: 4.7vw; margin-left: 13%; margin-top: 9%;}
	.botonporfolio {line-height: 4vw; font-size: 4.7vw;}
	.YongshiGranada {display: none}
	.YongshiGranadamovil {display: block ;font-family: CabinetGrotesk-Regular;  line-height: 1; margin: 0; font-size:22vw; text-align: left;}
	.textorow4 {font-size: 4vw; text-align: center; float: left}
	.ABOUTME {text-align: center; float: left; width: 100%}
	.ENG {float: inline-end}
	.textoMenu {font-size: 3vw; color: black; font-family: Satoshi-Light;}
	.texto3D {font-size: 3vw; font-family: Satoshi-Light;}
	.texto1C {display: none}
	.texto1CMovil {display: block; font-size: 6vw; padding-top: 1vw}
	.textorow4 .Eng {display: none}
	
	.textocolumna {font-size: 2.5vw; column-count: 1; height: auto}
	.textoseccion {color: black; line-height: 1; font-size: 3vw;}
	#textopicnicampus, #textoyung, #textothepetitecakes, #textoheadintheclouds {column-count: 1}
	
	#mechacosmosimgs {width: 100%; align-content: center}
	#mechacosmos01 {width: 100%; height: auto !important;}

	
	.Eng {display: none !important}
	.EngMovil {display: block; font-size: 3vw; text-align: center;  margin-top: 1vw; font-weight: 700}
	
	.Fecha {display: none !important}
	.FechaMovil {display: block;  font-size: 3vw; text-align: right; margin-top: 1vw }
	
	.Fran {display: none !important}
	.FranMovil {display: block; font-size: 3vw; text-align: center; margin-top: 1vw}
	
	.AboutmeMovil {display: block;  font-size: 3vw; text-align: right; margin-top: 1vw}
	.Aboutme {display: none !important}
	.AboutmeMovil, .FranMovil, .FechaMovil, .EngMovil {padding-right: 1vw;}
	.textodisclaimer {font-size: 4vw;}
	
	.cargando {display: block; font-size: 3vw}
	
}