﻿cs-app {
	/*	display: flex;*/
	padding: 10px;
	box-sizing: border-box;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	display: block;
}

	cs-app cs-title, cs-app cs-tiles, cs-app cs-tile-container, cs-app cs-tile, cs-tiles > input, cs-app cs-pre, cs-app cs-content, cs-content img {
		/*		display: flex;*/
		/*		padding: 10px;*/
		box-sizing: border-box;
		border: none;
		background: transparent;
		padding: 0;
		margin: 0;
		display: block;
	}




cs-app {
	margin: auto;
	width: 100%;
	max-width: auto;
}

	cs-app cs-title {
		text-align: center;
		margin-bottom: 10px;
		font-size: 21px;
	}

	cs-app cs-tiles {
/*		height: 642px;
		height: 963px;
*/
		position: relative;
	}

		cs-app cs-tiles input {
			display: none;
		}

		cs-app cs-tiles cs-tile-container {
			display: flex;
			position: absolute;
/*			height: 320px;
*/			transform: translateX(-50%);
			transition: all 0.15s 0.15s;
			z-index: 1000;
		}

			cs-app cs-tiles cs-tile-container cs-tile {
				margin: auto;
				/*				width: 90%;
				height: 80%;
*/
				width: 100%;
				height: 100%;
				padding:10px;

				border-radius: 2px;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				position: relative;
				transition: all 0.15s 0.15s, background 0.15s;
			}

				cs-app cs-tiles cs-tile-container cs-tile:hover {
					box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
					background: #2B5265;
					background: #238cbc;
					background: #0A1418;
				}

				cs-app cs-tiles cs-tile-container cs-tile cs-pre {
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;
				}

				cs-app cs-tiles cs-tile-container cs-tile cs-pre cs-text {
					position:absolute;
					bottom:0px;
					left:0px;
					right:0px;
				}

				/*
					cs-app cs-tiles cs-tile-container cs-tile cs-pre cs-text {
						background: #111;
						opacity: .7;
					}
				*/

			cs-app cs-tiles cs-tile-container cs-tile cs-pre img {
				width:100%;
				height:auto;
				margin: 0 auto;
			}

				/*
				cs-app cs-tiles cs-tile-container cs-tile cs-text {
					transition: all 0.15s 0.15s;
					width: 100%;
					text-align: center;
					line-height: 70px;
					white-space: nowrap;
					text-transform: uppercase;
				}
				*/

				cs-app cs-tiles cs-tile-container cs-tile cs-content {
					transition: all 0.15s, max-height 0s;
					opacity: 0;
					pointer-events: none;
					overflow: hidden;
					max-height: 0;
				}

				cs-app cs-tiles cs-tile-container cs-tile .cs-open {
					cursor: pointer;
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index:1;
				}

				cs-app cs-tiles cs-tile-container cs-tile .cs-close {
					cursor: pointer;
					transition: all 0.15s;
					position: absolute;
					opacity: 0;
					top: -6px;
					right: 8px;
					/*					transform: rotateZ(45deg) translateX(-50%) translateY(-50%);
*/
					transform: scaleY(0.7);
					font-size: 25px;
				}

		cs-app cs-tiles input:checked + cs-tile-container {
			transition: all 0.25s;
			width: 100%;
			height: 100%;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			z-index: 10000;
		}

			cs-app cs-tiles input:checked + cs-tile-container cs-tile {
				transition: all 0.25s;
				background: #111;
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 20px 0px 0px 0px;
				box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
				max-width:1080px;
			}

			cs-content .video 
			{
				max-width:100%;
			}

			cs-app cs-tiles input:checked + cs-tile-container cs-tile {
/*				padding-top: 10px;
*/			}

				cs-app cs-tiles input:checked + cs-tile-container cs-tile:hover {
					cursor: initial;
				}

				cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-open {
					display: none;
				}

				cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-close {
/**/					transition: all 0.15s 0.25s;
					opacity: 1;
				}

					cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-close:hover {
						transition: all 0.15s;
						opacity: 0.5;
					}
					/*
				cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-text {
					transition: all 0.15s 0.25s;
					font-size: 24px;
					line-height: 50px;
				}
				*/
				cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-pre {
					display: none;
				}

				cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-content {
					flex: 1;
					transition: all 0.25s 0.4s, max-height 0s 0.4s, flex 0s 0.4s;
					opacity: 1;
					/*margin-top: 10px;*/margin-top: 10px;
					pointer-events: initial;
					width: auto;
					/*max-height: 1000000px;*/
					max-height: initial;
					overflow: hidden;
					height: 100%;
					display:block;
					position:relative;
				}

	cs-app cs-tile-container:nth-of-type(1) {
		left: calc(0 * 50% + 1 * 25%);
		top: calc(0 * 320px);
		width: 50%;
	}

	cs-app cs-tile-container:nth-of-type(2) {
		left: calc(1 * 50% + 1 * 25%);
		top: calc(0 * 320px);
		width: 50%;
	}

	cs-app cs-tile-container:nth-of-type(3) {
		left: calc(0 * 50% + 1 * 25%);
		top: calc(1 * 320px);
		width: 50%;
	}

	cs-app cs-tile-container:nth-of-type(4) {
		left: calc(1 * 50% + 1 * 25%);
		top: calc(1 * 320px);
		width: 50%;
	}

cs-app cs-tile-container:nth-of-type(5) {
	left: calc(0 * 50% + 1 * 25%);
	top: calc(2 * 320px);
	width: 50%;
}

cs-app cs-tile-container:nth-of-type(6) {
	left: calc(1 * 50% + 1 * 25%);
	top: calc(2 * 320px);
	width: 50%;
}
