/*

Theme Name: Zenbox

Theme URI: http://themeforest.net/user/RuvenThemes/portfolio

Description: A simple portfolio theme.

Version: 1.2

Author: Ruven

Author URI: http://ruventhemes.com/

License: WordPress related PHP Code under GNU General Public License (Version 3.0)

License URI: http://www.gnu.org/licenses/gpl-3.0.html

*/





















/* @group Reset

============================================================ */



/* http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain) */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border:0; font-size:100%; font:inherit; vertical-align:baseline; margin:0; padding:0; }

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

body { line-height:1; }

ol,ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after, q:before,q:after { content:none; }

table { border-collapse:collapse; border-spacing:0; }



/* @end */





















/* @group Generic

============================================================ */







/* @group Main

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



body {

  background-color: #d6d5d4;

  color: #4a4947;

  font: 14px/22px "Times New Roman", Times, serif;

  -webkit-text-size-adjust: none;

}



/* To prevent hover flickering when skipping to the next item,

 * while content area slides up and cursor touches items.

 */

#hover-overlay {

  z-index: 9999;

  position: absolute;

  top: 0; left: 0;

  width: 100%;

  display: none;

}



* {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}





/* iPhone  */



/*@media only screen and (min-device-width: 320px) and (max-width: 480px) {

	body { -webkit-text-size-adjust: none; }	

}*/





/* iPad  */



/*@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	body { -webkit-text-size-adjust: none; }

}*/



/* @end */







/* @group Transitions

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



#main .box a:hover .box-title,

#main .box a:hover img,

a,

button,

textarea:focus,

input[type=submit],

input[type="url"]:focus,

input[type="tel"]:focus,

input[type="text"]:focus,

input[type="email"]:focus,

input[type="number"]:focus,

input[type="password"]:focus {

	-webkit-transition: all .1s linear;

  -moz-transition:    all .1s linear;

  -ms-transition:     all .1s linear;

  -o-transition:      all .1s linear;

  transition:         all .1s linear;

}



/* @end */







/* @group Icon Sources

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



/* FontAwesome (for icons) */

@font-face {

  font-family: "FontAwesome";

  src: url('includes/icons/fontawesome/fontawesome-webfont.eot');

  src: url('includes/icons/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'),

       url('includes/icons/fontawesome/fontawesome-webfont.woff') format('woff'),

       url('includes/icons/fontawesome/fontawesome-webfont.ttf') format('truetype'),

       url('includes/icons/fontawesome/fontawesome-webfont.svg#FontAwesome') format('svg');

  font-weight: normal;

  font-style: normal;

}



/* WebSymbols Regular (for AJAX spinner) */

@font-face {

  font-family: 'WebSymbolsRegular';

  src: url('includes/icons/websymbols/websymbols-regular-webfont.eot');

  src: url('includes/icons/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),

       url('includes/icons/websymbols/websymbols-regular-webfont.woff') format('woff'),

       url('includes/icons/websymbols/websymbols-regular-webfont.ttf') format('truetype'),

       url('includes/icons/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');

  font-weight: normal;

  font-style: normal;

}



/* @end */







/* @group Icons (Font Awesome)

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



[class^="icon-"]:before, [class*=" icon-"]:before {

  font-family: FontAwesome;

  font-weight: normal;

  font-style: normal;

  display: inline-block;

  text-decoration: inherit;

}



.icon-chevron-left:before  { content: "\f053"; }

.icon-chevron-right:before { content: "\f054"; }

.icon-remove:before        { content: "\f00d"; }

.icon-play:before          { content: "\f04b"; }

.icon-pause:before         { content: "\f04c"; }

.icon-volume-off:before    { content: "\f026"; }

.icon-volume-up:before     { content: "\f028"; }



/* @end */







/* @group Theme Check Required Classes

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



.wp-caption,

.wp-caption-text,

.gallery-caption,

.sticky,

.bypostauthor,

.alignright,

.alignleft,

.aligncenter {}



/* @end */



/* @end */





















/* @group Layout Structure

============================================================ */







/* @group Container

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



#container {

  width: 939px; 

  margin: 42px auto;

}





/* Media Queries */



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

  #container { width: 768px; margin: 0 auto; }

}



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

  #container { width: 479px; }

}



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

  #container { width: 320px; }

}



/* @end */







/* @group Header

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



#header {

	background-color: #ccc;

color: #4a4947;

margin-bottom: 1px;

padding: 5%;

text-align: center;

position: relative;

}



#header #page-title,

#header #page-tagline {

  line-height: 1;

  text-transform: uppercase;

}



#header #page-title:hover {color:#ccc;-webkit-transition: all 1s ease;

  -moz-transition:    all 1s ease;

  -ms-transition:     all 1s ease;

  -o-transition:      all 1s ease;

  transition:         all 1s ease;}



#header #page-title {

font-size: 2em;

letter-spacing: 1em;

margin-right: -1em;

opacity: .75;

color: #333;

font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
}



#header #page-tagline {

  font-size: 0.85em;

  letter-spacing: .3em;

  margin: 2em -.3em 0 0;

  opacity: .35;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";

}





/* AJAX Spinner */



#header #ajax-spinner {

  font-family: 'WebSymbolsRegular';

  font-size: 15px;

  position: absolute;

  width: 100%;

  left: 0; top: 77%;

  display: none;

  opacity: .35;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";

}





/* Media Queries */



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



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

  #header { font-size: 10px; }

}



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

  #header { font-size: 8px; }

  #header #ajax-spinner { font-size: 11px }

}



/* @end */







/* @group Body, Footer

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



.boxes {

  margin-right: -1px;

  overflow: hidden;

}



.box {

	float: left;

	margin: 0 0px 0px 0;

}



.box a,

.box.placeholder span {

  display: table-cell;

  vertical-align: middle;

	text-align: center;

	text-decoration: none;

	line-height: 1;

}



/* @end */







/* @group Body

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


#main .box {

  position: relative;

}



#main .box a,

#main .box.placeholder span {

	background-color: #f9f8f7;

	color: #4A4947;

	width: 234px;

	height: 234px;

}



#main .box a img {

  position: absolute;

  top: 0; left: 0;

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

z-index:1;

}



#main .box .box-title

{ 

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  font-size:2em;

  text-align:right;

  color:#fff;

z-index: 8 !important;

position: relative;

padding-right: 5px;

padding-left:5px;

padding-top: 100px;

text-shadow:2px 2px #333;

font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
}







#main .box.no-thumbnail a:hover {

  background: white;

}



#main .box a.active {

  background: #F2EFE9;

  color: black;

}





/* Media Queries */



@media only screen and (min-width: 939px) {

  #main .box.with-thumbnail a:hover .box-title,

  #main .box.with-thumbnail a:hover img {

  	-webkit-transition: opacity .2s linear;

    -moz-transition:    opacity .2s linear;

    -ms-transition:     opacity .2s linear;

    -o-transition:      opacity .2s linear;

    transition:         opacity .2s linear;

  }

  

  #main .box.with-thumbnail a:hover img {

    //opacity: 0;

   // -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  } 

  

  #main .box.with-thumbnail a:hover .box-title {

    opacity: 1;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

z-index:50000000;

  }

}



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

  #main .box a,

  #main .box.placeholder span { width: 255px; height: 255px; }

  #main .box:nth-child(3n+0) a,

  #main .box.placeholder:nth-child(3n+0) span { width: 256px; }

}



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

  #main .box a:hover { background-color: white; }

  #main .box a img { display: none; }

}



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

  #main .box a,

  #main .box.placeholder span { width: 239px; height: 100px; }

}



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

  #main .box { float: none; margin-right: 0; }

  #main .box.placeholder { display: none; }

  #main .box a { width: 320px; height: 70px; }

}



/* @end */







/* @group Content

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



article {

	background-color: #F2EFE9;

	color: #63625f;

	clear: both;

	margin-bottom: 1px;

}



article #ajax-content {

  padding: 42px;

	overflow: hidden;

}



/* Responsive Image */

article img {

  vertical-align: bottom;

  height: auto;

  width: auto;

  max-width: 100%;

}



article video {

  vertical-align: bottom; 

}



article .primary {

  width: 550px;

  float: left;

}



article .secondary {

  width: 263px;

  float: right;

}





/* Responsive Embedded Video */



/* Source: http://www.jonsuh.com/blog/tutorials/responsive-youtube-vimeo-embed-and-html5-video-with-css/ */

article .embedded-video-wrapper {

  height: 0;

  padding-bottom: 67.5%;

  position: relative;

  overflow: hidden;

}



article .embedded-video-wrapper.widescreen {

  padding-bottom: 57.25%;

}



article .embedded-video-wrapper embed,

article .embedded-video-wrapper iframe,

article .embedded-video-wrapper object {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  position: absolute;

}





/* Media Queries */



@media only screen and (min-width: 939px) {

}



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

  article .primary { width: 379px; }

}



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

  article #ajax-content { padding: 26px; }

  article .primary,

  article .secondary { float: none; width: auto; }

  article .primary { margin-bottom: 21px; }

}



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

  article #ajax-content { padding: 21px; }

}





/* Navigation */



article nav ul {

  overflow: hidden;

  margin-bottom: 21px;

}



article nav ul li {

  float: left;

  cursor: pointer;

}



article nav ul li a {

  text-align: center;

  display: block;

  background-color: #e0ddd7;

  height: 24px;

  width: 24px;

  margin-right: 1px;

  opacity: .75;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

  /* Icon Size */

  font-size: 12px;

  line-height: 2.3;

}

.win.opera article nav ul li a   { line-height: 2.2; }

.mac.opera article nav ul li a,

.mac.firefox article nav ul li a,

.win.chrome article nav ul li a  { line-height: 2.1; }

.win.firefox article nav ul li a { line-height: 2.0; }



article nav ul li a:hover {

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



article nav ul li.inactive {

  cursor: default;

}



article nav ul li.inactive a,

article nav ul li.inactive a:hover {

  color: #969590;

  cursor: default;

  opacity: .45;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";

}



/* @end */







/* @group Footer

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



#footer .box a,

#footer .box.placeholder span {

	background-color: #F2EFE9;

	color: #63625f;

	width: 312px;

	height: 234px;

	font-style: italic;

}



#footer .box a:hover {

  background-color: #f7f4ed;

  color: black;

}





/* Media Queries */



@media only screen and (min-width: 939px) {

  #footer.smaller-boxes .box a,

  #footer.smaller-boxes .box.placeholder span { height: 156px; }

  #footer .box:nth-child(3n+2) a,

  #footer .box.placeholder:nth-child(3n+2) span { width: 313px; }

}



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

  #footer .box a,

  #footer .box.placeholder span { width: 255px; height: 170px; }

  #footer.smaller-boxes .box a,

  #footer.smaller-boxes .box.placeholder span { height: 156px; }

  #footer .box:nth-child(3n+0) a,

  #footer .box.placeholder:nth-child(3n+0) span { width: 256px; }

}



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

  #footer .box a,

  #footer .box.placeholder span { width: 159px; height: 100px; }

}



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

  #footer .box { float: none; margin-right: 0; }

  #footer .box a,

  #footer .box.placeholder span { width: 320px; height: 70px; }

}



/* @end */



/* @end */





















/* @group Content Elements

============================================================ */







/* @group Bottom Margins

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



.entry-content p,

.entry-content ul,

.entry-content ol,

.entry-content dl,

.entry-content dd,

.entry-content form,

.entry-content table,

.entry-content blockquote,

.entry-content pre,

.entry-content fieldset { margin-bottom: 1em; }



.entry-content *:last-child { margin-bottom: 0 !important; }



/* @end */







/* @group Headings

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



article h1 { font-size: 17px; line-height: 24px; }

article h2,

article h3,

article h4,

article h5,

article h6 { font-weight: bold; margin-bottom: 1em; }



/* @end */







/* @group Links

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



article a {

  color: #969590;

  text-decoration: none;

}



article a:hover {

  color: #63625f;

}



/* @end */







/* @group Lists

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



.entry-content ul,

.entry-content ol { list-style-position: inside; }



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

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



/* @end */







/* @group Misc

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



.entry-content b,

.entry-content dt,

.entry-content strong {

  font-weight: bold;

}



.entry-content i,

.entry-content em,

.entry-content dfn,

.entry-content cite,

.entry-content address {

  font-style: italic;

}



.entry-content tt,

.entry-content pre,

.entry-content kbd,

.entry-content code {

  font-family: "Lucida Console", Monaco, monospace;

  font-size: .85em;

}



.entry-content pre {

  display: block;

	overflow: auto;

	white-space: pre;

}



.entry-content blockquote {

	font-size: 17px;

	font-style: italic;

	line-height: 28px;

}



.entry-content abbr,

.entry-content acronym {

	border-bottom: 1px dotted;

	cursor: help;

}



.entry-content ins { text-decoration: overline; }

.entry-content del { text-decoration: line-through; }



.entry-content sub,

.entry-content sup {

  font-size: .85em;

	line-height: 1;

	position: relative;

	vertical-align: baseline;

}



.entry-content sub { top: 0.4em; }

.entry-content sup { bottom: 0.5em; }



article iframe,

article object {

  font-size: 0; /* Firefox/IE fix: no bottom space */

  line-height: 0; /* Firefox/IE fix: no bottom space */

  vertical-align: bottom; /* Webkit fix: no bottom space */

  /* Trying to fix YouTube videos that overlay drop down menus and lightbox overlays */

  z-index: 1;

  position: relative;

}



article hr {

  height: 1px;

  background: #63625f;

  color: #63625f;

  border: none;

  margin: 10px 0;

  width: 20px;

  text-align: left;

  opacity: .3;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

}



:focus { outline: none; }



/* @end */



/* @end */





















/* @group Post Formats

============================================================ */







/* @group Gallery (FlexSlider)

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





/* FlexSlider Necessary Styles  */



/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }



.flexslider .slides img { width: 100% !important; display: block !important; }



/* Clearfix for the .slides element */

.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  

html[xmlns] .slides { display: block; } 

* html .slides { height: 1%; }



/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you

 * include js that eliminates this class on page load */

.no-js .slides > li:first-child { display: block; }





/* FlexSlider Theme */



.flexslider {

  position: relative;

  cursor: pointer;

}



.flex-viewport {

  max-height: 2000px;

	-webkit-transition: all 1s ease;

  -moz-transition:    all 1s ease;

  -ms-transition:     all 1s ease;

  -o-transition:      all 1s ease;

  transition:         all 1s ease;

}



.loading .flex-viewport {

  max-height: 300px;

}



/* Direction Nav */

.flex-direction-nav {

  display: none;

  position: absolute;

  height: 24px;

  width: 100%;

  left: 0;

  top: 50%;

  margin: -12px 0 0;

}



.flex-direction-nav a {

  text-align: center;

  color: white;

  width: 24px;

  height: 24px;

  display: block;

  background-color: black;

  position: absolute;

  top: 0;

  cursor: pointer;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

	-webkit-transition: all .3s ease;

  -moz-transition:    all .3s ease;

  -ms-transition:     all .3s ease;

  -o-transition:      all .3s ease;

  transition:         all .3s ease;

  

  /* Icon Size */

  font-size: 12px;

  line-height: 2.3;

}

.win.opera .flex-direction-nav a   { line-height: 2.2; }

.mac.opera .flex-direction-nav a,

.mac.firefox .flex-direction-nav a,

.win.chrome .flex-direction-nav a  { line-height: 2.1; }

.win.firefox .flex-direction-nav a { line-height: 2.0; }



.flex-direction-nav .flex-next { right: -36px; }

.flex-direction-nav .flex-prev { left:  -36px; }





/* Media Queries */



@media screen and (min-width: 939px) {

  .flexslider:hover .flex-direction-nav a {

    opacity: .4;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

  }

  .flexslider:hover .flex-direction-nav a:hover {

    color: white;

    opacity: .7;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

  }

  .flexslider:hover .flex-next { right: 8px; }

  .flexslider:hover .flex-prev { left:  8px; }

}



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

  .flex-direction-nav a {

    opacity: .7;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

  }

  .flexslider:hover .flex-direction-nav a:hover { color: white; }

  .flex-direction-nav .flex-prev { left:  0; }

  .flex-direction-nav .flex-next { right: 0; }

}



/* @end */







/* @group Media Player (jPlayer)

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



body.no-js .jp-wrapper {

  display: none;

}



.jp-wrapper {

  padding-bottom: 19px;

}



.jp-wrapper.no-poster {

  background-color: rgba(255, 255, 255, .5);

  height: 66px;

  padding-top: 21px;

}



.jp-jplayer {

  width: 550px;

}



/* iPad Fix: invisible spacer */

.jp-jplayer audio {

  display: none;

  height: 0;

}



.jp-jplayer img {

  vertical-align: bottom;

}



.jp-interface {

  position: relative;

  margin: -42px 0 0 21px;

  height: 24px;

  width: 508px;

  background-color: black;

  opacity: .7;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

}



.format-audio .jp-wrapper.no-poster .jp-interface {

  margin-top: 0;

}





/* Controls */



.jp-controls a {

  width: 24px;

  height: 24px;

	position: absolute;

	top: 0;

	text-align: center;

	color: #ddd;

}



.jp-controls a:hover {

  color: white;

}



.jp-controls a.jp-play,

.jp-controls a.jp-pause {

  left: 0;

	border-right: 1px solid #555;

	/* Icon Size */

  font-size: 10px;

  line-height: 2.5;

}



.win.firefox .jp-controls a.jp-play,

.win.firefox .jp-controls a.jp-pause { line-height: 2.3; }



.jp-controls a.jp-mute,

.jp-controls a.jp-unmute {

  right: 84px;

	border-left: 1px solid #555;

	/* Icon Size */

  font-size: 12px;

  line-height: 2.3;

}



.win.opera .jp-controls a.jp-mute,

.win.opera .jp-controls a.jp-unmute { line-height: 2.1; }



.mac.opera .jp-controls a.jp-mute,

.mac.opera .jp-controls a.jp-unmute,

.mac.firefox .jp-controls a.jp-mute,

.mac.firefox .jp-controls a.jp-unmute,

.win.chrome .jp-controls a.jp-mute,

.win.chrome .jp-controls a.jp-unmute,

.win.firefox .jp-controls a.jp-mute,

.win.firefox .jp-controls a.jp-unmute { line-height: 2.0; }



.jp-controls a.jp-unmute {

  /* Icon Adjustments */

  padding-right: 7px;

}





/* Progress Bar */



.jp-progress,

.jp-progress .jp-seek-bar,

.jp-progress .jp-play-bar {

  width: 0px;

  height: 8px;

}



.jp-progress {

  background-color: #333;

  width: 360px;

  position: absolute;

  top: 8px;

  left: 32px;

  cursor: pointer;

}



.jp-progress .jp-seek-bar {

  background-color: #444;

  width: 0px;

}



.jp-progress .jp-play-bar {

  background-color: #aaa;

  width: 0px;

}





/* Volume Bar */



.jp-volume-bar {

  background-color: #333;

  width: 70px;

  height: 8px;

  position: absolute;

  top: 8px;

  right: 8px;

  cursor: pointer;

}



.jp-volume-bar .jp-volume-bar-value {

  background-color: #aaa;

  height: 8px;

}





/* Media Queries */



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

  .jp-interface { width: 337px; }

  .jp-progress  { width: 189px; }

}



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

  .jp-interface { width: 385px; }

  .jp-progress  { width: 237px; }

}



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

  .jp-interface { width: 238px; }

  .jp-progress  { width: 197px; }

  .jp-volume-bar,

  .jp-controls a.jp-mute,

  .jp-controls a.jp-unmute { display: none !important; }

  

}



/* @end */



/* @end */