body{
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#303143;
}

p{
margin:5px 0;
}

.page-node-136 p{
line-height:1.5;
margin-bottom:10px;
}

a:link, a:visited{
text-decoration:none;
font-weight:normal;
color:#EEEEEE;
}

a:hover{
text-decoration:underline;
color:#FFFFFF;
}

/*LIGHTBOX */

#imageContainer, #frameContainer, #modalContainer {
  
}

#imageData #bottomNav {
    height: 15px !important;
}

#imageDataContainer {
    height: 15px !important;
}

#imageDataContainer #caption{
padding:8px 0 0 0 !important;
font-weight:normal !important;

}

#bottomNavClose{
display:none !important;
}

#prevLink:hover, #prevLink:visited:hover, #prevLink.force_show_nav, #framePrevLink {
  background: url(../img/icons/overlay-arrow-left.png) left 95% no-repeat  !IMPORTANT;
}

#nextLink:hover, #nextLink:visited:hover, #nextLink.force_show_nav, #frameNextLink {
  background: url(../img/icons/overlay-arrow-right.png) right 95% no-repeat  !IMPORTANT;
}

#prevLink:hover.force_show_nav, #prevLink:visited:hover.force_show_nav,
#framePrevLink:hover, #framePrevLink:visited:hover {
  background: url(../images/prev_hover.gif) left 15% no-repeat !IMPORTANT;
}

#nextLink:hover.force_show_nav, #nextLink:visited:hover.force_show_nav,
#frameNextLink:hover, #frameNextLink:visited:hover {
  background: url(../images/next_hover.gif) right 15% no-repeat !IMPORTANT;
}

/*STUCTURE*/

.wrapper{
width:960px;
margin:0 auto;
}

#wrapper{
width:960px;
margin:0 auto;
}


#header{
margin:10px 0;
position:relative;
width:378px;
}

#header h1{
margin:0;
padding:0;
}

#navBotton{
position:absolute;
right:0;
bottom:0;
}

/*PROJECTS*/

.portfolioList{

}

.portfolioList ul{
padding:0;
margin:0;
}

.portfolioList ul li{
float:left;
padding:0;
margin:0 10px 10px 0;
list-style-type:none;
height:145px;
overflow:hidden;
width:184px;
position:relative;
}

.portfolioList ul li H2.flipTitle{
left:5px;
bottom:5px;
font-weight:bold;
font-size:13px;
position:absolute;
color:#FFFFFF;
padding:5px;
margin:0;
opacity:0;
transform: translateY(-25px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.portfolioList ul li H2.flipTitle a{
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
height:145px;
width:184px;
PADDING-TOP:100PX;

}

.portfolioList ul li H2.flipTitle a:hover{
color:#EEEEEE;
font-weight:normal;
height:145px;
width:184px;
}

.portfolioList ul li .views-field-title{
opacity:0;
background-color: rgba(219,127,8, 0.7); 
background-color: rgba(48,49,67, 0.8); 
transition: all 0.4s ease-in-out;
	
height:145px;
left:0;
top:0;
width:184px;
position:absolute;

}

.portfolioList ul li:hover .views-field-title{
opacity: 1;
}

.portfolioList ul li:hover H2.flipTitle{
opacity: 1;
transform: translateY(0px);
}

.portfolioList ul li img { 
transition: all 0.2s linear;
} 

.portfolioList ul li:hover img { 
	transform: scale(1.1);
    
} 

.portfolioList ul li:nth-child(5n+0){
margin:0 0 10px 0;
}



.portfolioList{

}





/*TABS*/
.tabs{
font-size:12px;
float:right;
}

.tabs a{
color:#333333;
}

ul.tabs.primary{
border-bottom:none;
}

/*ACTIONS LINKS*/
.links.inline{
font-size:12px;
font-style:italic;
}	

/*WEBFORM*/
#block-webform-client-block-34 .form-text {
width:375px;
}

#block-webform-client-block-34 label{
font-size:12px;
font-weight:normal;
float:left;
width:75px;

}

#block-webform-client-block-34 textarea {
width:378px;	
}

#block-webform-client-block-34 .grippie {
width:376px;	
margin-left:75px;
}

#block-webform-client-block-34  .form-submit{
width:100px;	
margin-left:75px;
padding:1px 1px;
font-size:12px;
}

/*MAINNAVI*/
#mainNavi{
border-top:1px solid #6F7086;
border-bottom:1px solid #6F7086;
margin:10px 0 0 0;
padding:10px 0;
overflow:hidden;
}

#block-menu-block-1 ul{
padding:0;
margin:0;
text-transform:uppercase;
}

#block-menu-block-1 ul li{
padding:0;
margin:0 16px 0 0;
list-style-type:none;
float:left;
font-size:12px;
padding-bottom:5px;
}

#block-menu-block-1 ul li a{
padding:0;
margin:0;
color:#EEEEEE;

}

#block-menu-block-1 ul li a:hover{
color:#CCCCCC;
}
#block-menu-block-1 ul li a.active,
#block-menu-block-1 ul li a.active-trail{
text-decoration:underline;
color:#EEEEEE;
}


#block-menu-block-2{
clear:both;
padding:0px 0 0 0;
}

#block-menu-block-2 ul{
padding:0;
margin:0;
}

#block-menu-block-2 ul li{
padding:0;
margin:0 8px 0 0;
padding:0 8px 0 0;
list-style-type:none;
float:left;
font-size:11px;
letter-spacing:1px;
line-height:2;
}

#block-menu-block-2 ul li:last-child{
border-right:none;
}

#block-menu-block-2 ul li a{
padding:0;
margin:0;
color:#EEEEEE;
}

#block-menu-block-2 ul li a:hover{
color:#CCCCCC;
}

#block-menu-block-2 ul li.active-trail,
#block-menu-block-2 ul li a.active{
text-decoration:underline;
color:#EEEEEE;
}

/*MAINSTAGE*/
#mainStage{
clear:both;
margin:10px 0 15px 0;
}

.group-resources{
float:right;
max-width:569px;
}



.field-name-field-project-images{
margin:10px 0 0 0;
}

.field-name-field-project-images .field-item{
float:left;
padding:0;
margin:0 8px 8px 0;
width:184px;
height:145px;
overflow:hidden;
}

.field-name-field-project-images .field-item:nth-child(3n+3){
margin:0 0px 8px 0
}

/*PROJECTS*/
.page-inspirations h1,
.page-publications h1,
.node-type-page h1,
.page-news h1,
.page-projects H1,
.page-taxonomy-term h1{
display:none;
}

.node-type-project .field-name-body,
.page-projects .field-name-body{
width:375px;
font-size:12px;
margin:0 0px 0 0;
line-height:2;
text-align:left;
color:#EEEEEE;
}

#projectMainArea{
position:relative;
height:450px;
overflow:hidden;
margin:0 0 15px 0;
}

#projectMainArea h1{
padding:15px 30px 15px 15px;
font-size:14px;
margin:0;
color:#333333;
font-weight:normal;
line-height:1.5;
letter-spacing:4px;
text-transform:uppercase;
}

.field-name-field-main-image{
position:absolute;
top:0;
left:50%;
margin-left:-725px;
z-index:10;
}


#infoAreaWrapper{
width:960px;
margin:0 auto;
position:relative;
z-index:40;
height:450px;
}

#infoBoxWrapper{
position:absolute;
z-index:60;
color:#333333;
width:375px;
padding:0px;
bottom:25px;
left:0;
}

.view-project-info-box{
background-color:rgba(255,255,255,0.75);
margin:1px 0 0 0;
padding:15px 25px 15px 15px;
font-size:12px;
line-height:1.5;
}

.views-field-field-date{
color:#333333;
}

.views-label-field-client,
.views-label-field-developer,
.views-label-field-team,
.views-label-field-area{
float:left;
margin:0 5px 0 0;
color:#000000;
}

#infoBoxWrapper h1{
background-color:rgba(255,255,255,0.75);
margin:1px 0 0 0;
}

#infoAreaTitle{
position:relative;
}

#moreInfo{
position:absolute;
right:15px;
top:15px;
color:#333333;
}

/*INSPIRATION*/
#inspirationRightColumn{
float:right;
width:570px;
}

.node-type-inspiration h1{
font-size:14px;
margin:0 0 10px 0;
padding:0;
}

.node-type-inspiration .field-name-body{
width:375px;
font-size:12px;
margin:0 0px 0 0;
line-height:2;
text-align:left;
color:#EEEEEE;
}

.node-type-inspiration .field-name-field-more-info-on-our-site,
.node-type-inspiration .field-name-field-link,
.node-type-inspiration .name-field-download-pdf-,
.node-type-inspiration .field-name-field-tags{
color:#EEEEEE;
}

.node-type-inspiration .field-name-field-more-info-on-our-site .field-item,
.node-type-inspiration .field-name-field-link .field-item,
.node-type-inspiration .field-name-field-download-pdf-  .field-item,
.node-type-inspiration .field-name-field-tags  .field-item{
font-size:12px;
margin:5px 0;
}

.node-type-inspiration .field-label{
font-size:12px;
margin:10px 0 5px 0;
color:#EEEEEE;
}

.node-type-inspiration .field-name-field-tags  .field-label{
margin:5px 0 5px 0;
}

/*NEWS*/
#mainColumn{
width:570px;
float:right;
}

#leftColumn{
width:375px;
}

#leftColumn h2{
font-size:14px;
}

#block-block-1{
padding:20px 0 0 0;
color:#EEEEEE;
}

#leftColumn .block{
font-size:12px;
line-height:1.5;
}

.page-archive h1,
.node-type-article h1,
.page-news h2{
color:#EEEEEE;
font-weight:normal;
font-size:18px;
text-transform:uppercase;
}

.node-type-article .field-name-body{
clear:both;
font-size:12px;
margin:0 0px 0 0;
line-height:2;
text-align:left;
color:#EEEEEE;
}

.node-type-article .field-name-field-additional-images .field-item {
float:left;
padding:0;
margin:0 0 8px 0
}

.node-type-article .field-name-field-additional-images .field-item img {
	width: 100%;
	height: auto;
}

.node-type-article .field-name-field-additional-images .field-item:nth-child(3n+3){
margin:0 0px 8px 0
}

.node-type-article .field-name-field-video .field-item,
.page-news .field-name-field-video .field-item,
.page-archive  .field-name-field-video .field-item{
margin:0 0 10px 0;
}

.node-type-article .field-name-field-news-image .field-item,
.page-news .field-name-field-news-image .field-item,
.page-archive .field-name-field-news-image .field-item{
margin:0 0 10px 0;
}


.node-type-article .field-name-field-more-info-on-our-site,
.node-type-article .field-name-field-link,
.node-type-article .name-field-download-pdf-,
.node-type-article .field-name-field-tags,
.view-id-archive.view-display-id-page  .field-name-field-tags{
clear:both;
color:#EEEEEE;
}

.node-type-article .field-name-field-more-info-on-our-site .field-item,
.node-type-article .field-name-field-link .field-item,
.node-type-article .field-name-field-download-pdf-  .field-item,
.node-type-article .field-name-field-tags  .field-item,
.view-id-archive.view-display-id-page  .field-name-field-tags   .field-item {
font-size:12px;
margin:5px 0;
}

.node-type-article .field-label{
font-size:12px;
margin:10px 0 5px 0;
color:#EEEEEE;
}

.node-type-article .field-name-field-tags  .field-label{
margin:5px 0 5px 0;
}

.view-id-news.view-display-id-page h2 a,
.page-news h2 a,
.page-archive h2 a{
color:#EEEEEE;
font-weight:normal;
font-size:18px;
}

.view-id-news.view-display-id-page  .views-field-body,
.page-news .views-field-body,
.page-archive .views-field-body{
font-size:12px;
line-height:1.5;
text-align:left;
color:#EEEEEE;
}


.view-id-news.view-display-id-page .views-field-field-video,
.view-id-news.view-display-id-page .views-field-field-news-image,
.page-news .views-field-field-video,
.page-news .views-field-field-news-image,
.page-archive .views-field-field-video,
.page-archive .views-field-field-news-image{
margin:0 0 10px 0;
}

#block-tagclouds-1{
color:#EEEEEE;
}

#block-tagclouds-1 a{
color:#EEEEEE;
}

#block-tagclouds-1 a.active{
color:#EEEEEE;
text-decoration:underline;
}


.view-id-news.view-display-id-page .views-field-view-node,
.page-news .views-field-view-node,
.page-archive .views-field-view-node{
color:#EEEEEE;
font-size:12px;
margin:8px 0 16px 0;
}

.view-id-news.view-display-id-page .views-field-view-node a,
.page-news .views-field-view-node a,
.page-archive .views-field-view-node a{
text-decoration:underline;
}

/*PAGE ARCHIVE*/
.page-archive H2{
color:#EEEEEE;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
}

#block-views-archive-block{
color:#EEEEEE;
}

#block-views-archive-block a.active{
color:#EEEEEE;
text-decoration:underline;
}




/*BASIC PAGE*/
.node-type-page .field-name-body{
font-size:12px;
margin:0 0px 0 0;
line-height:2;
text-align:left;
color:#EEEEEE;
padding:1px 0 0 0;
}

.node-type-page .views-field-field-body-1{
font-size:12px;
margin:0 0px 0 0;
line-height:2;
text-align:left;
color:#EEEEEE;
padding:1px 0 0 0;
}

/*PUBLICATION PAGE*/
.view-publications .attachment .view-header{
font-size:12px;
color:#EEEEEE;
float:left;
margin:0 5px 0 0;
padding:5px 0 30px 0;
}


.view-publications .attachment ul{
margin:0;
padding:10px 0 20px 0;
font-size:12px;
color:#EEEEEE;
}

.view-publications .attachment ul li{
margin:0 10px 0 0;padding:0;
list-style-type:none;
float:left;}

.view-publications .attachment ul li a.active{
text-decoration:underline;
color:#EEEEEE;
}

.view-publications ul li.views-row {
clear:both;
}


.node-type-publication h1{
color:#EEEEEE;
font-weight:normal;
font-size:18px;
text-transform:uppercase;
margin-bottom:5px;
}

.node-type-publication .field-name-field-publications-date{
margin:5px 0;
font-size:12px;
float:left;
margin:0 5px 0 0;
font-weight:bold;
border-right:1px solid #EEEEEE;
padding:0 5px 0 0;
display:none;
}

.node-type-publication .field-name-field-preview-image{
float:left;
margin:0 10px 10px 0;
}

.node-type-publication .field-name-body{
font-size:12px;
color:#EEEEEE;

}

.node-type-publication .field-name-field-link{
font-size:12px;
margin:5px 0;
}


.node-type-publication .field-name-field-download-pdf-{
font-size:12px;
margin:5px 0;
}


/*PUBLICATIONS VIEWS*/
.page-publications .views-field-field-preview-image{
float:left;
margin:0 10px 10px 0;
}

.page-publications .views-field-body{
font-size:12px;
color:#EEEEEE;
}

.page-publications .views-field-field-link{
font-size:12px;
margin:5px 5px;
padding:0 5px 0 0;


}

.page-publications .views-field-field-link .views-label{
float:left;
margin:0 5px 0 0;
color:#FFFFFF;
}

.page-publications .views-field-field-download-pdf-{
font-size:12px;
margin:5px 0;

}

.page-publications .views-field-field-download-pdf- .views-label{
float:left;
margin:3px 5px 0 0;
color:#FFFFFF;
}

.page-publications ul{
margin:0;
padding:0;
}

.page-publications ul li{
padding:0;
list-style-type:none;
margin:0 0 18px 0;
}

.page-publications h2{
color:#FFFFFF;
font-weight:bold;
font-size:14px;
margin-bottom:0;
}

.page-publications .views-field-field-subtitle{
color:#FFFFFF;
font-size:12px;
margin:5px 0;
}

.field-name-field-subtitle{
color:#FFFFFF;
font-size:14px;
margin:0px 0 10px 0;
}




/*SHARETHIS*/
#block-sharethis-sharethis-block{
margin:10px 0 35px 0;
	filter: grayscale(100%);
}

/*PAGER*/
ul.pager{
margin:10px 0;
font-size:12px;
}

ul.pager li.pager-current{
color:#EEEEEE;
text-decoration:underline;
font-weight:normal;
}

ul.pager{

}

/*SYSTEM HELPERS*/

.displaynone{
display:none;
}

li.expanded, li.collapsed, li.leaf{
padding:0;
margin:0;
}

ul.menu li{
margin:0;
}

ul li.leaf{
list-style-image: none;
list-style-type: none;
}

ul li.collapsed{
list-style-image:none;
list-style-type:none;
}

ul li.expanded{
list-style-image:none;
list-style-type:none;
}

#content img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-device-width:400px), screen and (max-width:400px) { 


.wrapper,
#wrapper{
width: 390px;
margin:0 auto;
padding:0 5px;
}

.portfolioList ul li:nth-child(2n+0){
margin:0 0 10px 0;
}

.portfolioList ul li:nth-child(5n+0){
margin:0 10px 10px 0;
}

.field-name-field-main-image img{
    width:600px !important; /* you can use % */
    height:auto !important;
}

.field-name-field-main-image{
position:absolute;
top:0;
left:50%;
margin-left:-300px !important;
z-index:10;

}

#projectMainArea{
height:auto !important;
width:400px !important; 

}

#infoAreaWrapper{
width:400px !important;
margin:0 auto;
position:relative;
z-index:40;
height:265px !important;
}



#moreInfo{
position:absolute;
right:30px !important;
top:15px;
color:#333333;
}

#infoBoxWrapper{
position:absolute;
z-index:60;
color:#333333;
width:400px;
padding:0px 0 0 5px;
bottom:0px !important;
left:0;
}


p{font-size:16px;padding:0 0px;line-height:1.5;}

.page-node-136 p{
line-height:1.5;
margin-bottom:10px;
}

.field-name-field-project-images .field-item{
float:left;
width:180px;
height:142px;
padding:0;
margin:0 8px 8px 0 !important;
}

.field-name-field-project-images .field-item:nth-child(2n+2){
margin:0 8px 8px 0  !important;
}

/*PUBLICATION*/
.view-publications p{font-size:18px;padding:0 20px;}
.view-publications .views-field-field-subtitle{font-size:18px !important;padding:0 20px;}
.view-publications h2{font-size:22px !important;padding:0 20px;}
.view-publications .view-header p{font-size:16px !important; }
.view-publications .view-header {font-size:16px !important; margin-bottom:20px !important;}
.view-publications .view-header a{font-size:16px !important;}

/*NEWS*/
#mainColumn{
width:400px;
float:none;
}

#leftColumn{
width:400px;
}

.field-name-field-news-image img,
.views-field-field-news-image img{
    width:375px !important; /* you can use % */
    height:auto !important;
}



/*INSPIRATION*/
#inspirationRightColumn{
float:none !important;
width:400px;
}

.node-type-inspiration h1{
clear:both;
font-size:12px !important;
margin:0 0 10px 0;
padding:0;
font-weight:bold;
}

.node-type-inspiration .field-name-body{
width:375px;
font-size:18px;
margin:0 0px 0 0;
line-height:2;
text-align:left;
color:#EEEEEE;
}

.node-type-inspiration .field-name-field-more-info-on-our-site,
.node-type-inspiration .field-name-field-link,
.node-type-inspiration .name-field-download-pdf-,
.node-type-inspiration .field-name-field-tags{
color:#EEEEEE;
}

.node-type-inspiration .field-name-field-more-info-on-our-site .field-item,
.node-type-inspiration .field-name-field-link .field-item,
.node-type-inspiration .field-name-field-download-pdf-  .field-item,
.node-type-inspiration .field-name-field-tags  .field-item{
font-size:18px;
margin:5px 0;
}

.node-type-inspiration .field-label{
font-size:14px;
margin:10px 0 5px 0;
color:#EEEEEE;
}

.node-type-inspiration .field-name-field-tags  .field-label{
margin:5px 0 5px 0;
}



}