@import url('./grid.css');
	@import url('http://fonts.cdnfonts.com/css/neogrey');
	@import url('http://fonts.cdnfonts.com/css/calibri-light');

	* {
		font-family: 'Calibri Light', 'Neogrey';
		line-height: 1.3 !important;
		margin: 0 0;
		padding: 0 0;
	}

	body {
		--site-color: rgb(243, 21, 43);
		--site-background: rgb(255, 255, 214);
		background-color: white;
		color: var(--site-color);
		height: 100% !important;
	}

	#page {
		display: table;
		position: relative;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	#container {
		/* width: 96vw; */
		width: 98%;
		height: 98%;
		margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
	}

	.colored {
		background-color: var(--site-background);
	}

	.third {
		height:30%;
	}

	 .text p:hover, .text p:active {
		background-color:black;
		color: white;
	}

	#content p {
		font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));	
	}

	#content {
		position:relative;
		z-index: 2;
	}

	.shadow {
		-moz-box-shadow:    inset 0.5em 0.5em 2em -1em var(--site-color);
		-webkit-box-shadow: inset 0.5em 0.5em 2em -1em var(--site-color);
		box-shadow:         inset 0.5em 0.5em 2em -1em var(--site-color);
	}

	.border {
		outline: solid var(--site-color) 0.13em;
	}

	.border:not(.label) {
		padding: 0.6em;
	}

	table, tr {
		border: solid var(--site-color) 0.13em;
		border-collapse: collapse;
	}

	.discussion {
		height: 22rem;
	}
	
	table.index {
		border-collapse:initial !important;
	}
	
	td {
		padding: 0.5em;
	}

	.label {
		display:table;
		height: calc(3vh + 1.5vw); 
	}

	#home-labels .label {
		 margin: 0.7em; 
	}

	.label > p {
		display: table-cell;
		vertical-align: middle;
		line-height: 1;
		font-family: 'Neogrey';
	}

	#logo a {
		font-family: 'Neogrey';
		color: rgb(255, 241, 72);
		-webkit-text-stroke-width: 0.07rem;
		-webkit-text-stroke-color: var(--site-color);
	}
	.center {
		margin-left: auto !important;
	}

	.uppercase {
		text-transform: uppercase;
	}

	.thin {
		font-weight: 100;
	}

	a {
		text-decoration: none;
		color: var(--site-color);
	}

	p {
		margin-bottom: 1em;
		margin-top: 1em;
	}

	.inline > p {
		display: inline;
	}

	.right {
		float: right;
	}

	.info > p {
		font-weight: 900;
	}

	.fat.border {
		border: solid var(--site-color) 0.3rem;
	}

	.back {
		z-index: 1;
		position: relative;
		margin-top:5vh;
	}

	.back img {
		width: calc(5vw + 10vh);
		height: auto;
		/* height: 150px; */
	}

	a > table:hover, a > table:active {
		outline: solid var(--site-color) 0.7rem;
	}

	a > table:hover td.info, a > table:active td.info  {
		background-color: var(--site-background);
		-moz-box-shadow:    inset 0.5em 0.5em 2em -1em var(--site-color);
		-webkit-box-shadow: inset 0.5em 0.5em 2em -1em var(--site-color);
		box-shadow:         inset 0.5em 0.5em 2em -1em var(--site-color);
	}

	.main-font, .main-font > p  {
		font-family: 'Neogrey';

	}

	object {
		filter: drop-shadow( 5px 5px 0 var(--site-color));
	}

	#labels {
		position:relative;
		z-index:3;
	}

	#about-logo img {
		position: absolute;
		z-index: -1;
	}

	#content.discussions {
		margin-top:10vh;
	}

	@media screen and (max-width: 60em) {
		#about-back {
			position: absolute;
			top: -14vh;
			left: 30vw;
		}

		.center-sm {
			margin-left: auto !important;
		}

		#container:not(.cover) {
			margin-top: 10vh;
		}

		#logo {
			z-index: 1;
			position: relative;
		}

		#logo img {
			height: 90%;
			width: 80%;
			margin-top: 10%;
			margin-left: 10%;
		}

		#about-logo img {
			height: 80%;
			width: 80%;
			top: -5vh;
			left: 2vw;
		}
	
		#home-labels {
			position:relative;
			z-index: 2;
		}

		.big, .big > p, .home.label p  {
			font-size:  5vh !important;
		}

		.normal, .normal > p, .home.label:first-child p {
			font-size: 2vh !important;
		}
	
		.huge, .huge > p {
			font-size: 6vh !important;
		}  

		body.discussions {
			background-image: url("./commons/discussions.png");
			background-repeat: no-repeat;
			background-size: 170%;
			background-position: 25% -30% ;
		}	

		#first-join {
			background-image: url("./commons/join.png");
			background-repeat: no-repeat;
			background-size: 170%;
			background-position: 25% 100%;
		}

		#container.index {
			background-image: url("./commons/logo_pilnas.png");
			background-repeat: no-repeat;
			background-size: 80% auto;
			background-position: center;
			background-position-y: 5vh;
		}	

		body.about {
			background-image: url("./commons/logo.png");
			background-repeat: no-repeat;
			background-size: 80% auto;
			background-position: 50% 30vh;
		}

		.bottom-align-sm {
			vertical-align: bottom;
	
		}
	}

	.bottom-align {
		vertical-align: bottom;

	}

	@media screen and (min-width: 60em) {
		#container:not(.cover) {
				margin-top: 12vh;
		}

		#container.index {
			background-image: url("./commons/logo_pilnas.png");
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-position: 41% 2vh;
		}	

		body.discussions {
			background-image: url("./commons/discussions.png");
			background-repeat: no-repeat;
			background-size: cover;
		}	

		#first-join {
			background-image: url("./commons/join.png");
			background-repeat: no-repeat;
			background-size: 70%;
			background-position: 80% -50%;
		}

		#logo img {
			position: absolute;
			z-index: 1;
			top: 5vh;
			height: 92vh;
			left: 30vw; 

		}

		body.about {
			background-image: url("./commons/logo.png");
			background-repeat: no-repeat;
			background-size: auto 120%;
			background-position: 45% -8vh;
		}
	
		#home-labels {
			position:absolute;
			z-index: 1;
			top: -5vh;
			right: 58vw; 
			height: 30vh;
		}

		.big, .big > p, .home.label p  {
			font-size:  5vh !important;
		}

		.normal, .normal > p, .home.label:first-child p {
			font-size: 2vh !important;
		}
	
		.huge, .huge > p {
			font-size: 4vw !important;
		}  

	}