@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
/* ------------------------------------------------
* 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. Ruby - 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
* 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
---------------------------------------------------------------*/
/* ---------------------------------------------------------------------------
* 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
*
*
*/
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3::after {
font-family: 'BelfiusIconFont';
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/* ------------------------------------------------
* 2.1. Container Base
--------------------------------------------------*/
.fondsRetailSearch, .fonds-detail-anchorLinks, .fonds-footer {
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) {
.fondsRetailSearch, .fonds-detail-anchorLinks, .fonds-footer {
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) {
.fondsRetailSearch, .fonds-detail-anchorLinks, .fonds-footer {
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) {
.fondsRetailSearch, .fonds-detail-anchorLinks, .fonds-footer {
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
--------------------------------------------------*/
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description, .fondsRetailSearch .filterAndFormSidebar, .fondsRetailSearch .searchResult {
clear: none;
float: left;
margin-left: 24px; }
@media only screen and (max-width: 1199px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description, .fondsRetailSearch .filterAndFormSidebar, .fondsRetailSearch .searchResult {
margin-left: 2.08333%; } }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description, .fondsRetailSearch .filterAndFormSidebar, .fondsRetailSearch .searchResult {
margin-left: 2%; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description, .fondsRetailSearch .filterAndFormSidebar, .fondsRetailSearch .searchResult {
float: none;
margin-left: 0px; } }
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .fondsRetailSearch .filterAndFormSidebar {
clear: both;
margin-left: 0px; }
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description {
width: -webkit-calc( ((100% - (1 * 24px)) * (1 / 2)));
width: -moz-calc( ((100% - (1 * 24px)) * (1 / 2)));
width: -ms-calc( ((100% - (1 * 24px)) * (1 / 2)));
width: -o-calc( ((100% - (1 * 24px)) * (1 / 2)));
width: calc( ((100% - (1 * 24px)) * (1 / 2)));
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media only screen and (max-width: 1199px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description {
width: -webkit-calc( ((100% - (1 * 2.08333%)) * (1 / 2)));
width: -moz-calc( ((100% - (1 * 2.08333%)) * (1 / 2)));
width: -ms-calc( ((100% - (1 * 2.08333%)) * (1 / 2)));
width: -o-calc( ((100% - (1 * 2.08333%)) * (1 / 2)));
width: calc( ((100% - (1 * 2.08333%)) * (1 / 2))); } }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description {
width: -webkit-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -moz-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -ms-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -o-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: calc( ((100% - (1 * 2%)) * (1 / 2))); } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane, .CollapseWindow.fonds-detail-content .row > ul.tableList, .CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description {
width: auto; } }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .tabbedPane + .filterAndFormSidebar + .filterAndFormSidebar, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .tabbedPane + .filterAndFormSidebar + .filterAndFormSidebar,
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .singleTabbedPane + .filterAndFormSidebar + .filterAndFormSidebar, .fondsRetailSearch
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane + .filterAndFormSidebar + .filterAndFormSidebar {
clear: both;
margin-left: 0px; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .tabbedPane + .filterAndFormSidebar + .filterAndFormSidebar, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .tabbedPane + .filterAndFormSidebar + .filterAndFormSidebar,
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .singleTabbedPane + .filterAndFormSidebar + .filterAndFormSidebar, .fondsRetailSearch
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane + .filterAndFormSidebar + .filterAndFormSidebar {
clear: both;
margin-left: 0px; } }
.fondsRetailSearch .filterAndFormSidebar {
width: -webkit-calc( ((100% - (3 * 24px)) * (1 / 4)));
width: -moz-calc( ((100% - (3 * 24px)) * (1 / 4)));
width: -ms-calc( ((100% - (3 * 24px)) * (1 / 4)));
width: -o-calc( ((100% - (3 * 24px)) * (1 / 4)));
width: calc( ((100% - (3 * 24px)) * (1 / 4)));
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media only screen and (max-width: 1199px) {
.fondsRetailSearch .filterAndFormSidebar {
width: -webkit-calc( ((100% - (3 * 2.08333%)) * (1 / 4)));
width: -moz-calc( ((100% - (3 * 2.08333%)) * (1 / 4)));
width: -ms-calc( ((100% - (3 * 2.08333%)) * (1 / 4)));
width: -o-calc( ((100% - (3 * 2.08333%)) * (1 / 4)));
width: calc( ((100% - (3 * 2.08333%)) * (1 / 4))); } }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .filterAndFormSidebar {
width: -webkit-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -moz-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -ms-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -o-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: calc( ((100% - (1 * 2%)) * (1 / 2))); } }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .filterAndFormSidebar {
width: auto; } }
.fondsRetailSearch .filterAndFormSidebar {
/*@include until($tablet){
&:nth-child(2n+3),
+ %sub1on2 + %sub1on4,
+ %sub1on4 + %sub1on2 {
clear:both;
margin-left:0px;
}
}*/ }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .filterAndFormSidebar:nth-child(2n+3), .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .tabbedPane + .filterAndFormSidebar, .CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .tabbedPane + .filterAndFormSidebar, .fondsRetailSearch
.CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .singleTabbedPane + .filterAndFormSidebar,
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .singleTabbedPane + .filterAndFormSidebar, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + ul.tableList + .filterAndFormSidebar, .CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + ul.tableList + .filterAndFormSidebar, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .product-risk-info + .filterAndFormSidebar, .CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .product-risk-info + .filterAndFormSidebar, .fondsRetailSearch
.CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .product-description + .filterAndFormSidebar,
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .product-description + .filterAndFormSidebar, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .filterAndFormSidebar + .tabbedPane, .CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .filterAndFormSidebar + .tabbedPane, .fondsRetailSearch
.CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .filterAndFormSidebar + .singleTabbedPane,
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .filterAndFormSidebar + .singleTabbedPane, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .filterAndFormSidebar + ul.tableList, .CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .filterAndFormSidebar + ul.tableList, .fondsRetailSearch .CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .filterAndFormSidebar + .product-risk-info, .CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .filterAndFormSidebar + .product-risk-info, .fondsRetailSearch
.CollapseWindow.fonds-detail-content .row > .filterAndFormSidebar + .filterAndFormSidebar + .product-description,
.CollapseWindow.fonds-detail-content .fondsRetailSearch .row > .filterAndFormSidebar + .filterAndFormSidebar + .product-description {
clear: both;
margin-left: 0px; } }
.fondsRetailSearch .searchResult {
width: -webkit-calc( ((100% - (3 * 24px)) * (3 / 4)) + (2 * 24px));
width: -moz-calc( ((100% - (3 * 24px)) * (3 / 4)) + (2 * 24px));
width: -ms-calc( ((100% - (3 * 24px)) * (3 / 4)) + (2 * 24px));
width: -o-calc( ((100% - (3 * 24px)) * (3 / 4)) + (2 * 24px));
width: calc( ((100% - (3 * 24px)) * (3 / 4)) + (2 * 24px));
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media only screen and (max-width: 1199px) {
.fondsRetailSearch .searchResult {
width: -webkit-calc( ((100% - (3 * 2.08333%)) * (3 / 4)) + (2 * 2.08333%));
width: -moz-calc( ((100% - (3 * 2.08333%)) * (3 / 4)) + (2 * 2.08333%));
width: -ms-calc( ((100% - (3 * 2.08333%)) * (3 / 4)) + (2 * 2.08333%));
width: -o-calc( ((100% - (3 * 2.08333%)) * (3 / 4)) + (2 * 2.08333%));
width: calc( ((100% - (3 * 2.08333%)) * (3 / 4)) + (2 * 2.08333%)); } }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .searchResult {
width: -webkit-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -moz-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -ms-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: -o-calc( ((100% - (1 * 2%)) * (1 / 2)));
width: calc( ((100% - (1 * 2%)) * (1 / 2))); } }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult {
width: auto; } }
/* ------------------------------------------------
* 2.1. %fonds-detail-content-display
--------------------------------------------------*/
.CollapseWindow.fonds-detail-content > header, .CollapseWindow.fonds-detail-content > div, .CollapseWindow.fonds-detail-content > footer p {
width: -webkit-calc( ((100% - (2 * 24px)) * (2 / 3)) + (1 * 24px));
width: -moz-calc( ((100% - (2 * 24px)) * (2 / 3)) + (1 * 24px));
width: -ms-calc( ((100% - (2 * 24px)) * (2 / 3)) + (1 * 24px));
width: -o-calc( ((100% - (2 * 24px)) * (2 / 3)) + (1 * 24px));
width: calc( ((100% - (2 * 24px)) * (2 / 3)) + (1 * 24px));
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: none;
float: none;
margin-left: -webkit-calc( ((100% - (2 * 24px)) * (1 / 3)) + (1 * 24px));
margin-left: -moz-calc( ((100% - (2 * 24px)) * (1 / 3)) + (1 * 24px));
margin-left: -ms-calc( ((100% - (2 * 24px)) * (1 / 3)) + (1 * 24px));
margin-left: -o-calc( ((100% - (2 * 24px)) * (1 / 3)) + (1 * 24px));
margin-left: calc( ((100% - (2 * 24px)) * (1 / 3)) + (1 * 24px)); }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content > header, .CollapseWindow.fonds-detail-content > div, .CollapseWindow.fonds-detail-content > footer p {
width: auto;
margin-left: 0;
margin-right: 15px;
margin-left: 15px; } }
.fondsRetailSearch {
display: block;
overflow: hidden;
margin-top: 0px;
margin-bottom: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* ------------------------------------------------
* 3.1. Filter and Form Sidebar
--------------------------------------------------*/
/* ------------------------------------------------
* 3.2. Search Result
--------------------------------------------------*/
/* ------------------------------------------------
* 3.3. Mobile/Tablet Filter Sidebar
--------------------------------------------------*/
/* ------------------------------------------------
* 3.4. Mobile/Tablet Filter Tags
--------------------------------------------------*/
/* ------------------------------------------------
* 3.5. Mobile/Tablet Filter Tools
--------------------------------------------------*/ }
.fondsRetailSearch .resetFilters {
display: inline-block;
float: right;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-transition: compact(compact(compact(color 1s ease false), false, false, false, false, false, false, false, false, false) false false);
-moz-transition: compact(compact(compact(color 1s ease false), false, false, false, false, false, false, false, false, false) false false false);
-o-transition: compact(compact(compact(color 1s ease false), false, false, false, false, false, false, false, false, false) false false false);
transition: compact(compact(color 1s ease false), false, false, false, false, false, false, false, false, false); }
@media only screen and (min-width: 768px) {
.fondsRetailSearch .resetFilters::after {
content: none; } }
.fondsRetailSearch .resetFilters.isDisabled {
color: #e3dcd3; }
.fondsRetailSearch .resetFilters.isDisabled:hover {
cursor: default; }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .filterAndFormSidebar {
display: block;
width: auto;
float: none;
clear: both; } }
.fondsRetailSearch .filterAndFormSidebar h2 {
margin-bottom: 20px; }
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar {
margin-bottom: 20px;
padding-bottom: 30px;
border-bottom: 2px solid #f2efea; }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar {
border-bottom: 0;
padding-bottom: 0; } }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar h2 {
display: none; } }
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar input {
height: 50px; }
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar input[type=text] {
border-right: 0 none;
/*@include input-placeholder {
color: $color-beige;
@include single-transition(color, 1s, ease);
}*/
/*&:focus {
@include input-placeholder {
color: $color-pearl;
}
}*/ }
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar input[type=text]:hover + * .button {
border-color: #89a2b6; }
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar input[type=text]:focus + * .button {
border-color: #435c6b; }
.fondsRetailSearch .filterAndFormSidebar .formSearchSidebar .button {
height: 50px;
line-height: 50px; }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar {
border-bottom: 2px solid #f2efea; }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .filterAndFormSidebar .filterSidebar {
display: none; } }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3 {
padding-top: 10px;
padding-bottom: 10px; }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3::after {
content: "";
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
float: right;
font-size: 15px;
-webkit-transition: compact(compact(compact(color 0.25s ease false), false, false, false, false, false, false, false, false, false) false false);
-moz-transition: compact(compact(compact(color 0.25s ease false), false, false, false, false, false, false, false, false, false) false false false);
-o-transition: compact(compact(compact(color 0.25s ease false), false, false, false, false, false, false, false, false, false) false false false);
transition: compact(compact(color 0.25s ease false), false, false, false, false, false, false, false, false, false); }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3.isOpen::after {
content: "";
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
color: #d1184d; }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3:hover {
cursor: pointer; }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3 + div {
padding-bottom: 25px; }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar h3 + div input[type=checkbox] + label {
margin-top: 10px;
margin-right: 0; }
.fondsRetailSearch .filterAndFormSidebar .filterSidebar div + h3 {
border-top: 2px solid #f2efea; }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .searchResult {
width: auto;
margin-left: 0; } }
.fondsRetailSearch .searchResult > header {
overflow: visible;
margin-bottom: 9px; }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .searchResult > header {
margin-bottom: 20px; } }
.fondsRetailSearch .searchResult > header::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }
.fondsRetailSearch .searchResult > header h2 {
float: left;
display: inline-block;
width: auto; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > header h2 {
float: none;
display: block; } }
.fondsRetailSearch .searchResult > header .listingOptions {
float: right;
display: inline-block;
width: auto;
vertical-align: top; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > header .listingOptions {
float: none;
display: block;
margin-top: 15px; } }
.fondsRetailSearch .searchResult > header .listingOptions > * {
margin-left: 10px; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > header .listingOptions > * {
margin-left: 0; } }
.fondsRetailSearch .searchResult > header .listingOptions > *:first-child {
margin-left: 0; }
.fondsRetailSearch .searchResult > header .listingOptions .displayTable {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
padding: 0;
display: inline-block;
margin-left: 5px; }
.fondsRetailSearch .searchResult > header .listingOptions .displayTable::before {
font-family: 'FontAwesome';
content: '\f0ce';
display: block; }
.fondsRetailSearch .searchResult > header .listingOptions .displayTable.selected {
background-color: #d1184d; }
.fondsRetailSearch .searchResult > header .listingOptions .displayTable.selected:hover {
cursor: default; }
.fondsRetailSearch .searchResult > header .listingOptions .displayList {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
padding: 0;
display: inline-block;
margin-left: 5px; }
.fondsRetailSearch .searchResult > header .listingOptions .displayList::before {
font-family: 'FontAwesome';
content: '\f00b';
display: block; }
.fondsRetailSearch .searchResult > header .listingOptions .displayList.selected {
background-color: #d1184d; }
.fondsRetailSearch .searchResult > header .listingOptions .displayList.selected:hover {
cursor: default; }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .searchResult > header .listingOptions .belfius-icon-save-cloud,
.fondsRetailSearch .searchResult > header .listingOptions .belfius-icon-print {
overflow: hidden;
width: 30px;
padding-left: 0; } }
@media only screen and (max-width: 1007px) {
.fondsRetailSearch .searchResult > header .listingOptions .belfius-icon-save-cloud::before,
.fondsRetailSearch .searchResult > header .listingOptions .belfius-icon-print::before {
text-align: center;
width: 30px; } }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > header .listingOptions .belfius-icon-save-cloud,
.fondsRetailSearch .searchResult > header .listingOptions .belfius-icon-print {
display: none; } }
.fondsRetailSearch .searchResult > header .listingOptions ul {
list-style: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
border: 0;
margin: 0; }
.fondsRetailSearch .searchResult > header .listingOptions .ui-selectmenu-button {
height: 30px;
margin-left: 0;
width: auto !important; }
.fondsRetailSearch .searchResult > header .listingOptions .ui-selectmenu-button span.ui-selectmenu-text {
line-height: 30px;
padding-right: 30px; }
.fondsRetailSearch .searchResult > header .listingOptions .ui-selectmenu-button span.ui-icon {
height: 30px;
width: 30px; }
.fondsRetailSearch .searchResult > header .listingOptions .ui-selectmenu-button span.ui-icon::before {
line-height: 30px;
font-size: 10px; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > header .listingOptions .ui-selectmenu-button {
float: right; } }
.fondsRetailSearch .searchResult > header + p.belfius-icon-document-circle-o {
margin: 5px 0 10px 0; }
.fondsRetailSearch .searchResult > div > article {
overflow: hidden;
float: none;
clear: both;
width: auto;
border: 1px solid #e3dcd3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 15px;
padding: 20px;
font-size: 14px;
color: #7b736d; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article {
padding: 0 0 20px 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #e3dcd3;
border-left: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0; } }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article:nth-of-type(1) {
border-top: 1px solid #e3dcd3;
padding-top: 20px; } }
.fondsRetailSearch .searchResult > div > article > header {
color: #435c6b;
font-family: 'Montserrat', sans-serif;
font-size: 21px;
font-weight: bold; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article > header {
display: inline-block;
width: auto;
font-size: 16px;
font-weight: normal; } }
.fondsRetailSearch .searchResult > div > article > header > a {
color: #435c6b;
font-family: 'BelfiusAlternative', Arial, sans-serif;
font-size: 21px;
font-weight: bold; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article > header > a {
font-size: 16px;
font-weight: normal; } }
.fondsRetailSearch .searchResult > div > article .icon_size {
width: 170px; }
.fondsRetailSearch .searchResult > div > article .iconCategorie {
float: right; }
.fondsRetailSearch .searchResult > div > article > ul {
margin-top: 15px; }
.fondsRetailSearch .searchResult > div > article > ul > li {
float: left;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
width: 48%;
min-height: 30px;
line-height: 30px; }
.fondsRetailSearch .searchResult > div > article > ul > li.smallCol {
width: 20%; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article > ul > li {
width: auto;
display: block;
float: none; } }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article > ul > li:nth-of-type(3) {
margin-top: 8px; } }
.fondsRetailSearch .searchResult > div > article > ul > li::before {
content: none; }
.fondsRetailSearch .searchResult > div > article > ul > li .label {
display: inline-block;
float: left;
width: 130px;
font-size: 14px; }
.fondsRetailSearch .searchResult > div > article > ul > li .large_label {
width: 160px; }
.fondsRetailSearch .searchResult > div > article .belfius-icon-star {
color: #e3dcd3; }
.fondsRetailSearch .searchResult > div > article .belfius-icon-star.active {
color: #435c6b; }
.fondsRetailSearch .searchResult > div > article > footer {
display: block;
clear: both;
width: 100%;
padding-top: 15px; }
.fondsRetailSearch .searchResult > div > article > footer .button {
float: right;
margin-left: 15px; }
.fondsRetailSearch .searchResult > div > article > footer .button + p {
display: inline-block;
width: auto; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .searchResult > div > article > footer .button + p {
display: block;
clear: both;
padding-top: 5px; } }
.fondsRetailSearch .searchResult nav {
overflow: hidden;
display: block;
width: auto;
margin-top: 35px;
margin-bottom: 35px; }
.fondsRetailSearch .searchResult nav > ul {
float: right;
overflow: hidden; }
.fondsRetailSearch .searchResult table.embeddedTable > tbody > tr:hover {
background: #fff; }
.fondsRetailSearch .searchResult table.embeddedTable > tbody > tr td {
border-style: dotted; }
.fondsRetailSearch .searchResult table.embeddedTable > tbody > tr td:hover {
background-color: transparent; }
.fondsRetailSearch .searchResult table.embeddedTable > tbody > tr td:nth-of-type(1) {
border-bottom: none; }
.fondsRetailSearch .searchResult table.embeddedTable > tbody > tr td[colspan] {
border-bottom-width: 1px;
border-bottom-style: solid;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px; }
.fondsRetailSearch .mobileFilterSidebar {
position: relative;
display: inline-block;
width: 100px;
height: 30px;
overflow: visible;
z-index: 10;
left: auto; }
@media only screen and (min-width: 1008px) {
.fondsRetailSearch .mobileFilterSidebar {
position: absolute;
left: -9999px; } }
.fondsRetailSearch .mobileFilterSidebar > .button {
position: absolute;
top: 0;
right: 0;
z-index: 10000;
width: auto;
height: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
color: #fff; }
.fondsRetailSearch .mobileFilterSidebar > .button .buttonLabel {
display: block;
height: auto; }
.fondsRetailSearch .mobileFilterSidebar > .button a.button {
color: #fff; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel {
display: none; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel > header {
position: relative;
padding: 0 15px 0 15px; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel > header h3 {
height: 53px;
line-height: 53px;
color: #d1184d;
font-size: 18px;
font-weight: normal; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel > header > a {
position: absolute;
top: 15px;
right: 15px;
display: block !important; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel > ul {
padding: 0; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel > ul > li {
margin: 0; }
.fondsRetailSearch .mobileFilterSidebar > .button .filterPannel > ul > li::before {
content: none; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen {
border: 1px solid #c3bbaf;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background: #fff;
-webkit-box-shadow: compact(10px 10px 15px 0 rgba(69, 92, 108, 0.25), false, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(10px 10px 15px 0 rgba(69, 92, 108, 0.25), false, false, false, false, false, false, false, false, false);
box-shadow: compact(10px 10px 15px 0 rgba(69, 92, 108, 0.25), false, false, false, false, false, false, false, false, false);
width: 298px;
height: 464px;
overflow: hidden; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen {
position: fixed;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
top: 189px;
z-index: 100000; } }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen + #buttonLabel {
display: none; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical {
width: auto;
display: block; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical.ui-widget-content {
background: none; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical > .action {
display: block;
width: 241px;
height: 120px;
position: absolute;
bottom: 0px;
left: 57px;
z-index: 2;
background: #fff;
background-image: -owg(compact(linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: -webkit(compact(linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: -moz(compact(linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: -o(compact(linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: compact(linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false); }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical > .action > .button {
position: absolute;
bottom: 12px;
left: 20px; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical > div {
overflow: auto;
height: 400px; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav {
float: left;
width: 57px;
height: 411px;
overflow-y: scroll;
overflow-x: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
border: 0 none;
background: #e3dcd3; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li {
clear: left;
overflow: visible;
float: right;
position: relative;
display: block;
width: 49px;
height: 40px;
margin: 5px 0;
padding: 0;
border: 0;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
-ms-border-radius: 3px 0 0 3px;
-o-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
background: #c3bbaf;
line-height: 40px;
color: #fff; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li::before {
content: '';
position: absolute;
top: -4px;
right: 0px;
left: auto;
width: 4px;
height: 4px;
background-image: -owg(compact(radial-gradient(circle at 0 0, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: -webkit(compact(radial-gradient(circle at 0 0, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: -moz(compact(radial-gradient(circle at 0 0, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: -o(compact(radial-gradient(circle at 0 0, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: compact(radial-gradient(circle at 0 0, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false); }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li::after {
content: '';
position: absolute;
right: 0px;
bottom: -4px;
width: 4px;
height: 4px;
background-image: -owg(compact(radial-gradient(circle at 0 100%, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: -webkit(compact(radial-gradient(circle at 0 100%, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: -moz(compact(radial-gradient(circle at 0 100%, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: -o(compact(radial-gradient(circle at 0 100%, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false));
background-image: compact(radial-gradient(circle at 0 100%, transparent 3px, #c3bbaf 3px), false, false, false, false, false, false, false, false, false); }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.moreTabs > span {
display: block;
padding: 0;
width: inherit;
overflow: hidden;
color: #435c6b;
text-align: center;
font-family: 'BelfiusBlack';
font-size: 18px; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.moreTabs > span:hover {
cursor: pointer; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li a.ui-tabs-anchor {
display: block;
padding: 0;
width: inherit;
overflow: hidden;
color: #435c6b;
text-align: center;
font-family: 'BelfiusBlack';
font-size: 18px; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.ui-tabs-active {
background: #fff;
color: #435c6b;
/*padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px; */ }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.ui-tabs-active::before {
background-image: -owg(compact(radial-gradient(circle at 0 0, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: -webkit(compact(radial-gradient(circle at 0 0, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: -moz(compact(radial-gradient(circle at 0 0, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: -o(compact(radial-gradient(circle at 0 0, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: compact(radial-gradient(circle at 0 0, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false); }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.ui-tabs-active::after {
background-image: -owg(compact(radial-gradient(circle at 0 100%, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: -webkit(compact(radial-gradient(circle at 0 100%, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: -moz(compact(radial-gradient(circle at 0 100%, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: -o(compact(radial-gradient(circle at 0 100%, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false));
background-image: compact(radial-gradient(circle at 0 100%, transparent 3px, #fff 3px), false, false, false, false, false, false, false, false, false); }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.ui-tabs-active:hover,
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-nav > li.ui-tabs-active a:hover {
cursor: default; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
position: relative;
width: 213px;
height: 375px;
overflow-y: scroll;
margin-right: 8px;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-panel h3 {
position: absolute;
background: #fff;
background-image: -owg(compact(linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: -webkit(compact(linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: -moz(compact(linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: -o(compact(linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false));
background-image: compact(linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%), false, false, false, false, false, false, false, false, false);
width: 213px;
padding-bottom: 20px;
z-index: 2;
font-weight: normal; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-panel label {
margin-top: 15px;
font-size: 16px; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-panel .form-group:nth-of-type(1) label {
margin-top: 40px; }
.fondsRetailSearch .mobileFilterSidebar > .button.isOpen .filterPannel.ui-tabs-vertical .ui-tabs-panel .form-group:nth-last-of-type(1) {
margin-bottom: 120px; }
.fondsRetailSearch .mobileFilterTags {
display: block;
clear: both;
float: none; }
@media only screen and (min-width: 1008px) {
.fondsRetailSearch .mobileFilterTags {
display: none; } }
.fondsRetailSearch .mobileFilterTags > li {
float: left;
display: inline-block;
width: auto;
height: 23px;
margin: 5px 10px 5px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: #89a2b6;
line-height: 23px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .mobileFilterTags > li {
height: 30px;
line-height: 30px;
margin: 2px 5px 2px 0; } }
.fondsRetailSearch .mobileFilterTags > li::before {
content: none; }
.fondsRetailSearch .mobileFilterTags > li a.deleteTag {
color: #fff;
text-decoration: none;
padding: 0 30px 0 8px; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .mobileFilterTags > li a.deleteTag {
padding: 3px 30px 3px 8px; } }
.fondsRetailSearch .mobileFilterTags > li a.deleteTag::after {
padding-right: 0;
margin-right: 0; }
.fondsRetailSearch .mobileFilterTools {
display: none;
float: left;
height: 30px;
margin-left: 20px;
line-height: 30px;
color: #7b736d;
font-family: Arial, sans-serif;
font-size: 14px; }
@media only screen and (max-width: 767px) {
.fondsRetailSearch .mobileFilterTools {
float: none;
display: block;
width: auto;
margin-left: 0; } }
@media only screen and (min-width: 1008px) {
.fondsRetailSearch .mobileFilterTools {
display: none; } }
.fondsRetailSearch .mobileFilterTools > a {
margin-left: 12px; }
/* ------------------------------------------------
* 4.1. Anchor Links
--------------------------------------------------*/
.fonds-detail-anchorLinks {
display: table;
margin-top: 0;
margin-bottom: 35px;
border-bottom: 1px solid #e3dcd3;
font-family: 'BelfiusAlternativeBold', Arial, sans-serif;
text-align: center; }
@media only screen and (min-width: 1008px) {
.fonds-detail-anchorLinks.sticky {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 100000;
background-color: #ffffff; } }
@media only screen and (max-width: 1199px) {
.fonds-detail-anchorLinks {
margin-bottom: 30px; } }
@media only screen and (max-width: 767px) {
.fonds-detail-anchorLinks {
margin-bottom: 25px;
padding-right: 0;
padding-left: 0; } }
.fonds-detail-anchorLinks > a {
position: relative;
display: inline-block;
padding: 15px;
font-size: 18px;
color: #435c6b;
text-decoration: none;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.fonds-detail-anchorLinks > a:hover {
color: #627686; }
@media only screen and (min-width: 768px) {
.fonds-detail-anchorLinks > a.active {
background-color: #f4f3ef;
color: #000000; } }
.fonds-detail-anchorLinks > a.active::after {
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -15px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #f4f3ef transparent transparent transparent;
border-style: solid inset; }
@media only screen and (max-width: 767px) {
.fonds-detail-anchorLinks > a.active::after {
content: none; } }
.fonds-detail-anchorLinks.oneItem > a {
width: 100%; }
.fonds-detail-anchorLinks.twoItems > a {
width: 50%; }
.fonds-detail-anchorLinks.threeItems > a {
width: 33.33333%; }
.fonds-detail-anchorLinks.fourItems > a {
width: 25%; }
.fonds-detail-anchorLinks.fiveItems > a {
width: 20%; }
.fonds-detail-anchorLinks.sixItems > a {
width: 16.66667%; }
@media only screen and (max-width: 1007px) {
.fonds-detail-anchorLinks > a,
.fonds-detail-anchorLinks.oneItem > a,
.fonds-detail-anchorLinks.twoItems > a,
.fonds-detail-anchorLinks.threeItems > a,
.fonds-detail-anchorLinks.fourItems > a,
.fonds-detail-anchorLinks.fiveItems > a,
.fonds-detail-anchorLinks.sixItems > a {
font-size: 14px; } }
@media only screen and (max-width: 767px) {
.fonds-detail-anchorLinks > a,
.fonds-detail-anchorLinks.oneItem > a,
.fonds-detail-anchorLinks.twoItems > a,
.fonds-detail-anchorLinks.threeItems > a,
.fonds-detail-anchorLinks.fourItems > a,
.fonds-detail-anchorLinks.fiveItems > a,
.fonds-detail-anchorLinks.sixItems > a {
display: block;
width: auto;
max-width: 100%;
margin: 0;
border-top: 1px solid #e3dcd3;
padding: 15px 15px;
font-size: 16px; } }
/* ------------------------------------------------
* 4.2. Collapse Window (accordion)
--------------------------------------------------*/
.CollapseWindow.fonds-detail-content {
position: relative; }
.CollapseWindow.fonds-detail-content[data-highlight]::before {
content: attr(data-highlight);
position: absolute;
display: block;
top: 30px;
left: -30px;
width: 150px;
height: 25px;
color: white;
font-family: 'BelfiusBlack';
font-size: 11px;
text-align: center;
line-height: 25px;
background: #00a7a6;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 1; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content[data-highlight]::before {
content: none; } }
.CollapseWindow.fonds-detail-content > header {
display: block;
clear: both;
margin-top: 20px;
margin-bottom: 10px; }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content > header {
display: table;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: 0;
margin-left: 0;
padding-right: 15px;
padding-left: 105px; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content > header {
display: block;
padding-right: 15px;
padding-left: 15px; } }
.CollapseWindow.fonds-detail-content > header h2 {
color: #d1184d;
display: inline-block; }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content > header h2 {
display: table-footer-group; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content > header h2 {
display: block; } }
.CollapseWindow.fonds-detail-content > header aside {
height: 24px;
line-height: 24px;
float: right;
display: inline-block;
font-size: 13px; }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content > header aside {
display: table-header-group; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content > header aside {
display: block;
margin-top: 15px; } }
.CollapseWindow.fonds-detail-content h3 {
clear: both; }
.CollapseWindow.fonds-detail-content h4 {
font-family: 'Montserrat', sans-serif;
font-weight: bold; }
.CollapseWindow.fonds-detail-content > div {
display: block;
clear: both; }
.CollapseWindow.fonds-detail-content > div > h4 {
margin-top: 40px;
margin-bottom: 10px; }
.CollapseWindow.fonds-detail-content > div > h4:nth-of-type(1) {
margin-top: 0; }
@media only screen and (min-width: 1008px) {
.CollapseWindow.fonds-detail-content > h3 + div {
padding-left: 0; } }
@media only screen and (max-width: 1007px) {
.CollapseWindow.fonds-detail-content > h3 + div {
margin-right: 0;
margin-left: 0; } }
.CollapseWindow.fonds-detail-content .graphic-source {
color: #435c6b; }
.CollapseWindow.fonds-detail-content .fonds-footnote {
display: block;
margin-top: 35px; }
.CollapseWindow.fonds-detail-content .fonds-footnote > small {
display: block; }
.CollapseWindow.fonds-detail-content .belfius-icon-star {
color: #e3dcd3; }
.CollapseWindow.fonds-detail-content .belfius-icon-star.active {
color: #435c6b; }
.CollapseWindow.fonds-detail-content table.embeddedTable {
margin-bottom: 40px; }
.CollapseWindow.fonds-detail-content .row {
overflow: hidden;
margin-bottom: 20px; }
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs .button:nth-of-type(1) {
margin-right: 10px; }
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane {
float: right;
margin-top: 0;
margin-bottom: 0; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .row > .tabbedPane,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane {
float: none;
width: auto;
display: block;
margin-top: 20px; } }
.CollapseWindow.fonds-detail-content .row > .tabbedPane .belfius-icon-document-circle-o,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs .belfius-icon-document-circle-o,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content .belfius-icon-document-circle-o,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane .belfius-icon-document-circle-o {
position: relative;
margin-top: 20px;
padding-left: 34px;
font-size: 13px; }
.CollapseWindow.fonds-detail-content .row > .tabbedPane .belfius-icon-document-circle-o::before,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs .belfius-icon-document-circle-o::before,
.CollapseWindow.fonds-detail-content .row > .tabbedPane.ui-tabs.ui-widget.ui-widget-content .belfius-icon-document-circle-o::before,
.CollapseWindow.fonds-detail-content .row > .singleTabbedPane .belfius-icon-document-circle-o::before {
position: absolute;
top: 0;
left: 0;
font-size: 28px; }
.CollapseWindow.fonds-detail-content .row > ul.tableList {
float: left;
margin-left: 0; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .row > ul.tableList {
float: none;
width: auto;
display: block; } }
.CollapseWindow.fonds-detail-content .row > ul.tableList > li > div:nth-of-type(2) {
min-width: 170px; }
.CollapseWindow.fonds-detail-content .row:nth-of-type(1) > ul.tableList > li:nth-of-type(1) > div:nth-of-type(1) {
vertical-align: middle; }
.CollapseWindow.fonds-detail-content .row > .product-risk-info,
.CollapseWindow.fonds-detail-content .row > .product-description {
float: left;
clear: left;
margin-left: 0; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .tabbedPane ul.tableList {
margin-top: 0; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .tabbedPane ul.tableList > li + li {
padding-top: 15px; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .tabbedPane ul.tableList > li > div {
display: block;
padding-top: 0; } }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .tabbedPane ul.tableList > li > div:nth-of-type(1) {
padding-top: 15px;
padding-right: 0; } }
.CollapseWindow.fonds-detail-content .inCost ul {
display: table;
margin-top: 10px;
margin-bottom: 10px; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .inCost ul {
float: none;
width: auto;
display: block;
margin-top: 20px; } }
.CollapseWindow.fonds-detail-content .inCost ul > li {
display: table-row; }
.CollapseWindow.fonds-detail-content .inCost ul > li::before {
content: none; }
.CollapseWindow.fonds-detail-content .inCost ul > li > div {
display: table-cell;
padding-top: 10px;
vertical-align: top; }
.CollapseWindow.fonds-detail-content .inCost ul > li > div:nth-of-type(1) {
color: #c3bbaf;
padding-right: 15px; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .inCost ul > li > div:nth-of-type(1) {
padding-right: 10px; } }
.CollapseWindow.fonds-detail-content .inCost ul > li > div:nth-of-type(2) {
min-width: 150px; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .inCost ul > li > div:nth-of-type(2) {
min-width: 0; } }
.CollapseWindow.fonds-detail-content .inCost ul > li:nth-first-of-type(1) > div {
padding-top: 0;
vertical-align: middle; }
.CollapseWindow.fonds-detail-content > footer {
border-top: 1px solid #e3dcd3;
clear: both;
font-size: 12px; }
.CollapseWindow.fonds-detail-content > footer p {
display: block;
padding-top: 20px;
padding-bottom: 20px; }
.CollapseWindow.fonds-detail-content .graph {
font-family: 'BelfiusAlternative', Arial, sans-serif;
font-size: 16px; }
.CollapseWindow.fonds-detail-content .graph + .graph {
margin-top: 40px; }
.CollapseWindow.fonds-detail-content .graph .piechart {
position: relative;
width: 300px;
height: 300px;
margin: 10px 0;
float: left; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .graph .piechart {
width: 230px;
height: 230px; } }
.CollapseWindow.fonds-detail-content .graph .piechart div {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 300px;
border-radius: 50%;
clip: rect(0px, 300px, 300px, 150px); }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .graph .piechart div {
width: 230px;
height: 230px;
clip: rect(0px, 230px, 230px, 115px); } }
.CollapseWindow.fonds-detail-content .graph .piechart div div {
clip: rect(0px, 150px, 300px, 0px); }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .graph .piechart div div {
clip: rect(0px, 115px, 230px, 0px); } }
.CollapseWindow.fonds-detail-content .graph .piechart > div:first-child {
clip: auto; }
.CollapseWindow.fonds-detail-content .graph .piechart .doughnut {
top: 35px;
left: 35px;
background: #fff;
width: 230px;
height: 230px;
display: block;
clip: auto; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .graph .piechart .doughnut {
width: 160px;
height: 160px; } }
.CollapseWindow.fonds-detail-content .graph .colorSlice1 {
background: #00a7a6; }
.CollapseWindow.fonds-detail-content .graph .colorSlice2 {
background: #285799; }
.CollapseWindow.fonds-detail-content .graph .colorSlice3 {
background: #74357f; }
.CollapseWindow.fonds-detail-content .graph .colorSlice4 {
background: #ec5f61; }
.CollapseWindow.fonds-detail-content .graph .colorSlice5 {
background: #efb434; }
.CollapseWindow.fonds-detail-content .graph .slice2 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
.CollapseWindow.fonds-detail-content .graph .slice2 .pie {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
.CollapseWindow.fonds-detail-content .graph .slice3 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg); }
.CollapseWindow.fonds-detail-content .graph .slice3 .pie {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.CollapseWindow.fonds-detail-content .graph .slice4 {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg); }
.CollapseWindow.fonds-detail-content .graph .slice4 .pie {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
.CollapseWindow.fonds-detail-content .graph .slice5 {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg); }
.CollapseWindow.fonds-detail-content .graph .slice5 .pie {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.CollapseWindow.fonds-detail-content .graph > ul {
float: left;
margin-top: 10px;
margin-left: 24px; }
.CollapseWindow.fonds-detail-content .graph > ul > li::before {
content: ''; }
.CollapseWindow.fonds-detail-content .graph > ul > li > div {
display: inline-block;
padding: 10px 0 10px 10px; }
.CollapseWindow.fonds-detail-content .graph > ul > li > div:nth-of-type(1) {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 10px 0;
width: 70px;
text-align: center;
font-family: 'BelfiusAlternativeBold';
color: #fff; }
@media only screen and (max-width: 767px) {
.CollapseWindow.fonds-detail-content .ui-accordion-content div[data-highcharts-chart] {
position: relative;
left: -25px;
width: -webkit-calc(100% + 25px);
width: -moz-calc(100% + 25px);
width: -ms-calc(100% + 25px);
width: -o-calc(100% + 25px);
width: calc(100% + 25px); }
.CollapseWindow.fonds-detail-content .ui-accordion-content div[data-highcharts-chart] span.label {
display: block;
width: 80px;
-ms-word-break: normal;
word-break: normal;
white-space: pre-line; }
.CollapseWindow.fonds-detail-content .ui-accordion-content div[data-highcharts-chart] span.label > .percent {
white-space: nowrap; }
.CollapseWindow.fonds-detail-content .ui-accordion-content div[data-highcharts-chart] .highcharts-button {
display: none; } }
@media only screen and (max-width: 359px) {
.CollapseWindow.fonds-detail-content .row .tabbedPane.ui-tabs .button + .button {
margin-top: 10px; }
.CollapseWindow.fonds-detail-content .row > ul.tableList > li > div:nth-of-type(2) {
min-width: 0; } }