/********************************************/
/* MOBILE CSS Stylesheet FOR Nearly Human		*/
/* Homepage: www.nearlyhumantv.com					*/
/* Created On: 2020-10-10										*/
/* Author: Norman Mirotchnick								*/
/* Email: norman AT redhot5 DOT com					*/
/* Website Version: 1.0											*/
/* Copyright - 2020-10-10										*/
/********************************************/

		/*** SECTIONS Outline Start ***/
/* Section 0: @ settings */

/* Section 1: Body Styles */

/* Section 2: Link Styles */

/* Section 3: HTML Elements Formatting */
	/** Section 3x: Header Styles		 **/
	/** Section 3x: Image Styles			**/
	/** Section 3x: Table Styles			**/
	/** Section 3x: Paragraph Styles	**/

/* Section 4: ALL Page Content Styles */
	/** Section 4x: Fonts											 **/
	/** Section 4x: Styles For Header					 **/
	/** Section 4x: Styles For Menu						 **/
	/** Section 4x: Styles For Navigation			 **/
	/** Section 4x: Styles For Main						 **/
	/** Section 4x: Styles For Footer					 **/
	/** Section 4x: Styles For Copyright				**/
	/** Section 4x: Styles For Misc Global CSS	**/

/* Section 5: Specific Page styles */
	/** Section 5x: Home page	**/
	/** Section 5x: ?????????? **/
	/** Section 5x: ?????????? **/
	/** Section 5x: ?????????? **/
	
/* Section 6: HTML markup in CSS Styles */
	/** Section 6x: Positioning			 **/
	/** Section 6x: Text Formatting	 **/
	/** Section 6x: Color Formatting	**/

/* Section 7: CSS Hacks and work arounds */
	/** Section 7x: WordPress Styles **/
	/** Section 7x: **/

		/*** SECTIONS Outline End ***/

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

/* Section 0: @ Settings For Various Styles */
@media print { 
	.no_print {display:none;} 
}
@media only screen and (max-width: 1455px) { 
	
}

/* Section 1: Body Styles */
body {
	background-color: #000;
	min-width: 800px;
	/* max-width: 800px; */
}

/* Section 2: Link Styles */
a:link {}
a:visited {}
a:active {}
a:hover {}

#nav-main a:link {
}
#nav-main a:visited {
}
#nav-main a:active {
}
#nav-main a:hover {
}


/* Section 3: HTML Formatting */
	/** Section 3x: Header Styles **/
	h1, h2, h3, h4 , h5, h6 {}
	
	/** Section 3x: Image Styles **/
	img {}

	/** Section 3x: Table Styles **/
	table {}
	tbody {}
	th {}
	tr {}
	td {}

	/** Section 3x: Paragraph Styles **/
	p {}
	div {}
	span {}


/* Section 4: ALL Page Content Styles */
	/** 4.0 Fonts **/

	/** 4.1 Header **/
	header {
		/* visibility: hidden; */
		width: 100%;
		min-width: 800px;
		text-align: initial;
	}
	
	/** 4.2 Navigation **/
	#nav-icon-mobile {
		position: absolute;
		top: 0px;
		left: 0px;
		display: inline-block;
		margin-top: 6px;
		font-size: 45.0pt;
		font-weight: 900;
		margin-left: 20px;
		color: #fff;
		text-align: left !important;
		visibility: visible;
		cursor: pointer;
	}
	
	#nav-main {
		display: inline-block;
		position: absolute;
		top: 75px;
		left: 15px;
		width: 205px;
		text-align: left;
		visibility: hidden;
		background-color: #000;
	}
	#nav-main .menu-item {
		padding-left: 10px;
		font-size: 1.8em;
	}
	#nav-main .menu-item .nav-arrow {
		visibility: hidden !important;
	}

	#nav-social {
		top: 0px;
		left: 80px;
		text-align: right !important;
	}

	#nav-social .menu-item {
		font-size: 1.8em;
	}

	#main {

	}
	
	footer {
		font-size: 22pt;
		min-width: 800px;
	}
.footer-container {
		min-width: 800px;
	}

	copyright {

	}


/* Section 5: Specific Page styles */
	/* HOME */

	/* Trailer */
	#trailer-crowdfunding {
		margin-top: -10px;
	}

	#trailer-popup {
		
	}
	#trailer-popup iframe{
		width: 100% !important;
		height: 800px !important;
	}

	#trailer-popup-close {
		top: 165px;
		right: 0px;
	}

	.video-wrapper {
		top: 75px;
		margin-top: 0px;
		min-width: 800px;
		/* max-width: 800px; */
		width: 100%;
		height: 100%;
	}

	.video-to-stretch {
		margin-top: 0px;
	}


	/* Story */
	#story-block {
		height: 1881px;
		background-image: url('../images/storygradientbarmobile.png');
	}

	#story-main {
		min-width: 800px;
		height: 1731px;
		background-image: url('../images/storybgmobile.png');
		background-size: 800px 1731px;
	}

	#story-main-text {
		width: 100%;
		min-width: 800px;
	}
	#story-main-text p {
		width: 100%;
		font-size: 25pt;
	}
	#story-main-text p:nth-of-type(1) {
		position: relative;
		top: 560px;
		left: 0px;
	}
	#story-main-text p:nth-of-type(2) {
		position: relative;
		top: 600px;
		left: 0px;
	}
	#story-main-text p:nth-of-type(3) {
		position: relative;
		top: 1080px;
		left: 0px;
	}

	#story-divider img {
		min-width: 800px;
	}


	/* Characters */
	#characters-block {
		margin-top: -91px;
		height: 666px;
		background-image: linear-gradient(rgba(2, 6, 18, 1.0) 0%, rgba(8, 19, 38, 1.0) 19%, rgba(15, 32, 58, 1.0) 36%, rgba(21, 45, 76, 1.0) 51%, rgba(27, 58, 97, 1.0) 80%);
	}

	#characters-divider img {
		min-width: 800px;
	}

	#characters-main {
		min-width: 800px;
		background-size: 800px auto;
	}

	#characters-main-container {
		width: 100%;
		min-width: 800px;
	}

	#character-mobile-viewport {
		top: 115px;
		left: 130px;
		font-size: 50pt;
		color: aqua;
		z-index: 6;
		visibility: visible;
	}

	#characters-list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: left;
		position: absolute;
		margin-top: 155px;
		/* left: 20px; */
		/* width: 510px; */
		width: 54%;
		height: 167px;
		overflow: auto;
	}

	.characterImage-container {
		width: 147px;
	}
	.characterImage-container > #mystery {
		padding-right: calc(60vw);
	}

	.characterImage {
		width: 147px;
	}
	.characterImage:hover {
		transform: initial;
	}

	#character-portrait {
		margin-top: 0px;
		left: 0px;
		text-align: center;
	}
	#character-portrait img {
		width: 800px;
		margin-left: 0px;
	}
	
	#characters-info {
		margin-top: 370px;
		right: 0px;
		height: 77px;
	}
	#characters-info p {
		margin-top: 35px;
		margin-right: auto;
		margin-left: auto;
		left: 0px;
		font-size: 13pt;
		width: 740px;
	}

	#character-info-filler {
		margin-top: 392px;
		height: 76.5px;
	}

	#characters-popup {
		width: 800px;
		height: 425px;
		margin-left: auto;
		margin-right: auto;
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 14%, rgba(33,33,33,1) 16%, rgba(33,33,33,1) 77%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);
	}

	.character-popup-header {
		width: 800px;
		height: 70px;
	}

	.character-popup-name {
		width: 38%;
		font-size: 32pt;
		padding: 5px 10px 5px 5px;
	}

	.character-popup-nickname {
		font-size: 30pt;
	}

	.character-popup-close {
		margin-top: 12px;
		width: 40px;
	}

	.character-popup-main {
		margin-top: 65px
		left: 0px;
		width: 800px;
	}

	.character-popup-previousarrow {
		margin-top: 52px;
	}

	.character-popup-nextarrow {
		margin-top: 52px;
	}

	.character-popup-image {
		margin-top: -4px;
		width: 410px;
		height: 230px;
		/* border: 1px #fafafa dashed; */
	}
	img.popup-image {
		/* width: 100%; */
		height: 230px;
	}

	.character-popup-image img.inner-arrow-left {
		top: 92px; 
	}

	.character-popup-image img.inner-arrow-right {
		top: 92px; 
	}

	.character-popup-info {
		margin-top: -4px;
		padding: 0px;
		left: 470px; 
		width: 280px;
		height: 260px;
	}

	.character-popup-info-description {
		font-size: 13pt;
	}

	.character-popup-info-likes {
		bottom: 92px;
		width: 280px;
		height: 40px;
		margin-top: 30px;
	}

	.character-popup-info-likes img {
		width: 30px;
	}

	.character-popup-info-likes div {
		font-size: 10pt;
	}

	.character-popup-info-dislikes {
		bottom: 53px;
		width: 280px;
		height: 40px;
		margin-top: 10px;
	}

	.character-popup-info-dislikes img {
		width: 30px;
	}

	.character-popup-info-dislikes div {
		font-size: 10pt;
	}

	.character-popup-info-actor {
		width: 310px;
		bottom: 18px;
	}

	.character-popup-slideshow {
		top: 326px;
		width: 800px;
		height: 97px;
	}
	.character-popup-slideshow-image-container {
		width: 160px;
		height: 97px;
	}
	.character-popup-slideshow img {
		max-height: 136px;
		margin-left: -50px;
	}

	#character-popup-shadow {
		min-width: 800px;
	}


	/* Media */
	#media-divider img {
		min-width: 800px;
	}

	#media-main {
		min-width: 800px;
	}

	#media-main-container {
		width: 100%;
		/* border: 2px #af4 solid;  */
	}

	#media-block-content {
		margin-top: 180px;
		left: 0px;
		width: 100%;
		min-width: 800px;
		height: 600px;
	}

	#media-container {
		flex-wrap: initial;
		margin-top: 60px;
		width: 95%;
		height: 368px;
		overflow-x: scroll;
		/* overflow-y: hidden; */
		/* -webkit-overflow-scrolling: auto; */
	}

	.media {
		
	}

	.mediaIFrame {
		width: 500px;
		height: 281px;
	}

	.mediaTitle {
		width: 500px;
	}

	.mediaPlayButton {
		width: 500px;
		height: 281px;
	}

	.mediaPlayYoutube {
		top: 109px;
		left: 214px;
	}

	.mediaCloseButton {
		font-size: 3.0em; 
	}

	#media-navigation-left {
		visibility: hidden;
	}
	#media-navigation-right {
		visibility: hidden;
	}


	/* Blog */
	#blog-block {
		height: 100px;
		background-size: cover;
	}
	
	#blog-divider img {
		min-width: 800px;
	}

	#blog-container {
		top: 180px;
		width: 95%;
		height: 335px;
	}

	#blog-entries {
		display: flex;
		flex-wrap: nowrap;
		justify-content: left;
		width: 100%;
		padding: 8px 0px 0px 0px;
		overflow: auto;
	}

	.blog-entry {
		padding-bottom: 0px;
	}
	.blog-entry img {
		width: 385px;
		height: 203px;
	}	
	.blog-entry:nth-of-type(1) {
		margin-left: 20px;
	}
	.blog-entry:nth-of-type(6) {
		margin-right: 20px;
	}

	#blog-seemore {
		top: 505px;
		width: 100%;
	}



/* Section 6: HTML markup in CSS Styles */
	/** Section 6x: Positioning **/

	/** Section 6x: Text Formatting **/

	/** Section 6x: Color Formatting **/


/* Section 7: CSS Hacks and work arounds */
	/** Section 7x: Webkit Styles **/
	::-webkit-scrollbar {
		-webkit-appearance: none !important;
	}
	::-webkit-scrollbar:vertical {
		width: 12px !important;
	}
	::-webkit-scrollbar:horizontal {
		height: 12px !important;
	}
	::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, .5) !important;
		border-radius: 10px !important;
		border: 2px solid #ffffff !important;
	}
	::-webkit-scrollbar-track {
		border-radius: 10px !important;
		background-color: #ffffff !important;
	}