@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif; }

.showcase {
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100%;
  padding: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url(../img/bg.jpg);
  color: #ffffff;
  z-index: 2;
  transition: 0.5s; }
  .showcase header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 50px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .showcase header .logo {
      width: 10%; }
  .showcase.active {
    right: 300px; }
  .showcase .btn-wrapper {
    padding-top: 1rem;
    display: flex;
    flex-direction: column; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); }

.text {
  text-align: center;
  padding-top: 2.5rem;
  position: relative;
  z-index: 10; }
  .text h2 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 4rem;
    text-transform: uppercase; }
  .text h3 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
    text-transform: uppercase; }
  .text p {
    font-size: 1rem;
    margin: 1rem 0;
    font-weight: 400;
    max-width: 700px; }
  .text a {
    display: inline-block;
    font-size: 1rem;
    background: #ffffff;
    padding: 10px 30px;
    text-decoration: none;
    color: #111;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.01rem;
    transition: 0.4s;
    border-radius: 5rem; }
    .text a:hover {
      letter-spacing: 0.2rem; }

.logo {
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.2rem; }

.toggle {
  cursor: pointer; }

/*X activas toggle ON*/
.toggle.active .fas.fa-times {
  display: block; }

/*Barras ocultas en toggle ON */
.toggle.active .fas.fa-bars {
  display: none; }

/*Barras activas toggle OFF*/
.toggle.active .fas.fa-times {
  display: block; }

/*X oculta en toggle OFF*/
.toggle .fas.fa-times {
  display: none; }

.toggle2 {
  display: relative;
  cursor: pointer; }

/*Barras activas toggle OFF*/
.toggle2.active .fas.fa-times {
  display: block; }

/*X oculta en toggle OFF*/
.toggle2 .fas.fa-times {
  display: none; }

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 2rem;
  z-index: 10;
  font-size: 2rem; }
  .social li {
    list-style: none; }
    .social li a {
      display: inline-block;
      color: #fff;
      margin-right: 1rem;
      transition: 0.5s; }
      .social li a:hover {
        transform: translateY(-1rem); }

.menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .menu .text-wrapper {
    text-align: center;
    margin: 0 20px; }
    .menu .text-wrapper .logo {
      width: 50%;
      height: auto; }
    .menu .text-wrapper h4 {
      padding-bottom: 0.5rem; }
    .menu .text-wrapper p {
      padding-bottom: 1rem; }
    .menu .text-wrapper h5 {
      padding-bottom: 1.5rem; }
    .menu .text-wrapper a {
      display: inline-block;
      font-size: 1rem;
      background: #000;
      padding: 10px 30px;
      text-decoration: none;
      color: #fff;
      margin-top: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.01rem;
      transition: 0.4s;
      border-radius: 5rem; }
      .menu .text-wrapper a:hover {
        letter-spacing: 0.2rem; }
  .menu ul {
    position: relative;
    list-style-type: none; }
    .menu ul a {
      text-decoration: none;
      font-size: 1.5rem;
      color: #111; }
      .menu ul a:hover {
        color: rgba(168, 30, 34, 0.8); }

@media (max-width: 798px) {
  .showcase {
    padding: 40px; }
    .showcase header {
      padding: 10px 50px; }
      .showcase header .logo {
        width: 50%; }
  .text h2 {
    font-size: 3rem; }
  .text h3 {
    font-size: 2rem; } }

#splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 1s; }
  #splash img {
    width: 300px; }
  #splash.fade {
    opacity: 0;
    z-index: -100;
    display: none; }

@media (min-width: 200px) and (max-width: 380px) {
  .showcase {
    padding: 11px; }
    .showcase header {
      padding: 5px 50px; }
      .showcase header .logo {
        width: 30%; }
    .showcase.active {
      right: 200px; }
    .showcase .btn-wrapper {
      padding-top: 0; }
  .social {
    bottom: 0.5rem; }
    .social a:hover {
      transform: translateY(-0.4rem); }
  .text p {
    font-size: 0.7rem; }
  .menu {
    width: 200px; }
    .menu .text-wrapper h5 {
      padding-bottom: 0.2rem; } }