/*-------------------------------------
Fonts
-------------------------------------*/	

@font-face {
	font-family: 'DIN-1451';
	src: url('../fonts/DIN 1451 STD ENGSCHRIFT.OTF');
}
@font-face {
	font-family: 'DIN-BOLD';
	src: url('../fonts/DIN 1451 STD ENGSCHRIFT.OTF');
}
@font-face {
	font-family: 'DIN-MEDIUM';
	src: url('../fonts/DIN MEDIUM.OTF');
}
@font-face {
	font-family: 'DIN-REGULAR';
	src: url('../fonts/DINENGSCHRIFT REGULAR.TTF');
}


body
{
	font-family: 'DIN-MEDIUM';
	color: #000000;
}

/*-------------------------------------
Main Container
-------------------------------------*/	
.di-container
{
	position: relative;
}


/*-------------------------------------
Videos Container
-------------------------------------*/	

/* Fill the area with a blank image due to videos being absolute: position */
.di-video-placeholder-image
{
	width: 100%;
}

.di-videos-container
{
	position: relative;
	width: 100%;
	height: auto;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

	.di-container.di-loading .di-videos-container
	{
		opacity: 0.2;
	}


/*-------------------------------------
Video
-------------------------------------*/	

.di-videos video
{
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
	background: #000000;
	color: #ffffff;
	pointer-events: none;
	z-index: 5;
}

	.di-videos video
	{
		opacity: 0;
		z-index: 0;
	}

	.di-videos video.di-playing
	{
		opacity: 1;
		z-index: 10;
	}

/*-------------------------------------
Video Controls
-------------------------------------*/	
.di-buttons-container
{
	position: absolute;
	bottom: 20px;
    z-index: 10;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
    text-align: center;
    display: none;
}
	@media screen and (max-width: 595px)
	{
		.di-buttons-container	
		{
			bottom: 10px;
		}
	}

   	.di-buttons
	{
   	 	display: inline-block;
		display: none;
		text-align: center;
		padding: 0;
		/*background: rgba(255, 255, 255, 0.8);
		padding: 15px 20px;
		font-size: 24px;*/
	}
		.di-buttons.hidden
		{
			opacity: 0;
		}
		.di-buttons.di-buttons-home
		{
			display: inline-block;
		}

	.di-buttons .di-play,
	.di-buttons span
	{
		color: #000000;
		background: #ffffff;
		border-radius: 30px;
		padding: 5px 15px;
		margin: 0 5px 0 5px;
		font-size: 14px;
		float: left;
		text-decoration: none;
		-webkit-transition: background 0.3s ease-in-out;
		-moz-transition: background 0.3s ease-in-out;
		transition: background 0.3s ease-in-out;
		white-space: nowrap;
	}
		@media screen and (max-width: 595px)
		{
			.di-buttons .di-play,
			.di-buttons span
			{
				float: none;
				margin: 0;
				font-size: 12px;
				padding: 4px 12px;
			}
		}

			
		.di-buttons .di-play:hover,
		.di-buttons span
		{
			color: #ffffff;
			background: #000000;
		}
		
	/* OLD STYLE */
	/*
	.di-buttons .di-play,
	.di-buttons span
	{
		color: #898a8b;
		padding: 0 10px;
		font-size: 18px;
		float: left;
		text-decoration: none;
		font-weight: bold;
	}
			
		.di-buttons .di-play:hover
		{
			color: #bd2f28;
		}*/
	
	
	
/*-------------------------------------
Pulse Points
-------------------------------------*/	
.di-pulse-points
{
	display: none;
}

	.di-pulse-point
	{
		position: absolute;
		top: 2%;
		left: 2%;
		width: 30px;
		height: 30px;
		margin-left: -15px;
		margin-top: -15px;
		z-index: 20;
		background: url('../img/icon-hotspot.png') center no-repeat;
		background-size: contain;
	}
	
		.di-pulse-point.di-pulse-point1-1-2
		{
			top: 20%;
			left: 3%;
		}
		
		.di-pulse-point.di-pulse-point1-1-3
		{
			top: 30%;
			left: 55%;
		}
	


/*-------------------------------------
Popups
-------------------------------------*/	

.di-popup
{
	position: absolute;
	display: none;
	/*top: 60px;
	left: 60px;*/
	z-index: 30;
	color: #000000;
	font-size: 16px;
    max-width: 400px;
    background: #ededed;
    padding: 30px 30px 30px 170px;  
    background-image: url('../img/bg-dots.png');
    background-repeat: no-repeat;
}
	.di-popup-button
	{
		border-radius: 5px;
		display: inline-block;
		font-size: 12px;
		line-height: 12px;
		padding: 8px 15px;
		text-transform: uppercase;
		font-weight: bold;
		text-decoration: none;
	}

	.di-popup-title
	{
		color: #bd2f28;
		display: block;
		font-size: 30px;
		text-transform: uppercase;
		font-family: 'DIN-REGULAR';
		line-height: 32px;
	}
	.di-popup-tag
	{
		background: #ecc0c6;
		color: #bd2f28;
		border: 1px solid #bd2f28;
		padding: 4px 10px;
	    margin-top: 4px;
	    float: right;
	}
	.di-popup-image
	{
	    position: absolute;
	    width: 250px;
	    height: 250px;
	    left: -100px;
	    top: 0;
		text-align: center;
	}
		.di-popup-image img
		{
	    	width: 100%;
		}
			.di-popup-image img.three-sixty
			{
		    	width: auto;
		    	opacity: 0.8;
			}
		
		#left-area .di-popup-content ul,
		.entry-content .di-popup-content ul
		{
			list-style-type: none;
			line-height: 20px;
			margin-top: 0;
			margin-bottom: 20px;
			padding: 0 14px;
		}
			.di-popup-content ul li:before
			{ 
				content: "";
				border-color: transparent #bd2f28;
				border-style: solid;
				border-width: 0.35em 0 0.35em 0.45em;
				display: block;
				height: 0;
				width: 0;
			    left: -14px;
			    top: 15px;
				position: relative;
			}
	.di-popup-more-info
	{
		background: #bd2f28;
		color: #ffffff;
		border: 1px solid #b90100;
		font-size: 12px;
	}
	.di-popup-view-range
	{
		background: #1a1a1a;
		color: #ffffff;
		border: 1px solid #000000;
		font-size: 12px;
	}

	.di-popup .di-popup-close
	{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		background: url('../img/icon-close.svg') center no-repeat;
		background-size: contain;
		cursor: pointer;
	}
	
	.di-popup sup
	{
		text-transform: lowercase;
	}

@media screen and (max-width: 595px)
{
	.di-popup
	{
		padding: 30px;			
		top: 0!important;
		left: 0!important;
		width: 80%;
	}
		.di-popup-image
		{
		    position: static;
			clear: both;
		}	
		.di-popup-content
		{
			margin-top: 40px;
		}
}


/*-------------------------------------
Loading Icon
-------------------------------------*/	
.di-loading-icon
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	height: 200px;
	background: url('../img/icon-loading.gif') center no-repeat #fff;
	background-size: contain;
	padding: 30px;
	text-align: center;
}