.logo_svg {
  text-align: center;
}

.logo_svg_white svg {
  fill: #fff;
}

.logo_svg_green svg {
  fill: #8af0dc;
}

.logo_svg_lila svg {
  fill: #A3A0F2;
}

.content-block {
  position: relative;
}

.underline {
  text-decoration: underline;
}

.title-big {
  color: #231e5f;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 10px 20px 0;
  line-height: 30px;
  text-transform: none !important;
}

.title-medium {
  color: #231e5f;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 10px 20px 0;
  line-height: 30px;
  text-transform: none !important;
}

.text-medium {
  color: #231e5f;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 2px 20px 10px;
  line-height: 20px;
  text-transform: none !important;
}

.text-color-white {
  color: #fff;
}

.text-color-green {
  color: #22F2DD;
}

.text-color-purple {
  color: #A3A0F2;
}

.text-color-blue {
  color: #222059;
}

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

.text-fixed {
  position: fixed;
  top: calc(constant(safe-area-inset-top) + 10px); /* iOS 11.0 */
  top: calc(env(safe-area-inset-top) + 10px); /* iOS 11.2 */
}



.content-block .show-all {
  position: absolute;
  top: 0px;
  right: 20px;
}

.content-block .show-all a {
  display: block;
  color: #808080;
  font-size: 13px;
  border-radius: 30px;
  line-height: 26px;
  padding: 0 10px;
  background-color: #f1f1f1;
}

.content-block .show-all a i {
  font-size: 18px;
  color: #808080;
  margin-left: 5px;
  vertical-align: middle;
}

.rating {
  margin-top: 5px;
}

.rating svg path {
  /*fill: #212157 !important;*/
}


.gradient-caliope {
  background: #3beddc;
  background: -moz-linear-gradient(left,  #3beddc 0%, #a2a0ee 100%);
  background: -webkit-linear-gradient(left,  #3beddc 0%,#a2a0ee 100%);
  background: linear-gradient(to left,  #3beddc 0%,#a2a0ee 100%);
}

.gradient-2 {
  background: #49d6ca;
  background: -moz-linear-gradient(-90deg, #49d6ca 0%, #8089ee 40%, #8089ee 100%);
  background: -webkit-linear-gradient(-90deg, #49d6ca 0%, #8089ee 40%, #8089ee 100%);
  background: linear-gradient(180deg, #49d6ca 0%, #8089ee 40%, #8089ee 100%);
}

.items-list {
	padding-bottom:0px;
}

.items-list .item {
	margin: 0px;
	position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0 5px 3px rgba(0, 0, 0, 0.08);
  display: block;
}

.items-list .item .loader {
	position: absolute;
	display: block;
	z-index: 2;
	width: 100%;
	height: 200px;
	background: #f1f1f1;
	border: 1px solid #e5e5e5;
}

.items-list .item .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.items-list .item.loaded .loader {
	display: none;
}

.items-list .item .image {
	background-color: #e5e5e5;
	width: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.3s ease-in-out;
	opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.items-list .item.loaded .image {
	opacity: 1;
}

.items-list .item.loaded .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 2;
  border-radius: 10px;
}

.items-list .item .caption{
	padding: 15px;
  position: absolute;
  bottom: 0;
  z-index: 999999;
  width: 100%;
}

.items-list .item .caption .title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
  width: 100%;
	text-transform: normal;
  color: #fff;
  text-align: left;
}

.items-list .item .caption .items {
  width: 100%;
	margin: 10px 0 0;
}

.items-list .item .caption .items img {
	width: 15px;
  height: 15px;
  display: inline-block;
  margin-right: 10px;
  fill: #fff;
  vertical-align: middle;
}

.items-list .item .caption .items span {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
	font-weight: 400;
	line-height: 1.5em;
  color: #fff;
}

.items-list .item .caption .rating svg path {
  /*fill: #fff !important;*/
}

.items-list .item .icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  content: "";
  display:block;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  z-index: 2;
  border-radius: 40px;
  background-position: center;
}

.items-list .item .icon.padlock {
  border: 2px solid #fff;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'m18.75 9h-.75v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-.75c-1.24 0-2.25 1.009-2.25 2.25v10.5c0 1.241 1.01 2.25 2.25 2.25h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5c0-1.241-1.01-2.25-2.25-2.25zm-10.75-3c0-2.206 1.794-4 4-4s4 1.794 4 4v3h-8zm5 10.722v2.278c0 .552-.447 1-1 1s-1-.448-1-1v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z\'></path></svg>");
}

.items-list .item .icon svg path {
  fill: #fff !important;
}



/***************************/
/* Bienestar list */
/***************************/

.items-b-list {
	padding-bottom:0px;
}

.items-b-list .item {
	margin: 0px;
	position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  padding: 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.3);
}

.items-b-list .item .loader {
	position: absolute;
	display: block;
	z-index: 2;
	width: 100%;
	height: 200px;
	background: #f1f1f1;
	border: 1px solid #e5e5e5;
}

.items-b-list .item .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.items-b-list .item.loaded .loader {
	display: none;
}

.items-b-list .item .image {
	background-color: #e5e5e5;
	width: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.3s ease-in-out;
	opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.items-b-list .item.loaded .image {
	opacity: 1;
}

.items-b-list .item .caption{
	padding: 0 15px;
  z-index: 999999;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.items-b-list .item .caption .title {
	font-size: 20px;
	font-weight: 800;
	line-height: 25px;
  width: 100%;
	text-transform: normal;
  color: #fff;
  text-align: left;
  margin-bottom: 5px;
}

.items-b-list .item .caption .text {
	font-size: 12px;
	font-weight: 500;
  width: 100%;
	text-transform: normal;
  color: #fff;
  text-align: left;
}

.items-b-list .item .caption .items {
  width: 100%;
	margin: auto 0 0;
}

.items-b-list .item .caption .items img {
	width: 15px;
  height: 15px;
  display: inline-block;
  margin-right: 10px;
  fill: #fff;
  vertical-align: middle;
}

.items-b-list .item .caption .items span {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
	font-weight: 400;
	line-height: 1.5em;
  color: #fff;
}

.items-b-list .item .caption .rating svg path {
  /*fill: #fff !important;*/
}

.items-b-list .item .icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  content: "";
  display:block;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  z-index: 2;
  border-radius: 40px;
  background-position: center;
}

.items-b-list .item .icon.padlock {
  border: 2px solid #fff;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'m18.75 9h-.75v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-.75c-1.24 0-2.25 1.009-2.25 2.25v10.5c0 1.241 1.01 2.25 2.25 2.25h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5c0-1.241-1.01-2.25-2.25-2.25zm-10.75-3c0-2.206 1.794-4 4-4s4 1.794 4 4v3h-8zm5 10.722v2.278c0 .552-.447 1-1 1s-1-.448-1-1v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z\'></path></svg>");
}

.items-b-list .item .icon svg path {
  fill: #fff !important;
}



.items-c-list {
	padding-bottom:0px;
}

.items-c-list .item {
	margin: 0px;
	position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  padding: 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 0 5px 3px rgba(0, 0, 0, 0.01);
}

.items-c-list .item .loader {
	position: absolute;
	display: block;
	z-index: 2;
	width: 100%;
	height: 200px;
	background: #f1f1f1;
	border: 1px solid #e5e5e5;
}

.items-c-list .item .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.items-c-list .item.loaded .loader {
	display: none;
}

.items-c-list .item .image {
	background-color: #e5e5e5;
	width: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.3s ease-in-out;
	opacity: 0;
  border-radius: 10px;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.items-c-list .item.loaded .image {
	opacity: 1;
}

.items-c-list .locked .image .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  content:"";
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
}

.items-c-list .locked .image .icon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  content: "";
  display:block;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  z-index: 2;
  border-radius: 40px;
  background-position: center;
}

.items-c-list .item .caption{
	padding: 0 15px;
  z-index: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.items-c-list .item .caption .title {
	font-size: 20px;
	font-weight: 800;
	line-height: 25px;
  width: 100%;
	text-transform: normal;
  color: #A3A0F2;
  text-align: left;
  margin-bottom: 5px;
}

.items-c-list .item .caption .text {
	font-size: 12px;
	font-weight: 500;
  width: 100%;
	text-transform: normal;
  color: #231e5f;
  text-align: left;
}

.items-c-list .item .caption .items {
  width: 100%;
	margin: auto 0 0;
}

.items-c-list .item .caption .items img {
	width: 15px;
  height: 15px;
  display: inline-block;
  margin-right: 10px;
  fill: #fff;
  vertical-align: middle;
}

.items-c-list .item .caption .items span {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
	font-weight: 400;
	line-height: 1.5em;
  color: #fff;
}

.items-c-list .item .caption .rating {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.items-c-list .item .caption .icon-play {
  width: 30px;
  fill: #000;
  margin-left: auto;
}

.items-c-list .item .caption .icon-padlock {
  width: 20px;
  fill: #000;
  margin-left: auto;
}

.items-c-list .item .icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  content: "";
  display:block;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  z-index: 2;
  border-radius: 40px;
  background-position: center;
}

.items-c-list .item .icon.padlock {
  border: 2px solid #fff;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'m18.75 9h-.75v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-.75c-1.24 0-2.25 1.009-2.25 2.25v10.5c0 1.241 1.01 2.25 2.25 2.25h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5c0-1.241-1.01-2.25-2.25-2.25zm-10.75-3c0-2.206 1.794-4 4-4s4 1.794 4 4v3h-8zm5 10.722v2.278c0 .552-.447 1-1 1s-1-.448-1-1v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z\'></path></svg>");
}

.items-c-list .item .icon svg path {
  fill: #fff !important;
}


/***************************/
/* Audio */
/***************************/

#audio-detail .loader {
	position: absolute;
	display: block;
	z-index: 2;
	width: 100%;
	height: 100%;
}

#audio-detail .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#audio-detail .item.loaded .loader {
	display: none;
}

#audio-detail .overlay {
  position: absolute;
  top: 0;
  left: 0;
	background-color: rgba(0,0,0,0.6);
  height: calc(100vh);
	width: calc(100vw);
	background-size: cover;
	background-position: center;
  z-index: 2;
}

#audio-detail .pic {
  position: absolute;
  top: 0;
  left: 0;
	background-color: #e5e5e5;
  height: calc(100vh);
	width: calc(100vw);
	background-size: cover;
	background-position: center;
	opacity: 0;
  z-index: 1;
}


#audio-detail .loaded .pic {
	opacity: 1;
}

#audio-detail .caption {
  position: absolute;
  bottom: 200px;
  padding: 20px 30px;
  text-align: center;
  box-sizing: border-box;
  z-index: 3;
  width: 100%;
}

#audio-detail .caption .title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5em;
  width: 100%;
  margin-bottom: 0px;
  text-align: left;
}

#audio-detail .caption .text {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
  width: 100%;
	margin: 3px 0 30px;
  text-align: left;
}



/***************************/
/* Settings */
/***************************/

#settings {
  background-color: #f1f1f1;
}

#settings .logo {
  padding: 0;
  max-width: 200px;
  margin-top: 20px;
}

.settings-field {
  padding: 9px 20px;
  overflow: hidden;
  color: #15195f;
  background: #fff;
  margin: 0 0 10px;
  border-radius: 5px;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
}

.settings-field.highlight {
  color: #fff;
  background: #A3A0F2;
}

.settings-label {
	float: left;
  font-weight: 800;
  font-size: 14px;
  line-height: 34px;
  color: #15195f;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.settings-label svg {
	width: 20px;
  margin-right: 10px;
  fill:#231e5d;
}

.settings-field.highlight .settings-label {
  color: #fff;
}

.settings-field.highlight .settings-label svg {
	fill: #fff;
}

.settings-input {
  font-family: Arial;
	float: right;
	text-align: right;
  font-size: 14px;
  line-height: 34px;
  color: #808080;
}

.settings-field.highlight .settings-input {
  color: #fff;
}

.settings-input i {
	font-size: 20px;
  font-weight: 600;
}

.settings-field a {
	display: block;
  color: #808080;
  overflow: hidden;
}

.btn-log {
  background-color: #49d6ca !important;
	padding: 0px 20px;
	text-decoration: none;
	display: inherit;
	text-align: center;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 50px;
  border-radius: 60px;
  font-weight: 800;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
  margin: 20px 20px 10px;
}

/***************************/
/* Preferences */
/***************************/

#preferences .preferences-wrapper {
  padding: 20px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

#preferences .title {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 15px;
}

#preferences .text {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
  line-height: 25px;
}

#preferences .preferences-list {
  margin: 0 0 20px;
}

#preferences .preferences-list li {
  border: 1px solid #fff;
  padding: 10px 20px;
  display: block;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  position: relative;
}

#preferences .preferences-list li.active {
  border: 1px solid #fff;
  color: #A3A0F2;
  background-color: #fff;
}

#preferences .preferences-list li.active:after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 15px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='405.272px' height='405.272px' viewBox='0 0 405.272 405.272' %3e%3cpath fill=\'%23A3A0F2\' d='M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836 c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064 c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z'/%3e%3c/svg%3e");
}



/***************************/
/* Home */
/***************************/

.home-wrapper, .wellness-wrapper {
  padding-top: 20px;
  /*padding-top: calc(constant(safe-area-inset-top));
  /padding-top: calc(env(safe-area-inset-top));*/
  padding-top: calc(constant(safe-area-inset-top) + 20px);
  padding-top: calc(env(safe-area-inset-top) + 20px);
}

.home-wrapper, .stories-wrapper, .wellness-wrapper {
  padding-bottom: 0 0 30px 0;
}

/***************************/
/* Home */
/***************************/



.home-list {
	padding-bottom:0px;
}

.home-list .item, .stories-list {
	margin: 0px;
	position: relative;
}

.home-list .item .loader, .stories-list .item .loader {
	position: absolute;
	display: block;
	z-index: 2;
	width: 100%;
	background: #fff;
  height: calc((100vw - 20px) / 2.23);
  border-radius: 10px;
}

.home-list .item .loader .spinner, .stories-list .item .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.home-list .item.loaded .loader, .stories-list .item.loaded .loader {
	display: none;
}

.home-list .item .image, .stories-list .item .image {
	background-color: #e5e5e5;
  border-radius: 10px;
	width: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 0 5px 3px rgba(0, 0, 0, 0.08);
	opacity: 1;
  height: calc((100vw - 20px) / 2.23);
  overflow: hidden;
  position: relative;
}

.home-list .item.loaded .image, .stories-list .item.loaded .image {
	opacity: 1;
}

.home-list .item.locked .image .overlay, .stories-list .item.locked .image .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  content:"";
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
}

.home-list .item .caption, .stories-list .item .caption {
	padding: 10px 0px;
}

.home-list .item .caption .title, .stories-list .item .caption .title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5em;
  overflow: hidden;
  /*white-space: nowrap;*/
  text-overflow: ellipsis;
  width: 100%;
	text-transform: normal;
  color: #fff;
  text-align: center;
  color: #212157;
}

.home-list .item .caption .subtitle, .stories-list .item .caption .subtitle {
	font-size: 12px;
	font-weight: 100;
	line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
	margin: 3px 0;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #212157;
}

.home-list .item .caption .level, .stories-list .item .caption .level {
  overflow: hidden;
  width: 100%;
}

.home-list .item .image, .stories-list .item .image {
  overflow: hidden;
}

.home-list .item .image .icon, .stories-list .item .image .icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  content: "";
  display:block;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  z-index: 2;
  border-radius: 40px;
  background-position: center;
}

.home-list .item .image .icon.padlock, .stories-list .item .image .icon.padlock {
  border: 2px solid #fff;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'m18.75 9h-.75v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-.75c-1.24 0-2.25 1.009-2.25 2.25v10.5c0 1.241 1.01 2.25 2.25 2.25h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5c0-1.241-1.01-2.25-2.25-2.25zm-10.75-3c0-2.206 1.794-4 4-4s4 1.794 4 4v3h-8zm5 10.722v2.278c0 .552-.447 1-1 1s-1-.448-1-1v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z\'></path></svg>");
}

.home-list .item .image .icon svg path, .stories-list .item .image .icon svg path {
  fill: #fff !important;
}



/***************************/
/* Wellness */
/***************************/

.wellness-category {
  font-size: 50px;
  color: #fff;
  background-color: rgba(255,255,255,0.4);
  border-radius: 100%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  position: relative;
  top: 5px;
}


/***************************/
/* Challenges */
/***************************/

.challenges-list {
	padding-bottom:0px;
}

.challenges-list {
	margin: 0px;
	position: relative;
}

.challenges-list .item {
  height: 100%;
}

.challenges-list .item .loader {
	position: absolute;
	display: block;
	z-index: 2;
	width: 100%;
	background: #fff;
  height: calc((100vw - 20px) / 2.23);
  border-radius: 10px;
}

.challenges-list .item .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.challenges-list .item.loaded .loader {
	display: none;
}

.challenges-list .item .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
  border-radius: 10px;
}

.challenges-list .item .image {
	background-color: #e5e5e5;
  border-radius: 10px;
	width: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 0 5px 3px rgba(0, 0, 0, 0.08);
	opacity: 1;
  height: calc((100vw - 20px) / 2.23);
  overflow: hidden;
  position: relative;
}

.challenges-list .item.loaded .image {
	opacity: 1;
}

.challenges-list .item .wrapper {
  border-radius: 10px;
	width: 100%;
	box-shadow: 0px 0 5px 3px rgba(0, 0, 0, 0.01);
  height: 100%;
  position: relative;
}

.challenges-list .item .wrapper.gradient {
  background: -moz-linear-gradient(left,  #3beddc 0%, #a2a0ee 100%);
  background: -webkit-linear-gradient(left,  #3beddc 0%,#a2a0ee 100%);
  background: linear-gradient(to left,  #3beddc 0%,#a2a0ee 100%);
}

.challenges-list .item .wrapper.white {
  background: rgba(255,255,255,0.3);
}

.challenges-list .item .caption {
  position: absolute;
  bottom: 0;
  padding: 20px 20px 50px;
  width: 100%;
  box-sizing: border-box;
}

.challenges-list .item .caption .title {
	font-size: 18px;
	font-weight: 600;
  overflow: hidden;
  width: 100%;
	text-transform: normal;
  color: #fff;
  text-align: left;
}

.challenges-list .item .caption .subtitle {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
  width: 100%;
	margin: 5px 0;
  color: #fff;
}

.challenges-list .item .caption .author {
  position: absolute;
  bottom: 15px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
  width: 100%;
  color: #fff;
}

.challenges-list .item .play {
  position: absolute;
  bottom: 20px;
  width: 36px;
  height: 36px;
  background-color: #231e5f;
  border-radius: 100%;
  right: 20px;
}


/*********************************************/
/* Horizontal Wrapper */
/*********************************************/


.horz-wrapper {
  display: flex;
  overflow-x: scroll;
  flex: 0 0 auto;
  scroll-snap-type: x mandatory;
  padding: 10px 15px 0px 15px;
}

.horz-wrapper:after {
  content: "";
  flex: 0 0 5px;
}

.horz-wrapper-item {
  min-width: calc((100vw) / 2.20);
  width: calc((100vw) / 2.20);
  padding: 5px;
  transform: translate3d(calc(((100vw) / 2.20) * 0), 0px, 0px);
  box-sizing: border-box;
  display: block;
}

.horz-wrapper-item.item-x-2 {
  padding: 5px;
  box-sizing: border-box;
  display: block;
  min-width: calc((100vw) / 1.10);
  width: calc((100vw) / 1.10);
  transform: translate3d(calc(((100vw) / 1.10) * 0), 0px, 0px);
  /*height: 180px;*/
}

.horz-wrapper-item .image {
  min-height: calc(((100vw) / 2.20) - 20px);
  height: calc(((100vw) / 2.20) - 20px);
  transform: translate3d(calc(((100vw) / 2.20) * 0), 0px, 0px);
}

.horz-wrapper-item.item-x-2 .image {
  min-height: auto;
  transform: translate3d(calc(((100vw) / 2.20) * 0), 0px, 0px);
}


/*********************************************/
/* Vertical Wrapper */
/*********************************************/


.vertical-wrapper-1-column  {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px 25px 10px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.vertical-wrapper-1-column .vertical-wrapper-item {
  min-width: calc((100vw) - 20px);
  width: calc((100vw) - 20px);
  padding: 5px 5px 10px;
  box-sizing: border-box;
}

.vertical-wrapper-1-column .vertical-wrapper-item .image {
  min-height: 180px;
  height: 180px;
}

.vertical-wrapper-2-columns  {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 5px 5px 5px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.vertical-wrapper-2-columns .vertical-wrapper-item {
  min-width: calc((100vw / 2) - 5px);
  width: calc((100vw / 2) - 5px);
  padding: 5px;
  transform: translate3d(calc(((100vw) / 2) * 0), 0px, 0px);
  box-sizing: border-box;
}

.vertical-wrapper-2-columns .vertical-wrapper-item .image {
  min-height: calc((100vw / 2) - 5px);
  height: calc((100vw / 2) - 5px);
  transform: translate3d(calc(((100vw) / 2.10) * 0), 0px, 0px);
}


/***************************/
/* Stories */
/***************************/

#stories .logo-1 {
  width: 200px;
  fill: #00f5db;
  position: fixed;
  left: 50%;
  top: calc(constant(safe-area-inset-top) + 10px); /* iOS 11.0 */
  top: calc(env(safe-area-inset-top) + 10px); /* iOS 11.2 */
  transform: translateX(-50%);
}

#stories .logo-1 path {
  fill: #00f5db;
}

.navbar-categories {
  -webkit-overflow-scrolling: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  padding: 10px 10px 10px;
  background-color: #fff;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  overflow-x: scroll;
  padding-top: calc(constant(safe-area-inset-top) + 80px); /* iOS 11.0 */
  padding-top: calc(env(safe-area-inset-top) + 80px); /* iOS 11.2 */
  text-align: center;
}

.navbar-horizontal {
  white-space: nowrap;
  display: flex;
  /*scroll-snap-type: x mandatory;*/
  flex: 0 0 auto;
}

.navbar-horizontal:after {
  content: "";
  flex: 0 0 20px;
}

.navbar-horizontal::-webkit-scrollbar {
  display: none;
}

.navbar-horizontal li {
  list-style: none;
}

.navbar-horizontal li a {
  font-size: 15px;
  font-weight: 500;
  color: #808080;
  background-color: #fff;
  line-height: 30px;
  padding: 0 20px;
  margin: 0 2px;
  border-radius: 30px;
  display: block;
  border: 1px solid #ccc;
}

.navbar-horizontal li.active a {
  border: 2px solid #00f5db;
  color: #fff !important;
  background-color: #00f5db;
}


/***************************/
/* Serie */
/***************************/

.serie .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.serie.loaded .loader {
	display: none;
}

.serie .image {
  height: 300px;
  width: 100%;
  background-color: #ccc;
  background-size: cover;
  background-position: center;
  position: relative;
}

.serie .image .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
}

.serie .image .caption {
	position: absolute;
  bottom: 0;
  padding: 20px 20px 50px;
  width: 100%;
  box-sizing: border-box;
}

.serie .image .caption .title {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5em;
  width: 100%;
	text-transform: normal;
  color: #fff;
  text-align: left;
}

.serie .tit {
	font-size: 22px;
	font-weight: 800;
	line-height: 25px;
  width: 100%;
	padding: 30px 20px 0;
  color: #222059;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1;
  position: relative;
}

.serie .text {
	font-size: 14px;
	font-weight: 600;
	line-height: 25px;
  width: 100%;
	padding: 20px;
  color: #A3A0F2;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1;
  position: relative;
}

.serie-items {
  padding: 10px 20px;
}

.serie-items .serie-item  {
  position: relative;
  margin-bottom: 20px;
  box-sizing: border-box;
  min-height: 30px;
}

.serie-items .serie-item .icon {
  background-color: #ccc;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 15px;
  border: 3px solid #ccc;
}

.serie-items .serie-item .icon.play {
  background-color: #a29ef4;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='163.861px' height='163.861px' fill=\'%233b3957\' viewBox='0 0 163.861 163.861' style='enable-background:new 0 0 163.861 163.861;' xml:space='preserve'%3e%3cpath d='M34.857,3.613C20.084-4.861,8.107,2.081,8.107,19.106v125.637c0,17.042,11.977,23.975,26.75,15.509L144.67,97.275 c14.778-8.477,14.778-22.211,0-30.686L34.857,3.613z'/%3e%3c/svg%3e");
  fill: #fff;
  background-size: 12px;
}

.serie-items .serie-item .icon.checked {
  background-color: #8af5dc;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='405.272px' height='405.272px' viewBox='0 0 405.272 405.272' %3e%3cpath fill=\'%23157861\' d='M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836 c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064 c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z'/%3e%3c/svg%3e");
}

.serie-items .serie-item .icon.padlock {
  background-color: #666;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'m18.75 9h-.75v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-.75c-1.24 0-2.25 1.009-2.25 2.25v10.5c0 1.241 1.01 2.25 2.25 2.25h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5c0-1.241-1.01-2.25-2.25-2.25zm-10.75-3c0-2.206 1.794-4 4-4s4 1.794 4 4v3h-8zm5 10.722v2.278c0 .552-.447 1-1 1s-1-.448-1-1v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z\'></path></svg>");
}

.serie-items .serie-item .icon:after {
  width: 3px;
  height: 38px;
  position: absolute;
  left: 14px;
  top: 30px;
  content: "";
  background-color: #ccc;
}

.serie-items .serie-item:last-child .icon:after {
  display: none;
}

.serie-items .serie-item .title {
  color: #808080;
  padding: 7px 40px 0 45px;
  line-height: 20px;
  font-weight: 600;
  font-size: 15px;
}

.serie-items .serie-item .duration {
  width: 40px;
  text-align: right;
  height: 20px;
  border-radius: 20px;
  position: absolute;
  right: 0;
  top: 5px;
  color: #808080;
  font-size: 14px;
}

.serie-items .serie-item.disabled .title, .serie-items .serie-item.disabled .duration  {
  color: #e5e5e5;
}

.serie-items .serie-item.disabled .icon.play, .serie-items .serie-item.disabled .icon.padlock {
  opacity: 1;
  background-color: #ddd;
  border-color: #ccc;
}

.serie .author {
  color: #808080;
  padding: 10px 20px;
  background-color: #f1f1f1;
  border-radius: 60px;
  position: relative;
  display: block;
  margin: 0 20px 30px;
}

.serie .author .author-name {
  color: #808080;
  line-height: 20px;
  font-weight: 400;
  font-size: 15px;
  margin-left: 30px;
}

.serie .author .author-picture {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  position: absolute;
  left: 5px;
  top: 5px;
  background-size: cover;
  background-position: center;
}


/***************************/
/* Subscribe */
/***************************/

.subscribe {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}



.svg-clip {
  width: 0;
  height: 0;
}

.subscribe .subscribe-list {
  padding: 30px 30px 0;
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.subscribe .subscribe-list ul {
  margin: 0 0 10px;
}

.subscribe .subscribe-list ul li {
  color: #fff;
  font-size: 18px;
  margin: 0 0 10px 0;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	position: relative;
  line-height: 28px;
  padding: 0px 0px 0px 30px;
  font-weight: 500;
}

.subscribe .subscribe-list ul li:before {
	position: absolute;
	top: 3px;
	left: 0;
  width: 15px;
  height: 15px;
	color: #fff;
  content: "";
  display:block;
  border-radius: 100%;
  padding: 3px;
  background-size: 10px 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='405.272px' height='405.272px' viewBox='0 0 405.272 405.272' %3e%3cpath fill=\'%23a29ef4\' d='M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836 c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064 c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

.subscribe .subscribe-cta {
  /*flex-grow: 1;*/
  align-self: flex-end;
  padding: 0px;
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
  box-sizing: border-box;
  width: 100%;
}

.subscribe .subscribe-cta-button {
  background-color: #49d6ca !important;
	padding: 0px 20px;
	text-decoration: none;
	display: inherit;
	text-align: center;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 50px;
  border-radius: 60px;
  font-weight: 800;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
  margin: 20px 0px 10px;
}

@media (max-width: 321px) {

  .subscribe .subscribe-cta-button {
    font-size: 12px !important;
    padding: 0px 20px !important;
  }

}

.subscribe .subscribe-title {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
}

.subscribe .subscribe-logo img {
  width: 200px;
  margin-bottom: 20px;
}

.subscribe-free {
  font-size: 14px;
  font-weight: 300;
  color: #fff !important;
  padding: 0 20px;
  width: auto;
  display: inline-block;
  margin-bottom: 15px;
}

.subscribe-old-price {
  font-size: 22px;
  font-weight: 600;
  color: #fff !important;
  margin-bottom: 5px;
  position: relative;
}

.subscribe-old-price .strike {
  text-decoration: line-through;
  position: absolute;
  top: 13px;
  left: -10px;
  width: 90px;
  height: 2px;
  background-color: #fff;
  transform: rotate(13deg);
}

.subscribe-price {
  font-size: 45px;
  color: #fff;
  font-weight: 600;
margin-bottom: 5px;
  /*
  padding: 10px;
  width: 100%;*/

}

.subscribe-cancel {
  font-size: 14px;
  font-weight: 300;
  color: #fff !important;
  margin-bottom: 15px;
}

.subscribe .subscribe-small {
  font-size: 12px;
  font-weight: 300;
  margin: 10px;
  text-align: center;
}

@media (max-height: 720px) {

  .subscribe .subscribe-list ul li {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
  }

}


.btn-custom {
  position: relative;
  background-color: #22F2DD;
	padding: 0px 20px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 50px;
  border-radius: 60px;
  font-weight: 600;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.btn-custom-2 {
  position: relative;
  background-color: #A3A0F2;
	padding: 0px 20px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 50px;
  border-radius: 60px;
  font-weight: 600;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.btn-custom-3 {
  position: relative;
  background-color: none;
	padding: 0px 20px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 50px;
  border-radius: 60px;
  font-weight: 600;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  box-shadow: none;
  overflow: hidden;
}



.section-back {
  color: #fff;
  height: 50px;
  left: 0px;
  line-height: 53px;
  padding: 0;
  position: fixed;
  text-align: center;
  top: 10px;
  width: 50px;
  z-index: 99999;
  margin-top: calc(constant(safe-area-inset-top) + 0px);
  margin-top: calc(env(safe-area-inset-top) + 0px);
}

.section-back i {
	font-size: 30px;
	color: #fff;
  line-height: 50px;
  text-shadow: 0px 0px 40px rgba(0,0,0,0.5);
}

.section-header {
  padding-bottom: 20px;
  height: 250px;
  min-height: 250px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.section-header .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

.section-header .layer svg {
  position: absolute;
  left: -2px;
  bottom: -1px;
  width: 110%;
  fill: #cccbf1;
  z-index: 9;
}

.section-header.arpa svg {
  position: absolute;
  left: 5px;
  bottom: 0px;
  height: 110%;
}



.section-header .wave {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 2;
}

@media (min-width: 500px) {

  .section-header .wave {
    display: none;
  }

}

.section-header h1 {
  color: #fff;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 0px;
  z-index: 3;
  padding: 0 20px;
}


/***************************/
/* Author */
/***************************/

.author .name {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.5em;
  box-sizing: border-box;
  width: 100%;
	text-transform: normal;
  color: #a29ef4;
  text-align: left;
  padding: 30px 20px 10px 20px;
}

.author .text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5em;
  width: 100%;
	padding: 10px 20px 20px;
  color: #808080;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #fff;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.author .instagram {
	text-align: center;
  padding: 10px 0 30px;
}

.author .instagram a i {
	font-size: 40px;
  color: #a29ef4;
}


.form-item {
  margin-bottom: 10px;
}

.form-text {
  font-size: 15px;
  line-height: 20px;
  font-weight: 300;
}

#page-welcome .form-wrapper, #page-login .form-wrapper, #page-password .form-wrapper, #page-resetpassword .form-wrapper, #page-signup .form-wrapper {
  margin: 20px;
  padding: 10px 10px;
  max-width: 300px;
}

#page-welcome h1, #page-login h1, #page-password h1, #page-resetpassword h1, #page-signup h1 {
  color: #fff;
  margin: 0 0 50px 0;
  font-size: 28px;
  font-weight: 900;
}

#page-welcome svg {
  width: 200px;
  fill: #fff;
}

#page-pay svg {
  width: 200px;
  fill: #fff;
  margin-bottom: 10px;
}

#page-password .back, #page-resetpassword .back {
  top: 40px;
  left: 30px;
  width: 50px;
  height: 50px;
  display: block;
  z-index: 99999999;
}

#page-login .form-control, #page-password .form-control, #page-resetpassword .form-control, #page-signup .form-control {
  background: none;
  border: none;
  box-shadow: none !important;
  height: 50px;
  font-size: 18px;
  width: 100%;
  border-radius: 0px;
  margin-bottom: 10px;
  box-sizing: border-box;
  color: #fff;
  padding: 0 00px 0 0px;
  border-bottom: 1px solid #fff;
}

#giftcards .form-control {
  background: none;
  border: none;
  box-shadow: none !important;
  height: 50px;
  font-size: 18px;
  width: 100%;
  border-radius: 0px;
  margin-bottom: 10px;
  box-sizing: border-box;
  color: #808080;
  padding: 0 10px 0 50px;
  border-bottom: 1px solid #808080;
}

.form-group {
  position: relative;
}

#page-login .form-group i, #page-password .form-group i, #page-reset-password .form-group i, #page-signup .form-group i {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #fff;
  line-height: 50px;
}

#page-login .form-group i:before, #page-password .form-group i:before, #page-reset-password .form-group i:before, #page-signup .form-group i:before {
  margin: 0;
}

#page-login label, #page-password label, #page-resetpassword label, #page-signup label {
  color: #fff;
  font-size: 11px;
  margin-bottom: 5px;
  display: block;
  font-weight: 400;
  text-transform: uppercase;
}

#giftcards label {
  color: #808080;
  font-size: 12px;
  margin-bottom: 5px;
  display: block;
  font-weight: 600;
  text-transform: uppercase;
}

#page-login div.error, #page-signup div.error, #giftcards div.error {
  margin: 5px 0 15px;
  color: rgb(255,0,0);
}

#page-pay {
  z-index: 999999999;
}



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
  background-color: none !important;
  background: none !important;
}


.connect {
  /*display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 20px;
  text-align: center;*/
  padding: 0 30px;
}

.connect .signin_with_facebook, .connect .signin_with_apple, .connect .signin_with_google {
  height: 45px;
  width: 100%;
  display: block;
  margin: 0 0 10px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: left;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f1f1;
  color: #666;
  font-weight: 600;
}

body.Android .connect .signin_with_apple {
  display: none !important;
}

.connect img {
  line-height: 50px;
  width: 50px;
  height: 20px;
  text-align: center;
}

.signin {
  color: #808080;
  font-size: 20px;
  font-weight: 600;
}

textarea,
input.text,
input[type="text"],
input[type="password"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}



:focus {
  outline: none;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.btn-submit {
  background-color: #49d6ca !important;
	padding: 0px 20px;
	text-decoration: none;
	display: inherit;
	text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 50px;
  border-radius: 60px;
  font-weight: 800;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.btn-submit i {
  position: relative;
  top: 6px;
  font-size: 30px;
}

.logo {
  text-align: center;
  margin: 0 auto 30px;
  display: inherit;
}

.valign {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
}

*::-webkit-input-placeholder {
    color: rgba(255,255,255,0.5);
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: rgba(255,255,255,0.5);
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: rgba(255,255,255,0.5);
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255,255,255,0.5);
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgba(255,255,255,0.5);
}
*::placeholder {
    /* modern browser */
    color: rgba(255,255,255,0.5);
}



.back-black {
  color: #000;
}


.ap__item {
  position: relative;
  /*background: #f1f1f1;*/
  top: auto;
}

.ap__item--track {
  padding: 20px 30px;
}

.ap__item--playback {
  padding: 30px 0;
}


.ap button.ap__controls--play {
  background: none;
}

.ap button.ap__controls--play svg {
  fill: #ccc;
  width: 70px;
  height: 70px;
}

.modal .modal-minimize {
  top: calc(constant(safe-area-inset-top) + 20px);
  top: calc(env(safe-area-inset-top) + 20px);
}

.modal .modal-share {
  top: calc(constant(safe-area-inset-top) + 20px);
  top: calc(env(safe-area-inset-top) + 20px);
}

.modal .modal-close {
  top: calc(constant(safe-area-inset-top) + 0px);
  top: calc(env(safe-area-inset-top) + 0px);
}