@import url('https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff|Lato:100,300,400,400i,700,900');

body { margin: 0 auto; padding: 0; background-color: #1b1b1b; color: #fff; }
a {color:#f39800;}
a:hover {color:#666666; text-decoration: none;} 
.clear { clear: both; }
h1 { font-family: Lato; text-transform: uppercase; }

#magazine { margin: 0 auto; width:1150px;}


.header { width: 100%; height: 100vh; text-align:center; background: url('img/head.jpg') center;  background-size: cover;}
.header .infiniss { width:50px; margin:10px; position: absolute; }
.header .infiniss img { width:100%;}
.header .bar { display: block; width: 5px; height:30px; margin: 0 auto; background-color:#ffffff;}
.header .htlogo { display: block; width: 150px; margin: 0 auto; }
.header .htlogo img { width: 100%; margin: 50px 0px; }
.header .htm { display: block; width: 80%; margin: 0 auto; }
.header .htm img { width: 100%; margin: 5px 0px; }
.header h1 { display: block; color:#f39800; font-size:45pt;}
.header h3 { display: block; color:#f39800; font-size:30pt;}


.overview  { margin: 0 auto; width: 100%; background-color:#eee; display: block; color:#666666; font-size:12pt; padding: 50px 0;}
.overview .g4logo { margin: 0 auto; width: 60%; padding: 70px 0px; }

.overview h2 { display: block; color:#9a004c; font-size:13pt; margin: 20px 50px;}
.overview p { display: block;  margin: 20px 50px; text-align: justify; line-height:18pt;word-break: keep-all; }
.overview strong {color: #000;}

.picture img {width:100%; margin: 0; padding: 0;}
.picture .pic01 {display:inline-block; width:100%;margin: 0; padding: 0;}
.picture .pic02 {display:inline-block; width:100%;margin: 0; padding: 0;}
.picture .pic03 {display:inline-block; width:100%;margin: 0; padding: 0;}
.picture .pic04 {display:inline-block; width:50%;margin: 0; padding: 0; float:right;}
.picture .pic06 {display:inline-block; width:100%;margin: 0; padding: 0;}
.picture .pic07 {display:inline-block; width:100%;margin: 0; padding: 0;}


.credit { background-color:#111111; display: block; padding: 50px 0;}
.credit h1 { display: block; color:#f39800; font-size:30pt; margin: 20px 50px;}
.credit p { display: block;  margin: 20px 50px; text-align: left; font-size: 10pt; line-height: 16pt; word-break: keep-all; }

.track { background-color:#212121; display: block; padding: 50px 0;}
.track h1 { display: block; color:#f39800; font-size:30pt; margin: 20px 50px;}
.track ul { list-style:none; display: block;  margin: 0 50px; padding: 0; text-align: left;}
.track ul li {line-height: 20pt; font-size:15pt; }
.track ul li span {display:block; font-size:10pt;  color: #666666; }


.review { background-color:#111111; display: block; padding: 50px 0;}
.review h1 { display: block; color:#f39800; font-size:30pt; margin: 20px 50px;}
.review p { display: block;  margin: 30px 50px; text-align: left; font-size: 20pt; line-height: 22pt; word-break: keep-all; text-align: justify; }
.review .reviewtext {text-overflow: ellipsis; width: 100%; height: 250px;}

.link  { margin: 0 auto; width: 100%; background-image:url('img/link-bg.jpg') ;   background-size: cover; display: block; color:#ffffff; font-size:12pt; padding: 50px 0 0 0;}
.link .albumcover { margin: 0 auto; width: 40%; padding: 40px 0px; }
.link h3 { display: block; width: 100%; text-align:center; color:#ffffff; font-size:12pt; font-weight:200; margin: 20px 0px;}
.link .ilcto { margin: 0 auto; width: 100%; background-color:#ffffff; text-align:center; padding: 30px  0;  }
.link .ilcto .channel { display: inline-block; width: 22%;}



.making  { margin: 0 auto; width: 100%; background-color: #2c2c2c ;  display: block; color:#ffffff; font-size:12pt; }
.making h1 { display: block; width: 100%; text-align:center; color:#ffffff; font-size:30pt; font-weight:900; padding: 40px 0px;}


.copyright  { margin: 0 auto; width: 100%; background-color: #333333 ; display: block; text-align:right; color:#ffffff; font-weight: 300; font-family: Lato; font-size:11pt; padding: 20px 20px;}


.bottom-nav { width: 100%; position: fixed; bottom: 70px; z-index: 99; height: 50px; }

.bottom-nav ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.bottom-nav ul li {
    display: inline;
}

.bottom-nav ul li a {
    display: inline-block;
    font-size: 25px;
    width: 50px;
    color: #c4c3c3;
}

.bottom-nav a:hover {
    color: #d0963e;
}

@media (max-width: 1149px) {

	#magazine { margin: 0 auto; width:900px;}
	
}

@media (max-width: 899px) {

	#magazine { margin: 0 auto; width:700px;}
	
}

@media (max-width: 699px) {

	#magazine { margin: 0 auto; width:100%;}
	
	.header .htm { display: block; width: 90%; margin: 0 auto; }

	.overview h2 { display: block; color:#9a004c; font-size:13pt; margin: 20px 20px; line-height:18pt;}
	.overview p { display: block;  margin: 20px 20px; text-align: justify; line-height:18pt;word-break: keep-all; }
	
	.credit h1 { display: block; color:#f39800; font-size:30pt; margin: 20px 20px;}
	.credit p { display: block;  margin: 20px 20px; text-align: left; font-size: 10pt; line-height: 16pt; word-break: keep-all; }
	
	.track h1 { display: block; color:#f39800; font-size:30pt; margin: 20px 20px;}
	.track ul { list-style:none; display: block;  margin: 0 20px; padding: 0; text-align: left;}
	.track ul li {line-height: 20pt; font-size:13pt; }
	.track ul li span {display:block; font-size:8pt;  color: #666666; line-height:12pt; }
	
	.review h1 { display: block; color:#f39800; font-size:30pt; margin: 20px 20px;}
	.review p { display: block;  margin: 30px 20px; text-align: left; font-size: 13pt; line-height: 18pt; word-break: keep-all; text-align: justify; }
	
	.link .albumcover { margin: 0 auto; width: 80%; padding: 30px 0px; }

	.picture .pic01 {display:block; width:100%;margin: 0; padding: 0;}
	.picture .pic02 {display:block; width:100%;margin: 0; padding: 0;}
	.picture .pic03 {display:block; width:100%;margin: 0; padding: 0;}
	.picture .pic04 {display:block; width:100%;margin: 0; padding: 0;  }
	
	
	.link .ilcto .channel { display: inline-block; width: 49%;}
	
	.copyright {text-align:center; padding-bottom: 150px;}
	
	
	
}


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border: 0;
}












.infinissmusic { width: 100%; height: 100vh; text-align:center;}
.infinissmusic .infiniss { width:70px; margin:10px; position: absolute; }
.infinissmusic .infiniss img { width:100%;}
.infinissmusic .bar { display: block; width: 5px; height:30px; margin: 0 auto; background-color:#ffffff;}
.infinissmusic .htlogo { display: block; width: 150px; margin: 0 auto; }
.infinissmusic .htlogo img { width: 100%; margin: 50px 0px; }
.infinissmusic .htm { display: block; width: 80%; margin: 0 auto; }
.infinissmusic .htm img { width: 100%; margin: 5px 0px; }
.infinissmusic h1 { display: block; color:#f39800; font-size:45pt;}

.video-background {
  background: #000;
  position: absoulte;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}