/* home home home home home home home home home home home home home home home home home home home home home home home home home home home home home home */



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    

}

body {
    background-color: black;
    max-width: 100vh;
 /*    height: 600vh; */
    scroll-behavior: smooth;
    overflow-x: hidden;
    
}

h1,
h2,
h3 {
    font-family: 'Meie Script', cursive;
}

p,
a {
    font-family: 'Farsan', cursive;

}


/* hidden sidebar hidden sidebar hidden sidebar hidden sidebar hidden sidebar hidden sidebar hidden sidebar hidden sidebar hidden sidebarhidden sidebar hidden sidebar hidden sidebar*/
.six_feet_under {
    position: fixed;
    z-index: 6;

}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    font-family: 'Meie Script', cursive;
    padding: 8px 8px 8px 32px;
    margin-bottom: 20px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.sidebar a.closebtn {
    font-family: Arial, Helvetica, sans-serif
}

.sidebar a:hover {
    color: #f1f1f1;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.openbtn {
    font-family: 'Meie Script', cursive;
    font-size: 30px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#main {
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s;
    padding: 16px;
}


/* page d'accueil page d'accueil page d'accueil page d'accueil page d'accueil page d'accueil page d'accueil  page d'accueilpage d'accueil*/


.maincontainer {
    width: 100vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
}

.mainhome {
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
}

.logohome {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
}

.logohome img {
    width: 20%;
    height: auto;
    margin: 10px 0 10px 0;
}

.pano {
    width: 100%;
    height: 65vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
}

.pano img {
    min-width: 100%;
max-height: 100%;
    object-fit: cover;
}

.picmobil {
    display: none;
}

.pictologo {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center;
    margin-top: 20px;
    
}

.picto i {

    color: white;
    font-size: 30px;
}

.picto {

    width: 300px;
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
}

.scrolldown svg {
    width: auto;
    height: 8vh;
}

#arrow {
    -webkit-animation: arrow 2s ease infinite;
            animation: arrow 2s ease infinite;
}

@-webkit-keyframes arrow {
    frome {
        opacity: 1;
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(35%);
                transform: translateY(35%);
    }


}

@keyframes arrow {
    frome {
        opacity: 1;
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(35%);
                transform: translateY(35%);
    }


}

.logo {
    width: 200px;
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    margin-right: 50px;
}

.logo img {
    width: auto;
    height: 5vh;
}

/* histoire du cimetière histoire du cimetière histoire du cimetière histoire du cimetière histoire du cimetière  histoire du cimetière histoire du cimetière histoire du cimetière histoire du cimetière */

.double_expo {
    min-height: 100vh;
    width: 100vw;
    margin: auto;
    

}

.double_expo img {
    position: absolute;
    left: 0;
    top: 100%;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 1;
    mix-blend-mode: darken;
    
}

.double_expo video {
    position: absolute;
    left: 0;
    top: 100%;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    
}

.history {
    position: absolute;
    left: 10%;
    top: 105%;
    width: 40%;
    height: 70%;
    background-color: black;
    border-radius: 10px;
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
}

.history span {
    margin-left: 30px;
}

.history h2 {

    font-size: 30px;
    text-align: center;
    color: white;
}

.history p {

    font-size: 18px;
    margin: 20px;
    text-align: justify;
 
    color: white;
    letter-spacing: 2px;

}

.story_button {
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

.cat,
.more_story {
    width: 150px;
    height: 30px;
    text-decoration: none;
    color: #00000c;
    background: white;
    border-radius: 10px;
    margin-top: 10px;
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    -webkit-box-align: center;
            align-items: center;
}

.history h3 {
    font-size: px;
    color: #353434;
}





/* Photos du cimetière Photos du cimetière Photos du cimetière Photos du cimetière Photos du cimetière Photos du cimetièrePhotos du cimetière Photos du cimetière Photos du cimetière Photos du cimetière Photos du cimetière Photos du cimetière */

.walk{
    width: 80vw;
    margin: auto;
}

.walk h3,
h4 {
    color: gray;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 50px;

}
.walk h3{
    margin-top: 100px;
}


.container {
    height: auto;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 200px 200px 200px 200px 200px 200px;
    grid-gap: 5px;
    margin: 20px;
    margin-top: 0;

}

.container .box {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    height: 100%;

}


.container .box.a,
.d,
.p,
.y,
.z {
    grid-column: span 2;
}

.container .box.c,
.g,
.h,
.i,
.m,
.t,
.u,
.x {
    grid-row: span 2;
}

.container .box img {
    position: absolute;
    top: 0;
    border: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition-duration: 2s;
            transition-duration: 2s;
}

.container .box img:hover {

    -webkit-transition-duration: 2s;

            transition-duration: 2s;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
}








/*formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contact formulaire de contactformulaire de contactformulaire de contact  */
.form {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    background-color: #383d44
}


.contact {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    width: 500px;
    height: 600px;
    background: white;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: start;
            align-items: flex-start;
    border-radius: 5px;
    opacity: 0.9;
    z-index: 1;
    padding: 10px;
}

.contact h3 {

    font-size: 2em;
    margin: 20px 0 20px;
    padding-left: 20px;
    color: #00000c;

}

.contact p {

    font-size: 1em;
    margin: 0 0 30px 20px;
}

.contact input {

    padding: 10px;
    margin-bottom: 30px;
    border-radius: 5px;
}

.contact textarea {
    height: 100px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.contact div {
    width: 95%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    padding-left: 20px;
}

.form svg {
    width: auto;
    height: 90vh;
}

#mgris1 {
    -webkit-animation: m1 6s ease infinite;
            animation: m1 6s ease infinite;
}

@-webkit-keyframes m1 {
    from {
        -webkit-transform: translateX(-150%);
                transform: translateX(-150%);
        opacity: 0.8;
    }


    to {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        opacity: 0;
    }


}

@keyframes m1 {
    from {
        -webkit-transform: translateX(-150%);
                transform: translateX(-150%);
        opacity: 0.8;
    }


    to {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        opacity: 0;
    }


}

.form svg {
    width: auto;
    height: 90vh;
}

#mgris2 {
    -webkit-animation: m2 6s ease infinite;
            animation: m2 6s ease infinite;
}

@-webkit-keyframes m2 {
    from {
        -webkit-transform: translateX(150%);
                transform: translateX(150%);
        opacity: 0.8;
    }


    to {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
        opacity: 0;
    }

}

@keyframes m2 {
    from {
        -webkit-transform: translateX(150%);
                transform: translateX(150%);
        opacity: 0.8;
    }


    to {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
        opacity: 0;
    }

}


/* plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires plan et horaires  plan et horaires  plan et horaires plan et horaires  */


.main_place_and_hours {
    display: -webkit-box;
    display: flex;
    width: 80vh;
    min-height: 100vh;
    margin: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
            

}

.map_and_hours {
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}

.adress {
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    background-image: url(ressources/images/IMG_20200116_130712.png);
    background-size: cover;

    
   max-width: 300px;
    height:auto;
    border-radius: 5px;
    padding: 0 30px;



}

.adress h3 {

    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    

}

.adress p {
    font-size: 20px;
    text-align: center;
}

iframe {
    border-radius: 5px;
    max-width: 500px;
min-height: 300px;
}

footer {
    display: -webkit-box;
    display: flex;
-webkit-box-pack: center;
        justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    
    padding-top: 70px;

}
 
footer a,h5 {
    color: white;
    font-size: 20px;
}

footer i {
    color: white;
    font-size: 20px;
    margin-left: 20px;
}


/*mediaqueries mediaqueries mediaqueries mediaqueries mediaqueries mediaqueries mediaqueries mediaqueries mediaqueries mediaqueriesmediaqueries mediaqueries mediaqueries mediaqueries mediaqueries mediaqueries */

@media screen and (max-width:1280px) {


    .pano {
        height: 60vh;
        margin: 10px 0;
        ;
    }


    .history p {
        font-size: 15px;
        margin: 20px 20px 50px 20px;
    }

    .stoty_button {
        display: -webkit-box;
        display: flex;
        justify-content: space-around;
    }



    .history h3 {
        font-size: 15px;
    }

    .walk h3 {
        margin-top: 50px;
    }
}

@media screen and (max-width:1024px) {

    .logohome img {
        width: 25%;
        height: auto;
        margin: 20px 0 10px 0;
    }

    .pano {
        height: 50vh;
        margin: 35px 0;
    }

    .history {
        height: 60%;
        width: 450px;
        margin-top: 50px;
    }

    .history h2 {
        font-size: 30px;
    }

    .history p {
        font-size: 1.1em;
        margin: 20px 20px 40px 20px;
    }

    .cat,
    .more_story {
    width: 110px;
    }
    .walk h3 {
        margin-top: 150px;
    }
  
}
 

@media screen and (max-width:700px){
    .logo {
 
        margin-right: 0px;
    }

    .logo img {
        width: auto;
        height: 3vh;
    }
    .main_place_and_hours {
        width: 95vw;
    }

.map_and_hours{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 900px;
}
.history {
    width: 85%;
    height: 60%;
    margin-top: 50px;
}

.double_expo img {
    display: none;
}

.double_expo video {
    display: none
}
.walk{
    width: 95vw;
    margin: auto;
}

}
@media screen and (max-width:600px){

    .contact{
        max-width: 300px;
    }

    .walk h3{
        font-size: 25px;
    }
    .history {
        width: 85%;
        height: 80%;
        margin-top: 100px;
    }
    .history p{
        font-size: 13px;
    }
 }

@media screen and (max-width:414px) {

    .sidebar {
        padding-top: 15px;
    }

    .sidebar a {
        font-size: 18px;
    }

    .logohome {
        -webkit-box-pack: center;
                justify-content: center;
    }

    .logohome img {
        width: 70%;
        margin: 10px 0 10px 10PX;
    }

    .pano {
        display: none;
    }

    .picmobil {
        display: block;
        width: 100%;
    }

    .picmobil img {
        width: 95%;
        max-height: 600PX;
    }

    .picto i {

        color: white;
        font-size: 1.5em;
    }



    .scrolldown svg {
        width: 80px;
        height: 5vh;
    }

    .logo img {
        height: 2.5vh;
    }

    .double_expo {
        height: 100vh;
        width: 100%;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
                align-items: center;

    }

    .double_expo img {
        display: none;
    }

    .double_expo video {
        display: none
    }

    .history {
        width: 85%;
        height: 60%;
        margin-top: 100px;
    }

    .history h2 {
        font-size: 1.5em;
    }

    .history p {
        font-size: 15px;
        margin: 20px 20px 60px 20px;


    }

    .cat,
    .more_story {
        width: 120px;
    }



    .walk h3 {
        font-size: 2em;
       
    }

    .walk h4 {
        font-size: 1.5em;
    }

    .container {
        height: auto;
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 100px 100px 100px 100px 100px;
        grid-gap: 5px;
        margin: 20px;
    }

    .form {

        width: 100vw;
        height: 100vh;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-align: center;
                align-items: center;
        background-color: #383d44
    }


    .contact {
        width: 340px;
        height: 600px;
    }

    .contact h3 {

        font-size: 2em;
        margin: 20px 0 20px;
        padding-left: 20px;
        color: #00000c;

    }

    .contact p {

        font-size: 1em;
        margin: 0 0 30px 20px;
    }

    .contact input {

        padding: 10px;
        margin-bottom: 30px;
        border-radius: 5px;
    }

    .contact textarea {
        height: 100px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .contact div {
        width: 95%;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        padding-left: 20px;
    }

    .map_and_hours {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-align: center;
                align-items: center;

    }

    .adress {
        padding: 10px;
        width: 330px;
    }

    .adress h3 {
        font-size: 3em;
    }


    iframe {
        margin-top: 20px;
        width: 330px;
    }

    footer a,h5 {
        color: white;
        font-size: 1em;
    }
 
}

@media screen and (max-width:393px) {

    .history {
        width: 85%;
        height: 70%;
    }

    .walk h3 {

        margin-top: 190px;

    }

    .walk h4 {
        font-size: 1.5em;
    }

    .form svg {
        
        height: 100vh;
    }
}