@charset "UTF-8";
/*
Theme Name:kzxtreme.com
Theme URI:http://kzxtreme.com/
Description:kzxtreme
Version:1.0
Author:kz
Tags:fixed width, one page portfolio
*/
/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,label,input,textarea,button,span,img,small 
{ margin:0; padding:0;}
a,h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th{font-size:1em; font-weight:normal; font-style:normal;}
ul{list-style:none;}
ul.items{list-style:outside disc;padding-left:1.5em;}
ol{list-style:outside decimal;padding:.5em 0 .5em 2em;}
ul.items li,ol li{padding:.5em 0;}
ul li, ol li, dd{ line-height:1.8;}
fieldset,img,button{ border:none;}
caption,th {text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
strong{font-weight:bold;}
em{font-style:italic;}
/* TYPE */
body { 
font:14px/1.5 Arial, Verdana, sans-serif, "Lucida Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック";
}
a{
color:#64899b;
text-decoration:none;
outline:none !important;
}
a:hover{
text-decoration:underline;
cursor:pointer;
}
.screen-reader-text{display:none;}
/* LAYOUT */
html, body{
color:#b5bdc1;
background:#fff;
height:100%;
margin:0 auto;
position:relative;
}
.wrapper{
padding:0 5px;
width:950px;
height:auto;
margin:0 auto;
position:relative;
}
.contents{padding:84px 0;}
/* back */
.to-top{
position:fixed;
top:41px;
right:10px;
width:84px;
height:84px;
background:url(images/parts.png) -835px -1469px no-repeat;
}
.to-top:hover{background:url(images/parts.png) -835px -1553px no-repeat;}
/* navi */
.navi{
width:auto;
height:auto;
}
.navi li{
float:left;
width:auto;
height:auto;
}
.navi li a{position:relative;}
/* header */
#header{
width:100%;
height:31px;
background:url(images/parts-x.png) 0 0 repeat-x;
}
#header .navi{float:right;}
#header .navi li{
margin-left:1em;
text-shadow:0 1px #111111;
}
/* browser, error*/
.error,
.browser{
font-size:24px;
font-weight:bold;
color:#333;
width:100%;
}
.error p,
.browser p{
width:950px;
margin:0 auto;
padding:.5em 0;
}
#fyi.browser{background-color:#8cb8c2;}
#error404.error,
#recommend.browser{background-color:#c28c8c;}
/* home */
#home h1 a{
width:100%;
height:108px;
background:url(images/parts.png) 0 0 no-repeat;
}
#home h2{
margin-top:15px;
width:100%;
height:154px;
background:url(images/parts.png) 0 -123px no-repeat;
}
#home p{padding:57px 80px;}
#home .links{height:84px;}
#home .links #hire{
float:left;
margin:32px 0 0 55px;
width:260px;
height:24px;
background:url(images/parts.png) 0 -1565px no-repeat;
}
#home .links #hire:hover{background-position:0 -1589px}
#home .navi{float:right;}
#home .navi li{margin-left:35px;}
#home .navi li a{
width:116px;
height:84px;
background:url(images/parts.png) -518px -1469px no-repeat;
}
#home .navi li.about a{background-position:-487px -1469px;}
#home .navi li.works a{background-position:-603px -1469px;}
#home .navi li.contact a{background-position:-719px -1469px;}
#home .navi li.about a:hover{background-position:-487px -1553px;}
#home .navi li.works a:hover{background-position:-603px -1553px;}
#home .navi li.contact a:hover{background-position:-719px -1553px;}
/* about */
#about.contents{padding-top:74px;}
#about h2{
width:950px;
height:301px;
background:url(images/parts.png) 0 -277px no-repeat;
margin-bottom:40px;
}
#about #skills h3{
width:222px;
height:24px;
background:url(images/parts.png) -260px -1565px no-repeat;
margin-bottom:20px;
}
#about #skills .chart{
border-top:1px solid #ccc;
padding-top:65px;
position:relative;
overflow:hidden;
}
#about #skills ul{
background-color:#f2f2f2;
border-left:1px solid #ccc;
padding:10px 0;
}
#about #skills ul li{
color:#fff;
line-height:1em;
margin-top:5px;
padding:6px 9px;
}
#about #skills ul li:first-child{margin-top:0;}
#about #skills ul li.ai{width:230px;}
#about #skills ul li.ps{width:370px;}
#about #skills ul li.html{width:370px;}
#about #skills ul li.js{width:330px;}
#about #skills ul li.wp{width:330px;}
#about #skills ul li.seo{width:260px;}
#about #skills ul li:nth-child(2n){background-color:#8cb8c2;}
#about #skills ul li:nth-child(2n+1){background-color:#aecdd4;}
#about #skills .chart .level{
height:100%;
padding-top:40px;
position:absolute;
top:25px;
background:url(images/parts.png) 0 -1637px no-repeat;
}
#about #skills .chart .low{
left:0;
width:160px;
}
#about #skills .chart .mid{
border-left:1px dashed #fff;
width:134px;
left:160px;
background-position:-160px -1637px;
}
#about #skills .chart .high{
border-left:1px dashed #fff;
color:#bbb;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-style:italic;
text-align:center;
right:0;
width:134px;
background-position:-295px -1637px;
}
#about #twitter h3 a{
width:213px;
height:24px;
background:url(images/parts.png) 0 -1613px no-repeat;
margin-bottom:20px;
}
#about #twitter h3 a:hover{background:url(images/parts.png) -213px -1613px no-repeat;}
#about #twitter .twtr-widget{
border-top:1px solid #ccc;
padding-top:25px;
}
#about .services{padding-top:57px;}
#about .services div h4{
width:114px;
height:19px;
background:url(images/parts.png) -372px -1493px no-repeat;
margin-bottom:17px;
}
#about .services div#design h4{background-position:-372px -1531px;}
#about .services div#deploy h4{background-position:-372px -1512px;}
#about .services div#develop.grid_8{
width:280px;
padding:0 15px;
}
#about .services .arrow{
height:80px;
background:url(images/parts.png) -929px -1480px no-repeat;
}
/* works */
#works.contents{padding-top:54px;}
#works h2{
width:950px;
height:403px;
background:url(images/parts.png) 0 -578px no-repeat;
margin-bottom:-125px;
}
#works p{
position:absolute;
left:320px;
top:145px;
width:300px;
}
#works .pics{
padding-top:1.5em;
position:relative;
}
#works a#colorize{
display:block;
position:absolute;
left:5px;
top:0;
}
#works .hentry{
width:230px;
height:150px;
background-color:#000;
margin-top:10px;
overflow:hidden;
}
#works .hentry img.color{
position:absolute;
left:0;
top:0;
display:none;
}
#works .hentry .action{
overflow:hidden;
display:block;
position:absolute;
left:0;
top:0;
width:230px;
height:150px;
background-color:rgba(0, 0, 0, .8);
opacity:0;
transition:opacity .2s linear;
-webkit-transition:opacity .2s linear;
-moz-transition:opacity .2s linear;
}
#works .hentry:hover .action{opacity:1;}
#works .hentry .action .enlarge,
#works .hentry .action .info{
display:block;
width:100%;
position:absolute;
}
#works .hentry .action .enlarge{
color:rgba(70, 70, 70, .8);
font-size:38px;
font-weight:bold;
height:120px;
left:10px;
text-decoration:none;
text-shadow:none;
top:10px;
}
#works .hentry .action .info{
color:#ccc;
font-family:"Times New Roman", Times, serif;
font-style:italic;
height:30px;
top:120px;
text-align:right;
width:210px;
}
/* contact */
#contact.contents.grid_24{padding-bottom:0;}
#contact h2{
width:950px;
height:488px;
background:url(images/parts.png) 0 -981px no-repeat;
}
#contact p{
position:absolute;
left:180px;
top:300px;
width:300px;
}
/* footer */
#footer{
position:relative;
clear:both; 
height:98px;
width:100%;
padding-top:3px;
background:url(images/parts-x.png) 0 -31px repeat-x;
}
#footer .copyright{
float:left;
width:180px;
height:96px;
background:url(images/parts.png) -192px -1469px no-repeat;
}
#footer .kz{
position:relative;
width:96px;
height:96px;
float:right;
background:url(images/parts.png) 0px -1469px no-repeat;
}
#footer .kz span{
position:absolute;
width:96px;
height:96px;
left:0;
top:0;
background:url(images/parts.png) -96px -1469px no-repeat;
opacity:0;
transition:all .5s linear;
-webkit-transition:all .5s linear;
-moz-transition:all .5s linear;
}
#footer .kz span:hover{opacity:1;}
/* hr */
.hr{
clear:both;
width:100%;
height:5px;
background:url(images/parts-x.png) 0 -135px repeat-x;
}
/* Contact Form 7 */
#contact .wpcf7{
position:absolute;
right:0;
top:84px;
width:390px;
height:360px;
}
#contact .wpcf7 p{
position:relative;
left:0;
top:0;
width:100%;
height:auto;
}
#contact .wpcf7 label{
cursor:pointer;
display:block;
height:24px;
width:100%;
}
#contact .wpcf7 input[type="text"]{
border:1px solid #ccc;
display:block;
padding:4px;
width:380px;
height:21px;
transition:background-color .2s linear;
-webkit-transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
}
#contact .wpcf7 textarea{
border:1px solid #ccc;
padding:4px;
width:380px;
height:138px;
transition:background-color .2s linear;
-webkit-transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
}
#contact .wpcf7 input[type="text"]:focus,
#contact .wpcf7 textarea:focus{background-color:#f2f2f2;}
#contact .wpcf7 input[type="submit"]{
position:absolute;
top:336px;
right:0;
width:59px;
height:24px;
cursor:pointer;
border:none;
background: url(images/parts.png) -891px -1317px no-repeat;
}
#contact .wpcf7 input[type="submit"]:hover{background-position:-260px -1589px;}
#contact .wpcf7 .wpcf7-mail-sent-ok{border:1px solid #8cb8c2;}
#contact .wpcf7 .wpcf7-mail-sent-ng{border:1px solid #c28c8c;}
#contact .wpcf7 .wpcf7-mail-sent-errors{border:1px solid #c28c8c;}
#contact .wpcf7 .wpcf7-response-output{
margin:30px 0 0 0;
padding:5px 10px;
color:#333;
}
span.wpcf7-not-valid-tip{
background-color:#eaa5a5 !important;
border:1px solid #eaa5a5 !important;
color:#333 !important;
}
/* twitter */
.twtr-tweet-text p,
.twtr-tweet-text p a{
font-family:"Times New Roman", Times, serif !important;
font-style:italic !important;
font-size:22px !important;
word-wrap:break-word;
}
#twtr-widget-1 .twtr-timeline .twtr-tweet-text p i a{
color:#ccc !important;
font-size:10px !important;
}
.twtr-hd, .twtr-ft{display:none;}
.twtr-timeline{height:auto !important;}
.twtr-bd{padding:0 !important;}
.twtr-widget .twtr-tweet-wrap {padding:0 !important;}
.twtr-widget .twtr-tweet{
visibility:hidden;
border-bottom:none !important;
}
.twtr-widget .twtr-tweet:last-child{visibility:visible;}
#twtr-widget-1 .twtr-tweet-text{
padding-left:45px !important;
background: url(images/parts.png) -919px -1615px no-repeat;
}
/* image replacement */
#about #skills .chart .level,
.to-top,
#home h1 a,
#home h2,
#home .navi li a,
#home .links #hire,
#about h2,
#about #skills h3,
#about #twitter h3 a,
#about .services div h4,
#works h2,
#contact h2,
#contact .wpcf7-form label,
#contact .wpcf7-form input[type="submit"],
#footer .copyright,
#footer .kz{
text-indent:-9999em;
overflow:hidden;
display:block;
}
/* float container */
.wrapper,
.navi,
#home .links,
#about .services,
#works .pics{
overflow:hidden;
display:block;
}
/* initial visibility */
.to-top{display:none;}