/*
	guide line
	min-width: 1100px
	min-width: 1024px and max-width: 1099px;
	min-width:  768px and max-width: 1023px;
	min-width:  640px and max-width:  767px;
	min-width:  480px and max-width:  639px;
	min-width:  360px and max-width:  479px;

	applied
	min-width: 1100px
	min-width: 1012px and max-width: 1099px;
	min-width:  768px and max-width: 1011px;
	min-width:  640px and max-width:  767px;
	min-width:  480px and max-width:  639px;
	min-width:  360px and max-width:  479px;
*/

/* Generic 1400px - up ----------- */
@media only screen and (min-width : 1400px)
{
	.innerCanvas
	{
		display: inline-block;
		zoom: 1;
		*display: inline;
		width: 1400px;
	}
}

@media only screen and (max-width : 1209px) /* This is where Fullpager disabled */
{
	.outerCanvas.fullpage
	{
		height: auto;
	}

	.outerCanvas.fullpage .innerCanvas
	{
		height: auto;
		/* reset */
	}
	.welcomeContent
	{
		position: static;
		bottom: auto;
		width: auto;
		/* reset */
	}
		.welcomeTitle, .welcomeInfo
		{
			padding-left: 30px;
			padding-right: 30px;
		}
	.videoPanel
	{
		height: 600px;
		/* reset */
	}
	.post
	{

	}
}

@media only screen and (max-width : 1260px)
{
	.innerCanvas
	{
		/* reset */
		width: auto;
	}
	.videoDetail
	{
		padding-top: 30px;
		padding-left: 60px;
		padding-right: 60px;
		/* reset */
	}
	.infoPanel
	{
		padding-left: 60px;
		padding-right: 60px;
		/* reset */
	}
}

@media only screen and (max-width : 979px)
{
		a.postItemLink, a.postItemLink:link, a.postItemLink:visited, a.postItemLink:active
		{
			flex: 0 0 calc(500px);
			margin-left: 0;
			margin-top: 0;
			/* reset */
		}
		.outerCanvas:nth-child(odd) .post a.postItemLink
		{
			margin-right: 0;
			/* reset */
		}
}

@media only screen and (max-width : 779px)
{
	.welcomeInfo
	{
		width: auto;
		/* reset */
	}
}

@media only screen and (max-width : 699px)
{
		a.postItemLink, a.postItemLink:link, a.postItemLink:visited, a.postItemLink:active, .outerCanvas:nth-child(odd) .post a.postItemLink
		{
			flex: 0 0 calc(100%);
			margin-left: 0;
			margin-right: 0;
			padding: 0 0;
			background: transparent url(../images/trans-bold-bg.png) repeat top left;
			/* reset */
		}
			.postImage
			{
				display: block;
				/* reset */
			}
			.postInfoHeader, .postInfoContent, .postInfoLink
			{
				padding-left: 30px;
				padding-right: 30px;
				/* reset */
			}
			.postInfoHeader
			{
				border-left: 0;
				/* reset */
			}
			.postInfoLink
			{
				margin-bottom: 60px;
			}
}

@media only screen and (max-width : 680px)
{
	.welcomeInfo
	{
		padding: 30px 30px 60px 30px;
		/* reset */
	}
}