/* Example-specific styles */

.page-wrapper {
    /*  height: 100%; */
    width: auto;
    min-height: auto;
    position: relative;
    margin: 1%;
}

.download-wrapper {
    height: 100%;
    width: 100%;
    display: none;
    position: relative;
}

.drawing-container {
    height: 55vh;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* --- Begin Video CSS --- */

.video-container {
    flex-direction: row;
    align-items: center;
    padding: 2%;
}

.video-title {
    color: #8b226a;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

.video-author {
    color: #8b226a;
    text-align: center;
}

/* Small Screen Sizing for Video Portion */
@media screen and (max-width: 1000px) {
    
    .sm-video-element {
        display: none;
    }

    .main-video-element {
        display: none;
    }
    
    .active-video-element {
        flex-grow: 1;
        padding-right: 8%;
        padding-left: 8%;
        display: block;
        -webkit-animation-name: fadeIn;
        -webkit-animation-duration: 3.0s;
        animation-name: fadeIn;
        animation-duration: 3.0s;
    }

    /* Next & previous buttons for the carousel */
    .prev-video, .next-video {
        cursor: pointer;
        position: absolute;
        top: 40%;
        width: auto;
        margin-top: -22px;
        padding: 2%;
        color: #8b226a !important;
        font-weight: bold;
        font-size: 40px;
        transition: 0.6s ease;
    }

    /* Position the "next button" to the right */
    .next-video {
        right: 0;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev-video:hover, .next-video:hover {
        background-color: lightgrey;
    }

}

/* Large Screen Sizing for Video Portion */
@media screen and (min-width: 1000px) {
    .sm-video-element {
        flex-grow: 1;
        margin: 1%;
    }
    
    .main-video-element {
        flex-grow: 2;
        padding-right: 10%;
        padding-left: 10%;
    }

    .prev-video, .next-video {
        display: none;
    }
}



/* --- End Video CSS --- */

#drawing-page {
    border: 1px solid black;
}

#narrative-page {
    background-color:  #F5F5F5;
    padding-bottom: 2%;
}

#narrative-page ul li { 
    padding: 1% 0%; 
}



.drawingBullet {
    width: 20px;
    padding-bottom: 5px;
}

.emotionalBond {
    display: none;
}

.grandparentEmotionalBond {
    display: none;
}

.bioBond {
    display: block;
}

.exLinks {
    display: none;
}

.legalBond {
    display: none;
}

.grandparentIcon {
    opacity: 0.51;
    display: none;
}

.grandma1 {
    fill: none;
    stroke: #424242;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.grandma2 {
    fill: #424242;
}

.grandpa1 {
    fill: none;
    stroke: #424242;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.grandpa2 {
    fill: #424242;
}

.grandparentBond {
    display: none;
}

.desc-container .bottomScroll a {
    color: black;
}

.desc-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#legend-container {
    height: 35%;
}

.desc-row {
    margin-right: -15px;
    margin-left: -15px;
    height: 30%;
}

.desc-col {
    float: left;
    width: 33.33333333%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.desc-narrative {
    font: Helvetica, Arial, Sans-serif;
    color: #303033;
    height: auto;
    width: 100%;
    font-size: 14pt;
}

.desc-legend {
    font: Helvetica, Arial, Sans-serif;
    color: #939393;
    width: 100%;
}

.legend-break {
    height: 1px;
    background: #939393;
}

.desc-bio, .desc-bio-flex {
    display: none;
}

.desc-legal, .desc-legal-flex {
    display: none;
}

.desc-ex, .desc-ex-flex {
    display: none;
}

.desc-emotional, .desc-emotional-flex {
    display: none;
}

.desc-grandparents, .desc-grandparents-flex {
    display: none;
}

.tombstone-1 {
    fill: silver;
}

#blendedDrawingContainer {
    display: none;
}

.desc-container {
    height: auto;
    width: 90%;
}

.legend-flex {
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: auto;
}

/** ------- Edit Drawing Features --------- */

#editDrawingContainer .personObject {
    filter: grayscale(100%);
    pointer-events: all;
}

#editDrawingContainer .activePerson, #editDrawingContainer:hover .personObject:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    cursor: pointer;
}

#editDrawingContainer .legalBond, #editDrawingContainer .emotionalBond {
    display: block;
}


.personObject {
    pointer-events: none;
}


.editInstructions {
    margin: 0 auto;
    width: 90%;
    font-size: large;
    font-style: italic;
}


/** ------- Button CSS ------- */

#narrative-page {
    display: flex;
    flex-direction: column;
}

.drawing-btn {
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin-left: auto;
    padding: 5px;
}

.editing-btn {
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin-left: auto;
    padding: 5px;
}

#videoBtn {
    /* background-color: #182258;
    border-color: #182258;
    color: white; */
    background-color: transparent;
    color: transparent;
    border-color: transparent;
}

#prevBtn {
    display: none;
    background: #fff;
    border: 1.25px solid #706d96;
    color: #192359;
}

#nextBtn, #editBondsBtn, #editPersonBtn  {
    background: #8b226a;
    border-color: #8b226a;
    color: white;
}

.prevBtn {
    background: #fff;
    border: 1.25px solid #706d96;
    color: #192359;
}

.nextBtn {
    background: #8b226a;
    border-color: #8b226a;
}


/* Large Screen Sizing for Buttons */

@media screen and (max-width: 400px) {
    #btnContainer {
        padding-top: 30px;
        width: 100%;
        margin: auto;
    }
}


/* Small Screen Sizing for Buttons */

@media screen and (min-width: 400px) {
    #btnContainer {
        padding-top: 15px;
        padding-bottom: 30px;
        width: 90%;
        margin: auto;
    }
}


/* Download Button */

.downloadBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: lightgrey;
    /* Blue background */
    border: none;
    /* Remove borders */
    padding: 12px 16px;
    /* Some padding */
    font-size: 16px;
    /* Set a font size */
    cursor: pointer;
    /* Mouse pointer on hover */
}

#blendingDownload {
    color: #8b226a;
}


/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}


/* Modal Content */

.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

#payPage .modal-content {
    position: fixed;
    overflow: hidden;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    width: 80%;
    height: 80%;
}


/* The Close Button */

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #182258;
    color: white;
}

.modal-body {
    padding: 2px 16px;
}


/* Small screen sizing of css */

@media screen and (max-width: 1000px) {
    .desc-title {
        color: #182258;
        font-size: 20px;
        font: Helvetica, Arial, Sans-serif;
        font-weight: bold;
        padding-bottom: 0px;
    }
}


/* Large screen sizing of css */

@media screen and (min-width: 1000px) {
    .desc-title {
        color: #182258;
        font-size: 30px;
        font: Helvetica, Arial, Sans-serif;
        font-weight: bold;
        padding-bottom: 0px;
    }
}


/* Add Animation */

@-webkit-keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}