.top-header {
    width: 100%;
    height: 50px;
    font-size: 20px;
    color: #3a3d71;
    text-align: center;
    background: #ffffff;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

	.header_flex_item {
    color: #fff !important;
}
.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #b13825;
    background-clip: padding-box;
    border: 3px solid #e9a528;
    border-radius: 0.3rem;
    outline: 0;
}
.header_flex_item {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    width: 50%;

}

.font-style {
    font-size: 26px;
    text-shadow: 2px 2px 0px #ff3e7a, -1px -1px 0px #4eeaf3;
}

.top-header i {
    font-size: 24px;
    width: 45px;
}

.fa-search:before {
    content: "\f002";
}

.modal-premio {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #981f13;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    outline: 0;
}



 body{
    font-family:Tahoma,Geneva,sans-serif;
    margin:0;
    padding:0;
	background-color: #377abe;
    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
}




 @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:65vh
}
.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:#00a650;
    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
}
 

@keyframes loader-spin{
    0%{
        transform:rotate(0deg)
    }
     100%{
        transform:rotate(360deg)
    }
}

 .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,#q2,#q3,#q4,#q5,#result1,#result2,#result3{
    display:none
}
 .survey_button,.survey_button2,.loading{
    text-align:center
}
.survey_button,.main-content{
    padding:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px
}
 .name,.result{
    font-weight:700
}
.main-content p{
    font-size:16px
}
p.question{
    font-size:15px
}
.survey_button{
    border:15px 0;
    color:#fff;
    padding:5px 0;
    margin:5px 0;
	border-radius: 1px;
	font-size: 25px;
    box-shadow:0 1px 4px 0 rgba(0,0,0,.74)
}

 .main-content .result{
    margin:0;
    padding:5px 0 5px 25px
}

 .survey_button {
     background-color: #007b4c;
}
 .boxes,.boxes cbox,.boxes .try img{
    width:100%
}

.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 .caixa{
    position:relative
}


 .animate>span:after{
     display:none 
}
 .card-box {
     margin-top: -125px;
     width: 2px;
     height: 220px;
     position: relative;
}
 .card1{
     width:200px;
     position: absolute;
     left:-300px;
     transform: rotate(-10deg);
     opacity: 0.9;
     z-index: 1;
     top:100px;
}
 .card1-Animation{
     animation: Card1-Animation 5s linear infinite;
}
 @keyframes Card1-Animation{
     0% {
         width:200px;
         position: absolute;
         left:-300px;
         transform: rotate(-10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     13% {
         width:200px;
         position: absolute;
         left:-300px;
         transform: rotate(-10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     30% {
         width: 200px;
         position: absolute;
         left:100px;
         transform: rotate(10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     43% {
         width: 200px;
         position: absolute;
         left:100px;
         transform: rotate(10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     60% {
         transform: rotate(0deg);
         width: 272px;
         position: absolute;
         left: -136px;
         top:25px;
         z-index: 2;
         top:0px;
         opacity: 1;
    }
     73% {
         transform: rotate(0deg);
         width: 272px;
         position: absolute;
         left: -136px;
         top:25px;
         z-index: 2;
         top:0px;
         opacity: 1;
    }
}
 .card2{
     transform: rotate(0deg);
     width: 272px;
     position: absolute;
     left: -136px;
     top:25px;
     z-index: 2;
     top:0px;
     opacity: 1;
}
 .card2-Animation{
     animation: Card2-Animation 5s linear infinite;
}
 @keyframes Card2-Animation{
     0% {
         transform: rotate(0deg);
         width: 272px;
         position: absolute;
         left: -136px;
         top:25px;
         z-index: 2;
         top:0px;
         opacity: 1;
    }
     13% {
         transform: rotate(0deg);
         width: 272px;
         position: absolute;
         left: -136px;
         top:25px;
         z-index: 2;
         top:0px;
         opacity: 1;
    }
     30% {
         width:200px;
         position: absolute;
         left:-300px;
         transform: rotate(-10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     43% {
         width:200px;
         position: absolute;
         left:-300px;
         transform: rotate(-10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     60% {
         width: 200px;
         position: absolute;
         left:100px;
         transform: rotate(10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     73% {
         width: 200px;
         position: absolute;
         left:100px;
         transform: rotate(10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
}
 .card3{
     width: 200px;
     position: absolute;
     left:100px;
     transform: rotate(10deg);
     opacity: 0.9;
     z-index: 1;
     top:100px;
}
 .card3-Animation{
     animation: Card3-Animation 5s linear infinite;
}
 @keyframes Card3-Animation{
     0% {
         width: 200px;
         position: absolute;
         left:100px;
         transform: rotate(10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     13% {
         width: 200px;
         position: absolute;
         left:100px;
         transform: rotate(10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     30% {
         transform: rotate(0deg);
         width: 272px;
         position: absolute;
         left: -136px;
         top:25px;
         z-index: 2;
         top:0px;
         opacity: 1;
    }
     43% {
         transform: rotate(0deg);
         width: 272px;
         position: absolute;
         left: -136px;
         top:25px;
         z-index: 2;
         top:0px;
         opacity: 1;
    }
     60% {
         width:200px;
         position: absolute;
         left:-300px;
         transform: rotate(-10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
     73% {
         width:200px;
         position: absolute;
         left:-300px;
         transform: rotate(-10deg);
         opacity: 0.9;
         z-index: 1;
         top:100px;
    }
}
 @media only screen and (max-width:680px) {
     .card-box{
         transform:scale(0.6);
    }