/*
#stacks_in_349_page0: CTA "More Infos" button wrapper
#stacks_in_351_page0: CTA "Download" button wrapper

#myExtraContent1  : Miss Pipi Girl image wrapper
#myExtraContent2  : Miss Pipi Logo image wrapper
#myExtraContent3  : Smart Light Mode image wrapper
#myExtraContent4  : Smart Dark Mode image wrapper
#myExtraContent5  : Here We Go Button image wrapper
#myExtraContent14 : Here We Go iPhone image wrapper
#myExtraContent6  : Miss Pipi Icon image wrapper
#myExtraContent7  : Miss Pipi Paris Typo image wrapper
#myExtraContent8  : White iPhone image wrapper
#myExtraContent9  : App Store Button FR image wrapper


#stacks_in_138_page0 : Home subtitle (PARIS)

#stacks_in_161_page0 : Div correspondant à "2 column foundation" de la section SMART.
#stacks_in_191_page0 : Div container des images Smart Light Mode et Smart Dark Mode de la section SMART.

#stacks_in_207_page0 : Div correspondant à "2 column foundation" de la section HERE WE GO.

#stacks_in_319_page0 : Div correspondant à "1 column foundation" de la section DOWNLOAD.
#stacks_in_283_page0 : Div container du texte et de l'image White iPhone de la section DOWNLOAD.

#stacks_in_343_page0 : Div correspondant à "1 column foundation" de la section REVIEWS.

#stacks_in_265_page0 : Div correspondant à "1 column foundation" de la section FOOTER.
*/




/* Résout le problème de de hauteur des sections sur Chrome */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}




.misspipi_h2, .misspipi_h2_alt {
    font-family: sf_pro_displaysemibold !important;
    font-size: 2.0rem  !important;
    letter-spacing: -0.08rem  !important;
    padding-bottom: 1.5rem;
}

.misspipi_h2 {
    color: #DE2871  !important;
}

.misspipi_h2_alt {
    color: #FFFFFF  !important;
}

.misspipi_p .misspipi_p_alt {
    font-family: sf_pro_displayregular !important;
    font-size: 1.0rem  !important;
    letter-spacing: 0.02rem  !important;
    line-height: 150%;
}

.misspipi_p {
    color: #464646  !important;
}

.misspipi_p_alt {
    color: #FFD0E3  !important;
}

.pb_1 {
    padding-bottom: 1rem;
}

.pb_1_5 {
    padding-bottom: 1.5rem;
}

.quote_p {
    font-family: sf_pro_displayregular !important;
    font-size: 1.2rem  !important;
    letter-spacing: 0.02rem  !important;
    line-height: 150%;
    color: #464646  !important;
    padding-bottom: 50px; 
}

#myExtraContent1, #myExtraContent2, #stacks_in_138_page0, #stacks_in_161_page0, #myExtraContent3, #myExtraContent4, #stacks_in_207_page0, #myExtraContent14, #stacks_in_319_page0, #myExtraContent8, #stacks_in_343_page0 {
    opacity: 0;
}




/*######################################*/
/* MAGIC GELLAN 2 ######################*/
/*######################################*/
.mag-title, .menu-label {
    font-family: sf_pro_displaythin !important;
    font-size: 1.25rem  !important;
    letter-spacing: 0.02rem  !important;
}

.mag-link {
    font-family: sf_pro_displayregular !important;
    font-size: 1.0rem  !important;
    letter-spacing: 0.02rem  !important;
}




/*######################################*/
/* COLORS ##############################*/
/*######################################*/
.spinner > div {
    background-color: #FF2D81;
}

.home_subtitle {
    color: #FFFFFF;
}




/*###################################*/
/* Padding des sections Mobile BEGIN */
/*###################################*/

/* Div correspondant à "2 column foundation" de la section SMART. */
#stacks_in_161_page0 {
    padding-top: 0.5rem;
    padding-bottom: 3rem;
}

/* Div correspondant à "2 column foundation" de la section HERE WE GO. */
#stacks_in_207_page0 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Div correspondant à "1 column foundation" de la section DOWNLOAD. */
#stacks_in_319_page0 {
    padding-top: 3rem;
}   

/* Div correspondant à "1 column foundation" de la section REVIEWS. */
#stacks_in_343_page0 {
    padding-top: 3rem;
    padding-bottom: 0rem;
}

/* Div correspondant à "1 column foundation" de la section FOOTER. */
#stacks_in_265_page0 {
    padding-top: 3rem;
}

/*################################*/
/* Padding des sections Mobile END*/
/*################################*/




/*######################################*/
/* TYPOGRAPHY ##########################*/
/*######################################*/
@font-face {
    font-family: 'akadora';
    src: url('../fonts/akadora-webfont.woff2') format('woff2'),
         url('../fonts/akadora-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_displaylight';
    src: url('../fonts/sf-pro-display-light-webfont.woff2') format('woff2'),
         url('../fonts/sf-pro-display-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_displaymedium';
    src: url('../fonts/sf-pro-display-medium-webfont.woff2') format('woff2'),
         url('../fonts/sf-pro-display-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_displayregular';
    src: url('../fonts/sf-pro-display-regular-webfont.woff2') format('woff2'),
         url('../fonts/sf-pro-display-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_displaysemibold';
    src: url('../fonts/sf-pro-display-semibold-webfont.woff2') format('woff2'),
         url('../fonts/sf-pro-display-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_displaythin';
    src: url('../fonts/sf-pro-display-thin-webfont.woff2') format('woff2'),
         url('../fonts/sf-pro-display-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_displayultralight';
    src: url('../fonts/sf-pro-display-ultralight-webfont.woff2') format('woff2'),
         url('../fonts/sf-pro-display-ultralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




/*######################################*/
/* PREVENTS TO DRAG IMG ################*/
/*######################################*/
img {
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}




/*######################################*/
/* PRELOADER ###########################*/
/*######################################*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; 
    z-index: 9999; /* makes sure it stays on top */
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%; /* centers the loading animation horizontally one the screen */
    top: 50%; /* centers the loading animation vertically one the screen */
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px; /* is width and height divided by two */
}

/* Loading animation: */

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}




/*######################################*/
/* HOME ################################*/
/*######################################*/
.home_section {
    padding-top: 10%;
    z-index: 0;
    overflow: hidden;
}

.home_subtitle {
    font-family: sf_pro_displayultralight;
    font-size: 40px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.cta_btn {
    font-family: sf_pro_displaysemibold;
    letter-spacing: 0.03rem;
}

#stacks_out_349_page0, #stacks_out_351_page0 {
    display: block;    
}

#stacks_out_349_page0 {
    padding-left: 3%;
}

#myExtraContent1 {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    /*height: auto;*/
}

#header_social_icons {
    position: relative;
    left: -17px;
    z-index: 1;
    margin-top: 14rem;
    margin-bottom: 0rem;
}

#header_social_icons li {
    color: #FF97C0;
    display: inline;
    padding-right: 0.8rem;
}

#header_fb_icon:hover, #header_tw_icon:hover, #header_inst_icon:hover {
    color: #FFFFFF;
    cursor: pointer;
}

#header_fb_like {    
     z-index: 1;
     margin-top: -10px;
}




/*######################################*/
/* SMART ###############################*/
/*######################################*/
#stacks_in_191_page0 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 365px;
}

#myExtraContent3 {
    position: absolute;    
    left: 0;
    top: 0;
    z-index: 30;    
}

#myExtraContent4 {
    position: relative;
    left: 0;
    top: 0;
    z-index: 29;
}




/*######################################*/
/* HERE WE GO ##########################*/
/*######################################*/
#myExtraContent5 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 186px;
}

#myExtraContent14 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 282px;
}

/*#herewego_demo {
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;    
    width: 282px;
    height: 572px;
}

#herewego_frame {
    position: absolute;
    width: 282px;
    height: 572px;
    z-index: 50;  
}

#herewego_video {
    position: relative;
    left: 19px;
    top: 47px;
    width: 245px;
    z-index: 49; 
}*/




/*######################################*/
/* DOWNLOAD ############################*/
/*######################################*/
.download_p {
    padding-bottom: 1rem;
}

#stacks_in_283_page0 {
    padding-top: 1rem;
}

#myExtraContent6 {
    margin-left: auto;
    margin-right: auto;
    max-width: 94px;
    padding-bottom: 25px;
}

#myExtraContent7 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 260px;
    padding-top: 10px;
}

#myExtraContent8 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 372px;
}

#myExtraContent9 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 3rem;
    max-width: 275px;    

    /* App Store Button Dropdown Shadow */
    -webkit-filter: drop-shadow(0px 6px 20px #DADADA);
    filter: drop-shadow(0px 6px 20px #DADADA);
}




/*######################################*/
/* REVIEWS #############################*/
/*######################################*/
.five_stars {
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
    padding-bottom: 5px;
}




/*######################################*/
/* FOOTER ##############################*/
/*######################################*/
.footer_copyright {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#footer_fb_like {
    text-align: center;  
    z-index: 1;
    margin-top: 1.5rem;
}

#footer_social_icons {
    text-align: center;
    z-index: 1;
    margin-top: 2rem;
}

#footer_social_icons li {
    color: #FF97C0;
    display: inline;
    padding-right: 1.0rem;
}

#footer_fb_icon:hover, #footer_tw_icon:hover, #footer_inst_icon:hover {
    color: #FFFFFF;
    cursor: pointer;
}




/*######################################*/
/* RESPONSIVE ##########################*/
/*######################################*/
/* Mobile first : See other sections above. */

/* Tablet */
@media only screen and (min-width: 641px) and (max-width: 1024px) 
{   
    /*###################################*/
    /* Padding des sections Tablet BEGIN */
    /*###################################*/
    
    /* Div correspondant à "2 column foundation" de la section SMART. */
    #stacks_in_161_page0 {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    /* Div correspondant à "2 column foundation" de la section HERE WE GO. */
    #stacks_in_207_page0 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* Div correspondant à "1 column foundation" de la section DOWNLOAD. */
    #stacks_in_319_page0 {
        padding-top: 4rem;
    }   

    /* Div correspondant à "1 column foundation" de la section REVIEWS. */
    #stacks_in_343_page0 {
        padding-top: 4rem;
        padding-bottom: 0rem;
    }

    /* Div correspondant à "1 column foundation" de la section FOOTER. */
    #stacks_in_265_page0 {
        padding-top: 4rem;
    }

    /*################################*/
    /* Padding des sections Tablet END*/
    /*################################*/

   .misspipi_h2, .misspipi_h2_alt {
        font-size: 2.5rem  !important;
    }

    .misspipi_p, .misspipi_p_alt {
        font-size: 1.15rem  !important;
    }

    .quote_p {
        font-size: 1.35rem  !important;
    }

    .home_subtitle {
        font-size: 45px;
    }
    
    #myExtraContent1 {
        width: 384px;
        /*height: auto;*/
    }

    #stacks_in_191_page0 {
        padding-left: 0;
        padding-right: 0;
        max-width: 280px;
    }

    #myExtraContent5 {
        position: relative;
        left: -25px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        max-width: 150px;
    }

    #myExtraContent14 {
        padding-left: 0;
        padding-right: 0;
        max-width: 210px;
    }

    #stacks_in_283_page0 {
        padding-top: 3rem;
    }

    .download_p {
        padding-bottom: 0.5rem;
    }

    #myExtraContent7 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: auto;
        max-width: 235px;
    }

    #myExtraContent8 {
        padding-left: 0;
        padding-right: 0;
        max-width: 260px;
    }

    #myExtraContent9 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        max-width: 200px;
    }

    .five_stars {
        max-width: 150px;
    }

    #stacks_out_349_page0, #stacks_out_351_page0 {
        display: inline-block;
    }
}

/* Desktop */
@media only screen and (min-width: 1024px)
{
    /*####################################*/
    /* Padding des sections Desktop BEGIN */
    /*####################################*/
    
    /* Div correspondant à "2 column foundation" de la section SMART. */
    #stacks_in_161_page0 {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }

    /* Div correspondant à "2 column foundation" de la section HERE WE GO. */
    #stacks_in_207_page0 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    /* Div correspondant à "1 column foundation" de la section DOWNLOAD. */
    #stacks_in_319_page0 {
        padding-top: 6rem;
    }   

    /* Div correspondant à "1 column foundation" de la section REVIEWS. */
    #stacks_in_343_page0 {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }

    /* Div correspondant à "1 column foundation" de la section FOOTER. */
    #stacks_in_265_page0 {
        padding-top: 6rem;
    }

    /*#################################*/
    /* Padding des sections Desktop END*/
    /*#################################*/
    

    .misspipi_h2, .misspipi_h2_alt{
        font-size: 3.0rem  !important;
    }

    .misspipi_p, .misspipi_p_alt {
        font-size: 1.3rem  !important;
    }

    .quote_p {
        font-size: 1.5rem  !important;
    }

    .home_subtitle {
        font-size: 60px;
    }
    
    #myExtraContent1 {
        width: 434px;
        /*height: auto;*/
    }

    #stacks_in_191_page0 {
        padding-left: 0;
        padding-right: 0;
    }

    #myExtraContent5 {
        position: relative;
        left: -25px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #myExtraContent14 {
        padding-left: 0;
        padding-right: 0;
    }

    #stacks_in_283_page0 {
        padding-top: 2.5rem;
    }

    .download_p {
        padding-bottom: 1.5rem;
    }

     #myExtraContent7 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 260px;
    }

    #myExtraContent8 {
        padding-left: 0;
        padding-right: 0;
    }

    #myExtraContent9 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .five_stars {
        margin-left: 0;
        margin-right: 0;
        max-width: 186px;
    }

    .quote_p {
       text-align: left !important;
    }

    #stacks_out_349_page0, #stacks_out_351_page0 {
        display: inline-block;
    }

    .footer_copyright {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }
}