@import url(./css/font-awesome.min.css);
@import url(./css/animate.css);

html {font-size: 1.125em;}

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  overflow-x: hidden;
}

p {margin-bottom: 1.3em;}

h1, h2, h3, h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
}

h1 {
  margin-top: 0;
  font-size: 3.157em;
}

h2 {font-size: 2.369em;}

h3 {font-size: 1.777em;}

h4 {font-size: 1.333em;}

small, .font-small {font-size: 0.75em;}

strong, b { font-weight: 600; }

body.home { background: #333; }

a { color: #f15656; }
a.icon { border: 0 !important; }

.red-text { color: #f15656; }
.red-background { background: #f15656; }
.red-background.bg-hover:hover { background: #cc4343; }

.weight-light { font-weight: lighter; }
.weight-normal { font-weight: normal; }
.weight-bold { font-weight: bold; }

nav.nav {
  background: none;
  box-shadow: none;
  height: auto;
  line-height: 1;
  display: inline-block;
  width: auto;
}

.transition {
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}

.icon-link {
  border: 0 !important;
}

.full { width: 100%; }

.no-margin { margin: 0 !important; }

.thumbnail { box-shadow: 1px 1px 3px #666; }

body:not(.home) .visible-on-home { display: none; }
.home .hide-on-home { display: none; }
body:not(.single) .visible-on-single { display: none; }
body.single .hide-on-single { display: none; }

main {
  position: relative;
  z-index: 10
}

.sidebar-widget:first-child h3 { margin-top: 0; }

/*======================================================== MAIN HEADER ======================================================== */
#main-header {
  position: relative;
  z-index: 11;
}
body:not(.home):not(.single) #main-header {
  margin-bottom: 20em;
}
#main-header .logo {
  bottom: 20px;
  right: 0;
  padding: 0 2em;
}
#main-header .logo a {
  float: left;
  width: 100%;
}
#main-header .logo img {
  max-width: 600px;
  width: 100%;
  opacity: .4;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#main-header .logo a:hover img {
  opacity: .8;
}

nav#main-nav {
  float: left;
  width: 100%;
}
nav#main-nav > .container > .wrap {
  float: left;
  width: 100%;
  margin: 2em 0 0;
}
nav#main-nav .nav-area { margin: 15px 0 0; }
nav#main-nav .nav-area ul li a {
  background: none;
  color: #222;
  font-size: 110%;
  padding-bottom: 45px;
  font-weight: lighter;
  text-transform: uppercase;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}
nav#main-nav .logo-area { margin: 8px 0; }
nav#main-nav .nav-area > ul {
  float: left;
  width: 100%;
}
nav#main-nav .hover {
  position: absolute;
  left: 0;
  height: 2px;
  background: #f15656;
  width: 0;
  top: 112px;
  display: none;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}
nav#main-nav .hover.active {
  display: block;
}
body.home .hover { display: none; }

#main-nav li.current-menu-item a, #nav#main-nav li.current_page_item a, nav#main-nav li.current_page_parent a, nav#main-nav .nav-area ul li a:hover  {
  color: #f15656 !important;
}

/*======================================================== HAMBURGER ======================================================== */
#main-hamburger .hamburger {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 3;
  background: url(./img/icon-logo_r-bg.png) no-repeat 50% / 100%;
  border: 0;
  color: #fff;
  line-height: 1;
  padding: 0;
  -webkit-transition: color .3s ease;
  -moz-transition: color .3s ease;
  -o-transition: color .3s ease;
  transition: color .3s ease;
}
#main-hamburger .hamburger img {
  max-width: 25px;
  opacity: 1;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
#main-hamburger.active .hamburger img, #main-hamburger .hamburger:hover img { opacity: 0; }
#main-hamburger:before, #main-hamburger:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  z-index: 2;
}
#main-hamburger.active:before, #main-hamburger.active:after {
  opacity: 1;
}
#main-hamburger:before {
  right: 47px;
  top: 37px;
  -webkit-transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -moz-transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -o-transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#main-hamburger.active:before {
  width: 500px;
  height: 470px;
  right: -80px;
  top: -80px;
}
#main-hamburger:after {
 right: 47px;
 top: 37px;
 -webkit-transition: .8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 -moz-transition: .8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 -o-transition: .8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 transition: .8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#main-hamburger.active:after {
  width: 520px;
  height: 450px;
  right: -90px;
  top: -80px;
}
#main-hamburger .menu {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 30px;
  right: 110px;
  z-index: 3;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
#main-hamburger.active .menu {
  visibility: visible;
  opacity: 1;
}
#main-hamburger .menu ul {
  float: left;
  width: 100%;
  padding-right: 2em;
  border-right: 1px solid rgba(221, 221, 221, 0.3);
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
#main-hamburger.active .menu ul {
  opacity: 1;
}
#main-hamburger .menu ul li {
  float: right;
  clear: both;
}
#main-hamburger .menu ul li:not(:last-child):after {
  content: "";
  background: rgba(221, 221, 221, 0.3);
  display: block;
  height: 1px;
  width: 70px;
  float: right;
  clear: both;
  margin: 14px 0;
  -webkit-transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -moz-transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -o-transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#main-hamburger .menu ul li:hover:after {
  width: 100px;
  background: #f15656;
}
#main-hamburger .menu ul li a {
  position: relative;
  left: 50%;
  opacity: 0;
  color: #ddd;
  background: none;
  font-weight: lighter;
  font-size: 150%;
  text-align: right;
}
#main-hamburger.active .menu ul li a {
  left: 0;
  opacity: 1;
}
#main-hamburger .menu ul li:nth-child(2) a {
  -webkit-transition: left .45s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .45s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .45s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .45s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li:nth-child(3) a {
  -webkit-transition: left .5s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .5s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .5s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li:nth-child(4) a {
  -webkit-transition: left .55s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .55s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .55s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .55s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li:nth-child(5) a {
  -webkit-transition: left .65s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .65s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .65s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .65s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li:nth-child(6) a {
  -webkit-transition: left .7s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .7s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .7s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .7s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li:nth-child(7) a {
  -webkit-transition: left .76s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .76s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .76s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .76s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li:nth-child(8) a {
  -webkit-transition: left .8s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -moz-transition: left .8s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  -o-transition: left .8s cubic-bezier(0, 0, 0.2, 1), opacity 2s ease;
  transition: left .8s cubic-bezier(0.18, 0.89, 0.32, 1.28), color .3s ease;
}
#main-hamburger .menu ul li a:hover { color: #f15656; }

/*======================================================== SIDEBAR ======================================================== */
#recent-posts ul li { margin: 10px 0; }
#recent-posts ul li a {}
#recent-posts ul li img {
	border-radius: 100%;
	box-shadow: 1px 1px 2px #b3b3b3;
}
#recent-posts ul li span {
	display: inline-block;
	margin: 3px 0;
}

#recentcomments li:before {
	content: "\e315";
	font-family: material icons;
}

#search-form form { position: relative; }
#search-form input { margin: 0; }
#search-form button {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	color: #ccc;
	border: 0;
	font-size: 0;
	height: 99%;
	width: 50px;
}
#search-form button:before {
	content: "\e8b6";
	font-family: material icons;
	font-size: 20px;
}

/*======================================================== RANDOM POSTS ======================================================== */
article.random-post {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  opacity: 1;
  visibility: visible;
  z-index: 1;
  -webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
  -webkit-transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
  transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
}
article.random-post:after {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
article.random-post.anim-out {
  opacity: 0;
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
  visibility: hidden;
}

article.random-post .post-content {
  position: relative;
  opacity: 1;
  color: #fff;
  margin-left: 10%;
  margin-right: 5em;
  margin-top: 60px;
  margin-bottom: 3em;
  max-width: 600px;
  -webkit-transition: .4s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: .4s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition: .4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: .4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
article.random-post.anim-out .post-content {
	opacity: 0;
}
article.random-post .post-content .the-content {
  font-size: 130%;
  font-weight: normal;
  text-shadow: 1px 1px 3px #000000c9;
  line-height: 1;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  -webkit-transition: .2s ease, left 2s ease;
  -moz-transition: .2s ease, left 2s ease;
  -o-transition: .2s ease, left 2s ease;
  transition: .2s ease, left 2s ease;
}
article.random-post .post-content .the-content:hover, article.random-post .post-content.active .the-content { border-color: rgba(255, 255, 255, .3); }
article.random-post .post-content .the-content p {
  margin: 0;
  margin-bottom: 1em;
  line-height: 30px;
}
article.random-post .post-content .the-meta {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}
article.random-post .post-content.active .the-meta {
  visibility: visible;
  opacity: 1;
}
article.random-post .post-content .the-meta small {
  position: relative;
  display: inline-block;
  max-width: 140px;
  font-weight: lighter;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 6px 20px 0 0;
}
article.random-post .post-content .the-meta small.tags { max-width: 100%; }
article.random-post .post-content .the-meta small.custom-fields {
  float: right;
  margin: 0;
}
article.random-post .post-content .the-meta small.custom-fields a {
  float: left;
  padding: 5px;
}
article.random-post .post-content .the-meta small a.icon-link:hover {
  color: white;
}
.random-post small.tags:before {
  content: "\f02c";
  font-family: fontawesome;
  display: inline-block;
  margin-right: 4px;
}
article.random-post .post-content .the-meta a, article.random-post .post-content small { color: #eee; }
article.random-post .post-content .the-meta a:hover {
  border-bottom: 1px solid;
}
@media(max-width: 500px){
	article.random-post .post-content .the-content { font-size: calc(80% + 1vw); }
	article.random-post .post-content .the-content p { line-height: 25px; }
}
.random-post small.comments:before {
  content: "\f0e6";
  font-family: fontawesome;
  display: inline-block;
  margin-right: 4px;
}
small.comments .comments-list {
  position: absolute;
  top: 20px;
  left: 0;
  width: 300px;
  color: #ccc;
}
small.comments .comments-list span {
  display: block;
  line-height: 14px;
  font-style: italic;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.nav-right {
  top: 40vh;
  right: 0;
}
.nav-right button {
  line-height: 1;
  width: auto;
  margin: 0;
  padding: 0 20px 0 10px;
  height: 100px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
}
.nav-right button:hover {
  padding: 0 30px 0 10px;
}
.nav-right button:hover i {
  animation: loader 2s ease;
}

.share .icon { margin: 0 3px; }

/*======================================================== CONTENT PAGES ======================================================== */
.main > .container {}
#hero-header {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}
.hero-title {
 position: absolute;
 top: -80px;
 color: #222;
}
a.post-edit-link {
  float: right;
  height: 0;
  font-size: 0;
}
a.post-edit-link:before {
  content: "\f044";
  font-family: fontawesome;
  font-size: 12px;
}

.st-tag-cloud a {
	display: inline-block;
	line-height: 1;
	margin: 0 10px;
	border-bottom: 2px solid transparent;
	-webkit-transition: .3s cubic-bezier(0, 0, 0.2, 1);
	-moz-transition: .3s cubic-bezier(0, 0, 0.2, 1);
	-o-transition: .3s cubic-bezier(0, 0, 0.2, 1);
	transition: .3s cubic-bezier(0, 0, 0.2, 1);
}
.st-tag-cloud a:hover {
	color: #f15656 !important;
	border-color: inherit;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}

/*======================================================== SINGLE POST ======================================================== */
body:not(.home) #main-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
body:not(.home):not(.single) #main-nav { background: rgba(255, 255, 255, 0.15); }
.single-post #main-nav { background: rgba(0, 0, 0, 0.15); }
.single-post nav#main-nav .nav-area ul li a { color: white; }
#single .attachment-post-thumbnail { width: 100%; }
.single-post-content {}
.single-post-content {
  height: 100vh;
  padding: 10em 0 5em
}
.single-post-content h1 {
	text-shadow: 1px 1px 3px #000;
	margin: 0;
}
.details-area {
	margin-bottom: 40px;
	background: rgba(0, 0, 0, 0.15);
	padding: 3px 20px 5px 20px;
	border-radius: 50px;
}
.single .post-details { display: inline-block; }
.single .post-details:not(:last-child):after {
	content: " | ";
}
.single .post-details, .single .post-details span, .single .post-details a {
	color: #eee;
}
.post-details a:not(.icon) {
	border-bottom: 1px solid;
}
.post-details .icon { margin-left: 5px;	 }
.detail-meta span:last-child { display: none; }
.single .content p {
	margin: 15px 0;
	text-shadow: 1px 1px 1px #5a5a5a;
}

/*======================================================== COMMENTS ======================================================== */
.comments-area {
  width: 100%;
}
.comments-area > .container > .wrap {}
li.comment ul.children {
  margin-left: 4em;
}
.comments > ul > li.comment {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid #eee;
  padding: 1em;
}
.comments .comment-body { margin-bottom: 2em; }
.comments .comment-body > header {
  border-bottom: 1px dotted #eee; 
}
.comments .comment-author img {
  border-radius: 100%;
  box-shadow: 1px 1px 3px #888;
  max-width: 25px;
  max-height: 25px;
}
.comments .comment-text p {
  margin: 10px 10px 0;
  font-weight: lighter;
  font-size: 110%;
}
.comments .submit.btn { min-height: 60px; }
#respond {
  max-width: 700px;
  margin: auto;
}
.comment-form-author, .comment-form-email {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}
.comment-form-author { margin-right: 2%; }
.comment-form-email { margin-left: 2%; }
textarea#comment {
  height: 10em;
  padding: 1em;
}

body:not(.single) .post-details {
	display: block;
	margin: 6px 0 20px;
}
body:not(.single) .post-details span, body:not(.single) .post-details a {
	color: #999;
	border-color: #ddd;
}

/*======================================================== LATEST POSTS PAGE ======================================================== */

#latest-posts .post p {
  margin: 0;
  margin-bottom: 10px;
  line-height: 20px;
}
#latest-posts article.post {}
#latest-posts article.post:after {
  content: "";
  display: block;
  background: #EEE;
  width: 60%;
  height: 1px;
  margin: 50px auto;
}
a.view-article {
	display: block;
	margin-top: 1em;
}

/*======================================================== MAIN FOOTER ======================================================== */
.home #main-footer { display: none; }
#main-footer {
  float: left;
  width: 100%;
}