@import url(http://fonts.googleapis.com/css?family=Roboto:500,300,400);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
ol, ul { list-style: none; }
html { font-weight: 200; font-family: Helvetica Neue, 'Roboto', Arial, sans-serif; font-size: 18px; line-height: 28px; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
input { border: 0px; margin: 0px; padding: 0px; }
a:link, a:visited { color: #909090; text-decoration: none; }
a:hover, a:active { color: #fff; }
textarea:focus, input:focus{ outline: 0px; }
.btn { cursor: pointer; }

.row { width: 100%; padding: 20px 20px; }
h1, h2, h3 { font-weight: 100; letter-spacing: 1px; }
h1 { font-size: 35px; line-height: 43px; margin: 20px 0px; }
h2 { font-size: 26px; line-height: 36px; margin: 10px 0px; }
h3 { font-size: 20px; line-height: 30px; margin: 10px 0px; }

header { position: fixed; top: 0px; left: 0px; width: 100%; text-align: center; z-index: 4; }
header .mainNav { height: 48px; line-height: 47px; background-color: #161616; border-bottom: solid 1px rgb(56, 56, 56); }
header .mainNav .logo { display: block; float: left; }
header .mainNav .logo img { height: 48px; width: 48px; display: block; }
header .mainNav .btn { background: center url(http://www.keyflowpro.com/resources/img/list_btn_nor.png) no-repeat; background-size: cover; width: 47px; height: 47px; display: block; float: right; }
header .mainNav .btn.open { background-image: url(http://www.keyflowpro.com/resources/img/list_btn_pre.png); }

header .subNav { height: 0px; overflow: hidden; text-align: left; position: fixed; top: 48px; left: 0px; width: 100%; z-index: 4; }
header .subNav.close { 
	-webkit-animation-name: close;
    -webkit-animation-duration: 1s;
    animation-name: close;
    animation-duration: 1s;}
header .subNav .item { border-bottom: solid 1px rgba(255, 255, 255, 0.3); line-height: 20px; padding: 10px 20px; display: block; background-color: #000;}
header .subNav .subItem { border-bottom: solid 1px rgba(255, 255, 255, 0.3); line-height: 20px; padding: 10px 20px; display: block; background-color: #000;}
header .subNav .selected { color: #fff; }
header .subNav.open { height: 664px; 
	-webkit-animation-name: open;
    -webkit-animation-duration: 1s;
    animation-name: open;
    animation-duration: 1s;}

@-webkit-keyframes open {
    from {height: 0px;}
    to {height: 664px;}
}
@-keyframes open {
    from {height: 0px;}
    to {height: 664px;}
}
@-webkit-keyframes close {
    from {height: 664px;}
    to {height: 0px;}
}
@-keyframes close {
    from {height: 664px;}
    to {height: 0px;}
}

footer { background-color: #000; }
footer .row { padding: 5px; text-align: center; letter-spacing: 0; font-size: 10px; color: #fff; }
footer .icons {  }
footer .icons a { display:inline-block; width: 40px; height: 40px; margin-right: 20px; }
footer .icons a.mail { background: center url('http://www.keyflowpro.com/resources/img/email_nor.png') no-repeat; background-size: cover; margin: 0px; }
footer .icons a.twitter { background: center url('http://www.keyflowpro.com/resources/img/twitter_nor.png') no-repeat; background-size: cover; }
footer .icons a.facebook { background: center url('http://www.keyflowpro.com/resources/img/facebook_nor.png') no-repeat; background-size: cover; }
footer .icons a.mail:hover { background-image: url('http://www.keyflowpro.com/resources/img/email_pre.png'); }
footer .icons a.twitter:hover { background-image: url('http://www.keyflowpro.com/resources/img/twitter_pre.png'); }
footer .icons a.facebook:hover { background-image: url('http://www.keyflowpro.com/resources/img/facebook_pre.png'); }

section { padding-top: 47px; }
section article { border-bottom: solid 1px rgba(255, 255, 255, 0.3); }

/*maininfo*/
section #introduction { text-align: center; }
section #introduction h1 { color: white; font-size: 29px; font-weight: 200; margin-top: 0px; }
section #introduction img.logo { display: block; margin: auto; width: 200px; height: 200px; margin: 24px auto; }
/* section #introduction img.textlogo { display: block; margin: auto; max-width: 280px; height: 48px;} */
section #introduction img.textlogo { display: block; margin: auto; max-width: 100%;}
section #introduction a { display: block; margin: auto; color: #00aaff; }
section #introduction a.down { margin: 24px auto; background: center url("../img/appstore_nor.png") no-repeat; background-size: cover; width: 220px; height: 72px; }
section #introduction a.down:hover { background: center url("../img/appstore_pre.png") no-repeat; background-size: cover; }
section #introduction a.see { text-align: center; margin-bottom: 10px; }
section #introduction a.see:hover, section #introduction a.see:active { color: #00bbff; }
section #introduction .trial { margin: 24px auto; background: center url("../img/trial_m.png") no-repeat; background-size: cover; width: 220px; height: 72px; }

section #introduction .sale { text-align: center; margin-top: 24px; margin-bottom: 12px; }
section #introduction .sale span { display: block; color: #E92538; }

section .overView {
	background: bottom url("../img/shadow.png") repeat-x, -moz-linear-gradient(#000, #454545);
	background: bottom url("../img/shadow.png") repeat-x, -webkit-linear-gradient(#000, #454545);
	background: bottom url("../img/shadow.png") repeat-x, -o-linear-gradient(#000, #454545);
	background: bottom url("../img/shadow.png") repeat-x, -ms-linear-gradient(#000, #454545);
	background: bottom url("../img/shadow.png") repeat-x, linear-gradient(#000, #454545);
}

section .overView a.img {display: block; margin: auto; width: 100%; margin-bottom: 14px; }
section .overView a.img img { width: 100%; display: block; }
section .overView li { padding: 40px 0px; border-top: 1px solid #474747; }
section .overView li:first-of-type { padding-top: 0px; border: 0px; }
section .overView li a { color: #00aaff; line-height: 50px; }
section .overView li a:hover, section .overView li a:active { color: #00bbff; }
section .overView h1 { text-align: center; color: white; }
section .overView h2 { color: white; }

section #keyFeatures { background-color: white; color: black; }
section #keyFeatures li a { color: #00aaff; line-height: 50px; }
section #keyFeatures li a:hover, section #keyFeatures li a:active { color: #00bbff; }
/* section #keyFeatures .icon { display: block; width: 102px; height: 102px; margin: 60px 0px 10px 10px; } */

/* Plug-in */
/* # Plug-in */

/* Plug-in - Extension */
#Extension .row .first-elem {
	margin-top: 24px;
}
#Extension .row .last-elem {
	margin-bottom : 24px;
}
#Extension .extension-intro {
	text-align: center!important;
}
#Extension .extension-intro .intro.main-title-image{
	width: 100%;
	margin-left: 0px;
	margin-bottom: -11px;
}
#Extension .extension-intro .intro.main-image {
	width: 100%; 
}
#Extension .overView { background: linear-gradient(#353535 30%, #171616); }
#Extension .overView li .text .number { float: left; }
#Extension .overView li .text .body { margin-left: 25px; } 

#Extension .overView li > .text .note {
    font-weight: 200!important;
    color: #F26C26;
    margin-top: 15px;
}

/* # Plug-in - Extension */

/* Plug-in - fcpxAgent */

section#FCPXAgent #introduction a.down { background: center url("../img/downosx.png") no-repeat; background-size: cover; width: 224px; height: 42px; display: block; }

section#FCPXAgent .overView { background: linear-gradient(#242424 30%, #000); }
section#FCPXAgent .overView li .text .number { float: left; }
section#FCPXAgent .overView li .text .body { margin-left: 25px; } 
section#FCPXAgent #installProcess1 h2 { text-align: center; }
section#FCPXAgent #installProcess2 { background: #242424; }
section#FCPXAgent #installProcess2 .text .body { margin-left: 0px; }
section#FCPXAgent #installProcess2 a { display: block; }
/* # Plug-in - fcpxAgent */

/*faq*/
section#FAQ h1 { text-align: center; }
section#FAQ h2 { color: #00aaff; }

section#FAQ li:last-child { border-bottom: solid 1px #e4e4e4;}
section#FAQ li > div { clear: both; border-top: solid 1px #e4e4e4; }
section#FAQ li > div.Q > * { margin: 10px 0px; }
section#FAQ li > div > :first-child { margin-left: 10px; width: 28px; color: #00aaff; float: left; font-size: 20px; }
section#FAQ li > div.A > :first-child { margin-top: 0px; }
section#FAQ li > div.Q { line-height: 30px; }
section#FAQ li > div.Q .btn { width: 30px; height: 35px; float: right; background: center url("../img/btn_open.png") no-repeat; background-size: 28px 14px; } 
section#FAQ li > div.Q .btn.open { background-image: url("../img/btn_close.png"); }
section#FAQ li > div.Q .title { cursor: pointer; float: left; }
section#FAQ li > div.A { border-top-width: 0px; height: 0px; overflow: hidden; background-size: 6px 2px; background: top #f9f9f9 url("../img/line_shadow.png") repeat-x; }
section#FAQ li > div.A.selected { border-top-width: 1px; height: auto; overflow: auto; padding: 15px 0px; }
section#FAQ li > div.A > :nth-child(2) { margin-left: 38px; margin-right: 10px; }

section#FAQ .pre { white-space: pre-wrap; }
section#FAQ .anchor { visibility: hidden; position: relative; top: -190px; }

/*Tutorials*/
section#Tutorials h1 { text-align: center; font-weight: 100; }
section#Tutorials li .preview { box-shadow: 0px 4px 12px #000; border-radius: 5px; margin: auto; height: 158px; width: 280px; background-color: #333; display: block; }
section#Tutorials li .play { border-radius: 5px; margin: auto; position: relative; z-index: 1; cursor: pointer; height: 158px; width: 280px; margin-top: -158px; background: center url("../img/play_nor.png") no-repeat; background-size: 30px 37px; }
section#Tutorials li .play:hover { background-image: url("../img/play_pre.png"); }
section#Tutorials li .play .time { border-bottom-right-radius: 5px; color: #fff; position: absolute; bottom: 1px; right: 1px; padding: 5px; background-color: black; }
section#Tutorials li h3 { text-align: center; margin-bottom: 40px; font-weight: 200; }

section#Tutorials #manualLink { text-align: center; margin-bottom: 40px; }
section#Tutorials #manualLink a { display: inline-block; height: 24px; }
section#Tutorials #manualLink a:hover { color: #202020; }
section#Tutorials #manualLink img { display: inline-block; vertical-align: middle; }
section#Tutorials #manualLink span { display: inline-block; height: 24px; vertical-align: middle; font-size: 14px;}

section#Tutorials #Reference { margin-top: 0px; margin-bottom: 0px; text-align: center; }
section#Tutorials #Reference div { display: inline-block; margin: 5px; }

section#Tutorials .delimiter { margin-top : 70px; padding-top: 30px; border-top: solid 1px rgba(0, 0, 0, 0.3); }

/*ReleaseNotes*/

section#ReleaseNotes .row { padding: 10px 10px; }
section#ReleaseNotes #head h2 { text-align: center;  color: #808080; font-size: 20px; line-height: 28px; font-weight: 200; }
section#ReleaseNotes h1 { text-align: center; }
section#ReleaseNotes h2 { color: #000000; font-size: 18px; font-weight: 200; }
section#ReleaseNotes h3 { color: #000000; font-size: 18px; font-weight: 200; }

section#ReleaseNotes ul { list-style: disc; margin-left: 18px; }
section#ReleaseNotes li { line-height: 24px; font-size: 16px; }

/*What'sNew*/

section#WhatsNew h1 { text-align: center; }
section#WhatsNew h2 { color: #000000; }

section#WhatsNew .version { margin-top: 20px; margin-bottom: 5px; text-align: center; }

section#WhatsNew .feature > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1) > div:nth-child(1) { border-top: none; }
section#WhatsNew .feature li { line-height: 28px; }
section#WhatsNew .feature li h2 { color: #000; padding-top: 15px; }
section#WhatsNew .feature li .cell { width: 100%; max-width: 450px; vertical-align: top; display: inline-block; border-top: 1px solid #808080; padding-bottom: 20px; }
section#WhatsNew .feature li .cell div { width: 100%; max-width: 425px; }

section#WhatsNew hr { height: 1px; border: 0; border-top: solid 1px #D6D6D6; }

section#WhatsNew a { color: #00aaff; }
section#WhatsNew a:hover, section #WhatsNew a:active { color: #00bbff; }

section#WhatsNew .icon { display: block; margin: 10px auto 24px 0px;  width: 100%; max-width: 425px; max-height: 282px; margin-bottom: 14px; }

/*HowToUse*/
section#HowToUse h1 { text-align: center; }

section#HowToUse img { width: 100%; margin-bottom: 30px; }

/*modal*/
#previewModal { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background: rgba(0, 0, 0, 0.8); }
#previewModal.active { display:block!important; }
#previewModal > .content { max-width: 320px; position: relative; top: 10%; margin: 0 auto; background: rgba(0, 0, 0, 0); z-index: 2; overflow: auto; }
@media only screen and (max-height: 400px) {
	#previewModal > .content { height: 80% }
}

#previewModal > .content .modalHead { position: relative; width: 100%; height: 30px; }
#previewModal > .content .modalHead > .closeBtn { cursor: pointer; position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background-image : url('../img/close_nor.png'); background-repeat: no-repeat; background-size: cover; }
#previewModal > .content .modalHead > .closeBtn:hover, #previewModal > .content .modalHead > .closeBtn:active { background-image : url('../img/close_pre.png'); }
#previewModal > .content .modalBody { text-align: center; }
#previewModal > .content .modalBody video { height: auto!important; width: 100%!important; vertical-align: middle; }

/*Banner*/
.bannerHolder /*unused*/
{
	margin-top: 30px;
    margin-bottom: 30px;
}
.bannerHolder #banner { margin: auto; cursor: pointer; }

.bannerHolder_v2
{
    margin-top: 20px;
}

.bannerHolder_v2 #bannerItem { margin: auto; background: center url("../img/NAB_banner.png") no-repeat; background-size: cover; width: 270px; height: 92px; cursor: pointer; }

/*class*/
.pre {
    white-space: pre-wrap;
}

.bold {
    font-weight: bold;
}

.clickable {
    cursor: pointer;
}

/* KF Pro 2 */
.main-backround-div{
	background: center fixed url("../img/bg.png") no-repeat; 
	background-size: cover;
}

.main-logo{
	padding-top: 50px;
}

.main-logo > h1{
    color: #999999 !important;
    font-weight: 500  !important;
    letter-spacing: 0.0016em  !important;
    padding-top: 20px;
}

.comment-div{
	margin-top: 25px; 
}

.comment-div > p{
	margin-bottom: 10px;
	letter-spacing: 0.03em;
	font-weight: 400;
    font-size: 18px;
    color: white;
}

.previous-version-div *{
	font-size: 15px !important;
	font-weight: 300 !important;
    letter-spacing: 0.03em !important;
    color: white;
}

.previous-version-div > p > a {
	display: inline !important;
	color : white !important;
	text-decoration: underline !important;
}

.new-div{
	margin-top : 30px;
}

.new-div > a{
	color : #F26C26 !important;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.003em;
}

.macbook-pro-img{
    margin: 25px 0px;
    width: 100%;
}

.overView{
	background: linear-gradient( to bottom, rgba(0, 0, 0, 0.1) 1% , black 5%  ) !important;
}

.overView img{
    width: 100%;
    margin-bottom: 20px; 
}

.purchases-section{
    margin-top: 50px;
    margin-bottom : 50px;
}

.sub-comment{
    margin : 20px 0px;
}

.lg-text-p{
	font-size: 26px;
	margin-bottom: 10px;
	letter-spacing: 0.016em;
    font-weight: 400;
    color: white;
}

.lg-text-span{
	font-size: 30px;
	color : #F26C26;
}

.sm-text-p{
	font-size: 16px;
	letter-spacing: 0.03em;
    font-weight: 300;
    color: white;
}

.sm-text-span{
	font-size: 15px;
}

.purchases .how-to-use > a{
	color : #42AEFA;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.0016em;
}

.annotation-section{
	/* margin : 50px 0px;  */
}

.plugin-section{
	margin : 50px 0px;
}

.features{
    text-align: center;
}

.features li > div{
    margin: 50px auto;
}

.feature{
    display: table;
    margin : auto;
}

.feature > * {
    display: table-cell;
}

.feature > .icon{
    width: 102px;
    height: 102px;
}

.feature > p{
    width: 300px;
    text-align: left;
    vertical-align: middle;
    padding-left : 20px;
}

.features .lg-bold-text-p{
	font-size: 25px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.026em;
	color: #262626;
}

 .feature ul {
 	text-align: center;
 }
 
 .feature ul > li > .cell {
 	text-align: left;
 }

#prosLove{
	background: black;
}

.appraisal{
	margin: 30px 0px;
	text-align: center;
}

.appraisal .appraisal-title{
	margin : 80px 0px;
}

.appraisal .appraisal-title > p{
	text-align: center;
	font-size: 40px;
	font-weight: 400;
    letter-spacing: 0.0016em;
    color: white;
    line-height: 1;
}

.appraisal-contents > div{
    max-width: 800px;
    margin: 80px auto;
    color: white;
}


.appraisal-contents .contents{
    text-align: left;
    padding : 20px 0px;
}

.quotation-start{
  display: table;
}

.quotation-start > * {
    display: table-cell;
    vertical-align: middle;
}

.quotation-start > img{
    width: 27px;
    height: 27px;
}

.quotation-start-bar{
    width: 100%;
	height: 27px;
}

.start-bar{
	height: 13.5px;
    border-bottom: #9A9A9A solid 1px;
    margin: 0px 10px;
}

.quotation-end{
   display: table;
}

.quotation-end > *{
    display: table-cell;
    vertical-align: middle;
 }

 .quotation-end img{
     width: 27px;
     height: 27px;
     vertical-align: middle;
 }

 .end-bar{
    height: 13.5px;
    border-bottom: #9A9A9A solid 1px;
    margin: 0px 10px;

 }

 .note  {
	font-weight:  500 !important;
}

.caution{
	font-weight:  500 !important;
}

.standalone > img{
	width: 100%;
	margin-bottom: 20px;
}

.team{
    margin-top: 20px;
    margin-bottom: 40px;
}

.team > img{
	width: 100%;
	margin-bottom: 20px;
}


#head #manualLink span{
	letter-spacing: 0.0016em;
	font-weight: 400;
} 

.action{
	margin-bottom: 10px;
}

section#Tutorials #head { padding-bottom: 20px; margin-bottom: 20px;
/*	background: -moz-linear-gradient(#fff, #e5e5e5);
	background: -webkit-linear-gradient(#fff, #e5e5e5);
	background: -o-linear-gradient(#fff, #e5e5e5);
	background: -ms-linear-gradient(#fff, #e5e5e5);
	background: linear-gradient(#fff, #e5e5e5);
	border-bottom: solid 1px #ddd;
*/}


.fcpx-intro .textlogo{
    /* width: 420px; */
    height: 48px;
}

#FCPXAgent{
    padding-top: 20px !important;
}

.fcpx-intro{
    padding-top: 40px;
}

.lg-text-sub-img-div img{
	width: auto !important; 
	padding-right: 5px;
	margin-bottom: 5px;
}

.import-FCPX-section{
    margin-top: 20px;
    margin-bottom : 50px;
}

.pro-extension-section{
    margin-top: 50px;
    margin-bottom : 30px;
}

.email-link{
 	color: #42AEFA !important;
 }
 
 .too-sm-text-p{
    font-size: 13px;
    letter-spacing: 0.03em;
    font-weight: 200;
    color: white;
 }
 
 .comment-link > a{
	text-decoration: underline;
	color: #42AEFA;
}

