@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
.cmscontent ol, .cmscontent ul {
margin: 20px 0 20px 30px;
list-style: disc;
}
.cmscontent li {
margin-bottom: 15px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type=hidden]{
visibility:hidden;
}
/* slightly enhanced, universal clearfix hack */
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix{
display:inline-block;
}
/* start commented backslash hack \*/
* html .clearfix{
height:1%;
}
.clearfix{
display:block;
}
/* stop commented backslash hack */
html{
background-color:#fff;
background-image:url('/image/1018/1200/tsar-gala-v4.jpg');
background-position:50% 0;
background-repeat:no-repeat;
background-size:cover;
color:#000;
height:100vh;
margin:0;
}
strong{
font-weight:bold;
}
em{
font-style:italic;
}
/* Body
*********************************************************/
body{
font-size:100%;
font-family:'Montserrat', sans-serif;
margin:0;
height:100vh;
overflow:hidden;
}
body:after{
display:block;
content:'';
position:absolute;
right:0;
top:0;
bottom:0;
width:10vw;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#aaffff',GradientType=1 );
z-index:40;
pointer-events:none;
}
input, textarea, button{
font-size:100%;
font-family:'Montserrat', sans-serif;
}
header{
position:absolute;
top:0;
width:100%;
height:10vh;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index:42;
}
header nav{
position:absolute;
top:0;
}
header nav ul{
}
header nav ul li{
display:inline-block;
vertical-align:middle;
font-size:1.5em;
background-color:rgba(0,0,0,0.6);
color:#dcdddd;
}
header nav ul li:hover{
}
header nav ul li a{
padding:14px;
display:block;
color:#dcdddd;
text-align:center;
min-width:1em;
}
header nav ul li a:hover{
color:#ffffff;
background-color:rgba(0,0,0,0.3);
}
header nav ul li.collections{
padding:10px 14px;
font-size:0.8125em;
line-height:1.25em;
text-transform:uppercase;
display: none;
}
header nav.social{
right:0;
}
header nav.social ul li{
margin-right:1px;
}
header nav.main{
left:0;
}
header nav.main ul li{
margin-left:1px;
}
div.content{
position:relative;
margin-top:53px;
height:calc(100vh - 53px);
}
div.timeline{
padding-top:52px;
position:relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.timeline > ul{
position:absolute;
white-space:nowrap;
margin-left:104px;
background:rgba(255,255,255,0.1);
transition:all 1s linear;
left:0;
}
div.timeline > ul > li{
position:relative;
display:inline-block;
vertical-align:top;
min-width:30vw;
box-sizing:border-box;
}
div.timeline > ul > li > a{
display:inline-block;
background:rgba(255,255,255,0.25);
font-size:1.5em;
box-sizing:border-box;
padding:0.5em;
}
div.timeline ul li.chapter-title{
position:static;
min-width:auto;
margin-left:8em;
font-size:2em;
}
div.timeline ul li.chapter-title h2{
position:absolute;
text-align:left;
bottom:0;
padding:2em 0.5em 3em 0.5em;
width:26vw;
line-height:1.25em;
white-space:normal;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left bottom 0;
-moz-transform-origin: left bottom 0;
-ms-transform-origin: left bottom 0;
transform-origin: left bottom 0;
}
div.timeline > ul > li > ul{
white-space:nowrap;
}
div.timeline > ul > li > ul > li{
min-width:30vw;
display:inline-block;
vertical-align:top;
border-top:1px dotted rgba(0,0,0,0.25);
box-sizing:border-box;
padding:0 0.5em;
cursor:pointer;
text-align:center;
}
div.timeline > ul > li > ul > li.chapter-title {cursor:default;}
div.timeline > ul > li > ul > li > h3{
display:inline-block;
text-align:center;
padding:10px;
background:rgba(255,255,255,0.25);
font-size:1.5em;
margin:0 auto;
white-space:normal;
}
div.timeline > ul > li > ul > li > h3 > i{
display:block;
text-align:center;
font-size:0.75em;
line-height:1em;
}
div.timeline > ul > li > ul > li > div{
padding:1em 1em 1em 1em;
background:rgba(255,255,255,0.25);
text-align:left;
}
div.timeline > ul > li > ul > li > div > div{
position:relative;
height:0;
padding-bottom:75%;
box-sizing:border-box;
background-position:50%;
background-size:cover;
}
div.timeline > ul > li > ul > li > div > div.loaded{
}
div.timeline > ul > li > ul > li > div > div > h4{
background:rgba(0,0,0,0.5);
display:block;
position:absolute;
top:0;
left:0;
width:20vw;
padding:0.5em;
font-size:1.5em;
font-weight:normal;
color:#ffffff;
white-space:normal;
}
div.timeline > ul > li > ul > li > div > div > h4 > small{
display:block;
margin-top:0.5em;
font-size:0.75em;
line-height:1.25em;
}
div.timeline > ul > li > ul > li > div > div > div.caption{
display:none;
position:absolute;
background:rgba(0,0,0,0.5);
padding:0.5em;
bottom:0;
left:0;
right:0;
white-space:normal;
color:#ffffff;
line-height:1.25em;
}
div.timeline > ul > li > ul > li:hover > h3,
div.timeline > ul > li > ul > li:hover > div{
background:rgba(255,255,255,0.75);
}
div.timeline > ul > li > ul > li:hover > div > div > div.caption{
display:block;
}
div.items > div{
display:none;
background:rgba(255,255,255,1);
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:50;
box-sizing:border-box;
padding:2em;
overflow:auto;
}
div.items > div nav{
position:absolute;
top:0;
right:0;
}
div.items > div nav ul{
}
div.items > div nav ul li{
display:inline-block;
vertical-align:middle;
background-color:rgba(0,0,0,0.6);
color:#dcdddd;
margin-right:1px;
}
div.items > div nav ul li:hover{
}
div.items > div nav ul li a{
padding:14px;
display:block;
color:#dcdddd;
text-align:center;
min-width:1em;
text-decoration:none;
}
div.items > div nav ul li a:hover{
color:#ffffff;
background-color:rgba(0,0,0,0.3);
}
div.items > div nav ul li.active a{
color:#ffffff;
background-color:rgba(255,255,255,0.3);
}
div.items > div h2{
font-size:3em;
margin-bottom:0.25em;
font-weight:normal;
}
div.items > div h3{
font-size:1.5em;
margin-bottom:0.5em;
font-weight:normal;
}
div.items > div div.tab{
display:none;
margin-top:2em;
}
div.items > div div.tab p{
line-height:1.5em;
margin-bottom:1em;
}
div.items > div div.tab.introduction{
display:block;
}
div.items > div div.tab.introduction,
div.items > div div.tab.biography{
max-width:1100px;
}
div.items > div div.tab.introduction div.primaryimage,
div.items > div div.tab.biography div.biographyimage{
float:left;
display:table;
margin-right:1em;
margin-bottom:1em;
}
div.items > div div.tab.introduction div.primaryimage img,
div.items > div div.tab.biography div.biographyimage img{
display:block;
margin-bottom:0.5em;
max-width:100%;
}
div.items > div div.tab.introduction div.primaryimage div.caption,
div.items > div div.tab.biography div.biographyimage div.caption{
display:table-caption;
caption-side:bottom;
font-size:0.8125em;
}
div.items > div div.tab.gallery ul.gallery > li{
position:relative;
display:inline-block;
vertical-align:top;
margin-right:1em;
margin-bottom:1em;
}
div.items > div div.tab.gallery ul.gallery > li > div.image{
display:table;
}
div.items > div div.tab.gallery ul.gallery > li > div.image img{
display:block;
height:300px;
}
div.items > div div.tab.gallery ul.gallery > li > div.image div.caption{
display:table-caption;
caption-side:bottom;
padding:0.5em;
bottom:0;
left:0;
right:0;
white-space:normal;
font-size:0.8125em;
line-height:1.25em;
}
div.items > div div.tab.video{
max-width:800px;
}
div.items > div div.tab.video div.fluidvideo{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
div.items > div div.tab.video div.fluidvideo iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a.togglebutton{
padding:10px 14px;
display:inline-block;
color:#dcdddd;
min-width:8em;
text-align:center;
text-decoration:none;
background-color:rgba(0,0,0,0.6);
}
a.togglebutton:hover{
color:#ffffff;
background-color:rgba(0,0,0,0.9);
}
form{
margin:20vh auto 0 auto;
width:30vw;
padding:3em;
background:rgba(255,255,255,0.5);
}
form label{
display:inline-block;
width:10vw;
}
form p{
margin-bottom:1em;
}
.item form{
background:none;
}
.columns.twocolumn{
}
.columns.twocolumn > div{
width:50%;
float:left;
box-sizing:border-box;
padding-right:2em;
}
.cmscontent h1,
.cmscontent h2,
.cmscontent h3,
.cmscontent h4,
.cmscontent h5,
.cmscontent h6,
.cmscontent p{
margin-bottom:0.75em;
line-height:1.25em;
max-width:1000px;
}
.cmscontent h1{
font-size:1.25em;
}
.cmscontent h2{
font-size:1.125em;
}
.cmscontent h1,
.cmscontent h2,
.cmscontent h3,
.cmscontent h4,
.cmscontent h5,
.cmscontent h6{
font-weight:bold;
}
form.search,
form.contact{
padding:0;
margin:2em 0;
width:100%;
}
form.search input,
form.search button,
form.contact input,
form.contact button,
form.contact textarea{
padding:0.5em;
font-size:1.125em;
}
form.contact label{
width:100%;
box-sizing:border-box;
}
form.contact input,
form.contact textarea{
display:block;
box-sizing:border-box;
max-width:600px;
width:100%;
}
form.contact textarea{
height:25vh;
}
.result-chapter,
.result{
margin-bottom:1em;
}
footer{
position:absolute;;
width:100%;
bottom:0;
height:20vh;
z-index:43;
}
footer nav.timeline{
position:relative;
width:60vw;
height:10vh;
margin:5vh auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
footer nav.timeline a.previous,
footer nav.timeline a.next{
position:absolute;
display:block;
top:2vh;
width:5%;
height:6vh;
background:rgba(0,0,0,0.6);
line-height:6vh;
text-align:center;
font-size:1.5em;
color:#fff;
}
footer nav.timeline a.previous:hover,
footer nav.timeline a.next:hover{
background:rgba(0,0,0,0.8);
cursor:pointer;
}
footer nav.timeline a.previous{
left:0;
}
footer nav.timeline a.next{
right:0;
}
footer nav.timeline div.firstyear,
footer nav.timeline div.lastyear{
position:absolute;
top:2vh;
width:10%;
height:6vh;
background:rgba(255,255,255,0.25);
line-height:6vh;
text-align:center;
font-size:1.25em;
}
footer nav.timeline div.firstyear{
left:5%;
}
footer nav.timeline div.lastyear{
right:5%;
}
footer nav.timeline div.mini{
background:rgba(255,255,255,0.25);
height:10vh;
width:70%;
margin:0 auto;
cursor:pointer;
box-sizing:border-box;
border:1px solid rgba(0,0,0,0.5);
}
footer nav.timeline div.mini div.position{
position:relative;
height:100%;
width:3px;
background:red;
pointer-events:none;
transition:all 0.5s linear;
left:0;
}
footer > div{
position:absolute;
bottom:0;
padding:20px;
font-size:1.5em;
background-color:rgba(0,0,0,0.6);
color:#dcdddd;
z-index:44;
}
footer > div.collections{
left:0;
padding:20px;
font-size:0.8125em;
line-height:1.25em;
text-transform:uppercase;
}
footer > div.white-lodge{
right:0;
padding:8px 20px;
}
footer > div.white-lodge img{
height:52px;
}
/* Responsive layout for Smartphone (Small Desktop) */
@media screen and (max-width: 1024px) {
div.items > div div.tab p {
clear:both;
}
}
/* Responsive layout for Smartphone (Single Column) */
@media screen and (max-width: 800px) {
.hide-tablet{
display:none;
}
div.items > div h2{
font-size:2em;
}
div.timeline > ul > li > ul > li{
min-width:45vw;
}
div.timeline > ul > li.chapter-title h2{
width:30vh;
font-size:1.25em;
}
div.timeline > ul > li > ul > li > div > div > h4 {
font-size:1em;
}
div.timeline > ul > li > ul > li > div > div > h4 > small,
div.timeline > ul > li > ul > li > div > div > div.caption{
font-size:0.8125em;
}
footer nav.timeline div.firstyear, footer nav.timeline div.lastyear{
font-size:0.8125em;
}
}
/* Responsive layout for Smartphone (Single Column) */
@media screen and (max-width: 560px) {
.hide-phone{
display:none;
}
div.timeline > ul > li > ul > li{
min-width:70vw;
}
}