/*!
Theme Name: juliajanus
Theme URI: http://underscores.me/
Author: Uba
Author URI: http://uba.lt
Description: Custom WP Theme
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: juliajanus
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

arpolis is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


html,
body {
  background: #ffffff;
}

html.sr .load-hidden {
  visibility: hidden;
}


body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
  line-height: 1.6em;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 1.6em;
}

body.menu-active {
  overflow: hidden;
}

h4 {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 2rem;
}

strong {
  font-weight: 400;
}

.text-center {
  text-align: center;
}

.vertical-align {
  height: 100%;
  display: flex;
  vertical-align: middle;
  justify-content: center;
  flex-direction: column;
}

.text-row {
  padding: 80px 0 80px 0;
}

.text-row-bottom {
  padding: 80px 0 0 0;
}

.partners-row {
  padding: 30px 0 1em 0;
}

.inspo-row.first {
  padding-top: calc(80px - 1em);
}


.logo {
  position: fixed;
  left: 2rem;
  top: 2rem;
  height: 61.53px;
  width: 220px;
  z-index: 99999999;
}

.home .logo svg {
  fill: #ffffff;
  transition: fill 300ms ease-in-out;
}

.logo svg {
  fill: #000000;
  transition: fill 300ms ease-in-out;
}

/*.single-product .logo,
.page-template-showroom .logo {
  position: absolute;
  top: -5rem;
  left: 0;
}*/

.inspo-description {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.inspo-description p,
.vertical-align p {
  margin-top: 0;
}


.inspo-image {
  width: 100%;
  height: 100%;
  display: flex;
}

.inspo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspo-row {
  padding: 80px 0;
}

.single-product .logo svg {
  fill: #000000;
  transition: fill 300ms ease-in-out;
}

.mobile-menu-trigger {
  position: fixed;
  right: 2rem;
  top: 2rem;
  height: 24px;
  width: 50px;
  z-index: 999999999;
  mix-blend-mode: difference;
}

.mobile-menu-trigger:hover {
  cursor: pointer;
}

.mobile-menu-trigger .bar1,
.mobile-menu-trigger .bar2,
.mobile-menu-trigger .bar3 {
  height: 2px;
  background: #ffffff;
  position: absolute;
}

.mobile-menu-trigger .bar1 {
  top: 0%;
  width: 50px;
  left: 0px;
  display: block;
  transition: all 400ms ease-in-out;
}

.mobile-menu-trigger .bar2 {
  top: calc(50% - 1px);
  width: 50px;
  left: 0px;
  display: block;
  transition: all 400ms ease-in-out;
  opacity: 1;
}

.mobile-menu-trigger .bar3 {
  bottom: 0px;
  width: 50px;
  left: 0px;
  display: block;
  transition: all 400ms ease-in-out;
}

.mobile-menu-trigger.active .bar1 {
  transform: rotate(45deg);
  top: calc(50% - 2px);
  left: -1px;
}

.mobile-menu-trigger.active .bar2 {
  opacity: 0;
}

.mobile-menu-trigger.active .bar3 {
  transform: rotate(-45deg);
  bottom: calc(50%);
  right: -1px;
}

.menu-active nav#menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease-in-out;
}

nav#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #222222;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-in-out;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 36px;
  font-weight: 300;
}

.menu li.lang-item a {
  font-size: 18px;
}

.menu li {
  padding: 20px;
}

.menu-active .logo svg {
  fill: #ffffff;
  transition: fill 300ms ease-in-out;
}

.site-main {
  padding: 1rem;
}

.page-wrapper {
  margin-top: 6rem;
}

.intro-link {
  position: absolute;
  z-index: 9999999;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 36px;
  letter-spacing: 15px;
  width: 100%;
  top: 45%;
  line-height: 1.2em;
  text-align: center;
  font-weight: 300;
}

.intro-link .last-letter {
  letter-spacing: 0;
}

.intro-link a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid #ffffff;
  cursor: pointer;
  pointer-events: all !important;
  font-style: italic;
}

.intro-video {
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #000000 url('img/video-bg.jpg') no-repeat center center;
  background-size: cover !important;
  z-index: 1;
}

.intro-video iframe {
  box-sizing: border-box;
  width: 177.77777778vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 40px;
  margin-left: -8.8px;
  width: 17.688px;
  height: 60px;
  background: url('img/arrow-down.svg') no-repeat center center;
  cursor: pointer;
  transition: bottom 150ms ease-in-out;
  z-index: 999;
  animation: float 3s ease-in-out infinite;
}

.scroll-down:hover {
  bottom: 30px;
}

/*.arw-vertical {
  position: absolute;
  width: 1px;
  left: 20px;
  height: 100px;
  background: #ffffff ;
}*/

/*.arw-left {
  height: 1px;
  width: 22px;
  background: #ffffff;
  transform: rotate(45deg);
  bottom: 7px;
  left: 2px;
  position: absolute;
  transition: all 150ms ease-in-out;
}

/*.scroll-down:hover .arw-left {
  transform: rotate(30deg);
  left: 1px;
}*/

/*.arw-right {
  height: 1px;
  width: 22px;
  background: #ffffff;
  transform: rotate(-45deg);
  bottom: 7px;
  right: 1px;
  position: absolute;
  transition: all 150ms ease-in-out;
}*/

/*.scroll-down:hover .arw-right {
  transform: rotate(-30deg);
  right: 1px;
}*/

.constrain-content {
  max-width: 1400px;
  margin: 0 auto;
}

.product-loop-item {
  margin-bottom: 4rem;
}

.product-loop-item a {
  color: #000000;
  text-decoration: none;
}

.product-mini-info {
  font-size: 14px;
  margin-top: 10px;
}

.product-loop-title {
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.2em;
  font-weight: 400;
  margin: 1rem 0;
}

.product-image {
  width: 100%;
  padding-top: calc(4 / 3 * 100%);
  position: relative;
  background: #dddddd;
}

.product-loop-price {
  margin-top: 0.5rem;
  letter-spacing: 1px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.first-image,
.second-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.second-image {
  opacity: 0;
}

.product-loop-item:hover .second-image {
  opacity: 1;
}

.product-loop-item:hover .first-image {
  opacity: 0;
}

.product-loop-item:hover .first-image.nosecond {
  opacity: 1;
}

/* PRODUCT PAGE */

.product-info {
  position: sticky;
  top: 80px;
}

.aside-navigation {
  position: sticky;
  top: 110px;
  padding-top: 20px;
}

.aside-navigation ul {
  list-style: none;
  margin: 0px 0 40px 0;
  padding: 0;
}

.aside-navigation ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #000000;
}

.aside-navigation ul li a.active {
  color: #666666;
}

.product-title {
  margin-bottom: 3rem;
}

.product-price {
  font-size: 22px;
}

.product-desription {
  margin-bottom: calc(4rem - 8px);
}

.product-desription h2 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.pd-headline {
  margin: 0;
  padding-left: 2rem;
  background: url('img/plus-thin.svg') no-repeat left center;
  background-size: 20px;
}

.acc_active .pd-headline {
  margin: 0;
  padding-left: 2rem;
  background: url('img/minus-thin.svg') no-repeat left center;
  background-size: 20px;
}

input[type="email" i] {
  background: #ffffff;
  color: #000000;
  border-bottom: none;
  font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  border-left: none;
  border-right: none;
  border-top: none;
  background: none;
  outline: none;
  display: inline-block;
  padding: 12px 0px;
  box-shadow: inset 0 -1px 0 black;
  -webkit-appearance: none;
  border-radius: 0 !important;
}

.buy-btn,
.button {
  background: #000000;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 12px 30px;
  display: inline-block;
  box-sizing: border-box;
  margin: 1.5em 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  border: none;
  font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  -webkit-appearance: none;
  border-radius: 0 !important;
  width: 100%;
}

.buy-btn.inline-button {
  margin: 1.5em auto;
}

.gallery-image img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4rem;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
}

.related-products {
  margin-top: 100px;
  margin-bottom: 100px;
}

.shop-footer {
  background: #FAFAFA;
  padding: 100px 10px;
  color: #000000;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.inspo-title {
  font-weight: 300;
  letter-spacing: 3px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.3em;
  display: block;
}

.p-title {
  font-weight: 300;
  letter-spacing: 3px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.3em;
  display: block;
}

.page-title {
  font-weight: 300;
  letter-spacing: 3px;
  margin: 1rem 0 4rem 0;
  margin-top: calc(1rem + 25px);
  margin-bottom: 4rem;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.3em;
}

.social-links {
  margin: 30px 0 0 0;
}

.social-links a {
  text-decoration: none;
}

.social-links img {
  width: 35px;
  height: 35px;
  margin: 5px;
}

.desc-image {
  width: 100%;
  height: auto;
}

.partner-block {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background: #000000;
  overflow: hidden;
}

.partner-block .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  z-index: 9;
}

.partner-block .bg {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  top: -1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-size: cover !important;
  opacity: 0.7;
  z-index: 1;
  transition: all 300ms ease-in-out;
}

.partner-block:hover .bg {
  transform: scale(1.1);
}

.partner-block h2 {
  color: #ffffff;
  font-weight: 300;
  letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.3em;
  opacity: 1;
  position: absolute;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(10px);
  }

  100% {
    transform: translatey(0px);
  }
}

/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#mc_embed_signup form {
  text-align: center;
}

.mc-field-group {
  display: inline-block;
}

/* positions input field horizontally */
#mc_embed_signup input.email {
  display: inline-block;
  margin: 0;
  width: 350px;
  vertical-align: top;
  margin-bottom: 15px;
}

#mc_embed_signup label {
  display: block;
  font-size: 16px;
  padding-bottom: 10px;
  font-weight: bold;
}

#mc_embed_signup .clear {
  display: inline-block;
}

/* positions button horizontally in line with input */
#mc_embed_signup .button {
  margin: 0;
  outline: none;
  margin-bottom: 15px;
}

#mc_embed_signup div#mce-responses {
  float: left;
  top: -1.4em;
  padding: 0em .5em 0em .5em;
  overflow: hidden;
  width: 90%;
  margin: 0 5%;
  clear: both;
}

#mc_embed_signup div.response {
  margin: 1em 0;
  padding: 1em .5em .5em 0;
  font-weight: bold;
  float: left;
  top: -1.5em;
  z-index: 1;
  width: 80%;
}

#mc_embed_signup #mce-error-response {
  display: none;
}

#mc_embed_signup #mce-success-response {
  color: #529214;
  display: none;
}

#mc_embed_signup label.error {
  display: block;
  float: none;
  width: auto;
  margin-left: 1.05em;
  text-align: left;
  padding: .5em 0;
}


.newsletter-info {
  font-size: 12px;
  line-height: normal;
  opacity: 0.5;
}

.page-content {
  min-height: 100vh;
}

.page-template-page-about .logo svg {
  fill: #ffffff;
  transition: fill 300ms ease-in-out;
}

.about-page-header {
  position: relative;
  display: flex;
  margin: -1rem;
}

.about-page-content {
  padding: 100px;
}

.half-left {
  width: 50vw;
  height: 100vh;
  position: relative;
}

.half-right {
  width: 50vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  flex-wrap: wrap;
}

.half-left img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media screen and (max-width: 991px) {

  .aside-navigation {
    display: none;
  }

  .logo {
    top: 1rem;
    left: 0.75rem;
  }

  .mobile-menu-trigger {
    top: 1.3rem;
    right: 0.75rem;
  }

  .text-row {
    padding: 40px 0;
  }

  .inspo-row {
    padding: 40px 0;
  }

  .inspo-row.first {
    padding-top: calc(40px - 1em);
  }

  .text-row-bottom {
    padding: 40px 0 0 0;
  }

  .intro-link a {
    border-bottom: 1px solid #ffffff;
  }

  .about-page-header {
    flex-direction: column;
  }

  .half-left {
    width: 100vw;
    height: 70vh;
  }

  .half-right {
    width: 100vw;
    height: auto;
  }

}


@media screen and (max-width: 768px) {
  .logo {
    width: 200px;
  }

  .page-title {
    margin-top: 20px;
  }

  .product-info {
    position: relative;
    top: 0;
  }

  .site-main {
    padding: 0px;
  }

  .inspo-title,
  .p-title {
    text-align: center;
    display: block;
    width: 100%;
    margin: 30px 0 20px 0;
    font-size: 24px;
  }

  .intro-link {
    font-size: 24px;
  }

  .product-title {
    margin-top: 10px;
  }

  .related-products {
    margin-top: 40px;
  }

  .second-image {
    display: none;
    pointer-events: none;
  }

  .product-loop-item:hover .second-image {
    display: none;
  }

  .product-loop-item:hover .first-image {
    display: block;
    opacity: 1;
  }

  .about-page-header {
    margin: 0;
  }

  .about-page-content {
    padding: 1rem;
  }
}