/*
Theme Name: Hero Signal
Theme URI: https://www.webheroeshq.com/
Author: Jermaine Valentine
Author URI: https://www.webheroeshq.com/
Description: Signal is a bare bones theme created by Web Heroes to jumpstart the development of websites.
Version: 1.3.0
Tags: black, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, featured-images, flexible-header, full-width-template, rtl-language-support, sticky-post
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: herosignal

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Creation: 21/May/2015
*/

/* Table of contents
==================================================  /
- Font-Face
- Reset
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Colors
- Clearing
- Images
- WordPress
- Plug-ins
- Home Styles
- Page Styles
- Media Queries


/* #Font-Face
================================================== */
@font-face {
    font-family: 'latoitalic';
    src: url('fonts/lato/lato-italic-webfont.eot');
    src: url('fonts/lato/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato/lato-italic-webfont.woff2') format('woff2'),
         url('fonts/lato/lato-italic-webfont.woff') format('woff'),
         url('fonts/lato/lato-italic-webfont.ttf') format('truetype'),
         url('fonts/lato/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('fonts/lato/lato-regular-webfont.eot');
    src: url('fonts/lato/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato/lato-regular-webfont.woff') format('woff'),
         url('fonts/lato/lato-regular-webfont.ttf') format('truetype'),
         url('fonts/lato/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latosemibold';
    src: url('fonts/lato/lato-semibold-webfont.eot');
    src: url('fonts/lato/lato-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato/lato-semibold-webfont.woff2') format('woff2'),
         url('fonts/lato/lato-semibold-webfont.woff') format('woff'),
         url('fonts/lato/lato-semibold-webfont.ttf') format('truetype'),
         url('fonts/lato/lato-semibold-webfont.svg#latosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latosemibold_italic';
    src: url('fonts/lato/lato-semibolditalic-webfont.eot');
    src: url('fonts/lato/lato-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato/lato-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/lato/lato-semibolditalic-webfont.woff') format('woff'),
         url('fonts/lato/lato-semibolditalic-webfont.ttf') format('truetype'),
         url('fonts/lato/lato-semibolditalic-webfont.svg#latosemibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_slabbold';
    src: url('fonts/roboto-slab/robotoslab-bold-webfont.eot');
    src: url('fonts/roboto-slab/robotoslab-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-slab/robotoslab-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-slab/robotoslab-bold-webfont.woff') format('woff'),
         url('fonts/roboto-slab/robotoslab-bold-webfont.ttf') format('truetype'),
         url('fonts/roboto-slab/robotoslab-bold-webfont.svg#roboto_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_slablight';
    src: url('fonts/roboto-slab/robotoslab-light-webfont.eot');
    src: url('fonts/roboto-slab/robotoslab-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-slab/robotoslab-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-slab/robotoslab-light-webfont.woff') format('woff'),
         url('fonts/roboto-slab/robotoslab-light-webfont.ttf') format('truetype'),
         url('fonts/roboto-slab/robotoslab-light-webfont.svg#roboto_slablight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_slabregular';
    src: url('fonts/roboto-slab/robotoslab-regular-webfont.eot');
    src: url('fonts/roboto-slab/robotoslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-slab/robotoslab-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-slab/robotoslab-regular-webfont.woff') format('woff'),
         url('fonts/roboto-slab/robotoslab-regular-webfont.ttf') format('truetype'),
         url('fonts/roboto-slab/robotoslab-regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	:focus {outline: 0;} /* remember to define focus styles! */
	table {border-collapse: separate; border-spacing: 0;}

/* Grid
================================================== */
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 600px */
@media (min-width: 600px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 840px */
@media (min-width: 960px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
================================================== */
/* NOTE 1.5rem = 15px :) */
html { font-size: 62.5%; box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }
* { vertical-align: middle; }
/* * { position: relative; } killed because it breaks flexslider */
body {
  background:#fff;
  height: 100%;
  font-size: 1.6em;  
  line-height: 1.4;
  color: #666; 
  font-family: 'latoregular';
  font-weight: normal; font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; 
  display: inline-block; width: 100%; 
}

/* Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0; margin-bottom: 1rem; font-family: 'roboto_slablight'; font-weight: normal;}
h1 { font-size: 3.0rem; line-height: 1.0; }
h2 { font-size: 2.6rem; line-height: 1.2; }
h3 { font-size: 2.2rem; line-height: 1.3; }
h4 { font-size: 1.8rem; line-height: 1.4; }
h5 { font-size: 1.4rem; line-height: 1.5; }
h6 { font-size: 1.2rem; line-height: 1.6; }


p { margin: 0 0 20px 0; }
p img { margin: 0; }

small { font-size: 85%; }
strong {font-family: 'latosemibold'; font-weight: normal;}
em {font-family: 'latoitalic'; font-style: normal;}

blockquote { margin: 20px 0 20px 0; padding: 0 20px 0 40px; border-left: 1px dotted #e9e9e9; font-size: 3.250rem; color: #333; font-family: 'roboto_slablight';}
blockquote :before {font-family: "fontawesome"; content: "\f10d"; padding-right: 5px; color: #e9e9e9;}
cite{font-size: 2.0rem;}
address{font-family: 'latoitalic'; font-style: normal; margin-bottom: 20px;}

.upper-case{text-transform: uppercase;}

/* Links
================================================== */
a, a:visited { color: #000; text-decoration: none; }
a:hover, a:focus { color: #c7012e; }
p a, p a:visited { line-height: inherit; }

.current_page_item a, active, visited{color: #c7012e;}

/* Buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
 -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;
  display: inline-block;
  padding: 15px 40px;
  color: #555;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; 
  font-family: 'latoregular';
  }
  
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
  
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fff;
  background-color: #9b59b6;
  border-color: #9b59b6; 
 }
  
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #8e44ad;
  border-color: #8e44ad;
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;}

/* General button style (reset) */


/* Forms
================================================== */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  padding: 12px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
================================================== */
ul {
  list-style: none outside; margin-left: 30px;}

.pages ul li:before{font-family: 'FontAwesome'; content: "\f058"; padding-right: 5px; color: #e1e1e1;}

ol {
  list-style: decimal inside; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; line-height: 1.2;}

dt{font-family: 'latosemibold'; font-weight: normal;}
dd{margin-bottom: 20px;}
/* Code
================================================== */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }
pre{background: #f1f1f1; border-radius: 4px; font-size: 90%; padding: .2rem .5rem; display: inline-block; max-width: 100%;}

/* Tables
================================================== */
table{width: 100%; max-width: 100%; border-collapse: collapse;}
th{font-family: 'latosemibold'; font-weight: normal; background: #f9f9f9;}
tr, th, td{border: 1px solid #f1f1f1; }
th,
td {
  padding: 12px 15px!important;
  text-align: center;
  }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0;}

tr:nth-child(odd){background: #fefdfd; }


/* Spacing
================================================== */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
================================================== */
.full-width { width: 100%; box-sizing: border-box; }
.max-full-width { max-width: 100%; box-sizing: border-box; }
.pull-right { float: right; }
.pull-left { float: left; }

.centered{margin-left: auto; margin-right: auto;}
.align-left, .alignleft{text-align: left;}
.align-right, .alignright{text-align: right;}
.align-center, .aligncenter{text-align: center;}

.hide{display: none!important;}
.show{display: block!important;}

.border-light{border: 1px solid #e1e1e1;} 
.border-dark{border: 1px solid #111;}
.border-none{border: none!important;}

.lg-padding{padding: 60px 0;}
.sm-padding{padding: 30px 0;}

.alpha{padding-left: 0!important;}
.omega{padding-right: 0!important;}
.mids{padding-right: .5em!important;padding-left: .5em!important;}

.fixed{position: fixed; z-index: 10;}

.f-animate{webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.s-animate{webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}

#search-results .wp-audio-shortcode, #search-results iframe{width: 100%; max-width: 100%;}
/* Colors
================================================== */

.light-text{color: #fff !important;}
.dark-text{color: #000 !important;}
.bg-light{background: #faf9f9;} 
.bg-dark{background: #111;}
.bg-none{background: none!important;}

/* Misc
================================================== */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #e1e1e1; }


/* Clearing
================================================== */

/* Self Clearing Goodness */
.container:after,
.row:after,
.clearfix{
  content: "";
  display: table;
  clear: both; }
  
/* for IE7 */
.clearfix { min-width: 0; }
/* targets IE5-6 only, hidden from IEmac \*/
* html .clearfix { height: 1%; } /* end hide IEmac */
/* for IEmac only \*//*/ 
.clearfix { display: inline-table; }
/* end IEmac only */

.clear{clear:both;}

/* Images
================================================== */

img.scale-with-grid, img { max-width: 100%; height: auto; }

img.align-left, img.alignleft, .wp-caption.alignleft{float: left; margin: 10px 20px 20px 0;}
img.align-right, img.alignright, .wp-caption.alignright{float: right; margin: 10px 0 20px 20px;}
figure.aligncenter, .wp-caption.aligncenter, .wp-caption.alignnone{margin-left: auto; margin-right: auto;}

.iframe-flex {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
}
.iframe-flex iframe,   
.iframe-flex object,  
.iframe-flex embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
}

.wp-audio-shortcode{margin:0!important; background:none!important; border: 0px solid #FF0000; padding-top: 25px;}


/* WordPress
================================================== */

.wp-caption,
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter,
.wp-caption.alignnone{
   border: 1px solid #f1f1f1; max-width: 100%; height: auto; box-sizing: border-box; padding: 5px;
}


.wp-caption img {margin: 0; width: 100%; max-width: 100%;}
.wp-caption-text{margin: 0 5px; font-family: 'latoitalic'; font-size: 1.450rem; color: #666;}

/* 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: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. */
}

/* Validation styles */
 
.size-thumbnail {margin: 10px;}
 
.sticky .entry-date { display: none; }
.blog .sticky {background: url(images/noise.png); padding: 20px; border-bottom: none; border-radius: 4px;}


.gallery-caption {
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
}

.gallery-caption:before {
	content: "";
	height: 100%;
	min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
}

.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}
.bypostauthor > article .fn:before {
	content: "\f408";
	margin: 0 2px 0 -2px;
	position: relative;
	top: -1px;
}
.bypostauthor > article .fn:before{
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font: normal 16px/1 Genericons;
	text-decoration: inherit;
	vertical-align: text-bottom;
}

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

.category-unpublished {display: none;}

/* Post formats */

.format-aside p { margin: 20px 0 20px 0; padding: 0 20px 0 40px; border-left: 1px dotted #e9e9e9; font-size: 3.000rem; color: #333; font-family: 'roboto_slablight';}
.format-aside p :before {font-family: "fontawesome"; content: "\f10d"; padding-right: 5px; color: #e9e9e9;}

.blog .format-gallery .featured-image, #masonry-loop .format-gallery .featured-image  {display: none;}

/* Plug-ins
================================================== */

.flex-active-slide .flex-caption {
    -webkit-animation: slideIn;
    -moz-animation: slideIn;
    -o-animation: slideIn;
    animation: slideIn;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes slideIn {
    0% {
        left: 30%;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}
@-moz-keyframes slideIn {
    0% {
        left: 30%;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}
@-o-keyframes slideIn {
    0% {
        left: 30%;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}
@keyframes slideIn {
    0% {
        left: 30%;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

.format-gallery .flexslider {padding-bottom: 0!important; margin-bottom: 10px;}
.loading {min-height: 500px!important; background: url(images/loader.gif) no-repeat center center!important;}

/* Animated counter */
.count { line-height: 90px; font-size:25px; width: 100px; height: 100px; display: inline-block; text-align: center; border-radius: 50%;}
.col-red{ border: solid 5px #c0392b; color: #c0392b;}
.col-blue{ border: solid 5px #3498db; color: #3498db;} 
.col-green{ border: solid 5px #1abc9c; color: #1abc9c;}

#masonry-loop .flex-control-nav{display: none;}

.masonry-entry{ box-sizing: border-box; width:31.333333%; border: 1px solid #e1e1e1; margin: 0 0 25px auto; background: url(images/noise.png); padding: 0 0 20px 0;}
#masonry-loop .sticky{border-bottom: 1px solid #e1e1e1;}
.masonry-details p, .masonry-details .meta{padding: 0 20px;} .masonry-details h2{font-family: 'roboto_slabbold'; font-size: 1.6rem; margin: 20px 20px 5px 20px;}
.masonry-entry .loading {min-height: 225px!important;}

.scrollToTop{
	width:66px; 
	height:66px;
	padding: 0 0 0 4px; 
	line-height: 59px;
	border-radius: 50%;
	text-align:center;
	text-decoration: none;
	position:fixed;
	bottom:45px;
	right:40px;
	display:none;
	border: 2px solid #999;
}
.scrollToTop:before {
  font-family: "FontAwesome";
  font-size: 23px;
  display: inline-block;
  content: '\f062';
  color: #777;
  text-shadow: none;
}
.scrollToTop:hover{
	text-decoration:none;
}

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.950);
	z-index: 99;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(images/cross.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 200;
}

/* Menu style */
.overlay .search {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font-size: 54px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 50%; margin: 0 auto;
	webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay .search-field{ background: none; border: none; color: #fff;}
.overlay .search-field:focus { border: none; outline: 0; }
#trigger-overlay{padding: 0; margin: -6px 0 0 0; border: none;}

/* Header Style
================================================== */
#mobile-nav:not( .mm-menu ) {
   display: none;
}

.header {padding: 10px 0; border-bottom: 1px solid #e1e1e1; background: #fff;}
.header h1{font-size: 1.000rem; text-transform: uppercase;}

.site-navigation{text-align: right;}
#main-nav{
position: relative; margin: 50px 0 0 0; height: 30px; /* set to the height you want your menu to be */
background: none; z-index: 3; display: inline-block;}

#main-nav ul	{
	margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
}
#main-nav li	{
 display: inline-block;
 line-height: 30px; /* this should be the same as your #main-nav height */
 height: 30px; /* this should be the same as your #main-nav height */
 margin: 0; padding: 0; /* only needed if you don't have a reset */
 position: relative; /* this is needed in order to position sub menus */
 text-align: left;
}
#main-nav li a	{
 display: block; height: 30px; line-height: 30px; padding: 0 8px; color: #111;  font-size: 0.750em; text-transform: uppercase; -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;}

#main-nav li a:hover{color: #c7012e;}
#main-nav li:first-child{border-left: none;}

#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover { color: #000; }
#main-nav .current_page_item .children a{color: #999;}
#main-nav .current_page_item .children a:hover{color: #000;}
#main-nav ul ul { /* this targets all sub menus */
 display: none; /* hide all sub menus from view */
 position: absolute; 
 top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
}
#main-nav ul ul li { /* this targets all submenu items */
 float: none; /* overwriting our float up above */
 width: 220px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
 background: #e1e1e1;
}
#main-nav ul ul li{border-left: none;}
#main-nav ul ul li a { /* target all sub menu item links */
 padding: 0 0 0 15px; /* give our sub menu links a nice button feel */ color: #333!important;}
 
#main-nav ul ul li:hover { /* target all sub menu item links */
 /* give our sub menu links a nice button feel */ background: #e9e9e9;}
 
#main-nav ul li:hover > ul {
 display: block; /* show sub menus when hovering over a parent */ }
#main-nav ul ul li ul {
 /* target all second, third, and deeper level sub menus */
 left: 220px; /* this needs to match the sub menu width set above -- width + padding + borders */
 top: 0; /* this ensures the sub menu starts in line with its parent item */
}
.mobile-nav {
    z-index: 9999999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    top: 10px;
    right: 60px; outline: 0;
	 -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease;
	 display: none;
}
.mobile-nav a
{
	background: center center no-repeat;
	background-image: url(images/ham.png);
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0; outline: 0;
	color: #999;
}
.menu-item-has-children a:after{font-family: 'FontAwesome'; content: "\f078"; padding-left: 3px; color: #e1e1e1;}
.menu-item-has-children li a:after, .footer .menu-item-has-children a:after{content: "";}

#page-header{
	margin-top: -1px; background-image:url(images/computer.jpg); display: block;  background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; min-height: 520px; height: auto !important; height: 520px;}
	
#blog-header{
	margin-top: -1px; background-image:url(images/umbrella.jpg); display: block;  background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; min-height: 520px; height: auto !important; height: 520px;}
	
#single-header{
	margin-top: -1px; background-image:url(images/writing.jpg); display: block;  background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; min-height: 520px; height: auto !important; height: 520px;}
	
/* Home Styles
================================================== */
.flex-caption-text {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1; background: rgba(0,0,0,.3);}
.flex-caption {width: 100%; padding: 0; position: absolute; left: 0; bottom: 40%; color: #fff; text-align: center;}
.flex-caption-text{display: inline-block; padding: 15px 30px; border-radius: 4px; }
.flex-caption h1{margin: 0; }
.flex-caption p{margin: 5px 0 0 0; text-transform: uppercase; font-size: 1.4rem;}
.home-content{margin: 0 auto 50px auto;} .home-title{padding-bottom: 40px;} .home-page{background: #faf9f9; margin: 0;}
.home-page .featured-image{margin-bottom: 20px;}
/* Page Styles
================================================== */
.error{background: url(images/404-error.png) top center no-repeat; padding-top: 200px; text-align: center;}

/* Category Styles
================================================== */
.archive-meta{font-style: italic;}


/* Titles
================================================== */
#blog-header .page-title, #page-header .page-title, #single-header .page-title{margin: 0; text-align: center; padding-top: 250px; color: #000;}
.blog .page-title{margin: 0;}
.single-entry .page-title{margin: 0 0 20px 0;}
.page-title span{ font-weight: normal; font-family: 'roboto_slabregular'; color: #bebebe; letter-spacing: -.01rem;}
.related-posts-title{margin-bottom: 25px;} .archive-title{margin: 20px 0 20px 0; color: #000;}
.image-attachment .page-title{margin: 20px 0 0 0;} .image-meta{margin: 0 0 25px 0;}
.page-sub-title{margin: -20px 0 25px 0;}
.generic .page-title{display: none;}
/* Blog Styles
================================================== */
.blog .flexslider {margin-bottom: 5px;}

.blog-entry p, .blog-entry iframe{margin: 0;} .blog-entry .wp-audio-shortcode{padding-top: 0; margin: 15px 0!important;}
.blog-entry{border-bottom: 1px dotted #e1e1e1;  margin-bottom: 40px; padding-bottom: 40px;} .blog-entry:last-child{border: none;} 
.blog-entry .meta{margin-bottom: 10px; display: block;} .blog-entry p{margin: 0 0 25px 0;} .blog-entry iframe, .blog-entry embed{margin: 5px 0;}
.blog-entry .featured-image {margin-bottom: 10px;}

.masonry-entry .wp-audio-shortcode{padding-top: 0; margin: 10px 0 -5px 0!important;}
.masonry-entry iframe, .masonry-entry embed{margin: 10px 0 0 0;}

.single-entry .fa{color: #e1e1e1;}
.single-entry{margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px dotted #e1e1e1;} .single-entry:last-child{border: none;}
.comments-area footer{border: none;}
.comment-list, .comment-list .children{list-style: none outside; }
.comment-list li, .comment-list li .children li{margin: 30px 0; border-top: 1px dotted #e1e1e1; padding-top: 30px;} 
.comment-list li .children{margin: 20px 0 20px 30px;}
.comment-list li:first-child{border: none;}
.comment-author .avatar, .fn{float: left;} .fn{margin-right: 3px; line-height: 20px;}
.comment-author .avatar{margin: -5px 6px 0 0; } .fn:before{content: ""!important;}
.comment-metadata{display: block; padding: left: 0; margin-top: 10px;}
.comment-content{margin-top: 20px; text-align: justify; margin-left: 5px;}
.reply{border: 1px solid #e1e1e1; border-radius: 4px; display: inline-block; font-weight: 400; padding: 6px 25px;} 
.comment-respond{margin-top: 50px;}
.comments-title, .comment-reply-title{color: #000; font-size: 1.8rem; font-weight: 400;}

.comment-form, .comment-form .container{width: 100%; max-width: 100%;}
.comment-form-comment textarea{width: 100%; max-width: 100%;}
.comment-form .one-third input{width: 100%; max-width: 100%;}

.navigation{margin: 50px auto; }
.navigation a, active, visited{color: #111;}
.navigation .page-numbers {color: #000; border: 1px solid #e1e1e1; line-height: 2; padding: 4px 12px; margin: 0 0 0 5px; border-radius: 2px;}
.navigation .current{ color: #e1e1e1; border: 1px solid #111;}
.navigation a:hover{ color: #c7012e; border: 1px solid #e1e1e1;}

.navigation .page-arr a, active, visited{color: #000; border: 1px solid #e1e1e1; line-height: 2; padding: 4px 12px; margin: 0 0 0 5px; border-radius: 2px;webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.navigation .page-arr a:hover{color: #c7012e; border: 1px solid #111;}

.post-author{border: 1px solid #e1e1e1; padding: 20px; border-radius: 4px; margin: 50px 0;}
.post-author_gravatar, .post-author_desc{display: inline-block!important;}
.author-social{border: 1px solid #faf9f9; padding: 15px 15px; border-radius: 4px;} .post-author_link{}
.author-social .fa-facebook{color: #43609C;} 
.author-social .fa-linkedin{color: #006699;} 
.author-social .fa-twitter{color: #1AB2E8;} 
.author-social .fa-google-plus{color: #D34836} 

.related-posts{padding: 0 0 30px 0; margin-bottom: 40px;}
/* Single-page Styles
================================================== */
.gallery-format .page-title{margin-bottom: 0;} .gallery-format .meta{display: block; margin-bottom: 20px;}
.audio-format .page-title{margin-bottom: 0;} .audio-format .meta{display: block; margin-bottom: 0px;}
.video-format .page-title{margin-bottom: 0;} .video-format .meta{display: block; margin-bottom: 20px;}
.image-format .page-title{margin-top: 10px; margin-bottom: 0;} .image-format .meta{display: block; margin-bottom: 20px;}
.standard-format .page-title{margin-bottom: 0;} .standard-format .meta{display: block; margin-bottom: 20px;}
/* Sidebar Styles
================================================== */
.sidebar-container{padding-top: 26px;}
.sidebar {border-bottom: 1px dotted #e1e1e1; margin-bottom: 20px;}
.sidebar aside{margin-bottom: 30px;}
.wp-tag-cloud li{display: inline-block;}
.wp-tag-cloud li:first-child:before{font-family: 'FontAwesome'; content: "\f02c"; padding-right: 5px; color: #e1e1e1;}
.widget_categories li:before{font-family: 'FontAwesome'; content: "\f07c"; padding-right: 6px; color: #e1e1e1;}
.widget_recent_entries li:before{font-family: 'FontAwesome'; content: "\f040"; padding-right: 5px; color: #e1e1e1;}

/* Footer Style
================================================== */
footer {border-top: 1px dotted #e1e1e1; font-size: 1.4rem;}
footer h3{font-size: 1.8rem; text-transform: none; margin-bottom: 1rem; color: #333!important;} 
footer p{margin: 0 0 10px 0;} footer strong {font-family: 'latosemibold'; font-weight: normal;}
.foot-menu li{border-bottom: 1px dotted #e1e1e1; padding-bottom: 10px;} 
.foot-menu  li ul{margin: 0;} footer .sub-menu{border-top: 1px dotted #e1e1e1; margin-top: 10px;}
.foot-menu  li li{border-bottom: none; padding-bottom: 0; margin: 10px 0 0 10px;}
footer .current_page_item .menu_item {color: #000!important;} 

.footer .container div:nth-child(1) h3:before{font-family: 'FontAwesome'; content: "\f041"; padding-right: 5px;}
.footer .container div:nth-child(2) h3:before{font-family: 'FontAwesome'; content: "\f0c9"; padding-right: 5px;}
.footer .container div:nth-child(3) h3:before{font-family: 'FontAwesome'; content: "\f005"; padding-right: 5px;}
.footer .container div:nth-child(4) h3:before{font-family: 'FontAwesome'; content: "\f087"; padding-right: 5px;}
.footer h3:before{color: #e1e1e1;}

.social-media-icons li{display: inline-block; background: #444; margin: 5px 0 5px 5px; padding: 3px 4px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 2rem;} .social-media-icons li:hover{background: #111;}


.social-media-icons .fa-facebook{color: #3b5998;} 
.social-media-icons .fa-twitter{color: #00aced;} 
 .social-media-icons .fa-linkedin{color: #007bb6;} 
.social-media-icons .fa-rss{color: #FF9900;}
.social-media-icons .fa-google-plus{color: #dd4b39;}
.social-media-icons .fa-pinterest{color: #cb2027;}
.social-media-icons .fa-youtube{color: #bb0000;}
.social-media-icons .fa-vimeo-square{color: #aad450;}
.social-media-icons .fa-instagram{color: #517fa4;}

/* Search Style
================================================== */
.search-result{border-bottom: 1px dotted #e1e1e1;  margin-bottom: 30px; padding-bottom: 10px;}
.search-result:last-child{border: none;}
.search-result h2{margin: 0;} .search-result small{margin: -10px 0 0 0;} .search-result p{margin-top: 20px;}
/* Media Queries
================================================== */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
min-width = If [device width] is greater than or equal to #
max-width = If [device width] is less than or equal to #
*/

@media screen and (max-width: 720px) {
  .masonry-entry{ width:100%!important; max-width: 100%;}
}

@media screen and (max-width: 760px) {
  .flex-caption-text{display: none;}
}

@media screen and (max-width: 980px) {
  .header #main-nav {display: none;}
  .mobile-nav{display: block!important;} .logo img{width: 50%;}
  .footer h3{margin-top: 20px;} 
  .sidebar {border-bottom: none; margin-bottom: 0;}
  .sidebar-container{padding-top:0;}
  #trigger-overlay{top: 25px; right: 80px; outline: 0; position: fixed;}
  .overlay .search {font-size: 27px;}
  #single-header, #blog-header, #page-header{ min-height: 320px; height: auto !important; height: 320px;}
  #blog-header .page-title, #page-header .page-title/*, #single-header .page-title*/{padding-top: 150px; color: #000;}
}

@media screen and (max-width: 1024px) {
	.masonry-entry{ width:48%;}
}

/* Larger than mobile */
@media screen and (max-width: 1366px) {
	#main-nav li a	{padding: 0 5px;}
}

@media screen and (max-width: 1246px) {
	#main-nav li a	{padding: 0 3px;}
}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 600px) { .logo h1{text-align: center;}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


@media print {
  header nav, footer { display: none; }
  img { max-width: 100%; }
  @page { margin: 0.5cm; }
  body { font: 12pt Georgia, "Times New Roman", Times, serif; line-height: 1.3; }
  h1 { font-size: 24pt; }
  h2 { font-size: 14pt; margin-top: 25px; }
}