/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover,
a:active {
  color: yellow;

}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html {
    scroll-behavior: smooth;
    
}

html,
body {
  height: 100%;
  background-color: #333;
}


body {
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  font-family: 'Quicksand', sans-serif;
}

.cover-container {
  width: 100%;
  background: #323c41;
  padding: 1rem;
}

}

p.copyright {
  position: absolute;
  bottom: 0;
}

.info {
  background: rgba(34, 34, 34, .9);
  padding: 6rem 2rem;
}

#mobile-only {
  display: none;
}

/*
 * Header
 */

header {
  width: 100%;
  z-index: 1;
  transition: all ease-in-out 0.5s;
  position: fixed;
  padding: 1rem;

}
header:after{
  content: "";
  display: block;
  clear: both;
}


h1.cover-heading {
  padding-top: 13rem;
}


section{
  height: 100vh;
  display: flex;
  z-index: 0;
}

section.content
{
  overflow: hidden;
}

section h1 {
  padding-top: 4rem;
}
section h2 {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0;
  text-transform: capitalize;
  text-shadow: 10px 10px 3px rgba(0,0,0, 0.2);
}

img.home-gateway {
    width: 100%;
    cursor: pointer;
}

.modal-dialog {
    color: #111;
    margin: 15% auto;
    text-shadow: none;
}


/*
 * Footer
 */
footer {
  color: #fff;

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
  #mobile-only {
    display: block;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .cover-container {
    width: 22rem;
  }

  .cover-container {
    position: fixed;
  }

  a.mobile-only {
    display: none;
  }

  #mobile-only {
    display: block;
  }

  p.copyright {
    bottom: 4rem;
  }

  main#homepage {
    margin-left: 22rem;
  }

  .cover {
    padding: 15rem 4.5rem 0 0;
  }

  .info {
    float: left;
    /* width: 60%; */
    padding: 10.3rem 2rem;
  }

  footer {
    position: fixed;
    bottom: 0;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  body {
    /* display: -ms-flexbox;
    display: flex; */
  }

  main#homepage {
    margin-left: 22rem;
  }

  .cover-container {
    position: fixed;
  }

  .info {
    width: 50%;
    padding: 13rem 2rem;
  }

  p.copyright {
    bottom: 4rem;
  }

  #mobile-only {
    display: none;
  }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}