.renkli-menu{
margin:0 auto; 
display:table;
padding:0;
list-style:none; 
border-radius:10px;
background:#f3f3f3;
}

#sabitFooter {
    text-align:center;
    background-color: #333;
    color: white;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 15px;
    padding: 5px;
    margin-bottom: 0px;
    z-index: 1;
}

/*SAYFALAMA*/
.Sayfalama {
float:right;
}
.Sayfalama a:link, .Sayfalama a:visited, .Sayfalama a:active
{   background-color:lightgray;
    border:solid 1px #e4e4e4;
    padding:3px 5px 3px 5px;
    margin:1px; 
    font-size:9pt;
    color:#2f2f2f;
    font-weight:bold;
    text-decoration:none;
    font-family:Trebuchet MS;
    cursor:pointer;
}
 
.Sayfalama a:hover
{   background-color:darkslategray;
    border:solid 1px #e4e4e4;
    padding:3px 5px 3px 5px;
    font-size:9pt;
    color:White;
    font-family:Trebuchet MS;
    cursor:pointer;
}
 
.Sayfalama INPUT
{   background-color:darkslategray;
    border:solid 1px #e4e4e4;
    padding:3px 5px 3px 5px;
    margin:1px; 
    font-size:9pt;
    color:#2f2f2f;
    font-weight:bold;
    font-family:Trebuchet MS;
    cursor:pointer;
}
 
.Sayfalama span
{   
    margin:1px;
}
 
.Sayfalama B
{   background-color:darkslategray;
    border:solid 1px #e4e4e4;
    padding:3px 5px 3px 5px;
    font-size:9pt;
    color:White;
    font-family:Trebuchet MS;
    cursor:pointer;
}


.ortaladivi {

     position: absolute;
    top: 20%;
    left: 30%;
}

.renkli-menu li{float:left;}

.renkli-menu li a{
padding-top:20px;
text-align:center;
display:block;
line-height:15px;
height:70px;
width:75px;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition:background 0.5s;
color:#5b5b5b;
text-decoration:none;
font-family:Arial;
font-size:12px;
font-weight:bold;
}

.renkli-menu li a:hover{
-moz-box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
color:white;
 background-color:#d1ba38;
}

.urundetayaltkisim {
    background-color:gainsboro;
    font-size:13px;
    padding:10px;
}


::selection { background: #3F8EFC; color: #fff; }
a { text-decoration: none; }

.download {
    
    position: absolute;
    /* top: calc(50% - 30px); */
    /* right: calc(50% - 115px); */
   
    width: 230px;
    height: 30px;
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.075), rgba(255,255,255,.045));
    background-image: linear-gradient(to top, rgba(0,0,0,.075), rgba(255,255,255,.045));
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.04), 0 0 1px rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.1);
    border-radius: 100px;
    color: #337ab7;
    line-height: 30px;
    text-align: center;
    letter-spacing: 5px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.67,.13,.1,.81), transform .15s cubic-bezier(.67,.13,.1,.81);
}
.download:hover {
	width: 400px;
}
.download:active {
	transform: translateY(3px);
}
.download:before, .download:after {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.download:before {
	content: 'İNDİR';
}
.download:after {
	content: 'TÜM KATALOGLAR İÇİN TIKLAYIN';
	top: -60px;
	opacity: 0;
}
.download:hover:after {
	top: 0px;
	opacity: 1;
}
.download:hover:before {
	top: 60px;
	opacity: 0;
}

.platforms {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 290px);
	height: 200px;
    border-style: solid;
	width: 580px;
	background: #fff;
	border-radius: 5px;
	visibility: hidden;
	transform: scale(.9);
	opacity: 0;
	overflow: hidden;
	transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.platforms:target {
	visibility: visible;
	transform: scale(1);
	opacity: 1;
}
.platforms a {
	position: absolute;
	top: 200px;
	left: 10px;
	width: 180px;
	height: 180px;
	border-radius: 5px;
	color: #3F8EFC;
	text-transform: uppercase;
	transition: top .5s cubic-bezier(.67,.13,.1,.81);
}
.platforms a:nth-child(1) {
	transition-delay: .1s;
}
.platforms a:nth-child(2) {
	left: 200px;
}
.platforms a:nth-child(3) {
	left: 390px;
	transition-delay: .1s;
}
.platforms:target a {
	top: 10px;
}
.platforms a:hover {
	background: #E5F4FF;
	box-shadow: 0 0 0 1px #A5CFFF;
}
.platforms a:before {
	content: attr(data-os);
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
}
.platforms a:after {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 120px;
	line-height: 120px;
	text-align: center;
	font-size: 300%;
}

.platforms a:nth-child(1):after {
}
.platforms a:nth-child(2):after {
}
.platforms a:nth-child(3):after {
}

.installer {
    top: calc(50% - 150px);
    left: calc(50% - 300px);
    width: 600px;
    height: 300px;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    border-color: gray;
    border-style: solid;
    visibility: hidden;
    transform: scale(.9);
    opacity: 0;
    transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.installer:target {
	visibility: visible;
	transform: scale(1);
	opacity: 1;
}
.installer a.back {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 200%;
	color: #bbb;
}
.installer a.back:before {
}
.installer a.back:after {
	content: 'Geri';
	position: absolute;
	top: 7px;
	left: 30px;
	height: 20;
	line-height: 20px;
	font-size: 40%;
	text-align: center;
	color: #cacaca;
	border-radius: 5px;
	pointer-events: none;
	opacity: 0;
	transition: all .2s cubic-bezier(.67,.13,.1,.81);
}
.installer a.back:hover:after {
	left: 38px;
	opacity: 1;
}
.installer a.close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 200%;
	color: #bbb;
}
.installer a.close:before {
}
.installer a.close:after {
	content: 'KAPAT';
	position: absolute;
	top: 7px;
	right: 30px;
	height: 20;
	line-height: 20px;
	font-size: 40%;
	text-align: center;
	color: #cacaca;
	border-radius: 5px;
	pointer-events: none;
	opacity: 0;
	transition: all .2s cubic-bezier(.67,.13,.1,.81);
}
.installer a.close:hover:after {
	right: 38px;
	opacity: 1;
}

.installer .info {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 280px;
	width: 180px;
}
.installer .info:before {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 180px;
	height: 220px;
	line-height: 220px;
	text-align: center;
	font-size: 1000%;
	color: #3F8EFC;
}
.installer .info:after {
	content: attr(data-weight);
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 180px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 100%;
	letter-spacing: 5px;
	color: #aaa;
}
.installer#windows .info:before {
}
.installer#mac .info:before {
}
.installer#linux .info:before {
}

.installer .details {
	position: absolute;
	top: 10px;
	left: 210px;
	height: 200px;
	width: 360px;
	padding: 10px;
}
.installer .details p {
	margin: 0px;
	font-weight: bolder;
	font-size: 120%;
	color: #444;
}
.installer .details span {
	color: #cacaca;
}
.installer .details ul {
	padding-left: 0px;
	list-style: none;
	color: #888;
}
.installer .details ul li {
	margin-left: 0px;
	margin-bottom: 8px;
	opacity: 0;
	transition: all .3s cubic-bezier(.67,.13,.1,.81);
}
.installer .details ul li:before {
	content: '\f3d3';
	margin-right: 10px;
	color: #ccc;
}
.installer:target .details ul li {
	margin-left: 10px;
	opacity: 1;
}
.installer:target .details ul li:nth-child(1) {
	transition-delay: .1s;
}
.installer:target .details ul li:nth-child(2) {
	transition-delay: .2s;
}
.installer:target .details ul li:nth-child(3) {
	transition-delay: .3s;
}
.installer:target .details ul li:nth-child(4) {
	transition-delay: .4s;
}
.installer:target .details ul li:nth-child(5) {
	transition-delay: .5s;
}

.installer label {
	position: absolute;
	bottom: 20px;
	right: 60px;
	height: 40px;
	width: 260px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}
.installer label input {
	display: none;
}
.installer label span {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 40px;
	text-align: center;
	color: #fff;
	background: #3F8EFC;
}
.installer label input:checked ~ span {
	background: #87E544;
	animation: downloadSuccess 3.1s ease;
}
.installer label span:after {
	content: 'İNDİR';
	position: absolute;
	width: 80%;
	height: 100%;
	top: 0px;
	left: 10%;
}
.installer label input:checked ~ span:after {
	content: '✔ İNDİRİLDİ!';
	animation: downloadState 3s;
}
.installer label span:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	opacity: 0;
	background: rgba(255,255,255,.2);
}
.installer label input:checked ~ span:before {
	animation: downloadProgress 3s cubic-bezier(.67,.13,.1,.81);
}

@keyframes downloadSuccess {
	0%, 90% {
		background: #3F8EFC;
	}
	100% {
		background: #87E544;
	}
}

@keyframes downloadState {
	0%, 95% {
		content: 'İNDİRİLİYOR...'
	}
	100% {
		content: '✔ İNDİRİLDİ!'
	}
}

@keyframes downloadProgress {
	0% {
		width: 5%;
		opacity: 1;
	}
	35% {
		width: 17%;
	}
	64% {
		width: 51%;
	}
	81% {
		width: 70%;
	}
	90% {
		width: 86%;
		opacity: 1;
	}
	100% {
		width: 100%;
		opacity: 0;
	}
}


.solkosemenu-item,
.solkosemenu-open-button {
   background: #EEEEEE;
   border-radius: 100%;
   width: 80px;
   height: 80px;
   margin-left: -40px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 98px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.solkosemenu p {
    margin-top: -80px;
    margin-left: 50px;
    background-color: #70CC72;
    color: #ffffff;
    width: 150px;
    padding: 10px;
    border-radius: 100px;
    font-size: 15px;
    text-decoration:none;
}
.solkosemenu p:hover {
    margin-top: -80px;
    margin-left: 50px;
    background-color: #EEEEEE;
    color: #70CC72;
    width: 150px;
    padding: 10px;
    border-radius: 100px;
    font-size: 15px;
    text-decoration:none;
}

.solkosemenu-open {
   display: none;
}

.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.solkosemenu-open:checked + .solkosemenu-open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

.solkosemenu-open:checked + .solkosemenu-open-button .line-2 {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.solkosemenu-open:checked + .solkosemenu-open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

.solkosemenu {
    /* margin: auto; */
    position: fixed;
    z-index:1;
    /* top: 0; */
    bottom: 50px;
    left: 50px;
    right: 0;
    width: 80px;
    height: 80px;
    text-align: center;
    box-sizing: border-box;
    font-size: 26px;
}


/* .solkosemenu-item {
   transition: all 0.1s ease 0s;
} */

.solkosemenu-item:hover {
   background: #EEEEEE;
   color: #3290B1;
}

.solkosemenu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.solkosemenu-open-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.solkosemenu-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.solkosemenu-open:checked + .solkosemenu-open-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
   transform: translate3d(0px, -174.99997px, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
   transform: translate3d(0px, -82.47586px, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
   transform: translate3d(90.9466px, 52.47586px, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
   transform: translate3d(0.08361px, 104.99997px, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
   transform: translate3d(-90.86291px, 52.62064px, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
   transform: translate3d(-91.03006px, -52.33095px, 0);
}

.solkosemenu-open:checked ~ .solkosemenu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
   transform: translate3d(-0.25084px, -104.9997px, 0);
}

.blue {
   background-color: #669AE1;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
   color: #669AE1;
   text-shadow: none;
}

.green {
   background-color: #70CC72;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
   color: #70CC72;
   text-shadow: none;
}

.red {
   background-color: #FE4365;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
   color: #FE4365;
   text-shadow: none;
}

.purple {
   background-color: #C49CDE;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
   color: #C49CDE;
   text-shadow: none;
}

.orange {
   background-color: #FC913A;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
   color: #FC913A;
   text-shadow: none;
}

.lightblue {
   background-color: #62C2E4;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
   color: #62C2E4;
   text-shadow: none;
}

.credit {
   margin: 24px 20px 120px 0;
   text-align: right;
   color: #EEEEEE;
}

.credit a {
   padding: 8px 0;
   color: #C49CDE;
   text-decoration: none;
   transition: all 0.3s ease 0s;
}

.credit a:hover {
   text-decoration: underline;
}


/*vertical menü*/


.urunmenu a {
  color: #fff;
  text-decoration: none;
}


.urunmenu { background-color: #2c3e50; }

.urunmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

.urunmenu li,
.urunmenu .urunmenu-toggle {
  /*text-align: center;*/
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}


/*popup*/

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 0.1s;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
}

/*Let's make it appear when the page loads*/
.overlay:target:before {
    display: none;
}
.overlay:before {
  content:"";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 9;
}
.overlay .popup {
    background: #fff;
    border-radius: 5px;
    width: 500px;
    position: fixed;
    top: 19%;
    left: 30%;
      padding-top: 30px;
    /* margin: 70px auto; */
    z-index: 10;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.overlay:target .popup {
    top: -100%;
    left: -100%;
}

@media screen and (max-width: 768px){
  .box{
    width: 70%;
  }
  .overlay .popup{
       width: 70%;
    left: 15%;
    height: 300px;
  }
}

.urunmenu .dropdown > a:after {
  /*content: 'V';*/
  position: absolute;
  right: 15px;
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.urunmenu .dropdown.open,
.desktop .urunmenu li:hover { background-color: #34495e; }

.urunmenu .dropdown.open > a:after,
.desktop .urunmenu li:hover > a:after {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

.urunmenu .dropdown ul {
  position: relative;
  background-color: #34495e;
  display: none;
}

.urunmenu a {
  display: block;
  padding: 10px 15px;
}

.desktop .urunmenu { width: 100%; }

.desktop .urunmenu li {
  text-align: left;
    width: 262px;
}

.desktop .urunmenu li:hover ul {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  visibility: visible;
}

.desktop .urunmenu .dropdown:hover > a:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.desktop .urunmenu .dropdown > a:after {
  /*content: '>';*/
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.desktop .urunmenu .dropdown ul {
  top: 0;
  left: 100%;
      z-index: 1;
  position: absolute;
  display: block !important;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.desktop .urunmenu .urunmenu-toggle { display: none; }

  .urunmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  .urunmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  .urunmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  .urunmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  .urunmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  .urunmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  .urunmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  .urunmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  .urunmenu .submenu-button.submenu-opened:before {
    display: none;
  }