@font-face {
    font-family: 'GothamBold';
    src: url(Fonts/Gotham/GothamBold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'GothamBook';
    src: url(Fonts/Gotham/Gotham-Book.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(Fonts/Roboto/Roboto-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    src: url(Fonts/Roboto/Roboto-Medium.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(Fonts/Roboto/Roboto-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: 'Playfair Display';
    src: url(Fonts/Playfair_Display/PlayfairDisplay-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'Playfair Display';
    src: url(Fonts/Playfair_Display/PlayfairDisplay-Regular.ttf);
    font-weight: 400;
}

body {
    font-size: 16px;
    /* background-image: url(../img/Mobile_Home_.jpg);
    opacity: 0.8; */
}

.isDisabled {
    color: currentColor;
    opacity: 0;
    text-decoration: none;
}

a{
    text-decoration: none;
    color: black;
}
a:hover{
    text-decoration: none;
    color: black;
}

.text-align-center {
    text-align: center;
}

.navbar{
    padding: 0;
}

.navbar-nav{
    margin-top: 33px;
    margin-right: 37px;
}

.nav-link {
    color: black;
    text-align: right;
}

.event.row {
    padding-bottom: 66px;
}

.nav-link {
    font-family: Roboto;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
}

.inscription-button {
    display: inline-block;
    background-image: url(../img/inscription.png);
    background-color: transparent;
    background-position : center center;
    background-repeat:no-repeat;
    width: 134px;
    height: 134px;
    color: white;
    text-align: center;
}

.inscription-button a:hover{
    color: white;
}

.follow-button {
    display: inline-block;
    background-image: url(../img/follow_notext.png);
    background-color: transparent;
    background-position : center center;
    background-repeat:no-repeat;
    width: 108px;
    height: 108px;
    color: white;
    text-align: center;
}

.follow-button a:hover{
    color: white;
}

.text-button-1{
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    line-height: 23px;
    margin: 0;
}

.text-button-2{
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    line-height: 17px;
    margin: 0;
}

.btn-link:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: white;
}

.btn-link:active, .btn-primary.active {
    color: white;
}

#follow.nav-link {
    font-family: Roboto;
    color: #000000;
    font-size: 12.5px;
    font-weight: 700;
}

#header {
    /* padding: 0;
    background-image: url(../img/header.png);
    background-repeat: no-repeat center center fixed;
    background-size: cover; */
    /* height: 0;
    padding-bottom: 45.13%; */
}


.header-content {
    max-width: 660px;
}

.header-content h1 {
    font-family: PlayfairDisplay;
    color: #000000;
    font-size: 44px;
    font-weight: 400;
}

.header-content h4 {
    font-family: PlayfairDisplay;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
}

.header-content span {
    font-size: 14px;
}

.header-content li {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.header-content p {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 26px;
}

.detail-btn{
    border-radius: 0px;
}

.detail-btn span {
    font-size: 10px;
}

.detail-btn.btn:hover, .detail-btn.btn:focus, .detail-btn.btn:active, .detail-btn.btn.active {
    color: white;
}

.header-btn span {
    font-size: 10px;
}

.header-btn.btn-dark{
    color: white;
    background-color: black;
    border-radius: 0px;
    border-color: black;
    font-size: 10px;
    font-family: 'Roboto';
    font-weight: 500;
    line-height: 10px;
}

.header-btn.btn-dark:before{
    content: '';
    width: 12px;
    height: 12px;
    background: black;
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translate(-50%, -2px) rotate(45deg);
}

.header-btn.btn-dark a{
    color: inherit;
}

#header .link {
    padding-top: 120px;
}

.circle-journee{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff6868;
}

.circle-formation{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffb400;
}

.circle-cafe{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ca2ecf;
}

.circle-job{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #78c8ce;
}

.circle-mail{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #9fde97;
}

#couleur1{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #8ab200;
}

#couleur2{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3fc0dc;
}


.header-btn.btn-outline-dark {
    color: black;
    border-radius: 0px;
    border-color: black;
}

#header-list {
    height: 28px;
    font-family: Roboto;
    color: #000000;
    font-size: 3.19px;
    font-weight: 700;
    transform: scale(4.393,4.393);
}

#header-text.p{
    font-family: Roboto;
    color: #000000;
    font-size: 18px;
    font-weight: 300;
    transform: scale(1.091,1.091);
}

.header-toc {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Pastille "Suivez la liste" */
.follow-pastille {
    margin-top: -75px;
    padding-right: 35px;
    position:relative;
    pointer-events: none;
}

.follow-pastille a {
    pointer-events: auto;
}

.border-dark {
    color: black;
    border-color: black;
}

.card {
    border: 0;
}

/* Zoom on pastilles when hovering */
img.hoverable:hover {
    transform: scale(1.1);
}

.event .card a:hover {
    color: #5b5b5b;
}

.event .card a:hover .card-header, 
.event .card a:hover .card-footer,
.event .card a:hover #special.card-footer {
    border-color: currentColor;
}

.event .card-header {
    padding-left: 0;
    font-size: 26px;
    font-family: 'Playfair Display';
    font-weight: 400;
    background-color: transparent;
    border-bottom: 1px solid black;
    line-height: 30px;
}

.event .card-body {
    padding: 0;
    height: 47px;
    font-size: 14px;
    font-family: 'Roboto', serif;
    font-weight: 700;
    line-height: 15px;
}

#event .date {
    font-family: Roboto;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
}

#event .category {
    font-family: Roboto;
    color: rgba(0, 0, 0, 0.76);
    font-size: 10px;
    font-weight: 700;
}

.event .card-footer {
    padding-left: 0;
    font-size: 14px;
    font-family: 'Roboto', serif;
    font-weight: 700;
    background-color: transparent;
    border-top: 1px solid black;
    border-bottom: 10px solid black;
    height: 57px;
}

.event-content{
    text-align: justify;
    padding-right: 1rem;
}

#toutagenda{
    color: #000000;
    font-family: 'PlayfairDisplay';
    font-size: 34px;
    font-weight: 400;
}

#evtpasse{
    color: #000000;
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
}

#special.card-footer {
    padding-left: 0;
    font-size: 14px;
    font-family: 'Roboto', serif;
    font-weight: 700;
    background-color: transparent;
    border-bottom: 10px solid black;
    height: 104px;
    line-height: 30px;
}

.services {
    padding-top: 100px;
}

.service {
    padding-bottom: 106px;
}

.service.container-fluid {
    margin: 0;
    background-color: #ECECEC;
}

.service h1 {
    font-size: 34px;
    font-family: 'Playfair Display';
    font-weight: 400;
}

.service.container {
    margin: 0;
    padding-top: 96px;
    background-color: #ECECEC;
}

.service .card {
    padding: 0;
    background-color: transparent;
}

.service .card-header {
    background-color: transparent;
    border: 0;
}

.service .card-body {
    line-height: 18px;
}

.service .card-body h1 {
    font-family: 'Roboto', serif;
    font-size: 20px;
    font-weight: 700;
}

.service .card-body p {
    font-family: 'Roboto', serif;
    font-size: 14px;
    font-weight: 500;
}

.service .card-link {
    color: #00AFCD;
    font-family: 'Roboto', serif;
    font-size: 14px;
    font-weight: 500;
}

.twitter {
    position: relative;
    background-color: #00396e;
    max-width: 1192px;
    line-height: 34px;
    padding-bottom: 90px;
}

.twitter h1 {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    color: #3fc5dc;
}

.twitter-text {
    font-family: 'Roboto', serif;
    font-size: 27px;
    font-weight: 300;
    color: #3fc5dc;
    margin: 0;
    overflow: hidden;
    height: 136px; /*line-height (34px) * number_of_line (4)*/
}

.twitter a {
    font-family: 'Roboto', serif;
    font-size: 27px;
    font-weight: 400;
    color: #3fc5dc;
}

.twitter li {
    font-family: 'Roboto', serif;
    font-size: 13px;
    font-weight: 700;
    color: #3fc5dc;
    border-right: 1px solid #00284d;
}

.twitter li:last-child {
    border-right: none;
}

.twitter li img {
    padding-right: 5px;
}

.twitter .share a {
    padding: 16px;
    font-family: 'Roboto', serif;
    font-size: 13px;
    font-weight: 700;
    color: #3fc5dc;
}

.twitter-hashtag a {
    font-family: 'Roboto', serif;
    font-size: 13px;
    font-weight: 700;
}

a.twitter-link {
  display: block;
}

a.twitter-author {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.twitter img.comma {
    position: absolute;
    top: 0px;
}

#twitterCarousel .carousel-indicators li {
    top: 100px;
}

#twitterCarousel .carousel-control-next, .carousel-control-prev {
    width: 5%;
    top: 100px;
}

.story {
    margin-top: 114px;
    margin-bottom: 100px;
    line-height: 18px;
}

.story h1 {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
}

.story p {
    font-family: 'Roboto', serif;
    font-size: 14px;
    margin: 0;
}

footer{
    background-color: black;
    font-family: 'Playfair Display', serif;
}

.footer {
    min-height: 300px;
}

footer p {
    font-size: 12px;
    color: #b6b6b6;
    vertical-align: bottom;
    line-height: 30px;
}

footer a {
    font-size: 17px;
    color: #b6b6b6;
}

footer .text-right a {
    font-size: 12px;
}
footer a:hover {
    color: #3fc5dc;
}

/* A part includes all the section display (full width) */
.part {
    padding-top: 18px; /* Specific top-padding for the first section since the header is bigger than the colorful background */
    padding-bottom: 50px;

    /* Default text style */
    font-family: Roboto;
    color: #000000;
    font-size: 16px;
    font-weight: 300;
    line-height: 22.915px;
    text-align: justify;
}

.section ~ .section .part {
    padding-top: 50px; /* Default top padding for non-first sections. */
}

/* Cycling background only for first level sections */
body > .section:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* A block in the centered and limited width div that is inside a part */
.block {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* A content is the div inside a block that should contain the text */
h2 + .content { /* Padded only for first-level sections */
    padding: 30px;
}

.content a {
    text-decoration: underline;
}

.content a:hover {
    color: #3fc5dc;
}

blockquote.content {
    margin: 0px; /* blockquote has default non-null bottom margin */
}

.content ul, .content ol {
    margin-bottom: 1rem;
}

/* Do not underline when link is represented by a download icon */
a.slideshow, a.download, a.video {
    text-decoration: none;
}

.download, .video {
    padding-left: 1.25rem;
    padding-right: 1rem;
}

.slideshow {
    padding-left: 1.1rem;
    padding-right: 0.79rem;
}

.slideshow img {
    height: 1.3rem;
    opacity: 0.4;
}

.video img {
    height: 0.95rem;
    opacity: 0.4;
}

.view {
    padding-right: 1.25rem;
}

.figure {
    display: block;
    margin-top: 50px;
    margin-bottom: 50px;
}

.figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    max-width: 100%; /* to limit width when using fixed size images */
}

.figure p.caption {
    text-align: center;
    font-size: 13px;
}

.greybgfig img {
  background-color: #666;
  background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%),
                    linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
}

/* Section title */
.toc {
    font-family: PlayfairDisplay;
    color: black;
    margin-top: 20px;
    margin-bottom: 20px;
}

h2.toc {
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
}

h2.toc:before {
    content: '/';
}

a.toc-backref {
    text-decoration: none;
}

a.toc-backref:hover {
    color: black;
}


/* Style of the description section */
.description {
}

/* Style of the program section */
.programme {
    background-image: url(../img/programme.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.programme .content {
    /* Reset content padding to have full-width day blocks */
    padding-left: 0px;
    padding-right: 0px;
}

.programme .toc, .programme .toc-backref {
    color: #98dad9;
}

.schedule{
    max-width: 820px;
    font-family: Roboto;
    font-weight: 300;
    font-size: 18px;
    line-height: 22px;
}

.schedule h3 {
    font-family: Roboto;
    font-weight: 700;
    font-size: 18px;
}

.day {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 37px;
    padding-bottom: 37px;
}

.day-color1{
    background-color: #aae0e2;
}

.day-color2{
    background-color: #98dad9;
}

.event-logo{
    padding-left: 1.25rem;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
}

.event-description{
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

.event-title{
    font-weight: 500;
    text-align: left;
}

.break-event{
    margin-bottom: 1rem;
}

.speaker {
    font-size: 14px;
    line-height: 16px;
}

/* Style of the organisation section */

/* Customize list of organizers */
.orga ul {
    list-style-type: none;
    -webkit-columns: 2 260px;
       -moz-columns: 2 260px;
            columns: 2 260px;
    text-align: left;
}

.orga li {
    max-width: 260px;
    margin-bottom: 1rem;
    break-inside: avoid;
}

.orga li:last-child {
    margin-bottom: 0px;
    padding-bottom: 1rem;
    border-bottom: solid 10px black;
}

/* Customize speaker for Café Calcul */
.orateur ul {

}

/* Job offer style */
.job_offers {
    max-width: 760px;
    margin-bottom: 76px;
}

.job_offers h1 {
    text-align: left;
    font-family: PlayfairDisplay;
    color: #000000;
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 28px;
}

.job_offers p {
    font-family: Roboto;
    color: #000000;
    font-size: 16px;
    font-weight: 300;
    line-height: 22.915px;
    text-align: justify;
}

div .job_offers_icons {
  margin-bottom: -15px;
}

.job_offers_icons img {
    height: 33px;
}

.job_offers_icons div {
    margin-bottom: 15px;
}

.job_form input:not([type=file]) {
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 4px;
}

.job_form .error {
    color: red;
}

.job_form a {
    text-decoration: underline;
}

.job_form p {
    text-align: left;
}

.mailing_list {
  max-width: 760px;
  margin-bottom: 76px;
}

.mailing_list h1 {
  text-align: left;
  font-family: PlayfairDisplay;
  color: #000000;
  font-size: 34px;
  font-weight: 400;
  margin-bottom: 28px;
}

.mailing_list p {
  font-family: Roboto;
  color: #000000;
  font-size: 16px;
  font-weight: 300;
  line-height: 22.915px;
  text-align: justify;
}

.mailing_list_form input:not([type=file]) {
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 4px;
}

.mailing_list_form .error {
  color: red;
}

.mailing_list_form a {
  text-decoration: underline;
}

.mailing_list_form p {
  text-align: left;
}


/* Archives style */
h1.year-separation {
    font-family: PlayfairDisplay;
    color: #000000;
    font-size: 34px;
    font-weight: 400;
    text-align: center;
}

hr.year-separation {
    width: 80%;
    border-color: black;
}

a.year-toc {
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 992px)
{
    .svg-navbar-brand {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%'><polygon points='0,0  192,0  204,155 0,240' /></svg>")  no-repeat;
        width: 204px;
        height: 257px;
        position: absolute;
    }

    .navbar-brand {
        margin-top: 35px;
        margin-left: 35px;
    }

    .logo {
        width: 95px;
        height: 82px;
    }

    .logo-txt{
        padding-top: 8px;
        color: #ffffff;
        font-size: 12.77px;
        font-weight: 400;
        font-family: GothamBook;
    }

    .logo-txt strong{
        color: #ffffff;
        font-size: 12.77px;
        font-weight: 700;
        font-family: GothamBold;
    }

    .header-border {
        border-right: 1px solid black;
    }

    .header-border:first-child {
        border-left: 1px solid black;
    }
}

@media (max-width: 992px)
{
    .svg-navbar-brand {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%'><polygon points='0,0  226,0  211,57 0,65' /></svg>")  no-repeat;
        width: 227px;
        height: 67px;
        position: absolute;
        /* background-color: black; */
    }

    .navbar-brand {
        margin-top: 9px;
        margin-left: 20px;
    }

    .navbar-toggler {
        margin-top: 11px;
        margin-right: 11px;
    }
    .logo {
        width: 40px;
        height: 36px;
    }

    .logo-txt{
        margin: 0;
        margin-left: 6px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 400;
        font-family: GothamBook;
        letter-spacing: 1.3px;
    }

    .logo-txt strong{
        color: #ffffff;
        font-size: 12.77px;
        font-weight: 700;
        font-family: GothamBold;
    }

}

@media (max-width: 576px) {
    .twitter h1 {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        color: #3fc5dc;
    }

    .twitter-text {
        font-family: 'Roboto', serif;
        font-size: 16px;
        font-weight: 300;
        color: #3fc5dc;
        margin: 0;
        overflow: hidden;
        line-height: 18px;
        height: 126px; /*line-height (18px) * number_of_line (7)*/
    }

    .twitter a {
        font-family: 'Roboto', serif;
        font-size: 16px;
        font-weight: 400;
        color: #3fc5dc;
    }
}

/* Tipue style (search)*/

#tipue_search_results_count
{
    font-family: PlayfairDisplay;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

.tipue_search_result
{
    padding-top: 25px;
}

.tipue_search_image_close
{
    display: none;
}

.tipue_search_content_title
{
    font-family: PlayfairDisplay;
    color: #000000;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 0.5rem;
    /* text-align: center; */
}

.tipue_search_content_url
{
    font-family: Roboto, serif;
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0.5rem;
    /* text-align: center; */
}

.tipue_search_content_url a {
    text-decoration: underline;
}

.tipue_search_content_url a:hover {
    color: #3fc5dc;
}

.tipue_search_content_text
{
    font-family: Roboto;
    color: #000000;
    font-size: 16px;
    font-weight: 300;
    line-height: 22.915px;
    text-align: justify;
}

.tipue_search_content_bold
{
    font-weight: 500;
}

#tipue_search_foot
{
     margin: 51px 0 21px 0;
}
#tipue_search_foot_boxes
{
    padding: 0;
    margin: 0;
    cursor: pointer;
}
#tipue_search_foot_boxes li
{
     display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

#tipue_search_foot_boxes li a
{
    padding: 10px 17px 11px 17px;
    border-radius: 3px;
    margin-right: 7px;
    text-decoration: none;
    text-align: center;
    transition: 0.2s;
    background-color: #f7f7f7;
    color: #666;
}

#tipue_search_foot_boxes li a:hover
{
    background: #252525;
    color: #ccc;
}

#tipue_search_foot_boxes li.current
{
    padding: 10px 17px 11px 17px;
    border-radius: 3px;
    margin-right: 7px;
    text-align: center;
    background: #252525;
    color: #ccc;
}

#tipue_search_input
{
    background: transparent;
    border: 0;
    text-align: center;
}

.search-btn.btn-white {
    color: black;
    background-color: white;
    border-radius: 0px;
    font-size: 13px;
    font-family: 'Roboto';
    font-weight: 500;
    line-height: 10px;
}

.search-btn span {
    font-size: 12px;
}

.detail {
    margin-bottom: 151px;
}

.detail a {
    text-decoration: none;
}

.savoirplus {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 0px;
}

.savoirplus a {
    text-decoration: none;
}

/* mesocenters list */
.markers_map {
  height: 500px;
  margin-bottom: 50px;
}

.meso .card {
    margin-bottom: 2em;
    margin-top: 2em;
}

.meso .card a:hover .card-header, 
.meso .card a:hover .card-footer,
.meso .card a:hover #special.card-footer {
    border-color: currentColor;
}

.meso .card-header {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
    border-bottom: 1px solid black;
    line-height: 30px;
}

.meso .card-header h4 {
    font-size: 26px;
    font-family:  'Roboto', serif;
    font-weight: 500;
}

/* location icon */
.meso .card-header h4 div {
    float: right;
}

.meso .card-header h4 div img {
    height: 1em;
}

/* meso description */
.meso .card-header p {
    margin: 0em 0em 0em 2em;
}

.meso .card-header .plus-minus {
  float: left;
  cursor: pointer;
  width: 1em;
  height: 1em;
  display: block;
  margin: 1px;
}

.meso .card-header .plus {
  background: url(../img/plus.png) no-repeat;
  background-size: 100%;
}

.meso .card-header .minus {
  background: url(../img/minus.png) no-repeat;
  background-size: 100%;
}

/* meso adminitrative description */
.meso .card-body {
    padding: 0px;
    font-size: 14px;
    font-family: 'Roboto', serif;
    font-weight: 300;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid black;
}

.meso .card-body .plus-minus {
    float: right;
    cursor: pointer;
    width: 1em;
    height: 1em;
    display: block;
    margin: 1px;
}

.meso .card-body .plus {
    background: url(../img/plus.png) no-repeat;
    background-size: 100%;
}

.meso .card-body .minus {
    background: url(../img/minus.png) no-repeat;
    background-size: 100%;
}

.meso .card-body img {
    height: 15px;
    vertical-align: text-top;
}

.meso .card-body p {
    padding: 0.2em;
    margin-bottom: 0px;
}

/* meso technical description */
.meso .card-footer {
    padding-left: 0;
    font-size: 14px;
    font-family: 'Roboto', serif;
    font-weight: 300;
    background-color: transparent;
    border-top: 0px solid black;
    border-bottom: 10px solid black;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2em;
    padding-bottom: 0;
}

.region h3 {
    margin: 3em 2em 1em 2em;
}

.meso .card-footer img {
    height: 20px;
    vertical-align: text-bottom;
}

.cluster {
  height: auto ;
  margin: 0em 0em 0em 0em;
}

.cluster .card {
  margin-bottom: 0em;
  margin-top: 0em;
}

.cluster .card a:hover .card-header, 
.cluster .card a:hover .card-footer,
.cluster .card a:hover #special.card-footer {
  border-color: currentColor;
}

.cluster .card-header {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  border-bottom: 0px solid black;
}

.cluster .card-header h4 {
  font-size: 18px;
  font-family: 'Roboto', serif;
  font-weight: 300;
}

/* location icon */
.cluster .card-header h5 div {
  float: right;
}

.cluster .card-header h5 div img {
  height: 1em;
}

/* meso description */
.cluster .card-header p {
  margin: 0em 0em 0em 0em;
}

/* cluster technical description */
.cluster .card-body {
  padding: 0px;
  font-size: 14px;
  font-family: 'Roboto', serif;
  font-weight: 300;
}

.cluster .card-body img {
  height: 15px;
  vertical-align: text-top;
}

.cluster .card-body p {
  margin-bottom: 0px;
}

/* cluster technical description */
.cluster .card-footer {
  padding-left: 0;
  font-size: 12px;
  font-family: 'Roboto', serif;
  font-weight: 300;
  background-color: transparent;
  border-top: 0px solid black;
  border-bottom: 0px solid black;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 0;
}

.region h3 {
  margin: 3em 2em 1em 2em;
}

.cluster .card-footer img {
  height: 20px;
  vertical-align: text-bottom;
}

.storage {
  height: auto ;
  margin: 0em 0em 0em 0em;
}

.storage .card {
  margin-bottom: 0em;
  margin-top: 0em;
}

.storage .card a:hover .card-header, 
.storage .card a:hover .card-footer,
.storage .card a:hover #special.card-footer {
  border-color: currentColor;
}

.storage .card-header {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  border-bottom: 0px solid black;
}

.storage .card-header h4 {
  font-size: 18px;
  font-family:  'Roboto', serif;
  font-weight: 300;
}

/* location icon */
.storage .card-header h5 div {
  float: right;
}

.storage .card-header h5 div img {
  height: 1em;
}

/* meso description */
.storage .card-header p {
  margin: 0em 0em 0em 0em;
}

/* cluster technical description */
.storage .card-body {
  padding: 0px;
  font-size: 14px;
  font-family: 'Roboto', serif;
  font-weight: 300;
}

.storage .card-body img {
  height: 15px;
  vertical-align: text-top;
}

.storage .card-body p {
  margin-bottom: 0px;
}

/* cluster technical description */
.storage .card-footer {
  padding-left: 0;
  font-size: 12px;
  font-family: 'Roboto', serif;
  font-weight: 300;
  background-color: transparent;
  border-top: 0px solid black;
  border-bottom: 0px solid black;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 0;
}

.region h3 {
  margin: 3em 2em 1em 2em;
}

.storage .card-footer img {
  height: 20px;
  vertical-align: text-bottom;
}

.dropdown {
    text-align: right;
    color: black;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
}


.dropdown p {
    height: calc(1rem + 1rem);
    padding: 0.5rem;
    margin: 0;
    transform: scale(1);
    transform-origin: right;
    opacity: 1;
    transition: opacity 0.132s, transform 0.132s, height 0.22s, padding 0.22s;
}

.dropdown .hidden {
    height: 0rem;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.dropdown p:hover,
.dropdown p:focus {
    transform: scale(1.2);
    transform-origin: right;
}