html, body, *{
	font-family:var(--skillflow-base-font-family);
	color:var(--skillflow-base-font-color);
	font-size:var(--skillflow-base-font-size);
}

body{
	height:97%;
	background-color:var(--skillflow-base-body-bg);
	margin:0;
	padding:10px;
}

a{color:var(--a-color); text-decoration:var(--a-decoration);}
a:hover, .nav-select:hover{color:var(--a-hover-color)}
a:active{color:var(--a-visited-color)}
a:visited{color:var(--a-visited-color)}

h1{
	font-size:var(--h1-size);
}

br.clear{
	clear:both;
}

.skillflow{
	font-style:italic;
	text-transform:lowercase;
}

.fett{
	font-weight:var(--skillflow-fett);
}

.flex{
	display:flex;
	width:100%;
	/*border: 1px solid yellow;*/
}

.center{
	text-align:center;
}

.opacity-half{
	opacity:0.7;
	display:block;
}

.block-center-50-50 {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 55%; */
    /* transform: translate(-50%, -50%); */
    width: 600px;
    height: auto;
    border: 2px solid var(--white);
    border-radius: 10px 0 10px 0;
    margin: 10px auto;
}

#tooltip{
	position: absolute;
    left: 42.56666%;
    top: 10px;
    z-index: 9999;
    /* width: 100px; */
    height: 20px;
    padding: 3px 30px;
    color: var(--black);
    background-color: var(--white);
    border: var(--skillflow-base-border);
	opacity:0;
	transition: opacity 0.1s;
}
#tooltip.opacity{
	opacity:1;
}

/* START::: Navigation */
nav.nav-main{
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
	height:130px;
	padding: 10px;
	border-bottom:var(--skillflow-base-border-half);
	background-color: var(--black);
	/*border:1px solid red;*/
}

.nav-container{
	width:100%;
}

.flex-nav-first{
	height:110px;
}

.skill-round{
	/*border: 1px solid red;*/
}

.nav-select{
	cursor:grab;
}

#drag-nav{
	justify-content: center;
	margin-top: -15px;
}
#drag-nav div,
#unternav-drag div {
	display:inline-block;
    margin-right: 20px;
	text-align: center;
    padding: 5px 15px;
	margin-top: 45px;
	height: 20px;
    /*border: 1px solid white;*/
}

#drop-nav-container{
	/*border: 1px solid red;*/
    text-align: center;
    margin-top: -20px;
}

#dropzone {
	position: relative;
	left: 50%;
    top: 20px;
    transform: translate(-32%, -50%);
    display: inline-block;
    height: auto;
    margin: -30px;
    padding: 10px;
    border: var(--skillflow-base-border);
    text-align: center;
    width: 200px;
    height: 21px;
    overflow: hidden;
}
#dropzone:after{
	content: '';
	position: absolute;
	top: 19px;
	left: -10px;
	width: 237px;
	height: 0px;
	border-bottom: var(--skillflow-base-border);
	transform: rotate(9deg);
}

#dropzone::before{
	content: '';
	position: absolute;
	top: 19px;
	left: -10px;
	width: 237px;
	height: 0px;
	border-bottom: var(--skillflow-base-border);
	transform: rotate(171deg);
}

#dropzone::before, #dropzone::after{
	opacity: 0.6;
}

.selected{
  color: var(--a-hover-color);
  border-bottom: var(--skillflow-base-border-half) !important;
  cursor:auto;	
}

/* ENDE::: Navigation */

/* START::: Unternavigation */
#unternav{
	position:absolute;
	top:-70px;
	left:120px;
	z-index:999999;
	width:100%;
	height:70px;
	background-color:var(--black);
	transition: top .5s;
	transition-delay: .5s;
}
.shownav{
	top:2px !important;
}

#closeNav {
    position: absolute;
    bottom: -25px;
    left: 200px;
    width: 20px;
    height: 20px;
    color: var(--skillflow-base-font-color);
    font-size: 16px;
    font-weight: var(--skillflow-fett);
    cursor: pointer;
	opacity:1;
	transition:opacity .5s;
	z-index:1;
}

.flex.unternav{
	display:flex;
	justify-content: center;
	width:87.5%;
}


/* ENDE::: Unternavigation */


/* START::: Content */
#main-content{
	/*min-height: calc(100% - 230px);*/
    min-height: 68%;
    margin-top: 160px;
}

.container-text{
  color:var(--white);
}

.container-text p{
  color:var(--white);
  padding:20px;
}

.container-text .bold{
  display:block;
  font-weight:600;
  margin-bottom:8px;
}

.container-text p{
  margin-bottom:10px;
}

/* ENDE::: Content */