﻿/* CSS assembled and customized by givanx */
	.embed-container {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
/*		background: url("http://i.imgur.com/TxzC70f.png") ;*/

	}
	
	.embed-container iframe,
	.embed-container object,
	.embed-container embed,
	.embed-container img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#titleDiv {
		/*border: 10px solid #FFFFFF;		*/
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
		/*background-color: #FFFF00;*/

	}	

	.youtube-container {
		display: block;
		margin: -10px auto;
		width: 100%;
		max-width: 600px;
	}
	
	.youtube-player {
		display: block;
		width: 100%;
		/* assuming that the video has a 16:9 ratio */
		padding-bottom: 56.25%;
		overflow: hidden;
		position: relative;
		width: 100%;
		height: 100%;
		cursor: hand;
		cursor: pointer;
		display: block;
	}
	
	img.youtube-thumb {
		bottom: 0;
		display: block;
		left: 0;
		margin: auto;
		max-width: 100%;
		width: 100%;
		position: absolute;
		right: 0;
		top: 0;
		height: auto !important;
	}
	
	div.play-button {
		height: 72px;
		width: 72px;
		left: 50%;
		top: 50%;
		margin-left: -36px;
		margin-top: -36px;
		position: absolute;
		background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
	}
	
	#youtube-iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#heading {
		float: left;
		width: 100%;
		padding-top: 3%;
		padding-bottom: 1%;
		font-size: 19px;
		color: #FFF;
		position: relative;
	}
	
	#subheading {
		float: left;
		width: 100%;
		padding-top: 3%;
		padding-bottom: 3%;
		font-size: 16px;
		position: relative;
	}
	
	.cssTitle {
		font-weight: normal;
		color: #FFFFFF;
		background-color: #E4C8B0;
		border: 13px solid #E4C8B0;
		letter-spacing: 0pt;
		word-spacing: 1pt;
		font-size: 18px;
		text-align: left;
		font-family: "Trebuchet MS", Helvetica, sans-serif;
		line-height: 1;
		padding-left: 10px;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 

	}
	
	
	@media screen and ((max-width: 1100px) or (max-width: 960px) or (max-width: 768px) or (max-width: 640px)) {

		.cssTitle {
			font-weight: normal;
			color: #FFFFFF;
			background-color: #E4C8B0;
			border: 13px solid #E4C8B0;
			letter-spacing: 0pt;
			word-spacing: 1pt;
			font-size: 18px;
			text-align: left;
			font-family: "Trebuchet MS", Helvetica, sans-serif;
			line-height: 1;
			padding: 10px;
		}
	}
	

	@media screen and (max-width: 600px) {

		.cssTitle {
			font-weight: normal;
			color: #FFFFFF;
			background-color: #E4C8B0;
					border: 13px solid #E4C8B0;
			letter-spacing: 0pt;
			word-spacing: 1pt;
			font-size: 24px;
			text-align: left;
			font-family: "Trebuchet MS", Helvetica, sans-serif;
			line-height: 1;
			padding: 16px;
		}		
	}		
	@media screen and (max-width: 420px) {

		.cssTitle {
			font-weight: normal;
			color: #FFFFFF;
			background-color: #E4C8B0;
					border: 13px solid #E4C8B0;
			letter-spacing: 0pt;
			word-spacing: 1pt;
			font-size: 22px;
			text-align: left;
			font-family: "Trebuchet MS", Helvetica, sans-serif;
			line-height: 1;
			padding: 14px;
		}		
	}