/*
 * Mobile-specific styles - only applies to mobile devices
 * This file contains styles that override desktop styles for mobile optimization
 */

@media screen and (max-width: 768px) {
* {
	font-size: 14px;
	font-family: helvetica;
}

body { min-width: 320px; }

.darkGradBGBorder {
	width: 316px;
}
.unviewed {
	font-weight: 400;
}
div.flushLinks a.orangeNav, div.flushLinks a {
	font-weight: 400; 
	text-decoration: none;
	font-size: 18px;
	line-height: 24px;
	color: #5c92b1;
	padding: 3px 1px;
}
.linkHolder {
	right: 0px;
	background: rgba(26, 30, 31,0.50);
	border-color: rgba(26, 30, 31,0.60);
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 6px;
}
.flushLinks {
	padding: 4px 0 0 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 6px;
	right: 0px;
	height: 24px;
	text-align: center;

}
a.postViewers {
	display: none;
}
.replyPost.dynamic {
	margin: 7px;
}
form textarea {
	font-size:16px;
}
.replyPost.dynamic textarea {
  width: 282px;
  width: 100%;
  height: 110px;
  margin-right: 0;
}

#unread_link { right: 79px; }
#unread_link.selected { right: 78px; }
div#recent_link.selected { border-right:none; }
.hubHomeHeader {
	
	overflow: hidden;
}
.darkGradBGHead, .contentBoxHeader {
	width: 100%;
	margin: 0 auto;
	padding-left: 2px;
}
.contentBoxHeader a {
	font-size: 16px;
}
.bodyTitleBar {
	width: 295px;
	border-radius: 7px;
	padding: 2px 11px;
}
.contentBoxFooterTall {
	padding: 0 5px
}
.contentBoxFooter a {
	margin-top: 5px;
}
.hub-list-name {
	max-width: 120px;
	overflow: hidden;
}
.rootPost {

}
.darkGradBGWrap {
	width: 100%;
	margin-left: 1px;
	border-bottom-right-radius: 9px;
	border-bottom-left-radius: 9px;
	padding-bottom: 1px;
}
.title {
	/* text-shadow: 0 1px 0 #777; */
	line-height: 24px;
	font-size: 18px;
	padding: 5px;
	/* background: rgb(100,137,165); */
	color:#fff;
	font-weight: 400;
}
.replyPost .rootPostHolderWrapper, .rootPostHolderWrapper {
	margin: 0;
	border-radius: 0;	
}
.replyPost .rootPostHolderWrapper {
	border-top: solid 1px #eee;
}
.unviewed .new-status-light { left: auto; right: 15px; top: -6px; display:none; }
.rootPost.unviewed, .replyPost.unviewed { border-left: solid 5px rgba(114, 189, 235, 1); margin-left: -5px; }
.unviewed .postText p, .unviewed .postText p * { font-weight: 400; }

.reply-link { display:inline; }

.darkGradBGBorder {
	width: 313px;
}
.darkGradBGBottom {
	width: 315px;
}
.darkGradBGHeadLeft, .darkGradBGHeadRight {
	display:none;
}

a.btnAddReply, a.btnEdit, a:hover.btnAddReply, a:hover.btnEdit {

}
.poster .avatarExtraSmall {
	padding: 0;
	margin: 6px 4px -3px 0px
}
.poster {
	width: auto;
	text-align: left;
	min-height: 10px;
	padding-left: 5px;
	float: none;
	color: #555;
	font-size: 18px;
	line-height: 24px;
	height: auto;
	margin-left: 0;
}
#outer {
	width: 100%;
	background: none;
	padding-top: 6px;
}

#headerLogo a {
	background-image: url("/assets/spokt-sprite-new@2x-ef1c7d5f.png");
	margin-top: -3px;
}


#pageWrap, #outer #pageWrap {
	/* width: 318px; */
}
#headerBoundary { width: 100%; }
.home-login-form {
	width: 282px;
	padding: 10px;
	position: absolute;
	top: 14px;
	right: 2px;
	background: #e6e6e6;
	border-left: solid 5px #ea8a35;
	border-right: solid 5px #57b1ff;
}
.home-login-form p {
	font-family: georgia, serif;
	color: #777;
	padding: 5px 10px;
}
.home-login-form form {
	height: 150px;
}
#user_session_submit.btn.right {
	margin-right:6px;
}
input[type="text"]#user_session_login, input[type="password"]#user_session_password {
	display:block;
	width: 273px;
	color: #444;
	background: #eee;
	font-size: 12px;
	border: none;
	position:relative;
	border-radius: 5px;
	box-shadow: none;
	font-size: 16px;
	padding: 5px;
	margin: 12px 6px;
}

.demoHubBox {
	margin-top:7px;
	width: 300px;
	margin-left: 0;
}

input#hub_name {
	font-size: 16px;
	position: relative;
	display:inline;
	border-radius: 5px;
	padding: 5px;
	background: #eee;
	text-align: left;
}
.demoVideoLink {
	padding-top: 15px;
	width: 100%;
}
.demoVideoLink .videoGraphic, .demoVideoLink .chevron { display:none; }
.demoVideoLink * { display:block; position:static; text-align: center; }

video#demoVideo{
	width: 300px;
	height: 169px;
	max-width: 300px;
	border-radius: 5px;
}
.demoVideoAd a {
	width: 298px;
	height: 57px;
	background-position: -441px 0;
	background-size: 737px 137px;
}
.demoVideoAd a:hover {
	background-position: -441px -64px;	
}
.signUpLink {
	width: 300px;
	height: 50px;
}
.signUpLink a {
	width: 300px;
	height: 38px;
	background-size: 502px 93px;
	background-position: 0px 0px;
}
.signUpLink a:hover {
	background-position: 0 -43px;
}
.home-login {
	float: right;
	margin-right: 1px;
	color: #e7e7e7;
	font-size: 18px;
	background: #888;
	border-radius: 7px;
	padding: 4px 10px;
	text-decoration: none;
}
#outer .contentWrap {
	background: none;	
	width: 100%;
	padding: 0;
}
.homeStep1, .homeStep2, .homeStep3 {
	border-radius: 10px;
	margin: 0 0 10px 2px;
}
.contentWrap {
	width:100%;
	margin: 0;
	position: static;
}

body.public-mobile .contentWrap { background: #111; }
body.public-mobile .contentWrap p, body.public-mobile .contentWrap h1 { color: #eee; }

body.public-mobile .contentWrap p { font-size: 15px; }
body.public-mobile h1 { margin: 0 auto 25px auto; text-align: center; padding: 0; font-size: 25px; text-transform: uppercase; font-weight: 100; }
.signup-form-wrapper { width: 99%; margin: 10px auto; background: transparent; box-shadow: none; }
.signup-form-wrapper form label { display: block; float:none; }
.no-account-link { margin-top: 20px; }
.translucent-form input[type=text], .translucent-form input[type=password] { width: 100%; }

.contentBox, body.product-family-hive .contentBox {
	width:100%;
	padding: 0 5px;
	border: none;
	border-radius: 0;
}
body.homePage.public-mobile .contentBox { background: #111; }

body.product-family-hive #headerLogo a {
  background-position: -24px -561px;
  margin-top: 6px;
}

.postMeta { font-size: 10px; }
.newsHolder {
	width: 300px;
}
#ctl00_lblWelcome {
	display:none;
}

/* This will only show the paperclip for attached files on mobile */
.postLinks {
	position: absolute;
  margin-top: 0;
  top: -116px;
  right: 0px;
}
.dateTime {
	position: relative; 
	right: 5px; 
	margin-top: -30px;
}
.postBody {
	padding-left: 5px;
	left: 0;
	width: 95%;
	width: auto;
	border-left: none;
	min-height: 5px;
	margin-left: 0;
	margin-right: 5px;
	overflow: visible;
}
.postBody p {
 width: 100%;
}
#headerWrap {
	height: 39px;
	margin-bottom: 0px;
}
#headerCap {
	height:45px;
}
#headerLogo a {
	height: 45px;
	font-size: 28px;
	top:5px;
	left: 4px;
 	text-shadow: none; 
 	top: 2px; 
}
div.post_photo a img { 
	/* max-width: 100%; */
}
.rootPost .poster { margin: 0 0 4px 0; }
.unviewed .rootPostHolderWrapper {
	/* border-left: solid 6px #ea8a35; */
}
#headerLogo img {
	margin:7px 0 0 10px; 
	height:35px; 
	width:85px;
}
 
.pollHolder {
	width: 283px;
	border-radius: 10px;
	margin:0;
}
.pollHeader {
}
.pollResponseContainer {
	width: 297px;
}
.pollResponseLeft {
	width: 80px;
}
.pollResponseRight {
	width: 212px;
}
.pollPercent {
	display:none;
}
.pollBG {
	width: 184px;
}
.pollBar {
	width: 176px;
}
.responseCount {
	font-size: 16px;
}

.lblue a, .light a {
	padding: 4px 0;
}
html:not([lang*=""]):not(:only-child) .txt12 {
	font-size: 14px;
	line-height: 18px;
}

.pollFooter { width: 283px; }
a.responderNames:hover span { top: -45px; left: 0px; width:156px; }
.poster img {
	width: 20px;
	margin: 0;
	display: inline;
}
.avatarLarge {
	height: 20px;
	width: 20px;
	padding:0;
}
.replyPost { 
	padding:0;
	border:none;
	margin-left: 0;
}
.avatarImage {
	font-size: 16px;
	width:auto;
	height: auto;
}
#your-hubs {
	top: 0;
	right: 0;
	width: 80%;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 10px;
	border:none;
}
#your-hubs div.rowItem span.lblue.left {
	width: 100px;
}

.footerContent {
	padding: 0 15px;
	text-align: right;
	width:100%;
}

#footerWrap * {
	color: #b2b2b2;
	text-decoration: none;
	font-size: 20px;
	line-height: 36px;
}

#footerWrap .footerColumn div {
	font-size: 20px;
}

.footerColumn {
	padding-top: 0;
	width: 100%;
}
#footerWrap .footerColumn div.title {
	font-family: georgia;
	font-size: 15px;
	color: #d2d2d2;
	line-height: 40px;
}

#footerWrap .footerBottom .footerContent, #footerWrap .footerBottom .footerContent * {
	font-size: 11px;
}

.URMsg p, .URMsg p a { font-size: 18px; line-height: 38px; }
.URMsg p a { text-decoration: underline; }

.photoGroupBox { box-sizing: content-box;	width:auto;height: auto; margin:0; padding-left: 1%;}
.photoGroupBox a.s49 { width: 30%; height:auto; }
.photoGroupBox a.s9 { width: 30%; height:auto; }
.photoGroupBox a.s4 { width: 47%; height:auto; }
.photoGroupBox a.sf { width: 98%; height:auto; }

.btnEdit.meta-tooltip {
	width: auto;
	padding: 0 3px 3px 3px;
	border-radius: 4px;
	top: -4px;
	border: solid 1px transparent; 
}

.btnEdit.meta-tooltip p, .reply-link.meta-tooltip p { 
	display: block;
	float: left;
	position: relative;
	top: 0;
	left: 0;
	background: none;
	color: #9d9d9d;
	width: auto;
	min-width: 0;
	margin: 0;
	padding-right: 0;
	font-weight: 400;
}
.btnEdit.meta-tooltip:hover p { color: #f06b1f; }
.btnEdit.meta-tooltip .meta-glyph { float: left; }

.books-link.meta-tooltip, .viewers-link.meta-tooltip,  .deleteLink.meta-tooltip, .rotate-left.meta-tooltip, .rotate-right.meta-tooltip, .meta-tooltip.feature-photo { display: none; }
.postLinks a#attachmentDownload { font-size: 0px; }
.postMeta { margin-left: 5px; }

.postMeta a { padding: 0px 3px; height: auto; margin-right: 4px; }
.meta-tooltip p { padding: 4px 4px 2px; font-size: 13px; line-height: 15px;  }

.fileUpload { margin-left: 0; }
.hubFormInput.label-less { margin-left: 0; }

.add-news.right { display:none; }

.rowItem .hub-name { width: auto; }
.rowItem { height: 40px;  }
.rowItem span, .rowItem a { font-size: 16px;line-height: 30px; }
#recent_list .rowItem { height: auto; }

.next-unviewed { padding: 4px; }

.contentBoxFooter div { font-size: 16px; height: 40px; line-height: 40px; font-weight: 600; width:auto; }
.contentBoxFooter div.total-title {  float: left;  }
.contentBoxFooter div.total-unviewed { float: right; margin-right: 11px; }

.fullWideHolder, .photoHolder { margin: 15px auto 25px auto; width: 100%; }

.post-time { margin-bottom: 5px; margin-top: -3px; }
.post-time span { display: none; }

table.stats { width: 100%; margin-left: 1px; }

#your-hubs.new-modal .logout { font-size: 18px; }
#your-hubs.new-modal .logout a { padding: 4px; font-weight: 600; }

body.spokt-app-mode { background: rgb(235,235,237); }
.spokt-app-mode #headerWrap { display:none; }
.spokt-app-mode #footerWrap .footerColumn .title { display:none; }
.spokt-app-mode #footerWrap .logout-link { display:none; }

#oldest_first, #newest_first { display:none; }
div.pagination { text-align: right; padding: 10px 0;}
.pagination a, .pagination em.current, .pagination .gap { display:none; }
.pagination a.next_page, .pagination a.previous_page { display: inline-block; }


#post_list .rowItem { height: auto; }
.replies-count { display:none; }

.contentBox .hub-block-title, .contentBox .js-hub-name, .contentBox .hub-block-title.small-block { width: 104%; top: 0; left: -5px; border-radius: 0; padding: 15px; }
.contentBox .hub-block-title.small-block { height: 80px; }
.contentBox .hub-block-title, .contentBox .js-hub-name { left: -5px; }
.header-avatar { top: 9px;}
.header-avatar .avatarLarge { height: 40px; width: 40px; }

div.alsoPostToHeader { line-height: 22px; font-size: 13px; }

.searchResult { width: 135px; height: 250px; }
.searchResult .search-header { margin-left: -32px;height: 106px; margin-top:-20px; background-size: 169px 226px !important; }
.product-family-hive  .post-result.searchResult .search-header { background-position: 0 -112px; }
div.view-options { padding: 15px 0 15px 0; }
.book-list.display-as-list .book { height: 66px; }
.book-list .book-meta { text-align: left; }
.book-list.display-as-list .book .book-title a { font-weight: 700;  }
.book-post-list { margin-bottom: 25px; }
.book-meta-box { margin: 30px auto 0; float:none; }
.book-list.display-as-list .book .book-meta { width: 222px; }
#photo-grid a { margin: 0; border-radius: 0; }
.profileTabs a { width: 97%; margin-bottom: 4px; }

.payment-warning { margin: 10px auto; width:95%; }
.prefPane .avatarLarge { width: 40px; height: 40px; }
a.remove-card { line-height: 26px; }
.input-full-width { width: 100%; }
.select-row .right {  text-align: left; margin-left: 0px; float:none; }
.wide-pref-select { width: 100%; min-width: 310px; }

.profile-row .hubFormLabel, .hubFormLabel { width: 100%; text-align: left; }
.hubFormInput { width: 100%; }
.profile-row { width: 100%; height: auto; }
.edit_user { margin-bottom: 25px; }

.centerLineLight { display:none; }
.alsoPostTo.centerLineLight { display:block; }

td.news-order, th.news-order { display:none; }
#member_list, .hub-settings { width: 100%; max-width: 600px; }
table.membership-preferences { width: 100%; max-width: 600px; }
table.membership-preferences th,table.membership-preferences td { width: 100px; }

.new_post, .new_photo { margin-bottom: 25px; }
#profilePane .invite-powers { margin-left: 0; }
#downloadVideo { display: none; }
.invite-powers input[type=radio] { margin-left: 5px; }

.calendar-link { display:block; padding-left: 5%; }
.calendar-holder .contentBoxHeader { border: none; text-align: center; }

.ui-widget-content { background: transparent; }
.ui-state-default, .ui-widget-content .ui-state-default {
	width: auto;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 17px;
  margin-bottom: 5px;
}
.tagit-close .text-icon
{
	font-size: 23px;
  margin-left: 4px;
  color: #44a;
  line-height: 20px;
}

.signup-form-wrapper p { font-size: 12px; margin-bottom: 0; }
.translucent-form label { color: #999; }
.inquiry-message { width: 100%; height: 150px; margin: 0; }

.search-q { width:100%; }

.payment-history .stripe-payment div.payment-code { display: none; }
.main_title { font-size: 25px; }

#announcement_bar { padding-left: 10px; }
#announcement_bar a { display:block; text-align: left; font-size: 13px; }
#announcement_bar .dismiss { right: 5px; }
#announcement_bar a.learn-more { right: 44px; text-align: center; width: 100px;}

.announcement-modal a.dismiss-button { width: 200px; }


.reveal-modal { padding: 20px 10px 10px; top: 8px;  }
.reveal-modal.small 		{ width: 96%; margin-left: -48%; }
.reveal-modal.medium 		{ width: 96%; margin-left: -48%; }
.reveal-modal.xmedium 	{ width: 96%; margin-left: -48%; }
.reveal-modal.large 		{ width: 96%; margin-left: -48%; }
.reveal-modal.mlarge 		{ width: 96%; margin-left: -48%; }
.reveal-modal.xlarge 		{ width: 96%; margin-left: -48%; }


.translucent-form input#password { width: 70%; }

.translucent-form a.show-password { color: #fff; width: 28%; height: 48px; }


/*.post_photo.multi-main-viewer { height: 505px; }
 div.postText p img, div.post_photo a img { max-height: 500px; } */

.multi-main-viewer {  }

.swipe-show {
  overflow: hidden;
 	visibility: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  /* This creates an aspect ratio of 3:4 on this div, 100% would be 1:1 and 150% would be 2:3 */
	padding-bottom: 133%;
}
.swipe-wrapper {
  overflow: hidden;
  position: absolute;
  top:0;bottom:0;left:0;right:0;
}
.swipe-wrapper > div {
  float:left;
  position: relative;
  height:100%;
}

} /* End of mobile media query */