Liar.css

html {
       /*overflow-y: scroll;*/
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
body
{
	float:none;
	overflow:auto;
	overflow-x:hidden;
	background:#a5c5cf;

}
h1,h2,p,a,ul
	{
		font-style:italic;
		font-weight:normal;
		text-decoration:none;
		margin:0px;
		padding:0px;
		color:#fff;
		font-family: Georgia;
		transition:color 0.2s;
		-webkit-transition:color 0.2s; /* Safari */
	}
	
h1
	{
		text-align:center;
		line-height:80pt;
		font-size: 80pt;
	}
h2
	{
		font-size:16pt;
		text-align:center;
	}
p
	{
		margin:40px 0px;
		font-size:20pt;
	}

#slide1_controls span, p {
	margin:0;
}

#controls{
	z-index:101;
	width:160px;
	position:absolute;
	vertical-align:center;
	height:auto;
}

#slide1_controls
{
	
	}

#slide1_controls span, a {
    cursor:pointer;
  }
	
#slide1_container
{
		/*left:100%;
		position:absolute;*/
		display: inline-block;
		-webkit-transform:translateX(100%);
		transform:translateX(100%);
		overflow-y:auto; /* So the sliding bit doesn't stick out. */
		overflow-x:hidden;
		width:100%;
		height:100%;
		background:#a5c5cf;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;

	}
	
#slide1_content {
	/* This is the bit that moves. It has 4 images, so 4 * 450 = 1800. You could use javascript
	to work this out instead by counting images. */
	/*min-width:1800px;
	width:150%;
	*/
	-webkit-transition:all 1.0s ease-in-out;
	-moz-transition:all 1.0s ease-in-out;
	-o-transition:all 1.0s ease-in-out;
	transition:all 1.0s ease-in-out;
}

#main
	{
		z-index:100;
		position:absolute;
		/*background:rgba(165, 197, 207, 0.62);
		overflow-y:auto;*/
		text-align:justify;/*
		margin:3%;
		*/
		-webkit-transition:all 1.0s ease-in-out;
		-moz-transition:all 1.0s ease-in-out;
		-o-transition:all 1.0s ease-in-out;
		transition:all 1.0s ease-in-out;
		width:50%;
		max-width:800px;
		
	}

#float_right
	{
		position:relative;
		float:right;
		margin-left:3%;
	}
	
#float_right img
{

}

#video_holder
	{
		position:absolute;
		right:0;
		height:100%;
		width:44.4%;
		z-index:3;
		background:transparent;
		
	}
	
#video_holder img
	{
		display:block;
		z-index:inherit;
		height:25%;
		display:block;
		padding:0% 11%;
		padding-top:11%;
	}
	
#text_holder
	{
		pointer-events: none;
		/*z-index:-1;*/
		display:none;
		position:absolute;
		background:#a5c5cf;
		/*left:-50%;
			box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
		margin-left:-25%;*/
		top:50%;
		margin:0px 2%;
		margin-top:-50px;
		width:95%;
		height:100px;
	}
	
#text_holder p
	{
		padding:0px;
		margin:0;
		color:white;
		text-align: center;
		vertical-align: middle;
		line-height: 100px;
	}

@media (min-width: 1400px) {
		p
		{
			font-size = 4vh;
		}
	}