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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');


/*
button settings
*/

button.player {
display:inline-block;
 }
 
button {
  position: relative;
  display:inline-block;
  text-transform:uppercase;
  border: 1px solid #4c4c4c;
  cursor: pointer;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;;
  width: 146px;
  min-height: 30px;
  box-sizing: content-box;
  margin:10px 10px 0px 0px;
}

button img {
	width:20px !important;
	height:auto;
	padding-top:2px;
	padding-left:2px;
	float:left;
}

.button-form-input img {
	padding-top:1px;
}

.button-wrapper {
  display:inline-block;
  position: relative;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 146px;
  min-height: 30px;
  margin:10px 30px 10px 0px;
  background-color:white;
  z-index:-1;
  }
  
.button-wrapper-large {
 display:block;
  position: relative;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 600px;
  margin-right:10px;
  margin-top:5px;
  background-color:white;
  z-index:-1;
  text-align:left;
  }	 
  
 .button-wrapper-large img {
	width:20px;
	height:auto;
	padding-top:2px;
	padding-right:0px;
	float:right;
}

.button-wrapper :hover {
	background-image: linear-gradient(white, white, #dcdcdc);
}

 input {
  border: none;
  text-transform:uppercase;
  background-color:transparent;
  cursor: pointer;
  float:right;
  padding: 4px;
  font-family: 'Roboto', sans-serif, arial;
  font-size: 13px;
  letter-spacing: -0.05em;
  color:#4c4c4c;
  font-weight:500; 
}

input :hover {
	color:red !important;
}

#myFile {
	position:absolute;
	display:inline-block;
	left: 0px;
}

.button-text2 {
	font-family: 'Roboto', sans-serif, arial;
	float:right;
	padding: 5px 4px 4px 4px;
    font-size: 13px;
	letter-spacing: -0.05em;
	color:#4c4c4c;
	font-weight:500;
}
 

  .inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
 text-transform:uppercase;
  border: 1px solid #4c4c4c;
  cursor: pointer;
  background-color: white;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  text-align: center;
  width: 400px;
  min-height: 40px;
  box-sizing: content-box;
  margin:0px 10px 0px 0px;
  font-family: 'Roboto', sans-serif, arial;
  padding: 5px 10px 4px 10px;
  font-size: 13px;
  color:white;
  font-weight:500;
  background-color:#4c4c4c;
}
	
.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: white;
	color:#4c4c4c;
}

label {
	line-height:2em;
	font-size:11px;
} 










 /*
general settings
*/ 

body
{
  margin: 0;
  padding: 0;
  background: white;
  color: #4c4c4c;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  color: #4c4c4c;
  text-align: inherit;
  line-height:1.3em;
}

.background
{
	width:100%;
	height:100%;
	top:0px;
}

.content
{
  width:90%;
  max-width:900px;
  position: absolute;
  left: 50%;
  padding-left:30px;
  padding-right:30px;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: -1px 2px 20px 2px #DFDFDF; 
  box-shadow: -1px 2px 20px 2px #DFDFDF;
}





h1 {font-size: 3.5em;
    font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height:1em;
	margin:0;
	letter-spacing:0.03em;
	color:black;}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.7em;
	font-weight: bold;
	text-transform: none;
	text-align: left;
	text-transform:uppercase !important;
	line-height:1.2em;
	color:black;
}


h2 a {
	text-decoration:none !important;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-style: italic;
	font-weight:bold;
	text-transform: none;
	text-align: left;
	line-height:1.3em;
	margin-bottom:0.3em;
}

h3 a {
	text-decoration:none !important;
}




a {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	color: #4c4c4c;
}

h6 {font-weight:bold;
	font-size:14px;
	color:black;
	margin:0px !important;
	letter-spacing:0.02em;}
	
h6 a {
	textdecoration:none;}


html {
    scroll-behavior: smooth;
}



a.prev {
	text-decoration: none;
}

a.next {
	text-decoration: none;
}

a.prev2 {
	text-decoration: none;
}

a.next2 {
	text-decoration: none;
}


ul, li {margin-left: 10px; padding-left: 5px; line-height:1.4em;}


.line {
	width: 100%;
	border-bottom: 0.75px dotted #4c4c4c;
	margin-top:40px;
	margin-bottom:40px;
}

.project-links {
	width: 100%;
	border: 0.5px dotted #4c4c4c;
	padding: 10px;
	margin-top:20px;
	margin-bottom:0px;
	text-align: center;
} 

.project-links a {
	text-decoration:none !important;
}



.caption-bild {
	font-size: 13px;
	font-style:italic;
	text-align:center;
	padding-top:10px;
}

.logo-heading {
	position:absolute;
	float: left;
	width:90px;
	height:90px;
	margin-top: 38px;
	margin-left:14%;
	background-image:url(Bilder/monTT_red4.png);
	background-repeat:no-repeat;
	background-size: contain;
}


.heading {	
	margin-top: 45px;
	margin-bottom:0;
	margin-left:29%;
	width: 100%;
	text-align: left;
}

.heading-2 {
	margin-top:40px;
	margin-bottom: 30px;
	width:100%;
	text-align:left;
	font-size:2.5em;
	font-weight: bold;
	line-height:1em;
	color:black;
	}
	
	.heading-2-lowercase {
	margin-top:40px;
	margin-bottom: 30px;
	width:100%;
	text-align:left;
	font-size:2.5em;
	font-weight: bold;
	line-height:1em;
	color:black;
	}


.subheading {
	margin-top: -10px;
	margin-bottom:40px;
	margin-left:29%;
	padding-left:5px;
	width: 100%;
	text-align: left;
}


.image-small {
	max-width:300px;
	position:relative;
	left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%);
}

.input {
	float:left;
	width:100%;
	margin-top:30px;
}



.footer {
  position: relative;
  left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%);
  bottom: 0;
  margin-top:40px;
  margin-bottom:30px;
  padding-top:20px;
  width: 100%;
  height:30px;
  text-align: center;
  border-top: 1px solid #4c4c4c;
}


.zusatz-text {
	width:100%;
	margin-top:20px;
	margin-bottom:20px;
}











/*
image settings
*/

.left-container {
	position:absolute;
	float: left;
	width:30%;
	height:150px;
	margin-bottom:90px;
}

.right-container {
	margin-top: 0px;
	padding-top:0px;
	margin-bottom:60px;
	height:150px;
	margin-left:40%;
	width: 60%;
	text-align: left;
}


.left-container-small {
	position:absolute;
	float: left;
	width:30%;
	height:auto;
	max-width:300px;
	margin-bottom:30px;
}

.left-container-small-3 {
	position:relative;
	float:left;
	padding-top:0px;
	margin-bottom:30px;
	margin-right:30px;
	height:auto;
	width: 25%;
	max-width:300px;
	text-align: center !important;
}

.right-container-small {
	margin-top: 0px;
	padding-top:0px;
	margin-bottom:30px;
	height:auto;
	margin-left:40%;
	width: 30%;
	max-width:300px;
	text-align: left;
}

.right-container-small-2 {
	position:absolute;
	margin-top: -110px;
	padding-top:0px;
	margin-bottom:30px;
	height:auto;
	margin-left:60%;
	width: 25%;
	max-width:300px;
	text-align: left;
}


.left-container-overview {
	float: left; 
	margin-top:0px;
	padding-top:0px;
	width:47%;
	text-align: center !important;
}

.right-container-overview {
	margin-top:0px;
	padding-top:0px;
	margin-left:53%;
	width: 47%;
	text-align: center !important;
}

.center {
	text-align: center !important;
}




/*
video settings
*/


.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
margin-top:20px;
}


















/*
Hamburger menu for mobile devices
*/



.mobile-menu {
	position: fixed;
	width: 100%;
	top:0px;
	padding: 10px;
	background-color:rgba(255,255,255,0.8);
	border-bottom:1px solid #4c4c4c;
	z-index: 2;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 4px;
  left: 3%;
  margin-right:60px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: black;
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #db0f0a;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 27px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #4c4c4c;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #4c4c4c;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 100%;
  max-width:260px;
  margin: -120px 0 0 -50px;
  padding: 50px;
  padding-top: 140px;
  background: rgba(255,255,255,1);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
   -webkit-box-shadow: -1px 2px 20px 2px #DFDFDF; 
  box-shadow: -1px 2px 20px 2px #DFDFDF;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 0.5px dotted #4c4c4c;
  color: black;
  line-height:1.5em;
  text-align: center;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}






















/*
Social Media - Title - Logo on mobile devices
*/
.social-media {
	  display: table;
	  position:absolute;
      border-spacing: 16px;
      width: 110px;
	  top:-8px;
	  right:3%;
   }
	
   .social-icon {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: top;
   }
   
   .social-icon:nth-child(1) { width: 50%; }
   .social-icon:nth-child(2) { width: 50%; }

.title {
	  display: table;
	  position:absolute;
      border-spacing: 16px;
      width: 200px;
	  top:-3px;
	  left:16%;
   }
   
.logo {
	  position:absolute;
      border-spacing: 16px;
      width: 20px;
	  top:12px;
	  left:14%;
}











/*
Menu for desktop
*/
.menu-desktop
{
position: sticky;
width: 100%;
top:0px;
font-size: 14px;
color: #4c4c4c; 
border-bottom: 1px solid #4c4c4c;
background-color:white;
z-index: 5;
}


.menu-desktop a:hover
{
  color: #db0f0a;
}

.menu-desktop a
{
text-decoration:none !important;
}

img {width: 100%; height: auto; }

@media (min-width: 940px) {
   .container {
      display: table;
      border-spacing: 16px;
      width: 100%;
   }
   .col {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: middle;
   }
   

   .col:nth-child(1) { width: 10%; }
   .col:nth-child(2) { width: 5%; }
   .col:nth-child(3) { width: 18%; }
   .col:nth-child(4) { width: 8%; }
   .col:nth-child(5) { width: 8%; }
   .col:nth-child(6) { width: 8%; }
   .col:nth-child(7) { width: 8%; }
   .col:nth-child(8) { width: 8%; }
   .col:nth-child(9) { width: 7%; }
   .col:nth-child(10) { width: 5%; }
   .col:nth-child(11) { width: 5%; }
   .col:nth-child(12) { width: 10%; }
}












/*
Sub-Menu for cv
*/

.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -100px;}


.menu-cv
{
position: sticky;
width: 100%;
top:55px;
font-size: 14px;
color: #4c4c4c; 
font-style:italic;
border-bottom: 1px solid #4c4c4c;
background-color:white;
z-index: 4;
}


.menu-cv a:hover
{
  color: #db0f0a;
}

.menu-cv a{
	text-decoration:none !important;
}


.content-cv{
width:90%;
  max-width:900px;
  position: absolute;
  left: 50%;
  padding-left:30px;
  padding-right:30px;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: -1px 2px 20px 2px #DFDFDF; 
  box-shadow: -1px 2px 20px 2px #DFDFDF;
}



img {width: 100%; height: auto; }


   .container-cv {
      display: table;
      border-spacing: 8px;
      width: 100%;
   }
   .col-cv {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: middle;
   }
   

   .col-cv:nth-child(1) { width: 10%; }
   .col-cv:nth-child(2) { width: 10%; }
   .col-cv:nth-child(3) { width: 8%; }
   .col-cv:nth-child(4) { width: 12%; }
   .col-cv:nth-child(5) { width: 10%; }
   .col-cv:nth-child(6) { width: 10%; }
   .col-cv:nth-child(7) { width: 10%; }
   .col-cv:nth-child(8) { width: 10%; }
   .col-cv:nth-child(9) { width: 10%; }
   .col-cv:nth-child(10) { width: 10%; }



/*
Sub-Menu for projects
*/

.menu-projects
{
position: sticky;
width: 100%;
top:55px;
font-size: 14px;
text-align:center;
font-style:italic;
color: #4c4c4c; 
border-bottom: 1px solid #4c4c4c;
background-color:white;
z-index: 4;
}


.menu-projects a:hover
{
  color: #db0f0a;
}

.menu-projects a{
	text-decoration:none !important;
}


.content-projects{
width:90%;
  max-width:900px;
  position: absolute;
  left: 50%;
  padding-left:30px;
  padding-right:30px;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: -1px 2px 20px 2px #DFDFDF; 
  box-shadow: -1px 2px 20px 2px #DFDFDF;
}



img {width: 100%; height: auto; }

/* Menu Projects for mobile devices*/

/* The container - needed to position the menu-projects-mobil content */
.menu-projects-mobil {
  margin-top:0;
  margin-bottom:20px;
  position: relative;
  display: block;
  width:220px !important;
}

/* Style The menu-projects-mobil Button */
.dropbtn {
  background-color: white;
  color: #4c4c4c;
  padding: 14px;
  font-size: 14px;
  border: 0.75px dotted #4c4c4c;
  cursor: pointer;
}

/* menu-projects-mobil Content (Hidden by Default) */
.menu-projects-mobil-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  margin-left: 5px;
  text-align: left;
  min-width: 220px !important;
  -webkit-box-shadow: -1px 2px 20px 2px #DFDFDF; 
  box-shadow: -1px 2px 20px 2px #DFDFDF;
  z-index: 1;
}

/* Links inside the menu-projects-mobil */
.menu-projects-mobil-content a {
  color: #4c4c4c;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom:solid 1px #DFDFDF;
}

/* Change color of menu-projects-mobil links on hover */
.menu-projects-mobil-content a:hover {background-color: #F0F0F0}

/* Show the menu-projects-mobil menu on hover */
.menu-projects-mobil:hover .menu-projects-mobil-content {
  display: block;
  position:relative;
}

/* Change the background color of the menu-projects-mobil button when the menu-projects-mobil content is shown */
.menu-projects-mobil:hover .dropbtn {
  background-color: #F0F0F0;
}













/*
Slideshow
*/


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 900px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%; 
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a #4c4c4c background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: rgba(0,0,0,0.8);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* large centered text */
.bigcenteredtext {
  color: black;
  font-size: 1.7em;
  font-weight: bold;
  padding: 4px 12px;
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
}

/* Caption text */
.text {
  color: black;
  font-size: 13px;
  padding: 4px 12px;
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  position:block;
  top:20px;
  background-color:transparent;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  z.index: -1;}


.active, .dot:hover {
  background-color: transparent;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}













/*
Adjustments for mobile devices
*/

@media only screen and (max-width: 1024px) {

button.player {
display:none !important;
 }



.button-wrapper-large {

  margin-top:30px;
  }	
  
  .button-form-input img {
	padding-top:5px;
}
}



@media (min-width: 940px) and (max-width: 8000px) { 
   .container-projects {
      display: table;
      border-spacing: 8px;
      width: 100%;
   }
   .col-projects {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: middle;
   }
   

   .col-projects:nth-child(1) { width: 5%; }
   .col-projects:nth-child(2) { width: 15%;}
   .col-projects:nth-child(3) { width: 15%;}
   .col-projects:nth-child(4) { width: 15%; }
   .col-projects:nth-child(5) { width: 15%; }
   .col-projects:nth-child(6) { width: 15%; }
   .col-projects:nth-child(7) { width: 15%; }
   .col-projects:nth-child(8) { width: 5%; }
   
   
   
   
    .container-projects-2-columns {
      display: table;
      border-spacing: 8px;
      width: 100%;
   }
   
   .col-projects-2-columns {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: middle;
   }
 
   .col-projects-2-columns:nth-child(1) { width: 25%; }
   .col-projects-2-columns:nth-child(2) { width: 25%;}
   .col-projects-2-columns:nth-child(3) { width: 25%;}
   .col-projects-2-columns:nth-child(4) { width: 25%; }

  
  
  
  .container-projects-3-columns {
      display: table;
      border-spacing: 8px;
      width: 100%;
   }
   
   .col-projects-3-columns {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: middle;
   }
 
   .col-projects-3-columns:nth-child(1) { width: 5%; }
   .col-projects-3-columns:nth-child(2) { width: 30%;}
   .col-projects-3-columns:nth-child(3) { width: 30%;}
   .col-projects-3-columns:nth-child(4) { width: 30%; }
   .col-projects-3-columns:nth-child(5) { width: 5%; }
  
  
  
  
  .container-projects-4-columns {
      display: table;
      border-spacing: 8px;
      width: 100%;
   }
   
   .col-projects-4-columns {
      display: table-cell;
      box-sizing: border-box; 
      vertical-align: middle;
   }
 
   .col-projects-4-columns:nth-child(1) { width: 25%; }
   .col-projects-4-columns:nth-child(2) { width: 30%;}
   .col-projects-4-columns:nth-child(3) { width: 25%;}
   .col-projects-4-columns:nth-child(4) { width: 20%; }

  
  
  
  

   .menu-projects-mobil {display: none; }
   .dropbtn {display: none; }
   .menu-projects-mobil-content {display: none;}
 

}




@media only screen and (min-width: 451px) and (max-width: 740px) {

 button {
  width: 220px;
}

button.player {
display:none !important;
 }

button img {
	padding-top:3px;
	padding-left:2px;
}

.button-form-input img {
	padding-top:5px;
}

.button-wrapper {
  width: 200px;
  }
  
 .button-wrapper-large {
	margin-top: 30px; }
  
   }





@media only screen and (max-width: 450px) {

 button {
  width: 93%;
}

button.player {
display:none !important;
 }

button img {
	padding-top:3px;
	padding-left:2px;
}

.button-form-input img {
	padding-top:5px;
}

.button-wrapper {
  width: 200px;
  }

.inputfile + label {
  padding: 5px 10px 4px 10px;
 }

.button-wrapper-large {
	width:400px;
	margin-top: 30px; }

.line2 {
	width: 100%;
	border-bottom: 0.75px dotted #4c4c4c;
	margin-top:40px;
}

.line3 {
	width: 100%;
	border-bottom: 0.75px dotted #4c4c4c;
	margin-bottom:0;
	margin-top:10px;
}


.title {
	  display: table;
	  position:absolute;
      border-spacing: 16px;
      width: 200px;
	  top:-3px;
	  left:25%;
   }
   
.logo {
	  position:absolute;
      border-spacing: 16px;
      width: 20px;
	  top:12px;
	  left:22%;
}

 }






@media only screen and (min-width: 940px) {
div#menuToggle {display: none;}
.mobile-menu {display: none;}
.social-media {display: none;}
.social-icon {display: none;}
.title {display: none;}
.logo {display: none;}
}








@media only screen and (max-width: 940px) {
.menu-desktop {display: none;}
.menu-cv {display:none;}
.menu-projects {display:none;}
.menu-projects-mobil {display:block !important;}
.dropbtn {display: block !important;}
.logo-heading {width:50px; height:50px; margin-top: 50px; margin-left:0%;}
.heading { margin-top: 56px; margin-left:65px;}
.heading-2 {margin-bottom:20px; margin-top:70px; font-size:1.9em;}
.subheading {margin-top: -2px; margin-bottom:20px;margin-left:0%; padding-left:0px; width: 100%; text-align: left;}
h1 {font-size:2.5em; letter-spacing:0;}
h2 {font-size: 1.5em;}
h3 {font-size:1.3 em;}
h6 {font-size:20px !important;}
.line {margin-top:25px; margin-bottom:25px;}

.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -50px;}

.content {
	padding-left:0;
    padding-right:0;
    -webkit-box-shadow: none; 
    box-shadow: none;
}

.content-cv {
	padding-left:0;
    padding-right:0;
    -webkit-box-shadow: none; 
    box-shadow: none;
}





  
}

@media (orientation: landscape) {
#menu {padding-top: 100px;}
#menu li {line-height:1em; font-size:14px;}
.mobile-menu {position: absolute;}
}



@media (max-width: 900px) {
	
.right-container-small-2 {
	position:relative;
	margin-left:0%;
	margin-top:20px;
	width:40%;
	max-width:200px;
	margin-bottom:20px;
}	
}	



@media (min-width: 801px) and (max-width: 900px) {

.left-container {
	float: left;
	width:35%;
    margin-bottom:70px !important;
}

.right-container {
    margin-top: 0px;
	padding-top:0px;
	margin-bottom:70px !important;
	margin-left:45%;
	width: 35%;
}

}



@media (min-width: 701px) and (max-width: 800px) {

.left-container {
	float: left;
	height:170px;
	width:40%;
    margin-bottom:30px !important;
}

.right-container {
    margin-top: 0px;
	padding-top:0px;
	height:170px;
	margin-bottom:30px !important;
	margin-left:50%;
	width: 50%;
}


}


@media (min-width: 601px) and (max-width: 700px) {

.left-container {
	float: left;
	height:auto;
	width:30%;
    margin-bottom:0px !important;
}

.right-container {
    margin-top: 0px;
	padding-top:0px;
	height:auto;
	margin-bottom:0px !important;
	margin-left:40%;
	width: 55%;
}


}






@media only screen and (max-width: 600px) {

.left-container {
	width:100%;
	height:auto;
	margin-bottom:30px;
	float: clear;
	position:relative;
}

.right-container {
	margin-bottom:30px;
	margin-left:0px;
	padding-top:0;
	width: 100%;
	height: auto;
	float: clear;
	position:relative;
}

.left-container-small {
	width:48%;
	max-width:230px;
	margin-bottom:20px;
}

.left-container-small-3 {
	width:48%;
	max-width:230px;
	margin-bottom:20px;
}

.right-container-small {
	margin-left:52%;
	width:48%;
	max-width:230px;
	margin-bottom:20px;
}

.title {
	  display: table;
	  position:absolute;
      border-spacing: 16px;
      width: 200px;
	  top:-3px;
	  left:25%;
   }
   
.logo {
	  position:absolute;
      border-spacing: 16px;
      width: 20px;
	  top:12px;
	  left:22%;
}



}