/*** General ***/

/*
#emailConfirmation{
    display:none!important;
}
*/

html, body{
    display:flex;
    flex-direction: column;
    justify-content:center;
    width:100%;
    padding:0;
    margin:0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
    border:none;
}
h1{
    font-family: 'Dancing Script', cursive;
    margin:0;
    text-align:center;
}
#modificationForm h1{
    margin:45px 0 0 0;
}
hr{
    margin:10px 0 20px 0;
    width:50px;
    border-width:0;
    background-color:black;
    height:2px;
    border-radius:2px;
}
h2{
    font-family: 'Instrument Serif', serif;
    font-size:22px;
    font-weight:400;
    margin:0!important;
}
textarea{
    resize:none;
}
.modificationTitle{
    animation: backInLeft 1s ease;
    font-family: 'Instrument Serif', serif;
    font-size:18px;
    font-weight:400;
    text-align:left;
    width:calc(80% + 40px);
    margin:15px 0 10px 10px;
}
.input{
    animation: backInLeft 1s ease;
    padding:20px;
    border-radius: 5px;
    border:1px solid rgba(0,0,0,0.4);
    outline:none;
    width:calc(100% - 40px);
}
.input:active,.input:focus,.input2:active,.input2:focus{
    border-color:#b5c3a4;
}
.btn:hover{
    cursor:pointer;
}
.input2{
    padding:20px;
    border-radius: 5px;
    border:1px solid rgba(0,0,0,0.4);
    outline:none;
    width:calc(100% - 40px);
}
.largeInput{
    min-height: 200px;
}
.btn{
    user-select:none;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#b5a378;
    padding:20px;
    color:white;
    border-radius:5px;
    margin:20px 0 5px 0;
    font-weight: 550;
    font-size:15px;
    font-family: Arial, Helvetica, sans-serif;
    width:calc(80% - 40px);
}
.secondBtn{
    user-select:none;
    background-color:#b5c3a4;
    margin:0;
}
#btnBack, #btnCancel{
    display:none;
    background-color:#ba0000;
    margin-top:-5px!important;
}
/*** General ***/


/*** MenuBar ***/
#menuBar{
    position:fixed;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:40px;
    background-color:#b5a378;
    color:white;
    border-radius:20px;
    margin:0 0 10px 0;
    padding:10px 0;
    z-index:9999999;
}
.menuItem{
    display:flex;
    align-items: center;
    justify-content: center;
}
.menuItem img{
    width:80%;
}
.menuMain{
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius:50%;
    height:200%;
    padding:0 10px;
    background-color:#b5a378;
    margin:0 30px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}
.menuMain img{
    width:52%;
}
/*** MenuBar ***/

/*** Home ***/
#home{
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    background-image: url('../img/fond.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index:1;
    font-family: 'Dancing Script', cursive;
}
.rings{
    width:10%;
    margin:60px 0 0 0;
}
#home h1{
    margin:0!important;
    font-size:25px;
    text-align:center;
    padding:0 20px;
}
.parcours{
    display:flex;
    flex-direction:row;
    justify-content: center;
    width:90%;
    padding:20px 0 50px 0;
}
.parcoursLeft{
    display:flex;
    flex-direction:column;
    width:40%;
}
.parcoursCenter{
    display:flex;
    flex-direction:column;
    align-items: center;
    width:20%;
}
.parcoursRight{
    width:40%;
}
.parcoursLine{
    position:relative;
    width:3px;
    height:710px;
    border-radius:20px;
    background-color:#b5a378;
}
.circle{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background-color:white;
    width:10px;
    height:10px;
    border-radius:50%;
    border:3px solid #b5a378;
}
.circle1{
    top:220px;
}
.circle2{
    top:390px;
}
.circle3{
    top:560px;
}
.circle4{
    top:calc(100% - 10px);
}
.location{
    font-family:'Instrument Serif', serif;
    color:black;
    font-size:15px;
    font-style: italic;
}
.lineTitle{
    font-family:'Instrument Serif', serif;
    color:black;
    font-size:15px;
    font-weight: bold;
}
.locationReverse{
    font-family:'Instrument Serif', serif;
    color:black;
    font-size:15px;
    font-style: italic;
}
.lineTitleReverse{
    top: 32px;
    font-family:'Instrument Serif', serif;
    color:black;
    font-size:15px;
    font-weight: bold;
}
.date1{
    text-align: right;
}
.date2{
    text-align: left;
    margin-top:40px;
}
.date3{
    text-align: right;
    margin-top:75px;
}
.date4{
    text-align: left;
    margin-top:40px;
}
.date5{
    text-align: left;
    margin-top:100px;
}
.datePictureImg {
    width: 130px;
    clip-path: circle();
}
.datePicture1{
    margin-top:-40px;
}
.datePicture2 {
    margin-top: 100px;
    text-align: right;
}
.datePicture3{
    margin-top:50px;
}
.datePicture4 {
    text-align: right;
    margin-top: 40px;
}
/*** Introduction ***/
.topRight{
    position:absolute;
    top:0;
    right:0;
    width:90%;
}
.title{
    font-size: 20px;
    font-family: 'Satisfy';
    padding:5vh 30px 0 30px;
    margin:70px 30px 0 0;
}
.pictures{
    padding:7vh 0 0 0;
    width:100%;
    display:flex;
    justify-content:center;
    align-items: center;
    flex-direction: row;
    margin-left: -32px;
}
.brooklynImg, .brooklynImg2, .brooklynImg3, .brooklynImg4{
    width:30%;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    transform: rotate(10deg) translateX(45px);
}
.brooklynImg2{
    transform: rotate(-10deg) translateX(25px);
}
.brooklynImg3{
    transform: rotate(10deg);
}
.brooklynImg4{
    transform: rotate(-10deg)translateX(-20px);
}
.names{
    padding:7vh 0 0 0;
    width:100%;
    font-size: 45px;
    font-weight: 400;
    font-family: 'Satisfy';
    text-align: center;
}
.ringsTitle{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0 0 0;
}
.ringsTitle img{
    width:50px;
}
/*** Introduction ***/


/*** Rebours ***/
.rebours{
    opacity:0;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    width:90%;
    padding:6vh 0 0 0;
}
.reboursItem{
    animation: pulse 2s infinite;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    padding:25px 20px;
    margin:0 5px;
    border-radius:20px;
    background-color:#b5a378;
    color:white;
    font-weight: 500;
}
#jours, #heures, #minutes{
    font-weight: 500;
    font-size: 25px;
}
/*** Rebours ***/


/*** Home ***/


/*** Planning ***/
#planning{
    background-image: url('../img/programa.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    padding: 50px 0;
}

@keyframes programa {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
        border-radius: 0;
    }

    100%{
        transform: translateY(150vh) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
.planningContainer{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    font-family: 'Instrument Serif', serif;
    text-align: center;
}
.planningContent{
    margin:0 0 10px 0;
}
.h2Houre{
    font-size:15px;
}
.h2TitlePlanning{
width:80%;
display:flex;
flex-direction: row;
align-items:center;
justify-content:center;
}
.h2hr{
    margin:2px 10px 0 10px;
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:1px;
    background-color:black;
    border-radius:1px;
}
.maps{
    -webkit-filter: grayscale(55%); 
    filter: grayscale(55%);
    margin: 0 0 20px 0;
}
/*** Planning ***/


/*** Confirmation ***/
#confirmation, #modificationForm{
    background-image: url('../img/confirmation.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    font-family: 'Instrument Serif', serif;
    padding: 50px 0 150px 0;
}
#confirmationTitle{
    animation: backInLeft 1s ease;
}
.modificationInputContainers{
    animation:backInLeft 1s ease;
    width:calc(100% - 20px);
    display:flex;
    flex-direction:column;
}
.confirmationChoice{
    display:flex;
    width:80%;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}
.btnChoiceConfirmation, .btnChoiceModifyConfirmation, .confirmationForm .btn, .modificationForm, .modificationForm .btn{
    width:calc(100% - 40px)!important;
}
.confirmationForm .btn, .modificationForm .btn{
    margin:10px 0;
}
.confirmationForm, .confirmationModification, .modificationForm{
    animation: backInLeft 1s ease;
    display:none;
    width:80%;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    margin:0 0 30px 0;
}

.confirmationModification h1{
    text-align:center;
}

.confirmationModification .btn{
    width:80%;
    margin: 3px 0;
}

.btnRed{
    background-color:#a00000;
}
.formTitle{
    margin:0 0 15px 0;
}
.titleModification{
    text-align:center;
}
.btnModifyConfirmation{
    width:calc(100% - 40px)!important;
}
.usImg{
    width: 100%;
    clip-path: circle(60%);
    margin: 10px 0 20px 0;
}
#confirmation p{
    width:100%;
    text-align:justify;
    margin: 10px 0 10px 0;
}
#phoneConfirmation{
    display:none;
}
#chiffreConfirmation, #chiffreConfirmationHotel{
    animation: backInLeft 1s ease;
    display:none;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    margin: 30px 0px 40px 0;
}
.hotelTitle{
    margin: 0 0 15px 0;
}
#datesHotel{
    display:none;
    width:100%;
}
#dateStart, #dateEnd{
    margin: 0 0 10px 0;
}
#commentaire{
    display:none;
}
.chiffreAffichage, .chiffreAffichageHotel {
    font-size: 20px;
    font-weight: 1000;
}
.chiffreBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 25px;
    font-weight: 1000;
    margin: 0 25px;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #b5a378;
    padding: 15px;
    user-select:none;
}
.chiffreBtn:active{
    background-color:#b5c3a4;
}
/*** Confirmation ***/



/** Animations **/

@keyframes error {
    from {
        margin-left: -10px;
    }
    to{
        margin-left: 10px;
    }
}

.errorShake{
    animation-name: error!important;
    animation-duration:0.05s!important;
    animation-iteration-count: 5!important;
    background-color: rgba(255, 0, 0, 0.1); 
    border-color:red;
}

@keyframes none{
    from{
        padding:20px;
    }
    to {
        padding: 20px;
    }
}

/** Animations **/


@media screen and (min-width: 600px) and (max-width: 1023px) {
    .topRight{
        width:60%;
    }
    .title{
        width:70%;
    }
    .rebours{
        opacity:1!important;
    }
}


@media screen and (min-width: 1024px) {
  body {
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  html{
    align-items:center;
    justify-content:center;
  }
  .title{
    margin:0!important;
  }
  .pictures{
    width:45%!important;
  }
  .rebours{
        opacity:1!important;
        width:50%!important;
    }
    .reboursItem{
    width: 20%;
    padding: 45px 0px;
    margin: 0 15px;
    }
    .rings{
        width: 6%;
        margin: 120px 0 0 0;  
    }
    #home h1{
        font-size:50px!important;
    }
    .parcoursLeft, .parcoursRight{
        margin-top: 40px!important;
    }
    .dateHistoria, .dateHistoriaReverse{
        font-size: 30px!important;
    }
    .location, .locationReverse{
        font-size: 20px !important;
    }
    .lineTitle, .lineTitleReverse{
        font-size: 20px !important;
    }
    .datePicture2, .date3{
        margin-top:150px!important;
    }
    .datePicture4{
        margin-top:100px!important;
    }
    .datePictureImg {
        width:190px!important;;
    }
    .parcoursCenter{
        margin-top:50px!important;
        width:10%!important;
    }
    .parcoursLine{
        height:1200px!important;;
    }
    .circle1 {
    top: 300px!important;
}
.circle2 {
    top: 600px!important;
}
.circle3 {
    top: 900px!important;
}
.datePicture1{
    margin-top:-80px!important;
}
.date2{
    margin-top:70px!important;
}
.datePicture3 {
    margin-top: 105px!important;
}
.date4 {
    margin-top: 130px!important;
}
.date5{
    margin-top: 215px!important;
}
#planning h1{
    font-size:50px!important;
}
.planningContainer{
    width:60%!important;
}
#confirmation h1{
    font-size:50px!important;
}
.confirmationChoice, .confirmationForm, .confirmationModification, .modificationForm {
    width:40%!important;
}
.confirmationForm, .confirmationModification, .modificationForm{
    padding: 100px 0 20px 0;
}
  #menuBar, .topRight{
    display:none!important;
  }
  .topRight{
    right:0!important;
  }
  .circles{
    display:none!important;
  }
}