.services{
}

.services-layout{
}


.services-dialogs{
 padding: 20px;
 font-size: 0;
 max-width: 1100px;
 margin: auto;
}
.services-dialogs > div{
 display: inline-block;
 width: 50%;
 vertical-align: top
}
.services-dialogs > div > div{
 padding: 20px;
}
.services-dialogs > div > div > div{
 border-radius: 3px;
 padding-bottom: 20px;
}
.services-dialogs > div > div > div > h2{
 display: block;
 margin: 0;
 padding: 20px;
 background: #fc0;
 color: #000;
 font: 17pt 'Nassim';
 border-radius: 3px;
}

.services-dialogs > div > div > div > span{
 display: block;
 margin: 0; padding: 20px;
 border-radius: 0 0 3px 3px;
}
.services-dialogs > div > div > div > span > span{
 display: block;
 height: 60px;
 color: #000;
 font: 14pt 'Nassim';
 line-height: 30px;
 white-space: pre-wrap;
 border-radius: 0 0 3px 3px;
 overflow: hidden;
}
.services-dialogs > div > div > div > span > span > a{
 display: inline-block;
 height: 22px;
 border-bottom: 1px #fff solid;
 font: 14pt 'Nassim';
 color: #fc0;
 text-decoration: none;
}
.services-dialogs > div > div > div > span > span > a:hover{
 border-bottom: 1px #fc0 solid;
}

.services-dialogs > div > div > div > i{
 display: block;
 width: 38px;
 height: 38px;
 border:1px #333 solid;
 margin: auto;
 border-radius: 100%;
 font: 20pt 'Listicons';
 text-align: center;
 line-height: 38px;
 cursor: pointer;
}



.services-chart{
 white-space: pre;
 text-align: center;
 margin-top: 80px;
}
.services-chart > div{
 position: relative;
 width: 320px;
 height: 400px;
 background: url(/statics/img/lamp.png);
 margin: auto;
}
.services-chart > div > *{
 position: absolute;
 display: block;
 width: 100%;
 height: 30px;
 font: 17pt 'Nassim';
 direction: rtl;
 cursor: pointer;
}
.services-chart > div > * > span{
 display: inline-block;
}
.services-chart > div > * > span:after{
 display: block;
 position: relative;
 width: 30px;
 height: 30px;
 border: 1px #000 solid;
 font: 14pt 'Listicons';
 content: '\e814';
 border-radius: 50%;
 line-height: 30px;
 text-align: center;
}
.services-chart > div > *:hover{
 color: #fc0;
}
.services-chart > div > *:hover > span:after{
 border-color: #fc0;
}

.services-chart > div > em{
 top: -30px;
}
.services-chart > div > em +i{
 top: 30px;
 left: -90%;
 text-align: right;
}
.services-chart > div > em +i +i{
 top: 30px;
 left: 90%;
 text-align: left;
}

.services-chart > div > i +b{
 top: 140px;
 left: -105%;
 text-align: right;
}
.services-chart > div > i +b +b{
 top: 140px;
 left: 105%;
 text-align: left;
}

.services-chart > div > b +p{
 top: 245px;
 left: -90%;
 text-align: right;
}
.services-chart > div > b +p +p{
 top: 245px;
 left: 90%;
 text-align: left;
}



.services-chart > div > em > span:after, .services-chart > div > i +i > span:after, .services-chart > div > b +b > span:after, .services-chart > div > p +p > span:after{
 top: -33px;
 right: -42px;
}

.services-chart > div > em +i > span:after, .services-chart > div > i +b > span:after, .services-chart > div > b +p > span:after{
 top: -33px;
 left: -100%;
 margin-right: 10px;
}


/*
  languages compatibility
  right to left
*/
.content-rtl .services-dialogs > div > div > div > h2{
 direction: rtl;
}
.content-rtl .services-dialogs > div > div > div > span{
 direction: rtl;
}

.content-rtl .services-dialogs{
 direction: rtl;
}

/*
  languages compatibility
  left to right
*/
.content-ltr .services-dialogs > div > div > div > h2{
 direction: ltr;
}
.content-ltr .services-dialogs > div > div > div > span{
 direction: ltr;
}

.content-ltr .services-dialogs{
 direction: ltr;
}