/*
=====================================================================
* Sparrow v1.0 Default Stylesheet
* url: styleshout.com
* 02-07-2014
=====================================================================
TOC:
a. Webfonts and Icon fonts
b. Reset
c. Default Styles
1. Basic
2. Typography
3. Links
4. Images
5. Buttons
6. Forms
d. Grid
e. Others
1. Clearing
2. Misc
===================================================================== */
/* ------------------------------------------------------------------ */
/* a. Webfonts and Icon fonts
------------------------------------------------------------------ */
@import url("fonts.css");
@import url("font-awesome/css/font-awesome.min.css");
/* ------------------------------------------------------------------
/* b. Reset
Adapted from:
Normalize.css - https://github.com/necolas/normalize.css/
HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
/* ------------------------------------------------------------------ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] { display: none; }
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
blockquote, q { quotes: “ “ }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #A7F4F6;
color: #555;
}
del { text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------------------------------------ */
/* c. Default and Basic Styles
Adapted from:
Skeleton CSS Framework - http://www.getskeleton.com/
Typeplate Typographic Starter Kit - http://typeplate.com/
/* ------------------------------------------------------------------ */
/* 1. Basic ------------------------------------------------------- */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
background: #fff;
font-family: notosans-regular, sans-serif;
font-size: 15px;
line-height: 30px;
color: #838C95;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/* 2. Typography
Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
color: #313131;
font-family: raleway-bold, sans-serif;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 42px; line-height: 48px; margin-bottom: 12px;}
h2 { font-size: 30px; line-height: 42px; margin-bottom: 6px; }
h3 { font-size: 24px; line-height: 30px; margin-bottom: 12px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 6px; }
h5 { font-size: 18px; line-height: 30px; }
h6 { font-size: 14px; line-height: 30px; }
.subheader { }
p { margin: 0 0 30px 0; }
p img { margin: 0; }
p.lead {
font: 20px/36px raleway-regular, sans-serif;
margin-bottom: 18px;
color: #9FA5AD;
}
/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */
em { font: 15px/30px notosans-italic, sans-serif; }
strong, b { font: 15px/30px notosans-bold, sans-serif; }
small { font-size: 11px; line-height: inherit; }
/* Blockquotes */
blockquote {
margin: 30px 0px;
padding-left: 40px;
position: relative;
}
blockquote:before {
content: "\201C";
opacity: 0.45;
font-size: 80px;
line-height: 0px;
margin: 0;
font-family: arial, sans-serif;
position: absolute;
top: 30px;
left: 0;
}
blockquote p {
font-family: georgia, serif;
font-style: italic;
padding: 0;
font-size: 18px;
line-height: 30px;
}
blockquote cite {
display: block;
font-size: 12px;
font-style: normal;
line-height: 18px;
}
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a,
blockquote cite a:visited { color: #8B9798; border: none }
/* ---------------------------------------------------------------------
/* Pull Quotes Markup
/*
/*
/* --------------------------------------------------------------------- */
.pull-quote {
position: relative;
padding: 18px 30px 18px 0px;
}
.pull-quote:before,
.pull-quote:after {
height: 1em;
opacity: 0.45;
position: absolute;
font-size: 80px;
font-family: Arial, Sans-Serif;
}
.pull-quote:before {
content: "\201C";
top: 33px;
left: 0;
}
.pull-quote:after {
content: '\201D';
bottom: -33px;
right: 0;
}
.pull-quote blockquote {
margin: 0;
}
.pull-quote blockquote:before {
content: none;
}
/* Abbreviations */
abbr {
font-family: notosans-bold, sans-serif;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .5px;
color: gray;
}
abbr:hover { cursor: help; }
/* drop cap */
.drop-cap:first-letter {
float: left;
margin: 0;
padding: 14px 6px 0 0;
font-size: 84px;
font-family: /* Copperplate */ raleway-bold, sans-serif;
line-height: 60px;
text-indent: 0;
background: transparent;
color: inherit;
}
hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }
/* 3. Links ------------------------------------------------------- */
a, a:visited {
text-decoration: none;
outline: 0;
color: #6e1b37;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
}
a:hover, a:focus { color: #313131; }
p a, p a:visited { line-height: inherit; }
/* 4. List --------------------------------------------------------- */
ul, ol { margin-bottom: 24px; margin-top: 12px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
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; }
ul ul, ul ol,
ol ol, ol ul { margin: 6px 0 6px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { }
li p { }
/* ---------------------------------------------------------------------
/* Stats Tab Markup
Extend this object into your markup.
/*
/* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 24px 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 10px 18px 0;
padding: 0 10px 0 0;
border-right: 1px solid #ccc;
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 22px;
font-family: notosans-bold, sans-serif;
border: none;
color: #313131;
}
.stats-tabs li a:hover {
color:#6e1b37;
}
.stats-tabs li a b {
display: block;
margin: 6px 0 0 0;
font-size: 13px;
font-family: notosans-regular, sans-serif;
color: #8B9798;
}
/* definition list */
dl { margin: 12px 0; }
dt { margin: 0; color:#6e1b37; }
dd { margin: 0 0 0 20px; }
/* Lining Definition Style Markup */
.lining dt,
.lining dd {
display: inline;
margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
content: "\A";
white-space: pre;
}
.lining dd + dd:before {
content: ", ";
}
.lining dd:before {
content: ": ";
margin-left: -0.2em;
}
/* Dictionary Definition Style Markup */
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt + dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/* Pagination */
.pagination {
margin: 36px auto;
text-align: center;
}
.pagination ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.pagination .page-numbers {
font: 15px/18px notosans-bold, sans-serif;
display: inline-block;
padding: 6px 10px;
margin-right: 3px;
margin-bottom: 6px;
color: #6E757C;
background-color: #E6E8EB;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.pagination .page-numbers:hover {
background: #838A91;
color: #fff;
}
.pagination .current,
.pagination .current:hover {
background-color: #6e1b37;
color: #fff;
}
.pagination .inactive,
.pagination .inactive:hover {
background-color: #E6E8EB;
color: #A9ADB2;
}
.pagination .prev, .pagination .next {}
/* 5. Images --------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }
/* 6. Buttons --------------------------------------------------------- */
.button,
.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
font: 16px/30px notosans-bold, sans-serif;
background: #6e1b37;
display: inline-block;
text-decoration: none;
letter-spacing: 0;
color: #fff;
padding: 12px 24px;
margin-bottom: 18px;
border: none;
cursor: pointer;
height: auto;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background: #3d4145;
color: #fff;
}
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
background: #3d4145;
color: #fff;
}
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}
/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* 7. Forms --------------------------------------------------------- */
form { margin-bottom: 24px; }
fieldset { margin-bottom: 24px; }
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
display: block;
padding: 18px 15px;
margin: 0 0 24px 0;
border: 0;
outline: none;
vertical-align: middle;
min-width: 260px;
max-width: 100%;
font-size: 15px;
line-height: 24px;
color: #647373;
background: #D3D9D9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
/* select { padding: 0;
width: 220px;
} */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
color: #B3B7BC;
background-color: #3d4145;
}
textarea { min-height: 200px; }
label,
legend {
font: 16px/24px notosans-bold, sans-serif;
margin: 12px 0;
color: #3d4145;
display: block;
}
label span,
legend span {
color: #8B9798;
font: 14px/24px notosans-regular, sans-serif;
}
input[type="checkbox"],
input[type="radio"] {
font-size: 15px;
color: #737373;
}
input[type="checkbox"] { display: inline; }
/* ------------------------------------------------------------------ */
/* d. Grid
---------------------------------------------------------------------
gutter = 40px.
/* ------------------------------------------------------------------ */
/* default
--------------------------------------------------------------- */
.row {
width: 96%;
max-width: 1020px;
margin: 0 auto;
}
/* fixed width for IE8 */
.ie .row { width: 1000px ; }
.narrow .row { max-width: 980px; }
.row .row { width: auto; max-width: none; margin: 0 -20px; }
/* row clearing */
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.column, .columns {
position: relative;
padding: 0 20px;
min-height: 1px;
float: left;
}
.column.centered, .columns.centered {
float: none;
margin: 0 auto;
}
/* removed gutters */
.row.collapsed > .column,
.row.collapsed > .columns,
.column.collapsed, .columns.collapsed { padding: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: right; }
/* column widths */
.row .one { width: 8.33333%; }
.row .two { width: 16.66667%; }
.row .three { width: 25%; }
.row .four { width: 33.33333%; }
.row .five { width: 41.66667%; }
.row .six { width: 50%; }
.row .seven { width: 58.33333%; }
.row .eight { width: 66.66667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33333%; }
.row .eleven { width: 91.66667%; }
.row .twelve { width: 100%; }
/* Offsets */
.row .offset-1 { margin-left: 8.33333%; }
.row .offset-2 { margin-left: 16.66667%; }
.row .offset-3 { margin-left: 25%; }
.row .offset-4 { margin-left: 33.33333%; }
.row .offset-5 { margin-left: 41.66667%; }
.row .offset-6 { margin-left: 50%; }
.row .offset-7 { margin-left: 58.33333%; }
.row .offset-8 { margin-left: 66.66667%; }
.row .offset-9 { margin-left: 75%; }
.row .offset-10 { margin-left: 83.33333%; }
.row .offset-11 { margin-left: 91.66667%; }
/* Push/Pull */
.row .push-1 { left: 8.33333%; }
.row .pull-1 { right: 8.33333%; }
.row .push-2 { left: 16.66667%; }
.row .pull-2 { right: 16.66667%; }
.row .push-3 { left: 25%; }
.row .pull-3 { right: 25%; }
.row .push-4 { left: 33.33333%; }
.row .pull-4 { right: 33.33333%; }
.row .push-5 { left: 41.66667%; }
.row .pull-5 { right: 41.66667%; }
.row .push-6 { left: 50%; }
.row .pull-6 { right: 50%; }
.row .push-7 { left: 58.33333%; }
.row .pull-7 { right: 58.33333%; }
.row .push-8 { left: 66.66667%; }
.row .pull-8 { right: 66.66667%; }
.row .push-9 { left: 75%; }
.row .pull-9 { right: 75%; }
.row .push-10 { left: 83.33333%; }
.row .pull-10 { right: 83.33333%; }
.row .push-11 { left: 91.66667%; }
.row .pull-11 { right: 91.66667%; }
/* block grids
--------------------------------------------------------------------- */
.bgrid-sixths [class*="column"] { width: 16.66667%; }
.bgrid-quarters [class*="column"] { width: 25%; }
.bgrid-thirds [class*="column"] { width: 33.33333%; }
.bgrid-halves [class*="column"] { width: 50%; }
[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }
/* Left clearing for block grid columns - columns that changes width in
different screen sizes. Allows columns with different heights to align
properly.
--------------------------------------------------------------------- */
.first { clear: left; } /* first column in default screen */
.s-first { clear: none; } /* first column in smaller screens */
/* smaller screens
--------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
/* block grids on small screens */
.s-bgrid-sixths [class*="column"] { width: 16.66667%; }
.s-bgrid-quarters [class*="column"] { width: 25%; }
.s-bgrid-thirds [class*="column"] { width: 33.33333%; }
.s-bgrid-halves [class*="column"] { width: 50%; }
/* block grids left clearing */
.first { clear: none; }
.s-first { clear: left; }
}
/* mobile wide/smaller tablets
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.row {
width: 480px;
margin: 0 auto;
padding: 0;
}
.column, .columns {
width: auto !important;
float: none;
margin-left: 0;
margin-right: 0;
padding: 0 30px;
}
.row .row { width: auto; max-width: none; margin: 0 -30px; }
[class*="column"] + [class*="column"]:last-child { float: none; }
[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }
/* Offsets */
.row .offset-1 { margin-left: 0%; }
.row .offset-2 { margin-left: 0%; }
.row .offset-3 { margin-left: 0%; }
.row .offset-4 { margin-left: 0%; }
.row .offset-5 { margin-left: 0%; }
.row .offset-6 { margin-left: 0%; }
.row .offset-7 { margin-left: 0%; }
.row .offset-8 { margin-left: 0%; }
.row .offset-9 { margin-left: 0%; }
.row .offset-10 { margin-left: 0%; }
.row .offset-11 { margin-left: 0%; }
}
/* mobile narrow
--------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
.row { width: auto; }
}
/* larger screens
--------------------------------------------------------------- */
@media screen and (min-width: 1200px) {
.wide .row { max-width: 1180px; }
}
/* ------------------------------------------------------------------ */
/* e. Others
/* ------------------------------------------------------------------ */
/* 1. Clearing
(http://nicolasgallagher.com/micro-clearfix-hack/
--------------------------------------------------------------------- */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/* 2. Misc -------------------------------------------------------- */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 12px !important; }
.add-bottom { margin-bottom: 24px !important; }
.no-border { border: none; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.align-center {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/*
=====================================================================
* Sparrow v1.0.1 Layout Stylesheet
* url: styleshout.com
* 03-05-2014
=====================================================================
TOC:
a. Common Styles.
b. Header Styles.
c. Intro Section - Main Page.
d. Info Section - Main Page.
e. Works Section - Main Page.
f. Journal Section - Main Page.
g. Call-To-Action Section - Main Page.
h. Tweets Section - Main Page.
i. Blog.
j. Porfolio.
k. About.
l. Contact.
m. Footer.
===================================================================== */
/* ------------------------------------------------------------------ */
/* a. Common Styles
/* ------------------------------------------------------------------ */
body { background: #D2D8D8 url(../images/bg.jpg); }
img { border-radius: 3px; }
.content-outer { background: #fff }
/* page title */
#page-title {
background: #233951;
padding-top: 8px;
padding-bottom: 10px;
}
#page-title h1 {
font: 50px/60px raleway-bold, sans-serif;
color: #fff;
padding: 0;
margin: 18px 0 18px 0;
text-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
}
#page-title h1 span,
#page-title a { color: #6e1b37; }
#page-title p {
font: 17px/36px notosans-regular, sans-serif;
padding: 0;
margin: 12px 5% 0;
color: #ffffff;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
}
/* page content */
#page-content {
padding-top: 54px;
padding-bottom: 54px;
margin: 0 auto;
width: 91.66667%;
}
/* page */
.page section {
padding-top: 24px;
padding-bottom: 12px;
}
.page h1, .title-heading {
font: 39px/48px raleway-semibold, sans-serif;
margin-bottom: 18px;
}
/* sidebar */
#sidebar {
padding-top: 42px;
padding-left: 18px;
}
#sidebar h5 {
font: 18px/30px notosans-bold, sans-serif;
font-weight: normal;
margin-bottom: 6px;
}
#sidebar .widget { margin-bottom: 24px; }
/* Link list */
#sidebar .link-list {
margin: 12px 0 18px 0;
padding: 0;
}
#sidebar .link-list li {
line-height: 24px;
}
#sidebar .link-list li a {
border: none;
color: #838C95;
}
#sidebar .link-list li a:hover {
color: #313131;
}
/* tag cloud */
#sidebar .tagcloud {
margin: 18px 0 18px -12px;
padding: 0;
}
#sidebar .tagcloud a {
font: bold 12px/24px notosans-regular , sans-serif !important;
display: inline-block;
float: left;
margin: 0 0 12px 12px;
padding: 6px 10px;
position: relative;
text-transform: uppercase;
background: #D3D9D9;
text-decoration: none;
letter-spacing: 1px;
color: #6D7E7E;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border-radius: 3px;
}
#sidebar .tagcloud a:hover {
color: #fff;
background: #6e1b37;
}
/* Photostream */
#sidebar .photostream {
list-style: none;
margin: 18px 0 24px -15px;
padding: 0;
overflow: hidden;
}
#sidebar .photostream li {
float: left;
display: inline-block;
margin: 0 0 15px 15px;
padding: 0;
}
#sidebar .photostream li a { }
#sidebar .photostream li a img {
border-radius: 3px;
height: 54px;
width: 54px;
vertical-align: bottom;
}
/* search */
#sidebar .widget_search form {
/*position: relative; */
margin: 24px 0 36px 0;
}
#sidebar .widget .text-search {
padding-right: 40px;
border:none;
width: 100%;
min-width: 150px;
border-radius: 3px;
}
#sidebar .widget .submit-search {
background:url(../images/search-icon.png) no-repeat;
border:none;
cursor:pointer;
width:18px;
height:18px;
margin: 0;
padding: 0;
float: right;
position: relative;
top: -60px;
right: 18px;
/*display: none !important;*/
}
#primary { }
/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */
header {
height: 96px;
width: 100%;
}
/* header logo */
header .logo {
position: absolute;
left: 20px;
top: 48px;
}
header .logo a {
display: block;
margin: 0;
padding: 0;
border: none;
outline: none;
width: 113px;
height: 24px;
}
/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 14px raleway-bold, sans-serif;
float: right;
margin-top: 36px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #688e99;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #fff; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #6e1b37;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #1f2024;
min-width: 100%;
border-radius: 0 0 3px 3px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); }
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
/* ------------------------------------------------------------------ */
/* c. Intro Section - Main Page
/* ------------------------------------------------------------------ */
#intro { background: #383232 url(../images/header-bg-2022.jpg); background-size: cover; }
/* Flex Slider
/* ------------------------------------------------------------------ */
/* Reset */
.flexslider a:active,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}
/* Necessary Styles */
.flexslider {
position: relative;
zoom: 1;
margin: 0;
padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }
/* Clearfix for .slides */
.slides:before,
.slides:after {
content: " ";
display: table;
}
.slides:after {
clear: both;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }
/* FlexSlider Intro Slider Styles */
.slides {
overflow: hidden;
position: relative;
}
.slider-text {
color: #b4a9a9;
width: 90%;
text-align: center;
margin: 60px auto 36px auto;
}
.slider-text h1 {
font: 50px/60px raleway-bold, sans-serif;
color: #fff;
padding: 0;
margin: 0 0 18px 0;
text-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
}
.slider-text h1 span,
.slider-text a { color: #6e1b37; }
.slider-text p {
font: 17px/36px notosans-regular, sans-serif;
padding: 0;
margin: 12px 8% 0;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
}
.slider-image {
width: 90%;
margin: 0 auto;
}
.slides li img {
vertical-align: bottom;
display: block;
}
/* Direction Navigation
--------------------------------------------------------------- */
.flex-direction-nav a {
display: block;
width: 40px;
height: 66px;
margin: -33px 0 0 0;
background-color: #1f2024;
cursor: pointer;
z-index: 99999;
opacity: 0;
position: absolute;
top: 50%;
/* hide text */
font: 0/0 a;
text-shadow: none;
color: transparent;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.flex-direction-nav a:hover { background-color: #0F9095; }
.flex-direction-nav .flex-next {
right: 0px;
background: #1f2024 url(../images/direction-nav-right.png) no-repeat 47% 50%;
position: absolute;
border-radius: 3px 0 0 3px;
}
.flex-direction-nav .flex-prev {
left: 0px;
background: #1f2024 url(../images/direction-nav-left.png) no-repeat 53% 50%;
position: absolute;
border-radius: 0 3px 3px 0;
}
.flexslider:hover .flex-next,
.flexslider:hover .flex-prev { opacity: 1; }
.flex-direction-nav .flex-disabled {
opacity: .3 !important;
filter: alpha(opacity=30);
cursor: default;
}
/* ------------------------------------------------------------------ */
/* d. Info Section - Main Page
/* ------------------------------------------------------------------ */
#info {
background: #fff url(../images/content-bg.jpg);
padding-top: 60px;
padding-bottom: 42px;
}
#info h2 {
font: 18px/30px notosans-bold, sans-serif;
color: #6e1b37;
margin-bottom: 6px;
}
#info p {
font-size: 15px;
line-height: 30px
}
/* ------------------------------------------------------------------ */
/* e. Works Section - Main Page
/* ------------------------------------------------------------------ */
#works {
background: #f5f5f5 url(../images/works-bg.jpg);
padding-top: 48px;
padding-bottom: 36px;
border-top: 1px solid #E3E8E8;
border-bottom: 1px solid #E3E8E8;
}
#works h1 {
font: 20px/36px raleway-bold, sans-serif;
margin-bottom: 36px;
color: #A1A8AF;
}
/* Portfolio Content */
#portfolio-wrapper { margin-top: 36px; }
#portfolio-wrapper .columns { margin-bottom: 36px; }
.portfolio-item .item-wrap {
background: #fff;
overflow: hidden;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.1);
box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.portfolio-item .item-wrap a {
position: relative;
display: block;
}
/* overlay */
.portfolio-item .item-wrap .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
border-radius: 3px 3px 0 0;
background: url(../images/overlay.png) repeat;
}
.portfolio-item .item-wrap .link-icon {
display: block;
color: #fff;
font-size: 40px;
line-height: 40px;
text-align: center;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
margin-left: -18.5px;
margin-top: -20px;
}
.portfolio-item .item-wrap img {
vertical-align: bottom;
border-radius: 3px 3px 0 0;
}
.portfolio-item .portfolio-item-meta { padding: 18px 0; }
.portfolio-item .portfolio-item-meta h5 a {
font: 14px/18px notosans-bold, sans-serif;
color: #6e1b37;
margin-left: 7%;
}
.portfolio-item .portfolio-item-meta p {
font: 12px/18px notosans-regular, sans-serif;
color: #c6c7c7;
margin-bottom: 0;
margin-left: 7%;
}
/* on hover */
.portfolio-item:hover .item-wrap { background-color: #3A3434; }
.portfolio-item:hover h5 a { color: #fff !important; }
.portfolio-item:hover .overlay {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
.portfolio-item:hover .link-icon {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
/* ------------------------------------------------------------------ */
/* f. Journal Section - Main Page
/* ------------------------------------------------------------------ */
#journal {
background: #fff url(../images/content-bg.jpg);
padding-top: 60px;
padding-bottom: 48px;
}
#journal a, #journal a:visited { color: #6e1b37; }
#journal a:hover, #journal a:focus { color: #313131; }
#journal h1 {
font: 20px/36px raleway-bold, sans-serif;
margin-bottom: 36px;
color: #A1A8AF;
}
#journal .blog-entries { margin-top: 0; }
#journal .entry {
margin-bottom: 12px;
border-top: 1px dotted #d8d8d8;
padding-top: 36px;
}
#journal .blog-entries article.entry:first-child {
border-top: none;
padding-top: 18px;
}
/* post header */
#journal .blog-entries .entry-header {
position: relative;
margin-bottom: 6px;
}
#journal .entry-header .entry-title { padding-right: 16.66667%; }
#journal .entry-header h3 { font: 31px/42px raleway-bold, sans-serif; }
#journal .entry-header .permalink {
position: absolute;
top: 18px;
right: 60px;
z-index: 999999;
}
#journal .entry-header .permalink a {
color: #fff;
display: block;
text-align: center;
background-color: #9199A1;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 100%;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
#journal .entry-header .permalink a:hover {
background-color: #6e1b37;
}
#journal .entry-header .permalink a i {
font-size: 24px;
line-height: 48px;
}
/* post meta */
#journal .entry .post-meta {
font: 15px/21px notosans-regular, sans-serif;
margin-top: 12px;
margin-bottom: 0;
text-align: right;
}
#journal .entry .post-meta time,
#journal .entry .post-meta .dauthor {
display: block;
}
#journal .entry .post-meta time {
font-family: notosans-bold, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #878282;
margin-bottom: 6px;
}
/* post content */
#journal .entry .post-content { padding-right: 16.66667%; }
#journal .entry .post-content p {
font: 16px/30px notosans-regular, sans-serif;
}
#journal .entry .post-content a.more-link {
font: 16px/30px notosans-bold, sans-serif;
margin-left: 3px;
}
#journal .entry .post-content a.more-link i {
margin-left: 10px;
font-size: 14px;
}
/* ------------------------------------------------------------------ */
/* g. Call To Action Section
/* ------------------------------------------------------------------ */
#call-to-action {
background: #544A4A;
padding-top: 66px;
padding-bottom: 48px;
}
#call-to-action .action {
margin-top: 12px;
}
#call-to-action h1 {
font: 34px/42px raleway-bold, sans-serif;
color: #E4E2E2;
margin-bottom: 3px;
}
#call-to-action h1 a {
color: inherit;
}
#call-to-action p {
color: #9D9595;
font-size: 17px;
}
#call-to-action .button:hover,
#call-to-action .button:active {
background: #E4E2E2;
color: #544A4A;
}
#call-to-action p span {
font-family: 'notosans-bold', sans-serif;
color: #DDD9D9;
}
/* ------------------------------------------------------------------ */
/* h. Tweets Section - Main Page
/* ------------------------------------------------------------------ */
#tweets {
background: #f5f5f5 url(../images/tweets-bg.jpg);
padding-top: 60px;
padding-bottom: 30px;
border-top: 1px solid #E3E8E8;
border-bottom: 1px solid #C1CDCD;
}
.tweeter-icon { font-size: 54px; }
/* Twitter Feed */
#tweets #twitter {
margin: 24px auto;
padding: 0;
width: 90%;
}
#tweets #twitter li {
margin: 6px 0px 18px 0;
line-height: 24px;
}
#tweets #twitter li span {
display: block;
font: 24px/48px raleway-semibold, Sans-serif;
margin-bottom: 12px;
color: #99A0A8;
}
#tweets #twitter li b a {
font: 18px/36px notosans-regular, Sans-serif;
color: #A4ABB2;
border: none;
}
#tweets .button {
padding: 6px 24px;
}
/* ------------------------------------------------------------------ */
/* i. Blog
/* ------------------------------------------------------------------ */
.post {
padding-top: 24px;
padding-bottom: 18px;
}
.post .entry-header {
position: relative;
width: 100%;
}
.post .entry-header h1 {
font: 39px/48px raleway-semibold, sans-serif;
margin-bottom: 18px;
}
.post .entry-header h1 a,
.post .entry-header h1 a:visited { color: #313131; }
.post .entry-header h1 a:hover,
.post .entry-header h1 a:focus { color: #6e1b37; }
.post .post-meta {
font: 15px/24px notosans-regular, sans-serif;
}
.post .post-meta a,
.post .post-meta a:visited { color: #AFB4BB; }
.post .post-meta a:hover,
.post .post-meta a:focus { color: #6e1b37; }
.post .post-meta .date {
display: inline-block;
font: 15px/24px notosans-bold, sans-serif;
color: #313131;
}
.post .post-meta .categories {
display: inline-block;
}
.post .post-meta .categories a { display: inline-block; }
/* post image */
.post .post-thumb {
margin: 6px 0 18px 0;
width: 100%;
}
/* post content */
.post .post-content {
margin-bottom: 18px;
}
/* tags */
.post .post-content .tags {
margin-top: 18px;
font-family: notosans-regular, sans-serif;
}
.post .post-content .tags a { font-family: notosans-bold, sans-serif; }
/* bio */
.post .bio {
margin-top: 30px;
padding-top: 30px;
padding: 36px;
background: #EFF1F0;
border-radius: 3px;
}
.post .bio .gravatar {
width: 16.66667%;
float: left;
width: 72px;
height: 72px;
}
.post .bio .gravatar img {
margin-top: 12px;
border-radius: 100%;
}
.post .bio .about {
width: 78%;
float: right;
}
.post .bio .about h5 {
font: 18px/30px notosans-bold, sans-serif;
margin-bottom: 6px;
}
/* post-nav */
.post-nav {
margin: 24px 0;
padding: 30px 0 0 0;
border-top: 1px solid #E0E0E0;
font: 16px/30px notosans-regular, sans-serif;
}
.post-nav li {
display: inline-block;
margin: 0;
padding: 0;
width: 49%;
line-height: 30px;
}
.post-nav li a { color: #9FA5AD; }
.post-nav li a:hover { color: #313131; }
.post-nav li strong {
font: 16px/30px raleway-heavy, sans-serif;
text-transform: uppercase;
color: #6e1b37;
letter-spacing: 0.5px;
display: block;
}
.post-nav li.next {
float: right;
text-align: right;
}
.post-nav li.prev {
float: left;
text-align: left;
}
/* Comments
/* ------------------------------------------------------------------ */
#comments {
padding-top: 12px;
padding-bottom: 12px;
}
#comments h3 {
font: 20px/30px notosans-bold, sans-serif;
margin-bottom: 6px;
}
/* Comments List */
ol.commentlist {
border-top: 1px dotted #E1E5E3;
margin: 29px 0 54px 0;
padding: 0;
margin-left: 16.66667%;
}
.commentlist > li {
position: relative;
list-style: none;
margin: 0;
padding: 18px 0 17px 0;
border-bottom: 1px dotted #D9DEDB;
}
.commentlist li .avatar {
position: absolute;
left: -50px;
display: block;
height: 50px;
width: 50px;
}
.commentlist li .avatar img {
margin-top: 6px;
height: 50px;
width: 50px;
border-radius: 100% 100% 100% 100%;
}
.commentlist li .comment-info cite {
font: 16px/30px notosans-bold, sans-serif;
color: #454545;
}
.commentlist li .comment-info .comment-meta {
font-size: 14px;
line-height: 24px;
display: block;
}
.commentlist li .comment-info .comment-meta .reply {
font-family: notosans-bold, sans-serif;
}
.commentlist li .comment-info .comment-meta .sep {
margin: 0 5px;
color: #AEB6B7;
}
.commentlist li .comment-text {
clear: both;
margin: 24px 0 0 0;
padding: 0;
line-height: 24px;
}
/* children */
.commentlist li ul.children {
margin: 0;
padding: 18px 0 0 0;
}
.commentlist li ul.children li {
padding-left: 5% ;
padding-top: 17px;
border-top: 1px dotted #D9DEDB;
}
/* comment form */
#comments form {
margin-top: 36px;
}
#comments form label {
font: 16px/24px notosans-bold, sans-serif;
margin: 12px 0;
padding-left: 24px;
width: 41.66667%;
float: right;
}
#comments form div {
margin: 12px 0 18px 0;
}
#comments form input,
#comments form textarea,
#comments form select {
width: 58.33333%;
float: left;
}
#comments form textarea {
width: 100%;
}
#comments form button.submit {
text-transform: uppercase;
letter-spacing: 2px;
display: block;
margin-top: 12px;
}
#comments form span.required {
color: #6e1b37;
font-size: 13px;
}
/* Pagination */
.pagination { margin: 0 auto 42px auto; }
/* ------------------------------------------------------------------ */
/* j. Porfolio
/* ------------------------------------------------------------------ */
.portfolio section {
padding-top: 24px;
padding-bottom: 30px;
}
.portfolio .entry-media img {
margin-bottom: 24px;
}
.portfolio .entry-details {
font-size: 15px;
margin-bottom: 24px;
padding-right: 30px;
}
.portfolio .entry-excerpt {
font: 20px/36px raleway-regular, sans-serif;
color: #9FA5AD;
}
.portfolio .entry-details h1 {
font: 30px/42px raleway-semibold, sans-serif;
margin-bottom: 18px;
}
.portfolio .portfolio-meta-list li {
line-height: 30px;
margin-bottom: 12px;
}
.portfolio .portfolio-meta-list li span {
font-family: notosans-bold, sans-serif;
display: block;
color: #313131;
}
.portfolio .post-nav {
margin-left: 18px;
margin-right: 18px;
}
.portfolio #portfolio-wrapper {
margin-top: 6px;
}
/* ------------------------------------------------------------------ */
/* k. About
/* ------------------------------------------------------------------ */
/* Team Members */
#team-wrapper { }
#team-wrapper .member {
margin-bottom: 24px;
margin-top: 12px;
}
#team-wrapper img {
margin-bottom: 12px;
}
#team-wrapper h5 {
font: 16px/24px notosans-bold, sans-serif;
}
#team-wrapper span {
position: relative;
top: -6px;
font-size: 13px;
line-height: 18px;
color: #969696;
}
#team-wrapper .member-social {
font-size: 20px;
font-weight: normal;
line-height: 18px;
color: #969696;
margin: -12px 0 0 0;
padding: 0;
}
#team-wrapper .member-social li {
display: inline-block;
margin-right: 15px;
}
#team-wrapper .member-social li a { color: #424242; }
#team-wrapper .member-social li a:hover { color: #6e1b37; }
/* ------------------------------------------------------------------ */
/* l. Contact
/* ------------------------------------------------------------------ */
/* contact form */
#contact-form form { margin-bottom: 30px; }
#contact-form div {
float: left;
width: 100%;
}
#contact-form .half { width: 47%; }
#contact-form label {
display: inline-block;
float: left;
}
#contact-form input,
#contact-form textarea,
#contact-form select {
width: 100% !important;
min-width: none;
margin-bottom: 12px;
}
#contact-form button.submit {
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 24px;
}
#contact-form span.required {
color: #6e1b37;
}
#message-warning,
#message-success {
background: #cfd5d5;
padding: 24px 24px;
margin-bottom: 36px;
border-radius: 3px;
}
#message-warning { color: #6e1b37; }
#message-success { color: #6e1b37; }
#message-warning i,
#message-success i {
margin-right: 10px;
}
#image-loader {
display: none;
position: relative;
left: 18px;
top: 12px;
}
/* ------------------------------------------------------------------ */
/* m. footer
/* ------------------------------------------------------------------ */
footer {
margin-top: 66px;
margin-bottom: 84px;
font-size: 14px;
}
footer a, footer a:visited { color: #6A747C; }
footer a:hover { color: #6e1b37; }
/* footer nav */
footer .footer-nav {
font: 18px/36px raleway-bold, sans-serif;
margin: 0;
padding: 0 0 24px 0;
text-align: center;
border-bottom: 1px solid #c4caca;
}
footer .footer-nav li {
display: inline;
margin-right: 20px;
margin-left: 20px;
}
footer .footer-nav a { color: #7B858E; }
footer .footer-nav a:hover { color: #313131; }
/* social links */
footer .footer-social {
margin: 36px 0 24px 0;
padding: 0;
font-size: 30px;
text-align: center;
}
footer .footer-social li {
display: inline-block;
margin: 0;
padding: 0;
margin-left: 24px;
margin-right: 24px;
}
footer .footer-social li a { color: #7B858E; }
footer .footer-social li a:hover { color: #313131; }
/* copyright */
footer .copyright {
margin: 0;
padding: 12px 0 0 0;
text-align: center;
font-size: 15px;
font: 14px/30px notosans-regular, sans-serif;
}
footer .copyright li {
display: inline-block;
margin: 0;
padding: 0;
line-height: 24px;
}
.ie footer .copyright li {
display: inline;
}
footer .copyright li:before {
content: "|";
padding-left: 10px;
padding-right: 12px;
color: #B4BBBB;
}
footer .copyright li:first-child:before {
display: none;
}
/* Go To Top Button */
#go-top {
position: fixed;
bottom: 0px;
right: 25px;
display: none;
}
#go-top a {
text-decoration: none;
border: 0 none;
display: block;
width: 60px;
height: 40px;
background: url(../images/go-to-top.png) no-repeat 50% 50%;
background-color: #1f2024;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 3px 3px 0 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
#go-top a:hover { background-color: #0F9095; }
/* ==================================================================
* Sparrow Media Queries
* url: styleshout.com
* 03-05-2014
/* ================================================================== */
/* small screens
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
header .logo { left: 36px; }
/* page title
-------------------------------------------------------------------- */
#page-title h1 { font: 46px/60px raleway-bold, sans-serif; }
#page-content { width: 80%; }
#primary, #secondary {
float: none;
width: 100%;
}
#sidebar { padding: 0; }
/* link list */
#sidebar .link-list li {
display: inline-block;
}
#sidebar .link-list li a {
border: none;
color: #8d8d8d;
display: inline-block;
}
#sidebar .link-list li:before {
content: "|";
padding-left: 6px;
padding-right: 6px;
color: #D4D4D4;
}
#sidebar .link-list li:first-child:before {
display: none;
}
#sidebar .link-list li:first-child {
margin-left: 6px;
}
/* intro section - main page
-------------------------------------------------------------------- */
.slider-text h1 { font: 46px/60px raleway-bold, sans-serif; }
/* journal section - main page
-------------------------------------------------------------------- */
#journal .entry-header .permalink { display: none; }
#journal .entry-header .entry-title,
#journal .entry .post-content {
width: 75%;
padding-right: 30px;
}
#journal .entry .post-content { margin-left: 25%; }
#journal .entry .post-meta { width: 25%; }
/* Call To Action Section
/* ----------------------------------------------------------------- */
#call-to-action p { font-size: 16px; }
#call-to-action .button { font-size: 14px; }
/* blog
-------------------------------------------------------------------- */
.post .entry-header { text-align: center; }
/* portfolio
-------------------------------------------------------------------- */
.portfolio .entry-details { padding-right: 20px; }
.portfolio #portfolio-wrapper { margin-top: 24px; }
.portfolio .portfolio-list {
padding-right: 0;
padding-left: 0;
}
}
/* mobile wide/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
/* mobile navigation
-------------------------------------------------------------------- */
#nav-wrap {
width: auto;
margin: 0;
position: absolute;
top: 0;
right: 0;
}
#nav-wrap > a {
width: 48px;
height: 48px;
text-align: left;
background-color: #1f2024;
position: relative;
border: none;
float: right;
font: 0/0 a;
text-shadow: none;
color: transparent;
position: relative;
top: 36px;
right: 36px;
}
#nav-wrap > a:before,
#nav-wrap > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav-wrap > a:after { top: 60%; }
/* toggle buttons */
#nav-wrap:not( :target ) > a:first-of-type,
#nav-wrap:target > a:last-of-type {
display: block;
}
/* hide menu panel */
#nav-wrap ul#nav {
height: auto;
display: none;
clear: both;
width: auto;
position: relative;
top: 48px;
right: 0px;
}
/* display menu panels */
#nav-wrap:target > ul#nav {
display: block;
padding: 30px 20px 48px 20px;
background: #cfd5d5;
margin: 0 20px;
clear: both;
border-radius: 3px;
}
ul#nav li {
width: 92%;
display: block;
height: auto;
margin: 0 auto;
text-align: left;
}
ul#nav li {
border-bottom: 1px solid #2D2E34;
border-bottom-style: dotted;
}
ul#nav li a {
background-image: none;
margin: 0;
padding: 0;
font-size: 14px;
margin: 12px 0;
line-height: 14px; /* reset line-height from 48px */
border: none;
}
ul#nav span:after {
left: 5px;
}
/* Sub Menu */
ul#nav ul {
position: static;
background: none;
width: 100%;
padding-left: 15px !important;
/* for transition */
opacity: 0;
}
ul#nav ul li {
width: 100%;
padding: 0;
display: list-item;
border: none;
/* for transition */
height: 0px;
overflow: hidden;
border-bottom: 1px dotted #595B6A;
}
/*On Hover */
#nav li:hover > ul li { height: 30px; }
#nav li:hover > ul li:last-child { margin-bottom: 9px; }
/* Sub Menu Anchor links */
#nav ul li a {
white-space: normal;
padding-left: 0px !important;
color:#C0C0C0;
font-weight: bold;
font-size: 13px;
font: 13px/27px raleway-regular, sans-serif;
line-height: 30px; /* should be the same with li's height */
}
/* page title
-------------------------------------------------------------------- */
#page-title h1 { font: 38px/48px raleway-bold, sans-serif; }
#page-title p { font: 16px/30px notosans-regular, sans-serif; }
/* page content
-------------------------------------------------------------------- */
#page-content {
width: 480px;
padding-top: 30px;
}
/* page
-------------------------------------------------------------------- */
.page h1,
.title-heading { font: 32px/42px raleway-semibold, sans-serif; }
.page h1, .page p.lead { text-align: center; }
/* intro section - main page
-------------------------------------------------------------------- */
.slider-text {
margin-top: 42px;
margin-bottom: 30px;
width: 95%;
}
.slider-text h1 { font: 38px/48px raleway-bold, sans-serif; }
.slider-text p { font: 15px/30px notosans-regular, sans-serif; }
.slides .slider-image { width: 100%; }
.slides { overflow: hidden; }
/* journal section - main page
--------------------------------------------------------------------- */
#journal {
padding-top: 54px;
padding-bottom: 36px;
}
#journal h1 { margin-bottom: 0; }
#journal .blog-entries { margin-top: 0; }
#journal .entry-header .permalink {
display: none;
z-index: 1;
}
#journal .entry-header .entry-title {
padding: 0 30px;
margin-bottom: 6px;
right: 0;
text-align: center;
z-index: 3;
}
#journal .entry .post-content {
padding: 0 30px;
margin-top: 18px;
margin-left: 0;
}
#journal .entry .post-meta { text-align: center; }
#journal .entry .post-meta time,
#journal .entry .post-meta .dauthor {
display: inline;
}
#journal .entry .post-meta .dauthor:before {
content: "/";
padding-left: 5px;
padding-right: 5px;
}
/* Call To Action Section
/* ----------------------------------------------------------------- */
#call-to-action { text-align: center; }
#call-to-action h1 {
font-size: 32px;
margin-bottom: 6px;
}
/* tweets section - main page
----------------------------------------------------------------------- */
#tweets {
padding-top: 42px;
padding-bottom: 24px;
}
#tweets #twitter {
padding: 0 30px;
width: 100%;
}
.tweeter-icon { font-size: 54px; }
#tweets #twitter li span { font: 21px/42px raleway-semibold, sans-serif; }
#tweets #twitter li b a { font: 15px/30px notosans-regular, sans-serif; }
/* Blog Post
------------------------------------------------------------------ */
.post .entry-header h1 { font: 32px/42px raleway-semibold, sans-serif; }
/* bio */
.post .bio { padding-top: 18px; }
.post .bio .gravatar {
float: none;
width: 72px;
margin: 0 auto 18px auto;
}
.post .bio .about {
width: 100%;
float: none;
padding-left: 0;
text-align: center;
}
/* post-nav */
.post-nav { margin-top: 18px; }
.post-nav li {
display: block;
margin: 0 0 18px 0;
width: 100%;
}
.post-nav li.next {
float: none;
text-align: center;
}
.post-nav li.prev {
float: none;
text-align: center;
}
/* Comments*/
#comments h3 {
text-align: center;
margin-left: 0;
}
/* Comments List */
ol.commentlist {
width: 100%;
margin-left: 0;
}
.commentlist li .avatar { display: none; }
/* comment form */
#comments form { margin-left: 0; }
#comments form input,
#comments form textarea,
#comments form select,
#comments form label {
width: 100%;
float: none;
}
#comments form label { padding-left: 0; }
#comments form div { margin-bottom: 0; }
#comments form input { margin-bottom: 0; }
#comments form .message label { display: block; }
/* contact
----------------------------------------------------------------------- */
#contact-form div, #contact-form .half {
width: 100%;
float: none !important;
}
#contact-form .half { padding: 0; }
#contact-form label {
display: block;
float: none;
width: auto;
}
#contact-form input,
#contact-form textarea,
#contact-form select {
margin-bottom: 18px;
}
/* footer
------------------------------------------------------------------------ */
footer .copyright li:before { content: none; }
footer .copyright li { margin-right: 10px; }
footer .copyright, footer .social-links {
text-align: center;
float: none;
}
/* footer nav */
footer .footer-nav {
font: 15px/42px raleway-bold, sans-serif;
margin: 0;
padding: 0 0 18px 0;
text-align: center;
}
footer .footer-nav li {
display: inline;
margin-right: 12px;
margin-left: 12px;
}
/* social links */
footer .footer-social {
margin: 30px 0 12px 0;
font-size: 23px;
line-height: 36px;
}
footer .footer-social li {
margin-left: 12px;
margin-right: 12px;
}
}
/* mobile narrow
-------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
header .logo { z-index: 99999; }
/* page content
-------------------------------------------------------------------- */
#page-content {
width: auto;
}
/* primary navigation */
#nav-wrap { width: 100%; }
#nav-wrap ul#nav {
top: 72px;
right: 0px;
}
/* intro section - main page
------------------------------------------------------------------------- */
.slider-text { margin-top: 36px; margin-bottom: 27px; }
.slider-text h1 { font: 32px/42px raleway-bold, sans-serif; }
.slider-text p { font: 14px/27px notosans-regular, sans-serif; }
/* journal section - main page
------------------------------------------------------------------------- */
#journal .entry-title h3 {
font-size: 28px;
line-height: 36px;
}
/* tweets section - main page
----------------------------------------------------------------------- */
#tweets #twitter li span { font: 20px/39px raleway-semibold, sans-serif; }
#tweets #twitter li b a { font: 14px/24px notosans-regular, sans-serif; }
footer { margin-top: 48px; }
/* social links */
footer .footer-social { font-size: 22px; }
footer .footer-social li {
margin-left: 10px;
margin-right: 10px;
}
}