@import url("https://fonts.googleapis.com/css?family=Playfair+Display|Poppins:200,400,600");
@keyframes fadeoutfadein {
  from {
    opacity: 1; }
  50% {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes highlightspan {
  from {
    width: 0%; }
  to {
    width: 100%; } }
@keyframes devog-arrive {
  from {
    transform: translateY(-50px);
    filter: blur(20px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    filter: blur(0px);
    opacity: 1; } }
@keyframes landing-paper2-arrive {
  from {
    transform: rotate(5deg);
    opacity: 0; }
  to {
    transform: rotate(10deg);
    opacity: .7; } }
@keyframes landing-paper3-arrive {
  from {
    transform: rotate(5deg);
    opacity: 0; }
  to {
    transform: rotate(-10deg);
    opacity: .5; } }
@keyframes landing-paper-arrive {
  from {
    transform: rotate(-90deg) scaleY(3); }
  to {
    transform: rotate(0deg) scaleY(1); } }
@keyframes landing-iphone-arrive {
  from {
    top: -100%;
    left: 0%;
    transform: rotate(90deg); }
  to {
    top: 20%;
    left: 10%;
    transform: rotate(25deg); } }
@keyframes landing-parfum-arrive {
  from {
    top: 60%;
    right: -100%;
    transform: rotate(-95deg); }
  to {
    top: 60%;
    right: 20%;
    transform: rotate(-35deg); } }
@keyframes landing-rougealevres-arrive {
  from {
    top: -50%;
    right: -20%;
    transform: rotate(-100deg); }
  to {
    top: 10%;
    right: 10%;
    transform: rotate(40deg); } }
@keyframes p-arrive {
  from {
    transform: translateY(-20px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
@keyframes bt-arrive {
  from {
    filter: blur(20px);
    opacity: 0; }
  to {
    filter: blur(0px);
    opacity: 1; } }
html {
  height: 100%; }

body {
  font-family: 'Poppins', sans-serif;
  cursor: default;
  margin: 0;
  overflow-y: scroll;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 100%;
  position: relative; }

.bg-color-lightgrey {
  background-color: #F1F1F1; }

.tcenter {
  text-align: center; }

.separator50 {
  height: 50px; }

.separator100 {
  height: 100px; }

#wait_please {
  position: fixed;
  z-index: 98;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  background-image: url("../img/de-vog-visualize.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 150px;
  display: none; }
  #wait_please progress {
    position: absolute;
    top: 50%;
    left: 100px;
    right: 100px;
    height: 2px;
    background-color: #F1F1F1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 200px);
    box-sizing: border-box;
    border: 0;
    margin-top: 80px; }
    #wait_please progress::-webkit-progress-bar {
      background-color: #F1F1F1; }
    #wait_please progress::-webkit-progress-value {
      background-color: #000;
      transition: width 5s ease-in-out; }
    #wait_please progress::-moz-progress-bar {
      background-color: #000;
      transition: width 5s ease-in-out; }
    #wait_please progress::-ms-fill {
      background-color: #000;
      transition: width 5s ease-in-out;
      border: 0; }

section#landing {
  height: 100%;
  padding: 40px;
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
  box-sizing: border-box;
  position: relative; }
  section#landing #landing-background {
    position: absolute;
    top: 40px;
    right: 40px;
    bottom: 40px;
    left: 40px;
    z-index: -1;
    margin: 0 auto;
    background-color: #f1f1f1;
    background-size: cover;
    overflow: hidden; }
    section#landing #landing-background #landing-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; }
    section#landing #landing-background #landing-paper2 {
      position: absolute;
      width: 50%;
      height: 150%;
      background-color: rgba(241, 241, 241, 0.7);
      top: -50%;
      right: 70%;
      transform: rotate(10deg);
      box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5);
      opacity: .7; }
    section#landing #landing-background #landing-paper3 {
      position: absolute;
      width: 200%;
      height: 75%;
      background-color: rgba(241, 241, 241, 0.7);
      top: 12.5%;
      left: -50%;
      transform: rotate(-10deg);
      opacity: .5;
      box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5); }
    section#landing #landing-background #landing-paper {
      position: absolute;
      width: 200%;
      height: 50%;
      background-color: rgba(209, 0, 74, 0.8);
      top: 25%;
      right: -50%;
      transform: rotate(-20deg); }
    section#landing #landing-background #landing-iphone {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      filter: drop-shadow(0px 10px 5px rgba(96, 21, 128, 0.5)); }
      section#landing #landing-background #landing-iphone .objet {
        position: absolute;
        width: 202px;
        height: 400px;
        background-image: url("../img/landing-iphone.png"); }
    section#landing #landing-background #landing-parfum {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      filter: drop-shadow(0px 10px 5px rgba(96, 21, 128, 0.5)); }
      section#landing #landing-background #landing-parfum .objet {
        position: absolute;
        width: 227px;
        height: 320px;
        background-image: url("../img/landing-parfum.png"); }
    section#landing #landing-background #landing-rougealevres {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      filter: drop-shadow(0px 10px 5px rgba(96, 21, 128, 0.5)); }
      section#landing #landing-background #landing-rougealevres .objet {
        position: absolute;
        width: 300px;
        height: 300px;
        background-image: url("../img/landing-rougealevres.png");
        background-size: cover; }
  section#landing .content {
    max-width: 900px;
    margin: auto;
    padding: 40px;
    overflow: hidden;
    position: relative; }
    section#landing .content #logoMyDeVog {
      background: url("../img/de-vog-visualize-blanc.svg") no-repeat center;
      background-size: contain;
      height: 180px;
      width: 300px;
      margin: 0px auto 20px; }
    section#landing .content p {
      max-width: 1100px;
      margin: 10px auto;
      font-size: 24px;
      color: white;
      text-align: center;
      			/*span {
      				//letter-spacing: 4px;
      				position: relative;
      
      				&::before {
      					display: block;
      					content:"";
      					background-color: $lightgrey;
      					width: 0;
      					top:18px;right:0px;bottom:-4px;left:-5px;
      					position: absolute;
      					z-index: -1;
      					padding-right: 5px; }
      				}*/ }
  section#landing .choose {
    display: flex;
    flex-flow: row wrap;
    max-width: 620px;
    margin: auto;
    position: absolute;
    bottom: 12%;
    left: 60px;
    right: 60px; }
    section#landing .choose div.bt-rndd {
      flex: 1;
      color: #601580;
      border: 2px solid #601580; }
      section#landing .choose div.bt-rndd:hover {
        color: white;
        border: 2px solid #601580; }
  section#landing.arrive #landing-background #landing-paper2 {
    animation: landing-paper2-arrive 1s ease-in-out .8s;
    animation-fill-mode: both; }
  section#landing.arrive #landing-background #landing-paper3 {
    animation: landing-paper3-arrive 1s ease-in-out 1.2s;
    animation-fill-mode: both; }
  section#landing.arrive #landing-background #landing-paper {
    animation: landing-paper-arrive 1s ease-in-out .2s;
    animation-fill-mode: both; }
  section#landing.arrive #landing-background #landing-iphone .objet {
    animation: landing-iphone-arrive 1s ease-in-out .5s;
    animation-fill-mode: both; }
  section#landing.arrive #landing-background #landing-parfum .objet {
    animation: landing-parfum-arrive 1s ease-in-out .7s;
    animation-fill-mode: both; }
  section#landing.arrive #landing-background #landing-rougealevres .objet {
    animation: landing-rougealevres-arrive 1s ease-in-out .9s;
    animation-fill-mode: both; }
  section#landing.arrive #logoMyDeVog {
    animation: devog-arrive .5s ease-in-out 1s;
    animation-fill-mode: both; }
  section#landing.arrive p {
    animation: p-arrive .5s ease-in-out 1.5s;
    animation-fill-mode: both; }
  section#landing.arrive .choose div:nth-child(1) {
    animation: bt-arrive .5s ease-in-out 1.7s;
    animation-fill-mode: both; }
  section#landing.arrive .choose div:nth-child(2) {
    animation: bt-arrive .5s ease-in-out 1.9s;
    animation-fill-mode: both; }

/*body.loaded {
	section#landing {
		p {
			span::before {
				animation: highlightspan 2s ease-in-out .1s;
				animation-fill-mode: forwards;}
			}
		}
	}*/
section h1 {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  color: #D1004A;
  text-align: right;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 60px;
  max-width: 1200px;
  margin: 80px auto 40px auto;
  padding: 0 40px;
  box-sizing: border-box; }
  section h1 span {
    font-size: 60px; }
section .product-wrap {
  background-color: #F1F1F1; }
  section .product-wrap .content {
    max-width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 40px;
    position: relative;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(10, 1fr);
    align-items: end; }
    section .product-wrap .content .box.titre {
      position: relative;
      grid-area: tt; }
    section .product-wrap .content .box.desc {
      grid-area: tx; }
    section .product-wrap .content .box:nth-child(4) {
      grid-area: v1; }
    section .product-wrap .content .box:nth-child(5) {
      grid-area: v2; }
    section .product-wrap .content .box:nth-child(6) {
      grid-area: v3; }
    section .product-wrap .content .box:nth-child(7) {
      grid-area: v4; }
    section .product-wrap .content .box:nth-child(8) {
      grid-area: v5; }
    section .product-wrap .content .box:nth-child(9) {
      grid-area: v6; }
    section .product-wrap .content .box:nth-child(10) {
      grid-area: v7; }
    section .product-wrap .content .box:nth-child(11) {
      grid-area: v8; }
    section .product-wrap .content .product-hashtags {
      position: absolute;
      font-size: 12px;
      transform: rotate(-90deg);
      transform-origin: bottom right;
      top: 0px;
      width: 500px;
      left: -470px;
      text-align: right;
      color: #601580; }
    section .product-wrap .content h2 {
      font-size: 40px;
      font-weight: 200;
      margin: 0;
      color: #601580;
      position: relative;
      padding: 0 0 0 40px; }
      section .product-wrap .content h2::after {
        content: "";
        display: block;
        width: 2px;
        height: 150px;
        position: absolute;
        top: 0px;
        left: 19px;
        z-index: 1;
        background-color: #601580; }
    section .product-wrap .content h3 {
      margin: 0;
      font-size: 16px;
      line-height: 16px;
      color: #601580;
      font-weight: 600;
      padding: 0 0 0 40px; }
    section .product-wrap .content .product-desc {
      margin: 0;
      font-size: 14px;
      color: #601580; }
    section .product-wrap .content .product-image {
      width: 100%;
      color: white;
      position: relative; }
      section .product-wrap .content .product-image::after {
        content: "";
        display: block;
        padding-bottom: 100%; }
      section .product-wrap .content .product-image .image {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden; }
        section .product-wrap .content .product-image .image img {
          width: 100%; }
      section .product-wrap .content .product-image .video {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: pointer; }
        section .product-wrap .content .product-image .video video {
          min-width: 100%;
          width: auto;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer; }
        section .product-wrap .content .product-image .video::after {
          display: block;
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-image: url("../img/bt-play.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 60px; }
        section .product-wrap .content .product-image .video.playing::after {
          display: none; }
      section .product-wrap .content .product-image .xr {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: ew-resize; }
        section .product-wrap .content .product-image .xr iframe {
          width: 100%;
          border: none;
          cursor: ew-resize; }
          section .product-wrap .content .product-image .xr iframe:hover {
            cursor: ew-resize; }
        section .product-wrap .content .product-image .xr::after {
          display: block;
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-image: url("../img/bt-move.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 60px;
          cursor: ew-resize; }
        section .product-wrap .content .product-image .xr.moved::after, section .product-wrap .content .product-image .xr:hover::after {
          display: none; }
  section .product-wrap.grid3.left .content {
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt" "v1 v1 v1 v1 tx tx tx tx tx tx" "v1 v1 v1 v1 v2 v2 v2 v3 v3 v3"; }
  section .product-wrap.grid3.right .content {
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt" "tx tx tx tx tx tx v1 v1 v1 v1" "v2 v2 v2 v3 v3 v3 v1 v1 v1 v1"; }
  section .product-wrap.grid6.left .content {
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt" "v1 v1 v1 v1 tx tx tx tx tx tx" "v1 v1 v1 v1 v2 v2 v2 v3 v3 v3" "v4 v4 v4 v5 v5 v5 v6 v6 v6 v6" "v7 v7 v7 v7 v7 v7 v6 v6 v6 v6"; }
  section .product-wrap.grid6.right .content {
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt" "tx tx tx tx tx tx v1 v1 v1 v1" "v2 v2 v2 v3 v3 v3 v1 v1 v1 v1" "v4 v4 v4 v4 v5 v5 v5 v6 v6 v6" "v4 v4 v4 v4 v7 v7 v7 v7 v7 v7"; }
  section .product-wrap.grid8.left .content {
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt" "v1 v1 v1 v1 tx tx tx tx tx tx" "v1 v1 v1 v1 v2 v2 v2 v3 v3 v3" "v4 v4 v4 v5 v5 v5 v5 v6 v6 v6" "v7 v7 v7 v5 v5 v5 v5 v8 v8 v8"; }
  section .product-wrap.grid8.right .content {
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt" "tx tx tx tx tx tx v1 v1 v1 v1" "v2 v2 v2 v3 v3 v3 v1 v1 v1 v1" "v4 v4 v4 v5 v5 v5 v5 v6 v6 v6" "v7 v7 v7 v5 v5 v5 v5 v8 v8 v8"; }
  section .product-wrap + .product-wrap {
    margin-top: 100px; }
  section .product-wrap.right .product-hashtags {
    left: auto;
    right: 10px; }
  section .product-wrap.right .box.titre {
    text-align: right; }
    section .product-wrap.right .box.titre h2 {
      padding: 0 40px 0 0; }
      section .product-wrap.right .box.titre h2::after {
        left: auto;
        right: 19px; }
    section .product-wrap.right .box.titre h3 {
      padding: 0 40px 0 0; }
  section .product-wrap.right .box.desc {
    text-align: right; }

.bt-rndd {
  font-size: 18px;
  padding: 6px 30px;
  border: 2px solid #601580;
  border-radius: 50px;
  color: #601580;
  font-weight: 600;
  transition: all 0.5s ease-in-out 0s;
  text-align: center; }
  .bt-rndd:hover {
    text-decoration: none;
    cursor: pointer;
    color: #F1F1F1;
    border: 2px solid #601580;
    background-color: #601580; }
  .bt-rndd + .bt-rndd {
    margin-left: 20px; }

footer {
  background-color: #F1F1F1;
  padding: 50px 0;
  text-align: center;
  margin-top: 100px; }

footer section {
  max-width: 1100px;
  margin: 0 auto; }

footer section .col {
  flex: 1; }

footer section #logoMyDeVogFooter {
  background: url(../img/logo-mydevog.svg) no-repeat center;
  background-size: contain;
  height: 80px;
  width: 200px;
  margin: 0px auto; }

footer section .explainDeVog {
  font-size: 20px;
  margin: 50px; }

footer section a {
  color: black;
  text-decoration: none; }

footer section a:hover {
  text-decoration: underline; }

footer section .link {
  display: inline-block;
  margin: 0px auto 0 auto;
  padding: 10px 20px;
  color: #601580;
  border: 3px solid #601580;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.5s ease-in-out; }

footer section .link:hover {
  color: white;
  background-color: #601580;
  text-decoration: none; }

footer section .contact {
  text-align: center;
  padding: 0px 30px 26px;
  max-width: 330px;
  display: block;
  margin: 50px auto 20px; }

footer section .contact h2 {
  text-align: center;
  font-size: 20px;
  padding: 0px 30px;
  display: inline-block;
  margin: 0 0 10px 0; }

footer section .contact ul {
  margin: 0;
  padding: 0;
  position: relative; }

footer section .contact ul li {
  text-align: center;
  list-style: none;
  font-size: 16px; }

footer section .contact ul li + li::before {
  content: "\002014";
  display: block;
  line-height: 10px; }

@media only screen and (max-width: 640px), handheld {
  section#landing {
    padding: 20px; }
    section#landing #landing-background {
      top: 20px;
      right: 20px;
      bottom: 20px;
      left: 20px; }
      section#landing #landing-background #landing-content {
        left: -50%;
        right: -50%; }
    section#landing .content {
      padding: 0; }
      section#landing .content #logoMyDeVog {
        margin: 0px auto 20px;
        height: 120px;
        width: 200px; }
      section#landing .content p {
        font-size: 16px;
        margin: 10px 20px; }
    section#landing .choose {
      flex-flow: column wrap;
      align-items: center;
      padding: 0;
      bottom: 40px; }
      section#landing .choose div {
        font-size: 16px; }
        section#landing .choose div + div {
          margin-top: 20px;
          margin-left: 0px; }

  section .product-wrap {
    background-color: #F1F1F1; }
    section .product-wrap .content {
      grid-template-columns: .5fr .5fr;
      grid-gap: 20px; }
      section .product-wrap .content .product-hashtags {
        top: 120px; }
      section .product-wrap .content h2 {
        font-size: 24px;
        font-weight: 400; }
    section .product-wrap.left .content {
      padding: 20px 20px 20px 40px; }
    section .product-wrap.left .box.titre h2 {
      padding: 0; }
      section .product-wrap.left .box.titre h2::after {
        left: -22px;
        right: auto; }
    section .product-wrap.left .box.titre h3 {
      padding: 0; }
    section .product-wrap.right .content {
      padding: 20px 40px 20px 20px; }
    section .product-wrap.right .box.titre h2 {
      padding: 0; }
      section .product-wrap.right .box.titre h2::after {
        left: auto;
        right: -22px; }
    section .product-wrap.right .box.titre h3 {
      padding: 0; }
    section .product-wrap.grid3.left .content, section .product-wrap.grid3.right .content {
      grid-template-areas: "tt tt" "tx tx" "v1 v1" "v2 v3"; }
    section .product-wrap.grid6.left .content {
      grid-template-areas: "tt tt" "tx tx" "v1 v1" "v2 v3" "v4 v5" "v6 v6"; }
    section .product-wrap.grid6.right .content {
      grid-template-areas: "tt tt" "tx tx" "v1 v1" "v2 v3" "v4 v4" "v5 v6"; }
    section .product-wrap.grid8.left .content, section .product-wrap.grid8.right .content {
      grid-template-areas: "tt tt" "tx tx" "v1 v1" "v2 v3" "v5 v5" "v4 v6" "v7 v8"; }
  section h1 {
    font-size: 20px;
    line-height: 32px;
    padding: 0 20px;
    margin: 40px 0 40px 0; }
    section h1 span {
      font-size: 32px; }

  footer section .contact {
    margin: 50px 20px 20px 20px; }
    footer section .contact h2 {
      font-size: 20px;
      padding: 0 15px;
      top: -19px; } }