/*
html5doctor.com RESET STYLESHEET
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    
    
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



/*-----------------------------------------------------------------------*/




/*----STURMSTUDIO CODE----*/

  .logo-kreis{
    margin:0 20px;
  }

  img.gray{
    filter: grayscale(70%)brightness(80%);
  }

  *{
    text-decoration: none;
  }



@font-face {
   font-family: "Ubuntu Condensed";
    src:
      url('fonts/ubuntu-c.eot'),
      url('fonts/ubuntu-c.woff') format('woff'), 
      url('fonts/ubuntu-c.ttf') format('truetype'), 
      url('fonts/ubuntu-c.svg#svgFontName') format('svg');}

@font-face {    
  font-family: "Ubuntu Thin";
    src:
      url('fonts/ubuntu-th.eot'), 
      url('fonts/ubuntu-th.woff') format('woff'),
      url('fonts/ubuntu-th.ttf') format('truetype'),
      url('fonts/ubuntu-th.svg#svgFontName') format('svg');}


/*-----------------------------------------------------------------------*/


/* Hintergrund */

  body {
    background-color: #0c1113;
  }




/* Header */

  /* Header: Logo */

    header {
      background-color: #10161a;
      width:calc(100%-1px);
      padding-bottom: 12px;
    }

    header .header-logo {
      /*font-family: Ubuntu Condensed;
      font-size: 35px;
      color:#c1943d;
      text-transform: uppercase;
      letter-spacing: 10px;
      display: flex;
      justify-content: center;
      padding: 10px 0px;*/
    }

    header .logo {
     display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      
    }

    header .header-img {
     max-width: 370px;
     padding: 20px 0px;
     
      
    }


  /* Header: Navigation */

    header nav ul {
      width: 90vw;
      max-width: 300px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      margin: 10px auto 10px auto;

    }

    header nav ul li {
      display: inline-block;
      list-style: none;
    }

    header nav ul li a .current{
      color:#c0a627;
    }

    header nav ul li a {
      font-family: Ubuntu Thin;
      font-size: 18px;
      color:#c1943d;
      letter-spacing: 1px;
      text-transform: lowercase;
    }

    header nav ul li a:hover {
      color:#fff;
    }

    header .current{
      color:#c1943d;
      font-weight: bolder;
    }


/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

/*TYPA page*/

main .typa {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  
}

main .typa p {
  max-width: 1000px;
}

/*Project page*/

main .content {
  width: 98vw;
  margin: 0 auto;
  overflow: hidden;
  
}

main .project-head {
  display: grid;
  width: 100%;
  grid-gap: 10px;
  margin: 15px auto;
}


main .video-embed-1920 {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  padding-top: 56.25%;
}

main .video-container {
  width: 60vw;
  margin: auto;
}

main .video-wrapper {
  width: 100%;
}


main .project-link {
  font-weight: bolder;
  color:  #fff;
}

main .project-credits-box {
  background-color: #10161a;   
  border-radius: 4px;
  padding: 30px 30px;
}

main .project-credits {
  width: 100%;
  
}

main h1 {
  font-family: Ubuntu Condensed;
  font-size: 30px;
  padding: 10px 10px;
  color:  #c1943d;
  text-transform: uppercase;
  letter-spacing: 5px;

}

main h2 {
  font-family: Ubuntu Condensed;
  font-size: 20px;
  padding: 10px 10px;
  color:  #c1943d;
  text-transform: uppercase;
  letter-spacing: 5px;
  
}

main p {
  font-family: Ubuntu Thin;
  font-size: 15px;
  padding: 10px 10px;
  /*text-align: justify;*/
  line-height: 25px;
  color:  #fff;
  max-width: 450px;
}

main table {
  font-family: Ubuntu Thin;
  font-size: 15px;
  text-align: left;
  margin: 15px 0;
  line-height: 20px;
}

main table th, td {
  padding: 5px 10px;
  color:  #fff;

}

main table th {
  font-family: Ubuntu Condensed;
  font-size: 15px;
  text-align: right;
  color:  #c1943d;
  text-transform: lowercase;
  letter-spacing: 4px;
  font-weight: bold;

}

main .grid-container {
  display: grid;
  width: 100%;
  grid-gap: 10px;
  margin: 15px auto;

}

main .grid-item {      
  display: grid;
  justify-content: center;
  align-items: center;   

}

main .grid-text {
  background-color: #10161a;   
  border-radius: 4px;
  padding: 30px 30px;

}

main .iframe-flat {
  border-radius: 4px;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 45vw;
  margin: auto;
  background-color: #10161a;   
  
} 

main iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 95%;
  height: 100%;

}


main img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 5px;

}



/*-----------------------------------------------------------------------*/


  /*Footer: Allgemein*/

    footer {
      position: relative;
      background-color: #10161a;
      width: calc(100%-1px);
      padding: 20px 30px 20px 30px;
      font-family: Ubuntu Thin;
      font-size: 12px;
      letter-spacing: 1px;
      text-align: center;
      line-height: 25px;
      margin: 0 0;
    }

    footer .footer-text {
       color:#c1943d;
    }

    footer .footer-text2 {
      color:#c1943d;
    }

 .container_topdragon {
      display: block;
      margin: 0px auto 0px auto;
      height:350px;
      background-image: url(img/web_storch.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }


/*-----------------------------------------------------------------------*/

/*Media Only*/


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

  {  header .header-img {
    
     width: 65vw;
    }
  
    
    header div .banner {
    
    display: none;
    
    }

    .container_topdragon {
      
      height:150px;
    }


    main .grid-text {
  
      padding: 30px 10px;}

    main .project-credits-box {
 
      padding: 30px 5px;}

  }