/*-------------------------------------------------
  FONTFACE
------------------------------------------------- */


@font-face {
  font-family: 'Faune Regular';
  src: url('../fonts/Faune-Text_Regular.eot?') format('eot'), url('../fonts/Faune-Text_Regular.woff') format('woff'), url('../fonts/Faune-Text_Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Faune Italic';
  src: url('../fonts/Faune-Text_Italic.eot?') format('eot'), url('../fonts/Faune-Text_Italic.woff') format('woff'), url('../fonts/Faune-Text_Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Faune Bold Italic';
  src: url('../fonts/Faune-Display_Bold_Italic.eot?') format('eot'), url('../fonts/Faune-Display_Bold_Italic.woff') format('woff'), url('../fonts/Faune-Display_Bold_Italic.ttf') format('truetype');
}

.fontfaune{
  font-family: 'Faune Regular' !important;
}

.italicfaune{
  font-family: 'Faune Italic' !important;
}

.boldfaune{
  font-family: 'Faune Bold Italic' !important;
}
  
/*-------------------------------------------------
  GENERIC RESET
------------------------------------------------- */

* {-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;    /* Firefox, other Gecko */box-sizing: border-box; /* Opera/IE 8+ */margin: 0;padding: 0;font-size: 12px;
-webkit-font-smoothing: antialiased;}
a {text-decoration: none}
ul{list-style: none}


/*-------------------------------------------------
  * TEMPORARY DEV *
------------------------------------------------- */

#temp-counter{position: fixed; top: 20px; left: 50px; z-index: 1; text-transform: uppercase;}
#temp-nav{position: fixed; right: 20px; top: 20px; z-index: 3; height: 20px;/* width: 100px;*/ background-color: #000;}

/*#temp-counter, #temp-nav, #circular-menu{display: none;}*/

#temp-nav h3{display: inline-block; margin: 0 20px; cursor: pointer;}
h1{display: block}
h3{font-size: 10px;}

#circular-menu {
  position: absolute;width: 30px;height: 95vh;left: 20px;top: 20px;
  padding-left: 5px;
  list-style: none;
  z-index: 9;
  display: none;

}

/*.circle-container li{font-size: 12px; margin-bottom: 10px; cursor: pointer;}*/


/*-------------------------------------------------
  BODY & HTML
------------------------------------------------- */

body, html{min-height: 100%; background-color: black;}

/*-------------------------------------------------
  TYPOGRAPHY
------------------------------------------------- */

body {font-family: 'Open Sans', Helvetica; font-size: 16px; color: rgba(255,255,255,1)}
#text-container, #text-container span{font-size: 4vh;}
#percentage span, #credit-link{font-size: 4vh;}
#credits p{font-size: 2vh}
#credit-link{font-style: italic}
#menu-elements{color: white}
#credits p{line-height: 4vh}

/*-------------------------------------------------
  ROLLOVERS
------------------------------------------------- */

h1{transition: all 0.2s; transition-timing-function: cubic-bezier(0.42,0,0.58,1); cursor: default;}
h1:hover{color: white; opacity:0.6;}


/*-------------------------------------------------
  MAIN ELEMENTS
------------------------------------------------- */

#mask-main, #menu-container, #chapter-container{position: absolute; top: 0; right: 0; left: 0; bottom: 0;}
#mask-main, #menu-container{background-color: black; overflow: hidden}
#chapter-container{background-color: white}
#menu-container{display: flex; align-items: center;justify-content: center; opacity: 0; pointer-events: none;}
#mask-main{z-index: 10; pointer-events: none; opacity: 1}

/*-------------------------------------------------
  HOME
------------------------------------------------- */

#title{position: absolute; z-index: 109; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 36%; cursor: pointer; pointer-events: all; display: none; opacity: 0;}
#title img{width: 100%; }

.exit{padding: 20px}
/*-------------------------------------------------
  CREDITS
-------------------------------------------------*/

#credits-container{position: absolute; height: 100vh; width: 100%; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none;}

#credits{width: 40%; text-align: center; opacity: 0; pointer-events: none;}
#credits img{width: 70%; margin-top: 4vh;}
#exit-credits{position: fixed; top: 10px; right: 20px; z-index: 30; display: none;}
#exit-credits span{font-size: 30px; color: white; cursor: pointer;}

#credit-link{display: none; padding: 20px;}

/*-------------------------------------------------
  CHAPTER
------------------------------------------------- */

#end-nav{position: fixed; top: 10px; right: 20px; z-index: 30; }
#end-nav span{font-size: 30px; color: black; cursor: pointer;}

/*-------------------------------------------------
  MENU
------------------------------------------------- */

/* MENU ELEMENTS */
#menu-elements{position: fixed;top: 0; right: 0; bottom: 0; left: 0; z-index: 2; opacity: 0; pointer-events: none;}
#percentage{top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}
#logo{width: 60px; position: absolute; left: 30px; bottom: 30px; cursor: pointer; opacity: 0}
#credit-link{width: 60px; position: absolute; right: 30px; bottom: 30px; text-align: right; cursor: pointer;}

#logo, #credit-link{pointer-events: all; z-index: 5}

/* RING */
#menu-inner-container{width: 85vmin; height: 85vmin; position: absolute; }
#ring-top, #ring-bottom{position: absolute; height: 100%; width: 100%}
#ring-top{ z-index:2; }
#ring-bottom{display: flex; align-items: center; justify-content: center; }
.inner-ring, .outer-ring{stroke-width: 3; stroke: white;}
.inner-ring{transform: rotate(-90deg); transform-origin: 50% 50%; fill: black;}
.outer-ring{transform-origin: 50% 50%; fill: none;}
#animated-ball{position: absolute; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 3}
.ball{transform-origin: 50% 50%; fill: white;}



/*-------------------------------------------------
  CIRCULAR MENU
------------------------------------------------- */
#circle-links-container{position: absolute; z-index: 4; width: 100%; height: 100%; 
  text-align: center;}
.circle-links {display: block; transform: translate(50%, 50%);}
.circle-links p{pointer-events: none; color: transparent; }
.circle-links p:after{content:'next'; position: absolute; padding: 20px 20px; padding-right: 40px; cursor: pointer; pointer-events: all;}

/* LINK TEXT */
#link-text{position: absolute; width: 100%; height: 100%; /*background-color: silver; */position: absolute; display: flex; align-items: center; justify-content: center;}
.link-text-svg{stroke: none; fill: white; height: 93.5%; width: 93.5%}
.tl{display: none; }

/* PROGRESS BAR */
#progress-container{pointer-events: none;}
#progress{position: absolute; z-index: 0; pointer-events: none; background-color: transparent;}
#progress {top: 50%; left: 50%; transform: translate(-50%, -50%);height: 99%;}
#progress > svg {height: 100%;display: block; fill: none;pointer-events: none; }

/*-------------------------------------------------
  TEXT-CONTAINER
------------------------------------------------- */

#text-container{position: absolute;  text-align: left;width: 60%;height: 150px;top: 50%;left: 50%;transform: translate(-54%, -50%); color: black}

/*-------------------------------------------------
  CIRCLES
------------------------------------------------- */

#circle-container{position: absolute; height: 100vh; width: 100%;display: flex; align-items: center; justify-content: center; overflow: hidden;}
#circIntruder{transform: scale(1.5);}
.circle-portrait{height: 100%; }
.circle-landscape{width: 100%;}