.right_diag_top, .left_diag_top, .right_photo, .left_photo,
.right_diag_bottom, .left_diag_bottom, .right_text, .left_text,
.double_text_left, .double_text_right, .double_text_photo,
.splitted_text_left, .splitted_text_right
{
    transition: all 1.0s ease-in-out;
}

.left_diag_top, .left_diag_bottom,
.right_diag_top, .right_diag_bottom
{
    position: absolute;
    z-index: 5;
}

picture
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

picture > img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.right_photo > *,
.left_photo > *,
.double_text_photo > *
{
    z-index: 20;
}

.right_photo > picture,
.left_phot > picture,
.double_text_photo > picture
{
    z-index: 5;
}

.right_photo > div,
.left_photo > div,
.double_text_photo > div
{
    display: flex;
    align-items: flex-end;
    background-size: cover;
}

.right_photo > div > div > h4,
.left_photo > div > div > h4,
.double_text_photo > div > div > h4
{
    font-size: 1.5rem;
    margin: 0;
    margin-left: 20px;
}

.left_photo > div > div > p,
.right_photo > div > div > p,
.double_text_photo > div > div > p
{
    margin: 0;
    margin-left: 30px !important;
    margin-bottom: 10px;
    width: 88%;
    text-align: justify;
}

.right_photo > div > div,
.left_photo > div > div,
.double_text_photo > div > div
{
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    width: 100%;
    overflow: hidden;
}

.left_diag, .right_diag, .left_diag2, .right_diag2
{
    z-index: 4;
}

.left_text, .right_text,
.double_text_left, .double_text_right,
.splitted_text_left, .splitted_text_right
{
    box-shadow:
	0px 0px 40px black,
	0px 0px 40px black,
	0px 0px 40px black
    ;
}

.left_photo, .right_photo, .double_text_photo
{
    background-color: black;
    z-index: 20;
    box-shadow:
	0px 0px 20px black
    ;
}

@media (orientation: landscape) and (min-width: 1280px)
{
    .left_diag_top, .left_diag_bottom,
    .right_diag_top, .right_diag_bottom,
    .left_text, .right_text,
    .double_text_left, .double_text_right,
    .splitted_text_left, .splitted_text_right
    {
	background-color: rgba(56, 55, 59, 1.0);
    }

    /* DIAGONALS */
    .left_diag_top, .left_diag_bottom, .right_diag_top, .right_diag_bottom
    {
	width: 300px;
	height: 100%;
	top: 0px;	
    }
    .left_diag_top, .left_diag_bottom
    {
	left: -60px;
    }
    .right_diag_top, .right_diag_bottom
    {
	right: -60px;
    }
    .left_diag_top.stepin, .left_diag_bottom.stepin
    {
	left: 60px;
    }
    .right_diag_top.stepin, .right_diag_bottom.stepin
    {
	right: 60px;
    }
    .left_diag_top, .right_diag_bottom
    {
	transform: skew(8deg);
    }
    .left_diag_bottom, .right_diag_top
    {
	transform: skew(-8deg);
    }

    /* TEXT PICTURE */
    .left_text
    {
	position: relative;
	width: 60%;
	padding: 20px;
	padding-right: 80px;
	box-sizing: border-box;
    }
    .left_text > .content
    {
	position: relative;
	z-index: 10;
	transform: skewX(0deg);
    }
    .right_photo
    {
	position: absolute;
	width: 40%;
	height: calc(100% - 40px - 4rem);
	max-height: 100vh;
	left: calc(60% - 20px);
	top: calc(4rem + 20px);
	transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    .right_photo.stepin
    {
	opacity: 0;
	left: calc(65% - 20px);
	transform: skewX(-5deg);
    }

    /* PICTURE TEXT */
    .right_text
    {
	position: relative;
	width: 60%;
	padding: 20px;
	padding-left: 80px;
	box-sizing: border-box;
	z-index: 11;

	left: 40%;
    }
    .right_text.stepin
    {
	left: 35%;
    }
    .right_text > .content
    {
	position: relative;
	z-index: 10;
	transform: skewX(0deg);
    }
    .left_photo
    {
	position: absolute;
	width: calc(40% + 20px);
	height: calc(100% - 40px - 4rem);
	max-height: 100vh;
	left: 0;
	top: calc(4rem + 20px);
	transform: rotateX(0) rotateY(0) rotateZ(0);
	z-index: 5;
    }
    .left_photo.stepin
    {
	opacity: 0;
	left: calc(60% - 20px);
	transform: skewX(-5deg);
    }

    /* TEXT PICTURE TEXT */
    .double_text_left
    {
	top: top(4rem);
	position: relative;
	width: 35%;
	padding: 20px;
	padding-right: 80px;
	box-sizing: border-box;
	left: 0;
    }
    .double_text_left.stepin
    {
	left: 20%;
    }
    .double_text_left > .content
    {
	position: relative;
	z-index: 10;
	transform: skewX(0deg);
    }
    .double_text_right
    {
	top: calc(4rem + 10px);
	position: absolute;
	width: 35%;
	padding: 20px;
	padding-left: 80px;
	box-sizing: border-box;
	
	left: 65%;
    }
    .double_text_right.stepin
    {
	left: 45%;
    }
    .double_text_right > .content
    {
	position: relative;
	z-index: 10;
	transform: skewX(0deg);
    }
    .double_text_photo
    {
	position: absolute;
	width: calc(30% + 40px);
	height: calc(100% - 40px - 4rem);
	max-height: 100vh;
	left: calc(35% - 20px);
	top: calc(4rem + 20px);
	transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    .double_text_photo.stepin
    {
	width: 0;
	left: 50%;
    }

    /* TEXT TEXT */
    .splitted_text_left
    {
	top: top(4rem);
	position: relative;
	width: 45%;
	padding: 20px;
	padding-right: 40px;
	box-sizing: border-box;
	left: 0;
    }
    .splitted_text_left.stepin
    {
	left: 5%;
    }
    .splitted_text_left > .content
    {
	position: relative;
	z-index: 10;
	transform: skewX(0deg);
    }
    .splitted_text_right
    {
	top: calc(4rem + 10px);
	position: absolute;
	width: 45%;
	padding: 20px;
	padding-left: 40px;
	box-sizing: border-box;
	
	left: 55%;
    }
    .splitted_text_right.stepin
    {
	left: 45%;
    }
    .splitted_text_right > .content
    {
	position: relative;
	z-index: 10;
	transform: skewX(0deg);
    }

    /* FORM FORM */
    .left_formular, .right_formular
    {
	width: 50%;
    }
    .left_formular
    {}
    .right_formular
    {
	position: absolute;
	right: 0;
	top: calc(4rem + 9px);
    }

    .left_footer, .right_footer
    {
	width: 48%;
    }
    .left_footer
    {
    }
    .right_footer
    {
	padding: 50px;
	position: absolute;
	right: 0px;
	top: 0px;
    }
}

@media (orientation: portrait), (max-width: 1280px)
{
    .left_diag_top, .left_diag_bottom,
    .right_diag_top, .right_diag_bottom,
    .left_text, .right_text,
    .double_text_left, .double_text_right,
    .splitted_text_left, .splitted_text_right
    {
	background-color: transparent;
	box-shadow: none;
    }

    /* DIAGONALS */
    .left_diag_top, .left_diag_bottom, .right_diag_top, .right_diag_bottom
    {
	display: none;
    }

    /* TEXT PICTURE */
    .left_text, .right_text,
    .double_text_left, .double_text_right,
    .splitted_text_left, .splitted_text_right,
    .left_formular, .right_formular,
    .left_footer, .right_footer
    {
	padding: 20px;
    }
    .right_photo, .left_photo, .double_text_photo
    {
	position: relative;
	height: 50vh;
	max-height: 50vh;
    }
}