/**
 * @categroy    Giro Plan
 * @package     main.css
 * @author      Tobias Weiß (service@kwnet.at)
 * @copyright   (C) 2021 by Kurt Weiß. All rights reserved.
 * @license     no usage except with explicit written permission.
 * @version     0.0.0
 * @since       File available since 0.0.0
 * @desc        CSS holding basic syles for the site
 *
 * 2021-10-22 tw: creation;
 */
:root{
	/*colors*/
	--kw-main-color:#d9e5ef;
	--kw-header-color: #587895;
	--kw-secondary-color:#e8e7e7;
	
	/*dimensions*/
	--kw-header-height:100px;
	--kw-outer-padding:100px;
	--kw-major-width:100%;
	--kw-minor-width:0px;
}

@font-face {
	font-family: "Ubuntu";
	src: url(/ubuntu/Ubuntu-Regular.ttf)
}

@font-face {
	font-family: "Ubuntu-Bold";
	src: url(/ubuntu/Ubuntu-Bold.ttf)
}

@font-face {
	font-family: "Ubuntu-Light";
	src: url(/ubuntu/Ubuntu-Light.ttf)
}

@font-face {
	font-family: "Ubuntu-Medium";
	src: url(/ubuntu/Ubuntu-Medium.ttf)
}

/***************************************************************************
Tags
***************************************************************************/

*{
	box-sizing: border-box;
	font-family: "Ubuntu", sans-serif;
}

HTML{
	height: 100%;
}

BODY{
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	background-color: var(--kw-main-color);
}

HEADER{
	position: fixed;
	top:0px;
	left:0px;
	height: var(--kw-header-height);
	width: 100%;
	background-color: var(--kw-header-color);
	z-index:100;
}

SECTION{
	position: relative;
	width: var(--kw-major-width);
	margin-left: var(--kw-minor-width);
	padding: var(--kw-header-height) 0px 0px 0px;
	min-height: 100vh;
}

ASIDE{
	width: var(--kw-minor-width);
	position: fixed;
	top: var(--kw-header-height);
	bottom:0px;
	left: 0px;
	background-color: var(--kw-secondary-color);
	z-index: 99;
}

h1{
	font-family: "Ubuntu-Bold";
	font-size: 25pt;
}

h2{
	margin-top: 50px;
}

p{
	margin:0px;
}

/***************************************************************************
specific IDs and classes
***************************************************************************/


#mainframe{
	position: relative;
	background-color: var(--kw-main-color);
	margin: 0px;
	padding: 0px;
	width: 100%;
	min-height: 100%;
}

#map-frame{
	height: 100%;
	width: 100%;
}

a#logout_button{
	position: absolute;
	right:100px;
	top: 50%;
	transform: translateY(-50%);
}

img.logo{
	position: absolute;
	max-height: 70px;
}


div#section_container{
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: -100px;
	padding-top: 100px;
	height:100vh;
}

div.banner{
	position: relative;
	width: 100%;
	height: 500px;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

div.banner a{
	position:absolute;
	width:40px;
	height:60px;
	background-color: rgba(0,0,0,0.2);
	color:white;
	text-align: center;
	line-height: 60px;
	font-size: 20pt;
	top: 50%;
	transform:translateY(-50%);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

div.banner a:hover{
	background-color: rgba(0,0,0,0.7);
}

div.banner a.prev{
	left: 0px;
}

div.banner a.next{
	right: 0px;
}

.slides{
	position: absolute;
	top: 50%;
	left: 50%;
	width:100%;
	height: 100%;
	transform: translate(-50%,-50%);
	opacity: 0;
	text-align: center;
	transition: opacity 1s;
	background-color: black;
}

.slides img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-left: solid 2pt rgba(255,255,255,0.3);
	border-right: solid 2pt rgba(255,255,255,0.3);
}

.slides_bg{
	position:relative;
	height:100%;
	width:100%;
	background-color: no-repeat;
	background-position: center center;
	background-size: cover;
	filter: blur(10px);
	opacity: 0.5;
}

div#slide_container{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 5760px;
	height: 400px;
/* 	animation-name: slide; */
/*     animation-duration: 40s; */
/*     animation-direction: normal; */
/*     animation-timing-function: ease; */
/*     animation-iteration-count: infinite; */
}@keyframes slide {
	  0% {left:0;}
      20% {left:0;}
      33.32% {left:-1920px;}
      53.32% {left:-1920px;}
      66.64% {left:-3840px;}
      86.64% {left:-3840px;}
      100% {left:0;}
}

div#slide_container img{
	width: 1920px;
	display: inline-block;
}

div.section_content_container{
	position: relative;
	width: 100%;
	padding: 30px 0px 30px 0px;
	text-align: center;
	height: calc(100% - 500px);
	min-height: 250px;
}

div.section_block{
	position: relative;
	width: 33%;
	top: 50%;
	height: 200px;
	display: inline-block;
	text-align: center;
	padding: 20px 0px 20px 0px;
	transform: translateY(-50%);
}

div.section_block p{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
}

div.section_container_team{
	position:relative;
}

div.section_container_team div.person{
	display: inline-block;
	text-align: center;
	position:relative;
	margin: 0px 50px 50px 0px;
}
div.section_container_team div table{
	width: 100%;
}

div.team_infoblock{
	position:relative;
	width:250px;
	vertical-align: top;
}

div.impressum_infoblock{
	position:relative;
	width:300px;
	vertical-align: top;
	display: inline-block;
}

p.col_4{
	column-count: 4;
	text-align: justify;
}

p.col_w400{
	column-width: 400px;
	text-align: justify;
}

div.gallery_container{
	white-space: normal;
	position: relative;
	text-align: justify;
}

div.gallery_project_container{
	margin-top: 50px;
}

div.gallery_item{
	height: 200px;
	margin: 0px 20px 20px 0px;
	position: relative;
	display: inline-block;
	background-size: cover;
	background-position: center center;
	background-color: #cccccc;
	cursor: pointer;
}

/***************************************************************************
standard IDs and classes
***************************************************************************/

.inline_block{
	display: inline-block;	
}

.center{
	text-align: center;
	vertical-align: middle;
}

.pad_5{
	padding:5px;
}

.error{
	background-color:#dd2222;
	border:solid 1pt #940e15;
}

.infobox{
	background-color:#ffffff;
	border:solid 1pt #333333;
	padding:5px;
}

.overlay { /*kw 2021-08-18*/
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:999;
	padding:auto;
	margin:0px;
	vertical-align:center;
	text-align:center;
}

.overlay_transition { /*kw 2021-08-18*/
	position:relative;
	background-color:rgba(0,0,0,0.5);
	width:100%;
	height:100%;
	z-index:999;
	margin:0px;
	vertical-align:center;
	text-align:center;
	transition: opacity 0.3s;
}

.overlay_box { /*kw 2021-08-18*/
	position:relative!important;
	margin:auto!important;
	top:50%!important;
	transform:translateY(-50%)!important;
	display:inline-block!important;
	padding: 20px 0px 20px 0px;
	height:100%;
	width:100%;
	transition: opacity 0.3s;
}

.overlay_box_prev{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0,0,0,0.6);
	color:white;
	height:80px;
	line-height:80px;
	font-size:16pt;
	width:50px;
	cursor: pointer;
	z-index: 100000000000;
}

.overlay_box_next{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0,0,0,0.6);
	color:white;
	height:80px;
	line-height:80px;
	font-size:16pt;
	width:50px;
	cursor: pointer;
	z-index: 100000000000;
}

.overlay_box img{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color:white;
	max-width: 100%;
	max-height: 100%;
	transition: opacity 0.3s;
}