#tc1.activated, #tc3.activated, 
#tc4.activated, #tc5.activated, 
#tc7.activated, #tc-appdialog.activated, #livechat.activated {
/*    -webkit-animation-play-state: paused;
    animation-play-state: paused; */
    top: 70px;
    left: 19px;
    transition: all ease-in-out 0.4s;
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    animation: none !important;
    display: block;
}

#tc-appdialog {
  padding: 20px;
  -webkit-transform: rotateX(0deg); 
  -ms-transform: rotateX(0deg); 
  transform: rotateX(0deg); 
  transition: transform 1s;
  text-align: center;
    position: absolute; 
    top: 12%; 
    right: 17%; 
    font-size: 32px; 
    color: #123456;
}

#tc1 {
/*  animation-duration: 20s;
  animation-name: increase10;
  animation-iteration-count: infinite;
  animation-direction: alternate; */
  font-size: 45px;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    position: absolute; 
    top: 40%;
    left: 20%; 
    font-weight: bold; 
    color: #123456; 
    padding: 20px;
    transition: all ease-in-out 0.4s;
}

#tc1.scaled {
/*    transform: scale(1.1);
    transform-origin: 0 -100;
    transition: all ease-in-out 5s; */
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  -webkit-animation-name: increase10b;
  animation-name: increase10b;
}

/* display white background and stop animation on hover */
#tc1:hover, #tc2:hover, 
#tc3:hover, #tc4:hover, 
#tc5:not(.activated):hover, #tc6_inner:hover, 
#tc7:hover, #tc-appdialog:hover {
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
    background-color: rgba(255,255,255,0.6);
    border-radius: 10px;
}

/* display "learn more" on hover */
#tc1:hover .learn-more, #tc2:hover .learn-more, 
#tc3:hover .learn-more, #tc4:hover .learn-more, 
#tc5:not(.activated):hover .learn-more, #tc6:hover .learn-more, 
#tc7:hover .learn-more, #tc-appdialog:hover .learn-more {
    display: block !important;
}

#tc2 {
    padding: 20px 15px 10px 20px;
    position: absolute; 
    top: 50%; 
    left: 660px; 
    font-size: 32px; 
    color: #123456; 
}

#tc2a {
    position: static;
    margin-left: 70px; 
    font-size: 30px;    
}

#tc2b {
    position: static;
    margin-top: -10px; 
    font-size: 36px;
}

#tc2c {
    position: static;
    margin-top: -12px; 
    margin-left: 110px; 
    font-size: 30px; 
    color: #123456;    
}

#tc2b, #tc2c {
    transition: all 5s;
}

#tc2b.active, #tc2c.active {
    text-shadow: 1px 1px 15px white, 0px 0px 5px #123456;
    transition: all 5s;
}

#tc2b1.highlight, #tc2b2.highlight, #tc2b3.highlight, #tc2b4.highlight, #tc2b5.highlight,
#tc2b6.highlight, #tc2b7.highlight, #tc2b8.highlight, #tc2b9.highlight, #tc2b10.highlight,
#tc2b11.highlight, #tc2b12.highlight, #tc2b13.highlight, #tc2b14.highlight, #tc2b15.highlight  {
    color: white;
}

#tc3 {
    padding: 30px 20px 10px 20px;
    position: absolute; 
    top: 140px; 
    left: 210px; 
    font-size: 30px; 
    font-weight: bold; 
    color: #123456; 
    text-align: center; 
    line-height: 30px; 
    /* return smoothly to initial position  */
    transition: left ease-in-out 0.4s, top ease-in-out 0.4s;
}

#tc3b {
    font-size: 20px; 
    display:inline-block;    
}

#tc4 {
    padding: 20px;
    position: absolute; 
    top: 52%; 
    left: 180px; 
    font-size: 38px; 
    color: #123456;
    /* return smoothly to initial position  */
    transition: left ease-in-out 0.4s, top ease-in-out 0.4s;
}

#tc5 {
    padding: 20px;
    z-index: 9; 
    position: absolute; 
    top: 190px; 
    left: 60%; 
    font-size: 20px; 
    font-style: normal; 
    color: #123456; 
    text-align: center;    
    /* return smoothly to initial position  */
    transition: left ease-in-out 0.4s, top ease-in-out 0.4s;
}

#tc5a{
    font-size: 35px; 
/*    color: rgb(20, 60, 113); */
}

#tc5b {
    font-size: 28px; 
    font-style: italic;
}

#lightbulb {
    opacity: 0;
    transition: opacity 1s;
    margin-left: -20px; 
    margin-right: 20px; 
    height:96px;
}

#tc5:not(.activated):hover #lightbulb {
  opacity: 0.5;
  transition: opacity 3s;
}

#tc6 {
  padding: 20px;
  -webkit-transform: rotateX(0deg); 
  -ms-transform: rotateX(0deg); 
  transform: rotateX(0deg); 
  transition: transform 1s;
  text-align: center;
    position: absolute; 
    bottom: 20%; 
    left: 33%; 
    font-size: 32px; 
    color: #123456;
}

#tc6_inner {
  padding: 20px;
}

#tc6.flip {
    -webkit-transform: rotateX(90deg); 
    -ms-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
    transition: all 1s;
}

#tc7  {
    position: absolute; 
    left: 45%; 
    top: 70%; 
    font-size: 35px; 
    color: #123456; 
    padding: 20px 20px 50px 20px;
    /* return smoothly to initial position  */
    transition: left ease-in-out 0.4s, top ease-in-out 0.4s;
}

#tc7b {
    position: static; 
    margin-left: 125px; 
    margin-top: -25px; 
    font-size: 17px;    
}

#tc7c {
    position: static; 
    margin-left: 0px; 
    margin-top: -3px; 
    font-size: 22px;    
}

#tc7d {
    position: static; 
    margin-left: 130px; 
    margin-top: -80px; 
    font-size: 32px; 
    font-style: italic;    
}

#livechat {
    position: absolute; 
    display: none;
    padding: 30px 20px 10px 20px;
}

.learn-more {
    position: absolute; 
    top: 2px; 
    right: 10px; 
    font-size: 15px; 
    font-weight: bold; 
    display: none;
    font-style: normal;
}

#tc_close.activated {
    right: 0px;
    transition: all linear 0.5s;
}

#tc_close {
    z-index: 9;
    top: 75px;
    right: -100%;
    font-size: 25px;
    position: absolute; 
    font-weight: bold; 
    color: #fff; 
    padding: 15px 15px 15px 30px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #1380bd;
    transition: right linear 0.5s;
}

#other_nav {
    z-index: 9;
    top: 150px;
    right: 0;
    width: 280px;
    font-size: 25px;
/*    position: fixed; */
    font-weight: bold; 
    color: #fff; 
    padding: 15px 15px 15px 30px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
/*    background-color: #12345650; */
    background-color: #1380bd;
    display: none;
    float:right; 
    margin: 55px 0 0.6em 0.8em;
}

.tc_text {
    position: relative; 
    padding: 150px 40px 30px 40px; 
    line-height: 1.5em; 
    font-size: 24px; 
    display:none; 
    color: #333;    
}

#other_text.tc_text {
    margin-right: 0; /* for nav */
}

#other_text_inner {
    padding-right: 30px;
}

.tc-not {
    display: none;
}

.tc-spacer {
    display: inline-block;     
}

#other_caption {
/*    opacity: 0; */
/*    position: absolute; */
    color: #123456;
/*    top: -70px;
    left: 25px; */
/*    left: -100%; */
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
/*    transition: all 1s; */
/*    padding: 20px; */
/*    display: none; */
    margin-bottom: 10px;
}

#other_text {
    padding: 100px 0px 30px 45px; 
}


#other.activated {
    top: 70px;
/*    left: 25px; */
/*    opacity: 1; */
    transition: all 1s;
}

#wrapper {
    width: 100%; 
    min-height: 500px; 
    height: 100%; 
    min-height: 100vh; 
    position: relative; 
    /* set similar color to prevent black background during image loading */
    background-color: #e1ddd4;
    background-image: url('../images/dcbg4.jpg'); 
    background-size: cover; 
    overflow-x: hidden;
}

.section {
    width: 100%; 
    height: 100%; 
    display: flex;    
}

.section-light {
    background-color: #becbd4; 
    background: linear-gradient(to right, #becbd4 , #ddd);    
    color: rgb(20, 60, 113); 
}

.section-dark {
    background-color: rgb(20, 60, 113); 
    color: #fff; 
}

/*
@keyframes increase10 {
  0% {
    transform: scale(1);
    transform-origin: 0 0;
  }
  5% {
    transform: scale(1);
    transform-origin: 0 0;
  }
  33% {
    transform: scale(1.1);
    transform-origin: 0 -100;
  }
  45% {
    transform: scale(1.1);
    transform-origin: 0 -100;
  }
  60% {
    transform: scale(1);
    transform-origin: 0 0;
  }
  100% {
    transform: scale(1.1);
    transform-origin: 0 -100;
  }
}
*/
@-webkit-keyframes increase10b {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes increase10b {
  0% {
    transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


html, body {
	margin: 0px;
	font-family: 'Roboto Condensed', sans-serif;
}

h2 {
    font-size: 32px;
}

div.content {
    padding: 10px 40px 10px 40px;    
    font-size: 20px;
}

p {
    line-height: 1.35em;
}

p.story {
    line-height: 1.65em;
    margin: 10px 0 10px 0;
}

a {
	text-decoration: none;
	color: unset;
}
a.decorated {
	text-decoration: underline;
	color: unset;
}

.menu ul {
 list-style-type: none;
 margin: 0px;
 padding: 0px;
 width: 100%;
}

.menu li {
 /* width: 12.5%; */
 padding: 23px 2px 23px 2px; /* top/bottom padding = half of 70px height minus font size 24px */ 
	font-family: 'Oswald', sans-serif;
}

.menu li {
 margin: 0px;
 display: inline-block; 
}

.menu a {
 padding: 5px 5px 5px 5px;
 color: #ffffff;
}

.menu a:hover {
 color: #ccccee;
}

/* align first item left */
.menu li:first-child a {
 padding: 5px 5px 5px 0px;
}

.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}

.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
  display: table;
  content: " ";
}

.form-horizontal .form-group:after {
  clear: both;
}

.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
  display: table;
  content: " ";
}

.form-horizontal .form-group:after {
  clear: both;
}

.competences {
  padding-left: 18px;
}

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
  }
}

.form-control {
    display: block;
    width: 200px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
textarea {
    overflow: auto;
    vertical-align: top;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#mobile-menu-overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5);
 z-index: 999;
 display: none;
}

#mobile-menu {
 position: absolute;
 min-width: 500px; 
 z-index: 999;
/* display: none; */
 left: -500px;
}

.mobile-menu-entry {
 background-color: rgb(20, 60, 113);
 border-bottom: 1px solid #becbd4;
 border-right: 1px solid #becbd4;
 font-size: 20px;
 color: #ffffff;
 padding: 10px 10px 10px 1em;
}

.mobile-menu-level2 {
 display: none;
 background-color: #1380bd;
 border-bottom: 1px solid #becbd4;
 border-right: 1px solid #becbd4;
 font-size: 16px;
 color: #ffffff;
 padding: 5px 10px 10px 2em;
}

.mobile-menu-on {
 left: 0px !important;
 transition: all 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.mobile-menu-off {
 left: -500px !important;
 transition: all 250ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

#hamburger {
	display: none;
}

#map1, #map2 {
   width: 100%;
   height: 400px;
   background-color: grey;
   max-width: 600px;
}

#walldorf_left, #walldorf_right, #freiburg_left, #freiburg_right {
	/*display: inline-flex;*/
	width: 50%;
}

#map1wrapper {
	padding: 40px 40px 30px 30px;
}

#map2wrapper {
	padding: 40px 12px 30px 40px;
}

#map1_link, #map2_link {
    display:none;
}

img.story {
    width: 10%;     
}

.social-link-table {
    display: table;
    width: 100%;
}

.social-link-cell {
    display: table-cell;
    width: 33%;
}

.social-link {
    background-color: #ccc; 
    padding: 1em;
    margin-right: 0.5em; 
    text-align: center;
}

.social-link.last {
    margin-right: 0; 
}

.social-link:hover {
    background-color: #e8e8e8; 
}

@media (max-width: 880px) { 
 #tc-appdialog {
	display: block;
	font-size: 21px;
	position: relative;
	left: auto;
	right: auto;
	margin-bottom: -20px;
 }
 #hamburger {
	display: block;
 }
 .menu {
	display: none;
 }
 #wrapper {
/*	background-color: #becbd4; */
	padding-top: 75px;
        background-image: url('../images/dcbg4lo.jpg'); 
        min-height: 400px; 
 }
 #walldorf, #freiburg {
	flex-direction: column;
 }
 #walldorf_left, #walldorf_right, #freiburg_left, #freiburg_right {
	width: 100%;
 }
 #freiburg_left {
	order: 2;
 }
 #freiburg_right {
	order: 1;
 }
 #map1wrapper , #map2wrapper {
	padding: 20px 30px 20px 30px;
 }
 #map1, #map2 {
    display: none;
 }
 #map1_link, #map2_link {
    display: block;
 }
 #tc1.activated, #tc3.activated, 
 #tc4.activated, #tc5.activated, 
 #tc7.activated, #tc-appdialog.activated, #livechat.activated {
     position: absolute;
     left: 20px;
     padding: 10px 0 0 0;
     font-size: 24px;
     text-align: left;
     background: none;
 }
 #tc1:hover .learn-more, #tc2:hover .learn-more, 
 #tc3:hover .learn-more, #tc4:hover .learn-more, 
 #tc5:not(.activated):hover .learn-more, #tc6:hover .learn-more, 
 #tc7:hover .learn-more, #tc-appdialog:hover .learn-more {
    display: none !important;
 }
 #tc1, #tc2, #tc3, #tc4, #tc5, #tc6, #tc7, #tc-appdialog {
     position: static;
     text-align: center;
     -webkit-animation: none;
     animation: none;
 }
 #tc1 {
     font-size: 30px;
     padding: 10px;
     transition: none;
     top: initial;
     left: initial;
 }
 #tc1.scaled {
  -webkit-animation: none;
  animation: none;
 }
 #tc2 {
     padding: 10px 20px 10px 0px;
 }
 #tc2a {
     font-size: 20px;
 }
 #tc2b {
     font-size: 24px;
 }
 #tc2c {
     font-size: 22px;
 }
 #tc3 {
     font-size: 22px;
     padding: 10px;
 }
 #tc3b {
     font-size: 16px;
 }
 #tc4 {
     font-size: 20px;
     padding: 10px;
 }
 #tc5 {
     font-size: 18px;
     padding: 10px;
 }
 #tc5a {
     font-size: 22px;
     font-weight: bold;
 }
 #tc5b {
     font-size: 20px;
 }
 #tc6 {
     font-size: 24px;
     padding: 10px;
 }
 #tc6_inner {
     left: 0 !important;
 }
 #tc7 {
     padding: 15px 30px 15px 0px;
 }
 #tc7a {
     font-size: 26px;
 }
 #tc7b {
     font-size: 12px;
 }
 #tc7c {
     font-size: 18px;
     margin-top: 0px; 
 }
 #tc7d {
     font-size: 22px;
     margin-top: -55px; 
     margin-left: 50px;
 }
 #tc7a_spacer {
     width: 0 !important;
 }
 #other_caption {
     font-size: 24px; /* 24px would be consistent, but is too large */
     left: 0px;
/*     padding: 12px 20px 10px 20px; */
     margin-right: 30px; /* holds space to close button (together with padding) */
 }
 #other_text {
/*     padding: 70px 20px 10px 20px; */
     padding: 10px 20px 10px 20px;
 }
 #other_text_inner {
     padding-right: 10px;
 }
 #other_nav {
     display: none !important;
 }
 #tc_close {
    top: 70px;
 }
 #tc_close_label {
     display: none;
 }
 .tc_text {
     padding: 40px 20px 10px 20px;
     font-size: 18px;
 }
 #tc_close {
    padding: 5px 7px 5px 15px;
 }
 img.story {
    width: 15%;     
 }
 h2 {
     font-size: 24px;
 }
 /* reduce some more space */
 div.content {
    padding: 20px 20px 20px 20px;
    font-size: 18px;
 }
 /* layout social links */
 .social-link-table {
    display: block;
    width: 100%;
 } 
 .social-link-cell {
    display: block;
    width: 100%;
    margin-bottom: 10px;
 }
 .social-link {
    margin: 0px;
 }
}

@media (max-width: 500px) { 
 #logo {
	height: 30px;
        margin-top: 25px !important;
 }
 img.story {
    width: 20%;     
 } 
}

/* if screen wider than 1200px, place all item by percent */
@media (min-width: 1200px) { 
 #tc-appdialog {
    top: 20%; 
 }
 #tc1 {
    top: 37%; 
 }
 #tc2 {
    left: 60%; 
 }
 #tc3 {
    padding: 30px 20px 10px 20px;
    position: absolute; 
    top: 20%; 
    left: 25%; 
 } 
 #tc4 {
    left: 20%; 
 }
 #tc5 {
    top: 30%; 
    left: 57%;
 }
 /* give some more space */
 div.content {
    padding: 20px 75px 20px 75px;
 }
 #map1wrapper {
    padding: 45px 75px 35px 30px;     
 }
 #map2wrapper {
    padding: 45px 12px 35px 75px; 
 }
 #tc1.activated, #tc3.activated, 
 #tc4.activated, #tc5.activated, 
 #tc7.activated, #tc-appdialog.activated #livechat.activated {
     left: 54px;
 }
 .tc_text {
    padding: 150px 75px 30px 75px; 
 }
 p {
    line-height: 1.45em;
 }
}

/* if screen wider than 1400px, increase font-sizes */
@media (min-width: 1400px) { 
 #tc-appdialog {
    left: 55%; 
	right: auto;
 }
 #tc1 {
    font-size: 60px; 
 }
 #tc2 {
    font-size: 45px; 
 }
 #tc3 {
    font-size: 40px; 
 }
 #tc4 {
    font-size: 50px; 
 }
 #tc5a {
    font-size: 40px; 
 }
 #tc5b {
    font-size: 35px; 
 }
 #tc6 {
    font-size: 40px; 
 }
 #tc7 {
    font-size: 50px; 
    padding: 30px 20px 90px 20px;
 }
 #tc7b {
    margin-left: 160px;
    margin-top: -40px;
    font-size: 30px;    
 }
 #tc7c {
    margin-left: 0px; 
    margin-top: -3px; 
    font-size: 34px;    
 }
 #tc7d {
    margin-left: 160px; 
    margin-top: -120px; 
    font-size: 40px; 
 }
 .tc_text {
     font-size: 30px;
 }
 /* give even more space */
 div.content {
    padding: 30px 110px 30px 110px;
 }
 #map1wrapper {
    padding: 55px 110px 45px 30px;     
 }
 #map2wrapper {
    padding: 55px 12px 45px 110px; 
 }
 #tc1.activated, #tc3.activated, 
 #tc4.activated, #tc5.activated, 
 #tc7.activated, #tc-appdialog.activated, #livechat.activated {
     left: 89px;
 }
 .tc_text {
    padding: 150px 110px 30px 110px; 
 }
}