@import url('./plugin-extensions/datatables.net/extensions.css');
@import url('./plugin-extensions/datatables.net/overrides.css');

.services {
    padding: 15px !important;
}

    .services h2 {
        text-align: left;
        margin-left: 0px;
        width: 50%;
        border-bottom: solid 3px rgba(205,92,92,0.8);
        border-left: solid 3px rgba(205,92,92,0.8);
        padding-bottom: 10px;
    }

        .services h2:before {
            content: none;
        }

        .services h2::after {
            left: 0;
            right: 0;
            width: 100%;
            border: none;
            border-left: solid 3px rgba(204,138,153, 0.8);
            border-bottom: solid 3px;
            border-color: rgba(204,138,153, 0.8);
            width: 90%;
            bottom: 0;
            border-color: rgba(204,138,153, 0.8);
            margin-bottom: 3px;
        }

footer {
    padding: 20px 0;
    background-color: antiquewhite;
}

    footer * {
        color: black;
    }


    footer h3 {
        margin: 5px auto 5px;
    }

    footer img {
        height: 180px;
        width: 180px;
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
        margin: 0px auto 20px;
    }

img {
    opacity: 1;
    transition: opacity 1.5s;
}

    img.lazy-load {
        opacity: 0;
    }

.hero-heading {
    font-family: "Lovers Quarrel";
    font-size: 20vw;
    line-height: 80%;
}


.hero-heading-about {
    font-family: "Fredericka the Great"; /*Bungee+Shade|Dancing+Script|Fredericka+the+Great|Monoton|Petit+Formal+Script|Raleway+Dots|*/
    font-size: 100px;
    line-height: 80%;
    margin-left: 20px;
}

.hero-heading-portfolio {
    font-family: "Monoton"; /*Bungee+Shade|Dancing+Script|Fredericka+the+Great|Monoton|Petit+Formal+Script|Raleway+Dots|*/
    font-size: 10vw;
    line-height: 80%;
}

.hero-tag-line {
    font-family: "Dancing Script";
    font-size: 30px;
}

.intro {
    display: table;
    width: 100%;
    height: 50vh;
    text-align: center;
    color: white;
    background-position: top;
    background-size: cover;
    background-color: #000;
}

    .intro .intro-body {
        display: table-cell;
        vertical-align: middle;
        background-color: rgba(0, 0, 0, 0.2);
    }

        .intro .intro-body .brand-heading {
            font-size: 40px;
            font-family: Pristina;
            font-weight: lighter;
            margin-bottom: 0;
            color: white;
        }

.faded-background {
    background-color: rgba(0, 0, 0, 0.05);
}

.intro .intro-body .intro-text {
    font-size: 18px;
    font-family: 'Yu Gothic';
}

@media(min-width:768px) {
    .intro {
        height: 500px;
        padding: 0;
    }

        .intro .intro-body .brand-heading {
            font-size: 110px;
        }

        .intro .intro-body .intro-text {
            font-size: 30px;
        }
}

.navbar-inverse {
    background-color: #CC8A99;
    border: none;
    border-radius: 0;
}

    .navbar-inverse .navbar-nav {
        float: none !important;
        display: inline-block;
        margin: 0 auto;
    }

        /*Fredericka+the+Great|Kalam|Kaushan+Script|Monoton|Open+Sans|Open+Sans+Condensed:300|Petit+Formal+Script|Raleway+Dots|Roboto+Condensed:300|Roboto:300,400|Ruthie|Sacramento|Tangerine');*/
        .navbar-inverse .navbar-nav > li > a {
            color: white;
            padding-right: 10px;
            padding-left: 10px;
            font-size: 30px;
            font-family: "Open Sans Condensed";
        }

            .navbar-inverse .navbar-nav > li > a.menu-divider {
                font-family: Arial;
            }

            .navbar-inverse .navbar-nav > li > a:not(.menu-divider ):hover {
                background-color: white;
                color: #CC8A99;
            }

.info-block {
    border: 1px solid rgba(0,0,0,0.08);
    padding: 5px;
}

    .info-block.text {
        box-shadow: rgba(0,0,0,0.25) 0 0 2px 1px;
        padding: 5px;
        border: none;
    }

.intro-collage {
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw;
    grid-template-rows: 20vw 20vw;
    grid-gap: 15px;
    justify-content: center;
}

@media(max-width: 500px) {

    .intro-collage {
        display: grid;
        grid-template-columns: 30vw 30vw;
        grid-template-rows: 30vw 30vw 30vw 30vw;
        grid-gap: 15px;
        justify-content: center;
    }

        .intro-collage > *:nth-child(3) {
            order: -1 !important;
        }

        .intro-collage > *:nth-child(6) {
            order: 2 !important;
        }
}

.intro-collage p {
    font-size: 30px;
    font-family: "Dancing Script","Petit Formal Script",Tangerine;
}

.intro-collage > *:nth-child(2n) {
    transform: translateY(5px);
}

.intro-collage img {
    transform: rotateZ(3deg);
}

.intro-collage .bg-pink {
    transform: rotateZ(-3deg);
    background-color: antiquewhite;
}


.inline-hero-image {
    height: 60vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    margin: 10px 0;
}

.descriptive-text {
    max-width: 80%;
    padding: 25px;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.1);
    border-left: 6px solid #CC8A99;
}

.about-makeup {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    /* grid-template-rows: minmax(max-content, 1fr); */
}

.social-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
}

    .social-container a {
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, 0);
        border-radius: 50%;
        color: white !important;
        float: left;
        margin-right: 5px;
    }

.social-buttons {
    overflow: hidden;
    display: inline-block;
}

.social-button.contact-button {
    background-color: transparent !important;
}

    .social-button.contact-button i {
        color: slategray !important;
    }

@media (min-width: 687px) {
    .social-button {
        font-size: 20px;
        display: table;
        float: left;
        margin: 0;
    }
}

.social-button {
    width: 75px;
    height: 75px;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    bottom: 2%;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: rgba(205,92,92,0.55);
    font-family: "Open Sans", sans-serif;
    border-radius: 50%;
}

    .social-button i {
        color: white;
    }

    .social-button:hover {
        background-color: white;
        color: indianred;
    }

        .social-button:hover i {
            color: rgba(205,92,92, 1);
        }

.about-me-layout {
    display: grid;
    grid-template-columns: repeat(2, 40vw);
    justify-content: center;
}

.makeup-summary {
    display: grid;
    grid-template-columns: repeat(6, var(--summary-services-width));
    grid-template-rows: repeat(6, var(--summary-services-height));
    justify-content: center;
    margin-bottom: 15px;
}

    .makeup-summary img {
        filter: grayscale();
    }

        .makeup-summary img:hover {
            filter: brightness(1.1);
        }

        .makeup-summary img:hover {
            transition: all 0.2s ease-in-out;
        }

        .makeup-summary img:hover {
        }

    .makeup-summary p {
        font-size: 18px;
        font-family: "Open Sans Condensed";
        padding: 5px;
    }

    .makeup-summary h3 {
        font-family: Tangerine;
        font-weight: normal;
        font-size: 60px;
        width: initial;
        transform: rotateZ(-50deg);
    }

    .makeup-summary > *:nth-child(1) {
        grid-area: 1 / 1 / span 2 / span 2;
    }

    .makeup-summary > *:nth-child(2) {
        grid-area: 3 / 5 / span 2 / span 2;
    }

    .makeup-summary > *:nth-child(3) {
        grid-area: 5 / 1 / span 2 / span 2;
    }

    .makeup-summary > *:nth-child(4) {
        grid-area: span 2 / span 2;
    }

    .makeup-summary > *:nth-child(5) {
        grid-area: span 2 / span 2;
    }

    .makeup-summary > *:nth-child(6) {
        grid-area: span 2 / span 2;
    }

    .makeup-summary > *:nth-child(7) {
        grid-area: span 2 / span 2;
    }

    .makeup-summary > *:nth-child(8) {
        grid-area: span 2 / span 2;
    }

    .makeup-summary > *:nth-child(11) {
        grid-area: span 2 / span 2;
    }

.makeup-gallery2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30vh, 1fr));
    grid-template-rows: minmax(max-content, 1fr);
}

    .makeup-gallery2 img {
        height: 30vh;
    }

.countries-worked {
    display: grid;
    width: 50%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: center;
    margin: 0 auto 50px;
}

.section-block {
    width: 84vw;
    margin: 0 auto;
}

.about-section {
    padding: 30px;
}

    .about-section:nth-child(2n) {
        background-color: antiquewhite;
    }

.resume p {
    padding: 5px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0,0.15);
    margin-bottom: 15px;
}

.show-reel-intro {
    display: grid;
    grid-template-columns: 60vw calc(20vw + 60px);
    grid-template-rows: 40vw;
    justify-content: center;
    margin-bottom: 15px;
}

    .show-reel-intro .video-description {
        border: 1px solid #eee;
        border-right: 5px solid rgba(205,92,92,0.8);
        padding: 20px;
        margin: 0px auto;
        max-width: 1000px;
        font-size: 18px;
        font-family: "Open Sans";
    }

        .show-reel-intro .video-description .btn-default {
            background-color: rgba(205,92,92,1);
            color: white;
            border-color: rgba(204,138,153, 1);
            font-family: sans-serif;
        }

            .show-reel-intro .video-description .btn-default:hover {
                background-color: rgba(204,138,153, 1);
                color: white;
            }

.footer-info {
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr;
    grid-template-rows: minmax(max-content, 1fr);
}

@media(max-width: 700px) {
    .footer-info {
        display: flex;
        flex-direction: column;
    }

        .footer-info > * {
            width: 80vw;
            margin: 0 auto;
        }

        .footer-info .divider {
            display: none;
        }

    .makeup-summary h3 {
        transform: initial;
        font-size: 35px;
    }

    .makeup-summary {
        width: 80vw;
        margin: 0 auto;
    }
}

.footer-info-2 {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    grid-template-rows: minmax(max-content, 1fr);
}

.portfolio-countries {
    display: grid;
    grid-template-columns: 30vw 30vw;
    grid-template-rows: 20vw 20vw;
    grid-gap: 15px;
    justify-content: center;
}

@media(min-width: 601px) and (max-width: 800px) {
    .portfolio-countries {
        grid-template-columns: 30vw 30vw;
        grid-template-rows: 30vw 30vw;
    }
}

@media(max-width: 600px) {
    .portfolio-countries {
        grid-template-columns: 60vw;
        grid-template-rows: repeat(4, 60vw);
    }
}

.portfolio-countries .city-background {
    background-size: cover;
}

.portfolio-countries .faded-background {
    background-color: rgba(0,0,0,0.4);
}

    .portfolio-countries .faded-background:hover {
        background-color: rgba(0,0,0,0);
    }

.portfolio-countries .city-label {
    font-family: Pristina;
    color: white;
    font-size: 40px;
    transition: all ease-in-out 0.2s;
}

.portfolio-countries .faded-background:hover > .city-label {
    color: rgba(255,255,255,0.2);
}

.portfolio-makeup {
    display: grid;
    grid-template-areas: "pm1 pm1 pm2 pm-description" "pm3 pm4 pm6 pm-description" "pm5 pm5 pm6 pm-description";
    grid-template-columns: repeat(4, var(--portfolio-block-width));
    grid-template-rows: repeat(3, var(--portfolio-block-height));
    justify-content: center;
}

    .portfolio-makeup .description {
        grid-area: pm-description;
        background-color: black;
    }

        .portfolio-makeup .description h3 {
            color: white;
        }

    .portfolio-makeup .pm1 {
        grid-area: pm1;
    }

    .portfolio-makeup .pm2 {
        grid-area: pm2;
    }

    .portfolio-makeup .pm3 {
        grid-area: pm3;
    }

    .portfolio-makeup .pm4 {
        grid-area: pm4;
    }

    .portfolio-makeup .pm5 {
        grid-area: pm5;
    }

    .portfolio-makeup .pm6 {
        grid-area: pm6;
    }

.portfolio-model {
    display: grid;
    grid-template-areas: "mod-description mod1 mod2 mod3" "mod-description mod1 mod4 mod3" "mod-description mod5 mod4 mod6";
    grid-template-columns: repeat(4, var(--portfolio-block-width));
    grid-template-rows: repeat(3, var(--portfolio-block-height));
    justify-content: center;
}

@media(max-width: 700px) {
    .reflow-grid {
        display: flex !important;
        flex-flow: column;
        height: auto !important;
    }

    .reflow-grid-margin-bottom-15 {
        margin-bottom: 15px;
    }

    .portfolio-reflow-grid {
        display: flex !important;
        flex-flow: column;
        width: 80vw !important;
        margin: 0 auto;
    }

    .show-reel-intro {
        display: flex !important;
        flex-flow: column;
        width: 80vw !important;
        margin: 0 auto;
    }

        .show-reel-intro > *:first-child {
            min-height: 40vw;
        }
}

.portfolio-model .description {
    grid-area: mod-description;
    background-color: black;
}

    .portfolio-model .description h3 {
        color: white;
    }


.portfolio-model .mod1 {
    grid-area: mod1;
}

.portfolio-model .mod2 {
    grid-area: mod2;
}

.portfolio-model .mod3 {
    grid-area: mod3;
}

.portfolio-model .mod4 {
    grid-area: mod4;
}

.portfolio-model .mod5 {
    grid-area: mod5;
}

.portfolio-model .mod6 {
    grid-area: mod6;
}

.portfolio-radio {
    display: grid;
    grid-template-areas:
        "radio-description radio-mod1";
    grid-template-columns: 63vw calc(21vw);
    grid-template-rows: 40vw;
    justify-content: center;
}

.portfolio-certificate {
    width: 84vw;
    margin: 0 auto;
    grid-template-rows: 40vw;
    justify-content: center;
}

.nav li {
    float: left !important;
}

    .nav li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

.b-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 16px;
    border-radius: 5px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.b-btn-outline-info {
    color: #17a2b8;
    background-color: transparent;
    background-image: none;
    border-color: #17a2b8;
}

    .b-btn-outline-info:hover {
        color: #fff;
        background-color: #17a2b8;
        border-color: #17a2b8;
        text-decoration: none;
    }

.file-preview {
    margin-bottom: 5px;
    height: 200px;
    width: 200px;
}

    .file-preview > * {
        max-width: 100%;
        height: 100%;
        width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

.file-preview-placeholder {
    background-color: lightblue;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    text-align: center;
}

.blogposts {
    width: 84vw;
}

    .blogposts > article {
        display: grid;
        height: 61vh;
        overflow: hidden;
    }

.blogpost-media {
    max-height: 100%;
    height: 100%;
    background-color: black;
}

.blogpost-media > .blogpost-image {
    max-width: 100%;
    max-height: 100%;
    padding: 0px;
    width: 100%;
    object-fit: cover;
}

.blogpost-content {
    border-right: 5px solid rgba(205,92,92,0.8);
}

    .blogpost-content > .blogpost-excerpt {
        flex: 1;
    }

.card {
    background-color: white;
}

.card img {
    width: 100%;
    padding: 10px;
    filter: sepia(0.3);
    height: 300px;
    object-fit: cover;
}

.card-caption {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}