/*@import url("https://use.typekit.net/bvw7roa.css");*/

/*-- Autocomplete Chrome ;) --*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}
/*-- Fin autocomplete --*/

/* Compatibilité IE 9 et Supp */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .effect-16 ~ label, .effect-16-white ~ label {
        top: 0px !important;
    }
}

    /* Extra small devices (portrait phones, less than 576px) */
    /* No media query since this is the default in Bootstrap */
    body, html, .body-content {
        height: 100%;
        margin: 0;
        font: 400 15px/1.8 "Lato", sans-serif;
        color: #777;
    }

    body {
        background-image: url('../images/background.jpg');
        background-repeat: repeat-y;
        background-size: cover;
    }

    h1, h2, h3 {
        font-family: 'rogue-serif';
        font-style: normal;
        font-weight: 500;
    }

    /* ~~~~~~~~ Bouton de retour vers le haut ~~~~~~~~ */

    .cRetour {
        border-radius: 20px;
        /*border: 1px solid rgba(0,0,0, 0);*/
        padding: 10px 14px;
        font-size: 15px;
        text-align: center;
        color: #83b81a;
        /*background: rgba(255, 255, 255, 0.2);*/
        z-index: 99999;
        transition: all ease-in 0.2s;
        position: fixed;
        cursor: pointer;
        bottom: 1em;
        right: 20px;
        display: none;
        width: 80px;
    }

        .cRetour:before {
            /*content: "\25b2";*/
            content: url("../images/BacktoTop.svg");
            width: 80px;
            height: 80px;
        }

    /*.cRetour:hover {
        background: rgba(255, 255, 255, 1);
        border: 1px solid #83b81a;
        color: #83b81a;
        transition: all ease-in 0.2s;
    }*/

    /* ~~~~~~~~ */

    /* ~~~~~~~~ Navbar  ~~~~~~~~*/
    .navbar {
        z-index: 1000;
    }

        .navbar a {
            color: #ffffff !important;
            font-family: 'rogue-serif';
            font-style: normal;
            font-weight: 300;
            font-size: 1.125rem;
        }
    /* ~~~~~~~~ */

    /* ~~~~~~~~ Modal custom ~~~~~~~~ */

    .fa-arrow-left {
        color: #83b81a;
        font-size: 2.5rem !important;
    }

    .modal-title {
        color: #0f2b36;
        font-size: 30px;
        padding-top: 29px;
    }

    .modal-body {
        padding-top: 45px;
    }

        .modal-body p {
            color: #0f2b36;
            font-family: 'Roboto', sans-serif;
            /*font-size: 1.125rem;*/
            font-size: 18px;
            line-height: normal;
        }

    .modal-content {
        min-height: 570px;
        height: auto;
    }

    .modal-header {
        border-bottom: none;
    }

    .modal-footer {
        border-top: none;
        padding: 0 35px 35px;
    }

    .modal-button {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        min-width: 199px;
        width: auto;
        height: 55px;
        background: #83b81a;
        color: #fff;
        border-radius: 5px;
        font-size: 1rem;
    }

    /* ~~~~~~~~ */

    /* ~~~~~~~~ Header ~~~~~~~~ */

    /* Partie Image */
    .bgimg {
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("../images/stock-photo/077_ETIENNE RAMOUSSE_INTER BEAUJOLAIS_BIENVENUE EN BEAUJONOMIE_2018_opt.jpg");
        background-attachment: fixed;
        height: 100%;
    }

        .bgimg:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(to bottom right,#000,#000);
            opacity: .3;
        }

    .logo-beaujonomie {
        position: absolute;
        top: 50%;
        right: 0;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 288px;
    }

    /* Partie texte */
    #text-intro {
        font-size: 16px;
        color: #959595;
        font-family: 'Roboto', sans-serif;
    }

    .box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 160px;
        height: 86px;
        overflow: hidden;
    }

    .informations {
        position: absolute;
        bottom: 95px;
        width: 250px;
        left: 0;
        right: 0;
        text-align: center;
    }

        .informations p {
            font-family: 'Roboto', sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.625rem;
        }

            .informations p .fa-calendar {
                font-size: 2rem;
                color: #83b81a;
            }

            .informations p span {
                vertical-align: middle;
            }

        .informations h2 {
            margin-bottom: 1rem;
        }

        .informations p, .informations h2 {
            color: #fff;
        }

    .header-button {
        font-family: 'Roboto', sans-serif;
        border: 1px solid #83b81a;
        background: rgba(131, 184, 26, .3);
        color: #fff;
        /*height: 34px;*/
        min-width: 171px;
        width: auto;
        border-radius: 5px;
        cursor: pointer;
    }

    .scroll-text {
        text-align: center;
        margin-top: 28px;
        color: #fff;
        font-size: 0.6875rem;
        font-family: sans-serif;
        text-transform: uppercase;
    }

    .line {
        width: 2px;
        height: 25px;
        background: #fff;
    }

    .animated {
        animation-duration: 2.5s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }

        40% {
            transform: translateY(-15px);
        }

        60% {
            transform: translateY(-10px);
        }
    }

    .bounce {
        animation-name: bounce;
    }

    /* ~~~~~~~~~~~~~~~~ */

    /* ~~~~~~~~ Formulaire ~~~~~~~~ */

    .bloc {
        min-height: 484px;
        height: auto;
        -moz-box-shadow: 0px 3px 5px 0px #EBEBEB;
        -webkit-box-shadow: 0px 3px 5px 0px #EBEBEB;
        -o-box-shadow: 0px 3px 5px 0px #EBEBEB;
        box-shadow: 0px 3px 5px 0px #EBEBEB;
        filter: progid:DXImageTransform.Microsoft.Shadow(color=#EBEBEB, Direction=180, Strength=5);
        padding-bottom: 72px;
    }

    .bloc-blanc {
        background: #fff;
    }

    .bloc-bleu {
        background: #0f2b36;
        margin: 0.875rem 0;
    }

    .container-form {
        text-align: center;
    }

    .error {
        font-family: 'Roboto', sans-serif;
        color: #E82C0C;
    }

    .fa-question-circle {
        color: #83b81a;
        cursor: help;
    }

    .submit-part {
        margin: 71px 0;
    }

    .general-button {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        min-width: 199px;
        width: auto;
        height: 60px;
        background: #83b81a;
        color: #fff;
        border-radius: 5px;
        font-size: 1.25rem;
    }

    #formulaire-inscription {
        margin-top: 87px;
        margin-bottom: 87px;
    }

    .titre {
        text-decoration: underline;
        color: #0f2b36;
    }

    .bloc .titre {
        padding-left: 0;
    }

    .facultatif {
        font-family: 'Roboto', sans-serif;
        color: #959595;
        font-style: italic;
    }

    input[type='number'] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Informations générales */
    @-moz-keyframes rotation {
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotation {
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes rotation {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    /* Porteur du projet */
    /* Information événement */
    .ville-group button {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        border: 1px solid #0f2b36;
        background-color: #fff;
        height: 36px;
    }

        .ville-group button:hover, .ville-group button:focus, .ville-group button:active {
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            border: 1px solid #0f2b36;
            background-color: #fff;
        }

    .ville-group .filter-option-inner-inner {
        color: #959595;
        font-style: italic;
    }

    .ville-group .dropdown-menu {
        border: 1px solid #0f2b36;
        background-color: #fff;
    }

        .ville-group .dropdown-menu .disabled {
            color: #959595;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-style: italic;
        }

            .ville-group .dropdown-menu .disabled a:hover {
                background-color: #fff;
                color: #959595;
                cursor: default;
            }

        .ville-group .dropdown-menu a {
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            color: #0f2b36;
        }

            .ville-group .dropdown-menu a:active, .ville-group .dropdown-menu a:hover, .ville-group .dropdown-menu a:focus {
                font-family: 'Roboto', sans-serif;
                font-weight: 500;
                background-color: #83b81a;
                color: #fff;
            }

        .ville-group .dropdown-menu .selected {
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            color: #ffffff;
            background: #83b81a;
        }

.ville-group .dropdown-toggle:focus {
    outline: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    background-color: transparent !important;
    border-color: #83b81a !important;
}

    /* Inputs */
    #searchDataNoInter {
        position: absolute;
        right: 0;
        bottom: 2px;
        color: #fff;
        background: #83b81a;
    }

    .form-control {
        tab-index: -1;
    }

        .form-control:focus {
            background-color: transparent !important;
            outline: 0 !important;
            box-shadow: none !important;
            border-color: transparent !important;
            color: #83b81a !important;
        }

    :focus {
        outline: none;
    }

    .input-effect {
        margin: 40px 0 0 0;
        position: relative;
    }

        .input-effect .effect-16, .choixVille-label {
            font: 15px/32px "Roboto", Arial, sans-serif;
            color: #0f2b36;
            width: 100%;
            box-sizing: border-box;
            letter-spacing: 1px;
            border-radius: 0;
        }

        .input-effect .effect-16-white {
            font: 15px/32px "Roboto", Arial, sans-serif;
            color: #fff;
            width: 100%;
            box-sizing: border-box;
            letter-spacing: 1px;
            border-radius: 0;
        }

    .effect-16 {
        border: 0;
        padding: 4px 0;
        border-bottom: 1px solid #0f2b36;
        background-color: transparent;
    }

    .effect-16-white {
        border: 0;
        padding: 4px 0;
        border-bottom: 1px solid #fff;
        background-color: transparent;
    }

        .effect-16 ~ .focus-border, .effect-16-white ~ .focus-border {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #83b81a;
            transition: 0.4s;
        }

        .effect-16:focus ~ .focus-border,
        .has-content.effect-16 ~ .focus-border, .effect-16-white:focus ~ .focus-border,
        .has-content.effect-16-white ~ .focus-border {
            width: 100%;
            transition: 0.4s;
        }

    .effect-16 ~ label {
        font-family: 'Roboto', sans-serif;
        position: absolute;
        left: 0;
        width: auto;
        top: 9px;
        color: #0f2b36;
        transition: 0.3s;
        z-index: 1;
        letter-spacing: 0.5px;
    }

    .effect-16-white ~ label {
        font-family: 'Roboto', sans-serif;
        position: absolute;
        left: 0;
        width: auto;
        top: 9px;
        color: #fff;
        transition: 0.3s;
        z-index: 1;
        letter-spacing: 0.5px;
    }

    .effect-16:focus ~ label, .has-content.effect-16 ~ label {
        top: -16px;
        font-size: 14px;
        color: #83b81a;
        transition: 0.3s;
    }

    .effect-16-white:focus ~ label, .has-content.effect-16-white ~ label {
        top: -16px;
        font-size: 14px;
        color: #83b81a;
        transition: 0.3s;
    }

    /* ~~~~~~~~~~~~~~~~ */

    footer {
        font-family: 'Roboto', sans-serif;
        color: #0f2b36;
        font-weight: 500;
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
    }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {

        /* ~~~~~~~~ Formulaire ~~~~~~~~ */

        .bloc .titre {
            padding-left: 2rem;
        }

        .container-form {
            text-align: initial;
        }

        #formulaire-inscription {
            margin-top: 87px;
            margin-bottom: 87px;
            margin-left: 90px;
        }

        .titre {
            text-decoration: underline;
            color: #0f2b36;
        }

        /* ~~~~~~~~~~~~~~~~ */
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
    }



/* Mobile avec hauteur d'écran < 600px*/
@media screen and (max-height: 600px) {
    .logo-beaujonomie {
        position: absolute;
        top: 40%;
        right: 0;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 288px;
    }
}

/* Mobile avec hauteur d'écran < 600px*/
@media screen and (max-height: 500px) {
    .logo-beaujonomie {
        position: absolute;
        top: 20%;
        right: 0;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -20%);
        width: 288px;
    }
}