@charset "utf-8";
/*
    -------------------------------------------------------------------
        Theme Name: Lord Frivolous
        Theme URI: 
        Author: Olo Group
        Author URI: https://ologroup.com
        Description: Custom theme for Lord Frivolous
        Tags: custom
        Version: 1.0
        Requires at least: 5.0
        Tested up to: 6.2
        Requires PHP: 7.3
    -------------------------------------------------------------------
*/

/* General Imports
-------------------------------------------------------------------*/
@import url('css/bootstrap.css');
@import url('fonts/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,500;1,100&display=swap');


/* Root
-------------------------------------------------------------------*/
:root {
    --white: #FFF;
    --black: #040b01;
    --grey-dark: #303131;
    --grey-med: #939598;
    --grey-med-two: #CCC;
}

/* HTML
-------------------------------------------------------------------*/
html {
    font-size: 62.5%;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
}

body {
    background: var(--black);
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 100;
    color: var(--white);
}

strong, .strong, b, .b, .bold {
    font-weight: 500;
}

.border-grey {
    border-color: var(--grey-med) !important;
}

.main-logo {
    max-width: 600px;
}

    @media (max-width: 768px) {
        .main-logo {
            max-width: 300px;
        }
    }

    @media (max-width: 320px) {
        .main-logo {
            max-width: 200px;
        }
    }

.modal-logo {
    max-width: 250px;
}

.modal-header {
    border: 0;
}

.modal-backdrop {
    opacity: .1;
}

.main-intro {
    width: 100%;
    max-width: 95%;
}

.main-arrow {
    margin-left: 1.8em;
}

.btn-modal-pop {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
    outline: none;
    padding: 0;
    margin: 0;
}

.btn-custom {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
    font-size: 1.8rem;
}

.btn-custom:hover {
    background-color: var(--grey-med);
    color: var(--white);
    border-color: var(--grey-med);
}

.btn-contact {
    background: var(--grey-med);
    color: var(--white);
    font-size: 1.8rem;
}

.btn-contact:hover, .btn-contact:focus {
    background: var(--white);
    color: var(--black);
}

.modal-close, .modal-close:hover, .modal-close:focus {
    background: transparent;
    border: 0;
    align-self: flex-start;
    color: var(--white);
    padding: 0;
    margin: 0;
}

.alert .modal-close {
    color: var(--grey-dark) !important;
}

.form-control {
    font-size: 1.8rem;
}

footer {
    font-size: 1.4rem;
}

.fs-sm {
    font-size: 1.6rem;
}

.input-dark {
    background-color: var(--grey-med);
    border-color: var(--grey-med);
    color: var(--white);
}

.input-dark:focus, .input-dark:hover {
    background-color: var(--grey-med-two);
    border-color: var(--grey-med-two);
    color: var(--black);
}

::placeholder {
    color: var(--black);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--black);
}

::-ms-input-placeholder {
    color: var(--black);
}

/* Gallery Rows 
-------------------------------------------------------------------*/
.mw-medium {
    width: 100%;
    max-width: 60%;
}


.gallery-item-image {
    display: grid;
    min-height: 499px;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
}

.gallery-item-description {
    color: var(--black) !important;
    min-height: 175px;
}

.gallery-item-description h3 {
    color: var(--black);
    font-weight: 500;
    margin: 0;
    padding: 0;
    line-height:1.5;
}

@media (max-width: 768px) {
    .mw-medium {
        max-width: 100%;
    }
}

/* Colors
-------------------------------------------------------------------*/
.bg-grey-medium {
    background: var(--grey-med);
    color: var(--white);
}

.bg-darkest {
    background: var(--black);
    color: var(--white);
}

.bg-grey-dark {
    background: var(--grey-dark);
    color: var(--white);
}

    .bg-grey-dark a {
        color: var(--white);
        font-weight: 100;
    }

.text-grey {
    color: var(--grey-med);
}

.btn-close {
    font-size: 1rem;
}

/* Navigation
-------------------------------------------------------------------*/
.btn-mainmenu {
    font-size: 2.3rem;
    outline: none;
    color: var(--white);
    border: 0;
}

.btn-mainmenu.show {
    background-color: var(--grey-dark);
    color: var(--white);
    outline: none;
    border: 0;
}

.dropdown-menu {
    font-size: 2.3rem;
    font-weight: 100;
    min-width: 220px;
    padding: 0;
}

.dropdown-menu li {
    border-bottom: 1px solid var(--grey-med);
    padding: .25em .10em;
}

.dropdown-menu li:last-child {
    border-bottom: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--white);
    background-color: var(--grey-med);
}

/* Headings
-------------------------------------------------------------------*/
h1 {
    font-size: 5rem;
    line-height: 1;
    font-weight: 100;
}

h2 {
    font-size: 4rem;
    font-weight: 100;
    line-height: .9;
    letter-spacing: -1px;
}

h3 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}

h4 {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    color: var(--grey-dark);
}

@media (max-width: 768px) {}

@media (min-width: 800px) {
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    }
}

@media (max-width: 768px) {

    .carousel-control-prev,
    .carousel-control-next {
        width: 10%;
    }
}