body, html {
  padding:0;
  margin:0;
  background:#fff;
  font-family: 'Montserrat', Arial, sans-serif;
}

body:after {
    content: "";
    background:#dee3d1;
    width: 50%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    -moz-transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: transform 650ms cubic-bezier(1, 0, 0, 1);
    -moz-transition: transform 650ms cubic-bezier(1, 0, 0, 1);
    -ms-transition: transform 650ms cubic-bezier(1, 0, 0, 1);
    -o-transition: transform 650ms cubic-bezier(1, 0, 0, 1);
    transition: transform 650ms cubic-bezier(1, 0, 0, 1); }

body.loadComplete:after {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@keyframes appear {
  100% {
    opacity: 1;
  }
}

h2.title { text-transform:uppercase; font-weight:700; font-size:20px; margin:40px 0 0 0; }
p { font-size:16px; line-height: 22px; }
p a { text-decoration: none; color:#323339; position: relative; }
p a:after { content: ""; position: absolute; z-index: 0; right: 0; width: 0; bottom: -5px; background: #323339; height: 2px; transition-property: width; transition-duration: 0.4s; transition-timing-function: ease-out; }
p a:hover:after { left: 0; right: auto; width: 100%; }

.header { position: relative; width:100%; padding:60px 0 0; z-index: 90; }
.header .inner { margin:0 8%; }
.header .social-media { display: inline-block; opacity: 0; animation: 1s forwards 1.3s 1 appear;}
.header .social-media .item { float:left; margin:0 22px 0 0; }
.header .social-media .item a { position: relative; color:#323339; padding:0 0 7px 0; }
.header .social-media .item a:after { content: ""; position: absolute; z-index: 0; right: 0; width: 0; bottom: -5px; background: #323339; height: 2px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }
.header .social-media .item a:hover:after { left: 0; right: auto; width: 100%; }
.header .social-media .item a .fa { vertical-align: text-bottom; }
.header .social-media .item.facebook { font-size:17px; }
.header .social-media .item.linkedin { font-size:17px; }
.header .social-media .item.linkedin a { padding:0 0 6px 0; }
.header .social-media .item.linkedin .fab { margin-top:2px; }
.header .social-media .item.email { font-size:16px; margin:0; }
.header .social-media .item.email a { padding:0 0 5px 0; }
.header .social-media .item.email .far { margin-top:4px; }

.header .logo { color:#323339; text-transform:uppercase; position: absolute; top:61px; left:50%; transform:translateX(-50%); }
.header .logo:before { content:""; bottom:-28px; left:50%; opacity: 0; position: absolute; background:#dee3d1; height:6px; width:35px; animation: 1s forwards 1.3s 1 appear; }
.header .logo:after { content:""; bottom:-28px; left:50%; opacity: 0; transform:translateX(-100%); position: absolute; background:#fff; height:6px; width:35px; animation: 1s forwards 1.3s 1 appear; }
.header .logo h2 { font-weight:900; font-size:24px; line-height:22px; margin:0; opacity: 0; animation: 1s forwards 1.3s 1 appear; }
.header .logo .ilona { letter-spacing: 4px; }
.header .logo .kater { letter-spacing: 3.3px; }

.header .page-title { font-family: 'Playfair display'; padding-top:70px; font-size:100px; line-height: 100px; text-align: center; font-weight:700; opacity: 0; animation: 0.7s forwards 0.3s 1 appear;}

.content { position: relative; overflow: hidden; }

.container-left { float:left; width:50%; position: relative; z-index: 90; opacity: 0; animation: 1s forwards 1.7s 1 appear;}
.container-left .inner { width:70%; float:right; }
.container-left .main-pic { float:right; width:100%; max-width: 460px;}
.container-left .main-pic img { width:100%; }
.container-left .experience { position: relative; margin:96px 0 0 0; padding:53px 20% 100px 0; box-sizing: border-box; -webkit-box-sizing:border-box; display: block; width:100%; overflow: hidden; float:right; max-width:460px;}
.container-left .experience:before { content:""; width:calc(100% - 20%); height:6px; position: absolute; top:0; left:0; background:#323339;}
.container-left .experience h2.title { position: absolute; left:-80px; top:132px; margin:0; transform:rotate(90deg)}
.container-left .experience .text { padding:0 0 0 75px; }
.container-left .experience .text > p { margin-top:0; }
.container-left .experience .text .item a { color:#389254; }
.container-left .experience .text .item .title { font-weight:700; }

.container-right { float:right; width:calc(50% - 150px); position: relative; z-index: 90; opacity: 0; animation: 1s forwards 1.7s 1 appear; }
.container-right .personal-info h2 { color:#6abe84; }
.container-right .personal-info .email { position: relative; }
.container-right .personal-info .address .fa, .container-right .personal-info .birthdate .fa, .container-right .personal-info .phone .fa, .container-right .personal-info .email .fa { font-size:17px; color:#6abe84; position: absolute;}
.container-right .personal-info .address p, .container-right .personal-info .birthdate p, .container-right .personal-info .phone p, .container-right .personal-info .email p { padding:0 0 0 25px; }
.container-right .personal-info .birthdate .fa { font-size:15px; }
.container-right .personal-info .email .fa { font-size:16px; top:1px; }

.container-right .education { padding:27px 0 0 0; }
.container-right .education h2 { color:#6abe84; }
.container-right .education .item .fa { font-size:16px; color:#6abe84; position: absolute;}
.container-right .education .item p { padding:0 0 0 25px; }
.container-right .education .item .graduated { font-weight:700; }

.container-right .languages { background:#6abe84; margin:97px 0 0 0; padding: 65px 60px; }
.container-right .languages h2.title { font-size:60px; color:#fff; margin:0; padding:0; }
.container-right .languages .item { position: relative; }
.container-right .languages .item h3 { text-transform: uppercase; color:#fff; font-weight:700; }
.container-right .languages .item .icon { position: absolute; left:0; top:46px; }
.container-right .languages .item p { padding:0 0 0 30px; }

.skills { float:left; width:100%; margin:20px 0 100px 0; position: relative; z-index: 90; opacity: 0; animation: 1s forwards 1.7s 1 appear; }
.skills .inner { margin:0 8%; }
.skills .divider { position: absolute; top: 0; left:0; width: 100%;}
.skills .divider:before { content:""; bottom:0; left:50%; transform:translateX(-100%); position: absolute; background:#fff; height:6px; width:35px; }
.skills .divider:after { content:""; bottom:0; left:50%; position: absolute; background:#dee3d1; height:6px; width:35px; }
.skills h2.title { text-align: center; margin:30px 0 0 0; }

.skills .left { position: relative; float:left; width:50%; margin:40px 0 0 0; padding:0; text-align: right; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.skills .left .skill { position: relative; padding:10px 0; overflow: hidden; }
.skills .left .skill:last-child { border-bottom:0; }
.skills .left .skill .title { float:right; padding:0 50px 0 20px; width:170px; }
.skills .left .skill .rating { float:right; position: absolute; right:250px; top:50%; transform:translateY(-50%); }
.skills .left .skill .rating .item { width:30px; height:8px; background:#6abe84; float:left; margin:0 0 0 5px; }

.skills .right { position: relative; float:right; width:50%; margin:40px 0 0 0; padding:0; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.skills .right .skill { position: relative; padding:10px 0;  overflow: hidden; }
.skills .right .skill:last-child { border-bottom:0; }
.skills .right .skill .title { float:left; padding:0 20px 0 50px;  width:170px; }
.skills .right .skill .rating { float:left; position: absolute; left:250px; top:50%; transform:translateY(-50%); }
.skills .right .skill .rating .item { width:30px; height:8px; background:#6abe84; float:right; margin:0 0 0 5px; }

.footer { padding:20px 0 ; float:left; width:100%; margin:20px 0 0 0; position: relative; z-index: 90; opacity: 0; animation: 1s forwards 1.7s 1 appear; }
.footer .inner { margin: 0 8%; }
.footer .divider { position: absolute; top: 0; left:0; width: 100%;}
.footer .divider:before { content:""; bottom:0; left:50%; transform:translateX(-100%); position: absolute; background:#fff; height:6px; width:35px; }
.footer .divider:after { content:""; bottom:0; left:50%; position: absolute; background:#dee3d1; height:6px; width:35px; }
.footer .copyright { width:50%; float:left; }
.footer .copyright p { font-size:14px;  }

.footer .social-media { width:50%; float:right; padding:14px 0 0 0; text-align: right; }
.footer .social-media .inner { display: inline-block; margin:0; }
.footer .social-media .item { float:left; margin:0 22px 0 0; }
.footer .social-media .item a { position: relative; color:#323339; padding:0 0 7px 0; }
.footer .social-media .item a:after { content: ""; position: absolute; z-index: 0; right: 0; width: 0; bottom: -5px; background: #323339; height: 2px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }
.footer .social-media .item a:hover:after { left: 0; right: auto; width: 100%; }
.footer .social-media .item a .fa { vertical-align: text-bottom; }
.footer .social-media .item.facebook { font-size:17px; }
.footer .social-media .item.linkedin { font-size:17px; }
.footer .social-media .item.linkedin a { padding:0 0 6px 0; }
.footer .social-media .item.linkedin .fab { margin-top:2px; }
.footer .social-media .item.email { font-size:16px; margin:0; }
.footer .social-media .item.email a { padding:0 0 5px 0; }
.footer .social-media .item.email .far { margin-top:4px; }




.