/* Little Dreamers Profile Pages */

span.no-break {
       display: inline-block;
   }

#modal-player:focus { outline: none; }

#modal-player .vjs-poster,
.little-dreamers-hero .vjs-loading-spinner,
.little-dreamers-hero .vjs-big-play-button {
    display: none !important;
}

#modal-container {
    display: none;
    opacity: 0;
    position: fixed;
    z-index: 101;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.65);
    transition: all 0.6s;
    padding: 0;
}

#modal-container > div.player {
    opacity: 0;
    margin: auto;
    transition: opacity 1s;
}

#modal-container > div.player.presented {
    opacity: 1;
}

#modal-container div.close {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: -40px;
    color: white;
    font-size: 11px;
    text-shadow: 0 0 1px black;
    cursor: pointer;
}

#modal-container i.close {
    color: white;
    font-size: 34px;
    display: block;
    line-height: 28px;
}

#modal-container div.close.overlay {
    top: 5px;
    color: #444;
    text-shadow: 0 0 2px white;
}

#modal-container div.close.overlay i.close {
    color: #444;
    text-shadow: 0 0 2px white;
}

#modal-container.presented {
    opacity: 1;
}

.modal-title-bar {
    display: none;
}

@media screen and (min-height: 480px) {
    .modal-title-bar {
        position: absolute;
        display: block;
        height: 15%;
        width: 100%;
        bottom: 0;
        background-color: #ffffff;
    }
    .modal-title-bar::after {
        content: " ";
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        min-height: 20px;
        padding-bottom: 6%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1062.34' height='61.01' viewBox='0 0 1062.34 61.01'%3E%3Ctitle%3Eblue_bar%3C/title%3E%3Cpath d='M1061.67,61H0.67V30S279.17,8,531.17,8c288,0,530.5,22,530.5,22V61Z' fill='%23fff'/%3E%3Cpath d='M1061,33.94C993.19,26.35,795.2,12,531.17,12S69.14,26.35,1.33,33.94L0,22C68,14.4,266.54,0,531.17,0s463.16,14.4,531.17,22Z' fill='%23a2e7eb'/%3E%3C/svg%3E");
    }
    .modal-title-bar p {
        font-size: 36px;
        margin-top: 1.5%;
        color: #ED2939;
        text-align: center;
        position: relative;
        z-index: 1;
    }
}

@media screen and (min-height: 768px) {
    .modal-title-bar::after {

    }
    .modal-title-bar p {
        margin-top: 1.5%;
    }
}

@media screen and (min-width: 1024px) {
    .modal-title-bar::after {
         top: -25px;
    }
}
@media screen and (min-width: 1260px) {
    .modal-title-bar::after {
         top: -35px;
    }
}

@media screen and (min-height: 1024px) {
    .modal-title-bar p {
        font-size: 40px;

    }
}

main {
    display: block;
}

header.ld-hero {
    height: 0;
    padding-bottom: 60%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
header.ld-hero::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1062' height='41' viewBox='0 0 1062.67 40.97'%3E%3Ctitle%3Ebarsv2%3C/title%3E%3Cpath d='M-953.5-61.38l11.92-.47c7.77-.28,19.17-0.81,33.67-1.24s32.12-1.08,52.32-1.58l32.18-.86,35.68-.78,38.79-.82c13.4-.28,27.26-0.43,41.51-0.67,28.49-.43,58.54-0.95,89.63-1.16l47.34-.43,24.13-.22L-522-69.7l99-.3,99,0.3,24.37,0.09,24.13,0.22L-228.21-69c31.08,0.21,61.13.73,89.63,1.16,14.25,0.23,28.11.39,41.51,0.67l38.79,0.82c12.43,0.28,24.35.48,35.68,0.78L9.59-64.67c20.2,0.5,37.82,1.11,52.32,1.58s25.9,1,33.67,1.24l11.92,0.47v15h-1061v-15Z' transform='translate%28954.33 87.35%29' fill='%23fff'/%3E%3Cpath d='M107.5-53.88s-196.29-22-530.5-22-530.5,22-530.5,22' transform='translate%28954.33 87.35%29' fill='none' stroke='%23a2e7eb' stroke-miterlimit='10' stroke-width='15'/%3E%3Cpath d='M107.5-62.87s-196.29-22-530.5-22-530.5,22-530.5,22' transform='translate%28954.33 87.35%29' fill='none' stroke='red' stroke-miterlimit='10' stroke-width='5'/%3E%3C/svg%3E");
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.ld .intro-text {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    color: white;
    position: absolute;
    bottom: 40px;
    left: 16px;
    right: 0;
}

.intro-text p.name {
    font-size: 26px;
    font-weight: 600;
}

.intro-text div.info {
    margin-top: 8px;
    border-top: 2px solid #ED2939;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    width: 45%;
}

span.age {
    display: inline-block;
    width: 100%;
    line-height: 1.6;
}

span.separator {
    display: none;
}

.intro-text h2 {
    display: none;
}

.ld main {
    margin: 24px 0 0;
    text-align: center;
}

section.ld.ld-margin {
    margin: 0 16px;
}

.ld-primary-content {
    max-width: 680px;
    margin-bottom: 24px;
}

.ld main h1 {
    font-size: 40px;
    line-height: 1.2;
    color: #ED2939;
    font-weight: 400;
    max-width: 80%;
    margin: 0 auto;
}

.ld main p {
    color: #444444;
    font-size: 16px;
    line-height: 1.6;
    font-family: arial, sans-serif;
    margin-top: 16px;
    margin-bottom: 16px;
}

.ld main p a {
    color: #6629B7;
    font-weight: 600;
}

.ld main p a:hover {
    color: #6629B7;
    text-decoration: underline;
}

@media screen and (min-width: 712px) {
    .ld-primary-content {
        margin: auto;
    }
    .ld .intro-text {
        bottom: 50px;
    }
}

@media screen and (min-width: 768px) {
    header.ld-hero {
        padding-bottom: 40%;
    }

    header.ld-hero::after {
        bottom: -25px;
        height: 45px;
    }

    .ld .intro-text {
        bottom: 20%;
        margin-left: 24px;
    }

    .intro-text p.name {
        font-size: 28px;
    }

    .intro-text div.info {
        width: auto;
        font-size: 16px;
        margin-top: 12px;
        padding-top: 10px;

    }

    span.age {
        display: inline;
    }

    span.separator {
        display: inline;
        padding: 0 6px;
    }

    .intro-text h2 {
        margin-top: 30px;
        font-size: 28px;
        font-weight: 400;
        line-height: 1.2;
        width: 45%;
        display: block;
        text-shadow: 0 0 15px rgba(0,0,0,0.7);
    }

    .ld main h1 {
        max-width: 80%;
        padding-top: 40px;
    }
    #modal-container {
        /* padding: 0 4rem; */
    }
}

@media screen and (min-width: 900px) {


    .intro-text h2 {
        margin-top: 40px;
        font-size: 32px;
        width: 40%;
    }
}

@media screen and (min-width: 1024px) {
    header.ld-hero::after {
        bottom: -10px;
        height: 72px;
    }
    .ld .intro-text {
        bottom: 25%;
        margin-left: 32px;
    }
    .intro-text p.name {
        font-size: 32px;
    }

    .intro-text h2 {
        font-size: 36px;
    }
    #modal-container {
        /* padding: 0 8rem; */
    }
}

@media screen and (min-width: 1279px) {
    .ld .intro-text {
        width: 1215px;
        margin: 0 auto;
    }
    .intro-text h2 {
        margin-top: 60px;
        font-size: 40px;
    }
}