/* author: Markus Schmeiduch */
/* Reset CSS */
* { 
  --dark: #333;
  --bright: #fff;
}

body { 
    background-color: rgb(0, 0, 0);
    color: var(--bright);
    background-image: url(../img/kiezexplorer_bg.png);
    background-position: center top; 
    background-repeat: no-repeat; 
}

a, a:visited {
	color: var(--bright);
}

a:hover {
	color: var(--bright);
}


/* Grid */


section { 
      border-bottom: 1px solid var(--bright); 
      }

hr { 
    border-top: 1px solid var(--dark); 
    } 

 /* Header */   

    h1 {text-align: center;}

    .logo a {
      background: url(../img/smeidu_logobright.svg);
      background-size: 150px 52px;
      margin: 0 auto;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      outline: none;
    } 

 /* Nav */ 

    .nav {
      text-align: center; 
      padding-bottom: 1.7em;
      padding-top: 1.7em;
      border-top: 1px solid var(--dark);
      border-bottom: 1px solid var(--dark);
      font-family: 'adelle', serif;
      font-weight: 300;
      font-style: normal;
      color: var(--dark);
    }

    .nav a { text-decoration: none; border-radius: 0px; padding: 15px 22px 15px 22px;}
    @media ( min-width: 374px ) {.nav a { padding: 15px 30px 15px 30px;}}
    .nav a:hover { color: var(--bright); background: rgba(0,0,0,0.50); }
    .navborder {border-left: 1px solid var(--dark); border-right: 1px solid var(--dark)}
    .navCandyWork a:hover {background: rgba(81,94,176,0.50); color: var(--dark);}
    .navCandyAbout a:hover {background: rgba(160,113,145,0.50); color: var(--dark);}
    .navactive {font-weight: 600;}

    .nav li, .nav a {
    display: inline; 
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.2em;
    }

/* Article */ 

  h2 {color:#E7DE17; font-weight: 700; font-size: 2.8em; text-shadow: 1px 1px 1px #000; line-height: 1.2em; margin-bottom: 0.1em;}

  .basetemplate p {margin-bottom: 3em;}

  .columns ul {
    list-style: circle;
    margin-left: 2em;
    list-style-position: outside;
    margin-bottom: 2em;
  }

/* Footer */  

  footer { 
    color: var(--bright); 
    margin-top: 4em; 
    margin-bottom: 6em; 
    text-align: left; 
    font-size: .8em;
    line-height: 1.5em;
    }

    footer p { margin-bottom: 1.5em; }

    footer nav ul { list-style: none; margin-top: 1em; margin-left: 0;}
    footer nav ul li a { font-size: .9em;  margin-left: 0; letter-spacing: 1px; }
    footer a { text-decoration: underline; background-color: inherit; padding: 0; color: var(--dark);}
    footer a:hover { color: var(--bright); background-color: inherit; }
    footer a:visited {color: var(--bright); }
    footer img {border-radius: 50%; border: 0px solid var(--dark); width: 72px; float: left; margin-right: 16px; margin-top: 0px;}
    .footername {font-size: 1.0em; font-weight:600; margin-bottom: 0.0em; padding-top: 10px;}
    footer nav ul li { display: inline; margin-left: 0; margin-right: 0.8em; margin-bottom: 2em; }

.footerright {margin-bottom: 2em;}






.abstandU {margin-bottom: 01em;}

.project-teaser {
  height: 220px;
  padding: 20px 15px 10px 15px;
  margin-top: 0px;
}

.teaser-clara {
  background-color: #EDEFFA;
  color: #4F61C8;
}

.teaser-CPHSignals {
  background-color: #99C1CD;
  color: #333;
}

.teaser-BlindMaps {
  display: block;
  background-color: #D0D0D1;
  color: #333;
  background: url(../img/test.png);
  background-size: 320px 250px;
}


.fame {
  background-color: #f6f6f6;
}






/* For big screens */  

@media ( min-width: 550px ) {

  section { 
    grid-gap: calc(0.25em + 1vw) calc(1em + 1vw);
    padding-bottom: 2em; 
    padding-top: 2em;
    }


  input { width: 30%; }


  .two-block { 
    columns: 2;
    column-gap: calc(1em + 1vw);
    }

  .one                { grid-column: span 1; }
  .two                { grid-column: span 2; }
  .three              { grid-column: span 3; }
  .four, .one-third   { grid-column: span 4; }
  .five               { grid-column: span 5; }
  .six, .one-half     { grid-column: span 6; }
  .seven              { grid-column: span 7; }
  .eight, .two-thirds { grid-column: span 8; }
  .nine               { grid-column: span 9; }
  .ten                { grid-column: span 10; }
  .eleven             { grid-column: span 11; }
  .twelve             { grid-column: span 12;}

  .contents           { grid-column: 4 / span 6; text-align: center; }

  .imageplatznachobenMobile {margin-top: 0em;}

  .introXtextFirst {padding-left: 8em; padding-right: 8em;}

  .logo a {
    float: left;
    margin-right: 35px;
    margin-top: 0.0em;
  } 

  .nav {
    text-align: left; 
    padding-top: 1.0em;
    border-top: 0px solid var(--dark)    
  }

  .navfirst {border-left: 1px solid var(--dark)}
  .navlast {border-right: 1px solid var(--dark)}

  .footerleft {width: 50%; display:block; float:left;}
  .footerright {max-width: 50%; float: right; display: block; opacity: 1;}
  footer nav ul li { display: inline; margin-left: 0.8em; margin-right: 0; }
  .abstandU {margin-bottom: 0em;} 

  .jsgallery {padding-bottom: 10px;};

}



/* KiezExplorer */  

#screenshot_slideshow {
  width: 268px;
  height: 385px;
  background: url(../img/app_page_demo_device.png);
  padding: 126px 26px 119px;
}

#app_page_bottom {
  background-image: url(../kiezexplorer/app_page_trennlinie.png);
  background-repeat: no-repeat;
  display: block;
  height: 2px;
}

.txsh {
  text-shadow: 1px 1px 1px #000;
  background-image: url(../kiezexplorer/app_page_bg.png);
  background-position: center top;
  background-size: 100% auto;
}

.sblcofo {
  font-weight: 100;
  font-size: 1.2em;
  text-shadow: 0px 0px 0px #000;
  padding-bottom: 0px;
}

.videoteas {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin-right: 24px;
  margin-bottom: 16px;
}

.videoteas img {
  border: 4px solid #e7de17;
}

.videolink {
  display: inline-block;
  vertical-align: top;
  width: 60%;
}