@charset "UTF-8";
/* CSS Document */

body {
	background: #000;
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	color: #000000;
	font-family: "proxima-nova";
}

@font-face {
    font-family: headline;
    src: url(../fonts/headline.otf);
}



a.footer-go:link {
	color: rgba(0,0,0,1.00);
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a.footer-go:visited {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}
a.footer-go:hover {
	text-decoration: line-through;
	color: rgba(0,0,0,0.80);
}
a.footer-go:active {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}



.instagram {
	width: 125px;
	padding: 8px;
	font-family: "proxima-nova";
	font-size: 10px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	right: 20px;
	top: 60px;
	position: fixed;
	z-index: 99;
	background-color: rgba(0,0,0,1.00);
	background-image: url(../images/instagram.svg);
	background-repeat: no-repeat;
	background-position: 121px 7px;
	background-size: 13px auto;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	transition: background 0.5s ease;
	cursor: pointer;
	text-decoration: none;
}

.instagram:hover {
	background-color: rgba(255,255,255,1.00);
	color: rgba(0,0,0,1.00);
	background-image: url(../images/instagram-black.svg);
	background-repeat: no-repeat;
	background-position: 121px 7px;
	background-size: 13px auto;
	cursor: pointer;
	text-decoration: none;
}



.logo {
	position: absolute;
	z-index: 99;
	left: 20px;
	top: 190px;
}

.logo img {
	width: 180px;
	height: auto;
}

.subtitel {
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	position: absolute;
	z-index: 99;
	left: 20px;
	top: 231px;
}

.scrolldown {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 99;
}

.scrolldown img {
	width: 45px;
	height: auto;
	border: none;
}

.container-start {
	width: 100%;
	height: 100vh;
	height: 100%;
	position: absolute;
	background-color: rgba(0,0,0,1.00);
	z-index: 1;
}

.container-video {
	z-index: 2;
	position: absolute;
	width: 100%;
	height: 100vh;
	height: 100%;
}

.container-video-color {
	background-color: rgba(0,0,0,0.60);
	z-index: 3;
	position: absolute;
	width: 100%;
	height: 100vh;
	height: 100%;
}



.laufschrift {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
	color: rgba(255,255,255,1.00);
	font-size: 182px;
	text-transform: uppercase;
	font-family: headline;
	position: absolute;
	z-index: 99;
}
.laufschrift span {
display: inline-block;
padding-left: 100%;
animation: laufschrift 45s linear infinite;
-webkit-animation: laufschrift 45s linear infinite;
}
@-webkit-keyframes laufschrift {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@keyframes laufschrift {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}


.laufschrift img {
	width: auto;
	height: 165px;
	border: none;
}

.container-content {
	height: auto;
	width: 100%;
	padding-top: 100vh;
}

.container-intro {
	width: 70%;
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 125px;
	padding-bottom: 125px;
	background-image: url(../images/pure-magazine-landingpage-magazin-leipzig-stilleben-background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
}
	
@media only screen and (max-width: 768px) {
.container-intro {
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 75px;
	padding-bottom: 75px;
	background-image: url(../images/pure-magazine-landingpage-magazin-leipzig-stilleben-background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
}
}



.intro-headline {
	font-family: "questa-slab";
	font-size: 29px;
	line-height: 39px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	padding-bottom: 40px;
}


.intro-text {
	font-family: "proxima-nova";
	font-size: 16px;
	line-height: 24px;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	padding-bottom: 55px;
}

.intro-container-auswahl {
	width: 100%;
	height: auto;
}

.auswahl1 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.auswahl1:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}


.auswahl1 img {
	width: 100%;
	height: auto;
	border: none;
}

.auswahl2 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.auswahl2:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}


.auswahl2 img {
	width: 100%;
	height: auto;
	border: none;
}

.auswahl3 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.auswahl3:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.auswahl3 img {
	width: 100%;
	height: auto;
	border: none;
}

.auswahl4 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-top: 30px;
}




.auswahl4 img {
	width: 100%;
	height: auto;
	border: none;
}


.auswahl5 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-top: 30px;
}



.auswahl5 img {
	width: 100%;
	height: auto;
	border: none;
}

.auswahl6 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-top: 30px;
}



.auswahl6 img {
	width: 100%;
	height: auto;
	border: none;
}






.auswahl7 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-top: 30px;
}




.auswahl7 img {
	width: 100%;
	height: auto;
	border: none;
}


.auswahl8 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-top: 30px;
}



.auswahl8 img {
	width: 100%;
	height: auto;
	border: none;
}

.auswahl9 {
	width: calc(30% - 3px);
	height: auto;
	display: inline-block;
	vertical-align: top;
	font-family: "questa-slab";
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-top: 30px;
}


.auswahl9 img {
	width: 100%;
	height: auto;
	border: none;
}










.container-picture {
	width: 100%;
	height: auto;
	padding-top: 75px;
	padding-bottom: 75px;
}



.picture-headline {
	font-family: "questa-slab";
	font-size: 29px;
	line-height: 39px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	padding-bottom: 40px;
	padding-left: 15%;
}

@media only screen and (max-width: 768px) {
	.picture-headline {
	font-family: "questa-slab";
	font-size: 29px;
	line-height: 39px;
	text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	font-weight: 300;
	padding-bottom: 40px;
	padding-left: 5%;
}
}



 .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: 80%;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide:nth-child(2n) {
      width: 60%;
    }
    .swiper-slide:nth-child(3n) {
      width: 40%;
    }





.container-footer {
	width: 100%;
	background-color: rgba(255,255,255,1.00);
	height: auto;
	text-align: center;
	padding-top: 75px;
}

@media only screen and (max-width: 768px) {
.issue-0 {
	font-size: 39px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 150px;
text-transform: uppercase;
border-style: solid;
border-width: 3px;
border-color: rgba(0,0,0,1.00);
font-weight: 700;
margin-right: auto;
margin-left: auto;
width: 145px;
	background-image: url(../images/pure-magazine-landingpage-magazin-leipzig-stilleben-cover.gif);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
}

.issue-0 {
	font-size: 39px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 230px;
text-transform: uppercase;
border-style: solid;
border-width: 3px;
border-color: rgba(0,0,0,1.00);
font-weight: 700;
margin-right: auto;
margin-left: auto;
width: 200px;
	background-image: url(../images/pure-magazine-landingpage-magazin-leipzig-stilleben-cover.gif);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}



.issue-text {
	font-family: "proxima-nova";
	font-size: 16px;
	line-height: 24px;
	color: rgba(0,0,0,1.00);
	font-weight: 300;
	padding-bottom: 55px;
	width: 70%;
	padding-right: 15%;
	padding-left: 15%;
}

.issue-headline {
	font-family: "questa-slab";
	font-size: 23px;
	line-height: 24px;
	text-transform: uppercase;
	color: rgba(0,0,0,1.00);
	font-weight: 700;
	padding-bottom: 40px;
	width: 70%;
	padding-right: 15%;
	padding-left: 15%;
	padding-top: 45px;
}

@media only screen and (max-width: 768px) {
.issue-headline {
	font-family: "questa-slab";
	font-size: 23px;
	line-height: 24px;
	text-transform: uppercase;
	color: rgba(0,0,0,1.00);
	font-weight: 700;
	padding-bottom: 40px;
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
	padding-top: 45px;
}
}


.laufschrift-footer {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
	color: rgba(255,255,255,1.00);
	text-transform: uppercase;
	font-family: headline;
	position: relative;
	z-index: 99;
}
.laufschrift-footer span {
display: inline-block;
padding-left: 100%;
animation: laufschrift 45s linear infinite;
-webkit-animation: laufschrift-footer 45s linear infinite;
}
@-webkit-keyframes laufschrift-footer {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@keyframes laufschrift-footer {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

.laufschrift-footer img {
	width: auto;
	height: 40px;
	border: none;
}

.container-button-footer {
	width: 95%;
	height: auto;
	font-family: "questa-slab";
	font-size: 10px;
	text-transform: uppercase;
	color: rgba(0,0,0,1.00);
	font-weight: 700;
	text-align: left;
	padding-left: 5%;
	padding-bottom: 5px;
}

.footer-button {
	display: inline-block;
	margin-right: 10px;
}