* { margin: 0; padding: 0; outline: none; }
html, body { height: 100%; margin: 0; }
body { background: #fff; font-size: 14px; font-family: 'AvenirNext-Regular'; color: #111;}
@font-face { font-family: 'alivelyfont'; 
src: url('/assets/font/alivelyfont.eot?jan2ea&v=1'); 
src: url('/assets/font/alivelyfont.eot?jan2ea&v=1#iefix') format('embedded-opentype'), 
url('/assets/font/alivelyfont.woff2?jan2ea&v=1') format('woff2'), 
url('/assets/font/alivelyfont.ttf?jan2ea&v=1') format('truetype'), 
url('/assets/font/alivelyfont.woff?jan2ea&v=1') format('woff'), 
url('/assets/font/alivelyfont.svg?jan2ea&v=1#alivelyfont') format('svg'); 
font-weight: normal; font-style: normal; }
@font-face { font-family: 'AvenirNext-DemiBold'; 
src: url('/assets/font/AvenirNext-DemiBold.eot?v=1'); 
src: url('/assets/font/AvenirNext-DemiBold.eot?v=1#iefix') format('embedded-opentype'), 
url('/assets/font/AvenirNext-DemiBold.woff?v=1') format('woff'), 
url('/assets/font/AvenirNext-DemiBold.ttf?v=1') format('truetype'), 
url('/assets/font/AvenirNext-DemiBold.svg?v=1#df2eaeb3aeecfb305b3632871e6dcb16') format('svg'); 
font-style: normal; font-weight: 400; }
@font-face { font-family: 'AvenirNext-Bold'; 
src: url('/assets/font/AvenirNext-Bold.eot?v=1'); 
src: url('/assets/font/AvenirNext-Bold.eot?v=1#iefix') format('embedded-opentype'), 
url('/assets/font/AvenirNext-Bold.woff?v=1') format('woff'), 
url('/assets/font/AvenirNext-Bold.ttf?v=1') format('truetype'), 
url('/assets/font/AvenirNext-Bold.svg?v=1#df2eaeb3aeecfb305b3632871e6dcb16') format('svg'); 
font-style: normal; font-weight: 400; }
@font-face { font-family: 'AvenirNext-Medium'; 
src: url('/assets/font/AvenirNext-Medium.eot?v=1'); 
src: url('/assets/font/AvenirNext-Medium.eot?v=1#iefix') format('embedded-opentype'), 
url('/assets/font/AvenirNext-Medium.woff?v=1') format('woff'), 
url('/assets/font/AvenirNext-Medium.ttf?v=1') format('truetype'), 
url('/assets/font/AvenirNext-Medium.svg?v=1#df2eaeb3aeecfb305b3632871e6dcb16') format('svg'); 
font-style: normal; font-weight: 400; }
@font-face { font-family: 'AvenirNext-Regular'; 
src: url('/assets/font/AvenirNext-Regular.eot?v=1'); 
src: url('/assets/font/AvenirNext-Regular.eot?v=1#iefix') format('embedded-opentype'), 
url('/assets/font/AvenirNext-Regular.woff?v=1') format('woff'), 
url('/assets/font/AvenirNext-Regular.ttf?v=1') format('truetype'), 
url('/assets/font/AvenirNext-Regular.svg?v=1#df2eaeb3aeecfb305b3632871e6dcb16') format('svg'); 
font-style: normal; font-weight: 400;
-webkit-font-variant-ligatures: no-common-ligatures;
-webkit-font-feature-settings:"liga" 0; 
font-feature-settings:"liga" 0; 
text-rendering: optimizeSpeed;
 }
@font-face { font-family: 'AvenirNext-UltraLight'; 
src: url('/assets/font/AvenirNext-UltraLight.eot?v=1'); 
src: url('/assets/font/AvenirNext-UltraLight.eot?v=1#iefix') format('embedded-opentype'), 
url('/assets/font/AvenirNext-UltraLight.woff?v=1') format('woff'), 
url('/assets/font/AvenirNext-UltraLight.ttf?v=1') format('truetype'), 
url('/assets/font/AvenirNext-UltraLight.svg?v=1#df2eaeb3aeecfb305b3632871e6dcb16') format('svg'); 
font-style: normal; font-weight: 400; }
h1 span { font-family: 'alivelyfont'; font-weight: normal; position: absolute; color: #FA0008 }
h1 { font-family: 'alivelyfont'; font-weight: normal; position: relative; color: #fff; font-size: 200%; margin: 6px 0 0 10px; }
h4 span { font-family: 'alivelyfont'; font-weight: normal; position: absolute; color: #FA0008 }
h4 { font-family: 'alivelyfont'; font-weight: normal; position: relative; color: #39ceef; font-size: 600%; }
a { color: #39ceef; text-decoration: none }
.container { min-height: 100%; }
.content { min-height: 100%; }
.clr { float: none; clear: both; height: 0px; overflow: hidden; }
.navigation { background: #39ceef; text-align: center; height: 40px; position: fixed; width: 100%; z-index: 10 }
.navigation a { color: #fff; font-family: 'AvenirNext-DemiBold'; display: table-cell; vertical-align: middle; height: 40px; text-decoration: none; padding: 0 30px; }
.navigation a:hover { text-decoration: underline; }
.navigation .a-hitarea { width: 100px; display: block; position: absolute; z-index: 2 }
.navigation .a-hitarea:hover { text-decoration: none; }
.navigation h1 { position: absolute; }
.navigation ul { list-style: none; }
.navigation ul li { display: inline-block; }
.nav-appstore { position: absolute; right: 20px; top: 2px; }
.section-header { text-align: center; padding: 60px 0 0 0 }
.section h3 { color: #383838; font-weight: normal; font-family: 'AvenirNext-Regular'; padding: 10px 0; font-size: 1.6vw }
.appstore { max-width: 100px; margin: 20px 0 }
.appstore-header { max-width: 100px; }
.hand { text-align: center; margin-bottom: -4px }
.hand img { margin-bottom: -2px }
.section { background: #000; color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #000; }
.section.section-capture { background-image: url(/assets/img/bg-capture.jpg); }
.section.section-share { background-image: url(/assets/img/bg-share.jpg); }
.section.section-sms { background-image: url(/assets/img/bg-sms.jpg); }
.section.section-watch { background-image: url(/assets/img/bg-watch.jpg); }
.section.section-upload { background-image: url(/assets/img/bg-upload.jpg); }
.section.section-space { background-image: url(/assets/img/bg-space.jpg); }
.section.section-header { background-image: url(/assets/img/header.jpg); overflow: hidden; }
.section .dots { display: table-cell; width: 20px; vertical-align: middle; }
.section .dots .dot { border-radius: 50%; width: 10px; height: 10px; background: #827D77; margin: 0 0 20px 0; }
.section .dots .dot.active { background: #fff }
.group-2 { width: 80%; margin: 0 auto; padding: 20px 0; max-width: 1000px }
.group-2 .cell-1 { width: 70%; display: table-cell; vertical-align: middle; }
.group-2 .cell-1 .inner { padding: 20px; display: table-cell; vertical-align: middle; }
.group-2 .cell-1 .inner h2 { font-weight: normal; font-family: 'AvenirNext-DemiBold'; line-height: 4.3vw; font-size: 36px; font-size: 4.2vw; }
.group-2 .cell-1 .inner p { font-size: 12px; line-height: 1.8vw; font-size: 1.4vw; padding: 20px 20% 0 0 }
.group-2 .cell-2 { width: 30%; max-width: 344px; display: table-cell; vertical-align: top; }
.sub-section { color: #838383; padding: 60px 0 0 0 }
.sub-section .inner { width: 80%; max-width: 800px; margin: 0 auto; }
.sub-section .inner-wide { width: 80%; max-width: 1200px; margin: 0 auto; }
.sub-section .inner-header { text-align: center; }
.sub-section .inner p { padding: 0 0 15px 0; line-height: 21px; }
.sub-section ul { list-style: decimal; margin: 0 0 20px 20px; }
.sub-section ul li { padding: 0 0 6px 0 }
.sub-section h2 { font-family: 'AvenirNext-Bold'; font-weight: normal; color: #383838; font-size: 150%; }
.sub-section h3 { font-family: 'AvenirNext-Medium'; font-weight: normal; color: #383838; font-size: 100%; }
.sub-section h5 { font-family: 'AvenirNext-DemiBold'; font-weight: normal; color: #383838; font-size: 250%; padding: 10px 0; display: block; text-align: center; }
.sub-section h6 { font-family: 'AvenirNext-Regular'; font-weight: normal; color: #383838; font-size: 150%; padding: 10px 0; display: block; text-align: center; }
.group-3 { padding: 10px 0 100px 0 }
.group-3 .cell { width: 33%; display: table-cell; vertical-align: top; text-align: center; padding: 0 20px; }
.group-3 .cell img { max-width: 159px; margin: 0 0 6px 0; }
.group-3 .cell a { font-family: 'alivelyfont'; text-decoration: none; color: #39ceef; font-size: 25px; display: block; margin: 7px 0; }
.group-3 .cell p { text-align: left; }
.blog { text-align: left; }
.blog .item h6 { text-align: left; }
.blog .item p.date { font-size: 12px }
.blog .item { border-bottom: 1px solid #D1D1D1; padding: 0 0 50px 0; margin: 50px 0 }
.blog .item .img-b{ border:1px solid #EFEFEF }
.footer { background: #39ceef; text-align: center; color: #fff; padding: 40px 0 }
.footer a { color: #fff; }
.footer p { font-size: 22px; font-family: 'AvenirNext-Regular'; }
.footer p.copy { font-size: 12px; }
.footer p.copy a { font-weight: bold; padding: 0 10px; text-align: center; font-size: 13px; }
.footer p.copy a:hover { text-decoration: underline; }
.footer .fspace { display: none; }
.footer .footer-appstore { margin: 10px 0 20px 0; }
.footer .footer-appstore img { max-width: 100px; }
.footer .al { font-family: 'alivelyfont'; }

@media (max-width: 600px) {
.hand img { max-width: 230px; margin-bottom: -2px }
.group-2 { width: 90%; }
.section .dots { width: 10px; }
.group-2 .cell-1 .inner p { font-size: 11px; line-height: 12px; }
.section .dots .dot { width: 7px; height: 7px; }
h1 { font-size: 14px; }
.navigation .a-hitarea { width: 50px; }
.navigation a { font-size: 12px;  padding: 0 10px;}
.nav-appstore { display: none; }
h4 { font-size: 400%; }
.section-header h3 { font-size: 12px }
.navigation { text-align: right; }
.sub-section .inner-wide { width: 100%; max-width: 480px; }
.group-3 { padding: 0; width: 100%; font-size: 10px }
.group-3 .cell { padding: 10px; }
.group-3 .cell p { font-size: 9px }
.group-3 .cell h2 { font-size: 9px; white-space: nowrap }
.group-3 .cell h3 { font-size: 9px; white-space: nowrap }
.navigation a { font-size: 10px }
.sub-section .inner { font-size: 12px; }
.sub-section .inner p { font-size: 12px; line-height: 20px }
.footer p { font-size: 16px; }
.footer p.copy { font-size: 10px; }
.footer .fspace { display: block; }
}

@media (max-height: 568px) {
.hand img { max-width: 200px; margin-bottom: -2px }
.group-2 { width: 90%; }
.section .dots { width: 10px; }
.group-2 .cell-1 .inner p { font-size: 11px; line-height: 12px; }
.section .dots .dot { width: 7px; height: 7px; }
h1 { font-size: 14px; }
.navigation .a-hitarea { width: 50px; }
.navigation a { font-size: 12px;  padding: 0 10px;}
h4 { font-size: 400%; }
.nav-appstore { display: none; }
h4 { font-size: 400%; }
.section-header h3 { font-size: 12px }
.navigation { text-align: right; }
.sub-section .inner-wide { width: 100%; max-width: 480px; }
.group-3 { padding: 0; width: 100%; font-size: 10px }
.group-3 .cell { padding: 10px; }
.group-3 .cell p { font-size: 9px }
.group-3 .cell h2 { font-size: 9px; white-space: nowrap }
.group-3 .cell h3 { font-size: 9px; white-space: nowrap }
.navigation a { font-size: 10px }
.sub-section .inner { font-size: 12px; }
.sub-section .inner p { font-size: 12px; line-height: 20px }
.footer p { font-size: 16px; }
.footer p.copy { font-size: 10px; }
.footer .fspace { display: block; }
}

@media only screen and (min-width: 1350px) {
.group-2 .cell-1 .inner h2 { line-height: 56px; font-size: 59px; }
.group-2 .cell-1 .inner p { font-size: 12px; line-height: 26px; font-size: 19px }
}

@media (max-height: 420px) {
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}