* {
  box-sizing: border-box;
}
body {
  background-color: #ffffff;
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  color: #303030;
}
h1 {
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.2;
}
h2 {
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.1;
}
h3 {
  font-size: 1.75em;
  font-weight: 600;
  line-height: 1.1;
}
h4 {
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.2;
}
.alan {
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1.1;
}
.italic {
  font-style: italic;
}
.regular {
  font-weight: 400;
}
.bold {
  font-weight: 600;
}
.rust {
  color: #C433B5;
}
.text-shadow {
  text-shadow: 0 0 27px rgba(3, 3, 3, 1) ; 
  -webkit-text-shadow: 0 0 27px rgba(3, 3, 3, 1) ; 
  -moz-text-shadow: 0 0 27px rgba(3, 3, 3, 1) ; 
}
.semibold {
  font-weight: 400;
  display: block;
}
img {
  /* IMAGES */
  width: 100%;
}

/* ===========================
     LINKS - BUTTONS 
=============================*/
a {
  /* LINKS */
  color: #CA47BD;
  text-decoration: none;
}
a:visited {
  color: #CA47BD;
}
a:hover {
  color: #CA47BD;
  text-decoration: none;
  opacity: 0.8;
}
a:active {
  opacity: 0.8;
  /* color: #5D91CE; */
}
a:focus {
  color: #CA47BD;
  text-decoration: underline;
}
.current {
  background-color: #F3D6F0;
  padding: 7px 15px;
}
.text-link {
  font-weight: 500;
  font-size: 1.03em;
}

.discreet-link {
  /* for hidden convenience links like a headline */
  color: #303030;
}
.discreet-link:visited {
  color: #303030;
}
.discreet-link:hover {
  color: #303030;
}
.discreet-link:active {
  color: #303030;
}
.discreet-link:focus {
  color: #303030;
}
.button {
  /* BUTTONS */
  display: inline-block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 23px;
  text-transform: lowercase;
  background-color: #ffffff;
  color: #CA47BD;
  font-weight: 500;
  padding: 4px 15px 5px 15px;
  margin: 15px 0;
  border-radius: 15px 3px;
  border: 3px solid #CA47BD;
  transition-duration: 0.2s;
  transition-property: opacity;
}
.button:visited {
  background-color: #ffffff;
  color: #CA47BD;
  text-decoration: none;
}
.button:hover {
  background-color: #CA47BD;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.8;
}
.button:active {
  background-color: #CA47BD;
  color: #ffffff;
  text-decoration: none;
}
.button:focus {
  background-color: #ffffff;
  border: 3px solid #CA47BD;
  color: #CA47BD;
  text-decoration: none;
}
/* class = disabled fades button */

/* buttons in CONNECT footer */
.button.contact {
  background-color: #CA47BD;
  color: #ffffff;
}
.button.contact:hover {
  opacity: 0.8;
}
.button.contact:active {
  opacity: 0.8;
}

.butt-shadow {
  width: [object Object]px;
  height: [object Object]px;
  background: #f8f8f8;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.butt-pad {
padding-right: 10px;
display: inline-block;
}


/* ===========================
     LAYOUT STYLING 
=============================*/

.container {
  padding: 0 15px;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
.row {
  margin: 25px 0;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
.centered {
  text-align: center;
}

/*HEADER NAV*/
header {
  background-color: #ffffff;
  padding: 20px 0 20px 0px;
  margin: 0px auto;
  position: fixed;
  width: 100%;
  z-index: 999;
}
.shadow {
  width: [object Object]px;
  height: [object Object]px;
  /* border: solid #e3e3e3 1px; */
  box-shadow: 9px 9px 15px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 9px 9px 15px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 9px 9px 15px rgba(0, 0, 0, 0.05);
}

.logo {
  max-width: 150px;
}
nav {
  /* NAVIGATION */
  font-weight: 500;
}
nav > ul {
  list-style-type: none;
  padding: 0px;
  margin: 0;
}
.navtoggle li .icon {
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 20px;
  padding-right: 0;
}
.navtoggle li:not(:last-child) {
  display: none;
}
.navtoggle,
.navtoggle.responsive {
  position: relative;
}
.navtoggle.responsive li {
  display: block;
}
.navtoggle.responsive nav {
  padding: 24px 0 0;
}
.navtoggle.responsive li {
  display: block;
  padding: 10px 0;
  border-top: 1px solid #F3D6F0;
}
.navtoggle.responsive li:last-child {
  padding: 0 0 10px;
}
nav > ul > li > a {
  padding: 0px 20px;
  /*text-transform: uppercase;
    font-weight: 700;
    color: #4a4a4a;*/
}

/*nav > ul > li > a:visited*/

main {
  padding-top: 66px;
  width: 100%;
}

/* ===========================
     WORK / HOME 
=============================*/
/*HERO*/
#hero {
  padding: 70px 0;
  display: inline-block;
  width: 100%;
  /* background-color: #dbbab2; */
}
.big-img {
  background-image: url(../img/main/img-hero-2.png);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#hero h1 {
  padding-top: 160px;
  margin-bottom: 18px;
  text-align: left;
  /* max-width: 290px; */
  color: #ffffff;
  font-size: 3em;
}
#hero h4 {
  text-align: left;
  /* padding: 0px 0; */
  margin: 0px 0;
  color: #ffffff;
  font-size: 1.5em;
}
.arrow {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
}
.down-arrow {
  max-width: 20px;
  margin: 50px auto;
  display: block;
  position: absolute;
  animation: jumpInfinite 2s infinite;
}
.down-arrow:after {
  content: " ";
  position: absolute;
  transform: rotateZ(45deg);
}
@keyframes jumpInfinite {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 20px;
  }
  100% {
    margin-top: 0;
  }
}
#scratch {
  text-align: center;
  padding-top: 20px;
}
#scratch p {
  display: inline-block;
  font-size: 15px;
  /* margin: 0 10px; */
  position: relative;
  bottom: 10px;
}
.ic-scratch {
  max-width: 40px;
  margin: 0 5px 0 0;
  display: inline-block;
}
/*MY WORK*/
.img-rad {
  border-radius: 6px;
}
#mywork h4 {
  margin: 20px 0px;
}
#mywork h3 {
  margin: 19px 0px;
}
#mywork h2 {
  padding: 25px 0 0 0;
  margin-bottom: 0px;
  font-weight: 900;
}
.work-p {
  font-size: 16px;
}
.work-intro {
  /* border-top: 1px solid #4a4a4a; */
  border-bottom: 1px solid #d4d4d4;
  margin: 0 0 50px 0;
  padding: 10px 0 45px 0;
}
.tag-line {
  font-weight: 400;
  font-size: 28px;
}
#mywork .row {
  padding-bottom: 40px;
  padding-top: 10px;
  /* border-bottom: 1px solid #d4d4d4; */
  margin-bottom: 50px;
}
.testimg {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.fade-in-image {
  animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@keyframes screen-move {
  from {
    transform: translate(0px, -70px);
  }
  to {
    transform: translate(0px, 0px);
  }
}
@keyframes screen-move2 {
  from {
    transform: translate(0px, -20px);
  }
  to {
    transform: translate(0px, 0px);
  }
}
.move-in {
  animation-duration: 1s;
  animation-name: screen-move;
  animation-iteration-count: 1;
  animation-direction: end;
  animation-timing-function: linear;
}
.move-in2 {
  animation-duration: 1.3s;
  animation-name: screen-move2;
  animation-iteration-count: 1;
  animation-direction: end;
  animation-timing-function: linear;
}
@keyframes color-change {
  0% {
    fill: #edc655;
  }
  50% {
    fill: #fcffad;
  }
  100% {
    fill: #f76414;
  }
}

/*ANIMATION EXAMPLE*/
.sun {
  animation-duration: 4s;
  animation-name: color-change;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
@keyframes cloud-move {
  from {
    transform: translate(0, 50px);
  }
  to {
    transform: translate(200px, 50px);
  }
}
.cloud-front {
  animation-duration: 30s;
  animation-name: cloud-move;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
@keyframes cloud-move-reverse {
  from {
    transform: translate(446px, 48px);
  }
  to {
    transform: translate(100px, 48px);
  }
}
.cloud-back {
  animation: 34s cloud-move-reverse infinite alternate linear;
}

/*REFERENCES*/
#references {
  background-color: #636B9B;
  text-align: center;
  padding: 65px 0 62px 0;
  width: 100%;
}

#references span {
  display: block;
}
#references h4 {
  margin: 15px 0;
}
#references p {
  font-size: 16px;
}
.quote {
  background-color: #ffffff;
  margin: 20px auto;
  padding: 30px 25px;
  max-width: 280px;
  height: 420px;
  border-radius: 30px 5px;
  display: inline-block;
}
.profile {
  max-width: 90px;
  display: inline-block;
}

/* ===========================
     ABOUT 
=============================*/
#about {
  display: inline-block;
  /* padding-bottom: 55px; */
  margin: 0px auto;
  width: 100%;
}
#about main {
  padding-top: 40px;
}
.about-hero {
  margin-bottom: 60px;
}
.about-hero-img {
  max-width: 575px;
}
#about h2 {
  margin: 45px 0 20px 0;
  font-weight: 900;
}
#about h4 {
  margin: 30px 0 20px 0;
}
/*SKILLS*/

.cons-img {
  background-image: url(../img/main/img-cons-lg.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#bottom-img {
  background-color: #f0bea9;
  display: inline-block;
  text-align: center;
  height: 440px;
  margin: 0px auto;
  width: 100%;
}
#skills {
  background-color: #A1AAB5;
  display: inline-block;
  text-align: center;
  padding: 50px 0px;
  margin: 0px auto;
  width: 100%;
}
#skills h4 {
  margin: 10px 0px 0px 0px;
}
.bullets {
  font-size: 16px;
}
.skill-box {
  background-color: #ffffff;
  border-radius: 30px 5px;
  border: 3px solid #ffffff;
  text-align: left;
  padding: 20px;
  margin: 20px auto;
  width: 260px;
  height: 280px;
  display: inline-block;
}
/*TOOLS*/
.tool > ul {
  width: auto;
  list-style-type: none;
  padding-left: 0px;
}
.tool > ul > li {
  width: 65px;
  margin: 10px 15px;
  display: inline-block;
}
/*SPARE TIME*/
#spare-time {
  padding: 10px 0px 70px 0px;
}

/* ===========================
     ALLWELL LAYOUT 
=============================*/
#allwell h4 {
  margin: 15px 0 0 0;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #004a78;
}
#allwell #intro h3 {
  color: #303030;
  max-width: 350px;
  font-size: 1.6em;
}
#allwell h3 {
  margin: 10px 0px 15px 0px;
  color: #004a78;
}
.top-line {
  border-top: 1px solid #4a4a4a;
}
.title {
  max-height: 40px;
  width: auto;
  margin: 20px 0px 60px 0px;
  display: inline-block;
}
.discover {
  margin-top: 60px;
}
.define {
  margin-top: 60px;
}
.develop {
  margin-top: 20px;
}
.deliver {
  margin-top: 60px;
}
.header-icon {
  max-width: 55px;
}
.up-icon {
  max-width: 60px;
}
.mustache {
  max-width: 48px;
}
.caution {
  position: relative;
  right: 7px;
}
.magnify {
  position: relative;
  right: 7px;
}
#problem {
  margin: 60px 0px;
}
.section {
  margin: 0px 0px 100px 0px;
}
.section-2 {
  margin: 0px 0px 50px 0px;
}
.sub-section {
  margin: 20px 0px;
}
.stats {
  margin: 35px auto 0px auto;
}
.competitor {
  max-width: 260px;
  margin: 0;
}
.finding > ul {
  max-width: 260px;
  list-style-type: none;
  padding: 0;
  margin: 0px auto;
}
.monkey {
  max-width: 140px;
  margin: 80px auto 10px auto;
}
.filter {
  /* max-width: 650px; */
  margin: 60px auto 10px auto;
}
.wireframe {
  margin: 60px 0 0px 0;
}
.map-results {
  max-width: 260px;
  margin: 0 auto;
}
.site {
  display: inline-block;
  margin: 20px 20px 0 0;
  position: relative;
  top: 6px;
}
.sitemap {
  display: inline-block;
  margin: 0px 20px 10 0;
}
.interview {
  /* max-width: 410px; */
  border: 0.5px solid #c9c8c8;
  position: relative;
  top: 15px;
}
.persona {
  margin: 30px 0px;
}
.journey {
  max-width: 320px;
  margin: 20px 0px;
  display: inline-block;
}
.flow {
  max-width: 350px;
  margin: 20px 0px;
  display: inline-block;
}
.new-box {
  height: 500px;
  width: 290px;
  margin: 0px auto;
  display: inline-block;
}
.improve {
  max-width: 550px;
  margin: 70px auto 30px auto;
  display: inline-block;
}
.driver {
  max-width: 260px;
  margin: 0px 0px 40px 40px;
  display: inline-block;
}
.box {
  background-color: #ffffff;
  border-radius: 30px 5px;
  border: 3px solid #ffffff;
  padding: 15px;
  width: 100%;
  margin: 20px auto;
  display: inline-block;
}
.box h3 {
  font-size: 1.2em;
}
.box p {
  font-size: 16px;
}
.refine-ic {
  width: 160px;
  position: relative;
  right: 30px;
  margin: 0px 0px;
}
.sample {
  display: inline-block;
  max-width: 240px;
  margin: 20px;
}
.type {
  display: inline-block;
  max-width: 185px;
  margin: 20px;
}
.move-up {
  position: relative;
  bottom: 25px;
}
#develop ol {
  font-size: 16px;
}
.final {
  margin: 50px 0;
}
.interact {
  /* width: 100%; */
  text-align: center;
  display: inline-block;
}

/*BOTTOM NAV*/
#bottom-nav {
  background-color: #CA47BD;
  font-size: 1em;
  font-weight: 500;
  height: 55px;
  width: 100%;
  text-align: center;
  display: inline-block;
}
.prev {
  float: left;
  padding-left: 15px;
}
.disabled {
  opacity: 0.6;
}
.next {
  float: right;
  padding-right: 15px;
}
#bottom-nav > div > div > a {
  color: #ffffff;
  /* margin: 0px auto; */
}
.bottom {
  padding: 14px 0px 10px 0;
}

/* ===========================
     FOOTER 
=============================*/
footer {
  background-color: #ffffff;
  padding: 55px 0px 10px 0px;
  width: 100%;
  display: inline-block;
}
.button.contact.resume {
  margin: 10px 15px;
}
.button.resume {
  margin: 10px 15px;
}
#connect h2 {
  font-weight: 900;
}
/*Icon Links*/
.socials {
  display: inline-block;
  /* position: relative;
  right: 40px; */
}
.icon-link {
  width: 50px;
  margin: 5px 10px 16px 0px;
  position: relative;
  right: 40px;
}
.icon-link2 {
  width: 50px;
  position: relative;
  right: 40px;
  margin: 8px 10px 13px 10px;
}
.ic-link:hover {
  opacity: 0.7;
}
.ic-link:active {
  opacity: 0.7;
}
#footer > ul {
  list-style-type: none;
  padding-left: 0px;
  /* display: inline-block; */
}
.socials > ul > li {
  display: inline-block;
  
}
.copyright {
  font-size: 13px;
}
.cright {
  padding: 0px 20px;
  display: block;
}

/* ==============================
Medium devices (640px and larger)
================================= */
@media only screen and (min-width: 640px) {
  header {
    text-align: unset;
    padding: 20px 0 13px;
  }
  .logo {
    max-width: 200px;
  }
  nav {
    width: auto;
    float: right;
    margin-top: 4px;
  }
  nav > ul {
    margin: 1em 0;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25px;
  }
  nav > ul > li {
    display: inline-block;
  }
  .navtoggle li:not(:last-child) {
    display: inline-block;
  }
  .navtoggle li:last-child {
    display: none;
  }
  .current {
    border-bottom: 2px solid #E199DA;
    background-color: #ffffff;
    border-top: 2px solid #E199DA;
    padding: 4px 20px;
  }
  main {
    padding-top: 99px;
  }
  .container {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-lg-4 {
    width: 33%;
  }
  .col-md-4 {
    width: 33%;
  }
  .col-md-5 {
    width: 42%;
  }
  .col-md-7 {
    width: 58%;
  }
  .col-md-8 {
    width: 67%;
  }
  [class*="col-"] {
    float: left;
    padding: 10px;
  }

  #allwell-top .col-md-6 p {
    padding: 0px 30px 0px 0px;
  }
  #define .col-md-6 h3 {
    padding: 0px 28px 0px 0px;
  }
  #hero {
    padding: 40px 30px;
    height: 600px;
  }
  .big-img {
    background-image: url(../img/main/img-hero-1000-2.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #hero h1 {
    text-align: center;
    padding-top: 300px;
    max-width: 600px;
    font-size: 3.5em;
  }
  #hero h4 {
    text-align: center;
    font-size: 1.8em;
  }
  #mywork h2 {
    text-align: center;
  }
  .work-copy {
    position: relative;
    bottom: 20px;
  }
 .work-p {
    max-width: 240px;
  }
  .work-intro h4 {
    text-align: center;
  }
  .work-intro p {
    /* max-width: 570px; */
    text-align: center;
  }
  .quote {
    padding: 30px 25px;
    margin: 20px 10px;
  }
  #about main {
    padding-top: 0px;
  }
  .about-hero .row {
    margin-top: 0;
  }
  #about h2 {
    margin: 35px 0 20px 0;
  }
  #about p {
    max-width: 550px;
  }
  .cons-img {
    background-image: url(../img/main/img-cons-lg.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #spare-time p {
    max-width: 500px;
  }
  .skill-box {
    padding: 20px;
    width: 285px;
    height: 300px;
    margin: 10px;
    display: inline-block;
  }
  .no-marg {
    margin: 0;
  }
  #allwell h1 {
    margin: 15px 0;
  }
  .all-sub {
    padding: 0;
    /* position:relative;
    right: 12px; */
  }
  #allwell p {
    max-width: 580px;
  }
  #deliver p {
    max-width: 420px;
    text-align: left;
  }
  .title {
    max-height: 50px;
  }
  .finding > ul {
    max-width: none;
  }
  .monkey {
    max-width: 180px;
    margin: 10px 0px 10px auto;
  }
  .map-results {
    max-width: 800px;
    margin: 0 auto;
  }
  .journey {
    max-width: 300px;
    margin: 20px 0px;
  }
  .flow {
    max-width: 325px;
    margin: 20px 0px;
  }
  .improve {
    max-width: 550px;
    margin: 15px auto 30px auto;
    display: inline-block;
  }
  .box {
    padding: 15px;
    max-width: 285px;
    height: 340px;
    margin: 10px;
    display: inline-block;
  }
  .driver {
    max-width: 290px;
    margin-left: 0;
  }
  .develop {
    margin-bottom: 110px;
  }
  .sample {
    max-width: 240px;
    margin: 20px;
  }
  .type {
    max-width: 185px;
    margin: 20px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .intro-scr {
    max-width: 700px;
  }
  #connect h2 {
    padding-left: 10px;
    margin: 20px 0 0 0;
  }
  #connect p {
    max-width: 380px;
  }
}
/* ==============================
Large devices (1000px or larger)
================================= */
@media only screen and (min-width: 1000px) {
  .col-icon {
    width: 10%;
    display: inline-block;
  }
  .col-icon-copy {
    width: 90%;
    display: inline-block;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33%;
  }
  .col-lg-5 {
    width: 42%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58%;
  }
  .col-lg-8 {
    width: 67%;
  }
  .col-lg-9 {
    width: 75%;
  }
  [class*="col-"] {
    float: left;
    padding: 10px;
  }
  .big-img {
    background-image: url(../img/main/img-hero-1400-2.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #spare-time {
    padding: 110px 0px 120px 0px;
  }
  .cons-img {
    background-image: url(../img/main/img-cons-wide.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #bottom-img {
    height: 425px;
  }
  #hero h1 {
    text-align: center;
    padding-top: 300px;
    margin: 0 auto 15px auto;
    max-width: 900px;
    font-size: 4em;
  }
  #hero h4 {
    text-align: center;
    font-size: 2em;
  }
  .work-intro p {
    max-width: 570px;
margin: 18px auto;
  }
  .work-p {
    max-width: 340px;
  }
  #mywork h3 {
    font-size: 2em;
  }
  .img-rad {
    border-radius: 10px;
  }
  #intro .col-md-6 {
    width: 100%;
    padding: 0;
  }
  #intro h3 {
    padding-right: 0;
  }
  #about main {
    padding-top: 90px;
  }
  .about-hero {
    margin-bottom: 0px;
  }
  #about p {
    max-width: 390px;
  }
  #about h4 {
    max-width: 350px;
  }
  #spare-time p {
    max-width: 290px;
  }
  #spare-time .col-lg-7 {
    float: right;
  }
  #allwell p {
    max-width: 670px;
  }

  .co-icon {
    width: 7%;
    float: left;
  }
  .co-icon-copy {
    width: 93%;
    float: left;
  }
  .section {
    margin: 0px 0px 150px 0px;
  }
  .section-2 {
    margin: 0px 0px 70px 0px;
  }
  .finding > ul {
    max-width: 870px;
  }
  .finding > ul > li > img {
    max-width: 280px;
  }
  .header-icon {
    max-width: 70px;
  }
  .up-icon {
    max-width: 80px;
  }
  .mustache {
    max-width: 55px;
  }
  h2 {
    font-size: 2.5em;
  }
  .move-down {
    position: relative;
    top: 15px;
  }
  .move-in {
    position: relative;
    top: 35px;
  }
  #skills h3 {
    font-size: 2em;
  }
  .container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  .quote {
    padding: 30px 25px;
    margin: 20px;
  }
  .skill-box {
    padding: 20px;
    width: 280px;
    height: 300px;
    margin: 40px 20px 40px 20px;
    display: inline-block;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .competitor {
    margin: 20px 0px 0px 64px;
  }
  .monkey {
    margin: 10px 30px 10px auto;
    max-width: 200px;
  }
  .interview {
    max-width: 420px;
  }
  .develop {
    margin-bottom: 140px;
  }
  .title {
    max-height: 60px;
  }
  .improve {
    max-width: 550px;
    margin: 15px auto 30px auto;
    display: inline-block;
  }
  .driver {
    max-width: 320px;
    margin-left: 0;
  }
  .sample {
    max-width: 210px;
    margin: 20px;
  }
  .type {
    max-width: 155px;
    margin: 20px;
  }
  #connect p {
    max-width: 420px;
  }
}

/* ==============================
X-large devices (1440px or larger)
================================= */
@media only screen and (min-width: 1440px) {
}