@charset "utf-8";
/* CSS Document */
/* RESET */
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, input, select, textarea,
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;} iframe{display:none;}
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
/* END RESET*/

body {font-family: lato; overflow-x: hidden;font-size: 16px; font-weight: 100}
.desktop {display: none}

#top_wrapper {width: 100%;box-sizing: border-box; overflow-x: hidden}


/* AREAS  */
#top      { height: 37.1rem;box-sizing: border-box;background: url('../images/topbg2.jpg') no-repeat top center;padding-top: 6.9rem;background-size: cover;position: relative; width: 100%}
#benefits {height: 83rem;box-sizing: border-box;padding-top: 4.1rem;}
#realtime {height: 51.3rem;box-sizing: border-box;padding-top: 4.2rem;}
#app      {height: 50.2rem;box-sizing: border-box;background-color: #f5f5f5;padding-top: 2.3rem;}
#design   {height: 76.4rem;box-sizing: border-box;padding-top: 3.7rem;}
#footer   {height: 41.7rem;box-sizing: border-box;padding-top: 10.8rem;position: relative;padding-bottom: 7.8rem;}
ul { list-style: none}

/* BAR */
#bar { display: none; position: fixed;width: 100%;bottom: 0px;left: 0;box-sizing: border-box;margin-top: 0px;background-color: #e4e4e4;color: #000;z-index: 110;height: 7.8rem;padding-top: 1.2rem; }
/*#bar.visible { height: 79px; padding: 23px 29% 0px 30.35%; transition: all 200ms ease-in-out; }*/
#bar .inner {margin: 0 auto;padding-left: 3.5%;}
#bar h3 {font-size: 1rem;font-weight: 400;float: left;word-spacing: 0.02rem;padding-bottom: 4%;}
#bar_form {/* float: left; */margin-left: -3.4%;}

/* TOP */
#top_bar { position: absolute; top: 85%}


#top_logo {position: absolute;left: 6.3%;width: 27.4%;top: 1.3rem;}
#top_logo_img { display: block; width: 100%;}
.content {}
.header { padding-bottom: 28.3%;}
h1 {font-weight: 100;font-size: 2.8rem;text-align: center;color: #fff;line-height: 2.5rem;letter-spacing: -0.0rem;word-spacing: -0.1rem;padding-bottom: 8%;}
#top p {text-align: center;color: #fff;font-weight: 400;font-size: 1.3rem;letter-spacing: -0.03rem;line-height: 1.53rem;}
.bird { }
.bird span {display: block;text-align: center;color: #fff;font-weight: 400;font-size: 1.05rem;padding-left: 1.2%;letter-spacing: -0.02rem;margin-left: -2.2%;word-spacing: -0.01rem;padding-bottom: 6.4%;}
   /* form*/
input {border: 0;font-weight: 400;font-size: 1.1rem;letter-spacing: 0.02rem;}
.form-row {position: relative;padding: 0 5%;width: 100%;}
input.email {float: left;border-radius: 50px 0 0 50px;box-sizing: border-box;background-color: #fff;color: #000;height: 3.1rem;width: 52.3%;padding: 0 1% 0 5%;border: 1px solid #a5a5a5; border-right: none}
input.send {float: left;border-radius: 0 50px 50px 0;background-color: #3ca0fe; color: #fff; height: 3.1rem;width: 36.8%;}
input.send:hover {  background-color: #63b2fb }
input.send:active {  background-color: #63b2fb }
.forms {}
#top_form { height: 3.9rem;}
.thanks {display: none;font-size: 1rem;font-weight: 400;color: #fff;text-align: center;}
#top .thanks {}
#bar .thanks {}
#footer .thanks {    margin-bottom: 2rem; }

#top .thanks { line-height: 1.2rem;}
#bar .thanks {color: #3ca0fe;text-align: center;line-height: 2.7rem;}
#footer .thanks {display: block;height: 30px;line-height: 22px;padding-top: 0;text-align: center;color: #3ca0fe;padding-left: 3px;visibility: hidden;}



/* PLACEHOLDERS */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #a5a5a5; font-family: lato; font-weight: 100 }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  color: #a5a5a5; font-family: lato; font-weight: 100 }
::-moz-placeholder { /* Mozilla Firefox 19+ */  color: #a5a5a5; font-family: lato; font-weight: 100 }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #a5a5a5; font-family: lato; font-weight: 100 }
/**/

/* BENEFITS */
#benefits h2 { font-weight: 100; font-size: 1.9rem; text-align: center; padding-bottom: 9%; position: relative}
#benefits h2:after {content: " ";position: absolute;width: 17.5%;height: 0.6rem;background: url('../images/line1.png') no-repeat top center;background-size: contain;top: 2.22rem;left: 41.4%;}

#benefits ul {}
#benefits ul li { height: 12.1rem; box-sizing: border-box; position: relative; padding-top: 6.8rem;}
#benefits #b1 {background: url('../images/mobile/benefit1.png') no-repeat;background-position: 49.5% 9%;background-size: 24%;padding-top: 7.4rem;padding-right: 0.4%;}
#benefits #b2 {background: url('../images/mobile/benefit2.png') no-repeat;background-position: 49.6% 23.5%;padding-top: 8.1rem;padding-right: 1%;background-size: 20.4%;}
#benefits #b3 {background: url('../images/mobile/benefit3.png') no-repeat;background-position: 49.7% 31%;padding-top: 7.8rem;padding-right: 1.5%;background-size: 29%;}
#benefits #b4 {background: url('../images/mobile/benefit4.png') no-repeat;background-position: 53.6% 27%;padding: 8.2rem 0.9% 0 0;background-size: 25.7%;}
#benefits #b5 {background: url('../images/mobile/benefit5.png') no-repeat;background-position: 50.9% 32%;padding: 8.7rem 2.6% 0 0;background-size: 23.5%;}
#benefits #b6 {background: url('../images/mobile/benefit6.png') no-repeat;background-position: 50.4% 39.4%;padding: 8.6rem 3% 0 0;background-size: 23.6%;}

#benefits .li-text { text-align: center; display: block; font-size: 1rem; font-weight: 400; padding-left: 0.6%;}

/* REALTIME */
#realtime h2 { font-weight: 100; font-size: 1.85rem; text-align: center; padding-left: 1%;}
#realtime .details {padding-top: 12.4rem;background: url('../images/mobile/real.jpg') no-repeat;background-position: 50.3% 8%;background-size: 39%;}
#realtime #detail_list { padding-top: 0.5rem;}
#realtime #detail_list li { padding-left: 9.1%; padding-bottom: 2.1rem;}
#realtime #detail_list h3 {font-weight: 800;font-size: 1.25rem;padding-bottom: 0.4rem;}
#realtime #detail_list span { font-size: 1rem; font-weight: 400; word-spacing: 0.01rem; margin-left: 0.5%;}
#realtime  #detail_list #data_1 {}
#realtime  #detail_list #data_2 {padding-bottom: 2.3rem;}
#realtime #detail_list #data_3 {padding-left: 9.5%;padding-bottom: 2rem;}
#realtime #detail_list #data_4 {padding-left: 9.3%;padding-bottom: 2rem;}
#realtime #detail_list #data_5 { padding-left: 9.4%;}

/* APP */
#app h2 { text-align: center; font-size: 1.84rem; font-weight: 100; padding-bottom: 3%;}
#app content {}
.phone {}
#phone { display: block; width: 71%; padding-left: 17%; padding-bottom: 4%;}
.features {}
#feature_list {}
#feature_list li {}
#feature_list li {padding-left: 7.9%;padding-bottom: 7%;}
#feature_list li h3 { display: block; font-size: 1.24rem; font-weight: 800; position: relative; padding-bottom: 3.1%;}
#feature_list li .line { position: absolute; top: 1.6rem; left: 0; width: 17.4%;}
#feature_list li span { display: block; font-size: 1rem; font-weight: 400; line-height: 1.3rem;}

/* DESIGN */
#design h2 { font-weight: 100; font-size: 1.9rem; text-align: center; letter-spacing: -0.02rem; margin-left: -1.1%; padding-bottom: 9.3%;}
#design #design_list {}
#design #design_list li { height: 16.2rem; box-sizing: border-box; padding-top: 8.6rem;}
#design #design_list li img {}
#design #design_list li h3 {font-weight: 800;text-align: center;font-size: 1.25rem;padding-bottom: 0.6%;}
#design #design_list li span { text-align: center; display: block; font-size: 1rem; font-weight: 400;}
#design #design_list li span .line-2 {display: initial;}
#design #design_list #d1 {padding-top: 9.1rem;background: url('../images/mobile/design1.jpg') no-repeat;background-position: 50% 0%;background-size: 31.9%;}
#design #design_list #d2 {padding-top: 9.6rem;background: url('../images/mobile/design2.jpg') no-repeat;background-position: 52% 9%;background-size: 30.7%;margin-left: -3%;}
#design #design_list li#d3 {padding-top: 9.7rem;background: url('../images/mobile/design3.jpg') no-repeat;background-position: 50% 4%;background-size: 32%;}
#design #design_list #d4 {padding-top: 10rem;background: url('../images/mobile/design4.jpg') no-repeat;background-position: 50% 4%;background-size: 31.2%;}
#design #design_list #d2 h3 {
    padding-left: 2.4%;
} background: url('../images/mobile/design1.png') no-repeat; background-position: 0% 0%; background-size: 10%
#design #design_list li#d3 h3 {}
#design #design_list li#d4 h3 {}


/* FOOTER */
#bot_bar { position: absolute; top: 0;}
#footer h2 { text-align: left; font-size: 1.24rem; font-weight: 400; margin-left: 5.1%;}
#footer h3 { text-align: left; margin-left: 19.2%; font-weight: 400; font-size: 1rem; padding-bottom: 2.75rem;}
#bot_form { height: 5.1rem;}
.questions { text-align: left; font-size: 0.9rem; font-weight: 400; margin-left: 24.2%; letter-spacing: 0.01rem; padding-bottom: 2.6rem;}
#contact_us { color: #299dd4; text-decoration: none;}
#contact_us:active { color: #299dd4; text-decoration: none;}
#contact_us:visited { color: #299dd4; text-decoration: none;}
#last_line { width: 100%; margin: 0 0 1rem 0;}
#bottom { text-align: center; font-weight: 400; font-size: 0.9rem; padding-top: 0.5rem;}
#rights { display: block; letter-spacing: 0.01rem; padding-left: 1%; padding-bottom: 1.6rem;}
#tross { display: block; font-size: 0.9rem; margin-left: -5.6%; letter-spacing: 0.01rem; word-spacing: 0.1rem; padding-right: 17%; position: relative;}

#tross_link { display: block; width: 21.2%; position: absolute; right: 26.4%; top: -0.3rem;}
#tross_logo { display: block; width: 100% }