#energy-storage{max-width: 1100px; width: 100%; margin-left: auto; margin-right: auto;}

#energy-storage .title{font-size: 18px; color: #000; font-weight: 700; font-family: "Titillium Web";}
#energy-storage .title span{font-size: 35px; color: #000000; font-weight: 700; font-family: "Titillium Web";}
#energy-storage .description{font-size: 12px; color: #000000; font-weight: 400; font-family: "Titillium Web"; min-height: 40px;}

#energy-storage .animations-row{display: flex; justify-content: space-between;}
#energy-storage .animations-row .animation-02{width: 690px;}
#energy-storage .animations-row .animation-02 .animation-container{width: 690px; background-image: url('../img/energy_storage/animation-02-bg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
#energy-storage .animations-row .animation-03{width: 338px;}
#energy-storage .animations-row .animation-03 .animation-container{width: 338px; background-image: url('../img/energy_storage/animation-03-bg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}

#energy-storage .animation-container{border-radius: 30px; margin-top: 10px; height: 395px; box-shadow: 0px 5px 20px 2px rgba(207, 207, 207, 1); position: relative;}
#energy-storage .animation-container svg g{transform: scale(0.1);}

#energy-storage .animation-01{margin-bottom: 20px;}
#energy-storage .animation-01 .display-animation{display: none;}
#energy-storage .animation-02 {animation-name: fadeIn; animation-duration: 0.5s;}
#energy-storage .animation-03{animation-name: fadeIn; animation-duration: 0.5s;}

#energy-storage .animation-01 .animation-container{width: 1100px;}
#energy-storage .animation-01 .animation-01-night .animation-container{background-image: url('../img/energy_storage/animation-01-night-bg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
#energy-storage .animation-01 .animation-01-day .animation-container{background-image: url('../img/energy_storage/animation-01-day-bg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}

#energy-storage #a01d1-svg{position: absolute; left: 450px; top: 118px;}
#energy-storage #a01d2-svg{position: absolute; left: 380px; top: 120px;}
#energy-storage #a01d3-svg{position: absolute; left: 475px; top: 65px;}
#energy-storage #a01d4-svg{position: absolute; left: 485px; top: 107px;}

#energy-storage #a01n1-svg{position: absolute; left: 380px; top: 198px;}
#energy-storage #a01n2-svg{position: absolute; left: 477px; top: 334px;}
#energy-storage #a01n3-svg{position: absolute; left: 468px; top: 144px;}

#energy-storage #a02_1-svg{position: absolute; left: 218px; top: 250px;}
#energy-storage #a02_2-svg{position: absolute; left: 294px; top: 348px;}
#energy-storage #a02_3-svg{position: absolute; left: 283px; top: 206px;}

#energy-storage #a03_1-svg{position: absolute; left: 107px; top: 241px;}
#energy-storage #a03_2-svg{position: absolute; left: 125px; top: 337px;}

#energy-storage .battery{width: 37px; height: 60px; background-image: url('../img/energy_storage/battery.png'); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; right: 115px; bottom: 100px; padding-top: 15px;}
#energy-storage .battery .battery-state{width: 26px; height: 8px; background-color: #e2017b; margin-bottom: 2px; margin-bottom: 2px; margin-left: auto; margin-right: auto;}
#energy-storage .battery .battery-state:nth-child(1){animation: batteryCharge4 3s infinite linear}
#energy-storage .battery .battery-state:nth-child(2){animation: batteryCharge3 3s infinite linear}
#energy-storage .battery .battery-state:nth-child(3){animation: batteryCharge2 3s infinite linear}
#energy-storage .battery .battery-state:nth-child(4){animation: batteryCharge1 3s infinite linear}

@keyframes batteryCharge1 { 0% {opacity: 0;} 9%{opacity: 0} 20% {opacity: 1;} 99% {opacity: 1;}}
@keyframes batteryCharge2 { 0% {opacity: 0;} 19%{opacity: 0} 30% {opacity: 1;} 89% {opacity: 1;}}
@keyframes batteryCharge3 { 0% {opacity: 0;} 29%{opacity: 0} 40% {opacity: 1;} 79% {opacity: 1;}}
@keyframes batteryCharge4 { 0% {opacity: 0;} 39%{opacity: 0} 50% {opacity: 1;} 69% {opacity: 1;}}


#energy-storage .animation-01-day .storage-battery-container{width: 40px; height: 3px; position: absolute; left: 432px; top: 271px; transform: rotate(-90deg);}
#energy-storage .animation-01-day .storage-battery{width: 100%; height: 100%; background:#656565;}
#energy-storage .animation-01-day .storage-battery-state{width: 0%; height: 100%; opacity: 0; background: #e2017b; margin-top: -3px; animation: storageCharge 3s infinite}

@keyframes storageCharge { 0% {width: 0%; opacity: 1;} 50%{width: 100%; opacity: 1;} 80%{width: 0; opacity: 0;}}

@keyframes fadeIn {0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; }}

#energy-storage .animation-01-day{display: block; animation-name: fadeIn; animation-duration: 0.5s;}
#energy-storage .animation-01-night{display: block; animation-name: fadeIn; animation-duration: 0.5s;}

#energy-storage .mobile-animation{display: none;}

@media(max-width: 1130px){
    #energy-storage .animation-container{display: none;}
    #energy-storage .mobile-animation{display: block; max-width: 97%; border-radius: 30px; box-shadow: 0px 5px 20px 2px rgba(207, 207, 207, 1); margin-left: auto; margin-right: auto;}

    #energy-storage .animations-row{flex-flow: column;}
    #energy-storage .animations-row .animation-02{width: 100%;}
    #energy-storage .animations-row .animation-03{width: 100%; margin-top: 20px;}

    #energy-storage .title{text-align: center;}
    #energy-storage .description{text-align: center; height: auto; margin-bottom: 15px;}
}