@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,greek);

/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing: antialiased;}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:0}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
					
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {font-size: 1em;line-height: 1.4;background-color:#000;}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #535353;
    text-shadow: none;
}

::selection {
    background: #535353;
    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 and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   GIO's custom styles
   ========================================================================== */
@font-face {
    font-family: 'FuturaTGRBold';
    src: url('/media/img/fonts/fg11006t-webfont.eot');
    src: url('/media/img/fonts/fg11006t-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/img/fonts/fg11006t-webfont.woff') format('woff'),
         url('/media/img/fonts/fg11006t-webfont.ttf') format('truetype'),
         url('/media/img/fonts/fg11006t-webfont.svg#FuturaTGRBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*STICKY FOOTER*/
html,body{}/*height: 100%;*/
#holder{min-height: 100%;position:relative;}
#body{padding-bottom: 70px;margin:4px; /*height of footer*/}
#container{min-width:980px;display:block;position:relative;}
footer{height: 70px;width:100%;position: fixed;z-index:1000000;left: 0;bottom: 0;}
#project{position:fixed;z-index:9999999999;}
					
/*Page Elements*/
.box {  float: left;margin:0 2px 4px 2px; }
.box img{display: block;}
.centered{margin: 0 auto;}
.box .projectBox{position:relative;cursor:pointer;}

.col0 { width: 148px;height:148px;overflow:hidden; }/*BLANK*/
.col1 { width: 148px;height:148px;overflow:hidden;}/*NORMAL SQUARE*/
.col2 { width: 148px;height:300px;overflow:hidden; }/*1:3*/
.col3 { width: 300px;height:148px;overflow:hidden; }/*3:1*/
.col4 { width: 300px;height:300px;overflow:hidden; }/*LATEST*/
.col5 { width: 604px;height:148px;overflow:hidden; }/*REEL*/

.col1 .projectBox a.aClick,.col1 .projectBox .video,.col1 .projectBox .photo,.col1 .projectBox span.bgC,.col3 .projectBox a.aClick,.col3 .projectBox .video,.col3 .projectBox .photo,.col3 .projectBox span.bgC,.col5 .projectBox a.aClick,.col5 .projectBox .video,.col5 .projectBox .photo,.col5 .projectBox  span.bgC { width: 100%;height:148px;}
.col2 .projectBox a.aClick,.col2 .projectBox .video,.col2 .projectBox .photo, .col2 .projectBox span.bgC { width: 100%;height:300px; }
.col4 .projectBox a.aClick,.col4 .projectBox .video,.col4 .projectBox .photo, .col4 .projectBox span.bgC { width: 100%;height:300px; }

a.aClick{display:block;text-decoration:none;text-indent:-9999em;}

.box .projectBox .video{position:absolute;left:0;top:0;z-index:3;opacity:0;-khtml-opacity: 0;-moz-opacity:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.box .projectBox .photo{position:absolute;left:0;top:0;z-index:3;opacity:0;-khtml-opacity: 0;-moz-opacity:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}

span.bgC{display:block;background:#000;position:absolute;left:0;top:0;z-index:2;}
.opac10 span.bgC{ opacity:0;-khtml-opacity: 0;-moz-opacity:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} /*opacity 100%*/
.opac08 span.bgC{ opacity:0.2;-khtml-opacity: 0.2;-moz-opacity:0.2;filter: alpha(opacity=20);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";} /*opacity 80%*/
.opac06 span.bgC{ opacity:0.4;-khtml-opacity: 0.4;-moz-opacity:0.4;filter: alpha(opacity=40);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";} /*opacity 60%*/
.opac04 span.bgC{ opacity:0.6;-khtml-opacity: 0.6;-moz-opacity:0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";} /*opacity 40%*/
.opac02 span.bgC{ opacity:0.8;-khtml-opacity: 0.8;-moz-opacity:0.8;filter: alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";} /*opacity 20%*/

#page-nav{color:#000;text-decoration:none;}

#container { width: 100%; clear: both; margin:0; }
#container .viewport { width: 100%; overflow: hidden; position: relative; }
#container .overview { list-style: none; position: absolute; left: 0; top: 0; }
#container .thumb .end,
#container .thumb { background-color: #003D5D; }
#container .scrollbar { position: relative; float: right; width: 15px; }
#container .track { background-color: #fff; height: 100%; width:13px; position: relative; padding: 0 1px; }
#container .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#container .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#container .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }


/*SUB-MENU*/
nav.menu{height: 80px;position: fixed;right: 24px;bottom: 100px;z-index:99;display:none;}
nav.menu ul{margin:0;padding:0;list-style:none;}
nav.menu ul li{float:left;margin:0 0 0 5px;}
nav.menu ul li a{width:60px;height:50px;padding:30px 10px 0 10px;text-align:center;display:block;background:#fff;word-wrap: break-word;text-transform:uppercase;font-family:FuturaTGRBold;font-size:13px;text-decoration:none;line-height:1em;}
nav.menu ul li a:hover,nav.menu ul li a.selected{color:#000;background-position:left bottom;}
nav.menu ul li a.type_10{height:44px;padding-top:36px;}

/*VIDEO PAGE*/
#project{position: fixed;z-index:99;bottom:0;left:0;width:100%;height:0;text-align:center;display:block;visibility:hidden;}
#project iframe{z-index:1;}
#project a.closeBtn{position: absolute;top:0;left:0;width:15px;height:15px;cursor:pointer;text-indent:-999em;z-index:2;visibility:hidden;}/*top:-42px;right:-36px;*/

#project article{margin-right:auto;margin-bottom:0;margin-left:auto;position:relative;visibility:hidden;}
#project article.photoArticle{height:100%;}
#project article.videoArticle{ /*max-width:924px; */}

#project article.photoArticle section.articleData { margin:0; }
#project article.photoArticle section.articleData .text { font-family: 'Open Sans', sans-serif; font-weight:600; width: 100%; margin-right: -80px; padding-right: 80px; box-sizing: border-box; z-index:-1; }
#project article.photoArticle section.articleData .text p { margin-top:16px; line-height:140%; color:#9b9b9b; }

#project article.videoArticle section.articleData .text { border-left: 1px solid #2c2c2c; box-sizing: border-box; padding-left: 20px; }
#project article.videoArticle section.articleData .text { font-family: FuturaTGRBold; font-size:12px; line-height:14px; text-transform:uppercase; }
#project article.videoArticle section.articleData .text p { color:#fff; max-width:85%; }
#project article.videoArticle section.articleData .text p strong,
#project article.videoArticle section.articleData .text td strong { display:inline-block; width:auto; margin-right:10px; color:#656565; font-weight:normal; white-space: nowrap; }
#project article.videoArticle section.articleData .text td { color:#fff; line-height:20px; vertical-align: top; }
#project article.videoArticle section.articleData .text table {  max-width:85%; }
#project article.videoArticle section.articleData .text ul { padding:0; list-style: none; margin-bottom:0; }
#project article.videoArticle section.articleData .text ul li { color:#fff; padding-left:25px; line-height:21px; } 


section.articleData{margin:30px 0 0 0;}
section.articleData hgroup{float: left;margin-left: 0;position: relative;text-align: left;width: 30%;}
section.articleData hgroup h1{text-transform:uppercase;font-family:FuturaTGRBold;font-size:16px;font-weight:normal;text-decoration:none;margin:0;padding:0;line-height:1em;}
section.articleData hgroup h2{text-transform:uppercase;font-family:FuturaTGRBold;font-size:16px;font-weight:normal;text-decoration:none;margin:0;padding:0;line-height:1em;}
section.articleData hgroup h3{text-transform:uppercase;font-family:FuturaTGRBold;font-size:12px;font-weight:normal;text-decoration:none;color:#fff;margin:0;padding:0;line-height:1em;}
section.articleData section.share{float:left;margin:20px 0 0 0;text-transform:uppercase;font-family:FuturaTGRBold;font-size:12px;color:#666;}
section.articleData section.share a.facebook{float:left;display:block;text-indent:-999em;width:22px;height:22px;}
section.articleData section.share a.twitter{margin:0 0 0 4px;float:left;display:block;text-indent:-999em;width:22px;height:22px;}
section.articleData section.share a.facebook:hover, #project section.articleData section.share a.twitter:hover{background-position:left top !important;}
section.articleData .text{float: left;font-size: 80%;position: relative;text-align: left;width: 70%;}
section.articleData .text p{margin-top:0;}
section.articleData p{color:#CCCCCC;line-height:20px;}

#project section.articleData .vendor {
	padding: 2%;
	background: #d1eed1;
	margin-bottom: 2em;
}
#project section.articleData .unsupported {	background: #fddfde; }


article .generalFrame{margin:0 auto;max-width:924px;position:relative;color:#cccccc;font-size:12px;visibility:hidden;}
article .generalFrame a{color:#999999;font-size:13px;font-family: 'Open Sans', sans-serif;font-weight:normal;text-decoration:none;line-height:20px;}
article .generalFrame table {width:100%;height:100%;}
article .generalFrame table td{text-align:left;vertical-align:top;color:#cccccc;line-height:20px;}
article .generalFrame table td.firstColumn{width:600px;padding-right:34px;padding-left:15px;font-family: 'Open Sans', sans-serif; font-size:13px; line-height:20px;}
article .generalFrame table td span.infoTitle{font-family: FuturaTGRBold;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;}
article .generalFrame table td p{margin-top:0; color:#fff; font-size:14px; line-height:24px; }
article .generalFrame table td h5{text-transform:uppercase;font-family:FuturaTGRBold;font-size:14px;font-weight:normal;text-decoration:none;margin:0 0 8px 0;padding:0;}
.extraTop{padding-top:40px;}
article .generalFrame table table td {width:50%;}
article .generalFrame table td ul{margin:0;padding:0;list-style:none;}

article .contactFrame{margin:0 auto;max-width:480px;position:relative;color:#cccccc;font-size:12px;visibility:hidden;}
article .contactFrame p {padding-top:0;}
article .contactFrame p, article .contactFrame a { font-family: 'Open Sans', sans-serif; font-size:13px; line-height:18px; }
article .contactFrame h3,article .contactFrame h4{text-transform:uppercase;font-family:FuturaTGRBold;font-size:13px;font-weight:normal;}
article .contactFrame h3{margin-bottom:10px;}
article .contactFrame h4{margin-bottom:10px;margin-top:25px;}
article .contactFrame h5{text-transform:uppercase;font-family:FuturaTGRBold;font-size:13px;font-weight:normal;margin-bottom:10px;color:#ccc;}
article .contactFrame ul {margin:0;padding:0;list-style:none;}
article .contactFrame ul li{cursor:pointer;float:left;margin:0 0 0 2px;text-align:center;padding:0 6px;dispaly:block;background:#252525;color:#ccc;line-height:28px;text-transform:uppercase;font-family:FuturaTGRBold;font-size:12px;font-weight:normal;}
article .contactFrame #formA,article .contactFrame #formB,article .contactFrame #formC{background:#fff;width:410px;padding:10px 10px 5px 10px;display:none;position:relative;float:left;}
article .contactFrame div.selected{display:block !important;}
article .contactFrame .headings {position:relative;}

.ContactForm input{width:98%;background:#e5e5e5;height:26px;padding:0 4px;border:1px solid #e5e5e5;margin-bottom:5px;color:#898989;}
.ContactForm textarea{width:98%;background:#e5e5e5;height:84px;padding:2px 4px 0 4px;border:1px solid #e5e5e5;margin-bottom:10px;color:#898989;text-align:left;}
.ContactForm input[type=submit] {width:80px;background:#fff;height:auto;padding:0 4px;border:none;float:right;text-align:right;text-transform:uppercase;font-family:FuturaTGRBold;font-size:13px;font-weight:normal;color:#010101;}
.ContactForm label{color:#999;}
.ContactForm label.error{display:none !important;}
.ContactForm input.error,.ContactForm textarea.error{border:1px solid #333 !important;}
#ServerMsgContainer {position: absolute;bottom: 10px;left: 10px;}
#ServerMsgHeader{padding-top:4px;width:160px;text-align:left;}
div.upload { width: 90px;height: 28px;background:url(/media/img/upload.gif) left top no-repeat;overflow: hidden;margin-bottom:5px;}
div.upload input#file1 {display: block !important;width: 90px !important;height: 28px !important;opacity: 0 !important;overflow: hidden !important;}

#scrollButton 	{position:fixed;right:15px;top:15px;;width:34px;height:34px;z-index:10;display:none;}
#infscr-loading,#page-nav,#infScrollLoading
				{position:fixed; display:none;visibility:false;width:0;height:0;top:0;left:0;font-size:0;line-height:0;overflow:hidden;}

#container {color:#000;}

/************************************************************************************
RESPONSIVE VIDEO
*************************************************************************************/
article.videoArticle div.videoFrame{width:924px;height:519px;position:relative;margin:0 auto;}
/*.videoFrame {
	position: relative;
	padding-bottom: 56.25%;
    padding-left:20px;padding-right:20px;
	height: 0;
	overflow: hidden;
}
	position:fixed !important;*/
.videoFrame iframe,  
.videoFrame object,  
.videoFrame embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*
	max-height:519px;
	max-width:924px;*/
.flex-video {
    position: relative;
    padding-top: 0;
    padding-bottom: 57.25%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
}
.flex-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
a.makingOf {width:75px;height:75px;display:block;text-indent:-9999em;     position: absolute;   top: 0;   right: 0;}

/*Photo Page*/
.photoFrame { text-align:center; height:100%; }
.photoFrame img { max-width: 100% !important;max-height: 100% !important;
	-webkit-opacity: 0;
  	-moz-opacity: 0;
	opacity: 0;
	
	-moz-transition: opacity 2s; /* Firefox 4 */
	-webkit-transition: opacity 2s; /* Safari and Chrome */
	-o-transition: opacity 2s;
	transition: opacity 2s;
	display: block;
    margin: auto;
}
.buttons {width: 80px;margin:16px 0 0 auto;}
.photoFrame .buttons { float:right; }
.photoFrame .buttons  a.nextPhoto {width:37px;height:32px;text-indent: -9999px;display:block;float:right;}
.photoFrame .buttons  a.prevPhoto {width:37px;height:32px;text-indent: -9999px;display:block;float:right;}

/*Tooltip*/
.ui-tooltip{color: #ccc;text-transform:uppercase;font-family:FuturaTGRBold;font-size:13px;text-decoration:none;overflow: hidden;position: absolute;z-index: 9999;max-width: 300px;}
.ui-tooltip .rowA{background: #000;background: rgba(0,0,0,1);display:inline;clear:both;line-height: 1.1em;padding: 6px 6px 3px 6px !important;}
.ui-tooltip .rowB{background: #000;background: rgba(0,0,0,1);display:inline;clear:both;line-height: 1.1em;padding: 3px 6px 6px 6px !important;}
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.box {
    opacity:0;
}

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  
}

.masonry .masonry-brick {
  
    
    opacity: 1;
    -moz-transition: all 0.4s ease-out;  /* FF4+ */
    -o-transition: all 0.4s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.4s ease-out;  /* IE10? */
    transition: all 0.4s ease-out;  
}

/*SEARCH*/
#searchForm { position:fixed; top:10px; left:10px; z-index:10;display:none; }
#searchForm ul {margin: 0;padding: 0;list-style: none; position:relative;}
#searchForm input[type="text"] {
	font-family:Arial; 
	font-size:0;
    width:0px; height:40px;
    padding:0 35px 0 0;
	color:#fff; /* #6f6f6f; */
	float:left;
	
	border:none;	
	
    -webkit-transition:width 0.5s ease-in-out;
       -moz-transition:width 0.5s ease-in-out;
            transition:width 0.5s ease-in-out;
	outline:none;
	cursor:pointer;
}

/* do not group these rules */
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff !important;
}
#searchForm input[type="text"] {
        -moz-appearance:    textfield !important;
        -webkit-appearance: textfield !important;
        appearance: textfield !important;
}
 
#searchForm input[type="text"]:focus,
#searchForm input[type="text"]:active,
#searchForm li.active input,
#searchForm li.searched input {
	font-size:0.813em;
    width:210px;	
    border:solid 1px #000;
	background-color:#000;
	padding-left:5px;
	cursor:default;
}
#searchForm li.searched input {
	
}

#searchForm .search-form {
    position:relative;
    float:right;
} 

#searchForm a.searchSubmit, #searchForm a.searchClear 
	{ position:absolute; top:5px; right:5px; width:25px; height:25px;border:none;background:transparent;color:transparent; display:none; }
#searchForm li.active a.searchSubmit
	{display:block;}
#searchForm li.searched a.searchClear
	{display:block;}

a.searchClearBox {position:absolute; top:5px; left:5px; font-family:FuturaTGRBold; font-size:14px; z-index:10;text-transform:uppercase; padding-right:35px;cursor:pointer; text-decoration:none; display:block;}
a.searchClearBox span {color:#fff;margin-right:2px;cursor:default;}
	
h2.searchNotFound { text-align:center;font-family: 'FuturaTGRBold';color:#fff; }

/*FOOTER*/
footer table{width:100%;height:70px;}
footer table td{padding:0;margin:0;}
footer table td.logo{width:140px;}
footer table td.logo a.logoLink{text-indent: -9999px;width:140px;height:70px;display:block; }
footer table td.nav{height:70px;background:rgb(255, 242, 0);background: rgba(255, 242, 0, 0.85);}
footer table td.nav nav{float:right;padding:5px 20px 0 0;min-width:434px;}
footer table td.nav nav ul{margin:0;padding:0;list-style:none;}
footer table td.nav nav ul li{float:left;margin:0 0 0 14px;line-height:33px;}
footer table td.nav nav ul li a{color:#000;text-transform:uppercase;font-family:FuturaTGRBold;font-size:13px;text-decoration:none;}
footer table td.nav nav ul li a.nonSelected{color:#000;opacity:0.5;-khtml-opacity: 0.5;-moz-opacity:0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}
footer table td.nav nav ul li.facebook,footer nav ul li.twitter,footer nav ul li.sep,footer nav ul li.grLang,footer nav ul li.engLang,footer nav ul li.vimeo{margin:0 0 0 10px;}
footer table td.nav nav ul li.facebook a{background:url(/media/img/facebook.png) center 7px no-repeat;width:10px;height:33px;text-indent: -9999px;display:block;}
footer table td.nav nav ul li.twitter a{background:url(/media/img/twitter.png) center 8px no-repeat;width:24px;height:33px;text-indent: -9999px;display:block;}
footer table td.nav nav ul li.vimeo a{background:url(/media/img/vimeo.png) center 7px no-repeat;width:24px;height:33px;text-indent: -9999px;display:block;}
footer table td.nav nav ul li.grLang a{width:32px;height:33px;text-indent: -9999px;display:block;}
footer table td.nav nav ul li.enLang a{width:32px;height:33px;text-indent: -9999px;display:block;}


/* ==========================================================================
   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: 100%;
}

/*
 * 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.
   Theses 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 only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

@media only screen and (min-width: 1024px) and (max-width: 1024px)  {
    /* iPad ADJUSTMENTS */
	
	.col0 	{ width: 166px;height:166px;overflow:hidden; }
	.col1 	{ width: 166px;height:166px;overflow:hidden; }
	.col2 	{ width: 166px;height:336px;overflow:hidden; }
	.col3 	{ width: 336px;height:166px;overflow:hidden; }
	.col4 	{ width: 336px;height:336px;overflow:hidden; }
	.col5 	{ width: 676px;height:166px;overflow:hidden; }

	.col1 .projectBox a.aClick,.col1 .projectBox .video,.col1 .projectBox .photo,.col1 .projectBox span.bgC,.col3 .projectBox a.aClick,.col3 .projectBox .video,.col3 .projectBox .photo,.col3 .projectBox span.bgC,.col5 .projectBox a.aClick,.col5 .projectBox .video,.col5 .projectBox .photo,.col5 .projectBox  span.bgC 
			{ width: 100%;height:166px;}
	.col2 .projectBox a.aClick,.col2 .projectBox .video,.col2 .projectBox .photo, .col2 .projectBox span.bgC 
			{ width: 100%;height:336px; }
	.col4 .projectBox a.aClick,.col4 .projectBox .video,.col4 .projectBox .photo, .col4 .projectBox span.bgC 
			{ width: 100%;height:336px; }

	.col0 img,.col1 img,.col2 img 	{min-width:166px;}
	.col3 img,.col4 img				{min-width:336px;}
	.col5 img						{min-width:676px;}

	.col2 img,.col4 img				{min-height:336px;}
	
}


/* ==========================================================================
   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;
    }
}


#project.open { background-image:none; }
section.articleData { /*max-height:100px; */ }


#project {
	float: left;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

.videoArticle {
	/*min-height: 100%;*/
}

#project::-webkit-scrollbar {
	width: 10px;
	background-color: #000;
}

/**  STYLE 11 */
#project::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  border: none;
}

#project::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #fff;
  border: 1px solid #aaa;
}

#project::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

#project::-webkit-scrollbar-thumb:active {
  background: linear-gradient(left, #22ADD4, #1E98BA);
}








/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */