/* CSS Document */
/* ==========================================================================
   Theme Name: Konefix
   Theme URI: http://www.pankogut.com/themes/konefix
   Author: PanKogut
   Author URI: http://www.pankogut.com
   Description: Konefix is a responsive portoflio theme for creative with minimal design, flexible grid layout.

   Version: 1.0.0
   License: Creative Commons Attribution 4.0 International License
   License URI: http://creativecommons.org/licenses/by/4.0/
   Tags: green, right-sidebar, flexible-width, featured-images, bootstrap
   Text Domain: konefix
   ========================================================================== */

/* ==========================================================================
   Fonts
   ========================================================================== */

/*@import url(http://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Alegreya:700);*/

/* ==========================================================================
   Base
   ========================================================================== */
j{
	font-size:12px;
	letter-spacing:0.2em;
}
c {
	font-size:12px;
	color:indianred;
	line-height: 1em;
}
.none {
	display:none;
}
li {
line-height:20px;	
	margin:0 0 0px 0;
	}
p {
    margin: 0 0 10px 0;
	letter-spacing:0.1em;
}

a {
	color:#222;
  letter-spacing:0.1em;
	text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a.brand{
	width:100px;
}
.img-circle{
	border-radius:0%;
	background-color: rgba(100,110,140,0.7);
	border: 10px solid rgba(130,160,200,1);
	margin:0 0 0px 0;
}
.img-center-{
	width:100%;
	max-width:270px;
	
	height:auto;
	
}
.img-center{
	width:auto;
	max-width:380px;
	height:auto;
	max-height:250px;
}
.img-100{
	width:100%;
	height:100%;	
}
.img-70{
	width:70%;
	height:70%;	
}
.img-50{
	width:50%;
	height:50%;	
}
.radius{
	border-radius:10px;
}
.img-sum{
	position:relative;
	border-radius:20%;
	width:80px;
	height:80px;
	margin-top:10px;
}
.max-w{
	max-width:380px;
}
.img-responsive {
	width:300px;
	height:440px;
	//overflow-y:hidden;
	position:relative;
	display:table;
	text-align: center;
}
.img-responsive- {
	//transform:translateX(-50%);
	width:250px;
	height:165px;
	overflow-y:none;
	position:relative;
}

img{
	width:auto;
	height:100%;
}

j {
 	font-size:10px;
 	letter-spacing:0.1em;
	line-height:13px;
	//color:#fff;
	margin:-10px 0 0 0 ;
}
e { 
 	font-size:12px;
 	letter-spacing:0.1em;
	color:#fff;
}
.space {
	padding-top:30px;
}
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif,はんなり明朝;
// 	background-color:#eee;

//	background: url(../img/top/bg6.gif) repeat fixed;
    font-size: 14px;
    line-height: 22px;
    //color: #fff;
    padding: 0px 0 30px 0;
	
}

#sp {
 background: url(../img/d/diki1011.gif) repeat fixed;	
 
 background-color:#237;
}

#sp .container{
	//background: url(../img/top/bg.gif) repeat fixed;	
background-color:rgba(110,123,150,0.95);
}
#diki{
	 background: url(../img/d/diki11.gif) repeat fixed;	
	
}
.ps
{
	position: absolute;
	left:0px;
	z-index:-1;
	width:100%;
}
#social {
		text-align:center;
}
 .social-share{
	display:inline-block;
	//list-style:none;

	padding:0;margin:5;
	}
ul.social-share li{
	display:inline-block;
	}
ul.social-share li a{
	display:inline-block;
	color:#fff;
	background:#404040;
	width:25px;height:25px;
	line-height:25px;
	text-align:center;
	border-radius:2px;
	}
ul.social-share li a:hover{
	background:#ffc0cb //#75a6ff;
	color:#fff;
	}
/* ==========================================================================
   container
   ========================================================================== */
.wrap {
	
	//background-color: rgba(140,175,200,0.6);
	//background: url("./img/commit/d-thinking.jpg") fixed;
	height:300px;
	top: 20%;
	left: 0;
	right: 0;
	//overflow:hidden;
	
	}


.blck {
	margin:0px;
	padding:0px;
	width:100%;
	border-radius:50%;
	background-color:rgba(244,244,244,0.5);
}
.wall{
	background-color:#eee;
}

header h2{
	margin-top:100px;
}

.container{
	//background: url(../img/top/bg.gif) repeat fixed;	
	//background-color:rgba(85,119,147,0.7);
	overflow:hidden;
}

.row {
	 margin-right: -15px; 
	margin-left: -15px; 
	}
	
/* ==========================================================================
   Headlines
   ========================================================================== */

h1 {
    font-family: 'CenturyGothic', serif;
    font-weight: 200;
    line-height: 46px;
    font-size: 46px;
    margin: 20px 0 25px 0;
}
h1 :hover{
	text-decoration:none;
}

h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    font-size: 21px;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
}
h3 {
	letter-spacing:0.1em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */



.btn-default {
color: #fff;
background-color: #37b;
border-color: #ccc;
}

.btn-default:hover {
color: #fff;
background-color: #999;
border-color: #ccc;
}

.btn-default:focus,
.btn-default:active {
color: #fff;
background-color: #333;
border-color: #ccc;
outline: none;
 -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-original {

border-radius:60px;
border-color:#ccc;
background-color:#bbb;


color: #fff;
background-color: #37b;
border-color: #ccc;
}

.btn-original:hover {
color: #fff;
background-color: #999;
border-color: #ccc;
}

.btn-original:focus,
.btn-original:active {
color: #fff;
background-color: #333;
border-color: #ccc;
outline: none;
 -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-primary {
color: #ccc;
background-color: #1166cc;
border-color: #1166bb;
}

.btn-primary:hover {
color: #ccc;
background-color: #1166ee;
border-color: #1166ee;
}

.btn-primary:focus,
.btn-primary:active,
.open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #1188ee;
border-color: #1199ee;
outline: none;
 -webkit-box-shadow: none;
          box-shadow: none;
}


/* ==========================================================================
   Home Page
   ========================================================================== */
#kkkkkkk header {
	background-color:rgba(240,240,240,0.8);
		height:100%;
		padding:50px;
		margin:0 -20px;

}
#home {
	//background: url(../img/k_p/p1.jpg) no-repeat center fixed;
	
	background-color:#eee;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.top {
	width:40px;
}


.logo {
	font-size: 180px;
	padding-top: 15px;
}

/* ==========================================================================
   Service Page
   ========================================================================== */

#service {
	background-color:#eee;
	//background-image:url(../img/news2.jpg);
	overflow-y: scroll;
	margin:0px;
}

#service .row {
 padding-left:15;
 
}		
.fa-stack:hover {
  -webkit-animation-name: pulse;
  animation-name: pulse;
 }
 #service .top {

 width: 250px;
 height: 250px;
 border: solid 5px #fff;
 
 }
 /* ==========================================================================
    Commitment Page
    ========================================================================== */
 
#commit {
	background-color:#eee;
 }

 #commit a{
	 	font-size:12px;
	 	letter-spacing:0.1em;
		color:#eee;
 }
.imgs {
	width:100%;
	max-width:800px;
	height:250px;
	overflow-y:scroll;
	border-radius:0%;
	background-color:#aaa;
	}
.imgs img {		
	width:100%;
    margin:20% 0 ;
    -webkit-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
}

 

 /* ==========================================================================
   About Page
   ========================================================================== */

#about {
	//background-image:url(img/p4.gif);

}
#about img {
	border: 10px solid rgba(130,180,200,1);
	//border: 10px solid rgba(255, 170, 204, 1);
	
}

#about .row {
	margin: 0 0 25px 0;
}


.chart {
position: relative;
display: inline-block;
width: 170px;
height: 170px;
margin-bottom: 20px;
text-align: center;
}

.chart canvas {
position: absolute;
top: 0;
left: 0;
}

.percent {
display: inline-block;
line-height: 170px;
font-size: 50px;
font-weight: 300;
z-index: 2;
}

.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}

 /* ==========================================================================
   Portfolio Page
   ========================================================================== */
 .cap {
	display: table-cell;
	vertical-align: middle;
 	position: absolute; 
	top:30%;
//	transform:translate(100px, 130px)
 }
 .caption {
 	display: inline-block;
 	position: relative;
 	margin: 10px;
 	//overflow: hidden;
 	background: rgba(0,0,0,0.5);
	border-radius: 3%;
 	-webkit-transition: background 0.3s ease-in-out;
 	-moz-transition: background 0.3s ease-in-out;
 	transition: background 0.3s ease-in-out;
 }
 
 .caption:hover {
	background: rgba(0,0,0,0.4);
	
}

.caption img {
	display: block;
	cursor:pointer;
	border-radius: 3%;
	//max-width: 230px;
	//min-height:200px;
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	-moz-transition: -moz-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

.caption:hover img {
	-webkit-transform: translateX(-90%);
	-moz-transform: translateX(-90%);
	transform: translateX(-90%);
}

.caption::before,
.caption::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	background: rgba(122, 152, 200, 0.4);
//	background: rgba(255, 170, 204, 0.6);


}

.caption::before {
	content: attr(data-title);
	height: 50%;
	color: #bbddff;
	font-size: 20px;
	font-weight: 300;
	padding: 30px;
	-webkit-transform: translateX(-0%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
}


.caption::after {
	content: attr(data-description) ;
	top: 50%;
	height: 100%;
	color: #fff;
	font-size: 14px;
	padding: 20px 30px;
	-webkit-transform: translateX(-0%);
	-moz-transform: translateX(50%);
	transform: translateX(-50%);
}

.caption:hover::before,
.caption:hover::after {
	
	-webkit-transform: translateX(-0%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	
}

 .caption1 {
 	display: inline-block;
 	position: relative;
 	margin: 10px;
 	overflow: hidden;
 	background: rgba(0,0,0,0.2);
	 border-radius: 3%;
 	-webkit-transition: background 0.3s ease-in-out;
 	-moz-transition: background 0.3s ease-in-out;
 	transition: background 0.3s ease-in-out;
 }
 
 .caption1:hover {
	background: rgba(0,0,0,0);
}

.caption1 img {
	display: block;
	max-width: 100%;
/*	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	-moz-transition: -moz-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;*/
}

.caption1:hover img {
	cursor:pointer;
/*	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);*/
}

.caption1::before,
.caption1::after {
	position: absolute;
	width: 100%;
	z-index: 1;
	//	background: rgba(122, 152, 250, 0.4);
	background: rgba(100, 130, 170, 0.4);
	 -webkit-transform: translate3d(-50%,0,0);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	-moz-transition: -moz-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

.caption1::before {
	content: attr(data-title);
	height:50%;
	color: #fff;
	letter-spacing:0.2em;
	font-size: 20px;
	font-weight: 300;
	padding: 30px;
}

.caption1::after {
	content: attr(data-description) ;
	top: 50%;
	height: 100%;
	color: #fff;
	font-size: 14px;
	padding: 20px 30px;
}

.caption1:hover::before,
.caption1:hover::after {
	-webkit-transform: translate3d(-150%,0,0);
	-moz-transform: translateX(-150%);
	transform: translateX(-150%);
}

.tag span {
	margin-right: 10 px;
	text-transform: uppercase;
}

.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: normal;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}

.label-default {
background-color: #1ee;
}



 /* ==========================================================================
   Portfolio Single Page
   ========================================================================== */

.back-link {
	margin-top: 50px;
	font-size: 50px;
}

 /* ==========================================================================
   Blog Page
   ========================================================================== */

/* Main */
 #blog{
	background-color:#eee;
 }
.post {
	margin-bottom: 20px;
}

.meta-tag {
	padding: 5px 0;
	background-color: #57a;
	font-size: 12px;
}

.meta-tag span {
	padding: 0 10px;
}

.post-content {
	padding: 20px;
	margin: 0;
	background-color: #fff;
	color: #57a;
	letter-spacing:0.2em;
}

/* Sidebar */

#sidebar {
	border-left: 1px dashed #3333aa;
}

.widget {
	margin-bottom: 30px;
}

.widget-title {
	background-color: #11aaee;
}

.widget-title h4 {
	margin-top: 0;
	padding: 6px 10px;
	font-size: 16px;
}

.widget .glyphicon {
	padding-right: 8px;
}

/* Pagination */

.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 0;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.pagination > li > a, .pagination > li > span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.428571429;
	color: #444;
	text-decoration: none;
	background-color: #fff;
	border: 0;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	z-index: -1;
	color: #fff;
	cursor: default;
	background-color:rgba(170,200,240,0.5);
	border-color: #16a085;
}

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
	color: #fff;
	background-color: rgba(170,200,240,0.9);
	border-color: rgba(170,200,240,0.9);
}

 /* ==========================================================================
   Blog Single Page
   ========================================================================== */
#comment {
	padding: 0 15px;
}

.comment-submit {
	margin-top: 30px;
}

.comment-title {
	border-bottom: 2px solid #16a085;
	padding-bottom: 5px;
	padding-left: 5px;
}

.gravatar img {
	max-width: 80px;
	max-height: 80px;
}

@media (min-width: 768px) {
	#comment-list ul {
		list-style-type: none;
		padding: 0 0 50px 160px;
	}
}
.news-image{
	width:300px;
}

 /* ==========================================================================
   Contact Page
   ========================================================================== */
 #contact{
	background-color:#eee;
 }
.contact-form textarea,
.contact-form button { 
	{
	position: relative;
}
	margin-top: 20px;
}

.form-control {
	margin-bottom: 5px;
}

#contact a{
	letter-spacing:0.1em; 
	font-size:13px;
	color:#fff;
}
#contact p{
	letter-spacing:0.1em; 
	font-size:13px;
	color:#58a;
}

#apply p{
	letter-spacing:0.2em; 
	font-size:11px;
	color:#57a;
	
}
 /* ==========================================================================
   Footer
   ========================================================================== */

#home footer,
#service footer,
#about footer,
#portfolio footer,
#contact footer {
	position: relative;
}

footer a {
	color: #fff;
}

@media (min-width: 768px) {
	#home footer,
	#service footer,
	#about footer,
	#portfolio footer,
	#contact footer {
		position: fixed;
		bottom: 0;
		right:0;
		padding-right: 30px;
	}
}

 /* ==========================================================================
   Components
   ========================================================================== */

/* Form */

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #f2f6f7;
background-image: none;
border: 0 !important;
border-radius: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/* Dropdown Menu */

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
width: 100%;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #f2f6f7;
background-clip: padding-box;
border: 0;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #fff;
text-decoration: none;
background-color: #16a085;
}

/* Tabs */

.nav-tabs.nav-justified > li > a {
border-bottom: 0;
border-radius: 0;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #fff;
cursor: default;
background-color: #16a085;
border: 0;
border-bottom-color: #16a085;
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #16a085;
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
border: 0;
}

.tab-content {
color: #fff;
cursor: default;
background-color: #16a085;
border: 0;
border-bottom-color: #16a085;
padding: 15px;
}

.tab-content a {
color: #fff;
}

/* Badge */

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 11px;
font-weight: normal;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #90918f;
border-radius: 10px;
}

/* Progress Bar */

.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #16a085;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
/* ================================================r=========================
   Menu
   ========================================================================== */

.k-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 0;
	border-width: 0px;
	border-style: solid;
	border-color: rgba(60,60,60,0.5);
	background-color: rgba(0,0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
	transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
	z-index: 1;
}

.k-menu.k-menu-open {
	height: 100%;
	border-width: 0px 150px 50px 0px;
	background-color: rgba(0,20,30,0.2);
	-webkit-transition: border-width 0.3s, background-color 0.3s;
	transition: border-width 0.3s, background-color 0.3s;
}

.bt-overlay {
	position: absolute;
	width: 100%;
}

.k-menu-open .bt-overlay {
	height: 100%;
}

.k-menu-trigger {
	position: fixed;
	top: 10px;
	right: 20px;
	z-index: 100;
	display: block;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

.k-menu-trigger span {
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 100%;
	height: 8%;
	background-color: #ccc;
	font-size: 0px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

.k-menu-trigger span:before,
.k-menu-trigger span:after {
	position: absolute;
	right: 10;
	width: 100%;
	height: 100%;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.k-menu-trigger span:before {
	-webkit-transform: translateY(-200%);
	transform: translateY(-200%);
}

.k-menu-trigger span:after {
	-webkit-transform: translateY(200%);
	transform: translateY(200%);
}

.k-menu-open .k-menu-trigger span:before {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.k-menu-open .k-menu-trigger span:after {
	-webkit-transform: translateY(300%);
	transform: translateY(300%);
}

.k-menu ul {
	position: fixed;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-menu ul:first-of-type {
	top: 75px;
	right: 0;
}

.k-menu ul:nth-of-type(2) {
	left: 0;
	bottom: 0;
}

.k-menu ul li,
.k-menu ul li a {
	display: block;
}

.k-menu ul:nth-of-type(2) li {
	float:right;
	font-size: 0px;
}

.k-menu ul li {
	visibility: hidden;
	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
	transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}

.k-menu.k-menu-open ul:first-of-type li,
.k-menu.k-menu-open ul:nth-of-type(2) li {
	visibility: visible;
	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
	transition: transform 0.3s, opacity 0.3s;
}

/* First menu */
.k-menu ul:first-of-type li {
	width: 150px;
	height: 40px;
	line-height: 40px;
	-webkit-transform: translate3d(100%,50%,0);
	transform: translate3d(100%,50%,0);
}

@media screen and (min-width: 36em) {
.k-menu ul:first-of-type li {
	width: 150px;
	height: 50px;
	line-height: 50px;
	-webkit-transform: translate3d(100%,50%,0);
	transform: translate3d(100%,50%,0);
}
}

.k-menu.k-menu-open ul:first-of-type li {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Second menu */
.k-menu ul:nth-of-type(2) li {
	width: 36px;
	height: 36px;
	line-height: 50px;
	-webkit-transform: scale(0);
	transform: scale(0);
}

@media screen and (min-width: 36em) {
.k-menu ul:nth-of-type(2) li {
	width: 60px;
	height: 36px;
	line-height: 50px;
	-webkit-transform: scale(0);
	transform: scale(0);
}
}

.k-menu.k-menu-open ul:nth-of-type(2) li:first-child { 
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.k-menu.k-menu-open ul:nth-of-type(2) li:nth-child(2) { 
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.k-menu.k-menu-open ul:nth-of-type(2) li:nth-child(3) { 
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.k-menu.k-menu-open ul:nth-of-type(2) li:nth-child(4) {
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.k-menu.k-menu-open ul:nth-of-type(2) li:nth-child(5) {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.k-menu.k-menu-open ul:nth-of-type(2) li {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.k-menu ul li a {
	display: block;
	outline: none;
	text-decoration: none;
}

.k-menu ul:first-of-type li a {
	padding: 0 20px;
	box-shadow: inset 0 1px rgba(0,0,0,0.2);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1em;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.k-menu ul:first-of-type li:last-child a {
	box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 -1px rgba(0,0,0,0.2);
}

.k-menu ul:nth-of-type(2) li a {
	color: transparent;
	text-align: center;
	font-size: 0px;
}

.k-menu ul li a:before {
	color: #fff;
	font-size: 24px;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.k-menu ul:first-of-type li a:hover,
.k-menu ul:first-of-type li a:focus,
.k-menu ul li a:hover:before,
.k-menu ul li a:focus:before {
	color: #adf;
}


/* ==========================================================================
   table
   ========================================================================== */
div.outer {
    display: table;  
    height: 400px;  
    width: 100px;  
	text-align:center;
    position: relative;  
}  
div.vertical_middle {  
    display: table-cell;  
    vertical-align: middle;
	height:100%;  
     position: absolute;  
    }  
div.vertical_middle .inner {  
    margin: 0;  
}  
    * html div.vertical_middle .inner {  
        position: relative;  
        top: -50%;  
    }  
    *+html div.vertical_bottom .inner {  
        position: relative;  
        top: -50%;  
    }