/*---------------- reset  ------------------*/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;700;900&family=Oswald:wght@200;300;500;700&display=swap');


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, fieldset, legend, caption, .filters ul li p, figure { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; line-height: normal; line-height: 1.6em; -webkit-font-smoothing: antialiased; }

html{overflow-x:hidden; height:100%;  scroll-behavior: smooth;}
ol,ul,li{list-style:none;font-weight:lighter}
.sticky + .content{padding-top: 150px;}
body{font-family:'Nunito Sans', sans-serif; color: #fff; background:#030303;}
#inicio{background:#0e0e0e; }
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
em{font-style:normal}
a{text-decoration:none;cursor:pointer; color:#e7e4e4; font-weight:400}
#trendMenu{color:#fff!important}
.clear{clear: both}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
button{text-decoration:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
.blur{opacity:0}
strong{font-weight:600;}
.padleft40{padding-left:40px;}
.padright40{padding-right:40px;}
.tleft{text-align:left;}
.pSides20{padding: 0 20px 40px; display: block;  background: #202020;}

.wrapCenter {width: 1024px;  margin:0 auto; display:block;}

#home{padding:5px 0px 95px; text-align:center;}
#home h1{font-family:'Oswald', sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:-2px; text-transform: uppercase; font-size:3.2em; font-weight:500;}
#home p{color: #fff;font-size: 1.1em; font-weight:300; font-family:'Oswald', sans-serif;;}
#home b{font-weight: 600; color: #fff; background: #c8a57dba; padding: 0 15px;}
#home a, .suscribirse, #box a{margin:30px auto 0; display: block; background:#b33030 ; width:420px; border-radius:72px; padding:10px 0; font-weight:800; font-size:1.3em; text-align:center;}
#home a:hover, .suscribirse:hover, #box a:hover{background:#cd3434;}
#home a span, .suscribirse span, #box a span{display:block; width: 100%; font-size: .7em; font-weight: 500;}

header{padding:20px 0}
header .logo{width:220px; float:left;}
header nav{float: right; margin:20px 0 0 0; }
header nav li{float:left; font-size:.85em;}
header nav li:nth-child(2){border-left:1px solid #a83c45;}
nav li a{padding:4px 14px; font-weight:600; font-size:1.1em; }
header nav li a:hover{color: #fac8a7;}
.contacto{ padding:10px 17px; border:1px solid #fff; border-radius:2px; margin:0 0 0 6px ; font-size:1.1em; font-weight:800;}
.contacto:hover{color:#fff; background: #cd3434;}
#contacto{display: block; width: 60%; margin: 0 auto 0px auto; color: #fff;  text-align: left; padding:10px 40px; border-radius: 10px;}
#contacto label{text-transform: uppercase; margin: 30px 0 10px 0; font-size: .8em; display: block; padding-left:15px;}
#contacto .in{float: left; width: 100%; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; height: 39px; border: 10px solid #fff; padding: 20px 10px; font-size: .8em;}
#contacto .te{float: left; width: 100%; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 10px solid #fff; padding: 20px 10px; text-transform: uppercase; font-size: .8em; height: 140px;}
#contacto h1{font-size:1.6em}

footer{float:left; text-align: center; width:100%; padding:60px}
footer img{width:100px;}

.oneHundred{width:100%; float:left;}
.fifty{width:38%; float:left; margin-right:2%;}

#acerca{float:left;width:100%;padding:0;height:500px; background:#191919;}
.image{background:url(../images/personalidad.png) no-repeat center top;float:left;width:48%;height:500px;} 
#infoAcerca {width:49%; float: left; padding:50px 40px 0;}
#acerca h1, #acercados h1 { color:#fff; font-weight: bold; letter-spacing: -.5px; font-family:'Oswald', sans-serif; font-size:1.9em; }
#infoAcerca em { width: 65px; height: 3px; display: block; background: #a77d6e; margin: 20px 0;}
#infoAcerca .line {padding-bottom: 20px; border-bottom:1px solid #a77d6e; margin-bottom: 20px; font-size: 1.2em; font-family:'Oswald', sans-serif; color: #fff;; margin-bottom:32px; text-transform: uppercase; font-weight:300;}
.pvid {float: left; width:65%; padding: 0 20px 0 0; font-size: 1em; }
#infoAcerca span img {padding: 2px; border: 1px solid #a77d6e; width:172px;}

.left{width:23%; float:left;}
.right{width:20.5%; margin:0px 2.15%; float: left;}
.right img{width:100%; box-shadow: -7px 8px 19px #000000;}
#perfil .left p{font-size: .9em; font-weight: 400; margin-top: 12px; float: left; width: 100%;}
#perfil .right p{font-size: .9em;  font-weight: 400;}
.left li, .right li{float:left; margin:8px;}
.left li img, .right li img{height:17px;}

#perfil{background: #20201f; float: left; width: 100%; padding: 80px 0 0px 0;}
#perfil h2{float: left; width: 100%; font-family: 'Oswald', sans-serif; font-size: 2.2em; color: #fff;;}
#perfil p{font-size: 1em; font-weight: 400;}
.perfilDescripcion{text-align: center; padding:0px 0 60px 0; font-family:'Oswald', sans-serif;}
.perfilDescripcion h3{font-size:2em; padding:0px 0 20px; font-family:'Nunito Sans', sans-serif;}

#mainTit h1{text-align: center; padding:0px 0 0; color:#fff; text-shadow: 1px 1px 0px #000; font-size:36px; font-weight:400;}
#mainTit h2{text-align: center; padding: 0 0 40px; font-size: .9em; text-transform: uppercase; letter-spacing: 15px; font-weight: 400; color:#fff }
#login{width: 880px; margin:0px auto; }
#payment{width:480px; margin:0px auto; }
#payment h1{text-align: center; font-size:1.2em;}
.logLeft{float: left; width:50%;} 
.logLeft img{width:100%;}
.logRight{float: left; width:50%; background:#fff; padding:20px; color: #555454;} 
.copy{padding:0 20px;}
.tc{float: left; width:100%; border-radius:4px; background:#fff; padding:20px; box-shadow: inset 5px 0px 17px rgba(0, 0, 0, 0.5); color: #555454;}
.tc a{width: 382px; display: block; margin: 0 auto;}
.tc a .image{width:100%;}
.copy{padding:0 20px; }
.log{width:70px; margin:10px auto; display: block;}
.logRight h1{font-size: 1.5em; letter-spacing: -.5px;}
#login .inp, #payment .inp{float: left; width: 100%; border: 1px solid #d3d5d9; padding: 10px; border-radius: 6px; font-size:.85em;}
#login .inp:focus, #payment .inp:focus{box-shadow: 1px 3px 10px #e7eef5; border: 1px solid #8ec3f3;}
#enviarPago:hover{ background: #407edc; box-shadow: 1px 3px 10px #e7eef5; border: 1px solid #8ec3f3;}
#login select, #payment select{float: left; width: 100%;  border: 1px solid #d3d5d9; height: 34px; border-radius: 5px; padding: 6px 8px; font-size: .8em; color: #555;}
#login fieldset, #payment fieldset{float: left; width: 100%; padding:4px 0 ;}
#login label, #payment label{float:left; width:100%; padding: 0 0 4px 3px; font-weight:600; font-size: .85em;}
.enviarLog{float: left; width: 100%; padding:10px 0; color: #fff; border: none; border-radius: 4px; font-size:.9em; font-weight: 600; cursor: pointer; background: #c03d3d; height:46px;}
.enviarLogTC{float: left; width: 100%; padding:10px 0; color: #fff; border: none; border-radius: 4px; font-size:.9em; font-weight: 600; cursor: pointer; background: #121212; height:46px;}
#enviarPago{font-size: 1.1em; font-weight: 400; cursor: pointer; background: #2d75df; border: 1px solid #0055d4; float: left; width: 100%; padding: 12px 0; color: #fff; border-radius:5px; text-shadow: 0px 0px 4px #333; }
.enviarLog:hover{background-color:#e25959 ;}
.logoLogin{width:140px; display: block; margin:10px auto 0;}
.logoLogin img{width:100%}
#vimeoBienvenida{display: block; width: 1024px; margin:20px auto 40px auto;}
#box{display: block; width:1024px; margin:40px auto;}
#box li{float: left; width: 33%; height: 105px; padding: 4px 10px; text-align: center; }
#box li strong{font-size: .9em; color: #030303;}
#box li p{font-size: .85em; font-weight: 400; float: left; width: 100%;}
#box h2{text-align: center; float: left; width: 100%; margin-top: 100px; font-family: 'Oswald', sans-serif; font-size: 3em;}
#box h3{text-align: center; float: left;  width: 100%; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 200; font-size: 1.6em;  margin-bottom:10px; letter-spacing: 4px; color:#fff;;}
#box p{float:left; width:100%; margin-bottom:33px; text-align: center; font-family: 'Oswald', sans-serif; color:#fff;font-weight:300;}
#box li p{color:#030303; font-weight:300;}
.lineHead{background:#fff;display:block; margin:0 auto; height:3px; margin:6px auto 10px; width:100px;}
#box ul{float: left; width: 100%; background:#eff0ef; padding: 20px; border-radius: 4px;}
#box h4{float: left; width: 100%; margin-bottom:0px; text-align: center; font-family: 'Oswald', sans-serif; color: #fff;font-weight: 300; font-size:1.4em;} 
#infoBilling{display: block; margin: 20px 0; background: #96795d;  width: 90%; padding: 7px 20px; border-radius: 6px; font-size: .9em;}
.lineB{background:#b33030; height:3px; width:50px; margin:10px 0;}
#resultado{float: left; color: #c30; text-transform: none!important; padding: 8px 0 0 4px; width: 100%; font-weight: 600; font-size:.9em;}
.ui-menu-item{font-size:.8em;}
.debil{background: url(../images/debil.png) center no-repeat; float:right; width:82px; height: 37px; margin: 4px 4px 0 0;}
.fuerte{background: url(../images/fuerte.png) center no-repeat; float:right; width:82px; height: 37px; margin: 4px 4px 0 0; }
.media{background: url(../images/media.png) center no-repeat; float:right; width:82px; height: 37px; margin: 4px 4px 0 0;}
#yatienes span{color:#888; }
.alert{padding: 15px 0 0; color: #c30; float: left; width: 100%; font-weight: 600; font-size: .85em;}

#precios{display:block; width: 480px; margin: 0 auto;}
#precios h4{font-size: 2.4em; font-weight: 400; margin-top: 20px;}
#precios em{font-size: 1.4em; padding: 0 16px; float:left; width:50%;}
#precios span{float:left; width:100%; font-size:.7em; font-weight:400; color: #fff;}
.le{text-align:left; border-left: 1px solid #fff;}
.ri{text-align:right;}
#distintivo{text-align: left; font-size:1em; margin:30px 0 0px; font-weight:600;}
#contrasenia{float:left; width:100%; text-align:right; font-size:.9em; color:#000; padding:3px;}
#contrasenia:hover{color:#c30;}

.mediaImagenes, .mediaImagenesMobile{float:left; width:100%}
.mediaImagenes a{margin:0px 0px 20px !important; padding:0 !important; width:100%!important; display:inherit; background:none!important}
.mediaImagenesMobile a{margin:0px 0px 0px !important; padding:0 !important; width:100%!important; display:inherit; background:none!important}
.mediaImagenes img, .mediaImagenesMobile img{width:100%}
.mediaImagenesMobile{display: none}


.exp{ width:30%!important; margin-right:10px;}
.anio{width:30%!important; margin-right:40px;}
.cvv{width:25%!important;}

.clock-canvas{float:left;}

#aviso{width: 100%; padding: 40px 10%; display: block; margin: 0 auto;}
#aviso h4{width: 100%; float:left; margin-bottom:10px;}
#aviso p{float:left; width:100%; margin-bottom:20px; font-size:.9em;}
#regh1{font-size:1.4em;}
.loading {cursor: progress; background-color: #ccc; }

#special{background: #c30; padding: 2px 10px; font-weight: 600; margin: 10px auto; display: block; width: 293px; border-radius: 4px;}


@media only screen and (max-width: 1280px) {
    #vimeoBienvenida{display: block; width: 700px; }
    .wrapCenter {width:960px;}
    #perfil h2{ font-size:1.8em;}
    #acerca h1, #acercados h1{font-size:1.7em;}
    
    #infoAcerca em{margin:10px 0;}
    #infoAcerca .line{padding-bottom:10px;}
    #infoAcerca{padding: 50px 40px 0;}
    .pvid{width:59%;}
    .image{width:48%;}
}

@media only screen and (max-width: 1024px) {
    #box{width:788px;}
    .wrapCenter {width:640px;}
    #infoAcerca{width:100%;}
    #perfil h2{ font-size:1.5em;}
    #perfil .left p{line-height: 20px;}
    #home h1{font-size:3.9em; margin-top:10px; line-height:82px;}
    .right{width:42.5%; margin: 0px 7.15%;}
    .left{width:43%;}
    .padright40 {padding-right: 40px; margin-top: 40px; float: left; width: 100%;}
    #perfil{padding:20px 0;}
    #perfil p{margin-bottom:40px;}
    header span{display: block; margin: 20px auto; float: none; width: 220px;}
    #home{padding: 45px 0px 45px;}
    header nav{padding:0 80px;}
    .image{display: none;}
    .logRight h1{font-size:1em;}
    #mainTit h1{font-size:30px;}
    #login{width:740px;}
    .logLeft img{display: none;}
}

@media only screen and (max-width:768px) {
	header .logo {margin-bottom: 12px;}
    .logLeft, .logRight{width:100%;}
    .logRight h1 {display: none;}
    #box{width:400px; padding:0 10px}
    #box ul{border-radius:0; margin-top:10px;}
    #box li{width:100%; height: inherit!important; padding:4px 0;}
    #box p{margin-bottom:5px;}
    #infoBilling{width: 100%; padding:10px 20px}
    
    #vimeoBienvenida{display: block; width:100%; }
    #home a, .suscribirse, #box a{width:320px;}
    .wrapCenter {width: 100%; padding: 0 20px;}
    #home h1{font-size:3em; margin-top:10px; line-height:82px;}
    header nav{padding:0 20px;}
    header nav li:nth-child(2){border-left:none;}
    .contacto{padding:10px; font-size:1em;}
    #home b {font-weight: 600; padding:8px 15px; display: block; margin: 0 20px; font-size: .85em; border-radius: 21px; }
    #acerca{height:inherit;}
    .image{width:100%; height: inherit;}
    #infoAcerca{padding:0px 20px 0; text-align:center; width:100%;}
    #acerca h1, #acercados h1{font-size:1.2em;}
    #infoAcerca em {margin: 10px auto;}
    .pvid {width:100%; padding: 0 0 0 0;  }
    #infoAcerca span img{width:60%;}
    .frame{float:left; width:100%; margin-top:20px;}
    #perfil h2{ font-size:1.2em;}
    .left .tleft{text-align:left!important;}
    nav li a {padding:11px 7px; float:left; width:100%; font-weight:800; font-size:1em;}
    header nav {padding: 0 0px;}
    #home a, .suscribirse, #box a{border-radius: 10px; }
    #mainTit h2{font-size: .9em; letter-spacing: 8px; }
    footer {padding: 20px 10px; }
    #home h1 {font-size: 2.4em; margin-top: 26px; line-height: 50px; margin-bottom:10px;}
    #mainTit h1 {line-height: 40px; margin-bottom: 7px; }
    #mainTit h2 {letter-spacing: 4px; }
    #box h2{font-size:2em;}
    .logRight{box-shadow: inherit; padding:20px}
    .log{display: none;}
    #login .inp, #login select, .enviarLog{height:50px;}
    #login{width:100%; padding:0px 40px}
    .fifty{width:100%; float:left; margin-right:0;}
    #contacto .in{padding:16px 10px;}
    #contacto label{margin:12px 0 6px;}
    nav{display: block; width: 375px; margin: 0 auto!important; float: none!important;}
    #home {padding: 0px 0px 45px; }
    #contacto{width:100%;}
    #contacto h1 { font-size: 1.4em;  }
    #precios{width:380px;}
    .mediaImagenes{display: none;}
    .mediaImagenesMobile{display:block; float: inherit; width:80%; margin:0 auto }
}

@media only screen and (max-width:480px) {
    #infoAcerca .line{font-size:.8em; text-transform:uppercase;}
    #login{padding: 0px;}
    .logLeft{padding:0 20px;}
    #precios{width:280px;}
    
}
@media only screen and (max-width:320px) {
    
    #box{width:280px;}
    body{line-height:1.4em;}
    header span {width:120px;}
    .wrapCenter {padding: 0 20px;}
    header nav{padding:0 10px; text-align: center;}
    header nav li {float: left; font-size: .9em; width: 100%;}
    #home a, .suscribirse, #box a{width:260px;}
    #home b{font-size:.9em; background: inherit; color:#e3e2e2; padding:0}
    #home p{color: #fff;font-size: 1em; font-weight: 300; font-family: 'Oswald', sans-serif; display: block; width: 100%; padding: 0px; margin-top:10px;}
    #home h1{font-size:1.9em; line-height:44px; display: block; width:100%; margin-top:20px;}
    #home a, .suscribirse, #box a{margin:10px auto 0;width:100%; border-radius: 10px; padding: 10px 4px; font-size: 1.1em;}
    #home a span{line-height:20px;}
    .contacto{margin:10px 0 0 0px; padding:10px 4px;}
    #home {padding: 20px 0px 30px; }
    .perfilDescripcion h3 {font-size: 1.2em; padding: 0px 0 10px; font-family: 'Nunito Sans', sans-serif; }
    #perfil{padding:0px;}
    #perfil p {margin-bottom: 20px; font-size:.9em;}
    .padleft40{padding: 0 20px; }
    .padright40{padding: 0 20px; margin-top:20px; }
    .left, .right{width: 100%; margin:0 auto;}
    #perfil .left p {line-height: 18px; text-align: center!important;}
    #perfil ul {display: block; width: 110px; margin: 0 auto;}
    #perfil h2{text-align:center!important;}
    header .logo {width: 120px; float: inherit; display: block; margin:0 auto; }
    
    
}