@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*/

html, body { height: 100%}
body {font-family: lato;overflow-x: hidden;font-weight: 100;direction: ltr;}
.mobile {display: none}


#top_wrapper {width: 1920px;box-sizing: border-box; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform-origin: top; -webkit-transform-origin: top; /* background: url('../images/dev/bgref.jpg') no-repeat top center; background-size: 100%; */ }


/* LAYOUT */
#top {height: 1081px;box-sizing: border-box;padding: 0 376px 0 374px; background: url('../images/topbg.jpg') no-repeat top center; background-size: 100%;padding-top: 12.55%;}
#benefits {height: 1015px;box-sizing: border-box;padding: 0 376px 0 374px;padding-top: 123px;}
#realtime {height: 931px;box-sizing: border-box;padding: 120px 376px 0 374px;}
#app {height: 1081px;box-sizing: border-box;padding: 0 376px 0 374px;padding-top: 134px;background-color: #f5f5f5;}
#design {height: 1161px;box-sizing: border-box;padding: 0 376px 0 374px;padding-top: 171px;}
#footer {height: 871px;box-sizing: border-box;padding: 302px 376px 51px 374px;}
ul { list-style: none}
#top_bar { display: none}

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

/* TOP */
#top_logo {position: absolute;left: 44px;top: 34px;}
#top_logo_img {}
.content {}
.header {height: 180px;padding-bottom: 338px;}
h1 {font-size: 69.6px;text-align: left;color: #fff;word-spacing: -0.1px;letter-spacing: 0.8px;padding-bottom: 1.4%;font-weight: 100;margin-left: 221px;}
#top p {font-size: 24px;text-align: center;margin-left: 14px;word-spacing: 0.2px;letter-spacing: -0.1px;color: #fff;font-weight: 500;}
.bird { padding: 0 425px;}
.bird span {display: block;text-align: center;font-size: 16px;color: #fff;line-height: 22px;word-spacing: 0.1px;padding-bottom: 6.3%;font-weight: 400;}
   /* form*/
.forms {}
#top_form { height: 37px; padding-bottom: 19px;}
input {border: 0;font-size: 16px;font-weight: 400;}
.form-row { padding: 0 12px; margin-left: 1px; position: relative;}

input.email {width: 180px;height: 34px;float: left;border-radius: 15px 0 0 15px;box-sizing: border-box;padding-left: 13px;background-color: #fff;color: #000;border: 1px solid #a5a5a5;border-right: none;}
input.send {height: 34px;width: 115px;float: left;border-radius: 0 15px 15px 0;background-color: #3ca0fe;color: #fff;}
input.send:hover {  background-color: #63b2fb }

.thanks { display: none; font-size: 16px;font-weight: 400;color: #fff;text-align: center;height: 34px;}
#top .thanks {}
#bar .thanks { color: #3ca0fe; float: right; padding: 9px 95px 0 0;}
#footer .thanks {display: block;height: 30px;line-height: 22px;padding-top: 0;text-align: center;color: #3ca0fe;padding-left: 3px;visibility: hidden;}



/* BENEFITS */
#benefits h2 {text-align: center;font-weight: 100;font-size: 49px;margin-left: 16px;letter-spacing: -0.5px;position: relative;padding-bottom: 114px;}
#benefits h2:after {content: " ";position: absolute;width: 112px;height: 7px;background: url('../images/line1.png') no-repeat top center;background-size: contain;top: 60px;left: 524px;}
#benefits ul {
    padding-left: 37px;
}
#benefits ul li {font-size: 18px;float: left;position: relative;width: 31%;box-sizing: border-box;padding: 159px 0 101px 0;font-weight: 400;line-height: 23px;text-align: center;word-spacing: -1.4px;letter-spacing: 0.2px;}#benefits .li-img { display: block; margin: 0 auto;}
#benefits #b1 {background: url('../images/benefits1.png') no-repeat;background-position: 48% 0%;}
#benefits #b2 {background: url('../images/benefits2.png') no-repeat;background-position: 59% 0%;padding-left: 49px;}
#benefits #b3 {background: url('../images/benefits3.png') no-repeat;background-position: 76% 7%;padding-left: 96px;}
#benefits #b4 {background: url('../images/benefits4.png') no-repeat;background-position: 50% 0%;padding: 151px 0 0 0;}
#benefits #b5 {background: url('../images/benefits5.png') no-repeat;background-position: 63% 0%;padding: 152px 0 0 43px;}
#benefits #b6 {background: url('../images/benefits6.png') no-repeat;background-position: 74% 11%;padding: 150px 0 0 105px;}
#benefits .li-text { text-align: center; display: block;}

/* REALTIME */
#realtime h2 { font-weight: 100; font-size: 48px; text-align: center; padding-left: 11px; padding-bottom: 130px;}
#realtime .details {position: relative;width: 1016px;margin-left: 94px;box-sizing: border-box;height: 399px;background: url('../images/detail.png') no-repeat;background-size: 97.1%;background-position: 4% 54%;}
#realtime  #detail_list {}
#realtime #detail_list li { position: absolute;}
#realtime #detail_list h3 { font-weight: 900; font-size: 22px; padding-bottom: 12px;}
#realtime #detail_list span { font-size: 18px; display: block; font-weight: 400; line-height: 25px;}
#data_1 {top: 68px; left: 0px;}
#data_2 {top: 214px;left: 0px;}
#data_3 { right: 25px; top: 19px; text-align: right;}
#data_4 { right: 24px; top: 154px; text-align: right;}
#data_5 { right: 24px; top: 285px; text-align: right;}

/* APP */
#app h2 { font-weight: 100; font-size: 48px; text-align: center; padding-left: 8px; padding-bottom: 160px;}
#app content {}
.phone {float: right;width: 50%;position: relative;}
#phone { width: 734px; position: absolute; top: -70px; left: 47px;}
.features { width: 47%;}
#feature_list { padding-left: 40px; padding-top: 42px;}
#feature_list li { padding-bottom: 34px;}
#feature_list li h3 { font-size: 22px; font-weight: 900; display: block; position: relative; padding-bottom: 9px;}
#feature_list li .line { position: absolute; left: 0; top: 25px;}
#feature_list li span { font-weight: 400; font-size: 19px; display: block; letter-spacing: -0.5px;}

/* DESIGN */
#design h2 {font-weight: 100;font-size: 48px;text-align: center;padding-bottom: 132px;}
#design #design_list {}
#design #design_list li {font-size: 18px;float: left;width: 49.2%;text-align: center;padding-left: 4px;padding-top: 173px;}
#design #design_list li h3 {font-weight: 900;font-size: 22px;margin-left: 6px;padding-bottom: 1px;}
#design #design_list li span {line-height: 24px;margin-left: 8px;letter-spacing: 0px;font-weight: 400;word-spacing: -0.2px;display: block;}
#design #design_list li span .line-2 {margin-left: 0px;}

#design #design_list #d1 {background: url('../images/design1.png') no-repeat;background-position: 51.1% 0%;padding-bottom: 100px;}
#design #design_list #d2 {background: url('../images/design2.png') no-repeat;background-position: 52% 0%;padding-bottom: 100px;padding-top: 171px;}
#design #design_list #d2 h3 {margin-left: 0px;padding-bottom: 3px;}
#design #design_list li#d3 {background: url('../images/design3.png') no-repeat;background-position: 51.3% 0%;padding-top: 183px;padding-left: 3px;}
#design #design_list li#d3 h3 { padding-bottom: 4px;}
#design #design_list #d4 {background: url('../images/design4.png') no-repeat;background-position: 52% 0%;padding-top: 184px; padding-left: 5px}
#design #design_list li#d4 h3 {padding-bottom: 2px;}

/* FOOTER */
#bot_bar { display: none}
#footer h2 { font-weight: 400; font-size: 24.1px; text-align: center; word-spacing: -0.4px; margin-left: -3px;}
#footer h3 { font-weight: 400; font-size: 18px; text-align: center; word-spacing: -0.4px; margin-left: 2px;}
#bot_form {padding: 57px 424px 0px 423px;height: 39px;}
.questions {font-size: 18px;text-align: center;font-weight: 400;padding-left: 6px;padding-bottom: 209px;line-height: 38px;}

#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 { margin: 20px 0px 0px 0px;}
#bottom { height: 42px; box-sizing: border-box; position: relative; width: 100%; font-size: 14px; font-weight: 400;}
#rights { float: left; padding-top: 15px;}
#tross { float: right; margin-top: 12px; display: block; padding-right: 89px; position: relative;}
#tross_logo { display: block; width: 100%}
#tross_link { display: block;  width: 83px; position: absolute; right: -1px; top: -3px;}

/* 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 }
/**/



/* ADJUSTMENTS */


@media screen and (max-width: 1850px) {
    #top_logo { left: 8%; }
} 

@media screen and (max-width: 1630px) {
    #top_logo { left: 15.35%; }
} 

@media screen and (max-width: 1400px) {
    #top_logo { left: 22%; }
} 

@media screen and (max-width: 1205px) {
   #bottom { padding: 0 100px; } 
} 

@media screen and (max-width: 1125px) {
    .features { margin-left: 93px;}
    .phone { margin-right: 100px}
} 

@media screen and (max-width: 1100px) {
   #top_logo { left: 25%; } 
} 

@media screen and (max-width: 1051px) {
    #benefits ul { padding-left: 93px;}
    #benefits ul li { width: 29%}
    #benefits #b3 {     padding-left: 75px; }
    #benefits #b6 {     padding-left: 85px;}
    
    #design #design_list { padding-left: 50px;}
    #design #design_list li { width: 47%}
    
} 

@media screen and (max-width: 1025px) {
    #realtime .details { width: 980px; margin-left: 105px;}
}

/* laptop */


@media screen and (max-height: 850px) and (max-width: 1366px) {
    #top { height: 798px;; padding-top: 9.55%; background-size: 74%;}
    .header {padding-bottom: 118px;}
    #benefits h2 { padding-bottom: 90px}
    #benefits ul li { padding-bottom: 68px}
    #benefits { height: 915px}
    #realtime { height: 795px}
    #realtime h2 { padding-bottom: 70px}
    #app { height: 820px; padding-top: 90px}
    #app h2 { padding-bottom: 60px}
    #phone { width: 645px}
    #app {    height: 870px;}
    #design { padding-top: 85px; height:941px ;}
    #design h2 { padding-bottom: 80px}
    #footer { height: 725px; padding-top: 150px}
}