/*updated 07302024*/
@charset "utf-8";
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
ol,
ul {
    list-style: none
}
blockquote,
q {
    quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
.hidden {
    display: none
}
.shown {
    display: block
}
.introHide,
.mainImgContainer {
    display: none
}
.clear-left {
    clear: left
}
.clear-both {
    clear: both
}
a.current {
    color: rgba(0, 0, 0, .5)
}
intro ul.buttonList {
    margin: 0 auto
}
li button {
    float: left
}
li:first-child button {
    margin-right: 24px
}
html {
    overflow-y: scroll;
    overflow-x: hidden
}
body {
	font-family: interstate, sans-serif;
	font-style: normal;
/* 	font-weight: 100;     */
	font-size: 16px;
    line-height: 1.5rem;
    color: #666;
    width: 100%;
    padding: 0;
    margin: 0
}
em {
    font-weight: 700
}
/* color */
.black {color:#000000!important}
.charcoal {color:#333333!important}
.white {color:#ffffff!important}
.lightGrey {color:#f5f5f5!important}
.tcaCopyGrey {color:#4E4A41!important}
.refBlue {color:#001EFF!important}
.lightBlue {color:#9aa1ff!important}
/*bg color*/
.whiteBg {background-color:#ffffff!important}
.darkNavyBg {background-color:#163149!important}
.liteGrayBg {background-color:#e8e8e8!important}
.baBlueBg{background-color:#004299!important}
.paleGreyBg {background-color:#f5f5f5!important}
.midGreyBg {background-color:#e2e2e2!important}
.raBrownBg {background-color:#F4EEEE!important}
.blueGreyBg {background-color:#9fd2ec!important}
.cobaltBg {background-color:#042098!important}
.pplDarkBg {background-color:#1e2b5a!important}
/*pattern library*/
.clrGrid {margin:0!important;}
/*box*/

header {z-index:1!important; position: relative;}


.box {margin:0 auto 64px; width:80%; padding:48px; border-radius:4px; border:1px solid #f4f4f4;}
 @media only screen and (max-width:700px) {
 	.box {
		margin: 32px auto 32px;
		width: auto;
		max-width: 327px!important;
		padding: 0;
		border-radius: 4px;
		border: 1px solid #f4f4f4;
		}
 }
.box img { margin:0 auto; width:720px!important; }
.modal,body { height: 100%}
/*image*/
img.border { border: 1px solid #cccccc; }
#myImg,
.close {transition: .3s}
#myImg {cursor: pointer}
#myImg:hover {opacity: .7}
.anmShell-iph, .anmShell-iph-ca {
	width:276px;
	height:562px;
	margin:72px auto 72px;
	background:url(images/iPhone-240.png) no-repeat;
	background-size: contain;
	position:relative;
	}
.anmShell-iph.left {margin:72px 0 0 0!important;}
.anmShell-iph img {	position: absolute; top: 43px!important; left: 18px!important; height:428px!important}
.anmShell-iph-ca img {position: absolute; position: absolute; top: 43px; left: -6px; width:240px !important;}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, .9)
}
#caption,
.modal-content {
    margin: auto;
    width: 80%;
    max-width: 700px;
    display: block;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: .6s;
    animation-name: zoom;
    animation-duration: .6s
}
#caption {
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px
}
@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform: scale(1)
    }
}
@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: 700
}
.close:focus,
.close:hover {color: #bbb; text-decoration: none; cursor: pointer}
.blueBg {background-color:#004299; width:100%; height:auto}
/*text-align*/
.lAlign {text-align: left!important;}
p.lAlign {padding-left:0!important;}
.rAlign {text-align: right!important;}
.cAlign {text-align: center!important;}
/*clearfix*/
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
a.gbLink {color:#333333!important; text-decoration:underline!important; width:auto!important; max-width:375px; display:none;}
a.gbLink:hover {color:#666666!important; text-decoration:none;}
a.gbLink:visited {color:#333333!important; text-decoration:underline;}
/*ux area*/
@media only screen and (max-width:700px) {
	ul.ux {width:auto!important; max-width:100%; margin:0 auto!important}
}
@media only screen and (min-width:701px) and (max-width:970px) {
	ul.ux, ul.arp {width:100%!important; max-width:640px; margin:0 auto!important}
}
@media only screen and (min-width:971px) {
	ul.ux { width: 100%!important; max-width: 1480px; margin: 0 auto!important;}
	ul.arp {width: 100%!important; max-width: 970px; margin:0 auto!important;}
}
ul.ux li {width:33.333333333333%; float:left; position: relative!important;}
 ul.ux li:nth-child(odd) img, ul.ux li:nth-child(even) img {margin:24px 0; width:100%!important; height:auto; float:left;}
 @media only screen and (max-width:700px) {
 	ul.ux li {width:auto!important; max-width:100%; float:none!important; margin: 24px;}
	ul.ux li:nth-child(odd) img, ul.ux li:nth-child(even) img 
		{	 
	    max-width: 100%!important;
	    margin: 12px 0 12px;
	    height: auto!important;
	    float: left;
		}
	}
	ul.ux li.full {width:100%; float:left; display:inline-block;}
	ul.ux li.tqtr {width:30%; margin:0 16px!important; float: left;}
	ul.ux li.half {width:15%; margin:0 16px!important; float: left;}	
	ul.ux li.qtar {width:7.5%; margin:0 16px!important; float: left;}	
	@media only screen and (min-width:971px) {
		ul.ux li.wide { width:1480px!important; margin:0 auto!important;}
	}	
 	@media only screen and (max-width:700px){
 		ul.ux li.wide {width:100%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.full {width:100%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.tqtr {width:100%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.half {width:100%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.qtar {width:100%; margin: 0 auto!important; padding:0; float: none; }
 	}
 	@media only screen and (min-width:701px) and (max-width:970px){
 		ul.ux li.wide {width:75%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.full {width:75%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.tqtr {width:75%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.half {width:75%; margin: 0 auto!important; padding:0; float: none; }
 		ul.ux li.qtar {width:75%; margin: 0 auto!important; padding:0; float: none; }
 	}
 	@media only screen and (min-width:971px){
 		ul.ux li.tqtr {width:75%; margin:0 auto!important; padding:0; float:none; display: block;}
 		ul.ux li.half {width:50%; margin:0 auto!important; padding:0; float:none; display: block;}
 		ul.ux li.qtar {width:25%; margin:0 auto!important; padding:0; float:none; display: block;}
 	}
/*  ul.ux li.half {width:50%; margin:24px auto!important; float: none;} */
 	@media only screen and (max-width:700px){
 		ul.ux li.half:nth-child(odd), ul.ux li.half:nth-child(even), {width:auto; max-width:100%; margin:24px auto!important; padding:0; float: none;}
 	}
 .fig_dark { background-color: rgba(0,0,0,.8)!important;
    padding: 8px 12px; margin: 8px; border-radius: 4px; font-size: 12px; line-height: 16px;
    color: #ffffff; text-align: left; width: auto; z-index: 1; position: absolute; }
.fig_lite {
    height:16px; background-color: rgba(255,255,255,.8)!important; padding: 8px 12px;
    border-radius: 4px; font-size: 12px; line-height: 16px; color: #333333;
    text-align: left; width: auto; z-index: 1; margin: 8px; position: absolute; }
   .t_right{bottom:24px!important; right:0!important;} /*top right*/
   .b_right{bottom:24px!important; right:0!important;} /*bottom right*/
   .b_left{bottom:24px!important; left:0!important;} /*bottom left*/
   .b_center{bottom:24px!important; left: 50%!important; transform: translateX(-50%)!important;}
   .b_centBtm{bottom:24px!important; left: 50%!important; transform: translateX(-50%)!important;}
@media only screen and (max-width:700px) {
   .t_right{top:140!important; right:0!important;} /*top right*/
   .b_right{top:140!important; right:0!important;} /*bottom right*/
   .b_left{top:140!important; left:0!important;} /*bottom left*/
   .b_center{top:140!important; left: 50%!important; transform: translateX(-50%)!important;}
   .b_centBtm{top:140!important; left: 50%!important; transform: translateX(-50%)!important;}
}
/*PL area*/
@media only screen and (max-width:700px) {
	ul.pl {
		width:auto;
		max-width:100%!important;
		padding:0 0 24px!important;
		height:460px!important;
	}
	.pl {
		width:auto;
		max-width:100%!important;
		padding:0 0 24px!important;
		height:460px!important;
	}
	.pl img {width:auto; max-width:100%; margin:0 auto;}
}
@media only screen and (min-width:701px) and (max-width:970px) {
		ul.pl {width:auto!important; height:182px; max-width:970px; margin:0 auto 72px!important}
		.pl {width:auto!important; max-width:970px; margin:0 auto 72px!important}
		.pl img {width:auto; max-width:100%; margin:0 auto;}
	}
@media only screen and (min-width:971px) {
		ul.pl {width:auto!important; height:182px; max-width:970px; margin:0 auto 72px!important}
		.pl {width:auto!important; max-width:970px; margin:0 auto 72px!important}
		.pl img {width:auto; max-width:100%; margin:0 auto;}
	}
@media only screen and (min-width:971px) {
		ul.pl li {float:none;}
}
	ul.pl li {width:33.333333333333%; float:left; display:inline-block; margin:0!important;}
@media only screen and (max-width:700px) {
		 ul.pl li {width:100%; float:none; display:block; margin:0!important;}
	}
 ul.pl li.full {width:100%; float:left; display:inline-block;}
 ul.pl li.tqtr {width:78%; margin:0 auto!important; float: none;}
 ul.pl li:nth-child(odd) img, ul.pl li:nth-child(even) img {
	 margin:0!important; width:100%!important; height:auto; float:left;
	 }
@media only screen and (max-width:700px) {
		ul.pl li:nth-child(odd) img, ul.pl li:nth-child(even) img {
    width: auto!important;
    height: auto;
    margin: 0;
    min-width: 100%;
    padding: 0;
    }
}
.pl-item {width: auto; max-width: 970px; margin: 24px auto 124px;}
.pl-item img { width:auto!important; max-width:970px; margin-bottom: 124px!important;}
@media only screen and (max-width:700px) {
	.pl-item img { margin-bottom: 48px!important;}
}
.pl-item h3 {margin-top:24px;}
@media only screen and (max-width:700px) {
.pl-item h3 {
	width:auto;
    max-width: 640px;
    margin: 12px auto 12px!important;
    font-size: 1rem!important;
    text-align: left;
    font-weight: 600;}
}
/*thumbnails listing*/
#ProjectListing { max-width:970px; margin:80px auto 0; }
@media only screen and (max-width:700px) { #ProjectListing { margin:40px auto 0!important;} }
@media only screen and (max-width:700px) { .modal-content {width: 100%} }
li.bul {
    list-style-type: disc
}
.discover {
    background: url(images/Discover-icon.svg) center no-repeat;
    background-size: contain
}

.generate {
    background: url(images/Generate-icon.svg) center no-repeat;
    background-size: contain
}

.experiment {
    background: url(images/Experiment-icon.svg) center no-repeat;
    background-size: contain
}

.define {
    background: url(images/Define-icon.svg) center no-repeat;
    background-size: contain
}

.deliver {
    background: url(images/Deliver-icon.svg) center no-repeat;
    background-size: contain
}

.strategy {
    background: url(images/Strategy-icon.svg) center no-repeat;
    background-size: contain
}


/*
.sketch {
    background: url(images/Sketch-icon.svg) center no-repeat;
    background-size: contain
}
.PS {
    background: url(images/PS-icon.svg) center no-repeat;
    background-size: contain
}

.FG {
    background: url(images/FG-icon.svg) center no-repeat;
    background-size: contain
}

.AI {
    background: url(images/AI-icon.svg) center no-repeat;
    background-size: contain
}

.AE {
    background: url(images/AE-icon.svg) center no-repeat;
    background-size: contain
}


.ID {
    background: url(images/ID-icon.svg) center no-repeat;
    background-size: contain
}
.AX {
    background: url(images/AX-icon.svg) center no-repeat;
    background-size: contain
}
.SH {
    background: url(images/SH-icon.svg) center no-repeat;
    background-size: contain
}
.PP {
    background: url(images/PPie-icon.svg) center no-repeat;
    background-size: contain
}
*/

.introShow {
    display: block
}
.tealBg {background-color:#109FB3 !important;}
.whiteBg {background-color:#ffffff !important;}
.offWhiteBg {background-color:#FBF5EA !important;}
.litetealBg {background-color:#30b5c8 !important;}
.liteblueBg {background-color:#D4F1F5 !important;}
.liteBlue {background-color:#E7F4FF!important;}
.baExecBlue{background-color:#004299!important;}
@media only screen and (max-width:700px) {
	.tealBg {background-color:#109FB3 !important; }
	.whiteBg {background-color:rgba(255, 255, 255, .1)!important; }
	.offWhiteBg {background-color:#FBF5EA !important;}
	.litetealBg {background-color:#30b5c8 !important;}
	.liteblueBg {background-color:#D4F1F5 !important;}
	.liteBlue {background-color:#E7F4FF!important;}
	.baExecBlue{background-color:#004299!important;}
}
@media only screen and (max-width:700px) {
    .intro p,
    .intro ul li,
    .introBtn a,
    .order,
    .sort a,
    h1,
    nav li a {
        text-align: center;
    }
    nav li a {
	    margin-top:24px!important;
        font-family: interstate, sans-serif;
        font-size:1.5rem;
        color: rgba(255,255,255,.7);
        text-decoration: none!important;
    }
    .intro p,
    h1, h2 {
		font-family: interstate, sans-serif;
		font-weight: 600;
    }
    .next.disabled,
    .Previous.disabled,
    .order a,
    .sort a,
    .sort a.selected,
    nav li a {
        text-decoration: none
    }
    .contentWrap, .wrap, section.social {
	    width:auto;
    }
    .myInfo,
    .sort,
    footer {
        clear: both
    }
    .mainImgContainer {
        width: 180px;
        height: 567px;
        position: absolute;
        top: 190px;
        left: 0;
        right: 0;
        margin: 0 auto
    }
    .mainContent li img,
    .mainImg {width: 100%}
    .mainImg {height: 90%}
    header .wrap {width: 280px; margin: 0 auto}
    .intro {display: block; margin-top: 40px}
    .intro p {
	    padding: 16px 0 32px;
	    width: 275px;
	    color: #8BB1E4;
	    font-size: 22px;
	    font-weight: 400;
	    line-height: 2rem;
	    margin: 80px auto 20px;    
	    }
    .sort {
        margin: 64px 0 30px;
        clear:left;
    }
    .sort a {
        font-size: 20px;
        line-height: 40px;
        color: #216fc6;
        padding: 4px 0;
        display: block
    }
    .sort a.selected {
        color: #fff;
        background-color: #216fc6
    }
    .sort a.next.disabled,
    .sort a.Previous.disabled {
        color: #ccc;
        background: 0 0;
        text-decoration: none
    }
    .next.disabled,
    .Previous.disabled {
        color: #ccc
    }
    .hidden {
        display: none
    }
    .order {
        margin: 60px auto 0
    }
    .order a {
        font-size: 18px;
        color: #666;
        display: inline block;
        margin-right: 20px
    }
    .introBtn,
    .logo a,
    nav li a {
        display: block
    }
    h1 {
        font-size: 1.3rem;
        line-height: 2.15rem;
        color: #fff;
        margin: 0;
        padding: 12px
    }
    span.roles {
	    	font-size: 1.3rem!important;
    	}


    h2 {
		font-size: 1.45rem;
		margin: 16px auto 16px;
		width: auto;
		max-width: 100%;
		line-height: 2rem;
		display:inline-block;
        }
        
/*
    h2.brief {
	    font-size:1.125rem;
		font-family:interstate, sans-serif;
        font-weight:600;
		margin-left:0;
    }
*/
    
    h3 {
        line-height: 1.65rem;
		font-size: 1.45rem;
		font-weight: 600;
    }
    .logo a {
        text-indent: -9999px;
        background: url(images/logo.gif) no-repeat;
        background-size: 280px 100px;
        width: 280px;
        height: 100px;
        margin: 0 auto
    }
    .personaBox {
        background-color: #f2f2f2;
        padding: 16px;
        border-radius: 8px;
        min-height: 100px
    }
    .personaBox img {
        width: 120px;
        height: auto;
        display: block;
        margin: 0 auto 12px
    }
    .greyBox {
            background-color: #f2f2f2;
            margin: 0 0 56px;
            padding: 24px;
            min-height: 100px;
            height:auto;
            float:left;
            word-wrap: break-word;
        }
    .greyBox img {
            width: 240px;
            height: auto;
            margin:24px 24px 36px 0;
            display: block;
            float: left
    }
}
@media only screen and (max-width:970px) {
	footer {
	    font-size: 14px;
	    width: 100%;
	    height: 1000px;
	    color: rgb(102, 102, 102);
	    background-color:rgb(234, 238, 241);
	    padding: 24px 0px 0px !important;
		}
	.footerAbt {
		padding:0 24px;
		width: auto!important;
		text-align: center!important;
		float: none!important;
	}
	.footerAbt p {
	    font-size: 1.125rem;
	    line-height: 1.65rem;
	    margin: 8px 0px;
	}
	.footerAbt ul {
	    font-size: 1.125rem;
	    line-height: 2rem;
	    width: 210px;
	    margin: 16px auto 36px;
	}	
	.tools {    
		margin: 0 auto!important; 
		width: auto!important; 
		float: none!important;
		}
	}
	.ico {
	    display: block!important;
	    width: 120px!important;
	    height: 80px!important;
	    float: left!important;
	    margin: 12px auto 74px!important;
	}
	.ico span 
	{
		position: relative!important;
		top: 84px!important;
		line-height: 1.35rem!important;
		margin:0!important;
	}
	.rights {
		padding-top:0!important;
	    display: block;
	    float: left;
	    width: 100%;		
	}
	.greyBox img{
		width: auto!important;
		height: auto;
		margin: 0 24px;
		max-width: 100%!important;
		padding: 0;
    	}
	}
    nav {
        width: 280px;
        font-size: 24px;
        color: #2093d6;
        margin: 20px auto 72px
    }
    .bandContainer {
	    width:auto;
	    max-width:970px;
	    margin:100px auto 0;
	    margin-top:40px;
	    padding:0 24px 0;
    }
    .contentWrap,
    .wrap,
    nav li a,
    nav ul {
        margin: 0 auto
    }
    nav ul {
        width: 100%;
    }
    nav li a {
        width: 50%;
        color: rgba(255,255,255,.7);
        float: left
    }
    nav li a:hover {
        text-decoration: underline
    }
    .contentWrap {
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%
    }
    .hello {
        width: 100%;
        height:auto;
        min-height: 360px;
        background-color: #07387a;
        margin: 0;
        position: relative
    }
    
    .hello404 {
        width: 100%;
        height:auto;
        min-height: 180px;
        background-color: #07387a;
        margin: 0;
        position: relative
}
    
    .introBtn {
        margin: 12px auto;
        width: 170px;
        border-radius: 12px;
        border: 2px solid #fff;
		font-family: interstate, sans-serif;
        background-color: rgba(255, 255, 255, .2);
        padding: 16px
    }
    .introBtn a {
        color: #fff;
        text-decoration: none;
        font-size: 1.5rem;
        width: 160px;
        height: 80px
    }
    .intro ul {
        width: 160px;
        margin: 0 auto
    }
    .intro ul li {
	    display:none;
        overflow: hidden;
        width: 280px
    }
    .intro li img {
        width: 90%
    }
    .intro div.overlay {
        font-size: 14px;
        line-height: 28px;
        color: #fff;
        background: rgba(0, 0, 0, .9);
        width: 92%;
        padding: 4%;
        position: absolute;
        bottom: 0
    }
    .intro div.overlay p.desc {
        width: auto
    }
    .personaBox {
        margin: 24px auto
    }
    .gridArea ul {
        width: 280px;
        overflow: hidden
    }
    .gridArea ul li {
        width: 280px
    }
    .gridArea ul li.oneCol {
        width: 280px;
        margin: 12px auto
    }
    .gridArea Ul li img.sml {
        width: 194px;
        height: auto
    }
    .gridArea ul li.oneCol img {
        width: 100%;
        margin: 12px auto 24px
    }
    .gridArea ul li.twoCol {
        width: 280px
    }
	@media only screen and (max-width:700px) {
	        li.twoCol {
			max-width:100%!important;
/* 			padding:0 24px; */
		}     
	}
    .gridArea ul li.twoCol img {
        width: 80%
    }
    .gridArea li img {
        width: 40%
    }
    .gridArea ul li.LgCol {
        width: 280px;
        padding: 20px
    }
    .gridArea ul li.LgCol img {
        width: 100%
    }
    .project h1,
    .project h2,
    .project h3 {
        font-weight: 700;
        color: #3c3c3f;
        margin: 80px 0 20px
    }
    .project h1 {
        font-size: 24px
    }
    .project h2 {
        font-size: 18px
    }
    .project h3 {
        font-size: 16px
    }
    p.desc {
        margin-bottom: 20px;
        width: 280px
    }
    .projDetail {
        margin: 20px 0;
        font-size: 18px;
        line-height: 26px;
        color: #666
    }
    .projDetail em {
        font-weight: 700
    }
    ul.projectGrid {


    }
@media only screen and (max-width:700px) {
    ul.projectGrid {
		width:auto;
		max-width:100%;				        
    }
}

    .projItem {
        color: #fff;
        width: 280px;
        height: 280px;
        position: relative;
        overflow: hidden;
        margin:0 auto 20px;
    }

    ul.projectGrid li.projItem a {
/*         margin: 0 0 20px 20px; */
        width: 280px;
        height: 280px;
        background-color: #e0e0e0;
        display: inline-block
    }
    html.touch .projItem a div:before,
    ul.projectGrid li a .desc {
        display: none
    }
    .final img {
        width: 100%
    }
    .final a {
        color: #666;
        text-decoration: underline
    }
    .final ul li.oneCol img {
        width: 100%;
        margin: 12px auto
    }
    li.oneCol.gifAnm {
        width: 96%;
        margin-left: 4px
    }
    li.oneCol.gifAnm img {
        border: 1px solid #ddd
    }

    li.projItem a img {
        width: 280px;
        height: auto;
    }
    .projItem a img {
        color: #fff;
        background: rgba(0, 0, 0, .65);
        padding: 0;
        width: 92%;
        position: absolute;
        line-height: 24px;
        -webkit-transition: .35s ease-in-out;
        -webkit-transition: all .6s ease;
    }
    
    .projItem a:hover img {
		-webkit-transform: scale(1.06);    
		}
    
    .overlay h3 {
        color: #fff;
        font-size: 18px;
        font-weight: 500!important;
        text-align: left;
        margin-top: 0;
        padding-top: 0
    }

    .tools h3,
    footer h2,
    strong {
        font-weight: 700
    }
    .intro h2,
    footer {
        text-align: center;
		padding-top:72px!important;
    }
	.rights {
    padding-top: 72px!important;
    display: block;
    float: left;
    width: 100%;	
    }
    .myInfo {
        background-color: #e0e0e0;
        background-position: initial initial;
        background-repeat: initial initial;
        margin: 30px auto 0;
        height: auto
    }
    .myInfo section {
        width: 280px;
        width: 100%;
        margin: 0;
        padding: 30px 0
    }
    section.about p {
        margin: 0 0 20px;
        font-size: 18px;
        line-height: 32px;
        color: #666;
        width: 100%
    }
    section.social {
        width: 100%;
        margin: 0 auto
    }
    .social {
        margin: 0;
        width: 280px
    }
    .social ul {
        margin: 0 auto;
        width: 280px
    }
    a.flickr,
    a.linkedin,
    a.noun,
    a.twitter {
        margin-right: 34.67px;
        float: left
    }
    a.behance,
    a.flickr,
    a.linkedin,
    a.noun,
    a.twitter {
        text-indent: -9999px;
        display: inline-block;
        width: 44px;
        height: 44px
    }
    .social ul li a {
        list-style: none;
        display: inline-block
    }
    a.twitter {
        background: url(images/Twitter.png) no-repeat;
        background-size: 44px auto
    }
    a.flickr {
        background: url(images/Flickr.png) no-repeat;
        background-size: 44px auto
    }
    a.noun {
        background: url(images/Nouns.png) no-repeat;
        background-size: 44px auto
    }
    a.linkedin {
        background: url(images/Linkedin.png) no-repeat;
        background-size: 44px auto
    }
    a.behance {
        background: url(images/Behance.png) no-repeat;
        background-size: 44px auto
    }
    .intro h2 {
		font-family: interstate, sans-serif;
        color: #fff;
        font-size: 1.5rem;
        line-height: 2rem;
        margin-top: 32px
    }
    .intro .tools ul {
        color: #fff;
        width: 280px;
        margin: 12px auto;
        padding: 12px 0;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff
    }
    .ico {
        display: block;
/*         width: 100px; */
        height: 80px;
        margin: 12px 20px 74px;
        float: left
    }
    footer.aboutMeFooter {
        margin: 32px auto 0;
        height: 36px;
        color: #fff
    }
    .footerAbt p {
        font-size: 1.125rem;
        line-height: 1.65rem;
        margin: 8px 0
    }
    .footerAbt ul {
/*
        font-size: 1.125rem;
        line-height: 2rem;
        margin: 16px auto 36px;
        width: 210px
*/
    }
    .footerAbt li {
        text-indent: 8px
    }
    .footerAbt ul li a {
    margin: 12px auto;
    height: 50px;
    color: #216fc6;
    text-decoration: none;
    display: block;
    text-align: left;
    width: 250px;
    text-indent: 40px;
    }
    li.pf-ico {
        width: 200px;
        background: url(images/Pf-logo.svg) no-repeat;
        height: 2rem;
        background-size: contain
    }
    li.linkedIn-ico {
        width: 160px;
        background: url(images/linkedin-logo.svg) no-repeat;
        height: 2rem;
        background-size: contain
    }
	span.roles { font-size: 1.5rem;}
    body.aboutMe { background-color: #4B97FA;}
@media only screen and (max-width:700px){
		.abstract .oneCol {
		width:auto!important;
		max-width: 100%!important;
		margin:0 auto;
		padding:24px;
	}
}
/*Desktop Small*/
@media only screen and (min-width:701px) and (max-width:970px) {
    header {z-index:1!important;}
    .intro p,
    h1,h2,h3 {font-family: interstate, sans-serif;}
    span.roles { font-size:1.5rem; }
    .greyBox img,.intro p,.introBtn,.logo a {display: block}
    .greyBox {
	    width:100%;
        background-color: #f2f2f2;
        margin: 0 0 56px;
        padding: 24px 16px 24px;
        min-height: 100px;
        height:auto;
        float:left
    }
    .greyBox img {
            width: 122px;
            margin-top: 24px;
            margin-right: 24px;
            margin-bottom: 36px;
            height: auto;
            display: block;
            float: left
    }
    img.bmag-od {
	    width:603px !important;
	    height:auto;
    }
    .CE-cards {
	    display:none;
    }
    img.bmag-od {
	    width:600px; 
	    height:auto
	}
    h1,h2 {font-size: 1.4rem}
    h2,h3 {color: #666}
    .intro p,
    .introBtn a,
    h1 {
        color: #fff;
        text-align: center
    }
    .logo a,
    a.twitter {
        text-indent: -9999px
    }
    .introBtn a,
    .order a {
        text-decoration: none
    }
    body.aboutMe {
        height: 100%!important;
        background-color: #4B97FA
    }
    .mainImgContainer {
        width: 180px;
        height: 365px;
        position: absolute;
        top: 116px;
        left: 0;
        right: 0;
        margin: 0 auto
    }
    .mainImg {
        width: 100%;
        height: 90%
    }
    header .wrap {
        width: 640px;
        margin: 0 auto
        z-index:1;
    }
    h1 {
        line-height: 2.25rem;
        margin: 0;
        padding: 14px
    }
    
    h2 {
		font-size: 1.45rem;
		font-weight:600!important;
		margin-top: 24px;
		margin-bottom: 16px;
		margin: 24px auto 16px;
/* 		padding:24px; */
		width: auto;
		max-width: 100%;
		line-height: 2rem;
    }
    
    .intro p {
        padding-top: 40px;
        color:#8BB1E4;
        font-size: 22px;
        clear: both;
        font-weight: 400;
        line-height: 1.8rem
    }
    .introBtn {
        margin: 50px auto;
        border-radius: 8px;
        border: 2px solid #fff;
        background-color: rgba(255, 255, 255, .2);
        padding: 12px
    }
    .introBtn a {	
	font-family: interstate, sans-serif;
        font-size: 1.5rem;
        width: 160px;
        height: 80px
    }
    .hello {
        width: 100%;
        height: 264px;
        background-color: #07387a;
        background-repeat: no-repeat;
        margin: 0;
        position: relative
    }
    .logo a {
        background: url(images/logo.gif) no-repeat;
        background-size: 276px 98px;
        width: 276px;
        height: 98px;
        float: left
    }
    .sort a {
        padding: 4px 8px;
        display: inline-block
    }
    .sort a.next.disabled,
    .sort a.Previous.disabled {
        color: #ccc;
        background: 0 0
    }
    .order {
        text-align: left;
        margin: 60px 0 30px
    }
    .order a {
        font-size: 20px;
        color: #666;
        display: inline block;
        margin-right: 10px
    }
    .PBdesc,
    .personaBox img,
    nav,
    nav li a {
        display: block
    }
    .order a:hover {
        text-decoration: underline
    }
    nav {
        width: 300px;
        padding-top: 40px;
        font-size: 24px;
        float: right
    }
    nav li a {
        width: 44%;
        color: rgba(255,255,255,.7);
        margin-left: 10px;
        text-decoration: none;
        float: left
    }
    .final a,
    nav li a:hover {
        text-decoration: underline
    }
    .wrap {
        margin: 0 auto;
        max-width: 640px
    }
    .contentWrap {
        margin: 0 auto;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
/*         max-width: 640px; */
        width: 100%
    }
    .personaBox img {
        width: 120px;
        margin-top: 24px;
        margin-right: 24px;
        margin-bottom: 32px;
        height: auto;
        float: left
    }
    .personaBox {
        background-color: #f2f2f2;
        margin: 16px 0;
        padding: 16px;
        border-radius: 8px;
        min-height: 100px
    }
    .greyBox img {
        width: 240px;
        margin-top: 24px;
        margin-right: 24px;
        margin-bottom: 36px;
        height: auto;
        float: left
    }
    .greyBox {
        background-color: #f2f2f2;
        width:100%;
        margin: 0;
        padding: 24px 16px 24px;
        min-height: 100px;
        height:auto;
        float:left
    }
    .PBdesc {
        width: 600px;
        margin-left: 8px
    }
    .intro ul {
        width: 348px;
        margin: 0 auto;
        display:none;
    }
    .intro ul li {
        width: 640px;
        text-align: center
    }
    .intro ul li.twoCol {
        float: left;
        width: 320px
    }
    .intro ul li.twoCol img {
        width: 80%
    }
    .intro li img {
        width: 40%
    }
    .intro div.overlay {
        font-size: 18px;
        line-height: 30px;
        color: #fff;
        background-color: rgba(45, 45, 45, .9);
        width: 92%;
        padding: 4%;
        position: absolute;
        bottom: 0
    }
    .intro div.overlay p.desc {
        width: auto;
        font-size: 20px!important;
        line-height: 30px!important
    }
    .mainContent ul {
		width: auto!important;
		margin: 24px auto 48px;
		padding: 0 44px;
        }
    .mainContent ul li.oneCol {
        width: 46.37%;
    }
    .mainContent ul li:nth-child(odd).oneCol {
        width: 46.37%;
        float: left
    }
    .mainContent ul li:nth-child(even).oneCol {
        width: 46.37%;
        margin-left: 24px
    }
    .mainContent ul li.twoCol {
        width: 100%
    }
    .mainContent li.oneCol {
        float: left
    }
    .mainContent li:nth-child(odd) img {
        width: 100%;
        float: left;
        margin-bottom: 24px
    }
    .mainContent li:nth-child(even) img {
        width: 100%;
        margin-bottom: 24px
    }
    .gridArea {
        width: 100%;
        clear: left
    }
    .gridArea ul {
        width: 640px
    }
    .gridArea ul li.oneCol {
        width: 46.37%;
    }
    .gridArea ul li:nth-child(odd).oneCol {
        width: 46.37%;
        float: left
    }
    .gridArea ul li:nth-child(even).oneCol {
        width: 46.37%;
        margin-left: 24px
    }
    .gridArea ul li.twoCol {
        width: 100%
    }
    .gridArea li.oneCol {
        float: left
    }
    .gridArea li:nth-child(odd) img {
        width: 100%;
        float: left;
        margin-bottom: 24px
    }
    .gridArea li:nth-child(even) img {
        width: 100%;
        margin-bottom: 24px
    }
    .gridArea h2,
    .gridArea h4 {
        margin-bottom: 12px
    }
    .gridArea h3 {
        margin-top: 32px;
		font-size: 1.45rem;
        line-height: 2.5rem;
        padding-bottom: 12px
    }
    .gridArea ul li img.sml {
        width: 160px;
        display: block;
        float: left;
        margin-right: 24px
    }
    .final {
        margin-top: 48px;
        clear: both
    }
    .final a {
        color: #666
    }
    .final img {
        width: 100%
    }
    .final ul li.oneCol img {
        width: 24%;
        float: left;
        margin-top: 12px;
        margin-left: 1.3333%;
        margin-bottom: 1.3333%
    }
    .final ul li:nth-child(1).oneCol img,
    .final ul li:nth-child(5).oneCol img {
        width: 24%;
        float: left;
        margin-left: 0;
        clear: left
    }
    .myInfo,
    .tools,
    footer {
        clear: both
    }
    li.oneCol.gifAnm {
        width: 96%;
        margin-left: 4px
    }
    li.oneCol.gifAnm img {
        border: 1px solid #ddd
    }
    #projNav.sort {
        text-align: center;
        margin: 32px 0 0;
        clear:both
    }
    .sort a {
        color: #216fc6;
        text-decoration: none
    }
    .sort a:hover.next.disabled,
    .sort a:hover.Previous.disabled {
        color: #ccc;
        background: 0 0
    }
    .next.disabled,
    .Previous.disabled {
        color: #ccc
    }
    p.desc {
        margin-bottom: 20px;
        width: 640px
    }
    .projDetail {
        margin: 20px 0;
        font-size: 24px;
        line-height: 36px;
        color: #666
    }
    #ProjectDetails p {
        margin-top: 12px;
        margin-bottom: 12px;
        max-width: 900px
    }
    .projDetail em {
        font-weight: 700
    }
    ul.projectGrid {
        text-align: justify;
/*         margin: 0 0 0 -40px; */
        padding: 0
    }
    ul.projectGrid li.projItem a {
        margin: 0 0 20px 20px;
        width: 310px;
        height: 310px;
        float: left;
        background-color: #e0e0e0;
        display: inline-block
    }
    html.touch .projItem a div:before,
    ul.projectGrid li a .desc {
        display: none
    }
    .projItem {
        margin-left: 36px;
        margin-bottom: 20px;
        color: #fff;
        width: 320px;
        height: 310px;
        float: left;
        position: relative;
        overflow: hidden
    }
    li.projItem a img {
        width: 310px;
        height: auto;
        border: 1px solid rgba(226, 226, 226, .5)
    }
    .projItem a div.overlay {
        color: #fff;
        background: rgba(0, 0, 0, .9);
        padding: 4%;
        width: 92%;
        position: absolute;
        line-height: 24px;
        opacity: 0;
        -webkit-transition: opacity .35s ease-in-out;
        -webkit-transition: all .6s ease;
        bottom: -80px
    }
    .projItem a:hover div,
    html.touch .projItem a div {
        opacity: .9;
        bottom: 0
    }
    .overlay h3 {
        color: #ffffff;
		font-size: 1rem;
        font-weight: 600;
        text-align: left;
        margin-top: 0;
        padding-top: 0
    }
    .footerAbt h2,
    .tools h3,
    strong {
        font-weight: 700
    }
    .myInfo {
        width: 100%;
        height: 400px;
        background-color: #e0e0e0;
        background-position: initial initial;
        background-repeat: initial initial;
        margin: 30px auto 0
    }
    .myInfo section {
        width: 640px;
        margin: 0;
        padding: 30px 0
    }
    section.about {
        width: 640px;
        height: auto
    }
    section.about p {
        margin: 0 0 20px;
        width: 640px;
        font-size: 20px;
        line-height: 38px;
        color: #666
    }
    section.social {
        margin: 0 auto;
        width: 640px
    }
    section.social ul {
        width: 330px;
        margin: 0 auto
    }
    .social ul li {
        list-style: none;
        display: block
    }
    .social ul li a {
        margin: 0 20px 10px 0
    }
    a.twitter {
        display: block;
        width: 60px;
        height: 60;
        background: url(images/Twitter.png) no-repeat;
        background-size: 60px auto
    }
    a.behance,
    a.flickr,
    a.linkedin,
    a.noun {
        text-indent: -9999px;
        width: 60px;
        height: 60px
    }
    a.flickr {
        display: block;
        background: url(images/Flickr.png) no-repeat;
        background-size: 60px auto
    }
    a.noun {
        display: inline-block;
        margin-right: 34.67px;
        background: url(images/Nouns.png) no-repeat;
        background-size: 60px auto;
        float: left
    }
    .ico,
    a.behance,
    a.linkedin {
        display: block
    }
    a.linkedin {
        background: url(images/Linkedin.png) no-repeat;
        background-size: 60px auto
    }
    a.behance {
        background: url(images/Behance.png) no-repeat;
        background-size: 60px auto
    }
    footer {
        font-size: 16px;
        text-align: center;
        width: 100%;
        padding: 30px 0;
        color: #666;
        background-color:#eaeef1;
        background-position: initial initial;
        background-repeat: initial initial
    }
    .footerAbt {
        width: 500px;
        margin: 0 auto
    }
    .footerAbt p {
        font-size: 1.125rem;
        line-height: 1.65rem;
        margin: 8px 0
    }
    .footerAbt ul {
        font-size: 1.125rem;
        line-height: 2rem;
		margin: 36px 0 96px;
        width: 500px
    }
    .footerAbt li {
        text-indent: 8px
    }
    .footerAbt ul li a {
        height: 50px;
        color: #216fc6;
        text-decoration: none;
        display: block;
        text-align: left;
        text-indent: 2.25rem
    }
    li.pf-ico {
        width: 200px;
        float: left;
        background: url(images/Pf-logo.svg) no-repeat;
        height: 2rem;
        background-size: contain
    }
    li.linkedIn-ico {
        width: 160px;
        float: right;
        background: url(images/linkedin-logo.svg) no-repeat;
        height: 2rem;
        background-size: contain
    }
    footer.aboutMeFooter {
        margin: 32px auto 0;
        height: 36px;
        color: #fff
    }
    .intro h2 {
	    font-family: interstate, sans-serif;
        color: #fff;
        font-size: 2rem;
        line-height: 2.65rem;
        text-align: center;
        margin-top: 48px
    }
    .intro .tools ul {
        color: #fff;
        width: 594px;
        margin: 12px auto;
        padding: 12px 0 32px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        overflow: hidden
    }
    .ico {
        width: 160px;
        height: 80px;
        margin: 24px 21px 64px 32px;
        float: left
    }
    .ico span {
        position: relative;
        top: 84px;
        line-height: 1.36rem
    }
    .bandContainer {
	    width: auto;
	    margin:40px auto 0;
		padding: 0 24px 0;
  	}
}
/*Desktop Large*/
@media only screen and (min-width:971px) {
    header {z-index:100!important; position: relative!important;}
    .introBtn a,
    .order a,
    .sort a,
    .sort a.next,
    .sort a.Previous,
    .sort a>Back,
    button.introBtn,
    nav li a,
    nav li a:hover {
        text-decoration: none
    }
    .contentWrap,
    .intro p {
        clear: both;
        padding: 0
    }
    .intro h2,
    .intro p,
    .introBtn a,
    h1 {
		font-family: interstate, sans-serif;
		    }
	span.roles {
		font-size: 1.5rem;
	}
    body.aboutMe {
        height: 100%!important;
        background-color: #4B97FA
    }
    .bandContainer {
	    width: auto;
	    max-width:970px;
	    margin:40px auto 0;
		padding: 0 24px 0;
		position: relative;
		z-index: 10;
      	}
    .mainImgContainer {
        width: 250px;
        height: 508px;
        position: absolute;
        top: 120px;
        left: 0;
        right: 0;
        margin: 0 auto
    }
    .mainImg {
        width: 100%;
        height: 90%
    }
    .gridArea img.sml {
        width: 194px;
        display: block;
        float: left;
        margin-right: 24px
    }
    header .wrap {
        width: 970px
    }
    .wrap {
        margin: 0 auto;
        max-width: 970px
    }
    .logo a {
        display: block;
        text-indent: -9999px;
        background: url(images/logo.gif) no-repeat;
        background-size: 276px 98px;
        width: 276px;
        height: 98px
    }
    h1 {
        font-size: 2rem;
        line-height: 2.65rem;
        font-weight: 100;
        color: #fff;
        margin: 0;
        padding: 16px;
        text-align: center
    }
    .sort {
        width: 410px;
        left: 0;
        right: 0;
        margin:48px auto 0;
        padding:72px 0;
        clear:left;
    }
    .next.disabled,
    .sort a.Home,
    .sort a.next {
        margin-left: 24px
    }
    .Previous.disabled,
    .sort a.Previous,
    .sort a>Back {
        margin-right: 24px
    }
    .sort a {
        color: #216fc6
    }
    .next.disabled,
    .Previous.disabled,
    .sort a:hover.next.disabled,
    .sort a:hover.Previous.disabled {
        color: #ccc;
        text-decoration: none
    }
    .sort a:hover.Previous.disabled {
        background: 0 0;
        margin-right: 24px
    }
    .sort a:hover.next.disabled {
        background: 0 0;
        margin-left: 24px
    }
    .sort #projNav {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0 auto
    }
    .hello,
    .project {
        position: relative
    }
    .order {
        text-align: left;
        margin: 80px 0 0
    }
    .order a {
        font-size: 20px;
        color: #666;
        display: inline block;
        margin-right: 20px
    }
    .logo {
        width: 277px;
        float: left
    }
    nav {
	width: auto;
    font-size: 24px;
    float: right;
    margin-top: 36px;
    min-width: 280px;
    }
    nav li a {
        width: auto;
        color: rgba(255,255,255,.7);
        float: left;
        margin-left: 60px
    }
    .contentWrap {
        margin: 0 auto;
        overflow-x: hidden;
        overflow-y: hidden;
        width: 970px;
    }
    .contentWrap img {
        width: 970px;
        height: auto
    }
    .project {
        margin: 60px 0
    }
    .intro p {
        margin: 0 auto
    }
    .hello {
        width: 100%;
        height: 400px;
        background-color: #07387a;
        margin: 0
    }
    .MyAccBg ul {
        width: 286px;
        margin: 200px auto 0
    }
    .MyAccBg ul li img.projImg {
        width: 17%;
        height: auto;
        position: absolute;
        bottom: 0
    }
    .mainContent h1,
    .mainContent h2 {
        text-align: left;
        color: #666
    }
    .mainContent h1 {
	    width:auto;
	    max-width:640px;
	    margin:0 auto;
        font-size: 2.25rem
    }
    .mainContent h2 {
	    width:auto;
	    max-width:640px;
        font-size: 1.55rem;
        line-height:2.25rem;
        font-weight: 600;
	    margin:24px auto 24px;
	    text-align: center;
    }
    
@media only screen and (min-width:701px) and (max-width:970px) {    
    .mainContent h2 {
	    width:auto;
	    max-width:100%;
        font-size: 1.3rem;
        font-weight: 600;
	    margin:72px auto 16px;
	    text-align: center;
		}
    }

    
    .mainContent h2.brief {
	    text-align: left;
	    width:auto;
	    max-width:640px;
        margin-top: 0;
        margin:0 auto 8px
    }
    .mainContent h3 {
	    width: 100%;
	    max-width: 100%!important;
	    margin:32px auto 24px!important;
	    font-size: 16px!important;
	    font-weight: 600;
	    display: inline-block;
    }
    .personaBox {
	    width:970px;
        background-color: #f2f2f2;
        margin: 24px auto;
        padding: 24px;
        border-radius: 8px;
        min-height: 120px
    }
    .personaBox img {
        width: 120px;
        margin-right: 24px;
        margin-bottom: 24px;
        height: auto;
        float: left
    }
    .greyBox img {
        width: 240px;
        margin-top: 24px;
        margin-right: 24px;
        margin-bottom: 36px;
        height: auto;
        float: left
    }
.greyBox {
    width: 100vw;
    background-color: #f2f2f2;
    min-height: 100px;
    height: auto;
    float: left;
    margin-left:-50vw;
    margin-right:-50vw;
    padding-left:50%;
    padding-right:50%;
    margin-top:0;
    margin-bottom:40px;
    padding-top:72px;	
    padding-bottom:72px;	
    }
   .greyBox p.charcoal {
		text-align: center;
		width: auto!important;
		max-width: 640px;
		margin:0 auto;   
	}
	@media only screen and (max-width:700px) {
		.greyBox p.charcoal a {
			width:auto!important;
			max-width:100%;
		}
	}
    img.bmag-od {
	    margin-left:150px; 
		width:890px!important;
	    height:auto
	}
	.PBdesc ul {
		margin: 16px 0 24px !important;
	}
    .PBdesc {
        margin-left: 152px
    }
    .intro p {
        width:640px;
        padding-top: 88px;
        color: #8BB1E4;
        font-size: 24px;
        clear: both;
        font-weight: 400;
        line-height: 2.5rem;
        text-align: center;
        margin:0 auto
    }
    .gridArea,
    .gridArea h3 {
        clear: left
    }
    .intro ul.twoCol {
        height: 950px
    }
    .intro ul li {
        width: 970px;
        text-align: center
    }
    .intro ul li.twoCol {
        float: left;
        width: 485px
    }
    .intro ul li.twoCol img {
        width: 80%
    }
    .intro li img {
        width: 40%
    }
    .intro div.overlay {
        font-size: 18px;
        line-height: 30px;
        color: #fff;
        background: rgba(0, 0, 0, .9);
        width: 92%;
        padding: 4%;
        position: absolute;
        bottom: 0
    }
    .intro div.overlay p.desc {
        font-size: 20px!important;
        line-height: 32px!important
    }
    .introBtn a {
        color: #8BB1E4
    }
    ul.buttonList {
        width: 344px;
        margin: 0 auto;
        display:none;
    }
    button.introBtn {
        border-radius: 8px;
        border: 2px solid #8BB1E4;
        background-color: rgba(255, 255, 255, .2);
        color: #fff;
        font-size: 1.3rem;
        text-align: center;
        transition: all .4s ease 0s;
        margin: 60px auto;
        padding: 0;
        width: 160px;
        height: 50px;
        cursor: pointer
    }
    .box,
    .overlay h3 {
        text-align: left
    }
    .final,
    .gridArea {
        padding-top: 20px
    }
    button {
        opacity: 1
    }
    button:hover {
        opacity: .4
    }
    .mainContent ul {
		width: 1180px;
		margin: 24px auto 0;
    }
    .mainContent ul li.oneCol {
        width: 46.37%
    }
    .mainContent ul li:nth-child(odd).oneCol {
        width: 46.37%;
        float: left
    }
    .mainContent ul li:nth-child(even).oneCol {
        width: 46.37%;
        margin-left: 36px
    }
    .mainContent ul li.twoCol {
        width: 100%
    }
    .mainContent li.oneCol {
        float: left
    }
    .mainContent li:nth-child(odd) img {
        width: 100%;
        float: left;
        margin: 24px 0
    }
    .mainContent li:nth-child(even) img {
        width: 100%;
        margin: 24px 0!important;
    }
    .gridArea {
        margin-top: 40px;
        width: 100%
    }
    .gridArea p {
        margin-top: 1rem;
        color: #666
    }
    .gridArea ul {
	    width: 970px;
	    height: auto;
	    margin: 48px auto;        
    }
    .gridArea ul li {
        width: 970px
    }
    .gridArea ul li:nth-child(odd).oneCol {
        width: 46.37%;
        float: left;
        clear: left
    }
    .gridArea ul li:nth-child(even).oneCol {
        float: left;
        width: 46.37%;
        margin-left: 36px
    }
    .gridArea ul li:nth-child(even).twoCol,
    .gridArea ul li:nth-child(odd).twoCol {
        float: left;
        width: 100%
    }
    .gridArea ul li.oneCol img,
    .gridArea ul li.twoCol img {
        width: 100%;
        margin: 8px 0 24px
    }
    .gridArea h2 {
		width: 640px;
		font-size: 1.55rem;
		margin: 0 auto 24px;    
		}
    .gridArea h4 {
        margin-bottom: 8px
    }
    .gridArea ul li img.sml {
        width: 194px;
        float: left;
        margin-right: 24px
    }
    .final,
    .final img {
        width: 100%
    }
    .final {
        clear: both;
        margin-top: 40px;
        margin-bottom: 120px;
        background-color: #fff
    }
    .final a {
        color: #666;
        text-decoration: underline;
        line-height: 2rem
    }
    .final ul li:nth-child(1).oneCol img,
    .final ul li:nth-child(5).oneCol img {
        width: 24%;
        float: left;
        margin-left: 0;
        clear: left
    }
    .box,
    .clear,
    .footerAbt,
    .rights {
	    max-width:1180px;
        clear: both
    }
    .final ul li.oneCol img {
        width: 24%;
        float: left;
        margin-left: 1.3333%;
        margin-bottom: 1.3333%
    }
    li.oneCol.gifAnm {
        width: 96%;
        margin-left: 4px
    }
    li.oneCol.gifAnm img {
        border: 1px solid #ddd
    }
    h2.CF {
	    width:640px;
        margin: 48px auto 12px;
        font-size: 1.65rem
    }
    CFbox {
        margin-top: 24px
    }
    .contentWrap li.fourCol {
        float: left;
        width: 242px
    }
    .contentWrap li.fourCol img {
        width: 242px
    }
    .project h1,
    .project h2,
    .project h3 {
        font-weight: 700;
        color: #3c3c3f;
        margin: 80px 0 20px
    }
    .project h1 {
        font-size: 48px
    }
    .project h2 {
        font-size: 36px
    }
    .project h3 {
        font-size: 24px
    }
    .overlay h3,
    .projDetail {
        color: #fff;
        font-size: 18px
    }
    .wireframe {
        margin: 24px 0
    }
    p.desc {
        margin-bottom: 20px;
        width: 640px
    }
    .projDetail {
        margin: 20px 0;
        line-height: 30px;
        background-color: rgba(45, 45, 45, 1);
        width: 92%;
        padding: 4%
    }
    .projDetail em {
        font-weight: 700
    }
    ul.projectGrid {
        margin: 20 0 0 -20;
        padding: 0
    }
    ul.projectGrid li.projItem a {
        margin: 0 0 20px;
        background-color: #e0e0e0;
        display: inline-block
    }
    ul.projectGrid li.projItem a img {
/*         border: 1px rgba(0, 0, 0, .5) */
        
    }
    .projItem {
        margin-left: 20px;
        margin-bottom: 20px;
        color: #fff;
        width: 473px;
        height: 473px;
        float: left;
        position: relative;
        overflow: hidden;
		border: 1px solid rgba(226, 226, 226, .6)
    }
    
    li.projItem a img {
        width: 473px;
        height: 473px;
    }
    .projItem a div.overlay {
	    color: #fff;
	    background: rgba(4, 16, 40, .9);
	    padding: 20px;
	    width: 100%;
	    position: absolute;
	    line-height: 20px;
	    bottom: 0px;
	    opacity: 1;
	 }
 
    .projItem a:hover div,
    html.touch li.projItem a div {
        opacity: .9;
        bottom: 0
    }
    .overlay h3 { font-weight:400;}
    .overlay p {font-weight:200; font-size:16px; line-height:24px; font-weight:300; word-spacing: 1.8}
    .tools h3,
    footer h2,
    strong {
        font-weight: 700
    }
    html.touch li.projItem a div:before {
        display: none
    }
    .myInfo {
        margin: 30px auto 0;
        height: 400px
    }
    .myInfo .wrap {
        margin: 0 auto;
        background-color: #e0e0e0;
        background-position: initial initial;
        background-repeat: initial initial
    }
    section.about {
        width: 640px;
        height: 370px;
        padding: 30px 0 0;
        float: left
    }
    section.about p {
        margin: 0 0 30px;
        width: 640px;
        font-size: 20px;
        line-height: 36px;
        color: #666
    }
    .footerAbt p,
    .footerAbt ul {
        font-size: 1.25rem;
        line-height: 2rem
    }
    section.social {
        margin-left: 20px;
        max-width: 310px;
        float: right
    }
    .social ul {
        margin: 0;
        width: 100%
    }
    .social ul li {
        list-style: none;
        margin: 0;
        display: block
    }
    a.behance,
    a.flickr,
    a.linkedin,
    a.noun,
    a.twitter {
        text-indent: -9999px;
        display: inline-block;
        width: 60px;
        height: 60px
    }
    .social ul li a {
        margin-bottom: 10px;
        margin-right: 20px
    }
    a.twitter {
        float: left;
        background: url(images/Twitter.png) no-repeat;
        background-size: 60px auto
    }
    a.flickr {
        float: left;
        background: url(images/Flickr.png) no-repeat;
        background-size: 60px auto
    }
    a.noun {
        margin-right: 34.67px;
        background: url(images/Nouns.png) no-repeat;
        background-size: 60px auto;
        float: left
    }
    a.linkedin {
        float: left;
        background: url(images/Linkedin.png) no-repeat;
        background-size: 60px auto
    }
    a.behance {
        background: url(images/Behance.png) no-repeat;
        background-size: 60px auto
    }
    
    footer {
	text-align: center;
    width: 100%;
    height: auto;
    color: rgb(102, 102, 102);
    background-color: #eaeef1;
    display: block;
    margin: 44px auto 0px;
    padding: 72px 0px;
    }

    footer h2 {
        color: #666;
        margin: 0;
        font-size: 1.25rem;
         margin-top: 16px
    }

    footer p {
        margin: 8px 0 20px;
        font-size: 1.2rem;
        line-height: 1.85rem
    }
    .tools h3 {
        color: #666;
        margin-bottom: 24px
    }
    .footerAbt {
        width: 33%;
        text-align: left;
        float: left;
        color: #fff
    }
    .footerAbt p {
        color: #666;
        margin-top: 24px
    }
    .footerAbt ul {
        margin-top: 32px;
        list-style-type: none
    }
    .footerAbt li {
        width: 320px;
        margin: 24px 0
    }
    
    .linkedIn-ico,
    .pf-ico {
        width: 48px;
        height: auto
    }
    .footerAbt ul li a {
        color: #216fc6;
        text-decoration: none;
        display: block;
        text-indent: 8px;
    }
    .pf-ico {
        background: url(images/Pf-logo.svg) no-repeat;
        background-size: contain
    }
    .linkedIn-ico {
        background: url(images/linkedin-logo.svg) no-repeat;
        background-size: contain
    }
    .tools {
	    margin-top:56px;
        width: 66%;
        float: right
    }
    .rights {
        display: block;
        margin: 0 auto;
        padding-top:72px;
    }
    .intro h2 {
        color: #fff;
        font-size: 2rem;
        line-height: 2.65rem;
        text-align: center;
        margin-top: 48px
    }
    .intro .tools ul {
        color: #fff;
        width: 710px;
        margin: 12px auto;
        padding: 12px 0 32px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff
    }
    .ico {
/*         margin: 0 0 124px */
    }
    .ico span {
        width: 110px;
        margin: 68px 48px 96px
    }
    footer.aboutMeFooter {
        margin: 32px auto 0;
        height: 36px;
        color: #fff
    }
}
#ProjectDetails {
    display: none
}
#ProjectDetails hr {
    border: 1px solid #f2f2f2;
    margin: 80px 0 50px
}
#ProjectDetails hr:first-of-type {
    margin-top: 20px
}
#ProjectDetails h1 {
    margin: 32px 0 10px;
/*     max-width: 640px; */
}
h3 {
    margin: 32px 0 8px;
    font-size: 1.45rem;
    font-weight: 600;
}
.box h3 { padding: 0!important; }
	@media only screen and (max-width:700px) {
		h3 {
			margin: 32px 0 4px;
			padding: 0;
			font-size: 1.2rem;
			width: auto!important;			
		}
		.box h3 { padding: 0 24px!important; }
	}
	
#ProjectDetails p {
    width: auto!important;
    margin: 24px auto;
    padding: 0 24px;
    max-width: 660px;
   }

@media only screen and (min-width:701px) and (max-width:970px) {
	#ProjectDetails p {
    width: auto!important;
    margin: 24px auto;
    padding: 0 24px;
    max-width: 660px;
   }
}
   
@media only screen and (max-width:700px) {
	#ProjectDetails p {
	width:auto;	
	margin: 24px auto;
	padding:0;
	}
}
.loading {
    font-size: 18px;
    color: #999;
    background: url(images/ajax-loader.gif) center 100px no-repeat;
    background-size: 32px 32px;
    text-align: center;
    line-height: 300px;
    padding-bottom: 20px;
    animation-name: FadeIn;
    animation-timing-function: ease-in;
    animation-duration: .2s;
    -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: .2s;
    }
    @-webkit-keyframes FadeIn {
        From { opacity: 0 }
        To {opacity: 1}
    }
    @keyframes FadeIn {
        From {opacity: 0}
        To {opacity: 1}
    }
    .projNav {
        margin: 0 0 20px
    }
    .projNav a {
        color: #cb1a3b;
        text-decoration: none;
        padding: 6px;
        line-height: 35px;
        font-size: 14pt
    }
    .projNav a:hover {
        color: #fff;
        background: #cb1a3b
    }
    .mfp-preloader,
    .mfp-preloader a,
    .projNav a.disabled {
        color: #CCC
    }
    .projNav a.disabled:hover {
        color: #CCC;
        background: 0 0;
        cursor: default
    }
    ul#projectsAll.projectGrid.hidden {
        display: none
    }
    @media only screen and (max-width:700px) {
        .greyBox {
		    width: auto;
		    max-width: 100%;
		    background-color: #f2f2f2;
		    margin: 0;
		    padding: 24px;
		    min-height: 100px;
		    height: auto;
		    float: none;
           }
	.greyBox img {
			width: auto!important;
			margin-top: 24px;
			margin-right: 24px;
			margin-bottom: 36px;
			height: auto;
			display: block;
			float: left;
			max-width: 279px!important;
		}
	}
media only screen and (min-width: 970px) {
footer {
    text-align: center;
    width: 100%;
    height: auto;
    color: rgb(102, 102, 102);
    background-color: rgb(234, 238, 241);
    display: block;
    margin: 44px auto 0px;
    padding: 72px 0px;
}
}
@media only screen and (min-width: 970px) {
.footerAbt {
	width: 33%;
    text-align: left;
    float: left;
    color: rgb(255, 255, 255);
    }
    }
 @media only screen and (min-width: 970px) {
.tools {
    margin-top: 56px!important;
    width: 66%!important;
    float: right!important;
}  
}
@media only screen and (min-width: 970px){
.box, .clear, .footerAbt, .rights {
    clear: both;
}
}
@media only screen and (min-width: 970px) {
.ico {
	width:auto!important;
	margin: 0px 0px 124px!important;
}
}
@media only screen and (min-width: 970px) {
.ico, .ico span {
	display: block!important;
    height: 60px!important;
    float: left!important;
    }
}
@media only screen and (min-width: 970px) {
	.ico span {
	    width: 110px;
	    margin: 0 48px 96px!important;
	}
}
@media only screen and (min-width: 970px) {
	.rights {
    padding-top: 72px!important;
    display: block;
    float: none;
    width: 100%;	
    }
    }
/*mfp*/
.mfp-bg,
    .mfp-wrap {
        position: fixed;
        left: 0;
        top: 0
    }
    .mfp-bg,
    .mfp-container,
    .mfp-wrap {
        height: 100%;
        width: 100%
    }
    .mfp-arrow:after,
    .mfp-arrow:before,
    .mfp-container:before,
    .mfp-figure:after {
        content: ''
    }
    .mfp-bg {
        z-index: 1042;
        overflow: hidden;
        background: #0b0b0b;
        opacity: .8
    }
    .mfp-wrap {
        z-index: 1043;
        outline: 0!important;
        -webkit-backface-visibility: hidden
    }
    .mfp-container {
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 8px;
        box-sizing: border-box
    }
    .mfp-container:before {
        display: inline-block;
        height: 100%;
        vertical-align: middle
    }
    .mfp-align-top .mfp-container:before {
        display: none
    }
    .mfp-content {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin: 0 auto;
        text-align: left;
        z-index: 1045
    }
    .mfp-close,
    .mfp-preloader {
        text-align: center;
        position: absolute
    }
    .mfp-ajax-holder .mfp-content,
    .mfp-inline-holder .mfp-content {
        width: 100%;
        cursor: auto
    }
    .mfp-ajax-cur {
        cursor: progress
    }
    .mfp-zoom-out-cur,
    .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
        cursor: -moz-zoom-out;
        cursor: -webkit-zoom-out;
        cursor: zoom-out
    }
    .mfp-zoom {
        cursor: pointer;
        cursor: -webkit-zoom-in;
        cursor: -moz-zoom-in;
        cursor: zoom-in
    }
    .mfp-auto-cursor .mfp-content {
        cursor: auto
    }
    .mfp-arrow,
    .mfp-close,
    .mfp-counter,
    .mfp-preloader {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }
    .mfp-loading.mfp-figure {
        display: none
    }
    .mfp-hide {
        display: none!important
    }
    .mfp-preloader {
        top: 50%;
        width: auto;
        margin-top: -.8em;
        left: 8px;
        right: 8px;
        z-index: 1044
    }
    .mfp-close,
    .mfp-preloader a:hover {
        color: #FFF
    }
    .mfp-s-error .mfp-content,
    .mfp-s-ready .mfp-preloader {
        display: none
    }
    button.mfp-arrow,
    button.mfp-close {
        overflow: visible;
        cursor: pointer;
        background: 0 0;
        border: 0;
        -webkit-appearance: none;
        display: block;
        outline: 0;
        padding: 0;
        z-index: 1046;
        box-shadow: none;
        touch-action: manipulation
    }
    .mfp-figure:after,
    .mfp-iframe-scaler iframe {
        box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        position: absolute;
        left: 0
    }
    button::-moz-focus-inner {
        padding: 0;
        border: 0
    }
    .mfp-close {
        width: 44px;
        height: 44px;
        line-height: 44px;
        right: 0;
        top: 0;
        text-decoration: none;
        opacity: .65;
        padding: 0 0 18px 10px;
        font-style: normal;
        font-size: 28px;
        font-family: Arial, Baskerville, monospace
    }
    .mfp-close:focus,
    .mfp-close:hover {
        opacity: 1
    }
    .mfp-close:active {
        top: 1px
    }
    .mfp-close-btn-in .mfp-close {
        color: #333
    }
    .mfp-iframe-holder .mfp-close,
    .mfp-image-holder .mfp-close {
        color: #FFF;
        right: -6px;
        text-align: right;
        padding-right: 6px;
        width: 100%
    }
    .mfp-counter {
        position: absolute;
        top: 0;
        right: 0;
        color: #CCC;
        font-size: 12px;
        line-height: 18px;
        white-space: nowrap
    }
    .mfp-figure,
    img.mfp-img {
        line-height: 0
    }
    .mfp-arrow {
        position: absolute;
        opacity: .65;
        margin: -55px 0 0;
        top: 50%;
        padding: 0;
        width: 90px;
        height: 110px;
        -webkit-tap-highlight-color: transparent
    }
    .mfp-arrow:active {
        margin-top: -54px
    }
    .mfp-arrow:focus,
    .mfp-arrow:hover {
        opacity: 1
    }
    .mfp-arrow:after,
    .mfp-arrow:before {
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 35px;
        margin-left: 35px;
        border: inset transparent
    }
    .mfp-arrow:after {
        border-top-width: 13px;
        border-bottom-width: 13px;
        top: 8px
    }
    .mfp-arrow:before {
        border-top-width: 21px;
        border-bottom-width: 21px;
        opacity: .7
    }
    .mfp-arrow-left {
        left: 0
    }
    .mfp-arrow-left:after {
        border-right: 17px solid #FFF;
        margin-left: 31px
    }
    .mfp-arrow-left:before {
        margin-left: 25px;
        border-right: 27px solid #3F3F3F
    }
    .mfp-arrow-right {
        right: 0
    }
    .mfp-arrow-right:after {
        border-left: 17px solid #FFF;
        margin-left: 39px
    }
    .mfp-arrow-right:before {
        border-left: 27px solid #3F3F3F
    }
    .mfp-iframe-holder {
        padding-top: 40px;
        padding-bottom: 40px
    }
    .mfp-iframe-holder .mfp-content {
        line-height: 0;
        width: 100%;
        max-width: 900px
    }
    .mfp-image-holder .mfp-content,
    img.mfp-img {
        max-width: 100%
    }
    .mfp-iframe-holder .mfp-close {
        top: -40px
    }
    .mfp-iframe-scaler {
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-top: 56.25%
    }
    .mfp-iframe-scaler iframe {
        display: block;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000
    }
    .mfp-figure:after,
    img.mfp-img {
        width: auto;
        height: auto;
        display: block
    }
    img.mfp-img {
        box-sizing: border-box;
        padding: 40px 0;
        margin: 0 auto
    }
    .mfp-figure:after {
        top: 40px;
        bottom: 40px;
        right: 0;
        z-index: -1;
        background: #444
    }
    .mfp-figure small {
        color: #BDBDBD;
        display: block;
        font-size: 12px;
        line-height: 14px
    }
    .mfp-figure figure {
        margin: 0
    }
    .mfp-bottom-bar {
        margin-top: -36px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        cursor: auto
    }
    .mfp-title {
        text-align: left;
        line-height: 18px;
        color: #F3F3F3;
        word-wrap: break-word;
        padding-right: 36px
    }
    .mfp-gallery .mfp-image-holder .mfp-figure {
        cursor: pointer
    }
    /*tablet landscape*/    
    @media screen and (max-width:800px) and (orientation:landscape),
    screen and (max-height:300px) {
        .mfp-img-mobile .mfp-image-holder {
            padding-left: 0;
            padding-right: 0
        }
        .mfp-img-mobile img.mfp-img {
            padding: 0
        }
        .mfp-img-mobile .mfp-figure:after {
            top: 0;
            bottom: 0
        }
        .mfp-img-mobile .mfp-figure small {
            display: inline;
            margin-left: 5px
        }
        .mfp-img-mobile .mfp-bottom-bar {
            background: rgba(0, 0, 0, .6);
            bottom: 0;
            margin: 0;
            top: auto;
            padding: 3px 5px;
            position: fixed;
            box-sizing: border-box
        }
        .mfp-img-mobile .mfp-bottom-bar:empty {
            padding: 0
        }
        .mfp-img-mobile .mfp-counter {
            right: 5px;
            top: 3px
        }
        .mfp-img-mobile .mfp-close {
            top: 0;
            right: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            background: rgba(0, 0, 0, .6);
            position: fixed;
            text-align: center;
            padding: 0
        }
    }


/* dropdown */

.dropdownbox li a {
	width: 336px; height:24px;
	text-decoration: none;
	color:#7aa1de;
	margin:0!important;
	padding:12px;
	display: inline-block;
	font-size:14px;
}
.dropdownbox li a:hover {
	background-color: #1E1E1E;
}

a#works {
	height:48px;
	display: inline-block;
	position:relative;
}

div.dropdownbox {
	width: 360px;
    position: absolute;
    margin-left: 44px;
    padding:0 0 12px 0;
    top: 80px;
    border-radius: 3px;
    background-color: rgba(0,0,0,.9);
    display: none;
}

.triangle {
	width:24px; height:12px;
	background: url('images/triangle.svg') no-repeat;
	background-size: contain;
	top:-8px;
	left:20px;
	position:relative;
}
 
.sticky {
  position: fixed!important;
  top: 0;
  left:0;
  width: 100%;
  background-color:rgba(7,56,122,.97);

/*   background-color:rgba(0,0,0,.6); */
}

.sticky + .content {
  padding-top: 102px;
}

/*scroll to up button*/
a.scBtn {
	display:none;
	text-indent: -10000000;
	width:64px; 
	height:64px;
	background: url(images/chevUpGrey.svg) no-repeat
	center center;
	background-color: rgba(255,255,255,.9);
	border-radius:100px;
	z-index:1;
	position:fixed;
	right:40px; 
	bottom:40px;	
	filter: drop-shadow(0 4px 4px rgba(0,0,0,.1));
}

a.scBtn:hover {
	background: url(images/chevUpGrey.svg) no-repeat
	center 22px;
	background-color: rgba(255,255,255,.9);
	filter: drop-shadow(0 8px 4px rgba(0,0,0,.1));
	transition:ease-out;
	position:fixed;
	right:40px; 
	bottom:39px;	
}

.nextCS {
	max-width:970px;
	min-height:400px;
	margin:40px auto;
}

.nextCS ul {
	margin:40px auto 0; 
	width:310px;
}

.nextCS ul li {
	display: block;
	width:310px!important;
	height:310px!important;
	margin:0!important; 
	padding:0!important;
	float:none!important; 
}

.nextCS ul li.projItem a:hover {
	display: block;
	width:310px!important;
	height:310px!important;
	margin:0!important; 
	padding:0!important;
	float:none!important; 
    -webkit-transition: opacity .35s ease-in-out;
    -webkit-transition: all .6s ease;
	
}

.nextCS ul li.projItem a div.overlay {
        color: #fff;
        background: rgba(0, 0, 0, .65);
        padding: 2%;
        width: 100%;
        position: absolute;
        line-height: 24px;
        opacity: 100%;
        bottom: 0;
    }
    
.greybox a img:hover {
	box-shadow: 2px 2px 20px rgba(0,0,0,0.095);
	/* Slide image enlarge in modal data-fancybox*/ 
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
    border-radius:12px;
}

/*Content menu*/
.contentMenu{
	top:120px; 
	z-index:1; 
	position: sticky;
	width:130px;
	margin:20px 0 0 24px;
	float:left;
	padding:8px;
	height: auto;
	background-color:#f2f2f2;
	border-radius:24px;
	filter:drop-shadow(0 4px 4px rgba(0,0,0,.1));
}

.contentMenu ul {
	width:130px;
}

.contentMenu ul li {
font-size:14px;	
margin:8px 0;
text-decoration:none!important;
}

li.contentMenu-list a{
color:#666;
text-decoration:none!important;
width:100%;
height:12px;
display:inline-block;
list-style:none;
text-indent:8px;	
}


li.contentMenu-list.active a{
color:#fff!important;
background-color:rgba(7, 56, 122, 1);
border-radius:8px;
height:24px;	
}


li.contentMenu-list a:hover {
color:#000!important;
}

.contentMenu-list li a{
	text-decoration:none!important;
	display:none;
}

.contentMenu-list li a:hover{
background-color:#f4f4f4important;	
}