* {
 -moz-appearance: none;
 -moz-border-radius: 0;
 -webkit-appearance: none;
 -webkit-border-radius: 0;
 margin: 0;
 padding: 0; }
 
 @font-face {
 font-family: SNNeoNoire-Regular;
 src: url("SNNeoNoire-Regular.ttf");
 
 }
 
 
 html {
 
   width: 100%;
   height: 100%;
   overflow-x: hidden;
 
 }
 
.navbar-default {
 background:transparent;
 border-color: #ffffff;
 min-height: 60px !important;
 
}
 
.navbar-text {
 
display: none;
 
}
 
.navbar-default .navbar-brand {
 color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
 color: #010101;
}
.navbar-default .navbar-text {
 color: #777777;
}
.navbar-default .navbar-nav > li > a {
 color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
 color: #010101;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
 color: #010101;
 background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
 color: #010101;
 background-color: #ffffff;
}
.navbar-default .navbar-toggle {
 border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
 background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
 background-color: #777777;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
 border-color: #777777;
}
.navbar-default .navbar-link {
 color: #777777;
}
.navbar-default .navbar-link:hover {
 color: #010101;
}
 
 
 
 
 
@media (max-width: 767px) {
 .navbar-default .navbar-nav .open .dropdown-menu > li > a {
   color: #777777;
 }
 .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
   color: #010101;
 }
 .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
 .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
   color: #010101;
   background-color: #ffffff;
 }
 
 
}
 
 #pageHeader-side {
 
           /*font-family:Inknut Antiqua;*/
           font-family:Inknut Antiqua;
           font-size:30px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 50px;
           padding-right: 100px;
           padding-bottom: 60px;
           padding-top: 70px;
           line-height: 30px;
 
       }
 
}
 
 
 
 
 
 
 
 
.cf {
 zoom: 1; }
 
.cf:after,
.cf:before {
 content: ' ';
 display: table; }
 
.cf:after {
 clear: both; }
 
a:link,
a:visited {
 color: inherit; }
 
a:hover,
a:active {
 outline: 0; }
 
a:focus {
 outline: thin dotted; }
 
h1, h2, h3, h4, h5, h6 {
 font-size: 100%; }
 
img {
 border-style: none;
 vertical-align: bottom; }
 
fieldset {
 border-style: none; }
 
html, body {
 height: 100%; }
 
body {
 -moz-text-size-adjust: none;
 -ms-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 background-color: #f8f8f8;
 font: normal normal 62.5%/1em 'Source Sans Pro', sans-serif;
 font-size: 62.5%; }
 
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
 display: block; }
 
audio, canvas, video {
 display: inline-block; }
 
 
.navbar-text {
 
 
   font-family: Raleway;
   color: Black !important;
   font-size: 20px;
   font-weight: bold;
   text-align: left;
}
 
 
 
 
/*    @media (min-width: 1300px) {
    .container{
        max-width: 1700px !important;
    }*/
 
 
 
.overlay h2 {
 
           font-family:Raleway, sans-serif;
           font-size:30px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 10px;
           padding-right: 20px;
           padding-bottom: 10px;
           padding-top: 10px;
 
}
 
.overlay h3 {
 
           font-family:Raleway, sans-serif;
           font-size:30px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 10px;
           padding-right: 20px;
           padding-bottom: 10px;
           padding-top: 10px;
 
}
 
 
.title-head {
 
 
 
 
}
 
 
  .aboutText {
 
       padding-right: 300px;
       padding-left: 300px;
       padding-bottom: 10px;
       font-family:Raleway, sans-serif;
       text-align: left;
       font-size: 18px;      
       line-height: 1.5;
 
   }


   .skills-list {

    /*padding-right: 300px;
       padding-left: 300px;*/
       padding-bottom: 10px;
       padding-top: 10px;
       font-family:Raleway, sans-serif;
       font-style: italic;
       text-align: center;
       font-size: 16px;      
       line-height: 1.5;
       color: #353c3f;

   }

   .pill-container {

      background-color: #C1CCF2;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 4px 2px;
      border-radius: 16px;

}

  .pill-container-link {

      background-color: #A7BBFF;     /*465795*/
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 4px 2px;
      border-radius: 16px;

}

.pill-container-link:hover {

      opacity: 0.7;
      cursor: pointer;
    
    }

    .skills-list .li {

    /*padding-right: 300px;
       padding-left: 300px;*/
       /*padding-bottom: 10px;*/
       padding-top: 15px;

   }


   .profile-pic-2 {

    height: 300px; 
    width: 300px;
    
}

   mark {
  display: inline-block;
  line-height: 0.2em !important;
  padding-bottom: 0.2em !important;
  background-color: #465795 !important;
    }

 /*   .underline-05 {
  background-image: linear-gradient(90deg, #e67399, #f2a640);
  background-position: bottom;
  background-size: 100% 30%;
  background-repeat: no-repeat;
}*/

.underline-text .h4 {

    margin: 10px 0 10px;
}
 
   .pageHeader-central {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family:Raleway, sans-serif;
       padding-top: 170px;
       padding-bottom: 10px;
       font-size: 50px;
       padding-left: 100px;
       padding-right: 100px;
 
   }
 
       .pageSub-Header-central {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family:Capriola, Raleway, sans-serif;
       padding-bottom: 110px;
       font-size: 30px;
       padding-left: 100px;
       padding-right: 100px;
 
   }
 
   .red-header {
 
     color: #ff3b3f;
   }
 
    .blue-header {
 
     color: #1aacb7;
   }
 
.aboutHeaders {
 
       padding-bottom: 55px;
       padding-top: 75px;
 
   }
 
 .aboutHeaders h2 {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family: 'DM Serif Display', serif; 
       color: #353c3f;
 
   }
 
 
   .quote {
 
       font-size: 27 !important;
       color: #1E306E !important;
       font-style: italic !important;
       font-style: bold !important;
       text-align: center !important;
       border: none !important;
       padding-top: 50px;
 
 
 
    }
 
.contact-header {
 
   color: #fa8d62;
 
 
}
 
#container {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 font-family: sans-serif;
 text-transform: uppercase;
}



 
.wrapper{
 
 width:100%;
  height:auto;
  margin:0 auto;
  position: relative;
 background: #fff;  /* fallback for old browsers */
 
/* background: -webkit-linear-gradient(to top, #ECE9E6, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
 /*background: linear-gradient(to top, #ECE9E6, #FFFFFF);  W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}


 
.about-section {
 
/*background-color:#fff;*/
background: #fff;  /* fallback for old browsers */
margin-top: 0px;
 
 
}
 
 
.experience-section {
 
background: #fff
 
/*margin: 8px;*/
 
 
}
 
 
.contact-section {
 
/*background-color:#e9e9e9;
*//*margin-top: 8px;
*//*margin-left: 8px;
margin-right: 8px;*/
 
 
}
 
.thank-you {
 
width: 20px !important;
height: auto;
margin: 0 auto;
/*display: none;*/
opacity: 0;
padding-bottom: 130px;
 
}
 
 
 
.contact-section:hover .thank-you {
/*   display: block;*/
opacity: 1;
}
 
 
.social {
 
width: 45px;
height: auto;
margin: 0 auto;
/*display: none;*/
padding-bottom: 130px;
 
}
 
 
.verticalLine {
 
   border-left: 2px solid #1E306E !important;
   list-style: none;
}
 
.bottom-list {
 
   list-style: none;
 
}
 
.footer {
 
 
   position: static;
   margin-top: 25px;
   width: 100%;
   height: 100px;
   padding-top: 0px !important
   color: #f2687b;
 
 
}
 
.copyText {
 
   padding-top: 25px;
   color: #465795;
   text-align: right;
   margin-left: 25px;
   margin-right: 25px;
   margin-top: 0px !important;
 
}
 
 
 .yellow-dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  color: #EFD069;
  text-align: center;
}

 
/* PROJECT PAGES */
 
 
.project-container {
 
padding-top: 50px;
padding-bottom: 10px;
margin: 0 auto;
max-width: 800px;
padding-left: 0px;
padding-right: 00px;
 
 
 
 
}
 
.project-container-top {
 
padding-top: 130px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
 
 
}
 
.clearfix {
   *zoom:1 /* for IE */
}
 
.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}
 
.clearfix:after {
   clear: both;
}
 
 
.project-images {
 
 
      margin: 0 auto;
      padding-left: 0px;
      padding-right: 0px;
 
}
 
 
 
#projectHeader {
 
      text-align: center;
 
}
 
 
.project-header {
 
 
padding-left: 80px;
 
}
 
 
.project-header {
 
 
padding-left: 0px;
align-content: right;
 
}
 
.project-header-image {
 
/*
padding-left: 80px;
 
padding-right: 80px;*/
text-align: center;
padding-top: 80px;
padding-bottom: 20px;
width: 100%;
height: auto;
max-width: 1600px;
 
}

.large-center-image {
 
/*
padding-left: 80px;
 
padding-right: 80px;*/
text-align: center;

 
}

header {
  overflow: hidden;
}
header img {
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
 
       .project-text {
 
           font-family:Raleway;
           font-size:18px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 0px;
           padding-bottom: 30px;
           line-height: 30px;
           /*max-width: 900px;*/
          
       }
 
       .project-text-header {
            
            font-family:Raleway;
            font-size:30px;
            color:#1E306E;
          text-align: left;
            margin:auto;
            /*padding-left: 15%;*/
            padding-right: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            line-height: 30px;
            margin-top: 30px;
            
            
        }

        .header-style {

          position: relative;


        }






  h1.background-line {
    border-bottom: 1px solid #dfdfdf;
    color: #000;
    font: Raleway, sans-serif;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
}
h1.background-line span {
    background:  #FFF;
    padding: 0 15px;
    position: relative;
    top: 10px;
}
 
.parallax-wrapper {
   position: relative;
}
 
.parallax-container {
   height: 200px;
   background-color: #0f0;
   width: 100vw;
   margin-left: calc(-50vw + 50% - 8px);
   position: relative;
}
 
 
       .full-width {
 
 
 
       }   
 
 
 
       .center-header {
 
 
         padding-top: 50px;
 
       }
 
         .project-text-title {
 
           font-family:Raleway;
           font-size:40px;
           color:#1E306E;
           text-align: left;
           margin: 0 auto;
           padding-left: 0px;
           padding-right: 0px;
           padding-bottom: 10px;
           padding-top: 0px;
           line-height: 30px;
 
 
 
       }

       .project-text-tag {
 
           font-family:Raleway;
           color: #1E306E;
           font-size:18px;
           text-align: left;
           font-style: italic;
           margin: 0 auto;
           padding-left: 0px;
           padding-right: 0px;
           padding-bottom: 15px;
           padding-top: 0px;
           line-height: 30px;
 
 
 
       }
 
       .project-text-container{
 
           padding-left: 0px;
           padding-top: 0px;
 
       }
 
 
       .project-head-image {
 
         padding-top: 20px;
 
 
       }
 
       .project-info-header {
 
 
 
           font-family:Raleway;
           font-size:17px;
           color:#333333;
           position: relative;
       /*    text-align: left;*/
           margin:auto;
           /*padding-left: 100px;*/
           padding-right: 0px;
           padding-bottom: 0px;
           padding-top: 0px;
           line-height: 30px;
         /*  border-left: 2px solid #9e9e9e;*/
           /*max-width: 1000px;*/
 
 
 
       }
 
 
        .persona-text {
 
           font-family:Raleway;
           font-size:16px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 15px;
           padding-bottom: 30px;
           line-height: 30px;
           /*max-width: 900px;*/
 
       }
 
       .persona-text-header {
 
           font-family:Raleway;
           font-size:20px;
           color:#333333;
       /*    text-align: left;*/
           margin:auto;
           padding-left: 5px;
           padding-right: 0px;
           padding-bottom: 30px;
           padding-top: 0px;
           line-height: 30px;
 
 
         /*  max-width: 1000px;*/
 
       }
 
       .phone-screens {
 
           margin-left: auto;
           margin-right: auto;
           display: inline-block;
           height:auto;
           width:100%;
           margin-top: 90px;
 
           /*box-shadow:0 0 5px rgba(0,0,0,0.2);*/
           /*min-width: 130px;*/
 
       }
 
 
       .double-image {
 
           margin-left: auto;
           margin-right: auto;
           display: inline-block;
           height:auto;
           width:100%;
           padding-top: 90px;
           padding-left: 5px;
          /* min-width: 130px;*/
 
       }
 
 
.social-icon {
 
/*width: 40px;
height: auto;*/
text-align: center;
 
}
 
 
.persona {
 
border: none;
font-size: 14px;
font-family: Raleway;
padding-top: 60px;
 
 
}
 
.image-subtext {
 
font-family: Raleway, sans-serif;
font-size: 14px;
padding-top: 10px;
text-align: center;
padding-bottom: 30px;
 
}
 
.middle-text {
 
padding-top: 40px;
 
}
 
/*Oh the Card. Here you go*/
.profile-card {
 max-width:900px;
 background:#FFF;
 margin:100px auto;
 border-radius:5px;
 overflow:hidden;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
 animation: fadeIn 2s;
 transition:all 0.6s ease;
 transform-style: preserve-3d;
}
 
.profile-card header a {
 padding-top: 15px;
 display:block;
 /*background: #ccc url('https://i.imgur.com/a7Y45A6.jpg') no-repeat;*/
 background-size:cover;
 min-height:120px;
 margin-bottom:35px;
 position:relative; 
 transition: all 2s ease;
}
.profile-card header a:hover {
transform: scale(1.02);
}
 
/*umm The Avatar.. Swoosh!! */
.profile-card header img {
 border: solid 3px #FFF;
 display: block;
 border-width: 4px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20);
 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20);
 position:absolute;
 /*bottom:-40px;*/
 left:50%;
 max-width:100px;
 transform: translateX(-50%);
}
 
.profile-card header h1, .profile-card header h2 {
 margin:5px 30px;
 text-align:center;
}
.profile-card header h1 {
 font-family: 'Raleway', sans-serif !important;
 font-weight:500;
 color:#448ad1;
}
 
.profile-card header h2 {
 font-family: 'Raleway', sans-serif;
 font-weight:400;
 font-size:14px;
 /*text-transform:uppercase;*/
 color:#aeaeae;
}
 
/*You.. there.. bio*/
.profile-bio {
 margin:30px;
}
 
/*Be Social*/
 
.profile-social-links {
 list-style:none; 
 display:table;
 width:100%;
 border-top:1px solid #ededed;
 margin:0;
 padding:0;
}
 
.profile-social-links li {
 display:table-cell;
 min-width: 1px;
}
 
.profile-social-links li a {
 padding:20px 5px;
 display:block;
 text-align:center;
 border-left:1px solid #ededed;
 transition: all 0.5s ease;
}
 
.profile-social-links li:first-child a {
 border-left:0;
}
 
.profile-social-links li img {
max-width:30px;
 filter: grayscale(100%);
 opacity:0.5;
 transition: all 0.5s ease;
}
.profile-social-links li:last-child img {
opacity:0.2;
}
.profile-social-links a:hover {
 background:#f6f6f6;
}
.profile-social-links a:hover img {
 filter: grayscale(0%);
 opacity:1;
}
 
.persona-list {
 
 padding-left: 20px;
 list-style-type: none;
 padding-top: 20px;
 font-family: Raleway, sans-serif;
 font-size: 18px;
 
}
 
.persona-list-single {
 
padding-bottom: 40px;
 
}
 
 
 
.footer {
 
 
 /*color: #f2687b;*/
 
}
 
 
/* Animations Area
   Warning: Entry Restricted
 */
 
 
@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 
 100% {
   opacity: 1;
 }
}
 
 
 
 
@media (max-width: 1000px) { 
 
.aboutText {
 
       padding-right: 10px;
       padding-left: 10px;
 
   }
 
   section#content #our-work ul li{display:block;float:left;height:auto;width:50%;position:relative;}
 
 
 
}
 
 
 
 
 
@media (max-width: 900px) {
 
 
.project-container {
 
   padding-top: 50px;
   padding-bottom: 10px;
   margin: 0 auto;
 
 
 
 
}
 
 
}
 
 
 
@media (max-width: 400px) { 
 
section#content #our-work ul li{display:block;float:left;height:auto;width:100%;;position:relative}
 
.aboutText {
 
       padding-right: 20px;
       padding-left: 20px;
       font-size: 18px;
   }
 
 
   .project-container {
 
   padding-top: 50px;
   padding-bottom: 10px;
   margin: auto;
   padding-right: 20px;
   padding-left: 20px;
 
 
 
}
 
.center-header {
 
 
         padding-top: 20px;
 
       }
 
.verticalLine {
 
   padding-top: 50px;
}
 
section#content #our-work ul li .overlay  h2{color:#515151;font-size:45px; font-family:Raleway; text-align: center; padding-top: 20%; opacity:1;}
section#content #our-work ul li .overlay h3{color:#515151;font-size:30px; font-family:Raleway; text-align: center; padding-top:5px; opacity:1;}
 
section#content #our-work ul li .overlay {background-color:#FFFEF9;height:100%;left:0;position:absolute;top:0;width:100%;opacity:0.7;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
 
 
}
 
@media (max-width: 650px) { 
 
 
.navbar-default {
 
 display: inline !important;
}
 
/*.profile-pic {
 
 
margin: 0 auto;
display: block;
text-align: center !important;
padding-left: 10px;
padding-right: 10px;
 
 
}*/
 

 
 
h1.background-line {
   border-bottom: 1px solid #dfdfdf;
   color: #000;
   font: Raleway, sans-serif;
   font-size: 30px;
   margin-bottom: 30px;
   position: relative;
   text-align: center;
}
 
.verticalLine {
 
   padding-top: 50px;
}
 
.project-container {
 
   padding-top: 50px;
   padding-bottom: 10px;
   margin: auto;
   padding-right: 30px;
   padding-left: 30px;
 
 
 
}
 
.navbar-fixed-top {
 
display: inline !important;
 
}
 
.aboutText {
 
       padding-right: 20px;
       padding-left: 20px;
       font-size: 14px;
   }
 
 
   .persona-text {
 
       padding-right: 20px;
       padding-left: 20px;
       font-size: 14px;
   }
 
 
 
.project-text {
 
   font-family:Raleway;
   font-size:16px;
   color:#333333;
   text-align: left;
   margin:auto;
   padding-left: 20px;
   padding-bottom: 30px;
   padding-top: 30px;
   line-height: 30px;
   /*max-width: 900px;*/
   
 
 }
 
 .persona-list {
 
 padding-left: 20px;
 list-style-type: none;
 padding-top: 20px;
 font-family: Raleway, sans-serif;
 font-size: 13px;
 
}
 
section#content #our-work ul li{display:block;float:left;height:auto;width:100%;position:relative} 
section#content #our-work ul li .overlay  h2{color:black;font-size:17px; font-family:Raleway; text-align: center; padding-top: 20%;}
section#content #our-work ul li .overlay h3{color:black;font-size:12px; font-family:Raleway; text-align: center; padding-top:25px}
 
.pageHeader-central {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family:Raleway, sans-serif;
       padding-top: 90px;
       padding-bottom: 0px;
       font-size: 35px;
       padding-left: 20px;
       padding-right: 20px;
 
   }
 
    .pageSub-Header-central {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family:Capriola, sans-serif;
       padding-top: 10px;
       padding-bottom: 50px;
       font-size: 25px;
       padding-left: 20px;
       padding-right: 20px;
 
   }
 
 
    .aboutText {
 
       padding-right: 20px;
       padding-left: 20px;
 
   }
 
   .about-section {
 
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
 
}
 
 
   .experience-section {
 
 
margin-top: 8px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
 
 
}
 
 
   .contact-section {
 
margin-top: 8px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
 
 
}
 
}
* {
 -moz-appearance: none;
 -moz-border-radius: 0;
 -webkit-appearance: none;
 -webkit-border-radius: 0;
 margin: 0;
 padding: 0; }
 
 @font-face {
 font-family: SNNeoNoire-Regular;
 src: url("SNNeoNoire-Regular.ttf");
 
 }
 
 
 html {
 
   width: 100%
   height: 100%;
   overflow-x: hidden;
 
 }
 
.navbar-default {
 /*background-color: #ffffff !important;*/
 /*border-color: #ffffff;*/
 background-opacity:  0;

}
 
.navbar-text {
 
display: none;
 
}
 
.navbar-default .navbar-brand {
 color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
 color: #010101;
}
.navbar-default .navbar-text {
 color: #777777;
}
.navbar-default .navbar-nav > li > a {
 color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
 color: #010101;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
 color: #010101;
 background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
 color: #010101;
 background-color: #ffffff;
}
.navbar-default .navbar-toggle {
 border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
 background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
 background-color: #777777;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
 border-color: #777777;
}
.navbar-default .navbar-link {
 color: #777777;
}
.navbar-default .navbar-link:hover {
 color: #010101;
}
 
 
 
 
 
@media (max-width: 767px) {
 .navbar-default .navbar-nav .open .dropdown-menu > li > a {
   color: #777777;
 }
 .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
   color: #010101;
 }
 .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
 .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
   color: #010101;
   background-color: #ffffff;
 }
 
 
}
 
 #pageHeader-side {
 
           font-family:Raleway;
           font-size:30px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 50px;
           padding-right: 100px;
           padding-bottom: 60px;
           padding-top: 70px;
           line-height: 30px;
 
       }
 
}
 
 
 
 
 
 
 
 
.cf {
 zoom: 1; }
 
.cf:after,
.cf:before {
 content: ' ';
 display: table; }
 
.cf:after {
 clear: both; }
 
a:link,
a:visited {
 color: inherit; }
 
a:hover,
a:active {
 outline: 0; }
 
a:focus {
 outline: thin dotted; }
 
h1, h2, h3, h4, h5, h6 {
 font-size: 100%; }
 
img {
 border-style: none;
 vertical-align: bottom; }
 
fieldset {
 border-style: none; }
 
html, body {
 height: 100%; }
 
body {
 -moz-text-size-adjust: none;
 -ms-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 background-color: #f8f8f8;
 font: normal normal 62.5%/1em 'Source Sans Pro', sans-serif;
 font-size: 62.5%; }
 
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
 display: block; }
 
audio, canvas, video {
 display: inline-block; }
 
 
.navbar-text {
 
 
   font-family: Raleway;
   color: Black !important;
   font-size: 20px;
   font-weight: bold;
   text-align: left;
}
 
 
 
 
/*    @media (min-width: 1300px) {
    .container{
        max-width: 1700px !important;
    }*/
 
 
 
.overlay h2 {
 
           font-family:Raleway, sans-serif;
           font-size:30px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 10px;
           padding-right: 20px;
           padding-bottom: 10px;
           padding-top: 10px;
 
}
 
.overlay h3 {
 
           font-family:Raleway, sans-serif;
           font-size:30px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 10px;
           padding-right: 20px;
           padding-bottom: 10px;
           padding-top: 10px;
 
}
 
 
.title-head {
 
 
 
 
}
 
 
  .aboutText {
 
       padding-right: 300px;
       padding-left: 300px;
       padding-bottom: 10px;
       font-family:Raleway, sans-serif;
       text-align: left;
       font-size: 18px;      
       line-height: 1.5;
 
   }
 
   .pageHeader-central {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
    /*   font-family: 'Inknut Antiqua', serif;  */  
        4font-family: 'DM Serif Display', serif;
       padding-top: 170px;
       padding-bottom: 10px;
       font-size: 45px;
       padding-left: 100px;
       padding-right: 100px;
 
   }
 
       .pageSub-Header-central {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family:Capriola, Raleway, sans-serif;
       padding-bottom: 110px;
       font-size: 30px;
       padding-left: 100px;
       padding-right: 100px;
 
   }
 
   .red-header {
 
     color: #ff3b3f;
   }
 
    .blue-header {
 
     color: #1aacb7;
   }
 
.aboutHeaders {
 
       padding-bottom: 55px;
       padding-top: 75px;
 
   }
 
 .aboutHeaders h2 {
 
       text-align: center;
       margin: 0 auto;
       position: relative;
       font-family: 'DM Serif Display', serif;
       color: #353c3f;
 
   }

   OLD CODE

.contact-header {
 
   color: #fa8d62;
 
 
}
 
#container {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 font-family: sans-serif;
 text-transform: uppercase;
}
 
.wrapper{
 
 width:100%;
  height:auto;
  margin:0 auto;
  position: relative;
 background: #fff;  /* fallback for old browsers */
 
/* background: -webkit-linear-gradient(to top, #ECE9E6, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
 /*background: linear-gradient(to top, #ECE9E6, #FFFFFF);  W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
 
.about-section {
 
/*background-color:#fff;*/
background: #fff;  /* fallback for old browsers */
margin-top: 0px;
 
 
}
 
 
.experience-section {
 
background: #fff
 
/*margin: 8px;*/
 
 
}
 
 
.contact-section {
 
background-color:#e9e9e9;
margin-top: 8px;
/*margin-left: 8px;
margin-right: 8px;*/
 
 
}
 
.thank-you {
 
width: 20px !important;
height: auto;
margin: 0 auto;
/*display: none;*/
opacity: 0;
padding-bottom: 130px;
 
}
 
 
 
.contact-section:hover .thank-you {
/*   display: block;*/
opacity: 1;
}
 
 
.social {
 
width: 45px;
height: auto;
margin: 0 auto;
/*display: none;*/
padding-bottom: 130px;
 
}
 
 
.verticalLine {
 
   border-left: 2px solid #1E306E !important;
   list-style: none;
}
 
.bottom-list {
 
   list-style: none;
 
}
 
.footer {
 
 
   position: static;
   margin-top: 25px;
   width: 100%;
   height: 100px;
   padding-top: 0px !important
   /*color: #f2687b;
 */
 
}
 
.copyText {
 
   padding-top: 25px;
   color: #465795;
   text-align: right;
   margin-left: 25px;
   margin-right: 25px;
   margin-top: 0px !important;
 
}

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





.Portfolio-Grid{
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
  padding-top: 50px;
  text-align: center;
  
}

h1 {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

img {
  height: auto;
  width: 100%;

  /*vertical-align: middle;*/
}



.btn {
  text-align: center;
  color: #1E306E;
  padding: 0.5rem;
  padding-bottom: 60px;
  font-size: 14px;
/*  text-transform: uppercase;*/  
  border-radius: 4px;
  font-weight: 400;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 1px solid rgba(30,48,110) !important;
  /*background: transparent;*/
  padding-top: 20px;
  max-width: 200px;
  margin-bottom: 25px !important;
  
  

}

.btn:hover {
  /*opacity: 75%;*/
  background-color: #1E306E;
  color: #fff !important;
}

.cards {
  display: flex;
  border-radius: 1.25rem !important; 
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-bottom: 50px;
/*  width: 100%;*/
/*  height: auto;*/
}

.cards_item {
  display: inline;
  padding: 1rem;
  border-radius: 1.25rem !important; 

/*  max-width: 750px;*/  
text-align: center;
}

@media (min-width: 40rem) {
  .cards_item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards_item {
    width: 33.33%;

  }
}

.card {
  background-color: white;
  border-radius: 1.25rem !important; 
  /*box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);*/
  display: flex;
  flex-direction: column;
  /*overflow: hidden;*/
  Height: 320px;
}

.card_content {
  padding: 1rem;
 /* background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);*/
}

.card_title {
  padding-top: 10px;
  color: #465795;
  font-size: 18px;
  font-family:Raleway, sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: capitalize;
  margin: 0px;
}

.card_text {
  color: #4c4c4c;
  font-family:Raleway, sans-serif;
  font-size: 16px;
  line-height: 1.0;
  margin-bottom: 1.25rem;    
  font-weight: 400;
  padding-top: 15px;
  padding-bottom: 10px;
}

.card_image {

 border-radius: 1.25rem !important; 

}

.made_by{
  font-weight: 400;
  font-size: 13px;
  margin-top: 35px;
  text-align: center;
}
 
 
 

 
 
 
/* PROJECT PAGES */
 
 
.project-container {
 
padding-top: 50px;
padding-bottom: 10px;
margin: 0 auto;
max-width: 800px;
padding-left: 30px;
padding-right: 30px;
 
 
 
 
}
 
.project-container-top {
 
padding-top: 80px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
 
 
}
 
.clearfix {
   *zoom:1 /* for IE */
}
 
.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}
 
.clearfix:after {
   clear: both;
}
 
 
.project-images {
 
 
      margin: 0 auto;
      padding-left: 0px;
      padding-right: 0px;
 
}
 
 
 
#projectHeader {
 
      text-align: center;
 
}
 
 
.project-header {
 
 
padding-left: 80px;
 
}
 
 
.project-header {
 
 
padding-left: 0px;
align-content: right;
 
}
 
.project-header-image {
 
/*
padding-left: 80px;
 
padding-right: 80px;*/
 
padding-top: 80px;
padding-bottom: 20px;
width: 100%;
height: auto;
max-width:1200px;
 
}

.project-double-image {
 
/*
padding-left: 80px;
 
padding-right: 80px;*/

padding: 20px;
padding-top: 0px;
padding-bottom: 20px;

width: 100%;
height: auto;
max-width: 350px;
 
}

 
       .project-text {
 
           font-family:Raleway;
           font-size:18px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 0px;
           padding-bottom: 30px;
           padding-top: 30px;
           line-height: 30px;
           /*max-width: 900px;*/
          /* border-left: 2px solid #f2687b;*/
       }
 
       .project-text-header {
 
           font-family:Raleway;
           font-size:30px;
           color:#1E306E;
          text-align: left;
           margin:auto;
           /*padding-left: 15%;*/
           padding-right: 0px;
           padding-bottom: 0px;
           padding-top: 0px;
           line-height: 30px;
           margin-top: 30px;
 
 
       }
 
       .header-style {
 
         position: relative;
 
 
       }
 
 
 
 
 
 
 h1.background-line {
   border-bottom: 1px solid #dfdfdf;
   color: #000;
   font: Raleway, sans-serif;
   font-size: 30px;
   margin-bottom: 30px;
   padding-bottom: 0px;
   position: relative;
   text-align: center;
}
h1.background-line span {
   background:  #FFF;
   padding: 0 15px;
   position: relative;
   top: 10px;
}
 
.parallax-wrapper {
   position: relative;
}
 
.parallax-container {
   height: 200px;
   background-color: #0f0;
   width: 100vw;
   margin-left: calc(-50vw + 50% - 8px);
   position: relative;
}
 
 
       .full-width {
 
 
 
       }   
 
 
 
       .center-header {
 
 
         padding-top: 50px;
 
       }
 
         .project-text-title {
 
           font-family:Raleway;
           font-size:40px;
           color:#1E306E;
           text-align: left;
           margin: 0 auto;
           padding-left: 0px;
           padding-right: 0px;
           padding-bottom: 10px;
           padding-top: 0px;
           line-height: 30px;
 
 
 
       }
 
       .project-text-container{
 
           padding-left: 0px;
           padding-top: 0px;
 
       }
 
 
       .project-head-image {
 
         padding-top: 20px;
 
 
       }
 
       .project-info-header {
 
 
 
           font-family:Raleway;
           font-size:17px;
           color:#333333;
           position: relative;
       /*    text-align: left;*/
           margin:auto;
           /*padding-left: 100px;*/
           padding-right: 0px;
           padding-bottom: 0px;
           padding-top: 0px;
           line-height: 30px;
         /*  border-left: 2px solid #9e9e9e;*/
           /*max-width: 1000px;*/
 
 
 
       }
 
 
        .persona-text {
 
           font-family:Raleway;
           font-size:16px;
           color:#333333;
           text-align: left;
           margin:auto;
           padding-left: 15px;
           padding-bottom: 30px;
           line-height: 30px;
           /*max-width: 900px;*/
 
       }
 
       .persona-text-header {
 
           font-family:Raleway;
           font-size:20px;
           color:#333333;
       /*    text-align: left;*/
           margin:auto;
           padding-left: 5px;
           padding-right: 0px;
           padding-bottom: 30px;
           padding-top: 0px;
           line-height: 30px;
 
 
         /*  max-width: 1000px;*/
 
       }
 
       .phone-screens {
 
           margin-left: auto;
           margin-right: auto;
           display: inline-block;
           height:auto;
           width:100%;
           margin-top: 90px;
 
           /*box-shadow:0 0 5px rgba(0,0,0,0.2);*/
           /*min-width: 130px;*/
 
       }
 
 
       .double-image {
 
           margin-left: auto;
           margin-right: auto;
           display: inline-block;
           height:auto;
           width:100%;
           padding-top: 90px;
           padding-left: 5px;
          /* min-width: 130px;*/
 
       }
 
 
.social-icon {
 
/*width: 40px;
height: auto;*/
text-align: center;
 
}
 
 
.persona {
 
border: none;
font-size: 14px;
font-family: Raleway;
padding-top: 60px;
 
 
}
 
.image-subtext {
 
font-family: Raleway, sans-serif;
font-size: 14px;
padding-top: 10px;
text-align: center;
padding-bottom: 30px;
 
}
 
.middle-text {
 
padding-top: 40px;
 
}
 
/*Oh the Card. Here you go*/
.profile-card {
 max-width:900px;
 background:#FFF;
 margin:100px auto;
 border-radius:5px;
 overflow:hidden;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
 animation: fadeIn 2s;
 transition:all 0.6s ease;
 transform-style: preserve-3d;
}
 
.profile-card header a {
 padding-top: 15px;
 display:block;
 /*background: #ccc url('https://i.imgur.com/a7Y45A6.jpg') no-repeat;*/
 background-size:cover;
 min-height:120px;
 margin-bottom:35px;
 position:relative; 
 transition: all 2s ease;
}
.profile-card header a:hover {
transform: scale(1.02);
}
 
/*umm The Avatar.. Swoosh!! */
.profile-card header img {
 border: solid 3px #FFF;
 display: block;
 border-width: 4px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20);
 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20);
 position:absolute;
 /*bottom:-40px;*/
 left:50%;
 max-width:100px;
 transform: translateX(-50%);
}
 
.profile-card header h1, .profile-card header h2 {
 margin:5px 30px;
 text-align:center;
}
.profile-card header h1 {
 font-family: 'Raleway', sans-serif !important;
 font-weight:500;
 color:#448ad1;
}
 
.profile-card header h2 {
 font-family: 'Raleway', sans-serif;
 font-weight:400;
 font-size:14px;
 /*text-transform:uppercase;*/
 color:#aeaeae;
}
 
/*You.. there.. bio*/
.profile-bio {
 margin:30px;
}
 
/*Be Social*/
 
.profile-social-links {
 list-style:none; 
 display:table;
 width:100%;
 border-top:1px solid #ededed;
 margin:0;
 padding:0;
}
 
.profile-social-links li {
 display:table-cell;
 min-width: 1px;
}
 
.profile-social-links li a {
 padding:20px 5px;
 display:block;
 text-align:center;
 border-left:1px solid #ededed;
 transition: all 0.5s ease;
}
 
.profile-social-links li:first-child a {
 border-left:0;
}
 
.profile-social-links li img {
max-width:30px;
 filter: grayscale(100%);
 opacity:0.5;
 transition: all 0.5s ease;
}
.profile-social-links li:last-child img {
opacity:0.2;
}
.profile-social-links a:hover {
 background:#f6f6f6;
}
.profile-social-links a:hover img {
 filter: grayscale(0%);
 opacity:1;
}
 
.persona-list {
 
 padding-left: 20px;
 list-style-type: none;
 padding-top: 20px;
 font-family: Raleway, sans-serif;
 font-size: 18px;
 
}
 
.persona-list-single {
 
padding-bottom: 40px;
 
}
 
 
 
.footer {
 
 
 /*color: #f2687b;*/
 
}
 
 
/* Animations Area
   Warning: Entry Restricted
 */
 
 
@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 
 100% {
   opacity: 1;
 }
}
 
 
 
 
@media (max-width: 1000px) { 
 
.aboutText {
 
       padding-right: 10px;
       padding-left: 10px;
 
   }
 
   section#content #our-work ul li{display:block;float:left;height:auto;width:50%;position:relative;}
 
 
 
}
 
 
 
 
 
@media (max-width: 900px) {
 
 
.project-container {
 
   padding-top: 50px;
   padding-bottom: 10px;
   margin: 0 auto;
 
 
 
 
}
 
 
}
 
 
 
@media (max-width: 400px) { 
 
section#content #our-work ul li{display:block;float:left;height:auto;width:100%;;position:relative}
 
.aboutText {
 
       padding-right: 20px;
       padding-left: 20px;
       font-size: 18px;
   }
 
 
   .project-container {
 
   padding-top: 50px;
   padding-bottom: 10px;
   margin: auto;
   padding-right: 20px;
   padding-left: 20px;
 

 
}

 

.profile-pic-2 {

    height: 170px; 
    width: 170px;

}


.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}



.center-header {
 
 
         padding-top: 20px;
 
       }
 
.verticalLine {
 
   padding-top: 50px;
}
 
section#content #our-work ul li .overlay  h2{color:#515151;font-size:45px; font-family:Raleway; text-align: center; padding-top: 20%; opacity:1;}
section#content #our-work ul li .overlay h3{color:#515151;font-size:30px; font-family:Raleway; text-align: center; padding-top:5px; opacity:1;}
 
section#content #our-work ul li .overlay {background-color:#FFFEF9;height:100%;left:0;position:absolute;top:0;width:100%;opacity:0.7;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
 
 
}
 
@media (max-width: 650px) { 
 
 
.navbar-default {
 
 display: inline !important;
 color: #1E306E !important;
 min-height: 60px !important;
 background-color: #fff !important;
}
 
/*.profile-pic {
 
 
margin: 0 auto;
display: block;
text-align: center !important;
padding-left: 10px;
padding-right: 10px;
 
 
}*/
 
.project-text-header {
 
           font-family:Raleway;
           font-size:30px;
           color:#1E306E;
           text-align: left;
           margin:auto;
           padding-left: 0px;
           padding-right: 0px;
           padding-bottom: 0px;
           padding-top: 0px;
           line-height: 30px;
           margin-top: 30px;
 
 
       }



.profile-pic-2 {

    height: 170px; 
    width: 170px;
    
}
 
 
h1.background-line {
   border-bottom: 1px solid #dfdfdf;
   color: #000;
   font: Raleway, sans-serif;
   font-size: 30px;
   margin-bottom: 30px;
   padding-bottom: 0px;
   position: relative;
   text-align: center;
}
 
.verticalLine {
 
   padding-top: 50px;
}
 
.project-container {
 
   padding-top: 50px;
   padding-bottom: 10px;
   margin: auto;
   padding-right: 30px;
   padding-left: 30px;
 
 
 
}
 
.navbar-fixed-top {
 
display: inline !important;
min-height: 60px !important;
 
}
 
.aboutText {
 
       padding-right: 20px;
       padding-left: 20px;
       font-size: 16px;
   }
 
 
   .persona-text {
 
       padding-right: 20px;
       padding-left: 20px;
       font-size: 14px;
   }
 
 .card {

    height: auto;

 }
 
.project-text {
 
   font-family:Raleway;
   font-size:16px;
   color:#333333;
   text-align: left;
   margin:auto;
   padding-left: 20px;
   padding-bottom: 30px;
   line-height: 30px;
   /*max-width: 900px;*/
   /*border-left: 2px solid #f2687b;*/
 
 }
 
 .persona-list {
 
 padding-left: 20px;
 list-style-type: none;
 padding-top: 20px;
 font-family: Raleway, sans-serif;
 font-size: 13px;
 
}
 
section#content #our-work ul li{display:block;float:left;height:auto;width:100%;position:relative} 
section#content #our-work ul li .overlay  h2{color:black;font-size:17px; font-family:Raleway; text-align: center; padding-top: 20%;}
section#content #our-work ul li .overlay h3{color:black;font-size:12px; font-family:Raleway; text-align: center; padding-top:25px}
 
.pageHeader-central {
 
       text-align: center;
       color: #1E306E;
       margin: 0 auto;
       position: relative;
       font-family:Raleway, sans-serif;
       padding-top: 90px;
       padding-bottom: 0px;
       font-size: 35px;
       padding-left: 20px;
       padding-right: 20px;
 
   }
 
    .pageSub-Header-central {
 
       text-align: center;
       color: #1E306E;
       margin: 0 auto;
       position: relative;
       font-family:Capriola, sans-serif;
       padding-top: 10px;
       padding-bottom: 50px;
       font-size: 25px;
       padding-left: 20px;
       padding-right: 20px;
 
   }
 
 
    .aboutText {
 
       padding-right: 20px;
       padding-left: 20px;
 
   }
 
   .about-section {
 
margin-top: 0px !important;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
 
}
 
 
   .experience-section {
 
 
margin-top: 8px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
 
 
}
 
 
   .contact-section {
 
margin-top: 8px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
 
 
}
 
}
 
 
   .quote {
 
       font-size: 27 !important;
       color: #1E306E !important;
       font-style: italic !important;
       font-style: bold !important;
       text-align: center !important;
       border: none !important;
       padding-top: 50px;
 
 
 
    }