@charset "UTF-8";
/* CSS Document */

body {
	border-right: 1.5em solid #cccc33;
	border-left: 1.5em solid #cccc33;
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	background-color: white;
}


/* HEADER ART & TOP CONTACT INFO */


.jumbotron {
	max-height: 400px;
	background-color: black;
	background-image: url(../images/Mtns_Vector.svg);
	background-repeat: no-repeat;
	background-size: 100% 95%;
	margin-top: -10px;
	padding-bottom: 30px;
	text-align: center;
	color: white;
	margin-bottom: 0px;
}

.jumbotron .img-responsive {
	margin-top: -50px;
	margin-bottom: 5px;
	max-height: 200px;
}



.lead {
	color: #cccc33;
	background-color: black;
	font-family:roboto;
	font-weight: 300;
	font-size: 2.5rem;
	padding-left: 20px;
	letter-spacing: 3px;
	padding-top: 20px;
	padding-bottom: 10px;
	border: none;
}


.headInfo .btn {
	font-family: 'roboto';
	font-size: .9em;
	letter-spacing: 1px;
	background-color: black;
	border: .1em solid #cccc33;
	border-radius: 0px;
	border-top: none;
	padding-top: 0px;
	margin-right: 5px;
	margin-left: 5px;
}


.headInfo .btn-primary:hover {
	color: #ea4d48;
}

.jumbotron h1 {
	font-family: 'Cabin Condensed', sans-serif;
    color: #f5e9e0;
    text-shadow: #b44641 3px -2px, #b44641 -2px -2px,
	#5b2c36 9px 9px 15px;
    left: -6px;
    top: -6px;
	letter-spacing: 2px;
}



/* NAV LINKS */

.navIcon {
	background-color: #000;
	width: 100%;
}

.icon-bar {
    background-color: #000; /* Dark-grey background */
    overflow: auto; /* Overflow due to float */
    width: 50vw;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 2px;
}


.icon-bar a {
    float: left; /* Float links side by side */
    text-align: center; /* Center-align text */
    width: 25%; /* Equal width (4 icons with 20% width each = 100%)*/
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: #9d9d9c; /* White text color */
    font-size: 30px; /* Increased font size */
}

.icon-bar a:hover {
	color: #cccc33;
    background-color: #555; /* Add a hover color */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.icon-bar .active {
	color: #cccc33;
}

a:hover.active {
	background-color: black;
}


.fa-home {
	font-size: 33px !important;
	vertical-align: -2px;
}

.fa-briefcase {
	font-size: 27px !important;
	vertical-align: middle;
}

.fa-file-text {
	font-size: 24px !important;
}

.fa-commenting {
	font-size: 28px !important;
}

/* HEADING / LEAD IN */

.about {
	margin-bottom: 10px;

}

.about h4 {
	color: #545454;
	letter-spacing: .2em;
	font-weight: 200;

}

.about p {
	font-size: 1.5em;
	line-height: 2em;
}

.JKname {
	font-weight: 700;
	font-family: roboto;
	letter-spacing: .5px;
}


.skillList {
	padding-left: 0px;
	margin-top: 0px;
	text-align: left;
}


.fa-eye, .fa-code, .fa-object-group, .fa-calendar {
	color: #9b9740;
}


.skillBullet {
		padding-bottom: 15px;
	line-height: 1.2em;
}


.skillHead {
	font-size: .9em;
	font-weight: 900;
	padding-left: 6px;
}

.skillDeat {
	font-style: italic;
	font-size: .9em;
}



.resInfo img {
	margin-top: -10px;
	padding-right: 2px;
}

.fa-file-text-o {
	color: #ea4d48;
}

.resInfo a {
	color: #545454;
	font-weight: bold;
	font-size: 1.5em;
}

.resInfo a:hover {
	color: #ea4d48;
	padding-bottom: 8px;
	border-bottom: 1px solid #cccc33;
	text-decoration: none;
}

hr.style-gradLine2 { 
     border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-top: -14px;
	margin-bottom: 8px;
} 

.resInfo {
	margin-bottom: 40px;
}



/* WORK SECTION */


.workGallery {
	padding-top: 50px;
	max-width: 80vw;
}

/* WORK SECTION TEXT */

.sectionTitle {
	font-family: roboto;
	text-align: center;
	font-size: 2.3em;
	color: #545454;
	text-decoration: none;
	border-bottom: none;
}

.anchorWork a {
	text-decoration: none;
}
	

/* WORK SECTION TEXT */


p.projHead a:link {
	/*color: #ea4d48; this is peach, need to adjust in FF*/
	color: #545454;
	font-family: lato;
	font-style: italic;
	font-size: 1.8em;
	line-height: 1.5em;
	padding-top: 0px;
	margin-top: 0px;
}


p.projHead a:hover {
	color: #545454;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid #cccc33;
}

p.projHead a:visited {
	color: #545454;
}
.thumbnail .projHead a {
}


.label {
	background-color:#E4E4E4;
	color: #545454;
	font-family: roboto;
	font-size: 1.1em;
	font-weight: 900;
	letter-spacing: .9px;
	margin-right: 5px;
	line-height: 3em;
}

/* WORK SECTION IMAGE */


hr.style-gradLine { 
    border: 0;
    height: 1px;
    background: #545454;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
	margin-top: -14px;
} 


.thumb img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    margin-bottom:20px;
}

.thumb img:hover {
  filter: none; /* IE6-9 */
  -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */

}

.thumb {
    margin-bottom: 60px;
	text-align: center;
}

.thumb a:hover{
	text-decoration: none;
}

.thumbnail {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border: 0px;
}



/* DETAIL PAGE */

.pagerControls {
	margin-bottom: 40px;
}

.pager a {
	font-family: lato;
	font-size: .9em;
	color: #606060;
}


.pager li > a,
.pager li > span {
  border: none;
}

.pager .disabled > a {
	color: #9d9d9c;
}

li.rightControl a {
	border: 1px solid #9d9d9c;
	border-top: none;
	border-left: none;
	border-radius: 0px;
}


li.leftControl a {
	border: 1px solid #9d9d9c;
	border-top: none;
	border-right: none;
	border-radius: 0px;
}


.workDetailHead  {
	color: #ea4d48;
	font-family: lato;
	font-size: 3.5em;
	font-style: italic;
	text-align: center;
	letter-spacing: 2px;
	font-weight: 300;
	margin-top: 0px;
}


.detailLead {
	max-width: 80vw;
}


.style-gradLine3 {
	max-width: 80vw;
	border-bottom: 3px dotted #cccc33;
}


.detailColumn {
	padding-top: 50px;
	max-width: 90vw;
}


.detailColumn p, li {
	font-family: lato;
	font-weight: normal;
	font-size: 1.6em;
	color: black;
	line-height: 1.7em;
	letter-spacing: .1px;
	list-style: none;
}


.detailColumn .label {
	font-size: .8em;
	line-height: 35px;
}


.detailHead {
	font-weight: bold;
	color: #ea4d48;
}

.projectBlurb {
	padding: 12px 11px 11px 20px;
	border: 3px #cccc33 dotted;
	margin-bottom: 40px;
}


.projectBlurbHead {
	padding: 12px 11px 11px 20px;
	border: 3px #cccc33 dotted;
	margin-bottom: 40px;
}


.blurbDetails {
	margin-top: 0px;
	padding-left: 5px;
	padding-right: 5px;
}


.iconList {
	float: left;
	padding-top: 3px;
}


.photoIcon {
		padding-top: 0px;
}


p.textList {
margin-left: 60px;
line-height: 1.4em;
}


.detailHead .projectBlurbHead p{
	text-align: center;
}


/* DETAIL PAGE IMAGES */

.figure {
	margin-top: 20px;
}

.figure-caption {
	padding-top: 15px;
	text-align: center;
	color: #545454;
	font-family: roboto;
	padding-bottom: 50px;
}


.containerGoodwill  {
margin: 0 auto;
width: 100%;
display: block;  
text-align: center;
}

.topSocialGW {
	padding-top: 50px;
}



/* VIDEO */

video {
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}





/* PROFILE SECTION */

.profileInfo img {
	margin-top: -10px;
}

.profileInfo a {
	color: #ea4d48;
	font-weight: bold;
	font-size: 1.5em;
}

.profileInfo a:hover {
	color: #545454;
	padding-bottom: 8px;
	border-bottom: 1px solid #cccc33;
	text-decoration: none;
}


.profileIntro {
	padding-top: 10px;
	padding-bottom: 15px;
	font-family: lato;
	font-weight: normal;
	font-size: 1.6em;
	line-height: 1.7em;
	color: black;
	letter-spacing: .1px;
}


.profileInfo li {
	list-style: none;
	color: #ea4d48;
	font-style: italic;
	font-weight: bold;
	letter-spacing: .4px;
	line-height: 1.5em;
	padding-bottom: 14px;
}

ul.profileQA  {
	margin-left: -40px;
}

.profileQA .category {
	color: black;
	font-size: 1em;
	font-style:normal;
	font-weight: normal;
	letter-spacing: -.3px;
}

.profileInfo .img-circle {
	padding-left: 5px;
	align-content: center;
}



/* FOOTER SECTION */

.bttmInfo {
	margin-top: 20px;
  	text-align: center;
}


.bttmInfo .btn-primary {
	background-color: black;
	border-color: black;
	font-family: lato;
	letter-spacing: 1px;
	font-size: 2em;
}

.bttmInfo .btn-primary:hover {
	color: #ea4d48;
	background-color: black;
	border-color: #cccc33;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0px;
	padding-bottom: 2px;
}


.contactInfo {
	background-color: black;
	width: auto;
	text-align: center;
	margin-top: 80px;
	border-top: 2px solid #cccc33;
}


.page-footer {
	color: #cccc33;
	font-family: roboto;
	font-weight: 100;
	font-size: 2.3em;
	letter-spacing: 2px;
	text-align:center;
	background-color: black;
	padding-top: 10px;
	margin-top: -20px;
	margin-bottom: 15px;
	border: 2px solid #cccc33;
	border-bottom: 0;
}



.copyright {
	color: #9d9d9c;
	text-align: center;
	padding-top: 70px;
	margin-bottom: 30px;
	font-family: lato;
	font-size: 1.2em;
	letter-spacing: 2px;
}



@media (max-width: 371px){
	
	.jumbotron h1 {
		font-size: 6em;
	}
	
	.jumbotron a.btn.btn-primary {
		font-size: .75em;
	}
}


@media (min-width: 372px) and (max-width: 991px){
	.jumbotron h1 {
		font-size: 8em;
	}
}

@media (min-width: 992px) and (max-width: 1199px){
	.jumbotron h1 {
		font-size: 9em;
	}
}

@media (min-width: 1200px){
	.jumbotron h1 {
		font-size: 11em;
	}
}


@media (min-width: 559px) and (max-width: 570px){
	
	.jumbotron h1 {
		line-height: .95em;
	}
	
	.headInfo {
	margin-top: -50px;
}
	.headInfo .btn {
	margin-top: 20px;
}
	
}

@media (min-width: 481px) and (max-width: 558px){
	
	.headInfo {
	margin-top: -60px;
}
	.headInfo .btn {
	margin-top: 30px;
}
	
		.jumbotron h1 {
		line-height: .95em;
	}
	
}


@media (max-width:480px) {
.headInfo {
	margin-top: -70px;
}
	
	.headInfo .btn {
	margin-top: 30px;
}
	
	.icon-bar .fa-smile-o {
		font-size: 32px;	}
}




@media (max-width:350px) {
.headInfo .btn {
	font-size: .7em;
}
	.contactInfo h4 {
	font-size: 1.3em;
}
}


@media (max-width:441px) {
	.bttmInfo .btn-primary {
	font-size: 1.65em;
	padding: 0px;
	padding-top: 15px;
}
	
	.copyright {
	margin-top: -40px;
	font-size: 1em;
}
}

@media (max-width:441px) {
	.headInfo .btn {
	font-size: .9em;
	padding-left: 9px;
	padding-right: 9px;
	}
	
.icon-bar {
    width: 75vw;
}

.icon-bar a {
    width: 25%; /* Equal width (5 icons with 20% width each = 100%)*/
    color: #9d9d9c; /* White text color */
    font-size: 40px; /* Increased font size */	
}
	
	.fa-briefcase {
	font-size: 30px !important;
		padding-top: 5px;
}
.profileInfo .img-circle, .profileQA {
	visibility: hidden;
	margin-top: -450px;
}
.profileInfo .img-circle {
	padding-left: 5px;
}
	

}

@media (max-width:767px) {

.img-circle {
	visibility: hidden;
	margin-top: -600px;
}
	
	.summary {
	padding-bottom: 10px;
}
.topskills {
	padding-bottom: 10px;

}
.experience {
		padding-bottom: 10px;

}
	
}

@media  (min-width:992px) and (max-width:1197px) {
	.summary {
	padding-left: 50px;

}
}

@media screen and (max-width:768px){
	.lead {
		visibility: hidden;
		margin: 0;
		padding: 0;
		display:inline;
	}
}


 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:910px){
    /* Safari and Chrome, if Chrome rule needed */
    ::i-block-chrome, .videoEblast { 
				visibility: hidden;
 }
}



@media  (max-width:767px) {
	.figure-caption {
	font-size: 1.2em;
	line-height: 1.3em;
	letter-spacing: .9px;
}
}

@media  (min-width:768px) and (max-width:991px) {
	.figure-caption {
	font-size: 1.3em;
	line-height: 1.4em;
	letter-spacing: .9px;
}
}

@media  (min-width:992px) and (max-width:1199px) {
	.figure-caption {
	font-size: 1.4em;
	line-height: 1.5em;
	letter-spacing: .9px;
}
}

@media  (min-width:1200px){
	.figure-caption {
	font-size: 1.5em;
	line-height: 1.6em;
	letter-spacing: .9px;
}
}