/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2015-12-13, 17:16:25
    Author     : maciejj
*/

.roundmenu-container-small .wrapper-small {
    font-size: 16px;
    line-height: normal;
    width: 20em;
    height: 20em;
    overflow: hidden;
    z-index: 10;
    left: -3em;

    border-radius: 50%;
    pointer-events: auto;
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -moz-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.roundmenu-container-small .opened-nav {
    border-radius: 50%;
    pointer-events: auto;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.roundmenu-container-small .wrapper-small li {
    position: absolute;
    font-size: 1.5em;
    width: 8em;
    height: 8em;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

    overflow: hidden;
    left: 50%;
    top: 50%;
    margin-top: -2em;
    margin-left: -8em;
    border: 2px solid transparent;
    -webkit-transition: border .3s ease;
    -moz-transition: border .3s ease;
    transition: border .3s ease;
}

.roundmenu-container-small .wrapper-small li a {
    display: block;
    font-size: 1em;
    height: 8em;
    width: 8em;
    position: absolute;
    bottom: -4em;
    right: -4em;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    padding-top: 0.8em;
    text-align: center;  
    -webkit-transform: skew(-38.6deg) rotate(-65deg) scale(1);
    -ms-transform: skew(-38.6deg) rotate(-65deg) scale(1);
    -moz-transform: skew(-38.6deg) rotate(-65deg) scale(1);
    transform: skew(-38.6deg) rotate(-65deg) scale(1);
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.3s, color 0.3s;
    -moz-transition: opacity 0.3s, color 0.3s;
    transition: opacity 0.3s, color 0.3s;
    /*pointer-events: none;*/
    cursor: pointer;
}

.roundmenu-container-small .wrapper-small li a span {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    /*opacity: 0.7;*/
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.roundmenu-container-small .wrapper-small li:first-child {
    -webkit-transform: rotate(-13deg) skew(38.6deg);
    -ms-transform: rotate(-13deg) skew(38.6deg);
    -moz-transform: rotate(-13deg) skew(38.6deg);
    transform: rotate(-13deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(2) {
    -webkit-transform: rotate(38.4deg) skew(38.6deg);
    -ms-transform: rotate(38.4deg) skew(38.6deg);
    -moz-transform: rotate(38.4deg) skew(38.6deg);
    transform: rotate(38.4deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(3) {
    -webkit-transform: rotate(89.8deg) skew(38.6deg);
    -ms-transform: rotate(89.8deg) skew(38.6deg);
    -moz-transform: rotate(89.8deg) skew(38.6deg);
    transform: rotate(89.8deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(4) {
    -webkit-transform: rotate(141.2deg) skew(38.6deg);
    -ms-transform: rotate(141.2deg) skew(38.6deg);
    -moz-transform: rotate(141.2deg) skew(38.6deg);
    transform: rotate(141.2deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(5) {
    -webkit-transform: rotate(192.6deg) skew(38.6deg);
    -ms-transform: rotate(192.6deg) skew(38.6deg);
    -moz-transform: rotate(192.6deg) skew(38.6deg);
    transform: rotate(192.6deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(6) {
    -webkit-transform: rotate(244deg) skew(38.6deg);
    -ms-transform: rotate(244deg) skew(38.6deg);
    -moz-transform: rotate(244deg) skew(38.6deg);
    transform: rotate(244deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(7) {
    -webkit-transform: rotate(295.4deg) skew(38.6deg);
    -ms-transform: rotate(295.4deg) skew(38.6deg);
    -moz-transform: rotate(295.4deg) skew(38.6deg);
    transform: rotate(295.4deg) skew(38.6deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(1) a span{
    -webkit-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    transform: rotate(78deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(2) a span{
    -webkit-transform: rotate(26deg);
    -ms-transform: rotate(26deg);
    -moz-transform: rotate(26deg);
    transform: rotate(26deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(3) a span{
    -webkit-transform: rotate(334.2deg);
    -ms-transform: rotate(334.2deg);
    -moz-transform: rotate(334.2deg);
    transform: rotate(334.2deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(4) a span{
    -webkit-transform: rotate(282.8deg);
    -ms-transform: rotate(282.8deg);
    -moz-transform: rotate(282.8deg);
    transform: rotate(282.8deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(5) a span{
    -webkit-transform: rotate(231.3deg);
    -ms-transform: rotate(231.3deg);
    -moz-transform: rotate(231.3deg);
    transform: rotate(231.4deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(6) a span{
    -webkit-transform: rotate(181deg);
    -ms-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    transform: rotate(181deg);
}

.roundmenu-container-small .wrapper-small li:nth-child(7) a span{
    -webkit-transform: rotate(128.2deg);
    -ms-transform: rotate(128.2deg);
    -moz-transform: rotate(128.2deg);
    transform: rotate(128.2deg);
}

/*.roundmenu-container-small .wrapper-small li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
  background: radial-gradient(transparent 45%, #a11313 45%);
}

.roundmenu-container-small .wrapper-small li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
  background: radial-gradient(transparent 45%, #a61414 45%);
}*/

.roundmenu-container-small .wrapper-small li a {
    /*background-color: hsla(0, 88%, 65%, 1);*/
    background: radial-gradient(transparent 40%, #a5abae 40%);
}

/* active style */
.roundmenu-container-small .wrapper-small li.active a, .roundmenu-container-small .wrapper-small li.current_page_item a {
    background-color: #8f61a2;
    background: radial-gradient(transparent 40%, #8f61a2 40%);
    /*background-color: hsla(0, 88%, 70%, 1);*/
}


/* hover style */
.roundmenu-container-small .wrapper-small li:not(.active) a:hover,
.roundmenu-container-small .wrapper-small li:not(.active) a:active,
.roundmenu-container-small .wrapper-small li:not(.active) a:focus,
.roundmenu-container-small .wrapper-small li.on a {
/*        background-color: #8f61a2;
        background: radial-gradient(transparent 40%, #8f61a2 40%);*/
    background-color: #63C5E0;  
    background: radial-gradient(transparent 40%, #63C5E0 40%);
}
.roundmenu-container-small .wrapper-small li:not(.active) a:focus
{
    position:fixed;
}

.roundmenu-container-small .srodek{
    position: absolute;
    width: 130px;
    height: 130px;
    margin-left: 50%;
    margin-top: 50%;
    left: -65px;
    top: -72px;
    border-radius: 50%;
    background: url(../img/menu-mid-small.png) no-repeat;
    transition: all .3s ease;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
    .ie10up li a{
        pointer-events: none;
        cursor: default;
    }
}

@media screen and (max-width:1024px) {
    .roundmenu-container-small .wrapper-small {
        font-size: .68em;
    }

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

    .roundmenu-container-small .wrapper-small li {
        font-size: 1.52em;
    }

    .roundmenu-container-small .srodek{
        width: 40%;
        height: 40%;
        left: -20%;
        top: -20%;
        background-size: cover;
    }
}

@media screen and (max-width:320px) {

}