*{margin: 0;padding:0;}
body{padding:0;margin:0;font-size:16px;font-family:"IBM Plex Sans",sans-serif;background-color:#FFFFFF;font-weight:400;color:#2F3343;}
h1, h2, h3, h4, h5, h6{font-weight: normal;}
a{text-decoration:none !important;transition:.5s;outline: none;}
.contenedor{position:relative;margin:0 auto;}
.btn-offer .rectangle{border-radius: 10px 0 0 10px;}
.btn-offer a{border-radius: 0 10px 10px 0;}
.fullcover{height: 100%;width: 100%;background: transparent !important;opacity: 0;position: fixed;top: 0;left: 0;z-index: -1;overflow: hidden;}
.precio_antes.uk{font-size: 36px;line-height: 54px;font-weight: 700;text-align: center;text-decoration: none;}
.precio_antes{font-size: 16px;line-height: 24px;font-weight: 400;text-align: center;text-decoration: line-through;}
.precio_despues{font-size: 30px;line-height: 45px;font-weight: 700;text-align: center;}
.save{font-size: 18px;line-height: 23px;font-weight: 700;color: #C70000;text-align: center;}
ul.desktop{display: block;}
ul.mobile{display: none;}
.component-container #hero{padding: 16px 0 0 !important;}

#hero{background: #FFFFFF;padding: 16px 0 48px;}
#hero #selector_area{background: #FFFFFF;border-radius: 10px;text-align: center;padding: 17px 0;margin-bottom: 1.5rem;box-shadow: 0 0 15px 0 rgba(0,0,0,.5);}
#hero #selector_area .selector{display: inline-block;margin-right: 65px;}
#hero #selector_area .selector:last-child{margin-right: 0;}
#hero .selectortitle{font-size: 1rem;line-height: 1.5rem;font-weight: 400;text-align: center;margin-bottom: 0.5rem;}
#hero #hero_cards_mobile{display: none;}
#hero p.renew{font-size: 14px;line-height: 21px;font-weight: 700;text-align: center;margin-bottom: 8px;}
#hero #devices_number button, 
#hero #duration_number button,
#hero #devices_number_mobile button, 
#hero #duration_number_mobile button{border: 1px solid #2F3343;display: inline-block;margin: 0;width: 50px;text-align: center;font-size: 1rem;line-height: 1.5rem;background-color: #FFFFFF;color:#2F3343;padding: 10px 0;cursor: pointer;}
#hero #devices_number, #hero #devices_number_mobile{margin: 0 auto;width: 200px;display: flex;}
#hero #duration_number, #hero #duration_number_mobile{margin: 0 auto;width: 150px;display: flex;}
#hero #devices_number button:nth-of-type(1), 
#hero #duration_number button:nth-of-type(1),
#hero #devices_number_mobile button:nth-of-type(1), 
#hero #duration_number_mobile button:nth-of-type(1){border-top-left-radius: 4px;border-bottom-left-radius: 4px;border-right: 0;}
#hero #devices_number button:nth-of-type(2), 
#hero #duration_number button:nth-of-type(2),
#hero #devices_number button:nth-of-type(3),
#hero #devices_number_mobile button:nth-of-type(2), 
#hero #duration_number_mobile button:nth-of-type(2),
#hero #devices_number_mobile button:nth-of-type(3){border-right: 0;}
#hero #devices_number button:nth-of-type(4),
#hero #duration_number button:nth-of-type(3),
#hero #devices_number_mobile button:nth-of-type(4),
#hero #duration_number_mobile button:nth-of-type(3){border-top-right-radius: 4px;border-bottom-right-radius: 4px;border-right: 1px solid;}
#hero #devices_number .selected, 
#hero #duration_number .selected,
#hero #devices_number_mobile .selected, 
#hero #duration_number_mobile .selected{background-color: #2E3344;color:#FFFFFF;}
#hero #hero_cards_desktop{display: grid;grid-template-columns: repeat(4, 255px);grid-column-gap: 30px;margin-bottom: 40px;position: relative;padding-top: 28px;}
#hero p.max_protect{position: absolute;width: 255px;font-size: 16px;line-height: 24px;font-weight: 700;color: #FFFFFF;text-align: center;background-color: #2C85D5;border-radius: 10px 10px 0 0;top: -24px;left: 0;}
#hero .container_cards_desktop{position: relative;}
#hero .container_cards_desktop.heightUS{margin-top:40px;}
#hero .device{width: calc(100% + 32px);padding: 9px 0 8px;margin-left: -16px;text-align: center;font-size: 18px;line-height: 23px;font-weight: 700;color: #FFFFFF;margin-bottom: 8px;margin-top: -8px;}
#hero .device.pde{background: #02874D;}
#hero .device.pda{background: #D90042;}
#hero .device.pdc{background: #662483;}
#hero .device.pdp{background: #0041A3;}
#hero .card_name{font-size: 1.375rem;line-height: 1.812rem;font-weight: 400;text-align: center;margin-bottom: 1.5rem;}
#hero #hero_cards_desktop .hero_card{background: #FFFFFF;border-radius: 10px;box-shadow: 0 0 10px 0 rgba(0,0,0,.5);padding: 16px 16px 18px 16px;}
#hero #hero_cards_desktop .hero_card.hero_card_pdp{border-radius: 0 0 10px 10px;}
#hero #hero_cards_desktop .hero_card.recommended_shadow{box-shadow:0 0 8px 0 rgba(0,0,0,.65);border-radius: 0 0 5px 5px;}
#hero #hero_cards_desktop .box_pde{background: url("../img/essential.webp") no-repeat;width: 198px;height: 45px;background-size: 198px 45px;margin: 0 auto 8px;position: relative;}
#hero #hero_cards_desktop .box_pda{background: url("../img/advanced.webp") no-repeat;width: 211px;height: 44px;background-size: 211px 44px;margin: 0 auto 8px;position: relative;}
#hero #hero_cards_desktop .box_pdc{background: url("../img/complete.webp") no-repeat;width: 208px;height: 44px;background-size: 208px 44px;margin: 0 auto 8px;position: relative;}
#hero #hero_cards_desktop .box_pdp{background: url("../img/premium.webp") no-repeat;width: 200px;height: 45px;background-size: 200px 45px;margin: 0 auto 8px;position: relative;}
#hero #hero_cards_desktop .product_box{margin-bottom: 1rem;}
#hero #hero_cards_desktop .hero_card{position:relative;}
#hero #hero_cards_desktop .hero_card .buttons_area{margin-bottom: 1.5rem;}
#hero #hero_cards_desktop .hero_card .buttons_area .card_button{border-radius:10px;display: block;background: #FF9010;font-size: 1rem;line-height: 1.5rem;font-weight: 700;color: #FFFFFF;text-align: center;padding: 8px 0;margin-bottom: 1rem;}
#hero #hero_cards_desktop .hero_card .buttons_area .suscr_button{border-radius:10px;display: block;background: #FFFFFF;border:2px solid #FF9010;font-size: 1rem;line-height: 1.5rem;font-weight: 700;color: #FF9010;text-align: center;padding: 8px 0;margin-bottom: 4px;}
#hero p.freemonth, #hero p.freemonth .precio_despues{font-size: 14px;line-height: 21px;text-align: center;font-weight: 400}
#hero #hero_cards_desktop .hero_card .buttons_area .open_modal{cursor: pointer;font-size: 15px;line-height: 22px;font-weight: 700;text-align: center;color: #FF9010;transition: .5s;}
#hero #hero_cards_desktop .hero_card .buttons_area .card_button:hover{background: #FFC787;}
#hero #hero_cards_desktop .hero_card .buttons_area .open_modal:hover{color: #2F3343;}
#hero #hero_cards_desktop .hero_card .buttons_area .suscr_button:hover{color: #FFFFFF;background-color: #FF9010;}
#hero #hero_cards_desktop .dev_reg_it{position: absolute;font-size: 14px;font-weight: 700;right: -80px;top: 60px;}
#hero #hero_cards_desktop .features ul{margin-left: 16px;padding: 0;text-align: left;}
#hero #hero_cards_desktop .features li{font-size: 16px;line-height: 24px;font-weight: 400;margin-bottom: 8px;}

@media screen and (max-width: 1199px){
	#hero #hero_cards_desktop{display: none;}
	#hero #hero_cards_mobile .selector{margin-bottom: 16px;}
	#hero #hero_cards_mobile .selector:last-child{margin-bottom: 0;}
	#hero #hero_cards_mobile .selectortitlemob{text-align: center;margin-bottom: 0.5rem;}
	#hero #hero_cards_mobile .hero_card_mobile{background: #FFFFFF;border-radius: 10px;padding: 16px;position:relative;box-shadow: 0 0 10px 0 rgba(0,0,0,.5);}
	#hero #hero_cards_mobile .product_area_mobile{display: grid;grid-template-columns: 100%;grid-row-gap: 16px;margin: 36px 0 8px;justify-items: center;}
	#hero #hero_cards_mobile .product_area_mobile.heightUS{margin:24px 0 8px;}
	#hero #hero_cards_mobile .img_mob_pde{background: url("../img/essential.webp") no-repeat;width: 198px;height: 44px;background-size: 198px 44px;position: relative;margin: 0 auto 16px;}
	#hero #hero_cards_mobile .img_mob_pda{background: url("../img/advanced.webp") no-repeat;width: 211px;height: 44px;background-size: 211px 44px;position: relative;margin: 0 auto 16px;}
	#hero #hero_cards_mobile .img_mob_pdc{background: url("../img/complete.webp") no-repeat;width: 208px;height: 44px;background-size: 208px 44px;position: relative;margin: 0 auto 16px;}
	#hero #hero_cards_mobile .img_mob_pdp{background: url("../img/premium.webp") no-repeat;width: 200px;height: 44px;background-size: 200px 44px;position: relative;margin: 0 auto 16px;}
	#hero #hero_cards_mobile .prices{align-self: center;}
	#hero #hero_cards_mobile a{border-radius:10px;grid-area: btn;position: relative;display: block;font-weight: 700;text-align: center;vertical-align: middle;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;user-select: none;background-color: transparent;border: 2px solid transparent;padding: .475rem 0.75rem .475rem 1.75rem;font-size: 1rem;line-height: 1.4;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color: #FFFFFF;background-color: #FF9010 !important;border-color: #FF9010;margin-bottom: 16px;}
	#hero #hero_cards_mobile a:hover{background: #FFC787;}
	#hero #hero_cards_mobile a.suscr_button{border-radius:10px;display: block;background: #FFFFFF !important;border:2px solid #FF9010;font-size: 1rem;line-height: 1.5rem;font-weight: 700;color: #FF9010;text-align: center;padding: 8px 0;margin-bottom: 4px;}
	#hero #hero_cards_mobile a.suscr_button:hover{color: #FFFFFF;background-color: #FF9010 !important;}
	#hero #hero_cards_mobile .features ul{margin-left: 16px;padding: 0;text-align: left;}
	#hero #hero_cards_mobile .features li{font-size: 16px;line-height: 24px;font-weight: 400;margin-bottom: 8px;}
	#hero #hero_cards_mobile .buttons_area{margin-bottom: 24px;}
	#hero p.renew{font-size: 16px;line-height: 24px;}
}
@media screen and (min-width: 701px) and (max-width: 1199px){
	#hero #hero_cards_mobile{display: grid !important;grid-template-columns: 48% 48%;grid-column-gap: 30px;grid-row-gap: 40px;}
}
@media screen and (max-width: 700px){
	#hero #hero_cards_mobile{display: grid;grid-template-columns: 100% !important;grid-row-gap: 40px;}
	#hero #hero_cards_mobile .selector:last-child{margin-bottom: 32px;}
}

@media screen and (max-width:700px) {
	#hero{padding: 32px 0 48px;}	
	.contenedor{padding:0 15px;}
}
@media screen and (min-width:701px) and (max-width:1023px){
	.contenedor{padding:0 40px;}
}
@media screen and (max-width:1023px) {
	#hero #selector_area, #hero #hero_cards_desktop{display: none;}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	.contenedor{position:relative;max-width:930px;margin:0 auto;}
}
@media screen and (min-width:1200px){
	.contenedor{position:relative;max-width:1110px;margin:0 auto;}
}