/* @override http://www.annami.fi/css/default.css */


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


body {
	height: 100%;
	background: #000;
	color: #eee;
	margin:0;
	padding:0;
	padding-bottom: 0px;
	font-family: "proxima-nova-1","proxima-nova-2", sans-serif;
	font-size:20px;
	line-height: 1.6;
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
}

#container {
	width: ;
	height:;
	padding-bottom: 100px;
}

#logo {
	width: 319px;
	height: 169px;
	margin-top: 57px;
}

.ah_logo_black {
	background: url(../images/AH_logo_hires_black.png) no-repeat center center;
	background-size: 100%;
	width: 319px;
	height: 169px;
}


nav.nav-collapse {
	margin-top: 0px;
	height:auto;
	font-size:0.7em;
	font-weight:700;
}

nav.nav-collapse ul {
	list-style-type: none;
	margin: 0;
	margin-top: 50px;
	padding: 0;
}


nav.nav-collapse li {
	display: inline-block;
	width: auto;
	margin-top: -2px;
	border: 2px solid #fff;
}

nav.nav-collapse li.selected {
	background: #fff;
}


nav.nav-collapse li:hover {
	display: inline-block;
	background: #fff;
	width: auto;
}

nav.nav-collapse li:hover a {
	color: #333;
}


/* Black menu */
nav.nav-collapse .navi_black li {
	display: inline-block;
	width: auto;
	margin-top: -2px;
	border: 2px solid #f;
	color: #333;
}

nav.nav-collapse .navi_black a:link {color:#fff; text-decoration:none;}
nav.nav-collapse .navi_black a:visited {color:#fff;text-decoration:none;}
nav.nav-collapse a:hover {color:#333;text-decoration:none; background: #fff; }
nav.nav-collapse a:active {color:#333;text-decoration:none;}
nav.nav-collapse li.selected a {color:#333;text-decoration:none;
}



.nosto {
	color: #ccc;
	font-size: 0.65em;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 1.4;
	margin-left: 10px;
}


.repertoire p {
	padding: 0;
	margin: 0;
}

p {
	margin-bottom: 2em;
	font-weight: 400;
}

.ooppera {
	font-size: 1.4em;
	line-height: 1.2;
}

.ooppera p {
	margin-bottom: 1em;
}

.reperto_2 {
	margin-top: 3.2em;
	font-size: 1.2em;
	line-height: 1.4;
}

.reperto_2 .first_row {
	font-weight: 700;
}

.lataa, .lataa2 {
	margin-top: 3.2em;
}

#content {
	margin-top: 120px;
}

#content.music .dark_gray {
	font-size: 0.75em;
}

.files {
	margin-top: -50px;
}

div.hiresimg div.Repeat {
	margin-bottom: 20px;
	padding: 0;
}

.hiresimg div {
	float: left;
	margin: 0 5px 0 0;
}

.images.RepeatArea {
	margin-top: 20px;	
}

.hiresimg img {
}

.hiresimg a {
	font-size: 0.8em;
	font-weight: 700;
}

::selection {
	background: #fff; /* Safari */
	}
::-moz-selection {
	background: #fff; /* Firefox */
}

.audio {
	margin-bottom: 17px !important;
	margin-top: 5px;
}

.nosto {
	font-size: 0.6em;
	line-height: 1.2;
	padding-top: 10px;
	font-weight: bold;
	color: #fff;
}




/* ----------------- FONTS -------------------------*/



h1 {
	margin:0;
	padding:0;
	font-family: "proxima-nova-1","proxima-nova-2", sans-serif;
	font-size: 0.8em;
	line-height: 1.8;
	font-weight:700;
	text-align: right;
	text-decoration: underline;
}

h2 {
	margin:0;
	padding:0;
	font-family: "proxima-nova-1","proxima-nova-2", sans-serif;
	font-size: 0.8em;
	line-height: 1.8;
	font-weight:700;
	text-align: right;
	text-decoration: underline;
}

h3 {
	margin:0;
	padding:0;
	font-family: "proxima-nova-1","proxima-nova-2", sans-serif;
	font-size: 0.9em;
	font-weight:700;
	line-height: 1.8;
	text-align: right;
	text-decoration: underline;
}

.kuvat h2 {
	line-height: 1.6;
}

.kuvat2 h2 {
	margin-top: 15px;
	line-height: 1.6;
	text-align: ;
}

.kuvat1 h2 {
	margin-top: 0px;
	line-height: 1.6;
}

.kuvat1 .RepeatArea {
	margin-top: 0;
}

.meta {
	font-size: 0.6em;
	line-height: 1.2;
}

.meta_big {
	margin-top: 1.6em;
	font-size: 0.8em;
	line-height: 1.6;
	font-weight: 700;
}


.repertoire h1 {
	margin-top: 0.45em;
	line-height: 2;	
}

.reperto_2 h3 {
	font-size: 0.65em;
	line-height: 2;
	margin-top: 0.15em;
}

h3 #nayta_menneet {
	font-size: 0.55em;
	line-height: 1.6;
}

.bold { 
	font-weight:bold;
} 

.violet {
	color: #5d0097;	
}

.caps {
	text-transform:uppercase;	
}

.dark_gray {
	color:#8e9fb3;	
	font-style: italic;
	display: block;
	font-weight: 400;
}

.ooppera .dark_gray {
	font-size: 0.6em;
	line-height: 1.2;
}

.reperto_2 .dark_gray {
	font-size: 0.8em;
	line-height: 1.2;
}

.esiintymiset p {
	margin-bottom: 1em;
}

.quote {
	font-family:'Museo Sans 500';
	font-size:16px;
	color:#a900af;
}

.quote_by {
	font-family:'Museo Sans 500';
	font-size:11px;
	color:#333;
}

.gray_small {
	font-size: 11px;
	color:#666;
}

.loud {
	font-size: 1.6em;
	line-height: 1;
	font-weight: 700;
}

.loudest {
	font-size: 1.6em;
	line-height: 1.2;
	font-weight: 700;
}




/* Button */
.button {
	background-color: transparent;
	color: white;
	cursor: pointer;
	display: inline-block;
	height: 30px;
	line-height: 1.6;
  	margin: ;
	overflow: hidden;
	position: relative;
	text-align: left;
	text-transform: uppercase;
	-webkit-transition: background-color 0.2s;
  	-moz-transition: background-color 0.2s;
  	transition: background-color 0.2s;
}

.label {
	display: block;
	height: 100%;
	/*padding: 5px;*/
	position: relative;
	top: 0%;
  	-webkit-transition: top 0.2s;
  	-moz-transition: top 0.2s;
  	transition: top 0.2s;
  	width: auto;
}

.button:hover {
	background-color: #fff;
	color: #333;
	text-align: left;
}

.button:hover .label {
	top: -100%;
	text-align: left;
	width: auto;
}


/* audio player */

.mejs-controls .mejs-button button:focus{outline:solid 0px #a900af !important;}


/* ----------------- LINKS -------------------------*/

nav.nav-collapse a {
	padding: 5px;
	display: block;
}

nav.nav-collapse a:link {color:#fff; text-decoration:none;}
nav.nav-collapse a:visited {color:#fff;text-decoration:none;}
nav.nav-collapse a:hover {color:#333;text-decoration:none; background: #fff; }
nav.nav-collapse a:active {color:#333;text-decoration:none;}
nav.nav-collapse li.selected a {color:#333;text-decoration:none;
}

#content a {padding: 2px;}
#content a:link {color:#fff; text-decoration:underline;}
#content a:visited {color:#fff;text-decoration:none;}
#content a:hover {color:#fff;text-decoration:none; }
#content a:active {color:#fff;text-decoration:underline; }

.lisatietoa a {padding: 2px;font-weight: 700;}
.lisatietoa a:hover {color: #fff; text-decoration: none;	}

.logo_container a:hover {
	background-color: none;
	text-decoration: none;
	border: 1px solid red;
}


.images img {
	width: 100px;	
	height: auto;
	margin-right:1px;
	margin-bottom:5px;
}

#content .images a:hover {
	background-color: transparent;
	opacity:0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
}

.images div {float:left;}

.audioSamples {
	width: 530px;
}

.music p {padding:0;margin:0;}

.music ul {
	margin:0;	
	padding:0 0 0 17px;
	list-style-image:url(../images/pallo.gif);
	line-height: 1.2em;
}

.music li {
	margin-bottom:15px;	
}

.music h2 {
	text-align: right;
}

.kalenteri p {
	margin-top: 2px;
	margin-bottom: 50px;
}

.kalenteri h3 {
	margin:0 0 0px 0;
	padding:0;
	font-size: 1.8em;
	line-height: 1;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
}


.lisatietoa {
	font-size: 0.8em;
}

#backstretch img {
	max-width: none;
}






@media only screen and (max-width: 1020px) {

#logo {
	border: 0px solid red;
}


nav.nav-collapse ul {
	list-style-type: none;
	margin: 0;
	margin-top: 50px;
	padding: 0;
}

#content {
	margin-top: 60px;
}

body {
	width: 100% !important;
}

.container_12 {
	width: 650px !important;
	border: 0px solid red;
}

.container_12 .grid_10 {
	width:650px !important;
}

.music .grid_2 {
	display: block;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.grid_2 {
	margin-left: 0 !important;
}

.grid_2 h1, .grid_2 h3, .grid_2 h2 {
	text-align: left;
	margin-bottom: 1.6em;
}

.kuvat1 .RepeatArea {
	margin-top: 3.2em;
}

.kuvat h2, .kuvat2 h2, .kuvat1 h2 {
	text-align: left;
}

.kuvat h2 {
	margin-bottom: 3.2em;
}

.grid_8, .grid_7 {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.reperto_2 {
	margin-top: 1.6em;

}

.reperto_2 h3 {
	margin-bottom: 0;
	margin-top: 1.6em;
}

.lataa {
	margin-top: 3.2em;
}

.lataa2 {
	margin-top: 0em;
}

}




@media only screen and (max-width: 1020px) {

.images.RepeatArea, .audioSamples.RepeatArea {
	margin-top: 20px;	
}

	
}




@media only screen and (max-width: 750px) {

body {
	width: auto !important;
	font-size: 1em;
	padding-right: 0px !important;
	padding-left: 0px !important;
	padding-bottom: 0;
	margin: 0 15px
}


#logo {
	border: 0px solid red;
	margin-top: 10px;
	height: auto;
	width: 100% !important;
}


#logo img {
	max-width: 300px;
	width: 80% !important;
	height: auto;
	margin-bottom: 15px;
	border: 0px solid red;
}

/*
.ah_logo_black {	
	width: 80%;
	height: auto;
	background-size: 90%
}*/


a.nav-toggle {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border: 2px solid #fff;
	padding: 5px;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: .9em;
	display: inline-block;
	width: auto !important;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font-family: "FontAwesome", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  content: "\f0c9";
  text-indent: 0;
  text-align: center;
  speak: none;
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
}

.frontpage a.nav-toggle {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border: 2px solid #fff;
	padding: 5px;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: .9em;
	display: inline-block;
	width: auto !important;
}

.frontpage .nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font-family: "FontAwesome", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  content: "\f0c9";
  text-indent: 0;
  text-align: center;
  speak: none;
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
}

.nav-toggle.active:before {
  content:"\f00d";
  color: #333;
}

.grid_3 {
	border: 0px solid red;
	width: 95% !important;
	margin-left: 0 !important;
}

a.nav-toggle.active {
	color: #333;
	background: #fff;
}

nav.nav-collapse li {
	font-size: 1.25em;
}

nav.nav-collapse {
	margin-left: 0;
	width: 100%;
}

nav.nav-collapse ul {
	list-style-type: none;
	margin: 0;
	margin-top: 0px;
	padding: 0;
	width: 100%;
	float: right !important;
}

#content {
	margin-top: 60px;
	font-size: 1.2em;
}

.container_12 {
	width: auto !important;
	margin-left: 0px !important;
}

.container_12 .grid_10 {
	width:auto !important;
	margin-right: 0;
	margin-left: 0;
}

.grid_2 {
	display: block;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#content .grid_2 {
	width: 100% !important;
}

.grid_2 h1, .grid_2 h3 {
	text-align: left !important;
	margin-bottom: 1.6em;
}


#menneet_tapahtumat {
	width: auto !important;
}


.reperto_2 h3 {
	padding: 0;
	margin: 3.2em 0 1.6em 0;
}

.prefix_5 {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.grid_5 {
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.grid_7 {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.grid_8 {
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ooppera .dark_gray {
	font-style: italic;
	font-size: 1em;
	line-height: 1;
}

.ooppera p {
	margin-bottom: 1.6em;
	font-size: 0.65em;
}

.ooppera .bold {
	font-size: 1.8em;
	line-height: 1.1;
}

.ooppera span, .reperto_2 span {
	display: block;
}

.reperto_2 p {
	margin-bottom: 1.4em;
}

.reperto_2 .dark_gray {
	font-size: 0.8em;
	line-height: 1.2;
	margin-top: 3px;
}

.reperto_2 .first_row {
	font-size: 1.1em;
	line-height: 1.1;
	font-weight: 700;
}

.reperto_2 .regular {
	font-weight: 400 !important;
	display: inline;
	font-size: 0.8em;
}

.hiresimg .Repeat {
	margin-bottom: 20px;
	padding: 0;
}

.images.RepeatArea {
	margin-top: 0px;	
}

.kuvat h2, .kuvat2 h2 {
	text-align: left;
	margin-bottom: 1.6em;
}

.kuvat1 .RepeatArea {
	margin-top: 1.6em;
}

.audioSamples {
	width: 100%;
}

.audio {
	width: 95% !important;
}

.mejs-controls div.mejs-time-rail {
	width:  !important;
}

.mejs-controls .mejs-time-rail span {
	width:!important;
}

.mejs-controls div.mejs-horizontal-volume-slider{display:  !important;}


.nosto img {
	width: 90%;
	margin-top: 100px;
}

.nosto p {
	font-size: 0.8em;
}

/* High-res */
/*@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  .class {
    background-image: url('sprite@x2.png');
    background-size: 500px 500px; /* downscaled 50%, size of original sprite */
  }
}*/