body, html {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: "Gotham-Light"; }

h1 {
  font-size: 24px; }

h2 {
  font-size: 20px; }

h3 {
  font-size: 16px; }

a {
  text-decoration: none;
  color: #414042; }

img {
  width: 100%; }

.header {
  display: table;
  width: 100%;
  text-align: center;
  color: white;
  line-height: 0px;
  font-size: 0px;
  /*  
    background-color: #8F4B68;
    padding: 25px 0px 50px;
    box-sizing: border-box;
    background-image: url('/static/website/img/campaign/flower_kiri_2x.png?89cae6bb748a'), url('/static/website/img/campaign/flower_kanan_2x.png?89cae6bb748a');
    background-repeat: no-repeat, no-repeat;
    background-size: 200px, 200px;
    background-position: left bottom, right bottom;*/ }
  .header h1 {
    font: 50px/50px "Libre-Baskerville";
    clear: both;
    color: #ECC4D4;
    margin-bottom: 0px; }
  .header .logo {
    width: 100%;
    height: auto;
    max-width: 135px;
    float: right;
    margin-right: 50px;
    margin-bottom: 70px; }
  .header img {
    width: 100%; }

.banner {
  width: 100%; }

.main {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: table; }
  .main .video {
    width: 100%; }
  .main h2 {
    font: 37px/42px "Libre-Baskerville";
    color: #B13662;
    text-align: center;
    margin: 83px 0px 30px; }
  .main p {
    font: 20px/31px "Gotham-Light"; }
  .main .center {
    text-align: center; }
  .main .video, .main .spotify {
    display: table; }
  .main .video_block {
    width: 100%;
    margin-top: 60px;
    cursor: pointer; }
  .main .spotify {
    margin-top: 35px; }

.products .column, .actions .column {
  float: left;
  width: 48%;
  margin-right: 4%;
  text-align: center; }
  .products .column:last-child, .actions .column:last-child {
    margin-right: 0px; }

.actions {
  margin: 15px 0px 40px;
  display: table;
  width: 100%;
  max-width: 600px;
  margin: 0 auto; }
  .actions a {
    margin: 0 auto;
    display: table; }
  .actions img {
    max-width: 275px; }
  .actions .button {
    max-width: 275px;
    width: 100%;
    margin: 0 auto;
    background-color: #B13662;
    color: white;
    padding: 14px 0px 12px;
    text-transform: uppercase;
    font: 14px/18px "Gotham-Light";
    border-radius: 5px; }

.actions.buttons {
  margin-bottom: 95px; }
  .actions.buttons .column {
    float: none;
    margin: auto; }

.products {
  width: 100%;
  max-width: 900px;
  margin: 92px auto 25px; }
  .products .column:nth-child(2n) {
    margin-right: 0px; }
  .products h3 {
    font: 37px/42px "roslindale-bold";
    color: #B13662;
    margin: 0px 0px 15px; }
  .products p {
    font: 20px/31px "Gotham-Light";
    margin: 0px; }
  .products img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: table; }
  .products .mobile {
    display: none; }
  .products .website {
    display: block; }

/* start - footer */
.columns {
  display: block; }
  .columns .two-column {
    float: left;
    width: 49%; }
  .columns .two-column {
    margin-right: 2%; }
  .columns .two-column:nth-child(2n) {
    margin-right: 0; }

.bottom-footer:after {
  clear: both;
  content: "";
  display: block; }

.clear {
  clear: both; }

.line {
  border-top: 1px solid white; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.footer-block {
  /*    background-color: #8F4B68;
    height: 148px;

    &:before {
        content: '';
        width: 100%;
        height: 148px;
        background-image: url('/static/website/img/campaign/footer-desktop-flower-2x.png?89cae6bb748a');
        background-repeat: no-repeat;
        background-size: 355px;
        background-position: right bottom;
        position: absolute;
    }
*/
  font-size: 0px; }
  .footer-block a {
    color: white; }
  .footer-block .logo {
    max-width: 155px; }
  .footer-block img {
    width: 100%; }

.footer-wrapper {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0px 20px;
  box-sizing: border-box; }
  .footer-wrapper .brands-logo {
    max-width: 80px;
    margin-right: 20px; }
  .footer-wrapper .apps-wrapper .two-column {
    width: auto; }
  .footer-wrapper .brands-logo:first-child {
    margin-bottom: 14px; }
  .footer-wrapper .columns:first-child {
    padding: 10px 0; }
  .footer-wrapper .two-column-offside:first-child {
    width: 55%;
    margin-right: 2%; }
  .footer-wrapper .two-column-offside:nth-child(2) {
    width: 43%; }
  .footer-wrapper .two-column-offside span {
    color: white;
    font-size: 10px;
    margin-bottom: 5px; }
  .footer-wrapper .two-column-offside .columns {
    margin-top: 10px; }
  .footer-wrapper .two-column span {
    font-size: 12px;
    color: white; }
  .footer-wrapper .bottom-footer.columns {
    padding: 15px 0;
    font-size: 10px;
    color: white; }
    .footer-wrapper .bottom-footer.columns span {
      margin: 0px 10px;
      font-size: 10px; }

.main-text {
  margin: 60px 0px 0px; }
  .main-text.small {
    margin-top: 20px; }

.apps-wrapper .appstore, .apps-wrapper .playstore {
  border: 1px solid white;
  padding: 4px 12px;
  background: transparent;
  border-radius: 4px;
  text-align: center; }
  .apps-wrapper .appstore span, .apps-wrapper .playstore span {
    font-size: 10px;
    color: white;
    margin-left: 6px;
    position: relative;
    top: -3px; }
  .apps-wrapper .appstore img, .apps-wrapper .playstore img {
    max-width: 15px; }

/* end - footer */
.header, .footer-block {
  position: relative; }
  .header .website, .footer-block .website {
    display: block; }
  .header .mobile, .footer-block .mobile {
    display: none; }

.medsos-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0 auto; }

.medsos {
  float: right;
  right: 4.2%;
  position: relative; }
  .medsos a {
    margin-right: 10px; }
    .medsos a:last-child {
      margin-right: 0px; }
  .medsos img {
    max-width: 22px;
    width: 100%; }

@media only screen and (max-width: 840px) {
  .main, .products, .footer-block {
    box-sizing: border-box;
    padding: 0px 20px; }
  .center.main-text {
    margin: 30px 0px 0px; }
    .center.main-text.small {
      margin-top: 20px;
      margin-bottom: 40px; }
  .medsos-wrapper {
    top: 43%; }
  .medsos {
    float: none;
    right: auto; }
    .medsos img {
      max-width: 25px; }
  .header .website, .footer-block .website, .products .website {
    display: none; }
  .header .mobile, .footer-block .mobile, .products .mobile {
    display: block; }
  .main {
    margin-top: 10px; }
  iframe {
    width: 100%;
    height: 208px; }
  .header {
    background-size: 100px, 100px; }
    .header .logo {
      float: none;
      margin: 0 auto 15px;
      max-width: 110px; }
    .header h1 {
      font-size: 25px;
      line-height: 40px;
      margin: 28px 0px 10px; }
    .header h2 {
      font-size: 14px;
      line-height: 20px; }
  .main h2 {
    font: 24px / 26px "Libre-Baskerville";
    margin: 25px 0px 20px; }
  .main p {
    font-size: 14px;
    line-height: 22px; }
  .main .video_block {
    margin-top: 30px; }
  .main .spotify {
    margin-top: 10px; }
  .actions {
    margin: 5px 0px 0px; }
  .products {
    margin: 45px 0; }
    .products .column {
      width: 100%; }
    .products h3 {
      font-size: 24px;
      line-height: 28px;
      margin-bottom: 10px; }
    .products p {
      font-size: 14px;
      line-height: 22px; }
    .products img {
      max-width: 80%; }
  .actions.buttons {
    margin-bottom: 40px; }
    .actions.buttons .column {
      width: 100%;
      margin: 0px 0px 20px; }
    .actions.buttons a {
      max-width: 100%; }
  .footer-block {
    text-align: center;
    background-image: url("/static/website/img/campaign/flower-1-footer-2x.png?89cae6bb748a"), url("/static/website/img/campaign/flower-2-footer-2x.png?89cae6bb748a");
    background-repeat: no-repeat, no-repeat;
    background-size: 100px, 100px;
    background-position: left top, right top;
    padding: 0px; }
    .footer-block:before {
      content: '';
      display: none;
      background: transparent; }
    .footer-block span.apps {
      font-size: 12px;
      display: table;
      margin: 0px auto 15px; }
    .footer-block .columns .two-column-offside {
      width: 100%; }
    .footer-block .columns .two-column {
      width: 49%; }
    .footer-block .apps-wrapper .appstore, .footer-block .apps-wrapper .playstore {
      padding: 4px 2px; }
      .footer-block .apps-wrapper .appstore span, .footer-block .apps-wrapper .playstore span {
        font-size: 9px;
        margin-left: 0px; }
    .footer-block .columns.bottom-footer span, .footer-block .columns.bottom-footer a {
      font-size: 10px; }
    .footer-block .contact {
      float: left; }
    .footer-block .bottom-footer.columns .text-right span {
      float: right;
      margin: 0px; }
    .footer-block .logo {
      max-width: 110px;
      padding: 8px 0px; } }