/*
Theme Name: SS Infinity
Theme URI: http://www.supersimplethemes.com/infinity
Author: supersimplethemes
Author URI: http://www.supersimplethemes.com
Description: SS Infinity features a dark page layout that can be customised to use light colors via the WordPress customizer. The design is responsive and simple to provide an emphasis on your writing. Like all Super Simple Themes it’s lightweight and fast loading without any non-required elements.
Version: 1.0.1
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: ss-infinity
Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, sticky-post, theme-options, threaded-comments, blog
SS Infinity WordPress Theme Copyright 2018 supersimplethemes.com
SS Infinity WordPress Theme is distributed under the terms of the GNU GPL
*/

/* ----- html elements ----- */
body {
	padding: 0;
	margin: 0;
	background-color: #01579B;
	color: #444;
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
}
a {
	text-decoration: none;
}
a:hover {
	opacity: 0.7;
}
ul, ol {
	padding-left: 20px;
}
input[type=text], input[type=email], input[type=url], input[type=search], input[type=password], textarea {
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 14px;
}
input[type=submit] {
	border: 0;
	background-color: #000;
	color: #fff;
	padding: 8px 18px;
	font-size: 14px;
	border-radius: 3px;
}
input[type=submit]:hover {
	opacity: 0.7;
}
table {
	margin-bottom: 30px;
}
th, td {
	border: 1px solid #ccc;
	padding: 5px 10px;
}
blockquote {
	padding: 5px 30px;
	margin: 0;
	font-weight: bold;
}
pre {
	white-space: pre-wrap;
}

/* ----- layout ----- */
.wrap {
	max-width: 760px;
	margin: auto;
	padding: 0 15px;
}
.divider {
	margin-bottom: 30px;
	font-size: 26px;
	color: #ccc;
}
.clearfix {
	clear: both;
}

/* ----- header ----- */
#header {
	padding: 30px 0 45px 0;
	text-align: center;
}
#header-name {
	color: #fff;
	font-weight: bold;
	font-size: 20px;
}
#header-desc {
	font-size: 14px;
	opacity: 0.7;
}
#header-menu {
	display:table;
  margin: 0 auto;
}
#header-menu ul li {
	display: inline;
	margin: 0 12px;
}
#header-menu ul li a {
	text-transform: uppercase;
	font-size: 14px;
}
#header-menu ul li a:hover {
	text-decoration: underline;
}
#header-menu .sub-menu {
	display: none;
}
#header.mega-menu {
	padding-left: 15px;
	padding-right: 15px;
}
#header.mega-menu #header-desc {
	margin-bottom: 10px;
}
#header.mega-menu #hamburger {
	display: none;
}
@media(max-width:768px) {
	#header {
		text-align: left;
		padding-left: 15px;
		margin-bottom: 45px;
	}
	#header-branding {
		float: left;
	}
	#header-menu {
		display: none;
	}
	#header-menu.active {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #0277BD;
		z-index: 3;
	}
	#header-menu .menu {
		margin-top: 30px;
	}
	#header-menu .menu li {
		display: block;
		width: 80%;
		text-align: left;
		border-bottom: 1px solid #ccc;
	}
	#header-menu .menu li a {
		padding: 12px 0 12px 0;
		display: block;
		opacity: 1;
	}
	.admin-bar #header-menu .menu {
		margin-top: 73px;
	}
}
@media(max-width:500px) {
	#header-menu .menu li {
		width: 70%;
	}
}

/* ----- hamburger menu ----- */
#hamburger {
  display: none;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: #fff;
  border: 0;
  margin: 0 15px 0 0;
  overflow: visible;
	padding-top: 8px;
	float: right;
	z-index: 3;
	border-radius: 3px;
	position: relative;
}
#hamburger:hover {
    opacity: 0.7;
}
#hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative;
}
#hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
#hamburger-inner, #hamburger-inner::before, #hamburger-inner::after {
  width: 30px;
  height: 4px;
  background-color: #0277BD;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
#hamburger-inner::before, #hamburger-inner::after {
  content: "";
  display: block;
}
#hamburger-inner::before {
  top: -10px;
}
#hamburger-inner::after {
  bottom: -10px;
}
#hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#hamburger-inner::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
#hamburger-inner::after {
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#hamburger.active #hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
#hamburger.active #hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
#hamburger.active #hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (max-width:768px) {
	#hamburger {
		display: inline-block;
	}
}

/* ----- footer ----- */
#footer {
	text-align: center;
	font-size: 13px;
	margin-top: 45px;
	padding-bottom: 30px;
}
#footer-widgets {
	text-align: left;
	border-bottom: 2px solid #ddd;
	padding-bottom: 30px;
	margin-bottom: 30px;
	font-size: 14px;
}
#footer .menu li {
	display: inline;
	list-style: none;
	margin: 0 6px;
}
#footer .menu li a {
	font-size: 14px;
}
#footer .sub-menu {
	display: none;
}
@media (max-width:768px) {
	#footer .menu li {
		display: block;
		margin-bottom: 5px;
	}
}

/* ----- post teasers ----- */
.teaser {
	position: relative;
	margin-bottom: 45px;
}
.teaser a {
	color: #fff;
}
.teaser a:hover {
	opacity: 1;
}
.teaser:before {
	content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  background-color: #fff;
  top: 10px;
  left: 0;
}
.teaser-title {
	font-size: 18px;
	margin: 0 0 10px 0;
}
.teaser-title span {
	position: relative;
	z-index: 2;
  background-color: #01579B;
}
.teaser-title span:first-child {
	padding-right: 10px;
}
.teaser-title span:last-child {
	float: right;
	padding-left: 10px;
	font-size: 12px;
}
.teaser-excerpt p {
	margin-top: 0;
	font-size: 14px;
	opacity: 0.7;
	color: #fff;
}
@media (max-width:768px) {
	.teaser {
		margin-bottom: 30px;
	}
	.teaser:before {
		display: none;
	}
	.teaser-title span:first-child {
		float: left;
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}
	.teaser-title span:last-child {
		float: left;
		clear: both;
		display: block;
		width: 100%;
		padding-left: 0;
	}
}

/* ----- sticky posts ----- */
.sticky {
	padding: 30px;
	margin-bottom: 45px;
	border-radius: 2px;
	background-color: #01579B;
}
.sticky .teaser {
	margin-bottom: 0;
}
.sticky .teaser-title span {
	background-color: #0277BD;
}
.sticky .teaser-excerpt p {
	margin-bottom: 0;
	color: #fff;
}
@media (max-width:768px) {
	.sticky {
		margin-bottom: 30px;
		padding: 5px 15px 10px 15px;
	}
}

/* ----- posts pager ----- */
.nav-links {
	margin-top: 80px;
	text-align: center;
	font-size: 14px;
}
.nav-links  .page-numbers {
	background-color: #eee;
	border: 1px solid #ddd;
	padding: 3px 9px;
	color: #333;
}
.nav-links  .current {
	font-weight: bold;
	background-color: #aaa;
	border-color: #999;
}

/* ----- single post & page ----- */
#single-content, #single-content a {
	color: #333;
}
#single-content h1, #single-content h2, #single-content h3, #single-content h4, #single-content h5, #single-content h6 {
	color: #000;
}
article h1, article h2, article h3, article h4, article h5, article h6 {
	margin-top: 0;
	margin-bottom: 25px;
}
article h1 {
	font-size: 36px;
}
article h2 {
	font-size: 28px;
}
article h3 {
	font-size: 24px;
}
article h4 {
	font-size: 20px;
}
article h5 {
	font-size: 16px;
}
article h6 {
	font-size: 16px;
	text-transform: uppercase;
}
article p {
	margin-bottom: 25px;
	line-height: 1.6em;
}
article li {
	margin-bottom: 5px;
	line-height: 1.6em;
}
article img {
	max-width: 100%;
	height: auto;
	display: block;
}
article figure {
	max-width: 100%;
	margin: 0;
}
article .attachment-post-thumbnail {
	margin: auto;
}
#single-title {
	text-align: center;
	margin-bottom: 45px;
	font-size: 14px;
}
#single-title h1 {
	margin-bottom: 5px;
	color: #fff;
}
#single-title span:last-of-type {
	display: none;
}
#single-title-meta {
	opacity: 0.7;
	color: #fff;
}
#single-content {
	background-color: #fff;
	padding: 10px 30px 30px 30px;
}
#post-tags {
	margin: 0;
	padding: 20px 0 0 0;
	float: left;
	width: 100%;
}
#post-tags li {
	list-style: none;
	display: inline;
	font-size: 14px;
	margin-right: 10px;
}
@media (max-width:768px) {
	#single-title h1 {
		font-size: 26px;
	}
	#single-content {
		padding: 10px;
	}
}

/* ----- comments ----- */
#comments-title {
	margin-top: 60px;
}
#comments {
	padding-left: 0;
}
#comments li {
	list-style: none;
	margin-bottom: 40px;
}
#comments .children {
	margin-top: 40px;
}
#comments .comment-author {
	font-size: 14px;
}
#comments .comment-author a {
	position: relative;
	top: -3px;
}
#comments .comment-author img {
	float: left;
	margin-right: 10px;
}
#comments .bypostauthor .comment-author img {
	border: 2px solid #999;
}
#comments .comment-author span {
	display: none;
}
#comments .comment-content p {
	font-size: 15px;
}
#comments .comment-metadata {
	font-size: 12px;
}
#comments .reply {
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: underline;
}

/* ----- comment form ----- */
#respond .comment-notes {
	font-size: 14px;
	width: 100%;
}
#respond .comment-form label {
	font-size: 14px;
}
#respond .comment-form-comment textarea {
	width: 97%;
}
#respond .comment-form-comment label {
	display: none;
}
#respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment {
	width: 60%;
}
#respond .comment-form-author input, #respond .comment-form-email input, #respond .comment-form-url input {
	float: right;
	width: 75%;
}
#respond .form-submit {
	margin-top: 30px;
}
@media(max-width:768px) {
	#respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment {
		width: 80%;
	}
}
@media(max-width:460px) {
	#respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment {
		width: 100%;
	}
}

/* ----- wordpress elements ----- */
.screen-reader-text  {
	display: none;
}
.alignleft {
	float: left;
	margin: 0 30px 10px 0;
}
.alignright {
	float: right;
	margin: 0 0 10px 30px;
}
.aligncenter {
	float: none;
}
.wp-caption img {
	margin-bottom: 0;
}
.wp-caption-text {
	font-size: 14px;
	font-style: italic;
	opacity: 0.7;
}
.gallery {
	width: 100%;
	display: inline-block;
}
.gallery-caption {
	max-width: 100%;
}
.gallery-item {
	display: inline-block;
	margin: 5px;
}