* {
  margin: 0px;
  padding: 0px;
}

html {
  font-size: 62.5%;
}

body {
  background: rgba(71,249,255,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(71,249,255,1)), color-stop(100%, rgba(11,100,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
  background: radial-gradient(ellipse at center, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47f9ff', endColorstr='#0b64c2', GradientType=1 );
  background-repeat: no-repeat;
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-family: "mergeOne", Helvetica, Arial, sans-serif;
  overflow-y: hidden;
}

@font-face {
  font-family: mergeOne;
  src: url(../css/fonts/MergeOne-Regular.ttf) format("truetype"),
       url(../css/fonts/MergeOne-Regular.otf) format("opentype"),
       url(../css/fonts/MergeOne-Regular.woff) format("woff"),
       url(../css/fonts/MergeOne-Regular.eot);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
}

h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

.center {
  margin: 0 auto;
}

.centered {
  text-align: center;
}

.rollGral {
  cursor: pointer;
}

.aligner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flexEnd {
  align-self: flex-end;
}

.mainContainer {
  width: 96%;
  position: relative;
  z-index: 10;
}

.bgLight1 {
  width: 100%;
  height: 800px;
  background: url("../assets/images/light1.png") no-repeat;
  background-size: 100%;
  background-position: 0px 300px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
}

.platform {
  width: 100%;
  height: 150px;
  background: url("../assets/images/platform.svg") no-repeat;
  background-size: 102%;
  background-position: top;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2;
}

.bgLight2 {
  background: url("../assets/images/light2.png") no-repeat;
  background-size: 100%;
  background-position: 0px -70px;
}

.columnLeft, .columnRight {
  width: 19%;
  position: relative;
}

.columnCenter {
  width: 65%;
  margin: 10px;
}

.logoNutriday {
  max-width: 230px;
  height: 112px;
  background: url("../assets/images/logoNutriday.png") no-repeat bottom;
  background-size: 100%;
}

.nutriconcurso {
  max-width: 260px;
  height: 37px;
  margin-top: 10px;
  background: url("../assets/images/nutriconcurso.png") no-repeat center;
  background-size: 98%;
}

.playWin {
  max-width: 270px;
  height: 74px;
  background: url(../assets/images/increiblesPremios.png) no-repeat center;
  background-size: 99%;
}

.listGift {
  max-width: 179px;
  height: 199px;
  background: url(../assets/images/listAwards2.png) no-repeat center;
  background-size: 100%;
}

.gift {
  width: 300px;
  max-width: 240px;
  height: 210px;
  background: url("../assets/images/gift.png") no-repeat bottom;
  background-size: 100%;
  position: relative;
}

.littleText {
  font-size: 8px;
  color: #FFF;
  font-family: "mergeOne";
}

.littleText.seeBases{
  position: absolute;
  bottom: 37vh;
  left: 5vw;
  z-index: 10;
}

.seeBases a {
  color: #FFF;
}

.btnFollowUs:hover  {
  background-color: #0775EF;
}

.footing {
  width: 430px;
  position: relative;
  bottom: 70px;
}

.textBottomSite {
  font-size: 1.2em;
  color: #FFF;
}

.textBottom2 {
  margin-top: 10px;
  font-size: 1em;
  color: #FFF;
}

.textBottom2 a {
  font-size: 1em;
  color: #FFF;
}

.btnRegistryHere {
  width: 140px;
  height: 34px;
  margin-left: 10px;
  background-color: #BF2219;
  color: #FFF;
  border-radius: 5px;
  border: solid 4px #FFF;
  cursor: pointer;
  box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
}

.btnRegistryHere:hover {
  background-color: #D6463E;
}

.faceIcon {
  width: 17%;
  margin-left: 10px;
}

.collection {
  max-width: 250px;
  height: 50px;
  margin-top: 60px;
  background: url("../assets/images/collections.png") no-repeat center;
  background-size: 100%;
}

.pots {
  width: 100%;
  height: 600px;
  position: relative;
  background: url(../assets/images/potsAll.png) no-repeat center;
  background-size: 80%;
}

.btnFollowUs {
  width: 156px;
  height: 34px;
  color: #FFF;
  background-color: #1A5EA9;
  border-radius: 5px;
  border: solid 4px #FFF;
  cursor: pointer;
  box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
  position: absolute;
  bottom: 24px;
  right: 3vw;
}

.btnFollowUs:hover {
  background-color: #2D82E0;
}

#gameCanvas {
  border: none;
  border: solid 5px #FFCE00;
  border-radius: 5px;
}

#uiGameContainer, #gameCanvas {
  margin-top: 0px;
}

/* ui game */
#uiGameContainer  {
  max-width: 1334px;
  height: 31.618vw;
  border: solid 5px #FFCE00;
  border-radius: 5px;
  position: relative;
}

#splashGame {
  width: 100%;
  height: 31.618vw;
  background: url("../assets/images/splash/bgSplash.jpg") no-repeat center;
  background-size: cover;
  position: relative;
}

#titleGame {
  width: 50%;
  height: 12vw;
  background: url("../assets/images/splash/logoRescue.png") no-repeat center;
  background-size: 90%;
  position: relative;
  top: 5%;
}

#finnJakeSplash {
  width: 48%;
  height: 13vw;
  background: url("../assets/images/splash/finnJack.png") no-repeat center;
  background-size: 92%;
  position: relative;
  top: -5%;
}

.optionGame {
  width: 35%;
  position: relative;
  top: -12%;
}

#btnHelp {
  width: 24%;
  height: 6vw;
  background: url("../assets/images/buttons/btnHelp.png") no-repeat center;
  background-size: 90%;
}

#btnPlay {
  width: 40%;
  height: 9vw;
  background: url("../assets/images/buttons/btnPlay.png") no-repeat center;
  background-size: 90%;
}

#btnAchie {
  width: 24%;
  height: 15vh;
  background: url("../assets/images/buttons/btnAchie.png") no-repeat center;
  background-size: 90%;
}

#iconAste {
  width: 40%;
  height: 6vh;
  background: url("../assets/images/buttons/iconAsterisk.png") no-repeat center;
  background-size: 90%;
  position: relative;
  left: 60%;
}

#btnGoBack {
  width: 6%;
  height: 8vh;
  background: url(../assets/images/buttons/btnGoBack.png) no-repeat center;
  background-size: 80%;
  position: absolute;
  z-index: 70;
  bottom: 1vw;
  left: 1vw;
}

#btnGoAhead {
  width: 7%;
  height: 8.5vh;
  background: url(../assets/images/buttons/btnGo.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  z-index: 70;
  top: 1vw;
  right: 1vw;
}

#theUser {
  width: 25%;
  position: absolute;
  z-index: 80;
  right: 0px;
  top: 2%;
}

#nameUserLogged {
  margin-left: 34%;
  margin-left: 34%;
  font-size: 1.2vw;
  font-weight: bold;
  color: #333;
}

#pointContainer {
  width: 75%;
  height: 4vw;
  background: url("../assets/images/user/pointContainer.png") no-repeat right;
  background-size: cover;
  position: absolute;
  right: 0px;
  top: 30px;
}

#avarUser {
  width: 34%;
  position: absolute;
  top: 1vw;
  z-index: 81;
}

#avarUser img {
  max-width: 100%;
}

.iconCoins {
  width: 10%;
  height: 40%;
  margin-left: 9%;
  background: url("../assets/images/user/iconCoins.png") no-repeat center;
  background-size: 100%;
}

.totalPoints {
  font-size: 1.4vw;
  color: #FFF;
  margin-left: 2%;
}

.bgConst {
  background: url("../assets/images/bgSection.png") no-repeat center;
  background-size: cover;
}

.profContainer {
  width: 85%;
}

.profContainer p {
  font-size: 0.8vw;
  color: #FFF;
  margin-top: 0.5vw;
}

#profile, #login, #registry, #selecAvatar, #ranking, #popUp, #popUpHelp, #popUpNotif, #gameOver {
  width: 100%;
  height: 31.618vw;
}

#popConfirApprove, #popConfirNoApprove {
  position: absolute;
  top: 0px;
  width: 100%;
}

#titleProfile {
  width: 55%;
  height: 6vw;
  background: url("../assets/images/profile/bannerProfile.png") no-repeat center;
  background-size: 100%;
  position: relative;
  top: 15px;
}

.profDate {
  margin-top: 4vw;
}

#avatarProf {
  width: 35%;
}

#avatarProf img {
  max-width: 100%;
}

.textChoiseAvatar {
  font-size: 0.9vw;
  color: #FFF;
  margin: 1vw;
}

.detailCont {
  width: 80%;
  margin-left: 3%;
}

#realNameUser {
  font-family: "mergeOne";
  font-size: 2.5vw;
  font-weight: bold;
}

#yearCity {
  font-family: "mergeOne";
  font-size: 1.5vw;
  font-weight: bold;
}

.scoreContainer {
  width: 55%;
  height: 4.8vw;
  background: url(../assets/images/profile/scoreContainer.png) no-repeat center;
  background-size: 98%;
}

.totalPointsProf {
  font-size: 1.8vw;
  color: #FFF;
  margin-left: 4%;
}

.levelContainer {
  width: 37%;
  height: 4.8vw;
  margin-left: 10px;
  background: url(../assets/images/profile/levelContainer.png) no-repeat center;
  background-size: 91%;
}

#topUser {
  font-size: 1.8vw;
  font-weight: bold;
  color: #FFF;
}

#btnLogOut {
  width: 46%;
  height: 3vw;
  margin-top: 1vw;
  margin-left: 1.5vw;
  background: url(../assets/images/buttons/btnLogoutProfile.png) no-repeat center;
  background-size: 100%;
}

#popLogin {
  width: 60%;
  height: 21vw;
  background: url("../assets/images/login/logIn.png") no-repeat center;
  background-size: 100%;
  position: relative;
  top: 25%;
  z-index: 80;
}

.rowLogin {
  width: 55%;
}

input:focus, select:focus, button:focus {
  outline: none;
}

.inputText {
  width: 100%;
  height: 1.5vw;
  text-align: center;
  color: #000;
  font-family: "mergeOne";
  font-size: 1vw;
  border: solid 2px #000;
  border-radius: 5px;
  background-color: #EDB756;
}

.inputSelec {
  height: 1.9vw;
  text-align: center;
  color: #000;
  font-family: "mergeOne";
  font-size: 1vw;
  border: solid 2px #000;
  border-radius: 5px;
  background-color: #EDB756;
}

.selecDepto {
  width: 100%;
}

.selecDate {
  width: 25%;
  margin-left: 1vw;
}

.textDate {
  color: #FFF;
  width: 20%;
  font-size: 0.9vw;
  line-height: 1vw;
  display: inline-block;
}

/* Dropdown */
.theDropdown {
  width: 100%;
  cursor: pointer;
  position: relative;
}

.theDropdown div {
  width: 100%;
}

.dropAvatarSelec {
  width: 15%;
}

.dropAvatar {
  width: 25%;
  margin-left: 1.1vw;
}

.hidden {
  display: none;
}

#dropOption {
  position: absolute;
  border: solid 2px #000;
  border-radius: 5px;
  background-color: #EDB756;
  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3);
  top: 2.2vw;
  z-index: 100;
}

.dropRelav {
  position: relative;
}

.alignerRightAvatar {
  position: absolute;
  right: 2.5vw;
  top: -1.2vw;
}

.arrowDrop {
  width: 2vw;
  height: 2vw;
  font-size: 1.3vw;
  border: solid 2px #000;
  border-radius: 5px;
  background-color: #EDB756;
  position: absolute;
  right: 0px;
  top: 0px;
}
/* finish Dropdown */

#popLogin .nameUser {
  margin-top: 9vw;
}

.txtMissPass {
  position: absolute;
  bottom: 0.7vw;
  left: 12.5vw;
  color: #FFF;
  font-size: 0.8vw;
}

.registryNow {
  text-decoration: underline;
  cursor: pointer;
}

#popLogin .passUser {
  margin-top: 5%;
}

.inputText::-webkit-input-placeholder,
.inputYear::-webkit-input-placeholder {
  font-family: "mergeOne";
  color: #333;
}

#popLogin .btnLogin {
  width: 62%;
  height: 3vw;
  margin-top: 2.2vw;
  border: none;
  background: url("../assets/images/buttons/btnLogin.png") no-repeat center;
  background-size: 100%;
}

.jakeLogin {
  width: 15%;
  height: 40vh;
  background: url("../assets/images/login/jakeLogin.png") no-repeat top;
  background-size: 100%;
  position: absolute;
  top: 2%;
  left: 32%;
}

.finnLogin {
  width: 15%;
  height: 40vh;
  background: url("../assets/images/login/finnLogin.png") no-repeat top;
  background-size: 100%;
  position: absolute;
  top: 2%;
  right: 32%;
}

.totalIconCoins {
  width: 8%;
  height: 40vw;
  background: url("../assets/images/user/iconCoins.png") no-repeat center;
  background-size: 100%;
}

#titleReg, #titleAvatar {
  width: 36%;
  height: 4.5vw;
  background: url("../assets/images/profile/bannerRegistry.png") no-repeat center;
  background-size: 100%;
  position: relative;
  top: 7px;
}

.marginTop {
  margin-top: 2%;
}

.marginBtn {
  margin-top: 2vw;
}

.inputReg {
  width: 50%;
  padding: 0.8%;
}

.inputRegYear {
  width: 10%;
  padding: 2%;
}

.inputYear {
  width: 100%;
  height: 2.1vw;
  text-align: center;
  color: #000;
  font-family: "mergeOne";
  font-size: 1.2vw;
  border: solid 2px #000;
  border-radius: 10px;
  background-color: #EDB756;
}

.inputIagree {
  width: 50%;
  padding: 0.8%;
}

.inputIagree span, .inputIagree a {
  color: #FFF;
  font-size: 0.9vw;
}

#btnSendForm {
  width: 16%;
  height: 3vw;
  background: url(../assets/images/buttons/btnSendForm.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  right: 12vw;
  bottom: 3vw;
}

.txtBottom {
  position: absolute;
  bottom: 0.3vw;
  left: 11.5vw;
}

.goLogin {
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

.carouselCont {
  width: 80%;
}

.arrowPrev, #arrowPrevHelp {
  width: 7%;
  height: 4vw;
  background: url("../assets/images/buttons/btnArrowLeft.png") no-repeat center;
  background-size: 80%;
}

.arrowNext, #arrowNextHelp {
  width: 7%;
  height: 4vw;
  background: url("../assets/images/buttons/btnArrowRight.png") no-repeat center;
  background-size: 80%;
}

.createUser {
  width: 70%;
}

.createUser .passUser, .createUser .nameUser {
  margin-top: 3%;
}

#titleRank {
  width: 43%;
  height: 6vw;
  background: url("../assets/images/ranking/bannerRanking.png") no-repeat center;
  background-size: 100%;
  position: relative;
  top: 10px;
}

.rankingCoint {
  width: 70%;
}

.textRank {
  width: 60%;
  height: 2vw;
  background: url("../assets/images/ranking/textRanking.png") no-repeat center;
  background-size: 100%;
}

.textCoins {
  width: 69%;
  height: 2vw;
  background: url("../assets/images/ranking/textCoins.png") no-repeat center;
  background-size: 100%;
}

.textTime {
  width: 52%;
  height: 2.1vw;
  background: url("../assets/images/ranking/textTime.png") no-repeat center;
  background-size: 100%;
}

.colRank {
  width: 33%;
}

.rankUserCont {
  height: 3.5vw;
  font-size: 1.3vw;
  background: url("../assets/images/ranking/userContainer.png") no-repeat center;
  background-size: 90%;
  position: relative;
}

.totalCoinsRank, .totalTimeRank {
  height: 3.5vw;
  font-size: 1.8vw;
}

.numberTop {
  width: 16%;
  height: 2.2vw;
  background: url("../assets/images/ranking/numberTop.png") no-repeat center;
  background-size: 90%;
  position: absolute;
  left: 0%;
  top: -7%;
}

.numberTop span {
  font-size: 0.9vw;
  font-weight: bold;
  position: relative;
  top: -4%;
}

#jakeRank {
  width: 15%;
  height: 13vw;
  background: url("../assets/images/ranking/jakeRanking.png") no-repeat center;
  background-size: 90%;
  position: absolute;
  left: 0px;
  bottom: 11vw;
}

#rankingContainer {
  width: 20%;
  height: 3vw;
  background: url("../assets/images/ranking/rankingContainer.png") no-repeat center;
  background-size: 95%;
  position: absolute;
  right: 0px;
  top: 18%;
}

#btnUp {
  width: 5%;
  height: 3vw;
  background: url("../assets/images/buttons/btnUp.png") no-repeat center;
  background-size: 95%;
  position: absolute;
  right: 10%;
  top: 34%;
}

#btnDown {
  width: 5%;
  height: 3vw;
  background: url("../assets/images/buttons/btnDown.png") no-repeat center;
  background-size: 95%;
  position: absolute;
  right: 10%;
  top: 85%;
}

#popUp, #popUpHelp, #popUpNotif, #popConfirm, #popRegError, #popConfirApprove, #popConfirNoApprove {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 210;
}

.marginHelpCont img {
  margin-top: 4vw;
}

.popBg {
  width: 85%;
  height: 30.7vw;
  background: url("../assets/images/popupContainer.png") no-repeat center;
  background-size: 94%;
}

.iconExclamation {
  width: 5%;
  height: 6vw;
  background: url("../assets/images/iconExclamation.png") no-repeat center;
  background-size: 95%;
  position: relative;
  top: 4vw;
}

.textPop, .textPop2, .textPopConfirm {
  width: 80%;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.textPop {
  font-size: 1.5vw;
  top: 4vw;
}

.txtCheckAp {
  font-size: 0.8vw;
  margin-top: 0.5vw;
}

.textPop2 {
  font-size: 1.5vw;
  top: 4vw;
}

.textPopConfirm {
  font-size: 1.5vw;
  top: 10vw;
}

.btnLater, .btnRegisNow, .btnCloseTxt, .btnApprove, .btnNoApprove {
  width: 30%;
  height: 4vw;
  position: absolute;
}

.btnLater {
  background: url("../assets/images/buttons/btnLater.png") no-repeat center;
  background-size: 95%;
  bottom: 1vw;
  right: 17%;
}

.btnRegisNow {
  background: url("../assets/images/buttons/btnRegistry.png") no-repeat center;
  background-size: 95%;
  bottom: 1vw;
  left: 17%;
}

.btnCloseTxt {
  background: url("../assets/images/buttons/btnCloseTxt.png") no-repeat center;
  background-size: 95%;
  bottom: 1vw;
  left: 19vw;
}

.btnApprove {
  background: url("../assets/images/buttons/btnApprove.png") no-repeat center;
  background-size: 95%;
  bottom: 1vw;
  right: 17%;
}

.btnNoApprove {
  background: url("../assets/images/buttons/btnNoApprove.png") no-repeat center;
  background-size: 95%;
  bottom: 1vw;
  left: 17%;
}

#btnClosePop {
  width: 5%;
  height: 3vw;
  background: url(../assets/images/buttons/btnClose.png) no-repeat center;
  background-size: 90%;
  position: absolute;
  right: 14%;
  top: 2.5vw;
}

#imgHelp {
  width: 80%;
}

#imgHelp img {
  max-width: 100%;
}

#arrowPrevHelp {
  position: absolute;
  bottom: 1vw;
  left: 40%;
}

#arrowNextHelp {
  position: absolute;
  bottom: 1vw;
  left: 53%;
}

#userLogin {
  width: 6%;
  height: 10vh;
  background: url(../assets/images/buttons/btnSignin.png) no-repeat center;
  background-size: 94%;
  position: absolute;
  z-index: 70;
  top: 2%;
  right: 2%;
}

.gameOverbg {
  background: url("../assets/images/gameOver/gameOverbg.png") no-repeat center;
  background-size: cover;
}

#titleGameOver {
  width: 43%;
  height: 7vw;
  background: url("../assets/images/gameOver/bannerGameOver.png") no-repeat center;
  background-size: 90%;
  position: relative;
  top: 15px;
}

.containerGameOver {
  width: 60%;
}

.totalRow {
  width: 50%;
}

.iconTotalCoin {
  width: 13%;
  height: 4vw;
  background: url("../assets/images/user/iconCoins.png") no-repeat center;
  background-size: 100%;
}

.totalContent {
  margin-left: 5%;
  font-family: "mergeOne";
  font-size: 3vw;
  font-weight: bold;
}

.textTotalCoins {
  width: 80%;
  height: 2vw;
  background: url("../assets/images/gameOver/textTotalCoins.png") no-repeat center;
  background-size: 97%;
}

.textTotalTime {
  width: 80%;
  height: 2vw;
  background: url("../assets/images/gameOver/textTotalTime.png") no-repeat center;
  background-size: 97%;
}

#btnPlayAgain {
  width: 50%;
  height: 3.4vw;
  background: url("../assets/images/buttons/btnPlayAgain.png") no-repeat center;
  background-size: 100%;
}

#btnRanking {
  width: 80%;
  height: 5vw;
  background: url("../assets/images/buttons/btnRanking.png") no-repeat center;
  background-size: 94%;
}

#btnShare {
  width: 80%;
  height: 5vw;
  background: url("../assets/images/buttons/btnShare.png") no-repeat center;
  background-size: 94%;
}

#barPromotion {
  display: none;
}

#popUpNotifClose {
  width: 10vw;
  height: 3.5vw;
  background: url(../assets/images/buttons/btnAcept.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  bottom: 2vw;
  left: 40%;
}


 /* media queries */
@media all and (orientation: portrait) {
  #gameCanvas, #splashGame, #theUser {
    display: none;
  }

  .rotateDevice {
    height: 100vh;
    width: 100%;
    background: url("../assets/images/rotateDevice2.svg") no-repeat;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    z-index: 101;
  }
  .degradedRot {
    height: 100vh;
    width: 100%;
    background: rgba(71,249,255,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(71,249,255,1)), color-stop(100%, rgba(11,100,194,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: radial-gradient(ellipse at center, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47f9ff', endColorstr='#0b64c2', GradientType=1 );
    background-repeat: no-repeat;
    position: relative;
    z-index: 100;
  }
}


@media all and (max-width: 1680px) {
  #uiGameContainer, #gameCanvas {
    margin-top: 4vw;
  }
}

@media all and (max-width: 1500px) {
  #uiGameContainer, #gameCanvas {
    margin-top: 10vw;
  }
}

@media all and (max-width: 1400px) {
  .platform {
    height: 210px;
    background-size: cover;
  }
}

@media (min-width: 1290px) {
  .mainContainer {
    width: 90%;
  }
}

@media all and (max-width: 1289px) {
  .gift {
    max-width: 230px;
  }
}

@media all and (max-width: 1000px) {
  /* modalPromotion */
  .degradedExt {
    background: rgba(71,249,255,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(71,249,255,1)), color-stop(100%, rgba(11,100,194,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    background: radial-gradient(ellipse at center, rgba(71,249,255,1) 0%, rgba(11,100,194,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47f9ff', endColorstr='#0b64c2', GradientType=1 );
    background-repeat: no-repeat;
  }

  .hiddenElement {
    display: none;
  }

  #promoContainer {
    transition: 0.5s;
  }

  .compressed {
    width: 100%;
    height: 12vh;
    z-index: 90;
    position: absolute;
    bottom: 0px;
    box-shadow: 0px -5px 10px rgba(0,0,0,0.5);
  }

  .extended {
    width: 100%;
    height: 90vh;
    border-top: solid 10px #FFF;
    position: absolute;
    bottom: 0px;
    z-index: 90;
    box-shadow: 0px -5px 10px rgba(0,0,0,0.5);
  }

  .btnOpen {
    width: 6.7%;
    height: 12vh;
    background: url(../assets/images/mobile/btnOpenModal.png) no-repeat center;
    position: absolute;
    background-size: 85%;
    right: 25px;
  }

  .btnClose {
    width: 6.7%;
    height: 12vh;
    background: url(../assets/images/mobile/btnCloseModal.png) no-repeat center;
    position: absolute;
    background-size: 85%;
    right: 25px;
  }

  #sponsored {
    margin: 0px 25px;
    font-size: 10px;
    color: #FFF;
    float: left;
  }

  .logoNutriLittle {
    width: 10%;
    background: url("../assets/images/logoNutriday.png") no-repeat;
    background-size: 100%;
    background-position: 0px -1vw;
  }

  .logoNutriBig {
    width: 30%;
    height: 33vh;
    background: url("../assets/images/logoNutriday.png") no-repeat;
    background-size: 100%;
    background-position: 0px -1vw;
  }

  .promoGift {
    width: 40%;
    height: 70vh;
    background: url("../assets/images/gift.png") no-repeat center;
    background-size: 95%;
  }

  #colectionPots {
    width: 45%;
    height: 12vh;
    background: url("../assets/images/mobile/collectionsPots.png") no-repeat center;
    background-size: 100%;
    position: absolute;
    right: 16%;
  }

  .btnAccReg {
    width: 31%;
    height: 12%;
    position: absolute;
    left: 5%;
    border-radius: 17px;
    font-family: "mergeOne";
    color: #FFF;
    font-size: 0.8em;
    background-color: #1A5EA9;
    border: solid 4px #FFF;
    cursor: pointer;
    box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
  }

  .btnAccReg:hover {
    background-color: #D6463E;
  }

  .btnAccReg {
    bottom: 20%;
  }

  .btnLogIn {
    bottom: 5%;
  }

  .nutriText {
    max-width: 340px;
    height: 60px;
    margin: 0 auto;
    margin-top: 20vW;
    background: url("../assets/images/nutriconcurso.png") no-repeat center;
    background-size: 100%;
  }

  .theGifts {
    width: 100%;
    height: 40vh;
    background: url("../assets/images/mobile/awesomeGift.png") no-repeat center;
    background-size: 100%;
  }

  .thePotsMob {
    width: 25%;
    height: 85vh;
    margin: 0 auto;
    background: url("../assets/images/mobile/potsMob.png") no-repeat center;
    background-size: 85%;
  }
  /* finish modalPromotion */

  .columnLeft, .columnRight, .platform, .bgLight1 {
    display: none;
  }

  .mainContainer, .columnCenter, #gameCanvas {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }

  #gameCanvas {
    border: none;
    border-radius: 0px;
  }

  #uiGameContainer, #splashGame, #profile, #login, #registry, #selecAvatar, #ranking, #popUp, #popUpHelp, #popUpNotif, #gameOver {
    border: none;
    border-radius: 0px;
    width: 100%;
    height: 100vh;
    margin: 0px;
  }

  #btnGoBack, #btnGoAhead {
    width: 6%;
    height: 7vw;
    background-size: 90%;
  }

  #userLogin {
    width: 6%;
    height: 15vh;
    top: 1%;
    background-size: 90%;
  }

  #titleGame {
    width: 48%;
    height: 18vw;
    background-size: 83%;
  }

  #finnJakeSplash {
    width: 44%;
    height: 21vw;
    top: -3vw;
  }

  #btnPlay {
    width: 45%;
    height: 16vw;
  }

  #btnHelp, #btnAchie {
    width: 26%;
    height: 10vw;
  }

  #iconAste {
    width: 50%;
    height: 9vh;
  }

  /* the User */
  #pointContainer {
    height: 7vw;
    top: 25px;
  }

  #nameUserLogged {
    font-size: 2.2vw;
  }

  .totalPoints {
    font-size: 2.4vw;
  }

  /* profile */
  #titleProfile {
    height: 11vw;
  }

  #realNameUser {
    font-size: 4vw;
  }

  #yearCity {
    font-size: 2.7vw;
  }

  .scoreContainer, .levelContainer {
    height: 8.8vw;
  }

  .totalPointsProf, #topUser {
    font-size: 3vw;
  }

  .totalIconCoins {
    height: 4vw;
  }

  #btnLogOut {
    width: 49%;
    height: 6vw;
  }

  #avatarProf {
    width: 40%;
  }

  /* login */
  #popLogin {
    width: 53%;
    height: 35vw;
    top: 10vw;
    background-size: 95%;
  }

  #popLogin .nameUser {
    margin-top: 14vw;
  }

  #popLogin .btnLogin {
    width: 71%;
    height: 6.5vw;
    margin-top: 3vw;
  }

  .inputText, .inputYear {
    height: 3.4vw;
    font-size: 2.5vw;
  }

  .txtMissPass {
    bottom: 7vw;
    left: 30vw;
    font-size: 1.7vw;
  }

  /* registry */
  .textChoiseAvatar {
    font-size: 1.6vw;
    margin: 0.7vw;
  }

  .arrowNext, .arrowPrev {
    height: 6vw;
  }

  #carousel {
    width: 90%;
    height: 25vw;
  }

  #titleReg, #titleAvatar, #titleRank {
    width: 36%;
    height: 8vw;
    top: 10px;
  }

  .inputIagree {
    padding: 0px 2%;
  }

  .inputIagree span, .inputIagree a {
    font-size: 2.2vw;
  }

  #btnSendForm {
    height: 6.5vw;
    margin-top: 2%;
  }

  .profContainer p {
    font-size: 1.3vw;
  }

  .profContainer p br {
    display: none;
  }

  .txtBottom {
    font-size: 1.4vw;
    bottom: 9vw;
    left: 7.5vw;
  }

  #popUpNotifClose {
    width: 17vw;
    height: 5.8vw;
    bottom: 3vw;
    left: 39%;
  }

  /* jakeRank */
  .rankingCoint {
    width: 66%;
  }

  #jakeRank {
    width: 15%;
    height: 23vw;
    bottom: 7vw;
  }

  .textRank, .textCoins {
    width: 70%;
    height: 4vw;
    background-size: 90%;
  }

  .textTime {
    height: 4vw;
    background-size: 90%;
  }

  .rankUserCont, .totalCoinsRank, .totalTimeRank {
    height: 6.5vw;
    font-size: 2.5vw;
  }

  .numberTop {
    height: 4.2vw;
  }

  .numberTop span {
    font-size: 2vw;
  }

  #rankingContainer {
    top: 25%;
    height: 5vw;
  }

  /* popUp */
  .popBg {
    width: 82%;
    height: 48vw;
    position: relative;
  }

  .textPop {
    width: 65%;
    font-size: 2.4vw;
  }

  .iconExclamation {
    width: 6%;
    height: 13vw;
  }

  .btnLater, .btnRegisNow {
    height: 6vw;
    width: 32%;
    bottom: 3vw;
  }

  .btnRegisNow {
    left: 12%;
  }

  .btnLater {
    right: 12%;
  }

  #arrowPrevHelp, #arrowNextHelp {
    height: 6vw;
  }

  #btnClosePop {
    height: 5vw;
    right: 10%;
    top: 1vw;
  }

  /* gameOver screen */
  #titleGameOver {
    height: 12vw;
  }

  .iconTotalCoin {
    height: 5vw;
    background-size: 90%;
  }

  .totalContent {
    font-size: 4vw;
  }

  #btnPlayAgain {
    width: 37vw;
    height: 8vw;
    background-size: 95%;;
  }

  .textTotalCoins, .textTotalTime {
    width: 90%;
    height: 3vw;
  }

  #btnRanking, #btnShare {
    width: 80%;
    height: 9vw;
  }
}