@charset "utf-8"
/*! Global Styles */

/* ==========================================================================
   Author: Zach Brugman
   Date: February 20, 2014
   ========================================================================== */

/*FONTS FONTS FONTS*/
/*----Maven Pro 100-----*/
@font-face {
    font-family: 'maven100';
    src: url('fonts/mavenprolight-100-webfont.eot');
    src: url('fonts/mavenprolight-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/mavenprolight-100-webfont.woff') format('woff'),
         url('fonts/mavenprolight-100-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*----Maven Pro 200-----*/
@font-face {
    font-family: 'maven200';
    src: url('fonts/mavenprolight-200-webfont.eot');
    src: url('fonts/mavenprolight-200-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/mavenprolight-200-webfont.woff') format('woff'),
         url('fonts/mavenprolight-200-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*----Maven Pro 300-----*/
@font-face {
    font-family: 'maven300';
    src: url('fonts/mavenprolight-300-webfont.eot');
    src: url('fonts/mavenprolight-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/mavenprolight-300-webfont.woff') format('woff'),
         url('fonts/mavenprolight-300-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*----Code Light-----*/
@font-face {
    font-family: 'codeLight';
    src: url('fonts/code_light-webfont.eot');
    src: url('fonts/code_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/code_light-webfont.woff') format('woff'),
         url('fonts/code_light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*----Code Bold-----*/
@font-face {
    font-family: 'codeBold';
    src: url('fonts/code_bold-webfont.eot');
    src: url('fonts/code_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/code_bold-webfont.woff') format('woff'),
         url('fonts/code_bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*----Mission Script-----*/
@font-face {
    font-family: 'siteScript';
    src: url('fonts/siteScript.eot');
    src: url('fonts/siteScript.eot?#iefix') format('embedded-opentype'),
         url('fonts/siteScript.woff') format('woff'),
         url('fonts/siteScript.ttf') format('truetype'),
         url('fonts/siteScript.svg#mission_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;}
	
/*----ICONS-----*/
@font-face {font-family: 'icons';
    src: url('fonts/Entypo-webfont.eot');
    src: url('fonts/Entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Entypo-webfont.woff') format('woff'),
         url('fonts/Entypo-webfont.ttf') format('truetype'),
         url('fonts/Entypo-webfont.svg#EntypoRegular') format('svg');
		 -webkit-font-smoothing: antialiased;
		 font-style: normal;}
		 
/*----ICONS-----*/
@font-face {font-family: 'ui_icons';
    src: url('fonts/fontawesome-webfont.eot');
    src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontawesome-webfont.woff') format('woff'),
         url('fonts/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

/*Open Sans Light*/
@font-face {
    font-family: 'WebLight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Open Sans Bold*/
@font-face {
    font-family: 'WebBold';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Social Icons*/
@font-face {
    font-family: 'social_icons';
    src: url('fonts/socialico-webfont.eot');
    src: url('fonts/socialico-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/socialico-webfont.woff') format('woff'),
         url('fonts/socialico-webfont.ttf') format('truetype'),
         url('fonts/socialico-webfont.svg#socialicoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
   
   
body, html {height: 100%; width: 100%;}
body {font-family: 'Raleway', sans-serif; background: #f2efef; color: #3d4f4e;}
h1, h2, h3, h4, h5, h6 {font-family: 'Raleway', sans-serif;}

/*Off Canvas Side Menu Styles*/
.pageWrapper, .off-canvas-wrap, .inner-wrap {height: 100%; min-height:100%;}
.navContainer {position: absolute; width: 100%; height: 48px; top: 0; z-index: 9999;}
nav.tab-bar {background: transparent;}
section.left-small, section.right-small {border: none; box-shadow: none;}
.sideMenu li:hover {background: #404040; cursor: pointer;}
.sideMenu li.active {background: #FB7B3F;}
.sideMenu li.active a {color: #fff;}
.sideMenu li a:before {font-family: icons; content: "+"; display:inline-block; font-size: 3em; line-height: 0; margin-right: 10px; vertical-align: middle; text-align: center; width: 30px;}
.sideMenu li.home a:before {content: "+";}
.sideMenu li.about a:before {content: ".";}
.sideMenu li.ui_design a:before {content: "n";} /*Q*/
.sideMenu li.web_design a:before {content: "o";}
.sideMenu li.graphic_design a:before {content: "p";}
.sideMenu li.contact a:before {content: "%";}
.sideMenu li.other_work a:before {content: "F";}
/*.sideMenu li.ui_design a, .sideMenu li.web_design a, .sideMenu li.graphic_design a {padding-left: 45px;}*/
.sideMenu li.categories label {padding: 0; border: none; text-transform: none; font-weight: normal; font-size: .75em;}
.sideMenu li.categories label a:before {content: "k";}
.sideMenu li.other_work {bottom: 0; font-size: 0.8em; position: fixed; left: 0; width: 100%;}

/*Right Off-Canvas Menue*/
.right-off-canvas-menu ul.off-canvas-list.sideMenu li a {font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.right-off-canvas-menu ul.off-canvas-list.sideMenu li a:before {display: none;}

.siteBrand {padding: .5em 0; width: 100%;}
/*.siteBrand .logo {height: 170px; width: 170px; display: block; margin: 0 auto; border-radius: 50%; border: 5px solid #555; background: #252525; margin-bottom: 1em;}*/
.siteBrand .logo {height: 75px; width: 75px; display: block; margin: 0 auto;margin-bottom: 1em; border-radius: 50%; position: relative;}
.siteBrand h3, .siteBrand h4 {color: #f2efef; font-weight: 800; letter-spacing: -1px; margin: 0 auto; text-align: center; line-height: 1em;}
.siteBrand h3 {font-weight: 800;}
.siteBrand h4 {font-weight: 100; font-size: 1em; line-height: 1.5em;}

.offsetMenu {padding: 0;}
.left-small, .index2 .right-small {background: rgba(255,180,0,0.75); background: #FB7B3F;}
#home {background: url(../img/PIC6.jpg) no-repeat center center; background-size: cover;}
.row {width: 100%; max-width: 100%; padding: 0;}
section.main-section .sitePad {padding: 3em; max-width: 1200px; margin: 0 auto;}
#home, #projects, #about, #contact, #ui, #web, #gfx {padding: 4em;}
.main-section h1 {font-size: 64px; color: #333; font-weight: bold; margin: 0; z-index: 999; letter-spacing: -1.5px;}
.main-section p {font-size: 16px; color: #606060; background: rgba(255,255,255,0.95); padding: 1em; line-height: 24px; border: 1px solid #d2ccc4;}
section {height: auto; min-height: 100%;}
.titlePage {max-width: 1000px; margin: 0 auto; position: relative;}
#home.main-section .titlePage {position: relative; max-width: 800px; margin: 15% auto 0; min-width: 240px;}
.titlePage h1, .titlePage h2 {transition: 0.5s ease-in-out;}
#home .titlePage h1, #home .titlePage h2 {color: #fff; background: rgba(0,0,0,0.5); padding: 10px; line-height: 1em; margin: 0;}
#home .titlePage h2 {font-size: 1em; font-weight: normal; background: rgba(0,0,0,0.7);}
#home .titlePage p {box-shadow: 0 8px 4px -3px rgba(0, 0, 0, 0.5); z-index: 9999;}
/*.index2 img {background-size: cover; width: 100%;}*/

.projectPage h1 {font-size: 42px; padding: 0; font-weight: 400; margin: 0; height: 52px; line-height: 1; color: #333;}
.screenshot {width: 100%; height: auto; border: 1px solid #ccc; margin-bottom: 1em; background: #fff; text-align: center;}
.screenshot img {margin: 0 auto; padding: 1em;}
.screenshot p {text-align: left; font-size: .8em; border: none; margin: 0; background: #f5f5f5;}

ul.projectType {width: 100%; margin: 1em 0 0 0; padding: 0;}
.projectType li {padding: 1em; text-align: center; list-style-type: none;}
.projectType li:hover {background: rgba(0,0,0,0.15); cursor: pointer;}
.projectType li.active {background: #FB7B3F;}
.projectType li.columns.active h4 {color: #fff; font-weight: 500;}
.projectType li.columns.active img {border: 5px solid #fff;}
.projectType li:last-child {margin: 0;}
.projectType li h4 {text-align: center; color: #606060; white-space: nowrap; margin: 0; line-height: 2em;}
.projectType li img {border: 5px solid #606060; border-radius: 50%; width: 100%; max-width: 160px;}
.projectList {padding-left: 0.9375rem; padding-right: 0.9375rem;}
.projectList ul {list-style-type: none;}
.projectList ul li {padding: 0; margin-bottom: 1em;}
.projectList .projectName {position: relative; overflow: hidden; background: #fff; height: 200px;}
.projectList .projectName:hover {background: #000;}
.projectList .projectName:hover img {transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); cursor: pointer; opacity: 0.75;}
.projectList .projectName img {transform: scale(1,1); -webkit-transform: scale(1,1); width: 100%; transition: 0.5s ease-in-out; z-index: 0;}
.projectList .projectName span {background: rgba(25,25,25,0.85); color: #fff; position: absolute; width: 100%; bottom: 0; padding: .5em; z-index: 999;}

#about h4 {background: rgba(0,0,0,0.5); color: #fff; font-weight: bold; line-height: 1; margin-bottom: 0; padding: 0.25em;}

button {background: #FB7B3F; width: 100%;}
button:hover {background: #E85A19;}

#contact .columns {padding-left: 0; margin-bottom: 2em;}
#contact h2 {font-size: 2em; font-weight: normal; color: #606060; letter-spacing: -1px; padding: 0.25em 0; border-bottom: 2px dashed rgba(0,0,0,0.15)}
#contact textarea {max-width: 100%; min-width: 100%; min-height: 6em;}

/*Social Icons*/
.contentBox ul {list-style-type:none; padding: 0; margin: 0; line-height: 1;}
.contentBox ul li:hover {background: #fff;}
.contentBox ul li a {color: #606060; display: block;}
.contentBox a.socialIcon:before {font-family: social_icons, sans-serif; color: rgba(0,0,0,0.5); font-size: 3em; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; vertical-align: middle; margin-right: .25em; width: 45px; text-align: center; display: inline-block;}
.contentBox a.socialIcon:hover:before {color: #606060;  -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; margin-right: .35em;}
.contentBox a.socialIcon.twitter:before {content: "L";}
.contentBox a.socialIcon.twitter:hover:before {color: rgba(0,196,252,1.0);}
.contentBox a.socialIcon.facebook:before {content: "F";}
.contentBox a.socialIcon.facebook:hover:before {color: rgba(66, 95, 156, 1.0);}
.contentBox a.socialIcon.linkedin:before {content: "I";}
.contentBox a.socialIcon.linkedin:hover:before {color: rgba(31, 136, 189, 1.0);}
.contentBox a.socialIcon.googlePlus:before {content: "G";}
.contentBox a.socialIcon.googlePlus:hover:before {color: rgba(221, 75, 57, 1.0);}
.contentBox a.socialIcon.behance:before {content: "E";}
.contentBox a.socialIcon.behance:hover:before {color: rgba(2, 116, 249, 1.0);}
.contentBox a.socialIcon.aim:before {content: "Z";}
.contentBox a.socialIcon.aim:hover:before {color: rgba(253, 213, 0, 1.0);}
.contentBox a:hover {color: #E85A19;}

.footer {width: 100%;}

/* ######### Projects Pages ######### */
.projectContainer h1 {padding-left: 0.9375rem;}
.summary h2 {font-size: 1.5em; border-bottom: 1px solid #ccc;}
.summary ul {list-style-type: none; padding: 0; margin: 0;}
.summary ul li {padding: .5em 1em; background: rgba(0,0,0,0.1); margin: 0 0 .5em 0; display: block;}
.designProcess {background: #fff; border: 1px solid #ccc; margin-bottom: 1em;}
.designProcess .processSection.row {padding: 1em; border-bottom: 1px dotted #ccc;}
.designProcess .processSection.row:nth-child(2n+1) {background: #fafafa;}
.designProcess .processSection.row:last-child {border-bottom: none;}
.designProcess .processSection.row p {margin: 0;}
.designProcess .processSection.row p .title {display: block; font-weight: bold; font-size: 1.2em; margin-bottom: .25em;}
.designProcess .processSection.row p img {margin: 1em 0 0 0;}
.footer.processPage {}

/*Pagination*/
.pagination {width: 100%; display: inline-block; clear: both; height: 52px; font-weight: 800; position: relative;}
.projectPage .pagination.aboveDescription {position: absolute; top: -54px; padding-right: 2em;}
.pagination .prev, .pagination .next {font-size:48px; color: #ccc; padding: 0; line-height:48px; height:48px;}
.pagination .next:hover {color: #999; cursor:pointer;}
.pagination .prev:hover {color: #aaa; cursor:pointer;}
.pagination .prev, .pagination .orbit-prev.prev {float: left; font-weight: 200;}
.pagination .next {float: right;}
/*Close button for lightbox*/
.clearing-close {right: 52px; top: 37px; padding: 0 !important; font-size: 48px;}
.clearing-feature li.clearing-featured-img {width: 100%; position: relative;}

/*HomeScreen Half Circle*/
/*.main-section .halfCircle {height: 150px; width: 300px; border-radius: 300px 300px 0 0; background: #FB7B3F; float: right; z-index: 0; margin-top: -150px;}*/
.main-section .halfCircle {float: right; z-index: 0; width: 0%; margin-top: 0%; transition: 0.75s ease-in-out; transition-delay: 0.75s;}
.main-section .halfCircle.animate {float: right; z-index: 0; width: 36%; margin-top: -18%;}

/*Foundation Overrides - Orbit Slider*/
.orbit-container .orbit-prev {margin-top: 45px;}
.orbit-container .orbit-prev, .orbit-container .orbit-next {height: 100%; margin-top: 0; top: 0; width: 45px;}
.orbit-container .orbit-slide-number {left: 55px; color: #606060; opacity: 0.4; font-size: 18px; line-height: 45px; font-weight: 100; top: 0;}
.pagination .orbit-prev.prev {margin: 0; width: auto; text-indent:0 !important; height: auto;}
.orbit-container .orbit-prev > span, .orbit-container .orbit-next > span {position: fixed;}
.orbit-container .orbit-next > span {right: 0; left: auto;}
.orbit-container .orbit-prev > span {border-right-color: #606060;}
.orbit-container .orbit-next > span {border-left-color: #606060;}
.orbit-container .orbit-prev:hover > span {border-right-color: #f2efef;}
.orbit-container .orbit-next:hover > span {border-left-color: #f2efef;}


/*Mobile & Tablet-Portrait View*/
@media only screen and (max-width: 54em){
    /*Hide on mobile
	.projectPage .screens div:nth-child(n+2) {display:none;}*/
    .projectPage .pagination.aboveDescription {display: none;}
    .projectPage h1 {font-size: 1.25em; width: 100%; font-weight: 200; padding-left: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 32px;}
	.designProcess .processSection.row p {font-size: .8em;}
	.designProcess .processSection.row img {margin-bottom: 1em;}
}

@media only screen and (max-width: 48em){
	.main-section .halfCircle {display: none;}
	.titlePage h1 {font-size: 1.8em;}
	.titlePage h2 {font-size: 1.25em;}
	.footer span {display: block; float: none !important; text-align: center; padding: .5em;}
	.clearing-close {text-align: center; position: absolute; top: 46px; right: 0; left: 0; background: #000;}
}

/*Project Page - Recent Projects*/
@media only screen and (max-width: 52em){
	.main-section .halfCircle {display: none;}
	.titlePage h1 {font-size: 1.8em;}
	.titlePage h2 {font-size: .8em;}
	.projects .projectType li {width: 100%; background: #fff; border: 1px solid #ccc;  padding: 0; margin-bottom: .5em; line-height: 1em;}
	.projects .projectType li:last-child {margin-bottom: 1em;}
	.projects .projectType li h4 {line-height: 3em; margin: 0;}
	.projects .projectType li img {display: none;}
	.projects .projectList li {width: 100%;}
}

/*Desktop View Small*/
@media only screen and (min-width: 54em){
    .projectPage .pagination.aboveDescription {display: block;}
	.projectPage .pagination.belowDescription {display: none;}
}

/*Desktop View Large*/
@media only screen and (min-width: 68em){
    .projectPage .large-8 {width: 58.3333%;}
    .projectPage .large-4 {width: 41.6667%;}
}

@media only screen and (min-width: 80em){
    .projectPage .large-8 {width: 52.3333%;}
    .projectPage .large-4 {width: 47.6667%;}
}