/*--------------------- 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;
}

::-moz-selection {
	color:#fff;
	background-color: #591e20;
} 

::selection {
	color:#fff;
	background-color: #591e20;
}

.ziehharmonika p::-moz-selection {
	color:#fff;
	background-color: #f4e300;
} 

.ziehharmonika p::selection {
	color:#fff;
	background-color: #f4e300;
}

/*--------------------- 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: 'Arsenal', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
	font-size: 1.6rem;
	color: #000;
	background: #4a477e;
}

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

nav.main, main, footer, header h1 {
	padding-right: 1%;
	padding-left: 1%;
	box-sizing: border-box;
}

header {
	text-align: center;
	margin-top: 38px;
	margin-bottom: -8px;
	padding-bottom: 0;
}

header h1 {
	z-index: 2;
	position: relative;
}

.hero-image {
	margin-top: -41px;
	z-index: 1;
	position: relative;
}

main, footer.main {
	background: url(../img/bgr/main-bgr.jpg)
}

.content {
	margin: 0 auto;
	max-width: 62rem;
	box-sizing: border-box;
	padding: 2rem 1% 2rem;
}

.taeggie-container {
	padding-top: 16px;
	box-sizing: border-box;
	max-width: 1600px;
	margin: 0 auto;
}

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

.box {
	max-width: 22.22222222%;
	margin-bottom: 2rem;
	margin-right: 1%;
	margin-left: 1%;
	padding: .8rem;
	padding-bottom: 1.5rem;
	text-align: center;
	box-sizing: border-box;
	background-color: #4a477e;
    transition: all .3s;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}

.box:hover {
	box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.5);
}

.box:hover img {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
	-webkit-filter: invert(1);
	filter: invert(1);
	}

.box img {
	border-radius: 50%;
	margin-bottom: 1rem;
	transition: all .3s;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.30);
}

footer.main {
	padding-bottom: 1rem;
	padding-left: 3%;
	padding-right: 3%;
}

ul.logolista, ul.pressikuvalista {
	margin-top: 1rem;
}

.logolista li {
	display: inline;
	margin: .3vw;
}

#sivu .content ul.pressikuvalista li {
	display: inline;
	background: url(none);
	padding-left: 0;
}

.logolista li:first-child, .pressikuvalista li:first-child {
	margin-left: 0;
}

.logolista img  {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
	-webkit-filter: sepia(1);
	filter: sepia(1);
}

.logolista img:hover {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

.content .pressikuvalista img  {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
	transform: rotate(0);
	box-sizing: content-box;
}

.pressikuvalista img:hover  {
	box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.7);
}

.columns {
 -moz-column-count: 2;
 -moz-column-gap: 20px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 column-count: 2;
 column-gap: 20px;
}

footer.main .teoskrediitit {
	margin-top: 15px;
}

footer.main .teoskrediitit p {
	font-size: 1.4rem;
	color: #333;
	line-height: 22px;
}

footer.main .teoskrediitit p strong {
	color: #F9DAA6;
	text-transform: uppercase;
	font-weight: normal;
}

.iframe-container {
	max-width: 1000px;
	margin: 0 auto;
    text-align: center;
}

iframe {
    max-width: 100%;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* NAV.MAIN */

nav.main  {
	margin-top: 2.5vh;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	text-align: center;
}

nav.main ul li {
	display: inline;
	font-size: calc(16px + 1.34vw);
	letter-spacing: -.1rem;
    padding-right: 1.6vw;
}

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

nav.main ul li:last-child {
    padding-right: 0;
}

/* FOOTER NAV */

footer.main nav {
	margin-top: 1rem;
	margin-bottom: 1.6rem;
}

footer.main nav ul li, footer.main p {
	display: inline;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	font-size: calc(16px + .8vw);
	line-height: 36px;
	letter-spacing: -.1rem;
	padding-right: .3%;
}

footer.main nav.meta ul li {
	font-size: calc(16px + .4vw);
	text-transform: none;
	letter-spacing: normal;
}

footer.main nav ul li::after {
    content: "/";
    padding-left: .5%;
}

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

footer.main h2 {
	margin-left: 4px;
	margin-right: 4px;
}

footer.main p em {
	text-transform: none;
	font-style: normal;
}

footer.main p em:first-child::after {
    content: "/";
    padding-left: 1%;
	padding-right: 1%;
}

/*--------------------- IMAGES ---------------------------------------------*/

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

.content img {
	border: 7px solid #fff;
	-webkit-transform: rotate(.8deg);
	transform: rotate(.8deg);
	box-sizing: border-box;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}

.content div.ziehharmonika img {
	border: 3px solid #000;
	border-radius: 10px;
	-webkit-transform: rotate(0);
	transform: rotate(0);
	box-sizing: border-box;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.9);
}


.content div.ziehharmonika p a:link, .content div.ziehharmonika p a:visited {
    color: #FFED00;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    transition: none;
}

.content div.ziehharmonika iframe{
	margin-bottom: 9px;
}

/*--------------------- VIDEO ---------------------------------------------*/

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

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

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

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

/*--------------------- TYPOGRAPHY ---------------------------------------------*/

h1, h2, h3, h4 {
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
}

#sivu header h2 {
	font-size: calc(16px + 3.3vw);
	color: #fff;
	margin-top: 2px;
	margin-bottom: 6px;
}

.box h2 {
	font-size: calc(16px + 1vw);
	letter-spacing: -.1rem;
	color: #fff;
}

#sivu .content h3 {
	color: #f9daa6;
	background-color: #4a477e;
	font-size: calc(16px + 1.5vw);
	margin-bottom: 1.3rem;
	margin-top: 1rem;
	padding: 6px 6px 4px 6px;
	display: inline-block;
	clear: both;
}

#sivu .content h4 {
	color: #000;
	font-size: calc(16px + .95vw);
	margin-bottom: 1rem;
	padding: 6px 6px 4px 6px;
}

#sivu #taiteilijat-sivu .content h3, #sivu #historia-sivu .content h3 {
	background-color: #4a477e;
}

#sivu #historia-sivu .content h4 {
	font-size: calc(16px + 1.3vw);
	background-color: #f9daa6;
	text-align: center;
	padding: .5rem;
	color: #fff;
}

.content p, #sivu .content ul {
	font-size: 1.55rem;
	line-height: 1.84rem;
}

#index-sivu .content p:first-child, #index-sivu .content p:nth-of-type(2), #english-index .content p:first-child, #english-index .content p:nth-of-type(2)  {
	margin-bottom: .7em;
}

.box p {
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.8rem;
}

#sivu .content p, #sivu .content ul  {
	margin-bottom: 1.2rem;
}

#sivu .content ul li {
	margin-bottom: .5rem;
	background: url(../img/bgr/list-bullet.jpg) no-repeat 0 10px;
	padding-left: 18px;	
}

.content p:first-child:first-letter, #sivu .content p:first-of-type:first-letter   {
	float: left;
	font-size: 60px;
	padding: 40px;
	margin-right: 9px;
	font-family: 'Fjalla One', sans-serif;
	color: #fff;
	background-color: #f9daa6;
	border-radius: 50%;
	-webkit-shape-outside: circle();
    shape-outside: circle();
}

#sivu .content .ziehharmonika p:first-of-type:first-letter   {
	font-size: 40px;
	font-weight: normal;
	font-style: normal;
	padding: 26px;
	background-color: #f9daa6;
	color: #fff;
}

#sivu .content p:first-of-type {
	clear: both;
	min-height: 130px;
}

#sivu #ajankohtaista-sivu .content p:first-of-type {
	clear: both;
	min-height: auto;
}

#sivu #ajankohtaista-sivu .content p:first-child:first-letter, #sivu #ajankohtaista-sivu .content p:first-of-type:first-letter, #sivu #xtra-sivu .content .aikataulu p:first-of-type:first-letter, #index-sivu .content p:first-child:first-letter   {
	float: none;
	font-size: 1.55rem;
	padding: 0;
	margin-right: 0;
	font-family: 'Arsenal', sans-serif;
	color: #000;
	background-color: transparent;
}

#sivu #historia-sivu .content p:first-of-type, #sivu #xtra-sivu .content .aikataulu p:first-of-type {
	min-height: inherit;
}

#sivu #xtra-sivu .content .aikataulu p:nth-of-type(odd) {
	margin-left: 15px;
	margin-bottom: -3px;
}

#sivu #xtra-sivu .content .aikataulu p:nth-of-type(even) {
	background: #4A477E;
	color: #fff;
	padding: 15px;
	border-radius: 15px;
	box-sizing: border-box;
	box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

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

.content a:link, .content a:visited  {
	color: #000;
	background-color: #f9daa6;
	padding-left: 2px;
	padding-right: 2px;
	transition: all .3s;
	border-radius: 5px;
}

.content a:hover  {
	color: #fff;
	background-color: #4a477e;
}

.content .aikataulu a:link, .content .aikataulu a:visited  {
	color: #000;
	background-color: #f9daa6;
    padding-left: 2px;
}

.content .aikataulu a:hover  {
	color: #000;
	background-color: transparent;
}

.content ul.pressikuvalista a:link, .content ul.pressikuvalista a:visited  {
	padding-left: 0;
	padding-right: 0;
	background: transparent;
}

nav.main a:link, nav.main a:visited  {
	color: #f9daa6;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 4px;
}

nav.main a:hover  {
	color: #4b5f3c;
}

nav.main a.english:link, nav.main a.english:visited  {
	color: #fff;
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
	display: inline-block;
	transition: all .3s;
}

nav.main a.english:hover  {
	color: #000;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

footer.main nav a:link, footer.main nav a:visited  {
	color: #fff;
	background-color: #4a477e;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 4px;
	transition: all .3s;
}

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

footer.main nav.some li.fb-link a:link, footer.main nav.some li.fb-link a:visited {
	background-color: #3b5999;
}

footer.main nav.some li.instagram-link a:link, footer.main nav.some li.instagram-link a:visited {
	background-color: #C32AA3;
}

footer.main nav.some li.twitter-link a:link, footer.main nav.some li.twitter-link a:visited {
	background-color: #000000;
}

footer.main nav.some li.youtube-link a:link, footer.main nav.some li.youtube-link a:visited {
	background-color: #cd201f;
}

footer.main nav.some li.fb-link a:hover, footer.main nav.some li.instagram-link a:hover, footer.main nav.some li.youtube-link a:hover {
	background-color: #000;
}

footer.main nav.some li.twitter-link a:hover {
	background-color: #55acee;
}


footer.main nav a.english:link, footer.main nav  a.english:visited  {
	color: #4a477e;
	background-color: #f9daa6;
}

footer.main nav a.english:hover  {
	color: #fff	;
	background-color: #4a477e;
}


footer.main nav.meta a:link, footer.main nav.meta a:visited  {
	padding-left: 0;
}

/*---------------------  NAV ANIMATIONS  ---------------------------------------------*/

.hvr-sweep-to-right {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}

.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*---------------------  USER INTERFACE ANIMATIONS  ---------------------------------------------*/

/* h1 animation */

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.animate-pop-in {
  animation: pop-in .6s ease-out forwards;
}

/* 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;
}

/*---------------------  ACCORDION  ---------------------------------------------*/

#sivu .content .ziehharmonika h3 {
	display: block;
	min-height: 90px;
	padding: 12px 5.5rem 0 12%;
	cursor: pointer;
	margin-top: 0;
	margin-bottom: 1rem;
	transition: 0.25s all;
	position: relative;
	font-size: calc(16px + .9vw);
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}

#sivu #historia-sivu .content .ziehharmonika h3 {
	padding: 12px 5.5rem 0 9px;
	font-size: calc(16px + .6vw);
}

#sivu #historia-sivu .content .ziehharmonika h3 strong {
	color: #fff;
	font-weight: normal;
}

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

.ziehharmonika > div {
	display: none;
	background-color: #ffed00;
	text-align: left;
}

#sivu .content .ziehharmonika > div p, #sivu .content .ziehharmonika ul {
	margin: -16px 0 1rem 0;
	padding: .8em;
	font-size: 1.45rem;
	color: #fff;
	line-height: 1.75rem;
	background-color: #000;
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}

#sivu .content .ziehharmonika > div p {
	margin: -16px 0 0 0;
}

#sivu .content .ziehharmonika ul {
	margin: 0 0 1rem 0;
}


#sivu #historia-sivu .content .ziehharmonika > div p {
	margin: -16px 0 0 0;
}

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

.ziehharmonika .collapseIcon {
	position: absolute;
	right: 2rem;
	top: 47%;
	font-size: 4rem;
	color: #ffed00;
	font-weight: normal;
	-ms-transform: translate(0, -50%);
	    transform: translate(0, -50%);
}

/* TAEGGIE */

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

#taeggie-feed-widget-kuvataideviikot .post-instagram {
	background-color: #f9daa6;
}

#taeggie-feed-widget-kuvataideviikot .post  {
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
}

#taeggie-feed-widget-kuvataideviikot .post:hover {
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.7);
	background-color: #4a477e;
	xx-webkit-filter: sepia(100%);
	xxfilter: sepia(100%);
}

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

/* 1330px or less */
@media screen and (max-width:1330px)  {
.hero-image {
	margin-top: -32px;
}

header {
    margin-top: 32px;
}

.content {
    padding: 2rem 1% 1.8rem;
}
}

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

/* 1100px or less */
@media screen and (max-width: 1100px)  {
header {
    margin-top: 25px;
}

.hero-image {
	margin-top: -27px;
}

nav.main {
    margin-top: 2vh;
}

.box p {
    font-size: 1.4rem;
    line-height: 1.65rem;
}

#sivu nav.main ul li {
    font-size: calc(16px + 1vw);
	padding-right: 1.3vw;
}
}

/* 980px or less */
@media screen and (max-width:980px)  {
header {
    margin-top: 15px;
}

.content p:first-child::first-letter, #sivu .content p:first-of-type:first-letter {
    font-size: 50px;
    padding: 35px;
}

.content {
    padding: 1.2rem 2% 1rem;
}

.content p, #sivu .content ul {
    font-size: 1.50rem;
    line-height: 1.75rem;
}

.box {
    max-width: 30.222%;
	padding-bottom: 1rem;
	margin-bottom: 1.18rem;
}

.box img {
    margin-bottom: .6rem;
}

footer.main nav, footer.main p {
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

#sivu nav.main ul li {
    font-size: calc(16px + .4vw);
    padding-right: .5vw;
}

#sivu header h2 {
    margin-bottom: 10px;
}

#sivu .content p:first-of-type {
    min-height: 108px;
}
}

/* 700px or less */
@media screen and (max-width:700px)  {
.hero-image {
	margin-top: -20px;
}

nav.main {
    margin-top: 1.1vh;
}

header {
    margin-top: 10px;
}

.content {
    padding: 1.1rem 3% .85rem;
}

.content p:first-child::first-letter, #sivu .content p:first-of-type:first-letter {
    font-size: 45px;
    padding: 20px;
	margin-right: 5px;
}

.box p {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.6rem;
}

.box img {
    margin-bottom: .3rem;
}

footer.main nav, footer.main p {
    margin-bottom: .8rem;
}

#sivu nav.main ul li {
    font-size: calc(16px + .3vw);
    padding-right: .2vw;
}

#sivu .content p:first-of-type {
    min-height: 83px;
}

.taeggie-container {
	padding-top: 6px;
}

#taeggie-feed-widget-kuvataideviikot .post {
	margin-right: 3px;
	margin-left: 3px;
	margin-bottom: 6px;
}

footer.main .teoskrediitit {
	margin-top: 0;
}

footer.main .teoskrediitit p {
	font-size: 1.2rem;
}
}

/* 600px or less  */
@media screen and (max-width:600px)  {
.box {
    max-width: 46.222%;
	margin-bottom: .71rem;
}

.columns {
 -moz-column-count: 1;
 -webkit-column-count: 1;
 column-count: 1;
}

#sivu .content .ziehharmonika > div p, #sivu .content .ziehharmonika div ul {
	font-size: 1.35rem;
	line-height: 1.57rem;
}

#sivu .content h3 {
	font-size: calc(16px + 1.7vw);
}
}

/* 360px or less  */
@media screen and (max-width: 360px)  {
nav.main a.english:link, nav.main a.english:visited  {
	-webkit-transform: rotate(0);
	transform: rotate(0);
}

.content {
    padding: 1.1rem 3.5% .6rem;
}

.content p, #sivu .content ul {
    font-size: 1.3rem;
    line-height: 1.64rem;
}

#sivu .content .ziehharmonika > div p, #sivu .content .ziehharmonika div ul {
	font-size: 1.3rem;
	line-height: 1.57rem;
}

header {
    margin-top: 7px;
}

.hero-image {
    margin-top: -13px;
}

.box {
    margin-bottom: .51rem;
}

.box p {
    font-size: 1.2rem;
    line-height: 1.5rem;
}

nav.main ul li {
	line-height: 2rem;
}

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

#sivu header h2 {
    margin-bottom: 13px;
}

#sivu .content h3 {
	font-size: calc(16px + 3vw);
}
}

/* 320px or less  */
@media screen and (max-width: 320px)  {
#sivu nav.main ul li {
	font-size: calc(16px + .56vw);
}
}

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

@media print {

body, #sivu .main h2 { color: #000; }

header h1 { margin: 0 0 0 1.66666%; }

nav.main, footer.main, .box-container, header { display: none; }

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

.content p, #sivu .content ul { font-size: 16px;}
}