/* =========================================== */
/* GLOBAL RULES */
/* =========================================== */

body {
    background: black url(../img_common/200305cvs_jug-of-wine_qual50_1200x895.jpg) 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: Noto, Liberation, serif;
    font-size: 16px;
}
div#bg-paper-90 {
    background: url(../img_common/bg-color_ffffeb_500x500.png) 0 0 repeat;
    margin: 0 100px 0 220px;
    opacity: 0.9;
    border-radius: 50px;
}
div#bg-paper-100 {
    background: url(../img_common/bg-color_ffffeb_500x500.png) 0 0 repeat;
    margin: 0 100px 0 220px;
    border-radius: 50px;
}

/*====================================-*/

header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 50px 10px 220px;
}
    header > h1 {
    font-size: 200%;
    font-style: italic;
    font-weight: 900;
    text-align: center;
    letter-spacing: 1px;
    color: #5c2610;
    }
        
nav {
    background: url(../img_common/bg-color_500x500.png) 0 0 repeat;
    position: fixed; top: 40px; left: 50px; 
    border: 1px solid #873c24;
    border-radius: 25px;
    color: #5c2610;
    width: 150px;
    font-size: 90%;
    text-align: center;
    padding: 10px 0;
    z-index: 1;
}
nav > ul {
    list-style: none;
    line-height: 1.4em;
}
.spacer {
    font-size: 70%;
    line-height: 1em;
    opacity: 0.5;
}
    
a {text-decoration: none;}
a:link {color: #873c24;}
a:visited {color: #da4f4f;}
a:hover {color: #873c24; background-color: #ded7c2;}
a:active {color: purple;}
}

div#nota { 
margin: 0;
padding: 0;
}
div#nota > p {
    margin: 0 200px;
    padding: 20px 0;
    border-top: solid 2px;
    border-top-color: #873c24;
    line-height: 1.5em;
    text-align: center;
    font-style: italic;
    font-size: 90%;
}

p.top {
    text-align: center;
    font-size: 80%
}
em {font-style: italic;}

/*===============================================
 * ==============================================*/
div#container {
    margin: 30px 0;
}
    div#container h1 {
        margin: 20px 150px;
        padding: 20px 0 10px 0;
        font-size: 140%;
        font-style: italic;
        line-height: 150%;
        text-align: center;
        color: #873c24;
    }
    div#container h2 {
        margin: 20px 30px 0 30px;
        padding: 20px 0 10px 0;
        font-size: 140%;
        font-style: italic;
        line-height: 150%;
        color: #873c24;
    }
    div#container h3 {
        padding: 20px 0 10px 20px;
        font-size: 110%;
        font-style: italic;
        line-height: 150%;
    }
    div#container h1::first-letter {
        font-size: 150%;
        font-weight: bold;
    }
    div#container h2::first-letter {
        font-size: 150%;
        font-weight: bold;
    }
    div#container h3::first-letter {
        font-size: 120%;
        font-weight: bold;
    }
    div#container figure img {
        padding: 0 20px;
    }
        div#container figure > figcaption {
            line-height: 1.3em;
            text-align: center;
            font-size: 80%;
            color: #873c24;
        }
    div#container p {
        padding: 0 0 10px 20px;
    }
    div#container ul {
        padding: 0 30px 0 60px;
    }
        div#container ul li::marker {
            content: "▹ ";  /*characters ▹ */
            font-size: 110%;
            color: #873c24;
            }
    div#container ul>li>ul {
        margin: 0 30px 0 20px;
    }
        div#container ul>li>ul>li::marker {
        content: "⟣ ";  /*characters ⟣ */
        font-size: 110%;
        color: #873c24;
        }
/*===============================================
 * ==============================================*/

div.col-lev2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 30px 0 50px;
    }
    
div.col-lev3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    }
    
div.row-lev2 {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    margin: 0 30px 0 50px;
    }
    
div.row-lev3 {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    }
/*===============================================
 * ==============================================*/
    
/* ############################################## */
/* ========== THUMBslider CLASS ================= */
.thumbslider1R {
    position: relative;
    height: 594px;
    width: 728px;
    overflow: hidden;
    margin: 10px 20px;
}
.thumbslider2R {
    position: relative;
    height: 668px;
    width: 728px;
    overflow: hidden;
    margin: 10px 20px;
}
.thumbslider3R {
    position: relative;
    height: 742px;
    width: 728px;
    overflow: hidden;
    margin: 10px 20px;
}
.thumbsliderArtBk {
    position: relative;
    height: 1142px;
    width: 728px;
    overflow: hidden;
    margin: 10px 20px;
}
.thumbslider1R figure {
    float: left;
}
.thumbslider2R figure {
    float: left;
}
.thumbslider3R figure {
    float: left;
}
.thumbsliderArtBk figure {
    float: left;
}
.large1R {
    position: absolute;
    top: 594px;
    left: 60px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.large2R {
    position: absolute;
    top: 668px;
    left: 60px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.large3R {
    position: absolute;
    top: 742px;
    left: 60px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.largeArtBk {
    position: absolute;
    top: 1142px;
    left: 60px;
    z-index: 1;
        -webkit-transition: top 1s ease;
        -moz-transition: top 1s ease;
        -o-transition: top 1s ease;
        -ms-transition: top 1s ease;
        transition: top 1s ease;
}
.instruction {
    position: absolute;
    top: 258px;
    width: 268px;
    margin: 0 0 0 230px;
    text-align: center;
    font-size: 80%;
    border: solid 1px #873c24;
    border-radius: 25px;
    color: #873c24;
}
a:hover .thumb {
    background-color: #d1c49d;
}
 
a:hover .large1R {
  top: 80px;
}
a:hover .large2R {
  top: 160px;
}
a:hover .large3R {
  top: 240px;
}
a:hover .largeArtBk {
  top: 240px;
}
figure.thumb img {
    padding: 0px 0 0 0px;
}
figure.thumbArtBk img {
    padding: 5px 0 0 5px;
}
figure.thumbArtBk figcaption {
    text-align: center;
    font-size: 90%;
    padding: -5px 0 0 0;
}
figure.large1R figcaption {
    text-align: center;
    font-size: 90%;
}
figure.large2R figcaption {
    text-align: center;
    font-size: 90%;
}
figure.large3R figcaption {
    text-align: center;
    font-size: 90%;
}
figure.largeArtBk figcaption {
    text-align: center;
    font-size: 90%;
}
/* ############################################## */