/*
Theme Name: Jonna
Theme URI: http://jonna.fi
Author: Niklas Vastamäki
Author URI: http://ni.klas.fi
Description: Default theme for Jonna.fi
Version: 1.0
Tags: default
Text Domain: jonna
*/


@font-face{ 
  font-family: 'League Gothic Regular';
  src: url('/wp-content/themes/jonna/fonts/LeagueGothic-Regular.eot');
  src: url('/wp-content/themes/jonna/fonts/LeagueGothic-Regular.eot?#iefix') format('embedded-opentype'),
       url('/wp-content/themes/jonna/fonts/LeagueGothic-Regular.woff') format('woff'),
       url('/wp-content/themes/jonna/fonts/LeagueGothic-Regular.ttf') format('truetype');
}
@font-face { 
	font-family: 'Corporate-A-Regular';
	src: url('/wp-content/themes/jonna/fonts/corporate_a_regular.eot');
	src: url('/wp-content/themes/jonna/fonts/corporate_a_regular.eot?#iefix') format('embedded-opentype'),
	     url('/wp-content/themes/jonna/fonts/corporate_a_regular.woff') format('woff'),
	     url('/wp-content/themes/jonna/fonts/corporate_a_regular.ttf') format('truetype');
}
@font-face { 
	font-family: 'Corporate-S-Light';
	src: url('/wp-content/themes/jonna/fonts/corporate_a_light.eot');
	src: url('/wp-content/themes/jonna/fonts/corporate_a_light.eot?#iefix') format('embedded-opentype'),
	     url('/wp-content/themes/jonna/fonts/corporate_a_light.woff') format('woff'),
	     url('/wp-content/themes/jonna/fonts/corporate_a_light.ttf') format('truetype');
}
@font-face { 
	font-family: 'Corporate-S-Regular';
	src: url('/wp-content/themes/jonna/fonts/corporate_s_regular.eot');
	src: url('/wp-content/themes/jonna/fonts/corporate_s_regular.eot?#iefix') format('embedded-opentype'),
	     url('/wp-content/themes/jonna/fonts/corporate_s_regular.woff') format('woff'),
	     url('/wp-content/themes/jonna/fonts/corporate_s_regular.ttf') format('truetype');
}
@font-face { 
	font-family: 'Corporate-S-Light';
	src: url('/wp-content/themes/jonna/fonts/corporate_s_light.eot');
	src: url('/wp-content/themes/jonna/fonts/corporate_s_light.eot?#iefix') format('embedded-opentype'),
	     url('/wp-content/themes/jonna/fonts/corporate_s_light.woff') format('woff'),
	     url('/wp-content/themes/jonna/fonts/corporate_s_light.ttf') format('truetype');
}
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, sub, sup, tt, var, 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%;
	vertical-align: baseline;
	text-decoration: none;
	list-style-type: none;
}
body, html {
    background: #dcdad7;
    color: #3f3b36;
    font-family: 'Corporate-S-Light', Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}
a {
    color: #ca80bb;
    font-weight: bold;
}
b, strong {
    font-weight: bold !important;   
}
h2 {
    color: #3f3b36;
    font-size: 60px;
    line-height: 60px;
    font-weight: 200;
    font-family: 'League Gothic Regular',  Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin: 20px 0 20px 0;
}
h2 small {
    font-size: 40px; 
}
h3 {
    color: #3f3b36;
    font-size: 42px;
    line-height: 42px;
    font-family: 'League Gothic Regular',  Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin: 20px 0 20px 0;
    font-weight: 200;
}
h3 small {
    font-size: 30px; 
}
ol {
    margin: 0 0 0 35px;  
}
ol li {
    list-style-type: decimal;
    margin: 10px 0;
}
.centered {
    width: 100%;
    text-align: center;
}
.container {
    position: relative;
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px 0 25px;
    text-align: left;
    box-sizing: border-box;
}
.centered.main-page-image {
    position: relative;
    z-index: 100;
    background-color: #ca80bb;
    height: auto;
}
.centered.main-page-image img {
    width: 100%;
    height: auto;
    display: block;
}
.centered.header-padding {
    background-color: #ca80bb;
    height: 200px;
}
.centered.header {
    position: fixed;
    z-index: 300;
    height: auto;
    padding: 30px 0 30px 0;
    -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.header .logo h1 a {
    float: left;
    display: block;
    width: 142px;
    height: 64px;
    margin: 0;
    padding: 0;
    background-image: url(/wp-content/themes/jonna/images/2x-logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 142px 64px;
    -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.header .logo.gotham h1 a {
    width: 186px;
    height: 69px;
    background-image: url(/wp-content/themes/jonna/images/2x-logo_gotham_white.png);
    background-size: 186px 69px;
    background-position: top left;
}
.header .logo h1 a span {
    display: none;
}
.header button.mobile {
    display: none;   
}
.header .menu {
    padding: 0;
}
.header .menu ul {
    float: right;
    display: inline-block;
}
.header .menu ul li {
    float: left;
    display: inline-block;
    margin: 0 0 0 20px;
}
.header .menu ul li a {
    color: #fff;
    font-family: 'League Gothic Regular', Arial, Helvetica, sans-serif;
    font-size: 36px;
    line-height: 40px;
    text-transform: uppercase;
    font-weight: normal;
    
}
.header .menu ul li a:hover {
    text-decoration: underline;
}
.header .menu ul li.active a {
    color: #fff;
    text-decoration: underline;
}
.centered.header.fade-bg {
    padding: 15px 0;
    background-color: #ca80bb;
    -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.centered.header.fade-bg .logo h1 a {
    width: 80px;
    height: 36px;
    margin: 0;
    padding: 0;
    background-size: 80px 36px;
    -webkit-transition: all 500ms cubic-bezier(1.000, 0.590, 0.555, 0.595); 
   -moz-transition: all 500ms cubic-bezier(1.000, 0.590, 0.555, 0.595); 
     -o-transition: all 500ms cubic-bezier(1.000, 0.590, 0.555, 0.595); 
        transition: all 500ms cubic-bezier(1.000, 0.590, 0.555, 0.595); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0.590, 0.555, 0.595); 
   -moz-transition-timing-function: cubic-bezier(1.000, 0.590, 0.555, 0.595); 
     -o-transition-timing-function: cubic-bezier(1.000, 0.590, 0.555, 0.595); 
        transition-timing-function: cubic-bezier(1.000, 0.590, 0.555, 0.595); /* custom */
}
.centered.header.fade-bg .logo.gotham h1 a {
    width: 97px;
    height: 36px;
}
.page {
    position: relative;
    top: -70px;
    z-index: 200;
}
.content {
    background: #f4f3ec;
    padding: 30px 50px 50px 50px;
    box-sizing: border-box;
}
.content p, .lyrics-page p {
    margin: 15px 0 15px 0;
}
.lyrics-page  {
    width: 100%;
    padding: 10px 30px 20px 30px;
    box-sizing: border-box;
    text-align: center;
}
.content .left {
    width: 49%;
    float: left;
}
.content .right {
     width: 49%;
    float: right;
}
.content .w80 {
    width: 77%;
}
.content .w70 {
    width: 67%;
}
.content .w60 {
    width: 57%;
}
.content .w40 {
     width: 37%;
}
.content .w30 {
    width: 27%;
}
.content .w20 {
    width: 17%;
}
.content img.scale {
    width: 100%;
    height: auto;
}
.line {
    width: 100%;
    height: 1px;
    background: #c0b5b5;
    margin: 30px 0;
}
.links {
    display: inline-block;
    margin: 0 0 0 15px;
}
.links a.lyrics {
    background-image: url(/wp-content/themes/jonna/images/icon_lyrics.png);
    background-repeat: no-repeat;
    background-size: 13px 15px;
    padding: 2px 0 2px 19px;
    dipslay: inline-block;
    color: #888581;
    font-size: 13px;
    height: 15px;
    line-height: 15px;
    font-weight: bold;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
}
}
.links a.lyrics:hover {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
    cursor: pointer;
}
#gigs ul li a  {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 0;
    color: #3f3b36;
    font-size: 20px;
    line-height: 22px;
    border-bottom: 1px solid #c0b5b5;
}
#gigs ul li a .date {
    float: left;
    width: 100px;
    margin: 0 25px 0 0;
    border: 1px solid #c0b5b5;
}
#gigs ul li a .place {
    float: left;
    display: inline-block;
    padding: 20px 0 0 0;
}
#gigs ul li a .date .month {
    display: block;
    width: 100%;
    background: #a85555;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 26px;
    line-height: 22px;
    font-family: 'League Gothic Regular',  Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
#gigs ul li a .date .day {
    display: block;
    width: 100%;
    color: #3f3b36;
    font-size: 60px;
    line-height: 60px;
    font-family: 'League Gothic Regular',  Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
}
ul.buy {
    margin: -15px 0 40px 0;
    height: 30px;
}
ul.buy li {
    float: left;
    margin: 0 10px 0 0;
}
ul.buy li img {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
}
ul.buy li img:hover {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
    cursor: pointer;
}
#videos.content {
    padding: 0 !important;   
}
#videos .video a {
    float: left;
    width: 400px;
    height: 400px;
    background-color #f4f3ec;
    position: relative;
    padding: 25px;
    box-sizing: border-box;
    color: #fff;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    -webkit-text-shadow: 1px 1px 0px #000;
    -moz-text-shadow: 1px 1px 0px #000;
    text-shadow: 1px 1px 0px #000;
}
#videos .video a:hover {
    z-index: 500;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
#videos .video h2 {
    color: #fff;
    padding: 0 0 0 69px;
    margin: 305px 0 0 0;
    font-size: 48px;
    background-image: url(/wp-content/themes/jonna/images/2x-play-button.png);
    background-repeat: no-repeat;
    background-size: 60px 60px;
}
.main-page {
    position: relative;
    top: -60px;
    z-index: 200;
}
.main-page a h2, .main-page h2 {
    color: #3f3b36;
    font-size: 60px;
    line-height: 60px;
    font-family: 'League Gothic Regular',  Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
.main-page .content-block-1 {
    float: left;
    width: 400px;
    height: 515px;
    background: #f4f3ec;
    position: relative;
    margin: -115px 0 0 0;
    padding: 25px;
    box-sizing: border-box;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
}
.main-page .content-block-1 ul {
    margin: 30px 0 0 0;
}
.main-page .content-block-1 ul li {
    background-size: 25px 25px;
    background-repeat: no-repeat;
    height: 25px;
    line-height: 25px;
    margin: 0 0 15px 0;
    padding: 0 0 0 34px;
}
.main-page .content-block-1 ul li a {
    color: #3f3b36;
}
.main-page .content-block-1 ul li.itunes {
    background-image: url(/wp-content/themes/jonna/images/2x-itunes.png);
}
.main-page .content-block-1 ul li.spotify {
    background-image: url(/wp-content/themes/jonna/images/2x-spotify.png);
}
.main-page .content-block-1 ul li.deezer {
    background-image: url(/wp-content/themes/jonna/images/2x-deezer.png);
}
.main-page .content-block-1 ul li.levykauppaax {
    background-image: url(/wp-content/themes/jonna/images/2x-levykauppaax.png);
}
.main-page .content-block-1:hover {
    z-index: 500;
    border: 1px solid #cecdc5;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page #gigs.content-block-2 a {
    float: left;
    width: 400px;
    height: 400px;
    color: #fff;
    background: #a85555;
    position: relative;
    padding: 25px;
    box-sizing: border-box;
    text-align: center;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
}
.main-page #gigs.content-block-2 a h3 {
    margin: 40px 0 0 0;
    height: 84px;
    font-size: 24px;
    line-height: 26px;
    text-transform: none;
    color: #fff;
    font-family: 'Corporate-S-Light', Arial, Helvetica, sans-serif;
}
.main-page #gigs.content-block-2 a div.link {
    margin: 60px 0 0 0;
    font-size: 24px;
}
.main-page #gigs.content-block-2 a h2 {
    color: #fff;
    font-size: 100px;
    line-height: 100px;
}
.main-page #gigs.content-block-2 a:hover {
    z-index: 500;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page .content-block-3 a {
    float: left;
    width: 400px;
    height: 400px;
    color: #3f3b36;
    background: #f4f3ec;
    position: relative;
    padding: 25px;
    box-sizing: border-box;
    text-align: center;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
}
.main-page .content-block-3 a h2 {
    margin: 40px 0 30px 0;
}
.main-page .content-block-3 a div.link {
    margin: 40px 0 0 0;
    font-size: 24px;
}
.main-page .content-block-3 a:hover {
    z-index: 500;
    border: 1px solid #cecdc5;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page .content-block-4 {
    float: left;
    width: 400px;
    height: 400px;
    background: #749da4;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
}
.main-page .content-block-4:hover {
    z-index: 500;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page .content-block-5 {
    float: left;
    width: 400px;
    height: 400px;
    background: #f4f3ec;
    position: relative;
    padding: 25px;
    box-sizing: border-box;
    text-align: center;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
}
.main-page .content-block-5 h2 {
    margin: 40px auto 20px auto;
}
.main-page .content-block-5 ul {
    width: 180px;
    margin: 0 auto;
}
.main-page .content-block-5 ul li {
    width: 90px;
    margin: 10px auto;
    float: left;
}
.main-page .content-block-5 ul li a {
    display: block;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 70px 70px;
    margin: auto;
}
.main-page .content-block-5 ul li a span {
    display: none;
}
.main-page .content-block-5 ul li.facebook a {
    background-image: url(/wp-content/themes/jonna/images/icon_facebook.png);
}
.main-page .content-block-5 ul li.twitter a {
    background-image: url(/wp-content/themes/jonna/images/icon_twitter.png);
}
.main-page .content-block-5 ul li.instagram a {
    background-image: url(/wp-content/themes/jonna/images/icon_instagram.png);
}
.main-page .content-block-5 ul li.youtube a {
    background-image: url(/wp-content/themes/jonna/images/icon_youtube.png);
}
.main-page .content-block-5:hover {
    z-index: 500;
    border: 1px solid #cecdc5;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page #single.content-block-6 a {
    float: left;
    width: 400px;
    height: 400px;
	-webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
}
.main-page #single.content-block-6 a:hover {
    z-index: 500;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page #single.content-block-6 a img {
    float: left;
    width: 400px;
    height: 400px;
}
.main-page #video.content-block-6 a, .main-page #video.content-block-2 a {
    float: left;
    width: 400px;
    height: 400px;
    background-color #f4f3ec;
    position: relative;
    padding: 25px;
    box-sizing: border-box;
    color: #fff;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
    transition: all 200ms ease-in;
    transform: scale(1.0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    -webkit-text-shadow: 1px 1px 0px #000;
    -moz-text-shadow: 1px 1px 0px #000;
    text-shadow: 1px 1px 0px #000;
}
.main-page #video.content-block-6 a:hover, .main-page #video.content-block-2 a:hover {
    z-index: 500;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.main-page #video.content-block-6 h2, .main-page #video.content-block-2 h2 {
    color: #fff;
    padding: 0 0 0 69px;
    margin: 300px 0 0 0;
    font-size: 33px;
    line-height: 33px;
    height: 60px;
    background-image: url(/wp-content/themes/jonna/images/2x-play-button.png);
    background-repeat: no-repeat;
    background-size: 60px 60px;
}
.main-page .content-block-7 {
    width: 60%;
    text-align: center;
    margin: 100px auto;
}
.main-page .content-block-7 h2 {
    margin: 0px auto 30px auto;
}
.main-page .content-block-7 p.link {
    margin: 30px auto 0 auto;
}
.main-page .content-block-8 {
    width: 100%;
    background: #f4f3ec;
    text-align: center;
    padding: 25px;
    box-sizing: border-box;
}
.main-page .content-block-8 h2 {
    margin: 20px auto 20px auto;
}
.main-page .content-block-8 .feed {
    margin: 0 auto;
    width: 1140px;
}
.main-page .content-block-8 .feed a img {
    float: left;
    width: 340px;
    height: auto;
    margin: 20px;
    display: block;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.0);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.0);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.0);
}
.main-page .content-block-8 .feed a:hover img {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.footer .left {
    float: left;
    width: 59%;
}
.footer .right {
    float: right;
    text-align: right;
    width: 39%;
}
.footer {
    margin: -120px 0 0 0;
    background-color: #ca80bb;
    padding: 100px 0 100px 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
}
.footer a {
    color: #fff;
    text-decoration: underline;
}
.clear {
    clear: both;
}
.images-scaled img {
	float: left;
	width: 30%;
	height: auto;
	margin-right: 1%;
	margin-bottom: 1%;
	display: block;
}
@media screen and (max-width: 1250px) {
    .container {
        max-width: 850px;
    }
    .centered.main-page-image img {
        content: url("/wp-content/themes/jonna/images/headerv2-medium.jpg");
    }
    .main-page {
        top: -20px;
    }
    .main-page .content-block-3 a {
        float: right;
    }
    .main-page .content-block-4 {
        float: right;
    }
    .main-page .content-block-8 .feed {
        width: 100%;
    }
    .main-page .content-block-8 .feed a img {
        width: 45%;
        margin: 10px;
    }
    .links {
        display: block;
        margin: 0;
    }
}
@media screen and (max-width: 850px) {
	.images-scaled img {
		float: none;
		width: 100%;
		height: auto;
		margin-right: 0;
		margin-bottom: 2%;
		display: block;
	}
    .container {
        max-width: 100%;
    }
    .main-page {
        top: -40px;
    }
    #videos .video a {
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        float: none;
        position: inherit;
        width: 100%;
        height: auto;
        margin: 0;
    }
    .main-page .content-block-1, .main-page #gigs.content-block-2 a, .main-page #video.content-block-2 a, .main-page .content-block-3 a, .main-page .content-block-4, .main-page .content-block-5, .main-page .content-block-6 a {    
        display: block;
        float: none;
        position: inherit;
        width: 100%;
        height: auto;
        margin: 0;
    }
    #spotify {
        display: none;   
    }
    .main-page #video.content-block-6 a, .main-page #video.content-block-2 a {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;
    }
    .centered.main-page-image img {
        content: url("/wp-content/themes/jonna/images/headerv2-mobile.jpg");
    }
    .centered.header .menu {
        
    }
    .centered.header .logo h1 a {
        width: 80px;
        height: 36px;
        background-size: 80px 36px;
    }
    .main-page .content-block-8 .feed {
        width: 100%;
    }
    .main-page .content-block-8 .feed a img {
        width: 45%;
        margin: 10px;
    }
    .links {
        display: block;
        margin: 0;
    }
}
@media screen and (max-width: 600px) {
    .container {
        max-width: 100%;
        padding: 0;
    }
    .centered.header {
        padding: 15px 0;
    }
    .main-page {
        top: 0px;
    }
    #videos .video a {
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        float: none;
        position: inherit;
        width: 100%;
        height: auto;
        margin: 0;
    }
    button.mobile {
        float: right;
        display: block !important;
        width: 36px;
        height: 36px;
        background: url(/wp-content/themes/jonna/images/mobile-menu.png) no-repeat;
        background-size: 36px 36px;
        border: 0px;
        margin: 0 30px 0 0;
        cursor: pointer;
        font-size: 0px;
    }
    .header .menu {
        clear: both;
        float: right;
        display: inline-block;
        margin: 0;
        padding: 0;
        background-color: #ca80bb;
    }
    .header .menu ul {
        clear: both;
        float: right;
        display: inline-block;
        margin: 0;
        padding: 10px 30px 10px 20px;
    }
    .header .menu ul li {
        clear: both;
        float: none;
        display: block;
        width: 100%;
        text-align: right;
        margin: 0;
        padding: 0;
    }
    .main-page .content-block-1, .main-page #gigs.content-block-2 a, .main-page #video.content-block-4 a, .main-page .content-block-3 a, .main-page .content-block-4, .main-page .content-block-5, .main-page #video.content-block-6 a {    
        display: block;
        float: none;
        position: inherit;
        width: 100%;
        height: auto;
        margin: 0;
    }
    .main-page .content-block-7 {
        width: 90%;
    }
    #spotify {
        display: none;   
    }
    .main-page #video.content-block-6 a, .main-page #video.content-block-2 a {
        background-repeat: no-repeat;
        background-size: cover;
    }
    .centered.main-page-image img {
        content: url("/wp-content/themes/jonna/images/headerv2-mobile.jpg");
    }
    .centered.header {
        padding: 15px 15px;
    }
    .centered.header.fade-bg {
        padding: 15px 15px;
    }
    .centered.header .menu {
        display: none;
    }
    .centered.header .logo h1 a {
        width: 80px;
        height: 36px;
        background-size: 80px 36px;
    }
    .main-page .content-block-8 .feed {
        width: 100%;
    }
    .main-page .content-block-8 .feed a img {
        width: 100%;
        margin: 10px 0;
    }
    .footer .left {
        float: none;
        width: 100%;
    }
    .footer .right {
        float: none;
        text-align: left;
        width: 100%;
    }
    .footer {
        margin: 0;
        padding: 40px 25px 100px 25px; 
        box-sizing: border-box;
    }
    .links {
        display: block;
        margin: 0;
    }
    .content {
        padding: 30px 25px 50px 25px;
    }
    .content .left, .content .right {
        width: 100%;
        float: none;
    }
    .page {
        top: 0;
    }
    .centered.header-padding {
        height: 70px;
    }
}