/*---------------------------FONTS from fonts.google.com--------------------------------*/
/*--------------------------------------------------------------------------------------*/
/*-------------------------------COLOR VARIABLES----------------------------------------*/
/*--------------------------------------------------------------------------------------*/
/*--------------------------------COLOR RULES-------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
.white {
  background-color: #FFFFFF; }

.pink {
  background-color: #F88E8C; }

.light {
  background-color: #DADFD7; }

.mid {
  background-color: #A3A397; }

.dark {
  background-color: #3D3D39; }

.white-text {
  color: #FFFFFF; }

.pink-text {
  color: #F88E8C; }

.light-text {
  color: #DADFD7; }

.mid-text {
  color: #A3A397; }

.dark-text {
  color: #3D3D39; }

/*--------------------------------BOILER PLATE-------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 18pt;
  min-width: 375px; }

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, address, blockquote, div, span, img, section, article, form, input, textarea, table, tr, th, td {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

ul {
  list-style: none; }

/*-----------------------------------TYPOGRAPHY-----------------------------------------*/
/*--------------------------------------------------------------------------------------*/
h1 {
  font-family: "Bad Script", cursive;
  line-height: 1;
  font-size: 1.35em; }

h2 {
  font-family: "Bad Script", cursive;
  font-size: 1.3em;
  line-height: 1.3; }

h3 {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 1.1em; }

h4 {
  font-family: "Bad Script", cursive;
  font-size: 1.1em;
  line-height: 1.1; }

h5 {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 10em; }

h6 {
  font-family: "Lato", sans-serif;
  font-weight: 400; }

p {
  font-size: .8em; }

.subhead {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: .8em;
  margin-top: 20px; }

.center {
  text-align: center; }

.imgBorder {
  border: 1px solid #3D3D39;
  margin-bottom: 0; }

.caption {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: .6em; }

.no-border {
  border: 0 solid #3D3D39; }

.negative-margin {
  margin-top: -10px; }

.negative-margin-40 {
  margin-top: -40px; }

/*-----------------------------------MOBILE---------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
article {
  width: 100%; }

#mobile-header-img-container {
  width: 100%;
  background-color: #3D3D39; }

#menu-button-container {
  width: 100%; }

#menu-icon {
  margin: 5px;
  float: right; }

#close-icon {
  display: none;
  float: right; }

#mobile-nav-container {
  display: none;
  background-color: #A3A397; }
  #mobile-nav-container li {
    border-bottom: 2px solid #3D3D39;
    padding: 30px 20px;
    margin: 0 10px;
    text-align: center; }
  #mobile-nav-container li:nth-child(3) {
    border-bottom: 0 solid #FFFFFF; }
  #mobile-nav-container a {
    color: white; }

.scroll-down {
  display: none; }

#header-1st-col {
  width: 40%;
  float: left; }
  #header-1st-col img {
    width: 60%;
    float: right;
    margin: 20% 10% 20% 30%; }

#header-2nd-col {
  width: 60%;
  float: left; }

#header-heading {
  margin-top: 50%; }

#desktop-header {
  display: none; }

/*------------------------------------BODY----------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
/*-----------------------------------ABOUT----------------------------------------------*/
#timeline-section {
  width: 80%;
  padding: 40px 10%; }

.timeline-col-left {
  width: 39%;
  padding: 0 5%;
  border-right: 5px dotted #FFFFFF;
  float: left;
  margin-top: 20px; }

.timeline-graphic-left {
  width: 80%;
  margin: 40px 20% 0 0;
  padding-top: 20px;
  padding-bottom: 20px; }
  .timeline-graphic-left img {
    width: 40%;
    margin: 0 30%; }
  .timeline-graphic-left p {
    font-size: .6em;
    font-family: "Lato", sans-serif; }
  .timeline-graphic-left .title-p {
    font-size: .8em; }

.timeline-col-right {
  width: 39%;
  padding: 0 5%;
  float: left;
  margin-top: 90px; }

.timeline-graphic-right {
  width: 80%;
  margin: 40px 0 0 20%;
  padding-top: 20px;
  padding-bottom: 20px; }
  .timeline-graphic-right img {
    width: 40%;
    margin: 0 30%; }
  .timeline-graphic-right p {
    font-size: .6em;
    font-family: "Lato", sans-serif; }
  .timeline-graphic-right .title-p {
    font-size: .8em; }

#triple-threat-section {
  width: 80%;
  padding: 40px 10%; }

.back {
  z-index: 0;
  position: absolute;
  line-height: 0;
  margin-top: 130px;
  margin-left: -40px; }

.front {
  z-index: 1000;
  position: relative;
  margin-top: 10px; }

#one, #two, #three, #four {
  margin-top: 40px; }

.circle {
  border-radius: 180px;
  height: 75px;
  width: 100px;
  padding-top: 25px;
  margin: 0 auto;
  box-shadow: 5px 5px 20px #DADFD7;
  font-family: "Bad Script", cursive;
  text-align: center;
  line-height: 1; }

.circle:hover, .pink-circle:hover {
  background-color: #3D3D39; }
  .circle:hover p, .pink-circle:hover p {
    color: #FFFFFF; }

.dark-circle {
  border-radius: 180px;
  height: 85px;
  width: 100px;
  padding-top: 15px;
  margin: 25px auto 0 auto;
  box-shadow: 5px 5px 20px #3D3D39;
  font-family: "Bad Script", cursive;
  text-align: center;
  line-height: 1.3;
  color: #FFFFFF; }

.dark-circle:hover {
  background-color: #DADFD7;
  color: #3D3D39; }
  .dark-circle:hover p {
    color: #3D3D39; }

.pink-circle {
  border-radius: 180px;
  height: 85px;
  width: 100px;
  padding-top: 15px;
  margin: 25px auto 0 auto;
  box-shadow: 5px 5px 20px #DADFD7;
  font-family: "Bad Script", cursive;
  text-align: center;
  line-height: 1.3; }

/*-----------------------------------MY WORK--------------------------------------------*/
#work-title-section {
  padding-top: 15%;
  padding-bottom: 12.5%; }
  #work-title-section h1 {
    font-size: 2em; }

.one-col {
  width: 100%; }

.two-col {
  width: 80%;
  padding: 40px 10% 60px 10%; }

#pp-img {
  background-image: url("pp-cover.jpg");
  background-size: 110%;
  background-repeat: no-repeat;
  height: 400px; }

#terp-img {
  background-image: url("terp-cover-500.jpg");
  background-size: 110%;
  background-repeat: no-repeat;
  height: 400px; }

#pfn-img {
  background-image: url("pfn-cover.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 400px; }

#terp-ios-img-1, #terp-ios-img-2 {
  background-image: url("terp-ios-cover.jpg");
  background-size: 175%;
  background-repeat: no-repeat;
  height: 400px; }

#rintin-img-1, #rintin-img-2 {
  background-image: url("rintin-cover.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 400px; }

#creations-img-1, #creations-img-2 {
  background-image: url("creations-cover.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 400px; }

#terp-ios-img-2, #rintin-img-2, #creations-img-2 {
  display: none; }

.two-col h3 {
  margin-bottom: 5px;
  margin-top: 50px; }

.portfolio-list {
  list-style: initial;
  font-weight: 300;
  margin-left: 40px; }
  .portfolio-list li {
    margin-bottom: 5px; }
    .portfolio-list li p {
      margin-left: 5px; }

/*-----------------------------------CONTACT--------------------------------------------*/
#contact-section {
  width: 80%;
  padding: 60px 10%; }
  #contact-section h1 {
    margin-bottom: 40px; }

input, textarea {
  -webkit-appearance: none;
  width: 90%;
  padding: 10px 5% 0 5%;
  margin-bottom: 40px;
  margin-top: 0;
  border: 0 solid #FFFFFF; }

input[type=text], input[type=email], textarea {
  background-color: transparent;
  border-bottom: 3px solid #FFFFFF;
  height: 60px;
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 300; }

/*________________CODE COURTESY OF toscho from forum on https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css___________________*/
::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #FFFFFF; }

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #FFFFFF;
  opacity: 1; }

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #FFFFFF;
  opacity: 1; }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #FFFFFF; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #FFFFFF; }

/*________________CODE COURTESY OF Cory from forum on https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element___________________*/
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

input[type=submit] {
  -webkit-appearance: none;
  position: relative;
  display: block;
  margin: 25px auto;
  height: 100px;
  width: 100px;
  padding: 25px;
  border-radius: 180px;
  color: #FFFFFF;
  background-color: #3D3D39;
  font-size: 1em;
  font-weight: 400;
  text-align: center;
  box-shadow: 5px 5px 20px #3D3D39;
  font-family: "Bad Script", cursive; }

input[type=submit]:hover {
  background-color: #DADFD7;
  color: #3D3D39; }

#contact .one-col {
  margin-top: 60px; }
  #contact .one-col a {
    color: #3D3D39;
    padding-bottom: 25px; }
  #contact .one-col .phone {
    padding-bottom: 25px; }

/*-----------------------------------FOOTER--------------------------------------------*/
footer {
  padding: 20px 0 30% 0;
  width: 100%; }
  footer img {
    width: 90%;
    margin: 0 5%; }
  footer h1 {
    font-size: 1.4em; }

#footer-heading {
  margin-top: 35%;
  margin-left: 35%; }

.back-footer {
  z-index: 0;
  position: absolute; }

.front {
  z-index: 1000;
  position: relative; }

/*------------------------------CASE STUDY---------------------------------------------*/
#header-case-study #desktop-nav {
  width: 100%;
  position: fixed;
  z-index: 1500;
  background-color: #DADFD7; }
  #header-case-study #desktop-nav ul {
    float: right;
    margin: 5px 2.5% 0 0; }
  #header-case-study #desktop-nav li {
    float: left;
    padding: 0 0 0 30px;
    margin: 5px 0 5px 30px;
    border-left: 1px solid #3D3D39; }
  #header-case-study #desktop-nav li:nth-child(1) {
    border-left: 0 solid #3D3D39; }
  #header-case-study #desktop-nav a {
    color: #3D3D39;
    font-weight: 300; }
  #header-case-study #desktop-nav a:hover {
    text-decoration: underline; }

#dandelion {
  position: relative;
  z-index: 2000; }

section {
  width: 80%;
  margin: 60px 0 80px;
  padding: 0 10%; }
  section img {
    width: 100%;
    margin: 20px 0; }
  section h3 {
    font-size: .8em; }
  section p, section li {
    font-weight: 300;
    font-size: .7em; }
  section p {
    margin-bottom: 14px; }
  section ul {
    list-style: initial;
    margin: 15px 0 40px 30px; }
  section li {
    margin-bottom: 10px; }
  section .dark-circle {
    height: 75px;
    width: 100px;
    padding-top: 25px; }
  section .mobile-two-col {
    width: 50%;
    float: left; }
  section .desktop-two-col {
    width: 100%;
    float: none; }
    section .desktop-two-col img {
      width: 100%;
      margin: 20px 0;
      padding: 0; }
  section .digital-flow {
    border: 0.5px solid #3D3D39; }
  section a p {
    font-weight: 900;
    color: #F88E8C;
    text-align: center; }
  section .top-mg-60 {
    margin-top: 60px; }
  section .top-mg-30 {
    margin-top: 30px; }
  section .bottom-mg-60 {
    margin-bottom: 60px; }
  section .color-one-col {
    width: 50%;
    float: left; }
  section .color-container {
    float: none; }
  section .color-circle {
    width: 125px;
    height: 125px;
    margin: 15px auto;
    position: relative;
    border-radius: 180px; }
  section #rintin-dark {
    background-color: #495059; }
  section #rintin-mid {
    background-color: #646b71; }
  section #rintin-light {
    background-color: #c5ccd4; }
  section #rintin-white {
    background-color: #ffffff;
    border: .5px solid #495059; }
  section #rintin-blue {
    background-color: #00c2c9; }
  section #rintin-green {
    background-color: #aae554; }
  section #rintin-pink {
    background-color: #ff4962; }
  section #rintin-purple {
    background-color: #d879ff; }
  section #pfn-dark {
    background-color: #172125; }
  section #pfn-mid {
    background-color: #007497; }
  section #pfn-light {
    background-color: #7fd8ff; }
  section #pfn-white {
    background-color: #ffffff;
    border: .5px solid #172125; }
  section #creations-dark {
    background-color: #383832; }
  section #creations-blue {
    background-color: #6198A6; }
  section #creations-yellow {
    background-color: #E2E7C2; }
  section #creations-white {
    background-color: #FFFFFF;
    border: .5px solid #383832; }
  section .logo-icons {
    width: 50%;
    margin: 0 25%; }
  section .banner-width {
    width: 120%;
    margin-left: -10%; }
  section video {
    width: 100%; }

#left-arrow, #right-arrow {
  width: 30px;
  height: 30px;
  border-radius: 180px; }
  #left-arrow img, #right-arrow img {
    width: 100%; }

#back-to-top {
  width: 10%;
  position: fixed;
  bottom: 5px;
  left: 45%;
  right: 45%;
  z-index: 1200;
  display: none; }
  #back-to-top img {
    width: 100%; }

#arrow-container {
  width: 99%;
  position: fixed;
  bottom: 50%;
  left: .5%;
  right: .5%;
  z-index: 1201;
  display: none; }
  #arrow-container #left-arrow {
    float: left;
    width: 10%;
    max-width: 70px;
    border-radius: 180px; }
    #arrow-container #left-arrow img {
      width: 100%; }
  #arrow-container #right-arrow {
    float: right;
    width: 10%;
    max-width: 70px;
    border-radius: 180px; }
    #arrow-container #right-arrow img {
      width: 100%; }

/*--------------------------------------------------------------------------------------*/
@media only screen and (min-width: 500px) {
  h1 {
    font-family: "Bad Script", cursive;
    line-height: 1;
    font-size: 2em; }
  h2 {
    font-size: 1.5em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 400; }
  #header-heading {
    margin-top: 55%; }
  /*-----------------------------------ABOUT--------------------------------------------*/
  #timeline-section {
    width: 60%;
    padding: 40px 20%; }
  #triple-threat-section {
    width: 70%;
    padding: 40px 15%; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  .two-col {
    width: 80%;
    padding: 40px 10% 60px 10%; }
  #terp-img {
    background-size: 100%;
    height: 550px; }
  #terp-ios-img-1 {
    background-size: 130%; }
  #rintin-img, #rintin-img-1 {
    background-size: 100%;
    height: 500px; }
  #creations-img-1 {
    background-size: 100%;
    height: 600px; }
  /*-----------------------------------FOOTER--------------------------------------------*/
  footer {
    padding: 20px 0 30% 0;
    width: 100%; }
    footer img {
      width: 90%;
      margin: 0 5%; }
    footer h1 {
      font-size: 1.6em; }
  #footer-heading {
    margin-top: 35%;
    margin-left: 35%; }
  #left-arrow, #right-arrow {
    width: 40px;
    height: 40px;
    border-radius: 180px; }
    #left-arrow img, #right-arrow img {
      width: 100%; }
  #back-to-top {
    width: 10%;
    position: fixed;
    bottom: 5px;
    left: 45%;
    right: 45%;
    max-width: 70px;
    z-index: 1200;
    display: none; }
    #back-to-top img {
      width: 100%; } }

/*--------------------------------------------------------------------------------------*/
@media only screen and (min-width: 667px) {
  h1 {
    font-family: "Bad Script", cursive;
    line-height: 1;
    font-size: 2.3em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 400; }
  #desktop-header {
    display: inline; }
  #mobile-header {
    display: none; }
  #desktop-nav {
    width: 100%;
    position: fixed;
    z-index: 1500;
    background-color: #DADFD7; }
    #desktop-nav ul {
      float: right;
      margin: 5px 2.5% 0 0; }
    #desktop-nav li {
      float: left;
      padding: 0 0 0 30px;
      margin: 5px 0 5px 30px;
      border-left: 1px solid #3D3D39; }
    #desktop-nav li:nth-child(1) {
      border-left: 0 solid #3D3D39; }
    #desktop-nav a {
      color: #3D3D39;
      font-weight: 300; }
    #desktop-nav a:hover {
      text-decoration: underline; }
  #header-1st-col {
    width: 40%;
    float: left; }
    #header-1st-col img {
      width: 60%;
      float: right;
      margin: 20% 10% 30% 30%; }
  #header-2nd-col {
    width: 50%;
    float: left; }
  #header-heading {
    margin-top: 70%; }
  /*---------BODY----------*/
  #timeline-section {
    width: 50%;
    padding: 40px 25%; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #work-title-section h1 {
    font-size: 2.5em; }
  #terp-img {
    background-size: 100%;
    height: 700px; }
  #terp-ios-img-1 {
    background-size: 150%;
    height: 600px; }
  #rintin-img-1, #creations-img-1 {
    height: 600px; }
  #pfn-img {
    background-size: 100%;
    height: 600px; }
  /*-----------------------------------FOOTER--------------------------------------------*/
  footer {
    padding: 40px 0 30% 0;
    width: 100%; }
    footer img {
      width: 90%;
      margin: 0 5%; }
    footer h1 {
      font-size: 2.3em; }
  #footer-heading {
    margin-top: 35%;
    margin-left: 35%; }
  section {
    width: 70%;
    padding: 0 15%; } }

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 2.8em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1.2em; }
  /*-----------------------------------ABOUT----------------------------------------------*/
  #timeline-section {
    width: 40%;
    padding: 40px 5% 80px 5%;
    float: left; }
  .timeline-col-left {
    width: 39%;
    padding: 0 5%;
    border-right: 5px dotted #FFFFFF;
    float: left; }
  .timeline-graphic-left {
    width: 80%;
    margin: 20px 20% 0 0;
    padding-top: 20px;
    padding-bottom: 20px; }
    .timeline-graphic-left img {
      width: 40%;
      margin: 0 30%; }
    .timeline-graphic-left p {
      font-size: .6em;
      font-family: "Lato", sans-serif; }
    .timeline-graphic-left .title-p {
      font-size: .8em; }
  .timeline-col-right {
    width: 39%;
    padding: 0 5%;
    float: left;
    margin-top: 90px; }
  .timeline-graphic-right {
    width: 80%;
    margin: 40px 0 0 20%;
    padding-top: 20px;
    padding-bottom: 20px; }
    .timeline-graphic-right img {
      width: 40%;
      margin: 0 30%; }
    .timeline-graphic-right p {
      font-size: .6em;
      font-family: "Lato", sans-serif; }
    .timeline-graphic-right .title-p {
      font-size: .8em; }
  #triple-threat-section {
    width: 42.5%;
    padding: 40px 2.5% 0 5%;
    float: left; }
  .front {
    margin-top: 0; }
  #one, #two, #three {
    margin-top: 20px; }
  #four {
    margin-top: 5%; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #work-title-section {
    padding-top: 15%;
    padding-bottom: 12.5%; }
    #work-title-section h1 {
      font-size: 2.8em; }
  #terp-ios-img-2 {
    background-size: 275%;
    height: 560px; }
  .two-col {
    width: 40%;
    padding: 50px 5% 150px 5%;
    float: left; }
  #pp-img {
    background-size: 190%;
    height: 810px; }
  #pp-text {
    height: 810px; }
  #terp-ios-img-1, #rintin-img-1, #creations-img-1 {
    display: none; }
  #terp-ios-img-2, #rintin-img-2, #creations-img-2 {
    display: inline; }
  #terp-img {
    background-image: url("terp-cover.jpg");
    background-size: 135%;
    height: 560px; }
  #terp-ios-text {
    height: 560px; }
  #terp-text {
    height: 560px; }
  #rintin-text {
    height: 1083px; }
  #rintin-img-2 {
    background-size: 225%;
    height: 1083px; }
  #pfn-img {
    background-size: 165%;
    height: 730px; }
  #pfn-text {
    height: 730px; }
  #creations-img-2 {
    background-size: 225%;
    height: 1033px; }
  #creations-text {
    height: 1033px; }
  .two-col h3 {
    margin-bottom: 5px;
    margin-top: 50px; }
  .portfolio-list {
    list-style: initial;
    font-weight: 300;
    margin-left: 40px; }
    .portfolio-list li {
      margin-bottom: 5px; }
      .portfolio-list li p {
        margin-left: 5px; }
  .dark-circle, .pink-circle {
    margin: 7% auto 0 auto; }
  /*-----------------------------------CONTACT--------------------------------------------*/
  #contact-section {
    width: 80%;
    padding: 100px 10% 60px 10%; }
    #contact-section h1 {
      margin-bottom: 40px; }
  /*-----------------------------------FOOTER--------------------------------------------*/
  footer {
    padding: 40px 0 30% 0;
    width: 100%; }
    footer img {
      width: 90%;
      margin: 0 5%; }
    footer h1 {
      font-size: 2.6em; }
  #footer-heading {
    margin-top: 35%;
    margin-left: 35%; }
  /*-----------------------------------CASE STUDY--------------------------------------------*/
  section {
    width: 60%;
    margin: 100px 0 80px;
    padding: 0 20%; }
    section h3 {
      font-size: .9em; }
    section p, section li {
      font-weight: 300;
      font-size: .8em; }
    section p {
      margin-bottom: 14px; }
    section .mobile-two-col {
      width: 50%;
      float: left; }
    section .desktop-two-col {
      width: 45%;
      margin: 0;
      float: left; }
      section .desktop-two-col img {
        width: 100%;
        margin: 20px 0;
        padding: 0; }
      section .desktop-two-col .digital-flow {
        border: 0.5px solid #3D3D39; }
    section .left-margin {
      margin-left: 5%; }
    section .right-margin {
      margin-right: 5%; }
    section .color-one-col {
      width: 100%;
      float: none; }
      section .color-one-col p {
        margin-bottom: 0; }
    section .color-container {
      width: 20%;
      margin: 0 2.5%;
      float: left; }
    section .color-circle {
      width: 100px;
      height: 100px; }
    section #desktop-top-margin {
      padding-top: 150px; }
  #back-to-top {
    width: 70px;
    position: fixed;
    bottom: 5px;
    margin: 0 auto;
    z-index: 1200;
    display: none; }
    #back-to-top img {
      width: 100%; } }

@media only screen and (min-width: 820px) {
  /*-----------------------------------MY WORK--------------------------------------------*/
  #creations-img-2 {
    background-size: 200%;
    height: 1003px; }
  #creations-text {
    height: 1003px; }
  #terp-ios-img-2 {
    background-size: 255%; }
  .dark-circle, .pink-circle {
    margin: 12% auto 0 auto; }
  /*-----------------------------------CONTACT--------------------------------------------*/
  #contact-section {
    width: 80%;
    padding: 100px 10% 60px 10%; }
    #contact-section h1 {
      margin-bottom: 40px; }
  form {
    width: 670px;
    margin: 0 auto; } }

@media only screen and (min-width: 960px) {
  h1 {
    font-size: 3.5em; }
  h2 {
    font-size: 1.5em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1.4em; }
  #header-1st-col {
    width: 40%;
    float: left; }
    #header-1st-col img {
      width: 60%;
      float: right;
      margin: 10% 10% 10% 30%; }
  #header-heading {
    margin-top: 50%; }
  /*----------------------------ABOUT------------------------------*/
  #timeline-section {
    width: 30%;
    padding: 60px 10%; }
  #triple-threat-section {
    width: 35%;
    padding: 60px 7.5% 0 7.5%;
    float: left; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #work-title-section {
    padding-top: 15%;
    padding-bottom: 12.5%; }
    #work-title-section h1 {
      font-size: 3.5em; }
  .two-col {
    padding: 60px 5% 160px 5%; }
  #terp-ios-img-2 {
    background-size: 205%;
    height: 500px; }
  #terp-ios-text {
    height: 500px; }
  #terp-img {
    background-size: 115%;
    height: 560px; }
  #rintin-text {
    height: 1063px; }
  #rintin-img-2 {
    background-size: 185%;
    height: 1063px; }
  #pfn-img {
    height: 730px; }
  #pfn-text {
    height: 730px; }
  #creations-img-2 {
    background-size: 170%;
    height: 973px; }
  #creations-text {
    height: 973px; }
  .dark-circle, .pink-circle {
    margin: 20% auto 0 auto; }
  /*-----------------------------------FOOTER--------------------------------------------*/
  footer {
    padding: 60px 0 30% 0;
    width: 100%; }
    footer h1 {
      font-size: 3em; }
  #footer-heading {
    margin-top: 35%;
    margin-left: 35%; }
  section .color-circle {
    width: 125px;
    height: 125px; } }

@media only screen and (min-width: 1024px) {
  /*----------------------------ABOUT------------------------------*/
  #four {
    margin-top: 10%; }
  #creations-img {
    background-size: 155%; }
  /*---------------------------MY WORK--------------------------*/
  #terp-img {
    background-size: 105%;
    height: 560px; } }

@media only screen and (min-width: 1100px) {
  /*----------------------------ABOUT------------------------------*/
  p {
    font-size: .8em; }
  #timeline-section {
    width: 25%;
    padding: 60px 12.5%; }
  #four {
    margin-top: 20%; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #pp-img {
    background-size: 130%;
    height: 730px; }
  #pp-text {
    height: 730px; }
  #terp-ios-text {
    height: 460px; }
  #terp-ios-img-2 {
    background-size: 200%;
    height: 460px; }
  #terp-img {
    background-size: 100%; }
  #creations-img {
    background-size: 160%; }
  .two-col {
    padding: 80px 5% 180px 5%; }
  #rintin-img {
    height: 1023px; }
  #rintin-text {
    height: 1023px; }
  #rintin-img-2 {
    background-size: 160%;
    height: 1023px; }
  #pfn-img {
    background-size: 112%;
    height: 650px; }
  #pfn-text {
    height: 650px; }
  #creations-img-2 {
    background-size: 145%;
    height: 923px; }
  #creations-text {
    height: 923px; }
  .dark-circle, .pink-circle {
    margin: 17% auto 0 auto; }
  /*-----------------------------------CONTACT--------------------------------------------*/
  #contact-section {
    padding-top: 120px;
    padding-bottom: 80px; }
    #contact-section h1 {
      margin-bottom: 80px; }
  /*-----------------------------------FOOTER--------------------------------------------*/
  footer {
    padding: 60px 0 30% 0;
    width: 100%; }
    footer h1 {
      font-size: 3.5em; }
  #footer-heading {
    margin-top: 35%;
    margin-left: 35%; } }

@media only screen and (min-width: 1250px) {
  h2 {
    font-size: 1.8em; }
  h1 {
    font-size: 4em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1.4em; }
  p {
    font-size: .9em; }
  /*----------------------------ABOUT------------------------------*/
  .timeline-graphic-left {
    padding-bottom: 60px; }
  .timeline-col-right {
    margin-top: 70px; }
  .timeline-graphic-right {
    padding-bottom: 60px; }
  #four {
    margin-top: 35%; }
  #timeline-section, #triple-threat-section {
    padding-top: 80px; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #work-title-section {
    padding-top: 12.5%;
    padding-bottom: 10%; }
    #work-title-section h1 {
      font-size: 4em; }
  #pp-img {
    background-size: 115%;
    height: 710px; }
  #pp-text {
    height: 710px; }
  #terp-ios-img-2 {
    background-size: 175%; }
  #terp-img {
    background-image: url("terp-cover-500.jpg");
    background-size: 105%; }
  #creations-img-2 {
    background-size: 130%; }
  .two-col {
    padding: 80px 5% 200px 5%; }
  #rintin-text {
    height: 1023px; }
  #rintin-img-2 {
    background-size: 150%;
    height: 1023px; }
  #pfn-img {
    height: 650px; }
  #pfn-text {
    height: 650px; }
  #creations-img {
    background-size: 135%;
    height: 923px; }
  #creations-text {
    height: 923px; }
  .dark-circle, .pink-circle {
    margin: 12% auto 0 auto; }
  .dark-circle p, .pink-circle p {
    font-size: .8em; }
  section {
    width: 50%;
    margin: 100px 0 80px;
    padding: 0 25%; }
    section video {
      max-width: 767px;
      margin: 0 auto;
      display: block; } }

@media only screen and (min-width: 1380px) {
  p {
    font-size: 1em; }
  .circle p {
    font-size: .9em; }
  /*----------------------------ABOUT------------------------------*/
  .timeline-graphic-left {
    padding-bottom: 60px; }
  .timeline-col-right {
    margin-top: 70px; }
  .timeline-graphic-right {
    padding-bottom: 60px; }
  #four {
    margin-top: 15%; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #rintin-img, #creations-img-2 {
    background-size: 125%; }
  #pfn-text {
    height: 650px; }
  /*-----------------------------------CASE STUDY-------------------------------------------*/
  section .color-one-col {
    width: 625px;
    margin: 0 auto; } }

@media only screen and (min-width: 1500px) {
  h1 {
    font-size: 5em; }
  h2 {
    font-size: 2.2em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1.4em; }
  #timeline-section, #triple-threat-section {
    padding-top: 100px; }
  #one, #two, #three {
    margin-bottom: 40px; }
  #four {
    margin-top: 25%; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #work-title-section {
    padding-top: 7.5%;
    padding-bottom: 5%; }
    #work-title-section h1 {
      font-size: 5em; }
  #pp-img {
    background-size: 110%;
    height: 710px; }
  #terp-ios-img-2 {
    background-size: 135%; }
  #terp-img {
    background-size: 100%; }
  #rintin-img-2 {
    background-size: 125%; }
  #pfn-img {
    height: 700px; }
  #pfn-text {
    height: 700px; }
  #creations-img-2 {
    background-size: 110%;
    height: 923px; }
  #creations-text {
    height: 923px; }
  .dark-circle, .pink-circle {
    margin: 8% auto 0 auto; } }

@media only screen and (min-width: 1900px) {
  h1 {
    font-size: 7em; }
  h6 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 2em; }
  #one, #two, #three {
    width: 670px;
    margin: 0 auto 80px auto; }
  #one {
    margin-top: 40px; }
  /*-----------------------------------MY WORK--------------------------------------------*/
  #work-title-section {
    padding-top: 10%;
    padding-bottom: 7.5%; }
    #work-title-section h1 {
      font-size: 7em; }
  .two-col {
    padding: 100px 5% 200px 5%; }
  #pp-img {
    background-size: 105%; }
  #terp-ios-img-2 {
    background-size: 110%; }
  #rintin-img {
    height: 983px; }
  #rintin-text {
    height: 983px; }
  #rintin-img-2 {
    background-size: 110%;
    height: 983px; }
  #pfn-img {
    height: 650px; }
  #pfn-text {
    height: 650px; }
  #creations-img-2 {
    background-size: 100%;
    height: 923px; }
  #creations-text {
    height: 923px; }
  /*-----------------------------------CONTACT--------------------------------------------*/
  #contact-section {
    padding-top: 180px;
    padding-bottom: 180px; }
    #contact-section h1 {
      margin-bottom: 80px; } }

a {
  cursor: pointer; }

.clear {
  clear: both; }

.no-bottom-margin {
  margin-bottom: 0; }