/*------------------------------------*\
  RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE:WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */
.splash {
  /* HTML5 display-role reset for older browsers */
  /* remember to define visible focus styles!
  :focus{
    outline:?????;
  } */
  /* remember to highlight inserts somehow! */
  /* 
   * minimal base styles 
   */
  /* maxvoltar.com/archive/-webkit-font-smoothing */
  /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
  /* align checkboxes, radios, text inputs with their label */
  /* hand cursor on clickable input elements */
  /* These selection declarations have to be separate.
     Also: hot pink. */
  /*  j.mp/webkit-tap-highlight-color */
  /* always force a scrollbar in non-IE */
  /* 
   * Non-semantic helper classes 
   */
  /* Hide for both screenreaders and browsers */
  /* Hide only visually, but have it available for screenreaders */
  /* Hide visually and from screenreaders, but maintain layout */
  /* >> The Magnificent CLEARFIX << */
  /* Hides from IE-mac \*/ }
  .splash html, .splash body, .splash div, .splash span, .splash applet, .splash object, .splash iframe,
  .splash h1, .splash h2, .splash h3, .splash h4, .splash h5, .splash h6, .splash p, .splash blockquote, .splash pre,
  .splash a, .splash abbr, .splash acronym, .splash address, .splash big, .splash cite, .splash code,
  .splash del, .splash dfn, .splash em, .splash img, .splash ins, .splash kbd, .splash q, .splash s, .splash samp,
  .splash small, .splash strike, .splash strong, .splash sub, .splash sup, .splash tt, .splash var,
  .splash b, .splash u, .splash i, .splash center,
  .splash dl, .splash dt, .splash dd, .splash ol, .splash ul, .splash li,
  .splash fieldset, .splash form, .splash label, .splash legend,
  .splash table, .splash caption, .splash tbody, .splash tfoot, .splash thead, .splash tr, .splash th, .splash td,
  .splash article, .splash aside, .splash canvas, .splash details, .splash figcaption, .splash figure,
  .splash footer, .splash header, .splash hgroup, .splash menu, .splash nav, .splash section, .splash summary,
  .splash time, .splash mark, .splash audio, .splash video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  .splash article, .splash aside, .splash details, .splash figcaption, .splash figure,
  .splash footer, .splash header, .splash hgroup, .splash menu, .splash nav, .splash section {
    display: block; }
  .splash body {
    line-height: 1; }
  .splash ol, .splash ul {
    list-style: none; }
  .splash blockquote, .splash q {
    quotes: none; }
  .splash blockquote:before, .splash blockquote:after,
  .splash q:before, .splash q:after {
    content: '';
    content: none; }
  .splash ins {
    text-decoration: none; }
  .splash del {
    text-decoration: line-through; }
  .splash table {
    border-collapse: collapse;
    border-spacing: 0; }
  .splash h1, .splash h2, .splash h3, .splash h4, .splash h5, .splash h6 {
    font-weight: bold;
    text-rendering: optimizeLegibility; }
  .splash html {
    -webkit-font-smoothing: antialiased; }
  .splash a:hover, .splash a:active {
    outline: none; }
  .splash small {
    font-size: 85%; }
  .splash strong, .splash th {
    font-weight: bold; }
  .splash td, .splash td img {
    vertical-align: top; }
  .splash input[type="radio"] {
    vertical-align: text-bottom; }
  .splash input[type="checkbox"] {
    vertical-align: bottom;
    *vertical-align: baseline; }
  .splash .ie6 input {
    vertical-align: text-bottom; }
  .splash label, .splash input[type=button], .splash input[type=submit], .splash button {
    cursor: pointer; }
  .splash ::-moz-selection {
    background: #4ce086;
    color: #fff;
    text-shadow: none; }
  .splash ::selection {
    background: #4ce086;
    color: #fff;
    text-shadow: none; }
  .splash a:link {
    -webkit-tap-highlight-color: #4ce086; }
  .splash html {
    overflow-y: scroll; }
  .splash .hidden {
    display: none;
    visibility: hidden; }
  .splash .visuallyhidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }
  .splash .invisible {
    visibility: hidden; }
  .splash .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  .splash .clearfix {
    display: inline-block; }
  .splash * html .clearfix {
    height: 1%; }
  .splash .clearfix {
    display: block; }

/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
TYPOGRAPHY
*********************/
@font-face {
  font-family: 'bebas_bold';
  src: url("../fonts/bebasneue_bold-webfont.eot");
  src: url("../fonts/bebasneue_bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/bebasneue_bold-webfont.woff2") format("woff2"), url("../fonts/bebasneue_bold-webfont.woff") format("woff"), url("../fonts/bebasneue_bold-webfont.ttf") format("truetype"), url("../fonts/bebasneue_bold-webfont.svg#bebas_neuebold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_light';
  src: url("../fonts/bebasneue_light-webfont.eot");
  src: url("../fonts/bebasneue_light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/bebasneue_light-webfont.woff2") format("woff2"), url("../fonts/bebasneue_light-webfont.woff") format("woff"), url("../fonts/bebasneue_light-webfont.ttf") format("truetype"), url("../fonts/bebasneue_light-webfont.svg#bebas_neuelight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bebas_regular';
  src: url("../fonts/bebasneue_regular-webfont.eot");
  src: url("../fonts/bebasneue_regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/bebasneue_regular-webfont.woff2") format("woff2"), url("../fonts/bebasneue_regular-webfont.woff") format("woff"), url("../fonts/bebasneue_regular-webfont.ttf") format("truetype"), url("../fonts/bebasneue_regular-webfont.svg#bebas_neue_regularregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* apply a natural box layout model to all elements */
.splash * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background: #fff;
  color: #211e1f;
  font-size: 14px;
  font-family: "", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5; }

.splash a {
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  /* Saf3.2+, Chrome */
  -moz-transition: all 0.2s ease;
  /* FF4+ */
  -ms-transition: all 0.2s ease;
  /* IE10? */
  -o-transition: all 0.2s ease;
  /* Opera 10.5+ */
  transition: all 0.2s ease; }

.splash h1, .splash h2, .splash h3, .splash h4, .splash h5 {
  font-family: "bebas_regular", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#container.splash {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto; }

.splash .slider-fixed {
  position: absolute;
  width: 100%;
  height: 400px;
  background: #00aab7;
  left: 0;
  top: 35px;
  overflow: hidden; }
  .splash .slider-fixed img {
    min-width: 650px;
    width: 100%;
    height: auto; }
    .splash .slider ul {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
    text-align: left;}
    
    .splash .slider ul img {
	width: 20%;
	height: auto;
    float: left; }
    .splash .slider {
	width: 100%;
	max-width: 1200px;
    overflow: hidden; }

    
.splash .logo-fixed {
  position: absolute;
  width: 210px;
  height: 400px;
  background: #00aab7;
  opacity: 0.9;
  -moz-opacity: 0.9;
  filter: alpha(opacity=90);
  left: 30px;
  top: 35px;
  padding: 25px 10px 10px;
  z-index: 99; }
  .splash .logo-fixed h1, .splash .logo-fixed h2 {
    display: inline-block;
    font-size: 80px;
    font-weight: bold;
    z-index: 20;
    position: relative;
    line-height: 0.8;
    color: #fff !important;
    font-family: "bebas_regular", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
  .splash .logo-fixed h2 {
    font-family: "bebas_light", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
  .splash .logo-fixed h3 {
    font-family: "bebas_regular", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 24px;
    margin: 10px 0 0;
    line-height: 1.2;
    display: inline-block;
    color: #fff !important;
    font-weight: normal; }
  .splash .logo-fixed img {
    position: relative;
    left: 200px;
    top: -65px;
    z-index: 10;
    width: 300px; }
.splash .banner {
  position: relative;
  overflow: auto;
  height: 400px;
  width: 100%;
  position: relative;
  z-index: 30; }
.splash .banner li {
  list-style: none;
  height: 400px;
  width: 100%;
  background: none;
  padding: 50px; }
.splash .banner ul li {
  float: left; }
.splash .slides {
  text-align: left; }
  .splash .slides p {
    font-family: "bebas_regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    float: right;
    color: #fff;
    font-weight: bold;
    font-size: 40px !important;
    width: 550px !important;
    max-width: 500px !important;
    line-height: 1.2 !important; }
.splash .banner .dots {
  position: absolute;
  right: 10px;
  bottom: 25px; }
.splash .banner .dots li {
  display: inline-block;
  float: left;
  width: 15px;
  height: 15px;
  margin: 0 4px;
  padding: 0;
  text-indent: -999em;
  border: 2px solid #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s; }
.splash .banner .dots li.active {
  background: #fff;
  opacity: 1; }
.splash .unslider-arrow {
  display: none; }
.splash section.boxes {
  margin: 30px 0 0 0%;
  border-bottom: 1px solid #cccccc;
  width: 100%;
  float: left;
  clear: both;
  position: relative;
  display: inline-block; }
  .splash section.boxes a {
    display: inline-block;
    height: 120px;
    float: left;
    width: 30%;
    margin: 0 1% 2%;
    background: #f6f6f6;
    border: 1px solid #eeeeee;
    padding: 45px 10px 20px;
    /*     &.blog{
          background: lighten($gray, 30%) url('../img/dtt_logo.png')  -30px -30px no-repeat;
    
          &:hover{
             background: $green url('../img/dtt_logo.png')  -30px -30px no-repeat;
          }
        }  */ }
    .splash section.boxes a p {
      color: #007b84 !important;
      font-size: 25px;
      font-weight: bold;
      text-align: center;
      line-height: 1.2 !important;
      font-family: "bebas_regular", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .splash section.boxes a:hover {
      background: #00aab7;
      border-color: #004b51; }
      .splash section.boxes a:hover p {
        color: #fff !important; }
.splash section.logos {
  margin: 20px 0 0 0;
  width: 100%;
  clear: both;
  display: inline-block; }
  .splash section.logos section.orga {
    float: left;
    width: 69%; }
    .splash section.logos section.orga a {
      display: inline-block;
      width: 30%;
      float: left;
      text-align: left; }
      .splash section.logos section.orga a img {
        width: 50%;
        height: auto; }
      .splash section.logos section.orga a:hover {
        opacity: 0.7;
        -moz-opacity: 0.7;
        filter: alpha(opacity=70); }
      .splash section.logos section.orga a.zalflogo {
        padding-top: 0px;
        padding-right: 0px; }
        .splash section.logos section.orga a.zalflogo img {
          width: 40%; }
      .splash section.logos section.orga a.humboldlogo img {
        width: 40%; height: 3cm }
        
   .splash section.logos section.social {
    display: inline-block;
    float: left;
    height: 20px;
    width: 10%; }    
   .splash section.logos section.social a.blog img {
          width: 10%; }
   .splash section.logos section.social a.facebook img {
        width: 10%; }
    .splash section.logos section.social a.twitter img {
        width: 10%; }

   .splash section.logos section.impressum {
     display: inline-block;
     width: 100%;
     float: right;
     text-align: right;
     height: 30px;
     border-top: 1px solid #cccccc;   
     border-bottom: 1px solid #cccccc;}    
   .splash section.logos section.impressum a.impressum img {
          width: 40%; }
   .splash section.logos section.social a.datenschutz img {
        width: 40%; }
 
        
  .splash section.logos .tropenlogo-single {
    position: relative;
    display: inline-block;
    width: 20%;
    height: auto;
    float: right; }
    .splash section.logos .tropenlogo-single p {
      font-size: 9px;
      color: #999;
      text-align: right;
      width: 69% !important;
      float: left;
      padding: 10px 5% 0 0; }
    .splash section.logos .tropenlogo-single img {
      float: left;
      width: 30% !important;
      height: auto !important;
      position: absolute;
      right: 0; }
  

#udm-u42 {
  background: transparent !important; }

@media screen and (max-width: 768px) {
  .splash .nav li a {
    font-size: 14px; }
  .splash .logo-fixed {
    left: 0; }
  .splash .slides p {
    font-size: 30px !important;
    max-width: 60% !important; }
  .splash section.boxes a {
    width: 48%;
    margin: 0 1% 30px; }
  .splash section.logos a {
    width: 48%;
    margin: 0 1% 30px; }
    .splash section.logos a.tropenlogo-single {
      float: left;
      margin-left: 1%; } }
@media screen and (max-width: 480px) {
  .splash {
    width: 100%; }
    .splash .slider-fixed, .splash .logo-fixed {
      top: 55px; }
    .splash .logo-fixed {
      padding: 15px;
      width: 100%;
      height: 200px; }
      .splash .logo-fixed h1, .splash .logo-fixed h2 {
        font-size: 65px !important; }
      .splash .logo-fixed h2 {
        float: right;
        text-align: right; }
      .splash .logo-fixed h3 {
        font-size: 18px !important; }
    .splash .banner li {
      padding: 230px 20px 0; }
    .splash .slides p {
      font-size: 25px !important;
      max-width: 100% !important; }
    .splash section.boxes a {
      width: 95%;
      margin: 0 1% 30px; } }