@charset "UTF-8";

.pad {
 padding-bottom:20px;

}
bg{
	background-size: 100% 100%;
    min-height: 1903px;
    min-width: 100%;
    
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	
}

* {
  box-sizing: border-box;
}

ul.liststyle{
	list-style-type:disc;
}

.tabs, .tabs2, .tabs3, .tabs1 {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
  background: transparent;
  font-family: 'Open Sans', Helvetica, sans-serif;

}

.label {
  width: 100%;
  padding: 10px 20px;
	background-color:none;
	float: left;
	border: none;
	outline: 0;
	cursor: pointer;
	font-size: 16px;
  transition: background 0.1s, color 0.1s;
   border-bottom: 5px solid #eeeeee;
   font-family: 'Open Sans', Helvetica, sans-serif;
   color:#000000;
   font-weight:bold;
   
}

.input {
  position: absolute;
  opacity: 0;
}




.label :active {
  background: #ccc;
}

.label2 :active {
  background: #ccc;
}

.input:focus + .label {

  z-index: 1;

}


.input:checked + .label {
    border-bottom: 5px solid #006699;
}
.widget-simple-form-btn-blue {
    width:100%;
    background-color: #4398ef;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 24px;
    color: white;
    border-radius: 3px;
}

.widget-simple-form-btn-blue:hover {
    background-color: #2284e8;
    color: #fff;
}


@media(max-width: 768px){
.input + .label + .panel {
  display: block;
}}
@media (min-width: 600px) {
  .label {
    width: auto;
	
  }
 
}

.panel {
  display: none;
  padding: 5px 5px 5px;

}


@media (max-width: 800px) {
.input + .label + .panel {
  display: block;
}
.label {
   border-bottom: 5px solid #006699;
	
  }

}
@media (min-width: 600px) {
  .panel {
    order: 1;
  }
  
 
}
.input:checked + .label + .panel {
  display: block;
}

.collapsible123 {
  background-color: #ffffff;
  color: #000000;

  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 14px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  border-bottom:3px solid #f8f8f8;
   border-top:3px solid #f8f8f8;
  
}



.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  border-bottom:3px solid #f8f8f8;
  background-color:#eee;

}
.column2 {
		width: 100%;
		margin-bottom: 40px
	}

.show{
	display:block;
	
	}
.h1, .sub {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif
}
.nav, .nav li a, div {
	display: block
}
.col-5, .io, li {
	float: left
}
.link, .nav li a {
	text-decoration: none
}
.col-10, .col-11, .col-12, .column, ul {
	overflow: hidden
}
.col-12 img, td img {
	max-width: 100%
}
.buttons, .clear, .video, div.sharing, div.tab {
	clear: both
}
.h1, .h2White, .nav li a {
	text-transform: uppercase
}
.compareBox, .cta, .eStore_btn, .eStore_btn1 {
	min-width: 120px
}
.button, .text {
	white-space: nowrap
}
#marketplace, .video {
	width: 100%
}
.eStore_container eStore_block980 {
	width: 980px;
}
.eStore_block980 {
	table-layout: fixed;
	width: 980px;
	margin: 0 auto
}
.greybg {
	background-color: #f8f8f8;
}
td {
	padding: 5px
}
.h2, .sub {
	padding: 0
}
.h1 {
	
	margin: 0;
	font-weight: 700;
	color: #FFF;
	text-align: left;
	font-size: 3em;
	line-height: 1em;
	padding:20px;
	background-color:#f2a900;
}

.subtitle33{
	
	
	margin: 0;
	font-weight:bold;
	color: #444444;
	text-align: left;
	font-size: 16px;
	line-height: 1.5em;
	padding:20px;
	background-color:#f8f8f8;
}



.orange2{

max-width: 25%;

	}
.sub {
	margin-bottom: 20px;
	font-weight: 400;
	color: #4C5559;
	text-align: center;
	font-size: 28px
}
.io {
	width: 25%
}
#quote {
	background-color: #efefef;
	margin-top: 50px
}
.nav-background, ul.nav {
	background-color: #0085b8
}
td.content {
	font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
	font-size: 13px;
	color: #666;
	font-weight: 400;
	line-height: 20px;
	border-bottom: thin dotted #CCC
}
.h2, .h3 {
	font-weight: 400;
	color: #fff
}
.customize, .h3 {
	width: 90%;
	border-bottom: none;
	text-align: left;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif
}
.expandable {
	margin-top: 80px
}
.h2 {
	margin: 15px 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 25px;
	text-align: left
}
.h3, p, ul {
	margin: 0
}
.h2-title {
	padding-bottom: 10px
}
.h3 {
	font-size: 15px;
	padding: 5px 10px 5px 0
}
.customize {
	margin: 0;
	font-weight: 700;
	font-size: 19px;
	padding: 20px 10px 5px 20px;
	color: #565656
}
h4 {
	margin-top: 20px
}
element.style {
	width: 100%;
	height: auto


}
.comparison {
	padding-top: 20px
}
.emenu, .heat, .monitoring, .signage, .traffic, .waitlist {
	text-align: center;
	border-top: 10px solid #C2E9E3
}
p {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #666;
	line-height: 21px;
	text-align: left
}
.criteria, td {
	border-bottom: thin dotted #CCC;
	font-family: 'Open Sans', Verdana, Tahoma, sans-serif
}
.nav li a, ul.nav {
	text-align: center
}
.nav-background {
	width: 100%
}
ul {

	padding: 0
}
.nav, ul.nav {
	margin: 0 auto
}
li {
	font-size: 15px;
	line-height:20px;
}
.nav li a {
	color: #fff;
	padding: 10px 20px
}
.criteria {
	text-align: right;
	font-size: 13px;
	color: #666;
	padding-right: 10px;
	font-weight: 600;
	line-height: 20px
}
.nav li a:active, .nav li a:hover {
	background-color: #e47c01;
	color: #fff;
	text-decoration: none
}
.os-name {
	font-size: 15px;
	font-weight: 700
}
.button, .header-section, {
	font-weight: 400;
}
.nav {
	z-index: 170;
	text-align: center
}
ul.nav.stickytop {
	position: fixed;
	top: 0;
	width: 100%;
	padding-left: 22%;
	margin-left: 0;
	background-color: rgb(0, 133, 184)
}
.header-section {
	color: #666;
	font-size: 40px;
	line-height: 34px;
	text-align: center;
	border-bottom: 1px solid #ddd;
	margin-bottom: 0;
	padding-bottom: 20px;
	font-family: 'Open Sans', Helvetica, Sans serif;
	padding-top: 70px;
}
.eStore_btn, .p {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif
}
.expansion {
	background-color: #eee
}
.no-pad {
	padding-top: 30px;
	margin-top: 0
}
.comparison {
	margin-top: 20px;
	margin-bottom: 30px
}
.descr {
	font-size: 14px;
	line-height: 16px;
	padding: 10px 10px 20px;
	width: 85%;
	margin: 0 auto;
	text-align: left
}
.col-12 {
	width: 100%;
	margin-bottom: 20px;
	margin-top: 35px
}
.col-10 {
	width: 80%;
	margin-left: 10%
}
.col-11 {
	width: 90%;
	margin-left: 5%;
	margin-top: 20px
}
.col-5 {
	text-align: center;
	width: 20%
}
.col-4, .col-4-product {
	width: 23%
}
.col-4 {
	margin-left: 2%;
	float: left;
	text-align: center;
	margin-top: 20px
}
.col-3, .col-4-product {
	margin-left: 1%;
	text-align: center;
	float: left;
	margin-top: 20px
}
.col-3 {
	width: 32%
}
.col-2 {
	width: 48%;
	float: left;
	text-align: left;
	margin-bottom: 35px;
	margin-top: 20px
}
.button, .eStore_btn, td.price>h5 {
	text-align: center
}
.left {
	margin-right: 2%
}
.top-margin {
	margin-top: 0
}
.link {
	color: #275f96;
	padding-bottom: 0
}
.card {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  padding: 8px;
}

.link:hover {
	text-decoration: underline
}
.button, .demo, .eStore_btn, .go-top, .go-top:hover, .manual, td.price>h5 {
	text-decoration: none
}
.share-buttons li {
	padding-right: 3px
}
.p {
	font-size: 16px;
	color: #666;
	line-height: 25px;
	margin-top: 15px;
	margin-bottom: 15px
}
.button, .small {
	font-size: 14px
}
.small {
	line-height: 20px
}
.button {
	color: #FFF;
	background-color: #275f96;
	display: inline-block;
	padding: 5px 30px;
	margin-bottom: 0;
	line-height: 1.42857143;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px
}
.button:hover {
	background-color: #e47c01;
	color: #fff
}
.series {
	margin-left: 15px
}
.eStore_btn {
	background-color: #4398ef;
	color: #fff;
	border-radius: 3px;
	padding: 5px 20px
}
span.from, td.price>h5 {
	font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
	font-weight: 400
}
.eStore_btn:hover {
	background-color: #2284e8
}
.intro {
	width: 90%;
	margin: 0 auto;
	padding: 30px 0 60px
}
.banner {
	position: relative
}
span.from {
	color: #545454;
	font-size: 12px
}
td.price>h5 {
	color: #f39800;
	font-size: 20px;
	margin: 0 auto
}
.top {
	width: 100%;
	height: auto;
	display: block
}
.title {
	position: absolute;
	top: 5%;
	text-align: right;
	width: 100%;
	padding: 1em 1em 1em 0;
	float: right;
	margin-left: 0
}
.column {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
	transition: .3s;
	float: left;
	margin-bottom: 50px;
	width: 32%;
	height: 340px;
	background-color: #fff;
	margin-right: .5%;
	margin-left: .5%
}
.amo, .cards {
	overflow: auto
}
.column:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2)
}
.cards {
	width: 100%;
	background-color:#ffffff;
  text-align: center;
  padding: 10px;
}
.description {
	text-align: center
}
.blue{
	color:#F2A900;}
.links {
	padding-left: 5%;
	text-align: left
}
.waitlist, img.logo {
	padding: 10px
}
.left-link {
	width: 40%;
	float: left
}
.right-link {
	width: 50%;
	float: right
}
.demo {
	color: #4498f0;
	font-size: 14px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif
}
.waitlist {
	text-align: center
}
.product {
	padding: 20px 5px
}
.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	color: #fff;
	background-color: #f39903;
	font-size: 12px;
	padding: 1em;
	font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
	display: none
}
.benefits, .imgcontainer, .manual, .productPic, .subscriptionPrice {
	position: relative
}
.go-top:hover {
	background-color: #e47c01;
	Color: #fff
}
.productPic {
	float: left;
	width: 20%
}
.productDescription {
	position: relative;
	float: left;
	width: 75%;
	margin-left: 5%;
	padding-bottom: 60px
}
.manual, .marketplace-info {
	width: 50%
}
.h5, .video-title {
	margin: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	align:center;
}
.subscriptionPrice {
	width: 50%;
	float: left
}
.video-title {
	color: #666;
	font-size: 16px;
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
	font-weight: 600
}
.manual {
	float: left;
	color: #4599f0;
	font-size: 14px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	padding-top: 17px
}
.manual a:hover {
	color: #2284e8;
	text-decoration: underline
}
.eStore_btn1, .view, a {
	text-decoration: none
}
.subscription {
	color: #f39800;
	font-size: 24px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif
}
.nocolor {
	-webkit-filter: grayscale(90%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray
}
.nocolor:hover {
	-webkit-filter: none;
	-moz-filter: none;
	-ms-filter: none;
	filter: none;
	transition: ease;
	transition: all .55s
}
.h5 {
	color: #666;
	font-size: 16px;
	font-weight: 600;
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;
}

.h8 {
	color: #666;
	font-size: 16px;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;
}
.benefits, .video {
	margin-bottom: 40px
}
.large {
	font-size: 20px;
	padding-top: 0
}
.peripher {
	margin-top: 80px
}
.buttons {
	padding-top: 20px;
	text-align: left
}
.benefits, .card, .cart, .datasheet, .eStore_btn1, .ghost, .video, .view, a img {
	text-align: center
}
.no-border {
	border-bottom: none
}
.cart, .ghost {
	width: 40%;
	border: 1px solid #4498f0;
	border-radius: 3px
}
.eStore_btn1 {
	border: 1px solid #4398ef;
	color: #4398ef;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	border-radius: 3px;
	padding: 5px 8px
}
.h4, .view, div.tab div.tablinks {
	font-family: 'Open Sans', Helvetica, sans-serif;
}
.eStore_btn1:hover {
	background-color: #2284e8;
	border: 1px solid #2284e8;
	color: #fff
}
.eSote_btn {
	border: 1px solid #4398ef
}
.eStore_btn {
	border: 1px solid #2284e8
}
div.tab {
	overflow: hidden;


}
div.tab div.tablinks {
	background-color:none;
	float: left;
	border: none;
	outline: 0;
	cursor: pointer;
	padding: 5px 16px;

	font-size: 14px;
	transition: .3s;
}
.normal{
	background-color:none;
	float: left;
	border: none;
	outline: 0;
	cursor: pointer;
	padding: 5px 16px;
	transition: .3s;
	font-size: 17px;
	font-weight:bold;
	border-bottom: 5px solid #006699;

}
div.tab div.tablinks:active, div.tab div.tablinks:hover {

	color: #4599f0;
	
}
.margin4 {
	margin-left: 4%
}
.tabcontent {
	display: none;
	
	border-top: none
}
.benefits, .clear, .video, .view, a img {
	display: block
}
.benefits {
	width: 30%;
	float: left;
	margin-left: 3%;
	margin-top: 20px
}
.video {
	background-color: #275f96;
	padding: 40px;
	width: 100%;
	margin-top: 70px
}
.video .sub {
	color: #fff
}
.film-background {
	background-image: url(img/1marketplace-36.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right 55px top -15px;
	padding-left: 20px;
	padding-bottom: 70px;
	padding-top: 30px;
	margin-bottom: 70px
}
.no-margin-top {
	margin-top: 0
}
.h4 {
	font-size: 17px;
	font-weight: 600;
	color: #666;
	margin-top: 20px;
	margin-bottom: 0;
	
}


.card {
	width: 23%;
	float: left;
	margin-top: 10px;
	margin-right: 2%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
	transition: .3s;
	height: 365px;
	border-top: 5px solid #275f96;
	margin-bottom: 70px;
	overflow: auto
}
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2)
}
.product {
	padding-left: 20px;
	padding-top: 0;
	font-size: 14px;
	margin-top: 15px
}
a img {
	margin: 0 auto
}
.communication {
	margin-top: 30px;
	display: block;
	clear: both;
	overflow: hidden
}
.view {
	float: left;
	width: 40%;
	background-color: #397ed1;
	border: 1px solid #397ed1;
	color: #fff;
	border-radius: 3px;
	padding: 5px 8px;
	FONT-SIZE: 14PX;
	margin-bottom: 15px;
	margin-right: 5%
}
.view:hover {
	background-color: #1f76cc;
	border: 1px solid #1f76cc;
	color: #fff
}
.datasheet {
	color: #2d7cd9;
	font-size: 14px
}
td {
	color: #666;
	font-weight: 400;
	font-size: 13px
}
table {
	border-collapse: collapse;
	mso-table-lspace: 0;
	mso-table-rspace: 0;
	text-align: left
}
#ARK, #iDoor, .cta, .h6 {
	text-align: center
}
.cta {
	font-size: 12px;
	background-color: #2d7cd9;
	color: #fff; !important
	border-radius: 3px;
	padding: 5px 20px;
	border: 0
}
a {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	
}
k{
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		color:#fff;}
.cta-ghost:hover, .cta:hover {
	background-color: #275f96;
	color: #fff
}

.cta-orange {
	font-size: 13px;
	background-color: #f2a900;
	color: #fff !important;
	align:center;
	border-radius: 3px;
	padding: 5px 20px;
	border: 0
}

.cta-orange:hover, .cta:hover {
	background-color: #275f96;
	color: #fff
}
.nav li a.compare, .orange, a.ctaorange-border:hover {
	background-color: #f39800
}
.link {
	margin: 0;
	padding: 0
}
#ARK, #iDoor {
	padding-top: 20px;
	font-size: 21px;
	margin-bottom: 0;
	border-bottom: none
}
#ARK {
	margin-top: 80px;
	border-top: 1px solid #ccc
}
.h6, .h6 {
	margin: 0;
	color: #666;
	font-weight: 400
}
.h6 {
	font-size: 11px;
	font-family: 'Open Sans', Helvetica, sans-serif;
	padding-top: 5px
}
.h2-selector, .h2White, .pWhite, .h6 {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif
}
.h6 {
	padding: 0;
	font-size: 17px
}
.sharing {
	padding-left: 0;
	padding-top: 40px;
	margin-bottom: 50px
}
ul.share-buttons>li {
	display: inline
}
ul.share-buttons>li a img {
	text-align: left;
	display: inline
}
ul.share-buttons {
	text-align: left;
	padding-left: 0
}
.select1 {
	margin-top: 90px;
	padding-bottom: 30px;
	width: 100%;
	text-align: center;
	background-image: url(img/2017092.jpg);
	background-repeat: repeat-y;
	background-position: right center
}
.h2-selector, .h2White, .pWhite, .shop_by {
	text-align: left
}
.h2-selector {
	color: #fff;
	font-weight: 400;
	padding-top: 20px;
	margin-top: 0;
	font-size: 28px;
	padding-bottom: 0;
	margin-bottom: 0
}
.shop_by {
	width: 100%;
	margin: 0 auto;
	padding-top: 15px;
	display: block;
	overflow: hidden
}
.thirty {
	width: 28%;
	float: left;
	padding: 0 10px 10px
}
.h2White {
	color: #fff;
	font-weight: 700;
	border-bottom: 1px solid #fff;
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 22px
}
.form, .share-buttons {
	margin-top: 40px
}
.pWhite {
	color: #fff;
	font-size: 12px;
	padding-bottom: 10px;
	height: 75px
}
.ctaorange-border, .title .buttons .cta {
	font-size: 15px
}
.orange {
	border: 2px solid #f39800
}
.ctaorange-border {
	border: 2px solid #f39800;
	margin-left: 8px;
	color: #fff;
	border-radius: 3px;
	padding: 5px 20px;
	text-align: center;
	min-width: 120px
}
a.ctaorange-border:hover {
	color: #fff
}
.disclaimer {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: grey;
	padding-top: 10px;
	text-align: left
}
.compareBox {
	height: 20px;
	border: 1px solid #2d7cd9;
	border-radius: 3px;
	padding: 3px 40px
}
input, textarea {
	background-color: #f8f8f8;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 20px;
	color: #9F9F9F;
	font-family: 'Open Sans', Tahoma, Arial, non-serif
}
.imgcontainer {
	width: 100%
}
.overlay, .text {
	position: absolute;
	overflow: hidden
}
input[type=checkbox] {
	width: auto;
}
label {
	margin-top: 20px;
	font-family: 'Open Sans', Tahoma, Arial, non-serif;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	margin-right: 5px
}
input[type=text]:focus, textarea:focus {
	outline: -webkit-focus-ring-color auto 5px
}
label {
	margin-top: 20px;
	font-family: 'Open Sans', Tahoma, Arial, non-serif;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	margin-right: 20px
}
.message {
	min-height: 100px;
	width: 50%
}
input {
	width: 38%;
	border-radius: 3px;
	border: 1px solid #c8d6e0;
	margin-top: 4px;
	padding: 3px 5px
}
textarea {
	width: 50%;
	height: 150px;
	padding: 5px 10px;
	box-sizing: border-box;
	border: 1px solid #c8d6e0;
	border-radius: 3px;
	resize: none;
	margin-top: 10px
}
#sbSendEmail, .orange col-3 {
	margin-bottom: 50px
}
#sbSendEmail {
	padding: 8px 20px;
	font-family: 'Open Sans', Tahoma, Arial, non-serif;
	color: #fff;
	background-color: #4398ef;
	border: none;
	width: 15%
}
#sbSendEmail:hover {
	background-color: #2284e8;
	cursor: pointer
}
.image {
	display: block;
	height: auto
}
.overlay {
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: rgba(243, 153, 3, .9);
	width: 100%;
	height: 0;
	transition: .7s ease
}
.imgcontainer:hover .overlay {
	bottom: 0;
	height: 100%
}
.text {
	color: #fff;
	font-size: 17px;
	line-height: 25px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%)
}
.margin-top {
	margin-top: 50px
}
.white {
	color: #fff;
	border-bottom: none;
	margin-top: 30px
}
.case, .video-title {
	display: none
}
.bluetext{
font-family: Open Sans, Arial, Helvetica, sans-serif; 
font-size:21px; 
color:#006699; 
line-height:25px;

}
body {font-family: Verdana, sans-serif; margin:0}

img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%px;
  position: relative;
  margin: auto;
}
body {font-family: Verdana, sans-serif; margin:0}

.1:first-child {
   display: block; !important;
}
.mySlides1 {display: none;}


.mySlides {display: none;}


.mySlides:first-child {
   display: block;!important;
}
.mySlides:second-child {
   display: none;
}
.mySlides:third-child {
   display: none;
}


/* Pure css slider*/



*, *:before, *:after {
  box-sizing: border-box;
}



body {
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.slider {
  height:500px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.imgslider{
	height:auto;}
	.imgslider1{
	height:auto;}
.slider__nav {
	
  align:center;
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  left: -300%;
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height:100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
.slider__contents {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.slider__caption {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  color:#006699;
}
.slider__txt {
  color: #999;
  margin-bottom: 3rem;
  max-width: 300px;
}

@-webkit-keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

Resources 1×0.5×0.25× Rerun


/* Style the tab */
.tab {
  overflow: hidden;
 
  background-color: none;
}

  .row1:after {
  content: "";
  display: table;
  clear: both;
}
/* Style the buttons inside the tab */
.tab button {
  background-color:transparent;
  float: left;
  text-align:left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 5px solid #eeeeee;
}



/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #006699;
  color:#ffffff;
}

/* Create an active/current tablink class */
.tab button.active {
 border-bottom: 5px solid #006699;
  
}

/* Style the tab content */
.tabcontent {
  display: none;

 
}

.tabcontent1 {
  display: none;
  padding: 6px 12px;
  font-family: Open Sans, Arial, Helvetica, sans-serif; 
  font-size:16px; 
  color:#666666; 
  line-height:16px; 
  

}
.tabcontent {
  display: none;
  padding: 6px 12px;
  font-family: Open Sans, Arial, Helvetica, sans-serif; 
  font-size:14px; 
  color:#666666; 
  line-height:16px; 
  

}


img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  height: 355px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;

  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}






/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */


/* Number text (1/3 etc) */


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.mpic{
display:none;}


@media only screen and (max-device-width :1200px) {
	.greybg {
		background-color: #f8f8f8;
	}
		.h1 {
		width:180%; !important
		padding: 0;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		color: #FFFFFF;
		font-weight: 700;
		font-size: 3em;
		text-transform: uppercase;
		background-color:#f2a900;
	
	}
		
	
	.subtitle33 {

padding:10px;
	width:180%;  !important
	}
	.title {
		position: absolute;
		top: 5%;
		text-align: right;
		width: 100%;
		padding: 1em 1em 1em 0;
		float: right;
		margin-left: 0
	}
	.h2 {
		padding: 0;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		color: #FFFFFF;
		text-align: left
	
	
	}

	.orange2{

max-width: 25%;

	}
	.h2 {
		margin: 0 0 15px;
		font-weight: 400;
		font-size: 26px;
	}
}
}
@media only screen and (max-device-width :1024px) {
	
		.subtitle33 {
			
	
padding:10px;
	width:180%;
	}
	
	.h1{
		width:180%;
			font-size: 3em;
			line-height: 1em;}
	

		{
		.column, .title {
			margin-left: 2%
		}
		.title {
			top: 5%
		}
		.top {
			width: 132%
		}
		.column {
			width: 100%;
			margin-right: 2%;
			height: 335px;
		}
		.go-top {
			bottom: 1em;
			right: 1em
		}
	
		.orange2{

max-width: 25%;

	}
		.greybg {
			background-color: #f8f8f8;
		}
	}
}
@media screen and (max-width:980px) {
		.h1{
		width:130%;
			font-size: 3em;
			line-height: 1em;}
	
	.subtitle33{
	display:block;
padding:10px;
	width:180%;
	}

		.row1 {
  width: 100%;
    display: flex; flex-flow: column-reverse;
  }
	.greybg {
		background-color: #f8f8f8;
	}
	 .mpic{
display:block;}
	.io, .mid, .productPic, .video-title {
		text-align: center
	}
	.cards {
		width: 98%;
		margin: 0 auto
	}
	top {
		width: 120%
	}
	.column {
		width: 46%;
		margin-left: 1%;
		height: 335px
	}
	.h1 {
		font-size: 2em;
		line-height: 1em;
		padding:10px;
	}
	.orange2{

max-width: 35%;

	}
	.h2 {
		font-size: 21px;
		margin-top: 5px;
		margin-bottom: 0
	}
	.productPic {
		width: 25%
	}
	.productDescription {
		width: 70%;
		margin: 0;
		padding-bottom: 60px
	}
	.title {
		top: 8%;
		margin-left: 5%
	}
	.go-top {
		bottom: 1em;
		right: 1em
	}
	.subscriptionPrice {
		width: 48%
	}
	.marketplace-info {
		width: 100%:
	}
	.esotre_btn, .estore_btn1 {
		width: 45%
	}
	.videodescription, .videopic {
		width: 50%;
		float: left;
		position: relative
	}
	.io {
		width: 25%;
		float: left;
		padding-bottom: 10px;
		height: 150px
	}
	.nav li a {
		padding: 10px 15px
	}
	.col-4 {
		width: 30%
	}
	.col-3 {
		width: 46%;
		margin-left: 2%
	}
	.video-title {
		color: #666;
		font-size: 16px;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		margin: 0 0 0 10%;
		padding-top: 0;
		padding-bottom: 0;
		width: 80%;
		font-weight: 600
	}
	.col-4-product {
		width: 44%;
		margin-left: 2%
	}
	.col-12 {
		width: 90%;
		margin-left: 5%
	}
	.col-2 a img {
		width: 80%
	}
	.nocolor {
		filter: none
	}
	.h4 {
		padding: 0;
		margin: 0
	}
	iframe {
		width: 450px;
		height: auto
	}
	.img {
		max-width: 80%;
	}
	
}
}
@media screen and (max-width:767px) {
	.imgslider{
	width:336px;
	height:auto;}
	.row1 {
  width: 100%;
    display: flex; flex-flow: column-reverse;
  }
	.col-5, .productPic, .select1 {
		text-align: center
	}
	.expandable {
		margin-top: 40px
	}
	.cards {
		width: 96%;
		margin: 0 auto
	}
	.card, .column {
		margin-left: 1%
	}
	.card {
		width: 48%;
		margin-right: 1%;
		height: 380px
	}
	.column, .pWhite {
		height: auto
	}
	iframe {
		width: 450px
	}
	.column {
		width: 48%;
		margin-bottom: 40px
	}
		.column2 {
		width: 50%;
		margin-bottom: 40px
	}
	.video {
		padding-left: 0
	}
	.h1 {
		font-size: 20px;
		
	}
	.h2 {
		font-size: 20px
	}
	.h3 {
		font-size: 12px
	}
	.productPic {
		width: 40%
	}
	.col2 iframe {
		margin: 0 auto
	}
	.productDescription {
		width: 60%;
		margin: 0
	}
	.cart, .ghost, .subscriptionPrice {
		width: 48%
	}
	.eStore_btn1 {
		margin: 10px 15px;
		display: block;
		line-height: 25px
	}
	.marketplace-info {
		width: 100%:
	}
	.top {
		width: 150%
	}
	.title {
		top: 8%;
		margin-left: 5%
	}
	.go-top {
		bottom: 1em;
		right: 1em
	}
	.io {
		width: 45%
	}
	.nav li a {
		padding: 10px 46px
	}
	.select1 {
		margin-top: 90px;
		width: 100%;
		background-color: #2d7cd9;
		background-image: none;
		padding: 10px
	}
	.thirty {
		width: 90%;
		float: left;
		padding: 0 10px 10px;
		margin-bottom: 30px;
		margin-top: 20px
	}
	.col-5 {
		width: 33%;
		float: left
	}
	.col-4, .col-4-product {
		width: 48%
	}
	.col-3 {
		width: 46%
	}
	.col-2 a img {
		width: 100%
	}
	.col-2 {
		width: 96%;
		margin-bottom: 60px
	}
	.case {
		display: block;
		padding-top: 10px
	}
	.img {
		max-width: 80%;
	}
	
}
@media screen and (max-width:480px) {
.title{display:none;}
	.top {
	border-bottom:8px solid #006699;
}
	
.header-section {

	padding-top:10px;
}
	

		.nav{
		display:none;
		}
	.imgslider{
	width:336px;
	height:auto;}
	.case, .col-2 .button, .productPic, .select1 {
		text-align: center
	}
	.column, .pWhite, {
		height: auto
	}
	.img {
		max-width: 80%;
	}
	.cards {
		width: 96%;
		margin: 0 auto;
	}
	iframe {
		width: 450px;
	}
	.column {
		width: 80%;
		position: relative;
		margin: 0 auto 25px 10%
	}
	.sub {
		font-size: 20px;
	}

	
	
	.bullets{font-family: Open Sans, Arial, Helvetica, sans-serif; font-size:13px; color:#666666; line-height:16px; }
	.top {
		width: 100%
	}
	.nav li a {
		padding: 10px 12px
	}
	.links {
		padding-left: 8px
	}
	.productDescription, .productPic {
		width: 95%
	}
	.cart, .ghost, .subscriptionPrice {
		width: 100%;
		text-align: center
	}
	.estore_btn1 {
		margin: 10px 15px;
		display: block;
		line-height: 25px
	}
	.h2, .h3 {
		display: none
	}

	p {
		margin: 0 20px
	}
	.h2-title, .h5 .subscription {
		margin-left: 20px
	}
	.marketplace-info {
		width: 100%:
	}
	.productDescription {
		margin-top: 20px
	}
	.manual {
		margin: 0 20px
	}

	.h5 {
		margin-left: 20px
	}
	.col-2 .button {
		margin: 0 auto
	}
	.video-title {
		margin-left: 0;
		width: 100%
	}
	.case {
		margin-left: 10%;
		width: 80%
	}
	.ul.share-buttons {
		padding-left: 20px
	}

	.product, .video {
		padding-left: 0
	}
	.datasheet, .view {
		width: 90%
	}
	.go-top {
		right: 1em;
		bottom: 1em
	}
	.card {
		width: 70%;
		margin-left: 15%
	}
	.h3 {
		font-size: 14px;
		padding-top: 15px
	}
	.select1 {
		margin-top: 90px;
		width: 100%;
		padding: 10px;
		background-color: #2d7cd9;
		background-image: none
	}
	.thirty {
		width: 90%;
		float: left;
		padding: 0 10px 10px;
		margin-bottom: 30px;
		margin-top: 20px
	}
	ul.nav.stickytop {
		position: fixed;
		top: 0;
		width: 100%;
		padding-left: 22%;
		margin-left: 0;
		display: none
	}
	.col-3, .col-4, .col-4-product {
		width: 90%;
		margin-left: 5%
	}
	.col-12, .col-2, .col-3 {
		margin-left: 2%
	}
	.col-3 {
		margin-bottom: 80px;
		width: 96%
	}
	.card, .card-product {
		padding-top: 30px
	}
	.col-2 a img {
		width: 100%
	}
	.col-2 {
		width: 96%;
		margin-bottom: 60px
	}
	.banner {
		width: 100%
	}
	.col-12 {
		width: 96%
	}
	.p {
		margin: 0
	}
	div.sharing {
		margin-left: 2%
	}
	iframe {
		height: 250px
	}
	.title {
		margin-left: 1%;
		top: 2%
	}
	.button {
		margin-top: 20px
	}
}
* {
  box-sizing: border-box;
}


.row::after {
  content: "";
  clear: both;
  display: block;
 
}

 .col-41 {
  float: left;
  padding:0px;
  
 
  
}
 .col-31 {
  float: left;
  padding: 15px;
  text-align: center;
  
}
 .col-51 {
  float: left;
  padding: 15px;
  
}

 .col-61 {
  float: left;
  padding: 15px;
  
}
 .col-21 {
  float: left;
  padding: 15px;
  
  
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.menu li {
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 1px;
  background-color: #275f96;
  color: #ffffff;
  width:100%;
  text-align:center;
  cursor: pointer;
  border: 1px solid transparent;
  
 font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 text-align: center;
  
}

.comingsoon li{
	  padding: 8px;
  margin-bottom: 1px;
  background-color: #F2A900;
  color: #ffffff;
  width:100%;
  text-align:center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
 font-family: 'Open Sans', Helvetica, Arial, sans-serif;

	}
.learn{
	font-size:15px;
	 
	padding: 8px;
  margin-bottom: 1px;
 
  
  }
 
  
  
.regular {
  padding: 8px;
   border-radius: 4px;
  margin-bottom: 1px;
  background-color: #ffffff;
  color: #275f96;
  width:100%;
  text-align:center;
  cursor: pointer;
  border: 1px solid transparent;
 
 font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 text-align: center;
  
}

.menu1 li {
  padding: 8px;
  margin-bottom: 1px;
  color: #ffffff;

}
.menu li:hover {
  background-color: #e47c01;
}

.comingsoon li:hover {
  background-color: #006699;
}



/* For desktop: */
<!--.col-1 {width: 8.33%;}
.col-21 {width:25%;}
.col-31 {width: 50%;}
.col-41 {width:300px;}
.col-51 {width: 100%;
}
.col-61 {width: 50%;}
/*.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}*/



@media only screen and (max-width: 768px) {
	.h1{width:130%;}
	
	.subtitle33{

padding:10px;
	width:130%;
	}
  /* For mobile phones: */
  .col-41 {width:100%;
  text-align: center}
 .col-31  {
    width:50%;
    align:center;

  }
  .col-51 {width: 100%;
  padding-left: 0px; !important;}
  .col-61 {width:100%;}
	.imgs {
  width: 400px;
  height: auto;
  align:center;
}

  .col-21 {width:50%;}
	.imgs {
  width: 400px;
  height: auto;
  align:center;
}

.imgm{
	width:100%;}
	
	.imgproducts {
  width: 200px;
  height:auto;
  align:center;
}
.imgproducts2 {
  height: 200px;
  width:auto;
  align:center;
}
  h5 p{
	font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
	font-weight: none; !important;
	font-size:13px; !important;
}
  .eStore_container eStore_block980 {
	width: 100%;
	
}
.eStore_block980 {
	table-layout: fixed;
	width: 100%;
	
	
}



}