Template:Peking/css/layout

/*

=========================================================

• 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: #fff ;} img { border-radius: 3px; } .content-outer { background: #fff }

/* page title */

1. page-title {

  background: #383232 url();
  padding-top: 42px;
  padding-bottom: 54px;

}

1. page-title 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);

}

1. page-title h1 span,
2. page-title a { color:#4682B4; }
3. page-title p {

  font: 17px/36px notosans-regular, sans-serif;
  padding: 0;
  margin: 12px 4% 0;
  color: #b4a9a9;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, .3);

}

/* page content */

1. page-content {

  padding-top: 54px;
  padding-bottom: 54px;
  margin: 0 auto;
  width: 95%;

} /* page */ .page section {

  padding-top: 24px;
  padding-bottom: 12px;

} .page h1, .title-heading {

  font: 39px/48px raleway-semibold, sans-serif;
  margin-bottom: 18px;

}

/* sidebar */

1. sidebar {

  padding-top: 0px;
  padding-left: 0px;

}

1. sidebar h5 {

  font: 18px/30px notosans-bold, sans-serif;
  font-weight: normal;
  margin-bottom: 6px;

}

1. sidebar .widget { margin-bottom: 24px; }

/* Link list */

1. sidebar .link-list {

  margin: 12px 0 18px 0;
  padding: 0;

}

1. sidebar .link-list li {

  line-height: 24px;

}

1. sidebar .link-list li a {

  border: none;
  color: #838C95;

}

1. sidebar .link-list li a:hover {

  color: #313131;

} .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /* tag cloud */

1. sidebar .tagcloud {

  margin: 18px 0 18px -12px;
  padding: 0;

}

1. 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;

}

1. sidebar .tagcloud a:hover {

   color: #fff;
   background: #11ABB0;

}

/* Photostream */

1. sidebar .photostream {

  list-style: none;
  margin: 18px 0 24px -15px;
  padding: 0;
  overflow: hidden;

}

1. sidebar .photostream li {

  float: left;
  display: inline-block;
  margin: 0 0 15px 15px;
  padding: 0;

}

1. sidebar .photostream li a { }
2. sidebar .photostream li a img {

  border-radius: 3px;
  height: 54px;
  width: 54px;
  vertical-align: bottom;

}

/* search */

1. sidebar .widget_search form {

  /*position: relative; */
  margin: 24px 0 36px 0;

}

1. sidebar .widget .text-search {

padding-right: 40px; border:none;

  width: 100%;
  min-width: 150px;

  border-radius: 3px;

}

1. 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;*/

}

1. primary { }

/* ------------------------------------------------------------------ */ /* b. Header Styles /* ------------------------------------------------------------------ */

header {

  height: 96px;
  width: 100%;
  background: #383232 url(../images/header-bg.jpg);

}

/* 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

---

*/

1. nav-wrap ul, #nav-wrap li, #nav-wrap a {

margin: 0; padding: 0; border: none; outline: none; }

/* nav-wrap */

1. nav-wrap {

position: relative;

  font: 14px raleway-bold, sans-serif;
  float: right;
  margin-top: 36px;
  margin-right: 20px;
  z-index: 99999;

}

/* hide toggle button */

1. 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: #8a8383;

-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: #8a8383; 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 /* ------------------------------------------------------------------ */

1. intro { background: #383232 url(../images/header-bg.jpg); }

/* 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: #11ABB0; } .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 /* ------------------------------------------------------------------ */

1. info {

  background: #fff url(../images/content-bg.jpg);
  padding-top: 60px;
  padding-bottom: 42px;

}

1. info h2 {

 font: 18px/30px notosans-bold, sans-serif;
 color: #11ABB0;
 margin-bottom: 6px;

}

1. info p {

 font-size: 15px;
 line-height: 30px

}

/* ------------------------------------------------------------------ */ /* e. Works Section - Main Page /* ------------------------------------------------------------------ */

1. works {

  background: #f5f5f5 url(../images/works-bg.jpg);
  padding-top: 48px;
  padding-bottom: 36px;
  border-top: 1px solid #E3E8E8;
  border-bottom: 1px solid #E3E8E8;

}

1. works h1 {

  font: 20px/36px raleway-bold, sans-serif;
  margin-bottom: 36px;
  color: #A1A8AF;

}

/* Portfolio Content */

1. portfolio-wrapper { margin-top: 36px; }
2. 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: #11ABB0;
  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 /* ------------------------------------------------------------------ */

1. journal {

  background: #fff url(../images/content-bg.jpg);
  padding-top: 60px;
  padding-bottom: 48px;

}

1. journal a, #journal a:visited { color: #11ABB0; }
2. journal a:hover, #journal a:focus { color: #313131; }

1. journal h1 {

  font: 20px/36px raleway-bold, sans-serif;
  margin-bottom: 36px;
  color: #A1A8AF;

}

1. journal .blog-entries { margin-top: 0; }
2. journal .entry {

  margin-bottom: 12px;
  border-top: 1px dotted #d8d8d8;
  padding-top: 36px;

}

1. journal .blog-entries article.entry:first-child {

  border-top: none;
  padding-top: 18px;

}

/* post header */

1. journal .blog-entries .entry-header {

  position: relative;
  margin-bottom: 6px;

}

1. journal .entry-header .entry-title { padding-right: 16.66667%; }
2. journal .entry-header h3 { font: 31px/42px raleway-bold, sans-serif; }
3. journal .entry-header .permalink {

  position: absolute;
  top: 18px;
  right: 60px;
  z-index: 999999;

}

1. 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;

}

1. journal .entry-header .permalink a:hover {

  background-color: #11ABB0;

}

1. journal .entry-header .permalink a i {

  font-size: 24px;
  line-height: 48px;

}

/* post meta */

1. journal .entry .post-meta {

  font: 15px/21px notosans-regular, sans-serif;
  margin-top: 12px;
  margin-bottom: 0;
  text-align: right;

}

1. journal .entry .post-meta time,
2. journal .entry .post-meta .dauthor {

  display: block;

}

1. journal .entry .post-meta time {

  font-family: notosans-bold, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #878282;
  margin-bottom: 6px;

}

/* post content */

1. journal .entry .post-content { padding-right: 16.66667%; }
2. journal .entry .post-content p {

  font: 16px/30px notosans-regular, sans-serif;

}

1. journal .entry .post-content a.more-link {

  font: 16px/30px notosans-bold, sans-serif;
  margin-left: 3px;

}

1. journal .entry .post-content a.more-link i {

  margin-left: 10px;
  font-size: 14px;

}

/* ------------------------------------------------------------------ */ /* g. Call To Action Section /* ------------------------------------------------------------------ */

1. call-to-action {

  background: #544A4A;
  padding-top: 66px;
  padding-bottom: 48px;

}

1. call-to-action .action {

  margin-top: 12px;

}

1. call-to-action h1 {

  font: 34px/42px raleway-bold, sans-serif;
  color: #E4E2E2;
  margin-bottom: 3px;

}

1. call-to-action h1 a {

  color: inherit;

}

1. call-to-action p {

  color: #9D9595;
  font-size: 17px;

}

1. call-to-action .button:hover,
2. call-to-action .button:active {

  background: #E4E2E2;
  color: #544A4A;

}

/* ------------------------------------------------------------------ */ /* h. Tweets Section - Main Page /* ------------------------------------------------------------------ */

1. 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 */

1. tweets #twitter {

  margin: 24px auto;
  padding: 0;
  width: 90%;

}

1. tweets #twitter li {

  margin: 6px 0px 18px 0;
  line-height: 24px;

}

1. tweets #twitter li span {

  display: block;
  font: 24px/48px raleway-semibold, Sans-serif;
  margin-bottom: 12px;
  color: #99A0A8;

}

1. tweets #twitter li b a {

  font: 18px/36px notosans-regular, Sans-serif;
  color: #A4ABB2;
  border: none;

}

1. 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: #11ABB0; }

.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: #11ABB0; }

.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: #11ABB0;
  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 /* ------------------------------------------------------------------ */

1. comments {

  padding-top: 12px;
  padding-bottom: 12px;

}

1. 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 */

1. comments form {

  margin-top: 36px;

}

1. comments form label {

  font: 16px/24px notosans-bold, sans-serif;

margin: 12px 0;

  padding-left: 24px;
  width: 41.66667%;
  float: right;

}

1. comments form div {

  margin: 12px 0 18px 0;

}

1. comments form input,
2. comments form textarea,
3. comments form select {

  width: 58.33333%;
  float: left;

}

1. comments form .message label {

  display: none;

}

1. comments form textarea {

  width: 100%;

}

1. comments form button.submit {

text-transform: uppercase; letter-spacing: 2px;

  display: block;
  margin-top: 12px;

}

1. comments form span.required {

color: #11ABB0; 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 */

1. team-wrapper { }

1. team-wrapper .member {

  margin-bottom: 24px;
  margin-top: 12px;

}

1. team-wrapper img {

margin-bottom: 12px; }

1. team-wrapper h5 {

  font: 16px/24px notosans-bold, sans-serif;

}

1. team-wrapper span {

  position: relative;
  top: -6px;
  font-size: 13px;
  line-height: 18px;
  color: #969696;

}

1. team-wrapper .member-social {

  font-size: 20px;
  font-weight: normal;
  line-height: 18px;
  color: #969696;
  margin: -12px 0 0 0;
  padding: 0;

}

1. team-wrapper .member-social li {

  display: inline-block;
  margin-right: 15px;

}

1. team-wrapper .member-social li a { color: #424242; }
2. team-wrapper .member-social li a:hover { color: #11ABB0; }

/* ------------------------------------------------------------------ */ /* l. Contact /* ------------------------------------------------------------------ */

/* contact form */

1. contact-form form { margin-bottom: 30px; }
2. contact-form div {

  float: left;
  width: 100%;

}

1. contact-form .half { width: 47%; }
2. contact-form label {

display: inline-block; float: left; }

1. contact-form input,
2. contact-form textarea,
3. contact-form select {

 	width: 100% !important;
  min-width: none;
  margin-bottom: 12px;

}

1. contact-form button.submit {

  text-transform: uppercase;
	letter-spacing: 2px;
  margin-top: 24px;

}

1. contact-form span.required {

color: #11ABB0; }

1. message-warning,
2. message-success {

  display: none;

background: #383232; padding: 24px 24px; margin-bottom: 36px;

	border-radius: 3px;

}

1. message-warning { color: #DD4646; }
2. message-success { color: #11ABB0; }

1. message-warning i,
2. message-success i {

  margin-right: 10px;

}

1. image-loader {

  display: none;
  position: relative;
  left: 18px;
  top: 12px;

}

/* ------------------------------------------------------------------ */ /* m. footer /* ------------------------------------------------------------------ */

footer {

  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 14px;

} footer a, footer a:visited { color: #fff; } footer a:hover { color: #fff; }

/* footer nav */ footer .footer-nav {

  font: 18px/36px raleway-bold, sans-serif;
  margin: 0;
  padding: 0 0 0 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: #fff; }

/* 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;

}

footer .copyright li a { color: #7B858E; } footer .copyright li a:hover { color: #fff; } .ie footer .copyright li {

  display: inline;

}

footer .copyright li:first-child:before {

   display: none;

}

/* Go To Top Button */

1. go-top {

position: fixed; bottom: 0px;

   right: 25px;
   display: none;

}

1. go-top a {

text-decoration: none; border: 0 none; display: block; width: 60px; height: 40px; background: url() 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;

}

1. go-top a:hover { background-color: #383232; }

1. page-footer {

  background: #544a4a url:();
  padding-top: 42px;
  padding-bottom: 54px;

}