/* aleo-regular - latin */
/* aleo-300 - latin */
@font-face {
    font-family: 'Aleo';
    font-style: normal;
    font-weight: 300;
    src: url('/font/fonts/aleo-v3-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Aleo Light'), local('Aleo-Light'),
         url('/font/fonts/aleo-v3-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font/fonts/aleo-v3-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('/font/fonts/aleo-v3-latin-300.woff') format('woff'), /* Modern Browsers */
         url('/font/fonts/aleo-v3-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/font/fonts/aleo-v3-latin-300.svg#Aleo') format('svg'); /* Legacy iOS */
}
/* aleo-regular - latin */
@font-face {
font-family: 'Aleo';
font-style: normal;
font-weight: 400;
src: url('/font/fonts/aleo-v3-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Aleo Regular'), local('Aleo-Regular'),
        url('/font/fonts/aleo-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/font/fonts/aleo-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('/font/fonts/aleo-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('/font/fonts/aleo-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/font/fonts/aleo-v3-latin-regular.svg#Aleo') format('svg'); /* Legacy iOS */
}
/* aleo-italic - latin */
@font-face {
font-family: 'Aleo';
font-style: italic;
font-weight: 400;
src: url('/font/fonts/aleo-v3-latin-italic.eot'); /* IE9 Compat Modes */
src: local('Aleo Italic'), local('Aleo-Italic'),
        url('/font/fonts/aleo-v3-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/font/fonts/aleo-v3-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('/font/fonts/aleo-v3-latin-italic.woff') format('woff'), /* Modern Browsers */
        url('/font/fonts/aleo-v3-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/font/fonts/aleo-v3-latin-italic.svg#Aleo') format('svg'); /* Legacy iOS */
}
/* aleo-300italic - latin */
@font-face {
font-family: 'Aleo';
font-style: italic;
font-weight: 300;
src: url('/font/fonts/aleo-v3-latin-300italic.eot'); /* IE9 Compat Modes */
src: local('Aleo Light Italic'), local('Aleo-LightItalic'),
        url('/font/fonts/aleo-v3-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/font/fonts/aleo-v3-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('/font/fonts/aleo-v3-latin-300italic.woff') format('woff'), /* Modern Browsers */
        url('/font/fonts/aleo-v3-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/font/fonts/aleo-v3-latin-300italic.svg#Aleo') format('svg'); /* Legacy iOS */
}
/* aleo-700 - latin */
@font-face {
font-family: 'Aleo';
font-style: normal;
font-weight: 700;
src: url('/font/fonts/aleo-v3-latin-700.eot'); /* IE9 Compat Modes */
src: local('Aleo Bold'), local('Aleo-Bold'),
        url('/font/fonts/aleo-v3-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/font/fonts/aleo-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('/font/fonts/aleo-v3-latin-700.woff') format('woff'), /* Modern Browsers */
        url('/font/fonts/aleo-v3-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/font/fonts/aleo-v3-latin-700.svg#Aleo') format('svg'); /* Legacy iOS */
}
/* aleo-700italic - latin */
@font-face {
font-family: 'Aleo';
font-style: italic;
font-weight: 700;
src: url('/font/fonts/aleo-v3-latin-700italic.eot'); /* IE9 Compat Modes */
src: local('Aleo Bold Italic'), local('Aleo-BoldItalic'),
        url('/font/fonts/aleo-v3-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/font/fonts/aleo-v3-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('/font/fonts/aleo-v3-latin-700italic.woff') format('woff'), /* Modern Browsers */
        url('/font/fonts/aleo-v3-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/font/fonts/aleo-v3-latin-700italic.svg#Aleo') format('svg'); /* Legacy iOS */
}

:root { 
    font-size: calc(0.8rem + 0.4vw);
}

body {
    font-family: "Aleo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: regular;
    color: #666;
    font-size: 1.0em;
    background: #ccc;
    font-weight: 300;
    letter-spacing: 0.025em;
}

#app {
    position: absolute;
}

.navbar-brand {
    display: inline-block;
    max-width: 70vw;
    overflow: hidden;
    cursor: auto;
}

#p5dmMenu {
    padding: 0.25rem 0.5rem 0.35rem 0.5rem;
    background: #fc0;
}


#p5dmBody {
    font-size: calc(0.5rem + 0.5vw);
    line-height: 1.2em;
    background: #def;
}
#p5dmChartCol div {
    /* border: 1px solid green; */
}
#p5dmChartCol, 
#p5dmDescriptionCol {
    /* position: relative; */
    display: flex;
    margin-bottom: 1.5rem;
}
#p5dmText {
    font-size: calc(0.7rem + 0.5vw);
    line-height: 1.2em;
}
#p5dmText .blockquote {
    display: inline-block;
    font-size: calc(0.7rem + 0.5vw);
}
#p5dmText .blockquote .blockquote-footer {
    display: inline-block;
    font-size: calc(0.6rem + 0.5vw);
}
#app h1, 
#app h2, 
#app h3, 
#app h4 {
    font-weight: 300;
    line-height: 1.2em;
    text-align: left;
    margin: 0;
}

#app h1 {
    font-size: calc(1.1rem + 0.5vw);
}
#app h2, 
#app h3 {
    font-size: calc(0.9rem + 0.5vw);
}
#app h4 {
    font-size: calc(0.6rem + 0.5vw);
}

#p5dmHeader {
    background: #def;
}
#p5dmFooter {
}







/* Views */
.p5dmBbText, 
.p5dmABText {
    color: #000;
}
.p5dmAaText, 
.p5dmAbText, 
.p5dmBaText {
    color: #fff;
}
.p5dmLink {
    cursor: pointer;
    text-decoration: underline;
}
.p5dmP5DSet {
    --p5d-view-full: 95vw;
}
.p5dmP5DSet table {
    padding: 0;
    border-spacing: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}
.p5dmP5DSet td {
    /* border: 1px solid red; */
}
.p5dmP5DSet th {
    font-weight: 300;
}
@media (max-width: 575px) {
    .p5dmP5DSet, 
    .p5dmP5DSet table {
        width: var(--p5d-view-full);
    }
}
@media (min-width: 576px) {
    .p5dmP5DSet, 
    .p5dmP5DSet table {
        width: calc(var(--p5d-view-full) / 2);
    }
}

/* Sets View */
#p5dmSets {
    --p5d-view-height-p5d: calc(var(--p5d-view-full) / (470.6 / 300.5) / 9);
}
#p5dmSets table {
    background-image: url('/img/view/view_10.svg');
}
@media (max-width: 575px) {
    #p5dmSets table {
        height: calc(var(--p5d-view-height-p5d) * 10);
    }
    #p5dmSets tbody tr {
        height: calc(var(--p5d-view-height-p5d) * 9 / 3);
    }
    #p5dmSets tfoot {
        height: calc(var(--p5d-view-height-p5d) * 1);
    }
}
@media (min-width: 576px) {
    #p5dmSets table {
        height: calc(var(--p5d-view-height-p5d) / 2 * 10);
    }
    #p5dmSets tbody tr {
        height: calc(var(--p5d-view-height-p5d) / 2 * 9 / 3);
    }
    #p5dmSets tfoot {
        height: calc(var(--p5d-view-height-p5d) / 2 * 1);
    }
}

/* System View */
#p5dmSystem {
    --p5d-view-height-system: calc(var(--p5d-view-full) / (396.9 / 283.5) / 9);
}
#p5dmSystem table {
    background-image: url('/img/view/view_20.svg');
}
@media (max-width: 575px) {
    #p5dmSystem table {
        height: calc(var(--p5d-view-height-system) * 9);
    }
    #p5dmSystem tbody tr {
        height: calc(var(--p5d-view-height-system) * 9 / 3);
    }
}
@media (min-width: 576px) {
    #p5dmSystem table {
        height: calc(var(--p5d-view-height-system) / 2 * 9);
    }
    #p5dmSystem tbody tr {
        height: calc(var(--p5d-view-height-system) / 2 * 9 / 3);
    }
}


/* Matrix View */
#p5dmMatrix {
    --p5d-view-height-matrix: calc(var(--p5d-view-full) / ((297.6 * 3)/(297.6 * 2)) / 9);
}
#p5dmMatrix table {
    background-image: url('/img/view/view_30.svg');
    background-position: top right;
}
@media (max-width: 575px) {
    #p5dmMatrix table {
        background-size: calc(var(--p5d-view-full) / 3 * 2);
    }
    #p5dmMatrix tbody tr {
        height: calc(var(--p5d-view-height-matrix) * 9 / 3);
    }
    #p5dmMatrix tfoot {
        height: calc(var(--p5d-view-height-matrix) * 1);
    }
}
@media (min-width: 576px) {
    #p5dmMatrix table {
        background-size: calc(var(--p5d-view-full) / 2 / 3 * 2);
    }
    #p5dmMatrix tbody tr {
        height: calc(var(--p5d-view-height-matrix) / 2 * 9 / 3);
    }
    #p5dmMatrix tfoot {
        height: calc(var(--p5d-view-height-matrix) / 2 * 1);
    }
}


/* Halfpipe View */
#p5dmHalfpipe .p5dmAaText, 
#p5dmHalfpipe .p5dmAbText, 
#p5dmHalfpipe .p5dmBaText {
    color: #000;
}
#p5dmHalfpipe {
    --p5d-view-height-halfpipe: calc(var(--p5d-view-full) / (396.9 / 269.3) / 9);
}
#p5dmHalfpipe table {
    background-image: url('/img/view/view_40.svg');
    background-position: bottom center;
}
@media (max-width: 575px) {
    #p5dmHalfpipe table {
        height: calc(var(--p5d-view-height-halfpipe) * 10);
    }
    #p5dmHalfpipe tbody tr {
        height: calc(var(--p5d-view-height-halfpipe) * 9 / 3);
    }
    #p5dmHalfpipe thead {
        height: calc(var(--p5d-view-height-halfpipe) * 1);
    }
}
@media (min-width: 576px) {
    #p5dmHalfpipe table {
        height: calc(var(--p5d-view-height-halfpipe) / 2 * 10);
    }
    #p5dmHalfpipe tbody tr {
        height: calc(var(--p5d-view-height-halfpipe) / 2 * 9 / 3);
    }
    #p5dmHalfpipe thead {
        height: calc(var(--p5d-view-height-halfpipe) / 2 * 1);
    }
}


/* Tetralemma View */
#p5dmTetralemma .p5dmAaText, 
#p5dmTetralemma .p5dmAbText, 
#p5dmTetralemma .p5dmBaText {
    color: #000;
}
#p5dmTetralemma {
    --p5d-view-height-tetralemma: calc(var(--p5d-view-full) / (396.9 / 269.3) / 9);
}
#p5dmTetralemma table {
    background-image: url('/img/view/view_60.svg');
    background-position: center right;
}
/* #p5dmTetralemma table th, 
#p5dmTetralemma table td {
        border: 1px solid red;
} */
#p5dmTetralemma .p5dmAaText, 
#p5dmTetralemma .p5dmBbText, 
#p5dmTetralemma .p5dmAbText, 
#p5dmTetralemma .p5dmBaText, 
#p5dmTetralemma .p5dmABText {
    display: inline-block;
    background-color: rgb(221,238,255, 0.8);
    padding: 0.2em;
    line-height: 1.3em;
}
#p5dmTetralemma .col-1, 
#p5dmTetralemma .col-2 {
    width: 14.285714%; /* 1/7 */
} 
#p5dmTetralemma .col-3, 
#p5dmTetralemma .col-4 {
    width: 28.571429%; /* 2/7 */
} 
#p5dmTetralemma .col-5 {
    width: 42.857134%; /* 3/7 */
} 
#p5dmTetralemma .col-8 {
    width: 57.142857%;; /* 4/7 */
} 

@media (max-width: 575px) {
    #p5dmTetralemma table {
        background-size: calc(var(--p5d-view-full) / 10 * 8);
        height: calc(var(--p5d-view-height-tetralemma) * 11);
    }
    #p5dmTetralemma tbody tr {
        height: calc(var(--p5d-view-height-tetralemma) * 3);
    }
    #p5dmTetralemma thead {
        height: calc(var(--p5d-view-height-tetralemma) * 2);
    }
}
@media (min-width: 576px) {
    #p5dmTetralemma table {
        background-size: calc(var(--p5d-view-full) / 2 / 10 * 8);
        height: calc(var(--p5d-view-height-tetralemma) / 2 * 11);
    }
    #p5dmTetralemma tbody tr {
        height: calc(var(--p5d-view-height-tetralemma) / 2 * 3);
    }
    #p5dmTetralemmae thead {
        height: calc(var(--p5d-view-height-tetralemma) / 2 * 2);
    }
}


/* YinYang View */
#p5dmYinYang .p5dmAaText, 
#p5dmYinYang .p5dmAbText, 
#p5dmYinYang .p5dmBaText {
    color: #000;
}
#p5dmYinYang {
    --p5d-view-height-yinyang: calc(var(--p5d-view-full) / (396.9 / 269.3) / 10);
}
#p5dmYinYang table {
    background-image: url('/img/view/view_70.svg');
    background-position: center right;
}
/* #p5dmYinYang table th, 
#p5dmYinYang table td {
        border: 1px solid red;
} */
#p5dmYinYang .p5dmAaText, 
#p5dmYinYang .p5dmBbText, 
#p5dmYinYang .p5dmAbText, 
#p5dmYinYang .p5dmBaText { 
    color: #fff;
}

@media (max-width: 575px) {
    #p5dmYinYang table {
        background-size: calc(var(--p5d-view-full) / 6.0 * 5);
        height: calc(var(--p5d-view-height-yinyang) * 10 / 6);
    }
    #p5dmYinYang tbody tr {
        height: calc(var(--p5d-view-height-yinyang) * 3);
    }
    #p5dmYinYang tr.p5dmSpecialRow {
        height: calc(var(--p5d-view-height-yinyang) * 1.65);
    }
}
@media (min-width: 576px) {
    #p5dmYinYang table {
        background-size: calc(var(--p5d-view-full) / 2 / 6.0 * 5);
        height: calc(var(--p5d-view-height-yinyang) / 2 * 10 / 6);
    }
    #p5dmYinYang tbody tr {
        height: calc(var(--p5d-view-height-yinyang) / 2 * 3);
    }
    #p5dmYinYang tr.p5dmSpecialRow {
        height: calc(var(--p5d-view-height-yinyang) / 2 * 1.65);
    }
}


/* Value Square View */
#p5dmValueSquare {
    --p5d-view-height-valuesquare: calc(var(--p5d-view-full) / ((297.6 * 3)/(297.6 * 2)) / 9);
}
#p5dmValueSquare table {
    background-image: url('/img/view/view_50.svg');
    background-position: top right;
}
@media (max-width: 575px) {
    #p5dmValueSquare table {
        background-size: calc(var(--p5d-view-full) / 3 * 2);
    }
    #p5dmValueSquare tbody tr {
        height: calc(var(--p5d-view-height-valuesquare) * 9 / 3);
    }
    #p5dmValueSquare tfoot {
        height: calc(var(--p5d-view-height-valuesquare) * 1);
    }
}
@media (min-width: 576px) {
    #p5dmValueSquare table {
        background-size: calc(var(--p5d-view-full) / 2 / 3 * 2);
    }
    #p5dmValueSquare tbody tr {
        height: calc(var(--p5d-view-height-valuesquare) / 2 * 9 / 3);
    }
    #p5dmValueSquare tfoot {
        height: calc(var(--p5d-view-height-valuesquare) / 2 * 1);
    }
}







#p5dmRowB {
    position: relative;
}
#p5dmRowB #p5dmAB {
    position: absolute;
}
/* @media (max-width: 480px) and (orientation: portrait) { */
    #p5dmChartCol { 
        /* width: 100vw;
        min-width: 100vw; */
        padding-right: 1.0rem;
        justify-content: center;
    }
    #p5dmDescriptionCol {
        min-width: 160px;
    }
        
/* }
 and (orientation: landscape)
*/
@media (min-width: 481px) {
    #p5dmChartCol { 
        /* width: 100vh;
        min-width: 100vh; */
        padding-right: 1.0rem;
        justify-content: center;
    }
    #p5dmDescriptionCol {
        min-width: 160px;
    }
}

#p5dmHeader {
    padding: 0.5rem 0 1.5rem 0;
}
#p5dmFooter {
}
.p5dmParent {
    display: inline-block;
    max-width: 65vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
#p5dmParent.p5dmLink, 
.p5dmSegment .p5dmLink {
    cursor: pointer;
    text-decoration: underline;
}





.dropdown-item i {
    display: inline-block;
    min-width: 1.0rem;
    visibility: hidden;
}
.dropdown-item.selected i {
    visibility: visible;
}




/* Start Area */
@media (orientation: portrait) {
    #p5dmStartArea {
        padding-top: 3.75vh;
    }
}
@media (orientation: landscape) {
    #p5dmStartArea {
        padding-top: 7.5vh;
    }
}

#p5dmTitleCard {
    background-color: #036;
    cursor: pointer;
} 
#p5dmModelCard {
    background-color: #19334C;;
    cursor: pointer;
}
.p5dmFullCard {
    color: #fff;
    display: flex;
    justify-content: center;
    align-content: flex-end;
}
.p5dmFullCardImage {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#p5dmTitleCard .p5dmFullCardImage {
    background-image: url('/img/p5d_logo_white.svg');
} 
#p5dmModelCard .p5dmFullCardImage {
    background-image: url('/img/model/model_00.svg');
}

.p5dmFullCard h1, 
.p5dmFullCard h2, 
.p5dmFullCard h3 {
    justify-content: center;
    line-height: 1.5em;
    letter-spacing: 0.75rem;
    text-transform: uppercase;
    padding-left: 2.0rem;
    padding-right: 2.0rem;
}
.p5dmFullCard h4 {
    padding-left: 2.0rem;
    padding-right: 2.0rem;
}

@media (orientation: portrait) {
    .p5dmFullCard {
        height: 45.0vh;
    }
    .p5dmFullCard h1, 
    .p5dmFullCard h3 {
        height: 7.5vh;
    }
    .p5dmFullCardImage {
        height: 25.0vh; 
    }
    .p5dmFullCard h2, 
    .p5dmFullCard h4 {
        height: 12.5vh;
    }
    #p5dmSectionTheory, 
    #p5dmSectionPractice {
        height: 50.0vh;
    }
    #p5dmSectionCards h3 {
        height: 6.25vh;
    }
    #p5dmSectionCards div div {
        height: 18.75vh;
    } 
    #p5dmSectionCards .p5dmSectionImage {
        height: 25.0vh;
    } 
}
@media (orientation: landscape) {
    .p5dmFullCard {
        height: 90.0vh;
    }
    .p5dmFullCard h1, 
    .p5dmFullCard h3 {
        height: 15.0vh;
    }
    .p5dmFullCardImage {
        height: 50.0vh; 
    }
    .p5dmFullCard h2, 
    .p5dmFullCard h4 {
        height: 25.0vh;
    }
    #p5dmSectionTheory, 
    #p5dmSectionPractice {
        height: 87.5vh;
    }
    #p5dmSectionCards h3 {
        height: 12.5vh;
    }
    #p5dmSectionCards div div {
        height: 32.5vh;
    } 
    #p5dmSectionCards .p5dmSectionImage {
        height: 42.5vh;
    } 
}

#p5dmSectionCards {
    display: flex;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
}
#p5dmSectionCards h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(0.6rem + 0.5vw);
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.75rem;
    text-transform: uppercase;
}
#p5dmSectionCards div div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1.5em;
    font-size: calc(0.5rem + 0.5vw);
}
#p5dmSectionCards .blockquote {
    display: block; 
    font-size: calc(0.7rem + 0.5vw);
    color: inherit;
}
#p5dmSectionCards .blockquote .blockquote-footer {
    display: block; 
    font-size: calc(0.6rem + 0.5vw);
    color: inherit;
    margin-top: 0.5em;
}
#p5dmSectionCards cite {
    display: block; 
    margin-top: 0.5em;
}

#p5dmSectionTheory, 
#p5dmSectionPractice {
}
#p5dmSectionModel {
    background-color: #19334C;
    color: #fff;
}
#p5dmSectionTheory {
    background-color: #579;
    color: #fff;
} 
#p5dmSectionPractice {
    background-color: #abc;
    color: #333;
} 
#p5dmSectionCards .p5dmSectionImage {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#p5dmSectionTheory .p5dmSectionImage {
    background-image: url('/img/p5d_theory_white.svg');
} 
#p5dmSectionPractice .p5dmSectionImage {
    background-image: url('/img/p5d_practice_black.svg');
}
#p5dmSectionModel .p5dmSectionImage {
    background-image: url('/img/model/model_00.svg');
} 
@media (orientation: landscape) {
    #p5dmSectionModel .p5dmSectionImage {
        background-size: 50%;
    }
}
#p5dmSectionModelText {
    text-align: center;
}




/* Theory Area */
#p5dmTheoryArea {
}
#p5dmPerspectiveCarousel {
    background-color: #def; 
    color: #333;
}
#p5dmBlackBoxCarousel {
    background-color: #cde; 
    color: #333;
}
#p5dmLayerCarousel {
    background-color: #d8e8f8; 
    color: #333;
}
#p5dmSystemCarousel {
    background-color: #036; 
    color: #fff;
}
#p5dmViewCarousel {
    background-color: #369; 
    color: #fff;
}
#p5dmTheoryArea .carousel h5 {
    font-size: calc(0.6rem + 0.5vw);
    margin-top: 0;
    margin-bottom: 0.5rem;
    letter-spacing: 0.75rem;
    text-transform: uppercase;
    font-weight: 300;
}
#p5dmTheoryArea .carousel p {
    font-size: calc(0.6rem + 0.5vw);
}


@media (orientation: portrait) {
    #p5dmTheoryArea .carousel {
        height: 50.0vh;
    }
    #p5dmTheoryArea img {
        height: 50.0vh;
    }
    #p5dmTheoryArea .carousel-caption {
        top: 10.0vh;
        bottom: 0;
    }
    #p5dmSystemCarousel .carousel-caption, 
    #p5dmViewCarousel .carousel-caption {
        top: 5.0vh;
        bottom: 0;
    }
}
@media (orientation: landscape) {
    #p5dmTheoryArea .carousel {
        height: 100.0vh;
    }
    #p5dmTheoryArea img {
        height: 100.0vh;
    }
    #p5dmTheoryArea .carousel-caption {
        top: 15.0vh;
        bottom: 0;
    }
}




/* Model Area */
#p5dmModelArea {
}
#p5dmMethodsCarousel {
    background-color: #003366; 
    color: #fff;
}
#p5dmOperationsCarousel {
    background-color: #336699; 
    color: #fff;
}
#p5dmSummaryCarousel {
    background-color: #19334C; 
    color: #fff;
}
#p5dmModelArea .carousel h5 {
    font-size: calc(0.6rem + 0.5vw);
    margin-top: 0;
    margin-bottom: 0.5rem;
    letter-spacing: 0.75rem;
    text-transform: uppercase;
    font-weight: 300;
}
#p5dmModelArea .carousel p {
    font-size: calc(0.6rem + 0.5vw);
}


@media (orientation: portrait) {
    #p5dmModelArea {
        /* height: 50.0vh; */
    }
    #p5dmModelArea .carousel {
        height: 50.0vh;
    }
    #p5dmModelArea img {
        height: 50.0vh;
    }
    #p5dmModelArea .carousel-caption {
        top: 7.5vh;
        bottom: 0;
    }
}
@media (orientation: landscape) {
    #p5dmModelArea {
        /* height: 100.0vh; */
    }
    #p5dmModelArea .carousel {
        height: 100.0vh;
    }
    #p5dmModelArea img {
        height: 100.0vh;
    }
    #p5dmModelArea .carousel-caption {
        top: 15.0vh;
        bottom: 0;
    }
}




/* P5D Area */
#p5dmP5DArea {
}
#p5dmHistoryCarousel {
    background-color: #d8e8f8; 
    color: #333;
}
#p5dmBasicsCarousel {
    background-color: #003366; 
    color: #fff;
}
#p5dmValidityCarousel {
    background-color: #cde; 
    color: #333;
}
#p5dmEffectCarousel {
    background-color: #336699; 
    color: #fff;
}

#p5dmP5DArea .carousel h5 {
    font-size: calc(0.6rem + 0.5vw);
    margin-top: 0;
    margin-bottom: 0.5rem;
    letter-spacing: 0.75rem;
    text-transform: uppercase;
    font-weight: 300;
}
#p5dmP5DArea .carousel p {
    font-size: calc(0.6rem + 0.5vw);
}


@media (orientation: portrait) {
    #p5dmP5DArea {
        /* height: 50.0vh; */
    }
    #p5dmP5DArea .carousel {
        height: 50.0vh;
    }
    #p5dmP5DArea img {
        height: 50.0vh;
    }
    #p5dmP5DArea .carousel-caption {
        top: 7.5vh;
        bottom: 0;
    }
}
@media (orientation: landscape) {
    #p5dmP5DArea {
        /* height: 100.0vh; */
    }
    #p5dmP5DArea .carousel {
        height: 100.0vh;
    }
    #p5dmP5DArea img {
        height: 100.0vh;
    }
    #p5dmP5DArea .carousel-caption {
        top: 15.0vh;
        bottom: 0;
    }
}




/* Footer Area */
#p5dmFooterArea {
    padding: 3.0rem 0 3.0rem 0;
    font-size: 0.8rem;
}
#p5dmFooterArea div {
}
#p5dmFooterArea a {
    color: #036;
}
@media (orientation: portrait) {
    #p5dmFooterArea {
        height: 50.0vh;
    }
}    




/* highlightTyped use mark */
.autocomplete-menu mark {
    text-decoration: underline;
    background: none;
    color: currentColor;
    padding: 0;
}