/*
COLORS
yellow: #f6b652;
orange: #f26a56;
purple: #6f637f;
black:  #000;
*/

body,
html {
    margin: 0;
    padding: 0;
    background: #FFF;
    font-family: 'Amatic SC', Arial, sans-serif, cursive;
}

body {
    font-size: 2.0rem;
    color: #000;
}

    .bg_reception {
        background-color: #f26a56;
        color: #fff;
    }

    .bg_diner {
        background-color: #f6b652;
    }

    .bg_party {
        background-color: #6f637f;
        color: #fff;
    }

canvas {
    z-index: 1;
    position: fixed;
    top: 0;
}

form input,
form select,
form textarea,
table {
    font-family: Arial, Helvetica, sans-serif;
}

form label {
    font-size: 0.8em;
}

a:focus, button:focus {
    outline:0;
}

.vh-100 {
    min-height:100vh;
}

.flex-fill {
    flex: 1 1 auto;
}

.my-auto {
    width: 100%;
}


.container-main {
    z-index: 2;
    position: relative;
}

.display-1 {
    font-size: 5.5rem;
}

.display-3 {
    font-size: 4.4rem;
}

.content-center {
    text-align: center;
}

.alert {
    font-size: 0.75em;
    padding: 0.5rem 0.75rem;
}

.bold {
    font-weight: bold;
}


/* HOME */
.body_home .display-1 {
    color: #000;
}

.form-home {
    margin-top: 2rem;
    width: 100%;
}

.form-home .invalid-feedback {
    font-size: 1.5rem;
}

.form-home .btn {
    background-color: #6f637f;
    border-color: #6f637f;
    font-weight: bold;
    font-size: 1.5rem;
}

    .form-home .btn:active {
        background-color: #000 !important;
        border-color: #000 !important;
    }


/* INVITATION */
.body_invitation h3 {
    text-align: center;
    margin-bottom: 3rem;
}

    .form-invitation .form-check-input {
        position: absolute;
        margin-left: 0;
        margin-top: 0.75rem;
    }

    .form-invitation .form-check-label {
        text-align: left;
        font-size: 0.9em;
    }


    .form-invitation input[type='radio'] {
        -webkit-appearance:none;
        width:20px;
        height:20px;
        border:1px solid #000;
        border-radius:50%;
        outline:none;
        box-shadow:0 0 5px 0px #000 inset;
    }

        .form-invitation input[type='radio']:hover {
            box-shadow:0 0 5px 0px #000 inset;
        }

        .bg_reception .form-invitation input[type='radio'],
        .bg_party .form-invitation input[type='radio'] {
            border-color: #fff;
            box-shadow:0 0 5px 0px #fff inset;
        }

        .bg_reception .form-invitation input[type='radio']:hover,
        .bg_party .form-invitation input[type='radio']:hover {
            box-shadow:0 0 5px 0px #fff inset;
        }

        .form-invitation input[type='radio']:before {
            content:'';
            display:block;
            width:60%;
            height:60%;
            margin: 20% auto;
            border-radius:50%;
        }

        .bg_reception .form-invitation input[type='radio']:checked:before {
            background: #6f637f;
        }

        .bg_diner .form-invitation input[type='radio']:checked:before {
             background: #f26a56;
         }

        .bg_party .form-invitation input[type='radio']:checked:before {
            background: #f6b652;
        }


    .form-invitation .btn {
        font-size: 1.6rem;
    }

        .bg_reception .form-invitation .btn {
            background-color: #6f637f;
            border-color: #6f637f;
            color: #fff;
        }

        .bg_diner .form-invitation .btn {
            background-color: #f26a56;
            border-color: #f26a56;
        }

        .bg_party .form-invitation .btn {
            background-color: #f6b652;
            border-color: #f6b652;
            color: #000;
        }

        .bg_reception .form-invitation .btn:active,
        .bg_diner .form-invitation .btn:active,
        .bg_party .form-invitation .btn:active {
            background-color: #000 !important;
            border-color: #000 !important;
        }


/* THANKS */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-color: #f26a56;
}

    .loader {
        border: 16px solid #fff;
        border-top: 16px solid #6f637f;
        border-bottom: 16px solid #6f637f;

        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;

        position: absolute;
        left: calc(50% - 60px);
        top: calc(50% - 60px);
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

.section-header {
    background: #f26a56;
    color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative;
    z-index: 2;
}

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.section-main {
    padding-top: 25px;
    padding-bottom: 25px;
}

    .section-main a {
        color: #000;
        text-decoration: underline;
    }

    .gallery-block.grid-gallery a:hover{
        opacity: 0.8;
    }

    .masonry {
        display: flex;
        flex-flow: row wrap;
        /*margin-left: -8px; !* Adjustment for the gutter *!*/
        width: 100%;
    }

    .masonry-brick--h {
        flex: auto;
        height: 250px;
        min-width: 150px;
    }

    .masonry-brick {
        flex: auto;
        height: 250px;
        min-width: 150px;
        /*margin: 0 8px 8px 0; !* Some gutter *!*/
    }

        .masonry-brick:nth-child(4n+1){
             width: 250px;
        }
        .masonry-brick:nth-child(4n+2){
             width: 325px;
        }
        .masonry-brick:nth-child(4n+3){
             width: 180px;
        }
        .masonry-brick:nth-child(4n+4){
             width: 380px;
        }

    .masonry-img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        /*filter: brightness(50%);*/
    }


/* ADMIN */
.body_admin table {
    font-size: 1rem;
}


/* CLOSED */
.body_closed a {
    color: #000;
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait) {
    body {
        font-size: 1.8rem;
    }
    .display-1 {
        font-size: 4rem;
    }
    .display-2 {
        font-size: 3.5rem;
    }
    .display-3 {
        font-size: 3.0rem;
    }
    .display-4 {
        font-size: 2.5rem;
    }
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {
    .display-1 {
        font-size: 4rem;
    }
    .display-2 {
        font-size: 3.5rem;
    }
    .display-3 {
        font-size: 3.0rem;
    }
    .display-4 {
        font-size: 2.5rem;
    }
}

@media (min-width:576px) {
    .masonry-brick {
        margin: 0 8px 8px 0; /* Some gutter */
    }
}

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

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .align-items-center {
        top: 50%;
    }
}