/* Werte für die Box-Darstellungen */
/* =============================== */

.title_box{
    /* background-color:black; */
    background: rgba(22, 7, 7, 0.4);
    margin:auto;
    width:700px;
    position:absolute;
    box-shadow: 5px 5px 6px red;
    height:100px;

}
.title_box_gdpr{
    /* background-color:black; */
    background: rgba(22, 7, 7, 0.4);
    margin:auto;
    width:700px;
    position:absolute;
    box-shadow: 5px 5px 6px red;
    height:100px;

}
.title_box_faq{
    /* background-color:black; */
    background: rgba(22, 7, 7, 0.4);
    margin:auto;
    width:700px;
    position:absolute;
    box-shadow: 5px 5px 6px red;
    height:100px;

}
.title_box_contact{
    /* background-color:black; */
    background: rgba(22, 7, 7, 0.4);
    margin:auto;
    width:700px;
    position:absolute;
    box-shadow: 5px 5px 6px red;
    height:100px;

}
.welcome_box{
    background: rgba(22, 7, 7, 0.4);
    margin:auto;
    width:700px;
    position:absolute;
    box-shadow: 5px 5px 6px red;
}
.galery{
    margin-left:0px;
    margin-right:0px;
    width:100vw;
    align-self: flex-start;
}
.einfuehrung{
    margin-top:0px;
    height:200px;
    background-color: red;
    background-image: url(../../components/media/background/IMG_0942.JPG);
    background-position:center;
}
.datenschutz{
    margin-top:0px;
    height:200px;
    background-color: red;
    background-image: url(../../uploads/images/NiNa2016_2.jpg);
    background-position:center;
}
.vereine_box{
    margin-top:0px;
    height:200px;
    background-color: red;
    background-image: url(../../components/media/vereine/verein.jpg);
    background-position:center;
}

.blackwhite {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
.bw_blur {
    filter: blur(4px);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.blur{
    filter: blur(4px);
}
.red_box_faq{
    height: 50px;
    background-color:red;
    text-align: center;

}
.red_box_contact{
    height: 50px;
    background-color:red;
    text-align: center;

}
.img_about{
    width:200px;
    height:200px;
}
.about_box{
    margin-top:0px;
    height:200px;
    background-color: red;
    background-image: url(../../uploads/images/Nippon\ Nation\ 2016\ am\ 17.07.2016\ um\ 14.21.30\ \ 10904.jpeg);
    background-position:center;
}

.contact_box{
    margin-top:0px ;
    height:200px;
    background-image: url(../../components/media/background/IMG_0942.JPG);
    background-position:center;
}
.faq_box{
    margin-top:0px;
    height:200px;
    background-image: url(../../components/media/background/NiNa2016_26750.jpg);
    background-position:center;
}
.community_box{
    margin-top:0px;
    /* height:200px; */
    background-image: url(../../components/media/background/NiNa2016_26750.jpg);
    background-position:center;
}
.vereine_box{
    margin-top:0px;
    /* height:200px; */
    background-image: url(../../components/media/background/NiNa2016_26750.jpg);
    background-position:center;
}
.gdpr_box{
    margin-top:0px;
    height:200px;
    background-color: red;
    background-image: url(../../components/media/background/NiNa2016_26750.jpg);
    background-position:center;
}
.verein_show_box{
    margin-top:0px;
    height:300px;
    /* max-height: max-content; */
    background-color: red;
    background-image: url(../../media/vereine/verein.jpg);
    background-position:center;
}

/* Abschnitte des Verein-Teils */
/* =========================== */
.game_part{
    height:200px;
    background-color: aquamarine;
}
.verein_part{
    background-color: lightseagreen;
    max-height: max-content;
}
.verein_members{
    background-color: lightcoral;
    max-height:max-content;
}
.member_part{
    /* background-color: green; */
    max-height:max-content;
}
/* ENDE Verein  */

/* Parallax-Effekte für die Intro-Boxen  */
/* ==================================== */

.parallax { 
    min-height: 200px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
/* ENDE  */



/* HOVER-Effekte für Bilder */
/* [1] The container */
.img-hover-zoom {
    height: 300px; /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }
  
  /* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    transition: transform .5s ease;
  }
  
  /* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    transform: scale(1.5);
  }

/* Quick-zoom Container */
.img-hover-zoom--quick-zoom img {
    transform-origin: 0 0;
    transition: transform .25s, visibility .25s ease-in;
  }
  
  /* The Transformation */
.img-hover-zoom--quick-zoom:hover img {
    transform: scale(2);
  }
/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
    transition: transform .5s, filter 1.5s ease-in-out;
    filter: grayscale(100%);
  }
  
  /* The Transformation */
.img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    /* transform: scale(1.1); */
  }
.overlay {
    position: absolute; 
    bottom: 0; 
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1; 
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
  }
.container:hover .overlay {
    opacity: 1;
  }
.image {
    display: block;
    /* height: auto; */
  }
div.polaroid {
    width: 400px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
  }
div.cont{
    padding: 10px 20px;
}




.member1-bg {
    background: rgb(34,193,195);
    background: linear-gradient(227deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.member2-bg{
    background: rgb(34,193,195);
    background: linear-gradient(32deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.member3-bg{
    background: rgb(34,193,195);
    background: linear-gradient(140deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.verein-bg{
    background: rgb(29,42,42);
    background: linear-gradient(227deg, rgba(29,42,42,1) 0%, rgba(126,97,35,1) 100%);
}

/* Abschnitt VEREIN */
/* ================ */

.verein_wrapper{
    background-color:blue;
    width:100%;
    height:fit-content;
    display:flex;
    flex-wrap: wrap;
    overflow:hidden;
    align-items:self-start;
    align-content: flex-start;

}
.verein_left{
    background-color:aqua;
    height:100%;
    margin-top:0px;
    width:40%;
    overflow:hidden;
    box-shadow: 5px 5px 6px black;
    /* border: 2px solid red; */
    margin-left:5px;
}
.verein_left img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.verein_fakten{
    width:29%;
    height:max-content;
    margin-left:8px;
    /* border: 2px solid red; */
    /* background-color: antiquewhite; */
}
.verein_info{
    width:100%;
    height:max-content;
    margin-left:8px;
    /* border: 2px solid red; */
    margin-top: 5px;
}
.verein_shadow{
    box-shadow: 5px 5px 6px black;
}


/* Vereinsdarstellung Mitglieder  */
/* ============================= */

.verein_mg_wrapper{
    background-color:blanchedalmond;
    width:100%;
    height:max-content;
    flex-wrap:wrap;
    overflow:hidden;
    display:flex;
    align-items:self-start;
    /* align-content: flex-start; */

}
.verein_dsmitglieder_wrapper{
    background-color:blanchedalmond;
    width:100%;
    height:max-content;
    flex-wrap:wrap;
    overflow:hidden;
    display:flex;
    
    /* align-content: flex-start; */

}
.verein_mg_card{
    width:340px;
    align-items:self-start;
    height:800px;
    border: 2px solid #bacdd8;
    padding:5px;
    overflow:hidden;
    border-radius: 8px;
    background-color: white;;
    /* display:flex; */
}   

/* Einstellungen CARDS */
/* =================== */

.header{
    height:70%;
}
.header img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
}
.card-body{
    padding: 5px 10px;
}
.title{
    background-color: aqua;
    border: 1px solid white;
    border-radius: 30px;
    padding: 4px 10px;
    cursor:ponter;
}

/* Darstellung Mitglied */
.verein_mitglied{
    min-height:900px;
    /* width:100%; */
    max-height:max-content;
    /* background-color: aliceblue; */
    background-color:blanchedalmond;
    width:100%;
    height:max-content;
}
.dsmitglieder_wrapper{
    /* background-color:blanchedalmond; */
    left:0px;
    width:100%;
    height:max-content;
    flex-wrap:wrap;
    overflow:hidden;
    display:flex;
    
    /* align-content: flex-start; */

}

/* Darstellung MITGLIED */
/* ==================== */

.mitglied_bild{
    /* background-color: blue; */
    width:33.33%;
    height:700px;
    padding:5px;
    margin-right:5px;
    /* margin-left:10px; */
    object-fit: cover;


}
.mitglied_shadow{
    box-shadow: 8px 5px 6px black;
}
.mitglied_bild img{
    width:100%;
    height:100%;
    object-fit:cover;

}
.mitglied_fakten{
    width:25.33%;
    padding:5px;
    margin-left:5px;

}
.mitglied_stats{
    width:33.33%;
    padding:5px;
    margin-left:5px;

}

/* SAFARI ENGINE  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    
.title_box{
    top: 16% !important;
    }


.title_box_faq{
    top: 12% !important;
    }
.title_box_contact{
    top: 16% !important;
    }
.title_box_gdpr{
        /* background-color:black; */
    top:17% !important;
    
}


.community_box{
    margin-bottom:0px ;

    /* margin-bottom:10px; */
    /* background-color: red;
    background-image: url(../../components/media/background/IMG_0942.JPG);
    background-position:center; */
}
.vereine_box{
    margin-bottom:0px ;

    /* margin-bottom:10px; */
    /* background-color: red;
    background-image: url(../../components/media/background/IMG_0942.JPG);
    background-position:center; */
}
.faq_box{
    margin-top:-30px ;
    /* margin-bottom:10px; */
    /* height:200px;
    background-color: red;
    background-image: url(../../components/media/background/IMG_0942.JPG);
    background-position:center; */
}
}



/* CHROME ENGINE  */
@supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*") { .selector { property:value; } 
.title_box{
    top:30% !important;
    }


.title_box_faq{
    top:30% !important;
    }
.title_box_contact{
        top:30% !important;
        }
.title_box_gdpr{
            /* background-color:black; */
        top:30% !important;
        
    }


.contact_box{
    margin-top:-30px ;
    /* height:200px;
    background-color: red;
    background-image: url(../../components/media/background/IMG_0942.JPG);
    background-position:center; */
}


}