/*=============================================================
"Theme Solution" for Bootstrap 4
----------------------------------
Author: Cristian Sarca
GitHub: cristiansarca.github.io
=============================================================*/
.navbar {
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #1a1a2d; }
  .navbar .form-control:focus {
    color: #f8f9f9; }

  .bg-custom {
    background-color: #606c88 !important;
  }

.hero {
  height: 100vh; }
  .hero .hero-text {
    margin-top: 8rem;
    text-align: center; }
    .hero .hero-text h1 {
      font-size: 3.5rem; }
    .hero .hero-text h2 {
      font-size: 1.5rem; }

.g-primary {
  background: url(../img/hero/li.png), linear-gradient(10deg, rgba(210, 183, 255, 0), rgba(16, 5, 19, 0.5));
  background-size: cover; }

.artwork-orm {
  background: url(../img/hero/orm.png); }

.artwork-database {
  background: url(../img/hero/database.png); }

.artwork-closure {
  background: url(../img/hero/closure.png); }

.artwork-schema {
  background: url(../img/hero/schema.png); }

.artwork-view {
  background: url(../img/hero/view.png); }

.artwork-string {
  background: url(../img/hero/string.png); }

.artwork-opis {
  background: url(../img/hero/opis.png); }

.artwork-http {
  background: url(../img/hero/http.png); }

.artwork-routing {
  background: url(../img/hero/http-routing.png); }

.artwork-container {
  background: url(../img/hero/container.png); }

.artwork {
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 90%; }

.picture {
  object-fit: contain;
  height: 200px;
  margin-top: 5rem; }

.picture-sm {
  height: 125px;
  object-fit: contain; }

@media screen and (orientation: landscape) {
  .hero .hero-text {
    text-align: left;
    margin-top: 7rem; }
  .artwork {
    background-position: 95% 100%;
    background-size: 50%; } }

@media (min-width: 768px) {
  .hero .hero-text {
    text-align: center; }
    .hero .hero-text h1 {
      font-size: 4.5rem; }
    .hero .hero-text h2 {
      font-size: 2rem; }
  .picture {
    height: 250px;
    margin-top: 0; } }

@media screen and (min-width: 768px) and (orientation: landscape) {
  .hero .hero-text {
    margin-top: auto;
    margin-bottom: auto;
    text-align: left; }
    .hero .hero-text h1 {
      font-size: 4.5rem; }
    .hero .hero-text h2 {
      font-size: 2rem; }
  .artwork {
    background-position: 90% 50%;
    background-size: 50%; } }

@media (min-width: 1200px) {
  .navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: transparent;
    transition: all .4s ease-in-out; }
  .navbar.scrolled {
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: #1a1a2d; }
  .hero .hero-text {
    margin-top: 14rem; }
    .hero .hero-text h1 {
      font-size: 4.5rem; }
    .hero .hero-text h2 {
      font-size: 2rem; }
    .hero .hero-text .catch {
      font-size: 5.5rem; }
  .artwork {
    background-position: 50% 100%;
    background-size: 80%; } }

@media screen and (min-width: 1200px) and (orientation: landscape) {
  .hero .hero-text {
    margin-top: auto;
    margin-bottom: auto;
    text-align: left; }
  .artwork {
    background-position: 90% 60%;
    background-size: 45%; } }