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

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i {font-style: italic;}
a {text-decoration: none;}
input { outline: none; }
.clear {clear: both;}
.line {width: 100%; height: 3px; background: #f0f0f0; float: left;}
input { outline: none; }

h1, h2, h3, h4, h5 {font-family: 'Josefin Sans', sans-serif; font-display: auto; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;}
h1 {font-size: 28px; margin-bottom: 10px;}
h2 {font-size: 18px; margin-top: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 18px; margin-bottom: 30px;}
h5 {font-size: 16px; margin-bottom: 10px; padding-top: 40px;}
h6 {font-family: 'Lora', serif; font-size: 16px;}
.white {color: #fff;}
.no-margin {margin: 0;}
body {font-family: 'Lora', serif; font-display: auto; font-size: 15px; -webkit-text-size-adjust: 100%;}
header {position: relative;}
.nav-bg {height: 149px; background: url(../images/nav-bg.png); position: absolute; z-index: 100; top: 0; left: 0; width: 100%;}
.branding {position: absolute; top: 20px; left: 5%; z-index: 110;}
.branding img {width: 170px; height: 42px;}
.wrapper {width: 100%; max-width: 1280px; margin: 0 auto;}
.bigImage {width: 100%; height: auto; float: left;}
.bgWrapper {background: url(../images/texture.png);}
ol a {font-size: 11px; color: #3d3d3d; font-style: italic;}
p a {color: #000; text-decoration: underline;}
/*CONTENT*/
.title {padding: 25px 0 10px 0; border-bottom: 1px solid #ddd; width: 100%; background: #f6f6f8; float: left;}
.content {width: 100%; max-width: 600px; margin: 50px 0 80px 0; float: left;}
.content p, .contentWide p, .contentNormal p {margin: 5px 0 15px 0; line-height: 18px;}
.contentNormal {width: 100%; margin: 50px auto; max-width: 800px;}
.contentWide {width: 100%; margin: 50px 0 0 0; float: left;}
.contentCenter {text-align: center;}
/*COLUMNS*/
.oneColumnBox {width: 100%; float: left; height: auto; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center;}
.twoColumnBox {width: 50%; float: left; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center;}
.threeColumnBox {width: 33.3%; float: left; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center;}
.twoSecondColumnBox {width: 65%; float: left; height: 50vh; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center top;}
.twoThirdColumnBox {width: 35%; float: left; height: 50vh; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center;}
.highBox {height: 100vh; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center;}
.noHeight {height: auto;}
.logo2 {width: 60%; margin:0 20%; float: left; margin-top: 40vh;}
.logo2 img {width: 100%;}
/*FLEXBOX*/
.contentWide__flex {display: flex;}
.imageBox {-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center right;}
.textBox {background: #F7F7F7; width: 44%; padding: 50px 3%; min-height: 200px;}
/*BUTTONS*/
.wrapperButton {width: 100%; float: left; margin: 30px auto 10px auto;}
.whiteButton {color: #fff; padding: 12px 15px 7px 15px; font-size: 18px; border: 1px solid #fff; text-align: center; font-family: 'Josefin Sans', sans-serif; font-display: auto; font-weight: bold; text-transform: uppercase; text-decoration: none;}
.blackButton {color: #000; padding: 12px 15px 7px 15px; font-size: 18px; border: 1px solid #000; text-align: center; font-family: 'Josefin Sans', sans-serif; font-display: auto; font-weight: bold; text-transform: uppercase; text-decoration: none;}
.whiteButton:hover, .blackButton:hover {background: #fff; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; color: #000; border: 1px solid #fff;}
.wrapperText {color: #000; padding: 50px 20%; text-align: center; float: left; width: 60%; margin: 0 auto; background: #f6f6f8;}
.sponsorit {background: #000; width: 90%; padding: 0 5% 10px 5%; text-align: center;}
.sponsorit li {display: inline-table; margin: 10px 2%;}
.kuva {background: #000; width: 90%; padding: 40px 5% 10px 5%; text-align: center; float: left;}
.kuva li {display: inline-table; margin: 10px 2%;}
.kuva img {width: 100px; height: auto;}
.smallButton {font-size: 16px;}
.lippu {border: 1px solid #ddd;}
/*PREORDER*/
.preorder {width: 94%;  margin: 50px auto 0 auto; padding: 20px 3% 40px 3%; /*background: rgba(0,0,0,0.6);*/ text-align: center; float: left;}
.preorder h1 {text-align: center; color: #fff; margin-bottom: 30px; font-size: 36px;}
/*YOUTUBE*/
.videoContainer {position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; margin-bottom: 30px;}
.videoContainer iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*DISCOGRAPHY*/
.discoList {width: 100%; max-width: 800px; margin: 0 auto;}
.album {float: left; padding: 20px 0; border-bottom: 1px solid #ccc; margin-bottom: 30px; width: 100%;}
.coverImage {width: 300px; margin-right: 30px; float: left;}
.coverImage img {width: 100%; height: auto;}
.trackListing {width: 70%; max-width: 300px; float: left;}
ol {list-style: decimal; margin: 0 30px 20px 30px;}
ol li {margin-bottom: 10px;}
.albumInfo {width: 100%; float: left; margin-top: 20px;}
/*GIGS*/
table {width: 100%; margin: 20px 0 50px 0;}
tr {width: 100%; padding: 5px 0; float: left; border-bottom: 1px solid #ccc;}
td {min-width: 100px;}
td img {margin-right: 10px;}
.gigsList a .fa {font-size: 22px; color: #3b5998; margin-left: 30px; vertical-align: middle;}
/*FOOTER*/
footer {width: 100%; background: #000; text-align: center; padding: 30px 0; float: left;}
footer li {margin: 5px; display: inline-table; padding: 10px 7px 0 7px; width: 30px; height: 30px;}
footer li a {width: 30px; height: 30px; float: left;}
footer .fa {color: #ddd; font-size: 20px;}
footer li:hover .fa {color: #666;}
.copy {margin-top: 20px; color: #222;}
/*PRIMERY NAV*/
.primary-nav-trigger {position: absolute;width: 50px; z-index: 1000;padding-left: 1em;background-color: transparent;height: 30px;line-height: 30px;right: 5%;top: 30px;bottom: auto;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
.primary-nav-trigger .menu-icon {/* this span is the central line of the menu icon */display: inline-block;position: absolute;top: 15px;bottom: auto;width: 30px;height: 5px;background-color: white;-webkit-transition: background-color 0.3s;-moz-transition: background-color 0.3s;transition: background-color 0.3s; left: auto;right: 1em;-webkit-transform: translateX(0) translateY(-50%);-moz-transform: translateX(0) translateY(-50%);-ms-transform: translateX(0) translateY(-50%);-o-transform: translateX(0) translateY(-50%);transform: translateX(0) translateY(-50%);}
.primary-nav-trigger .menu-icon::before, .primary-nav-trigger .menu-icon:after {content: '';width: 100%;height: 100%;position: absolute;background-color: white;right: 0;-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;-moz-transition: -moz-transform .3s, top .3s, background-color 0s;transition: transform .3s, top .3s, background-color 0s;}
.primary-nav-trigger .menu-icon::before {top: -10px;}
.primary-nav-trigger .menu-icon::after {top: 10px;}
.primary-nav-trigger .menu-icon.is-clicked {background-color: rgba(255, 255, 255, 0);}
.primary-nav-trigger .menu-icon.is-clicked::before, .primary-nav-trigger .menu-icon.is-clicked::after {background-color: white;}
.primary-nav-trigger .menu-icon.is-clicked::before {top: 0;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
.primary-nav-trigger .menu-icon.is-clicked::after {top: 0;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-ms-transform: rotate(225deg);-o-transform: rotate(225deg);transform: rotate(225deg);}
.primary-nav {position: fixed;left: 0;top: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.95);z-index: 900;text-align: center;padding: 80px 0;-webkit-backface-visibility: hidden;backface-visibility: hidden;overflow: auto; -webkit-overflow-scrolling: touch;-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;transition-property: transform;-webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;transition-duration: 0.4s;}
.primary-nav li {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin: .2em 0;text-transform: capitalize;}
.primary-nav a {display: inline-block;padding: .4em 1em;border-radius: 0.25em;-webkit-transition: background 0.2s;-moz-transition: background 0.2s;transition: background 0.2s; color: #fff; font-family:'Josefin Sans', sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase;}
.no-touch .primary-nav a:hover {background-color: #e4e4e4; color: #fff; text-decoration: none; border: none;}
.primary-nav.is-visible {-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}


@media screen and (max-width: 1300px) {
.wrapper {width: 90%; margin: 0 5%;}
}
@media screen and (max-width: 900px) {
.contentWide__flex {display: block;}
.imageBox {width: 100%; height: 280px;}
.textBox {width: 94%;}
}
@media screen and (max-width: 720px) {
.coverImage {width: 200px;}
}
@media screen and (max-height: 720px) {
.highBox {width: 100%;}
.preorder {margin-bottom: 30px;}
}
@media screen and (max-width: 800px) {
.highBox {width: 100%;}
.preorder {margin-bottom: 30px;}
}
@media screen and (max-height: 720px) {
.preorder {position: relative;}
}
@media screen and (max-width: 720px) {
.logo2 {width: 80%; margin: 0 10%; margin-top: 40vh;}
.branding img {width: 120px; height: 30px;}
.branding {top: 15px;}
.primary-nav-trigger {top: 25px;}
.trackListing {width: 100%; max-width: none; float: left;}
ol {margin: 20px 0 0 5%;}
ol li {margin-bottom: 5px;}
}
@media screen and (max-height: 560px) {
.logo2 {width: 70%; margin: 0 15%; margin-top: 30vh;}
}