@font-face {
  font-family: KentBlack;
  src: url("../fonts/KentBlack.ttf") format("truetype"); }
html {
  font-family: KentBlack; }

.panel {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }

.panel h2 {
  font-size: 48px;
  text-align: center; }

p.block {
  padding: 10px;
  font-size: 35px;
  line-height: 40px; }

p.block-center {
  padding: 10px;
  font-size: 35px;
  line-height: 40px;
  text-align: center; }

p.block-right {
  padding: 10px;
  font-size: 35px;
  line-height: 40px;
  text-align: right; }

.indent {
  margin-left: 30px; }

.indent-2 {
  margin-left: 70px; }

.indent-3 {
  margin-left: 150px; }

#panel-1,
#panel-31 {
  height: 100vh;
  width: 100%;
  background: #080808; }

#panel-1 h1,
#panel-30 h1,
#panel-31 {
  font-size: 5em;
  text-align: center; }

#panel-2 {
  height: 75vh;
  width: 100%;
  background-image: url("../images/darksky.jpg");
  background-position: center;
  background-size: cover; }

#gradient {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -200px;
  left: 0;
  height: 200px;
  /* adjust it to your needs */
  background: -webkit-linear-gradient(bottom, rgba(8, 8, 8, 0) 0%, #080808 70%); }

#panel-3 {
  width: 100%;
  padding: 50px;
  background: url("../bgs/lightpaperfibers.png"); }

#panel-4 {
  width: 100%;
  background: url("../images/Light-Beam.jpg");
  height: 100vh;
  background-size: cover; }

#panel-5 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-6 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-7 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-8 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-9 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-10 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-11 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-12 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-13 {
  width: 100%;
  padding: 50px;
  background: #080808; }

#panel-14 {
  background: #FFFFFF;
  width: 100%; }

#panel-14 img {
  width: 100%; }

#panel-15 {
  width: 100%;
  padding: 50px;
  background: #FFFFFF;
  border-bottom: 10px solid #000000; }

#panel-16 {
  width: 100%;
  padding: 50px;
  background: #FFFFFF;
  border-bottom: 10px solid #000000; }

#panel-17 {
  width: 100%;
  padding: 50px;
  background: #FFFFFF;
  border-bottom: 10px solid grey; }

#panel-18 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-19 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-20 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-21 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-22 {
  background: #FFFFFF;
  width: 100%;
  border-bottom: 10px solid grey; }

#panel-22 img {
  width: 100%; }

#panel-23 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-24 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-25 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-26 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-27 {
  width: 100%;
  padding: 50px;
  background: #080808;
  border-bottom: 10px solid grey; }

#panel-28 {
  width: 100%;
  padding: 50px;
  background: #080808; }

#panel-29 {
  background: #FFFFFF;
  width: 100%; }

#panel-29 img {
  width: 100%; }

#panel-30 {
  width: 100%; }

#panel-30 a {
  text-decoration: none;
  color: #333333;
  border-bottom: 5px dotted; }

#panel-31 a {
  text-decoration: none;
  color: #333333;
  border-bottom: 5px dotted; }

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  .panel h2 {
    font-size: 32px;
    text-align: center; }

  p.block {
    font-size: 20px;
    line-height: 30px; }

  p.block-center {
    font-size: 20px;
    line-height: 30px;
    text-align: center; }

  p.block-right {
    font-size: 20px;
    line-height: 30px;
    text-align: right; }

  .indent {
    margin-left: 30px; }

  .indent-2 {
    margin-left: 70px; }

  .indent-3 {
    margin-left: 150px; }

  #panel-1 {
    height: 100vh;
    width: 100%;
    background: #080808; }

  #panel-1 h1 {
    font-size: 5em;
    text-align: center; }

  #panel-30 h1,
  #panel-31 {
    font-size: 2em; }

  #panel-31 {
    width: 100%;
    background: #080808; } }
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  .panel h2 {
    font-size: 32px;
    text-align: center; }

  p.block {
    font-size: 20px;
    line-height: 30px; }

  p.block-center {
    font-size: 20px;
    line-height: 30px;
    text-align: center; }

  p.block-right {
    font-size: 20px;
    line-height: 30px;
    text-align: right; }

  .indent {
    margin-left: 30px; }

  .indent-2 {
    margin-left: 70px; }

  .indent-3 {
    margin-left: 150px; }

  #panel-1 {
    height: 100vh;
    width: 100%;
    background: #080808; }

  #panel-1 h1 {
    font-size: 4em;
    text-align: center; }

  #panel-30 h1,
  #panel-31 {
    font-size: 2em; }

  #panel-31 {
    width: 100%;
    background: #080808; } }
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  #gradient {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -200px;
    left: 0;
    height: 200px;
    /* adjust it to your needs */
    background: -webkit-linear-gradient(bottom, rgba(8, 8, 8, 0) 0%, #080808 70%); }

  .panel h2 {
    font-size: 32px;
    text-align: center; }

  p.block {
    font-size: 20px;
    line-height: 30px; }

  p.block-center {
    font-size: 20px;
    line-height: 30px;
    text-align: center; }

  p.block-right {
    font-size: 20px;
    line-height: 30px;
    text-align: right; }

  .indent {
    margin-left: 30px; }

  .indent-2 {
    margin-left: 70px; }

  .indent-3 {
    margin-left: 150px; }

  #panel-1 {
    height: 100vh;
    width: 100%;
    background: #080808; }

  #panel-1 h1 {
    font-size: 4em;
    text-align: center; }

  #panel-30 h1,
  #panel-31 {
    font-size: 2em; }

  #panel-31 {
    width: 100%;
    background: #080808; } }