/*  Fonts  */
@font-face {
    font-family: 'lato_regular';
    src: url('../fonts/lato-regular.eot');
    src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular.woff') format('woff'),
         url('../fonts/lato-regular.ttf') format('truetype'),
         url('../fonts/lato-regular.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'lato_bold';
    src: url('../fonts/lato-bold.eot');
    src: url('../fonts/lato-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bold.woff') format('woff'),
         url('../fonts/lato-bold.ttf') format('truetype'),
         url('../fonts/lato-bold.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'avantgardelt-extralight';
    src: url('../fonts/avantgardelt-extralight.eot');
    src: url('../fonts/avantgardelt-extralight.eot?#iefix') format('embedded-opentype'),
         url('../fonts/avantgardelt-extralight.woff') format('woff'),
         url('../fonts/avantgardelt-extralight.ttf') format('truetype'),
         url('../fonts/avantgardelt-extralight.svg#avantgardelt-extralight') format('svg');
    font-weight: normal;
    font-style: normal;

}





::selection {color:#ffffff;background:#242729;}
::-moz-selection {color:#ffffff;background:#242729;}

body {
  /* background-color:rgba(255, 255, 255, 0.2); */
  background-color: white;
}

#dialog_clipboard_ok {
  display: none;
}


h1 {
  display: inline;
}

a, .link {
	transition:all .2s linear;
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
}

.link {
  cursor: pointer;
}


.action_show {
  display: block !important;
}


.wrapper {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

sup {
  vertical-align: top; 
  font-size: 0.6em;
}



/* ##################### */ 
/* ##### HEADER ######## */
/* ##################### */ 
  header{
    width: 100%;
    height: 80px;
    background: #242729;
  }
  
  header img.logo{
    float: left;
    margin-top: 16px;
    width: 92px;
    height: 53px;
  }

  header nav{
    overflow: hidden;
    display: inline-block;
    margin: 20px 0 0 10px;
    padding: 13px 40px;
    z-index: 800;
  }


  header nav ul{
    list-style: none;
  }

  header nav ul li{
    float: left;
    margin-left: 35px;
    font-size: 16px;
    font-family: 'lato_regular', arial;
    letter-spacing: 1px;
  }

  header nav ul li:first-child, header nav ul li:nth-child(2) {
    margin-left: 0;
  }

  header nav ul li a, header nav ul li.link {
    color: white;
    padding-left: 17px;
    background: url('../img/icons-12x12.png') no-repeat;
  }
  header nav ul li a:hover, header nav ul li.link:hover {
    color: #6699CC;
    background-image: url('../img/icons-12x12-hover.png');
  }
  header nav ul li.red {
    color: #ffd6cc !important;
    background-image: url('../img/icons-12x12-red.png') !important;
  }

  header nav ul li.calendar {
    display: none;
  }
  header nav ul li.enlarge a {
    background-position: 0 3px;
  }
  header nav ul li.slideshow {
    background-position: 0 -13px;
  }
  header nav ul li.ecard a {
    background-position: 0 -29px;
  }
  header nav ul li.download a {
    background-position: 0 -45px;
  }
  
  span#slideshow_stop, span#slideshow_stop_long {
    display: none;
  }



  #lang_menu, #cam_menu {
    display: none;
    background: #353434;
    margin: 8px 0 0 0;
    padding: 0;
    border-left: 0;
    border-top: 1px #2c2c2c solid;
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 900;
    display: none;
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
  }
  #lang_menu ul li, #cam_menu ul li {
    margin: 0;
    width: 100%;
    border-bottom: 1px #2c2c2c solid;
  }
  #lang_menu ul li:last-child, #cam_menu ul li:last-child {
    border-bottom: 0;
  }
  #lang_menu ul li a, #cam_menu ul li a {
    display: block;
    width: 100%;
    padding: 20px 0;
    padding-left: 0px;
    background: none !important;
  }



  header ul.social {
    float: right;
    list-style: none;
    margin-top: 23px;
    z-index: 900;
  }

  header ul.social li {
    float: left;
    margin-left: 10px;
  }

  header ul.social li.menue {
    margin-right: 10px;
  }

  header ul.social li a, header ul.social li.link {
    display: block;
    width: 35px;
    height: 35px;
    background: url('../img/icons-35x35.png') no-repeat;
  }
  
  header ul.social li.ecard, header ul.social li.menue, header ul.social li.download {
    display: none;
  }

  header ul.social li a:hover, header ul.social li.link:hover {
    background: url('../img/icons-35x35-hover.png') no-repeat;
  }

  header ul.social li.language a {
    background-image: none;
    font-family: 'lato_bold', arial;
    padding-top: 7px;
    border: 2px solid white;
    height: 24px;
    width: 31px;
    text-align: center;
  }
  header ul.social li.language a:hover {
    color: #6699CC;
    border-color: #6699CC;
  }


  header ul.social li.cameras {
    margin-right: 10px;
  }
  header ul.social li.cameras a {
    background-position: 0 -288px;
  }

  header ul.social li.download a {
    background-position: 0 -180px;
  }
  header ul.social li.menue {
    background-position: 0 -144px !important;
  }
  header ul.social li.ecard a {
    background-position: 0 -108px;
  }
  header ul.social li.fb a {
    background-position: 0 0;
  }
  header ul.social li.twitter a {
    background-position: 0 -36px;
  }
  header ul.social li.gplus a {
    background-position: 0 -72px;
  }
  header ul.social li.teilen a {
    background-position: 0 -252px;
  }




  
/* ############################### */ 
/* ##### PICTURE + CALENDAR ###### */
/* ############################### */ 
  #picture_calendar {
    background: #F8F7F7;
  }


  
  
/* ##################### */ 
/* ##### CALENDAR ###### */
/* ##################### */
  section#calendar {
    float: right;
    background: #F8F7F7;
    color: #767575;    
    font-family: "lato_regular", arial;
    font-size: 15px;
    width: 230px;    
    padding: 30px 20px;
  }
  section#calendar a {
    color: #767575;
    font-family: "lato_bold", arial;
    /* font-weight: bold; */
  }
  section#calendar a:hover {
    color: #6699CC;
  }
  section#calendar span.prev, section#calendar span.next {
    display: block;
    color: #dddddd;
  }
  section#calendar span.prev {
    float: left;
  }
  section#calendar span.next {
    float: right;
  }
  section#calendar div {
    margin: 0 auto;
    text-align: center;
  }
  section#calendar table {
    width: 100%;
    margin-top: 10px;    
    text-align: right;
  }
  section#calendar table th, section#calendar table td {
    padding: 6px 2px;
  }
  section#calendar table th {
    font-family: "lato_regular", arial;
    font-weight: normal;
    font-size: 11px;
    color: #9e9e9e;
    border-bottom: 1px solid #f0f0f0;
  }
  section#calendar table td {
    color: #A6A5A5;
  }
  section#calendar table td.other_month, section#calendar table td.other_month a {
    color: #dddddd;
  }
  section#calendar table td.other_month a:hover {
    color: #cccccc;
  }
  section#calendar table td.selected_day {
    color: #6699CC;
    font-family: "lato_bold", arial;
    /* font-weight: bold; */
  }
  section#calendar hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-color: #f0f0f0;
  }
  section#calendar .highest_speed {
    margin-top: 40px;
  }
  section#calendar .highest_speed a {
    font-family: "lato_regular", arial;
  }
  section#calendar .highest_speed span {
    display: block;
    margin-top: 10px;
    font-family: "lato_bold", arial;
    font-size: 25px;
  }
  
  
  
  
/* ######################## */
/* ##### BIG PICTURE ###### */
/* ######################## */
  section#big_picture {
    overflow: hidden;
    position: relative;
  }
  
  div#slider_container {
    position: relative; 
    top: 0; left: 0; 
    width: 930px;
    height: 618px;
  }
  div#slider_container div {
    cursor: move; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 930px; 
    height: 618px; 
    overflow: hidden;
  }
  
  section#big_picture img.noscript {
    margin-bottom: -3px;
  }
  
  /* jssor slider arrow navigator skin 03 */
  .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
  {
    position: absolute;
    cursor: pointer;
    display: block;
    background: url(../img/jssor/a03.png) no-repeat;
    overflow:hidden;
  }
  
  .jssora03l, .jssora03ldn { width: 55px; height: 55px; top: 123px; left: 8px; }
  .jssora03r, .jssora03rdn { width: 55px; height: 55px; top: 123px; right: 8px; }
  
  .jssora03l { background-position: -3px -33px; }                   /* left: normal */
  .jssora03r { background-position: -63px -33px; }                  /* rigth: normal */
  .jssora03l:hover { background-position: -123px -33px; }           /* left: mouseover */
  .jssora03r:hover { background-position: -183px -33px; }           /* rigth: mouseover */
  .jssora03ldn { background-position: -243px -33px; }               /* left: mousedown */
  .jssora03rdn { background-position: -303px -33px; }               /* rigth: mousedown */
  
  
  
  
  
  
  
  
  
/* ######################## */
/* ####### SUBTITLE ####### */
/* ######################## */
  section#subtitle {
    height: 45px;
    background: #242729;
    color: white;
    font-size: 16px;
    font-family: 'lato_regular', arial;
    letter-spacing: 1px;
    margin-top: -1px;
  }
  section#subtitle p {
    padding-top: 14px;
    padding-right: 270px;
    text-align: center;
  }
  section#subtitle p a:hover{
    color: #6699CC;
  }
  section#subtitle .prev_img {
    color: #666666;
    padding-right: 10px;
  }
  section#subtitle .next_img {
    color: #666666;
    padding-left: 10px;
  }
  
  section#subtitle b {
    font-family: 'lato_bold', arial;
    font-weight: normal;
  }
  
  section#subtitle b.time {
    position: relative;
  }  
  section#subtitle b.next_time {
    position: absolute;
    display: none;    
  }
  
  section#subtitle p span.date_short, section#subtitle p span.date_extra_short, section#subtitle p span.description_short {
    display: none;
  }
  
  section#subtitle span.show_calendar {
    display: none;
    overflow: hidden;
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    height: 26px;
    text-align: right;
    width: 100px;
    padding-top: 10px;
    padding-right: 43px;
    background: url('../img/icons-35x35.png') no-repeat 108px -216px;
  }
  section#subtitle span.show_calendar:hover {
    color: #6699CC;
    background-image: url('../img/icons-35x35-hover.png');
  }
  
  
  
  
/* ################################## */
/* #### HIGHEST SPEED SMARTPHONE #### */
/* ################################## */
  section#highest_speed {
    display: none;
    color: #333333;
    font-family: "lato_regular", arial;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 5px;
  }
  section#highest_speed  a {
    color: #333333;
  }
  section#highest_speed  a:hover {
    color: #6699CC;
  }
  section#highest_speed span {
    display: block;
    margin-top: 10px;
    font-family: "lato_bold", arial;
    font-size: 25px;
  }
  
  
  
/* ######################## */
/* #### SMALL PICTURES #### */
/* ######################## */  
  section#small_pictures {
    overflow: hidden;
    text-align: center;
  }
  section#small_pictures a {    
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 17%;
    margin: 25px 3.7% 0 3.7%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
  }
  section#small_pictures a:hover {
    color: #6699CC;
  }
  section#small_pictures a span.clock {
    display: block;
    position: absolute;
    right: 0;
    background: #242729;
    padding: 5px;
    font-size: 16px;
    font-family: 'lato_regular', arial;
    -moz-border-radius: 3px 0 3px 0;
    -webkit-border-radius: 3px 0 3px 0;
    -khtml-border-radius: 3px 0 3px 0;
    border-radius: 3px 0 3px 0;
  }
  section#small_pictures a span.time {
    display: block;
    position: absolute;
    left: 0;
    bottom: 28px;
    background: #747779;
    padding: 5px;
    font-size: 16px;
    font-family: 'lato_regular', arial;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -khtml-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
  }
  section#small_pictures a span.speed {
    display: block;
    position: absolute;
    left: 0; 
    bottom: 0;
    background: #747779;
    padding: 5px;
    font-size: 16px;
    font-family: 'lato_regular', arial;
    -moz-border-radius: 3px 0 3px 0;
    -webkit-border-radius: 3px 0 3px 0;
    -khtml-border-radius: 3px 0 3px 0;
    border-radius: 3px 0 3px 0;
  }
  section#small_pictures img {
    width: 100%;
    margin-bottom: -3px;
  }
  
  

  
  
/* ######################## */
/* ######## FOOTER ######## */
/* ######################## */    
  footer {
    background: #F8F7F7;
    color: #767575;
    font-size: 16px;
    font-family: 'lato_regular', arial;
    letter-spacing: 1px;
    line-height: 22px;
    text-align: center;
    padding: 15px 10px;
  }
  footer.wrapper {
    margin-top: 15px;
  }
  footer p {
    margin-top: 10px;
  }
  
  
  






/* ##################################################################################################################### */
/* ###### RESPONSIVE ################################################################################################### */
/* ##################################################################################################################### */


/* ##################### */ 
/* ##### HEADER ######## */
/* ##################### */ 

  @media (max-width:1260px){
    header .wrapper{
      padding: 0 30px;
    }
  }


  @media (max-width:999px){
    header ul.social li.ecard {
      display: block;
    }
    header nav ul li.ecard {
      display: none;
    }
  }


  @media (max-width:950px){

    header img.logo{
      float: none;
    }

    header ul.social li.menue, header ul.social li.download {
      display: block;
    }
    
    header nav ul li.ecard {
      display: list-item;
    }
    
    header nav{
      background: #242729;
      margin: 8px 0 0 0;
      padding: 0;
      border-left: 0;
      border-top: 1px #2c2c2c solid;
      overflow: hidden;
      text-align: center;
      position: relative;
      z-index: 900;
      display: none;
    }
    header nav{
      border-bottom-left-radius: 2px; 
      -webkit-border-bottom-left-radius: 2px; 
      -moz-border-bottom-left-radius: 2px; 
      -o-border-bottom-left-radius: 2px; 
      border-bottom-right-radius: 2px; 
      -webkit-border-bottom-right-radius: 2px; 
      -moz-border-bottom-right-radius: 2px; 
      -o-border-bottom-right-radius: 2px; 
    }
    header nav ul li{
      margin: 0;
      width: 100%;
      border-bottom: 1px #2c2c2c solid;
    }
    header nav ul li:last-child{
      border-bottom: 0;
    }
    header nav ul li a, header nav ul li.link, header nav ul li.red {
      display: block;
      width: 100%;
      padding: 20px 0;
      padding-left: 0px;
      background: none !important;
    }
    header nav ul li.calendar {
      display: none;
    }
    /*
    header nav ul li a:active{
      display: block;
      width: 100%;
      padding: 20px 0;
      background: #2c2c2c;
    }
    */
    header nav ul li a:hover, header nav ul li.link:hover {
      background: none;
    }
    span#slideshow_stop_long {
      display: inline;
    }
    span#slideshow_stop_short {
      display: none;
    }
  }

  @media (max-width:763px){
    header .wrapper{
      padding: 0 10px;
    }
  }

  @media (max-width:530px){
    header ul.social li.ecard {
      display: none;
    }
  }

  @media (max-width:480px){
    header ul.social li.download {
      display: none;
    }
  }

  @media (max-width:430px){
    header img.logo{
      width: 0;
    }
  }

  @media (max-width:330px){
    header ul.social li.fb, header ul.social li.twitter, header ul.social li.gplus, header ul.social li.teilen {
      display: none;
    }
  }

  
/* ##################### */ 
/* ##### CALENDAR ###### */
/* ##################### */
  @media (max-width:980px){
    section#calendar {
      font-size: 13px;
      width: 210px;    
      padding: 30px 15px 20px 10px;
    }
    section#subtitle p {
      padding-right: 235px;
    }
  }
  
  @media (max-width:840px){
    section#calendar .highest_speed {
      display: none;
    }
  }
  
  @media (max-width:709px){
    section#calendar {
      display: none;
      position: absolute;
      right: 0;      
      z-index: 500;
      float: none;
      font-size: 17px;
      width: 240px;
      padding-top: 15px;
      padding-bottom: 8px;
    }
    header nav ul li.calendar {
      display: list-item;
    }
    section#subtitle p {
      padding-right: 10px;
      padding-left: 10px;
      text-align: left;
    }
    section#subtitle span.show_calendar {
      display: block;
    }
    section#calendar .act_day {
      display: none;
    }
  }
  @media (max-width:370px) {
    section#calendar {
      padding-top: 10px;
      padding-bottom: 5px;
    }
  }
  @media (max-width:300px) {
    section#calendar {
      font-size: 13px;
      width: 200px;
    }
  }
  @media (max-width:255px) {
    section#calendar table th, section#calendar table td {
      padding: 4px 2px;
    }
  }
  @media (max-width:230px) {
    section#calendar {
      width: 180px;
    }
    section#calendar table th, section#calendar table td {
      padding: 3px 2px;
    }
  }
  
  
  
/* ######################## */
/* ####### SUBTITLE ####### */
/* ######################## */
  @media (max-width:899px){
    section#subtitle p span.description_short {
      display: inline;
    }
    section#subtitle p span.description_long {
      display: none;
    }
  }
  @media (max-width:799px){
    section#subtitle p span.date_short {
      display: inline;
    }
    section#subtitle p span.date_long {
      display: none;
    }
  }
  @media (max-width:599px){
    section#subtitle p span.description_short {
      display: none;
    }
  }
  @media (max-width:399px){
    section#subtitle p span.date_extra_short {
      display: inline;
    }
    section#subtitle p span.date_short {
      display: none;
    }
    section#subtitle .prev_img {
      padding-right: 5px;
    }
    section#subtitle .next_img {
      padding-left: 5px;
    }
  }
  @media (max-width:353px){
    section#subtitle p span.date_extra_short {
      display: none;
    }
  }
  @media (max-width:285px){
    section#subtitle p .prev_img, section#subtitle p .next_img {
      display: none;
    }
  }
  @media (max-width:239px){
    section#subtitle p {
      display: none;
    }
  }
  
/* ################################## */
/* #### HIGHEST SPEED SMARTPHONE #### */
/* ################################## */
  @media (max-width:840px){
    section#highest_speed {  
      display: block;
    }
  }
  
  
/* ######################## */
/* #### SMALL PICTURES #### */
/* ######################## */
  @media (max-width:1099px){
    section#small_pictures a {    
      width: 18.5%;
      margin-left: 3%;
      margin-right: 3%;
    }
  }
  @media (max-width:999px){
    section#small_pictures a {    
      width: 20%;
      margin-left: 2.2%;
      margin-right: 2.2%;
    }
  }
  @media (max-width:899px){
    section#small_pictures a {    
      width: 21%;
      margin-left: 1.8%;
      margin-right: 1.8%;
    }
  }
  @media (max-width:815px){
    section#small_pictures a {    
      width: 25%;
      margin-left: 3.7%;
      margin-right: 3.7%;
    }
  }
  @media (max-width:699px){
    section#small_pictures a {    
      width: 26.5%;
      margin-left: 2.8%;
      margin-right: 2.8%;
    }
  }
  @media (max-width:619px){
    section#small_pictures a {    
      width: 28.5%;
      margin-left: 2%;
      margin-right: 2%;
    }
  }
  @media (max-width:539px){
    section#small_pictures a {    
      width: 39%;
      margin-left: 4%;
      margin-right: 4%;
    }
  }
  @media (max-width:399px){
    section#small_pictures a {    
      width: 44%;
      margin-left: 2.1%;
      margin-right: 2.1%;
    }
  }
  @media (max-width:229px){
    section#small_pictures a {    
      width: 90%;
      margin-left: 0;
      margin-right: 0;
    }
  }