/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	overflow: hidden;
	*overflow: visible;
	*zoom: 1;
	padding: 0 10px;
}

.unit {
 /* unit - Base class which divides a line into sections (columns). */
	float: left;
	padding: 0 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
 /* box-sizing:border-box; creates a box-model where 
	padding and border are NOT added onto the width - they are included in the width, 
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */;
}

.unitRightv {
 /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float: right;
}

/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. 
The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */

.size1of1 {
	float: none;
}

.size1of2 {
	width: 50%;
}

.size1of3 {
	width: 33.33333%;
}

.size2of3 {
	width: 66.66666%;
}

.size1of4 {
	width: 25%;
}

.size3of4 {
	width: 75%;
}

.size1of5 {
	width: 20%;
}

.size2of5 {
	width: 40%;
}

.size3of5 {
	width: 60%;
}

.size4of5 {
	width: 80%;
}

.lastUnit {
 /* lastUnit - Extends unit. Applied to the last child of every line. */
	float: none;
	width: auto;
	_position: relative;
 /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters. 
	meaning that anything prefixed with _ wouldn't be picked up by any other browsers */
	_left: -3px;
	_margin-right: -3px;
}

/* MAIN LAYOUT */
body {
	margin: 0;
	min-width: 240px;
	min-height: 540px;
	-webkit-text-size-adjust: none;
 /* The text size is not adjusted for Safari on iPhone */;
}

.ie7 body,
	.ie8 body {
	min-width: 860px;
 /* media queries are not supported in ie7/8 without a polyfill */;
}

.main {
	padding: 60px 0;
	position: relative;
    min-height:100vh;
    box-sizing:border-box;
}

.inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}

.intro-content {
	display:none;
}

.Home .intro-content {
	display:block;
}

.header .inner,
.navi .inner,
.footer .inner,
.jcarousel-inner .inner,
.intro-content .inner {
	max-width: 100vw!important;
}

.tablet-nav .inner {
	padding: 0 0px;
}

.ie6 .inner {
	width: 960px;
}

.no-sidebar .content-container {
	float: left;
	width: 100%;
 /* makes content container full width when there is no sidebar */;
}

.sidebar {
 /* this is the sidebar element */
	margin-top: 12px;
}

.no-sidebar .sidebar {
	display: none;
}

/* TYPOGRAPHY */

@font-face {
	font-family: 'WebSymbolsRegular';
      src: url('../webfonts/websymbols-regular-webfont.eot');
      src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
      font-weight: normal;
      font-style: normal;
}


/* BASE TYPOGRAPHY */

/* These are the default styles for the Simple theme */
body {
	font-size: 13px;
 /* This overrides the browsers default font size */
	line-height: 20px;
 /* If you change the font-size make sure you change the line-height value as well - the usual ratio is around 1.5 (font-size x 1.5 = line-height) */
	color: #333333;
	font-family: 'Open Sans', sans-serif;
}

body a {
	text-decoration: none;
} /* this removes the underline from all links */
body a:link {
	-webkit-tap-highlight-color: #ED582b;
} /* this sets the highlight color when links are tapped on Safari (browser) on iPhone */


/* HEADERS */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	margin-bottom: 10px;
	color: #444;
}

.typography h1 {
	font-weight: 800;
	font-size: 36px;
	line-height: 45px;
	margin: 0 0 25px 0;
	padding-bottom: 5px;
	text-transform: uppercase;
}

.typography h2 {
	font-size: 28px;
	line-height: 35px;
	margin-bottom: 15px;
}

.typography h3 {
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 10px;
}

.typography h4 {
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 5px;
}

.typography h5 {
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 5px;
}

.typography h6 {
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	margin-bottom: 5px;
}

.typography  p {
	font-size: 13px;
	line-height: 20px;
	margin: 0 0 20px;
}

.typography .intro {
	font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
	font-size: 22px;
	line-height: 32px;
	margin-bottom: 20px;
}

.typography em {
	font-style: italic;
}

::selection,
::-moz-selection {
 /* Applies style to highlighted portion of a page */
	background: #ED582b;
	color: #fff;
	text-shadow: none;
}

/* LINKS */
a, 
a.intro {
	color: #ED582b;
	text-decoration: none;
}

a:hover {
	color: #25a9e0;
}

a:focus {
}

.intro-content h3 {
	color: #ed582b;
	text-transform: uppercase;
	font-weight: 800;
}

/* LIST STYLES
-------------------------------------------- */
.typography ul, 
.typography ol,
.typography dl {

}

.typography ul li {
    list-style-type: none;

}

.ContentPage .typography ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}

.ContentPage .typography ul li {
    padding: 0 0 5px 5px;
}

.ContentPage .typography ul li:before{
    content: "\0BB \020";
    padding-right:5px;
}

/* TABLE STYLES
-------------------------------------------- */
.typography table {
	border-collapse: collapse;
 /* borders are collapsed into a single border when possible */
	border: 1px solid #d4d4d4;
	border-spacing: 0;
 /* The border-spacing property sets the distance between the borders of adjacent cells - acts as a backup to border-collapse: collapse */
	margin: 0 0 10px;
	text-align: left;
}

.typography table tr:nth-child(even) {
	background-color: #ededed;
}

.typography table tr.even,
  .typography table th,
  .typography thead td {
	background-color: #ededed;
}

.typography table td,
  .typography table th {
	padding: 2px 5px;
	border: 1px solid #d4d4d4;
	vertical-align: top;
}

.typography table th {
	font-weight: bold;
}


/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.typography .left {
	text-align: left;
}

.typography .center {
	text-align: center;
}

.typography .right {
	text-align: right;
}


/* IMAGES 
-------------------------------------------- */
.typography img {
	height: auto;
 /* resets the image height so that it maintains its aspect ratio when width is set */
}

.typography img.left {
	float: left;
	max-width: 50%;
	margin: 5px 20px 10px 0;
}

.typography img.right {
	float: right;
	max-width: 50%;
 /* Responsive width */
	margin: 5px 0 10px 20px;
}

.typography img.leftAlone {
	float: left;
	margin-right: 100%;
	margin-bottom: 10px;
	clear: both;
}

.typography img.center {
	float: none;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 10px;
	clear: both;
}

.typography .captionImage {
	width: 100%;
	margin-top: 5px;
}

.typography .captionImage img {
	margin: 0;
}

.typography .captionImage.left {
	float: left;
	margin: 5px 30px 20px 0px;
}

.typography .captionImage.right {
	float: right;
	margin: 5px 0 20px 30px;
}

.typography .captionImage.left[style],
  .typography .captionImage.right[style] {
	max-width: 50%;
 /* Overides core width to make responsive */
	;
}

.typography .captionImage.left img,
  .typography .captionImage.right img {
	float: none;
	max-width: none;
	width: 100%;
}

.typography .captionImage.left img {
	margin-right: -10px;
}

.typography .captionImage.right img {
	margin-left: -10px;
}

.typography .captionImage.right p {
	margin-left: -10px;
	text-align: left;
	margin-left: -10px;
}

.typography .captionImage.leftAlone {
	float: none;
	margin: 0 20px 20px 0px;
}

.typography .captionImage.center {
	margin: 0 auto 20px;
}

.typography .captionImage p {
	clear: both;
	margin: 5px 0;
	font-style: italic;
	color: #888;
}

.imageborder img {
	width:100%;
}

/* BLOCKQUOTES
-------------------------------------------- */
.typography blockquote {
	background: transparent url(../images/blockquote.png) no-repeat 0px 6px;
	font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
	color: #777;
	display: block;
	font-style: italic;
	margin: 0 0 20px;
	float: right;
	text-indent: 30px;
	width: 50%;
	margin-left: 5%;
	clear: both;
}

.typography blockquote p {
	font-size: 17px;
	line-height: 25px;
}

.typography pre {
	background: #F7F7F7;
	border: 1px solid #E4E4E4;
	font-family: Courier, monospace;
	margin: 0 0 20px 0;
	padding: 15px;
	clear: both;
}

/* ADDRESS
----------------------------------------------------------------------------------- */
address {
	display: block;
	margin-bottom: 20px;
}

/* CAROUSEL
----------------------------------------------------------------------------------- */

/** Carousel Layout **/

.jcarousel-wrapper {
	position: relative;
}

.jcarousel {
	position: absolute;
	overflow: hidden;
	width: 100%;
	top: 0px
	left: 0px;
}

.jcarousel-inner {
	position: absolute;
	padding: 10px;
	width: 100%;
	bottom:98px;
}

.jcarousel-img {
	width:100%;
	height:100%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}

.jcarousel-inner .inner .jcarousel-block {
	padding: 10px;
	background-color: rgba(255,255,255,0.9);
	border: 5px solid #ffffff;
	-webkit-border-radius: 0 20px 0 20px;
 /* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-moz-border-radius: 0 20px 0 20px;
 /* Firefox 1-3.6 */
	border-radius: 0 20px 0 20px;
 /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	padding: 5px!important;
	width: 40%;
	min-width: 280px;
}

.jcarousel ul {
	width: 20000em;
	position: relative;
	list-style: none !important;
	margin: 0  !important;
	padding: 0;
}

.jcarousel li {
	width: 200px;
	float: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none !important;
	position: relative;
}

.jcarousel ul li {
	display: block;
	height: 100vh!important;
	width: 100vw!important;
	overflow: hidden;
}

.jcarousel-inner {
	display: block;
	z-index:1000;
}

/** Carousel Images **/

.jcarousel img {
	position: absolute;
}

.jcarousel img.landscape {
	display: block;
	width: 100vw!important;
}

.jcarousel img.portrait {
	display: block;
	height: 100vh!important;
}

/** Carousel Typography **/

.jcarousel h1 {
    z-index:1000;
	font-size: 5vw;
	line-height: 4.5vw;
	color: #ed582b;
	text-transform: uppercase;
	font-weight: 800;
	border-left: 5px solid #ffffff;
	padding: 0 0 5px 5px;
	word-spacing: 10000px;
}

.jcarousel p {
	font-size: 1.8vw;
	line-height: 2vw;
	color: #000;
	text-transform: uppercase;
	font-weight: 800;
	margin: 0px!important;
}


/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
	z-index: 100000;
	position: absolute;
	bottom: 65px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 80px;
	font-family: 'WebSymbolsRegular';
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

.jcarousel-control-prev {
	left:30px;
}

.jcarousel-control-next {
	right:30px;
}

/** Carousel Pagination **/

.jcarousel-pagination {
	z-index: 100000;
	position: absolute;
	bottom: 60px;
	right: 50%;
	transform:translateX(50%);
}

.jcarousel-pagination a {
	text-decoration: none;
	display: inline-block;
	font-size: 11px;
	height: 32px;
	width: 32px;
	line-height: 32px;
	background: #fff;
	border-radius: 16px;
	text-indent: -9999px;
	margin-left: 3px;
}

.jcarousel-pagination a.active {
	background: #25a9e0;
	opacity: 1;
}

/* HEADER
----------------------------------------------------------------------------------- */

.header {
	z-index: 1000000;
	height: 40px;
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
	overflow: hidden;
}

.header .inner {
	position: relative;
}

.header .size1of2:nth-child(2) {
	padding: 0px;
}

/* BRANDING
----------------------------------------------------------------------------------- */
.brand img {
	height: 20px;
	width: auto;
	padding: 10px 0;
}

/* SEARCH FORM
----------------------------------------------------------------------------------- */

.search-bar {
	padding-right: 10px;
	z-index: 100000;
	margin-top: 5px;
}

.search-bar .field {
	margin: 0;
	padding: 0;
}

.search-bar form input.text {
	width: 155px;
	padding: 5px 34px 5px 15px;
	color: #888;
	margin: 0;
	border: 1px solid #fff;
	border-radius: 14px;
	background: none repeat scroll 0% 0% #F5F5F5;
}

.search-bar form input.action {
 /* positions the search button icon over the top of the search input */
	font-size: 14px;
	position: absolute;
	right: 10px;
	top: 5px;
	cursor: pointer;
	border: none;
	padding: 5px;
	background: none;
	font-family: 'WebSymbolsRegular';
	color: #848484;
	border-radius: 0;
	margin: 0;
}

.search-bar form input.active,
		.search-bar form input.action:hover {
	color: #000;
}

.search-bar form input:focus,
		.header textarea:focus {
	outline: none;
 /* removes default browser outlining on focus */
	;
}

.search-dropdown-icon {
	display: none;
 /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
	;
}

/* NAVIGATION
----------------------------------------------------------------------------------- */

.navi {
	position: fixed;
	top: 40px;
	width: 100%;
	z-index: 10000;
	height:0px;
}

.navi .block {
	width: 200px;
	display: block;
	float: right;
	padding: 10px;
	background-color: rgba(255,255,255,0.9);
	border-left: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
	-webkit-border-radius: 0 0 0 20px;
 /* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-moz-border-radius: 0 0 0 20px;
 /* Firefox 1-3.6 */
	border-radius: 0 0 0 20px;
 /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

.navi a {
	float: right;
	clear: both;
	font-size: 16px;
	color: #000000;
	text-transform: uppercase;
	font-weight: 800;
}

.navi .primary li a:hover {
	color: #25a9e0;
}

.navi .primary li.section a,
	.navi .primary li.current a {
	color: #25a9e0;
}

.navi .primary li.section:after,
	.navi .primary li.current:after {
}

	/* Primary navigation */
.header .inner .unit {
	position: relative;
 /* used to position the main navigation */
	;
}

	/* Tablet Navigation */
	/* When navigation and logo overlap tablet-nav is initialized */
.tablet-nav .brand p {
	margin-bottom: 0;
}

.tablet-nav .navi {
    z-index: 10000000;
}

.tablet-nav .navi .inner {
	padding-right: 0px;
}

.tablet-nav .navi ul {
	float: right;
	clear: both;
	position: relative;
	white-space: nowrap;
	right: auto;
 /* resets the right property value that is set for the desktop site */
	;
}

.tablet-nav .navi ul li {
	white-space: nowrap;
}

.tablet-nav .navi ul li a {
 /* there is no hover on touch devices so no transition on hover is necessary */
	-moz-transition: none;
	-webkit-transition: none;
	transition: none;
}

.tablet-nav .footer .right {
	float: left;
	width: 100%;
}

/* PAGE CONTENT */

.main {
/*	z-index: 100;*/
}

body {
    background-size:cover;
    background-attachment: fixed;
        background-position: center center;
}

body.Contact {
    background-image: url('../images/contact.jpg');
}

.People {
    background-position: right center;
}

.Page .main .content-container,
.ContentPage .main .content-container,
.Contact .main .content-container {
    width: 33%;
    min-width:320px;
    padding: 10px;
    display: block;
    background-color: rgba(255, 255, 255, 0.9);
}

.Home .main {
	display: none;
}

.intro-content p {
	line-height: 20px;
	padding-bottom:10px;
}

.intro-content p:last-child {
	padding-bottom:0px!important;
}

.ContentPage .intro-content {
    display:none;
}

/*
.Contact .main .line, .Contact .main .unit {
	padding:0px!important;
	margin:0px!important;
}
*/

.Contact .main .typography .content-container {
	padding: 0px 10px !important;
}

/* TESTIMONIALS */

.Testimonials .testimonials {
	width: 50%;
	min-width: 300px;
}

.Testimonials ul.testimonials li {
	list-style-type: none;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 5px solid #ffffff;
}

/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after {
 /* clearfix */
	height: 0;
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
}

.search-bar form input.action,
.header .primary li a,
.footer a {
 /* adds color transition when links/inputs on hover */
	-moz-transition: color 0.2s;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

body h1 span.amp {
	font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
	font-style: italic;
}

.Portfolio .intro-content, .About .intro-content, .Testimonials .intro-content, .Contact .intro-content {
	display: none;
}

.Search .jcarousel-wrapper,
.Search .jcarousel-control-prev,
.Search .jcarousel-control-next,
.Search .jcarousel-pagination {
	display: none;
}

.right {
	float: right;
}

/* FOOTER */


.footer .inner .unit:nth-child(1) {
	margin-top: 6px;
}

.footer .inner .unit:nth-child(2) {
	margin-top: 4px;
}

.footer a {
	color: #999;
}

.footer a:hover {
	color: #ED582b;
}

.footer .left {
	float: left;
	display: block;
}

.footer .right {
	float: right;
	display: block;
}

.footer span {
	padding: 0 3px;
	color: #bbb;
}

.footer .primary,
	.footer .primary ul {
	display: inline;
	margin: 0;
	padding: 0;
}

.footer .primary li {
	display: inline;
}

.ie6 .footer .primary li,
	.ie7 .footer .primary li {
 /* this is a bugfix for ie6/7 */
	display: inline;
	zoom: 1;
	margin-right: 10px;
}

.footer .primary li:after {
 /* adds '/' to separate the footer navigation items */
	padding: 0 3px 0 5px;
	content: '/';
	color: #999;
}

.footer .primary li:last-child:after {
	content: '';
 /* makes sure last nav item doesn't have a '/' following it */
	}
	.footer .arrow {
	    padding: 0 8px 0 5px;
	    color: #ED582b;
	    font-size: 13px;
	}
	.footer .primary .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	;
}

	/* Search Results */
.typography .searchResults h1 {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.searchResults p.searchQuery {
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
}

.searchResults ul#SearchResults {
	padding: 0;
	border-bottom: 1px solid #e5e5e5;
	margin: 0;
}

.searchResults ul#SearchResults li {
	border-top: 1px solid #e5e5e5;
	padding: 20px 0;
	list-style-type: none;
}

.searchResults ul#SearchResults p {
	margin-bottom: 10px;
}

.searchResults #PageNumbers a {
	padding: 0 5px;
}

.searchResults #PageNumbers .pagination {
	border-bottom: 1px solid #e5e5e5;
	padding: 20px 0;
	display: table;
 /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
	width: 100%;
}

.searchResults #PageNumbers .pagination span {
	display: table-cell;
 /* each element in the pagination div displays as a table cell */
	;
}

.searchResults #PageNumbers p {
	text-align: center;
	padding: 20px 0;
}

.searchResults #PageNumbers .next,
		.searchResults #PageNumbers .prev {
	font-size: 14px;
	padding: 0 20px;
	display: table-cell;
 /* each element in the pagination div displays as a table cell */
	vertical-align: middle;
	border-bottom: 0 !important;
}

.searchResults #PageNumbers .next {
	margin-left: 15px;
}

.searchResults #PageNumbers .prev {
	margin-right: 15px;
}

/* DEVICE & RESPONSIVE LAYOUT */
.navi .nav-open-button {
	display: none;
 /* removes the nav toggle button for desktop site */
	;
}

#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) 
    instead to trigger the hiding/showing of nav and search in mobile mode */
	display: none;
	visibility: hidden;
}

/* Portfolio Styling */

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }


.faded {
   opacity: 0.2;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

/* hide title of portfolio image*/
.og-grid li a h2{ display:none;}

/* menu */
.sidebar h3 {
  margin: 0;
  font-size: 20px;
}

.sidebar h3 a {
  background: url("sprite.png") 15px 13px no-repeat;
  display: block;
  padding: 10px;
  padding-left: 32px;
  margin: 0;
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  border-bottom: 1px solid rgba(128, 10, 85, 0.5);
  text-shadow: 1px 1px 1px rgb(128,10,85);
}
.sidebar h3:hover {  }
.sidebar h3.open  {  }
.sidebar h3.open a {  }
.sidebar h3 + div { padding: 10px; }
.sidebar h2 + div,
.sidebar .example {
  background: #fff;
  overflow: hidden;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin-bottom: 20px;
}

#loading-image{
	position: fixed;
	left: 50%;
	top: 50%;	
	z-index:10;
	display:none;
}

.tagmenu {padding-bottom: 10px}
.tagmenu ul {}
.tagmenu ul li {list-style-type:none;display: inline;}
.tagmenu ul li:after {content:" | ";}
.tagmenu ul li:last-child:after {content:"";}

.PortfolioItem .tagmenu {padding-left: 10px}
.PortfolioItem article {max-width: 800px}
.PortfolioItem img {max-width:100%}
.PortfolioItem .typography h1 {margin: 0px}
.PortfolioItem .typography p {margin: 20px 0;}

ul.og-grid {
	list-style: none;
	margin: 0 auto;
	text-align: left;
	width: 100%;
}

.og-grid li {
	display: inline-block;
	vertical-align: top;
    width:24%;
	height: auto;
    box-sizing:border-box;
    border: 3px solid #f0f0f0;
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

.og-grid li > a img {
    width:100%;
    height:auto;
}

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}

.og-expander {
    z-index:100000;
	position: absolute;
	background: #ddd;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
}

.og-expander-inner {
	padding: 50px 30px;
	height: 100%;
}

.og-close {
    z-index:1000000;
	position: absolute;
	width: 40px;
	height: 40px;
	top: 40px;
	right: 20px;
	cursor: pointer;
}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.og-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

.og-fullimg,
.og-details {
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.og-fullimg{
		width: 62%;
}

.og-details{
		width: 38%;
}
	
.og-details {
	padding: 0 40px 0 20px;
}

.og-fullimg {
	text-align: center;
}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

.og-details p {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #999;
}

.og-details a.external{
	font-weight: 700;
	font-size: 12px;
	color: #6a6a6a;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 5px 10px;
	border: 1px solid #6a6a6a;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
}

.og-details a.external::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}

.og-details a.external:hover {
	border-color: #999;
	color: #999;
}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;
}

/* Fix for visit website bug */

/*
.og-details a.external {
     display:none!important;
 }

[data-tags="Websites"]  a.external {
     display:inline-block!important;
 }
*/

.og-expanded > a:nth-child(1)

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

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

	.og-details h3 { font-size: 28px;line-height: 28px; }
	.og-details p { font-size: 13px; }
	.og-expander a.external { font-size: 12px; }x	
	.og-grid li > a img {
		border: medium none;
		display: block;
		outline: medium none;
		position: relative;
		width:100%;
	}	
	
}

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

	/*.og-fullimg { display: none; }*/	
	.og-details, .og-fullimg { float: none; width: 100%;}
	/*.og-details .tags { display: none;}*/
	.og-fullimg {  height: 200px; }
	.og-details a.external {margin:5px 0 0; font-size: 14px;}
	.og-details p{margin: 0 0 10px;}
	.og-details h3 {
		font-size: 32px;
		line-height: 32px;			
		font-weight: 300;
		margin-bottom: 0px;
		padding: 20px 0 10px;
	}		
	.og-fullimg img {
		display: inline-block;
		max-height: 95%;
		max-width: 100%;
	}	
    .og-grid li {
		width: 49%;
    }
}


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



	/*.og-fullimg { display: none; }*/	
	.og-details, .og-fullimg { float: none; width: 100%;}
	/*.og-details .tags { display: none;}*/
	.og-fullimg {  height: 155px; }
	.og-details a.external {margin:5px 0 0; font-size: 14px;}
	.og-details p{margin: 0 0 10px;}
	.og-details h3 {
		font-size: 20px;
		line-height: 20px;			
		font-weight: 300;
		margin-bottom: 0px;
		padding: 20px 0 10px;
	}		
	.og-grid li > a img {
		border: medium none;
		display: block;
		outline: medium none;
		position: relative;
		width:100%;
	}	
	
}