/* bitter-regular - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bitter-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Bitter Regular'), local('Bitter-Regular'),
       url('../fonts/bitter-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bitter-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bitter-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bitter-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bitter-v15-latin-regular.svg#Bitter') format('svg'); /* Legacy iOS */
}
/* bitter-700 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/bitter-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Bitter Bold'), local('Bitter-Bold'),
       url('../fonts/bitter-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bitter-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bitter-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bitter-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bitter-v15-latin-700.svg#Bitter') format('svg'); /* Legacy iOS */
}

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


html { 
font-size: 62.5%;
height: 100%;
position: relative
}

h1,h2,h3,h4,h5,h6 {
font-weight:normal;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

h1 {
font-size: 3.5rem;
line-height: 120%;
font-weight: 700;
font-family: 'Bitter', serif !important;
}

h2 {
font-size: 2.8rem;
line-height: 120%;
font-weight: 700;
font-family: 'Bitter', serif !important;
}

h3 {
font-size: 2.3rem;
line-height: 120%;
font-weight: 700;
font-family: 'Bitter', serif !important;
}

h4 {
font-size: 1.8rem;
line-height: 120%;
font-weight: 700;
font-family: 'Bitter', serif !important;
}

ul {
list-style: none;
line-height: 120%;
}

/*------------------------------------*\
    MAIN
\*------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
margin:0;
padding:0
}

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object {
display:block
}

/* global box-sizing */
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
outline: none;
}

body {
height:100% !important;
font-family: 'Open sans', sans-serif !important;
font-weight: 400;
font-size: 1.8rem;
line-height: 170%;
color: rgba(215,183,114,1);
position: relative;
background: rgba(20,52,35,1);
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

#headerOuter {
width: 100%;
background: rgba(215,183,114,1);
position: relative;
z-index: 120;
position: fixed;
top:0
}

#headerInner {
padding: 20px 8vw;
margin: 0 auto;
height: auto;
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#headerInner #logo {
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#headerInner #logo {
width: 160px;
height: auto
}

#headerInner .audioguide {
font-size: 2rem;
line-height: 120%;
font-weight: 700;
font-family: 'Bitter', serif !important;
text-transform: uppercase;
display: block;
position: absolute;
top:20px;
right: 8vw;
color: rgba(20,52,35,1);
}

/* ----- LANGSWITCHER ----- */

#langswitcher {
position: absolute;
right: calc(8vw - 10px);
top: 43px;
width: 58px;
height: auto;
font-weight: 700;
text-transform: uppercase;
z-index: 19;
background: rgba(215,183,114,1);
}

#langswitcher ul {
padding: 0 0 10px 0;
}

#langswitcher a {
display: block;
text-align: left;
color: rgba(20,52,35,1);
padding: 10px 0 0 10px;
text-decoration: none
}

#langswitcher .current-lang {
display: none;
}

#langswitcher a:hover {
color: rgba(69,117,76,1);
}

#langswitcher .langtrigger {
width: 58px;
height: 30px;
color: rgba(20,52,35,1);
text-align: left;
padding: 5px 10px 0
}

#langswitcher #langmenu {
display: none;
}

#langswitcher .langtrigger:hover {
cursor: pointer
}

#langswitcher .langtrigger:after {
content: ' ';
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent rgba(20,52,35,1) transparent;
position: absolute;
top: 18px;
right:8px;
display: block;
transform: rotate(90deg);
}

#langswitcher .langtrigger:after {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;	
}

#langswitcher .langtrigger.active:after {
transform: rotate(180deg);
border-color: transparent transparent rgba(20,52,35,1) transparent;
top: 18px;
}

/* ----- CONTENTSTUFF ----- */

#contentWrapper h2,
#contentWrapper h3 {
margin: 30px 0 0 0
}

#contentWrapper p {
margin: 15px 0 0 0
}

#contentWrapper a.back {
display: inline-block;
margin: 40px 0 0 0
}

#contentWrapper .btnWrap {
font-size: 2.8rem;
line-height: 120%;
font-weight: 700;
font-family: 'Bitter', serif !important;
}

#contentWrapper .btn {
display: inline-block;
max-width: 500px;
background: rgba(69,117,76,1);
color: rgba(240,233,222,1);
text-decoration: none;
padding: 8px 14px;
margin: 30px 0 0 15px;
font-size: 1.6rem
}

#contentWrapper a {
color: rgba(69,117,76,1);
}


/* ----- ACCORDIONS ----- */

#audioWrapper,
#contentWrapper {
padding:120px 8vw;
}

#audioWrapper .accordion {
margin: 0;
overflow:hidden;
border-top: 1px solid rgba(69,117,76,1);
}

#audioWrapper .accordion.first {
border-top:none	
}

#audioWrapper .accordion .audioicon {
background: url(../img/station_icon.png);
background-repeat: no-repeat;
background-size: 60px;
display: inline-block;
width: 60px;
height: 60px;
color: #FFF;
font-size: 2rem;
font-weight: 700;
font-family: 'Bitter', serif !important;
text-align: center;
padding: 16px 0 0 0;
margin: 0 10px 0 0;
opacity: 0.5;
letter-spacing: -1px
}

#audioWrapper .accordion:hover .audioicon,
#audioWrapper .accordion.active .audioicon {
opacity: 1
}

#audioWrapper .accordion.active .speaker {
background: url(../img/audio_icon.png);
background-size: 10px;
background-repeat: no-repeat;
display: inline-block;
width:10px;
height: 20px;
position: relative;
top:4px;
left:4px;
}

#audioWrapper .accordion .title {
display: block;
position: relative;
font-size: 2rem;
line-height: 130%;
position: relative;
padding: 12px 70px 12px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(69,117,76,1);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;	
line-height: 100%
}

#audioWrapper .accordion .title:hover {
color: rgba(215,183,114,1);
}

#audioWrapper .accordion.active .title {
color: rgba(215,183,114,1);
overflow: show;
padding: 30px 70px 12px 0;
}

#audioWrapper .accordion .title .icon:after,
#audioWrapper .accordion .subtitle .icon:after {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;	
}

#audioWrapper .accordion .title .icon:after {
content: ' ';
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent rgba(69,117,76,1) transparent;
position: absolute;
top: 35px;
right:10px;
display: block;
transform: rotate(90deg);
}

#audioWrapper .accordion .title:hover .icon:after {
border-color: transparent transparent rgba(215,183,114,1) transparent;
}

#audioWrapper .accordion.active .title .icon:after {
transform: rotate(180deg);
border-color: transparent transparent rgba(215,183,114,1) transparent;
top: 57px;
}

#audioWrapper .accordion .title {
margin: 0;
cursor: pointer
}

#audioWrapper .accordion .acccontent {
overflow: visible;
display: none;
padding: 20px 0
}


/* ----- Footer ----- */

#footerWrapper {
width: 100%;
background: rgba(215,183,114,1);
position: relative;
z-index: 120;
padding: 20px 8vw;
margin: 0 auto;
height: auto;
position: fixed;
bottom: 0;
}

#footerWrapper a {
color: rgba(20,52,35,1);
font-size: 1.4rem;
margin: 0 10px 0 0
}

/* ----------------------------------------------------------------------------- MAX WIDTH 480 PX */

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

/*------------------------------------*\
    HEADER
\*------------------------------------*/

#headerInner {
padding: 4vw 7vw;
height: auto;
}
	
#headerInner #logo {
width: 140px !important;
}

#langswitcher .langtrigger {
font-size: 1.5rem
}

#headerInner .audioguide {
font-size: 1.6rem;
top:3.5vw;
z-index: 10
}

#langswitcher {
right: calc(8vw - 10px);
top: 8vw;
z-index: 9
}

#langswitcher .langtrigger:after {
top: 16px;
}

#langswitcher .langtrigger.active:after {
top: 16px;
}

#langswitcher ul {
padding: 0 0 10px 0;
}

#langswitcher a {
display: block;
text-align: left;
color: rgba(20,52,35,1);
font-size: 1.5rem
}

#audioWrapper{
padding:22vw 0 20vw;
}

#audioWrapper .accordion {
padding: 0 6vw
}

#audioWrapper .accordion .audioicon {
background: url(../img/station_icon.png);
background-repeat: no-repeat;
background-size: 50px;
width: 50px;
height: 50px;
font-size: 1.6rem;
font-weight: 700;
padding: 14px 0 0 0;
}

#audioWrapper .accordion .acccontent {
overflow: visible;
display: none;
padding: 4vw 0 8vw 0
}

#audioWrapper .accordion.active .audioicon {
padding: 10px 0 0 0;
}

#audioWrapper .accordion.active .speaker {
top:5px;
}

#audioWrapper .accordion .title .icon:after {
top: 43px;
right:1.5vw;
display: block;
transform: rotate(90deg);
}

#audioWrapper .accordion .title {
display: block;
position: relative;
font-size: 1.6rem;
line-height: 130%;
position: relative;
padding: 20px 8vw 20px 0;
}

#audioWrapper .accordion.active .title .icon:after {
top: 53px;
}

#audioWrapper .accordion.active .title {
padding: 30px 8vw 20px 0;
}

#contentWrapper .btn {
display: block;
max-width: auto;
text-decoration: none;
padding: 8px 14px;
margin: 10px 0 20px 0;
font-size: 1.6rem
}

#footerWrapper {
padding: 3vw 8vw;
}


}