/* resets and basics */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,div{display:block;position:relative;padding:0;margin:0;}.left {float:left;}.right {float:right;}.txtl{text-align:left;}.txtc{text-align:center;}.txtr{text-align:right;}.clear{clear:both;}img{border:0;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}.clearfix{min-height:0;display:block;}* html .clearfix{height:1%;}

/* text and links */
body, td, div, select, textarea, input, button { font: 16px 'Raleway', sans-serif; color:#01010d; }
a { color:#000; text-decoration: none; }
h1, h2, h3, h1 a, h2 a, h3 a, legend { color:#2c76bd; font-weight: normal; }
h1 { font-size: 1.8em; margin: 0 0 10px; }
h2 { font-size: 1.4em; margin: 0 0 10px; }
h3 { font-size: 1.1em; margin: 0 0 10px; }
p { margin: 0 0 10px 0; line-height:1.4em;}
ul,ol{ margin:0 0 10px 30px;padding: 0;}
ul li, ol li{line-height:1.3em; margin-bottom: 5px; padding: 0;}
li ol, li ul{margin-bottom:0;}

/* helpers */
.strikethrough { text-decoration: line-through; }
.hide { display: none; }
.white { color: #fff; }
.black { color: #01010d; }
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs40 { font-size: 40px; }
.fs80 { font-size: 80px; }
.mb0 { margin-bottom: 0; }

/* layout */
body { margin: 0; }
.container { max-width: 1300px; width: 100%; margin: 0 auto; box-sizing: border-box; }
@media screen and (max-width: 1199px) {
  .container { padding: 0 10px; }
}

/* header */
header { padding: 10px 0; border-bottom: 1px solid #ccc; }
header #logo { width: 40%; float: left; }
header #logo img { display: block; max-width: 100%; max-height: 40px; }
header #logo h1 { line-height: 40px; margin-bottom: 0; font-size: 34px; }
header #logo h1 a { color: #131313; }
header #logo h1 i { margin-right: 5px; color: #418db6; }
header nav { float: left; width: 60%; }
header nav ul { line-height: 40px; margin: 0; text-align: right; }
header nav li { display: inline-block; list-style: none; margin: 0 0 0 20px; position: relative; }
header nav li a { text-decoration: none; font-size: 18px; }
header nav ul ul { position:absolute; opacity:0; width:170px; z-index: 100; text-align: left; padding: 20px 0 0; border-bottom: 1px solid #ccc; }
header nav ul ul li { float: none; margin: 0; display: block; }
header nav ul ul li a, header nav ul li:hover ul li a{ background:#fff; padding: 10px; display: block; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
header nav ul li:hover ul { opacity:1; top: auto; left: -10px; }

#mobile-menu { text-align: center; display: block; margin-top: 5px; display:none; }

@media screen and (max-width: 1000px) {
  header #logo { width: 100%; float: none; text-align: center; }
  header #logo img { max-width: 400px; width: 100%; margin: 0 auto; height: auto; max-height: none; }
  header nav { width: 100%; float: none; }
  header #nav { display: none; width: 100%; float: none; }
  header #nav li { display: block; margin: 0; }
  header #nav li a { display: block; text-align: center; padding: 7px 0; }
  header #nav li.has-submenu > a { display: none; }
  header nav ul ul { opacity:1; top: auto; left: auto; position: relative; width: auto; padding: 0; background: none; border: none; text-align: center; }
  header nav ul ul li a, header nav ul li:hover ul li a { background: none; padding: 7px 0; border: none; }
  header nav ul li:hover ul { left: 0; }

  #mobile-menu { display:block; }
}

/* logo space */
#logo-space { background: #f1f1f4; padding-bottom: 10px; }
#logo-space .logo {  text-align: center; padding-top: 10px; height: auto; }

#logo-space .logo img { display: inline-block; max-width: 700px; width: 100%; }
/* home */
#home-1 { background: #6a767c; padding-bottom: 60px; }
#home-1 .top { background: #f1f1f4; text-align: center; padding-top: 40px; height: 586px; }
#home-1 .top h1 { font-size: 50px; }
#home-1 .top img { display: inline-block; margin-top: 72px; max-width: 700px; width: 100%; }
#home-1 .top img.de_DE, #home-1 .top img.es_NI { margin-top: 13px; }
#home-1 #nav { float: left; padding-top: 50px; width: 55%; margin: 0; text-align: right; }
#home-1 #nav li { display: inline-block; list-style: none; margin: 0 0 0 20px; }
#home-1 #nav li a { color: #fff; font-weight: bold; text-decoration: none; font-size: 20px; }
#home-2 { padding: 40px 0 50px; border-bottom: 1px solid #ccc; background: #f1f1f4; }
#home-2 h2 { margin-bottom: 15px; }
#home-2 .field { margin-bottom: 25px; }
#home-2 .field input { font-size: 20px; }
#home-2 .button { padding: 10px 50px; }
#home-2 .lcol { float: left; width: 35%; }
#home-2 .rcol { float: left; width: 65%; padding-left: 30px; box-sizing: border-box; text-align: right;}
#home-3 { padding: 40px 0; }
#home-3 .col { width: 33.333333%; float: left; padding: 0 30px; box-sizing: border-box; text-align: center; }
#home-3 .col img { display: block; margin: 0 auto 30px; max-width: 200px; width: 100%; }
#home-3 .col h3 { color: #01010d; font-weight: bold; font-size: 20px; margin-bottom: 20px; }
#home-4 { padding: 80px 0 60px; }
#home-4 .col { width: 33.333333%; float: left; padding: 0 40px; box-sizing: border-box; }
#home-4 .col img { display: block; max-width: 350px; width: 100%; margin-bottom: 30px; }
#home-4 .col h3 { font-weight: bold; }
#home-5 { padding: 40px 0; background-color: #2c76bd; }
#home-5 .button { margin-left: 50px; }
@media screen and (max-width: 1199px) {
  #home-1 .top h1 { font-size: 40px; }
  #home-1 { padding-bottom: 0; }
  #home-1 .top { height: auto; }
}
@media screen and (max-width: 800px) {
	#home-1  iframe { width: 100%; }
    #home-2 .rcol { width: 100%; float: none; margin-bottom: 30px; padding-left: 0;  }
    #home-2 .lcol { width: 100%; float: none; margin-bottom: 30px; }
    #home-2 .rcol iframe { width: 100%; }
    #home-5 .button { display: block; margin-left: 0; margin-top: 10px;}
}
@media screen and (max-width: 600px) {
  #home-3 .col { width: 100%; float: none; margin-bottom: 30px; }
  #home-4 .col { width: 100%; float: none; margin-bottom: 30px; }
}

/* beacons */
#beacon-1 { padding: 50px 0; border-bottom: 1px solid #ccc; }
#beacon-1 .lcol { width: 55%; padding-right: 30px; float: left; box-sizing: border-box; padding-top: 30px; }
#beacon-1 .lcol h1 { font-size: 40px; line-height: 1.5em; text-transform: uppercase; font-weight: bold; }
#beacon-1 .lcol h2 { font-size: 30px; line-height: 50px; }
#beacon-1 .rcol { width: 45%; float: left; box-sizing: border-box; }
#beacon-1 .rcol img { width: 100%; display: block;}
#beacon-2 { padding: 50px 0; }
#beacon-2 .col { width: 33.3333%; float: left; padding: 0 2%; box-sizing: border-box; margin-bottom: 50px; text-align: center; }
#beacon-2 .col img { margin: 0 auto 20px; max-width: 200px; display: block; width: 100%; }
#beacon-2 .col h3 { font-weight: bold; }
#beacon-3 { padding: 40px 0; background-color: #2c76bd; }
#beacon-3 .button { margin-left: 50px; }
@media screen and (max-width: 800px) {
  #beacon-1 .lcol { width: 100%; float: none; padding: 0;}
  #beacon-1 .rcol { width: 100%; float: none; }
  #beacon-3 .button { display: block; margin-left: 0; margin-top: 10px;}
  #logo-space .logo img {display: none !important;}
}
@media screen and (max-width: 800px) {
  #beacon-2 .col { width: 100%; float: none; }
}


/* geofences */
#geofence-1 {  padding: 50px 0; border-bottom: 1px solid #ccc; }
#geofence-1 .lcol { width: 55%; padding-right: 30px; float: left; box-sizing: border-box; padding-top: 30px; }
#geofence-1 .lcol h1 { font-size: 40px; line-height: 1.5em; text-transform: uppercase; font-weight: bold; }
#geofence-1 .lcol h2 { font-size: 30px; line-height: 50px; }
#geofence-1 .rcol { width: 45%; float: left; box-sizing: border-box; }
#geofence-1 .rcol img { width: 100%; display: block;}
#geofence-2 { padding: 50px 0; }
#geofence-2 .col { width: 33.33333%; float: left; padding: 0 2%; box-sizing: border-box; margin-bottom: 20px; text-align: center; }
#geofence-2 .col img { margin-bottom: 20px; max-width: 200px; }
#geofence-2 .col h3 { font-weight: bold; }
#geofence-3 { padding: 40px 0; background-color: #2c76bd; }
#geofence-3 .button { margin-left: 50px; }
@media screen and (max-width: 800px) {
  #geofence-1 .lcol { width: 100%; float: none; padding: 0;}
  #geofence-1 .rcol { width: 100%; float: none; }
  #geofence-3 .button { display: block; margin-left: 0; margin-top: 10px;}
}
@media screen and (max-width: 800px) {
  #geofence-2 .col { width: 100%; float: none; }
}

/* blog */
#blog { padding: 30px 0; min-height: 600px; }
#blog .lcol { width: 75%; padding-right: 5%; float: left; box-sizing: border-box; }
#blog .lcol.full { width: 100%; padding-right: 0%; float: none; box-sizing: border-box; }
#blog .rcol { width: 25%; float: left; box-sizing: border-box; }
#blog #blog-categories { margin-left: 20px; }
#blog #blog-categories li { list-style: disc; }
#blog .posts-list .posts { margin-bottom: 25px; }
#blog .posts-list .posts p { margin-bottom: 10px; }
#blog .posts-list .posts .posts-image { margin-bottom: 10px; }
#blog .posts-list .posts .posts-title { margin-bottom: 5px; }
#blog .posts-list .posts .posts-title a { font-size: 22px; color: #6896b3; }
#blog .post .post-content p { margin-bottom: 15px; }
#blog .post .post-content ul { margin-bottom: 15px; margin-left: 30px; }
#blog .post .post-content ul li { list-style: disc; }
#blog .post .post-content ol { margin-bottom: 15px; margin-left: 30px; }
#blog .post .post-content ol li { list-style: decimal; }
#blog .post img { max-width: 100%; }
#blog .post-paging { margin: 0; }
#blog .post-paging li { list-style: none; }
@media screen and (max-width: 600px) {
  #blog .lcol { width: 100%; padding-right: 0; float: none; margin-bottom: 30px; }
  #blog .rcol { width: 100%; float: none; }
}

/* download */
#download { padding: 50px 0; }
#download .container { max-width: 800px; margin: 0 auto; }
#download .lcol { width: 50%; float: left; text-align: center; }
#download .lcol img { max-width: 275px; width: 100%; }
#download .rcol { width: 50%; float: left; text-align: center; }
#download .rcol img { margin-bottom: 30px; }
#download .rcol img.qr { max-width: 200px; width: 100%; }
#download .rcol img.app { max-width: 300px; width: 100%; }

#download .logo img {display: block; margin-left: auto; margin-right: auto; width: 70%;}

@media screen and (max-width: 800px) {
	#download  iframe { width: 100%; }
    #download  .qrdisplay {display: none !important;}
}

/* payments */
#payments { padding: 50px 0; min-height: 500px; }
#payments .buttons { width: 31.333333%; float: left; margin: 0 1% 30px; }
#payments .buttons:nth-child(3n+1) { clear: both; }

/* pricing */
#pricing { padding: 50px 0 80px; }
#pricing #plans { max-width: 810px; width: 100%; margin: 0 auto; box-sizing: border-box; }
#pricing #plans.plans5 { max-width: 1200px; }
#pricing #plans.plans4 { max-width: 1080px; }
#pricing #plans.plans2 { max-width: 540px; }
#pricing #plans.plans1 { max-width: 270px; }
#pricing .plan { width: 31.33333%; margin: 0 1% 30px; box-sizing: border-box; border: 2px solid #2c76bd; float: left; }
#pricing #plans.plans1 .plan { width: 98%; }
#pricing #plans.plans2 .plan { width: 48%; }
#pricing #plans.plans4 .plan { width: 23%; }
#pricing #plans.plans5 .plan { width: 18%; }
#pricing #plans.plans6 .plan:nth-child(3n+1), #pricing #plans.plans9 .plan:nth-child(3n+1) { clear: both; }
#pricing .plan .plan-name { background-color: #2c76bd; padding: 10px; text-align: center; font-size: 22px; color: #fff; }
#pricing .plan .plan-detail { padding: 10px; }
#pricing .plan .plan-header { padding-bottom: 20px; border-bottom: 1px solid #ccc; margin-bottom: 20px;}
#pricing .plan .plan-price { font-size: 50px; text-align: center; margin-bottom: 10px; }
#pricing .plan .plan-price span { font-size: 20px; }
#pricing .plan .plan-setup { text-align: center; }
#pricing .plan .plan-detail ul { margin: 0; }
#pricing .plan .plan-detail ul li { list-style: none; text-align: center; padding: 5px;}
@media screen and (max-width: 1100px) {
  #pricing #plans.plans5 .plan { width: 31.333333%; }
}
@media screen and (max-width: 1000px) {
  #pricing #plans.plans4 .plan { width: 48%; }
  #pricing #plans.plans5 .plan { width: 48%; }
}
@media screen and (max-width: 600px) {
  #pricing #plans { max-width: 600px !important; }
  #pricing .plan { width: 98% !important; }
}

/* contact */
#contact { padding: 30px 0; }
#contact .lcol { width: 75%; padding-right: 25px; float: left; box-sizing: border-box; }
#contact .lcol img { max-width: 100%; }
#contact .rcol { width: 25%; float: left; box-sizing: border-box; }
@media screen and (max-width: 800px) {
  #contact .lcol { width: 100%; padding: 0; float: none; margin-bottom: 30px; }
  #contact .rcol { width: 100%; float: none; }
}

/* standard */
#standard { padding: 30px 0; min-height: 600px; }

/* login */
#login { padding: 30px 0; min-height: 500px; }
#login .container { max-width: 500px; }

/* cms */
#page { padding: 30px 0; }

/* alerts */
ul.alert {line-height:16px;padding:5px 5px 5px 30px;color:#000;border: 2px solid #0c0;font-weight: bold;background: #cfc;position:relative; margin: 0 0 10px; }
ul.alert li { margin-bottom: 0; }
ul.alert:before {content:'!';position:absolute;left:0px;top:0px;background:#c00;text-align:center;padding:0px 10px 0px 8px;color:#fff;height:100%;line-height:2em;}
ul.alert.error {background: #fcc;border-color:#c00;}
ul.alert.success:before{content:'\2713';background:#0c0; padding:0px 8px 0px 6px;}

/* forms */
form .field { width: 100%; margin-bottom: 10px; }
form .field input, form .field textarea { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #666;  border-radius: 0; }
form .field .button, form .button, a.button { color: #fff; background: #00b050; box-sizing: border-box; text-align: center; padding: 10px 20px; text-decoration: none; border: 0; cursor: pointer; width: auto; border: 0;  -webkit-appearance: none; border-radius: 0;}
.button.blue { background: #2c76bd; }
.button.hollow { border: 2px solid #fff; border-radius: 25px;}
.button.w100 { width: 100%; display: block; }

/* footer */
footer { background: #2e3641; padding: 30px 0; }
footer .col { width: 25%; padding: 0 30px; box-sizing: border-box; float: left; }
footer .col h3 { text-transform: uppercase;margin-bottom: 30px;}
footer .col p, footer .col a, footer .col h3 { color: #fff; }
footer .col img.logo { width: 100%; max-width: 200px; }
footer .col ul { margin: 0; }
footer .col ul li { list-style: none; padding: 0;}
footer .col.follow a { font-size: 40px; cursor: pointer; }
footer .app-download img { max-width: 400px; width: 100%; }
footer #rights { margin-top: 40px; }
footer #rights p { margin-bottom: 0; }
@media screen and (max-width: 800px) {
  footer .col { width: 100%; float: none; margin-bottom: 30px; padding: 0; }
}