@font-face {
  font-family: CarioBlack;
  src: url(../fonts/Cairo-Black.ttf);
}
@font-face {
  font-family: CarioBold;
  src: url(../fonts/Cairo-Bold.ttf);
}
@font-face {
  font-family: CarioExtraLight;
  src: url(../fonts/Cairo-ExtraLight.ttf);
}
@font-face {
  font-family: CarioLight;
  src: url(../fonts/Cairo-Light.ttf);
}
@font-face {
  font-family: CarioRegular;
  src: url(../fonts/Cairo-Regular.ttf);
}
@font-face {
  font-family: CarioSemiBold;
  src: url(../fonts/Cairo-SemiBold.ttf);
}
html {
  scroll-behavior: smooth;
}

body{
  overflow-y: hidden !important;
  overflow-x: hidden;
}

.nav-link:hover{
  background-color: none;
  transition: none;
}

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

/* Override UGG site */
#main {width: 100%; padding:0;}

/* Section - Parallax */
/**************************/
#parallax-world-of-ugg .parallax-two {
  padding-top: 1000px; 
  padding-bottom: 550px; 
  overflow: hidden;
  position: relative;
  width: 100%; 
  height: 100%;
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover; 
  background-repeat: no-repeat;
  background-position: center center;
}



 .app-title h2{
  font-weight: 600;
}


@media screen and (min-width: 850px) {
  #parallax{
    display: inline;

  }
  #showcase1{
    display: none;
  }
}

@media screen and (max-width: 851px) {
  #parallax{
    display: none;

  }
  #showcase1{
    display: inline;

  }
}

 #scrollBtn {
  display: none; 
  position: fixed; 
  bottom: 30px; 
  right: 30px; 
  z-index: 6000; 
  border: none;
  outline: none; 
  background-color: #006699;
  color: white; 
  cursor: pointer; 
  padding-bottom: 10px; 
  border-radius: 10px; 
  font-size: 25px; 
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

#callBtn {
  position: fixed; 
  bottom: 100px; 
  left: 100px; 
  z-index: 6000; 
  border: none;
  outline: none; 
  background-color: #f2f2f2;
  color: white; 
  cursor: pointer; 
  padding-bottom: 10px; 
  padding: 10px;
  border-radius: 10px; 
  font-size: 25px; 
  text-align: center;
}

#icon {
  transition: transform .2s; /* Animation */
}

#icon:hover {
  transform: scale(1.1);
}

/* #scrollBtn:hover {
  background-color: #555; 
}  */


.nav-link-color{
  font-size: 20px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  color: #ffffff;
}

.nav-link{
  font-size: 20px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
}

.nav-link-color:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.nav-link:hover{
  text-shadow: 1px 1px 4px #d3cccc;
  text-decoration: none;
  color: #003366;
  text-decoration-color: #003366;
}
#audio-guide a:hover{
  text-shadow: 1px 1px 4px #d3cccc !important;
  text-decoration: none;
  color: #fff !important;
  text-decoration-color: #fff !important;
}
.anchor:hover{
  text-shadow: 1px 1px 4px #d3cccc;
}


#app-title-href:hover{
  text-decoration: none;
  color: #fff;
  text-shadow: 1px 1px 4px #d3cccc;
}
/* Big screen */
@media screen and (min-width: 801px) {

  .nav-link-color ,.nav-link{
      font-size: 25px;
      text-align: left;
    }

 

  .first-app{
    padding-left: 15%;
    padding-right: 10%;
  }

  .second-app{
    padding-left: 15%;
    padding-right: 10%;
  }

  .footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    font-size: 40px;
    font-weight: bolder;
    justify-items: center;
  }
  #call_section{
    bottom: 100px;
  }
    
}

/* Small screen */
@media screen and (max-width: 800px) {
  .nav-link-color ,.nav-link{
      font-size:16px;
      text-align: left;
    }

   

  .first-app{
    padding-left: 0%;
    padding-right: 0%;
  }

  .second-app{
    padding-left: 0%;
    padding-right: 0%;
  }

  .app-image img{
    max-width: 300px;
  }

 

  .footer{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    font-size: 20px;
    justify-items: center;
  }
  #call_section{
    bottom: 200px;
  }

}


#showcase img {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  object-fit:scale-down;
}

#showcase {
  overflow: hidden;
  height:auto;
  /* max-height: 620px; */
}

#showcase .bg-image {
  width: 100%;
  height: auto;
  object-fit: scale-down;
  height: 100%;
  z-index: 1000;
}
#showcase1 img {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  object-fit:scale-down;
}

#showcase1 {
  overflow: hidden;
  height:auto;

}

#showcase1 .bg-image {
  width: 100%;
  height: auto;
  object-fit: scale-down;
  height: 100%;
  z-index: 1000;
}

.content{
  width: 100%;
  display: grid;
  grid-template-columns: 100fr 1300fr 100fr;
  justify-items: start;
  z-index: 3000;
}

.app-title,.app-desc,.app-name{
  color: white;
  letter-spacing: normal;
  font-stretch: normal;
  font-style: normal;
  /* font-family: Avenir; */
}

.app-details{
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 15px;
}

.app-link{
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.footer{
  color: #530000;
  letter-spacing: normal;
  text-align: center;
  font-stretch: normal;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

/* Big screen */
@media screen and (min-width: 901px) {
.app-info{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
}

/* Small screen */
@media screen and (max-width: 900px) {
.app-info{
    display: grid;
    grid-template-rows: 1fr 1fr;
 
  }


}

@media only screen and (max-width: 346px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
  #first-img{
    margin-top: 12%;
  }
  #tourismus-img{
    padding-top: 200px;
    
  }
  #blank_item{
    margin-top: 10%;
  }
}


@media only screen and (min-width: 347px) and (max-width: 625px) {
  #first-img{
    margin-top: 40px;
  }
  #tourismus-img{
    padding-top: 200px;
  }
  #blank_item{
    margin-top: 20%;
  }
}

@media only screen and (min-width: 626px) and (max-width: 800px){
  #first-img{
    margin-top: 75px;
  }
  #tourismus-img{
    padding-top: 250px;
  }
  #blank_item{
    margin-top: 13%;
  }
}

@media only screen and (min-width: 813px) {
  #first-img{
    margin-top: 75px;
  }
  #tourismus-img{
    padding-top: 250px;
  }
  #blank_item{
    margin-top: 12%;
  }
}
@media only screen and (min-width: 769px) and (max-width: 812px){

  #blank_item{
    margin-top: 10%;
  }
}

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

  #blank_item{
    margin-top: 15%;
  }
}

  /* Small screen */

@media screen and (max-width: 849px) {
    #menu{
      content: url('../img/burger_icon_mobile.svg');
    } 
    #logo{
      /* content: url(img/glaskoerper_logo_master_mobile.svg); */
      content: url('../img/glaskoerper_logo_master_mobile.svg');
      background-repeat: no-repeat;
    }
}
@media screen and (max-width: 340px) {
  #menu{
    content: url('../img/burger_icon_mobile_extrasmall.svg');
  } }

    /* Big screen */
@media screen and (min-width: 850px) {

  #menu{
    content: url('../img/burger_icon.svg');
  }

  #logo{
    content: url('../img/glaskoerper_logo_master.svg');
    background-repeat: no-repeat;
  }
}

@-moz-document url-prefix() {
  @media only screen and (min-width: 347px) and (max-width: 625px) {
    #first-img{
      margin-top: 12%;
    }

    #blank_item{
      margin-top: 11%;
    }
  }
}

@supports (-ms-ime-align: auto) {
  @media only screen and (min-width: 347px) and (max-width: 625px) {
    #first-img{
      margin-top: 12%;
    }

    #blank_item{
      margin-top: 9%;
    }
  }
}


@media screen and (min-width: 762px) {
  #app-icon-def{
    width: 120%;
    height: auto;
  }
#app-download-def{
width: 75%;
height: auto;
}
.app-link{
  margin-left: 20px;
}
.app-name{
  margin-top: 0px;

  font-size:28px;
  font-weight: 600;
}

.app-desc{
  line-height: 1.35;
  font-size: 20px;
  font-weight: normal;
}

.app-title h1{
  font-size:33px;
  line-height: 1.21;
}
.app-title p{
  font-size:25px;
  line-height: 1.21;
}
.app-title b{
  font-size:29px;
  line-height: 1.21;
}
.app-title ol{
  font-size:25px;
  line-height: 1.21;
  padding-left: 10px;
}

  }
  

  ol>li {
    margin:0;
    padding:0 5em 0.5em 3em;
   text-indent:-1.5em;
    list-style-type:none;
    counter-increment:item;
  }
   
  ol>li:before {
    display:inline-block;
    width:1.5em;
    padding-right:0.5em;
    font-weight:bold;
    text-align:right;
    content:counter(item) ".";
  }
  @media screen and (max-width: 780px) {
    ol>li{
      padding:0 0 0.5em 1.5em;
    }
  }
  /* Small screen */
  @media screen and (max-width: 760px) {
    #app-icon-def{
      width: 200%;
      height: auto;
    
    }
    #app-download-def{
      width: 75%;
      height: auto;
    }
    .app-name{
      margin-top: 0px;

      font-size: 22px;
      font-weight: 600;
      line-height: 1;
    }
   
    .app-desc{
      line-height: 1.21;
      font-size:15px;
    }
    .app-title h1{
      font-size:27px;
      line-height: 1.1;
    }
    .app-title p{
      font-size:20px;
      line-height: 1.1;
    }
    .app-title b{
      font-size:24px;
      line-height: 1.1;
    }
    .app-title ol{
      font-size:22px;
      line-height: 1.1;
      padding-left: 5px;
    }
  }

    /* // Extra Small devices (landscape phones, 576px and up) */
@media (max-width: 575px) { 
  .app-name{
    margin-top: 0px;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 1;
    margin-left: 0px;
  }
  .app-desc{
    line-height: 1.21;
    font-size:13px !important;
    margin-left: 0px;
  }
  
  .content h1 {
    font-size: 27px;
  }
  .content p {
    font-size: 22px;
  }
  .content b {
    font-size: 26px;
  }
  .app-title a{
    font-size: 23px;
  }

 }
  /* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .app-name{
    margin-top: 0px;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1;
    /*margin-left: 35px;*/
  }
  .app-desc{
    line-height: 1.21;
    font-size:13px !important;
    /*margin-left: 35px;*/

  }
 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  .app-name{
    margin-top: 0px;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1;
   /* margin-left: 25px;*/

  }
  .app-desc{
    line-height: 1.21;
    font-size:15px !important;
   /* margin-left: 25px;*/

  }
 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .app-name{
    margin-top: 0px;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1;
   /* margin-left: 35px;*/

  }
  .app-desc{
    line-height: 1.21;
    font-size:15px !important;
    /*margin-left: 35px;*/

  }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .app-name{
    margin-top: 0px;
    font-size: 24px !important;
    font-weight: 600;
    line-height: 1;
    margin-left: 0px;
  }
  .app-desc{
   /*margin-left: 15px;*/
    line-height: 1.21;
    font-size:17px !important;
  }
 }

 .app-title h1 {
  font-family: 'CarioBlack', Fallback, sans-serif;
 }

 .app-title p , .app-desc{
  font-family: 'CarioRegular', Fallback, sans-serif;
 }
 .app-title ol{
  font-family: 'CarioRegular', Fallback, sans-serif;
 }

 .app-title a {
  font-family: 'CarioBold', Fallback, sans-serif;
 }

 .app-title b {
  font-family: 'CarioBold', Fallback, sans-serif;
 }
 .app-name ,  .footer a , li a {
  font-family: 'CarioBold', Fallback, sans-serif;
 }