animals accordion
GiandoDev
Posted on May 11, 2020
Preview: Animals accordion
We start with html:
<div class="accordion-container">
<div class="accordion" data-theme="baby-shark">
<div class="accordion__header">
<h2>
<button>
<span class="accordion__title">Baby Shark</span>
<div class="accordion__indicator">
<svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
<svg class="indicator__minus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
</div>
</button>
</h2>
</div>
<div class="accordion__content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="256px" height="256px"><path fill="#c7ede6" d="M87.215,56.71C88.35,54.555,89,52.105,89,49.5c0-6.621-4.159-12.257-10.001-14.478 C78.999,35.015,79,35.008,79,35c0-11.598-9.402-21-21-21c-9.784,0-17.981,6.701-20.313,15.757C36.211,29.272,34.638,29,33,29 c-7.692,0-14.023,5.793-14.89,13.252C12.906,43.353,9,47.969,9,53.5C9,59.851,14.149,65,20.5,65c0.177,0,0.352-0.012,0.526-0.022 C21.022,65.153,21,65.324,21,65.5C21,76.822,30.178,86,41.5,86c6.437,0,12.175-2.972,15.934-7.614C59.612,80.611,62.64,82,66,82 c4.65,0,8.674-2.65,10.666-6.518C77.718,75.817,78.837,76,80,76c6.075,0,11-4.925,11-11C91,61.689,89.53,58.727,87.215,56.71z"/><path fill="#fdfcef" d="M30.625,47.625c0,0,3.64,0,6.125,0s4.5-2.015,4.5-4.5c0-2.333-1.782-4.229-4.055-4.455 c0.022-0.181,0.055-0.358,0.055-0.545c0-2.485-2.015-4.5-4.5-4.5c-1.438,0-2.703,0.686-3.527,1.736 c-0.14-2.636-2.302-4.736-4.973-4.736c-2.761,0-5,2.239-5,5c0,0.446,0.077,0.87,0.187,1.282c-0.642-0.777-1.6-1.282-2.687-1.282 c-1.781,0-3.234,1.335-3.455,3.055c-0.181-0.022-0.358-0.055-0.545-0.055c-2.485,0-4.5,2.015-4.5,4.5s2.015,4.5,4.5,4.5 s9.5,0,9.5,0h5.375v0.5h3V47.625z"/><path fill="#472b29" d="M24.25,30.125c-3.033,0-5.5,2.467-5.5,5.5c0,0.016,0,0.031,0,0.047 c-0.602-0.354-1.29-0.547-2-0.547c-1.831,0-3.411,1.261-3.858,3.005c-0.047-0.003-0.094-0.005-0.142-0.005c-2.757,0-5,2.243-5,5 s2.243,5,5,5h14.875c0.276,0,0.5-0.224,0.5-0.5s-0.224-0.5-0.5-0.5H12.75c-2.206,0-4-1.794-4-4s1.794-4,4-4 c0.117,0,0.23,0.017,0.343,0.032l0.141,0.019c0.021,0.003,0.041,0.004,0.062,0.004c0.246,0,0.462-0.185,0.495-0.437 c0.191-1.493,1.463-2.618,2.959-2.618c0.885,0,1.723,0.401,2.301,1.1c0.098,0.118,0.241,0.182,0.386,0.182 c0.078,0,0.156-0.018,0.228-0.056c0.209-0.107,0.314-0.346,0.254-0.573c-0.116-0.436-0.17-0.802-0.17-1.153 c0-2.481,2.019-4.5,4.5-4.5c2.381,0,4.347,1.872,4.474,4.263c0.011,0.208,0.15,0.387,0.349,0.45 c0.05,0.016,0.101,0.024,0.152,0.024c0.15,0,0.296-0.069,0.392-0.192c0.771-0.981,1.913-1.544,3.133-1.544c2.206,0,4,1.794,4,4 c0,0.117-0.017,0.23-0.032,0.343l-0.019,0.141c-0.016,0.134,0.022,0.268,0.106,0.373c0.084,0.105,0.207,0.172,0.34,0.185 c2.055,0.205,3.604,1.906,3.604,3.958c0,2.206-1.794,4-4,4h-6.125c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5h6.125 c2.757,0,5-2.243,5-5c0-2.397-1.689-4.413-4.003-4.877c0.002-0.041,0.003-0.082,0.003-0.123c0-2.757-2.243-5-5-5 c-1.176,0-2.293,0.416-3.183,1.164C28.969,31.885,26.805,30.125,24.25,30.125L24.25,30.125z"/><path fill="#472b29" d="M22.75,37.125c-1.403,0-2.609,0.999-2.913,2.341c-0.367-0.222-0.786-0.341-1.212-0.341 c-1.202,0-2.198,0.897-2.353,2.068c-0.203-0.045-0.396-0.068-0.585-0.068c-1.529,0-2.811,1.2-2.918,2.732 c-0.009,0.138,0.094,0.257,0.232,0.267c0.006,0,0.012,0,0.018,0c0.13,0,0.24-0.101,0.249-0.232 c0.089-1.271,1.151-2.268,2.419-2.268c0.229,0,0.47,0.042,0.738,0.127c0.022,0.007,0.045,0.01,0.067,0.01 c0.055,0,0.11-0.02,0.156-0.054c0.064-0.047,0.102-0.129,0.102-0.209c0-1.034,0.841-1.875,1.875-1.875 c0.447,0,0.885,0.168,1.231,0.473c0.047,0.041,0.106,0.063,0.165,0.063c0.032,0,0.063-0.006,0.093-0.019 c0.088-0.035,0.148-0.117,0.155-0.212c0.102-1.292,1.191-2.305,2.479-2.305c0.208,0,0.425,0.034,0.682,0.107 c0.023,0.007,0.047,0.01,0.07,0.01c0.109,0,0.207-0.073,0.239-0.182c0.038-0.133-0.039-0.271-0.172-0.309 C23.267,37.165,23.006,37.125,22.75,37.125L22.75,37.125z"/><path fill="#472b29" d="M36.633,38.625c-1.326,0-2.508,0.897-2.874,2.182c-0.038,0.133,0.039,0.271,0.172,0.309 c0.023,0.007,0.046,0.01,0.068,0.01c0.109,0,0.209-0.072,0.24-0.182c0.305-1.071,1.289-1.818,2.393-1.818 c0.117,0,0.23,0.014,0.342,0.029c0.012,0.002,0.023,0.003,0.035,0.003c0.121,0,0.229-0.092,0.246-0.217 c0.019-0.137-0.077-0.263-0.214-0.281C36.908,38.641,36.772,38.625,36.633,38.625L36.633,38.625z"/><path fill="#fff" d="M81.405,44H71.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h9.905c0.276,0,0.5,0.224,0.5,0.5 S81.682,44,81.405,44z"/><path fill="#fff" d="M84.5,44h-1c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5 S84.777,44,84.5,44z"/><path fill="#fff" d="M89.491,46H80.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h8.991c0.276,0,0.5,0.224,0.5,0.5 S89.767,46,89.491,46z"/><path fill="#fff" d="M78.5,46h-1c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5 S78.777,46,78.5,46z"/><path fill="#fff" d="M75.5,46h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S75.777,46,75.5,46z"/><path fill="#fff" d="M81.5,48h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S81.776,48,81.5,48z"/><path fill="#fff" d="M84.5,39c-0.177,0-0.823,0-1,0c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5 c0.177,0,0.823,0,1,0c0.276,0,0.5-0.224,0.5-0.5C85,39.224,84.776,39,84.5,39z"/><path fill="#fff" d="M84.5,41c-0.177,0-4.823,0-5,0c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5 c0.177,0,4.823,0,5,0c0.276,0,0.5-0.224,0.5-0.5C85,41.224,84.776,41,84.5,41z"/><path fill="#fff" d="M89.5,43c-0.177,0-2.823,0-3,0c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5 c0.177,0,2.823,0,3,0c0.276,0,0.5-0.224,0.5-0.5C90,43.224,89.776,43,89.5,43z"/><g><path fill="#fff" d="M33.5,78h-10c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h10c0.276,0,0.5,0.224,0.5,0.5 S33.776,78,33.5,78z"/><path fill="#fff" d="M37.5,78h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S37.776,78,37.5,78z"/><path fill="#fff" d="M42.5,80h-10c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h10c0.276,0,0.5,0.224,0.5,0.5 S42.777,80,42.5,80z"/><path fill="#fff" d="M30.5,80h-1c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5 S30.776,80,30.5,80z"/><path fill="#fff" d="M27.375,80H25.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1.875c0.276,0,0.5,0.224,0.5,0.5 S27.651,80,27.375,80z"/><path fill="#fff" d="M36.5,76h-5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h5c0.276,0,0.5,0.224,0.5,0.5 S36.777,76,36.5,76z"/><path fill="#fff" d="M33.5,82h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S33.776,82,33.5,82z"/></g><g><path fill="#fdfcef" d="M65.5,33.5c0,0-1.567,0-3.5,0s-3.5-1.567-3.5-3.5c0-1.781,1.335-3.234,3.055-3.455 C61.527,26.366,61.5,26.187,61.5,26c0-1.933,1.567-3.5,3.5-3.5c1.032,0,1.95,0.455,2.59,1.165c0.384-1.808,1.987-3.165,3.91-3.165 c2.209,0,4,1.791,4,4c0,0.191-0.03,0.374-0.056,0.558C75.872,24.714,76.408,24.5,77,24.5c1.228,0,2.245,0.887,2.455,2.055 C79.634,26.527,79.813,26.5,80,26.5c1.933,0,3.5,1.567,3.5,3.5s-1.567,3.5-3.5,3.5s-7.5,0-7.5,0V34h-7V33.5z"/><path fill="#472b29" d="M63.75,29c0.138,0,0.25-0.112,0.25-0.25c0-1.223-0.995-2.218-2.218-2.218 c-0.034,0.009-0.737-0.001-1.244,0.136c-0.133,0.036-0.212,0.173-0.176,0.306c0.036,0.134,0.173,0.213,0.306,0.176 c0.444-0.12,1.1-0.12,1.113-0.118c0.948,0,1.719,0.771,1.719,1.718C63.5,28.888,63.612,29,63.75,29z"/><circle cx="70.5" cy="33.5" r=".5" fill="#472b29"/><path fill="#472b29" d="M62,34h3.5c0.276,0,0.5-0.224,0.5-0.5S65.776,33,65.5,33H62c-1.654,0-3-1.346-3-3 c0-1.496,1.125-2.768,2.618-2.959c0.134-0.018,0.255-0.088,0.336-0.196s0.115-0.244,0.094-0.377C62.025,26.314,62,26.16,62,26 c0-1.654,1.346-3,3-3c0.85,0,1.638,0.355,2.219,1c0.125,0.139,0.321,0.198,0.5,0.148c0.182-0.049,0.321-0.195,0.36-0.379 C68.42,22.165,69.859,21,71.5,21c1.93,0,3.5,1.57,3.5,3.5c0,0.143-0.021,0.28-0.041,0.418c-0.029,0.203,0.063,0.438,0.242,0.54 c0.179,0.102,0.396,0.118,0.556-0.01C76.122,25.155,76.551,25,77,25c0.966,0,1.792,0.691,1.963,1.644 c0.048,0.267,0.296,0.446,0.569,0.405C79.686,27.025,79.84,27,80,27c1.654,0,3,1.346,3,3s-1.346,3-3,3h-7.5 c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5H80c2.206,0,4-1.794,4-4s-1.794-4-4-4c-0.059,0-0.116,0.002-0.174,0.006 C79.412,24.82,78.289,24,77,24c-0.349,0-0.689,0.061-1.011,0.18C75.824,21.847,73.874,20,71.5,20 c-1.831,0-3.466,1.127-4.153,2.774C66.667,22.276,65.845,22,65,22c-2.206,0-4,1.794-4,4c0,0.048,0.001,0.095,0.004,0.142 C59.261,26.59,58,28.169,58,30C58,32.206,59.794,34,62,34z"/><path fill="#472b29" d="M67.5,33c0.159,0,0.841,0,1,0c0.276,0,0.5,0.224,0.5,0.5c0,0.276-0.224,0.5-0.5,0.5 c-0.159,0-0.841,0-1,0c-0.276,0-0.5-0.224-0.5-0.5C67,33.224,67.224,33,67.5,33z"/></g><g><path fill="#8889b9" d="M34.104,55.657c0,0,0.397,0.268,1.105,0.724c2.305,0.715,5.772,1.002,9.52-1.474 c0,0,5.5,4.5,12.75,0.125c0,0,5.803,3.429,10.734,0.938c-0.044-0.14-0.082-0.272-0.128-0.416 C60.163,31.358,41.266,26.488,34.741,25.52c-1.149-0.171-2.133,0.803-2,1.957C33.85,37.098,34.429,46.801,34.104,55.657z"/><path fill="#472b29" d="M35.942,63.814c-0.212,0-0.408-0.135-0.476-0.347c-0.085-0.263,0.06-0.544,0.322-0.629 c0.3-0.096,0.576-0.2,0.829-0.307c1.19-0.502,1.846-1.059,1.853-1.065c0.211-0.18,0.526-0.156,0.705,0.052 c0.18,0.208,0.158,0.523-0.05,0.704c-0.031,0.027-0.771,0.662-2.119,1.231c-0.278,0.117-0.582,0.232-0.911,0.337 C36.045,63.807,35.993,63.814,35.942,63.814z"/><path fill="#472b29" d="M45.108,64.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.181-0.208,0.496-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.21-0.18,0.525-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C51.647,62.309,49.255,64.345,45.108,64.345z"/><path fill="#472b29" d="M57.729,64.345c-4.146,0-6.538-2.036-6.638-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.982,1.878c3.755,0,5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C64.268,62.309,61.875,64.345,57.729,64.345z"/><path fill="#472b29" d="M70.35,64.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.181-0.208,0.496-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878c0.276,0,0.5,0.224,0.5,0.5 S70.626,64.345,70.35,64.345z"/><path fill="#472b29" d="M29.96,64.067c-0.036,0-0.073-0.004-0.11-0.012c-2.526-0.57-3.94-1.781-4-1.833 c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.495-0.232,0.705-0.052c0.013,0.011,1.3,1.101,3.565,1.613 c0.27,0.061,0.438,0.328,0.377,0.598C30.396,63.909,30.188,64.067,29.96,64.067z"/><path fill="#472b29" d="M32.487,64.345c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c0.822,0,1.632-0.089,2.409-0.263 c0.316-0.071,0.614-0.154,0.894-0.243c0.262-0.084,0.544,0.061,0.629,0.324c0.084,0.263-0.062,0.544-0.324,0.629 c-0.305,0.098-0.632,0.188-0.979,0.266C34.268,64.248,33.383,64.345,32.487,64.345z"/><path fill="#472b29" d="M72.558,64.064c-0.242,0-0.455-0.177-0.493-0.424c-0.042-0.273,0.145-0.528,0.418-0.57 c0.52-0.08,1.479-0.274,1.842-0.454c0.245-0.122,0.547-0.022,0.67,0.226c0.122,0.248,0.021,0.547-0.227,0.67 c-0.619,0.307-1.979,0.522-2.133,0.546C72.609,64.062,72.583,64.064,72.558,64.064z"/><path fill="#472b29" d="M61.274,70.814c-0.051,0-0.103-0.008-0.153-0.024c-0.329-0.106-0.634-0.22-0.911-0.338 c-1.349-0.568-2.088-1.204-2.119-1.231c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.496-0.232,0.705-0.052 c0.007,0.005,0.662,0.563,1.853,1.065c0.252,0.107,0.529,0.211,0.829,0.307c0.263,0.084,0.407,0.366,0.322,0.629 C61.683,70.679,61.486,70.814,61.274,70.814z"/><path fill="#472b29" d="M52.108,71.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C58.647,69.309,56.255,71.345,52.108,71.345z"/><path fill="#472b29" d="M39.487,71.345c-4.147,0-6.538-2.036-6.638-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.496-0.232,0.705-0.052c0.021,0.019,2.228,1.878,5.982,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C46.026,69.309,43.634,71.345,39.487,71.345z"/><path fill="#472b29" d="M67.256,71.067c-0.229,0-0.436-0.158-0.487-0.39c-0.062-0.269,0.107-0.537,0.377-0.598 c2.284-0.516,3.553-1.601,3.565-1.612c0.209-0.181,0.523-0.159,0.706,0.05c0.181,0.208,0.158,0.524-0.05,0.705 c-0.06,0.051-1.475,1.262-4.001,1.832C67.329,71.063,67.292,71.067,67.256,71.067z"/><path fill="#472b29" d="M64.729,71.345c-0.896,0-1.779-0.097-2.627-0.288c-0.349-0.078-0.676-0.169-0.98-0.266 c-0.263-0.084-0.407-0.366-0.322-0.629c0.083-0.263,0.367-0.407,0.629-0.323c0.277,0.089,0.575,0.172,0.893,0.243 c0.777,0.175,1.587,0.264,2.408,0.264c0.276,0,0.5,0.224,0.5,0.5S65.005,71.345,64.729,71.345z"/><path fill="#472b29" d="M51.166,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.525-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C57.705,55.309,55.313,57.345,51.166,57.345z"/><path fill="#472b29" d="M36.019,57.067c-0.036,0-0.073-0.004-0.11-0.012c-2.526-0.57-3.941-1.781-4.001-1.832 c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.495-0.232,0.705-0.052c0.013,0.011,1.301,1.101,3.566,1.613 c0.27,0.061,0.438,0.328,0.377,0.598C36.454,56.909,36.247,57.067,36.019,57.067z"/><path fill="#472b29" d="M41.063,57.069c-0.229,0-0.436-0.158-0.488-0.391c-0.06-0.27,0.109-0.537,0.379-0.597 c0.317-0.071,0.615-0.154,0.893-0.243c0.263-0.084,0.545,0.06,0.629,0.323c0.085,0.263-0.06,0.545-0.322,0.629 c-0.305,0.098-0.632,0.188-0.98,0.267C41.136,57.065,41.1,57.069,41.063,57.069z"/><path fill="#472b29" d="M42,56.814c-0.212,0-0.408-0.135-0.476-0.347c-0.085-0.263,0.06-0.544,0.322-0.629 c0.3-0.096,0.577-0.2,0.829-0.307c1.19-0.502,1.846-1.06,1.853-1.065c0.21-0.18,0.525-0.156,0.705,0.052 c0.18,0.208,0.158,0.523-0.05,0.704c-0.031,0.027-0.771,0.662-2.119,1.231c-0.277,0.117-0.582,0.231-0.911,0.337 C42.103,56.807,42.051,56.814,42,56.814z"/><path fill="#472b29" d="M17,56.814c-0.212,0-0.408-0.135-0.476-0.347c-0.085-0.263,0.06-0.544,0.322-0.629 c0.3-0.096,0.577-0.2,0.829-0.307c1.19-0.502,1.846-1.06,1.853-1.065c0.211-0.18,0.525-0.156,0.705,0.052 c0.18,0.208,0.158,0.523-0.05,0.704c-0.031,0.027-0.771,0.662-2.119,1.231c-0.277,0.117-0.582,0.231-0.911,0.337 C17.103,56.807,17.051,56.814,17,56.814z"/><path fill="#472b29" d="M85.855,56.814c-0.051,0-0.103-0.008-0.153-0.024c-0.329-0.106-0.633-0.22-0.911-0.337 c-1.348-0.568-2.088-1.204-2.119-1.231c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.495-0.232,0.705-0.052 c0.006,0.006,0.663,0.563,1.853,1.065c0.253,0.106,0.529,0.21,0.829,0.307c0.263,0.084,0.407,0.366,0.322,0.629 C86.264,56.679,86.067,56.814,85.855,56.814z"/><g><path fill="#472b29" d="M26.051,57.345c-4.069,0-6.417-2.039-6.516-2.126c-0.206-0.183-0.225-0.498-0.043-0.704 c0.184-0.207,0.497-0.227,0.706-0.045c0.021,0.019,2.181,1.875,5.853,1.875c3.695,0,5.832-1.855,5.853-1.874 c0.207-0.183,0.522-0.165,0.706,0.042c0.184,0.207,0.164,0.523-0.042,0.706C32.469,55.306,30.121,57.345,26.051,57.345z"/></g><g><path fill="#472b29" d="M63.787,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878c3.777,0,5.96-1.859,5.981-1.877 c0.208-0.181,0.524-0.159,0.705,0.049c0.182,0.208,0.159,0.524-0.049,0.705C70.325,55.309,67.935,57.345,63.787,57.345z"/></g><g><path fill="#472b29" d="M76.407,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878c0.276,0,0.5,0.224,0.5,0.5S76.684,57.345,76.407,57.345 z"/></g><g><path fill="#472b29" d="M78.615,57.064c-0.242,0-0.455-0.177-0.493-0.424c-0.042-0.273,0.146-0.528,0.418-0.57 c0.52-0.08,1.479-0.274,1.842-0.454c0.245-0.122,0.546-0.022,0.67,0.226c0.122,0.247,0.021,0.547-0.227,0.67 c-0.618,0.307-1.979,0.523-2.133,0.546C78.667,57.062,78.641,57.064,78.615,57.064z"/></g><g><path fill="#472b29" d="M76.407,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C82.946,55.309,80.554,57.345,76.407,57.345z"/></g><g><path fill="#472b29" d="M67.546,56.217l-0.127-0.411C59.75,32.379,41.939,27.328,34.638,26.244 c-0.327-0.048-0.646,0.055-0.882,0.283c-0.242,0.234-0.359,0.563-0.32,0.901c1.211,10.496,1.671,20.013,1.367,28.287l-1.398-0.051 c0.301-8.204-0.156-17.65-1.359-28.075c-0.089-0.774,0.18-1.528,0.737-2.068c0.552-0.534,1.307-0.774,2.062-0.662 c5.896,0.875,25.771,5.663,33.905,30.51l0.131,0.42L67.546,56.217z"/></g><g><path fill="#472b29" d="M61.052,47.782c-0.17,0-0.336-0.087-0.43-0.245c-0.519-0.872-1.083-1.738-1.676-2.573 c-0.16-0.225-0.107-0.537,0.117-0.697c0.225-0.159,0.537-0.108,0.697,0.118c0.609,0.857,1.188,1.745,1.721,2.641 c0.142,0.237,0.063,0.544-0.174,0.685C61.228,47.76,61.139,47.782,61.052,47.782z"/></g><g><path fill="#472b29" d="M57.714,43.032c-0.145,0-0.287-0.062-0.387-0.182c-2.673-3.252-5.908-6.101-9.617-8.469 c-0.233-0.149-0.302-0.458-0.153-0.691c0.15-0.233,0.461-0.3,0.69-0.152c3.799,2.424,7.113,5.343,9.854,8.677 c0.175,0.213,0.145,0.528-0.069,0.704C57.938,42.995,57.826,43.032,57.714,43.032z"/></g><g><path fill="#472b29" d="M45.229,32.841c-0.081,0-0.162-0.019-0.238-0.06c-3.856-2.086-6.739-2.884-6.768-2.891 c-0.267-0.073-0.424-0.347-0.352-0.614c0.073-0.266,0.346-0.423,0.613-0.351c0.121,0.033,3.015,0.831,6.982,2.977 c0.242,0.131,0.333,0.435,0.201,0.678C45.578,32.746,45.406,32.841,45.229,32.841z"/></g></g></svg>
<p>
<a href="https://en.wikipedia.org/wiki/Baby_Shark">Baby Shark</a> originated from a campfire song or chant.
Some sources have mentioned traditional myths as a basis, others camping origins in the early 20th century.
</p>
</div>
</div>
<div class="accordion" data-theme="snake">
<div class="accordion__header">
<h2>
<button>
<span class="accordion__title">Snake</span>
<div class="accordion__indicator">
<svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
<svg class="indicator__minus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
</div>
</button>
</h2>
</div>
<div class="accordion__content">
<svg height="256px" viewBox="0 0 512 512" width="256px" xmlns="http://www.w3.org/2000/svg">
<path d="M504.1,256c0,137-111.1,248.1-248.1,248.1S7.9,393,7.9,256S119,7.9,256,7.9S504.1,119,504.1,256"
fill="#49A0AE"/>
<path d="M234.6,371.7c0,0-0.5-0.1-1.5-0.4c-1-0.3-2.6-0.7-4.6-1.2c-2-0.5-4.5-1-7.4-1.6c-2.9-0.6-6.1-1.2-9.7-1.7c-1.8-0.2-3.6-0.5-5.5-0.8c-1.9-0.2-3.9-0.5-5.9-0.6c-2-0.1-4.1-0.4-6.2-0.4c-1.1,0-2.1-0.1-3.2-0.1c-1.1,0-2.1,0-3.2,0c-2.2-0.1-4.3,0.2-6.5,0.3c-1.1,0-2.1,0.2-3.2,0.4c-1,0.2-2.2,0.2-3.1,0.5c-1,0.2-2,0.4-3,0.7c-0.5,0.1-2.5,0.7-3.1,0.9c-0.8,0.3-1.7,0.6-2.6,1l-1.3,0.6l-1.1,0.6c-1.4,0.8-2.4,1.7-2.7,1.9c-0.2,0.1-0.1,0-0.2-0.2c-0.1-0.2-0.3-0.4-0.3-0.3c0,0.1,0.1,0.4,0.4,0.8c0.4,0.4,0.8,0.9,1.4,1.3c1.2,0.9,2.9,1.7,4.7,2.3c1.8,0.6,3.7,1.1,5.7,1.4c1,0.2,2,0.3,3,0.4l0.2,0l0,0h-0.1l0.1,0l0.4,0l0.8,0.1c0.6,0,1.1,0.1,1.7,0.1c0.5,0,1.1,0.1,1.6,0.1s1,0,1.4,0c0.9,0,1.9,0.1,2.8,0c1.9,0,3.6-0.1,5.3-0.4c1.7-0.2,3.3-0.6,4.9-0.9c1.7-0.4,3.4-0.9,5.3-1.2c3.8-0.7,7.3-0.3,9.7,0.3c2.4,0.5,4.3,1.1,5.4,1.5c1.2,0.4,1.9,0.6,1.9,0.6c2,0.7,3.1,2.8,2.5,4.9c-0.6,1.9-2.5,2.9-4.4,2.6l-0.2,0c0,0-0.6-0.1-1.7-0.3c-1.1-0.2-2.7-0.5-4.7-0.6c-2-0.1-4.1-0.1-6.3,0.7c-1.1,0.4-2.6,1-4.2,1.6c-1.7,0.7-3.6,1.4-5.7,2c-2.1,0.6-4.3,1.1-6.5,1.4c-1.1,0.2-2.3,0.3-3.5,0.5c-0.6,0.1-1.2,0.1-1.8,0.2c-0.6,0.1-1.1,0.1-1.7,0.1c-0.6,0-1.1,0.1-1.7,0.1l-0.8,0.1l-0.4,0l-0.1,0l-0.3,0H175c-1.3,0-2.5,0.1-3.9,0c-2.6-0.1-5.4-0.3-8.2-0.9c-2.8-0.6-5.8-1.5-8.8-3c-1.5-0.8-3.1-1.8-4.6-3c-1.5-1.3-3-2.9-4.2-5.1c-1.2-2.1-2-4.8-2-7.5c-0.1-2.7,0.6-5.4,1.6-7.5c2-4.3,4.9-7,7.6-9.2l2.1-1.5l2.1-1.3c1.4-0.8,2.7-1.6,4.2-2.3l1.1-0.5l0.9-0.4l0.9-0.4l0.2-0.1l0.1,0l0.1,0c0.1,0-0.2,0.1,0.3-0.1l0.5-0.2c1.4-0.5,2.8-1,4.2-1.6c5.6-1.8,11.1-3,16.3-3.8c1.3-0.2,2.6-0.4,3.9-0.6c1.3-0.1,2.5-0.2,3.8-0.4c2.5-0.3,4.9-0.4,7.3-0.5c2.4-0.1,4.6-0.1,6.8-0.2c2.2,0,4.3,0,6.4,0c4.1,0.1,7.8,0.2,11.1,0.5c3.3,0.2,6.2,0.5,8.5,0.7c2.4,0.2,4.2,0.5,5.5,0.6c1.3,0.2,2,0.3,2,0.3c8.2,1.1,13.9,8.6,12.7,16.8c-1.1,8.1-8.6,13.9-16.8,12.8c-0.6-0.1-1.3-0.2-1.9-0.4L234.6,371.7z"
fill="#8BC53F"/>
<path d="M269.9,289.2L269.9,289.2c-14.5,0-27.2-1.2-37.9-3.2c1.9,3.5,3.3,7.4,3.3,11.8v63.5c0,0-0.4,29.6,34.5,29.6s34.5-29.6,34.5-29.6v-63.5c0-4.7,1.4-8.5,3.1-11.7C296.7,288.1,284.4,289.2,269.9,289.2"
fill="#8BC53F"/>
<path d="M269.9,275.4L269.9,275.4c-12.3,0-22.2-1-31.3-2.7c1.6,3,3.6,6.2,3.6,10v53.8c0,0-2,25.1,27.6,25.1s27.6-25.1,27.6-25.1v-53.8c0-4,2-7.2,3.4-9.9C291.8,274.4,282.2,275.4,269.9,275.4"
fill="#E2DA85"/>
<path d="M282.1 340.4L269.8 329.8 257.5 340.4 257.5 282.1 282.1 282.1z" fill="#BE1E2D"/>
<path d="M348.2,190.5c-15.3-69.8-78.3-69.5-78.3-69.5s-63.5-0.3-78.7,69.5c0,0-22.6,15.9-20,38.9c0,0-6.8,59.8,98.8,59.8c105.6,0,98.6-59.8,98.6-59.8C371,206.4,348.2,190.5,348.2,190.5"
fill="#F6F08E"/>
<path d="M348.2,190.5c-15.3-69.8-78.4-69.5-78.4-69.5s-63.4-0.3-78.7,69.5c0,0-0.2,0.1-0.6,0.4c1.6,4.2,10.7,23.3,43.6,15.9c0,0,17.1-13.9,35.7-13.9c18.7,0,35.5,13.9,35.5,13.9c32.8,7.4,41.7-11.6,43.3-15.9C348.3,190.6,348.2,190.5,348.2,190.5"
fill="#8BC53F"/>
<path d="M252.4 211.2c0 1.5-2.6 2.7-5.8 2.7-3.2 0-5.8-1.2-5.8-2.7 0-1.5 2.6-2.7 5.8-2.7C249.8 208.5 252.4 209.7 252.4 211.2M298.3 211.2c0 1.5-2.6 2.7-5.8 2.7-3.2 0-5.8-1.2-5.8-2.7 0-1.5 2.6-2.7 5.8-2.7C295.7 208.5 298.3 209.7 298.3 211.2"
fill="#5A692F"/>
<path d="M238.7 192.3c0 6.9-5.6 12.4-12.4 12.4-6.9 0-12.4-5.6-12.4-12.4 0-6.9 5.6-12.4 12.4-12.4C233.1 179.9 238.7 185.4 238.7 192.3M325.3 192.3c0 6.9-5.6 12.4-12.4 12.4-6.9 0-12.4-5.6-12.4-12.4 0-6.9 5.6-12.4 12.4-12.4C319.7 179.9 325.3 185.4 325.3 192.3"
fill="#2D1312"/>
<path d="M246.8,125.3c-0.1,1.3-0.1,2.7-0.1,4.1c0,21.5,10.3,38.9,22.9,38.9s22.9-17.4,22.9-38.9c0-1.4,0-2.8-0.1-4.2c-12.8-4.2-22.6-4.1-22.6-4.1S259.8,121,246.8,125.3"
fill="#FDCD0B"/>
</svg>
<p>
<a href="https://en.wikipedia.org/wiki/Snake_charming">Snake charming</a> The earliest evidence for
snake charming comes from ancient Egyptian sources.
</p>
</div>
</div>
<div class="accordion" data-theme="bear">
<div class="accordion__header">
<h2>
<button>
<span class="accordion__title">Bear</span>
<div class="accordion__indicator">
<svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
<svg class="indicator__minus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
</div>
</button>
</h2>
</div>
<div class="accordion__content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="256px" height="256px"><path fill="#a6714e" d="M46.786,21.224L59.479,8.532c1.277-1.277,3.009-1.952,5.008-1.952c2.69,0,5.469,1.235,7.623,3.389 c3.879,3.879,4.523,9.545,1.438,12.631L60.854,35.293L46.786,21.224z"/><path fill="#7a4f34" d="M64.487,7.079c2.559,0,5.209,1.182,7.27,3.243c3.684,3.684,4.328,9.033,1.437,11.924L60.855,34.586 L47.494,21.225L59.833,8.885C61.014,7.704,62.624,7.079,64.487,7.079 M64.487,6.079c-2.041,0-3.949,0.687-5.361,2.099 L46.079,21.225L60.855,36l13.046-13.046c3.286-3.286,2.643-9.258-1.437-13.338C70.138,7.289,67.195,6.079,64.487,6.079 L64.487,6.079z"/><path fill="#a6714e" d="M6.532,22.521C3.446,19.435,4.09,13.768,7.969,9.889C10.122,7.735,12.901,6.5,15.592,6.5 c1.999,0,3.73,0.675,5.008,1.952l12.693,12.693L19.224,35.213L6.532,22.521z"/><path fill="#7a4f34" d="M15.592,7L15.592,7c1.863,0,3.473,0.624,4.654,1.806l12.339,12.339L19.225,34.506L6.885,22.167 c-2.891-2.891-2.247-8.24,1.437-11.924C10.383,8.182,13.033,7,15.592,7 M15.592,6c-2.708,0-5.65,1.209-7.977,3.536 c-4.08,4.08-4.723,10.052-1.437,13.338l13.046,13.046L34,21.145L20.954,8.099C19.541,6.687,17.633,6,15.592,6L15.592,6z"/><path fill="#d6aa70" d="M40,73.5c-21.961,0-36.908-13.769-37.509-15.573C2.5,39.979,11.132,26.481,18.374,18.332 c1.949-2.182,4.258-4.5,5.811-5.832H34c3.417,0,5.121,1.418,5.68,1.884L40,14.65l0.32-0.266C40.88,13.918,42.584,12.5,46,12.5 h9.816c1.554,1.334,3.863,3.651,5.811,5.833C68.868,26.482,77.5,39.98,77.5,58C76.907,59.731,61.961,73.5,40,73.5z"/><path fill="#7a4f34" d="M55.63,13c1.532,1.334,3.745,3.561,5.623,5.664c7.16,8.058,15.69,21.384,15.747,39.157 c-0.519,0.836-4.023,4.508-10.442,8.137C60.876,69.171,51.656,73,40,73s-20.876-3.829-26.557-7.042 C7.023,62.329,3.52,58.657,3,57.821c0.057-17.773,8.587-31.099,15.746-39.155c1.879-2.105,4.092-4.332,5.624-5.666H34 c3.237,0,4.835,1.331,5.36,1.768L40,15.301l0.64-0.533C41.165,14.331,42.763,13,46,13H55.63 M56,12H46c-3.458,0-5.255,1.38-6,2 c-0.745-0.62-2.542-2-6-2H24c-1.574,1.33-3.964,3.72-6,6C10.644,26.278,2,39.733,2,58c0,1.194,14.766,16,38,16s38-14.806,38-16 c0-18.267-8.644-31.722-16-40C59.964,15.72,57.574,13.33,56,12L56,12z"/><path fill="#f5ce85" d="M40,73.5c-3.146,0-6.285-0.293-9.596-0.896C23.311,70.274,18.5,63.594,18.5,56 c0-6.115,5.13-13.5,11.5-13.5h20c6.37,0,11.5,7.385,11.5,13.5c0,7.594-4.811,14.274-11.971,16.621 C46.285,73.207,43.146,73.5,40,73.5z"/><path fill="#7a4f34" d="M50,43c6.093,0,11,7.112,11,13c0,7.355-4.644,13.826-11.562,16.125C46.182,72.714,43.094,73,40,73 s-6.182-0.286-9.438-0.875C23.644,69.826,19,63.355,19,56c0-5.888,4.907-13,11-13h10H50 M50,42H40H30c-6.5,0-12,7.313-12,14 c0,7.727,4.96,14.685,12.315,17.096C33.354,73.649,36.572,74,40,74s6.646-0.351,9.685-0.904C57.04,70.685,62,63.727,62,56 C62,49.313,56.5,42,50,42L50,42z"/><path fill="#36404d" d="M52 28A4 4 0 1 0 52 36A4 4 0 1 0 52 28Z"/><g><path fill="#36404d" d="M28 28A4 4 0 1 0 28 36A4 4 0 1 0 28 28Z"/></g><g><path fill="#805f51" d="M40,53.452c-5.712-2.603-9.876-6.613-11.28-10.836C29.176,42.538,29.598,42.5,30,42.5h20 c0.401,0,0.824,0.038,1.28,0.115C49.877,46.839,45.712,50.848,40,53.452z"/><path fill="#593f33" d="M50,43c0.193,0,0.392,0.01,0.598,0.029c-1.515,3.832-5.376,7.445-10.598,9.872 c-5.222-2.427-9.084-6.04-10.598-9.872C29.608,43.01,29.807,43,30,43h10H50 M50,42H40H30c-0.653,0-1.292,0.092-1.92,0.232 C29.37,46.878,33.909,51.277,40,54c6.091-2.723,10.63-7.122,11.92-11.768C51.292,42.092,50.653,42,50,42L50,42z"/></g><path fill="#7a4f34" d="M43 66L37 66 40 56z"/><path fill="#7a4f34" d="M40 61L32 66 48 66z"/></svg>
<p>
The <a href="https://en.wikipedia.org/wiki/Bear">Bears</a> are carnivoran mammals of the family Ursidae.
They are classified as caniforms, or doglike carnivorans.
</p>
</div>
</div>
<div class="accordion" data-theme="gorilla">
<div class="accordion__header">
<h2>
<button>
<span class="accordion__title">Gorilla</span>
<div class="accordion__indicator">
<svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
<svg class="indicator__minus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
</div>
</button>
</h2>
</div>
<div class="accordion__content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="256px" height="256px"><radialGradient id="364SjgJy2Awt5uCLzbNZXa" cx="7.289" cy="6.356" r="12.648" gradientTransform="matrix(1.0734 0 0 1 10.718 .022)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4f4f4f"/><stop offset=".275" stop-color="#4a4a4a"/><stop offset=".619" stop-color="#3a3a3a"/><stop offset=".998" stop-color="#212121"/><stop offset="1" stop-color="#212121"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXa)" d="M24.401,2c2.27,0,4.4,0.555,6.237,1.526c3.763,1.989,6.308,5.849,7.437,9.998 c2.279,8.381,2.054,10.438,2.5,13.95c0.416,3.278,1.671,7.737-3.729,12.737C35.159,41.772,30.471,46,24.401,46h-0.801 c-6.07,0-10.759-4.228-12.444-5.789c-5.399-5-4.145-9.459-3.729-12.737c0.446-3.511,0.221-5.569,2.5-13.95 c1.128-4.149,3.673-8.009,7.437-9.998C19.2,2.555,21.329,2,23.599,2H24.401z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXb" cx="12.422" cy="24.256" r="14.794" gradientTransform="matrix(1.0734 0 0 1.6169 10.718 -14.94)" gradientUnits="userSpaceOnUse"><stop offset=".017" stop-color="#424242" stop-opacity="0"/><stop offset=".305" stop-color="#3d3d3d" stop-opacity=".293"/><stop offset=".63" stop-color="#303030" stop-opacity=".623"/><stop offset=".972" stop-color="#191919" stop-opacity=".971"/><stop offset="1" stop-color="#171717"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXb)" d="M24.401,2c2.27,0,4.4,0.555,6.237,1.526c3.763,1.989,6.308,5.849,7.437,9.998 c2.279,8.381,2.054,10.438,2.5,13.95c0.416,3.278,1.671,7.737-3.729,12.737C35.159,41.772,30.471,46,24.401,46h-0.801 c-6.07,0-10.759-4.228-12.444-5.789c-5.399-5-4.145-9.459-3.729-12.737c0.446-3.511,0.221-5.569,2.5-13.95 c1.128-4.149,3.673-8.009,7.437-9.998C19.2,2.555,21.329,2,23.599,2H24.401z"/><path fill="#BDBDBD" d="M28.667,16C26,16,25.193,17,24,17s-2-1-4.667-1C16.388,16,14,18.455,14,21.483 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.455,31.612,16,28.667,16z"/><path fill="#BCBCBC" d="M28.667,16.027c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.448-5.333,5.455 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.476,31.612,16.027,28.667,16.027z"/><path fill="#BBB" d="M28.667,16.055c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.442-5.333,5.428 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.497,31.612,16.055,28.667,16.055z"/><path fill="#BABABA" d="M28.667,16.082c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.436-5.333,5.401 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.518,31.612,16.082,28.667,16.082z"/><path fill="#B9B9B9" d="M28.667,16.11c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.43-5.333,5.373 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.539,31.612,16.11,28.667,16.11z"/><path fill="#B8B8B8" d="M28.667,16.137c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.424-5.333,5.346 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.561,31.612,16.137,28.667,16.137z"/><path fill="#B7B7B7" d="M28.667,16.164c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.417-5.333,5.318 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.582,31.612,16.164,28.667,16.164z"/><path fill="#B6B6B6" d="M28.667,16.192c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.411-5.333,5.291 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.603,31.612,16.192,28.667,16.192z"/><path fill="#B5B5B5" d="M28.667,16.219c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.405-5.333,5.264 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.624,31.612,16.219,28.667,16.219z"/><path fill="#B4B4B4" d="M28.667,16.247c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.399-5.333,5.236 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.645,31.612,16.247,28.667,16.247z"/><path fill="#B3B3B3" d="M28.667,16.274c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.392-5.333,5.209 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.666,31.612,16.274,28.667,16.274z"/><path fill="#B2B2B2" d="M28.667,16.301c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.386-5.333,5.181 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.688,31.612,16.301,28.667,16.301z"/><path fill="#B1B1B1" d="M28.667,16.329c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.38-5.333,5.154 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.709,31.612,16.329,28.667,16.329z"/><path fill="#B0B0B0" d="M28.667,16.356c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.374-5.333,5.127 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.73,31.612,16.356,28.667,16.356z"/><path fill="#AFAFAF" d="M28.667,16.384c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.368-5.333,5.099 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.751,31.612,16.384,28.667,16.384z"/><path fill="#AEAEAE" d="M28.667,16.411c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.361-5.333,5.072 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.772,31.612,16.411,28.667,16.411z"/><path fill="#ADADAD" d="M28.667,16.438c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.355-5.333,5.044 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.793,31.612,16.438,28.667,16.438z"/><path fill="#ACACAC" d="M28.667,16.466c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.349-5.333,5.017 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.815,31.612,16.466,28.667,16.466z"/><path fill="#ABABAB" d="M28.667,16.493c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.343-5.333,4.99 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.836,31.612,16.493,28.667,16.493z"/><path fill="#AAA" d="M28.667,16.521c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.336-5.333,4.962 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.857,31.612,16.521,28.667,16.521z"/><path fill="#A9A9A9" d="M28.667,16.548c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.33-5.333,4.935 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.878,31.612,16.548,28.667,16.548z"/><path fill="#A8A8A8" d="M28.667,16.575c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.324-5.333,4.907 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.899,31.612,16.575,28.667,16.575z"/><path fill="#A7A7A7" d="M28.667,16.603c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.318-5.333,4.88 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.92,31.612,16.603,28.667,16.603z"/><path fill="#A6A6A6" d="M28.667,16.63c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.311-5.333,4.853 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.942,31.612,16.63,28.667,16.63z"/><path fill="#A5A5A5" d="M28.667,16.658c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.305-5.333,4.825 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.963,31.612,16.658,28.667,16.658z"/><path fill="#A4A4A4" d="M28.667,16.685c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.299-5.333,4.798 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.984,31.612,16.685,28.667,16.685z"/><path fill="#A3A3A3" d="M28.667,16.712c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.293-5.333,4.771 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.005,31.612,16.712,28.667,16.712z"/><path fill="#A2A2A2" d="M28.667,16.74c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.287-5.333,4.743 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.026,31.612,16.74,28.667,16.74z"/><path fill="#A1A1A1" d="M28.667,16.767c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.28-5.333,4.716 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.047,31.612,16.767,28.667,16.767z"/><path fill="#A0A0A0" d="M28.667,16.795c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.274-5.333,4.688 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.069,31.612,16.795,28.667,16.795z"/><path fill="#9F9F9F" d="M28.667,16.822c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.268-5.333,4.661 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.09,31.612,16.822,28.667,16.822z"/><path fill="#9E9E9E" d="M28.667,16.849c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.262-5.333,4.634 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.111,31.612,16.849,28.667,16.849z"/><path fill="#9D9D9D" d="M28.667,16.877c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.255-5.333,4.606 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.132,31.612,16.877,28.667,16.877z"/><path fill="#9C9C9C" d="M28.667,16.904c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.249-5.333,4.579 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.153,31.612,16.904,28.667,16.904z"/><path fill="#9B9B9B" d="M28.667,16.932c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.243-5.333,4.551 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.174,31.612,16.932,28.667,16.932z"/><path fill="#9A9A9A" d="M28.667,16.959c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.237-5.333,4.524 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.196,31.612,16.959,28.667,16.959z"/><path fill="#999" d="M28.667,16.986c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.23-5.333,4.497 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.217,31.612,16.986,28.667,16.986z"/><path fill="#999" d="M28.667,17.014c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.224-5.333,4.469 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.238,31.612,17.014,28.667,17.014z"/><path fill="#989898" d="M28.667,17.041c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.218-5.333,4.442 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.259,31.612,17.041,28.667,17.041z"/><path fill="#979797" d="M28.667,17.068c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.212-5.333,4.414 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.28,31.612,17.068,28.667,17.068z"/><path fill="#969696" d="M28.667,17.096c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.206-5.333,4.387 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.301,31.612,17.096,28.667,17.096z"/><path fill="#959595" d="M28.667,17.123c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.199-5.333,4.36 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.323,31.612,17.123,28.667,17.123z"/><path fill="#949494" d="M28.667,17.151c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.193-5.333,4.332 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.344,31.612,17.151,28.667,17.151z"/><path fill="#939393" d="M28.667,17.178c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.187-5.333,4.305 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.365,31.612,17.178,28.667,17.178z"/><path fill="#929292" d="M28.667,17.205c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.181-5.333,4.277 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.386,31.612,17.205,28.667,17.205z"/><path fill="#919191" d="M28.667,17.233c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.174-5.333,4.25 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.407,31.612,17.233,28.667,17.233z"/><path fill="#909090" d="M28.667,17.26c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.168-5.333,4.223 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.428,31.612,17.26,28.667,17.26z"/><path fill="#8F8F8F" d="M28.667,17.288c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.162-5.333,4.195 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.45,31.612,17.288,28.667,17.288z"/><path fill="#8E8E8E" d="M28.667,17.315c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.156-5.333,4.168 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.471,31.612,17.315,28.667,17.315z"/><path fill="#8D8D8D" d="M28.667,17.342c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.149-5.333,4.14 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.492,31.612,17.342,28.667,17.342z"/><path fill="#8C8C8C" d="M28.667,17.37c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.143-5.333,4.113 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.513,31.612,17.37,28.667,17.37z"/><path fill="#8B8B8B" d="M28.667,17.397c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.137-5.333,4.086 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.534,31.612,17.397,28.667,17.397z"/><path fill="#8A8A8A" d="M28.667,17.425c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.131-5.333,4.058 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.555,31.612,17.425,28.667,17.425z"/><path fill="#898989" d="M28.667,17.452c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.125-5.333,4.031 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.577,31.612,17.452,28.667,17.452z"/><path fill="#888" d="M28.667,17.479c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.118-5.333,4.003 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.598,31.612,17.479,28.667,17.479z"/><path fill="#878787" d="M28.667,17.507c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.112-5.333,3.976 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.619,31.612,17.507,28.667,17.507z"/><path fill="#868686" d="M28.667,17.534c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.106-5.333,3.949 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.64,31.612,17.534,28.667,17.534z"/><path fill="#858585" d="M28.667,17.562c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.1-5.333,3.921 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.661,31.612,17.562,28.667,17.562z"/><path fill="#848484" d="M28.667,17.589c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.093-5.333,3.894 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.682,31.612,17.589,28.667,17.589z"/><path fill="#838383" d="M28.667,17.616c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.087-5.333,3.866 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.704,31.612,17.616,28.667,17.616z"/><path fill="#828282" d="M28.667,17.644c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.081-5.333,3.839 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.725,31.612,17.644,28.667,17.644z"/><path fill="#818181" d="M28.667,17.671c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.075-5.333,3.812 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.746,31.612,17.671,28.667,17.671z"/><path fill="gray" d="M28.667,17.699c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.069-5.333,3.784 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.767,31.612,17.699,28.667,17.699z"/><path fill="#7F7F7F" d="M28.667,17.726c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.062-5.333,3.757 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.788,31.612,17.726,28.667,17.726z"/><path fill="#7E7E7E" d="M28.667,17.753c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.056-5.333,3.729 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.809,31.612,17.753,28.667,17.753z"/><path fill="#7D7D7D" d="M28.667,17.781c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.05-5.333,3.702 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.831,31.612,17.781,28.667,17.781z"/><path fill="#7C7C7C" d="M28.667,17.808c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.044-5.333,3.675 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.852,31.612,17.808,28.667,17.808z"/><path fill="#7B7B7B" d="M28.667,17.836c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.037-5.333,3.647 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.873,31.612,17.836,28.667,17.836z"/><path fill="#7A7A7A" d="M28.667,17.863c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.031-5.333,3.62 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.894,31.612,17.863,28.667,17.863z"/><path fill="#797979" d="M28.667,17.89c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.025-5.333,3.592 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.915,31.612,17.89,28.667,17.89z"/><path fill="#787878" d="M28.667,17.918c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.019-5.333,3.565 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.936,31.612,17.918,28.667,17.918z"/><path fill="#777" d="M28.667,17.945c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.012-5.333,3.538 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.958,31.612,17.945,28.667,17.945z"/><path fill="#767676" d="M28.667,17.973c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.006-5.333,3.51 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.979,31.612,17.973,28.667,17.973z"/><path fill="#757575" d="M28.667,18C26,18,25.193,19,24,19s-2-1-4.667-1C16.388,18,14,20,14,21.483c0,3.517,3.721,9.595,6.667,9.595 c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,20,31.612,18,28.667,18z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXc" cx="23.952" cy="35.427" r="7.875" gradientTransform="matrix(1 0 0 .9446 0 1.962)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b4b4b4"/><stop offset=".513" stop-color="#b2b2b2"/><stop offset=".698" stop-color="#ababab"/><stop offset=".829" stop-color="#a0a0a0"/><stop offset=".935" stop-color="#8f8f8f"/><stop offset="1" stop-color="gray"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXc)" d="M32,36.404c0-0.684,0.108-2.504-0.374-3.404c-1.298-2.424-2.435-5.88-6.069-7 c-0.914-0.282-2.2-0.282-3.114,0c-3.633,1.12-4.771,4.576-6.069,7C15.892,33.9,16,35.72,16,36.404C16,40.389,19.7,43,24,43 S32,40.389,32,36.404z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXd" cx="23.946" cy="32.801" r="8.907" gradientTransform="matrix(1 0 0 .9185 0 2.674)" gradientUnits="userSpaceOnUse"><stop offset=".776" stop-color="#999"/><stop offset=".872" stop-color="#a1a1a1" stop-opacity=".575"/><stop offset="1" stop-color="#b3b3b3" stop-opacity="0"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXd)" d="M32,36.404C32,36.957,30,41,24,41s-8-4.043-8-4.596c0,0,1.09,2,8,1.491 C30.422,38.404,32,36.404,32,36.404z"/><path fill="#424242" d="M16,36.404c1.16,0.835,2.541,1.152,3.813,1.074c0.632-0.067,1.319-0.23,2.036-0.335 c0.716-0.1,1.437-0.131,2.152-0.144c0.715,0.011,1.436,0.046,2.15,0.14c0.714,0.102,1.406,0.254,2.046,0.331 c1.269,0.105,2.645-0.226,3.803-1.066c-0.843,1.211-2.312,1.934-3.831,1.989c-1.509-0.027-2.779-0.251-4.168-0.203 c-0.685-0.011-1.363,0.016-2.039,0.07c-0.674,0.033-1.365,0.174-2.134,0.139C18.318,38.313,16.852,37.613,16,36.404z"/><path fill="#B4B4B4" d="M27.6,33c0,0,2.4-1.283,2.4-3.476c0-1.691-2.236-3.646-3.6-4.224C25.751,25.025,24.83,25,24,25 c-0.83,0-1.781-0.003-2.4,0.3c-1.338,0.654-3.6,2.533-3.6,4.224C18,31.717,20.4,33,20.4,33"/><radialGradient id="364SjgJy2Awt5uCLzbNZXe" cx="24" cy="32.029" r="6.14" gradientTransform="matrix(1 0 0 1.1641 0 -5.257)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b4b4b4" stop-opacity="0"/><stop offset=".309" stop-color="#b2b2b2" stop-opacity="0"/><stop offset=".44" stop-color="#ababab" stop-opacity="0"/><stop offset=".537" stop-color="#9e9e9e" stop-opacity="0"/><stop offset=".566" stop-color="#999" stop-opacity="0"/><stop offset=".68" stop-color="#929292" stop-opacity=".263"/><stop offset=".85" stop-color="#7d7d7d" stop-opacity=".654"/><stop offset="1" stop-color="#666"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXe)" d="M30,29.52c0,2.2-2.4,3.48-2.4,3.48h-7.2c0,0-2.4-1.28-2.4-3.48c0-1.69,2.268-3.56,3.6-4.22 C22.205,25,23.17,25,24,25s1.664,0,2.4,0.3C27.775,25.86,30,27.83,30,29.52z"/><path fill="#424242" d="M22.746,30.746c0.537-0.537,0.135-1.808-0.402-2.344c-0.537-0.537-1.406-0.537-1.941,0 c-0.537,0.537-0.537,1.406,0,1.941C20.938,30.881,22.21,31.283,22.746,30.746z"/><g><path fill="#212121" d="M31.961,23.737c0-1.628-1.325-2.948-2.96-2.948c-1.635,0-2.96,1.32-2.96,2.948 C26.04,24.158,27.365,25,29,25C30.635,25,31.961,24.158,31.961,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXf" cx="14.012" cy="15.09" r="1.951" gradientTransform="translate(14.638 7.533) scale(1.025)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5d4037"/><stop offset=".356" stop-color="#5b3f36"/><stop offset=".539" stop-color="#533a33"/><stop offset=".683" stop-color="#46332d"/><stop offset=".805" stop-color="#332825"/><stop offset=".914" stop-color="#1b1a1a"/><stop offset=".916" stop-color="#1a1a1a"/></radialGradient><circle cx="29" cy="23" r="2" fill="url(#364SjgJy2Awt5uCLzbNZXf)"/><path fill="#B1B1B1" d="M31.961,23.737c-0.138-0.739-1.494-2.497-2.983-2.497c-1.489,0-2.799,1.758-2.938,2.497 c-0.138-0.741,0.086-1.564,0.632-2.194c0.532-0.638,1.415-1.058,2.328-1.055c0.913-0.002,1.795,0.418,2.327,1.056 C31.873,22.173,32.098,22.995,31.961,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXg" cx="-49.961" cy="19.653" r=".693" gradientTransform="translate(101.114 -5.367) scale(1.4434)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c1911"/><stop offset=".999" stop-color="#171714"/></radialGradient><circle cx="29" cy="23" r="1" fill="url(#364SjgJy2Awt5uCLzbNZXg)"/><ellipse cx="28.605" cy="22.368" fill="#FFF" rx=".372" ry=".376"/></g><g><path fill="#212121" d="M16.039,23.737c0-1.628,1.325-2.948,2.96-2.948c1.635,0,2.96,1.32,2.96,2.948C21.96,24.158,20.635,25,19,25 C17.365,25,16.039,24.158,16.039,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXh" cx="-417.154" cy="15.09" r="1.951" gradientTransform="matrix(-1.025 0 0 1.025 -408.582 7.533)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5d4037"/><stop offset=".356" stop-color="#5b3f36"/><stop offset=".539" stop-color="#533a33"/><stop offset=".683" stop-color="#46332d"/><stop offset=".805" stop-color="#332825"/><stop offset=".914" stop-color="#1b1a1a"/><stop offset=".916" stop-color="#1a1a1a"/></radialGradient><circle cx="19" cy="23" r="2" fill="url(#364SjgJy2Awt5uCLzbNZXh)"/><path fill="#B1B1B1" d="M16.039,23.737c-0.137-0.741,0.087-1.564,0.633-2.193c0.532-0.637,1.414-1.058,2.327-1.056 c0.913-0.003,1.796,0.418,2.328,1.055c0.546,0.629,0.771,1.452,0.632,2.194c-0.139-0.739-1.449-2.497-2.938-2.497 S16.178,22.997,16.039,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXi" cx="-355.049" cy="19.653" r=".693" gradientTransform="matrix(-1.4434 0 0 1.4434 -493.479 -5.367)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c1911"/><stop offset=".999" stop-color="#171714"/></radialGradient><circle cx="19" cy="23" r="1" fill="url(#364SjgJy2Awt5uCLzbNZXi)"/><ellipse cx="18.65" cy="22.368" fill="#FFF" rx=".372" ry=".376"/></g><path fill="#424242" d="M27.597,28.403c-0.537-0.537-1.406-0.537-1.941,0c-0.537,0.535-0.939,1.807-0.402,2.344 c0.537,0.537,1.808,0.135,2.344-0.402C28.134,29.809,28.134,28.938,27.597,28.403z"/></svg>
<p>
<a href="https://en.wikipedia.org/wiki/Beef">Gorillas</a> are ground-dwelling,
predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.
</p>
</div>
</div>
</div>
reset css:
/*******************
Box Sizing
*******************/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/****************************
Generic Margins and Paddings
****************************/
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
margin: 0;
padding: 0;
}
/*******************
Lists
*******************/
ul {
list-style: none;
}
/*******************
Forms and buttons
*******************/
input,
textarea,
select,
button {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
/* I usually expand input and textarea to full-width */
input[type="text"],
textarea {
width: 100%;
}
/* More friendly border */
input,
textarea,
button {
border: 1px solid gray;
}
/* Some defaults for one-liner buttons */
button {
padding: 0.75em 1em;
border-radius: 0;
line-height: 1;
background-color: transparent;
}
button * {
pointer-events: none;
}
/***********************************
Easy responsive for media elements
***********************************/
img,
svg,
iframe,
video,
object,
embed {
display: block;
max-width: 100%;
}
/*******************
Useful table styles
*******************/
table {
table-layout: fixed;
width: 100%;
}
/*******************
The hidden attribute
*******************/
[hidden] {
display: none !important;
}
/*******************
Noscript
*******************/
noscript {
display: block;
margin-bottom: 1em;
margin-top: 1em;
}
/*******************
Focus
*******************/
[tabindex="-1"] {
outline: none !important;
}
normalize css:
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
style css:
:root {
--link-color: #2900b4;
--link-color-dark: #190070;
}
[data-theme="baby-shark"] {
--background-color: #f3ca5f;
--text-color: #3a1e0e;
}
[data-theme="snake"] {
--background-color: #88d28b;
--text-color: #091e0a;
}
[data-theme="bear"] {
--background-color: #f46e6e;
--text-color: #1a0201;
}
[data-theme="gorilla"] {
--background-color: #ac5a30;
--text-color: #170005;
}
html {
font-size: 125%;
font-family: "Nunito", sans-serif;
line-height: 1.4;
}
body {
background-image: linear-gradient(135deg, #88d28b, #ffbfdd);
min-height: 100vh;
padding: 3em;
}
a {
color: var(--link-color);
}
a:hover,
a:active {
color: var(--link-color-dark);
}
.accordion-container {
max-width: 30em;
}
.accordion {
position: relative;
background-color: var(--background-color);
color: var(--text-color);
}
.accordion::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1em;
background-color: rgba(125, 89, 69, 0.6);
content: "";
}
.accordion:first-child {
border-top-left-radius: 1.5em;
border-top-right-radius: 1.5em;
}
.accordion:first-child::before {
border-top-left-radius: 1.5em;
}
.accordion:last-child {
border-bottom-left-radius: 1.5em;
border-bottom-right-radius: 1.5em;
}
.accordion:last-child::before {
border-bottom-left-radius: 1.5em;
}
/**
* START EDITING HERE
* ==================
*/
.accordion.is-open .accordion__content {
display: grid;
}
.accordion__header button {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 1rem);
margin-left: 1rem;
padding: 1.5rem 2rem 1.5rem;
border: 0;
text-align: left;
}
.accordion__title {
font-size: 1.5rem;
text-transform: uppercase;
font-weight: bold;
}
/* Indicators */
.accordion__indicator > * {
width: 1rem;
}
.accordion .indicator__plus {
display: block;
}
.accordion .indicator__minus {
display: none;
}
.accordion.is-open .indicator__minus {
display: block;
}
.accordion.is-open .indicator__plus {
display: none;
}
/* Accordion content */
.accordion__content {
display: none;
grid-template-columns: 7.5em 1fr;
grid-column-gap: 1.5em;
align-items: center;
padding-right: 3em;
padding-bottom: 1.5em;
padding-left: 3em;
}
.accordion__content svg {
width: 10em;
max-width: 100%;
}
@media (max-width: 619px) {
.accordion {
min-width: 300px;
}
.accordion.is-open .accordion__content {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
}
finally JavaScript:
const accordions = Array.from(document.querySelectorAll('.accordion'))
accordions.map(item => {
item.addEventListener('click', evt => {
item.classList.toggle('is-open')
})
})
💖 💪 🙅 🚩
GiandoDev
Posted on May 11, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
