/* ==========================================================================
   BASE STYLING
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Brandon's Custom Styles
   ========================================================================== */

body {
	background-color:#ffffff;
}

main {

}

nav {
	width:100%;
	height:60px;
	text-align:center;
	background-color:#ffffff;
	color:#1A1A1A;
}

h1 {
	font-family: bebas-neue, sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#1A1A1A;
	font-size:32px;
	line-height:32px;
	text-align:left;
	padding:0 0 10px 0;
	margin:0;
}

h2 {
	font-family: bebas-neue, sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#1A1A1A;
	font-size:20px;
	line-height:22px;
	text-align:left;
	padding:0;
	letter-spacing: 5px;
	box-sizing: border-box;
}

h3 {
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 500;
	font-style: normal;
	color:#1A1A1A;
	font-size:12px;
	line-height:12px;
	letter-spacing:2px;
	margin:0 0 10px 0;
}

.nav_container_outer {
	width:700px;
	margin:0 auto 0 auto;
	border-top:1px solid #444444;
	text-align:center;
	padding-top:20px;
}

.nav_container_inner {
	width:600px;
	margin:0 auto 0 auto;
	text-align:center;
}

.nav_1, .nav_2, .nav_3 {
	float:left;
	text-align:center;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	font-size:13px;
	line-height:13px;
	letter-spacing:3px;
}

.nav_1 {width:30%;}

.nav_2 {width:30%;}

.nav_3 {width:40%;}

.whitelink {
	color:#ffffff !important;
}

.cover {
	width:100%;
	height:540px;
	background-image: linear-gradient(90deg, rgba(0,174,255,1.00) 50%, rgba(30,30,30,1.00) 50%);
	text-align:center;
	vertical-align:bottom;
}

.nameplate_1, .nameplate_2 {
	width:100%;
	vertical-align:top;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#1A1A1A;
	text-align:center;
}

.nameplate_1 {
	padding:60px 0 10px 0;
	font-size:16px;
	line-height:16px;
	text-align:center;
	letter-spacing: 2px;
}

.nameplate_2 {
	width:400px;
	margin:0 auto 0 auto;
	border-top:1px solid #444444;
	padding:10px 0 100px 0;
	font-size:11px;
	line-height:11px;
	text-align:center;
	letter-spacing: 6px;
}

.about, .design, .development {
	background-color:#ffffff;
	width:1280px;
	margin:0 auto 0 auto;
	padding-top:60px;
	padding-bottom:200px;
}

.left_column, .middle_column, .right_column {
	float:left;
	padding:20px 20px 0 20px;
	box-sizing: border-box;
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#1A1A1A;
	font-size:12px;
	line-height:12px;
	letter-spacing:2px;
}

.left_column {
	width:34%;
}

.middle_column, .right_column {
	width:50%;
}

.middle_column {
	padding:0 20px 0 0;
}

.right_column {
	padding:0 0 0 20px;
}

.column_container {
	float:right;
	width:66%;
	box-sizing: border-box;
	padding:20px 20px 0 20px;
}

.column_block_1 {
	width:50px;
	float:left;
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#1A1A1A;
	font-size:12px;
	line-height:12px;
	letter-spacing:2px;
	padding:7px 0 7px 0;
}

.column_block_2 {
	width:300px;
	float:right;
	padding:3px 0 3px 0;
}

.photo {
	width:280px; 
	height:auto;
	padding:0 0 40px 0;
}

.body_txt {	
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#1A1A1A;
	letter-spacing: 0;
	font-size:13px;
	line-height:18px;
	padding:0 0 30px 0;
}

.rule {
	border-top:1px solid #1A1A1A;
	margin:0 0 30px 0;
}

.subhead {
	font-family: bebas-neue, sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#1A1A1A;
	font-size:16px;
	line-height:20px;
	text-align:left;
	padding:0;
	letter-spacing: 2px;
	box-sizing: border-box;
}

.slider {
	width:300px;
	height:20px;
}

.sticky {
  	position: fixed;
 	top: 0;
  	width: 100%;
	background-color:#0095d9;
}

.sticky + main {
  	padding-top:60px;
}

.timeline, .work {
	padding:40px 0 0 0;
}

.shift {
	float:left;
	width:auto;
	padding:0;
	margin-top:0;
}

.years {
	width:88%;
	float:right;
	text-align:right;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#8E8E8E;
	letter-spacing: 0;
	font-size:13px;
	line-height:13px;
	padding:0 0 0 0;
	margin-top:10px;
}

.work_label {
	width:30%;
	float:right;
	text-align:right;
	font-family: proxima-nova, sans-serif;
	font-weight: 500;
	font-style: normal;
	color:#1A1A1A;
	letter-spacing: 0;
	font-size:13px;
	line-height:13px;
	padding:0 0 0 0;
	margin-top:10px;
}

.work_company, .work_years, .work_title, .work_desc {
	float:left;
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 500;
	font-style: normal;
	color:#1A1A1A;
	letter-spacing: 0;
	font-size:14px;
	line-height:14px;
	padding:0 0 0 0;
	margin:0;
}

.work_company, .work_title {
	width:25%;
}

.work_years, .work_desc {
	width:60%;
	padding-left:20px;
	box-sizing: border-box;
}

.work_title, .work_desc {
	font-size:13px;
	line-height:17px;
	font-weight: 250;
	padding-top:20px;
}


.year_1 {
	float:right;
	text-align:right;
	width:52px;
}

.timeline_labels {
	float:left;
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#BDBDBD;
	letter-spacing: 0;
	font-size:13px;
	line-height:13px;
	padding:0 0 0 0;
}

.timeline_graph {
	float:right;
	width:630px;
}

.pie {
	text-align:right;
	width:15%; 
	float:left; 
	padding-left:10px; 
	box-sizing: border-box;
	padding-bottom:20px;
}

.work_desc {
	padding-bottom:20px;
}

.design_main, .design_main2, .bkgd_d2, .bkgd_d3, .bkgd_d4, .bkgd_d6, .bkgd_d7, .bkgd_d8 {
	width:800px; 
	height:563px; 
	background-image:url(../img/web_guardian_800.jpg); 
	background-repeat:no-repeat; 
	margin-bottom:30px;
}

.design_main2 {
	background-image:url(../img/pp_01.jpg); 
}

.bkgd_d2 {
	background-image:url(../img/visa_800.jpg); 
}

.bkgd_d3 {
	background-image:url(../img/starbase_800.jpg); 
}

.bkgd_d4 {
	background-image:url(../img/cc_800.jpg); 
}

.bkgd_d6 {
	background-image:url(../img/pp_02.jpg); 
}

.bkgd_d7 {
	background-image:url(../img/pp_03.jpg); 
}

.bkgd_d8 {
	background-image:url(../img/pp_04.jpg); 
}


.thumb_design_1, .thumb_design_2, .thumb_design_3, .thumb_design_4, .thumb_dev_1, .thumb_dev_2, .thumb_dev_3, .thumb_dev_4 {
	float:left; 
	width:50%; 
	height:auto; 
	box-sizing: border-box;
}

.thumb_design_1, .thumb_design_3, .thumb_dev_1, .thumb_dev_3 {
	padding:0 20px 0 0;
}

.thumb_design_2, .thumb_design_4, .thumb_dev_2, .thumb_dev_4 {
	padding:0 0 0 20px;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   RESPONSIVE STYLING
   ========================================================================== */

@media only screen and (max-width: 1280px) {
	
.about, .design, .development {
	width:100%;
}

.middle_column, .right_column {
	width:100%;
	float:none;
	padding:20px 20px 0 20px;
}
	
.photo {
	width:280px;
	height:auto;
}
	
.middle_column {
	
}
	
.design_main, .design_main2, .bkgd_d2, .bkgd_d3, .bkgd_d4 {
	display:none;
}
	
.column_block_1 {
	width:25%;
	float:left;
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#cccccc;
	font-size:12px;
	line-height:12px;
	letter-spacing:2px;
	padding:7px 0 7px 0;
}

.column_block_2 {
	width:75%;
	float:left;
	text-align:left;
	padding:3px 0 3px 0;
}
	
h3 {
	width:25%;
	display:block;
	padding:0;
}
	
.photo {
	width:100%;
	height:auto;
}
	
.timeline, .work_label, .pie {
	display:none;
}

.work_years, .work_desc {
	width:75%;
}

.thumb_design_2, .thumb_design_4 {
	padding:0 20px 20px 0;
}
	
.thumb_design_1, .thumb_design_3 {
	padding:0 20px 20px 0;
}

}

@media only screen and (max-width: 848px) {
	
.tree {
	width:100% !important;
	height:auto !important;
}
	
.cover {
	height:inherit;
}
	
}

@media only screen and (max-width: 800px) {
    	
nav {
	width:100%;
	height:60px;
	text-align:center;
}

.nav_container_outer {
	width:100%;
	padding-top:10px;
	box-sizing:border-box;
	border:none;
}

.nav_container_inner {
	width:100%;
	box-sizing:border-box;
}

.nav_1, .nav_2, .nav_3, .nav_4 {
	font-size:11px;
	line-height:12px;
	letter-spacing:1px;
	box-sizing:border-box;
	padding:0 10px 0 10px;
}

.nameplate_2 {
	width:100%;
}
	
.about, .design, .development{
	width:100%; 
}

.left_column, .middle_column, .right_column {
	width:100%;
	float:none;
	padding:20px 20px 0 20px;
}
	
.photo {
	width:280px;
	height:auto;
}

.middle_column, .right_column {
	display:block;
	float:none;
	padding:0 0 0 0;
}
	
.middle_column {
	
}

.column_container {
	float:none;
	width:100%;
	display:block;
	padding:20px 20px 0 20px;
}

.column_block_1 {
	width:25%;
	float:left;
	text-align:left;
	font-family: proxima-nova, sans-serif;
	font-weight: 250;
	font-style: normal;
	color:#cccccc;
	font-size:12px;
	line-height:12px;
	letter-spacing:2px;
	padding:7px 0 7px 0;
}

.column_block_2 {
	width:75%;
	float:right;
	text-align:right;
	padding:3px 0 3px 0;
}
	
h3 {
	width:25%;
	display:block;
	padding:0;
}

.work_company, .work_title, .work_years, .work_desc {
	float:none;
	width:100%;
	display:block;
}
	
.work_years, .work_desc {
	padding-left:0;
}
	
.work_company {
	padding-bottom:10px;
}
	
.thumb_design_1, .thumb_design_2, .thumb_design_3, .thumb_design_4, .thumb_dev_1, .thumb_dev_2, .thumb_dev_3, .thumb_dev_4 {
	float:none; 
	width:100%; 
	height:auto; 
	padding:0 0 20px 0;
	text-align: center;
}
	
}
	
@media only screen and (max-width: 450px) {

.nameplate_2 {
	border-top:none;
	padding:10px 0 140px 0;
}
	
.column_block_1 {
	width:25%;
}
	
.column_block_2 {
	width:75%;
}
	
.slider{
	width:200px;
	height:auto;
}
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; 
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}