.griding {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
}
.griding-singlepage {
    width: 70%;
}

.spaceWed {
    margin: 2vh 0;
}
.spaceWed10 {
    margin: 10vh 0;
}

.spaceWedTop {
    margin: 2vh 0 0;
}
.spaceWedTop10 {
    margin: 10vh 0 0;
}

.spaceEnd {
    margin-bottom: 10vh;
}

.wedding-container img {
    width: 100%;
    margin: 0 auto;
    display: block;
  
}

/* threeportraits*/
.threeportraits-flex {
    width: calc(100% / 3);
}
.threeportraits-flex img {
    width: 100% ;
}

/* fourportraits*/
.fourportraits-flex {
    width: calc(100% / 4);
}

.fourportraits-flex img {
    width: 100% ;
}

/*twoportraits*/

.twoportraits-flex {
    width: calc(100% / 2);
}

.twoportraits-flex img {
    width: 100%;
    object-fit: fit;
}

/*twoportraitsfull*/
.twoportraitsfull-flex {
    width: calc(100% / 2);
}

.twoportraitsfull-flex img {
    width: 100%;
    object-fit: fit;
}


/*oneimagelandscape*/
.oneimagelandscape-flex {
    width: 100%;
}

.oneimagelandscape-flex img {
    width: 100%;
    object-fit: fit;
}

/*imageportrait*/

.imageportrait-flex {
    width: 100%;
}

.imageportrait-flex img {
    width: 40vw;
    margin: 0 auto;
    object-fit: fit;
    margin-top: 5vh;

}

/*imagefull landscape*/

.imagefull-landscape .griding{
    width:100%;
}

.imagefull-landscape-flex {
    width: 100%;
}

.imagefull-landscape-flex img {
    width: 100%;
    object-fit: fit;
    margin-top: 5vh;
}

/*twoimagelandscapefull*/

.twoimagelandscapefull-flex {
    width: calc(100% / 2);
}

.twoimagelandscapefull-flex img {
    width: 100%;
    object-fit: fit;

}

/*threeimagelandscapefull*/

.threeimagelandscapefull-flex {
    width: calc(100% / 3);
}

.threeimagelandscapefull-flex img {
    width: 100%;
    object-fit: fit;
}


/*imagefull portrait*/

.imagefull-portrait-flex {
    width: 100%;
}

.imagefull-portrait-flex img {
    width: 100%;
    object-fit: fit;
    margin-top: 5vh;
}

/*twoimagelandscape*/

.twoimagelandscape-flex {
    width: calc(100% / 2);
}

.twoimagelandscape-flex img {
    width: 100%;
    object-fit: fit;
}

/*threeimagelandscape*/

.threeimagelandscape-flex {
    width: calc(100% / 3);
}

.threeimagelandscape-flex img {
    width: 100%;
    object-fit: fit;
}


/*oneimagelandscape-text-flex*/
.oneimagelandscape-text-flex {
    width: calc (100% /2);

}

.oneimagelandscape-text-flex img {
    width: 100%;
    object-fit: fit;
}

/*oneimageportrait-text-flex*/
.oneimageportrait-text-flex {
    width: calc(100% /2);
}

.oneimageportrait-text-flex img {
    width: 100%;
    object-fit: fit;
}

/* threeportraitsText  */
.threeportraitsTextFlex {
    width: calc(100% / 3);
}
.threeportraitsTextFlex img {
    width: 100% ;
}


.text {
    padding: 4vh 1.5vw;
    box-sizing: border-box;
}

.textCenterCenter {
    display: flex;
    align-items: center;
}








.collectionWrapper {
    position: absolute;
    width: 99vw;
    top: 100vh;
}
.collection {
    display: flex;
    height: 100vh;
    background-color: var(--white);
}

.presentationSection, .weddingDetails{
    width: 42%;
    height: 85%;
    margin: auto 9.5vh;
}

.presentationImg {
    position: relative;
    /* padding-top: 81vh; */
    height: 100%;
    transition: all ease-in-out 0.3s;
}
.weddingCollection {
    flex: 1;
}

.collectionItems {
    display: flex;
    flex-wrap: wrap;
    padding-left: 6.5vw;
    padding-top: 8.6%;
    background-color: var(--white);
}

.presentationImg1 {
    object-position: 75% 15%;
}
.collectionItems a {
    flex: 0 1 28%;
    position: relative;
    margin: 0 20px 20px 0;
}

.weddingItem {
    width: 100%;
    position: relative;
    padding-top: 100%;
}



.presentationImg img,
.weddingItem >img {
    position: absolute;
    top: 0;
}

.presentationImg > img,
.weddingItem > img,
.weddingDetailsImg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weddingItem .img1 {
    object-position: 45% 50%;
}
.weddingItem .img2 {
    object-position: 80% 50%;
}
.weddingItem .img3 {
    object-position: 66% 50%;
}
.weddingItem .img4 {
    object-position: 100% 50%;
}



.weddingDetails {
    position: absolute;
    right: 0;
    z-index: 99;
    box-sizing: border-box;
    top: 7.5%;   
}

.weddingDescription {
    position: absolute;
    z-index: 999;
    padding: 2em 3em;
    box-sizing: border-box;
}
.weddingDescriptionResp {
    display: none;
}
.weddingDetails .presentationImg {
    position: relative;
    z-index: 99;
}

.weddingDetailsImg {
    width: 100%;
    height: 100%;
}

/* add presentationImage style */
.wed1Presentation, .wed2Presentation,
.wed3Presentation,
.wed4Presentation, 
.wed5Presentation{
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
.collectionItem1:hover + .wed1Presentation,
.collectionItem2:hover + .wed2Presentation,
.collectionItem3:hover + .wed3Presentation,
.collectionItem4:hover + .wed4Presentation,
.collectionItem5:hover + .wed5Presentation     {
    opacity: 1;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}


/* Add text position */
.wed1Presentation .weddingDescription {
    bottom: 32%;
    text-align: right;
    color: white !important;
}
.wed1Presentation .weddingDescription p {
    color: var(--black);
}

.wed2Presentation .weddingDescription {
    top: 10%;
    text-align: center;
    width: 100%;
    color: white !important;
}
.wed2Presentation .weddingDescription p {
    color: var(--white);
}

.wed3Presentation .weddingDescription {
    right: 0;
    bottom: 10%;
    text-align: right;
    color: white !important;
}
.wed3Presentation .weddingDescription p {
    color: var(--white);
}
.wed4Presentation .weddingDescription {
    left: 0;
    bottom: 4%;
    width: 100%;
    text-align: center;
    color: white !important;
}
.wed4Presentation .weddingDescription p {
    color: var(--white);
}
.weddingDetailsImg .img4 {
    object-position: 100% 50%;
}
.wed5Presentation .weddingDescription {
    left: 0;
    bottom: 4%;
    width: 100%;
    text-align: center;
    color: #e2aba2 !important;
}
.wed5Presentation .weddingDescription p {
    color: var(--white);

}

.presentationImg .img1{
    object-position: 75% 50%;
}


.eventNav a {
    flex: 0 1 20%;
    height: 100%;
    margin: 2vh 0;
    color: var(--black)!important;
}
.eventNav a p { 
    color: var(--black)!important;
}

.eventNav a:hover + p {
    color: var(--headColor)!important;
}


.eventNav a:nth-child(2) {
    flex: 1;
}
.eventNav a:last-child {
    justify-content: flex-end;
}
.eventNav i {
    margin: 1em ;
}
.eventNav a:last-child i {
    justify-content: flex-end;
    margin: 1em 0 1em 1em;
}

.eventNav a:first-child i {
    margin: 1em 1em 1em 0;
}








@media only screen and (max-width: 1026px) {
    .griding-singlepage {
        width: 80%;
    }
    .text{
        flex: 1 1 100%;
    }
    .threeportraitsTextFlex {
        width: calc(100% / 2);
    }
    .context-mobile {
        margin:0 10vw;
    }
    
    .imageportrait-flex img {
        width: 100%;
    }
    .presentationSection, .weddingDetail {
        display: none;
    }
    .collectionItems {
        padding-left: 8.5vw;
        padding-right: 8.5vw;
    }

    .collectionItems > a {
        flex: 0 1 100%;
        position: relative;
        margin-right: 0;
    }
    .weddingItem {
        width: 50%;
        position: relative;
        padding-top: 50%;
        margin-right: 20px;
    }
    .weddingItem .img1 {
        object-position: 45% 50%;
    }
    .weddingItem .img2 {
        object-position: 80% 50%;
    }
    .weddingItem .img3 {
        object-position: 80% 50%;
    }
    .weddingItem .img4 {
        object-position: 100% 50%;
    }
    
    .weddingDescriptionResp {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
    }
        
    .weddingDescriptionResp * {
        margin: 0;
    }

    .weddingDescriptionResp h3 {
      font-size: 1em;
      color: var(--headColor);
    }

    .weddingDetails {
        display: none;
    }

    .eventNav a p {
        display: none;

    }
    .eventNav a p {
        display: none;
    }


 

}