/*
Theme Name: Jot
Description: Jot is a full featured responsive theme designed for mobile devices, but looks cool on full screens too :) 
Author: Kevin Archibald
Author URI: http://kevinsspace.ca/
Theme URI: http://kevinsspace.ca/demo4/
Version: 1.0.2
Text Domain: jot
License: GNU General Public License V3
License URI:http://www.gnu.org/licenses/quick-guide-gplv3.html
Tags: blue, white, one-column, responsive-layout, custom-menu, featured-images, post-formats, sticky-post,theme-options, threaded-comments, translation-ready

	Jot is a full featured WordPress Theme
    Copyright (C) 2015 Kevin Archibald
    Jot is distributed under the terms of the GNU GPL
    
	This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/quick-guide-gplv3.html>.
    
    NOTE: DO NOT EDIT THIS FILE, IF YOU DO IT WILL BE OVERWRITTEN BY THE NEXT UPDATE. CREATE CHILD THEME INSTEAD.
	See:http://codex.wordpress.org/Child_Themes 
*/

/**
 * 	
 *  Table of Content
 * 
 *	A. General ------------------------------ ~ 0059
 *	B. Header ------------------------------- ~ 0319
 *	C. Action Header ------------------------ ~ 0372
 *	D. Navigation --------------------------- ~ 0516
 *	E. Sidebars ----------------------------- ~ 0632
 *	F. More Navigation ---------------------- ~ 0781
 *	G. Content ------------------------------ ~ 1093
 *	H. General/Standard Post Styles---------- ~ 1109
 *	I. Post Formats ------------------------- ~ 1480
 *	J. Page Styles -------------------------- ~ 2015
 *  K. Portfolio Styles --------------------- ~ 2050
 *	L. Archive Headers ---------------------- ~ 2227
 *	M. 404 Page ----------------------------- ~ 2290
 *  N. Comment Styles ----------------------- ~ 2320
 * 	O. Misc Styles -------------------------- ~ 2547
 *  P. Colorbox Styles ---------------------- ~ 2778
 *  Q. Flex Slider Styles ------------------- ~ 2845
 *  R. Other plugin styles ------------------ ~ 3094
 *  S. Mobile Styles ------------------------ ~ 3112
 */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> A. General */

/* =============================================== Global Styles */

body {
	width: 100%;
	color: #efefef;
	font-weight: normal;
	line-height: 1.3125em;
	word-wrap: break-word;
	margin: 0;
	padding: 0 0 25px 0;
	float: left;
}
 
.clearfix {clear: both;}

.clearleft {clear: left;}

.clearright {clear: right;}

/* ---------------- Headers --------------------------- */

h1,h2,h3,h4,h5,h6 {
	line-height: 1.5em;
	padding: 0;
	margin: 0;
	font-weight: 700;
}
h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover,
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover
{font-weight: 700;}

h1 {font-size: 2em;}

h2 {font-size: 1.75em;}

h3 {font-size: 1.5em;}

h4 {font-size: 1.25em;}

h5 {font-size: 1em;}

h6 {font-size: 0.8625em;}

/* ---------------- basic paragraph ------------- */

p {
	font-size: 1em; 
	line-height: 1.3125em;
	margin: 0;
	padding: 1em 0 0 0;
}

p:first-child {
	padding: 0;
	margin: 0;
}

/* ---------------- Misc HTML tags ---------------- */ 

address {
	font-size: 1em;
	font-style: italic;
}

blockquote, blockquote p {
	font-style: italic;
	margin-left: 1em;
	font-weight: 600;
	line-height: 1.5em;
	vertical-align: bottom;
}

blockquote p:before {
	font-family: FontAwesome;
	content:'\f10d';
	font-size: 0.75em;
	line-height: 1.5em;
	padding: 0 0.5em 0 0;
	vertical-align: top;
}

pre {
	border: solid 5px gray;
    font-size: 1em;
    color: blue;
    margin: 1em 0 0 0; 
    padding: 1em;
    background: #F7F4F4;
    overflow-x: auto;
}

label {font-size: 1em;}

code {
	font-size: 1em;
	background: rgba(0,0,0,0.1);
}

q{font-style: italic;}

q:before, q:after { content:'"'; }

/* ---------------------------------- list defaults --------------- */
/* ------------- unordered ------------------- */

ul
{
	padding: 0; /* This will vary because of nesting */
	margin: 0 0 0 1.5em;
	line-height: 1.3125em;
}

ul li { 
	list-style: disc;
	font-size: 1em;
	list-style-position: outside;
	margin: 0;
}

ul li li {
	list-style: circle;
	font-size: 1em;
	list-style-position: outside;
}

ul li li li {
	list-style: square;
	font-size: 1em;
	list-style-position: outside;
}

/* --- special lists --- */
ul.recent-posts li {
	list-style: none;
}

/* ------------ ordered --------------------------- */

ol{
	padding: 0;
	margin: 0 0 0 1.5em;
	line-height: 1.5em;
}

ol li {
	list-style: decimal;
	font-size: 1em;	
	list-style-position: outside;
}

ol li li {
	list-style: lower-alpha;
	font-size: 1em;
	list-style-position: outside;
}

ol li li li {
	list-style: lower-roman;
	font-size: 1em;
	list-style-position: outside;
}

/* -------------- ordered/unordered combo lists ------ */
ol ul li {
	list-style: disc;
	list-style-position: outside;
}

ol ul ul li {
	list-style: circle;
	list-style-position: outside;
}

ul ol li {
	list-style: decimal;
	list-style-position: outside;
}

ul ol ul li {
	list-style: circle;
	list-style-position: outside;
}

ul ul ol li {
	list-style: decimal;
	list-style-position: outside;
}

/* --------------definition list ------------------- */

dt {
	margin: 0;
	padding: 5px 0 5px 0;
	font-size: 1em;
	font-weight: bold;
}

dl {
	margin: 0;
	padding: 0;
	font-size: 1.0em;
}

dd {
	font-size: 1em;
	margin-left: 1em;	
}

/* ----- links default ------------------------------- */

a {}

a:link, a:active, a:visited, a:hover {
	text-decoration: none; 
}

a:hover {font-weight: normal;}

/* ------------------table styles --------------------- */

table { 
	border-collapse: collapse; 
	border-spacing: 0;
	font-size: 1em;
}

thead {
	font-weight: bold;
	text-align: center;
}

th {
	border: 1px solid #7F7F7F;
	padding: 0.625em;
	background-color: #E3E3E3;
	background-color: rgba(165,149,149,0.2);
}

tfoot {
	background-color: #E3E3E3;
	background-color: rgba(165,149,149,0.3);
	font-weight: bold;
}

tbody {
	text-align: left;
}

tr {
	padding: 0.625em;
}

td {
	border: 1px solid #7F7F7F;
	padding: 0.625em;
	text-align: left;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> B. Header */
#main-header {
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 25px 0 0 0;
	padding: 0 25px 0 25px;
}

#main-header-800 {
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	text-align: center;
	line-height: 1.25em;
	overflow: hidden;
}

#jot-logo {
	padding: 0;
	margin: 0 auto 0 auto;
	overflow: hidden;
	line-height: 0;
}

#jot-logo img {
	padding: 0;
	display: block;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

.jot-title.notagline {
	font-size: 2em;
	padding: 0;
}

.jot-title.tagline,.jot-tagline.notitle {
	font-size: 2em;
	width: calc(100% - 40px);
	padding: 0 20px 0 20px;
	float: left;
	line-height: 1.25em;
}

.jot-tagline.title {
	font-size: 1.25em;
	width: calc(100% - 40px);
	padding: 0 20px 30px 20px;
	float: left;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> C. Action Header */
#action-header {
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 25px 0 0 0;
	padding: 0 25px 0 25px;
}

#action-header-800 {
	clear: both;
	overflow: hidden;
	max-width: 800px;
	padding: 20px 20px 10px 20px;
	margin: 0 auto 0 auto;
}

#action-left {
	width: 110px;
	float: left;
	margin: 0;
	padding: 0;
}

#jot-mobile-button {
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}

.jot-contact {
	display: inline-block;
	float: left;
	padding: 11px 13px 14px 13px;
	margin: 0 0 0 5px;
}

.jot-contact i {font-size: 16px;}

.jot-contact:hover{}

/* Action Header Search Form */
.jot-show-search-trigger{
	display: inline-block!important;
	float: right!important;
	clear: none!important;
	width: auto!important;
	border: none!important;
	margin: 0 0 10px 0;
}

.jot-show-search-trigger i{
	font-size: 16px;
	padding: 15px;
}

.action-search {
	clear: both;
	float: right;
	margin: 0;
	display: none;
	overflow: hidden;
}

.action-search #searchform {
	max-width: none;
}

.action-search button {
	float: right;
	display: inline-block;
	background-color: transparent;
	border: none;
}
.action-search button i {
	font-size: 18px;
	padding: 5px;
	line-height: 1em;
}

.action-search input {
	clear: both;
	float: right;
	display: inline-block;
	width: 100px;
	height: 26px;
	background-color: transparent;
}

.action-search input:focus {outline: none;}

/* ------------------------------ Action header social links */

.action-social {
	float: left;
	width: calc(100% - 160px);
	margin: 0 0 10px 0;
}

.action-social .widget .jot-social-widget {
	display: inline-block;
	width: auto;
	float: right;
	padding: 0;
	margin: 0;
}

.action-social .widget .jot-social-widget a {
	display: block;
	float: right;
	margin: 0px 0px 0px 5px;
	color: #ffffff!important;
}

.action-social .jot-social-widget a:hover {
	opacity: 0.5;
}

.action-social .jot-social-widget i.small {
	font-size: 16px;
}

.action-social .jot-social-widget i.large {
	font-size: 16px;
}

.action-social .jot-social-widget i { padding: 15px 12px 15px 12px; }
.action-social .jot-social-widget a .fa-delicious { background-color: #2A96FF; }
.action-social .jot-social-widget a .fa-digg { background-color: #000000; }
.action-social .jot-social-widget a .fa-facebook-f { background-color: #3B5998; }
.action-social .jot-social-widget a .fa-flickr { background-color: #FF66B6; }
.action-social .jot-social-widget a .fa-google-plus { background-color: #D32F2F; }
.action-social .jot-social-widget a .fa-instagram { background-color: #E3DCC9; }
.action-social .jot-social-widget a .fa-linkedin { background-color: #007AB6; }
.action-social .jot-social-widget a .fa-users { background-color: #00349A; }/* MySpace */
.action-social .jot-social-widget a .fa-pinterest-p { background-color: #BD2125; }
.action-social .jot-social-widget a .fa-tumblr { background-color: #34465D; }
.action-social .jot-social-widget a .fa-twitter { background-color: #6CADDE; }
.action-social .jot-social-widget a .fa-rss { background-color: #FB9F3B; }
.action-social .jot-social-widget a .fa-vimeo-square { background-color: #1AB7EA; }
.action-social .jot-social-widget a .fa-yelp { background-color: #333333; }
.action-social .jot-social-widget a .fa-youtube-play { background-color: #E12B28; }

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> D. Navigation */
#nav-header {
	clear: both;
    width: calc(100% - 50px);
    float: left;
    margin: 0;
    padding: 0 25px 0 25px;
}

#nav-header-800 {
	display: block;
	clear: both;
    overflow: hidden;
    max-width: 840px;
    padding: 0;
    margin: 0 auto 0 auto;
}

/* =============================================================== Slick nav styles */
/* -------------------- Button Styles ---------------------- */
#main-nav-container-id {display: none;}

.slicknav_btn { 
	display: block; 
	float: left;; 
	cursor: pointer;
}

#jot-mobile-button .slicknav_menutxt:before{
	/* ka added to use fontawesome icons */
	font-family: FontAwesome;
	font-size: 16px;
	padding: 13px 15px 12px 15px;
	display: inline-block;
	content: "\f03a";
	margin: 0;
}

.slicknav_menu {
    padding: 0;
    margin: 0;
    font-size: 1.25em;
}

.slicknav_menu ul {
	width: 100%;
	float: left;
	margin: 0;
	padding: 10px 0 10px 0;
	background-color: #4c4c4c;
}

.slicknav_menu ul li {
	background-color: #4c4c4c;
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}

.slicknav_menu ul li a {
	color: #f7f7f7;
}

.slicknav_menu ul li:hover {
	background-color: #aaaaaa;
}

.slicknav_menu ul li a:hover {
	color: #ffffff;
}

.slicknav_menu ul ul {
	padding: 0;
}

.slicknav_menu ul ul li {
	background-color: #5BBFD8;
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

.slicknav_menu ul ul li a {
	color: #f7f7f7;
}

.slicknav_menu ul ul li:hover {
	background-color: #92E1F4;
}

.slicknav_menu ul ul li a:hover {
	color: #ffffff;	
}

.slicknav_menu ul ul ul li {
	background-color: #D68F90;
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

.slicknav_menu ul ul ul li a {
	color: #f7f7f7;
}

.slicknav_menu ul ul ul li:hover {
	background-color: #CEA7A7;
}

.slicknav_menu ul ul ul li a:hover {
	color: #ffffff;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> E. Sidebars */

/* ------------ outside wrap ----------- */
#sidebar-top,.sidebar-before-content,
.sidebar-after-content,#footer-wrap,#copyright-wrap
{
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 20px 0 0 0;
	padding: 0 25px 0 25px;
}

/* ------------ inside wrap ----------- */
#sidebar-top-800,
.sidebar-before-content-800,.sidebar-after-content-800
{
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	text-align: left;
	overflow: hidden;
}

/* ------------ widgets ----------- */
.widget li {
	list-style: none;
	padding: 5px 0 0 0;
	margin: 0;
}

#sidebar-top-800 .widget,.sidebar-before-content-800 .widget,
.sidebar-after-content-800 .widget
{
	width: calc(50% - 55px);
	display: inline-block;
	padding: 5px 22px 5px 22px;
	margin: 0;
	vertical-align: top;
	text-align: left;
}

#copyright-wrap-800 .widget {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* --------- slider sidebar ----------- */
.jot-slider
{
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 25px 25px 0 25px;
	padding: 0;
}

.jot-slider-800
{
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}

.jot-slider-800 .widget {
	width: 100%;
	display: inline-block;
	padding: 0;
	margin: 0;
	background-color: transparent;
}

.widget select{width: 100%;}

/* ------------------------------------- footer */
#jot-footer{
	width: 100%;
	float: left;
	padding: 0;
	margin: 0;
}

#footer-wrap-800
{
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	text-align: left;
	overflow: hidden;
}

#footer-wrap-800 .widget
{
	width: calc(50% - 55px);
	display: inline-block;
	padding: 25px;
	margin: 0;
	vertical-align: top;
	text-align: left;
}

#footer-wrap-800 ul {
	padding: 0;
	margin: 0;
}

#footer-wrap-800 li {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ------ copyright sidebar ----------- */
#copyright-wrap {
	margin: 25px 0 25px 0;
}

#copyright-wrap-800
{
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	text-align: center;
	overflow: hidden;
}

#copyright-wrap-800 .widget {
	padding: 0;
}

#copyright-wrap-800 ul {
	padding: 0;
	margin: 0;
}

#copyright-wrap-800 li {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> F. More Navigation */

.jot-more-navigation {
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 0;
	padding: 0 25px 0 25px;
}

.jot-more-navigation-800 {
	clear: both;
	max-width: 840px;
	overflow: hidden;
	padding: 0;
	margin: 0 auto 0 auto;
	font-size: 1em;
	text-align: right;
}

/* ===================================================== Breadcrumbs */

.jot-breadcrumbs-wrap {
	display: inline-block;
	/*float: right;*/
	padding: 2px 5px 2px 5px;
	margin: 0;
}

.jot-breadcrumbs-wrap.right {float: right;}
.jot-breadcrumbs-wrap.left {float: left;}

/* ======================================================= Login Meta */
.jot-meta-wrap{
	display: inline-block;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 0 0;
}

.jot-meta-wrap.right{float: right;}
.jot-meta-wrap.left{float: left;}

.jot-meta-wrap a:focus{opacity:0.25;}

.jot-meta-nav{ display: none; }

.jot-meta-nav{
	font-size: 12px;
	clear: both;
	width: calc(270px - 10px);
	padding: 5px;
	margin: 0;
	text-align: left;
}

.jot-meta-nav.right{ float: right; }
.jot-meta-nav.left{ float: left; }

.jot-meta-nav h2 { font-size: 1.1em; }
.jot-meta-nav ul { margin: 0; }
.jot-meta-nav ul li { 
	font-size: 1em;
	padding: 5px 0 5px 0;
}

/* ===================================================== Categories */
.jot-categories-wrap{
	display: inline-block;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 0 0;
}
.jot-categories-wrap.right{ float: right; }
.jot-categories-wrap.left{ float: left; }

.jot-categories-wrap a:focus{ opacity:0.25; }

.jot-cat-nav{ display: none; }

.jot-cat-nav{
	font-size: 1em;
	clear: both;
	width: calc(270px - 10px);
	padding: 5px;
	margin: 0;
	text-align: center;
}

.jot-cat-nav.right{ float: right; }
.jot-cat-nav.left{ float: left; }

.jot-cat-nav ul{ margin: 0; }

.jot-cat-nav .categories{
	list-style: none;
	margin: 0;
	padding: 5px;
}

.jot-cat-nav .categories ul{
	padding: 0;
	margin: 0;
}

.jot-cat-nav .cat-item{
	display: inline-block;
	float: left;
	padding: 2px 5px 2px 5px;
	margin: 2px;
}

.jot-cat-nav .cat-item a{
	font-size: 0.9em;
}

/* ===================================================== Tags */
.jot-tags-wrap{
	display: inline-block;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 0 0;
}

.jot-tags-wrap.right{ float: right; }
.jot-tags-wrap.left{ float: left; }
	
.jot-tag-wrap a:focus{ opacity: 0.25; }

.jot-tag-nav{ display: none; }

.jot-tag-nav{
	clear: both;
	width: calc(270px - 10px);
	padding: 5px;
	margin: 0;
	text-align: left;
}

.jot-tag-nav.right{ float: right; }
.jot-tag-nav.left{ float: left; }

.jot-tag-nav span
{
	clear: both;
	display: block;
	margin: 0;
	padding: 5px;
}

.jot-tag-nav a
{
	display: inline-block;
	float: left;
	padding: 2px 5px 2px 5px;
	margin: 2px;
}

/* ===================================================== Calendar */
.jot-calendar-wrap{
	display: inline-block;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 0 0;
}

.jot-calendar-wrap.right{float: right;}
.jot-calendar-wrap.left{float: left;}

.jot-calendar-wrap a:focus{opacity:0.25;}

.jot-calendar-nav{ display: none; }

.jot-calendar-nav{
	clear: both;
	width: calc(270px - 10px);
	margin: 0;
	padding: 5px;
	text-align: center;
}

.jot-calendar-nav.right{float: right;}
.jot-calendar-nav.left{float: left;}

.jot-calendar-nav table {
	border-collapse: collapse ;
}

.jot-calendar-nav tr {padding:0;margin:0;}

.jot-calendar-nav #wp-calendar{
	float: left;
	font-size: 0.875em;
}

.jot-calendar-nav #wp-calendar caption {
	font-size: 1em;
	font-weight: bold;
	padding-bottom: 0.5em;
}
	
.jot-calendar-nav #wp-calendar thead th {
	border: none;
	margin: 0;
	width: 5%;
	padding: 0;
	text-align: center;
}

.jot-calendar-nav #wp-calendar tbody {
	border: none;
	font-size: 0.875em;
}
	
.jot-calendar-nav #wp-calendar tbody td {
	border: none;
	text-align: center;
	width: 5%;
	padding: 0;
}

.jot-calendar-nav #wp-calendar tbody td a {
	font-weight: normal;
	padding: 0 2px 0 2px;
}

.jot-calendar-nav #wp-calendar tfoot {background: none;}

.jot-calendar-nav #wp-calendar tfoot tr {border: none;}

.jot-calendar-nav #wp-calendar tfoot td {border: none;}

.jot-calendar-nav #wp-calendar tr #prev a,.jot-calendar-nav table#wp-calendar tr #next a {
	font-size: 11px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* ===================================================== Recent Posts */
.jot-recent-posts-wrap{
	display: inline-block;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 0 0;
}

.jot-recent-posts-wrap.right{float: right;}
.jot-recent-posts-wrap.left{float: left;}

.jot-recent-posts-wrap a:focus{opacity:0.25;}

.jot-recent-posts-nav{ display: none; }

.jot-recent-posts-nav{
	clear: both;
	width: calc(270px - 10px);
	padding: 5px;
	margin: 0;
	text-align: left;
	font-size: 1.0em;
}

.jot-recent-posts-nav.right{float: right;}
.jot-recent-posts-nav.left{float: left;}

.jot-recent-posts-nav span
{
	clear: both;
	display: block;
	margin: 0;
	padding: 5px 0 0 0;
	font-size: 1.1em;
}

.jot-recent-posts-nav ul {margin: 0;}

.jot-recent-posts-nav li { 
	list-style: none;
	padding: 5px 0 5px 0;
}

/* ===================================================== Recent Comments */
.jot-recent-comments-wrap{
	display: inline-block;
	padding: 2px 10px 2px 10px;
	margin: 0 5px 0 0;
}

.jot-recent-comments-wrap.right{ float: right; }
.jot-recent-comments-wrap.left{ float: left; }

.jot-recent-comments-wrap a:focus{ opacity:0.25; }

.jot-recent-comments-nav{ display: none; }

.jot-recent-comments-nav{
	clear: both;
	width: calc(270px - 10px);
	padding: 10px;
	margin: 0;
	text-align: left;
}

.jot-recent-comments-nav.right{float: right;}
.jot-recent-comments-nav.left{float: left;}

.jot-recent-comments-nav h2 {
	clear: both;
	display: block;
	font-size: 1.1em;
	margin: 0;
	padding: 5px 0 0 0;
}

.jot-recent-comments-nav ul {margin: 0;}
.jot-recent-comments-nav li {padding: 5px 0 5px 0;}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> G. Content */
.jot-content{
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 25px 0 0 0;
	padding: 0 25px 0 25px;
}
.jot-content-800{
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> H. General/Standard Post Styles */
/* ------------------------------------ basic layouts   */
article.post,article.attachment {
	width: 100%;
	padding: 0;
	float: left;
}

article.post.jot-one-col,article.attachment.jot-one-col {margin: 0 0 25px 0;}

article.post.jot-two-wrap-all {margin: 0 0 25px 0;}

article.post.jot-three-wrap-all{margin: 0 0 20px 0;}

/* ---------------------------------- 2 column grid */
.jot-two-col-1 {
	width: calc(50% - 15px);
	float: left;
	margin: 0 15px 0 0;
	padding: 0;
	font-size: 1em;
}

.jot-two-col-2 {
	width: calc(50% - 15px);
	float: left;
	margin: 0 0 0 15px;
	padding: 0;
	font-size: 1em;
}

.jot-two-wrap-all
{
	width: calc(100% - 40px);
	float: left;
	padding: 20px;
}

.jot-two-col-1 h2,
.jot-two-col-2 h2 
{
	font-size: 1.2em;
}

.jot-two-wrap-all .post-wrap-grid
{
	font-size: 0.925em;
}

.jot-two-wrap-all .post-footer
{
	font-size: 0.825em;
}

/* --------------------------------- Grid System 3 column ---------------------- */
.jot-three-col-1 {
	width: calc(33.333% - 20px);
	float: left;
	margin: 10px 20px 15px 0;
	padding: 0;
}

.jot-three-col-2 {
	width: calc(33.333% - 20px);
	float: left;
	margin: 10px 10px 15px 10px;
	padding: 0;
}

.jot-three-col-3 {
	width: calc(33.333% - 20px);
	float: left;
	margin: 10px 0 15px 20px;
	padding: 0;
}

.jot-3-col-post-hide {
	display: none;
}

.jot-three-wrap-all
{
	width: 100%;
	float: left;
	margin: 10px 0 10px 0;
	padding: 0;
}

.jot-three-wrap-all .post-wrap-grid
{
	width: calc( 100% - 20px );
	float: left;
	padding: 10px;
	margin: 0;
	font-size: 0.8625em;
}

.jot-three-wrap-all .post-header
{
	width: calc(100% - 20px);
	float: left;
	padding: 10px;
	margin: 0;
}

.jot-three-wrap-all .post-header .post-header-wrap
{
	padding: 0 0 10px 0;
	margin: 0;
}

.jot-three-wrap-all .post-header h2
{
	font-size: 1.1em;
}

/* ----------------- post format content : standard ---------------------------- */

/* ------------------------------------ post header */
.post-header {
	width: calc(100% - 50px);
	float: left;
	padding: 25px 25px 0 25px;
	margin: 0;
}

.post-header-wrap {
	width: 100%;
	float: left;
	padding: 0 0 25px 0;
	margin: 0;
}

.jot-title-line{
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	line-height: 0;
	border-bottom: 1px solid #000000;
	opacity: 0.1;
}

.post-title{
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1em;
	float: left;
}

/* ------------------------------------ post content */
.post-content {
	width: calc(100% - 50px);
	float: left;
	padding: 25px;
	margin: 0;
}

.post-content p {
	padding: 0.5em 0 1em 0;
	margin: 0;
}

.post-content p:first-child {
	padding: 0 0 1em 0;
	margin: 0;
}

.post-content a:hover,.image-entry a:hover {
	opacity: 0.5;
}

img.wp-smiley {
	padding: 0px;
	margin: 0px;
	border: none;
	float: none;
}

/* ------ in content meta ------------- */
.jot-in-content-meta {
	width: 100%;
	float: left;
	font-size: 12px;;
	padding: 0;
	margin: 0;
}

/* -------------------------------------------------------------------- post footer */
.post-footer {
	width: calc(100% - 20px);
	float: left;
	padding: 10px;
	margin: 0;
	font-size: 0.875em;
}

.post-footer-row1 {
	width: 100%;
	text-align: center;
}
.post-footer-row2 {
	width: 100%;
	text-align: center;
}


/* -------------------------------- post meta */
.jot-timestamp,.jot-author,.jot-post-comments,.jot-categories,.jot-taglist,.jot-post-format {
	display: inline-block;
	padding: 0 5px 0 5px;
	line-height: 1.3125em;
}

.jot-timestamp i:hover,
.jot-author i:hover,
.jot-categories i:hover,
.jot-taglist i:hover,
.jot-post-format i:hover
{
	cursor: help;
}

.jot-pagelist,.jot-edit,.jot-no-title {
	float: left;
	padding-right : 10px;
}

/* ------------------- post meta icons ---------------- */
.fa-comment,.fa-time,
.fa-user,.fa-bookmark,
.fa-copy,.fa-tags,
.fa-edit,.fa-align-justify
{
	font-size: 1em;
}

.sticky h2.post-title:after
{
	font-size: 0.5em;
	line-height: 1.0em;
	font-family: FontAwesome;
	content: "\f08d";
	padding: 0 10px 0 0;
	margin: 0;
	vertical-align: top;
}

.sticky .status-entry:before
{
	float: right;
	font-size: 0.875em;
	font-family: FontAwesome;
	content: "\f08d";
	padding: 0 10px 0 10px;
	margin: -10px -10px 0 0;
}

/* ----------------- excerpt read-more ------ */
.read-more-button {
	display: inline-block;
	clear: both;
	float: right;
	font-size: 24px;
	padding: 0 0.5em 0 0.5em;
	margin: 10px 0 0 0;
	background-color: transparent;
	opacity: 0.25;
}

.read-more-button:hover { color: #c9c9c9; }

/* --------- post image styling ------------------------- */

img {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/* image border override */
img.border {
	max-width: 98%!important;
	height: auto!important;
	border: 8px solid #ffffff!important;
	border-radius: 5px!important;
	box-shadow: 0px 0px 5px 0 rgba(72,72,72,0.25)!important;
	padding: 0!important;
	margin-top: 0.625em!important;
	margin-bottom: 0.625em!important;
}

/* ------- post feature images ------ */

.image-post-feature {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 0;
}

.wp-post-image {
	margin: 0 auto 0 auto;
}

/* --------- captioned images --------- */
.wp-caption {
	display: block;
	max-width: 100%;
	margin: 0.5em 0 0.5em 0;
}

/* captioned image border override */
.wp-caption.border {
	max-width: 98%!important;
	height: auto!important;
	border: 8px solid #ffffff!important;
	border-radius: 5px!important;
	box-shadow: 0px 0px 5px 0 rgba(72,72,72,0.25)!important;
	padding: 0!important;
	margin-top: 0.625em!important;
	margin-bottom: 0.625em!important;
}

.wp-caption img {
	max-width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}

.post-content .wp-caption p {
	margin: 0;
	padding: 0;
}

.wp-caption-text {
	text-align: center;
	margin: 0;
	padding: 0.25em;
	font-size: 1em;
	font-style: italic;
}

/* ---- WordPress alignment classes ---- */
.alignleft,.wp-caption.alignleft {
	float: left;
	margin: 0.5em 1em 0 0;
	padding: 0;
}

.alignright,.wp-caption.alignright {
	float: right;
	margin: 0.5em 0 0 1em;
	padding: 0;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignnone {
	margin-right: 1em;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> I. POST FORMATS */
/* ======================================= post format content : aside */
article.format-aside .post-content .jot-author {
	width: 100%;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

article.format-aside .post-content .jot-author a {
	display: inline-block;
}

article.format-aside .post-content .jot-author a:before {
	content: '. . . ';
	font-weight: bold;
}

.aside-footer {
	width: 100%;
	float: left;
	padding: 0;
	margin: 0;
}

.aside-post-icon {
	display: inline-block;
	float: right;
}

.sticky.format-aside .aside-sticky:before
{
	float: right;
	font-size: 0.875em;
	font-family: FontAwesome;
	content: "\f08d";
	padding: 0;
	margin: 0 0 0 10px;
}

/* ======================================= post format content : audio */
article.format-audio
{
	width: 100%;
	float: left;
	padding: 0;
}

article.format-audio .audio-post-feature {
	background-image: url("/wp-content/themes/jot/images/audio_1_800x200.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
	padding: 10px;
	
}

article.format-audio.jot-one-col .audio-feature-meta,
article.format-audio.jot-two-wrap-all .audio-feature-meta {

	text-align: center;
	color: #ffffff;
}

article.format-audio.jot-three-wrap-all .audio-feature-meta {
	display: inline-block;
	margin: 10px auto 0 auto;
	color: #ffffff;
	font-size: .75em;
}

.jot-audio-feature-audio {
	width: calc(100% - 40px);
	padding: 0;
	margin: 120px 20px 0 20px;
}

article.format-audio .post-content {
	padding: 0 25px 25px 25px;
	margin: -10px 0 0 0;
}

article.format-audio.jot-three-wrap-all .post-content {
	padding: 10px;
	margin: 0;
}

article.format-audio .post-content cite {
	width: calc(100% - 1em);
	float: left;
	text-align: center;
	margin: 1em 0 0 0;
	padding: 0.5em;
}

article.format-audio .post-content p {
	padding: 0px;
	margin: 10px 0px 10px 0px;
}
/* ======================================= post format content : chat */
article.format-chat
{
	width: 100%;
	float: left;
	padding: 0;
}

article.format-chat .post-header {
	text-align: center;
}

article.format-chat .post-content {
	width: calc(100% - 90px);
	margin: 15px 25px 15px 25px;
	padding: 20px;
}

/* Wrapper for entire chat transcript. */
.chat-transcript { padding: 0;float:left;}

/* Individual section of the chat. */
.chat-row:first-child {padding: 0px;float:left;}
.chat-row {clear:left;padding: 10px 0 0 0;float:left;}

/* Individual speaker in the chat. */

.chat-speaker-1 {}

.chat-speaker-1 .chat-author {color: #008000;}
.chat-speaker-2 .chat-author {color: #1E90FF;}
.chat-speaker-3 .chat-author {color: #880000;}
.chat-speaker-4 .chat-author {color: #9932CC;}
.chat-speaker-5 .chat-author {color: #A0522D;}
.chat-speaker-6 .chat-author {color: #FF4500;}
.chat-speaker-7 .chat-author {color: #808000;}
.chat-speaker-8 .chat-author {color: #000088;}
.chat-speaker-9 .chat-author {color: #FF00FF;}
.chat-speaker-10 .chat-author {color: red;}

/* Chat author. */
.chat-author { float:left;}
.chat-author cite { }

/* Chat text. */
.chat-text {display:inline; padding-left:5px;}

/* ======================================= post format content : gallery */
/* ----------- WP Gallery styles ----------- */

.gallery {
	width: 100%;
	margin: 0;
	padding: 0;
}

.gallery-post-feature {background-color: transparent;}

.gallery figure {
	display: inline-block;
	padding: 0;
}

.gallery-columns-1 figure { margin: 3px; width: calc( 100% - 6px); }
.gallery-columns-2 figure { margin: 3px; width: calc( 50% - 6px); }
.gallery-columns-3 figure { margin: 3px;width: calc( 33.3333% - 6px); }
.gallery-columns-4 figure { margin: 2px;width: calc( 25% - 4px); }
.gallery-columns-5 figure { margin: 2px;width: calc( 20% - 4px); }
.gallery-columns-6 figure { margin: 2px;width: calc( 16.6666% - 4px); }
.gallery-columns-7 figure { margin: 1px;width: calc( 14.2857% - 2px); }
.gallery-columns-8 figure { margin: 1px;width: calc( 12.5% - 2px); }
.gallery-columns-9 figure { margin: 1px;width: calc( 11.1111% - 2px); }
.gallery-columns-10 figure { margin: 1px;width: calc( 10% - 2px); }

.gallery-icon a {
	display: inline-block;
	margin: 0;
	padding: 0;
	line-height: 0;
}


.gallery img {
	border: 1px solid #eaeaea!important;
	background-color: #ffffff!important;
	padding: 2px!important;
	margin: 0;
	width: calc(100% - 6px);
	height: auto;
}

.gallery .gallery-caption { display: none; }

/* ======================================= post format content : image */
article.format-image
{
	width: 100%;
	float: left;
}

.post-format-image-wrap {
	width: calc(100% - 50px);
	float: left;
	padding: 25px;
	margin: 0 0 20px 0;
}

.post-format-image {
	width: 100%;
	float: left;
	border: none;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.post-format-meta {
	width: calc(100% - 4em);
	float: left;
	padding: 1em 2em 1em 2em;
	text-align: center;
	font-size: 0.625em;
	line-height: 1.1em;
	margin: 0;
}

.image-post-content {
	width: 100%;
	float: left;
	padding: 0;
	margin: 10px 0 0 0;
}

.display-image-caption h2 {
	width: 100%;
	float: left;
	font-size: 1.3em;
	padding: 0.5em 0 0 0;
}

.display-image-content {
	width: 100%;
	float: left;
	font-size: 0.875em;
	padding: 10px 0 0 0;
	line-height: 1.2em;
}

.post-wrap-grid .image-entry{
	width: 100%;
	float: left;
	clear: both;
	padding:0;
	margin: 0;
}

.post-wrap-grid .display-image-caption h2 {
	width: calc(100% - 20px);
	font-size: 1em;
	padding: 8px 0 0 0;
}

.post-wrap-grid .display-image-content {
	width: calc(100% - 20px);
	font-size: 0.875em;
	padding: 8px 0 10px 0;
}

/* ======================================= post format content : quote */
article.format-quote.post{
	width: 100%;
	float: left;
	padding: 0;
}

article.format-quote.jot-one-col .quote-post-feature {
	float: left;
	width: calc(100% - 70px);
	padding: 35px;
	margin: 0;
	font-size: 2em;
}

article.format-quote.jot-two-wrap-all .quote-post-feature {
	float: left;
	width: calc(100% - 70px);
	padding: 35px;
	margin: 0;
	font-size: 1em;
}

article.format-quote.jot-three-wrap-all .quote-post-feature {
	float: left;
	width: calc(100% - 40px);
	padding: 20px;
	margin: 0;
	font-size: 1em;
}

article.format-quote.jot-one-col .quote-post-feature-icon {
	float: left;
	width: 80px;
}

article.format-quote.jot-two-wrap-all .quote-post-feature-icon {
	float: left;
	width: 30px;
	font-size: 1.5em;
}

article.format-quote.jot-three-wrap-all .quote-post-feature-icon {
	float: left;
	width: 30px;
	font-size: 1.5em;
}

article.format-quote.jot-one-col .quote-post-feature-quote {
	width: calc(100% - 90px);
	float: left;
	margin: 0;
	padding: 0;
	line-height: 1.325em;
}

article.format-quote.jot-two-wrap-all .quote-post-feature-quote {
	width: calc(100% - 40px);
	float: left;
	margin: 0;
	padding: 0;
	line-height: 1.325em;
}

article.format-quote.jot-three-wrap-all .quote-post-feature-quote {
	width: calc(100% - 40px);
	float: left;
	margin: 0;
	padding: 0;
	line-height: 1.325em;
}

article.format-quote .quote-post-feature .quote-post-feature-author {
	clear: both;
	width: 100%;
	float: left;
}

article.format-quote.post .quote-post-feature .quote-post-feature-author a {
	display: inline-block;
	float: right;
	font-weight: bold;
	margin: 20px 20px 0 0;
}

article.format-quote .post-content { 
	width: calc(100% - 50px);
	float: left;
	margin: 0;
	padding: 25px;
}

article.format-quote .post-content blockquote {
	clear: both;
	float: left;
	width: calc(100% - 35px);
	margin: 0.5em 0 0.5em 0;
	padding: 15px;
	font-weight: normal;
	font-size: 1.2em;
	font-style: italic;
}

article.format-quote .post-content blockquote p {
	clear: both;
	float: left;
	width: 100%;
	margin: 0; 
	padding: 0;
	font-weight: normal;
	font-size: 1em;
	font-style: italic;
}

article.format-quote .post-content blockquote cite,
article.format-quote .post-content blockquote p cite  {
	clear: both;
	float: right;
	margin-top: 0em;
	margin-right: 1em;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
}

article.format-quote .post-content blockquote p:before {
	display: none;
}

/* ======================================= post format content : status */
article.format-status.post{
	width: 100%;
	float: left;
}

article.format-status.jot-one-col .post-header {
	width: 200px;
	padding: 0 0 25px 0;
	margin: 0;
	float: left;
	font-size: .875em;
	text-align: center;
}

article.format-status.jot-two-wrap-all .post-header {
	width: 100px;
	padding: 0 0 25px 0;
	margin: 0;
	float: left;
	font-size: .75em;
	text-align: center;
}

article.format-status.jot-three-wrap-all .post-header {
	width: 90px;
	padding: 0 0 15px 0;
	margin: 0;
	float: left;
	font-size: .75em;
	text-align: center;
}

article.format-status .post-header .avatar {
	width: 50px;
	border-radius: 50%;
	margin: 0 auto 0 auto;
}

article.format-status .post-header .jot-author {
	display: block;
	width: 100%;
	padding: 0;
}

article.format-status .post-header .jot-author a {
	font-weight: bold;
}

article.format-status .post-header .jot-timestamp {
	clear: both;
	display: inline-block;
}

article.format-status.jot-one-col .status-post-content {
	width: calc(100% - 200px);
	float: left;
}

article.format-status.jot-two-wrap-all .status-post-content {
	width: calc(100% - 100px);
	float: left;
}

article.format-status.jot-three-wrap-all .status-post-content {
	width: calc(100% - 100px);
	float: left;
	margin: 0 0 0 10px;
	font-size: 0.875em;
}

.status-footer {
	width: 100%;
	float: left;
	padding: 0;
	margin: 10px 0 0 0;
}

.status-post-icon {
	display:inline-block;
	float: right;
}

.status-post-icon a i {
	display:inline-block;
	float: right;
}

.sticky.format-status .status-sticky:before
{
	float: right;
	font-size: 0.875em;
	font-family: FontAwesome;
	content: "\f08d";
	padding: 0;
	margin: 0 0 0 10px;
}

/* ======================================= post format content : video */

.post-wrap-video {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.post-wrap-video-content {
	overflow: hidden;
}

.video-entry {
	width: 100%;
	float: left;
	margin: 0.75em 0 0 0;
	padding: 0;

}

/* attempt to fix VideoPress styles - hopefully will work all the time but only tested on one video */
.video-player,.videopress-placeholder,.videopress-placeholder img.videopress-poster{
	width:100%!important;
	height:auto!important;
	position:inherit;
	float: left;
}

.videopress-placeholder .play-button span{
	font-size: 200%!important;
}

.videopress-placeholder div {
	margin: -13px 0 0 0!important;
	float: right!important;
	height: 13px!important;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> J. Page Styles */
article.page {
	width: 100%;
	padding: 0;
	float: left;
	background-color: #FFFFFF;
	color: #474747;
}

article.page a {color: #000000;}
article.page a:hover{color: #c9c9c9;}

.page-header {
	width: calc(100% - 50px);
	float: left;
	padding: 25px 25px 0 25px;
	margin: 0;
}

.page-header-wrap {
	width: 100%;
	float: left;
	padding: 0 0 25px 0;
	margin: 0;
}

.page-header-wrap .left {text-align: left;}
.page-header-wrap .right {text-align: right;}
.page-header-wrap .center {text-align: center;}

/* post title */
.page-title {
	line-height: 1em;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> I. Portfolio Page Styles */

/* General Styles */
.thin-border {
	clear: both;
	width: 100%;
	border-top:	1px solid #DDDDDD;
	height: 0px;
}

.portfolio-image-container {
	width: 100%;
	height: auto;
	float: left;
	margin: 0;
	padding: 0;
}

.portfolio-image-container a img:hover {opacity: 0.5;}

.display-post-title,.display-image-caption {
	width: 100%;
	float: left;
	margin: 10px 0 0 0;
	padding: 0;
}

.display-post-content,.display-image-description
{
	float: left;
	clear: both;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
	line-height: 1.2em;
}
	
/* ------------------ Full Width Portfolio ----------------- */

.portfolio-full-wrap {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.portfolio-full {
	width: 100%;
	float: left;
	margin: 0;
	padding: 20px 0 20px 0;
}

/* ------------------ One Column Portfolio ----------------- */

.portfolio-one-column-wrap {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.portfolio-one-column {
	width: 100%;
	float: left;
	margin: 10px 0 0 0;
	padding: 0 0 15px 0;
}

.portfolio-one-column .left-col{
	width: calc(50% - 15px);
	float: left;
	padding: 15px 15px 15px 0;
}

.portfolio-one-column .right-col{
	width: calc(50% - 15px);
	float: right;
	padding: 20px 0 15px 15px;
}


/*------------------ Two Column Portfolio -----------------*/
.portfolio-two-column-wrap {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.portfolio-two-column.left-col {
	width: calc(50% - 15px);
	float: left;
	margin: 20px 15px 20px 0;
}

.portfolio-two-column.right-col {
	width: calc( 50% - 15px);
	float: left;
	margin: 20px 0 20px 15px;
}

/*------------------ Three Column Portfolio -----------------*/
.portfolio-three-column-wrap {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.portfolio-three-column.left-col {
	width: calc(33.3% - 15px);
	float: left;
	margin: 20px 15px 20px 0;
}
.portfolio-three-column.center-col {
	width: calc(33.3% - 20px);
	float: left;
	margin: 20px 10px 20px 10px;
}
.portfolio-three-column.right-col {
	width: calc(33.3% - 15px);
	float: left;
	margin: 20px 0 20px 15px;
}

.portfolio-three-column-wrap .display-post-title h4,
.portfolio-three-column-wrap .display-image-caption h4 {
	font-size: 1.1em;
}

.portfolio-three-column-wrap .display-post-content,
.portfolio-three-column-wrap .display-image-description
{
	font-size: 0.8625em;
}

/*------------------ Four Column Portfolio -----------------*/

.portfolio-four-column-wrap {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.portfolio-four-column.col-1 {
	width: calc(25% - 15px);
	float: left;
	margin: 20px 15px 20px 0;
}

.portfolio-four-column.col-2,
.portfolio-four-column.col-3
{
	width: calc(25% - 20px);
	float: left;
	margin: 20px 10px 20px 10px;
}

.portfolio-four-column.col-4 {
	width: calc(25% - 15px);
	float: left;
	margin: 20px 0 20px 15px;
}

.portfolio-four-column-wrap .display-post-title h5,
.portfolio-four-column-wrap .display-image-caption h5 {
	font-size: 0.925em;
}

.portfolio-four-column-wrap .display-post-content,
.portfolio-four-column-wrap .display-image-description
{
	font-size: 0.75em;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> K. Archive Headers */
.jot-archive-header {
	clear: both;
	width: calc(100% - 50px);
	float: left;
	margin: 25px 0 0 0;
	padding: 0 25px 0 25px;
}

.jot-archive-header-800 {
	clear: both;
	max-width: 840px;
	padding: 0;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

.jot-archive-header-wrap
{
	width: calc(100% - 40px);
	padding: 20px;
	margin: 0;
	background-color: #198EFE;
	color: #efefef;
}

.jot-archive-header i
{
	color: #efefef;
	margin: 0 10px 0 0;
}

.jot-author-header {
	width: 100%;
	float: left;
	padding: 0;
	margin: 0;
	background-color: #198EFE;
	color: #efefef;
}

.jot-author-header h2 { 
	width: calc(100% - 40px);
	float: left;
	padding: 20px;
}

.jot-author-header .bio-wrap {
	width: calc(100% - 40px);
	float: left;
	padding: 0 20px 20px 20px;
}

.jot-author-header .bio-wrap .avatar {
	float: left;
	margin: 0 10px 0 0;
}

.jot-author-header .bio-wrap p {
	margin: 0;
	padding: 0;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> L. 404 Page */
.content-404 {
	width: calc(100% - 50px);
	float: left;
	padding: 25px;
	background-color: #ffffff;
	color: #474747;
}
.content-404 h1 i.fa-exclamation-triangle {color: red;}
.content-404  a {color: #000000;}
.content-404  a:hover{color: #c9c9c9;}

.content-404 #searchform {
	width: 100%;
	float: left;
	max-width: none;
	padding: 0;
	margin: 10px 0 10px 0;
}

.content-404 #searchform input {
	display: inline-block;
	float: left;
}

.content-404 #searchform button {
	display: inline-block;
	float: left;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> M. Comment Styles */
/* -------------------------------------- Page Comments ------ */
.page .comments-title {margin: 2em 0em 0em 0em;}

.page .commentlist {
	font-size: 1em;
	margin: 1em 0 0 0;
}

/* -------------------------------------- Post Comments ------ */
.jot-comments-wrap {
	clear: both;
	width: calc(100% - 50px);
	float: right;
	margin: 0 0 15px 0;
	padding: 25px;
}

.comments-title {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.comment-list {
	width: 100%;
	float: left;
	font-size: 1em;
	margin: 1em 0 0 0;
	padding: 0;
}

.pingback,.trackback {
	width: 100%;
	float: left;
	border-top: 1px solid #0083FF;
	padding: 1.5em 0 0.5em 0;
	margin: 1em 0 0 0;
}

.comment.depth-1 {
	width: calc(100% - 72px);
	float: left;
	padding: 1.5em 0 0.5em 72px;
	margin: 1em 0 0 0;
}

.comment.depth-2,.comment.depth-3,
.comment.depth-4,.comment.depth-5,.comment.depth-6,
.comment.depth-7,.comment.depth-8,.comment.depth-9,
.comment.depth-10
{
	width: calc(100% - 20px);
	float: left;
	margin: 1.5em 0 0 -52px;
	padding: 1.5em 0 0 72px;
}

.comment-author .avatar {
	float: left;
	border: 1px solid #e2e2e2;
	margin: 0 14px 0 -72px;
	padding: 2px;
	background-color: #ffffff;
}

.comment-author a {font-weight: bold;}

.comment-author span {	
	display: none;
}

.comment-meta {
	font-size: 0.75em;
	padding: 0;
	margin: 0;
}

.comment-reply-link {
	display : inline-block;
	float: right;
	font-size: 0.75em;
	padding: 0 0.5em 0 0.5em;
	margin: 1em 0 0 0;
}

.comment-reply-link a {
	padding: 0;
	margin: 0;
}

.bypostauthor>.comment-body>.comment-meta>.comment-author:before {
	content: 'Author: ';
	font-size: 0.75em;
	padding: 0.25em 0.5em 0.25em 0.5em;
	margin: 0 0.5em 0 0;
	font-weight: bold;
}

.commentnav {
	padding: 15px 2% 15px 2%;
	font-size: 0.8em;
}

p.no-comments {
	width: 100%;
	float: left;
	padding: 1em 0 1em 0;
	margin: 1em 0 0 0;
}

.comment-awaiting-moderation {
	margin: 0;
	font-size: 0.875em;
	color: red;
}

.comment-edit-link {
	font-size: 1em;
}

.comment-edit-link:before {
	font-family: FontAwesome;
	content: '\f044';
	padding: 0 5px 0 0;
	font-size: 1em;
}

/*  Response Form Styling 
------------------------------------------------*/
.comment-respond { 
	width: 100%;
	float: left;
	margin: 1em 0 0 0;
	padding: 0;
	font-size: 1em;
}

.page #respond {
	margin: 0em;
	padding: 0em;
	font-size: 1em;
}

#respond h3 #reply-title {
	width: 100%;
	float: left;
	font-size: 1.25em;
	padding: 0.5em 2%  0.5em 2%;
}

#respond .comment-notes {
	width: 100%;
	float: left;
	padding: 0;
	margin: 0;
}

#respond .comment-notes span{float: left;}

#respond p {
	width:100%;
	font-size: 1em;
}

#respond label {
	clear: both;
	float: left;
	margin: 0.5em 0 0 0;
}

#respond .required{
	float: left;
	margin: 0;
}

.comment-form-author input,.comment-form-email input,
.comment-form-url input{
	clear: both;
	width: calc(100% - 10px);
	float: left;
	margin: 0.5em 0 0.5em 0;
	border: none;
	padding: 5px;
}

#respond textarea {
	clear: both;
	width: calc(100% - 10px);
	float: left;
	margin: 0.5em 0 0.5em 0;
	border: none;
	padding: 5px;
	font: inherit;
	font-size: 1em;
}

#respond .form-submit {
	clear: both;
}

input#author, input#email, input#url { 
	font-size: 1em;
}

p.form-allowed-tags {
	clear: both;
	width: 100%;
	float: left;
	margin: 1em 0 0 0;
	padding: 0;
	font: inherit;
}

p.form-allowed-tags code {font: inherit;}

input#submit {margin-bottom: 20px; }

#respond .error {
	color: red;
	float: left;
	line-height: 1em;
	font-size: 1em;
	margin: 10px 0 0 0;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> N. Misc Styles */

/* ------------------ Error Styles --------------------- */

.error {
	float: left;
	color: red;
	font-size: 1.3em;
	background-color: #ffffff;
	padding: 5px 0 5px 0;
}

/* ----------------Social Widget Styles ---------------- */

/* ------ Other Areas -------------- */
.jot-social-widget {display: inline-block;}

.jot-social-widget a {
	display: block;
	float: left;
	margin: 5px 0px 0px 5px;
}

.jot-social-widget i.small {
	font-size: 20px;
}

.jot-social-widget i.large {
	font-size: 32px;
}

/* ------------- Author Widget -------------------- */
.jot-author-widget {
	float: left;
	width: 100%;
	margin: 10px 0 10px 0;
	text-align: left;
}

.jot-author-widget .author-widget-avatar img{
	float: left;
	width: 50px;
	border: none;
	box-shadow: none;
	margin: 0 1em 0 0;
	padding: 0;	
}

.jot-author-widget .author-widget-name {
	font-size: 1em;
	line-height: 1.0em;
	font-weight: bold;
}

.jot-author-widget .author-widget-bio {
	font-size: 1em;
	line-height: 1.0em;
}

/* WordPress Generated Class */
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
/* ---------- WordPress Recent Posts styles -------------- */
.widget_recent_entries ul,
.jot_recent_posts ul 
{
	margin:0;
	padding: 0;
}

.widget_recent_entries li,
.jot_recent_posts li 
{
	list-style: none;
	padding: 5px 0 0 0;
	margin: 0;
}

/* ----------- WordPress Calender Widget Style ----------- */

#calendar_wrap table {
	border-collapse:separate;
    border-spacing: 3px;
}

#wp-calendar{
	float: left;
	font-size: 0.875em;}

#wp-calendar caption {
	font-size: 1em;
	font-weight: bold;
	padding-bottom: 0.5em;
}
	
#wp-calendar thead th {
	border: none;
	margin: 0;
	width: 5%;
	padding: 0;
	text-align: center;
}

#wp-calendar tbody {
	border: none;
	font-size: 0.875em;
}
	
#wp-calendar tbody td {
	border: none;
	text-align: center;
	width: 5%;
	padding: 0;
}

#wp-calendar tbody td a {font-weight: bold;}

#wp-calendar tfoot {background: none;}

#wp-calendar tfoot tr {border: none;}

#wp-calendar tfoot td {border: none;}

#wp-calendar tr #prev a,table#wp-calendar tr #next a {
	font-size: 0.917em;
	font-weight: bold;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* calendar widget in the Footer */
#wp-calendar tbody td a {font-weight: bold;}
#wp-calendar tbody td a:hover {font-weight: normal;}

/* ------------- tag widget styles -------------------- */
.tagcloud a
{
	display: inline-block;
	background-color: #198EFE;
	font-size: 11px!important;
	padding: 0 3px 0 3px;
	margin: 2px 2px 2px 0;
}

#jot-footer .tagcloud a
{
	background-color: #0083FF;
}

/* ----------- single/comments page navigation responsive styles ----------- */

.postpagenav, .commentnav {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
}

.postpagenav .left,.commentnav .left {
	display: inline-block;
	float: left;
}

.postpagenav .right,.commentnav .right {
	display: inline-block;
	float: right;
}

/* ----- blog page navi ----- */
.navigation .pagination {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
}

.page-numbers {
	float: left;
	width: auto;
	text-decoration: none;
	border: none;
	padding: 3px 5px;
	margin: 2px;
}

/* -------------- search form ------------------*/

.fa-search {
	background: none;
	border: none;
	font-size: 1em;
	color: #b5b5b5;
	margin: 0;
	padding: 0;
}

.fa-search:hover {
	cursor: pointer;
	color: #000000;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> P. Color box styles  */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{
	float:left; 
	margin:auto; 
	border:0; 
	display:block; 
	max-width:none; 
	/*-ms-interpolation-mode:bicubic;*/
}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{
	box-sizing:content-box; 
	/*-moz-box-sizing:content-box; 
	-webkit-box-sizing:content-box;*/
}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(/wp-content/themes/jot/js/colorbox/images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/wp-content/themes/jot/js/colorbox/images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/wp-content/themes/jot/js/colorbox/images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(/wp-content/themes/jot/js/colorbox/images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/wp-content/themes/jot/js/colorbox/images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/wp-content/themes/jot/js/colorbox/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Q. Flex Slider Styles Styles */
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
	font-family: 'flexslider-icon';
	src:url('/wp-content/themes/jot/js/flex-slider/fonts/flexslider-icon.eot');
	src:url('/wp-content/themes/jot/js/flex-slider/fonts/flexslider-icon.eot#iefix') format('embedded-opentype'),
		url('/wp-content/themes/jot/js/flex-slider/fonts/flexslider-icon.woff') format('woff'),
		url('/wp-content/themes/jot/js/flex-slider/fonts/flexslider-icon.ttf') format('truetype'),
		url('/wp-content/themes/jot/js/flex-slider/fonts/flexslider-icon.svg#flexslider-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { 
	margin: 0;/* ka -was 0 0 60px */
	background: transparent;
	/*border: 4px solid #fff;*/
	position: relative;
	/*border-radius: 4px;*/
	/*box-shadow: 0 1px 4px rgba(0,0,0,.2);*/
	/*zoom: 1;*/
}
.flex-viewport { 
	max-height: 2000px;
	/*-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;*/
	transition: all 1s ease;
}
.loading .flex-viewport { max-height: 300px; }
/*.flexslider .slides { zoom: 1; }ka */
.carousel li { margin-right: 5px; }

/* Direction Nav */
/*.flex-direction-nav {*height: 0;} ka*/

.flex-direction-nav a {
	text-decoration:none;
	display: block;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	position: absolute;
	top: 50%;
	z-index: 10;
	overflow: hidden;
	opacity: 0;
	cursor: pointer;
	color: rgba(255,255,255,0.8);
	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
	/*-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;*/
	transition: all .3s ease;
}

.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; /*filter:alpha(opacity=0);ka*/ cursor: default; }
.flex-direction-nav a:before {
	font-family: "flexslider-icon";
	font-size: 40px;
	line-height: 1;
	display: inline-block;
	content: '\f001';
}
.flex-direction-nav a.flex-next:before  { content: '\f002'; }
.flex-direction-nav li{list-style: none; margin:0!important; padding: 0;} /* ka added */
.flexslider .slides li{margin: 0;}/* ka added */

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: right; z-index: 1000;}
.flex-control-nav li {margin: 0; display: inline; /*zoom: 1; *display: inline;ka*/}
.flex-control-paging li a {
	/*width: 11px;
	height: 11px; 
	display: block; 
	/*background: #666; 
	background: rgba(0,0,0,0.5); */
	/*cursor: pointer; 
	text-indent: -9999px; 
	/*-webkit-border-radius: 20px; 
	-moz-border-radius: 20px; 
	-o-border-radius: 20px;*/
	/*border-radius: 20px; 
	/*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
	-o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);*/
	/*box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
	/*display: none; /*ka added*/
	color: transparent;
}
.flex-control-paging li a:hover { /*background: #333; background: rgba(0,0,0,0.7);*/ }
.flex-control-paging li a.flex-active { /*background: #000; background: rgba(0,0,0,0.9); cursor: default;*/ }

.flex-control-paging ol li {padding: 0; margin: 0;}
.flex-control-paging li a:before {
	font-family: FontAwesome;
	content: '\f0c8';
	font-size: 0.75em;
	line-height: 1.5em;
	padding: 0 5px 0 0;
	margin: 0;
	color: rgba(201,201,201,0.5);
	vertical-align: top;
}

.flex-control-paging li a:hover:before {
	color: rgba(0,131,255,0.55);
}

.flex-control-paging li a.flex-active:before {
	color: rgba(201,201,201,1);
}

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

/* ka feature slider with carousel nav */

.flexslider .slides li {
	position: relative;
	padding: 0;
}

.flex-caption {
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6); /* whatever you want */
	color: #efefef;
	z-index: 1;
	font-size: 1em;
	padding: 0.5em;
	text-align: center;
}

.flexslider.jot-gallery-thumb .slides img,
.flexslider.jot-widget-thumb .slides img
{
	border-bottom: 5px solid transparent;
	border-right: 5px solid transparent;
	width: calc(100% - 5px);
}

.flexslider.jot-gallery-thumb .slides img:hover,
.flexslider.jot-widget-thumb .slides img:hover
{
	opacity: 0.5;
	cursor: pointer;
}

.flexslider.jot-gallery-thumb .slides .flex-active-slide img,
.flexslider.jot-widget-thumb .slides .flex-active-slide img
{
	opacity: 0.5;
}

.jot-two-col-1 .flex-direction-nav a:before,
.jot-two-col-2 .flex-direction-nav a:before,
.jot-three-col-1 .flex-direction-nav a:before,
.jot-three-col-2 .flex-direction-nav a:before,
.jot-three-col-3 .flex-direction-nav a:before
{
	font-size: 20px;
}

.jot-two-col-1 .flex-direction-nav a,
.jot-two-col-2 .flex-direction-nav a,
.jot-three-col-1 .flex-direction-nav a,
.jot-three-col-2 .flex-direction-nav a,
.jot-three-col-3 .flex-direction-nav a
{
	width: 20px;
	height: 20px;
	margin: -10px 0 0;
	position: absolute;
	top: 50%;
}

/* mobile */
@media screen and (max-width: 800px) {
	.flex-direction-nav a:before {
		font-size: 20px;
	}
	.flex-direction-nav a {
		width: 20px;
		height: 20px;
		margin: -10px 0 0;
		position: absolute;
		top: 50%;
	}
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> R. Other Plugin Styles */

/* ------- Jetpack ------------------ */
/* sharedaddy */
.sharedaddy {
	clear: both;
	float: left;
	margin: 10px 0 0 0;
}

.sd-social-official .sd-content ul:after {
    clear:none!important;
    content:"";
    display: block;
    height: 0px;
    visibility: hidden;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> S. Mobile Styles */

/* ===================================================================== 700 */
@media only screen and (max-width:700px){
	.jot-two-col-1 {
		width: 100%;
		float: left;
		margin: 0 0 15px 0;
		padding: 0;
	}
	
	.jot-three-col-1 {
		width: 100%;
		float: left;
		margin: 0 0 15px 0;
		padding: 0;
	}

	/* ---- header ---- */	
	.jot-title.notagline {font-size: 1.75em;}
	.jot-title.tagline,.jot-tagline.notitle {font-size: 1.75em;}
	.jot-tagline.title {font-size: 1em;}
	
	.post-header {
	    width: calc(100% - 40px);
	    float: left;
	    padding: 20px 20px 0 20px;
	    margin: 0;
	}
	
	.post-header-wrap {
		padding: 0 0 20px 0;
	}
	
	/* ---- post titles ----- */
	.post-title{
		padding: 0;
	}
	
	.post-content {
	    width: calc(100% - 40px);
	    float: left;
	    padding: 20px;
	    margin: 0;
	    font-size: 1em;
	}
	
	/* --------------------------------------------- Action Header */
	#action-left {
		width: 70px;
	}
	
	#jot-mobile-button {
		padding: 5px;
	}
	
	#jot-mobile-button .slicknav_menutxt:before{
		padding: 0;
		font-size: 20px;
	}
	
	#jot-mobile-button .slicknav_menutxt:hover:before{
		opacity: 0.5;
	}
	
	.jot-contact {
		padding: 3px 0 0 0;
	}
	
	.jot-contact i {
		font-size: 20px;
	}

	.jot-show-search-trigger i{
		font-size: 20px;
		padding: 5px;
	}
	
	/* ------------------------------ Action header social links */
	
	.action-social {
		float: left;
		width: calc(100% - 100px);
	}

	.action-social .jot-social-widget a {margin:0;padding:0;}
	
	.action-social .jot-social-widget i.small {font-size: 20px;}
	
	.action-social .jot-social-widget i.large {font-size: 20px;}
	
	.action-social .jot-social-widget i.fa-fw {width: 20px;}
	
	.action-social .jot-social-widget i { padding: 5px 0 5px 0; }
	.action-social .jot-social-widget a .fa-delicious { background-color: transparent; color: #2A96FF; }
	.action-social .jot-social-widget a .fa-digg { background-color: transparent; color: #000000; }
	.action-social .jot-social-widget a .fa-facebook-f { background-color: transparent; color: #3B5998; }
	.action-social .jot-social-widget a .fa-flickr { background-color: transparent; color: #FF66B6; }
	.action-social .jot-social-widget a .fa-google-plus { background-color: transparent; color: #D32F2F; }
	.action-social .jot-social-widget a .fa-instagram { background-color: transparent; color: #E3DCC9; }
	.action-social .jot-social-widget a .fa-linkedin { background-color: transparent; color: #007AB6; }
	/* - use users icon for MySpace */
	.action-social .jot-social-widget a .fa-users { background-color: transparent; color: #00349A; }
	.action-social .jot-social-widget a .fa-pinterest-p { background-color: transparent; color: #BD2125; }
	.action-social .jot-social-widget a .fa-tumblr { background-color: transparent; color: #34465D; }
	.action-social .jot-social-widget a .fa-twitter { background-color: transparent; color: #6CADDE; }
	.action-social .jot-social-widget a .fa-rss { background-color: transparent; color: #FB9F3B; }
	.action-social .jot-social-widget a .fa-vimeo-square { background-color: transparent; color: #1AB7EA; }
	.action-social .jot-social-widget a .fa-yelp { background-color: transparent; color: #333333; }
	.action-social .jot-social-widget a .fa-youtube-play { background-color: transparent; color: #E12B28; }
	
	/* ------------ widgets ----------- */
	#footer-wrap-800 .widget
	{
		width: calc(100% - 50px);
	}
	
	#sidebar-top-800 .widget,.sidebar-before-content-800 .widget,
	.sidebar-after-content-800 .widget
	{
		width: calc(100% - 50px);
	}
	
	/* ---------- portfolio layouts ----------------- */
	/* one column */
	.portfolio-one-column .left-col{
		width: 100%;
		float: left;
		padding: 15px 0 15px 0;
		margin: 0;
	}
	
	.portfolio-one-column .right-col{
		width: 100%;
		float: right;
		padding: 20px 0 15px 0;
		margin: 0;
	}
	
	.portfolio-one-column .display-caption,
	.portfolio-one-column .display-description {
		display:none;
	}
	
	/* two column portfolio */
	
	.portfolio-two-column-wrap .thin-border {display: none;}
	
	.portfolio-two-column.left-col,
	.portfolio-two-column.right-col
	{
		width: 100%;
		float: left;
		margin: 25px 0 0 0;
		padding: 0 0 25px 0;
	}
	
	/* three column portfolio */
	.portfolio-three-column-wrap .thin-border {display: none;}

	.portfolio-two-column.left-col,
	.portfolio-two-column.right-col
	{
		width: 100%
		float: left;
		margin: 20px 0 20px 0;
	}
	
	.portfolio-three-column-wrap .display-post-title h4,
	.portfolio-three-column-wrap .display-image-caption h4 {
		font-size: 1.2em;
	}
	
	.portfolio-three-column-wrap .display-post-content,
	.portfolio-three-column-wrap .display-image-description
	{
		font-size: 1.0em;
	}
	 
	 /* four column portfolio */
	.portfolio-four-column-wrap .thin-border {display: none;}
	
	.portfolio-four-column.col-1,
	.portfolio-four-column.col-2,
	.portfolio-four-column.col-3,
	.portfolio-four-column.col-4
	{
		width: 100%;
		float: left;
		margin: 20px 0 20px 0;
	}
	
	.portfolio-four-column-wrap .display-post-title h5,
	.portfolio-four-column-wrap .display-image-caption h5 {
		font-size: 1.2em;
	}
	
	.portfolio-four-column-wrap .display-post-content,
	.portfolio-four-column-wrap .display-image-description
	{
		font-size: 1em;
	}

	
}

@media only screen and (max-width:481px){
	
	.post-header {
	    width: calc(100% - 30px);
	    float: left;
	    padding: 15px 15px 0 15px;
	    margin: 0;
	}
	
	.post-header-wrap {
		padding: 0 0 15px 0;
	}
	
	/* ---- post titles ----- */
	.post-title{
		font-size: 1.50em;
		padding: 0;
	}
	
	.post-content {
	    width: calc(100% - 30px);
	    float: left;
	    padding: 15px;
	    margin: 0;
	}
	
	/* ======================================= post format content : quote */
	article.format-quote.jot-one-col .quote-post-feature {
		width: calc(100% - 40px);
		padding: 20px;
		font-size: 1em;
	}
	
	article.format-quote.jot-one-col .quote-post-feature-icon {
		width: 40px;
	}
	
	article.format-quote.jot-one-col .quote-post-feature-quote {
		width: calc(100% - 40px);
	}
	
	/* ======================================= post format content : status */
	article.format-status.jot-one-col .post-header {
		width: 90px;
		padding: 0 0 15px 0;
		margin: 0;
		float: left;
		font-size: .75em;
		text-align: center;
	}
	
	article.format-status.jot-two-wrap-all .post-header {
		width: 90px;
		padding: 0 0 15px 0;
		margin: 0;
		float: left;
		font-size: .75em;
		text-align: center;
	}
	
	article.format-status.jot-one-col .status-post-content {
		width: calc(100% - 100px);
		float: left;
		margin: 0 0 0 10px;
		font-size: 0.875em;
	}
	
	article.format-status.jot-two-wrap-all .status-post-content {
		width: calc(100% - 100px);
		float: left;
		margin: 0 0 0 10px;
		font-size: 0.875em;
	}
	
	/* ---------- portfolio layouts ----------------- */
	.portfolio-full-wrap .display-post-title h2,
	.portfolio-full-wrap .display-image-caption h2,
	.portfolio-one-column-wrap .display-post-title h3,
	.portfolio-one-column-wrap .display-image-caption h3,
	.portfolio-two-column-wrap .display-post-title h3,
	.portfolio-two-column-wrap .display-image-caption h3,
	.portfolio-three-column-wrap .display-post-title h4,
	.portfolio-three-column-wrap .display-image-caption h4,
	.portfolio-four-column-wrap .display-post-title h5,
	.portfolio-four-column-wrap .display-image-caption h5 {
		font-size: 0.9625em;
	}
	
	.portfolio-full-wrap .display-post-content,
	.portfolio-full-wrap .display-image-description,
	.portfolio-one-column-wrap .display-post-content,
	.portfolio-one-column-wrap .display-image-description,
	.portfolio-two-column-wrap .display-post-content,
	.portfolio-two-column-wrap .display-image-description,
	.portfolio-three-column-wrap .display-post-content,
	.portfolio-three-column-wrap .display-image-description,
	.portfolio-four-column-wrap .display-post-content,
	.portfolio-four-column-wrap .display-image-description
	{
		font-size: 0.75em;
	}

}