@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, p{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
section, article, aside, header, footer, nav, dialog, figure {
  display: block;
}

html {
  height: 100%;
}

body {
  position: relative;
  height: 100%;
  width: 100%;
  background: #fff;
  font-size: 16px;
  color: #949494;
  font-family: 'Open Sans', sans-serif;
}

header {
  background-color: #ff0064;
  height: 173px;
  padding-top: 27px;
}

#logo, #saucylogoHome {
  font-size: 0;
  display: block;
  height: 146px;
  width: 194px;
  margin: 0 auto;
  background: url(../images/logo-privacy.png);
  background-repeat: none;
}

#saucylogoHome {
  height: 253px;
  width: 341px;
  background: url(../images/saucylogoHome.png) no-repeat;
}

.melon_holder {
  top: 150px;
}

.only-mobile {
  display: none;
}

h2#privacyPolice, h2.pink {
  font-size: 40px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;;
  margin-bottom: 30px;
}

h2#privacyPolice span {
  color: #ff0064;
}

h3.h3_bold {
  font-weight: bold;
  font-size: 20px;
  margin: 22px 0;
}

.bold {
  font-weight: bold;
}

header, footer {
  width: 100%;
  overflow: hidden;
}

.container {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  left: 0;
  right: 0;
}

.full {
  height: 100vh;
  width: 100%;
}

.full-x {
  width: 100%;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

#main {
  margin: 50px 0;
}

#privacy_holder p, #privacy_holder h3.h3_bold {
  margin-bottom:  14px;
  line-height: 20px;
}

ul li {
  line-height: 20px;
}

ul{
  list-style: disc;
  margin: 0 0 14px 40px;
}

ul.circle {
  list-style: circle;
}

footer {
  padding-top: 54px;
  margin-top: -54px;
}

#pink_footer {
  height: 400px;
  padding: 50px 0;
  background-color: #ff0064;
  text-align: center;
  color: #fff;
  line-height: 20px;
}

footer p.center {
  font-size: 28px;
  line-height: 30px;
  font-weight: 600;
}

.bold {
  font-weight: bold;
}

#logo_footer {
  background: url(../images/logo-footer.png) no-repeat;
  width: 211px;
  height: 159px;
  display: block;
  margin: 40px auto;
}

#socials {
  width: 171px;
  height: 12px;
  margin: 40px auto;
}

.instagram {
  width: 21px;
  height: 21px;
  display: block;
  background: url(../images/sm-instagram.png) no-repeat;
  margin-right: 49px;
}

.youtube {
  width: 30px;
  height: 21px;
  display: block;
  background: url(../images/youtube-white.png) no-repeat;
}

.facebook {
  width: 10px;
  height: 19px;
  display: block;
  background: url(../images/sm-facebook.png) no-repeat;
}

.twitter {
  width: 24px;
  height: 23px;
  display: block;
  background: url(../images/X-WHITE.png) no-repeat;
}

.melon_footer1 {
  left: -1800px;
  bottom: -60px;
  right: 0;
  margin: 0 auto;
}

.melon_footer2 {
  bottom: -150px;
  right: 0;
  left: 780px;
  margin: 0 auto;
}

.melon_footer3 {
  top: 0px;
  right: 0;
  left: 1600px;
  margin: 0 auto;
}

#home_header {
  background: url(../images/headerBG.jpg) center 0 no-repeat #ff0064;
  height: 1413px;
}

#poggo_banner {
  background: url(../images/poggoFeatured.jpg) center 0 no-repeat;
  height: 806px;
}

#poggo_banner {
  background-position: calc(50% + 115px) 0;
}

#featured_container {
  padding-top: 78px;
}

#featured_description {
  background-color: #2db8ff;
}

#description_text {
  width: 600px;
  color: #fff;
  padding: 105px 0 80px;
}

#description_text p {
  font-size: 15px;
  margin-bottom: 25px;
  line-height: 19px;
}

#game_video {
  margin-top: 97px;
}

.video_mask {
  cursor: pointer;
}

#info_container {
  padding: 70px 0;
}

#info_container p {
  color: #2db8ff;
  font-size: 25px;
  margin-bottom: 25px;
  line-height: 28px;
}

#info_left {
  width: 530px;
}

#download_links {
  margin-top: 65px;
}

.googlePlay {
  margin-left: 42px;
}



#game_video {
  width: 560px;
  height: 315px;
}




.theme {
  top: 745px;
  left: -370px;
}

.melon_holder {
  left: 0;
  margin: 0 auto;
  right: 0;
  width: 10px;
}

.upleft {
  top: -630px;
  left: -1775px;
  display: block;
  -webkit-animation: upLeftAnimation 40s;
  -moz-animation: upLeftAnimation 40s;
  -ms-animation: upLeftAnimation 40s;
  -o-animation: upLeftAnimation 40s;
  animation: upLeftAnimation 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 4;
}

.leftmiddle {
  top: 680px;
  left: -1200px;
  -webkit-animation: leftmiddleAnimation 50s;
  -moz-animation: leftmiddleAnimation 50s;
  -ms-animation: leftmiddleAnimation 50s;
  -o-animation: leftmiddleAnimation 50s;
  animation: leftmiddleAnimation 50s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}

.leftdown {
  top: 1020px;
  left: -950px;
  -webkit-animation: leftdownAnimation 30s;
  -moz-animation: leftdownAnimation 30s;
  -ms-animation: leftdownAnimation 30s;
  -o-animation: leftdownAnimation 30s;
  animation: leftdownAnimation 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}

.upright {
  right: -1150px;
  -webkit-animation: uprightAnimation 30s;
  -moz-animation: uprightAnimation 30s;
  -ms-animation: uprightAnimation 30s;
  -o-animation: uprightAnimation 30s;
  animation: uprightAnimation 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}

.middle {
  left: -535px;
  top: 100px;
  -webkit-animation: middleAnimation 4s;
  -moz-animation: middleAnimation 4s;
  -ms-animation: middleAnimation 4s;
  -o-animation: middleAnimation 4s;
  animation: middleAnimation 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 3;
}

.middlemiddleright {
  left: -618px;
  top: 650px;
  -webkit-animation: middlemiddlerightAnimation 60s;
  -moz-animation: middlemiddlerightAnimation 60s;
  -ms-animation: middlemiddlerightAnimation 60s;
  -o-animation: middlemiddlerightAnimation 60s;
  animation: middlemiddlerightAnimation 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 1;
}

.upmiddle {
  left: -700px;
  top: -40px;
  -webkit-animation: upmiddleAnimation 20s;
  -moz-animation: upmiddleAnimation 20s;
  -ms-animation: upmiddleAnimation 20s;
  -o-animation: upmiddleAnimation 20s;
  animation: upmiddleAnimation 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}

.rightmiddle {
  top: 360px;
  right: -920px;
  -webkit-animation: rightmiddleAnimation 20s;
  -moz-animation: rightmiddleAnimation 20s;
  -ms-animation: rightmiddleAnimation 20s;
  -o-animation: rightmiddleAnimation 20s;
  animation: rightmiddleAnimation 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 1;
}

.downmiddle {
  top: 985px;
  right: -440px;
  -webkit-animation: downmiddleAnimation 30s;
  -moz-animation: downmiddleAnimation 30s;
  -ms-animation: downmiddleAnimation 30s;
  -o-animation: downmiddleAnimation 30s;
  animation: downmiddleAnimation 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}

.downright {
  right: -1800px;
  top: 600px;
  -webkit-animation: downrightAnimation 40s;
  -moz-animation: downrightAnimation 40s;
  -ms-animation: downrightAnimation 40s;
  -o-animation: downrightAnimation 40s;
  animation: downrightAnimation 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 4;
}

#privacy_footer a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}



.roller_animation {
  width: 45px;
  height: 65px;
  background-size: 100%;
  -webkit-animation: mouse 2s;
  -moz-animation: mouse 2s;
  -ms-animation: mouse 2s;
  -o-animation: mouse 2s;
  animation: mouse 2s;
  animation-iteration-count: infinite;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../images/arrow.png) no-repeat;
  bottom: 75px;
}






@keyframes upLeftAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-10deg) translate(80px,150px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}



@keyframes leftmiddleAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-15deg) translate(-310px,0px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}



@keyframes leftdownAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-9deg) translate(60px,-60px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}



@keyframes uprightAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
      transform: rotate(20deg) translate(0px,-80px);
  }
  100% {
      transform: rotate(0deg) translate(0px,0px);
  }
}

@keyframes middleAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
      transform: rotate(1deg) translate(0px,10px);
  }
  100% {
      transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes middlemiddlerightAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-160deg) translate(-80px,-130px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes upmiddleAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(15deg) translate(-60px,110px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes rightmiddleAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-5deg) translate(0px,-60px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes downmiddleAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(0deg) translate(-10px,70px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes downrightAnimation {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
      transform: rotate(0deg) translate(100px,-100px);
  }
  100% {
      transform: rotate(0deg) translate(0px,0px);
  }
}
















@keyframes mouse {
  0% {
    opacity: 1;   
    bottom: 75px;
  }
  
  50% {
    opacity: 0.1;
    bottom: 50px;
  }
  
  51% {
    bottom: 75px;
  }
  
  100% {
    opacity: 1;
    bottom: 75px;
  }
}


@keyframes mouse2 {
  0% {
    opacity: 1;   
    bottom: 50px;
  }
  
  50% {
    opacity: 0.1;
    bottom: 20px;
  }
  
  51% {
    bottom: 50px;
  }
  
  100% {
    opacity: 1;
    bottom: 50px;
  }
}


@keyframes mouse3 {
  0% {
    opacity: 1;   
    bottom: 30px;
  }
  
  50% {
    opacity: 0.1;
    bottom: 0px;
  }
  
  51% {
    bottom: 30px;
  }
  
  100% {
    opacity: 1;
    bottom: 30px;
  }
}










@media screen and (min-width:1350px) and (max-width: 1499px) {
  #poggo_banner {
    background: url(../images/featgame.jpg) no-repeat;
    background-position: calc(50% - 15px) -0;
    height: 700px;
  }
}


@media screen and (min-width:1500px) and (max-width: 2100px) {
  #poggo_banner {
    background: url(../images/featgame.jpg) no-repeat;
    background-position: calc(50% - 15px) 0;
    height: 700px;
  }
}


@media screen and (min-width:1300px) and (max-width: 1349px) {
  #poggo_banner {
    background: url(../images/FEATGAME3.jpg) no-repeat;
    background-position: calc(80% + 35px) 0;
    height: 590px;
  }
}


@media screen and (min-width:992px) and (max-width: 1299px) {
  .container {
    width: 960px;
  }

  #description_text {
    width: 380px;
  }

  #game_video {
    margin: 166px 0;
  }

  #info_left {
    width: 480px;
  }

  #poggo_banner {
    background: url(../images/FEATGAME3.jpg) no-repeat;
    background-position: calc(50% - 35px) 0;
    height: 590px;
  }
}









@media screen and (min-width:768px) and (max-width: 991px) {
  .container {
    width: 720px;
  }

  #description_text {
    float: none;
    margin: 0 auto;
  }

  #game_video {
    margin: 0 auto 100px;
    left: 0;
    right: 0;
    position: relative;;
    width: 540px;
    float: none;
  }

  #info_left {
    margin: 0 auto;
    float: none;
  }

  #download_links {
    float: none;
    width: 500px;
    height: 67px;
    margin: 0 auto;
  }

  #poggo_banner {
    background: url(../images/FEATGAME4.jpg) no-repeat;
    background-position: calc(50% - 35px) 0;
    height: 438px;
  }
}








@media screen and (min-width:576px) and (max-width: 768px) {
  .container {
    width: 540px;
  }

  h2#privacyPolice, h2.pink {
    text-align: center;
    font-size: 32px;
  }

  #poggo_banner {
    background: url(../images/FEATGAME770.jpg) center 100px no-repeat;
    height: 634px;
  }

  #description_text {
    padding: 55px 0 30px;
  }

  #game_video {
    margin: 0 0 55px;
  }

  #video {
    margin: 0 !important;
  }
}








@media screen and (max-width: 575px) {
  .container {
    width: 100% ;
  }

  h2#privacyPolice, h2.pink {
    text-align: center;
    font-size: 30px;
  }

  #description_text, #info_left {
    float: none;
    width: 90%;
    text-align: center;
    margin: 0 5%;
    padding: 50px 0;
  }

  #info_left {
    padding: 0;
  }

  #game_video {
    margin-top: 0;
    float: none;
    width: 100%;
    height: auto;
  }

  #download_links {
    margin: 0 auto;
    float: none;
    width: 200px;
  }

  .googlePlay {
    margin-bottom: 42px;
  }

  #poggo_banner {
    background: url(../images/feat600.jpg) center 100px no-repeat;
    height: 581px;
  }

  #footer_container p {
    font-size: 22px;
    line-height: 24px;
  }

  .googlePlay img {
    width: 202px;
    height: 64px;
  }

  .only-mobile {
    display: block !important;
  }  

  #privacy_holder {
    width: 90%;
    margin: 0 5%;
  }

  #game_video {
    height: auto;
    margin-top: 50px;
  }

  .video_mask {
    left: 50%;
    top: -7.7vh;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    width: 100%
  }

  #video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}












@media screen and (min-width:1576px) and (max-width: 2100px) {
  #home_header {
    height: 1059px;
  }

  #saucylogoHome {
    width: 255.75px;
    height: 189.75px;
    background-size: 100%;
  }

  .theme {
    top: 525px;
    left: -273px;
    width: 553px;
    height: 286.5px;
  }

  .upleft {
    top: -530px;
    left: -1275px;
    display: block;
    width: 774px;
    height: 903px;
  }

  .leftmiddle {
    top: 470px;
    left: -850px;
    width: 372.75px;
    height: 258px;
  }

  .leftdown {
    top: 750px;
    left: -650px;
    width: 289.5px;
    height: 215px;
  }

  .upright {
    top: -50px;
    right: -850px;
    width: 289.5px;
    height: 215px;
  }

  .middle {
    left: -395px;
    top: 40px;
    width: 808.5px;
    height: 535.5px;
  }

  .middlemiddleright {
    left: -458px;
    top: 410px;
    width: 145.5px;
    height: 129.75px;
  }

  .upmiddle {
    left: -480px;
    top: -60px;
    width: 249.75px;
    height: 195.75px;
  }

  .rightmiddle {
    top: 240px;
    right: -680px;
    width: 156px;
    height: 121.5px;
  }

  .downmiddle {
    top: 707px;
    right: -315px;
    width: 113px;
    height: 84px;
  }

  .downright {
    right: -1270px;
    top: 430px;
    width: 915.75px;
    height: 684px;
  }

  .roller_animation  {
    width: 33.75px;
    height: 48.75px;
    background-size: 100%;
  }
}













@media screen and (min-width:1200px) and (max-width: 1575px) {
  header {
    padding-top: 22PX;
  }

  #home_header {
    height: 794.25px;
  }

  #saucylogoHome {
    width: 191px;
    height: 142.3px;
    background-size: 100%;
  }

  .theme {
    top: 358px;
    left: -183px;
    width: 414.75px;
    height: 214.8px;
  }

  .upleft {
    top: -430px;
    left: -1035px;
    display: block;
    width: 580.5px;
    height: 677.25px;
  }

  .leftmiddle {
    top: 330px;
    left: -650px;
    width: 279.5px;
    height: 193.5px;
  }

  .leftdown {
    top: 540px;
    left: -500px;
    width: 217px;
    height: 161.25px;
  }

  .upright {
    top: -80px;
    right: -650px;
    width: 217px;
    height: 161.25px;
  }

  .middle {
    left: -295px;
    top: 0px;
    width: 606px;
    height: 401.5px;
  }

  .middlemiddleright {
    left: -358px;
    top: 310px;
    width: 109px;
    height: 97px;
  }

  .upmiddle {
    left: -380px;
    top: -100px;
    width: 187px;
    height: 147px;
  }

  .rightmiddle {
    top: 180px;
    right: -530px;
    width: 117px;
    height: 91px;
  }

  .downmiddle {
    top: 487px;
    right: -255px;
    width: 84.75px;
    height: 63px;
  }

  .downright {
    right: -1000px;
    top: 300px;
    width: 686.8px;
    height: 513px;
  }

  .roller_animation  {
    width: 25.3px;
    height: 36.5px;
    background-size: 100%;
    bottom: 50px;
    -webkit-animation: mouse2 2s;
    -moz-animation: mouse2 2s;
    -ms-animation: mouse2 2s;
    -o-animation: mouse2 2s;
    animation: mouse2 2s;
    animation-iteration-count: infinite;
  }

  .melon_footer1 {
    left: -1300px
  }

  .melon_footer3 {
    left: 1000px;
  }
}














@media screen and (min-width:768px) and (max-width: 1199px) {
  header {
    padding-top: 18px;
  }

  #home_header {
    height: 595.5px;
  }

  #saucylogoHome {
    width: 143px;
    height: 106.7px;
    background-size: 100%;
  }

  .theme {
    top: 242px;
    left: -150px;
    width: 311px;
    height: 161px;
  }

  .upleft {
    top: -330px;
    left: -755px;
    display: block;
    width: 435.3px;
    height: 508px;
    -webkit-animation: upLeftAnimation2 40s;
    -moz-animation: upLeftAnimation2 40s;
    -ms-animation: upLeftAnimation2 40s;
    -o-animation: upLeftAnimation2 40s;
    animation: upLeftAnimation2 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .leftmiddle {
    top: 210px;
    left: -450px;
    width: 209.6px;
    height: 145px;
    -webkit-animation: leftmiddleAnimation2 50s;
    -moz-animation: leftmiddleAnimation2 50s;
    -ms-animation: leftmiddleAnimation2 50s;
    -o-animation: leftmiddleAnimation2 50s;
    animation: leftmiddleAnimation2 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .leftdown {
    top: 370px;
    left: -370px;
    width: 162.75px;
    height: 121px;
    -webkit-animation: leftdownAnimation2 30s;
    -moz-animation: leftdownAnimation2 30s;
    -ms-animation: leftdownAnimation2 30s;
    -o-animation: leftdownAnimation2 30s;
    animation: leftdownAnimation2 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .upright {
    top: -50px;
    right: -450px;
    width: 162.75px;
    height: 121px;
    -webkit-animation: uprightAnimation2 30s;
    -moz-animation: uprightAnimation2 30s;
    -ms-animation: uprightAnimation2 30s;
    -o-animation: uprightAnimation2 30s;
    animation: uprightAnimation2 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .middle {
    left: -225px;
    top: -30px;
    width: 454.5px;
    height: 301px;
  }

  .middlemiddleright {
    left: -258px;
    top: 210px;
    width: 81.75px;
    height: 72.75px;
    -webkit-animation: middlemiddlerightAnimation2 60s;
    -moz-animation: middlemiddlerightAnimation2 60s;
    -ms-animation: middlemiddlerightAnimation2 60s;
    -o-animation: middlemiddlerightAnimation2 60s;
    animation: middlemiddlerightAnimation2 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .upmiddle {
    left: -250px;
    top: -90px;
    width: 140.25px;
    height: 110.25px;
    -webkit-animation: upmiddleAnimation2 20s;
    -moz-animation: upmiddleAnimation2 20s;
    -ms-animation: upmiddleAnimation2 20s;
    -o-animation: upmiddleAnimation2 20s;
    animation: upmiddleAnimation2 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .rightmiddle {
    top: 100px;
    right: -380px;
    width: 87.75px;
    height: 68.25px;
  }

  .downmiddle {
    top: 339px;
    right: -179px;
    width: 63.5px;
    height: 47.25px;
  }

  .downright {
    right: -730px;
    top: 200px;
    width: 515px;
    height: 384.75px;
    -webkit-animation: downrightAnimation2 40s;
    -moz-animation: downrightAnimation2 40s;
    -ms-animation: downrightAnimation2 40s;
    -o-animation: downrightAnimation2 40s;
    animation: downrightAnimation2 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .roller_animation  {
    width: 19px;
    height: 27.3px;
    background-size: 100%;
    bottom: 30px;
    -webkit-animation: mouse3 2s;
    -moz-animation: mouse3 2s;
    -ms-animation: mouse3 2s;
    -o-animation: mouse3 2s;
    animation: mouse3 2s;
    animation-iteration-count: infinite;
  }

  .melon_footer1 {
    left: -800px;
    bottom: 0;
    width: 249.75px;
    height: 195.75px;
  }

  .melon_footer2 {
    bottom: -75px;
    left: 500px;
    width: 271.5px;
    height: 265.5px;
  }

  .melon_footer3 {
    left: 800px;
  }
}




@keyframes upLeftAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-10deg) translate(80px,50px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes leftmiddleAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-15deg) translate(-210px,50px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}



@keyframes leftdownAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-9deg) translate(80px,-50px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes upmiddleAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(13deg) translate(-50px,70px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes middlemiddlerightAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-100deg) translate(-80px,-100px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes uprightAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(20deg) translate(0px,-80px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}



@keyframes downrightAnimation2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
      transform: rotate(0deg) translate(20px,-60px);
  }
  100% {
      transform: rotate(0deg) translate(0px,0px);
  }
}



@keyframes downmiddleAnimatio2 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(0deg) translate(-10px,50px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}













@media screen and (max-width: 767px) {
  header {
    padding-top: 42px;
  }

  .upleft {
    top: -480px;
    left: -615px;
    display: block;
    width: 435.3px;
    height: 508px;
    -webkit-animation: upLeftAnimation3 40s;
    -moz-animation: upLeftAnimation3 40s;
    -ms-animation: upLeftAnimation3 40s;
    -o-animation: upLeftAnimation3 40s;
    animation: upLeftAnimation3 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }
  
  .leftmiddle {
    top: 190px;
    left: -355px;
    width: 199.5px;
    height: 145px;
    -webkit-animation: leftmiddleAnimation3 50s;
    -moz-animation: leftmiddleAnimation3 50s;
    -ms-animation: leftmiddleAnimation3 50s;
    -o-animation: leftmiddleAnimation3 50s;
    animation: leftmiddleAnimation3 50s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  #home_header {
    height: 570px;
  }

  #saucylogoHome {
    width: 160px;
    height: 126px;
    background-size: 100%;
  }

  .theme {
    top: 232px;
    left: -150px;
    width: 305px;
    height: 156px;
  }

  .leftdown {
    top: 360px;
    left: 140px;
    width: 83px;
    height: 69px;
    -webkit-animation: leftdownAnimation3 30s;
    -moz-animation: leftdownAnimation3 30s;
    -ms-animation: leftdownAnimation3 30s;
    -o-animation: leftdownAnimation3 30s;
    animation: leftdownAnimation3 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .upright {
    top: -40px;
    right: -350px;
    width: 172px;
    height: 130px;
    -webkit-animation: uprightAnimation2 30s;
    -moz-animation: uprightAnimation2 30s;
    -ms-animation: uprightAnimation2 30s;
    -o-animation: uprightAnimation2 30s;
    animation: uprightAnimation2 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .middle {
    left: -150px;
    top: 55px;
    width: 310px;
    height: 205px;
  -webkit-animation: middleAnimation3 4s;
  -moz-animation: middleAnimation3 4s;
  -ms-animation: middleAnimation3 4s;
  -o-animation: middleAnimation3 4s;
  animation: middleAnimation3 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .upmiddle {
    left: -270px;
    top: -40px;
    width: 140.25px;
    height: 110.25px;
  -webkit-animation: upmiddleAnimation3 20s;
  -moz-animation: upmiddleAnimation3 20s;
  -ms-animation: upmiddleAnimation3 20s;
  -o-animation: upmiddleAnimation3 20s;
  animation: upmiddleAnimation3 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .rightmiddle {
    top: 390px;
    right: 90px;
    width: 208px;
    height: 162px;
  -webkit-animation: rightmiddleAnimation3 20s;
  -moz-animation: rightmiddleAnimation3 20s;
  -ms-animation: rightmiddleAnimation3 20s;
  -o-animation: rightmiddleAnimation3 20s;
  animation: rightmiddleAnimation3 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .downmiddle {
    top: 707px;
    right: -315px;
    width: 63.5px;
    height: 47.25px;
  }

  .downright {
    right: -520px;
    top: 180px;
    width: 353px;
    height: 258px;
  }

  .roller_animation  {
    width: 19px;
    height: 27.3px;
    background-size: 100%;
    bottom: 30px;
    -webkit-animation: mouse3 2s;
    -moz-animation: mouse3 2s;
    -ms-animation: mouse3 2s;
    -o-animation: mouse3 2s;
    animation: mouse3 2s;
    animation-iteration-count: infinite;
  }

  .no-mobile {
    display: none !important;
  }
}





@keyframes upLeftAnimation3 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-10deg) translate(-30px,-80px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes leftmiddleAnimation3 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-15deg) translate(-90px,40px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes middleAnimation3 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
      transform: rotate(1deg) translate(0px,8px);
  }
  100% {
      transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes upmiddleAnimation3 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(25deg) translate(60px,40px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes rightmiddleAnimation3 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-5deg) translate(70px,-30px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}


@keyframes leftdownAnimation3 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-9deg) translate(-30px,-40px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}

















@media screen and (max-width: 500px) { 
  .upmiddle {
    left: -240px;
  }

  .rightmiddle {
    right: 90px;
  }

  .upright {
    right: -275px;
  }

  .upmiddle {
    left: -250px;
  -webkit-animation: upmiddleAnimation4 20s;
  -moz-animation: upmiddleAnimation4 20s;
  -ms-animation: upmiddleAnimation4 20s;
  -o-animation: upmiddleAnimation4 20s;
  animation: upmiddleAnimation4 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .leftmiddle {
    left: -1380px;
  }

  .downright {
    right: -1510px
  }

  .only-mobile {
    display: block !important;
  }

  .only-mobile {
    display: block !important;
  }
}

@keyframes upmiddleAnimation4 {
  0% {
    transform: rotate(0deg) translate(0px,0px);
  }
  50% {
    transform: rotate(-25deg) translate(20px,60px);
  }
  100% {
    transform: rotate(0deg) translate(0px,0px);
  }
}



@media screen and (min-width:768px) and (max-width: 993px) {
  .melon_footer1 {
    left: -700px;
    bottom: 0;
    width: 249.75px;
    height: 195.75px;
  }

  .melon_footer2 {
    bottom: -75px;
    left: 500px;
    width: 271.5px;
    height: 265.5px;
  }

  .melon_footer3 {
    left: 700px;
  }
}




@media screen and (max-width: 767px) {
  footer {
    padding-top: 50px;
    margin-top: -50px;
  }

  #pink_footer {
    padding-top: 90px;
  }

  .melon_footer1 {
    left: -500px;
    bottom: 200px;
    width: 186px;
    height: 100px;
  }

  .melon_footer2 {
    bottom: 0px;
    left: 300px;
    width: 198px;
    height: 194px;
  }

  .melon_footer3 {
    left: 150px;
    width: 188px;
    height: 147px;
  }

  #download_links {
    margin-top: 40px;
  }
}




@media screen and (max-width: 350px) {
  .middle {
    left: -133px;
    top: 51px;
    width: 279px;
    height: 185px;
  }

  .theme {
    top: 212px;
    left: -130px;
    width: 275px;
    height: 140px;
  }

  .melon_footer1 {
    left: -450px;
  }

  .melon_footer2 {
    left: 270px;
  }

  .roller_animation {
    bottom: 40px;
  -webkit-animation: mouse4 2s;
  -moz-animation: mouse4 2s;
  -ms-animation: mouse4 2s;
  -o-animation: mouse4 2s;
  animation: mouse4 2s;
  animation-iteration-count: infinite;
  }
}


@keyframes mouse4 {
  0% {
    opacity: 1;   
    bottom: 40px;
  }
  
  50% {
    opacity: 0.1;
    bottom: 0px;
  }
  
  51% {
    bottom: 40px;
  }
  
  100% {
    opacity: 1;
    bottom: 40px;
  }
}

















#poggo_banner {
  display: flex;
  justify-content: end;
  flex-direction: column;
}

.poggo_watch_video {
  width: 48%;
  display: flex;
  justify-content: center;
  margin-bottom: 10%;
}

.poggo_watch_button {
  width: 35%;
}


@media screen and (min-width: 2101px) {
  .poggo_watch_video {
    width: 59%;
  }
}


@media screen and (max-width:1300px) {
  .poggo_watch_video {
    width: 46%;
    margin-bottom: 12%;
  }

  .poggo_watch_button {
    margin-left: 0;
    z-index: 1000;
    position: relative;
  }
}




@media screen and (max-width: 991px) {
  .poggo_watch_video {
    width: 43%;
  }
}





@media screen and (max-width: 768px) {
  .poggo_watch_video {
    width: 100%;
  }
}





@media screen and (max-width: 450px) {
  .poggo_watch_button {
    width: 45%;
  }
}













#xsting_banner {
  background: url(../images/BG-SAUCY-XSTING.jpg) calc(50% + 100px) 0 #000 no-repeat;
  background-size: auto 100%;
}

#xsting_banner, #xsting_holder {
  min-height: 1372px;
}

#xsting_holder {
  display: flex;
  flex-direction: column;
}

.escape_image {
  margin: 60px 0 20px;
}

.plataforms {
  margin-bottom: 60px;
}

.steam_link {
  margin-right: 40px;
}

#xsting_holder {
  width: 40%;
  justify-content: center;
  align-items: center;
}

#xsting_holder a {
  display: inline-block;
}

#xsting_banner, #xsting_holder {
  min-height: 1372px;
}

.xsting_holder_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


@media screen and (max-width: 1500px) {
  #xsting_banner, #xsting_holder {
    min-height: 1100px;
  }
}


@media screen and (max-width: 1230px) {
  #xsting_banner {
    background-position: 50% center;
  }
}



@media screen and (max-width: 991px) {
  #xsting_banner, #xsting_holder {
    min-height: 900px;
  }

  .plataforms {
    margin-bottom: 20px;
  }

  .see_more_xsting {
    width: 80%;
    display: block;
    margin: 0 auto;
  }

  .escape_image {
    width: 90%;
    margin: 40px 0 10px;
  }
}


@media screen and (max-width: 768px) {
  #xsting_holder {
    justify-content: space-between;
    padding: 60px 0;
    width: 100%;
  }

  #xsting_banner {
    background: url(../images/BG-SAUCY-XSTING_M.jpg) #000 no-repeat;
    min-height: 1800px;
    background-size: 100% auto;
    background-position: center center;
  }

  #xsting_banner, #xsting_holder {
    min-height: 240vw;
  }

  .plataforms {
    display: flex;
    flex-direction: row;
  }

  .xsting_logo, .escape_image {
    width: 90%;
  }

  .escape_image {
    margin-top: 30px;
  }

  .xsting_holder_content {
    padding: 0 30px;
  }
}

@media screen and (max-width: 450px) {
  #xsting_banner, #xsting_holder {
    min-height: 250vw;
  }

  .plataforms {
    margin-bottom: 0;
  }

  .steam_link, .epic_link {
    width: 100%;
    margin: auto;
    display: block;
  }

  .see_more_xsting {
    width: 55%;
  }
}