/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

* {margin: 0; padding: 0; border: 0; color: #005CAA; font-family: 'Roboto', sans-serif;}

html, body, section, div {height: 100%;}
body {color: #FFF; font-family: sans-serif;}
article {position: relative; text-align: center; padding: 1rem;}
h1, h2, h3 {font-family: 'Roboto Condensed', sans-serif; margin-bottom: 0.5rem;}
h1 {font-size: 1.75rem; margin: 0 0 0.75rem 0;}
h2 {font-size: 1.1rem;}
h3 {font-size: 1.25rem;}
.container {display: grid; grid-auto-columns: 50%; position: static;}
.cover {grid-column: 1; background: url(../pix/cover/indiview-cover-01-2018.jpg) no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; height: 100%; overflow: hidden; background-position: 0% 30%;}
.coverArchiv {grid-column: 1; background: url(../pix/cover/indiview-cover-01-2018.jpg) no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; height: 100%; overflow: hidden;}
.cta {background-color:rgba(255, 255, 255, 0); top: 8rem; transform: translate(0, -50%);}
.content {grid-column: 2; display: block;}
.download-button {display: block; margin: 0 auto; background: #76b729; width: 30%; padding: 0.4rem 0; border-radius: 0.3rem; display: block; text-decoration: none;-webkit-box-shadow: 0 0 1rem 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 0 1rem 0 rgba(0,0,0,0.3); box-shadow: 0 0 1rem 0 rgba(0,0,0,0.3); border: 1px solid #CCC;}
/*.download-button {display: block; margin: 0 0 0 10%; background: #76b729; width: 30%; padding: 0.4rem 0; border-radius: 0.3rem; display: block; text-decoration: none;-webkit-box-shadow: 0 0 1rem 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 0 1rem 0 rgba(0,0,0,0.3); box-shadow: 0 0 1rem 0 rgba(0,0,0,0.3); border: 1px solid #CCC;  margin-top: 100%}*/
.download-button span {text-align: center; color: #FFF;}
.download-button:hover {cursor: pointer; background: #009ba4;}
.ausgabedatum {display: block; margin: 0.5rem 0 0; font-size: 0.8rem;}
.impressum {text-align: left; font-size: 0.8rem; padding: 2rem; position: relative; height: 90%;}
.impressum img {max-width: 100%; height: auto;}
	.impressum p {display: block; margin-bottom: 2%;}
	.impressum a:hover {color: #e74011;}
.archivList {display: block; list-style-type: none; width: 100%;}
.archivList li {float: left; width: 40%; margin: 0 1% 1% 0;}
.archivList li img {display: block; width: 100%; height: auto;}
.archivList li .issue {display: block; font-size: 80%; width: 100%; text-align: center;}
.archivList li a:link *, .archivList li a:visited *, .archivList li a:active * {opacity: 0.5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 1s ease;}
.archivList li a:link, .archivList li a:visited, .archivList li a:active {text-decoration: none;}
.archivList li a:hover * {opacity: 1;}
.archivList:after {content: ""; height: 0; clear: left;}
.footer {display: block; height: auto; bottom: 2rem; left: 100%; font-size: 0.75rem; position: absolute; padding: 0 2rem;}
.footerVar {position: relative; margin: 0.5rem 0 0; padding-bottom: 2rem;}
.footerStatic {position: static;}
.herausgeber {display: block; height: auto; position: fixed; bottom: 0; right: 0; font-size: 0.75rem; background: rgba(255, 255, 255, 0.6); padding: 1rem;}
.herausgeber a {display: block; margin-top: 1rem;}

.impressum a:hover, .footer a:hover {color: #e74011;}

@media only screen and (max-width: 1200px){
	.footer {left: 0; margin-top: 2rem;}
	.download-button {width: 40%;}
	/*.cta {top: 8rem;}*/
    .cta {top: 12rem;}
    .cover {background-position: 0;}
}
@media only screen and (max-width: 960px){
	div {height: auto;}
	.container {display: block; grid-auto-columns: none;}
	.cover {display: block; width: 100%; height: 75%; margin-top: 4rem;}
	/*.cta {display: block; top: 4rem;}*/
    .cta {display: block; top: 8rem;}
	.download-button {width: 50%;}
	.content {display: block; width: 100%;}
	.impressum {height: auto; position: static;}
	.impressum h1 {position: fixed; top: 0; left: 0; padding: 1rem 2rem; background-color: #FFF; width: 100%;}
	.impressum h1 img {width: 50%;}
	.footer {position: static; padding: 2rem;}
	.herausgeber {position: static; padding: 2rem; text-align: center;}
    .archivList li {width: 48%;}
}
@media only screen and (max-width: 600px){
    .archivList li {float: none; width: 100%; margin: 0 0 2rem 0;}
}