/*!
 * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
/*custom*/
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.controls{
  padding: 2%;
  background: #333;
  color: #eee;
}
label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}
button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}
button.active{
  background: #68b8c4;
}
button:focus{
  outline: 0 none;
}
button + label{
  margin-left: 1em;
}
.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}
.container .mix{
  text-align: center;
  background: transparent;
  margin-bottom: 2%;
  display: none;
}
.container .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}
.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 2%;
}

@media all and (min-width: 420px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 23.5%;
  }
}

/*default*/
body {
  overflow-x: hidden;
  font-family: "Roboto";
}
.text-muted {
  color: #777;
}
.text-muted-light {
  color: #ddd;
}
.text-primary {
  color: #fed136;
}
p {
  font-size: 14px;
  line-height: 1.75;
}
p.large {
  font-size: 16px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
  outline: 0;
}
a {
  color: #252525;
	text-decoration:underline;
}
a:hover,
a:focus,
a:active,
a.active {
  color: #252525;
	text-decoration:none;
	font-weight:bold;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  font-family: "Roboto Slab"
  font-weight: 700;
}
.img-centered {
  margin: 0 auto;
}

.btn-primary {
  border-color: #fed136;
  text-transform: uppercase;
  font-family: "Roboto Slab"
  font-weight: 700;
  color: #fff;
  background-color: #fed136;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  border-color: #f6bf01;
  color: #fff;
  background-color: #fec503;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  border-color: #fed136;
  background-color: #fed136;
}
.btn-primary .badge {
  color: #fed136;
  background-color: #fff;
}
.btn-xl {
  padding: 20px 40px;
  border-color: #fed136;
  border-radius: 3px;
  text-transform: uppercase;
  font-family: "Roboto Slab"
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-color: #fed136;
	text-shadow: 1px 1px 3px #252525;
}
.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
  border-color: #f6bf01;
  color: #fff;
  background-color: #fec503;
}
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
  background-image: none;
}
.btn-xl.disabled,
.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active {
  border-color: #fed136;
  background-color: #fed136;
}
.btn-xl .badge {
  color: #fed136;
  background-color: #fff;
}

/*Misc*/
ul.social-buttons {
  margin-bottom: 0;
}
ul.social-buttons li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  font-size: 20px;
  line-height: 40px;
  outline: 0;
  color: #fff;
  background-color: #222;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}
ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
  background-color: #2b7a78;
}
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
  outline: 0;
}
::-moz-selection {
  text-shadow: none;
  background: #fed136;
}
::selection {
  text-shadow: none;
  background: #fed136;
}
img::selection {
  background: 0 0;
}
img::-moz-selection {
  background: 0 0;
}
body {
  webkit-tap-highlight-color: #fed136;
}
.port-pad {
  padding-top:20px;
}
h3.product-title {
 color:#fff;
}
.product-description {
  color:#fff;
}

/*navigation section*/
.navbar-default {
  border-color: transparent;
  background-color: #222;
}
.navbar-default .navbar-brand {
  font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
  color: #fff;
	text-decoration:none;
  transition: all .2s ease-in-out;
  padding:20px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
  color: #fff;
  transform: scale(1.1);
}
.navbar-default .navbar-collapse {
  border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle {
  background-color: #def2f1;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-default .navbar-toggle:hover {
  background-color: #def2f1;
}
.navbar-default .navbar-toggle:focus {
  background-color: #3aafa9;
}
.navbar-default .nav li a {
  text-transform: uppercase;
  font-family: "Roboto";
  font-weight: 400;
  letter-spacing: 1px;
  color: #fff;
	text-decoration:none !important;
  margin:5px;
  transition: background-color 0.5s ease;
  border-radius: 20px !important;
}
.navbar-default .nav li a:hover {
  outline: 0;
  color: #252525;
  background-color: #def2f1;
  border-radius: 20px;
}
.navbar-default .nav li a:focus {
  outline: 0;
  color: #fff;
  background-color: #3aafa9;
  border-radius: 20px;
}
.navbar-default .navbar-nav>.active>a {
  border-radius: 20px;
  color: #fff;
  background-color: #3aafa9;
	text-shadow: 1px 1px 2px #252525;
}
.navbar-default .navbar-nav>.active>a:hover {
  color: #fff;
  background-color: #def2f1;
  border-radius: 20px;
}
.navbar-default .navbar-nav>.active>a:focus {
  color: #fff;
  background-color: #3aafa9;
  border-radius: 20px;
}

/*background sections*/
.home {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/header_pic.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.art {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/header_portfolio_art.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.anim {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/header_portfolio_anim.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.dev {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/header_portfolio_ux.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.game {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/header_portfolio_gaming.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
/*app background images*/
.firefan {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/portfolio/apps/firefan_main_banner.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:400px;
}
.kuvera_alert {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/portfolio/apps/kuvera_alert_main_banner.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:400px;
}
.kuvera_global {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/portfolio/apps/kuvera_global_main_banner.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:400px;
}
.loyalty {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/portfolio/apps/loyalty_main_banner.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:400px;
}
.handyman {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/portfolio/apps/handyman_main_banner.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:400px;
}
.fixit {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url(../images/portfolio/apps/fixit_main_banner.jpg);
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height:400px;
}
.bg-default {
  padding-bottom:40px;
}
.light-gray {
  background-color: #f7f7f7;
}
.medium-gray {
  background-color: #def2f1;
}
.dark-grey {
  background-color: #000;
}
.grad-blue {
  /*background-color: #0b1c28;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0b1c28+0,1b4060+100 */
  background: #0b1c28; /* Old browsers */
  background: -moz-linear-gradient(top, #0b1c28 0%, #1b4060 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #0b1c28 0%,#1b4060 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0b1c28 0%,#1b4060 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b1c28', endColorstr='#1b4060',GradientType=0 ); /* IE6-9 */
}

/*home section*/
header .intro-text {
  padding-top: 170px;
  padding-bottom: 125px;
}
header .intro-text .intro-lead-in {
  font-family: "Roboto";
  font-size: 40px;
  line-height: 44px;
  font-style: italic;
}
header .intro-text .intro-heading {
  text-transform: uppercase;
  font-family: "Roboto";
  font-size: 70px;
  line-height: 80px;
  font-weight: 700;
}
section {
  padding: 30px 0;
}
section h2.section-heading {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 40px;
}
section h3.section-subheading {
  margin-bottom: 75px;
  text-transform: none;
  font-family: "Roboto";
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
}

/*Image Section*/
.pic_image {
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.responsive-img {
  width:100%;
}
.responsive-logo {
  margin:0 auto;
  width:200px;
}
.responsive-banner-img {
  width:300px;
  margin:0 auto;
}
.responsive-vid {
  margin:0 auto;
  width:80%;
}
.linkedin-logo {
  height:18px;
}
.animation-sneak-pics {
  width:100%; 
  margin:0 auto
}
.circular--square {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}
.radius--square {
  border-radius:20px;
}

/*About Section*/
.about_me_border {
  border-left:6px #2b7a78 solid;
}
.about_me_header {
  color:#222;
  font-size:40px;
  font-family: "Roboto";
  font-weight:100;
  padding-left:10px;
}
.about_me_subheader {
  color:#2b7a78;
  font-size:50px;
  margin-top:-20px;
  padding-left:10px;
  font-family: "Roboto";
  font-weight:700;
}
.about_profile_circle {
  width: 100%;
  height:100%;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  line-height: 100%;
  text-align: center;
  margin:0 auto;
}

/*Experience Section*/
.experience_border {
  border-top:2px #333 solid;
  width:50%;
  padding-bottom:5px;
  margin:0 auto;
}
.experience_header {
  color:#959595;
  font-size:48px;
  font-family: "Roboto";
  font-weight:100;
}
.experience_subheader {
  color:#000;
  font-size:70px;
  margin-top:-20px;
  font-family: "Roboto";
  font-weight:700;
}
.experience_title {
  color:#000;
  font-size:24px;
  margin-top:-20px;
}

/*Additional Section*/
.additional_fun_border {
  border-left:6px #fff solid;
}
.additional_fun_header {
  color:#7ed8d6;
  font-size:40px;
  font-family: "Roboto";
  font-weight:100;
  padding-left:10px;
}
.additional_fun_subheader {
  color:#fff;
  font-size:50px;
  margin-top:-20px;
  padding-left:10px;
  font-family: "Roboto";
  font-weight:700;
}
.additional_fun_btn {
  background:transparent;
  border:4px solid #7ed8d6;
  color:#fff;
  font-size:16px;
  width:180px;
  border-radius:20px;
}

/*Contact Me Section*/
.email-header {
  font-family: "Roboto";
  font-weight:700;
  color:#fff;
  font-size:48px;
}
section h3.email-description {
  text-transform: none;
  font-family: "Roboto";
  font-weight:100;
  color:#fff;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  margin-top:-5px;
}
section h3.email-description p {
  font-size: 14px;
  line-height:18px;
  margin-top:5px;
}
.email-description-link {
  color:#fff;
  text-decoration:underline;
  font-family: "Roboto";
}
.email-description-link:hover {
  color:#fff;
  text-decoration:underline;
}
.email_line {
  border-bottom:3px solid #222;
  padding-top:30px;
  padding-bottom:40px;
}

/*Footer Section*/
footer {
  padding-bottom: 25px;
  text-align: center;
}
footer span.copyright {
  text-transform: uppercase;
  text-transform: none;
  font-family: "Roboto";
  line-height: 40px;
}
footer ul.quicklinks {
  margin-bottom: 0;
  text-transform: uppercase;
  text-transform: none;
  font-family: "Roboto";
  line-height: 40px;
}
.copyright {
  font-size:14px;
}

/* Design Home Section */
.design_header {
  margin-top:85px;
  font-size:40px;
  color:#2b7a78;
  font-family: "Roboto";
  font-weight:100;
}
.design_subheader {
  font-size:60px;
  color:#222;
  margin-top:-18px;
  font-family: "Roboto";
  font-weight:700;
  text-transform:none;
}
.design_thick_line {
  border-top:10px #222 solid;
  width:100%;
}
.design_thin_line {
  border-top:3px #222 solid;
  width:65%;
  margin-top:-10px;
}
.design_latest_bg {
  background-color:#0b1c28;
  height:85px;
}
.design_latest_container {
  position:relative;
  z-index:10;
  margin-top:-15px;
  border-left:6px #fff solid;
}
.design_latest_header {
  color:#fff;
  font-size:30px;
  font-family: "Roboto";
  font-weight:100;
  padding-left:10px;
}
.design_latest_subheader {
  color:#fff;
  font-size:60px;
  margin-top:-20px;
  padding-left:10px;
  font-family: "Roboto";
  font-weight:700;
}
.design_latest_bg_01 {
  margin-top:-30px;
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url("../images/portfolio/apps/bg_firefan.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
  height: 450px;
  padding-top: 50px;
}
.design_latest_bg_01 h4 {
  font-size:16px;
  text-transform: none;
}
.design_latest_01_btn {
  border-color: #dd5b01;
  text-transform: uppercase;
  font-family: "Roboto";
  font-weight: 700;
  color: #fff;
  background-color: #e59217;
}
.design_latest_01_btn:hover {
  border-color: #dd5b01;
  color: #fff;
  background-color: #dd5b01;
}
.design_latest_bg_02 {
  margin-top:-60px;
  background: url("../images/portfolio/apps/bg_kuvera_alert.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
  height: 450px;
  padding-top: 50px;
}
.design_latest_bg_02 h4 {
  font-size:16px;
  text-transform: none;
}
.design_latest_02_container {
  width:50%;
  float:right;
}
.design_latest_02_btn {
  border-color:#045c7e;
  text-transform:uppercase;
  font-family: "Roboto";
  font-weight:700;
  color:#fff;
  background-color:#00a0df;
}
.design_latest_02_btn:hover {
  border-color:#164ff2;
  color:#045c7e;
  background-color:#01e0fe;
}
.design_latest_bg_03 {
  margin-top:-60px;
  background: linear-gradient(rgba(178,221,76,.6), rgba(178,221,76,.6)), url("../images/portfolio/apps/bg_dataclover_loyalty.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
  height: 450px;
  padding-top: 50px;
}
.design_latest_bg_03 h4 {
  font-size:16px;
  text-transform: none;
}
.design_latest_03_container {
  width:50%;
}
.design_latest_03_btn {
  border-color:#555;
  text-transform:uppercase;
  font-family: "Roboto";
  font-weight:700;
  color:#fff;
  background-color:#959595;
}
.design_latest_03_btn:hover {
  border-color:#959595;
  color:#222;
  background-color:#ddd;
}
.design_additional_bg {
  background-color:#0b1c28;
  height:95px;
  margin-top:-30px;
}
.design_additional_btn {
  background:transparent;
  border:3px solid #fff;
  color:#fff;
  width:280px;
}
.design_additional_btn:hover {
  background:#fff;
  border:none;
  color:#222;
}
.design_circle_container {
  width:70%;
  margin:0 auto;
}
.design_circle_container .portfolio-item{
  padding:5px 0;
}
.design_circles {
  width: 150px;
  height:150px;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  line-height: 150px;
  text-align: center;
  margin:0 auto;
}
.design_process_container {
  /*position:relative;
  z-index:10;
  margin-top:-15px;*/
  border-left:6px #222 solid;
}
.design_process_header {
  color:#2b7a78;
  font-size:40px;
  font-family: "Roboto";
  font-weight:100;
  padding-left:10px;
}
.design_process_subheader {
  color:#222;
  font-size:50px;
  margin-top:-20px;
  padding-left:10px;
  font-family: "Roboto";
  font-weight:700;
}

/*Design Previous projects Home Section*/
.design_previous_container {
  padding-top:50px;
}
.design_previous_header {
  font-size:40px;
  color:#2b7a78;
  font-family: "Roboto";
  font-weight:100;
}
.design_previous_subheader {
  font-size:60px;
  color:#222;
  margin-top:-15px;
  font-family: "Roboto";
  font-weight:700;
  text-transform:none;
}

/*Animation Home Section*/
.animation_header_border {
  border-left:6px #2b7a78 solid;
}
.animation_main_header {
  color:#222;
  font-size:40px;
  font-family: "Roboto";
  font-weight:100;
  padding-left:10px;
}
.animation_main_subheader {
  color:#2b7a78;
  font-size:50px;
  margin-top:-20px;
  padding-left:10px;
  font-family: "Roboto";
  font-weight:700;
}
.animation_core_container {
  padding-bottom:200px;
}

/*Animation Skill Section*/
.animation_skill_border {
  border-top:2px #fff solid;
  width:50%;
  padding-bottom:5px;
  margin:0 auto;
}
.animation_skill_header {
  color:#fff;
  font-size:48px;
  font-family: "Roboto";
  font-weight:100;
}
.animation_skill_subheader {
  color:#fff;
  font-size:65px;
  margin-top:-20px;
  font-family: "Roboto";
  font-weight:700;
}
.animation_example_title {
  background-color:#222;
  color:#fff;
  text-align:center;
  padding:5px;
  font-size:14px;
  width:80%;
  margin:0 auto;
}
.responsive-examples-banner {
  width:80%;
  margin:0 auto;
}
.animation_past_border {
  border-left:6px #222 solid;
}
.animation_past_header {
  color:#2b7a78;
  font-size:40px;
  font-family: "Roboto";
  font-weight:100;
  padding-left:10px;
}
.animation_past_subheader {
  color:#222;
  font-size:50px;
  margin-top:-20px;
  padding-left:10px;
  font-family: "Roboto";
  font-weight:700;
}

@media only screen and (max-width:1024px) {
  header .intro-text {
    padding-top: 130px;
    padding-bottom: 70px;
  }
  header .intro-text .intro-heading {
    font-size:70px;
  }
  header .intro-text .intro-lead-in {
    font-size: 36px !important;
    line-height: 42px !important;
  }

  /*Image Section*/
  .responsive-logo {
    margin:0 auto;
    width:80%;
  }
  .responsive-banner-img {
    width:280px;
    margin:0 auto;
  }
  .linkedin-logo {
    height:20px;
  }

  /*About Me Section*/
  .about_me_header {
    font-size:30px;
  }
  .about_me_subheader {
    font-size:50px;
    margin-top:-10px;
  }

  /*Experience Section*/
  .experience_header {
    font-size:40px;
  }
  .experience_subheader {
    font-size:56px;
    margin-top:-10px;
  }

  /*Additional Section*/
  .additional_fun_header {
    font-size:36px;
  }

  /* Design Home Section */
  .design_header {
    font-size:50px;
  }
  .design_subheader {
    font-size:80px;
  }
  .design_latest_bg_01 {
    height: 400px;
  }
  .design_latest_bg_01 h1 {
    font-size:30px;
    text-transform: uppercase;
  }
  .design_latest_bg_01 h4 {
    font-size:22px;
    text-transform: none;
  }
  .design_latest_02_container {
    width:50%;
    float:right;
  }
  .design_latest_bg_02 {
    height: 400px;
    padding-top: 50px;
  }
  .design_latest_bg_02 h1 {
    font-size:30px;
    text-transform: uppercase;
  }
  .design_latest_bg_02 h4 {
    font-size:20px;
    text-transform: none;
  }
  .design_latest_03_container {
    width:50%;
  }
  .design_latest_bg_03 {
    height: 380px;
    padding-top: 50px;
  }
  .design_latest_bg_03 h1 {
    font-size:30px;
    text-transform: uppercase;
  }
  .design_latest_bg_03 h4 {
    font-size:20px;
    text-transform: none;
  }
  .design_process_header {
    font-size:40px;
  }
  .design_process_subheader {
    font-size:60px;
    margin-top:-20px;
  }
  .design_circle_container {
    margin-top:-50px;
  }

  /*Animation Home Section*/
  .animation_header_border {
    border-left:6px #2b7a78 solid;
  }
  .animation_main_header {
    font-size:50px;
  }
  .animation_main_subheader {
    font-size:60px;
  }
  .animation_skill_border {
    width:60%;
  }
  .animation_skill_header {
    font-size:40px;
  }
  .animation_skill_subheader {
    font-size:60px;
  }
  .animation_example_title {
    font-size:18px;
    width:90%;
  }
  .responsive-examples-banner {
    width:90%;
    margin:0 auto;
  }
  .animation_past_header {
    font-size:36px;
  }
  .animation_past_subheader {
    font-size:50px;
  }
}

@media only screen and (max-width:900px) {
  /*Image Section*/
  .responsive-banner-img {
    width:230px;
    margin:0 auto;
  }

  /*About Me Section*/
  .about_me_subheader {
    font-size:46px;
    margin-top:-10px;
  }

  /* Design Home Section */
  .design_header {
    font-size:48px;
  }
  .design_subheader {
    font-size:72px;
  }
  .design_latest_bg_01 {
    height: 360px;
    padding-top: 30px;
  }
  .design_latest_bg_01 h1 {
    font-size:32px;
    text-transform: uppercase;
  }
  .design_latest_bg_01 h4 {
    font-size:20px;
    text-transform: none;
  }
  .design_latest_bg_02 {
    height: 340px;
    padding-top: 50px;
  }
  .design_latest_bg_02 h1 {
    font-size:30px;
    text-transform: uppercase;
  }
  .design_latest_bg_02 h4 {
    font-size:20px;
    text-transform: none;
  }
  .design_latest_bg_03 {
    height: 350px;
    padding-top: 50px;
  }
  .design_latest_bg_03 h1 {
    font-size:32px;
    text-transform: uppercase;
  }
  .design_latest_bg_03 h4 {
    font-size:20px;
    text-transform: none;
  }
  .design_latest_02_container {
    width:100%;
    float:none;
  }
  .design_latest_03_container {
    width:100%;
  }
  .design_circle_container {
    width:100%;
    margin-top:-30px;
  }
  .design_circle_container .portfolio-item{
    padding:5px;
    float:left;
    width:33%;
  }
  .design_circles {
    width: 133px;
    height:133px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    line-height: 133px;
    text-align: center;
    margin:0 auto;
  }
  .design_process_container {
    border-left:6px #222 solid;
    margin-left:20px;
  }
  .design_process_header {
    font-size:36px;
  }
  .design_process_subheader {
    font-size:50px;
    margin-top:-10px;
  }

  /*Design Previous projects Home Section*/
  .design_previous_container {
    padding-top:60px;
  }
  .design_previous_header {
    font-size:40px;
    color:#2b7a78;
    font-family: "Roboto";
    font-weight:100;
  }
  .design_previous_subheader {
    font-size:60px;
    color:#222;
    margin-top:-15px;
    font-family: "Roboto";
    font-weight:700;
    text-transform:none;
  }
  
  /*Animation Home Section*/
  .animation_header_border {
    margin-top:10px;
  }
  .animation_main_header {
    font-size:42px;
  }
  .animation_main_subheader {
    font-size:50px;
  }
  .animation_skill_border {
    width:80%;
  }
  .animation_example_title {
    font-size:20px;
    width:80%;
  }
  .responsive-examples-banner {
    width:80%;
    margin:0 auto;
  }
  .animation_past_header {
    font-size:30px;
  }
  .animation_past_subheader {
    font-size:48px;
  }

  /*Contact Section*/
  section h3.email-description {
    font-size: 16px;
  }
}

@media only screen and (max-width:768px) {
  .navbar-default {
    padding: 25px 0;
    border: 0;
    background-color: transparent;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
  }
  .navbar-default .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
  }
  .navbar-default .navbar-nav>.active>a {
    border-radius: 3px;
  }
  .navbar-default.navbar-shrink {
    padding: 10px 0;
    background-color: #222;
  }
  .navbar-default.navbar-shrink .navbar-brand {
    font-size: 1.3em;
  }

  /* Design Home Section */
  .design_header {
    font-size:40px;
    padding-top:100px;
  }
  .design_subheader {
    font-size:70px;
  }
  .design_latest_bg_01 {
    height: 350px;
    padding-top: 30px;
  }
  .design_latest_bg_01 h1 {
    font-size:28px;
    text-transform: uppercase;
  }
  .design_latest_bg_02 {
    height: 330px;
    padding-top: 50px;
  }
  .design_latest_bg_02 h1 {
    font-size:28px;
    text-transform: uppercase;
  }
  .design_latest_bg_03 {
    height: 320px;
    padding-top: 50px;
  }
  .design_latest_bg_03 h1 {
    font-size:28px;
    text-transform: uppercase;
  }
  .design_latest_02_container {
    width:100%;
    float:none;
  }
  .design_latest_03_container {
    width:100%;
  }
  .design_circle_container {
    width:80%;
    margin-top:-30px;
  }
  .design_circle_container .portfolio-item{
    padding:5px;
    float:left;
    width:33%;
  }
  .design_circles {
    width: 135px;
    height:135px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    line-height: 135px;
    text-align: center;
    margin:0 auto;
  }
  .design_process_header {
    font-size:30px;
  }
  .design_process_subheader {
    font-size:50px;
  }

  /*Design Previous projects Home Section*/
  .design_previous_container {
    padding-top:100px;
  }

  /*Animation Home Section*/
  .animation_header_border {
    margin-top:50px;
  }
  .animation_main_header {
    font-size:50px;
  }
  .animation_main_subheader {
    font-size:70px;
  }
  .animation_skill_border {
    width:80%;
  }
  .animation_example_title {
    font-size:20px;
    width:95%;
  }
  .responsive-examples-banner {
    width:95%;
    margin:0 auto;
  }
  .animation_skill_header {
    font-size:42px;
  }
  .animation_skill_subheader {
    font-size:64px;
  }
  .animation_past_header {
    font-size:33px;
  }
  .animation_past_subheader {
    font-size:52px;
  }
}

@media only screen and (max-width:500px){
  header .intro-text {
    padding-top: 170px;
    padding-bottom: 70px;
  }
  header .intro-text .intro-lead-in {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  header .intro-text .intro-heading {
    font-size:70px;
    line-height:70px;
  }

  /*Image Section*/
  .responsive-img {
    width:50%;
  }
  .responsive-logo {
    margin:0 auto;
    width:250px;
  }
  .responsive-banner-img {
    width:100%;
    margin:0 auto;
  }
  .linkedin-logo {
    height:22px;
  }

  /*About Section*/
  .about_me_header {
    padding-top:10px;
    font-size:24px;
  }
  .about_me_subheader {
    font-size:40px;
    margin-top:-10px;
  }

  /*Experience Section*/
  .experience_header {
    font-size:36px;
  }
  .experience_subheader {
    font-size:50px;
    margin-top:-10px;
  }
  .experience_title {
    font-size:36px;
    margin-top:-30px;
  }

  /*Additional Section*/
  .additional_fun_header {
    font-size:30px;
  }
  .additional_fun_subheader {
    font-size:55px;
  }
  .additional_fun_btn {
    font-size:20px;
    width:220px;
  }
  .additional_fun_btn_container {
    text-align: center;
  }

  /* Design Home Section */
  .design_latest_container {
    margin-left:30px;
  }
  .design_header {
    font-size:24px;
    padding-top:40px;
  }
  .design_subheader {
    font-size:42px;
    margin-top:-10px;
  }
  .design_latest_bg_01 {
    height: 380px;
  }
  .design_latest_bg_01 h1 {
    font-size:28px;
    text-transform: uppercase;
  }
  .design_latest_bg_01 h4 {
    font-size:14px;
    text-transform: none;
  }
  .design_latest_bg_02 h1 {
    font-size:28px;
    text-transform: uppercase;
  }
  .design_latest_bg_02 h4 {
    font-size:14px;
    text-transform: none;
  }
  .design_latest_bg_03 h1 {
    font-size:28px;
    text-transform: uppercase;
  }
  .design_latest_bg_03 h4 {
    font-size:14px;
    text-transform: none;
  }
  .design_latest_02_container {
    width:100%;
    float:none;
  }
  .design_latest_03_container {
    width:100%;
  }
  .design_circle_container {
    width:100%;
    margin-top:-30px;
  }
  .design_circle_container .portfolio-item{
    padding:5px;
    float:left;
    width:33%;
  }
  .design_circles {
    width: 125px;
    height:125px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    line-height: 125px;
    text-align: center;
    margin:0 auto;
  }
  .design_process_header {
    font-size:30px;
  }
  .design_process_subheader {
    font-size:50px;
  }

  /*Design Previous projects Home Section*/
  .design_previous_container {
    padding-top:90px;
  }

  /*Animation Home Section*/
  .animation_main_header {
    font-size:36px;
  }
  .animation_main_subheader {
    font-size:50px;
  }
  .animation_skill_border {
    width:90%;
  }
  .animation_example_title {
    font-size:24px;
    width:98%;
  }
  .responsive-examples-banner {
    width:98%;
    margin:0 auto;
  }
  .animation_skill_header {
    font-size:32px;
  }
  .animation_skill_subheader {
    font-size:48px;
  }
  .animation-sneak-pics {
    width:70%; 
    margin:0 auto
  }
  .animation_past_header {
    font-size:24px;
  }
  .animation_past_subheader {
    font-size:43px;
  }
}

@media only screen and (max-width:414px){
  header .intro-text .intro-lead-in {
    font-size: 36px !important;
    line-height: 40px !important;
  }
  header .intro-text .intro-heading {
    font-size:90px;
    line-height:80px;
    margin-top:10px;
  }

  /*Image Section*/
  #main-fade {
    text-align: center !important;
  }
  .responsive-img {
    width:70%;
  }
  .responsive-logo {
    margin:0 auto;
    width:250px;
  }
  .responsive-banner-img {
    width:100%;
    margin:0 auto;
  }
  .linkedin-logo {
    height:22px;
  }

  /*About Section*/
  .about_me_header {
    padding-top:10px;
    font-size:24px;
  }
  .about_me_subheader {
    font-size:60px;
    line-height:56px;
    margin-top:5px;
  }

  /*Experience Section*/
  .experience_header {
    font-size:36px;
  }
  .experience_subheader {
    font-size:60px;
    margin-top:-10px;
  }
  .experience_border {
    width:90%;
  }

  /*Additional Section*/
  .additional_fun_header {
    font-size:24px;
  }
  .additional_fun_subheader {
    font-size:48px;
    margin-top:-10px;
  }

  /*Contact Me Section*/
  .email-header {
    font-size:44px;
  }
  section h3.email-description {
    font-size: 22px;
  }
  section h3.email-description p {
    font-size: 16px;
    line-height:18px;
  }

  /* Design Home Section */
  .design_header {
    font-size:28px;
  }
  .design_subheader {
    font-size:60px;
    line-height:50px;
    margin-top:-10px;
  }
  .design_latest_bg_01 {
    height: 380px;
  }
  .design_latest_bg_01 h1 {
    font-size:24px;
    text-transform: uppercase;
  }
  .design_latest_bg_01 h4 {
    font-size:16px;
    text-transform: none;
    padding:0 5px;
  }
  .design_latest_bg_02 {
    height: 330px;
  }
  .design_latest_bg_02 h1 {
    font-size:24px;
    text-transform: uppercase;
  }
  .design_latest_bg_02 h4 {
    font-size:16px;
    text-transform: none;
    padding:0 5px;
  }
  .design_latest_bg_03 {
    height: 350px;
  }
  .design_latest_bg_03 h1 {
    font-size:24px;
    text-transform: uppercase;
  }
  .design_latest_bg_03 h4 {
    font-size:16px;
    text-transform: none;
    padding:0 5px;
  }
  .design_circles {
    width: 110px;
    height:110px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    line-height: 110px;
    text-align: center;
    margin:0 auto;
  }

  /*Animation Home Section*/
  .animation_main_header {
    font-size:44px;
  }
  .animation_main_subheader {
    font-size:60px;
    line-height:52px;
    margin-top:-10px;
  }
  .animation_skill_border {
    width:98%;
  }
  .animation_skill_header {
    font-size:44px;
  }
  .animation_skill_subheader {
    font-size:68px;
  }
  .animation_past_header {
    font-size:28px;
  }
  .animation_past_subheader {
    font-size:50px;
    line-height:40px;
    margin-top: 5px;
  }
}

@media only screen and (max-width:375px){
  header .intro-text .intro-lead-in {
    font-size: 34px !important;
    line-height: 40px !important;
  }
  header .intro-text .intro-heading {
    font-size:60px;
    line-height:58px;;
  }

  /*Image Section*/
  .responsive-img {
    width:80%;
  }
  .responsive-logo {
    width:280px;
  }

  /*About Section*/
  .about_me_header {
    font-size:24px;
  }
  .about_me_subheader {
    font-size:50px;
    line-height:48px;
  }

  /*Experience Section*/
  .experience_header {
    font-size:30px;
  }
  .experience_subheader {
    font-size:50px;
  }
  .experience_title {
    font-size:30px;
    margin-top:-30px;
  }

  /*Additional Section*/
  .additional_fun_header {
    font-size:24px;
  }
  .additional_fun_subheader {
    font-size:44px;
  }

  /* Design Home Section */
  .design_header {
    font-size:28px;
  }
  .design_subheader {
    font-size:60px;
    line-height:50px;
    margin-top:-10px;
  }
  .design_latest_bg_01 {
    height: 360px;
  }
  .design_latest_bg_01 h1 {
    font-size:22px;
    text-transform: uppercase;
  }
  .design_latest_bg_02 {
    height: 320px;
  }
  .design_latest_bg_02 h1 {
    font-size:22px;
    text-transform: uppercase;e;
  }
  .design_latest_bg_03 {
    height: 330px;
  }
  .design_latest_bg_03 h1 {
    font-size:22px;
    text-transform: uppercase;
  }
  .design_process_header {
    font-size:24px;
  }
  .design_process_subheader {
    font-size:44px;
  }
  .design_circle_container .portfolio-item{
    padding:5px;
    float:left;
    width:50%;
  }
  .design_circles {
    width: 150px;
    height:150px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    line-height: 150px;
    text-align: center;
    margin:0 auto;
  }

  /*Design Previous projects Home Section*/
  .design_previous_header {
    font-size:30px;
  }
  .design_previous_subheader {
    font-size:52px;
  }

  /*Animation Home Section*/
  .animation_skill_header {
    font-size:40px;
  }
  .animation_skill_subheader {
    font-size:64px;
  }

  /*Contact Me Section*/
  .email-header {
    font-size:48px;
  }
  section h3.email-description {
    font-size: 20px;
  }
}

@media only screen and (max-width:320px){
  header .intro-text .intro-lead-in {
    font-size: 34px !important;
    line-height: 40px !important;
  }
  header .intro-text .intro-heading {
    font-size:66px;
    line-height:60px;;
  }

  /*Image Section*/
  .responsive-img {
    width:90%;
  }

  /*About Section*/
  .about_me_header {
    font-size:34px;
    line-height:32px;
  }
  .about_me_subheader {
    font-size:48px;
    line-height:44px;
  }

  /*Experience Section*/
  .experience_header {
    font-size:36px;
  }
  .experience_subheader {
    font-size:48px;
  }
  .experience_title {
    font-size:36px;
    margin-top:-35px;
  }

  /*Additional Section*/
  .additional_fun_subheader {
    font-size:36px;
  }

  /* Design Home Section */
  .design_header {
    margin-top:75px;
    font-size:36px;
  }
  .design_subheader {
    font-size:56px;
    line-height:50px;
    margin-top:-10px;
  }
  .design_latest_bg_01 {
    height: 440px;
    padding-top: 25px;
  }
  .design_latest_bg_01 h1 {
    font-size:30px;
    text-transform: none;
  }
  .design_latest_bg_02 {
    height: 360px;
    padding-top: 25px;
  }
  .design_latest_bg_02 h1 {
    font-size:30px;
    text-transform: none;
  }
  .design_latest_bg_03 {
    height: 375px;
    padding-top: 25px;
  }
  .design_latest_bg_03 h1 {
    font-size:30px;
    text-transform: none;
  }
  .design_circles {
    width: 130px;
    height:130px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    line-height: 130px;
    text-align: center;
    margin:0 auto;
  }
  .design_process_header {
    font-size:28px;
  }
  .design_process_subheader {
    font-size:38px;
    margin-top:-10px;
  }

  /*Design Previous projects Home Section*/
  .design_previous_subheader {
    font-size:52px;
    line-height:48px;
    margin-top:10px;
  }

  /*Animation Home Section*/
  .animation_main_subheader {
    font-size:50px;
    line-height:42px;;
  }
  .animation_skill_header {
    font-size:40px;
  }
  .animation_skill_subheader {
    font-size:56px;
  }
  .animation_past_header {
    font-size:30px;
    line-height:26px;
  }
  .animation_past_subheader {
    font-size:46px;
    line-height:40px;
  }

  section h3.email-description {
    font-size: 18px;
  }
  section h3.email-description p {
    font-size: 14px;
    line-height:16px;
  }

  .copyright {
    font-size:12px;
  }
}