:root {
	--content-width:100vw;
	--content-width:calc(100vh/9*16);
	--content-height:100vh;
	--color-main:#005187;
}

html,body{
	font-family:'Trade Gothic Next';
	background:#CCCCCC;
	display: flex;
	align-items: center;
	justify-content: center;
	height:100vh;
	width:100vw;
	overflow:hidden;
}

#home{
	position:relative;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	background-image:url('/images/layout/page_1_background.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}

#page{
	position:relative;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	background-color:#FFFFFF;
	
}
#page:after{
	content:'';
	position:absolute;
	z-index:10;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background-image:url('/images/layout/grafik_links.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left center;
}

#nav_main{
	position:relative;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	background-image:url('/images/layout/bg_menu.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right center;
}

h1{
	text-transform:uppercase;
	position:absolute;
	z-index:20;
	left:40px;
	top:40px;
	color:#FFFFFF;
	font-weight:700;
	font-size:calc(8 * var(--content-height)/100);
}

#page #logo{
	position:absolute;
	z-index:100;
	width:calc(15 * var(--content-width)/100);
	right:calc(5 * var(--content-width)/100);
	top:calc(7 * var(--content-height)/100);
}
#page #logo:hover{
	opacity:0.65;
}

#nav_main a{
	position:absolute;
	z-index:30;
	display:flex;
	flex-direction: row;
	align-items: center;
	color:var(--color-main);
	text-decoration:none;
	font-size:calc(3 * var(--content-width)/100);
	text-transform:uppercase;
	font-weight:700;
	line-height:1;
	padding:calc(1 * var(--content-height)/100) calc(1 * var(--content-width)/100);
	width:calc(28* var(--content-width)/100);
}
#nav_main a:before{
    position: absolute;
	z-index:2;
    content: '';
    left: calc(1 * var(--content-width)/100*(-1));
    top: -2px;
	bottom: -2px;
    width: calc(30* var(--content-width)/100);
    border: 2px solid var(--color-main);
    z-index: -1;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    transform: skew(-20deg);
	border-right-width: 0px;
	border-top-width: 0px;
}
#nav_main a:after{
    position: absolute;
	z-index:2;
    content: '';
    right: calc(1 * var(--content-width)/100*(-1));
    top: -2px;
	bottom: -2px;
    width: calc(30* var(--content-width)/100);
    border: 2px solid var(--color-main);
    z-index: -1;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    transform: skew(-20deg);
	border-left-width: 0px;
	border-bottom-width: 0px;
}
#nav_main a:hover{
	opacity:0.65;
}

#nav_main a .text{
	font-size:60%;
}
#nav_main a.p1{
	left:calc(35 * var(--content-width)/100);
	top:calc(15 * var(--content-height)/100);
}
#nav_main a.p2{
	left:calc(32 * var(--content-width)/100);
	top:calc(28 * var(--content-height)/100);
}
#nav_main a.p3{
	left:calc(29 * var(--content-width)/100);
	top:calc(41 * var(--content-height)/100);
}
#nav_main a.p4{
	left:calc(26 * var(--content-width)/100);
	top:calc(54 * var(--content-height)/100);
}
#nav_main a.p5{
	left:calc(23 * var(--content-width)/100);
	top:calc(67 * var(--content-height)/100);
}
#nav_main a.p6{
	left:calc(20 * var(--content-width)/100);
	top:calc(80 * var(--content-height)/100);
}

#backlink{
	position:absolute;
	z-index:30;
	display:flex;
	flex-direction: row;
	align-items: center;
	right:0;
	bottom:0;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:300;
	font-size:calc(2.5 * var(--content-height)/100);
	padding:calc(1 * var(--content-height)/100) calc(2 * var(--content-width)/100) calc(1 * var(--content-height)/100) calc(1 * var(--content-width)/100);
	color:#706F6F;
}
#backlink:hover{
	opacity:0.65;
}
#backlink:before{
    position: absolute;
	z-index:2;
    content: '';
    left: calc(1 * var(--content-width)/100*(-1));
    top: -1px;
	bottom: -1px;
    width: calc(100% + 4px);
    border: 1px solid #706F6F;
    z-index: -1;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    transform: skew(-20deg);
	border-right-width: 0px;
	border-bottom-width: 0px;
}

#backlink img{
	height:calc(3 * var(--content-height)/100);
	margin-right:calc(1 * var(--content-height)/100);
}

#content{
	position:relative;
	z-index:30;
	left: calc(38 * var(--content-width)/100);
	width: calc(57 * var(--content-width)/100);
	padding-top: calc(15 * var(--content-height)/100);
}

#content h2{
	margin-left:calc(6 * var(--content-width)/100*(-1));
	font-size:calc(6 * var(--content-height)/100);
	text-transform:uppercase;
	font-weight:700;
	line-height:1;
	display:flex;
	flex-direction: row;
	align-items: center;
	white-space:nowrap;
}
#content h2 .text{
	font-size:70%;
}

#watermark{
	position:absolute;
	z-index:5;
	color:#F1F1F1;
	font-weight:700;
	line-height:1;
	letter-spacing:calc(-1.5 * var(--content-width)/100);
	font-size:calc(50 * var(--content-height)/100);
	left:calc(7 * var(--content-width)/100);
	bottom:calc(6 * var(--content-height)/100);
}

#content_blocks{
	margin-top:calc(6 * var(--content-height)/100);
}

#content_blocks h3{
	position:relative;
	z-index:1;
	background-color:var(--color-main);
	color:#FFFFFF;
	font-size:calc(2.5 * var(--content-height)/100);
	text-transform:uppercase;
	line-height:1;
	padding:calc(1 * var(--content-height)/100) calc(2 * var(--content-width)/100);
}
#content_blocks h3:before{
	position: absolute;
	z-index:2;
	content: '';
	left: calc(1 * var(--content-width)/100*-1);
	top: -1px;
	bottom: -1px;
	width:calc(1.5 * var(--content-width)/100);
	background-color:#FFFFFF;
	z-index: -1;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	transform: skew(-20deg);
}
#content_blocks h3:after{
	position: absolute;
	z-index:2;
	content: '';
	right: calc(1 * var(--content-width)/100*-1);
	top: -1px;
	bottom: -1px;
	width:calc(1.5 * var(--content-width)/100);
	background-color:#FFFFFF;
	z-index: -1;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	transform: skew(-20deg);
}

#content_blocks .contentblock{
	margin-bottom:calc(1 * var(--content-height)/100);
}

#content_blocks .contentblock .items{
	position:relative;
	padding:calc(2 * var(--content-height)/100) calc(2 * var(--content-width)/100);
}

#content_blocks .contentblock .items .item{
	display:inline-block;
	background-color:#D9D8D9;
	line-height:1;
	padding:calc(0.5 * var(--content-height)/100) calc(0.5 * var(--content-width)/100);
	margin-bottom:calc(2 * var(--content-height)/100);
	text-transform:uppercase;
	cursor:pointer;
	font-weight:300;
	font-size:calc(1.65 * var(--content-height)/100);
	text-decoration:none;
	color:#000000;
}
#content_blocks .contentblock .items .item:hover{
	opacity:0.65;
}

#content_blocks .contentblock .items.per_inline{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin:0 calc(0.5 * var(--content-width)/100*-1);
}
#content_blocks .contentblock .items.per_inline > div,
#content_blocks .contentblock .items.per_inline_2 > div{
	display:block;
	padding:0 calc(0.5 * var(--content-width)/100);
}
#content_blocks .contentblock .items.per_inline .item,
#content_blocks .contentblock .items.per_inline_2 .item{
	display:block;
	text-align:center;
}

#content_blocks .contentblock .items.per_inline_2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin:0 calc(0.5 * var(--content-width)/100*-1);
}

#lightbox{
	position:relative;
	z-index:1000;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	background-color:rgba(0,0,0,0.5);
	padding:calc(4 * var(--content-height)/100) calc(2.5 * var(--content-width)/100);
}
#lightbox > div{
	position:relative;
	height:100%;
	width:100%;
	background-color:#EDEDED;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#lightbox .close{
	position:absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	right:calc(1 * var(--content-width)/100);
	top:calc(2 * var(--content-height)/100);
	width:calc(3 * var(--content-width)/100);
	height:calc(3 * var(--content-width)/100);
	background-color:#575755;
	color:#FFFFFF;
	line-height:1;
	text-decoration:none;
	font-size:calc(2 * var(--content-width)/100);
	z-index:1000;
}
#lightbox .close:hover{
	opacity:0.65;
}

#lightbox video{
	width:calc(80 * var(--content-width)/100);
	height:calc(80 * var(--content-height)/100);
}

#lightbox .title{
	position:absolute;
	left:calc(1 * var(--content-width)/100);
	top:calc(1 * var(--content-height)/100);
	text-transform:uppercase;
	font-size:calc(1.5 * var(--content-width)/100);
}

#lightbox #carousel_container{
	width:100%;
	padding:0 calc(1 * var(--content-width)/100);
	height:calc(80 * var(--content-height)/100);
	/*margin-top:calc(3 * var(--content-height)/100);*/
	display:flex;
}

#lightbox.zoom .carousel-item .col{
	overflow:scroll;
}
#lightbox.zoom img.h-100{
	height:auto !important;
	width:80% !important;
}

#carousel_container .carousel{
	width: 0;
	flex-basis: 100%;
}

.carousel-item img{
	height:calc(80 * var(--content-height)/100);
	margin:0 auto;
}
.carousel-item img.zoom{
	cursor:zoom-in;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
	width:calc(4 * var(--content-width)/100);
	height:calc(4 * var(--content-width)/100);
	filter: invert(100%);
}

.carousel-indicators{
	margin-left:auto;
	margin-right:auto;
}

.carousel-indicators-numbers{
	bottom:calc(7.5 * var(--content-height)/100*-1);
}
.carousel-indicators-numbers > *{
	text-indent: 0 !important;
	margin: 0 2px;
	width: calc(2 * var(--content-width)/100) !important;
	height: calc(2 * var(--content-width)/100) !important;
	border: none;
	border-radius: 100%;
	line-height: calc(2 * var(--content-width)/100) !important;
	color:#000000;
	background-color: #CCCCCC !important;
	transition: all 0.25s ease;
}
.carousel-indicators-numbers > *.active, .carousel-indicators-numbers > *:hover{
	background-color: var(--color-main) !important;
	color: #FFFFFF;
}