/* 
    Created on : 2015-12-13, 17:16:25
    Author     : maciejj
*/

.wrapper-new {
    width: 36em;
    height: 36em;
    margin: 0 auto;
}

.roundmenu-container .wrapper {
    font-size: 16px;
    line-height: normal;
    width: 36em;
    height: 36em;
    overflow: hidden;
    z-index: 10;
    margin: 0 auto;
    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 .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 .wrapper li {
    position: absolute;
    font-size: 1.5em;
    width: 18em;
    height: 18em;
    -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: -6.5em;
    margin-left: -18em;
    border: 4px solid white;
    -webkit-transition: border .3s ease;
    -moz-transition: border .3s ease;
    transition: border .3s ease;
}

.roundmenu-container .wrapper li a {
    display: block;
    font-size: 1.18em;
    height: 18.5em;
    width: 18.5em;
    position: absolute;
    bottom: -9.25em;
    right: -9.25em;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    padding-top: 1.2em;
    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;
}

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

.roundmenu-container .wrapper 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 .wrapper 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 .wrapper 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 .wrapper 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 .wrapper 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 .wrapper 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 .wrapper 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 .wrapper li:nth-child(1) a span{
    -webkit-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    transform: rotate(78deg);
}

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

.roundmenu-container .wrapper 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 .wrapper 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 .wrapper li:nth-child(5) a span{
    -webkit-transform: rotate(231.4deg);
    -ms-transform: rotate(231.4deg);
    -moz-transform: rotate(231.4deg);
    transform: rotate(231.4deg);
}

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

.roundmenu-container .wrapper 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 .wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
  background: radial-gradient(transparent 45%, #a11313 45%);
}

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

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

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

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

.roundmenu-container .wrapper li:not(.active) a:active, .roundmenu-container .wrapper li:not(.active) a:focus {
    background-color: #8f61a2;
    background: radial-gradient(transparent 40%, #8f61a2 40%);
    color: #fff;
}

.roundmenu-container .wrapper li:not(.active) a:focus
{
    position:fixed;
}

.srodek{
    position: absolute;
    width: 320px;
    height: 320px;
    /*    margin-left: 50%;
        margin-top: 50%;*/
    left: 115px;
    top: 130px;
    border-radius: 50%;
    background: url(../img/menu-mid.png);
    background-size: cover;
    transition: all .3s ease;

}

@media screen and (max-width:1100px) {
/*    .roundmenu-container .wrapper {
        font-size: .7em;
    }

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

    .roundmenu-container .wrapper li a {
        padding-top: 1.4em;
    }
    .roundmenu-container .wrapper li a span {   
        font-size: 10px;
        width: 100px;
        opacity: 0.7;
    }*/

    .roundmenu-container .srodek{
        left: 115px;
        top: 125px;
    }
}

@media screen and (max-width:640px) {
    .wrapper-new {
        width: 30em;
        height: 30em;
    }

/*    .roundmenu-container .wrapper {
        font-size: .5em;
        left: -30%;
    }

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

    .roundmenu-container .wrapper li a {
        padding-top: 1.2em;
    }
    .roundmenu-container .wrapper li a span {   
        font-size: 8px;
        width: 60px;
        opacity: 0.7;
    }*/

    .roundmenu-container .srodek{
        width: 270px;
        height: 270px;
        left: 90px;
        top: 105px;
    }
}

@media screen and (max-width:480px) {
    .roundmenu-container {
        margin-left: 15%;
    }
    .wrapper-new {
        width: 300px;
        height: 300px;
    }
    
    .roundmenu-container .srodek {
        width: 150px;
        height: 150px;
        left: 65px;
        top: 75px;
    }
}

@media screen and (max-width:380px) {
    .roundmenu-container {
        margin-left: 5%;
    }
    .wrapper-new {
        width: 300px;
        height: 300px;
    }
    
    .roundmenu-container .srodek {
        width: 150px;
        height: 150px;
        left: 65px;
        top: 75px;
    }
}