Search Results for 'adjust page width'

[wh]

Hi Guys - I'm using the Monochrome Pro theme and I want my site to display the full page when viewed on an iPad in portrait / vertical mode.

I believe the breakpoint is 782px with this code @media only screen and (max-width: 782px) in the style.css

What is the best way to change this so an iPad viewing at 768px can see the entire site in full width?

If I edit the style.css, won't this be changed with an update? If I add new css code into the additional css theme customization area, won't this just be in addition to the current media query because the query is different?

For example

The existing code it this:

@media only screen and (max-width: 782px)

If I add

@media only screen and (max-width: 767px)

to the CSS in theme customization, it won't override because it's just different.

Please help.

[RickStewart]

Hello,

I am using the Parallax Pro theme, but I'm looking for guidance in general using media queries with Genesis themes.

In the Parallax Pro theme you have break points defines as follows:

@media only screen and (max-width : 1180px) { }

@media only screen and (max-width : 1020px) { }

@media only screen and (max-width : 860px) { }

@media only screen and (max-width : 480px) { }

This takes care of the theme's element layout as envisioned by the theme creator.

The question is, for my added content is it a good idea to restrict oneself to the break points as defined by the theme? Are there known issues with adding extra break points to
tweak font size or content placement etc. to give the webpage finer grained adjustments?

Just looking for your experiences making the webpages responsive and what I should look out for.

I appreciate any sharing of your expertise.

thanks,

Rick Stewart

---

Warm regards,

Rick Stewart
web: https://windyhilldevelopers.com
email: [email protected]

[CleanPageDom]

Hi Harry

I believe it is because the .site-header has position: fixed; - so it is covering up your .top-bar.widget-area.

There are a number of ways around it, depending on how you want the header/nav to behave (ie if you are happy to leave it at the top or if you want it to follow you down the screen).

One solution may be to add this to .top-bar.widget-area:

position: fixed;
width: 100%;
z-index: 1001;

Then add this to .site-header:
border-top: 38px solid #fff; /*The 38px is the height of your top bar*/

You might also need to adjust .parallax-home .site-inner { margin-top: XXpx; } in order to get the slider to display fully. This might have a knock-on effect on your inner pages, which could probably be solved with some more margin/padding to .site-inner.

With this solution, the top bar follows you down the page like the header.

Thanks
Dom

---

Let’s build a website together…

[Andykev]

.sidebar .widget {
	border-bottom: 1px solid #e8e8e8;
	margin-bottom: 20px;
	padding: 20px 0px;
	word-wrap: break-word;
	min-width: 380px;
}

Also, making the font bigger, look also to the box (your pink box) a bit farther down and adjust those.
THE ABOVE code is to widen your sidebar slightly, (add min-width property) for the icons to be on the same line, otherwise making them larger will "stack them".

YOU should use your "Inspect Element" (see topic at top of this forum by Victor Font) and you will quickly be able to target any section of your web page and determine the code and it's location. You can adjust and play with the numbers using this to see what works, then copy what you want and then properly change your actual files.

[jdgd]

I've been working in Showcase Pro and everything has been straight forward, but I can't for the life of me figure out how to get a simple widget to be 100% in width. When I do a 3 column layout they always have padding on the sides:

I've tried setting the .wrap CSS class to padding: 0, but that only eliminates the right side padding. For some reason the "widget-area" DIV won't go 100% width.

This is the code I'm using to build the widget:

	genesis_widget_area( 'studio-page-2', array(
		'before' => '<div id="studio-page-2" class="studio-page-2 flexible-widget-area"><div class="wrap"><div class="widget-area">',
		'after'  => '</div></div></div>',
	) );

And here are the CSS adjustments I'm using:

.curriculum-page-2 {
background: #fff;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}

.curriculum-page-2 .wrap {
padding: 0;
/*margin: 0;*/
}

.curriculum-page-2 .one-third {
padding: 3% 0 3% 0;
background: #D3D2D2;
border: 2px solid #fff;
/*margin: 0 auto 0 0;*/
}

.curriculum-page-2 .widget:nth-of-type(1) {
text-align: center;
}

Any help would be greatly appreciated. Thank you!

[Ben]

I am using the Genesis Framework with the simple theme. My configuration is sidebar-content-sidebar.

I require reducing the space between the outer sidebars (in the horizontal direction across the page). Mainly, I would like to increase the width of the central content block to fill the space more effectively, but I would also like to be able to adjust the widths of the sidebars at some time in the future.

I want to be able to do this whilst maintain the same width of the site.

Also, I need the site to scale properly in the originally intended responsive manner across all devices, desktop, tablet and mobile.

I did get offered a solution by Studiopress, but implementing meant the site went bonkers when the width of the browser was reduced, and also for tablet and mobile making it right dogs dinner in those two modes.

I realise this is probably non-trivial. I appreciate any ideas or light that can be shed on the issue.

Many thanks for your time in advance, Ben.

[FrankJohnson]

Friends:

I have a general question about media queries and then a question about a specific problem I'm encountering implementing media queries on a particular site.

A little background might be helpful. My HTML/CSS skills are self-taught, which means they oftentimes seem deficient. I tend to arrive at the final code I use through a trial-and-error process (I know it's not the best and that I should probably take a comprehensive course at some point, but with more than a full-time job and a family, it's sometimes hard to find the time). One of the areas where my knowledge is definitely insufficient is media queries. I'm just starting to use them, and I'm struggling a bit with the concepts.

With that as background, here's my general question: from what I've read, it seems to me that the best approach is not to target specific devices (which would be an endless process I think), but to instead keep adjusting the width of the viewport to find each breakpoint and then create specific media queries for each of the breakpoints I find. Am I on the right track?

Now, the more specific question. I'm working on this site. The stylesheet is here.

The process I have followed so far is this:

1. With a lot of help from Brad at WP Sites, I was able to implement Ambiance Pro so that it displays a single post on the home page.

2. I've adjusted the basic CSS so it displays how I want the home page post to appear when the viewport is wide (1519 pixels wide on at full width on the monitor I'm using).

3. I then wanted to implement media queries. As a start, I removed all of the media queries in the Ambiance Pro stylesheet and saved them.

4. I then started reducing the width of the viewport until the layout broke (I'm using this Chrome extension to adjust the browser width - not sure if that matters or not, but ....). The first breakpoint was at about 1198 pixels (I can't recall the exact width). I created a media query for a max-width of 1230 pixels and the 1198 pixel breakpoint was solved (I set the max-width at 1230 because I wanted to maintain a bit more whitespace in the left and right margins than if I had set the max-width at the actual breakpouint).

5. I then started reducing the width of the viewport further until the layout broke. The next breakpoint was at about 998 pixels (again, I can't recall the exact width). I created a media query for a max-width of 1024 pixels (again, wanting to maintain a bit more whitespace in the left and right margins)

6. So at this point, I have two media queries - one for a max-width of 1230 pixels and another for a max-width of 1024 pixels. But when I started reducing the width of the viewport further, I noticed that at a width of 1000 pixels, I had a problem. Although the layout of the home page had not broken itself, the browser had a horizontal scroll bar.

7. My first thought was that there must be an element in the stylesheet with a width greater than 1000 pixels, but I've checked every class and id on the page and can't seem to find anything that would be the source of the problem.

Any thoughts on how I should approach this? I'm at a loss as to what to do next to figure out the problem. Am I confused? In other words, I'm wondering now if the method I've described above is faulty in some way.

Thanks in advance for any help anyone can offer - it's much appreciated!

Frank

[ollyc]

Hi guys,

I am working on a site using the Wellness theme. In general it's a really nice, clean theme. However, I would like to adjust the Woocommerce pages to be similar to those used in Digital Pro. I find the Wellness shop a bit too cramped, whereas the Digital Pro one has a much nicer layout. The site is behind a maintenance page atm.

Before I start adjusting things and looking into CSS changes I thought I would ask to see if anyone has done a similar thing already? Essentially it means moving from a 880px inner container to using a full width template.

Happy to share my progress, but please do chip in if you've got any insights.

[Victor Font]

The area you want to change is a flexible widget area. Flexible widget areas are assigned the CSS class used to determine the widget layout at run time. The assigned class is determined by the number of widgets (widget count) placed in the widget area. You could create new classes to adjust the width of the two widget, but make sure you place the somewhere after .front-page-2 .flexible-widgets.widget-halves .widget, .front-page-2 .widget at line 161 in style.css. This is where I found the class in the demo. You'll also need to determine the widget ids (#) on your own since you didn't post a link to your site. You might want to take a look at this to learn how to do that: https://victorfont.com/how-to-use-your-browsers-inspect-tool/

.front-page-2 #text-4 {
width: 70%;
}

.front-page-2 #enews-ext-3 {
width: 30%;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

The order of items is controlled by the document object model (DOM). The DOM is created when the page loads in the browser. You can adjust positioning with CSS, but doing what you want would require a lot of trial and error. You can also move the content around with jQuery, but again it would be difficult. You'd have to test for the type of device, screen width, etc.. It's could take a lot of coding.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Marijn]

Hi All,

Thanks for reading, hopefully you can help me out..

I created a template file by copying the front-page.php of Aspire theme. Then I created new widgets by duplicating the front page widgets and renaming them. I adjusted everything in the template php file, functions.php and in style.css.

I can use the template and add widgets to new pages but somehow it doesn't read the style.css in any way. It just doesn't apply to the template.

Have no clue what I'm missing here. Hope you can help me out.

Thanks in advance.

This is my template php file

<?php
// Template Name: Home Template

/**
 * This file adds the Home Page to the Aspire Theme.
 *
 * @author Appfinite
 * @package Aspire
 * @subpackage Customizations
 */

add_action( 'genesis_meta', 'aspire_front_page_genesis_meta' );

/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function aspire_front_page_genesis_meta() {

	if ( is_active_sidebar( 'home-template-1' ) || is_active_sidebar( 'home-template-2' ) || is_active_sidebar( 'home-template-3' ) || is_active_sidebar( 'home-template-3-1' ) || is_active_sidebar( 'home-template-4' ) || is_active_sidebar( 'home-mid-left' ) || is_active_sidebar( 'home-mid-right' ) || is_active_sidebar( 'home-mid-wide' ) || is_active_sidebar( 'home-template-5' ) || is_active_sidebar( 'home-template-6' ) || is_active_sidebar( 'home-template-7' ) || is_active_sidebar( 'home-template-8' ) || is_active_sidebar( 'home-template-9' ) || is_active_sidebar( 'home-template-10' ) || is_active_sidebar( 'home-template-11' ) || is_active_sidebar( 'home-template-12' ) || is_active_sidebar( 'home-template-12-1' ) || is_active_sidebar( 'home-template-13' )) {

		//* Enqueue scripts
		add_action( 'wp_enqueue_scripts', 'aspire_enqueue_aspire_script' );
		function aspire_enqueue_aspire_script() {

			wp_enqueue_script( 'aspire-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' );
			wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
			wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );

		}
		
		
		//* Enqueue parallax script
		add_action( 'wp_enqueue_scripts', 'aspire_enqueue_parallax_script' );
		function aspire_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}

		
		}
		

		//* Add home-template body class
		add_filter( 'body_class', 'aspire_body_class' );
		function aspire_body_class( $classes ) {

   			$classes[] = 'home-template';
  			return $classes;

		}

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

		//* Add homepage widgets
		add_action( 'genesis_after_header', 'aspire_front_page_widgets' );
		add_action( 'genesis_after_header', 'aspire_front_page_widgets_mid' );
		add_action( 'genesis_after_header', 'aspire_front_page_widgets_bottom' );
		
		$journal = get_option( 'aspire_journal_setting', 'true' );
		
				if ( $journal === 'true' ) {
		
					//* Add opening markup for blog section
					add_action( 'genesis_before_loop', 'aspire_front_page_blog_open' );
		
					//* Add closing markup for blog section
					add_action( 'genesis_after_loop', 'aspire_front_page_blog_close' );
		
				} else {
				
					//* Force full width content layout
					add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
		
					//* Remove the default Genesis loop
					remove_action( 'genesis_loop', 'genesis_do_loop' );
		
					//* Remove .site-inner
					add_filter( 'genesis_markup_site-inner', '__return_null' );
					add_filter( 'genesis_markup_content-sidebar-wrap_output', '__return_false' );
					add_filter( 'genesis_markup_content', '__return_null' );
					remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
		
				}

		//* Add featured-section body class
		if ( is_active_sidebar( 'home-template-1' ) ) {

			//* Add image-section-start body class
			add_filter( 'body_class', 'aspire_featured_body_class' );
			function aspire_featured_body_class( $classes ) {

				$classes[] = 'featured-section';				
				return $classes;

			}

		}

	}

}

//* Add markup for front page widgets
function aspire_front_page_widgets() {

	genesis_widget_area( 'home-template-1', array(
		'before' => '<div id="home-template-1" class="home-template-1"><div class="fp1 image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'home-template-2', array(
		'before' => '<div id="home-template-2" class="home-template-2"><div class="image-section"><div class="flexible-widgets widget-area"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'home-template-3', array(
		'before' => '<div id="home-template-3" class="home-template-3"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

genesis_widget_area( 'home-template-3-1', array(
		'before' => '<div id="home-template-3-1" class="home-template-3-1"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-4', array(
		'before' => '<div id="home-template-4" class="home-template-4"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
}

//* Add markup for front page widgets
function aspire_front_page_widgets_mid() {

	if ( is_active_sidebar( 'home-mid-left' ) || is_active_sidebar( 'home-mid-right' ) ) {
	
		echo '<div class="home-mid"><div class="wrap">';
		
			genesis_widget_area( 'home-mid-left', array(
				'before' => '<div id="home-mid-left" class="home-mid-left fadeup-effect"><div class="wrap">',
				'after'  => '</div></div>',
			) );
			
			genesis_widget_area( 'home-mid-right', array(
				'before' => '<div id="home-mid-right" class="home-mid-right fadeup-effect"><div class="wrap">',
				'after'  => '</div></div>',
			) );
	
		echo '</div><!-- end .wrap --></div><!-- end .home-mid -->';
		
	}
	
	genesis_widget_area( 'home-mid-wide', array(
		'before' => '<div id="home-mid-wide" class="home-mid-wide"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
}

//* Add markup for front page widgets
function aspire_front_page_widgets_bottom() {

	genesis_widget_area( 'home-template-5', array(
		'before' => '<div id="home-template-5" class="home-template-5"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-6', array(
		'before' => '<div id="home-template-6" class="home-template-6"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-7', array(
		'before' => '<div id="home-template-7" class="home-template-7"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'home-template-8', array(
		'before' => '<div id="home-template-8" class="home-template-8"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-9', array(
		'before' => '<div id="home-template-9" class="home-template-9"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-10', array(
		'before' => '<div id="home-template-10" class="home-template-10"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-11', array(
		'before' => '<div id="home-template-11" class="home-template-11"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-12', array(
		'before' => '<div id="home-template-12" class="home-template-12"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

genesis_widget_area( 'home-template-12-1', array(
		'before' => '<div id="home-template-12-1" class="home-template-12-1"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	

	genesis_widget_area( 'home-template-13', array(
		'before' => '<div id="home-template-13" class="home-template-13"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	

}

//* Add opening markup for blog section
function aspire_front_page_blog_open() {

	$journal_text = get_option( 'aspire_journal_text', __( 'Latest From the Blog', 'aspire' ) );
	
	if ( 'posts' == get_option( 'show_on_front' ) ) {

		echo '<div id="journal" class="widget-area"><div class="wrap">';

		if ( ! empty( $journal_text ) ) {

			echo '<h2 class="widgettitle widget-title journal-title">' . $journal_text . '</h2><hr>';

		}

	}

}

//* Add closing markup for blog section
function aspire_front_page_blog_close() {

	if ( 'posts' == get_option( 'show_on_front' ) ) {

		echo '</div></div>';

	}

}

genesis();

[di]

I've inserted an image into a Page and want it to be the full width of the content. However, it's showing up considerably less, even though it's much larger in size (2500 px). Are there adjustments I should make in css, and if so where? I'm using a child theme of Workstation Pro.

[di]

I'm inserting an image into a Page and want it to be the full width of the content. It's coming in considerably less, even though the image is more than large enough (2500 px). Where in the css can I adjust this? I'm using a child theme of Workstation Pro.

[Victor Font]

You could change the CSS for site-inner to be full width. This will impact the width of the entire page. Then, add a structural wrap or class to entry-content that you could use to adjust the width of the content area to make it narrow..

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

First of all, you're using one-third column classes and only two images per row. When you use one-third column classes, you need 3 images per row. One-half column classes will split the area in two.

When you use columns, you have to think of each column as its own area. You can center the image within each column, but depending on the width of columns, they may not appear centered on the page. For this reason, you need to wrap the column areas in an additional divs. I generally wrap column areas in a parent div that I assign a class of column-container. This allows you to adjust the overall size of the column area and center this on the screen. You would then place the images in the columns as normal.

Also, when you add an image in a text widget on the front page, I would also use the built-in WordPress classes. To get the WordPress classes, insert the image into an empty post, then copy and paste the code WordPress generates.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Justin]

Because the article element contains your slider and the rest of the page content and the padding is applied to the article you'll need to set article side padding to 0.

.entry  {
    padding: 40px 0;
}

Then change the width of the slider here:

.huge_it_slideshow_image_wrap_4 {
    width: inherit
}

and here:

.huge_it_slideshow_image_wrap1_4  {
    width: inherit;
    max-width: 100%;
}

and then adjust padding and margins for all of the other elements in the article element.

[babrees]

Hi!
Using the Aspire theme, I have changed the background image on the front page 1 section.

On most monitor widths the image is fine and stretches full width. However, if I adjust the browser to a specific shorter width the image fails to stretch to 100% width.

One thing is that it is very difficult to get images the exact same size as stated, ie 1600 x 1050 pixels, without pre cropping, which I do not wish to do. So, as my image is 1600 x 900 I wonder if that could be my problem, although I can't see why it should be.

Does anybody know how I can fix this so it always stretches to 100% width?

PS, please ignore the quality of the photo, it is just for testing purposes and is low quality!!!

[tiki16]

I tested it with Firefox dev tools and used ruler. It appears to be more accurate with measuring page width than chrome. Where as, Chrome showed it as 1300pw wide FF ruler was more accurate at 1470px wide so I adjusted my media queries accordingly. What a headache.

[fandom]

Having full posts in search results makes reading those result pretty unbearable.

Example:
http://www.studiopress.community/search/adjust+page+width/

I suspect results like this lead to many repeat questions being posted. Honestly, I don't blame anyone for not wanting to try to scroll through that in order to find an answer already posted.

[motivationpedia]

Hey Victor,

Thanks for your interest, but it is not working.
The background color of the page I worked upon has not changed, maybe there is some kind of hardcode that prevents the change from happening.
This is the Css code of my site

/*
Theme Name: Minimum Pro
Theme URI: http://my.studiopress.com/themes/minimum/
Description: A stunning execution of "less is more," the Minimum child theme expresses everything you're about, with very little effort.
Author: StudioPress
Author URI: http://www.studiopress.com/

Version: 3.2.1

Tags: black, white, blue, one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

Template: genesis
Template Version: 2.1

License: GPL-2.0+
License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/* Table of Contents

- HTML5 Reset
- Baseline Normalize
- Box Sizing
- Float Clearing
- Defaults
- Typographical Elements
- Headings
- Objects
- Gallery
- Forms
- Tables
- Screen Reader Text
- Structure and Layout
- Site Containers
- Page Title
- Column Widths and Positions
- Column Classes
- Common Classes
-
- Genesis
- Featured Post Grid
- Titles
- Widgets
- Featured Content
- Plugins
- Genesis eNews Extended
- Genesis Latest Tweets
- Jetpack
- Site Header
- Title Area
- Widget Area
- Site Navigation
- Header Navigation
- Primary Navigation
- Secondary Navigation
- Responsive Menu
- Content Area
- Entries
- After Entry
- Pagination
- Comments
- Sidebar
- Footer Widgets
- Site Footer
- Media Queries
- max-width: 1139px
- max-width: 1023px
- max-width: 767px

*/

/*
HTML5 Reset
---------------------------------------------------------------------------------------------------- */

/* Baseline Normalize
normalize.css v2.1.2 | MIT License | git.io/normalize
--------------------------------------------- */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/* Box Sizing
--------------------------------------------- */

*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Float Clearing
--------------------------------------------- */

.author-box:before,
.clearfix:before,
.entry:before,
.entry-content:before,
.footer-widgets:before,
.nav-primary:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.widget:before,
.wrap:before {
content: " ";
display: table;
}

.author-box:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.footer-widgets:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.widget:after,
.wrap:after {
clear: both;
content: " ";
display: table;
}

/*
Defaults
---------------------------------------------------------------------------------------------------- */

/* Typographical Elements
--------------------------------------------- */

body {
background-color: #fff;
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-weight: 300;
line-height: 1.625;
}

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

::-moz-selection {
background-color: #333;
color: #fff;
}

::selection {
background-color: #333;
color: #fff;
}

a {
border-bottom: 1px dotted #333;
color: #333;
font-weight: 400;
text-decoration: none;
}

a img {
margin-bottom: -6px;
}

a:hover {
color: #0ebfe9;
border-bottom: 1px dotted #0ebfe9;
}

p {
margin: 0 0 24px;
padding: 0;
}

b,
strong {
font-weight: 400;
}

hr {
border: 0;
border-collapse: collapse;
border-top: 1px solid #f5f5f5;
clear: both;
margin: 26px 0;
}

ol,
ul {
margin: 0;
padding: 0;
}

blockquote,
blockquote::before {
color: #999;
}

blockquote {
margin: 40px;
}

blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}

.entry-content code {
background-color: #333;
color: #ddd;
}

cite {
font-style: normal;
}

/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto Slab', serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 15px;
}

h1 {
font-size: 30px;
}

h2 {
font-size: 28px;
}

h3 {
font-size: 24px;
}

h4 {
font-size: 20px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}

/* Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video,
.wp-caption {
max-width: 100%;
}

img {
height: auto;
}

/* Gallery
--------------------------------------------- */

.gallery {
overflow: hidden;
margin-bottom: 28px;
}

.gallery-item {
float: left;
margin: 0;
padding: 0 4px;
text-align: center;
width: 100%;
}

.gallery-columns-1 .gallery-item {
width: 100%;
}

.gallery-columns-2 .gallery-item {
width: 50%;
}

.gallery-columns-3 .gallery-item {
width: 33%;
}

.gallery-columns-4 .gallery-item {
width: 25%;
}

.gallery-columns-5 .gallery-item {
width: 20%;
}

.gallery-columns-6 .gallery-item {
width: 16.6666%;
}

.gallery-columns-7 .gallery-item {
width: 14.2857%;
}

.gallery-columns-8 .gallery-item {
width: 12.5%;
}

.gallery-columns-9 .gallery-item {
width: 11.1111%;
}

.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) {
clear: left;
}

.gallery .gallery-item a {
border-width: 0;
}

.gallery .gallery-item img {
border: none;
height: auto;
margin: 0;
}

/* Forms
--------------------------------------------- */

input,
select,
textarea {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: none;
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-weight: 300;
padding: 10px;
width: 100%;
}

input:focus,
textarea:focus {
border: 1px solid #333;
outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
width: auto;
}

::-moz-placeholder {
color: #999;
opacity: 1;
}

::-webkit-input-placeholder {
color: #999;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.entry-content .button {
background-color: #333;
border-width: 0;
border-radius: 5px;
box-shadow: none;
color: #fff;
cursor: pointer;
font-family: 'Roboto', sans-serif;
font-weight: 300;
padding: 16px 24px;
text-transform: uppercase;
white-space: normal;
width: auto;
}

button.small,
input[type="button"].small,
input[type="reset"].small,
input[type="submit"].small,
.button.small {
padding: 6px 12px;
}

.footer-widgets button,
.footer-widgets input[type="button"],
.footer-widgets input[type="reset"],
.footer-widgets input[type="submit"],
.footer-widgets .button {
background-color: #fff;
border-width: 0;
color: #333;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover,
.entry-content .button:hover,
.footer-widgets .button:hover {
background-color: #0ebfe9;
color: #fff;
}

.entry-content .button:hover {
color: #fff;
}

.button {
display: inline-block;
}

.site-container button:disabled,
.site-container button:disabled:hover,
.site-container input:disabled,
.site-container input:disabled:hover,
.site-container input[type="button"]:disabled,
.site-container input[type="button"]:disabled:hover,
.site-container input[type="reset"]:disabled,
.site-container input[type="reset"]:disabled:hover,
.site-container input[type="submit"]:disabled,
.site-container input[type="submit"]:disabled:hover {
background-color: #ddd;
border-width: 0;
color: #777;
cursor: not-allowed;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
display: none;
}

.post-password-form input[type="password"] {
margin-bottom: 15px;
}

/* Tables
--------------------------------------------- */

table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 40px;
width: 100%;
}

tbody {
border-bottom: 1px solid #ddd;
}

th,
td {
text-align: left;
}

th {
font-weight: bold;
text-transform: uppercase;
}

td {
border-top: 1px solid #ddd;
padding: 6px 0;
}

/* Screen Reader Text
--------------------------------------------- */

.screen-reader-shortcut,
.screen-reader-text,
.screen-reader-text span {
background-color: #fff;
border: 0;
clip: rect(0, 0, 0, 0);
color: #222;
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}

.genesis-nav-menu .search input[type="submit"]:focus,
.screen-reader-shortcut:focus,
.screen-reader-text:focus,
.widget_search input[type="submit"]:focus {
clip: auto !important;
display: block;
height: auto;
padding: 15px 20px;
text-decoration: none;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}

.more-link {
position: relative;
}

/*
Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* Site Containers
--------------------------------------------- */

.wrap {
margin: 0 auto;
max-width: 1140px;
}

.site-inner {
background-color: #fff;
clear: both;
padding-top: 40px;
}

.minimum-landing .site-inner {
margin: 40px auto;
padding: 60px 60px 20px;
width: 800px;
}

/* Site Containers
--------------------------------------------- */

.home-featured {
border-bottom: 5px solid #f5f5f5;
margin-bottom: 60px;
padding: 40px 0;
}

.home-featured li {
list-style-type: none;
}

.home-featured .widget {
padding: 0 20px;
}

.home-featured p:last-child {
padding: 0 0 24px;
}

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
float: left;
text-align: center;
width: 25%;
}

.home-featured .simple-social-icons ul li a {
padding: 40px !important;
}

.home-featured .simple-social-icons ul li {
margin: 0 0 30px !important;
}

.site-tagline {
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
margin-top: 60px;
padding: 40px 0;
}

.site-tagline p {
margin: 0;
}

.site-tagline-left {
float: left;
width: 50%;
}

.site-tagline-right {
float: right;
text-align: right;
width: 50%;
}

.minimum .site-tagline {
margin-top: 600px;
}

a.cta-button {
background-color: #333;
border-bottom-width: 0;
border-radius: 5px;
color: #fff;
display: inline-block;
font-size: 18px;
font-weight: 300;
line-height: 1;
padding: 15px 20px;
}

a.cta-button:hover {
background-color: #0ebfe9;
color: #fff;
}

/* Column Widths and Positions
--------------------------------------------- */

/* Content */

.content {
float: left;
width: 720px;
}

.sidebar-content .content {
float: right;
}

.full-width-content .content {
width: 100%;
}

/* Column Classes
Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}

.three-fourths {
width: 74.35897435897436%;
}

.one-sixth {
width: 14.52991452991453%;
}

.five-sixths {
width: 82.90598290598291%;
}

.first {
clear: both;
margin-left: 0;
}

/*
Common Classes
---------------------------------------------------------------------------------------------------- */

/*
--------------------------------------------- */

.avatar {
float: left;
}

.alignleft .avatar {
margin-right: 24px;
}

.alignright .avatar {
margin-left: 24px;
}

.author-box .avatar {
height: 72px;
margin-right: 24px;
width: 72px;
}

.entry-comments .avatar {
height: 48px;
width: 48px;
}

.genesis-nav-menu .search input[type="submit"],
.widget_search input[type="submit"] {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
}

.search-form {
overflow: hidden;
padding: 3px;
width: 100%;
}

.sticky {
}

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

img.centered,
.aligncenter {
display: block;
margin: 0 auto 24px;
}

a.alignnone,
img.alignnone {
margin-bottom: 12px;
}

.alignleft {
float: left;
text-align: left;
}

.alignright {
float: right;
text-align: right;
}

a.alignleft,
a.alignnone,
a.alignright {
max-width: 100%;
}

a.alignnone {
display: inline-block;
}

a.alignleft,
img.alignleft,
.wp-caption.alignleft {
margin: 0 24px 24px 0;
}

a.alignright,
img.alignright,
.wp-caption.alignright {
margin: 0 0 24px 24px;
}

a.alignleft,
a.alignright {
border: none;
}

.wp-caption-text {
font-size: 14px;
font-weight: 400;
text-align: center;
}

.gallery-caption {
margin: 0 0 10px;
}

.wp-audio-shortcode,
.wp-playlist,
.wp-video {
margin: 0 0 28px;
}

a[rel~="attachment"],
a[rel~="attachment"]:hover,
.wp-audio-shortcode a,
.wp-audio-shortcode a:hover,
.wp-caption a,
.wp-caption a:hover,
.wp-playlist a,
.wp-playlist a:hover,
.wp-video a,
.wp-video a:hover {
border-width: 0 !important;
}

/*
Widgets
---------------------------------------------------------------------------------------------------- */

.widget {
word-wrap: break-word;
}

.widget li {
list-style-type: none;
margin-bottom: 6px;
text-align: left;
}

.widget ol > li {
list-style-position: inside;
list-style-type: decimal;
padding-left: 20px;
text-indent: -20px;
}

.widget li li {
border: none;
margin: 0 0 0 30px;
padding: 0;
}

.widget ul > li:last-child,
.widget p:last-child {
margin-bottom: 0;
}

.widget_calendar table {
width: 100%;
}

.widget_calendar td,
.widget_calendar th {
text-align: center;
}

/* Genesis
--------------------------------------------- */

.breadcrumb {
margin-bottom: 40px;
}

.archive-description,
.author-box {
background-color: #f5f5f5;
}

.archive-description {
margin-bottom: 40px;
padding: 40px 40px 16px;
}

.author-box {
margin-bottom: 40px;
padding: 40px;
}

.single .author-box {
margin-bottom: 60px;
}

.author-box-title {
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-weight: 400;
margin-bottom: 4px;
}

.author-box p {
margin-bottom: 0;
}

.author-box .avatar {
margin-right: 24px;
}

/* Featured Post Grid
------------------------------------------------------------ */

.genesis-grid-even,
.genesis-grid-odd {
border-bottom: 1px solid #f5f5f5;
margin-bottom: 30px;
padding: 0;
width: 47%;
}

.genesis-grid-even {
float: right;
}

.genesis-grid-odd {
clear: both;
float: left;
}

/* Titles
--------------------------------------------- */

.entry-title {
font-size: 30px;
line-height: 1;
}

.genesis-grid .entry-title {
font-size: 24px;
margin: 0 0 10px;
}

.single-portfolio .entry-title {
margin-bottom: 20px;
}

.minimum-pro-portfolio {
word-wrap: break-word;
}

.entry-title a,
.sidebar .widget-title a {
border: none;
color: #333;
}

.entry-title a:hover {
color: #0ebfe9;
}

.widget-title {
font-size: 16px;
margin-bottom: 24px;
text-transform: uppercase;
}

#home-featured .widget-title {
margin-bottom: 10px;
}

.sidebar .widget-title a {
border: none;
}

.archive-title {
font-size: 20px;
margin-bottom: 24px;
}

/*
Widgets
---------------------------------------------------------------------------------------------------- */

/* Featured Content
--------------------------------------------- */

.featured-content .entry {
border-bottom: 2px solid #f5f5f5;
margin-bottom: 24px;
padding: 0 0 24px;
}

.featured-content .entry:last-child {
border-width: 0;
margin-bottom: 0;
padding: 0;
}

.featured-content .entry-title {
border: none;
font-size: 18px;
line-height: 1.2;
}

.featured-content .entry-title a {
border: none;
}

/*
Plugins
---------------------------------------------------------------------------------------------------- */

/* Genesis eNews Extended
--------------------------------------------- */

.enews-widget {
color: #999;
}

.enews-widget input {
margin-bottom: 16px;
}

.enews-widget input:focus {
border: 1px solid #ddd;
}

.enews-widget input[type="submit"] {
background-color: #0ebfe9;
color: #fff;
margin: 0;
width: 100%;
}

.enews-widget input:hover[type="submit"] {
background-color: #fff;
color: #333;
}

.enews form + p {
margin-top: 24px;
}

.sidebar .enews-widget {
background-color: #333;
padding: 30px;
}

.sidebar .enews-widget .widget-title {
color: #fff;
}

/* Genesis Latest Tweets
--------------------------------------------- */

.latest-tweets ul li {
margin-bottom: 16px;
}

/* Jetpack
--------------------------------------------- */

img#wpstats {
display: none;
}

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
background-color: #fff;
border-bottom: 1px solid #eee;
left: 0;
letter-spacing: 1px;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

.admin-bar .site-header {
top: 32px;
}

/* Title Area
--------------------------------------------- */

.title-area {
float: left;
padding: 18px 0;
width: 320px;
}

.header-image .title-area {
padding: 0;
}

.site-title {
font-family: 'Roboto', sans-serif;
font-size: 24px;
line-height: 1;
margin: 0;
text-transform: uppercase;
}

.site-title a,
.site-title a:hover {
border: none;
color: #333;
}

.site-description {
font-size: 36px;
font-weight: 300;
line-height: 1.2;
margin: 0;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}

.header-image .site-title a {
display: block;
text-indent: -9999px;
}

/* Custom header */

.header-image .title-area {
padding: 0;
}

.header-image .site-title a {
height: 60px;
display: block;
text-indent: -9999px;
max-width: 320px;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
text-align: right;
width: 800px;
}

.site-header .search-form {
float: right;
margin-top: 10px;
}

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
clear: both;
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.5;
width: 100%;
}

.genesis-nav-menu .menu-item {
display: inline-block;
margin: 0;
text-align: left;
}

.genesis-nav-menu a {
border: none;
color: #333;
display: block;
font-size: 14px;
padding: 20px;
position: relative;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #0ebfe9;
}

.genesis-nav-menu > .menu-item > a {
text-transform: uppercase;
}

.genesis-nav-menu .sub-menu {
left: -9999px;
letter-spacing: 0;
opacity: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 160px;
z-index: 99;
}

.genesis-nav-menu .sub-menu a {
background-color: #fff;
border: 1px solid #eee;
border-top: none;
padding: 16px 20px;
position: relative;
width: 160px;
}

.genesis-nav-menu .sub-menu .sub-menu {
margin: -54px 0 0 159px;
}

.genesis-nav-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}

.genesis-nav-menu > .first > a {
padding-left: 0;
}

.genesis-nav-menu > .last > a {
padding-right: 0;
}

.genesis-nav-menu > .right {
display: inline-block;
float: right;
list-style-type: none;
padding: 20px 0;
text-transform: uppercase;
}

.genesis-nav-menu > .right > a {
display: inline;
padding: 0;
}

.genesis-nav-menu > .rss > a {
margin-left: 48px;
}

.genesis-nav-menu > .search {
padding: 6px 0 0;
}

/* Site Header Navigation
--------------------------------------------- */

.site-header .sub-menu {
border-top: 1px solid #eee;
}

.site-header .sub-menu .sub-menu {
margin-top: -55px;
}

/* Primary Navigation
--------------------------------------------- */

.nav-primary {
background-color: #333;
}

.nav-primary,
.nav-primary a,
.nav-primary .genesis-nav-menu .sub-menu a {
color: #fff;
}

.nav-primary .genesis-nav-menu .sub-menu a {
background-color: #333;
border: 1px solid #444;
border-top: none;
}

.nav-primary .sub-menu a:hover {
color: #0ebfe9;
}

/* Secondary Navigation
--------------------------------------------- */

.nav-secondary {
margin-bottom: 20px;
}

.site-footer .nav-secondary a {
color: #fff;
margin: 0 30px;
padding: 0;
}

.site-footer .nav-secondary a:hover {
color: #999;
}

.site-footer .nav-secondary .genesis-nav-menu .sub-menu a {
background-color: #333;
border: 1px solid #444;
border-top: none;
padding: 16px;
}

.site-footer .nav-secondary .sub-menu a:hover {
color: #0ebfe9;
}

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
cursor: pointer;
display: none;
}

.responsive-menu-icon::before {
content: "\f333";
display: block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
text-align: center;
}

.site-header .responsive-menu-icon::before {
padding: 0;
}

/*
Content Area
---------------------------------------------------------------------------------------------------- */

/* Entries
--------------------------------------------- */

.entry {
margin-bottom: 40px;
}

.minimum-pro-portfolio .content .entry {
float: left;
margin-bottom: 60px;
width: 50%;
}

.minimum-pro-portfolio .content .entry:nth-of-type(2n) {
float: right;
padding-left: 30px;
}

.minimum-pro-portfolio .content .entry:nth-of-type(2n+1) {
clear: left;
padding-right: 30px;
}

.single-portfolio .entry {
text-align: center;
}

.entry-content ol,
.entry-content p,
.entry-content ul,
.quote-caption {
margin-bottom: 26px;
}

.entry-content ol,
.entry-content ul {
margin-left: 40px;
}

.entry-content ol > li {
list-style-type: decimal;
}

.entry-content ul > li {
list-style-type: disc;
}

.entry-content ol ol,
.entry-content ul ul {
margin-bottom: 0;
}

.entry-content .search-form {
width: 50%;
}

.entry-content .search-form input {
margin-bottom: 16px;
}

.entry-meta {
font-family: 'Roboto', sans-serif;
font-size: 14px;
}

.entry-meta a {
border: none;
font-weight: 300;
}

.entry-header .entry-meta {
margin-bottom: 40px;
}

.entry-comments-link::before {
content: "\2014";
margin: 0 6px 0 2px;
}

.entry-categories,
.entry-tags {
display: block;
}

/* After Entry
--------------------------------------------- */

.after-entry {
background-color: #f5f5f5;
margin-bottom: 60px;
padding: 40px;
text-align: center;
}

.after-entry .widget {
margin-bottom: 40px;
}

.after-entry .featured-content .entry:last-child,
.after-entry .widget:last-child,
.after-entry p:last-child {
padding: 0;
margin: 0;
}

.after-entry li {
list-style-type: none;
}

/* Pagination
--------------------------------------------- */

.pagination {
clear: both;
margin: 40px 0;
}

.pagination li {
display: inline;
}

.pagination li a {
background-color: #333;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 300;
padding: 8px 12px;
}

.pagination li a:hover,
.pagination li.active a {
background-color: #0ebfe9;
}

/* Comments
--------------------------------------------- */

.comment-respond,
.entry-comments,
.entry-pings {
margin-bottom: 60px;
}

.comment-content {
clear: both;
}

.entry-comments .comment-author {
margin-bottom: 0;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%
}

.comment-respond label {
display: block;
margin-right: 12px;
}

.comment-list li,
.ping-list li {
list-style-type: none;
}

.comment-list li {
margin-top: 24px;
padding: 32px;
}

.comment-list li li {
margin-right: -32px;
}

li.comment {
background-color: #f5f5f5;
border: 2px solid #fff;
border-right: none;
}

.comment .avatar {
margin: 0 16px 24px 0;
}

.entry-pings .reply {
display: none;
}

.bypostauthor {
}

/*
Sidebar
---------------------------------------------------------------------------------------------------- */

.sidebar {
float: right;
margin-top: 10px;
width: 340px;
}

.sidebar-content .sidebar {
float: left;
}

.sidebar img {
margin-bottom: 15px;
}

.sidebar .featured-content img {
margin-bottom: 0;
}

.sidebar .widget {
margin-bottom: 40px;
}

.sidebar .tagcloud a {
background-color: #333;
border-radius: 3px;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: 'Roboto', sans-serif;
margin: 0 5px 5px 0;
padding: 5px 10px;
}

.sidebar .tagcloud a:hover {
background-color: #0ebfe9;
color: #fff;
}

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
background-color: #333;
color: #999;
clear: both;
}

.footer-widgets .wrap {
border-bottom: 1px solid #444;
padding: 40px 0 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
width: 340px;
}

.footer-widgets-1 {
margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
float: left;
}

.footer-widgets-3 {
float: right;
}

.footer-widgets a {
border-bottom: 1px dotted #fff;
color: #fff;
}

.footer-widgets a:hover {
color: #999;
}

.footer-widgets .widget {
margin-bottom: 40px;
}

.footer-widgets .widget-title {
color: #fff;
}

.footer-widgets li {
list-style-type: none;
margin-bottom: 6px;
word-wrap: break-word;
}

.footer-widgets .search-form input:focus {
border: 1px solid #ddd;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
background-color: #333;
letter-spacing: 1px;
padding: 60px 0;
text-align: center;
}

.site-footer a,
.site-footer p {
-webkit-font-smoothing: subpixel-antialiased;
color: #999;
}

.site-footer a:hover {
color: #fff;
}

.site-footer a {
border: none;
font-weight: 300;
}

.site-footer p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 14px;
margin-bottom: 0;
}

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

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

.wrap {
max-width: 960px;
}

.site-header .widget-area {
width: 620px;
}

.content {
width: 580px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar {
width: 280px;
}

}

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

.wrap {
max-width: 768px;
}

.content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.minimum-landing .site-inner,
.sidebar,
.site-header .widget-area,
.site-tagline-left,
.site-tagline-right,
.title-area {
width: 100%;
}

.site-header {
position: static;
}

.site-inner {
padding: 40px 5%;
}

.minimum-pro-portfolio .content .entry,
.site-header .title-area,
.site-header .search-form,
.site-header .widget-area,
.site-tagline-left,
.site-tagline-right {
text-align: center;
}

.header-image .site-title a {
margin: 0 auto 10px;
}

.site-header .search-form {
float: none;
margin: 0 auto;
width: 50%;
}

.site-header .widget-area {
padding: 0 5%;
}

.site-description {
font-size: 30px;
}

.site-tagline {
margin-top: 0;
padding: 20px 0;
}

.minimum .site-tagline {
margin-top: 400px;
}

.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-tagline-left,
.site-tagline-right {
float: none;
}

.site-tagline-left p {
margin-bottom: 20px;
}

.minimum-landing .site-inner {
margin: 0;
padding: 40px 40px 0;
}

.minimum-landing .site-container {
padding: 5%;
}

.footer-widgets .widget,
.nav-primary .wrap,
.site-footer .wrap,
.site-tagline {
padding-left: 5%;
padding-right: 5%;
}

.site-footer {
padding: 40px 0;
}

}

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

.site-header {
padding-bottom: 10px;
}

.title-area {
padding-bottom: 6px;
}

.site-footer .nav-secondary a {
margin: 0 10px;
}

.genesis-nav-menu.responsive-menu,
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu {
display: none;
}

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}

.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu.responsive-menu .current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
background: none;
border: none;
display: block;
line-height: 1;
padding: 16px 20px;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 15px 20px;
right: 0;
text-align: right;
z-index: 9999;
}

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}

.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.05);
border: none;
left: auto;
opacity: 1;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
background-color: transparent;
margin: 0;
padding-left: 25px;
}

.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 14px 20px;
position: relative;
text-transform: none;
width: 100%;
}

.nav-primary .genesis-nav-menu.responsive-menu {
padding-bottom: 16px;
}

.home-featured .simple-social-icons ul li a {
font-size: 36px !important;
padding: 20px !important;
}

.genesis-grid-even,
.genesis-grid-odd,
.minimum-pro-portfolio .content .entry {
width: 100%;
}

.minimum-pro-portfolio .content .entry:nth-of-type(2n),
.minimum-pro-portfolio .content .entry:nth-of-type(2n+1) {
float: none;
padding: 0;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

}

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

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
width: 50%;
}

.home-featured .widget-area:nth-of-type(2n+1) {
clear: left;
}

.minimum .site-tagline {
margin-top: 200px;
}

}

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

.header-image .site-header .title-area .site-title a {
background-size: contain !important;
}

}

Can you suggest something else?

It will be a great help.

Thanks