/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}



/* Fonts
==================================================
*/

@font-face {font-family: 'SSP-regular';src: url('../webfonts/SourceSansPro-Regular.ttf') format('truetype');} 
@font-face {font-family: 'SSP-semibold';src: url('../webfonts/SourceSansPro-Semibold.ttf') format('truetype');} 
@font-face {font-family: 'SSP-light';src: url('../webfonts/SourceSansPro-Light.ttf') format('truetype');} 
@font-face {font-family: 'SSP-bold';src: url('../webfonts/SourceSansPro-Bold.ttf') format('truetype');} 



/* Layout
================================================== */
  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, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;  
    text-align:center;
  }
  section {
    display: block; }


  body {
    background:#1974E9;
    font: 16px/24px SSP-light, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
 }



  p {font-size: 22px; line-height: 1.8; font-family: SSP-light, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;}
  h2 {font-size: 22px; line-height: 1.8; font-family: SSP-semibold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;}



  a:link { font-family: SSP-regular, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #f0b900; text-decoration: none; outline: 0; }
  a:visited { color: #f0b900; text-decoration:line-through;}
  a:hover, a:focus { color: #000; }
  
  
  p.lead                 {font-size: 26px; line-height: 30px; padding: 3% 20% 3% 20%; font-family: SSP-light, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;}
  p.small                {font-size: 18px; padding: 20% 20% 3% 20%; font-family: SSP-light, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;}


  .add-bottom            { padding-bottom:15% !important; margin-bottom:6% !important; }
  .add-top               { margin-top: 4% !important; }
  .text-align-left       { text-align:left;}
  .text-align-right      { text-align:right;}



  .row                   {margin: 0 auto; padding: 3% 0% 4% 0%; width: 100%; background-color: #FFF;}
  .container             {margin: 0 auto; max-width: 800px;}
  .coloumn               {display:block; float:left; width: 46%; padding: 0 2% 0% 2% ;}


  .img-logo              {width: 140px; height: 60px;}
  .img-logomerke         {width: 100%; height: 100%;}


  .bg-signal             {background-color: #1A1A1A; background-image: url("../images/row-arrow.svg"); background-size: 89px 33px; background-repeat: no-repeat; background-position: center top;}
  .bg-signal h2          {color: #FFF;}  
  .bg-signal p           {color: #FFF;}




/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }



	
	




/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {

        .add-top        { margin-top: 7% !important; }
        .coloumn        {width: 46%; padding: 0 2% 0% 2% ;}


    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        
        .add-top        {margin-top: 20% !important; }
        .coloumn        {width: 42%; padding: 0 4% 0% 4% ;}
        .img-logomerke  {padding: 5% 0% 1% 0%; }
        p.lead          {font-size: 26px; line-height: 30px; padding: 8% 10% 12% 10%; }
        p.small         {padding: 35% 20% 10% 20%;}
        .bg-signal h2   {font-size: 18px;}  
        .bg-signal p    {font-size: 18px; }
 
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

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

        .add-top        { margin-top: 12% !important; }
        .coloumn        {width: 44%; padding: 0 3% 0% 3% ;}
        p.lead          {font-size: 26px; line-height: 30px; padding: 3% 10% 5% 10%; }
        p.small       {padding: 35% 20% 10% 20%;}
		 


    }