/*
Theme Name: Thème Faa'a Matériaux
Theme URI: 
Description: Faa'a Matériaux Theme STOREFRONT CHILD
Author: Quentin Benanou
Author URI: 
Template: storefront
Version: 1.0.5
License: 
License URI: 
Tags: custom
Text Domain: faaa-materiaux-storefrontchild
*/ 

@font-face {
    font-family: "Christmas";
    src:  url('./fonts/ChristmasWish-Calligraphy.woff2') format('woff2'),
          url('./fonts/ChristmasWish-Calligraphy.woff') format('woff');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
  }

  textarea:focus, input:focus{
    outline: none;
}

.woocommerce-breadcrumb, .storefront-breadcrumb {
    display: none;
}

.pop_in_gagne {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fff;
    border: 2px black solid;
    border-radius: 20px;
    display: flex;
    display: none;
    padding: 15px;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;

    opacity: 0;
    transition: all 1s;
}

.pop_in_gagne p {
    color: #654109;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.pop_in_gagne img {
    margin: 20px;
    
}

.pop_in_gagne img.animate {
    animation: gelatine 0.5s infinite;
}

.icon-fb {
    width: 30px;
    margin-left: 15px;
}


@keyframes gelatine {
	from,
	to {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(0.9, 1.1);
	}
	50% {
		transform: scale(1.1, 0.9);
	}
	75% {
		transform: scale(0.95, 1.05);
	}
}

.site-main, #primary {
    margin-bottom: 0;
}

#main {
    padding-top: 0;
}

.logo-faaa {
    margin: 0 auto;
    width: 200px;
}

.header-menu-2  {
    
    border-bottom: 1px solid #d6d4d4;
    padding-bottom: 15px;
}

.header-menu-2 .col-full {
    display: flex;
    justify-content: space-between;
}

.header-menu-2 .col-full::after, .header-menu-2 .col-full::before {
    display: none;
}

.header-menu-right {
    display: flex;
    justify-content: right;
    align-items: center;
}

.header-menu-right span {
    text-align: center;
    color : #654109;
    margin: 0 15px;
}

.sinscrire_container {
    position: relative;
}

.jouer {
    display: inline-block;
    margin: 0 auto;
    border-radius: 50px;
    padding: 5px 65px;
    border: 4px #858484 ridge;
    color: #7c481e;
    width: fit-content;
    background-color: #f7f149;
    font-weight: bold;
    font-size: 30px;

    width: fit-content;

    transform: scale(1);

    transition: all 0.3s;
}

.jouer:hover {
    color: #7c481e;
    cursor: pointer;
    transform: scale(0.9);
}

.header-menu-flex {
    display: flex;
    align-items: center;

    /* justify-content: space-between; */

    margin-left: calc(50% - 36vw);
    margin-right: calc(50% - 36vw);
}

.header-menu-links {
    margin-left: 15px;
}

.header-menu-links a {
    color : #654109;
    margin: 0 15px;
    font-weight: bold;
    
}

.header-menu-links a:hover {
   
    text-decoration: underline;
}

.site-description {
    text-align: center;
}

.site-header {
    /* background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc); */
    padding: 15px 0;
    padding-bottom: 0;
    background-color: #f8f8f8;
    border-bottom-color : #fff;
}

.header-menu {
    /* margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw); */

    /* background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc); */
    background: #f6f6f6;
    border-bottom: 1px solid #d6d4d4;
    padding: 10px 0px;
}

.entry-title {
    display: none;
}

.bloc-home-flex {
    margin-top: 15px;
    display: flex;
    width: auto;
    min-height : 60vh;
    justify-content: space-between;

    margin-left: calc(50% - 36vw);
    margin-right: calc(50% - 36vw);

    

    box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
}

.block-map {
    height: 350px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.bloc-home-flex-left {
    width: calc(34%);
    
    /* background-image: url("/wp-content/themes/faaa-materiaux-storefrontchild/images/affiche.png"); */
    /* background-image: url("/wp-content/themes/faaa-materiaux-storefrontchild/images/faaa-materiaux-batiment.jpg");
    background-size: cover;
    background-position: center; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* filter: grayscale(1); */

}

.bloc-home-flex-right {
    width: 66%;
    /* display: flex; */
    /* flex-direction: column;
    justify-content: space-around; */

    /* background-color: #c39738; */

    background-image: url("/wp-content/themes/faaa-materiaux-storefrontchild/images/faaa-materiaux-batiment.jpg");
    background-size: cover;
    background-position: center;

    
}

.bloc-home-flex-right-top {
    height: calc(50% - 5px);
    background-image: url("/wp-content/themes/faaa-materiaux-storefrontchild/images/faaa-materiaux-batiment.jpg");
    background-size: cover;
    background-position: center;
}

.bloc-home-flex-right-bottom {
    height: calc(50% - 5px);
}

.texte-jeu-concours {
    margin: 30px 20px;
    padding: 5px 15px;
    background-color: #f7f149;
    color: #81807f;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 0.5px;
    transform: rotate(-5deg) scale(0.95);
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s;
    border: 14px ridge #81807f;
    font-size: 25px;
}

.texte-jeu-concours:hover {
    transform: rotate(-5deg) scale(1);
}

.marquee_flex {
    display: flex;
    justify-content: space-evenly;
}

.marquee_flex img {
    margin-right: 15px;
}

.bloc-lots {
    margin-left: calc(50% - 36vw);
    margin-right: calc(50% - 36vw);

    display: flex;
    justify-content: space-between;

    flex-wrap: wrap;
}

.lot {
    
    display: flex;
    justify-content: space-between;

    box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
    width: 32%;
    margin-bottom: 15px;
    font-weight: bold;

    
}

.lot img {
    height: 200px;
    width: auto;
}

.lot1 {
    background-color: #ae6418;
}

.lotcoupon {
    background-color: #0691ce;
}

.lot2 {
    background-color: #7bac5c;
}
.lot3 {
    background-color: #f7f149;
    color: black;
}
.lot4 {
    background-color: #2b384d;
}
.lot5 {
    background-color: #b82f1c;
}
.lot6 {
    background-color: #14777a;
}
.lot7 {
    background-color: #a8b675;
}
.lot8 {
    background-color: #59776b;
}

.lot div {
    padding: 15px;
    color: white;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
}
.lot span {
    text-transform: uppercase;
    font-size: 20px;
}

.lot3 div {
    color: #777777;
}

.texte-participer {
    padding: 30px 0px;
    text-align: center;
    /* font-weight: bold; */
    color : #4b4b4b;
    color: #654109;
    height: 100%;
}

.fleche_login {
    position: absolute;
    right: 0;
    height: 100%;
    padding: 10px 25px;
    font-weight: bold;
    height: 55px;
    background-color: #9d120a;
    border: 3px #9d120a solid;
    border-radius: 0 10px 10px 0;
    transition: all 0.3s;
    color: white;
}

.fleche_login:hover {
    cursor: pointer;
    background-color: white;
    color: #9d120a;
}

.texte-participer a {
    border: 3px #9d120a solid;
    border-radius: 10px;
    padding: 10px 55px;
    background-color: #9d120a;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 20px;
    letter-spacing: 2px;

    transition: all 0.3s;
    width: 380px;
    height: 55px;
    display: inline-block;
}

.texte-participer .input_login_container .inscritption_login {
    border: 3px #9d120a solid;
    border-radius: 10px;
    padding: 10px 25px;
    background-color: white;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 14px;
    letter-spacing: 2px;

    transition: all 0.3s;
    width: 336px;
    height: 55px;
    display: inline-block;

    position: absolute;
    left: 0;
}

.texte-participer .input_login_container .inscritption_login::placeholder {
    color : #654109;
}

.texte-participer a:hover {
    background-color: white;
    color: #9d120a;
    cursor: pointer;
}

.input_login_container {
    position: relative;
    width: 380px;
    transform: translateY(-55px);
    display: block;
    display: none;
}

.bouton_participer2 {
    margin: 0 auto;
    border: 3px #227600 solid;
    border-radius: 10px;
    padding: 10px 55px;
    background-color: #227600;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 20px;
    letter-spacing: 2px;

    transition: all 0.3s;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bouton_participer2:hover {
    background-color: white;
    color: #227600;
    cursor: pointer;
}

.texte-participer .date {
    text-transform: uppercase;
    font-size: 25px;
}

.texte-participer .jeu {
    font-weight: bold;
    font-size: 55px;
}

.texte-participer .de {
    font-size: 40px;
    line-height: 20px;
}

.noel {
    font-family: 'Christmas';
    text-transform: none !important;
    font-size: 175px !important;
    line-height: 130px;
    font-weight: 100;
    font-weight: normal !important;
    color: #9d120a;
}

.texte-participer .gagnez {
    font-size: 28px;
    line-height: 30px;
    margin: 40px auto;
    display: inline-block;
}



.texte-participer .underline {
    display: inline-block;
    width: 50%;
    border-bottom: 2px #654109 solid;
    line-height: 1px;
    font-size: 1px;
}

/* .border_bottom {
    display: inline-block;
    border-bottom: 2px #654109 solid;
    width: 70%;
    line-height: 5px;
} */

.h2 {
    color : #b12804;
    font-size: 20px;
    text-transform: uppercase;

    text-align: center;
    padding: 20px 0;
    font-weight: bold;
}
.h2#ou_trouver {
    font-size: 26px;
}

/* ROUE DE LA FORTUNE FAAA MATERIAUX */
.body {
    /* height: calc(100vh - 300px); */
    /* width: 100%; */
    /* background-color: green; */
    padding: 50px 0;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* background-color: red; */

    display: flex;
    justify-content: space-evenly;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--jouer a::before {
    content : " ";
    height: 30px;
    background-image: url('/wp-content/themes/faaa-materiaux-storefrontchild/images/roue-de-la-fortune.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.body-content {
    width: 800px;
    /* margin: 0 auto; */
    height: 100%;
    /* background-color: red; */


}
.entry-header {
    display: none;
}
.footer {
    height: 150px;
    width: 100%;
    /* background-color: yellow; */
    background-color: #3a2d2a;
}

.site-footer {
    background-color: #3a2d2a;
    padding: 20px 0px;
}

.site-footer .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.site-footer a, .site-footer span {
    color: white !important;
    cursor:  pointer;
}
.site-footer .col-full::before, .site-footer .col-full::after {
    display: none;;
}
#wheelOfFortune {
    position: relative;
}

.fleche_wheel {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(10%) translateY(-50%);
    z-index: 999;
}

#wheel {
    border-radius: 50%;
    /* transform: rotate(-90deg);  */
    /* make needle point north instead of east */
}

/* END ROUE DE LA FORTUNE FAAA MATERIAUX */