import styled from 'styled-components';
import circle from '../../../assets/images/circle.png';
import circleActive from '../../../assets/images/circle2.png';
export const Container = styled.div `
  position: fixed;
  z-index: 1000;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
  background-image: url(${({ background }) => background});

  img {
    object-fit: contain;
  }

  .slide {
    height: 100vh;
    position: relative;

    img {
      width: 90vw;
      max-width: 500px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .red-button {
    background-color: rgb(227, 7, 24);
    border: none;
    border-radius: 2.5vw;
    padding: 1.2vh 5vw;
    color: #fff;
    margin: 0 auto;
    display: block;
    font-size: 2.3vh;
    width: 50vw;
    box-shadow: 0 0 20px #00000030;

    &.next {
      position: absolute;
      left: 50%;
      bottom: 17vh;
      transform: translatex(-50%);
    }
  }

  .red-button:disabled {
    opacity: 0.6;
  }

  .slick-dots {
    position: absolute;
    bottom: 13vh;
  }

  li {
    background-image: url(${circle});
    background-size: 100% 100%;
    width: 1.5vh !important;
    height: 1.5vh !important;

    &.slick-active {
      background-image: url(${circleActive});
    }

    button:before {
      content: '' !important;
    }
  }
`;
//# sourceMappingURL=styles.js.map