@font-face {
  font-family: "ubuntumono";
  src: url("fonts/ubuntumono/UbuntuMono-B.eot"); /* IE9 Compat Modes */
  src: url("fonts/ubuntumono/UbuntuMono-B.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/ubuntumono/UbuntuMono-B.otf") format("opentype"), /* Open Type Font */
    url("fonts/ubuntumono/UbuntuMono-B.svg") format("svg"), /* Legacy iOS */
    url("fonts/ubuntumono/UbuntuMono-B.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/ubuntumono/UbuntuMono-B.woff") format("woff"), /* Modern Browsers */
    url("fonts/ubuntumono/UbuntuMono-B.woff2") format("woff2"); /* Modern Browsers */

}

.logo-scrolled 
  {opacity:0;transition-property: all;transition-duration: 0.2s;}
.logo-scroll 
  {opacity:1; transition-property: all;transition-duration: 0.2s;}

img.logo {left:20px;width:20%;position:fixed;top:0px;}
  @media (orientation: portrait) {
img.logo {left:2%;width:96%;position:fixed;top:0px;}
.animation img {width:100vw;}}

body,html {padding:0;margin:0;font-family: "ubuntumono"; font-size: 18px;line-height: 22px;
color:#222;text-align:left;}
  a {text-decoration:none;color:#FF00C0;}
  a:hover {color:#740057; transition-duration: 0.2s;}

.container { margin:auto 25%;}

.partner {width:100%;padding-top:80px;clear:both;}
.bildquer 
  {background:  url('img/spm-quer2.jpg') bottom no-repeat; /*3000 x 2500*/ 
   background-size:cover;width:100vw;height:100vh;position:absolute;z-index:-1;}
.partner.vaxi {width:100vw;}

.fahne 
  {position:relative;background:  url('img/fahne-anim2_01.gif') bottom no-repeat;
   background-size:cover;width:5vw;height:5vh;}

.fahne1,.fahne2,.fahne3,.fahne4,.fahne5,.fahne6,.fahne7
  {position:absolute;width:50vw;height:auto;bottom:0;}
.fahne1::after,
.fahne2::after,
.fahne3::after,
.fahne4::after,
.fahne5::after,
.fahne6::after { content: "";width: 10vw;height: 10vh;
  background:  url(img/fahne-anim2_01.gif) no-repeat 0px 0px;
  background-size:contain;position: absolute;display: inline-block;
}

  .fahne1::after {  right: 17.5vw;top: -58%;width: 8vw;height: 8vh;}
  .fahne2::after {  right: -2vw;top: -56%;width: 8vw;height: 8vh;}
  .fahne3::after {  right: -18vw;top: -56%;width: 8vw;height: 8vh;}
  .fahne4::after {  right: -22vw;top: -90%;}
  .fahne5::after {  right: -25vw;top: -40%;width: 12vw;height: 13vh;}
  .fahne6::after {  right: -42vw;top: -40%;}


  img.abstand {width:100%;height:auto;}
 .quer {display:none;}    
 .hoch {display:block;} 


  @media (orientation: portrait) {
.container { margin:auto 15%;}   
.quer {display:block;}    
.hoch {display:none;}    

.bildquer 
  {background:  url('img/spm-hoch2.jpg') top no-repeat; background-size:100%;position:absolute;z-index:-1;}

.fahne1,.fahne2,.fahne3,.fahne4,.fahne5,.fahne6
  {position:absolute;height:auto;width:100%;top:0;}

  img.abstand {width:100%;height:50vh;}

  .fahne1::after {  left: 28vw;top: 30%;}
  .fahne2::after {  left: 50vw;top: 30%;}
  .fahne3::after {  left: 68vw;top: 30%;}
  .fahne4::after {  left: 70vw;top: 23%;width: 9vw;}
  .fahne5::after {  left: 71vw;top: 32%;width: 15vw;}
  .fahne6::after {  left: 93vw;top: 32%;width:50px;overflow: none;}
 }

#rollover, a img { filter: brightness(100%); }
#rollover:hover, a img:hover { filter: brightness(120%);}

.facebook
{ height: 30px; width: 30px; float:left; margin-right:20px;
  background:  url('img/facebook.png');
  background-repeat: no-repeat;
  background-size: contain;}
.facebook:hover {filter: brightness(150%);}