/* IMAGE STYLES */

	body {
		background-color: black;
		overflow-y: auto;
	}

	body::-webkit-scrollbar {
		width: 1px;
		opacity: 0;
		visibility: hidden;
		background-color: transparrent;
		/*background-color: #fafafa;*/
	}

	body::-webkit-scrollbar:hover {
		width: .4cm;
		opacity: 1;
		visibility: visible;
	}

	/*
	body::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	}
	*/

	body::-webkit-scrollbar-thumb {
		background-color: yellow;
	}
	 
    @keyframes FadeIn {
        0% {	opacity: 0.0; }
        25% {	opacity: 0.0; }
        100% {	opacity: 1.0; }
    }
    @keyframes FadeOut {
        0% {	opacity: 1.0; }
        25% {	opacity: 1.0; }
        100% {	opacity: 0.0; }
    }

    @keyframes FadeOutSlow {
        0% {	opacity: 1.0; }
        50% {	opacity: 1.0; }
        100% {	opacity: 0.0; }
    }

	img.bg {
		width: 70%;
		height: auto;
		padding-top: 2.5%;
		padding-left: 15%;
		padding-right: 15%;
	}

    .fadeIn {
        animation-name: FadeIn;
        animation-duration: 5s; 
        animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        /* animation-iteration-count:infinite; */
    }

    .fadeOut {
        animation-name: FadeOut;
        animation-duration: 5s; 
        animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        /* animation-iteration-count:infinite; */
    }

    /* BOX STYLES */

    p {
      font-size: calc(8pt + 0.5vw);
      /*font-size: 10pt;8/
      color: inherit;
      line-height: 1.666;
      font-weight: lighter;
      word-wrap: break-word;
      /* text-rendering: geometricPrecision; */
      font-feature-settings: "kern" 1;
	  font-variant-ligatures: common-ligatures;
	  margin-top: 0px;
	  margin-bottom: 0px;
	  margin-left: auto;
	  margin-right: auto;
	  padding-bottom: 6em;
      /*text-align: center;*/
    }

	/* more text and any other "natural" text */
	.natural > p {
      font-size: 14pt;
      text-align: left;
	  padding-top: 10pt;
	  padding-bottom: 14pt;
	}

	.caption {
		font-variant: small-caps;
		color: #eeeeee;
	}

    div.textbox {
      padding-top: 33vh;
	  margin: auto;
    }

	video {
		/* RELEASE - Start */
		min-height: 115vh;
		/* RELEASE - End */

		/* DEBUG - Start  */
		/*
		height:300px; 
		width:400px;
		*/
		/* DEBUG - End */
		opacity: 0;
		transition: opacity 10s;
		-webkit-transition: opacity 10s; /* Safari  */
	    background-color:transparent;
	}

	@media all and ( min-aspect-ratio : 4/3 ) {
		/* wide */
		video {
			/* RELEASE - Start */
			min-width: 100vw;
			/* Release - End */

			/* DEBUG - Start */
			/*
			height:300px;
			width:400px;
			*/
			/*DEBUG - End */
		}
	}

    @keyframes Hint {
        0% {	opacity: 0.0; }
        5% {	opacity: 1.0; }
        15% {	opacity: 1.0; }
        20% {	opacity: 0.0; }
        100% {	opacity: 0.0; }
    }

	button#tweetback {
        opacity: 0.33;
		display: block;
		position: fixed;
		padding: 0px;
		left: 25px;
		top: 25px;
		z-index:100;
		font-size: 13px;
		color: #cecece;
		/*
		animation-delay: 20s;
        animation-name: Hint;
        animation-duration: 60s; 
		animation-iteration-count: infinite;
		 */
	}

	button#tweetback:hover {
		animation: none;
		opacity: 1;
		transition: opacity 1.5s;
	}

    div.fs-video {
	  /* REALEASE start */
	  top: 0px;
	  left: 0px;
	  position: fixed;
	  margin: 0px;
	  z-index:-100;
	  background-color:transparent;
	  /* RELEASE end */
    } 

    div.sml-video {
	  margin: 0px;
	  height: 50vh;
	  border: 5px solid red;
    } 

	div#container {
		position: absolute;
		width: 70vw;
		margin-left:15vw;
		margin-right:15vw;
		padding:0px;
		border:0px;
		background-color:transparent;
		z-index:0;
		justify-content: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		/*
		margin-top: calc(10vh + 1.5cm);
		height: calc(80vh - 1.5cm);
		*/
		margin-top: calc(100vh - 155px);
		margin-bottom:26px;
	}

	/*
	@meida all and orientation portrait {
		div#container {
		}
	}
	*/

    /* TEXT STYLES */

    h1.title {
      text-align: center;
      color: inherit;
      font-size: calc(4pt + 7vw);
      /* font-size: 16pt; */
      font-weight: lighter;
	  margin-top: 0px;
	  margin-bottom: 0px;
	  margin-left: auto;
	  margin-right: auto;
    } 

    a {
	  color: #C0EDF9;
	  text-decoration: none;
    }
	
    @keyframes hilight {
        0% {	color: #fcfac3;	} 
        70% {	color: #fcfac3;	} 
        100% {	color: #FFF91A;	}
    }

	.fadeHighlight {
      animation-name: hilight;
      animation-duration: 10s; 
      animation-fill-mode: forwards;
	  -webkit-animation-fill-mode: forwards;
	}

    a.hi {
	  color: #fcfac3;
	  text-decoration: none;
    }