body {
    color: #231f20;
    min-width: 500px;
}
@font-face {
    font-family: champagne;
    src: url(../font/Champagne-Limousines-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: champagne;
    src: url(../font/Champagne-Limousines.ttf);
    font-weight: normal;
}
@font-face {
    font-family: sunbreath;
    src: url(../font/Sunbreath.ttf);
}

#pre-header {
    padding: 0;
    height: 14px;
}

#header {
    height: 110px;
    text-align: center;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: bold;
    font-family: champagne;
    padding-top: 26px;
}
#header-cube {
    height: 50px;
    width: 50px;
}

#footer {
    border-top: 1px solid #cccccc;
}
#footer-content {
    width: 100%;
    margin-top: 10px;
    min-height: 100px;
}

#content {
    margin-right: -15px;
    margin-left: -15px;
    border-right: 1px solid #cccccc;
}

#content-container {
    margin-right: -15px;
    margin-left: -15px;
}

.cube {
    border: #cccccc solid;
    border-width: 1px 0 0 1px;
    position: relative;
}

.cube-content {
    position: absolute;
    border: 1px solid #9c9c9c;
    top: -1px;
    left: -1px;
    z-index: 20;
}

.cube-colored {
    margin: 3%;
    width: 94%;
    height: 94%;
    background: #649caa;
}
.circle-colored {
    width: 45%;
    height: 45%;
    border-radius: 50%;
    border: 5px solid #649caa;
    position: absolute;
    z-index: 10;
}

.link-color {
    height: 7px;
    cursor: pointer;
    border-right: 4px solid white;
    -webkit-transition: height 0.25s ease-in-out;
    -moz-transition: height 0.25s ease-in-out;
    -ms-transition: height 0.25s ease-in-out;
    -o-transition: height 0.25s ease-in-out;
    transition: height 0.25s ease-in-out;
}
.link-color:hover {
    height: 14px;
}
.link-color:last-of-type {
    border: 0;
}
.link-color div {
    height: 100%;
}

#cube-logo img {
    width: 100%;
    height: 100%;
}
#cube-photo img {
    width: 98%;
    height: 98%;
    margin: 1%
}

/* CUBE LOGO */
#cube-logo img {
    position: absolute;
}

/* CUBE BIO */
#cube-bio .cube-content {
    background: white;
    text-align: center;
}
#bio-title h1{
    font-family: sunbreath;
    font-size: 6rem;
    margin-top: 11px;
}
#bio-email {
    font-family: champagne;
    font-size: 46px;
    margin-top: -33px;
}
#bio-arrow {
    display: inline-block;
    margin: 10px auto;
    width: 45px;
    height: 23px;
    position: relative;
}
#bio-arrow img {
    position: absolute;
    top: 0;
    left: 0;
}
#bio-content {
    font-family: champagne;
    font-weight: bold;
    font-size: 0.96rem;
    text-transform: uppercase;
    text-align: justify;
    padding: 0 50px;
}

/* MEDIA QUERIES */

/* lg */
@media (max-width: 1199px) {
    #bio-content {
        font-size: 1.13rem;
    }
}
/* md */
@media (max-width: 991px) {
    #bio-content {
        font-size: 0.8rem;
    }
    #bio-title h1{
        font-size: 4.5rem;
    }
}
/* sm */
@media (max-width: 767px) {
    .link-color {
        height: 15px;
    }
    .link-color:hover {
        height: 20px;
    }
}
/* xs */
@media (max-width: 575px) {
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    #header {
        font-size: 3em;
        padding-top: 38px;
    }
}

/* COLORS */
.display { transition: visibility 1s, opacity 1s linear; visibility: hidden; opacity: 0; }
.back { transition: background 1s; }
.bord { transition: border 1s; }
.text { transition: color 1s; }

/* BLEU JAUNE */
.bleu-jaune .bleu-jaune.display { visibility: visible; opacity: 1; }
.link-color#bleu-jaune .color1,
.bleu-jaune .color1.back { background: #ead952; }
.bleu-jaune .color1.bord { border-color: #ead952; }
.bleu-jaune .color1.text { color: #ead952; }
.link-color#bleu-jaune .color2,
.bleu-jaune .color2.back { background: #649caa; }
.bleu-jaune .color2.bord { border-color: #649caa; }
.bleu-jaune .color2.text { color: #649caa; }

/* VERT ROSE */
.vert-rose .vert-rose.display { visibility: visible; opacity: 1; }
.link-color#vert-rose .color1,
.vert-rose .color1.back { background: #005a56; }
.vert-rose .color1.bord { border-color: #005a56; }
.vert-rose .color1.text { color: #005a56; }
.link-color#vert-rose .color2,
.vert-rose .color2.back { background: #f6aeb4; }
.vert-rose .color2.bord { border-color: #f6aeb4; }
.vert-rose .color2.text { color: #f6aeb4; }

/* BLEU VERT */
.bleu-vert .bleu-vert.display { visibility: visible; opacity: 1; }
.link-color#bleu-vert .color1,
.bleu-vert .color1.back { background: #cecc3e; }
.bleu-vert .color1.bord { border-color: #cecc3e; }
.bleu-vert .color1.text { color: #cecc3e; }
.link-color#bleu-vert .color2,
.bleu-vert .color2.back { background: #212a5c; }
.bleu-vert .color2.bord { border-color: #212a5c; }
.bleu-vert .color2.text { color: #212a5c; }

/* VERT SAUMON */
.vert-saumon .vert-saumon.display { visibility: visible; opacity: 1; }
.link-color#vert-saumon .color1,
.vert-saumon .color1.back { background: #f2837f; }
.vert-saumon .color1.bord { border-color: #f2837f; }
.vert-saumon .color1.text { color: #f2837f; }
.link-color#vert-saumon .color2,
.vert-saumon .color2.back { background: #005839; }
.vert-saumon .color2.bord { border-color: #005839; }
.vert-saumon .color2.text { color: #005839; }

/* VERT FUSHIA */
.vert-fushia .vert-fushia.display { visibility: visible; opacity: 1; }
.link-color#vert-fushia .color1,
.vert-fushia .color1.back { background: #b8195a; }
.vert-fushia .color1.bord { border-color: #b8195a; }
.vert-fushia .color1.text { color: #b8195a; }
.link-color#vert-fushia .color2,
.vert-fushia .color2.back { background: #7ab194; }
.vert-fushia .color2.bord { border-color: #7ab194; }
.vert-fushia .color2.text { color: #7ab194; }

/* ORANGE GRIS */
.orange-gris .orange-gris.display { visibility: visible; opacity: 1; }
.link-color#orange-gris .color1,
.orange-gris .color1.back { background: #7ba0af; }
.orange-gris .color1.bord { border-color: #7ba0af; }
.orange-gris .color1.text { color: #7ba0af; }
.link-color#orange-gris .color2,
.orange-gris .color2.back { background: #ef614d; }
.orange-gris .color2.bord { border-color: #ef614d; }
.orange-gris .color2.text { color: #ef614d; }

/* NOIR ROUGE */
.noir-rouge .noir-rouge.display { visibility: visible; opacity: 1; }
.link-color#noir-rouge .color1,
.noir-rouge .color1.back { background: #eb212e; }
.noir-rouge .color1.bord { border-color: #eb212e; }
.noir-rouge .color1.text { color: #eb212e; }
.link-color#noir-rouge .color2,
.noir-rouge .color2.back { background: #414142; }
.noir-rouge .color2.bord { border-color: #414142; }
.noir-rouge .color2.text { color: #414142; }

/* ROSE BLEU */
.rose-bleu .rose-bleu.display { visibility: visible; opacity: 1; }
.link-color#rose-bleu .color1,
.rose-bleu .color1.back { background: #2959a5; }
.rose-bleu .color1.bord { border-color: #2959a5; }
.rose-bleu .color1.text { color: #2959a5; }
.link-color#rose-bleu .color2,
.rose-bleu .color2.back { background: #cb357b; }
.rose-bleu .color2.bord { border-color: #cb357b; }
.rose-bleu .color2.text { color: #cb357b; }