/**
 * 1.0 Recommended Isotope styles
 * ----------------------------------------------------------------------------
 */

/**** Isotope Filtering ****/

.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

/**
 * 2.0 Infinite Scroll
 * ----------------------------------------------------------------------------
 */

/* Disable CSS transitions for containers with infinite scrolling */
.isotope.infinite-scrolling {
	-webkit-transition:	none;
	-moz-transition:	none;
	-ms-transition:		none;
	-o-transition:		none;
	transition:			none;
}

#infscr-loading {
	position: absolute;
	text-align: center;
	z-index: 100;
	background: #fff;
	background: rgba(255, 255, 255, 0.9);
	padding: 20px;
	color: #222;
	font-size: 100%;
	font-weight: 700;
	border-radius: 4px;
	width: 75px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

/**
 * 3.0 Portfolio Template
 * ----------------------------------------------------------------------------
 */

/* Welcome Text */
.welcome-text { border-bottom: 3px solid #d9dcdd; clear: both; color: #000; font: 300 50px/1.125 "Open Sans", sans-serif; margin: 0 auto; max-width: 1120px; padding: 35px 0 40px 0; text-align: center; width: 92%; }
body.daisho-classic-has-welcome-text.daisho-classic-has-slideshow .welcome-text { font-size: 25px; padding: 30px 0 35px 0; border-bottom: 0 none; }
body.daisho-classic-has-welcome-text:not(.daisho-classic-has-slideshow) .welcome-text { margin-bottom: 50px; }
.welcome-text a { text-decoration: underline; color: inherit; }

.tn-grid-container { clear: both; max-width: 1125px; width: 92%; margin: 0 auto; padding-top: 18px; }
#container { max-width: 1125px; width: 100%; margin: 0 auto 0 3px; -webkit-tap-highlight-color: rgba(0,0,0,0); }

#options { max-width: 1120px; margin: 0 auto; padding-bottom: 15px; width: 100%; }
#options ul { margin: 0; padding: 0; list-style: none; }
#options li { float: left; margin: 0 0 3px 5px; }
#options li:first-child { margin-left: 0px; }

#filters { float: right; }
	#options li a { display: block; padding: 0.35em 0.9em; color: #202020; font-weight: normal; font-size: 87.5%; font-family: Dosis, sans-serif; line-height: 1.125; text-transform: uppercase; }
	#options li a:hover { text-decoration: none; background-color: #00a4a7; color: #fff; border-radius: 12px; }
	#options li a.selected { background-color: #00a4a7; color: #fff; border-radius: 12px; font-weight: 700; }
#etc { margin-top: 4px; }
	#options #toggle-sizes a { background: url(images/change-view.png) no-repeat top left transparent; text-indent: -9999px; width: 28px; height: 18px; padding: 0 !important; float: left; margin-right: 20px; margin-top: 3px; }
	#options #toggle-sizes a:hover { background: url(images/change-view.png) no-repeat top right transparent; border-radius: 0px; }
	#options #toggle-sizes a:first-child { background: url(images/change-view.png) no-repeat bottom left transparent; text-indent: -9999px; width: 28px; height: 18px; padding: 0 !important; }
	#options #toggle-sizes a:first-child:hover { background: url(images/change-view.png) no-repeat bottom right transparent; border-radius: 0px; }
	#options #toggle-sizes a.toggle-selected { background-position: top right; }
	#options #toggle-sizes a:first-child.toggle-selected { background-position: bottom right; }
	#options #shuffle { margin-left: 0; }
	#options #shuffle a { background: url(images/shuffle-view.png) no-repeat left top transparent; text-indent: -9999px; width: 22px; height: 18px; padding: 0 !important; float: left; margin-right: 20px; margin-top: 3px; }
	#options #shuffle a:hover { background: url(images/shuffle-view.png) no-repeat left bottom transparent; border-radius: 0px; }
	/* SVG Version */
	.toggle-sizes-small-svg { display: none; cursor: pointer; }
	.toggle-sizes-large-svg { display: none; cursor: pointer; }
	html.mod-svg .toggle-sizes-small-svg { display: block; }
	html.mod-svg .toggle-sizes-large-svg { display: block; }
	html.mod-svg #options #toggle-sizes a { background: none repeat scroll 0 0 transparent; text-indent: 0; }
	html.mod-svg #options #toggle-sizes a:hover { background: none repeat scroll 0 0 transparent; text-indent: 0; }
		#options #toggle-sizes a svg path { fill: #d9dcdd; }
		#options #toggle-sizes a:hover svg path { fill: #a0a0a0; }
		#options #toggle-sizes a.toggle-selected svg path { fill: #a0a0a0; }
		
@media (max-width: 1240px) {
	.daisho-portfolio #container { margin: 0 auto; }
}
@media (max-width: 800px) {
	#options { display: none; }
}

/**
 * 3.1 Thumbnails
 * ----------------------------------------------------------------------------
 */

.element { cursor: pointer; float: left; overflow: hidden; position: relative; background-color: #888; color: #222; width: 220px; height: 150px; margin: 0 5px 5px 0; word-wrap: break-word; }
.variable-sizes .element.width2 { width: 445px; }
.variable-sizes .element.height2 { height: 305px; }
.variable-sizes .element.width3 { width: 670px; }

.thumbnail-link { background-color: rgba(255, 255, 255, 0.01); width: 100%; height: 100%; position: absolute; opacity: 0; z-index: 5; }
.thumbnail-project-link { background-color: rgba(255, 255, 255, 0.01); width: 100%; height: 100%; position: absolute; text-indent: -9999px; z-index: 3; }

.element .thumbnail-meta-data-wrapper { overflow: hidden; left: 0; top: 0; padding: 9px 15px 0 13px; width: 100%; position: absolute; word-wrap: break-word; }
.element .symbol { color: #fff; overflow: hidden; height: 3em; font: 300 175%/1 Lato, sans-serif; width: 100%; position: relative; text-transform: uppercase; z-index: 2; }
.variable-sizes .element .symbol { font-size: 175%; }
.variable-sizes .element.width2.height2 .symbol { font-size: 350%; }
.variable-sizes .element.width3.height2 .symbol { font-size: 500%; }

.element .categories, .element .name { overflow: hidden; color: #fff; padding: 0 15px; max-width: 100%; left: 0; position: absolute; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; z-index: 2; }
.element .name { font-weight: 400; font-size: 81.25%; bottom: 25px; }
.element .categories { font-weight: 400; font-size: 75%; font-family: Dosis, sans-serif; bottom: 10px; text-transform: uppercase; }

.thumbnail-hover { width: 100%; height: 100%; position: absolute; }
.project-img { width: 100%; z-index: -1; opacity: 0; position: absolute; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }
.project-img-visible { opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }
.project-thumbnail-background { width: 100%; height: 100%; position: absolute; z-index: -2; }

.element video { max-width: none; z-index: -1; }

.element .thumbnail-hover,
.element .symbol,
.element .name,
.element .categories {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	-moz-transition: 	opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	-ms-transition: 	opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	-o-transition: 		opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	transition: 		opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
}
.element:hover .thumbnail-hover,
.element:hover .symbol,
.element:hover .name,
.element:hover .categories  {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.25s ease-in-out, visibility 0s;
	-moz-transition: 	opacity 0.25s ease-in-out, visibility 0s;
	-ms-transition: 	opacity 0.25s ease-in-out, visibility 0s;
	-o-transition: 		opacity 0.25s ease-in-out, visibility 0s;
	transition: 		opacity 0.25s ease-in-out, visibility 0s;
}

.tn-display-meta .symbol,
.tn-display-meta .name,
.tn-display-meta .categories { opacity: 1; visibility: visible; }

@media (max-width: 700px) {
	.element .name { display: none; }
	.variable-sizes .element.width3 { width: 445px; }
	.element.width3.height2 .symbol { font-size: 375%; }
}

@media (max-width: 480px) { /* Intentionally set to 480px and not 479px to display 3 columns of thumbnails on width=480 */
	.element .name { font-size: 100%;  }
	.variable-sizes .element .symbol { font-size: 100%; }
	
	/* Thumbnail sizes on mobile devices */
	.element {
		width: 144px !important;
		height: 98px !important;
		margin: 0 3px 3px 0 !important;
	}
	.element.height2 {
		height: 199px !important;
	}
	.element.width2 {
		width: 291px !important;
	}
	.element.width2.height2,
	.element.width3.height2 {
		height: 199px !important;
		width: 291px !important;
	}
	.variable-sizes .element.width2.height2 .symbol,
	.variable-sizes .element.width3.height2 .symbol {
		font-size: 200%;
	}
}

/**
 * 4.0 Project View
 * ----------------------------------------------------------------------------
 */
/* Navigation arrows */
.project-navigation,
.portfolio-arrowleft,
.portfolio-arrowright { display: none; }
.daisho-portfolio-viewing-project .project-navigation,
.daisho-portfolio-viewing-project .portfolio-arrowleft,
.daisho-portfolio-viewing-project .portfolio-arrowright { display: block; outline: 0 none; }

.project-navigation { width: 92%; max-width: 1120px; margin: auto; z-index: 205; position: fixed; right: 0; left: 0; top: 0; bottom: 0; }
	.portfolio-arrowleft,
	.portfolio-arrowright { top: 0; bottom: 0; padding: 0; margin: auto; line-height: 100px; width: 110px; height: 85px; position: absolute; cursor: pointer; background-repeat: no-repeat; background-position: center top; text-indent: -9999px; visibility: hidden; }
	.portfolio-arrowleft-visible,
	.portfolio-arrowright-visible { visibility: visible; }
	.portfolio-arrowleft:hover,
	.portfolio-arrowright:hover { text-decoration: none; }

	.portfolio-arrowleft { background-image: url(images/news-arrow-left-active-light.png); }
	.portfolio-arrowright { background-image: url(images/news-arrow-right-active-light.png); }
	.portfolio-arrowright,
	.portfolio-arrowright:hover	{
		-webkit-transition: right 200ms ease-in-out;
		-moz-transition: 	right 200ms ease-in-out;
		-ms-transition: 	right 200ms ease-in-out;
		-o-transition: 		right 200ms ease-in-out;
		transition: 		right 200ms ease-in-out;
	}
	.portfolio-arrowright { right: -90px; }
	.portfolio-arrowright:hover { right: -100px; }
	.portfolio-arrowleft,
	.portfolio-arrowleft:hover {
		-webkit-transition: left 200ms ease-in-out;
		-moz-transition: 	left 200ms ease-in-out;
		-ms-transition: 	left 200ms ease-in-out;
		-o-transition: 		left 200ms ease-in-out;
		transition: 		left 200ms ease-in-out;
	}
	.portfolio-arrowleft { left: -90px; }
	.portfolio-arrowleft:hover { left: -100px; }
	
/* Project Box */
.portfolio_box { position: absolute; top: 0; left: 0; right: 0; width: 92%; max-width: 1120px; z-index: 210; opacity: 0; visibility: hidden; margin: 0 auto; padding-bottom: 20px; }
	.admin-bar .portfolio_box { top: 28px; }
	.content-projectc { margin: 0 auto; position: relative; width: 100%; margin-top: 140px; }
	.portfolio_box-visible { opacity: 1; visibility: visible; }
	.portfolio_box {
		-webkit-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
		transition: visibility 0s linear 0.2s, opacity 0.2s linear;
	}
	.portfolio_box-visible {
		-webkit-transition: visibility 0s linear 0s, opacity 0.25s linear;
		transition: visibility 0s linear 0s, opacity 0.25s linear;
	}
	
		/* Project Meta */
		.project-meta { text-transform: uppercase; color: #000; position: relative; width: 100%; max-width: 700px; }
			.project-meta-col-1 { float: left; width: 310px; max-width: 310px; min-width: 310px; margin-right: 40px; }
			.project-meta-col-2 { float: left; max-width: 310px; }
				.project-meta-data { margin-bottom: 5px; font-size: 75%; }
					.project-meta-heading { float: left; font: 900 100%/1 "Open Sans", sans-serif; padding-right: 10px; width: 75px; word-wrap: break-word; }
					.project-meta-description { color: #505050; float: left; font: 400 100%/1 "Open Sans", sans-serif; width: 225px; word-wrap: break-word; }
					.project-meta-description a { text-decoration: underline; }
					@media (max-width: 950px) {
						.project-meta-col-1 { float: left; max-width: none; min-width: 0; width: 100%; margin-right: 0; }
						.project-meta-col-2 { float: left; max-width: none; min-width: 0; width: 100%; margin-right: 0; }
							.project-meta-heading { width: 135px; }
							.project-meta-description { max-width: 255px; width: 100%; }
					}	
		
		/* Sharing Icons */
		.sharing-icons { position: absolute; right: 0; top: 0; }
		.sharing-icons a { display: inline-block; text-align: center; text-decoration: none; font-family: WebSymbolsRegular; font-size: 16px; width: 16px; color: #000; position: relative; margin-left: 18px; }
		.sharing-icons a:hover { color: #000; text-decoration: none; }
		.sharing-icons a:first-child { margin-left: 0; }
		.sharing-icons-tooltip { position: absolute; bottom: -18px; left: 8px; /* half of the link width */ margin-left: -35px; width: 70px; color: #fff; font: 10px "Open Sans", sans-serif; visibility: hidden; opacity: 0;
			-webkit-transition: visibility 0s linear 470ms, opacity 450ms 20ms ease-out, bottom 450ms 20ms ease-out;
			transition: visibility 0s linear 470ms, opacity 450ms 20ms ease-out, bottom 450ms 20ms ease-out;
		}
		.sharing-icons-icon:hover + .sharing-icons-tooltip { visibility: visible; opacity: 1; bottom: -27px;
			-webkit-transition: visibility 0s linear, opacity 70ms linear, bottom 70ms linear;
			transition: visibility 0s linear, opacity 70ms linear, bottom 70ms linear;
		}
		.sharing-icons-tooltip:after { color: #fff; content: attr(data-tooltip); font: 700 10px/1.5 "Open Sans", sans-serif; display: inline-block; padding: 2px 6px; text-transform: uppercase; background-color: #000; border-radius: 4px 4px 4px 4px; }
		
		/* Project Title and Description */
		.project-title { color: #000; font: 900 1000%/0.75 "Open Sans", sans-serif; margin: 0.375em 0; text-transform: uppercase; letter-spacing: -4px; width: 100%; word-wrap: break-word; }
		.project-description { color: #000; font: 400 137.5%/1.25 "Open Sans", sans-serif; margin-bottom: 3em; width: 70%; }
		.project-description:empty { margin: 0; }
		
		/* Project Slides */
		.project-slides p { margin-bottom: 1em; }
		.project-slides .wp-caption-text { margin-bottom: 1.75em; margin-top: 10px; font-style: normal; }
		.project-slides .wp-caption-text span.caption-title { color: #000; text-transform: uppercase; font-size: 125%; font-weight: 800; line-height: 1; margin: 0 0 0.5em 0; display: block; }
		.project-slides .wp-caption-text span.caption-title + br { display: none; }
		.project-slides .wp-caption-text.superslide-caption-text { font-size: 87.5%; }
		.project-slides iframe { display: block; }
		.project-slides .mejs-container { margin-bottom: 1em; }
		
		/* Styles for [slide] shortcode - left for backwards compatibility */
		.project-slide { position: relative; clear: both; margin: 0 auto 1em auto; }
		.project-slide img { max-width: 100%; }
		.youtube_container { padding-bottom: 56.25%; position: relative; }
		.youtube_container iframe,
		.youtube_container embed { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
		.project-slides .wp-caption-text h4 { color: #000; text-transform: uppercase; font-size: 125%; font-family: "Open Sans", sans-serif; font-weight: 800; line-height: 1; margin: 0 0 0.5em 0; display: block; }
			
/* Project Background */
.project-coverslide { width: 100%; height: 100%; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 200; opacity: 0; visibility: hidden;
	-webkit-transition: visibility 0s linear 0.25s, opacity 0.25s ease-out;
	transition: visibility 0s linear 0.25s, opacity 0.25s ease-out;
}
.project-coverslide-visible { opacity: 0.97; visibility: visible;
	-webkit-transition: visibility 0s linear 0s, opacity 0.25s linear;
	transition: visibility 0s linear 0s, opacity 0.25s linear;
}

@media (max-width: 1260px) {
	.portfolio-arrowleft { left: -75px; }
	.portfolio-arrowright { right: -75px; }	
	.scrollbar-arrowleft { left: -35px; right: auto; }
	.scrollbar-arrowright { right: -35px; left: auto; }
	.portfolio-arrowleft:hover { left: -80px; }
	.portfolio-arrowright:hover { right: -80px; }
}

@media (max-width: 767px) {
	.project-navigation { position: relative; margin-bottom: 25px; }
	.portfolio-arrowleft,
	.portfolio-arrowright { line-height: 1; font-size: 150%; text-transform: uppercase; color: #000; text-decoration: none; font-weight: 700; width: auto; height: auto; position: relative; cursor: pointer; background: none; text-indent: 0; left: 0; right: 0; }
	.portfolio-arrowleft:hover,
	.portfolio-arrowright:hover { left: 0; right: 0; color: #00A4A7; }
	.portfolio-arrowleft { float: left; padding: 0 0 0 20px; }
	.portfolio-arrowright { float: right; padding: 0 20px 0 0; }
	
	.portfolio-arrowleft:before,
	.portfolio-arrowright:before { position: absolute; cursor: pointer; color: #000; font-weight: 400; font-size: 18px; line-height: 1.375; font-family: WebSymbolsRegular, sans-serif; }
	.portfolio-arrowleft:before { content: "<"; left: 0; margin-right: 10px; }
	.portfolio-arrowright:before { content: ">"; right: 0; margin-left: 10px; }
	.portfolio-arrowleft:hover:before,
	.portfolio-arrowright:hover:before  { color: #00A4A7; }
}
@media (max-width: 767px) {
	.portfolio_box { position: relative; display: none; }
	.daisho-portfolio.daisho-portfolio-viewing-project .portfolio_box { display: block; top: 0; }
	.content-projectc { margin-top: 40px; }
	.project-coverslide { display: none; }
	.sharing-icons { display: none; }
}
@media (max-width: 1200px){
	.project-title { font-size: 750%; }
}
@media (max-width: 767px){
	.project-title { font-size: 500%; }
	.project-description { font-size: 100%; width: 100%; }
}
@media (max-width: 640px){
	.project-title { font-size: 275%; margin: 0.5em 0; }
}
@media (max-width: 767px){
	.project-slide .project-slide-description { display: block; background-image: none; padding: 20px 0 25px 0; position: relative; width: 100%; }
}