/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 31/08/2016, 9:03:51 PM
    Author     : David
*/


.tm{
	vertical-align: top;
}

.mystify-logo {
	max-height: 75px;
	width: auto;
}

@media (min-width: 650px)
{
	.mystify-logo {
		max-height: none;
	}
}

span.image1
{
	position: absolute;
	top: -50%;
	right: 15%;
	z-index: -2;
}

span.image1 img
{
	height: auto; 
	width: auto; 
	max-width: 250px; 
	max-height: 250px;
}

span.video1
{
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index:0;
}

span.video1 video
{
	width: 960px;
	height: 540px;
	min-width: 100%;
	min-height: 100%;
	z-index: -100;
}

span.video1 img{
	width: 100%;
    height: 100%;
    object-fit: contain;
	z-index: -100;	
}


span.image2{
	position: absolute;
	top: -150%;
	right: 0%;
	z-index: -1;	
}

span.image2 img
{
	height: auto; 
	width: auto; 
	max-width: 300px; 
	max-height: 300px;	
}

img.oil 
{
	height:100px;
	width: auto;
}

@media (min-width: 650px)
{
	span.image2{
		position: absolute;
		top: -200%;
		right: 0%;	
	}

	span.image2 img
	{
		height: auto; 
		width: auto; 
		max-width: 500px; 
		max-height: 500px;	
	}

	img.oil{
		height: 250px;
		width: auto;
	}
}

@media (min-width: 768px)
{
	span.image1
	{
		position: absolute;
		top: 20%;
		right: -95%;
	}

	span.image1 img
	{
		height: auto; 
		width: auto; 
		max-width: 500px; 
		max-height: 500px;	
	}

	span.image2{
		position: absolute;
		top: -80%;
		right: -100%;	
	}

	span.image2 img
	{
		height: auto; 
		width: auto; 
		max-width: 600px; 
		max-height: 600px;	
	}
}