/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('assets/webfonts/BebasNeue-webfont.eot');
    src: url('assets/webfonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/webfonts/BebasNeue-webfont.woff') format('woff'),
         url('assets/webfonts/BebasNeue-webfont.ttf') format('truetype'),
         url('assets/webfonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('assets/webfonts/DroidSerif-webfont.eot');
    src: url('assets/webfonts/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/webfonts/DroidSerif-webfont.woff') format('woff'),
         url('assets/webfonts/DroidSerif-webfont.ttf') format('truetype'),
         url('assets/webfonts/DroidSerif-webfont.svg#DroidSerif') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('assets/webfonts/DroidSerif-Italic-webfont.eot');
    src: url('assets/webfonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/webfonts/DroidSerif-Italic-webfont.woff') format('woff'),
         url('assets/webfonts/DroidSerif-Italic-webfont.ttf') format('truetype'),
         url('assets/webfonts/DroidSerif-Italic-webfont.svg#DroidSerif') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('assets/webfonts/DroidSerif-Bold-webfont.eot');
    src: url('assets/webfonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/webfonts/DroidSerif-Bold-webfont.woff') format('woff'),
         url('assets/webfonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
         url('assets/webfonts/DroidSerif-Bold-webfont.svg#DroidSerif') format('svg');
    font-weight: bold;
    font-style: normal;
}

html {
    box-sizing: border-box;
    overflow-y: scroll;
}

* {
    box-sizing: inherit;
}

*::before, *::after {
    box-sizing: inherit;
}

body {
	background: #fff;
	color: #757575;
	font-family: 'DroidSerif', Georgia, Times, "Times New Roman", serif;
	font-size: 14px;
	line-height: 1.3em;
}

img { border: none; }

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #757575; }
a:active { text-decoration: none; color: #757575; }
a:visited { text-decoration: none; color: #757575; }
a:hover { text-decoration: underline; color: #757575; }
a img { border: none; }

::selection {
    background: #990033;
    color: #fff !important;
}

::-moz-selection {
    background: #990033;
    color: #fff !important;
}

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }
strong {	color: #222; font-weight: normal; }

img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

embed,
iframe,
object,
video {
    margin-bottom: 1.6em;
    max-width: 100%;
    vertical-align: middle;
}

svg {
    max-width: 100%;
    fill: currentColor;
}

/* headings */
h1 { font-size: 14px; margin-bottom: 1em; font-weight: bold; }
h2 { font-size: 14px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 14px; margin-bottom: 1em; }
h4 { font-size: 14px; margin-bottom: 1em; }

input, select { font-family: 'DroidSerif', Georgia, Times, "Times New Roman", serif; }

#index .top h1 { font-family: BebasNeueRegular; font-size: 40px; font-weight: normal; margin: 0; }
#index .top h1 a {color: #666 !important; }
#index .top h2 { font-size: 17px; font-style:italic; margin: 0; }
#index .top .separator { font-size: 30px; }

/* paragraph width */
#index p { margin-bottom: 1em; }
/* #exhibit p, code, blockquote { margin-bottom: 1em; } */

#exhibit p, code, blockquote { width: 100%; max-width: 450px; margin-bottom: 1em; }

/* highlighter style - maybe you want to change colors? */
.highlight { color: #990033; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
/*#index { position: fixed; top: 0; left: 40px; width: 320px; height: 100%; padding: 0; overflow: hidden; background: rgba(255, 255, 255, .7); z-index: 2000; }
#exhibit { margin: 0 0 0 380px; }*/

#exhibit { margin: 0; }
#index {
    width: 100%;
    height: auto;
    max-height: 100vh;
    bottom: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}

/* styling the index */
#index ul { list-style: none; margin-bottom: 0.5em; }
#index ul.section { margin-bottom: 0.6em; }
#index ul.subsection { list-style: url('assets/images/bullet.png') inside; margin-bottom: 0.8em; }
/* #index ul.active_section { margin-bottom: 1.8em; } */
#index ul ul li { margin: 0.1em 0 0 0; }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

#index ul.section span.section_title, 
#index ul.section span.section_title a { color: #990033; font-family: BebasNeueRegular; font-size: 22px; font-weight: normal; text-transform: uppercase; } 

#index ul.section span.subsection_title, 
#index ul.section span.subsection_title a { color: #757575; }

#index ul.section li.exhibit_link a { color: #990033; font-family: BebasNeueRegular; font-size: 22px; font-weight: normal; text-transform: uppercase; }

/* active section title */
#index .active_section .section_title,
#index .active_section .section_title a { }

/* active exhibit title parts */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ color: #373535; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
#index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link { color: #757575; } 
#index a:hover { color: #757575; text-decoration: none; } 
#index a:active { color: #757575; } 
#index a:visited { color: #757575; }

/* links styles only for the #exhibit region */
#exhibit a:link { font-style: italic; } 
#exhibit a:hover {  } 
#exhibit a:active {  } 
#exhibit a:visited {  } 

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 50px 20px 25px 20px; }

/* this is where you pad them separately */
#index .container { padding: 0; }
#index .container .separator { display: none; }
#exhibit .container { margin-top: 105px; padding-top: 30px; font-size: 14px; }
#exhibit #img-container { }

#index .top { position: relative; margin-bottom: 1em; color: #666; }
#index .bot { margin-top: 2.5em; }

#img-container .captioning .title { margin-top: 10px !important; font-weight: bold; }
#img-container .captioning .caption { margin-top: 10px; color: #757575; }
#img-container .captioning .caption p { width: 300px !important; }

#exhibit .textor { clear: both; margin-top: 30px; min-height: 10px; }

/* copyright */
.copyright { font-size: 12px; }

/* no show format */
.format-no_show #exhibit .container { }

/* slideshow format */
.format-slideshow #exhibit #textspace { width: 600px; }
.format-slideshow #exhibit .placement-bottom { margin: 30px 0 0 0 !important; }
.format-slideshow #slideshow-nav { font-size: 20px; }
.format-slideshow #slideshow-nav a { text-decoration: none; }
.format-slideshow #slideshow-nav #total { display: none; }

.format-slideshow #exhibit #slideshow .picture { overflow: hidden; white-space: nowrap; }
.format-slideshow #exhibit #slideshow img { display: inline-block; }
.format-slideshow #exhibit #slideshow .captioning { display: inline-block; width: 300px; margin: 0 0 0 15px; }
.format-slideshow #exhibit #slideshow .captioning .caption { position: absolute; bottom: 0; font-size: 12px; font-style: normal; }
.format-slideshow #exhibit #slideshow .captioning .title { position: absolute; bottom: 0; }

/* slick format */
.format-slick #exhibit #slideshow .picture { display: flex; align-items: flex-end; overflow: hidden; /* white-space: nowrap;*/ }
.format-slick #exhibit #slideshow img { /* display: inline-block; */ }
.format-slick #exhibit #slideshow .captioning { /*display: inline-block;*/ width: 300px; margin: 0; }
.format-slick #exhibit #slideshow .captioning .caption { /* position: absolute; bottom: 0; */ font-size: 12px; font-style: normal; }
.format-slick #exhibit #slideshow .captioning .title { /* position: absolute; bottom: 0; */ }

.format-slick #exhibit .placement-bottom { margin: 30px 0 0 0 !important; }
.format-slick #slideshow-nav { padding: 20px 0; font-size: 20px; }
.format-slick #slideshow-nav a { text-decoration: none; }
.format-slick #slideshow-nav .slick-info { display: none; }
.format-slick #slideshow-nav .slick-separator { display: none; }
.format-slick #exhibit .slick-arrow { cursor: pointer; }

/* horizontal format */
.format-horizontal .textor { clear: both; margin: 30px 0 0 0; }
.format-horizontal #exhibit { height: 100vh; overflow-x: auto; }
.format-horizontal #img-container { display: inline-block; white-space: nowrap; width: auto; }
.format-horizontal #img-container .picture { display: inline-block; float: none; width: auto !important; }
.format-horizontal #img-container .separator { display: inline-block; float: none !important; }
.format-horizontal #img-container .picture img { max-height: 60vh; width: auto; max-width: none; }
.format-horizontal #img-container .picture .captioning { width: auto !important; }

/* multilanguage */
.lg { display: none; }
.lg-select { margin: 0 0 30px 0; font-size: 14px; }
.lg-select ul li { display: inline; margin-right: 10px; }
.lg-select ul li.active a { font-weight: bold; }

/* paypal button */
.paypal_button { text-align: center; padding: 7px 0; }
.paypal_button .price-field { font-size: 20px; margin-bottom: 10px; }
.paypal_button .shipping-field { margin-bottom: 10px; }
.paypal_button select { padding: 2px; border: 1px dotted #aaa; font-size: 12px; color: #757575; }
.paypal_button .submit-field { margin-bottom: 10px; }
.paypal_button .button.addtocart { width: 96px; height: 21px; background: url('https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif') no-repeat 0 0 ; border: none; font-size: 0; color: transparent; cursor: pointer; }
#PPMiniCart { top: 25% !important; z-index: 3000; }

/* contact section */
.exhibit-9 .textor {
	margin-top: 0 !important;
	width: 300px !important;
}

button {
    -webkit-appearance: button;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    color: inherit;
    cursor: pointer;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0.4278em 1.25em;
}

.menu-toggle {
    position: absolute;
    right: 0;
    top: 25%;
    background-color: transparent;
    color: rgba(151, 151, 151, 0.9);
    border: 1px solid rgba(151, 151, 151, 0.9);
    height: 42px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    transform: translateY(-25%);
    width: 42px;
    z-index: 1;
}
.menu-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.menu-toggle svg:first-child {
    display: inline-block;
}
.menu-toggle svg:last-child {
    display: none;
}
.menu-toggle:hover, .menu-toggle:focus {
    background-color: transparent;
    outline: 0;
}
.menu-toggle.toggled-on svg:first-child {
    display: none;
}
.menu-toggle.toggled-on svg:last-child {
    display: inline-block;
}

.nav-menu {
    display: none;
}

.nav-menu.toggled-on {
    display: block;
}

/**
 * Desktop Small 955px
 */

@media screen and (min-width: 59.6875em) {

    .nav-menu {
        display: block;
    }
    
    #index {
        height: 100%;
        width: 380px;
        padding: 0 50px 0 70px;
        background: rgba(255, 255, 255, 0.95);
        overflow: hidden;
        z-index: 1;
    }

    #index .container { padding: 50px 9px 25px 27px; }

    #index .container .separator { display: block; }

    .menu-toggle {
        display: none;
    }
    
    .container {
        padding: 50px 9px 25px 27px;
    }

    #exhibit {
        margin: 0 0 0 380px;
    }

    #exhibit .container {
        margin-top: 65px;
    }
    
    #exhibit #img-container { padding-right: 50px; }

    .format-no_show #exhibit .container {
        width: 600px;
    }

    .format-slick #exhibit #textspace { width: 600px; }
    .format-slick #exhibit #slideshow .picture { overflow: hidden; white-space: nowrap; }
    .format-slick #exhibit #slideshow .captioning { /*display: inline-block;*/ width: 300px; margin: 0 0 0 15px; white-space: normal; }
    .format-slick #exhibit #slideshow .captioning .caption { /*position: absolute; bottom: 0;*/ font-size: 12px; font-style: normal; }
    .format-slick #exhibit #slideshow .captioning .title { /*position: absolute; bottom: 0;*/ }

    .format-horizontal #exhibit {
        overflow-x: visible;
    }

}