html > * {
box-sizing: border-box;
}

html, body {
font-family: 'Times New Roman', serif;
font-size: 1em;
overflow: hidden;
width: 100%;
height: calc(var(--vh) * 100);
margin: 0;
padding: 0;
}

main {
overflow: hidden;
width: 100%;
height: calc(var(--vh) * 100);   
scroll-snap-type: y mandatory;
}

.swip1 {
    height: calc(var(--vh) * 100) !important;
	scroll-snap-align: start;  
}

.swiper-slide {
  height: calc(var(--vh) * 100) !important;
}



.buffer{background: white;}

@media (orientation: landscape) {

#masthead {
width: 50%;
height: calc(var(--vh) * 100);
position: fixed;
z-index: 2;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
pointer-events: none;
}

#masthead h1 {
width: 100%;
text-align: center;
font-size: 3em;
font-weight: bold;
 position: absolute;
}

#masthead a {
color: white;
text-decoration: none;
}

.highlight {
position: relative;
}

.highlight:last-of-type {
margin-top: -0.25em;  
}


.highlight .entry-header{
position: absolute;
width: 50%;
margin-left: 50%;
height: calc(var(--vh) * 100);
display: flex;
flex-direction: row;
align-items: center;
z-index: 2;
}

.highlight .entry-header h2{
color: white;
width: 100%;
text-align: center;
}

.highlight .entry-header a{
color: white;
text-decoration: none;
}

.highlight-thumb img {
width: 100%;
height: calc(var(--vh) * 100);    
object-fit: cover;
}

.highlight-thumb::before {
content: "";
width: 100%;
height: calc(var(--vh) * 100);   
background: black;
opacity: 15%;
position: absolute;
}

.catalogue {
width: 100%;
margin-top: 2em;
background: white;
scroll-snap-align: start;
position: relative;
height: calc(var(--vh) * 100);
display: flex;  
align-items: center;
}

  .catalogue-wrapper {
    width: 50%;
height: calc(var(--vh) * 100);
    overflow-y: scroll;

    padding-left: 50%;
  }  
 
.black {color: black;
font-size: 3em;
width: 50%;
text-align: center;
display: flex;
align-items: center;
  z-index: 99999999;
position: absolute;
/*! height: calc(var(--vh) * 100); */
margin: 0;
/*! pointer-events: none; */
}
  
  .black a {   
    width: 100%;
    color: black;
    text-decoration: none;
  } 
  
.catalogue-item {
width: 100%;
margin-top: 4em;
 scroll-snap-align: start;
  
}

.catalogue-thumb {
width: 80%;
margin: 0 auto;
}

.catalogue-thumb img{
width: 100%;
height: auto;
}

.catalogue-header h2{
color: black;
text-align: center;
font-weight: normal;
margin: 0;
}

.catalogue-header p{
margin: 0;
}

.catalogue-header a{
color: black;
text-align: center;
font-weight: normal;
text-decoration: none;
}

}


@media (orientation: portrait) {

#masthead {
width: 100%;
height: calc((var(--vh) * 100) / 2);
position: fixed;
z-index: 2;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
pointer-events: none;
}

#masthead h1 {
width: 100%;
text-align: center;
font-size: 3em;
font-weight: bold;
 position: absolute;
}

#masthead a {
color: white;
text-decoration: none;
}

.highlight {
position: relative;
}

.highlight:last-of-type {
margin-top: -0.25em;  
}


.highlight .entry-header{
position: absolute;
width: 100%;
height: calc((var(--vh) * 100) / 2);
display: flex;
flex-direction: row;
align-items: center;
z-index: 2;
bottom:0;
}

.highlight .entry-header h2{
color: white;
width: 100%;
text-align: center;
}

.highlight .entry-header a{
color: white;
text-decoration: none;
}

.highlight-thumb img {
width: 100%;
height: calc(var(--vh) * 100);    
object-fit: cover;
}

.highlight-thumb::before {
content: "";
width: 100%;
height: calc(var(--vh) * 100);   
background: black;
opacity: 15%;
position: absolute;
}

.catalogue {
width: 100%;
margin-top: 2em;
background: white;
z-index: 999;
}

.catalogue-item {
width: 100%;
margin-top: 4em;
}

.catalogue-thumb {
width: 80%;
margin: 0 auto;
}

.catalogue-thumb img{
width: 100%;
height: auto;
}

.catalogue-header h2{
color: black;
text-align: center;
font-weight: normal;
margin: 0;
}

.catalogue-header p{
margin: 0;
}

.catalogue-header a{
color: black;
text-align: center;
font-weight: normal;
text-decoration: none;
}

}