/* 
not minified, so u can view/copy easily 
copy right : none 
a lot of thanks to http://sassMeister.com/
more than half of the code start with sass
*/

html {
height:100%;
}

body {
background-color:#f5f6f8;
height:100%;
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}

.image_profile img {
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
width:200px;
height:200px;
position:absolute;
top:50px;
left:50%;
margin-left:-100px;
z-index:100;
border:#fff;
background:#FFF;
border-radius:100px;
overflow:hidden;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
border-style:solid;
border-width:5px;
}

.navbar {
background-color:#4a4d5a;
width:100%;
height:150px;
padding-bottom:0;
margin-bottom:0;
}

.myname a{
color:#f5f6f8;
font-size:50px;
padding-top:20px;
padding-left:40px;
padding-right:none;
float:left;
width:100%;
text-decoration:none;
}

.navbar .nav_button {
float:right;
padding-right:15px;
margin-top: 30px;
display:inline-block;
}

.nav_button a:link,.nav_button a:visited {
font-size:17px;
border-radius:6px;
color:#4a4d5a;
background-color:#f5f6f8;
text-decoration:none;
padding:5px 15px 3px;
}

.nav_button a:hover {
font-size:17px;
border-radius:6px;
color:#f5f6f8;
background-color:#4a4d5a;
text-decoration:none;
border:1px solid #f5f6f8;
padding:5px 14px 3px;
}

.nav_button a:active {
font-size:17px;
border-radius:6px;
color:#4a4d5a;
background-color:#f5f6f8;
text-decoration:none;
padding:5px 14px 3px;
}

.div_light {
width:100%;
padding-top:20px;
background-color:#f5f6f8;
padding-bottom:50px;
position:relative;
}

.div_dark {
width:100%;
padding-top:20px;
background-color:#4a4d5a;
padding-bottom:50px;
position:relative;
}

.summary_content {
width:100%;
}

p.blocktext {
margin-left:auto;
margin-right:auto;
width:50%;
font-weight:700;
font-size:24px;
text-align:center;
padding-top:130px;
color:#4a4d5a;
}

.div_light .line {
position:absolute;
top:-15px;
left:50%;
width:1px;
background-color:#4a4d5a;
height:130%;
}

.div_dark .line {
position:absolute;
top:-15px;
left:50%;
width:1px;
background-color:#f5f6f8;
height:130%;
}

.div_light .line_end {
position:absolute;
top:100px;
left:50%;
width:1px;
background-color:#f5f6f8;
height:300%;
}

.div_light .circle_txt {
color:#f5f6f8;
padding-top:38px;
padding-left:18px;
font-size:24px;
}

.div_dark .circle_txt {
color:#4a4d5a;
padding-top:38px;
padding-left:18px;
font-size:24px;
}

.square_top {
width:31px;
height:31px;
-webkit-transform:rotate(315deg);
transform:rotate(315deg);
bottom:auto;
top:-15px;
background:inherit;
left:50%;
position:relative;
margin:-15px;
}

.div_dark .section_title {
float:right;
padding-right:15px;
top:100px;
color:#f5f6f8;
}

.div_light .section_title {
float:right;
padding-right:15px;
top:100px;
color:#4a4d5a;
}

.item {
width:50%;
display:inline-block;
min-height:140px;

position:relative;
padding-top:50px;
}

.div_dark .item .circle {
background-color:#f5f6f8;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
border-top-left-radius:50%;
border-top-right-radius:50%;
box-sizing:border-box;
height:100px;
width:100px;
position:absolute;
margin-left:-50px;
margin-top:0;
display:inline;
zoom:1;
}

.div_light .item .circle {
background-color:#4a4d5a;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
border-top-left-radius:50%;
border-top-right-radius:50%;
box-sizing:border-box;
height:100px;
width:100px;
position:absolute;
margin-left:-50px;
margin-top:0;
display:inline;
zoom:1;
}

.item .item_div {
display:inline-block;
zoom:1;
margin-left:60px;
float: right;
}

.item .item_div .item_title {
font-weight:700;
font-size:20px;
width:auto;

}

.item .item_div .item_content {
display:inline;
zoom:1;
height:100%;
width:80%;
}

.div_light .item_content,.div_light .item_title {
color:#4a4d5a;
}

.div_dark .item_content,.div_dark .item_title {
color:#f5f6f8;
}



div.circle:nth-child(even){
left:100%;
}

div.circle:nth-child(odd){
left:0%;
}




p{
    color:#f5f6f8;
    font-size:1px;
    text-align:center
}


/*------------ more less css ------------------*/


.comment {
	width: 400px;
	
}
.div_dark .item .item_content a.morelink {
	text-decoration:underline;
	outline: none;
    color:#f5f6f8;
    
}

.div_light .item .item_content a.morelink {
	text-decoration:underline;
	outline: none;
    color:#4a4d5a;
}
.morecontent span {
	display: none;
}

.div_light .item_content a{
    text-decoration:underline;
	outline: none;
    color:#4a4d5a;
}

.div_dark .item_content a{
    text-decoration:underline;
	outline: none;
    color:#f5f6f8;
}

.blocktext a{
    text-decoration:underline;
	outline: none;
    color:#4a4d5a;
}

/*-------------------------text icon-----------------------------------*/
.text_icon{
    font-size  :36px;
    padding-left:16px;
}

.go_up{
    cursor: pointer;
}