@media screen and (max-width: 680px) {



  /* Overall */

  .container {margin: 10px auto; width: 400px; overflow: hidden;}

  .header {position: relative; width: 400px; margin: 0 auto; padding: 40px 0 0 0;}

  .section {clear: both; margin: 20px 0;}

  .aside {clear: both; margin: 30px 0; background: #f8f8f8;}

  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 400px; color: #777;}



  /* .header form */

  .header-form {display: none;}



  /* .nav */

  .mobile-nav {display: block; width: 360px; margin: 0 auto;}

  .nav {position: relative; height: 40px; padding: 0; margin-top: 40px; clear: both; line-height: 1em; text-transform: uppercase;}

  .nav ul {display: none; list-style: none;}



  /* img */

  img {max-width: 100%; height: auto;}



}



@media screen and (min-width: 681px) and (max-width: 980px) {



  /* Overall */

  .container {margin: 10px auto; width: 90%; overflow: hidden;}

  .header {position: relative; width: 90%; margin: 0 auto; padding: 120px 0 0 0;}

  .section {float: left; width: 60%; margin: 20px 0;}

  .aside {float: right; width: 35%; margin: 30px 0; background: #f8f8f8;}

  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #777;}



  /* .header form */

  .header-form {clear: both; overflow: hidden; position: absolute; top: 4px; right: 20px;}

  .header-text {width: 80px; border: 1px solid #bbb;}



  /* .nav */

  .mobile-nav {display: none;}

  .nav {position: relative; height: 40px; background: #000; padding: 0; margin-top: 110px; clear: both; line-height: 1em; text-transform: uppercase;}

  .nav ul {list-style: none;}

  .nav a {display: block; padding: 14px 10px; color: #fff;}

  .nav a:hover {text-decoration: underline; color: #fff;}

  .nav ul ul a {display: block; padding: 14px; position: relative;}



  /* img */

  img {max-width: 100%; height: auto;}



}



@media screen and (min-width: 981px) {



  /* Overall */

  .container {margin: 10px auto; width: 1020px; overflow: hidden;}

  .header {position: relative; width: 1020px; margin: 0 auto; padding: 110px 0 0 0;}

  .section {float: left; width: 640px; margin: 30px 0 30px 20px;}

  .aside {float: right; width: 300px; margin: 30px 20px 30px 0; background: #f8f8f8;}

  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 1020px; color: #777;}



  /* .header form */

  .header-form {clear: both; overflow: hidden; position: absolute; top: 4px; right: 20px;}

  .header-text {width: 100px; border: 1px solid #bbb;}



  /* .nav */

  .mobile-nav {display: none;}

  .nav {position: relative; height: 40px; background: url('images/nav_bg.gif') no-repeat center; padding: 0 20px; margin-top: 120px; clear: both; line-height: 1em; text-transform: uppercase;}

  .nav ul {list-style: none;}

  .nav a {display: block; padding: 14px; color: #fff;}

  .nav a:hover {text-decoration: underline; color: #fff;}

  .nav ul ul a {display: block; padding: 14px; position: relative;}



}





/* OVERALL */

body {font: normal 0.8em 'Muli', Lucida Sans Unicode, Lucida Grande, Verdana, Tahoma, Arial, Sans-serif; color: #666; background: #fff url('images/background-ap.gif') top center; background-repeat: no-repeat}

body p {margin-bottom: 20px; line-height: 1.8em; word-wrap: break-word;}



/* hgroup */

h1,

h2,

h3,

h4,

h5,

h6 {line-height: 1.2em; margin-bottom: 15px; font-family: 'Montserrat', Sans-serif; font-weight: 400;}

h1 {font-size: 1.6em; color: #000;}

h2 {font-size: 1.4em; color: #000;}

h3 {font-size: 1.2em; color: #333;}

h4 {font-size: 1.2em; color: #333;}

h5 {font-size: 1em; color: #555;}

h6 {font-size: 1em; color: #555;}



/* LINK */

a {color: #38ed96; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

a:hover {color: #18de7e;}



/* .header */

.header h1,

.header h5 {font-size: 48px; text-transform: uppercase; margin: 10px 0 0 0;}

.header-title {color: #000;}

.header-desc {margin: 0; color: #777;}



/* .nav */

.nav li {float: left; position: relative; z-index: 100;}



.nav ul ul {position: absolute; z-index: 120; width: 200px; background: #000; display: none; z-index: 200;}

.nav ul ul li {display: block; float: none}



.nav ul ul ul {position: absolute; left: 200px !important; top: 0 !important;}



.nav a.sf-with-ul {padding-right: 20px;}

.nav .sf-sub-indicator {background: #fff; display: block; background: url('images/menu_down.gif') no-repeat 0 0; width: 5px; height: 3px; position: absolute; top: 18px; right: 8px; text-indent: -9999px;}

.nav .sub-menu .sf-sub-indicator {background: #fff; display: block; background: url('images/menu_right.gif') no-repeat 0 0; width: 3px; height: 5px; position: absolute; top: 13px; right: 5px; text-indent: -9999px;}



/* .article */

.sticky {}

.article {margin-bottom: 50px; padding-bottom: 20px; background: url('images/break.gif') repeat-x bottom center; overflow: hidden; clear: both;}

.article .post-thumb {padding: 2px; border: 1px solid #ddd;}

.article .post-header {margin-bottom: 30px; overflow: hidden;}

.article .post-date {float: left; margin-right: 10px; background: #a7ffce; color: #fff; width: 45px; padding: 18px; line-height: 1em; font-size: 1.2em; text-align: center; text-transform: uppercase;}

.article .post-date span {color: #fff; font-size: 1.4em;}

.article h2.post-title {font: italic 400 1.8em 'Lora', Serif; margin: 10px 0 5px 0; line-height: 1.2em;}

.article h2.post-title a {color: #000;}

.article .post-comment {padding: 2px 0 2px 20px; background: url('images/comment_icon.gif') no-repeat 0 4px;}

.article .attachment-alignleft {float: left; margin: 0 10px 5px 0;}

.article .archives {overflow: hidden; clear: both; padding: 10px 0;}

.article .archives .archives-box {width: 45%; float: left; padding: 2px;}



/* .article misc */

.article blockquote {font: italic 400 1.4em 'Lora', Serif; display: block; clear: both; margin: 20px 0; padding: 20px 20px 20px 60px; background: #f8f8f8 url('images/blockquote.gif') no-repeat 20px 25px; font-style: italic; color: #888;}

.article blockquote p {padding: 0;}

.article ul {margin: 0 0 20px 25px; list-style: circle outside;}

.article ol {margin: 0 0 20px 25px; list-style: decimal outside;}

.article li {margin: 3px 0; line-height: 1.8em;}



/* .article misc */

.pagetitle {text-align: center; font-size: 2em; padding: 20px; color: #999;}



.page-pagination {font-weight: bold; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 5px 0;}



ul.pagination {clear: both; font-size: 0.85em; padding: 10px 0; overflow: hidden; list-style: none;}

ul.pagination li {float: left;}

ul.pagination li.pages {margin-right: 10px;}

ul.pagination a:hover,

ul.pagination .current-page {padding: 5px 10px; margin-right: 5px; background: #ff8f85; color: #fff;}

ul.pagination a {padding: 5px 10px; margin-right: 5px; background: #eee; color: #666;}



.post-footer {padding: 20px 0; margin: 0; overflow: hidden;}

.post-footer ul {margin: 0; list-style: none;}

.post-footer ul li {margin: 5px 0;}



ul.post-info-meta {color: #888; padding: 0;}

ul.post-info-meta li {list-style: none; float: left;}

ul.post-info-meta li.post-info-comment {float: right;}



.footer-navi {clear: both; overflow: hidden; padding: 0 !important; margin-bottom: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}

.footer-navi li.previous {float: left;}

.footer-navi li.next {float: right;}



/* .gallery */

.gallery {clear: both; overflow: hidden;}

.gallery .gallery-item {margin-top: 0 !important;}

.gallery dl {margin: 0;}

.gallery a {padding: 5px; display: block;}

.gallery a img {max-width: 100%; height: auto;}

.gallery-caption {}



/* .sideform */

.sideform {clear: both; overflow: hidden; text-align: center;}

.sidetext {width: 150px; margin: 2px auto; color: #888; border: 1px solid #bbb;}



/* .side-widget */

.side-widget {padding: 20px 20px 30px 20px; margin-bottom: 20px; background: url('images/side_bg.gif') no-repeat bottom center; overflow: hidden; clear: both;}

.textwidget {overflow: hidden; clear: both;}

.side-widget h3 {font-size: 1.3em; font-weight: 400; text-transform: uppercase; text-align: center; margin-bottom: 15px; color: #888;}

.side-widget select {width: 90%;}

.side-widget ol,

.side-widget ul {clear: both; list-style: none;}

.side-widget ol.children,

.side-widget ul.children {clear: both; list-style: none; margin-left: 20px;}

.side-widget ol li,

.side-widget ul li {margin: 5px 0; line-height: 1.8em;}



/***** WIDGET *****/

/* .flickr */

.flickr {clear: both; padding: 10px 0;}

.flickr .flickr_badge_image {float: left; padding: 5px;}

.flickr .flickr_badge_image img {}



/* .social-icons */

ul.social-icons li {float: left;}

.social-rss,

.social-facebook,

.social-twitter,

.social-pinterest {display: block; width: 48px; height: 48px; float: left; background: url('images/social_icons.gif') no-repeat; text-indent: -9999px;}

.social-rss {background-position: 0 0; margin-right: 16px;}

.social-twitter {background-position: -68px 0; margin-right: 16px;}

.social-facebook {background-position: -136px 0; margin-right: 16px;}

.social-pinterest {background-position: -204px 0;}



/* .twitter */

.tweet_list {padding: 5px 0;}

.tweet_time {font-style: italic;}



/* .footer */

p.footer-copy {background: url('images/nav_bg.gif') no-repeat center; padding: 10px 20px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}

p.footer-copy .footer-credit {display: block; float: right; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat 0 0; text-indent: -9999px; margin-top: 5px;}



/* .comment-box */

.comment-box {padding: 0 0 20px 0; overflow: hidden;}

.comment-box h4 {font-size: 1.4em; margin: 10px 0;}

#respond {padding: 10px; background: #fff;}

.comment-text {width: 25%; margin-right: 5px;}

.comment-textarea {width: 95%;}

.comment-text,

.comment-textarea {border: 1px solid #ccc; padding: 5px; color: #999; font: normal 0.85em Verdana, Tahoma, Arial, San-serif;}

.avatar {margin-right: 20px; float: left; border: 1px solid #999;}

.comment-meta {clear: both; overflow: hidden;}

.comment-meta h6 {font-size: 1em; margin-bottom: 3px;}

.comment-meta small {font-style: italic; color: #999; font-size: 0.85em;}

.comment-content {padding: 5px 10px; overflow: hidden;}

.comment-content p {padding: 5px 0; margin: 0 0 10px 55px; line-height: 1.8em}

.commentlist li {border-bottom: 1px solid #ddd; margin-bottom: 20px; list-style: none;}

.commentlist li.bypostauthor {}

.commentlist ul.children {padding: 0;}

.commentlist ul.children li {border: none; border-left: 1px solid #ddd; padding: 0 0 0 30px; margin: 0; list-style: none;}

a.comment-reply-link {float: right;}



/* #wp-calendar */

#wp-calendar {text-align: center; width: 100%; font-size: 0.9em;}

#wp-calendar caption {font-weight: bold; text-align: center; padding: 5px 0; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee;}

#wp-calendar th {font-style: normal; text-transform: capitalize; padding: 2px; border-right: 1px solid #eee;}

#wp-calendar td {font-style: normal; padding: 2px; border-right: 1px solid #eee;}

#wp-calendar tr {border-top: 1px solid #eee; border-left: 1px solid #eee;}

#wp-calendar tfoot td {border-bottom: 1px solid #eee;}



/* img */

img.aligncenter {display: block; margin: 0 auto 10px auto;}

img.alignright {display: inline; margin: 0 0 10px 20px;}

img.alignleft {display: inline; margin: 0 20px 10px 0;}

.aligncenter,

.centered {display: block; margin: auto;}

.alignleft {float: left; margin-right: 10px;}

.alignright {float: right; margin-left: 10px;}



/* .wp-caption */

.aligncenter,

div.aligncenter {display: block; margin-left: auto; margin-right: auto;}

.wp-caption {border: 1px solid #ccc; background: #efefef; margin: 10px; padding-top: 4px; text-align: center;}

.wp-caption img {border: 0;}

.wp-caption p.wp-caption-text {font-size: 0.85em; line-height: 1.2em; padding: 3px 0; margin: 0;}



/* Input and label */

select,

textarea,

input {border: 1px solid #ccc; color: #888; padding: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-family: 'Muli', Arial, Verdana, Sans-serif;}

input[type=submit] {border: 1px solid #ccc; color: #555; cursor: pointer; background: #eee; padding: 5px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

input[type=submit]:hover {border: 1px solid #aaa; background: #ccc;}

label {display: inline-block; margin-right: 20px;}



/* Misc */

.hidden {display: none;}

.focused {border: 1px solid #888;}

.highlight {background: #efefef; padding: 0 2px;}

.button {padding: 1px 5px;}

.fade {filter: alpha(opacity=50); opacity: 0.5;}

.clearfix {clear: both; height: 10px;}

.shadow {-webkit-box-shadow: 0 0 5px 0 #aaa; box-shadow: 0 0 5px 0 #aaa;}

.transparency {background-color: rgba(255, 255, 255, 0.8);}

.radius-100 {-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;}

.radius-10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

.radius-8 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

.radius-4 {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}