/* 

Mediaqueries Contents: 

01. Global
02. Notebook
03. Tablet
04. Small Device
05. Mobile Device
06. Firefox Fixes
07. WP Admin Bar

*/

/* ----------------------------------------------------------------------------------------------------- */
/* 01. Global Responsive Styles */
/* ----------------------------------------------------------------------------------------------------- */

#mobile-button {
display: none;
}
#centered {
padding-top: 50px;
padding-bottom: 50px;	
}
#logo,
#name,
#description,
#button {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
#logo img,
#widget-center-area img {
max-width: 80%;
height: auto;	
width: auto;
}
#widget-center-area {
max-width: 60%;
margin: 0 auto;	
}

/* ----------------------------------------------------------------------------------------------------- */
/* 02. Notebook Device Styles */
/* ----------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1280px) {
	
/* Containers */	
#content-container {
overflow-x: hidden; 
overflow-y: auto;
}
#widget-center-area {
max-width: 80%;
}
	
/* Font Sizes */
#name {
font-size: 120px;
line-height: 110px;
letter-spacing: -3px;
}
#description {
font-size: 28px;
line-height: 32px;
font-weight: 300;
}	

/* Spacing */
#centered {
padding-top: 35px;
padding-bottom: 35px;	
}
#logo {
margin-bottom: 35px;	
}
#name {
margin-bottom: 30px;
}
#description {
margin-bottom: 55px;
}
#button {
margin-bottom: 20px;	
}

/* Pages */
#page .page-content blockquote {
padding: 0 25px;
}
  
/* End of Notebook Mediaqueries */
}

/* ----------------------------------------------------------------------------------------------------- */
/* 03. Tablet Device Styles */
/* ----------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 720px) {
	
/* Font Sizes */
#name {
font-size: 90px;
line-height: 80px;
letter-spacing: -2px;
}
#description {
font-size: 24px;
line-height: 28px;
}	

/* Spacing */
#centered {
padding-top: 25px;
padding-bottom: 25px;	
}
#logo {
margin-bottom: 35px;	
}
#name {
margin-bottom: 30px;
}
#description {
margin-bottom: 55px;
}
#button {
margin-bottom: 20px;	
}
  
/* End of Tablet Mediaqueries */
}


/* ----------------------------------------------------------------------------------------------------- */
/* 04. Small Device Styles */
/* ----------------------------------------------------------------------------------------------------- */

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

/* Containers */
body {}	
#logo,
#name,
#description,
#button,
#widget-center-area {
max-width: 90%;
}
/* Mobile Navigation */
#header .menu-btn {
margin: 25px 0 0 25px;
}
/* Sidebar */
#sidebar-inner {
padding: 22px 25px 25px 25px;
}
#sidebar-inner .widget {
display: block;	
padding-bottom: 34px;
}
#sidebar-inner .social {
padding-bottom: 34px;
}
/* Font Sizes */
#name {
font-size: 70px;
line-height: 60px;
letter-spacing: -1px;
}
#description {
font-size: 20px;
line-height: 24px;
}

/* Spacing */
#centered {
padding-top: 20px;
padding-bottom: 20px;	
}
#logo {
margin-bottom: 35px;	
}
#name {
margin-bottom: 30px;
}
#description {
margin-bottom: 55px;
}
#button {
margin-bottom: 50px;	
}

/* Pages */
#page {
width: 90%; 
margin: 25px auto; 
padding: 25px; 
}
#page .page-content blockquote {
padding: 0 10px;
}

/* End of Small Device Mediaqueries */
}

/* ----------------------------------------------------------------------------------------------------- */
/* 05. Mobile Device Styles */
/* ----------------------------------------------------------------------------------------------------- */

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

/* Reduce sidebar to 250px */
.pushy {
width: 250px;
}
.pushy-left{
-webkit-transform: translate3d(-250px,0,0);
-moz-transform: translate3d(-250px,0,0);
-ms-transform: translate3d(-250px,0,0);
-o-transform: translate3d(-250px,0,0);
transform: translate3d(-250px,0,0);
}
.container-push, .push-push{
-webkit-transform: translate3d(250px,0,0);
-moz-transform: translate3d(250px,0,0);
-ms-transform: translate3d(250px,0,0);
-o-transform: translate3d(250px,0,0);
transform: translate3d(250px,0,0);
}
.pushy-active .site-overlay {
left: 250px;	
}

/* End of Mobile Device Mediaqueries */
}

/* ----------------------------------------------------------------------------------------------------- */
/* 06. Firefox Fixes */
/* ----------------------------------------------------------------------------------------------------- */

/*  The #logo image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.
The CSS spec doesn't actually define the behavior of such markup,  where the parent's width depends on the child and the child's width depends on the parent.
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 for some discussion on the issue. 
The hack is below and cannot use percentages for a liquid design. */

@media screen and (max-width: 1800px) {@-moz-document url-prefix() {#logo  { width: 1700px; }}}
@media screen and (max-width: 1700px) {@-moz-document url-prefix() {#logo  { width: 1600px; }}}
@media screen and (max-width: 1600px) {@-moz-document url-prefix() {#logo  { width: 1500px; }}}
@media screen and (max-width: 1500px) {@-moz-document url-prefix() {#logo  { width: 1400px; }}}
@media screen and (max-width: 1400px) {@-moz-document url-prefix() {#logo  { width: 1300px; }}}
@media screen and (max-width: 1300px) {@-moz-document url-prefix() {#logo  { width: 1200px; }}}
@media screen and (max-width: 1200px) {@-moz-document url-prefix() {#logo  { width: 1100px; }}}
@media screen and (max-width: 1100px) {@-moz-document url-prefix() {#logo  { width: 1000px; }}}
@media screen and (max-width: 1000px) {@-moz-document url-prefix() {#logo  { width: 900px; }}}
@media screen and (max-width: 900px)  {@-moz-document url-prefix() {#logo  { width: 800px; }}}
@media screen and (max-width: 800px)  {@-moz-document url-prefix() {#logo  { width: 700px; }}}
@media screen and (max-width: 700px)  {@-moz-document url-prefix() {#logo  { width: 600px; }}}
@media screen and (max-width: 600px)  {@-moz-document url-prefix() {#logo  { width: 500px; }}}
@media screen and (max-width: 500px)  {@-moz-document url-prefix() {#logo  { width: 400px; }}}
@media screen and (max-width: 400px)  {@-moz-document url-prefix() {#logo  { width: 300px; }}}
@media screen and (max-width: 300px)  {@-moz-document url-prefix() {#logo  { width: 260px; }}}
@media screen and (max-width: 260px)  {@-moz-document url-prefix() {#logo  { width: 250px; }}}

/* ----------------------------------------------------------------------------------------------------- */
/* 07. WP Admin Bar */
/* ----------------------------------------------------------------------------------------------------- */

.admin-bar #sidebar {padding-top: 31px;}

@media screen and (max-width: 600px) {
body.logged-in {top: -46px !important;}
.admin-bar #wpadminbar {position: absolute; top: 0px !important;}  /* Height 46px */
.admin-bar #content-container {top: 46px;}
.admin-bar #sidebar {margin-top: 16px;}
}