body {background:#6F797B;background:#6EA5C4;background:#93BBC1;background:#CFD4D7;font-size:16px;line-height:1.75em}
.relative {position:relative}
#menu {background:#CFD4D7;width:100%;z-index:1;margin:0px auto;padding-top:2.5em;position:fixed;top:0}
#menu > div {width:100%;margin:auto;max-width:1000px}
#wrapper {width:94%;max-width:1000px;margin:0px auto;position:relative;padding-top:5em;padding-bottom:2.5em}
#contentWrapper {background:#fff;padding:0 50px}
#logo {padding:0;width:80%;float:left}
#logo a {color:#fff;font-size:280%;font-weight:700}
#logo a:hover {color:#333;text-decoration:none}
nav#nav {width:20%;float:right;text-align:right}
nav#nav button {
	color:#fff;
	background-color: Transparent;
	background-repeat:no-repeat;
	border: none;
	cursor:pointer;
	overflow: hidden;
	font-size:220%;padding:0;
	transform: translate(0,-.2em)
}
nav#nav button:hover {color:#333}
#sideBar {left:auto;right:3%;top:70px;position:fixed;max-width:250px;width:19%;display:none}
#content {padding:70px 0px}
.collections {vertical-align:baseline;font-size:100%;margin:0;padding:0}
.collectionsList {margin-left:-1.6667%;margin-right:-1.6667%;width:103.333%}
.collectionsList .project {float:left;margin-bottom:2em;margin-left:1.6129%;margin-right:1.6129%;width:30.1075%}

@media (max-width: 1140px) {
	.collectionsList .project {margin-left:2.4194%;margin-right:2.4194%;width:45.1613%}
}
@media (max-width: 800px) {
	#sideBar {position:static;margin:60px 0;padding:0 60px;width:100%;max-width:none}
	#wrapper {width:100%}
	#contentWrapper {width:100%;padding:0 50px}
	
}
@media (max-width: 500px) {
	.collectionsList .project {margin-left:0;margin-right:0;width:100%}
	#contentWrapper {padding:0 25px}

}
nav.sMenu ul {margin:0;padding:0;list-style:none}
nav.sMenu ul li {font-size:240%;margin-bottom:.3em}
nav.sMenu ul li a {color:#1d6b84}
nav.sMenu ul li a:hover {color:#fff;text-decoration:none}
.project a {position: relative;display:inline-block;width:100%;height:100%}
.project a .overlayT {
	opacity:0;
    position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	background:rgba(255,255,255,.9);
	text-shadow: 0px 0px 8px rgba(230, 255, 255, 0.95);
    color: #000;
	transition: all 0.3s ease;
}
.project a .overlayT .projDes {
	display:inline-block;
	vertical-align:middle;
	line-height:10em;
	font-size:19px;
	letter-spacing:0.1em;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight:700;
	max-width:90%;
	margin:0
}
.project a:hover .overlayT {opacity:1}

.projAssets img {margin-top:0em; margin-bottom:4em;}
p.oProj {display:block;margin:3em 0 2em 0}
/*
ul#Gallery {margin:0;padding:0;list-style:none}
ul#Gallery li {margin:0;padding:0}
*/
.projectDetail {text-align:center}
.projectDetail h1 {font-size:180%;font-weight:900;margin-bottom:1.5em}
.projectDetail .projDes {max-width:740px;display:block;margin:auto;text-align:justify}
.projectDetail .projDes p:last-child {margin-bottom:4em}
.projectDetail span.projHead {color:#B73436;color:#333;font-size:180%;font-weight:700;margin-bottom:.5em;padding:.8em;line-height:1em;display:block;text-align:center}
.projectDetail p {margin-bottom:1.5em}
.projectDetail p strong {font-weight:700}

.projInfo div {text-align:center;margin-right:3em}
.projInfo div em,
.projInfo div strong {display:inline-block;float:left;font-weight:500;font-style:normal;padding-right:1em}
.projInfo div em {text-align:right;width:15%;font-weight:900}
.projInfo div strong {text-align:left;width:85%;font-weight:400}
@media (min-width: 1400px) {
.projAssets .img-responsive {max-width:880px}
}
.projAssets img.wBorder {border:#E5E5E5 1px solid}
.oldAni {margin-left:10%;display:block}

.cc30Audio {margin-bottom:7em}
.cc30Audio > div {position:absolute;width:100%;height:auto;top:0;left:0;right:0;bottom:0;background:url(../img/cc30-wireless-mic-uses-1.jpg);background-repeat:none;background-size:contain;z-index:1;background-position: center}
.cc30Audio .row.feaSec {padding-top:2.5em;padding-bottom:4em}
.cc30Audio .audioText {background:url(../img/cc30-wireless-audio-white-bg.png) bottom center no-repeat;background-size:cover;font-style:italic;font-size:150%;color:#A8A8A8}
.cc30Audio .feaContent span.feaHeading {margin-bottom:3em}
.cc30Wide .showcase {background:url(../img/cc30-camera-wide-lens-2.jpg);background-position:top center;background-repeat:no-repeat}
.cc30Wide .showcase .toAni {width:30%;height:260px;margin:auto;background:url(../img/cc30-camera-wide-lens.jpg);background-position:top center;background-repeat:no-repeat}
@media (max-width: 480px) {
	.cc30 .cc30Wide .showcase .toAni {width:100%!important}
}
.cc30Wide .showcase .toAni.money {background-image:url(../img/cc30-camera-wide-lens-70.jpg)}
.cc30Wide .showcase + div {text-align:center}
@keyframes widen {
    0%   {width:30%}
    100% {width:100%}
}
/* The element to apply the animation to */
.toAni.triggered {
    animation-name: widen;
    animation-delay: 0s;
    animation-duration: 1.2s;
	 animation-fill-mode: forwards;
	 -webkit-animation-timing-function: ease-out;
	 animation-timing-function:ease-out;
	}
@keyframes show70 {
    0%   {width:100%}
    100% {width:30%}
}
/* The element to apply the animation to */
.toAni.money {
    animation-name: show70;
    animation-delay: 0s;
    animation-duration: .5s;
	 animation-fill-mode: forwards;
	 -webkit-animation-timing-function: ease-out;
	 animation-timing-function:ease-out;
}
.cc30 .comBtn {padding:.3em 0;color:#9f2f20;padding:.3em .6em;font-size:90%;border-radius:8px;background:#f4f4f4}
.cc30 .comBtn:hover {color:#f58220;cursor:pointer}
.cc30Wide + div  {margin-bottom:7em}