*{
  margin:0;
}

html{
  font-size: 1.5vw;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
}

h1{
  font-family: 'Raleway', sans-serif;
  font-size:3rem;
  font-weight: 300;
}

h2{
  font-family: 'Raleway', sans-serif;
  font-size:2rem;
  font-weight: 300;
}

h3{
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

a{
  color:#0f6fc6;
  transition: 0.2s all;
}

a:hover{
  color:#de2514;
}

.deco{
  text-decoration: underline;
  text-decoration-color: #0f6fc6;
  text-decoration-style: solid;
}

.icon-small{
  width:1rem;
  height:1rem;
}

.icon{
  width:2rem;
  height:2rem;
}

.icon-link:hover{
  opacity:0.5;
}

#name{
  padding-top:10%;
  padding-bottom:5%;
}

#bio{
  padding-left:20%;
  padding-right: 20%;
  padding-bottom:10%;
}

#mediabox{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding:0.5rem 0.5rem;
  width:60%;
  position: absolute;
  left:50%;
  right:50%;
  margin-left:-30%;
  margin-right:-30%;
  bottom:10%;
  z-index:100;
  background-color:rgba(255,255,255,0.9);
  border-radius:2px;
}

#mediabox div{
  text-align:center;
}

#skills{
  border-top:2px solid #0f6fc6;
  background-color:#EEE;
  padding-top:5%;
  padding-bottom:5%;
}

#awards{
  border-top:2px solid #0f6fc6;
  background-color:#FFF;
  padding-top:5%;
  padding-bottom:5%;
}

#education{
  border-top:2px solid #0f6fc6;
  background-color:#EEE;
  padding-top:5%;
  padding-bottom:5%;
}

#work{
  border-top:2px solid #0f6fc6;
  background-color:#FFF;
  padding-top:5%;
  padding-bottom:5%;
}

#projects{
  border-top:2px solid #0f6fc6;
  background-color:#FFF;
  padding-top:5%;
  padding-bottom:5%;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  border-top:2px solid #0f6fc6;
  border-bottom:2px solid #0f6fc6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: sticky;
  top:0;
  z-index: 999;
}

.navitem {
  float: left;
}

.navitem-right {
  float: right;
}

.navitem a {
  display: block;
  color: #212121;
  text-align: center;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0.75rem;
  text-decoration: none;
}

.navitem a::after{
  content: '';
  width: 0;
  display: block;
  height: 2px;
  transition: width 0.3s;
  background: #de2514 !important;
}

.navitem a:hover::after{
  width: 100%;
}

.navitem a:hover{
  color: #de2514 !important;
}

.content{
  padding-left:5%;
  padding-right:5%;
  position:relative;
}

.row{
  display:flex;
}

.body{
  padding-left:10%;
  padding-right:5%;
  padding-top:2%;
  padding-bottom:2%;
}

.slim-body{
  padding-left:5%;
  padding-right:5%;
  padding-top:2%;
  padding-bottom:2%;
}

.block{
  padding-right:5%;
  margin-bottom:5%;
}

.imgblock{
  padding:1rem 1rem 1rem 1rem;
}

.imgblock img{
  width:100%;
  height:auto;
  border:1px solid #ccc;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.imgblock img:hover{
  border:1px solid #777;
}

.droptext{
  border-left: 3px solid #de2514;
  padding-left: 0.5rem;
}

.subtext-award{
  font-size: 0.5rem;
  margin-left: 0.5rem;
}

.skill-text{
  transition: 1s all;
  font-size: 0;
}

.skill-show-more{
  font-size: 0.5rem;
}

.skill-show-more:hover{
  cursor: pointer;
}

.skill-name{
  display: inline;
}

.column-25{ flex:25%; }
.column-3{ flex:30%; }
.column-4{ flex:40%; }
.column-5{ flex:50%; }
.column-6{ flex:60%; }
.column-7{ flex:70%; }

@media only screen and (max-width: 575px) {
  html{
    font-size: 3vw;
  }
  .collapse-col{ flex:100%; }
  .collapse{display:block;}
  .imgblock{
    display:block;
    text-align:center;
  }
  .imgblock img{
    width:100%;
    height:auto;
    max-height:15rem;
    padding:0;
    margin-bottom:5%;
    object-fit:cover;
  }
  .block{
    margin-bottom:5%;
  }
  #title-left{
    flex:80%;
  }
  #title-right{
    flex:20%;
  }
  #title-background{
    background-size:auto 100% !important;
  }
  #mediabox{
    padding:0.5rem 0.5rem 0.5rem 0.5rem;
    width:50%;
    position: absolute;
    left:50%;
    margin-left:-25%;
    bottom:10%
    top:10%;
    height:80%;
  }
  .mediarow{
    display: block;
    height:100%;
  }
  .mediacol{
    height:20%;
  }
  .icon-scale{
    height:80%;
    width:auto;
  }
  #navbar{
    display:none;
  }
}