/** HOMEPAGE  **/

/* Products */
.homepageProducts                                           { padding: 5px 30px 0px 30px; z-index: 1; min-height: 300px; }
.homepageProducts .headingSmallest                          { float: left; width: 90%; text-overflow: ellipsis; overflow: hidden; overflow: hidden; white-space: nowrap; margin-bottom: 0; }
.homepageProducts .colorChart                               { float: left; width: 100%; height: 11px; margin-top: 20px; margin-bottom: 10px; overflow: hidden; }
.homepageProducts .colorChart .productColor                 { height: 11px; width: 11px; float: left; margin-right: 3px; border-radius: 99px; overflow: hidden; }
.homepageProducts .carousel-control.left                    { background: transparent; position: absolute; margin-top: 90px; opacity: 1; left: -54px; }
.homepageProducts .carousel-control.right                   { background: transparent; position: absolute; margin-top: 90px; opacity: 1; right: -54px; }
.homepageProducts img                                       { max-width: 100%; }

/* Populair */
.section.populair                                           { margin-bottom: 90px; }
.section.populair img                                       { width: 100%; border-radius: 6px; margin-bottom: 20px; }
.section.populair p                                         { padding-right: 80px; margin-bottom: 30px; }
.section.populair .headingLarge                             { margin-top: 70px; }
.section.populair .headingLarge span                        { width: 100%; float: left; }
.section.populair .subheading-normal                        { margin-bottom: 15px; line-height: 40px; }

/* Image Text Overlay */
.contentTxtOverlay                                          { width: 100%; position: absolute; bottom: 20px; border-radius: 5px; color: white; padding: 20px; height: auto; background: rgb(38,38,38); background: -moz-linear-gradient(0deg, rgba(38,38,38,1) 2%, rgba(38,38,38,0.7063200280112045) 15%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(0deg, rgba(38,38,38,1) 2%, rgba(38,38,38,0.7063200280112045) 15%, rgba(255,255,255,0) 100%); background: linear-gradient(0deg, rgba(38,38,38,1) 2%, rgba(38,38,38,0.7063200280112045) 15%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#262626",endColorstr="#ffffff",GradientType=1); }
.contentTxtOverlay .headingTiny                             { float: left; width: 100%; color: white }
.contentTxtOverlay a:link,
.contentTxtOverlay a:visited                                { float: left; width: 100%; color: white; text-decoration: underline;  }
.contentQuarterContainer                                    { width: 100%;float: left;overflow: hidden; position: relative; }

/* Duurzaamheid */
.section.greenStory                                         { margin-bottom: 90px; background-color: #DBF0CC; padding-top: 90px; padding-bottom: 90px; border-bottom: 2px solid #C9E8B2; float: left; width: 100%; }
.section.greenStory h3                                      { margin-top: 50px; }
.section.greenStory img                                     { max-width: 100%; }
.section.greenStory img.large                               { max-height: 250px; margin: 0 auto 15px auto; display: block; }
.section.greenStory .logoContainer                          { display: flex; align-items: center; justify-content: center; width: 350px; margin: 0 auto; }
.section.greenStory .logoContainer > div                    { flex: auto; width: 90px; height: fit-content; }

/* Banners */
.section.intro                                              { margin-top: 25px; margin-bottom: 95px; }
.section.intro img                                          { border-radius: 6px; }
.section.intro .largeBanner                                 { z-index: 3; }
.section.intro .largeBanner .btn                            { z-index: 7; bottom: 20px; right: 35px; position: absolute; }
.section.intro .largeBanner img                             { z-index: 5; }
.section.intro .small-banner                                { float: left; width: 100%; position: relative; margin-bottom: 30px; min-height: 183px; }
.section.intro .large-banner                                { float: left; width: 100%; position: relative; min-height: 400px; }
.section.intro .small-banner img,
.section.intro .large-banner img                            { max-width:100%; }
.section.intro .small-banner .btn.btn-primary               { position: absolute; top: 125px; right: 26px;  }
.section.intro .large-banner .btn.btn-primary               { position: absolute; top: 316px; right: 35px; }
.section.intro .large-banner .btn.btn-default               { position: absolute; top: 334px; right: 26px;  }
.section.intro .small-banner a.promoContent:link,
.section.intro .small-banner a.promoContent:visited         { position: absolute; bottom: 33px; left: 33px; font-size: 15px; font-weight: 700; text-decoration: underline; }
.section.intro .small-banner .headingSmall                  { position: absolute; top: 0; left: 0; margin-bottom: 0; width: 100%; float: left; padding: 30px 0 0 30px; }
.section.intro .small-banner .headingMedium                 { position: absolute; top: 0; left: 0; margin-bottom: 0; width: 100%; float: left; padding: 30px 0 0 30px; }
.section.intro .small-banner .headingSmall                  { position: absolute; top: 0; left: 0; margin-bottom: 0; width: 100%; float: left; padding: 30px 0 0 30px; }


/* SHowcase */
.section.showcase.centered.homepage          { margin-bottom: 45px; }


/* Referenties */
.section.content.referenties img                            { max-width: 100%; width: auto; margin: -17px 0 -17px; }
.section.intro .homepageReferenties h4                      { text-align: center; font-size: 15px; color: #262626; font-weight: 600; }
.section.intro .homepageReferenties a:link,
.section.intro .homepageReferenties a:visited               { font-size: 12px!important; font-weight: 300!important; }
.section.referenties a:link,
.section.referenties a:visited                              { font-weight: 500; }
.section.referenties                                        { margin: 0px 0 115px 0; float: left; width: 100%; }
.section.referenties img                                    { width: 100%; }

/* Referenties NEW */
.section.references                                         { background-color: #F3F3F3; margin-bottom: 135px; padding-top: 135px; padding-bottom: 135px; }
.section.references p                                       { width: 80%; margin: 0 auto; display: block; }
.section.references .mood-container                         { width: 70%; margin: 45px auto 0 auto; display: block; }
.section.references .mood-container img                     { width: 100%; }

/* Thema's */
.section.topcat                                             { margin-bottom: 115px; }
.section.topcat .hotcat img                                 { width: 100%; border-radius: 6px; margin-bottom: 20px; }
.section.topcat .hotcat .btn                                { width: 100%; }

/* Portfolio */
.section.portfolio                                          { margin-bottom: 135px; }
.section.portfolio img                                      { max-width: 100%; }
.section.portfolio .mood-container                          { float: right; padding-left: 60px;}
.section.portfolio .mood-container img                      { width: 100%; }
.section.portfolio .infoboxContainer-medium                 { margin-bottom: 0; }

/* SEO */
.section.content.homepage .seoblock                         { margin-bottom: 45px; }
.section.content.homepage .seoblock.left p                  { padding-right: 50px!important;  padding-right: 0px;}
.section.content.homepage.seoblocks p                       { padding: 0px 0 35px 0; }
.section.content.homepage.seoblocks .headingTiny            { font-size: 18px; border: 0; line-height: 25px; font-weight: 300; color: #262626; margin-bottom: 6px; margin-top: 0; }

/* News */
.section.news.homepage                                      { float: left; width: 100%; margin-bottom: 115px; }
.section.news.homepage .headingLarge                        { margin-bottom: 0; }
.section.news.homepage .subheading-normal                   { margin-bottom: 35px; }




/** MOBILE- RES **/
@media (max-width: 767px) {

    .rowmobile                                                  { margin-left: -15px; margin-right: -15px; }
    .section.intro                                              { margin-top: 0; }
    .section.intro .sidebar-nav                                 { display: none; }

    /* Populair */
    .section.populair .btn.btn-white                            { margin-bottom: 50px; width: 100%; }
    .section.populair .headingLarge                             { margin-top: 15px; padding-right: 20px; width: 100%; float: left; margin-bottom: 0; }
    .section.populair p                                         { padding-right: 0}

    /* Products */
    .homepageProducts                                           { padding: 5px 15px 0px 15px; }
    .homepageProducts .product-box-image                        { max-width: 100%; height: auto; }
    .homepageProducts .homepagePrices                           { margin-bottom: 15px; }
    .homepageProducts .carousel-control.right                   { position: relative; margin-top: 20px; float: left; right: inherit; left: inherit; margin-left: 10px; }
    .homepageProducts .carousel-control.left                    { position: relative; margin-top: 20px; float: left; right: inherit; left: inherit; }

    /* Portfolio */
    .section.content.portfolio                                  { margin-bottom: 90px; }
    .section.portfolio a:link,
    .section.portfolio a:visited                                { width: 100%; margin-bottom: 50px; }
    .section.portfolio .mood-container                          { float: right; padding-top: 60px; padding-left: 0; }


    /* Referenties */
    .section.content.referenties img                            { margin: 0}
    .section.content.referenties p                              { margin-top: 17px }

    /* Referenties NEW */
    .section.references                                         { margin-bottom: 135px; padding-top: 75px; padding-bottom: 75px; }
    .section.references .mood-container                         { width: 90%; margin: 45px auto 0 auto; display: block; }


    /* Thema's */
    .section.topcat                                             { margin-bottom: 90px; }
    .section.topcat .hotcat p                                   { padding: 0; }
    .section.topcat .headingLarge span      { width: 100%; float: left; margin-bottom: 35px; }


    /** Banners */
    .section.intro .btn                                         { width: 100%; }
    .section.intro .small-banner                                { min-height: auto }
    .section.intro .small-banner .headingSmall                  { padding: 20px 0 0 20px; }
    .section.intro .small-banner img,
    .section.intro .large-banner img                            { width: 100%; }
    .section.intro .large-banner                                { margin-bottom: 30px; padding: 0; min-height: auto; }
    .section.intro .small-banner .btn.btn-primary               { position: absolute; top: inherit; bottom: 20px; right: inherit; width: inherit; }
    .section.intro .large-banner .btn.btn-primary               { position: absolute; top: inherit; bottom: 20px; right: inherit; width: inherit; }
    .section.intro .large-banner .btn.btn-default               { position: absolute; top: inherit; bottom: 20px; right: inherit; width: inherit; }
    .section.intro .small-banner div.wrapper                    { width: 100%; position: absolute; bottom: 0; top: 0; left: 0; height: auto; padding: 0 25px; }
    .section.intro .large-banner div.wrapper                    { width: 100%; position: absolute; bottom: 0; left: 0; height: auto; padding: 0 25px; }
    .section.intro .small-banner div.wrapper  .btn.btn-primary  { width: 100%; position: relative; }
    .section.intro .large-banner div.wrapper  .btn.btn-primary  { width: 100%; position: relative; }
    .section.intro .small-banner a.promoContent:link,
    .section.intro .small-banner a.promoContent:visited         { left: 7%; }
    .section.intro .small-banner .headingMedium                 { padding: 23px 0 0 23px; font-size: 21px; line-height: 27px; }
    .section.intro .small-banner a.promoContent:link,
    .section.intro .small-banner a.promoContent:visited         { bottom: 20px; font-size: 14px; }


    /* Green Story */
    .section.greenStory h3                                      { margin-top: 0; }
    .section.greenStory .btn                                    { width: 100%; }
    .section.greenStory .logoContainer                          { width: 90%; }
    .section.greenStory img.large                               { margin: 40px auto 20px auto; }


    /* SEO */
    .section.content.homepage .seoblock.right p  { padding-right: 0!important; }
    .section.content.homepage .seoblock.left p          { padding-right: 0!important; }
}




/** LOW- RES VIEW **/
@media (min-width: 768px) and (max-width: 991px) {


    /* Populair */
    .section.populair .btn.btn-white                        { margin-bottom: 50px; }
    .section.populair .headingLarge                         { margin-top: 15px; }
    .section.populair .contentQuarter                       { width: 329px; }

    /* Banners */
    .section.intro .largeBanner img                         { width: 100%; }
    .section.intro .large-banner                            { margin-bottom: 30px; }
    .section.intro .small-banner .btn.btn-primary           { position: absolute; top: inherit; bottom: 20px; right: 20px; width: 410px; }
    .section.intro .large-banner .btn.btn-primary           { top: inherit; bottom: 30px; right: 30px; width: 330px; }
    .section.intro .large-banner .btn.btn-default           { position: absolute; top: inherit; bottom: 20px; right: 20px; width: 410px; }
    .section.intro .small-banner img,
    .section.intro .large-banner img                        { width: 100%; }

    /* Products */
    .product-box-image                                      { max-width: 100%; max-height: 100%; height: inherit; }
    .homepageProducts                                       { padding: 15px 30px 0px 30px; z-index: 1; width: 720px; left: -300px; overflow: hidden; margin-top: 40px; }

    /* Green Story */
    .section.greenStory h3                                  { margin-top: 0; }
    .section.greenStory img.large                           { display: inline-block; }
    .section.greenStory .logoContainer                      { margin: 70px auto 0 auto; float: right; }
    .section.greenStory .btn                                { margin-bottom: 40px; }

    /* Thema's */
    .section.topcat                                         { margin-bottom: 115px; }
    .section.topcat .hotcat img                             { width: 100%; border-radius: 6px; margin-bottom: 20px; }
    .section.topcat .hotcat .btn                            { width: 100%; margin-bottom: 40px; }

    /* Referenties */
    .section.referenties                                    { margin-bottom: 115px; }
}



/** MED- RES VIEW **/
@media (min-width: 992px) and (max-width: 1199px) {

    /* Populair */
    .section.populair .contentQuarter                       { width: 205px; }
    .section.populair .headingLarge                         { margin-top: 15px; }

    /* Thema's */
    .hotcat p                                               { padding-right: 0}

    /* Referenties */
    .homepageReferenties                                    { width: 660px!important; }

    /* Banners */
    .section.intro .small-banner                            { float: left; width: 100%; position: relative; margin-bottom: 25px; min-height: 130px; }
    .section.intro .small-banner .headingSmall              { padding: 20px 0 0 20px; }
    .section.intro .large-banner                            { min-height: 280px; }
    .section.intro .small-banner .btn.btn-primary           { position: absolute; top: 88px; right: 25px; width: 273px; }
    .section.intro .large-banner .btn.btn-primary           { position: absolute; top: 218px; right: 20px; width: 243px;}
    .section.intro .large-banner .btn.btn-default           { position: absolute; top: 267px; right: 20px; width: 283px; }
    .section.intro .largeBanner img                         { width: 100%; }
    .section.intro .largeBanner                             { margin-bottom: 15px; }
    .section.intro .smallBanner.smallRes                    { display: block}
    .section.intro .small-banner .headingMedium             { padding: 25px 0 0 25px; font-size: 22px; line-height: 30px; }
    .section.intro .small-banner a.promoContent:link,
    .section.intro .small-banner a.promoContent:visited     { bottom: 25px; left: 20px; }

    /* Green Story */
    .section.greenStory h3                                  { margin-top: 20px; }
}