/* VARIABLE DECLARATIONS */
/* MIXINS */
/******************************************************/
/******************* START OF CSS *********************/
/******************************************************/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  margin: 0; }

body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 24px;
  border: 0px solid blue;
  width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

a:hover {
  color: #00C943;
  text-decoration: none; }

/******************************************************/
/********************** HEADER ************************/
/******************************************************/
.header {
  position: absolute;
  width: 100%;
  border: 0px solid red;
  z-index: 10;
  background: white; }

.nav {
  width: 100%;
  height: 70px; }

.navtag {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  background: #EFEFEF;
  border-bottom: 1px solid #DDD; }

.navtag p {
  position: absolute;
  font-family: "Cormorant Garamond";
  font-size: 0.6em;
  font-style: italic;
  color: #000;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  visibility: hidden; }

.navtag-active {
  height: 45px;
  border-bottom: 1px solid #DDD; }

.header-logo {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  width: 170px;
  height: 100%;
  border: 0px solid green; }
  @media only screen and (max-width: 575px) {
    .header-logo {
      width: 100%;
      margin: 0; } }

.header-logo-img {
  position: absolute;
  height: 65%;
  top: 50%;
  transform: translateY(-50%);
  border: 0px solid blue; }
  @media only screen and (max-width: 575px) {
    .header-logo-img {
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%); } }

.product-list {
  position: relative;
  font-size: 0;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  border: 0px solid red; }
  @media only screen and (max-width: 575px) {
    .product-list {
      display: none; } }

.product {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 100%;
  line-height: 70px;
  vertical-align: top;
  color: #000000;
  font-size: 16px;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  border: 0px solid green;
  -webkit-transition: background 0.1s ease-in-out;
  -moz-transition: background 0.1s ease-in-out;
  -ms-transition: background 0.1s ease-in-out;
  -o-transition: background 0.1s ease-in-out;
  transition: background 0.1s ease-in-out; }

.product-active {
  background: #EFEFEF; }

/******************************************************/
/******************* BODY SECTIONS ********************/
/******************************************************/
.header-spacer {
  background: transparent;
  height: 70px; }

/******************************************************/
/********************** BANNER ************************/
/******************************************************/
.banner {
  position: relative;
  width: 100%;
  height: 45vw;
  overflow: hidden;
  background: #000;
  border: 0px solid blue; }

.quotes {
  position: relative;
  width: 100%;
  height: 240px;
  background: #FFFFFF;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid #DDD; }

.review-slides {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 0px solid red; }

.test-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  border: 0px solid blue; }
  .test-wrapper a:visited {
    color: #000; }

.testimonial {
  position: absolute;
  width: 100%;
  padding: 0 7vw;
  height: auto;
  top: 45%;
  transform: translateY(-50%);
  border: 0px solid red; }

.test-quote {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 20px;
  border: 0px solid blue; }
  @media only screen and (max-width: 575px) {
    .test-quote {
      margin-top: 25px; } }

.test-quote p {
  font-size: 0.9em;
  border: 0px solid red; }

.test-source {
  position: relative;
  width: 100%;
  height: 40%;
  border: 0px solid green; }

.test-logo {
  position: relative;
  width: 100%;
  text-align: center; }

.test-logo img {
  display: inline-block;
  height: 100%; }

.test-author {
  font-size: 0.7em;
  text-align: center;
  border: 0px solid red; }

.more-reviews a {
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.more-reviews a:hover {
  color: #00C943 !important; }

.test-wrapper a:active, .test-wrapper a:focus, .test-wrapper a:hover {
  color: #000; }

/******************************************************/
/********************** MANUAL *************************/
/******************************************************/
#manual {
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 50px 0;
  padding: 0;
  text-align: left;
  border: 0px solid red; }

#manual-block {
  position: relative;
  width: 80%;
  max-width: 600px;
  left: 50%;
  font-size: 75%;
  transform: translateX(-50%);
  border: 0px solid green; }

#manual-block p {
  margin-bottom: 15px; }

#manual-title {
  position: relative;
  font-size: 2em;
  font-weight: 400;
  font-variant: small-caps;
  margin-bottom: 30px;
  border: 0px solid blue; }

#manual a {
  color: #ffd22a; }

#manual a:hover {
  color: #00C943; }

#bacch-insignia {
  width: 100%;
  text-align: center; }

#insignia {
  margin-top: 15px;
  display: inline-block;
  width: 40%;
  opacity: 0.2; }

/******************************************************/
/********************* DEALERS ************************/
/******************************************************/
#dealers {
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 50px 0;
  padding: 0;
  text-align: left;
  border: 0px solid red; }

#dealers-block {
  position: relative;
  width: 80%;
  max-width: 600px;
  left: 50%;
  font-size: 75%;
  transform: translateX(-50%);
  border: 0px solid green; }

#distributors-block {
  position: relative;
  width: 80%;
  max-width: 600px;
  left: 50%;
  font-size: 75%;
  margin-top: 20px;
  transform: translateX(-50%);
  border: 0px solid green; }

.dealer-wrapper {
  padding: 15px 15px;
  border: 1px solid #DDD;
  background-color: #EEE;
  margin: 15px 0;
  -webkit-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; }
  .dealer-wrapper:hover {
    background-color: #FAFAFA;
    border: 1px solid #CCC; }

.dealer-wrapper p {
  margin: 5px 0; }

#dealers-title {
  position: relative;
  font-size: 2em;
  font-weight: 400;
  font-variant: small-caps;
  margin-bottom: 20px;
  border: 0px solid blue; }

/******************************************************/
/********************** TERMS *************************/
/******************************************************/
#terms {
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 50px 0;
  padding: 0;
  text-align: left;
  border: 0px solid red; }

#terms-block {
  position: relative;
  width: 80%;
  max-width: 700px;
  font-size: 85%;
  left: 50%;
  transform: translateX(-50%);
  border: 0px solid green; }
  #terms-block h3 {
    font-size: 0.95em;
    margin-top: 20px;
    margin-bottom: 10px; }
  #terms-block p {
    font-size: 0.9em;
    margin-top: 10px;
    margin-bottom: 10px; }
  #terms-block ol {
    font-size: 0.9em;
    margin-left: 5px;
    margin-bottom: 15px; }

#terms-title {
  margin-bottom: 15px;
  font-variant: small-caps;
  font-size: 2em;
  font-weight: 400; }

/******************************************************/
/********************* PRIVACY ************************/
/******************************************************/
#privacy {
  position: relative;
  overflow: hidden;
  height: auto;
  padding: 50px 0;
  text-align: left;
  border: 0px solid blue; }

#privacy-block {
  position: relative;
  width: 80%;
  max-width: 700px;
  font-size: 85%;
  left: 50%;
  transform: translateX(-50%);
  border: 0px solid blue; }
  #privacy-block h3 {
    font-size: 0.95em;
    margin-top: 20px;
    margin-bottom: 10px; }
  #privacy-block p {
    font-size: 0.9em;
    margin-top: 10px;
    margin-bottom: 10px; }
  #privacy-block ol {
    font-size: 0.9em;
    margin-left: 5px;
    margin-bottom: 15px; }

#privacy-title {
  margin-bottom: 15px;
  font-variant: small-caps;
  font-size: 2em;
  font-weight: 400; }

/******************************************************/
/****************** BACCH-SP SPLIT ********************/
/******************************************************/
.sp-split {
  position: relative;
  width: 100%;
  height: 41vw;
  font-size: 0;
  border: 0px solid red;
  overflow: hidden;
  background: #000;
  font-family: "Cormorant Garamond"; }
  @media only screen and (max-width: 575px) {
    .sp-split {
      height: auto; } }

.sp-flagship {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  font-size: 1.8vw;
  color: #000;
  border-right: 1px solid #DDD; }
  @media only screen and (max-width: 575px) {
    .sp-flagship {
      display: block;
      width: 100%;
      height: 80vw; } }

.sp-dio {
  position: relative;
  vertical-align: top;
  display: inline-block;
  width: 50%;
  height: 100%;
  background: #FFF;
  font-size: 1.8vw;
  border-left: 1px solid #DDD; }
  @media only screen and (max-width: 575px) {
    .sp-dio {
      display: block;
      width: 100%;
      height: 80vw;
      border-left: 0;
      border-top: 2px solid #666; } }

.sp-summary {
  position: absolute;
  width: 100%;
  text-align: center;
  border: 0px solid red;
  padding-top: 30vw;
  color: #EEE;
  z-index: 10; }
  @media only screen and (max-width: 575px) {
    .sp-summary {
      padding-top: 55vw;
      font-size: 3.5vw; } }

.dio-summary {
  position: absolute;
  width: 100%;
  text-align: center;
  border: 0px solid red;
  padding-top: 30vw;
  color: #000;
  z-index: 10; }
  @media only screen and (max-width: 575px) {
    .dio-summary {
      padding-top: 55vw;
      font-size: 3.5vw; } }

.sp-name {
  font-family: "Cormorant Garamond";
  font-weight: 700;
  margin: 0;
  margin-bottom: 5px; }

.sp-mk {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-size: 0.8em;
  margin: 0;
  padding: 0.6vw 0; }

.sp-tag {
  font-size: 0.8em; }

.sp-img {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0; }

.sp-link {
  position: absolute;
  width: 100%;
  text-decoration: none;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out; }

.sp-link:hover {
  text-decoration: none;
  opacity: 1;
  transform: translateY(-0.3vw); }

.sp-comparison {
  position: relative;
  height: auto;
  padding: 15px 0;
  background-color: #444;
  width: 100%;
  text-align: center;
  letter-spacing: 1.5px;
  border-top: 2px solid #DDD;
  color: #EEE;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.7em;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }
  @media only screen and (max-width: 575px) {
    .sp-comparison {
      display: none;
      font-size: 2.5vw; } }
  .sp-comparison:hover {
    cursor: pointer;
    color: #00C943; }

/******************************************************/
/***************** COMPARISON CHART *******************/
/******************************************************/
.chart-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 40px;
  padding-bottom: 60px;
  border: 0px solid blue; }

.sp-chart {
  width: 70%;
  min-width: 900px;
  max-width: 1100px;
  margin: 0px auto;
  border-collapse: separate;
  border-spacing: 5px; }

.cell-hidden {
  background: #FFF !important; }

.chart-title {
  font-weight: 700;
  font-size: 1em !important;
  letter-spacing: 2px; }

.chart-wrapper th {
  background: #FFF;
  padding: 5px;
  text-align: center;
  font-size: 0.8em;
  font-weight: 500; }

.chart-wrapper td {
  background: #EEE;
  padding: 5px;
  font-size: 0.7em; }

.grand-sp-front-img {
  width: 150px;
  margin: 10px; }

.features-col {
  padding-left: 10px !important;
  width: 25%; }

.features-header {
  text-align: left !important;
  vertical-align: bottom; }

.grand-col, .adio-col, .dio-col {
  width: 10%;
  text-align: center;
  perspective: 800px;
  position: relative; }

.card {
  position: relative;
  width: 150px;
  height: 150px;
  border: none;
  background: none;
  margin: 5px auto 15px;
  padding: 0;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.7s; }

.card .front {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.card:hover {
  transform: rotateY(180deg); }

.sp-photo {
  width: 100%;
  height: 100%; }

/******************************************************/
/********************** FOOTER ************************/
/******************************************************/
.footer-top {
  font-size: 60%;
  padding-top: 40px;
  border-top: 1px solid #DDD; }
  @media only screen and (max-width: 600px) {
    .footer-top {
      padding-top: 0; } }

.footer-row {
  text-align: center;
  opacity: 0.5; }

.footer-col {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  margin-right: 60px; }
  @media only screen and (max-width: 600px) {
    .footer-col {
      text-align: center;
      margin: 0;
      padding: 10px 0;
      width: 100%;
      border-bottom: 1px solid #DDD; } }
  .footer-col ul {
    list-style: none;
    margin: 0;
    padding-top: 10px;
    padding-left: 1px; }
  .footer-col li {
    margin-bottom: 5px; }

.footer-last-col {
  margin-right: 0; }
  @media only screen and (max-width: 600px) {
    .footer-last-col {
      border: none; } }

.footer-logo {
  height: 150px;
  margin-top: -10px; }
  @media only screen and (max-width: 600px) {
    .footer-logo {
      padding-top: 25px;
      padding-bottom: 15px;
      display: block;
      width: 100%;
      text-align: center; } }

.full-logo {
  height: 100%;
  cursor: pointer; }

/******************************************************/
/**************** COPYRIGHT & SOCIAL ******************/
/******************************************************/
.footer-bottom {
  position: absolute;
  height: 50px;
  width: 90%;
  font-size: 60%;
  padding-top: 10px;
  border-top: 1px solid #CCC;
  margin-top: 30px;
  margin-bottom: 10px;
  left: 50%;
  transform: translateX(-50%); }
  @media only screen and (max-width: 600px) {
    .footer-bottom {
      margin-top: 0;
      padding-bottom: 60px; } }

.footer-copyright {
  display: inline-block;
  opacity: 0.3;
  border: 0px solid green; }
  @media only screen and (max-width: 575px) {
    .footer-copyright {
      display: block;
      width: 100%;
      text-align: center; } }

.footer-social {
  display: inline-block;
  float: right;
  border: 0px solid green; }
  @media only screen and (max-width: 575px) {
    .footer-social {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 10px; } }

.social-icon {
  opacity: 0.3;
  height: 25px;
  padding-right: 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out; }

.social-icon:hover {
  opacity: 1.0; }

/*******/
.banner-slides {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 0px solid red; }

.banner-slides img {
  width: 100%; }

.banner-slides div {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  height: 100%; }

#bacch4mac-title {
  position: absolute;
  width: auto;
  height: auto;
  font-family: "Cormorant Garamond";
  color: white;
  font-size: 4vw;
  z-index: 10;
  left: 11vw;
  top: 5vw; }

.slick-prev:before, .slick-next:before {
  position: absolute; }

.slick-prev:before {
  left: 0px !important; }

.slick-next:before {
  right: 0px !important; }

/********* LOGO AND VASE ANIMATION *********/
#theoretica-vase {
  position: absolute;
  width: 28%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  z-index: 100;
  border: 0px solid red;
  -webkit-animation: fadeIn 1s ease-in 0.5s forwards, fadeOut 1.5s ease-out 3s forwards;
  -moz-animation: fadeIn 1s ease-in 0.5s forwards, fadeOut 1.5s ease-out 3s forwards;
  -ms-animation: fadeIn 1s ease-in 0.5s forwards, fadeOut 1.5s ease-out 3s forwards;
  -o-animation: fadeIn 1s ease-in 0.5s forwards, fadeOut 1.5s ease-out 3s forwards;
  animation: fadeIn 1s ease-in 0.5s forwards, fadeOut 1.5s ease-out 3s forwards; }
  @media only screen and (max-width: 600px) {
    #theoretica-vase {
      width: 60%; } }

#logo-card {
  position: absolute;
  width: 7.0%;
  height: auto;
  perspective: 1000px;
  z-index: 5;
  pointer-events: auto;
  left: 49.55%;
  top: 50%;
  transform: translateX(-50%) translateY(calc(-50% - 2.9vw));
  border: 0px solid red;
  -webkit-animation: logo-translate 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 4s forwards, fadeOut 2s ease-in-out 6.5s forwards;
  -moz-animation: logo-translate 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 4s forwards, fadeOut 2s ease-in-out 6.5s forwards;
  -ms-animation: logo-translate 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 4s forwards, fadeOut 2s ease-in-out 6.5s forwards;
  -o-animation: logo-translate 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 4s forwards, fadeOut 2s ease-in-out 6.5s forwards;
  animation: logo-translate 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 4s forwards, fadeOut 2s ease-in-out 6.5s forwards;
  -webkit-transition: filter 0.3s ease-in-out;
  -moz-transition: filter 0.3s ease-in-out;
  -ms-transition: filter 0.3s ease-in-out;
  -o-transition: filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out; }
  @media only screen and (max-width: 600px) {
    #logo-card {
      left: 49.2%;
      transform: translateX(-50%) translateY(calc(50% - 6.2vw));
      width: 15%; } }

#logo-card:hover {
  -webkit-filter: contrast(75%);
  filter: contrast(75%);
  cursor: pointer; }

#theoretica-logo-front {
  position: relative;
  display: block;
  width: 100%;
  z-index: 4;
  opacity: 0;
  -webkit-animation: fadeIn 1.5s ease-in 2s forwards, logo-spin 2.8s ease-in-out 3.7s;
  -moz-animation: fadeIn 1.5s ease-in 2s forwards, logo-spin 2.8s ease-in-out 3.7s;
  -ms-animation: fadeIn 1.5s ease-in 2s forwards, logo-spin 2.8s ease-in-out 3.7s;
  -o-animation: fadeIn 1.5s ease-in 2s forwards, logo-spin 2.8s ease-in-out 3.7s;
  animation: fadeIn 1.5s ease-in 2s forwards, logo-spin 2.8s ease-in-out 3.7s; }

#theoretica-logo-back {
  position: absolute;
  top: 1%;
  width: 98%;
  height: 98%;
  background-color: transparent;
  opacity: 0;
  z-index: 3;
  -webkit-animation: fadeIn 0.1s ease-in 1.9s forwards, logo-spin 2.8s ease-in-out 4s;
  -moz-animation: fadeIn 0.1s ease-in 1.9s forwards, logo-spin 2.8s ease-in-out 4s;
  -ms-animation: fadeIn 0.1s ease-in 1.9s forwards, logo-spin 2.8s ease-in-out 4s;
  -o-animation: fadeIn 0.1s ease-in 1.9s forwards, logo-spin 2.8s ease-in-out 4s;
  animation: fadeIn 0.1s ease-in 1.9s forwards, logo-spin 2.8s ease-in-out 4s; }

@keyframes logo-spin {
  0% {
    transform: rotateY(0deg); }
  100% {
    transform: rotateY(360deg); } }
@keyframes logo-translate {
  0% {
    left: 49.6%;
    top: 50%; }
  100% {
    left: 20px;
    top: 80px;
    transform: scale(0.9); } }
@keyframes logo-shift {
  0% {
    left: 20px;
    top: 80px;
    transform: scale(0.9); }
  100% {
    left: 47px;
    top: -207px;
    transform: scale(1.6); } }
@media only screen and (max-width: 600px) {
  @keyframes logo-translate {
    100% {
      left: 0;
      bottom: 100%;
      transform: translateX(20px) translateY(calc(100% + 20px)) scale(1); } } }
#logo-cont {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none; }
  @media only screen and (min-width: 600px) {
    #logo-cont {
      min-height: 55vw; } }

#curtain {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 50;
  -webkit-animation: fadeOut 3s ease-out 7s forwards;
  -moz-animation: fadeOut 3s ease-out 7s forwards;
  -ms-animation: fadeOut 3s ease-out 7s forwards;
  -o-animation: fadeOut 3s ease-out 7s forwards;
  animation: fadeOut 3s ease-out 7s forwards; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeOutTest {
  0% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }
@keyframes fadeInOut {
  0% {
    opacity: 0; }
  25% {
    opacity: 0.5; }
  50% {
    opacity: 1; }
  75% {
    opacity: 0.5; }
  100% {
    opacity: 0; } }

/*# sourceMappingURL=style.css.map */