/** Styles for Article types **/

#home-wrapper { width: 48%; float: right;
    background-color: transparent; }

#block-gencix-site-branding {  }
#block-gencix-site-branding a { display: block; width: 180px; height: auto; margin: 0 0 20px 25px; }

#block-gencix-yukablock { position: absolute; top: 100px; right: 0; pointer-events: none; }
#block-gencix-yukablock h3 { padding-top: 50px; width: 180px; height: 0; overflow: hidden;
    background-color: transparent; background-image: url('../../images/yuka-100.png'); background-repeat: no-repeat; background-position: top right; background-size: 180px; }

#block-gencix-gencixheadercontent { margin: 0 auto; width: 100%; max-width: 1080px; text-align: left; padding: 0; }
#block-gencix-gencixheadercontent h1 { padding: 0 20px 0 0; margin: 0 0 30px 25px; }
#block-gencix-gencixheadercontent p { text-align: left; }

.intro #action { padding: 25px;
    background-color: #ffffff; }
.intro #action h2 { padding: 0; color: #7bb914; font-size: 34px; margin: 0 0 10px 0; line-height: 34px; }
.intro #action ul { margin: 0; padding: 0; width: 100%; }
.intro #action ul li.button-link { display: inline-block; list-style: none; width: 49%; padding: 0 10px 0 0; }
.intro #action ul li a { width: 100%; padding: 15px 35px 15px 10px;
    background-position: right 15px center; }

/** Pourquoi Gencix Block **/
#block-gencix-whygencix { text-align: center; width: 100%; padding: 0 0 60px; }
#block-gencix-whygencix h2::after { content: ' '; position: absolute; display: block;bottom: 0; left: 0; width: 40px; height: 3px;
    background-color: #7bb914; }
#block-gencix-whygencix .block-content { overflow: hidden; width: 100%; max-width: 880px; margin: 0 auto; }

#block-gencix-whygencix .benefit { display: block; float: left; }
#block-gencix-whygencix .benefit.image { width: 30%; }
#block-gencix-whygencix .benefit.text { width: 70%; text-align: left; margin: 0 0 20px 0; }
#block-gencix-whygencix .benefit.text p { font-size: 16px; font-family: 'apcreg', sans-serif; }
#block-gencix-whygencix .button-link { text-align: left; margin-top: 50px; }

/** Gencix is 100% Natural Block **/
#block-gencix-whatisgencix { text-align: center; }
#block-gencix-whatisgencix h2::after { content: ' '; position: absolute; display: block;bottom: 0; left: 0; width: 40px; height: 3px;
    background-color: #7bb914; }
#block-gencix-whatisgencix .block-content { width: 100%; max-width: 1400px; margin: 70px auto 0; padding: 0 40px; 
    background-image: url('../../images/papaya-leaf-bg.jpg'); background-repeat: no-repeat; background-position: bottom right; background-size: cover; }
#block-gencix-whatisgencix #natural-wrap { position: relative; width: 80%; max-width: 680px; padding: 40px; top: -70px; overflow: hidden;
    background: #F8F8F8; background: -webkit-linear-gradient(top, #F8F8F8, #FFFFFF); background: -moz-linear-gradient(top, #F8F8F8, #FFFFFF); background: linear-gradient(to bottom, #F8F8F8, #FFFFFF); }
#block-gencix-whatisgencix #natural-wrap p { text-align: left; clear: both; }
#block-gencix-whatisgencix #natural-wrap p.first { margin: 0 0 30px 0; }
#block-gencix-whatisgencix #natural-wrap p.last { margin: 50px 0 0 0; }
#block-gencix-whatisgencix #natural-wrap section { display: inline-block; width: 33%; padding: 0 15px 0 0; }
#block-gencix-whatisgencix #natural-wrap section.natural, #block-gencix-whatisgencix #natural-wrap section.francais { float: left; }
#block-gencix-whatisgencix #natural-wrap section.natural span, #block-gencix-whatisgencix #natural-wrap section.francais span { display: block; font-family: 'apcreg', sans-serif; padding-bottom: 5px; }
#block-gencix-whatisgencix #natural-wrap section .icons { display: inline-block; padding-top: 60px; margin-bottom: 10px; }
#block-gencix-whatisgencix #natural-wrap section.natural .icons { background-image: url('../../images/leaf.png'); background-repeat: no-repeat; background-size: 60px; background-position: top left; }
#block-gencix-whatisgencix #natural-wrap section.natural .icons span { font-family: 'ptsbold', sans-serif; }
#block-gencix-whatisgencix #natural-wrap section.natural .icons span.percent { display: inline-block; font-size: 60px; line-height: 60px; background-color: #7bb914; color: #ffffff; letter-spacing: -0.04em; padding: 0 10px; margin-bottom: 5px; }
#block-gencix-whatisgencix #natural-wrap section.natural .icons span.word { text-align: right; font-size: 28px; }

#block-gencix-whatisgencix #natural-wrap section.francais .icons { background-image: url('../../images/flag.png'); background-repeat: no-repeat; background-size: 60px; background-position: top left; }
#block-gencix-whatisgencix #natural-wrap section.francais .icons span { font-family: 'ptsbold', sans-serif; }
#block-gencix-whatisgencix #natural-wrap section.francais .icons span.percent { display: inline-block; font-size: 60px; line-height: 60px; background-color: #7bb914; color: #ffffff; letter-spacing: -0.04em; padding: 0 10px; margin-bottom: 5px; }
#block-gencix-whatisgencix #natural-wrap section.francais .icons span.word { text-align: right; font-size: 28px; }

#block-gencix-whatisgencix #natural-wrap section.chemicals { padding: 0; }
#block-gencix-whatisgencix #natural-wrap section.chemicals .icons { width: 100%; background-image: url('../../images/chemicals.png'); background-repeat: no-repeat; background-size: 60px; background-position: top left; }
#block-gencix-whatisgencix #natural-wrap section.chemicals .icons span { font-family: 'ptsbold', sans-serif; }
#block-gencix-whatisgencix #natural-wrap section.chemicals .icons span.percent { display: inline-block; font-size: 60px; line-height: 60px; background-color: #7bb914; color: #ffffff; letter-spacing: -0.04em; padding: 0 10px; margin-bottom: 5px; }
#block-gencix-whatisgencix #natural-wrap section.chemicals .icons span.word { display: block; text-align: left; font-size: 38px; line-height: 34px; }
#block-gencix-whatisgencix #natural-wrap section.chemicals .icons span.word span.green { color: #7bb914; }

#block-gencix-whatisgencix #natural-wrap section ul { margin: 0; padding: 0; }
#block-gencix-whatisgencix #natural-wrap section.natural ul li { margin: 0; padding: 0 0 3px 20px; list-style: none;
    background-image: url('../../images/bullet-tick.png'); background-repeat: no-repeat; background-size: 12px; background-position: top 3px left; }
#block-gencix-whatisgencix #natural-wrap section.non-natural ul li { margin: 0; padding: 0 0 3px 20px; list-style: none;
    background-image: url('../../images/bullet-cross.png'); background-repeat: no-repeat; background-size: 12px; background-position: top 3px left; }

/** Formula Comparison Block **/
#block-gencix-formulegencix { text-align: center; width: 100%; padding: 80px 0; }
#block-gencix-formulegencix h2 { display: inline; margin: 0 20px; }
#block-gencix-formulegencix h2::after { content: ' '; position: absolute; display: block;bottom: 0; left: 0; width: 40px; height: 3px;
    background-color: #7bb914; }
#block-gencix-formulegencix .content { width: 100%; padding: 0 20px; max-width: 1000px; margin: 0 auto; overflow: hidden; }
#block-gencix-formulegencix ul { margin: 0; padding: 0; }
#block-gencix-formulegencix ul li { margin: 0; padding: 0; list-style: none; }

#block-gencix-formulegencix table.three { width: 100%; margin: 80px 0 0 0; }
#block-gencix-formulegencix table.one { width: 100%; margin: 40px 0 40px 0; }
/** #block-gencix-formulegencix table tr.mob-layout { display: none; } **/
#block-gencix-formulegencix table td { text-align: center; }
#block-gencix-formulegencix table td.desk-layout.product { width: 210px; }
#block-gencix-formulegencix table td.desk-layout.equalsign { width: 80px; }
#block-gencix-formulegencix table .desc { padding: 15px 0; font-size: 16px; line-height: 23px; }
#block-gencix-formulegencix table span { display: block; font-size: 20px; line-height: 28px; font-family: 'ptsbold', sans-serif; padding: 15px 0 50px 0; }
#block-gencix-formulegencix table span.name { font-family: 'ptsbold', sans-serif; font-size: 36px; letter-spacing: -0.02em; padding: 10px 0 0 0; }
#block-gencix-formulegencix table img { display: inline-block; height: auto; }
#block-gencix-formulegencix table img.gencix.threemois { width: 160px; }
#block-gencix-formulegencix table img.gencix.onemois { width: 120px; }
#block-gencix-formulegencix table img.equals { width: 50px; padding: 15px 0; }
#block-gencix-formulegencix table img.bouche { width: 65px; padding: 3px; }
#block-gencix-formulegencix table img.plus { width: 50px; padding: 15px 0; }
#block-gencix-formulegencix table img.dentifrice { width: 65px; padding: 3px; }

/** Highlighted Product Block **/
#block-homepage-promoted { text-align: center; width: 100%; padding: 50px 0 80px 0; }
#block-homepage-promoted h2::after { content: ' '; position: absolute; display: block;bottom: 0; left: 0; width: 40px; height: 3px;
    background-color: #7bb914; }

.homepage-products { width: 100%; max-width: 1080px; margin: 0 auto; }
.homepage-products .view-content { overflow: hidden; margin-bottom:20px; }
.homepage-products .views-row { position: relative; width: 33%; width: calc(100% / 3); padding: 0 40px; float: left; margin-bottom: 50px; text-align: left; }

.views-row span { display: block; }
.views-row span.form-required { display: inline; }
.views-row .prod-info { position: relative; padding-top: 10px; height: 180px; }
.views-row a { text-decoration: none; color: #222222; }
.views-row a img { width: 100%; height: auto; }
.views-row a span.prod-title { font-family: 'ptsbold', sans-serif; font-size: 21px; letter-spacing: -0.02em; margin: 10px 0; padding: 0 50px 0 0; }
.views-row a span.prod-desc { margin-bottom: 10px; font-size: 14px; line-height: 17px;padding: 0 50px 0 0; }
.views-row a .prod-wrap { height: 135px; margin-bottom: 10px; overflow: hidden; }
.views-row a span.prod-price { font-family: 'ecdmed', sans-serif; color: #7bb914; font-size: 21px; }
.views-row a span.prod-price .prix-small { display: inline; font-size: 13px; }
.views-row a span.prod-price .par-mois { font-size: 13px; }
.homepage-products .commerce-order-item-add-to-cart-form { margin-top: 30px; }

.homepage-products .views-field-variations-target-id { margin-top: 60px; }
.homepage-products .views-field-variations-target-id .attribute-widgets { display: none; }
.homepage-products .form-actions { text-align: center; }
.homepage-products .form-actions input { display: inline-block; width: auto; }

/** Virtues of Gencix Block **/
#block-vertus-gencix { width: 100%; text-align: left; padding: 0;
    background-image: url('../../images/vbg.jpg'); background-repeat: repeat-x; background-size: contain; background-position: bottom center; }
#block-vertus-gencix .content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 50px 0;
    background-image: url('../../images/product-lineup.jpg'); background-repeat: no-repeat; background-size: cover; background-position: bottom center; }
#block-vertus-gencix .content .wrap { width: 100%; max-width: 880px; margin: 0 auto; }
#block-vertus-gencix .content .container { width: 100%; max-width: 520px; padding: 0 20px; }
#block-vertus-gencix .content h3 { font-size: 42px; line-height: 42px; margin-bottom: 25px; }
#block-vertus-gencix .content .action { margin: 35px 0; }
#block-vertus-gencix .content .button-link { text-align: left; margin: 15px 0; }

/** Blogs Carousel Block **/
#block-homepage-blogs { text-align: center; width: 100%; padding: 50px 0 80px; background-color: #efefef; overflow: hidden; }
#block-homepage-blogs h2::after { content: ' '; position: absolute; display: block;bottom: 0; left: 0; width: 40px; height: 3px;
    background-color: #7bb914; }
#block-homepage-blogs header { margin-bottom: 40px; font-size: 14px; line-height: 19px; }
#block-homepage-blogs .view-content { text-align: left; }

#block-homepage-blogs .slick { position: relative; }
#block-homepage-blogs .slick .slick__arrow { position: absolute; width: 100%; bottom: 50%; }
#block-homepage-blogs .slick .slick__arrow .arrow-spacer { position: relative; width: 100%; max-width: 980px; margin: 0 auto; overflow: hidden; }
#block-homepage-blogs .slick .slick__arrow .arrow-spacer button { width: 40px; height: 0; padding: 80px 0 0 0 ; border: none; overflow: hidden;
    background-color: rgba(123, 185, 20, 0.8); background-repeat: no-repeat; background-size: 24px; background-position: center; }
#block-homepage-blogs .slick .slick__arrow .arrow-spacer button:hover { background-color: rgba(123, 185, 20, 1); }
#block-homepage-blogs .slick .slick__arrow .arrow-spacer .slick-prev { float: left; background-image: url('../../images/arrow-white-back.svg'); }
#block-homepage-blogs .slick .slick__arrow .arrow-spacer .slick-next { float: right; background-image: url('../../images/arrow-white.svg'); }
#block-homepage-blogs .slick-slide { margin: 0 10px; background-color: #ffffff; }

.slick--view--homepage-blogs .slick-list { padding: 0 50px; }
.slick--view--homepage-blogs .slick-slider { margin-bottom: 40px; }
.slick--view--homepage-blogs .views-field-nothing { padding: 20px 20px 10px; text-align: left; }
.slick--view--homepage-blogs .views-field-nothing span { display: block; font-size: 13px; line-height: 18px; }

.slick--view--homepage-blogs .blog-title a { text-decoration: none; color: #222222; }
.slick--view--homepage-blogs .blog-body { padding-bottom: 10px; }
.slick--view--homepage-blogs .blog-date { font-size: 13px; }
.slick--view--homepage-blogs .blog-link { text-align: right; width: 100%; }
.slick--view--homepage-blogs .blog-link a { display: inline-block; color: #7bb914; text-decoration: none; text-transform: uppercase; font-family: 'ecdmed', sans-serif; font-size: 10px; letter-spacing: 1.5px; padding: 0 22px 0 10px; line-height: 35px;
    background-color: transparent; background-image: url('../../images/arrow-green.png'); background-repeat: no-repeat; background-size: 18px; background-position: center right; }

ul.slick-dots li { display: inline-block; position: relative; width: 12px; height: 0; padding-top: 12px; background-color: #cccccc; overflow: hidden; margin: 0 10px; cursor: pointer; border-radius: 6px; }
ul.slick-dots li button { display: block; font-size: 0; line-height: 0; width: 20px; height: 20px; padding: 5px; cursor: pointer; border: 0; outline: none; color: transparent; background: transparent; }
.slick-dots li.slick-active, .view-product-extra-images .slick__slide ul.slick-dots li.slick-active { background-color: #7bb914; width: 14px; height: 0; padding-top: 14px; border-radius: 8px; top: 1px; left: 1px; }

/** Responsiveness **/

@media only screen and (max-width: 920px) {
    .intro #action ul li.button-link { width: 100%; margin-bottom: 10px; }
}

@media only screen and (max-width: 820px) {

}

@media only screen and (max-width: 720px) {
    body.front main { height: 90%; }
    body.front main #page-wrapper { min-height: inherit; height: 70%; }
    .parallax-mirror { height: 70% !important; }
    
    #intro.full { position: relative; height: 720px; min-height: 720px; }
    .intro #action { padding: 20px; }
    .intro #action ul li.button-link a { font-size: 10px; padding: 15px 20px 15px 10px; 
        background-position: right 5px center; }
    #block-gencix-yukablock { top: 70px; }
    #block-gencix-yukablock h3 { padding-top: 30px; width: 110px; background-size: 110px; }
    
    #block-gencix-site-branding { position: absolute; right: 0; top: -150px; right: 20px; }
    #block-gencix-site-branding a { width: 140px; }
    
    #home-wrapper { width: 100%; float: none; }
    #home-wrapper .header-top { position: relative; }
    .intro #action ul li.button-link { width: 49%; margin-bottom: 0; }
    #block-gencix-gencixheadercontent { display: block; position: relative; margin: -50px 0 0 20px; }
    
    #block-gencix-gencixheadercontent h1 { position: absolute; text-align: right; padding: 0 45px 0 0; font-size: 38px; line-height: 36px; width: 100%; right: 0; top: -90px; }

    #block-gencix-whygencix h2,
    #block-gencix-whatisgencix h2,
    #block-gencix-formulegencix h2,
    #block-homepage-promoted h2,
    #block-homepage-blogs h2 { font-size: 35px; line-height: 38px; }
    
    .homepage-products .views-row { float: none; width: 100%; max-width: 400px; padding: 0 20px; margin: 0 auto 50px; }
    .homepage-products .views-field-variations-target-id { margin-top: 0; }
    .homepage-products .commerce-order-item-add-to-cart-form { margin-top: 0; padding: 0; }
}

@media only screen and ( max-width: 620px ) {
    
    #block-gencix-whatisgencix h2 { margin-bottom: 20px; }
    #block-gencix-whatisgencix #natural-wrap section { float: none; width: 100%; }
    #block-gencix-whatisgencix #natural-wrap section.natural { margin-bottom: 25px; }
    #block-gencix-whatisgencix #natural-wrap section.chemicals { margin-top: 30px; }
    #block-gencix-whatisgencix #natural-wrap section.chemicals .icons { background-position: top center; }
    #block-gencix-whatisgencix #natural-wrap section.chemicals .icons span.word { text-align: center; }
    
    #block-gencix-formulegencix { padding: 80px 0 20px; }
    #block-gencix-formulegencix table span.name { font-size: 30px; }
    
    #block-vertus-gencix { background-image: none; }
    #block-vertus-gencix .content h3 { font-size: 36px; line-height: 36px; }
    #block-vertus-gencix .content { background-position: bottom right -40px; background-size: 200%; padding: 50px 0 67% 0; }
    #block-vertus-gencix .content .container { max-width: none; }
    #block-vertus-gencix .content .action { margin: 25px 0; }
}

@media only screen and (max-width: 560px) {

}

@media only screen and (max-width: 510px) {

}