/* ********************************************************************************************************************* Grid - 12 Columns Fluid CSS Grid System 1200px - perfectly fits 1280 screens 12 columns margin 3% / 36px (full-width) col1 5.5% / 66px (full-width) 1000px - perfectly fits 1024 screens 12 columns margin 3% / 30px (full-width) col1 5.5% / 55px (full-width) **/ /*-------------------------------------------------------------- * Main container for all --------------------------------------------------------------*/ .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; } .push-right { float: right!important; } .push-left { float: left!important; } /*-------------------------------------------------------------- * Common columns definitions --------------------------------------------------------------*/ .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { 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 { margin: 0; } .col1 { width: 5.5%; } .col2 { width: 14%; } .col3 { width: 22.5%; } .col4 { width: 31%; } .col5 { width: 39.5%; } .col6 { width: 48%; } .col7 { width: 56.5%; } .col8 { width: 65%; } .col9 { width: 73.5%; } .col10 { width: 82%; } .col11 { width: 90.5%; } .col12 { width: 99%; margin: 0; } /*-------------------------------------------------------------- * Disable padding left/right 10px --------------------------------------------------------------*/ @media all and (min-width: 1024px) { .grid-1000 { max-width: 1000px; } .grid-1000 .row { padding: 0; } } /*-------------------------------------------------------------- * Small devices --------------------------------------------------------------*/ @media all and (max-width: 768px) { .row { } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 { float: none; width: 99%; } .push-right, .push-left { float: none!important; } } /************************************************************************************** * RESPONSIVE **/ @media all and (max-width: 768px) { /* Small menu */ .main-navigation, .header-menu ul, .nav-site-description { text-align: left; } .menu-toggle { color: #fff; background: #D44D5C; cursor: pointer; display: inline-block; font-weight: 400; margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; padding: .8em 1em; text-decoration: none; color:#eee; padding: 1.4em 1em; } .menu-toggle:hover, .menu-toggle:focus { } .main-navigation a { padding:1em; } .main-navigation li { width: 100%; text-align: left; } .main-navigation ul ul { border-bottom: 0; border-left: 0; border-right:0; float:none; position: static; } .main-navigation ul ul a { width:100%; font-size: .9em; } .main-navigation ul ul ul { position: static; } .main-navigation.toggled .menu-item-has-children > a:after { font-family: 'ThemeIcons'; margin-left: 5px; vertical-align: middle; content: "\33"; } .main-navigation.fix{ position: inherit!important; } .widget-area { margin-top: 1em; clear: both; margin: 0; border-top: 1px solid #e6e6e6; border-left: none; border-bottom: none; border-right: none; border-top: 1px solid #e6e6e6; width: 100%; } .site-main { padding-left: 25px; } } /************************************************************************************** * COMPONENT **/ /*-------------------------------------------------------------- Sticky nav --------------------------------------------------------------*/ .main-navigation.fix{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; max-width: 100%; border-bottom: 1px solid #ddd; } .main-navigation.fix a{ padding: 1em; font-size: .95em; } .main-navigation.fix ul ul { top: 3.4em; } nav#site-navigation.main-navigation.fix{ margin:0px !important; padding:0px !important; } .admin-bar .main-navigation.fix { top: 32px; } .main-navigation.fix .nav-menu{ max-width: 1170px; margin: 0 auto; } /*-------------------------------------------------------------- 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; } #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; } /*widget ul*/ .widget ul { margin-left: 0; padding-left: 15px; } .widget li { list-style: 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 { 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 { 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"; } /*-------------------------------------------------------------- 10.2 Post format --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } .format-quote .entry-header h1:before, .format-video .entry-header h1:before, .format-image .entry-header h1:before, .format-link .entry-header h1:before, .sticky .entry-header h1:before { font-family: 'ThemeIcons'; font-size: .8em; padding: .2em .4em; color: #dedede; border-radius: 4px; float: right; } .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"; } .sticky .entry-header h1:before { content:"\e01e"; } /*-------------------------------------------------------------- SOCIAL ICON --------------------------------------------------------------*/ .social-url { text-align: right; } .social-url a { text-align: left; display: inline-block; padding: .5em .5em .5em 0; margin: 1.8em .8em 1em 0; } /*-------------------------------------------------------------- Scroll to top --------------------------------------------------------------*/ #smoothup { background: #f7f7f7; padding: 10px 20px; color: #ccc; display: inline-block; border: 1px solid rgba(100,100,100, .1); border-top: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin-top: -1px; } #smoothup:hover { color: #aaa; } .gotop { display: inline-block; width: 100%; text-align: center; margin-bottom: 2em; } /*-------------------------------------------------------------- Breadcrumb --------------------------------------------------------------*/ .breadcrumb { margin: 0 0 1em; padding: 0; font-size: .92em; color: #777; } /*-------------------------------------------------------------- Slider --------------------------------------------------------------*/ #image-slider { background-color: #333; -webkit-box-shadow: inset 0 5px 81px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0 5px 81px rgba(0, 0, 0, 0.75); box-shadow: inset 0 5px 81px rgba(0, 0, 0, 0.75); border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden; } #image-slider .item{ padding: 2em; } #image-slider .carousel-caption { float: left; } #image-slider .carousel-caption p { color: #aaa; font-size: .9em; font-weight: 300; } #image-slider .carousel-img { width: auto; height: auto; display: inline-block; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius:2px; } #image-slider .carousel-img:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; } #image-slider h3.carousel-title { font-size: 1em; margin-bottom: 15px; margin-top: 5px; padding: 5px 0; color:#aaa; } #image-slider h2.carousel-title { font-size: 1.2em; margin-bottom: 5px; margin-top: 5px; padding: 0; color:#aaa; } #image-slider h3.carousel-title a, #image-slider h2.carousel-title a { color:#aaa; } #image-slider h3.carousel-title a:hover, #image-slider h2.carousel-title a:hover { color:#fff; } #image-slider .amount { color:#77a464; }