html, body {
font-size: 14px;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-o-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #F5F5F5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #FFF;
text-align: center;
background-color: #337AB7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #599BFF;
}
.progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
/* fenxiangyemian */
.share_success, .share_page {
display: none;
}
.container {
width: 100%;
background-color: #ffffff;
margin-right: auto;
margin-left: auto;
}
.share_body {
margin: 0 auto;
width: 90%;
background: #ffffff;
border-radius: 10px;
}
.share_hd_text {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #383838;
}
.share_main {
margin: 10px auto;
width: 100%;
background: #eeeff4;
border-radius: 10px;
}
.share_main_bt {
margin: 10px auto;
background:#4ab115;
border-radius: 10px;
width: 80%;
line-height: 45px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #191e24 !important;
}
.weui_dialog_text {
margin: 0 5px;
text-align: center;
font-size: 14px;
color: #222222;
}
.page {
/*display: none;*/
}
.header_flex_item {
color: #fff !important;
}
.detail_block {
width: 100%;
height: auto;
/* float: left; */
padding: 0 0 5px;
margin: 10px 0 0px 0;
border-bottom: 1px solid #eaeaea;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
.detail_left {
width: 20%;
/* position: absolute; */
/* float: left; */
padding: 0;
/*margin: 0 22px 0 0;*/
}
.detail_left img {
width: 15vw;
max-width: 15vw;
height: 15vw;
}
.detail_right {
display: flex;
width: 80%;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: hidden;
text-align: left;
}
.detail_right h3 {
width: 100%;
/* float: left; */
padding: 0;
margin: 0 0 5px;
font-size: 1rem;
color: #3b5998;
font-weight: 700;
}
.detail_right h3 .comm_name {
color: #000000
}
.detail_right h3 a:hover {
color: #5f7dbc
}
.detail_right p {
width: 100%;
float: left;
padding: 0;
margin: 0 0 5px;
color: #000;
line-height: normal
}
.detail_right span {
width: 100%;
float: left;
padding: 0;
margin: 0 0 5px;
font-size: 13px;
color: #818181
}
.likebar {
float: right;
color: #7F7F7F;
display: flex;
flex-direction: row;
line-height: 24px;
align-items: center;
justify-content: center;
}
.top-header{
position: fixed;
width: 100%;
height: 65px;
z-index: 99;
background: #fff;
padding: 9px;
opacity: 0.95;
}
.top-header > img{
width: 30px;
}
.caja_gift{
width: 98%;
height: 90%;
}
.weui_dialog {
position: fixed;
z-index: 998;
width: 85%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fafafc;
text-align: center;
border-radius: 10px;
font-family: arial
}
.weui_mask {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .6)
}
.weui_dialog_hd {
padding: 0em 0 .3em;
margin-top: 15px;
}
.weui_dialog_bd {
padding: 0 20px;
font-size: 16px;
color: #888;
word-wrap: break-word;
word-break: normal
}
.weui_dialog_ft {
width: 90%;
margin-left: 5%;
margin-bottom: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
position: relative;
line-height: 3rem;
margin-top: 20px;
font-size: 17px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.weui_dialog_ft:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #d5d5d6;
color: #d5d5d6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
.weui_btn_dialog.primary {
color: #fff
}
.weui_dialog_title {
font-weight: 600;
font-size: 20px;
color: #000;
margin-top: 10px;
}
.dt[[datetime2]]{
display: none;
background-image: url();
}
.weui_close {
display: block;
position: absolute;
top: 6px;
right: 6px;
}
img.error {
display: inline-block;
transform: scale(1);
content: '';
color: transparent;
}
img.error::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: #fff !important;
opacity: 0.95;
}
img.error::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: #fff !important;
opacity: 0.95;
}
.boxes,
.boxes cbox,
.boxes .try img {
width: 100%
}
.boxes {
margin: 10px auto;
max-width: 800px
}
.boxes>.try {
position: relative;
display: inline-block;
width: 23.8%;
-webkit-transition-duration: .2s;
transition-duration: .2s;
cursor: pointer
}
@media (max-width:767px) {
.boxes>.try {
width: 32.5%
}
.boxes>.try:nth-child(-n+4) {
display: none
}
}
@media (max-width:479px) {
.boxes>.try {
width: 32%
}
}
@media (max-width:319px) {
.boxes>.try {
width: 48%
}
.boxes>.try:nth-child(-n+5) {
display: none
}
}
.div_img_gift {
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 5;
display: none;
align-items: center;
justify-content: center
}
.img_gift {
display: none;
width: 70%;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
margin: 0 auto
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes tapa_superior {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.boxes {
background-size: cover;
border-radius: 20px;
position: relative;
text-align: center
}
.try {
position: relative;
margin: 20px 0
}
.try>div {
position: absolute
}
.try .caja {
position: relative
}
.caja_trasera {
z-index: 1
}
.caja_tapa {
z-index: 3
}
.caja {
z-index: 2
}
.caja_gift {
z-index: 1
}
.boxes .try.abierta>.caja_tapa {
animation: tapa_superior 2s forwards
}
.boxes .try.premiazo>.caja_gift {
animation: tapa_superior 4s infinite alternate
}
@keyframes tapa_superior {
from {
top: 0
}
to {
top: -40px
}
}
@media (max-width:500px) {
@keyframes tapa_superior {
from {
top: 0
}
to {
top: -30px
}
}
}
#p_loading,
.p_loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 99;
background-color: #dadada
}
.temblor:hover {
animation: temblor .82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px
}
@keyframes temblor {
10%,
90% {
transform: translate3d(-1px, 0, 0)
}
20%,
80% {
transform: translate3d(2px, 0, 0)
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0)
}
40%,
60% {
transform: translate3d(4px, 0, 0)
}
}
.temblor_inf {animation: temblor_inf 2s;animation-iteration-count: infinite;margin: 0px;height: 140px;}
@keyframes temblor_inf {
0% {transform: translate(1px, 1px) rotate(0deg)}
10% {transform: translate(-1px, -2px) rotate(-1deg)}
20% {transform: translate(-3px, 0px) rotate(1deg)}
30% {transform: translate(3px, 2px) rotate(0deg)}
40% {transform: translate(1px, -1px) rotate(1deg)}
50% {transform: translate(-1px, 2px) rotate(-1deg)}
60% {transform: translate(-3px, 1px) rotate(0deg)}
70% {transform: translate(3px, 1px) rotate(-1deg)}
80% {transform: translate(-1px, -1px) rotate(1deg)}
90% {transform: translate(1px, 2px) rotate(0deg)}
100% {transform: translate(1px, -2px) rotate(-1deg)}
}
.p_modal img {
max-width: 100%;
max-height: 28vh
}
.p_modal {
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif
}
.p_modal h2 {
color: #575757;
font-size: 25px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
margin: 25px 0;
padding: 0;
display: block
}
.p_modal p {
color: #797979;
font-size: 15px;
text-align: center;
font-weight: 300;
position: relative;
text-align: inherit;
float: none;
margin: 0;
padding: 0;
line-height: normal
}
.p_modal_button {
margin: 15px 0px 0 0px;
border: 1px solid #000;
white-space: nowrap;
align-items: center;
border-radius: 24px;
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
height: 48px;
justify-content: center;
max-width: 180px;
min-width: 80px;
padding: 4px 24px;
}
.checkmark {
display: none
}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg)
}
.checkmark:after {
opacity: 1;
height: 3.5em;
width: 1.75em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: "";
left: 1.75em;
top: 3.5em;
position: absolute
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1
}
20% {
height: 0;
width: 1.75em;
opacity: 1
}
40% {
height: 3.5em;
width: 1.75em;
opacity: 1
}
100% {
height: 3.5em;
width: 1.75em;
opacity: 1
}
}
.circle-loader {
border: 1px solid rgba(0, 0, 0, .2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 7em;
height: 7em
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out
}
@keyframes loader-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.swal2-actions {
padding: 0 !important;
}
body {
font-family: Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
overscroll-behavior-y: contain
}
* {
box-sizing: border-box
}
#p_loading,
.p_loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 99;
background-color: #dadada
}
.parpadea {
animation-name: parpadeo;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: parpadeo;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite
}
@-moz-keyframes parpadeo {
0% {
opacity: 1.0
}
50% {
opacity: .0
}
100% {
opacity: 1.0
}
}
@-webkit-keyframes parpadeo {
0% {
opacity: 1.0
}
50% {
opacity: .0
}
100% {
opacity: 1.0
}
}
@keyframes parpadeo {
0% {
opacity: 1.0
}
50% {
opacity: .0
}
100% {
opacity: 1.0
}
}
.ladea {
animation-name: ladea;
animation-duration: 2000ms;
animation-delay: 1500ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 50% 50%
}
@keyframes ladea {
0% {
transform: rotateY(0deg);
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75)
}
10% {
transform: rotateY(5deg)
}
20% {
transform: rotateY(-5deg)
}
30% {
transform: rotateY(5deg)
}
40% {
transform: rotateY(-5deg)
}
50% {
transform: rotateY(5deg)
}
60% {
transform: rotateY(0deg)
}
100% {
transform: rotateY(0deg)
}
}
.temblor:hover {
animation: temblor .82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px
}
@keyframes temblor {
10%,
90% {
transform: translate3d(-1px, 0, 0)
}
20%,
80% {
transform: translate3d(2px, 0, 0)
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0)
}
40%,
60% {
transform: translate3d(4px, 0, 0)
}
}
.temblor_inf {
animation: temblor_inf 2s;
animation-iteration-count: infinite
}
@keyframes temblor_inf {
0% {
transform: translate(1px, 1px) rotate(0deg)
}
10% {
transform: translate(-1px, -2px) rotate(-1deg)
}
20% {
transform: translate(-3px, 0px) rotate(1deg)
}
30% {
transform: translate(3px, 2px) rotate(0deg)
}
40% {
transform: translate(1px, -1px) rotate(1deg)
}
50% {
transform: translate(-1px, 2px) rotate(-1deg)
}
60% {
transform: translate(-3px, 1px) rotate(0deg)
}
70% {
transform: translate(3px, 1px) rotate(-1deg)
}
80% {
transform: translate(-1px, -1px) rotate(1deg)
}
90% {
transform: translate(1px, 2px) rotate(0deg)
}
100% {
transform: translate(1px, -2px) rotate(-1deg)
}
}
.p_modal img {
max-width: 100%;
max-height: 20vh
}
.p_modal {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
}
.p_modal h2 {
color: #575757;
font-size: 25px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
margin: 25px 0;
padding: 0;
display: block
}
.p_modal p {
color: #797979;
font-size: 15px;
text-align: center;
font-weight: 300;
position: relative;
text-align: inherit;
float: none;
margin: 0;
padding: 0;
line-height: normal
}
.p_modal_button {
display: inline-block;
box-shadow: rgba(140, 212, 245, 0.8) 0 0 2px, rgba(0, 0, 0, 0.0470588) 0 0 0 1px inset;
background-color: #8cd4f5;
color: white;
border: 0;
box-shadow: none;
font-size: 17px;
font-weight: 500;
border-radius: 5px;
padding: 10px 32px;
margin: 26px 5px 0 5px;
cursor: pointer
}
.checkmark {
display: none
}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg)
}
.checkmark:after {
opacity: 1;
height: 3.5em;
width: 1.75em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: "";
left: 1.75em;
top: 3.5em;
position: absolute
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1
}
20% {
height: 0;
width: 1.75em;
opacity: 1
}
40% {
height: 3.5em;
width: 1.75em;
opacity: 1
}
100% {
height: 3.5em;
width: 1.75em;
opacity: 1
}
}
.circle-loader {
border: 1px solid rgba(0, 0, 0, 0.2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 7em;
height: 7em
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out
}
@keyframes loader-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.confeti {
position: relative;
min-height: 100vh;
overflow: hidden
}
[class|="confetti"] {
position: absolute
}
.red {
background-color: #e94a3f
}
.yellow {
background-color: #faa040
}
.blue {
background-color: #5fc9f5
}
.survey_button,
.survey_button2,
.name,
.profile {
cursor: pointer
}
#comment1,
#comment2,
#comment3,
#comment4,
#comment5,
#comment6,
#content2,
#content3,
#q2s,
#q3s,
#q4s,
#q5s,
#result1,
#result2,
#result3 {
display: none
}
.survey_button,
.survey_button2,
.loading {
text-align: center
}
.survey_button,
.main-content {
padding: 10px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px
}
.name,
.result {
font-weight: 700
}
.main-content p {
font-size: 14px
}
p.question {
font-size: 16px;
}
.main-content .result {
margin: 0;
padding: 5px 0 5px 25px
}
.survey_button2 {
background-color: red;
font-size: 20px;
padding: 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
color: #fff;
box-shadow: 0 1px 4px 0 #000
}
.survey_button {
background-color: #f0a74b;
}
.boxes,
.boxes cbox,
.boxes .try img {
width: 100%
}
.instructions {
padding: 10px;
background-color: #e11e26;
border-radius: 4px;
color: #fff;
margin-top: 20px
}
.boxes {
margin: 10px auto;
max-width: 800px
}
.box-o-t {
position: absolute;
top: -34%
}
.boxes .discover .box-o-b {
z-index: 1;
position: relative
}
.boxes .iphone {
width: 76%;
height: auto;
position: absolute;
z-index: 0;
top: -20%;
left: 12%;
-webkit-transition-duration: .7s;
transition-duration: .7s
}
.boxes .discover>.iphone {
top: -60%
}
.boxes>.try {
position: relative;
display: inline-block;
width: 23.8%;
-webkit-transition-duration: .2s;
transition-duration: .2s;
cursor: pointer
}
@media(max-width:767px) {
.boxes>.try {
width: 32.5%
}
.boxes>.try:nth-child(-n+4) {
display: none
}
}
@media(max-width:479px) {
.boxes>.try {
width: 32%
}
}
@media(max-width:319px) {
.boxes>.try {
width: 48%
}
.boxes>.try:nth-child(-n+5) {
display: none
}
}
.div_img_gift {
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 5;
display: none;
align-items: center;
justify-content: center
}
.img_gift {
display: none;
width: 70%;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
margin: 0 auto
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes tapa_superior {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.boxes {
background-size: cover;
border-radius: 20px;
position: relative;
text-align: center
}
.try {
position: relative;
margin: 20px 0
}
.try>div {
position: absolute
}
.try .caja {
position: relative
}
.caja_trasera {
z-index: 1
}
.caja_tapa {
z-index: 3
}
.caja {
z-index: 2
}
.caja_gift {
z-index: 1
}
.boxes .try.abierta>.caja_tapa {
animation: tapa_superior 2s forwards
}
.boxes .try.premiazo>.caja_gift {
animation: tapa_superior 4s infinite alternate
}
@keyframes tapa_superior {
from {
top: 0
}
to {
top: -40px
}
}
@media(max-width:500px) {
@keyframes tapa_superior {
from {
top: 0
}
to {
top: -30px
}
}
}
.comments_face {
font-family: 'Roboto', sans-serif;
background-color: #fff
}
.comments_face .comments {
background-color: #eeeff4;
border-bottom: 2px solid #fff;
padding: 10px
}
.comments_face .profile {
float: left;
width: 60px;
margin-right: 10px
}
.comments_face .comment-content img,
.comments_face .profile img {
width: 100%
}
.comments_face .comment-content img,
.comments_face .profile img,
.comment-status img {
margin: 0 auto
}
.comments_face .comment-content {
padding-left: 70px
}
.comments_face p {
font-size: 14px
}
.comments_face .name {
margin: 0
}
.comments_face .comment-status span,
.comments_face .name {
color: #3b5998
}
.comments_face .name,
.comments_face .result {
font-weight: 700
}
.comments_face .button,
.comments_face .name,
.comments_face .profile {
cursor: pointer
}
.comments_face .comment-status {
font-size: 11px;
cursor: pointer
}
.comments_face .comment-status span,
.comments_face .name {
color: #3b5998
}
.comments_face .button,
.comments_face .main-content span {
color: red
}
.comments_face .clr {
clear: both
}
.header {
color: white;
padding: 10px
}
.header p {
background: right center no-repeat;
margin: 0 0 0 10px
}
.header img {
max-width: 44vw;
max-height: 50px
}
.content {
padding: 10px 10px
}
.flag {
background: 98% 20px no-repeat #fff
}
.main-content {
padding: 10px;
background-color: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.main-content h2 {
margin: 20px 0;
font-weight: 700
}
.main-content p {
line-height: 18px;
margin: 10px 0
}
.header_flex_item {
font-size: 12px;
color: #fff;
font-weight: 700;
width: 50%
}
.ft {
float: right
}
.title_h1 {
font-family: "Open Sans", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
}
.caja_premio.flex-counter {
border-top: 2px solid #e3e3e3;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin: 15px 0 25px
}
.caja_premio .flex-counter--text {
font-size: 1.3rem !important
}
.caja_premio .flex-counter--text .counter--number {
font-size: 1.6rem !important
}
.caja_premio .flex-counter {
padding: 0 1rem !important
}
#breaking-news-container {
border-radius: 10px 10px 0 0
}
@media(max-width:400px) {
.title_h1 {
font-size: 20px
}
}
body.with_background {
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed
}
body.with_background .content {
max-width: 800px;
margin: 0 auto;
border-radius: 10px;
margin-top: 14%
}
@media(max-width:800px) {
body.with_background {
background-repeat: no-repeat;
background-size: contain
}
body.with_background .content {
margin-top: 19%
}
}
.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3e55a5; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*social btn bg-color*/
.btn-whatsapp{
border: 0;
background-color: #128c7e;
}
.btn-messenger{
border: 0;
background: olive linear-gradient(to right, #4962ff, #ff5c87);
transition: background-color .5s;
}
.btn-telegram{
border: 0;
background-color: #179cde;
}
.btn-line{
border: 0;
background-color: #00c34d;
}
.btn-viber{
border: 0;
background-color: #725ff3;
}
.btn-instagram{
border: 0;
background: olive linear-gradient(to right, #9e35b6, #fcbf5b);
transition: background-color .5s;
}