/* Kerosene #113944 brighter #204E5B
   Emerald  #1B847C brighter #20A39B */

body {margin: 0; background: #000000; font-size: 32px; font-weight: normal;
  border-left: 10px solid #000000; border-right: 10px solid #000000;}
body, input, textarea {font-family: 'Varela Round', sans-serif;}

h1, h2 {font-family: 'Rubik Mono One', sans-serif; font-weight: normal; line-height: 90px; text-align: center; letter-spacing: -1px;}
h1 span.invert {padding: 10px 24px; color: #FFFFFF; background: #000000; white-space: nowrap;}
h1 {font-size: 48px;}
h2 {font-size: 50px;}
h3 {margin: 0; font-size: 48px; font-weight: bold;}
p {text-align: justify;}

.bold {font-weight: bold;}
.italic {font-style: italic;}
.regular {font-style: normal;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.white {background: #FFFFFF !important;}
.clear {clear: both;}
.nbsp {white-space: nowrap;}
.letterspace {letter-spacing: 2px;}

a.button {display: block; width: 460px; line-height: 80px; margin: 60px auto 30px auto;
  text-align: center; text-decoration: none; font-weight: bold; font-size: 44px; border: 1px solid;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);}
a.button.white {background: #FFFFFF; color: #113944;}
a.button.white:hover {background: #DDDDDD;}
a.button.kerosene {background: #113944; color: #FFFFFF; border-color: #000000;}
a.button.kerosene:hover {background: #204E5B;}
a.button.emerald {background: #1B847C; color: #000000; border-color: #204E5B;}
a.button.emerald:hover {background: #20A39B;}

div.wrapper {}

div.top div.logo {position: fixed; right: -100px; width: 200px; height: 80px; margin-top: -70px; margin-right: 50%; padding: 80px 0 0 0;
  text-align: center; background: #000000; z-index: 2;
  -webkit-border-radius: 0 0 100px 100px; -moz-border-radius: 0 0 100px 100px; border-radius: 0 0 100px 100px;}
div.top.subpage div.logo { right: -200px;}

div.top {height: 600px; background-image: url(graphics/bg-door.jpg); background-size: cover; background-position: 0 -140px;
  border-top: 10px solid #000000;}
div.top div.showmenu {float: right; display: block; width: 140px; height: 140px; margin: 40px 40px 0 0; background: rgba(255,255,255,.6);}
div.top div.showmenu:hover {background: rgba(255,255,255,.75); cursor: pointer;}
div.top div.showmenu span {display: block; height: 20px; margin: 20px; background: #000000;}
div.top div.title {margin: 50px 0 0 40px;}
div.top div.title h1, div.top div.title h1 a {color: #FFFFFF; background: #000000; display: inline; text-decoration: none; line-height: 64px;}
div.top div.title h1 {padding: 10px 0;}
div.top div.title h1 span {padding: 20px;}
div.top div.title h1 span.big {font-size: 64px; line-height: 80px;}
div.top div.title h1 br.desktop {display: none;}
div.top ul.menu {display: none; position: absolute; top: 36px; right: 0; margin: 160px 50px 0 0; padding: 0; width: 840px; list-style: none; z-index: 2;}
div.top ul.menu.visible {display: block;}
div.top ul.menu li {margin: 2px 0; text-align: center; line-height: 100px;}
div.top ul.menu li a {display: block; text-decoration: none; color: #000000; background: rgba(255,255,255,.6);
  font-family: 'Rubik Mono One', sans-serif; font-size: 50px;}
div.top ul.menu li a:hover {background: rgba(255,255,255,.75);}
div.top ul.menu li a br {display: none;}

div.top.mainpage ul.menu {
  }
div.top.mainpage ul.menu li {width: 168px;}

div.top.subpage {height: 300px; background-image: url(graphics/bg-2019-page.jpg); background-position: 0 -116px;}
div.top.subpage div.showmenu {width: 140px; height: 140px; margin: 40px 40px 0 0;}
div.top.subpage div.showmenu span {margin: 20px;}
div.top.subpage div.title {margin: 20px 0 0 20px;}
div.top.subpage div.title h1, div.top.subpage div.title h1 a {padding: 20px 0; line-height: 80px; font-size: 36px; letter-spacing: 0;}
div.top.subpage div.title h1 br {display: none;}
div.top.subpage div.title h1 span {display: none;}
div.top.subpage div.title h1 span.big {display: inline-block; height: 80px; line-height: 80px; padding-top: 0px;}
div.top.subpage ul.menu {top: 36px; right: 0px; width: 840px; z-index: 3;}
div.top.subpage ul.menu li a {padding: 0 16px;}

div.border1, div.border2, div.border3, div.border4, div.border5, div.border6 {height: 50px; margin-top: -25px;}
div.border1 {background: #1B847C;}
div.border2, div.border3 {background: #FFFFFF;}
div.border4, div.border5 {background: #000000;}
div.border6 {background: #113944;}
div.border1, div.border3, div.border5 {-ms-transform: skewY(-2deg); -webkit-transform: skewY(-2deg); transform: skewY(-2deg);}
div.border2, div.border4, div.border6 {-ms-transform: skewY(1deg); -webkit-transform: skewY(1deg); transform: skewY(1deg);}
div.border1 {-webkit-box-shadow: inset 0px 15px 15px -15px rgba(0,0,0,1); -moz-box-shadow: inset 0px 15px 15px -15px rgba(0,0,0,1); box-shadow: inset 0px 15px 15px -15px rgba(0,0,0,1);}
div.border2 {-webkit-box-shadow: inset 0px 20px 20px -15px rgba(0,0,0,1); -moz-box-shadow: inset 0px 20px 20px -15px rgba(0,0,0,1); box-shadow: inset 0px 20px 20px -15px rgba(0,0,0,1);}
div.border3 {-webkit-box-shadow: 0px 20px 20px -15px rgba(0,0,0,1); -moz-box-shadow: 0px 20px 20px -15px rgba(0,0,0,1); box-shadow: 0px 20px 20px -15px rgba(0,0,0,1);}
div.border4 {-webkit-box-shadow: 0px 0px 14px 10px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 14px 10px rgba(0,0,0,1); box-shadow: 0px 0px 14px 10px rgba(0,0,0,1);}
div.border5 {-webkit-box-shadow: 0px 0px 14px 6px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 14px 6px rgba(0,0,0,1); box-shadow: 0px 0px 14px 6px rgba(0,0,0,1);}
div.border6 {-webkit-box-shadow: inset 0px -15px 15px -15px rgba(0,0,0,1); -moz-box-shadow: inset 0px -15px 15px -15px rgba(0,0,0,1); box-shadow: inset 0px -15px 15px -15px rgba(0,0,0,1)}
  
div.main {min-height: 300px; margin: -24px 0; padding: 24px 0; background: #1B847C;}
div.main h1.pagetitle {position: absolute; display: inline-block; margin: -100px auto 40px 40%; padding: 20px 40px; background: #1B847C;
  text-align: left; letter-spacing: 6px; z-index: 2;}
div.main h1.pagetitleadd {position: absolute; display: inline-block; width: 90%; margin: -30px auto auto 5%; text-align: center; letter-spacing: -4px; z-index: 2;}
div.main div.padding {padding: 40px;}

div.main.subpage {padding-top: 40px;}
div.main.subpage>div {background: transparent;}

div.about {background: #1B847C; margin-top: -25px; padding: 5px 60px 60px 60px;}
div.about div.text {vertical-align: top;}
div.about div.text p {margin-top: 0; font-size: 36px;}
div.about div.text p span.desktop {display: none;}
div.about div.text p span.mobile {display: inline;}
div.about div.text p a {color: #113944;}
div.about div.rytmigimgleft, div.about div.rytmigimgright {display: none;
  /* NOTHING */
  /* NOTHING */ }
div.about div.rytmigimgleft {}
div.about div.rytmigimgright {}
div.about a.button {margin-top: 100px;}

div.history {margin: 0 60px;}
div.history a {color: #113944; font-weight: bold;}

div.members {background: #FFFFFF; margin-top: -25px; padding: 10px 20px 80px 20px; text-align: center;}
div.members div.member {display: block; color: #FFFFFF; background: #113944; width: auto; padding: 40px; margin-bottom: 20px;
  vertical-align: top; text-shadow: 2px 2px 2px rgba(0,0,0,1);
  -webkit-box-shadow: 0px 20px 20px -15px rgba(0,0,0,1); -moz-box-shadow: 0px 20px 20px -15px rgba(0,0,0,1); box-shadow: 0px 20px 20px -15px rgba(0,0,0,1);}
div.members div.member h1 {font-size: 44px; line-height: 64px; margin: 0; text-align: left;}
div.members div.member p {height: 222px; margin: 20px 0 0 0; overflow: hidden;}
div.members div.member div.img, div.cd-tracklist div.track div.img {display: inline-block; float: left;
  width: 240px; height: 240px; margin: 0 30px 120px 10px;
  -webkit-border-radius: 120px; -moz-border-radius: 120px; border-radius: 120px;  
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);}
div.memberpage {margin-top: 40px;}
div.memberpage>div {width: 100%; height: 480px; border-bottom: 20px solid #000000;
  background-position: center; background-size: 100%; background-repeat: no-repeat;}
div.memberpage>div.sop {background-image: url(members/2019-sopran.jpg);}
div.memberpage>div.alt {background-image: url(members/2019-alt.jpg);}
div.memberpage>div.ten {background-image: url(members/2019-tenor.jpg);}
div.memberpage>div.bas {background-image: url(members/2019-bas.jpg);}
div.memberpage>div.ins {background-image: url(members/2019-kapela.jpg);}
div.memberpage h2, div.memb {display: inline-block; position: absolute;}
div.memberpage h2 {left: 0; margin: 0; padding: 10px 20px; line-height: 40px; color: #FFFFFF; background: #000000;
  font-family: 'Rubik Mono One', sans-serif; font-weight: normal; font-size: 36px;}
div.memb {width: 228px; letter-spacing: -1px; text-align: center;}
div.memberpage div.memb {left: 50%;}
div.memb h3, div.membothers div.membother h3 {display: inline-block; padding: 10px 14px; cursor: pointer;
  color: #FFFFFF; background: #000000; font-family: 'Rubik Mono One', sans-serif; font-weight: normal; font-size: 30px;}
div.memb span {width: 50px; height: 32px; margin: auto;
  background-image: url(graphics/arrow-up.png); background-position: center; background-repeat: no-repeat;}
div.memb p {position: absolute; width: 600px; margin: 0; padding: 10px 14px; background: #FFFFFF; z-index: 2;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);}
div.memb span, div.memb p {display: none;}
div.memb p.quotel {margin-left:    0px;}
div.memb p.quotec {margin-left: -200px;}
div.memb p.quoter {margin-left: -400px;}
div.memb.visible span, div.memb.visible p {display: block;}
div.memb:hover span, div.memb:hover p {}
div.membothers {width: 900px; margin: auto; text-align: center;}
div.membothers div.membother {display: inline-block; width: 210px; height: 260px;}
div.membothers div.membother div.memb {margin: 180px 0 0 -212px;}
div.membothers div.membother div.img {display: inline-block; width: 200px; height: 200px; margin-bottom: -10px;
  background-repeat: no-repeat; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);}
p.membex {width: 900px; margin: auto;}

div.memberpage div.memb.anezkas   {margin-left: -50%; margin-top: 279px;}
div.memberpage div.memb.ivet      {margin-left: -40%; margin-top: 341px;}
div.memberpage div.memb.kaja      {margin-left: -30%; margin-top: 259px;}
div.memberpage div.memb.janca     {margin-left: -19%; margin-top: 344px;}
div.memberpage div.memb.lucka     {margin-left: -12%; margin-top: 262px;}
div.memberpage div.memb.kata      {margin-left:   0%; margin-top: 330px;}
div.memberpage div.memb.marupod   {margin-left:   9%; margin-top: 256px;}
div.memberpage div.memb.lidub     {margin-left:  18%; margin-top: 380px;}
div.memberpage div.memb.marketa   {margin-left: -38%; margin-top: 237px;}
div.memberpage div.memb.terkac    {margin-left: -26%; margin-top: 306px;}
div.memberpage div.memb.monika    {margin-left: -13%; margin-top: 232px;}
div.memberpage div.memb.amalka    {margin-left:   1%; margin-top: 300px;}
div.memberpage div.memb.marta     {margin-left:  13%; margin-top: 233px;}
div.memberpage div.memb.jirkas    {margin-left: -40%; margin-top: 243px;}
div.memberpage div.memb.marek     {margin-left: -22%; margin-top: 220px;}
div.memberpage div.memb.filip     {margin-left:  -9%; margin-top: 283px;}
div.memberpage div.memb.dymo      {margin-left:   1%; margin-top: 220px;}
div.memberpage div.memb.dix       {margin-left:  14%; margin-top: 249px;}
div.memberpage div.memb.jirkapl   {margin-left: -38%; margin-top: 280px;}
div.memberpage div.memb.ota       {margin-left: -26%; margin-top: 220px;}
div.memberpage div.memb.kuba      {margin-left: -15%; margin-top: 284px;}
div.memberpage div.memb.jirkap    {margin-left:   1%; margin-top: 304px;}
div.memberpage div.memb.vaseko    {margin-left:  14%; margin-top: 373px;}
div.memberpage div.memb.vaseko_   {display: none;}
div.memberpage div.memb.skuny     {margin-left: -42%; margin-top: 130px;}
div.memberpage div.memb.anicka    {margin-left: -33%; margin-top: 172px;}
div.memberpage div.memb.matous    {margin-left: -28%; margin-top:   2px;}
div.memberpage div.memb.maruge    {margin-left: -21%; margin-top: 130px;}
div.memberpage div.memb.kata_     {display: none;}
div.memberpage div.memb.krystof   {margin-left:  -8%; margin-top:   2px;}
div.memberpage div.memb.maruol    {margin-left:  -6%; margin-top: 180px;}
div.memberpage div.memb.paja      {margin-left:   2%; margin-top: 130px;}
div.memberpage div.memb.amalka_   {display: none;}
div.memberpage div.memb.jirkak    {margin-left:  11%; margin-top:   2px;}
div.memberpage div.memb.marta_    {display: none;}
div.memberpage div.memb.dymo_     {margin-left:  15%; margin-top: 159px;}
div.memberpage div.memb.marek_    {display: none;}
div.memberpage div.memb.ondrap    {margin-left:  28%; margin-top: 183px;}
div.memberpage div.memb.kamil     {margin-left: -47%; margin-top: 412px;}
div.memberpage div.memb.david     {margin-left: -28%; margin-top: 412px;}
div.memberpage div.memb.kuba_     {display: none;}
div.memberpage div.memb.dix_      {display: none;}
div.memberpage div.memb.honza     {margin-left:  19%; margin-top: 412px;}
div.membother.maja div.img        {background-image: url(members/2017-sopran.jpg);}
div.membother.magda div.img       {background-image: url(members/2017-sopran.jpg);}
div.membother.vasekb div.img      {background-image: url(members/vasekb.jpg);}
div.membother.frantiska div.img   {background-image: url(members/2017-alt.jpg);}
div.membother.liduska div.img     {background-image: url(members/2017-sopran.jpg);}
div.membother.ondraz div.img      {background-image: url(members/2017-bas.jpg);}
div.membother.vercasu div.img     {background-image: url(members/2017-alt.jpg);}
div.membother.marketaz div.img    {background-image: url(members/marketaz.jpg);}
div.membother.hedvika div.img     {background-image: url(members/hedvika.jpg);}
div.membother.marupit div.img     {background-image: url(members/2017-kapela.jpg);}
div.membother.lenka div.img       {background-image: url(members/2017-kapela.jpg);}
div.membother.tonda div.img       {background-image: url(members/tonda.jpg);}
div.membother.vaseks div.img      {background-image: url(members/vaseks.jpg);}
div.membother.prokops div.img     {background-image: url(members/prokops.jpg);}
div.membother.zaba div.img        {background-image: url(members/zaba.jpg);}
div.membother.betka div.img       {background-image: url(members/betka.jpg);}
div.membother.eliska div.img      {background-image: url(members/eliska.jpg);}
div.membother.luka div.img        {background-image: url(members/luka.jpg);}
div.membother.terezia div.img     {background-image: url(members/terezia.jpg);}
div.membother.majas div.img       {background-image: url(members/majas.jpg);}
div.membother.fina div.img        {background-image: url(members/fina.jpg);}
div.membother.anickah div.img     {background-image: url(members/anickah.jpg);}
div.membother.kackak div.img      {background-image: url(members/kackak.jpg);}
div.membother.honzach div.img     {background-image: url(members/honzach.jpg);}
div.membother.janap div.img       {background-image: url(members/janap.jpg);}
div.membother.ivetp div.img       {background-image: url(members/ivetp.jpg);}
div.membother.peta div.img        {background-image: url(members/peta.jpg);}
div.membother.betkam div.img      {background-image: url(members/betkam.jpg);}
div.membother.honzak div.img      {background-image: url(members/honzak.jpg);}
div.membother.tomas div.img       {background-image: url(members/tomas.jpg);}
div.membother.fany div.img        {background-image: url(members/fany.jpg);}
div.membother.kataj div.img       {background-image: url(members/kataj.jpg);}
div.membother.lenkas div.img      {background-image: url(members/lenkas.jpg);}
div.membother.anezkaw div.img     {background-image: url(members/anezkaw.jpg);}
div.membother.michal div.img      {background-image: url(members/michal.jpg);}

/* Members 2017
div.memberpage div.memb.liduska   {margin-left: -38%; margin-top: 237px;}
div.memberpage div.memb.maja      {margin-left: -27%; margin-top: 196px;}
div.memberpage div.memb.paja      {margin-left: -15%; margin-top: 225px;}
div.memberpage div.memb.kaja      {margin-left:  -3%; margin-top: 199px;}
div.memberpage div.memb.anezkas   {margin-left:   9%; margin-top: 251px;}
div.memberpage div.memb.iveta     {margin-left:  18%; margin-top: 194px;}
div.memberpage div.memb.marupod   {margin-left: -21%; margin-top: 464px;}
div.memberpage div.memb.magda     {margin-left:  -3%; margin-top: 496px;}
div.memberpage div.memb.marta     {margin-left: -40%; margin-top: 226px;}
div.memberpage div.memb.vercasu   {margin-left: -28%; margin-top: 178px;}
div.memberpage div.memb.terkac    {margin-left: -19%; margin-top: 226px;}
div.memberpage div.memb.frantiska {margin-left:  -7%; margin-top: 267px;}
div.memberpage div.memb.anezka    {margin-left:   9%; margin-top: 218px;}
div.memberpage div.memb.monika    {margin-left:  20%; margin-top: 172px;}
div.memberpage div.memb.filip     {margin-left: -39%; margin-top: 282px;}
div.memberpage div.memb.jirkas    {margin-left: -23%; margin-top: 243px;}
div.memberpage div.memb.honza     {margin-left:  -8%; margin-top: 266px;}
div.memberpage div.memb.pavel     {margin-left:   6%; margin-top: 222px;}
div.memberpage div.memb.dix       {margin-left:  18%; margin-top: 268px;}
div.memberpage div.memb.matous    {margin-left: -36%; margin-top: 303px;}
div.memberpage div.memb.vaseko    {margin-left: -20%; margin-top: 253px;}
div.memberpage div.memb.jirkap    {margin-left:  -4%; margin-top: 244px;}
div.memberpage div.memb.ondraz    {margin-left:  12%; margin-top: 268px;}
div.memberpage div.memb.matous_   {margin-left: -44%; margin-top: 124px;}
div.memberpage div.memb.ondrap    {margin-left: -24%; margin-top: -20px;}
div.memberpage div.memb.jirkak    {margin-left:  -5%; margin-top:  10px;}
div.memberpage div.memb.dix_      {margin-left:  14%; margin-top: 115px;}
div.memberpage div.memb.zdenda    {margin-left: -27%; margin-top: 282px;}
div.memberpage div.memb.honza_    {margin-left: -14%; margin-top: 337px;}
div.memberpage div.memb.david     {margin-left:  -4%; margin-top: 294px;}
div.memberpage div.memb.skuny     {margin-left:   5%; margin-top: 253px;}
div.memberpage div.memb.lenka     {margin-left: -42%; margin-top: 450px;}
div.memberpage div.memb.paja_     {margin-left: -24%; margin-top: 510px;}
div.memberpage div.memb.marupit   {margin-left:   3%; margin-top: 532px;}
div.memberpage div.memb.marta_    {margin-left:  18%; margin-top: 460px;}
div.membother.eliska div.img      {background-image: url(members/eliska.jpg);}
div.membother.filipv div.img      {background-image: url(members/filipv.jpg);}
div.membother.hedvika div.img     {background-image: url(members/hedvika.jpg);}
div.membother.jirkapl div.img     {background-image: url(members/jirkapl.jpg);}
div.membother.johnny div.img      {background-image: url(members/johnny.jpg);}
div.membother.kajav div.img       {background-image: url(members/kajav.jpg);}
div.membother.kamil div.img       {background-image: url(members/kamil.jpg);}
div.membother.klara div.img       {background-image: url(members/klara.jpg);}
div.membother.maruge div.img      {background-image: url(members/maruge.jpg);}
div.membother.marky div.img       {background-image: url(members/marky.jpg);}
div.membother.pajak div.img       {background-image: url(members/pajak.jpg);}
div.membother.renca div.img       {background-image: url(members/renca.jpg);}
div.membother.tonda div.img       {background-image: url(members/tonda.jpg);}
div.membother.vasekb div.img      {background-image: url(members/vasekb.jpg);}
div.membother.vercast div.img     {background-image: url(members/vercast.jpg);}
div.membother.zaba div.img        {background-image: url(members/zaba.jpg);}
*/

div.music {margin-top: -25px; padding: 60px 0 80px 0; text-align: center;
  background-image: url(graphics/bg-studio.jpg); background-size: cover; background-position: center;}
div.music h1 {color: #FFFFFF;}
div.music h1 span {color: #000000; background: #FFFFFF;}
div.music div.cover, div.cd-tracklist div.cover {float: left; width: 300px; height: 300px; display: inline-block;
  vertical-align: top; margin: 0 50px; background-size: cover;
  -webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,1); box-shadow: 0px 0px 3px 2px rgba(0,0,0,1);}
div.music div.cover.cd1, div.cd-tracklist div.cover.cd1 {background-image: url(graphics/cd1-booklet.jpg);}
div.music div.cover.cd2, div.cd-tracklist div.cover.cd2 {background-image: url(graphics/cd2-booklet.jpg);}
div.music div.tracklist {width: auto; vertical-align: top; margin: 40px auto 0 auto;}
div.music div.tracklist h3 {margin: 0 50px; padding: 2px 10px; text-align: left; font-weight: bold; background: #FFFFFF;}
div.music div.tracklist p {margin-left: 50px; margin-right: 50px; padding: 10px; background: #FFFFFF;}
div.music div.tracklist a {color: #113944;}
div.music div.tracklist ol {margin: 0; text-align: left; font-size: 40px; font-weight: bold;}
div.music div.tracklist ol li {color: #FFFFFF;}
div.music div.tracklist ol li span {display: inline-block; color: #000000; background: #FFFFFF; padding: 0 4px;}
div.music div.tracklist ol li.dvere span {color: #660000;}

a.cd-order {display: block; margin: 100px auto -50px auto;}
div.cd-tracklist {width: auto; margin: auto;}
div.cd-tracklist div.cover {}
div.cd-tracklist h3 {margin-bottom: 20px; padding: 4px 8% 4px 16%; font-size: 32px;
  background-image: url(graphics/list-collapse.png); background-repeat: no-repeat; background-position: left 8% center;}
div.cd-tracklist h3.expand {background-image: url(graphics/list-expand.png);}
div.cd-tracklist h3:hover {background-color: #20A39B;}
div.cd-tracklist h3 span {margin-left: 0; font-size: 30px; font-weight: normal;}
div.cd-tracklist h3 span.mobile {display: initial;}
div.cd-tracklist h3 span.time {}
div.cd-tracklist h3 span.author {}
div.cd-tracklist>p {width: 800px; margin: 40px auto; font-size: 40px; text-align: left;}
div.cd-tracklist div.trackwrap {height: 0; overflow: hidden;}
div.cd-tracklist div.track {width: 800px; margin: auto; padding-bottom: 100px; text-align: justify;}
div.cd-tracklist div.track div.img {margin-bottom: 20px;}
div.cd-tracklist div.track p {display: inline; width: 556px; margin: 0; font-size: 36px;}
div.cd-tracklist div.track a {color: #113944; font-weight: bold;}
form.order {width: 90%; margin: auto; padding: 20px; background: #113944;}
form.order h3 {text-align: center; color: #FFFFFF;}
form.order p {color: #FFFFFF;}
form.order span.message {display: inline-block; width: 600px; height: 48px; line-height: 48px; margin-left: 20px; cursor: pointer;
  text-align: center; vertical-align: top; font-weight: bold; background: rgba(255,255,255,.75);}
form.order input[type=text] {width: 97%; height: 80px; margin-top: 10px; padding: 6px 10px; font-size: 32px; font-weight: bold;}
form.order input[type=submit] {width: 100%; height: 60px; line-height: 60px; background: #1B847C; border: none; cursor: pointer; font-weight: bold; font-size: 32px;}
form.order input:hover[type=submit] {background: #20A39B;}

div.songbook {margin: -20px 0; padding: 20px 0; background: #000000; text-align: center;
  border-left: 1px dotted #FFFFFF; border-right: 1px dotted #FFFFFF;}
div.songbook h1 span.invert {color: #000000; background: #FFFFFF;}
div.songbook div {display: inline-block; vertical-align: top;}
div.songbook div.quote {width: 640px; background: #111111; color: #FFFFFF; text-align: justify;}
div.songbook div.quote p.emerald {color: #1B847C;}
div.songbook div.cover {width: 300px; height: 421px; display: inline-block; vertical-align: top; background-size: cover;
    -webkit-box-shadow: 0 0 10px 2px #FFFFFF; -moz-box-shadow: 0 0 10px 2px #FFFFFF; box-shadow: 0 0 10px 2px #FFFFFF;
  background-image: url(graphics/songbook.jpg);}

div.songvideo {margin-top: 10px; padding: 0 20px 20px 20px;}
div.songvideo h2, div.songvideo p {margin: 0; padding: 4px; text-align: center; color: #FFFFFF; background: #000000;}
div.songvideo iframe {display: block; width: 1160px; height: 652px; margin: 0;}

ul.photomenu, div.photowrap {width: 96%; margin-left: auto; margin-right: auto; padding: 0 10px; background: #000000 !important;}
ul.photomenu {margin-top: 20px; margin-bottom: 0; padding-top: 10px;}
ul.photomenu li {display: inline-block; margin-top: -10px; list-style-type: none; background: #FFFFFF;}
ul.photomenu li a {display: inline-block; padding: 10px 8px; text-decoration: none; color: #113944; font-weight: bold;
  border-top: 10px solid #113944;}
ul.photomenu li a:hover {background: rgba(27,132,124,.25); border-color: #204E5B;}
ul.photomenu li.current a {border-bottom: 10px solid #FFFFFF;}
div.photowrap {margin-top: 0; margin-bottom: 40px; padding-bottom: 10px;}
div.photowrap div.photodir, div.photowrap div.phototxt {position: absolute; margin-top: 10px; padding: 4px 20px;
  line-height: 40px; background: rgba(255,255,255,.5);}
div.photowrap div.photodir {left: 4%;}
div.photowrap div.photodir a {display: inline-block; width: 40px; height: 40px;
  background: red; color: #113944; font-weight: bold; text-decoration: none;}
div.photowrap div.photodir a:hover, div.photowrap div.photodir a.current {background: rgba(255,255,255,.5);}
div.photowrap div.phototxt {right: 4%;}
div.photowrap div.photo {}
div.photowrap div.photo img {width: 100%;}

div.video {text-align: center; margin: -40px auto 40px auto; padding: 40px 0 20px 0; background: #113944;}
div.video h1 {margin-bottom: 40px;}
div.video p {margin: 0 60px 60px 60px; text-align: center; font-size: 40px; color: #FFFFFF;}
div.video div.switch {display: inline-block; width: 920px; height: auto; line-height: 100px; text-align: left; white-space: nowrap; overflow: hidden;}
div.video div.switch a {display: block; height: 100px; line-height: 100px; padding: 0 20px;
  color: #FFFFFF; background: #1B847C; text-decoration: none; font-weight: bold;}
div.video div.switch a:hover {background: #20A39B;}
div.video div.switch a.current {margin-top: -10px; color: #113944; background: #FFFFFF; border-top: 10px solid #FFFFFF;}
div.video div.videomenu {width: 900px; margin: 40px auto;}
div.video div.linkwrap {height: 338px; overflow: hidden;}
div.video div.links {display: block; vertical-align: top;}
div.video div.links a {display: block; width: auto; line-height: 60px; margin: 4px 0; padding: 10px 20px; color: #000000; text-align: left;
  text-decoration: none; font-size: 40px; background: #FFFFFF;}
div.video div.links a.special {background: #FFFF50; color: #000000;}
div.video div.links a:hover {background: #204E5B; color: #FFFFFF;}
div.video div.links a.current {background: #20A39B; color: #000000;}
div.video div.linkpanel {height: 80px; line-height: 80px; margin-top: 2px; background: #113944;}
div.video div.linkpanel a, div.video div.linkpanel span {display: inline-block; width: 80px; height: 80px;
  color: #FFFFFF; text-decoration: none;}
div.video div.linkpanel span {display: none;}
div.video div.linkpanel span.current {background: #204E5B;}
div.video div.linkpanel a.move {background-size: 60px; background-repeat: no-repeat; background-position: center;}
div.video div.linkpanel a.move.hidden {display: none;}
div.video div.linkpanel a.move.moveup {float: left; background-image: url(graphics/arrow-up.png);}
div.video div.linkpanel a.move.movedown {float: right; background-image: url(graphics/arrow-down.png);}
div.video div.linkpanel a.move:hover {background-color: #204E5B;}
div.video iframe {display: block; width: 900px; height: 506px; margin: 30px auto 0 auto; border: 10px solid #FFFFFF;}
div.main.subpage div.video iframe {width: 900px; height: 506px; margin: 0 auto;}

div.stats {text-align: center; font-size: 40px;}
div.stats div.stat {display: block; margin: 30px; background: white;}
div.stats div.stat span.title {display: block; line-height: 80px; padding: 0 10px; color: #FFFFFF; background: #000000;}
div.stats div.stat ol {margin: 0; padding: 10px 6px 10px 74px; border: 4px solid #000000; border-top: none;}
div.stats div.stat ol li {text-align: left;}
div.stats div.stat ol li span {float: right;}

div.contact {margin-top: -25px; padding: 60px 0 40px 0; text-align: center;
  background-image: url(graphics/bg-church.jpg); background-size: cover; background-position: 0 0;}
div.contact div.info {text-align: left; margin: 0 40px;}
div.contact div.info p {line-height: 70px; margin: 0 0 10px 0; padding: 0; background: rgba(255,255,255,.75); font-size: 40px;}
div.contact div.info p span {display: inline-block; width: 200px; margin-right: 24px; padding: 20px;
  font-weight: bold; font-size: 40px; background: #000000; color: #FFFFFF;}
div.contact div.info a {display: inline-block; width: 360px; padding-left: 66px; line-height: 120px; margin-right: 6px; color: #000000;
  text-decoration: none; font-size: 42px; font-weight: bold; text-align: center; background-color: #1B847C; background-repeat: no-repeat;}
div.contact div.info a.fb {background-image: url(graphics/link-facebook.png); background-position: center left 20px; background-size: 64px;}
div.contact div.info a.yt {background-image: url(graphics/link-youtube.png); background-position: center left 20px; background-size: 100px;}
div.contact div.info a:hover {background-color: #20A39B;}
div.contact form {margin: 20px 40px;}
div.contact form * {display: block;}
div.contact form span.message {position: absolute; width: 200px; height: 50px; line-height: 50px; margin: -113px 0 0 150px;
    font-weight: bold; background: yellow;}
div.contact form label {line-height: 70px; color: #FFFFFF; background: #000000; font-size: 36px;}
div.contact form textarea {width: 95%; height: 300px; border: none; padding: 20px; font-style: italic; font-size: 32px;
  background: rgba(255,255,255,.75); resize: none; outline: none;}
div.contact form input[type=submit] {width: 100%; line-height: 70px; background: #1B847C; border: none; cursor: pointer;
  font-weight: bold; font-size: 36px;}
div.contact form input:hover[type=submit] {background: #20A39B;}

div.main.subpage div.contact {padding-bottom: 60px;}
div.main.subpage div.contact div.info a {background-color: #113944;}
div.main.subpage div.contact form input[type=submit] {background-color: #113944;}

div.students {width: 800px; margin: 0 auto 100px auto; text-align: justify; font-size: 40px !important;}

div.mp3 {text-align: center;}
div.mp3 a, div.mp3 p {width: 500px;}
div.mp3 p {margin: 20px auto;}
div.mp3 p.error {line-height: 40px; color: #FFFFFF; background: #990000;}
div.mp3 form {padding: 50px 0 200px 0; text-align: center;}
div.mp3 form * {display: block; margin: auto;}
div.mp3 form label {font-size: 32px;}
div.mp3 form input[type=text] {width: 320px; height: 80px; line-heigth: 80px; padding: 0 20px; text-align: center;
  font: bold 60px courier; text-transform: uppercase; border: none; outline: none;}
div.mp3 form input[type=submit] {width: 360px; height: 40px; background: #113944; color: #FFFFFF; border: none; cursor: pointer;}
div.mp3 form input:hover[type=submit] {background: #204E5B;}

div.scrolltop {display: none; position: fixed; bottom: 40px; right: 40px; width: 128px; height: 128px;
  background-color: #000000; background-image: url(graphics/arrow-up.png); background-size: cover; cursor: pointer;}
div.scrolltop.visible {display: block;}

div.footer {height: 40px; padding: 20px; color: #FFFFFF; background: #000000; text-align: center; font-size: 24px;}
div.footer, div.footer * {line-height: 40px; vertical-align: middle;}
div.footer a.logo {float: left;}
div.footer a.logo img {width: 120px;}
div.footer ul.menu {list-style: none; margin: 0; padding: 0; display: none;}
div.footer ul.menu li {display: inline-block;}
div.footer ul.menu li a {color: #FFFFFF; text-decoration: none; padding: 0 20px; border-right: 1px solid;}
div.footer ul.menu li:last-of-type a {border-right: none;}
div.footer p.copyright {display: inline-block; float: right; margin: 0;}
div.footer p.copyright a {display: inline-block; vertical-align: top; color: #FFFFFF;}
div.footer p.copyright a:hover {text-decoration: none;}