@font-face {
    font-family: 'MarkOT-Book';
    src: url('MarkOT-Book.otf') format('opentype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }

  @font-face {
    font-family: 'Brandon Grotesque';
    src: url('BrandonGrotesque-Bold.otf') format('opentype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');



body{
    font-family: 'MarkOT-Book', Arial, sans-serif;
    color: black;
}

h1 {
    margin-bottom: 1rem;
    font-size: 4.5rem;
    font-family: 'Brandon Grotesque','Poppins', sans-serif;
    font-weight: 900;
    color: black;
    text-transform: uppercase;
}   

h2 {
    margin-bottom: 1.25rem;
    font-family: 'Brandon Grotesque', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
}

h3 {
    font-family: 'Brandon Grotesque', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
}

a {
    color: #197fc3;
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
}

a:hover{
    color: #feeb17;
}

p {
    font-size: large;
}

table {
    margin-bottom: 1rem;
}

section.banner {
    min-height: 550px;
}

#navbarNav .nav-item a {
    color: black;
    font-size: 1.25rem;
    font-weight: normal;
    font-style: normal;
    padding: 1rem;
}

#navbarNav .nav-item a:hover {
    text-decoration: none;
    color: #197fc3;
}

#navbarNav ul.dropdown-menu.show {
    border: none;
    width: 100%;
}

#navbarNav ul.dropdown-menu.show .nav-item a {
    padding: 0.5rem 1rem;
}

.btn {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 3rem;
    padding: 1rem 1.5rem;
    opacity: 0.85;
    color: black;
    background-color: #feeb17;

    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
}

.btn:hover {
    text-decoration: none;
    background-color: #cabc1f;
}

.bg-blue {
    background-color: #197fc3;
    color: white;
}

.bg-black {
    background-color: #000000;
    color: white;
}

.bg-yellow {
    background-color: #feeb17;
}

aside {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 300px;
}

.bg-blue .btn{ 
    color: #197fc3;
    background-color: #FFFFFF;
    opacity: 0.85;
}

.bg-blue .btn:hover {
    background-color: #FFFFFF;
    opacity: 1;
}

.masthead {
    min-height: 650px;
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.masthead h1 {
    font-size: 6.5rem;
}

.masthead.bg-blue h1 {
    color: white;
}

.masthead p {
    font-size: large;
}

.masthead a{
    color: #197fc3;
    font-style: italic;
    text-decoration: none;
    font-weight: 900;
}

span.date {
    display: inline-block;
    padding: 0 0 10px 0;
    font-size: 0.9rem;
    font-weight: 100;
}

.president {
    border-bottom: 1px solid #dfdfdf;
}

header .navbar-brand img {
    height: 150px;
    width: auto;
    max-width: none;
}

header.main-header{
    background-color: #00a0ff;
}

input, textarea {
    background-color: black;
    color: white;
    border: none;
    padding: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    border-radius: 5px;
}

.form-text {
    color: white;
}

input[type="submit"] {
    margin-top: 1em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 3rem;
    padding: 1rem 1.5rem;
    opacity: 0.85;
    color: black;
    background-color: #feeb17;
    max-width: 50%;
}

input[type="submit"]:hover {
    background-color: #cabc1f;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
    font-size: 0.9rem;
    font-weight: 100;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
    font-size: 0.9rem;
    font-weight: 100;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
    font-size: 0.9rem;
    font-weight: 100;
  }

section.action article {
    min-height: 450px;
}

.membre img {
    margin-bottom: 0.1rem;
}

.membre h3 {
    margin: 0.15rem 0 0.05rem 0;
}

form .webform-elements{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#edit-titre-form {
    width: 100%;
}

.form-item-npa {
    flex: 0 1 10%;
}

.form-item-localite {
    flex: 0 1 30%;
}

form .champ-sm {
    flex: 0 1 45%;
    margin-bottom: 1em;
}

form .champ-lg {
    flex: 0 1 95%;
}

form .champ-sm input, form .champ-lg textarea, .form-item-npa input, .form-item-localite input{
    width: 100%;
}

.banniere {
    /*height: 800px;*/
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.banniere-small {
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.banniere h1{
    font-size: 2.25rem;
}

.banniere .carousel-indicators {
    bottom: 13em;
}

.banniere .carousel-inner {
    top: 20em;
    color: white;
    /*text-shadow: #050505 0.1em 0.1em 0.2em;*/
}

.banniere .carousel a.button {
    background-color: transparent;
    color: white;
    font-weight: bold;
    max-width: 100%;
}

.banniere .carousel a.button:hover {
    background-color: white;
    color: #265781;
    text-decoration: none;
}

.logo-header {
    margin-top: -5rem;
}


footer {
    background-color: black;
    color: white;
}

footer .logo img{
    margin-top: 0.5em;
    max-height: 100px;
}

footer .slogan{
    font-style: italic;
    font-size: 0.8em;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer a, footer ul a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
}

footer a:hover, footer ul a:hover {
    color : #feeb17;
    text-decoration: none;
}

div#sliding-popup {
    background-color: #c8a876;
    color: white;
    padding: 1rem;
    width: 100%;
}

#popup-buttons button {
    background-color: #c8a876;
    color: white;
    border: 2px solid white;
    padding: 0.5rem 1rem;
    margin: 3em 2em;
}

#popup-text {
    padding: 1.5em;
}

#popup-text h2 {
    font-size: 1.5em;
}

#home-popup {
    display: none;
}

.spb_overlay {
    background-color: rgba(255,255,255,0.5);
}

.spb-popup-main-wrapper {
    background-color: transparent;
    border: 0;
    padding:0;
    top: 12em;
}

.spb-controls {
    top: -6em;
    right: -1em;
}

.spb_close {
    border: 0;
    background-color: transparent;
    color: #265781;
    font-size: 5em;
    font-weight: bold;
}

.copyright {
    background-color: #000000;
    color: #555555;
    font-size: 0.7em;
    padding: 0.5em 0;
}


/* LG Layout */
@media (max-width: 1199.98px){

    header .navbar-brand img {
        height: 75px;
    }

    #popup-buttons button {
        margin: 1em 2em;
    }
    
    .banniere .carousel-indicators {
        bottom: 8em;
    }
    
    .banniere .carousel-inner {
        top: 11em;
    }
}

/* MD Layout */
@media (max-width: 991.98px){

    
    .banniere .carousel-indicators {
        bottom: 7em;
    }
    
    .banniere .carousel-inner {
        top: 9em;
    }
}

/* SM Layout */
@media (max-width: 767.98px){

    h1 {
        font-size: 3.25rem;
    }

    .masthead h1 {
        font-size: 3.5rem;
    }
    
    .banniere .carousel-indicators {
        bottom: 4em;
    }
    
    .banniere .carousel-inner {
        top: 4em;
    }

    header{
        background-color: white;
    }

    #popup-buttons button {
        margin: 0em 2em;
    }

    .form-item-npa {
        flex: 0 1 30%;
    }
    
    .form-item-localite {
        flex: 0 1 60%;
    }
    
    form .champ-sm {
        flex: 0 1 95%;
        margin-bottom: 1em;
    }
    
    form .champ-lg {
        flex: 0 1 95%;
        padding-top: 1em;
    }


}