File manager - Edit - /home/verseaumee/geniouskin/wp-content/plugins/powerpack-lite-for-elementor/assets/css/widget-interactive-circle.css
Back
.pp-circle-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pp-circle-content-title { color: #61CE70; font-size: 25px; } .pp-interactive-circle-rotate { -webkit-animation: rotation 50s linear infinite; animation: rotation 50s linear infinite; will-change: transform; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotation-reverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotation-reverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .pp-circle-tab-icon { -webkit-transition: all 0.3s; transition: all 0.3s; } .pp-circle-tab-icon svg { -webkit-transition: all 0.3s; transition: all 0.3s; } .pp-interactive-circle-rotate .pp-circle-tab-icon, .pp-interactive-circle-rotate .pp-circle-content { -webkit-animation: rotation-reverse 50s linear infinite; animation: rotation-reverse 50s linear infinite; } .pp-interactive-circle-rotate.pp-pause-rotate:hover, .pp-interactive-circle-rotate.pp-pause-rotate:hover .pp-circle-tab-icon, .pp-interactive-circle-rotate.pp-pause-rotate:hover .pp-circle-content { -webkit-animation-play-state: paused; animation-play-state: paused; } .pp-circle-wrapper .pp-circle-info { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .pp-circle-wrapper .pp-circle-inner { width: 500px; height: 500px; border: 5px solid #f0fafe; border-radius: 50%; } .pp-circle-wrapper .pp-circle-tab { cursor: pointer; -webkit-transition: all 0.2ms; transition: all 0.2ms; } .pp-circle-wrapper .pp-circle-tab-text { font-size: 14px; line-height: 1.5em; -webkit-transition: all 0.3s; transition: all 0.3s; } .pp-circle-wrapper .pp-circle-content * { margin: 0; } .pp-circle-skin-1 .pp-circle-info { margin: 45px 0; } .pp-circle-skin-1 .pp-circle-inner { position: relative; } .pp-circle-skin-1 .pp-circle-tab { background: #fff; border-radius: 50%; -webkit-box-shadow: 0px 5px 40px rgba(100, 176, 196, 0.2); box-shadow: 0px 5px 40px rgba(100, 176, 196, 0.2); display: block; overflow: hidden; position: absolute; top: 50%; left: 50%; width: 85px; height: 85px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9; } .pp-circle-skin-1 .pp-circle-tab-icon { text-align: center; padding: 18px; border-radius: 50%; width: 100%; height: 100%; } .pp-circle-skin-1 .pp-circle-icon-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; } .pp-circle-skin-1 .pp-circle-icon-inner i { color: #7A7A7A; font-size: 22px; } .pp-circle-skin-1 .pp-circle-icon-inner svg { fill: #7A7A7A; width: 16px; min-width: 16px; height: 16px; min-height: 16px; } .pp-circle-skin-1 .pp-circle-tab-text { color: #54595F; } .pp-circle-skin-1 .pp-circle-tab:hover .pp-circle-tab-icon, .pp-circle-skin-1 .pp-circle-tab.active .pp-circle-tab-icon { background: #6EC1E4; } .pp-circle-skin-1 .pp-circle-tab:hover .pp-circle-tab-icon i, .pp-circle-skin-1 .pp-circle-tab.active .pp-circle-tab-icon i, .pp-circle-skin-1 .pp-circle-tab:hover .pp-circle-tab-icon svg, .pp-circle-skin-1 .pp-circle-tab.active .pp-circle-tab-icon svg { color: #fff; fill: #fff; } .pp-circle-skin-1 .pp-circle-tab:hover .pp-circle-tab-text, .pp-circle-skin-1 .pp-circle-tab.active .pp-circle-tab-text { color: #fff; } .pp-circle-skin-1 .pp-circle-tab-content { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; border-radius: 50%; } .pp-circle-skin-1 .pp-circle-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 75px; text-align: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .pp-circle-skin-1 .pp-circle-tab-content.active { visibility: visible; opacity: 1; } .pp-circle-skin-1 .pp-circle-info .pp-circle-tab { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pp-circle-skin-1 .pp-circle-info[data-items="1"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="2"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="3"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="5"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="6"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-1 { top: 0; left: 50%; } .pp-circle-skin-1 .pp-circle-info[data-items="2"] #pp-circle-item-2, .pp-circle-skin-1 .pp-circle-info[data-items="6"] #pp-circle-item-4, .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-5 { top: 100%; left: 50%; } .pp-circle-skin-1 .pp-circle-info[data-items="3"] #pp-circle-item-2, .pp-circle-skin-1 .pp-circle-info[data-items="6"] #pp-circle-item-3 { top: 75%; left: 93%; } .pp-circle-skin-1 .pp-circle-info[data-items="3"] #pp-circle-item-3, .pp-circle-skin-1 .pp-circle-info[data-items="6"] #pp-circle-item-5 { top: 75%; left: 7%; } .pp-circle-skin-1 .pp-circle-info[data-items="4"] #pp-circle-item-1, .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-8 { top: 14.65%; left: 14.65%; } .pp-circle-skin-1 .pp-circle-info[data-items="4"] #pp-circle-item-2, .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-2 { top: 14.65%; left: 85.35%; } .pp-circle-skin-1 .pp-circle-info[data-items="4"] #pp-circle-item-3, .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-4 { top: 85.35%; left: 85.35%; } .pp-circle-skin-1 .pp-circle-info[data-items="4"] #pp-circle-item-4, .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-6 { top: 85.35%; left: 14.65%; } .pp-circle-skin-1 .pp-circle-info[data-items="5"] #pp-circle-item-2 { top: 39%; left: 99%; } .pp-circle-skin-1 .pp-circle-info[data-items="5"] #pp-circle-item-3 { top: 90%; left: 80%; } .pp-circle-skin-1 .pp-circle-info[data-items="5"] #pp-circle-item-4 { top: 90%; left: 20%; } .pp-circle-skin-1 .pp-circle-info[data-items="5"] #pp-circle-item-5 { top: 39%; left: 1%; } .pp-circle-skin-1 .pp-circle-info[data-items="6"] #pp-circle-item-2 { top: 25%; left: 93%; } .pp-circle-skin-1 .pp-circle-info[data-items="6"] #pp-circle-item-6 { top: 25%; left: 7%; } .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-2 { top: 20%; left: 92%; } .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-3 { top: 61%; left: 99%; } .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-4 { top: 95%; left: 72%; } .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-5 { top: 95%; left: 28%; } .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-6 { top: 61%; left: 1%; } .pp-circle-skin-1 .pp-circle-info[data-items="7"] #pp-circle-item-7 { top: 20%; left: 8%; } .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-3 { top: 50%; left: 100%; } .pp-circle-skin-1 .pp-circle-info[data-items="8"] #pp-circle-item-7 { top: 50%; left: 0%; } .pp-circle-skin-2 { margin: 45px 0 0; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-tab-content { border-radius: 500px 500px 0 0; width: calc(100% - 125px); } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-content { margin-top: -30px; } .pp-circle-skin-2 .pp-circle-tab-content { width: calc(100% - 113px); bottom: 6px; } .pp-circle-skin-2 .pp-circle-info { padding: 62.5px 62.5px 0 62.5px; position: relative; } .pp-circle-skin-2 .pp-circle-info .pp-circle-inner { width: 700px; height: 350px; border-radius: 700px 700px 0 0; border: 5px solid #f0fafe; border-bottom: none !important; } .pp-circle-skin-2 .pp-circle-tab { position: absolute; z-index: 99; height: 85px; width: 85px; border-radius: 50%; -webkit-box-shadow: 0px 5px 40px rgba(100, 176, 196, 0.2); box-shadow: 0px 5px 40px rgba(100, 176, 196, 0.2); background: #fff; top: 50%; left: 50%; } .pp-circle-skin-2 .pp-circle-icon-shapes { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-transform-origin: center center; transform-origin: center center; } .pp-circle-skin-2 .pp-circle-tab-icon { padding: 10px; height: 100%; width: 100%; border-radius: 50%; background: #fff; } .pp-circle-skin-2 .pp-circle-tab-icon-inner { width: 100%; height: 100%; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .pp-circle-skin-2 .pp-circle-tab-icon-inner h3 { font-size: 16px; font-weight: 500; line-height: 1.1; margin-bottom: 0; margin-top: 10px; color: #0d0c0e; } .pp-circle-skin-2 .pp-circle-tab-icon-inner i { color: #7A7A7A; font-size: 22px; } .pp-circle-skin-2 .pp-circle-tab-icon-inner svg { width: 35px; min-width: 35px; height: 35px; min-height: 35px; fill: #7A7A7A; } .pp-circle-skin-2 .pp-circle-tab-text { color: #54595f; } .pp-circle-skin-2 .pp-circle-tab:hover .pp-circle-tab-icon, .pp-circle-skin-2 .pp-circle-tab.active .pp-circle-tab-icon { background: #6ec1e4; } .pp-circle-skin-2 .pp-circle-tab:hover .pp-circle-tab-icon i, .pp-circle-skin-2 .pp-circle-tab.active .pp-circle-tab-icon i { color: #fff; } .pp-circle-skin-2 .pp-circle-tab:hover .pp-circle-tab-icon svg, .pp-circle-skin-2 .pp-circle-tab.active .pp-circle-tab-icon svg { fill: #fff; } .pp-circle-skin-2 .pp-circle-tab:hover .pp-circle-tab-text, .pp-circle-skin-2 .pp-circle-tab.active .pp-circle-tab-text { color: #fff; } .pp-circle-skin-2 .pp-circle-tab:hover .pp-circle-icon-inner, .pp-circle-skin-2 .pp-circle-tab.active .pp-circle-icon-inner { background: #f4fff9; } .pp-circle-skin-2 .pp-circle-tab-content { position: absolute; width: calc(100% - 105px); bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; opacity: 0; visibility: hidden; text-align: center; height: 350px; padding: 6px; padding-bottom: 0; } .pp-circle-skin-2 .pp-circle-content { overflow: hidden; border-top-left-radius: 500px; border-top-right-radius: 500px; height: 344px; padding: 0px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .pp-circle-skin-2 .pp-circle-content h2 { font-size: 20px; text-transform: uppercase; font-weight: 500; line-height: 2; color: #202b46; margin-bottom: 0; } .pp-circle-skin-2 .pp-circle-tab-content.active { visibility: visible; opacity: 1; } .pp-circle-skin-2 .pp-circle-inner[data-items] .pp-circle-tab { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pp-circle-skin-2 .pp-circle-inner[data-items="1"] #pp-circle-item-1 { top: 0%; left: 50%; } .pp-circle-skin-2 .pp-circle-inner[data-items="2"] #pp-circle-item-1 { top: 40%; left: 10%; } .pp-circle-skin-2 .pp-circle-inner[data-items="2"] #pp-circle-item-2 { top: 40%; left: 90%; } .pp-circle-skin-2 .pp-circle-inner[data-items="3"] #pp-circle-item-1 { top: 72%; left: 2%; } .pp-circle-skin-2 .pp-circle-inner[data-items="3"] #pp-circle-item-2 { top: 0%; left: 50%; } .pp-circle-skin-2 .pp-circle-inner[data-items="3"] #pp-circle-item-3 { top: 72%; left: 98%; } .pp-circle-skin-2 .pp-circle-inner[data-items="4"] #pp-circle-item-1 { top: 72%; left: 2%; } .pp-circle-skin-2 .pp-circle-inner[data-items="4"] #pp-circle-item-2 { top: 10.6%; left: 27.6%; } .pp-circle-skin-2 .pp-circle-inner[data-items="4"] #pp-circle-item-3 { top: 10.6%; left: 72.4%; } .pp-circle-skin-2 .pp-circle-inner[data-items="4"] #pp-circle-item-4 { top: 72%; left: 98%; } .pp-circle-skin-2 .pp-circle-inner[data-items="5"] #pp-circle-item-1 { top: 72%; left: 2%; } .pp-circle-skin-2 .pp-circle-inner[data-items="5"] #pp-circle-item-2 { top: 20%; left: 20%; } .pp-circle-skin-2 .pp-circle-inner[data-items="5"] #pp-circle-item-3 { top: 0%; left: 50%; } .pp-circle-skin-2 .pp-circle-inner[data-items="5"] #pp-circle-item-4 { top: 20%; left: 80%; } .pp-circle-skin-2 .pp-circle-inner[data-items="5"] #pp-circle-item-5 { top: 72%; left: 98%; } .pp-circle-skin-2 .pp-circle-inner[data-items="6"] #pp-circle-item-1 { top: 72%; left: 2%; } .pp-circle-skin-2 .pp-circle-inner[data-items="6"] #pp-circle-item-2 { top: 28.4%; left: 15%; } .pp-circle-skin-2 .pp-circle-inner[data-items="6"] #pp-circle-item-3 { top: 3.6%; left: 36.6%; } .pp-circle-skin-2 .pp-circle-inner[data-items="6"] #pp-circle-item-4 { top: 3.6%; left: 63.4%; } .pp-circle-skin-2 .pp-circle-inner[data-items="6"] #pp-circle-item-5 { top: 28.4%; left: 85%; } .pp-circle-skin-2 .pp-circle-inner[data-items="6"] #pp-circle-item-6 { top: 72%; left: 98%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-1 { top: 72%; left: 2%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-2 { top: 37.5%; left: 11%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-3 { top: 10.9%; left: 27.3%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-4 { top: 0%; left: 50%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-5 { top: 10.9%; left: 72.7%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-6 { top: 37.5%; left: 89%; } .pp-circle-skin-2 .pp-circle-inner[data-items="7"] #pp-circle-item-7 { top: 72%; left: 98%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-1 { top: 72%; left: 2%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-2 { top: 40%; left: 10%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-3 { top: 16%; left: 22.9%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-4 { top: 1.9%; left: 40.6%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-5 { top: 1.9%; left: 59.4%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-6 { top: 16%; left: 77.1%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-7 { top: 40%; left: 90%; } .pp-circle-skin-2 .pp-circle-inner[data-items="8"] #pp-circle-item-8 { top: 72%; left: 98%; } .pp-circle-skin-3 .pp-circle-info { padding: 72.5px; position: relative; } .pp-circle-skin-3 .pp-circle-inner { width: 400px; height: 400px; } .pp-circle-skin-3 .pp-circle-tab { position: absolute; z-index: 99; height: 100px; width: 100px; border-radius: 50%; } .pp-circle-skin-3 .pp-circle-icon-shapes { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-transform-origin: center center; transform-origin: center center; } .pp-circle-skin-3 .pp-circle-tab .pp-shape-1 { position: absolute; left: 50%; top: 50%; background: #f0fafe; height: 5px; width: 72.5px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .pp-circle-skin-3 .pp-circle-tab .pp-shape-2 { position: absolute; left: calc(50% + 72.5px + 3px); top: 50%; border-radius: 50%; background: #f0fafe; height: 20px; width: 20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pp-circle-skin-3 .pp-circle-tab .pp-circle-tab-icon { border: 10px solid #07a9f0; border-radius: 50%; height: 100%; width: 100%; } .pp-circle-skin-3 .pp-circle-icon-inner { background: #fff; width: 100%; height: 100%; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .pp-circle-skin-3 .pp-circle-icon-inner img, .pp-circle-skin-3 .pp-circle-icon-inner svg { width: 35px; } .pp-circle-skin-3 .pp-circle-icon-inner h3 { font-size: 16px; font-weight: 500; line-height: 1.1; margin-bottom: 0; margin-top: 10px; color: #0d0c0e; } .pp-circle-skin-3 .pp-circle-tab.active .pp-circle-icon-inner { background: #f4fff9; } .pp-circle-skin-3 .pp-circle-tab-content { position: absolute; top: 72.5px; bottom: 72.5px; left: 72.5px; right: 72.5px; display: block; opacity: 0; visibility: hidden; padding: 50px; } .pp-circle-skin-3 .pp-circle-item .pp-circle-content { border-radius: 50%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 100%; padding: 10px; border-radius: 50%; background: #fff; -webkit-box-shadow: 0px 5px 40px rgba(100, 176, 196, 0.2); box-shadow: 0px 5px 40px rgba(100, 176, 196, 0.2); } .pp-circle-skin-3 .pp-circle-content h2 { font-size: 30px; text-transform: uppercase; font-weight: 500; line-height: 2; color: #202b46; } .pp-circle-skin-3 .pp-circle-tab-content.active { opacity: 1; visibility: visible; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+1) .pp-circle-tab-icon { border-color: #07a9f0; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+2) .pp-circle-tab-icon { border-color: #533FFF; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+3) .pp-circle-tab-icon { border-color: #ffb655; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+4) .pp-circle-tab-icon { border-color: #ff5e93; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+5) .pp-circle-tab-icon { border-color: #8078bf; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+6) .pp-circle-tab-icon { border-color: #199a8e; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+7) .pp-circle-tab-icon { border-color: #5356a8; } .pp-circle-skin-3 .pp-circle-item:nth-child(8n+8) .pp-circle-tab-icon { border-color: #7af4ab; } .pp-circle-skin-3 .pp-circle-item .pp-circle-tab { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-1 { top: 14.6%; left: 14.6%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-2 { top: 14.6%; left: 85.4%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-3 { top: 85.4%; left: 14.6%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-4 { top: 85.4%; left: 85.4%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-5 { top: 50%; left: 0%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-6 { top: 50%; left: 100%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-7 { top: 0%; left: 50%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-8 { top: 100%; left: 50%; } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-1 .pp-circle-icon-shapes { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-2 .pp-circle-icon-shapes { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-3 .pp-circle-icon-shapes { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-4 .pp-circle-icon-shapes { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-6 .pp-circle-icon-shapes { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-7 .pp-circle-icon-shapes { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .pp-circle-skin-3 .pp-circle-item #pp-circle-item-8 .pp-circle-icon-shapes { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .pp-circle-skin-4 .pp-circle-info { position: relative; padding: 74.5px; margin: 45px 0; } .pp-circle-skin-4 .pp-circle-inner { width: 400px; height: 400px; border: 5px solid #f0fafe; } .pp-circle-skin-4 .pp-circle-tab { position: absolute; z-index: 99; height: 95px; width: 95px; border-radius: 50%; } .pp-circle-skin-4 .pp-circle-tab-icon { border: 10px solid #07a9f0; border-radius: 50%; height: 100%; width: 100%; } .pp-circle-skin-4 .pp-circle-icon-inner { background: #fff; width: 100%; height: 100%; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .pp-circle-skin-4 .pp-circle-icon-inner img, .pp-circle-skin-4 .pp-circle-icon-inner svg { width: 35px; } .pp-circle-skin-4 .pp-circle-icon-shapes { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-transform-origin: center center; transform-origin: center center; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .pp-circle-skin-4 .pp-circle-tab.active .pp-circle-icon-inner { background: #f4fff9; } .pp-circle-skin-4 .pp-circle-tab-content { position: absolute; top: 80.5px; bottom: 80.5px; left: 80.5px; right: 80.5px; display: block; visibility: hidden; opacity: 0; padding: 15px; } .pp-circle-skin-4 .pp-circle-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 100%; padding: 30px; border-radius: 50%; background: #f7fafc; overflow: hidden; } .pp-circle-skin-4 .pp-circle-content h2 { font-size: 30px; text-transform: uppercase; font-weight: 500; line-height: 1.3; color: #202b46; } .pp-circle-skin-4 .pp-circle-content p { font-size: 16px; color: #737373; margin-top: 0; } .pp-circle-skin-4 .pp-circle-tab-content.active { display: block; visibility: visible; opacity: 1; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+1) .pp-circle-icon-shapes { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #199a8e; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+1) .pp-circle-tab-icon { border-color: #199a8e; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+1) .pp-circle-tab-icon svg { fill: #199a8e; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+2) .pp-circle-icon-shapes { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background-color: #07a9f0; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+2) .pp-circle-tab-icon { border-color: #07a9f0; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+2) .pp-circle-tab-icon svg { fill: #07a9f0; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+3) .pp-circle-icon-shapes { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); background-color: #715eff; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+3) .pp-circle-tab-icon { border-color: #715eff; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+3) .pp-circle-tab-icon svg { fill: #715eff; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+4) .pp-circle-icon-shapes { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); background-color: #ffae42; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+4) .pp-circle-tab-icon { border-color: #ffae42; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+4) .pp-circle-tab-icon svg { fill: #ffae42; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+5) .pp-circle-icon-shapes { -webkit-transform: rotate(135deg); transform: rotate(135deg); background-color: #c50048; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+5) .pp-circle-tab-icon { border-color: #c50048; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+5) .pp-circle-tab-icon svg { fill: #c50048; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+6) .pp-circle-icon-shapes { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: #2b3894; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+6) .pp-circle-tab-icon { border-color: #2b3894; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+6) .pp-circle-tab-icon svg { fill: #2b3894; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+7) .pp-circle-icon-shapes { -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #7af4ab; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+7) .pp-circle-tab-icon { border-color: #7af4ab; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+7) .pp-circle-tab-icon svg { fill: #7af4ab; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+8) .pp-circle-icon-shapes { background-color: #8078bf; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+8) .pp-circle-tab-icon { border-color: #8078bf; } .pp-circle-skin-4 .pp-circle-item:nth-child(8n+8) .pp-circle-tab-icon svg { fill: #8078bf; } .pp-circle-skin-4 .pp-circle-item .pp-circle-tab { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-1 { top: 50%; left: 0%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-2 { top: 85.4%; left: 14.6%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-3 { top: 100%; left: 50%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-4 { top: 85.4%; left: 85.4%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-5 { top: 50%; left: 100%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-6 { top: 14.6%; left: 85.4%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-7 { top: 0%; left: 50%; } .pp-circle-skin-4 .pp-circle-item #pp-circle-item-8 { top: 14.6%; left: 14.6%; } .pp-circle-stacked .pp-circle-wrapper .pp-circle-info { margin: 0 !important; } .pp-circle-stacked .pp-circle-wrapper .pp-circle-inner { border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .pp-circle-stacked .pp-circle-wrapper .pp-circle-content { border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-1 .pp-circle-tab-content { border-radius: 0; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-1 .pp-circle-content { border-radius: 0; height: auto; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-1 .pp-circle-info { width: 100%; padding: 0 !important; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-1 .pp-circle-inner { display: grid; width: 100% !important; height: initial !important; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-1 .pp-circle-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; } .pp-circle-stacked .pp-circle-skin-1 .pp-circle-inner { display: grid; width: 100% !important; height: initial !important; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; border: none !important; } .pp-circle-stacked .pp-circle-skin-1 .pp-circle-item { border: 5px solid #f0fafe; } .pp-circle-stacked .pp-circle-skin-1 .pp-circle-item .pp-circle-tab { position: initial !important; -webkit-transform: none !important; transform: none !important; } .pp-circle-stacked .pp-circle-skin-1 .pp-circle-item .pp-circle-tab .pp-circle-icon-shapes { display: none !important; } .pp-circle-stacked .pp-circle-skin-1 .pp-circle-item .pp-circle-tab-content { position: initial !important; visibility: visible !important; opacity: 1 !important; display: block !important; } .pp-circle-stacked .pp-circle-skin-1 .pp-circle-item .pp-circle-tab-content .pp-circle-content { padding: 0 !important; margin-top: 20px; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-2 .pp-circle-info .pp-circle-inner { width: 100% !important; height: auto !important; } .pp-circle-stacked .pp-circle-wrapper.pp-circle-skin-2 .pp-circle-info .pp-circle-inner .pp-circle-item .pp-circle-tab-content { width: 100% !important; -webkit-transform: none; transform: none; bottom: 0; margin-top: 20px; left: 0; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item .pp-circle-content { height: 280px; overflow: hidden; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-info { width: 100%; padding: 0 !important; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-inner { display: grid; width: 100%; height: initial; grid-template-columns: repeat(1, 1fr); } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-inner { border: none !important; border-radius: 0; border: 0; grid-gap: 20px; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item { border: 5px solid #f0fafe; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item .pp-circle-tab { position: initial !important; -webkit-transform: none !important; transform: none !important; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item .pp-circle-icon-shapes { display: none !important; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item .pp-circle-tab-content { position: initial !important; visibility: visible !important; opacity: 1 !important; height: auto !important; display: block !important; } .pp-circle-stacked .pp-circle-skin-2 .pp-circle-item .pp-circle-content { height: auto !important; padding: 0 !important; background: transparent !important; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-inner { width: 100% !important; height: auto !important; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-inner .pp-circle-tab-content { padding: 0; border: 0 !important; margin-top: 20px; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-inner .pp-circle-tab-content .pp-circle-content { -webkit-box-shadow: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-info { width: 100%; padding: 0 !important; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-inner { display: grid; width: 100%; height: initial; grid-template-columns: repeat(1, 1fr); } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item .pp-circle-tab { height: 80px; width: 80px; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-inner { border: none !important; grid-gap: 20px; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item { border: 5px solid #f0fafe; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item .pp-circle-tab { position: initial !important; -webkit-transform: none !important; transform: none !important; height: 100px; width: 100px; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item .pp-circle-icon-shapes { display: none !important; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item .pp-circle-tab-content { position: initial !important; visibility: visible !important; opacity: 1 !important; display: block !important; } .pp-circle-stacked .pp-circle-skin-3 .pp-circle-item .pp-circle-content { padding: 0 !important; background: transparent !important; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-info { width: 100%; padding: 0 !important; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-inner { display: grid; width: 100% !important; height: auto !important; grid-template-columns: repeat(1, 1fr); } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-item { border: 5px solid #f0fafe; display: -webkit-box; display: -ms-flexbox; display: flex; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-item .pp-circle-tab { -webkit-transform: none !important; transform: none !important; position: relative !important; top: initial !important; left: initial !important; bottom: initial !important; right: initial !important; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-inner { border: none !important; grid-gap: 20px; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-tab-content { position: initial !important; visibility: visible !important; opacity: 1 !important; display: block !important; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-tab-content .pp-circle-content { padding: 0 !important; background: transparent !important; } .pp-circle-stacked .pp-circle-skin-4 .pp-circle-tab .pp-circle-icon-shapes { border-bottom-right-radius: 50%; } .pp-circle-stacked .pp-interactive-circle-rotate, .pp-circle-stacked .pp-interactive-circle-rotate .pp-circle-tab-icon, .pp-circle-stacked .pp-interactive-circle-rotate .pp-circle-content, .pp-circle-stacked .pp-circle-wrapper .pp-circle-info * { -webkit-animation: none !important; animation: none !important; } @media only screen and (max-width: 600px) { .pp-circle-wrapper.pp-circle-desktop-view .pp-circle-inner { width: 100%; height: auto; } .pp-circle-skin-1.pp-circle-desktop-view { margin: 40px 25px; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-info { margin: 0; padding: 0; height: 300px; width: 300px; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-tab-text { font-size: 12px; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-item .pp-circle-tab-content { top: 0px; bottom: 0px; left: 0px; right: 0px; border-radius: 100%; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-item .pp-circle-content { padding: 50px; height: 100%; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-item .pp-circle-tab { height: 60px; width: 60px; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-item .pp-circle-tab-icon { padding: 5px; } .pp-circle-skin-1.pp-circle-desktop-view .pp-circle-content { border-radius: 50% !important; } .pp-circle-skin-2.pp-circle-desktop-view { margin: 20px 20px 0 20px; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-info { width: 100%; padding: 0; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-item { padding: 29px; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-tab { height: 65px; width: 65px; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-tab-text { font-size: 12px; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-tab-content { width: 100%; -webkit-transform: none; transform: none; bottom: 0; margin-top: 20px; left: 0; } .pp-circle-skin-2.pp-circle-desktop-view .pp-circle-content { height: 280px; padding: 0 20px; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-info { margin: 0; padding: 0; width: 100%; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-tab-text { font-size: 12px; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-inner { width: 300px !important; height: 265px !important; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-item .pp-circle-tab { height: 80px; width: 80px; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-item .pp-circle-icon-shapes { display: none; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-item .pp-circle-tab-content { top: 0px; left: 20px; bottom: 45px; right: 20px; padding: 0; border: 0 !important; margin-top: 20px; } .pp-circle-skin-3.pp-circle-desktop-view .pp-circle-item .pp-circle-content { border-radius: 500px !important; height: 221px; -webkit-box-shadow: none !important; box-shadow: none !important; background: 0 0 !important; border-radius: 0 !important; } .pp-circle-skin-4.pp-circle-desktop-view { margin: 40px 25px; } .pp-circle-skin-4.pp-circle-desktop-view .pp-circle-tab-text { font-size: 12px; } .pp-circle-skin-4.pp-circle-desktop-view .pp-circle-info { margin: 0; padding: 48px !important; height: 300px; width: 300px; } .pp-circle-skin-4.pp-circle-desktop-view .pp-circle-item .pp-circle-tab-content { top: 50px; bottom: 50px; left: 50px; right: 50px; padding: 10px; } .pp-circle-skin-4.pp-circle-desktop-view .pp-circle-item .pp-circle-tab { height: 60px; width: 60px; } .pp-circle-skin-4.pp-circle-desktop-view .pp-circle-item .pp-circle-tab-icon { padding: 5px; } .pp-circle-skin-4.pp-circle-desktop-view .pp-circle-content { border-radius: 50% !important; } }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings