/* ---------------------------------------- */
/* -----------------NOTES------------------ */
/* ---------------------------------------- */	

/* Nunito Sans 		*/
	
/* EXTRA LIGHT 	200	*/
/* LIGHT  		300	*/
/* REGULAR 		400	*/
/* BOLD 		700	*/


/* COLORS - ORIGINAL THEME */

/* BG / DARK 				#191718; / rgba(25,23,24,1.0);		*/
/* BG MENU & FOOTER			#43403e;							*/
/* LINES & TEXT GRAYISH		#857f74; 							*/
/* GREEN REGULAR (LINKS)	#a4ac96;							*/
/* GREEN HIGHLIGHT (LINKS)	#cadf9e;							*/



/* GOLD - LAVENDER */

/*	color: #1B1A16;	/* Maire (Warm Black) */
/*	color: #2B2822;	/* Black Magic (Warm Black ALT) */
/*	color: #857A6A;	/* Sand Dune (Ecru-DIM) */
/*	color: #CFBEA5;	/* soft-amber (ecru/gold) 	*/
/*	color: #F9F6F3;	/* Seashell (Broken White)	 */
/*	color: #4D473D;	/* Metallic Bronze (warm dark gray) 	*/
/*	color: #6A6255;	/* Makara (Warm Dark Gray) */

/*	color: #A9A5CF;		/* wistful (lavender) 	*/



/* ---------------------------------------- */
/* ----------------- RESET  --------------- */
/* ---------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	    margin:0; 
	    padding:0; 
	} 

	
	table { 
	    border-collapse:collapse; 
	    border-spacing:0; 
	} 
	fieldset,img {  
	    border:0; 
	} 
	address,caption,cite,code,dfn,em,strong,th,var { 
	    font-style:normal; 
	    font-weight:normal; 
	} 
	
	caption,th { 
	    text-align:left; 
	} 
	h1,h2,h3,h4,h5,h6 { 
	    font-size:100%; 
	    font-weight:normal; 
	} 
	q:before,q:after { 
	    content:''; 
	} 
	
	img {display:block;}
	
	
*, *:before, *:after {
  box-sizing: border-box;
}	

/* ----------------- ASC STANDARDS  ---------------- */

html {
	
font-size: 16px;

background-color: black;
}


body {

font-size: 1em;
line-height: 1.500em;
font-family: 'Nunito Sans', sans-serif;
font-weight: 200;							/* EXTRA LIGHT */
color: #F9F6F3;	/* Seashell (Broken White)	 */

margin: 0;

padding-right: 0px;

background-color: black;

}


a[href$=".pdf"] {
	padding-left:1.500rem;
	background:url('../media/ui/pdf-ico.gif') left center no-repeat;
	/*background:none -53px -66px no-repeat;*/
	min-height:1rem;
}



ul {
	font-weight: normal;
	line-height: 1.500rem;	
	list-style: none;	
	margin-bottom: 1rem;	
}

ol {
	font-weight: normal;
	line-height: 1.500rem;		
	margin-left: 1rem;
	margin-bottom: 1rem;	
}


li {	
	font-weight: normal;
	line-height: 1.500rem;	
}

b,em {
	font-weight: bold;	

}



/* ---------------------------------------- */	
/*-- LINKS, HOVER & ANIMATIONS ------------ */	
	
	a {
		
		text-decoration: none;
		
		-webkit-transition: color 0.6s; /* Safari */
		transition: color 0.6s, text-shadow 0.8s;
	}

	a:hover {
		
		-webkit-transition: color 0.2s; /* Safari */
		transition: color 0.2s, text-shadow 0.4s;
	}

/* ---------------------------------------- */


	
/* ----------------------------------------*/	
/* ----------- SPLASH -------------------- */
/* ---------------------------------------- */

.splash-home {

	position: fixed;
	z-index: 1000;

	width: 100vw;
	max-width: 100%;
	height: 100vh;

	margin: auto;
	margin-top: 0;

	opacity: 1.0;


	background-color: #1B1A16;	/* Maire (Warm Black) */

	/* DISABLED FOR DEV */
	animation-name: splash-home;
	animation-duration: 0.7s; /* 4s; */
	animation-delay: 4s;	/* 4s; */
	animation-iteration-count: 1;
	animation-fill-mode: forwards;

}

.splash-content {

	height: 100%;
	width: 100%;
	

	opacity: 0.0;

	background-image: url("../media/ui/bg_rose_sgraffito_raquel_rodriguez_puebla.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;

	/* DISABLED FOR DEV */
	animation-name: splash-content;
	animation-duration: 4s; /* 4s; */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;


}

.splash-content div {  
	
	margin: 0;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -40%);
	
	height: 35vw;
	width: 35vw;
	
	background-image: url("../media/ui/asc_raquel_vector_logo_wide_softamber_2.svg");
	
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	/* DISABLED FOR DEV */
	animation-name: splash-content;
	animation-duration: 4s; /* 4s; */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
		
}

/* The animation code */
@keyframes splash-home {
	
	0%   {height: 100vh; opacity: 1.0;}
	100% {height: 0vh; opacity: 0.0;}
  
}


/* The animation code */
@keyframes splash-content {
	
	0%   {opacity: 0.0; height: 100%;}
	50%  {opacity: 1.0; height: 100%;}
	99% {opacity: 0.0; height: 100%;}
	100% {opacity: 0.0; height: 0;}
	
	
}


/* ----------------------------------------*/	
/* ----------- EXIT ANIM -------------------- */
/* ---------------------------------------- */

#fader  {
	position: fixed;
	top: 0px;
	z-index: 999;
	width: 100vw;
	height: 100%;
	background-color: red;
	background-color: #1B1A16;	/* Maire (Warm Black) */
	

}

@keyframes fade-out {
	0%		{opacity: 1.0; height: 100%;}
	1%		{opacity: 0.99; height: 100%;}
	99%		{opacity: 0.01; height: 100%;}
	100%	{opacity: 0.0; height: 0%;}
}

@keyframes fade-in {
	0%  	{opacity: 0.0; height: 0%;}
	1%		{opacity: 0.01; height: 100%;}
	99%		{opacity: 0.99; height: 100%;}
	100% 	{opacity: 1.0; height: 100%;}
}

#fader.fade-out {
	opacity: 0;
	height: 0%;
	animation-name: fade-out;
	
	animation-duration: 750ms;
    animation-timing-function: ease-in;
}

#fader.fade-in {
	opacity: 1;
	height: 100%;
	animation-name: fade-in;
	
	animation-duration: 500ms;
    animation-timing-function: ease-out;
}

/* ---------------------------------------- */	
/* ----- ALL CONTENT POSITIONING ---------- */
/* ---------------------------------------- */


.totalcontainer {

	position: relative;

	width: 100vw;
	max-width: 100%;
	min-height: 100vh;

	margin: auto;
	margin-top: 0

}

.container {

	max-width: 1920px;

	margin: auto;
	margin-top: 0;
	
	background-color: #1B1A16;	/* Maire (Warm Black) */
	
	
	
	
	
}


/* ---------------------------------------- */	
/* ----------- MENU ----------------------- */
/* ---------------------------------------- */

.menubuttonholder {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	
	z-index: 900;
	
	position: fixed;
	top: 0px;
	
	width: 100%;
	max-width: 1920px;
	
x	border: 1px solid gold;
}

.menubutton {


	margin-left: 7rem;

	width: 7.000rem;
	height: 7.000rem;

	
	background-image: url("../media/ui/asc_raquel_vector_logo_typo_100x100mm_softamber.svg");
	
	background-position: center center;
	background-size: 75%;
	background-repeat: no-repeat;
	
	border: 1px solid #4D473D;		/* Metallic Bronze (warm dark gray) 	*/
	
	cursor: pointer;
	
	background-color: #4D473D;		/* Metallic Bronze (warm dark gray) 	*/
	
	
	-webkit-transition: border 4.2s, background-color 0.6s; /* Safari */
	transition: border 4.2s, background-color 0.6s;

}



/* MODERNIZR */
html.no-touch .menubutton:hover { 

	background-image: url("../media/ui/asc_raquel_vector_logo_typo_100x100mm.svg");
	
	background-color: #6A6255;	/* Makara (Warm Dark Gray) */
	
	border: 1px solid #6A6255;	/* Makara (Warm Dark Gray) */
	
	
	-webkit-transition: border 0.2s, background-color 0.2s, box-shadow 0.2s; /* Safari */
	transition: border 0.2s, background-color 0.2s, box-shadow 0.2s ;
	

	
}



/*-- DE HAMBURGER --*/
.menubutton2 {
	
	position: absolute;


	left: calc( 100% - 7rem - 7rem );

	
	
	width: 7.000rem;
	height: 7.000rem;

	padding-top: 1rem;
	
	display: flex;
	justify-content: flex-end;

	cursor: pointer;
	
x	Background-color: red;
}

.menubutton2 i {
	
	display: inline-block;
	
	height: 2.5rem;
	width: 2.5rem;
	
	text-align: center;
	padding-top: calc(50% - 3.2rem) ;
	

	border-radius: 5px;
	
	background-color: rgba(133, 127, 116, 0.3);
	
	
	font-size: 1.7rem;
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	
	
	-webkit-transition: color 0.6s; /* Safari */
	transition: color 0.6s;
}

.menubutton2 i:hover {
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	-webkit-transition: color 0.2s; /* Safari */
	transition: color 0.2s;
	
}

.hamburgeropen.hide, .hamburgerclose.hide  {
	display: none;
}

html.no-touch .hamburgerclose {

}


.soclangbox {
	
	
	width: 7.000rem;
	height: 7.000rem;


}


/*-- UITLKAP soclangbox --*/




/* ---------------------------------------- */	
/* -- LANGUAGE MENU -- */

.soclangbox .languagemenu {
	
	margin-left: 2rem;
	margin-top: calc( 1rem );
	
}

.soclangbox .languagemenu ul {
	display: flex;
}

.soclangbox .languagemenu ul li {
	cursor: default;
}

.soclangbox .languagemenu ul li:hover, .soclangbox .languagemenu ul li:hover a {
	color: #F9F6F3;	/* Seashell (Broken White)	 */
}

.soclangbox .languagemenu ul li.selected {
	color: #F9F6F3;	/* Seashell (Broken White)	 */
}

.soclangbox .languagemenu ul li.selected:hover {
	color: #F9F6F3;	/* Seashell (Broken White)	 */
}	

.soclangbox .languagemenu ul li a {
	
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	display:inline;
	width: auto;
}

.soclangbox .languagemenu ul li::after  {
	
	color: #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	content: "/";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.soclangbox .languagemenu ul li:last-child::after {
	content: "";
}

/* ---------------------------------------- */	
/* -- SOCIAL MENU -- */
	
.soclangbox .socialmenu {
	
	margin-left: 2rem;
	
}

.soclangbox .socialmenu ul {
	display: flex;
}

.soclangbox .socialmenu ul li {
	margin-right: 0.5rem;
	
}	

.soclangbox .socialmenu  li a {

	color: #CFBEA5;		/* soft-amber (ecru) 	*/
	font-size: 1.500rem;
	
}

.soclangbox .socialmenu  li a:hover {
	
	color: #F9F6F3;		/* Seashell (Broken White)	 */
	
}




/*-- UITLKAP MAIN --*/

.mainmenu {

	position: fixed;
	z-index: 889;

	
	width: 100vw;
	max-width: 1920px;
	height: 0px;
	opacity: 0.0;
	
	background-color: rgba(27,26,22,0.95);  

	
}

/* -- hide all elements inside the menu (click layer) -- */
.disableMenu {
	
	display: none;
	
}

.mainmenu ul li, .mainmenu ul li.selected {
	font-weight: 200;
	text-transform: uppercase;
	
	cursor: pointer;
}

.mainmenu ul li a {
	display:inline-block;
	width: 100%;
	
}

.mainmenu ul li, .mainmenu ul li a {

	text-decoration: none;
	
	-webkit-transition: color 0.6s; /* Safari */
	transition: color 0.6s;
	
}

.mainmenu ul li.selected, .mainmenu ul li.selected a {

	-webkit-transition: color 0.6s; /* Safari */
	transition: color 0.6s;
}

.mainmenu ul li:hover , .mainmenu ul li a:hover {
	
	-webkit-transition: color 0.2s; /* Safari */
	transition: color 0.2s;

}



/* ---------------------------------------- */	
/* -- NAV MENU -- */

.mainmenu .navmenu {
	
	position: absolute;
	z-index: 900;
	
	top: calc( 7rem + 2rem );
	max-height: calc( 100vh - 7rem - 2rem );
	
	margin-left: calc( 7rem + 0rem );
	
	font-size: 1.500rem;
	line-height: 2.000rem;
	

	
	/* -- preserving access to overflow -- */
	
	 overflow: auto;
	-webkit-overflow-scrolling: touch;

}

.mainmenu .navmenu  ul {

	margin-bottom: 4rem;


}

.mainmenu .navmenu  li  {
	
	padding-left: 1.5rem;
	margin-bottom: 1rem;
		

}


.mainmenu .navmenu ul li, .mainmenu .navmenu ul li a {

	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
} 

.mainmenu .navmenu ul li.selected, .mainmenu .navmenu ul li.selected a {

	color: #F9F6F3;		/* Seashell (Broken White)	 */
	
}

.mainmenu .navmenu ul li:hover , .mainmenu .navmenu ul li a:hover {
	
	color: #F9F6F3;		/* Seashell (Broken White)	 */	

}

.mainmenu .navmenu + ul li.selected:hover a {

x	color: #A9A5CF;		/* wistful (lavender) 	*/
}

/* ---------------------------------------- */	
/* -- NAV MENU > SUB MENU -- */


.mainmenu .navmenu ul li.haskids.selected ul li a {
	color: #CFBEA5;	/* Soft Amber (Ecru) */
}

.mainmenu .navmenu ul li.haskids.selected ul li:hover a {
	color: #F9F6F3;		/* Seashell (Broken White)	 */
}


.mainmenu .navmenu ul li.haskids ul li.selected a {
	color: #F9F6F3;		/* Seashell (Broken White)	 */
}


.mainmenu .navmenu  li.haskids span.fas {
	
	display: inline-block;
	width: 1rem;

	margin-left: -1.5rem;
	margin-right: 0.5rem;
	
	font-size: 1.200rem;
	color: #cadf9e;
	
	color: #CFBEA5;		/* soft-amber (ecru) 	*/
	
	border: 0px solid red;
	
	transform: rotate(0deg);
	
	transition: transform 0.5s;
	transition-timing-function: ease-in-out;
	
}

.mainmenu .navmenu > ul > li.haskids > ul li  a {
	
	font-size: 1rem;
	line-height: 1.875rem;

}

.mainmenu .navmenu > ul > li.haskids > ul {
	
	
	top: calc( 7rem + 2rem );
	
	margin: 0;
	padding: 0;
	
	padding-top: 0rem;
	padding-bottom: 0rem;

	
	opacity: 0.0;
	
	transition: padding-top 0.6s, padding-bottom 0.8s, opacity 0.3s;
	transition-timing-function: ease-in-out;
	
}

.mainmenu .navmenu > ul > li.haskids.opened > ul  {
	
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	
	opacity: 1.0;
	
	transition: padding-top 0.6s, padding-bottom 0.8s, opacity 1.2s;
	transition-timing-function: ease-in;
	
}

.mainmenu .navmenu > ul > li.haskids > ul li  {
	

	height: 0px;
	overflow: hidden;
	
	margin: 0;
	padding-left: 0rem;
	
	transition: height 0.8s;
	transition-timing-function: ease-in-out;
	
}



.mainmenu .navmenu > ul > li.haskids.opened > ul  li {	
	
	height: 1.875rem;
	
	transition: height 0.8s;
	transition-timing-function: ease-in-out;
	
}


.mainmenu .navmenu  li.haskids.opened .fas {
	
	transform: rotate(-180deg);
	
	transition: transform 0.5s;
	transition-timing-function: ease-in-out;
}


/* ---------------------------------------- */	
/*----------- TYPOGRAPHY      ------------- */
/* ---------------------------------------- */


h1 {
	
	width: 100%;

	margin: 0px;
	padding: 0px;
	/* padding & margin is position specific */
	
		
	font-size: 4rem;
	font-weight: 200;	
	line-height: 4rem;	
	text-transform: uppercase;
x	white-space: nowrap;
	text-overflow: ellipsis;

} 


/* ---------------------------------------- */	
/*----------- TOP IMAGE BLOCK ------------- */
/* ---------------------------------------- */

div.topblock {
	
	position: relative;	
	overflow: hidden;

	height: 100vh;
	max-height: 100%;
	
	width: 100vw;
	max-width: 100%;

	border-bottom: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */

}

div.photoblock_topblock {
	
	position: absolute;
	top: 0;
	left: 0;
	
	z-index: 200;
	
	width: 100%;
	height: 100%;

	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
	-webkit-animation: topimgzoom;
    animation: topimgzoom;
   
   -webkit-transform: rotate(0.00deg); 
    transform: rotate(0.00deg);
	
	-webkit-transform: scale(1.0); 
    transform: scale(1.0);
   
   -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
	
	animation-duration: 50s; /* 4s; */
	animation-delay: 5s;
	animation-iteration-count: 1;
	
	will-change: transform; /* creates a new paint layer */
	transition-timing-function: ease-in-out;
	
}

/*-- hide horzontal/vertical image depending on screen orientation */
div.photoblock_topblock.hide {
	
	display: none;
	
}

/* ZOOM IN - The animation code */
@keyframes topimgzoom {
	100% {
		transform: scale(1.2)  rotate(0.001deg);			/* rotate slightly for smooth transition in IE 11 */
		-moz-transform: scale(1.2)  rotate(0.001deg);
		-webkit-transform: scale(1.2)  rotate(0.001deg);
		}
	
}


div.textblock_topblock {
	
	position: absolute;
	bottom: 0;
	left: 0;

	z-index: 300;

	width: 100%;

	padding-bottom: 4rem;

	opacity: 1.0;
	
	transition: opacity 0.8s;
	transition-timing-function: ease-in;
}

div.textblock_topblock.faded {
	
	opacity: 0.0;
	
	transition: opacity 0.8s;
	transition-timing-function: ease-out;

}	

div.textblock_bg_topblock {
	
	position: absolute;
	bottom: 0;
	left: 0;

	height: 40vh;
	width: 100%;
	
	z-index: 250;
	
	background-image: linear-gradient(rgba(25,23,24,0), rgba(25,23,24,0.75));
	
}

/* type */
div.textblock_topblock h1 {
	
	color: #e6007e;
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	

}

div.textblock_topblock p.mobile {
	display: none;
}

div.textblock_topblock h1.mobile {
		
		display: none;
	} 


div.textblock_topblock h3 {
	
	width: 100%;
	
	height: 1.5rem;
	
	margin-bottom: 1rem;
	padding-left: 7rem;
	
	font-size: 1rem;
	font-weight: 200;	
	line-height: 1.7rem;	
	text-transform: uppercase;
	
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	color: white;	
	color: white;	
	
}

div.textblock_topblock h3 span {
	
	display: inline-block;
	height: 100%;
	
	padding-left: 1rem;
	margin-left: 1rem;
	
	border-left: 1px solid #F9F6F3;	/* Seashell (Broken White)	 */
	
	color: #1B1A16;	/* Maire (Warm Black) */
	color: #A9A5CF;		/* wistful (lavender) 	*/
	color: white;
	
}	

div.textblock_topblock h1 {
	
	margin-bottom: 1rem;
	
	padding-left: 7rem;
	padding-right: 4rem;

}

div.textblock_topblock p {
	
	width: 50%;
	margin-bottom: 1rem;
	
	padding-left: 7rem;
}


div.textblock_topblock p.projectlink a {
	
	display: none;
	
	margin-left: 0rem;
	text-transform: uppercase;
	text-decoration: none;
	color: white;
}


div.textblock_topblock p.projectlink a span.fas{
		
		margin-right: 0.5rem;
	
		color: #cadf9e;
		
		transition: color 0.8s;
		transition-timing-function: ease-out;
}


div.textblock_topblock p.projectlink a:hover {
	
	color: #cadf9e;
	
}

div.textblock_topblock p.projectlink a:hover span.fas{
	
		color: #ffffff;
		
		transition: color 0.4s;
		transition-timing-function: ease-out;
}





/* ---------------------------------------- */	
/*----------- CONTENT --------------------- */
/* ---------------------------------------- */



/* ---------------------------------------- */
/* -- READ MORE BUTTONS BLACK -- */

button, input.contact-sendForm {
	
		cursor: pointer;
}

button.readmore, input.contact-sendForm, button.acceptcookies {
	margin: 0;
	margin-top: 1rem;
	padding: 0.8rem;
	padding-left: 2rem;
	padding-right: 2rem;
	background-color: #1B1A16;	/* Maire (Warm Black) */
	
	border: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	font-size: 0.750rem;
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	text-transform: uppercase;
	

	
	
	box-shadow: 0px 0px 0px #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	-webkit-transition: box-shadow 1.8s, border 0.8s, color 0.6s; /* Safari */
	transition: box-shadow 1.8s, border 0.8s, color 0.6s;
	
}

button.readmore:hover, input.contact-sendForm:hover, button.acceptcookies:hover {
	
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	border: 1px solid #F9F6F3;	/* Seashell (Broken White)	 */
	
	box-shadow: 0px 0px 30px #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	-webkit-transition:  box-shadow 0.2s, border 0.6s, color 0.4s; /* Safari */
	transition:  box-shadow 0.2s, border 0.6s, color 0.4s;
}

button.readmore.second {
	
	border-left: 1px solid #1B1A16;	/* Maire (Warm Black) */
} 

button.readmore.second:hover {
	border-left: 1px solid #F9F6F3;	/* Seashell (Broken White)	 */
}




/* ----------------------------------------*/	
/* -- READ MORE BUTTONS WHITE -- */

div.contentblock.white button.readmore {
	
	display: inline;
	text-align: left;
	
	
	margin: 0;
	padding: 0;
	
	font-size: 1rem;
	line-height: 1.300em;
	color: #191718;
	color: #1B1A16;	/* Maire (Warm Black) */
	
	font-weight: 200;
	text-transform: none;
	
	border: 0;
	background-color: #F9F6F3;	/* Seashell (Broken White)	 */

	text-decoration: none;
	
}

div.contentblock.white button.readmore:hover {
	
	color: black;
	
	box-shadow: none;
	
	
	
		
}

div.contentblock.white button.readmore span.fas {
	
	position: relative;
	top: 0.1rem;
	font-size: 1rem;
	color: #cadf9e;
	
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	-webkit-transition: color 0.4s; /* Safari */
	transition: color 0.4s;
	
}

div.contentblock.white button.readmore:hover span.fas {
	
	position: relative;
	top: 0.1rem;
	font-size: 1rem;
	color: #857f74;
	
	color: #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	-webkit-transition: color 0.2s; /* Safari */
	transition: color 0.2s;
	
}


/* ----------------------------------------*/	
/* -- READ MORE BUTTONS ON FULLSCREEN PHOTO -- */

button.readmorefullscreen {
	
	padding: 0;
	margin: 0;
	
	margin-left: 0.5rem;
	
	display: inline-block;
	text-align: left;
	
	
	font-size: 1rem;
	font-weight: 200; 
	
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	
	
	
	background-color: transparent;
	border: none;
	
	-webkit-transition: color 0.2s; /* Safari */
	transition: color 0.2s;
	
	
}

button.readmorefullscreen:hover {
	
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	-webkit-transition: color 0.2s; /* Safari */
	transition: color 0.2s;
}

button.readmorefullscreen span.fas {
	position: relative;
	top: 0.1rem;
	font-size: 1rem;
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	-webkit-transition: color 0.8s; /* Safari */
	transition: color 0.8s;

}

button.readmorefullscreen:hover span.fas {
	position: relative;
	top: 0.1rem;
	font-size: 1rem;
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	
	-webkit-transition: color 0.4s; /* Safari */
	transition: color 0.4s;
}	


/* ---------------------------------------- */
/*----------- CONTENT BLOCKS -------------- */



	

div.contentblock {
	
	max-width: 100%;

	
	padding-top: 4rem;
	padding-left: 3rem;
	padding-right: 5rem;

	
	display: flex;
	flex-wrap: wrap;
	

	background-color: #1B1A16;	/* Maire (Warm Black) */
	

}

div.contentblock.black {
	
	padding-bottom: 4rem;
	
}

div.contentblock.white {
	

	background-color: #F9F6F3;	/* Seashell (Broken White)	 */

	
}

div.contentblock.white.last {
	
	padding-bottom: 4rem;
	
	
}


div.contentblock.fullscreen {
	
	
	position: relative;
		
	width: 100vw;
	max-width: 100%;
	
	height: 100vh;
	
	padding: 0rem;
	
}

div.contentblock.nextproject {
	
	position: relative;
		
	width: 100vw;
	max-width: 100%;
	
	height: 30vh;
	
	padding: 0rem;
}	
	

/*----------- PHOTO BLOCKS ---------------------- */
/*----------- setting up for 16:9 standard--------*/


div.photoblock {
	
	width: calc( 50% + 5rem);

}

/* -- Hide H2 in photo's on large screens (SERVICES) -- */
div.photoblock h2 {
	display: none;
}	

div.photoblockphoto {

	width: 100%;
	height: 0;
	
	padding-top: calc( 9 / 16 * 100%);  /* 16:9 Aspect Ratio / 56.25%; */

	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
	border: 0px solid green;
}







/* -- Full Screen / Full Width - Content Photos -- */


div.contentblock.fullscreen div.photoblockphoto, div.contentblock.nextproject div.photoblockphoto {

	position: absolute;
	z-index: 200;

	width: 100%;
	height: 100%;
	
	padding: 0;
	
	border-top: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	border-bottom: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	
}

div.contentblock.nextproject div.photoblockphoto {

x	border-bottom: 5px solid #857A6A;	/* Sand Dune (Ecru-DIM) */

}



/*-- hide horzontal/vertical image depending on screen orientation */
div.photoblockphoto.hide {
	
	display: none;
	
}





/*----------- TXT BLOCKS -------------- */



div.textblock {
	
	width: calc( 50% - 5rem);
	padding: 2rem;
	
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	border-left: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
}

div.contentblock.black {
	
}


div.contentblock.black a {

	color: #F9F6F3;	/* Seashell (Broken White)	 */
	font-weight: 300;
	
}

div.contentblock.black a:hover {
	
	text-shadow: 0px 0px 8px #F9F6F3;	/* Seashell (Broken White)	 */

	
}

div.contentblock.white a {
	color: #857A6A;	/* Sand Dune (Ecru-DIM) */
	font-weight: 400;

	text-decoration: underline;
	text-decoration-color: #CFBEA5;
	
}

div.contentblock.white button { 
	text-decoration: none;
}

div.contentblock.white a:hover {
	
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	text-decoration: none;
	

}	



div.contentblock.white div.textblock  {
	
	padding-top: 0rem;
	color: #191718;
	color: #1B1A16;	/* Maire (Warm Black) */
	
	border-left: 1px solid #F9F6F3;	/* Seashell (Broken White)	 */
}	

div.textblock h2 {
	
	font-size: 1.500rem;
	line-height: 1.500rem;
	font-weight: 200;
	margin-bottom: 2rem;
}

div.textblock p {
	margin-bottom: 1rem;
}



/* -- Full Screen Content Text -- */

div.contentblock.fullscreen div.textblock, div.contentblock.nextproject div.textblock {
	
	position: absolute;
	z-index: 300;
	
	left: 0px;
	bottom: 0px;
	
	width: 100vw;
	max-width: 100%;
	
	margin: 0;
	padding: 0;
	
	margin-bottom: 1px;
	
	padding-bottom: 2rem;
	padding-top: 6rem;
	
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	
	
	background-image: linear-gradient(rgba(25,23,24,0), rgba(25,23,24,0.75));
	
	border-left: red 0px solid;
	
}

div.contentblock.fullscreen div.textblock h1, div.contentblock.nextproject div.textblock h1 {
	
	padding-left: calc( 7rem + 7rem + 4rem );
	padding-right: 4rem;
	
	padding-bottom: 0rem;
	
	color: #CFBEA5;	/* Soft Amber (Ecru) */

}

div.contentblock.fullscreen div.textblock p, div.contentblock.nextproject div.textblock p {
	

	padding-left: calc( 7rem + 7rem + 4rem );
	padding-right: 4rem;
	
	margin-top: 0.3rem;
	
}



/* ------------------------------------------------------ */
/*----------- PORTFOLIO 				  --------------- */


/* ------------------------------------------------------ */
/*----------- PORTFOLIO - SMALL SET OF 6  --------------- */

.contentblock.portfolio {
	padding: 0px;
	
	border-top: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	border-bottom: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	
	background-image: url("../media/ui/bg_rose_sgraffito_raquel_rodriguez_puebla.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
}

.outer-portfoliocontainer {
	
	width: 100%;

}

.portfolio.home h1{
	
	margin-top: 6rem;
	
	padding-left: calc( 7rem + 7rem + 4rem );
	padding-right: 4rem;
	padding-bottom: 5rem;
	

	color: #CFBEA5;	/* Soft Amber (Ecru) */

	
	border: 0px solid red;
}

.portfoliocontainer {
	
x	background-color: green;
	
	width: calc( 100% - 7rem - 7rem - 4rem - 12rem );
x	height: 80vh;
	  
	margin-top: 2rem;
	margin-left: calc( 7rem + 7rem + 4rem );
	margin-right: 12rem;
	margin-bottom: 4rem;
  
	padding: 0;
  
	display: flex;
	flex-direction: row; 
	flex-wrap: wrap;
	justify-content: space-between;
	

	
}

.portfoliocontainer .child { 

	width: 32%;
	
	
}


.portfoliocontainer .child .pf-small-image {
	position: relative;	
	overflow: hidden;

	width: 100%;
	max-width: 100%;
	padding-top: calc( 1 / 1 * 100%);  /* 1:1 Aspect Ratio / 100%; */

	border: 1px solid #CFBEA5;	/* Soft Amber (Ecru) */
	
	box-shadow: 0px 0px 0px #CFBEA5;	/* Soft Amber (Ecru) */
	
	-webkit-transition: box-shadow 1.8s, border 0.8s, color 0.6s; /* Safari */
	transition: box-shadow 1.8s, border 0.8s, color 0.6s;
	
	
}

.portfoliocontainer .child:hover .pf-small-image {
	
	border: 1px solid #F9F6F3;	/* Seashell (Broken White)	 */
	
	box-shadow: 0px 0px 10px #CFBEA5;	/* Soft Amber (Ecru) */
	
	-webkit-transition:  box-shadow 0.2s, border 0.6s; /* Safari */
	transition:  box-shadow 0.2s, border 0.6s, color 0.4s;
	
}		

.portfoliocontainer .child .pf-small-image .pf-small-image-bg {
	position: absolute;	
	
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
	transform: scale(1.0);
	transition: all .8s ease-out;

	
}



.portfoliocontainer .child:hover .pf-small-image .pf-small-image-bg {
	
	transform: scale(1.1);
	transition: all 5.2s ease-out;
	
}	

.portfoliocontainer .child .pf-description {
	position: relative;
		
	padding-top: 1rem;
	padding-bottom: 3rem;
	

	color: #857A6A;	/* Sand Dune (Ecru-DIM) */

	border: 0px solid red;
	
}



.portfoliocontainer .child .pf-description a {
		text-decoration: none;
}

.portfoliocontainer .child .pf-description a span {
	display: block;
	
		color: #CFBEA5;	/* Soft Amber (Ecru) */
	


}
	
.portfoliocontainer .child .pf-description a span.viewproject {
	
	display: none;
	
	position: absolute;
	right: 1rem;
	top: 1.3rem;
	
	font-size: 1.5rem;
	
	color: #857A6A;	/* Sand Dune (Ecru-DIM) */

x	background-color: green;	
}	

.portfoliocontainer .child .pf-description a span.projecttype  {	
	
	font-weight: 400;
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	
}

.portfoliocontainer .child .pf-description a:hover span, .portfoliocontainer .child:hover .pf-description a span {	
	

	color: #F9F6F3;	/* Seashell (Broken White)	 */


}

.hide-link-on-mobile {
	display: none;
}	
	
#indicator {
	display: none;
}



/* --------------------------------------------------------------- */
/*----------- PORTFOLIO PHOTOBOOK- SINGLE ITEM PAGE -------------- */
/* --------------------------------------------------------------- */

/* -- PORTFOLIO - PHOTO'S -- */

div.contentblock.black.single-project {


	align-items: flex-end;
	
	border-bottom: 1px solid #2B2822;	/* Black Magic (Warm Black) */
	
}

div.contentblock.black.single-project.first {

	border-top: 1px solid #2B2822;	/* Black Magic (Warm Black) */

}


/* GROEN */ 
/*-----------------------------------------------------------------------------------*/
div.contentblock.black.single-project  div.photoblock {
	

}

	


/*--- (RE)SETTING THE WITH FOR THE PHOTOBLOCK (PORTFOLIO) - STANDARD IS 50% ---*/

div.contentblock.black.single-project div.photoblock {												/* ALL */  
	
	width: calc( 50% + 5rem );
	
	

}

div.contentblock.black.single-project div.photoblock.horizontal {

	width: 100%;

}

div.contentblock.black.single-project  div.photoblock.vertical {

	/* unchanged (half of space) */  
	
}

div.contentblock.black.single-project div.photoblock.square {

	/* unchanged (half of space) */  
}



/* ROOD */ 
/*-----------------------------------------------------------------------------------*/
/*--- (RE)SETTING THE RATIO FOR THE PHOTOBLOCKPHOTO (PORTFOLIO) (STANDARD IS 16:9) ---*/

div.contentblock.black.single-project div.photoblock div.photoblockphoto {							/* ALL */  
	
	
	height: auto;
	padding: 0;
	
}


/*-- horizontal - --*/
div.contentblock.black.single-project div.photoblock.horizontal div.photoblockphoto {

	
	

}

/*-- vertical & square BOTH  --*/

div.contentblock.black.single-project  div.photoblock.vertical div.photoblockphoto, 
div.contentblock.black.single-project div.photoblock.square div.photoblockphoto {
	
	
	width: calc( 100% - 2rem );

	
}

/*-- vertical -  --*/
div.contentblock.black.single-project  div.photoblock.vertical div.photoblockphoto {

	


}

/*-- square -  --*/
div.contentblock.black.single-project div.photoblock.square div.photoblockphoto {

	

}


/*-- THE IMAGE --*/

div.contentblock.black.single-project div.photoblock div.photoblockphoto > img {

	width: 100%;
	max-height: 80vh;

	object-fit: contain;
	object-position: 0% 0%; 

}




/*-----------------------------------------------------------------------------------*/
/* -- PORTFOLIO - CAPTIONS -- */
/*-----------------------------------------------------------------------------------*/




div.single-project div.project-caption {


	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	border-left: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	
}

div.textblock.project-caption.horizontal {
	
	width: 100%;
	margin-top: 2rem;
	margin-left: 1px;
	

}	

div.single-project div.project-caption.horizontal {
	
}



div.single-project div.project-caption.vertical {
	

		
}	

div.project-caption span.title {


color: #F9F6F3;	/* Seashell (Broken White)	 */


}


	
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

.contactForm {
	width:500px;
	margin:auto;
}

.contact-field { 
	width: 100%; 
	height: 2rem;
	padding: 0.8rem;
	margin-bottom: 1rem;
}

.contact-text {
	
	width: 100%; 
	
		padding: 0.8rem;
	
}

.contact-sendForm {}



/* ---------------------------------------- */
/*----------- FOOTER BLOCKS --------------- */
/*-----------------------------------------------------------------------------------*/

div.contentblock.footerblock	{
	
	display: flex;
	flex-wrap: wrap;
	
	padding: 0rem;
	

	background-color: #1B1A16;	/* Maire (Warm Black) */
	

	
	background-image: url("../media/ui/bg_rose_sgraffito_raquel_rodriguez_puebla.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
	border-top: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	
}


div.contentblock.footerblock div {
	
	width: calc( 25% + 0rem );
	
	border: 0px solid red;
}
div.contentblock.footerblock div.col3 {
	
	width: calc( 50% - 0rem );
	
	padding-top: 4rem;
	padding-right: 3rem;
	
}

/*----------- FOOTER NAV --------------- */

div.contentblock.footerblock div ul {

margin: 0px;
margin-bottom: 0.5rem;

}	

div.contentblock.footerblock div ul li {

	
}	
div.contentblock.footerblock div.col3 ul {
	display: flex;
	justify-content: flex-end;
	
	font-weight: 200;
	font-size: 0.875rem;
	text-transform: uppercase;
}

div.contentblock.footerblock div.col3 ul li {
	padding-right: 0.5rem;
}

div.contentblock.footerblock div.col3 ul li:last-child {
	padding-right: 0rem;
}

div.contentblock.footerblock div.col3 ul li a {
	color: #a4ac96;
	color: #CFBEA5;	/* Soft Amber (Ecru) */
	
	text-decoration: none;
}

div.contentblock.footerblock div.col3 ul li a:hover {
	color: #cadf9e;
	color: #F9F6F3;	/* Seashell (Broken White)	 */
}	

/*----------- FOOTER LOGO -- */
/* -- keeping ratio while maximizing height through width -- */

div.contentblock.footerblock div.col1 div.logocontainer {
	
	width: 100%;
	position: relative;
	display: inline-block;
	
	max-width: 15rem;

	margin-left: 2rem;
	margin-top: 4rem;

}

div.contentblock.footerblock div.col1 div.logocontainer:after {
	
	padding-top: calc( 1 / 2.4 * 100%);  /*  Aspect Ratio  */
	display: block;
    content: '';
	
}	

div.contentblock.footerblock div.col1 div.logo {
	
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	

	background-image: url("../media/ui/asc_raquel_vector_logo_wide_softamber_2.svg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}	


/*----------- FOOTER NAV SERVICE -- */
div.contentblock.footerblock div.col3 ul.servicemenu {

}

div.contentblock.footerblock div.col3 ul.servicemenu li::after {
	
	display: inline-block;
	transform: translateY(-0.1rem);
	
	content: "|";
	padding-left: 0.5rem;
	
	font-size: 12px;
	color: #857f74;
	
}

div.contentblock.footerblock div.col3 ul.servicemenu li:last-child::after {
	content: "";
	padding-left: 0rem;
}

/*----------- FOOTER NAV SOCIAL -- */
div.contentblock.footerblock div.col3 ul.socialmenu {
	font-size: 1.500rem;
}


/*----------- FOOTER NAV COPY -- */
div.contentblock.footerblock div.col3 ul.copy {
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-size: 0.750rem;
	color: #857f74;
}	



/* ---------------------------------------- */
/* ----------------COOKIES----------------- */


/*
 * Bootstrap Cookie Alert by Wruczek
 * https://github.com/Wruczek/Bootstrap-Cookie-Alert
 * Released under MIT license
 */
.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
	
	padding: 1rem;
	padding-left: 7rem;
    
	z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;

	background-color: #1B1A16;	/* Maire (Warm Black) */
	border-top: 1px solid #857A6A;	/* Sand Dune (Ecru-DIM) */
	
	
	
	font-size: 1em;
	line-height: 1.500em;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 200;							/* EXTRA LIGHT */

	
	color: #F9F6F3;	/* Seashell (Broken White)	 */
	
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {

	
	color: #CFBEA5;	/* Soft Amber (Ecru) */
   text-decoration: none;
}

.cookiealert a:hover {
	color: white;
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
	margin-top: 0.3rem;
	padding: 0.5rem;
}


/* ---------------------------------------- */
/* ----------------END    ----------------- */


@media only screen and 	(min-width: 3000px) {
	
	html {
	
		font-size: 32px;
	
	}
	
	
	.container {

		max-width: calc(100vw - 10vw);

	}
	
	
	.menubuttonholder {

		max-width: calc(100vw - 10vw);

	}
	
	.mainmenu {

		max-width: calc(100vw - 10vw);
	
	}
	
}


/* Skip the cinematic splash after the first page. */
html.asc-returning #mySPLASH {
    display: none;
}

/* Quick reveal on subsequent pages. */
html.asc-returning::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1B1A16;
    pointer-events: none;
    animation: asc-page-reveal 180ms ease-out forwards;
}

@keyframes asc-page-reveal {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
}

/* Quick cover before navigating away. */
.asc-page-fader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #1B1A16;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}