body { background: #fff; color: #555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; }
.pageWrapper { overflow: hidden; min-width: 960px; min-height: 1000px; }
.sectionWrapper { position: relative; width: 960px; margin: 0 auto; }

.header { background: url('../imgs/header-bg.jpg') fixed no-repeat center center; }
.header .sectionWrapper { height: 550px; }
.header .topBar .sectionWrapper { height: auto; }

.headerHeadlineCanvas { position: absolute; top: 368px; left: 186px; width: 486px; height: 486px; margin: -243px 0 0 -243px; overflow: hidden;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}
.headerHeadlineCnt { padding: 148px 0 0 74px; width: 412px; height: 338px; background: rgba(255,255,255,.7); }
.headerHeadline { font-size: 45px; line-height: 50px; font-weight: 300; color: #333; letter-spacing: .025em; }
.headerHeadline .qlik { color: #61a628; font-weight: bold; font-size: 54px; }
.headerHeadlineCanvas.yetToFadeIn { width: 0; height: 0; margin: 0; }
.headerHeadlineCanvas.yetToFadeIn .headerHeadlineCnt { margin: -243px 0 0 -243px; background: transparent; }
.headerHeadlineCanvas, .headerHeadlineCanvas .headerHeadlineCnt {
  -moz-transition: all .75s ease-in-out;
  -webkit-transition: all .75s ease-in-outs;
  -ms-transition: all .75s ease-in-out;
  -o-transition: all .75s ease-in-out;
  transition: all 1s ease-in-out;  
}
.headerHeadlineCanvas.start, .headerHeadlineCanvas.start .headerHeadlineCnt {
  -moz-transition: none;
  -webkit-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;  
}
.headerShowcase .desktop { position: absolute; right: 28px; bottom: -55px; }
.headerShowcase .tablet { position: absolute; right: -20px; bottom: -58px; }
.headerShowcase .smartphone { position: absolute; right: -45px; bottom: -66px; }
.headerShowcase .desktop .graphic { position: relative; width: 550px; height: 406px; background: url('../imgs/desktop_ver2.png') no-repeat 0 0; }
.headerShowcase .tablet .graphic { position: relative; width: 360px; height: 275px; background: url('../imgs/tablet_ver2.png') no-repeat 0 0; }
.headerShowcase .smartphone .graphic { position: relative; width: 113px; height: 240px; background: url('../imgs/mobile_ver2.png') no-repeat 0 0; }
.headerShowcase .desktop .graphic img { position: absolute; display: block; top: 21px; left: 21px; }
.headerShowcase .tablet .graphic img { position: absolute; display: block; top: 45px; left: 23px; }
.headerShowcase .smartphone .graphic img { position: absolute; display: block; top: 39px; left: 18px; }

.topBar { height: 115px; line-height: 115px; border-bottom: 1px dotted #61A628; }
.mainLogo, .mainLogo img { display: inline-block; vertical-align: middle; }
.mainNav { float: right; padding: 0; margin: 0; list-style-type: none; }
.mainNav li { position: relative; display: inline; display: inline-block; padding: 0; margin: 0; }
.mainNav li a { cursor: pointer; padding: 0 10px; color: #5DA733; color: #333;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -otransition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mainNav li a:hover { color: #5DA733; }
.mainNav li.actual a { color: #5DA733; }
.mainNav li:after { content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 0; background: #82BD2A;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -otransition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mainNav li.actual:after { height: 3px; }

.topBar.floating { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 33; border-bottom: 3px solid #82BD2A;
  -moz-box-shadow: 0 0 12px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 0 12px rgba(0,0,0,.1);
  -ms-box-shadow: 0 0 12px rgba(0,0,0,.1);
  -o-box-shadow: 0 0 12px rgba(0,0,0,.1);
  box-shadow: 0 0 12px rgba(0,0,0,.1);
}
.topBar.floating { height: 80px; line-height: 80px; }
.topBar.floating .mainLogo img { height: 37px; }

.sectionDividerBottom { border-bottom: 1px solid #ddd; }
.sectionHeadline { margin-top: 1em; font-size: 2.5em; line-height: 2.5em; color: #2d3132; font-weight: 300; border-bottom: 1px solid #eaeaea; margin-bottom: 1em; text-align: center; vertical-align: middle; }
.subHeadline { color: #61A628; font-size: 2em; line-height: 1em; padding: .75em 0; margin: 0 0 1em; border-bottom: 1px solid #eaeaea; border-color: rgba(0,0,0,.1); text-align: center; }
.colored .subHeadline { color: #fff; }

.txtCntnt { line-height: 1.5em; }
.txtCntnt p, .txtCntnt ul, .txtCntnt ol { margin-bottom: 1em; }
.txtCntnt b, .txtCntnt strong { color: #61A628; }
.colored .txtCntnt b, .colored .txtCntnt strong { color: #fff; }
.sectionTxt { padding: 0 40px 40px; }
.largeTxt { font-size: 1.4em; }

.bgNeedle { background: url('../imgs/bg_needle.jpg') fixed no-repeat center center; }
.bgNeedle.colored { background: url('../imgs/bg_needle_green.jpg') fixed no-repeat center center; }
.bgBaloon { background: url('../imgs/bg_baloon.jpg') fixed no-repeat center center; color: #fff; }
.bgBaloon .subHeadline { color: #fff; }
.bgBaloon.colored { background: url('../imgs/bg_baloon_green.jpg') fixed no-repeat center center; }
.bgWhite { background: #fff; }
.bgNeedle.colored.dark { background: url('../imgs/bg_needle_dark.jpg') fixed no-repeat center center; }
.colored { color: #fff; }

.btnSection .sectionWrapper { text-align: center; padding: 80px 0; }

.intro, .features, .company { padding-bottom: 50px; }
.intro .sectionTxt { text-align: center; padding: 20px 15% 20px; }
.intro .imgCntntSection .txtBlock { padding-top: 60px; }

.imgCntntSection { padding: 30px 0; border-top: 1px solid #eaeaea; border-color: rgba(0,0,0,.1); }
.imgCntntSection:first-child, .imgCntntSection.first { border-top: 0; }
.imgCntntSection:last-child, .imgCntntSection.last { border-bottom: 0; }
.imgCntntSection .title { color: #61A628; font-weight: bold; font-size: 1.2em; margin-bottom: .5em; }
.imgCntntSection .txtBlock { padding-top: 30px; }
.imgCntntSection .imgBlock { float: right; margin-left: 20px; margin-right: -40px; } 
.imgCntntSection.rightAlign .imgBlock { float: left; margin-left: -40px; margin-right: 20px; } 
.screenShowcase { position: relative; width: 660px; height: 389px; background: url('../imgs/showcase-notebook.png') no-repeat 0 0; }
.screenShowcase .canvas { position: absolute; top: 30px; left: 84px; width: 491px; height: 307px; overflow: hidden; background: #000; }
.imgCntntSection.leftAlign .screenShowcase { margin-right: -45px; margin-left: -20px; }
.imgCntntSection.rightAlign .screenShowcase { margin-left: -45px; margin-right: -20px; }
.imgCntntSection.smaller { float: left; width: 46%; padding-right: 4%; border-right: 1px solid #eaeaea; border-color: rgba(0,0,0,.1); }
.imgCntntSection.smaller.rightAlign { float: right; padding-right: 0; border-right: 0; }

.imgCntntSection.txt3 .txtBlock { padding-top: 90px; }
.imgCntntSection.txt4 .txtBlock { padding-top: 130px; }

.formSection { overflow: hidden; }
.formSection .sectionWrapper { padding: 0; background: url('../imgs/graphic_circles_larger_transp.png') no-repeat 5% 120%; }
.formSection .txtBlock { float: left; width: 35%; padding-top: 60px;
  text-shadow: 0 0 12px rgba(0,0,0,.35);
}
.formSection .title { font-size: 2em; font-weight: bold; margin-bottom: .2em; }
.formSection .description { font-size: 2em; font-weight: 300; line-height: 1.2em; }
.formCnt { position: relative; background: #fff; margin-left: 40%; padding: 50px 50px 30px; overflow: hidden; min-height: 300px;
  -moz-border-radius: .3em .3em 0 0;
  -webkit-border-radius: .3em .3em 0 0;
  -ms-border-radius: .3em .3em 0 0;
  -o-border-radius: .3em .3em 0 0;
  border-radius: .3em .3em 0 0;
  -moz-box-shadow: 0 6px 30px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.35);
  -webkit-box-shadow: 0 6px 30px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.35);
  -ms-box-shadow: 0 6px 30px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.35);
  -o-box-shadow: 0 6px 30px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.35);
  box-shadow: 0 6px 30px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.35);
}
.formHead { font-size: 1.6em; font-weight: 300; color: #888; line-height: 1.2em; padding: .7em 25px; background: #f4f4f4; border-bottom: 1px solid #e4e4e4; margin: -50px -50px .75em; }
.formCnt label { display: block; color: #61A628; font-size: .9em; font-weight: bold; margin-bottom: .2em; }
.formCnt input[type=text], .formCnt textarea { display: block; width: 96%; padding: .8em 2%; height: 1em; line-height: 1em; font-size: 1em; border: 1px solid #cfcfcf; color: #333; margin-bottom: .5em;
  -moz-border-radius: .25em;
  -webkit-border-radius: .25em;
  -ms-border-radius: .25em;
  -o-border-radius: .25em;
  border-radius: .25em;
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,.075) inset;
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.075) inset;
  -ms-box-shadow: 0 2px 8px rgba(0,0,0,.075) inset;
  -o-box-shadow: 0 2px 8px rgba(0,0,0,.075) inset;
  box-shadow: 0 2px 8px rgba(0,0,0,.075) inset;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.formCnt textarea { height: 6em; resize: vertical; margin-top: 1.6em; }
.formCnt input[type=text]:focus, .formCnt textarea:focus { border-color: #61A628; background: #fff;
  -moz-box-shadow: 0 0 0 rgba(0,0,0,0) inset, 0 2px 4px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0) inset, 0 2px 4px rgba(0,0,0,.1);
  -ms-box-shadow: 0 0 0 rgba(0,0,0,0) inset, 0 2px 4px rgba(0,0,0,.1);
  -o-box-shadow: 0 0 0 rgba(0,0,0,0) inset, 0 2px 4px rgba(0,0,0,.1);
  box-shadow: 0 0 0 rgba(0,0,0,0) inset, 0 2px 4px rgba(0,0,0,.1);
}
.formCnt .submitCnt { text-align: center; margin-top: 1.5em; }
.formCnt.dark { background: rgba(0,0,0,.8); background: #333; }
.dark .formHead { background: rgba(0,0,0,.33); border-color: rgba(0,0,0,.5); color: #61A628; }
.formCnt.dark label { color: #fff; }
.formCnt.dark input[type=text], .formCnt.dark textarea { background: rgba(255,255,255,.85); }
.formCnt.dark input[type=text]:focus, .formCnt.dark textarea:focus { border-color: #61A628; background: #fff; }

#successDiv { color: #61a628; }
#successDiv .body { padding-bottom: 16px; }
.failed { font-weight: bold; color: red; }
.downloadBtnCnt { text-align: center; }

.customReports, .company { position: relative;
  -moz-box-shadow: 0 0 60px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 60px rgba(0,0,0,.2);
  -ms-box-shadow: 0 0 60px rgba(0,0,0,.2);
  -o-box-shadow: 0 0 60px rgba(0,0,0,.2);
  box-shadow: 0 0 60px rgba(0,0,0,.2);
}
.customReports .sectionWrapper { background-position: 100% 190%; }
.customReports .txtBlock { padding-top: 30px; float: right; }
.customReports .formCnt { margin-left: 0; margin-right: 40%; }

.company { background-image: url('../imgs/graphic_circles.png'); background-repeat: no-repeat; background-position: 107% 100%; background-attachment: fixed; }
.company .imgCntntSection .txtBlock { padding: 0 50px 0; }
.company .imgCntntSection .txtBlock .title { text-align: center; }

.footer .sectionWrapper { padding: 50px; text-align: center; font-size: 0.9em; }
.footer a { color: #fff; font-weight: bold; }
.footer a:hover { text-decoration: underline; }

.jumpBtn { cursor: pointer; }