@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-left {
  display: flex;
  align-items: center;
  justify-content: left;
}

.flex-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.grid {
  display: grid;
}

.flex-header {
  position: absolute;
  top: 0;
}

.is-fullheight {
  min-height: 100vh;
  height: auto;
}

.is-medium-height {
  min-height: 35vh;
  height: auto;
}

.is-half-height {
  min-height: 50vh;
  height: auto;
}

.is-height-70 {
  min-height: 70vh;
  height: auto;
}

.is-height-80 {
  min-height: 80vh;
  height: auto;
}

.is-fullwidth {
  width: 100%;
}

.is-fixed {
  position: fixed;
  width: 100%;
  left: 0;
  padding: 1rem 0;
}

.is-fixed-bottom {
  bottom: 0;
}

.is-relative {
  position: relative;
}

.is-absolute {
  position: absolute;
  width: 100%;
  left: 0;
}

.is-absolute-bottom {
  bottom: 0;
}

.float-is-right {
  float: right;
}

.float-is-left {
  float: left;
}

.container-grid {
  display: grid;
  grid-template-areas: "header header header" "content content content" "footer footer footer";
  grid-template-columns: 15vw 1fr 15vw;
  grid-template-rows: auto 1fr auto;
  grid-gap: 0 10px;
}

.is-marginless {
  margin: 0;
}

.is-paddingless {
  padding: 0;
}

.is-bottom {
  bottom: 0;
}

header {
  grid-area: header;
  display: flex;
  align-items: center;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
  bottom: 0;
  width: 100%;
  position: fixed;
  left:0;
  padding: 2rem 0;
  background:transperant;
  text-align:right;
}
footer a{
    padding:2rem;
    color:white;
    font-size:0.85rem;
    text-decoration:none;
}
h1{
  margin-top: -0.5rem;
}
footer a .opacity{
    opacity:0.5;
}
footer hr {
  opacity: 0.1;
}

.img-fullwidth {
  width: 100%;
}

.section {
  padding: 5rem;
}

.grid-half {
  align-self: center;
  justify-self: center;
  grid-template-columns: 2fr 3fr;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.grid-half.reverse {
  grid-template-columns: 3fr 2fr;
  justify-self: flex-end;
  margin-top: 4vh;
}

.grid-half .grid-element {
  align-self: center;
}

.grid-half .grid-right {
  justify-self: end;
}

.grid-half .grid-left {
  justify-self: start;
}

.grid-three {
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 3rem;
}

.grid-two {
  align-self: center;
  justify-self: center;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  width: 100%;
}

.grid-second {
  align-self: center;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

@media (min-width: 70em) {
  .slideshow-container {
    height: 75vh;
  }
}

@media (max-width: 70em) {
  .container-grid {
    grid-template-areas: "header" "content" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    /* Footer */
  }

  .grid-three,
  .grid-two,
  .grid-half,
  .grid-half.reverse,
  .grid-second {
    grid-template-columns: 1fr;
  }

  .grid-two {
    min-width: 70vw;
  }

  nav,
  aside {
    margin: 3rem 0;
  }

  .slideshow-container {
    height: 75vh;
  }
}

#floorScheme svg {
  width: 35vw;
  margin: auto;
}

.height-100 {
  height: 100%;
}

.width-100 {
  width: 100%;
}

.background-cover {
  background-size: cover;
  background-position: center;
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
}

/*Font Weights*/

.font-is-light {
  font-weight: 300;
}

.font-is-regular {
  font-weight: 500;
}

.font-is-bold {
  font-weight: 600;
}

.font-is-black {
  font-weight: 900;
}

h1 {
  font-size: calc(3rem + 2vw);
}

h2 {
  font-size: calc(2rem + 1vw);
}

h3 {
  font-size: calc(1rem + 0.5vw);
  letter-spacing: calc(0.25rem + 0.5vw);
}

h4 {
  font-size: calc(0.75rem + 0.45vw);
}

.text-shadow {
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.55);
}

.card-content h3 {
  font-size: calc(1rem + 0.25vw);
}

p {
  font-size: calc(0.75rem + 0.25vw);
  line-height: 1.5;
}

p.is-purple {
  opacity: 0.75;
}

p.max-width-25 {
  max-width: 25vw;
}

.text-block {
  font-size: calc(0.55rem + 0.25vw);
  margin: 0.5rem 0;
}

.text-block.font-is-bold {
  font-size: calc(0.75rem + 1vw);
}

.text-block.font-is-bold .small {
  font-size: calc(0.55rem + 0.25vw);
}

.main-nav li,
label,
.breadcrumb ul {
  font-size: 0.85rem;
}

.main-nav li .large {
  font-size: 1.25rem;
}

.breadcrumb ul .large {
  font-size: 1rem;
}

ul.list {
  font-size: 0.85rem;
}

ul.list .small {
  font-size: 0.75rem;
}

/*Font Align*/

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

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

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

.is-uppercase {
  text-transform: uppercase;
}

.line-title::before {
  display: inline-block;
  content: "";
  border-top: 0.2rem solid #221C35;
  width: 4rem;
  margin: 0 1rem;
  vertical-align: middle;
}

.line-title-white::before {
  display: inline-block;
  content: "";
  border-top: 0.2rem solid #fff;
  width: 4rem;
  margin: 0 1rem;
  vertical-align: middle;
}

#location .section-title {
  padding-bottom: 1rem;
}

#location p.text-center {
  max-width: 650px;
  margin: auto;
  padding-bottom: 3rem;
}

.section-title {
  padding: 3rem 0;
  margin: 0;
}

.section-title.is-absolute {
  width: 100%;
  z-index: 1;
}

.section-title:before {
  content: "";
  display: block;
  border-top: solid 1px #F0D283;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 70%;
  margin-left: 15%;
  text-align: center;
}

.section-title span {
  background: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  font-size: calc(4rem + 0.25vw);
  text-transform: uppercase;
  font-weight: 100;
}

.section-title.is-white span {
  background: #F0D283;
}

.section-title.is-white:before {
  border-top: solid 1px #fff;
}


header .menu.open {
  background-color: whitesmoke;
}

.has-background-gery-light {
  background-color: rgba(245, 245, 245, 0.5);
}

#floor,
#apartament {
  background-color: rgba(245, 245, 245, 0.5);
}

.has-background-purple {
  background-color: #221C35;
}

.has-background-gold {
  background-color: #FCB017;
}

.has-background-black {
  background-color: #000;
}

.has-background-white {
  background-color: white;
}

.is-white {
  color: white;
}

.is-gold {
  color: #FCB017;
}

.is-purple {
  color: #221C35;
}

.tab {
  background-color: #221C35;
}

.button-danger {
  background-color: #221C35;
  border: 1px solid #221C35;
  color: white;
}

.button-danger:hover {
  background-color: transparent;
  border: 1px solid #221C35;
  transition: 0.65s;
  color: #221C35;
}

.button-danger-two {
  background-color: #221C35;
  border: 1px solid #221C35;
  color: white !important;
}

.button-danger-two:hover {
  background-color: white;
  border: 1px solid #221C35;
  transition: 0.65s;
  color: #221C35 !important;
}

#menu a,
#menu span,
#menu i {
  color: #221C35;
}

#menu a:hover {
  transition: 0.35s;
  color: #FCB017;
}

header .menu.open {
  background-color: #221C35;
}

#menu.has-background-purple .menu.open a,
#menu.has-background-purple a,
#menu.has-background-purple span,
#menu.has-background-purple i {
  color: #fff;
}

header .brand-logo path,
header .brand-logo polygon {
  fill: #221C35;
}

header.has-background-purple .brand-logo path,
header.has-background-purple .brand-logo polygon {
  fill: #fff;
}

#menu.has-background-purple a:hover {
  transition: 0.35s;
  color: #FCB017;
}

header.has-background-purple .brand-logo:hover path,
header.has-background-purple .brand-logo:hover polygon {
  transition: 0.35s;
  fill: #FCB017;
}

#menu ul li a.active {
  color: #FCB017;
}

.mySlides1,
.mySlides2 {
  display: none;
}

/* Slideshow container */

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.slideshow-container img {
  vertical-align: middle;
  width: 100%;
}

/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border: 1px solid #F0D283;
  background-color: #F0D283;
  font-size: 1.5rem;
  transition: 0.6s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.75;
}

.prev:after {
  content: "\2190";
  color: #fff;
}

/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 0;
}

.next:after {
  content: "\2192";
  color: #fff;
}

/* On hover, add a grey background color */

.prev:hover,
.next:hover {
  opacity: 1;
  transition: 0.65s;
}

/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* The actual timeline (the vertical ruler) */

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */

.timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background-color: #ccc;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* container-time around content */

.container-time {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  color: #ccc;
}

.container-time.active {
  color: #221C35;
  box-shadow: 0 0px 35px rgba(34, 28, 53, 0.55);
}

/* The circles on the timeline */

.container-time::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  right: 0;
  background-color: white;
  border: 2px solid #ccc;
  top: 25%;
  border-radius: 50%;
  z-index: 1;
}

.container-time.active::after {
  background-color: #fff;
  border: 2px solid #221C35;
}

.container-time.left.active::before {
  content: "";
  position: absolute;
  border-right: 6px solid #221C35;
  height: 1;
  left: 100.8%;
  z-index: 1;
  top: 0;
  display: block;
  height: 100%;
}

.container-time.right.active::before {
  content: "";
  position: absolute;
  border-right: 6px solid #221C35;
  height: 1;
  left: -3.3%;
  z-index: 1;
  top: 0;
  display: block;
  height: 100%;
}

/* Place the container-time to the left */

.left {
  left: 0;
}

/* Place the container-time to the right */

.right {
  left: 50%;
}

/* Fix the circle for container-times on the right side */

.right::after {
  left: -16px;
}

/* The actual content */

.content {
  padding: 20px 30px;
  background-color: transparent;
  position: relative;
  border-radius: 6px;
}

.active .content h3 {
  border-bottom: 1px solid rgba(34, 28, 53, 0.55);
}

.content h3 {
  font-size: calc(1.5rem + 0.25vw);
  border-bottom: 1px solid rgba(34, 28, 53, 0.15);
  padding-bottom: 1rem;
  font-weight: 300;
  line-height: 0.9;
}

@media screen and (max-width: 70em) {
  .container-time.active {
    box-shadow: 0 0px 1px rgba(34, 28, 53, 0.55);
  }

  .container-time.left.active::before {
    left: 100.8%;
  }

  .container-time.right.active::before {
    content: "";
    left: -3.3%;
  }
}

/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 70em) {
  /* Place the timelime to the left */

  .timeline::after {
    left: 0;
  }

  .container-time.left.active::before,
  .container-time.right.active::before {
    content: "";
    left: -0.8%;
  }

  /* Full-width container-times */

  .container-time {
    width: 100%;
    padding: 0 0 0 1rem;
  }

  /* Make sure that all arrows are pointing leftwards */

  .container-time::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */

  .left::after,
  .right::after {
    left: -1.5%;
  }

  /* Make all right container-times behave like the left ones */

  .right {
    left: 0%;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: auto;
  max-width: 100vw;
  overflow-x: hidden;
}

body{
    font-family: 'Roboto', sans-serif;
    background-color: black ;
}

#home {
  background-image: url("/public/images/Background_Fantastasticaart_1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    padding: 0 2rem;
    /*animation: slide 18s infinite;*/
}


.z-index-1{
    z-index:1;
}
.black-shadow{
    min-width:600px;
    filter: blur(30px);
    height: 70%;
    width: 50%;
    position: absolute;
    position: absolute;
    z-index: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.left-modal {
  background-image: url("/public/images/snimka1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

h1 {
  margin-bottom: 0;
  font-family: 'STIX Two Text', serif;
}

.text-max-width{
    max-width: 600px;
    padding: 1rem 0rem;
    line-height: 1.75;
    width: 90%;
    font-size: 1rem;
}
.button.float-right{
    float: right;
}
.button {
  padding: 1rem 2rem;
  margin: 1rem auto;
  text-transform: lowercase;
  font-size: calc(0.95rem + 0.15vw);
  letter-spacing: calc(0.05rem + 0.15vw);
  cursor: pointer;
    border-radius: 0.5em;
}
header{
   width: 100vw;
   position: absolute;
   z-index: 1;
}
.logo{
    font-size: 1.85rem;
    font-weight: 400;
    padding-left: 3rem;
}

.button.button-info {
  background-color: black;
  border: 1px solid #fff;
  color: white;
}

.button.button-info:hover {
  transition: 0.35s;
  background-color: transparent;
  color: white;
  border: 1px solid rgba(0,0,0,0);
}

.button.button-danger {
  background-color: #656666;
  border: 1px solid #656666;
  color: white;
}
.button.button-send{
    float:right;
    right:0;
}
.button.button-send{
    background-color: black;
    border: 1px solid black;
    color: white;
    font-size: 0.85rem;
}
.button.button-close{
    background-color: white;
    border: 1px solid #656666;
    color: #656666;
    font-size: 0.85rem;
}
.button.button-send:hover {
  transition: 0.35s;
  background-color: transparent;
  color: black;
  border: 1px solid black;
}
.button.button-close:hover {
  transition: 0.35s;
 opacity:0.65;
}
.button.button-danger{
    display:block;
}
.button.button-danger:hover {
  transition: 0.35s;
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

.modalOverlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  z-index: 11;
  cursor: pointer;
}

.SlideModalBottomContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.SlideModalBottom {
  min-width: 50vw;
  background-color: #ffffff;
  position: absolute;
  z-index: 12;
}

.SlideModalBottom button {
  float: left;
}

input,
textarea {
  width: 90%;
  padding: 1rem;
  margin-bottom: 2rem;
  border: 0;
  border-bottom: 1px solid #656666;
}

textarea {
  resize: vertical;
}

.padding-3 {
  padding: 3rem;
}

.modal-text {
  max-width: 25vw;
}

.modal-text p {
  margin-bottom: 2rem;
}

.close-modal {
  position: absolute;
}

.close-modal:after,
.close-modal:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0 !important;
  width: 1.855555rem;
  height: 1px;
  display: block;
  background: #fff !important;
  zoom: 1;
  transition: all 0.4s ease-in-out;
}

.close-modal:before {
  transform: rotate(-45deg);
}

.close-modal:after {
  transform: rotate(45deg);
}

.close {
  z-index: 991;
  width: 3rem;
  height: 3rem;
  position: fixed;
  top: 5em;
  right: 5em;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.close:hover {
  opacity: 0.25;
  transition: 0.35s;
}

.alert {
  position: absolute;
  width: 100vw;
  background: black;
  padding: 1rem;
  text-align: center;
  color: white;
  font-size: calc(0.75rem + 0.5vw);
  font-weight:100;
}

.alert .closebtn {
  right: 1rem;
  font-weight: 100;
  font-size: calc(1rem + 0.5vw);
  position: fixed;
  cursor: pointer;
}

.alert .closebtn:hover {
  transition: 0.35s;
  opacity: 0.55;
}
textarea{
    max-height:250px;
}

@media (min-width: 70em) {
  .SlideModalBottom {
    min-width: 50vw;
  }
}

@media (max-width: 70em) {
    .logo{
        padding-left: 0;
        width: 100%;
    }
    header{
        text-align: center;
    }
    .flex h1{
        padding-top: 7rem;
    }
    .button.float-right{
        float: left;
    }
  .SlideModalBottom {
    min-width: 100vw;
  }

  .left-modal {
    display: none;
  }

  .modal-text {
    max-width: 100%;
  }

  .close-modal:after,
  .close-modal:before {
    background-color: #656666 !important;
  }
    footer{
        position: relative;
        background: black;
    }
}

@keyframes slide {
    0%{
        opacity:1;
        background-image: url(/public/images/Background_Fantastasticaart_1.jpg);
    }
    49%{ opacity:1;}
    50%{
        opacity:1;
        background-image: url(/public/images/Background_Fantastasticaart_2.jpg);
    }
    51%{ opacity:1;}
    99%{ opacity:1;}


}