@charset "UTF-8";
/* CSS Document */

*{
    outline: none;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;}
body{
     
    background: #ebebeb;
    color: #527fc0;
    font-family: futura, Helvetica, Arial, sans-serif;
    position: relative;width: 100%;
    min-width: 0;
    overflow-x: hidden;}
html{
    position: relative;
    height: 100%;
    width: 100%;}


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

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



h1{
    text-transform: uppercase;
    font-family: futura, Helvetica, Arial, sans-serif;
    margin-bottom: 5vw;
    font-size: 30px;
    letter-spacing: 3px;}
h2{
    text-transform: uppercase;
    font-family: futura, Helvetica, Arial, sans-serif;
    margin: 5vw 0 2vw 0;
    font-size: 20px;
    letter-spacing: 1px;}
h3{
    text-transform: uppercase;
    font-family: futura, Helvetica, Arial, sans-serif;
    margin-bottom: 5vw;
    font-size: 20px;
    letter-spacing: 1px;}
p{  
    font-family: futura, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 38px;
    width: 100%;}

p.legend.soldOut{
    color: #caa;
    font-size: 15px;}

p.legend.comingSoon{
    color: #bc0004;
    font-size: 18px;
    margin: 20px 0;}

p.paypalfriend{
    display: none;
    color: #caa;
    font-size: 15px;
    line-height: 18px;}

p.citation{
    margin-bottom: 0 !important;
    font-style: italic;
    font-size: 16px;
    line-height: 23px !important;}
p.citationLink {}
.citationLink a{ border-bottom: solid 1px #527fc0;}

.smallSize p.citation, .smallSize p.citationLink{
    line-height: 60px !important;
    font-size: 35px !important;}

li{  
    font-family: futura, Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 30px;
    width: 60%;
    margin: 0 auto;}

a{
    color: #527fc0;
    text-decoration: none;}

.closeMe{
    cursor: pointer;
    display: none;
    border-radius: 50%;
    background: #bc0004;
    position: fixed;
    top: 50px;
    right: 50px;
    padding: 20px;
    z-index: 200000001;}
.closeMe img{
    width: 50px;}

.nav{
    /*min-width: calc(520px - 10px);*/
    -webkit-transition: all 0.3s; 
    transition: all 0.3s;
    position: fixed;
    width: calc(100vw - 10px);
    height: auto;
    background: #bc0004;
    z-index: 1000;
    padding: 10px 5px;
    top: 0;}
.nav:hover{
    background: #fff;}
.nav:hover li a{
    color: #bc0004;}
.nav--hidden{
    transform: translateY(-100%);
    opacity: 0;}

.nav ul{
    position: relative;
    text-align: left;
    line-height: 25px;
    width: calc(100% - 90px);}
    
.nav li.smallHome{display: none;}
.nav li.bigHome{display: inline-block;}
.smallSize .nav li.bigHome{display: none;}
.smallSize .nav li.smallHome{display: inline-block;}
.nav li{
    font-family: adam, Helvetica, Arial, sans-serif;
    list-style-type:none;
    display: inline-block;
    margin: 2px 10px 0;
    width: auto;}

.nav li strong{
    font-family: adam, Helvetica, Arial, sans-serif;}

.nav li a{
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
    font-family: adam, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    font-size:14px;
    letter-spacing: 2px;
    background: transparent;}

.nav li a:hover{
    color: #ee8c8e;}


.alert{
    color: #bd2a2a !important;}


/* paypal stuff */

.payMeButton{
    min-width: 230px;
    font-size: 15px;
    line-height: 23px;
    color: #527fc0;
    z-index: 200;
    width: 10%;
    margin: 40px auto 40px;
    position: relative;
    text-align: center;}
.payMeButton table{
    margin: 0 auto;}
.payMeButton td{
    text-align: center;
    color: #527fc0;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 0px 0 5px 0;}
.payMeButton input{width: 120px;}
.payMeButton select{
    background: url(/images/ddBgd.png) no-repeat right center;
    -webkit-appearance: none;
    padding: 0 40px 0 10px;
    font-family: futura, Helvetica, Arial, sans-serif;
    vertical-align: middle;
    height: 30px;
    width: 100%;
    border: none;
    display: inline-table;
    letter-spacing: 1px;
    background-color: #a7df2c;}
.myCard{
    z-index: 100000;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 90px;}
.myCard input{
    width: 90px;}

.commingSoon{
    text-align: center;
    margin: 40px auto;}
.commingSoon img{
    width: 120px;}
.commingSoonLabel {
    color: red;
    font-weight: bold;}

.presaleIntro {
    color: red;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 25px;}

.smallSize .presaleIntro{
    line-height: 35px !important;
    font-size: 30px !important;}

/************************/

.intro{
     
    width: calc(100vw - 20vw);
    height: auto;
    padding: 15vw 10vw 10vw;
    position: relative;}

    .intro::before {
      content: "";
      position: absolute;
      inset: -15%;
      z-index: -1;

      background:
        radial-gradient(circle at 20% 30%, #F0E6BE 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, #D1EBFF 0%, transparent 45%),
        radial-gradient(circle at 55% 80%, #E2F2CB 0%, transparent 45%),
        radial-gradient(circle at 90% 85%, #23D1FF 0%, transparent 40%);

      filter: blur(70px);
      transform: scale(1.1);
      width: 100vw;
    }
.logo{
    width: clamp(500px, 70vw, 1000px);
    min-width: 500px;
    margin-bottom: 70px;}

.catalogue{
     
    width: calc(100vw - 20vw);
    background: #fff;
    height: auto;
    padding: 10vw 10vw 0 10vw;}

.mobileMe.portrait .catalogue{
    padding: 90px 10vw 0 10vw;}
.mobileMe.landscape .catalogue{
    padding: 70px 10vw 0 10vw;}

.mobileMe .catalogue.introCatalogue{
    padding-top: 3vh;}

.mobileMe.landscape .catalogue.introCatalogue{
    padding-top: 10vh;}

.smallSize .catalogue{
    padding-top: 140px;
}

.auteurs{
    width: calc(100vw - 20vw);
    background: #fbf3ed;
    height: auto;
    padding: 10vw 10vw 0 10vw;}
.mobileMe .auteurs{
    padding: 90px 10vw 0 10vw;}
.mobileMe.landscape .auteurs{
    padding: 70px 10vw 0 10vw;}
.mobileMe .auteurs .item:nth-child(odd) {left: 0 !important;}
/*.galaxyTime .auteurs .item:nth-child(odd) {left: 0 !important;}*/
/*.galaxyTime .auteurs .item:nth-child(even) {left: 9vw !important; position: relative;}*/
.smallSize .auteurs{
    padding-top: 140px;
}



.howToContent{
     
    width: calc(100vw - 20vw);
    background: #ebebeb;
    height: auto;
    padding: 5vw 10vw 10vw;}
.howToContent h2{
    margin: 30px 0 5px 0;}
.howToContent p{
    line-height: 25px;
    font-size: 15px !important;}

.footer{
    position: relative;
     
    width: calc(100vw - 20vw);
    background: #fff;
    height: auto;
    padding: 5vw 10vw 10vw;}
.footer h2{
    margin-bottom: 0;}
.footer .logo{
    margin-bottom: 30px;}
.discoveryHandler{
    position: absolute;
    bottom: 5vw;
    right: 5vw;}
.discoveryHandler img{
    width: 10vw;
    min-width: 200px;}

.mobileMe .discoveryHandler{
position: relative;
bottom: auto;
right: auto;
margin-top: 40px;
display: block;
width: 100%;
text-align: center;
}

/************************/


.item{
    text-align: center;
    width: 25vw;
    margin-bottom: 10vw;
    display: inline-table;}
.auteursContainer .item{
    margin-bottom: 0vw;}

.catalogue.introCatalogue .item {
    margin-bottom: 30px;
}

.catalogue .item {
    text-align: center;
    width: 25vw;
    margin-bottom: 10vw;
    display: inline-table;
}

.catalogue .item.second-visible {
    left: 9vw;
    position: relative;
}

.catalogue .item.filtered-out {
    display: none !important;
}


.item img{
    height: 25vw;}
.itemVisual{
    width: 25vw;
    background: #EBDAC1;
    text-align: center;
    padding: 5vw 5vw;}

.collectionFilter {
    padding: 12px 16px;
    font-size: 16px;
    background-color: #f2f1f1;
    cursor: pointer;
    margin-bottom: 30px;
    border: 0;
    color: #697b9e;
    width: 99%;
    border-color: #f2f1f1;
}

.mobileMe .collectionFilter {
    padding: 12px 16px;
    font-size: 20px;
    margin-bottom: 50px;
}


.forme .itemVisual{
    background: #DAC8D0;}
.peauCommune .itemVisual{
    background: #C6D7F1;}
.cordees .itemVisual{
    background: #D9E5CC;}
.coffret .itemVisual{
    background:#E7A4A4;}
.item p{
    width: 100%;
    line-height: 25px;}
.photoCredit{
    font-size: 12px;
    color: #9aacc8;}
.smallSize .photoCredit{
    font-size: 19px;
    margin: -20px 0 100px 1px;}


.auteurs .item:nth-child(even) { left: 9vw !important; left: inherit; position: relative; }
.mobileMe .auteurs .item:nth-child(even) {left: 9vw; position: relative;}
.mobileMe.portrait .auteurs .item:nth-child(even) {left: 0;}

.smallSize.portrait .auteurs .item:nth-child(2n +2) {left: 0 !important;}

.allCatalogue{
     
    width: auto;
    background: #fff;
    height: auto;
    padding: 0 50px 40px 0;
    text-align: right;
}
/************************/
.detailContainer{
     
    width: 100vw;
    height: auto;
    padding: 10vw 0 0;
    font-size: 0;
    letter-spacing: 0;}
.left{
    display: inline-table;
    width: calc(60% - 12%);
    height: auto;
    padding: 5% 2% 0 10%;
    vertical-align: top;}
.right{
    display: inline-table;
    width: calc(40% - 12%);
    height: auto;
    padding: 5% 10% 0 2%;
    vertical-align: top;}

.left p{
    margin-bottom: 35px;
    line-height: 30px;}

.detailContainer .itemVisual{
    padding: 2.5vw 2.5vw;
    width: 23vw;}
.detailContainer .item img{
    height: 23vw;}

.detailContainer .item:nth-child(odd){left: 0;}
.left .item:nth-child(even){left: 2vw; position: relative;}
.left .item{
    width: 15vw;}
.left .item img{
    height: 15vw;}
.left .itemVisual{
    padding: 2.5vw 2.5vw;
    width: 15vw;}
.left .item img{
    height: 15vw;}
.smallSize .left .item:nth-child(even){left: 0vw;}
.right .item{
    margin-bottom: 0;}

.mobileMe.landscape .auteursContainer .item{
    margin-left: 15vh;}
.mobileMe.landscape .auteursContainer .item:nth-child(3n +1){

    margin-left: 0;}

#preview_03{
    margin: 0px auto 20px;}
#preview_04{
    //margin: 0px auto 110px;}
#preview_05{
    width: 100%;}
.previewContainer .preview{
    //-webkit-transition: all 0.3s; 
    //transition: all 0.3s;
    width: 100%;
    margin-bottom: 20px;}
.fullScreen, .fullscreen{
    -webkit-transition: width 0.3s; 
    transition: width 0.3s;
    box-shadow: 0px 0px 0px 200000px #000;
    width: 100vw !important;
    position: absolute;
    left: 0;
    z-index: 200000000;}
.videoWrapper {
    margin: 100px auto 0px;
    position: relative;
    padding-bottom: 54.85%; 
    height: 0;
    margin: 0px auto 20px auto;}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}
.smallSizePreview{
    position: relative;
    display: none;}
.smallSizePreview img{
    width: 100%;
    margin-bottom: 35px;}
.smallSize .smallSizePreview{
    display: block;}

/************************/
.smallSize .intro{
    padding-top: 250px;}
.smallSize.landscape .intro{
    padding-top: 100px;}
/*.smallSize .nav{
    position: relative;}*/
.smallSize .nav li a{
    font-size: 12px;
    line-height: 30px;}
.smallSize .logo{
    width: 95%;
    min-width: 450px;}
.smallSize .footer{
    padding: 5vw 10vw 45vw 10vw;}

.smallSize h1{
    font-size: 60px;
    line-height: 65px;}

.smallSize h2{
    font-size: 40px;
    line-height: 50px;}

.smallSize p{
    font-size: 35px;
    line-height: 60px;}

.smallSize .left p{
    font-size: 40px;
    line-height: 70px;}

.smallSize p.legend.soldOut{
    font-size: 30px;
    line-height: 40px;}

.smallSize .detailContainer{
    padding-top: 250px;}
.smallSize.landscape .detailContainer{
    padding-top: 100px;}
.smallSize .right{display: none;}
.smallSize .left{
    display: block;
    width: calc(100% - 20%);
    padding: 5% 10% 0 10%;}
.smallCover{display: none;}
.smallSize .smallCover{display: block;}
.smallSize .smallCover .item{
    margin-bottom: 5vw;}
.smallSize .smallCover .itemVisual{
    width: 70vw;
    padding: 5vw;}
.smallSize .smallCover .item img{
    height: 70vw;}
.smallSize .payMeButton{
    width: 100%;
    padding: 0;
    margin: 0;}
.smallSize .payMeButton td{
    font-size: 25px;}
.smallSize .payMeButton input{width: 180px;}
.smallSize .myCard{
    top: 10px;
    right: 10px;
    width: 90px;}
.smallSize .myCard input{width: 90px;}
/*.smallSize.landscape .myCard{
    top: 10px;
    right: 10px;
    width: 120px;}*/
/*.smallSize.landscape .myCard input{width: 120px;}*/
.smallSize .payMeButton select{
    height: 40px;
    padding: 5px 40px 5px 10px;
    font-size: 25px;}


/*.smallSize .auteursContainer .itemVisual{
    width: 50vw;}*/
/*.smallSize .left .auteursContainer .item img {
height: 90%;
margin-top: 5%;}*/
.smallSize .item p{
    font-size: 30px;}

.smallSize.portrait .itemVisual{
    width: 70vw;}
.smallSize.portrait .item img{
    height: 70vw;}
.smallSize.portrait .item:nth-child(2n+1){
    left: 0;}

.smallSize .howToContent p{
/*    line-height: 42px !important;
    font-size: 25px !important;
    letter-spacing: -1px;*/}


.smallSize .closeMe{
    display: none !important;}


/************************/


.mobileMe .intro{
    padding-top: 130px;}
.mobileMe.landscape .intro{
    padding-top: 80px;}
/*.mobileMe .nav{
    position: relative;}*/
.mobileMe .nav li{
    margin: 2px 5px 0;}
.mobileMe .nav ul{
    width: calc(100% - 90px);}
.mobileMe .nav li a{
    font-size: 18px;
    line-height: 35px;}
.mobileMe.landscape .nav li a{
    font-size: 15px;
    line-height: 30px;}
.mobileMe.portrait .nav li a{
    font-size: 10px;
    line-height: 20px;}
.mobileMe .logo{
    width: 100%;
    min-width: 450px;}
.mobileMeLogo{display: none;}
.mobileMe .logo{display: none;}
.mobileMe .mobileMeLogo{display: block;}
.mobileMe h1{
    font-size: 30px;
    line-height: 35px;
    margin: 15px 0 35px 0;}

.mobileMe .introCatalogue h1{
    margin: 15px 0 30px 0;}

.mobileMe h2{
    font-size: 20px;
    line-height: 30px;}

.mobileMe.landscape p{
font-size: 30px;
line-height: 40px;}

.mobileMe.portrait p{
font-size: 20px;
line-height: 30px;}

.mobileMe .left p{
    font-size: 20px;
    line-height: 30px;}



.mobileMe p.legend.soldOut{
    font-size: 30px;
    line-height: 40px;}

.mobileMe .detailContainer{
    padding-top: 20px;}
.mobileMe.landscape .detailContainer{
    padding-top: 0px;}
.mobileMe .right{display: none;}
.mobileMe .left{
    display: block;
    width: calc(100% - 20%);
    padding: 90px 10% 0 10%;}
.mobileMe.portrait .left{
    padding-top: 70px;}
.mobileMe .smallRight{display: block;}
.mobileMe .smallCover{display: block;}
.mobileMe .smallCover .item{
    margin-bottom: 5vw;}

.mobileMe.portrait .itemVisual{
    width: 70vw;}
.mobileMe.portrait .item img{
    height: 70vw;
    width: inherit;}
.mobileMe.portrait .item.second-visible{
    left: auto;}
.smallSize .item:nth-child(2n + 2){
    left: auto;}
.smallSize.galaxyTime .item:nth-child(2n + 2){
    left: 9vw;}
.smallSize.galaxyTime.landscape .auteursContainer .item:nth-child(2n + 2){
    left: 0;}
.smallSize.galaxyTime.portrait .catalogue .item:nth-child(2n + 2){
    left: 0;}
.mobileMe .payMeButton{
    width: 100%;
    padding: 0;
    margin: 0;}
.mobileMe .payMeButton td{
    font-size:45px;}
.mobileMe .payMeButton input{width: 180px;}
.mobileMe .myCard{
    top: 10px;
    right: 10px;
    width: 90px;}
.mobileMe .myCard input{width: 90px;}
/*.mobileMe.landscape .myCard{
    top: 10px;
    right: 10px;
    width: 120px;}*/
/*.mobileMe.landscape .myCard input{width: 120px;}*/
.mobileMe .payMeButton select{
    height: 55px;
    padding: 5px 40px 5px 10px;
    font-size: 35px;}

.mobileMe .item p{
    font-size: 20px;
    line-height: 30px;}

.mobileMe.portrait .item{
    width: 80vw;}

.mobileMe.portrait .item:nth-child(2n+1){
    left: 0;}

.mobileMe .howToContent p{
    line-height: 25px !important;
    font-size: 15px !important;
    letter-spacing: -1px;}


.mobileMe .closeMe{
    display: none !important;}



.mobileMe.portrait .detailContainer .itemVisual{
    width: 75vw;
    height: 75vw}
.mobileMe.portrait .detailContainer .item img{
    height: 75vw;
    width: auto;}
/*.mobileMe.landscape .detailContainer .item img{
    height: 100%;
    width: auto;}*/

.mobileMe.portrait .detailContainer .left .item:nth-child(even){
    left: 0;}


/************************/


/************************/

.sib-form, #sib-container{
/*    background: #00497e !important;}*/

.sib-form, #sib-container, #sib-container label, #sib-container p{
    color: #6199ed !important;}



/*

.forme{
    padding: 100px 0 0 0;
    background: #7db0d5;
    color: #ebebeb;}
.collectionBleuDansVert{
    padding: 100px 0 0 0;
    margin-top: 120px;
    background: #dc9667;
    color: #ebebeb;}
.livre{
    margin: 100px 0 100px 0;
    border-bottom: solid 1px #a1d0f2;}
.livre:last-child{
    margin-bottom: 0;}
.visual{
    width: 50%;
    margin: 50px 0;
    max-width: 600px;}
.livre p{
    font-size: 24px;
    line-height: 28px;
    margin: 0 auto;}
.collectionBleuDansVert .livre p{
    margin-bottom: 30px;}
p.legend{
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 60px;}
p.legend.soldOut{
    color: #aed7f4;
    margin: -60px auto 60px;}
.forme .previewContainer{
    margin: 100px auto 20px;}
.collectionBleuDansVert .previewContainer{
    //margin: 100px auto 0px;}

.howto{
-webkit-transition: all 0.3s; 
transition: all 0.3s;
background: #c6f96b;
color: #273d4d;
border-radius: 50%;
font-size: 14px !important;
padding: 40px 28px 18px 30px;
text-transform: uppercase;
letter-spacing: 1px;
width: 90px;
height: 85px;
display: block;
margin: 0 auto 50px auto;}
.howto:hover{
background: #a2f40e;
color: #273d4d;}
.header .howto{
    background-color: #9d2;
    margin: 80px auto 0px auto;}
.header .howto:hover{
    background-color: #baee5e;}

.howToContent{
    padding: 100px 0;}
.howToContent h1{
    margin-bottom: 100px;}
.footer{
    color: #4085ec !important;
    padding: 100px 0;
    width: 100%;}
.footerLogo{
    width: 30%;}
.footer a{color: #4085ec !important;}




.smallSize .forme, .smallSize .footer, .smallSize .howToContent, .smallSize .header, .smallSize .collectionBleuDansVert{
    min-width: 600px;}
.smallSize .footer p{
    font-size: 16px;}
.smallSize .footerLogo{
    width: 70%;}   
.smallSize p{
    width: 90%;}





.videoWrapper {
    margin: 100px auto 0px;
    position: relative;
    padding-bottom: 54.85%; 
    height: 0;
    margin: 2vw auto 1vw auto;}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}


*/