/*font import */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

body{
  font-family: 'Roboto', sans-serif;
  color:#304F62;
  letter-spacing:.01rem;
  background-color:F3F4F6;
  /*background-image:url("../images/med-bg.jpg");*/
}

h1, h2{
  font-family: 'Roboto', sans-serif;
  color:#304F62;
}

h1{
  font-weight:300;
  line-height:56px;
}


p{
  line-height:32px;
}

h2{
  font-size:20px;
  font-weight:500;
  margin:0;
}

.project h6{
  font-weight:700;
}
.project h5{
  font-family: 'Roboto', sans-serif;
  font-size:20px;
  font-weight:700;
  margin-top:32px;
}

.dark-bg{
  background-color:#304F62;
  color:white;
}
p.secondary,span.secondary{
  color:#C0D6E4;
}

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

li.is-active{
  background-color:#304F62;
  border-radius:8px;
  color:fff;
}
footer{
  height:48px;
  background-color:#304F62;
  color:#fff;
  margin-top:48px;
}

footer p{
  line-height:48px;
  text-align:center;
}

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

.leftnav{
  background-color:#fff;
}

.maxheight{
  height:100vh;
}

.back{
  width:100%;
  height:56px;
  border-bottom:1px solid #F3F4F6;
  padding:16px 0;
  margin-bottom:16px;
  font-weight:bold;
}

.clearfloat{
  clear:left;
  clear:right;
}
img.page-logo{
  margin:0 0 16px 0;
  width:72px;
}

img.page-logo-small{
  width:32px;
  float:right;
  margin-right:8px;
  margin-bottom:12px;
  margin-top:-4px;
}
@media screen and (max-width: 39.9375em) {

  img.page-logo{
    width:48px;
    float:left;
    margin-right:16px;
    margin-bottom:12px;
  }

  img.page-logo-small{
    width:32px;
    float:right;
    margin-right:12px;
    margin-bottom:16px;
    margin-top:-4px;
  }
}

.project{
  padding:24px;
  max-width:850px;
  /*background-color:#333;
  color:#fff;*/
}

/*photoswipe*/
.my-gallery {
  width: 100%;
  float: left;
}
.my-gallery img {
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid #C0D6E4;
}

.my-gallery figure {
  display: block;
  float: left;
  margin: 8px;
  width:29%;
  height:auto;
}

.moreproj{
  display: inline-block; margin:16px;
}

@media screen and (max-width: 39.9375em) {
  .my-gallery figure{
    width:43%;
  }

}

.my-gallery figcaption {
  display: none;
}

@media screen and (max-width: 39.9375em) {
  h1{
    font-size:32px;
  }
  h5{
    margin:0;
    padding:0 0 4px 0;
    font-weight:500;
    }
  .back{
    background-color:#fff;
    height:56px;
    width:100%
    text-align:center;
  }
}

.scrollblock{
  width:auto;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll{
  float: none;
  display:inline-block;
}

.scrollblock::-webkit-scrollbar {
  display: none; }

.tabs-content{
  background:none;
  border:none;
  margin:0;
  padding:0;
}

.tabs-content.vertical{
  background:none;
  border:none;
}


.tabs-panel{
  margin-top:16px;
  margin-left:0;
  padding:0;
}

.tabs-title > a {
  padding: 1rem 1.2rem;
  font-size: 1rem;
  line-height: 1;
  color: #304F62;}

  [data-whatinput='mouse'] .tabs-title > a {
    outline: 0; }
  .tabs-title > a:hover {
    background: #F3F4F6;
    color: #304F62;
    border-radius:8px;
    }
  .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
    background: #304F62;
    color: #fff;
    border-radius:8px;
    border:none;
  }
.disabled{
      opacity:0.5;
  }

  @media screen and (max-width: 39.9375em) {
    .tabs-title > a {
      background:#F3F4F6;
      font-size: .9rem;
      border-radius:8px;}
      .tabs-title > a:hover {
      .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
        border:none;}
    }
    .disabled{
      opacity:0.5;
    }
}