@charset "UTF-8";
/* CSS Document */



* {
	  cursor: url("cursor.png"), pointer !important;
} 
body {
  margin: 0;
  background-color: #FCF2E0;
  font-family: 'Roboto', sans-serif;
color: #1C2621;


	overflow: hidden;
}
#loading {
	width:100vw;
	height: 100vh;
	background-color: #B4DDD9;
}
.hideMe {
    -moz-animation: cssAnimation 0s ease-in 4s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 4s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 4s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 4s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}


main {
  height: calc(100vh - 32px);
  width: calc(100vw - 32px);
  margin: 16px;
	border-radius: 16px;
	border-style: solid;
	border-color: #1C2621;
	border-width: 2px;
	background-image: url("SVG/bg.svg");
	background-size: cover;
	  display: flex;




	flex-direction: column;
  align-items: center;

}

li.navi {display: inline;
	font-size:12px;
text-transform: lowercase;
margin-left:5px;
margin-right:5px;}
h4 {
	font-weight: 400;
} 

nav {
  height: 50px;
  width: calc(100vw - 86px);
background-color: #FCF2E0;
display: flex;
	flex-direction: row;
	margin-top:15px;
	border-radius: 8px;
	padding:10px;
	border-style: solid;
	border-width: 2px;
		border-color: #1C2621;

}

.notification {
	position: absolute;
	width: 420px;
	height:80px;
	min-height: 70px;
	background-color: #FCF2E0;
		border-style: solid;
	border-width: 2px;
		border-color: #1C2621;
	align-self: flex-end;
	margin-right: 16px;
	margin-top:98px;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	align-items: center;
		font-size: 11px;

}

.small-txt {
	font-size: 11px;
}

.small-button {
	width:200px;
	height: auto;
}

.system-icon {
	height: 60%;
	width: auto;
	margin:9px;
}

.sub-nav {
	width:33.33%;
	display: flex;
	flex-direction: row;

	align-content: center;
}

.wrapper-main {
	margin: 16px;
 	width: calc(100vw - 64px);
flex-wrap: wrap;
	display: flex;
	height: auto;
	flex-direction: row;
}

.container-desktop {
	width: 50%;;

	margin: 8px;
}

.icons {
	width:90px;
	height: 90px;
	margin:16px;

}


.img-icon {
	width: 100%;
	height: auto;
cursor: url("hand.png"), pointer !important;
}

.bottom {
	width:90px;
	height: 90px;
	margin:16px;
	align-self: flex-end;
}

.ordner-computer {
	background-color: #FCF2E0;
	border-radius: 8px;
	border-style: solid;
	border-width: 2px;
	border-color: #1C2621;
	display: flex;
	flex-direction: column;
	position: absolute;


	width:320px;
	height:520px;
  z-index: 9;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); 
     -webkit-box-shadow: 6px 6px 0px 5px #1C2621; 
box-shadow: 6px 6px 0px 5px #1C2621;
}

.ordner-nudes {
z-index:12;
	background-color: #FCF2E0;
	border-radius: 8px;
	border-style: solid;
	border-width: 2px;
	border-color: #1C2621;
	display: flex;
	flex-direction: column;
	position: absolute;

		
  z-index: 91;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); 
     -webkit-box-shadow: 6px 6px 0px 5px #1C2621; 
box-shadow: 6px 6px 0px 5px #1C2621;
}

.size-medium {
	width:400px; height:400px; 
}

.size-small {
	width:450px; height:auto;
} 

.computer-content {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.ordner-head {
	margin:5px;
z-index: 10;
	height:25px;
	padding:4px;

	display: flex;
	flex-direction: row;
	align-content: center;

 margin-bottom:5px;

	
}

.symbols {
	
	height: 23px;
	width:23px;
	margin-top:-2px;
	background: url('SVG/close-inactive.svg');
	background-size: contain;
	background-repeat: no-repeat;
	
}

.symbols:hover {
		background: url('SVG/close.svg');
		background-size: contain;
	background-repeat: no-repeat;
	cursor: url("hand.png"), pointer !important;
 }


hr {
	margin:0px;
	width:100%; 
	height: 2px; 
	background-color:#1C2621;
	border-style:none;
	margin-bottom:6px;
}

h4 {
	font-weight: 800;
	margin: 0px;
	padding:0px;
} 

h5 {
	font-weight: 500;
} 

.subline {
	font-size: 10px;
	margin: 0px;
	padding:0px;
	text-align: center;
}

button {
	font-weight: 500;
	background-color: none;
	border-style: solid;
	border-width: 2px;
	border-color: #1C2621;
	background: none;
	padding-left:12px;
	padding-right:12px;
	padding-top:6px;
	padding-bottom: 6px;
	border-radius: 6px;
	margin:12px;
cursor: url("hand.png"), pointer !important;
}

button:hover {
	background-color: #1C2621;
	color:#FCF2E0;
}

.table {
	
	display: flex;
	flex-direction: row;
	font-size:14px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4px;
	width: 100%;
	max-width: 100%;
}

span {margin-left:6px; margin-right:6px;}

.row-left {
width:40%;
text-align: right;
	margin-right: 6px;
	font-weight: 800;
}

.row-right {
width:60%;
text-align: left;
	margin-left:6px;
}
.mover {
    /* Indicate the element draggable */
   


    /* Doesn't allow to select the content inside */
    user-select: none;
}

.ordner-head-img {
height:28px;
	width:auto;
	margin-right: 5px;
	margin-left: 0px;
}

.rotate {
  transform: rotate(180deg);
}

.selfie {width:100%;height:auto;}

.ordner-inhalt {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.center-flex {
	display:flex;
	justify-content: center; 
	align-content: center; 
	align-items:center;
	
}

p.warning {
	width:70%; 
	padding:15px;  
	vertical-align: top; 
	margin:0px;
	margin-bottom:-15px;
}

.dokument {
	-webkit-box-shadow: 6px 6px 0px 5px #1C2621; 
box-shadow: 6px 6px 0px 5px #1C2621;
	order-style: solid;
	border-style: solid;
	border-color: #1C2621;
	border-width: 2px;
	background-color: #FCF7F0;
	width:100%; height:auto; margin:30px;
	padding:42px;
height:450px;
	overflow:scroll;
}

.lineal {
  width: calc(100% - 60px);
	height:20px;  
	background-image: url('SVG/lineal.svg');
	background-size: contain;
	background-repeat: repeat-x;

}

.head-cv {
	width:50%;
	height: auto;
	
}

ul.lebenslauf {
		margin-left:0px;
}

li {
	margin-top:15px;
	margin-left:0px;
}

#lebenslauf {
	position: absolute;

}


@media (max-width: 780px) {
	
	.hidemobile
	{display: none;}
}
button {
	color: #1C2621;
	
}

canvas {
	  cursor: url("brush.png"), pointer !important;
}