:root {
  --landscapePosition: 0;/*set by Javascript*/
  --landscapeNewPosition: 0;/*set by Javascript*/
  --doorTop: 5dvh;/*30.4dvh;*/
  --doorWidth: 46dvh;
  --naviTop: 1.0dvh;;/*3.2dvh;*/
  --directHeight: 2dvh;/*2.1dvh;*//*was 2.7dvh for Segoe*/
}

BODY		{
			margin: 0;
			background-color: #7E9CAE;
      background: linear-gradient(180deg,#7E9CAE 10%, #F4DAA1 53%, #54768F 54%, #6D5C31 70%);
			/*background: linear-gradient(0deg,rgba(110, 194, 141, 1) 0%, rgba(87, 125, 125, 1) 23%, rgba(235, 221, 185, 1) 23%, rgba(207, 248, 255, 1) 98%);*/
			overflow: hidden; /*hide scrollbars*/
			/*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
      /*font-family: "Proza Libre", sans-serif;*/
      font-family: "Merriweather", serif;
      font-weight: 300;
      font-style: normal;
    }
H2, H3  {
  		  font-family: "Gilda Display", serif;
        font-weight: 400;
        font-style: normal;
        text-transform: uppercase;
        text-align: center;
        color:rgb(250, 242, 208);
        filter:drop-shadow(black .1dvh .1dvh .4dvh);
        }

@keyframes slideNiche {
  from {
	left: -50dvh;
  }
  to {
	left: 0;
  }
}

@keyframes slideWallRight { from { left: 0; } to { left: 50dvh; } }
@keyframes slideWallLeft { from { left: 0; } to { left: -50dvh; } }
@keyframes slideSingleWallRight { from { left: 0; } to { left: 100dvw; } }
@keyframes slideSingleWallLeft { from { left: 0; } to { left: -100dvw; } }

@keyframes fadeContent { from { opacity: 0; } to { opacity: 1; } }

@keyframes slideSingleNiche { 
  from {
	background-position: center top, center bottom, center top;
  }
  to {
	background-position: 100dvw top, 100dvw bottom, 100dvw top;
  }
}

#landscape  {
            width: 100dvw;
            height: 100dvh;
            background-image:url(images/landscape.jpg);
            background-position: var(--landscapePosition) bottom;
			      background-repeat: repeat-x;
			      background-size: auto 100%;
            position:absolute;
          }
.slideLandscape { /*animation: translate 1s forwards;*/
                  /*transition: translate 1s forwards;*/
                  animation: slideLandscape linear 0.5s forwards;
                  /*transform: translateX( calc( var(--landscapePosition) + 100px ) );*/
                }
                
@keyframes slideLandscape {
  from {
	  background-position: var(--landscapePosition) bottom;
  }
  to {
	  background-position: var(--landscapeNewPosition) bottom;
  }
}
  

/*@keyframes closeDoor { from { top: 100dvh; } to { top: 0; } }*/

.slideNiche	{ animation: slideNiche linear 0.5s backwards; }

.slideWallRight	{ animation: slideWallRight linear 0.5s backwards; }
.slideWallLeft	{ animation: slideWallLeft linear 0.5s backwards; }

/*.closeDoor	{ animation: closeDoor linear 0.5s forwards; }*/

.fadeContent	{ animation: fadeContent linear 0.5s forwards; }

#niches     { pointer-events: none; }

.bodyBox {/*replaces BODY to fix bug on tablets*/
          position: absolute;
          width: 100dvw;
          height: 100dvh;
          left: 0;
          top: 0;
          overflow: hidden;
          pointer-events: none;
          }

.niche		{
			background-image: url(images/Perugino-niche_top.png),url(images/Perugino-niche_bottom.png),url(images/Perugino-niche_middle.png);
			background-position: center top, center bottom, center top;
      background-position: calc(50dvw-50dvh) top, calc(50dvw-50dvh) bottom, calc(50dvw-50dvh) top;
			background-size: 50dvh, 50dvh, 50dvh;
      background-repeat: repeat-x, repeat-x, repeat;
      left: -50dvh;
      width: calc( 100dvw + 100dvh );
			height: 100dvh;
			font-size:6dvw;
			text-align:center;
			position: absolute; /* for animation*/
			}

#nicheContent {
  position: absolute;
  /*background-color:aquamarine;
  opacity: 0.5;*/
  top: calc( var( --doorWidth ) *0.17 );
  height: calc( var( --doorWidth ) *0.17 );
  width: calc( 50dvh * 4);
  left: calc( ( 100dvw + 100dvh ) / 2 - 50dvh * 2 );
  /* niche background-size: 50dvh, 50dvh, 50dvh; */
  /* niche width: calc( 100dvw + 100dvh );*/
	/* nice left: -50dvh;*/
  /*images/pelican_medaillon.png*/
  display: flex;
  /*flex-wrap: nowrap;*/
  justify-content: space-around;/*space-between;*/
  visibility: hidden;/*otherwise the show before the background*/
}

#navigation	{
			position: absolute;
			bottom: var(--naviTop);
      /*
      background-image: url(images/door_bot.jpg);
      background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 100%;
      */
      width: var(--doorWidth);
      left: calc( 50dvw - var(--doorWidth)/2 );
			}

/*
@keyframes naviHide { from { bottom: var(--naviTop); } to { bottom: calc( var(--naviTop) * -1 ); } }
.naviHide	{ animation: naviHide linear 0.5s forwards; }
@keyframes naviShow { from { bottom: calc( var(--naviTop) * -1 ); } to { bottom: var(--naviTop); } }
.naviShow	{ animation: naviShow linear 0.5s forwards; }
*/

#direct     {/*text of bottom navigation*/
            position: absolute;
            bottom: var(--naviTop);
            font-weight: 600;
      /*
      background-image: url(images/door_bot.jpg);
      background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 100%;
      */
            width: var(--doorWidth);
      left: calc( 50dvw - var(--doorWidth)/2 );
            font-size: 1.55dvh;/*was 1.75dvh for Segoe*/;
            text-align:center;
			      /*background: black;*/
			      /*width: 100%;*/
            height: var(--directHeight);
           /* background-image: url(images/sill.jpg);
            background-size: 100%;
            padding-top: 2dvh;
            */
            }
#direct	 A {
  
			text-decoration: none;
			color: rgb(66, 27, 27);/*beige;*/
			}
#wall     {
            position:absolute;
            /*background-color:bisque;*/
            /*width: calc( 100dvw + 100dvh );*/
            width: 100dvw;
            height: 100dvh;
            left: 0;
            display: flex;
            justify-content: center;
            /*align-items: center;*/
            }
.doorSpecs  {
            position: absolute;
            width: var(--doorWidth);
            left: calc( 50dvw - var(--doorWidth)/2 );
            }
#door    {
            height: 100dvh;
            /*border-radius: 50dvw 50dvw 0dvw 0dvw;*/
            /*
            display: flex;
            justify-content: center;
            align-items: center;
            */
            /*
            perspective: 300dvh;
            transform-style: preserve-3d;
            */
            overflow: hidden;
            }
/*
#doorTop    {
            height: var(--doorTop);
            background-image: url(images/door_top.jpg);
			      background-position: center top;
			      background-repeat: no-repeat;
			      background-size: 100%;
            top:0px;
            }
@keyframes topHide { from { top: 0px; } to { top: -500px; } }
.topHide	{ animation: topHide linear 0.2s forwards; }
@keyframes topShow { from { top: -500px; } to { top: 0px; } }
.topShow	{ animation: topShow linear 0.5s forwards; }
*/
.doorContent {
            height:100%;
            width: 200%;
            /*background-image: url(images/door-annunciation-bot.jpg),url(images/door-annunciation-main.jpg),url(images/door-annunciation-mid.jpg);*/
            background-position: center bottom, center top, center top;
            background-repeat: no-repeat, no-repeat, repeat-y;
			      background-size: 100%,100%,100%;
            /*REMOVED FOR GATE, NOT NEEDED FOR DOORS, I think: display: flex;
            justify-content: center;
            align-items: center;*/
            color: gold;
            /*background-color:deepskyblue;*/
            box-shadow: inset .75dvh 3dvh 4.5dvh .3dvh rgba(0, 0, 0, 1.0);
            border-radius: calc( var(--doorWidth)/2 ) calc( var(--doorWidth)/2 ) 0 0;
            }
#doorRightContent {
                  position: absolute;
                  left:-100%;
                  }
.doorSide   {
            position: absolute; /* for animation*/
            /*background-color:beige;*/
            height: calc( 100dvh - var(--doorTop) - var(--naviTop) - var(--directHeight));/*64dvh;*/
            top: var(--doorTop);/*30.4dvh;*/
            width: 50%;
            background-position: center bottom, center top, center top;
			      background-repeat: no-repeat, no-repeat, repeat-y;
			      background-size: 100%, 100%, 100%, 100%;
            transform-style: preserve-3d;
            transition: all 0.5s;
            backface-visibility: hidden;
            overflow: hidden;
            /* NOT FOR GATE background-color:#704729;*/
            }
/* perspective test
#door:hover #doorLeft   { transform: rotate3d(0,1,0, 96deg); }
#door:hover #doorRight  {transform: rotate3d(0,1,0, -96deg); }
*/
/* slide test
#door:hover #doorLeft   { transform: translateX(-100%); }
#door:hover #doorRight  { transform: translateX(100%); }
*/
#doorLeft   {
            transform-origin: left center;
            left: -50%;
            }
#doorRight  {
            transform-origin: right center;
            left: 100%;
            }
@keyframes doorLeftSlide { from { left: -0%; filter: brightness(100%); } to { left: -50%; filter: brightness(50%); } }
.doorLeftSlide { animation: doorLeftSlide linear 0.5s forwards; }
@keyframes doorRightSlide { from { left: 50%; filter: brightness(100%); } to { left: 100%; filter: brightness(50%); } }
.doorRightSlide { animation: doorRightSlide linear 0.5s forwards; }

/* replace by doorContent
#onDoor    {
            position: absolute;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            }
*/

#contentBackground     {
            position:absolute;
            /*background-color:bisque;*/
            width: 100dvw;
            height: 100dvh;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            }
#content    {
            width: 42dvh;
            opacity: 0;
            font-size: 2dvh;
			      background: linear-gradient(0deg,rgba(255,235,225, 0) 0%, rgba(255,235,225, 0.4) 20%, rgba(255,235,225, 0.4) 80%, rgba(255,235,225, 0) 100%);
			      margin: 0 8dvh 0 8dvh;/*shrinks the size of the box*/
            padding: 4dvh;/*expands the size of the box*/
			      /*border-radius: 1dvh 1dvh 1dvh 1dvh;*/
			      /*border: 3px solid yellow;*/
            color: #1C120A;
            pointer-events: auto;
            }

#content A {
  color: #F3D54B;
  background: linear-gradient(0deg,rgba(103,67,36,0.5) 0%, rgba(103,67,36,0.0) 100% );/*#674326;*/
  padding: 0.2dvh;
  text-decoration:none;
  }

.full       {/*used for questions*/
            position: absolute;
            display: flex;
            justify-content: center;
            width: var(--doorWidth);
            /*background-color:chocolate;*/
            }
.fullFixed  {/*used for contact*/
            position: absolute;
            width: var(--doorWidth);
            /*background-color:greenyellow;*/
            }
.full A     {
            width: calc( var(--doorWidth)/2 );
            /*background-color:floralwhite;
            border:1px red solid; opacity: 0.5;
            border-radius: 50px;
            text-decoration: none;
            padding: 15px;
            color: black;
            */
            }
A           {
           -webkit-tap-highlight-color: transparent;/*hide rectangle on tap on mobile*/
            }

/*not styled, was used in questions
.sub        {
            text-align:center;
            margin: 0 3dvw 0 3dvw;
            background-color:#7E9CAE;
            }
*/
/**************************door buttons********************************/
#enter { top: 35dvh; height:14dvh;}
#question { top: 46dvh; height:20dvh; }
#call { top: 41dvh; height:20dvh; }
#institute { top: 40dvh; height:18dvh; }
#discern { top: 46dvh; height:14dvh; }
#rosminian { top: 45dvh; height:13dvh; }
#charity { top: 38dvh; height:15dvh; }
#contact { top: 28dvh; height:26dvh; }
/**********************************************************/

/**************************door images********************************/
.enterBG { filter: hue-rotate(5deg) saturate(80%) brightness(120%); background-image: url(images/door-annunciation-bot.jpg),url(images/door-annunciation-main.jpg),url(images/door-annunciation-mid.jpg); }
.questionBG { filter: hue-rotate(5deg) saturate(90%) brightness(160%); background-image: url(images/door-question-bot.jpg),url(images/door-question-main.jpg),url(images/door-question-mid.jpg); }
.callBG { filter: hue-rotate(10deg) saturate(100%) brightness(120%); background-image: url(images/door-call-bot.jpg),url(images/door-call-main.jpg),url(images/door-call-mid.jpg); }
.instituteBG { filter: hue-rotate(10deg) saturate(120%) brightness(120%); background-image: url(images/door-institute-bot.jpg),url(images/door-institute-main.jpg),url(images/door-institute-mid.jpg); }
.discernBG { filter: hue-rotate(7deg) saturate(70%) brightness(130%); background-image: url(images/door-discern-bot.jpg),url(images/door-discern-main.jpg),url(images/door-discern-mid.jpg); }
.rosminianBG { filter: hue-rotate(12deg) saturate(100%) brightness(120%); background-image: url(images/door-rosminian-bot.jpg),url(images/door-rosminian-main.jpg),url(images/door-rosminian-mid.jpg); }
.charityBG { filter: hue-rotate(10deg) saturate(70%) brightness(130%); background-image: url(images/door-charity-bot.jpg),url(images/door-charity-main.jpg),url(images/door-charity-mid.jpg); }
.contactBG { filter: hue-rotate(0deg) saturate(140%) brightness(90%); background-image: url(images/social_gate-bot.webp),url(images/social_gate-main.webp); }
#contactBGtile  {
                filter: hue-rotate(0deg) saturate(140%) brightness(90%); /*same as door*/
                background-image: url(images/social_gate-mid.webp);
                background-repeat: repeat-y;
                background-size: 100%;
                background-position: center top;
                top: 60dvh;
                height: 15.0dvh;
                }
/**********************************************************/

#steps      {
            display: none;
}
#steps TABLE {
            width: 100%;
            height: 10dvh;
            filter: hue-rotate(15deg) saturate(70%) brightness(140%);
            background-image: url(images/drawers-previous_next.jpg);
            /*background-image: url(images/fingers_fence.webp),url(images/sill.jpg);*/
            /*background-image: url(images/previous_next.png),url(images/sill.jpg);*/
            /*background-image: url(images/fingers_wood.webp),url(images/sill.jpg);*/
            background-position: center top;
            background-repeat: no-repeat;
            background-size: var(--doorWidth);
            box-shadow: inset -.75dvh -3dvh 4.5dvh .3dvh rgba(0, 0, 0, 1.0);
            }
#steps TABLE A {
          display:block;
          width: 100%;
          height:100%;
          }
#dev        {
            position: fixed;
            top: 2;
            left: 10;
            z-index:999;
            display: none;
            }

.noflex     {
            margin: 0 7dvw 0 7dvw;
            display: block;
            color: beige;
            font-size: 2.5dvw;
            }
IMG         {
            max-width:90%;
}

/*------------------------------responsive--------------------------------------*/

@media (min-aspect-ratio: 4/6) { /*horizontal AKA desktop*/
  
}

@media (max-aspect-ratio: 4/6) { /*vertical AKA phone*/

.slideNiche	{ animation: slideSingleNiche linear 0.5s backwards; }
.slideWallRight	{ animation: slideSingleWallRight linear 0.5s backwards; }
.slideWallLeft	{ animation: slideSingleWallLeft linear 0.5s backwards; }
.slideNicheContent { animation: slideNicheContent linear 0.5s backwards; }

@keyframes slideNicheContent {
  from {
	left: -150dvw;
  }
  to {
	left: -250dvw;
  }
}

:root {
      --doorTop: 10dvw;/*61dvw;*/
      --doorWidth: 91dvw;
      --naviTop: 1.5dvw;
      --directHeight: 4.4dvw;/* was 5.2dvw for Segoe */
      }
#wall   {
        width: 100dvw;
        }
.niche {
			width: 100dvw;
			height: 100dvh;
      left: 0;
      background-size: 100%, 100%, 100%;
      overflow: hidden;
			}
#nicheContent {
              width: 400dvw;
              left: -150dvw;
              }
#steps TABLE {
              height:21.1dvw;
              box-shadow: inset -1.5dvw -6dvw 9dvw .6dvw rgba(0, 0, 0, 1.0);
			        }
#direct     {
            font-size: 3.1dvw;/*was 3.5dvw for segoe*/;
            }
#content    {
            font-size: 2.5dvh;
            width: 86dvw;
            margin: 0;
            padding: 12dvw;
            }
.noflex     {
            font-size: 3.5dvw;
            }
H2, H3  {
        filter:drop-shadow(rgb(31, 35, 58) .2dvw .2dvw .7dvw);
        }
.doorContent  {
              box-shadow: inset 1.5dvw 6dvw 9dvw .6dvw rgba(0, 0, 0, 1.0);
              }
/**************************door buttons********************************/
#enter { top: 70dvw; height:25dvw; }
#question { top: 91dvw; height:40dvw; }
#call { top: 80dvw; height:40dvw; }
#institute { top: 78dvw; height:37dvw; }
#discern { top: 91dvw; height:27dvw; }
#rosminian { top: 89dvw; height:25dvw; }
#charity { top: 77dvw; height:28dvw; }
#contact { top: 50dvw; height:35dvw; }


/**********************************************************/

#contactBGtile  {
                top: 118.5dvw;
                height: calc( 100dvh - 118.5dvw - 49.5dvw );
                }
}