.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}


body {
    background-color: #53b791;
    color: #ffffff;
    font-size: 36px;
    padding: 36px 0 0;
    font-family: sans-serif;
}

#top-button {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    padding: 5px;
    cursor: pointer;
    background-color: #53b791;
    border-radius: 10px;
}

#top-button:hover {
    color: black;
    background-color: white;
}

a:link,
a:visited,
a:hover,
a:active {
    color: #ffffff;
    text-decoration: none;
}

p {
    margin: 0 0 0.5em 0;
}

p.about {
    margin-bottom: 1em;
}

nav {
    text-align: right;
}

nav li {
    display: inline-block;
}

.right {
    text-align: right;
}

h2.right {
    margin-right: 72px;
}

.centre {
    text-align: center;
}

.larger {
    font-size: 1.5em;
}

.small {
    font-size: 24px;
}

.smaller {
    font-size: 14px;
}

.tapdown {
    margin-top: 0.75em;
}

.pushdown {
    margin-top: 1.5em;
}

.pushup {
    position: relative;
    top: -2em;
}

img.full {
    max-width: 100%;
}

img.resp {
    max-width: 100%;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
    border-style: none;
}

img.logo {
    max-height: 60px;
    margin: 0 30px;
}

img.icon {
    max-width: 64px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 0 36px;
    overflow: hidden;
}

.invert-section-divider {
    height: 2em;
}

.mainlogo {
    padding: 36px 0 72px;
}

.mainlogo img {
    max-width: 75%;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
}

.mainlogo p {
    width: 75%;
    margin: 18px auto 0;
}

nav,
.street {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0;
}

.half-green-white {
    background-color: #ffffff;
    background: -moz-linear-gradient(top, #53b791 0%, #53b791 50%, #ffffff 50%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #53b791 0%,#53b791 50%,#ffffff 50%,#ffffff 100%);
    background: linear-gradient(to bottom, #53b791 0%,#53b791 50%,#ffffff 50%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53b791', endColorstr='#ffffff',GradientType=0 );
}
.half-white-green {
    background-color: #53b791;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #53b791 50%, #53b791 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 50%, #53b791 50%,#53b791 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #53b791 50%, #53b791 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#53b791', GradientType=0 );
}

.invert {
    background-color: #ffffff;
    color: #53b791;
}

table {
    width: 100%;
    font-size: 0.75em;
}

.rpad {
    padding-right: 36px;
    box-sizing: border-box;
}

.lpad {
    padding-left: 36px;
    box-sizing: border-box;
}

abbr[title],
abbr {
    text-transform: none;
    text-decoration: none;
}

ul {
    font-size: 0.75em;
}

table.ti td:first-child {
    width: 80%;
    text-align: right;
}

table.ti td:last-child {
    width: 20%;
    text-align: right;
}

table.it td:first-child {
    width: 20%;
}

table.it td:last-child {
    width: 80%;
}

.col-4 {
    float: left;
    width: 33%;
}

.col-6 {
    float: left;
    width: 50%;
}

.col-8 {
    float: left;
    width: 66%;
}

.pull-right {
    float: right;
}

form {
    font-size: 24px;
}

.row {
    clear: both;
}

.col-center {
    height: 244px;
    width: 538px;
    
}

.col-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.about li {
    font-size: 36px;
}

.field {
    padding: 6px 0;
}

.field label {
    width: 20%;
    margin-right: 5%;
    text-align: right;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}

::placeholder {
    font-size: 20px;
    vertical-align: top;
}


.field input,
.field textarea {
    width: 40%;
    text-align: left;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    border-radius: 2px;
}

.field input {
    text-align: left;
}

.g-recaptcha {
    padding-top: 2em;
    width: 300px;

    margin: 0 auto 1em auto;
}

.button {
    margin: 6px 0;
    border: 1px solid #ffffff;
    color: #53b791;
    border-radius: 2px;
    padding: 0.5em 2em 0.5em 2em;
    background-color: #ffffff;
}

.ento-contact-form {
    text-align: center;
}

.button-holder {
    text-align: center;
}

.form-done,
.form-fail {
    display: none;
    text-align: center;
}

.case-reset {
    text-transform: none;
}

.black {
    color: black;
}

.margin-none-top {
    margin-top: 0;
}

.margin-none-bottom {
    margin-bottom: 0;
}

.margin-sm-top {
    margin-top: 0.5em;
}

.margin-sm-bottom {
    margin-bottom: 0.5em;
}

.padding-none {
    padding: 0;
}

.about,
.invert .device-text p{
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;
    color: #666;
}

.device-text {
    padding: 15px 36px;
    font-size: 28px;
}

.case-study-logos {
    width: 60%;
    margin: auto;
    padding: 10px;
    padding-bottom: 18px;
}

textarea {
    vertical-align: top;
  }

.case-study-article {
    padding-bottom: 1em;
}

label:after {
    color: red;
}


#case-studies .about {
    margin-top: 5px;
    font-size: .6em
}

#case-studies .row:not(:first-of-type) {
    margin-top: 1em;
}

#devices .exploded-view-section {
    margin-bottom: 0.75em;
}

#footer {
    padding-top: 0.3em;
    padding-bottom: 0.75em;
}

#footer .links {
    margin-bottom: 0.75em;
}

#footer nav {
    text-align: left;
}

#footer ul {
    padding: 20px 0 0 0;
    margin: 0;
}

#footer li {
    display: block;
    margin: 0;
}

#footer a {
    color: #53b791;
}

#footer .small {
    font-weight: bold;
    font-size: 20px;
}

@media (max-width: 767px) {
    body {
        font-size: 24px;
    }

    img.logo {
        display: block;
        margin: 0 auto 24px;
    }

    .container {
        margin: 0 10px;
        padding: 24px 0;
    }

    img.device {
        max-width: 75%;
        margin: 0 auto;
        display: block;
    }

    .col-4,
    .col-6,
    .col-8,
    .pull-right {
        float: none;
        width: auto;
    }

    .pushup {
        top: 0;
    }
}


@media (min-width: 768px) {
    .invert-section-divider {
        height: 4em;
    }
}

@media (max-width: 991px) {
    .label-align {
        padding-left: 5px;
        margin-left: 45%;
    }

    form .pushdown {
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    form .pushdown {
        margin-top: 100px;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .container {
        margin: 0 10px;
    }

    .col-6 {
        clear: both;
        float: none;
        width: auto;
        padding: 0 36px;
    }

    .col-6 + .col-6 {
        padding: 36px 36px 0;
    }

    #social .col-4,
    #social .col-6,
    #social .col-8,
    #social .pull-right {
        float: none;
        text-align: center;
        width: auto;
    }

    .pushup {
        top: 0;
    }
}

h3 {
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    padding-left: 0;
    padding-right: 15px;
    text-transform: none;
}

h3.product {
    margin: 20px;
    padding: 10px;
    display: block;
}

div.heading-title.heading-border-bottom {
    border-bottom: #ccc 2px solid;
}

h4 {
    font-size: 18px;
    letter-spacing: normal;
    margin: 0 0 14px 0;
}


.home .blog-post-item {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    font-size: 18px;
    text-transform: none;
    border-bottom: #ccc 2px solid;
}

.home .blog-post-item ul {
    font-size: 18px;
}

ul.blog-post-info {
    display: block;
    border-bottom: #eaeaea 1px dotted;
    padding-bottom: 20px;
}

.home div.heading-title {
    margin-bottom: 20px;
}


nav.bottom {
    display: inline;
}

nav.bottom ul a {
    padding: 0px;
    display: inline;
}

.crikit-section {
	min-width: 300px;
}

.ladybird-section {
	min-width: 300px;
}


/* Add a black background color to the top navigation */
nav {
    overflow: hidden;
    margin-top: -30px;
}

/* Style the links inside the navigation bar */
nav a {

    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the color of links on hover */
nav li:hover {
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
nav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    nav li {display: none;}
    nav a.icon {
        float: right !important;
        display: block;
    }
}

@media screen and (max-width: 604px) {
	#device-columns .crikit {
		display: none;
	}
	
	#device-columns h3 {
		text-align: center !important;
	}
	
	#device-columns .crikit-left {
		display: block;
		width: initial !important;
		margin-bottom: 50px;
	}
	
	#device-columns .ladybird {
		display: block;
		width: initial !important;
		margin-top: 0;
	}
	
	.ladybird-section {
		margin-top: 40px;
		margin-bottom: 20px;
	}
	
	#device-columns .container {
		margin-left: auto;
		margin-right: auto;
		width: 200px;
	}
	
}

#downloads .container {
    margin-left: auto;
    margin-right: auto;
    width: 768px;
}

@media screen and (max-width: 980px) {
	#downloads .container {
		margin-left: auto;
		margin-right: auto;
		width: 348px;
	}
}

@media screen and (min-width: 605px) {
	.crikit-left {
		display: none;
	}
}

@media screen and (max-width: 600px) {
    nav li {display: none;}
    nav a.icon {
        float: right !important;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    nav.responsive {position: relative;}
    nav.responsive a.icon {
        position: absolute;
        right: 0px;
        top: 18px;
    }
    nav.responsive li {
        display: block;
        text-align: left;
    }
}

.watch-video-button {
    padding: 20px 40px;
    border-color: #f3f3f3;
    font-size: 28px;
    width: 340px;
    display: inline-block;
    border-radius: 10px;
    text-transform: uppercase;
    background-color: rgba(0,0,0,0.7);
    border: 3px solid #fff;
    text-transform: uppercase;
    color: #fff;
    outline: none;
}

.watch-video-button .fa {
    margin-left: 8px;
}

.watch-video-button:hover {
    background-color: rgba(0,0,0,0.8);
}

.content {
    text-align: center;
    position: absolute;
    max-width: 1100px;
    max-height: 641px;
    width: 100%;
    margin-right: 490px;
}

.watch-video-spacer {
    height: 22vw;
    max-height: 262px;
}

@media (max-width: 768px) {
    .watch-video-button {
        padding: 10px;
        font-size: 18px;
        width: 200px;
        border: 2px solid #fff;
    }

    .watch-video-button .fa {
        margin-left: 8px;
    }
}