/*
	Theme Name: EE
	Theme URI: etienneetienne.com
	Description: WordPress Theme
	Version: 1
	Author: Edouard Corfu
	Author URI: etienneetienne.com
*/

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/
html,
body {
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

strong,
.strong {
    font-weight: 700;
}

.font-light {
    font-weight: 300;
}

a img {
    border: 0px;
}

a {
    transition: all 0.5s ease;
    color: #009aea;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
}

a:focus,
a:hover {
    text-decoration: none;
    outline: none;
    color: inherit;
}

.tdn {
    text-decoration: none;
}

.tdu {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}


hr {
    margin: 4rem auto;
    max-width: 150px;
}

/* 
.has-text-jaune-color,
.text-jaune {
    color: #fef5b1;
}

.has-text-jaune-background-color,
.bg-jaune {
    background-color: #fef5b1;
}
*/


/*------------------------------------*\
    Bootstrap
\*------------------------------------*/
.dropdown-menu {
    --bs-dropdown-link-active-color: #b98db0;
    --bs-dropdown-link-active-bg: #F7F3F0;
    --bs-dropdown-link-hover-bg: #F7F3F0;
}

.accordion-button {
    --bs-accordion-btn-bg: #CABBAF;
    --bs-accordion-active-color: #000;
    --bs-accordion-active-bg: #E2D4C5;
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-color: #CABBAF;
    --bs-accordion-btn-focus-border-color: #F7F3F0;
    --bs-accordion-btn-focus-box-shadow: #F7F3F0;
}

.pagination {
    --bs-pagination-color: #000;
    --bs-pagination-border-color: #000;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #000;
    --bs-pagination-active-border-color: #000;
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

.hamburger {
    cursor: pointer;
}

#mainnav a {
    color: #000;
}

#mainnav a:hover {
    color: #bbb;
}

#searchtrigger {
    cursor: pointer;
}

#searchbox {
    transition: all 700ms ease;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

#searchtrigger .bi-x-lg,
.search-active #searchtrigger .bi-search {
    display: none;
}

.search-active #searchtrigger .bi-x-lg {
    display: block;
}

.search-active #searchbox {
    transition: height 500ms cubic-bezier(0, 0.5, 0.2, 1.4);
    height: 142px;
    opacity: 1;
}

#searchbox .form-control {
    border: none;
    background: none;
    font-size: 2.5rem;
    border-bottom: 1px solid #ddd;
    height: 3rem;
    padding: 0;
    border-radius: 0;
    color: #fff;
    flex: 1;
}

#searchbox .btn {
    color: #fff;
    border: none;
    background: none;
}


/*------------------------------------*\
    HOMEPAGE
\*------------------------------------*/
body{
    background-color: #000;
}
.max-width{
    margin: 0 auto;
    max-width: 500px;
}
#sound-btn {
  position: absolute;
  top: .5rem;
  right: 1rem;
  z-index: 20;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: #e8c800;
  color: #000;
  cursor: pointer;
}
.hide{
    display: none!important;
}
/*------------------------------------*\
    MAIN
\*------------------------------------*/
.img-holder {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
}

.img-holder:before {
    content: "";
    padding-top: 56.66%;
    display: block;
}

.img-holder img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}

a.img-holder:hover img {
    transform: translate(-50%, -50%) scale(1.05);
}


/*------------------------------------*\
    GMAP
\*------------------------------------*/
.acf-map {
    width: 100%;
    height: 500px;
    margin: 0px 0;
}

/*------------------------------------*\
    FORMS
\*------------------------------------ */
::-webkit-input-placeholder {
    color: #000;
}

::-moz-placeholder {
    color: #000;
}

:-ms-input-placeholder {
    color: #000;
}

.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
    font-family: 'lufgaextralight';
    font-size: 1.25rem !important;
    color: #000;
    text-transform: lowercase;
    letter-spacing: 2px;
    padding: 0.75rem 1rem !important;
    border: 1px solid #DFD8D0;
    border-radius: .5rem;
}

.gform_wrapper.gravity-theme input[type=color]:focus,
.gform_wrapper.gravity-theme input[type=date]:focus,
.gform_wrapper.gravity-theme input[type=datetime-local]:focus,
.gform_wrapper.gravity-theme input[type=datetime]:focus,
.gform_wrapper.gravity-theme input[type=email]:focus,
.gform_wrapper.gravity-theme input[type=month]:focus,
.gform_wrapper.gravity-theme input[type=number]:focus,
.gform_wrapper.gravity-theme input[type=password]:focus,
.gform_wrapper.gravity-theme input[type=search]:focus,
.gform_wrapper.gravity-theme input[type=tel]:focus,
.gform_wrapper.gravity-theme input[type=text]:focus,
.gform_wrapper.gravity-theme input[type=time]:focus,
.gform_wrapper.gravity-theme input[type=url]:focus,
.gform_wrapper.gravity-theme input[type=week]:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
    box-shadow: none;
    outline: none;
    border-color: #ededed;
}

.gform_fields .gfield.no-label label.gfield_label,
.gform_wrapper .no-label .gfield label.gfield_label {
    display: none;
}

.gform_footer {
    display: flex;
    justify-content: center;
}

.gform_button {
    background: #000;
    color: #fff;
    border: none;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0;
}

.form-control:focus {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
}

/*------------------------------------*\
    TOOLS
\*------------------------------------*/
a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}

a.skip-main:focus,
a.skip-main:active {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 5px;
    text-align: center;
    font-size: 1.2em;
    z-index: 999;
}

#backtotop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    transition: all .6s cubic-bezier(.25, .46, .45, .94);
    z-index: 9999;
}

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}



/*------------------------------------*\
    HOVER
\*------------------------------------*/

@media (hover: none) {
    .btn:hover{
     background: inherit!important;
     color: inherit!important;
     border: inherit!important;
        
    }
}

@media (hover: hover) {
    a.img-holder:hover img {
        transform: translate(-50%, -50%) scale(1.05);
    }
}



/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 992px) {}

@media only screen and (max-width: 991px) {}

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

@media only screen and (max-width: 479px) {}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {}