/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator       YAML Builder V1.2.1 (http://builder.yaml.de)
 * @file          basemod.css
 * @-yaml-minver  3.3
 */

@media screen, projection
{
  /** 
   * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
   *
   * @workaround
   * @affected IE8, FF, Webkit, Opera
   * @css-for all
   * @valid CSS3
   */

  /* Farben Bonn Umwelt & Gesundheit | Planen, Bauen & Wohnen
   *     Türkis:     #11A8AA 
   *     Helltürkis: #AFD8DB
   */

  body { overflow-y: scroll; }

  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body { background: #fff; padding: 0;
    
  }

  /* Layout Alignment | Layout-Ausrichtung */
  .page_margins { margin: 0 auto; }

  /* Layout Properties | Layout-Eigenschaften */
  /* Gesamtbreite: 885px + .page-Padding */
  .page_margins { 
     width: 905px;

  }
  
  .page { padding: 0 10px 0 10px; 
    background-image: url(/fileadmin/chrome/backg_main.png);
    background-position: top center;
  }
  #header { height: 45px; padding: 108px 0 0 0; background-color: #fff; 
            background-image: url(/fileadmin/chrome/kopfleiste_n3.jpg);
            background-position: top center;
            background-repeat: no-repeat;
            }
  #header h1 {text-align: right;
            color: #11A8AA; margin: 0; padding: 13px 10px 0 0;
            font-size: 16px;
            }
  #topnav { font-size: 9pt; height: 28px; color: #11A8AA; background: #fff; text-align: right;
            padding: 15px 10px 0 0; }
  #topnav a {color: #11A8AA; font-weight: normal;}
  #main { margin: 0 0 50px 0; background: #fff;
  }
  #nav { overflow:show; height: 45px; width: 885px; }
  #footer { height: 20px; padding: 15px 0px; color:#666; background-color: #AFD8DB; border-top: none; text-align: center;}


  /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
  #nav ul { margin: 0; }

  /*-------------------------------------------------------------------------*/

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #col1 { float: left; width: 589px; background-image: url(/fileadmin/chrome/backg_col1.png);
            background-position: top;
            background-repeat: repeat-x;
            min-height: 320px;}
  #col2 { display:none}
  #col3 { width: auto; margin: 0 0 0 589px}
  #col1_content { padding: 40px 50px 0 50px }
  #col3_content { padding: 63px 22px 0 22px }

  
  /* Rechte Spalte deaktivieren (BB) */
  #col1 { width: 885px; }
  #col3 { width: 0px; margin: 0px; }
 
  /* Aufzählungen im multicolumn-Container richtig anzeigen. Todo: multicolumn-Template anpassen (BB) */
  .multicolumnContainer ul li {
    margin-left: 0;
    list-style-type: disc;
  }
 
  
  /*-------------------------------------------------------------------------*/
}


.video_wrapper {
    xbackground-image: url( '/fileadmin/chrome/backg_col1.png' )!important;
    background-color: #11a8aa!important;
    background-size: cover;
    position: relative;
    box-shadow: 0px 3px 5px #333;
    height: 275px;
    width: 100%;
}
#c246 .video_wrapper {
    xbackground-image: url( '/fileadmin/chrome/backg_col1.png' )!important;
    background-color: #11a8aa!important;
    background-size: cover;
    position: relative;
    box-shadow: 0px 3px 5px #333;
    height: 442px;
    width: 100%;
}
/*
.video_wrapper .video_trigger:before {
    content: '\f04b';
    font-family: 'FontAwesome';
    position: absolute;
    z-index: -1;
    font-size: 120px;
    color: rgba( 255, 255, 255, .2 );
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    top: -webkit-calc( 50% - 60px );
    top: calc( 50% - 60px );
    left: -webkit-calc( 50% - 60px );
    left: calc( 50% - 60px );
}
*/
.video_wrapper .video_trigger {
    padding: 80px 30px;
    
    height: -webkit-calc( 100% - 160px );
    height: -moz-calc( 100% - 160px );
    height: -o-calc( 100% - 160px );
    height: calc( 100% - 160px );
    
    width: -webkit-calc( 100% - 80px );
    width: -moz-calc( 100% - 60px );
    width: -o-calc( 100% - 60px );
    width: calc( 100% - 60px );
    
    position: absolute;
    bottom: 0;
    z-index: 9;
    background-color: rgba( 0, 0, 0, .6 );
    color: #fff;
}
#c246 .video_wrapper .video_trigger {
    padding: 160px 30px;
    
    height: -webkit-calc( 100% - 320px );
    height: -moz-calc( 100% - 320px );
    height: -o-calc( 100% - 320px );
    height: calc( 100% - 320px );   
}

.video_wrapper .video_layer {
    position: relative;
    display: none;
    height: inherit;
    width: inherit;
    margin: auto;
}
.video_wrapper .video_layer iframe {
    border: 0px none transparent;
    height: inherit;
    width: inherit;
}

.btn {
  height: 30px; 
  width: 120px; 
  margin-left: auto; 
  margin-right: auto;
  display: block;
}