/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */
body {background: #D6D5D0; font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5 {text-transform: uppercase; font-weight: 300;font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2;}
header, footer {background: #ffffff;}

.content {background: #fff; overflow-x: hidden;}
hr {background: #ebebeb;}

.pad {padding: 20px;}
.pad-y {padding: 20px 0;}

.cta {background: #A3AC51; color: #E9EEB9; padding: 40px 0 30px 0;}
.cta h2 {color: #fff; font-size: 16px; text-transform: uppercase; margin: 0 0 5px 0; font-weight: 600;}
.cta p {font-size: 14px;}
.cta a {color: #fff;}

#minicp-widget {position: fixed; top: 10px; left: 0; z-index: 100000;}
#minicp-widget a {display: block; padding: 5px 10px; color: #fff; background: #A3AC51; text-align: center;}

header {position: relative; z-index: 100; padding: 10px 0;}
a.logo {text-align: center; display: block}
a.logo img {height: 85px; padding: 10px 0; }
header .inline-list.mainmenu, header .inline-list.topmenu {padding-top: 30px; text-transform: uppercase;}
header .inline-list.mainmenu li {margin-left: 40px;}
header .inline-list.mainmenu a {color: #3d3c37;}
header .inline-list.mainmenu a:hover, header .inline-list.mainmenu .active a {color: #A3AC51; }
header .inline-list.mainmenu .active a {font-weight: 600;}
header .inline-list.topmenu {padding-top: 30px;}
header .inline-list.topmenu, header .inline-list.topmenu a {font-size: 12px; color: #808080; }
header .inline-list.topmenu li {border-left: solid 1px #dddddd; margin-left: 11px; padding-left: 11px;}
header .inline-list.topmenu li:first-child {border: none;}
header .inline-list.topmenu a:hover {color: #1a1a1a;}
header .inline-list.topmenu .active a {font-weight: 600;}

.top-bar {background: #3d3c37}
.top-bar ul > li:not(.name):hover, .top-bar ul > li:not(.name).active, .top-bar ul > li:not(.name):focus { background: #302f2b; }
.top-bar ul > li:not(.name):hover a, .top-bar ul > li:not(.name).active a, .top-bar ul > li:not(.name):focus a { color: #d9d9d9; }

.tinynav { display: none }

.bottom {background: #fff; padding: 30px 0;}

footer {color: #737273;text-transform: uppercase; padding-bottom: 30px}
footer hr {margin-top: 0;}
footer p, footer ul, footer li {font-size: 12px;}
footer a {color: #737273;}
footer .mainmenu {margin: 0; padding: 0 0 10px 0;}
footer ul.inline-list > li:first-child {margin-left: 0;}
footer ul.inline-list, footer  ul.link-list {margin-left: 0}
footer ul.inline-list > li, footer ul.link-list > li {margin: 0; border-right: solid 1px #DDDDDD;}
footer ul.inline-list > li a, footer ul.link-list > li a {padding: 0 10px}
footer ul.inline-list > li:first-child, footer ul.inline-list > li:first-child a {margin-left: 0; padding-left: 0}
footer ul.inline-list > li:last-child, footer ul.inline-list > li:last-child{border: none;}
footer .social img {height: 20px; }
footer .social li {border: none !important; padding-right: 10px;}
.newsletter h5 {font-size: 12px; margin-top: 0; text-align: right;}
.newsletter .button {margin-top: -46px; height: 34px; padding: 6px 11px !important;}

.button {border: solid 1px transparent;}

#pagetitle {background: #3d3c37; color: #fff; padding: 20px 0; border-top: solid 3px #A3AC51;}
#pagetitle h1 {color: #fff; font-size: 30px; }

#intro {background: #fff; padding: 30px 0; }
#intro p {font-size: 24px; color: #A3AC51;}

/* -----------------------------------------
   Index
----------------------------------------- */

#featured {margin: 0;}
.hero { background: #3d3c37; position: relative;}
.hero img {display: block;}
.hero .row {width: 1420px;}
.hero .columns {padding:0;}
.herointro {position: absolute; bottom: 30px; right: 30px; z-index: 20; min-width: 300px; max-width: 500px;  color: #fff; display: block; background: #3d3c37; text-transform: uppercase;}
.mobileintro {position: relative; bottom: 0; right: 0; z-index: 20; width: 100%; height: auto; color: #fff; display: block; background: #3d3c37; text-transform: uppercase;}
.herointro a {text-decoration: none; display: block;padding: 30px 30px 20px 30px; }
.mobileintro a {padding: 30px; }
.herointro h2 {padding: 0; margin: 0; color: #fff; font-size: 38px; line-height: 40px;}
.herointro h3 {padding: 0; margin: 0; color: #A3AC51; font-size: 18px;}
.herointro a p {padding: 0; margin: 0; color: #fff; text-transform: uppercase; text-decoration: underline; font-size: 16px;}

/* -----------------------------------------
   Product Listing
----------------------------------------- */
#listing .block-grid {border-top: solid 1px #ebebeb;}
#listing .block-grid li {border-bottom: solid 1px #ebebeb; padding: 30px 15px;}
#listing .block-grid h4 {font-size: 20px; text-transform: none; font-weight: 400; margin-bottom: 10px;}
#listing .banner {position: absolute; bottom: 0; left: -10px; width: 100px;}
#listing .prix-special { font-weight: bold; }
#listing .prix-reg { color: #888; }

/* -----------------------------------------
   Product Details
----------------------------------------- */
#product_details .content {background: #fff center 50px no-repeat;}
#product_details .banner {width: 170px; box-shadow: 0 0 20px rgba(0,0,0,0.2); border: solid 3px #fff; position: absolute; right: 15px; top: 250px;}
#productintro {padding: 30px 0 0 0; color: #1a1a1a; min-height: 390px}
#productintro .heroshot {max-width: 120%;overflow-y: hidden;}
#productintro p {color: #1a1a1a; font-size: 22px; margin-bottom: 30px;}
.pricebox {background: #A3AC51; color: #fff; text-align: center; padding: 20px; font-size: 24px;}
.pricebox div {padding: 5px 0;}
.pricebox a {color: #fff; text-decoration: underline; text-transform: uppercase; padding: 10px 0; display: block;}
.pricespecial {font-size: 34px; text-transform: uppercase; font-weight: 600;}
.pricespecial span.note {font-size: 14px; }
.pricereg {color: #E9EEB9; font-size: 24px;}
#thumbpanel {background: #3d3c37; padding: 0; display: none; text-align: center;}
#gallery {margin-bottom: 0; height: 480px;}
.gallerylink {text-align: center; margin: 0; font-size: 12px; }
.gallerylink a {color: #fff;}
#product-description {padding: 30px 0;}
#product-description h3 {font-size: 24px; color: #A3AC51; text-transform: none;}
.icons-weather {height: 30px; margin: 20px 0;}
.productthumbs {margin-top: 100px !important;}
.productthumbs li {margin-bottom: 12px;}
.productthumbs li img {display: block;}
.productthumbs li a {display: block; border: solid 1px #ebebeb;}
.productthumbs li a:hover {border-color: #A3AC51}
.other .caption {text-align: center; font-size: 18px; color: #A3AC51; }
.colors li {float: left; display: block; text-indent: -9999px; width: 50px; height: 50px; border-radius: 25px; border: solid 3px #f2f2f2; margin: 0 5px 5px 0;}
.colors li.has-tip:hover, .colors li.has-tip:focus {border: solid 3px silver; }
.chairs {text-align: center;}
.chairs .price {color: #A3AC51; display: block; padding: 0 0 5px 0; font-size: 18px; text-transform: uppercase;}
.chairs .reg {text-decoration: line-through; opacity: 0.5}

.table-de-bar .chairs {display: none;}

/* -----------------------------------------
   Fabrication
----------------------------------------- */
#videopanel {background: #A3AC51; padding: 40px 0; margin-bottom: 40px;}
#videopanel .intro {text-align: center; font-size: 24px; color: #fff; margin-bottom: 40px;}
#videopanel .flex-video {background: #838B41; border: solid 5px #838B41; display: block;}
.feat {border: solid 1px #DDDDDD; padding: 40px; margin-bottom: 40px;}
.feat h3 {font-size: 32px; color: #A3AC51; }

.fabrication-des-meubles-de-jardin #pagetitle {text-align: center;}
.fabrication-des-meubles-de-jardin #intro {display: none;}

/* -----------------------------------------
   Confidentialité
----------------------------------------- */
.confidentialite #intro {display: none;}
.confidentialite .margin-confidentialite {margin: 25px 0;}

/* -----------------------------------------
   Privacy
----------------------------------------- */
.privacy #intro {display: none;}
.privacy .margin-confidentialite {margin: 25px 0;}

/* -----------------------------------------
   Contact
----------------------------------------- */
#map {background: #191917}
#addresses {padding: 40px 0 0 0;}
address {font-size: 18px;font-style: normal; line-height: 26px; margin-bottom: 20px;}
address strong {font-size: 24px; text-transform: uppercase; font-weight: 400;color: #A3AC51;}
#mapcontent img,#mapcontent object,#mapcontent embed {max-width: inherit !important;}
.ui-infowindow-content h5 {font-size: 18px; text-transform: uppercase; font-weight: 400;color: #A3AC51; margin: 0;}
#formulaire p.intro {color: #A3AC51; font-size: 20px;}
#formulaire p.phone {font-size: 42px; }
#formulaire .ff_composer {margin-top: 30px;}
#formulaire .ff_composer input[type="submit"] { -webkit-appearance: none; width: auto; padding: 10px 20px 11px; background: #A3AC51; color: #fff; border: solid 1px transparent; cursor: pointer; font-size: 16px;font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;}


/* -----------------------------------------
   Media Queries
----------------------------------------- */

@media (min-width: 1200px) {
.herointro {min-height: 180px;}
}


@media (max-width: 768px) {
p {font-size: 12px; line-height: 1.4;}
header .inline-list.mainmenu li {margin-left: 33px;}
.mainmenu {margin: 0;}
header .inline-list.mainmenu, header .inline-list.topmenu {padding-top: 40px;}
header .inline-list.topmenu {padding: 0 5px 0 0; margin: -70px 0 0 0;}
.herointro {bottom: 0; right: 0; max-width: 100%; position: relative;}
.herointro h2 {font-size: 28px;}
.herointro a {padding: 30px;}
#pagetitle h1 {margin: 0; font-size: 24px;}
#intro p {font-size: 20px; line-height: 30px; margin-bottom: 0;}
#listing .block-grid h4 {font-size: 14px;}
#listing .banner {width: 60px; left: auto; right:0;}
#listing .block-grid li {border: none; padding: 10px 0;}
#product_details .content {background-position: center 70px; background-size: 190% auto;}
#productintro {min-height: 290px;}
#productintro p {font-size: 16px;}
.pricebox {padding: 15px;}
.pricespecial {font-size: 24px;}
.pricereg {font-size: 16px;}
.pricebox a {font-size: 18px;}
#product_details .banner { width: 125px; top:200px;}
.colors li {width: 30px; height: 30px;}
#product-description h3 {font-size: 20px;}
.chairs .price, .chairs .reg  {font-size: 12px;}
}

/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 600px) {
.tinynav { display: block }
#mobilenav { display: none }
#intro p {font-size: 20px; line-height: 26px;}
#pagetitle {text-align: center; padding: 10px 0;}
#pagetitle h1 {font-size: 20px;}
.cta {text-align: center}
.cta img {margin-bottom: 10px;}
.cta h2 {color: #fff; font-size: 16px; text-transform: uppercase; margin: 0 0 5px 0; font-weight: 600;}
#productintro .heroshot {max-width: 100%;}
#product_details .content {background-image: none !important; background-color: #fff;}
.productthumbs {margin-top: 0 !important;}
#productintro p {font-size: 18px; line-height: 1.4;}
#listing .banner {width: 100px; left: auto; right:20px;}
#listing .block-grid li {border: none; padding: 10px 20px;}
#listing .block-grid h4 {font-size: 18px;}
.pricebox {padding: 15px 10px;}
.pricebox div {padding: 2px 0;}
.pricespecial {font-size: 24px;}
.pricereg {font-size: 16px;}
.pricebox a {padding: 5px 0;}
footer {text-align: center;}
footer ul.inline-list > li, footer ul.link-list > li {float: none; display: inline; border: none; font-size: 18px; margin: 0; padding: 0;}
footer .social img {height: 40px; }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}