/*font import */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/*html{
  scroll-behavior: smooth;
}*/
body{
  font-family: 'Roboto', sans-serif;
  color:#304F62;
  letter-spacing:.01rem;
}

h1, h2{
  font-weight:bold;
}

h1{
  font-size:48px;
}

h2{
  font-size:36px;
}
h4{
  font-family: 'Roboto', sans-serif;
  font-size:24px;
  font-weight:700;
  margin-top:-16px;
  padding:0;
}

h5{
  font-family: 'Roboto', sans-serif;
  font-size:20px;
  font-weight:100;
  margin-top:4px;
  margin-bottom:0;
}

p.secondary,span.secondary{
  color:#C0D6E4;
}

ul.stats{
  list-style:none;
  margin-left:0;
}
ul.stats li{
  margin-bottom:6px;
}

hr.light{
  border:#F3F4F6 solid 1px;
}

/*--button styles--*/
a.light-fill{
  border-radius:50px;
  background-color:#fff;
  color:#304F62;
  font-weight:700;
}

a.light-outline{
  border-radius:50px;
  color:#fff;
  background-color:transparent;
  border:1px solid white;
}

a.clear.button.dark{
  color:#fff;
}

a.light-outline:hover{
  background-color:rgba(255,255,255,.09);
}

a.light-fill:hover{
  background-color:rgba(255,255,255,.8);
  color:#304F62;
}


a.dark-outline{
  border-radius:50px;
  background-color:transparent;
  color:#304F62;
  border:1px solid #304F62;
}
a.dark-outline:hover{
  color:#304F62;
  background-color:transparent;
  border:1px solid #304F62;
}

footer{
  height:48px;
  background-color:#304F62;
  color:#fff;
}
footer p{
  line-height:48px;
  text-align:center;
}
.dark-bg{
  background-color:#304F62;
  color:white;
}

.grid-container{
  max-width:860px;
}

.leftnav{
  height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
background-color:#000;
}
.secondary-dark{
  color:#C0D6E4;
}


.splash{
   width:230px;
   float:right;
}




/*--Stat bar Styles--*/
.progress {
  background: #F3F4F6;
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0;
  display: flex;
  height: 14px;
  width: 95%;
  margin-bottom:16px;
}

.progress-value{
  border-radius: 100px;
  background: rgb(48,79,98);
  height: 12px;
  width: 0;
}

.webd{animation: webd 2s normal forwards;}
@keyframes
webd {
  0% { width: 0; }
  100% { width:98%; }
}

.appd{animation: appd 2s normal forwards;}
@keyframes appd {
  0% { width: 0; }
  100% { width:90%; }
}

.dessys {
  animation: dessys 2s normal forwards;
  background-color:#8295A1;
}
@keyframes dessys {
  0% { width: 0; }
  100% { width: 90%; }
}

.restest {
  animation: restest 2s normal forwards;
  background-color:#C1CAD0;
}
@keyframes restest {
  0% { width: 0; }
  100% { width: 75%; }
}

.sketch {animation: sketch 2s normal forwards;}
@keyframes sketch {
  0% { width: 0; }
  100% { width: 99%; }
}

.invision {animation: invision 2s normal forwards;}
@keyframes invision {
  0% { width: 0; }
  100% { width: 97%; }
}

.figma {
  animation: figma 2s normal forwards;
  background-color:#8295A1;
}
  @keyframes figma {
  0% { width: 0; }
  100% { width: 90%; }
}

.adobe {
  animation: adobe 2s normal forwards;
  background-color:#C1CAD0;
}
@keyframes adobe {
  0% { width: 0; }
  100% { width: 85%; }
}
/*--end  stat bar styles--*/



.chevron{
  width:32px;
  height:32px;
}
/*--timeline styles--*/
.timeline {
  margin-top:56px;
  margin-left:-250px;
  margin-right:24px;
  background: #fff;
  padding: 0px;
  position: relative;
}
.timeline:before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(33% - 1px);
  bottom: 95px;
  width: 1px;
  background: #888;
}
.timeline:after {
  content: "";
  display: table;
  clear: both;
}
.entry {
  clear: both;
  text-align: left;
  position: relative;
}
.entry .title {
  margin-bottom: .5em;
  float: left;
  width: 33%;
  padding-right: 30px;
  padding-top:0px;
  text-align: right;
  position: relative;
}
.entry .title:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid #888;
  background-color: #fff;
  border-radius: 100%;
  top:28%;
  right: -8px;
  z-index: 99;
}
.entry .title h3 {
  margin: 0;
  font-size: 100%;
}
.entry .title p {
  margin: 0;
  font-size: 100%;
}
.entry .body {
  margin: 0 0 3em;
  float: right;
  width: 66%;
  padding-left: 30px;
}
.entry .body p {
  line-height: 1.4em;
}
.entry .body p strong{
  font-weight:medium;
}
.entry .body p:first-child {
  margin-top: 0;
  font-weight: 400;
}
.entry .body ul {
  color: #aaa;
  padding-left: 0;
  list-style-type: none;
}
.entry .body ul li:before {
  content: "–";
  margin-right: .5em;
}

.timeline-right p{
  display:inline-block;
  text-align:right;
  margin:10px 16px 0 0;
  float:right;
}
.timeline-right a{
  float:right;
}
.company-name{
  float:left;
}
.timeline{
  margin-left:-260px;
}
span.subtext{
  font-size:14px;
  margin-top:-50px;
}
a.timeline-title{
  color:#304F62;
}
/*--end timeline styles--*/

/* Medium and up */
@media screen and (min-width: 40em) {
  span.nobr br{
    display:none;
  }
  .dark-bg{
    padding:50px;
  }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em)
{
  .timeline{
    margin-left:-160px;
  }
}
@media screen and (max-width: 39.9375em) {

  .splash{
    float:left;
    margin:16px;
  }
  .grid-container{
    padding:24px;
  }
  .progress{
    width:100%;
  }

  .project{
    clear:right;
    margin-top:150px;
  }
  .tabs{
    margin-bottom:100px;
  }
  .timeline-right p{
    text-align:left;
    clear:both;
  }
  .timeline-right a{
    text-align:left;
    clear:both;

  }
  p.company-name{
    display:inline;
    clear:both;
    font-size:18px;

  }
  span.subtext{
    font-size:16px;
    margin-top:100px;
  }
  .chevron{
    margin-top:-4px;
    padding:0;
    width:24px;
  }
  .timeline{
    margin:16px 0 0 -32px;
  }

  .timeline:before {
    top: 16px;
    bottom: 115px;
  }

  a.timeline-title{
    color:#304F62;
    display:block;
    margin-top:10px;
  }

  img.splash{
    width:160px;
    margin-top:-20px;
  }
  .splash-container h1{
    font-size:40px;
  }

  .splash-container h5{
    font-size:18px;
  }

  .splash-container p{
    font-size:16px;
  }
  a.light-fill{
    width:100%;
    margin-bottom:0;
    margin-top:8px;
  }
  a.light-outline{
    width:100%;
    margin-top:-12px;
  }
  h4{
    margin-top:24px;
  }
  footer{
    height:48px;
    background-color:#304F62;
    color:#fff;
    margin-top:24px;
  }

}
/* xsmall*/
@media screen and (max-width: 22em) {

  img.splash{
    width:120px;
    margin-top:-20px;
  }
  .splash-container h1{
    font-size:32px;
  }

  .splash-container h5{
    font-size:16px;
  }

  .splash-container p{
    font-size:15px;
  }
  a.light-fill{
    margin-top:32px;
  }
  a.light-outline{
    margin-top:-12px;
  }

  .timeline{
    margin:16px 0 0 -110px;
  }
  .entry .title img {
    display:none;
  }
  .body{
    margin:-16px 0 0 0;
  }
  a.timeline-title{
    display:block;
    margin-top:-4px;
    margin-left:-15px;
  }
  .timeline:before {
    top: 16px;
    bottom: 135px;
  }

}


a.button.disabled{
  border-radius:50px;
  background-color:transparent;
  color: rgba(48, 79,98, .6);
  border:1px solid rgba(48, 79,98, .4);
  cursor:default;
  opacity:100%;
}
a.button.disabled:hover{
  border-radius:50px;
  background-color:transparent;
  color: rgba(48, 79,98, .65);
  border:1px solid rgba(48, 79,98, .7);
  cursor:default;
  opacity:100%;
}

a.label{
  background-color:#efefef;
  color:rgba(0,0,0,.65);
 /*border:1px solid rgba(48, 79,98, .7)*/
  border-radius:8px;
  padding:8px 12px;
  margin-top:10px;
  font-size:0.95em;
  letter-spacing:.03em;
  cursor:default;
}