@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,300&display=swap");
/***COUNTDOWN***/
.header {
padding: 8px 0;
box-sizing: border-box; }
.header [data-socialize] {
margin: 0;
display: inline-block;
vertical-align: top; }
.header [data-socialize] .sz {
margin: 0 5px 0 0; } 
.header [data-socialize] .sz:before {
font-size: 20px;
line-height: 1.3em; }
.header .hide_desktop {
display: none; }
.header .container {
display: flex;
justify-content: space-between;
align-items: center; }
.header__logo {
display: block; }
.header__logo img {
max-width: 200px; }
.header__share {
display: flex;
align-items: center; }
.header__share--item {
color: #32474a;
padding-left: 15px; }
.site-footer .logo {
display: inline-block;
width: 120px;
height: 88px;
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-logo-total.png") no-repeat 0 0;
background-size: contain;
font: 0/0 Arial; }
.site-footer .site-footer__links {
display: block;
margin: 40px 0; }
.site-footer .site-footer__links li {
display: inline-block;
margin: 0 15px 0 0; }
.site-footer .site-footer__links li a {
font-size: 14px;
color: #374649;
text-transform: none;
line-height: 22px; }
.site-footer .site-footer__links li a:hover {
text-decoration: underline; }
.site-footer--corpo .wrapper__footer {
padding: 40px 0;
display: grid;
grid-template-columns: 0.7fr 2.5fr 0.8fr;
align-items: center; }
.site-footer--corpo .wrapper__footer a {
text-decoration: none; }
.site-footer--corpo .wrapper__footer i {
background-size: cover;
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px; }
.site-footer--corpo .wrapper__footer .fb {
justify-content: flex-end;
text-align: right; }
.site-footer--corpo .wrapper__footer .fb span {
display: inline-block;
font-size: 15px;
font-weight: bold;
color: #374649; }
.site-footer--corpo .wrapper__footer .fb i {
width: 26px;
height: 26px;
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon-facebook-header.png") no-repeat 0 0; }
.site-footer--corpo .wrapper__footer .twitter i {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon-twitter-header.png") no-repeat 0 0;
width: 26px;
height: 26px; }
.site-footer--corpo .wrapper__footer .instagram i {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-ico-insta.jpg") no-repeat 0 0;
background-size: cover;
width: 26px;
height: 26px; }
.site-footer--corpo .wrapper__footer .site-footer__links {
text-align: center; }
@media screen and (max-width: scut-rem(768)) {
.site-footer.site-footer--corpo .wrapper__footer {
grid-template-columns: 1fr;
justify-items: center; } }
form input, form select {
background: #fff;
border: 1px solid #e8e8e8;
padding: 15px 20px;
display: block;
border-radius: 100px;
color: #374649;
width: 100%;
box-sizing: border-box; }
form .form__item.legal label {
display: block;
font-size: 10px;
line-height: 12px;
color: #374649;
position: relative; }
form .form__item.legal label span.error {
position: absolute;
bottom: -6px;
left: -2px;
font-size: 10px; }
form .form__item.legal label input.error {
border-color: red; }
form .form__item.legal label:first-child {
padding-bottom: 10px; }
form .form__item span.error {
color: red;
padding: 5px 24px 0 24px;
display: block;
font-size: 12px; }
form .form__item input.error,
form .form__item select.error {
border: 2px solid red; }
form :disabled {
background-color: #f9f9f9;
cursor: not-allowed; }
::placeholder {
color: #abb1b2;
font-style: italic; }
button {
cursor: pointer;
border: none; }
input[type="checkbox"] {
width: auto;
display: inline-block;
font-style: 12px;
color: #374649; }
a {
color: #374649;
text-decoration: underline; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
p {
font-size: 18px;
line-height: 24px;
font-weight: 400; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
html {
scroll-behavior: smooth; }
body {
font-size: 14px;
line-height: 18px;
font-weight: 400;
font-family: "Nunito", sans-serif; }
h1, h2, h3, h4 {
font-family: "Nunito", sans-serif; }
h1 {
font-family: nunito, sans-serif;
font-size: 4rem;
letter-spacing: 0px;
line-height: 46px;
text-align: center; }
img {
max-width: 100%;
height: auto; }
strong {
font-weight: 700; }
img {
max-width: 100%;
height: auto; }
.container {
max-width: 1190px;
margin: 0 auto;
box-sizing: border-box; }
.containerbig {
max-width: 90%;
margin: 0 auto;
box-sizing: border-box; }
sup {
font-size: 12px;
position: relative;
top: -5px; }
.btn {
border-radius: 10em;
font-size: 18px;
line-height: 20px;
font-weight: 700;
display: inline-block;
text-align: center;
padding: 4px;
background: #ff8000;
background: -moz-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #ff8000), color-stop(16%, red), color-stop(35%, #ae2294), color-stop(55%, #0071fe), color-stop(72%, #2cc0c0), color-stop(87%, #ffd900), color-stop(100%, gold));
background: -webkit-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: -o-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: -ms-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: linear-gradient(to right, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#ffd700', GradientType=1 );
text-decoration: none; }
.btn.btn-primary {
padding: 15px 45px;
background: #ff0000;
color: #fff; }
.btn.btn-primary:hover {
-webkit-box-shadow: 0 0.5rem 1rem -0.5rem rgba(10, 95, 89, 0.85);
box-shadow: 0 0.5rem 1rem -0.5rem rgba(10, 95, 89, 0.85);
transition: all 0.3s; }
.btn.btn-gradient .btn-white {
background-color: #fff7f8;
border: 1px solid #fff7f8;
border-radius: 10em;
padding: 10px 30px;
display: block; }
.btn.btn-gradient .btn-white .btn-int {
margin: 15px 15px;
background: #ff8000;
background: -moz-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #ff8000), color-stop(16%, red), color-stop(35%, #ae2294), color-stop(55%, #0071fe), color-stop(72%, #2cc0c0), color-stop(87%, #ffd900), color-stop(100%, gold));
background: -webkit-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: -o-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: -ms-linear-gradient(left, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
background: linear-gradient(to right, #ff8000 0%, red 16%, #ae2294 35%, #0071fe 55%, #2cc0c0 72%, #ffd900 87%, gold 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#ffd700', GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
display: block; }
.header {
padding: 10px 0 10px; }
.header .containerbig {
display: flex;
justify-content: space-between;
align-items: center; }
.header__logos {
display: flex;
align-items: center; }
.header__logos .total {
border-right: 1px solid #374649;
padding-right: 60px; }
.header__logos .total img {
width: 110px; }
.header__logos .red {
padding-left: 30px; }
.header__logos .red img {
width: 160px; }
.socials .rrss {
display: flex;
align-items: center;
justify-content: end; }
.socials .rrss li {
padding-left: 15px;
font-size: 15px; }
.hero {
background:;
padding: 60px 0;
position: relative; }
.hero:after, .hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 130px;
width: 100%;
background:;
background-size: contain; }
.hero:before {
top: initial;
transform: rotate(180deg);
bottom: 0; }
.hero__text {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
grid-gap: 90px;
align-items: center;
padding: 80px 0;
margin-bottom: 30px; }
.hero__text .title {
font-size: 40px;
line-height: 44px;
font-weight: 600;
margin-bottom: 15px;
align: center; }
.hero__text .text {
text-align: center;
font-size: 30px;
line-height: 28px;
font-weight: 700;
margin-bottom: 25px;
align: center; }
.hero__text .btn {
font-size: 26px; }
.hero .video {
position: relative;
background-color: #fff7f8;
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ }
.hero .video__overlay {
background: #fff url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/video-bg-navidad-2024.png") no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer; }
.hero .video__overlay .ico_btn_play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
padding: 0;
display: inline-block;
width: 128px;
height: 128px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s; }
.hero .video__overlay .ico_btn_play:hover {
opacity: 0.5; }
.hero .video__overlay .ico_btn_play p {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
background: transparent;
text-align: center;
animation-delay: 0.1s;
animation-duration: 2s;
animation-iteration-count: 1;
position: relative;
z-index: 99; }
.hero .video__overlay .ico_btn_play span {
display: block;
margin: 25px auto 50px;
width: 26px;
height: 30px;
background: url("../images/ico_play.png") no-repeat center;
position: relative;
z-index: 9; }
.hero .video__overlay .ico_btn_play:hover:after {
animation-name: bounce-4;
animation-timing-function: ease; }
.hero .video__overlay .ico_btn_play:hover p {
animation-name: bounce-5;
animation-timing-function: ease; }
.hero .video iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%; }
.hero .video.neg .video__overlay {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/video-bg-navidad-2024.png") no-repeat center center;
background-size: cover; }
.hero .container:last-child {
padding: 0 45px;
margin-bottom: 20px; }
.info .container {
display: grid;
grid-template-columns: 0.3fr 1.7fr;
grid-gap: 50px;
align-items: center;
padding: 30px 60px 10px 60px; }
.help {
padding: 50px 0 0 0; }
.help .container {
position: relative; }
.help__content {
padding: 0 0 0 470px; }
.help__content .subtitle {
font-size: 24px;
line-height: 28px;
font-weight: 700;
background: #0064fb;
/* Old browsers */
background: -moz-linear-gradient(left, #0064fb 0%, #009ef0 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #0064fb 0%, #009ef0 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0064fb 0%, #009ef0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064fb', endColorstr='#009ef0',GradientType=1 );
/* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 35px 0; }
.help__content .info {
font-size: 18px;
line-height: 24px;
font-weight: 400;
margin-bottom: 50px; }
.help__content .info li {
margin-bottom: 25px;
padding: 0 0 0 62px;
position: relative;
min-height: 30px; }
.help__content .info li:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 35px;
height: 35px; }
.help__content .info li:nth-child(1):before {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon1.png") no-repeat;
background-size: cover; }
.help__content .info li:nth-child(2):before {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon2.png") no-repeat;
background-size: cover; }
.help__content .info li:nth-child(3) {
padding-left: 0;
margin: 15px 0 40px 0; }
.help__content .info li span {
font-weight: 700;
font-size: 22px; }
.help__content .info li:nth-child(4), .help__content .info li:nth-child(5), .help__content .info li:nth-child(6) {
font-weight: 700; }
.help__content .info li:nth-child(4):before, .help__content .info li:nth-child(5):before, .help__content .info li:nth-child(6):before {
width: 45px;
height: 45px; }
.help__content .info li:nth-child(4):before {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon3.png") no-repeat;
background-size: cover; }
.help__content .info li:nth-child(5):before {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon4.png") no-repeat;
background-size: cover; }
.help__content .info li:nth-child(6):before {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon5.png") no-repeat;
background-size: cover; }
.help__content .btn {
font-size: 26px; }
.help__title {
text-align: center;
position: relative; }
.help__title .title {
background: #01c8ff;
/* Old browsers */
background: -moz-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: -webkit-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: linear-gradient(to right, #01c8ff 0%, #0383ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01c8ff', endColorstr='#0383ff',GradientType=1 );
color: #fff;
font-size: 24px;
line-height: 20px;
font-weight: 700;
padding: 23px 70px;
border-radius: 100px;
text-align: center;
display: inline-block;
text-transform: uppercase;
margin: 0 auto; }
.help__title .title:before {
content: "";
display: block;
width: 100%;
height: 3px;
background: #01c8ff;
/* Old browsers */
background: -moz-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: -webkit-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: linear-gradient(to right, #01c8ff 0%, #0383ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01c8ff', endColorstr='#0383ff',GradientType=1 );
left: 0;
top: 50%;
position: absolute;
z-index: -1;
opacity: 0.7; }
.help__boat {
width: 350px;
position: absolute;
top: 100px;
left: 50px; }
.counter {
padding: 90px 0 80px 0; }
.counter__title {
text-align: center;
font-size: 30px;
line-height: 28px;
font-weight: 700;
background: #0064fb;
/* Old browsers */
background: -moz-linear-gradient(left, #0064fb 0%, #009ef0 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #0064fb 0%, #009ef0 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0064fb 0%, #009ef0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064fb', endColorstr='#009ef0',GradientType=1 );
/* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 35px 0; }
.counter__title:before, .counter__title:after {
content: '';
width: 120px;
height: 120px;
position: absolute;
transform: translate(0, -50%);
background-repeat: no-repeat; }
.counter__title:after {
top: 50%;
left: 8vw;
background: ;
background-size: cover; }
.counter__title:before {
top: 50%;
right: 8vw;
background: ;
background-size: contain; }
.counter__numbers {
display: grid;
grid-template-columns: 1.5fr 0.5fr;
align-items: center;
grid-gap: 80px;
max-width: 75%;
margin: 0 auto; }
.counter__numbers .counter {
border-radius: 40px;
border: 7px solid #3e4849;
padding: 20px;
display: grid;
align-items: center;
grid-template-columns: repeat(5, 1fr);
text-align: center;
min-height: 240px;
position: relative;
content: ''; }
.counter__numbers .counter:before {
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-border.png") no-repeat;
position: absolute;
content: '';
right: -49px;
top: 50%;
width: 50px;
height: 90px;
background-size: contain;
transform: translate(0, -50%); }
.counter__numbers .counter .number {
background: blue;
color: #fff;
font-size: 120px;
line-height: 120px;
font-weight: 700;
padding: 5px;
margin: 5px;
min-height: 93%;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center; }
.counter__numbers .counter .number:nth-child(1) {
background: #ff7f02;
background: -moz-linear-gradient(left, #ff7f02 0%, #fe1504 100%);
background: -webkit-linear-gradient(left, #ff7f02 0%, #fe1504 100%);
background: linear-gradient(to right, #ff7f02 0%, #fe1504 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f02', endColorstr='#fe1504',GradientType=1 ); }
.counter__numbers .counter .number:nth-child(2) {
background: #01a9ff;
background: -moz-linear-gradient(left, #01a9ff 0%, #4531ff 100%);
background: -webkit-linear-gradient(left, #01a9ff 0%, #4531ff 100%);
background: linear-gradient(to right, #01a9ff 0%, #4531ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aaff', endColorstr='#4531ff',GradientType=1 ); }
.counter__numbers .counter .number:nth-child(3) {
background: #01c8ff;
/* Old browsers */
background: -moz-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: -webkit-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: linear-gradient(to right, #01c8ff 0%, #0383ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01c8ff', endColorstr='#0383ff',GradientType=1 ); }
.counter__numbers .counter .number:nth-child(4) {
background: #77d703;
background: -moz-linear-gradient(left, #77d703 0%, #00c9b5 100%);
background: -webkit-linear-gradient(left, #77d703 0%, #00c9b5 100%);
background: linear-gradient(to right, #77d703 0%, #00c9b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77d703', endColorstr='#00c9b5',GradientType=1 ); }
.counter__numbers .counter .number:nth-child(5) {
background: #cfc53a; }
.counter__numbers .objetive {
font-size: 50px;
line-height: 50px;
font-weight: 700;
background: #0064fb;
/* Old browsers */
background: -moz-linear-gradient(left, #0064fb 0%, #009ef0 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #0064fb 0%, #009ef0 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0064fb 0%, #009ef0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064fb', endColorstr='#009ef0',GradientType=1 );
/* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.counter__numbers .objetive .number {
font-size: 60px;
line-height: 50px;
font-weight: 700; }
.counter__numbers .objetive .small {
font-size: 37px;
line-height: 40px;
font-weight: 700;
display: block; }
.logos {
padding-bottom: 200px;
margin-bottom: 40px;
position: relative; }
.logos:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
height: 130px;
width: 100%;
background: ;
transform: rotate(180deg);
background-size: contain; }
.logos__images {
display: flex;
align-items: center;
justify-content: center; }
.logos__images .total,
.logos__images .red {
padding: 0 20px; }
.logos__images .total {
border-right: 1px solid #4f5c5e;
padding-right: 70px; }
.logos__images .total img {
max-width: 210px; }
.logos__images .red img {
max-width: 290px; }
.logos__subtitle {
font-size: 36px;
line-height: 36px;
font-weight: 700;
color: #ff0000;
text-align: center;
margin: 30px auto; }
.footer .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 0 55px 0; }
.footer__logo {
flex-basis: 20%; }
.footer__logo img {
max-width: 110px;
flex-basis: 20%; }
.footer__menu a {
font-size: 14px;
line-height: 14px;
font-weight: 400;
text-decoration: none;
padding: 0 5px; }
.footer__menu a:hover {
color: #ff0000;
transition: all 0.5s; }
.footer .socials {
flex-basis: 20%; }
.projects__item {
border-radius: 10px;
width: 100%; }
.projects__item .accordion__title {
display: flex;
min-height: 260px; }
.projects__item .image {
flex: 0 1 52%;
background: #01c8ff;
/* Old browsers */
background: -moz-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: -webkit-linear-gradient(left, #01c8ff 0%, #0383ff 100%);
background: linear-gradient(to right, #01c8ff 0%, #0383ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01c8ff', endColorstr='#0383ff',GradientType=1 );
border-radius: 15px 0 0 15px;
position: relative; }
.projects__item .image img {
border-radius: 15px 0 0 15px;
object-fit: cover;
position: absolute;
width: 100%;
height: 100%;
transition: all 0.5s; }
.projects__item .content {
flex: 0 40%;
background: #009bff;
padding: 65px; }
.projects__item .content .title {
font-size: 28px;
line-height: 32px;
font-weight: 700;
color: #fff;
padding-bottom: 25px; }
.projects__item .content .text {
color: #fff;
font-size: 18px;
line-height: 22px;
font-weight: 400; }
.accordion__item {
margin: 0 auto 35px auto; }
.accordion__item .accordion__title {
position: relative;
margin-bottom: 0;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
height: 100%;
cursor: pointer; }
.accordion__item .accordion__title:hover {
background-color: #fff;
transition: all 0.5s ease-out; }
.accordion__item .accordion__title .accordion__arrow {
display: inline-block;
text-align: center;
color: blue;
margin-right: 0;
background-color: #f7f7f8;
border-radius: 50%;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
flex: 0 1 8%;
border-radius: 0 15px 15px 0;
position: relative; }
.accordion__item .accordion__title .accordion__arrow:before {
content: '';
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon_more.png") no-repeat;
width: 32px;
height: 32px;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-out; }
.accordion__item .accordion__title .accordion__arrow:hover {
background-color: #eee; }
.accordion__item .accordion__rotate:before {
content: '';
background: url("https://image.info.totalenergies.es/lib/fe3a117170640475771470/m/1/navidad2023-icon_minus.png") no-repeat !important;
background-size: cover !important;
transition: all 0.5s ease-out; }
.accordion__item .accordion__content {
padding: 30px 70px;
margin-bottom: 2px;
font-size: 18px;
line-height: 22px;
display: none;
background-color: #f7f7f8;
border-radius: 0 0 15px 15px;
color: #374649; }
.accordion__item .accordion__arrow-item {
font-weight: 700; }
.accordion__item .accordion-active {
background-color: #fff; }
.accordion__item .accordion-active .accordion__arrow {
border-radius: 0 15px 0 0;
transition: all 0.5s; }
.accordion__item .accordion-active .image img {
border-radius: 15px 0 0 0;
transition: all 0.5s; }
/*-------------------------------------*/
.scale-up-center {
-webkit-animation: scale-up-center 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0s both;
animation: scale-up-center 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0s both; }
@-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }