@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, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, h9800roup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; text-decoration:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1.5;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;	border-spacing: 0;}


/*  body & content
------------------------------------------------------------ */
html {scroll-behavior: smooth;}
body {font-family: 'Titillium Web', Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:400; font-size:16px; color: #435968; background:#fff; text-align:left; overflow-x: hidden;}

strong {font-weight:700;}
p {margin-bottom:10px;}

h1, h2, h3, h4, h5 {font-weight:300; display:block;margin:0; padding:0; line-height: 1.2;}

h1 		{font-size:80px; line-height:1; padding-bottom:10px;}
h2 		{font-size:30px; margin-bottom:20px;}
h3 		{font-size:26px; padding-bottom:10px;}
h4 		{font-size:20px; margin-bottom:25px; font-weight:700;}
h5 		{font-size:20px; color: #09f;}
h6 		{font-size:12px; border: 1px solid #09f;display: inline-block;padding: 3px 10px;border-radius: 20px;font-weight: 100;color: #09f; margin-bottom: 10px; text-transform: uppercase;}

.clear {clear:both;}
.center {text-align: center;}
.button {color:#fff;padding: 20px;display: inline-block;background-color:#09f; border-radius: 10px; border: 2px solid #09f; font-weight: bold;}
.button:hover {background-color:rgb(61, 178, 255);}
.button:active {background-color:#fff;color:#09f;}
.button span {font-size: 14px; font-weight: normal;}

#container {}
#navigation {position:absolute; z-index:10; width:100%; text-align:center; background-color:rgba(4, 60, 97, 0.712);}
#nav li {display:inline-block; vertical-align: top;}
#nav a {display:block; color:#fff; padding:28px 30px;}
#nav a:hover {background: rgba(61, 178, 255, 0.2);}
#nav a img {margin:0 4px -1px 0;}
#logo a {padding: 20px 30px;}
#logo a:hover {background:none;}
#logo img{height:40px;}
#banner {background-size: cover; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0); background-image: url("images/bg_banner3.png"); background-attachment: scroll; background-position: center center; width: 100%; height: 970px;}
#bannercopy{position: absolute; left: 50%; top: 250px; width: 500px; margin-left: -600px; color:#fff;}
#bannercopy h1 {color:#fff;}
#bannercopy .button {margin-top:15px; font-size: 1.2em;}
#banneroverlay {position: absolute; background-size: cover; background-image: url("images/bg_banner_overlay.png"); background-attachment: scroll; background-position: left center; width: 100%; height: 100%; top:80px;}
#bannerimage {position: absolute; right: 50%; top: 0px; color: #fff; margin-right: -830px;}
#content {}
.sleeve {padding:60px 10%; text-align: left;}
.sleeve a {text-align: left; padding-left:80px; margin-top:20px;}
.sleeve-img-1 {background-color:#0561a7; background-size: inherit; background-image: url("images/bg_banner_bild.jpg"); background-attachment: scroll; background-position: center center; background-repeat:no-repeat; width: 100%; height: 650px;}
.subscription {padding:90px 10%; color:#fff; background-size: cover; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0); background-image: url("images/bg_simple.png"); background-attachment: fixed; background-position: left center;}
.features {padding:90px 10%; background-size: cover; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0); background-image: url("images/bg_simple_bright.png"); background-attachment: fixed; background-position: left center;
}

a.card {display:inline-block; width:80px; height:110px; border:none; margin:0 10px 0 0; padding:0;}
a.card-setup {background: url(images/bannercards_spritesheet.png) 0 0px no-repeat;}
a.card-remote {background: url(images/bannercards_spritesheet.png) -80px 0px no-repeat;}
a.card-analysis {background: url(images/bannercards_spritesheet.png) -160px 0px no-repeat;}
a.card-sdk {background: url(images/bannercards_spritesheet.png) -240px 0px no-repeat;}
a.card-buy {background: url(images/bannercards_spritesheet.png) -320px 0px no-repeat;}

a.card-setup:hover {background: url(images/bannercards_spritesheet.png) 0 -110px no-repeat;}
a.card-remote:hover {background: url(images/bannercards_spritesheet.png) -80px -110px no-repeat;}
a.card-analysis:hover {background: url(images/bannercards_spritesheet.png) -160px -110px no-repeat;}
a.card-sdk:hover {background: url(images/bannercards_spritesheet.png) -240px -110px no-repeat;}
a.card-buy:hover {background: url(images/bannercards_spritesheet.png) -320px -110px no-repeat;}

a.card-setup:active {background: url(images/bannercards_spritesheet.png) 0 -220px no-repeat;}
a.card-remote:active {background: url(images/bannercards_spritesheet.png) -80px -220px no-repeat;}
a.card-analysis:active {background: url(images/bannercards_spritesheet.png) -160px -220px no-repeat;}
a.card-sdk:active {background: url(images/bannercards_spritesheet.png) -240px -220px no-repeat;}
a.card-buy:active {background: url(images/bannercards_spritesheet.png) -320px -220px no-repeat;}

#register label { display: inline-block; width: 35%; font-weight: bold;}
#register input { display: inline-block; width: 63%; padding: 10px; margin: 5px 0px;}
#register input { border:2px solid #fff;}
#sign-up-button {width: 150px; margin-left: 35%; display: block; -webkit-appearance: none;}
.error-text{background: #055fa6; padding: 10px 15px; border-left: 5px solid #f00; margin: 15px 0 0 35%; font-size: 0.85em;}

.subscription ul {list-style: disc; padding: 30px;}

.feature-box {margin:60px auto; max-width:1500px; padding:80px 0 0; border-top:1px solid #ccc; text-align: left;}
.feature-box:first-of-type {border-top:none; padding-top:0;}
p a, p a:visited {color:#09f; text-decoration: underline;}
p a:hover {color:#3db2ff; text-decoration: underline;}
a.textlink {color:#09f; padding-left:0;}
a.textlink:hover {color:rgb(61, 178, 255);}
h5 a, h5 a:visited {color:#09f;}
h5 a:hover {color:#3db2ff;}


.noborder {padding:0; border:none;}
.intro {max-width:800px; margin:0 auto; text-align:center;}
.nomax {max-width:none;}

.feature-details {margin-top:40px;}
.feature-detail {position: relative; max-width: 330px; display: inline-block; margin: 0 30px 30px 0;}
.feature-detail img {width: 50px; box-shadow: 2px 3px 10px #ddd; background-color:#0989d2; position: absolute;border-radius: 50px;}
.feature-detail h5, .feature-detail p { padding: 10px 0 0 80px;}
.feature-detail p {line-height: 20px; font-size: 15px;}

.feature-img {display:inline-block; vertical-align: top; margin-right:5%; width:30%; text-align:center;}
.feature-img img {box-shadow: 2px 3px 10px #ddd; width:100%;}
img.noshadow {box-shadow:none;}
.inner {display: inline-block; width:62%;}

#box-art {width:30%; max-width:280px; display:inline-block; margin: 40px 10%;}
.shelf-inner {display:inline-block; vertical-align: top; padding:80px 0 0}
.pricetag {margin-top:20px; width:300px; position:relative; font-size:18px;}
.pricetag span {position:absolute; right: 20px; font-size:18px;}
hr.small {color:#fff; width:20px; text-align:left; border: 1px solid #fff; margin:0 0 10px;}

.phone, .web,
.email {margin-left:20px; line-height:2;padding-left:24px; background:url(images/icon_telephone.png) left center no-repeat;display:block;}
.email {background-image:url(images/icon_email.png);}
.web {background-image:url(images/icon_web.png);}

.toolcard_container {max-width: 1500px;margin: 0 auto; text-align:center;background:url(images/banner_with_hotspots_1.jpg) top center no-repeat; padding-top:470px; }
.toolcard_container.second_container {background:url(images/banner_with_hotspots_2.jpg) top center no-repeat;}
.toolliste_container span {display:inline-block;height:80px;width:80px;margin-right:-3px;cursor:default;	overflow:hidden;}	
.toolcard_cell { display: inline-block; margin: 0 7px 10px;}

.toolcard {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #eee;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 4px;
    display: table-cell;
    height: 420px;
    padding: 240px 20px 20px;
    position: relative;
    text-align: left;
    vertical-align: top;
    width: 320px;
	max-width: 240px;
	cursor:default;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
	hyphens:auto;
	background:url(images/cardtop_1.jpg) top no-repeat #fff;
	background-position: 50% 15px;
	background-size: contain;
}

.toolcard:hover {border-color:#ddd;}
.toolcard img {display: inline-block; height: 120px; width: 100%; margin-bottom:15px;	background-color: #0989d2;}

.card_1 {background-image: url(images/cardtop_uptime.jpg);}
.card_2 {background-image: url(images/cardtop_controls.jpg);}
.card_3 {background-image: url(images/cardtop_assets.jpg);}
.card_4 {background-image: url(images/cardtop_roc2.jpg);}
.card_5 {background-image: url(images/cardtop_team.jpg);}
.card_6 {background-image: url(images/cardtop_oneclick.jpg);}
.card_7 {background-image: url(images/cardtop_statistic.jpg);}
.card_8 {background-image: url(images/cardtop_remote.jpg);}

.toolcard p {padding-top: 10px;}
.centered h6, .centered h2, .centered h4 {text-align: center;}

#rotator {margin: 40px 0 40px; max-height:250px;}
#rotator img {height: 250px; margin:0 5px;}

#footer {background-color:#044675; padding:30px; text-align: center;}
#footer a {color:#fff; padding:0 20px; border-right: 1px solid #fff;}
#footer a:last-child {border-right: none;}

.navbar-icon{ vertical-align: middle;}

/* ---------- parallax ---------- */

.parallax_container {}
.parallax_container .p { position:absolute; width:100%; height:970px; margin-top:0; top:0; background-repeat:no-repeat; background-position:center center; }

@media (max-width: 1500px) {
	#bannercopy{position: absolute; left: 10%; top: 250px; width: 500px; color:#fff; margin:0; }
}
@media (max-width: 1000px) {
	.features {text-align:left;}
	.intro {width:auto; margin:0;}
	#box-art {width:20%; margin: 40px 7%;}
	.shelf-inner {display:inline-block; vertical-align: top; padding:80px 0 0}
	.pricetag {width:250px; font-size:inherit;}
	.pricetag span { font-size:inherit;}
}
@media (max-width: 900px) {
	.sleeve-video-1 {background-size: cover; background-image: url("images/bg_banner_bild_mobile.jpg"); background-attachment: scroll; background-position: center center; width: 100%; height: 700px;}
	.sleeve-video-1 video {display:none;}
}
@media (max-width: 700px) {
	#bannercopy{left: 0%; width: 80%; padding: 0 10%;}
	h1 {font-size:40px;}
	#nav a {padding:15px 15px 28px 15px; }
	#nav li:first-child{display:block;padding:13px 0 0 0;}
	#box-art {position:absolute; width:100px;}
	.shelf-inner {display:block; vertical-align: top; padding:80px 0 0}
	.shelf-inner h3, .shelf-inner hr, .shelf-inner p {margin-left:170px;}
	.pricetag {width:auto; display:block; margin-top: 60px;}
	.inner {display: inline-block; width:100%;}
	.feature-img {display: block; margin: 20px auto 40px;width:auto;}
	.toolcard_container {background:url(images/banner_with_hotspots_mobile_1.jpg) top center no-repeat;}
	.toolcard_container.second_container {background:url(images/banner_with_hotspots_mobile_2.jpg) top center no-repeat;}
}

@media (max-width: 500px) {
	.toolcard_container, .toolcard_container.second_container {padding-top: 400px; background-size: 600px;}
}