/*--------------------- CSS NORMALIZE  ---------------------------------------------*/

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,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section {
    display:block;
}

ol,ul {
    list-style:none;
}

blockquote,q {
    quotes:none;
}

:focus {
	outline: 0;
}

a {
	text-decoration: none;
}

*, *:before, *:after {
  box-sizing: border-box;
}

::-moz-selection {
	color:#fff;
	background-color: #d7190a;
} 

::selection {
	color:#fff;
	background-color: #d7190a;
}

/*--------------------- CLEARFIX  ---------------------------------------------*/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/*--------------------- PAGE STRUCTURE ---------------------------------------------*/

html {
	font-size: 16px;
}

body {
	font-family: 'Playfair Display', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;
	color: #000;
	background: url(../img/bgr/body-bgr.jpg);
}

.wrapper {
	max-width: 1600px;
	margin: 0 auto;
}

header {
	position: relative;
	z-index: 1;
}

header > img, .hero-video iframe, main, .box, #taeggie-feed-widget-annikin-runofestivaali .post, main .img-container img, .ziehharmonika h3, .ziehharmonika > div  {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.ziehharmonika h3.active   {
	box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.2);
}

header h1 {
	width: 13.4375%;
	float: left;
	margin-left: 3.125%;
	margin-top: -15%;
	position: relative;
	z-index: 2;
}

#international-sivu header h1, #paatosklubi-sivu header h1, #esiintyjat-sivu header h1, #aikataulu-sivu header h1  {
	text-indent: -9999px;
}

#eng #index-sivu header h1 {
	text-indent: 0;
}

img {
	max-width: 100%;
	height: auto;
}

img.content {
	 margin-left: 10px;
	 border: 7px solid #fff;
    -webkit-transform: rotate(.7deg);
    transform: rotate(.6deg);
    box-sizing: border-box;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);;
}

.hero-video + footer.main {
	margin-top: 1.7rem;
}

main {
	background-image:url(../img/bgr/box-bgr.jpg);
	max-width: 65rem;
	margin: 1.5rem auto 1.5rem auto;
	xxtransform: rotate(-.3deg);
}

#sivu main.no-bgr {
	background-image:url(none);
	box-shadow: none;
	margin-top: -.5rem;
}

#sivu main.no-bgr2 {
	background-image:url(none);
	box-shadow: none;
	margin-top: 1.5rem;
}

main .img-container {
	text-align: center;
	margin: .6em 0 1em 0;
}

#sivu main {
	transform: rotate(0);
}

main p {
	font-size: 1.55rem;
	line-height: 2rem;
	padding: 0 1em 1em;
}

#index-sivu main p {
	font-size: 1.55rem;
	line-height: 2rem;
	padding: 0 1em 1em;
}

main p.huomio {
	border-left: solid #990000 5px;
	border-right: solid #990000 5px;
	margin-right: 1em;
	margin-left: 1em;
	margin-bottom: .3em;
	font-size: 1.4rem;
	line-height: 1.7rem;
}

#index-sivu main p {
	padding: 0 1em .5em;
}

#sivu main p, #sivu main ul {
    font-size: 1.5rem;
    line-height: 1.95rem;
    padding: 0 1em 1em 1em;
}

#sivu main p.center {
	text-align: center;
}

#sivu main ul {
	margin-right: 4%;
	margin-left: 4%;
}

#sivu main ul li {
	padding: 0 1em 1em 1em;
	background: url(../img/bgr/main-list-bullet.png) no-repeat 0 9px;
}

.video-container {
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.video-container + .video-container {
	margin-top: 1em;
}

.video-container + footer.main {
	margin-top: 1.5rem;
}

.hero-video {
	text-align: center;
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%;
}

#mainostaulujen-runot-sivu .hero-video {
	margin-bottom: 20px;
}

.hero-video iframe {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

.box-container {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.box {
	max-width: 360px;
	margin-bottom: 2rem;
	margin-right: 1%;
	margin-left: 1%;
	background-image:url(../img/bgr/box-bgr.jpg);
	transition: all .4s;
}

.box img {
	transition: all .4s;
}

.box:hover img, ul.pressikuvalista img:hover {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
	filter: sepia(100%);
}

.box p {
	color: #990000;
	font-size: 1.3rem;
	line-height: 1.7rem;
	padding: .6em;
	text-align: center;
}

footer.main {
	margin-bottom: 1.5rem;
	background: url(../img/bgr/form-bgr.png) repeat-x left bottom;	
}

.gallery-block {
	margin-right: 0.5%;
	margin-bottom: 4px;
	margin-left: 0.5%;
}

#galleria {
	height: auto;
}

.img-float {
	float: left;
	padding-right: 7px;
}


/* TAEGGIE */

#taeggie-feed-widget-annikin-runofestivaali .post {
	margin-right: 8px;
	margin-left: 8px;
	margin-bottom: 16px;
	transition: all .4s;
}

#taeggie-feed-widget-annikin-runofestivaali .post-instagram {
	background-color: #990000;
}

#taeggie-feed-widget-annikin-runofestivaali .post:hover {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
	filter: sepia(100%);
}

/* FORM */

form {
	text-align: center;
}

form .tekstikentta {
	width: 243px;
	height: 1.5rem;
	border: 0;
	outline: 0;
	margin-bottom: 1.1rem;
	text-align: center;
	background-color: transparent;
	background: url(../img/bgr/form-bgr.png) repeat-x center bottom;
}

form .painike, form button {
	height: 49px;
	width: 148px;
	border: 0;
	outline: 0;
	text-indent: -9999px;
	text-transform: capitalize;
	cursor: pointer;
	margin-bottom: .5rem;
	background: url(../img/bgr/submit-bgr.jpg) no-repeat;
}

::placeholder { 
    color: #990000;
    opacity: 1;
	font-size: .9rem;
	text-align: center;
	text-transform: uppercase;
}

/* NAV.MAIN + NAV.FOOTER-MENU */

nav.main,  nav.credits-menu  {
	text-align: center;
	margin-top: .5rem;
	margin-bottom: .5rem;
	opacity: .8;
}

nav.credits-menu  {
	text-align: center;
	padding-bottom: 1rem;
}

nav.main ul li, nav.footer-menu ul li, nav.credits-menu ul li   {
	display: inline;
	font-family: 'Allerta Stencil', sans-serif;
	text-transform: uppercase;
	letter-spacing: -.04em;
}

nav.main ul li, nav.footer-menu ul li   {
	font-size: calc(16px + 1.04vw);
}

nav.credits-menu ul li  {
	font-size: 22px;
}

nav.credits-menu ul li:first-child  {
	margin-right: .3rem
}

nav.footer-menu ul li   {
	font-size: calc(16px + .8vw);
	line-height: 2.4rem;
}

#sivu nav.main ul li, #sivu nav.footer-menu ul li  {
	font-size: calc(16px + .8vw);
}

nav.main ul li::after {
    content: "/";
    padding-left: .15em;
	padding-right: .1em;
}

nav.footer-menu  {
	padding-bottom: 1.7rem;
	text-align: center;
}

.footer-menu ul li::after {
    content: "/";
    padding-left: .15em;
}

nav.main ul li:last-child::after, .footer-menu ul li:last-child::after {
    content: "";
    padding-right: .3em;
    padding-left: 0;
}

/* NAV.SOCIAL-MEDIA */

nav.social-media  {
	margin-bottom: .5rem;
	padding-bottom: .4rem;
}

nav.social-media ul  {
	text-align: center;	
}

nav.social-media ul li  {
	background: url(../img/bgr/social-media-bgr.jpg) no-repeat;
	height: 69px;
	width: 69px;
	display: inline-block;
	margin-right: 8px;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
	transition: all .3s;
}

nav.social-media ul li:hover  {
	filter: sepia(50%);
}

nav.social-media ul li a  {
	display: block;
	width: 69px;
	height: 69px;
}

nav.social-media ul li.facebook  {
	background-position: 0 0;
}

nav.social-media ul li.instagram  {
	background-position: -69px 0;
}

nav.social-media ul li.twitter  {
	background-position: -139px 0;
}

nav.social-media ul li.youtube  {
	background-position: -208px 0;
}

nav.social-media ul li.flickr  {
	background-position: -278px 0;
}

nav.social-media ul li.spotify  {
	background-position: -347px 0;
}

/* PRESIKUVALISTA */


ul.pressikuvalista  {
	padding: 1em;
	text-align: center;
}

#sivu main ul.pressikuvalista li  {
	display: inline;
	margin: .2rem;
	padding: 0 0 0 0;
	background: none;
}

ul.pressikuvalista img {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
	transition: all .3s;
}

/* TYPOGRAPHY */

main h2, main h3, #index-sivu main h2, main h4, h3.aikataulu-otsikko {
	font-size: calc(32px + 2vw);
	font-family: 'Allerta Stencil', sans-serif;
	text-transform: uppercase;
	color: #c31427;
	letter-spacing: -.05em;
	padding-top: 1rem;
	text-align: center;
	transform: rotate(-1.3deg);
}

main h3, #index-sivu main h2, h3.aikataulu-otsikko  {
	font-size: calc(22px + 1.5vw);
	color: #000;
	transform: rotate(0);
	padding: 0 .5rem 1rem;
}

h3.aikataulu-otsikko {
	font-size: calc(18px + 1.5vw);
	color: #c31427;
	margin-bottom: 5px;
}

main h4 {
	font-size: 34px;
	text-align: left;
	transform: rotate(0);
	padding: 0 1rem 1rem 2rem;
}

#index-sivu main h3 {
	font-size: calc(14px + 1.5vw);
	color: #c31427;
	text-align: center;
	transform: rotate(0);
	padding: 0 1rem 1rem 2rem;
}

#index-sivu main h2 {
	font-size: calc(16px + 1.5vw);
	padding: 1rem .5rem .5rem;
}

main strong  {
	font-weight: bold;	
}

main em  {
	font-style: italic;
}

#sivu main p.ingressi  {
	text-align: center;
	padding-right: 12%;
	padding-left: 12%;
	padding-bottom: .6em;
	font-weight: bold;
}

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

a:link, a:visited, main p a:link, main p a:visited {
	color: #d7190a;
	transition: all .3s;
}

a:hover  {
	color: #000;	
}

 main p a:hover  {
	color: #fff;
	background-color: #c31427;
}

#esiintyjat-sivu nav.main li a.esiintyjat-sivu, #festivaali-info-sivu nav.main li a.festivaali-info-sivu, #medialle-sivu nav.main li a.medialle-sivu, 
#yhteys-sivu nav.main li a.yhteys-sivu, #galleria-sivu nav.main li a.galleria-sivu   {
    cursor: default;
    color: #000;
}

nav.main a:link, nav.main a:visited  {
	color: #990000;
	transition: all .4s;
}

nav.main a:hover  {
	color: #fff;
	background-color: #990000;
}

#esiintyjat-sivu nav.main li a.esiintyjat-sivu:hover,  #festivaali-info-sivu nav.main li a.festivaali-info-sivu:hover, #medialle-sivu nav.main li a.medialle-sivu:hover, #yhteys-sivu nav.main li a.yhteys-sivu:hover, #galleria-sivu nav.main li a.galleria-sivu:hover {
	color: #000;
	background-color: transparent;
}

.footer-menu a:link, .footer-menu a:visited  {
	color: #fff;
	background-color: #990000;
	padding: 0.1em 0.15em;
	transition: all .4s;
}

.footer-menu a:hover  {
	color: #990000;
	background-color: #000;
}

.credits-menu a:link, .credits-menu a:visited  {
	color: #fff;
	background-color: #000;
	padding: 0.1em 0.15em;
	transition: all .4s;
}

 nav.credits-menu a:hover   {
	color: #fff;
	background-color: #990000;
}

nav.main li:last-child a:link, nav.main li:last-child a:visited, nav.footer-menu li:last-child a:link, nav.footer-menu li:last-child a:visited   {
	color: #fff;
	background-color: #990000;
	padding-right: .15em;
	padding-left: .15em;
}

nav.main li:last-child a:hover  {
	color: #000;
	background-color: #990000;
}

nav.footer-menu li:last-child a:link, nav.footer-menu li:last-child a:visited   {
	color: #fff;
	background-color: #000;
}

nav.footer-menu li:last-child a:hover   {
	color: #990000;
	background-color: #000;
}

/*---------------------  RESPONSIVE NAV by @viljamis  ---------------------------------------------*/

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.nav-toggle {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	font-size: 3.95em;
	padding-left: 2%;
	line-height: 1em;
	float: left;
}

a.nav-toggle:link, a.nav-toggle:visited {
	color: #000;
}

a.nav-toggle:hover {
	color: #d7190a;
}

@media screen and (min-width: 970px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

/* Ziehharmonika accordion */

main .ziehharmonika h3 {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat, url(../img/bgr/box-bgr.jpg);
	min-height: 113px;
	text-align: left;
	padding: 12px 4rem 0 160px;
	cursor: pointer;
	margin-top: 0;
	margin-bottom: 15px;
	transition: 0.25s all;
	position: relative;
	font-size: 26px;
	text-transform: uppercase;
}

main .ziehharmonika h3:hover {
	opacity: .8;
}

.ziehharmonika h3.anneli-kanto, .ziehharmonika h3.anneli-kanto.active {
	background: url(../img/bgr/anneli-kanto.jpg) no-repeat, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.johanna-venho, .ziehharmonika h3.johanna-venho.active {
	background: url(../img/bgr/johanna-venho.jpg) no-repeat, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.djami, .ziehharmonika h3.djami.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -113px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kaldmaa, .ziehharmonika h3.kaldmaa.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -226px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.tiainen, .ziehharmonika h3.tiainen.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -339px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.wagner, .ziehharmonika h3.wagner.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -452px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.malin, .ziehharmonika h3.malin.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -565px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.keane, .ziehharmonika h3.keane.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -678px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.liksom, .ziehharmonika h3.liksom.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -791px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kosola, .ziehharmonika h3.kosola.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -904px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.pellinen-aaltonen, .ziehharmonika h3.pellinen-aaltonen.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1017px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.laaksonen, .ziehharmonika h3.laaksonen.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1242px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.gustafsson, .ziehharmonika h3.gustafsson.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1356px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.nyman, .ziehharmonika h3.nyman.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1469px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.hirvonen, .ziehharmonika h3.hirvonen.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1582px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.asa, .ziehharmonika h3.asa.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1130px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kolo, .ziehharmonika h3.kolo.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1695px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.esikoiset, .ziehharmonika h3.esikoiset.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1808px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.pirttikangas, .ziehharmonika h3.pirttikangas.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1921px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kantanen, .ziehharmonika h3.kantanen.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -2034px, url(../img/bgr/box-bgr.jpg);
}

/* esiintyjät 2020 */


.ziehharmonika h3.flying-words, .ziehharmonika h3.flying-words.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px 0px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.edwards, .ziehharmonika h3.edwards.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -113px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.almadhoun, .ziehharmonika h3.almadhoun.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -226px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.sinervo, .ziehharmonika h3.sinervo.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -339px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.romantiks, .ziehharmonika h3.romantiks.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -452px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.paleface, .ziehharmonika h3.paleface.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -565px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.adikia, .ziehharmonika h3.adikia.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -678px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.holmberg, .ziehharmonika h3.holmberg.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -791px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.purhonen, .ziehharmonika h3.purhonen.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -904px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.signe, .ziehharmonika h3.signe.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1017px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.fagerholm, .ziehharmonika h3.fagerholm.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1130px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.enoranta, .ziehharmonika h3.enoranta.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1243px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.outuo, .ziehharmonika h3.outuo.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1356px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.esikoiset, .ziehharmonika h3.esikoiset.active {
	background: url(../img/bgr/esiintyjat.jpg) no-repeat 0px -1808px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.hoikkala, .ziehharmonika h3.hoikkala.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1582px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.maenpaa, .ziehharmonika h3.maenpaa.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1695px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.zalite, .ziehharmonika h3.zalite.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1808px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.zane-un-minna, .ziehharmonika h3.zane-un-minna.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -1921px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.tolli, .ziehharmonika h3.tolli.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -2034px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.makela, .ziehharmonika h3.makela.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -2147px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.poutanen, .ziehharmonika h3.poutanen.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -2260px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.outinen, .ziehharmonika h3.outinen.active {
	background: url(../img/bgr/esiintyjat-20.jpg) no-repeat 0px -2373px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.jonimatti, .ziehharmonika h3.jonimatti.active {
	background: url(../img/bgr/jonimatti-joutsijarvi.jpg) no-repeat 0px 0px, url(../img/bgr/box-bgr.jpg);
}


/* esiintyjät 2022 */


.ziehharmonika h3.flying-words, .ziehharmonika h3.flying-words.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px 0px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.stirling, .ziehharmonika h3.stirling.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -113px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.almadhoun, .ziehharmonika h3.almadhoun.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -226px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.knorr, .ziehharmonika h3.knorr.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -339px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.romantiks, .ziehharmonika h3.romantiks.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -452px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.ursus-factory, .ziehharmonika h3.ursus-factory.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -565px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.paalanen, .ziehharmonika h3.paalanen.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -678px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.mikkola, .ziehharmonika h3.mikkola.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -791px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.purhonen, .ziehharmonika h3.purhonen.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -904px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.laaksonen-hertell, .ziehharmonika h3.laaksonen-hertell.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1017px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.seppala, .ziehharmonika h3.seppala.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1130px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.heikkinen, .ziehharmonika h3.heikkinen.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1243px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.poutanen, .ziehharmonika h3.poutanen.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1356px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.venho, .ziehharmonika h3.venho.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1469px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.viikila, .ziehharmonika h3.viikila.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1582px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.maenpaa, .ziehharmonika h3.maenpaa.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1695px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.esikoiset-22, .ziehharmonika h3.esikoiset-22.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1808px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.outinen, .ziehharmonika h3.outinen.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -1921px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.klubi, .ziehharmonika h3.klubi.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -2034px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.nihkis, .ziehharmonika h3.nihkis.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -2147px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.pimea-hedelma, .ziehharmonika h3.pimea-hedelma.active {
	background: url(../img/bgr/esiintyjat-22.jpg) no-repeat 0px -2260px, url(../img/bgr/box-bgr.jpg);
}


/* esiintyjät 2024 */


.ziehharmonika h3.james-smith, .ziehharmonika h3.james-smith.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px 0px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.oksanen, .ziehharmonika h3.oksanen.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -113px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.karkkainen, .ziehharmonika h3.karkkainen.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -226px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.ahti, .ziehharmonika h3.ahti.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -339px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.fellman, .ziehharmonika h3.fellman.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -452px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.rantanen, .ziehharmonika h3.rantanen.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -565px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.pashew, .ziehharmonika h3.pashew.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -678px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.hokka, .ziehharmonika h3.hokka.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -791px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.rauma, .ziehharmonika h3.rauma.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -904px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kahkonen, .ziehharmonika h3.kahkonen.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1017px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.liimatta, .ziehharmonika h3.liimatta.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1130px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kauhanen, .ziehharmonika h3.kauhanen.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1243px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.lyyti, .ziehharmonika h3.lyyti.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1356px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.talvitie, .ziehharmonika h3.talvitie.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1469px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.maikal, .ziehharmonika h3.maikal.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1582px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.omena, .ziehharmonika h3.omena.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1695px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.paatosklubi-2024, .ziehharmonika h3.paatosklubi-2024.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1808px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.terho-nikula, .ziehharmonika h3.terho-nikula.active {
	background: url(../img/bgr/esiintyjat-24.jpg) no-repeat 0px -1921px, url(../img/bgr/box-bgr.jpg);
}


/* esiintyjät 2026 */


.ziehharmonika h3.annamaret, .ziehharmonika h3.annamaret.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px 0px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.blasim, .ziehharmonika h3.blasim.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -113px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.fagerholm, .ziehharmonika h3.fagerholm.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -226px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.gronfors, .ziehharmonika h3.gronfors.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -339px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kankaanpaa-salonen, .ziehharmonika h3.kankaanpaa-salonen.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -452px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kozlov, .ziehharmonika h3.kozlov.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -565px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.kolo, .ziehharmonika h3.kolo.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -678px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.lillqvist, .ziehharmonika h3.lillqvist.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -791px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.malo, .ziehharmonika h3.malo.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -904px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.nathan, .ziehharmonika h3.nathan.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1017px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.nihkee, .ziehharmonika h3.nihkee.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1130px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.rasa, .ziehharmonika h3.rasa.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1243px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.roze, .ziehharmonika h3.roze.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1356px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.shongololo, .ziehharmonika h3.shongololo.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1469px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.tram, .ziehharmonika h3.tram.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1582px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.tsundue, .ziehharmonika h3.tsundue.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1695px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.venclova, .ziehharmonika h3.venclova.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1808px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.west, .ziehharmonika h3.west.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -1921px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.paatosklubi-2026, .ziehharmonika h3.paatosklubi-2026.active {
	background: url(../img/bgr/esiintyjat-26.jpg) no-repeat 0px -2034px, url(../img/bgr/box-bgr.jpg);
}


/* Klubiesiintyjät 2020 */

.ziehharmonika h3.hokkenheim, .ziehharmonika h3.hokkenheim.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px 0px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.jola, .ziehharmonika h3.jola.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -113px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.koma, .ziehharmonika h3.koma.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -226px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.napsteri, .ziehharmonika h3.napsteri.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -339px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.rehtori, .ziehharmonika h3.rehtori.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -452px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.tipelius, .ziehharmonika h3.tipelius.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -565px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.zombie-clit, .ziehharmonika h3.zombie-clit.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -678px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.hi7e, .ziehharmonika h3.hi7e.active {
	background: url(../img/bgr/klubi-esiintyjat-20.jpg) no-repeat 0px -791px, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika h3.active {
	margin-bottom: 0;
	background: url(../img/bgr/esiintyjat.jpg) no-repeat, url(../img/bgr/box-bgr.jpg);
}

.ziehharmonika > div {
	display: none;
	background: #fff url(../img/bgr/box-bgr.jpg);
	text-align: left;
}

#sivu main .ziehharmonika > div p {
	margin: 0 0 15px 0;
	padding: .4em .8em .8em .8em;
	font-size: 1.45rem;
	line-height: 1.75rem;
}

#sivu main .ziehharmonika > div p + p {
	margin-top: -1em;
}

.ziehharmonika .collapseIcon {
	position: absolute;
	right: 2rem;
	top: 43%;
	font-size: 35px;
	color: #990000;
	font-weight: 300;
	-ms-transform: translate(0, -50%);
	    transform: translate(0, -50%);
}

/* html fade in animation */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*---------------------  MEDIAQUORIES  ---------------------------------------------*/

/* 1120px or less */
@media screen and (max-width:1120px)  {
.box {
    max-width: 330px;
	margin-bottom: 1rem;
}

main p, #sivu main p, #sivu main ul, #sivu main .ziehharmonika > div p {
    font-size: 1.4rem;
    line-height: 1.8rem;
}
}

/* 1050px or less */
@media screen and (max-width:1050px)  {
main {
    transform: rotate(0deg);
	margin-right: 2%;
	margin-left: 2%;
}

.box {
    max-width: 300px;
}
}

/* 969px or less */
@media screen and (max-width: 969px)  {
	
main {
    margin-top: 1rem;
	clear: both;
}

header h1 {
    width: 17.438%;
    margin-top: -19%;
}

#index-sivu main h2 {
	color: #c31427;
	font-size: calc(22px + 1.5vw);
}

#index-sivu main h3 {
	color: #000;
	font-size: calc(16px + 1.5vw);
	padding: 0 0 1rem 0;
}

XXnav.main {
    margin-top: .93rem;
}
}

/* 909px or less  */
@media screen and (max-width:909px)  {
.box {
    max-width: 360px;
}

/* 740px or less  */
@media screen and (max-width:740px)  {
.box {
    max-width: 740px;
}

.box {
    max-width: 320px;
}

nav.credits-menu ul li  {
	font-size: 19px;
}
}

/* 640px or less  */
@media screen and (max-width: 640px)  {
main p, #sivu main p, #sivu main ul, #sivu main .ziehharmonika > div p, main p.huomio, #index-sivu main p.huomio, #index-sivu main p {
    font-size: 1.35rem;
    line-height: 1.75rem;
}

header h1 {
    width: 20.438%;
    margin-top: -23%;
}
.box {
    max-width: 355px;
}

main .ziehharmonika h3 {
    font-size: 20px;
}

.ziehharmonika .collapseIcon {
    top: 46%;
    font-size: 30px;
}

#index-sivu main h3 {
	color: #c31427;
}

#sivu main ul {
	margin-right: 3%;
	margin-left: 3%;
}

nav.main {
    margin-top: .1rem;
	opacity: .9;
}

#sivu nav.main ul li {
    line-height: 1.75rem;
}

main {

    margin-top: .5rem;
}
}

/* 607px or less */
@media screen and (max-width:607px)  {
.box {
    max-width: 360px;
}

nav.social-media ul li {
    margin-right: 5px;
}
}

/* 470px or less */
@media screen and (max-width:470px)  {
main .ziehharmonika h3 {
    font-size: 18px;
	padding: 8px 2rem 0 160px;
}

.ziehharmonika .collapseIcon {
    right: 1rem;
}

main p, #sivu main p, #sivu main ul, #sivu main .ziehharmonika > div p, main p.huomio, #index-sivu main p.huomio, #index-sivu main p {
    font-size: 1.2rem;
    line-height: 1.63rem;
}

#sivu main ul {
	margin-right: 1%;
	margin-left: 1%;
}
}

/* 360px or less */
@media screen and (max-width: 360px)  {
header h1 {
    width: 23.438%;
    margin-top: -27%;
}

nav.credits-menu ul li {
    font-size: 18px;
}

nav.footer-menu {
    padding-bottom: 1rem;
}

main .ziehharmonika h3 {
    font-size: 16px;
}

main {
    margin-top: .7rem;
}
}

/* 320px or less */
@media screen and (max-width: 320px)  {
.ziehharmonika .collapseIcon {
    display: none;
}

main .ziehharmonika h3 {
    padding: 8px .4rem 0 160px;
}

#sivu main ul {
	margin-right: 0;
	margin-left: 0;
}
}

/*---------------------  @MEDIA PRINT  ---------------------------------------------*/

@media print {

body, h2 { color: #000; }

nav.main, footer.main, a.nav-toggle, .box-container, main.no-bgr div.ziehharmonika { display: none; }

a:link, a:visited { color: #000; }
}