@import url('https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap');

.content-text h2 {
    margin-bottom: 5px;
}

.full ul,
.content-text table,
.content-text ul {
    margin-bottom: 38px;
}
p>ul {
  margin-top: 0px;
}

.branche.product.horizon,
.branche.product.louver-roofs,
.branche.product.sliding-panels {
    display: none;
}

.location {
    font-family: "Roboto", sans-serif !important;
    font-size: 85% !important;
}

/* Tekstveld Adviesformulier */

#cms_form_field_72 {
    width: 312px;
}
#cms_form_field_73 {
    width: 294px;
}
#cms_form_field_74 {
    width: 260px;
}

/* Responsive iframes, CSS Tricks */

[style*="--aspect-ratio"] > :first-child {
    width: 100%;
  }
  [style*="--aspect-ratio"] > img {
    height: auto;
  }
  @supports (--custom:property) {
    [style*="--aspect-ratio"] {
      position: relative;
    }
    [style*="--aspect-ratio"]::before {
      content: "";
      display: block;
      padding-bottom: calc(100% / (var(--aspect-ratio)));
    }
    [style*="--aspect-ratio"] > :first-child {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }
  }

.centered-table {
    margin-left: auto;
    margin-right: auto;
}

div .sscc-video {
    margin-bottom: 40px;
}
#rightcolumn div .sscc-video {
    margin-left: 25px;
    max-width: 437px;
    margin-bottom: 0px;
}

div .sscc-full-width {
    margin: 0 auto;
    max-width: 80%;
}

div .sscc-half-width {
    display: block;
    margin: 0 auto;
    width: 550px;
    max-width: 45%;
    min-width: 300px;
    min-height: 355px;
}

div .sscc-half-width img {
    float: left;
}

div .sscc-half-width:nth-child(odd) {
    float:left;
}
div .sscc-half-width:nth-child(even) {
    float:right;
}

div .sscc-border-box {
    border: 1px solid #ddd;
    height: auto;
    min-height: 300px;
    margin: 5px 0 40px;
    padding: 40px;
}

div.sscc-border-box li {
    list-style-position: inside;
    padding: 0 0 20px 20px;
}

#rightcolumn ul.sitemap-list  {
    padding-left: 25px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 90%;
}

#rightcolumn ul.sitemap-list li {
    padding: 5px 0px;
}
#rightcolumn .sitemap-list li {
    list-style-type: disc;
    list-style-position: inside;
    color: #8ab6c1;
}
#rightcolumn .sitemap-list li a {
    color: #4d4d4d;
}
#rightcolumn li a:hover {
    text-decoration: underline;
}

.sscc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 0px;
    align-items: stretch;
    }

.sscc-gallery img {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    max-width: 100%;
  }

.pager-wrap-one-page .info {
    display:none
}

@media screen and (max-width: 720px) {

    div.sscc-border-box {
        padding: 30px 20px 0;
    }
}

.sscc-ism {
    font-family: 'Mr De Haviland', cursive;
    font-size: 42px;
    font-weight: 400;
}

div.sscc-ism {
    margin-left: 20px;
    margin-top: -40px;
    margin-bottom: 40px;
}

.template-branches .intro,
.template-homepage .intro {
    display: block;
    margin: 0 auto;
    max-width: 960px;
}

.template-branches .intro p {
    max-width: 960px;
    text-align: center;
}

.sscc-caption {
    font-size: 79%;
    position: relative;
    top: -5px;
}

.sscc-left {
    float: left;
    margin: 0 10px 10px 0;
}
.sscc-right {
    float: right;
    margin: 0 0 10px 10px;
}

#branches_container a.branche.product.wood-louver-94w,
#branches_container a.branche.product.wood-louver-98wr {
    display: none;
}

.sscc-list li {
    color: #4d4d4d;
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    list-style-image: url("../themes/default/images/bullet.png");
}

/* Solliciteer direct */

table#solliciteer-direct {
    color: #4d4d4d;
    font-size: 14px;
    margin-left: 25px;
}

#cms_form_field_53,
#cms_form_field_54,
#cms_form_field_55,
#cms_form_field_56 {
    margin-left: 20px;
    width: 280px;
}
#solliciteer-direct .send-button,
#cms_form_field_57 {
    margin-left: 20px;
}
#solliciteer-direct .send-button {
    margin-top: 5px;
}

/* Meldingsformulier */

.user-form.sscc-form li {
    list-style-image: none;
    margin-left: 0px;
}
.user-form.sscc-form .field-checkbox {
    margin-right: 5px;
}
.user-form.sscc-form label.checkbox {
    width: auto;
    max-width: 505px;
}
.user-form.sscc-form .send-button,
.user-form.sscc-form #cms_form_field_81 {
    font-size: 14px;
}

.kanvas-form-field-row-86 td {
    height: 80px;
}
.user-form.sscc-form .send-button,
.kanvas-form-field-row-81 td,
.kanvas-form-field-row-84 td,
.kanvas-form-field-row-85 td,
.kanvas-form-field-row-86 td {
    min-height: 40px;
    vertical-align: middle;
}
.kanvas-form-field-row-82 td,
.kanvas-form-field-row-83 td {
    height: auto;
    vertical-align: top;
}
tr.kanvas-form-field-row-81 {
    height: 80px;
}
#cms_form_field_53,
#cms_form_field_54,
#cms_form_field_55,
#cms_form_field_56,
#cms_form_field_84,
#cms_form_field_85 {
    border: solid 1px #e2e2e2;
}

.kanvas-form-field-row-86 td {
    height: 60px;
    vertical-align: top;
}

/* Contactgegevens met klikbaar telefoonnummer */

div.sscc-contact {
    color: #4d4d4d;
    font-family: "Roboto", sans-serif;
    font-size: 90%;
    font-weight: 300;
    line-height: 2;
    padding-left: 25px;
}

.sscc-contact h2 {
    margin-left: -5px
}

.sscc-contact h4 {
    font-weight: 700;
    font-size: 1.3em;
}

.sscc-contact a {
        color: #4d4d4d;
    }
.sscc-contact a:hover {
       text-decoration: underline;
    }

.sscc-mobile:before,
.sscc-phone:before {
    content:'\260F';
    margin-right: 5px;
    position: relative;
    top: 0px !important;
}
/*
.sscc-phone2:before {
    margin-right: 5px;
    position: relative;
    top: 0px !important;
} */

.sscc-email:before {
    content:'\2709';
    margin-right: 5px;
    position: relative;
    top: 0px !important;
}

/* .sscc-website:before {
    content:'\1f310';
    color: #786E65 !important;
    margin-right: 5px;
    position: relative;
    top: 0px !important;
} */


/* Media Queries added by Wil Ransz
---------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1021px) {

    .sscc-mobile2,
    .sscc-mobile {
        display: none;
    }
}

@media only screen and (max-width: 1020px) {

    .sscc-phone2,
    .sscc-phone {
        display: none;
    }
    .sscc-mobile {
        display: initial;
    }
    .sscc-email a,
    .sscc-mobile a,
    .sscc-mobile2 a {
        color: #4d4d4d;
        text-decoration: underline;
    }
    .sscc-email a:hover,
    .sscc-mobile a:hover {
        text-decoration: none;
    }
}

/*
.af_article #content {
    max-width: 680px;
}
body.af_article p.meta {
    display: none;
}
.article .auto-thumbnail {
    display: none;
}

.af_article #content {
    max-width: 680px;
}
body.af_article p.meta {
    display: none;
}
.article .auto-thumbnail {
    display: none;
}

#content_container .article-list .article {
    float: left;
    width: 50%;
}
#content_container .article-list .article .auto-thumbnail {
    display: none;
    padding: 0 40px 0 0;
}
*/

ul.list-louverroofs {
    padding-left: 25px;
}

ul.list-louverroofs li {
    padding: 5px 0px;
}
.list-louverroofs li {
    list-style-type: disc;
    list-style-position: inside;
}
ul.list-louverroofs li a {
    color: #4d4d4d;
}
.list-louverroofs li a:hover {
    text-decoration: underline;
}

.sscc-centered-table {
	clear: both;
	display: block;
	margin: 10px auto 20px;
	width: 85%;
	max-width: 680px;
}

/* Louver properties */ 

.louver-properties {
    color: #4d4d4d;
    font-size: 80%;
    max-width: 600px;
}

.grid-1-col {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(40px, auto);
    margin-top: 0px;
    border: 1px solid #287e93;
}
.grid-2-col {
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-auto-rows: minmax(40px, auto);
    border: 1px solid #287e93;
}
.grid-3-col {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: minmax(40px, auto);
    margin-top: 0px;
    border: 1px solid #287e93;
}
.sscc-prop-header {
    background-color: #287e93;
    color: #fff;
    padding: 10px;
    text-align: center;
}
.sscc-prop-header:first-child {
    background-color: #287e93;
    color: #fff;
    padding: 10px;
    text-align: initial;
}
.sscc-prop {
    background-color: #dfecef;
    padding: 10px;
    border-bottom: 1px solid #287e93;
}
.sscc-prop-value {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #287e93;
}
.louver-properties .grid-2-col,
.louver-properties .grid-3-col {
    margin-bottom: -2px;
}

@media screen and (max-width: 720px) {

    .louver-properties {
        font-size: 70%;
    }
}

/* Anodizing colours */ 

.figures-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
    color: #4d4d4d;
}
div .figures {
    margin: 20px;
    max-width: 200px;
    font-weight: 300;
    font-size: 80%;
    text-align: center;
}
.figures img {
    max-width: 200px;
    text-align: center;
}
.figures-text {
    max-width: 800px;
}

/* RAL colours */ 

.ral-colors {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    font-family: "Roboto", sans-serif;
    font-size: 90%;
}
span.ral-code {
  padding: 20px;
  color: #4d4d4d;
}
span.ral {
    display: inline-block;
    width: 100px;
    height: 30px;
}

/* Move following rules to ral.css, and minify */

.ral1000 {
    background-color: #cccc99;
}
.ral4007 {
    background-color: #3d1b21;
}
.ral7008 {
    background-color: #7c6343;
}
.ral1001 {
    background-color: #d2aa5a;
}
.ral4008 {
    background-color: #6b2948;
}
.ral7009 {
    background-color: #5d5d3d;
}
.ral1002 {
    background-color: #d0a818;
}
.ral4009 {
    background-color: #7e6763;
}
.ral7010 {
    background-color: #575737;
}
.ral1003 {
    background-color: #ffcc00;
}
.ral5000 {
    background-color: #404056;
}
.ral7011 {
    background-color: #323a3d;
}
.ral1004 {
    background-color: #e0b000;
}
.ral5001 {
    background-color: #001a4f;
}
.ral7012 {
    background-color: #616137;
}
.ral1005 {
    background-color: #d1a40f;
}
.ral5002 {
    background-color: #00054a;
}
.ral7013 {
    background-color: #3d3d13;
}
.ral1006 {
    background-color: #e3a529;
}
.ral5003 {
    background-color: #111526;
}
.ral7015 {
    background-color: #272b30;
}
.ral1007 {
    background-color: #dd9f23;
}
.ral5004 {
    background-color: #111526;
}
.ral7016 {
    background-color: #364135;
}
.ral1011 {
    background-color: #ac7e24;
}
.ral5005 {
    background-color: #2d2d6d;
}
.ral7021 {
    background-color: #161516;
}
.ral1012 {
    background-color: #d8b400;
}
.ral5007 {
    background-color: #2d386c;
}
.ral7022 {
    background-color: #354435;
}
.ral1013 {
    background-color: #eae9c2;
}
.ral5008 {
    background-color: #13132d;
}
.ral7023 {
    background-color: #948b6a;
}
.ral1014 {
    background-color: #d3c378;
}
.ral5009 {
    background-color: #0b2f5b;
}
.ral7024 {
    background-color: #2c292b;
}
.ral1015 {
    background-color: #f5e1aa;
}
.ral5010 {
    background-color: #0b1877;
}
.ral7026 {
    background-color: #1f2323;
}
.ral1016 {
    background-color: #ffff00;
}
.ral5011 {
    background-color: #0f1114;
}
.ral7030 {
    background-color: #a4987a;
}
.ral1017 {
    background-color: #f4c431;
}
.ral5012 {
    background-color: #4a6e8c;
}
.ral7031 {
    background-color: #374146;
}
.ral1018 {
    background-color: #fbe22b;
}
.ral5013 {
    background-color: #00054a;
}
.ral7032 {
    background-color: #cfbe91;
}
.ral1019 {
    background-color: #a68a3c;
}
.ral5014 {
    background-color: #6e6e6e;
}
.ral7033 {
    background-color: #535c4e;
}
.ral1020 {
    background-color: #a8901a;
}
.ral5015 {
    background-color: #2851ae;
}
.ral7034 {
    background-color: #ac993a;
}
.ral1021 {
    background-color: #ffcd06;
}
.ral5017 {
    background-color: #003e91;
}
.ral7035 {
    background-color: #b3bbb6;
}
.ral1023 {
    background-color: #eec61b;
}
.ral5018 {
    background-color: #007b6c;
}
.ral7036 {
    background-color: #9f8d67;
}
.ral1024 {
    background-color: #b29504;
}
.ral5019 {
    background-color: #24439f;
}
.ral7037 {
    background-color: #948666;
}
.ral1027 {
    background-color: #aa880c;
}
.ral5020 {
    background-color: #003a3c;
}
.ral7038 {
    background-color: #a2977a;
}
.ral1028 {
    background-color: #fd9e00;
}
.ral5021 {
    background-color: #006661;
}
.ral7039 {
    background-color: #7b6e4b;
}
.ral1032 {
    background-color: #d0a300;
}
.ral5022 {
    background-color: #00004a;
}
.ral7040 {
    background-color: #9f9477;
}
.ral1033 {
    background-color: #ff9a35;
}
.ral5024 {
    background-color: #5e718e;
}
.ral7042 {
    background-color: #9a8967;
}
.ral1034 {
    background-color: #e79645;
}
.ral6000 {
    background-color: #21752f;
}
.ral7043 {
    background-color: #1b1e1d;
}
.ral2000 {
    background-color: #e29600;
}
.ral6001 {
    background-color: #216f2e;
}
.ral7044 {
    background-color: #c7ac7a;
}
.ral2001 {
    background-color: #a21d00;
}
.ral6002 {
    background-color: #1d5f28;
}
.ral7045 {
    background-color: #92989b;
}
.ral2002 {
    background-color: #d21500;
}
.ral6003 {
    background-color: #2d3520;
}
.ral7046 {
    background-color: #838b8f;
}
.ral2003 {
    background-color: #e09500;
}
.ral6004 {
    background-color: #003935;
}
.ral7047 {
    background-color: #c9cac9;
}
.ral2004 {
    background-color: #d47a04;
}
.ral6005 {
    background-color: #00281c;
}
.ral8000 {
    background-color: #816927;
}
.ral2008 {
    background-color: #d68212;
}
.ral6006 {
    background-color: #24261c;
}
.ral8001 {
    background-color: #926b00;
}
.ral2009 {
    background-color: #d06b18;
}
.ral6007 {
    background-color: #16230e;
}
.ral8002 {
    background-color: #65270a;
}
.ral2010 {
    background-color: #cc6600;
}
.ral6008 {
    background-color: #000000;
}
.ral8003 {
    background-color: #7b4e05;
}
.ral2011 {
    background-color: #d68822;
}
.ral6009 {
    background-color: #171e17;
}
.ral8004 {
    background-color: #8c290d;
}
.ral2012 {
    background-color: #d26a24;
}
.ral6010 {
    background-color: #156722;
}
.ral8007 {
    background-color: #562707;
}
.ral3000 {
    background-color: #b00900;
}
.ral6011 {
    background-color: #71825e;
}
.ral8008 {
    background-color: #7b584e;
}
.ral3001 {
    background-color: #8e0700;
}
.ral6012 {
    background-color: #1b2720;
}
.ral8011 {
    background-color: #3d1c05;
}
.ral3002 {
    background-color: #970700;
}
.ral6013 {
    background-color: #8c8556;
}
.ral8012 {
    background-color: #7b3a05;
}
.ral3003 {
    background-color: #8e0700;
}
.ral6014 {
    background-color: #30381d;
}
.ral8014 {
    background-color: #211c14;
}
.ral3004 {
    background-color: #771f0b;
}
.ral6015 {
    background-color: #003333;
}
.ral8015 {
    background-color: #6c3304;
}
.ral3005 {
    background-color: #611200;
}
.ral6016 {
    background-color: #316d2f;
}
.ral8016 {
    background-color: #331104;
}
.ral3007 {
    background-color: #000000;
}
.ral6017 {
    background-color: #347e35;
}
.ral8017 {
    background-color: #330f04;
}
.ral3009 {
    background-color: #641706;
}
.ral6018 {
    background-color: #2b8a20;
}
.ral8019 {
    background-color: #231f1d;
}
.ral3011 {
    background-color: #993333;
}
.ral6019 {
    background-color: #acd0aa;
}
.ral8022 {
    background-color: #000000;
}
.ral3012 {
    background-color: #bd7157;
}
.ral6020 {
    background-color: #1e3315;
}
.ral8023 {
    background-color: #ad6d2d;
}
.ral3013 {
    background-color: #8c0700;
}
.ral6021 {
    background-color: #718154;
}
.ral8024 {
    background-color: #75522c;
}
.ral3014 {
    background-color: #ff605b;
}
.ral6022 {
    background-color: #000033;
}
.ral8025 {
    background-color: #937066;
}
.ral3015 {
    background-color: #d68789;
}
.ral6024 {
    background-color: #297d2f;
}
.ral8028 {
    background-color: #2e2216;
}
.ral3016 {
    background-color: #9d0c00;
}
.ral6025 {
    background-color: #385924;
}
.ral9001 {
    background-color: #f9f5d9;
}
.ral3017 {
    background-color: #d03737;
}
.ral6026 {
    background-color: #004a38;
}
.ral9002 {
    background-color: #d6d8c7;
}
.ral3018 {
    background-color: #d12121;
}
.ral6027 {
    background-color: #5b9b94;
}
.ral9003 {
    background-color: #f4f8f4;
}
.ral3020 {
    background-color: #d20b00;
}
.ral6028 {
    background-color: #243329;
}
.ral9004 {
    background-color: #0b0b0b;
}
.ral3022 {
    background-color: #d5462d;
}
.ral6029 {
    background-color: #005b34;
}
.ral9005 {
    background-color: #080808;
}
.ral3027 {
    background-color: #bf0000;
}
.ral6032 {
    background-color: #339900;
}
.ral9006 {
    background-color: #b5b3b4;
}
.ral3031 {
    background-color: #9e110e;
}
.ral7000 {
    background-color: #78806a;
}
.ral9007 {
    background-color: #7d7978;
}
.ral4001 {
    background-color: #66536f;
}
.ral7001 {
    background-color: #999999;
}
.ral9010 {
    background-color: #f7f9ef;
}
.ral4002 {
    background-color: #7c2527;
}
.ral7002 {
    background-color: #999966;
}
.ral9011 {
    background-color: #000000;
}
.ral4003 {
    background-color: #d23e58;
}
.ral7003 {
    background-color: #6f896f;
}
.ral9016 {
    background-color: #f7fbf5;
}
.ral4004 {
    background-color: #710b19;
}
.ral7004 {
    background-color: #999999;
}
.ral9017 {
    background-color: #000000;
}
.ral4005 {
    background-color: #75406d;
}
.ral7005 {
    background-color: #97957f;
}
.ral9018 {
    background-color: #bdc6be;
}
.ral4006 {
    background-color: #8f415b;
}
.ral7006 {
    background-color: #807850;
}
.ral1024 {
    background-color: #f5ff00;
}
/* End move to ral.css */

@media screen and (max-width: 720px) {
	#louver-properties {
		font-size: 80%;
	}
}

.full_article .auto-thumbnail {
    display: none;
}
