body {
    margin: 0;
    padding: 0;
}
.wrap {
    overflow: hidden;
    margin: 1px;
}
.boxTop {
    float: left;
    position: relative;
    width: 33%;
}
.box {
    float: left;
    position: relative;
    width: 33%;
}
.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
    bottom: 1px;
    overflow: hidden;
}

@media only screen and (max-width : 480px) and (min-width : 0px) {
    /* Smartphone view: 1 tile */
	
	div#homepage div#orange {
	display: flex;
    align-items: center;
    justify-content: center;
	}
	
	#titel {
	display: none;
	}
	#titelOneRow {
/*    position:absolute; */
    /*width:100%;*/
    font-size: 0.7em;
    text-align: center; /*handles the horizontal centering*/
/*	height: 200px;*/
	}

	#titelOneRow img {
    padding: 10px 0px 0px 0px;
	width: 100%;
/*	height: 100%;*/
	}
	
    .box {
    width: 100%;
    padding-bottom: 65%;
	}

    .box.menu {
        padding-bottom: 60%;
    }
    .boxTop {
       width: 100%;
       padding-bottom: 20%;
    }
   /* .boxTop.menu {
        padding-bottom: 36%;
    } */
	.boxInner img {
    /*width: 100%;*/
	}

	.boxInnerPic {
	position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
    /*bottom: 1px;*/
    overflow: hidden;
	border-radius: 20px;
 /*   border: 3px solid #5a3741 ;*/
	}	
	.boxInnerLang {
	position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
	width: 80px;
	height: 80px;
    /*bottom: 1px;*/
    overflow: hidden;
 /*   border: 3px solid #5a3741 ;*/
	}	
	.boxInnerLang img {
    width: 40%;
	}	
	.box.headline {
    padding-bottom: 51px !important;
	}
	.sectionHL {
    font-size: 1.1em;
	line-height: 2.5em;
	height: 30px;
	}

	#orange {
	font-size: 1.1em;
	line-height: 2.5em;
	height: 37px;
	/*display: flex;
    align-items: center;
    justify-content: center;*/
	}
	
	#Plantabelle {
	font-size: 0.7em;
	line-height: 0.8em;
	}
/*	#front #content {
    width: 480px;
}*/
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
    /* Tablet view: 3 tiles */
	#titelOneRow {
	display: none
	}
    .box {
        width: 33%;
		padding-bottom: 24%;
    }
	.boxTop {
        width: 33%;
		/*height: 125px;*/
        padding-bottom: 5%;
    }
	.boxInner img {
    /*width: 100%;*/
	}
	
	.boxInnerPic {
	position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
    /*bottom: 1px;*/
    overflow: hidden;
 /*   border: 3px solid #5a3741 ;*/
	}
	
	.box.headline {
	height: 30px;
    padding-bottom: 40px !important;
	}
	
	.sectionHL {
    font-size: 1.5em;
	}
	#titel {
    height:35px;
}	
	#titel img {
 /*   padding: 0 150px;*/
	width:160px;
	/*height: 219px;*/
	}
	#orange {
    font-size: 1.5em;
    line-height: 1.5em;
    height: 30px;
	
	}
	#searchForm {
    text-align: left;
    padding-top: 0px;
    padding-left: 20%;
    padding-right: 20%;
	display: none;
}
	#Plantabelle {
	font-size: 0.7em;
	line-height:0.8em;
	}
}
@media only screen and (max-width : 980px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
	#titelOneRow {
		display: none
	}
    .box {
        width: 33%;
		padding-bottom: 24%;
    }
	.boxTop {
        width: 33%;
		/*height: 125px;*/
        padding-bottom: 6%;
    }
	.boxInner img {
    width: 100%;
	}
	.boxInnerPic {
	position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
    /*bottom: 1px;*/
    overflow: hidden;
 /*   border: 3px solid #5a3741 ;*/
	}	
	.box.headline {
		height: 50px;
		padding-bottom: 40px !important;
	}
	.sectionHL {
		font-size: 2.1em;
	}
	#titel {
		height: 65px;
	}

	#titel img {
	/*    padding: 0 200px;*/
	}
	#orange {
		font-size: 2em;
		line-height: 1.5em;
		height: 40px;
	}
	#searchForm {
		text-align: left;
		padding-top: 20px;
		padding-left: 20%;
		padding-right: 20%;
		display: none;
	}
	#Plantabelle {
		font-size: 0.7em;
		line-height:0.7em;
	}
}
@media only screen and (min-width : 981px) {
    /* Medium desktop: 3 tiles */
	#titelOneRow {
	display: none
	}
    .box {
        width: 33%;
		padding-bottom: 22%;
    }
	.boxTop {
        width: 33%;
		/*height: 125px;*/
        padding-bottom:4%;
    }
	.boxInner img {
    /*width: 100%;*/
	}
	.boxInnerPic {
	position: absolute;
    left: 10px;
    right: 10px;
    top: 1px;
    /*bottom: 1px;*/
    overflow: hidden;
 /*   border: 3px solid #5a3741 ;*/
	}
	.box.headline {
	height: 55px;
	border: 0;
    padding-bottom: 20px !important;
	}
	.sectionHL {
    font-size: 2.5em;
	height: 40px;
	}
	.sectionIMG {
    margin-bottom: -3px;
}	
	#titel {
    height: 80px;
}
	#titel img {
 /*   padding: 0 350px;*/
} 
	#searchForm {
    text-align: left;
    padding-top: 50px;
    padding-left: 20%;
    padding-right: 20%;
	display:none;
}
	#Plantabelle {
	font-size: 0.7em;
	line-height:0.5em;
	}
}

.loginForm {
	width: 300px;
}

.loginFormFields {
    width: 90%;
	height: 34px;
	border-radius: 5px;
	box-shadow: 1px 1px 6px lightgray;
}

.loginFormLabel {
    width: 90%;
}

.color-weekend {
	background: antiquewhite;
}

.color-workingday {
	background: lightgray;
}

.timeRecordingForm {
	width: 280px;
}

.timeRecordingFormFields {
    width: 100%;
	height: 65px;
	border-radius: 5px;
	box-shadow: 1px 1px 6px lightgray;
}

.timeRecordingClock {
	width:280px; 
	margin:5; 
	padding:5px; 
	border:1px solid #333; 
	color:#2b2a27; 
	border-radius: 5px;
	box-shadow: 1px 1px 6px lightgray;
}

#timeRecordingDate { 
	font-family:'Questrial', sans-serif; 
	font-size:20px; 
	text-align:center; 
}

ul.time { 
	width:280px; 
	margin:0 auto; 
	padding:0px; 
	list-style:none;
	text-align:center; 
}

li.time { 
	display:inline; 
	font-size:1em; 
	text-align:center; 
    font-family: 'Work Sans', sans-serif;
}

#timeRecordingPoint { 
	position:relative; 
	-moz-animation:ticktack 1s ease infinite; 
	-webkit-animation:ticktack 1s ease infinite;
	padding-left:1px; 
	padding-right:1px; 
}

@-webkit-keyframes ticktack {
	0% {opacity:1.0;}
	50% {opacity:0; text-shadow:none; }
	100% {opacity:1.0;}	
}

@-moz-keyframes ticktack {
	0% {opacity:1.0; text-shadow:0 0 10px #a9b0af;}
	50% {opacity:0; text-shadow:none; }
	100% {opacity:1.0; text-shadow:0 0 10px #a9b0af; }	
}

.timeRecordingText { 
	font-family:'Questrial', sans-serif; 
	font-size:20px; 
	text-align:center; 
}

.vacationRequestFormFields {
    width: 200px;
	height: 40px;
	border-radius: 5px;
	box-shadow: 1px 1px 6px lightgray;
}


.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #0073A1; 
  border-bottom: 6px solid #0073A1; 
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 3s linear infinite; /* Safari */
  animation: spin 3s linear infinite;
  margin:0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.timeRecordingTerminalClock {
	width:360px; 
	margin: 0 auto;
	margin:5; 
	padding:5px; 
	border:1px solid #333; 
	color:#2b2a27; 
	border-radius: 5px;
	box-shadow: 1px 1px 6px lightgray;
}

.timeRecordingTerminalFormFields {
    width: 100%;
	height: 100px;
	border-radius: 5px;
	box-shadow: 1px 1px 6px lightgray;
}

.timeRecordingTerminalForm {
	width: 360px;
	margin: 0 auto;
}

.timeRecordingTerminalRow {
	display: flex;
}

.timeRecordingTerminalPauseRow {
	display: flex;
	/*display: none;*/
}

.breakRecordingManagerFormFields {
	height: 40px;
	border-radius: 5px;
}

.breakRecordingManagerLoginform{
	width:345px;
	height:195px;
	margin-top:25px;
	background-color:#2396C4;
	border-radius:3px;
	box-shadow:0px 0px 10px 0px #424242;
	padding:10px;
	box-sizing:border-box;
	visibility:hidden;
	display:none;
}