html, body, {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* don't delete the following line or you get some funny behaviour */
html {font-family: "Lucida Sans", sans-serif;}

#backgroundbody01 {
	padding: 0.625rem;
	background-image: url(../Imago/SFONDO_HETHERBLETHER.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: repeat;
}

#backgroundbody02 {
  padding: 0.625rem;
  background-image: url(../Imago/SFONDO_HETHERBLETHER.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#backgroundbody03 {
  padding: 0.31rem;
  background-image: url(../Imago/SFONDO_HETHERBLETHER.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#backgroundbody04 {
  padding: 0.31rem;
  background-image: url(../Imago/SFONDO_HETHERBLETHER.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.header {
	color: black;
	padding: 0px;
	text-align: center;
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu li {
	padding: 0.42rem;
	margin-bottom: 0.42rem;
	color: #ffffff;
	box-shadow: 0 0.42rem 0.42rem rgba(0,0,0,0.8), 0 0.42rem 0.42rem rgba(0,0,0,0.8);
}

.menu li:hover {background-color: #d9e0f6;}

.aside {
	padding: 1rem;
	color: black;
	text-align: center;
	font-size: 0.875rem;
	box-shadow: 0 0.42rem 0.42rem  rgba(0,0,0,0.24), 0 0.42rem 0.42rem rgba(0,0,0,0.36);
}

.description {
	text-align: center;
	font-size: 0.6875rem;
}

.descr_title {
	text-align: left;
	font-size: 0.6875rem;
}

.clr_bdy {
	background: rgba(255, 255, 255, 0.7);
}
	
.footer {
	color: black;
	text-align: center;
	font-size: 0.75rem;
	padding: 1rem;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	 position: absolute;
	 background-color: #f9f9f9;
	 min-width: 50%;
	 overflow:auto;
	 width: 200%;
	 box-shadow: 0rem 0.5rem 1rem 0rem rgba(0,0,0,0.8);
	 padding: 0.6rem 0.6rem;
	 z-index: 1;
}

.dropdown:hover .dropdown-content {
	display: block;
}


.imagelogo {
	float:center;
	width:10%;
	height:auto;
}

.icon_men {
	float:center;
	width:38%;
	height:auto;
	padding: 1%;
}

.glrpic {
	float: center;
	width:100%;
	height:100%;
	padding: 1%; 
	border-radius: 5%;
}

.gal_main_pic{
	float: center;
	width:80%;
	height:auto;
	padding:1%; 
	border-radius:5%;
}

.gal_main_thumb{
	float: center;
	width:20%;
	height:auto;
	padding:0%; 
	border-radius:5%;
}

.index_thumb{
	float: center;
	width:25%;
	height:auto;
	padding:0%; 
	border-radius:5%;
}

.enphasys{
	font-size: 2rem;
}
	

	/* For mobile phones: it will be overwrite by other condition keep this on top*/
[class*="col-"] {
	 width: 100%;
}

.title_h {
		font-size: 1rem;
		font-family: arial;
}

.item_index01 { grid-area: logo_area; font-size: 1rem; font-family: arial; text-align: left;}
.item_index02 { grid-area: slide_area; font-size: 1rem; font-family: arial; text-align: left;}
.item_index03 { grid-area: info_area; font-size: 1rem; font-family: arial; text-align: left;}
.item_index04 { grid-area: footer_area; font-size: 1rem; font-family: arial; text-align: center;}

.grid-container-i {
	display: grid;
	grid-template-areas:
		'logo_area'
		'slide_area'
		'info_area'
		'footer_area' ;
  gap: 0.2rem;
  background-color:none ;
  padding: 0.5rem;
}

.grid-container-i > div {

  text-align: center;
  padding: 0.5rem 0;
  font-size: 1rem;
	} 
	
.item1 { grid-area: header; font-size: 1rem; text-align: center;}
.item2 { grid-area: menu; font-size: 1rem;}
.item3 { grid-area: main; font-size: 1rem;}
.item4 { grid-area: footer; font-size: 0.8rem;}
.item5 { grid-area: main_pic; font-size: 1rem;}
.item6 { grid-area: pics_list01; font-size: 1rem;}
.item7 { grid-area: pics_list; font-size: 0.6rem;}
.item8 { grid-area: description; font-size: 0.6rem;}
.item9 { grid-area: info; font-size: 0.6rem;}
	
.grid-show-i {
	display: grid;
	grid-template-areas:
		'main_pic main_pic main_pic'
		'pic_list pics_list pics_list'
		'description description description'
		'info info info'
		;
	gap: 0.6rem;
	padding: 0.6rem;
}		
	
	
.grid-show-i > div {		
 	text-align: center;
  	padding: 0rem;
  	font-size: 1.25rem;
}

.item_a1 { grid-area: thing_a1; font-size: 1rem;}
.item_a2 { grid-area: thing_a2; font-size: 1rem;}
.item_a3 { grid-area: thing_a3; font-size: 1rem;}
.item_a4 { grid-area: thing_a4; font-size: 1rem;}
.item_a5 { grid-area: thing_a5; font-size: 1rem;}
.item_a6 { grid-area: thing_a6; font-size: 1rem;}

.item_b1 { grid-area: thing_b1; font-size: 1rem;}
.item_b2 { grid-area: thing_b2; font-size: 1rem;}
.item_b3 { grid-area: thing_b3; font-size: 1rem;}
.item_b4 { grid-area: thing_b4; font-size: 1rem;}
.item_b5 { grid-area: thing_b5; font-size: 1rem;}
.item_b6 { grid-area: thing_b6; font-size: 1rem;}

.item_c1 { grid-area: thing_c1; font-size: 1rem;}
.item_c2 { grid-area: thing_c2; font-size: 1rem;}
.item_c3 { grid-area: thing_c3; font-size: 1rem;}
.item_c4 { grid-area: thing_c4; font-size: 1rem;}
.item_c5 { grid-area: thing_c5; font-size: 1rem;}
.item_c6 { grid-area: thing_c6; font-size: 1rem;}

.item_c1 { grid-area: thing_c1; font-size: 1rem;}
.item_c2 { grid-area: thing_c2; font-size: 1rem;}
.item_c3 { grid-area: thing_c3; font-size: 1rem;}
.item_c4 { grid-area: thing_c4; font-size: 1rem;}
.item_c5 { grid-area: thing_c5; font-size: 1rem;}
.item_c6 { grid-area: thing_c6; font-size: 1rem;}

.item_d1 { grid-area: thing_d1; font-size: 1rem;}
.item_d2 { grid-area: thing_d2; font-size: 1rem;}
.item_d3 { grid-area: thing_d3; font-size: 1rem;}
.item_d4 { grid-area: thing_d4; font-size: 1rem;}
.item_d5 { grid-area: thing_d5; font-size: 1rem;}
.item_d6 { grid-area: thing_d6; font-size: 1rem;}

.item_e1 { grid-area: thing_e1; font-size: 1rem;}
.item_e2 { grid-area: thing_e2; font-size: 1rem;}
.item_e3 { grid-area: thing_e3; font-size: 1rem;}
.item_e4 { grid-area: thing_e4; font-size: 1rem;}
.item_e5 { grid-area: thing_e5; font-size: 1rem;}
.item_e6 { grid-area: thing_e6; font-size: 1rem;}

.grid-gallery-i {
	display: grid;
	grid-template-areas:
		'thing_a1 thing_a2' 
		'thing_a3 thing_a4' 
		'thing_a5 thing_a6'
		'thing_b1 thing_b2' 
		'thing_b3 thing_b4' 
		'thing_b5 thing_b6'
		'thing_c1 thing_c2' 
		'thing_c3 thing_c4' 
		'thing_c5 thing_c6'
		'thing_d1 thing_d2' 
		'thing_d3 thing_d4' 
		'thing_d5 thing_d6'
		'thing_e1 thing_e2' 
		'thing_e3 thing_e4' 
		'thing_e5 thing_e6'
		;
	gap: 0.1rem;
	padding: 0%;
}
.grid-gallery-h > div {
	text-align: center;
	padding: 3%;
	font-size: 1rem;
}  



	@media only screen and (min-width: 400px) {
	/* For desktop: this apply to all media with screen >400 */
	
	.imagelogo {
		float:center;
		width:35%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:32%;
		height:auto;
		padding: 1%;
	 }
	  
	.glrpic {
		float: center;
		width:100%;
		height:100%;
		padding: 1%; 
		border-radius: 5%;
	}
	  
	.gal_main_pic{
		float: center;
		width:80%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:20%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	  
	.title_h {
		font-size: 1rem;
	}
	  
	.grid-container-h {
		display: grid;
		grid-template-areas:
			'logo_area' 
			'slide_area' 
			'info_area'
			'footer_area';
		gap: 0.2rem;
		background-color:none ;
		padding: 0.5rem;
	}

	.grid-container-h > div {
		text-align: center;
		padding: 0rem;
		font-size: 1rem;
	} 
	
	.grid-show-h {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-h > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}	
	  
	.grid-gallery-h {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2' 
			'thing_a3 thing_a4' 
			'thing_a5 thing_a6'
			'thing_b1 thing_b2' 
			'thing_b3 thing_b4' 
			'thing_b5 thing_b6'
			'thing_c1 thing_c2' 
			'thing_c3 thing_c4' 
			'thing_c5 thing_c6'
			'thing_d1 thing_d2' 
			'thing_d3 thing_d4' 
			'thing_d5 thing_d6'
			'thing_e1 thing_e2' 
			'thing_e3 thing_e4' 
			'thing_e5 thing_e6'
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-h > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  
	  
	  
}

	@media only screen and (min-width: 500px) {
	  /* For desktop: this apply to all media with screen >500 */
	.imagelogo {
		float:center;
		width:28%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:38%;
		height:auto;
		padding: 1%;
	}
	  
	.glrpic {
		float: center;
		width: 80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}
	  
	.gal_main_pic{
		float: center;
		width:80%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:20%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	  	  
	.title_h {
		font-size: 1rem;
	}
	  
	.grid-container-g {
		display: grid;
		grid-template-areas:
			'logo_area' 
			'slide_area' 
			'info_area'
			'footer_area';
		gap: 0rem;
		padding: 2%;
	}

	.grid-container-g > div {
		text-align: center;
		padding: 0rem;
		font-size: 1rem;
	} 
	
	
	.grid-show-g {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-g > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}
		
	.grid-gallery-g {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2' 
			'thing_a3 thing_a4' 
			'thing_a5 thing_a6'
			'thing_b1 thing_b2' 
			'thing_b3 thing_b4' 
			'thing_b5 thing_b6'
			'thing_c1 thing_c2' 
			'thing_c3 thing_c4' 
			'thing_c5 thing_c6'
			'thing_d1 thing_d2' 
			'thing_d3 thing_d4' 
			'thing_d5 thing_d6'
			'thing_e1 thing_e2' 
			'thing_e3 thing_e4' 
			'thing_e5 thing_e6'
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-g > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  
	  
	  
}
@media only screen and (min-width: 600px) {
	/* For desktop: this apply to all media with screen >600 */
	.imagelogo {
		float:center;
		width:25%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:35%;
		height:auto;
		padding: 1%;
	}
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}
	
	.gal_main_pic{
		float: center;
		width:80%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:20%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	
	.title_h {
		font-size: 1rem;
	}	  

	.grid-container-f {
		display: grid;
		grid-template-areas:
			'logo_area' 
			'slide_area' 
			'info_area'
			'footer_area';
		gap: 0rem;
		padding: 2%;
	}

	.grid-container-f > div {
		text-align: center;
		padding: 0rem;
		font-size: 1rem;
	} 
	
	.grid-show-f {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-f > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}
	
	.grid-gallery-f {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3' 
			'thing_a4 thing_a5 thing_a6' 
			'thing_b1 thing_b2 thing_b3' 
			'thing_b4 thing_b5 thing_b6'
			'thing_c1 thing_c2 thing_c3' 
			'thing_c4 thing_c5 thing_c6' 
			'thing_d1 thing_d2 thing_d3' 
			'thing_d4 thing_d5 thing_d6'
			'thing_e1 thing_e2 thing_e3' 
			'thing_e4 thing_e5 thing_e6' 
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-f > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  

}

@media only screen and (min-width: 700px) {
	  /* For desktop: this apply to all media with screen >768 */
	.imagelogo {
		float:center;
		width:20%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:30%;
		height:auto;
		padding: 1%;
	}
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}
	  
	.gal_main_pic{
		float: center;
		width:70%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:18%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	
	.title_h {
		font-size: 1rem;
	}	  	 
	
	.grid-container-e {
		display: grid;
		grid-template-areas:
			'logo_area' 
			'slide_area' 
			'info_area'
			'footer_area';
		gap: 0rem;
		padding: 2%;
	}

	.grid-container-e > div {
		text-align: center;
		padding: 0rem;
		font-size: 1rem;
	} 
	
	.grid-show-e {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-e > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}	
	
	.grid-gallery-e {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3' 
			'thing_a4 thing_a5 thing_a6' 
			'thing_b1 thing_b2 thing_b3' 
			'thing_b4 thing_b5 thing_b6'
			'thing_c1 thing_c2 thing_c3' 
			'thing_c4 thing_c5 thing_c6' 
			'thing_d1 thing_d2 thing_d3' 
			'thing_d4 thing_d5 thing_d6'
			'thing_e1 thing_e2 thing_e3' 
			'thing_e4 thing_e5 thing_e6' 
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-e > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  
	
	  
}
@media only screen and (min-width: 800px) {
	  /* For desktop: this apply to all media with screen >800 */
	.imagelogo {
		float:center;
		width:20%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:30%;
		height:auto;
		padding: 1%;
	}
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}

	.gal_main_pic{
		float: center;
		width:60%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:15%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	  
	.title_h {
		font-size: 1.2rem;
	}	  
	  
	.grid-container-d {
		display: grid;
		grid-template-areas:
			'logo_area'
			'slide_area'
			'info_area'
			'footer_area' ;
	gap: 0.2rem;
	background-color:none ;
	padding: 0.5rem;
	}
	
	.grid-container-d > div {
		text-align: center;
		padding: 0rem;
		font-size: 1rem;
	}
	
	.grid-show-d {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-d > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}

	.grid-gallery-d {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3' 
			'thing_a4 thing_a5 thing_a6' 
			'thing_b1 thing_b2 thing_b3' 
			'thing_b4 thing_b5 thing_b6'
			'thing_c1 thing_c2 thing_c3' 
			'thing_c4 thing_c5 thing_c6' 
			'thing_d1 thing_d2 thing_d3' 
			'thing_d4 thing_d5 thing_d6'
			'thing_e1 thing_e2 thing_e3' 
			'thing_e4 thing_e5 thing_e6' 
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-d > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  


	  
}
@media only screen and (min-width: 900px) {
	  /* For desktop: this apply to all media with screen >900 */
	.imagelogo {
		float:center;
		width:20%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:30%;
		height:auto;
		padding: 1%;
	}
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}
	
	.gal_main_pic{
		float: center;
		width:60%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:15%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	  	
	.title_h {
		font-size: 1.3rem;
	}		
	  
	.grid-container-c {
		display: grid;
		grid-template-areas:
			'logo_area'
			'slide_area'
			'info_area'
			'footer_area' ;
	gap: 0.2rem;
	background-color:none ;
	padding: 0.5rem;
	}

	.grid-container-c > div {		
		text-align: center;
		padding: 0rem;
		font-size: 1rem;
	}
	
	.grid-show-c {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-c > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}	

	.grid-gallery-c {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3 thing_a4' 
			'thing_a5 thing_a6 thing_b1 thing_b2' 
			'thing_b3 thing_b4 thing_b5 thing_b6' 
			'thing_c1 thing_c2 thing_c3 thing_c4' 
			'thing_c5 thing_c6 thing_d1 thing_d2' 
			'thing_d3 thing_d4 thing_d5 thing_d6' 
			'thing_e1 thing_e2 thing_e3 thing_e4' 
			'thing_e5 thing_e6 thing_e6 thing_e6'
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-c > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  
	
	
	  
}
@media only screen and (min-width: 1000px) {
	  /* For desktop: this apply to all media with screen >1000*/
	.imagelogo {
		float:center;
		width:20%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:30%;
		height:auto;
		padding: 1%;
	 }
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}

	.gal_main_pic{
		float: center;
		width:50%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:15%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	  
	.title_h {
		font-size: 1.3rem;
	}
	  
	.grid-container-b {
		display: grid;
		grid-template-areas:
			'logo_area'
			'slide_area'
			'info_area'
			'footer_area' ;
	gap: 0.2rem;
	background-color:none ;
	padding: 0.5rem;
	}

	.grid-container-b > div {		
		text-align: center;
		padding: 0rem;
		font-size: 1.25rem;
	}	  
	
	.grid-show-b {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-b > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}
	
	.grid-gallery-b {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3 thing_a4' 
			'thing_a5 thing_a6 thing_b1 thing_b2' 
			'thing_b3 thing_b4 thing_b5 thing_b6' 
			'thing_c1 thing_c2 thing_c3 thing_c4' 
			'thing_c5 thing_c6 thing_d1 thing_d2' 
			'thing_d3 thing_d4 thing_d5 thing_d6' 
			'thing_e1 thing_e2 thing_e3 thing_e4' 
			'thing_e5 thing_e6 thing_e6 thing_e6'
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-b > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  

	  
}
@media only screen and (min-width: 1100px) {
	  /* For desktop: this apply to all media with screen >1100 */
	.imagelogo {
		float:center;
		width:20%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:30%;
		height:auto;
		padding: 1%;
	 }
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}

	.gal_main_pic{
		float: center;
		width:40%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:15%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	  	 
	.title_h {
		font-size: 1.5rem;
	}
		 
	.grid-container-a {
		display: grid;
		grid-template-areas:
			'logo_area slide_area slide_area' 
			'info_area slide_area slide_area'
			'footer_area footer_area footer_area' ;
	gap: 0.2rem;
	background-color:none ;
	padding: 0.5rem;
	}

	.grid-container-a > div {		
		text-align: center;
		padding: 0rem;
		font-size: 1.25rem;
	}
	
	.grid-show-a {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info'
			;
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show-a > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}	
	
	.grid-gallery-a {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3 thing_a4' 
			'thing_a5 thing_a6 thing_b1 thing_b2' 
			'thing_b3 thing_b4 thing_b5 thing_b6' 
			'thing_c1 thing_c2 thing_c3 thing_c4' 
			'thing_c5 thing_c6 thing_d1 thing_d2' 
			'thing_d3 thing_d4 thing_d5 thing_d6' 
			'thing_e1 thing_e2 thing_e3 thing_e4' 
			'thing_e5 thing_e6 thing_e6 thing_e6'
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery-a > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  
	  
	  
}
@media only screen and (min-width: 1200px) {
	  /* For desktop: this apply to all media with screen >1200 */
	.imagelogo {
		float:center;
		width:30%;
		height:auto;
	}

	.icon_men {
		float:center;
		width:30%;
		height:auto;
		padding: 1%;
	}
	  
	.glrpic {
		float: center;
		width:80%;
		height:80%;
		padding: 1%; 
		border-radius: 5%;
	}

	.gal_main_pic{
		float: center;
		width:35%;
		height:auto;
		padding:1%; 
		border-radius:5%;
	}

	.gal_main_thumb{
		float: center;
		width:10%;
		height:auto;
		padding:0%; 
		border-radius:5%;
	}
	
	.title_h {
		font-size: 1.5rem;
	}
	
	.grid-container {
		display: grid;
		grid-template-areas:
			'logo_area slide_area slide_area' 
			'info_area slide_area slide_area'
			'footer_area footer_area footer_area' ;
	gap: 0.2rem;
	background-color:none ;
	padding: 0.5rem;
	}

	.grid-container > div {		
	  	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}
	
	.grid-show {
		display: grid;
		grid-template-areas:
			'main_pic main_pic main_pic'
			'pic_list pics_list pics_list'
			'description description description'
			'info info info';
		gap: 0.6rem;
		padding: 0.6rem;
	}		
	
	
	.grid-show > div {		
	 	text-align: center;
	  	padding: 0rem;
	  	font-size: 1.25rem;
	}
	
	.grid-gallery {
		display: grid;
		grid-template-areas:
			'thing_a1 thing_a2 thing_a3 thing_a4' 
			'thing_a5 thing_a6 thing_b1 thing_b2' 
			'thing_b3 thing_b4 thing_b5 thing_b6' 
			'thing_c1 thing_c2 thing_c3 thing_c4' 
			'thing_c5 thing_c6 thing_d1 thing_d2' 
			'thing_d3 thing_d4 thing_d5 thing_d6' 
			'thing_e1 thing_e2 thing_e3 thing_e4' 
			'thing_e5 thing_e6 thing_e6 thing_e6'
			;
		gap: 0.1rem;
		padding: 0%;
	}

	.grid-gallery > div {
		text-align: center;
		padding: 3%;
		font-size: 1rem;
	}  
	
}


* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container_show {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: relative;
  top: 70%;
  width: 50%;
  padding: 0.5rem;
  margin-top: -3.125rem;
  color: black;
  font-weight: bold;
  font-size: 1.25rem;
  border-radius: 0 0.312rem 0.312rem 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}
 .prev {
	 left: 0;
	 border-radius: 0.5rem 0 0 0.5rem;
 }
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  position: center;
  top: 0;
}



/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 0.5;
}


/* The Modal (background) */
div.img {
    margin: 5px;
    /*border: 1px solid #ccc;*/
    float: left;
    width: 220px;
}

    div.img:hover {
        border: 1px solid #777;
    }

    div.img img {
        width: 100%;
        height: auto;
    }

div.desc {
    padding: 15px;
    text-align: center;
}

.img {
    cursor: pointer;
    transition: 0.5s;
}

.image {
    border-radius: 5px;
}

    .image:hover {
        opacity: 0.7;
        border-radius: 500px;
    }
/* The Modal (background) */


:root {
  --slides: 9;
  --slide-duration: 3000ms;
}
  
/* Slideshow Images START */
  .phone-slideshow-list li:nth-child(1) {
    background-image: url(../Imago/slideshow/ILLUSTRATION_BIGBEN.jpg); /* JPG */
    background-color: none;
  }
  .phone-slideshow-list li:nth-child(2) {
    background-image:url(../Imago/slideshow/ILLUSTRATION_LEMER.jpg); /* JPG */
  }
  .phone-slideshow-list li:nth-child(3) {
    background-image:url(../Imago/slideshow/ILLUSTRATION_WHITECHAPEL.jpg);/* JPG */
  }
  .phone-slideshow-list li:nth-child(4) {
    background-image:url(../Imago/slideshow/PAINTING_ANGELO.jpg); /* JPG */
  }
  .phone-slideshow-list li:nth-child(5) {
    background-image:url(../Imago/slideshow/PAINTING_MARY.jpg); /* JPG */
  }
  .phone-slideshow-list li:nth-child(6) {
    background-image:url(../Imago/slideshow/PAINTING_ST_MONANS.jpg); /* JPG */
  }
  .phone-slideshow-list li:nth-child(7) {
    background-image:url(../Imago/slideshow/TEXTILE_SELF.jpg); /* JPG */
  }
  .phone-slideshow-list li:nth-child(8) {
    background-image:url(../Imago/slideshow/TEXTILE_LANCE.jpg); /* JPG */
  }
  .phone-slideshow-list li:nth-child(9) {
    background-image:url(../Imago/slideshow/TEXTILE_OF_SEA_AND_STONE.jpg); /* JPG */
  }




/* Slideshow Images END */

.phone-slideshow {
  width: 100%;
  height: auto;
  max-width: 264px;
  margin: auto;
  position: relative;
  display: table;
}
    .phone-slideshow:before { /* Phone Template */
      content: "";
      display: block;
      width: 100%;
      height: 0%;
      padding-bottom: 206.13%;
      background: #0002;
      background: transparent no-repeat 50% 50%;
      background-size: contain;
      position:absolute;
      top:0;
      left:0;
      z-index: 2;
    }

.phone-slideshow .screen-mask {
    display: block;
    border: 1px solid purple;
    width: auto;
    height: 100%;
    margin: 3%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding-bottom: 200%;
    border-radius: 7%;
}

.phone-slideshow-list {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  display:block;
  width: calc(100% * var(--slides) );
  height: 100%;
  margin: 0;
  padding:0;
  display: flex;
  flex-direction: row;
    animation-name: phone-slideshow;
    animation-duration: calc(var(--slide-duration) * var(--slides));
    animation-iteration-count: infinite;
    animation-delay: 2s;
}

  .phone-slideshow-list li {
    display: block;
    width: calc(100% * var(--slides));
    width: 100%;
    height: 0%;
    padding-bottom: 23.75%;
    font-size: 5em;
    position: relative;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }

    .phone-slideshow-list li:first-child {
      z-index:-1;
      animation-name: first-loop;
      animation-duration: calc(var(--slide-duration) * var(--slides));
      animation-iteration-count: infinite;
      animation-delay: 3s;
    }


@keyframes phone-slideshow {
  0%   {left: 0;}
  5.5%  {left: calc( -100% ); }
  11%  {left: calc( -100% ); }
  16.5%  {left: calc( -100%*2 ); }
  22%  {left: calc( -100%*2 ); }
  27.5%  {left: calc( -100%*3 ); }
  33%  {left: calc( -100%*3 ); }
  38.5%  {left: calc( -100%*4 ); }
  44%  {left: calc( -100%*4 ); }
  49.5%  {left: calc( -100%*5 ); }
  55%  {left: calc( -100%*5 ); }
  60.5%  {left: calc( -100%*6 ); }
  66%  {left: calc( -100%*6 ); }
  71.5%  {left: calc( -100%*7 ); }
  77%  {left: calc( -100%*7 ); }
  82.5%  {left: calc( -100%*8 ); }
  88%  {left: calc( -100%*8 ); }
  93.5%  {left: calc( -100%*9 ); }
  99.99%  {left: calc( -100%*9 ); }
  100% {left: 0;}
}

@keyframes first-loop {
  0%   {left: 0;}
  47.99%  {left: 0; }
  48%  {left: calc( 100% ); }
  99.99%  {left: calc( 100% ); }
  100% {left: 0;}
}