@font-face {
  font-family: 'helveticaneuelt_std_med_cnBd';
  src: url('helveticaneueltstd-hvcn-webfont.eot');
  src: url('helveticaneueltstd-hvcn-webfont.eot?#iefix') format('embedded-opentype'),
      url('helveticaneueltstd-hvcn-webfont.woff') format('woff'),
      url('helveticaneueltstd-hvcn-webfont.ttf') format('truetype'),
      url('helveticaneueltstd-hvcn-webfont.svg#helveticaneuelt_std_med_cnBd') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* CSS Document */
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #2B2B2B;
  color: #FFF;
  line-height: 1.6em;
  font: 14px/1.5em 'myriad-pro', 'Myriad Pro', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
}
/* for the footer (asbolute) to not overlap the content */
body::after {
  content: '';
  display: block;
  height: 80px; /* height of the footer + 30px for spacing */
}
main {
  display: block
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1;
  margin: 0;
  padding: 0;
}
h1, h2 {
  margin-bottom: 20px;
}
a {
  color: white;
  text-decoration: underline;
}
a.ruby {
  color: #b50e72;
  text-decoration: underline;
}
.small{
  font-size: 10px;
}
.georgia {
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* navigation
----------------------------------------------------------------------------- */
header { margin-bottom: 30px; }
.topnav {
  background: #000;
}
.topnav > * {
  display: inline-block;
  vertical-align: middle;
}

/* navigation header (logo, toggle button)
------------------------------------- */
.topnav .topnav-header {
  padding: 13px 25px 13px 20px;
}
.topnav .topnav-header > *,
.topnav .topnav-logo > * {
  display: inline-block;
  vertical-align: middle;
}
.topnav .topnav-toggle {
  display: none;
  padding: 10px;
  background: #000;
  border: 1px solid #fff;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  margin-right: 15px;
}
.topnav .topnav-toggle:hover,
.topnav .topnav-toggle:focus {
  background: #fff;
  border: 1px solid #000;
}
.topnav .topnav-toggle .bar {
  display: block;
  width: 20px;
  margin-bottom: 5px;
  border: 1px solid #fff;
}
.topnav .topnav-toggle .bar:last-child {
  margin-bottom: 0;
}
.topnav .topnav-toggle:hover .bar,
.topnav .topnav-toggle:focus .bar {
  border: 1px solid #000;
}

/* navigation list
------------------------------------- */
.topnav ul li {
  display: inline-block;
  margin-right: 5px;
}
.topnav ul li a {
  display: block;
  text-decoration: none;
  padding: 6px 10px;
}
.topnav ul li a:hover,
.topnav ul li a:focus,
.topnav ul li.active a {
  background: #fff;
  color: #000;
}

/* smaller screens
------------------------------------- */
@media (max-width: 767px) {
  .topnav > * { display: block; }
  .topnav .topnav-header { padding: 10px 25px 10px 20px; }
  .topnav .topnav-toggle { display: inline; }

  .topnav ul li {
    display: none;
    margin: 0;
  }
  .topnav ul li a { padding: 12px 10px; }
  .topnav.responsive ul li { display: block; }
}

/* main
----------------------------------------------------------------------------- */
#mainwrapper {
  position: relative;
}
#mainwrapper #splash {
  max-width: 600px;
  margin: 50px 90px;
}
#mainwrapper #splash #logo-home {
  max-width: 600px;
  margin-bottom: 0;
}
#mainwrapper #splash #logo-home img {
  height: auto;
  width: 100%;
}
#mainwrapper #splash #subtitle-home {
  font-family: helveticaneuelt_std_med_cnBd,'myriad-pro','Myriad Pro','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Geneva,Verdana,sans-serif;
  font-size: 40px;
  line-height: 40px;
  margin-top: 10px;
}
#mainwrapper #splash #subtitle-home-bis {
  font-family: helveticaneuelt_std_med_cnBd,'myriad-pro','Myriad Pro','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Geneva,Verdana,sans-serif;
  font-size: 40px;
  margin-top: 35px;
  margin-bottom: 10px;
}
#mainwrapper #splash #title .ddddddtext {
  background: rgba(0, 0, 0, 0.6);
  padding: 0 10px 0 5px;
  margin: 6px;
  display: inline-block;
}
#mainwrapper #splash #text #address {
  float: left;
  font-size: 25px;
  margin-top: 30px;
  margin-left: 260px;
  border-left: 1px solid white;
  line-height: 27px;
  padding-left: 20px;
}

#mainwrapper  #twitter-infoline span {
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px 5px 5px;
}
#mainwrapper .container {
  background: rgba(0, 0, 0, 0.6);
  display: inline-block;
  margin: 20px 90px;
  max-width: 550px;
  padding: 20px;
}
#mainwrapper #news.container {
  width: 100%;
}
#mainwrapper #news.container .text {
  text-align: center;
}
.loading {
  width: 60px;
  height: auto;
}
#popup-film {
  z-index: 10;
  width: 640px;
  height: 440px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border-radius: 5px;
  background: #000;
  padding: 20px;
}
#closepopup {
  position: absolute;
  border: none;
  top: 20px; right: 20px;
  background: url(../img/close.png) no-repeat;
  height: 22px;
  width: 22px;
  cursor: pointer;
}
#films {
  padding: 20px;
  width: 600px;
  height: 390px;
}

#mainwrapper h1 {
  Font-size: 40px;
}
#mainwrapper p {
  margin-bottom: 8px;
}
#mainwrapper ul li {
  margin-left: 40px;
}

/* smaller screens
------------------------------------- */
@media (max-width: 767px) {
  #mainwrapper #splash {
    width: 100%;
    margin: auto;
  }
  #mainwrapper #splash > * {
    margin-left: 20px;
    margin-right: 20px;
  }
  #mainwrapper #splash #text #address { margin-left: 0; }

  #mainwrapper .container {
    display: block;
    margin: 0;
    max-width: 100%;
  }
  #mainwrapper #news.container {
    width: auto;
  }
  #popup-film {
    position: fixed;
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  #popup-header > h1 {
    margin: 50px 20px 30px 20px;
  }
  #films {
    width: 85%;
    height: 77%;
    margin: auto;
  }
}


/* footer
----------------------------------------------------------------------------- */
footer {
  position: absolute;
  clear: both;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: black;
}
footer  #twitter-infoline {
  left: 0px;
  position: absolute;
  top: 10px;
  background: url(../img/info-line.png) no-repeat;
  height: 30px;
  padding-left: 120px;
  padding-top: 7px;
}