Your IP : 216.73.217.62
body * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Armata', sans-serif;
font-size: 15px;
line-height: 1.2;
text-align: left;
color: #00293c;
margin: 0;
padding: 0;
}
.wrapper {
width: 1100px;
margin: 0 auto;
}
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.img-holder {
line-height: 0
}
img {
max-width: 100%;
height: auto
}
.hide {
display: none
}
img,
a,
::before,
::after {
-webkit-transition: .7s all linear;
-o-transition: .7s all linear;
-moz-transition: .7s all linear;
transition: .7s all linear
}
a {
text-decoration: none;
}
header,
footer {
padding: 25px 0
}
header .img-holder {
max-width: 200px;
}
.header-group {
padding: 50px;
}
h1 {
font-size: 3rem;
font-weight: 800;
max-width: 600px;
margin: 0 auto;
}
h1 em {
font-size: 1.7rem;
display: block;
font-weight: 400;
text-align: right;
}
aside,
aside a {
color: #fff;
}
aside {
position: relative;
background: #00293c;
max-width: 350px;
margin-right: 50px;
padding: 50px 50px 0;
overflow: hidden;
}
aside h3 {
position: relative;
left: 0;
padding: 10px 50px;
width: 100%;
background: #003f59;
border: 1px solid #006088;
font-weight: 400;
-webkit-box-shadow: 0 5px 15px 0 #00151f;
-moz-box-shadow: 0 5px 15px 0 #00151f;
box-shadow: 0 5px 15px 0 #00151f;
font-size: 1.2em;
}
aside h3::before,
aside h3::after {
content: '';
width: 0;
height: 0;
position: absolute;
border-bottom: 20px solid transparent;
}
aside h3::before {
bottom: -38px;
left: 42px;
border-top: 22px solid #006088;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
z-index: 1;
}
aside h3::after {
bottom: -35px;
left: 40px;
border-top: 20px solid #003f59;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
z-index: 2;
}
aside .addon-info {
padding: 25px;
}
aside .img-holder {
width: 35px;
padding: 0 10px 0 0;
}
aside .info-block {
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 0;
}
aside .info-block img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%
}
aside .info-block:hover img {
-webkit-box-shadow: 0 0 15px 0 #79d7ff, inset 0 0 5px 0 #ffffff;
-moz-box-shadow: 0 0 15px 0 #79d7ff, inset 0 0 5px 0 #ffffff;
box-shadow: 0 0 15px 0 #79d7ff, inset 0 0 5px 0 #ffffff;
}
aside .info-block a {
color: #79d7ff;
position: relative;
padding: 5px 5px 5px 0;
}
aside .info-block a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: #79d7ff;
left: 0;
bottom: 0;
}
aside .info-block a:hover {
color: #fff
}
aside .info-block a:hover::after {
width: 100%;
background: #fff
}
.process-container {
width: 100%;
height: 20px;
background: #001924;
margin: 5px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
.process-bar {
background: #99aab5;
height: 100%;
text-align: right;
line-height: 20px;
font-size: 15px;
color: #001924;
padding-right: 5px;
}
svg.fixed-svg {
width: 100px;
position: absolute;
right: 5px;
top: -45px;
}
.information-section {
position: relative;
}
.information-section h3 {
font-size: 2.5em;
margin: 0 0 10px;
background: #ececec;
padding: 5px;
}
.information-section h3 a {
color: #00293c;
}
.education,
.experience {
margin: 70px 0;
}
.achievements::before,
.education::before,
.experience::before {
content: '';
width: 100px;
height: 3px;
position: absolute;
top: -35px;
left: 50%;
margin-left: -50px;
background: #00293c;
}
.info-top.flex-container {
background: #cecece;
padding: 5px 0;
}
.info-top .title,
.info-top.flex-container .date,
p.title.position {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 5px
}
p.title.position {
padding-right: 0
}
.info-top .title {
text-align: center
}
.info-container .info-top p {
margin: 0
}
.info-top.flex-container .date {
max-width: 170px;
font-size: 0.7em;
}
.info-container p,
.achievement-list>li,
.date-list>li {
padding: 5px
}
.info-container p {
margin: 0 0 10px;
}
.info-container {
font-size: 1.2em;
line-height: 1.5em;
}
.about-me p,
.achievement-list>li,
.date-list>li {
background: #ececec;
}
ul.unstylled-list {
list-style-type: none;
}
.achievement-list>li,
.date-list>li {
border-bottom: 1px solid #ddd;
margin: 0 0 10px;
}
p.title {
padding: 0;
font-weight: 700;
}
.duty-list li {
padding: 0 0 5px;
font-size: 0.9rem;
line-height: 1rem;
}
.duty-list li::before {
content: '- '
}
.info-bottom ul.unstylled-list {
padding-left: 20px
}
.date-list .info-bottom p,
.achievement-list .info-bottom p {
margin: 0;
padding: 10px 5px 5px;
}
.education .info-bottom p:nth-child(2) {
font-size: 12px;
padding: 0 5px 5px;
line-height: 14px;
}
.info-container .info-bottom {
font-size: 1.1rem;
line-height: 1.2rem;
}
.info-container h4 {
padding: 10px;
background: #00293c;
font-weight: 400;
font-size: 1.2em;
margin: 15px 0 0;
}
.info-container h4 a {
color: #fff
}
.achievement-content {
border: 1px solid #00293c;
}
.achievement-list {
padding: 5px 0 0;
}
.achievement-content .achievement-list>li:last-of-type {
margin: 0;
}
.achievement-content a {
color: #fff;
background: #003f59;
font-size: 15px;
text-transform: uppercase;
display: inline-block;
padding: 2.5px 10px;
margin: 5px;
}
.achievement-content a:hover {
background: #006088
}
footer {
padding: 25px;
background: #ececec;
margin: 25px 0 0;
}
footer .flex-container {
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
footer a {
margin: 0 25px;
-webkit-filter: saturate(0);
filter: saturate(0);
opacity: .6
}
footer a:hover {
-webkit-filter: saturate(100%);
filter: saturate(100%);
opacity: 1
}
footer h3 {
text-align: center;
margin: 0 0 25px;
font-size: 1.5em;
}
@media (min-width: 1200px) {
aside h3 {
position: absolute
}
aside .addon-info {
padding: 80px 0 25px;
}
}
@media (max-width: 1200px) {
.wrapper {
width: 750px
}
aside.flex {
margin: 0 0 55px;
max-width: 100%;
}
aside.flex,
section.flex.main-info {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-moz-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
padding: 25px 25px 0;
}
svg.fixed-svg,
aside h3::before,
aside h3::after {
display: none
}
aside h3 a,
.information-section h3 a,
.info-container h4 a {
display: block;
position: relative
}
aside h3 a::after,
.information-section h3 a::after,
.info-container h4 a::after {
content: '';
width: 25px;
height: 25px;
position: absolute;
display: block;
right: 10px;
top: 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
aside h3 a.active::after,
.information-section h3 a.active::after,
.info-container h4 a.active::after{
-webkit-transform: rotate(-45deg) scale(-1);
-moz-transform: rotate(-45deg) scale(-1);
-ms-transform: rotate(-45deg) scale(-1);
-o-transform: rotate(-45deg) scale(-1);
transform: rotate(-45deg) scale(-1);
}
aside h3 a::after,
.info-container h4 a::after {
width: 20px;
height: 20px;
margin-top: -16px;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
aside h3 a.active::after, .info-container h4 a.active::after{
margin-top: -5px;
}
.information-section h3 a::after {
width: 25px;
height: 25px;
margin-top: -20px;
border-left: 2px solid #00293c;
border-bottom: 2px solid #00293c;
}
.information-section h3 a.active::after{
margin-top: -5px;
margin-top: -5px;
}
}
@media (max-width: 768px) {
.wrapper {
width: 500px
}
.information-section h3 {
font-size: 1.5em;
padding: 10px;
}
.info-top .title,
.info-top.flex-container .date,
p.title.position {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-moz-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
text-align: center;
max-width: 100%;
padding: 0 5px;
}
header .flex {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-moz-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
margin: 0 auto;
}
.header-group {
padding: 25px 10px 0;
}
}
@media (max-width: 550px) {
.wrapper {
width: 90%
}
.information-section h3 a {
padding-right: 50px;
}
h1,
h1 em {
text-align: center;
}
h1 em {
font-size: 1.2rem;
}
h1 {
font-size: 2rem;
}
}
@media (max-width: 400px) {
aside h3 {
padding: 10px
}
.information-section h3 {
font-size: 1.1em;
padding: 18px 115px 18px 5px;
}
}
@media (max-width: 380px) {
aside .info-block {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
aside .info-block .img-holder {
padding: 5px 0;
}
.information-section h3 {
text-align: center;
padding: 10px;
}
}
.anim-head {
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
-webkit-animation: head 3s infinite alternate;
-moz-animation: head 3s infinite alternate;
-o-animation: head 3s infinite alternate;
animation: head 3s infinite alternate
}
.anim-knot {
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-animation: knot 2s linear infinite;
-moz-animation: knot 2s linear infinite;
-o-animation: knot 2s linear infinite;
animation: knot 2s linear infinite
}
.anim-wrench {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: wrench 2.5s ease-in infinite alternate;
-moz-animation: wrench 2.5s ease-in infinite alternate;
-o-animation: wrench 2.5s ease-in infinite alternate;
animation: wrench 2.5s ease-in infinite alternate;
}
.anim-star-1 {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-animation: star 2.5s linear infinite;
-moz-animation: star 2.5s linear infinite;
-o-animation: star 2.5s linear infinite;
animation: star 2.5s linear infinite
}
.anim-star-2 {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-animation: star 2.5s linear 1s infinite;
-moz-animation: star 2.5s linear 1s infinite;
-o-animation: star 2.5s linear 1s infinite;
animation: star 2.5s linear 1s infinite
}
@-webkit-keyframes head {
0 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg)
}
100% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg)
}
}
@-moz-keyframes head {
0 {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-moz-transform: rotate(8deg);
transform: rotate(8deg)
}
100% {
-moz-transform: rotate(-8deg);
transform: rotate(-8deg)
}
}
@-o-keyframes head {
0 {
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-o-transform: rotate(8deg);
transform: rotate(8deg)
}
100% {
-o-transform: rotate(-8deg);
transform: rotate(-8deg)
}
}
@keyframes head {
0 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg)
}
100% {
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg)
}
}
@-webkit-keyframes knot {
0,
50%,
100% {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0)
}
25% {
-webkit-transform: rotate(-8deg) translate(-10px, 0);
transform: rotate(-8deg) translate(-10px, 0);
}
75% {
-webkit-transform: rotate(8deg) translate(10px, 0);
transform: rotate(8deg) translate(10px, 0)
}
}
@-moz-keyframes knot {
0,
50%,
100% {
-moz-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0)
}
25% {
-moz-transform: rotate(-8deg) translate(-10px, 0);
transform: rotate(-8deg) translate(-10px, 0);
}
75% {
-moz-transform: rotate(8deg) translate(10px, 0);
transform: rotate(8deg) translate(10px, 0)
}
}
@-o-keyframes knot {
0,
50%,
100% {
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0)
}
25% {
-o-transform: rotate(-8deg) translate(-10px, 0);
transform: rotate(-8deg) translate(-10px, 0);
}
75% {
-o-transform: rotate(8deg) translate(10px, 0);
transform: rotate(8deg) translate(10px, 0)
}
}
@keyframes knot {
0,
50%,
100% {
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0)
}
25% {
-webkit-transform: rotate(-8deg) translate(-10px, 0);
-moz-transform: rotate(-8deg) translate(-10px, 0);
-o-transform: rotate(-8deg) translate(-10px, 0);
transform: rotate(-8deg) translate(-10px, 0);
}
75% {
-webkit-transform: rotate(8deg) translate(10px, 0);
-moz-transform: rotate(8deg) translate(10px, 0);
-o-transform: rotate(8deg) translate(10px, 0);
transform: rotate(8deg) translate(10px, 0)
}
}
@-webkit-keyframes wrench {
0,
100 {
-webkit-transform: translate(15px, 10px);
transform: translate(15px, 10px)
}
25% {
-webkit-transform: translate(20px, -50px) rotate(15deg);
transform: translate(20px, -50px) rotate(15deg)
}
50% {
-webkit-transform: translate(25px, -75px) rotate(25deg);
transform: translate(25px, -75px) rotate(25deg)
}
}
@-moz-keyframes wrench {
0,
100 {
-moz-transform: translate(15px, 10px);
transform: translate(15px, 10px)
}
25% {
-moz-transform: translate(20px, -50px) rotate(15deg);
transform: translate(20px, -50px) rotate(15deg)
}
50% {
-moz-transform: translate(25px, -75px) rotate(25deg);
transform: translate(25px, -75px) rotate(25deg)
}
}
@-o-keyframes wrench {
0,
100 {
-o-transform: translate(15px, 10px);
transform: translate(15px, 10px)
}
25% {
-o-transform: translate(20px, -50px) rotate(15deg);
transform: translate(20px, -50px) rotate(15deg)
}
50% {
-o-transform: translate(25px, -75px) rotate(25deg);
transform: translate(25px, -75px) rotate(25deg)
}
}
@keyframes wrench {
0,
100 {
-webkit-transform: translate(15px, 10px);
-moz-transform: translate(15px, 10px);
-o-transform: translate(15px, 10px);
transform: translate(15px, 10px)
}
25% {
-webkit-transform: translate(20px, -50px) rotate(15deg);
-moz-transform: translate(20px, -50px) rotate(15deg);
-o-transform: translate(20px, -50px) rotate(15deg);
transform: translate(20px, -50px) rotate(15deg)
}
50% {
-webkit-transform: translate(25px, -75px) rotate(25deg);
-moz-transform: translate(25px, -75px) rotate(25deg);
-o-transform: translate(25px, -75px) rotate(25deg);
transform: translate(25px, -75px) rotate(25deg)
}
}
@-webkit-keyframes star {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-moz-keyframes star {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-moz-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-o-keyframes star {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-o-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes star {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg)
}
}