/*© Ulrich Lantschik | alpincrypt.com*/

* {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #141414;
}

.logonewlink {
    width: 200px;
    height: auto;
}

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1E1E1E;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 7s infinite ease;
  overflow-y: hidden;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 6s infinite ease-in;
  overflow-y: hidden;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}




/*Navigationbar*/

ul {
	list-style-type: none;
  margin: 0;
	padding: 15px;
  overflow: hidden;
}

.link {
	float: right;
  font-size: 22px;
	transition: all 0.2s ease-in-out;
	border-radius: 100px 100px 100px 100px;
  letter-spacing: 1px;
  margin: 30px;
}

.logo {
  float: left;
  transition: all 0.2s ease-in-out;
  margin-left: 30px;
  margin-top: 14px;
  cursor: default;
}

.logosize {
  height: auto;
  width: 150;
}

li a {
  display: block;
  color: #fff;
  padding: 18px 29px;
  text-decoration: none;
  transition: all 0.4s ease-in-out;

}

.special {
  display: block;
  color: white;
  padding: 18px 29px;
  text-decoration: none;
  background-color: #fff;
  color: #2c2c2c;

}


li a:hover {
  background-color: #fff;
  color: #2c2c2c;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 20px #000;
}

.special:hover {
   -webkit-transition: background-color 0.3s ease-out;
  -moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
  background-color: #2c2c2c;
  color: #fff;
  box-shadow: 0 0 20px #000;
}



/*Hintergrund*/

.main {
  background-color: #2c2c2c;
  height: 1100px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("img/original-min.gif");
  background-attachment: fixed;
  text-align: center;
}



.logo1 {
  width: 500px;
  height: auto;
  margin-top: 100px;
  transition: all 0.3s ease-in-out;
}

.hintergrund2 {
  height: 650px;
  width: 100%;
  text-align: justify;
  padding-top: 20px;
  background-color: #141414;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("img/keyif_shisha_club_background2.jpg");
}

.hintergrund3 {
  background-color: #141414;
  height: 1000px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;s
  background-size: cover;
  background-image: url("img/keyif_shisha_club_background1.jpg");
  text-align: center;
  padding-top: 60px;
}

.hintergrund25 {
  background: rgb(2,0,36);
  background: linear-gradient(297deg, rgba(2,0,36,1) 0%, rgba(212,22,122,1) 57%, rgba(0,212,255,1) 100%);
  height: 300px;
  width: 76%;
  text-align: center;
  padding-top: 60px;
  transform: skew(1deg, 1deg);
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 20px #050404;
}

/*Text styling*/

h1 {
  text-align: center;
  font-size: 50px;
  cursor: default;
  color: #fff;
  font-family: 'Joesfin Sans' sans-serif;
}

h2 {
  padding-top: 30px;
  text-align: center;
  font-size: 30px;
  cursor: default;
  color: #fff;
  font-family: 'Joesfin Sans' sans-serif;
}

.title1 {
  text-align: center;
  font-size: 45px;
  cursor: default;
  color: #fff;
  font-family: 'Joesfin Sans' sans-serif;

}


.line {
  height: 8px;
  width: 15%;
  background-color: #000;
  margin: auto;
  text-align: center;
}

.quote {
  font-size: 25px;
  margin-top: 30px;
  cursor: default;
  color: #fff;
}

.text {
  font-size: 24px;
  margin-top: 30px;
  margin-left: 20%;
  margin-right: 20%;
  cursor: default;
  color: #fff;
  line-height: 30px;

}

/*Scrollbar*/

::-webkit-scrollbar {
  width: 18px;
}

::-webkit-scrollbar-track {
  background: #F1F1F1;
}

::-webkit-scrollbar-thumb {
  background: #e91e63;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff6090;
}

/*Links & Impressum*/


a:visited {
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}

.imprint {
  height: 300px;
  background: rgb(46,46,46);
background: linear-gradient(119deg, rgba(46,46,46,1) 12%, rgba(40,40,40,1) 100%);
  color: #fff;
  padding-top: 20px;

}

.imprinttitle {
  color: #fff;
  font-size: 20px;
  margin-left: 200px;
}

/*Button Styling*/

.button {
  text-align: center;
  padding: 25px;
  background-color: #fff;
  color: #000;
  margin: auto;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.55s ease-in-out;
  font-size: 23px;
  font-family: 'Josefin Sans', sans-serif;
  margin-bottom: 20px;

}

.button:hover {
  transition: all 0.25s ease-in-out;
  background-color: #1a1a1a;
  color: #fff;
  box-shadow: 0 0 20px #9b9b9b;
  border-style: solid;
  border-color: #1a1a1a;
  transform: skew(1deg, 1deg)
}


/*Links*/

a {
  color: #fff;
  transition: all 0.35s ease-in-out;
}

a:hover {

}

.impressum {
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #fff;
}

.impressum:hover {
  text-decoration: underline;
}

.insta {
  height: 40px;
  width: 40px;
  transition: all 0.25s ease-in-out;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 10px 10px 10px 10px;
}

.insta:hover {
  transform: scale(1.05, 1.05);
  transition: all 0.1s ease-in-out;
  background-color: black;

}

.opening {
  text-align: center;
  font-size: 30px;
  color: white;
}


    .h12 {
      font-family: 'Josefin Sans', sans-serif; font-size: 55px; color: #fff; padding-top: 20px;
    }



/*mobile*/

@media only screen and (min-width: 300px) and (max-width: 400px) {

    .logo1 {
      width: 360px;
      height: 238.8px;
    }

    .logosize {
      height: 0;
      width: 0;
    }

    .maps {
      width: 260px;
      height: 400;
    }

    .imprinttitle {
      margin-left: 20px;
    }

    .main {
      height: 700px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("img/original-min.gif");
      background-attachment: scroll;
    }

    .h1 {
      font-size: 35px;
    }

    .text {
      margin-left: 15px;
      margin-right: 15px;
    }

    .h12 {
      margin-top: 60px;
      font-size: 35px;
    }

    .opening {
      font-size: 20px;
    }

    .hintergrund3 {
      height: 800px;
    }

    .link {
      font-size: 20px;
      float: none;
      margin: 5px;
    }

    #myBtn {
      bottom: 20px;
      right: 30px;
      padding: 22px;
      border-radius: 50px;
      font-size: 10px;
      transition: all 0.5s ease-in-out;
      box-shadow: 0 0 10px #000;
    }

    .imprint {
      text-align: center;
    }

    .text {
      font-size: 20px;
    }

    .button {
      padding: 15px;
      font-size: 15px;
    }

  }

  @media only screen and (min-width: 401px) and (max-width: 500px) {

      .logo1 {
        width: 360px;
        height: 238.8px;
      }

      .logosize {
        height: 0;
        width: 0;
      }

      .maps {
        width: 350px;
        height: 400;
      }

      .imprinttitle {
        margin-left: 20px;
      }

      .main {
        height: 700px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("img/original-min.gif");
        background-attachment: scroll;
      }

      .h1 {
        font-size: 35px;
      }

      .text {
        margin-left: 15px;
        margin-right: 15px;
      }

      .h12 {
        margin-top: 60px;
        font-size: 35px;
      }

      .opening {
        font-size: 20px;
      }

      .hintergrund3 {
        height: 800px;
      }

      .link {
        font-size: 20px;
        float: none;
        margin: 5px;
      }

      #myBtn {
        bottom: 20px;
        right: 30px;
        padding: 22px;
        border-radius: 50px;
        font-size: 10px;
        transition: all 0.5s ease-in-out;
        box-shadow: 0 0 10px #000;
      }

      .imprint {
        text-align: center;
      }

    }

    @media only screen and (min-width: 501px) and (max-width: 600px) {

        .logo1 {
          width: 432px;
          height: 286.56px;
        }

        .logosize {
          height: 0;
          width: 0;
        }

        .maps {
          width: 350px;
          height: 400;
        }

        .imprinttitle {
          margin-left: 20px;
        }

        .main {
          height: 700px;
        }

        .h1 {
          font-size: 35px;
        }

        .text {
          margin-left: 15px;
          margin-right: 15px;
        }

        .h12 {
          margin-top: 60px;
          font-size: 35px;
        }

        .opening {
          font-size: 20px;
        }

        .hintergrund3 {
          height: 800px;
        }

        .link {
          font-size: 20px;
          float: none;
          margin: 5px;
        }

        #myBtn {
          bottom: 20px;
          right: 30px;
          padding: 22px;
          border-radius: 50px;
          font-size: 10px;
          transition: all 0.5s ease-in-out;
          box-shadow: 0 0 10px #000;
        }

        .imprint {
          text-align: center;
        }

      }

      @media only screen and (min-width: 601px) and (max-width: 700px) {

          .logo1 {
            width: 432px;
            height: 286.56px;
          }

          .logosize {
            height: 0;
            width: 0;
          }

          .maps {
            width: 500px;
            height: 400;
          }

          .imprinttitle {
            margin-left: 20px;
          }

          .main {
            height: 700px;
          }

          .h1 {
            font-size: 40px;
          }

          .text {
            margin-left: 15px;
            margin-right: 15px;
          }

          .h12 {
            margin-top: 60px;
            font-size: 40px;
          }

          .opening {
            font-size: 20px;
          }

          .hintergrund3 {
            height: 800px;
          }

          .link {
            font-size: 20px;
            float: none;
            margin: 5px;
          }

          #myBtn {
            bottom: 20px;
            right: 30px;
            padding: 22px;
            border-radius: 50px;
            font-size: 15px;
            transition: all 0.5s ease-in-out;
            box-shadow: 0 0 10px #000;
          }

          .imprint {
            text-align: center;
          }

        }

        @media only screen and (min-width: 701px) and (max-width: 800px) {

            .logo1 {
              width: 432px;
              height: 286.56px;
            }

            .logosize {
              height: 0;
              width: 0;
            }

            .maps {
              width: 500px;
              height: 400;
            }

            .imprinttitle {
              margin-left: 20px;
            }

            .main {
              height: 700px;
            }

            .h1 {
              font-size: 45px;
            }

            .text {
              margin-left: 15px;
              margin-right: 15px;
            }

            .h12 {
              margin-top: 60px;
              font-size: 45px;
            }

            .opening {
              font-size: 25px;
            }

            .hintergrund3 {
              height: 900px;
            }

            .link {
              font-size: 25px;
              float: none;
              margin: 5px;
            }

            #myBtn {
              bottom: 20px;
              right: 30px;
              padding: 22px;
              border-radius: 50px;
              font-size: 15px;
              transition: all 0.5s ease-in-out;
              box-shadow: 0 0 10px #000;
            }

            .imprint {
              text-align: center;
            }

          }

          @media only screen and (min-width: 801px) and (max-width: 900px) {

              .logo1 {
                width: 432px;
                height: 286.56px;
              }

              .logosize {
                height: 0;
                width: 0;
              }

              .maps {
                width: 500px;
                height: 400;
              }

              .imprinttitle {
                margin-left: 50px;
              }

              .main {
                height: 700px;
              }

              .h1 {
                font-size: 45px;
              }

              .text {
                margin-left: 15px;
                margin-right: 15px;
              }

              .h12 {
                margin-top: 60px;
                font-size: 45px;
              }

              .opening {
                font-size: 25px;
              }

              .hintergrund3 {
                height: 900px;
              }

              .link {
                font-size: 25px;
                float: none;
                margin: 5px;
              }

              #myBtn {
                bottom: 20px;
                right: 30px;
                padding: 22px;
                border-radius: 50px;
                font-size: 15px;
                transition: all 0.5s ease-in-out;
                box-shadow: 0 0 10px #000;
              }

              .imprint {
                text-align: left;
              }

            }

            @media only screen and (min-width: 901px) and (max-width: 1000px) {

                .logo1 {
                  width: 648px;
                  height: 429.84px;
                }

                .logosize {
                  height: 0;
                  width: 0;
                }

                .maps {
                  width: 700px;
                  height: 500px;
                }

                .imprinttitle {
                  margin-left: 50px;
                }

                .main {
                  height: 700px;
                }

                .h1 {
                  font-size: 45px;
                }

                .text {
                  margin-left: 15px;
                  margin-right: 15px;
                }

                .h12 {
                  margin-top: 60px;
                  font-size: 45px;
                }

                .opening {
                  font-size: 25px;
                }

                .hintergrund3 {
                  height: 900px;
                }

                .link {
                  font-size: 25px;
                  float: right;
                  margin: 5px;
                }

                #myBtn {
                  bottom: 20px;
                  right: 30px;
                  padding: 22px;
                  border-radius: 50px;
                  font-size: 15px;
                  transition: all 0.5s ease-in-out;
                  box-shadow: 0 0 10px #000;
                }

                .imprint {
                  text-align: left;
                }

              }

              @media only screen and (min-width: 1001px) and (max-width: 1100px) {

                  .logo1 {
                    width: 648px;
                    height: 429.84px;
                  }

                  .logosize {
                    height: 0;
                    width: 0;
                  }

                  .maps {
                    width: 700px;
                    height: 500px;
                  }

                  .imprinttitle {
                    margin-left: 50px;
                  }

                  .main {
                    height: 700px;
                  }

                  .h1 {
                    font-size: 45px;
                  }

                  .text {
                    margin-left: 10%;
                    margin-right: 10%;
                  }

                  .h12 {
                    margin-top: 60px;
                    font-size: 45px;
                  }

                  .opening {
                    font-size: 25px;
                  }

                  .hintergrund3 {
                    height: 900px;
                  }

                  .link {
                    font-size: 25px;
                    float: right;
                    margin: 5px;
                  }

                  #myBtn {
                    bottom: 20px;
                    right: 30px;
                    padding: 22px;
                    border-radius: 50px;
                    font-size: 15px;
                    transition: all 0.5s ease-in-out;
                    box-shadow: 0 0 10px #000;
                  }

                  .imprint {
                    text-align: left;
                  }

                }


                @media only screen and (min-width: 1101px) and (max-width: 1200px) {


                  .logosize {
                    height: 80px;
                    width: auto;
                  }
                    .logo1 {
                      width: 300px;
                      height: auto;
                    }

                  }

                  @media only screen and (min-width: 1201px) and (max-width: 1315px) {


                    .logosize {
                      height: 80px;
                      width: auto;
                    }
                      .logo1 {
                        width: 300px;
                        height: auto;
                      }

                    }