/*------------------------------------------------------------------------
# mod_tc_circularmenu Extension
# ------------------------------------------------------------------------
# author    themescreative
# copyright Copyright (C) 2014 themescreative.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.themescreative.com
-------------------------------------------------------------------------*/
.csstransforms .cn-wrapper * {
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}

.cn-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
z-index: 9000000;
}

.cn-overlay.on-overlay {
visibility: visible;
opacity: 1;
}

.cn-button:hover {
background-color: #fff;
color: #999;
border: 2px solid #fff;
}
.cn-button {
font-size: 15px;
z-index: 9000;
outline: none;
width: 7em;
height: 7em;
text-transform: uppercase;
-webkit-backface-visibility: hidden;
letter-spacing: 1.3px;
font-weight: 700;
color: #fff;
background: #4a2abb;
background: linear-gradient(90deg, rgb(129, 131, 230) 0%, rgb(74, 42, 187) 100%);
border: none;
border-radius: 1000px;
box-shadow: 12px 12px 24px rgba(185, 185, 185, 0.64);
transition: all 0.3s ease-in-out 0s;
cursor: pointer;
outline: none;
position: relative;
padding: 10px;
}

.cn-button::before {
content: '';
border-radius: 1000px;
box-shadow: 0 0 60px rgba(0,255,203,.64);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .3s ease-in-out 0s;
}

.cn-button:hover, .cn-button:focus {
color: #fff;
}

.cn-button:hover::before, .cn-button:focus::before {
opacity: 1;
}

.cn-button::after {
content: '';
width: 30px; height: 30px;
border-radius: 100%;
border: 6px solid #4a2abb;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ring 1.5s infinite;
}

.cn-button:hover::after, .cn-button:active::after, .cn-button:focus::after {
animation: none;
display: none;
}

@keyframes ring {
0% {
width: 30px;
height: 30px;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
.cn-buttonc {
position: fixed;
outline: none;
top: 50%;
left: 50%;
color: #999;
width: 8.3em;
height: 8.3em;
visibility: hidden;
z-index: 9000040;
margin-top: -3.8em;
margin-left: -4em;
border: 0px solid #999;
box-shadow:0 0 5px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 5px rgba(0,0,0,0.6);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.6);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
text-align: center;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
pointer-events: auto;
}
.cn-buttonc.on-buttonc {
visibility: visible;
opacity: 1;
}
.csstransforms .cn-wrapper {
position: fixed;
top: 50%;
left: 50%;
z-index: 9000001;
margin-top: -13em;
margin-left: -13.5em;
width: 27em;
height: 27em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
background: transparent;
opacity: 0;
-webkit-transition: all .3s ease 0.3s;
-moz-transition: all .3s ease 0.3s;
transition: all .3s ease 0.3s;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
overflow: hidden;
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
content:".";
display:block;
font-size:2em;
width:6.2em;
height:6.2em;
position: absolute;
left: 50%;
margin-left: -3.1em;
top:50%;
margin-top: -3.1em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
z-index:9000020;
color: transparent;
}

.csstransforms .opened-nav {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
}

.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden !important;
margin-top: -1.1em;
margin-left: -9.9em;
width: 10em;
height: 10em;
font-size: 1.5em;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(76deg) skew(60deg);
-moz-transform: rotate(76deg) skew(60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(76deg) skew(60deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
pointer-events: none;
}

.csstransforms .cn-wrapper li a {
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
background: -webkit-radial-gradient(transparent 33%, #900 33%);
background: -moz-radial-gradient(transparent 33%, #900 33%);
background: radial-gradient(transparent 33%, #900 33%);
box-shadow:0 0 5px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto;
}

.csstransforms .cn-wrapper li a span {
position: relative;
top: 0px;
text-transform: uppercase;
font-size: 18px;
}

.csstransforms .cn-wrapper li img {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
display: block;
}

.csstransforms .opened-nav li {
-webkit-transition: all .3s ease .3s;
-moz-transition: all .3s ease .3s;
transition: all .3s ease .3s;
}

.no-csstransforms .cn-wrapper {
overflow: hidden;
margin: 10em auto;
padding: .5em;
text-align: center;
}

.no-csstransforms .cn-wrapper ul {
display: inline-block;
}

.no-csstransforms .cn-wrapper li {
float: left;
width: 5em;
height: 5em;
background-color: #fff;
text-align: center;
font-size: 1em;
line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a{
background-color: #6F325C;
color: #fff;
}

.no-csstransforms .cn-button {
display: none;
}

@media only screen and (max-width: 620px) {
.no-csstransforms li {
width: 4em;
height: 4em;
line-height: 4em;
}
}

@media only screen and (max-width: 500px) {
.no-ccstransforms .cn-wrapper {
padding: .5em;
}

.no-csstransforms .cn-wrapper li {
width: 4em;
height: 4em;
font-size: .9em;
line-height: 4em;
}
}

@media only screen and (max-width: 480px) {
.csstransforms .cn-wrapper {
font-size: .68em;
}

.cn-button {
font-size: 1em;
}
}

@media only screen and (max-width:420px) {
.no-csstransforms .cn-wrapper li {
width: 100%;
height: 3em;
line-height: 3em;
}
}