/* -------------------------------------------------------------------
    global styles
 -------------------------------------------------------------------*/
*                           { font-family: "Segoe UI", sans-serif; box-sizing:border-box;}
a                           {color: #cd0a0a;text-decoration: none;display:inline-block;transition: all 0.3s;}
a:hover, a:active, a:focus  { color: #00f; text-decoration: underline;}
ul, ol, h1, h2, h3, h4, h5, h6, p { margin: 0; }
button:active, button:focus { outline: none !important; text-decoration: none; }
body                        {background: #888;overflow-x: hidden;font-size: 16px;line-height: 1.23;overflow-y:scroll;}
img                         { border-radius: 2px; }
:focus                      { outline: none !important; }
table.table     { width:100%; border:1px solid #ccc; border-collapse:collapse;}
table.table th  { padding:4px 8px; border-bottom:1px solid #ccc; text-align:left; background-color:rgba(100,100,100,0.1);}
table.table td  { padding:4px 8px; border-top:1px dashed #ccc;vertical-align:top;}
table.table tbody tr:first-child td { border-top:0;}
table.table     { width:100%; }

.hid                    { display:none !important; }
.hid2                   { display:none !important; }
.clear                  { clear: both; font-size: 0; height: 0; line-height: 0; }
.no-selection, .no-selection * { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; }
.right                  { float:right;}
.left                   { float:left;}
.sel { background-color:#F4C340; color:#fff; padding:0 2px;}

.custom-scroll::-webkit-scrollbar         {width: 12px; }
.custom-scroll::-webkit-scrollbar-track   {border:1px solid #ddd;}
.custom-scroll::-webkit-scrollbar-thumb   {background-color:#ddd;}
.custom-scroll::-webkit-resizer           {}

.container                            {margin:0 auto;width: 1000px;position:  relative;} 


/* -------------------------------------------------------------------
    layout
 -------------------------------------------------------------------*/

header.header                             {padding: 0 20px;position: fixed;top: 0;left: 0;right: 0;height:70px;z-index: 1000;transition: all 0.5s;}
header.header > .paper                    {position: absolute;top: 0;left: 0;right: 0;bottom:0px;background: #fff;transition: all 0.5s;}
header.header.on > .paper                 { border-bottom-color: transparent; box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); background-color:#efefef;}
header.header .container                  { height:  70px; }
header.header .logo                       { position:absolute; left:0; top:15px;} 
header.header .name                       { font-size:28px; text-transform:uppercase; } 
header.header .langmenu                   { position:absolute;right: -90px;top: 25px;} 
header.header .langmenu > .lang           { width:32px; height:22px; display:inline-block;cursor:pointer; background:url(images/sprite.png) no-repeat; margin-left:5px;opacity:0.2; transition:opacity 0.5s;} 
header.header .langmenu > .lang.ru        { background-position:-520px 0; border: 1px solid #ccc;} 
header.header .langmenu > .lang.en        { background-position:-480px 0; border: 1px solid transparent;} 
header.header .langmenu > .lang.on        { opacity:0.8;} 
header.header .langmenu > .lang:hover     { opacity:1;} 
header.header .mainmenu                   { position:absolute;left: -63px;top: -8px;} 
header.header.on .mainmenu > .i           {background-color: #efefef; }
header.header .mainmenu > .l              { height:56px;width:56px;position:absolute;left: 0;top: 0px;background: url(images/sprite.png) -390px 0; cursor:pointer;} 
header.header .mainmenu > .i              { transition:height 0.5s;  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);  width:170px; height:0px; overflow:hidden; position:absolute;left: -13px;;top: 62px;background-color: #fff; z-index:-1;} 
header.header .mainmenu:hover > .i        { height:170px; } 
header.header .mainmenu > .i > div        {padding:20px;} 
header.header .mainmenu > .i > div > a    {padding:5px 0;display:block; text-transform:uppercase; display:list-item; margin-left:15px;} 
header.header .menu                       {margin-left:200px;text-transform:uppercase;text-align: right;padding-left:0px;height: 70px;line-height:  70px;} 
header.header ul                          {list-style: none;font-size:12px;font-weight:bold;display:  inline-block;line-height: 20px;} 
header.header li                          {display:inline-block;padding:5px 20px;} 
header.header a                           { color: #333;  text-decoration: none; border-bottom:1px solid #fff; }
header.header a.on                        { color: #cd0a0a;}
header.header a.hover                     { color: #cd0a0a; border-bottom:1px solid #cd0a0a; text-decoration: none; }
header.header.on a                        { border-bottom:1px solid #efefef;}
header.header.on a.hover                  { color: #cd0a0a; border-bottom:1px solid #cd0a0a; text-decoration: none; }

#myname              { opacity:0;transition:opacity 0.5s;}
.noname #myname      { opacity:1;}

section.section                       { margin: 20px 0;   }
section.section > .container          {padding: 40px;background-color:  #fff;border-top: 1px solid #e3e3e3;box-shadow: 5px 5px 15px -4px rgba(0,0,0,0.5);}
section.section h1                    { padding: 0 0 20px 0; }
section.section h2                    { padding: 0 0 10px 0; font-size:16px;color:#333;}
section.section h2 > a                { padding-left: 20px; font-size:14px;color:#999; font-weight:normal; text-transform:uppercase;}
section.section p                     { padding: 10px 0; }
section.section ul                    { padding: 5px 0; }
section.section .text > p             { font-size:14px; color:#66666; }

/* -------------------------------------------------------------------
    customs
 -------------------------------------------------------------------*/


/* -------------------------------------------------------------------
    sections
 -------------------------------------------------------------------*/

section.section .about                         { margin-top: 100px; border-top: none;  }
section.section .about > .text                 { float:left; width:500px }
section.section .about > .text > .info         { margin-left: -10px;}
section.section .about > .text > .info a       { padding: 8px 10px;border-radius:5px;}
section.section .about > .text > .info a.cv    { background-color:#eee;text-decoration:none;}
section.section .about > .text > .info a.cv.hover   { background-color:#eef;}
section.section .about > .photo                { float: right;width: 400px;height: 300px;}


section.section .skills                         { }
section.section .skills > .text                 {float:left;width:30%;padding-right: 40px;}
section.section .skills > .text img             { padding-top:20px; opacity:0.7;}
section.section .skills > .list                 { float:left;width:70%;padding-top:10px;}
section.section .skills > .list > .item         {display:inline-block;padding: 0 60px 40px 0px;width: 49%;vertical-align:top;}
section.section .skills > .list > .item li      {opacity:0.7;padding-right:8px;padding-bottom: 8px;list-style:none;display:inline-block;}
section.section .skills > .list > .item li::after             { content:',' }
section.section .skills > .list > .item li:last-child::after  { content:'' }



section.section .experience                         { }
section.section .experience > .text                 {float:left;width:30%;padding-right:40px;}
section.section .experience > .list                 { float:left; width:70%; padding-top:10px; }
section.section .experience > .list > .item         { margin: 0 0px 40px 0px;}
section.section .experience > .list > .item p.date  { font-style:italic; font-size:12px;}
section.section .experience > .list > .item > p       { opacity:0.7; }
section.section .experience > .list > .item li      { opacity:0.7;list-style: square outside;margin-left:20px;padding:4px 0;}
section.section .experience > .list > .item li > p  { padding-top:0;}
section.section .experience > .list > .item li > p > a  { font-size:11px; padding-right:20px; }
section.section .experience > .list > .item li > p > a::after  {display:inline-block;height:12px;width:12px;background:url(images/sprite.png) 0 0;content:'';margin-left: 2px;}



section.section .education h2 > a                   { display:block;padding:5px 0 0 0;}



section.section .projects                       { }
section.section .projects  ul                   { margin-left:20px;}
section.section .projects  ul li > img            {display:block;margin: 5px 0 10px 0; max-width:100%; border-radius:5px;}
section.section .projects  p > img                {display:block;margin: 5px 0 10px 0; max-width:100%; border-radius:5px;}
section.section .projects .list                 { margin:40px -40px 0 -40px;}
section.section .projects .list .item           { width:270px; height:310px; position:relative; margin:0 0 40px 40px; display:inline-block; vertical-align:top; cursor:pointer;}
section.section .projects .list .item > .l            { width:270px; height:270px; position:absolute; left:0; top:0; -border:1px solid #ddd; border-radius:5px; overflow:hidden; box-shadow: 2px 3px 10px 1px rgba(0,0,0,0.2);}
section.section .projects .list .item.on > .l         { box-shadow: 5px 5px 10px 1px rgba(130,150,200,0.6);}
section.section .projects .list .item > .l > .i       { width:270px; height:270px; background-size:cover; position:absolute; left:0; top:0; transition:all 0.5s;}
section.section .projects .list .item:hover > .l > .i { width:370px; height:370px; left:-50px; top:-50px; }
section.section .projects .list .item > .t            {font-size:12px;padding-top:5px;position:absolute;left:0;bottom:0;right:0;text-align:center;height:30px;}

section.section .projects .list.scr .item         { width:270px; height:190px; position:relative; margin:0 0 40px 40px; display:inline-block; vertical-align:top; cursor:pointer;}
section.section .projects .list.scr .item > .l            { width:270px; height:150px; position:absolute; left:0; top:0; -border:1px solid #ddd; border-radius:5px; overflow:hidden; box-shadow: 2px 3px 10px 1px rgba(0,0,0,0.2);}
section.section .projects .list.scr .item > .l > .i       {width:270px;height:150px;background-size:cover;position:absolute;background-position:  center;left:0;top:0;transition:all 0.5s;}
section.section .projects .list.scr .item:hover > .l > .i { width:370px; height:200px; left:-50px; top:-25px; }

section.section .projects .list .row.on      { display:block; box-shadow: 5px 5px 15px -1px rgba(153,153,153,0.5);}
section.section .projects .list .row         { display:none;padding: 10px 20px 10px 20px;color:#333;background-color:#E6EBF2;min-height:40px;border:1px solid #ccc;border-radius:10px;margin: -10px 140px 40px 40px;position:relative;transition: margin 0.2s ease-in-out;}
section.section .projects .list .row         { linear-gradient(180deg, rgba(196,210,239,1) 0%,rgba(230,235,242,1) 100%);}
section.section .projects .list .row         { linear-gradient(180deg, rgba(190,190,190,1) 0%,rgba(230,230,230,1) 100%);}
section.section .projects .list .row > .arrow  { width:55px; height:28px; position:absolute; top:-28px; background:url(images/sprite.png) no-repeat -200px 0; transition: left 0.2s ease-in-out;}
section.section .projects .list .row[value="1"]   { margin-left:40px; margin-right:430px;}
section.section .projects .list .row[value="2"]   {margin-left:170px;margin-right: 190px;}
section.section .projects .list .row[value="3"]   {margin-left:330px;margin-right: 60px;}
section.section .projects .list .row.wide         {margin-left:40px;margin-right: 60px;}
section.section .projects .list .row[value="1"] > .arrow  { left:110px; }
section.section .projects .list .row[value="2"] > .arrow  { left:290px; }
section.section .projects .list .row[value="3"] > .arrow  { left:450px; }
section.section .projects .list .row.wide[value="1"] > .arrow  { left:110px; }
section.section .projects .list .row.wide[value="2"] > .arrow  { left:420px; }
section.section .projects .list .row.wide[value="3"] > .arrow  { left:740px; }
section.section .projects .list .row > .inner   { padding:10px 0; transition:opacity 0.5s;}
section.section .projects .list .row.on > .inner { padding:10px 0; opacity:1;}
section.section .projects .list .row.on.loading > .inner { opacity:0.1;}
section.section .projects .list .row .inner .logo img  { width:100%; border-radius:6px;}
section.section .projects .list .row .inner .descr     { font-size:13px; padding-top:10px; }
section.section .projects .list .row .inner .descr  p  { padding-bottom:0;}
section.section .projects .list .row.wide .col              { display:inline-block; width:45%; vertical-align:top; }
section.section .projects .list .row.wide .col:first-child  { margin-right:50px;}

section.section .system         { font-size:12px;}


/* -------------------------------------------------------------------
    imageviewer
 -------------------------------------------------------------------*/
.imageviewer            { position:relative;}
.imageviewer .image     {position:absolute;left:0;top:0;bottom:0;right:0;text-align:center;pointer-events: none;}
.imageviewer .pager     {position:absolute;top:0;bottom: 30px;opacity:0.3;}
.imageviewer .pager:hover  { opacity:1;cursor:pointer;transition:opacity 0.3s ease-in-out;}
.imageviewer .pager > .i   {position:absolute;top: 50%;height: 50px;width: 50px;background: url(images/sprite.png) no-repeat;}
.imageviewer .pager.l > .i   {background-position: -650px -250px;left: -60px;}
.imageviewer .pager.r > .i   {background-position: -700px -250px;right: -60px;}
.imageviewer .pager.l { left:0;width:10%;}
.imageviewer .pager.r { right:0;width:10%;}
.imageviewer .image img {height:100%;/* padding-bottom: 30px; */pointer-events: auto;}
.imageviewer .imagedots            {position:absolute;left:0;bottom: -30px;right:0;text-align:center;}
.imageviewer .imagedots > .dot     { background-color: #fff; display: inline-block; height: 10px; width: 10px; margin: 0 5px; border: 2px solid #999; cursor: pointer; border-radius: 10px;}
.imageviewer .imagedots > .dot.on  { background-color: #999; border: none; }

/* -------------------------------------------------------------------
    smoothlyviewer
 -------------------------------------------------------------------*/
.smoothlyviewer            { position:relative;}
.smoothlyviewer .viewport  { position:absolute;left:0;top:0;bottom:0;right:0; overflow:hidden;}
.smoothlyviewer .imagelist { position:absolute;left:0;top:0;bottom:0; width:10000px; }
.smoothlyviewer .i         {height:100%;max-width:100%;background-size: cover !important; display:inline-block; float:left;}
.smoothlyviewer .imagedots            {position:absolute;left:0;bottom: -30px;right:0;text-align:center;}
.smoothlyviewer .imagedots > .dot     { background-color: #fff; display: inline-block; height: 10px; width: 10px; margin: 0 5px; border: 2px solid #999; cursor: pointer; border-radius: 10px;}
.smoothlyviewer .imagedots > .dot.on  { background-color: #999; border: none; }

/* -------------------------------------------------------------------
    imageviewer
 -------------------------------------------------------------------*/
.ctab                       { }
.ctab > .tabs               {height: 25px;}
.ctab > .tabs > .tab        {display:inline-block;height: 20px;margin: 0 25px 0 0;text-transform:uppercase;color:#333;font-size: 14px;cursor:pointer;border-bottom:1px solid #fff; transition:all 0.3s;}
.ctab > .tabs > .tab.on     {color: #cd0a0a;cursor: default;}
.ctab > .tabs > .tab.on:hover   {border-bottom:1px solid #cd0a0a;}
.ctab > .tabs > .tab:hover      {border-bottom:1px solid #333;}
.ctab > .pages              {  }
.ctab > .pages > .page      { padding: 10px 0;opacity:0;transition:opacity 0.7s; position:fixed; left:-10000px;}
.ctab > .pages > .page.on   { opacity:1;position:relative; left:0;}