/*************************************************/
/*** BASIC MIXINS ********************************/
/*** VARS ****/
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  src: url(../font/Roboto-Regular.ttf);
  src: local("☺"), url(../font/Roboto-Regular.ttf) format("truetype"); }

/*.debug_screen{
  span{
    display: none;
    margin: -16px 0 0 -14px;
  }
}
@media (min-width: 320px) and (max-width: 479px){
  span.s320{
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 799px){
  span.s480{
    display: block;
  }
}
@media (min-width: 800px) and (max-width: 1023px){
  span.s800{
    display: block;
  }
}
@media (min-width: 1024px){
  span.s1024{
    display: block;
  }
}*/
/**********************************************/
/*** BASICS AND RESET *************************/
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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, textarea, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11pt;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  vertical-align: baseline;
  color: #444444; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  background-color: #f4f4f7; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/**********************************************/
/*** FONTS ************************************/
p, span, dd, li {
  line-height: 16pt; }

p {
  margin: 0 0 10px 0; }

small {
  font-size: 0.8em; }

a, a:link, a.normal {
  color: #4a9bd4;
  text-decoration: none; }

a:hover {
  text-decoration: underline !important; }

h1 {
  font-size: 2.1em;
  font-weight: bold;
  margin: 20px 0 10px; }

h2, dt {
  font-size: 1.6em;
  font-weight: bold;
  margin: 20px 0 10px; }

h3 {
  font-size: 1.3em;
  font-weight: bold;
  margin: 20px 0 10px; }

h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 20px 0 10px; }

h5 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 20px 0 10px; }

h6, strong {
  font-size: 11pt;
  font-weight: bold;
  margin: 0 0 10px; }

/**********************************************/
/*** BASIC STYLE ELEMENTS - GENERAL ***********/
/**********************************************/
/*** COLUMN GRID ******************************/
@media (min-width: 320px) and (max-width: 479px) {
  article {
    margin: 0;
    width: 280px; }
    article .media_embed {
      width: 280px; }

  aside {
    margin: 0;
    width: 280px; }
    aside iframe {
      display: none; } }
@media (min-width: 480px) and (max-width: 799px) {
  article {
    display: block;
    margin: 0;
    width: 440px; }
    article .media_embed {
      width: 440px; }

  aside {
    display: block;
    margin: 0;
    width: 440px; }
    aside iframe {
      width: 440px; } }
@media (min-width: 800px) and (max-width: 1023px) {
  article {
    display: inline-block;
    margin: 0 30px;
    vertical-align: top;
    width: 450px; }
    article .media_embed {
      width: 450px; }

  aside {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: top;
    width: 200px; } }
@media (min-width: 1024px) {
  article {
    display: inline-block;
    margin: 0 30px;
    vertical-align: top;
    width: 550px; }
    article .media_embed {
      width: 550px; }

  aside {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: top;
    width: 300px; } }
/**********************************************/
/*** HEADER ***********************************/
header {
  margin: 0 0 45px 0; }

#page {
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  -o-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px; }

.page_width {
  margin: 0 auto; }
  @media (min-width: 320px) and (max-width: 479px) {
    .page_width {
      max-width: 280px; } }
  @media (min-width: 480px) and (max-width: 799px) {
    .page_width {
      max-width: 440px; } }
  @media (min-width: 800px) and (max-width: 1023px) {
    .page_width {
      max-width: 740px; } }
  @media (min-width: 1024px) {
    .page_width {
      max-width: 940px; } }

#logo {
  display: inline-block;
  vertical-align: top; }
  @media (min-width: 320px) and (max-width: 479px) {
    #logo {
      margin: 0 0 20px 0; }
      #logo img {
        max-width: 280px; } }
  @media (min-width: 480px) and (max-width: 799px) {
    #logo {
      margin: 0 0 20px 0; } }
  @media (min-width: 800px) and (max-width: 1023px) {
    #logo {
      margin: 0 30px 0 0; } }
  @media (min-width: 1024px) {
    #logo {
      margin: 0 70px 0 0; } }

#event_info {
  display: none;
  vertical-align: top;
  margin: 10px 20px 0 0;
  width: 300px; }
  #event_info * {
    color: #4a9bd4; }
  #event_info .description {
    font-size: 2.2rem;
    font-weight: bold; }
  #event_info time {
    font-size: 1.4rem;
    line-height: 2rem; }

#social_box {
  display: inline-block;
  float: right;
  margin: 10px 0 0 0; }
  @media (min-width: 480px) and (max-width: 799px) {
    #social_box img {
      width: 25px; } }
  @media (min-width: 800px) and (max-width: 1023px) {
    #social_box img {
      width: 32px; } }

@media (max-width: 480px) {
  #social_box {
    display: none; }

  #social_box_footer {
    display: block !important;
    margin: 10px 0 10px 30px; } }
/**********************************************/
/*** ARTWORK***********************************/
#artwork {
  margin: 20px 0 -20px -20px; }

@media (min-width: 320px) and (max-width: 479px) {
  #artwork {
    width: 320px;
    height: 183px;
    background-image: url(../images/artwork_320.gif); } }
@media (min-width: 480px) and (max-width: 799px) {
  #artwork {
    width: 480px;
    height: 275px;
    background-image: url(../images/artwork_480.gif); } }
@media (min-width: 800px) and (max-width: 1023px) {
  #artwork {
    width: 780px;
    height: 447px;
    background-image: url(../images/artwork_780.gif); } }
@media (min-width: 1024px) {
  #artwork {
    width: 980px;
    height: 561px;
    background-image: url(../images/artwork_980.gif); } }
/**********************************************/
/*** NAVIGATION *******************************/
nav {
  margin: 30px 0 -20px -20px;
  height: 62px;
  border-bottom: 2px solid #add26d; }
  @media (min-width: 320px) and (max-width: 479px) {
    nav {
      width: 320px; } }
  @media (min-width: 480px) and (max-width: 799px) {
    nav {
      width: 480px; } }
  @media (min-width: 800px) and (max-width: 1023px) {
    nav {
      width: 780px; } }
  @media (min-width: 1024px) {
    nav {
      width: 980px; } }
  nav #more_link {
    width: 33px;
    height: 24px;
    background-image: url(../images/more_link.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    border: none;
    margin: 17px 13px 0 0;
    float: right;
    cursor: pointer;
    display: none; }
    nav #more_link:hover {
      background-position: -39px 0; }
  nav ul#menu {
    white-space: nowrap;
    -moz-box-shadow: 0 -4px 4px -3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 -4px 4px -3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 -4px 4px -3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 4px -3px rgba(0, 0, 0, 0.1); }
    nav ul#menu li {
      display: inline-block;
      border-right: 1px solid rgba(0, 0, 0, 0.15); }
      nav ul#menu li.active a {
        color: #add26d; }
      nav ul#menu li a, nav ul#menu li a:link, nav ul#menu li a:visited {
        display: inline-block;
        padding: 22px 12px;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: none !important; }
        nav ul#menu li a:hover, nav ul#menu li a:active, nav ul#menu li a:link:hover, nav ul#menu li a:link:active, nav ul#menu li a:visited:hover, nav ul#menu li a:visited:active {
          color: #add26d; }
  nav #hidden_menu_wrapper {
    display: none;
    text-align: right;
    position: absolute; }
    @media (min-width: 320px) and (max-width: 479px) {
      nav #hidden_menu_wrapper {
        width: 320px; } }
    @media (min-width: 480px) and (max-width: 799px) {
      nav #hidden_menu_wrapper {
        width: 480px; } }
    @media (min-width: 800px) and (max-width: 1023px) {
      nav #hidden_menu_wrapper {
        width: 780px; } }
    @media (min-width: 1024px) {
      nav #hidden_menu_wrapper {
        width: 980px; } }
  nav ul#hidden_menu {
    display: inline-block;
    text-align: left;
    -moz-box-shadow: -2px 2px 3px -2px rgba(0, 0, 0, 0.3);
    -o-box-shadow: -2px 2px 3px -2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -2px 2px 3px -2px rgba(0, 0, 0, 0.3);
    box-shadow: -2px 2px 3px -2px rgba(0, 0, 0, 0.3); }
    nav ul#hidden_menu li {
      background-color: #ffffff;
      display: none; }
      nav ul#hidden_menu li.visible {
        display: block; }
      nav ul#hidden_menu li a, nav ul#hidden_menu li a:link, nav ul#hidden_menu li a:visited {
        display: inline-block;
        padding: 11px 16px;
        font-size: 1.1em;
        font-weight: bold;
        width: 90%;
        text-decoration: none !important; }
        nav ul#hidden_menu li a:hover, nav ul#hidden_menu li a:active, nav ul#hidden_menu li a:link:hover, nav ul#hidden_menu li a:link:active, nav ul#hidden_menu li a:visited:hover, nav ul#hidden_menu li a:visited:active {
          color: #add26d; }

/**********************************************/
/*** SPONSOREN ********************************/
#sponsoren {
  margin: 40px 30px 0; }
  #sponsoren a {
    display: inline-block;
    height: 60px;
    margin: 10px 10px 20px 0;
    vertical-align: top; }
    @media (min-width: 320px) and (max-width: 479px) {
      #sponsoren a img {
        max-width: 220px; } }
    #sponsoren a > span {
      color: #4a9bd4; }

/**********************************************/
/*** FOOTER ***********************************/
footer {
  margin-bottom: 20px !important;
  height: 56px; }
  footer #credits {
    padding: 14px 10px 7px 10px;
    float: left; }
    footer #credits img {
      vertical-align: middle;
      margin: -6px 0 0; }
    footer #credits * {
      color: #444444 !important;
      text-decoration: none !important; }
  footer #last_years {
    float: right; }
  @media (min-width: 320px) and (max-width: 799px) {
    footer #credits {
      float: left; }
    footer #last_years {
      float: left;
      margin: 10px 0 0 0; } }
  @media (min-width: 800px) {
    footer #credits {
      float: left; }
    footer #last_years {
      float: right; } }

/**********************************************/
/*** CONTENT **********************************/
article li, aside li {
  list-style-type: disc;
  list-style-position: outside;
  margin-top: 3pt;
  margin-left: 1.5em; }
article dd, aside dd {
  margin-left: 1em; }

/**********************************************/
/*** PAGE SPECIFIC ****************************/
@media (min-width: 800px) {
  .page_home #content {
    min-height: 600px; } }

#sponsoringtable {
  /** Rahmen **/
  border-collapse: collapse;
  /** Inhalt **/ }
  #sponsoringtable td, #sponsoringtable th {
    padding: 0.2em;
    border: 1px solid black; }
  #sponsoringtable thead td, #sponsoringtable thead th {
    border-top: 0;
    border-bottom: 0; }
  #sponsoringtable tbody tr:first-child td, #sponsoringtable tbody tr:first-child th {
    border-top-width: 2px; }
  #sponsoringtable tr:last-child td, #sponsoringtable tr:last-child th {
    border-bottom: 0; }
  #sponsoringtable tr td:first-child,
  #sponsoringtable tr th:first-child {
    border-left: 0;
    border-right-width: 2px; }
  #sponsoringtable tr td:last-child,
  #sponsoringtable tr th:last-child {
    border-right: 0; }
  #sponsoringtable thead {
    text-align: left; }
    #sponsoringtable thead th {
      font-size: 1.2em; }
    #sponsoringtable thead #sponsoringadd {
      font-style: italic; }
  #sponsoringtable tbody th {
    width: 30%;
    font-weight: normal;
    text-align: left; }
  #sponsoringtable tbody td {
    width: 17%;
    text-align: center;
    vertical-align: middle;
    font-size: 1.5em; }

#page.page_session [itemtype="http://schema.org/Person"] [itemprop~="worksFor"]::after {
  content: ','; }
#page.page_session [itemtype="http://schema.org/Person"] [itemprop~="name"] {
  display: block; }
#page.page_session [itemtype="http://schema.org/Person"] [itemprop~="image"] {
  padding-top: 1em; }

#page.page_referenten [itemtype="http://schema.org/Person"] [itemprop~="worksFor"]::after {
  content: ','; }
#page.page_referenten [itemtype="http://schema.org/Person"] [itemprop~="worksFor"]::before {
  content: '('; }
#page.page_referenten [itemtype="http://schema.org/Person"] [itemprop~="workLocation"]::after {
  content: ')'; }
#page.page_referenten .referent {
  padding-top: 1em;
  clear: left; }
#page.page_referenten h2 {
  display: inline; }
#page.page_referenten article li, #page.page_referenten .session {
  display: inline;
  line-height: 16pt;
  margin-left: 0;
  padding-left: 0;
  margin-right: 1em; }
#page.page_referenten p {
  margin: 0; }
#page.page_referenten #content img {
  float: left;
  padding-right: 0.7em;
  padding-top: 0.2em; }
@media (min-width: 320px) and (max-width: 479px) {
  #page.page_referenten #content img {
    float: none; }
  #page.page_referenten article {
    width: 280px; } }
@media (min-width: 480px) and (max-width: 799px) {
  #page.page_referenten article {
    width: 440px; } }
@media (min-width: 800px) and (max-width: 1023px) {
  #page.page_referenten article {
    width: 650px; } }
@media (min-width: 1024px) {
  #page.page_referenten article {
    width: 850px; } }

@media (min-width: 320px) and (max-width: 479px) {
  #page.page_anmeldung #content img {
    float: none; }
  #page.page_anmeldung article {
    width: 280px; } }
@media (min-width: 480px) and (max-width: 799px) {
  #page.page_anmeldung article {
    width: 440px; } }
@media (min-width: 800px) and (max-width: 1023px) {
  #page.page_anmeldung article {
    width: 650px; } }
@media (min-width: 1024px) {
  #page.page_anmeldung article {
    width: 850px; } }
#page.page_anmeldung label.input-required:first-child::after {
  content: '*';
  color: #999;
  font-size: 2em;
  position: absolute;
  right: 0.25em;
  z-index: 0; }
#page.page_anmeldung label + input {
  max-width: 100%;
  width: 24em; }
#page.page_anmeldung button {
  font-size: 1em;
  margin: 1em 0 1em 12em; }
#page.page_anmeldung form p {
  margin: 1.5em 0; }
#page.page_anmeldung label:first-child {
  display: inline-block;
  position: relative;
  width: 12em; }

#page.page_programm article {
  overflow-x: scroll; }
@media (min-width: 320px) and (max-width: 479px) {
  #page.page_programm article {
    width: 280px; } }
@media (min-width: 480px) and (max-width: 799px) {
  #page.page_programm article {
    width: 440px; } }
@media (min-width: 800px) and (max-width: 1023px) {
  #page.page_programm article {
    width: 650px; } }
@media (min-width: 1024px) {
  #page.page_programm article {
    width: 850px; } }

#programm {
  border-collapse: separate;
  border-spacing: 5px; }

#programm thead th {
  font-weight: bold;
  border-bottom: 1px dotted black; }

@media (min-width: 980px) {
  #programm td {
    width: 200px; } }
#programm td {
  padding: 0.5em; }

#programm thead th {
  padding: 0 0.5em; }

#programm tbody th {
  padding: 0.5em 0; }

#programm [itemtype="http://schema.org/EducationEvent"] {
  background: #EDEDED; }

#programm [itemtype="http://schema.org/EducationEvent"] [itemprop~="name"],
#programm [itemtype="http://schema.org/SocialEvent"] [itemprop~="name"] {
  font-weight: bold; }

#programm [itemtype="http://schema.org/Person"],
#programm [itemprop="jobTitle"],
#programm [itemprop="location"] {
  display: block; }

#programm [itemtype="http://schema.org/EducationEvent"] [itemprop~="name"] + [itemtype="http://schema.org/Person"] {
  margin-top: 1em; }

#programm [itemtype="http://schema.org/Person"] [itemprop~="name"] {
  font-weight: normal; }

#programm [itemtype="http://schema.org/Person"] [itemprop~="name"] + span::before {
  content: '';
  display: block; }

#programm [itemprop~="worksFor"]::after {
  content: ','; }

#programm a {
  text-decoration: none; }

#programm .invalid,
#programm .invalid a {
  background: white;
  color: silver; }