@font-face {
 font-family:"Nassim";
 src:url("/statics/font/bbc-nassim.eot");
 src:url("/statics/font/bbc-nassim.eot?#iefix") format('embedded-opentype'),
     url("/statics/font/bbc-nassim.woff") format("woff"),
     url("/statics/font/bbc-nassim.ttf") format("truetype");
 font-weight:normal;
 font-style:normal;
}

@font-face {
 font-family: 'Listicons';
 src: url('/statics/font/fontello.eot');
 src: url('/statics/font/fontello.eot?#iefix') format('embedded-opentype'),
      url('/statics/font/fontello.woff') format('woff'),
      url('/statics/font/fontello.ttf') format('truetype'),
      url('/statics/font/fontello.svg#fontello') format('svg');
 font-weight: normal;
 font-style: normal;
}

body{
 padding: 0;
 margin: 0;
 background: #eee;
}

.header{
 height: 100px;
 background: #fff;
 padding: 20px 40px;
}
.header .logo{
 display: block;
 height: 100px;
 position: relative;
}
.beta-version{
 position: absolute;
 display: inline-block;
 padding: 2px 5px;
 border: 1px #933131 solid;
 color: #933131;
 font: 8pt tahoma;
 border-radius: 3px;
 white-space: nowrap;
}
.content-rtl .beta-version{
 right: 120px;
}
.content-ltr .beta-version{
 left: 100px;
}


.header .nav{
 display: block;
 padding: 0;
 margin-top: 70px;
 list-style: none;
}
.header .nav > li{
 position: relative;
}
.header .nav > li > a{
 display: block;
 padding: 0 20px;
 height: 30px;
 font: 15pt/13pt 'Nassim', 'Tahoma';
 line-height: 30px;
 text-decoration: none;
 color: #000;
 transition: color 0.5s ease;
}
.header .nav > li > a:hover{
 color: #fc0;
}

.header .nav > li > div{
 display: none;
 position: absolute;
 padding: 20px 10px;
 background: rgba(0, 0, 0, 0.9);
 white-space: nowrap;
 z-index: 9999;
}
.header .nav > li > div > a{
 display: block;
 color: #fff;
 white-space: nowrap;
 text-decoration: none;
}
.header .nav > li > div > div{
 display: table;
 color: #fff;
}
.header .nav > li > div > div > a{
 display: block;
 height: 30px;
 font: 10pt 'Tahoma';
 text-decoration: none;
 color: #fff;
}
.header .nav > li > div > div > a:hover{
 color: #fc0;
 cursor: pointer;
}
.header .nav > li.submenu:hover{
 background: rgba(0, 0, 0, 0.9);
 color: #fff;
 border-radius: 3px 3px 0 0;
}
.header .nav > li.submenu:hover > a{
 color: #fff;
}
.header .nav > li.submenu:hover > div{
 display: block;
}

.header .nav-lang{
 display: block;
 position: absolute;
 font-size: 0;
}
.header .nav-lang > *{
 display: inline-block;
 height: 20px;
 font: 9pt 'Tahoma', 'Nassim';
 vertical-align: top;
 line-height: 20px;
 color: #555;
}
.header .nav-lang > span{
 margin: 0 10px;
}
.header .nav-lang > i{
 width: 20px;
 height: 20px;
 background: url(/statics/img/ioc.png) -58px 0;
}
.header .nav-lang > a{
 height: 19px;
 text-decoration: none;
 color: #555;
}
.header .nav-lang > a:hover{
 color: #3e83c7;
}
.header .nav-lang > a.selected{
 color: #3e83c7;
}

.content{
 background: #fff;
}

.page-title{
 padding: 40px;
 margin: 0;
 display: block;
 font: 20pt 'Nassim'; 
}


.footer{
 display: block;
 background: #eee;
 color: #777;
 overflow: auto;
 padding: 20px 40px;
}

.footer > div{
 display: table;
 width: 100%;
}
.footer > div > div{
 display: table-cell;
 vertical-align: top;
}

.footer .footer-contact{
 display: table;
 max-width: 330px;
}
.footer .footer-contact:first-child{

}
.footer .footer-contact > p{
 display: block;
 margin: 0;
 padding: 0 0 10px 0;
 font: 15pt 'Nassim';
 white-space: nowrap;
 color: #000;
}
.footer .footer-contact > a{
 display: block;
 font: 12pt 'Nassim';
 color: #333;
}

.footer .footer-contact > span{
 display: table-row;
}
.footer .footer-contact > span > *{
 display: table-cell;
 font: 12pt 'Nassim';
 padding-bottom: 5px;
}
.footer .footer-contact > span > i{
 white-space: nowrap;
 color: #333;
}

.footer ul{
 display: block;
 list-style: none;
 padding: 0;
}
.footer ul li > i{
 display: block;
 margin: 0;
 padding: 0 0 10px 0;
 font: 15pt 'Nassim';
 white-space: nowrap;
 color: #000;
}
.footer ul li > span{
 display: block;
 font: 12pt 'Nassim';
 color: #333;
}
.footer ul li > div{
 padding-top: 10px;
}
.footer ul li .inp{
 display: inline-block;
 vertical-align: top;
}
.footer ul li a.nts{
 display: inline-block;
 vertical-align: top;
 height: 30px;
 padding: 0 10px;
 background: #fc0;
 color: #000;
 font: 12pt 'nassim';
 line-height: 30px;
 text-align: center;
 border-radius: 3px;
}
.footer ol{
 display: block;
 overflow: auto;
 list-style: none;
 margin: 0;
 padding: 0;
}

.footer ol li img{
 height: 80px;
}
.footer ol +span{
 display: block;
 padding-top: 10px;
 font: 15pt 'nassim';
 color: #000;
}

.footer-copyright{
 padding-top: 20px;
}


.title-cover{
 display: block;
 padding: 0;
 margin: 0;
 height: 100px;
 font: 24pt 'Nassim';
 text-indent: 80px;
 background: #000;
 line-height: 100px;
 color: #fff
}


.inp{
 display: block;
 padding: 5px;
 height: 18px;
 border: 1px #555 solid;
 outline: 0;
 font: 10pt 'Tahoma','Nassim';
 line-height: 18px;
 border-radius: 3px;
}

.btt{
 display: inline-block;
 height: 38px;
 padding: 0 20px;
 text-decoration: none;
 border: 1px #fc0 solid;
 background: #fc0;
 color: #000;
 font: 15pt 'Nassim';
 line-height: 38px;
 border-radius: 3px;
}
.btt:hover{
 background: #fff;
 color: #fc0;
 cursor: pointer;
}

.ltr{
 direction: ltr !important;
}

/*
  languages compatibility
  right to left
*/
.content-rtl .header .nav{
 margin-right: 20px;
}

.content-rtl .header{
}

.content-rtl .header .nav{
 float: right;
}
.content-rtl .header .nav > li{
 float: right;
}
.content-rtl .header .nav > li > a{
 direction: rtl;
}
.content-rtl .header .logo{
 float: right;
}
.content-rtl .header .nav > li > div{
 border-radius: 3px 0 3px 3px;
 right: 0;
}
.content-rtl .header .nav > li > div > a{
 direction: rtl;
 text-align: right;
}

.content-rtl .header .nav > li > div > div{
 direction: rtl;
}
.content-rtl .header .nav > li > div > div > *{
 direction: rtl;
 text-align: right;
}

.content-rtl .header .nav-lang{
 left: 40px;
 direction: rtl;
}
.content-rtl .header .nav-lang > i{
 margin-left: 10px;
}

.content-rtl .footer{
 direction: rtl;
}
.content-rtl .footer-contact{
 float: right;
 direction: rtl;
}
.content-rtl .footer-contact > *{
 direction: rtl;
}
.content-rtl .footer-contact > span > i{
 padding-left: 30px;
}
.content-rtl .footer ul{
 direction: rtl;
 float: right;
 margin: 0 0 0 20px;
}
.content-rtl .footer ol +span{
 text-align: left;
 margin-left: 30px;
}
.content-rtl .footer ol li{
 float: left;
 margin-left: 30px;
}

.content-rtl .page-title{
 direction: rtl;
 text-align: right;
}
.content-rtl .title-cover{
 direction: rtl;
}

.content-rtl .footer > span{
 direction: rtl;
 text-align: right;
}

#subscribe-form p{
 display: inline-block;
 padding: 5px 10px;
 background: #23a02d;
 color: #fff;
 font: 12pt 'Nassim';
 border-radius: 3px;
}

/*
  languages compatibility
  left to right
*/
.content-ltr .header .nav{
 margin-left: 20px;
}

.content-ltr .header{
}

.content-ltr .header .nav{
 float: left;
}
.content-ltr .header .nav > li{
 float: left;
}
.content-rtl .header .nav > li > a{
 direction: ltr;
}
.content-ltr .header .logo{
 float: left;
}
.content-ltr .header .nav > li > div{
 border-radius: 0 3px 3px 3px;
 left: 0;
}
.content-ltr .header .nav > li > div > a{
 direction: ltr;
 text-align: left;
}

.content-ltr .header .nav > li > div > div{
 direction: ltr;
}
.content-ltr .header .nav > li > div > div > *{
 direction: ltr;
 text-align: left;
}

.content-ltr .header .nav-lang{
 right: 40px;
 direction: ltr;
}
.content-ltr .header .nav-lang > i{
 margin-right: 10px;
}

.content-ltr .footer{
 direction: ltr;
}
.content-ltr .footer-contact{
 float: left;
 direction: ltr;
}
.content-ltr .footer-contact > *{
 direction: ltr;
}
.content-ltr .footer-contact > span > i{
 padding-right: 30px;
}
.content-ltr .footer ul{
 direction: ltr;
 float: left;
 margin: 0 20px 0 0;
}

.content-ltr .footer ol +span{
 text-align: right;
 margin-right: 30px;
}
.content-ltr .footer ol li{
 float: right;
 margin-right: 30px;
}

.content-ltr .page-title{
 direction: ltr;
 text-align: left;
}
.content-ltr .title-cover{
 direction: ltr;
}

.content-ltr .footer > span{
 direction: ltr;
 text-align: left;
}


/*
  Responsivity
*/
@media all and (max-width: 1000px)
{
 .header{
  height: auto;
 }

 .header > *{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
 }
 .header .nav{
  display: table !important;
 }

}