/*
 * All our theme styles.
 *
 * /!\ This is the uncompressed stylesheet. Theme uses main.min.css /!\
 *
 * You can add or modify some css properties here but
 * it's better to add your custom properties in /css/custom.css
 * because If I update the theme, you will loose all the
 * properties you added in this file :(
 *
 * @since   1.0.0
 * @version 1.0.1
 */

/* =Structure
-------------------------------------------------------------------- */

body {
    font: normal 16px/normal 'Open Sans', sans-serif;
    font-weight: 400;
    color: #777;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f9f9f9;
    -webkit-font-smoothing: antialiased;
}

.bro-content {
    float: left;
    position: relative;
    width: 70%;
}

.bro-sidebar {
    float: right;
    width: 30%;
    background: #f5f5f5;
}

.left-sidebar .bro-content {float: right;}
.left-sidebar .bro-sidebar {float: left;}

.bro-inner {
    padding: 50px 40px;
}

/* =Typography
-------------------------------------------------------------------- */

a,a:visited {
    text-decoration: none;
    color: #5bcad3;
    -webkit-transition: all .2s;
    transition: all .2s;
}

a:hover {
    color: #333;
    -webkit-transition: all .2s;
    transition: all .2s;
}

em,cite,var,
address, dfn,
blockquote, q {
    font-style: italic;
}

strong {font-weight: 600;}
p {line-height: 1.4;}
h1,h2,h3,h4,h5,h6 {font-weight: 600;}

/* =Blockquotes
------------------------------------- */

blockquote {
    position: relative;
    margin: 20px;
    padding: 1px 20px;
    font-family: Georgia,"Times New Roman",Times,serif;
    line-height: 26px;
    color: #777;
    background-color: #f5f5f5;
}

blockquote:before {
    content: "\201C";
    display: block;
    position: absolute;
    top: 13px;
    left: -13px;
    font-size: 80px;
    color: #7a7a7a;
}

blockquote cite {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #999;
}

blockquote cite:before {
    content: "\2014 \2009";
}

/* Definition lists
------------------------------------- */
dl {width:450px;}

dt{
    font-weight:bold;
    font-size: 15px;
    margin-bottom:0.7em;
}

dd{
    font-size: 14px;
    margin: 0 0 20px 0;
    padding-left: 40px;
}

/* =Entry tables
-------------------------------------------------------------------- */
table {
    width: 100%;
    margin-bottom: 24px;
    border: 1px solid #d8d8d8;
    border: 1px solid rgba(0,0,0,.05);
    border-collapse: collapse;
    border-color: #f0f0f0;
    border-spacing: 2px;
}

table, th,
table thead td,
table thead th {
    font-weight: 600;
}

table td,
table th {
    padding: 7px 11px;
    border: 1px solid #f0f0f0;
    border-width: 0 1px 1px 0;
    text-align: left;
    font-weight: 400;
    background-color: #ece6d6;
    background-color: rgba(0,0,0,.02);
}

/* Content lists
------------------------------------- */

ul {list-style: disc;}
ol {list-style: decimal;}
li {margin: 3px 0;}

ol ol ul,
ol ul ul,
ul ol ul,
ul ul ul {
    list-style: square;
}

/* Address
------------------------------------- */
address {
    margin-bottom: 18px;
    padding-left: 20px;
    line-height: 1.4;
}

/* cite / code / pre / q / abbr
------------------------------------- */
cite {
    font-size: 14px;
}

code,kbd,tt,var,samp {
    font-family: 'andale mono','lucida console',monospace;
    font-size: 14px;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    word-wrap: break-word;
    -ms-hyphens: none;
}

code,kbd {
    margin: 0 1px;
    padding: 3px 5px 2px;
    font: 13px 'Source Code Pro', 'lucida console', monospace;
    color: black;
    background: #f5f2f0;
}

pre {
    border: 1px solid #f0f0f0;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    font: 11px/19px 'Source Code Pro', 'lucida console', monospace;
    -ms-overflow-x: visible;
    word-wrap: break-word;
}

pre code {background-color: transparent;}

big {font-size: 120%; font-weight: 300;}

ins {
    border-bottom: 1px dotted #BDBDBD;
    text-decoration: none;
    background-color: #fff9c0;
}

abbr[title], acronym[title] {
    border-bottom: 1px dashed #ccc;
    border-color: #d8d8d8;
    border-color: rgba(0,0,0,.5);
    cursor: help;
}

/* =Header
-------------------------------------------------------------------- */

.bro-header {
    width: 100%;
    background: #363141;
}

.site-title {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'Yellowtail', cursive;
    font-size: 50px;
    font-weight: normal;
    line-height: 1;
    text-shadow:
        1px 1px #2e2e2e,
        2px 2px #2e2e2e,
        3px 3px #2e2e2e,
        4px 4px 0.333px rgba(46, 46, 46, 0.9);
}

.site-title a {color: #d35b5b;}
.site-title a:hover {color: #5bcad3;}

/* Top Navigation
--------------------------------- */
.bro-header nav {
    padding: 15px 0 0;
    text-align: center;
}

.bro-nav,
.bro-nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.bro-nav li a {
    padding-bottom: 7px;
    border-bottom: 1px solid transparent;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 1px 1px 0 rgba(46,46,46,.3);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.bro-nav li {
    margin-right: 25px;
    padding-bottom: 10px;
}

.bro-nav li:last-child  {margin-right: 0;}

.bro-nav .active a,
.bro-nav li a:hover {
    border-color: #d35b5b;
    color: #d35b5b;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.parent-menu {position: relative;}

/* Who styled the dropdown? Who, who who who who */
.bro-nav .sub-menu {
    z-index: 999;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    height: 0;
    border-radius: 2px;
    overflow: hidden;
    text-align: left;
    opacity: 0;
    background-color: #333;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -webkit-transition: all 0.15s;
    transition: all 0.15s;
    filter: alpha(opacity=0);
}

.bro-nav li.parent-menu:hover > ul.sub-menu {
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    opacity: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.sub-menu li:hover {
    background-color: #222;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.bro-nav ul.sub-menu a {
    display: block;
    width: 201px;
    padding: 9px 10px;
    border-bottom: 0;
    text-transform: none;
    font-size: 13px;
    line-height: 1.2;
    color: #aaa;
}

.sub-menu li {
    margin-right: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #252525;
    border-bottom: 1px solid rgba(0,0,0,.4);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

.sub-menu li a:hover {border-color: transparent;}
ul.sub-menu li > ul.sub-menu {top: 0;left: 100%;}
ul.sub-menu .sub-item i {float: right;}

/* =Main content
-------------------------------------------------------------------- */

.bro-inner {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

/* Next / Previous posts pagination
---------------------------------------- */
.bro-pagination {
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    color: #c9c9c9;
    background: #363141;
}

.bro-pagination a,
.bro-pagination .current,
.bro-pagination .dots {
    margin-right: .2em;
}

.bro-pagination i {
    width: auto;
    height: auto;
    margin: 0 .6em;
    text-decoration: none;
    vertical-align: middle;
    color: #d35b5b;
}

.bro-pagination .current {font-weight: 600;}
.bro-pagination a:hover {color: #d35b5b;}
.bro-pagination a:last-child {margin-right: 0;}

/* =Posts
-------------------------------------------------------------------- */

article.post:first-of-type {margin-top: 0;}

article.post {
    margin: 80px 0;
    background: #f5f5f5;
}

.single article.post {margin-bottom: 30px;}

article.sticky {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Post header
----------------------- */
.post-header .vertical {
    float: right;
    margin-bottom: 1em;
    margin-left: 2%;
    max-width: 33%;
}

.post-title {
    margin: .2em 0;
    padding: 0 20px;
    text-align: center;
    font-size: 3.1em;
    font-weight: 400;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.post-title a {color: #363141;}
.post-title a:hover {color: #d35b5b;}

.header-metas {
    position: relative;
    padding: 9px 0;
    text-align: center;
    font-size: 13px;
    color: #c9c9c9;
    background: #363141;
    -webkit-transition: all .1s;
    transition: all .1s;
}

.header-metas .post-date time a,
.header-metas .edit-link a {color: #c9c9c9;}

.header-metas .edit-link {
    position: absolute;
    left: 10px;
}

.post-author a,
.post-format-icn a {color: #c9c9c9;}

.header-metas:hover .post-date time,
.header-metas:hover .post-author {
    color: #777;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.header-metas:hover .edit-link a,
.header-metas:hover .post-author a,
.header-metas:hover .post-date time a,
.header-metas:hover .post-format-icn a {color: #5bcad3;}

.post-format-icn {
    position: absolute;
    top: 0;
    right: 0;
}

.post-format-icn a {display: block;}

.post-format-icn a i {
    width: auto;
    height: auto;
    padding: 4px;
    font-size: 28px;
}

.sticky .post-format-icn a {color: #E24242;}

/* Post content
-------------------------- */
.post-content {padding: 0 20px 20px;}

.post-content p {
    font-size: 16px;
    line-height: 1.4;
}

.page-links {
    font-size: 14px;
}


/* Post footer
-------------------------- */
.taxo-metas {
    margin: 0;
    padding: 0;
    padding-left: 20px;
    font-size: 13px;
    list-style: none;
}

.taxo-metas i {
    width: auto;
    height: auto;
    font-size: 18px;
}

.tag-links a {margin-right: .2em;}
.tag-links a:last-of-type {margin-right: 0;}
.tag-links a:before {content: '\0023';}

/* Author info box
------------------------------------ */
.author-infobox {
    margin-bottom: 20px;
    padding: 20px;
    background: #f5f5f5;
}

.author-infobox img {
    float: left;
    margin: 0 10px 5px 0;
    border: 3px solid #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.author-description {
    position: relative;
}

.author-description h3 {
    margin-top: 0;
    margin-bottom: .8em;
    font-size: 18px;
    font-style: italic;
    color: #aaa;
}

.author-social {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
}

.author-social ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.author-social li {
    display: inline-block;
    zoom: 1;
    margin: 0 .2em 0 0;
    vertical-align: top;
}

.author-social li i {
    width: auto;
    height: auto;
    vertical-align: middle;
}

.author-social a {
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.author-social a:hover {
    opacity: .4;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
    filter: alpha(opacity=40);
}

.author-description p {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
}

.author-social i.gicn-user_url   {color: #333;}
.author-social i.gicn-twitter    {color: #33ccff;}
.author-social i.gicn-facebook   {color: #3b5998;}
.author-social i.gicn-googleplus {color: #dd4b39;}
.author-social i.gicn-linkedin   {color: #0e76a8;}
.author-social i.gicn-dribbble   {color: #ea4c89;}
.author-social i.gicn-pinterest  {color: #c8232c;}
.author-social i.gicn-instagram  {color: #3f729b;}
.author-social i.gicn-github     {color: #333;}

/* Related Posts Box
------------------------------------ */
.related-posts {
    margin-bottom: 20px;
    padding: 20px;
    background: #f5f5f5;
}

.related-box {
    float: left;
    width: 33%;
    text-align: center;
}

.related-box a {
    display: block;
    font-weight: 600;
}

.related-box img {
    height: 130px;
    border: 3px solid #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.related-box img:hover {
    opacity: .8;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

/* =Comments
-------------------------------------------------------------------- */

#comment-nav-above {margin-bottom: 20px;}

.comments-title {
    margin-top: 0;
    margin-bottom: 16px;
    text-transform: uppercase;
    font-size: 1.25em;
}

.commentlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.children {list-style: none;}

.comment-details {
    position: relative;
    margin-bottom: 25px;
    margin-left: 80px;
    padding: 20px;
    border-radius: 3px;
    background: #f5f5f5;
}

.comment-avatar {
    position: absolute;
    top: 0;
    left: -80px;
    border: 4px solid #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2) ,0 0 0 transparent,0 0 0 transparent;
    transition: all .15s ease;
}

.comment-avatar img {
    display: block;
    width: 50px;
    height: 50px;
}

.comment-author,.comment-author .author a:link {font-weight: 700;}
.comment-author {color: #3e3e3e;}

.comment-date {
    font-size: .786em;
    font-weight: 400;
}

.comment-reply-link {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 12px;
    border-bottom-left-radius: 2px;
    font-size: .786em;
    color: #888;
    background-color: #d0cdcb;
    background-color: rgba(0,0,0,.05);
}

.comment-content {margin-top: 5px;}

/* Comments fields
---------------------------- */

.comment-form .required {color: #d35b5b;}

.comment-form label {
    font-size: .929em;
    font-weight: 400;
    vertical-align: sub;
    cursor: pointer;
}

.comment-form input {
    float: left;
    margin-right: 10px;
}

.comment-form #author,
.comment-form #email,
.comment-form #url {
    width: 50%;
    margin-top: 0;
    font-size: 15px;
}

input[type=email],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
textarea {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    margin-left: 0;
    padding: 0 10px;
    max-width: 100%;
    border: 1px solid #D7D8D9;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 15px;
    color: #999;
    background-color: #fff;
    box-shadow: 0 1px 0 0 #d8d8d8;
    box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
    transition: all .4s ease;
}

.comment-form textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-size: 15px;
}

input[type=email],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
    padding-top: 7px;
    padding-bottom: 7px;
    max-width: 70%;
}

input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
textarea:focus {
    border-color: #abadb3;
    outline: 0;
}

input[type=submit] {
    padding: 5px 20px;
    border: none;
    border-radius: 3px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    background: #5bcad3;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.comment-reply-title {
    position: relative;
    color: #6d6d6d;
}

#cancel-comment-reply-link {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    opacity: .8;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background: #d35b5b;
}

.form-submit {
    height: 55px;
    margin-bottom: 0;
}

/* =Archives & categories pages
-------------------------------------------------------------------- */

.archive-title {margin-top: 0;}

/* =404 page and no-content pages
-------------------------------------------------------------------- */

.content404 .bro-inner {text-align: center;}

.content404 .gicn-404 {
    width: auto;
    height: auto;
    font-size: 80px;
    color: #5bcad3;
}

.content404 h2 {
    display: inline-block;
    margin: 0;
    padding-top: 15px;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 1px;
}

.content404 .search-form,
.search .bro-content .search-form {
    position: relative;
    margin: 0 auto;
}

.content404 .search-field,
.search .bro-content .search-field {
    width: 97%;
    padding: 10px 30px 10px 10px;
    border: none;
    background: #eee;
}

.content404 .search-btn,
.search .bro-content .search-btn {
    position: absolute;
    top: 0;
    right: -20px;
    margin: 0;
    padding: 8px;
    border: none;
    background: transparent;
}

.content404 .search-btn i,
.search .bro-content .search-btn i {
    width: auto;
    height: auto;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    font-size: 25px;
    color: #B4B4B4;
}

/* =Pages
-------------------------------------------------------------------- */

.bro-content.full-width {
    float: none;
    margin: 0 auto;
    width: 70%;
}

.full-width .bro-inner {width: auto;}
.image-nav .nav-links a:first-of-type {float: left;}
.image-nav .nav-links a:last-of-type {float: right;}
.previous-img i {margin-right: .3em;}
.next-img i {margin-left: .3em;}

.previous-img i,
.next-img i {
    width: auto;
    height: auto;
    vertical-align: middle;
}

/* =Post formats
-------------------------------------------------------------------- */

article.format-quote {background: transparent;}
article.format-quote .post-content {padding: 0;}
article.format-quote .post-content blockquote {margin: 0;}
article.format-quote .post-footer {text-align: right;}
article.format-quote blockquote p {font-size: 25px;}

article.format-quote .post-date {
    padding: 3px 10px;
    font-size: 13px;
    background: #f5f5f5;
}

.link-content {
    padding: 0 20px 20px;
    text-align: center;
    font-size: 25px;
}

.link-content a:after {
    display: inline-block;
    content: '\f442';
    font-family: 'Genericons';
    font-size: 25px;
    vertical-align: bottom;
    color: #363141;
    margin-left: .2em;
}


/* =Author page
-------------------------------------------------------------------- */

.author-links {margin-bottom: 20px;}

.author-desc img {
    float: left;
    margin: 0 1em 1em 0;
}

.author-desc p {margin-top: 0;}

.author-links h3 {
    margin: 1em 0 .6em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-size: 16px;
    font-style: italic;
    box-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.author-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.author-links ul li {
    display: inline-block;
    margin-right: .2em;
}

.author-links a {
    opacity: 1;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.author-links a:hover {
    opacity: .6;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.author-links i {
    width: auto;
    height: auto;
    font-size: 20px;
    vertical-align: middle;
}

.gicn-user_url:before {content: '\f107' !important;}
.gicn-linkedin:before {content: '\f208' !important;}

.author-links i.gicn-user_url   {color: #333333;}
.author-links i.gicn-facebook   {color: #3b5998;}
.author-links i.gicn-twitter    {color: #33ccff;}
.author-links i.gicn-googleplus {color: #dd4b39;}
.author-links i.gicn-linkedin   {color: #0e76a8;}
.author-links i.gicn-dribbble   {color: #ea4c89;}
.author-links i.gicn-pinterest  {color: #c8232c;}
.author-links i.gicn-instagram  {color: #3f729b;}
.author-links i.gicn-github     {color: #171515;}

/* =Sidebar
-------------------------------------------------------------------- */

.bro-sidebar .bro-inner {
    width: auto;
    margin: 0;
}

.widget {font-size: 13px; margin: 30px 0;}
.widget:first-child {margin-top: 0;}

.widget-title {
    margin: 1em 0 .6em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-style: italic;
    box-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.widget ul {
    padding: 0;
    margin: 0;
}

.widget ul li {
    margin: .2em 0;
    list-style: none;
}

.widget ul li:before {
    content: '\2192';
    margin-right: .2em;
}

/* =Widgets
-------------------------------------------------------------------- */

/* Default WP Search widget
------------------------------- */
.widget .search-form {position: relative;}

.widget .search-field {
    width: 88%;
    padding: 8px;
    padding-right: 30px;
    border: none;
    background: #EEE;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.widget .search-field:hover,
.content404 .search-field:hover,
.widget .search-field:focus,
.content404 .search-field:focus {
    outline: 0;
    -webkit-box-shadow:
        inset 0 1px 2px rgba(0,0,0,.2),
        0 1px 0 rgba(255,255,255,.7);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.2),
        0 1px 0 rgba(255,255,255,.7);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.widget .search-field:active,
.widget .search-field:focus {outline: 0;}

.widget .search-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    border: none;
    background: transparent;
}

.widget .search-btn i {
    width: auto;
    height: auto;
    font-size: 20px;
    vertical-align: middle;
}

/* Default WP Categories widget
------------------------------- */
.widget_categories li.cat-item {
    position: relative;
    margin-bottom: 5px;
    border-bottom: 1px dotted #d8d8d8;
    line-height: 2;
}

.widget_categories .cat-num {
    position: absolute;
    top: 5px;
    right: 0;
    width: 24px;
    height: 20px;
    border: 1px solid #d8d8d8;
}

.widget_categories .cat-num .inner-num {
    display: block;
    position: relative;
    text-align: center;
    font-size: 15px;
    line-height: 20px;
}

/* Default WP Calendar widget
------------------------------- */
td#today {
    font-weight: 600;
    color: #d35b5b;
}

/* Bromine Recent posts widget
------------------------------------ */
.recent-posts-widget img {
    float: left;
    margin: 0 5px 5px 0;
    max-width: 25%;
}

.recent-posts-widget h6 {
    margin: 0;
    font-size: 16px;
}

.recent-posts-widget p {
    margin: 0;
    font-size: 13px;
}

.recent-posts-widget .recent-post {margin: 20px 0;}

.recent-posts-widget .recent-date i {
    width: auto;
    height: auto;
    margin-right: .2em;
    font-size: 18px;
    vertical-align: bottom;
}

/* Bromine Likebox Widget
-------------------------------------- */
.bro-likebox-frame {

}

/* =Footer
-------------------------------------------------------------------- */

.bro-footer {
    background: #363141;
    color: #ccc;
}

.bro-footer .bro-inner {
    width: 90%;
    padding: 20px;
    font-size: 13px;
}

.bro-footer a:hover {
    color: #d35b5b;
}

/* Social navigation
---------------------------------- */

/*
 * Thanks to Justin Tadlock for his great work and idea
 * http://justintadlock.com
*/
.menu-social {
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

.menu-social li {
    display: inline-block;
    position: relative;
}

.menu-social li a::before {
    content: '\f408'; /* Fallback icon */
    display: inline-block;
    padding: 0 5px;
    font-family: 'Genericons';
    font-size: 16px;
    vertical-align: top;
    color: #ccc;
    -webkit-transition: color .3s ease-out;
    transition: color .3s ease-out;
    -webkit-font-smoothing: antialiased;
}

.menu-social li a[href*="facebook.com"]::before    {content: '\f203';}
.menu-social li a[href*="twitter.com"]::before     {content: '\f202';}
.menu-social li a[href*="plus.google.com"]::before {content: '\f206';}
.menu-social li a[href*="linkedin.com"]::before    {content: '\f208';}
.menu-social li a[href*="dribbble.com"]::before    {content: '\f201';}
.menu-social li a[href*="pinterest.com"]::before   {content: '\f210';}
.menu-social li a[href*="instagram.com"]::before   {content: '\f215';}
.menu-social li a[href*="github.com"]::before      {content: '\f200';}
.menu-social li a[href*="tumblr.com"]::before      {content: '\f214';}
.menu-social li a[href*="youtube.com"]::before     {content: '\f213';}
.menu-social li a[href*="flickr.com"]::before      {content: '\f211';}
.menu-social li a[href*="vimeo.com"]::before       {content: '\f212';}
.menu-social li a[href*="codepen.io"]::before      {content: '\f216';}

.menu-social li a[href*="facebook.com"]:hover::before    {color: #3b5998;}
.menu-social li a[href*="twitter.com"]:hover::before     {color: #33ccff;}
.menu-social li a[href*="twitter.com"]:hover::before     {color: #33ccff;}
.menu-social li a[href*="plus.google.com"]:hover::before {color: #dd4b39;}
.menu-social li a[href*="linkedin.com"]:hover::before    {color: #0e76a8;}
.menu-social li a[href*="dribbble.com"]:hover::before    {color: #ea4c89;}
.menu-social li a[href*="pinterest.com"]:hover::before   {color: #c8232c;}
.menu-social li a[href*="instagram.com"]:hover::before   {color: #3f729b;}
.menu-social li a[href*="github.com"]:hover::before      {color: #171515;}
.menu-social li a[href*="tumblr.com"]:hover::before      {color: #34526f;}
.menu-social li a[href*="youtube.com"]:hover::before     {color: #c4302b;}
.menu-social li a[href*="flickr.com"]:hover::before      {color: #ff0084;}
.menu-social li a[href*="vimeo.com"]:hover::before       {color: #1AB7EA;}
.menu-social li a[href*="codepen.io"]:hover::before      {color: #000;}

/* =Helpers
-------------------------------------------------------------------- */

.bro-cf:before,
.bro-cf:after {
    content: " ";
    display: table;
}

.bro-cf:after {clear: both;}
.clear {clear: both;}
.bro-left {float: left;}
.bro-right {float: right;}

.screen-reader-text {
    position: absolute;
    top: -9999em;
    left: -9999em;
}


/* =WordPress required stuff
-------------------------------------------------------------------- */

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    display: block;
    clear: both;
    margin: 0 auto;
}

.assistive-text {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
}

.wp-caption {
    margin: 0 1em;
    padding: 10px;
    max-width: 90%;
    background-color: #ebebeb;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.gallery-caption {padding: 0;}
.gallery-icon {margin-bottom: 0;}
.bypostauthor > .comment-body > .comment-details > .comment-avatar {border-color: #d35b5b;}

.wp-caption-text {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #888;
}

/* =Responsive stuff
-------------------------------------------------------------------- */

@media screen and (max-width: 959px) {
    .bro-inner {width: 88%;}
}

@media screen and (max-width: 768px) {
    .bro-content {
        float: none;
        width: 100%;
    }

    .bro-sidebar {
        float: none;
        margin: 0 auto;
        width: 50%;
    }

    .bro-inner {padding: 20px 40px;}
}

@media screen and (max-width: 640px) {
    .author-description h3 {margin-bottom: .2em;}
    .author-social {position: relative; margin-bottom: .5em;}
    .bro-sidebar {width: 66%;}
}

@media screen and (max-width: 420px) {
    .bro-sidebar {width: 93%;}
}