html, html a {
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
text-shadow: 0px 0px 1px rgba(255,255,255,0.4);
text-rendering: optimizeLegibility;
}
body {
font-family:Quicksand;
font-size:14px;
line-height:17px;
font-weight:300;
color:#FFF;
background:#000;
}
em {font-size:24px; font-weight:700;font-style:normal;}
h1 {width:317px; height:88px;font-size:5px; color:transparent; text-shadow:none; text-indent:-500px; overflow:hidden; margin:0 auto; letter-spacing:2px;background:transparent url('titre.png') center center no-repeat;background-size:contain;}
/******* video background ******/
#video-bg, #video-bg video {display:none;}
@media (min-width:768px) {
#video-bg {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
display:block;
background: transparent url('../videos/jpg/typhon.jpg') center center no-repeat;
background-size:cover;
}
#video-bg > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:block;
}
#overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
display:block;
background:transparent url('pattern.png');
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
#video-bg > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
#video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
#video-bg > video {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}
}
/******** end video background ******/
/*popup*/
.modal {color:#333}
#shipping_info .placeholdimg {display:none;}
#shipping_info {
position:absolute;
z-index:999;
left:10px;
top:10px;
width:100px;
min-height:100px;
background:#FFF;
color:#00F;
display:none;
padding:30px 50px;
}
#shipping_info .btnclose {display:block; text-align:center; width:30px; height:30px; line-height:30px; position:absolute; z-index:999; right:30px; top:20px;font-size:34px; color:#00F; font-weight:bold;cursor:pointer;}
#shipping_info p {text-align:justify;font-weight:bold;}
#shipping_info .info {font-size:10px; font-weight:normal; font-style:italic;line-height:12px;margin-top:15px;}
#shipping_info p a {text-decoration:underline; color:#00F;}
#shipping_info .container-fluid .row {padding-bottom:15px;}
#shipping_info .col-sm-4 {padding:0 30px;}
#shipping_info h3 {font-size:24px;font-weight:bold; text-transform:uppercase;margin:20px 0; text-align:center;}
#shipping_info .col-xs-2, #shipping_info .col-xs-10, #shipping_info .col-xs-3, #shipping_info .col-xs-9 {padding:0px;}
#shipping_info .col-xs-10, #shipping_info .col-xs-9 {padding-left:15px;font-size:13px;text-transform:uppercase;}
#shipping_info .col-xs-2, #shipping_info .col-xs-3 {font-weight:bold;font-size:24px;}
/* endpopup */
#main {position:relative; z-index:1;transition-duration:300ms;
}
#header {margin-bottom:40px;text-transform:uppercase;padding-top:30px;}
#content {}
.shipping {height:92px; padding-top:54px;opacity:0.999;background:transparent url('img/shipping.png') 15px bottom no-repeat;overflow:hidden;cursor:pointer;}
.shipping span {color:transparent; display:block; width:1px; overflow:hidden; margin-left:-10px;}
.social {font-size:27px;padding-top:58px;}
#footer .social a {color:#FFF; font-weight:700; cursor:pointer; display:inline-block; vertical-align:middle;height:30px; line-height:30px;opacity:0.999;}
#footer .social a span {font-size:24px;}
#footer .social a.at {font-weight:300;}
#footer .social a.blog {line-height:35px;}
#footer .social a:hover {text-decoration:none;}
#header .social a {display:inline-block; height:21px; width:21px;background:transparent url('img/lk_at.png') center center no-repeat;color:transparent; text-decoration:none;overflow:hidden;}
#header .social a span {display:none;}
#header .social a.at {}
#header .social a.facebook {background-image:url('img/lk_facebook.png');}
#header .social a.twitter {background-image:url('img/lk_twitter.png');}
#header .social a.instagram {background-image:url('img/lk_instagram.png');}
#header .social a.spotify {background-image:url('img/lk_spotify.png');}
#header .social a.leblog {background-image:url('img/lk_leblog.png');width:100px;}
#navcart {color:#0000FF;position:absolute; left:0;right:0;z-index:90;margin-top:-20px;}
#navcart div span {height:40px;display:inline-block; vertical-align:top;}
#navcart #xscart span {width:55px;height:40px;background:transparent url('cart.png') left bottom no-repeat; background-size:contain;color:#0000FF;overflow:hidden;font-size:14px; line-height:10px;}
#cadre {background:#FFF;position:relative;margin:0; padding:45px 75px;}
#cart {
position:absolute;
top:25px;
right:28px;
width:46px; height:36px;
text-align:right;
text-transform:none;
font-size:14px;
color:#0000FF;
text-shadow: 0px 0px 1px rgba(0,0,255,0.4);
background:transparent url('cart.png') left bottom no-repeat;
background-size:34px 30px;
cursor:pointer;
letter-spacing:-1px;
}
.cartform {position: absolute;}
#xscart .cartform {
right:20px; height:40px;
}
#cart input.button, #xscart input.button {
border:none; background:transparent; color: transparent;
display: block;
}
#xscart input.button {height:40px;}
#cart input.button {
width:46px; height:36px;
}
#PPMiniCart {
z-index: 9999999;
}
#PPMiniCart #PPMiniShipping {}
#PPMiniCart #PPMiniShipping label {display:block;}
#PPMiniCart #PPMiniShipping label input {margin-right: 5px}
.pdt {text-transform:uppercase;}
.pdt .images {display:block; margin:auto;position:relative}
.images img {display:block; margin:auto;}
.images .hoverimg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
opacity:0;
}
.pdt p {font-size:22px;text-align:center;}
.pdt p a {color:transparent;display:inline-block;vertical-align:top;cursor:pointer;text-decoration:none; text-indent:-200px; overflow:hidden;}
.pdt p.sizes {margin:25px 0;height:26px;}
a.size {width:26px; height:26px; background:transparent url('img/s_r_35.png') center center no-repeat;}
a.size.s {background-image:url('img/s_r_35.png')}
a.size.m {background-image:url('img/m_r_35.png')}
a.size.l {background-image:url('img/l_r_35.png')}
a.size.s:hover, a.size.s.active {background-image:url('img/s_b_35.png')}
a.size.m:hover, a.size.m.active {background-image:url('img/m_b_35.png')}
a.size.l:hover, a.size.l.active {background-image:url('img/l_b_35.png')}
a.size.s.disabled {background-image:url('img/s_d_35.png')}
a.size.m.disabled {background-image:url('img/m_d_35.png')}
a.size.l.disabled {background-image:url('img/l_d_35.png')}
.pdt p.tcp {height:25px;margin-bottom:0px;}
.pdt p.tcp a {color:transparent;width:151px; height:26px; background:transparent url('img/panier_r_24.png') center center no-repeat;background-size:contain;}
.pdt p.tcp a:hover {background-image:url('img/panier_b_24.png');}
.navbtn {position:absolute; z-index:80;color:#000;background:RGBA(0,0,0,0); font-size:20px; font-weight:bold;top: 20px;height:280px;line-height:300px;cursor:pointer;width:60px; text-align:center}
.navbtn:hover {background:RGBA(0,0,0,0.1);}
#navleft {left:5px;}
#navright {right:5px;}
#footer {margin-top:40px;text-transform:uppercase;padding-bottom:40px;}
.ephemeride {line-height:24px;opacity:0.999; background: transparent url('img/aujourdhuinousfetons.png') 15px top no-repeat;font-size:2px;}
.ephemeride .text {display:none;}
.ephemeride .img {background:transparent url('img/footer/footer__Brad.png') -43px bottom no-repeat;height:46px;display:block}
.meteo > div {background: transparent url('img/meteodujour.png') right center no-repeat;padding-right: 60px}
.meteo .text {display: none;}
.meteo .meteodujour {display: block;background: transparent url('img/meteodujour.png') right top no-repeat;}
.meteo .img {display: block;background: transparent url('img/footer/footer_brouillard_04.png') right top no-repeat;height:30px; margin-right:-7px;}
/*
.meteo div {padding-right:60px;background: transparent url("css/picto/YPDS_Picto_Ensoleille.png") right center no-repeat;}
*/
@media (max-width: 1199px) {
h1 {width:250px; height:69px;}
.social {padding-top:12px;}
.shipping {padding-top:32px;}
#shipping_info {background:#FFF;font-size:12px;}
#shipping_info .col-sm-4 {padding:0 10px;}
#shipping_info h3 {font-size:20px;margin:0 0 10px;}
#shipping_info .container-fluid .row {padding-bottom:10px;}
}
@media (max-width: 991px) {
.social {font-size:24px;}
.social a span {font-size:20px;}
}
@media (max-width: 767px) {
body { background:#FFFFFF; }
h1 {background-image:url('titre_xs.png');margin-bottom:50px;}
#header {margin-bottom:0;padding-top:10px;}
#content > div {overflow:hidden;padding:0}
#cadre {margin:0px; padding:0px;overflow:hidden;}
#shop {width:4000px;transition-duration:300ms;}
.pdt {display:inline-block;padding:0}
.images .hoverimg {display:none;}
.pdt p {position:relative;}
.pdt p.sizes {height:30px; margin:-100px 0 10px 0; font-size:30px;line-height:30px;}
.pdt p.tcp {height:20px;font-size:20px; margin:0px;padding-bottom:60px;}
.pdt p.tcp a {width:110px;}
.shipping, #footer .social {padding:0 15px; height:60px;color:#00F;}
.shipping a, #footer .social a {color:#00F;}
.shipping {line-height:24px;}
.shipping em {line-height:30px;}
#shipping_info {
border-color:#00F;
border-style:solid;
border-width:3px 0;
font-weight:bold;
padding:30px 10px;
}
#shipping_info h3 {margin:25px auto 40px;}
#PPMiniCart {
width:420px;
max-width: 100%;
margin-left:-50%;
}
#PPMiniCart form {
margin-left:auto !important;
max-width: 100%;
}
#PPMiniCart ul {max-width: 100%;}
}
/* réduction verticale */
@media (min-width: 1200px) and (max-height: 800px) {
#header {margin-bottom:30px;padding-top:10px;}
#footer {margin-top:30px;padding-bottom:10px;}
.pdt img {width:70%;}
.pdt p {font-size:20px;}
.pdt p.sizes {font-size:30px; height:30px; line-height:30px;}
#shipping_info {padding:5px 50px;}
#shipping_info .container-fluid .row {padding-bottom:10px;}
}
@media (min-width: 992px) and (max-height: 770px) {
#header {margin-bottom:20px;padding-top:10px;}
#footer {margin-top:20px;padding-bottom:10px;}
.pdt img {width:70%;}
.pdt p {font-size:20px;}
.pdt p.sizes {font-size:30px; height:25px; line-height:25px;}
}
@media (min-width: 768px) and (max-height: 660px) {
#header {margin-bottom:20px;padding-top:10px;}
#footer {margin-top:20px;padding-bottom:10px;}
#cadre {padding:35px 60px;}
.pdt img {width:70%;}
.pdt p {font-size:20px;}
.pdt p.sizes {font-size:30px; height:25px; line-height:25px;}
}