@charset "utf-8";
:root {
    --img-0: #121212;
    --bg-0: #191919; /*10% image du haut*/
    --bg-1: #262626; /*15%*/
    --bg-2: #323232; /*20%*/
    --bg-3: #404040; /*25%*/
    --bg-4: #4d4d4d; /*30%*/
    --bg-5: #595959; /*35%*/
    --bg-6: #656565; /*40%*/
    --bg-7: #737373; /*45%*/
    --bg-8: #808080; /*50%*/
    --bg-9: #8c8c8c; /*55%*/

    --tx-0: #ffffff; /*100%*/
    --tx-1: #f2f2f2; /*95%*/
    --tx-2: #e5e5e5; /*90%*/
    --tx-3: #d9d9d9; /*85%*/
    --tx-4: #cccccc; /*80% peau*/
    --tx-5: #bfbfbf; /*75%*/
    --tx-6: #b3b3b3; /*70%*/
    --tx-7: #a6a6a6; /*65%*/
    --tx-8: #999999; /*60%*/
    --tx-9: #8c8c8c; /*55%*/
    --tx-a: #808080; /*50%*/
    --tx-b: #737373; /*45%*/

    --tx-s0: #e2e200; /* selected item :hover*/
    --tx-s5: #707000; /* grayed selected item :hover*/


    /* T 0°, S 20% */
    --bg-0r: #1a1414; /*10% image du haut*/
    --bg-1r: #261f1f; /*15%*/
    --bg-2r: #332929; /*20%*/
    --bg-3r: #403333; /*25%*/
    --bg-4r: #4d3d3d; /*30%*/
    --bg-5r: #594747; /*35%*/
    --bg-6r: #665252; /*40%*/
    --bg-7r: #735c5c; /*45%*/
    --bg-8r: #806666; /*50%*/
    --bg-9r: #8c7070; /*55%*/

    --tx-0r: #ffcccc; /*100%*/
    --tx-1r: #f2c2c2; /*95%*/
    --tx-2r: #e5b8b8; /*90%*/
    --tx-3r: #d9adad; /*85%*/
    --tx-4r: #cca3a3; /*80% peau*/
    --tx-5r: #bf9999; /*75%*/
    --tx-6r: #b38f8f; /*70%*/
    --tx-7r: #a68585; /*65%*/
    --tx-8r: #997a7a; /*60%*/
    --tx-9r: #8c7070; /*55%*/
    --tx-ar: #806666; /*50%*/
    --tx-br: #735c5c; /*45%*/

    /* T 200°, S 20% */
    --bg-0b: #14181a; /*10% image du haut*/
    --bg-1b: #1f2426; /*15%*/
    --bg-2b: #293033; /*20%*/
    --bg-3b: #333c40; /*25%*/
    --bg-4b: #3d474d; /*30%*/
    --bg-5b: #475359; /*35%*/
    --bg-6b: #525f66; /*40%*/
    --bg-7b: #5c6b73; /*45%*/
    --bg-8b: #667780; /*50%*/
    --bg-9b: #70838c; /*55%*/

    --tx-0b: #cceeff; /*100%*/
    --tx-1b: #c2e2f2; /*95%*/
    --tx-2b: #b8d6e5; /*90%*/
    --tx-3b: #adcad9; /*85%*/
    --tx-4b: #a3becc; /*80% peau*/
    --tx-5b: #99b2bf; /*75%*/
    --tx-6b: #8fa7b3; /*70%*/
    --tx-7b: #859ba6; /*65%*/
    --tx-8b: #7a8f99; /*60%*/
    --tx-9b: #70838c; /*55%*/
    --tx-ab: #667780; /*50%*/
    --tx-bb: #5c6b73; /*45%*/

    /* for tooltips */
    --bg-tt: #ffffff;
    --bg-ttr: #fff2f2;
    --bg-ttb: #f1faff;
    --tx-tt: #ff00df; /* purple  ff00df / blue -> 00aaff*/;
}

/* * {box-sizing: border-box;}

body {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	background-color: var(--bg-0);
	color: var(--tx-0);
}
.top {
	background-color:var(--img-0);
	width:100%;
	margin-bottom: -4px;
}
.top img {
 	margin-left:0;
 	margin-right:auto;
}
.topbtn{
    margin-top:-20px;
    margin-right: 10px;
    height:20px;
}
.main{
	width:80%;
}

*/

.debug {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3200;
    color:#F00;
    font-weight:700;
    background-color:rgba(0,0,0,0);
    opacity: 1;
    pointer-events: none;
}

/*****************************************************************
 * Best
 ***************************************************************/
.best{
    width:100%;
}
.best > img {
    width: 100%;
    height:auto;
}
.loader{
    display: none;
    position: absolute;
}
.main_btn {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
.main_btn > a.round {
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.6em 0.3em 0.6em;
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color: var(--tt-0);
    background-color: var(--bg-7);
    text-align:center;
    transition: all 0.2s;
}
.main_btn > a.round:hover{
    background-color:var(--bg-4);
}

/*****************************************************************
 * SEARCH
 ***************************************************************/
.search {
    float: left;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
.menu {
    float: left;
    width: 20%;}

.packito {
    width:100%;
}
.packito-boomer > img{
    max-width:50%;
    margin-left: 25%;
}
.packito-banner{
    overflow: auto;
    background-color: var(--bg-7);
    width: 100%;
}

.menu-switch {
    right: 10px;
    display:none;
}

.switch {
    position: relative;
    display: inline-block;
}

.packito-banner > label.switch {
    float: right;
    margin-right:10px;
    height: 20px;
}

.switch > input { display: none; margin: 0px; }
.switch > img {width:24px;}
.switch > input + img {display:none;}
.switch > input:checked + img {display:inline;}
.switch > input + img +img {display:inline;}
.switch > input:checked + img + img {display:none;}

/*************************************************************/
/* masonry */
/*************************************************************/
.grid-sizer,
.grid-item,
.grid-item-1{ width: 20%;}
.grid-item-2{ width: 40%;}
.grid-item-3{ width: 60%;}
.grid-item-4{ width: 80%;}
.grid-sizer5,
.grid-item-5{ width: 100%;}

.grid-item {
    background-color: var(--bg-0);
}
.grid-item-banner{
    background-color: var(--bg-0);
    width: 100%;
}
.grid-item-boomer{
    width: 100%
}

div.grid-item > div.item-wrapper { position: relative;}
div.grid-item > div.item-wrapper > div.inner-wrapper { position: absolute; top:0; bottom:0; left:0; right: 0;}
.grid-item img {
    display: block;
    width:100%;
    height: auto !important;
    opacity: 1;
}
/************************************************************/
/*                   Vertical Menu                          */
/************************************************************/
nav.vertical {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 0 10px rgb(var(--tx-0),.95);
    overflow: hidden;
    text-align: center;
}
nav.vertical > ul {
    list-style-type: none;
    margin-top: 0px;
    padding-left: 0px;
}
nav.vertical > ul > li {
    display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
    background-color: var(--bg-1);
    background-image: -webkit-linear-gradient(135deg, var(--bg-3r), var(--bg-1));
    background-image: -moz-linear-gradient(135deg, var(--bg-3r), var(--bg-1));
    background-image: -o-linear-gradient(135deg, var(--bg-3r), var(--bg-1));
    background-image: linear-gradient(135deg, var(--bg-3r), var(--bg-1));
    border-bottom: 1px solid rgba(var(--tx-0),.1);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
    color: var(--tx-0);
    display: block;
    font-size: .85rem;
    font-weight: 500;
    height: 50px;
    letter-spacing: .2rem;
    line-height: 50px;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
    text-transform: uppercase;
    transition: all .1s ease;
    text-decoration: none;
}
nav.vertical > ul > li.little > label,
nav.vertical > ul > li.little > a {
    background-color: var(--bg-1);
    background-image: -webkit-linear-gradient(135deg, var(--bg-4b), var(--bg-1));
    background-image: -moz-linear-gradient(135deg, var(--bg-4b), var(--bg-1));
    background-image: -o-linear-gradient(135deg, var(--bg-4b), var(--bg-1));
    background-image: linear-gradient(135deg, var(--bg-4b), var(--bg-1));
    font-size: .7rem;
    font-weight: 200;
    height: 25px;
    letter-spacing: .1rem;
    line-height: 25px;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
    background-color: var(--bg-4);
    background-image: -webkit-linear-gradient(150deg, var(--bg-3r), var(--bg-4));
    background-image: -moz-linear-gradient(150deg, var(--bg-3r), var(--bg-4));
    background-image: -o-linear-gradient(150deg, var(--bg-3r), var(--bg-4));
    background-image: linear-gradient(150deg, var(--bg-3r), var(--bg-4));
    cursor: pointer;
}
nav.vertical > ul > li.little > label:hover,
nav.vertical > ul > li.little > a:hover {
    background-color: var(--bg-4);
    background-image: -webkit-linear-gradient(150deg, var(--bg-4b), var(--bg-4));
    background-image: -moz-linear-gradient(150deg, var(--bg-4b), var(--bg-4));
    background-image: -o-linear-gradient(150deg, var(--bg-4b), var(--bg-4));
    background-image: linear-gradient(150deg, var(--bg-4b), var(--bg-4));
    cursor: pointer;
}

nav.vertical > ul > li > label + input {
    display: none;
    visability: hidden;
}
nav.vertical > ul > li > div {
    background-color: var(--bg-4);
    max-height: 0;
    overflow: hidden;
    transistion: all .5s linear;
}
nav.vertical > ul > li > label + input:checked + div{
    max-height: 4500px;
}
nav.vertical > ul > li > div > ul {
    list-style-type: none;
    padding-left:0px;
}
nav.vertical > ul > li > div > ul > li > a {
     background-color: var(--bg-4);
     border-bottom: 1px solid rgba(0,0,0,.05);
     color: var(--tx-2);
     display: block;
     font-size: 1.0rem;
     padding: 10px 0;
     text-decoration: none;
     transition: all 0.15s linear;
}
nav.vertical > ul > li > div > ul > li > a.empty {
    color: var(--tx-b);
}


a.tooltip{
    position: relative;
}
a.tooltip:hover{
    text-decoration:none;
}
a.tooltip:after{
    content: attr(tip);
    font-family:Arial, Helvetica, sans-serif;
    font-size:70%;
    line-height:0.8em;
    color:var(--tx-tt);
    width:50px;
    padding:5px 10px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    background:var(--bg-tt);
    background:-webkit-linear-gradient(270deg,var(--bg-ttb), var(--bg-ttr));
    background:-moz-linear-gradient(270deg,var(--bg-ttb), var(--bg-ttr));
    background:-o-linear-gradient(270deg,var(--bg-ttb), var(--bg-ttr));
    background:-ms-linear-gradient(270deg,var(--bg-ttb), var(--bg-ttr));
    background:linear-gradient(270deg,var(--bg-ttb), var(--bg-ttr));
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0, .65);
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0, .65);
    box-shadow: 3px 3px 4px rgba(0,0,0, .65);
    position:absolute;
    top:30px;
    right:-10px;
    display:none;
}
a.tooltip:before{
    z-index:1000;
    position:absolute;
    content:"";
    top:15px;
    left:0px;
    border-right:7px transparent solid;
    border-left:7px transparent solid;
    display:none;
}
a.tooltip:hover{
    z-index:1000;
    position:relative;
    color:var(--tx-s0);
}
a.empty.tooltip:hover{
    z-index:1000;
    position:relative;
    color:var(--tx-s5);
}
a.tooltip:hover:after{
    display:block;
}
a.tooltip:hover:before{
    display:block;
}

/******************************************************************/
/*  Diaporama modal window                                        */
/******************************************************************/

.dp-drop {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1650;
    background-color:rgba(20,20,20,.8);
    opacity: 1;
}
.dp-main {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1650;
    opacity: 1;
}
.dp-cont {
    position:relative;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    max-width:100%:
    max-height:100%;
    width: 100%;
    height: 100%;
}
.dp-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    width:100%;
    height:100%;
    padding-top: 47px;
    padding-bottom: 120px;
}
.dp-item {
    /*display: inline-block;*/
    display: none;
    height: 100%;
    width: 100%;
    margin-right: -1px;
    text-align: center;
}
.dp-item-wrap {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: inline-block;
    height: 100%;
    width: 100%;
    margin-right: -1px;
    text-align: center;
    vertical-align: middle;
}
.dp-item-wrap img{
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    transform: scale3d(1,1,1);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
}
.dp-thumbs {
    position: absolute;
    bottom: 0;
    width:100%;
    height: 120px;
    max-height: 350px;
    z-index: 1050;
    background-color: rgba(0,0,0,0.5);
}
.dp-thumb {
    position: relative;
    display: block;
    margin: 0;
    padding: 10px 0;
    height: 100%;
    width: 80%;
    transform: translate3d(0px, 0px, 0px);
}
.dp-thumb-item {
    cursor: grab;
    width: 100px;
    height: 100%;
    margin-right: 8px;
    margin-bottom: 5px;
    float: left;
    overflow: hidden;
}
.dp-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dp-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index=1082;
    background: rgba(0,0,0,.45);
    color: #ccc;
    opacity: 0.5;
}

.dp-toolbar .dp-down{
    display:block;
    color: #ccc;
}
.dp-toolbar .dp-down:link{
    color: #ccc;
}
.dp-toolbar .dp-down:visited{
    color: #ccc;
}
.dp-toolbar .dp-down:hover{
    color: #fff;
}


.dp-toolbar .dp-close::after {
    content: "\2716";
}
.dp-toolbar .dp-down::after{
    content: "\1f86b";
}
.dp-toolbar .dp-play::after{
    content: "\25ba";
}
.dp-toolbar .dp-full::after{
    content: "\26F6";
}
.dp-toolbar .dp-zoomin::after{
    content: "\2295";
}
.dp-toolbar .dp-zoomout::after{
    content: "\2296";
}
.dp-toolbar .dp-adjust::after{
    content: "\2750";
}
.dp-toolbar .dp-share::before{
    content: "\1f49d";
}

.dp-toolbar:hover{
    background: rgba(0,0,0,.7);
    opacity: 1;
}
.dp-toolbar .dp-btn:hover{
    color: #fff;
}
.dp-toolbar .dp-btn {
    cursor: pointer;
    float: right;
    font-size: 24px;
    height: 47px;
    line-height: 27px;
    padding: 10px 0;
    text-align: center;
    width: 50px;
    text-decoration: none !important;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    vertical-align: baseline;
}
.dp-toolbar .dp-share ul {
    line-height: 25px;
    font-size: 15px;
    list-style: none;
    text-align: left;
    width:150px;
    padding: 10px;
    background-color:var(--bg-4);
    visibility:hidden;
    position:relative;
    top:0px;
}
.dp-toolbar .dp-share.dp-share-active ul {
    visibility: visible;
}
.dp-toolbar .dp-share ul:after {
    position: absolute;
    left: 17%;
    margin-left: -20px;
    top: -8px;
    width: 0;
    height: 0;
    content:'';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid var(--bg-4);
}

.dp-share-a {
    width: 150px;
    display: block;
}
.dp-share-a span {
    line-height: 5px;
    float: none;
    width: auto;
    height: auto;
    padding: 0px;
    display: inline-block;
    margin: 1px 1px 1px 8px;

}
.dp-share-a span.fa {
    padding: 10px 13px 10px 7px ;
    width:25px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.dp-count {
    display: block;
    font-size: 24px;
    height: 47px;
    line-height: 27px;
    padding: 10px;
}
.dp-left, .dp-right{
    position: absolute;
    display: block;
    top: 50%;
    z-index: 1080;
    color: #ddd;
    border-radius: 2px;
    padding: 25px; 13px;
    margin-top: -10px;
    background-color: rgba(0,0,0,0.3);
    outline: 0;
    border: none;
    font-style: normal;
    font-weight: 400;
}
.dp-left{
    left: 20px;
}
.dp-right{
    right: 20px;
}
.dp-progress-bar{
    position: absolute;
    display: block;
    top:0;
    left:0;
    width:100%;
    height:5px;
}
.dp-progress{
    position:relative;
    top:0;
    left:0;
    background-color: #C00;
    height:5px;
    z-index:1830;
}
@media only screen and (max-width:640px) {
  /* For mobile phones: */
  .menu, .main, .right, .search {
    width:100%;
  }
  .menu-switch {
    display:block;
  }
  .menu {display: none;}
  nav.vertical {
    width:100%;
  }
  .top img {
    width:250px;
  }
  .main_btn {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .main_btn > a.round{
    display:block;
    margin:0.2em auto;
  }

}

@media only screen and (max-width:812px) and (orientation: landscape){
  .top img {
    width:250px;
  }
  nav.vertical {
    width:100%;
  }
}