@font-face {
    /*font-family: "icomoon";*/
    font-style: normal;
    font-size: 8px;
    /*font-weight: normal;*/
    src: url("../fonts/icomoon/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.woff") format("woff"), url("../fonts/icomoon/icomoon.ttf") format("truetype"), url("../fonts/icomoon/icomoon.svg#icomoon") format("svg");
}

@font-face {
    font-family: roboto;
    src: url(../fonts/Roboto.ttf);
}
@font-face {
    font-family: aw;
    src: url(../bootstrap/fonts/audiowide.ttf);
}

.wrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #438eb9;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
    padding: 30px 0px 0px 0px;
    background-image:url('../../images/backg3.png');
    z-index: 100;

    /*overflow: hidden;*/
}
/*.btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: 50;
    letter-spacing: 0px;
    margin: 2px 2px;
    outline: medium none;
    padding: 8px 10px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}
.btn2 {
    background: #BA090F none repeat scroll 0 0;
    border: medium none;
    color: #AC1001;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: 50;
    letter-spacing: 0px;
    margin: 2px 2px;
    outline: medium none;
    padding: 8px 20px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}
.btn::after {
    content: "";
    position: absolute;
    transition: all 0.3s ease 0s;
    z-index: -1;
}
.btn::before, .icon-heart::after, .icon-star::after, .icon-plus::after, .icon-file::before {
    font-family: "icomoon";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    position: relative;
    text-transform: none;
}
.icon-envelope::before {
    content: "?";
}
.icon-cart::before {
    content: "?";
}
.icon-cart-2::before {
    content: "?";
}
.icon-heart::before {
    content: "?";
}
.icon-heart::after, .icon-heart-2::before {
    content: "?";
}
.icon-star::before {
    content: "?";
}
.icon-star::after, .icon-star-2::before {
    content: "?";
}
.icon-arrow-right::before {
    content: "?";
}
.icon-arrow-left::before {
    content: "?";
}
.icon-truck::before {
    content: "?";
}
.icon-remove::before {
    content: "?";
}
.icon-cog::before {
    content: "?";
}
.icon-plus::before, .icon-plus::after {
    content: "?";
}
.icon-minus::before {
    content: "?";
}
.bh-icon-smiley::before {
    content: "?";
}
.bh-icon-sad::before {
    content: "?";
}
.icon-file::before {
    content: "?";
}
.icon-remove-2::before {
    content: "?";
}
.btn-1 {
    border: 1px solid #2EC1FF;
    color: #2EC1FF;
}
.btn-1a:hover, .btn-1a:active {
    border:1px solid #BA090F;
    background: #BA090F none repeat scroll 0 0;
    color: #fff;
}
.btn-1b::after {
    background: #fff none repeat scroll 0 0;
    height: 0;
    left: 0;
    top: 0;
    width: 100%;
}
.btn-1b:hover, .btn-1b:active {
    color: #0e83cd;
}
.btn-1b:hover::after, .btn-1b:active::after {
    height: 100%;
}
.btn-1c::after {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
}
.btn-1c:hover, .btn-1c:active {
    color: #0e83cd;
}
.btn-1c:hover::after, .btn-1c:active::after {
    width: 100%;
}
.btn-1d {
    overflow: hidden;
}
.btn-1d::after {
    background: #fff none repeat scroll 0 0;
    height: 103%;
    left: 50%;
    opacity: 0;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0;
}
.btn-1d:hover, .btn-1d:active {
    color: #0e83cd;
}
.btn-1d:hover::after {
    opacity: 1;
    width: 90%;
}
.btn-1d:active::after {
    opacity: 1;
    width: 101%;
}
.btn-1e {
    overflow: hidden;
}
.btn-1e::after {
    background: #fff none repeat scroll 0 0;
    height: 0;
    left: 50%;
    opacity: 0;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 100%;
}
.btn-1e:hover, .btn-1e:active {
    color: #0e83cd;
}
.btn-1e:hover::after {
    height: 260%;
    opacity: 1;
}
.btn-1e:active::after {
    height: 400%;
    opacity: 1;
}
.btn-1f {
    overflow: hidden;
}
.btn-1f::after {
    background: #fff none repeat scroll 0 0;
    height: 0;
    left: 50%;
    opacity: 0;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 101%;
}
.btn-1f:hover, .btn-1f:active {
    color: #0e83cd;
}
.btn-1f:hover::after {
    height: 75%;
    opacity: 1;
}
.btn-1f:active::after {
    height: 130%;
    opacity: 1;
}
.btn-2 {
    background: #cb4e4e none repeat scroll 0 0;
    box-shadow: 0 6px #ab3c3c;
    color: #fff;
    transition: none 0s ease 0s ;
}
.btn-2a {
    border-radius: 0 0 5px 5px;
}
.btn-2a:hover {
    box-shadow: 0 4px #ab3c3c;
    top: 2px;
}
.btn-2a:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2b {
    border-radius: 0 0 5px 5px;
}
.btn-2b:hover {
    box-shadow: 0 8px #ab3c3c;
    top: -2px;
}
.btn-2b:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2c {
    border-radius: 5px;
}
.btn-2c:hover {
    box-shadow: 0 4px #ab3c3c;
    top: 2px;
}
.btn-2c:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2d {
    border-radius: 5px;
}
.btn-2d:hover {
    box-shadow: 0 8px #ab3c3c;
    top: -2px;
}
.btn-2d:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2e {
    border-radius: 5px;
    box-shadow: -6px 0 #ab3c3c;
}
.btn-2e:hover {
    box-shadow: -4px 0 #ab3c3c;
    left: -2px;
}
.btn-2e:active {
    box-shadow: 0 0 #ab3c3c;
    left: -6px;
}
.btn-2f {
    border-radius: 5px;
    box-shadow: 6px 0 #ab3c3c;
}
.btn-2f:hover {
    box-shadow: 4px 0 #ab3c3c;
    left: 2px;
}
.btn-2f:active {
    box-shadow: 0 0 #ab3c3c;
    left: 6px;
}
.btn-2g {
    border-radius: 40px;
}
.btn-2g:hover {
    box-shadow: 0 4px #ab3c3c;
    top: 2px;
}
.btn-2g:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2h {
    border-radius: 20px;
}
.btn-2h:hover {
    box-shadow: 0 4px #ab3c3c;
    top: 2px;
}
.btn-2h:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2i {
    border-radius: 50%;
    height: 90px;
    padding: 0;
    width: 90px;
}
.btn-2i:hover {
    box-shadow: 0 4px #ab3c3c;
    top: 2px;
}
.btn-2i:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-2j {
    border-radius: 50%;
    height: 90px;
    padding: 0;
    width: 90px;
}
.btn-2j:hover {
    box-shadow: 0 8px #ab3c3c;
    top: -2px;
}
.btn-2j:active {
    box-shadow: 0 0 #ab3c3c;
    top: 6px;
}
.btn-3 {
    background: #fcad26 none repeat scroll 0 0;
    color: #fff;
}
.btn-3:hover {
    background: #f29e0d none repeat scroll 0 0;
}
.btn-3:active {
    background: #f58500 none repeat scroll 0 0;
    top: 2px;
}
.btn-3::before {
    font-size: 140%;
    height: 100%;
    left: 0;
    line-height: 3;
    position: absolute;
    top: 0;
    width: 60px;
}
.btn-3a {
    padding: 25px 60px 25px 120px;
}
.btn-3a::before {
    background: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;
}
.btn-3b {
    border-radius: 10px;
    padding: 25px 60px 25px 120px;
}
.btn-3b::before {
    border-right: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-3c {
    border-radius: 10px;
    box-shadow: 0 3px #da9622;
    padding: 80px 20px 20px;
}
.btn-3c:active {
    box-shadow: 0 3px #dc7801;
}
.btn-3c::before {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px 10px 0 0;
    color: #f29e0d;
    height: 60px;
    line-height: 60px;
    width: 100%;
}
.btn-3c:active::before {
    color: #f58500;
}
.btn-3d {
    border-radius: 10px;
    padding: 25px 60px 25px 120px;
}
.btn-3d::before {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px 0 0 10px;
    color: #fcad26;
    z-index: 2;
}
.btn-3d::after {
    background: #fff none repeat scroll 0 0;
    height: 20px;
    left: 55px;
    margin: -10px 0 0 -10px;
    top: 50%;
    transform: rotate(45deg);
    width: 20px;
    z-index: 1;
}
.btn-3d:active::before {
    color: #f58500;
}
.btn-3d:active {
    top: 0;
}
.btn-3d:active::after {
    left: 60px;
}
.btn-3e {
    overflow: hidden;
    padding: 25px 120px 25px 60px;
}
.btn-3e::before {
    left: auto;
    right: 10px;
    z-index: 2;
}
.btn-3e::after {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    height: 200%;
    margin: -5px 0 0 -5px;
    right: 0;
    top: 0;
    transform: rotate(-20deg);
    transform-origin: 0 0 0;
    width: 30%;
    z-index: 1;
}
.btn-3e:hover::after {
    width: 40%;
}
.btn-4 {
    border: 3px solid #fff;
    border-radius: 50px;
    color: #fff;
    overflow: hidden;
}
.btn-4:active {
    border-color: #17954c;
    color: #17954c;
}
.btn-4:hover {
    background: #24b662 none repeat scroll 0 0;
}
.btn-4::before {
    color: #fff;
    font-size: 125%;
    height: 100%;
    line-height: 3.5;
    position: absolute;
    transition: all 0.3s ease 0s;
}
.btn-4:active::before {
    color: #17954c;
}
.btn-4a::before {
    left: 130%;
    top: 0;
}
.btn-4a:hover::before {
    left: 80%;
}
.btn-4b::before {
    left: -50%;
    top: 0;
}
.btn-4b:hover::before {
    left: 10%;
}
.btn-4c::before {
    left: 70%;
    opacity: 0;
    top: 0;
}
.btn-4c:hover::before {
    left: 80%;
    opacity: 1;
}
.btn-4d::before {
    left: 30%;
    opacity: 0;
    top: 0;
}
.btn-4d:hover::before {
    left: 10%;
    opacity: 1;
}
.btn-5 {
    backface-visibility: hidden;
    background: #823aa0 none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    height: 70px;
    line-height: 24px;
    min-width: 260px;
    overflow: hidden;
}
.btn-5:active {
    background: #9053a9 none repeat scroll 0 0;
    top: 2px;
}
.btn-5 span {
    backface-visibility: hidden;
    display: inline-block;
    height: 100%;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.btn-5::before {
    font-size: 180%;
    height: 100%;
    line-height: 2.5;
    position: absolute;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.btn-5:active::before {
    color: #703b87;
}
.btn-5a:hover span {
    transform: translateY(300%);
}
.btn-5a::before {
    left: 0;
    top: -100%;
}
.btn-5a:hover::before {
    top: 0;
}
.btn-5b:hover span {
    transform: translateX(200%);
}
.btn-5b::before {
    left: -100%;
    top: 0;
}
.btn-5b:hover::before {
    left: 0;
}
.btn-6 {
    background: #226fbe none repeat scroll 0 0;
    color: #fff;
    transition: none 0s ease 0s ;
}
.btn-6:active {
    top: 2px;
}
.btn-6a {
    border: 4px solid #226fbe;
}
.btn-6a:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6b {
    border: 4px solid #226fbe;
    border-radius: 15px;
}
.btn-6b:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6c {
    border: 4px solid #226fbe;
    border-radius: 60px;
}
.btn-6c:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6d {
    border: 2px dashed #226fbe;
}
.btn-6d:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6e {
    border: 2px dashed #226fbe;
    border-radius: 15px;
}
.btn-6e:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6f {
    border: 2px dashed #226fbe;
    border-radius: 60px;
}
.btn-6f:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6g {
    border: 2px dotted #226fbe;
}
.btn-6g:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6h {
    border: 2px dotted #226fbe;
    border-radius: 15px;
}
.btn-6h:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6i {
    border: 2px dotted #226fbe;
    border-radius: 60px;
}
.btn-6i:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6j {
    border: 4px double #226fbe;
}
.btn-6j:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6k {
    border: 4px double #226fbe;
    border-radius: 15px;
}
.btn-6k:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-6l {
    border: 4px double #226fbe;
    border-radius: 60px;
}
.btn-6l:hover {
    background: transparent none repeat scroll 0 0;
    color: #226fbe;
}
.btn-7 {
    background: #17aa56 none repeat scroll 0 0;
    border-radius: 7px;
    box-shadow: 0 5px #119e4d;
    color: #fff;
    padding: 25px 60px 25px 90px;
}
.btn-7a {
    overflow: hidden;
}
.btn-7a::before {
    color: #0a833d;
    font-size: 160%;
    left: 0;
    line-height: 0.8;
    position: absolute;
    width: 40%;
}
.btn-7a.btn-activated {
    animation: 0.5s ease 0s normal none 1 running fadeOutText;
}
.btn-7a.btn-activated::before {
    animation: 0.5s ease 0s normal none 1 running moveToRight;
}
@keyframes fadeOutText {
    0% {
    color: transparent;
}
80% {
    color: transparent;
}
100% {
    color: #fff;
}
}
@keyframes fadeOutText {
    0% {
    color: transparent;
}
80% {
    color: transparent;
}
100% {
    color: #fff;
}
}
@keyframes moveToRight {
    80% {
    transform: translateX(250%);
}
81% {
    opacity: 1;
    transform: translateX(250%);
}
82% {
    opacity: 0;
    transform: translateX(250%);
}
83% {
    opacity: 0;
    transform: translateX(-50%);
}
84% {
    opacity: 1;
    transform: translateX(-50%);
}
100% {
    transform: translateX(0%);
}
}
@keyframes moveToRight {
    80% {
    transform: translateX(250%);
}
81% {
    opacity: 1;
    transform: translateX(250%);
}
82% {
    opacity: 0;
    transform: translateX(250%);
}
83% {
    opacity: 0;
    transform: translateX(-50%);
}
84% {
    opacity: 1;
    transform: translateX(-50%);
}
100% {
    transform: translateX(0%);
}
}
.btn-7b {
    overflow: hidden;
}
.btn-7b::before {
    color: #0a833d;
    font-size: 160%;
    left: 0;
    line-height: 0.8;
    position: absolute;
    width: 40%;
}
.btn-7b.btn-activated::before {
    animation: 0.5s ease 0s normal none 1 running scaleUp;
}
@keyframes scaleUp {
    80% {
    opacity: 0;
    transform: scale(2);
}
100% {
    opacity: 0;
    transform: scale(2);
}
}
@keyframes scaleUp {
    80% {
    opacity: 0;
    transform: scale(2);
}
100% {
    opacity: 0;
    transform: scale(2);
}
}
.btn-icon-only {
    font-size: 0;
    padding: 25px 30px;
}
.btn-icon-only::before {
    backface-visibility: hidden;
    font-size: 26px;
    height: 100%;
    left: 0;
    line-height: 54px;
    position: absolute;
    top: 0;
    width: 100%;
}
.btn-7c {
    overflow: hidden;
}
.btn-7c::before {
    color: #fff;
    z-index: 1;
}
.btn-7c::after {
    background: #0a833d none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: none 0s ease 0s ;
    width: 0;
    z-index: 0;
}
.btn-7c.btn-activated::after {
    animation: 0.7s ease 0s normal forwards 1 running fillToRight;
}
@keyframes fillToRight {
    100% {
    width: 100%;
}
}
@keyframes fillToRight {
    100% {
    width: 100%;
}
}
.btn-7d {
    overflow: hidden;
}
.btn-7d::before {
    color: #fff;
    z-index: 1;
}
.btn-7d::after {
    background: #21bb63 none repeat scroll 0 0;
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition: none 0s ease 0s ;
    width: 100%;
    z-index: 0;
}
.btn-7d.btn-activated::after {
    animation: 0.7s ease 0s normal forwards 1 running emptyBottom;
}
@keyframes emptyBottom {
    100% {
    height: 100%;
}
}
@keyframes emptyBottom {
    100% {
    height: 100%;
}
}
.btn-7e::after {
    color: #ea515e;
    font-size: 26px;
    height: 100%;
    left: 0;
    line-height: 54px;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: none 0s ease 0s ;
    width: 100%;
    z-index: 1;
}
.btn-7e.btn-activated::after {
    animation: 0.5s ease 0s normal forwards 1 running scaleFade;
}
@keyframes scaleFade {
    50% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(2.5);
}
}
@keyframes scaleFade {
    50% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(2.5);
}
}
.btn-7f::before {
}
.btn-7f::after {
    color: #ffe44d;
    font-size: 26px;
    height: 100%;
    left: 0;
    line-height: 54px;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(4);
    transition: none 0s ease 0s ;
    visibility: hidden;
    width: 100%;
    z-index: 1;
}
.btn-7f.btn-activated::after {
    animation: 0.3s ease 0s normal forwards 1 running dropDown;
    visibility: visible;
}
@keyframes dropDown {
    100% {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes dropDown {
    100% {
    opacity: 1;
    transform: scale(1);
}
}
.btn-7g::after {
    color: #0a833d;
    font-size: 26px;
    height: 100%;
    left: 0;
    line-height: 54px;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(2);
    transition: none 0s ease 0s ;
    visibility: hidden;
    width: 100%;
    z-index: 1;
}
.btn-7g.btn-activated::after {
    animation: 0.5s ease 0s normal forwards 1 running dropDownFade;
    visibility: visible;
}
@keyframes dropDownFade {
    50% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(1.5);
}
}
@keyframes dropDownFade {
    50% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(1.5);
}
}
.btn-7h span {
    display: inline-block;
    width: 100%;
}
.btn-7h::before {
    color: #0a833d;
    font-size: 160%;
    left: 0;
    line-height: 0.8;
    position: absolute;
    width: 40%;
}
.btn-success, .btn-error {
    color: transparent;
}
.btn-success::after, .btn-error::after {
    color: #fff;
    left: 40%;
    z-index: 1;
}
.btn-success::before {
    content: "?";
}
.btn-success::after {
    animation: 0.5s ease 0s normal none 1 running moveUp;
    content: "Success!";
}
@keyframes moveUp {
    0% {
    opacity: 0;
    transform: translateY(50%);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
@keyframes moveUp {
    0% {
    opacity: 0;
    transform: translateY(50%);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
.btn-error {
    animation: 0.5s ease 0s normal none 1 running shake;
}
@keyframes shake {
    0%, 100% {
    transform: translateX(0px);
}
10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
    transform: translateX(10px);
}
}
@keyframes shake {
    0%, 100% {
    transform: translateX(0px);
}
10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
    transform: translateX(10px);
}
}
.btn-error::before {
    content: "?";
}
.btn-error::after {
    animation: 0.5s ease 0s normal none 1 running scaleFromUp;
    content: "Error!";
}
@keyframes scaleFromUp {
    0% {
    opacity: 0;
    transform: scale(0);
}
100% {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes scaleFromUp {
    0% {
    opacity: 0;
    transform: scale(0);
}
100% {
    opacity: 1;
    transform: scale(1);
}
}
.trash-effect {
    margin: 60px auto 0;
    max-width: 320px;
    position: relative;
}
.trash-effect .icon-file {
    font-size: 30px;
    height: 50px;
    left: 50%;
    margin: -45px 0 0 -25px;
    position: absolute;
    top: 50%;
    transform: translateX(90px) translateY(20px) scale(1);
    transition: all 0.3s ease-out 0s;
    width: 50px;
}
.trash-effect .icon-file:nth-child(2) {
    transform: translateX(140px) translateY(-10px) scale(1);
    transition-delay: 0.1s;
}
.trash-effect .icon-file:nth-child(3) {
    transform: translateX(140px) translateY(50px) scale(1);
    transition-delay: 0.2s;
}
.trash-effect.trash-effect-active .icon-file {
    transform: translateX(-100px) translateY(-10px) scale(0);
}
.btn-7i {
    border-radius: 0 0 7px 7px;
    box-shadow: none;
    padding: 27px 33px;
    transform: translateX(-100px);
}
.btn-7i::before {
    line-height: 45px;
}
.btn-7i::after {
    background: #17aa56 none repeat scroll 0 0;
    border-radius: 7px 7px 0 0;
    height: 11px;
    left: 0;
    top: -10px;
    transform-origin: 0 100% 0;
    width: 100%;
    z-index: 1;
}
.trash-effect-active .btn-7i::after {
    animation: 0.5s ease 0s normal none 1 running openTrash;
}
@keyframes openTrash {
    50% {
    transform: rotate(-35deg);
}
100% {
    transform: rotate(0deg);
}
}
@keyframes openTrash {
    50% {
    transform: rotate(-35deg);
}
100% {
    transform: rotate(0deg);
}
}
.perspective {
    display: inline-block;
    perspective: 800px;
}
.btn-8 {
    background: #5cbcf6 none repeat scroll 0 0;
    display: block;
    outline: 1px solid transparent;
    transform-style: preserve-3d;
}
.btn-8:active {
    background: #55b7f3 none repeat scroll 0 0;
}
.btn-8a::after {
    background: #49a7df none repeat scroll 0 0;
    height: 42%;
    left: 0;
    top: -40%;
    transform: rotateX(90deg);
    transform-origin: 0 100% 0;
    width: 100%;
}
.btn-8a:hover {
    transform: rotateX(-15deg);
}
.btn-8b::after {
    background: #49a7df none repeat scroll 0 0;
    height: 40%;
    left: 0;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 0 0 0;
    width: 100%;
}
.btn-8b:hover {
    transform: rotateX(15deg);
}
.btn-8c::after {
    background: #49a7df none repeat scroll 0 0;
    height: 100%;
    left: -20%;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin: 100% 0 0;
    width: 21%;
}
.btn-8c:hover {
    transform: rotateY(15deg);
}
.btn-8d::after {
    background: #49a7df none repeat scroll 0 0;
    height: 100%;
    left: 100%;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 0 0;
    width: 20%;
}
.btn-8d:hover {
    transform: rotateY(-15deg);
}
.btn-8e {
    transform: rotateX(-15deg);
}
.btn-8e::after {
    background: #49a7df none repeat scroll 0 0;
    height: 42%;
    left: 0;
    top: -40%;
    transform: rotateX(90deg);
    transform-origin: 0 100% 0;
    width: 100%;
}
.btn-8e:active {
    transform: rotateX(0deg);
}
.btn-8f {
    transform: rotateX(15deg);
}
.btn-8f::after {
    background: #49a7df none repeat scroll 0 0;
    height: 40%;
    left: 0;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 0 0 0;
    width: 100%;
}
.btn-8f:active {
    transform: rotateX(0deg);
}
.btn-8g {
    background: #fff none repeat scroll 0 0;
    color: #999;
}
.btn-8g:active {
    background: #fff none repeat scroll 0 0;
}
.btn-8g::after, .btn-8g::before {
    height: 100%;
    left: 0;
    line-height: 70px;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
}
.btn-8g::after {
    background: #7aca7c none repeat scroll 0 0;
    color: #358337;
    content: "It worked!";
    top: -98%;
    transform: rotateX(90deg);
    transform-origin: 0 100% 0;
}
.btn-8g::before {
    background: #e96a6a none repeat scroll 0 0;
    color: #a33a3a;
    content: "Error!";
    font-family: "Lato",Calibri,Arial,sans-serif;
    font-weight: 700;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 0 0 0;
}
.btn-8g.btn-success3d {
    background: #aaa none repeat scroll 0 0;
    transform: rotateX(-90deg) translateY(100%);
    transform-origin: 50% 100% 0;
}
.btn-8g.btn-error3d {
    background: #aaa none repeat scroll 0 0;
    transform: rotateX(90deg) translateY(-100%);
    transform-origin: 50% 0 0;
}*/
/*.z-loading {
    background-color:#808080;
    background-image: url("loading14.gif");
    border:3px;
    font-weight: bold;
    padding:2px;
    height: 500px;
    width: 600px;
    margin-left: 50%;
    margin-top: 250px;

}
.z-loading-indicator {
    border:0 none;
}
.z-initing { 
    width: 50px !important; 
    height: 72px !important; 
    background-image: url("loading14.gif") !important; 
}*/

/*.z-loading {
    border: 1px;
    border-color: #E3E3E3;
    background-color: #ACACAC;
    padding: 0 0 0 0;
    border-radius: 0;
    background: linear-gradient(#ACACAC, #ACACAC);

    font-family: Arial, Sans-serif;
    font-size: 18px;
    font-style: normal;
    margin-left: 42%;
    margin-top: 300px;
}

.z-loading-indicator {
    color: #75c4ec;
    padding: 10px;
    line-height: 100px;
    vertical-align: middle;
}

.z-loading-icon {
    background-image: url("ajax-loader.gif");
    height:100px;
    width:100px;
    margin: 5px 5px 5px 5px;
}*/

/*loading*/
.z-loading {    
    border: 1px;
    border-color: #E3E3E3;
    border-radius: 0;
    font-family: "muli", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-style: normal;
}

.z-loading-indicator {
    margin: 0px;
    padding: 0;
    border:0 none;
    background: rgba(0,0,0,.6);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: transparent;
    transition: all .5s;
}

.z-loading-icon {
    background-image: url("../../images/loader3.gif");
    /*background-image: url("../../images/loading2.gif");*/
    height: 80px;
    width: 80px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s;

}
/*Akhir dari loading*/



/*dashboard awal*/
.labelmore{
    font-family: Arial,sans-serif;
    font-size: 12px;
    color: #ffffff;
}

.labeltopboxtitle{
    font-family: Arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
}

.labeltopboxvalue{

    font-family: Arial,sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #ffffff;
}

.boxblue{
    border:0;
    background-color: #02c1eb;
    padding: 0;  
}

.boxmoreblue{
    border:0;
    background-color: #02aed4;
    padding: 0;
    text-align: center;
    padding-top: 3px;
}

.boxgreen{
    border:0;
    background-color: #01a664;
    padding: 0;

}

.boxmoregreen{
    border:0;
    background-color: #009659;
    padding: 0;
    text-align: center;
    padding-top: 3px;
}

.boxyellow{
    border:0;
    background-color: #f39b3a;
    padding: 0;
}

.boxmoreyellow{
    border:0;
    background-color: #dc8c35;
    padding: 0;
    text-align: center;
    padding-top: 3px;
}

.boxred{
    border:0;
    background-color: #f6685a;
    padding: 0;
}

.boxmorered{
    border:0;
    background-color: #de5e51;
    padding: 0;
    text-align: center;
    padding-top: 3px;
}

/*.cellboxht {
    /background: url("${ImgUrl}/icon/ht_icon.png") no-repeat right 0;/
    background: url("../../images/icon/ht_icon.png") no-repeat right 0;
}
.cellboxea {
    /background: url("${ImgUrl}/icon/ea_icon.png") no-repeat right 0;/
    background: url("../../images/icon/ea_icon.png") no-repeat right 0;
}*/
.cellboxmmea {
    background: url("../../images/icon/mmea_icon.png") no-repeat right 0;
}
.cellboxnppbkc {
    background: url("../../images/icon/nppbkc_icon.png") no-repeat right 0;
}
.divbox{
    line-height: 30px
}

.divprogressbg{
    background-color: #f3e8e7;
}

.divprogressred{
    background-color: #f6685a;
}

.divprogressblue{
    background-color: #02c1eb;
}

.divprogressyellow{
    background-color: #dc8c35;
}

.divprogressgreen{
    background-color: #009659;
}

.divprogressblue2{
    background-color: #61cee2;
}

.labelred{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: #f6685a;
}
.labelredbold{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: red;
    font-weight:bold;
}

.labelblue{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: #02c1eb;
}

.labelbluebold{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: blue;
    font-weight:bold;
}

.labelyellow{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: #dc8c35;
}

.labelgreen{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: #009659;
}

.labelblue2{
    font-family: Arial, San Serif;
    font-size: 12px;
    color: #61cee2;
}

.clearcell{
    border:0;
    padding:2px;
    background:transparent;
}

.gbred{
    border-top-style: solid; border-width: 3px; border-color: #dd5f51;
}

.gbblue{
    border-top-style: solid; border-width: 3px; border-color: #02aed2;
}

.gbblue2{
    border-top-style: solid; border-width: 3px; border-color: #61cee2;
}

.gbyellow{
    border-top-style: solid; border-width: 3px; border-color: #f39b3a;
}

.gbgreen{
    border-top-style: solid; border-width: 3px; border-color: #009659;
}


/*tambahan*/
.z-listbox{
    border: 1px solid #cfcfcf !important;
}

.btn-info, .btn-warning, .btn-primary, .btn-danger, .btn-success{
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.z-button{
    color: #3b3b3b;
}


.z-navitem-content{
    height: auto;
    /*height: auto !important;*/
}

.z-navbar{
    white-space: normal;
}

.nav-list.z-navbar > ul > .z-nav > ul > li a{
    line-height: 1.7em;
}

/*tambahan*/


/*dashboard*/
.mrb{
    margin-bottom: 20px;
}
.pdingTopBot{
    padding:15px 0;
}
.pding{
    padding:0 15px;
}

.saldo{
    position: relative;
    float: right;
    text-align: center;
    margin-bottom: -100px;
    margin-top: -30px;
    margin-right: 10px;
}

.wrHome{
    padding: 5px 10px;
    font-family: roboto;
}

.cardTampilan{
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(204, 197, 185, 0.5) 0px 2px 2px;
    margin-bottom: 20px;
    position: relative;
    /*z-index: 1;*/
    /*border-radius: 6px;*/
    /*min-width: 200px;*/
    /*box-shadow: 0px 5px 15px 0px rgba(153,153,153,0.58);*/
    border-radius: 5px;
}

.cardTampilan .content {
    padding: 5px;
    width: 100%;
}

.center{
    text-align:center;
}

.fleft{
    float: left;
}


.salam{
    text-align:left;
    float: left;
}
.idPengguna{
    text-align:center;
    float: right;
}
.dm{
    margin-top: 10px !important
}
.dm span{
    display:block;
    /*text-transform: uppercase;*/
}

.wr{
    margin-top: 20px;
}

.judul{
    font-family: roboto;
    font-size: 25px;
}
.subJudul{
    font-family: roboto;
    font-size: 16px;
    text-transform: uppercase;
    /*margin-top: 20px;*/
    color: #5b8cff;
}

.wrpc{
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

.isiPc{
    text-align: center;
}

span.hpcH{
    font-family: roboto;
    font-size: 14px;
    display: block;
    line-height: 1.5em;
    color: #565656;
    padding-top: 2px;
}
span.hpc{
    font-family: roboto;
    font-size: 14px;
    display: block;
    line-height: 1.5em;
    color: #fff;
    padding-top: 2px;
}
.nc{    
    margin-bottom: 20px;
}
span.nilaiCukai{
    font-family: roboto;
    font-size: 25px;
    line-height: 1.5em;
    color: #000;
}
span.satuan span{
    font-family: roboto;
    line-height: 1.5em;
    color: #fff;
}
span.satuanH span{
    font-family: roboto;
    line-height: 1.5em;
    color: #565656;
}
span.nilaiPc{
    font-family: roboto;
    font-size: 25px;
    /*display: block;*/
    line-height: 1.5em;
    color: #000;
}
span.nilaiPcSub{
    font-family: roboto;
    font-size: 16px;
    /*display: block;*/
    line-height: 1.5em;
    color: #fff;
}
span.nilaiPcSubH{
    font-family: roboto;
    font-size: 25px;
    /*display: block;*/
    line-height: 1.5em;
    color: #000;
}
span.nilaiSaldo{
    font-family: roboto;
    font-size: 40px;
    display: block;
    line-height: 1.5em;
    color: #000;
}

.awal{
    /*background: #f3b1f9;*/
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tambahan{
    /*background: #ff7698;*/
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ikk{
    /*background: #ff974d;*/
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dflex{
    display: flex;
    justify-content: center;
    align-items: center; 
}

.um{
    margin: 10px;
}
.um img{
    width: 65px;
    height: 65px;
}
/*.um img{
    width: 75px;
    height: 75px;
}*/

/*ck1*/
.wproduksi{
    width: 100%;
    height: 18px;
    background: #ffdff6;
    /*float: left;*/
    position: relative;
    top: 2px;
    margin-top: 11px;
    margin-bottom: 30px;
}
.produksi{
    width: 20%;
    max-width: 100%;
    background: #ada3ff;
    overflow: hidden;
    /*    display: flex;
        justify-content: center;*/
    height: 100%;
    text-align: right;
    color: #fff;
}
.produksi span{
    font-size: 11px;
    line-height: 1.2em;
    position: relative;
    right: 2px;
}

.produksi span.prsen{
    font-size: 14px;
}

.wJlhProduksi{
    /*float: left;*/
    position: relative;
    float: right;
    margin-top: -68px;
}

.wJlhProduksi span{
    font-size: 12px;
    font-family: roboto;
    color: #132759;
}
.wJlhProduksi span.jlhProduksi{
    font-size: 15px;
    font-family: roboto;
    line-height: 1.5em;
    margin-left: 10px;
}

.wJnsProduksi{
    float: left;
    position: relative;
    margin-top: -68px;
}

.wJnsProduksi span.jnsProduksi{
    font-size: 15px;
    font-family: roboto;
    line-height: 1.5em;
}

.wtotproduk{
    margin-bottom: 20px;
}
.totproduk{
    font-size: 25px;
    color: #ff7033;
    font-family: roboto;
}

.colo{
    color: #666;
}
.dblo{
    display: block;
}

.bred{
    background: #ff3360;
}

.borange{
    background: #ff4e1f;
}
.bblue{
    background: #5885f1;
}

/*.wrflip{
    position: relative;
    min-height: 65px;
}

.cardflip{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

.cardflip:hover{
    transform: rotateY(180deg);
}

.cardfront{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;    
}
.cardback{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}*/


/*ck1*/

/*ck5*/
.lgnd1{
    width: 12px;
    height: 12px;
    background: #fcc00a;
    display: inline-block;
}
.lgnd2{
    width: 12px;
    height: 12px;
    background: #ff2435;
    display: inline-block;
}

.dck5{
    font-family: roboto;
    padding-left: 5px;
    line-height: 1.5em;
    font-size: 18px;
}
/*ck5*/


/*usman*/
.circle{
    width: 60px;
    height: 60px;
    background: #5885F1;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    z-index: 999;
    cursor: pointer;
    transition: all .5s;
}

.circle img{
    width: 35px;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%);
}

.circle .msg span{
    font-family: roboto;
    font-size: 0px;
    color: white;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%);
    transition: all .2s;
}

.iconUm {
    position: absolute;
    top: -11%;
    left: 50%;
    transform: translate(-50%);
    cursor: pointer;
}

.ck1top{
    top: 13px !important;
}

/*usman*/


/* ==== Main CSS === */
.img-fill{
    width: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center
}

.img-fill img {
    height: 130px;
    min-width: 100%;
    position: relative;
    display: inline-block;
    max-width: none;
}


.Grid1k {
    padding: 0 15px;
    max-width: 1200px;
    margin: auto;
}

.blocks-box,
.slick-slider {
    margin: 0;
    padding: 0!important;
}

.slick-slide {
    float: left /* If RTL Make This Right */ ;
    padding: 0;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
    height:110px;
    /*background:#fff;*/  

}

.Modern-Slider .item .img-fill .info{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    /*background:rgba(0,0,0,.50);*/
    line-height:6em;
    text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Modern-Slider .item .img-fill img{
    filter:blur(5px);
}

.Modern-Slider .item .info > div{
    display:inline-block!important;
    vertical-align:middle;
}

.Modern-Slider .NextArrow{
    position:absolute;
    top:50%;
    right:0px;
    width:45px;
    height:45px;
    /*background:rgba(0,0,0,.50);*/
    border:0 none;
    margin-top:-22.5px;
    text-align:center;
    font:20px/45px FontAwesome;
    color:#000;
    z-index:5;
    background: none;
    border-radius: 50%;
}

.Modern-Slider .NextArrow:hover{
    background: #e0e0e0;
}

.Modern-Slider .NextArrow:before{content:'\f105';}

.Modern-Slider .PrevArrow{
    position:absolute;
    top:50%;
    left:0px;
    width:45px;
    height:45px;
    /*background:rgba(0,0,0,.50);*/
    border:0 none;
    margin-top:-22.5px;
    text-align:center;
    font:20px/45px FontAwesome;
    color:#000;
    z-index:5;
    background: none;
    border-radius: 50%;
}

.Modern-Slider .PrevArrow:hover{
    background: #e0e0e0;
}

.Modern-Slider .PrevArrow:before{content:'\f104';}

.Modern-Slider .slick-dots{
    position:absolute;
    height:5px;
    background:rgba(255,255,255,.20);
    bottom:0px;
    width:100%;
    left:0px;
    padding:0px;
    margin:0px;
    list-style-type:none;
}
.Modern-Slider .slick-dots li button{display:none;}
.Modern-Slider .slick-dots li{
    float:left;
    width:0px;
    height:5px;
    background:#d62828;
    position:absolute;
    left:0px;
    bottom:0px;
}

.Modern-Slider .slick-dots li.slick-active{
    width:100%;
    /*animation:ProgressDots 11s both;*/
}

.Modern-Slider .item h6 span{  
    /*font:30px/50px RalewayB;*/
    text-transform:uppercase;
    color:#ff3162;
    /*animation:fadeOutRight 1s both;*/
    margin:0;
    padding:0;
    font-family: roboto;
    font-size: 11px;
}

.Modern-Slider .item h4 span{
    margin:0;
    padding:0;
    font:18px/36px RalewayR;
    color:#515151;
    max-width:600px;
    overflow:hidden;
    /*height:60px;*/
    margin: auto;
    font-family: roboto;
    /*animation:fadeOutLeft 1s both;*/
}

.Modern-Slider .item.slick-active h3{
    /*animation:fadeInDown 1s both 1s;*/
}

.Modern-Slider .item.slick-active h5{
    /*animation:fadeInLeft 1s both 1.5s;*/
}

.Modern-Slider .item.slick-active{
    /*animation:Slick-FastSwipeIn 1s both;*/
}

.Modern-Slider {background:#fff;}

/* ==== Slider Image Transition === */
@keyframes Slick-FastSwipeIn{
    0%{transform:rotate3d(0,1,0,150deg) scale(0)  perspective(400px);} 
100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);} 
}

@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}

.slick-list{
    background-image:url('../../images/backgP.png');
    background-size: cover;
    background-repeat: no-repeat;
}

/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}



.pngmuman{
    height: 160px;
}
/*dashboard*/


.wIden{
    text-align: left; 
}
.wIden span {
    display: block;
}

.wwUser{
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

.wUser {
    width: 200px;
    box-shadow: rgba(204, 197, 185, 0.5) 0px 2px 2px;
    border-radius: 5px;
    float: left;
    margin: 10px;
    padding: 5px;
}

.almt{
    min-width: 450px !important;
}
.deepRose{
    background: #c44569;
}
.gre{
    background: #ad86b9;
}
.porce{
    background: #76a3ff;
}
.peac{
    background: #FD7272;
}
.fal{
    background: #E06726;
}
.ugu{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    top: -32px;
    margin: auto;
    margin-top: auto;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background: #fff;
    margin-bottom: -25px;
}

.ugu img {
    width: 35px;
    position: relative;
    top: 8px;
}

.wIden span {
    display: inline;
}

.wU{
    float: left;
}

.wU img {
    width: 18px;
    float: left;
    position: relative;
    top: -4px;
    margin-right: -4px;
}

.wU span{
    float: left;
    padding: 5px;
}

.wgb{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: rgba(204, 197, 185, 0.5) 0px 2px 2px;
    float: left;
}

.wgb img{
    width: 30px;
    text-align: center;
    position: relative;
    top: 6px;
}


.dropdown-content {
    display: none;
    position: absolute;
    background: #ff7b1d;
    /*min-width: 212px;*/
    z-index: 1;
    border: 1.5px solid #ff7b1d;
    /*margin-top: 10px;*/
    border-radius: 5px;
    width: 100%;
}

.dropdown-content a {
    float: none;
    color: #fff;
    text-decoration: none;
    /*text-align: left;*/
/*    border-bottom: 1px solid #e9e9e9!important;*/
    /*display: block;*/
    line-height: 50px;
    position: relative;
    animation:animatebottom 0.4s;
    text-align: center;
    outline: none;
    
}
@keyframes animatebottom{from{bottom:-30px;opacity:0} to{bottom:0;opacity:1}}

.dropdown-content a:hover {
    /*color: #233141;*/
}

.dropdown:hover .dropdown-content {
    display: block;
}

.arrow {
    position: absolute;
    top: -10px;
    margin-left: 25px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #ff7b1d;
}

.jlDokKr span{
    font-size: 25px;
    padding: 0px 4px;
        
}

a span{
    font-family: roboto;
}