@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

:root {
  --font-color-1: #3A3A3A;
  --itinerary-line-color: #490007;
  --itinerary-dots-color: #F3ACBC;
  --body-background: #F4C2C3;
  --count-down-banner-bck: #FFF8E6;
  --button-color: #C58F86;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Architects Daughter', cursive;
    /* color: #FFF; */
}

.textJust {
    text-align: justify;
    text-justify: inter-word;
    font-size: var(--font);
    font-family: 'Architects Daughter', cursive;
    padding: 0.4em;
    font-size: 20px;
}

.textJust2 {
    text-align: justify;
    text-justify: inter-word;
    font-size: var(--font);
    font-family: 'Architects Daughter', cursive;
    padding: 0.4em;
    font-size: 20px;
}

.textJust3 {
    text-align: justify;
    text-justify: inter-word;
    font-size: 25px;
    font-family: 'Architects Daughter', cursive;
    color: #FFF;
}


body {
    margin: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: 'Kaushan Script', cursive;
    background-color: var(--body-background);
    height: 200vh;
    color: var(--font-color-1);
    /*width: 100vw;*/
}

#background-video {
    width: 100vw;
    height: 95vh;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 8vh;
    bottom: 0;
    z-index: -1;
}

#nav {
    background-color: rgba(0,0,0,0.3);
    height: 8vh;
    color: var(--itinerary-line-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: sticky;
    z-index: 1000;
    /* top: 0;
    left: 0;
    right: 0;
    z-index: 10; */
}



.on2 {
    background: var(--button-color);
    border-radius: 20%;
    padding: 10px;
}


#date-container {

    padding: 10% 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-opt {
    font-size: 1.5em;
    font-family: 'Architects Daughter', cursive;
    padding: 8px;
}


#countdown {
    color: #C58F86;
    margin: 10% 0 20% 0;
    text-align: center;
    /*height: 10vh;*/
    background-color: var(--count-down-banner-bck);
}

#countdown li {
    display: inline-block;
    font-size: 1em;
    list-style-type: none;
    padding: 0 2em 0 2em;
    text-transform: uppercase;
    align-items: center;
}

#countdown li span {
    display: block;
    font-size: 4.5em;
    color: #C58F86;
}

#n0 {
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: 'Architects Daughter', cursive;
    height: 90dvh;
}

#n0>p {
    font-size: 1.5em;
    margin: auto;
    text-align: center;
}

#n0Save {
    width: 90%;
    height: 10vh;
}

#n0Date {
    width: 90%;
    height: 15vh;
}

/*-------------N1 stying------------*/

.title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title>img {
    margin: 5% 0;
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
}



/* #invitation {
    padding: 0 10px 0 10px;
    text-align: justify;
    text-justify: inter-word;
} */

#n1{
    height: auto;
}


#n1>#invitation>img {
    width: 40%;
    height: 40%;
    border-radius: 15%;
    object-fit: fill;
    object-position: 7% 14%;
    margin-right: 10px;
}

#n1>#invitation>p {
    /*padding: 10px 5px 0 15px;*/
    word-break: break-word;
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
    /*background-color: rgba(0, 0, 0,0.7);*/
}


#date {
    text-transform: uppercase;
    color: #7F93AF;
}

#gift {
    text-transform: uppercase;
    color: #FFE401;
}


/*-------------END N1 stying END------------*/



/*-------------N2 stying------------*/
#n2 {
    /*height: 100vh;*/
    background-color: var(--body-background);
    font-family: 'Architects Daughter', cursive;
    color: var(--font-color-1);
    margin-top: 10px;
    height: 100dvh;
}

#itinerary {
    width: 100vw;
    display: flex;
    flex-direction: column;
    height: 100vh;
}


#imgKirche {
    align-self: center;
}

#addressKirche {
    margin-bottom: 25px;
    padding: 10px 5px;
    font-size: 20px;
    word-break: break-word;
    text-align: justify;
    text-justify: inter-word;
}

.addKirche {
    text-transform: uppercase;
    color: #FFE401;
}


.timeKirche {
    text-transform: uppercase;
    color: #7F93AF;
}



/*-------------END N2 stying END------------*/


/*-------------N3 stying------------*/
#n3 {
    height: 100vh;
    /*background-color: #000;*/

    font-family: 'Architects Daughter', cursive;
    color: #FFF;
    margin-top: 10px;
    font-size: 1.5em;
    /* background: linear-gradient(15deg, #BE278A 0%, #982192 25%, #A2238F 51%, #6B1A9B 75%); */
}


#derSalon {

    padding: 10px 5px;

    width: 100vw;
    display: flex;
    flex-direction: column;

    /*background-color: #FFF;*/

}

#addressSalon {
    font-size: 20px;
    word-break: break-word;
    padding: 0 10px 0 10px;
    margin-bottom: 25px;
    text-align: justify;
    text-justify: inter-word;
}


#imgSalon {
    align-self: center;
}

.addSalon {
    text-transform: uppercase;
    color: #FFE401;
}

/*-------------END N3 stying END------------*/

/*--------------------N4 styling--------------*/

#n4 {
    background-color: #000;
    height: var(--height);
    width: var(--width);
    color: #FFF;
    display: flex;
    flex-direction: column;

}

#regImg {
    align-self: center;
    margin: 1.2em;
}

.reg {
    width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-self: center;
}

.form-item {
    display: flex;
    flex-direction: column;
}

.form-input {
    height: 1.5em;
    border-radius: 15px;
    padding-left: 12%;
    font-size: 1.3em;
}

.form-input.num {
    background-image: url("http://f.syc-mx.com/Niza/Img/phone.png");
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: -5%;

}

.form-input.name {
    background-image: url("http://f.syc-mx.com/Niza/Img/persona.png");
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: -2%;

}

.form-input.song {
    background-image: url("http://f.syc-mx.com/Niza/Img/song.png");
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: -2%;

}

.form-submit {
    width: 50%;
    height: 2.5rem;
    background-color: #000;
    border-radius: 15px;
    align-self: center;
    border-color: #6b1a9b;
    font-size: 1.2rem;
    font-family: 'Architects Daughter', cursive;
    font-weight: bold;
    color: #FFF;
}

.form-input::placeholder {
    font-family: 'Architects Daughter', cursive;
    font-weight: bold;
    font-size: 1em;
    opacity: 0.5;
    padding: 5px 10px;
}

/*-------------END N4 styling END------------*/

/*-----------Bank---------------*/

#bank {
    background-color: #CE56B7;
    /*background-image: url("/Img/liston.png");*/
    color: #FFF;
    padding: 5px 2px;
    font-size: 25px;
}

#copy {
    width: 12%;
    height: 100%;
    position: relative;
    right: -200px;
    top: -45px;
}

#div-clabe {
    height: 5vh;
}

/*-------END Bank END------*/



/*-----------------Slideshow---------------*/

/* Slideshow container */
.mySlides {
    display: none;
}

.slideshow-container {
    max-width: 1000px;
    height: 32.5vh;
    position: relative;
    margin-bottom: 5vh;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

.s_Pn {
    width: 100%;
    height: 50%;
    /*                border-radius: 15%;*/
    object-fit: fill;
}

.s_Pn1 {
    width: 100%;
    height: 40%;
    /*border-radius: 15%;*/
    object-fit: fill;
}

@keyframes fade {
    from {
        opacity: .2
    }

    to {
        opacity: 1
    }
}

/*-----------------END Slideshow END---------------*/


/*-----------Photos------------------*/

#phs {
    margin: 12px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
}

#phs2 {
    margin-bottom: 20px;
}

.phs {
    width: 50%;
    border-radius: 5%;
    object-fit: cover;
}

.phs-l {
    display: flex;
    flex-direction: row;
    word-break: break-word;
}

.phs-l>p {
    width: 50%;
    margin: 10px;
}

.ph {
    width: 75%;
    align-self: center;
}

/*-----------------END Photos END---------------*/


#sections {
    width: 100vw;
}

#front {
    width: 100vw;
}


/*-------------------Location Btn------------------*/

.location {
    display: flex;
    flex-direction: column;
}

.location>a {
    text-decoration: none;
    background-color: #f44336;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    align-self: center;
}

/*-----------------END Location Btn END------------*/




/*-------------------REgistration Btn------------------*/
#n4 {
    width: var(--pWidth);
    height: var(--pHeight);
    margin: 0;
}

#n6 {
    display: block;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.popup.hide {
    display: none;
}

.popup {
    width: var(--chWidth);
    height: 50%;
    background-color: var(--bckG);
    border-radius: var(--bR);
    margin: 10% auto;

    /* Grid display settings */
    display: grid;
    grid-template-columns: 2fr 1fr 10%;
    grid-template-rows: 80px 2fr;
    grid-template-areas:
        "title title close"
        "cont cont cont";
}

.title-popUp {
    grid-area: title;
    border-top-left-radius: var(--bR);
}

.close-popUp {
    grid-area: close;
    border-top-right-radius: var(--bR);
    color: #fff;
    font-size: 47px;
    display: flex;
}

.content-popUp {
    grid-area: cont;
    background-color: #c391c9;
    border-radius: 0 0 var(--bR) var(--bR);
}

.box1 {
    /*background-color: var(--bckGP);*/
    background-color: #671772;
    padding: 8px 0 15px 0;

}

.btn {
    background-color: var(--bckBtn);
    width: fit-content;
    padding: 10px;
    margin: 10px auto;
    border-radius: var(--bR);
    font-size: 30px;
}

#regImg2 {
    width: 54%;
    position: relative;
    left: 25%;
}


.modal-window {
    display: block;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
}



.output-sec-hidden {
    display: none;

}


#output-sec {
    display: flex;
    flex-direction: column;
}


#output-qr {
    width: 90%;
    align-self: center;

}

.output-info {
    display: flex;
    flex-direction: column;
    margin: 25px 0;
}

.centerAll {
    align-self: center;
}

#wa-sec {
    display: none;
    border-radius: 15px;
    width: 90%;
    height: 100px;
    align-self: center;
}

.wa-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.wa-text {
    align-self: center;
    color: #FFF;
    font-size: 30px;
    font-family: 'Architects Daughter', cursive;
    color: #FFF;
}

.confirm-sec label {
    color: #fff;
    font-size: 25px;
}


/*-------------------END REgistration Btn------------------*/



#device {

    background-color: #000;
    z-index: 10;

    position: fixed;
    /* Stay in place */
    /* Sit on top */
    padding-top: 50px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */

}

.device-off {
    display: none;
}

.device-on {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#device-qr {
    align-self: center;
    width: 25%;
}

#size-container {
    color: #FFF;
    align-self: center;
    font-size: 2rem;
    font-family: 'Architects Daughter', cursive;
    margin: 5% 15% 15% 15%;
}

/*-------------------Time Line------------------*/

.timeline {
    position: relative;
    max-width: 400px;
    margin: auto;
    padding: 30px 0;
}

/* vertical line */
.timeline .line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 5px;
    height: 75%;
    background: var(--itinerary-line-color);
    transform: translateX(-50%);
}

/* each item */
.item {
    position: relative;
    width: 50%;
    padding: 20px;
}

.item.left {
    left: 0;
    text-align: right;
}

.item.right {
    left: 50%;
}

/* dot */
.item::before {
    content: "";
    position: absolute;
    top: 30px;
    width: 15px;
    height: 15px;
    background: var(--itinerary-dots-color);
    border-radius: 50%;
    z-index: 1;

}

.item.left::before {
    right: -6px;
}

.item.right::before {
    left: -6px;
}

/* content box */
.content {
    background: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 200px;
}


.icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
}

.icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.event-info {
    display: flex;
    flex-direction: column;
}

.event-info>p,
.event-info>h4 {
    font-size: 1.3rem;
}

h4 {
    margin: 0;
    font-weight: bold;

}

p {
    /* color: #F2AFBC; */
    margin: 5px 0 0;
    font-style: italic;
    font-size: 1rem;
}