/* Global */

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: "Rufina", serif;
    font-size: 18px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Helpers */

*, *:before, *:after {
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
}

a { text-decoration: none; cursor: inherit; color: inherit; }

hr {
    border: 0;
    height: 1px;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.none { display: none!important; }

/* Chrome Font Bug */
body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

/* Reset */

h1, h2, h3, h4, p, blockquote, a, cite, code, em, img, q, small, strike, strong, sub, sup, b, u, i {
	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; }

ul,ol,li { list-style-type: none; margin: 0; padding: 0;}

/* Normalize for inputs etc. */

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}


button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Wrap */

.wrap-lg { 
    width: 1020px;
    margin: auto;
}
.wrap-md { 
    width: 860px;
    margin: auto;
}
.wrap-sm { 
    width: 700px;
    margin: auto;
}
.wrap-xs { 
    width: 540px;
    margin: auto;
}


/* Title */

.hero { 
    padding-top: 72px;
    color: #fff;
}

.hero .profile img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    float: left;
}

.hero .profile h1 {
    font: 700 14px/14px "Raleway";
    text-transform: uppercase;
    padding-top: 17px;
    margin-left: 80px;
}

.hero .profile  {
    margin-bottom: 64px;
}

.hero p.blog-desc {
    font: 700 24px/48px "Rufina";
    padding-right: 300px;
    margin-bottom: 67px;
}

.hero .buttons {
    margin-bottom: 72px;
    cursor: default;
}

.hero .buttons a {
    background: #fff;
    border-radius: 3px;
    height: 24px;
    display: inline-block;
    padding-right: 5px;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
    cursor: pointer;
}

.hero .buttons a:active {
    position: relative;
    top: 1px;
}
.hero .buttons a:hover {
    opacity: .85;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

.hero .buttons a.website {
    font: 700 12px/12px "Raleway";
    text-transform: uppercase;
    padding: 6px 12px 6px 12px;
}

.hero .buttons a.fa {
    width: 24px;
    font: 400 14px "FontAwesome";
    padding: 5px 0;
    text-align: center;
    vertical-align: -1px;
}

/* hero end */

/* navigation */

nav {
    font-size: 14px;
    font: 700 14px/12px "Raleway";
    text-transform: uppercase;
    padding: 19px 25px 15px;
    height: 48px;
    overflow: hidden;
}

nav ul.left {
    width: 80%;
    float: left;
}

nav ul.left li {
    float: left;
    margin-right: 20px;
}

/* Search */

nav ul li.search {
    margin-left: 8px;
    margin-right: 18px;
    margin-top: -2px;
    width: 30px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}

nav ul li.search.on {
    margin-right: 32px;
    width: 201px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}

nav ul li.search:active {
    top: 0;
}
nav ul li.search:hover {
    opacity: 1;
}

nav li.search .fa.fa-search {
    float: left;
    cursor: pointer;
    padding: 12px;
    margin-top: -12px;
    margin-left: -12px;
}

nav li.search.on .fa.fa-search {
    display: none;
}

nav li.search form {
    margin-top: -11px;
    width: 0;
    overflow: hidden;
}

nav li.search.on form {
    width: auto;
}

nav li.search form input:nth-of-type(1)  {
    font-weight: 400;
    height: 36px;
    border: 0;
    padding-left: 20px;
    padding-left: 20px;
    border-radius: 3px;
    width: 0px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    -webkit-transition: width .4s, opacity .4s ease;
    -moz-transition: width .4s, opacity .4s ease;
    transition: width .4s, opacity .4s ease;
}

nav li.search.on form input:nth-of-type(1)  {
    width: 160px;
    opacity: 1;
    -webkit-transition: width .4s, opacity .4s ease;
    -moz-transition: width .4s, opacity .4s ease;
    transition: width .4s, opacity .4s ease;
}

nav li.search form input:focus {
    outline: none;
}

nav li.search form input:nth-of-type(2)  {
    font: normal 14px/24px "FontAwesome";
    background: none;
    border: 0;
    margin-left: 5px;
    height: 36px;
    padding-left: 12px;
    padding-right: 11px;
    float: right;
}

/*  */


nav ul.right {
    float: right;
    width: 20%;
    text-align: right;
    cursor: default;
    opacity: .8;
}

nav ul.right li {
    margin-top: -2px;
    margin-left: 10px;
}

nav ul.right a { cursor: pointer; }

nav ul li {
    opacity: 1;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}
nav ul li:active {
    position: relative;
    top: 1px;
}
nav ul li:hover {
    opacity: .8;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

nav i { display: none }

/* posts */

main.posts {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

article {
    padding-top: 71px;  
}

article.text .post-info {
    margin-bottom: 11px;
}

article .post-info {
    margin-bottom: 20px;
}

article .post-info .like_button {
    float: left;
    margin-left: 32px;
    margin-right: 32px;
}

article .post-info {
    font: 400 12px "Raleway";
    text-transform: uppercase;
}

article .caption h2,
article.text h1 {
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

article.text h1:hover {
    opacity: .75;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

article.text h1 {
    font: 700 30px / 48px "Rufina";
    margin-bottom: 9px;
}

article .caption h2 {
    font: 700 24px/36px "Rufina";
    margin-top: -2px;
    margin-bottom: 14px;
}

article .caption p {
    line-height: 36px;
    margin-bottom: 24px;
}

article .caption p b {
    font-weight: 700;
}

article .caption p i {
    font-style: italic;
}

article .caption a {
    opacity: 1;
    transition: opacity .2s ease;
}

article .caption blockquote {
    display: inline-block;
    line-height: 36px;
    margin-bottom: 24px;
    padding-left: 32px;
    margin-left: 28px;
}

article .caption hr {
    margin: 59px auto 48px auto;
    width: 60px;
}

article .caption figure img {
    display: block;
    max-width: 100%;
    margin: 48px auto 48px auto;
    border-radius: 3px;
}

article .caption a:active {
    position: relative;
    top: 1px;
}
article .caption a:hover {
    opacity: .6;
    -webkit-transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

article .caption ul,
article .caption ol {
    margin-bottom: 24px;
    padding-left: 60px;
}

article .caption ul li {
    list-style-type: disc;
}
article .caption ol li {
    list-style-type: decimal;
}


article .caption li
{ line-height: 36px; }

article .caption a.more {
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 24px;
    display: block;
    text-align: center;
}

article .caption a.more:active {
    position: relative;
    top: 1px;
}
article .caption a.more:hover {
    opacity: .5;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

article ul.tags {
    margin-top: -6px;
    margin-bottom: 26px;
    color: #4d5458;
    cursor: default;
}

article ul.tags:before {
    content: "\f02b";
    font: 400 14px / 24px "FontAwesome";
    opacity: .45;
    margin-right: 20px;
    height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

article ul.tags:after {
    content: "";
    clear: both;
    display: table;
}

article ul.tags li {
    display: inline-block;
    font: 400 12px / 24px "Raleway";
    text-transform: uppercase;
    margin-right: 6px;
    opacity: .45;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
article ul.tags li:hover {
    opacity: .25;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
article ul.tags li:active {
    position: relative;
    top: 1px;
}

article ul.tags li a {
    cursor: pointer;
}

article a.more-plink {
    display: block;
    width: 41px;
    margin: auto;
    margin-bottom: 22px;
    padding: 0 10px 6px 10px;
}

article a.more-plink i {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    -webkit-transition: background .3s ease;
    -moz-transition: background .3s ease;
    transition: background .3s ease;
}
article a.more-plink i:nth-of-type(2) {
    margin-left: 3px;
    margin-right: 3px;
}
article a.more-plink:hover i {
    -webkit-transition: background .3s ease;
    -moz-transition: background .3s ease;
    transition: background .3s ease;
}
article a.more-plink:active i {
    position: relative;
    top: 1px;
}

/* Photo */

article.photo .photo {
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}

article.photo .photo img {
    max-width: 100%;
    display: block;
    margin: auto;
    border-radius: 3px;
}

.photo .exif-icon {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .65;
    z-index: 1;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
.photo .exif-icon:hover {
    opacity: .8;
    width: 100%;
    background-position: right 16px center;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.photo .exif-info {
    position: absolute;
    width: 100%;
    height: 48px;
    color: #fff;
    top: -48px;
    right: 0;
    opacity: 0;
    text-align: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font: 400 18px/24px "Rufina";
    color: rgba(255,255,255,.8);
    padding-top: 12px;
    -webkit-transition: top .3s cubic-bezier(0.19, 1, 0.22, 1),
                opacity .25s ease;
    -moz-transition: top .3s cubic-bezier(0.19, 1, 0.22, 1),
                opacity .25s ease;
    transition: top .3s cubic-bezier(0.19, 1, 0.22, 1),
                opacity .25s ease;
}

.photo .exif-info.on {
    opacity: 1;
    top: 0;
    -webkit-transition: top .3s cubic-bezier(0.19, 1, 0.22, 1),
                opacity .25s ease;
    -moz-transition: top .3s cubic-bezier(0.19, 1, 0.22, 1),
                opacity .25s ease;
    transition: top .3s cubic-bezier(0.19, 1, 0.22, 1),
                opacity .25s ease;
}

.photo .exif-info p {
    display: inline-block;
    position: relative;
    top: -20px;
    opacity: 0;
    -webkit-transition: top .15s cubic-bezier(0.19, 1, 0.22, 1) .075s,
                opacity .10s ease;
    -moz-transition: top .15s cubic-bezier(0.19, 1, 0.22, 1) .075s,
                opacity .10s ease;
    transition: top .15s cubic-bezier(0.19, 1, 0.22, 1) .075s,
                opacity .10s ease;
}
.photo .exif-info p.cam { margin-right: 14px; }
.photo .exif-info p.ape { min-width: 62px; margin-right: 20px; text-align: left; }
.photo .exif-info p.exp { min-width: 65px; margin-right: 20px; text-align: left; }
.photo .exif-info p.foc { min-width: 90px; text-align: left; }

.photo .exif-info.on p {
    top: 0;
    opacity: 1;
    -webkit-transition: top .15s cubic-bezier(0.19, 1, 0.22, 1) .075s,
                opacity .10s ease;
    -moz-transition: top .15s cubic-bezier(0.19, 1, 0.22, 1) .075s,
                opacity .10s ease;
    transition: top .15s cubic-bezier(0.19, 1, 0.22, 1) .075s,
                opacity .10s ease;
}

.photo .exif-info p:after {
    display: block;
    position: absolute;
    text-align: left;
    width: 100%;
    top: 0;
    font: 700 12px/12px "Raleway";
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: opacity .3s, top .3s ease;
    -moz-transition: opacity .3s, top .3s ease;
    transition: opacity .3s, top .3s ease;
}

.photo .exif-info.on p.cam {
    -webkit-animation: detail .3s ease .5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: detail .3s ease .5s;
    -moz-animation-fill-mode: forwards;
    animation: detail .3s ease .5s;
    animation-fill-mode: forwards;
}
.photo .exif-info.on p.ape {
    -webkit-animation: detail .3s ease .65s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: detail .3s ease .65s;
    -moz-animation-fill-mode: forwards;
    animation: detail .3s ease .65s;
    animation-fill-mode: forwards;
}
.photo .exif-info.on p.exp {
    -webkit-animation: detail .3s ease .8s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: detail .3s ease .8s;
    -moz-animation-fill-mode: forwards;
    animation: detail .3s ease .8s;
    animation-fill-mode: forwards;
}
.photo .exif-info.on p.foc {
    -webkit-animation: detail .3s ease .95s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: detail .3s ease .95s;
    -moz-animation-fill-mode: forwards;
    animation: detail .3s ease .95s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes detail {
    0% { top: 0; }
    100% { top: -8px; }
} @-moz-keyframes detail {
    0% { top: 0; }
    100% { top: -8px; }
} @keyframes detail {
    0% { top: 0; }
    100% { top: -8px; } }

.photo .exif-info.on p.cam:after {
    top: 25px;
    opacity: .65;
    -webkit-transition: opacity .3s ease .5s, top .3s ease .5s;
    -moz-transition: opacity .3s ease .5s, top .3s ease .5s;
    transition: opacity .3s ease .5s, top .3s ease .5s;
}
.photo .exif-info.on p.ape:after {
    top: 25px;
    opacity: .65;
    -webkit-transition: opacity .3s ease .65s, top .3s ease .65s;
    -moz-transition: opacity .3s ease .65s, top .3s ease .65s;
    transition: opacity .3s ease .65s, top .3s ease .65s;
}
.photo .exif-info.on p.exp:after {
    top: 25px;
    opacity: .65;
    -webkit-transition: opacity .3s ease .8s, top .3s ease .8s;
    -moz-transition: opacity .3s ease .8s, top .3s ease .8s;
    transition: opacity .3s ease .8s, top .3s ease .8s;
}
.photo .exif-info.on p.foc:after {
    top: 25px;
    opacity: .65;
    -webkit-transition: opacity .3s ease .95s, top .3s ease .95s;
    -moz-transition: opacity .3s ease .95s, top .3s ease .95s;
    transition: opacity .3s ease .95s, top .3s ease .95s;
}
.photo .exif-info p.cam:after { content: "camera"; }
.photo .exif-info p.ape:after { content: "aperture"; }
.photo .exif-info p.exp:after { content: "exposure"; }
.photo .exif-info p.foc:after { content: "focal length"; }

.photo .photoset-grid {
    margin-bottom: 35px;
}

/* Quote Post */

.quote { text-align: center; }

.quote .post-info,
.chat .post-info {
    text-align: center;
    position: relative;
    left: -25px;
    margin-top: -1px;
    margin-bottom: 22px;
}

.quote .post-info .like_button,
.chat .post-info .like_button {
    display: inline-block;
    float: none;
    vertical-align: -2px
}

.quote q { 
    font-size: 30px;
    font-weight: 700;
    line-height: 48px;
    display: block;
    margin-bottom: 21px;
}
.quote q:before { 
    content: "\201C";
    vertical-align: 2px;
    margin-right: 5px;
}
.quote q:after { 
    content: "\201D";
    margin-left: 5px;
}

.quote .author {
    display: inline-block;
    font: 400 14px / 36px "Raleway";
    text-transform: uppercase;
    margin-bottom: 36px;
}

.quote .author:before {
    content: "\007E";
    margin-right: 5px;
}


/* Chat Post */

.chat .caption h2 {
    margin-bottom: 26px;
    width: 100%;
    text-align: center;
}
.chat ul.tags { margin-top: 6px; } 
.chat .post-info {
    margin-bottom: 21px;
}

.chat .bubble {
    display: inline-block;
    border-radius: 3px;
    padding: 12px 30px;
    margin-bottom: 24px;
    font-weight: 700;
    line-height: 36px;
    clear: both;
    max-width: 85.714286%;
}
.chat .bubble.odd {
    float: left;
}
.chat .bubble.even {
    color: #fff;
    float: right;
}

.chat .bubble span {
    font: 700 14px "Raleway";
    text-transform: uppercase;
    margin-right: 6px;
}
.chat .bubble.odd span {
    opacity: .4;
}
.chat .bubble.even span {
    opacity: .8;
}


/* Link Post */


.link a.wrap-xs {
    display: block;
    color: #fff;
    border-radius: 3px;
    padding: 20px 30px 17px 30px;
    font: 700 18px/36px "Raleway";
    margin-bottom: 35px;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: padding .2s ease;
    -moz-transition: padding .2s ease;
    transition: padding .2s ease;
    position: relative;
}

.link a.wrap-xs:before {
    content: "\f0c6";
    display: block;
    height: 72px;
    width: 72px;
    font: normal 28px/72px "FontAwesome";
    position: absolute;
    top: 0;
    left: -72px;
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    transition: opacity .2s ease;
    pointer-events: none;
}
.link a.wrap-xs:hover:before {
    opacity: 1;
    -webkit-transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.link a.wrap-xs:hover {
    padding: 13px 30px 0px 30px;
    -webkit-transition: padding .2s ease;
    -moz-transition: padding .2s ease;
    transition: padding .2s ease;
}

.link a.wrap-xs span {
    display: block;
    font: 400 12px/24px "Raleway";
    text-transform: none;
    opacity: .75;
    position: relative;
    top: 0;
    height: 0px;
    opacity: 0;
    -webkit-transition: top .2s ease, height .2s ease, opacity .2s ease;
    -moz-transition: top .2s ease, height .2s ease, opacity .2s ease;
    transition: top .2s ease, height .2s ease, opacity .2s ease;
}

.link a.wrap-xs:hover span {
    position: relative;
    top: -12px;
    height: 24px;
    opacity: 1;
    -webkit-transition: top .2s ease, height .2s ease, opacity .2s ease;
    -moz-transition: top .2s ease, height .2s ease, opacity .2s ease;
    transition: top .2s ease, height .2s ease, opacity .2s ease;
}

/* Audio Post */

.audio .player iframe {
    width: 100%;
    max-height: 480px;
    display: block;
}

.audio .player {
    margin-bottom: 36px;
    max-height: 480px;
}

/* Video Post */

.video .player {
    margin-bottom: 36px;
}

.video .player iframe {
    display: block;
}

/* Answer Post */

.answer .question {
    max-width: 92.592593%;
    float: left;
    clear: both;
}

.answer .question .asker {
    margin-bottom: 24px;
    height: 48px;
    font: 700 14px/48px "Raleway";
    text-transform: uppercase;
    margin-left: 30px;
    margin-top: 1px;
}
.answer .question a.asker {
    margin: 0;
}

.answer .question .asker img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
}

.answer .question .asked {
    padding: 12px 30px;
    font-weight: 700;
    line-height: 36px;
    border-radius: 3px;
    margin-bottom: 24px;
}

.answer .answered {
    max-width: 92.592593%;
    float: right;
    clear: both;
    padding: 12px 30px;
    color: #fff;
    font-weight: 700;
    line-height: 36px;
    border-radius: 3px;
    margin-bottom: 33px;
}


/* Pagination */

.pagination {
    font: 700 14px / 48px "Raleway";
    text-transform: uppercase;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pagination a {
    display: block;
    width: 50%;
    padding: 12px 0;
}

.pagination a.prev {
    text-align: right;
    padding-right: 70px;
    border-bottom-left-radius: 3px;
    float: left;
}
.pagination a.prev:before {
    content: "\f104";
    font-family: "FontAwesome";
    padding-right: 5px;
}

.pagination a.next {
    text-align: left;
    padding-left: 70px;
    border-bottom-right-radius: 3px;
    float: right;
}
.pagination a.next:after {
    content: "\f105";
    font-family: "FontAwesome";
    padding-left: 5px;
}

/* Footer */

footer {
    padding: 24px 30px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}


footer .copy {
    float: left;
    max-width: 790px;
    margin-bottom: -6px;
}

footer .copy img {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 20px;
}
footer .copy span {
    vertical-align: 7px;
}

footer i {
    display: block;
    float: right;
    height: 24px;
    border-radius: 3px;
    background-color: #fff;
    padding: 4px 9px;
}
footer i:active {
    position: relative;
    top: 1px;
}

footer i:before {
    content: "Get this theme";
    font-family: "Raleway";
    text-transform: uppercase;
}

footer i:after {
    content: "\f107";
    font-family: "FontAwesome";
    padding-left: 5px;
    position: relative;
}
footer i:hover:after {
    -webkit-animation: dl 1.5s ease infinite;
}

#disqus_thread {
    padding: 74px 80px 67px 80px;
    background: #fff;
}

a.dsq-brlink {
    font: 400 14px / 24px "Raleway";
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin: auto;
}

article .caption h2.query {
    margin-top: -1px;
    margin-bottom: 61px;
    text-align: center;
}

article .caption h2.query .tag:before {
    content: "#";
}

article .caption h2.query .search_query:before {
    content: "\201C";
}
article .caption h2.query .search_query:after {
    content: "\201D";
}

#submit_form {
    margin-bottom: 16px;
}

/* Post Notes */

article a.more-plink.notes {
    margin-bottom: 23px;
    cursor: pointer;
}

.post-notes {
    height: 0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: height 1s cubic-bezier(.19,1,.22,1), opacity .8s ease;
    -moz-transition: height 1s cubic-bezier(.19,1,.22,1), opacity .8s ease;
    transition: height 1s cubic-bezier(.19,1,.22,1), opacity .8s ease;
}

.post-notes.on {
    height: 599px;
    opacity: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-transition: height 1s cubic-bezier(.19,1,.22,1), opacity .8s ease;
    -moz-transition: height 1s cubic-bezier(.19,1,.22,1), opacity .8s ease;
    transition: height 1s cubic-bezier(.19,1,.22,1), opacity .8s ease;
}

.post-notes ol.notes li {
    line-height: 36px;
}

.post-notes ol.notes li .avatar_frame img {
    border-radius: 50%;
    position: relative;
    top: 2px;
    margin-right: 10px;
}

.post-notes ol.notes li a.more_notes_link,
.post-notes ol.notes li span.notes_loading {
    color: #fff;
    padding: 6px 30px;
    border-radius: 3px;
    display: inline-block;
    margin: 24px auto 47px auto;
    font: 700 14px/24px "Raleway";
    text-transform: uppercase;
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.post-notes ol.notes li a.more_notes_link:active {
    position: relative;
    top: 1px;
}

.post-notes ol.notes li a.more_notes_link:hover {
    opacity: .6;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

/* 16:9 videos */

.video .player.wrap-sm {
    position: relative;
}

.video .player.wrap-sm img {
    display: block;
    width: 100%;
    height: auto;
}

.video .player.wrap-sm iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}


/* Responsive */


/*   ~ SMALLER DESKOTOPS ~   */

@media(min-width:1024px) and (max-width:1199px){
    .wrap-lg { width: 900px; }
    .wrap-md { width: 740px; }
    .hero p.blog-desc { padding-right: 160px; }
    footer .copy { max-width: 680px; }
}

@media(min-width:1024px) {
    article a.more-plink { position: relative; bottom: -24px; opacity: 0;
        transition: bottom .3s, opacity .25s, transform .3s;
        transition-timing-function: cubic-bezier(0.23,1,0.32,1);
        transform: scale(1.2); }
    article:hover a.more-plink { bottom: 0; opacity: 1;
        transition: bottom .18s, opacity .18s, transform .18s;
        transition-timing-function: cubic-bezier(0.23,1,0.32,1);
        transform: scale(1); }
}


/*   ~ TABLETS ~   */

@media(min-width:767px) and (max-width:1023px){
    .wrap-lg { width: 727px; }
    .wrap-md { width: 560px; }
    .hero p.blog-desc { padding-right: 40px; }
     main .wrap-md { width: 720px }
     main .wrap-sm { width: 670px }
     main .wrap-xs { width: 515px }
     article.photo.wrap-md { width: 670px; }
    footer .copy { max-width: 510px; }
}


/*   ~ SMALLER TABLETS ~   */

@media(min-width:600px) and (max-width:766px){
    .wrap-lg { width: 580px; }
    .wrap-md { width: 420px; }
    .hero p.blog-desc { padding-right: 0; }
    main .wrap-md { width: 580px }
    main .wrap-sm { width: 520px }
    nav ul.left { width: 85% }
    nav ul.right { width: 15% }
    article .post-info .like_button { margin-left: 0px;
        margin-right: 20px; }
    main .wrap-xs { width: 455px }
    article.photo { width: 560px; }
    
    footer .copy { max-width: 100%; float: none; display: inline-block; 
        width: 100%; text-align: center; margin-bottom: 20px; }
    footer i { float: none; width: 145px; margin: auto; }
}


/*   ~ PHABLETS & LANDSCAPE ~   */

@media(min-width:480px) and (max-width:599px){
    .wrap-lg { width: 460px; }
    .wrap-md { width: 460px; }
    .hero { padding-top: 48px; }
    .hero .profile { margin-bottom: 40px; }
    .hero p.blog-desc { padding-right: 50px; margin-bottom: 43px; }
    .hero .buttons { margin-bottom: 60px; }
    main .wrap-sm { width: 400px }
    main .wrap-xs { width: 400px }
    article { padding-top: 47px; }
    article .caption ul, article .caption ol { padding-left: 40px; }
    article .post-info { text-align:center;position:relative;left:-10px;}
    article .post-info .like_button { margin-left: 0px; float: none;
        margin-right: 20px; display: inline-block; vertical-align:-3px; }
    .exif-icon, .exif-info { display: none; }
    article.photo .photo img { border-radius: 0; }
    article.photo .photo.wrap-sm img { border-radius: 3px; }
    .link a.wrap-xs:before { content: ""; }
    .audio .player iframe { max-height: 396px; }
    
    footer .copy { max-width: 100%; float: none; display: inline-block; 
        width: 100%; text-align: center; margin-bottom: 20px; }
    footer i { float: none; width: 145px; margin: auto; }
}

/* Navigation */

@media(max-width:599px) {
    nav { position: relative; min-height: 48px;
        -webkit-transition: min-height .3s ease;
        -moz-transition: min-height .3s ease;
        transition: min-height .3s ease; }
    nav.clearfix:before { width: 100%; content: "menu";
        text-align: center; }
    nav ul.left { opacity: 0; pointer-events: none; }
    nav ul.right { opacity: 0; pointer-events: none; }
    nav i { position: absolute; width: 100%; height: 48px;display: block;
        left: 0; top: 0; cursor: pointer; z-index: 2;}
    
    nav.on { min-height: 348px; cursor: auto; overflow-x: hidden;
        overflow-y: scroll; -webkit-transition: min-height .3s ease;
        -moz-transition: min-height .3s ease;
        transition: min-height .3s ease; }
    nav.clearfix.on:before { content: "\f00d"; font-family:"FontAwesome";
        margin: -1px 0 41px 0; }
    nav.on ul.left { opacity: 1; pointer-events: all; width: 100%;
        text-align: center; }
    nav.on ul.right { opacity: 1; pointer-events: all; float: none; }
    nav.on ul.left li.search { float: none; margin: 0 auto 23px auto;
        position: relative; left: 16px; width: 260px; text-align: left; }
    nav.on li.search form input:nth-of-type(1) { width: 220px;
        text-align: center; padding-left: 0; opacity: 1; }
    nav.on li.search form { width: auto; }
    nav.on li.search .fa.fa-search { display: none; }
    nav.on ul.left a li { display: inline-block; text-align: center;
        margin-bottom: 12px; background: #fff; margin-right: 0;
        padding: 12px 30px; float: none; margin: auto;border-radius: 3px;
        margin-bottom: 12px; }
    nav.on ul.left a { white-space: pre-line; }
    nav.on ul.left a:nth-of-type(1) li { padding-top: 13px; }
    nav.on ul.left a:nth-of-type(3) li { margin-bottom: 36px; }
    nav.on ul.right { text-align: center; width: 100%; }
    nav.on ul.right a:nth-of-type(1) li { margin-left: 0; margin-bottom: 20px; }
    #disqus_thread { padding: 74px 20px 67px 20px; }
}


/*   ~ MOBILE ~   */

@media (max-width:479px){
    .wrap-lg { width: 100%; }
    .wrap-md { width: 93.75%; }
    .hero { padding-top: 48px; text-align: center; }
    .hero .profile { margin-bottom: 50px; }
    .hero .profile img { float: none; }
    .hero .profile h1 { margin-left: 0; padding-top: 19px; }
    .hero p.blog-desc { padding-left: 10px; padding-right: 10px;
        margin-bottom: 43px; }
    .hero .buttons { margin-bottom: 60px; }
    main.posts { border-radius: 0; box-shadow: 0 0 0; }
    main .wrap-sm { width: 100%; }
    main .wrap-xs { width: 93.333333%; }
    article { padding-top: 47px; }
    article .caption ul, article .caption ol { padding-left: 40px; }
    article .post-info { text-align: center; }
    .chat .post-info, .quote .post-info { left: 0 }
    article .post-info .like_button { margin-left: 0px; float: none;
        margin-right: 20px; display: inline-block; vertical-align:-3px; }
    .exif-icon, .exif-info { display: none; }
    article.photo .photo img { border-radius: 0; }
    article.photo .photo.wrap-sm img { border-radius: 3px; }
    .link a.wrap-xs:before { content: ""; }
    .audio .player iframe { max-height: 288px; }
    .post-notes.on { height: 359px; }
    
    .pagination a.next { padding-left: 20px; }
    .pagination a.prev { padding-right: 20px; }
    
    footer .copy { max-width: 100%; float: none; display: inline-block; 
        width: 100%; text-align: center; margin-bottom: 20px; }
    footer i { float: none; width: 145px; margin: auto; }
}