/* ======================================== */
/* ===== Mask Simple / Einfache Maske ===== */
/* ======================================== */

/* --- Bereich 1 / über Bild --- */
.nh2_mask_1.nh2_mask_simple { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_1.nh2_mask_simple { transition: 0.3s ease all; }							/* Animationseinstellungen der Maske */
.nh2_mask_1.nh2_mask_simple { background-image: none; background-color: rgba(0,0,0,0.2); }							/* Animationseinstellungen der Maske */

/* --- Bereich 2 / unter Text  --- */
.nh2_mask_2.nh2_mask_simple { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_2.nh2_mask_simple { background-color: rgba(0,0,0,0.8); }					/* Hintergrundfarbe der Maske */
.nh2_mask_2.nh2_mask_simple { transition: 0.5s ease all; transition-delay: 0s; transition-delay: 1.0s; }		/* Animationseinstellungen der Maske */

/* --- Bereich 3 / unter Navigation --- */
.nh2_mask_3.nh2_mask_simple { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */

/* --- Bereich 4 / unter Navigation --- */
.nh2_mask_4.nh2_mask_simple { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */



/* ======================================== */
/* ===== Mask Label / Etikettenmaske ====== */
/* ======================================== */

/* --- Bereich 1 / über Bild --- */
.nh2_mask_1.nh2_mask_label { left: 0px; right: 0px; top: 0px; bottom: 0px; }								/* Positionierung der Maske */
.nh2_mask_1.nh2_mask_label > div { height: 45px; width: 20px; top: 50%; right: -20px; margin-top: -22px; }	/* Positionierung des Labelelements */

/* --- Bereich 2 / unter Text --- */
.nh2_mask_2.nh2_mask_label { left: 0px; right: 0px; top: 0px; bottom: 0px; }								/* Positionierung der Maske */
.nh2_mask_2.nh2_mask_label > div { height: 45px; width: 20px; top: 50%; right: -20px; margin-top: -22px; }	/* Positionierung der Labelelements */

/* --- Bereich 3 / unter Navigation --- */
.nh2_mask_3.nh2_mask_label { left: 0px; right: 0px; top: 0px; bottom: 0px; }								/* Positionierung der Maske */
.nh2_mask_3.nh2_mask_label > div { height: 45px; width: 20px; top: 50%; right: -20px; margin-top: -22px; }	/* Positionierung der Labelelements */

/* --- Bereich 4 / unter Navigation --- */
.nh2_mask_4.nh2_mask_label { left: 0px; right: 0px; top: 0px; bottom: 0px; }								/* Positionierung der Maske */
.nh2_mask_4.nh2_mask_label > div { height: 45px; width: 20px; top: 50%; right: -20px; margin-top: -22px; }	/* Positionierung der Labelelements */



/* ======================================== */
/* ===== Mask Label / Kantenmaske ====== */
/* ======================================== */

/* --- Edge 1 / Kantenmaske --- */
.nh2_mask_1.nh2_mask_edge > .top { height: 20px; }
.nh2_mask_1.nh2_mask_edge > .bottom { height: 20px; }
.nh2_mask_1.nh2_mask_edge > .left { width: 20px; }
.nh2_mask_1.nh2_mask_edge > .right { width: 20px; }

/* --- Edge 2 / Kantenmaske --- */
.nh2_mask_2.nh2_mask_edge > .top { height: 20px; }
.nh2_mask_2.nh2_mask_edge > .bottom { height: 20px; }
.nh2_mask_2.nh2_mask_edge > .left { width: 20px; }
.nh2_mask_2.nh2_mask_edge > .right { width: 20px; }

/* --- Edge 3 / Kantenmaske --- */
.nh2_mask_3.nh2_mask_edge > .top { height: 20px; }
.nh2_mask_3.nh2_mask_edge > .bottom { height: 20px; }
.nh2_mask_3.nh2_mask_edge > .left { width: 0px; }
.nh2_mask_3.nh2_mask_edge > .right { width: 0px; }

/* --- Edge 4 / Kantenmaske --- */
.nh2_mask_4.nh2_mask_edge > .top { height: 20px; }
.nh2_mask_4.nh2_mask_edge > .bottom { height: 20px; }
.nh2_mask_4.nh2_mask_edge > .left { width: 20px; }
.nh2_mask_4.nh2_mask_edge > .right { width: 20px; }



/* ======================================================= */
/* ===== Mask StretchX / Horizontal gestreckte Maske ===== */
/* ======================================================= */

/* --- Bereich 1 / über Bild --- */
.nh2_mask_1.nh2_mask_stretchx { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_1.nh2_mask_stretchx > div { height: 50px; }								/* Höhe der Maske */
.nh2_mask_1.nh2_mask_stretchx .cell1 { width: 50px; }								/* Breite der linken Ecke */
.nh2_mask_1.nh2_mask_stretchx .cell3 { width: 50px; }								/* Breite der Mitte */
.nh2_mask_1.nh2_mask_stretchx .cell5 { width: 50px; }								/* Breite der rechten Ecke */

/* --- Bereich 2 / unter Text  --- */
.nh2_mask_2.nh2_mask_stretchx { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_2.nh2_mask_stretchx > div { height: 50px; }								/* Höhe der Maske */
.nh2_mask_2.nh2_mask_stretchx .cell1 { width: 50px; }								/* Breite der linken Ecke */
.nh2_mask_2.nh2_mask_stretchx .cell3 { width: 50px; }								/* Breite der Mitte */
.nh2_mask_2.nh2_mask_stretchx .cell5 { width: 50px; }								/* Breite der rechten Ecke */

/* --- Bereich 3 / unter Navigation --- */
.nh2_mask_3.nh2_mask_stretchx { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_3.nh2_mask_stretchx > div { height: 50px; }								/* Höhe der Maske */
.nh2_mask_3.nh2_mask_stretchx .cell1 { width: 50px; }								/* Breite der linken Ecke */
.nh2_mask_3.nh2_mask_stretchx .cell3 { width: 50px; }								/* Breite der Mitte */
.nh2_mask_3.nh2_mask_stretchx .cell5 { width: 50px; }								/* Breite der rechten Ecke */

/* --- Bereich 4 / unter Navigation --- */
.nh2_mask_4.nh2_mask_stretchx { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_4.nh2_mask_stretchx > div { height: 50px; }								/* Höhe der Maske */
.nh2_mask_4.nh2_mask_stretchx .cell1 { width: 50px; }								/* Breite der linken Ecke */
.nh2_mask_4.nh2_mask_stretchx .cell3 { width: 50px; }								/* Breite der Mitte */
.nh2_mask_4.nh2_mask_stretchx .cell5 { width: 50px; }								/* Breite der rechten Ecke */



/* ====================================================== */
/* ===== Mask StretchY / Vertikal gestreckte Maske ====== */
/* ====================================================== */

/* --- Bereich 1 / über Bild --- */
.nh2_mask_1.nh2_mask_stretchy { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_1.nh2_mask_stretchy > div { width: 50px; }								/* Breite der Maske */
.nh2_mask_1.nh2_mask_stretchy .row1 { height: 50px; }								/* Höhe der oberen Ecke */
.nh2_mask_1.nh2_mask_stretchy .row3 { height: 50px; }								/* Höhe der Mitte */
.nh2_mask_1.nh2_mask_stretchy .row5 { height: 50px; }								/* Höhe der unteren Ecke */

/* --- Bereich 2 / unter Text  --- */
.nh2_mask_2.nh2_mask_stretchy { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_2.nh2_mask_stretchy > div { width: 50px; }								/* Breite der Maske */
.nh2_mask_2.nh2_mask_stretchy .row1 { height: 50px; }								/* Höhe der oberen Ecke */
.nh2_mask_2.nh2_mask_stretchy .row3 { height: 50px; }								/* Höhe der Mitte */
.nh2_mask_2.nh2_mask_stretchy .row5 { height: 50px; }								/* Höhe der unteren Ecke */

/* --- Bereich 3 / unter Navigation --- */
.nh2_mask_3.nh2_mask_stretchy { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_3.nh2_mask_stretchy > div { width: 50px; }								/* Breite der Maske */
.nh2_mask_3.nh2_mask_stretchy .row1 { height: 50px; }								/* Höhe der oberen Ecke */
.nh2_mask_3.nh2_mask_stretchy .row3 { height: 50px; }								/* Höhe der Mitte */
.nh2_mask_3.nh2_mask_stretchy .row5 { height: 50px; }								/* Höhe der unteren Ecke */

/* --- Bereich 4 / unter Navigation --- */
.nh2_mask_4.nh2_mask_stretchy { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_4.nh2_mask_stretchy > div { width: 50px; }								/* Breite der Maske */
.nh2_mask_4.nh2_mask_stretchy .row1 { height: 50px; }								/* Höhe der oberen Ecke */
.nh2_mask_4.nh2_mask_stretchy .row3 { height: 50px; }								/* Höhe der Mitte */
.nh2_mask_4.nh2_mask_stretchy .row5 { height: 50px; }								/* Höhe der unteren Ecke */



/* ===================================== */
/* ===== Mask Border / Rahmenmaske ===== */
/* ===================================== */

/* --- Bereich 1 / über Bild --- */
.nh2_mask_1.nh2_mask_border { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_1.nh2_mask_border .row1 .cell1 { width: 50px; }							/* Breite der linken Spalte */
.nh2_mask_1.nh2_mask_border .row1 { height: 50px; }									/* Höhe der oberen Zeile */
.nh2_mask_1.nh2_mask_border .row1 .cell3 { width: 50px; }							/* Breite der rechten Spalte */
.nh2_mask_1.nh2_mask_border .row3 { height: 50px; }									/* Höhe der unteren Zeile */

/* --- Bereich 2 / unter Text  --- */
.nh2_mask_2.nh2_mask_border { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_2.nh2_mask_border .row1 .cell1 { width: 50px; }							/* Breite der linken Spalte */
.nh2_mask_2.nh2_mask_border .row1 { height: 50px; }									/* Höhe der oberen Zeile */
.nh2_mask_2.nh2_mask_border .row1 .cell3 { width: 50px; }							/* Breite der rechten Spalte */
.nh2_mask_2.nh2_mask_border .row3 { height: 50px; }									/* Höhe der unteren Zeile */

/* --- Bereich 3 / unter Navigation --- */
.nh2_mask_3.nh2_mask_border { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_3.nh2_mask_border .row1 .cell1 { width: 50px; }							/* Breite der linken Spalte */
.nh2_mask_3.nh2_mask_border .row1 { height: 50px; }									/* Höhe der oberen Zeile */
.nh2_mask_3.nh2_mask_border .row1 .cell3 { width: 50px; }							/* Breite der rechten Spalte */
.nh2_mask_3.nh2_mask_border .row3 { height: 50px; }									/* Höhe der unteren Zeile */

/* --- Bereich 4 / unter Navigation --- */
.nh2_mask_4.nh2_mask_border { left: 0px; right: 0px; top: 0px; bottom: 0px; }		/* Positionierung der Maske */
.nh2_mask_4.nh2_mask_border .row1 .cell1 { width: 50px; }							/* Breite der linken Spalte */
.nh2_mask_4.nh2_mask_border .row1 { height: 50px; }									/* Höhe der oberen Zeile */
.nh2_mask_4.nh2_mask_border .row1 .cell3 { width: 50px; }							/* Breite der rechten Spalte */
.nh2_mask_4.nh2_mask_border .row3 { height: 50px; }									/* Höhe der unteren Zeile */





/* --- Responsive Einstellungen --- */

@media screen and (max-width: 599px) {
	
	/* --- Mask Simple / Bereich 1 / über Bild --- */
	.nh2_mask_1.nh2_mask_simple { background-color: rgba(255,255,255,0.0); }				/* Hintergrundfarbe der Maske */

	/* --- Bereich 2 / unter Text  --- */
	.nh2_mask_2.nh2_mask_simple { background-color: rgba(255,255,255,0.0); }				/* Hintergrundfarbe der Maske */

}