

/* x.0 Inhalte Startseite/Home  
------------------------------------------------------------------------------*/

  /* x.1 Container für Inhalt ( Ausrichtung vertical und horizontal mittig )
  ----------------------------------------------------------------------------*/
   @media (min-width: 725px){
    .inhalt.startseite{ height:100%; }  
  } 
  
  
  
  .center-inner{
    width:100%;
  }
  
  

  @media (min-width: 725px){
    
    
    .center-inner:before{ 
      content:"";
      display:block;
      padding-bottom:54%;  /* 524/960 Verhältnis 
      /*height:668px;*/
      background-position:center center;
      width:100%;
     /*margin-top:-419px; */
     margin-top:-8.2%;
      z-index:-1;
      position:absolute;
      background-image:url('../img/streifen-mit-schatten.png');
      background-size:auto 100%;
      background-repeat:repeat-x;
     
    }  
   
   
    .center{ 
      position:relative;
      width:100%;
      height:100%;
      -webkit-transition: all  ease-out 0.3s;
      -moz-transition: all ease-out 0.3s;
      -o-transition: all ease-out 0.3s;
      transition: all ease-out 0.3s;
    }
  
    .center-inner{ 
      width:100%; 
      position:absolute;
      top:50%;
      /*margin-top:-117px;*/ 
      margin-top:-159px;
      -webkit-transition: all  ease-out 0.3s;
      -moz-transition: all ease-out 0.3s;
      -o-transition: all ease-out 0.3s;
      transition: all ease-out 0.3s;   
    } 
    
    /*fix firefox bugs */
    .center-inner *{  
  /*    transform:translate3d(0,0,0) */  
    }
   
    
    
    .center-inner .spa-br1-3 *{ 
     /*
      backface-visibility:hidden; 
     
      perspective:1000px;  
      transform:translate3d(0,0,0)  
      */
    }   
  
    .center-inner .spa-br1-3 .main-button{ 
      transform:translate3d(0,0,0)  
    }      
  }
  
  @media (min-width:960px){
  
       
    .center-inner:before{ 
      content:"";
      display:block;
     /* height:524px; */
     height:570px;
     
      background-position:0% 0%;
      width:100%;
     /* top:50%; */
      /*margin-top:-260px; */
      margin-top:-80px; 
      z-index:-1;
      padding:0;
      position:absolute;
      background-image:url('../img/streifen-mit-schatten.png');
      background-size:auto;
     
    }  
  
  }
  
   /* x.2 Knöpfe: Produkte, SKS-Germany etc.
  ----------------------------------------------------------------------------*/   
  
  a.main-button { 
    margin:0 auto; 
    display:block;
    /*width:210px; */
    max-width:210px;
    width:100%;
    position:relative;
    cursor:pointer; 
    color:#fff;
    text-transform:uppercase;
    font-size:21px;
    text-align:center;
    text-decoration:none; 
  }
  
  a.main-button img{ width:100%;height:auto; }
  

  
   

  @media (min-width: 725px){
    a.main-button { 
      margin:0 auto; 
      margin-top:-20px;
      display:block;
      margin-bottom:40px;
      max-width:210px;
      width:100%;
      position:relative;
      /*height:234px;*/
      cursor:pointer ;

    } 
    
    a.main-button img{ 
      display:block;
      margin-bottom:15px;
      position:relative;
       -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all  ease-out 0.3s;
      -moz-transition: all ease-out 0.3s;
      -o-transition: all ease-out 0.3s;
      transition: all ease-out 0.3s;
     
    }

    .no-touch a.main-button:hover img {
      -webkit-transition: all  ease-out 0.3s;
      -moz-transition: all ease-out 0.3s;
      -o-transition: all ease-out 0.3s;
      transition: all ease-out 0.3s;
      transform: scale(1.07); 
      -webkit-transform: scale(1.07); 
    } 
     
  }
  
  
 
  /* x.3 Einblendeboxen (Bubbles)
  ----------------------------------------------------------------------------*/ 



   /* x.3.2  Popups (werden nur für Effekt benötigt)
  ----------------------------------------------------------------------------*/ 

  .popin{ 
     display:none;
     margin-top:20px;
  }
  
  .popin.sichtbar{ display:block; }


  @media( min-width: 725px ){
    
    .csstransitions .popin{
        display:block;
    }
    
    
    .popin{ 
      display:none;
      transition: all ease-out 0.5s 0.1s;       
      position:relative;
      opacity:0;
      padding:0 20px; 
      -webkit-transition: all  ease-out 0.5s 0.1s;
      -moz-transition: all ease-out 0.5s 0.1s;
      -o-transition: all ease-out 0.5s 0.1s;   
      visibility: hidden
      
    }
    
    .popin.sichtbar{ 
      opacity:1; z-index:2;
      visibility: visible;
    }   
    
  

    .popin-l{
      position:absolute;
      margin:0 auto;
      width:100%;
      max-width:960px;
      margin-top:-370px;
      z-index:-1;
    } 
    
    .popin-l:after{
        content:url('../img/sprechblase-dreieck.png'); 
        margin-top:0px;
        position:absolute;
        left:65%;
        margin-top:0px; 
    }
    
  
    .popin-s{
      position:absolute;
      right:0;
      margin-top:-370px;
      max-width:350px;
      z-index:-1;
 
    }
    
    .popin-s .inhalts-box{
           height:320px;
           min-width:290px;
    }
    
      .popin-s .inhalts-box h2{
         line-height:30px
    }
    
    .popin-s:after{
        content:url('../img/sprechblase-dreieck-2.png'); 
        margin-top:0px;
        position:absolute;
        left:48%;
    }
    
    
  
  }
  
  /* x.4 Listen
  ----------------------------------------------------------------------------*/ 

    /* x.4.1 Newsliste
    --------------------------------------------------------------------------*/ 
     
    
     
      ul.news-liste{ padding:0;list-style:none;margin:0; }
      
      ul.news-liste a:focus{ color:#000}
      ul.news-liste a{ color:#000;text-decoration:none}
      
      ul.news-liste li:before{ 
        margin-left:-50px;
        content:" ";
        width:28px;
        height:28px;
        background:url('../img/listen/pfeil-rechts-rund.png');
        float:left;
      }
      
      ul.news-liste li{ 
        padding-left:50px;
        font-size:15px;
        margin-bottom:15px;
        font-weight:600;
      }
      
      ul.news-liste li a{ cursor:pointer; }
      
      ul.news-liste li a:hover{ 
        color:#ee7203;
              -webkit-transition: all  ease-out 0.2s;
      -moz-transition: all ease-out 0.2s;
      -o-transition: all ease-out 0.2s;  
      }
      
      ul.news-liste .datum{ 
        display:block;
        font-size:11px;
        line-height:11px;
        font-weight:normal
      }
      
      @media (min-width:725px){
            #letzte-news{ height:250px }
      }
      
      
     /* x.4.2 Messeliste
    --------------------------------------------------------------------------*/ 
    
      ul.messen-liste{ list-style:none;padding:0; }
      
      
      
      ul.messen-liste li > a{ 
        color:#fff;
        border:4px solid #fff;
        padding:10px 10px; 
        border-radius:6px;
        text-align:center;
        height:144px 
      }
      ul.messen-liste li a{ color:#fff;text-decoration:none;display:block; }
       ul.messen-liste li a .titel{  font-size:14px;font-style:normal }
      ul.messen-liste li a .datum { position:absolute;margin-left:-10px;bottom:10px;color:#fff;margin-top:20px;display:block;font-style:normal }
      
      
      ul.messen-liste li a{ position:relative; }
      ul.messen-liste li a.messe{ background:#ee7203 }
       
      ul.messen-liste li a.event{ background:#404040; }
       
      ul.messen-liste span.titel{ display:block; }
      
      @media (min-width:725px){
            #letzte-messen{ height:250px }
      }


