<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dannydev/pen/cbHei?depth=everything&order=popularity&page=84&q=develop&show_forks=false" />
<style class="cp-pen-styles">.circle-toggle {
width: 265px;
height: 265px;
position: absolute;
z-index: 2;
cursor: pointer;
}
.circle-toggle .default, .circle-toggle .active {
position: absolute;
}
.circle-toggle .default {
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
-webkit-transition: all 150ms ease-in-out 100ms;
-moz-transition: all 150ms ease-in-out 100ms;
-o-transition: all 150ms ease-in-out 100ms;
-ms-transition: all 150ms ease-in-out 100ms;
transition: all 150ms ease-in-out 100ms;
}
.circle-toggle .active {
width: 0;
height: 0;
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
transition: all 250ms ease-in;
}
.circle-toggle .active .inner-thin-layer {
position: absolute;
left: 11%;
top: 11%;
z-index: 5;
width: 78%;
height: 78%;
margin: 0;
opacity: 0;
/*-webkit-transition: all 1s ease-in 350ms; */
}
.circle-toggle .active .inner-thick-layer {
position: absolute;
left: 0;
top: 0;
z-index: 5;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
/*-webkit-transition: all 1s ease-in 350ms;*/
}
.circle-toggle .c1-label-default, .circle-toggle .c1-label-active {
text-align: center;
color: #6d6e70;
font-style: italic;
}
.circle-toggle .c1-label-default {
position: absolute;
z-index: -1;
left: 50%;
width: 100%;
top: 5%;
height: 50px;
-webkit-transition: all 200ms ease-in-out 10ms;
-moz-transition: all 200ms ease-in-out 10ms;
-o-transition: all 200ms ease-in-out 10ms;
-ms-transition: all 200ms ease-in-out 10ms;
transition: all 200ms ease-in-out 10ms;
}
.circle-toggle .c1-label-active {
position: absolute;
left: 0;
top: 50%;
height: 50px;
width: 100%;
text-align: center;
color: #6d6e70;
opacity: 0;
padding-top: 5px;
margin: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.circle-toggle .blurb {
position: absolute;
z-index: -1;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.circle-toggle .blurb .blurb-title {
color: #db676f;
text-align: center;
text-transform: uppercase;
margin: 0;
}
.circle-toggle .blurb .the-blurb {
margin: 0;
padding-top: 10px;
color: #6d6e70;
font-size: 14px;
}
.circle-toggle:hover .default {
width: 0;
height: 0;
margin: 0;
}
.circle-toggle:hover .active {
width: 265px;
height: 265px;
}
.circle-toggle:hover .active .inner-thin-layer, .circle-toggle:hover .active .inner-thick-layer {
opacity: 1;
}
.circle-toggle:hover .c1-label-active {
opacity: 1;
-webkit-transition: all 150ms ease-in 300ms;
-moz-transition: all 150ms ease-in 300ms;
-o-transition: all 150ms ease-in 300ms;
-ms-transition: all 150ms ease-in 300ms;
transition: all 150ms ease-in 300ms;
}
.circle-toggle:hover .c1-label-default {
opacity: 0;
top: 40% !important;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.c1-wrap {
position: relative;
width: 900px;
height: 800px;
/* outline:1px solid blue;*/
margin: 0 auto;
}
.c1-wrap .c1-base {
width: 484px;
height: 528px;
z-index: 1;
/*.text-line{ opacity:0; }
.text-line-1{ opacity: 1;}*/
}
.c1-wrap .c1-center {
width: 190px;
height: 190px;
z-index: 2;
}
.c1-wrap .c1-center .c1-inner-circle-layer {
position: absolute;
left: 0;
top: 0;
width: 190px;
height: 190px;
}
.c1-wrap .c1-center .c1-center-label {
width: 190px;
height: 22px;
margin: 0;
padding: 0;
text-align: center;
font-size: 16px;
color: #6d6e70;
font-style: italic;
}
.c1-wrap .circle-toggle-1 {
left: 50%;
top: 0;
}
.c1-wrap .circle-toggle-1 .blurb {
top: 720px;
left: 50%;
width: 300px;
}
.c1-wrap .circle-toggle-1:hover .blurb {
top: 680px;
opacity: 1;
-webkit-transition: all 200ms ease-in;
}
.c1-wrap .circle-toggle-2 {
left: 10%;
top: 65.5%;
}
.c1-wrap .circle-toggle-2 .c1-label-default {
top: 170px;
}
.c1-wrap .circle-toggle-2 .blurb {
top: -290px;
left: 500px;
width: 300px;
}
.c1-wrap .circle-toggle-2:hover .blurb {
top: -260px;
left: 480px;
opacity: 1;
-webkit-transition: all 200ms ease-in;
}
.c1-wrap .circle-toggle-3 {
right: 10%;
top: 65.5%;
}
.c1-wrap .circle-toggle-3 .c1-label-default {
top: 170px;
}
.c1-wrap .circle-toggle-3 .blurb {
top: -290px;
left: -500px;
width: 300px;
}
.c1-wrap .circle-toggle-3:hover .blurb {
top: -260px;
left: -480px;
opacity: 1;
-webkit-transition: all 200ms ease-in;
}
.absolute-center, .circle-toggle .active, .c1-wrap .c1-base, .c1-wrap .c1-center, .c1-wrap .c1-center .c1-center-label {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.xbrowser-horizontal-center, .circle-toggle .c1-label-default, .c1-wrap .circle-toggle-1, .c1-wrap .circle-toggle-1 .blurb {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.xbrowser-vertical-center, .circle-toggle .c1-label-active, .c1-wrap .circle-toggle-2, .c1-wrap .circle-toggle-3 {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.anim-rotate {
-webkit-animation: rotateClockwise 5s linear infinite;
-moz-animation: rotateClockwise 5s linear infinite;
-o-animation: rotateClockwise 5s linear infinite;
animation: rotateClockwise 5s linear infinite;
}
.anim-rotate-inverse {
-webkit-animation: rotateCounterClockwise 10s linear infinite;
-moz-animation: rotateCounterClockwise 10s linear infinite;
-o-animation: rotateCounterClockwise 10s linear infinite;
animation: rotateCounterClockwise 10s linear infinite;
}
.anim-rotate-centered, .circle-toggle .default {
-webkit-animation: rotateClockwise2 5s linear infinite;
-moz-animation: rotateClockwise2 5s linear infinite;
-o-animation: rotateClockwise2 5s linear infinite;
animation: rotateClockwise2 5s linear infinite;
}
@-webkit-keyframes rotateClockwise {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotateClockwise {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotateClockwise {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
@keyframes rotateClockwise {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotateCounterClockwise {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@-moz-keyframes rotateCounterClockwise {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
}
}
@-o-keyframes rotateCounterClockwise {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(-360deg);
}
}
@keyframes rotateCounterClockwise {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes rotateClockwise2 {
0% {
-webkit-transform: rotate(0deg) translate(0);
}
100% {
-webkit-transform: rotate(360deg) translate(0);
}
}
@-moz-keyframes rotateClockwise2 {
0% {
-moz-transform: rotate(0deg) translate(0);
}
100% {
-moz-transform: rotate(360deg) translate(0);
}
}
@-o-keyframes rotateClockwise2 {
0% {
-o-transform: rotate(0deg) translate(0);
}
100% {
-o-transform: rotate(360deg) translate(0);
}
}
@keyframes rotateClockwise2 {
0% {
-ms-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0);
}
100% {
-ms-transform: rotate(360deg) translate(0);
transform: rotate(360deg) translate(0);
}
}
</style></head><body>
<div class="c1-wrap">
<div class="circle-toggle circle-toggle-1" data-toggle="1">
<div class="active">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 86.9 86.9" enable-background="new 0 0 86.9 86.9" xml:space="preserve" class="">
<g>
<circle fill="#DE8D93" cx="43.4" cy="43.4" r="40.4"/>
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M43.4,86.4c-23.7,0-42.9-19.3-42.9-42.9S19.8,0.5,43.4,0.5s42.9,19.3,42.9,42.9S67.1,86.4,43.4,86.4z
M43.4,0.9C20,0.9,0.9,20,0.9,43.4c0,23.4,19.1,42.5,42.5,42.5s42.5-19.1,42.5-42.5C85.9,20,66.9,0.9,43.4,0.9z"/>
<path fill="#DC686F" d="M43.4,86.9C19.5,86.9,0,67.4,0,43.4S19.5,0,43.4,0s43.4,19.5,43.4,43.4S67.4,86.9,43.4,86.9z M43.4,1.4
c-23.2,0-42,18.8-42,42c0,23.2,18.8,42,42,42s42-18.8,42-42C85.4,20.3,66.6,1.4,43.4,1.4z"/>
</g>
</g>
<circle fill="#FFFFFF" cx="43.4" cy="43.4" r="34.6"/>
</g>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 62.4 62.4" enable-background="new 0 0 62.4 62.4" xml:space="preserve" class="anim-rotate-inverse inner-thin-layer">
<path fill="none" stroke="#DC686F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.5,3.3
c2.5-0.7,5-1,7.7-1c16,0,28.9,13,28.9,28.9c0,5.5-1.5,10.7-4.2,15.1"/>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 86.9 86.9" enable-background="new 0 0 86.9 86.9" xml:space="preserve"
class="anim-rotate inner-thick-layer">
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M37.9,72c-15.5-2.8-25.9-17.7-23.1-33.3s17.7-25.9,33.3-23.1L47.2,21c-12.6-2.3-24.8,6.1-27.1,18.8
s6.1,24.8,18.8,27.1C51.5,69.1,63.7,60.7,66,48l5.2,0.9C68.4,64.5,53.5,74.9,37.9,72z"/>
</g>
</g>
</svg>
</div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32.9 32.9" enable-background="new 0 0 32.9 32.9" xml:space="preserve" class="default">
<g>
<circle fill="#DE8D93" cx="16.4" cy="16.4" r="15.3"/>
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M16.4,32.7c-9,0-16.2-7.3-16.2-16.2S7.5,0.2,16.4,0.2s16.2,7.3,16.2,16.2S25.4,32.7,16.4,32.7z M16.4,0.4
C7.6,0.4,0.4,7.6,0.4,16.4c0,8.9,7.2,16.1,16.1,16.1s16.1-7.2,16.1-16.1C32.5,7.6,25.3,0.4,16.4,0.4z"/>
<path fill="#DC686F" d="M16.4,32.9C7.4,32.9,0,25.5,0,16.4S7.4,0,16.4,0s16.4,7.4,16.4,16.4S25.5,32.9,16.4,32.9z M16.4,0.5
C7.7,0.5,0.5,7.7,0.5,16.4c0,8.8,7.1,15.9,15.9,15.9s15.9-7.1,15.9-15.9C32.3,7.7,25.2,0.5,16.4,0.5z"/>
</g>
</g>
<circle fill="#FFFFFF" cx="16.4" cy="16.4" r="13.1"/>
<polygon class="triangle" opacity="0.2" fill="#DC686F" points="25.5,10.7 20.8,18.9 16.6,26.2 7.5,10.7 "/>
</g>
</svg>
<h3 class="c1-label-active">Studio<br/>Production</h3>
<h3 class="c1-label-default">Studio<br/>Production</h3>
<div class="blurb">
<h4 class="blurb-title">Studio Production</h4>
<p class="the-blurb">Our studio production team creates immersive brand experiences by focusing on innovative content and customer engagement.</p>
</div>
</div><!-- / .circle-toggle-1 -->
<div class="circle-toggle circle-toggle-2" data-toggle="2">
<div class="active">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 86.9 86.9" enable-background="new 0 0 86.9 86.9" xml:space="preserve" class="">
<g>
<circle fill="#DE8D93" cx="43.4" cy="43.4" r="40.4"/>
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M43.4,86.4c-23.7,0-42.9-19.3-42.9-42.9S19.8,0.5,43.4,0.5s42.9,19.3,42.9,42.9S67.1,86.4,43.4,86.4z
M43.4,0.9C20,0.9,0.9,20,0.9,43.4c0,23.4,19.1,42.5,42.5,42.5s42.5-19.1,42.5-42.5C85.9,20,66.9,0.9,43.4,0.9z"/>
<path fill="#DC686F" d="M43.4,86.9C19.5,86.9,0,67.4,0,43.4S19.5,0,43.4,0s43.4,19.5,43.4,43.4S67.4,86.9,43.4,86.9z M43.4,1.4
c-23.2,0-42,18.8-42,42c0,23.2,18.8,42,42,42s42-18.8,42-42C85.4,20.3,66.6,1.4,43.4,1.4z"/>
</g>
</g>
<circle fill="#FFFFFF" cx="43.4" cy="43.4" r="34.6"/>
</g>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 62.4 62.4" enable-background="new 0 0 62.4 62.4" xml:space="preserve" class="anim-rotate-inverse inner-thin-layer">
<path fill="none" stroke="#DC686F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.5,3.3
c2.5-0.7,5-1,7.7-1c16,0,28.9,13,28.9,28.9c0,5.5-1.5,10.7-4.2,15.1"/>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 86.9 86.9" enable-background="new 0 0 86.9 86.9" xml:space="preserve"
class="anim-rotate inner-thick-layer">
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M37.9,72c-15.5-2.8-25.9-17.7-23.1-33.3s17.7-25.9,33.3-23.1L47.2,21c-12.6-2.3-24.8,6.1-27.1,18.8
s6.1,24.8,18.8,27.1C51.5,69.1,63.7,60.7,66,48l5.2,0.9C68.4,64.5,53.5,74.9,37.9,72z"/>
</g>
</g>
</svg>
</div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32.9 32.9" enable-background="new 0 0 32.9 32.9" xml:space="preserve" class="default">
<g>
<circle fill="#DE8D93" cx="16.4" cy="16.4" r="15.3"/>
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M16.4,32.7c-9,0-16.2-7.3-16.2-16.2S7.5,0.2,16.4,0.2s16.2,7.3,16.2,16.2S25.4,32.7,16.4,32.7z M16.4,0.4
C7.6,0.4,0.4,7.6,0.4,16.4c0,8.9,7.2,16.1,16.1,16.1s16.1-7.2,16.1-16.1C32.5,7.6,25.3,0.4,16.4,0.4z"/>
<path fill="#DC686F" d="M16.4,32.9C7.4,32.9,0,25.5,0,16.4S7.4,0,16.4,0s16.4,7.4,16.4,16.4S25.5,32.9,16.4,32.9z M16.4,0.5
C7.7,0.5,0.5,7.7,0.5,16.4c0,8.8,7.1,15.9,15.9,15.9s15.9-7.1,15.9-15.9C32.3,7.7,25.2,0.5,16.4,0.5z"/>
</g>
</g>
<circle fill="#FFFFFF" cx="16.4" cy="16.4" r="13.1"/>
<polygon class="triangle" opacity="0.2" fill="#DC686F" points="25.5,10.7 20.8,18.9 16.6,26.2 7.5,10.7 "/>
</g>
</svg>
<h3 class="c1-label-active">Products &<br />Solutions</h3>
<h3 class="c1-label-default">Products &<br />Solutions</h3>
<div class="blurb">
<h4 class="blurb-title">Products & Solutions</h4>
<p class="the-blurb">We build simple and elegant products and solutions to solve even the most substantial business challenges for our clients, and ourselves.</p>
</div>
</div><!-- / .circle-toggle-2 -->
<div class="circle-toggle circle-toggle-3" data-toggle="3">
<div class="active">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 86.9 86.9" enable-background="new 0 0 86.9 86.9" xml:space="preserve" class="">
<g>
<circle fill="#DE8D93" cx="43.4" cy="43.4" r="40.4"/>
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M43.4,86.4c-23.7,0-42.9-19.3-42.9-42.9S19.8,0.5,43.4,0.5s42.9,19.3,42.9,42.9S67.1,86.4,43.4,86.4z
M43.4,0.9C20,0.9,0.9,20,0.9,43.4c0,23.4,19.1,42.5,42.5,42.5s42.5-19.1,42.5-42.5C85.9,20,66.9,0.9,43.4,0.9z"/>
<path fill="#DC686F" d="M43.4,86.9C19.5,86.9,0,67.4,0,43.4S19.5,0,43.4,0s43.4,19.5,43.4,43.4S67.4,86.9,43.4,86.9z M43.4,1.4
c-23.2,0-42,18.8-42,42c0,23.2,18.8,42,42,42s42-18.8,42-42C85.4,20.3,66.6,1.4,43.4,1.4z"/>
</g>
</g>
<circle fill="#FFFFFF" cx="43.4" cy="43.4" r="34.6"/>
</g>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 62.4 62.4" enable-background="new 0 0 62.4 62.4" xml:space="preserve" class="anim-rotate-inverse inner-thin-layer">
<path fill="none" stroke="#DC686F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.5,3.3
c2.5-0.7,5-1,7.7-1c16,0,28.9,13,28.9,28.9c0,5.5-1.5,10.7-4.2,15.1"/>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 86.9 86.9" enable-background="new 0 0 86.9 86.9" xml:space="preserve"
class="anim-rotate inner-thick-layer">
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M37.9,72c-15.5-2.8-25.9-17.7-23.1-33.3s17.7-25.9,33.3-23.1L47.2,21c-12.6-2.3-24.8,6.1-27.1,18.8
s6.1,24.8,18.8,27.1C51.5,69.1,63.7,60.7,66,48l5.2,0.9C68.4,64.5,53.5,74.9,37.9,72z"/>
</g>
</g>
</svg>
</div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32.9 32.9" enable-background="new 0 0 32.9 32.9" xml:space="preserve" class="default">
<g>
<circle fill="#DE8D93" cx="16.4" cy="16.4" r="15.3"/>
<g opacity="0.2">
<g>
<path fill="#DC686F" d="M16.4,32.7c-9,0-16.2-7.3-16.2-16.2S7.5,0.2,16.4,0.2s16.2,7.3,16.2,16.2S25.4,32.7,16.4,32.7z M16.4,0.4
C7.6,0.4,0.4,7.6,0.4,16.4c0,8.9,7.2,16.1,16.1,16.1s16.1-7.2,16.1-16.1C32.5,7.6,25.3,0.4,16.4,0.4z"/>
<path fill="#DC686F" d="M16.4,32.9C7.4,32.9,0,25.5,0,16.4S7.4,0,16.4,0s16.4,7.4,16.4,16.4S25.5,32.9,16.4,32.9z M16.4,0.5
C7.7,0.5,0.5,7.7,0.5,16.4c0,8.8,7.1,15.9,15.9,15.9s15.9-7.1,15.9-15.9C32.3,7.7,25.2,0.5,16.4,0.5z"/>
</g>
</g>
<circle fill="#FFFFFF" cx="16.4" cy="16.4" r="13.1"/>
<polygon class="triangle" opacity="0.2" fill="#DC686F" points="25.5,10.7 20.8,18.9 16.6,26.2 7.5,10.7 "/>
</g>
</svg>
<h3 class="c1-label-active">Marketing<br />& Campaigns</h3>
<h3 class="c1-label-default">Marketing<br />& Campaigns</h3>
<div class="blurb">
<h4 class="blurb-title">Marketing & Campaigns</h4>
<p class="the-blurb">Data-driven marketing and campaigns drive sales. We develop awareness and conversations using intelligent, cross-channel tactics.</p>
</div>
</div><!-- / .circle-toggle-3 -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 158 174.1" enable-background="new 0 0 158 174.1" xml:space="preserve" class="c1-base">
<polygon opacity="0.2" fill="#DC686F" points="4.5,129.8 43.7,61.8 78.7,1 154.5,129.8 "/>
<g class="text-line text-line-3" data-line="3">
<rect x="80.5" y="-9.6" transform="matrix(0.534 0.8455 -0.8455 0.534 106.3969 -30.6198)" fill="#DE8D93" width="1" height="181.6"/>
</g>
<path class="text-line text-line-2" data-line="2" fill="#DE8D93" d="M154.4,128.9c-0.2,0-0.4,0.1-0.6,0.2L3.5,33.3c0.1-0.3,0.1-0.5,0-0.8c-0.1-0.7-0.7-1.3-1.4-1.4
c-1.3-0.2-2.3,0.8-2.1,2.1c0.1,0.7,0.7,1.3,1.4,1.4C2,34.7,2.6,34.5,3,34.1l150.3,95.8c0,0,0,0.1,0,0.1c0,0.6,0.5,1.2,1.2,1.2
c0.6,0,1.2-0.5,1.2-1.2C155.5,129.4,155,128.9,154.4,128.9z"/>
<path class="text-line text-line-1" data-line="1" fill="#DE8D93" d="M79,170.6V2.2c0.4-0.2,0.6-0.6,0.6-1c0-0.6-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2c0,0.5,0.3,0.9,0.7,1
v168.4c-0.7,0.2-1.3,0.9-1.3,1.7c0,1,0.8,1.8,1.8,1.8c1,0,1.8-0.8,1.8-1.8C80.3,171.5,79.7,170.8,79,170.6z"/>
</svg>
<div class="c1-center">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 62.4 62.4" enable-background="new 0 0 62.4 62.4" xml:space="preserve" class="anim-rotate">
<g>
<circle fill="#FFFFFF" cx="31.2" cy="31.2" r="31.2"/>
<!--<path fill="none" stroke="#DC686F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.5,3.3
c2.5-0.7,5-1,7.7-1c16,0,28.9,13,28.9,28.9c0,5.5-1.5,10.7-4.2,15.1"/>-->
<g opacity="0.2">
<path fill="#DC686F" d="M26.5,57.5C12,54.9,2.4,41,5,26.5S21.5,2.4,36,5.1l-0.9,4.9C23.3,7.8,12,15.6,9.9,27.4s5.7,23.1,17.5,25.2
S50.5,47,52.6,35.2l4.9,0.9C54.9,50.5,40.9,60.2,26.5,57.5z"/>
</g>
</g>
</svg>
<div class="c1-inner-circle-layer">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 62.4 62.4" enable-background="new 0 0 62.4 62.4" xml:space="preserve" class="anim-rotate-inverse">
<path fill="none" stroke="#DC686F" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.5,3.3
c2.5-0.7,5-1,7.7-1c16,0,28.9,13,28.9,28.9c0,5.5-1.5,10.7-4.2,15.1"/>
</svg>
</div>
<h2 class="c1-center-label">Digital Strategy</h2>
</div>
</div><!-- / .c1-wrap -->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$('[data-toggle]').on({
mouseover: function(e){ $(e.currentTarget).trigger('click', e); },
click: function(e){
$('.is-active').removeClass('is-active');
var dat = $(e.currentTarget).addClass('is-active').data();
var lolsvg = $('[data-line="' + dat.toggle + '"]')[0];
lolsvg.classList.add('is-active');
}
});
//# sourceURL=pen.js
</script>
</body></html>
