/* Accessible at /communities/  */

.community-header {
	text-align: center;
	margin-bottom: 60px;
}

.community-home .community {
	background: #EEF3F3;
}

.community-header .row:first-child {
	padding: 6rem 10rem;
	display: flex;
}

@media only screen and ( min-width: 992px ) {
	.community-header .row:first-child {
		justify-content: center;
		align-items: center;
	}
}

@media only screen and ( max-width: 992px ) and ( min-width: 768px ){
	.community-header .row:first-child {
		flex-direction: column;
	}
}

@media  only screen and ( max-width: 991px ) {
	.community-header .row:first-child {
		padding: 6rem;
	}
}

@media  only screen and ( max-width: 767px ) {
	.community-header .row:first-child {
		padding: 6rem 0;
	}
}

.community-header .page-title {
	margin: 20px 0 0 0;
	font-size: 3rem;
	font-weight: normal;
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-transform: none;
	text-align: left;
	word-wrap: break-word;
}

@media only screen and ( max-width: 767px ) {
	.community-header .page-title {
		font-size: 2em;
	}
}

/*.community-header .community-info {
	margin-top: 25px;
	padding-left: 40px;
}*/

@media only screen and ( max-width: 992px ) {
	.community-header .user-bio {
		margin-bottom: 40px;
	}
}

.community-header .follow-button {
	padding: 10px 40px;
	border-color: #ee283c;
	background-color: transparent;
	text-transform: uppercase;
	font-weight: 600;
}

.community-header .follow-button:hover {
	background-color: #ee283c;
	color: white;
}

.community-header .community-tagline {
	line-height: 22px;
	text-align: left;
	color: #8b99a1;
}

/* To override interview-single avatar styles at same media query */
@media only screen and ( max-width: 1100px ) {
	.community-header .row:first-child {
		flex-direction: column;
	}

	.community-header .community-info {
		width: 100%;
	}

	.community-header .page-title {
		text-align: center;
	}

	.community-header .community-details {
		justify-content: center;
	}

	.community-header div.archive-community-buttons {
		float: none;
	}
}

/* To override interview-single avatar styles at same media query */
@media only screen and ( max-width: 900px ) and ( min-width: 767px ) {
	.community-header .avatar {
		width: auto;
		margin-right: 0;
	}
}

.community-header .avatar img {
	border-radius: 50%;
	height: 260px;
}

.community-home .archive-community-image {
	max-width: 322px;
	margin: 0 auto;
}

@media only screen and ( max-width: 480px ) {
	.community-header .nav li a {
		text-align: center;
	}
}

.community-header div.social-tagline-container {
	margin-top: 18px;
	margin-bottom: 0;
	justify-content: left;
	align-items: center;
}

@media only screen and ( max-width: 1100px ) {
	.community-header div.social-tagline-container {
		justify-content: center;
	}
}

.community-header .social-links {
	display: flex;
	margin-right: 8px;
}

.community-header .social-links a {
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: 1px solid #fff;
	cursor: pointer;
	border-radius: 50%;
	margin-right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease-in-out;
}

.community-header .social-links a.facebook {
	background-color: #3b5998;
}

.community-header .social-links a.twitter {
	background-color: #55acee;
}

.community-header .social-links a.instagram {
	background-color: #e95950;
}

.community-header .social-links a.personal {
	background-color: #7B868C;
}

.community-header .social-links i,
.community-header .social-links span {
	color: #fff;
	font-size: 14px;
}

.community-header .archive-community-buttons {
	margin-top: 20px;
	float: left;
}

.community-header .archive-community-buttons .btn {
	border: none;
	padding-top: 11px;
	padding-bottom: 11px;
}

/* Community More Info Modal (H4) */
#community-additional-info {
	text-align: left;
}

/* Community Notifications */
#community-notifications-button,
#community-notifications-menu {
	border-radius: 4px;
}

#community-notifications-menu li {
	padding: 4px 10px;
}

#community-notifications-menu li:hover {
	background-color: #ee283c;
	color: #fff;
}

#community-notifications-wrapper {
	margin-left: 8px;
}

#community-notifications-menu label {
	font-weight: normal;
	display: inline-flex;
	margin-bottom: 0;
}

#community-notifications-menu span {
	width: 100%;
	margin-left: 6px;
}

#edit-community-button,
#community-notifications-button {
	border: 0;
	padding: 11px 20px;
}

#community-notifications-button .fa-cogs {
	margin-right: 4px;
	font-size: 16px;
}

#community-notifications-button #more {
	margin-left: 4px;
	font-size: 18px;
	position: relative;
	margin-top: -12px;
	vertical-align: middle;
}

.community-admin #community-notifications-button,
.community-admin #community-notifications-wrapper {
	cursor: not-allowed;
}

.community-admin #community-notifications-button:hover {
	color: #999;
}

/* Account utilities */
.account-utilities {
	font-size: 25px;
}

.account-utilities li {
	position: relative;
}

.account-utilities .glyphicon {
	background: #d8e0e1;
	border-radius: 50%;
	padding: 10px;
	color: white;
}

.account-utilities a:hover .glyphicon {
	color: #8b99a1;
}

.utilities-toggle.-open {
	position: relative;
}

.utilities-toggle.-open .glyphicon {
	color: #ee283c;
	border-radius: 50% 0 0 50%;
}

.utilities-toggle.-open .glyphicon:before {
	content: "\e014";
}

.extra-utilities {
	display: none;
	position: absolute;
	width: 250px;
	top: 1px;
	left: 40px;
	background: #d8e0e1;
	padding: 0 10px 10px;
	margin: 0;
	z-index: 10;
	animation: slideInLeft 200ms;
}

.extra-utilities a {
	font-size: 16px;
	width: 100%;
	border-bottom: 1px solid #8b99a1;
	color: #6a8290;
	padding-bottom: 5px;
}

.extra-utilities a:hover {
	color: #ee283c;
}

.extra-utilities li:last-of-type a {
	border-bottom: none;
}

.extra-utilities.-open {
	display: block;
}

/* My account home grid */
.community-home .interview {
	margin-bottom: 30px;
}

.community-home .member {
    margin-bottom: 15px;
}

.community-home .member.last_subset_item,
.community-home .question-list.last_subset_item {
	margin-bottom: 0;
}

.community-home .interview .edit-profile {
	text-transform: uppercase;
}

/* Interviews header container */
#community-interviews-title-container {
	display: flex;
	align-items: center;
}

/* Interviews header title */
.community-home .section-title {
	margin: 0 0 30px 0;
}

/* Sort */
.community-home .sort {
	text-transform: uppercase;
	margin: 20px 0 30px 0;
}

.community-home .sort h4 {
	font-weight: bold;
	font-size: 24px;
}

.community-home .sort select {
	width: 190px;
	margin: 0 0 0 10px;
	display: inline-block;
	border: 1px solid #ccc;
	height: 40px;
	padding: 4px 6px;
	font-size: 14px;
	line-height: 20px;
	color: #555555;
	vertical-align: middle;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.community-home .sort select:focus {
	outline: none;
}

.community-home .unavailable {
	display: flex;
	justify-content: center;
	align-items: center;
}

.community-home .unavailable p {
	margin: 0;
}

.community-home .search-filters.col-md-3.col-xs-12 {
	padding-left: 30px;
}

/*--- Message Container CSS ---*/
.message-container.hide-message {
	display: none;
}

.message-container.show-message {
	display: block;
}

.message-container i {
	position: absolute;
	top: 10px;
	right: 25px;
	cursor: pointer;
}

.community-home .message-container i {
	position: relative;
	top: 0;
	right: 0;
}

.community-home .message-container .well {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.community-home .visibility-container {
	text-align: center;
}

.community-home .visibility-container .container-fluid {
	padding-top: 55px;
}

.community-home .visibility-container .fa-lock {
	font-size: 10rem;
	color: #8b99a1;
}

.community-home .visibility-container h3 {
	color: #8b99a1;
	font-size: 18px;
}

.community-home button[name=ask-to-join] {
	font-size: 3rem;
	text-transform: uppercase;
	outline: none;
}

.community-home a[name=revoke-pending-member-request],
li[data-section=join] a,
li[data-section=leave] a,
a[name=rescind-interview-invitation] {
	cursor: pointer;
}

/*--- Create Interview Square ---*/
.create-community-square {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d8e0e1;
	padding-bottom: 100%;
}

.create-community-square a {
	text-align: center;
	color: #8b99a1;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: center;
}

.create-community-square span {
	color: red;
	width: 100%;
	font-size: 22px;
}

/*************************** Community Revamp Styles ***************************/

.community-home .interview-header-container {
	display: flex;
	align-items: center;
	margin-bottom: 35px;
}

.community-home .interview-header-main {
	margin: 0 35px 0 0;
}

.community-home .interview-header-sort {
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
}

.community-home .interview-sort-dropdown {
	margin-left: 10px;
	border-style: solid;
	width: 190px;
	height: 40px;
	font-size: 14px;
}

.community-home .interview-card-row {
	margin-bottom: 3rem;
	border-bottom: 1px solid #eee;
	padding-bottom: 40px;
}

.community-home .interviewer-meta-container {
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
}

.community-home .interviewer-avatar-image img {
	border-radius: 50%;
	margin-right: 10px;
}

.community-home .interviewer-metadata {
	line-height: 1.3;
	margin-top: 8px;
}

.community-home .interviewer-full-name {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
}

.community-home .interview-publish-date {
	color: #8b99a1;
	margin-top: -5px;
	font-size: 13px;
	font-weight: 500;
}

.community-home .interview-post-title {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	display: block;
	margin-bottom: 10px;
	word-wrap: break-word;
	color: #333;
}

.community-home .interview-post-title:hover {
	color: #ee283c;
}

.community-home .interview-description {
	color: #8b99a1;
}

.community-home .interview-taxonomies-container .taxonomies {
	margin: 0;
	padding: 0;
}

.community-home .interview-taxonomies-container .interview-taxonomies-list {
	display: inline-block;
	margin-bottom: 0.25em;
}

.community-home .interview-taxonomies-container .interview-taxonomies-list-items {
	background-color: #b2c1c4;
	border-radius: 100px;
	color: white;
	display: inline-block;
	padding: 0.25em 1em;
	transition: background-color 0.2s ease-in-out;
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

.community-home .interview-taxonomies-container .interview-taxonomies-list-items:hover {
	background-color: #ee283c;
}

/*************** Question List Styles ***************/
/* Question list container */
#question-lists-container-wrapper {
	min-height: 8em;
	margin-bottom: 60px;
}

.question-lists-container {
	border-left: 1px solid #eee;
	padding-left: 30px;
}

@media only screen and ( max-width: 1199px ) {
	#question-lists-container-wrapper {
		min-height: 6em;
	}

	.question-lists-container {
		border-left: none;
		padding-left: 0;
	}
}

/* Community Question List Buttons */
#community-question-lists-button-container {
	padding-left: 0;
	padding-right: 0;
	float: none;
}

#show-all-question-lists,
.community-home .create-question-list {
	width: 100%;
	text-transform: uppercase;
}

.community-home .create-question-list {
	padding: 6px 12px;
	margin-top: 20px;
}

@media only screen and ( max-width: 1199px ) {
	#community-question-lists-button-container {
	}
}

/* Question list section header*/
#question-lists-header {
	padding-left: 30px;
	margin-right: 0;
}

@media only screen and ( max-width: 1199px ) {
	#question-lists-header {
		padding-left: 0;
	}
}

/* Question list cards */
.community-home .question-list {
	float: none;
	padding: 0;
	margin-bottom: 20px;
}

.community-home:not(#community-question-lists-modal) .question-list:last-child {
	margin-bottom: 0px;
}

@media only screen and ( max-width: 1199px ) {
	.community-home .question-lists-container:not(.in-modal) {
		font-size: 0;
	}

	#no-question-lists {
		font-size: 16px;
		text-align: center;
	}

	.community-home .question-list:not(.in-modal) {
		width: 48.92%;
		display: inline-block;
		margin-bottom: 0;
	}

	.community-home .question-list:not(.in-modal):first-child {
		margin-right: 20px;
	}
}

@media only screen and ( max-width: 991px ) {
	.community-home .question-list {
		width: 100% !important;
		margin-right: 0 !important;
	}

	.community-home .question-list:not(.in-modal):first-child {
		margin-bottom: 20px;
	}
}

.community-home .question-list-card .question-list-author-meta {
	left: 20px;
}

/* Community question lists modal */
#community-question-lists-modal .modal-body {
	padding: 20px;
}

#community-question-lists-modal .question-lists-container {
	border: none;
	padding: 0;
	font-size: 0;
}

#community-question-lists-modal .question-list {
	width: 48.5%;
}

#community-question-lists-modal .question-lists-container {
	display: flex;
	flex-flow: wrap;
}

#community-question-lists-modal .question-list:nth-child(2n-1) {
	margin-right: 20px;
}

#community-question-lists-modal .question-list:nth-last-child(1) {
	margin-right: 0 !important;
}

/* Left/Right Section Styling */
@media (min-width: 1200px) {
	#left-section.col-lg-9 {
		width: 74%;
	}

	#right-section.col-lg-3 {
		width: 26%;
		padding-left: 30px;
	}
}

@media (max-width: 1199px) {
	.community-home .community-header,
	.community-home #right-section {
		padding: 0 30px;
	}

	.community-home #right-section {
		margin-top: 45px;
	}

	.community-home .message-container {
		padding: 0 15px;
	}

	.community-home .interview-card-row:last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	div.community-home .community-details {
		display: flex;
		flex-wrap: wrap;
	}

	div.community-home .community-details span {
		flex: 1 1 35%;
	}

	div.community-home .community-details i:nth-of-type(2) {
		display: none;
	}

	div.community-home .social-tagline-container {
		flex-direction: column;
		margin-top: 14px;
	}

	.community-home .social-links {
		margin-bottom: 15px;
	}

	.community-home .archive-community-buttons {
		margin-top: 15px;
	}

	.community-home .archive-community-buttons {
		display: flex;
		flex-direction: column;
	}

	.community-home .archive-community-buttons .btn,
	#community-notifications-menu {
		width: 100%;
	}

	.community-home .archive-community-buttons > .btn:not(:last-child) {
		margin-bottom: 20px;
	}
}