/*
Theme Name: Harmoni
Theme URI: http://demo.arifqodari.com/harmoni
Author: Arif Qodari
Author URI: http://about.me/arifqodari
Description: Harmoni is a simple, and clean WordPress theme with responsive design. It is suitable for blogging, magazine, or online newspaper websites that prefer to have light look and white-clean spaces that makes your website very useful and effective for managing lots of posts on a page. Harmoni is developed for better content readability.
Version: 1.2
License: GNU General Public License
License URI: licenses/GPL.txt
Tags: white, light, post-formats, sticky-post, custom-menu, two-columns, right-sidebar, right-sidebar, full-width, flexible-width, theme-options, unlimited-colors, social-media, rtl, translation-ready, slider, infinite-scroll, widget-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Based on Skeleton and 978.gs
*/


/* Table of Contents
==================================================
* #Base 978 Grid
* #Tablet (Portrait)
* #Mobile (Portrait)
* #Clearing */



/* #Base 978 Grid
================================================== */

.row {
  height: 1%;
  max-width: 978px;
  width: 100%;
}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  float: left;
  margin-left: 3.06%;
}

.col1:first-child,
.col2:first-child,
.col3:first-child,
.col4:first-child,
.col5:first-child,
.col6:first-child,
.col7:first-child,
.col8:first-child,
.col9:first-child,
.col10:first-child,
.col11:first-child,
.col12:first-child {
  margin-left: 0px;
}

.col1 {
  width: 5.52%;
}

.col2 {
  width: 14.11%;
}

.col3 {
  width: 22.70%;
}

.col4 {
  width: 31.29%;
}

.col5 {
  width: 39.88%;
}

.col6 {
  width: 48.47%;
}

.col7 {
  width: 57.05%;
}

.col8 {
  width: 65.64%;
}

.col9 {
  width: 74.23%;
}

.col10 {
  width: 82.82%;
}

.col11 {
  width: 91.41%;
}

.col12 {
  width: 100%;
}

.one-third {
  width: 33.33%;
}

.two-third {
  width: 66.67%;
}

/* Offsets */
.offset1 {
  padding-left: 8.59%;
}

.offset2 {
  padding-left: 17.18%;
}

.offset3 {
  padding-left: 25.77%;
}

.offset4 {
  padding-left: 34.36%;
}

.offset5 {
  padding-left: 42.94%;
}

.offset6 {
  padding-left: 51.53%;
}

.offset7 {
  padding-left: 60.12%;
}

.offset8 {
  padding-left: 68.71%;
}

.offset9 {
  padding-left: 77.30%;
}

.offset10 {
  padding-left: 85.89%;
}

.offset11 {
  padding-left: 94.48%;
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 748px */

@media only screen and (min-width: 748px) and (max-width: 1001px) {

  .row {
    height: 1%;
  }

  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col6,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 {
    float: left;
    margin-left: 2.67%;
  }

  .col1:first-child,
  .col2:first-child,
  .col3:first-child,
  .col4:first-child,
  .col5:first-child,
  .col6:first-child,
  .col7:first-child,
  .col8:first-child,
  .col9:first-child,
  .col10:first-child,
  .col11:first-child,
  .col12:first-child {
    margin-left: 0px;
  }

  .col1 {
    width: 5.88%;
  }

  .col2 {
    width: 14.44%;
  }

  .col3 {
    width: 22.99%;
  }

  .col4 {
    width: 31.55%;
  }

  .col5 {
    width: 40.11%;
  }

  .col6 {
    width: 48.66%;
  }

  .col7 {
    width: 57.22%;
  }

  .col8 {
    width: 65.78%;
  }

  .col9 {
    width: 74.33%;
  }

  .col10 {
    width: 82.89%;
  }

  .col11 {
    width: 91.44%;
  }

  .col12 {
    width: 100%;
  }

  .one-third {
    width: 33.33%;
  }

  .two-third {
    width: 66.67%;
  }

  /* Offsets */
  .offset1 {
    padding-left: 8.56%;
  }

  .offset2 {
    padding-left: 17.11%;
  }

  .offset3 {
    padding-left: 25.67%;
  }

  .offset4 {
    padding-left: 34.22%;
  }

  .offset5 {
    padding-left: 42.78%;
  }

  .offset6 {
    padding-left: 51.34%;
  }

  .offset7 {
    padding-left: 59.89%;
  }

  .offset8 {
    padding-left: 68.45%;
  }

  .offset9 {
    padding-left: 77.01%;
  }

  .offset10 {
    padding-left: 85.56%;
  }

  .offset11 {
    padding-left: 94.12%;
  }

  #featured img {
    height: auto !important;
  }
}


/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 300px */

@media only screen and (min-width: 0px) and (max-width: 747px) {

  .row {
    height: 1%;
  }

  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col6,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 {
    float: left;
    margin-left: 0;
    display: inline-block;
  }

  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col6,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 {
    width: 100%;
  }

  .logo {
    text-align: center;
  }

  .social-media-icon {
    float: left !important;
    width: 100%;
    text-align: center !important;
    overflow: hidden;
    position: relative;
    display: block;
  }

  .social-media-icon .icon {
    float: none !important;
    text-align: center !important;
    display: inline;
  }

  .primary-menu {
    background: none !important;
  }

  #primary-menu {
    display: none;
  }

  .tinynav {
    padding: 5px;
    width: 100%;
    display: block !important;
  }

  #featured img {
    height: auto !important;
  }

  #featured .caption h2 {
    font-size: 1em !important;
  }

  #post .right-column {
    width: 100% !important;
  }

  #post .right-column .entry-meta {
    display: block !important;
  }

  #post .left-column {
    display: none;
  }

  aside {
    margin-top: 30px;
    text-align: center;
  }

  .widget_search input {
    width: 90% !important;
    text-align: center;
  }

  .sidebarfooter {
    text-align: center;
  }

  .footermenu {
    width: 100%;
    text-align: center;
  }

  .footermenu ul {
    text-align: center;
    display: inline-block;
  }

  .footerinfo {
    width: 100%;
    text-align: center;
  }

  .sidebarfooter div.col3 {
    margin-bottom: 20px;
  }

  .sidebarfooter div.col3:last-child {
    margin-bottom: 0;
  }

}


/* #Clearing
================================================== */
/* Self Clearing Goodness */

#container:after {
  content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.row:after,
.clearfix:after {
  clear: both;
}

.row,
.clearfix {
  zoom: 1;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}