@media only screen and (max-width: 480px) {
	
	
	#timeline-date {
		display:none;
	}

	#icon-chess {
		display:none;
	}
	
	/***
	/** default styling mobile max screen width: 415px.
	*/
	
	* {
		outline:none;
	}
	
	body {
		background-color: #fff;
		background-image: url('/resources/images/background-transparent-mobile.png');
		background-repeat: no-repeat;
		background-position:top;
	}

	body, * {
		font-family: font-family: sans-serif, Helvetica, Arial;
		color: #444;
		font-size: 15px;
	}

	#header-logo {
		margin-top: -11px;
		padding-left: 5px;
		height: 38px;
		outline: none;
		-webkit-filter:invert(1); 
		filter:invert(1);
	}

	h1 {
		color: #000;
		font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-size: 16px;
		margin: 0px;
		margin-top: 10px;
		/* margin-left: 20px; */;
	}

	fieldset {
		background-color: #efefef;
		padding: 15px;
	}

	textarea, input {
		display: block;
		font-weight: 400;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		border: 1px solid #999;
		border-radius: 3px;
		padding: 10px;
		font-size: 15px;
		font-family: "Segoe UI", Roboto, Arial, sans-serif;
		margin-top: 5px;
		margin-bottom: 4px;
		width: 95%;
		box-shadow: 1px 1px 1px 1px #eee;
	}

	input:hover {
		background-color: #efefef;
		-webkit-transition: background-color 1000ms linear;
		-ms-transition: background-color 1000ms linear;
		transition: background-color 1000ms linear;
	}

	input[type="button"], input[type="submit"] {
		display: block;
		padding: 10px;
		font-weight: 400;
		line-height: 1.5;
		color: #000;
		border: 1px solid #999;
		border-radius: 3px;
		float: left;
		margin-top: 15px;
		margin-bottom: 15px;
	
		width: 101%;
		border-radius: 10px;
		box-shadow: 1px 1px 1px 1px #eee;
	}

	input[type="number"] {
		padding: 11px;
		margin: 0px;
		margin-right: 5px;
		margin-top: 15px;
		color: #495057;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 3px;
		float: left;
		box-shadow: 1px 1px 1px 1px #eee;
	}

	input[type="file"] {
	}

	a:link {
		text-decoration: none;
		color: 000;
		-webkit-tap-highlight-color: transparent !important;
		outline: none !important;
	}

	.ts-shop-ul-li-item-qty input[type="number"] {
		padding: 11px;
		margin: 0px;
		margin-right: 5px;
		margin-top: 0px;
		color: #495057;
		width: 35px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 3px;
		float: left;
	}

	input[name="submit"] {
		margin: 1em;
		margin-right: 0px;
		float: right;
	}

	input[type=radio] {
		box-sizing: border-box;
		padding: 0;
	}

	input[type="radio" i] {
		background-color: initial;
		cursor: default;
		-webkit-appearance: radio;
		box-sizing: border-box;
		margin: 3px 3px 0px 5px;
		padding: initial;
		border: initial;
	}

	input[type=checkbox],
	input[type=radio] {
		box-sizing: border-box;
		padding: 0;
	}

	input[type="checkbox" i] {
		background-color: initial;
		cursor: default;
		-webkit-appearance: checkbox;
		box-sizing: border-box;
		margin: 3px 3px 3px 4px;
		padding: initial;
		border: initial;
	}

	option:disabled {
		background-color: #dedede;
		font-family: monospace;
		font-size: 11px;
	}

	select option:disabled {
		background-color: #dedede;
		font-family: monospace;
		font-size: 11px;
	}

	button {
		overflow: visible;
	}

	textarea {
		
		width: 100%;
		border: 1px solid #fff;
		border-bottom: 1px solid #ddd;
		border-top: 1px solid #ddd;
		padding: 10px;
		overflow: auto;
		resize: none;
		font-size: 15px;
		font-family: "Segoe UI", Roboto, Arial, sans-serif;
	}

	label {
		font-weight: bold;
	}

	table td {
		color: #000;
		padding: 0px;
		margin: 0px;
		vertical-align: bottom;
		font-size: 1em;
	}

	th {
		text-align: left;
		font-weight: bold;
	}

	ul {
		list-style: none;
		list-style-type: none;
	}

	li {
		color: #000;
		font-family: sans-serif;
		text-decoration: none;
	}

	li a:link {
		font-family: sans-serif;
		text-decoration: none;
		font-size: 14px;
		color: #fff!important;
	}

	li a:visited {
		font-family: sans-serif;
		text-decoration: none;
		font-size: 14px;
		color: #fff!important;
	}

	#status-id {
		text-decoration: none;
	}

	#nav-center {
		min-width: 318px;
		max-width: 372px;
		float: left;
		margin-right: 20px;
		margin-left: 12px;
		margin-top: 5px;
	}

	ul#nav {
		padding: 0;
		margin: 0;
		min-width: 38px;
		display: block;
		height: 10px;
	}

	li#nav {

		display: none;
	}

	li#nav-right {
		float: right!important;
		right: 0;
		display: inline;
		background-color: #fff;
		padding: 10px;
		margin-top: 4px;
		position: absolute;
		display: block;
		color: #000;
		text-align: center;
	}

	li#nav-right a:link {
		color: #000!important;
	}

	li#nav-right a:visited {
		color: #000!important;
	}

	#messenger-bubble {
		background-color: palegoldenrod;
		padding: 20px;
		position: fixed;
		right: 30px;
		bottom: 30px;
		width: 30px;
		height:30px;
		border-radius: 50%;
		z-index:5;
		background-image: url(/resources/images/icon-bubble.png);
		background-size: 40px;
		background-repeat: no-repeat;
		background-position-x: 16px;
		background-position-y: 16px;
	}
	

	#nav-right-menu {
		float: right;
		display: inline;
		background-color: #fff;
		color: #000 !important;
		padding: 10px;
		margin-top: 20px;
		display: block;
		border: 1px solid #000;
		background-color: #fff;
		text-align: center;
	}

	li#nav a:link {
		color: #fff;
		font-family: sans-serif;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 14px;
	}

	li#nav a:visited {
		color: #fff;
		font-family: sans-serif;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 14px;
	}

	#nav-right a:link {
		color: #000;
		font-family: sans-serif;
		text-decoration: none;
		font-size: 14px;
		text-align: center;
	}

	#nav-right-menu a:link {
		color: #000;
		font-family: sans-serif;
		text-decoration: none;
		font-size: 14px;
		text-align: center;
	}

	#nav-search form {
		margin: 0px;
		padding: 0px;
	}

	#nav-search {
		margin: 0px;
		background-color: white;
		display: block;
		color: #000;
		padding: 10px;
		border: 1px solid #333;
		border-radius: 3px;
		width: 130px;
	}

	#wrapper {
		margin-left: 0px!important;

	}

	#nav-left {
		display: none;
	}

	#nav-left li, #nav-left-menu li {
		color: #000;
		font-family: sans-serif;
		text-decoration: none;
		font-size: 24px;
		margin-top: 22px;
	}

	#nav-left li a:link {
		font-size: 18px;
		color: #000;
	}

	#nav-left li a:visited {
		font-size: 18px;
		color: #000;
	}

	#nav-left li a:hover {
		font-size: 18px;
		color: blue;
		font-weight: normal;
	}

	#nav-left {
		display: none !important;
	}

	#nav-left {
		display: none !important;
	}

	#nav-center {
		float: left;
		height: 900px;
		margin-right: 0px;
		margin-left: 10px;
	}

	#nav-right {
		
	}

	#nav-right-menu {
	float: right;
    /* display: inline; */
    background-color: #eee!important;
    color: #000!important;
	padding: 5px!important;
    margin-top: -4px!important;
	width:30px!important;
    display: block;
    border: 1px solid #ddd;
    text-align: center;
    position: absolute;
	border-radius:0px 0px 10px 10px;
    z-index: 3;
    right: 0;
    float: right;
	}

	#timeline-username {
		height: 28px;
		margin-top: 14px;
		padding-left: 10px;
		padding-bottom: 0px;
		margin-bottom: 0px;
		font-size: 18px;
		font-weight: bold;
	}

	#times-count {
	color: #ddd;
    font-size: 11px;
    float: right;
    padding: 15px;
	}

	#timeline-header {
		height: 168px;
		background-color: #000;
		margin-top: 10px;
		border-radius: 16px;
		object-fit: cover!important;
	}

	#timeline-header img {
		border-radius: 16px 73px 73px 74px;
		object-fit: cover!important;
	}

	#timeline-profile {
		height: 125px;
		font-size: 13px;
		margin-bottom: 10px;
	}

	#timeline-profile div {
		margin: 10px;
	}

	#timeline-profile-picture {
		border-radius: 73px;
		margin-top: -94px;
		width: 139px;
		height: 139px;
		border: 2px solid #fff;
		background-color: #333;
		background-size: cover;
		margin-left: -36px;
	}

	#timeline-profile-picture-container {
		width: 139px;
		height: 139px;
		margin-left: 33px;
		border-radius: 16px 16px 50px 50px;
	}

	#timeline-login {
		margin-top: 10px;
		margin-left: 0px;
	}

	#timeline-signup {
		margin-top: 10px;
		margin-left: 0px;
	}

	#navigation-right {
		display: none;
	}

	#post-timeline {
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		min-width: 100px;
		float: right;
		margin: 10px;
		margin-top: 30px;
		background-color: #fff;
		text-align: center;
	}

	#post-timeline a:link, a:visited, a:hover {
		text-decoration: none;
	}

	#timeline {
	}

	.timeline-post {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #fff;
		margin: 0;
		padding: 10px;
		padding-left: 5px;
		font-size: 14px;
		border-radius: 10px;
		padding-bottom: 0px;
		clear: both;
	}

	.timeline-post:hover {
		/*-webkit-transition: background-color 1000ms linear;
		-ms-transition: background-color 1000ms linear;
		transition: background-color 1000ms linear; */
		cursor: pointer;
		/* background-color:#efefef; */;
	}

	.timeline-post {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #fff;
		margin: 0;
		padding: 10px;
		padding-left: 5px;
		min-height: 100px;
		width: 500px;
		font-size: 14px;
		clear: both;
		border-radius:10px;
	}

	.timeline-post {
		border: 1px solid #ddd;
		box-shadow: 1px 1px 1px 1px #eee;
		background-color: #fff;
		margin-bottom: 5px;
		border-radius:10px;
	}

	.timeline-post-text {
	}

	.timeline-options {
		padding: 5px;
		margin-left: 78px;
		padding-bottom: -4px;
		margin-top: 9px;
	}
	.timeline-options-box li {
		margin-bottom: 19px;
		margin-top: 19px;
	}
	.timeline-icon {
		width: 20px;
		margin-right: 27px;
		opacity: .2;
		filter: Alpha(opacity=20);
	}

	.tl-opt-num {
		color: #999;
		font-size: 11px;
		margin-top: 5px;
		margin-right: 5px;
		vertical-align: top;
	}

	.timeline-photo {
		border-radius: 50px;
		border-radius: 43px;
		width: 64px;
		margin-left: 3px;
		margin-right: 5px;
		float: left;
	}

	#friends {
		clear: both;
		margin-top: 33px;
		float: left;
	}

	#spellcheck {
		font-size: 11px;
		float: left;
		margin-top: 5px;
	}

	#spellcheck-input {
		float: left;
	}

	#float {
		display: none;
		z-index: 2;
		margin: auto;
		position: absolute;
		margin-top: 55px;
		left: 0;
		float: center;
		padding: 25px;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		border-radius: 15px;
		display: none;
		width: 330px!important;
		border: 1px solid #ddd;
		box-shadow: 0px 0px 24px 3px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 0px 24px 3px rgba(0, 0, 0, 0.5);
	}

	#float input[type="submit"] {
		float: right;
		display: inline;
		padding: 10px;
		margin-top: 10px;
		display: block;
		border: 1px solid #ddd;
		background-color: #fff!important;
		text-align: center;
		margin-right: 0px;
		color: #000!important;
		width: 64px!important;
		
	}

	#float textarea {
		height: 122px;
		padding: 10px;
		margin-left: -2px;
		margin-top: 10px;
		margin-bottom: 11px;
		width: 95%!important;
		border: 1px solid #ddd;
		overflow: auto;
		resize: none;
		font-size: 15px;
	}

	#captcha {
		margin: 0px !important;
		margin-left: -9px !important;
		padding: 0px!important;
		height: 61px;
		overflow: hidden;
	}

	#signup-success {
		margin-left: 5px !important;
		margin-right: 5px !important;
		margin-top: 10px !important;
		margin-bottom: 20px;
		background-color: darkgreen;
		padding: 10px;
		color: lightgreen;
		border-radius: 73px;
	}

	#signup-error {
		margin-left: 5px !important;
		margin-right: 5px !important;
		margin-top: 10px !important;
		margin-bottom: 20px;
		background-color: darkred;
		padding: 10px;
		color: red;
		border-radius: 73px;
	}

	#timeline-post-self {
		margin: 5px;
		display: block;
		margin-bottom: 33px;
		height: 107px;
		clear: both;
	}

	#timelinepost-textarea {
		margin-bottom: 6px;
		margin-left: -2px;
		height: 105px;
		border: 1px solid #999!important;
		padding: 10px;
		overflow: auto;
		resize: none;
		font-size: 16px!important;
		font-family: "Segoe UI", Roboto, Arial, sans-serif;
		opacity: 0.9;
		border-radius: 0px!important;
	}
	
	

	#timelinepost-textarea:hover {
		-webkit-transition: background-color 1000ms linear;
		-ms-transition: background-color 1000ms linear;
		transition: background-color 1000ms linear;
		background-color: #efefef!important;
	}

	.timelinepost-textarea {
		/* margin-left: -2px; */
		width: 100%;
		border: 1px solid #ddd;

		/* border-bottom: 1px solid #ddd; */
		/* border-top: 1px solid #ddd; */
		padding: 10px;
		overflow: auto;
		resize: none;
		font-size: 14px;
		font-family: "Segoe UI", Roboto, Arial, sans-serif;
	}

	#timeline-post-self input[type="submit"] {
		float: right;
		display: inline;
		background-color: #fff;
		padding: 5px;
		margin-top: 2px;
		margin-right: -2px!important;
		display: block;
		border: 1px solid #999 !important;
		text-align: center;
		color: #000!important;
		border-radius: 100px!important;
		width: 60px!important;
	}

	#charcount {
		margin: 5px;
		margin-top: 6px !important;
		padding: 5px;
		float: left;
		font-size: 11px;
		color: #ddd!important;
	}

	.charcount-mentions #charcount {
		margin: 5px;
		margin-top: 5px !important;
		padding: 5px;
		width: 100px;
		float: left;
		margin-left: 80px;
		font-size: 11px;
	}

	#progress-charcount {
		margin: 5px;
		margin-top: -7px !important;
		/* padding: 5px; */
		height: 5px;
		margin: -12px;
		margin-left: 4px;
		margin-bottom: 7px;
		width: 0%;
		max-width: 100%;
		/* float: left; */
		font-size: 11px;
		background-color: green;
	}

	.profile-link {
		color: #000;
		text-decoration: none;
		font-weight: bold;
		margin-left: 10px;
	}

	.profile-link a:link, a:hover, a:visited {
		color: #000;
		text-decoration: none;
	}

	.profile-link: hover {
		color: #000;
		text-decoration: none;
		font-weight: bold;
	}

	.form-sub {
		margin-top: 10px;
	}

	.float-left {
		float: left;
	}

	#post-timeline-link {
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		float: right;
		margin-top: 15px;
		background-color: #fff;
		text-align: center;
		margin-right: -17px;
		border-radius: 10px;
	}

	#post-timeline-link a:link, a:visited, a:hover {
		color: #000;
		text-decoration: none;
	}

	.post-date {
		float: right;
		font-size: 12px!important;
	}

	/* left navigation friend lists */

	.friend-list {
		width: 100%;
		display: block;
		float: left;
		clear: both;
		margin-bottom: 10px;
		border: 1px solid #ddd;
		box-shadow: 1px 1px 1px 1px #eee;
		background-color: #fff;
		margin-bottom: 5px;
		border-radius:10px;
	}

	.friend-item {
		float: left;
		padding: 10px;
		width: 55px;
		overflow: hidden;
	}

	.friend-item-name {
		font-size: 13px;
	}

	.friend-photo {
		border-radius: 43px;
		width: 42px;
		margin-left: 3px;
		margin-right: 5px;
		float: left;
		padding: 5px;
	}

	.timeline-post-bar {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #fff;
		margin: 0;
		padding: 10px;
		height: 100px;
		width: 100%;
		font-size: 14px;
		display: none;
	}

	* {
		outline: none !important;
	}

	.twig {
		padding: 5px;
		margin-top: 0px;
		margin-right: 5px;
		margin-left: 68px;
		font-size: 1.1em;
		overflow-wrap: break-word;
		letter-spacing: 0.2px;
		min-height: 27px;
		font-size:12px;
	}

	/* see: https://stackoverflow.com/questions/20954944/stop-lastpass-filling-out-a-form */

	rect, .rect, #rect, #shadow-root {
		display: none !important;
	}

	[data-lastpass-icon-root], [data-lastpass-root] {
		display: none !important;
	}


	#who-to-follow {
		float: left;
	}

	.messages-alert {
		height: 23px;
		width: 23px;
		background-color: #fff;
		border-radius: 50%;
		display: inline-block;
		color: #000;
		font-size: 9px;
		font-weight: bold;
		border: 3px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		float: right;
		margin-top: 1px;
		margin-left: -12px;
		font-weight: bold;
	}

	.post-message {
		margin: -1px;
		border: 1px solid #fff;
		border-bottom: 1px solid #ddd;
		border-top: 1px solid #ddd;
		padding: 10px;
		overflow: auto;
		resize: none;
	}

	.options-opt {
		float: right!important;
		margin-right: -5px!important;
		width: 20px;
		opacity: .2;
		filter: Alpha(opacity=20);
	}

	.timeline-options-box {
		display: none;
		z-index: 4;
		margin: auto;
		position: absolute;
		margin-top: -18px;
		/* left: 65%; */
		right: 0;
		margin-right: 11px;
		/* float: right; */
		padding: 25px;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		border-radius: 15px;
		display: none;
		border: 1px solid #ddd;
		box-shadow: 0px 0px 24px 3px rgb(0 0 0 / 50%);
		-webkit-box-shadow: 0px 0px 13px -4px rgb(0 0 0 / 50%);
	}

	.timeline-options-box-menu {
			display: none;
			right: 0;
			z-index: 4;
			position: absolute;
			width: 72px;
			/* margin-top: -2px; */
			/* left: 97%; */
			/* float: right; */
			padding: 25px;
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			color: #495057;
			background-color: #fff;
			border-bottom-left-radius: 15px;
			border-bottom-right-radius: 15px;

			border-bottom: 1px solid #ddd;
	}

	.menu-link {
		color: #ffffff!important;
	}

	.timeline-options-box-close {
		width: 20px;
		margin-right: -9px;
		margin-top: -9px;
		float:right;
	}

	.settings {
		margin-top: 10px!important;
		font-size: 14px;
		margin-left: 10px;
	}

	.settings-form {
		width: 100%;
		display: block;
	}

	.settings-form-item-account {
		display: block;
		/* width: 100%; */
		border-radius: 3px;
		padding: 10px;
		margin: 0px!important;
		margin-top: 10px!important;
		margin-bottom: 10px!important;
		min-height: auto;
		height: 520px;
		clear: both;
		width: 100%;
	}

	.settings-form-item-pictures {
		display: block;
		/* width: 100%; */
		border-radius: 3px;
		padding: 10px;
		margin: 0px!important;
		margin-top: 10px!important;
		margin-bottom: 10px!important;
		min-height: auto;
		height: 229px;
		clear: both;
		width: 100%;
	}

	.settings-form-item-colors {
		display: block;
		/* width: 100%; */
		border-radius: 3px;
		padding: 10px;
		margin: 0px!important;
		margin-top: 10px!important;
		margin-bottom: 10px!important;
		min-height: auto;
		height: 125px;
		clear: both;
		width: 100%;
	}

	.settings-form input {
		margin-right: 10px;
		margin-bottom: 20px!important;
		width: 100%;
		border-radius: 10px;
	}
	.settings-form input[type="color"] {
		width: 38px;
	}
	
	.settings-form strong {
		margin-left: 17px;
	}
	
	.settings-form-item-left {
		float: left;
		width: 90%;
	}

	.settings-form-submit {
		padding-bottom: 33px!important;
	}

	#settings-success {
		margin-top: 10px !important;
		margin-bottom: 20px;
		background-color: #000;
		padding: 10px;
		color: lightgreen;
		border-radius: 73px;
	}

	#settings-error {
		margin-top: 10px !important;
		margin-bottom: 20px;
		background-color: #000;
		padding: 10px;
		color: red;
		border-radius: 73px;
	}

	.settings-form {
		width: 100%;
		display: block;
		margin-left:-17px;
	}

	.settings-form input[type="text"]{
		width: 335px;
	}

	.settings-form input[type="file"]{
		width: 335px;
	}

	.settings-form input[type="submit"]{
		width: 360px;
		margin-left: 10px;
	}

	.content {
		margin-top: 10px;
		margin-left: 10px!important;
		margin-right: 10px!important;
	}

	.content-text {
		margin-top: 10px;
		margin-bottom: 10px;
		word-spacing: normal;
		overflow-wrap: break-word;
		max-width: 350px;
	}

	#footer {
		display: none;
	}

	.emoji-opt {
		float: left;
		padding: 5px;
	}

	#emoji {
	}

	#selector {
		position: absolute;
		z-index: 5;
		float: left;
		background-color: #fff;
		border-radius: 1px;
		overflow-y: scroll;
		height: 200px;
		padding: 10px;
		border: 1px solid #444;
		width: 340px;
		box-shadow: 3px 3px 3px #ddd;
		font-size: 18px;
	}

	#twig-count {
		display: none;
	}

	input[type="text"], input[type="password"], textarea, #timelinepost-textarea, .timelinepost-textarea {
		background-color: #ffffff40!important;
		color: #444444!important;
		border-radius: 10px;
	}

	#emoji-button {
		margin-right: 5px;
		margin-top: 9px;
		opacity: 0.15;
		width: 27px;
		cursor: pointer;
	}

	#emoji-button2 {
		margin-top: 18px;
		width: 27px;
		cursor: pointer;
		opacity: 0.15;
	}

	#mixedmedia-image {
	margin-left: 11px;
		margin-right: 7px;
		margin-top: 9px;
		opacity: 0.15;
		width: 27px;
		cursor: pointer;
	}

	audio {
		height: 33px;
		margin-left: -2px;
		margin-top: 10px;
	}

	#image-container {
		height: 96px;
		float: left;
		clear: both;
		display: block;
		width: 62px;
	}

	#image {
		border-radius: 50px;
		background-color: #333;
		height: 60px;
		width: 60px;
		margin-bottom: 10px;
		background-size: cover;
		margin-left: 3px;
		margin-right: 5px;
		float: left;
	}

	.image-follow {
		border-radius: 43px;
		width: 34px;
		height: 34px;
		margin-left: 3px;
		margin-right: 5px;
		float: left;
		padding: 5px;
		background-size: cover;
	}

	#messenger-frame {
		width:85%;
		float:left;
		position: absolute;
		left:0;
	}
	
	#messenger-iframe {
		width: 394px;
	}
	
	iframe {
		width: 85%;
		height: 500px;
		margin-left: 0px;
	}

	.profile-reply {
		display: none;
		clear: both;
		width: 100%;
		height: 166px;
		margin-top:0px;
	}

	.profile-reply-button {
		width: 100%;
		height: 44px;
		
		margin-top: 3px !important;
		border: 1px solid #000;
	}

	.charcount-reply {
		margin-left: 75px!important;
	}

	#progress-bar-upload {
		position: absolute;
		top: 205px;
		left: 10px;
		background-color: #000;
		padding: 33px;
		border: 1px solid #000;
		height: 50px;
		width: 300px;
		z-index: 10;
		color: #fff;
		display: none;
	}

	#progress-bars {
		margin-top: 10px;
		width: 0%;
		height: 7px;
		background-color: lightgreen;
		border-radius: 5px;
	}

	marquee {
		color: #ddd!important;
		padding: 0px;
		font-size: 12px!important;
		text-transform: lowercase!important;
		float: right;
		position: absolute;
		z-index: 5;
		/* right: 0; */
		margin-left: 180px;
		top: 90px;
	}

	.ticker {
		color: #ddd!important;
		font-size: 12px!important;
		text-transform: lowercase!important;
	}

	.ticker a:link, .ticker a:visited {
		color: #ddd!important;
		font-size: 12px!important;
		text-transform: lowercase!important;
	}

	#bandcamp-player {
		max-width: 526px;
		margin-top: 10px;
		border-radius: 5px;
		max-width: 500px;
		border: 1px solid #333;
		margin-left: 1px;
		width: 250px;
		height: 250px;
	}

	#bandcamp-error {
		color: red;
		max-width: 526px;
		margin-top: 10px;
		border-radius: 5px;
		background-color: #000;
		padding: 10px;
		text-align: center;
	}

	.about-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.contact-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.privacy-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.terms-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.signup-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.login-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.logout-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	.settings-page {
		background: url('/resources/images/background-rotate.png');
		background-repeat: no-repeat;
		background-position-x: 117%;
		background-position-y: 10%;
		background-size: 215px;
	}

	#login-loader-signup {
		float: left;
	}

	* {
		font-size: 15px!important;
	}

	.timeline-post {
		width: 100%!important;
	}

	.mobile-block {
		display: none!important;
	}

	.mobile-nav li {
		padding-bottom: 15px;
	}

	#bio-link {
		clear: both;
		margin-top: -16px;
		float: right;
	}

	#bio-link-text {
		font-size: 12px!important;
		width: 184px;
		clear: none;
		margin-left: -6px;
		margin-top: 83px;
	}

	#bio-link-type {
		display: none!important;
	}

	#bio-link-location {
		display: none!important;
	}

	#follow-stats {
		float: left;
		clear: both;
		margin-left: 128px;
		margin-top: -2px;
	}
	
	#follow-stats span {
		font-size: 11px!important;
	}

	input[type="range" i]::-webkit-media-slider-container {
		border: 1px solid #ddd;
		border-radius: 0px;
		background-color: #ddd;
	}
	#signup-form input {
		 
	}

	#signup-error {
		margin-bottom: 10px;
		background-color: darkred;
		padding: 10px;
		padding-left: 46px;
		color: red;
		border-radius: 4px;
		background-image: url(/resources/images/icons/icon-error.png);
		background-position: left;
		background-repeat: no-repeat;
		background-size: 8%;
		background-position-x: 2%;
	}

 /* Background drawing is managed by C++ code to draw ranges. */;
	}

	audio::-webkit-media-controls-panel {
		background-color: #ddd;
	}

	audio::-webkit-media-controls-enclosure {
		background-color: #333;
		border-radius: 10px;
	}
	
	#photo-editor-main {
		background-color: #111;
		border-radius: 10px;
		/* position: absolute; */
		top: 0px;
		width: 80%;
		/* left: 1%; */
		margin: auto;
		padding: 30px;
		display: flex;
		z-index: 6;
	}

	#nav-right a:link {
		color: #000!important;
		font-family: sans-serif;
		text-decoration: none;
		font-size: 14px;
		text-align: center;
	}

	#nav-right-menu a:visited {
		color: #000!important;
		font-family: sans-serif;
		text-decoration: none;
		font-size: 14px;
		text-align: center;
	}
}



	
@media only screen and (max-width: 912px) {
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	
	#timeline-header, #nav-center, #timeline-profile  {
		width: calc(100vw - 20px) !important;	
	}
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	
	
	#bio-link-text {
		margin-top: 27px;
		float: right;
		clear: both;
		float: left;
		margin-left: 180px;
		width: 187px;
	}
}

@media only screen and (max-width: 820px) {
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	#timeline-header, #nav-center  {
		width: calc(100vw - 20px) !important;	
	}
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	#bio-link-text {
		margin-top: 27px;
		float: right;
		clear: both;
		float: left;
		margin-left: 180px;
		width: 187px;
	}
}

@media only screen and (max-width: 768px) {
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	#timeline-header, #nav-center  {
		width: calc(100vw - 20px) !important;	
	}
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	#bio-link-text {
		margin-top: 27px;
		float: right;
		clear: both;
		float: left;
		margin-left: 180px;
		width: 187px;
	}
}

@media only screen and (max-width: 540px) {
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	#timeline-header, #nav-center  {
		width: calc(100vw - 20px) !important;	
	}
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	input[type="text"], input[type="password"], textarea  {
		width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	#bio-link-text {
		margin-top: 39px;
		float: right;
		clear: both;
		float: left;
		margin-left: 126px;
		width: 187px;
	}
	
	ul#nav { 
		width: calc(100vw - 46px) !important;
	}
	
}

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

	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	#timeline-header, #nav-center  {
		width: calc(100vw - 3px) !important;	
	}
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	input[type="text"], input[type="password"], textarea  {
		width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	ul#nav { 
		width: calc(100vw - 46px) !important;
	}
	#nav-center {
		float: left;
		margin-right: 0px;
		margin-left: 10px;
	}
}

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

	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	#timeline-header, #nav-center  {
		width: calc(100vw - 17px) !important;	
	}
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	input[type="text"], input[type="password"], textarea  {
		width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	ul#nav { 
		width: calc(100vw - 46px) !important;
	}
}

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


	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}

	#timeline-header, #nav-center  {
		width: calc(100vw - 17px) !important;	
	}
	
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	
	#style-bar {
		display: none;
		background-color: #ddd!important;
		width: 101%;
		height: 24px;
		margin-left: -2px;
		margin-top: 0px;
		padding: 5px;
		margin-bottom: 0px;
	}
	
	#style-bar input[type="button"] {
		
		margin: 2px;
		border: 0px;
		box-shadow: none;
		height: 20px;
		width: 80px;
		padding: 0px;
		font-size: 13px!important;
		padding: 0px;
		background-color: ghostwhite!important;
		cursor: pointer;
		float: left;
		border-radius: 0px;
		color: #999!important;
	}
	
	
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	ul#nav { 
		width: calc(100vw - 46px) !important;
	}
	
	.options-opt-timeline {
	float: right!important;
	width: 20px;
	opacity: .2;
	filter: 0.2;
	}

}

@media only screen and (max-width: 394px) {
	
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	
	#timeline-header, #nav-center  {
		width: calc(100vw - 20px) !important;	
	}
	
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	
	#style-bar {
		display: none;
		background-color: #ddd!important;
		width: 100%;
		height: 24px;
		margin-left: -2px;
		margin-top: 0px;
		padding: 5px;
		margin-bottom: 0px;
	}
	
	#style-bar input[type="button"] {
		
		margin: 2px;
		border: 0px;
		box-shadow: none;
		height: 20px;
		width: 80px;
		padding: 0px;
		font-size: 13px!important;
		padding: 0px;
		background-color: ghostwhite!important;
		cursor: pointer;
		float: left;
		border-radius: 0px;
		color: #999!important;
	}
	
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
	
	ul#nav { 
		width: calc(100vw - 46px) !important;
	}
	
}

@media only screen and (max-width: 390px) {
	
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	
	#timeline-header, #nav-center {
		width: calc(100vw - 20px) !important;	
	}
	
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
}

@media only screen and (max-width: 375px) {
	
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}	
	
	#timeline-header, #nav-center  {
		width: calc(100vw - 20px) !important;	
	}
	
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
}

@media only screen and (max-width: 360px) {
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}	
	
	#timeline-header, #nav-center  {
		width: calc(100vw - 20px) !important;	
	}
	
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
}

@media only screen and (max-width: 280px) {
	.timeline-post {
		width: calc(100vw - 36px) !important;
	}
	
	#timelinepost-textarea {
		width: calc(100vw - 46px) !important;
	}
	
	#timeline-header, #nav-center {
		width: calc(100vw - 20px) !important;	
	}
	
	#timeline-profile  {
		width: calc(100vw - 40px) !important;	
	}
	
	input[type="text"], input[type="password"], textarea  {
			width: calc(100vw - 46px) !important;	
	}
	input[type="submit"] {
			width: calc(100vw - 29px) !important;	
	}
}


.twig-image {
    max-width: 100%!important;
    margin-left: 0px;
}


#timeline-post-self input[type="submit"] {
		float: right;
		display: inline;
		background-color: #fff;
		padding: 5px;
		margin-top: 2px;
		margin-right: 0px!important;
		display: block;
		border: 1px solid #999 !important;
		text-align: center;
		color: #000!important;
		border-radius: 100px!important;
		width: 70px!important;
}

#charcount {
		display:none;
}

.mobile-index {
float: left;
    clear: both;
    width: calc(100vw -10px);
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 18px;
    padding: 15px;
}