@media screen and (max-width: 800px) {

	html, body {
		margin: 0;
		padding: 0;
		font-size: 12px;
		font-family: 'Tahoma';
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color: #F4F4F4;
	}

	* {
		box-sizing: border-box;
	}

	#wrapper {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #FFF;
	}

	#header {
		flex: 0 0 auto;
		height: auto;
		width: 100%;
		border-bottom: 2px solid #F4F4F4;
		padding: 6px 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #FFF;
	}

	#header .logo {
		flex: 0 0 auto;
		height: 40px;
	}

	#header .title {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 6px;
		padding: 0;
	}

	#header .title h2 {
		font-size: 12px;
		line-height: 16px;
		margin: auto auto;
		text-align: center;
		padding: 0 10px;
	}

	#header .langs {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0;
		padding: 0;
	}

	#header .langs .lang {
		padding: 2px 0;
		cursor: pointer;
		border-bottom: 1px dotted transparent;
	}

	#header .langs .lang:hover {
		color: #555;
		border-bottom: 1px dotted #555;
	}

	#header .langs .lang.active {
		color: #00793E;
		border-bottom: 1px dotted #00793E;
	}

	#content {
		flex: 1 1 auto;
		height: auto;
		width: 100%;
		padding: 10px 12px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #FFF;
	}

	#content .photo {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0;
		padding: 0;
	}

	#content .photo img {
		width: 60%;
	}

	#content .infoset {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 12px 0 0 0;
		padding: 0;
	}

	#content .infoset .actions {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
	}

	#content .infoset .actions .search-block {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 12px;
	}

	#content .infoset .actions .search-block input {
		width: 100%;
		padding: 10px 16px;
		border: 1px solid #DDD;
		font-size: 14px;
		border-radius: 3px;

	}

	#content .infoset .actions .search-block input:focus {
		outline: none !important;
	}

	#content .infoset .actions .sort-block {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 0;
		border: 1px solid #DDD;
		border-radius: 4px;
		cursor: pointer;
		margin-bottom: 12px;
	}

	#content .infoset .actions .sort-block .sort-text {
		padding: 10px 16px;
		border-right: 1px solid #DDD;
	}

	#content .infoset .actions .sort-block .sort-btn {
		padding: 10px 16px;
		border-left: 1px solid #DDD;
		border-right: 1px solid #DDD;
		border-bottom: 1px solid #DDD;
		cursor: pointer;
		background-color: #EEE;
	}

	#content .infoset .actions .sort-block .sort-btn.active {
		background-color: #DDD;
	}

	#content .infoset ul.title {
		display: none;
	}

	#content .infoset ul.list {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#content .infoset ul.list li {
		width: 100%;
		margin: 0 0 12px 0;
		padding: 10px 12px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		border: 1px dotted #CCC;
	}

	#content .infoset ul.list div {
		padding: 3px 2px;
	}

	#content .infoset ul.list div.card-title {
		font-weight: bold;
	}

	#content .infoset .pagination-block {
		width: 100%;
		margin: 16px 0 0 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	#content .infoset .pagination-block ul.pagination {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	#content .infoset .pagination-block ul.pagination li {
		display: flex;
		flex-direction: column;
		margin-right: 8px;
		border: 1px solid #DDD;
		cursor: pointer;
	}

	#content .infoset .pagination-block ul.pagination li:last-child {
		margin-right: 0;
	}

	#content .infoset .pagination-block ul.pagination li a {
		text-decoration: none;
		padding: 8px 10px;
		color: #555;
	}


	.dropdown-title {
		border: none;
		padding: 8px 12px;
		margin: 0;
	}

	.dropdown {
		position: relative;
		display: inline-block;
		width: 180px;
		background-color: #FFF;
		margin: 0;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		width: 180px;
		z-index: 1;
		margin: 0;
	}

	.dropdown-content .item {
		display: block;
		background-color: #FFF;
		margin: 0;
	}

	.dropdown .dropdown-content.open {
		display: block;
	}

}


@media screen and (min-width: 801px) {

	html, body {
		margin: 0;
		padding: 0;
		font-size: 16px;
		font-family: 'Tahoma';
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color: #F4F4F4;
	}

	* {
		box-sizing: border-box;
	}

	#wrapper {
		margin: 0;
		padding: 0;
		width: 1000px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #FFF;
	}

	#header {
		flex: 0 0 auto;
		height: auto;
		width: 100%;
		border-bottom: 4px solid #F4F4F4;
		padding: 16px 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #FFF;
	}

	#header .logo {
		flex: 0 0 auto;
		height: 80px;
	}

	#header .title {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 30px;
		padding: 0;
	}

	#header .title h2 {
		font-size: 26px;
		margin: auto auto;
		text-align: center;
	}

	#header .langs {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0;
		padding: 14px 0;
	}

	#header .langs .lang {
		padding: 2px 0;
		cursor: pointer;
		border-bottom: 1px dotted transparent;
	}

	#header .langs .lang:hover {
		color: #555;
		border-bottom: 1px dotted #555;
	}

	#header .langs .lang.active {
		color: #00793E;
		border-bottom: 1px dotted #00793E;
	}

	#content {
		flex: 1 1 auto;
		height: auto;
		width: 100%;
		padding: 16px 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #FFF;
	}

	#content .photo {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0;
		padding: 0;
	}

	#content .photo img {
		width: 200px;
	}

	#content .infoset {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 30px 0 0 0;
		padding: 0;
	}

	#content .infoset .actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0;
		padding: 0;
	}

	#content .infoset .actions .search-block {
		flex: 0 0 auto;
		width: 250px;
	}

	#content .infoset .actions .search-block input {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #DDD;
		font-size: 16px;
		border-radius: 4px;
	}

	#content .infoset .actions .search-block input:focus {
		outline: none !important;
	}

	#content .infoset .actions .sort-block {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 0;
		border: 1px solid #DDD;
		border-radius: 4px;
		cursor: pointer;
	}

	#content .infoset .actions .sort-block .sort-text {
		padding: 8px 12px;
		font-weight: bold;
		border-right: 1px solid #DDD;
	}

	#content .infoset .actions .sort-block .sort-btn {
		padding: 8px 12px;
		border-left: 1px solid #DDD;
		border-right: 1px solid #DDD;
		border-bottom: 1px solid #DDD;
		cursor: pointer;
		background-color: #EEE;
	}

	#content .infoset .actions .sort-block .sort-btn.active {
		background-color: #DDD;
	}

	#content .infoset ul.title,
	#content .infoset ul.list {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#content .infoset ul.title li,
	#content .infoset ul.list li {
		width: 100%;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: 60px 240px 1fr 1fr 2fr 1fr;
		border-bottom: 1px dotted #CCC;
	}

	#content .infoset ul.title li {
		background-color: #DDD;
	}

	#content .infoset ul.title {
		margin-top: 30px;
	}

	#content .infoset ul.title div,
	#content .infoset ul.list div {
		padding: 10px 4px;
	}

	#content .infoset ul.title div {
		text-align: center;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	#content .infoset ul.list div.birthyear,
	#content .infoset ul.list div.nationality,
	#content .infoset ul.list div.place,
	#content .infoset ul.list div.called {
		text-align: center;
	}

	#content .infoset ul.list div.card-title {
		display: none;
	}

	#content .infoset .pagination-block {
		width: 100%;
		margin: 30px 0 0 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	#content .infoset .pagination-block ul.pagination {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	#content .infoset .pagination-block ul.pagination li {
		display: flex;
		flex-direction: column;
		margin-right: 16px;
		border: 1px solid #DDD;
		cursor: pointer;
	}

	#content .infoset .pagination-block ul.pagination li:last-child {
		margin-right: 0;
	}

	#content .infoset .pagination-block ul.pagination li a {
		text-decoration: none;
		padding: 12px 16px;
		color: #555;
	}


	.dropdown-title {
		border: none;
		padding: 8px 12px;
		margin: 0;
	}

	.dropdown {
		position: relative;
		display: inline-block;
		width: 300px;
		background-color: #FFF;
		margin: 0;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		width: 300px;
		z-index: 1;
		margin: 0;
	}

	.dropdown-content .item {
		display: block;
		background-color: #FFF;
		margin: 0;
	}

	.dropdown .dropdown-content.open {
		display: block;
	}

}