html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
@viewport{
    //zoom: 1.0;
    //width: extend-to-zoom;
}
@font-face {
    font-family: Gotham;
    src: url(fonts/Gotham.otf);
    font-weight:600;
}
@font-face {
    font-family: Bricolage;
    src: url(fonts/Bricolage.ttf);
    font-weight:400;
}
@font-face {
    font-family: Bricolage;
    src: url(fonts/BricolageBold.ttf);
    font-weight:800;
}
*{
    border: none;
    box-sizing: border-box;
    margin: 0px;
    outline: none;
    padding: 0px;
}
body{
    background: url('images/bg-tile-3.gif');
}
div.container{
    margin: 0px auto;
    position: relative;
    width: 904px;
}
    header{
        margin-top: 40px;
    }
        h1 a{
            color: #F74224;
            font: 800 64px "Bricolage", Helvetica, Arial, sans-serif;
            text-decoration: none;
        }
        h2{
            color: #60583B;
            font: 300 24px "Lato";
        }
        nav{
            top: 51px;
            position: absolute;
            right: 0px;
        }
        nav > a,
        footer p a{
            font: 400 16px "Lato";
            padding: 0px 16px;
            text-decoration: none;
        }
        nav > a{
            color: #60583B;
        }
            nav > a:hover{
                color: #F74224;
            }
            nav > a:last-child{padding-right:0}
    section{
        margin-top: 80px;
    }
        #home-page h3{
            color: #60583B;
            font: 400 24px/0.1em "Bricolage";
            width: 100%; 
            border-bottom: 1px solid #ccc; 
            margin-bottom: 65px; 
            text-align: center;
        }
            #home-page h3 span{
                background:#fafafa; 
                padding:0 8px; 
            }
        section#ux-design > div{
            margin-bottom: 32px;
        }
        div.ux-wide{
            display: block;
            width: 100%;
        }
        section#ux-design img{
            height: 248px;
            width: 100%;
        }
        #home-page h4{
            color: #F74224;
            font: 400 24px "Lato";
            margin-bottom: 8px;
        }
            #home-page h4 > a{
                color: #F74224;
            }
            #home-page section a{
                text-decoration: none;
            }
        div.ux-small{
            display: inline-block;
            margin-right: 28px;
            width: 436px;
        }
            div.small-right{
                margin: 0;
            }
    #visual-design ul{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        list-style: none;
        height: 432px;
        padding: 0;
        width: 100%;
    }
        #visual-design ul li{
            background: #000;
            box-sizing: border-box;
            //display: inline-block;
            font-size: 0;
            height: 200px;
            margin-bottom: 32px;
            padding: 0;
            width: 280px;
            cursor: pointer;
        }
            #visual-design ul li a{
                -webkit-transition: all 0.2s ease-in-out 0s;
                -moz-transition: all 0.2s ease-in-out 0s;
                -o-transition: all 0.2s ease-in-out 0s;
                transition: all 0.2s ease-in-out 0s;
            }
            #visual-design ul li:first-child{
                margin-left: 0;
            }
            #visual-design ul li:nth-child(3n+0){
                margin-right: 0;
            }
            #visual-design ul li.eh-icons{
                background-image: url(images/vis-eh-icons.jpg);
            }
            #visual-design ul li.ecocar{
                background-image: url(images/vis-ecocar.jpg);
            }
            #visual-design ul li.lfapp{
                background-image: url(images/vis-lfapp.jpg);
            }
            #visual-design ul li.troll{
                background-image: url(images/vis-404.jpg);
            }
            #visual-design ul li.dashr{
                background-image: url(images/vis-dashr.jpg);
            }
            #visual-design ul li.lf-comments{
                background-image: url(images/vis-lf-comments.jpg);
            }
            #visual-design ul li.card{
                background-image: url(images/vis-card.jpg);
            }
            #visual-design ul li a{
                background: rgba(0,0,0,0.5) url(images/mag.png) no-repeat center center;
                display: block;
                height: 200px;
                opacity: 0;
                width: 280px;
            }
            #visual-design ul li:hover a{
                opacity: 1;
            }
    #skills ul{
        list-style: none;
    }
        #skills ul li{
            display: inline-block;
            padding-top: 180px;
            text-align: center;
            margin-right: 28px;
            width: 202px;
        }
            #skills ul li:first-child{
                background: url('images/skills-process.svg') no-repeat center top;
            }
            #skills ul li:nth-child(2){
                background: url('images/skills-wireframing.svg') no-repeat center top;
            }
            #skills ul li:nth-child(3){
                background: url('images/skills-prototyping.svg') no-repeat center top;
            }
            #skills ul li:last-child{
                background: url('images/skills-interface.svg') no-repeat center top;
                margin-right: 0;
            }
            #skills h5{
                color: #38AAFB;
                font: 400 24px "Lato";
            }
    #mastery ul{
        list-style: none;
    }
        #mastery ul li{
            display: inline-block;
            margin-right: 96px;
            position: relative;
            text-align: center;
        }
            #mastery ul li span{
                color: #60583B;
                font: 300 18px "Lato";
                position: absolute;
            }
            #mastery-blue{
                background: url('images/mastery-blue.svg') no-repeat center top;
                height: 210px;
                width: 200px;
            }
                #mastery-blue span:first-child{
                    top: 69px;
                    left: 73px;
                }
                #mastery-blue span:nth-child(2){
                    top: 186px;
                    left: -10px;
                }
                #mastery-blue span:nth-child(3){
                    top: 186px;
                    left: 131px;
                }
            #mastery-orange{
                height: 210px;
                width: 303px;
            }
                #mastery-orange span{
                    background: rgba(247, 66, 36, 0.7);
                    border-radius: 10px;
                    color: #fafafa !important;
                    display: block;
                    font: 800 24px "Bricolage", Helvetica, Arial, sans-serif !important;
                    height: 45px;
                    line-height: 45px !important;
                    width: 113px;
                }
                    #mastery-orange span:first-child{
                        left: 95px;
                        top: 23px;
                    }
                    #mastery-orange span:nth-child(2){
                        left: 0;
                        top: 83px;
                    }
                    #mastery-orange span:nth-child(3){
                        right: 0;
                        top: 83px;
                    }
                    #mastery-orange span:last-child{
                        bottom: 23px;
                        left: 95px;
                    }
            #mastery-grey{
                background: url('images/mastery-grey.svg') no-repeat center top;
                height: 210px;
                margin-right: 0 !important;
                width: 201px;
            }
                #mastery-grey span:first-child{
                    left: 15px;
                    top: 73px;
                }
                #mastery-grey span:nth-child(2){
                    left: 118px;
                    top: 73px;
                    width: 107px;
                }
                #mastery-grey span:last-child{
                    top: 190px;
                    left: 71px;
                }
             
/************ General Product Page CSS ************/
#project-page h3{
    color: #F74224;
    font: 400 40px/0.1em "Bricolage", Helvetica, Arial, sans-serif;
    border-bottom: 1px solid #ccc;
    margin-bottom: 65px; 
    text-align: center;
}
    #project-page h3 span{
        background:#fafafa; 
        padding:0 24px; 
    }
#project-page div.container > p.body-copy,
#project-page section > p.body-copy{
    color: #60583B;
    font-family: "Lato";
    font-size: 24px;
    font-weight: 400;
    margin: 80px auto;
    width: 780px;
}
#project-page div > img{
    //width: 960px;
}
#project-page div.full-width-img{
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
#project-page p.footnote{
    font-family: "Lato";
    font-size: 16px !important;
    margin-top: -50px !important;
}

/************ Atom Page CSS ************/
.atom-page div.atom-mocks{
    background-image: url(images/projects/atom/pr_bg.jpg);
    background-position: bottom;
    height: 500px;
    position: relative;
}
.atom-page div.atom-intro {
	background-image: url(images/projects/atom/atom-intro-bg.jpg);
	height: 558px;
	text-align: center;
}
	.atom-intro strong {
		color: #fafafa;
		left: 40px;
		position: absolute;
		top: 40px;
	}
	.atom-intro img {
		margin: 90px auto 0 auto;
	}
    .atom-page div.atom-mocks-grid{
        background: url(images/projects/atom/mocks-grid.png) no-repeat center;
        background-size: 100%;
        height: 400px;
        margin: 0 auto;
        position: relative;
        top: 50px;
        width: 960px;
    }
    .atom-page > .atom-prototype{
        height: 500px;
    }
        .atom-page > .atom-prototype > iframe{
            margin-right: 25px;
        }
        .atom-page > .atom-prototype > p{
            padding: 0px 10px;
        }
    .atom-page > .container > p > span{
        display: block;
        font: 300 40px/50px "Lato", Helvetica, Arial, Geneva, sans-serif;
        margin-bottom: 30px;
        text-decoration: underline;
    }

/************ BigPoint Page CSS ************/
.bigpoint-page div h4{
    font: 300 80px/80px "Lato", Helvetica, Arial, Geneva, sans-serif;
    text-shadow: 1px 3px 25px rgba(255,255,255,1);
}
.bigpoint-page div.bigpoint-flows{
    background-image: url(images/projects/bigpoint/flows-bg.jpg);
    height: 500px;
    position: relative;
}
    .bigpoint-page div.bigpoint-flows div.bigpoint-flows-title{
       background-image: url(images/projects/bigpoint/flows-cards.png); 
       background-size: 254px 300px;
       background-repeat: no-repeat;
       background-position: top left;
       color: #262626;
       display: block;
       height: 350px;
       left: 50%;
       margin-left: -400px;
       margin-top: -145px;
       position: absolute;
       text-align: center;
       top: 50%;
       width: 900px;
    }
        .bigpoint-page div.bigpoint-flows div.bigpoint-flows-title h4{
            border-bottom: 2px solid #262626;
            font: 300 80px/80px "Lato", Helvetica, Arial, Geneva, sans-serif;
            margin-left: 300px;
            padding-top: 80px;
            text-shadow: 1px 3px 25px rgba(255,255,255,1);
            width: 550px;
        }
        .bigpoint-page div.bigpoint-flows div.bigpoint-flows-title p{
            font: 300 30px/80px "Lato", Helvetica, Arial, Geneva, sans-serif;
            margin-left: 300px;
            width: 550px;
        }
.bigpoint-page div.bigpoint-wires{
    background-image: url(images/projects/bigpoint/wires-bg.jpg);
    background-position: bottom;
    height: 500px;
    position: relative;
}
    .bigpoint-page div.bigpoint-wires-grid{
        background: url(images/projects/bigpoint/wires-grid.png) no-repeat center;
        background-size: 100%;
        height: 400px;
        margin: 0 auto;
        position: relative;
        top: 50px;
        width: 696px;
    }
    .bigpoint-page div.bigpoint-wires h4{
        background: rgba(255,255,255,0.9);
        font-size: 80px/120px;
        padding: 40px 0;
        position: relative;
        top: 100px;
        width: 100%;
    }
    #project-page div.container > p.footnote{
        font-size: 14px;
        margin: -50px auto 80px auto;
    }
.bigpoint-page div.bigpoint-anim{
    background-image: url(images/projects/bigpoint/anim-bg2.jpg);
    height: 500px;
    position: relative;
}
    .bigpoint-page div.bigpoint-anim-list{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 100%;
    }
        .bigpoint-page div.bigpoint-anim-list img{
            height: 169px;
            width: 300px !important;
        }

/************ LiftBro Page CSS ************/
.liftbro-page div.full-width-img{
    background-image: url(images/projects/liftbro/fullboard.jpg);
    height: 800px;
}
/************ LFMobile Page CSS ************/
.lfmobile-page div.lfmobile-sketches{
    background-image: url(images/projects/lfmobile/sketches.jpg);
    height: 800px;
}
.lfmobile-page div.lfmobile-mocks{
    background-image: url(images/projects/lfmobile/mobile-mock.jpg);
    height: 800px;
}

/************ Pokedex Page CSS ************/
.pokedex-page p.left-align{
    text-align: left;
    width: 960px !important;
}
.pokedex-page p > img{
    margin-left: 32px;
}
.pokedex-page p.body-copy a{
    background: #F74224;
    border-radius: 5px;
    display: block;
    color: #fff;
    font-weight: 400;
    margin: 0px auto;
    padding: 15px 0;
	text-align: center;
    text-decoration: none;
    width: 400px;
}
    .pokedex-page p a:hover{
        background: rgb(236,88,62);
    }
    .pokedex-page p a:active{
        background: rgb(244,91,64);
    }
    
/************ Zynga Page CSS ************/
.zynga-page .zynga-betting-intro{
	//position: relative;
}
/*.zynga-page .zynga-betting-intro {
	background-image: url(images/projects/zynga/betting/intro-bg.jpg);
	height: 448px;
}
	.zynga-page .zynga-betting-intro img{
		top: 73px;
	}
	.zynga-page .zynga-hc-betting p.body-copy strong {
		display: block;
		font: 600 24px "Lato";
		margin-bottom: 8px !important;
	}
	.zynga-page .zynga-hc-betting p.body-copy span {
		display: block;
		font: 300 16px "Lato";
		margin: 0 0 16px 0;
	}
.zynga-page .zynga-betting-intro > p.right-text {
	position: absolute;
	right: 0;
	text-align: right;
	bottom: 50px;
	width: 400px !important;
}*/
.zynga-page .zynga-betting-wires {
	background-image: url(images/projects/zynga/betting/wireframes-bg.jpg);
	padding: 48px 0;
	text-align: center;
}
.zynga-page .zynga-betting-final {
	background-image: url(images/projects/zynga/betting/final-bg.jpg);
	height: 600px;
}
.zynga-page .zynga-betting-final .container,
.zynga-page .zynga-betting-intro .container,
.zynga-page .zynga-hc-intro .container,
.eharmony-page .eh-intro .container {
	position: relative;
}
.zynga-page .zynga-betting-final p.body-copy,
.zynga-page .zynga-hc-intro p.body-copy,
.eharmony-page .eh-intro p.body-copy {
	color: #fafafa !important;
	font-weight: 300 !important;
	margin: 0px !important;
	position: absolute;
	text-align: left;
	width: 351px !important;
}
.zynga-page .zynga-betting-final p.body-copy {
	top: 73px;
}
.zynga-page .zynga-hc-intro p.body-copy{
	top: 55px;
}
.zynga-page .zynga-betting-intro p.body-copy{
	color: #fafafa !important;
	margin: 0px !important;
	position: absolute;
	text-align: left;
	right: 0;
	top: 73px;
	width: 351px !important;
}
.zynga-page .zynga-betting-final p.body-copy strong{
	display: block;
	font: 800 32px "Bricolage", Helvetica, Arial, sans-serif;
	margin-bottom: 64px !important;
}
.zynga-page .zynga-betting-final p.body-copy span{
	display: block;
	margin: 16px 0;
}
.zynga-page .zynga-betting-final img{
	position: absolute;
	right: 0;
	top: 138px;
}
.zynga-page .zynga-betting-intro img {
	position: absolute;
	left: 0;
	top: 55px;
}
.zynga-page .subnav {
	display: flex;
	flex-flow: row nowrap;
	font: 300 24px "Lato";
	line-height: 48px;
	margin-bottom: 24px;
	width: 100%;
}
	.zynga-page .subnav a {
		border-bottom: 1px solid #ccc;
		border-radius: 8px 8px 0 0;
		color: #999;
		padding: 0px 16px;
		text-decoration: none;
		width: 50%;
		text-align: center;
		transition: border-bottom 0.2s ease-in 0s, color 0.2s ease-in 0s;
	}
		.zynga-page .subnav a.subnav-active {
			background-color: #f87964;
			border-bottom-color: #f87964;
			color: #fafafa;
		}
		.zynga-page a.subnav-inactive:hover {
			border-bottom: 1px solid #F74224;
			color: rgb(247,66,36);
		}
.zynga-page .zynga-hc-intro {
	background-image: url(images/projects/zynga/hc/intro-bg.jpg);
	height: 400px;
}
.zynga-page .zynga-betting-intro {
	background-image: url(images/projects/zynga/betting/intro-bg.jpg);
	height: 448px;
}
	.zynga-page .zynga-hc-intro img{
		position: absolute;
		right: 0;
		top: 73px;
	}
	.zynga-page .zynga-hc-intro p.body-copy strong,
	.zynga-page .zynga-betting-intro p.body-copy strong,
	.eharmony-page .eh-intro p.body-copy strong{
		display: block;
		font: 600 24px "Lato";
		margin-bottom: 8px !important;
	}
	.zynga-page .zynga-hc-intro p.body-copy span,
	.eharmony-page .eh-intro p.body-copy span,
	.zynga-page .zynga-betting-intro p.body-copy span{
		display: block;
		font: 300 18px "Lato";
		margin: 0 0 16px 0;
	}
.zynga-page .hc-key {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 72px;
}
	.zynga-page .hc-key-right {
		text-align: right;
	}
		.zynga-page hc-key-right img {
			position: relative;
			right: -174px;
		}
	.zynga-page .hc-key div {
		color: #60583B;
		font: 300 20px "Lato";
		margin-left: 32px;
		width: 510px;
	}
		.zynga-page .hc-key-right div {
			position: relative;
			right: -142px;
		}
		.zynga-page .hc-key-right img {
			position: relative;
			right: -175px;
		}
		.zynga-page .hc-key div strong {
			color: #731D1D;
			display: block;
			font: 600 30px "Lato";
			margin-bottom: 16px;
		}
.zynga-page .zynga-hc-final {
	background-image: url(images/projects/zynga/hc/final-bg.jpg);
	height: 773px;
}
	.zynga-page .zynga-hc-final p.body-copy {
		color: #fafafa !important;
		font-weight: 300 !important;
		margin: 32px 0 !important;
	}
	.zynga-page .zynga-hc-final p.body-copy strong {
		display: block;
		font: 800 32px "Bricolage", Helvetica, Arial, sans-serif;
		padding-top: 32px;
	}
	
	
/************ eharmony CSS ************/ 
.eharmony-page .eh-intro {
	background-image: url(images/projects/eh/intro-bg.jpg);
	height: 400px;
}
	.eharmony-page .eh-intro p.body-copy {
		top: 32px;
	}
	.eharmony-page .eh-intro img{
		position: absolute;
		right: 0;
		top: 16px;
	}
.eharmony-page .eh-whiteboard {
	background: url(images/projects/eh/whiteboard.jpg);
	height: 616px;
	margin-top: 80px;
	padding-top: 24px;
	width: 904px;
}
	.eharmony-page .eh-whiteboard p.body-copy {
		color: #fafafa !important;
		margin: 0px auto 24px auto !important;
	}
.eharmony-page .eh-categories {
	background-image: url(images/projects/eh/categories-bg.jpg);
	height: 490px;
	margin-top: 80px;
	padding: 48px 0;
}
	.eharmony-page .eh-categories p.body-copy {
		color: #fafafa !important;
		margin: 0 !important;
	}
	.eharmony-page .eh-cat {
		color: #fafafa;
		display: inline-block;
		font: 300 24px "Lato";
		margin: 80px 60px 0;
		text-align: center;
	}
		.eharmony-page .eh-cat img {
			margin-bottom: 24px;
		}
.eharmony-page .eh-concept-container {
	margin-bottom: 56px;
	width: 100%;
}
	.eharmony-page .eh-concept-container h4 {
		font: 400 32px "Lato";
	}
		.eharmony-page .eh-concept-container h4.eh-matches {
			color: #155F7A;
		}
		.eharmony-page .eh-concept-container h4.eh-profile {
			color: #00AEB2;
		}
		.eharmony-page .eh-concept-container h4.eh-comm {
			color: #607BC9;
		}
	.eharmony-page div.eh-ch-container {
		display: flex;
		flex-flow: row nowrap;
		margin-top: 8px;
	}
		.eharmony-page div.eh-concept,
	 	.eharmony-page div.eh-hypothesis{
			color: #60583B;
			font: 300 16px "Lato";
			width: 430px;
		}
			.eharmony-page div.eh-concept {
				margin-right: 40px;
			}
			.eharmony-page div.eh-hypothesis ul {
				list-style-position: inside;
			}
				.eharmony-page div.eh-hypothesis ul li ul {
					padding-left: 16px;
				}
			.eharmony-page div.eh-ch-container h5 {
				font-size: 24px;
				font-weight: 300;
				padding-bottom: 8px;
			}
.eharmony-page .eh-testing {
	background-image: url(images/projects/eh/testing-bg.jpg);
	color: #fafafa;
	height: 483px;
	margin-top: 80px;
	padding: 48px 0;
}
	.eharmony-page .eh-testing h6 {
		font: 800 32px "Bricolage", Helvetica, Arial, sans-serif;
		margin-bottom: 24px;
	}
	.eharmony-page .eh-testing p {
		font: 300 16px "Lato";
		margin-bottom: 16px;
		width: 400px;
	}
	.eharmony-page .eh-testing img {
		position: absolute;
		right: 0;
		top: 64px;
	}
.eharmony-page .eh-results {
	color: #60583B;
	margin-top: 80px;
}
	.eharmony-page .eh-results h6 {
		font: 800 32px "Bricolage", Helvetica, Arial, sans-serif;
		padding-left: 62px;
	}
	.eharmony-page .eh-results p.body-copy {
		margin-top: 24px !important;
	}
/************ Footer CSS ************/    
footer{
    background: #F74224;
    height: 116px;
    margin-top: 120px;
    padding: 32px 0px;
}
 footer h1 a{
     color: #fafafa;
     font-size: 24px;
 }
 footer h2{
     color: #fafafa;
     font-size: 16px;
 }
 footer p{
     position: absolute;
     right: 0;
     top: 23px;
 }
     footer p a{
         color: #fafafa;
         line-height: 24px;
         padding: 8px 16px;
         text-decoration: none;
     }
         footer p a:hover{
             background: rgba(255,255,255,0.3);
             border-radius: 5px;
         }
.featherlight-next span, .featherlight-previous span{
	color: rgba(0,0,0,0.4) !important;
	font-size: 40px !important;
	line-height: 40px;
	text-shadow: none !important;
    top: 50% !important;
	width: 30px;
}
.featherlight-previous span {
	left: 0px;
}
.featherlight-next span {
	right: 8px;
}
.featherlight .featherlight-close-icon {
	background: none !important;
	font-size: 24px !important;
	right: 2px !important;
	top: 2px !important;
}