/********************************************************************************************************************** * Grid - 12 Columns Fluid CSS Grid System **********************************************************************************************************************/ .grid-1000, .grid-1200 { margin: 0 auto; padding: 0 0 0 1%; /* THAT'S THE NAME ;) */ } .grid-1200 { max-width: 1220px; } .grid-1000 { max-width: 1020px; } .row { clear: both; padding: 0 10px; } .features { clear: both; padding: 0; display: inline-block; width: 100%; } /********************************************************************************************************************** * RESPONSIVE ********************************************************************************************************************/ .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .feature { float: left; margin: 0 3% 0 0; } .col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12, .feature.last { margin: 0; } .col1 { width: 5.5%; } .col2 { width: 14%; } .col3, .columns-4 .feature { width: 22.5%; } .col4, .columns-3 .feature { width: 31%; } .col5 { width: 39.5%; } .col6, .columns-2 .feature { width: 48%; } .col7 { width: 56.5%; } .col8 { width: 65%; } .col9 { width: 73.5%; } .col10 { width: 82%; } .col11 { width: 90.5%; } .col12, .columns-1 .feature { width: 99%; margin: 0; } /* Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math*/ @media all and (min-width: 1024px) { .grid-1000 { max-width: 1000px; } .grid-1000 .row { padding: 0; } } /********************************************************************************************************************** * RESPONSIVE **********************************************************************************************************************/ @media all and (max-width: 769px) { .row { } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .columns-4 .feature, .columns-3 .feature, .columns-2 .feature { float: none; width: 99%; } } @media all and (max-width: 768px) { /* Small menu */ .main-navigation, .header-menu ul, .nav-site-description { text-align: center; padding: 2px; } .menu-toggle { background: none; color: #555; cursor: pointer; display: inline-block; font-weight: 400; margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; padding: .8em 1em; border:none; } .menu-toggle:hover, .menu-toggle:focus { background: none; color: #555; cursor: pointer; display: inline-block; font-weight: 400; margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; padding: .8em 1em; } .main-navigation li { width: 100%; text-align: center; } .main-navigation ul ul { border-bottom: 0; border-left: 0; border-right:0; background: #f6f6f6; float:none; position: static; } .main-navigation ul ul a { background: #f6f6f6; width:100%; font-size: .9em; } .main-navigation ul ul ul { border-top: 5px solid #fff; border-bottom: 5px solid #fff; position: static; } } /********************************************************************************************************************** * COMPONENT **********************************************************************************************************************/ /* Sticky nav */ .main-navigation.fix{ position: fixed !important; top: 0; left: 0; z-index: 1000; width: 100%; max-width: 100%; border-bottom: 1px solid #ccc; -moz-box-shadow: 0 1px 3px #ddd; -webkit-box-shadow: 0 1px 3px #ddd; box-shadow: 0 1px 3px #ddd; background:#fff; } nav#site-navigation.main-navigation.fix{ margin:0px !important; padding:0px !important; } .admin-bar .main-navigation.fix { top: 32px; } /* Template tag */ .comments-link:before { font-family: 'ThemeIcons'; margin-right:5px; content: "\77"; } .post-edit-link:before { font-family: 'ThemeIcons'; margin-right:5px; content: "\6c"; } .tags-links:before { font-family: 'ThemeIcons'; margin-right:5px; content: "\e018"; } .cat-links:before { font-family: 'ThemeIcons'; margin-right:5px; content: "\6d"; } .comments-link, .post-edit-link, .tags-links, .cat-links { margin-right:5px; } /* Widgets */ /* calendar */ #wp-calendar caption { text-align:center; padding: .25em; } table#wp-calendar { border:none; padding: 0; } #wp-calendar th, #wp-calendar td { text-align:center; padding: 0; } #wp-calendar td#prev { padding: .5em; text-align: left; background:#f6f6f6; } #wp-calendar td#next { padding: .5em; text-align: right; background:#f6f6f6; } /* rss */ .widget_rss ul { margin: 0!important; } .widget_rss li { list-style: none!important; margin-bottom:.5em; } .widget_rss img { display: inline-block; } .widget_rss li a.rsswidget { font-weight: bold; display: block; } .widget_rss .rss-date, .widget_rss cite { font-size:.9em; } .widget_rss li:before { display: none; } /*recent ul*/ .widget ul { margin-left: 0; } .widget li { list-style: none; } /* Search widget */ .widget_search .search-submit { display: none; } /* widget title */ .widget_archive h3.widget-title:before, .widget_recent_entries h3.widget-title:before, .widget_categories h3.widget-title:before, .widget_recent_comments h3.widget-title:before, .widget_calendar h3.widget-title:before, .widget_tag_cloud h3.widget-title:before, .widget_nav_menu h3.widget-title:before, .widget_search h3.widget-title:before , .widget_igthemes_recent_posts_widget h3.widget-title:before { font-family: 'ThemeIcons'; margin-right:5px; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .widget_archive h3.widget-title:before { content: "\e02f"; } .widget_categories h3.widget-title:before { content: "\e022"; } .widget_recent_comments h3.widget-title:before { content: "\77"; } .widget_recent_entries h3.widget-title:before, .widget_igthemes_recent_posts_widget h3.widget-title:before { content: "\68"; } .widget_calendar h3.widget-title:before { content: "\e023"; } .widget_nav_menu h3.widget-title:before { content:"\e02c"; } .widget_tag_cloud h3.widget-title:before { content:"\e018"; } .widget_search h3.widget-title:before { content:"\55"; } /* Post format */ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /* Post format */ .format-chat .entry-content { padding:1.5em; background: #f6f6f6; border-left: 4px solid #dedede; } .format-quote .entry-header h1:before, .format-video .entry-header h1:before, .format-image .entry-header h1:before, .format-link .entry-header h1:before, .format-gallery .entry-header h1:before, .format-audio .entry-header h1:before, .format-status .entry-header h1:before, .format-chat .entry-header h1:before, .sticky .entry-header h1:before { font-family: 'ThemeIcons'; font-size: 18px; width:28px; width: 30px; height: 30px; line-height: 28px; text-align: center; float: right; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .format-quote .entry-header h1:before { content:"\7c"; } .format-video .entry-header h1:before { content:"\e024"; } .format-image .entry-header h1:before { content:"\e005"; } .format-link .entry-header h1:before { content:"\e02b"; } .format-gallery .entry-header h1:before { content:"\e006"; } .format-audio .entry-header h1:before { content:"\e08e"; } .format-status .entry-header h1:before { content:"\e105"; } .format-chat .entry-header h1:before { content:"\77"; } .sticky .entry-header h1:before { content:"\e01e"; } /* Social icon */ .social-url { text-align:center; width:100%; display:block; padding-top:0.5em; padding-bottom:0.5em; } .social-url a { text-align:center; display:inline-block; margin:5px 2px; padding:10px 12px 6px 12px; } /* Recent Posts widget */ .ig-recent-posts-widget .post-title { font-size: 1em; } ul.ig-recent-posts-widget li:before { content: none; } ul.ig-recent-posts-widget li { list-style: none; border-bottom: 1px solid #eee; margin: -8px -12px 8px; padding: 10px; clear: both; } .ig-recent-posts-widget .post-image { display:inline-block; float: right; padding: 5px; } .ig-recent-posts-widget .post-excerpt { font-size: .9em; display: block; } .ig-recent-posts-widget .post-date { font-size: .88em; color:#aaa; display: block; } /* Social widget */ .ig-social-widget .facebook, .ig-social-widget .twitter, .ig-social-widget .google, .ig-social-widget .pinterest, .ig-social-widget .tumblr, .ig-social-widget .instagram, .ig-social-widget .linkedin, .ig-social-widget .dribbble, .ig-social-widget .vimeo, .ig-social-widget .youtube, .ig-social-widget .rss { display: block; width: 99%; color: #fff; margin-bottom: 5px; padding: 10px; border-radius: 2px; -moz-border-radius:2px; -webkit-border-radius:2px; } .ig-social-widget a { color:#fff; } .ig-social-widget a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: .9; } .ig-social-widget .text { font-family:sans-serif; font-weight: 300; font-size: 12px; display: inline-block; padding:0px 15px; } .ig-social-widget .facebook { background: url(../../images/social-dark-bg.png) repeat-y #5574b7; font-size: 15px; } .ig-social-widget .twitter { background: url(../../images/social-dark-bg.png) repeat-y #29c5f6; font-size: 15px; } .ig-social-widget .google { background: url(../../images/social-dark-bg.png) repeat-y #e75c3d; font-size: 15px; } .ig-social-widget .pinterest { background: url(../../images/social-dark-bg.png) repeat-y #fe434a; font-size: 15px; } .ig-social-widget .tumblr { background: url(../../images/social-dark-bg.png) repeat-y #6f85b4; font-size: 15px; } .ig-social-widget .instagram { background: url(../../images/social-dark-bg.png) repeat-y #4ca1f1; font-size: 15px; } .ig-social-widget .linkedin { background: url(../../images/social-dark-bg.png) repeat-y #3799da; font-size: 15px; } .ig-social-widget .dribbble { background: url(../../images/social-dark-bg.png) repeat-y #e64980; font-size: 15px; } .ig-social-widget .vimeo { background: url(../../images/social-dark-bg.png) repeat-y #4eb6db; font-size: 15px; } .ig-social-widget .youtube { background: url(../../images/social-dark-bg.png) repeat-y #e94c3d; font-size: 15px; } .ig-social-widget .rss { background: url(../../images/social-dark-bg.png) repeat-y #ff8a34; font-size: 15px; } /*Scroll to top */ #smoothup { color: #bababa; position:fixed; font-size: 30px; bottom:6px; right:40px; display:none; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; z-index: 9999; -moz-opacity: 0.70; -khtml-opacity: 0.70; opacity: 0.70; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); filter:alpha(opacity=70); } #smoothup:hover { } /* Breadcrumb */ .breadcrumb { margin: 0 0 1em; padding: 0; font-size: .92em; color: #777; } /* Related post */ .single .relatedposts .relatedthumb { display:inline-table; width: 30%; margin:10px 15px 0px 0px; } /* Author box */ .author-box { display:inline-block; width: 100%; clear:both; margin-bottom:1em; } .author-box img.avatar { float:left; width:80px; height:80px; margin:10px 20px 10px 0px; display:inline-block; } .author-box .description { width:80%; float:right; display:inline-block; } .author-box h3 { text-transform:capitalize; margin:0 0 10px 0 !important; } /* Slider */ #post-slider { margin-top: 1em; } #post-slider .item { margin: 1em; } #post-nav { margin-bottom: 1em 0; border:1px solid #e5e5e5; background: #fff; } #post-nav .item { padding: 1em; background: #fff; cursor: pointer; -webkit-box-shadow: inset 1px 0px 1px 0px #e5e5e5; -moz-box-shadow: inset 1px 0px 1px 0px #e5e5e5; box-shadow: inset 1px 0px 1px 0px #e5e5e5; } #post-nav .slick-current { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #product-carousel { margin-top: 1em; border: 1px solid #e5e5e5; } #product-carousel .item { background: #fff; padding: 1em; -webkit-box-shadow: inset 1px 0px 1px 0px #e5e5e5; -moz-box-shadow: inset 1px 0px 1px 0px #e5e5e5; box-shadow: inset 1px 0px 1px 0px #e5e5e5; cursor: pointer; } #product-carousel .slick-current { -webkit-box-shadow: none; -moz-box-shadow:none; box-shadow: none;; }