﻿/*--------------------------------------------------
CATA RA
--------------------------------------------------*/
.cta-ra .cta { margin: 1.875em 0; position: relative; padding-right: 59px; }
.cta-ra .cta:after { content: url(/img/ra/ico-ra-cta.png); position: absolute; top: 50%; transform: translateY(-50%); right: 18px; }

@media (max-width:767px) {
    .cta-ra .cta { display: block; text-align: left; padding: 18px; }
}
/*--------------------------------------------------
Panel realtà Aumentata
--------------------------------------------------*/

.noMobile .panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code { display: flex; }
.noMobile .panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code-mobile { display: none; }
.mobile .panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code { display: none; }
.mobile .panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code-mobile { display: block; }

.panel-ra { position: fixed; z-index: 9999; top: 0; left: 50%; transform: translateX(-50%); background: rgba(35, 35, 35, 0.8); width: 100%; height: 100vh; max-width: 1800px; color: #28292b; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out; }
.panel-ra a, .panel-ra a:hover { color: #28292b; text-decoration: none; }
.panel-ra .side-panel { position: absolute; top: 0; right: -590px; width: 590px; height: 100vh; background: #fff; padding-top: 40px; overflow-y: auto; transition: all 0.3s ease-in-out; }
.panel-ra .side-panel::-webkit-scrollbar { width: 5px; height: 4px; background-color: #f3f3f3; border-radius: 2px; }
.panel-ra .side-panel::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 4px; }
.panel-ra .side-panel .close-panel { text-align: center; }
.panel-ra .side-panel .close-panel a { font-size: 18px; line-height: 1; font-family: 'Circular Std Bold', 'Arimo', sans-serif; }
.panel-ra .side-panel .close-panel a:before { content: url(/IMG/ra/close.png); margin-right: 10px; }
.panel-ra .side-panel .tit-ra { margin: 100px 0 60px 0; padding-top: 70px; text-align: center; font-size: 36px; line-height: 1; background: url(/img/ra/ico-ra.png) no-repeat top center; color: #28292b; }
.panel-ra .side-panel .accordion-ra { padding-bottom: 40px; }
.panel-ra .side-panel .accordion-ra .accordion { padding: 0 30px; border-top: 2px solid #eae9e8; }
.panel-ra .side-panel .accordion-ra .accordion .tit-accordion { font-family: 'Circular Std Bold', 'Arimo', sans-serif; font-size: 18px; text-transform: uppercase; display: block; width: 100%; position: relative; padding: 30px 0; }
.panel-ra .side-panel .accordion-ra .accordion .tit-accordion:after { content: url(/IMG/ra/arrow.png); position: absolute; right: 0; top: calc(50% + 2px); transform: translateY(-50%) rotate(180deg); transition: all 0.3s ease-in-out; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion { margin: 0; padding: 0 60px; overflow: hidden; opacity: 0; height: 0; transition: all 0.3s ease-in-out; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; /*justify-content: space-between; */ }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code > div { }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code img { }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code .os { text-align: center; margin-top: 40px; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code .os span { margin: 40px auto 0; font-size: 24px; text-align: center; position: relative; padding-left: 30px; color: #28292b; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code .os span:before { content: url(/IMG/ra/ico-smartphone.png); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code-mobile { margin: 0 -60px; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code-mobile .cta { display: block; color: #fff; text-align: left; font-size: 24px; line-height: 1 !important; margin: 0 0 20px 0; border-radius: 15px; /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);*/ min-width: 1px; padding: 22px 20px; white-space: normal; text-transform: none; position: relative; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code-mobile .cta:hover, .qr-code-mobile .cta:focus { background-color: #272c31; color: #fff; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .qr-code-mobile .cta:after { content: url(/IMG/ra/ico-smartphone-white.png); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }



.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .disclaimer { margin: 75px -60px 0 -60px; font-size: 18px; color: #97918d; text-align: center; }
.panel-ra .side-panel .accordion-ra .accordion .cont-accordion .disclaimer a { color: #97918d; text-decoration: underline; }
/*PANEL ACTIVE*/
.panel-ra.active { opacity: 1; pointer-events: all; }
.panel-ra.active .side-panel { right: 0; }
/*ACCORDION ACTIVE*/
.panel-ra .side-panel .accordion-ra .accordion.active .tit-accordion:after { top: calc(50% - 2px); transform: translateY(-50%) rotate(0deg); }
.panel-ra .side-panel .accordion-ra .accordion.active .cont-accordion { margin: 30px 0; opacity: 1; height: auto; }

.socialButton { display: flex; }

@media (max-width:767px) {
    .intro .cta-ra .cta { margin: 0 0 3em 0; }
    .cta-ra .cta:hover, .cta-ra .cta:focus { background-color: #272c31; color: #fff; }
    .panel-ra .side-panel { width: 100%; }
    .panel-ra .side-panel .tit-ra { margin-top: 60px; font-size: 24px; }
    .panel-ra .side-panel .accordion-ra .accordion .tit-accordion { font-size: 16px; }
    .panel-ra .side-panel .accordion-ra .accordion.active .cont-accordion { margin-top: 0; }
    .panel-ra .side-panel .accordion-ra .accordion .cont-accordion .disclaimer { margin-top: 40px; }
}
