/*@import url(http://);*/

@font-face {
    font-family: 'OldStd-R';
    src: url('../font/OldStandard-Regular.ttf');
    src: url('../font/OldStandard-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OldStd-I';
    src: url('../font/OldStandard-Italic.ttf');
    src: url('../font/OldStandard-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Apercu-B';
    src: url('../font/apercu_bold.otf');
    src: url('../font/apercu_bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* { 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html, body, p {
    margin: 0;
    padding: 0;

    font-family: 'OldStd-R', Georgia, serif;
    font-size: 1em;
    width: 100%;
    height: 100%; 
}

ul, li, h1, h2, h3 {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a:visited, a:focus { color: #000; }

body { background: url(../img/point.png); background-size: 11px 11px; }

/* ========== Menu ========== */

#menu { position: fixed; height: auto; width: 100%; background: #000; text-align: center; z-index: 999; }
#topMenu, #midMenu { height: 2em; width: 100%; }
#menu .logo { position: absolute; left: 1em; top: 0.313em; height: 1.5em; width: 3.75em; background: url(../img/logo-esban.svg) no-repeat; background-size: auto 100%; }
#menu .logo:hover { cursor: pointer; }
#topMenu li { display: inline; font: 1em/2em 'Apercu-B', sans-serif; text-transform: uppercase; padding: 0 0.313em; color: #FFF; }
#topMenu li a { color: #FFF; text-decoration: none; }
#topMenu li a:hover, .active a { border-bottom: 1px solid #FFF; }
#topMenu .ccl { display: none; }

#midMenu { text-align: center; background: #48E7CD; overflow: hidden; z-index: 999; }
#midMenu li { display: inline; font: 1em/2em 'OldStd-I', serif; color: #FFF; }
#midMenu li:before { content: '/ '; }
#midMenu li:first-child:before { content: ''; }

/* ========== StudentList ========== */

#blocStudent { width: 100%; height: auto; padding-top: 4em; }
.StudentList, .CatalogueList, .ExpoList { width: 100%; height: auto; padding: 0.250em 1em 0 1em; border-bottom: 1px solid #000; background: #FFF; }
div.student, div.catalogue, div.exposition { cursor: pointer; }
div.student:hover p, div.catalogue:hover p, div.exposition:hover p { color: #48E7CD; }
div.student p, div.catalogue p, div.exposition p { display: inline-block; margin: 0.375rem -0.313rem 0 0; overflow: hidden; text-overflow: ellipsis; }
div.student .name, div.catalogue .name, div.exposition .name { width: 60%; font-size: 4vw; line-height: 1; padding-right: 1em; }
div.student .option, div.catalogue .option, div.exposition .option { width: 28%; font-size: 1.188em; line-height: 1; }
div.student .option span, div.catalogue .option span, div.exposition .option span { font-family: 'OldStd-I', serif; }
div.student .year, div.catalogue .year, div.exposition .year { width: 12%; text-align: right; font-size: 1.188em; line-height: 1; }
.CatalogueList a { text-decoration: none; color: #000; }

/* ========== HomeList ========== */

.HomeList { width: 100%; height: auto; padding: 1em 1em 0 1em; background: #FFF; overflow: hidden; }
.hmc { padding-top: 3em; background: #48E7CD; }
.HomeInfo { text-align: center; }
.HomeInfo p { font-size: 14vw; line-height: 15vw; color: #48E7CD; white-space: nowrap; opacity: 0; }
.HomeInfo p span { font-family: 'OldStd-I', serif; color: #000; }
.HomeInfo .RtoL { margin-left: -50%; }
.HomeInfo .LtoR { margin-left: 50%; }

/* ========== StdContent ========== */

.StudentList .StdContent { display: none; width: 100%; }
.StudentList .StdContent .BlocImage, 
.StudentList .StdContent .BlocText { float: left; }
.StudentList .StdContent .BlocImage { width: 60%; height: 100%; margin-right: 0; padding: 1em 2em 4em 0; line-height: 0; }
.StudentList .StdContent .BlocImage .image { width: 100%; height: 100%; overflow: hidden; }
.StudentList .StdContent .BlocImage .image ul { display: inline-block; width: 100%; height: auto; }
.StudentList .StdContent .BlocImage .image li { display: none; cursor: pointer; }
.StudentList .StdContent .BlocImage .image li:first-child { display: block; }
.StudentList .StdContent .BlocImage .image img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

.StudentList .StdContent .caption { display: inline-block; width: 100%; margin-top: 1em; }
.StudentList .StdContent .caption li { display: inline; font-size: 1em; line-height: 1.4; }
.StudentList .StdContent .caption li:nth-child(2n+0) { padding: 0 1em; }
.StudentList .StdContent .caption li a { color: #000; font-family: 'OldStd-I', serif; text-decoration: none; }
.StudentList .StdContent .caption li a:hover { color: #48E7CD; }

.StudentList .StdContent .BlocText { width: 40%; height: 100%; padding: 1em 0 2em 0; /*background: red;*/ }
.StudentList .StdContent .BlocText .text { width: 100%; height: 100%; overflow: auto; /*background: green;*/ }
.StudentList .StdContent .BlocText .text p { font-size: 1.5vw; line-height: 2vw; margin: 0; }
.StudentList .StdContent .BlocText .text p:nth-child(n+2) { text-indent: 3em; }

#ApercuImg { display: none; position: fixed; width: 20%; height: 25%; z-index: 999; }
#ApercuImg img { max-width: 100%; max-height: 100%; }

/* ========== Credits ========== */

#credits { position: absolute; padding: 2em 16%; background: #FFF; margin-top: 2em; text-align: center; width: 100%; }
#credits h4 { font-size: 1em; line-height: 1.4; font-weight: normal; margin: 0; }
#credits p a { font-family: 'OldStd-I', serif; color: #48E7CD; text-decoration: none; }
#credits p a:hover { border-bottom: 1px solid #48E7CD; }
#credits .link-none { font-family: 'OldStd-R', serif; color: #000; }

/* ========== End ========== */




@media screen and (max-width: 1024px) {

    .StudentList .StdContent .caption li { font-size: 1.4vw; }

}

@media screen and (max-width: 980px) { 

    div.student .name, div.catalogue .name, div.exposition .name { font-size: 2.5rem; line-height: 1; }
    div.student .option, div.catalogue .option, div.exposition .option,
    div.student .year, div.catalogue .year, div.exposition .year,
    .StudentList .StdContent .BlocText .text p { font-size: 1em; line-height: 1.4; }
    .StudentList .StdContent .caption li { font-size: 0.875em; }

}

@media screen and (min-width: 1300px) {

    html, body { font-size: 1.1em; }

}

@media screen and (min-width: 1600px) {

    html, body { font-size: 1.2em; }

}