/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* ------------- PRESENT:ROOT ------------- */

:root{
	--presentBgColor: #000;
	
	--presentLoaderBgColor: #000;
	--presentLoaderPercentColor: #fff;
	--presentLoaderPercentBgColor: #444;
	
	--presentControlColor: #888;
	--presentControlHoverColor: #fff;
	
	--presentSlideOverlay: rgba(255, 255, 255, 0.6);
	
	--presentPickerColor: #000;
	--presentPickerNavColor: #fff;
	--presentPickerBgColor: rgba(0, 0, 0, 0.8);
}

/* ------------- DOCUMENT ------------- */

/* Present */
#present{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-color: var(--presentBgColor);
}
	
	/* Information Prompt */
	#present .information-prompt{
		width: 770px;
	}
	
		/* Info */
		#present .information-prompt .info{
			padding-right: 40px;
			border-right: 1px solid var(--softBorderColor);
		}
	
			#present .information-prompt .info .title{
				text-align: center;
			}
			
			#present .information-prompt .info .description{
				padding: 20px 0;
				text-align: center;
			}
			
			#present .information-prompt .info .hints{}
			
				#present .information-prompt .info .hints h3{
					color: #444;
					padding: 10px 0;
					margin-bottom: 20px;
					border-bottom: 1px dashed var(--softBorderColor);
				}
			
				#present .information-prompt .info .hints .core-label-icon{
					display: block;
					margin-top: 5px;
				}
			
					#present .information-prompt .info .hints .core-label-icon .icon{
						width: 48px;
						height: 48px;
						margin-right: 10px;
					}
	
		/* Form */
		#present .information-prompt form{
			padding-left: 40px;
		}

	/* Loader */
	#present > .loader{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		position: absolute;
		flex-direction: column;
		justify-content: center;
		background-color: var(--presentLoaderBgColor);
	}

		#present > .loader > svg{
			width: 48px;
			margin: 0 auto;
		}

		#present > .loader > .percentage{
			z-index: 3;
			padding: 10px 20px;
			margin: 50px auto 0;
			color: var(--presentLoaderPercentColor);
		    background-color: var(--presentLoaderPercentBgColor);
			
			-webkit-border-radius: 25px;
			-moz-border-radius: 25px;
			-m-border-radius: 25px;
			-o-border-radius: 25px;
			border-radius: 25px;
		}

	/* Controls */
	#present .controls{
		top: 10px;
		z-index: 1;
		right: 10px;
		padding: 10px 5px;
		position: absolute;
		background-color: var(--presentBgColor);
	}

		#present .controls .control{
			display: inline-block;
			margin: 0 5px; 
		}

		#present .controls .control.play,
		#present .controls .control.exit-full-screen{
			display: none;
		}
			
			#present .controls .control svg{
				width: 16px;
				cursor: pointer;
				margin-bottom: -2px;
				fill: var(--presentControlColor);
			}
			
			#present .controls .control svg:hover{
				fill: var(--presentControlHoverColor);
			}

	/* Slides */
	#present > .slides,
	#present > .slides .slide,
	#present > .slides .slide .data,
	#present > .slides .slide .data > *,
	#present > .slides .slide .loader{
		position: absolute;
	}
	
	#present > .slides{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
		#present > .slides .slide{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	
		#present > .slides .slide:not(.active){
			display: none;
		}
		
			/* Generic Slide */
			#present > .slides .slide .loader{
				left: 0;
				right: 0;
				bottom: 0;
				height: 5px;
				width: 100%;
				background-color: var(--presentBgColor);
			}
		
				#present > .slides .slide .loader .loaded{
					height: 5px;
					background-color: var(--redColor);
				}
				
			#present > .slides .slide .data{
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;
				background-color: var(--presentSlideOverlay);
			}
				
				#present > .slides .slide .data > *{
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
				
				#present > .slides .slide .data > .title{
					color: #fff;
					text-align: center;
					font-size: var(--fontSize400);
					text-shadow: 2px 2px 2px #000;
				}
				
				#present > .slides .slide .data > .html{
					padding: 2%;
					background-color: #fff;
				}
				
				#present > .slides .slide .data > .image:not(.transparent){
					padding: 3%;
					background-color: #fff;
				}
				
				#present > .slides .slide .data > .gallery{}
					
					#present > .slides .slide .data > .gallery .images{}
					
						#present > .slides .slide .data > .gallery .images .image{
							padding: 3%;
							background-color: #fff;
						}
				
				#present > .slides .slide .data > .video{
					padding: 0.5%;
					background-color: #fff;
				}
	
	/* Picker */
	#present .picker{
		bottom: 20px;
		display: flex;
		position: absolute;
	}
	
		#present .picker .nav{
			width: 48px;
			height: 110px;
			flex-shrink: 0;
			cursor: pointer;
		}
	
		#present .picker .nav.nav-left{
			margin-right: 5px;
		}
	
		#present .picker .nav.nav-right{
			margin-left: 5px;
		}
	
			#present .picker .nav svg{
				width: 32px;
				height: 32px;
				padding: 8px;
				background-color: var(--presentPickerBgColor);
				fill: var(--presentPickerNavColor);
				
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
			}
	
		#present .picker .slides{
			padding: 10px;
			display: flex;
			flex-shrink: 0;
			overflow: hidden;
			background-color: var(--presentPickerBgColor);
		}
	
			#present .picker .slides .slide{
				width: 160px;
				height: 90px;
				flex-shrink: 0;
				cursor: pointer;
				font-weight: bold;
				position: relative;
				margin-right: 10px;
				color: var(--presentPickerColor);
			}
	
			#present .picker .slides .slide.active:before{
				top: 5px;
				left: 5px;
				z-index: 1;
				width: 10px;
				height: 10px;
				content: '';
				position: absolute;
				background-color: var(--redColor);
				
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
			}
		
			#present .picker .slides .slide:last-child{
				margin-right: 0;
			}
		
			#present .picker .slides .slide:after{
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				content: '';
				position: absolute;
				background-color: var(--presentSlideOverlay);
			}
		
				#present .picker .slides .slide span{
					z-index: 1;
					position: relative;
				}

/* 1380px */		
@media screen and (max-width: 1380px){
	#present .slides .slide .data > .title{
		font-size: var(--fontSize300);
	}
	
	#present .picker .nav{
		height: 80px;
	}

		#present .picker .nav svg{
			width: 24px;
			height: 24px;
		}
		
	#present .picker .slides{
		padding: 5px;
	}
		
		#present .picker .slides .slide{
			width: 125px;
			height: 70px;
			margin-right: 5px;
		}
}

/* 900px */		
@media screen and (max-width: 900px){
	#present .slides .slide .data > .title{
		font-size: var(--fontSize200);
	}
}

/* 850px */	
@media screen and (max-width: 850px){
	#present .information-prompt .info{
		padding-right: 0;
		border-right: none;
	}
	
		#present .information-prompt .info .hints{
			display: none;
		}
	
	#present .information-prompt form{
		padding-left: 0;
		margin-top: 20px;
	}
	
	#present .picker .nav{
		height: 60px;
	}

		#present .picker .nav svg{
			width: 18px;
			height: 18px;
		}
		
	#present .picker .slides .slide{
		width: 89px;
		height: 50px;
	}
}