/* MOBILE */
 :root {
  --blue: #417191;
  --darkgray: #1b1b1b;
  --silver: #C0C0C0;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial;
}

span {
  z-index: 300;
  background-color:rgba(45,45,45,0.6);
  color: white;
  width: 100%;
  padding: 0rem 0rem 0rem 1rem;
  display: block;
  position: relative;
}

.desktop {
  display: none;
}

.headline {
  background-color: #2d2d2d;
  color: white;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  position: fixed;
  width: 100%;
  z-index: 301;
}

.row > * {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}
.col-sm-12, .col-md-6, .col-lg-3 {
  height: 350px;
  position: relative;
  overflow: hidden;
  padding: 0rem 0rem 0rem 0rem;
}

.col-12 {
  line-height: 24.5rem;
  vertical-align: middle;
}

.roundshot {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
  border: none;
}

.roundshot img {
  padding: 0;
  margin: 0;
  height: 350px;
  display: block;
  position: absolute;
  animation: 6s linear 0s slide infinite alternate;
}

/*roundshot slide*/ 
@keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

/*iframe icons*/

.svg-inline--fa {
  height: 4em;
  margin-bottom: 15px;
}

/* zoom für zu kleine Bilder */
#item_9 img, #item_10 img, #item_13 img, #item_20 img, #item_26 img, #item_27 img {
  width: 150%;
}

/*size of items*/
#item_33, #item_34, #item_35, #item_36, #item_41, #item_42 {
  width: 50%;
  height: auto;
}

/* Span visible first Element*/
#item_1 {
  margin-top: 40px;
}

#item_43 {
  width: 100%;
  height: 350px;
}

/*GAFOR*/
#item_33 {
  background-color: #555555;
}

#item_33 img {
  width: 100%;
  height: auto;
}

/*METAR + TAF*/

 #item_35, #item_34 {
  height: 100%;
  line-height: 1.2;
  font-size: 12pt;
  overflow: hidden;
  margin: 0;
}

#item_35 b, #item_34 b {
  color: var(--blue);
  margin: 2px;
}

#item_35 span, #item_34 span {
  line-height: 25px;
}

/*iframes QNH Charts*/

#item_38, #item_40 {
  text-align: center;
  padding: 0;
}

#item_37, #item_39 {
  text-align: center;
  background-color: lightblue;
}

/*DABS*/

#item_41 img, #item_42 img { 
  width: 100%; 
}

/*----Media Querys---*/

/* Portrait Mode Phone */

@media (orientation: portrait) and (max-width: 768px) {
  
  /*size of items*/
  #item_33, #item_34, #item_35, #item_36, #item_41, #item_42 {
    width: 100%;
  }

  .roundshot {
    height: 200px;
  }

  .col-sm-12, .col-md-6, .col-lg-3 {
    padding: 0;
    height: 20rem;
  }

  .col-12 {
    height: auto;
  }

  .svg-inline--fa {
    vertical-align: -0.2em;
  }
  #item_40 iframe {
    padding-left: 2rem; 
  }

  /*metar*/
  #item_34, #item_35 {
    font-size: 0.8em;
  }

  /*QNH-Alpen*/
  #item_36 {
    display: block;
    width: 100%;
    height: auto;  
  }

  #item_36 img {
    width: 100%;
    height: 100%;
  }

  /*dabs*/
  #item_41, #item_42 {
    display: block;
    height: auto;
  }

  #item_41 img, #item_42 img {
    width: 100%;
    -ms-zoom:1;
    -moz-transform: scale(1);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(1);
    -webkit-transform-origin: 0 0;
    height: auto;
  }
}

/* min width 992*/

@media (min-width: 992px) and (max-width: 1199px) {
  
  /*size of items*/
  #item_33, #item_34, #item_35, #item_36, #item_41, #item_42 {
    width: 50%;
    height: auto;
  }

  .roundshot {
    height: 150px;
  }

  .col-sm-12, .col-md-6, .col-lg-3 {
    padding: 0;
    height: 250px;
  }

  /* Span visible*/
  #item_1, #item_2, #item_3, #item_4 {
    margin-top: 40px;
  }
  

  /* GAFOR */
  #item_40 iframe {
    padding-left: 2rem; 
  }
}

/* min width 768*/

@media (min-width: 768px) and (max-width: 991px) {
  
  /*size of items*/
  #item_33, #item_34, #item_35, #item_36, #item_41, #item_42 {
    width: 100%;
  }

  /* Span visible*/
  #item_1, #item_2 {
    margin-top: 40px;
  }

  .roundshot {
    height: 200px;
  }

  .col-sm-12, .col-md-6, .col-lg-3 {
    padding: 0;
    height: 250px;
  }

  .col-12 {
    line-height: 20em;
    vertical-align: middle;
  }

  /*QNH - iframes*/

  .svg-inline--fa {
    height: 4em;
  }

  #item_38, #item_39 {
    background-color: white;
    text-align: center;
    padding: 0;    
  }

  #item_37, #item_40 {
    text-align: center;
    background-color: lightblue;
  }
}

@media (min-width: 1200px) {
  /* Span visible*/
  #item_1, #item_2, #item_3, #item_4 {
    margin-top: 40px;
  }
}

/*Animations*/
.logo {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
  border: none;
}

.logo_2 {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
  border: none;
}

#logoOne {
  padding-top: 70px;
  width: 10em;
  margin: 0;
  display: block;
  position: absolute;
  animation: 20s linear 0s logoOne infinite;
}

#logoTwo {
  padding-top: 100px;
  width: 10em;
  margin: 0;
  display: block;
  position: absolute;
  animation: 20s linear 0s logoTwo infinite;
}

@keyframes logoOne { /* MFG */
  0%   {left: -10%; opacity: 0;}
  5%   {left:  40%; opacity: 1;}
  45%  {left:  40%; opacity: 1;}
  50%  {left:  100%; opacity: 0;}
  100% {left:  100%; opacity: 0;}
}

@keyframes logoTwo { /* Klixa */
  0%   {left: -10%; opacity: 0;}
  50%  {left: -30%; opacity: 0;}
  55%  {left:  40%; opacity: 1;}
  95%  {left:  40%; opacity: 1;}
  100% {left:  100%; opacity: 0;}
}

#dabs_1 {
  display: block;
  position: absolute;
  animation: 30s linear 0s dabs1 infinite;
}

#dabs_2 {
  display: block;
  /*position: absolute;*/
  animation: 30s linear 0s dabs2 infinite; 
}

/*dabs*/
@keyframes dabs1 { 
  0%   {opacity: 0;}
  5%   {opacity: 1;}
  35%  {opacity: 1;}
  36%  {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes dabs2 { 
  0%   {opacity: 0;}
  35%  {opacity: 0;}
  36%  {opacity: 1;}
  70%  {opacity: 1;}
  90%  {opacity: 1;}
  100% {opacity: 0;}
}