/*-----------GENERAL STYLING AND COLORS-----------*/

/*--------------------/COLORS-------------*/
* {
	--black:#000000;
	--blue: #003092;
	--orange:#FE5000;
	--gray:#B4B4B4;
	--dark-gray:#565253;
	--green:#224853;
	--white:#ffffff;

/*--------------------/COLORS-------------*/

scroll-behavior: smooth;
scroll-snap-type: y mandatory;

box-sizing: border-box;

/*--------------------FONTS-------------*/

font-family: "Orbitron","Poppins" ,sans-serif;
font-optical-sizing: auto;
font-style: normal;

/*--------------------FONTS-------------*/
}

h1{
	font-family: "Orbitron", sans-serif;
	font-kerning: 30;
	font-weight: 700;
	font-size: clamp(1.6rem,1.75rem,2.8rem);
	line-height: clamp(1.85rem,2rem,3.25rem);	
}

h2{
	font-family: "Orbitron", sans-serif;
	font-kerning: 30;
	font-weight: 500;
	font-size: clamp(1.25rem,1.4rem,2.2rem);
	line-height: clamp(1.5rem,1.75rem,2.5rem);	
}

h3{
	font-family: "Orbitron", sans-serif;
	font-kerning: 30;
	font-weight: 500;
	font-size: clamp(0.8rem,1rem,1.25rem);
	line-height: clamp(1rem,1.25rem,1.5rem);
}

a{
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-size: clamp(0.8rem,1rem,1.25rem);
	text-decoration: none;
	color:inherit;
}	
p,ul,li{
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-size: clamp(1rem,1.1rem,1.5rem);
	line-height: clamp(1.25rem,1.5rem,1.75rem);
	max-width: 80ch;
	padding-inline: 1rem;
}
li a{
	text-decoration: none;
	color:var(--orange);
}

strong{
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(1rem,1.1rem,1.5rem);
	line-height: clamp(1.25rem,1.5rem,1.75rem);
}

.TIP{
	color:var(--blue);
	text-decoration: underline;
}

img{
	width:100%;
	display: block;
	object-fit: cover;
	object-position: center;
	overflow:hidden;	
}

/*---ANIMATIE OP HOMEPAGE----*/
.HMC:hover::before{
	content: 'KLIK LEES MEER';
	font-weight: bold;
	padding:0.5rem;
	margin-top: 50px;
	margin-left:20%;
	color:var(--blue);
	background-color: var(--orange);	
}
/*---ANIMATIE OP PORTFOLIOPAGE-P17----*/
.MINICARD:hover::before{
	content: 'LEES MEER';
	font-size: 0.75rem;
	font-weight: bold;
	padding:0.5rem;
	margin-left:3.6%;
	color:var(--blue);
	background-color: var(--orange);	
}
/*---/ANIMATIE OP HOMEPAGE EN PORTFOLIOPAGE-P17----*/

.ACTION{
	max-width:80vw;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
}
/*----------BUTTON-STYLING-SECTION---------------*/
button{
	max-height: 40px;
}

.BUTTON-ORANGE{
	margin-bottom: 10px;
	max-width:fit-content;
	background-color: var(--orange);
	box-shadow: 3px 3px var(--dark-gray);
}

	.BUTTON-ORANGE a{
		font-weight: 500;
		text-decoration: none;
		color:var(--green);
}

	.BUTTON-BLUE{
		margin: 0 auto;
		margin-bottom: 10px;
		max-width:fit-content;
		height: 40px;
		background-color: var(--blue);
		box-shadow: 3px 4px 5px var(--white);
}

		.BUTTON-BLUE a{
			font-weight: 400;
			text-decoration: none;
			color:var(--gray);
}

		.BUTTON-ERGONOMICS a{
			color: var(--orange);
}

	.BUTTON-GREEN{
		margin: 0 auto;
		margin-bottom: 10px;
		width:162px;
		height: 40px;
		background-color: var(--green);
}

		.BUTTON-GREEN a{
			text-decoration: none;
			color:var(--white);
}
/*----------/BUTTON-STYLING-SECTION---------------*/

/*-------------END-GENERAL STYLING AND COLORSCHEME----------------------------*/



/*----------------iPhone-----Mobile-----300px>---PORTRAIT----------------------*/

/*------------------------MASTER-GRID--12 columns/18rows-------------------------------------*/

body{
	margin:0 auto;
	padding:0;
	width:100%;
	min-width: 100vw;
	min-height: 100vh;
	background-color:var(--white);	
}

.CONTAINER{
		width:100%;
		min-width:100vw;
		min-height:100dvh;
		background-image: url(images/BG-Cool-Gray7.png);		
		background-position: 0% 0%;
		background-size: 100vw 17%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
}

.T-CONTAINER{
		width:100%;
		min-width:100vw;
		min-height:100dvh;
		background-image: url(images/BG-Cool-Gray7.png);		
		background-position: 0% 0%;
		background-size: 100vw 2.25%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
}

.LOGO{
		margin:20px auto;
		max-width: 180px;
		justify-self: center;
	}

header{
	grid-area: header;
	width: 100%;
	min-width: 100vw;
	min-height: 16vh;	
}	

main{
	grid-area: main;
	margin-top:16vh;
	justify-content: center;
	background-color: var(--white);
}

footer{ 
	grid-area: footer;
	left:0;
	bottom: 0;
	position: fixed;
	width: 100%;
	min-height:8vh;
	grid-column:1/-1;
	grid-row:3;
	padding:1rem 0.5rem 1rem 0.5rem;
	background-color: var(--gray);
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	column-gap: 0.25rem;
	row-gap:0;
	justify-content: center;
	align-content: center;
}
/*------------------------/MASTER-GRID------------------------------------------*/


/*-------------------------------------------------------HERO-PAGE---------------------------------------------*/
.HERO-FOTO{
	margin:0 auto;
	width: 75vw;
	height: fit-content;
}

 .HERO-TEXT{
	margin: 0 auto;
	width:90vw;
}
.HMC{
		width:70vw;	
		filter: drop-shadow(8px 8px 10px var(--gray));
}
.MINICARD1{
	margin-top: -20px;
}
	.MC-TITLE{
		color:var(--white);
		background-color: var(--green);
		text-align: center;	
		padding: 1rem;
}
	.MC-FOTO{
		margin-top: -1rem;
}

.BUTTON-ORANGE{
	display:block;
}

.HERO-CARD{
	margin-top: -20%;
	width: 100vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;	
}

/*-------------------------------------------------------/HERO-PAGE---------------------------------------------*/

/*---------------------------------------------------PAGES------------------------------------------------------*/

.PORTRETFOTO{
	display: none;
}

.CONTACT-FOTO{
	display: none;
}


.ARTFOTO{
	max-width: 60vw;
}

.CARDTITLE, .CT, .PFT, .PCT, .TCT{
	margin:0 auto;
	width:75vw;
	min-height: min-content;	
	color:var(--white);
	background-color: var(--green);
	text-align: center;	
	padding: 1rem;
}

.CF{
	margin:0 auto;
	width:75vw;
}

.CARD, .PORTFOLIO, .P-CARD, .P-CARD2, .TEXTCARD{
	margin-top: -130px;
	padding:0 1.5rem;
	width:100vw;
	display: flex;
	flex-direction: column;
	text-align:start;
	justify-content: center;
}
.ADRES-L{
	margin-top:10px;
}

.PORTFOLIO .PC{
		display: flex;
		flex-direction: column;
		flex-wrap:wrap;
		gap:1.5rem;
}
	.MINICARD{ 
		border:2px solid var(--green);
		box-shadow:5px 10px 20px var(--dark-gray);
}

	.TEXTCONTAINER{
		margin-top: 0px;
		padding: 0 1rem;
		display: flex;
		flex-direction: row;
		flex-basis: 1;
		flex-wrap: wrap;	
}


/*-----------------------iPad Mini----------768px>---PORTRAIT------------------------------------*/

@media (min-width: 500px){

/*---GENERAL STYLING---*/

.CONTAINER{
	background-size: 100vw 25%;		
}
.T-CONTAINER{
	background-size: 100vw 2.25%;	
}


/*-------------------------------------------------------HERO-PAGE---------------------------------------------*/

.HERO-FOTO{
	margin:0 auto;
	width: 60vw;
	height: fit-content;
}
 .HERO-TEXT{
	margin:-10px auto;
	width: 90vw;
	height: fit-content;
 }
.HMC{
		width:35vw;	
		filter: drop-shadow(8px 8px 10px var(--gray));
		
}
.MINICARD1, .MINICARD2{
	margin-top:-30px;
}
.MINICARD5, .MINICARD3{
	margin-top:-20px;
}

/*---/GENERAL STYLING---*/

.HERO-CARD{
	margin-top:-25%;
	width: 100%;
	max-width:100vw;
	padding: 0 1.5rem;	
	display: flex;
	flex-direction: row;	
	justify-content: center;
}


/*-------------------------------------------------------/HERO-PAGE---------------------------------------------*/
/*-----------------------------------PAGE-SECTION---------------------------------------------------------------*/

	/*--GENERAL--*/

	.CARD{
		margin-top: -200px;
		grid-column: 1/-1;
		grid-row: 3;
		display: grid;
		grid-template-columns: repeat(12,1fr);
		grid-auto-rows:5%;
		grid-template-areas:
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'TL TL TL TL TL TL TL TL TL TL TL TL'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		
		
	}
	/*-------GENERAL----------*/
	.CT, .CF{		
		width:60vw;
	}
	.CT{
		padding:0 0 1rem 0;
	}
	
	.CARDTEXT{
	margin-top: 0px;
	}
	.PORTRETFOTO{
		display: none;
	}
	.ARTFOTO{
	max-width: 25vw;
}
	.ARTFOTO-MINI{
		margin:0 1rem;
		max-width:16vw;
	}
	.PC{
		margin-top:1rem;
	}
	.FOTO-80{
		margin-top: -50px;
		transform:scale(0.85)
	}
	.TEXTBOX-FLEX, .TEXTBOX-FLEX-ROW{
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: center;
	align-items: start;
	gap:1rem;	
}
.TEXTBOX-FLEX-COL{
	display: flex;
	flex-direction: column;
	flex-wrap:nowrap;
	justify-content: start;
	align-items: center;
	gap:1rem;	
}
	.CONTACT-FOTO{
		display: block;
		width: 45vw;
	}
	.CONTACT-SLOGAN{
	margin-top:-30px;
}
	.ADRES-L{
		margin-top: 80px;
	}
	.ADRESFLEX-R{
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		column-gap:4rem;
		justify-content: space-evenly;
		align-content: start;
		
	}
	
	.FOTO-THUMB{
		width:25vw;
	}
	.ERGOTABEL{
		margin-top:-160px;
		transform:scale(0.75)
	}
	.ADV{
		margin-top:40px;
		padding: 1rem 0.5rem;
		color: var(--orange);
		background-color: var(--green);
		align-items: center;
	}	
	
	.PORTFOLIO .PC{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		gap:2rem;
	}
	.BUTTON-ORANGE{
			display: block;
	}
	.ACTIONCARD4 .BUTTON-GREEN{
		display:block;
	}
	.ACTIONCARD5 .BUTTON-GREEN{
		display:block;
	}
	.ACTIONCARD8 .BUTTON-ORANGE{
		display: none;
	}
	/*--/GENERAL--*/

	/*------CARD----PAGE-SECTION---------------------------------------------------------------*/

		

/*------PORTFOLIO----PAGE-SECTION---------------------------------------------------------------*/
/*--GENERAL--*/
	.PORTFOLIO .PORTRETFOTO{
		margin-top: -80px;
		display:flex;
		width:28vw;
	}
	.PFT{
		margin-top: -60px;
		width: 28vw;		
	}
	.MINICARD{ 
		width: 150px;
		border:2px solid var(--green);
		box-shadow:5px 10px 20px var(--dark-gray);
	}
	.MINICARD:hover{
		transform: scale(1.2);
		transition: 2s;
	}
/*--GENERAL--*/
/*------/PORTFOLIO----PAGE-SECTION---------------------------------------------------------------*/

/*------P-CARD----PAGE-SECTION---------------------------------------------------------------*/

	.P-CARD{
		margin-top: -200px;
		padding: 0;
		grid-column: 1/-1;
		grid-row: 3;
		display: grid;
		grid-template-columns: repeat(12,1fr);
		grid-auto-rows:5%;
		grid-template-areas:
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. AF1 AF1 AF1 . AF2 AF2 AF2 . AF3 AF3 AF3'
		'. AF1 AF1 AF1 . AF2 AF2 AF2 . AF3 AF3 AF3'
		'. AF1 AF1 AF1 . AF2 AF2 AF2 . AF3 AF3 AF3'
		'. AF1 AF1 AF1 . AF2 AF2 AF2 . AF3 AF3 AF3'
		'. AF1 AF1 AF1 . AF2 AF2 AF2 . AF3 AF3 AF3'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
}
/*--GENERAL--*/
	.PCT, .PCF{
		width: 60vw;
	}
		
/*--/GENERAL--*/

/*------/P-CARD----PAGE-SECTION---------------------------------------------------------------*/

/*------P-CARD2----PAGE-SECTION---------------------------------------------------------------*/
.P-CARD2{
	margin-top: -200px;
	padding: 0;
	grid-column: 1/-1;
	grid-row: 3;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-auto-rows:5%;
	grid-template-areas:
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CT CT CT CT CT CT CT CT . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. . CF CF CF CF CF CF CF CF . .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TL TL TL TL TL TL TL TL TL TL .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
		'. TR TR TR TR TR TR TR TR TR TR .'
}

/*------/P-CARD2----PAGE-SECTION---------------------------------------------------------------*/
/*------TEXTCARD----PAGE-SECTION---------------------------------------------------------------*/

.TEXTCARD{
margin-top: -180px;
grid-column: 1/-1;
grid-row: 3;
display: grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows:5%;
grid-template-areas:
"TCT TCT TCT . . . . . . . . ."
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
;
}
/*--GENERAL--*/
.T-CONTAINER{
		background-size: 100vw 5%;
	}

.TCT{
		max-width: 40vw;
		margin-bottom: 100px;
	}
.TEXTCARD .CARDTEXT{
	margin-top: -60px;
}	
	
	
/*--/GENERAL--*/
}
/*---------------------/iPad Mini---500px>-------PORTRAIT-----------------------------------------------------------------------*/



/*-----------------------iPad Mini----------768x1024px>---LANDSCAPE/LAPTOP......................---------------------------------*/

@media (min-width:1000px){

/*------------------------------------GENERAL----------------------------------------------------------------*/
.CONTAINER{
		width:100%;
		min-width:100vw;
		min-height:100vh;
		background-image: url(images/BG-Cool-Gray7.png);		
		background-position: 0% 0%;
		background-size: 100vw 35%;
		background-repeat: no-repeat;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 18dvh 1fr 10dvh;
		grid-template-areas:
		'header header header header header header header header header header header header'
		'main main main main main main main main main main main main'		
		'footer footer footer footer footer footer footer footer footer footer footer footer';
}

.T-CONTAINER{
		width:100%;
		min-width:100vw;
		min-height:100vh;
		background-image: url(images/BG-Cool-Gray7.png);		
		background-position: 0% 0%;
		background-size: 100vw 20%;
		background-repeat: no-repeat;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 20dvh 1fr 20dvh;
		grid-template-areas:
		'header header header header header header header header header header header header'
		'main main main main main main main main main main main main'
		'footer footer footer footer footer footer footer footer footer footer footer footer';
}
main{
	grid-area: main;
	margin-top:16vh;
	margin-bottom: -24vh;
	justify-content: center;
	background-color: var(--white);
}
footer{ 
	grid-area: footer;
	left:0;
	bottom: 0px;
	position: fixed;
	width: 100%;
	min-height:8vh;
	grid-column:1/-1;
	grid-row:3;
	padding:1rem 2rem 0 2rem;
	background-color: var(--gray);
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	column-gap: 0.25rem;
	row-gap:0;
	justify-content: center;
	align-content: center;
}


/*-------------------------------------------------------HERO-PAGE---------------------------------------------*/

.HERO-CARD{
	margin-top:-8%;
	width: 100%;
	max-width:100vw;
	grid-column: 2/12;
	grid-row:2;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 10%;
	grid-template-areas: 
	'M1 HF HF HF HF M5'
	'M1 HF HF HF HF M5'
	'M1 . . . . M5'
	'. . . . . .'
	'M2 MT MT MT MT M3'	
	
}
.HERO-FOTO{
	margin-top: -10px;
	width: 38vw;
	height: fit-content;
}
.HERO-TEXT{
	margin-top: 3rem;
	width:48vw;
}

.HMC{
	width: 24vw;
	height: fit-content;
	transform: scale(0.8);
	filter: drop-shadow(8px 8px 10px var(--gray));	
}
.MINICARD1, .MINICARD5{
	margin-top:-30px;
}
.MINICARD2, .MINICARD3{
	margin-top: -90px;
}

/*-------------------------------------------------------/HERO-PAGE---------------------------------------------*/

/*----------------------------CARD---PAGE-SECTION---------------------------------------------------------------*/

.CARD{
	margin-top: -100px;
	grid-template-areas:
	"PF PF PF . . . .  . CT CT CT CT"
	". . . . . . . . CT CT CT CT"
	". . . . . . . . CT CT CT CT"
	". . . . . . . . CF CF CF CF"
	". . . . . . . . CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL CF CF CF CF"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	"TL TL TL TL TL TL TL TL TR TR TR TR"
	;	
}
/*--------------GENERAL STYLING----------------*/

.PORTRETFOTO{
	margin-top: -20px;
	margin-bottom: -50px;
	width:22vw;
	display: flex;
	flex-direction: row;
}
.CT{		
	margin-top: -20px;
	width:36vw;
}
.CF {
	margin-top: 0px;
	width:36vw;
}

.CONTACT-FOTO{
	margin-top: 2rem;
	width: 24vw;
}
.CONTACT-SLOGAN{
	margin-top:-130px;
}
.ADRESFLEX-R{
		margin-top: 0px;
		display: flex;
		flex-direction:column;
		column-gap: 1rem;
		justify-content: start;
		align-content: center ;
	}

.ARTFOTO{
	width:18vw;
}
.ERGOTABEL-BUREAUS{
		margin-top: -80px;
		transform:scale(0.85)
	}
.FOTO-THUMB{
	margin-top: 0px;
	width:14vw;
}
.ADV{
	margin-top:-60px;
	padding: 1rem 0.5rem;
	color: var(--orange);
	background-color: var(--green);
	align-items: center;
}

.ERGOTABEL{
	margin-top:30px;
	transform:scale(0.85)
}
/*--------------/GENERAL----------------*/

/*------PORTFOLIO----PAGE-SECTION---------------------------------------------------------------*/

.PORTFOLIO{
	margin-top: -30px;
	grid-column: 1/-1;
	grid-row:2;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-areas:
	". PF PF . . . . . . CT CT ."
	". . . . . . . . . . . ."
	". . . . . . . . . . . ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC ."
	". PC PC PC PC PC PC PC PC PC PC .";	
}
/*--GENERAL--*/
.PORTFOLIO .PC{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		gap:0.5rem;
}

.ARTFOTO-MINI{
	margin:0 1rem;
	max-width:16vw;
}
.PORTFOLIO .PORTRETFOTO{
	margin-top: -140px;
	margin-bottom: 70px;
	width:20vw;
	display: flex;
	flex-direction: row;
}
.PFT{
	margin-top: -40px;
	margin-bottom: 40px;	
	width: 20vw;	
}
.PORTFOLIO .MINICARD{ 
	width: 13vw;
	border:2px solid var(--green);
	box-shadow:5px 10px 20px var(--dark-gray);
}
.ACTION{
	display: inline-flex;
	justify-content: start;
	gap: 1.5rem;
}
/*--/GENERAL--*/

/*------P-CARD----PAGE-SECTION---------------------------------------------------------------*/

.P-CARD{
	margin-top: -100px;
	grid-column: 1/-1;
	grid-row:2;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-auto-rows:5%;
	grid-template-areas:
	". PF . . . .  CT CT CT CT . ."
	". AF1 AF2 AF3 . . CT CT CT CT . . "
	". AF1 AF2 AF3 . . CT CT CT CT . . "
	". AF1 AF2 AF3 . . CT CT CT CT . . "
	". AF1 AF2 AF3 . . CF CF CF CF . . "
	". AF1 AF2 AF3 . . CF CF CF CF . . "
	". AF1 AF2 AF3 . . CF CF CF CF . . "
	". AF1 AF2 AF3 . . CF CF CF CF . . "
	". AF1 AF2 AF3 . . CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . ."	
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . ."
	". TL TL TL TL TL CF CF CF CF . ."
	". TL TL TL TL TL TR TR TR TR TR ."	
	". TL TL TL TL TL TR TR TR TR TR ."	
	". TL TL TL TL TL TR TR TR TR TR ."	
	". TL TL TL TL TL TR TR TR TR TR ."	
	". TL TL TL TL TL TR TR TR TR TR ."	
	". TL TL TL TL TL TR TR TR TR TR ."	
	". TL TL TL TL TL TR TR TR TR TR ."
	". TL TL TL TL TL TR TR TR TR TR ."
	". TL TL TL TL TL TR TR TR TR TR ."	;	
}

/*---GENERAL--*/

.P-CARD .PORTRETFOTO{
	margin-top: -100px;
	margin-bottom: 50px;
	width:18vw;
	display: flex;
	flex-direction: row;
}
.PCT{		
	margin-top: 0px;
	width:36vw;
}
.PCF {
	width:36vw;
	filter: drop-shadow(6px 8px var(--green));	
	overflow: hidden;
}
.PCF img{
	aspect-ratio: 1/0.6;
}
.PCF:hover {
	margin-top: -20px;
	z-index:100;
	overflow: visible;
	transform: scale(1.6) translateX(-20%);
	transition: 2s;
}
.PCF:hover img{
	aspect-ratio: auto;
}

.P-CARD .ARTFOTO-MINI{
	margin-top: 10px;
	width: 14vw;
	filter: drop-shadow(2px 3px var(--gray));	
}
.P-CARD .ARTFOTO-MINI:hover{
	z-index:100;
	transform: scale(1.8);
	transition: 2s;	
}
/*--/GENERAL--*/

/*------P-CARD2----PAGE-SECTION---------------------------------------------------------------*/

.P-CARD2{
	margin-top: -100px;
	grid-column: 1/-1;
	grid-row:4;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-auto-rows:5%;
	grid-template-areas:
	". PF . . . .  CT CT CT CT . ."
	". . . . . .  CT CT CT CT . ."
	". . . . . .  CT CT CT CT . ."
	". . . . . . CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL CF CF CF CF . . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "
	". TL TL TL TL TL TR TR TR TR TR . "	
}


/*------TEXTCARD----PAGE-SECTION---------------------------------------------------------------*/

.TEXTCARD{
margin-top: -140px;
grid-template-areas:
"TCT TCT TCT . . . . . . . . ."
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T";	
}
/*--GENERAL--*/
.TCT{
	max-width: 30vw;
	margin-bottom: 50px;
}	
.T-CONTAINER{
	background-size: 100vw 5%;
}
.TEXTCONTAINER{
	margin-top: 20px;
	padding: 0 2rem;
	display: flex;
	flex-direction: row;
	gap: 2rem;
	flex-basis: 1;
	flex-wrap: nowrap;	
}
/*--/GENERAL--*/
}
/*-----------------------/iPad Mini----------1024x768px>---LANDSCAPE/LAPTOP...............---------------------------------*/

/*-----------------------HP-Z-Book15----------1250>---LANDSCAPE/LAPTOP/DESKTOP-------------------------------------------*/
@media (min-width:1250px){

/*--GENERAL--*/

.CONTAINER{
	background-size: 100vw 35% ;
	overflow-x: hidden;
	grid-template-areas:
		'header header header header header header header header header header header header'
		'main main main main main main main main main main main main'
		'footer footer footer footer footer footer footer footer footer footer footer footer';
}
main{
	margin-bottom: -32vh;
}
footer{
	bottom: 0;
	min-height: 10vh;
	padding: 0.5rem 1rem 0 1rem
}

p{
	max-width: 65ch;
}
.ARTFOTO{
		max-width: 20vw;
	}
	.ARTFOTO-MINI{
		max-width:15vw;
	}
	
/*--/GENERAL--*/

/*-------------------------------------------------------HERO-PAGE---------------------------------------------*/

.HERO-CARD{
	margin-top:-6.5%;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: 
	'. . . . HF HF HF HF . . . .'
	'. M1 M1 . HF HF HF HF . M5 M5 .'
	'. M1 M1 . HF HF HF HF . M5 M5 .'
	'. M2 M2 . . . . . . M3 M3 .'	
	'. M2 M2 . MT MT MT MT . M3 M3 .'
	'. M2 M2 . MT MT MT MT . M3 M3 .';

}

/*--GENERAL--*/
.HERO-FOTO{
	margin-top:0px ;
	width: 30vw;
	height: fit-content;
	
}
.HERO-TEXT{	
	width:46vw;
}
.HMC{
	margin:0.5rem;
	width: 16vw;
	height: fit-content;
	filter: drop-shadow(8px 8px 10px var(--gray));	
}
.HERO-TEXT{
	margin-top: 50px;
}
.MINICARD1, .MINICARD5{
	margin-top: -80px;
}
.MINICARD2, .MINICARD3{
	margin-top: 0px;
}
/*--/GENERAL--*/
/*-------------------------------------------------------/HERO-PAGE---------------------------------------------*/

/*--------------------PAGES----CARD-----------EN--CARDCONTENT--IN-EEN--12-COLUMN-GRID--GRID-ROW-AUTO------------*/


/*--GENERAL--*/

.PORTRETFOTO{
	margin-top: -60x;
	margin-bottom: -50px;
	width:16vw;
	display: flex;
	flex-direction: row;
}
.CT{		
	margin-top: 0px;
	width:28vw;
}
.CF {
	margin-top: 0px;
	width:28vw;
}
.CARDTEXT{
	margin-top:0;
}
.FOTO-80{
	margin-top: -50px;
	transform:scale(0.75)
}
.ARTFOTO{
	margin-top: 0px;
	width: 15vw;
}
.ARTFOTO-MINI{
	max-width:15vw;
}
.FOTO-THUMB{
	margin-top: 0px;
	width:12vw;
}
.CONTACT-SLOGAN{
	margin-top:-160px;
}
.ERGOTABEL, .ERGOTABEL-BUREAUS{
		margin-top: -240px;
		transform:scale(0.6)
	}
.ACTION{
	display: inline-flex;
	justify-content: start;
	gap: 1.5rem;
}
/*--/GENERAL--*/

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

.PORTFOLIO{
	margin-top: -100px;
	grid-column: 1/-1;
	grid-row: 3;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-auto-rows: 5%;
	grid-template-areas:
		". PF PF PF . . . . . CT CT ."
		". PF PF PF . . . . . CT CT ."
		". PF PF PF . . . . . . . ."
		". . . . . . . . . . . ."
		". . . . . . . . . . . ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
	
}
/*--GENERAL--*/
	
.PORTFOLIO .PORTRETFOTO{
	margin-top: -40px;
	margin-bottom: -30px;
	display:flex;
	width:18vw;
}
.PFT{
	margin-top: 20px;
	margin-bottom: 40px;	
	width: 20vw;	
}
.MINICARD{ 
	margin-top: -50px;
	width: 14vw;
	transform:scale(0.8);
	border:2px solid var(--green);
	box-shadow:5px 10px 20px var(--dark-gray);
}
/*--/GENERAL--*/	

/*---------------------------------------P-CARD----------PAGE---------------------------------------------*/

/*--GENERAL--*/
.P-CARD .PORTRETFOTO{
	margin-top: -90px;
	margin-bottom: 20px;
	width:16vw;
	display: flex;
	flex-direction: row;
}
.PCT{		
	margin-top: -0px;
	width:28vw;
}
.PCF {
	margin-top:0px;
	width:28vw;
	aspect-ratio: 1/0.75;
	overflow: hidden;
}
.PCF:hover {
	margin-top: -20px;
	z-index:100;
	overflow: visible;
	transform: scale(1.6) translateX(-20%);
	transition: 2s;
}
.P-CARD .ARTFOTO-MINI{
	margin-top: 0px;
	width: 14vw;
	filter: drop-shadow(2px 3px var(--gray));	
}
.P-CARD .ARTFOTO-MINI:hover{
	z-index:100;
	transform: scale(1.8);
	transition: 2s;	
}
/*------P-CARD2----PAGE-SECTION---------------------------------------------------------------*/

.P-CARD2 .PCT{
	margin-top: 0px;
}

.P-CARD2 .PCF{
	margin-top: 0px;
}
.P-CARD2 .CARDTEXT{
	margin-top: 2rem;
}

.ARTFOTO-MINI{
	margin-top: -20px;
	max-width:12vw;
}
/*--/GENERAL--*/

/*---------------------------------------TEXTCARD----------PAGE---------------------------------------------*/


.TEXTCARD{
margin-top: -110px;
grid-template-areas:
". TCT TCT TCT . . . . . . . "
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T"
"T T T T T T T T T T T T";
}
/*--GENERAL--*/

.TCT{
	margin-bottom: 20px;
}	
.T-CONTAINER{
	background-size: 100vw 8%;
}
.TEXTCONTAINER{
	margin-top: 50px;
}

/*--/GENERAL--*/
}
/*-----------------------DESKTOP---------1920x1080---LANDSCAPE/DESKTOP/WIDESCREEN--------------------------------------*/
@media (min-width: 1900px){

	/*---GENERAL--*/

	
.CONTAINER{
	background-size: 100vw 32% ;
	overflow-x: hidden;
}
.T-CONTAINER{
	background-size: 100vw 11%;
}

footer{
	bottom: 0;
}	
	p{
		max-width: 80ch;
	}
	
	/*---/GENERAL---*/
/*-------------------------------------------------------HERO-PAGE---------------------------------------------*/

.HERO-CARD{
	margin-top:-8%;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: 
	'. . . . HF HF HF HF . . . .'
	'. M1 M1 . HF HF HF HF . M5 M5 .'
	'. M1 M1 . HF HF HF HF . M5 M5 .'
	'. M1 M1 . . . . . . M5 M5 .'
	'. M2 M2 . MT MT MT MT . M3 M3 .'
	'. M2 M2 . MT MT MT MT . M3 M3 .'
	'. M2 M2 . MT MT MT MT . M3 M3 .';
}
	
.HERO-FOTO, .HERO-TEXT{
	width: 32vw;
	height: fit-content;
}
.HERO-TEXT{
	margin-top: 100px;
}
.HMC{
	width: 20vw;
	height: fit-content;
	filter: drop-shadow(8px 8px 10px var(--gray));	
}

.MINICARD1, .MINICARD5{
	margin-top: -80px;
}
.MINICARD2, .MINICARD3{
	margin-top: -70px;
}

	/*-------------------------------------------------------/HERO-PAGE---------------------------------------------*/

/*--------------------PAGES----CARD-----------EN--CARDCONTENT--IN-EEN--12-COLUMN-GRID--GRID-ROW-AUTO------------*/

.CARD{	
	margin-top: -130px;
	grid-template-areas:
	". PF PF . . . . CT CT CT CT ."
	". PF PF . . . . CT CT CT CT ."
	". . . . . . . CF CF CF CF  ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL CF CF CF CF ."
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". TL TL TL TL TL TL TR TR TR TR . "
	". . . . . . . . . . . .";	
}
/*--/GENERAL--*/

.CT{		
	margin-top: -40px;
	width:28vw;
}
.CF {
	width:28vw;
}
.PORTRETFOTO{
	margin-top: -60px;
	margin-bottom: 0px;
	width:14vw;
	display: flex;
	flex-direction: row;
}
.CARDTEXT{
		margin-top: 3rem;
	}	
.ARTFOTO-ADV{
	margin-top: -200px;
	width:22vw;
	max-width: 40vw;
}
.ARTFOTO{
	margin-top: -40px;
	width:20vw;
	max-width: 40vw;

}
.ARTFOTO-MINI{
	max-width:12vw;
}
.FOTO-80{
	margin-top: -120px;
	transform:scale(0.85)
}
.FOTO-THUMB{
	margin-top: -160px;
	margin-left:9vw;
	width:10vw;
}
.ERGOTABEL-BUREAUS{
	margin-top:-60px;
	transform:scale(0.9)
}
.ERGOTABEL{
	margin-top:-120px;
	transform:scale(0.9)
}


/*--/GENERAL--*/

/*--------------------PORTFOLIO-CARD-----------EN--CARDCONTENT--IN-EEN--12-COLUMN-GRID--GRID-ROW-AUTO------------*/

.PORTFOLIO{
	margin-top: -40px;
	grid-column: 1/-1;
	grid-row: 3;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-auto-rows: 5%;
	grid-template-areas:
		". . . . . . . . . . . ."
		".  PF PF PF . . . . . CT CT ."
		".  PF PF PF . . . . . CT CT ."
		". . . . . . . . . . . ."
		". . . . . . . . . . . ."
		". . . . . . . . . . . ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."
		". PC PC PC PC PC PC PC PC PC PC ."		
		;
}

/*--GENERAL--*/	

.PORTFOLIO .PORTRETFOTO{
	margin-top: -160px;
	margin-bottom: 40px;
	width:14vw;
	display: flex;
	gap: 1rem;
	flex-direction: row;	
}
.PFT{
	margin-top: -80px;
	margin-bottom: 40px;	
	width: 20vw;	
}
.PORTFOLIO .MINICARD{ 
	width: 13vw;
	border:2px solid var(--green);
	box-shadow:5px 10px 20px var(--dark-gray);
}
/*--/GENERAL--*/

/*--------------------PAGES---P-CARD-----------EN--CARDCONTENT--IN-EEN--12-COLUMN-GRID--GRID-ROW-AUTO------------*/


.P-CARD{
		margin-top: -140px;
		grid-template-areas:
		". PF . . . .  . . CT CT CT ."
		". PF . . . .  . . CT CT CT ."
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". AF1 AF2 AF3 . . . . CF CF CF  . "
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."	
		". TL TL TL TL TL TR TR TR TR TR ."					
	;		
	}

/*--GENERAL--*/

.P-CARD .PORTRETFOTO{
	margin-top: -100px;
	margin-bottom: 0px;
	width:14vw;
	display: flex;
	flex-direction: row;
}
.PCT{		
	margin-top: -30px;
	width:28vw;
}
.PCF {
	margin-top: 0px;
	width:28vw;
	filter: drop-shadow(2px 4px var(--gray));
}
.PCF:hover {
	margin-top: 40px;
	z-index:100;
	transform: scale(1.6) translateX(-20%);
	transition: 2s;
}
.PC{
	margin-top: -10px;
}
.P-CARD .CARDTEXT{
	margin-top: 1rem;
}
.P-CARD .ARTFOTO-MINI{
	margin-top: 0px;
	width: 16vw;
	filter: drop-shadow(2px 3px var(--gray));	
}
.P-CARD .ARTFOTO-MINI:hover{
	z-index:100;
	transform: scale(1.8);
	transition: 2s;	
}
/*--/GENERAL--*/

/*--------------------PAGES---P-CARD2-----------EN--CARDCONTENT--IN-EEN--12-COLUMN-GRID--GRID-ROW-AUTO------------*/

.P-CARD2{
	grid-template-areas:
	". PF . . . . . CT CT CT CT ."
	". . . . . . .  CF CF CF CF  . "
	". . . . . . .  CF CF CF CF  . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . . CF CF CF CF . "
	". TL TL TL TL . TR TR TR TR TR . "
	". TL TL TL TL . TR TR TR TR TR . "
	". TL TL TL TL . TR TR TR TR TR . "
	". TL TL TL TL . TR TR TR TR TR . "
	". TL TL TL TL . TR TR TR TR TR . "
	". TL TL TL TL . TR TR TR TR TR . "	
	". TL TL TL TL . TR TR TR TR TR . "	
	". TL TL TL TL . TR TR TR TR TR . "	
	". TL TL TL TL . TR TR TR TR TR . "	
}
/*--------------------PAGES---TEXTCARD-----------EN--CARDCONTENT--IN-EEN--12-COLUMN-GRID--GRID-ROW-AUTO------------*/
	
.TEXTCARD{
	margin-top: -150px;
	grid-template-areas:
	"TCT TCT . . . . . . . . . ."
	'. . . . . . . . . . . .'
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"
	"T T T T T T T T T T T T"	;	
}
}