@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:300italic,300,400italic,400,500,500italic,600,600italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,500,500italic,600,600italic,700,700italic");
/* VARIABLE DECLARATIONS */
/* MIXINS */
/******************************************************/
/******************* START OF CSS *********************/
/******************************************************/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

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

body {
  font-family: "Cormorant Garamond";
  font-size: 24px;
  border: 0px solid blue;
  width: 100%;
  height: 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: #ffd22a;
  text-decoration: none; }

/******************************************************/
/********************** HEADER ************************/
/******************************************************/
.header {
  position: absolute;
  font-family: "Roboto Condensed";
  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; }

#buy-button-1-cont {
  position: relative;
  top: 0;
  width: 100%;
  height: 60px;
  border: 0px solid red; }

#buy-button-2-cont {
  position: relative;
  top: 0;
  display: inline-block;
  width: 100%;
  height: 60px;
  border: 0px solid red; }

#buy-button-3-cont {
  position: relative;
  top: 0;
  display: inline-block;
  width: 100%;
  height: 60px;
  border: 0px solid red; }

#buy-button-intro-cont {
  position: relative;
  top: 0;
  display: inline-block;
  width: 100%;
  height: 60px;
  border: 0px solid red; }

#buy-button-4-cont {
  position: relative;
  top: 0;
  width: 100%;
  display: inline-block;
  height: 2.7vw;
  border: 0px solid red; }

#buy-button-5-cont {
  position: relative;
  top: 0;
  width: 100%;
  display: inline-block;
  height: 2.7vw;
  border: 0px solid red; }

#buy-button-6-cont {
  position: relative;
  top: 0;
  width: 100%;
  display: inline-block;
  height: 2.7vw;
  border: 0px solid red; }

#buy-button-7-cont {
  position: relative;
  top: 0;
  width: 100%;
  display: inline-block;
  height: 2.7vw;
  border: 0px solid red; }

#buy-button-8-cont {
  position: relative;
  top: 0;
  width: 100%;
  display: inline-block;
  height: 2.7vw;
  border: 0px solid red; }

#buy-button-9-cont {
  position: relative;
  top: 0;
  width: 100%;
  display: inline-block;
  height: 2.7vw;
  border: 0px solid red; }

.buy-button-1 {
  position: absolute;
  left: 50%;
  transform: translateY(-30%) translateX(-50%);
  width: 15vw; }

.buy-button-4 {
  position: absolute;
  left: 50%;
  transform: translateY(-34%) translateX(-50%);
  width: 100%; }

.buy-button-6 {
  position: absolute;
  left: 50%;
  transform: translateY(-34%) translateX(-50%);
  width: 100%; }

.buy-button-7 {
  position: absolute;
  left: 50%;
  transform: translateY(-34%) translateX(-50%);
  width: 100%; }

.buy-button-8 {
  position: absolute;
  left: 50%;
  transform: translateY(-34%) translateX(-50%);
  width: 100%; }

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

/******************************************************/
/********************** BANNER ************************/
/******************************************************/
#banner {
  position: relative;
  width: 100%;
  height: 49.5vw;
  overflow: hidden;
  background: #000000;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  border: 0px solid blue; }

#mob-banner {
  position: relative;
  display: none;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #000000;
  border: 0px solid blue; }
  @media only screen and (max-width: 600px) {
    #mob-banner {
      display: block; } }

#banner-bg-cont {
  width: 100%;
  height: 100%;
  border: 0px solid red; }
  @media only screen and (max-width: 600px) {
    #banner-bg-cont {
      display: none; } }

#mob-banner-bg {
  position: absolute;
  width: auto;
  height: 100%;
  left: 50%;
  left: 50%;
  transform: translateX(-50%); }

#mob-banner-bg-cont {
  width: 100%;
  height: 100%;
  border: 0px solid red; }

#banner-bg {
  position: fixed;
  z-index: 2;
  width: 60vw;
  height: auto;
  left: 54%;
  top: 70px;
  transform: translateX(-12vw); }

#banner-bg-numbers {
  position: fixed;
  z-index: 3;
  width: 60vw;
  height: auto;
  left: 54%;
  top: 70px;
  opacity: 0;
  will-change: opacity;
  transform: translateX(-12vw); }

#banner-block {
  position: absolute;
  z-index: 2;
  font-family: "Cormorant Garamond";
  top: 50%;
  right: 50%;
  width: 32vw;
  transform: translateX(-5vw) translateY(-50%);
  border: 0px solid green; }
  @media only screen and (max-width: 600px) {
    #banner-block {
      top: 50%;
      left: 50%;
      width: 50vw;
      transform: translateX(-50%) translateY(-50%); } }

#banner-bm-name {
  position: relative;
  display: block;
  font-size: 4.5vw;
  text-align: center;
  color: white;
  border: 0px solid blue; }
  @media only screen and (max-width: 600px) {
    #banner-bm-name {
      font-size: 7vw; } }

#banner-hr {
  position: relative;
  margin: 2vw auto 2vw;
  width: 30vw;
  border: 1px solid white; }
  @media only screen and (max-width: 600px) {
    #banner-hr {
      width: 80%; } }

#banner-tag {
  position: relative;
  margin: 2vw auto;
  margin-bottom: 4vw;
  max-width: 650px;
  font-size: 3vw;
  text-align: center;
  color: white;
  font-variant: small-caps;
  border: 0px solid blue; }
  @media only screen and (max-width: 600px) {
    #banner-tag {
      font-size: 4vw; } }

.down-arrow {
  position: absolute;
  width: 50px;
  z-index: 12;
  height: auto;
  bottom: 20px;
  opacity: 0.4;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  border: 0px solid green; }
  @media only screen and (max-width: 700px) {
    .down-arrow {
      display: none; } }

.down-arrow:hover {
  opacity: 0.8;
  transform: translateX(-50%) scale(1); }

.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: #ffd22a !important; }

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

/******************************************************/
/******************** SECTION 1 ***********************/
/******************************************************/
#section-1 {
  position: relative;
  overflow: hidden;
  height: calc(45vw + 2*70px);
  background: #000;
  border: 0px solid red; }

#section-1-title {
  position: relative;
  color: #FFF;
  z-index: 3;
  font-size: 2.3vw;
  width: 40vw;
  left: 8vw;
  margin: 15vw 0;
  line-height: 1.2em;
  text-align: left; }
  @media only screen and (max-width: 600px) {
    #section-1-title {
      left: 30vw; } }

#section-1 a {
  color: #00C943; }

#section-1 a:hover {
  color: #ffd22a; }

/******************************************************/
/******************** SECTION 2 ***********************/
/******************************************************/
#section-2 {
  position: relative;
  z-index: 10;
  background: #FFF;
  overflow: hidden;
  height: auto;
  padding-top: 10vw;
  border: 0px solid red; }

#section-2a {
  position: relative;
  overflow: hidden;
  height: auto;
  z-index: 10;
  background: #FFF;
  border: 0px solid red; }

#bacch-dsp-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: white;
  text-align: center;
  padding-top: 5vw;
  z-index: 5; }

#section-2-title {
  position: relative;
  font-size: 1.8vw;
  width: 40vw;
  line-height: 1.2em;
  left: 7vw;
  text-align: left;
  margin: 4vw 0 6vw; }

#dsp-screens {
  position: absolute;
  top: 0;
  left: 48vw;
  width: 45vw; }

#award-screens {
  position: absolute;
  top: 0;
  left: 24vw;
  width: 10vw; }

#section-2a a {
  color: #00C943; }

#section-2a a:hover {
  color: #ffd22a; }

/******************************************************/
/******************** SECTION 3 ***********************/
/******************************************************/
#section-3 {
  position: relative;
  overflow: hidden;
  z-index: 10;
  background: #FFF;
  height: 40.5vw;
  border: 0px solid red; }

#babyface-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: white;
  text-align: center;
  padding-top: 5vw;
  z-index: 5; }

#section-3a {
  position: relative;
  overflow: hidden;
  height: auto;
  z-index: 10;
  background: #FFF;
  border: 0px solid red; }

#section-3-title {
  position: relative;
  color: black;
  font-size: 1.8vw;
  width: 40vw;
  line-height: 1.2em;
  left: 7vw;
  text-align: left;
  margin: 4vw 0 8vw; }

#babyface {
  position: absolute;
  top: 0;
  left: 40vw;
  width: 60vw; }

#section-3a a {
  color: #00C943; }

#section-3a a:hover {
  color: #ffd22a; }

/******************************************************/
/******************** SECTION 4 ***********************/
/******************************************************/
#section-4 {
  position: relative;
  overflow: hidden;
  height: auto;
  z-index: 10;
  background: #000;
  padding: 3vw 0 0vw;
  border: 0px solid red; }

#bacch-bm-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: black;
  color: white;
  text-align: center;
  padding-top: 5vw;
  z-index: 5; }

#section-4a a {
  color: #00C943; }

#section-4a a:hover {
  color: #ffd22a; }

#section-4a {
  position: relative;
  overflow: hidden;
  height: auto;
  z-index: 10;
  background: #000;
  border: 0px solid red; }

#section-4-title {
  position: relative;
  color: white;
  font-size: 1.8vw;
  width: 40vw;
  line-height: 1.2em;
  left: 7vw;
  text-align: left;
  margin: 4vw 0 8vw; }

#bacch-bm {
  position: absolute;
  top: 0vw;
  left: 40vw;
  width: 55vw; }

/***** CONFIGS *****/
#configs-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: white;
  color: #000;
  text-align: center;
  padding-top: 2vw;
  z-index: 5; }

#configs-label {
  width: auto;
  display: inline-block; }

#configs-section {
  position: relative;
  overflow: hidden;
  height: auto;
  z-index: 10;
  background: #FFF;
  padding-bottom: 80px;
  border: 0px solid red; }
  @media only screen and (max-width: 600px) and (min-width: 600px) {
    #configs-section {
      height: 525px; } }

#configs-section-title {
  position: relative;
  color: white;
  font-size: 2vw;
  width: 40vw;
  line-height: 1.2em;
  left: 7vw;
  text-align: left;
  margin: 4vw 0 8vw; }

#input-dropdown {
  position: relative;
  display: inline-block;
  width: 49%;
  text-align: center;
  font-size: 1.5vw;
  line-height: 2vw;
  margin: 3vw 0 0;
  padding-left: 3vw; }

#output-dropdown {
  position: relative;
  display: inline-block;
  width: 49%;
  text-align: center;
  font-size: 1.5vw;
  line-height: 2vw;
  margin: 3vw 0 0;
  padding-left: 2vw; }

#dropdown-in, #dropdown-out {
  font-size: 1.2vw; }

#config-container {
  height: auto;
  width: 100%;
  text-align: center;
  margin-top: 3vw; }

#cp {
  position: relative;
  display: inline-block;
  height: 43vw; }

.ic {
  position: absolute;
  display: none;
  height: 43vw; }

#ic1 {
  display: block;
  left: -1.5vw; }

#ic2 {
  left: 3.5vw; }

#ic3 {
  left: 2vw; }

#ic4 {
  left: 3vw; }

#ic5 {
  left: 3vw; }

.oc {
  position: absolute;
  z-index: 5;
  display: none;
  height: 43vw; }

#oc1 {
  display: block;
  left: 54vw; }

#oc2 {
  left: 53.5vw; }

#oc3 {
  left: 53.5vw; }

/******************************************************/
/******************** SECTION 5 ***********************/
/******************************************************/
#section-5 {
  position: relative;
  overflow: hidden;
  height: auto;
  z-index: 10;
  background: #FFF;
  border: 0px solid red;
  padding: 0 0 2vw; }

/******************************************************/
/******************** SECTION 5 ***********************/
/******************************************************/
#section-6 {
  position: relative;
  overflow: hidden;
  z-index: 10;
  background: #FFF;
  height: auto;
  border: 0px solid red;
  text-align: center; }

#insignia {
  position: relative;
  display: inline-block;
  width: 15vw;
  opacity: 0.4; }

/******************************************************/
/******************** LAST SECTION ***********************/
/******************************************************/
#last-section {
  position: relative;
  background: #FFF;
  z-index: 10;
  overflow: hidden;
  height: auto;
  border: 0px solid red; }

#purchase-email {
  width: 100%;
  background: #FFF;
  text-align: center;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.1vw;
  margin: 1vw 0 4vw;
  font-size: 2vw;
  left: 50%;
  transform: translateX(-50%); }

#purchase-hr {
  position: relative;
  width: 50%;
  border: 1px solid black;
  margin: 0 0 4vw;
  left: 50%;
  transform: translateX(-50%); }

#bacch4mac-quote {
  width: 80%;
  background: #FFF;
  text-align: center;
  position: relative;
  font-weight: 600;
  line-height: 2.5vw;
  letter-spacing: 0.1vw;
  margin: 0 0 4vw;
  font-size: 1.7vw;
  left: 50%;
  transform: translateX(-50%); }

#last-section a {
  color: #00C943; }

#last-section a:hover {
  color: #ffd22a; }

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

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

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

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

/******************************************************/
/********************* 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: 2vw;
  padding-bottom: 1vw;
  font-size: 2vw;
  border: 0px solid blue; }

.sp-chart {
  margin: 0px 12vw;
  border-collapse: separate;
  border-spacing: 5px; }

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

.chart-title {
  font-weight: 700;
  font-size: 1em !important;
  line-height: 4vw;
  letter-spacing: 1.5px; }

.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; }

.tr-no-bg td {
  position: relative;
  background: none; }

.td-shipping {
  font-size: 1.5vw !important;
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.2vw;
  text-align: center; }

.tr-prices td {
  font-size: 2.2vw !important;
  font-weight: bold;
  letter-spacing: 0.1vw; }

.return-policy {
  position: relative;
  font-size: 1.2vw;
  line-height: 1.6vw;
  width: 70%;
  margin-top: 3vw;
  left: 50%;
  transform: translateX(-50%); }

.return-policy a {
  color: #00C943; }

.return-policy a:hover {
  color: #ffd22a; }

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

.features-col {
  text-align: left;
  padding-left: 1vw !important;
  width: 40%; }

.features-col a {
  color: #00C943; }

.features-col a:hover {
  color: #ffd22a; }

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

.pro-col, .a-col, .ahp-col, .intro-col {
  width: 15%;
  text-align: center;
  position: relative; }

.typical-use {
  font-size: 1.4vw;
  color: #58862d; }

.general-desc {
  font-size: 1.4vw;
  color: #cb7b26; }

.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 {
  position: relative;
  z-index: 10;
  background: #FFF;
  font-family: "Roboto Condensed";
  font-size: 60%;
  padding-top: 40px;
  padding-bottom: 30px;
  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 {
  font-family: "Roboto Condensed";
  position: absolute;
  height: 50px;
  width: 90%;
  font-size: 60%;
  padding-top: 10px;
  border-top: 1px solid #CCC;
  margin-top: 0;
  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%; }

.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; } }