/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height: 100%;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
  height: 100%;
  font-family: 'Oswald', sans-serif;
  background-color: #050d15;
}

main {
  height: 100%;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  margin: 0;
}

.logo img {
  max-width: 100%;
}

.row {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.row > .col {
  width: 50%;
  flex: 1;
  position: relative;
}

.row > .col > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.row > .col > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  color: #fff;
}

footer .cookies {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
footer .cookies a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
}
footer .cookies a:hover {
  text-decoration: underline;
}

footer .line {
  display: flex;
  align-items: center;
}
footer .socials {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

footer .socials a{
  margin: 0 7px;
}

footer .line::before, footer .line::after{
  content: '';
  width: 100%;
  height: 4px;
  background: #e3d700;
  display: block;
}

footer .line img {
  position: relative;
  top: 3px;
}


.bg-img {
  opacity: 0.3;
  transition: transform 0.5s;
}


.big-title {
 font-size: 150px;
 font-weight: bold;
 text-transform: uppercase;
 color: #fff;
 margin: 0;
 opacity: 0.7;
 letter-spacing: -0.96px;
}

.city {
  font-size:  27px;
  color: #f0e500;
  text-transform: uppercase;
  margin-bottom: 10px;
}

address {
  color: #f3f3f3;
  font-size: 16px;
  font-style: normal;
  opacity: 0.5;
  text-transform: uppercase;
  line-height: 25px;
}

address a {
  color: inherit;
  text-decoration: none;
}



@media(min-width: 1368px) {
  .col:hover .bg-img {
    opacity: 0.8;
    transform: scale(1.1);
  }

  .col:hover .big-title {
    font-size: 175px;
    text-shadow: 0px 0px 80px rgba(1, 1, 1, 1);

  }
  .col:hover .city {
    font-size: 40px;
  }
  .col:hover address {
    /* opacity: 0;*/
  }
}


@media (max-width: 1024px) {

  .logo {
    max-width: 40vh;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .bg-img {
    display: none;
  }

  .bg-img-mobile {
    display: block;
  }

  address {
    display: none;
  }


}

@media (max-width: 640px) {
  .row > .col:first-child > img {
    object-position: right !important;
  }
  .row > .col:last-child > img {
    object-position: left !important;
  }


  .row > .col > div {
    /* transform: translate(-50%, 0);*/
  }

  .big-title {
    font-size: 70px;
  }
  .city {
    font-size: 14px;
  }

  address {
    font-size: 14px;
    max-width: 110px;
    margin: auto;
  }

  address span {
    display: none;
  }

  footer .socials a{
    margin: 0 20px;
  }
}

@media (max-width: 480px) {

  .logo {
    max-width: 30vh;
  }

  .row > .col:last-child > div:before {
    content: '';
    width: 1px;
    height: 100%;
    background: #f0e500;
    display: block;
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
  }


  .big-title {
    font-size: 45px;
  }

  .city {
    margin-bottom: 0;
  }


}

@media (orientation: landscape) and (max-width : 900px) {
  .big-title {
    font-size: 35px;
  }
}