/* GadgetsPlua CSS Document */


/* Brand Colors

Blue: #2c5aa9;
Light Blue: #9fb8ce;
Yellow: #d8a13b;
Gray: #5b677a;
Light Gray: #eee;

*/


/* Reset */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  text-size-adjust: none; }
*, *:before, *:after {
  padding: 0; margin: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit; }
a img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { border: none; }
iframe { border: 0; }
.clearfix:after {
  content: ' ';
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  font-size: 0; }
.fa { font-family: 'FontAwesome', 'Roboto', sans-serif !important; }


/* Global */

body { font: 100%/1.375em 'Roboto', sans-serif; }

h1 { margin-bottom: 1.375rem; color: #0a0a32; font-weight: bold; font-size: 400%; line-height: 1em; }
h2 { margin-bottom: 1.375rem; color: #2c5aa9; font-weight: bold; font-size: 200%; line-height: 1em; }
h3 { margin-bottom: 1.375rem; color: #5b677a; font-weight: bold; font-size: 150%; line-height: 1em; }
h4 { margin-bottom: 0.6875rem; color: #5b677a; font-weight: bold; font-size: 100%; line-height: 1.375em; }
h5 { margin-bottom: 0.6875rem; color: #000; font-weight: bold; font-size: 100%; line-height: 1.375em; }

h1.hero {
  padding: 2em 5%; margin-bottom: 0;
  text-align: center; text-shadow: 0 2px 3px rgba(0,0,60,0.2);
  background: #9fb8ce;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%; }

p, ul, ol { margin-bottom: 1.375rem; }

a { color: #2c5aa9; }
a:hover { color: #d8a13b; }

sup { font-size: x-small; line-height: 1em; }

.note { font-size: 75%; line-height: 1.375em; }
ol.note { list-style-position: inside; }

.full { width: 100%; }

.centered { text-align: center; }

section.content {
  max-width: 1000px; padding: 2em 5%; margin: 0 auto;
  border-bottom: 1px solid #ddd; }
section.content:last-of-type { border-bottom: none; }
section.content > *:last-child { margin-bottom: 0; }


/* Tables */

table { width: 100%; margin-bottom: 1.375em; }
tr:nth-child(even) td { background: #eee; }
tr td[colspan="2"] {
  background: #9fb8ce;
  border-top: 1.5em solid #fff;
  border-bottom: 2px solid #2c5aa9; }
thead + tbody > tr:first-child td[colspan="2"] { border-top: none; }
th, td { padding: 0.75em 1em; font-weight: normal; }
td + td:last-child { width: 20%; }
th { color: #fff; background: #2c5aa9; }
table h4 { margin: 0; color: #fff; font-weight: normal; }


/* Forms */

form { margin-bottom: 1.375em; }
form.contact {
  position: relative; overflow: hidden;
  padding: 4%;
  background: #eee; }
form fieldset > *:last-child { margin-bottom: 0; }

form .thank-you { display: none; }
form .thank-you > *:last-child { margin-bottom: 0; }

form .two-col p { float: left; width: 50%; }
form .two-col p:nth-child(odd) { padding-right: 0.5em; }
form .two-col p:nth-child(even) { padding-left: 0.5em; }

form p { margin-bottom: 4%; }
form p.required label:after { content: ' *'; }
form .note { float: right; }

label { display: block; margin-bottom: 0.5em; }

input, button {
  font-size: 100%; font-family: 'Roboto', sans-serif;
  border: none; }
input[type=text] { width: 100%; padding: 0.5em; }
input#name1 { position: absolute; left: 1000px; width: 100px; }
input[type="submit"] { cursor: pointer; }
.contact #submit { padding-left: 2em; padding-right: 2em; }

textarea {
  display: block; width: 100%; min-height: 6em; padding: 0.5em;
  font-size: 100%; font-family: 'Roboto', sans-serif;
  border: none; resize: vertical; }


/* Buttons */

.button {
  display: inline-block; cursor: pointer;
  padding: 0.75em 1em 1em; margin: 0.25rem 0; white-space: normal;
  color: #fff; text-decoration: none; line-height: 1em;
  text-align: center; text-transform: uppercase;
  background: #d8a13b; border-radius: 0.25em;
  box-shadow: inset 0 -0.25em rgba(0,0,50,0.3);
  -webkit-transition: background-color 200ms;
  transition: background-color 200ms;
  -webkit-appearance: none; }
.button:hover { color: #fff; background: #9fb8ce; }
/*.button:active {
  padding: 0.75em 1em; margin-top: 0.25em;
  box-shadow: none; } */
.button.large { font-size: 125%; }
.button[disabled] {
  color: #ccc;
  background: #999;
  cursor: not-allowed; }

button.loading, button.loading:hover, button.loading[disabled] {
  position: relative;
  color: transparent;
  background-color: #777;
  background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%);
  background-image: linear-gradient(-45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%);
  background-size: 3em 3em;
  -webkit-animation: progress 1s infinite linear;
  animation: progress 1s infinite linear; }
button.loading:after {
  content: attr(data-loading-text);
  position: absolute; top: 0; left: 0;
  width: 100%; padding: 0.75em;
  color: #fff; text-align: center; }


/* Notification Banner */

.notification-banner {
  display: none;
  position: relative;
  padding: 0.6875rem 2.75rem;
  color: #fff; text-align: center;
  background-color: #d8a13b; }

.notification-banner::after {
  content: '×'; cursor: pointer;
  position: absolute;
  top: 0; right: 0;
  width: 1em; margin: 0.6875rem;
  color: rgba(0,0,0,0.3);
  font-size: 1.375em; line-height: 1; }

.notification-banner > :last-child { margin-bottom: 0; }

/* Slider */

.slider { position: relative; width: 100%; overflow: hidden; overflow-x: scroll; }
.slider:before, .slider:after {
  content: ''; position: absolute; top: 0; bottom: 0;
  display: block; width: 6em; }
.slider:before { left: 0; background-image: linear-gradient(to right, rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%); }
.slider:after { right: 0; background-image: linear-gradient(to left, rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%); }
.slider ul { list-style: none; display: table; table-layout: fixed; }
.slider li { display: table-cell; vertical-align: middle; width: 100%; padding: 2em 6em; }
.slider .arrow {
  position: absolute; top: 50%; z-index: 1;
  display: inline-block; width: 2em; margin-top: -1em;
  color: #fff; font: 150%/1em "Courier New", Courier, monospace;
  line-height: 2em; text-align: center; text-decoration: none;
  background: #9fb8ce; border-radius: 50%;
  -webkit-transition: all 200ms;
  transition: all 200ms; }
.slider .arrow:hover {
  background: #2c5aa9;
  -webkit-transform: scale(1.2);
  transform: scale(1.2); }
.slider .arrow.disabled {
  opacity: 0; cursor: default;
  -webkit-transform: scale(0);
  transform: scale(0); }
.slider .prev { text-indent: -2px; left: 1em; }
.slider .next { text-indent: 2px; right: 1em; }


/* Header */

.main-header {
  padding: 1em 2%;
  background: #2c5aa9; }

.main-header .logo { float: left; display: block; width: 20%; }

.main-header nav { text-align: right; }
.main-header .mobile-nav-toggle { display: none; }
.main-header .mobile-nav-toggle:hover { color: #fff; }
.main-header .mobile-nav-toggle:after {
  content: '';
  display: inline-block; width: 1em; height: 9px; margin-left: 0.5em;
  background: #fff;
  border-top: 3px solid #2c5aa9; border-bottom: 3px solid #2c5aa9;
  box-shadow: 0 3px #fff, 0 -3px #fff; }
.main-header nav ul { display: block; margin: 2.15% 0 0 0; }
.main-header nav li { display: inline; margin: 0 0.5em; }
.main-header nav a { color: #fff; text-decoration: none; }
.main-header nav a:hover { color: #9fb8ce; }

.support-list { list-style: none; margin: 2em 0; font-size: 87.5%; }
.support-list li { display: inline-block; margin: 0 1.5em; }
.support-list i:before {
  display: block; width: 2.25em; height: 2.25em; margin-bottom: 0.5em;
  color: #5b677a; font-size: 300%; line-height: 2.25em; text-align: center;
  border: 1px solid; border-radius: 50%; }


/* Footer */

.main-footer {
  width: 100%;
  padding: 1em 3%;
  color: #fff;
  background: #2c5aa9;
  box-shadow: 0 500px 0 500px #2c5aa9; }

.main-footer p { margin-bottom: 0; }

.main-footer .right { float: right; }

.main-footer a,
.main-footer a:hover { color: #fff; }


/* 404 */

.hero.not-found { background-image: url(../images/bg-not-found.jpg); }


/* Intro */

.intro {
  text-align: center;
  background-color: #9fb8ce;
  background-image: url(../images/bg-home.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%; }

.intro h1 { display: inline-block; width: 60%; padding: 10% 0; }
.intro h1, .intro p {
  max-width: 600px;
  margin-left: auto; margin-right: auto; }

.intro div {
  padding: 2em 5%;
  background: #fff; }


/* Service List */

.service-list { list-style: none; background: rgba(91,103,122,0.9); }
.service-list li {
  float: left; display: table; width: 50%;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 100px 500px rgba(91,103,122,0.9);
  overflow: hidden;
  -webkit-transition: all 200ms;
  transition: all 200ms; }
.service-list li:hover {
  box-shadow:
  inset 0 0 100px 500px rgba(91,103,122,0.5),
  inset 0 0 0 10px #fff; }
.service-list li:nth-child(1) { background-image: url(../images/bg-service-hardware.jpg); }
.service-list li:nth-child(2) { background-image: url(../images/bg-service-security.jpg); }
.service-list li:nth-child(3) { clear: left; background-image: url(../images/bg-service-communication.jpg); }
.service-list li:nth-child(4) { background-image: url(../images/bg-service-tutoring.jpg); }
.service-list a { display: table-cell; vertical-align: middle; padding: 15% 10%; }
.service-list a, .service-list h3 { color: #fff; text-decoration: none; }
.service-list h3, .service-list p { -webkit-transition: all 200ms; transition: all 200ms; }
.service-list p { padding: 1em; margin: 0; }
.service-list li:hover h3, .service-list li:hover p { text-shadow: 0 0 10px #000; }
.service-list .cta {
  position: relative; top: 2em;
  display: inline-block; padding: 0.75em 1em;
  background: rgba(44,90,169,0.8); border-radius: 0.25em; opacity: 0;
  text-transform: uppercase; line-height: 1em;
  -webkit-transition: all 200ms;
  transition: all 200ms; }
.service-list li:hover .cta { top: 0; opacity: 1; }
.service-list .cta:hover { background: rgba(44,90,169,1); }


/* Testimonials */

.testimonials { max-width: 1000px; margin: 0 auto; }
.testimonials ul { width: 400%; text-align: center; }
.testimonials p { font-size: 150%; line-height: 1.375em; }
.testimonials footer { color: #5b677a; font-style: italic; }


/* Client List */

.client-list { text-align: center; }

.client-list li {
  display: inline-block;
  padding: 1em; }

.client-list img {
  display: block;
  width: 240px; max-width: 100%; }

/* DLHelp List */

.dlhelp-list { text-align: center; }

.dlhelp-list li {
  display: inline-block;
  padding: 1em; }

.dlhelp-list img {
  display: block;
  width: 240px; max-width: 100%; }

/* Instructions */

.install-instructions {
  display: none;
  padding: 4%; margin-bottom: 1.375rem;
  background-color: #eee; }

.install-instructions > :last-child { margin-bottom: 0; }

.install-instructions .browser {
  float: left; width: 33.333%;
  padding: 0 0.6875rem; }

.install-instructions .browser img {
  display: block; width: 100%;
  margin-bottom: 1.375rem;
  border: 5px solid #5b677a; }


/* Payments & Pricing */

.hero.payments-pricing { background-image: url(../images/bg-pricing.png); }

form.payment {
  margin: 2.75em 0;
  text-align: center; }

ul.paypal {
  list-style: none;
  color: #5b677a; font-size: 250%; text-align: center; }
ul.paypal li { display: inline; }
ul.paypal li:first-child {
  display: block; margin-bottom: 0.5em;
  font-size: 40%; }
ul.paypal li:first-child i:before {
  display: block; margin-bottom: 0.157em;
  font-size: 300%; }

.price-chart {
  position: relative;
  display: table; table-layout: fixed;
  margin-bottom: 2.75em;
  background: #eee; }
.price-chart li {
  display: table-cell; width: 33.333%;
  border-bottom: 0.5em solid #2c5aa9; }
.price-chart li:nth-child(2) {
  position: relative; z-index: 1;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.3); }
.price-chart li:nth-child(2):before,
.price-chart li:nth-child(2):after {
  content: ''; position: absolute; bottom: 100%;
  display: block; width: 100%; height: 1em;
  background: #2c5aa9;
  box-shadow: 0 -4px 10px -4px rgba(0,0,0,0.5); }
.price-chart li:nth-child(2):after {
  bottom: auto; top: 100%;
  height: 1.5em;
  background: #fff; border-bottom: 0.5em solid #2c5aa9;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.5); }
.price-chart h3 {
  text-align: center; text-transform: uppercase;
  background: #2c5aa9; }
.price-chart li:nth-child(2) h3 { border-bottom: 0.667em solid #2c5aa9; }
.price-chart h3 a {
  display: block; padding: 1em;
  color: #fff; text-decoration: none; }
.price-chart p { padding: 0 1em; }




/* Contact */

.hero.contact { background-image: url(../images/bg-contact.jpg); }
.hero.remote { background-image: url(../images/bg-remote.png); }

.contact-list { list-style: none; }
.contact-list .fa {
  position: relative; top: 0.25em;
  width: 1em; margin-right: 0.5em;
  vertical-align: top; }
.contact-list .fa:before { display: block; text-align: center; }
.contact-list a { display: inline-block; }

.map { width: 100%; min-height: 480px; }


/*************/
/* Animation */
/*************/

/* Progress */

@-webkit-keyframes progress {
  0% { background-position: 0 0; }
  100% { background-position: -3em 0; }
}

@keyframes progress {
  0% { background-position: 0 0; }
  100% { background-position: -3em 0; }
}


/*****************/
/* Media Queries */
/*****************/

@media (min-width: 800px) {
  .main-header nav ul { display: block !important; }
}

@media (max-width: 800px) {
  h1 { margin-bottom: 0.5em; font-size: 200%; }
  h2 { margin-bottom: 0.917em; font-size: 150%; }
  h3 { margin-bottom: 1.375em; font-size: 100%; }

  form .two-col p:nth-child(n+1) { float: none; width: auto; padding: 0; }

  .main-header { padding: 0; }
  .main-header .logo { width: 180px; margin-left: 3%; }
  .main-header .mobile-nav-toggle { display: block; margin-right: 3%; line-height: 56px; }
  .main-header nav ul {
    display: none; width: 100%; padding: 1% 3%; margin: 0; overflow: hidden;
    background: #5b677a; box-shadow: inset 0 0 5px rgba(0,0,0,0.3); }
  .main-header nav li { display: block; padding: 0.5em 0; margin: 0; }

  .price-chart { margin-bottom: 1.375em; }
  .price-chart, .price-chart li {
    display: block; width: auto; padding-bottom: 1px;
    border: none; }
  .price-chart li:nth-child(2) { box-shadow: none; }
  .price-chart li:nth-child(2):before, .price-chart li:nth-child(2):after { display: none; }
  .price-chart li:nth-child(2) h3 { border: none; }
}

@media (max-width: 650px) {
  table { font-size: 75%; line-height: 1.375em; }
  td + td:last-child { width: 25%; }

  .button.large { font-size: 100%; }

  .slider li { padding: 2em 5em; }
  .slider:before, .slider:after { width: 5em; }

  .intro h1 { width: 70%; }
  .support-list { margin-bottom: 1em; font-size: 50%; }
  .support-list li { margin: 0.5em }
  .support-list i { color: #fff; }
  .support-list i:before { margin-bottom: 0; }

  .service-list li { float: none; width: 100%; }
  .service-list a { padding: 5%; }

  .testimonials p, .slider .arrow { font-size: 110%; }

  .main-footer { font-size: small; }
  .main-footer p, .main-footer p:last-child { text-align: center; }
  .main-footer .right { float: none; display: block; }

  .install-instructions .browser { width: 100%; padding: 0; }
}

@media (max-width: 400px) {
  label { font-size: 87.5%; }

  .main-header .logo { margin-left: 4%; }
  .main-header .mobile-nav-toggle { margin-right: 4%; }
  .main-header nav ul { padding: 1% 4%; }

  .intro h1 { display: none; }
  h1.hero {
    padding: 1em 5%;
    background-image: none !important; }
}