@import 'animate.css';
@import 'normalize.css';
@import 'bootstrap.css';
@import '../font/fontello.css';
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

/* font-family: 'Lato', sans-serif;*/

html,body { 
	height: 100%; 
}

html { overflow-y: hidden; }

a, a:hover { text-decoration: none; }

.container
{
	margin-left: auto;
	margin-right: auto;
}

.title
{
	text-transform: uppercase;
	font-weight: 300;
}

.f17 { font-size: 17px; }
.f20 { font-size: 20px; }

#blog-load-more,
#to-top
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 38px;
	width: 42px;
	position: relative;
}

#blog-load-more,
#blog-load-more:before,
#to-top,
#to-top:before
{
	border-style: solid;
	border-width: 1px;
}

#blog-load-more:before,
#to-top:before
{
	content: "";
	position: absolute;
	top: 1px;
	right: -3px;
	bottom: 1px;
	left: -3px;
}

#blog-load-more i,
#to-top i
{
	display: inline-block;
	font-size: 32px;
	line-height: 1.2;
}



#preloader
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	z-index: 999999;
}

#status
{
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(../images/preload.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
}


/*---------------- intro ----------------*/

#intro
{
	height: 100%;
	position: relative;
}

#slider-wrapper
{
	height: 100%;
	width: 100%;
	position: relative;
}

#intro .overlay
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(../images/bg/intro_bg.png);
	text-align: center;
}

#intro .overlay:before
{
	content: "";
	height: 100%;
	width: 0;
	display: inline-block;
	vertical-align: middle;
}

#logo
{
	display: inline-block;
	vertical-align: middle;
	margin-top: -85px; /*minus height navigation*/
}

#header
{
	z-index: 50;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 85px;
	padding-top: 24px;
	background: rgba(72,72,72,0.7);

	-webkit-transition: background 450ms ease-in-out;
	-moz-transition: background 450ms ease-in-out;
	-ms-transition: background 450ms ease-in-out;
	-o-transition: background 450ms ease-in-out;
	transition: background 450ms ease-in-out;
}

#header.header-fixed
{
	position: fixed;
	top: 0;
	bottom: auto;
	background: #484848;
}

#mobile-logo
{
	display: none;
	float: left;
}

#mobile-logo img { display: block; }

#menu-link
{
	display: none;
	width: 50px;
	height: 50px;
	padding: 17px 0;
	float: right;
}

#menu-link span
{
	display: block;
	height: 3px;
	width: 16px;
	background-color: #acacac;
	margin: 3px auto 0;

	-webkit-transition: background-color 300ms ease-in-out;
	-moz-transition: background-color 300ms ease-in-out;
	-ms-transition: background-color 300ms ease-in-out;
	-o-transition: background-color 300ms ease-in-out;
	transition: background-color 300ms ease-in-out;
}

#menu-link span:first-child { margin: 0 auto; }

#navigation
{
	height: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 300;
}

#navigation li
{
	display: inline-block;
	vertical-align: middle;
	margin-left: 40px;
}

#navigation li:first-child { margin-left: 0; }

#navigation li a
{
	display: block;
	position: relative;
	color: #acacac;
	padding: 0 20px;
	line-height: 39px;
	height: 39px;

	-webkit-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
}

#navigation li a,
#navigation li a:before
{
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
}

#navigation li a:before
{
	display: block;
	content: "";
	position: absolute;
	top: 2px;
	right: -4px;
	bottom: 2px;
	left: -4px;

	-webkit-transition: border-color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out;
}

#navigation li a:hover,
#navigation li a.current
{ color: #ffffff; }

#navigation li a:hover,
#navigation li a:hover:before,
#navigation li a.current,
#navigation li a.current:before
{
	border-color: rgba(255,255,255,0.64);
}


.page-section
{
	text-align: center;
	padding-top: 90px;
}

.page-title
{
	display: inline-block;
	font-size: 58px;
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 55px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.page-title.white
{
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.page-title:after
{
	display: block;
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	height: 14px;
	width: 13px;
	margin-left: -6px;
	background-image: url(../images/ico/page_title_bg.png);
}

.page-title.white:after { background-position: top right; }

/*---------------- portfolio ----------------*/

#portfolioTitle
{
	margin-bottom: 15px;
}

#option-set
{
	text-transform: uppercase;
	margin-bottom: 32px;
}

/*
#option-set li
{
	display: inline-block;
	margin-left: 21px;
}

#option-set li:first-child { margin-left: 0; }

#option-set a
{
	display: inline-block;
	padding: 0 15px;
	height: 29px;
	line-height: 29px;
	position: relative;

	-webkit-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
}

#option-set a,
#option-set a:before
{
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
}

#option-set a:before
{
	display: block;
	content: "";
	position: absolute;
	top: 2px;
	right: -4px;
	bottom: 2px;
	left: -4px;

	-webkit-transition: border-color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out;
}

#portfolio-list
{
	overflow: hidden;
	position: relative;
}

.portfolio-item
{
	float: left;
	width: 19.98%;
	position: relative;
}
*/

.portfolio-year-header
{
	font-size: 40pt;
	font-weight: 300;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
	margin-top: 50px;
}


/*---------------- portfolio image darken CSS ----------------*/
/*
.grid-item
{
    background: black;
}

.grid-item img
{
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;	
}

.grid-item:hover img 
{
	opacity: 0.7;	
}
*/
/*---------------- about ----------------*/

#about 
{ 
	padding-bottom: 55px; 
	clear: left;
}

#about span.title
{
	display: block;
	margin-bottom: 15px;
}

#about [class*="span"] { margin-bottom: 45px; }

#about .text
{
	line-height: 1.6;
	padding-bottom: 23px;
	position: relative;
}

#about .text:after
{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 30px;
	height: 1px;
	margin-left: -15px;
}

#team
{
	overflow: hidden;
	margin-top: 25px;
	width: 100%;
	margin:auto;
	padding-left: 80px;
}

.team-item
{
	font-size: 10pt;
	float: left;
	/* cursor: pointer; */
	position: relative;
	/* modified on 20200818 :: profile layout change :: width -> 167px */
	width: 167px;
	/* removed  on 20200818 :: profile layout change
	height: 650px; */
	background-repeat: no-repeat;
	background-position: 0 0;
	/* removed on 20200818 :: profile layout change :: 10px -> 10px */
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 15px;
}

.team-item:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(../images/bg/team_bg.png); /*IE 8*/
	background: rgba(248,246,245,0.18);
	
	
	-webkit-transition: background 300ms ease-in-out;
	-moz-transition: background 300ms ease-in-out;
	-ms-transition: background 300ms ease-in-out;
	-o-transition: background 300ms ease-in-out;
	transition: background 300ms ease-in-out;
}

/*
.team-item:hover:before
{
	background: url(../images/bg/team_bg_hover.png); /*IE 8*/ /*
	background: rgba(248,246,245,0);
}

*/

/*
.team-item:hover .description
{
	z-index: 2;
	left: 100%;
	opacity: 1;
	filter: alpha(opacity=100);
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);z-index: 2;
	top: 0px;
	
}
*/

.team-image
{
	float: left;
	/* cursor: pointer; */
	/*position: relative; */
	/* width: 16.5%; */
	/* modified on 20200818 :: profile layout change :: width 50% -> 100% */
	width: 100%;
	/* modified on 20200818 :: profile layout change :: height 400px -> 275px */
	height: 275px;
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-right: 10px;
}

#team-first-item 
{
	margin-left: 20px;
}

.team-item.last-item .description
{
	left: auto;
	right: 0;
}

.team-item:hover .description
{
	z-index: 2;
	left: 100%;
	opacity: 1;
	filter: alpha(opacity=100);
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.team-item.last-item:hover .description
{
	left: auto;
	right: 100%;
}

.team-item  .title
{
	color: #000000;
	margin-bottom: 10px;
}

.team-position 
{ 
	/*removed on 20200818 
	margin-bottom: 20px; */
	height: 50px;
}

.team-text
{
	overflow: hidden;
	/* removed on 20200818 
	max-height: 300px; */
	color: #000000;
	font-size: 12px;
}

/* added on 20200818 :: new email mailto css class */
.team-email {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	font-size: 12px;
	font-family: 'Lato', sans-serif;
	color: #000000;
	text-decoration: underline;
}

.team-email a:link {
	color: #000000;
}

.team-email a:visited {
	color: #000000;
}

.team-email a:hover {
	color: #4D4D4D;
}

.team-email a:active {
	color: #000000;
}

.team-text a
{
	cursor: pointer;
}


.team-social
{
	position: absolute;
	bottom: 20px;
}

.team-social a
{
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: 17px;
	line-height: 27px;
	color: #484848;
	text-align: center;
	height: 30px;
	width: 30px;
	margin-left: 5px;

	-webkit-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out , color 300ms ease-in-out;
}

.team-social a:first-child { margin-left: 3px; }
.team-social a:hover { color: #ffffff; }

.team-social a,
.team-social a:after
{
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0);
}

.team-social a:after
{
	content: "";
	position: absolute;
	top: 1px;
	right: -3px;
	bottom: 1px;
	left: -3px;

	-webkit-transition: border-color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out;
}

.team-social a:hover,
.team-social a:hover:after
{
	border-color: #ffffff;
}




/*---------------- contact ----------------*/

#contact
{
	position: relative;
}

#gmap
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%
}

#contact-inner
{
	position: relative;
	padding-bottom: 100px;
	background: url(../images/bg/contact_bg.png);
}

#social-group
{
	font-size: 0;
	line-height: 0;
	letter-spacing: -1px;
	margin-bottom: 30px;
}

#social-group a
{
	display: inline-block;
	vertical-align: top;
	font-size: 21px;
	line-height: 1.2;
	color: #ffffff;
	letter-spacing: 0;
	height: 30px;
	width: 30px;
	margin-left: 5px;

	-webkit-transition: color 300ms ease-in-out;
	-moz-transition: color 300ms ease-in-out;
	-ms-transition: color 300ms ease-in-out;
	-o-transition: color 300ms ease-in-out;
	transition: color 300ms ease-in-out;
}

#social-group a:hover { color: #acacac; }

#social-group a:first-child{ margin-left: 0; }

.contact-item
{
	text-align: left;
}

.contact-item:after
{}

.contact-item .ico
{
	float: left;
	display: inline-block;
	position: relative;
	height: 75px;
	width: 86px;
	margin-right: 28px;
	text-align: center;
	color: #ffffff;
}

.contact-item .ico,
.contact-item .ico:before
{
	border: 1px solid rgba(255,255,255,0.56)
}

.contact-item .ico:before
{
	content: "";
	position: absolute;
	top: 2px;
	right: -4px;
	bottom: 2px;
	left: -4px;
}

.contact-item .ico:after
{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
}

.contact-item .ico i
{
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	font-size: 30px;

	opacity: 0.85;
	filter: alpha(opacity=85);
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
}

.contact-item .ico i:before { width: 1em; }

.contact-item p { margin-top: 26px; }

.contact-item p,
.contact-item p a
{
	color: #acacac;
}

.contact-item p a:hover { text-decoration: underline; }

.contact-item .title
{
	padding-right: 10px;
	color: #ffffff;
}

#contact-mobile {
	width: 355px;
}

#contact-ffwemail {
	width: 355px;
}

#contact-address {
	width: 400px;
}

/*---------------- footer ----------------*/

footer
{
	text-align: center;
	padding-top: 45px;
	padding-bottom: 65px;
}

#copyright { margin-top: 25px; }



/* isotope css */


/* ---- grid ---- */
.grid 
}
	max-width: 100%;
}

/* clear fix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}

.gridMod 
}
	max-width: 100%;
}

/* clear fix */
.gridMod:after {
	content: '';
	display: block;
	clear: both;
}

.mob-grid
{
	content: '';
	display: block;
	clear: both;
}
.grid-wrapper-unsorted 
{
	width: 100%;
}

.grid-overflow-hider-unsorted {
	width: 100%;
	overflow: hidden; 
	margin: 0 auto;
}

.grid-overflow-hider-sorted-year{
	width: 90%; 
	overflow: hidden; 
	margin: 0 auto;
	display: none;
}

.grid-wrapper-sorted-year-2016
{
	width: 95%; 
	overflow: hidden; 
	margin: 0 auto;
}

.grid-wrapper-sorted-year-2014
{
	width: 95%; 
	overflow: hidden; 
	margin: 0 auto;
}

.grid-wrapper-sorted-year-2013
{
	width: 95%; 
	overflow: hidden; 
	margin: 0 auto;
}

.grid-wrapper-sorted-year-2012
{
	width: 95%; 
	overflow: hidden; 
	margin: 0 auto;
	}

/* ---- portfolio filter ---- */

.sort-portfolio-by-year
{
	height: 20px;
	margin-bottom: 20px;
}
#sort-portfolio-by-year-button
{
	cursor: pointer;
	width: 200px;
	text-decoration: underline;
}
#show-all-portfolio-button
{
	cursor: pointer;
	width: 200px;
	text-decoration: underline;
	display: none;
}

/* ---- mobile portfolio filter ---- */

.mobile-portfolio-selector {
	width: 100%;
}

.mobile-year-portfolio-sel-grid
{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
}

.mobile-year-portfolio-grid:after {
  content: '';
  display: block;
  clear: both;
}

.mobile-year-sel
{
	position: relative;
	width: 150px;
	height: 150px;
	border: 1px solid black;
	margin: 10px 10px 0px 10px;
	background-color: white;
	display: inline-block;
	cursor: pointer;
}

.year-num
{
	position: absolute;
	font-size: 26px;
	font-weight: 300;
	right: 10px;
	top: 0px;
}


.mob-grid-wrapper-sorted-year-2019
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid-wrapper-sorted-year-2018
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid-wrapper-sorted-year-2017
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid-wrapper-sorted-year-2016
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid-wrapper-sorted-year-2015
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid-wrapper-sorted-year-2014
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid-wrapper-sorted-year-2013
{
	width: 100%; 
	margin: 0 auto;
	line-height: 0;
}

.mob-grid
{
	max-width: 100%;
	text-align: center;
	background: white;
}

.element-end
{
	display: inline-block;
	height: 150px;
	width: 150px;
	border: 1px solid black;
	margin-top: 30px;
	margin-left: 10px;
	cursor: pointer;
	background: white;
	clear: both;
}

.mob-portfolio-year-back
{
	color: #505050;
	font-size: 26px;
	font-weight: 300;
	position: absolute;
	margin-top: 126px;
	margin-left: 87px;
}

.mob-grid-item
{
	display: inline-block;
	background: white;
	width: 100%;
	overflow: hidden;
}


/* ---- portfolio blurbs ---- */
.portfolio-text-wrapper
{
	position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	background-color: rgba(0, 0, 0, 0);
	
	/*
	-webkit-transition: color 300ms ease-in-out;
	-moz-transition: color 300ms ease-in-out;
	-ms-transition: color 300ms ease-in-out;
	-o-transition: color 300ms ease-in-out;
	transition:  color 300ms ease-in-out;
	*/
}

.portfolio-text
{
	margin-top: 75px;
	background-color: rgba(255, 255, 255, 1);
	padding-top: 29px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	display: inline-block;
	font-size: 16px;
	text-align: center;
	vertical-align: bottom;
	opacity: 0;
}

.portfolio-text-title
{
	font-weight: bold;
}
.portfolio-text-subtitle
{
	font-weight: normal;
}

.portfolio-overlay
{

}

.portfolio-side-text-wrapper
{
	position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	background: #686868;
	opacity: 0;
}

.portfolio-side-text
{
	padding-top: 15px;
	text-align: top;
	height: 100%;
	width: 50px;
	font-size: 16px;
	background: black;
	color: white;
}

.portfolio-side-text-title
{
	font-weight: bold;
}

.portfolio-side-text-subtitle
{
	font-weight: normal;
}

.portfolio-mob-text-wrapper
{
	position: absolute;
	height: 376px;
	width: 100%;
	text-align: center;
	background-color: rgba(0, 0, 0, 0)
}

.portfolio-mob-text
{
	margin-top: 75px;
	background: white;
	padding-top: 29px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	display: inline-block;
	font-size: 16px;
	text-align: center;
	vertical-align: bottom;
	line-height: 1.4;
	opacity: 0;
}

.portfolio-mob-text-title
{
	font-weight: bold;
}
.portfolio-mob-text-subtitle
{
	font-weight: normal;
}