* { box-sizing:border-box; white-space:normal; transition: background-color 1s, color .5s; }

/* КАРКАС */

	body { 
		font-family:Roboto; 
		font-size:16px; 
		line-height:20px; 
		margin:0 0 150px; 
	 }

	header { 
		background-color:#FFD54F /*Amber palette 400 #FFC107 */; 
		padding:10px 15px; 
		margin:0 0 10px; 
		font-size:18px; line-height:24px;
		border-bottom:1px solid #FFB300 /*600*/;
	 }

	a { color:#1565C0 /*Indigo 900*/; text-decoration:none; } a:hover { text-decoration:underline; }

	a.logo { 
		display:block; 
		width:200px; 
		height:54px; 
		margin:-10px 0 0 -5px;
		background:url(/logo.png) center no-repeat; 
	 } 


	main > div > p,
	dt, dd { text-indent:2em;  font-size:1.3em; line-height:1.5em; width:70%; margin:1.5em auto; font-weight:light; }
	dt     { text-indent:0; font-size:1.5em; margin-bottom:-1em; font-weight:bold;  }

	h3, dt { color:#01579B !important; /* teal */ }

/* ФОРМА РЕГИСТРАЦИИ */

	form { margin:0 auto; width:70%; max-width:600px;                   /*border:1px dotted blue;*/ }
		form div.cf > div { width:57%; float:left; padding:0 1.5em;     /*border:1px dotted red;*/  }
		form div.cf > div:last-child { width:43%; }
			form div.cf > div label { margin:0 -1.5em; }

	input,textarea {
		display:block; 
		width:100%; /*max-width:350px;*/ 
		font-size:inherit; 
		font-family:inherit; 
		border:1px solid #2E7D32;
		padding:7px .5em;
		margin-bottom:5px;
		border-radius:5px;
		outline:none;
	}
	input { font-size:1.3em; margin-bottom:15px; }

	input[type=radio], input[type=checkbox] { display:inline-block; width:auto; margin-left:-1.2em; }


	form input:focus, form textarea:focus { background-color:#E3F2FD/*blue 500*/ }

	input[type=submit] { 
		background-color:#66BB6A; color:#333; 
		padding:.5em; margin-top:1em; cursor:pointer; 
		width:180px; float:right; 
	}
	input[type=submit]:hover { 
		background-color:#43A047; border-color:#1B5E20; 
		color:black; 
	}

/* .tileset */

	.cf:before, .cf:after { display:table; content:''; clear:both; }

		.tileset div {  
			float:left; width:30%; margin: 1.5%; padding:1%; 
			background-color:#FFECB3; /* Amber 100 */;
			border:1px solid #FFD54F; /* Amber 300 */; 
			text-align:center; 
		 }
		.tileset div h3 { text-align:center; font-size:1.5em; }

		.screenshots { width:85%; margin:2em auto; }
		.screenshots > a  {
				display:inline-block;
				width:19%; height:170px; 
				margin:.5%;
				/*border:1px solid lightgray; */
				float:left; 

				background-repeat:no-repeat;
				background-size:cover;
				background-position: left top;
			}


			section.overlay-caption { /*margin-bottom:2em;*/ }
			.overlay-caption a { color:inherit; font-weight:inherit; text-decoration:none; }

			.overlay-caption > * { 
				position:relative; 
				overflow:hidden; 
				font-weight:normal;
				}
				.overlay-caption > * .caption {
					position:relative; 
					left:0; right:0; bottom:-100%;

					margin:0; height:100%;
					-webkit-transition: bottom 1s;
					transition: bottom 1s;
					text-align:center;

					line-height:2em; 
					min-height:6em;

					padding:1.5em;

					background-color:rgba(0,0,0,.75);
					color:white;

					}

				.overlay-caption > a:hover .caption,
				.overlay-caption > a:focus .caption { bottom:0; }

/* @media responsive */

	@media all and (max-width: 900px) { 
		.screenshots > a  {
				width:30%; 
				margin:1.5%;
		}
	}

	
	@media all and (max-width: 700px) { 
		.screenshots > a  {
				width:46%; 
				margin:2%;
				height:150px;
		}
		.tileset.overlay-caption > * .caption { padding:.75em 1em; }
		main > div > p, dt, dd { width:90%; }

		.tileset { 
			width:100% !important; padding:1.5em; background-color:#FFECB3; /* Amber 300 */ 
			border-top:1px solid #FFD54F; border-bottom:1px solid #FFD54F; /* Amber 600 */
			}
		.tileset div { 
			float:none; width:90%; margin:1.5em auto; padding:0 2em 1em; text-align:left; 
			background-color:white; border:1px solid #FFD54F; /* Amber 600 */
		}

		form { width:90%; }
	}

	@media all and (max-width: 550px) { 
		form div.cf > div, form div.cf > div:last-child { width:100%; }
	}

	@media all and (max-width: 400px) { 


		main > div > p, dt, dd { width:95%; font-size:1.1em; }
		form { width:95%; }

		p, dd { text-indent:1em; }

		.tileset div { width:98%; margin:.5em auto; padding:0 1em 1em; text-align:center; }
		.tileset div p { text-indent:0; }

		.screenshots > a  { width:90%; margin:5%; }
		.overlay-caption > * .caption { padding:1.5em; }

		.overlay-caption > a .caption { 
			background-color:white; color:#1565C0; position:static;
			text-align:left; line-height:normal;
			height:auto; bottom:0; 
			padding:0;  min-height:0; 
			}

		.overlay-caption > a  { 
			width:95%; 
			float:none; 
			margin:0 auto 1em; 
			min-height:0; 
			height:auto; 
			background-position:150% 150%;
			/*border:1px dotted blue;*/ 
		}
		.overlay-caption > a:last-child { height:80px; }

		.overlay-caption > a:hover .caption  { 
			text-decoration:underline; 
		}
	}