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

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

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

h2{
font-family: TitilliumLight, sans-serif;
font-size: 16px;
color: #999;
margin: 10px 0 5px 0;
}

body{
padding-top: 30px;
height: 100%;
width: 100%;
background: #f4dacf;
background: -moz-linear-gradient(45deg,  #f4dacf 0%, #d2ae9c 50%, #e1b38f 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f4dacf), color-stop(50%,#d2ae9c), color-stop(100%,#e1b38f));
background: -webkit-linear-gradient(45deg,  #f4dacf 0%,#d2ae9c 50%,#e1b38f 100%);
background: -o-linear-gradient(45deg,  #f4dacf 0%,#d2ae9c 50%,#e1b38f 100%);
background: -ms-linear-gradient(45deg,  #f4dacf 0%,#d2ae9c 50%,#e1b38f 100%);
background: linear-gradient(45deg,  #f4dacf 0%,#d2ae9c 50%,#e1b38f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4dacf', endColorstr='#e1b38f',GradientType=1 );
}

body,img { 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

#cv{
width: 768px;
height: 1050px;
background: #f5f5f5;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow:    0px 2px 5px 0px #777;
-webkit-box-shadow: 0px 2px 5px 0px #777;
box-shadow:         0px 2px 5px 0px #777;
margin-left: auto;
margin-right: auto;
font-family: TitilliumRegular, sans-serif;
font-size: 16px;
}

#head_cv{
height: 90px;
padding: 40px 60px 0px 40px;
}

#head_cv img{
margin-top: 20px;
float: left;
}

#head_cv ul{
float: right;
color: #db3e2b;
}

#head_cv li{
width: 100%;
text-align: right;
line-height: 1.3;
}

.headings img{
margin: 20px 0 15px 20px;
}

.headings_bottom{
float: left;
}

.headings_bottom img{
margin: 20px 0 15px 20px;
}

.year{
width: 700px;
margin-left: 30px;
height: 40px; 
}

.year aside{
float: left;
color: #999;
width: 190px;
margin-bottom: 5px;
}

.year article{
float: left;
color: #444;
width: 510px;
margin-bottom: 5px;
}

.position{
color: #444;
}

.pos_about{
color: #999;
font-size: 14px;
}

#me{
color: #444;
font-size: 14px;
width: 700px;
margin-left: 30px;
line-height: 1.3;
}

#me p{
padding-bottom: 5px;
}

#specialization{
width: 347px;
height: 266px;
background: url("cv/spec_img.png") no-repeat;
margin-left: 15px;
margin-top: 10px;
}

#skills{
padding-left: 30px;
}

.bar{
width: 320px;
height: 15px;
background: white;
z-index: 5;
}

.bar_over{
background: #db3e2b;
background: -moz-linear-gradient(left,  #db3e2b 0%, #e2562b 50%, #e68629 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#db3e2b), color-stop(50%,#e2562b), color-stop(100%,#e68629));
background: -webkit-linear-gradient(left,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
background: -o-linear-gradient(left,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
background: -ms-linear-gradient(left,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
background: linear-gradient(to right,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db3e2b', endColorstr='#e68629',GradientType=1 );
z-index: 6;
height: 15px;
position: absolute;
margin-top: -15px;
}

#ps{
width: 256px;
}

#ai{
width: 205px;
}

#id{
width: 225px;
}

#hc{
width: 205px;
}

#jq{
width: 95px;
}

#php{
width: 150px;
}

footer{
height: 90px;
width: 100%;
text-align: center;
padding-top: 20px;
color: white;
}

@media only screen 
and (min-width: 320px) and (max-width: 480px) {

#cv{
width: 320px;
height: 1780px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
line-height: 1.2;
}

#head_cv{
height: 120px;
padding: 15px 60px 0 20px;
}

#head_cv img{
margin-top: 20px;
}

#head_cv ul{
float: left;
margin-top: 10px;
}

#head_cv li{
text-align: left;
}

.headings img{
margin: 20px 0 15px 10px;
}

.headings_bottom img{
margin: 20px 0 15px 10px;
}

.year{
width: 290px;
margin-left: 15px;
}

.year article{
width: 290px;
}

#me{
width: 290px;
margin-left: 15px;
}

#me p{
padding-bottom: 5px;
}

#specialization{
width: 290px;
height: 222px;
background: url("cv/spec_img_mob.png") no-repeat;
}

#skills{
padding-left: 15px;
}

.bar{
width: 290px;
height: 15px;
background: white;
z-index: 5;
}

.bar_over{
background: #db3e2b;
background: -moz-linear-gradient(left,  #db3e2b 0%, #e2562b 50%, #e68629 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#db3e2b), color-stop(50%,#e2562b), color-stop(100%,#e68629));
background: -webkit-linear-gradient(left,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
background: -o-linear-gradient(left,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
background: -ms-linear-gradient(left,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
background: linear-gradient(to right,  #db3e2b 0%,#e2562b 50%,#e68629 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db3e2b', endColorstr='#e68629',GradientType=1 );
z-index: 6;
height: 15px;
position: absolute;
margin-top: -15px;
}

#ps{
width: 240px;
}

#ai{
width: 195px;
}

#id{
width: 215px;
}

#hc{
width: 195px;
}

#jq{
width: 90px;
}

#php{
width: 135px;
}

footer{
height: 20px;
width: 100%;
text-align: center;
padding-top: 20px;
color: white;
}
}