page-style.css

.contact-info {
  text-align: left;
  padding: 0 10px 0 10px;
  margin: 0 auto;
  max-width: 1000px;
  margin-top: 8vh;
}

.contact-info h2 {
  font-size: 2.1em;
}

@media all and (max-width: 640px) {
  .contact-info h2 {
    font-size: 1.5em;
  }
}

@media all and (max-width: 1200px) {
  .contact-info h2 {
    font-size: 2.1em;
  }
}

@media all and (max-width: 914px) {
  .contact-info h2 {
    font-size: 1.87666em;
  }
}

@media all and (max-width: 670px) {
  .contact-info h2 {
    font-size: 1.549em;
  }
}

.contact-info p {
  color: #95989A;
  font-size: 1.5em;
  margin-bottom: 5vh;
}

@media all and (max-width: 640px) {
  .contact-info p {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .contact-info p {
    font-size: 1.5em;
  }
}

@media all and (max-width: 800px) {
  .contact-info p {
    font-size: 1.17857em;
  }
}

.contact-info i, .contact-info a {
  color: #95989A;
}

.about {
  margin: 0 auto;
  margin-top: 4vh;
  margin-bottom: 10vh;
  max-width: 1000px;
}

.about a {
  color: #1845AD;
  font-weight: 700;
}

.about h2 {
  margin-top: 35px;
  font-size: 2.5em;
}

@media all and (max-width: 640px) {
  .about h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 1200px) {
  .about h2 {
    font-size: 2.5em;
  }
}

@media all and (max-width: 960px) {
  .about h2 {
    font-size: 2.3em;
  }
}

@media all and (max-width: 751px) {
  .about h2 {
    font-size: 2.00364em;
  }
}

.about p {
  font-size: 1.2em;
}

@media all and (max-width: 640px) {
  .about p {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .about p {
    font-size: 1.2em;
  }
}

@media all and (max-width: 700px) {
  .about p {
    font-size: 1.05156em;
  }
}

.about img {
  max-width: 55%;
  margin-bottom: 5vh;
}

.about .credit {
  margin-top: 8vh;
  font-size: 1.2em;
}

@media all and (max-width: 640px) {
  .about .credit {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .about .credit {
    font-size: 1.2em;
  }
}

@media all and (max-width: 700px) {
  .about .credit {
    font-size: 1.05156em;
  }
}

@media screen and (min-width: 0px) and (max-width: 765px) {
  img {
    margin-top: 3vh;
  }
}

.resume {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 10vh;
}

.resume img {
  width: 100%;
}

.resume a {
  display: block;
  margin-top: 3vh;
  text-align: center;
  color: #1845AD;
  font-size: 1.85em;
}

@media all and (max-width: 640px) {
  .resume a {
    font-size: 0.7em;
  }
}

@media all and (max-width: 1200px) {
  .resume a {
    font-size: 1.85em;
  }
}

@media all and (max-width: 876px) {
  .resume a {
    font-size: 1.12348em;
  }
}

@media screen and (min-width: 0px) and (max-width: 765px) {
  .skills img {
    max-width: 50px;
    height: auto;
  }
  .skills .redis, .skills .sass, .skills .node, .skills .react, .skills .vue, .skills .python, .skills .ruby, .skills .java, .skills .aws, .skills .heroku, .skills .illustrator, .skills .photoshop, .skills .ionic, .skills .lightroom, .skills .indesign, .skills .xd, .skills .webpack, .skills .d3, .skills .figma, .skills .net, .skills .portuguese, .skills .swift {
    width: 10rem;
  }
  .skills .express {
    width: 4.5rem;
  }
  .skills .redux, .skills .csharp, .skills .backbone, .skills .graphQL {
    width: 9.5rem;
  }
  .skills .go, .skills .django {
    width: 4rem;
  }
  .skills .spanish {
    width: 8.2rem;
  }
  .skills .italian {
    width: 3.5rem;
  }
  .skills .php, .skills .polymer, .skills .ember {
    width: 10rem;
    padding-bottom: 10px;
  }
  .skills .firebase {
    width: 4rem;
  }
  .skills .azure {
    width: 10rem;
  }
}

@media screen and (min-width: 766px) and (max-width: 25000px) {
  .skills img {
    max-width: 100px;
    height: auto;
  }
  .skills .sass, .skills .node, .skills .react, .skills .vue, .skills .python, .skills .ruby, .skills .aws, .skills .heroku, .skills .illustrator, .skills .photoshop, .skills .ionic, .skills .lightroom, .skills .indesign, .skills .xd, .skills .webpack, .skills .figma, .skills .net, .skills .portuguese {
    width: 10rem;
  }
  .skills .express {
    width: 8.5rem;
  }
  .skills .polymer {
    width: 10rem;
    margin-bottom: 30px;
  }
  .skills .redux, .skills .csharp, .skills .backbone, .skills .graphQL, .skills .d3, .skills .electron {
    width: 9.5rem;
  }
  .skills .go {
    width: 7rem;
  }
  .skills .spanish, .skills .django {
    width: 8.2rem;
  }
  .skills .italian {
    width: 6rem;
  }
  .skills .firebase {
    width: 7.5rem;
  }
  .skills .php {
    width: 10rem;
    padding-bottom: 15px;
  }
  .skills .ember {
    width: 10rem;
    margin-bottom: 40px;
  }
  .skills .azure, .skills .java {
    width: 10rem;
    margin-bottom: 10px;
  }
  .skills .redis {
    width: 10rem;
    margin-bottom: 20px;
  }
  .skills .svelte {
    width: 10rem;
  }
  .skills .postgres {
    width: 9.5rem;
  }
  .skills .flask {
    width: 11rem;
  }
  .skills .vite {
    width: 9rem;
  }
  .skills .styled {
    width: 12rem;
  }
  .skills .swift {
    width: 11rem;
    margin-bottom: 20px;
  }
}

.skills {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 10vh;
}

.skills h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3vh;
  font-size: 2.2em;
}

@media all and (max-width: 640px) {
  .skills h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 1200px) {
  .skills h2 {
    font-size: 2.2em;
  }
}

@media all and (max-width: 927px) {
  .skills h2 {
    font-size: 2.142em;
  }
}

@media all and (max-width: 711px) {
  .skills h2 {
    font-size: 1.91142em;
  }
}

.skills p {
  margin-top: 13px;
  font-size: 1.2em;
}

@media all and (max-width: 640px) {
  .skills p {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .skills p {
    font-size: 1.2em;
  }
}

@media all and (max-width: 700px) {
  .skills p {
    font-size: 0.95391em;
  }
}

.skills ul {
  list-style-type: none;
  margin: 0 auto;
  text-align: center;
  padding: 0;
  margin-bottom: 5vh;
}

.skills li {
  display: inline-block;
  text-align: center;
  padding-left: 0;
  margin: 15px 25px;
}

.skills img {
  margin-bottom: 1vh;
  font-size: 16px;
}

#mapdiv {
  margin-top: 5vh;
}

.country-list {
  margin-top: 4vh;
}

.country-number {
  margin-top: 5vh;
}

.country-number h2 {
  text-align: center;
  font-size: 2.2em;
}

@media all and (max-width: 640px) {
  .country-number h2 {
    font-size: 1.4em;
  }
}

@media all and (max-width: 1200px) {
  .country-number h2 {
    font-size: 2.2em;
  }
}

@media all and (max-width: 927px) {
  .country-number h2 {
    font-size: 1.85955em;
  }
}

@media all and (max-width: 678px) {
  .country-number h2 {
    font-size: 1.46683em;
  }
}

.country-number span {
  color: #1845AD;
  font-weight: 700;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.panel-heading {
  border-bottom: 0.5px solid #95989A !important;
  border-radius: 0 !important;
  cursor: pointer;
  h4 {
      font-weight: 600 !important;
  }
}

.panel {
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: none !important;
}

.gap {
  margin-bottom: 8vh;
}

@media screen and (min-width: 0px) and (max-width: 765px) {
  .photography img {
    margin-top: -3vh;
    max-width: 150px;
  }
}

@media screen and (min-width: 766px) and (max-width: 4000px) {
  .photography a img {
    margin-top: 2vh;
    max-width: 250px;
  }
}

@media screen and (max-width: 768px) {
  .flex .portfolio-item {
      width: 100%;
  }
}

.photography {
  max-width: 1000px;
  margin: 0 auto;
}


.photography .insta p {
  text-align: center;
  font-size: 1.5em;
  margin: 3vh 0 5vh 0;
}

@media all and (max-width: 640px) {
  .photography .insta p {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .photography .insta p {
    font-size: 1.5em;
  }
}

@media all and (max-width: 800px) {
  .photography .insta p {
    font-size: 1.17857em;
  }
}

.photography .insta a {
  text-align: center;
  margin: 0 auto;
  color: #1845AD;
  font-weight: bold;
}

.blog {
  margin-bottom: 10vh;
}

.blog .blog-list {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 8vh;
  text-align: center;
}

.blog .blog-list .blog-name h2 {
  font-weight: 600;
  font-size: 2em;
}

@media all and (max-width: 350px) {
  .blog .blog-list .blog-name h2 {
    font-size: 1.6em;
  }
}

@media all and (max-width: 1200px) {
  .blog .blog-list .blog-name h2 {
    font-size: 2em;
  }
}

@media all and (max-width: 900px) {
  .blog .blog-list .blog-name h2 {
    font-size: 2.42269em;
  }
}

@media all and (max-width: 714px) {
  .blog .blog-list .blog-name h2 {
    font-size: 2.37584em;
  }
}

@media all and (max-width: 564px) {
  .blog .blog-list .blog-name h2 {
    font-size: 2.16582em;
  }
}

@media all and (max-width: 434px) {
  .blog .blog-list .blog-name h2 {
    font-size: 1.85942em;
  }
}

.blog .blog-list .blog-name a {
  color: #1845AD;
}

.blog .blog-list .blog-name a:hover {
  text-decoration: none;
  font-weight: 700;
}

.blog .blog-list .blog-name p {
  margin-bottom: 8vh;
  color: #95989A;
  font-weight: 600;
  font-size: 1.5em;
}

@media all and (max-width: 350px) {
  .blog .blog-list .blog-name p {
    font-size: 1.1em;
  }
}

@media all and (max-width: 1200px) {
  .blog .blog-list .blog-name p {
    font-size: 1.5em;
  }
}

@media all and (max-width: 800px) {
  .blog .blog-list .blog-name p {
    font-size: 1.71261em;
  }
}

@media all and (max-width: 566px) {
  .blog .blog-list .blog-name p {
    font-size: 1.50661em;
  }
}

@media all and (max-width: 378px) {
  .blog .blog-list .blog-name p {
    font-size: 1.16443em;
  }
}

.blog .blog-list .blog-name img {
  max-width: 200px;
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 3vh;
}

.blog .heading {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 7vh;
  background-color: #1845AD;
  color: white;
  padding: 15px;
}

.blog .heading h2 {
  font-weight: 700;
  margin-bottom: 2vh;
  margin-top: 4vh;
  font-size: 3.2em;
  text-transform: uppercase;
}

@media all and (max-width: 350px) {
  .blog .heading h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 1200px) {
  .blog .heading h2 {
    font-size: 3.2em;
  }
}

@media all and (max-width: 1013px) {
  .blog .heading h2 {
    font-size: 3.25318em;
  }
}

@media all and (max-width: 857px) {
  .blog .heading h2 {
    font-size: 3.14166em;
  }
}

@media all and (max-width: 721px) {
  .blog .heading h2 {
    font-size: 2.92875em;
  }
}

@media all and (max-width: 598px) {
  .blog .heading h2 {
    font-size: 2.64339em;
  }
}

@media all and (max-width: 485px) {
  .blog .heading h2 {
    font-size: 2.30355em;
  }
}

@media all and (max-width: 380px) {
  .blog .heading h2 {
    font-size: 1.92108em;
  }
}

.blog .heading p {
  font-size: 1.3em;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 35px;
}

@media all and (max-width: 350px) {
  .blog .heading p {
    font-size: 0.85em;
  }
}

@media all and (max-width: 1200px) {
  .blog .heading p {
    font-size: 1.3em;
  }
}

@media all and (max-width: 738px) {
  .blog .heading p {
    font-size: 1.33911em;
  }
}

@media all and (max-width: 462px) {
  .blog .heading p {
    font-size: 1.04011em;
  }
}

.blog .posts {
  max-width: 800px;
  margin: 0 auto;
}

.blog .posts .post {
  margin-bottom: 8vh;
}

.blog .posts .post h3 {
  font-weight: 700;
  margin-bottom: 2vh;
  margin-top: 0;
  font-size: 2.3em;
}

@media all and (max-width: 640px) {
  .blog .posts .post h3 {
    font-size: 1.6em;
  }
}

@media all and (max-width: 1200px) {
  .blog .posts .post h3 {
    font-size: 2.3em;
  }
}

@media all and (max-width: 939px) {
  .blog .posts .post h3 {
    font-size: 2.05504em;
  }
}

@media all and (max-width: 711px) {
  .blog .posts .post h3 {
    font-size: 1.72492em;
  }
}

.blog .posts .post h3 span {
  font-weight: 800;
}

.blog .posts .post p {
  font-size: 1.3em;
  margin-bottom: 20px;
}

@media all and (max-width: 640px) {
  .blog .posts .post p {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .blog .posts .post p {
    font-size: 1.3em;
  }
}

@media all and (max-width: 738px) {
  .blog .posts .post p {
    font-size: 1.09124em;
  }
}

.blog .posts .post .date {
  margin-bottom: 5px;
  font-weight: 700;
  color: #95989A;
}

.blog .posts .post img {
  padding: 20px 50px 40px 50px;
  margin: 0 auto;
}

.blog .after-post h4 {
  font-weight: 700;
  margin-top: 25px;
  font-size: 1.6em;
}

@media all and (max-width: 640px) {
  .blog .after-post h4 {
    font-size: 1.2em;
  }
}

@media all and (max-width: 1200px) {
  .blog .after-post h4 {
    font-size: 1.6em;
  }
}

@media all and (max-width: 825px) {
  .blog .after-post h4 {
    font-size: 1.39925em;
  }
}

.blog .after-post li a {
  font-size: 1.2em;
  color: #1845AD;
}

@media all and (max-width: 640px) {
  .blog .after-post li a {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .blog .after-post li a {
    font-size: 1.2em;
  }
}

@media all and (max-width: 700px) {
  .blog .after-post li a {
    font-size: 1.05156em;
  }
}

.blog .after-post li a:hover {
  text-decoration: none;
  font-weight: 700;
}

.blog .after-post a {
  color: #1845AD;
}

.blog .after-post a:hover {
  text-decoration: none;
  font-weight: 700;
}

.blog .after-post .post-end {
  margin-top: 35px;
  font-style: italic;
}

#upBtn {
  display: none;
  width: 50px;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  background-color: #1845AD;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 100px;
}

#upBtn:hover {
  background-color: #1d53d0;
}

@media screen and (min-width: 0px) and (max-width: 765px) {
  .portfolio .category h2 {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 766px) and (max-width: 5000px) {
  .portfolio .category h2 {
    margin-bottom: 3vh;
  }
}

.portfolio {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  margin-top: -5vh;
  margin-bottom: 8vh;
}

.portfolio .category h2 {
  display: inline-block;
  font-size: 2.8em;
  text-indent: 12px;
  font-weight: 600;
  margin-bottom: 5vh;
}

@media all and (max-width: 640px) {
  .portfolio .category h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 1200px) {
  .portfolio .category h2 {
    font-size: 2.8em;
  }
}

@media all and (max-width: 986px) {
  .portfolio .category h2 {
    font-size: 2.48121em;
  }
}

@media all and (max-width: 787px) {
  .portfolio .category h2 {
    font-size: 2.11445em;
  }
}

.portfolio .category a {
  display: inline-block;
  margin-left: 10px;
  color: #95989A;
  font-weight: 600;
}

.portfolio .portfolio-item {
  margin-bottom: 5vh;
}

.portfolio .portfolio-item h4 {
  text-align: center;
}

.portfolio .portfolio-item h4 a {
  color: black;
  font-weight: 600;
  font-size: 1.2em;
}

.portfolio .portfolio-item h4 :hover {
  text-decoration: none;
  color: #95989A;
}

.portfolio .portfolio-item img {
  padding: 5px;
  margin-bottom: 20px;
}

.portfolio .portfolio-item .card-text {
  margin-top: 10px;
  text-align: center;
  font-size: 1.1em;
}

@media all and (max-width: 340px) {
  .portfolio .portfolio-item .card-text {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .portfolio .portfolio-item .card-text {
    font-size: 1.1em;
  }
}

@media all and (max-width: 655px) {
  .portfolio .portfolio-item .card-text {
    font-size: 1.31868em;
  }
}

@media all and (max-width: 407px) {
  .portfolio .portfolio-item .card-text {
    font-size: 1.02249em;
  }
}

.portfolio .portfolio-item .card-text a {
  color: #1845AD;
}

.portfolio .portfolio-item .card-text :hover {
  text-decoration: none;
  font-weight: 600;
}

.portfolio .portfolio-item .ironhack {
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 25px;
}

.portfolio .portfolio-item .myicon {
  max-width: 65%;
  padding: 0px 10px 20px 10px;
  margin: 0 auto;
}

.portfolio .portfolio-item .neat {
  max-width: 48%;
  margin: 0 auto;
  margin-top: -20px;
}

.pair-programming {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 5vh;
  margin-bottom: 10vh;
}

.pair-programming a {
  color: #1845AD;
}

.pair-programming a:hover {
  color: #1845AD;
  text-decoration: none;
  font-weight: 700;
}

.pair-programming h2 {
  font-weight: 700;
  margin-bottom: 5vh;
  font-size: 2.2em;
}

@media all and (max-width: 640px) {
  .pair-programming h2 {
    font-size: 1.6em;
  }
}

@media all and (max-width: 1200px) {
  .pair-programming h2 {
    font-size: 2.2em;
  }
}

@media all and (max-width: 927px) {
  .pair-programming h2 {
    font-size: 2.00077em;
  }
}

@media all and (max-width: 695px) {
  .pair-programming h2 {
    font-size: 1.69199em;
  }
}

.pair-programming h3 {
  font-weight: 600;
  font-size: 1.8em;
}

@media all and (max-width: 640px) {
  .pair-programming h3 {
    font-size: 1.4em;
  }
}

@media all and (max-width: 1200px) {
  .pair-programming h3 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 867px) {
  .pair-programming h3 {
    font-size: 1.65494em;
  }
}

.pair-programming ul {
  margin-bottom: 4vh;
}

.pair-programming ul li {
  font-size: 1.2em;
  margin-bottom: 10px;
}

@media all and (max-width: 640px) {
  .pair-programming ul li {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .pair-programming ul li {
    font-size: 1.2em;
  }
}

@media all and (max-width: 700px) {
  .pair-programming ul li {
    font-size: 0.95391em;
  }
}

.daily-exercises {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 5vh;
  margin-bottom: 10vh;
}

.daily-exercises a {
  color: #1845AD;
}

.daily-exercises a:hover {
  color: #1845AD;
  text-decoration: none;
  font-weight: 700;
}

.daily-exercises h2 {
  font-weight: 700;
  margin-bottom: 5vh;
  font-size: 2.2em;
}

@media all and (max-width: 640px) {
  .daily-exercises h2 {
    font-size: 1.6em;
  }
}

@media all and (max-width: 1200px) {
  .daily-exercises h2 {
    font-size: 2.2em;
  }
}

@media all and (max-width: 927px) {
  .daily-exercises h2 {
    font-size: 2.00077em;
  }
}

@media all and (max-width: 695px) {
  .daily-exercises h2 {
    font-size: 1.69199em;
  }
}

.daily-exercises h3 {
  font-weight: 600;
  font-size: 1.8em;
}

@media all and (max-width: 640px) {
  .daily-exercises h3 {
    font-size: 1.4em;
  }
}

@media all and (max-width: 1200px) {
  .daily-exercises h3 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 867px) {
  .daily-exercises h3 {
    font-size: 1.65494em;
  }
}

.daily-exercises ul {
  margin-bottom: 4vh;
}

.daily-exercises ul li {
  font-size: 1.2em;
  margin-bottom: 10px;
}

@media all and (max-width: 640px) {
  .daily-exercises ul li {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .daily-exercises ul li {
    font-size: 1.2em;
  }
}

@media all and (max-width: 700px) {
  .daily-exercises ul li {
    font-size: 0.95391em;
  }
}

@media screen and (min-width: 0px) and (max-width: 1360px) {
  .apps .app img {
    margin: 0 auto;
    max-width: 400px;
    margin-bottom: 4vh;
  }
  .apps .app img.larger {
    max-width: 320px;
  }
  .apps .app .screenshot {
    max-width: 220px;
    margin: 0 auto;
    margin-bottom: 4vh;
  }
  .apps .app .app-content {
    margin: 0 auto;
  }
  .apps .app .app-content p {
    text-align: center;
    margin-bottom: 4vh;
  }
  .apps .app .app-content .button-block {
    margin: 0 auto;
    text-align: center;
  }
  .apps .app #diti-logo {
    max-width: 280px;
  }
  .apps button {
    margin: 2vh 10px 10px 10px;
  }
}

@media screen and (min-width: 1361px) and (max-width: 5000px) {
  .apps .app {
    height: 485px;
  }
  .apps .app.mlab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .apps .app.mlab .left-content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .apps .app.mlab .right-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  .apps .app.streamy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .apps .app.streamy .left-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  .apps .app.streamy .right-content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .apps .app img {
    float: left;
    margin: 0 auto;
    max-width: 450px;
    margin-bottom: 6vh;
    margin-top: 2vh;
  }
  .apps .app img.larger {
    max-width: 320px;
  }
  .apps .app .screenshot {
    float: right;
    max-width: 250px;
    margin: 0 auto;
    margin-bottom: 4vh;
  }
  .apps .app .app-content {
    float: left;
    max-width: 700px;
  }
  .apps .app .app-content p {
    margin-bottom: 5vh;
  }
  .apps button {
    margin: 4vh 20px 0 0;
  }
  .apps #farm-voyage img {
    float: right;
    max-width: 450px;
    margin-bottom: 6vh;
    margin-top: 2vh;
  }
  .apps #farm-voyage #farm-voyage-logo {
    position: relative;
    left: -290px;
  }
  .apps #farm-voyage .screenshot {
    float: left;
    max-width: 250px;
    margin-bottom: 4vh;
    margin-left: -20px;
  }
  .apps #farm-voyage .app-content {
    margin-left: 60px;
  }
  .apps #diti {
    margin-bottom: 125px;
  }
  .apps #survey {
    margin-bottom: 125px;
  }
  .apps #diti img {
    float: right;
    max-width: 450px;
    margin-bottom: 6vh;
    margin-top: 2vh;
  }
  .apps #survey img {
    float: right;
    max-width: 450px;
    margin-bottom: 6vh;
    margin-top: 2vh;
  }
  .apps #diti #diti-logo {
    position: relative;
    left: -450px;
    max-width: 300px;
  }
  .apps #diti #survey {
    position: relative;
    left: -410px;
    max-width: 350px;
  }
  .apps #diti .screenshot {
    float: left;
    max-width: 250px;
    margin-bottom: 4vh;
    margin-left: -20px;
  }
  .apps #diti .app-content {
    margin-left: 60px;
  }
}

.apps {
  max-width: 1050px;
  margin: 0 auto;
  margin-bottom: 10vh;
}

.apps .app {
  margin-bottom: 8vh;
}

.apps .app .app-content p {
  font-size: 1.5em;
}

@media all and (max-width: 340px) {
  .apps .app .app-content p {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .apps .app .app-content p {
    font-size: 1.5em;
  }
}

@media all and (max-width: 960px) {
  .apps .app .app-content p {
    font-size: 1.65308em;
  }
}

@media all and (max-width: 786px) {
  .apps .app .app-content p {
    font-size: 1.6224em;
  }
}

@media all and (max-width: 641px) {
  .apps .app .app-content p {
    font-size: 1.50588em;
  }
}

@media all and (max-width: 513px) {
  .apps .app .app-content p {
    font-size: 1.3343em;
  }
}

@media all and (max-width: 398px) {
  .apps .app .app-content p {
    font-size: 1.12519em;
  }
}

.apps button {
  color: black;
  font-size: 1.3em;
  padding: 4px 25px;
  border: 1px solid black;
  background-color: white;
  border-radius: 50px;
}

@media all and (max-width: 340px) {
  .apps button {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .apps button {
    font-size: 1.3em;
  }
}

@media all and (max-width: 738px) {
  .apps button {
    font-size: 1.41946em;
  }
}

@media all and (max-width: 478px) {
  .apps button {
    font-size: 1.14535em;
  }
}

.apps button:hover {
  color: white;
  background-color: black;
}

.apps hr {
  margin-bottom: 8vh;
}

.apps a {
  color: #1845AD;
  text-decoration: none;
}

.apps a:hover {
  color: #1845AD;
  font-weight: 700;
  text-decoration: none;
}

.design {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  margin-top: -2vh;
  margin-bottom: 8vh;
}

.design .category h2 {
  display: inline-block;
  font-size: 2.8em;
  text-indent: 12px;
  font-weight: 600;
  margin-bottom: 4vh;
}

@media all and (max-width: 640px) {
  .design .category h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 1200px) {
  .design .category h2 {
    font-size: 2.8em;
  }
}

@media all and (max-width: 986px) {
  .design .category h2 {
    font-size: 2.48121em;
  }
}

@media all and (max-width: 787px) {
  .design .category h2 {
    font-size: 2.11445em;
  }
}

.design .category a {
  display: inline-block;
  margin-left: 10px;
  color: #95989A;
  font-weight: 600;
}

.design .portfolio-item {
  margin-bottom: 5vh;
}

.design .portfolio-item h4 {
  text-align: center;
}

.design .portfolio-item h4 a {
  color: black;
  font-weight: 600;
  font-size: 1.2em;
}

.design .portfolio-item h4 :hover {
  text-decoration: none;
  color: #95989A;
}

.design .portfolio-item img {
  padding: 5px;
  margin-bottom: 20px;
}

.design .portfolio-item .card-text {
  margin-top: 10px;
  text-align: center;
  font-size: 1.1em;
}

@media all and (max-width: 340px) {
  .design .portfolio-item .card-text {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .design .portfolio-item .card-text {
    font-size: 1.1em;
  }
}

@media all and (max-width: 655px) {
  .design .portfolio-item .card-text {
    font-size: 1.31868em;
  }
}

@media all and (max-width: 407px) {
  .design .portfolio-item .card-text {
    font-size: 1.02249em;
  }
}

.design .portfolio-item .myicon {
  max-width: 65%;
  padding: 0px 10px 20px 10px;
  margin: 0 auto;
}

@media screen and (min-width: 0px) and (max-width: 765px) {
  .websites .portfolio-item .google-logo {
    padding: 35px;
    margin: 0 auto;
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

@media screen and (min-width: 766px) and (max-width: 5000px) {
  .websites .portfolio-item .google-logo {
    padding: 35px;
    margin: 0 auto;
    margin-top: -20px;
  }
}

.websites {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  margin-top: -2vh;
  margin-bottom: 8vh;
}

.websites .category h2 {
  display: inline-block;
  font-size: 2.8em;
  text-indent: 12px;
  font-weight: 600;
  margin-bottom: 4vh;
}

@media all and (max-width: 640px) {
  .websites .category h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 1200px) {
  .websites .category h2 {
    font-size: 2.8em;
  }
}

@media all and (max-width: 986px) {
  .websites .category h2 {
    font-size: 2.48121em;
  }
}

@media all and (max-width: 787px) {
  .websites .category h2 {
    font-size: 2.11445em;
  }
}

.websites .category a {
  display: inline-block;
  margin-left: 10px;
  color: #95989A;
  font-weight: 600;
}

.websites .portfolio-item {
  margin-bottom: 5vh;
}

.websites .portfolio-item h4 {
  text-align: center;
}

.websites .portfolio-item h4 a {
  color: black;
  font-weight: 600;
  font-size: 1.2em;
}

.websites .portfolio-item h4 :hover {
  text-decoration: none;
  color: #95989A;
}

.websites .portfolio-item img {
  padding: 5px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.websites .portfolio-item .card-text {
  margin-top: 10px;
  text-align: center;
  font-size: 1.1em;
}

@media all and (max-width: 340px) {
  .websites .portfolio-item .card-text {
    font-size: 0.9em;
  }
}

@media all and (max-width: 1200px) {
  .websites .portfolio-item .card-text {
    font-size: 1.1em;
  }
}

@media all and (max-width: 655px) {
  .websites .portfolio-item .card-text {
    font-size: 1.31868em;
  }
}

@media all and (max-width: 407px) {
  .websites .portfolio-item .card-text {
    font-size: 1.02249em;
  }
}

.websites .portfolio-item .ifttt {
  margin-top: -20px;
}

.websites .portfolio-item .neat {
  max-width: 48%;
  margin-top: -20px;
}

.websites .portfolio-item .bem {
  max-width: 48%;
}

.websites .portfolio-item .spotify {
  padding: 18px;
}

.websites .portfolio-item .instagram {
  padding: 20px;
}

.websites .portfolio-item .pitchfork {
  padding: 18px;
  max-width: 90%;
  margin-top: 20px;
  margin-bottom: 15px;
}

.websites .portfolio-item .bitly {
  max-width: 80%;
  padding: 15px;
  margin-bottom: -5px;
}

.websites .portfolio-item p a {
  color: #1845AD;
}

.websites .portfolio-item p a:hover {
  font-weight: 700;
  text-decoration: none;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

@media (hover: none), (hover: on-demand) {
  #toggle:hover {
    cursor: none;
  }
}

@media screen and (min-width: 0px) and (max-width: 765px) {
  #side-nav {
    display: none;
  }
  #toggle {
    display: block;
  }
}

@media screen and (min-width: 766px) and (max-width: 5000px) {
  #side-nav {
    display: block;
    position: fixed;
  }
  #content {
    display: block;
    position: absolute;
    right: 0;
  }
  #toggle {
    display: none;
  }
}

.display {
  display: block;
}

#active {
  color: #1845AD;
  font-weight: 700;
}

#active-about-contact {
  font-weight: 700;
  color: black;
}

#toggle {
  margin: 10px 0 -10vh 0;
  border: none;
  background-color: #1845AD;
  border-radius: 100px;
  height: 35px;
  width: 35px;
  color: white;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

#toggle:focus {
  outline: 0;
}

.side-bar {
  margin-top: 5vh;
}

.side-bar .name {
  -ms-flex-item-align: auto;
      -ms-grid-row-align: auto;
      align-self: auto;
  text-align: center;
  font-family: 'Heebo', sans-serif;
}

.side-bar .name h1 {
  color: #1845AD;
  font-size: 3em;
  margin-bottom: 5px;
  font-weight: 600;
}

@media all and (max-width: 640px) {
  .side-bar .name h1 {
    font-size: 1.75em;
  }
}

@media all and (max-width: 1200px) {
  .side-bar .name h1 {
    font-size: 3em;
  }
}

@media all and (max-width: 1000px) {
  .side-bar .name h1 {
    font-size: 2.58371em;
  }
}

@media all and (max-width: 806px) {
  .side-bar .name h1 {
    font-size: 2.14791em;
  }
}

.side-bar .name h2 {
  font-size: 1.8em;
  margin-top: 0;
  font-weight: 400;
  color: #95989A;
}

@media all and (max-width: 640px) {
  .side-bar .name h2 {
    font-size: 1.3em;
  }
}

@media all and (max-width: 1200px) {
  .side-bar .name h2 {
    font-size: 1.8em;
  }
}

@media all and (max-width: 867px) {
  .side-bar .name h2 {
    font-size: 1.57439em;
  }
}

.side-bar .list {
  text-align: center;
  margin-top: 8vh;
  list-style-type: none;
  padding: 0;
}

.side-bar .list li {
  margin-top: 2vh;
}

.side-bar .list a {
  color: black;
  font-size: 1.5em;
}

@media all and (max-width: 640px) {
  .side-bar .list a {
    font-size: 1.1em;
  }
}

@media all and (max-width: 1200px) {
  .side-bar .list a {
    font-size: 1.5em;
  }
}

@media all and (max-width: 800px) {
  .side-bar .list a {
    font-size: 1.26786em;
  }
}

.side-bar .list :hover {
  color: #1845AD;
  text-decoration: none;
  font-weight: 700;
}

.side-bar .about-contact {
  margin-top: 6vh;
  margin-bottom: 5vh;
  text-align: center;
  padding: 0;
}

.side-bar .about-contact li {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}

.side-bar .about-contact li a {
  color: #95989A;
  font-size: 1.5em;
}

@media all and (max-width: 640px) {
  .side-bar .about-contact li a {
    font-size: 1em;
  }
}

@media all and (max-width: 1200px) {
  .side-bar .about-contact li a {
    font-size: 1.5em;
  }
}

@media all and (max-width: 800px) {
  .side-bar .about-contact li a {
    font-size: 1.17857em;
  }
}

.side-bar .about-contact li :hover {
  color: black;
  text-decoration: none;
  font-weight: 700;
}

.social {
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin-top: 10vh;
}

.social li {
  display: inline-block;
  margin: 0 20px 0 20px;
}

.social a {
  color: black;
}

.social :hover {
  color: #1845AD;
}

.content {
  margin-top: 5vh;
}

.content h1 {
  font-family: 'Heebo', sans-serif;
  color: #1845AD;
  font-size: 3.5em;
  margin-bottom: 5vh;
  font-weight: 600;
  text-align: center;
}

@media all and (max-width: 640px) {
  .content h1 {
    font-size: 2.5em;
  }
}

@media all and (max-width: 1200px) {
  .content h1 {
    font-size: 3.5em;
  }
}

@media all and (max-width: 1029px) {
  .content h1 {
    font-size: 3.31219em;
  }
}

@media all and (max-width: 874px) {
  .content h1 {
    font-size: 3.05266em;
  }
}

@media all and (max-width: 731px) {
  .content h1 {
    font-size: 2.73792em;
  }
}

.construction img {
  max-width: 250px;
  margin-top: 10vh;
}

.construction p {
  color: #95989A;
  margin-top: 5vh;
  text-align: center;
  font-size: 2em;
}

@media all and (max-width: 640px) {
  .construction p {
    font-size: 1.4em;
  }
}

@media all and (max-width: 1200px) {
  .construction p {
    font-size: 2em;
  }
}

@media all and (max-width: 900px) {
  .construction p {
    font-size: 1.75112em;
  }
}

@media all and (max-width: 643px) {
  .construction p {
    font-size: 1.40477em;
  }
}
/*# sourceMappingURL=page-style.css.map */