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

* {
	margin: 0;
	padding: 0;
}

svg { cursor: pointer; }

body {

	padding: 40px 0px 0px 0px;
	margin-bottom:2em;
	
}

 p {
    font-family: Roboto, Verdana, Sans-serif;
	font-size: 90%;
	line-height: 130%;
	font-weight: 400;

}

/** Main Title	**/
h1 { font-size: 120%; 
	text-align: center;
    font-family: Roboto, Verdana, Sans-serif;	
	text-transform:uppercase;
	color: #fff;
	background-color:#00a196;
	/*font-weight: lighter;*/
	letter-spacing: 2px;
	font-weight: 400;
	line-height: 150%;
	padding: 10px 10px 7px 10px;
	margin: 120px 0px 40px 0px;
}
/** Title	**/
h2 { font-size: 120%; 
	text-align: center;
    font-family: Roboto, Verdana, Sans-serif;
	text-transform:uppercase;
	color: #000;
	background-color:#f1f2f2;
	letter-spacing: 2px;
	font-weight: 400;
	line-height: 150%;
	padding: 10px 10px 5px 10px;
	margin: 40px 0px 40px 0px;
	border-bottom: 2px solid #00a196;
	}
	
	/** Sub Title	**/
h3 { font-size: 100%; 
	text-align: center;
    font-family: Roboto, Verdana, Sans-serif;
	text-transform:uppercase;
	color: #000;
	background-color:#f1f2f2;
	letter-spacing: 2px;
	font-weight: 300;
	line-height: 150%;
	padding: 10px 10px 5px 10px;
	margin: 40px 0px 40px 0px;
	border-bottom: 2px solid #00a196;
	}
	
	/** TRAIN LIST	**/
h4 { font-size: 90%;
    font-family: Roboto, Verdana, Sans-serif;
	text-transform:uppercase;
	letter-spacing: 2px;
	font-weight: 300;
	line-height: 150%;
	padding: 0px 5px 0px 15px;
	margin: 5px 0px 0px 0px;

	}
	
/** Tickets text right	**/
h5 { font-size: 90%;
    font-family: Roboto, Verdana, Sans-serif;
	font-weight: 400;
	line-height: 130%;
	padding: 30px 15px 0px 5px;
	text-align: right;

	}

	
/** Image Source	**/
h6 { font-size: 60%;
    font-family: Roboto, Verdana, Sans-serif;
	font-weight: 300;
	line-height: 100%;
	color: #626366;
	padding: 10px 27px 0px 10px;
	text-align: right;

	}
	




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

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }



/* paragraph width */
#index p { margin-bottom: 1em;  margin: auto;
width: 100%;
max-width: 800px;}



#exhibit p, code, blockquote {  
margin: auto;
width: 96%;
max-width: 800px;
margin-bottom: 1em; /* line-height: 1.3em; */ 
margin: 0px 0px 1em 15px;
}

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

/* 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 { 	
	width: 100%;
	max-width: 800px;
	margin: auto;
    overflow: hidden;
    position: relative;
	top: 0;
	z-index: 100;
	text-align: right;
	height: auto;
}
	
#exhibit {
padding: 30px 0px 0px 0px; 
height: 100%;
margin: auto;
width: 100%;
max-width: 800px;
}

/* styling the index */
#index ul { list-style: none; margin: 0; }
#index ul.section { margin-bottom: 1em; }
#index ul.subsection { }

/* 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 {  }

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{ 
	font-family: Crimson Text, Verdana, Sans-serif;
	list-style: none;
	padding: 15px 0px 0px 0px; 
	}



.exhibit_title 
{ 
	font-family: Crimson Text, Verdana, Sans-serif;
	list-style: none;
	padding: 15px 0px 0px 0px; 
}
	
	
/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; }

/* active exhibit title parts */
/* color of active exhibit title link and font-weight */
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
{ font-weight: normal; color: #00f; 
display: inline; 
list-style-type: none;}

/* 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 {  } 
#index a:visited {  }
#index a:hover {  } 
#index a:active {  } 

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

/* links styles just for h1 title of site (your name/logo) */
/*#index h1 a { font-weight: normal; text-decoration: none; color: #000; }*/

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

/* this is where you pad them separately */
/#index .container { 
text-align: right;
}
#exhibit .container { }

/* size and style of titles and captions (not mobile though) */
.captioning { margin-top: 2px; }
.title { font-size: 0.7em; font-style: italic; line-height: 1.2em; }
.caption { font-size: 0.7em; font-style: italic; line-height: 1.2em; }



.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.noSel.smooth_zoom_preloader {
    aspect-ratio : 1 / 1;
	touch-action: none;
}



.bookmarks {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	padding: 10px 0px 10px 0px;
	display: block;
}




#tickets a:link 
{ 	float: right;
	text-align: center;
	text-decoration: none; 
	font-family: Roboto, Verdana, Sans-serif;
	text-transform:uppercase; 
	font-size: 120%; 
	letter-spacing: 1px;
	font-weight: 500;
	color: #fff; 
	background-color: #000; 
	padding: 10px 30px 10px 30px;
	margin: 0px 15px 5px 0px;
	}
#tickets a:active { text-decoration: none; text-transform:uppercase; color: #fff; background-color: #000; }
#tickets a:visited { text-decoration: none; text-transform:uppercase; color: #fff; background-color: #000; }
#tickets a:hover { text-decoration: none; text-transform:uppercase; color: #fff; background-color: #000; }


header {
	margin: auto;
	width: 100%;
	max-width: 800px;
	text-align: center;
    font-size: 100%;
    font-family: Roboto, Verdana, Sans-serif;

	}


/**
#footer a:link { text-decoration: none; font-size: 100%; color: #fff;  letter-spacing: 2px; padding: 10px 10px 10px 10px;  }
#footer a:active { text-decoration: none; font-size: 100%; color: #fff; padding: 10px 10px 10px 10px; }
#footer a:visited { text-decoration: none; font-size: 100%; color: #fff; padding: 10px 10px 10px 10px; }
#footer a:hover { text-decoration: none; font-size: 100%; color: #bcbec0; padding: 10px 10px 10px 10px; }
*//




#footer a:link { text-decoration: none; font-size: 100%; color: #fff;  letter-spacing: 1px; padding: 10px;  }
#footer a:active { text-decoration: none; font-size: 100%; color: #fff;  }
#footer a:visited { text-decoration: none; font-size: 100%; color: #fff;  }
#footer a:hover { text-decoration: none; font-size: 100%; color: #fff;  }

#footer {
	margin: 120px auto 0px;
	width: 100%;
	max-width: 800px;
	text-align: center;
	padding: 5px 5px 5px 5px; 
    font-size: 100%;
    font-family: Roboto, Verdana, Sans-serif;
	background-color: #000;
	padding: 20px 0px 20px 0px;
	line-height: 400%; 
	}