/*------------- POLICES ---------------*/
@font-face {
  font-family: 'KanitRegular';
  src: url('../fonts/Kanit/Kanit-Regular.ttf');
}
@font-face {
    font-family: 'KanitSemiBold';
    src: url('../fonts/Kanit/Kanit-SemiBold.ttf');
}
@font-face {
    font-family: 'KanitMedium';
    src: url('../fonts/Kanit/Kanit-Medium.ttf');
}
@font-face {
    font-family: 'CreteRoundRegular';
    src: url('../fonts/Crete_Round/CreteRound-Regular.ttf');
}
@font-face {
    font-family: 'CreteRoundItalic';
    src: url('../fonts/Crete_Round/CreteRound-Italic.ttf');
}



html, body{
  height:100%;
  margin:0;
    background-color:#FFFFFF;
}
body {
    font-family: 'KanitRegular';
    font-size: 20px;
}
/*
a{
	text-decoration:none; 
	color:#000000;
}*/
/* ----------------------------------------*/
/* -------------- header ------------------*/
/* ----------------------------------------*/
.header{
    position:fixed;
    top:0;
    left:0;
    width:calc(100% - 30px);
    padding-top:20px;
    padding-left:15px;
    padding-bottom:20px;
    padding-right:15px;
    background-color:#FFFFFF;
    display: flex;
    justify-content:space-between;
}
.header-logo{
    background-image:url('../imgs/logo-header.svg');
    width: 210px;
    height: 35px;
    background-size: contain;
    background-repeat:no-repeat;
    display:inline-block;
    margin:5px auto;
    cursor:pointer;
}

.header-burger{
    background-image:url('../imgs/btn_burger_resp.svg');
    width:40px;
    height:40px;
    background-size: contain;
    background-repeat:no-repeat;
    display:inline-block;
    cursor:pointer;
}
#header-menu-container{
    display:none;
    position:absolute;
    /* left: 250px; */
    width: calc(100% - 30px);
    top: 80px;
    border-style: solid;
    border-color: #FF0000;
    border-width:thin;
    background-color: #FFFFFF;

}
.header-menu{
    font-family:KanitSemiBold;
    font-size: 24px;
    line-height: 48px;
    margin-left:30px;
    cursor:pointer;
}
.header-menu .active{
    color:#5a78fc;
}


.header-lang{
    background-image:url('../imgs/btn_lang_en.svg');
    width:40px;
    height:40px;
    background-size: contain;
    background-repeat:no-repeat;
}
.toggle-submenu{

}

.header-submenu{
    font-size: 0.9em;
    line-height: 2em;
    padding: 30px;
    background-color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family:KanitMedium;
    display:none;
    white-space: nowrap
}
.ch-submenu{
    transition-property: transform;
    transition-duration: 0.5s;
    margin-left:5px;
}


.header-subsubmenu{
    font-size: 0.9em;
    line-height: 2em;
    padding: 20px;
    background-color: #FFFFFF;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family:KanitMedium;
    display:none;
    white-space: nowrap
}
.ch-subsubmenu{
    transition-property: transform;
    transition-duration: 0.5s;
    margin-left:5px;
}
/* -- specific mobile ------ */
#header-mobile-nav{
    position:fixed;
    top:0px;
    left:60px;
    background-color:#FFFFFF;
    right:0px;
    height:80px;
    text-align:center;

    display:none;
}
#header-house{
    background-image: url(../imgs/bn_home_resp.svg);
    background-size: contain;
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    position:fixed;
    top:15px;
    right:10px;
    cursor:pointer;
}
#header-mobile-title{
    font-family: KanitSemiBold;
    font-size:1em;
    color:#5a78fc;
    width:calc(100% - 50px);
    line-height:1em;
    padding-top:20px;
    padding-bottom:5px;
}
#header-mobile-subtitle{
    font-family: KanitRegular;
    font-size:1em;
    color:#5a78fc;
    width:calc(100% - 50px);
    line-height:1em;
}
/*
.sidebar{
    display: table-cell;
    vertical-align: top;
    background-image: url(../imgs/visuel_grid_multicolor.svg);
    width: 100px;
    background-size: 500%;
}
.menu-rotation-inside{
    background: #FFFFFF;
    transform: rotate( -90deg);
    transform-origin: bottom right;
    position: absolute;
    top: 20%;
    left: -220px;
}
.menu-rotation-title{
    font-family:KanitRegular;
    font-size:24px;
    width:100%;
    text-align:center;
}
.menu-rotation-subtitle{
    font-family:KanitRegular;
    font-size:18px;
    width:100%;
    text-align:center;
}*/
/* ----------------------------------------*/
/* -------------- footer ------------------*/
/* ----------------------------------------*/

.footer{
    width:calc(100% - 30px);
    color:#FFFFFF;
    background-color: #000;
    padding:15px;
    display: flex;
    justify-content:space-between;
    font-size:0.5em;
}
.footer-item{
}
.footer-item a{
    text-decoration:none;
    color:#FFFFFF;
}
.footer-item img{
    width:80px;
}
.footer-img{
    /*height:30px;*/
}
/* -- specific mobile ------ */
#footer-mobile-space{
    height:50px;
    width:100%;
    display:none;
}
#footer-mobile-nav{
    position:fixed;
    bottom:0px;
    left:0px;
    background-color:#FFFFFF;
    right:0px;
    height:50px;
    text-align:center;
    display:none;

    border-top: solid;
    border-width: thin;
    border-color: #5a78fc;
}
#footer-left{
    background-image: url(../imgs/chevron-left.svg);
    background-size: contain;
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}
#footer-right{
    background-image: url(../imgs/chevron-right.svg);
    background-size: contain;
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    position:absolute;
    top:0px;
    right:0px;
    cursor:pointer;
}
#footer-mobile-title{
    font-family: KanitRegular;
    font-size:1em;
    color:#5a78fc;
    width:calc(100% - 20px);
    line-height:1em;
    padding:10px;
    padding-top: 15px;
}
/* ----------------------------------------*/
/* -------------- sidebar ------------------*/
/* ----------------------------------------*/
.sidebar{
    padding-bottom: 1em;
    position: fixed;
    height: 100%;
    top: 0px;
    width: calc(100% - 0.5em);
    pointer-events: none;
}
.site-navigation{
    padding-left: 20px;
    max-height: 80vH;
    margin-top: 14vh;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;

}
.bgwhite{
    background-color: #FFFFFF;
}
.main-navigation{
    display:none;
}
.main-navigation ul {
    list-style: none;
    margin-left: 0;
    padding:0px;
    width:100%;
    position:relative;

}
.main-navigation ul li {
    position:relative;
    min-height: 2em;
    cursor:pointer;
}
.dropdown-toggle{
}

.sub-menu{
    max-height:0px;
    transition: 150ms all ease-in;
    overflow:hidden;
}
.sub-menu li {
    line-height: 1em;
    font-size: 0.9em;
    outline: none;
    margin-left:30px;
    min-height: 32px;

}

.sub-menu li:hover {/* .sub-menu li .i18:hover */
    /*background:rgba(0,255,0,0.3);*/
    font-weight:bold;
    color:#ae5000;
}

.sub-menu li:first-child {
    margin-top:15px;
}
.sub-menu .active{
    color:#5a78fc;
    font-weight:bold;
}
.chevron{
    background-image: url(../imgs/keyboard_arrow_down.png);
    width: 20px;
    height: 42px;
    background-size: 100% auto;
    background-position: center center;
    display: inline-block;
    background-repeat: no-repeat;
    position: absolute;
    top: -5px;
    right: 10px;
    transition: 150ms all ease-in;
    pointer-events:none;
}

.menu-on {
    font-weight: bold;
    border-left-style: solid;
    border-color: #4FD000;
    border-width: 5px;
    padding-left: 5px;
    padding-top: 5px;
    color: #5a78fc;
}
/* ----------------------------------------*/
/* -------------- general ------------------*/
/* ----------------------------------------*/
.interactive{
    cursor:pointer;
}
.local-contain {
    margin-top: 7vh;
    margin-left:0px;

}
.contain{
    padding: 1em;
    width: calc(100% - 2em);
    position: relative;
}
.contain-left{

    width:calc(100% - 40px);
    text-align:center;

    padding:20px;
    padding-top: 100px;
}
.contain-left img{
    width:80%;
    max-width:300px;
}
.contain-right{
    width:calc(100% - 40px);

    padding:20px;


}

.contain-one{


    padding:30px;
    padding-top: 100px;


    max-width:800px;
    margin:0 auto;

}
.legende{
    background-image: url(../imgs/info.svg);
    background-repeat: no-repeat;
    background-size: 15px 25px;
    background-position: 0px 8px;
    padding: 10px;
    padding-left: 20px;

    background-color: #FFFFFF;
    font-size: 14px;
    font-style: italic;
    width: fit-content;
    margin: 0 auto;
}

.legende-img{

    background-color: #FFFFFF;
    font-size: 14px;
    font-style: italic;
    width: 100%;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;

}
.title-part{
    font-family:CreteRoundItalic;
    font-size:18px;
    margin-bottom:2em;

}
.text{
    font-size:16px;
    margin-bottom:1.5em;
}
.focus{
    font-weight:bold;
    color:#5a78fc;
}
.center{
    text-align:center;
}
#next-page{
    margin:0 auto;
    margin-bottom:20px;
    font-size:12px;
}
#next-page img{
    width:50px;
}
.interactive-zone{
    /*background-image:url('../imgs/visuel_grid.svg');
    background-size:500px;*/
    text-align:center;
    padding: 1em;
    margin-top:1em;
    margin-bottom:1em;
    position:relative;
}
.quadril{
    background-image:url('../imgs/visuel_grid.svg');
    background-size:500px;
    position:absolute;
    top:0px;
    left:0px;
    right:0;
    bottom:0;
    opacity:0.5;

}

.iframecontainer{
    margin:0 auto;
    border:#5a78fc;
    border-style:solid;
    border-width:thin;
    border-radius:5px;
    width:80%;
    height:250px;
    background-color:#FFFFFF;
    text-align:center;
    position:relative;

}

.iframecontainer.mesure{
    height:500px;
}
.iframecontainer.operateur{
    height:340px;
}
.iframecontainer.cnot{
    height:450px;
}
.iframecontainer.exo{
    height:420px;
}
.iframecontainer.exosolution{
    height:550px;
}
.iframeqbit{
    margin-top:1em;
    border:none;
    width:220px;
    height:210px;
}

.iframemesure{

    width:340px;
    height:500px;
    border-style:none;
    /*border-width: thin;
    border-color:#999999;*/
    transform-origin: top left;
    transform: scale(0.8);

}

.iframeoperateur{
    border:none;
    width:300px;
    height:340px;
}

.iframeCNOT{
    border:none;
    width:320px;
    height:450px;

}
.iframeAR{
    border:none;
    width:100%;
    height:450px;
    margin-bottom:2em;

}
#btn-exo1{
    cursor: pointer;
}
.iframeExo{
    border:none;

    width:100%;
    height:420px;
    margin-bottom:2em;
    /*border-style:solid;
    border-width: thin;
    border-color:#999999;*/
    transform-origin: top left;

}

.iframeteleportation1{
    margin-top:1em;
    width:340px;
    height:260px;
    overflow:hidden;

}
#iframeteleportation2{
    margin-top:1em;
    width:340px;
    height:390px;
    overflow:hidden;

}
.iframefourier{
    border:none;
    width:100%;
    height:500px;
}
.todo{
    background-image:url('../imgs/btn_fleche.svg');
    background-repeat:no-repeat;
    background-size:35px 35px;
    padding:10px;
    padding-left:30px;
    display:inline-block;
    background-color:#FFFFFF;
    font-size:12px;
    margin-top:1em;
    font-style:italic;;


}
.todo.toread{
    background-image:url('../imgs/info.svg');
}
.button-launch{
    background-image:url('../imgs/btn_fleche.svg');
    background-repeat:no-repeat;
    background-size:35px 35px;
    padding:10px;
    padding-left:30px;
    display:inline-block;
    background-color:#FFFFFF;
    font-size:12px;
    margin-top:1em;
    font-style:italic;
    font-weight:bold;
    color:#5a78fc;
    border-style:solid;
    border-color:#5a78fc;
    border-width:thin;
    cursor:pointer;

    position: relative;
}
.button-launch a{
    text-decoration: none;
}
.button-launch a:visited{
    text-decoration: none;
}

.mob-button-launch{
    background-image:url('../imgs/btn_fleche.svg');
    background-repeat:no-repeat;
    background-size:35px 35px;
    padding:10px;
    padding-left:30px;
    display:inline-block;
    background-color:#FFFFFF;
    font-size:12px;

    cursor:pointer;
    position:absolute;
    top:5px;
    right:5px;

    height: 20px;
}
.maths{
    background-image:url('../imgs/info.svg');
    background-repeat:no-repeat;
    background-size:35px 35px;
    background-position:10px 10px;
    padding:10px;
    padding-left:60px;
    border:#FF0000;
    border-style:solid;
    border-width:thin;
    font-family:CreteRoundItalic;
    font-size:14px;
    margin-top:1em;
    margin-bottom:1em;

}

.reserve{
    margin-top:1em;
    margin-bottom:1em;
    font-style:italic;
    font-weight:bold;
    color:#5a78fc;
}

.imgmid{
    width:50%;
    margin-top:2em;
    margin-bottom:2em;
}

.imgmidshor{
    width:100%;
    margin-top:2em;
    margin-bottom:2em;
}
.imgdefault{
    max-width:100%;
    margin-top:2em;
    margin-bottom:2em;
}

#exo1-solve{
    margin-top:2em;
    display:none;
}
/* ----------------------------------------*/
/* -------------- home ------------------*/
/* ----------------------------------------*/
.home-part1{
    background-image:url('../imgs/visuel_supperposition1.svg');
    background-size: cover;
    background-repeat:no-repeat;
    text-align:center;
    width:calc(100% - 30px);
    margin-top:50px;
    padding-top:100px;
    padding-left:15px;
    padding-right:15px;
    position:relative;
}
.home-welcome{
    font-size:1.6em;
}
.gradient-background{
    /* dégradé radial */

    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+49&1+0,0+49 */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.home-part1-content{
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.big-title{
    padding:30px;
    width:calc(100% - 60px);
    max-width:800px;
    margin:0 auto;
}
.big-title img{
    width:100%;
}
.home-more{
    padding:30px;
    font-size:0.7em;
}
.home-title{

    position:relative;
    text-align:center;
    font-size:1.2em;
    font-weight:bold;
    padding:30px;
}
.home-part2{
    text-align:center;
    width:100%;
    max-width:1200px;
    position:relative;
    margin:0 auto;
}
.home-left{
    width:100%;
    background-image:url('../imgs/visuel_grid.svg');
    background-size: 400px 400px;
}
.home-left-text{
    margin:30px;
    background-color:#FFFFFF;
    padding:2px;
    font-size:0.8em;
    text-align:left;
}

.home-right{
    width:100%;
}
.home-buttons{
    text-align:center;
    margin:30px auto;
}
.home-slider{
    position:relative;
    width: calc(100% - 0px);
    height:500px;
    overflow:hidden;


}
.slider-item{
    position:absolute;
    left:calc(50% - 40%);
    width:80%;
}
.slider-text{
    font-size:0.7em;
}
.slider-img{
    width:100%;
    background-color:#000000;
    text-align:center;
}
.slider-img img{
    max-width:100%;
    max-height:300px;
}
.slider-item:first-child{
    left:calc(50% - 500px - 350px );
}
.slider-item:nth-child(2){
    left:calc(50% - 250px);
}
.slider-item:nth-child(3){
    left:calc(50% + 250px + 100px);
}
#slider-previous{
    position:absolute;
    top:30%;
    left:calc(50% - 40% - 30px);
    font-size:1.5em;
}
#slider-next{
    position:absolute;
    top:30%;
    left:calc(50% + 40% + 10px);
    font-size:1.5em;
}
.home-last-part{
    width:100%;
    color:#FFFFFF;
    background-color: #000;
    text-align:center;
    position:relative;
}

.home-last-part-title{

    position:relative;
    text-align:center;
    font-size:1.2em;
    font-weight:bold;
    padding:30px;
}
.home-last-part-left{
    display:none;
}
.home-last-part-left img{
    width:50%;
    max-width:200px;
    margin-left:30px;
}
.home-last-part-right{
    width:80%;
    height:200px;
    background-image:url('../imgs/visuel_grid-green.svg');
    background-size:cover;
    margin-left:20%;
}
.home-last-part-text{
    margin-top:10px;
    margin-right:30px;
    margin-bottom:30px;
    margin-left:-25%;
    background-color:#FFFFFF;
    padding:30px;
    font-size:0.8em;
    text-align:center;
    width:calc(80% - 30px);
    color:#000000;
}

.home-last-part-text img{
    width:30px;
}

#go-project{
    cursor:pointer;
}


/* --------------------------------------------------------- */
/* ----- algo --- */
/* --------------------------------------------------------- */
#container-algo{
    position:fixed;
    top:0px;
    left:0px;
    text-align:center;
    width:100%;
    height:100%;
    transition: 150ms all ease-in;
    transform:scale(0);
    visibility: hidden;
}

.container-iframe{

    width:calc(100% - 20px);
    max-width:1100px;
    height:calc(100% - 20px);
    max-height:768px;
    margin:20px auto;
    position:relative;
}
.iframe-title{
    background-color: #5A78FC;
    width: calc(100% - 20px);
    color: #FFFFFF;
    height: 30px;
    text-align: left;
    padding-left: 20px;

}
.container-iframe-shor{

    width:calc(100% - 20px);
    max-width:1410px;
    height:calc(100% - 20px);
    max-height:768px;
    margin:20px auto;
    position:relative;
}


.iframealgo{
    border:none;
    width:100%;
    height:calc(100% - 30px);
}
#close-algo{
    position:absolute;
    top:0px;
    left:0px;
    background-color:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
}
#btn-close-algo{

    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top:5px;
    right:5px;
    cursor:pointer;
    color:#FFFFFF;
}
.questions{
    margin-top:30px;
    width: calc(100% - 60px);
    background-color: #5A78FC;
    background-image: url(../imgs/icon-chat.svg);
    background-repeat: no-repeat;
    background-position: 30px 20px;
    color: #FFFFFF;
    padding: 30px;
    padding-top: 80px;

}
.questions .focus{
    color:#FFFFFF;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 150px;
    height: 202px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    display:inline-block;
    cursor:pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    /*transform: rotateY(180deg);*/
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

/* Style the back side */
.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card img{
    width:100%;
}

/* --------------------------------------------------------- */
/* ----- more --- */
/* --------------------------------------------------------- */
.askThu{
    font-family:CreteRoundItalic;
    font-size:1em;
    margin-top:2em;
    margin-bottom:1.5em;
    font-weight:bold;
}
.citationThu{
    font-family:CreteRoundItalic;
    font-size:14px;
    margin-bottom:1.5em;
}
.chapo{
    position:relative;
    padding-top: 15px;
    padding-right: 15px;
}
.chapo-border{
    position:absolute;
    top:0px;
    right:0px;
    left:15px;
    bottom:15px;
    border-style:solid;
    border-width:thin;
    border-color:#5A78FC;

}
.chapo-content{
    position: relative;
    background-color: #FB0D1B;
    font-family: CreteRoundRegular;
    color: #FFFFFF;
    font-size: 14px;
    text-align: left;
    padding: 20px;
    line-height: 20px;

}
.title-article{
    font-family: CreteRoundItalic;
    font-size: 18px;

}
.article-title{
    font-family:CreteRoundItalic;
    font-weight:bold;
    font-size:20px;
    margin-bottom:1.5em;
}
.copy{
    font-size:12px;
    font-style: italic;
    margin-bottom:1em;
}
/* --------------------------------------------------------- */
/* ----- timeline --- */
/* --------------------------------------------------------- */
#panel-container{
    width:100%;
    height:100%;
    overflow:auto;
    /*background-color:#FFFF00;*/
    display:none;
}
#mobile-panel-container{

}
.panel{

}
#oc_pane_timeline{
    width:100%;
}
.testColor{

    background-color: #FB0D1B;
    color:#FFD700;
    font-family: KanitRegular;
    font-size:20px;
}
#poster{
    position:absolute;
    top:250px;
    left:0px;
    text-align:center;
    width:150px;
    font-family: KanitRegular;
    background-color:#FFFFFF;
    display:none;

    border-style:solid;
    border-width:1px;
    border-color:#5A78FC;

    padding:5px;

}
#poster-img{
    width:75px;
    height:75px;
    margin:0 auto;
    background-image: url('../imgs/timeline/vignette-bleu.png');
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:75px;
}
.mob-poster-img{
    width:75px;
    height:75px;
    margin:0 auto;
    overflow:hidden;
   /* background-image: url('../imgs/timeline/vignette-bleu.png');
    background-repeat:no-repeat;
    background-size:cover;*/
    border-radius:75px;
    display:inline-block;
}
.mob-poster-img img{
    width:100%;
}
#poster-img img{
    width:100%;
}
.poster-legende{
    width:calc(100% - 40px);
    /*border-top-style:solid;
    border-top-width:1px;
    border-top-color:#5A78FC;*/
    padding-left:20px;
    padding-right:20px;
}

.mob-poster-legende{
    display:inline-block;
    padding-left:20px;
    padding-right:20px;

    width:calc(100% - 40px - 90px);
    position:relative;
    top:-15px;
}
#poster-date{
    font-weight:bold;
    font-size:14px;
}

.mob-poster-date{
    font-weight:bold;
    font-size:14px;
}
#poster-text{
    font-size:12px;
}

.mob-poster-text{
    font-size:12px;
}
#cartel{
    position:absolute;
    top: 228px;
    display:none;
    border-style:solid;
    border-width:thin;
    border-color:#5A78FC;
    background-color:#FFFFFF;
    width:calc(100% - 80px);
    max-width:800px;
    z-index: 1;
    overflow:auto;
}
#cartel-img{
    background-image: url('../imgs/timeline/visuel-bleu-maximize.png');
    /*width:310px;*/
    height:220px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: 20px 20px;
}
.cartel-legende{
    display:table-cell;
    padding:20px;
    padding-right: 30px;
}
#cartel-title{
    font-family: CreteRoundItalic;
    font-size:20px;
    margin-bottom:20px;
}
#cartel-text{
    font-family: KanitRegular;
    font-size:0.8em;
    margin-bottom:20px;
}
#btn-close-cartel{
    font-size: 2em;
    position: absolute;
    top:-10px;
    right:5px;
    cursor:pointer;
    font-weight:normal !important;
    color: #000000;
}
#btn-see-article a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}
.timeline-legend{
    position:absolute;
    bottom:0px;
    font-size:0.8em;
}
.mob-blue{
    background-color:#5A78FC;
    color: #FFF;
}

.color-blue{
    color: #5A78FC;
}
.mob-red{
    background-color:#FB0D1B;
    color: #FFF;
}
.color-red{
    color: #FB0D1B;
}
.mob-green{
    background-color:#4FD000;
}
.color-green{
    color: #4FD000;
}
.mob-orange{
    background-color:#fb9008;
}
.color-orange{
     color: #fb9008;
 }
.mob-black{
    background-color:#FFFFFF;
}
.color-black{
    color: #000000;
}
.timeline-legend-blue::before {
    content: "•";
    color: blue;
}