/*COLORS*/
.dark {
  background-color: #3D3D3D; }

.mid {
  background-color: #A3A397; }

.light {
  background-color: #DADfD7; }

.pink {
  background-color: #F88E8C; }

/*FONTS*/
.dark-text {
  color: #3D3D3D; }

.mid-text {
  color: #3D3D3D; }

.light-text {
  color: #DADfD7; }

.white-text {
  color: #FFFFFF; }

.pink-text {
  color: #F88E8C; }

/*BOILER PLATE*/
* {
  margin: 0;
  padding: 0; }

body {
  font-family: "Lato", sans-serif;
  font-size: 20pt;
  font-weight: 400;
  min-width: 375px; }

header {
  width: 100%; }

a {
  text-decoration: none;
  color: #3D3D3D; }

.list-summary {
  margin-left: 15px; }

.summary {
  list-style-image: url("check-icon.png");
  font-weight: 400;
  margin-left: 15px;
  margin-bottom: 15px; }

.proficiencies {
  list-style: none; }
  .proficiencies li {
    margin-bottom: 15px; }

/*-----------------MOBILE HEADER-----------------*/
#desktop-header {
  display: none; }

#mobile-header {
  text-align: center; }

#mobile-header-img-container {
  background-image: url("self_portrait1.png");
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 0 0 100% 0; }

#menu-button-container {
  float: right;
  width: 15%;
  margin-right: 5%; }
  #menu-button-container img {
    width: 100%;
    float: right;
    max-width: 70px; }
  #menu-button-container #close-icon {
    display: none;
    z-index: 1100;
    position: relative;
    right: 2%; }

#mobile-nav-container {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%; }
  #mobile-nav-container ul {
    list-style: none;
    background-color: #DADfD7;
    width: 100%;
    text-align: center; }
  #mobile-nav-container li {
    padding: 15px 0;
    border-bottom: 0.5px solid #FFFFFF; }
  #mobile-nav-container li:nth-child(1) {
    border-bottom: 0 solid #FFFFFF;
    background-color: #3D3D3D; }
  #mobile-nav-container a {
    text-decoration: none;
    color: #3D3D3D;
    font-family: "Lato", sans-serif;
    font-weight: 300; }

#header-title-container {
  width: 86%;
  padding: 60px 7%;
  position: relative;
  min-width: 322.5px; }
  #header-title-container p {
    padding-top: 15px; }

/*-----------------MOBILE BODY-----------------*/
section {
  width: 90%;
  padding: 40px 5%;
  position: relative; }

.banner {
  width: 100%;
  position: relative;
  margin: 25px auto; }

.line {
  width: 100%;
  position: relative;
  margin: 40px auto 0 auto; }

.center {
  text-align: center; }

.text-shadow {
  text-shadow: 0.5px 0.5px 3px #A3A397; }

.col-3 {
  width: 100%; }

.col-2, .col-2-left, .col-2-right {
  width: 100%;
  margin: 40px 0 40px; }

.col-2-3-left {
  width: 29%;
  padding-right: 5%;
  padding-top: 5px;
  float: left;
  border-right: 2px solid #F88E8C;
  text-align: right; }

.col-2-3-right {
  width: 59%;
  padding-left: 5%;
  padding-top: 5px;
  float: left; }

#tech-left-1, #tech-right-1 {
  height: 305px; }

#tech-left-2, #tech-right-2 {
  height: 130px; }

#tech-left-3, #tech-right-3 {
  height: 64px; }

#tech-left-4, #tech-right-4 {
  height: 203px; }

.about-list, .skills-list {
  text-align: center; }
  .about-list ul, .skills-list ul {
    list-style: none; }
  .about-list li, .skills-list li {
    margin-bottom: 15px; }
  .about-list a, .skills-list a {
    text-decoration: underline; }

#portrait2 {
  width: 60%;
  margin: 40px 20%;
  border-radius: 180px;
  border: 10px solid #F88E8C; }

.bottom-mg-15 {
  margin-bottom: 15px; }

.bottom-mg-60 {
  margin-bottom: 60px; }

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

.top-mg-40 {
  padding-top: 40px; }

.top-mg-60 {
  padding-top: 60px; }

.top-mg-80 {
  padding-top: 80px; }

#degree-separate {
  margin-top: 100px; }

.text-block {
  text-align: center;
  margin-top: 40px; }

.left {
  float: none;
  text-align: center; }

.right {
  float: none;
  text-align: center; }

.freelance {
  margin-bottom: 60px; }

#social-media-container {
  width: 200px;
  position: relative;
  margin: 60px auto 0 auto; }

.icon-container {
  width: 50%;
  float: left; }
  .icon-container img {
    width: 50%; }
  .icon-container .img-left {
    margin: 0 5% 0 45%; }
  .icon-container .img-right {
    margin: 0 45% 0 5%; }

#back-to-top {
  width: 15%;
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: 70px;
  z-index: 1200;
  display: none; }
  #back-to-top img {
    width: 100%; }

.scroll-down {
  width: 15%;
  position: relative;
  margin: -40px auto;
  max-width: 70px;
  z-index: 900; }
  .scroll-down img {
    width: 100%; }

.three-col {
  width: 100%;
  margin-top: 30px; }
  .three-col img {
    width: 65%;
    margin: 0 auto;
    display: block; }

.noted {
  list-style: none;
  margin: 15px auto 15px -20px; }

#noted {
  font-weight: 600; }

.left-mg-15 {
  padding-left: 15px; }

/*-----------------MOBILE FONT SIZES-----------------*/
h1 {
  font-size: 1.8em;
  font-family: "Lato", sans-serif;
  font-weight: 300; }

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

h3 {
  font-size: .7em;
  font-family: "Lato", sans-serif;
  font-weight: 900; }

h4 {
  font-size: .9em;
  font-weight: 700; }

h5 {
  font-size: .9em;
  font-weight: 300; }

h6 {
  font-size: .7em;
  font-weight: 300; }

p {
  font-size: .7em; }

.italic {
  font-style: italic; }

@media only screen and (min-width: 450px) {
  #tech-left-1, #tech-right-1 {
    height: 262px; }
  #tech-left-2, #tech-right-2 {
    height: 86px; }
  #tech-left-3, #tech-right-3 {
    height: 42px; }
  #tech-left-4, #tech-right-4 {
    height: 159px; } }

@media only screen and (min-width: 575px) {
  #tech-left-1, #tech-right-1 {
    height: 218px; }
  #tech-left-2, #tech-right-2 {
    height: 86px; }
  #tech-left-3, #tech-right-3 {
    height: 42px; }
  #tech-left-4, #tech-right-4 {
    height: 137px; } }

@media only screen and (min-width: 667px) {
  /*-----------------LARGE MOBILE HEADER-----------------*/
  #mobile-header {
    display: none; }
  #desktop-header {
    display: inline; }
  #desktop-top-row {
    width: 100%; }
  #header-img-container {
    width: 33.3%;
    background-image: url("self_portrait1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 16.65% 0 16.65% 0;
    float: left; }
    #header-img-container img {
      width: 100%; }
  #title-container {
    width: 60%;
    float: left;
    padding: 20px 3.35%; }
    #title-container p {
      font-size: .6em;
      padding-top: 10px; }
  p {
    font-size: .6em; }
  #desktop-nav {
    width: 90%;
    margin: 0 5%;
    text-align: center; }
    #desktop-nav ul {
      list-style: none; }
    #desktop-nav li {
      float: left;
      width: 14%;
      margin: 15px 1.25%; }
    #desktop-nav a {
      text-decoration: none;
      color: #3D3D3D;
      font-size: .7em; }
  /*-----------------LARGE MOBILE BODY-----------------*/
  section {
    width: 90%;
    padding: 40px 5%;
    position: relative; }
  .text-box {
    width: 83.33%;
    margin: 0 8.33%; }
  .text-block {
    width: 83.33%;
    margin-left: 8.33%;
    margin-right: 8.33%; }
  .banner {
    width: 66.8%;
    position: relative;
    margin: 25px 16.7%; }
  .line {
    width: 66.8%;
    position: relative;
    margin: 40px 16.7% 0 16.7%; }
  .col-3 {
    width: 30%;
    margin: 0 1.66%;
    float: left; }
  .about-list {
    margin-top: 50px; }
    .about-list li {
      margin-bottom: 10px; }
  #portrait2 {
    width: 100%;
    position: relative;
    max-width: 360px;
    margin: 20px auto;
    border: 5px solid #F88E8C; }
  .text-right-align {
    text-align: right; }
  .text-left-align {
    text-align: left; }
  .three-col {
    width: 33%;
    float: left;
    margin-top: 0; }
    .three-col img {
      width: 90%;
      margin: 0 auto;
      display: block; }
  #tech-left-1, #tech-right-1 {
    height: 153px; }
  #tech-left-2, #tech-right-2 {
    height: 58px; }
  #tech-left-3, #tech-right-3 {
    height: 39px; }
  #tech-left-4, #tech-right-4 {
    height: 81px; } }

@media only screen and (min-width: 768px) {
  /*-----------------SMALL TABLET HEADER-----------------*/
  #title-container {
    padding: 70px 3.35% 10px 3.35%; }
  /*-----------------SMALL TABLET BODY-----------------*/
  .col-3 {
    width: 28%;
    margin: 0 2.66%;
    float: left; }
  .col-2 {
    width: 45%;
    margin: 40px 2.5% 20px 2.5%;
    float: left; }
  .col-2-left {
    width: 47.5%;
    margin: 40px 2.5% 0 0;
    float: left; }
  .col-2-right {
    width: 47.5%;
    margin: 40px 0 0 2.5%;
    float: left; }
  .left {
    float: left;
    text-align: left; }
  .right {
    float: right;
    text-align: right; }
  .about-list {
    margin-top: 50px; }
    .about-list li {
      margin-bottom: 10px; }
  #degree-separate {
    margin-top: 40px; }
  .text-block {
    margin-top: 40px; }
  .freelance {
    min-height: 150px; }
  #tech-left-1, #tech-right-1 {
    height: 118px; }
  #tech-left-2, #tech-right-2 {
    height: 58px; }
  #tech-left-3, #tech-right-3 {
    height: 39px; }
  #tech-left-4, #tech-right-4 {
    height: 81px; }
  .col-2-3-left {
    width: 31%;
    padding-right: 3%; }
  .col-2-3-right {
    width: 62%;
    padding-left: 3%; } }

@media only screen and (min-width: 840px) {
  /*-----------------MID TABLET HEADER-----------------*/
  #title-container {
    padding: 80px 3.35% 10px 3.35%; }
    #title-container p {
      font-size: .7em; }
  p {
    font-size: .7em; }
  #desktop-nav a {
    font-size: .8em; }
  /*-----------------MID TABLET BODY-----------------*/
  .about-list {
    margin-top: 60px; }
    .about-list li {
      margin-bottom: 10px; }
  .exp-head-box {
    width: 83.3%;
    margin: 0 8.35%; }
  .col-2-left {
    width: 39%;
    margin: 40px 2.65% 20px 8.35%;
    float: left; }
  .col-2-right {
    width: 39%;
    margin: 40px 8.35% 20px 2.65%;
    float: left; }
  .freelance {
    min-height: 240px; }
  #tech-left-1, #tech-right-1 {
    height: 152px; }
  #tech-left-2, #tech-right-2 {
    height: 64px; }
  #tech-left-3, #tech-right-3 {
    height: 42px; }
  #tech-left-4, #tech-right-4 {
    height: 98px; } }

@media only screen and (min-width: 960px) {
  /*-----------------LARGE TABLET HEADER-----------------*/
  #title-container {
    padding: 90px 3.35% 20px 3.35%; }
  h1 {
    font-size: 3em; }
  h2 {
    font-size: 1.2em; }
  /*-----------------LARGE TABLET BODY-----------------*/
  .about-list {
    margin-top: 70px; }
    .about-list li {
      margin-bottom: 15px; }
  section {
    padding-top: 60px; }
  .banner {
    margin: 40px 16.7% 40px 16.7%; }
  .line {
    margin: 65px 16.7% 40px 16.7%; }
  #tech-left-1, #tech-right-1 {
    height: 130px; }
  #tech-left-2, #tech-right-2 {
    height: 64px; }
  #tech-left-3, #tech-right-3 {
    height: 42px; }
  #tech-left-4, #tech-right-4 {
    height: 76px; } }

@media only screen and (min-width: 1024px) {
  /*-----------------X-SMALL DESKTOP HEADER-----------------*/
  #title-container {
    padding: 100px 3.35% 20px 3.35%; }
  h1 {
    font-size: 3.2em; }
  h2 {
    font-size: 1.2em; }
  /*-----------------X-SMALL DESKTOP BODY-----------------*/
  section {
    padding: 60px 5%; }
  .banner {
    margin: 40px 16.7%; }
  .line {
    margin: 65px 16.7% 0 16.7%; } }

@media only screen and (min-width: 1090px) {
  #tech-left-1, #tech-right-1 {
    height: 108px; }
  #tech-left-2, #tech-right-2 {
    height: 64px; }
  #tech-left-3, #tech-right-3 {
    height: 42px; }
  #tech-left-4, #tech-right-4 {
    height: 76px; } }

@media only screen and (min-width: 1160px) {
  /*-----------------SMALL DESKTOP HEADER-----------------*/
  #title-container {
    padding: 130px 3.35% 20px 3.35%; }
  h1 {
    font-size: 3.6em; }
  h2 {
    font-size: 1.4em; }
  /*-----------------SMALL DESKTOP BODY-----------------*/
  .about-list {
    margin-top: 90px; }
    .about-list li {
      margin-bottom: 15px; }
  .freelance {
    min-height: 0px; } }

@media only screen and (min-width: 1250px) {
  /*-----------------MID DESKTOP HEADER-----------------*/
  #title-container {
    padding: 150px 3.35% 20px 3.35%; }
  /*-----------------MID DESKTOP BODY-----------------*/
  .about-list {
    margin-top: 110px; }
    .about-list li {
      margin-bottom: 15px; } }

@media only screen and (min-width: 1400px) {
  /*-----------------LARGE DESKTOP HEADER-----------------*/
  #title-container {
    width: 56%;
    padding: 200px 5.35% 20px 5.35%; }
    #title-container p {
      font-size: .8em; }
  p {
    font-size: .8em; }
  #desktop-nav li {
    margin: 30px 1.25%; }
  #desktop-nav a {
    text-decoration: none;
    color: #3D3D3D;
    font-size: 1em; }
  /*-----------------LARGE DESKTOP BODY-----------------*/
  section {
    width: 80%;
    padding: 80px 10%;
    position: relative; } }

@media only screen and (min-width: 1600px) {
  /*-----------------X-LARGE DESKTOP HEADER-----------------*/
  #title-container {
    width: 56%;
    padding: 270px 5.35% 20px 5.35%; } }

@media only screen and (min-width: 1920px) {
  /*-----------------XX-LARGE DESKTOP HEADER-----------------*/
  #title-container {
    width: 52%;
    padding: 360px 7.35% 20px 7.35%; } }

.force-left {
  text-align: left;
  float: left; }

.force-left-align {
  text-align: left; }
  .force-left-align ul {
    margin: 0 5%; }

.force-right {
  text-align: right;
  float: right; }

.no-top-mg {
  margin-top: 0; }

.clear {
  clear: both; }