html {
  font-size: 20px;
}

b, strong {
  font-weight: bolder;
}

body {
  background-color: #000000;
  font-family: 'Jost', serif;
  color: white;
  margin: 0 0;
  overflow-y: scroll;
  min-width: 320px;
}

header {
/*  background: #2E8B57;  */
  background: #24263D;
  min-width: 320px;
}

header::after {
  clear: both;
  content: '';
  display: table;
  margin: 0 0 3px 0;
}

a, h4, blockquote {
  color: white;
  font-size: 1em;
  cursor: default;
}

h2 {
  text-align: center;
  font-size: 1em;
}

span .flip-card-tag { 
  position:absolute; 
  top:0;
  left: 0;
  right: 0;
  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty2.gif');
}   

div.hidden {
  display: none;
}

div.heading {
  display: block;
  font-size: 1.2em;
  font-weight: 500;
  text-align: center;
}

p {
  margin: 0em auto;
}

hr {
  height: auto;
  width: 50%;
}

ol {
  margin: 0px 125px;
}

ol li {
  margin: 30px 0px;
}

blockquote.hidden {
  display: none;
}

img.about-section {
  border: 4px solid #ffffff;

  float: left;
  margin: 25px 40px 10px 40px;
  padding: 0px;
  min-width: 40%;
  max-width: 55%;
} 

h1 {
  font-size: 1.75em;
  font-weight: 500;
  margin: -0.25em auto 0 auto;
}

.banner {
  position: relative;
  margin: 0 0;
  display: inline-block; 
}

.banner .background-image img {
  height: auto;
  width: 100%;
  margin-bottom: -8px;
}

.hidden-1280 {
  display: block;
}

.visible-1280 {
  display: none;
}

.banner .name-text {
  color: white;
  font-size: 1.16em;

  left: 0;
  right: 0;
  margin: -0.25em auto 0em auto;
  position: absolute;

  top: 18%; /* Adjust this value to move the positioned div up and down */
  text-align: center;
  width: 100%; /* Set the width of the positioned div */
  z-index: 999;
}

.name-text img {
  margin: 0.25em auto;
  position: relative;
  display: inline-block; 
  visibility: hidden;
}

.name-text .social-media img {
  width: 50%;
  height: auto;
  margin: 0.5em auto;
  position: relative;
  display: inline-block; 
  visibility: visible;
}

.banner .name-text .social-table {
  left: 0em;
  right: 0em;
  margin: -1em auto 0em auto;
  position: relative;

  top: 100%; /* Adjust this value to move the positioned div up and down */
  text-align: center;
  width: 80%; 
}

.banner .name-text .social-table .social-media {
  color: white;
  font-size: 0.75em;

  display: table-row; 
  left: 0;
  right: 0;
  margin: 0em auto 0em auto;

  overflow: auto;
  position: relative;
  width: 100%; /* Set the width of the positioned div */
  z-index: 999;
}

.banner .name-text .social-table .hexagon {
  height: auto;
  width: 80%;
}

.social-table .social-media .shadowR, 
.social-table .social-media .shadowO, 
.social-table .social-media .shadowY, 
.social-table .social-media .shadowG, 
.social-table .social-media .shadowB, 
.social-table .social-media .shadowP {
  overflow: hidden;
  display: table-cell; 
  width: calc(100% / 6); 
}

.pdf, .bio {
  text-align:center; 
  margin-left:200px; 
  min-width:60%; 
  max-width:80%;
}

div.house {
  position: relative;
  display: inline-block;
}

div.pdf {
  width:80%; 
}

blockquote a {
  font-size:0.6em; 
  text-decoration:none;
}

blockquote p {
  font-size:0.4em;
  text-decoration:none;
}

ol > li {
  font-weight: 300;
}

ol > li > span {
  font-weight: 700;
}

.container a {
  font-size: 1.1em;
  font-weight: 500;

  margin: 0 auto;
  width: 75%;
}

.first-section {
  margin: 0 auto;
  margin-left: 125px;
  min-width: 320px;
  width: 75%;
}

.second-section {
  font-size: 1.5em;
  text-align: center;

  margin: 0 auto;
  margin-top: 40px;
  min-width: 320px;
  width: 75%;
}

.about-section {
  font-size: 0.9em;
  text-align: justify;

  margin: 40px 40px 0 40px;
  min-width: 60%;
}

.summary-section {
  font-size: 1em;
  text-align: justify;

  margin: auto 25vw;
  min-width: 0%;
}

.success {
  font-size: 1em;
  text-align: center;

  margin: 0 auto;
  margin-top: 40px;
  min-width: 320px;
  width: 75%;
}

.project-section {
  background: #685a44;
  text-align: center;
  z-index: -10;
}

.project-section::after {
  clear: both;
  content: '';
}

.project-section ul {
  font-weight: 400;
  list-style: none;

  margin: 0;
  padding: 0;
}

.project-section li {
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
  padding-top: 0.5em;
  position: relative;
}

.project-section a {
  font-size: 1em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.project-section  a:hover {
  color: #dceef5;
}

.project-section  a::before {
  background-color: #ffffff;
  content: '';

  display: block;
  height: 4px;
  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

.project-section  a:hover::before {
  width: 100%;
}


.work-section {
  background: #595565;
  text-align: center;
  z-index: -10;
}

.work-section::after {
  clear: both;
  content: '';
}

.work-section ul {
  font-weight: 400;
  list-style: none;

  margin: 0;
  padding: 0;
}

.work-section li {
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
  padding-top: 0.5em;
  position: relative;
}

.work-section a {
  font-size: 1em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.work-section  a:hover {
  color: #dceef5;
}

.work-section  a::before {
  background-color: #ffffff;
  content: '';

  display: block;
  height: 4px;
  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

.work-section  a:hover::before {
  width: 100%;
}


.embedly {
  margin:  50px 75px 0 75px;
}

.contact {
  visibility: hidden;
}

nav {
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-left: 0.75em;
  margin-right: 0.75em;
  padding-top: 0.5em;
  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #989D87;
}

nav a::before {
  background-color: #989D87;
  content: '';

  display: block;
  height: 5px;
  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

.shadow {
  filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
}

.shadow:hover {
  filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
  overflow:visible;
}

.shadowR {
  filter: drop-shadow(0 0 10px rgba(228, 46, 48, 0));
}

.shadowR:hover {
  filter: drop-shadow(0 0 10px rgba(228, 46, 48, 1));
  overflow:visible;
}

.shadowO {
  filter: drop-shadow(0 0 10px rgba(236, 161, 53, 0));
}

.shadowO:hover {
  filter: drop-shadow(0 0 10px rgba(236, 161, 53, 1));
  overflow:visible;
}

.shadowY {
  filter: drop-shadow(0 0 10px rgba(221, 204, 40, 0));
}

.shadowY:hover {
  filter: drop-shadow(0 0 10px rgba(221, 204, 40, 1));
  overflow:visible;
}

.shadowG {
  filter: drop-shadow(0 0 10px rgba(28, 167, 71, 0));
}

.shadowG:hover {
  filter: drop-shadow(0 0 10px rgba(28, 167, 71, 1));
  overflow:visible;
}

.shadowB {
  filter: drop-shadow(0 0 10px rgba(16, 128, 190, 0));
}

.shadowB:hover {
  filter: drop-shadow(0 0 10px rgba(16, 128, 190, 1));
  overflow:visible;
}

.shadowP {
  filter: drop-shadow(0 0 10px rgba(200, 50, 136, 0));
}

.shadowP:hover {
  filter: drop-shadow(0 0 10px rgba(200, 50, 136, 1));
  overflow:visible;
}


.hexagon {
  clip-path: inset(0px 0px 0px 0px);
  margin: 0em 0.125em 0.5em 0.125em;

  height: 2em;
  width: 2em; 

  z-index: 10;
}

.hexagon a img {
  margin: 0.25em auto 0em auto;
}

.hexagon-1 {
  background-color: #2E8B57;
}

.hexagon-2 {
  background-color: #221d1c;
}

.hexagon-3 {
  background-color: #4b3842;
}

.hexagon-4 {
  background-color: #9192a2;
}

.hexagon-5 {
  background-color: #595565;
}

.hexagon-6 {
  background-color: #343d3f;
}

.hexagon-7 {
  background-color: #685a44;
}

.fade-in-1 {
  animation: fadeIn ease 0s;
  -moz-animation: fadeIn ease 0s;
  -ms-animation: fadeIn ease 0s;
  -o-animation: fadeIn ease 0s;
  -webkit-animation: fadeIn ease 0s;
}

.fade-in-2 {
  animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.5s;
  -moz-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.5s;
  -ms-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.5s;
  -o-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.5s;
  -webkit-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.5s;
}

.fade-in-3 {
  animation: fadeIn cubic-bezier(.54,.01,.64,1) 1s;
  -moz-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1s;
  -ms-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1s;
  -o-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1s;
  -webkit-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1s;
}

.fade-in-4 {
  animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
}

.fade-in-5 {
  animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.25s;
  -moz-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.25s;
  -ms-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.25s;
  -o-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.25s;
  -webkit-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.25s;
}

.fade-in-6 {
  animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.75s;
  -moz-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.75s;
  -ms-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.75s;
  -o-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.75s;
  -webkit-animation: fadeIn cubic-bezier(.54,.01,.64,1) 1.75s;
}

.fade-in-7 {
  animation: fadeIn ease 1.25s;
  -moz-animation: fadeIn ease 1.25s;
  -ms-animation: fadeIn ease 1.25s;
  -o-animation: fadeIn ease 1.25s;
  -webkit-animation: fadeIn ease 1.25s;
}

.flask {
  clip-path: polygon(68.000px 8.46px, 65.420px 11.34px, 67.180px 15.92px, 72.120px 21.92px, 
    75.500px 29.1px, 76.820px 49.9px, 77.120px 101.32px, 44.300px 150.52px, 9.900px 202.9px, 
    3.080px 212.36px, 3px 230.36px, 13.800px 248.320px, 31.240px 255.6px, 111.780px 255.8px, 
    196.900px 254.76px, 208.500px 249.7px, 215.380px 242.7px, 219.600px 231.68px, 218.500px 216.3px, 
    209.020px 197.7px, 176.800px 148.6px, 145.900px 101.3px, 145.840px 100.1px, 144.720px 44.4px, 
    146.140px 27.8px, 153.840px 15.84px, 155.560px 11.76px, 153.660px 8.78px, 152.900px 8.3px, 110.800px 8.26px, 68.000px 8.46px);
  -webkit-clip-path: polygon(68.000px 8.46px, 65.420px 11.34px, 67.180px 15.92px, 72.120px 21.92px, 
    75.500px 29.1px, 76.820px 49.9px, 77.120px 101.32px, 44.300px 150.52px, 9.900px 202.9px, 
    3.080px 212.36px, 3px 230.36px, 13.800px 248.320px, 31.240px 255.6px, 111.780px 255.8px, 
    196.900px 254.76px, 208.500px 249.7px, 215.380px 242.7px, 219.600px 231.68px, 218.500px 216.3px, 
    209.020px 197.7px, 176.800px 148.6px, 145.900px 101.3px, 145.840px 100.1px, 144.720px 44.4px, 
    146.140px 27.8px, 153.840px 15.84px, 155.560px 11.76px, 153.660px 8.78px, 152.900px 8.3px, 110.800px 8.26px, 68.000px 8.46px);
  background-color: #000000;

  height: 300px;
  transform: scale(0.22);
  width: 300px; 

  left: -72px;
  margin: 0px 0px;
  top: 85px;
  position: absolute;
  z-index: 20;
}

.dna1 {
  clip-path: polygon(54.1px 72.7px, 50.8px 71.7px, 50.5px 71.6px, 50.2px 71.5px, 49.9px 71.2px, 49.2px 70.7px, 48.6px 70.3px, 47.3px 69.0px, 46.9px 68.5px, 46.5px 67.9px, 46.4px 67.7px, 46.2px 67.4px, 46.0px 67.0px, 45.1px 64.2px, 45.0px 63.8px, 45.0px 60.6px, 45.1px 60.3px, 45.3px 59.6px, 45.4px 59.1px, 45.6px 58.1px, 45.9px 57.2px, 46.0px 56.8px, 46.5px 55.1px, 46.6px 54.9px, 46.6px 54.7px, 46.7px 54.5px, 46.9px 54.0px, 47.0px 53.5px, 47.1px 53.3px, 47.4px 52.0px, 47.6px 51.4px, 47.7px 50.9px, 47.9px 50.3px, 48.1px 49.6px, 48.2px 49.3px, 48.3px 48.9px, 48.4px 48.7px, 48.4px 48.5px, 48.7px 47.5px, 49.0px 46.5px, 49.0px 46.3px, 49.2px 45.9px, 49.3px 45.4px, 49.4px 44.9px, 49.9px 43.2px, 50.0px 43.0px, 50.0px 42.8px, 50.1px 42.5px, 50.5px 39.9px, 49.4px 40.9px, 47.9px 42.0px, 46.9px 41.9px, 45.9px 41.0px, 45.9px 40.8px, 45.8px 40.0px, 45.8px 39.3px, 47.6px 37.5px, 49.4px 35.6px, 49.2px 35.4px, 49.0px 35.0px, 48.3px 34.4px, 48.1px 34.3px, 47.8px 34.1px, 43.3px 38.5px, 38.8px 42.9px, 38.3px 42.9px, 37.8px 42.9px, 37.5px 42.9px, 37.3px 42.8px, 37.0px 42.6px, 36.6px 42.2px, 36.5px 41.9px, 36.3px 40.5px, 40.0px 36.5px, 43.0px 32.8px, 42.5px 32.9px, 42.1px 33.0px, 40.2px 33.6px, 38.6px 33.6px, 38.3px 33.4px, 37.5px 31.7px, 37.6px 31.3px, 38.7px 30.1px, 39.1px 29.9px, 39.7px 29.8px, 40.0px 29.7px, 40.2px 29.7px, 40.4px 29.6px, 41.0px 29.4px, 41.6px 29.3px, 44.0px 29.0px, 47.8px 29.7px, 48.3px 29.9px, 48.5px 30.1px, 48.8px 30.2px, 49.1px 30.4px, 49.4px 30.5px, 49.9px 30.9px, 50.4px 31.2px, 52.4px 33.2px, 52.6px 33.6px, 53.0px 34.0px, 53.2px 34.5px, 53.5px 35.1px, 53.7px 35.5px, 53.9px 35.9px, 54.0px 36.4px, 54.0px 36.5px, 54.1px 36.8px, 54.4px 38.3px, 54.4px 38.5px, 54.4px 40.7px, 54.3px 40.9px, 54.2px 41.7px, 54.0px 42.5px, 53.9px 42.9px, 53.8px 43.2px, 53.7px 43.5px, 53.0px 46.1px, 52.8px 46.7px, 52.7px 47.2px, 52.5px 47.8px, 52.3px 48.5px, 52.2px 49.0px, 52.0px 49.6px, 51.6px 50.8px, 51.3px 52.2px, 51.1px 52.7px, 51.0px 53.2px, 50.4px 55.1px, 50.3px 55.5px, 50.2px 55.7px, 50.1px 56.1px, 50.0px 56.8px, 49.9px 57.0px, 49.8px 57.5px, 49.6px 58.0px, 49.3px 59.1px, 48.9px 60.4px, 48.8px 61.9px, 51.9px 58.9px, 55.1px 55.8px, 55.4px 55.6px, 56.7px 55.6px, 57.4px 56.2px, 57.9px 57.2px, 57.8px 58.1px, 53.8px 62.3px, 50.0px 66.3px, 51.4px 67.7px, 52.7px 66.5px, 54.5px 65.1px, 55.5px 65.1px, 56.6px 66.0px, 56.8px 66.2px, 56.9px 66.8px, 56.8px 67.5px, 56.6px 67.8px, 56.1px 68.4px, 55.6px 69.0px, 57.2px 68.9px, 58.1px 68.7px, 58.2px 68.6px, 58.7px 68.5px, 59.1px 68.3px, 59.8px 68.1px, 60.7px 67.9px, 61.2px 67.7px, 61.8px 67.6px, 63.0px 67.6px, 63.8px 68.4px, 64.0px 68.6px, 64.1px 69.4px, 63.6px 70.6px, 63.0px 71.0px, 62.8px 71.1px, 61.5px 71.5px, 61.3px 71.5px, 60.8px 71.7px, 60.4px 71.8px, 59.8px 72.0px, 59.2px 72.1px, 57.3px 72.6px, 54.1px 72.7px);
  -webkit-clip-path: polygon(54.1px 72.7px, 50.8px 71.7px, 50.5px 71.6px, 50.2px 71.5px, 49.9px 71.2px, 49.2px 70.7px, 48.6px 70.3px, 47.3px 69.0px, 46.9px 68.5px, 46.5px 67.9px, 46.4px 67.7px, 46.2px 67.4px, 46.0px 67.0px, 45.1px 64.2px, 45.0px 63.8px, 45.0px 60.6px, 45.1px 60.3px, 45.3px 59.6px, 45.4px 59.1px, 45.6px 58.1px, 45.9px 57.2px, 46.0px 56.8px, 46.5px 55.1px, 46.6px 54.9px, 46.6px 54.7px, 46.7px 54.5px, 46.9px 54.0px, 47.0px 53.5px, 47.1px 53.3px, 47.4px 52.0px, 47.6px 51.4px, 47.7px 50.9px, 47.9px 50.3px, 48.1px 49.6px, 48.2px 49.3px, 48.3px 48.9px, 48.4px 48.7px, 48.4px 48.5px, 48.7px 47.5px, 49.0px 46.5px, 49.0px 46.3px, 49.2px 45.9px, 49.3px 45.4px, 49.4px 44.9px, 49.9px 43.2px, 50.0px 43.0px, 50.0px 42.8px, 50.1px 42.5px, 50.5px 39.9px, 49.4px 40.9px, 47.9px 42.0px, 46.9px 41.9px, 45.9px 41.0px, 45.9px 40.8px, 45.8px 40.0px, 45.8px 39.3px, 47.6px 37.5px, 49.4px 35.6px, 49.2px 35.4px, 49.0px 35.0px, 48.3px 34.4px, 48.1px 34.3px, 47.8px 34.1px, 43.3px 38.5px, 38.8px 42.9px, 38.3px 42.9px, 37.8px 42.9px, 37.5px 42.9px, 37.3px 42.8px, 37.0px 42.6px, 36.6px 42.2px, 36.5px 41.9px, 36.3px 40.5px, 40.0px 36.5px, 43.0px 32.8px, 42.5px 32.9px, 42.1px 33.0px, 40.2px 33.6px, 38.6px 33.6px, 38.3px 33.4px, 37.5px 31.7px, 37.6px 31.3px, 38.7px 30.1px, 39.1px 29.9px, 39.7px 29.8px, 40.0px 29.7px, 40.2px 29.7px, 40.4px 29.6px, 41.0px 29.4px, 41.6px 29.3px, 44.0px 29.0px, 47.8px 29.7px, 48.3px 29.9px, 48.5px 30.1px, 48.8px 30.2px, 49.1px 30.4px, 49.4px 30.5px, 49.9px 30.9px, 50.4px 31.2px, 52.4px 33.2px, 52.6px 33.6px, 53.0px 34.0px, 53.2px 34.5px, 53.5px 35.1px, 53.7px 35.5px, 53.9px 35.9px, 54.0px 36.4px, 54.0px 36.5px, 54.1px 36.8px, 54.4px 38.3px, 54.4px 38.5px, 54.4px 40.7px, 54.3px 40.9px, 54.2px 41.7px, 54.0px 42.5px, 53.9px 42.9px, 53.8px 43.2px, 53.7px 43.5px, 53.0px 46.1px, 52.8px 46.7px, 52.7px 47.2px, 52.5px 47.8px, 52.3px 48.5px, 52.2px 49.0px, 52.0px 49.6px, 51.6px 50.8px, 51.3px 52.2px, 51.1px 52.7px, 51.0px 53.2px, 50.4px 55.1px, 50.3px 55.5px, 50.2px 55.7px, 50.1px 56.1px, 50.0px 56.8px, 49.9px 57.0px, 49.8px 57.5px, 49.6px 58.0px, 49.3px 59.1px, 48.9px 60.4px, 48.8px 61.9px, 51.9px 58.9px, 55.1px 55.8px, 55.4px 55.6px, 56.7px 55.6px, 57.4px 56.2px, 57.9px 57.2px, 57.8px 58.1px, 53.8px 62.3px, 50.0px 66.3px, 51.4px 67.7px, 52.7px 66.5px, 54.5px 65.1px, 55.5px 65.1px, 56.6px 66.0px, 56.8px 66.2px, 56.9px 66.8px, 56.8px 67.5px, 56.6px 67.8px, 56.1px 68.4px, 55.6px 69.0px, 57.2px 68.9px, 58.1px 68.7px, 58.2px 68.6px, 58.7px 68.5px, 59.1px 68.3px, 59.8px 68.1px, 60.7px 67.9px, 61.2px 67.7px, 61.8px 67.6px, 63.0px 67.6px, 63.8px 68.4px, 64.0px 68.6px, 64.1px 69.4px, 63.6px 70.6px, 63.0px 71.0px, 62.8px 71.1px, 61.5px 71.5px, 61.3px 71.5px, 60.8px 71.7px, 60.4px 71.8px, 59.8px 72.0px, 59.2px 72.1px, 57.3px 72.6px, 54.1px 72.7px);

  background-color: #000000;

  height: 300px;
  transform: scale(1);
  width: 300px; 

  left: 28px;
  margin: 0px 0px;
  top: 350px;
  position: absolute;
  z-index: 20;
}

.dna2 {
  clip-path: polygon(58.8px 64.2px, 57.9px 63.5px, 57.7px 61.9px, 62.0px 57.3px, 66.1px 53.1px, 66.1px 52.6px, 65.7px 51.6px, 65.1px 51.2px, 63.1px 52.9px, 61.0px 54.7px, 58.8px 52.4px, 59.8px 50.9px, 60.6px 50.0px, 59.9px 50.0px, 59.3px 50.1px, 58.7px 50.3px, 58.0px 50.5px, 57.1px 50.7px, 56.4px 50.8px, 55.8px 50.8px, 55.2px 50.2px, 54.7px 49.7px, 54.7px 48.9px, 55.2px 47.7px, 56.5px 47.1px, 57.5px 46.7px, 58.0px 46.6px, 58.5px 46.4px, 60.9px 46.3px, 63.1px 46.3px, 63.5px 46.5px, 65.3px 47.1px, 65.5px 47.2px, 66.3px 47.6px, 66.6px 47.7px, 67.2px 48.1px, 67.8px 48.6px, 69.0px 49.8px, 69.8px 52.6px, 69.7px 53.9px, 64.7px 59.8px, 60.0px 64.2px, 59.6px 64.3px, 58.8px 64.2px);
  -webkit-clip-path: polygon(58.8px 64.2px, 57.9px 63.5px, 57.7px 61.9px, 62.0px 57.3px, 66.1px 53.1px, 66.1px 52.6px, 65.7px 51.6px, 65.1px 51.2px, 63.1px 52.9px, 61.0px 54.7px, 58.8px 52.4px, 59.8px 50.9px, 60.6px 50.0px, 59.9px 50.0px, 59.3px 50.1px, 58.7px 50.3px, 58.0px 50.5px, 57.1px 50.7px, 56.4px 50.8px, 55.8px 50.8px, 55.2px 50.2px, 54.7px 49.7px, 54.7px 48.9px, 55.2px 47.7px, 56.5px 47.1px, 57.5px 46.7px, 58.0px 46.6px, 58.5px 46.4px, 60.9px 46.3px, 63.1px 46.3px, 63.5px 46.5px, 65.3px 47.1px, 65.5px 47.2px, 66.3px 47.6px, 66.6px 47.7px, 67.2px 48.1px, 67.8px 48.6px, 69.0px 49.8px, 69.8px 52.6px, 69.7px 53.9px, 64.7px 59.8px, 60.0px 64.2px, 59.6px 64.3px, 58.8px 64.2px);

  background-color: #000000;

  height: 300px;
  transform: scale(1);
  width: 300px; 

  left: 28px;
  margin: 0px 0px;
  top: 350px;
  position: absolute;
  z-index: 20;
}

.dna3 {
  clip-path: polygon(36.9px 55.6px, 34.6px 55.1px, 34.4px 55.0px, 34.2px 54.9px, 34.0px 54.8px, 33.7px 54.7px, 33.5px 54.6px, 33.1px 54.4px, 32.8px 54.2px, 32.4px 53.9px, 31.9px 53.6px, 29.9px 51.6px, 29.6px 51.1px, 29.3px 50.7px, 29.1px 50.4px, 28.9px 50.1px, 28.5px 49.2px, 28.4px 48.8px, 28.2px 48.4px, 28.1px 47.6px, 27.9px 46.9px, 27.9px 43.6px, 28.1px 42.9px, 28.2px 42.1px, 28.5px 40.9px, 28.6px 40.6px, 28.8px 40.2px, 28.9px 39.8px, 29.1px 39.2px, 29.2px 38.6px, 29.3px 38.4px, 29.3px 38.2px, 29.8px 36.6px, 29.9px 36.1px, 30.0px 36.0px, 30.0px 35.8px, 30.4px 34.2px, 30.6px 33.8px, 30.8px 33.2px, 30.9px 32.6px, 31.1px 32.0px, 31.3px 31.4px, 31.4px 31.2px, 31.6px 30.2px, 31.7px 30.0px, 31.7px 29.9px, 31.9px 29.3px, 32.0px 28.8px, 32.1px 28.3px, 32.3px 27.9px, 32.5px 27.3px, 32.6px 26.7px, 32.6px 26.5px, 32.7px 26.3px, 33.0px 25.3px, 33.3px 24.3px, 33.5px 22.8px, 29.7px 26.4px, 26.0px 30.1px, 25.2px 30.1px, 24.0px 29.7px, 23.6px 29.2px, 23.4px 28.9px, 23.4px 27.6px, 23.5px 27.5px, 27.8px 23.0px, 32.2px 18.5px, 32.0px 18.2px, 31.8px 17.8px, 31.4px 17.4px, 31.0px 17.2px, 30.7px 17.0px, 28.8px 18.7px, 27.1px 20.4px, 26.3px 20.4px, 25.5px 20.4px, 25.1px 20.0px, 24.6px 19.4px, 24.5px 19.1px, 24.6px 17.9px, 25.6px 16.8px, 26.4px 15.8px, 25.8px 15.7px, 25.2px 15.9px, 24.6px 16.0px, 24.0px 16.2px, 22.9px 16.6px, 21.6px 16.9px, 20.9px 17.1px, 18.9px 16.7px, 18.4px 14.8px, 18.5px 14.4px, 19.1px 13.8px, 19.3px 13.7px, 20.0px 13.4px, 20.6px 13.2px, 21.2px 13.1px, 21.8px 12.9px, 22.2px 12.8px, 22.6px 12.6px, 23.2px 12.5px, 24.0px 12.3px, 25.0px 12.0px, 25.9px 11.9px, 27.9px 11.9px, 28.8px 12.1px, 29.6px 12.2px, 30.0px 12.3px, 30.5px 12.5px, 30.6px 12.6px, 31.1px 12.8px, 31.6px 13.0px, 31.9px 13.2px, 32.3px 13.4px, 32.7px 13.6px, 33.1px 13.9px, 35.3px 16.1px, 35.5px 16.5px, 35.8px 16.9px, 36.0px 17.3px, 36.2px 17.6px, 36.4px 17.9px, 36.5px 18.2px, 36.6px 18.4px, 36.6px 18.6px, 36.7px 18.7px, 36.9px 19.2px, 37.0px 19.6px, 37.1px 20.3px, 37.3px 21.1px, 37.2px 24.1px, 36.7px 26.1px, 36.7px 26.3px, 36.6px 26.5px, 36.4px 27.1px, 36.3px 27.6px, 36.1px 28.3px, 35.9px 28.9px, 35.8px 29.5px, 35.6px 30.1px, 35.3px 31.1px, 35.0px 32.1px, 34.9px 32.3px, 34.8px 32.6px, 34.7px 33.2px, 34.5px 33.8px, 34.4px 34.3px, 34.3px 34.7px, 34.1px 35.4px, 33.9px 36.0px, 33.6px 37.0px, 33.3px 38.0px, 33.3px 38.2px, 33.2px 38.4px, 33.0px 39.0px, 32.9px 39.5px, 32.7px 40.2px, 32.5px 40.9px, 32.4px 41.4px, 32.2px 42.0px, 31.6px 44.8px, 32.2px 44.3px, 32.9px 43.8px, 33.1px 43.7px, 34.2px 43.7px, 34.4px 43.8px, 35.0px 44.3px, 35.5px 44.7px, 35.5px 45.5px, 35.4px 46.4px, 34.1px 47.7px, 32.8px 49.1px, 33.9px 50.3px, 34.2px 50.5px, 38.4px 46.7px, 42.3px 42.8px, 43.1px 42.8px, 44.0px 42.8px, 44.5px 43.3px, 45.0px 43.8px, 45.0px 44.5px, 45.0px 45.3px, 41.8px 48.5px, 38.6px 51.8px, 40.9px 51.5px, 41.3px 51.4px, 41.8px 51.2px, 42.9px 51.1px, 43.8px 51.0px, 44.2px 51.5px, 44.8px 52.2px, 44.8px 53.4px, 44.7px 53.6px, 43.5px 54.6px, 43.0px 54.7px, 42.9px 54.8px, 42.4px 55.0px, 41.9px 55.1px, 40.8px 55.4px, 36.9px 55.6px);
  -webkit-clip-path: polygon(36.9px 55.6px, 34.6px 55.1px, 34.4px 55.0px, 34.2px 54.9px, 34.0px 54.8px, 33.7px 54.7px, 33.5px 54.6px, 33.1px 54.4px, 32.8px 54.2px, 32.4px 53.9px, 31.9px 53.6px, 29.9px 51.6px, 29.6px 51.1px, 29.3px 50.7px, 29.1px 50.4px, 28.9px 50.1px, 28.5px 49.2px, 28.4px 48.8px, 28.2px 48.4px, 28.1px 47.6px, 27.9px 46.9px, 27.9px 43.6px, 28.1px 42.9px, 28.2px 42.1px, 28.5px 40.9px, 28.6px 40.6px, 28.8px 40.2px, 28.9px 39.8px, 29.1px 39.2px, 29.2px 38.6px, 29.3px 38.4px, 29.3px 38.2px, 29.8px 36.6px, 29.9px 36.1px, 30.0px 36.0px, 30.0px 35.8px, 30.4px 34.2px, 30.6px 33.8px, 30.8px 33.2px, 30.9px 32.6px, 31.1px 32.0px, 31.3px 31.4px, 31.4px 31.2px, 31.6px 30.2px, 31.7px 30.0px, 31.7px 29.9px, 31.9px 29.3px, 32.0px 28.8px, 32.1px 28.3px, 32.3px 27.9px, 32.5px 27.3px, 32.6px 26.7px, 32.6px 26.5px, 32.7px 26.3px, 33.0px 25.3px, 33.3px 24.3px, 33.5px 22.8px, 29.7px 26.4px, 26.0px 30.1px, 25.2px 30.1px, 24.0px 29.7px, 23.6px 29.2px, 23.4px 28.9px, 23.4px 27.6px, 23.5px 27.5px, 27.8px 23.0px, 32.2px 18.5px, 32.0px 18.2px, 31.8px 17.8px, 31.4px 17.4px, 31.0px 17.2px, 30.7px 17.0px, 28.8px 18.7px, 27.1px 20.4px, 26.3px 20.4px, 25.5px 20.4px, 25.1px 20.0px, 24.6px 19.4px, 24.5px 19.1px, 24.6px 17.9px, 25.6px 16.8px, 26.4px 15.8px, 25.8px 15.7px, 25.2px 15.9px, 24.6px 16.0px, 24.0px 16.2px, 22.9px 16.6px, 21.6px 16.9px, 20.9px 17.1px, 18.9px 16.7px, 18.4px 14.8px, 18.5px 14.4px, 19.1px 13.8px, 19.3px 13.7px, 20.0px 13.4px, 20.6px 13.2px, 21.2px 13.1px, 21.8px 12.9px, 22.2px 12.8px, 22.6px 12.6px, 23.2px 12.5px, 24.0px 12.3px, 25.0px 12.0px, 25.9px 11.9px, 27.9px 11.9px, 28.8px 12.1px, 29.6px 12.2px, 30.0px 12.3px, 30.5px 12.5px, 30.6px 12.6px, 31.1px 12.8px, 31.6px 13.0px, 31.9px 13.2px, 32.3px 13.4px, 32.7px 13.6px, 33.1px 13.9px, 35.3px 16.1px, 35.5px 16.5px, 35.8px 16.9px, 36.0px 17.3px, 36.2px 17.6px, 36.4px 17.9px, 36.5px 18.2px, 36.6px 18.4px, 36.6px 18.6px, 36.7px 18.7px, 36.9px 19.2px, 37.0px 19.6px, 37.1px 20.3px, 37.3px 21.1px, 37.2px 24.1px, 36.7px 26.1px, 36.7px 26.3px, 36.6px 26.5px, 36.4px 27.1px, 36.3px 27.6px, 36.1px 28.3px, 35.9px 28.9px, 35.8px 29.5px, 35.6px 30.1px, 35.3px 31.1px, 35.0px 32.1px, 34.9px 32.3px, 34.8px 32.6px, 34.7px 33.2px, 34.5px 33.8px, 34.4px 34.3px, 34.3px 34.7px, 34.1px 35.4px, 33.9px 36.0px, 33.6px 37.0px, 33.3px 38.0px, 33.3px 38.2px, 33.2px 38.4px, 33.0px 39.0px, 32.9px 39.5px, 32.7px 40.2px, 32.5px 40.9px, 32.4px 41.4px, 32.2px 42.0px, 31.6px 44.8px, 32.2px 44.3px, 32.9px 43.8px, 33.1px 43.7px, 34.2px 43.7px, 34.4px 43.8px, 35.0px 44.3px, 35.5px 44.7px, 35.5px 45.5px, 35.4px 46.4px, 34.1px 47.7px, 32.8px 49.1px, 33.9px 50.3px, 34.2px 50.5px, 38.4px 46.7px, 42.3px 42.8px, 43.1px 42.8px, 44.0px 42.8px, 44.5px 43.3px, 45.0px 43.8px, 45.0px 44.5px, 45.0px 45.3px, 41.8px 48.5px, 38.6px 51.8px, 40.9px 51.5px, 41.3px 51.4px, 41.8px 51.2px, 42.9px 51.1px, 43.8px 51.0px, 44.2px 51.5px, 44.8px 52.2px, 44.8px 53.4px, 44.7px 53.6px, 43.5px 54.6px, 43.0px 54.7px, 42.9px 54.8px, 42.4px 55.0px, 41.9px 55.1px, 40.8px 55.4px, 36.9px 55.6px);

  background-color: #000000;

  height: 300px;
  transform: scale(1);
  width: 300px; 

  left: 28px;
  margin: 0px 0px;
  top: 350px;
  position: absolute;
  z-index: 20;
}

.dna4 {
  clip-path: polygon(19.5px 38.5px, 19.1px 38.4px, 18.7px 38.3px, 17.1px 37.8px, 16.9px 37.8px, 16.7px 37.6px, 16.4px 37.5px, 16.1px 37.3px, 15.7px 37.1px, 15.3px 36.8px, 14.8px 36.5px, 13.0px 34.7px, 12.8px 34.4px, 12.7px 34.1px, 12.5px 33.7px, 12.5px 30.3px, 12.9px 29.7px, 17.1px 25.3px, 21.1px 21.3px, 21.8px 21.3px, 22.6px 21.4px, 22.9px 21.5px, 23.5px 22.1px, 23.6px 22.4px, 23.7px 23.5px, 23.6px 23.8px, 19.9px 27.6px, 16.2px 31.5px, 16.1px 31.8px, 16.0px 32.0px, 16.5px 33.0px, 16.9px 33.3px, 17.2px 33.5px, 18.7px 32.2px, 20.0px 30.9px, 20.8px 30.9px, 21.6px 30.9px, 22.1px 31.4px, 22.7px 32.4px, 22.0px 34.1px, 21.5px 34.7px, 23.3px 34.5px, 24.1px 34.3px, 24.6px 34.1px, 26.3px 33.9px, 26.8px 34.0px, 27.1px 34.2px, 27.6px 34.8px, 27.8px 35.3px, 26.3px 37.6px, 25.8px 37.7px, 25.3px 37.9px, 24.8px 38.0px, 24.7px 38.0px, 24.5px 38.1px, 23.9px 38.2px, 23.3px 38.4px, 19.5px 38.5px);
  -webkit-clip-path: polygon(19.5px 38.5px, 19.1px 38.4px, 18.7px 38.3px, 17.1px 37.8px, 16.9px 37.8px, 16.7px 37.6px, 16.4px 37.5px, 16.1px 37.3px, 15.7px 37.1px, 15.3px 36.8px, 14.8px 36.5px, 13.0px 34.7px, 12.8px 34.4px, 12.7px 34.1px, 12.5px 33.7px, 12.5px 30.3px, 12.9px 29.7px, 17.1px 25.3px, 21.1px 21.3px, 21.8px 21.3px, 22.6px 21.4px, 22.9px 21.5px, 23.5px 22.1px, 23.6px 22.4px, 23.7px 23.5px, 23.6px 23.8px, 19.9px 27.6px, 16.2px 31.5px, 16.1px 31.8px, 16.0px 32.0px, 16.5px 33.0px, 16.9px 33.3px, 17.2px 33.5px, 18.7px 32.2px, 20.0px 30.9px, 20.8px 30.9px, 21.6px 30.9px, 22.1px 31.4px, 22.7px 32.4px, 22.0px 34.1px, 21.5px 34.7px, 23.3px 34.5px, 24.1px 34.3px, 24.6px 34.1px, 26.3px 33.9px, 26.8px 34.0px, 27.1px 34.2px, 27.6px 34.8px, 27.8px 35.3px, 26.3px 37.6px, 25.8px 37.7px, 25.3px 37.9px, 24.8px 38.0px, 24.7px 38.0px, 24.5px 38.1px, 23.9px 38.2px, 23.3px 38.4px, 19.5px 38.5px);

  background-color: #000000;

  height: 300px;
  transform: scale(1);
  width: 300px; 

  left: 28px;
  margin: 0px 0px;
  top: 350px;
  position: absolute;
  z-index: 20;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

div.flip-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flip-card-tag {
  position: relative;
  background: #595565;
  border-radius: .4em;
  line-height: 2em;
  padding: 0.125em 0.30em;
  margin: 0.10em 0.25em;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  margin: 35px 30px 75px 30px;
  font-size: 0.75em;
  perspective: 1000px;
}

.flip-card p {
  background-color: #24263D;
  padding: 2.5px 2.5px;
  text-decoration: none;

}

.flip-card a {
  text-decoration: none;
}

.flip-card-inner p {
  background-color: #24263D;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

div.flip-card-front {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-front {
  background-color: #090909;
  color: black;
}

div.flip-card-back {
  display: block;
  justify-content: left;
  vertical-align: middle;
  text-align: left;
}

.flip-card-back {
  background-color: #24263D;
  color: white;
  padding: 10px 10px;
  transform: rotateY(180deg);
}

/**********
Smartphones
**********/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 768x) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 319px) {
/* Styles */

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 767px) {
/* Styles */

  html {
    font-size: 0.9em;
  }

  body {
    font-size: 1em;
  }

  h1 {
    font-size: 4em;
    margin: -0.33em auto 0 auto;
  }

  .name-text .social-media img {
    width: 45%;
  }

  .banner .name-text .social-table .hexagon {
    width: 70%; 
  }

  nav ul {
    padding: 5px;
  }

  nav li {
    display: inline-block;
    margin-left: 1.75vw;
    margin-right: 1.75vw;
    padding-top: 1vw;
  }

  div.hidden {
    display: none;
  }

  hr {
    height: auto;
    width: 66%;
  }

  .about-section {
    font-size: 1.15em;
    margin: 10px 10px 0 10px;
  }

  .summary-section {
    font-size: 1.15em;
    margin: auto 8vw;
  }

  img.about-section {
    display: block;

    float: none;
    margin: 10px auto;
    padding: 0px;
    min-width: 40%;
    max-width: 65%;
  }

  .project-section ul {
    padding: 5px;
  }

  .project-section li {
    margin-left: 4vw;
    margin-right: 4vw;
  }

  .work-section ul {
    padding: 5px;
  }

  .work-section li {
    margin-left: 4vw;
    margin-right: 4vw;
  }

  .banner .background-image img {
    height: auto;
    width: 99vw;
    margin-bottom: -1.3vw;
  }

  .banner .name-text {
    font-size: 2vw;
    margin: 0vw auto 0vw auto;
  }

  .name-text img {
    width: 3.75%;
    height: auto;
    margin: 0.25em auto;
    position: relative;
    display: inline-block; 
    visibility: hidden;
  }

  .banner .name-text .social-table .social-media {
    font-size: 5vw;
    margin: -0.5vw auto 0vw auto;
  } 

  .hexagon {
    margin: 0vw auto 0vw auto;
  }


  .embedly {
    margin:  10px 25px;
    text-align: justify;
  }

  .card .title, .slideshow .title {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
  }

  .shadowR:hover {
    filter: drop-shadow(0 0 20px rgba(228, 46, 48, 1));
    overflow:visible;
  }

  .shadowO {
    filter: drop-shadow(0 0 20px rgba(236, 161, 53, 0));
  }

  .shadowO:hover {
    filter: drop-shadow(0 0 20px rgba(236, 161, 53, 1));
    overflow:visible;
  }

  .shadowY {
    filter: drop-shadow(0 0 20px rgba(221, 204, 40, 0));
  }

  .shadowY:hover {
    filter: drop-shadow(0 0 20px rgba(221, 204, 40, 1));
    overflow:visible;
  }

  .shadowG {
    filter: drop-shadow(0 0 20px rgba(28, 167, 71, 0));
  }

  .shadowG:hover {
    filter: drop-shadow(0 0 20px rgba(28, 167, 71, 1));
    overflow:visible;
  }

  .shadowB {
    filter: drop-shadow(0 0 20px rgba(16, 128, 190, 0));
  }

  .shadowB:hover {
    filter: drop-shadow(0 0 20px rgba(16, 128, 190, 1));
    overflow:visible;
  }

  .shadowP {
    filter: drop-shadow(0 0 20px rgba(200, 50, 136, 0));
  }

  .shadowP:hover {
    filter: drop-shadow(0 0 20px rgba(200, 50, 136, 1));
    overflow:visible;
  }

  div.flip-container {
    margin-top: -2em;
  }

  ol {
    margin: 0px 25px 0px 15px;
  }

  .flip-card-front {
    background-color: #221d1c;
  }

  .flip-card {
    font-size: 1em;
    width: 300px;
    height: 300px;
  }

}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */  
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}


/**********
Tablets
**********/
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1279px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1279px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/**********
Desktops and Laptops
**********/

@media only screen  and (min-width : 768px) {
/* Styles */


  .hidden-1280 {
    display: none;
  }

  .visible-1280 {
    display: block;
  }

  h1 {
    font-size: 1.75em;
    margin: -0.5em auto 0 auto;
  }

  .name-text img {
    margin: 0.25em auto;
    position: relative;
    display: inline-block; 
    visibility: visible;
  }

  nav li {
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw;
    padding-top: 1vw;
  }

  .embedly br {
      display: none;
  }

  .project-section li {
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .banner .background-image img {
    height: auto;
    width: 99vw;
  }

  .banner .name-text {
    font-size: 3vw;
    margin: -0.5vw auto -1vw auto;
  }

  .name-text img {
    margin: 0.5vw auto;
  }

  .banner .name-text .social-table {
    margin: 0.5em auto 0em auto;
    width: 40%; 
  }

  .banner .name-text .social-table .social-media {
    font-size: 2.3vw;
    margin: -0.5vw auto 0vw auto;
  } 

  .hexagon {
    margin: 0vw 0.2=5vw 0vw 0.25vw;
  }
}

@media only screen  and (min-width : 1280px) {
/* Styles */

  img.about-section {
    max-width: 700px;
  } 

  .project-section a {
    font-size: 1.65vw;
  }

  .embedly {
    margin:  50px 125px 0 125px;
  }

  .container a {
    font-size: 1.65vw;
  }

}

/**********
Large Screens
**********/
@media only screen  and (min-width : 1824px) {
/* Styles */
}