/* Hi! Thanks for checking out my vanilla CSS file.
I love CSS too! */

body {
  font-family: 'Eczar', serif;
  color: #10069F;
  font-size: 15px;
  line-height: 27px;
}
a {text-decoration: none;}
.container {
  min-width: 360px;
}

/* NAV */
.nav {
  background-image: linear-gradient(97deg, #00DDE3 0%, #FFFAC8 98%);
  height: 27px;
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.nav a:last-child {margin-right: 23px;}
.nav a {
  text-decoration: none;
  padding: 0 3px;
}
.nav a:hover, .nav a.on, h4 span a:hover {
  background-color: magenta;
  color: white;
}
.nav .divider {
  margin: 0 2vw;
  display: inline-block;
}

/* WELCOME */
.max-container {
  width: 100%;
  background-color: #460046;
  max-height: 500px;
}
#welcome {
  background: url("/img/ddd.jpg") no-repeat center center ;
  background-size: cover;
  height: 500px;
}
.sub-page-header {
  background: url("/img/ddd.jpg") no-repeat center center ;
  background-size: cover;
  height: 97px;
}
#intro {
  padding-top: 127px;
}
.h1-link {
  border-bottom: 17px solid magenta;
  display: inline-block;
  height: 41px;
}
#welcome .slash-break {
  margin-top:47px;
}
#learn-more {
  margin-bottom: 57px;
}
#lp .blue-line {
  height: 57px;
  border-left: 1px solid #00DDE3;
}
h4 span a {
  float: right;
  padding: 0 5px;
  cursor:pointer;
}

/* PORTFOLIO */
#portfolio .write-up {}
#portfolio .slash-break {
  margin-bottom: 57px;
}
.feature img {
  width: 100%;
}
.role-list li:before {
  content:"\002f\002f\00a0";
  color: magenta;
}
.process-flow div{
  display: inline-block;
  text-align: center;
}
.process-flow img {
  max-width: 100px;
}
.skills {text-align: center;}
.skills img {
  width: 22px;
  display: inline-block;
  margin: 0 3px;
}

/* PROCESS */
#process-body {}
.blocks {
  margin-bottom: 30px;
}
.block-item {
  font-family: 'Oswald', sans-serif;
  padding-left: 11px;
  background-image: linear-gradient(137deg, #00DDE3 0%, #FFFAC8 98%);
}
.blocks p {margin-top: 11px;}
.blocks p a {
  font-family: 'Oswald', sans-serif;
}
.blocks p a:hover, .blocks p a:visited {
  background-color: #B8EFE1;
  color: #0000EE;
}
.disciplines {
 margin-bottom: 30px;
}
.discipline-item {
  padding: 11px 11px 7px 11px;
  font-family: 'Oswald', sans-serif;
}
#user-centered {margin-bottom: 30px;}
#cx {
  background:#FBF8E1;
  margin-bottom: 30px;
}
#ux {  background: #DBF6CB;
}
#ui {background:#A6F0D2;}
#inner-ui {background: #46E5DC;}
#vd {
  display: inline-block;
  width: calc(50% - 13px);
  padding-right: 0px;
}
#ixd {
  display: inline-block;
  width: calc(50% - 13px);
  background: #33DADC;
  padding-right: 0px;
}
#unpacking ul li:before {
  content:"\002f\002f\00a0";
  color: inherit;
  padding-left: 11px;
}
#unpacking ul {margin-bottom: 22px;}
#unpacking .pr {margin: 0px 0px 50px 30px;}

/* ABOUT */
#that-list {
  margin-bottom: 57px;
}
#that-list ul {
  padding: 11px;
  background-image: linear-gradient(137deg, #00DDE3 0%, #FFFAC8 98%);
}
#that-list ul li {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 1.38em;
  line-height: 1.62em;
}
#that-list ul li:before {
  content:"\002f\002f\00a0";
  color: white;
}
#that-list .that-icon-list {
  background-image: linear-gradient(137deg, #00DDE3 0%, #FFFAC8 98%);
}
.that-icon-list h4, .process-flow h4 {
  border-left: none;
  border-bottom: none;
  font-size: 10px;
  padding: 0;
  margin-bottom: 7px;
}
.process-flow h4 {
  font-size: 1em;
}
.that-list-col {margin-bottom: 37px;}
.icon-item{
  text-align: center;
  width: 32%;
  display: inline-block;
  margin-top: 11px;
}
.icon-item img {
  height: 50px;
}
#hs, #edu {margin-bottom: 37px;}
#edu a {color: #0000EE;}
#edu a:hover{background-color: #B8EFE1;}
#contact {}
.contact-icons {
  margin: 17px 0 37px 22px;
}
.contact-icons a{
  padding: 16px 0px 23px 3px;
  margin-right: 11px;
  text-decoration: none;
}
.contact-icons a:hover {
  background-image: linear-gradient(180deg, #00DDE3 0%, #FFFAC8 98%);
}
.patent h3 a span {color: #00DDE3;}

#cv {
  margin: 57px 0 0 8px;
}
#download {
  background-image: none;
  margin-top: 57px;
}
#download h5 {margin-right: 37px}
#zb-hs {
  width: 100%;
  max-width: 290px;
  border-left: 8px solid #FFFAC8;
  border-bottom: 5px solid #FFFAC8;
}
#pro-exp {margin-bottom: 37px;}
.entry:first-of-type{
  padding-top: 0px;
}
.entry {
  border-left: 11px solid #00DDE3;
  padding-left: 23px;
  padding-top: 57px;
}
.entry h6 {
  margin-left: -23px;
  border-left: 16px solid #00DDE3;
  padding-left: 7px;
}
.entry h5 span {color: magenta;}
/* FOOT */
#foot .content {
  background-image: linear-gradient(97deg, #00DDE3 0%, #FFFAC8 98%);
  min-height: 47px;
  margin-top: 57px;
  padding: 11px 0 22px 0;
}
#index-foot .content {
  background-image: linear-gradient(97deg, #00DDE3 0%, #FFFAC8 98%);
  min-height: 81px;
  margin-top: 57px;
  padding: 11px 0 22px 0;
}
#index-foot .content p {
  margin: 0 8.33% 11px 8.33%;

}
#foot h6, #index-foot h6 {
  color: #FFF;
  margin: 0;
  text-align: center;
  line-height: 1.38em;
  letter-spacing: 2px;
}
#ssz{
  display: inline;
}

.mono {
  font-family: 'PT Mono', monospace;
}

section .mono{
  text-align: right;
  font-size: .5em;
  opacity: .5;
}

/* TYPE */
p{
  font-size: 1em;
  line-height: 1.62em;
  margin-bottom: 1em;
}
h1 {
  font-size: 3.62em;
  color: #FFF;
  line-height: 1.38em;
}
h1 a {
  color: #FFF;
  text-decoration: none;
}
h1 a:hover {
  color: #00DDE3;
}
h2, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}
h2 {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.38;
	letter-spacing: 1px;
	color: #ff00ff;
  margin-bottom: 11px;
}
h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.38em;
}
h4 {
  letter-spacing: 2.5px;
  color: #ff00ff;
  border-left: 11px solid #00DDE3;
  border-bottom: 1px solid #00DDE3;
  margin-bottom: 27px;
  padding-left: 11px;
}
h5 {
  font-weight: 700;
  color: #10069F;
}
h5 a {
  color: #10069F;
}
h6 {
  font-size: 12px;
	letter-spacing: 3px;
	color: #00dde4;
}
strong {font-weight:700;}
/* GRAPHIC ELEMENTS */
.blue-line {
  height: 100%;
  border-left: 1px solid #00DDE3;
}
.slash-break {
  display: block;
  height: 17px;
  width: 100%;
  color: #00DDE3;
  overflow: hidden;
}
.blue-border {
  border-left: 11px solid #00DDE3;
  padding-left: 11px;
  margin-bottom: 1.62em;
}
.page-jump {
  margin-top: 37px;
  height: 66px;
  background: url("/img/graphic/arrow-right.svg") no-repeat right;
  text-align: right;
  background-position-y:7px;
}
.page-jump h5 {
  float: right;
  margin: 7px 23px 3px 0;
  padding: 0 3px;
}
.page-jump a {
  text-decoration: none;
  cursor: pointer;
}
.page-jump h5.hover{
  color: #FFF;
  background-color: magenta;
}

/* MOBILE BREAK */
@media (max-width: 767px){
  .nav {
    height: 47px;
    padding-top: 11px;
    text-align: center;
  }
  #welcome {
    padding-top: 47px;
  }
  #welcome h1 {
    font-size: 2.38em;
  }
  #welcome .h1-link {
    border-bottom: 11px solid magenta;
    height: 26px;
  }
  #zb-hs {
    width: 38%;
  }
  #pro-exp {margin-left: 8.33%;}
  .block-item {
    padding-left: 11px;
  }
  #user-centered {
    width: 100%;
  }
}