/*
@font-face {
  font-family: 'Baskerville2';
  src: url('../assets/baskerville.ttf') format('truetype');
}
*/

/*###########################
######## General ############
###########################*/
body{
    background: url("../assets/Footer.png");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 1040px;
}

@media(max-width: 575px){
    body{
        background-size: 600px;
    }
}

h1{
    font-style: italic;
    letter-spacing: 4px;
}
h2{
    letter-spacing: 1px;
}
h4{
    letter-spacing: 3px;
}
h5{
    font-size: 38px;
}
p{
    font-size: 24px;
    font-style: italic;
}


@media (max-width: 575px){
    h1{
        font-style: italic;
        letter-spacing: 4px;
        font-size: 32px;
    }
    h2, h5{
        font-size: 32px;
    }
    h4{
        letter-spacing: 3px;
        font-size: 18px;
    }
    p{
        font-size: 18px;
    }
}

.Character-Spacing-20{
    letter-spacing: 20px;
}

.Character-Spacing-1{
    letter-spacing: 1px;
}

.GrayText{
    color: #979797;
}

.RedText{
    color: #751b30;
}



.Link{
    border-bottom: 1px solid #751b30;
}
.Link:hover {
    text-decoration: none;
    border: none;
    border-bottom: 1px solid #370d17;
}



.footer {
    text-align: center;
    border: none;
    height: 500px;
    padding-top: 5rem;
}

/*###########################
######## NavBar #############
###########################*/
nav{
    height: 109px;
    background-color: white;
}

@media (min-width: 1400px){
    nav{
        background: url("../assets/flower_bouquet_Header.png");
        background-repeat: no-repeat;
        background-color: white;
    }
}

.nav-item{
    border-left: 1px solid #cfcfcf;
}

@media (max-width: 991px){
    .nav-item{
        border: none;
        border-top: 1px solid #cfcfcf;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .nav-item:first-child, :last-child{
        border-top: none;
    }
}

.nav-item:first-child, :last-child{
    border-left: none;
}

.active .nav-link{
    font-weight: bold;
}

.nav-link{
    letter-spacing: 3px;
}


@media (max-width: 991px){
    .NavBarContainer{
        padding-left: 2.5rem;
        padding-top: 3rem;
        padding-right: 4rem;
        width: 18rem;
        border-left: 1px solid #cfcfcf;
        background-color: white;
        float: right;
        height: 100vh;
    }
}

@media (min-width: 1400px){
    #KCNavBar {
        padding-left: 320px;
        background-color: transparent;
    }
}






.icon-bar {
	width: 22px; 
	height: 2px;
	background-color: black;
	display: block;
	transition: all 0.2s;
	margin-top: 4px
}
 
.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
 
.navbar-toggler .middle-bar {
  opacity: 0;
}
 
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
 
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
 
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
 
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}
 



/*###########################
######## Main ###############
###########################*/
main{
    padding-top: 109px;
}

@media (min-width: 1400px){
    main{
        background: url("../assets/flower_bouquet_Header.png");
        background-repeat: no-repeat;
        background-position: top 0px left 0px;
    }
}

.max-width {
    max-width: 560px;
}


main .container-min-height{
    border-bottom: 1px solid #cfcfcf;
    padding-top: 8rem;
    padding-bottom: 8rem;
}





/*###########################
######## Index ##############
###########################*/
.Karin-Bild {
    padding-left: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 1em;
    background: url('../assets/blume-karin.png');
    background-size: 60%;
    background-repeat: no-repeat;
    width: 50%;
    max-width: 500px;
    margin-left: auto;
}

.Carlo-Bild {
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 1em;
    background: url('../assets/blume-carlo.png');
    background-position: bottom right;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 50%;
    max-width: 500px;
    margin-right: auto;
}




/*###########################
######## Personen ###########
###########################*/
.Beginn-K {
    margin-bottom: 0px;
    margin-right: 30%;
}

.Beginn-C {
    margin-bottom: 0px;
    margin-left: 30%;
    text-align: right;
}





/*###########################
######## Hochzeitstag #######
###########################*/
.Img-Bouquet {
    background: url("../assets/flower_bouquet_6.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 421px;
    padding-top: 5rem;
}

@media (max-width: 991px){
    .Img-Bouquet {
        background-size: 330px;
    }
}

@media (max-width: 767px){
    .Img-Bouquet {
        background-size: 280px;
        background-position: bottom center;
    }
}


.TimeLine {
    border-right: 1px solid #751b30;
    text-align: center;
}

.Container-TimeLine {
    max-width: 850px;
}


.GrayLine {
    position: absolute;
    bottom: 25px;
    width: 138px;
    height: 1px;
    border-bottom: 1px solid #979797;
}

@media (max-width: 767px){
    .GrayLine {
        left: 50%;
        margin-left: -69px;
    }
}



/*###########################
######## Galerie ############
###########################*/
.gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 33%;
    -moz-column-width: 33%;
    column-width: 33%;
}

@media (max-width: 991px){
    .gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-width: 50%;
        -moz-column-width: 50%;
        column-width: 50%;
    }
}

@media (max-width: 575px){
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        -moz-column-width: 100%;
        column-width: 100%;
    }
}



/*###########################
######## Anmeldung ##########
###########################*/

#Form-Anmeldung {
    font-size: 1.4rem;
    max-width: 540px;
}

#Form-Anmeldung input, #Form-Anmeldung textarea{
    font-size: 1.4rem;
}

#Form-Anmeldung .form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
#Form-Anmeldung .form-check-label{
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0.5rem;
    left: 0;
    height: 1rem;
    width: 1rem;
    border: 1px solid black;
}

.radiomark{
    position: relative;
    top: 0.09rem;
    display: inline-block;
    height: 1.1rem;
    width: 1.1rem;
    border: 2px solid gray;
    border-radius: 1.1rem;
    margin-right: 0.5rem;
    
}
#Form-Anmeldung .form-check:hover input + label > .checkmark {
    background-color: #ccc;
}
#Form-Anmeldung .input-radio + label:hover > .radiomark{
    background-color: #ccc;
}
#Form-Anmeldung .input-radio:checked + label > .radiomark{
    background-color: #751b30;
    border: none;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
#Form-Anmeldung .form-check input:checked + label > .checkmark:after {
    display: block;
}
.radiomark::after {
    content: "";
    position: relative;
    display: none;
}
#Form-Anmeldung .input-radio:checked + label > .radiomark::after {
    display: block;
}
#Form-Anmeldung .form-check .checkmark:after {
    left: 0.5rem;
    top: -0.5rem;
    width: 0.36rem;
    height: 1.2rem;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#Form-Anmeldung .radiomark::after {
    left: 0.35rem;
    top: 0.12rem;
    width: 0.4rem;
    height: 0.7rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#Form-Anmeldung .form-check {
    display: block;
    position: relative;
    padding-left: 1.6rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/*----- Anmelden-Radios Collapsibles ------*/
.form-hide{
    display: none;
    height: 0px;
}
#Anmelden-2:checked + label + input + label + input + label + .form-hide{
    display: block;
    height: auto;
}

#Anmelden-2:checked + label + input + label + input + label + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Anmelden-2:checked + label + input + label + input + label + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Anmelden-2:checked + label + input + label + input + label + .form-hide + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Anmelden-2:checked + label + input + label + input + label + .form-hide + .form-hide + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}

#Anmelden-1:checked + label + input + label + .form-hide{
    display: block;
    height: auto;
}

#Anmelden-1:checked + label + input + label + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Anmelden-1:checked + label + input + label + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Anmelden-1:checked + label + input + label + .form-hide + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Anmelden-1:checked + label + input + label + .form-hide + .form-hide + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}

#Abmelden:checked + label + .form-hide{
    display: block;
    height: auto;
}
#Abmelden:checked + label + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Abmelden:checked + label + .form-hide + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}
#Abmelden:checked + label + .form-hide + .form-hide + .form-hide + .form-hide + .form-hide{
    display: block;
    height: auto;
}



/*--- Collapsible ---*/
.wrap-collapsible {
}

.wrap-collapsible input[type='checkbox'] {
  display: none;
}


.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 350px;
}


.lbl-toggle {
    cursor: pointer;
}

#collapsible + .lbl-toggle:before{
    content: "+ Begleitung hinzufügen";
}

#collapsible:checked + .lbl-toggle:before{
    content: "- Begleitung löschen";
}

.form-control{
    border: 1px solid #ddd;
}


/*###########################
######## Timer ##############
###########################*/
.timer__label{
    font-size: 24px;
    font-style: italic;
}

.timer__number{
    height: 1.1882em;
}

@media (max-width: 575px){
    .timer__label{
        font-size: 18px;
        font-style: italic;
    }
}