/* ==========================================================================
Theme Name: Modern Green Home (New)
Theme URI: http://www.moderngreenhome.com
Description: Official MGH theme. Please do not change.
Version: 2.0
Author: Studio Kudos
Author URI: http://www.studiokudos.com 
============================================================================= */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

/* ========================================================================== Base styles: opinionated defaults ========================================================================== */
html, button, input, select, textarea { color: #222; }

html { font-size: 1em; line-height: 1.4; }

/* Remove text-shadow in selection highlight: h5bp.com/i These selection rule sets have to be separate. Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Remove the gap between images, videos, audio and canvas and the bottom of their containers: h5bp.com/i/440 */
audio, canvas, img, video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* v1.0.5 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.royalSlider { width: 600px; height: 400px; position: relative; direction: ltr; }

.royalSlider > * { float: left; }

.rsWebkit3d .rsSlide { -webkit-transform: translateZ(0); }

.rsWebkit3d .rsSlide, .rsWebkit3d .rsContainer, .rsWebkit3d .rsThumbs, .rsWebkit3d .rsPreloader, .rsWebkit3d img, .rsWebkit3d .rsOverflow, .rsWebkit3d .rsBtnCenterer, .rsWebkit3d .rsAbsoluteEl, .rsWebkit3d .rsABlock, .rsWebkit3d .rsLink { -webkit-backface-visibility: hidden; }

.rsFade.rsWebkit3d .rsSlide, .rsFade.rsWebkit3d img, .rsFade.rsWebkit3d .rsContainer { -webkit-transform: none; }

.rsOverflow { width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color: transparent; }

.rsVisibleNearbyWrap { width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color: transparent; }

.rsVisibleNearbyWrap .rsOverflow { position: absolute; left: 0; top: 0; }

.rsContainer { position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; }

.rsArrow, .rsThumbsArrow { cursor: pointer; }

.rsThumb { float: left; position: relative; }

.rsArrow, .rsNav, .rsThumbsArrow { opacity: 1; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }

.rsHidden { opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.3s,opacity 0.3s linear; -moz-transition: visibility 0s linear 0.3s,opacity 0.3s linear; -o-transition: visibility 0s linear 0.3s,opacity 0.3s linear; transition: visibility 0s linear 0.3s,opacity 0.3s linear; }

.rsGCaption { width: 100%; float: left; text-align: center; }

/* Fullscreen options, very important ^^ */
.royalSlider.rsFullscreen { position: fixed !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 2147483647 !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; }

.royalSlider .rsSlide.rsFakePreloader { opacity: 1 !important; -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; display: none; }

.rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100%; }

.royalSlider.rsAutoHeight, .rsAutoHeight .rsSlide { height: auto; }

.rsContent { width: 100%; height: 100%; position: relative; }

.rsPreloader { position: absolute; z-index: 0; }

.rsNav { -moz-user-select: -moz-none; -webkit-user-select: none; user-select: none; }

.rsNavItem { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25); }

.rsThumbs { cursor: pointer; position: relative; overflow: hidden; float: left; z-index: 22; }

.rsTabs { float: left; background: none !important; }

.rsTabs, .rsThumbs { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }

.rsVideoContainer { /*left: 0;
top: 0;
position: absolute;*/ /*width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
float: left;*/ width: auto; height: auto; line-height: 0; position: relative; }

.rsVideoFrameHolder { position: absolute; left: 0; top: 0; background: #141414; opacity: 0; -webkit-transition: .3s; }

.rsVideoFrameHolder.rsVideoActive { opacity: 1; }

.rsVideoContainer iframe, .rsVideoContainer video, .rsVideoContainer embed, .rsVideoContainer .rsVideoObj { position: absolute; z-index: 50; left: 0; top: 0; width: 100%; height: 100%; }

/* ios controls over video bug, shifting video */
.rsVideoContainer.rsIOSVideo iframe, .rsVideoContainer.rsIOSVideo video, .rsVideoContainer.rsIOSVideo embed { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 44px; }

.rsABlock { left: 0; top: 0; position: absolute; z-index: 15; }

img.rsImg { max-width: none; }

.grab-cursor { cursor: url(grab.png) 8 8, move; }

.grabbing-cursor { cursor: url(grabbing.png) 8 8, move; }

.rsNoDrag { cursor: auto; }

.rsLink { left: 0; top: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 20; background: url(blank.gif); }

/******************************
*
*  RoyalSlider Default Skin 
*
*    1. Arrows 
*    2. Bullets
*    3. Thumbnails
*    4. Tabs
*    5. Fullscreen button
*    6. Play/close video button
*    7. Preloader
*    8. Caption
*    
*  Sprite: 'img/rs-default.png'
*  Feel free to edit anything
*  If you don't some part - just delete it
* 
******************************/
/* Background */
.rsDefault, .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs { background: #fff; color: #222; }

/***************
*
*  1. Arrows
*
****************/
.rsDefault .rsArrow { height: 100%; width: 44px; position: absolute; display: block; cursor: pointer; z-index: 21; }

.rsDefault.rsVer .rsArrow { width: 100%; height: 44px; }

.rsDefault.rsVer .rsArrowLeft { top: 0; left: 0; }

.rsDefault.rsVer .rsArrowRight { bottom: 0; left: 0; }

.rsDefault.rsHor .rsArrowLeft { left: 0; top: 0; }

.rsDefault.rsHor .rsArrowRight { right: 0; top: 0; }

.rsDefault .rsArrowIcn { width: 32px; height: 32px; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; position: absolute; cursor: pointer; background: url("img/rs-default.png"); background-color: #4d4d4d; background-color: rgba(77, 77, 77, 0.9); *background-color: #000; }

.rsDefault .rsArrowIcn:hover { background-color: #4d4d4d; }

.rsDefault.rsHor .rsArrowLeft .rsArrowIcn { background-position: -64px -32px; }

.rsDefault.rsHor .rsArrowRight .rsArrowIcn { background-position: -64px -64px; }

.rsDefault.rsVer .rsArrowLeft .rsArrowIcn { background-position: -96px -32px; }

.rsDefault.rsVer .rsArrowRight .rsArrowIcn { background-position: -96px -64px; }

.rsDefault .rsArrowDisabled .rsArrowIcn { opacity: .2; filter: alpha(opacity=20); *display: none; }

/***************
*
*  2. Bullets
*
****************/
.rsDefault .rsBullets { position: absolute; z-index: 35; left: 0; bottom: 0; width: 100%; height: auto; margin: 0 auto; background: #000; background: rgba(0, 0, 0, 0.75); text-align: center; line-height: 8px; overflow: hidden; }

.rsDefault .rsBullet { width: 8px; height: 8px; display: inline-block; *display: inline; *zoom: 1; padding: 6px 5px 6px; }

.rsDefault .rsBullet span { display: block; width: 8px; height: 8px; border-radius: 50%; background: #777; background: rgba(255, 255, 255, 0.5); }

.rsDefault .rsBullet.rsNavSelected span { background-color: #FFF; }

/***************
*
*  3. Thumbnails
*
****************/
.rsDefault .rsThumbsHor { width: 100%; height: 72px; }

.rsDefault .rsThumbsVer { width: 96px; height: 100%; position: absolute; top: 0; right: 0; }

.rsDefault.rsWithThumbsHor .rsThumbsContainer { position: relative; height: 100%; }

.rsDefault.rsWithThumbsVer .rsThumbsContainer { position: relative; width: 100%; }

.rsDefault .rsThumb { float: left; overflow: hidden; width: 96px; height: 72px; }

.rsDefault .rsThumb img { width: 100%; height: 100%; }

.rsDefault .rsThumb.rsNavSelected { background: #02874a; }

.rsDefault .rsThumb.rsNavSelected img { opacity: 0.3; filter: alpha(opacity=30); }

.rsDefault .rsTmb { display: block; }

/* Thumbnails with text */
.rsDefault .rsTmb h5 { font-size: 16px; margin: 0; padding: 0; line-height: 20px; color: #FFF; }

.rsDefault .rsTmb span { color: #DDD; margin: 0; padding: 0; font-size: 13px; line-height: 18px; }

/* Thumbnails arrow icons */
.rsDefault .rsThumbsArrow { height: 100%; width: 20px; position: absolute; display: block; cursor: pointer; z-index: 21; background: #000; background: rgba(0, 0, 0, 0.75); }

.rsDefault .rsThumbsArrow:hover { background: rgba(0, 0, 0, 0.9); }

.rsDefault.rsWithThumbsVer .rsThumbsArrow { width: 100%; height: 20px; }

.rsDefault.rsWithThumbsVer .rsThumbsArrowLeft { top: 0; left: 0; }

.rsDefault.rsWithThumbsVer .rsThumbsArrowRight { bottom: 0; left: 0; }

.rsDefault.rsWithThumbsHor .rsThumbsArrowLeft { left: 0; top: 0; }

.rsDefault.rsWithThumbsHor .rsThumbsArrowRight { right: 0; top: 0; }

.rsDefault .rsThumbsArrowIcn { width: 16px; height: 16px; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; position: absolute; cursor: pointer; background: url("img/rs-default.png"); }

.rsDefault.rsWithThumbsHor .rsThumbsArrowLeft .rsThumbsArrowIcn { background-position: -128px -32px; }

.rsDefault.rsWithThumbsHor .rsThumbsArrowRight .rsThumbsArrowIcn { background-position: -128px -48px; }

.rsDefault.rsWithThumbsVer .rsThumbsArrowLeft .rsThumbsArrowIcn { background-position: -144px -32px; }

.rsDefault.rsWithThumbsVer .rsThumbsArrowRight .rsThumbsArrowIcn { background-position: -144px -48px; }

.rsDefault .rsThumbsArrowDisabled { display: none !important; }

/* Thumbnails resizing on smaller screens */
@media screen and (min-width: 0px) and (max-width: 800px) { .rsDefault .rsThumb { width: 59px; height: 44px; }
  .rsDefault .rsThumbsHor { height: 44px; }
  .rsDefault .rsThumbsVer { width: 59px; } }
/***************
*
*  4. Tabs
*
****************/
.rsDefault .rsTabs { width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden; padding-top: 12px; position: relative; }

.rsDefault .rsTab { display: inline-block; cursor: pointer; text-align: center; height: auto; width: auto; color: #333; padding: 5px 13px 6px; min-width: 72px; border: 1px solid #D9D9DD; border-right: 1px solid #f5f5f5; text-decoration: none; background-color: #FFF; background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); -webkit-box-shadow: inset 1px 0 0 #fff; box-shadow: inset 1px 0 0 #fff; *display: inline; *zoom: 1; }

.rsDefault .rsTab:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }

.rsDefault .rsTab:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid #cfcfcf; }

.rsDefault .rsTab:active { border: 1px solid #D9D9DD; background-color: #f4f4f4; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset; }

.rsDefault .rsTab.rsNavSelected { color: #FFF; border: 1px solid #999; text-shadow: 1px 1px #838383; box-shadow: 0 1px 9px rgba(102, 102, 102, 0.65) inset; background: #ACACAC; background-image: -webkit-linear-gradient(top, #ACACAC, #BBB); background-image: -moz-llinear-gradient(top, #ACACAC, #BBB); background-image: linear-gradient(to bottom, #ACACAC, #BBB); }

/***************
*
*  5. Fullscreen button
*
****************/
.rsDefault .rsFullscreenBtn { right: 0; top: 0; width: 44px; height: 44px; z-index: 22; display: block; position: absolute; cursor: pointer; }

.rsDefault .rsFullscreenIcn { display: block; margin: 6px; width: 32px; height: 32px; background: url("img/rs-default.png") 0 0; background-color: #000; background-color: rgba(0, 0, 0, 0.75); *background-color: #000; border-radius: 2px; }

.rsDefault .rsFullscreenIcn:hover { background-color: rgba(0, 0, 0, 0.9); }

.rsDefault.rsFullscreen .rsFullscreenIcn { background-position: -32px 0; }

/***************
*
*  6. Play/close video button
*
****************/
.rsDefault .rsPlayBtn { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; cursor: pointer; }

.rsDefault .rsPlayBtnIcon { width: 64px; display: block; height: 64px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; background: url(img/rs-default.png) no-repeat 0 -32px; background-color: #000; background-color: rgba(0, 0, 0, 0.75); *background-color: #000; }

.rsDefault .rsPlayBtn:hover .rsPlayBtnIcon { background-color: rgba(0, 0, 0, 0.9); }

.rsDefault .rsBtnCenterer { position: absolute; left: 50%; top: 50%; }

.rsDefault .rsCloseVideoBtn { right: 0; top: 0; width: 44px; height: 44px; z-index: 500; position: absolute; cursor: pointer; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); }

.rsDefault .rsCloseVideoBtn.rsiOSBtn { top: -38px; right: -6px; }

.rsDefault .rsCloseVideoIcn { margin: 6px; width: 32px; height: 32px; background: url("img/rs-default.png") -64px 0; background-color: #000; background-color: rgba(0, 0, 0, 0.75); *background-color: #000; }

.rsDefault .rsCloseVideoIcn:hover { background-color: rgba(0, 0, 0, 0.9); }

/***************
*
*  7. Preloader
*
****************/
.rsDefault .rsPreloader { width: 20px; height: 20px; background-image: url(img/preloader-white.gif); left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; }

/***************
*
*  8. Global caption
*
****************/
.rsDefault .rsGCaption { position: absolute; float: none; bottom: 6px; left: 6px; text-align: left; background: black; background: rgba(0, 0, 0, 0.75); color: #FFF; padding: 2px 8px; width: auto; font-size: 12px; border-radius: 2px; }

/* ====================Defaults ======================================== */
::-moz-selection { background: #ffe39c; color: #333; text-shadow: none; }

::selection { background: #ffe39c; color: #333; text-shadow: none; }

body { font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 400; background: #616970; height: 100vh; }
body a { text-decoration: none; }

body.loading { opacity: 0; overflow: hidden; }

body.home { background: #000; }

body.error404 { background: #636B73; }

#preloader { width: 64px; height: 64px; position: absolute; top: 45%; left: 50%; margin-left: -32px; }

/* =================== Home & Main Nav styles ========================== */
.site-header { -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; background-color: #000; background-color: rgba(0, 0, 0, 0.2); padding: 10px 10px; }
.site-header::after { clear: both; content: ""; display: table; }
body.home .site-header { background-color: #000; background-color: rgba(0, 0, 0, 0.4); }
body.page-template-maintenance-php .site-header { background-color: #000; background-color: rgba(0, 0, 0, 0.4); }
.site-header:hover { background-color: rgba(0, 0, 0, 0.6) !important; }
.site-header .site-logo { display: block; float: left; }
.site-header .site-logo img { width: 100%; max-width: 200px; height: auto; }
.site-header .header-nav { float: right; }
.site-header .header-nav ul { margin: 0; padding: 0; }
.site-header .header-nav li { margin: 0; padding: 0; list-style: none; display: inline-block; font-size: 15px; text-transform: uppercase; margin-left: 20px; }
.site-header .header-nav li.no-small-caps { margin-left: 40px; text-transform: none; }
.site-header .header-nav li.no-small-caps a { color: #fbb913; }
.site-header .header-nav li.no-small-caps img { display: inline-block; width: 20px; height: 20px; margin-top: -6px; }
.site-header .header-nav li.mobile-link { font-size: 20px; }
.site-header .header-nav a { text-decoration: none; color: #fff; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.site-header .header-nav a:hover { color: #fbb913; }
.site-header .header-nav .desktop-link { display: none; }
@media only screen and (min-width: 961px) { .site-header { padding: 20px 40px; }
  .site-header .site-logo img { max-width: 270px; }
  .site-header .header-nav { margin-top: 3px; }
  .site-header .header-nav .desktop-link { display: inline-block; }
  .site-header .header-nav .mobile-link { display: none; } }

#fluid-nav { height: 150px; }

#logo, #static-logo { margin: 40px 0 0 40px; float: left; width: 197px; height: 74px; background: transparent url("img/logo.png") no-repeat center center; }
#logo a, #static-logo a { display: block; width: 197px; height: 74px; zoom: 1; }

#main-nav, #static-main-nav { margin: 40px 40px 0 0; float: right; }
#main-nav li, #static-main-nav li { display: inline-block; margin-left: 20px; color: #fff; }
#main-nav li a, #static-main-nav li a { text-decoration: none; text-transform: uppercase; color: #fff; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; font-weight: 500; }
#main-nav li a.current, #static-main-nav li a.current { color: #fbb913; }
#main-nav li a.login, #static-main-nav li a.login { color: #aaa; }
#main-nav li a:hover, #static-main-nav li a:hover { color: #fbb913; }

#static-nav { width: 920px; margin: 40px auto 80px auto; }

#static-logo { position: static; margin: 0; float: left; }

#static-main-nav { position: static; margin: 0; float: right; }

#slogan { position: fixed; left: 20px; bottom: 10px; z-index: 9996; color: #fff; text-transform: uppercase; text-shadow: 1px 1px 1px #444; font-size: 1.12em; line-height: 1.3; letter-spacing: 4px; max-width: 320px; font-weight: 400; }
@media only screen and (min-width: 720px) { #slogan { left: 20px; bottom: 40px; max-width: 440px; font-size: 1.12em; } }
@media only screen and (min-width: 961px) { #slogan { left: 40px; bottom: 40px; max-width: 100%; font-size: 1.12em; } }

#mobile-menu { display: none; }

#jPanelMenu-menu { background-color: #3d4347; display: none; visibility: hidden; z-index: 100 !important; }
#jPanelMenu-menu ul { margin: 0; padding: 0; }
#jPanelMenu-menu li { margin: 0; padding: 0; }
#jPanelMenu-menu li a.link { display: block; padding: 14px 10%; border-bottom: 1px solid #323639; background-color: #3d4347; color: #949ca3; text-decoration: none; font-weight: 500; font-size: 1em; letter-spacing: 1px; text-transform: uppercase; }
#jPanelMenu-menu li a.link.current { background-color: #0e0f10 !important; color: #444 !important; }
#jPanelMenu-menu li a.link:hover { background-color: #0e0f10; color: #fff; }
#jPanelMenu-menu li p { padding: 6px 10% 14px 10%; }
#jPanelMenu-menu li p span { display: block; }
#jPanelMenu-menu li p span.title { margin-top: 16px; color: #aaa; font-size: 12px; text-transform: uppercase; }
#jPanelMenu-menu li p span.desc { color: #ccc; }
#jPanelMenu-menu li p a { text-decoration: none; color: #ccc; }
#jPanelMenu-menu li p a:hover { text-decoration: underline; }
#jPanelMenu-menu .mobile-dropdown-menu { border-top: 1px solid #26292c; font-size: 0.85em; }
#jPanelMenu-menu .mobile-dropdown-menu li a.link { padding: 10px 10%; border-bottom: 1px solid #212426; background-color: #2b2e31; letter-spacing: 0; text-transform: none; }
#jPanelMenu-menu .mobile-dropdown-menu li a.link.current { background-color: #0e0f10 !important; color: #444 !important; }
#jPanelMenu-menu .mobile-dropdown-menu li a.link:hover { background-color: #0e0f10; color: #fff; }
html.no-touch #jPanelMenu-menu a { -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
@media only screen and (min-width: 960px) { #jPanelMenu-menu .show-mobile-dropdown-menu { border-bottom: none; }
  #jPanelMenu-menu .mobile-dropdown-menu { display: block; } }

body[data-menu-position="open"] .jPanelMenu-panel { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

/* =================== Maintenance ===================================== */
.maintenance-holder { position: relative; z-index: 1; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.maintenance-holder .left-col { position: relative; height: 100%; }
.maintenance-holder .maintenance-content { padding: 20px; height: 100%; background-color: #E6E9EB; }
.maintenance-holder .maintenance-content img { width: 100%; height: auto; border: 1px solid #dfdfdf; display: block; }
.maintenance-holder .maintenance-content p, .maintenance-holder .maintenance-content li { font-family: "ff-meta-serif-web-pro",serif; font-style: normal; font-weight: 500; font-size: 1em; line-height: 1.6em; }
@media only screen and (min-width: 960px) { .maintenance-holder .left-col { float: left; width: 60%; }
  .maintenance-holder .right-col { float: left; width: 40%; height: 1200px; }
  .maintenance-holder .maintenance-content { padding: 20px 40px; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: absolute; height: 100%; color: #E4E4E4; background-color: #494949; background-color: rgba(73, 73, 73, 0.95); }
  .maintenance-holder .maintenance-content h1 { font-weight: 400; }
  .maintenance-holder .maintenance-content img { display: none; } }
@media only screen and (min-width: 1200px) { .maintenance-holder .left-col { width: 70%; }
  .maintenance-holder .right-col { float: left; width: 30%; } }

/* =================== Contact Modal =================================== */
#contact-modal { display: none; width: 400px; height: 540px; background-color: #fff; box-shadow: 2px 3px 4px #444; }
#contact-modal a { display: block; width: 400px; height: 200px; margin: 0 0 20px 0; }
#contact-modal a:active { position: static; }
#contact-modal span { display: block; padding: 0; background: #000 url("img/map-icon.png") no-repeat center center; width: 100%; height: 100%; }
#contact-modal img { opacity: 1; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; }
#contact-modal img:hover { opacity: 0.6; }
#contact-modal p { border-bottom: 1px solid #ccc; margin: 0 30px 3px 30px; padding: 0 0 5px 0; }
#contact-modal p { font-size: 1.15em; color: #888; }
#contact-modal p a { display: inline; }
#contact-modal p.contact-heading, #contact-modal p.modal-social-heading { color: #000; border: 0; font-size: 1em; font-weight: 500; margin: 10px 15px 5px 30px; padding: 0; }
#contact-modal .modal-social { border-bottom: 0px; }

/* =================== Share Modal ===================================== */
#share-modal { display: none; width: 290px; height: 240px; background-color: #fff; box-shadow: 2px 3px 4px #444; }
#share-modal ul { margin: 24px 0 0 25px; padding: 0; }
#share-modal li { display: inline-block; display: inline-block; width: 90px; height: 90px; margin-right: 30px; }
#share-modal a { display: block; width: 100%; height: 100%; padding-bottom: 15px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
#share-modal a:hover { padding-bottom: 0; }
#share-modal li.fb a { background: transparent url("img/fb.png") no-repeat center center; }
#share-modal li.tw a { background: transparent url("img/tw.png") no-repeat center center; cursor: pointer; }
#share-modal li.pi a { background: transparent url("img/pi.png") no-repeat center center; }
#share-modal li.tb a { background: transparent url("img/tb.png") no-repeat center center; }

.modal_close { position: absolute; top: 20px; right: -42px; width: 42px; height: 42px; background: transparent url("img/modal-close.png") no-repeat 0 0; box-shadow: 2px 3px 4px #444; cursor: pointer; }

#lean_overlay { position: fixed; z-index: 10901; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none; }

/* =================== Work Page Carousel ============================== */
#wrapper { width: 100%; height: 500px; margin: -230px 0 0 0; overflow: hidden; position: absolute; left: 0; top: 50%; opacity: 0; }

#slider-container { position: absolute; width: 100%; }

#wrapper-touch { margin: 0; padding: 0; opacity: 0; }
#wrapper-touch ul { padding: 0; margin: 0; }
#wrapper-touch ul li a.proj { position: relative; display: block; width: 370px; height: 490px; background: #000; margin: 0 auto; }
#wrapper-touch ul li a.proj span.heading { display: block; position: absolute; top: 40px; left: 20px; z-index: 20; color: #ccc; font-size: 2.8em; font-weight: 500; text-transform: uppercase; line-height: 0.8em; }
#wrapper-touch ul li a.proj span.subtitle { display: block; position: absolute; top: 90px; left: 20px; z-index: 20; color: #ccc; font-size: 1.8em; font-weight: 400; line-height: 0.8em; }
#wrapper-touch ul li a.proj span.gradient-work-img { display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 370px; height: 298px; background: transparent url("img/gradient-work-img.png") repeat-x 0 0; }

#carousel div { width: 370px; height: 490px; margin: 20px 110px; float: left; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
#carousel div.empty { box-shadow: none; }
#carousel div a.proj { display: block; width: 370px; height: 490px; position: absolute; top: 0; left: 0; z-index: 0; }
#carousel div span.heading { display: block; position: absolute; top: 40px; left: 20px; z-index: -1; color: #ccc; font-size: 2.8em; font-weight: 500; text-transform: uppercase; line-height: 1em; }
#carousel div span.subtitle { display: block; position: absolute; top: 90px; left: 20px; z-index: -1; color: #ccc; font-size: 1.8em; font-weight: 400; line-height: 0.8em; }
#carousel div span.gradient-work-img { display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 370px; height: 298px; background: transparent url("img/gradient-work-img.png") repeat-x 0 0; }
#carousel div.selected a.proj { display: block; width: 370px; height: 490px; position: absolute; top: 0; left: 0; z-index: 10; cursor: pointer; }
#carousel div.selected span.heading { display: block; position: absolute; top: 40px; left: 20px; z-index: 10; color: #ccc; font-size: 2.8em; font-weight: 500; text-transform: uppercase; line-height: 1em; }
#carousel div.selected span.subtitle { display: block; position: absolute; top: 90px; left: 20px; z-index: 10; color: #ccc; font-size: 1.8em; font-weight: 400; line-height: 0.8em; }
#carousel div.selected span.gradient-work-img { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 370px; height: 298px; background: transparent url("img/gradient-work-img.png") repeat-x 0 0; }
#carousel div#work-1103 span.subtitle { top: 130px; }
#carousel div#work-1193 span.subtitle { top: 130px; }

.for-sale { color: #000; position: absolute; right: 0; bottom: 80px; z-index: 10900; display: block; padding: 6px 10px; background-color: rgba(251, 185, 19, 0.7); font-size: 18px; }
.for-sale:hover { color: #000; background-color: #fff; position: absolute !important; bottom: 80px !important; }
.for-sale:active, .for-sale:visited { color: #000; position: absolute !important; bottom: 80px !important; }

body.home .for-sale { bottom: 100px; z-index: 9999; }
body.home .for-sale:hover, body.home .for-sale:active, body.home .for-sale:visited { bottom: 100px !important; }
@media only screen and (min-width: 720px) { body.home .for-sale { bottom: 80px; }
  body.home .for-sale:hover, body.home .for-sale:active, body.home .for-sale:visited { bottom: 80px !important; } }

.for-sale-ind { color: #000; position: absolute; right: 20px; bottom: 20px; z-index: 10900; display: block; padding: 6px 10px; background-color: rgba(251, 185, 19, 0.7); font-size: 18px; }
.for-sale-ind:hover { color: #000; background-color: #fff; position: absolute; bottom: 20px; }
.for-sale-ind:active, .for-sale-ind:visited { color: #000; position: absolute; bottom: 20px; }
@media only screen and (min-width: 720px) { .for-sale-ind { right: 40px; bottom: 80px; }
  .for-sale-ind:hover { bottom: 80px; }
  .for-sale-ind:active, .for-sale-ind:visited { bottom: 80px; } }

#prev, #next { display: block; width: 44px; height: 50px; margin-top: -30px; position: absolute; bottom: 10%; box-shadow: 1px 1px 30px #666; z-index: 5; }

#prev { background: transparent url("img/prev-up.png") no-repeat center center; left: 50%; margin-left: -320px; bottom: 40px; }
#prev.disabled { cursor: default; background: transparent url("img/prev-disabled.png") no-repeat center center; }
#prev.disabled:hover { cursor: default; background: transparent url("img/prev-disabled.png") no-repeat center center; }
#prev:hover { background: transparent url("img/prev-over.png") no-repeat center center; }

#next { background: transparent url("img/next-up.png") no-repeat center center; right: 50%; margin-right: -320px; bottom: 40px; }
#next.disabled { cursor: default; background: transparent url("img/next-disabled.png") no-repeat center center; }
#next.disabled:hover { cursor: default; background: transparent url("img/next-disabled.png") no-repeat center center; }
#next:hover { background: transparent url("img/next-over.png") no-repeat center center; }

.single-projects #prev, .single-projects #next { display: none; }

/* =================== About Page ====================================== */
.page-template-about-php #prev, .page-template-about-php #next { display: none; }

#wrapper-about { position: relative; margin-top: 38px; width: 100%; height: 540px; margin-bottom: 40px; overflow: hidden; opacity: 0; }

#wrapper-about-mobile { display: none; }

.contain { position: absolute; top: 0; left: 0; width: 9000px; height: 100%; }

.panel { position: absolute; width: 400px; height: 540px; margin: 0 40px 0 0; background-color: #e6e9eb; }
.panel p { padding: 15px 30px 0 30px; margin: 0; font-family: "ff-meta-serif-web-pro",serif; font-style: normal; font-weight: 500; font-size: 1em; line-height: 1.6em; color: #444; }
.panel p.designation { text-transform: uppercase; padding-top: 0; font-size: 0.9em; font-family: "brandon-grotesque",sans-serif; color: #888; }
.panel h3 { padding: 25px 30px 15px 30px; margin: 0; font-size: 1.35em; font-weight: 500; }
.panel h4 { margin: 0; font-size: 1.35em; font-weight: 500; border-top: 1px solid #ccc; }
.panel h4 a { display: block; width: 340px; height: 76px; padding: 15px 30px 0 30px; color: #444; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.panel h4 a:hover { color: #000; }
.panel h4:hover { background-color: #fbb913; }
.panel h4 a:active { position: static; }
.panel h4.last { border-bottom: 1px solid #ccc; }
.panel.connect h3 { padding-bottom: 35px; }
.panel img { width: 330px; height: 175px; margin: 30px 0 0 30px; }
.panel .jspVerticalBar { background-color: transparent; }
.panel .jspTrack { background-color: transparent; }
.panel .jspDrag { background-color: #CBCECF; }

.press { width: 560px; }
.press div.links { border-top: 1px solid #888; margin: 0 30px; }
.press img.press-logo { float: left; margin: 23px 0 0 0; height: 34px; width: 200px; }
.press p.date { padding: 7px 0 0 240px; margin-left: 30px; margin-right: 40px; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 400; font-size: 0.9em; color: #666; text-transform: uppercase; }
.press p.title { padding: 0 0 15px 240px; margin-left: 30px; margin-right: 40px; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500; font-size: 1.2em; line-height: 1.3em; }
.press p.title a { color: #000; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.press p.title a:hover { color: #888; }

#about-mgh, .press { background-color: #f0e0b7; }
#about-mgh .jspDrag, .press .jspDrag { background-color: #E2CF9D; }

html.no-touch #subnav { position: absolute; left: 50%; top: 110px; margin-left: -187px; }
html.no-touch #subnav ul li { display: inline-block; padding: 4px 10px; text-align: center; }
html.no-touch #subnav ul li a { color: #bbb; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
html.no-touch #subnav ul li a:hover { color: #fbb913; }
html.no-touch #subnav ul li.selected { background-color: #848C92; border-radius: 2px; }
html.no-touch #subnav ul li.selected a { color: #fff; }

html.touch #subnav { display: none; }

/* =================== Blog Page Styles ================================ */
#blog-wrapper { width: 920px; position: relative; margin: 80px auto 80px auto; background: #e5e5e5; }

#blog-content { width: 595px; min-height: 550px; float: left; padding: 0 35px 25px 35px; background: #fff; }
#blog-content .post { font-family: "ff-meta-serif-web-pro",serif; font-style: normal; font-weight: 500; padding: 0 0 20px 0; border-bottom: 1px dotted #888; }
#blog-content .post img { max-width: 100% !important; width: 100% !important; height: auto !important; }
#blog-content .post span.caption { display: block; font-size: 0.85em; line-height: 1.4; font-style: italic; margin: 10px 0 25px 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#blog-content .post h1, #blog-content .post h2, #blog-content .post h3, #blog-content .post h4, #blog-content .post h5, #blog-content .post h6, #blog-content .post small { font-family: "brandon-grotesque",sans-serif; font-style: normal; }
#blog-content .post h2.post-title { font-weight: 500; font-size: 1.8em; margin-top: 35px; margin-bottom: 0; }
#blog-content .post h2.search-header { font-weight: 400; font-size: 1.25em; margin-top: 35px; margin-bottom: 0; color: #444; background: #ffe39c; padding: 5px 20px; border-radius: 3px; }
#blog-content .post h2.search-header span { font-weight: 600; }
#blog-content .post p, #blog-content .post ul, #blog-content .post ol, #blog-content .post li { font-size: 1.063em; line-height: 1.625em; color: #555; }
#blog-content .post small { text-transform: uppercase; color: #888; font-size: 0.75em; }
#blog-content .post small span { color: #444; }
#blog-content .post small a { color: #444; }
#blog-content .post small a:hover { background-color: #fbb913; color: #000; }
#blog-content .post a { color: #888; -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; }
#blog-content .post a:hover { background-color: #fbb913; color: #000; }

#blog-sidebar { width: 195px; float: left; padding: 25px 30px 25px 30px; }

/* =================== Search Form Styles ============================== */
#searchform { margin-top: 30px; }

input#s { width: 185px; border: 1px solid #bbb; padding: 5px; border-radius: 3px; margin-bottom: 10px; }

label.screen-reader-text { display: block; margin: 0 0 5px 0; color: #888; font-size: 1.125em; font-weight: bold; }

input#searchsubmit { background-color: #888; border: 0; padding: 5px 10px; font-size: 0.9em; border-radius: 3px; font-family: "brandon-grotesque",sans-serif; font-style: normal; color: #fff; -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; }
input#searchsubmit:hover { background-color: #000; }

#recents { margin-top: 30px; margin-bottom: 20px; }
#recents h3 { margin: 0 0 10px 0; color: #888; font-size: 1.125em; }
#recents ul { margin: 0; padding: 0; }
#recents li { list-style-type: none; margin: 0; padding: 6px; border-bottom: 1px solid #aaa; }
#recents li a { color: #444; font-size: 0.95em; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
#recents li a:hover { color: #888; }

#social-links { margin-top: 10px; }
#social-links h3 { margin: 0 0 10px 0; color: #888; font-size: 1.125em; }
#social-links ul { margin: 0; padding: 0; }
#social-links li { display: inline-block; list-style-type: none; margin: 0; padding: 4px 8px 0 0; }
#social-links li a { color: #444; font-size: 0.95em; opacity: 1; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
#social-links li a:hover { opacity: 0.6; }

#blog-nav { margin-top: 20px; margin-bottom: 10px; color: #000; width: 595px; }
#blog-nav .left-side, #blog-nav .right-side { display: inline-block; }
#blog-nav .left-side { float: left; }
#blog-nav .right-side { float: right; }
#blog-nav a { padding: 8px; background-color: #000; border-radius: 3px; color: #fff; font-size: 0.7em; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
#blog-nav a:hover { background-color: #fbb913; color: #000; }

/* =================== 404 ============================================= */
#oops { margin: 0 auto; width: 250px; height: 250px; background: transparent url("img/404.gif") no-repeat center center; }
#oops h2 { color: #fff; text-align: center; padding-top: 260px; text-shadow: 1px 1px #000; }

/* =================== Touch Capable Only Styles ======================= */
html.touch #wrapper-about { overflow: scroll; }

/* =================== Desktop Only Styles ============================= */
html.no-touch .single-projects #prev { display: block; position: fixed; right: 0; left: 0; bottom: 47%; margin-left: 0px; width: 44px; height: 50px; background-color: #000; box-shadow: 1px 1px 10px #444; }
html.no-touch .single-projects #next { display: block; position: fixed; right: 0; bottom: 47%; margin-right: 0px; width: 44px; height: 50px; background-color: #000; }
html.no-touch .page-template-about-php #prev { display: block; position: fixed; right: 0; left: 0; bottom: 47%; margin-left: 0px; background-color: #000; }
html.no-touch .page-template-about-php #next { display: block; position: fixed; right: 0; bottom: 47%; margin-right: 0px; background-color: #000; }
html.no-touch #wrapper-about { overflow: hidden; }
html.no-touch #instruction { display: block; }
html.no-touch #touch-instruction { display: none; }
html.no-touch #gradient-left { opacity: 0.5; width: 110px; height: 100%; position: fixed; top: 0; left: 0; background: transparent url("img/gradient-left.png") repeat-y 0 0; }
html.no-touch #gradient-right { opacity: 0.5; width: 110px; height: 100%; position: fixed; top: 0; right: 0; background: transparent url("img/gradient-right.png") repeat-y 0 0; }

/* =================== Instructions ==================================== */
#instruction, #touch-instruction { position: absolute; z-index: -999; width: 240px; left: 50%; margin-left: -120px; bottom: 30px; }
#instruction p, #touch-instruction p { color: #eee; text-align: center; font-size: 1.15em; letter-spacing: 0.1em; }

#instruction { display: none; }

/* =================== Project Page Styles ============================= */
#project-nav { position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 44px; background-color: #000; color: #fff; }

#project-page-logo { float: right; width: 181px; height: 18px; background: transparent url("img/project-page-logo.png") no-repeat 0 0; margin: 14px 12px 0 12px; }
#project-page-logo a { display: block; width: 100%; height: 100%; }
#project-page-logo h1 { margin: 0; }

/* =================== Project Dropdown Menu =========================== */
#project-dropdown { position: relative; float: left; background: #444 url("img/pointer-bottom.png") no-repeat 275px 19px; width: 300px; height: 44px; opacity: 0.8; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; }
#project-dropdown:hover { opacity: 0.99; background-color: #666; }
#project-dropdown:active { background-position: 275px 20px; }
#project-dropdown a { display: block; margin: 13px 12px 12px 12px; text-transform: uppercase; font-size: 0.95em; font-weight: 600; color: #fff; }
#project-dropdown a span { font-weight: 400; color: #ccc; }
#project-dropdown a.curr-proj { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media only screen and (min-width: 701px) { #project-dropdown a.curr-proj { width: 250px; } }
#project-dropdown ul { position: absolute; top: -9999px; width: 300px; margin: 0; padding: 0; background-color: #fff; opacity: 0; box-shadow: 1px 1px 2px #444; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
#project-dropdown ul li { list-style-type: none; margin: 0; padding: 0; }
#project-dropdown ul li a { width: 276px; color: #000; margin: 0; padding: 9px 12px 9px 12px; border-bottom: 1px solid #eee; }
#project-dropdown ul li a:hover { background-color: #eee; }
#project-dropdown ul li a:active { position: relative; bottom: 0; }
#project-dropdown ul li.back { background-color: #ffe39c; border-bottom: 0px solid #000; }
#project-dropdown ul li.back a { color: #000; border-bottom: 0 solid #000; }
#project-dropdown ul li.back a:hover { color: #fff; background-color: #444; }
#project-dropdown:hover ul { top: 44px; opacity: 1; }

/* =================== Back to work ==================================== */
#back-to-work { float: left; background: transparent url("img/pointer-back.png") no-repeat 7px 18px; width: 70px; height: 44px; text-align: right; opacity: 0.8; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; }
#back-to-work:hover { opacity: 0.99; background-color: #444; }
#back-to-work a { display: block; margin: 12px; font-weight: 400; color: #fff; }
#back-to-work a span { font-weight: 400; color: #ccc; }
#back-to-work:active { background-position: 7px 19px; }

/* =================== Share Modal ===================================== */
#share-project { float: left; width: 100px; height: 44px; opacity: 0.8; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
#share-project:hover { opacity: 0.99; background: #444; }
#share-project a { display: block; margin: 13px 12px 12px 20px; text-transform: uppercase; font-size: 0.95em; font-weight: 600; color: #fff; }
#share-project a span { font-weight: 400; color: #ccc; }

/* =================== RoyalSlider Slideshow =========================== */
.homeRoyalSlider { width: 100%; }

#home-slideshow { position: absolute; z-index: -10000; left: 0; top: 0; right: 0; bottom: 0; height: auto; width: auto; background-color: #616970; }

.royalSlider { position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: auto; width: auto; }

.rsDefault, .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs { background: #616970; }

/* =================== jScrollpane CSS ================================= */
.jspContainer { overflow: hidden; position: relative; }

.jspPane { position: absolute; }

.jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; }

.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; }

.jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; }

.jspCap { display: none; }

.jspHorizontalBar .jspCap { float: left; }

.jspTrack { background: #dde; position: relative; }

.jspDrag { background: #bbd; position: relative; top: 0; left: 0; cursor: pointer; }

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }

.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }

.jspArrow.jspDisabled { cursor: default; background: #80808d; }

.jspVerticalBar .jspArrow { height: 16px; }

.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }

.jspVerticalBar .jspArrow:focus { outline: none; }

.jspCorner { background: #eeeef4; float: left; height: 100%; }

* html .jspCorner { margin: 0 -3px 0 0; }

/* =================== Footer ========================================== */
footer { position: fixed; bottom: 0; z-index: 9997; width: 100%; background-color: #000; color: #fbb913; font-size: 0.85em; }
footer p { margin: 0px; padding: 0px; }
footer a { text-decoration: none; color: #fbb913; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; }
footer a:visited { color: #fbb913; }
footer a:hover { color: #fff; }

#contact-info { float: left; padding: 10px 10px 10px 40px; }

#copyright { float: right; padding: 10px 40px 10px 10px; }

.ss-social { display: inline-block; margin-left: 20px; }

#gradient-top { position: fixed; top: 0; left: 0; z-index: -9999; width: 100%; height: 143px; background: transparent url("img/gradient-top.png") repeat-x 0 0; }

#gradient-bottom { position: fixed; bottom: 0; left: 0; width: 100%; height: 193px; background: transparent url("img/gradient-bottom.png") repeat-x 0 0; }

/* =================== Media Queries =================================== */
@media screen and (max-width: 480px) { #subnav { display: none; }
  #copyright, #gradient-top, #music { display: none; }
  .page-template-about-php #backstretch, .page-template-about-php #backstretch { display: none; }
  li.login { display: none !important; }
  #fluid-nav { height: auto; background: #000; }
  #static-nav { width: 100%; margin: 0; background: #000; }
  #logo, #static-logo { margin: 0; padding: 10px; float: none; width: 181px; height: 18px; background: transparent url("img/project-page-logo.png") no-repeat center center; }
  #logo a, #static-logo a { display: block; width: 181px; height: 18px; }
  #static-logo { position: static; margin: 0; float: none; }
  #main-nav, #static-main-nav { float: none; margin: 0; padding: 10px; width: auto; background: #444; }
  #main-nav ul, #static-main-nav ul { margin: 0 auto; width: 100%; }
  #main-nav li, #static-main-nav li { margin: 0 20px 0 0; display: inline; }
  #main-nav li a, #static-main-nav li a { text-transform: none; }
  #static-main-nav { position: static; margin: 0; float: none; }
  #slider-container { position: absolute; width: 100%; }
  #wrapper-touch { margin: 0; padding: 0; opacity: 0; }
  #wrapper-touch ul { padding: 0; margin: 0; }
  #wrapper-touch li { margin: 0; padding: 0; }
  #wrapper-touch ul li a.proj { position: relative; display: block; width: 189px; height: 280px; background: transparent; margin: 0 auto; }
  #wrapper-touch ul li a.proj span.heading { position: absolute; top: 50px; left: 20px; z-index: 20; color: #fff; font-size: 1.2em; font-weight: 700; }
  #wrapper-touch ul li a.proj span.subtitle { display: none; }
  #wrapper-touch ul li a.proj span.gradient-work-img { display: block; opacity: 0.3; position: absolute; top: 22px; left: 0; z-index: 0; width: 189px; height: 250px; }
  #wrapper-touch ul li a.proj img { position: static; width: 189px; height: 250px; }
  #next, #prev { display: none; }
  #touch-instruction { display: none; }
  #blog-wrapper { width: 100%; position: relative; margin: 0 auto; background: #e5e5e5; }
  #blog-content { width: 90%; min-height: auto; float: none; padding: 1px 5% 25px 5%; background: #fff; }
  #blog-sidebar { width: 90%; float: none; padding: 25px 5% 25px 5%; }
  #blog-nav { width: 100%; }
  #oops { margin: 50px auto 0 auto; width: 90%; height: 160px; background: none; }
  #oops h2 { color: #fff; text-align: center; padding-top: 160px; text-shadow: 1px 1px #000; }
  #wrapper-about { display: none; }
  #wrapper-about-mobile { display: block; width: 100%; height: auto; padding: 0; background: #E6E9EB; }
  #wrapper-about-mobile .yellow { background: #F0E0B7; padding: 20px 0; }
  #wrapper-about-mobile .white { background: transparent; padding: 20px 0; }
  #wrapper-about-mobile h2 { margin: 0 0 20px 0; padding-left: 5%; padding-right: 5%; }
  #wrapper-about-mobile h3 { margin: 10px 0 0 0; padding-left: 5%; padding-right: 5%; }
  #wrapper-about-mobile p { padding-left: 5%; padding-right: 5%; }
  #wrapper-about-mobile p.designation { margin: 0 0 20px 0; color: #888; font-size: 0.9em; text-transform: uppercase; }
  #wrapper-about-mobile img { width: 90%; height: auto; margin-left: 5%; margin-right: 5%; }
  #wrapper-about-mobile ul { margin: 0 5%; padding: 0; }
  #wrapper-about-mobile ul li { list-style-type: none; margin: 0; padding: 0 0 10px 0; border-top: 1px solid #aaa; }
  #wrapper-about-mobile a { color: #555; }
  #wrapper-about-mobile a:hover { color: #000; }
  #share-project { display: none; }
  .custom-code { display: none; }
  #project-page-logo { margin-right: 10px; }
  #contact-modal { width: auto; height: auto; padding-top: 5px; padding-bottom: 15px; box-shadow: 0px 0px 0px #444; }
  #contact-modal #map { display: none; }
  #contact-modal p { width: 75%; border-bottom: 1px solid #ccc; margin: 0 15px 5px 15px; padding: 0 0 5px 0; font-size: 0.9em; color: #888; }
  #contact-modal p.contact-heading, #contact-modal p.modal-social-heading { color: #000; border: 0; font-weight: 500; margin: 10px 15px 0 15px; padding: 0; }
  .modal_close { position: absolute; top: 10px; right: 0; box-shadow: 0px 0px 0px #444; }
  footer { background-color: #444; }
  footer #contact-info { float: none; padding: 10px 0; margin: 0; text-align: center; } }
@media (min-width: 481px) and (max-width: 960px) { #subnav { display: none; }
  #static-nav { width: 92%; margin: 40px auto 60px auto; }
  #blog-wrapper { width: 92%; position: relative; margin: 4% auto; background: #e5e5e5; }
  #blog-content { width: 90%; min-height: auto; float: none; padding: 1px 5% 25px 5%; background: #fff; }
  #blog-sidebar { width: 90%; float: none; padding: 25px 5% 25px 5%; }
  #blog-nav { width: 100%; }
  #wrapper-about { overflow: scroll; } }
@media screen and (max-width: 700px) { #copyright { display: none; }
  #fluid-nav { height: auto; background: #000; }
  #static-nav { width: 100%; margin: 0; background: #000; }
  #logo, #static-logo { margin: 0; padding: 10px; float: none; width: 181px; height: 18px; background: transparent url("img/project-page-logo.png") no-repeat center center; }
  #logo a, #static-logo a { display: block; width: 181px; height: 18px; }
  #static-logo { position: static; margin: 0; float: none; }
  #main-nav, #static-main-nav { float: none; margin: 0; padding: 10px; width: auto; background: #444; }
  #main-nav ul, #static-main-nav ul { margin: 0 auto; width: 100%; }
  #main-nav li, #static-main-nav li { margin: 0 20px 0 0; display: inline; }
  #main-nav li a, #static-main-nav li a { text-transform: none; }
  #static-main-nav { position: static; margin: 0; float: none; }
  .modal_close { position: absolute; top: 10px; right: 0; box-shadow: 0px 0px 0px #444; }
  #project-dropdown { width: 160px; background: #444 url("img/pointer-bottom.png") no-repeat 135px 19px; }
  #project-dropdown span { display: none; }
  #project-dropdown ul { width: 160px; }
  #project-dropdown li a { width: 136px !important; }
  #project-page-logo { width: 24px; height: 18px; background: transparent url("img/project-page-logo.png") no-repeat 0 0; }
  #prev { margin-left: -180px; box-shadow: none; }
  #next { margin-right: -180px; box-shadow: none; }
  .ss-social { display: none; } }
@media screen and (max-height: 800px) { html.no-touch #subnav { position: absolute; margin: 0; left: auto; right: 62px; top: 80px; } }
@media screen and (max-height: 650px) { html.no-touch #subnav { display: none; } }
/* =================== THE END ========================================= */
/* ========================================================================== Helper classes ========================================================================== */
/* Image replacement */
.ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; }

.ir:before { content: ""; display: block; width: 0; height: 150%; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats  For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

/* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */
.clearfix { *zoom: 1; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ }
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }
/* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */
@media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  /* Don't show links for images, or javascript/internal links */
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; /* h5bp.com/t */ }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }