/**********************************************************/
/*** VARIABLES ********************************************/
/**********************************************************/

:root {
    --primary-color: #A15F96;
    --primary-color-light: #F4DFF0;
    --active-color: #EC4900;
    --active-color-light: #FFE8DD;
    --success-color: #0D8D43;
    --success-color-light: #C5FFDE;
    
    --modalArticle-width: 20px;
    --modalArticle-height: 20px;
    --modalArticle-margin: 20px;
    --modalArticle-padding: 20px;
    --modalArticle-photoSize: calc(100vh - 120px);
}

.hide { display: none; !important }

/**********************************************************/
/*** INLINE-MENU ******************************************/
/**********************************************************/

ul.inline-menu {
    display: inline-block;
    padding: 0;
}

ul.inline-menu > li {
    display: inline-block;
}

/**********************************************************/
/*** CARET ************************************************/
/**********************************************************/

span.caret {
    display: inline-block;
    margin-left: 2px;
    width: 8px;
    height: 4px;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid black;
    box-sizing: border-box;
}

/**********************************************************/
/*** BODY *************************************************/
/**********************************************************/

body {
    font-family: Arial;
    font-size: 10px;
    padding-top: 74px;
    margin: 0 8px;
}

/**********************************************************/
/*** MSG **************************************************/
/**********************************************************/

div.alert {
    box-sizing: border-box;
    display: block;
    width: 1240px;
    float: left;
    position: relative;
    left: calc((100vw - 1240px)/2);
    z-index: 5000;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    font-size: 12px;
    margin-bottom: 10px;
}

div.alert > button.close {
    display: block;
    float: right;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-weight: 900;
}

div.alert.msg {
    margin-left: -8px;
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: var(--primary-color-light);
}

div.alert.msg > button.close { color: var(--primary-color); }

div.alert.error {
    color: var(--active-color);
    border-color: var(--active-color);
    background-color: var(--active-color-light);
}

div.alert.error > button.close { color: var(--active-color); }

div.alert.success {
    color: var(--active-color);
    border-color: var(--active-color);
    background-color: var(--active-color-light);
}

div.alert.success > button.close { color: var(--active-color); }

/**********************************************************/
/*** TOPBAR ***********************************************/
/**********************************************************/

div.topbar-container {
    position: fixed;
    width: 100%;
    top: 0;
    height: 64px;
    padding-top: 10px;
    background-color: white;
    z-index: 1000;
}

div.topbar {
    width: 1240px;
    height: 64px;
    font-family: Arial;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    right: 8px;
}

div.topbar > .header {
    display: block;
    float: left;
    background-image: url("../img/top-logo.svg");
    background-position: center;
    background-repeat: no-repeat;
    width: 186px;
    height: 64px;
    margin-right: 64px;
    cursor: pointer;
}

div.topbar > ul.inline-menu {
    border-collapse: collapse;
    border-bottom: 2px solid var(--primary-color);
    width: 990px;
}

div.topbar > ul.inline-menu > li {
    padding: 8px 12px 16px 12px;
    font-size: 14px;
    color: var(--primary-color);
    font-family: Arial;
    font-weight: 600;
    cursor: pointer;
}

div.topbar > ul.inline-menu > li[univers=search] {
    background-image: url(../img/search-primary.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    top: 4px;
    float: right;
}

div.topbar > ul.inline-menu > li[univers=search] > span { display: none; }

div.topbar > ul.inline-menu > li[univers=search].active,
div.topbar > ul.inline-menu > li[univers=search]:hover { background-image: url(../img/search-active.svg); }

div.topbar > ul.inline-menu > li.active,
div.topbar > ul.inline-menu > li:hover {
    color: var(--active-color);
}

div.topbar > ul.inline-menu > li > span.caret { 
    margin-left: auto;
    border-top-color: var(--primary-color);
}
div.topbar > ul.inline-menu > li.active > span.caret,
div.topbar > ul.inline-menu > li:hover > span.caret { border-top-color: var(--active-color); }

div.topbar > ul.inline-menu > li > ul.submenu { 
    display: block;
    position: absolute;
    margin-top: 16px;
    margin-left: -12px;
    padding: 0;
    
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s; 
    -moz-transition: max-height 0.5s; 
    -ms-transition: max-height 0.5s; 
    -o-transition: max-height 0.5s; 
    transition: max-height 0.5s;  
}

div.topbar > ul.inline-menu > li:hover > ul.submenu {
    max-height: 300px;
}

div.topbar > ul.inline-menu > li > ul.submenu > li {
    color: white;
    padding: 8px 12px 8px 12px;
    font-size: 12px;
    font-weight: 200;
    background-color: white;
    color: var(--primary-color);
}

div.topbar > ul.inline-menu > li > ul.submenu > li:hover,
div.topbar > ul.inline-menu > li > ul.submenu > li.active {
    background-color: var(--active-color);
    color: white;
}

@media (max-width: 1260px) {
    body { padding-top: 66px; }
    div.topbar-container { 
        width: calc(100% - 16px);
        height: 54px;
    }
    div.topbar { 
        width: 100%;
        height: 52px;
        right: 0; 
    }
    div.topbar > .header {
        width: 151px;
        height: 52px;
        margin-right: 10px;
    }
    div.topbar > ul.inline-menu { 
        width: calc(100% - 161px);
    }
    div.topbar > ul.inline-menu > li {
        font-size: 13px;
        padding: 6px 8px 12px 8px;
    }
}

@media (max-width: 980px) {
    body { overflow-x: hidden; }
    
    div.topbar-container { border-bottom: 2px solid var(--primary-color); }
    
    div.topbar > ul.inline-menu {
        background-color: white;
        border: 1px solid var(--primary-color);
        position: fixed;
        right: 8px;
        top: 54px;
        
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.5s; 
        -moz-transition: max-height 0.5s; 
        -ms-transition: max-height 0.5s; 
        -o-transition: max-height 0.5s; 
        transition: max-height 0.5s;
    }
    
    div.topbar > ul.inline-menu.unfold {
        overflow-y: scroll;
        border-top-width: 2px;
    }
    
    #btnCollapseMenu {
        display: block;
        position: fixed;
        right: 10px;
        top: 12px;
        width: 42px;
        height: 42px;
        background: url(../img/collapse.svg);
        background-color: white;
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        cursor: pointer;
    }
    
    div.topbar > ul.inline-menu > li {
        display: list-item;
        list-style: none;
    }
    
    div.topbar > ul.inline-menu > li[univers=search] {
        float: none;
        margin-bottom: 10px;
        background-position-x: 10px;
        background-size: 20px;
    }
    
    div.topbar > ul.inline-menu > li[univers=search] > span {
        display: inline-block;
        margin: 8px 0 0 30px;
    }
    
    div.topbar > ul.inline-menu > li > span.caret { display: none; }
    
    div.topbar > ul.inline-menu > li > ul.submenu {
        position: initial;
        max-height: none;
        margin-top: 8px;
        margin-left: 10px;
    }
    
    #btnSearch {
        display: block;
        position: fixed;
        right: 64px;
        top: 16px;
        width: 34px;
        height: 34px;
        background: url(../img/search-primary.svg);
        background-color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    div.topbar > ul.inline-menu > li[univers=search] { display: none; }
}

@media (min-width: 980px) { 
    #btnCollapseMenu { display: none; }
    #btnSearch { display: none; }
}

/**********************************************************/
/*** HOME - SLIDESHOW *************************************/
/**********************************************************/

div.slideshow.container {
    width: calc(100%-16px);
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    height: 450px;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-collapse: collapse;
}
div.slideshow.container::-webkit-scrollbar { display: none; }
div.slideshow.container { -ms-overflow-style: none; scrollbar-width: none; }

div.slideshow.photo {
    display: inline-block;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
    margin: 0;
    margin-top: -2px;
    border: 1px solid var(--primary-color);
}

div.slideshow.logo {
    display: block;
    width: calc(100% - 16px);
    height: 454px;
    position: absolute;
    margin-top: -454px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/logo-anim.png);
}

@media (max-width: 800px) {
    div.slideshow.container { height: 150px; margin-top: 8px; }
    div.slideshow.photo { height: 50px; scale }
    div.slideshow.logo { height: 140px; margin-top: -145px; }
}

/**********************************************************/
/*** HOME - PRESENTATION **********************************/
/**********************************************************/

div.presTxt {
    text-align: center;
    font-size: 18px;
    color: black;
    margin-top: 60px;
    margin-bottom: 60px;
}

h1.presTitle {
    color: var(--primary-color);
    margin-bottom: 30px;
    text-align: center;
    font-size: 32px;
}

div.presTxt > b { color: var(--active-color); }

div.presTxt > span.link { 
    display: inline-block;
    width: 350px;
    padding: 5px;
    text-align: left;
}
div.presTxt > span.link > a {
    text-decoration: none;
    color: var(--active-color);
    font-weight: bold;
}
div.presTxt > span.link > span.icon {
    display: inline-block;
    width: 30px;
    height: 20px;
    text-align: right;
    margin-right: 5px;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}
div.presTxt > span.link.instagram > span.icon { background-image: url(../img/instagram.svg); }
div.presTxt > span.link.facebook > span.icon { background-image: url(../img/facebook.svg); }
div.presTxt > span.link.mail > span.icon { background-image: url(../img/mail.svg); }

@media (max-width: 800px) {
    h1.presTitle { font-size: 24px; margin-bottom: 0; }
    div.presTxt { font-size: 12px; margin: 20px 0; }
    div.presTxt > span.link { width: 230px; }
    div.presTxt > span.link > span.icon { width: 20px; height: 12px; }
}

/**********************************************************/
/*** HOME - ANNIVERSAIRIES & LAST ARTICLES ****************/
/**********************************************************/

h1.next_anniversaries_header,
h1.last_released_articles_header,
h1.last_buy_articles_header {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto 5px auto;
    text-align: center;
    padding: 12px;
    color: white;
}
h1.next_anniversaries_header { background-color: var(--primary-color); }
h1.last_released_articles_header { background-color: var(--active-color); }
h1.last_buy_articles_header { background-color: var(--primary-color); }

div.next_anniversaries_container,
div.last_released_articles_container,
div.last_buy_articles_container {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    min-height: 220px;
    margin: 0 auto 30px auto;
    border: 1px solid black;
    text-align: center;
    padding-top: 8px;
    overflow-x: scroll;
}
div.next_anniversaries_container { border-color: var(--primary-color); }
div.last_released_articles_container { border-color: var(--active-color); }
div.last_buy_articles_container { border-color: var(--primary-color); }

div.next_anniversaries_list,
div.last_released_articles_list,
div.last_buy_articles_list {
    width: auto;
    max-width: none;
    box-sizing: border-box;
    padding: 0 5px 0 5px;
}

@media (max-width: 800px) {
    h1.next_anniversaries_header,
    h1.last_released_articles_header,
    h1.last_buy_articles_header { font-size: 14px; padding: 6px; margin: 0 0 5px 0; }
    
    div.next_anniversaries_container,
    div.last_released_articles_container,
    div.last_buy_articles_container { min-height: 120px; margin-bottom: 10px; }
}

/**********************************************************/
/*** ANNIVERSARY - PREVIEW ********************************/
/**********************************************************/

div.anniversary {
    display: inline-block;
    width: 190px;
    margin: 0;
    vertical-align: top;
}

div.anniversary > .name {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    margin: 5px 0 0 0;
    padding: 0 10px;
    color: var(--primary-color);
    
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.anniversary > .date {
    font-size: 10px;
    height: 12px;
    line-height: 12px;
    margin: 0;
    color: var(--active-color);
    
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.anniversary > .years {
    font-size: 1Opx;
    height: 12px;
    line-height: 12px;
    margin: 0;
    color: grey;
    
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 6px;
}

div.anniversary > .photo {
    display: block;
    width: 180px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--primary-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
    text-align: left;
}

@media (max-width: 800px) {
    div.anniversary { width: 110px; }
    div.anniversary > .photo { width: 100px; height: 100px; }
    div.anniversary > .name { font-size: 9px; height: 12px; }
    
    div.article { width: 110px; }
    div.article > .photo { width: 100px; height: 100px; }
    div.article > .photo > span.icon { width: 10px; height: 10px; }
    
    div.article > .name { font-size: 9px; height: 12px; }
    div.anniversary > .date { font-size: 8px; height: 11px; }
    div.anniversary > .years { font-size: 7px; height: 9px; }
    
    div.article > .origin,
    div.article > .type { font-size: 7px; height: 9px; }
    
    div.article > .type { margin-bottom: 5px; }
    
    div.article > .comments { display: none; }
}

/**********************************************************/
/*** COLLECTION NAV ***************************************/
/**********************************************************/

div.collection-container {
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

div.collection-container > div.leftCol {
    width: 230px;
    overflow-x: hidden;
    overflow-y: scroll;
    float: left;
}

@media (max-width: 1260px) { 
    div.collection-container { width: 100%; }
    div.collection-container > div.leftCol { display: none; }
}

div.collection.nav.prw {
    width: 210px;
    height: 210px;
    border: 1px solid var(--primary-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
}

h1.collection.nav.title {
    font-size: 18px;
    color: var(--primary-color);
    margin-top: 20px;
}
h1.collection.nav.title > span.loading_collection_articles {
    display: inline-block;
    float: right;
    width: 18px;
    height: 18px;
    background-image: url(../img/wait-primary.svg);
    background-size: contain;
    background-repeat: none;
}

h2.collection.nav.subtitle {
    font-size: 16px;
    color: var(--active-color);
}

ul.collection.nav {
    padding: 0;
    margin-top: 20px;
}

ul.collection.nav > li {
    color: var(--primary-color);
    font-family: Arial;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    cursor: pointer;
}
ul.collection.nav > li.loading { cursor: progress; }

ul.collection.nav > li.active,
ul.collection.nav > li:hover,
ul.collection.nav > li.active > ul.submenu > li.active,
ul.collection.nav > li.active > ul.submenu > li:hover,
ul.collection.nav > li.active > ul.submenu > li.active > ul.submenu > li.active,
ul.collection.nav > li.active > ul.submenu > li.active > ul.submenu > li:hover { color: var(--active-color); }

ul.collection.nav > li > span.caret,
ul.collection.nav > li > ul.submenu > li > span.caret { border-top-color: var(--primary-color); }

ul.collection.nav > li.active > span.caret,
ul.collection.nav > li:hover > span.caret,
ul.collection.nav > li.active > ul.submenu > li.active > span.caret,
ul.collection.nav > li.active > ul.submenu > li:hover > span.caret { border-top-color: var(--active-color); }

ul.collection.nav ul.submenu {
    padding-left: 20px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--primary-color);
    
    max-height: 0;
    overflow: hidden;
/*
    -webkit-transition: max-height 0.2s; 
    -moz-transition: max-height 0.2s; 
    -ms-transition: max-height 0.2s; 
    -o-transition: max-height 0.2s; 
    transition: max-height 0.2s;
*/
}

ul.collection.nav > li > ul.submenu, ul.collection.nav > li > ul.submenu > li { list-style-type: circle!important; }
ul.collection.nav > li > ul.submenu > li > ul.submenu, ul.collection.nav > li > ul.submenu > li > ul.submenu > li { list-style-type: square!important; }

ul.collection.nav > li.active > ul.submenu { max-height: 3000px; }

ul.collection.nav > li.active > ul.submenu > li.active > ul.submenu { max-height: 3000px; }

/**********************************************************/
/*** LIST *************************************************/
/**********************************************************/

div.collection.list {
    float: right;
    width: 990px;
    text-align: center;
    overflow-x: hidden;
    overflow-y: scroll;
}

@media (max-width: 1260px) { 
    div.collection.list { 
        float: none;
        width: 100%;
    }
}

div.collection.list div.header.family[loaded=no] {
    cursor: pointer;
    background-image: url(../img/dropdown_white.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-position-x: 6px;
}

div.collection.list div.header.family.loading {
    background-image: url(../img/wait-white.svg);
    background-size: 26px;
    background-position-x: 4px;
}

div.collection.list > div.family > h1 {
    text-align: center;
    margin: 0 0 10px 0;
    padding: 12px;
    background-color: var(--primary-color);
    color: white;
}

div.collection.list > div.group > h1 {
    text-align: center;
    margin: 0 0 10px 0;
    padding: 12px;
    background-color: var(--active-color);
    color: white;
    font-size: 18px;
}

div.collection.list > div.type > h1 {
    text-align: center;
    margin: 0 0 10px 0;
    padding: 6px;
    background-color: grey;
    color: white;
    font-size: 18px;
}

div.collection.list > div.family > h1 > small,
div.collection.list > div.group > h1 > small,
div.collection.list > div.type > h1 > small {
    font-style: italic;
    font-size: 12px;
    color: lightgray;
    float: right;
    position: relative;
    top: 4px;
}

div.collection.list > div.family > h1 > span.date,
div.collection.list > div.group > h1 > span.date{
    display: block;
    float: left;
    line-height: 45px;
    font-size: 14px;
    margin-left: 10px;
}

div.collection.list > div.header.family {
    margin: 0 0 10px 0;
    background-color: var(--primary-color);
    padding: 12px 6px;
}

div.collection.list > div.header.group {
    margin: 0 0 10px 0;
    background-color: var(--active-color);
    padding: 6px;
}

div.collection.list > div.header.type,
div.collection.list > div.header.producer {
    margin: 0 0 10px 0;
    background-color: grey;
    padding: 3px 6px;
}

div.collection.list > div.header > table { width: 100%; }

div.collection.list > div.header > table th.date {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: lightgray;
    width: 110px;
    text-align: left;
}

div.collection.list > div.header > table th.name {
    font-size: 18px;
    font-weight: 600;
    color: white;
    text-align: center;
}

div.collection.list > div.header > table th.nb_articles {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: lightgray;
    width: 110px;
    text-align: right;
}

@media (max-width: 800px) {    
    div.collection.list > div.header.family { padding: 6px 2px; margin-bottom: 5px; }
    div.collection.list > div.header.group { padding: 3px 2px; margin-bottom: 5px; }
    div.collection.list > div.header.type,
    div.collection.list > div.header.producer { padding: 0 2px; margin-bottom: 5px; }
    
    div.collection.list > div.header > table th.nb_articles,
    div.collection.list > div.header > table th.date { font-size: 8px; padding: 0; }
    div.collection.list > div.header > table th.name { font-size: 12px; padding: 0;}
}

/**********************************************************/
/*** ARTICLE - PREVIEW ************************************/
/**********************************************************/

div.article {
    display: inline-block;
    width: 190px;
    margin: 0;
    vertical-align: top;
    cursor: pointer;
}

div.article > .name {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    margin: 5px 0 0 0;
    padding: 0 10px;
    color: var(--primary-color);
    
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.article > .origin {
    font-size: 10px;
    height: 12px;
    line-height: 12px;
    margin: 0;
    color: var(--active-color);
    
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.article > .type {
    font-size: 1Opx;
    height: 12px;
    line-height: 12px;
    margin: 0;
    color: grey;
    
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.article > .comments {
    font-size: 1Opx;
    line-height: 10px;
    margin: 5px 0 10px 0;
    color: grey;
    font-style: italic;
}

div.article > .photo {
    display: block;
    width: 180px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--primary-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
    text-align: left;
}

div.article > .photo > span.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
div.article > .photo > span.icon.have { background-image: url(../img/have.svg); }
div.article > .photo > span.icon.havent { background-image: url(../img/havent.svg); }

@media (max-width: 800px) { 
    div.article { width: 110px; }
    div.article > .photo { width: 100px; height: 100px; }
    div.article > .photo > span.icon { width: 10px; height: 10px; }
    
    div.article > .name { font-size: 9px; height: 12px; }
    
    div.article > .origin,
    div.article > .type { font-size: 7px; height: 9px; }
    
    div.article > .type { margin-bottom: 5px; }
    
    div.article > .comments { display: none; }
}

/**********************************************************/
/*** FICHE ARTICLE MODAL **********************************/
/**********************************************************/

:root {
    --screenWidth: 100vw;
    --screenHeight: 100vh;
    
    --ma-margin: 40px;
    --ma-padding: 15px;
    
    --ma-vWidth: calc(var(--screenWidth)/2);
    --ma-width: calc(var(--screenWidth) - var(--ma-margin)*2);
    --ma-height: calc(var(--screenHeight) - var(--ma-margin)*2);
    
    --ma-vInWidth: calc(var(--ma-vWidth) - var(--ma-padding)*2);
    --ma-inWidth: calc(var(--ma-width) - var(--ma-padding)*2);
    --ma-inHeight: calc(var(--ma-height) - var(--ma-padding)*2);
    
    --ma-pListPadding: 7px;
    --ma-pListHeadHeight: 20px;
    --ma-pListHeadFontSize: 16px;
    --ma-pListSize: calc(var(--ma-inHeight) - var(--ma-pListHeadHeight));
    
    --ma-artList-pSize: 100px;
    --ma-artList-outerWidth: calc(var(--ma-artList-pSize) + var(--ma-pListPadding)*2);
    --ma-artList-outerHeight: calc(var(--ma-pListHeadHeight) + var(--ma-artList-pSize) + var(--ma-pListPadding)*2);
    
    --ma-pList-pSize: 80px;
    --ma-pList-outerWidth: calc(var(--ma-pList-pSize) + var(--ma-pListPadding)*2);
    --ma-pList-outerHeight: calc(var(--ma-pListHeadHeight) + var(--ma-pList-pSize) + var(--ma-pListPadding)*2);
    
    --ma-titleFontSize: 26px;
    --ma-titleLineHeight: 40px;
    
    --ma-classFontSize: 12px;
    --ma-classLineHeight: 14px;
    
    --ma-txtFontSize: 16px;
    --ma-txtLineHeight: 20px;
}

/*** SMALL-SCREEN ***/
@media (max-width: 800px) {
    :root {
        --ma-margin: 30px;
        --ma-padding: 10px;
        
        --ma-vWidth: calc(100vw - var(--ma-margin)*2);

        --ma-pListPadding: 5px;
        --ma-pListHeadHeight: 15px;
        --ma-pListHeadFontSize: 12px;
        --ma-artList-pSize: 70px;
        --ma-pList-pSize: 50px;

        --ma-titleFontSize: 18px;
        --ma-titleLineHeight: 20px;

        --ma-classFontSize: 10px;
        --ma-classLineHeight: 10px;

        --ma-txtFontSize: 12px;
        --ma-txtLineHeight: 12px;
    }
}

div.modalArticleContainer {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(124, 80, 117, 0.5);
    z-index: 1001;
    opacity: 0.0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
div.modalArticleContainer.show { opacity: 1.0; }

div.modalArticleContainer span.close {
    display: block;
    position: absolute;
    top: calc(var(--ma-margin) / 4);
    right: calc(var(--ma-margin) / 4);
    width: calc(var(--ma-margin) / 2);
    height: calc(var(--ma-margin) / 2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/close-primary.svg);
    cursor: pointer;
}
div.modalArticleContainer span.close:hover,
div.modalArticleContainer:hover > div.modalArticle:not(:hover) > span.close { background-image: url(../img/close-active.svg); }

div.modalArticle {
    box-sizing: border-box;
    width: var(--ma-width);
    height: var(--ma-height);
    margin: auto;
    margin-top: var(--ma-margin);
    background-color: white;
    padding: var(--ma-padding);
    z-index: 1002;
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;
}

div.articlesListContainer { display: none; }
div.modalArticle.multiArticles > div.articlesListContainer {
    box-sizing: border-box;
    display: inline-block;
    width: var(--ma-artList-outerWidth);
    height: 100%;
    margin: 0;
    margin-right: calc(var(--ma-padding) - 3px);
    border: 1px solid var(--primary-color);
    overflow: hidden;
}
div.articlesListContainer > span.articlesListHeader {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: var(--ma-pListHeadHeight);
    background-color: var(--primary-color);
    color: white;
    line-height: var(--ma-pListHeadHeight);
    text-align: center;
    font-size: var(--ma-pListHeadFontSize);
}
div.articlesListContainer > ul.articlesList {
    box-sizing: border-box;
    width: 100%;
    height: var(--ma-pListSize);
    margin: 0;
    padding: var(--ma-pListPadding);
    list-style: none;
    overflow-x: hidden;
    overflow-y: scroll;
}
div.articlesListContainer > ul.articlesList > li {
    box-sizing: border-box;
    width: calc(var(--ma-artList-pSize) - 2px);
    height: calc(var(--ma-artList-pSize) - 2px);
    margin: 0;
    margin-bottom: var(--ma-pListPadding);
    border: 1px solid var(--primary-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
    cursor: pointer;
}
div.articlesListContainer > ul.articlesList > li:last-child { margin: 0; }

div.photoGroup {
    display: inline-block;
    box-sizing: border-box;
    width: var(--ma-inHeight);
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    margin-right: calc(var(--ma-padding) - 3px);
}
div.modalArticle.multiPhotos > div.photoGroup { width: calc(var(--ma-inHeight) + var(--ma-pList-outerWidth)); }

div.photoGroup > div.prw {
    display: inline-block;
    box-sizing: border-box;
    width: var(--ma-inHeight);
    height: var(--ma-inHeight);
    
    border: 1px solid var(--primary-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
    
    cursor: zoom-in;
}
div.photoGroup > div.prw.zoomax { cursor: zoom-out; }
div.photoGroup > div.prw.empty { cursor: inherit!important; }

div.photoGroup > div.photoPillsContainer { display: none; }
div.modalArticle.multiPhotos > div.photoGroup > div.photoPillsContainer {
    display: inline-block;
    box-sizing: border-box;
    width: var(--ma-pList-outerWidth);
    height: 100%;
    margin: 0;
    margin-left: -4px;
    padding: 0;
    border: 1px solid var(--primary-color);
    overflow: hidden;
}
div.photoGroup > div.photoPillsContainer > span.photoPillsHeader {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: var(--ma-pListHeadHeight);
    background-color: var(--primary-color);
    color: white;
    line-height: var(--ma-pListHeadHeight);
    text-align: center;
    font-size: var(--ma-pListHeadFontSize);
}
div.photoGroup > div.photoPillsContainer > ul.photoPills {
    box-sizing: border-box;
    width: 100%;
    height: var(--ma-pListSize);
    margin: 0;
    padding: var(--ma-pListPadding);
    text-align: center;
    list-style: none;
    overflow-x: hidden;
    overflow-y: scroll;
}
div.photoGroup > div.photoPillsContainer > ul.photoPills > li.pill {
    box-sizing: border-box;
    width: var(--ma-pList-pSize);
    height: var(--ma-pList-pSize);
    margin: 0;
    margin-bottom: var(--ma-pListPadding);
    border: 1px solid var(--primary-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/default_photo.svg);
    cursor: pointer;
}
div.photoGroup > div.photoPillsContainer > ul.photoPills > li.pill:hover,
div.photoGroup > div.photoPillsContainer > ul.photoPills > li.pill.selected { border-color: var(--active-color); }
div.photoGroup > div.photoPillsContainer > ul.photoPills > li.pill:last-child { margin: 0; }
div.photoGroup > div.photoPillsContainer > ul.photoPills > li.hide { display: none; !important }

div.infoGroup {
    display: block;
    box-sizing: border-box;
    padding: var(--ma-padding);
    border: 1px solid var(--primary-color);
    
    position: absolute;
    top: calc( var(--ma-margin) + var(--ma-padding));
    right: calc( var(--ma-margin) + var(--ma-padding));
    height: var(--ma-inHeight);
}

div.infoGroup span.icon {
    display: block;
    float: right;
    width: var(--ma-titleFontSize);
    height: var(--ma-titleFontSize);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
div.infoGroup span.icon.have { background-image: url(../img/have.svg); }
div.infoGroup span.icon.havent { background-image: url(../img/havent.svg); }

div.infoGroup > table { width: 100%; }
div.infoGroup th, div.infoGroup td { font-size: var(--ma-txtFontSize); text-align: left; line-height: var(--ma-txtLineHeight); }
div.infoGroup th { font-weight: 600; color: var(--active-color); }
div.infoGroup td { font-weight: 100; color: var(--primary-color); width: 100%; }
div.infoGroup th.name { font-size: var(--ma-titleFontSize); color: var(--primary-color); line-height: var(--ma-titleLineHeight); white-space: normal; }
div.infoGroup th.class { font-size: var(--ma-classFontSize); color: var(--active-color); line-height: var(--ma-classLineHeight); white-space: normal; }

div.modalArticle.zoom div.infoGroup {
    height: calc((var(--ma-inHeight) - var(--ma-padding)) / 2);
}

div.modalArticle > div.photoZoom { display: hide; }
div.modalArticle.zoom > div.photoZoom {
    display: block;
    box-sizing: border-box;
    height: calc((var(--ma-inHeight) - var(--ma-padding)) / 2);
    border: 1px solid var(--primary-color);
    
    position: absolute;
    right: calc( var(--ma-margin) + var(--ma-padding) );
    top: calc( var(--ma-margin) + (var(--ma-padding)*2) + ((var(--ma-inHeight) - var(--ma-padding)) / 2) );
    
    background-size: 150%;
}

div.modalArticle > div.photoZoom > ul.zoomInd {
    display: block;
    float: right;
    width: 30px;
    height: auto;
    margin: 0;
    padding: 0;
}

div.modalArticle > div.photoZoom > ul.zoomInd > li.zoomHead {
    display: block;
    padding: 0;
    margin: 20px 6px;
    width: 20px;
    height: 20px;
    background-image: url(../img/search-primary.svg);
    background-size: contain;
}

div.modalArticle > div.photoZoom > ul.zoomInd > li.zoomStep {
    display: block;
    padding: 0;
    margin: 20px 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color-light);
}

div.modalArticle > div.photoZoom > ul.zoomInd > li.active {
    background-color: var(--active-color);
}

div.modalArticle > div.infoGroup,
div.modalArticle > div.photoZoom { 
    width: calc( var(--ma-inWidth) - var(--ma-inHeight) - var(--ma-padding) );
}
div.modalArticle.multiArticles > div.infoGroup,
div.modalArticle.multiArticles > div.photoZoom { 
    width: calc(var(--ma-inWidth) - (var(--ma-artList-outerWidth) + var(--ma-inHeight) + var(--ma-padding)*2));
}
div.modalArticle.multiPhotos > div.infoGroup,
div.modalArticle.multiPhotos > div.photoZoom {
    width: calc(var(--ma-inWidth) - (var(--ma-inHeight) + var(--ma-pList-outerWidth) + var(--ma-padding)));
}
div.modalArticle.multiArticles.multiPhotos > div.infoGroup,
div.modalArticle.multiArticles.multiPhotos > div.photoZoom {
    width: calc(var(--ma-inWidth) - (var(--ma-artList-outerWidth) + var(--ma-inHeight) + var(--ma-pList-outerWidth) + var(--ma-padding)*2));
}

/*** VERTICAL MODE ***/

div.modalArticle.vertical { width: var(--ma-vWidth); }

div.modalArticle.vertical.multiArticles > div.articlesListContainer,
div.modalArticle.vertical.multiPhotos > div.photoGroup > div.photoPillsContainer {
    display: block;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
div.modalArticle.vertical.multiArticles > div.articlesListContainer { height: var(--ma-artList-outerHeight); margin-bottom: var(--ma-padding); }
div.modalArticle.vertical.multiPhotos > div.photoGroup > div.photoPillsContainer { height: var(--ma-pList-outerHeight); margin-top: -3px; }

div.modalArticle.vertical > div.articlesListContainer > ul.articlesList,
div.modalArticle.vertical > div.photoGroup > div.photoPillsContainer > ul.photoPills { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
    text-align: center;
}

div.modalArticle.vertical > div.articlesListContainer > ul.articlesList > li,
div.modalArticle.vertical > div.photoGroup > div.photoPillsContainer > ul.photoPills > li { 
    display: inline-block; 
    margin-bottom: 0; 
    margin-right: var(--ma-pListPadding);
}
div.modalArticle.vertical > div.articlesListContainer > ul.articlesList > li:last-child,
div.modalArticle.vertical > div.photoGroup > div.photoPillsContainer > ul.photoPills > li:last-child { margin: 0; }

div.modalArticle.vertical > div.photoGroup { 
    display: block;
    width: var(--ma-vInWidth); 
    height: var(--ma-vInWidth);
    margin-right: 0;
    margin-bottom: var(--ma-padding);
}
div.modalArticle.vertical.multiPhotos > div.photoGroup { height: calc(var(--ma-vInWidth) + var(--ma-pList-outerHeight)); }
div.modalArticle.vertical > div.photoGroup > div.prw { width: var(--ma-vInWidth); height: var(--ma-vInWidth); cursor: inherit; }

div.modalArticle.vertical > div.infoGroup {
    position: inherit;
    width: var(--ma-vInWidth);
    height: auto;
    min-height: calc(var(--ma-inHeight) - (var(--ma-vInWidth) + var(--ma-padding) + 3px));
}
div.modalArticle.vertical.multiArticles > div.infoGroup { width: var(--ma-vInWidth); min-height: calc(var(--ma-inHeight) - (var(--ma-artList-outerHeight) + var(--ma-vInWidth) + var(--ma-padding)*2 + 3px)); }
div.modalArticle.vertical.multiPhotos > div.infoGroup { width: var(--ma-vInWidth); min-height: calc(var(--ma-inHeight) - (var(--ma-vInWidth) + var(--ma-pList-outerHeight) + var(--ma-padding) + 3px)); }
div.modalArticle.vertical.multiArticles.multiPhotos > div.infoGroup { width: var(--ma-vInWidth); min-height: calc(var(--ma-inHeight) - (var(--ma-artList-outerHeight) + var(--ma-vInWidth) + var(--ma-pList-outerHeight) + var(--ma-padding)*2 + 3px)); }

div.modalArticle.vertical .photoZoom { display: none!important; }

/**********************************************************/
/*** SEARCH ***********************************************/
/**********************************************************/

div.search-container {
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

div.search-container > div.search-nav {
    width: 230px;
    overflow-x: hidden;
    overflow-y: scroll;
    float: left;
}

h1.search.nav.title {
    font-size: 18px;
    color: var(--primary-color);
    margin-top: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary-color);
}

h2.search.nav.results {
    color: var(--primary-color);
    border-top: 2px solid var(--primary-color);
    padding-top: 15px;
}

h2.search.nav.results > span {
    font-style: italic;
    font-weight: 400;
}

div.input-group.search {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
}

div.input-group > input[name=search] {
    box-sizing: border-box;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    color: var(--active-color);
    padding: 4px;
    border: 1px solid var(--active-color);
    border-radius: 4px;
}

div.input-group > input[name=search]::placeholder {
  color: var(--active-color);
  opacity: 0.5;
}

div.input-group.search > button.btnClearSearch {
    display: block;
    float: right;
    width: 18px;
    height: 25px;
    border: none;
    background: no-repeat center/50% url(../img/close-active.svg);
    position: relative;
    margin-top: -25px;
    cursor: pointer;
}
div.input-group.search > button.btnClearSearch.hide { display: none; }

div.input-group > label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

div.input-group > select {
    margin-top: 5px;
    width: 100%;
    font-size: 14px;
    color: var(--primary-color);
    padding: 4px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    margin-bottom: 10px;
}

div.search-list {
    float: right;
    width: 990px;
    text-align: center;
    overflow-x: hidden;
    overflow-y: scroll;
}

@media (max-width: 1260px) { 
    div.search-container { width: 100%; }
    div.search-container > div.search-nav { width: 146px; }
    div.search-container > div.search-list { 
        padding-top: 10px;
        width: calc(100% - 160px);
    }
}

@media (max-width: 800px) {
    div.search-container > div.search-nav,
    div.search-container > div.search-list { width: 100%; }
}