An observatory dashboard model
Analytic view with KPIs, charts and filters
Dataset in use: buildingref-france-bpe-all-geolocated (See it on public domain)
Fields in use:
| reg_name | dep_name | com_arm_area_code | epci_name | category | equipment_name |
|---|---|---|---|---|---|
| Bretagne | Finistère | FXX | CC du Pays Bigouden Sud | Enseignement | Lycée d’enseignement professionnel |
| Nouvelle-Aquitaine | Gironde | FXX | Bordeaux Métropole | Enseignement | Lycée d’enseignement professionnel |
| Bretagne | Ille-et-Vilaine | FXX | Métropole Rennes Métropole | Enseignement | Lycée d’enseignement professionnel |
| Auvergne-Rhône-Alpes | Isère | FXX | CA Porte de l’Isère (C.A.P.I) | Enseignement | Lycée d’enseignement professionnel |
<section class="observatory" ng-init="values.modalswitchstatus = false">
<div class="backdrop"
ng-click="values.modalswitchstatus = !values.modalswitchstatus"
ng-class="{'backdrop-active':values.modalswitchstatus}">
</div>
<ods-dataset-context context="ctx1,ctx2,ctx3"
ctx1-dataset="buildingref-france-bpe-all-geolocated"
ctx1-parameters="{'disjunctive.epci_name':true}"
ctx1-domain="public"
ctx2-dataset="buildingref-france-bpe-all-geolocated"
ctx2-parameters="{'disjunctive.epci_name':true,'refine.category':'Services aux particuliers'}"
ctx2-domain="public"
ctx3-dataset="buildingref-france-bpe-all-geolocated"
ctx3-parameters="{'disjunctive.epci_name':true,'refine.category':'Santé'}"
ctx3-domain="public">
{{
ctx2.parameters['refine.reg_name'] = ctx1.parameters['refine.reg_name'] ;
ctx3.parameters['refine.reg_name'] = ctx1.parameters['refine.reg_name'] ;
ctx2.parameters['refine.dep_name'] = ctx1.parameters['refine.dep_name'] ;
ctx3.parameters['refine.dep_name'] = ctx1.parameters['refine.dep_name'] ;
ctx2.parameters['refine.com_arm_area_code'] = ctx1.parameters['refine.com_arm_area_code'] ;
ctx3.parameters['refine.com_arm_area_code'] = ctx1.parameters['refine.com_arm_area_code'] ;
ctx2.parameters['refine.epci_name'] = ctx1.parameters['refine.epci_name'] ;
ctx3.parameters['refine.epci_name'] = ctx1.parameters['refine.epci_name'] ;
""
}}
<!-- Analyses -->
<span ods-aggregation="agg"
ods-aggregation-context="ctx1"
ods-aggregation-function="COUNT">
{{ values.nbequip = agg ; '' }}
</span>
<span ods-aggregation="services"
ods-aggregation-context="ctx2"
ods-aggregation-function="COUNT">
{{ values.services = services ; '' }}
</span>
<span ods-aggregation="sante"
ods-aggregation-context="ctx3"
ods-aggregation-function="COUNT">
{{ values.sante = sante ; '' }}
</span>
<!-- THE RIGHT MODAL -->
<div class="rightmodal">
<div class="cl-modal"
ng-class="{'cl-modal-active':values.modalswitchstatus}">
<div class="cl-modal__header"
ng-click="values.modalswitchstatus = !values.modalswitchstatus">
<a href="#"
class="closebtn">
Fermer <i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
</div>
<div class="cl-modal__content">
<ods-facets context="ctx1">
<h3>
Région
</h3>
<ods-facet name="reg_name"></ods-facet>
<h3>
Département
</h3>
<ods-facet name="dep_name"></ods-facet>
<h3>
Code DROM
</h3>
<ods-facet name="com_arm_area_code"></ods-facet>
<h3>
EPCI
</h3>
<ods-facet name="epci_name"></ods-facet>
</ods-facets>
</div>
</div>
</div>
<section class="head">
<div class="container">
<h1 class="titre">
Un modèle d'observation des équipements en France
</h1>
<div class="edito">
<p>Bien que .. <q>Il n'y a pas de modèle pour qui cherche ce qu'il n'a jamais vu.</q> Paul Éluard
</p>
</div>
<div id="resume">
<p>
L'objectif de la Base Permanente des Équipements (BPE) est de proposer annuellement une base
d'équipements géolocalisés construite à partir de sources administratives diverses.
</p>
<p>
La classification des équipements en gammes a pour objectif de réunir des équipements qui
présentent
des logiques d'implantation voisines, en ce sens qu'ils sont fréquemment présents dans les mêmes
communes. Ces regroupements permettent d'élaborer des indicateurs synthétiques reflétant
l'organisation hiérarchisée des territoires en termes de services à la population.
</p>
</div>
</div>
</section>
<section class="filter-block">
<div class="container">
<button ng-click="values.modalswitchstatus = !values.modalswitchstatus">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-filter">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
</svg>
Filtrer les données
</button>
<ods-filter-summary context="ctx1">
{{ refinements }}
</ods-filter-summary>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Nombre d'équipements en 2019
</h3>
<p class="description">
Données INSEE issu de la BPE (Base permanente des équipements)
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value">
{{ values.nbequip | number }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6"
ng-if="!ctx1.parameters['refine.reg_name']">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Top 5 Région
</h3>
<p class="description">
Nombre d'équipements des 5 régions les mieux équipées
</p>
</div>
<div class="advanced-kpi--middle">
<ods-chart style="height: 170px" class="small-chart" single-y-axis="true"
scientific-display="true"
display-legend="false"
labels-x-length="20" align-month="false">
<ods-chart-query context="ctx1" field-x="reg_name" maxpoints="5"
sort="serie1-1">
<ods-chart-serie chart-type="bar" function-y="COUNT" color="#000000"
scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6"
ng-if="ctx1.parameters['refine.reg_name']">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Top 5 Département
</h3>
<p class="description">
Nombre d'équipements des 5 départements les mieux équipées
</p>
</div>
<div class="advanced-kpi--middle">
<ods-chart style="height: 170px" class="small-chart" single-y-axis="true"
scientific-display="true"
display-legend="false"
labels-x-length="20" align-month="false">
<ods-chart-query context="ctx1" field-x="dep_name" maxpoints="5"
sort="serie1-1">
<ods-chart-serie chart-type="bar" function-y="COUNT" color="#000000"
scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Répartis en grandes catégories
</h3>
<p class="description">
La Base Permanente des Équipements est réparti en 7 grands domaines :
services
aux
particuliers ; commerces ; enseignement ; santé ; transports et
déplacements ;
sports, loisirs et culture ; tourisme.
</p>
</div>
<div class="advanced-kpi--middle">
<ods-chart class="medium-chart" labels-x-length="30" align-month="true">
<ods-chart-query context="ctx1" field-x="category" maxpoints="0"
sort="serie1-1"
category-colors="{'Services aux particuliers':'#ff714d','Santé':'#25c9ff','Commerces':'#CCEFC2','Sports, loisirs et culture':'#E5E2A7','Enseignement':'#E9D9FF','Transports et déplacements':'#FFFFFF','Tourisme':'#F4C5C8'}">
<ods-chart-serie chart-type="treemap" function-y="COUNT"
color="range-PiYG"
scientific-display="false">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>
Observons ses deux principales catégories
</h2>
<div class="row">
<div class="col-md-6 order-md-1">
<div class="box white flat colored services">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Les Services aux particuliers
</h3>
<p class="description">
qui représentent
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value">
{{ (values.services / values.nbequip * 100) | number : 1 }} %
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 order-md-3">
<div class="box white flat colored services">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Principaux équipement de services aux particuliers
</h3>
<p class="description">
Description du TOP 20 de cette catégorie
</p>
</div>
<div class="advanced-kpi--middle">
<ods-chart class="medium-chart" labels-x-length="40" align-month="true">
<ods-chart-query context="ctx2" field-x="equipment_name" maxpoints="20"
sort="serie1-1">
<ods-chart-serie chart-type="bar" function-y="COUNT" color="#ff714d"
scientific-display="true"
label-y="Nb. équipements">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 order-md-2">
<div class="box white flat colored sante">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
et la Santé
</h3>
<p class="description">
qui représente
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value">
{{ (values.sante / values.nbequip * 100) | number : 1 }} %
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 order-md-4">
<div class="box white flat colored sante">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Principaux équipements de Santé
</h3>
<p class="description">
Description du TOP 20 de cette catégorie
</p>
</div>
<div class="advanced-kpi--middle">
<ods-chart class="medium-chart" labels-x-length="40" align-month="true">
<ods-chart-query context="ctx3" field-x="equipment_name" maxpoints="20"
sort="serie1-1">
<ods-chart-serie chart-type="bar" function-y="COUNT" color="#25c9ff"
scientific-display="true"
label-y="Nb. équipements">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ ctx1.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ 'https://' + ctx1.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + ctx1.dataset.datasetid }}"
title="{{ ctx1.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</ods-dataset-context>
</section>:root {
--boxes-radius: 6px;
}
main {
margin: 0;
}
/* ALL PAGE CONTAINER */
.observatory {
background-color: var(--page-background);
/* prerequisite for full height modal bar */
position: relative;
}
/* Section 1 : heading */
section.head {
background-color: white;
padding: 26px 0;
}
.filter-block {
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0px 15px 10px -15px #2b2b2b;
margin-bottom: 35px;
background-color: black;
}
.filter-block .container {
display: flex;
align-items: center;
padding: 18px 0;
}
.filter-block button {
padding: 0 13px;
margin: 0 10px;
border-radius: 100000px;
display: flex;
align-items: center;
background-color: white;
color: black;
border: 1px solid black;
height: 36px;
min-width: max-content;
}
.filter-block button:hover {
filter: invert();
}
.filter-block button svg {
margin-right: 6px;
}
.titre {
font-size: 37px;
margin: 26px 0 6px;
}
.edito {
margin: 0;
font-size: 19px;
}
.edito q {
font-style: italic;
}
#resume {
font-size: 1.1em;
line-height: 1.8em;
margin-top: 26px;
}
@media screen and (min-width: 640px) {
#resume {
margin-right: 33%;
}
}
/* BACKDROP (black screen when modal active) */
.backdrop {
visibility: hidden;
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 900;
background-color: #000;
cursor: default;
-webkit-transition: visibility 0.5s, opacity 0.5s;
transition: visibility 0.5s, opacity 0.5s;
}
.backdrop-active {
visibility: visible;
opacity: 0.6;
/* make a more or less darker backdrop, 1:totally dark, 0:totally transparent (invisibile) */
}
/* MODAL */
/* The modal is composed of 2 parts:
the leftside, that is the banner that is always visible, and contains an icon on top to click and actiavte the modal
the right side, that contains filters, searchbar, charts etc... that is not visible, activated on demand
the modal default size (width) is 57px, it correspond to the leftside width */
.cl-modal {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: -400px;
bottom: 0;
width: 400px;
background-color: white;
z-index: 1000;
overflow: hidden;
/* Disable horizontal scroll */
transition: ease-in 0.3s;
}
.cl-modal-active {
right: 0;
}
/* specific because charts are loaded inside */
.cl-modal__content {
width: 400px;
}
@media (max-width: 420px) {
.cl-modal-active {
width: 100%;
}
.cl-modal__content {
width: 100vw;
}
}
.cl-modal__header {
min-height: 35px;
background-color: white;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: start;
opacity: 0;
transition: opacity 0s;
}
.cl-modal__header .closebtn {
padding: 0 13px;
color: black;
}
.cl-modal-active .cl-modal__header {
opacity: 1;
transition-delay: 0.3s;
}
/* CONTENT OF THE MODAL */
/* HEADER / UPPER PART */
.cl-modal__header {
border-bottom: 1px solid lightgrey;
}
/* THEN THE MIDDLE / CONTENT */
.cl-modal__content {
height: 100%;
overflow-y: auto;
padding: 25px;
opacity: 0;
transition: opacity 0s;
}
/* WARNING ! This part is very important : it renders the content only after the end of the openning of the modal
ie. when the modal is resized, nothing is visible, after 0.3s of resizing, it's displays the content
this trick is very important to avoid the browser the resize all the content during the modal opening */
.cl-modal-active .cl-modal__content {
opacity: 1;
transition-delay: 0.3s;
}
/** FILTER SUMMARY */
ul.odswidget.odswidget-filter-summary {
font-size: 1em;
margin-left: 13px;
position: relative;
}
@media (min-width: 420px) {
ul.odswidget.odswidget-filter-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
li.odswidget-filter-summary__active-filter,
li.odswidget-filter-summary__clear-all {
border-radius: 3px;
margin: 2px 4px;
padding: 0;
}
li.odswidget-filter-summary__active-filter {
color: white;
}
.odswidget-filter-summary__active-filter-label {
color: black;
font-size: 1rem;
}
a.odswidget-filter-summary__active-filter-link,
a.odswidget-clear-all-filters {
border-left: none;
margin: 0;
padding: 2px 4px 2px 2px;
display: flex;
align-items: center;
}
a.odswidget-clear-all-filters {
align-items: center;
color: white;
opacity: 0.8;
}
a.odswidget-clear-all-filters:hover {
color: white;
opacity: 1;
}
a.odswidget-clear-all-filters i {
margin-right: 3px;
}
.box {
position: relative;
padding: 13px;
}
.box.colored {
padding-top: calc(13px + 9px);
}
.box.colored:before {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 9px;
content: "";
border-radius: var(--boxes-radius) var(--boxes-radius) 0 0;
}
.box.colored.services:before {
background-color: #ff714d;
}
.box.colored.sante:before {
background-color: #25c9ff;
}
.box.white {
background-color: white;
}
.box.flat {
border: 1px solid #dfdfdf;
border-radius: var(--boxes-radius);
}
.advanced-kpi {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.advanced-kpi--top .title {
font-size: 1.2em;
margin: 0 auto 6px;
}
.advanced-kpi--top .description {
margin: 0 auto;
color: #565656;
font-size: 1em;
font-weight: 400;
}
.advanced-kpi--middle {
display: flex;
flex-direction: column;
margin: 20px 0;
}
.advanced-kpi--middle.centered {
align-items: center;
}
.advanced-kpi--middle > * {
margin: 5px 0;
}
.advanced-kpi--middle .value {
color: var(--highlight);
font-weight: 600;
font-size: 3rem;
}
.advanced-kpi--bottom {
font-size: 0.8em;
}
.advanced-kpi--bottom .advanced-kpi--bottom-second-stage {
display: flex;
justify-content: space-between;
}
.advanced-kpi--bottom .source {
text-decoration: underline;
color: var(--links);
}
.advanced-kpi--bottom .source i {
margin-left: 6px;
}
.advanced-kpi--bottom .source:hover {
opacity: 0.65;
}
.advanced-kpi--bottom .source:hover i {
animation: bounce 0.7s ease infinite;
}
@keyframes bounce {
from {
margin-left: 6px;
margin-right: 0;
}
50% {
margin-left: 2px;
margin-right: 4px;
}
to {
margin-left: 6px;
margin-right: 0;
}
}
/* CHARTS */
.ods-chart {
min-height: inherit;
}
.medium-chart {
height: 350px;
}
.small-chart {
height: 130px;
}
.highcharts-axis tspan, .highcharts-data-label tspan, .highcharts-label span, .highcharts-xaxis-labels text, .highcharts-yaxis-labels text {
font-family: Gotham-book, Arial, sans-serif !important;
}
.ods-highcharts__tooltip {
align-items: center;
}
/**
* License: MIT License
* Generated on 25 Jun 2021
* Author: Labs from opendatasoft
* Version: 0.3
* Description: ODS Layout over-ride to Flexbox system
*/
.box,.row.full-height{height:100%}.row{display:flex;flex-wrap:wrap}.row>*{margin-bottom:20px;flex-grow:1}.order-0{order:0}@media screen and (min-width:750px){.order-sm-0{order:0}}@media screen and (min-width:970px){.order-md-0{order:0}}@media screen and (min-width:1170px){.order-lg-0{order:0}.order-lg-1{order:1}}.order-1{order:1}@media screen and (min-width:750px){.order-sm-1{order:1}}@media screen and (min-width:970px){.order-md-1{order:1}.order-md-2{order:2}}.order-2{order:2}@media screen and (min-width:750px){.order-sm-2{order:2}}@media screen and (min-width:1170px){.order-lg-2{order:2}.order-lg-3{order:3}}.order-3{order:3}@media screen and (min-width:750px){.order-sm-3{order:3}}@media screen and (min-width:970px){.order-md-3{order:3}.order-md-4{order:4}}.order-4{order:4}@media screen and (min-width:750px){.order-sm-4{order:4}}@media screen and (min-width:1170px){.order-lg-4{order:4}.order-lg-5{order:5}}.order-5{order:5}@media screen and (min-width:750px){.order-sm-5{order:5}}@media screen and (min-width:970px){.order-md-5{order:5}.order-md-6{order:6}}.order-6{order:6}@media screen and (min-width:750px){.order-sm-6{order:6}}@media screen and (min-width:1170px){.order-lg-6{order:6}.order-lg-7{order:7}}.order-7{order:7}@media screen and (min-width:750px){.order-sm-7{order:7}}@media screen and (min-width:970px){.order-md-7{order:7}.order-md-8{order:8}}.order-8{order:8}@media screen and (min-width:750px){.order-sm-8{order:8}}@media screen and (min-width:1170px){.order-lg-8{order:8}.order-lg-9{order:9}}.order-9{order:9}@media screen and (min-width:750px){.order-sm-9{order:9}}@media screen and (min-width:970px){.order-md-9{order:9}.order-md-10{order:10}}.order-10{order:10}@media screen and (min-width:750px){.order-sm-10{order:10}}@media screen and (min-width:1170px){.order-lg-10{order:10}.order-lg-11{order:11}}.order-11{order:11}@media screen and (min-width:750px){.order-sm-11{order:11}}@media screen and (min-width:970px){.order-md-11{order:11}.order-md-12{order:12}}.order-12{order:12}@media screen and (min-width:750px){.order-sm-12{order:12}}@media screen and (min-width:1170px){.order-lg-12{order:12}}@media screen and (max-width:1169px){:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-1,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-10,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-11,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-12,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-2,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-3,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-4,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-5,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-6,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-7,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-8,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-9{width:100%}}@media screen and (max-width:969px){:not([class*=col-sm]):not([class*=col-xs]).col-md-1,:not([class*=col-sm]):not([class*=col-xs]).col-md-10,:not([class*=col-sm]):not([class*=col-xs]).col-md-11,:not([class*=col-sm]):not([class*=col-xs]).col-md-12,:not([class*=col-sm]):not([class*=col-xs]).col-md-2,:not([class*=col-sm]):not([class*=col-xs]).col-md-3,:not([class*=col-sm]):not([class*=col-xs]).col-md-4,:not([class*=col-sm]):not([class*=col-xs]).col-md-5,:not([class*=col-sm]):not([class*=col-xs]).col-md-6,:not([class*=col-sm]):not([class*=col-xs]).col-md-7,:not([class*=col-sm]):not([class*=col-xs]).col-md-8,:not([class*=col-sm]):not([class*=col-xs]).col-md-9{width:100%}}@media screen and (max-width:749px){.row{flex-direction:column}:not([class*=col-xs]).col-sm-1,:not([class*=col-xs]).col-sm-10,:not([class*=col-xs]).col-sm-11,:not([class*=col-xs]).col-sm-12,:not([class*=col-xs]).col-sm-2,:not([class*=col-xs]).col-sm-3,:not([class*=col-xs]).col-sm-4,:not([class*=col-xs]).col-sm-5,:not([class*=col-xs]).col-sm-6,:not([class*=col-xs]).col-sm-7,:not([class*=col-xs]).col-sm-8,:not([class*=col-xs]).col-sm-9{width:100%}}.no-margin-bottom,.no-mb{margin-bottom:0!important}.no-margin-x,.no-mx{margin-left:0!important;margin-right:0!important}