@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Lato');

@font-face {
    font-family: 'florenceregular';
    src: url('../../vendor/fonts/florence-webfont.eot');
    src: url('../../vendor/fonts/florence-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../vendor/fonts/florence-webfont.woff2') format('woff2'),
         url('../../vendor/fonts/florence-webfont.woff') format('woff'),
         url('../../vendor/fonts/florence-webfont.svg#florenceregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'deutschlanderregular';
    src: url('../../vendor/fonts/deutschlander-webfont.eot');
    src: url('../../vendor/fonts/deutschlander-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../vendor/fonts/deutschlander-webfont.woff2') format('woff2'),
         url('../../vendor/fonts/deutschlander-webfont.woff') format('woff'),
         url('../../vendor/fonts/deutschlander-webfont.ttf') format('truetype'),
         url('../../vendor/fonts/deutschlander-webfont.svg#deutschlanderregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

:root {
  --font-quote: 'Times';
  --font-quote-spacing: 5px;
  --font-quote-size: 60px;

  --font-quote2: 'florenceregular', 'Times';
  --font-quote2-spacing: '2px';
  --font-quote2-size: '50px';
}

html{
  overflow-x: hidden;
}

body {
  background: rgb(249,250,252);
  /*font-family: 'Poppins', sans-serif;*/
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #000;
  font-weight: 400;
  overflow-x: hidden;
}

.downloadbuttons{
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

h1{
  font-size: 30px;
  letter-spacing: 2px;
  text-align: center;
}

h1.meet{
  font-size: 30px;
  letter-spacing: 2px;
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.header-left{
  width: 100%;
  margin-top: 100px;
  margin-left: 0px;
}

.header-left p{
  display: block;
  margin-top: 20px;
  width: 100%;
  text-align: center;
  margin-left: 0px;
  padding-left: 0px;
}

.header-left button{
  margin-top: 40px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}

.header-left button.presskit{
  width: 210px;
}

.presscard{
  margin-top: 100px;
  width: 300px;
  margin-right: auto;
  margin-left: auto;
  color: gray;
}

.pressblock{
  margin-bottom: 50px;
}

h1.scandalooktitre{
  margin:0;
  margin-top: -15px;
  font-family: 'deutschlanderregular', sans-serif;
  font-size: 50px;
  letter-spacing: 15px;
  display: block;
  width: 100%;
  text-align: center;
}

h1.copyright{
  display: none;
}

.mainpage{
  background: rgb(249,250,252);
}

.logo {
  text-align: center;
}

.hand{
  margin-left: -20px;
  margin-top: 50px;
}

    .hand img{
      width: 300px;
    }

h1.soustitre{
  font-size: 20px;
  /*font-family: 'Poppins', sans-serif;*/
  font-family: 'Lato', sans-serif;
  letter-spacing: 2px;
  text-align: center;
}

.scandalookfont{
  font-family: 'deutschlanderregular', sans-serif;
  letter-spacing: 7px;
  display: inline;
}

.faqanswer{
  text-align: center;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

    .faqanswer h2{
      font-size: 20px;
      text-align: center;
    }

    .faqanswer h2 .scandalookfont{
      font-size: 30px;
    }

    .faqanswer p{
      font-size: 13px;
      text-align: center;
    }

.barquote{
  height: 200px;
  text-align: center;
}

    .barquote .col{
      color: white;
      font-size: 20px;
      font-family: 'deutschlanderregular', sans-serif;
      letter-spacing: 2px;
      margin-top: 50px;
    }

    .barquote .barquoteimg{
      display: block;
      text-align: center;
      width: 64px;
      margin-left: auto;
      margin-right: auto;
    }

    .barquote span{
      font-size: var(--font-quote-size);
      letter-spacing: var(--font-quote-spacing);
      line-height: 1.3;
      font-family: var(--font-quote);
    }

    .barquote p{
      font-size: 10px;
      margin-top: -5px;
      font-style: italic;
      font-family: var(--font-quote);
    }

    .barquote .arrow{
      display: none;
    }

    .appdemo{
      background: rgb(249,250,252);
    }

    .barpress{
      display: none;
    }

.menu{
  position: absolute;
  top: 20px;
  right: 20px;
}

.my-primary{
  color: #fff;
  background-color: #cd7f37;
}

.my-primary:focus, .my-primary:hover{
  color: #fff;
  background-color: #cd7f37;
}

a.navbar-brand {
  color: #fff;
}

.navbar-brand:hover{
  color: #fff;
}

/* ===========================================
   ===========================================
   The Overlay (background)
   ===========================================
   ===========================================
*/
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 0%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.94); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 5%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay-links a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #f1f1f1;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #818181;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.overlay-social{
  margin-top: 40px;
}

.overlay-social a {
    display: inline;
}

.overlay img{
  filter: brightness(0) invert(1);
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

    .swiper-container {
        display: none;
    }

    .secshopping{
      /*height: 300px*/
      margin-top: 20px;
    }

    .secfavorite{
      /*height: 300px*/
    }

    .secinspired{
      /*height: 300px*/
    }

    .secinfluencers{
      /*height: 300px*/
    }

    .secapparels{
      /*height: 300px*/
    }

    .iphonecol{
        width: 0px;
        display: none;
    }

    .feature{
      width: 100%;
      text-align: center;
      padding-top: 0px;
    }

    .feature-one{
      padding-top: 0px;
    }

    .feature-last{
      padding-top: 0px;
    }

    h1.titre2{
      font-size: 80px;
      margin-top: -15px;
      font-family: 'deutschlanderregular', sans-serif;
      letter-spacing: 10px;
      display: block;
      width: 100%;
      text-align: center;
    }

    .iphonesmall{
      display: block;
    }

    .iphonesmall img{
      width: 300px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
    }

    .keepintouch{
      text-align: center !important;
    }

.footer1{
  background: rgb(249,250,252);
  padding-top: 20px;
}

.footer4{
  color: #aaa;
  background: white;
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer2{
  background: rgb(233,233,233);
  height: 50px;
  padding-top: 20px;
}

.footer3{
  background: rgb(233,233,233);
  height: 50px;
  padding-top: 20px;
}

.footer3{
  color: #aaa;
}

footer a{
  color: #aaa;
  margin-right: 20px;
}

footer a:hover{
  color: #000;
  margin-right: 20px;
  text-decoration: none;
}