@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


@charset "UTF-8";*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/sandbox/materialsymbolsoutlined/v7/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format("woff2")}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2")}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga","dlig"}h1,h2,h3,h4,h5{font-weight:400}#header{height:50px;width:100%;max-width:100vw;background-color:#fff;box-shadow:0 0 6px rgba(0,0,0,.5);position:fixed;top:0;left:0;z-index:1000;border-bottom:1px solid #000;transition:all .5s ease 0s}@media print{#header{position:relative}}#header .dre{float:right;margin:0 15px 0 0;line-height:50px}#header .dre a{display:inline-block;text-decoration:none;margin-right:15px;vertical-align:middle}#header .dre a:hover{text-decoration:none}#header .dre a:last-child{margin-right:0}#header .dre span{color:#555;font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:14px;line-height:17px;letter-spacing:0;font-size:13px;line-height:13px;margin:0 15px 0 0;display:inline-block;vertical-align:middle}#header .dre .wp{display:none}@media only screen and (max-width:500px){#header .dre .wp{display:inline-block}}#header .dre .icon-c-tw{content:"";display:block;width:16px;height:16px;background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/twitter.svg);background-size:16px 16px}#header .dre .icon-c-fb{content:"";display:block;width:16px;height:16px;background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/facebook.svg);background-size:16px 16px}#header .dre .icon-c-wp{content:"";display:block;width:16px;height:16px;background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/whatsapp.svg);background-size:16px 16px}#header .esq{float:left;margin:0 0 0 15px;height:50px}#header .esq a{display:inline-block;vertical-align:middle;text-decoration:none}#header .icon-ara:before{content:"";display:block;margin-top:18px;width:40px;height:13px;background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/logoARA.svg);background-size:100% auto;background-repeat:no-repeat}#header .center{left:0;top:0;right:0;position:absolute;text-align:center;z-index:-1}@media only screen and (max-width:900px){#header .center{display:none}}#header .titol{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:13px;line-height:50px;color:#000;text-transform:uppercase}#header .titol a{color:#000;text-decoration:none}#header .titol a:hover{text-decoration:underline}.compartir{clear:both}.compartir a,.compartir span{vertical-align:middle}.compartir span{margin-right:20px}@media only screen and (max-width:500px){.compartir span{margin-right:10px}}.compartir p.e2{display:flex;justify-content:center}.compartir a{width:20px;height:20px;display:inline-block;border:1px solid #000;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin:0 15px 0 0;text-decoration:none;-webkit-transition:opacity .3s linear 0s;-moz-transition:opacity .3s linear 0s;-o-transition:opacity .3s linear 0s;transition:opacity .3s linear 0s}.compartir a:hover{opacity:.6}.compartir a i{display:none}.compartir a:last-child{margin-right:0}.compartir a.fb{background-image:url(../../common/img/logoFB.svg);background-size:100% 100%}.compartir a.tw{background-image:url(../../common/img/logoTW.svg);background-size:20px auto;background-repeat:no-repeat;background-position:center center;border:none;width:26px}.compartir a.wp{display:none;background-image:url(../../common/img/logoWP.svg);background-size:100% 100%;border:none;border-radius:0}@media only screen and (max-width:500px){.compartir a.wp{display:inline-block}}.compartir a.wp:hover{border:none}.credits{display:flex;flex-flow:row wrap;border-top:1px solid #ccc;justify-content:center;background-color:#fff}@media only screen and (max-width:800px){.credits{flex-flow:column wrap;align-items:center;padding:4px 60px}}.credits .firma{display:flex;flex-flow:row nowrap;align-items:baseline;padding-top:8px;padding-bottom:8px}.credits .firma .g-e11{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:12px;line-height:12px;margin-right:20px;margin-bottom:0}@media only screen and (max-width:800px){.credits .firma .g-e11{flex-basis:50%;text-align:right}}.credits .firma .g-e11 a{color:#000;text-decoration:none;white-space:nowrap}.credits .firma .g-e11 a:hover{text-decoration:underline}.credits .firma .g-e12{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:13px;line-height:13px;margin-right:5px;margin-bottom:0}@media only screen and (max-width:800px){.credits .firma .g-e12{flex-basis:50%;margin-bottom:4px}}@media only screen and (max-width:800px){.credits .firma{width:100%;padding-top:5px;padding-bottom:5px;align-items:flex-end;flex-flow:column nowrap;align-items:center}.credits .firma p{margin-right:0!important;margin-left:0!important;text-align:center!important}}.footer{position:relative;background:#000;height:130px;display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;padding:0 20px}.footer .icon-ara:before{content:"";display:block;width:70px;height:22px;background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/logoARA_white.svg);background-size:100% auto;background-repeat:no-repeat}.footer .link-interactius{text-decoration:none;color:#fff;border:1px solid #fff;padding:5px 10px;border-radius:2px;font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:13px;line-height:13px;font-weight:400}.footer .link-interactius:hover{color:#000;background-color:#fff}@media only screen and (max-width:800px){.footer{flex-flow:column nowrap;padding:30px 20px}.footer .link-interactius{margin-top:20px}}.p-relacionades{padding:0 20px}.p-relacionades .p-relacionades-title{text-align:center;margin-bottom:23px;font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:16px;line-height:24px}.p-relacionades .p-relacionades-noticia{display:flex;flex-flow:row nowrap;height:120px;width:100%;max-width:500px;padding:10px;border:1px solid #000;box-shadow:0 2px 4px 0 rgba(187,187,187,.5);border-radius:2px;text-decoration:none;color:#000;align-items:center;margin:25px auto}.p-relacionades .p-relacionades-noticia:hover{background-color:#e5e5e5}.p-relacionades .p-relacionades-noticia:first-child{margin-top:0}@media only screen and (max-width:490px){.p-relacionades .p-relacionades-noticia{max-width:450px}}@media only screen and (max-width:440px){.p-relacionades .p-relacionades-noticia{height:300px;max-width:400px;flex-flow:column nowrap}}@media only screen and (max-width:320px){.p-relacionades .p-relacionades-noticia{height:200px;max-width:100%}}.p-relacionades img{max-width:100%;width:150px;height:100%;object-fit:cover}@media only screen and (max-width:490px){.p-relacionades img{width:115px}}@media only screen and (max-width:440px){.p-relacionades img{width:100%;height:175px;margin-bottom:10px}}@media only screen and (max-width:320px){.p-relacionades img{height:115px}}.p-relacionades .p-relacionades-info{height:100%;width:100%;display:flex;margin-left:15px;flex-direction:column;justify-content:space-between}@media only screen and (max-width:440px){.p-relacionades .p-relacionades-info{text-align:center;margin-left:0}}.p-relacionades .p-relacionades-info .p-relacionades-reltitle{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:16px;line-height:20px;overflow:hidden;max-height:60px}@media only screen and (max-width:320px){.p-relacionades .p-relacionades-info .p-relacionades-reltitle{white-space:nowrap;text-overflow:ellipsis;display:block}}.p-relacionades .p-relacionades-info .p-relacionades-rellink{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:14px;line-height:16px}.p-relacionades .p-relacionades-info .p-relacionades-rellink .icon-right{position:relative;top:2px;margin-left:5px}@media only screen and (max-width:440px){.p-relacionades .p-relacionades-info .p-relacionades-rellink{margin-top:16px}}.logo.logoara{display:block;width:89px;height:28px;background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/logoARA.svg);background-size:100%;background-position:center;background-repeat:no-repeat;margin-right:auto;margin-left:auto;z-index:1}.logo.logoara.white{background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/logoARA_white.svg)}.logo.logoara.logosmall{width:60px;height:19px}.logo.balears{background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/logoARABalears.svg);width:220px;height:38px}.logo.balears.white{background-image:url(https://s1static.ara.cat/interactius/assets/common_new/icons/logoARABalears_fullwhite.svg)}.logo.balears.logosmall{width:150px;height:28px}#menu-idiomes{margin-left:auto;margin-right:auto;margin-top:30px;margin-bottom:60px;text-align:center}@media only screen and (min-width:500px){#menu-idiomes{margin-top:50px;margin-bottom:90px}}#menu-idiomes a{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:14px;line-height:14px;text-transform:uppercase;text-decoration:none;color:#888;border-right:1px solid #d8e0e8;padding-right:7px;margin-right:3px}#menu-idiomes a.active,#menu-idiomes a:hover{color:#000}#menu-idiomes a:last-child{border-right:none;padding-right:0;margin-right:0}.mainbuttonara{border:none;background-color:#0076a8;color:#fff;border-radius:1px;display:flex;align-items:center;padding:16px 40px;margin:0 auto;transition:all .3s linear;position:relative;text-transform:uppercase;cursor:pointer;font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:14px;line-height:14px;justify-content:center;text-decoration:none}.mainbuttonara.mainbutton-icon{padding:16px 40px 16px 8px}.mainbuttonara:before{content:"";position:absolute;z-index:0;top:0;left:0;right:0;bottom:0;background:#00648e;transform:scaleX(0);transform-origin:0 50%;transition-property:transform;transition-duration:.3s;transition-timing-function:ease-out}.mainbuttonara:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}.mainbuttonara:hover{color:#fff!important}.mainbuttonara span{z-index:1}.mainbuttonara.secondari{background-color:inherit;color:inherit;border-radius:1px;background-color:inherit;border:1px solid #d8e0e8;padding:16px 40px 18px}.mainbuttonara.secondari:hover{color:#000!important}.mainbuttonara.secondari:before{background:#f4f6f8}@font-face{font-family:"Ringside Compressed Ultra";src:url(../../common/fonts/RngS97/RingsideCompressed-Ultra.otf) format("opentype")}@font-face{font-family:"Ringside Compressed Medium";src:url(../../common/fonts/RngS97/RingsideCompressed-Medium.otf) format("opentype")}@font-face{font-family:"Ringside Compressed Book";src:url(../../common/fonts/RngS97/RingsideCompressed-Book.otf) format("opentype")}@font-face{font-family:"Ringside Compressed Bold";src:url(../../common/fonts/RngS97/RingsideCompressed-Bold.otf) format("opentype")}@font-face{font-family:"Ringside Narrow Book Italic";src:url(../../common/fonts/RngS97/RingsideNarrow-BookItalic.otf) format("opentype")}:root{--A:120px;--B:80px;--C:40px;--D:40px;--E:30px;--F:20px;--G:20px;--H:36px;--width-ample:calc(100% - 40px);--width-estret:calc(100% - 40px)}@media only screen and (min-width:500px){:root{--D:80px;--width-estret:600px}}@media only screen and (min-width:1020px){:root{--E:50px;--F:30px;--width-ample:980px}}@media only screen and (min-width:1280px){:root{--width-ample:1200px}}.e1{font-family:"Chronicle DeckCond A","Chronicle DeckCond B";font-style:normal;font-weight:600;font-size:65px;line-height:65px;letter-spacing:-1px}@media only screen and (min-width:500px){.e1{font-size:90px;line-height:90px;letter-spacing:-2px}}@media only screen and (min-width:1020px){.e1{font-size:125px;line-height:125px;letter-spacing:-4px}}@media only screen and (min-width:1280px){.e1{font-size:150px;line-height:150px;letter-spacing:-5px}}.e2{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:24px;line-height:24px}.e3{font-family:"Jost";font-style:normal;font-weight:400;font-size:24px;line-height:30px}.e4{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:16px;line-height:20px}.e5{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:14px;line-height:16px}.e6{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:18px;line-height:20px}.e6 i{font-family:"Ringside Narrow Book Italic"}.e6 b,.e6 strong,.e7{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:18px;line-height:20px}.e8{font-family:"Chronicle DeckCond A","Chronicle DeckCond B";font-style:normal;font-weight:600;font-size:60px;line-height:60px}@media only screen and (min-width:500px){.e8{font-size:80px;line-height:80px}}@media only screen and (min-width:1020px){.e8{font-size:100px;line-height:100px}}.e9{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:500;font-size:23px;line-height:23px}@media only screen and (min-width:500px){.e9{font-size:23px;line-height:23px}}.e9 sub{font-size:20px}.e10{font-family:"Chronicle DeckCond A","Chronicle DeckCond B";font-style:normal;font-weight:600;font-size:40px;line-height:40px}@media only screen and (min-width:1020px){.e10{font-size:60px;line-height:60px}}.e11{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:20px;line-height:22px}.e12{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:400;font-size:14px;line-height:16px}.e13{font-family:"Chronicle DeckCond A","Chronicle DeckCond B";font-style:normal;font-weight:600;font-size:42px;line-height:42px}.e14{font-family:"Jost";font-style:normal;font-weight:400;font-size:20px;line-height:28px}.e15{font-family:"Jost";font-style:normal;font-weight:400;font-size:24px;line-height:36px}body{}body.noscroll{overflow:hidden}img{max-width:100%;color:transparent}.up{text-transform:uppercase}.maxw{max-width:100%;width:var(--width-ample);margin-right:auto;margin-left:auto}.midw{max-width:100%;width:var(--width-estret);margin-right:auto;margin-left:auto}.tag{height:42px;display:inline-flex;justify-content:center;align-items:center;border-radius:21px;padding:0 22px;background-color:#68ffd2}.caixa .e14 b,.desplegat+.wrap .e14 b,.e15 b,.final .e14 b,.subratllat{font-weight:400;text-decoration:none;background-image:linear-gradient(to right,rgba(255,255,255,0) 50%,#68ffd2 50%);background-position:0 0;background-size:200% auto;position:relative}.caixa .e14 b.active,.desplegat+.wrap .e14 b.active,.e15 b.active,.final .e14 b.active,.subratllat.active{transition:background-position .8s cubic-bezier(.8,0,.2,1);transition-delay:0s;background-position:-99.99% 0}.portada{text-align:center;}.portada #menu-idiomes{margin-top:0;margin-bottom:var(--C)}.portada .tag{margin-bottom:30px}.portada h1{margin-bottom:30px; text-shadow: 2px 2px 6px black; font-weight: bold;}.portada h1 span{display:block}.portada h1 span:first-child{color:#68ffd2}.portada h2{margin-bottom:20px}.portada .autors{margin-bottom:10px}.intro{width:100%}.intro .ilustracio{position:relative;max-width:100%;width:1200px;margin-right:auto;margin-left:auto;display:block;margin-bottom:var(--A)}.intro .ilustracio img{width:100%;object-fit:contain;object-position:center}.intro .ilustracio .bombolles .bombolla{opacity:.9;animation-name:bombolla-intro}@media only screen and (min-width:1020px){.intro .ilustracio{max-width:calc(100% - 40px)}}@media only screen and (min-width:1280px){.intro .ilustracio{width:1620px}}.emissions .bola{position:relative;text-align:center;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;margin:var(--A) auto;height:calc(100vw - 40px);width:calc(100vw - 40px)}@media only screen and (min-width:500px){.emissions .bola{height:460px;width:460px}}@media only screen and (min-width:1020px){.emissions .bola{height:604px;width:604px}}.emissions .bola p{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}.emissions .bola p>span{margin-top:var(--F)}.emissions .bola p>span.e8{margin-top:var(--E)}.emissions .bola .top{position:relative;display:flex;align-items:center;justify-content:center;width:220px}.emissions .bola .top span{transition:opacity .4s ease-in}.emissions .bola .top span:first-child{opacity:1}.emissions .bola .top span:nth-child(2){position:absolute;opacity:0}.emissions .bola:after,.emissions .bola:before{content:'';display:block;background-color:#d8e0e8;border:1px solid #000;border-radius:50%;z-index:-1;position:absolute;height:100%;width:100%;transition:height 1s ease-in,width 1s ease-in,border 1s ease-in}.emissions .bola:after{background-color:#fff;border:1px solid #d8e0e8;box-sizing:border-box;z-index:-2}.emissions .comentari{text-align:right;transition:opacity .4s ease-in;position:absolute;right:0;top:0;margin-top:75vw;z-index:1}.emissions .comentari:before{content:'';background-image:url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/fletxa_bola_min.svg);background-repeat:no-repeat;background-size:contain;background-position:right bottom;display:block;height:85px;width:195px;margin-bottom:10px}@media only screen and (max-width:500px){.emissions .comentari:before{margin-left:auto;margin-right:30px}}@media only screen and (min-width:500px){.emissions .comentari:before{background-image:url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/fletxa_bola_mid.svg);height:252px;width:1511px}}@media only screen and (min-width:1020px){.emissions .comentari:before{background-image:url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/fletxa_bola_gran.svg);height:80px;width:80px;margin-bottom:20px;position:absolute;top:0;left:0}}@media only screen and (min-width:500px){.emissions .comentari{margin-top:55%}}@media only screen and (min-width:1020px){.emissions .comentari{text-align:left;padding:80px 0 0 80px}}.emissions #comentari1{opacity:1}@media only screen and (min-width:1020px){.emissions #comentari1{margin-top:75%;transform:translateX(65%)}}.emissions #comentari2{opacity:0}@media only screen and (min-width:1020px){.emissions #comentari2{margin-top:44%;transform:translateX(52%)}}.emissions.active .top span:first-child{opacity:0}.emissions.active .top span:nth-child(2){opacity:1}.emissions.active .bola:before{width:0%;height:0%;border:0 solid #000}.emissions.active #comentari1{opacity:0}.emissions.active #comentari2{opacity:0}.emissions.active .bombolla{opacity:0}.emissions.active2 .bola:before{width:3.9%;height:3.9%;border:1px solid #000}.emissions.active2 #comentari1{opacity:0}.emissions.active2 #comentari2{opacity:1}.emissions.active2 .bombolla:nth-child(-n+3){opacity:1}.bombolles{position:absolute;top:-40px;bottom:0;right:0;left:0;pointer-events:none}.bombolles .bombolla{mix-blend-mode:multiply;position:absolute;height:34px;width:34px;border-radius:50%;background-color:#d8e0e8;border:1px solid #000;box-sizing:border-box;transition:opacity .2s ease;animation-name:bombolla;animation-timing-function:ease-in;animation-duration:5s;animation-iteration-count:infinite}.bombolles .bombolla:nth-child(1){animation-duration:6s}.bombolles .bombolla:nth-child(2){animation-duration:5.2s}.bombolles .bombolla:nth-child(3){animation-duration:4.2s}.bombolles .bombolla:nth-child(4){animation-duration:4.7s}.bombolles .bombolla:nth-child(5){animation-duration:6s}.bombolles .bombolla:nth-child(6){animation-duration:7s}.bombolles .bombolla:nth-child(7){animation-duration:4.8s}@keyframes bombolla{0%{border:0 solid #000;transform:scale(0)}20%{border:2px solid #000;transform:scale(.6)}40%{border:2px solid #000;transform:scale(.4)}80%{border:1px solid #000;transform:scale(.3)}95%{border:1px solid #000;transform:scale(.2)}100%{border:0 solid #000;transform:scale(0)}to{top:0}}@keyframes bombolla-intro{0%{border:0 solid #000;transform:scale(0) translateX(0)}1%{border:0 solid #000;transform:scale(0) translateX(0)}20%{border:2px solid #000;transform:scale(.2) translateX(20px)}40%{border:2px solid #000;transform:scale(.4) translateX(130px)}80%{border:1px solid #000;transform:scale(.3) translateX(430px)}95%{border:1px solid #000;transform:scale(.2) translateX(580px)}100%{border:0 solid #000;transform:scale(0) translateX(600px)}to{top:-10px;transform:scale(0) translateX(600px);opacity:0}}.seccio{position:relative;padding:var(--A) 0;text-align:center}.seccio h2.e10{position:relative;text-align:center;margin:var(--H) auto var(--A);width:850px;max-width:calc(100% - 40px)}.seccio h2.e10:after{display:block;content:'';height:20px;width:97px;background-image:url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/dialeg.svg);background-repeat:no-repeat;background-position:center;background-size:contain;margin:30px auto 0}.seccio>.bombolles{position:absolute;top:calc(var(--A) - 20px);bottom:auto;right:calc(50% - 100px);left:calc(50% - 100px);height:200px;width:200px}.seccio>.bombolles .bombolla{opacity:.9}.seccio article>header{max-width:calc(100% - 40px);margin-right:auto;margin-left:auto;margin-bottom:var(--B)}.seccio article h3.e11+p.e12{margin-top:10px}.seccio p.e15{text-align:left}.seccio#seccio4{padding-bottom:0}.barra .segment{position:relative;display:flex;align-items:center;justify-content:center;width:var(--percent)}.barra .segment .rect{height:80px;width:100%;border:1px solid #000;box-sizing:border-box}.barra .segment .tooltip+rect:hover{cursor:pointer}.barra .segment+.segment .rect{border-left:none}.barra .segment .label{text-align:center;position:absolute;top:100%;width:100%;direction:rtl}.barra .segment .label *{white-space:nowrap}.barra .segment .label .e12{margin-bottom:10px}.barra .segment .label:before{display:block;content:' ';width:1px;height:15px;background-color:#000;margin:0 auto 5px}.barra .segment:hover .tooltip{opacity:1}#barra1{padding-bottom:90px}@media only screen and (max-width:1280px){#barra1{padding-bottom:280px}#barra1 .segment:nth-child(2) .label:before{height:105px}#barra1 .segment:nth-child(3) .label:before{height:195px}}#barra1 .segment:last-child .tooltip{right:-10px}#barra1 .segment:last-child .tooltip:after{left:calc(100% - 20px)}#barra2{position:relative;padding-bottom:90px;margin-bottom:var(--A)}#barra2 .segment:nth-child(1) .label{direction:ltr}#barra2 .segment:nth-child(1) .label:before{margin-left:0}#barra2 .segment:nth-child(2) .label{text-align:right}#barra2 .segment:nth-child(2) .label:before{margin-right:0}#barra2 .nuclear{position:absolute;bottom:100%;right:15%;display:flex;height:120px}@media only screen and (max-width:1020px){#barra2 .nuclear{display:none}}#barra2 .nuclear .fletxa{height:80px;width:80px;margin-top:auto;margin-bottom:-1px;background-image:url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/fletxa2.svg);background-repeat:no-repeat;background-size:contain;background-position:center}#barra2 .nuclear .label{padding:0 0 60px 15px}#barra3{margin-top:var(--B);padding-bottom:90px}@media only screen and (max-width:1020px){#barra3{padding-bottom:280px}#barra3 .segment:nth-child(2) .label{text-align:right}#barra3 .segment:nth-child(2) .label p{width:50%;margin-right:auto;direction:rtl}#barra3 .segment:nth-child(2) .label:before{height:105px}#barra3 .segment:nth-child(3) .label{text-align:right}#barra3 .segment:nth-child(3) .label p{width:50%;margin-right:auto;direction:rtl}#barra3 .segment:nth-child(3) .label:before{height:195px}}.tooltip{position:absolute;bottom:calc(100% - 20px);padding:10px;background-color:#fff;border:1px solid #000;border-radius:2px;transition:opacity .4s ease;opacity:0;z-index:1}.tooltip:after{display:block;content:'';background-color:inherit;border:inherit;border-radius:inherit;height:10px;width:10px;width:10px;position:absolute;bottom:-6.4px;transform:rotate(45deg);left:calc(50% - 7px);border-top:0 solid #fff;border-left:0 solid #fff;border-bottom-left-radius:0;border-top-right-radius:0}.tooltip p{display:flex;justify-content:space-between;white-space:nowrap}.tooltip p span{margin-left:14px}.tooltip p+p{margin-top:10px}.tooltip.right{right:-20px}.tooltip.right:after{left:calc(100% - 35px)}.fltx{height:100px;min-height:100px;width:20px;min-width:20px;margin-right:auto;margin-left:auto;margin-bottom:30px;background-image:url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/fletxa.svg);background-repeat:no-repeat;background-size:contain;background-position:center;transition:background-position .6s ease-in}.fltx:not(.active){background-position:center -80px}.caixa-wrap{height:100vh;display:flex;justify-content:center;align-items:center}.caixa{position:relative;padding:20px;width:100%;margin:0 auto;text-align:left;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.25);border-radius:2px;z-index:10}.caixa .e11{margin-bottom:20px}.caixa .peu{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;margin-top:30px;padding-top:30px;border-top:1px solid #000}.caixa .peu .e12{max-width:180px}@media only screen and (min-width:500px){.caixa{width:460px}}@media only screen and (min-width:1020px){.caixa{width:500px}}.caixa .chart{position:relative;display:inline-block;height:42px;width:42px;border:1px solid #000;border-radius:50%;background-color:#fff;margin:0 10px 0 auto}.caixa .chart:after{content:"";position:absolute;border-radius:50%;inset:0;background:conic-gradient(#d8e0e8 calc(var(--angle) * 3.6deg),#0000 0)}@media only screen and (min-width:1020px){#consum-final{display:flex;flex-flow:row nowrap;align-items:flex-start;justify-content:flex-start}}#consum-final .segment{position:relative;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;margin:0 0 -1px 0;box-sizing:border-box;max-width:100%}@media only screen and (min-width:1020px){#consum-final .segment{width:var(--percent)}#consum-final .segment+.segment .rect{border-left:none}}#consum-final .segment .rect{height:80px;min-width:calc(var(--percent) * 1.4);border:1px solid #000;margin-right:20px;transition:background-color .2s ease-in}@media only screen and (min-width:500px){#consum-final .segment .rect{min-width:calc(var(--percent) * 1.7)}}@media only screen and (min-width:1020px){#consum-final .segment .rect{margin-right:-1px;min-width:100%}}#consum-final .segment .label{text-align:left;transition:opacity .2s ease-in;opacity:1}@media only screen and (min-width:1020px){#consum-final .segment .label{text-align:center;position:absolute;width:100%;top:100%}#consum-final .segment .label:before{content:'';display:block;height:15px;width:1px;background-color:#000;margin:0 auto 5px}}#consum-final .segment .label .e12{margin-bottom:5px}@media only screen and (min-width:1020px){#consum-final .segment .label .e12{margin-bottom:10px}}#consum-final .segment:nth-child(1) .rect{background-color:#b69670FF}#consum-final .segment:nth-child(2) .rect{background-color:#b69670CC}#consum-final .segment:nth-child(3) .rect{background-color:#b6967099}#consum-final .segment:nth-child(4) .rect{background-color:#b6967066}#consum-final .segment:nth-child(5) .rect{background-color:#b6967033}#consum-final .segment:nth-child(5) .label{text-align:right;display:flex;flex-flow:column nowrap;align-items:flex-end}#consum-final .segment:not(.active) .rect{background-color:#fff}#consum-final .segment:not(.active) .label{opacity:0}.acordio{counter-reset:acordio;margin-bottom: 30px;}.acordio .desplegable{counter-increment:acordio;background-color:#fff;border-bottom:1px solid #000;font-family: 'Montserrat'!important}.acordio .desplegable:first-child{border-top:1px solid #000}.acordio .desplegable h4{height:90px;display:flex;flex-flow:row nowrap;align-items:center;padding:0 20px}@media only screen and (min-width:1020px){.acordio .desplegable h4{overflow:hidden}}@media only screen and (min-width:1280px){.acordio .desplegable h4{overflow:hidden}}.acordio .desplegable h4:after{display:inline-block;margin-left:auto;font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;content:'expand_more'}.acordio .desplegable h4:hover{background-color:#f4f6f8}.acordio .desplegable .wrap{max-height:0;overflow:hidden;transition:max-height 1s ease-out}.acordio .desplegable .desplegat+.wrap{max-height:4000px}.acordio .desplegable .desplegat:after{content:'expand_less'}.acordio .desplegable .content{text-align:left;padding:var(--G) 20px 0}@media only screen and (min-width:1020px){.acordio .desplegable .content{overflow:hidden;display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:flex-start}.acordio .desplegable .content>*{width:450px}}@media only screen and (min-width:1280px){.acordio .desplegable .content{}.acordio .desplegable .content>*{width:500px}}.acordio .desplegable .content h5{margin-bottom:7px}.acordio .desplegable .content p.e14{margin-bottom:var(--H)}.decla{margin-bottom:var(--H);text-align:left}.decla .e15{position:relative;padding:20px;background-color:#d2fff1;border-radius:4px;margin-bottom:30px}.decla .e15:after{display:block;content:' ';position:absolute;height:20px;width:20px;border-top:10px solid #d2fff1;border-left:10px solid #d2fff1;border-bottom:10px solid transparent;border-right:10px solid transparent;box-sizing:border-box;bottom:-20px;left:20px}.decla .e12,.decla .e6 b,.decla .e6 strong,.decla .e7,.e6 .decla b,.e6 .decla strong{margin-left:20px}.decla .e6 b,.decla .e6 strong,.decla .e7,.e6 .decla b,.e6 .decla strong{margin-bottom:10px}.decla.simple .e14{background-color:#f4f6f8}.decla.simple .e14:after{display:none}.decla+.decla .e15:after{left:auto;right:20px;border-top:10px solid #d2fff1;border-left:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #d2fff1}.decla+.decla .e12,.decla+.decla .e6 b,.decla+.decla .e6 strong,.decla+.decla .e7,.e6 .decla+.decla b,.e6 .decla+.decla strong{text-align:right;max-width:300px;margin-left:auto;margin-right:20px}.enquesta-wrap{position:relative}.enquesta-wrap .fltx{margin-top:var(--A)}.enquesta{display:inline-block;background-color:#fff383;border:1px solid #000;border-radius:2px;margin-top:var(--B);z-index:1;transition:background-color .6s .6s linear}.enquesta .e12{margin:20px auto;padding:0 20px}.enquesta .e11{margin-bottom:40px;padding:0 20px}.enquesta .comentaris{display:flex;flex-flow:row nowrap;background-color:#fff;max-height:0;overflow:hidden;transition:max-height .6s ease-in}.enquesta .comentaris>div{width:50%;padding:20px 30px 100px;border-top:1px solid #000}.enquesta .comentaris>div:first-child{border-right:1px solid #000}.enquesta .material-symbols-outlined{position:absolute;top:15px;right:15px;cursor:pointer}.enquesta .buttons{display:flex;flex-flow:row nowrap;border-top:1px solid #000;background-color:#fff}.enquesta .buttons button{border:none;height:56px;width:50%;align-items:center;justify-content:center;background-color:#fff;color:#000;transition:background-color .4s ease-in,width .4s ease-in}.enquesta .buttons button:first-child{border-right:1px solid #000}.enquesta .buttons button.selected,.enquesta .buttons button:hover{background-color:#fff383;cursor:pointer}@media only screen and (min-width:1280px){.enquesta{position:absolute;width:220px;margin-top:0;top:0;right:0;transition:width .6s .6s ease-in}}.enquesta.active{background-color:#fff;transition:width .6s ease-in}.enquesta.active .comentaris{max-height:900px;transition:max-height .6s .6s ease-in}.enquesta.active .buttons button{transition:background-color .4s 1.2s ease-in,width .4s 1.2s ease-in}.enquesta.active .buttons button:first-child{background-color:#68ffd2}.enquesta.active .buttons button:nth-child(2){background-color:#fff383}@media only screen and (min-width:1280px){.enquesta.active{width:800px}}#joc .enunciat{margin-bottom:calc(var(--A) * 2)}@media only screen and (max-width:1020px){#joc .enunciat .pastilla+.pastilla{margin-top:var(--B)}}@media only screen and (min-width:1020px){#joc .enunciat{display:flex;flex-flow:row nowrap;align-items:flex-start;justify-content:space-between}#joc .enunciat .pastilla:first-child:after{content:' ';display:inline-block;background-color:#000;height:100%;width:1px}}.enunciat{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start}.pastilla{display:inline-flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;position:relative;background-color:#68ffd2;border-radius:2px;text-align:center;padding:20px 60px 60px;width:calc(100% - 40px);min-height:180px}@media only screen and (min-width:500px){.pastilla{width:460px}}@media only screen and (min-width:1020px){.pastilla{width:390px}}@media only screen and (min-width:1280px){.pastilla{width:500px}}.pastilla .epigraf{margin-bottom:10px}.pastilla .e9{margin:auto}.pastilla button{border-radius:2px;border:1px solid #000;background-color:#fff;transition:background-color .4s ease;height:56px;width:116px;display:inline-flex;justify-content:center;align-items:center;position:absolute;bottom:-28px}.pastilla button:hover{cursor:pointer;background-color:#000;color:#fff}.finestra{position:fixed;top:0;bottom:0;right:0;left:0;z-index:1001;transition:transform .4s ease-in;transform:translateY(0)}.finestra:not(.active){transform:translateY(-100vh)}.finestra .top{background-color:#68ffd2;display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;padding:0 20px;height:50px;width:100%;position:absolute;top:0;left:0;z-index:1}.finestra .top .up{font-family: 'Montserrat', sans-serif!important;font-style:normal;font-weight:700;font-size:13px;line-height:15px}.finestra .top .material-icons{cursor:pointer}.finestra .pantalla{position:absolute;top:50px;bottom:0;right:0;left:0;transform:translateY(-100vh);display:flex;flex-flow:column nowrap;overflow:auto}.finestra .pantalla .d,.finestra .pantalla .e{opacity:0;transition-property:opacity;transition-delay:.6s;transition-duration:0s;background-color:#fff}.finestra .pantalla:before{content:'';display:block;position:fixed;top:0;bottom:100%;left:0;right:0;background-color:#68ffd2;z-index:10}.finestra .pantalla.active{transform:translateY(0)}.finestra .pantalla.active .d,.finestra .pantalla.active .e{opacity:1;transition-property:opacity}.finestra .pantalla.active:before{animation:escombra 1.2s ease-in forwards}.finestra .pantalla .e .pastilla{position:relative;margin:20px;background-color:#d2fff1;padding:40px 20px;min-height:400px}.finestra .pantalla .e .pastilla .bg{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;opacity:.6}.finestra .pantalla .e .pastilla .epigraf{margin-bottom:20px}.finestra .pantalla .e .pastilla .fltx{margin:25px auto}.finestra .pantalla .e .pastilla .e9{margin:0 auto 0}.finestra .pantalla .e .pastilla button{position:absolute;bottom:40px;margin-top:40px}.finestra .pantalla .d{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;padding:40px 20px var(--B)}.finestra .pantalla .d h4{margin-bottom:40px}.finestra .pantalla .d .fltx{margin:40px auto 30px}.finestra .pantalla .d h5{margin-bottom:var(--B)}.finestra .pantalla .d>*{width:500px;max-width:100%}.finestra .pantalla .d>p{text-align:left}.finestra .pantalla .d>p+p{margin-top:30px}.finestra .pantalla .d>p+h5{margin-top:45px}.finestra .pantalla .d .pastilla+.pastilla{margin-top:80px}.finestra .pantalla .d .decla{margin-top:45px}@media only screen and (min-width:1020px){.finestra .pantalla{flex-flow:row wrap}.finestra .pantalla .d,.finestra .pantalla .e{width:50%;height:100%}.finestra .pantalla .e .pastilla{width:calc(100% - 40px);height:calc(100% - 40px);display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}.finestra .pantalla .d{overflow:auto}}.final .conclusio{background-color:#f4f6f8;padding:var(--A) 20px}.final .conclusio h2{margin-bottom:var(--B)}.final .conclusio p+p{margin-top:35px}.final .nota{padding:var(--B) 20px}.final .nota h3{margin-bottom:20px}.final .nota p+p{margin-top:20px}@keyframes escombra{0%{top:0;bottom:100%}40%{top:0;bottom:0}60%{top:0;bottom:0}100%{top:100%;bottom:0}}
/* estilos para que en LV se muestre el contenido sin margenes */





* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}



  /* -------- Contenedor principal -------- */
    .stats-container {
      max-width: 800px;
      margin: 0 auto;

      border-radius: 8px;
      padding: 30px 20px;
      
    }

    /* -------- Título principal -------- */
    .stats-header {
      text-align: center;
      margin-bottom: 25px;
    }
    .stats-header h2 {
      font-size: 1.25rem;
      color: #444;
    }

    /* -------- Sección del total -------- */
    .total-stats {
      text-align: center;
      margin-bottom: 20px;
    }
    .total-number {
      font-size: 4rem;
      font-weight: 300;
      color: #117a7d; /* color similar a un verde/azulado */

      font-family: "DM Serif Display", serif;
    }
    .total-label {
      font-size: 1rem;
      color: #555;
    }

    /* -------- Flecha hacia abajo -------- */
    .stats-divider {
      text-align: center;
      font-size: 2rem;
      color: #ccc;
      line-height: 1;
      margin: 0 auto 20px;
    }
    /* Si prefieres usar un SVG en lugar de “↓”, puedes reemplazar este contenido con un <svg> */
    .stats-divider::before {
      content: "↓";
      display: inline-block;
    }

    /* -------- Línea horizontal separadora -------- */
    .stats-line {
      width: 100%;
      height: 2px;
      background-color: #117585;
      margin: 0 auto 20px;
      margin-top: 20px;
    }

    /* -------- Sección inferior: tres ítems -------- */
    .stats-items {
      display: flex;
      justify-content: space-between;
      text-align: center;
    }
    .stat-item {
      flex: 1;
    }
    /* Para que no queden muy pegados, dejamos un margen interno horizontal */
    .stat-item:not(:last-child) {
      margin-right: 10px;
    }

    .stat-number {
      font-size: 3.25rem;
      font-weight: 300;
      color: #117a7d; /* mismo color que el total */
      margin-bottom: -10px;
          font-family: "DM Serif Display", serif;
    }
    .stat-label {
      font-size: 1rem;
      color: #555;
      line-height: 1.1rem;
    }

    /* -------- Estilos responsivos -------- */
    @media (max-width: 600px) {
      .stats-items {
        flex-direction: column;
      }
      .stat-item {
        margin-bottom: 15px;
      }
      .stat-item:not(:last-child) {
        margin-right: 0;
      }
    }









button {
  margin: 20px;
}
.custom-btn {
    margin-top: 20px;
    margin-bottom: 20px;
  width: 180px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}


.centrat{
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

/* 16 */
.btn-16 {
        padding: 3px 24px;
  border: none;
  color: #000;
  background: #fff;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-16:hover {
  color: #000;
   background: #d7d5d5;
   transition: all 0.3s ease;
}
.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-16:active {
  top: 2px;
}


/* 3 */
.btn-3 {
  background: #117585;
background: linear-gradient(0deg, #117585 0%, #11768579 100%);
  width: 180px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   background: #117585;
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
   background: transparent;
  box-shadow: none;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:hover{
   color: #117585;
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
   background: #117585;
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}

.firma {
    font-size: 15px !important;
    margin-top: 5px;
    font-weight: bold
}
.data-f {
    font-weight: 100;
    padding-bottom: 15px !important;
    font-size: 14px !important;
    margin-bottom: 10px;
    margin-top: -10px;
  
}
.turq{
	    border-bottom: 3px solid #117585;
}

.turq2{
	font-size: 1.3em;
	font-weight: bold;
	text-align: left;
	line-height: 1.1em;
}

.caixaxifres{
	text-align: center;
	max-width: 350px;
	
	margin: 0 auto;
	margin-top: 30px;
}
.caixaxifres p{
	margin-bottom: 10px;
	line-height: 1.2em;
}
.xifra {
font-size: 4em;
	color: #117585;
	line-height: 1.1em;
	font-family: "DM Serif Display", serif !important;
	margin-bottom: 5px!important;
}
.xifra span{
	
	color: #117585;
	line-height: 1.1em;
	font-family: "DM Serif Display", serif !important;
	margin-bottom: -10px!important;
}
.xifra2 {
	font-size: 3em;
	color: #117585;
	line-height: 1.1em;
	font-family: "DM Serif Display", serif !important;
	margin-bottom: 5px!important;
}
.xifra2 span{

	color: #117585;
	line-height: 1.1em;
	font-family: "DM Serif Display", serif !important;
	margin-bottom: -10px!important;
}
.millons{
	font-size: 1.8em;
	color: #117585;
	font-family: "DM Serif Display", serif !important;
}


.bolasblaves .row div img{
	width: 100%;
	max-width: 100%;
}

.bolasblaves{
	max-width: 1300px;
	margin:  0 auto;
}

.image-container {
            display: flex;
            gap: 20px;
            overflow: hidden;
            margin-top: 20px;
            margin-bottom: 70px;
        }
        .image-container img {
            width: 25%;
            height: auto;
            border-radius: 10px;
      
            transform: translateX(-50px);
            opacity: 0;
            transition: transform 0.8s ease-out, opacity 0.8s ease-out;
        }
        .image-container img.show {
            transform: translateX(0);
            opacity: 1;
        }






 section {
	 width: 100%;
	 position: relative;
}
.point-wrap .point:nth-child(6){
	display: none!important;
}
.point-wrap .point:nth-child(7){
	display: none!important;
}
.point-wrap .point:nth-child(8){
	display: none!important;
}
.point-wrap .point:nth-child(9){
	display: none!important;
}
.point-wrap .point:nth-child(10){
	display: none!important;
}
.point-wrap .point:nth-child(11){
	display: none!important;
}
.point-wrap .point:nth-child(12){
	display: none!important;
}
 .recruitment-process {
	 width: 100%;
	 position: relative;
	 padding: 50px 0;
	 display: inline-block;
}
}
 .recruitment-process .grid {
	 width: 1200px;
	 position: relative;
	 margin: 0 auto;
}
 .recruitment-process .grid .grid-left {
	 position: relative;
	 width: 400px;
	 float: left;
}
 @media only screen and (max-width: 1260px) {
	 .recruitment-process .grid {
		 padding: 0 30px;
		 width: 100%;
	}
}
 @media only screen and (max-width: 578px) {
	 .recruitment-process .grid {
		 padding: 0 25px;
	}
}
 .recruitment-text {
	     width: calc(100% - 500px);
    position: relative;
    float: right;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3);
    transition: 500ms all;
    margin-top: 150px;
     background-color: #ad3719;
}
 .recruitment-text .recruitment-copy {
	 width: 100%;
	 position: relative;
}
 .recruitment-text .recruitment-copy .step {
	 width: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 padding: 20px 20px;

}
 .recruitment-text .recruitment-copy .step > * {
	 visibility: hidden;
	 opacity: 0;
	 transform: translateX(-50px);
	 transition: 1000ms all;
}
 .recruitment-text .recruitment-copy .step > *:nth-child(2) {
	 transition-delay: 100ms;
}
 .recruitment-text .recruitment-copy .step.active > * {
	 visibility: visible;
	 opacity: 1;
	 transform: translateX(0px);
}
 .recruitment-text .recruitment-copy .step.next > * {
	 visibility: hidden;
	 opacity: 0;
	 transform: translateX(50px);
}
 .recruitment-text .recruitment-copy .step h3, .recruitment-text .recruitment-copy .step p {
	 margin: 0;
}
 .recruitment-text .recruitment-copy .step h3 {
	 font-weight: 500;
	 font-size: 24px;
	 margin-bottom: 20px;
	 color: #192e4d;
}
 .recruitment-text .recruitment-copy .step p {
	 color: #fff;
	 font-size: 19px;
	 line-height: 24px;
}
 .recruitment-text .recruitment-controls {

	 width: 100%;
	 height: 80px;
	 background-color: #efefef;
	 position: absolute;
	 bottom: 0;
	 left: 0;
	  	display: none;
	 align-items: center;
	 justify-content: center;
	 border-radius: 0 0 10px 10px;
}
 .recruitment-text .recruitment-controls .arrow {
	 width: 16px;
	 height: 16px;
	 border-top: 3px solid #3c78c7;
	 border-left: 3px solid #3c78c7;
	 transform: rotate(-45deg);
	 transition: 300ms all;
	 cursor: pointer;
}
 .recruitment-text .recruitment-controls .arrow:hover {
	 border-color: #737373;
}
 .recruitment-text .recruitment-controls .arrow.next {
	 transform: rotate(135deg);
}
 .recruitment-text .recruitment-controls .dots {
	 margin: 0 10px;
	 position: relative;
}
 .recruitment-text .recruitment-controls .dots .dot {
	 width: 16px;
	 height: 16px;
	 background-color: #e6e6e6;
	 border-radius: 50%;
	 position: relative;
	 float: left;
	 margin: 0 5px;
	 transition: 300ms all;
	 cursor: pointer;
}
 .recruitment-text .recruitment-controls .dots .dot:hover {
	 background-color: #c0c0c0;
}
 .recruitment-text .recruitment-controls .dots .dot.active {
	 background-color: #3c78c7;
}
 @media only screen and (max-width: 1260px) {
	 .recruitment-text .recruitment-copy .step {
		 padding: 40px 40px 100px 40px;
	}
	 .recruitment-text .recruitment-controls {
		 height: 70px;
	}
}
 @media only screen and (max-width: 1000px) {
	 .recruitment-text {
		 width: calc(100% - 375px);
	}
	 .recruitment-text .recruitment-copy .step {
		 padding: 30px 30px 30px 30px;

	}
	 .recruitment-text .recruitment-copy .step h3 {
		 font-size: 22px;
		 margin-bottom: 16px;
	}
	 .recruitment-text .recruitment-copy .step p {
		 font-size: 19px;
	}
	 .recruitment-text .recruitment-controls {
		 height: 50px;
	}
	.recruitment-wrap .center .center-imgs .center-img h3 {
    text-align: center;
    margin-top: 40px!important;
    width: 100%;
    padding: 20px;
    color: white;
    font-size: 1.3em!important;
}
}
 @media only screen and (max-width: 768px) {
	 .recruitment-text {
		 width: 100%;
	}
}
 .recruitment-wrap {
	 width: 400px;
	 height: 400px;
	 position: relative;
	 float: left;
	 margin-bottom: 50px;
}
 .recruitment-wrap .plane {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 z-index: 5;
	 pointer-events: none;
}
 .recruitment-wrap .plane .plane-wrap {
	 height: 60px;
	 display: inline-block;
	 transform-origin: 50% 230px;
	 transform: translateY(-50%) rotate(0deg);
	 transition: 1000ms all cubic-bezier(0.645, 0.045, 0.355, 1);
}
 .recruitment-wrap .plane .plane-wrap.reverse img {
	 transform: scaleX(-1);
}
 .recruitment-wrap .plane .plane-wrap.shadow img {
	 filter: drop-shadow(0px -15px 0px rgba(0, 0, 0, 0.1));
}
 .recruitment-wrap .plane .plane-wrap img {
	 position: relative;
	 top: 0;
	 height: 60px;
	 transition: 500ms all cubic-bezier(0.645, 0.045, 0.355, 1);
	 filter: drop-shadow(0px 15px 0px rgba(0, 0, 0, 0.1));
}
 .recruitment-wrap .center {
	 position: absolute;
	 height: 60%;
	 width: 60%;
	 z-index: 2;
	 border-radius: 50%;
	 box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3);
	 overflow: hidden;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 border: 1px solid rgba(255, 255, 255, 0.3);
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 background-color: #ad3719;
}
 .recruitment-wrap .center:before {
	 content: "";
	 width: 102%;
	 height: 102%;
	 position: absolute;
	 box-shadow: inset 0 0px 30px rgba(0, 0, 0, 0.3);
	 border-radius: 50%;
	 z-index: 10;
}
 .recruitment-wrap .center .center-imgs {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 z-index: 1;





        
        
}
 .recruitment-wrap .center .center-imgs .center-img {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 z-index: 1;



  align-items: center;
        margin: 0 auto; text-align: center;
display: none


        
        
}
 .recruitment-wrap .center .center-imgs .center-img h3{text-align: center; margin-top: 10px; width: 100%;padding: 20px; color: white; font-size: 1.6em;}
 .recruitment-wrap .center .center-imgs .center-img.active {
	 z-index: 2; display: inherit;
}
 .recruitment-wrap .center .center-imgs .center-img h3.active {
	 z-index: 2; display: inherit;
}
 .recruitment-wrap .center .center-imgs .center-img.active:after {
	 transition: 10000ms cubic-bezier(0.23, 1, 0.32, 1);
	 transform: scale(1);
}
 .recruitment-wrap .center .center-imgs .center-img:after {
	 content: "";
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 background-size: cover;
	 background-position: center;
	 transition: 0ms;
	 transform: scale(0.9);
}

 .recruitment-wrap .center .center-wipe {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 z-index: 2;
	
	 background-size: auto 100%;
	 background-position: 0 0;
}
 .recruitment-wrap .ring {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 z-index: 1;
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 transform: rotate(-90deg);
}
 .recruitment-wrap .ring svg {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 z-index: 1;
	 top: 0;
	 left: 0;
}
 .recruitment-wrap .ring svg circle {
	 width: 100%;
	 height: 100%;
	 stroke-width: 1;
	 fill: none;
	 stroke: #fff;
}
 .recruitment-wrap .ring svg circle.animate {
	 transition: 1000ms all cubic-bezier(0.645, 0.045, 0.355, 1);
}
 .recruitment-wrap .ring svg circle.dash {
	 opacity: 0.2;
	 stroke-dasharray: 10, 10;
}
 .recruitment-wrap .point-wrap {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 z-index: 3;
}
 .recruitment-wrap .point-wrap .point {
	 width: 50px;
	 height: 50px;
	 position: absolute;
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 top: 0;
	 cursor: pointer;
	 align-items: center;
	 transform-origin: 50% 225px;
}
 .recruitment-wrap .point-wrap .point .point-inner {
	 width: 100%;
	 height: 100%;
	 position: relative;
}
 .recruitment-wrap .point-wrap .point .point-inner .point-transform {
	 background-color: #fff;
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 border-radius: 50%;
	 transition: 600ms all;
	 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
 .recruitment-wrap .point-wrap .point .point-inner .point-transform span {
	 position: relative;
	 margin-top: 1px;
	 font-size: 26px;
	 display: block;
	 transition: 600ms all;
	 color: #888;
}
 .recruitment-wrap .point-wrap .point:hover .point-transform {
	 background-color: #333;
}
 .recruitment-wrap .point-wrap .point:hover .point-transform span {
	 color: #fff;
}
 .recruitment-wrap .point-wrap .point.active .point-transform {
	 transform: scale(0.3);
	 background-color: #ad3719;
}
 .recruitment-wrap .point-wrap .point.active .point-transform span {
	 color: #fff;
	 opacity: 0;
}
 @media only screen and (max-width: 1260px) {
	 .recruitment-wrap {
		 margin-left: 20px;
	}
}
 @media only screen and (max-width: 1000px) {
	 .recruitment-wrap {
		 width: 320px;
		 height: 320px;
	}
	 .recruitment-wrap circle {
		 transform-origin: 50% 50%;
		 transform: scale(0.8);
	}
	 .recruitment-wrap .plane .plane-wrap {
		 height: 40px;
		 transform-origin: 50% 180px;
	}
	 .recruitment-wrap .plane .plane-wrap img {
		 height: 40px;
	}
	 .recruitment-wrap .point-wrap .point {
		 width: 40px;
		 height: 40px;
		 transform-origin: 50% 180px;
	}
}
 @media only screen and (max-width: 768px) {
	 .recruitment-wrap {
		 left: 50%;
		 margin: 0;
		 transform: translateX(-50%);
		 margin-bottom: 30px;
	}
}
 


 .quab{
 	background-color: #117585;
 	padding-left: 30px!important;
padding-right: 30px!important;
padding: 30px;
 }
 .quab h3{
 	color: white;
 	font-weight: 300;
 	margin-top: 30px;
 	font-family: "DM Serif Display", serif;
 	
 }
 .quab p{
 	color: white;
 	
 }

.quadrat{
	max-width: 300px;
	background-color: #0e6472;
	color: white;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	text-decoration: inherit;

}
.quadrat p{
	text-decoration: inherit;
	color: white;
	font-weight: bold;
	text-align: center;
	font-size: 1.3em;
	line-height: 1.2em;
}

.quadrat img{
	text-align: center;
	max-width: 40px;
	text-decoration: inherit;

}


.titol2{
	max-width: 800px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	font-weight: 300;
	font-size: 2em;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.info{
	margin: 0 auto;
	text-align: center;

}
.info img{
	max-width: 1200px;
	width: 100%;
}


hr{
	border-bottom: 1px solid black;
	width: 100%;
}

.part2 h4{
color: #117585;
font-weight: bold;
font-size: 1.8em;
}
.part2 h5{
    font-family: "DM Serif Display", serif !important;
    font-weight: 300;
    font-size: 1.3em;
    margin-bottom: 40px;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.credits3{
	font-size: 14px!important;
	font-style: italic;
	margin-top: 30px;
	text-align: left;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.autore{
	color: white;
	font-size: 1em!important;
	padding-top: 0%!important;
	max-width: 500px;
}
.card3:hover{
	background-color: #117585!important;
	background-image: none!important;
	opacity: 1;
	transition: 0.5s!important;
}
.card3{
	background-color: #117585!important;
	transition: 0.5s!important;
}

.card3 {

  position: relative;
  display: flex;

  width: 100%;
  height: 100%;
  color: whitesmoke;
  cursor: pointer;
  overflow: hidden;
  z-index: 10;
  pointer-events: auto;
}

.card-border {margin-top: 30px;
  position: relative;
     width: 371px;
    height: 443px;
  z-index: 9;
  pointer-events: none;
  display: inline-block;
  padding: 30px;
}

.card-border:after,
.card-border:before {
  content: "";
  left: -20px;
  bottom: -20px;
  right: -20px;
  top: -20px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}

.card-border:before {
  transform: scaleY(0);
}

.card-border:after {
  transform: scaleX(0);
}




.card-border2 {
  position: relative;
  width: 380px;
  height: 460px;
  z-index: 9;
  pointer-events: none;
}

.card-border2:after,
.card-border2:before {
  content: "";
  left: -20px;
  bottom: -20px;
  right: -20px;
  top: -20px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}

.card-border2:before {
  transform: scaleY(0);
}

.card-border2:after {
  transform: scaleX(0);
}






.card-border3 {
  position: relative;
  width: 380px;
  height: 460px;
  z-index: 9;
  pointer-events: none;
}

.card-border3:after,
.card-border3:before {
  content: "";
  left: -20px;
  bottom: -20px;
  right: -20px;
  top: -20px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}

.card-border3:before {
  transform: scaleY(0);
}

.card-border3:after {
  transform: scaleX(0);
}


.card-border4 {
  position: relative;
  width: 380px;
  height: 460px;
  z-index: 9;
  pointer-events: none;
}

.card-border4:after,
.card-border4:before {
  content: "";
  left: -20px;
  bottom: -20px;
  right: -20px;
  top: -20px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}

.card-border4:before {
  transform: scaleY(0);
}

.card-border4:after {
  transform: scaleX(0);
}



.card-border:nth-child(1) .card3 {
  background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/act1.jpg);
}

.card-border:nth-child(2) .card3 {
  background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/act2.jpg);
}

.card-border:nth-child(3) .card3 {
  background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/act3.jpg);
}

.xe1 {
  background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/act3.jpg)!important;
}

.xe2 {
  background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/act4.jpg)!important;
}

.xe3 {
  background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/act6.jpg)!important;
}

.card-border:hover:before {
  transform: scaleY(1); transition: 1s;
}

.card-border:hover:after {
  transform: scaleX(1); transition: 1s;
}



.fullp{
	padding-left: 65px;
}


.content3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
}

.content3 {
  transform: translateY(calc(100% - 13.5rem));
}

.card-border:nth-child(2) .content3 {
  transform: translateY(calc(100% - 14.5rem));
}

.card-border:nth-child(3) .content3 {
  transform: translateY(calc(100% - 13.5rem));
}

.card-border:nth-child(4) .content3 {
  transform: translateY(calc(100% - 13.5rem));
}
.content3 img{
    width: 100%;
    height: auto;
    border-radius: 10px;
        max-width: 40px!important;
        margin-top: 20px!important;

}
.content3:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.009) 11.7%,
    hsla(0, 0%, 0%, 0.034) 22.1%,
    hsla(0, 0%, 0%, 0.072) 31.2%,
    hsla(0, 0%, 0%, 0.123) 39.4%,
    hsla(0, 0%, 0%, 0.182) 46.6%,
    hsla(0, 0%, 0%, 0.249) 53.1%,
    hsla(0, 0%, 0%, 0.32) 58.9%,
    hsla(0, 0%, 0%, 0.394) 64.3%,
    hsla(0, 0%, 0%, 0.468) 69.3%,
    hsla(0, 0%, 0%, 0.54) 74.1%,
    hsla(0, 0%, 0%, 0.607) 78.8%,
    hsla(0, 0%, 0%, 0.668) 83.6%,
    hsla(0, 0%, 0%, 0.721) 88.7%,
    hsla(0, 0%, 0%, 0.762) 94.1%,
    hsla(0, 0%, 0%, 0.79) 100%
  );
  transform: translateY(-90%);
  transition: transform calc(var(--d) * 2) var(--e);
  opacity: 0;
}

.card3:hover .content3 {
  transform: translateY(0);transition: 1s;
}

.card3:hover .content3::after {
  opacity: 1;transition: 1s;
}

.content3 > *:not(.title3) {
  opacity: 0;
  transform: translateY(3rem);
  transition: transform var(--d) var(--e), opacity var(--d) var(--e);
}

.card3:hover .content3 {
  transform: translateY(20px);transition: 1s;
  opacity: 1;
  transform: translateY(20px);
  transition-delay: calc(var(--d) / 8);
}

.card3:hover .content3 > *:not(.title3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--d) / 8);transition: 1s;
}
.verm{
	color: #ad3719;
	font-weight: bold;
}
.title3 {
	    text-shadow: 2px 2px 6px black;
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  z-index: 2;
  margin-bottom: 1rem;
      line-height: 28px;
}

.text3 {
  font-size: 1.5rem;
  line-height: 1.8rem;
  z-index: 2;
}



section {

  padding bottom: 1rem;

  .section-container {
    width: 90%;
    margin: 0 auto;

    h2 {
      color: black;
      font-family: "DM Serif Display", serif;
      text-align: center;
      font-size: 4rem;
      width: 100%;
      letter-spacing: -3px;
    }

    .images-container {
      display: flex;
      gap: 2rem;
      margin-top: 4rem;

      .image {
        transition: all 0.6s ease;
        width: 25%;
        height: 350px;
        border-radius: 20px;
        overflow: hidden;
        position: relative;

        &:hover > .image-text {
          transition: all 0.3s ease;
          opacity: 1;
          pointer-events: all;
        }

        &:hover {
          transition: all 0.6s ease;
          width: 100%;
        }

        img {
          position: absolute;
          top: -200px;
          left: 0;
          width: 100%;
          height: 140%;
          object-fit: cover;
        }

        .image-text {
          transition: all 0.3s ease;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;
          padding: 1rem;
          opacity: 0;
          pointer-events: none;

          h3 {
            color: white;
            font-size: 2rem;
            letter-spacing: 2px;
          }
        }
      }
    }
  }
}































































.wallpaper-inverted-ad{

  display: none!important;

}
header{
	background: inherit!important;
}
 footer .breadcrumb {
    display: none !important;
}

.visual-article-free .col-12 {

  padding-right: 0 !important;

  padding-left: 0 !important;

  margin-top: 0 !important;

}

.content-free-html {

  margin:0 !important;

}

.container-fluid {

  padding-right: 0 !important;

  padding-left: 0 !important;

}

.visual__story--free .content-free-html {

  margin: 0px !important;

}

.row>* {

  padding-right: 0;

  padding-left: 0;

  margin-top: 0;

}

.article-default a:hover {

  text-decoration: none;

  box-shadow: none;

}
.wow h2{
	font-family: "DM Serif Display", serif;

}
.boto{
	    margin: 0 35px;
    text-align: center;
     border: none;
    outline: none;
}
.cta {
  position: relative;
  margin: auto;
  padding: 2px 18px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
   border: none;
    outline: none;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: #96ce00;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
   border: none;
    outline: none;
}

.cta span {
  position: relative;
 font-family: "DM Serif Display", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #234567;
   border: none;
    outline: none;
}

.cta svg {
  position: relative;
  top: -3;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 3;
  transform: translateX(-5px);
  transition: all 0.3s ease;
   border: none;
    outline: none;
}

.cta:hover:before {
  width: 100%;
  background: #96ce00;
  border: none;
    outline: none;
}

.cta:hover svg {
  transform: translateX(0);
  border: none;
    outline: none;
}

.cta:active {
  transform: scale(0.95);
}


/* Base Parallax Element Style*/ 
.paral {
height: 900px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
position: relative;
}
/* Paragrapgh for Parallax Section */ 
.paral p {
font-size: 20px;
color:#f5f5f5;
text-align: center;
line-height: 30px;
position: absolute;
width: 100%;
bottom: 15px;
text-shadow: 2px 2px 5px black;
}
/* Heading for Parallax Section */ 
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 80px;
text-align: center;
padding-top: 100px;
line-height: 100px;
}
/* Custom Button Element for Parallax Section */
.paral button {
font-size: 30px; 
border-radius: 5px;
color: #808080;
background-color: #a0f0f0;
padding: 6px 12px;
line-height: 40px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.relacionados{
	text-align: left;
	color: #25256a;
}
.relacionados img{
	float: left;
	width: 100px;
	margin-right: 20px;
}
.verdes{
	background-color: #ad3719;
	color: white;
}
.verdes2{
	background-color: #117585;
	color: white;
}
.colorado{
	color: #ad3719;
}
.desta2{
	padding-left: 15px!important;

}
.desta2p{
	    font-size: 1.5em;
    font-family: "DM Serif Display", serif!important;
    line-height: 1.3;

}
.comillas{
	color: #ad3719;
	font-size: 6em;
	font-family: "DM Serif Display", serif!important;
	    line-height: 1em;
    margin-bottom: -35px;
}
.verdes2{
    display: block!important;
}
.videoverdes{
width: 100%;
  height: auto; /* Puedes ajustarlo o usar vh/vw, etc. */
  min-height: 400px!important; /* Ajusta según sea necesario */

  /* Asigna la imagen de fondo */
  background-image: url('https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/entre.jpg');

  /* Centra la imagen */
  background-position: center center;

  /* Hace que la imagen cubra siempre todo el contenedor */
  background-size: cover;

  /* Para que no se repita si la imagen es más pequeña */
  background-repeat: no-repeat;

  /* Si quieres superponer un color semitransparente, añade un overlay (opcional) */
  position: relative;
  overflow: hidden;
	color: white;
	padding-right: 0px!important;
}
.larga{
    background-image: url('https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/larga.jpg');
}
.papallones{
    background-image: url('https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/papallones.jpg');
}
.tiol{
	background-color: #117585;
	color: white;
	text-align: center;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
	padding: 15px 10px;
	width: 100%;
	margin-top: 50px;
	
}
.tiol h2{
	font-family: "DM Serif Display", serif!important;
	font-size: 1.7em;
	margin-bottom: 0px;
}
.tiol h4{
	font-family: "DM Serif Display", serif!important;
	font-size: 1.3em;
	margin-top: 10px;
	font-weight: inherit;
}
.videoverdes img{
	width: 100%;
}
.verdes p{
		padding: 40px;
	vertical-align: middle;

	    font-size: 2.8em;
	    line-height: 1.1em;
	    padding-top: 15%;
	    text-align: right;

}
.verdes2 h3{
	

	vertical-align: middle;
	font-family: "DM Serif Display", serif;
	    font-size: 2em;
	    line-height: 1.3em;
	    color: white;
	     animation-duration: 3s;
  animation-name: slidein;
}




.verdes2{
	padding: 40px!important;
	display: flex;
    align-items: center;
    height: auto;
}
.verdes2 p{
	
	font-family: "Roboto", sans-serif;
	padding-bottom: 20px;
	vertical-align: middle;
	    font-size: 1.2em;
	    line-height: 1.2em;
	
	    

}
.pilares {
 background-color: #11768521;
	text-align: center;
	margin: 0 auto;
}
.pilares img{
	max-width: 80px;
	text-align: center;
	margin: 0 auto;
}
.verdes2 .subtt{
	font-size: 1.2em;
	padding: inherit;
	padding-left: 40px;
	padding-right: 40px;
}
.leyenda{
	font-style: italic;
	font-size: 16px!important;
	text-decoration: underline;
}
.cometes{font-size: 4em;font-family: "DM Serif Display", serif;text-shadow: 5px 3px 6px grey; color: #ad3719;
font-weight: bold;}
.destacat{
	    position: absolute;
       top: 14%;
    left: 13%;
}
.destacat p{font-family: "DM Serif Display", serif;
	    font-size: 1.5em;margin-top: -45px;
}
.destacat2{
	position: absolute;
    top: 14%;
    left: 13%;
	    padding-bottom: 120px;
}
.destacat2 p{font-family: "DM Serif Display", serif;
	    font-size: 1.5em;margin-top: -45px;
}
div.button {
text-align: center;
}
/* Images for 3 Parallax Sections */
.paralsec1 {
background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/01.jpg");
}
.paralsec2 {
background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/02.jpg");
}
.paralsec3 {
background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/03.jpg");
}

.paralsec4 {
background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/04.jpg");
}
.paralsec5 {
background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/05.jpg");
}
.credits{
	color: grey; text-align: center;padding-top: 30px;
}
.credits p{
	font-size: 0.7em;
}
.credits2{
	color: grey; text-align: center;padding-top: 30px;
}
.credits2 p{
	font-size: 0.7em;
}
.letrai{  color: #ad3719;
	float: left;       margin-left: -130px;
    margin-top: -81px;
    font-size: 8.5em; font-family: "DM Serif Display", serif;
}
.infografia{
	padding: 20px;
	background-color: #fcd48c;
	
	border-radius: 15px;
}
.mobil{display: none}
.navmob {
        display: none!important;
    }

#thanks {
  background-color: #fff;
}
#thanks::after {
  content: none;
}
#thanks div {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
#thanks h2 {
  margin-bottom: 60px;
  color: #333;
  font : normal 300 64px/1 'Josefin Sans', sans-serif;
  text-align: center;
  white-space: nowrap;
}
#thanks p {
  color: #333;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
}
#thanks p a {
  color: #333;
  text-decoration: none;
  transition: color .3s;
}
#thanks p a:hover {
  color: #888;
}
.demo a {
  position: absolute;
  bottom: 25px;
  left: 48%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}







@-webkit-keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



#section04 a {
  padding-top: 60px;
}
#section04 a span {
  position: absolute;
      bottom: -35px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}


@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


#section05{
	position: absolute;
	bottom: 0px;
}

.video-container{
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.video-container img{
  width: 100%;
  height: auto;
}
.arrow{    position: absolute;
    bottom: 15px;
    width: 100vw;
    min-width: 100vw !important;
    font-size: 20px;
    left: 50%;
    color: white;
}
 .video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.navbar{
	display: block!important;
}
#slide-show {
  height: 95vh;
  min-height: 95vh;
  overflow: hidden;
  width: 100vw;
  min-width: 100vw !important;
  font-family: "Roboto", sans-serif;
}
.bg-accent-2 .no-gutters div div figure .bg-key{background-color: white;}
.sdd{
	font-weight: 400;
}
.slide-text {
  font-size: 20px;
  color: #fff;
  text-align:center;
}

.slide-text b {
  font-weight: 400; 
}
.slide-text h3{
	font-family: "Roboto", sans-serif;
	font-size: 30px;
	    margin-bottom: 1vw;
}
blockquote{max-width: 450px;font-family: 'Montserrat', sans-serif!important; margin-bottom: 10px!important;}
.slide-text h2 {
  font-weight: bold;
  font-size: 43px;
  text-align: center;
  line-height: 47px;
  letter-spacing: 1px;
  color: #fff;
  font-family: "Roboto", sans-serif;
}

.slidex {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: -1;
}

.activx {
  opacity: 1;
}

.slideshow-nav {
  position: absolute;
  bottom: 35%; 
  width: 100vw;
  min-width: 100vw !important;
  font-size: 20px;
  background: transparent;  
}

.previousx {
  float: left;
}

.nextx {
  float: right; margin-right: 15px;
}
.titolillo{font-size: 1.2rem; color:#fcd48c }
.bg0, .bg1, .bg2, .bg3{
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  background-size: cover !important;
  background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/diapo1.jpg");
  height: 90vh;
  min-height: 90vh;
  overflow: hidden;
  width: 100vw;
  min-width: 100vw !important;
  position: absolute;
  top:120;
  left:0;

}
.bg1 {background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/diapo2.jpg");}
.bg2 {background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/diapo3.jpg");}
.bg3 {background-image: url("https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/diapo4.jpg");}


.slide-text h3{
	font-weight: bold;
}

.slider-center {
  position: absolute;
  height:15%;
  width: 65%;
  max-width: 100%;
  left: 48%;
  bottom: 25%;
  background-color: transparent;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: left;
  letter-spacing: 2px;
}
.slider-center2 {
	bottom: 5%!important;
}
.nav-link {
  transition: all 0.4s;
  color:#fff;
  opacity: 1;
  text-decoration: none; 
      padding-right: 1rem!important;
    padding-left: 1rem!important;
}
.nav-link:hover {
  color: #fff;
  opacity: 0.9;
}

.nav-item a:hover{
	color: red!important;
}
.sticky-top {background-color: rgb(248 249 250 / 79%)!important;}


video {
    object-fit: fill;
}
video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}


.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure a{
	color: #3e3e3e;
	font-weight: 600;

}
.f-dreta{
	float: left;
	margin-right: 45px;
	max-width: 55%;
	margin-top: 25px;
}
.peufoto img{
  width: 100%;
}
.peufoto{

  	font-size: 0.8em;
      width: 100%;
      font-family: "Roboto", sans-serif;
}
.peufoto p{
 padding: 5px;line-height: 20px;    margin-bottom: 5px; font-size: 17px;
}
.tabs {
  display: flex;
  flex-wrap: wrap; // make sure it wraps
}
.tabs label {
  order: 1; // Put the labels first
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99; // Put the tabs last
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs input[type="radio"]:checked + label {
  background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}
@media (max-width:1450px) {

    .verdes2 h3 {
    vertical-align: middle;
    font-family: "DM Serif Display", serif;
    font-size: 1.8em;
    line-height: 1.3em;
}

}
@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}
.slider {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}

.slider--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.slider--feature {
  text-align: center;
}

.slider--title {
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;

}
.slider--title2 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}
.titolar{font-size: 4rem;font-weight: bold;}
.titolar2{font-size: 4rem;}
.slider--text {
  font-size: 1.1rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0.5rem 0;
    max-width: 950px;
}
.slider__btn-right,
.slider__btn-left {
  background: transparent;
  border: none;
  outline: none;
  font-size: 4rem;
  color: #eee;
  padding: 0 1rem;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.slider--btn {
  background: #fff;
  text-transform: uppercase;
  border: none;
  color: #444;
  border: 1px solid #444;
  outline: none;
  font-weight: 700;
  padding: 0.8rem 2rem;
  cursor: pointer;
}

.slider__btn-left:hover,
.slider__btn-right:hover {
  transform: scale(0.95);
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 1s;
}
main {
    display: block
}

h1 {
    font-size: 2em;
    margin: 0.27em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: 0.35em 0.75em 0.625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

body {
    overflow-x: hidden;
   font-family: "DM Serif Display", serif;
    font-size: 1.2rem;
    line-height: 1.75;
    background-color: #fff;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button {
    border: 0;
    background: transparent;
    outline: 0
}

.strong,
b,
strong {
    font-weight: bold
}

em {
    font-style: italic
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    color: #fcd48c;
}

a:focus,
a:hover {
    text-decoration: none
}

article a {
    color: #117585;
    font-weight: bold;
}
article a:hover {
    color: #fc4c1f;
}
figure {
    margin: 0
}

img,
svg,
video {
    vertical-align: middle;
    max-width: 100%;
    height: auto
}

.img-fluid {
    width: 100%;
    height: auto
}

::selection {
    background: #fcd48c;
    color: #fff
}

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,
:after,
:before {
    box-sizing: inherit
}
.container3{
	    margin: 0 auto;
    text-align: center;
}
.container {
    max-width: 816px;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto
}
.paises {
    max-width: 816px;
}
.container2 {
    max-width: 816px;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto
}
@media (min-width:768px) {
    .container {
        padding-right: 24px;
        padding-left: 24px
    }
}

.container-sm {
    max-width: 548px;
    margin-right: auto;
    margin-left: auto
}

.container-xs {
    max-width: 464px;
    margin-right: auto;
    margin-left: auto
}

.container-xl {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto
}

.container-fluid {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:768px) {
    .container-fluid {
        padding-right: 24px;
        padding-left: 24px
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px
}

@media (min-width:768px) {
    .row {
        margin-right: -20px;
        margin-left: -20px
    }
}

@media (min-width:1024px) {
    .row {
        margin-right: -32px;
        margin-left: -32px
    }
}

.row-sm {
    margin-right: -8px;
    margin-left: -8px
}

@media (min-width:768px) {
    .row-sm {
        margin-right: -12px;
        margin-left: -12px
    }
}

.row-sm [class*=col-] {
    padding-right: 8px;
    padding-left: 8px
}

@media (min-width:768px) {
    .row-sm [class*=col-] {
        padding-right: 12px;
        padding-left: 12px
    }
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 12px;
    padding-left: 12px
}

@media (min-width:768px) {
    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        padding-right: 20px;
        padding-left: 20px
    }
}

@media (min-width:768px) {
    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        padding-right: 32px;
        padding-left: 32px
    }
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%
}

.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%
}

.col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.order-first {
    order: -1
}

.order-last {
    order: 13
}

.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.order-7 {
    order: 7
}

.order-8 {
    order: 8
}

.order-9 {
    order: 9
}

.order-10 {
    order: 10
}

.order-11 {
    order: 11
}

.order-12 {
    order: 12
}

.offset-1 {
    margin-left: 8.333333%
}

.offset-2 {
    margin-left: 16.666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.333333%
}

.offset-5 {
    margin-left: 41.666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.333333%
}

.offset-8 {
    margin-left: 66.666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.333333%
}

.offset-11 {
    margin-left: 91.666667%
}

@media (min-width:576px) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-sm-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }
    .col-sm-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }
    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-sm-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
    .col-sm-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-sm-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }
    .col-sm-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }
    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-sm-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }
    .col-sm-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }
    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-sm-first {
        order: -1
    }
    .order-sm-last {
        order: 13
    }
    .order-sm-0 {
        order: 0
    }
    .order-sm-1 {
        order: 1
    }
    .order-sm-2 {
        order: 2
    }
    .order-sm-3 {
        order: 3
    }
    .order-sm-4 {
        order: 4
    }
    .order-sm-5 {
        order: 5
    }
    .order-sm-6 {
        order: 6
    }
    .order-sm-7 {
        order: 7
    }
    .order-sm-8 {
        order: 8
    }
    .order-sm-9 {
        order: 9
    }
    .order-sm-10 {
        order: 10
    }
    .order-sm-11 {
        order: 11
    }
    .order-sm-12 {
        order: 12
    }
    .offset-sm-0 {
        margin-left: 0
    }
    .offset-sm-1 {
        margin-left: 8.333333%
    }
    .offset-sm-2 {
        margin-left: 16.666667%
    }
    .offset-sm-3 {
        margin-left: 25%
    }
    .offset-sm-4 {
        margin-left: 33.333333%
    }
    .offset-sm-5 {
        margin-left: 41.666667%
    }
    .offset-sm-6 {
        margin-left: 50%
    }
    .offset-sm-7 {
        margin-left: 58.333333%
    }
    .offset-sm-8 {
        margin-left: 66.666667%
    }
    .offset-sm-9 {
        margin-left: 75%
    }
    .offset-sm-10 {
        margin-left: 83.333333%
    }
    .offset-sm-11 {
        margin-left: 91.666667%
    }
}

@media (min-width:768px) {
    .col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-md-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }
    .col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
    .col-md-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-md-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }
    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }
    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-md-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }
    .col-md-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-md-first {
        order: -1
    }
    .order-md-last {
        order: 13
    }
    .order-md-0 {
        order: 0
    }
    .order-md-1 {
        order: 1
    }
    .order-md-2 {
        order: 2
    }
    .order-md-3 {
        order: 3
    }
    .order-md-4 {
        order: 4
    }
    .order-md-5 {
        order: 5
    }
    .order-md-6 {
        order: 6
    }
    .order-md-7 {
        order: 7
    }
    .order-md-8 {
        order: 8
    }
    .order-md-9 {
        order: 9
    }
    .order-md-10 {
        order: 10
    }
    .order-md-11 {
        order: 11
    }
    .order-md-12 {
        order: 12
    }
    .offset-md-0 {
        margin-left: 0
    }
    .offset-md-1 {
        margin-left: 8.333333%
    }
    .offset-md-2 {
        margin-left: 16.666667%
    }
    .offset-md-3 {
        margin-left: 25%
    }
    .offset-md-4 {
        margin-left: 33.333333%
    }
    .offset-md-5 {
        margin-left: 41.666667%
    }
    .offset-md-6 {
        margin-left: 50%
    }
    .offset-md-7 {
        margin-left: 58.333333%
    }
    .offset-md-8 {
        margin-left: 66.666667%
    }
    .offset-md-9 {
        margin-left: 75%
    }
    .offset-md-10 {
        margin-left: 83.333333%
    }
    .offset-md-11 {
        margin-left: 91.666667%
    }
}

@media (min-width:1024px) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-lg-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }
    .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
    .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }
    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-lg-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }
    .col-lg-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-lg-first {
        order: -1
    }
    .order-lg-last {
        order: 13
    }
    .order-lg-0 {
        order: 0
    }
    .order-lg-1 {
        order: 1
    }
    .order-lg-2 {
        order: 2
    }
    .order-lg-3 {
        order: 3
    }
    .order-lg-4 {
        order: 4
    }
    .order-lg-5 {
        order: 5
    }
    .order-lg-6 {
        order: 6
    }
    .order-lg-7 {
        order: 7
    }
    .order-lg-8 {
        order: 8
    }
    .order-lg-9 {
        order: 9
    }
    .order-lg-10 {
        order: 10
    }
    .order-lg-11 {
        order: 11
    }
    .order-lg-12 {
        order: 12
    }
    .offset-lg-0 {
        margin-left: 0
    }
    .offset-lg-1 {
        margin-left: 8.333333%
    }
    .offset-lg-2 {
        margin-left: 16.666667%
    }
    .offset-lg-3 {
        margin-left: 25%
    }
    .offset-lg-4 {
        margin-left: 33.333333%
    }
    .offset-lg-5 {
        margin-left: 41.666667%
    }
    .offset-lg-6 {
        margin-left: 50%
    }
    .offset-lg-7 {
        margin-left: 58.333333%
    }
    .offset-lg-8 {
        margin-left: 66.666667%
    }
    .offset-lg-9 {
        margin-left: 75%
    }
    .offset-lg-10 {
        margin-left: 83.333333%
    }
    .offset-lg-11 {
        margin-left: 91.666667%
    }
}

@media (min-width:1450px) {
    .col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-xl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }
    .col-xl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-xl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
    .col-xl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }
    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-xl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }
    .col-xl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }
    .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-xl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }
    .col-xl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }
    .col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-xl-first {
        order: -1
    }
    .order-xl-last {
        order: 13
    }
    .order-xl-0 {
        order: 0
    }
    .order-xl-1 {
        order: 1
    }
    .order-xl-2 {
        order: 2
    }
    .order-xl-3 {
        order: 3
    }
    .order-xl-4 {
        order: 4
    }
    .order-xl-5 {
        order: 5
    }
    .order-xl-6 {
        order: 6
    }
    .order-xl-7 {
        order: 7
    }
    .order-xl-8 {
        order: 8
    }
    .order-xl-9 {
        order: 9
    }
    .order-xl-10 {
        order: 10
    }
    .order-xl-11 {
        order: 11
    }
    .order-xl-12 {
        order: 12
    }
    .offset-xl-0 {
        margin-left: 0
    }
    .offset-xl-1 {
        margin-left: 8.333333%
    }
    .offset-xl-2 {
        margin-left: 16.666667%
    }
    .offset-xl-3 {
        margin-left: 25%
    }
    .offset-xl-4 {
        margin-left: 33.333333%
    }
    .offset-xl-5 {
        margin-left: 41.666667%
    }
    .offset-xl-6 {
        margin-left: 50%
    }
    .offset-xl-7 {
        margin-left: 58.333333%
    }
    .offset-xl-8 {
        margin-left: 66.666667%
    }
    .offset-xl-9 {
        margin-left: 75%
    }
    .offset-xl-10 {
        margin-left: 83.333333%
    }
    .offset-xl-11 {
        margin-left: 91.666667%
    }
}

.row.gutter-xs {
    margin-right: -8px;
    margin-left: -8px
}

.row.gutter-xs [class^=col-] {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px
}

.row.gutter-sm {
    margin-right: -24px;
    margin-left: -24px
}

.row.gutter-sm [class^=col-] {
    padding-right: 24px;
    padding-left: 24px;
    padding-top: 24px;
    padding-bottom: 24px
}

.d-none {
    display: none !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-table {
    display: table !important
}

.d-table-row {
    display: table-row !important
}

.d-table-cell {
    display: table-cell !important
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

@media (min-width:576px) {
    .d-sm-none {
        display: none !important
    }
    .d-sm-inline {
        display: inline !important
    }
    .d-sm-inline-block {
        display: inline-block !important
    }
    .d-sm-block {
        display: block !important
    }
    .d-sm-table {
        display: table !important
    }
    .d-sm-table-row {
        display: table-row !important
    }
    .d-sm-table-cell {
        display: table-cell !important
    }
    .d-sm-flex {
        display: flex !important
    }
    .d-sm-inline-flex {
        display: inline-flex !important
    }
}

@media (min-width:768px) {
    .d-md-none {
        display: none !important
    }
    .d-md-inline {
        display: inline !important
    }
    .d-md-inline-block {
        display: inline-block !important
    }
    .d-md-block {
        display: block !important
    }
    .d-md-table {
        display: table !important
    }
    .d-md-table-row {
        display: table-row !important
    }
    .d-md-table-cell {
        display: table-cell !important
    }
    .d-md-flex {
        display: flex !important
    }
    .d-md-inline-flex {
        display: inline-flex !important
    }
}

@media (min-width:1024px) {
    .d-lg-none {
        display: none !important
    }
    .d-lg-inline {
        display: inline !important
    }
    .d-lg-inline-block {
        display: inline-block !important
    }
    .d-lg-block {
        display: block !important
    }
    .d-lg-table {
        display: table !important
    }
    .d-lg-table-row {
        display: table-row !important
    }
    .d-lg-table-cell {
        display: table-cell !important
    }
    .d-lg-flex {
        display: flex !important
    }
    .d-lg-inline-flex {
        display: inline-flex !important
    }
}

@media (min-width:1850px) {
	.slider-center {

  bottom: 15%;}
    .d-xl-none {
        display: none !important
    }
    .d-xl-inline {
        display: inline !important
    }
    .d-xl-inline-block {
        display: inline-block !important
    }
    .d-xl-block {
        display: block !important
    }
    .d-xl-table {
        display: table !important
    }
    .d-xl-table-row {
        display: table-row !important
    }
    .d-xl-table-cell {
        display: table-cell !important
    }
    .d-xl-flex {
        display: flex !important
    }
    .d-xl-inline-flex {
        display: inline-flex !important
    }
}

@media print {
    .d-print-none {
        display: none !important
    }
    .d-print-inline {
        display: inline !important
    }
    .d-print-inline-block {
        display: inline-block !important
    }
    .d-print-block {
        display: block !important
    }
    .d-print-table {
        display: table !important
    }
    .d-print-table-row {
        display: table-row !important
    }
    .d-print-table-cell {
        display: table-cell !important
    }
    .d-print-flex {
        display: flex !important
    }
    .d-print-inline-flex {
        display: inline-flex !important
    }
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-row-reverse {
    flex-direction: row-reverse !important
}

.flex-column-reverse {
    flex-direction: column-reverse !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.flex-nowrap {
    flex-wrap: nowrap !important
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-around !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important
}

.align-items-baseline {
    align-items: baseline !important
}

.align-items-stretch {
    align-items: stretch !important
}

.align-content-start {
    align-content: flex-start !important
}

.align-content-end {
    align-content: flex-end !important
}

.align-content-center {
    align-content: center !important
}

.align-content-between {
    align-content: space-between !important
}

.align-content-around {
    align-content: space-around !important
}

.align-content-stretch {
    align-content: stretch !important
}

.align-self-auto {
    align-self: auto !important
}

.align-self-start {
    align-self: flex-start !important
}

.align-self-end {
    align-self: flex-end !important
}

.align-self-center {
    align-self: center !important
}

.align-self-baseline {
    align-self: baseline !important
}

.align-self-stretch {
    align-self: stretch !important
}

@media (min-width:576px) {
    .flex-sm-row {
        flex-direction: row !important
    }
    .flex-sm-column {
        flex-direction: column !important
    }
    .flex-sm-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-sm-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-sm-wrap {
        flex-wrap: wrap !important
    }
    .flex-sm-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-sm-start {
        justify-content: flex-start !important
    }
    .justify-content-sm-end {
        justify-content: flex-end !important
    }
    .justify-content-sm-center {
        justify-content: center !important
    }
    .justify-content-sm-between {
        justify-content: space-between !important
    }
    .justify-content-sm-around {
        justify-content: space-around !important
    }
    .align-items-sm-start {
        align-items: flex-start !important
    }
    .align-items-sm-end {
        align-items: flex-end !important
    }
    .align-items-sm-center {
        align-items: center !important
    }
    .align-items-sm-baseline {
        align-items: baseline !important
    }
    .align-items-sm-stretch {
        align-items: stretch !important
    }
    .align-content-sm-start {
        align-content: flex-start !important
    }
    .align-content-sm-end {
        align-content: flex-end !important
    }
    .align-content-sm-center {
        align-content: center !important
    }
    .align-content-sm-between {
        align-content: space-between !important
    }
    .align-content-sm-around {
        align-content: space-around !important
    }
    .align-content-sm-stretch {
        align-content: stretch !important
    }
    .align-self-sm-auto {
        align-self: auto !important
    }
    .align-self-sm-start {
        align-self: flex-start !important
    }
    .align-self-sm-end {
        align-self: flex-end !important
    }
    .align-self-sm-center {
        align-self: center !important
    }
    .align-self-sm-baseline {
        align-self: baseline !important
    }
    .align-self-sm-stretch {
        align-self: stretch !important
    }
}

@media (min-width:768px) {
    .flex-md-row {
        flex-direction: row !important
    }
    .flex-md-column {
        flex-direction: column !important
    }
    .flex-md-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-md-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-md-wrap {
        flex-wrap: wrap !important
    }
    .flex-md-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-md-start {
        justify-content: flex-start !important
    }
    .justify-content-md-end {
        justify-content: flex-end !important
    }
    .justify-content-md-center {
        justify-content: center !important
    }
    .justify-content-md-between {
        justify-content: space-between !important
    }
    .justify-content-md-around {
        justify-content: space-around !important
    }
    .align-items-md-start {
        align-items: flex-start !important
    }
    .align-items-md-end {
        align-items: flex-end !important
    }
    .align-items-md-center {
        align-items: center !important
    }
    .align-items-md-baseline {
        align-items: baseline !important
    }
    .align-items-md-stretch {
        align-items: stretch !important
    }
    .align-content-md-start {
        align-content: flex-start !important
    }
    .align-content-md-end {
        align-content: flex-end !important
    }
    .align-content-md-center {
        align-content: center !important
    }
    .align-content-md-between {
        align-content: space-between !important
    }
    .align-content-md-around {
        align-content: space-around !important
    }
    .align-content-md-stretch {
        align-content: stretch !important
    }
    .align-self-md-auto {
        align-self: auto !important
    }
    .align-self-md-start {
        align-self: flex-start !important
    }
    .align-self-md-end {
        align-self: flex-end !important
    }
    .align-self-md-center {
        align-self: center !important
    }
    .align-self-md-baseline {
        align-self: baseline !important
    }
    .align-self-md-stretch {
        align-self: stretch !important
    }
}

@media (min-width:1024px) {
    .flex-lg-row {
        flex-direction: row !important
    }
    .flex-lg-column {
        flex-direction: column !important
    }
    .flex-lg-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-lg-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-lg-wrap {
        flex-wrap: wrap !important
    }
    .flex-lg-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-lg-start {
        justify-content: flex-start !important
    }
    .justify-content-lg-end {
        justify-content: flex-end !important
    }
    .justify-content-lg-center {
        justify-content: center !important
    }
    .justify-content-lg-between {
        justify-content: space-between !important
    }
    .justify-content-lg-around {
        justify-content: space-around !important
    }
    .align-items-lg-start {
        align-items: flex-start !important
    }
    .align-items-lg-end {
        align-items: flex-end !important
    }
    .align-items-lg-center {
        align-items: center !important
    }
    .align-items-lg-baseline {
        align-items: baseline !important
    }
    .align-items-lg-stretch {
        align-items: stretch !important
    }
    .align-content-lg-start {
        align-content: flex-start !important
    }
    .align-content-lg-end {
        align-content: flex-end !important
    }
    .align-content-lg-center {
        align-content: center !important
    }
    .align-content-lg-between {
        align-content: space-between !important
    }
    .align-content-lg-around {
        align-content: space-around !important
    }
    .align-content-lg-stretch {
        align-content: stretch !important
    }
    .align-self-lg-auto {
        align-self: auto !important
    }
    .align-self-lg-start {
        align-self: flex-start !important
    }
    .align-self-lg-end {
        align-self: flex-end !important
    }
    .align-self-lg-center {
        align-self: center !important
    }
    .align-self-lg-baseline {
        align-self: baseline !important
    }
    .align-self-lg-stretch {
        align-self: stretch !important
    }
}

@media (min-width:1450px) {
    .flex-xl-row {
        flex-direction: row !important
    }
    .flex-xl-column {
        flex-direction: column !important
    }
    .flex-xl-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-xl-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-xl-wrap {
        flex-wrap: wrap !important
    }
    .flex-xl-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-xl-start {
        justify-content: flex-start !important
    }
    .justify-content-xl-end {
        justify-content: flex-end !important
    }
    .justify-content-xl-center {
        justify-content: center !important
    }
    .justify-content-xl-between {
        justify-content: space-between !important
    }
    .justify-content-xl-around {
        justify-content: space-around !important
    }
    .align-items-xl-start {
        align-items: flex-start !important
    }
    .align-items-xl-end {
        align-items: flex-end !important
    }
    .align-items-xl-center {
        align-items: center !important
    }
    .align-items-xl-baseline {
        align-items: baseline !important
    }
    .align-items-xl-stretch {
        align-items: stretch !important
    }
    .align-content-xl-start {
        align-content: flex-start !important
    }
    .align-content-xl-end {
        align-content: flex-end !important
    }
    .align-content-xl-center {
        align-content: center !important
    }
    .align-content-xl-between {
        align-content: space-between !important
    }
    .align-content-xl-around {
        align-content: space-around !important
    }
    .align-content-xl-stretch {
        align-content: stretch !important
    }
    .align-self-xl-auto {
        align-self: auto !important
    }
    .align-self-xl-start {
        align-self: flex-start !important
    }
    .align-self-xl-end {
        align-self: flex-end !important
    }
    .align-self-xl-center {
        align-self: center !important
    }
    .align-self-xl-baseline {
        align-self: baseline !important
    }
    .align-self-xl-stretch {
        align-self: stretch !important
    }
}

.wrapper {
    width: 100%;
    position: relative
}

.wrapper {
    *zoom: 1
}

.wrapper:after,
.wrapper:before {
    content: "";
    display: table
}

.wrapper:after {
    clear: both
}

.content {
 
}

header.header {
    padding-bottom: 0px;
}

.content-mundo-deportivo {
    margin-top: 40px
}

ol {}

.list-unstyled {
    list-style: none;
    margin-left: 0;
    padding: 0
}

.h1,
.h3,
.h4,
.h5,
.h6,
.h7,
h1,
h2,
h3,
h4,
h5,
h6,
h7 {
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
   font-family: "Roboto", sans-serif;

}
.totto .peufoto{

	margin: 0 auto;
}
.portada{
	
	margin: 0 auto;
	text-align: center;
	width: 100%;
	position: relative;
}
.portada img{
   
    margin:0 auto;
   
    width: 100%;
}
.portada p{

}
.letrs{
	font-family: "DM Serif Display", serif; font-weight: lighter; font-style: italic;
}
.portada .casa{
	margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
	font-weight: bold;
	margin: 0 auto;
	color: white;
	position: absolute;
	bottom: 12%;
	max-width: 1400px;
}
.casa p{
	font-size: 30px;
	margin-bottom: 50px;
}
.portada h3{
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	    text-shadow: 2px 2px 6px black;
	margin: 0 auto;
	max-width: 1000px;
	text-transform: uppercase;
	font-size: 1.5em;
}
.portada .entrada{
	font-family: "DM Serif Display", serif;
	font-size: 1.5em;
}
.video-responsive {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    }
.video-responsive iframe, .video-responsive object, .video-responsive embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    }
.color-1{color: #fcd48c;font-weight: 300; font-size: 28px;}
.h1,
h1 {
    margin-top: 30px;
    font-size: clamp(4.6rem, 2.871rem + 2.04vw, 5.1rem);
   
    font-family: "Roboto", sans-serif;

}
.ralla{
    content: "";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    float: right;
    width: 20px;
    height: 2px;
    background-color: #fcd48c;
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-top: 30px;
    margin-left: 55px;
}
.ralla2{
    content: "";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    float: right;
    width: 20px;
    height: 2px;
    background-color: #fcd48c;
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-top: 40px;
    margin-left: 55px;
}
.no-gutters div div figure{color:white!important;}
.avantitol{margin-bottom: 10px; color: #fcd48c;}
.h2,
h2 {
    font-size: clamp(2rem, 1.714rem + 1.43vw, 2rem);
    margin-bottom: 10px;
  
}

.h3,
h3 {
    font-size: clamp(2.2rem, 1.357rem + 0.71vw, 2rem);
    margin-bottom: 1vw;
    font-weight: bold;
   color: #117585;

   width: 100%;
}

.h4,
h4 {
    font-size: clamp(2rem, 1.357rem + 0.71vw, 1.2rem);
    margin-bottom: 9px; font-weight: bold;font-family: "Roboto", sans-serif; margin-top: 40px;
}

@media (min-width:576px) {
    .h4,
    h4 {
        font-size: 28px;
        margin-bottom: 16px
    }
}

.h5,
h5 {
    font-size: 1.3625rem;
    margin-bottom: 0.68125rem;
 font-family: "DM Serif Display", serif; font-weight: bold;
}

.h6,
h6 {
    font-size: 1.25rem;
    margin-bottom: 0.625rem
}

.h7,
h7 {
    font-size: 0.8rem
}

p {
    margin-bottom: 15px;
    line-height: 1.4em;
}

blockquote {

    display: block;
    position: relative;
    margin: 0;
    font-size: calc(1rem + 0.5vw);
    line-height: 1.2;
    font-family: 'Merriweather', serif;
    font-weight: normal;
    font-style: italic
}

.quote-big {
    border: 0;
    margin: 0;
    padding: 0;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 4px #FF6200 solid
}

.quote-big .title {
    font-family: 'Merriweather', serif;
    font-size: calc(24px + 32 * (100vw - 320px) / 1780)
}

.quote-big p {
    margin-top: 0;
    font-size: 1rem;
    font-style: normal;
    opacity: 0.6
}

cite {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: gray;
    padding-left: 8px
}

.small,
small {
    font-size: 0.7em
}

.big {
    font-size: 1.25em
}

.mark,
mark {
    padding: 0 2px
}

abbr[data-original-title],
abbr[title] {
    cursor: help;
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    position: relative;
    display: inline-block
}

abbr[data-original-title]:active:after,
abbr[data-original-title]:hover:after,
abbr[title]:active:after,
abbr[title]:hover:after {
    content: " (" attr(title) ")";
    position: absolute;
    top: 80%;
    left: 0;
    padding: 4px 8px;
    background: #000;
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.24);
    font-size: 1rem;
    display: block;
    max-width: 280px;
    font-weight: normal
}

summary {
    display: block;
    outline: 0
}

summary::-webkit-details-marker {
    display: none
}

summary:before {
    display: inline-block;
    content: "›";
    margin-right: 8px;
    font-weight: bold;
    transition: all 0.3s ease-in-out
}

summary:hover {
    cursor: pointer
}

details[open] summary {
    transition: all 0.3s ease-in-out
}

details[open] p {
    animation: openDetail 300ms ease
}

details[open] summary:before {
    transform: rotate(90deg)
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 8px 24px
}

.logos {
    display: flex;
    align-items: center
}

.logo-a img {
    width: 120px;
    height: 56px;
    margin-right: 16px
}

@media (min-width:576px) {
    .logo-a img {
        width: 190px
    }
}

.content-lv .logo-a:after {
    content: "";
    margin-right: 16px;
    width: 1px;
    display: inline-block;
    height: 28px;
    vertical-align: middle;
    background: #fff
}

@media (min-width:576px) {
    .content-lv .logo-a:after {
        margin-right: 16px
    }
}

.logo-b img {
    max-height: 24px;
    width: auto
}

@media (min-width:576px) {
    .logo-b img {
        max-height: 40px
    }
    .logo-c img {
        max-height: 42px
    }
}

.social-nav a svg {
    fill: #afb2b7
}

.social-nav a:hover svg {
    fill: rgba(175, 178, 183, 0.5)
}

@media (min-width:1450px) {
    .social-nav {
        border-left: 2px rgba(175, 178, 183, 0.5) solid
    }
    .social-nav a {
        margin-left: 16px
    }
}

.top-nav-button {
    display: inline-block;
    height: 32px;
    width: 32px
}

.top-nav-button svg {
    fill: #afb2b7
}

@media (min-width:1450px) {
    .top-nav-button {
        display: none
    }
}

@media (max-width:1350px) {
    .is-open {
        position: fixed;
        display: block !important;
        top: 60px;
        left: 0;
        width: 100%;
        z-index: 9999
    }
    .verdes2 h3 {
    vertical-align: middle;
    font-family: "DM Serif Display", serif;
    font-size: 1.6em;
    line-height: 1.3em;
}
    .is-open li {
        background-color: #2a344f;
        border-bottom: 1px solid #4d6080
    }
    .is-open li a {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 12px 16px
    }
    .is-open .social-nav {
        display: flex;
        justify-content: center
    }
    .is-open .social-nav a {
        width: auto
    }
}

.nav-collapse {
    display: none
}

@media (min-width:1450px) {
    .nav-collapse {
        display: inline-block
    }
}

.nav-header {
    margin: 0;
    padding: 0
}

@media (min-width:1450px) {
    .nav-header {
        display: flex
    }
}

.nav-header li {
    list-style: none
}

@media (min-width:1450px) {
    .nav-header li {
        margin-left: 24px
    }
}

.header-mundo-deportivo {
    background-color: #000 !important
}

.header-mundo-deportivo .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 16px;
    max-width: 1180px;
    margin: 0 auto;
    position: relative
}

.header-mundo-deportivo .nav-header {
    display: block !important
}

.header-mundo-deportivo .nav-header li {
    margin-left: 0
}

.header-mundo-deportivo .top-nav-button {
    display: inline-block
}

.header-mundo-deportivo .top-nav-button {
    padding-top: 4px
}

.header-mundo-deportivo .logo-a img {
    height: 40px;
    width: auto
}

.header-mundo-deportivo .logo-b img {
    padding: 4px;
    height: 36px
}

@media (max-width:576px) {
    .header-mundo-deportivo .logo-b img {
        padding: 2px;
        height: 36px;
        width: auto
    }
}

.header-mundo-deportivo .nav-collapse {
    width: 320px;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24)
}

.header-mundo-deportivo .nav-collapse li {
    background-color: #fff;
    border-bottom: 1px solid #999;
    display: block
}

.header-mundo-deportivo .nav-collapse li a {
    display: block;
    color: #CF0013;
    text-decoration: none;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    padding: 14px 20px;
    transition: all 0.3s ease-in-out 0s
}

.header-mundo-deportivo .nav-collapse li a:hover {
    background: #CF0013;
    color: #fff
}

.header-mundo-deportivo .is-open {
    display: block !important;
    position: absolute !important;
    top: 40px !important;
    left: auto !important;
    z-index: 9999
}

.footer {
    padding: 40px 0
}

.footer-container {
    display: flex;
    justify-content: center;
    flex-flow: column
}

@media (min-width:768px) {
    .footer-container {
        flex-flow: row;
        justify-content: space-between
    }
}

.footer-container-a,
.footer-container-b {
    text-align: center
}

@media (min-width:768px) {

    .footer-container-a {
        text-align: left
    }
    .footer-container-b {
        text-align: right
    }
}

.footer-mundo-deportivo {
    padding: 0 !important;
    background-color: #fff !important;
    color: #111 !important;
    font-weight: bold
}

.footer-mundo-deportivo a {
    color: #999 !important
}

.footer-mundo-deportivo .footer-mundo-deportivo-top {
    background-color: #000 !important;
    color: #fff
}

.footer-mundo-deportivo .footer-main-menu {
    list-style: none;
    display: block;
    margin: 0;
    padding: 24px 0;
    font-size: 14px;
    line-height: 24px
}

.footer-mundo-deportivo .footer-main-menu li {
    display: inline-block;
    padding: 4px;
    margin-bottom: 5px
}

.footer-mundo-deportivo .footer-main-menu li:after {
    content: "|";
    color: #999 !important
}

.footer-mundo-deportivo .footer-main-menu li:last-child:after {
    content: ""
}

.card {
    transition: all 0.3s ease-in-out
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24); transition: 1s;
}

.card-content {
    padding: 8px 0;
    border-left: 1px lighter(#000, 25%) solid;
    border-right: 1px lighter(#000, 25%) solid;
    border-bottom: 1px lighter(#000, 25%) solid
}

.card-title {
    padding: 8px 16px 0
}

.card-body {
    padding: 0 16px
}

.card-footer {
    padding: 8px 16px
}

.hero {
    width: 100%;
    position: relative;
    z-index: 0
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/bg-sm.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

@media (min-width:576px) {
    .hero-img {
        background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/bg.jpg)
    }
}

.hero-img .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.16);
    background: linear-gradient(269.68deg, rgba(0, 0, 0, 0.3) 56.84%, rgba(0, 0, 0, 0) 87.96%)
}

.hero-img img,
.hero-img video {
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover
}

.hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px 16px;
    z-index: 15;
    color: #fff
}

.header-box {
    position: relative;
    display: block;
    height: auto;
    padding: 16px 24px 0 24px;
    z-index: 1;
    margin: 0 auto
}

@media (min-width:768px) {
    .header-box {
        max-width: 700px
    }

}

.title-main {
    font-size: calc(2rem + 16 * (100vw - 320px) / 1780);
    line-height: 1.2;
    display: block;
    margin-bottom: 40px;
    color: #fff
}

.sub-title {
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0;
    max-width: 768px;
    color: #fff
}

@media (min-width:768px) {
    .sub-title {
        font-size: 1.5rem
    }
}

.hero {
  
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover
}

.border-round {
    border-radius: 12px
}

blockquote {
    font-size: 24px;
    line-height: 1.4
}

@media (min-width:1024px) {
    blockquote {
        font-size: 28px
    }
}

@media (min-width:1024px) {
    .block-blockquote {
        padding: 16px 0px
    }
}

@media (min-width:1024px) {
    .cover-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.full-cover {
    position: relative
}

.full-cover img {
    width: 100%;
    z-index: 1
}

@media (min-width:1024px) {
    .full-cover .block-full-cover {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 532px;
        z-index: 10
    }
}

.test-border img,
.test-border svg {
    width: 100%;
    height: 48px !important
}

.testimonio-title {
    display: flex;
    border-bottom: 1px #000 solid;
    margin-bottom: 24px;
    padding-top: 16px;
    padding-bottom: 24px
}
@media (max-width:990px) {

		.destacat{
	    position: inherit!important;
	    top: inherit!important;
}
.article-default ol li, .article-default ul li {
    font-size: 17px;
    line-height: 22px;
}
    .navmob {
        display: inherit!important;
    }
    .navbar-toggler{display: none!important}

    
    .navbar-expand-lg{display: none!important}
}


@media (max-width:768px) {
	body {
    font-size: 1.2rem;

}
.portada h2 {
    margin-bottom: 20px;
    color: black!important;
    font-size: 1em;
    margin-top: 40px;
    padding: 0px 20px;
    margin-bottom: -10px !important;
}
.image-container {
    display: inherit!important;
    gap: 20px;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 70px;
}
.image-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 0.8sease-out, opacity 0.8sease-out;
}

 .images-container {
            display: inherit!important;
            gap: 2rem;
            margin-top: 4rem;
      
}
 .images-container .image {
                transition: all 0.6s ease;
                width: 100%!important;
                margin-bottom: 30px!important;
                height: 350px;
                border-radius: 20px;
                overflow: hidden;
                position: relative;
         
}
.destacat2{
	    padding-bottom: 30px;
}
    .portada h1 {
        text-shadow: inherit;
        margin-top: 20px !important;
        font-size: 1.8em;
        max-width: 90%;
        margin: 0 auto;
        color: black;
        font-weight: bold;
        margin-bottom: 20px!important;
    }
    .portada h3 {
    margin-top: 30px!important;
    text-shadow: inherit;
    margin: 0 auto;
    max-width: 1000px;
    text-transform: uppercase;
    font-size: 1em;
     color: black;
}
.portada .casa {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
    color: white;
    position: relative;
    bottom: 10px;
}
.nav-item{
	font-size: 16px;
}
.portada .entrada {
    font-size: 1.2em;
}
section {
    & .section-container {
        & .images-container {
            & .image {
                & .image-text {
                    h3 {
                        color: white;
                        font-size: 1.1rem;
                        letter-spacing: 1px;
                    }
                }
            }
        }
    }
}
.container3{
	text-align: center;
}
.card-border {
	margin-bottom: 30px;

    position: relative;
    width: 100%;
    z-index: 9;
    pointer-events: none;
    display: inline-block;
    padding: 30px;


}
.fullp{
	padding-left: 10px;
}
.videoverdes {
    color: white;
    padding-left: 0px !important;
}
.text3 {
    font-size: 1.4rem;
    line-height: 1.5rem;
    z-index: 2;
}
.verdes2 p {
    vertical-align: middle;
    font-family: "Roboto", sans-serif;
    font-size: 1.2em;
    line-height: 1.1em;
    padding-top: 15%;
}
.verdes2 .subtt {
    font-size: 1em;
    padding: inherit;
    padding-left: 40px;
}
.verdes p {
    padding: 40px;
    vertical-align: middle;
    font-family: "DM Serif Display", serif;
    font-size: 1.4em;
    line-height: 1.3em;
    padding-top: 15%;
}
.casa p {
    font-size: 20px;
    margin-bottom: 20px;
    color: white;
}
.verdes2 h3 {

    font-size: 1.5em;
    line-height: 1.1em;
    padding-top: 15%;
}
    .h2, h2 {
        font-size: clamp(1.5rem, 1.714rem + 1.33vw, 1.3rem);
        margin-bottom: 1vw;
        line-height: 34px;
        margin-bottom: 28px !important;
    }
.paral {
    height: 300px;
    background-attachment: inherit;
margin-bottom: 28px!important;}
	.letrai {
  color: #ad3719;
    margin-right: 10px;
    margin-left: 0px;
    margin-top: -15px;
    font-size: 6.5em;
    line-height: 109px;
}
.f-dreta {
    float: inherit;
    margin-right: inherit;
    max-width: 100%;
    margin-top: 25px;
    width: 100%;
}

	.mt-6 {
    margin-top: 28px!important;
}
.destacat p {
    font-family: "DM Serif Display", serif;
    font-size: 1.3em;
    
}

	.mobil{
		display: block;
	}
	.pantalla{
		display: none!important
	}
    .testimonio-title {
        padding-top: 16px
    }
    .slider-center2{
    	top: 64%!important;
    	    width: 75%!important;
    }
    #slide-show {
    height: 90vh;
    min-height: 90vh;}
    .col-lg-6 img{
    	        margin-bottom: -35px;
    }
    .comillas{
    	    margin-top: 30px;
    }
    .videoWrapper {
    padding-bottom: 56.7%!important;}
    .foto-peu embed{
    	height: 350px!important;
    }
    .h3, h3 {
    font-size: clamp(1.7rem, 1.357rem + 0.71vw, 1.2rem);
    margin-bottom: 10px;
}
.mb-8 {
    margin-bottom: 24px!important;
}
    .e9 {
    font-size: 19px!important;
    line-height: 23px;}
    .mb-10 {
    margin-bottom: 20px!important;
}
.mb-6 {
     margin-bottom: 20px!important;
}
    .mb-5 {
    margin-bottom: 20px!important;
}
    .mt-5 {
    margin-top: 15px!important;
}
    .peufoto p {
    	padding-left: 20px;
    font-size: 15px!important;
    line-height: 21px!important;
}
    .nav-link {
  transition: all 0.4s;
  padding: 15px;
  color:#fff;
  opacity: 0.5;
  font-size: 30px; 
  text-decoration: none; 
}
.nav-link:hover {
  color: #fff;
  font-size: 30px;
  opacity: 0.9;
}
.slide-text {
	margin-top: -10px;
  font-size: 16px;
  color: #fff;
  text-align:center;
}
.titolillo {
    font-size: 1rem;
}
.mt-10 {
    margin-top: 10px!important;
}
.mt-12 {
    margin-top: 10px!important;
}
.h4, h4 {
    font-size: clamp(1.6rem, 1.357rem + 0.71vw, 1.2rem);
    margin-bottom: 9px;
    font-weight: bold;
}
.slide-text b {
  font-weight: 400; 
}
.slide-text h3{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	    margin-bottom: 1vw;
}
.slide-text h2 {
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  line-height: 34px;
  margin-bottom: 15px;
}
.slider-center {
  position: absolute;
  height:15%;
  width: 90%;
  left: 50%;
  top: 45%;
  background-color: transparent;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: left;
  letter-spacing: 2px;
}
.logo-b img {
    max-height: 14px;
    width: auto;
}
.h5, h5 {
    font-size: 1.1625rem;
    margin-bottom: 0.68125rem;
    font-family: "Roboto", sans-serif;
}
}

.testimonio-title .figure {
    margin-right: 16px;
    width: 48px
}

@media (min-width:1024px) {
    .testimonio-title .figure {
        width: 64px
    }
}

.testimonio-title-content h3 {
    margin-bottom: 0;
    font-weight: bold
}

.blockquote-testimonio {
    border-bottom: 1px #000 solid;
    border-top: 1px #000 solid;
    padding: 16px 0;
    font-style: normal;
    margin-top: 16px
}

.blockquote-big {
    border: 1px #FF6200 solid;
    border-radius: 12px;
    padding: 24px;
    text-align: center
}

.infografia-content {
    background-image: url(https://brandedcontentgrupogodo.github.io/edicionsclariana/20250714-lacaixa-brl/assets/img/bg-info.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0
}

.infografia-body {
    margin-bottom: 24px
}

@media (min-width:1024px) {
    .infografia-body {
        display: flex;
        margin-bottom: 0
    }
}

.card-container-1 {
    padding-bottom: 36px
}

@media (min-width:768px) {
    .card-container-1 {
        padding-bottom: 0
    }
}

@media (min-width:1024px) {
    .card-container-1 {
        padding-bottom: 0
    }
}

.card-container-2 {
    padding-bottom: 36px
}

@media (min-width:1024px) {
    .card-container-2 {
        padding-top: 160px;
        padding-bottom: 0
    }
}

.card-container-3 {
    padding-bottom: 36px
}

@media (min-width:768px) {
    .card-container-3 {
        padding-bottom: 0
    }
        .mt-11 {
    margin-top: 20px
}
}

@media (min-width:1024px) {
    .card-container-3 {
        padding-top: 320px
    }
}

.card-container-4 {
    padding-bottom: 36px
}

@media (min-width:1024px) {
    .card-container-4 {
        transform: translateY(-60px);
        padding-bottom: 0
    }

}

.card-container-5 {
    padding-bottom: 36px
}

@media (min-width:1024px) {
    .card-container-5 {
        padding-top: 140px;
        padding-bottom: 0
    }
}

.mycard {
    width: 328px;
    height: 328px;
    position: relative;
    -ms-perspective: 800px;
    perspective: 800px;
    margin: 0 auto;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: none
}

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: none;
    outline: none;
    cursor: pointer;
    border: 0
}

.card .back,
.card .front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -o-box-pack: center;
    justify-content: center;
    -o-box-align: center;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: none;
    outline: none
}

.card .back {
    transform: rotateY(180deg)
}

.card.flipped {
    transform: rotateY(180deg);
    backface-visibility: hidden;
    box-shadow: none
}

.front-content {
    box-shadow: none
}

.mycard:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: none
}

.mycard:hover .card {
    box-shadow: none;
    border: 0;
    outline: 0
}

.video_container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.video_container embed,
.video_container iframe,
.video_container object,
.video_container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video_wrapper {
    width: 800px;
    max-width: 100%;
    margin: 0 auto 0 auto
}

.ratio-1-1,
.ratio-16-9,
.ratio-3-2 {
    overflow: hidden;
    height: 0;
    width: 100%;
    position: relative
}

.ratio-1-1 img,
.ratio-1-1 picture,
.ratio-16-9 img,
.ratio-16-9 picture,
.ratio-3-2 img,
.ratio-3-2 picture {
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0
}

.ratio-16-9 {
    padding-top: 56.25%
}

.ratio-3-2 {
    padding-top: 66.66%
}

.ratio-1-1 {
    padding-top: 100%
}

figcaption {
    margin-top: 4px;
    color: #696969;
    font-size: 0.85rem;
    font-style: italic
}

.footer,
.header {
    background: #001c4c;
    color: #afb2b7;
    font-size: 12px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.footer a,
.header a {
    color: #afb2b7;
    text-decoration: none
}

.footer a svg,
.header a svg {
    fill: #afb2b7
}

.footer a:hover,
.header a:hover {
    color: rgba(175, 178, 183, 0.65)
}

.footer a:hover svg,
.header a:hover svg {
    color: rgba(175, 178, 183, 0.65)
}

.separator {
    margin: 10vh auto;
    width: 10%;
    min-width: 100px;
    height: 4px;
    display: block;
    background-color: #FF6200
}

.authorship {
    background: #173973;
    color: #019BF2;
    font-size: 0.7em;
    text-align: center;
    padding: 2px 0
}

.fade {
    opacity: 0;
    transition: opacity 0.15s linear
}

.fade.show {
    opacity: 1
}

.collapse {
    display: none
}

.collapse.show {
    display: block
}

tr.collapse.show {
    display: table-row
}

tbody.collapse.show {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out
}

.text-primary {
    color: #FF6200
}

.text-secondary {
    color: #FFC63D
}

.text-accent {
    color: #FF6200
}

.text-accent-2 {
    color: #FFC63D
}

.text-accent-3 {
    color: #F4F3F2
}

.text-key {
    color: #000
}

.text-white {
    color: #fff
}

.text-gray {
    color: #696969
}

.text-gray-light {
    color: #F4F4F4
}

.bg-primary {
    background: #FF6200
}

.bg-secondary {
    background: #FFC63D
}

.bg-accent {
     background-color: rgb(14 50 99 / 86%);
}

.bg-accent-2 {
    background-color: #b5504b;
}

.bg-accent-3 {
    background-color: rgb(0 157 223 / 25%);
}

.bg-key {
    background: #ad3719;
}

.bg-white {
    background: #fff
}

.bg-gray {
    background: #696969
}

.bg-gray-light {
    background: #F4F4F4
}

.icon-primary {
    fill: #FF6200
}

.icon-secondary {
    fill: #FFC63D
}

.icon-accent {
    fill: #FF6200
}

.icon-accent-2 {
    fill: #FFC63D
}

.icon-accent-3 {
    fill: #F4F3F2
}

.icon-key {
    fill: #000
}

.icon-white {
    fill: #fff
}

.icon-gray {
    fill: #696969
}

.icon-gray-light {
    fill: #F4F4F4
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

@media (min-width:576px) {
    .text-sm-right {
        text-align: right
    }
}

@media (min-width:768px) {
    .text-md-right {
        text-align: right
    }
}

@media (min-width:1024px) {
    .text-lg-right {
        text-align: right
    }
}

.text-serif {
    font-family: Georgia, serif;
    font-style: italic
}

.text-lowercase {
    text-transform: lowercase
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.text-light {
    font-weight: 300
}

.text-normal {
    font-weight: normal
}

.text-bold {
    font-weight: bold
}

.text-italic {
    font-style: italic
}

.clearfix {
    *zoom: 1
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table
}

.clearfix:after {
    clear: both
}

.divralla{margin-top: -50px!important;}
.m-1 {
    margin: 8px
}

.mt-1 {
    margin-top: 8px
}

.mb-1 {
    margin-bottom: 8px
}

.ml-1 {
    margin-left: 8px
}

.mr-1 {
    margin-right: 8px
}

.m-2 {
    margin: 16px
}

.mt-2 {
    margin-top: 16px
}

.mb-2 {
    margin-bottom: 16px
}

.ml-2 {
    margin-left: 16px
}

.mr-2 {
    margin-right: 16px
}

.m-3 {
    margin: 24px
}

.mt-3 {
    margin-top: 24px
}

.mb-3 {
    margin-bottom: 24px
}

.ml-3 {
    margin-left: 24px
}

.mr-3 {
    margin-right: 24px
}

.m-4 {
    margin: 32px
}

.mt-4 {
    margin-top: 32px
}

.mb-4 {
    margin-bottom: 32px
}

.ml-4 {
    margin-left: 32px
}

.mr-4 {
    margin-right: 32px
}

.m-5 {
    margin: 40px
}

.mt-5 {
    margin-top: 40px
}

.mb-5 {
    margin-bottom: 40px
}

.ml-5 {
    margin-left: 40px
}

.mr-5 {
    margin-right: 40px
}

.m-6 {
    margin: 48px
}

.mt-6 {
    margin-top: 48px
}

.mb-6 {
    margin-bottom: 48px
}

.ml-6 {
    margin-left: 48px
}

.mr-6 {
    margin-right: 48px
}

.m-7 {
    margin: 56px
}

.mt-7 {
    margin-top: 56px
}

.mb-7 {
    margin-bottom: 56px
}

.ml-7 {
    margin-left: 56px
}

.mr-7 {
    margin-right: 56px
}

.m-8 {
    margin: 64px
}

.mt-8 {
    margin-top: 64px
}

.mb-8 {
    margin-bottom: 64px
}

.ml-8 {
    margin-left: 64px
}

.mr-8 {
    margin-right: 64px
}

.m-9 {
    margin: 72px
}

.mt-9 {
    margin-top: 72px
}

.mb-9 {
    margin-bottom: 72px
}

.ml-9 {
    margin-left: 72px
}

.mr-9 {
    margin-right: 72px
}

.m-10 {
    margin: 80px
}

.mt-10 {
    margin-top: 80px
}
.mt-11 {
    margin-top: 160px
}
.mt-12 {
    margin-top: 130px
}
.mb-10 {
    margin-bottom: 80px
}

.ml-10 {
    margin-left: 80px
}

.mr-10 {
    margin-right: 80px
}

.p-1 {
    padding: 8px
}

.pt-1 {
    padding-top: 8px
}

.pb-1 {
    padding-bottom: 8px
}

.pl-1 {
    padding-left: 8px
}

.pr-1 {
    padding-right: 8px
}

.p-2 {
    padding: 16px
}

.pt-2 {
    padding-top: 16px
}

.pb-2 {
    padding-bottom: 16px
}

.pl-2 {
    padding-left: 16px
}

.pr-2 {
    padding-right: 16px
}

.p-3 {
    padding: 24px
}

.pt-3 {
    padding-top: 24px
}

.pb-3 {
    padding-bottom: 24px
}

.pl-3 {
    padding-left: 24px
}

.pr-3 {
    padding-right: 24px
}

.p-4 {
    padding: 32px
}

.pt-4 {
    padding-top: 32px
}

.pb-4 {
    padding-bottom: 32px
}

.pl-4 {
    padding-left: 32px
}

.pr-4 {
    padding-right: 32px
}

.p-5 {
    padding: 40px
}

.pt-5 {
    padding-top: 40px
}

.pb-5 {
    padding-bottom: 40px
}

.pl-5 {
    padding-left: 40px
}

.pr-5 {
    padding-right: 40px
}

.p-6 {
    padding: 48px
}

.pt-6 {
    padding-top: 48px
}

.pb-6 {
    padding-bottom: 48px
}

.pl-6 {
    padding-left: 48px
}

.pr-6 {
    padding-right: 48px
}

.p-7 {
    padding: 56px
}

.pt-7 {
    padding-top: 56px
}

.pb-7 {
    padding-bottom: 56px
}

.pl-7 {
    padding-left: 56px
}

.pr-7 {
    padding-right: 56px
}

.p-8 {
    padding: 64px
}

.pt-8 {
    padding-top: 64px
}

.pb-8 {
    padding-bottom: 64px
}

.pl-8 {
    padding-left: 64px
}

.pr-8 {
    padding-right: 64px
}

.p-9 {
    padding: 72px
}

.pt-9 {
    padding-top: 72px
}

.pb-9 {
    padding-bottom: 72px
}

.pl-9 {
    padding-left: 72px
}

.pr-9 {
    padding-right: 72px
}

.p-10 {
    padding: 80px
}

.pt-10 {
    padding-top: 80px
}

.pb-10 {
    padding-bottom: 80px
}

.pl-10 {
    padding-left: 80px
}

.pr-10 {
    padding-right: 80px
}

.float-right {
    float: right
}

.float-left {
    float: left
}

.float-none {
    float: none
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.focusable.sr-only:focus {
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    overflow: auto
}

.link-skipnav {
    background: white;
    border: 0.2em solid #FF6200;
    color: #000;
    font-size: 2em;
    opacity: 0;
    position: fixed;
    transition: opacity 0.15s ease-in;
    white-space: nowrap;
    left: 1em;
    padding: 1em;
    right: 1em;
    text-align: center;
    top: 1em;
    z-index: 10000
}

[role=button] {
    cursor: pointer
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.hinge {
    animation-duration: 2s
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-30px)
    }
    60% {
        transform: translateY(-15px)
    }
}

.bounce {
    animation-name: bounce
}

@keyframes flash {
    0%,
    50%,
    to {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}

.flash {
    animation-name: flash
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
    to {
        transform: scale(1)
    }
}

.pulse {
    animation-name: pulse
}

@keyframes shake {
    0%,
    to {
        transform: translateX(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px)
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px)
    }
}

.shake {
    animation-name: shake
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    to {
        transform: rotate(0deg)
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes tada {
    0% {
        transform: scale(1)
    }
    10%,
    20% {
        transform: scale(0.9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg)
    }
    to {
        transform: scale(1) rotate(0)
    }
}

.tada {
    animation-name: tada
}

@keyframes wobble {
    0% {
        transform: translateX(0%)
    }
    15% {
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        transform: translateX(-5%) rotate(-1deg)
    }
    to {
        transform: translateX(0%)
    }
}

.wobble {
    animation-name: wobble
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3)
    }
    50% {
        opacity: 1;
        transform: scale(1.05)
    }
    70% {
        transform: scale(0.9)
    }
    to {
        transform: scale(1)
    }
}

.bounceIn {
    animation-name: bounceIn
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        transform: translateY(30px)
    }
    80% {
        transform: translateY(-10px)
    }
    to {
        transform: translateY(0)
    }
}

.bounceInDown {
    animation-name: bounceInDown
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        transform: translateX(30px)
    }
    80% {
        transform: translateX(-10px)
    }
    to {
        transform: translateX(0)
    }
}

.bounceInLeft {
    animation-name: bounceInLeft
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        transform: translateX(-30px)
    }
    80% {
        transform: translateX(10px)
    }
    to {
        transform: translateX(0)
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        transform: translateY(-30px)
    }
    80% {
        transform: translateY(10px)
    }
    to {
        transform: translateY(0)
    }
}

.bounceInUp {
    animation-name: bounceInUp
}

@keyframes bounceOut {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(0.95)
    }
    50% {
        opacity: 1;
        transform: scale(1.1)
    }
    to {
        opacity: 0;
        transform: scale(0.3)
    }
}

.bounceOut {
    animation-name: bounceOut
}

@keyframes bounceOutDown {
    0% {
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(-20px)
    }
    to {
        opacity: 0;
        transform: translateY(2000px)
    }
}

.bounceOutDown {
    animation-name: bounceOutDown
}

@keyframes bounceOutLeft {
    0% {
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        transform: translateX(20px)
    }
    to {
        opacity: 0;
        transform: translateX(-2000px)
    }
}

.bounceOutLeft {
    animation-name: bounceOutLeft
}

@keyframes bounceOutRight {
    0% {
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        transform: translateX(-20px)
    }
    to {
        opacity: 0;
        transform: translateX(2000px)
    }
}

.bounceOutRight {
    animation-name: bounceOutRight
}

@keyframes bounceOutUp {
    0% {
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(20px)
    }
    to {
        opacity: 0;
        transform: translateY(-2000px)
    }
}

.bounceOutUp {
    animation-name: bounceOutUp
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInLeftBig {
    animation-name: fadeInLeftBig
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInRightBig {
    animation-name: fadeInRightBig
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(20px)
    }
}

.fadeOutDown {
    animation-name: fadeOutDown
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(2000px)
    }
}

.fadeOutDownBig {
    animation-name: fadeOutDownBig
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    to {
        opacity: 0;
        transform: translateX(-20px)
    }
}

.fadeOutLeft {
    animation-name: fadeOutLeft
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    to {
        opacity: 0;
        transform: translateX(-2000px)
    }
}

.fadeOutLeftBig {
    animation-name: fadeOutLeftBig
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    to {
        opacity: 0;
        transform: translateX(20px)
    }
}

.fadeOutRight {
    animation-name: fadeOutRight
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    to {
        opacity: 0;
        transform: translateX(2000px)
    }
}

.fadeOutRightBig {
    animation-name: fadeOutRightBig
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(-20px)
    }
}

.fadeOutUp {
    animation-name: fadeOutUp
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(-2000px)
    }
}

.fadeOutUpBig {
    animation-name: fadeOutUpBig
}

@keyframes flip {
    0% {
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in
    }
    to {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in
    }
}

.animated.flip {
    backface-visibility: visible;
    animation-name: flip
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        transform: perspective(400px) rotateX(10deg)
    }
    to {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

.flipInX {
    backface-visibility: visible !important;
    animation-name: flipInX
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        transform: perspective(400px) rotateY(10deg)
    }
    to {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1
    }
}

.flipInY {
    backface-visibility: visible !important;
    animation-name: flipInY
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    animation-name: flipOutX;
    backface-visibility: visible !important
}

@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1
    }
    to {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    backface-visibility: visible !important;
    animation-name: flipOutY
}

@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1
    }
    to {
        transform: translateX(0%) skewX(0deg);
        opacity: 1
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@keyframes lightSpeedOut {
    0% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1
    }
    to {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in
}

@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0
    }
    to {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateIn {
    animation-name: rotateIn
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft
}

@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
    to {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight
}

@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }
    to {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft
}

@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight
}

@keyframes rotateOut {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1
    }
    to {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    animation-name: rotateOut
}

@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
    to {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    animation-name: rotateOutDownLeft
}

@keyframes rotateOutDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
    to {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    animation-name: rotateOutDownRight
}

@keyframes rotateOutUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
    to {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    animation-name: rotateOutUpLeft
}

@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
    to {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    animation-name: rotateOutUpRight
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }
    to {
        transform: translateY(0)
    }
}

.slideInDown {
    animation-name: slideInDown
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }
    to {
        transform: translateX(0)
    }
}

.slideInLeft {
    animation-name: slideInLeft
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }
    to {
        transform: translateX(0)
    }
}

.slideInRight {
    animation-name: slideInRight
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0)
    }
    to {
        opacity: 0;
        transform: translateX(-2000px)
    }
}

.slideOutLeft {
    animation-name: slideOutLeft
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0)
    }
    to {
        opacity: 0;
        transform: translateX(2000px)
    }
}

.slideOutRight {
    animation-name: slideOutRight
}

@keyframes slideOutUp {
    0% {
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(-2000px)
    }
}

.slideOutUp {
    animation-name: slideOutUp
}

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    to {
        transform: translateY(700px);
        opacity: 0
    }
}

.hinge {
    animation-name: hinge
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg)
    }
    to {
        opacity: 1;
        transform: translateX(0px) rotate(0deg)
    }
}

.rollIn {
    animation-name: rollIn
}

@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg)
    }
    to {
        opacity: 0;
        transform: translateX(100%) rotate(120deg)
    }
}

.rollOut {
    animation-name: rollOut
}