html,body{
	overflow-x: hidden !important;
	-ms-overflow-style: none;
	::-webkit-scrollbar { display: none; }
}
html{
	width:100%;
	margin:0px;
	padding:0px;
	font-family: "Open Sans", sans-serif;
}
body{
	width:100%;
	margin:0px;
	padding:0px;
}
p{
	padding:0;
	margin:0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	line-height:18px;
	font-size:14px;
}
section{
	width:100%;
}
b {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a{
	text-decoration:none;
	cursor:pointer;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}
h2{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size:14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h4{
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	font-size:14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight:700;
}
canvas{
    position: absolute;
}

#container{
	background:url(img/bg.jpg) no-repeat;
	background-size:contain;
}

#home{
    position: absolute;
	background:url(img/reka_logo.svg) no-repeat;
	background-size:contain;
	z-index:20;
}

#three_job1, 
#three_job2, 
#three_job3,
#three_job4,
#three_job5,
#three_job6,
#three_job7,
#three_job8{
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
}
#three_job1,
#three_job3,
#three_job6,
#three_job8{
	z-index:5;
}
#three_job2,
#three_job4,
#three_job5,
#three_job7{
	z-index:15;
}
.info{
	margin:0 0 20px 0 !important;
}
.info p:nth-child(1){
	width:30%;margin:0 1% 0 0;
}
.info p:nth-child(2){
	width:22%;margin:0 1% 0 0;
}
.info p:nth-child(3){
	width:16%;margin:0 2% 0 0;
}
.info p:nth-child(4){
	width:28%;
}
.vid{
	color:#fff;	
	width:100%;
	height:70px;
	margin:5px 0 0 0;
	float: left;
}
#mainInfoText span{
	width:69%;
}
.homeVid{
	background:url(img/Job_2_vid.jpg) no-repeat center top;
	background-size:contain;
	width: 28%;
    height: 50px;
    float: right;
    display: block;
    margin: -22px 0 0 3%;
}
#three_job1 .vid{
	background:url(img/Job_1_vid.jpg) no-repeat center top;
	background-size:contain;
}
#three_job1 .vid:hover{
	background:url(img/Job_1_vid_active.jpg) no-repeat center top;
	background-size:contain;
}
#three_job2 .vid{
	background:url(img/Job_2_vid.jpg) no-repeat center top;
	background-size:contain;
}
#three_job2 .vid:hover{
	background:url(img/Job_2_vid_active.jpg) no-repeat center top;
	background-size:contain;
}
#three_job3 .vid{
	background:url(img/Job_3_vid.jpg) no-repeat center top;
	background-size:contain;
}
#three_job3 .vid:hover{
	background:url(img/Job_3_vid_active.jpg) no-repeat center top;
	background-size:contain;
}
#three_job4 .vid{
	background:url(img/Job_4_vid.jpg) no-repeat center top;
	background-size:contain;
}
#three_job4 .vid:hover{
	background:url(img/Job_4_vid_active.jpg) no-repeat center top;
	background-size:contain;
}

.infoContainer{
	position:absolute;
	overflow-y: scroll;
	display:none;
	z-index:100;
}
.back{
	position: absolute;
	z-index: 500;
	width:100%;
	font-weight:700;
	color:#fff;
	padding:0 0 0 40px;
	background:url(img/back.png) no-repeat center left;
	background-size:contain;
}



#mainInfoText h2{

}
.infoContainer .infoText{
	float:left;
	width:100%;
	overflow:hidden;
}
@-moz-document url-prefix() { 	
	.infoContainer .infoText {
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.infoContainer {
		overflow: hidden;
	}
}
.infoContainer h1{
	float:left;
	width:100%;
	color:rgba(0,0,0,0);
	margin:10px 0 10px 0;
}
.infoContainer p{
	float:left;
	width:100%;
}
.infoContainer span{
	float:left;
	width:100%;
	margin:12px 0 0 0;
}
.infoContainer span h4{
	float:left;
	width:28%;
	padding:0 3% 0 0;
	margin:0;
}
.infoContainer span p{
	float:left;
	width:69%;
}
.infoContainer  .infoFooter{
	float:left;
	width:100%;
	margin:0px 0 0px 0;
}
.infoContainer  .infoFooter a:nth-child(1){
	float:left;
	width:40%;
	height:90px;
	background:url(img/PacksAn_Logo.png) no-repeat center;
}
.infoContainer  .infoFooter a:nth-child(2),
.infoContainer  .infoFooter a:nth-child(3){
	float:left;
	width:30%;
	background:url(img/info.png) no-repeat center left;
	background-size: contain;
	height:40px;
	margin:25px 0 0 0;
	font-weight:700;
	font-size:12px;
	color:#fff;
	padding: 5px 0 0 50px;
    box-sizing: border-box;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#three_job5 .infoContainer  .infoFooter a:nth-child(2),
#three_job5 .infoContainer  .infoFooter a:nth-child(3){
	font-size:9px;
	padding: 8px 0 0 45px;
	margin:0;
}

#three_job1 .infoContainer{
	transform: rotate(5.8deg);
}
#three_job1 .infoContainer h1{
	background:url(img/Job1_Headline.png) no-repeat center left;
	background-size:contain;
}

#three_job2 .infoContainer{
	transform: rotate(2.8deg);
}
#three_job2 .infoContainer h1{
	background:url(img/Job2_Headline.png) no-repeat center left;
	background-size:contain;
}

#three_job3 .infoContainer{
	transform: rotate(4deg);
}
#three_job3 .infoContainer h1{
	background:url(img/Job3_Headline.png) no-repeat center left;
	background-size:contain;
}

#three_job4 .infoContainer{
	transform: rotate(-0.5deg);
}
#three_job4 .infoContainer h1{
	background:url(img/Job4_Headline.png) no-repeat center left;
	background-size: 95%;
}

#three_job5.infoContainer{	
	transform: rotate(-0.5deg);
}
#three_job5 .infoContainer h1{
	background:url(img/Job5_Headline.png) no-repeat center left;
	background-size:contain;
}
#three_job5 .infoContainer  .infoFooter{
	margin:20px 0 0 0;
}
#three_job5 .infoContainer  .infoFooter a:nth-child(1){
	float:left;
	width:50%;
	background:url(img/about_link_1.png) no-repeat center;
	background-size:contain;
}
#three_job5 .infoContainer  .infoFooter a:nth-child(2){
	float:left;
	width:50%;
	background:url(img/about_link_2.png) no-repeat center;
	background-size:contain;
}
#three_job5 .infoContainer p{
	margin:0 0 0 5px;
}

#three_job6 .infoContainer{
	transform: rotate(-0.5deg);
}
#three_job6 .infoContainer h1{
	background:url(img/Job6_Headline.png) no-repeat center left;
	background-size:contain;
}
#three_job6 .infoContainer p{
	margin:0 0 0 2px;
}

#three_job7 .infoContainer{
	transform: rotate(-0.5deg);
}
#three_job7 .infoContainer h1{
	background:url(img/Job7_Headline.png) no-repeat center;
	background-size:contain;
	margin:10px 0 20px 0;
}
#three_job7 .infoContainer p{
	margin:0 0 0 2px;
}
#three_job7 .infoContainer .download{
	width:100%;
	height:50px;
	background:url(img/download.png) no-repeat center;
	background-size:contain;
	float:left;
	margin: 20px 0 0 0;
}
#three_job7 .infoContainer span{
	width:100%;
	height:30px;
	background:url(img/Bewerbungsbogen.png) no-repeat center;
	background-size:contain;
	float:left;
	margin: 10px 0 0 0;
}
#three_job8 .infoContainer{
	transform: rotate(-5deg);
}
#three_job8 .infoContainer h1{
	background:url(img/Job8_Headline.png) no-repeat center;
	background-size:contain;
	margin:10px 0 20px 0;
}
#three_job8 .infoContainer p{
	margin:0 0 0 2px;
}
#three_job8 .infoContainer .download{
	width:100%;
	height:50px;
	background:url(img/download.png) no-repeat center;
	background-size:contain;
	float:left;
	margin: 30px 0 0 0;
}
#three_job8 .infoContainer span{
	width:100%;
	height:30px;
	background:url(img/Bewerbungsbogen.png) no-repeat center;
	background-size:contain;
	float:left;
	margin: 10px 0 0 0;
}


.hoverBox{
	position:absolute;
	cursor:pointer;
	z-index:20;
}
#hoverBox1{
	transform: rotate(-10deg);	
}
#hoverBox2{
	transform: rotate(4deg);
}
#hoverBox3{
	transform: rotate(3deg);
}
#hoverBox4{
	transform: rotate(-5deg);
}
#hoverBox5{
	transform: rotate(-15deg);
}
#hoverBox6{
	transform: rotate(3deg);
}
#hoverBox7{
	transform: rotate(6deg);
}
#hoverBox8{
	transform: rotate(-8deg);
}

.infoText{
    position: absolute;
	overflow: scroll;
    overflow-x: hidden;
	z-index:16;
}
::-webkit-scrollbar {
    width: 0px;  
    background: transparent
}
.infoText h2{
	padding:0;
	margin:0;
}

.icons{
	position: absolute;
}

#icon1{
	background:url(img/icon1.png) no-repeat center;
	background-size: contain;
}
#icon2{
	background:url(img/icon2.png) no-repeat center;
	background-size: contain;
}
#icon3{
	background:url(img/icon3.png) no-repeat center;
	background-size: contain;
}
#icon4{
	background:url(img/icon4.png) no-repeat center;
	background-size: contain;
}
#icon5{
	background:url(img/icon5.png) no-repeat center;
	background-size: contain;
}
#icon6{
	background:url(img/icon6.png) no-repeat center;
	background-size: contain;
}
#icon7{
	background:url(img/icon7.png) no-repeat center;
	background-size: contain;
}
#icon8{
	background:url(img/icon8.png) no-repeat center;
	background-size: contain;
}
#icon9{
	background:url(img/icon9.png) no-repeat center;
	background-size: contain;
}
#icon10{
	background:url(img/icon10.png) no-repeat center;
	background-size: contain;
}

@media only screen and (min-width: 750px){
	#three_job1 .back{
		transform: rotate(5.8deg);
		display:none;
	}
	#three_job2 .back{
		transform: rotate(2.8deg);
		display:none;
	}
	#three_job3 .back{
		transform: rotate(4deg);
		display:none;
	}
	#three_job4 .back{
		transform: rotate(-0.5deg);
		display:none;
	}
	#three_job5 .back{
		display:none;
	}
	#three_job6 .back{
		transform: rotate(-0.5deg);
		display:none;
	}
	#three_job8 .back{
		transform: rotate(-5deg);
		display:none;
	}
}

@media only screen and (max-width: 1800px){
	p{
		line-height:18px;
		font-size:12px;
	}
	.back, h2{
		font-size:12px;
	}
	.back{
		padding: 0 0 0 30px;
	}
	h4{
		font-size:12px;
	}
	.infoContainer  .infoFooter a:nth-child(2),
	.infoContainer  .infoFooter a:nth-child(3){
		font-size:11px;
	}
	.info{
		margin:0 0 0 0 !important;
	}
}
@media only screen and (max-width: 1680px){
	p{
		line-height:15px;
		font-size:12px;
	}
	.back, h2{
		font-size:12px;
	}
	.back{
		padding: 0 0 0 30px;
	}
	h4{
		font-size:12px;
	}
	.infoContainer  .infoFooter a:nth-child(2),
	.infoContainer  .infoFooter a:nth-child(3){
		font-size:11px;
	}
	.info{
		margin:0 0 0 0 !important;
	}
	#mainInfoText span{
		float: left;
		width:initial;
	}
	.homeVid{
		background:url(img/Job_2_vid.jpg) no-repeat center top;
		background-size:contain;
		width: 28%;
		height: 50px;
		float: left;
		display: block;
		margin: -18px 0 0 3%;
	}
}
@media only screen and (max-width: 1560px){
	p{
		line-height:14px;
		font-size:11px;
	}
	.back, h2{
		font-size:11px;
	}
	.back{
		padding: 0 0 0 30px;
	}
	h4{
		font-size:11px;
	}
	.infoContainer  .infoFooter a:nth-child(2),
	.infoContainer  .infoFooter a:nth-child(3){
		font-size:10px;
	}
	.info{
		margin:0 0 0 0 !important;
	}
	#mainInfoText span{
		float: left;
		width:initial;
	}
	.homeVid{
		background:url(img/Job_2_vid.jpg) no-repeat center top;
		background-size:contain;
		width: 28%;
		height: 50px;
		float: left;
		display: block;
		margin: -18px 0 0 3%;
	}
	
	#three_job7 .infoContainer .download {
		width: 100%;
		height: 30px;
		background: url(img/download.png) no-repeat center;
		background-size: contain;
		float: left;
		margin: 15px 0 0 0;
	}
	#three_job7 .infoContainer span {
		width: 100%;
		height: 20px;
		background: url(img/Bewerbungsbogen.png) no-repeat center;
		background-size: contain;
		float: left;
		margin: 15px 0 0 0;
	}
	#three_job7 .infoContainer h1 {
		background: url(img/Job7_Headline.png) no-repeat center;
		background-size: contain;
		margin: 10px 0;
	}
	#three_job8 .infoContainer .download {
		width: 100%;
		height: 30px;
		background: url(img/download.png) no-repeat center;
		background-size: contain;
		float: left;
		margin: 15px 0 0 0;
	}
	#three_job8 .infoContainer span {
		width: 100%;
		height: 20px;
		background: url(img/Bewerbungsbogen.png) no-repeat center;
		background-size: contain;
		float: left;
		margin: 15px 0 0 0;
	}
}
@media only screen and (max-width: 1440px){
	p{
		line-height:13px;
		font-size:10px;
	}
	.back, h2{
		font-size:10px;	
	}
	.back{
		padding: 0 0 0 30px;
	}
	h4{
		font-size:10px;
	}
	.infoContainer  .infoFooter a:nth-child(1){
		background-size:contain;
	}
	.infoContainer  .infoFooter a:nth-child(2),
	.infoContainer  .infoFooter a:nth-child(3){
		font-size:9px;
		padding: 8px 0 0 45px
	}
	#three_job5 .infoContainer  .infoFooter a:nth-child(2),
	#three_job5 .infoContainer  .infoFooter a:nth-child(3){
		font-size:9px;
		padding: 8px 0 0 45px
	}
	.info{
		margin:0 0 0 0 !important;
	}
	#mainInfoText span{
		float: left;
		width:initial;
	}
	.homeVid{
		background:url(img/Job_2_vid.jpg) no-repeat center top;
		background-size:contain;
		width: 28%;
		height: 50px;
		float: left;
		display: block;
		margin: -18px 0 0 3%;
	}
}
@media only screen and (max-width: 1270px){
	#mainInfoText span{
		float: left;
		width:100%;
	}
	.homeVid{
		background:url(img/Job_2_vid.jpg) no-repeat center top;
		background-size:contain;
		width: 28%;
		height: 50px;
		float: left;
		display: block;
		margin: 5px 0 0 0;
	}
}
@media only screen and (max-width: 750px){
	#container{
		background:url(img/bg_mobile.jpg) no-repeat;
		background-size:contain;
	}
	#home{
		position: absolute;
		background:none;
		z-index:20;
	}
	#three_job1,
	#three_job3,
	#three_job6, 
	#three_job8{
		z-index:15;
	}
	
	.infoContainer{
		transform: rotate(0deg) !important;		
		background:url(img/pappeBG_mobile.png) no-repeat;
		background-size:cover;
		z-index:20;
	}
	.infoContainer h1{
		margin: 5px 0 5px 0;
	}
	#three_job5 .infoContainer h1{
		height: 100px;
	}
	#three_job6 .infoContainer h1{
		height: 50px;
	}
	.infoText{
		padding:40px 20px;
		box-sizing:border-box;
	}
	.infoText p{
		font-size:12px;
		line-height:18px;
	}
	#mainInfoText{
		padding:0;
	}
	#mainInfoText p{
		padding:0;
		font-size:10px;
		line-height:13px;
	}
	.icons{
		display: none;
	}
	.back {
		padding: 0 0 0 30px;
		margin: 30px 0 20px 20px;
	}
	#three_job1 .back{
		transform: rotate(0deg);
		display:none;
	}
	#three_job2 .back{
		transform: rotate(0deg);
		display:none;
	}
	#three_job3 .back{
		transform: rotate(0deg);
		display:none;
	}
	#three_job4 .back{
		transform: rotate(0deg);
		display:none;
	}
	#three_job5 .back{
		display:none;
	}
	#three_job6 .back{
		transform: rotate(0deg);
		display:none;
	}
	#three_job8 .back{
		transform: rotate(0deg);
		display:none;
	}
	.info{
		margin:0 0 20px 0 !important;;
	}
	.info p:nth-child(1){
		width: 48%;
		margin: 0 2% 0 0;
	}
	.info p:nth-child(2){
		width: 50%;
		margin: 0 0% 0 0;
	}
	.info p:nth-child(3){
		width: 40%;
		margin: 0 10% 0 0;
	}
	.info p:nth-child(4){
		width: 50%;
	}
	.vid {
		padding: 0;
	}
	#mainInfoText span{
		float: left;
		width:initial;
	}
	.homeVid{
		background:url(img/Job_2_vid.jpg) no-repeat center top;
		background-size:contain;
		width: 28%;
		height: 50px;
		float: left;
		display: block;
		margin: -18px 0 0 5%;
	}
	.infoContainer .infoFooter a:nth-child(1),
	.infoContainer .infoFooter a:nth-child(2),
	.infoContainer .infoFooter a:nth-child(3){
		margin:0;
		width: 50%;
	}
	#three_job5 .infoContainer .infoFooter a:nth-child(1),
	#three_job5 .infoContainer .infoFooter a:nth-child(2){
		margin:0;
		padding:0;
		height: 90px;
	}
	#hoverBox1{
		background:url(img/Job1_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	#hoverBox2{
		background:url(img/Job2_Pappe_512.png) no-repeat;
		background-size:contain;
		transform: rotate(6deg);
	}
	#hoverBox3{
		background:url(img/Job3_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	#hoverBox4{
		background:url(img/Job4_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	#hoverBox5{
		background:url(img/Job5_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	#hoverBox6{
		background:url(img/Job6_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	#hoverBox7{
		background:url(img/Job7_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	#hoverBox8{
		background:url(img/Job8_Pappe_512.png) no-repeat;
		background-size:contain;
	}
	
	
		
	canvas{
		display:none;
	}
}