:root {
    --orange: #ce7630;
    --pink: #f6bcc0;
    --gray: #949393;
    --lightgray: #cccccc;
    --darkgray: #515151;
}

.orange {color: var(--orange)}
.bg-orange {background-color: var(--orange)}
.pink {color: var(--pink)}
.bg-pink {background-color: var(--pink)}
.gray {color: var(--gray)}
.bg-gray {background-color: var(--gray)}
.lightgray {color: var(--lightgray)}
.bg-lightgray {background-color: var(--lightgray)}

/* Legal popup */

#legal-popup {display:none; position:fixed; width:100vw; height:120vh; background:rgba(0,0,0,0.8); z-index:100000000; top:0; overflow:scroll; overscroll-behavior:contain}
#legal-popup .cell {display:table-cell; text-align:center; vertical-align:middle; padding-bottom:20vh}
#legal-popup .container {max-width:600px; width:80%; padding:20px; display:inline-block}

/* Legal popup */

/*Burger menu*/

.burger-menu-container {display: none; z-index: 100000;}
.burger-menu-container .tabs {vertical-align: middle; margin-right: 20px;}
.burger-menu-container .burger-menu-wrapper {display: inline-block; vertical-align: middle; margin-right: 2px;}

.btn {position: sticky; width: 30px; cursor: pointer;}
.bg-span {display: block; width: 100%; border-radius: 2px; height: 2px; background: white; transition: all .3s; position: relative;}
.active span:nth-child(1) {animation: ease .7s top forwards;}
.not-active span:nth-child(1) {animation: ease .7s top-2 forwards;}
.active span:nth-child(2) {animation: ease .7s scaled forwards;}
.not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
.active span:nth-child(3) {animation: ease .7s bottom forwards;}
.not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

@keyframes top {0% {top: 0; transform: rotate(0);} 50% {top: 8px; transform: rotate(0);} 100% {top: 8px; transform: rotate(45deg);}}
@keyframes top-2 {0% {top: 8px; transform: rotate(45deg);} 50% {top: 8px; transform: rotate(0deg);} 100% {top: 0; transform: rotate(0deg);}}
@keyframes bottom {0% {bottom: 0; transform: rotate(0);} 50% {bottom: 8px; transform: rotate(0);} 100% {bottom: 8px; transform: rotate(135deg);}}
@keyframes bottom-2 {0% {bottom: 8px; transform: rotate(135deg);} 50% {bottom: 8px; transform: rotate(0);} 100% {bottom: 0; transform: rotate(0);}}
@keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);}}
@keyframes scaled-2 {0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);}}

.menu-option {display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 10000; transition: ease-in-out .4s; background-color: #7c001d;}
.menu-option-opened {display: initial; transform: translate(0px);}
.menu-option-closed {display: none; transform: translate(-1000px);}
.menu-option .tabs {margin: 20px 0; display: block;}
.concourMobile {display: none;}

/* -------------------------------------- */

#intro {background-image: url(/wp-content/themes/pubinteractive/img/header-bg.jpg); background-position: left; background-size: cover; background-repeat: no-repeat;}
#intro .nav {width: 95%; margin: 0 auto; padding: 45px 0;}
#intro .nav .nav-block {display: inline-block; width: 30%; vertical-align: top; text-align: center;}
#intro .nav .nav-block:first-of-type {width: 34%; text-align: left; padding: 20px 0; border-bottom: 1px white solid;}
#intro .nav .nav-block:last-of-type {width: 34%; text-align: right; padding: 20px 0; border-bottom: 1px white solid;}
#intro .nav .nav-block .logo {width: 60%; max-width: 250px; min-width: 150px;}

#intro .menu {margin: 0 0 20px 0;}
#intro .menu .tabs {display: inline-block; vertical-align: middle; padding: 0 35px; line-height: 25px;}

#white-bg {width: 95%; margin: 0 auto; height: 300px;}

#hero {margin-top: -300px; padding: 60px;}
#hero .img-hero {width: 50%;}
#hero .hero-img-container {position: relative; display: inline-block; height: 450px;}
#hero .hero-img-container .img-vin-container1 {z-index: 1000; position: absolute; right: 140px; bottom: 55px;}
#hero .hero-img-container .img-vin-container2 {z-index: 10000; position: absolute; right: 45px; bottom: 50px;}
#hero .hero-img-container .img-vin-container3 {z-index: 100000; position: absolute; left: -50px;}
#hero .hero-img-container .img-vin-container4 {z-index: 10000; position: absolute; left: 45px; bottom: 50px;}
#hero .hero-img-container .img-vin-container5 {z-index: 1000; position: absolute; left: 140px; bottom: 55px;}
#hero .dev-style .img-vin-container1 {z-index: 1000; position: absolute; right: 110px; bottom: 55px;}
#hero .dev-style .img-vin-container2 {z-index: 10000; position: absolute; right: 80px; bottom: 50px;}
#hero .dev-style .img-vin-container3 {z-index: 100000; position: absolute; left: -180px;}
#hero .dev-style .img-vin-container4 {z-index: 100000; position: absolute; left: -85px; bottom: 15px;}
#hero .dev-style .img-vin-container5 {z-index: 10000; position: absolute; left: 10px; bottom: 30px;}
#hero .dev-style .img-vin-container6 {z-index: 1000; position: absolute; left: 105px; bottom: 50px;}
#hero .hero-text-container {margin: 75px auto 0; width: 65%; padding: 20px 40px; border-left: 1px #ce7630 solid; border-right: 1px #ce7630 solid; border-top: 1px #ce7630 solid;}
#hero .hero-text-container .title-container {padding: 20px; background-color: white; margin-top: -60px; display: inline-block;}

#hero-product {margin-top: -300px; padding: 60px; background: linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(238,238,238,0.2259497549019608) 38%, rgba(255,255,255,0) 100%);}
#hero-product .two-div {display: inline-block; vertical-align: middle; width: 50%; padding: 0 40px;}

#two-div {padding: 60px 0;}
#two-div .two-div-container {margin: 40px 0;}
#two-div .two-div-container .two-div .img-vin {width: 140px;}
.bg-logo-blason {background-repeat: no-repeat; background-position: 21vw 40px; background-size: 40%;}

.two-block {display: inline-block; width: 50%; padding: 20px;}
.two-block .two-block-img {width: 100%;}

#concour {position: relative; padding: 20px 0; background-image: url(../img/rideau.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
#concour .wrapper {position: relative; z-index: 10;}
#concour .two-div {padding: 0 40px;}
#concour .two-div:first-of-type {display: inline-block; vertical-align: middle; width: 45%;}
#concour .two-div:last-of-type {display: inline-block; vertical-align: middle; width: 55%; padding: 0 50px;}
#concour .bottom-square {position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f2f2f2; height: 200px;}

#footer {width: 95%; margin: 0 auto; background-color: #eeeeee; padding: 50px; margin-bottom: 20px;}
#footer .footer-div {display: inline-block; width: 60%; vertical-align: bottom; text-align: left;}
#footer .footer-div:first-of-type {width: 20%; padding: 0 60px 0 0;}
#footer .footer-div:last-of-type {width: 20%;}

@media (max-width:1000px) {
  #intro .menu {display: none;}
  #intro .nav .nav-block .lang {display: none;}
  .burger-menu-container {display: block; position: relative; z-index: 10000000;}
  .menu-option {display: initial; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 1000000; transition: ease-in-out .23s;}

  #hero .hero-text-container {width: 100%;}

  #two-div .two-div-container .two-div {padding: 0px 20px;}

  #concour .two-div {padding: 0px;}
  #concour .two-div:last-of-type {padding: 0px;}

  #footer .footer-div {vertical-align: middle; text-align: center;}
  #footer .footer-div .footer-nav {display: none;}
}

@media (max-width:800px) {
  #hero-product {padding: 20px;}
  #hero-product .two-div {padding: 0 20px;}

  #concour .two-div:first-of-type {width: 100%; text-align: center;}
  #concour .two-div:last-of-type {width: 100%; text-align: center;}
  #concour .bottom-square {height: 100px;}
}

@media (max-width:700px) {
  #intro .nav {padding: 20px 0;}
  #intro .nav .nav-block:first-of-type {display: none;}
  #intro .nav .nav-block {width: 49%; text-align: left; vertical-align: middle;}
  #intro .nav .nav-block:last-of-type {width: 49%; border: none; text-align: right; vertical-align: middle;}
  .concourMobile {display: initial; margin-bottom: 10px;}

  #hero {padding: 30px 0;}
  #hero .img-hero {min-width: 285px;}
  #hero .hero-text-container {padding: 20px;}
  #hero .hero-img-container {transform: scale(0.65);}

  #hero-product .two-div {width: 100%; margin: 0 0 50px 0;}

  #two-div .two-div-container .two-div {width: 100%; margin: 20px 0; padding: 0;}
  .bg-logo-blason {background-position: 0px 40px; background-size: 50%;}

  #footer {padding: 20px;}
  #footer .footer-div {display: none;}
  #footer .footer-div:first-of-type {display: inline-block; width: 50%;}
  #footer .footer-div:last-of-type {display: inline-block; width: 50%;}
}