Page Templates - Home page 1

<!--
     The <ods-catalog-context> allows other widgets in this page to access the catalog of datasets in this platform.
     Check the ods-widgets documentation to learn more about ods-catalog-context.
-->
<ods-catalog-context context="catalog">
    <!-- Header Image
      Check the .home-header class to change the background image
    -->
    <section class="home-header"></section>
    <!-- Welcome card and KPI cards -->
    <section class="container">
        <div class="row row-equal-height">
            <div class="col-md-4">
                <div class="welcome-card">
                    <h1 class="welcome-card-title">
                        Welcome to
                        <br />
                        Portal Name
                    </h1>
                    <p class="welcome-card-description">
                        Lorem ipsum dolor amet kombucha try-hard biodiesel XOXO scenester subway tile. Etsy selvage shaman master cleanse activated charcoal. Celiac hella wayfarers glossier palo santo pork belly. Vape twee stumptown normcore. Occupy fingerstache listicle etsy.
                    </p>
                    <a href="/explore/"
                       class="welcome-card-link">
                        Explore catalog <i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <!-- KPI box component -->
                <div class="kpi-card">
                    <i class="kpi-icon fa fa-gitlab" aria-hidden="true"></i>
                    <p class="kpi-title">
                        5,983
                    </p>
                    <p class="kpi-description">
                        Dignissim suspendisse in est ante in nibh nisl tincidunt eget
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <!-- KPI box component -->
                <div class="kpi-card">
                    <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
                    <p class="kpi-title">
                        18.3k
                    </p>
                    <p class="kpi-description">
                        Quam vulputate dignissim suspendisse in est ante in nibh. Faucibus nisl tincidunt eget nullam non nisi est sit amet
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- Catalog Search Box -->
    <section class="container">
        <!-- Search box card -->
        <div class="search-card">
            <h2 class="search-card-title">
                What data are you looking for?
            </h2>
            <div class="search-card-container">
                <ods-searchbox class="search-card-searchbox"
                               form-id="search-form"
                               translate="placeholder"
                               placeholder="Search for a dataset">
                </ods-searchbox>
                <button type="submit" form="search-form" class="search-card-submit-button">
                    Search
                </button>
            </div>
        </div>
    </section>
    <!-- Image cards with links -->
    <section class="container">
        <h2 class="home-subtitle">
            Title for the best part with photos
        </h2>
        <div class="row">
            <div class="col-md-4">
                <!-- Image card -->
                <a href="#"
                   class="image-card image-card-mobility">
                    <div class="image-content">
                        <h3 class="image-title">
                            Mobility
                        </h3>
                        <p class="image-description">
                            Quam vulputate dignissim suspendisse in est ante in nibh. Faucibus nisl tincidunt eget nullam non nisi est sit amet.
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <!-- Image card -->
                <a href="#"
                   class="image-card image-card-garden">
                    <div class="image-content">
                        <h3 class="image-title">
                            Garden
                        </h3>
                        <p class="image-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <!-- Image card -->
                <a href="#"
                   class="image-card image-card-gastronomy">
                    <div class="image-content">
                        <h3 class="image-title">
                            Gastronomy
                        </h3>
                        <p class="image-description">
                            Massa id neque aliquam vestibulum. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <!-- Image card -->
                <a href="#"
                   class="image-card image-card-sport">
                    <div class="image-content">
                        <h3 class="image-title">
                            Sport
                        </h3>
                        <p class="image-description">
                            Sed augue lacus viverra vitae congue. Neque egestas congue quisque egestas diam in arcu.
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <!-- Image card -->
                <a href="#"
                   class="image-card image-card-culture">
                    <div class="image-content">
                        <h3 class="image-title">
                            Culture
                        </h3>
                        <p class="image-description">
                            Integer malesuada nunc vel risus commodo viverra maecenas. Sem et tortor consequat id porta.
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <!-- Image card -->
                <a href="#"
                   class="image-card image-card-education">
                    <div class="image-content">
                        <h3 class="image-title">
                            Education
                        </h3>
                        <p class="image-description">
                            Euismod lacinia at quis risus sed vulputate odio. Parturient montes nascetur ridiculus mus mauris vitae.
                        </p>
                    </div>
                </a>
            </div>
        </div>
    </section>
    <section class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- Content card -->
                <div class="content-card">
                    <h2 class="content-card-title">
                        Title Map #1
                    </h2>
                    <ods-dataset-context context="ctx"
                                         ctx-domain="userclub"
                                         ctx-dataset="base-nationale-des-lieux-de-covoiturage-en-france"
                                         ctx-parameters="{'refine.reg_name':'Pays de la Loire'}">
                        <ods-map context="ctx" scroll-wheel-zoom="false" basemap="jawg.streets"></ods-map>

                    </ods-dataset-context>
                </div>
            </div>
            <div class="col-md-8">
                <!-- Content card -->
                <div class="content-card">
                    <h2 class="content-card-title">
                        Title Chart #1
                    </h2>
                    <ods-dataset-context context="ctx"
                                         ctx-domain="userclub"
                                         ctx-dataset="base-nationale-des-lieux-de-covoiturage-en-france"
                                         ctx-parameters="{'timezone':'Europe/Berlin'}">
                        <ods-chart single-y-axis="true" scientific-display="true" labels-x-length="20" align-month="true">
                            <ods-chart-query context="ctx" field-x="reg_name" maxpoints="0" sort="serie1-1">
                                <ods-chart-serie expression-y="spot_size" chart-type="bar" function-y="SUM" color="#EC643C" scientific-display="true">
                                </ods-chart-serie>
                            </ods-chart-query>
                        </ods-chart>

                    </ods-dataset-context>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <!-- Content card -->
                <div class="content-card">
                    <h2 class="content-card-title">
                        Title Map #2
                    </h2>
                    <ods-dataset-context context="ctx"
                                         ctx-domain="userclub"
                                         ctx-dataset="base-nationale-des-lieux-de-covoiturage-en-france"
                                         ctx-parameters="{'refine.reg_name':'Pays de la Loire'}">
                        <ods-map context="ctx" scroll-wheel-zoom="false" basemap="jawg.streets"></ods-map>

                    </ods-dataset-context>
                </div>
            </div>
            <div class="col-md-4">
                <!-- Content card -->
                <div class="content-card">
                    <h2 class="content-card-title">
                        Title Chart #2
                    </h2>
                    <ods-dataset-context context="ctx"
                                         ctx-domain="userclub"
                                         ctx-dataset="base-nationale-des-lieux-de-covoiturage-en-france"
                                         ctx-parameters="{'timezone':'Europe/Berlin'}">
                        <ods-chart single-y-axis="true" scientific-display="true" labels-x-length="20" align-month="true">
                            <ods-chart-query context="ctx" field-x="reg_name" maxpoints="0" sort="serie1-1">
                                <ods-chart-serie expression-y="spot_size" chart-type="bar" function-y="SUM" color="#EC643C" scientific-display="true">
                                </ods-chart-serie>
                            </ods-chart-query>
                        </ods-chart>

                    </ods-dataset-context>
                </div>
            </div>
        </div>
    </section>
    <section class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- Most Popular Datasets -->
                <h2 class="home-subtitle">
                    Most popular data
                </h2>
                <ods-most-popular-datasets context="catalog"></ods-most-popular-datasets>
            </div>
            <div class="col-md-4">
                <!-- Last modified datasets -->
                <h2 class="home-subtitle">
                    Last updated data
                </h2>
                <ods-last-datasets-feed context="catalog"></ods-last-datasets-feed>
            </div>
            <div class="col-md-4">
                <!-- Twitter feed -->
                <h2 class="home-subtitle">
                    On twitter
                </h2>
                <div class="twitter-timeline-container">
                    <!-- To change the Twitter profile to display go to https://publish.twitter.com/# -->
                    <a class="twitter-timeline" data-height="392" href="https://twitter.com/Opendatasoft?ref_src=twsrc%5Etfw">Tweets by Opendatasoft</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                </div>
            </div>
        </div>
    </section>
</ods-catalog-context>

/* ==========================================================================
   Cards
   ========================================================================== */
/**
 * Styling for the different types of cards:
 * - Colored Card
 * - Content card
 * - Search box card
 * - KPI card
 * - Image card
 */
/* Variables & Shared classes
   ========================================================================== */
:root {
    --secondary-color: #142E7B;
}
.text-center {
	text-align: center;
}
.centered-card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
/* Colored Card (Basic card)
   ========================================================================== */
.color-card {
	background-color: var(--links); /* Background color for IE */
	background-color: var(--secondary-color);
	color: #FFFFFF;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
	text-decoration: none;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
}
.color-card:hover,
.color-card:focus {
	text-decoration: none;
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
            box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.color-card-icon {
	font-size: 2rem;
	margin-bottom: 13px;
}
.color-card-picto {
	width: auto;
	height: 56px;
	margin-bottom: 13px;
	max-width: 100%;
}
.color-card-title {
	color: inherit;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	max-width: 100%;
}
.color-card-description {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	color: inherit;
	margin-top: 13px;
	margin-bottom: 26px;
	max-width: 100%;
}
.color-card-link {
	color: inherit;
	font-weight: bold;
	margin-top: auto;
	max-width: 100%;
}
/* Content Card
   ========================================================================== */
.content-card {
	background-color: var(--boxes-background);
	padding: 26px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.content-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 26px;
	max-width: 100%;
}
.content-card-icon {
	color: var(--highlight);
	font-size: 2rem;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-link {
	color: var(--links);
	font-weight: bold;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
	opacity: 1;
	max-width: 100%;
}
.content-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.content-card-button {
	color: var(--highlight); /* Color for IE */
	color: var(--secondary-color);
	border: 1px solid var(--highlight); /* Border color for IE because it doesn't support CSS variables. */
	border: 1px solid var(--secondary-color);
    background: transparent;
	display: inline-block;
	text-align: center;
	font-size: .867rem;
    border-radius: 4px;
    padding: .5rem 1.15rem;
    text-decoration: none;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.content-card-button:hover {
	background-color: var(--highlight); /* Color for IE */
	background-color: var(--secondary-color);
	color: #FFFFFF;
	text-decoration: none;
}
/* Search Box Card
   ========================================================================== */
.search-card {
	background-color: rgba(0,0,0,.1);
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	text-align: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	text-align: center;
}
.search-card-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
.search-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
}
.search-card-searchbox {
	margin-bottom: 0;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
}
.search-card-searchbox .odswidget-searchbox__box {
	font-size: 1rem;
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 8px 13px;
    border-radius: 4px 0 0 4px;
    border: none;
    margin: 0 auto;
}
.search-card-submit-button {
	border: none;
	background-color: var(--highlight);
	color: #FFFFFF;
	font-size: .866rem;
	font-weight: bold;
	text-align: center;
	padding: 8px 12px;
	border-radius: 0 4px 4px 0;
	-webkit-transition: opacity .2s;
	-o-transition: opacity .2s;
	transition: opacity .2s;
}
.search-card-submit-button:hover {
	text-decoration: none;
	opacity: .7;
}
/* KPI Card
   ========================================================================== */
.kpi-card {
	background-color: var(--boxes-background);
	height: 100%;
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	text-align: center;
}
.kpi-icon {
	color: var(--highlight);
	color: var(--secondary-color);
	font-size: 4rem;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.kpi-title {
	font-weight: normal;
	color: var(--highlight);
	font-size: 3.2rem;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.kpi-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	max-width: 100%;
}
/* Image Card
   ========================================================================== */
.image-card {
	background-color: rgba(0,0,0,.1);
	background-color: var(--secondary-color);
	color: #FFFFFF;
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	min-height: 300px;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	text-align: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
	text-decoration: none;
}
.image-card:hover,
.image-card:focus {
	text-decoration: none;
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
            box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.image-title {
	color: inherit;
	font-size: 1.733rem;
	line-height: 2.26;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 13px;
}
.image-description {
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: bold;
	margin: 0;
}
/* Image card backgrounds
   ========================================================================== */
/**
 * - Replace the background image url.
 * - Change the class name to something related to your project.
 */
.image-card-mobility {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('https://discovery.opendatasoft.com/assets/theme_image/mobility-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/mobility-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/mobility-bg.jpg');
}
.image-card-garden {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('https://discovery.opendatasoft.com/assets/theme_image/garden-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/garden-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/garden-bg.jpg');
}
.image-card-gastronomy {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('https://discovery.opendatasoft.com/assets/theme_image/gastronomy-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/gastronomy-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/gastronomy-bg.jpg');
}
.image-card-sport {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('https://discovery.opendatasoft.com/assets/theme_image/sport-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/sport-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/sport-bg.jpg');
}
.image-card-culture {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('https://discovery.opendatasoft.com/assets/theme_image/culture-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/culture-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/culture-bg.jpg');
}
.image-card-education {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))), url('https://discovery.opendatasoft.com/assets/theme_image/education-bg.jpg');
	background-image: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/education-bg.jpg');
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://discovery.opendatasoft.com/assets/theme_image/education-bg.jpg');
}
/* ==========================================================================
   Homepage Styles
   ========================================================================== */
/*
The CSS rules below will only be applied to the HTML used in the </> HTML tab
and will not be applied to other pages of your platform.
The 'home-' prefix is used for classes that belong to this page only. This makes it easier
to understand which classes are used here and which ones are in the Platform Theme Stylesheet.
*/
/* Shared Styles
========================================================================== */
/*
These styles are used by different elements in the home page
*/
main {
    /* Overrides an existing CSS rule so the banner image can be "edge-to-edge" */
    margin: 0;
}
@media screen and (min-width: 992px) {
	.row-equal-height {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin-bottom: 20px;
	}
	/* Fix for early content wrapping in Safari*/
	.row-equal-height:before,
	.row-equal-height:after {
		content: normal;
	}
}
.home-subtitle {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-bottom: 20px;
}
/* Header Image
========================================================================== */
.home-header {
	margin-bottom: 20px;
    /* Change this value to make the background image taller or smaller */
    height: 350px;
    /* Background color before image loads */
    background-color: var(--highlight);
    background-size: cover;
    /* You can replace the background-image by uploading an image to the portal assets
    and replacing the text in simple quotes below or use the URL of an image on the web */
    background-image: url('https://discovery.opendatasoft.com/assets/theme_image/header-bg.jpg');
    /* Position of the background-image on x y axis. Change these values to
    modify where the image is centered.
    */
    background-position: center center;
}
/* Home welcome card
========================================================================== */
.welcome-card {
	background-color: var(--highlight);
	color: #FFFFFF;
	margin-top: -90px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.welcome-card-title {
	color: inherit;
	font-size: 2.36rem;
	line-height: 1.5;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.welcome-card-description {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	color: inherit;
	margin-top: 13px;
	margin-bottom: 26px;
	max-width: 100%;
}
@media screen and (min-width: 992px) {
	.welcome-card-description {
		margin-bottom: 0;
	}
}
.welcome-card-link {
	color: inherit;
	font-weight: bold;
	margin-top: auto;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
	opacity: 1;
	max-width: 100%
}
.welcome-card-link .fa {
	position: relative;
	left: 0;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
}
.welcome-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.welcome-card-link:hover .fa {
	left: 3px;
}
@media screen and (min-width: 992px) {
	.welcome-card {
		height: 130%;
		position: relative;
		top: -30%;
		margin-top: 0;
		margin-bottom: 0;
	}
}
/* Most Popular / Last Updated datasets section
========================================================================== */
.odswidget-most-popular-datasets__datasets,
.odswidget-last-datasets-feed__datasets {
	margin-top: 0;
	margin-bottom: 20px;
}
.odswidget-most-popular-datasets__dataset,
.odswidget-last-datasets-feed__dataset {
    padding: 13px;
    background-color: #FFFFFF;
    border-radius: 4px;
	margin-bottom: 13px;
}
.odswidget-most-popular-datasets__theme-picto,
.odswidget-last-datasets-feed__theme-picto {
	margin-top: 0;
}
.odswidget-most-popular-datasets__dataset-details,
.odswidget-last-datasets-feed__dataset-details {
	margin-left: 46px;
}
.odswidget-most-popular-datasets__dataset-details-title,
.odswidget-last-datasets-feed__dataset-details-title {
	font-size: 1rem;
}
.odswidget-most-popular-datasets__dataset-details-title a,
.odswidget-last-datasets-feed__dataset-details-title a {
	color: var(--titles);
}
.odswidget-most-popular-datasets__dataset-details-count,
.odswidget-last-datasets-feed__dataset-details-modified {
	opacity: .8;
	border-bottom: none;
	cursor: default;
}
.odswidget-most-popular-datasets__dataset-details-count .fa,
.odswidget-last-datasets-feed__dataset-details-modified .fa {
	display: none;
}
.twitter-timeline-container {
	margin-bottom: 20px;
}