@CHARSET "UTF-8";

.word-variants {
	margin-top: 10px;
}

.word-variants .word-variants-header {
	font-size: 80%;
    float: left;
    background-color: #858e96;
    padding: 0.5em;
    color: #fff;
}

.word-variants .word-variants-list {
	font-size: 80%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	border: 0px;
}

.word-variants .word-variants-list .list-group-item {
	border-radius: 0;
	padding: 0.5rem 1rem;
	flex-basis: calc( 100%/3 - 4px );
	border: 0px;
	border: 1px solid #858e96;
}

.word-variants .word-variants-list .list-group-item:nth-child(3n+2) {
	border-left:0px;
}
.word-variants .word-variants-list .list-group-item:nth-child(3n+3) {
	border-left:0px;
}

.word-variants .word-variants-list .list-group-item.active {
	color: #464a4e;
    background-color: #dddfe2;
	border-color: #858e96;
}

.navbar-dark .navbar-nav .nav-link {
    color: #ffffffbf;
}

.content {
	margin-top: 60px;
}

.section-nav, .city-nav {
	margin-top: 20px;
	margin-left: 20px;
}

.section-nav, .section-nav button {
	width: 230px;
}

.city-nav, .city-nav button {
	width: 150px;
}

.dropdown-item {
	font-size:14px;
}

.alfa-nav {
	margin-top: 20px;
}

.list-group.video-action {
	margin: 20px 0px;
}

.video-block video {
	width: 100%;
	min-height: 432px;
}

a.word {
	font-weight: bold;
}

.video-action > a.show-video {
	font-weight: bold;
}

.hidden {
	display: none;
}

.city-list {
	font-size: 90%;
}

.city-list a.show-video {
	color: #464a4e;
    background-color: #dddfe2;
    padding-left: 2.25em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.video-section {
    font-size: 80%;
    float: left;
    background-color: #858e96;
    padding: 0.5em;
    color: #fff;
    margin-top: 15px;
}

.video-desc {
    line-height: 1.25em;
    padding: 1em 0.5em;
    border: 1px solid #848e96;
}

.video-control {
	text-align: center;
}
.video-control button {
	width: 100px;
}
.video-control .note {
	padding-bottom: 0.5em;
}

@media only screen and (max-width:414px) {
	.video-action a.word span.word-main {
		display: block;
	}
	.video-action a.word span.small.float-right {
		float: none !important;
		display: block;
	}
	.section-nav, .city-nav {
		margin: 10px 0px 0px 0px;
		width: 100%;
		text-align: center;
	}
	.section-nav button, .city-nav button {
		width: 90%;
		margin: 0px auto;
	}
	.float-left.page-filter {
		float: none !important;
	}
	.float-right.filter {
		float: none !important;
	}
	.pagination-sm .page-item .page-link {
		border-radius: 0.2rem;
	}
	.pagination {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.pagination > .page-item {
		width: 15%;
		text-align: center;
		margin-bottom: 4px;
	}
   	.pagination > .page-item.default {
		width: 100%;
	}
	.video-block video {
		width: 100%;
		min-height: unset;
	}
	.video-control button {
		width: 28%;
		font-size: 80%;
	}	
	.video-control button#normal {
		width: 34%;
	}
	
	.word-variants .word-variants-list {
		align-items: stretch;
	}
	
	.word-variants .word-variants-list .list-group-item {
		border-radius: 0;
		padding: 0.5rem 1rem;
		flex-basis: calc( 100%/2 );
		border: 0px;
		border: 1px solid #858e96;
	}
	
	.word-variants .word-variants-list .list-group-item:nth-child(3n+2) {
		border-left:1px;
	}
	.word-variants .word-variants-list .list-group-item:nth-child(3n+3) {
		border-left:1px;
	}
	.word-variants .word-variants-list .list-group-item:nth-child(odd) {
		border-left: 1px solid #858e96;
	}
	.word-variants .word-variants-list .list-group-item:nth-child(even) {
		border-left:0px !important;
	}
	.list-group-item {
		margin-bottom: -1px !important;
	}
}

@media only screen and (max-width:823px) and (orientation:landscape) {
	.video-action a.word span.word-main {
		display: block;
	}
	.video-action a.word span.small.float-right {
		float: none !important;
		display: block;
	}
	.float-left.page-filter {
		float: none !important;
	}
	.float-right.filter.sections {
		float: left !important;
		width: 48%;
	}
	.float-right.filter.cities {
		float: right !important;
		width: 48%;
	}
	.section-nav, .city-nav {
		margin: 10px 0px 0px 0px;
		width: 100%;
		text-align: center;
	}
	.section-nav button, .city-nav button {
		width: 100%;
		margin: 0px auto;
	}
	.pagination-sm .page-item .page-link {
		border-radius: 0.2rem;
	}
	.pagination {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.pagination > .page-item {
		width: 12%;
		text-align: center;
		margin-bottom: 4px;
	}
   	.pagination > .page-item.default {
		width: 100%;
	}
	.video-block video {
		width: 100%;
		min-height: unset;
	}
	.list-group-item {
		margin-bottom: -1px !important;
	}
	.word-variants .word-variants-list {
		align-items: stretch;
	}
}