/* ------------------------------------------------
* 1.1. Primary Colors
--------------------------------------------------*/
/* ------------------------------------------------
* 1.2. Secondary Colors
--------------------------------------------------*/
/* ------------------------------------------------
* 1.3. Web-only greys
--------------------------------------------------*/
/* ------------------------------------------------
* 1.4. Colours for graphs and illustrations
--------------------------------------------------*/
/* ------------------------------------------------
* 1.5. Widget Colours
--------------------------------------------------*/
/* ------------------------------------------------
* 2.1. Blue-Grey - Primary Action - buttonType01
--------------------------------------------------*/
/* ------------------------------------------------
* 2.2. Soft-Grey - Action - buttonType02
--------------------------------------------------*/
/* ------------------------------------------------
* 2.3. Green - Call to Action - buttonType03
--------------------------------------------------*/
/* ------------------------------------------------
* 2.4. Links
--------------------------------------------------*/
/* ------------------------------------------------
* 2.5. Input
--------------------------------------------------*/
/* ------------------------------------------------
* 3.1. Definitions of content widths
--------------------------------------------------*/
/* ------------------------------------------------
* 3.2. Definitions of content gutters
--------------------------------------------------*/
/* ------------------------------------------------
* 3.3. Definition of Breakpoints for Media Queries
--------------------------------------------------*/
/* ------------------------------------------------
* 3.4. Definition of grid elements
--------------------------------------------------*/
/* ------------------------------------------------
* 4.1. Prefix for icons
--------------------------------------------------*/
/* ------------------------------------------------
* 4.2. Codes for icons
--------------------------------------------------*/
/* ========================================================================== @mixins ========================================================================== */
/* Documentation about mixin with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins ------------------------------------------------------ Table of Contents ------------------------------------------------------ 1. Mixins Global 1.1. (V)Align Center for element [align-center($orientation)] 1.2. Text Color for the different state of a link <a> 1.3. Calculation element (percent value and other value like em, pc etc...) 1.4. Alignment placeholder 1.5. Font-Face code generator 2. Mixins for Media Queries 2.1. Media Queries "min-width" [at-least($device-width)] 2.2. Media Queries "max-width" [until($device-width)] 2.3. Media Queries "max-width" and "min-width" [for-device($device)] 2.4. Media Queries retina devices 2.5. Media Queries "min-width" [from-device($device-width)] 3. Mixins for Print 3.1. Media Queries for Print [print($value)] 3.2. Shortcut for hidde Element only for Print [no-print] 4. Mixins for Grid 5. Mixins for Animation 5.1. Keyframes 6. Mixins for Icon Font 6.1. Icon After */
/* ------------------------------------------------------------- 1.1. (V)Align Center for element [align-center($orientation)] ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 1.2. Text Color for the different state of a link <a> ---------------------------------------------------------------*/
/* --------------------------------------------------------------------------- 1.3. Calculation element (percent value and other value like em, pc etc...) -----------------------------------------------------------------------------*/
/* ------------------------------------------------------------- 1.4. Alignment placeholder ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 1.5. Font-Face code generator ---------------------------------------------------------------*/
/*  ------------------------------------------- Example the code taht we use: ------------------------------------------- @include font-face-belfius('BelfiusNormalLight',  'belfiusnormal_light.woff', 'belfiusnormal_light.ttf', 'belfiusnormal_light.svg',  'belfiusnormal_regular.eot', normal, normal ); --------------------------------------------- */
/* ------------------------------------------------------------- 2.1. Media Queries "min-width" [at-least($device-width)] ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 2.2. Media Queries "max-width" [until($device-width)] ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 2.3. Media Queries "max-width" and "min-width"  ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 2.4. Media Queries retina devices  ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 2.5. Media Queries "min-width" [from-device($device-width)] ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 3.1. Media Queries for Print [print($value)] ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 3.2. Shortcut for hidde Element only for Print [no-print] ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 5.1. Keyframes ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 5.2. Single-Animation ---------------------------------------------------------------*/
/* ------------------------------------------------------------- 6.1. Icon After ---------------------------------------------------------------*/
/* ========================================================================== @functions ========================================================================== */
/* Documentation about function with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives ------------------------------------------------------ Table of Contents ------------------------------------------------------ 1. Grid Column(s) Size */
/* ------------------------------------------------ 2.1. Container Base --------------------------------------------------*/
.grid, .langMenu, .art-gallery-banner { width: 1152px; margin: 0 auto 24px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@media only screen and (max-width: 1199px) { .grid, .langMenu, .art-gallery-banner { width: -webkit-calc(100% - (2 * 24px)); width: -moz-calc(100% - (2 * 24px)); width: -ms-calc(100% - (2 * 24px)); width: -o-calc(100% - (2 * 24px)); width: calc(100% - (2 * 24px)); } }

@media only screen and (max-width: 1007px) { .grid, .langMenu, .art-gallery-banner { width: -webkit-calc(100% - (2 * 34px)); width: -moz-calc(100% - (2 * 34px)); width: -ms-calc(100% - (2 * 34px)); width: -o-calc(100% - (2 * 34px)); width: calc(100% - (2 * 34px)); margin: 0px auto 36px auto; } }

@media only screen and (max-width: 767px) { .grid, .langMenu, .art-gallery-banner { width: 100%; padding-left: 15px; padding-right: 15px; } }

/* ------------------------------------------------ 2.2. Container Base Spaced Mobile --------------------------------------------------*/
/* ------------------------------------------------ 3.1. Column 1on2  --------------------------------------------------*/
/* ------------------------------------------------ 3.2. Column 1on3  --------------------------------------------------*/
/* ------------------------------------------------ 3.3. Column 2on3  --------------------------------------------------*/
.art-gallery-banner h1, .art-gallery-banner p { clear: none; float: left; margin-left: 24px; }

@media only screen and (max-width: 1199px) { .art-gallery-banner h1, .art-gallery-banner p { margin-left: 2.08333%; } }

@media only screen and (max-width: 1007px) { .art-gallery-banner h1, .art-gallery-banner p { margin-left: 2%; } }

@media only screen and (max-width: 767px) { .art-gallery-banner h1, .art-gallery-banner p { float: none; margin-left: 15px; margin-right: 15px; } }

.art-gallery-banner h1, .art-gallery-banner p { clear: both; margin-left: -webkit-calc((100% - 1152px)/2); margin-left: -moz-calc((100% - 1152px)/2); margin-left: -ms-calc((100% - 1152px)/2); margin-left: -o-calc((100% - 1152px)/2); margin-left: calc((100% - 1152px)/2); }

@media only screen and (max-width: 1199px) { .art-gallery-banner h1, .art-gallery-banner p { margin-left: 24px; } }

@media only screen and (max-width: 1007px) { .art-gallery-banner h1, .art-gallery-banner p { margin-left: 34px; } }

@media only screen and (max-width: 767px) { .art-gallery-banner h1, .art-gallery-banner p { margin-left: 15px; margin-right: 15px; } }

.art-gallery-banner h1, .art-gallery-banner p { width: 858px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@media only screen and (max-width: 1199px) { .art-gallery-banner h1, .art-gallery-banner p { width: -webkit-calc((((100% - (2 * 24px)) - (3 * 2.08333%)) * (3 /4)) + (2 * 2.08333%)); width: -moz-calc((((100% - (2 * 24px)) - (3 * 2.08333%)) * (3 /4)) + (2 * 2.08333%)); width: -ms-calc((((100% - (2 * 24px)) - (3 * 2.08333%)) * (3 /4)) + (2 * 2.08333%)); width: -o-calc((((100% - (2 * 24px)) - (3 * 2.08333%)) * (3 /4)) + (2 * 2.08333%)); width: calc((((100% - (2 * 24px)) - (3 * 2.08333%)) * (3 /4)) + (2 * 2.08333%)); } }

@media only screen and (max-width: 1007px) { .art-gallery-banner h1, .art-gallery-banner p { width: -webkit-calc((((100% - (2 * 34px)) - (1 * 2%)) * (1 /2))); width: -moz-calc((((100% - (2 * 34px)) - (1 * 2%)) * (1 /2))); width: -ms-calc((((100% - (2 * 34px)) - (1 * 2%)) * (1 /2))); width: -o-calc((((100% - (2 * 34px)) - (1 * 2%)) * (1 /2))); width: calc((((100% - (2 * 34px)) - (1 * 2%)) * (1 /2))); } }

@media only screen and (max-width: 767px) { .art-gallery-banner h1, .art-gallery-banner p { width: auto; } }

@media only screen and (max-width: 1007px) { .art-gallery-banner h1:nth-child(2n+3), .art-gallery-banner p:nth-child(2n+3) { clear: both; margin-left: 34px; } }

@media only screen and (max-width: 767px) { .art-gallery-banner h1:nth-child(2n+3), .art-gallery-banner p:nth-child(2n+3) { clear: both; margin-left: 15px; } }

.grid { overflow: hidden; /*padding: { top: 20px; //right: 0; //left: 20px; }*/ /*&::before { @include box-sizing('border-box'); }*/ /*&::after { content: ""; display: table; clear: both; @include box-sizing('border-box'); }*/ /*@include until($tablet){ // -------------------------- Mobile  display: block; width: auto; margin: { right: 0; left: 0; } padding: { right: 10px;   left: 20px; } }*/ }

/*.grid-row {
    width: auto;
    margin-bottom: 15px;
    clear: both;
    overflow: hidden;
}*/
/*.hide-on-mobile {
    @include until($tablet){ // -------------------------- Mobile 
      display: none;
      width: 0;
      height: 0;
    }
}*/
/*.push-right {
    float: right;
}*/
.col-12-12 { float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 0; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-12-12:first-child, .col-12-12.firstChild { clear: left; padding-left: 0; }

.col-offset-12-12, .col-offset-12-12:first-child { margin-left: 100%; }

.col-11-12 { float: left; width: 91.66667%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-11-12:first-child, .col-11-12.firstChild { clear: left; padding-left: 0; }

.col-offset-11-12, .col-offset-11-12:first-child { margin-left: 91.66667%; }

.col-10-12 { float: left; width: 83.33333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-10-12:first-child, .col-10-12.firstChild { clear: left; padding-left: 0; }

.col-offset-10-12, .col-offset-10-12:first-child { margin-left: 83.33333%; }

.col-9-12 { float: left; width: 75%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-9-12:first-child, .col-9-12.firstChild { clear: left; padding-left: 0; }

.col-offset-9-12, .col-offset-9-12:first-child { margin-left: 75%; }

.col-8-12 { float: left; width: 66.66667%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-8-12:first-child, .col-8-12.firstChild { clear: left; padding-left: 0; }

.col-offset-8-12, .col-offset-8-12:first-child { margin-left: 66.66667%; }

.col-7-12 { float: left; width: 58.33333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-7-12:first-child, .col-7-12.firstChild { clear: left; padding-left: 0; }

.col-offset-7-12, .col-offset-7-12:first-child { margin-left: 58.33333%; }

.col-6-12 { float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-6-12:first-child, .col-6-12.firstChild { clear: left; padding-left: 0; }

.col-offset-6-12, .col-offset-6-12:first-child { margin-left: 50%; }

.col-5-12 { float: left; width: 41.66667%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-5-12:first-child, .col-5-12.firstChild { clear: left; padding-left: 0; }

.col-offset-5-12, .col-offset-5-12:first-child { margin-left: 41.66667%; }

.col-4-12 { float: left; width: 33.33333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-4-12:first-child, .col-4-12.firstChild { clear: left; padding-left: 0; }

.col-offset-4-12, .col-offset-4-12:first-child { margin-left: 33.33333%; }

.col-3-12 { float: left; width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-3-12:first-child, .col-3-12.firstChild { clear: left; padding-left: 0; }

.col-offset-3-12, .col-offset-3-12:first-child { margin-left: 25%; }

.col-2-12 { float: left; width: 16.66667%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-2-12:first-child, .col-2-12.firstChild { clear: left; padding-left: 0; }

.col-offset-2-12, .col-offset-2-12:first-child { margin-left: 16.66667%; }

.col-1-12 { float: left; width: 8.33333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 15px; padding-left: 20px; /*&::before { @include box-sizing('border-box'); } &::after { @include box-sizing('border-box'); }*/ }

.col-1-12:first-child, .col-1-12.firstChild { clear: left; padding-left: 0; }

.col-offset-1-12, .col-offset-1-12:first-child { margin-left: 8.33333%; }

@media only screen and (max-width: 767px) { .col-12-12, .col-offset-12-12, .col-offset-12-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-11-12, .col-offset-11-12, .col-offset-11-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-10-12, .col-offset-10-12, .col-offset-10-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-9-12, .col-offset-9-12, .col-offset-9-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-8-12, .col-offset-8-12, .col-offset-8-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-7-12, .col-offset-7-12, .col-offset-7-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-6-12, .col-offset-6-12, .col-offset-6-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-5-12, .col-offset-5-12, .col-offset-5-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-4-12, .col-offset-4-12, .col-offset-4-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-3-12, .col-offset-3-12, .col-offset-3-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-2-12, .col-offset-2-12, .col-offset-2-12:first-child { width: auto; float: none; padding-left: 0; }
  .col-1-12, .col-offset-1-12, .col-offset-1-12:first-child { width: auto; float: none; padding-left: 0; } }

.langMenu { margin-bottom: 0; text-align: right; padding-top: 25px; padding-bottom: 25px; font-family: 'BelfiusBlack'; font-size: 16px; color: #d1184d; }

.langMenu a { color: #435c6b; text-decoration: none; }

.langMenu > * { margin-right: 5px; margin-left: 5px; }

.art-gallery-banner { position: relative; color: #fff; margin-bottom: 25px; padding: 0; overflow: hidden; min-height: 300px; }

.art-gallery-banner--ruby { padding: 40px 0 100px 40px; }

.art-gallery-banner--ruby::before { content: ''; display: block; position: absolute; z-index: 1; bottom: 0; left: 0; background: #d1184d; width: 125%; height: 1500px; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-3.7deg); -moz-transform: rotate(-3.7deg); -ms-transform: rotate(-3.7deg); -o-transform: rotate(-3.7deg); transform: rotate(-3.7deg); }

.art-gallery-banner h1 { position: relative; overflow: visible; color: #fff; z-index: 3; font-family: 'MontserratBold', Arial, sans-serif; font-size: 40px; }

.art-gallery-banner--image h1 { position: absolute; padding: 40px 20px; }

@media only screen and (max-width: 1007px) { .art-gallery-banner h1 { width: 66%; display: block; } }

@media only screen and (max-width: 767px) { .art-gallery-banner h1 { width: auto; } }

.art-gallery-banner--ruby h1::before { content: ''; background: url("Images/logo-squares-background.png") transparent no-repeat left top; width: 450px; height: 450px; position: absolute; display: block; top: -80px; left: -78px; z-index: 2; -webkit-background-size: compact(65%, false, false, false, false, false, false, false, false, false); -moz-background-size: compact(65%, false, false, false, false, false, false, false, false, false); -o-background-size: compact(65%, false, false, false, false, false, false, false, false, false); background-size: compact(65%, false, false, false, false, false, false, false, false, false); opacity: 0.5; }

@media only screen and (max-width: 767px) { .art-gallery-banner--ruby h1::before { content: none; } }

.art-gallery-banner--ruby h1::after { content: ''; background: url("Images/logo-belfius-art-collection-banner.png") transparent right top no-repeat; width: 199px; height: 200px; position: absolute; display: block; top: 0; right: -25.4375%; z-index: 2; overflow: visible; }

@media only screen and (max-width: 1007px) { .art-gallery-banner--ruby h1::after { right: -34.95139%; } }

@media only screen and (max-width: 767px) { .art-gallery-banner--ruby h1::after { content: none; } }

.art-gallery-banner h1 + p { margin-top: 30px; }

.art-gallery-banner p { position: relative; z-index: 3; line-height: 2em; font-family: 'BelfiusAlternative', Arial, sans-serif; font-size: 16px; }

@media only screen and (max-width: 1007px) { .art-gallery-banner p { width: 66%; display: block; } }

@media only screen and (max-width: 767px) { .art-gallery-banner p { display: block; width: auto; } }

.art-gallery-container > header { font-size: 14px; line-height: 20px; color: #435c6b; }

.wd_art-gallery .right { text-align: right; }

.wd_art-gallery #form-register-user { clear: both; }

.wd_art-gallery #form-register-user #other-registration-forms > fieldset.member { clear: both; overflow: hidden; padding-left: 20px; }

.wd_art-gallery #form-register-user #other-registration-forms > fieldset.member > legend { display: none; }

.wd_art-gallery #form-register-user.edit-existing #other-registration-forms > fieldset.member:only-child .button { display: none; }

.wd_art-gallery #button-row { overflow: hidden; }

.wd_art-gallery input[type=submit].buttonType04, .wd_art-gallery button.buttonType04 { border: 1px solid #7b736d; }

.wd_art-gallery button.buttonType03, .wd_art-gallery input.buttonType03 { background-color: #c30045; background-image: linear-gradient(116deg,#8c193c,#c30045 95%); }

.wd_art-gallery button.buttonType02 { background: #51626F; }

.wd_art-gallery input[type=checkbox] { display: inline-block; opacity: 1; width: 17px; height: 17px; margin: 0; }

.wd_art-gallery .overview-intro { margin: 20px 0; }

.wd_art-gallery .privacy-disclaimer { font-size: 13px; padding: 15px 0 0 0; }

@media only screen and (min-width: 820px) { .wd_art-gallery .privacy-disclaimer { white-space: pre-line; } }

@media only screen and (max-width: 1008px) and (min-width: 1199px) { .wd_art-gallery .privacy-disclaimer { width: 66.66667%; } }

.wd_art-gallery #checkbox-row > * { display: inline; line-height: 1.7; cursor: pointer; }

@media only screen and (max-width: 1007px) { .wd_art-gallery .col-offset-2-12 { margin-left: 0; }
  .wd_art-gallery .col-4-12 { width: 50%; }
  .wd_art-gallery .col-offset-4-12 { margin-left: 50%; } }

@media only screen and (max-width: 767px) { .wd_art-gallery .col-4-12 { width: 100%; }
  .wd_art-gallery .col-offset-4-12 { margin-left: 0; }
  .wd_art-gallery .right-mobile { text-align: right; } }

@media only screen and (min-width: 768px) { .wd_art-gallery .left { float: left; margin-left: 0; } }

.wd_art-gallery .loader.big { pointer-events: all; }

@media only screen and (min-width: 1008px) { .wd_art-gallery .loader.big { margin-left: -25%; } }

/*# sourceMappingURL=ArtGallery.css.map */