/* Generelles */

*{
    margin: 0 0 0 0;
    padding: 0px;
    font-family: 'Encode Sans Condensed', sans-serif;
    font-size: 18px;
}


// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap


// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 

}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {

}

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) {

}


/* iPhones*/
@media screen and (min-width: 1px) and (max-width: 767px) 
    {
    .schrift {
    font-size: 1.0em;
    text-align: left;
    text-shadow: -5px 5px 10px #808080;    
    }
    
    img {
    height:25%;    
    } 
            
    .normal {
    font-size: 1.0em;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top; 
    }
        
    .big {
    font-size: 1.4em;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top;     
    } 
        
    .sichtbar {
    display:none;
    text-align: center;    
    }     
    
}    
        
/* Tablets */
@media screen and (min-width: 768px) and (max-width: 991px) 
    {
    .schrift {
    font-size: 1.5em;
    text-align: left;
    text-shadow: -5px 5px 10px #808080;      
    }
        
    img {
    height:30%;    
    }    
            
    .normal {
    font-size: 1.0em;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top; 
    }
        
    .big {
    font-size: 1.8em;
    color: darkred;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top;     
    }
        
    .sichtbar {
    display:none;
    text-align: center;    
    }     
        
}
        
/* Desktop */
@media screen and (min-width: 992px) and (max-width: 1199px) 
    {
    .schrift {
    font-size: 2.0em;
    text-align: left;
    text-shadow: -5px 5px 10px #808080;   
    }

    img {
    height:35%;    
    }  
        
    .normal {
    font-size: 1.5em;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top; 
    }
        
    .big {
    font-size: 2.5em;
    color: darkred;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top;     
    } 
    
    .sichtbar {
    display:none;
    text-align: center;    
    }     
        
}    

/* large Desktop */
@media screen and (min-width: 1200px) and (max-width: 1399px) 
    {
    .schrift {
    font-size: 2.2em;
    text-align: left;
    /* color: #018888; */
    text-shadow: -5px 5px 10px #808080;
    }

    img {
    height:40%;    
    }
        
    .normal {
    font-size: 1.5em;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top; 
    }
        
    .big {
    font-size: 3.0em;
    color: darkred;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top;     
    }  
    
    .sichtbar {
    display:flex;
    text-align: center;    
    }      
        
}  

/* iMAc and larger Desktops */
@media screen and (min-width: 1400px)
    {
    .schrift {
    font-size: 2.5em;
    text-align: left;
    text-shadow: -5px 5px 10px #808080;   
    }
    
    img {
    height:45%;    
    } 
      
    .normal {
    font-size: 2.0em;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top; 
    }
        
    .big {
    font-size: 3.5em;
    color: darkred;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    vertical-align: top;     
    }
        
    .sichtbar {
    display:flex;
    text-align: center;    
    }      
        
} 


a {
text-decoration: none;
color: #414143;
}

a hover: {
    color: darkred !important;
}

/* Schriftgrößen */

h1 {
font-size: 1.5em;
color: darkred;
font-family: 'Encode Sans Condensed', sans-serif;
text-align: center;
text-shadow:  5px  5px 5px #414143,
1px -1px 1px #414143,
-1px  1px 1px #414143,
-1px -1px 1px #414143;
}

/* icons */
h2 {
font-size: 2.0em;
color: #414143;
font-family: 'Encode Sans Condensed', sans-serif;
text-align: center;
text-shadow:  5px  5px 5px white,
1px -1px 1px white,
-1px  1px 1px white,
-1px -1px 1px white;
}

/* tabelle */
h3 {
font-size: 1.1em;
color: #414143;
font-family: 'Encode Sans Condensed', sans-serif;
text-align: center;
}

/* navigation */
h4 {
font-size: 0.8em;
color: white;
font-family: 'Encode Sans Condensed', sans-serif;
text-align: center;
}

h5 {
font-size: 1.3em;
color: #414143;
font-family: 'Encode Sans Condensed', sans-serif;
text-align: center;
text-shadow:  1px  1px 1px red,
1px -1px 1px red,
-1px  1px 1px red,
-1px -1px 1px red;
}

h6 {
font-size: 1.1rm;
color: #6b6a6a;
font-family: 'Encode Sans Condensed', sans-serif;
text-align: left;
text-transform: none;  
}

.button-margin {
    margin:5% 5% 5% 5%;
}

.white-shadow {
text-shadow:  5px  5px 5px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px  1px 1px #FFFFFF,
-1px -1px 1px #FFFFFF;
}

/* Sonderschriften */

.outline {
  color: darkred;
  -webkit-text-fill-color: darkred; /* Will override color (regardless of order) */
  -webkit-text-stroke: 2px white;
}


blockquote {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.5em;
    font-style: italic;
    color: #018888;
    background: transparent;
    border-left: 2px solid #018888;
    margin: 1.0em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
    color: #018888;
    content: open-quote;
    font-size: 2.0em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote:after {
    color: #018888;
    content: close-quote;
    font-size: 0em;
    line-height: 0em;
    margin-right: 0em;
    vertical-align: 0 em;
}

blockquote p {
    display: inline;
}


/* Bilder skalieren */

.img-fit-small {
object-fit:cover;
height: auto;
overflow: hidden ;
width: 25%;
position:relative;
padding: 1% 1% 1% 1% !important; 
display: flex;
float:left;    
}

.img-fit{
    object-fit:cover;
    height: auto;
    width: 40%;
    position:relative;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
    float:right;
}

.img-fit-big{
    object-fit:cover;
    height: auto;
    width: 50%;
    position:relative;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
    float:right;
}
.img-fit-normal{
    object-fit:cover;
    height: auto;
    width: 35%;
    position:relative;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
    float:right;
}

.img-fit-verysmall {
object-fit:cover;
height: auto;
overflow: hidden ;
width: 15%;
position:relative;
padding: 1% 1% 1% 1% !important; 
display: flex;
float:left;    
}

.img-fit_logo {
    object-fit:cover;
    height: auto;
    width: 100%;
    position:relative;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
    float:right;
    -webkit-filter: grayscale(100%); /* Chrome, Opera, Safari  */
    filter: grayscale(100%);   
    transition: width 1s, height 1s, filter 1s;
}

.img-fit_logo:hover {
    -webkit-filter: grayscale(0%); /* Chrome, Opera, Safari  */
    filter: grayscale(0%);   
}

.image-wrapper-tab{
    width: auto;
    height: 30px; 
    position:inherit;
    align-content: flex-start;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
}

.image-wrapper-tab30{
    width: auto;
    height: 30px; 
    position:inherit;
    align-content: flex-start;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
}

.image-wrapper-tab50{
    width: auto;
    height: 50px; 
    position:inherit;
    align-content: flex-start;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
}

.image-wrapper-cont{
    width: auto;
    height: 250px; 
    position:relative;
    align-content: flex-start;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
}

.image-wrapper-cont-left{
    width: 150px;
    height: auto; 
    position:relative;
    align-content: flex-start;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
}

.image-wrapper-cont-right{
    width: 150px;
    height: auto;  
    position:relative;
    align-content: flex-end;
    padding: 1% 1% 1% 1% !important; 
    display: flex;
}



.grey{
    -webkit-filter: grayscale(100%); /* Chrome, Opera, Safari  */
    filter: grayscale(100%);   
    transition: width 1s, height 1s, filter 1s;
}

.grey:hover {
    -webkit-filter: grayscale(95%); /* Chrome, Opera, Safari  */
    filter: grayscale(95%); 
}


/* Bilder mit Text umfliessen */

.leftFloat {
  float: left
}
.rightFloat {
  float: right
}

/* Container */


.cont_sec
{
    width:100vw;
    height:100vh;
    scroll-snap-type: y mandatory;
    overflow-y:scroll;
}
    
    section {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
        
        &:nth-of-type(1){
        background-color:rgb(28,28,28);
        color:green;  
        scroll-snap-align:start;    
        }
        &:nth-of-type(2){
        background-color:rgb(38,38,38);    
        color:red;    
        }
        &:nth-of-type(3){
        background-color:rgb(48,48,48);    
        color:blue;    
        }
    }   

.cont_center {
    max-width: 500px;
    width: 100%;
    
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
 }

.cont_center_border{
    border: 1px solid #CFCFCF;
    max-width: 500px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
 }

.cont_white{
    width: 100vw;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    opacity: 80%;
    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
 }


#kegel {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 95%;
    vertical-align:top;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/start_ranking3.png) !important;
}
  
#login {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: darkgray;
    vertical-align:top;
}

#bester {
    color: darkred !important;
    }
  

#cont_10 {
    height: 10vh; /* Höhe der div-Box */
 }

#cont_50 {
    height: 50vh; /* Höhe der div-Box */
    max-height: 50vh; /* Höhe der div-Box */
}

#cont_100 {
    height: 100vh; /* Höhe der div-Box */
 }


/* Effekte */

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInDownBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
  transform: translate3d(0, -2000px, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDownBig {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -2000px, 0);
  transform: translate3d(0, -2000px, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

 .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }
  @keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  } 


/* Scroll_Container */

.scroll-container,
.scroll-area {
  width: 100vw;
  height: 100vh;
}

.scroll-container {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.scroll-area:nth-of-type(1) {
  background: transparent;
}

.scroll-area:nth-of-type(2) {
  background: transparent;
}

.scroll-area:nth-of-type(3) {
  background: transparent;
}

.scroll-area:nth-of-type(4) {
  background: transparent;
}


.image-wrapper100{
width:100% !important;
height:auto !important;
position: relative;
display: block;
}

.image-wrapper50{
width:50% !important;
height:auto !important;
position: relative;
display: block;
}

.image-wrapper70{
width: 20vw !important;
height:auto !important;
position: relative;
display: block;
}

.image-wrapper30{
width:30% !important;
height:auto !important;
position: relative;
display: block;
}

.image-wrapper100 img{
width:100%;
height:auto;
display:block;
}

.image-wrapper{
max-width:33%;
height:auto;
position: relative;
display: block;
padding: 1px;
}

.image-wrapper img{
width:100% !important;
height:auto !important;
display:block;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: grayscale(100%); /* Chrome, Opera, Safari  */
filter: grayscale(100%);   
}

.image-wrapper img:hover {
width:100% !important;
height:auto !important;
display:block;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: grayscale(0%); /* Chrome, Opera, Safari  */
filter: grayscale(0%);
}