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

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

*:before, *:after {
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', sans-serif !important;
    font-size: 15px;
		font-weight: 400;
    line-height: 1.42857143;
    color: #4a4b4b;
    background-color: #fff;
		margin-top: 113px;
}
.container {
	width:90%;
	max-width:1250px;
	display:block;
	margin:0 auto;
}

h1 {font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 600; color: #2b3a56; text-transform: none;}
h2 {font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 600; color: #f28b3d; text-transform: none;}
h3 {font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 600; color: #8bb7c4; text-transform: none;}
h4 {font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; color: #e95b35; text-transform: none;}
h5 {font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600; color: #4a4d4d; text-transform: none;}
h6 {font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; color: #a1a1a0; text-transform: none;}

a {color: #e95b35; text-decoration: none; cursor: pointer; -webkit-transition: all 225ms ease-in 0s; -moz-transition: all 225ms ease-in 0s; -o-transition: all 225ms ease-in 0s; -ms-transition: all 225ms ease-in 0s; transition: all 225ms ease-in 0s;}
a:hover, a:focus {color: #4a4b4b; text-decoration: none;}

a.anchor1 {display: block; position: relative; top: -125px; visibility: hidden;}
a.anchor {display: block; position: relative; top: -140px; visibility: hidden;}

.tier {padding: 30px 0;}
.heading {margin-bottom: 50px;}
.heading h3 {color: #4a4b4b;}
.heading hr {
    width: 85px;
    background-color: #e4e6e7;
    height: 4px;
    margin: 20px auto 30px;
    border: none;
    outline: none;
}
.heading p {max-width: 700px; margin: 0 auto;}

header {
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
		z-index: 10;
		box-shadow: 0 3px 2px -1px rgba(55, 55, 55, 0.2);
		height: 113px;
}
#logo {
		width: 317px; 
		margin-top: 10px;
}


/* begin menu styles */
nav ul {
    display: inline-block;
    list-style: none outside none;
    margin: -44px 0 0;
    padding: 0;
    text-align: right;
    float: right;
}
nav li {
    color: #4a4b4b;
    display: inline-block;
    border: none;
    outline: none;
    line-height: 30px;
}
nav li a {
    color: #4a4b4b;
    padding: 0px 20px;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
		font-family: 'Montserrat', sans-serif;
}
nav li a:hover {
    color: #f9a83c;
    background-color: transparent;
    border: none;
		text-decoration: none;
}
nav a {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#mobile-menu {
    display: none;
}



/* begin hero styles */
#heroSection-out {
    background: linear-gradient( rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) ), url(/graphics/hero-img.jpg) no-repeat scroll 0 0 / cover transparent;
    min-height: 595px;
}
#heroSection {
    text-align: center;
    padding: 160px 0;
}
#heroSection p {
    font-size: 18px;
		font-weight: 400;
}
#heroSection span {
    background-color: #f9a83c;
    color: #fff;
    padding: 20px 40px;
    display: inline-block;
		font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 12px;
    line-height: 25px;
}



/* begin about me styles */
#topContent-out {display: none;}



/* begin about me styles */
#aboutMe-out {background-color: #f6f6f6;}



/* begin what i do styles */
#whatIDo-out {background-color: #ffffff;}
#whatIDo .heading {margin-bottom: 20px;}
.what-block {margin-top: 0px; padding: 0 20px 20px;}
.what-block i {font-size: 72px; color: #444; padding: 0px 0 10px;}
.what-block .title {margin-top: 20px; color: #f9a83c;}
.summary {color: #777;}



/* begin my work styles */
#myWork-out {background-color: #f6f6f6;}

/** filters list **/
#filter-list {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 25px;
	padding-left:0;
}
#filter-list li {
  background-color: #4a4a4b;
	color: #fff !important;;
	font-weight: 500 !important;
	font-size: 16px !important;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	border: none;
	padding: 7px 30px;
	text-decoration: none;
	margin: 6px 2px 12px 0;
	-webkit-appearance: none;
	cursor: pointer;
	display: inline-block;
  position: relative;
	-webkit-transition: all .01s ease-in 0.01s;
  -moz-transition: all .01s ease-in 0.01s;
  -o-transition: all .01s ease-in 0.01s;
  -ms-transition: all .01s ease-in 0.01s;
  transition: all .01s ease-in 0.01s;
}
#filter-list li:hover {background-color:#878787;}
#filter-list li.active {background-color:#f9a83c;}
#filter-list li.active::before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    content: "";
    bottom: -12px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #f9a83c;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/** portfolio list **/
#portfolio-list {
	display: block;
  width: 100%;
  padding: 0;
  margin-bottom:0;
	text-align: center;
}
#portfolio-list .item {
	display: none;
	border: 1px solid #e0e0e0;
	opacity: 0;
	width: 31%;
	vertical-align: top;
	margin:0 1% 25px 1%;
	color: #fff;
	font-size: 30px;
	text-align: center;
	-moz-box-sizing: border-box;
	-webkit-transition: all 225ms ease-in 0s;
	-moz-transition: all 225ms ease-in 0s;
	-o-transition: all 225ms ease-in 0s;
	transition: all 225ms ease-in 0s;
}
#portfolio-list .item:hover {opacity: 0.6 !important;}
#portfolio-list .item button {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    padding: 0;
    text-decoration: none;
}
#portfolio-list .item img {max-width: 100%;}



/* begin my skills styles */
#mySkills-out {}
.progress {
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 12px solid #fcd39d;
    position: absolute;
    top: 0;
    left: 0;
		opacity: 0.6;
}
.progress > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress .progress-left {left: 0;}
.progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 12px;
    border-style: solid;
		box-shadow: none;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress .progress-right {
    right: 0;
}
.progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 0.5s linear forwards;
}
.progress .progress-value {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: transparent;
    font-size: 35px;
		font-weight: 600;
    color: #4a4b4b;
    line-height: 135px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%;
}
.progress-value span {
    font-weight: 400;
    font-size: 20px;
    color: #a1a1a0;
		padding-left: 3%;
}
.progress-info {
    margin-top: 20px;
    padding: 0 10px;
    font-size: 14px;
    color: #777;
}
.progress-info h6 {
    font-weight: 100;
    text-transform: uppercase;
    color: #444;
    font-size: 15px;
}
.progress-info hr {
    width: 20px;
    background-color: #e4e6e7;
    height: 2px;
    margin: 0 auto 20px;
    border: none;
    outline: none;
}



/* 100% */
.progress.html .progress-bar {border-color: #f9a83c;}
.progress.html .progress-left .progress-bar {animation: loading-1 0.5s linear forwards 0.5s;}
/* 50% */
.progress.css .progress-bar {border-color: #f9a83c;}
.progress.css .progress-left .progress-bar {animation: loading-2 0.5s linear forwards 0.5s;}
/* 75% */
.progress.illustrator .progress-bar {border-color: #f9a83c;}
.progress.illustrator .progress-left .progress-bar {animation: loading-3 0.5s linear forwards 0.5s;}
/* 85% */
.progress.photoshop .progress-bar {border-color: #f9a83c;}
.progress.photoshop .progress-left .progress-bar {animation: loading-5 0.5s linear forwards 0.5s;}



/* 100% Value */
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
/* 90% Value */
@keyframes loading-2{ 
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
    }
}
/* 75% Value */
@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
/* 60% Value */
@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
    }
}
/* 85% Value */
@keyframes loading-5{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(126deg);
        transform: rotate(126deg);
    }
}



/* begin contact me styles */
#contactMe-out {
    background-color: #f9a83c;
}
#contactMe .heading h3 {
    color: #fff;
}
#contactMe .heading hr {
    background-color: rgba(55, 55, 55, .15);
}
#emailForm {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
#emailForm input {
    background-color: rgba(55, 55, 55, 0.15);
    border: none;
    padding: 4px 7px;
    color: #4a4a4b;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
#formFull, #formEmail {
    width: 49%;
    display: inline-block;
}
#formEmail {
    float: right;
}
#emailForm textarea {
    background-color: rgba(55, 55, 55, 0.15);
    border: none;
    padding: 4px 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    margin: 10px 0;
		height: 100px;
}
textarea[name="comments"] {
    resize: none;
}
#formSubmit {
    background-color: #4a4a4b !important;
    color: #fff !important;
    text-transform: uppercase;
    padding: 10px 30px !important;
		-webkit-transition: all .25s ease-out 0.1s;
		-moz-transition: all .25s ease-out 0.1s;
		-o-transition: all .25s ease-out 0.1s;
		-ms-transition: all .25s ease-out 0.1s;
		transition: all .25s ease-out 0.1s;
}
#formSubmit:hover {
    background-color: rgba(55, 55, 55, 0.4) !important;
}

#emailForm input::-webkit-input-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}
#emailForm input :-moz-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}
#emailForm input ::-moz-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}
#emailForm input :-ms-input-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}

#emailForm textarea::-webkit-input-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}
#emailForm textarea :-moz-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}
#emailForm textarea ::-moz-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}
#emailForm textarea :-ms-input-placeholder {color: #4a4a4b !important; font-weight: 500 !important;}


/* begin footer styles */
footer {
    background-color: #252a30;
    padding: 20px 0;
    color: #6a6a6a;
    font-size: 14px;
    font-weight: 600;
}
#top {
    float: right;
}
#copyright {
    display: inline-block;
    line-height: 50px;
}
#backtop {
    display: inline-block;
    float: right;
    font-size: 23px;
    background-color: #555;
    box-shadow: inset -1px -1px 1px -1px rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #222;
    text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.15);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#backtop:hover {
    background-color: #f9a83c;
}



/* begin subpage styles */
#portfolioItem {
    display: inline-block;
    background-color: transparent;
    margin-bottom: 25px;
    padding: 20px;
}
#portLeft {float: left; width: 60%;}
#portLeft img {
    width: 100%;
}
#portRight {float: left; width: 40%; padding-left: 30px;}
#portRight h3 {
    color: #4a4b4b;
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    text-transform: none;
    margin: 0 0 15px;
		font-family: 'Montserrat', sans-serif;
}
#portRight p {}
#portDetails ul {padding: 0; list-style: none; margin: 0;}
#portDetails li {padding: 4px 0; font-size: 12px;}
#portDetails li span {font-weight: 600; font-size: 14px; padding-right: 5px;}
#portDetails li a {
    border: 1px solid #ccc;
    color: #4a4b4b;
    padding: 5px 10px;
    display: inline-block;
    margin: 0 3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#portDetails li a:hover {
    border: 1px solid #f9a83c;
		background-color: #f9a83c;
    color: #fff;
		text-decoration: none;
}





/* begin media queries */

@media all and (max-width:1200px) {
		body {margin-top: 85px;}
		header {height: 85px;}
		#logo {width: 250px; margin: 0;}
		nav ul {margin: -37px 0 0 auto;}
		nav li a {font-size: 15px; padding: 0 15px;}
		#heroSection-out {min-height: auto;}
		#heroSection {text-align: center; padding: 13% 0;}
		a.anchor {top: -113px;}
}


@media all and (max-width:1000px) {
		.progress {width: 110px; height: 110px; line-height: 110px;}
		.progress .progress-bar, .progress::after {border-width: 8px;}
		.progress .progress-value {font-size: 28px; line-height: 100px;}
		.progress-info {padding: 0; font-size: 13px;}
		nav li a {font-size: 14px; padding: 0 7px;}
		#heroSection span {font-size: 30px; padding: 15px 20px;}
		#portfolio-list .item {width: 45%;}
		#portLeft {width: 100%; max-width: 660px; margin: 0 auto 20px; float: none;}
		#portRight {width: 100%; padding: 0;}
}

@media only screen and (max-width: 990px){
    .progress{ margin-bottom: 20px; }
}

@media all and (max-width:767px) {
		#mySkills .col-xs-6 {margin-bottom: 30px;}
		
#main {
		display:none;
}
#nav {
		display: inline-block;
		float: right;
		margin-top: 4px;
		position: absolute;
		right: 0;
		width: 100%;
}
#mobile-menu {
    display: inline-block;
    width: 100%;
}
#menu {
    width: 45px;
    display: block;
    background-color: #4a4a4b;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    padding: 9px 9px 14px;
    line-height: 22px;
    margin: -60px 0 0px 0;
    float: right;
    color: #fff;
    cursor: pointer;
    height: 45px;
    -webkit-transition: all .25s ease-out 0.1s;
    -moz-transition: all .25s ease-out 0.1s;
    -o-transition: all .25s ease-out 0.1s;
    -ms-transition: all .25s ease-out 0.1s;
    transition: all .25s ease-out 0.1s;
}
#menu:hover {
		background-color:#f9a83c;
}
#mobile-menu ul {
		 opacity:0;
		 -webkit-transition: all .25s ease-out 0.1s;
		 -moz-transition: all .25s ease-out 0.1s;
		 -o-transition: all .25s ease-out 0.1s;
		 -ms-transition: all .25s ease-out 0.1s;
		 transition: all .25s ease-out 0.1s;
}
#mobile-menu li a {
    display: block;
    width: 100%;
    background-color: #4a4a4b;
    border-bottom: 1px solid #333333;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
		-webkit-transition: all .25s ease-out 0.1s;
		-moz-transition: all .25s ease-out 0.1s;
		-o-transition: all .25s ease-out 0.1s;
		-ms-transition: all .25s ease-out 0.1s;
		transition: all .25s ease-out 0.1s;
}
#mobile-menu li a:hover {
		border-radius:0;
		background-color:#f9a83c;
		color:#fff;
}
#mobile-menu li:last-child a {
		border-bottom:none;
}
#nav.js {
		display: none;
		opacity:1.0;
		-webkit-transition: all .5s ease-out 0.5s;
		-moz-transition: all .5s ease-out 0.5s;
		-o-transition: all .5s ease-out 0.5s;
		-ms-transition: all .5s ease-out 0.5s;
		transition: all .5s ease-out 0.5s;
}
#nav li {
		display: block;
		font-size: 22px;
		line-height: 30px;
		text-align:center;
		width: 100%;
}
#nav li:last-child {
		border-bottom:none;
}
#nav .alt {
		background-color:#ececec;
		border-bottom:none;
}
#emailForm input {
    width: 100%;
    margin: 0 0 10px 0;
}
#emailForm textarea {
    margin-top: 0;
}
#portfolio-list .item {
    width: 100%;
    max-width: 390px;
}
}

@media all and (max-width:480px) {
#mySkills .col-xs-6 {width: 100%;}
#heroSection span {font-size: 26px; line-height: 30px; padding: 10px;}
header .container {padding: 0;}
#menu {width: 34px; padding: 0; height: 34px; line-height: 28px; margin-top: -51px;}
#logo {width: 200px; margin-top: 5px;}
}