html { position: relative; min-height: 100%; }
body
{
	margin-bottom: 80px;
	background: #ddd;
	color: #555;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

h1 { font-family: 'Roboto', sans-serif; font-size: 42px; font-weight: 300; color: #333; text-shadow: 2px 2px 8px #bbb; }
h2 { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 300; color: #444; text-shadow: 1px 1px 8px #ccc; }
h3 { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 300; color: #555; text-shadow: 1px 1px 4px #ddd; }
h4 { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; color: #666; text-shadow: 1px 1px 3px #eee; }

a:hover, a:visited, a:link, a:active { text-decoration: none; }
a.hidelink { text-decoration: none; color: inherit; }

p { text-decoration: none; color: #555; }

.clearfix { overflow: auto; zoom: 1; }

.navbar { margin-bottom: 0px; font-size: 16px; }
.navbar a#navbtn { padding: 10px 15px; }
.navbar-collapse { max-height: none; }

.title { margin-top: 4px; }

#wrapper
{
	background-color: #fff;
	box-shadow: 0 0 16px #888;
}
#wrapper-content
{
	padding: 15px;
}
#wrapper-push
{
	xxxbackground-color: #bbb;
}

#footer
{
	position: absolute;
	width: 100%;
	height: 80px;
	bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #222;
	color: #999;
	font-size: 10px;
}
.footer-icon { opacity: 0.3; filter: alpha(opacity=30); }
.footer-icon:hover { opacity: 1.0; filter: alpha(opacity=100); }
.footer-button { opacity: 0.5; filter: alpha(opacity=50); width: 64px; }
.footer-button:hover { opacity: 1.0; filter: alpha(opacity=100); }
#footer .pull-right	{ margin: 8px; }
@media (max-width: 991px) {	#footer .pull-right	{ display: none; } }

.modal-header,.modal-footer { padding-top: 8px; padding-bottom: 8px; }
.modal-title { font-family: 'Roboto', sans-serif; font-size: 28px; color: #222; }
.modal-body { font-size: 12px; }
#popupTitle { text-transform: uppercase; }

.carousel-control { width: 5%; }
.glyphicon { opacity: 0.5; filter: alpha(opacity=50); }
.carousel-control.left { background-image: none; }
.carousel-control.right { background-image: none; }

.popthumb-wrap { text-align: center; }
.popthumb-box { position: relative; display: inline-block; 	cursor: pointer; width: 250px; margin: 8px; box-shadow: 2px 2px 8px #aaa; }
@media (max-width: 1200px) { .popthumb-box { width: 200px; margin: 6px;} }
@media (max-width: 768px) {	.popthumb-box { width: 100px; margin: 4px;} }
.myPicPopup-Inner img { width: 100%; }
.myPicPopup-description { text-align: left; padding-top: 5px; padding-bottom: 5px;font-size: 16px; color: #222; }

.btn-list { margin-top: 2px; margin-bottom: 2px;}

.row.row-multi { margin-left: -30px; margin-right: -30px; }
.row.row-latest { text-align: center; }

.row-banner
{
	background-color: #F9C205;
	color: #543;
	text-align: center;
	text-shadow: 0px 0px 24px #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 28px;
	padding: 4px;
	margin-top: 12px;
	margin-bottom: 20px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

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

.col-panel p { font-size: 15px; text-align: justify; }
.col-panel h3
{
	background-color: #ddd;
	color: #333;
	text-shadow: 0px 0px 12px #666;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: Normal;
	font-size: 28px;
	padding: 8px 6px 8px 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.col-box
{
	margin: 8px 0px;
	padding: 15px;
	background-color: #ddd;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.col-box h2 { margin-top: 0px; margin-bottom: 14px; text-shadow: 0px 0px 8px #666; line-height: 0.8; }
.col-portfolio { text-align: center; }
.col-clients { text-align: center; }
.col-services { margin-bottom: 16px; }
.box-round { box-shadow: 4px 4px 8px #ddd; margin-bottom: 16px; border-radius: 6px; }

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

.client-box
{
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin: 3px;
	box-shadow: 2px 2px 5px #aaa;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}
.client-box:hover
{
	z-index: 1;
	transform: scale(1.5) rotate(3deg);
	-webkit-transform: scale(1.5) rotate(3deg);
	-ms-transform: scale(1.5) rotate(3deg);
}
.client-tint
{
	position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(30deg, rgba(0,0,0,0.0), rgba(0,0,0,0.075));
}

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

.project-box
{
	position: relative;
	display: inline-block;
	width: 290px;
	margin: 8px 4px;
	box-shadow: 2px 2px 8px #888;
	text-align: left;
	cursor: pointer;
}

.project-box-homepage
{
	position: relative;
	display: inline-block;
	width: 265px;
	margin: 8px 4px;
	box-shadow: 2px 2px 8px #888;
	text-align: left;
	cursor: pointer;
}

.project-top
{
	position: relative;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
}
.project-btm
{
	padding: 1px 8px;
	background: #fff;
	text-align: left;
	font-size: 22px; color: #555; 
	text-shadow: #aaa 0px 0px 8px;
}
.project-tint
{
	position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.0) 60%,rgba(0,0,0,0.3) 100%);
}
.project-ovr
{
	display: none;
	position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	padding: 12px;
	background: -webkit-linear-gradient(#F0AC4B, #E38D13);
	background: linear-gradient(#F0AC4B, #E38D13);
	font-size: 15px; color: #fff;
}
.project-ovr h4 { font-size: 20px; font-weight: 300; margin: 0px 0px 12px 0px; color: #444; text-shadow: 1px 1px 3px #aaa;}

.project-arrow
{
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 22px;
	height: 22px;
	background-image: url('../ico/navigation.png');
}
.project-trophy
{
	position: absolute;
	right: 7px;
	bottom: 2px;
	width: 28px;
	height: 28px;
	background-image: url('../ico/trophy.png');
}
.project-first1
{
	position: absolute;
	right: 7px;
	bottom: 2px;
	width: 28px;
	height: 28px;
	background-image: url('../ico/first.png');
}
.project-first2
{
	position: absolute;
	right: 36px;
	bottom: 2px;
	width: 28px;
	height: 28px;
	background-image: url('../ico/first.png');
}

@media (max-width: 1200px) { .project-box,.project-box-homepage { width: 215px; margin: 8px 4px; } .project-btm { font-size: 14px; } .project-ovr { font-size: 11px; } .project-ovr h4 { font-size: 14px; } }
@media (max-width: 979px) {	.project-box,.project-box-homepage { width: 270px; margin: 8px 8px; } .project-btm { font-size: 22px; } .project-ovr { font-size: 15px; } .project-ovr h4 { font-size: 20px; } }
@media (max-width: 768px) {	.project-box,.project-box-homepage { width: 250px; margin: 8px 2px; } .project-btm { font-size: 20px; } .project-ovr { font-size: 14px; } .project-ovr h4 { font-size: 16px; } }

@media (max-width: 979px) {	.portfolio-thanks { display: none; } }

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

.archive-box
{
	position: relative;
	display: inline-block;
	width: 174px;
	height: 130px;
	margin: 0px 8px 2px 0px;
	box-shadow: 2px 2px 8px #888;
	text-align: left;
	cursor: pointer;
}
.archive-mask
{
	position: absolute;
    top: 0px;
    left: 0px;
	width: 174px;
	height: 130px;
}
.archive-mask:hover
{
	opacity: 0.0;
    filter: alpha(opacity=0);
}
.archive-img
{
	position: absolute;
    top: 0px;
    left: 0px;
	width: 174px;
	height: 130px;
}
.archive-ovr
{
	position: absolute;
    bottom: 0px;
    left: 4px;
	width: 100%;
	font-size: 10px; color: #fff;
	text-shadow:
    -2px -2px 4px #000,
    2px -2px 4px #000,
    -2px 2px 4px #000,
    2px 2px 4px #000;
}

.popupArchive
{
	text-align: center;
}
.popupArchive img
{
	width: 100%;
	height: auto;
}

#groupDateSelect { vertical-align:top; margin-right: 16px; }
#groupMaskSelect { vertical-align:top; }