/*:root { --main-color: #EE0033; --background-color-1: #eef5fb; --star-color: #ffc911; }*/ /*:root { --main-color: #F36F21; --background-color-1: #eef5fb; --star-color: #ffc911; }*/ :root { --main-color: #FF3211; --background-color-1: #eef5fb; --star-color: #ffc911; } .arrow { /* position: absolute; top: 0px; right: 25px; transform: translate(-50%,-50%);*/ /*margin-top: 40px;*/ width: 50px; padding-left: 20px; } .arrow span { display: block; width: 15px; height: 15px; border-bottom: 5px solid #06A8FF; border-right: 5px solid #06A8FF; transform: rotate(45deg); margin: -10px; animation: animate 2s infinite; } .arrow span:nth-child(2) { animation-delay: -0.2s; } .arrow span:nth-child(3) { animation-delay: -0.4s; } @keyframes animate { 0% { opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) translate(20px,20px); } } .arrow-rotate { transform: rotate(180deg); right: 30px; } .collapsible { background-color: #fff; color: #FF3211; cursor: pointer !important; padding: 4px 20px !important; width: 100%; border: none; text-align: left; outline: none !important; font-size: 24px; font-weight: bold; font-family: "Nunito", sans-serif; } .collapsible-active, .collapsible:hover { /*background-color: #555;*/ } .collapsible:after { content: url('../img/expand.png'); color: white; font-weight: bold; float: right; margin-left: 5px; position: relative !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; background-color: transparent !important; } .collapsible-active:after { content: url('../img/collapse.png'); position: relative !important; opacity: 1 !important; background-color: transparent !important; } .collapsible-content { font-family: "Nunito", sans-serif; border-bottom: 1px solid #E7E7E7; padding: 0px 18px; max-height: 1px; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #fff; }