/*  Fonts  */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular.woff') format('woff'),
         url('../fonts/Roboto-Regular.ttf') format('truetype'),
         url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold.woff') format('woff'),
         url('../fonts/Roboto-Bold.ttf') format('truetype'),
         url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light.woff') format('woff'),
         url('../fonts/Roboto-Light.ttf') format('truetype'),
         url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium.woff') format('woff'),
         url('../fonts/Roboto-Medium.ttf') format('truetype'),
         url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.eot');
    src: url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Black.woff') format('woff'),
         url('../fonts/Roboto-Black.ttf') format('truetype'),
         url('../fonts/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/Roboto-Thin.eot');
    src: url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin.woff') format('woff'),
         url('../fonts/Roboto-Thin.ttf') format('truetype'),
         url('../fonts/Roboto-Thin.svg#Roboto-Thin') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*  General CSS  */
html{font-size:18px;}
body{    
	font-family:'Roboto-Light', 'Arial', Sans-serif;	
	background:#fff;
	color:#000;
}
h1, h2, h3, h4, h5 ,h6{
    color: #000;
    font-family: 'Roboto-Bold', 'Arial', Sans-serif;
	font-weight: normal;
}

h1{font-size: 2em;}
h2{font-size: 1.5em;}
h3{font-size: 1.28em;}
h5{font-size: 1.25em;}
h6{font-size: .75em;}

.clearfix:before, .clearfix:after {content: " ";display: table;}  
.clearfix:after {clear: both;}   
.clearfix {*zoom: 1;}
.container{
	max-width:1600px; 
	margin:auto;
	position:relative;
}
.mobile-nav{display:none;}
ul li{list-style:none;display:inline-block;}
a:hover, .page-language a:hover, .menu a:hover{text-decoration:underline;}
.pink{color:#db005d;}
.grey_{background:#c3c3c3;}
.pink_{background:#db005d;}
.grey{color:#909090;}
.w100{width:100%;}.w90{width:90%;}.w80{width:80%;}.w60{width:60%;}.w40{width:40%;}
.wrap-box{left:0;right:0;margin:auto;overflow:hidden;}

/*header*/
.pre-text:after, .black-line:after, .black-line:before, #experience li:before, li.point:after, .button a:after{position:absolute;content:'';display:inline-block;}
#header{
	/* padding-top:70px; */
	/* padding-bottom:56px; */
	overflow:hidden;
	color:#fff;
	text-align:center;
	background:#db005d;
/* 	height: 100vh; */
	display: flex;
	max-width:1600px;left:0;right:0;margin:auto;
}
.wrap-name{/* top:50vh; */margin: auto;width:100%;}
.menu a, .pre-text{font-size:1.3rem;color:#fff;text-decoration:none;}
.pre-text{position:relative;}
.pre-text:after{
	background:url("../images/icon.png") no-repeat -27px 0;
	width:9px;height:18px;
	right:-35px;top:3px;
}
.portfolio-menu{margin-bottom:56px;}
.portfolio-menu li{margin-right:28px;}
.portfolio-menu li.pre-text{margin-right:56px;}
#header .name{
	background:#000;		
	padding:28px 32px;
}
.profession{padding:28px 32px;}
.cv-menu ul{font-size:0;}
.cv-menu .menu li{margin:0 2%;text-align:center;}

/*about me in three words*/
#about-me{text-align:center;}
#about-me{
	background:#fff url("../images/black-wave.jpg") repeat-x bottom center;
	padding:71px 0 72px 0;
	box-shadow:0 0 3px #000;
	font:2.1rem 'Roboto-Thin';
}
#about-me .paragraph{margin-bottom:48px;}
#slider{margin-bottom:42px;}
.button a{
	display:inline-block;
	position:relative;
	color:#fff;
	text-transform:uppercase;text-decoration:none;
	font:1.333rem 'Roboto-Medium';
	background:#db005d;
	padding:15px 32px 16px 32px;
}
/* .line, .button a:after{width:4px;left:0;right:0;margin:auto;background:#db005d;}
.button a:after{height:250px;top:40px;} */

/*experience*/
.line{position:absolute;height:9999px;	
}
#experience{
	position:relative;
	background:#000;color:#fff;
	font-size:1.4rem;
	overflow:hidden;	
	z-index:201;
}
.white-box{height:38px;width:100%;background:#fff;}
.big{text-transform:uppercase;font-family:'Roboto-Bold';}
#experience .left, #experience .right{width:50%;}
#experience .left{float:left;text-align:right;}
#experience .right{float:right;}
#experience .name{font-family:'Roboto-Medium';margin-bottom:6px;}
.year{font-size:14px;color:#939393;margin-bottom:8px;}
.text{font-size:1rem;line-height:1.2rem;}
#experience li{
	display:block;position:relative;
	padding:26px 0 36px 0;
}
/* #experience li:before{
	background:#fff;
	height:1px;width:99999px;top:0;
	z-index:99;
} */
li.point:after{
	background:#db005d;
	width:76px;height:76px;border-radius:38px;
	top:-38px;right:-38px;
	text-align:center;
	font-size:1rem;line-height:76px;
	z-index:100;
}
li.college:after{content:'1998';}
li.university:after{content:'2003';}
li.fce:after{content:'2009';}
li.osan:after{content:'2007';left:-38px;right:auto;}
li.bec:after{content:'present';bottom:-38px;top:auto;}
li.freelancer:after{content:'2003';display:none;}
li.vantage:after{content:'2012';display:none;}
#experience li.university{padding-top:75px;padding-bottom:85px;}
#experience li.osan{padding-top:67px;padding-bottom:85px;}
#experience .left li{padding-right:16%;padding-left:12%;}
#experience .left li.college{padding-left:20%;}
#experience .left li:before{right:0;}
#experience .right li:before{left:0;}
#experience .left .pink{font-size:3.6rem;line-height:3rem;margin-bottom:8px;}
#experience.ru .left .pink{font-size:3rem;}
#experience .left .white{font-size:2.94rem;}
#experience .left .big{padding:73px 16% 64px 0;}
#experience .right .white{
	font-size:7rem;line-height:6.5rem;
	position:relative;
	margin-top:168px;padding-top:8px;
	border-top:4px solid #db005d;
}
#experience.ru .right .white{font-size:6rem;line-height:5.7rem;}
#experience .right .white:before{
	content:'';display:inline-block;position:absolute;
	background:url("../images/icon.png") no-repeat 0 -331px;
	width:246px;height:168px;
	left:0;right:0;top:-170px;margin:auto;
}
#experience .right .big{padding:23px 0 42px  16%;}
#experience .right .big p{display:inline-block;}
#experience .right .pink{font-size:3.4rem;line-height:3.1rem;padding-left:12px;}
#experience.ru .right .pink{font-size:4.2rem;line-height:3.9rem;}
#experience .right li{padding-left:16%;padding-right:20%;}
li.osan .info{margin-bottom:18px;}

/*skills*/
#skills{
	text-align:center;
	padding:30px 0 98px 0;
	box-shadow:0 0 3px #000;
	position:relative;z-index:200;
	overflow:hidden;
}
#skills ul{font-size:0;}
.big_{text-transform:uppercase;font-size:7.556rem;position:relative;display:inline-block;}
.ru .big_{font-size:5.8rem;}
#skills .big_{margin-bottom:96px;}
#skills .big_:before, #skills .big_:after{display:inline-block;content:'';position:absolute;background:url("../images/icon.png") no-repeat 0 0;}
#skills .big_:after{	
	bottom:-72px;left:-19px;
	background-position:-6px -275px;
	width:617px;height:35px;
}
#skills .big_:before{
	background-position:-245px -308px;
	width:193px;height:192px;	
	right:-220px;
}
#skills .left, #skills .right{text-align:left;}
#skills .left{float:left;width:62%;}
#skills .right{float:right;width:33%;margin-left:5%;padding-top:12px;}
#skills .right li{display:block;font-size:1rem;}
#skills .left li{width:50%;font-size:1.333rem;margin-bottom:34px;}
#skills.ru .left li{font-size:1rem;vertical-align:top;}
#skills .left p{padding-top:30px;padding-left:20px;}
.circle{	
	position:relative;
    width:86px; height:86px;
	border-radius:43px;
    text-align:center;  
	background:#db005d;
	background-image:linear-gradient(to right, transparent 50%, #c3c3c3 0);
	float:left;
}
.circle span{
	position:absolute;
	display:inline-block;
	width:66px;height:66px;
	border-radius:33px;
	background:#fff;
	z-index:300;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
	color:#db005d;
	font:1rem/66px 'Roboto-Medium';
}
.circle:before{
	content: '';
	display: block;
	margin-left: 50%;
	height: 100%;
	border-radius: 0 100% 100% 0 / 50%;
	background-color: inherit;
	transform-origin: left;	
}
.circle.per90:before{transform: rotate(.1turn);}
.circle.per80:before{transform: rotate(.2turn);}
.circle.per60:before{transform: rotate(.4turn);}

.skill-name{float:left;}
#skills .grey_, #skills .pink_{height:8px;}
#skills .name{margin-bottom:8px;}
#skills .grey_{margin-bottom:19px;}
.skill-box{padding-top:28px;padding-left:10%;padding-right:10%;}
.languages li{font-size:1.333rem;}
.languages li.eng{width:33%;}.languages li.fr{width:33%;}.languages li.sw{width:33%;}.languages li.free{width:0%;}
/* .languages li.eng{width:40%;}.languages li.fr{width:25%;}.languages li.sw{width:25%;}.languages li.free{width:10%;} */
.languages .right_{position:relative;}
/* .languages .right_:before{
	content:'';display:inline-block;position:absolute;
	background:url("../images/icon.png") no-repeat 0 -102px;
	width:655px;height:172px;
	left:-43px;top:0;bottom:0;margin:auto;
} */
.lang-name{margin-bottom:5px;}
.languages .grey{font-size:1rem;}

/*passions*/
#passions{
	background:#db005d url("../images/pink-wave.jpg") repeat-x bottom center;color:#fff;
	text-align:center;
	padding:58px 0 104px 0;
}
#passions .big_{margin-bottom:45px;}
#passions ul{font-size:0;}
#passions li{
	font:1.333rem 'Roboto-Medium';
	width:22%;
	padding-top:200px;
	position:relative;
}
#passions li:before{
	content:'';display:inline-block;position:absolute;
	background:url("../images/icon.png") no-repeat 1000px 1000px;
	width:176px;height:176px;
	top:0;left:0;right:0;margin:auto;
}
#passions li.draw:before{background-position:0 -503px;}
#passions li.swim:before{background-position:-176px -503px;}
#passions li.bike:before{background-position:-352px -503px;}
#passions li.dance:before{background-position:-528px -503px;}

/*portfolio*/
#portfolio{
	text-align:center;
	/* padding:53px 0 70px 0; */
}
#portfolio .big_{font:3.556rem 'Roboto-Bold';margin-bottom:40px;}
#portfolio ul{font-size:0;}
#portfolio ul li{
	position:relative;
	width:25%;/* max-width:328px; */
	vertical-align:top;
	/* background:#db005d; */	
}
#portfolio p a{
	font:2.556rem/2.5rem 'Roboto-Thin';
	color:#fff;
	position:absolute;
	top:0;bottom:0;left:0;right:0;margin:auto;
	height:90px;
}
#portfolio ul a{display:inline-block;color:#fff;text-decoration:none;}
#portfolio ul li.one-stroke p a{height:45px;}
#page{text-align:center;}
#page .button a:after{display:none;}

/*footer*/
#footer{
	text-align:center;
/* 	padding-bottom:100px;
	background:url("../images/black-wave.jpg") repeat-x bottom center;
	overflow:hidden; */
}
#footer .button{position:fixed;bottom:0;left:0;right:0;margin:auto;/* margin-bottom:70px; */}
#footer .left, #footer .right{width:50%;}
#footer .left{float:left;}#footer .right{float:right;}
#footer .right:after{
	content:'';display:inline-block;position:absolute;
	background:url("../images/icon.png") no-repeat -449px -332px;
	width:100px;height:74px;
	top:30px;right:50px;
}