/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* css reset */
/* _-_-_-_- MASTER STYLE VARIABLES -_-_-_-_ */
/* INTERFACE - COLORS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* HEADER & LOGO
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* NAV MENU BAR
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* FONT FAMILY - TEXT
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* FOOTER
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* END OF VARIABLES
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/
/* branding etc. */
/*_-_-_-_-_-_-_|  PHONE  |_-_-_-_-_-_-_-*/
/*                                      */
/*      [   SMALL SCREEN RULES   ]      */
/*                                      */
/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
/* - Mitch-Solo Tatafu - 2020 - */
/* prevents font resize @ orientation change */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* natural box layout model */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* BODY
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
body {
  font-family: "Didact+Gothic", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: #333a45;
  background-color: #454545; }

/* NAVIGATION
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
nav {
  background-color: #131313;
  height: 40px;
  position: sticky;
  z-index: 1000;
  top: 0; }
  nav ul {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap; }
  nav ul li {
    float: left;
    width: 25%; }
  nav #nav_button_2 {
    border-left: 1px solid #21252C; }
  nav #nav_button_3 {
    border-left: 1px solid #21252C; }
  nav #nav_button_4 {
    border-left: 1px solid #21252C; }
  nav ul li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3); }
  nav ul li.active a {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2); }
  nav div.active_bar {
    height: 2px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    background-color: #7390BD; }
  nav ul li a {
    font-family: "Coda", sans-serif;
    font-size: 0.6em;
    font-weight: 400;
    letter-spacing: 0;
    color: #C6DCFF;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    display: block;
    line-height: 36px;
    padding-top: 4px;
    transition: background 0.2s ease, color 0.2s ease; }

/* HEADER
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
header {
  height: 400px;
  margin: 0 auto;
  background-image: url("../images/png/0_da_INTERPIC.png");
  background-color: #a7a7a7;
  background-repeat: no-repeat, repeat-x;
  background-attachment: scroll;
  background-position: 40% 0%;
  background-size: 180% auto; }
  header div.header_da_branding {
    position: relative;
    height: 400px; }
    header div.header_da_branding img.header_da_logo {
      display: block;
      height: 160px;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -80%); }
    header div.header_da_branding div.header_video_frame {
      object-fit: fill;
      width: 100%;
      height: 100%; }
      header div.header_da_branding div.header_video_frame video.header_video {
        object-fit: cover;
        display: block;
        height: 120%;
        width: 120%;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-52%, -100%);
        mix-blend-mode: overlay; }
    header div.header_da_branding h2.header_da_cta {
      font-family: "Didact+Gothic", sans-serif;
      font-size: 1.25rem;
      font-weight: 200;
      letter-spacing: brand_cta_letter_spacing;
      text-align: center;
      display: block;
      color: #7390BD;
      width: 100%;
      height: 64px;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 200%); }
  header a:link {
    text-decoration: none; }
  header a:visited {
    text-decoration: none; }
  header a:hover {
    text-decoration: none; }
  header a:active {
    text-decoration: none; }

/* MAIN CONTENT
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
main {
  width: 100%;
  /*---------------- landing ----------------*/
  /*---------------- case studies ----------------*/
  /*---------------- about, skills, and contact ----------------*/
  /*---------------- about ----------------*/
  /*---------------- skills ----------------*/
  /*---------------- contact ----------------*/ }
  main a:link {
    text-decoration: none; }
  main a:visited {
    text-decoration: none; }
  main a:hover {
    text-decoration: none; }
  main a:active {
    text-decoration: none; }
  main h1 {
    font-size: 2em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #333a45;
    margin: 2rem 0 2rem; }
  main h1.white_h1 {
    font-size: 2em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #fff;
    margin: 2rem 0 2rem; }
  main h2 {
    font-size: 1.2em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #333a45;
    margin: 0; }
  main h3 {
    font-size: 2em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #a77d9b;
    margin: 0 0 2rem; }
  main h4 {
    font-size: 2em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #a77d9b;
    margin: 2rem 0 2rem; }
  main h4.about_quotes {
    font-size: 1.5em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #a77d9b;
    margin: 2rem 0 2rem; }
  main h5 {
    font-size: 2em;
    font-weight: 400;
    font-family: "Coda", sans-serif;
    color: #333a45;
    margin: 4rem 0 2rem; }
  main h6 {
    font-size: 2em;
    font-weight: 200;
    font-family: "Coda", sans-serif;
    color: #a77d9b;
    margin: 4rem 0 2rem; }
  main p {
    font-size: 1.25rem;
    font-weight: 400;
    color: #333a45;
    line-height: 1.5rem;
    margin: 0 0 2rem;
    word-spacing: .16em; }
  main p.white_p {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.5rem;
    margin: 0 0 2rem; }
  main ul.examplelist {
    line-height: 1.5rem;
    list-style-type: circle;
    padding-left: 3rem;
    margin: 0 0 2rem; }
  main ol.examplelist {
    line-height: 1.5rem;
    padding-left: 3rem;
    margin: 0 0 2rem; }
  main li {
    margin: 0 0 1rem; }
  main .skill_name {
    font-family: "Coda", sans-serif;
    color: #a77d9b;
    margin: 0; }
  main #responsive-image-output {
    width: 100%;
    height: auto; }
  main #responsive-image-hubble {
    width: 100%;
    height: auto; }
  main #responsive-image-tiki {
    width: 100%;
    height: auto; }
  main #responsive-image-fossil {
    width: 100%;
    height: 500px; }
  main #responsive-pano-vss-intro {
    width: 100%;
    height: 500px; }
  main #responsive-pano-vss-test {
    width: 100%;
    height: 700px; }
  main div.panel_image_load_container {
    width: 0px;
    height: 0px; }
  main img.panel_image_load {
    width: 0px;
    height: 0px; }
  main div.panel_1 {
    padding-right: 5%;
    padding-left: 5%;
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: #fff; }
    main div.panel_1 div.panel_1_content .panel_1_image {
      background-image: url("../images/jpg/content_doom_1-2_boxart.jpg");
      background-repeat: no-repeat, repeat-x;
      background-position: center;
      background-size: 100% auto;
      width: 100%;
      height: 15.5rem;
      margin-bottom: 2rem; }
  main div.panel_2 {
    padding-right: 5%;
    padding-left: 5%;
    background-image: url("../images/jpg/bg_doomguy_n_daisy.jpg"), linear-gradient(to bottom, #413540, #332e3b);
    background-repeat: no-repeat, repeat-x;
    background-position: center;
    background-color: #1b191e;
    background-size: 100% auto; }
    main div.panel_2 div.panel_2_content {
      padding-top: 6rem;
      padding-bottom: 6rem; }
  main div.panel_3 {
    padding-right: 5%;
    padding-left: 5%;
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: #fff; }
    main div.panel_3 div.panel_3_content .panel_3_image {
      background-image: url("../images/jpg/3_main_case_doom_1_doomguy.jpg");
      background-repeat: no-repeat, repeat-x;
      background-position: center top;
      background-size: 100% auto;
      width: 100%;
      height: 17rem;
      margin-bottom: 2rem; }
  main h1.panel_dark_h1 {
    font-size: 2em;
    font-weight: 200;
    font-family: "Coda", sans-serif;
    color: #333a45;
    margin: 0.5rem 0 2rem; }
  main h1.panel_light_h1 {
    font-size: 2em;
    font-weight: 200;
    font-family: "Coda", sans-serif;
    color: #fff;
    text-shadow: 3px 3px 5px #231e25;
    margin: 0.5rem 0 2rem; }
  main p.panel_dark_p {
    font-size: 1.25rem;
    font-weight: 400;
    color: #333a45;
    line-height: 1.5rem;
    word-spacing: .16em;
    margin: 0; }
  main p.panel_light_p {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    text-shadow: 3px 3px 5px #231e25;
    line-height: 1.5rem;
    word-spacing: .16em;
    margin: 0; }
  main i.read_more {
    font-size: 1.5rem;
    font-weight: 200; }
  main div.case_study_styles_main {
    width: 100%;
    padding-top: 6rem;
    padding-right: 5%;
    padding-bottom: 4rem;
    padding-left: 5%; }
  main img.case_680 {
    display: block;
    max-width: 680px;
    width: 100%;
    margin: 4rem auto 4rem; }
  main img.case_banner {
    display: block;
    max-width: 100%;
    margin: 4rem auto 4rem; }
  main .painpoint {
    color: #c84844;
    margin: 0 0 1rem; }
  main div.iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 4rem; }
  main div.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  main .doom_site_container {
    width: 100%;
    max-width: 64rem;
    max-height: 700px;
    margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1); }
  main .doom_site_iframe {
    position: relative; }
  main .doom_site_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  main div.about_skills_contact_main {
    width: 100%;
    padding-top: 4rem;
    padding-right: 5%;
    padding-bottom: 4rem;
    padding-left: 5%; }
  main div.timeline {
    max-width: 64rem;
    padding: 0 0 4rem; }
    main div.timeline img.timeline_mobile {
      width: 100%; }
    main div.timeline img.timeline_desktop {
      width: 0px; }
  main iframe {
    margin: 0; }
  main div.example_poloroid {
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #F1F6FF; }
  main div.example_poloroid_text {
    font-size: 0.8rem;
    font-weight: 200;
    color: #333a45;
    padding: 1rem; }
  main div.poloroid_vs {
    text-align: center;
    margin: 1rem 0; }
  main div.about_vr_padding_top {
    padding-top: 2rem; }
  main div.contact_styles_main {
    margin: 0 auto;
    width: 100%;
    background-image: url("../images/jpg/5_contact_back_image.jpg");
    background-color: #fff;
    background-repeat: no-repeat, repeat-x;
    background-position: 65% 100%;
    background-size: 60rem auto; }
  main div.contact_content {
    padding-top: 2rem;
    padding-bottom: 4rem; }
  main p.contact_p_styles {
    text-shadow: 0px 0px 1px #fff, 0px 0px 2px #fff, 0px 0px 4px #fff, 0px 0px 8px #fff, 0px 0px 16px #fff, 0px 0px 32px #fff; }

/* FOOTER
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
footer {
  width: 100%;
  background-color: #131313; }
  footer p {
    text-align: center;
    font-size: 0.8em;
    padding: 1em 0 1em 0;
    color: #C6DCFF; }

/* MISCELLANEOUS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

/* END OF SMALL SCREEN
[][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/
@media only screen and (min-width: 48rem) {
  /*_-_-_-_-_-_-|   TABLET  |-_-_-_-_-_-_-*/
  /*                                      */
  /*      [   MEDIUM SCREEN RULES  ]      */
  /*                                      */
  /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
  /* - Mitch-Solo Tatafu - 2020 - */
  /* BODY
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  /* NAVIGATION
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  nav {
    padding-right: 5%;
    padding-left: 5%;
    margin-left: 0;
    margin-right: auto; }
    nav ul {
      max-width: 64rem;
      margin: auto 0; }
    nav ul li {
      width: auto; }
    nav #nav_button_1 {
      border-left: 1px solid #21252C; }
    nav #nav_button_4 {
      border-right: 1px solid #21252C; }
    nav ul li a {
      font-size: 0.6em;
      padding: 0 1.98em;
      padding-top: 4px; }
    nav div.active_bar {
      height: 2px;
      width: 100%;
      background-color: #7390BD; }

  /* HEADER
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  header {
    background-position: 45% 5%;
    background-size: 140% auto; }
    header div.header_video_frame {
      width: 100%;
      height: 100%; }
      header div.header_video_frame video.header_video {
        width: 110%;
        height: 90%; }

  /* MAIN CONTENT
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  main {
    /*---------------- landing ----------------*/
    /*---------------- case studies ----------------*/
    /*---------------- about, skills, and contact ----------------*/
    /*---------------- about ----------------*/
    /*---------------- skills ----------------*/
    /*---------------- contact ----------------*/ }
    main div.panel_1 {
      margin: auto 0; }
      main div.panel_1 div.panel_1_content {
        max-width: 64rem;
        margin: 0 auto; }
        main div.panel_1 div.panel_1_content .panel_1_image {
          float: left;
          width: 38%;
          margin-right: 5%;
          margin-bottom: 5rem; }
    main div.panel_2 {
      margin: auto 0;
      background-size: 100% auto;
      background-color: #000; }
      main div.panel_2 div.panel_2_content {
        max-width: 64rem;
        margin: 0 auto;
        width: 60%; }
    main div.panel_3 {
      margin: auto 0; }
      main div.panel_3 div.panel_3_content {
        max-width: 64rem;
        margin: 0 auto; }
        main div.panel_3 div.panel_3_content .panel_3_image {
          float: right;
          width: 50%;
          margin-left: 5%;
          margin-bottom: 4rem; }
    main div.about_skills_contact_main div.about_skills_contact_content {
      margin-left: 5%;
      max-width: 64rem;
      padding-right: 0rem;
      padding-left: 0rem;
      margin: auto 0; }
    main div.about_skills_contact_main div.blog article {
      float: left;
      width: 33.3333333333%;
      padding-right: 2.5%; }
    main div.about_skills_contact_main div.blog article:nth-child(2n+1) {
      clear: none; }
    main div.about_skills_contact_main div.blog article:nth-child(3n+1) {
      clear: left; }
    main div.timeline {
      max-width: 64rem; }
    main div.contact_styles_main {
      background-position: 75% 100%; }
    main div.contact_content {
      margin-left: 5%;
      max-width: 64rem;
      padding-right: 0rem;
      padding-left: 0rem;
      padding-top: 2rem;
      padding-bottom: 4rem;
      margin: auto 0; }

  /* FOOTER
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  /* MISCELLANEOUS
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  /* END OF MEDIUM SCREEN
  [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/ }
@media only screen and (min-width: 64rem) {
  /*_-_-_-_-_-_-|  DESKTOP  |-_-_-_-_-_-_-*/
  /*                                      */
  /*      [   LARGE SCREEN RULES   ]      */
  /*                                      */
  /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
  /* - Mitch-Solo Tatafu - 2020 - */
  /* BODY
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  /* NAVIGATION
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  nav {
    padding-right: 5%;
    padding-left: 5%; }
    nav ul {
      max-width: 64rem;
      margin: 0 auto; }

  /* HEADER
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  header {
    background-position: 50% 10%;
    background-size: 100% auto;
    background-attachment: fixed; }
    header video.header_video {
      width: 100%;
      height: 50%; }

  /* MAIN CONTENT
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  main {
    /*---------------- landing ----------------*/
    /*---------------- case studies ----------------*/
    /*---------------- about, skills, and contact ----------------*/
    /*---------------- about ----------------*/
    /*---------------- skills ----------------*/
    /*---------------- contact ----------------*/ }
    main div.panel_1 {
      background-color: #fff;
      transition: background 0.2s ease; }
      main div.panel_1 div.panel_1_content .panel_1_image {
        transition: background 0.2s ease;
        background-image: url("../images/jpg/content_doom_1-2_boxart.jpg");
        background-size: 100% auto;
        margin-bottom: 4rem; }
    main div.panel_1:hover {
      background-color: #fff;
      transition: background 0.4s ease; }
      main div.panel_1:hover div.panel_1_content .panel_1_image {
        transition: background 0.8s ease;
        background-image: url("../images/jpg/content_doom_1-2_boxart.jpg");
        background-size: 115% auto; }
    main div.panel_2 {
      transition: background 0.2s ease;
      background-image: url("../images/jpg/bg_doomguy_n_daisy.jpg");
      background-attachment: fixed;
      background-size: 100% auto;
      background-color: #000; }
      main div.panel_2 div.panel_2_content h1.panel_light_h1 {
        text-shadow: 6px 6px 12px #33394b;
        transition: color 0.2s ease; }
      main div.panel_2 div.panel_2_content h2.panel_light_h2 {
        text-shadow: 6px 6px 12px #33394b;
        transition: color 0.2s ease; }
      main div.panel_2 div.panel_2_content p.panel_light_p {
        text-shadow: 6px 6px 12px #33394b;
        transition: color 0.2s ease; }
    main div.panel_2:hover {
      transition: background 0.8s ease;
      background-image: url("../images/jpg/bg_doomguy_n_daisy.jpg");
      background-size: 120% auto; }
      main div.panel_2:hover div.panel_2_content h1.panel_light_h1 {
        text-shadow: 3px 3px 6px #000;
        transition: color 0.4s ease; }
      main div.panel_2:hover div.panel_2_content h2.panel_light_h2 {
        text-shadow: 3px 3px 6px #000;
        transition: color 0.4s ease; }
      main div.panel_2:hover div.panel_2_content p.panel_light_p {
        text-shadow: 3px 3px 6px #000;
        transition: color 0.4s ease; }
    main div.panel_3 {
      background-color: #fff;
      transition: background 0.2s ease; }
      main div.panel_3 div.panel_3_content .panel_3_image {
        transition: background 0.2s ease;
        background-image: url("../images/jpg/3_main_case_doom_1_doomguy.jpg"); }
    main div.panel_3:hover {
      background-color: #fff;
      transition: background 0.4s ease; }
      main div.panel_3:hover div.panel_3_content .panel_3_image {
        transition: background 1s ease;
        background-image: url("../images/jpg/3_main_case_doom_1_doomguy_hover.jpg");
        background-position: 20% 10%;
        background-size: 115% auto; }
    main div.case_study_styles_main div.case_study_styles {
      margin-left: 5%;
      max-width: 64rem;
      padding-right: 0rem;
      padding-left: 0rem;
      margin: auto 0; }
    main div.about_skills_contact_main div.about_skills_contact_content {
      margin-left: 5%;
      max-width: 64rem;
      padding-right: 0rem;
      padding-left: 0rem;
      margin: auto 0; }
    main div.timeline {
      max-width: 64rem; }
      main div.timeline img.timeline_mobile {
        width: 0px; }
      main div.timeline img.timeline_desktop {
        width: 100%; }
    main div.contact_styles_main {
      background-position: 100% 100%; }

  /* FOOTER
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  /* MISCELLANEOUS
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
  /* END OF LARGE SCREEN
  [][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/ }