body {
  background-color:#232a32;;
}

#header {
  animation-delay: 0s;
  animation-duration: 1s;
}

#resource .row {
  width:1200px;
  max-width:100vw;
  margin:0 auto;
  color:#000;
  padding:3rem 2rem;
  text-align:center;
  padding-bottom:5rem;

}

.preloader .container {
  height:600px !important;
  max-height:85vh !important;
  display:flex;
  align-items: center;
}

.preloader .container img {
  animation-delay:0.5s !important;
  animation-duration:1s;
  width:1920px;
  height:1280px;
}

div.preloader {
  background:none;
  background-color:#0B4B87;
  height:600px !important;
  max-height:85vh !important;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.about {
  animation-delay: 2s;
  animation-duration:1.5s;
  position: absolute;
  top:70px;
  left:1rem;
  right:1rem;
  margin:1rem;
  color:#fff;
  z-index:5;
  background:linear-gradient(0deg, #0f2941 0%, #00182f 100%);
  padding:2rem;
  max-width:500px;
  font-family:Roboto-Thin;
  font-weight: 600;
  letter-spacing: .1em;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.about:before {
  content: "";
  position: absolute;
  width: 65px;
  height: 65px;
  opacity:.2;
  background-image:url(../img/logo.png);
  background-repeat: no-repeat;
  bottom:0;
  right:0;
}

.about p span {
  color:#F16622;
  font-size:18px;
}

#about {
  /*background: linear-gradient(180deg, rgb(50 50 50) 0%, #111 100%);*/
  background-color:#232a32;
  color:#fff;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
}
#about .row .col-md-12 h1 {
  margin-top:4rem;
  color:#F16622;
}

#about .row .col-md-12 {
  color:#ddd;
  text-align:center;
}

#about .row .col-md-12 span {
  color: #fff;
  font-weight:600;
}

#about .row .col-md-12 h1:before {
  bottom: -.5rem;
  left: calc(50% - 80px);
  width: 160px;
}
#resource {
  background:#fff;
}
#resource .row h1 {
  margin: 2rem auto;
  margin-top:3rem;
  font-family: Roboto-Thin;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  color: #000;
  width: 100%;
  margin-bottom:3rem;
}

#resource .row h1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(280deg, rgb(239 239 239 ) 0%, #797575 100%);
  bottom: -.5rem;
  left: calc(50% - 80px);
  width: 160px;
}


#resource .row:last-child div.col-md-3 {
  text-align: center;
  line-height:1.6;
  padding:1rem;
  display:inline-flex;
}

#resource .row:last-child div.col-md-3 h3 {
  font-size:18px;
  background-image: linear-gradient(90deg,#0B4B87, #F16622);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

#resource .row:last-child div.col-md-3 p {
  font-size:15px;
  padding:0 1rem;
  color:#111;
}

#resource .row:last-child div.col-md-3 .photo {
  width:200px;
  height:200px;
  overflow: hidden;
  margin:3rem auto;
  display:flex;
  border-radius:50%;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

#resource .row:last-child div.resourceInt {
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  margin-top:3rem;
  margin-bottom:3rem;
  padding:0;
  display:table;
}

@media (min-width: 768px) {
  .about {
    top:140px;
    left:5rem;
  }
}