/*
Theme Name: Boletos Store
Theme URI: https://mktsubmarine.com
Author: Wybie Studio x MKT Submarine
Author URI: https://mktsubmarine.com
Description: Tema exclusivo para boletera 'Boletos Store'.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: boletostorexws
*/

:root {
    --azulBS : #004a98;
    --rojoBS : #ED1C24;
}
html {
    box-sizing : border-box;
    font-size  : 62.5%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    font-size   : 16px;
    font-size   : 1.6rem;
    line-height : 1.5;
}

*, *:before, *:after {
    box-sizing : inherit;
}

h1, h2, h3, h4 {
    font-family : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h1 {
    font-size : 6rem;
}

h2 {
    font-size : 4.8rem;
}

h3 {
    font-size : 3.6rem;
}

h4 {
    font-size : 1.8rem;
}

a:link,
a:visited {
    text-decoration : none;
    color: var(--azulBS);
}

a:hover,
a:active {
    color: var(--rojoBS);
}

ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
}

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

.container {
    max-width : 1000px;
    width     : 95%;
    margin    : 0 auto;
    text-align: center;
    padding: 5rem 0;
}

span {
    display: block;
}

.logotype {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 3rem;
    perspective: 1000px;
}

.logotype svg:first-of-type {
    width: 18%;
}

#logo {
    animation: flip-horizontal 5s linear infinite;
    transform-style: preserve-3d;
    transition: ease-in-out;
    overflow: visible;
    margin-bottom: 2rem;
  }
  
  @keyframes flip-horizontal {
    0% {
      transform:scale(.8);
      transform: rotateY(0deg);
    }
    25% {
      transform: scale(1);
      transform: rotateY(180deg);
    }
    50% {
        transform:scale(.8)
      }
      75% {
        transform: scale(1);
      }
      100% {
        transform:scale(.8);
        transform: rotateY(0deg);
      }
  }
  
  .hidden {
    display: none;
  }

  .site-header {
    margin: 0 auto;
    padding: 0;
  }


  .slicknav_menu {
    display: block;
    background-color: #FFF;
    position: relative;
  }

  .slicknav_collapsed {
    background-color: #EEE;
    padding: 1.5rem;
  }

  .slicknav_collapsed span.slicknav_icon-bar {
    background-color: var(--azulBS);
  }

  .slicknav_open {
    background-color: var(--azulBS);
    padding: 1.5rem;
    border-radius: .5rem;
  }

  .slicknav_nav {
    position: absolute;
    right: 6rem;
    top: 3rem;
  }

  .slicknav_nav .menu-item a {
background-color: #EEE;
    padding: 1.5rem;
    border-radius: .5rem;
  }

  .slicknav_nav .menu-item a:hover {
    background-color: var(--azulBS);
    padding: 1.5rem;
    color: #FFF;
  }


  .logo {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 3rem;
}

@media (min-width: 1200px) {
.logo {
  width: 25%;
  margin: 0 auto;
  margin-bottom: 3rem;
}
}

.promo-container {
    position: relative;
    width               : 100%;
    height              : 40rem;
    background          : url(assets/banner-fest-mov_comp.png);
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center center;
}

@media (min-width: 1200px) {
.promo-container {
  position: relative;
  width               : 1000px;
  height              : 417px;
  background          : url(assets/banner-fest_comp.png);
  background-size     : cover;
  background-repeat   : no-repeat;
  background-position : center center;
}
}

.option-one {
    position: absolute;
    left: 3rem;
    bottom: 3rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: none;
    border: 1px solid #FFF;
    color: #FFF;
    background-color: transparent;
    transform: scale(1);
    transition: .5s all ease-in-out;
}

.option-two {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: none;
  border: 1px solid #FFF;
  color: #FFF;
  background-color: transparent;
  transform: scale(1);
  transition: .5s all ease-in-out;
}

.option-one:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.option-two:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.half {
  display: block;
  width: 50%;
  float: left;
  padding: 3rem;
}

.site-content {
  text-align: justify;
}