@media only screen and (max-width: 600px) {
      
      .jobclick p {
      	font-size: 1.3rem !important;
      	line-height:1.6rem !important;
      }
    
body {
}  

html::before {
content: ' ';
display: block;
background-image: url('../img/background_mobile.jpg');
background-position: top;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10;
}    
      
.news {
	display:none;
}

.header {
	background: #FFF;
	height:56px;
	position:fixed;
	width:100vw;
	z-index:100;
	}

.logo_job {
    position: fixed;
    top: 1rem !important;
    width: 12% !important;
    z-index: 100!important;
    left: 1rem !important;
}

.logo {
    position: fixed;
    top: 1rem !important;
    width: 12% !important;
    z-index: 100!important;
    left: 4.5rem !important;
}


.logosize {
	background-image: url("../img/logo4c.svg") !important ;
	width:140px !important;
}

#hamburger-menu {
	z-index:1000;
	position: fixed;
}

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 18px;
  left: 18px;

  width: 20px;
  height: 20px;

  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 2px;

  background-color: #616161;

  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 100vw;
  height: 100%;
  margin: 0;
  padding: 50px 0;
  list-style: none;
  background-color: rgba(255, 255, 255, .95);
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);

  transition-duration: .25s;
}

.menu__item {
  display: block;
  padding: 7px 17px;
  color: #666;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 300;

  text-decoration: none;

  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}

#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11 {
	padding-top:4rem !important;
}

#footer {
	padding:1rem 0 !important;
}

#floating-share-buttons-mobile {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0;
  overflow: hidden;
}
#floating-share-buttons-mobile li {
  float: right;
}
#floating-share-buttons-mobile a {
  color: #fff;
  text-decoration:none;
  font-size:18px;
  background-color: #31B9FF ;
  
}
  ul#floating-share-buttons-mobile {    
    position: fixed;
    bottom: 0px;
    left:0px;
    min-height: 30px;
    padding: 0px;
    z-index:2000;
    width:100vw;
  }
  ul#floating-share-buttons-mobile a {
    width:20vw;
    height:3rem;
    align-items: center;
    display: inline-flex;
    justify-content: center;    
    transition: width 0.5s;
  }
  
.scroll-container {
	width: 100vw;
	height: auto !important;
	overflow: auto !important;
	scroll-snap-align: none !important;
}

.main {
	scroll-snap-type: none !important;
	overflow-y: scroll !important;
	overflow-x: none;
	max-height: auto !important;
	scroll-behaviour: smooth;
	padding-top:3.5rem;
}

.swiper-pagination {
    display: none !important;
}

.tower-focus-bg, .parallax-bg {
	background-image: none !important;
}


#splash {
	height:100vh !important;
}
      
#callout {
    width: auto !important;
    height: 5rem;
    position: absolute;
    top: 35vh !important;
    left: 20vw !important;
}
      
      .arrow-up {
        float:left;
        width:6rem !important;
        height:5rem !important;
        margin-bottom:1rem;
      }
      
      
      .career-teaser {
        float:none !important;
        height:4rem !important;
        display:block;
        width:12rem;   
      }
      
                  
      .career-teaser p {
      	display: inline-block;
      	align-self: flex-end;
      	font-size:1.4rem !important;
      	color:#FFF !important;
      	width: 100% !important;
        margin-left: 0!important;
      }



.swiper-slide .jobtitle {
    font-size: 0.9rem !important;
    font-weight: 300;
    line-height: 1.1rem !important;
    letter-spacing: 0.4px;
    margin-bottom: 1rem;
    margin-top:4rem;
}

.swiper {
	height: auto !important;
}

.swiper-slide {
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1rem 1rem 1rem 1rem !important;
} 


.jobsubtitle {
    font-size: 1.5rem !important ;
    font-weight: 700;
    line-height: 2rem !important;
} 


      
.swiper-slide .title  h2, .swiper-slide .title  h3 {
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1.3rem;
    letter-spacing: 0.4px;
    margin: 0;
}

.swiper-slide .subtitle, h1, h2, h4 {
    font-size: 1.5rem !important;
    font-weight: 700;
    line-height: 1.8rem !important;
    margin: 0 0 1rem 0;
}
      
.swiper-slide .text {
    font-size: 0.9rem;
    max-width: 100%;
    line-height: 1.5rem ;
    font-weight: 300;
    color: #222;
    opacity: 80%;
    background-color: #FFF;
    padding: 1rem;
    margin-top: 0rem;
    float: left;
    height: auto;
}
#jobbox {
    margin-top: 0.7rem;
    margin-left:0;
    float: left;
    min-width: 100%;
}


.swiper-slide .joblink {
    font-size: 0.9rem;
    max-width: 100% !important;
    height: 2.2rem !important;
    line-height: 1.2rem;
    font-weight: 400;
    color: #31b9ff;
    background-color: #FFF;
    opacity: 0.8;
    padding: 0.8rem;
    margin-bottom: 0.57rem;
    display: block;
    position: relative;
    min-width: auto !important;
}

.alljobs {
    max-width: 100%;
    font-size: 1rem;
    height: 1.5rem !important;
    line-height: 1.4rem;
    font-weight: 400;
    background-color: #31b9ff;
    color: #FFF;
    padding: 0.9rem;
    display: block;
    position: relative;
}

.arrow-pos {
    float: right;
    margin-left: 1rem;
    position: relative;
    top: 0.4rem !important;
    right: 0;
}

#quotebox {
    font-size: 1rem;
    width: 100%;
    font-weight: 300;
    height: 400px !important;
    color: #222;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0 0 3rem 0;
    margin: 0.7rem 0 0 0;
    float: right;
}

.quote p, .alumni p {
    font-style: italic;
    line-height:1.5rem ;
    margin: 1rem 0;
}

.slider__nav {
    margin: 2rem 24px !important;
}

.quotetext {
    position: absolute;
    top: 0rem;
    left: 2rem;
    text-align: center;
    width: 60vw !important;
    z-index: 100;
}

.quotename {
    font-size: 0.9rem;
    line-height: 1.3rem !important;
    display:table-cell;
    width:50vw;
}

.slick-slide img {
    display: block;
    height: 220px;
    margin-top:11.3rem;
}

.mouse {
    display: none;
}

/* Viewport 2 */

.swiper-wrapper {
    transform: none !important;
    transition: none !important;
    display: unset !important;
}

.kollegen_mobile, .themen_mobile, .fakten_mobile {
	float: left;
	height:auto;
}
.colleagues-text {
    font-size: 0.85rem;
    max-width: 100%;
    line-height: 1.2rem;
    font-weight: 300;
    color: #222;
    opacity: 80%;
    background-color: #FFF;
    padding: 1.4rem;
    margin-top: 0rem;
    float: left;
    height:auto;	
}


.colleagues {
    margin-top: 2rem;
    width: 100%;
    float: right;
}

.colleague {
	width:31% ;
    margin-right: 3% !important;
    margin-left:0;
	margin-bottom:0.5rem ;
}

.portrait {
    width: 100% ;
    margin-bottom:0 ;
}
.last, .third {
	margin-right:0 ;
}

.themen {
	width:6rem !important;
	z-index:-100;
}

.thema {
	color:#31B9FF !important;  
	padding:18px !important;
	text-align:center !important;
	font-size: 1.1rem !important;
	line-height:1.3rem !important;
	margin-top:1px ;
}

.bubble {
	opacity:0.8 !important ;
}


.flip-circle-back {
  background-color: #fff ;
  background: #FFF;
  color: #000;
  width:120px !important;
  height:120px !important;
  border-radius:50%;  
  padding:12px !important;
  transform: rotateY(-180deg) scaleX(1.4) scaleY(1.4) !important;
  font-size:0.35rem !important;
  line-height:0.6rem !important;
  font-weight:300;
  margin-left: 10% !important;
  z-index:300 !important;
}

#bubble1 {
    left: 3rem!important;
    top: 1rem !important;
}
#bubble2 {
    left: 3rem!important;
    top: 10rem !important;
}
#bubble3 {
    left: 3rem!important;
    top: 19rem !important;
}
#bubble4 {
    left: 3rem!important;
    top: 28rem !important;
}
#bubble5 {
    left: 3rem!important;
    top: 37rem !important;
}


#nationen, #frauen, #website, #presse, #quereinsteiger, #alter {
    width: 80vw !important;
    position: relative !important;
    float: left;
    left:1rem !important;
    top: 0 !important;
    margin: 2rem 0;
    
}    

/* Viewport 3 */
.quer, .hoch {
	display:none !important ;
}
.mobile {
	display:block !important;
}
.process {
	width:auto;
	height:80% !important;	
	margin-left: -3rem !important;
}

.timing {
    margin: 1rem 1rem 0 0 !important;
    width:90vw !important;
    text-align: center !important;
}

.stages {
    height: auto !important;
    text-align: center !important;
    display: block !important;
    margin-top:0.5rem;
}
.process-icon {
    margin-top: 1.3rem;
    display:table-cell;
    float: none !important;
    margin-left: 42%;
    margin-top: 0.5rem !important;
}

.waswann {
	margin-top:-1rem !important;
}

#benefits {
    padding: 1rem 0 0 0 !important;
}

.benefit {
    width: 42vw !important;
    min-height: 100% !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0px !important;
}


.flip-box-back {
    width: calc(100% - 20px) !important;
    height: calc(100% - 53px) !important;
    font-size: 0.66rem !important;
    line-height:0.76rem;
}
.flip-box-back p {
	padding-top:10%;
    height: calc(100% - 53px) !important;
}

.accordion {
  background-color: #eee;
  opacity: 0.91w;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 0.9rem;
  line-height:1.2rem;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ddd;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
    color: #777;
    font-size: 0.9rem;
    line-height:1.3rem;
    font-weight: 300;
    margin: 1rem 0;
}

.benefiticon {
	height:2rem; 
	margin-right:0.7rem; 
	vertical-align: middle;
}

/* Viewport 4 */



.modell {
	margin: 0 !important;
	padding:0 0 2rem 0!important;
}
.modell img {
	max-height:70vh;
}
.alumnitext {
    margin: 0rem -20rem 0 0.6rem !important;
    max-width: 80% !important;
}

.alumnisign {
    line-height: 2.5rem !important;
}

.alumni img {
    bottom: 0;
    position: relative !important;
    left: 0;
    z-index: 1000;
    height: 120px !important;
    width: 120px !important;
    margin: 0 auto;
    height: auto;
    width: 100%; 
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
    margin-top:1rem !important;
    float:none !important;
    margin-right:0 !important;
    background-color:#FFF;
}

.alumni_portrait {
	width:100%;
	text-align: center;
	height:140px;	
}

.alumnitext p {
	font-size: 0.9rem !important;
	line-height: 1.3rem !important;
}

.alumniname {
    font-size: 0.8rem !important;
    line-height: 0.9rem !important;
}

.nonmobile {
	display:none !important;
}

.mobileslider {
	min-height:630px !important;
}

.video-text {
	font-size: 0.9rem !important;
	max-width: 100vw;
	line-height: 1.4rem !important;
	padding: 1rem !important;
	height: auto;
    }	
    
.video {
    margin: -7rem 0 -8rem 0!important;
    width: 91.2vw;
    float: left;
} 

.slider__nav {
    margin: 2rem 20px;
}


/* Viewport 5 */
		.openjobs {
			width: 100%;
			padding: 2em 0;
			height: auto !important;
}
		.openjobs ul {
			padding: 0 4rem;
		}
		.openjobs h5 {
			padding: 0 2rem;
		}
		.openjobs {
			font-size: 0.85rem !important;
			line-height: 1.2rem !important;
		}
		ul.hanging {
  		  text-indent: -1.65rem !important;
    	}      


	#contactbox {
		width: 100%;
		height: 300px;
		margin: 1.4rem 0 0 0;
		padding: 0;
		}
	.contactimg {
	    height: 300px;
		}	
.contacttext p {
    font-size: 0.9rem !important;
    line-height: 1.5rem !important;
}		

/* Job */

.dropbtn {
  background-color: #31B9FF;
  font-family: Roboto;  
  font-weight: 300;
  color: white;
  padding: 1.1rem !important;
  border: none;
  cursor:pointer;
  font-size:0.9rem;
  text-align: center;
  min-width:100%;    
}

.dropup {
  position: relative;
  display: inline-block;
  width:97% !important;      
  padding:0 !important;
  margin-bottom:4rem;
}

#dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  bottom: 3.3rem !important;
  z-index: 1;
  margin-left:0 !important;
}

#dropup-content a {
  color: black;
  font-size:0.8rem !important;
  font-weight:300;  
  text-decoration: none;
  display: block;
  padding: 0.8rem 1.7rem !important;
}


.jobintro, .weiter, .erarbeiten, .jobtitle, .einbringst, .jobclick {
	width: 82% !important;
	margin-right:0;
}
 


#jobpage p, #jobpage ul {
	font-size:0.9rem;
    line-height: 1.4rem ;
}

#jobpage h2 {
	font-size:1.4rem ;
    line-height: 1.8rem ;
}    

}