/*
===========================================================================
hylide User Interface
Montage Layout Raster
28.12.2019
V1.00.00
---------------------------------------------------------------------------
Copyright YGG
www.ygg.de
===========================================================================



===========================================================================
Erklärungen
---------------------------------------------------------------------------

Layoutstil (Frei / Raster)

.hui_montage.lytX_XXX.freestyle
	Die Klasse ".freestyle" gibt an, dass die Bilder frei
	positioniert werden und nicht in einem Raster angordnet sind.
	Dadurch werden die Rahmen anders behandelt.

.hui_montage.lytX_XXX.gridstyle
	Die Klasse ".gridstyle" gibt an, dass die Bilder in einem
	Raster angordnet sind. Dadurch werden die Rahmen entsprechend gesetzt.

---------------------------------------------------------------------------

Layouts / Reservierte Nummerierung
	.lytX_1XX -> Rasterlayouts
	.lytX_2XX -> Versetzt
	.lytX_3XX -> Frei
	.lytX_9XX -> Benutzer

---------------------------------------------------------------------------

Positionierungseinstellungen für die einzelnen Elemente

	.hui_montage .adjust { padding-top: 100%; }
	Die Positionierungsbox hat jetzt ein Seitenverhältnis von 1:1
	Elemente 

	.hui_montage .adjust { height: 100%; }
	Die Positionierungsbox hat die volle Höhe

===========================================================================
*/



/* ----- Allgemein ----- */

.hui_montage .position {
	position: relative;
}	
.hui_montage .adjust {
	position: absolute;
	dvisibility: hidden;			/* Sichtbarkeit der Hintergrundfläche */
	left: 0px;		
	right: 0px;
	top: 0px;
}	
.hui_montage .adjust {			/* Größe der Positionierungsbox definieren */
	height: 100%;
	padding-top: 0%;
}	



/* ----- Bildeinstellungen ----- */

.hui_montage .picbox {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	box-sizing: border-box;
}
.hui_montage .picbox > div {
	height: 100%;
	background-size: cover;
	background-position: center center;
	border-radius: 0px;
	box-sizing: border-box;
}
.hui_montage .picbox a {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}



/* ----- Rahmenfarbe ----- */

/* Rahmenfarbe - Freestyle */
.hui_montage.freestyle .picbox > div {
	border-color: white;
}
d.hui_montage.freestyle[class*="hui_montage_border_type_clear"] .picbox > div {
	border-color: transparent;
}
/* Rahmenfarbe - Gridstyle */
.hui_montage.gridstyle .adjust:before {
	content: "";
	position: absolute;
	background: rgb(255,255,255);
}
.hui_montage.gridstyle[class*="hui_montage_border_type_clear"] .adjust:before {
	display: none;
}



/* ----- Rahmentyp ----- */

/* Rahmen - Standard / Transparenter */
.hui_montage .picbox > div { }
/* Rahmen - Eckig */
.hui_montage.hui_montage_border_type_solid_square .picbox div,
.hui_montage.hui_montage_border_type_clear_square .picbox div { border-radius: 0px; }
/* Rahmen - Rund */
.hui_montage.hui_montage_border_type_solid_round .picbox div,
.hui_montage.hui_montage_border_type_clear_round .picbox div { border-radius: 1000px; }
.hui_montage.hui_montage_border_type_solid_round.gridstyle .adjust:before { border-radius: 10px; }
/* Rahmen - Abgerundet */
.hui_montage.hui_montage_border_type_solid_rounded_1 .picbox div,
.hui_montage.hui_montage_border_type_clear_rounded_1 .picbox div { border-radius: 20px; }
.hui_montage.hui_montage_border_type_solid_rounded_1.gridstyle .adjust:before { border-radius: 20px; }
.hui_montage.hui_montage_border_width_small.hui_montage_border_type_solid_rounded_1.gridstyle .adjust:before { border-radius: 15px; }
.hui_montage.hui_montage_border_width_large.hui_montage_border_type_solid_rounded_1.gridstyle .adjust:before { border-radius: 30px; }
/* Rahmen - Spezial */
.hui_montage.hui_montage_border_type_solid_rounded_2 .picbox div,
.hui_montage.hui_montage_border_type_clear_rounded_2 .picbox div { border-radius: 10px 100px 10px 100px; }
.hui_montage.hui_montage_border_type_solid_rounded_2.gridstyle .adjust:before { border-radius: 20px 110px 20px 110px; }
.hui_montage.hui_montage_border_width_small.hui_montage_border_type_solid_rounded_2.gridstyle .adjust:before { border-radius: 15px 105px 15px 105px; }
.hui_montage.hui_montage_border_width_large.hui_montage_border_type_solid_rounded_2.gridstyle .adjust:before { border-radius: 30px 120px 30px 120px; }

@media screen and (max-width: 750px) {
	/* Rahmen - Rund */
	.hui_montage.hui_montage_border_type_solid_round .picbox div,
	.hui_montage.hui_montage_border_type_clear_round .picbox div { border-radius: 1000px; }
	.hui_montage.hui_montage_border_type_solid_round.gridstyle .adjust:before { border-radius: 5px; }
	/* Rahmen - Abgerundet */
	.hui_montage.hui_montage_border_type_solid_rounded_1 .picbox div,
	.hui_montage.hui_montage_border_type_clear_rounded_1 .picbox div { border-radius: 10px; }
	.hui_montage.hui_montage_border_type_solid_rounded_1.gridstyle .adjust:before { border-radius: 10px; }
	.hui_montage.hui_montage_border_width_small.hui_montage_border_type_solid_rounded_1.gridstyle .adjust:before { border-radius: 7.5px; }
	.hui_montage.hui_montage_border_width_large.hui_montage_border_type_solid_rounded_1.gridstyle .adjust:before { border-radius: 10px; }
	/* Rahmen - Spezial */
	.hui_montage.hui_montage_border_type_solid_rounded_2 .picbox div,
	.hui_montage.hui_montage_border_type_clear_rounded_2 .picbox div { border-radius: 5px 50px 5px 50px; }
	.hui_montage.hui_montage_border_type_solid_rounded_2.gridstyle .adjust:before { border-radius: 10px 55px 10px 55px; }
	.hui_montage.hui_montage_border_width_small.hui_montage_border_type_solid_rounded_2.gridstyle .adjust:before { border-radius: 7px 50px 7px 50px; }
	.hui_montage.hui_montage_border_width_large.hui_montage_border_type_solid_rounded_2.gridstyle .adjust:before { border-radius: 10px 60px 10px 60px; }
}



/* ----- Rahmengrößen ----- */
.hui_montage.gridstyle.hui_montage_border_width_off .position { margin: 0px; }
.hui_montage.gridstyle.hui_montage_border_width_off .picbox { padding: 0px; }
.hui_montage.gridstyle.hui_montage_border_width_off .adjust:before { left: 0px; right: 0px; top: 0px; bottom: 0px; }
.hui_montage.gridstyle.hui_montage_border_width_small .position { margin: -2.5px; }
.hui_montage.gridstyle.hui_montage_border_width_small .picbox { padding: 2.5px; }
.hui_montage.gridstyle.hui_montage_border_width_small .adjust:before { left: 2.5px; right: 2.5px; top: 2.5px; bottom: 2.5px; }
.hui_montage.gridstyle.hui_montage_border_width .position { margin: -5px; }
.hui_montage.gridstyle.hui_montage_border_width .picbox { padding: 5px; }
.hui_montage.gridstyle.hui_montage_border_width .adjust:before { left: 5px; right: 5px; top: 5px; bottom: 5px; }
.hui_montage.gridstyle.hui_montage_border_width_large .position { margin: -10px; }
.hui_montage.gridstyle.hui_montage_border_width_large .picbox { padding: 10px; }
.hui_montage.gridstyle.hui_montage_border_width_large .adjust:before { left: 10px; right: 10px; top: 10px; bottom: 10px; }

[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_off { padding: 0px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_off .position { margin: 0px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_off .picbox { padding: 0px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_off .adjust:before { left: 0px; right: 0px; top: 0px; bottom: 0px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small { padding: 5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small .position { margin: -2.5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small .picbox { padding: 2.5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small .adjust:before { left: -2.5px; right: -2.5px; top: -2.5px; bottom: -2.5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width { padding: 10px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width .position { margin: -5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width .picbox { padding: 5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width .adjust:before { left: -5px; right: -5px; top: -5px; bottom: -5px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large { padding: 20px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large .position { margin: -10px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large .picbox { padding: 10px; }
[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large .adjust:before { left: -10px; right: -10px; top: -10px; bottom: -10px; }

.hui_montage.freestyle.hui_montage_border_width_off .picbox > div { border-width: 0px; border-style: solid; }
.hui_montage.freestyle.hui_montage_border_width_small .picbox > div { border-width: 5px; border-style: solid; }
.hui_montage.freestyle.hui_montage_border_width .picbox > div  { border-width: 10px; border-style: solid; }
.hui_montage.freestyle.hui_montage_border_width_large .picbox > div  { border-width: 20px; border-style: solid; }

@media screen and (max-width: 750px) {
	.hui_montage.gridstyle.hui_montage_border_width_small .position { margin: -1px; }
	.hui_montage.gridstyle.hui_montage_border_width_small .picbox { padding: 1px; }
	.hui_montage.gridstyle.hui_montage_border_width_small .adjust:before { left: 1px; right: 1px; top: 1px; bottom: 1px; }
	.hui_montage.gridstyle.hui_montage_border_width .position { margin: -2px; }
	.hui_montage.gridstyle.hui_montage_border_width .picbox { padding: 2px; }
	.hui_montage.gridstyle.hui_montage_border_width .adjust:before { left: 2px; right: 2px; top: 2px; bottom: 2px; }
	.hui_montage.gridstyle.hui_montage_border_width_large .position { margin: -5px; }
	.hui_montage.gridstyle.hui_montage_border_width_large .picbox { padding: 5px; }
	.hui_montage.gridstyle.hui_montage_border_width_large .adjust:before { left: 5px; right: 5px; top: 5px; bottom: 5px; }
	
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small { padding: 2px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small .position { margin: -1px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small .picbox { padding: 1px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_small .adjust:before { left: -1px; right: -1px; top: -1px; bottom: -1px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width { padding: 4px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width .position { margin: -2px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width .picbox { padding: 2px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width .adjust:before { left: -2px; right: -2px; top: -2px; bottom: -2px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large { padding: 10px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large .position { margin: -5px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large .picbox { padding: 5px; }
	[class*="type_solid"].hui_montage.gridstyle.hui_montage_border_width_large .adjust:before { left: -5px; right: -5px; top: -5px; bottom: -5px; }
	
	.hui_montage.freestyle.hui_montage_border_width_small .picbox > div { border-width: 2px; border-style: solid; }
	.hui_montage.freestyle.hui_montage_border_width .picbox > div  { border-width: 4px; border-style: solid; }
	.hui_montage.freestyle.hui_montage_border_width_large .picbox > div  { border-width: 10px; border-style: solid; }
}



/* Rahmenstärke deaktivieren, wenn "border_type_clear" */
.hui_montage.gridstyle[class*="hui_montage_border_type_clear"] .picbox > div {
	border-width: 0px !important;
}


.hui_montage.freestyle .picbox > div {
	box-shadow: 0 10px 50px rgba(0,0,0,0.20);
}





/*
===========================================================================
Layoutdefinitionen
---------------------------------------------------------------------------
*/


/* 3 Bilder */

.hui_montage.lyt3_100 .position { padding-bottom: 50%; }
.hui_montage.lyt3_100 .adjust { height: 100%; }
.hui_montage.lyt3_100 .pic1,
.hui_montage.lyt3_100 .pic2,
.hui_montage.lyt3_100 .pic3 { visibility: visible; opacity: 1; }
.hui_montage.lyt3_100 .pic1 { left: 0%; top: 0%; width: 75%; height: 100%; }
.hui_montage.lyt3_100 .pic2 { left: 75%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt3_100 .pic3 { left: 75%; top: 50%; width: 25%; height: 50%; }
 
.hui_montage.lyt3_101 .position { padding-bottom: 50%; }
.hui_montage.lyt3_101 .adjust { height: 100%; }
.hui_montage.lyt3_101 .pic1,
.hui_montage.lyt3_101 .pic2,
.hui_montage.lyt3_101 .pic3 { visibility: visible; opacity: 1; }
.hui_montage.lyt3_101 .pic1 { left: 0%; top: 00%; width: 25%; height: 50%; }
.hui_montage.lyt3_101 .pic2 { left: 0%; top: 50%; width: 25%; height: 50%; }
.hui_montage.lyt3_101 .pic3 { left: 25%; top: 00%; width: 75%; height: 100%; }

.hui_montage.lyt3_102 .position { padding-bottom: 33.3333%; }
.hui_montage.lyt3_102 .adjust { height: 100%; }
.hui_montage.lyt3_102 .pic1,
.hui_montage.lyt3_102 .pic2,
.hui_montage.lyt3_102 .pic3 { visibility: visible; opacity: 1; }
.hui_montage.lyt3_102 .pic1 { left: 0%; top: 0%; width: 33.3333%; height: 100%; }
.hui_montage.lyt3_102 .pic2 { left: 33.3333%; top: 0%; width: 33.3333%; height: 100%; }
.hui_montage.lyt3_102 .pic3 { left: 66.6666%; top: 0%; width: 33.3333%; height: 100%; }

.hui_montage.lyt3_900 > *:first-child { padding: 2.5% 0.9% 2.5% 1.7%; }
.hui_montage.lyt3_900 .position { padding-bottom: 50%; overflow: visible; }
.hui_montage.lyt3_900 .adjust { height: 100%; }
.hui_montage.lyt3_900 .pic1,
.hui_montage.lyt3_900 .pic2,
.hui_montage.lyt3_900 .pic3 { visibility: visible; opacity: 1; }
.hui_montage.lyt3_900 .pic1 { left: 0%; top: 0%; width: 75%; height: 100%; }
.hui_montage.lyt3_900 .pic2 { left: 75%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt3_900 .pic3 { left: 66%; top: 38%; width: 25%; height: 50%; }
.hui_montage.lyt3_900 .pic1 > div { transform: rotateZ(-4deg); }
.hui_montage.lyt3_900 .pic2 > div { transform: rotateZ(5deg); }
.hui_montage.lyt3_900 .pic3 > div { transform: rotateZ(14deg); }
 
.hui_montage.lyt3_901 > *:first-child { dpadding: 2.5% 1.7%; }
.hui_montage.lyt3_901 .position { padding-bottom: 50%; overflow: visible; }
.hui_montage.lyt3_901 .adjust { height: 100%; }
.hui_montage.lyt3_901 .pic1,
.hui_montage.lyt3_901 .pic2,
.hui_montage.lyt3_901 .pic3 { visibility: visible; opacity: 1; }
.hui_montage.lyt3_901 .pic1 { left: 0%; top: 0%; width: 75%; height: 100%; }
.hui_montage.lyt3_901 .pic2 { left: 75%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt3_901 .pic3 { left: 66%; top: 38%; width: 25%; height: 50%; }

/* 5 Bilder */

.hui_montage.lyt5_100 .position { padding-bottom: 50%; }
.hui_montage.lyt5_100 .adjust { height: 100%; }
.hui_montage.lyt5_100 .pic1,
.hui_montage.lyt5_100 .pic2,
.hui_montage.lyt5_100 .pic3,
.hui_montage.lyt5_100 .pic4,
.hui_montage.lyt5_100 .pic5 { visibility: visible; opacity: 1; }
.hui_montage.lyt5_100 .pic1 { left: 0%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt5_100 .pic2 { left: 25%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt5_100 .pic3 { left: 0%; top: 50%; width: 25%; height: 50%; }
.hui_montage.lyt5_100 .pic4 { left: 25%; top: 50%; width: 25%; height: 50%; }
.hui_montage.lyt5_100 .pic5 { left: 50%; top: 0%; width: 50%; height: 100%; }
 
.hui_montage.lyt5_101 .position { padding-bottom: 50%; }
.hui_montage.lyt5_101 .adjust { height: 100%; }
.hui_montage.lyt5_101 .pic1,
.hui_montage.lyt5_101 .pic2,
.hui_montage.lyt5_101 .pic3,
.hui_montage.lyt5_101 .pic4,
.hui_montage.lyt5_101 .pic5 { visibility: visible; opacity: 1; }
.hui_montage.lyt5_101 .pic1 { left: 0%; top: 0%; width: 50%; height: 100%; }
.hui_montage.lyt5_101 .pic2 { left: 50%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt5_101 .pic3 { left: 75%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt5_101 .pic4 { left: 50%; top: 50%; width: 25%; height: 50%; }
.hui_montage.lyt5_101 .pic5 { left: 75%; top: 50%; width: 25%; height: 50%; }
 
.hui_montage.lyt5_102 .position { padding-bottom: 50%; }
.hui_montage.lyt5_102 .adjust { height: 100%; }
.hui_montage.lyt5_102 .pic1,
.hui_montage.lyt5_102 .pic2,
.hui_montage.lyt5_102 .pic3,
.hui_montage.lyt5_102 .pic4,
.hui_montage.lyt5_102 .pic5 { visibility: visible; opacity: 1; }
.hui_montage.lyt5_102 .pic1 { left: 0%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt5_102 .pic2 { left: 0%; top: 50%; width: 25%; height: 50%; }
.hui_montage.lyt5_102 .pic3 { left: 25%; top: 0%; width: 50%; height: 100%; }
.hui_montage.lyt5_102 .pic4 { left: 75%; top: 0%; width: 25%; height: 50%; }
.hui_montage.lyt5_102 .pic5 { left: 75%; top: 50%; width: 25%; height: 50%; }

/* 6 Bilder */

.hui_montage.lyt6_100 .position { padding-bottom: 100%; }
.hui_montage.lyt6_100 .adjust { height: 100%; }
.hui_montage.lyt6_100 .pic1,
.hui_montage.lyt6_100 .pic2, 
.hui_montage.lyt6_100 .pic3,
.hui_montage.lyt6_100 .pic4,
.hui_montage.lyt6_100 .pic5,
.hui_montage.lyt6_100 .pic6 { visibility: visible; opacity: 1; }
.hui_montage.lyt6_100 .pic1 { left: 0%; top: 0%; width: 75%; height: 50%; }
.hui_montage.lyt6_100 .pic2 { left: 75%; top: 0%; width: 25%; height: 25%; }
.hui_montage.lyt6_100 .pic3 { left: 75%; top: 25%; width: 25%; height: 25%; }
.hui_montage.lyt6_100 .pic4 { left: 0%; top: 50%; width: 25%; height: 25%; }
.hui_montage.lyt6_100 .pic5 { left: 0%; top: 75%; width: 25%; height: 25%; }
.hui_montage.lyt6_100 .pic6 { left: 25%; top: 50%; width: 75%; height: 50%; }

/* 7 Bilder */

.hui_montage.lyt7_100 .position { padding-bottom: 125%; }
.hui_montage.lyt7_100 .adjust { height: 100%; }
.hui_montage.lyt7_100 .pic1,
.hui_montage.lyt7_100 .pic2,
.hui_montage.lyt7_100 .pic3,
.hui_montage.lyt7_100 .pic4,
.hui_montage.lyt7_100 .pic5,
.hui_montage.lyt7_100 .pic6,
.hui_montage.lyt7_100 .pic7 { visibility: visible; opacity: 1; }
.hui_montage.lyt7_100 .pic1 { left: 0%; top: 0%; width: 50%; height: 40%; }
.hui_montage.lyt7_100 .pic2 { left: 50%; top: 0%; width: 50%; height: 60%; }
.hui_montage.lyt7_100 .pic3 { left: 25%; top: 40%; width: 25%; height: 20%; }
.hui_montage.lyt7_100 .pic4 { left: 0%; top: 40%; width: 25%; height: 20%; }
.hui_montage.lyt7_100 .pic5 { left: 0%; top: 60%; width: 75%; height: 40%; }
.hui_montage.lyt7_100 .pic6 { left: 75%; top: 60%; width: 25%; height: 20%; }
.hui_montage.lyt7_100 .pic7 { left: 75%; top: 80%; width: 25%; height: 20%; }

/* 9 Bilder */

.hui_montage.lyt9_100 .position { padding-bottom: 140%; }
.hui_montage.lyt9_100 .adjust { height: 100%; }
.hui_montage.lyt9_100 .pic1,
.hui_montage.lyt9_100 .pic2,
.hui_montage.lyt9_100 .pic3,
.hui_montage.lyt9_100 .pic4,
.hui_montage.lyt9_100 .pic5,
.hui_montage.lyt9_100 .pic6,
.hui_montage.lyt9_100 .pic7,
.hui_montage.lyt9_100 .pic8,
.hui_montage.lyt9_100 .pic9 { visibility: visible; opacity: 1; }
.hui_montage.lyt9_100 .pic1 { left: 0%; top: 0%; width: 60%; height: calc(100% / 7 * 2); }
.hui_montage.lyt9_100 .pic2 { left: 60%; top: 0%; width: 40%; height: calc(100% / 7 * 3); }
.hui_montage.lyt9_100 .pic3 { left: 0%; top: calc(100% / 7 * 2); width: 40%; height: calc(100% / 7 * 2); }
.hui_montage.lyt9_100 .pic4 { left: 40%; top: calc(100% / 7 * 2); width: 20%; height: calc(100% / 7); }
.hui_montage.lyt9_100 .pic5 { left: 40%; top: calc(100% / 7 * 3); width: 20%; height: calc(100% / 7); }
.hui_montage.lyt9_100 .pic6 { left: 60%; top: calc(100% / 7 * 3); width: 40%; height: calc(100% / 7 * 2); }
.hui_montage.lyt9_100 .pic7 { left: 40%; top: calc(100% / 7 * 4); width: 20%; height: calc(100% / 7); }
.hui_montage.lyt9_100 .pic8 { left: 0%; top: calc(100% / 7 * 4); width: 40%; height: calc(100% / 7 * 3); }
.hui_montage.lyt9_100 .pic9 { left: 40%; top: calc(100% / 7 * 5); width: 60%; height: calc(100% / 7 * 2); }

.hui_montage.lyt9_101 .position { padding-bottom: 100%; }
.hui_montage.lyt9_101 .adjust { height: 100%; }
.hui_montage.lyt9_101 .pic1,
.hui_montage.lyt9_101 .pic2,
.hui_montage.lyt9_101 .pic3,
.hui_montage.lyt9_101 .pic4,
.hui_montage.lyt9_101 .pic5,
.hui_montage.lyt9_101 .pic6,
.hui_montage.lyt9_101 .pic7,
.hui_montage.lyt9_101 .pic8,
.hui_montage.lyt9_101 .pic9 { visibility: visible; opacity: 1; }
.hui_montage.lyt9_101 .pic1 { left: 0%; top: 0%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic2 { left: 33.3333%; top: 0%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic3 { left: 66.6666%; top: 0%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic4 { left: 0%; top: 33.3333%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic5 { left: 33.3333%; top: 33.3333%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic6 { left: 66.6666%; top: 33.3333%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic7 { left: 0%; top: 66.6666%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic8 { left: 33.3333%; top: 66.6666%; width: 33.3333%; height: 33.3333%; }
.hui_montage.lyt9_101 .pic9 { left: 66.6666%; top: 66.6666%; width: 33.3333%; height: 33.3333%; }

/* 10 Bilder */

.hui_montage.lyt10_100 .position { padding-bottom: 40%; }
.hui_montage.lyt10_100 .adjust { height: 100%; }
.hui_montage.lyt10_100 .pic1,
.hui_montage.lyt10_100 .pic2,
.hui_montage.lyt10_100 .pic3,
.hui_montage.lyt10_100 .pic4,
.hui_montage.lyt10_100 .pic5,
.hui_montage.lyt10_100 .pic6,
.hui_montage.lyt10_100 .pic7,
.hui_montage.lyt10_100 .pic8,
.hui_montage.lyt10_100 .pic9,
.hui_montage.lyt10_100 .pic10 { visibility: visible; opacity: 1; }
.hui_montage.lyt10_100 .pic1 { left: 0%; top: 0%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic2 { left: 20%; top: 0%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic3 { left: 40%; top: 0%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic4 { left: 60%; top: 0%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic5 { left: 80%; top: 0%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic6 { left: 0%; top: 50%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic7 { left: 20%; top: 50%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic8 { left: 40%; top: 50%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic9 { left: 60%; top: 50%; width: 20%; height: 50%; }
.hui_montage.lyt10_100 .pic10 { left: 80%; top: 50%; width: 20%; height: 50%; }





/*
===========================================================================
Objekte - Layoutdefinitionen 
---------------------------------------------------------------------------
*/

/* Objekte - Allgemeine Definition */
.hui_montage.itemstyle .position { overflow: visible; }
d.hui_montage.itemstyle .adjust { height: 0%; padding-top: 100%; }
.hui_montage.itemstyle .picbox { height: 0%; }
.hui_montage.itemstyle .picbox > div, 
.hui_montage.itemstyle .picbox .item_overlay { 
	border-radius: 3px;
}
.hui_montage.itemstyle .picbox .item_overlay { 
	content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
	bottom: 0;
	background-size: 100% 100%;
}

/* Objekte - Magazine Allgemein */

/*
.item_overlay	-> Maske über dem Bild
.item_body		-> Maske unterhalb des Bildes z.B. für den Kropus eines Objekts
*/

.hui_montage[class*="item_magazin"] .pic1 > div { 
	box-shadow:
	2px 2px 0px rgba(255,255,255,0.2) inset,
	-3px -2px 0px rgba(0,0,0,0.10) inset,
	0px 100px 150px rgba(0,0,0,0.15),
	0px 30px 100px rgba(0,0,0,0.20),
	0px 20px 20px rgba(0,0,0,0.10),
	0px 5px 5px rgba(0,0,0,0.1),
	0px 2px 2px rgba(0,0,0,0.1);
}
.hui_montage[class*="item_magazin"] .pic2 > div { 
	box-shadow:
		10px 2px 0px rgba(255,255,255,0.20) inset,
		-10px -2px 0px rgba(0,0,0,0.10) inset,
		0px 100px 150px rgba(0,0,0,0.15),
		0px 30px 100px rgba(0,0,0,0.20),
		0px 20px 20px rgba(0,0,0,0.10),
		0px 5px 5px rgba(0,0,0,0.1),
		0px 2px 2px rgba(0,0,0,0.1);
}
.hui_montage[class*="item_magazin"] .pic1 .item_overlay { background-image: url(../hui/pic/mask_magazin01_front.png); }
.hui_montage[class*="item_magazin"] .pic2 .item_overlay { background-image: url(../hui/pic/mask_magazin01_inside.png); }


/* Magazine */

.hui_montage.lyt2_item_magazin01 > *:first-child { padding: 0%; }
.hui_montage.lyt2_item_magazin01 .position { padding-top: 41%; }
.hui_montage.lyt2_item_magazin01 .pic1,
.hui_montage.lyt2_item_magazin01 .pic2 { visibility: visible; opacity: 1; }
.hui_montage.lyt2_item_magazin01 .pic1 { left: 0%; top: 0%; width: 31.5%; }
.hui_montage.lyt2_item_magazin01 .pic2 { left: 37%; top: 0%; width: 63%; }
.hui_montage.lyt2_item_magazin01 .pic1 > div { padding-top: 129.1%; transform: rotateZ(0deg); }
.hui_montage.lyt2_item_magazin01 .pic2 > div { padding-top: 64.55%; transform: rotateZ(0deg); }

.hui_montage.lyt2_item_magazin02 > *:first-child { padding: 2.5% 0% 0% 3.5%; }
.hui_montage.lyt2_item_magazin02 .position { padding-top: 62%; }
.hui_montage.lyt2_item_magazin02 .pic1,
.hui_montage.lyt2_item_magazin02 .pic2 { visibility: visible; opacity: 1; }
.hui_montage.lyt2_item_magazin02 .pic1 { left: 0%; top: 0%; width: 35%; }
.hui_montage.lyt2_item_magazin02 .pic2 { left: 20%; top: 15.75%; width: 80%; }
.hui_montage.lyt2_item_magazin02 .pic1 > div { padding-top: 129.1%; transform: rotateZ(-10deg); }
.hui_montage.lyt2_item_magazin02 .pic2 > div { padding-top: 64.55%; transform: rotateZ(0deg); }