#nav > .home-btn {
    position: relative;
    background-image: none;
}
#nav > .home-btn:before,
#nav > .home-btn:after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-size: cover;
    background-repeat: no-repeat;
    
    transition: opacity .4s ease-out;
}
#nav > .home-btn:before { background-image: url("../../images/logo.dark.svg"); opacity: 1; }
#nav > .home-btn:after { background-image: url("../../images/logo.light.svg"); opacity: 0; }
#nav.scroll > .home-btn:before,
body[class *= 'open'] #nav > .home-btn:before { opacity: 0; }
#nav.scroll > .home-btn:after,
body[class *= 'open'] #nav > .home-btn:after { opacity: 1; }

#nav > .nav-btn.search-btn {
    position: relative;
    background-image: none;
}
#nav > .nav-btn.search-btn:before,
#nav > .nav-btn.search-btn:after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    
    transition: opacity .4s ease-out;
}
#nav > .nav-btn.search-btn:before { background-image: url("../../images/icons/nav.search.dark.svg"); opacity: 1; }
#nav > .nav-btn.search-btn:after { background-image: url("../../images/icons/nav.search.light.svg"); opacity: 0; }
#nav.scroll > .nav-btn.search-btn:before,
body[class *= 'open'] #nav > .nav-btn.search-btn:before { opacity: 0; }
#nav.scroll > .nav-btn.search-btn:after,
body[class *= 'open'] #nav > .nav-btn.search-btn:after { opacity: 1; }

#nav.static > .nav-btn.menu-btn { background-color: #B8A3A7; }
#nav.scroll > .nav-btn.menu-btn { background-color: #820D2B; }
body:not([class *= 'open'])#nav.static > .nav-btn.menu-btn:before,
body:not([class *= 'open'])#nav.static > .nav-btn.menu-btn:after,
body:not([class *= 'open']) #nav:not(.scroll) > .nav-btn.menu-btn:before,
body:not([class *= 'open']) #nav:not(.scroll) > .nav-btn.menu-btn:after { background-color: #000; }

/*---------------------------------------------------------------------------------------*/

#container .title {
    font-family: "Anton";
    color: #9E2B46;
}
@media (min-width : 900px) {
    #container h2.title {
        line-height: 30px;
        font-size: 32px;
    }
}
@media (max-width : 899px) {
    #container h2.title {
        line-height: 32px;
        font-size: 26px;
    }
}
@media (min-width : 500px) {
    #container > * {
        padding-left: 50px;
        padding-right: 50px;
    }
}
@media (max-width : 499px) {
    #container > * {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*---------------------------------------------------------------------------------------*/

#about { background-color: #CFC9CC; }
#about > .title {
    margin: 0;
    text-transform: uppercase;
}
#about > .title > .outlined {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #9E2B46;
}
@media (min-width : 900px) {
    #about > .title {
        line-height: 68px;
        font-size: 74px;
    }
    #about > .title > span { display: block; }
    #about > .title > span:not(:last-child) { margin-bottom: 18px; }
}
@media (max-width : 899px) {
    #about > .title {
        line-height: 60px;
        font-size: 50px;
    }
    #about > .title > span:not(:first-child):before { content: " "; }
}
@media (min-width : 500px) {
    #about { padding-top: 150px; }
    #about:not(:last-child) { padding-bottom: 255px; }
    #about:not(:last-child) + section { margin-top: -155px; }
    #about > .back-btn {
        margin-left: 40px;
        margin-bottom: 55px;
    }
    #about > .title { margin-bottom: 75px; }
}
@media (max-width : 499px) {
    #about { padding-top: 110px; }
    #about:not(:last-child) { padding-bottom: 245px; }
    #about:not(:last-child) + section { margin-top: -175px; }
    #about > .back-btn { margin-bottom: 44px; }
    #about > .title { margin-bottom: 50px; }
}

/*---------------------------------------------------------------------------------------*/

#main > div { border: solid 1px #FFF; }
#main > .cover-picture {
    background-position: center;
    background-size: cover;
}
#main > .presentation { font-size: 17px; }
#main > .presentation > :not(:first-child) { margin-top: 45px; }

#main > .skills > .list > ul {
    list-style-image: url("../../images/icons/checkmark.svg");
    margin: 0;
}
#main > .skills > .list > ul > li { font-size: 17px; }
#main > .skills > .list > ul > li:not(:last-child) { margin-bottom: 12px; }

@media (min-width : 900px) {
    #main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #main:not(:last-child) { padding-bottom: 60px; }
    #main > .cover-picture {
        flex: 0 0 305px;
        border-right: solid 1px #FFF;
    }
    #main > .presentation {
        flex: 1;
        padding: 45px 35px;
    }
    #main > .presentation:not(:first-child) { border-left: none; }
    #main > .presentation .title { margin-bottom: 35px; }
    #main > .skills {
        display: flex; flex: 0 0 100%;
        flex-direction: row;
        align-items: stretch;
    }
    #main > .skills:not(:only-child) { border-top: none; }
    #main > .skills > * {
        padding: 35px;
        margin: 0;
    }
    #main > .skills > .title { flex: 0 0 305px; }
    #main > .skills > .list { flex: 1; }
    #main > .skills > .list > ul { padding: 0 0 0 12px; }
}
@media (max-width : 899px) {
    #main:not(:last-child) { padding-bottom: 65px; }
    #main > .cover-picture { padding: 43% 0 0; }
    #main > .cover-picture ~ * {
        padding: 26px 15px;
        margin-top: -1px;
    }
    #main > .presentation .title { margin-bottom: 18px; }
    #main > .skills > .title { margin-bottom: 32px; }
    #main > .skills > .list > ul { padding: 0 0 0 33px; }
}

/*---------------------------------------------------------------------------------------*/

#main ~ section > header,
#about ~ section > header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#main ~ section > header > .title,
#about ~ section > header > .title { margin: 0; }
.arrows {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.arrows > button {
    display: block; height: 30px; width: 30px;
    padding: 5px;
    
    background-color: #9E2B46; transition: background-color .2s ease-out;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: contain;
    border: none;
    border-radius: 50%;
    
    font-size: 0;
    color: transparent;
}
.arrows > button:not(:last-child) { margin-right: 10px; }
.arrows > button.slick-prev { background-image: url("../../images/icons/prev.arrow.svg"); }
.arrows > button.slick-next { background-image: url("../../images/icons/next.arrow.svg"); }
.arrows > button.slick-disabled { opacity: .5; }
.arrows > button:not(.slick-disabled) { cursor: pointer; }
.arrows > button:not(.slick-disabled):hover { background-color: #81152F; }
.slick-track { float: left; }
@media (min-width : 500px) {
    #main ~ section > header,
    #about ~ section > header {
        margin-bottom: 40px;
        padding-left: 35px;
    }
    .slick-slider { margin: 0 -50px; }
    .slick-list { padding: 0 50px; }
}
@media (max-width : 499px) {
    #main ~ section > header,
    #about ~ section > header {
        margin-bottom: 50px;
    }
    .slick-slider { margin: 0 -15px; }
    .slick-list { padding: 0 15px; }
}

/*---------------------------------------------------------------------------------------*/

#team > .profiles .profile {
    position: relative;
    display: block;
    margin-left: -1px;
    
    border: solid 1px #FFF;
    
    transition:
        color  .4s ease-out,
        margin-left .2s ease-out;
}
#team > .profiles .profile[href] {
    cursor: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100px' height='100px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23FDFF50;%7d %3c/style%3e%3ccircle class='st0' cx='50' cy='50' r='50'/%3e%3cpath d='M20.7,47.2c0.5,0.3,0.9,0.6,1.1,1.1c0.3,0.5,0.4,1,0.4,1.7c0,0.6-0.1,1.2-0.4,1.7c-0.3,0.5-0.6,0.8-1.1,1.1 s-1.1,0.4-1.8,0.4H17v-6.3h1.9C19.6,46.9,20.2,47,20.7,47.2z M20.9,51.9c0.5-0.5,0.7-1.1,0.7-1.9c0-0.8-0.2-1.5-0.7-1.9 s-1.1-0.7-2-0.7h-1.2v5.2h1.2C19.7,52.6,20.4,52.4,20.9,51.9z M26.2,47.4v2.3h2.4v0.5h-2.4v2.4h2.7v0.5h-3.3v-6.3h3.3v0.5H26.2z M28,45.5l-1.8,1.1v-0.5l1.8-1.2V45.5z M32.5,48.3c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4c0.7,0,1.3,0.2,1.8,0.5 s0.9,0.8,1.1,1.4h-0.7c-0.2-0.4-0.5-0.8-0.8-1c-0.4-0.2-0.8-0.4-1.3-0.4c-0.5,0-0.9,0.1-1.2,0.3c-0.4,0.2-0.7,0.5-0.9,0.9 s-0.3,0.9-0.3,1.4c0,0.5,0.1,1,0.3,1.4c0.2,0.4,0.5,0.7,0.9,0.9c0.4,0.2,0.8,0.3,1.2,0.3c0.5,0,1-0.1,1.3-0.4c0.4-0.2,0.6-0.6,0.8-1 h0.7c-0.2,0.6-0.6,1.1-1.1,1.4c-0.5,0.3-1.1,0.5-1.8,0.5c-0.6,0-1.1-0.1-1.6-0.4c-0.5-0.3-0.8-0.7-1.1-1.1s-0.4-1-0.4-1.7 C32.1,49.4,32.2,48.8,32.5,48.3z M42.8,52.8c-0.5-0.3-0.8-0.7-1.1-1.1s-0.4-1-0.4-1.7c0-0.6,0.1-1.2,0.4-1.7s0.6-0.9,1.1-1.1 c0.5-0.3,1-0.4,1.6-0.4c0.6,0,1.1,0.1,1.6,0.4c0.5,0.3,0.8,0.7,1.1,1.1s0.4,1,0.4,1.7c0,0.6-0.1,1.2-0.4,1.7s-0.6,0.9-1.1,1.1 c-0.5,0.3-1,0.4-1.6,0.4C43.8,53.2,43.3,53.1,42.8,52.8z M45.7,52.3c0.4-0.2,0.7-0.5,0.9-0.9c0.2-0.4,0.3-0.9,0.3-1.4 c0-0.5-0.1-1-0.3-1.4c-0.2-0.4-0.5-0.7-0.9-0.9c-0.4-0.2-0.8-0.3-1.3-0.3c-0.5,0-0.9,0.1-1.3,0.3c-0.4,0.2-0.7,0.5-0.9,0.9 C42,49,41.9,49.5,41.9,50c0,0.5,0.1,1,0.3,1.4c0.2,0.4,0.5,0.7,0.9,0.9c0.4,0.2,0.8,0.3,1.3,0.3C44.9,52.7,45.3,52.6,45.7,52.3z M51.5,46.9v4c0,0.6,0.1,1.1,0.4,1.4c0.3,0.3,0.7,0.5,1.2,0.5s0.9-0.1,1.2-0.4c0.3-0.3,0.4-0.8,0.4-1.4v-4h0.6v4 c0,0.8-0.2,1.4-0.6,1.8s-1,0.6-1.7,0.6S52,53,51.5,52.6s-0.6-1-0.6-1.8v-4H51.5z M64.1,46.9l-2.4,6.3H61l-2.4-6.3h0.7l2.1,5.6 l2.1-5.6H64.1z M70.7,53.1l-1.6-2.6h-1.2v2.6h-0.6v-6.3h1.9c0.7,0,1.2,0.2,1.6,0.5c0.4,0.3,0.5,0.8,0.5,1.3c0,0.5-0.1,0.8-0.4,1.2 c-0.3,0.3-0.6,0.5-1.2,0.6l1.6,2.7H70.7z M67.9,50h1.3c0.5,0,0.9-0.1,1.1-0.4c0.2-0.2,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1 c-0.2-0.2-0.6-0.3-1.1-0.3h-1.3V50z M75.5,46.9v6.3h-0.6v-6.3H75.5z M82.5,53.1l-1.6-2.6h-1.2v2.6h-0.6v-6.3H81 c0.7,0,1.2,0.2,1.6,0.5c0.4,0.3,0.5,0.8,0.5,1.3c0,0.5-0.1,0.8-0.4,1.2c-0.3,0.3-0.6,0.5-1.2,0.6l1.6,2.7H82.5z M79.8,50H81 c0.5,0,0.9-0.1,1.1-0.4s0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1c-0.2-0.2-0.6-0.3-1.1-0.3h-1.3V50z'/%3e%3c/svg%3e") 50 50, pointer;
}
#team > .profiles .profile:hover { color: #FFF; }
#team > .profiles .profile > .thumbnail {
    padding-top: 128%;
    
    background-position: top center;
    background-size: cover;
    
    clip-path: circle(27% at 50% 30%); transition: clip-path .4s ease-out;
}
#team > .profiles .profile:hover > .thumbnail { clip-path: circle(90% at 50% 30%); }
#team > .profiles .profile > .thumbnail ~ div {
    position: absolute; left: 20px; right: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#team > .profiles .profile > .name { font-weight: 700; }
@media (min-width : 500px) {
    #team > .profiles .profile > .name {
        bottom: 65px;
        font-size: 15px;
    }
    #team > .profiles .profile > .role { bottom: 40px; }
}
@media (max-width : 499px) {
    #team > .profiles .profile > .name { bottom: 45px; }
    #team > .profiles .profile > .role { bottom: 20px; }
}

/*---------------------------------------------------------------------------------------*/

#articles { margin-bottom: 95px; }
#articles > .articles .article {
    overflow: hidden;
    margin-right: 40px;
    transition: margin .2s ease-out;
}
#articles > .articles .article > .date {
    margin-bottom: 20px;
    
    font-size: 22px;
    line-height: 26px;
    color: #9E2B46;
}
#articles > .articles .article > .thumbnail {
    margin-bottom: 25px;
    
    background-position: center;
    background-size: cover;
}
#articles > .articles .article:nth-child(odd) > .thumbnail { height: 130px; }
#articles > .articles .article:nth-child(even) > .thumbnail { height: 90px; }
#articles > .articles .article > .categories { margin-bottom: 15px; }
#articles > .articles .article > .date { font-family: "Anton"; }
#articles > .articles .article > .title {
    display: -webkit-box; overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    
    font-family: "Anton";
    font-size: 22px;
    letter-spacing: 1px;
    color: #222;
}
#articles > footer { text-align: center; }
@media (min-width : 600px) {
    #articles > .articles { margin-bottom: 65px; }
}
@media (max-width : 599px) {
    #articles > .articles { margin-bottom: 45px; }
}

/*---------------------------------------------------------------------------------------*/

#crosslinks { padding-bottom: 95px; }
#crosslinks > .crosslinks .crosslink {
    position: relative;
    display: block; height: 170px;
    padding: 20px 35px;
    margin-right: -1px;
    
    background-color: #FFF;
    border: solid 1px #9E2B46;
    
    font-family: "Anton";
    
    transition: margin .2s ease-out;
    
    cursor: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100px' height='100px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23FDFF50;%7d %3c/style%3e%3ccircle class='st0' cx='50' cy='50' r='50'/%3e%3cpath d='M20.7,47.2c0.5,0.3,0.9,0.6,1.1,1.1c0.3,0.5,0.4,1,0.4,1.7c0,0.6-0.1,1.2-0.4,1.7c-0.3,0.5-0.6,0.8-1.1,1.1 s-1.1,0.4-1.8,0.4H17v-6.3h1.9C19.6,46.9,20.2,47,20.7,47.2z M20.9,51.9c0.5-0.5,0.7-1.1,0.7-1.9c0-0.8-0.2-1.5-0.7-1.9 s-1.1-0.7-2-0.7h-1.2v5.2h1.2C19.7,52.6,20.4,52.4,20.9,51.9z M26.2,47.4v2.3h2.4v0.5h-2.4v2.4h2.7v0.5h-3.3v-6.3h3.3v0.5H26.2z M28,45.5l-1.8,1.1v-0.5l1.8-1.2V45.5z M32.5,48.3c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4c0.7,0,1.3,0.2,1.8,0.5 s0.9,0.8,1.1,1.4h-0.7c-0.2-0.4-0.5-0.8-0.8-1c-0.4-0.2-0.8-0.4-1.3-0.4c-0.5,0-0.9,0.1-1.2,0.3c-0.4,0.2-0.7,0.5-0.9,0.9 s-0.3,0.9-0.3,1.4c0,0.5,0.1,1,0.3,1.4c0.2,0.4,0.5,0.7,0.9,0.9c0.4,0.2,0.8,0.3,1.2,0.3c0.5,0,1-0.1,1.3-0.4c0.4-0.2,0.6-0.6,0.8-1 h0.7c-0.2,0.6-0.6,1.1-1.1,1.4c-0.5,0.3-1.1,0.5-1.8,0.5c-0.6,0-1.1-0.1-1.6-0.4c-0.5-0.3-0.8-0.7-1.1-1.1s-0.4-1-0.4-1.7 C32.1,49.4,32.2,48.8,32.5,48.3z M42.8,52.8c-0.5-0.3-0.8-0.7-1.1-1.1s-0.4-1-0.4-1.7c0-0.6,0.1-1.2,0.4-1.7s0.6-0.9,1.1-1.1 c0.5-0.3,1-0.4,1.6-0.4c0.6,0,1.1,0.1,1.6,0.4c0.5,0.3,0.8,0.7,1.1,1.1s0.4,1,0.4,1.7c0,0.6-0.1,1.2-0.4,1.7s-0.6,0.9-1.1,1.1 c-0.5,0.3-1,0.4-1.6,0.4C43.8,53.2,43.3,53.1,42.8,52.8z M45.7,52.3c0.4-0.2,0.7-0.5,0.9-0.9c0.2-0.4,0.3-0.9,0.3-1.4 c0-0.5-0.1-1-0.3-1.4c-0.2-0.4-0.5-0.7-0.9-0.9c-0.4-0.2-0.8-0.3-1.3-0.3c-0.5,0-0.9,0.1-1.3,0.3c-0.4,0.2-0.7,0.5-0.9,0.9 C42,49,41.9,49.5,41.9,50c0,0.5,0.1,1,0.3,1.4c0.2,0.4,0.5,0.7,0.9,0.9c0.4,0.2,0.8,0.3,1.3,0.3C44.9,52.7,45.3,52.6,45.7,52.3z M51.5,46.9v4c0,0.6,0.1,1.1,0.4,1.4c0.3,0.3,0.7,0.5,1.2,0.5s0.9-0.1,1.2-0.4c0.3-0.3,0.4-0.8,0.4-1.4v-4h0.6v4 c0,0.8-0.2,1.4-0.6,1.8s-1,0.6-1.7,0.6S52,53,51.5,52.6s-0.6-1-0.6-1.8v-4H51.5z M64.1,46.9l-2.4,6.3H61l-2.4-6.3h0.7l2.1,5.6 l2.1-5.6H64.1z M70.7,53.1l-1.6-2.6h-1.2v2.6h-0.6v-6.3h1.9c0.7,0,1.2,0.2,1.6,0.5c0.4,0.3,0.5,0.8,0.5,1.3c0,0.5-0.1,0.8-0.4,1.2 c-0.3,0.3-0.6,0.5-1.2,0.6l1.6,2.7H70.7z M67.9,50h1.3c0.5,0,0.9-0.1,1.1-0.4c0.2-0.2,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1 c-0.2-0.2-0.6-0.3-1.1-0.3h-1.3V50z M75.5,46.9v6.3h-0.6v-6.3H75.5z M82.5,53.1l-1.6-2.6h-1.2v2.6h-0.6v-6.3H81 c0.7,0,1.2,0.2,1.6,0.5c0.4,0.3,0.5,0.8,0.5,1.3c0,0.5-0.1,0.8-0.4,1.2c-0.3,0.3-0.6,0.5-1.2,0.6l1.6,2.7H82.5z M79.8,50H81 c0.5,0,0.9-0.1,1.1-0.4s0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1c-0.2-0.2-0.6-0.3-1.1-0.3h-1.3V50z'/%3e%3c/svg%3e") 50 50, pointer;
}
#crosslinks > .crosslinks .crosslink > .thumbnail {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-position: center;
    background-size: cover;
    
    opacity: 0; transition: opacity .2s ease-out;
}
#crosslinks > .crosslinks .crosslink > .thumbnail:after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-color: #9E2B46;
    opacity: .5;
}
#crosslinks > .crosslinks .crosslink:hover > .thumbnail { opacity: 1; }
#crosslinks > .crosslinks .crosslink > .thumbnail ~ div {
    position: relative;
    transition: color .2s ease-out;
}
#crosslinks > .crosslinks .crosslink:hover > .thumbnail ~ div { color: #FFF; }
#crosslinks > .crosslinks .crosslink > .index {
    margin-bottom: 10px;
    
    font-size: 28px;
    color: #9E2B46;
}
#crosslinks > .crosslinks .crosslink > .name {
    display: -webkit-box; overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    
    font-size: 20px;
}