/*
Theme Name: Ellieweb 2020
*/

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=29ff464b-3091-4cc7-82d8-9717a3ff3e81&fontids=1489428,1489440");
@font-face{
  font-family: 'Helvetica LT W04 Light1489428';
  src: url('fonts/1489428/5e04826f-5440-42ee-82bb-b212cb16bccc.woff2') format('woff2'), url('fonts/1489428/e0eda329-a6eb-46ac-8f15-e1c54de80856.woff') format('woff');
}
@font-face{
  font-family: 'Helvetica LT W04 Roman';
  src: url('fonts/1489440/44a857e5-bb9c-4164-a9f8-82e0390eaf0f.woff2') format('woff2'), url('fonts/1489440/4deeb3d8-6eff-48da-9238-9220bb4a35f0.woff') format('woff');
}

* {
  margin: 0;
  padding: 0;
}

html {
}
body {
  font-family: 'Helvetica LT W04 Light1489428', Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #000000;
  background-color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  -webkit-text-size-adjust: 100%;
  position: relative;
}
body.hidden {
  overflow: hidden;
}

strong,
b {
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.skip-link {
  display: none;
}

header,
main,
footer {
  display: block;
}

.page {
  position: relative;
}

/* HOMEPAGE */

.content-wrapper {
  position: relative;
  max-width: 100vw;
  overflow-x: hidden;
}

.cabinet-container {
  position: relative;
  width: 74%;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.cabinet-container.empty {
  position: absolute;
  top: 0;
  height: 100%;
}
.cabinet-container.empty-left {
  right: 90%;
}
.cabinet-container.empty-right {
  left: 90%;
}

.cabinet {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: 1.5% 0;
  min-height: 100vh;
  box-sizing: border-box;
}

.pillar-container {
  position: absolute;
  top: 0;
  right: 87%;
  width: 3%;
  height: 100%;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  box-sizing: border-box;
}
.pillar-container.pillar-right {
  left: 87%;
  right: auto;
}

.pillar {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  box-sizing: border-box;
  background-image: url('images/cabinet-background-small.svg');
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top center;
}

.shelf {
  position: relative;
  overflow: hidden;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
  padding-top: 3%;
  margin-bottom: 3%;
}

.bottom-shelf {
  border-top: 2px solid #000000;
}

.box-container {
  display: block;
  width: 45.5%;
  position: relative;
  float: left;
  margin-left: 3%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.box {
  width: 100%;
  height: 0;
  padding-top: 45%;
  background-image: url('images/ellie-box-low.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom -1px center;
}
.box.high-box {
  padding-top: 56%;
  background-image: url('images/ellie-box-high.svg');
}

.css-box-container {
  width: 100%;
  height: 0;
  padding-top: 45%;
  position: relative;
  z-index: 1;
  display: block;
  text-decoration: none;
}

.css-box-footer {
  position: absolute;
  bottom: 0;
  left: 6.5%;
  height: 2%;
  width: 87%;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
}

.css-box-main {
  position: absolute;
  top: 0;
  left: 0;
  height: 98.2%;
  width: 100%;
}

.css-box-vertical {
  position: absolute;
  top: 0;
  left: 2.15%;
  height: 100%;
  width: .9%;
  border-left: 2px solid #000000;
  border-right: 1px solid #000000;
}
.css-box-vertical.vertical-inner {
  left: 10.72%;
}
.css-box-vertical.vertical-right.vertical-inner {
  left: auto;
  right: 10.72%;
}
.css-box-vertical.vertical-right {
  left: auto;
  right: 2.15%;
  border-left: 1px solid #000000;
  border-right: 2px solid #000000;
}

.css-box-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10.6%;
  width: 100%;
}

.css-box-bottom-1,
.css-box-bottom-2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  border: 2px solid #000000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
}
.css-box-bottom-2 {
  top: 50%;
}
.css-box-bottom-1 {
  border-bottom: none;
  border-top-left-radius: 2.27% 100%;
  border-top-right-radius: 2.27% 100%;
}

.css-box-horizontal {
  position: absolute;
  top: 0;
  left: 0.5%;
  height: calc(2.4% + 2px);
  width: 99%;
  border: 2px solid #000000;
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-top-left-radius: 0.63% 50%;
  border-top-right-radius: 0.63% 50%;
  border-bottom-left-radius: 0.63% 50%;
  border-bottom-right-radius: 0.63% 50%;
}
.css-box-horizontal.horizontal-inner {
  top: calc(20% + 2px);
}

.grip-vertical {
  position: absolute;
  top: calc(2% + 2px);
  left: 35.8%;
  height: 8%;
  width: .9%;
  border-left: 2px solid #000000;
  border-right: 1px solid #000000;
}
.grip-vertical.vertical-right {
  left: auto;
  right: 35.8%;
  border-left: 1px solid #000000;
  border-right: 2px solid #000000;
}

.grip {
  position: absolute;
  top: calc(10% + 2px);
  left: 31%;
  height: 32.5%;
  width: 38%;
  background-color: #ffffff;
}

.grip-outer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 2px solid #000000;
  border-top-left-radius: 11.71% 30.77%;
  border-top-right-radius: 11.71% 30.77%;
}

.grip-outer-cover {
  position: absolute;
  top: calc(30.77% + 2px);
  left: 0;
  height: 69.23%;
  width: 100%;
  background-color: #ffffff;
}

.grip-inner {
  position: absolute;
  top: 7.6%;
  left: 3.1%;
  height: 92.4%;
  width: 93.8%;
  border: 2px solid #000000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-top-left-radius: 10.46% 28%;
  border-top-right-radius: 10.46% 28%;
  border-bottom-left-radius: 10.46% 28%;
  border-bottom-right-radius: 10.46% 28%;
}

.grip-inner-inside {
  position: absolute;
  top: 14.9%;
  left: 5.78%;
  height: 70.2%;
  width: 88.44%;
  border: 2px solid #000000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-top-left-radius: 5.75% 20%;
  border-top-right-radius: 5.75% 20%;
  border-bottom-left-radius: 5.75% 20%;
  border-bottom-right-radius: 5.75% 20%;
}

.grip-connect {
  position: absolute;
  top: calc(20% + 2px);
  left: 31%;
  width: 1.2%;
  position: absolute;
  height: calc(2.4% + 2px);
  border-bottom: 2px solid #000000;
  background-color: transparent;
  overflow: hidden;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.grip-connect.connect-right {
  left: auto;
  right: 31%;
}

.annoying-detail {
  position: absolute;
  top: calc(16% - 2px);
  left: calc(4% - 2px);
  height: 20.4%;
  width: calc(92% + 4px);
  border: 2px solid #000000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-bottom: none;
  border-top-left-radius: 2.7% 45%;
  border-top-right-radius: 2.7% 45%;
}
.annoying-detail:before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: calc(-4% - 2px);
  width: calc(4% + 2px);
  height: 100%;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-bottom-right-radius: 50% 80%;
}
.annoying-detail:after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  right: calc(-4% - 2px);
  width: calc(4% + 2px);
  height: 100%;
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-bottom-left-radius: 50% 80%;
}

.box-content {
  position: absolute;
  top: 47%;
  left: 30%;
  width: 40%;
  height: 35%;
  text-align: center;
  z-index: 2;
  font-family: 'Helvetica LT W04 Roman', Arial, sans-serif;
  font-weight: 400;
}

.box-content img {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/*a:hover .css-box-footer,
a:hover .css-box-bottom-1,
a:hover .css-box-bottom-2,
a:hover .grip-inner-inside,
a:hover .grip-inner,
a:hover .grip-outer,
a:hover .grip-vertical,
a:hover .css-box-horizontal,
a:hover .css-box-vertical {
  border-color: #29f780;
}
a:hover .grip-connect {
  background-color: #29f780;
}
a.box-container:hover {
  color: #29f780;
}*/

a:hover .css-box-footer {
  background-color: #000000;
}

/*
a:hover .grip-connect,
a:hover .grip-outer,
a:hover .grip-inner,
a:hover .grip-vertical,
a:hover .css-box-bottom-1,
a:hover .css-box-bottom-2,
a:hover .css-box-horizontal,
a:hover .css-box-vertical,
a:hover .css-box-footer {
  background-color: #000000;
}
.grip-inner-inside {
  background-color: #ffffff;
}
*/

/* REGULAR PAGE */

.regular-page {
  background-color: rgba(0,0,0,1);
}

.regular-page .page-content-wrapper,
.regular-page .pillar-container {
  background-color: #ffffff;
}

.back-to-home {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 999;
  width: 40px;
  height: 40px;
}

.back-to-home span {
  display: none;
}

.back-to-home:before,
.back-to-home:after {
  content: '';
  display: block;
  position: absolute;
  width: 40px;
  height: 1px;
  left: 0;
  top: 50%;
  background-color: #ffffff;
}
.back-to-home:before {
  transform: rotate(45deg);
}
.back-to-home:after {
  transform: rotate(-45deg);
}

.page-content-wrapper {
  position: relative;
  min-height: 100vh;
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 30px;
  line-height: 38px;
  padding: 40px 0 0;
  overflow: hidden;
}

.page-content h2,
.page-content p,
.page-content ul,
.page-content ol {
  padding: 0 40px;
}

.page-content h2 {
  font-family: 'Helvetica LT W04 Roman', Arial, sans-serif;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  text-transform: uppercase;
}

.page-content p {
  margin-bottom: 20px;
}
.page-content p:last-child {
  margin-bottom: 40px;
}

/*
.page-content figure {
  /border-bottom: 1px solid #000000;
}
.page-content figure:last-of-type {
  border-bottom: none;
}*/
.page-content figure + p,
.page-content .wp-block-columns + p {
  margin-top: 20px;
}

.page-content figure img {
  width: 100%;
}

.page-content a {
  color: inherit;
  text-decoration: none;
}
.page-content a:hover {
  text-decoration: underline;
}

.page-content a:after {
  /*display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 1px;
  width: 100%;
  background-color: #000000;*/
}

.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100.1%;
  height: 100%;
}

video {
  display: block;
  width: 100.1%;
  height: auto;
}

.wp-block-columns.is-layout-flex {
  gap: 0 !important;
}

@media screen and (max-width: 1000px)
{
  .cabinet-container {
    width: 80%;
  }
  .cabinet-container.empty-left {
    right: 93%;
  }
  .cabinet-container.empty-right {
    left: 93%;
  }

  .pillar-container.pillar-left {
    right: 90%;
  }
  .pillar-container.pillar-right {
    left: 90%;
  }

  .page-content-wrapper {
    width: 86%;
  }

  .back-to-home {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
  }

  .back-to-home:before, .back-to-home:after {
    width: 30px;
  }
}

@media screen and (max-width: 700px)
{
  body {
    font-size: 13px;
    line-height: 24px;
  }

  .css-box-bottom-1, .css-box-bottom-2,
  .grip-inner,
  .grip-inner-inside,
  .grip-outer,
  .css-box-horizontal {
    border: 1px solid #000000;
  }
  .css-box-bottom-1 {
    border-bottom: none;
  }
  .css-box-footer,
  .grip-vertical.vertical-right,
  .grip-vertical,
  .css-box-vertical.vertical-right,
  .css-box-vertical.vertical-left {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
  }
  .grip-connect {
    border-bottom: 1px solid #000000;
  }
  .grip-outer-cover {
    top: calc(30.77% + 1px);
  }
  .grip-connect,
  .css-box-horizontal {
    height: calc(1.8% + 2px);
  }

  .annoying-detail {
    position: absolute;
    top: calc(16% - 2px);
    left: calc(4% - 1px);
    height: 20.4%;
    width: calc(92% + 2px);
    border: 1px solid #000000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: none;
    border-top-left-radius: 2.7% 45%;
    border-top-right-radius: 2.7% 45%;
  }
  .annoying-detail:before {
    left: calc(-4%);
    width: calc(4%);
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-bottom-right-radius: 55% 80%;
  }
  .annoying-detail:after {
    right: calc(-4%);
    width: calc(4%);
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-bottom-left-radius: 55% 80%;
  }

  .box-container {
    width: 100%;
    float: none;
    margin-left: 0;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    margin-top: 6%;
    padding-top: 6%;
  }
  .shelf:nth-child(1) .box-container:nth-child(1) {
    margin-top: 0;
  }

  .css-box-container {
    width: 90%;
    margin-left: 5%;
  }

  .cabinet-container {
    width: 67%;
  }
  .cabinet-container.empty-left {
    right: 89.5%;
  }
  .cabinet-container.empty-right {
    left: 89.5%;
  }

  .cabinet {
    padding: 3% 0;
  }

  .pillar-container {
    width: 6%;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
  }
  .pillar-container.pillar-left {
    right: 83.5%;
  }
  .pillar-container.pillar-right {
    left: 83.5%;
  }

  .shelf {
    border-top: none;
    border-bottom: none;
    padding-top: 0;
    margin-bottom: 0;
  }
  .bottom-shelf {
    margin-top: 6%;
    border-top: 1px solid #000000;
  }

  .page-content-wrapper {
    width: 100%;
    font-size: 20px;
    line-height: 26px;
  }
  .page-content h2, .page-content p, .page-content ul, .page-content ol {
    padding: 0 60px 0 20px;
  }

  .back-to-home {
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
  }

  .back-to-home:before, .back-to-home:after {
    width: 20px;
    background-color: #000000;
  }

  .box-content {
    position: absolute;
    top: 52%;
    left: 27%;
    width: 46%;
    height: 34%;
    /*font-family: 'Helvetica LT W04 Light1489428', Arial, sans-serif;
    font-weight: 300;*/
  }
}

@media screen and (min-width: 701px)
{
  .wp-block-columns {
    display: flex;
    align-items: center;
    gap: 0 !important;
  }

  .wp-block-column {
    flex: 1 1 auto;
  }
}

video::-webkit-media-controls-timeline {
    display: none;
}