/********************************************
Theme Name: Genesis
Theme URI: http://ctinetworks.com
Description: This site was designed and developed by the CTI Creative Group.
Author: Evan Kennedy
Version: 2.0.0
Tags: Responsive, HTML5
Copyright: CTI Networks.  All Rights Reserved.
*/
/*------------------------------------------------------
                    Reset CSS
  ------------------------------------------------------*/
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1.3; }

ol, ul {
  list-style: none;
  padding: 10px 0; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*------------------------------------------------------
                    Preset CSS
  ------------------------------------------------------*/
* {
box-sizing: border-box; }

html {
  font-size: 100%; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  color: #404141;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  padding-top: 60px;
  width: 100%; }

h1, .h1 {
  font-size: 2.8em;
  font-weight: 300;
  padding-bottom: 30px;
  text-align: center;
  text-transform: uppercase; }

h2, .h2 {
  font-size: 1.3em;
  padding: 10px 0;
  text-transform: uppercase; }

h3, .h3 {
  font-size: 1.2em;
  font-weight: 600;
  padding: 10px 0; }

p {
  padding: 10px 0;
  word-wrap: break-word; }

a {
  color: #2bade3;
  text-decoration: none; }

a:hover {
  color: #f96808; }

hr {
  border-top: 2px solid #2bade3;
  display: block;
  height: 1px;
  margin: 0 auto 30px auto;
  width: 10%; }

strong {
  font-size: 1.2em;
  font-weight: 700; }

::-moz-selection {
  background: #2bade3;
  color: #fff; }

::selection {
  background: #2bade3;
  color: #fff; }

::-moz-selection {
  background: #2bade3;
  color: #2bade3; }

input[type=text], input[type=password], textarea, select {
  background: #fff;
  border: 1px solid #c9d3dc;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05em;
  margin: 0 0 12px 0;
  padding: 12px 14px;
  outline: none;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(11, 29, 42, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  background-color: #fff;
  border-color: #2bade3;
  box-shadow: 0 0 0 3px rgba(43, 173, 227, 0.15); }

textarea {
  min-height: 140px;
  resize: vertical; }

input[type=submit] {
  background: #2bade3;
  border: none;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 16px 0;
  min-height: 44px;
  padding: 0 24px;
  text-transform: uppercase;
  width: auto;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }

input[type=submit]:hover {
  background: #f96808;
  box-shadow: 0 10px 20px rgba(43, 173, 227, 0.2);
  transform: translateY(-1px); }

input[type=submit]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none; }

input[type='radio'], input[type='checkbox'] {
  height: 20px;
  width: 20px; }

label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
  text-align: left;
  width: auto; }

li {
  padding-bottom: 5px; }

details {
  margin: 10px 0; }

summary {
  cursor: pointer;
  font-size: 1.3em;
  font-weight: 700;
  outline: none; }

button {
  cursor: pointer; }

button:active, button:focus {
  border: none;
  outline: none; }

iframe {
  border-bottom: 1px solid #ccc; }

.g-recaptcha {
transform: scale(0.86); }

/*------------------------------------------------------
                  Container CSS
  ------------------------------------------------------*/
.full {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%; }

.wrapper {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 1180px; }

.header, header {
  display: inline-block;
  padding-bottom: 30px;
  position: relative;
  text-align: center;
  width: 100%; }

.footer, footer {
  display: inline-block;
  padding-top: 30px;
  position: relative;
  text-align: center;
  width: 100%; }

.one {
box-sizing: content-box;
  display: inline-block;
  padding: 36px 45px;
  position: relative;
  width: 1090px; }

.one-half {
  display: inline-block;
  float: left;
  padding: 10px;
  position: relative;
  width: 525px; }

.half-parent {
  display: inline-block;
  float: left;
  padding: 20px 0;
  width: 47%; }

.half-parent.last {
  float: right; }

.one-third {
  display: inline-block;
  float: left;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: 343px; }

.one-fourth {
  display: inline-block;
  float: left;
  padding: 0 10px;
  position: relative;
  width: 252px; }

.box {
  padding: 20px;
  text-align: left; }

.group {
  clear: both;
  display: inline-block; }

.screen-size {
  display: block;
  height: 85%;
  width: 100%; }

/*------------------------------------------------------
               Container > Tag CSS
  ------------------------------------------------------*/
.one-half h1 {
  padding: 0 0 20px 0;
  text-align: left; }

input.half, select.half {
  width: 125px; }

/*------------------------------------------------------
                  Footer CSS
  ------------------------------------------------------*/
footer {
  text-align: center; }

footer ul {
  padding-bottom: 30px; }

footer li {
  display: inline;
  padding: 0 10px; }

footer li a {
  text-transform: uppercase; }

footer p {
  font-size: 0.9em;
  padding-bottom: 30px; }

footer .facebook {
  background: url("../img/primap.png") no-repeat -132px -517px;
  display: inline-block;
  height: 55px;
  width: 55px; }

footer .twitter {
  background: url("../img/primap.png") no-repeat -259px -517px;
  display: inline-block;
  height: 55px;
  width: 55px; }

/*------------------------------------------------------
               Color Schemes CSS
  ------------------------------------------------------*/
.color-scheme-orange, .color-scheme-blue {
  background: #F96808;
  color: #fff; }

.color-scheme-orange h2, .color-scheme-blue h2, .color-scheme-green h2, .color-scheme-yellow h2, .color-scheme-blue p {
  color: #404141; }

.color-scheme-blue summary, .color-scheme-green summary, .color-scheme-yellow summary {
  color: #fff; }

.color-scheme-blue details, .color-scheme-green details, .color-scheme-yellow details {
  color: #404141; }

.color-scheme-blue {
  background: #2BADE3; }

.color-scheme-bridge {
  background: url("../img/city-background.png") no-repeat;
background-size: 100% 100%;
  color: #fff; }

.color-scheme-grey {
  background: #ebebeb; }

.color-scheme-grey input[type=text], .color-scheme-grey select, .color-scheme-blue select {
  background: #fff; }

.color-scheme-dark-wood {
  background: url("../img/wood-background.jpg") no-repeat;
background-size: 100% 100%;
  color: #fff; }

.color-scheme-yellow {
  background: #ffad00;
  color: #fff; }

.color-scheme-yellow select {
  background: #fff; }

.color-scheme-white {
  background: #fff;
  color: #404141; }

.color-scheme-green {
  background: #6fa71b;
  color: #fff; }

.color-scheme-document h2 {
  color: #f96808; }

.color-scheme-document h3 {
  color: #2bade3; }

/*------------------------------------------------------
               Font Schemes CSS
  ------------------------------------------------------*/
.font-scheme-intro h1 {
  font-weight: 700; }

.font-scheme-intro h2 {
  font-weight: 700; }

/*------------------------------------------------------
                  Background CSS
  ------------------------------------------------------*/
.background-grey {
  background: #ebebeb; }

.background-black {
  background: #404141;
  color: #fff; }

/*------------------------------------------------------
                  Image CSS
  ------------------------------------------------------*/
.intro-image img {
  height: auto;
  width: 70%; }

img.intro-image-small {
  height: auto;
  width: 40%; }

img.full-image {
  height: auto;
  width: 100%; }

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



/*------------------------------------------------------
                  List CSS
  ------------------------------------------------------*/
ul.checked {
  line-height: 26px; }

ul.checked li::before {
  background: url("../img/primap.png") no-repeat -112px -1186px;
  content: " ";
  display: block;
  float: left;
  height: 26px;
  margin-right: 5px;
  width: 29px; }

ul.square {
  list-style: square;
  padding: 20px;
  margin-left: 20px; }

ul.square-2 {
  list-style: square;
  margin: 0 0 0 20px;
  padding: 5px 0 5px 20px; }

ul.square-2 li {
  padding: 5px 0 0 0; }

ul.checked {
  position: relative; }

ul.checked li::before {
  background: url("../img/primap.png") no-repeat -112px -1186px;
  content: " ";
  display: block;
  float: left;
  height: 26px;
  left: 0;
  margin-right: 5px;
  position: absolute;
  width: 29px; }

ul.checked li {
  padding: 0 0 10px 34px; }

ul.square {
  list-style: square;
  padding: 20px;
  margin-left: 20px; }

ul.extra-ml {
  margin-left: 40px; }

/*------------------------------------------------------
                  Page Intro CSS
  ------------------------------------------------------*/
/*------------------------------------------------------
                  Setup Guides CSS
  ------------------------------------------------------*/
#setup-form select {
  width: 280px; }

#setup-guide img {
  height: auto;
  width: 70%; }

#setup-guide figure {
  text-align: center; }

/*------------------------------------------------------
                  Plan CSS
  ------------------------------------------------------*/
.plans {
  background: #fff;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  text-align: center;
  width: 100%; }

.plans h2, .plans p {
  padding: 0 10px 5px 10px; }

.plans th, .plans td {
  border-right: 1px solid #ccc;
  padding: 5px;
  vertical-align: middle;
  width: 20%; }

.plans tr {
  border-bottom: 1px solid #ccc; }

.plans .striped {
  background: #f1f1f1; }

.plans .details, .plans .speeds {
  text-align: left;
  width: 30%; }

.plans .speeds {
  font-size: 1.2em;
  font-weight: 600;
  text-align: center; }

.plans .speed-data {
  display: inline-block;
  text-align: right;
  width: 90px; }

.plans .blue, .plans .green, .plans .yellow, .plans .orange, .plans .red, .plans th {
  background: #2bade3;
  color: #fff; }

.plans .green {
  background: #85ca20; }

.plans .yellow {
  background: #ffad00; }

.plans .orange {
  background: #f96808; }

.plans .red {
  background: #d20000; }

.plans th {
  background: #404141;
  text-transform: uppercase; }

.plans .order-now {
  font-size: 1.2em;
  text-transform: uppercase; }

/*------------------------------------------------------
                  Home Intro CSS
  ------------------------------------------------------*/
#intro {
  background: #ebebeb; }

#intro h1 {
  color: #d20000;
  font-weight: 700;
  padding-bottom: 15px;
  text-transform: none; }

#intro footer p {
  padding-bottom: 20px; }

/*------------------------------------------------------
                Home Services CSS
  ------------------------------------------------------*/
#services .one-fourth.first {
  padding-left: 141.5px; }

#services .panel {
  color: #fff;
  display: block;
  padding: 2em;
  position: relative;
  text-align: center; 
  border-radius: 1em;
}

.card-emoji {
  /* display: inline-block; */
  text-align: center;
  margin:0 auto;
}

#services .panel p {
  height: 100px; 
}

#services h2 {
  padding-top: 10px; }

#services .panel {
  background-color: #2bade3; }

#services .card-emoji {
  height: 146px;
  line-height: 146px;
  width: 167px;
  font-size: 4.5rem;
}

/*------------------------------------------------------
                  Home Commitment CSS
  ------------------------------------------------------*/
#commitment {
  background: #2C2C2C url("../img/city-background.png") no-repeat;
background-size: 100% 100%;
  color: #fff; }

#commitment h2 {
  padding: 10px 0 0 0; }

#commitment::before {
  background: url("../img/primap.png") no-repeat -10px -107px;
  content: " ";
  display: inline-block;
  height: 35px;
  left: 0;
  margin: -2px auto 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 67px; }

#commitment .one-fourth {
  text-align: center; }

#commitment .card-emoji {
  height: 96px;
  line-height: 96px;
  width: 98px;
  font-size: 3.2rem;
}

/*------------------------------------------------------
                  Home Account CSS
  ------------------------------------------------------*/
#account {
  background: #ebebeb;
  text-align: center; }

#account::before {
  background: url("../img/primap.png") no-repeat -169px -107px;
  content: " ";
  display: inline-block;
  height: 32px;
  left: 0;
  margin: -2px auto 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 66px; }

#account header {
  padding-bottom: 0; }

#account form {
  padding-bottom: 15px; }

/*------------------------------------------------------
                  Home Support CSS
  ------------------------------------------------------*/
#support::before {
  background: url("../img/primap.png") no-repeat -169px -107px;
  content: " ";
  display: inline-block;
  height: 35px;
  left: 0;
  margin: -2px auto 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 67px; }

#support img.featured {
  float: right;
  height: auto;
  width: 70%; }

/*------------------------------------------------------
                  Home About CSS
  ------------------------------------------------------*/
#about {
  background: #2C2C2C;
background-size: 100% 100%;
  color: #fff; }

#about::before {
  background: url("../img/primap.png") no-repeat -10px -107px;
  content: " ";
  display: inline-block;
  height: 35px;
  left: 0;
  margin: -2px auto 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 67px; }

#about img.featured {
  height: auto;
  width: 100%; }

#about p {
  padding-bottom: 20px; }

#about strong {
  line-height: 2em; }

/*------------------------------------------------------
                  Home Contact CSS
  ------------------------------------------------------*/
#contact::before {
  background: url("../img/primap.png") no-repeat -169px -107px;
  content: " ";
  display: inline-block;
  height: 32px;
  left: 0;
  margin: -2px auto 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 66px; }

#contact .one-third {
  text-align: center; }

#contact .sprite h2 {
  padding-bottom: 5px;
  text-transform: none; }

#contact .card-emoji {
  height: 165px;
  line-height: 165px;
  margin-top: 15px;
  width: 163px;
  font-size: 5rem;
}

/*------------------------------------------------------
                  Home Map CSS
  ------------------------------------------------------*/
#map {
  height: 400px;
  width: 100%;
  z-index: 0; }

/*------------------------------------------------------
                  Userspace CSS
  ------------------------------------------------------*/
#userspace .upload {
  background: #ebebeb;
  border-radius: 10px;
  color: #2bade3;
  display: table-cell;
  font-size: 1.8em;
  height: 150px;
  text-align: center;
  vertical-align: middle;
  width: inherit; }

/*------------------------------------------------------
                  Accordion CSS
  ------------------------------------------------------*/
.accordion {
  background: #ccc;
  color: #fff;
  display: block;
  height: 445px;
  margin-bottom: 30px;
  position: relative;
  text-decoration: none;
  width: 100%; }

.accordion::after {
  background: url("../img/accordion-shadow.png") no-repeat;
background-size: 100%;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  bottom: -30px;
  width: 100%; }

.accordion .panel {
box-shadow: -5px 0 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%; }

.accordion .panel:first-child {
box-shadow: none; }

.accordion .panel.first {
  background: var(--hero-gradient, linear-gradient(135deg, #0b1d2a, #17807e));
background-size: cover;
  left: 0; }

.accordion .panel.second {
  background: var(--hero-gradient, linear-gradient(135deg, #0b1d2a, #17807e));
background-size: cover;
  left: 25%; }

.accordion .panel.third {
  background: var(--hero-gradient, linear-gradient(135deg, #0b1d2a, #17807e));
background-size: cover;
  left: 50%; }

.accordion .panel.fourth {
  background: var(--hero-gradient, linear-gradient(135deg, #0b1d2a, #17807e));
background-size: cover;
  left: 75%; }

.accordion .heading, .accordion .title {
  font-weight: 800;
  text-transform: uppercase; }

.accordion .title {
  bottom: 30px;
  left: 20px;
  opacity: 1;
  min-width: 300px;
  position: absolute;
transition: opacity .5s; }

.accordion .panel.active .title, .accordion .panel.inactive .title {
  opacity: 0; }

.accordion .content {
  left: 300px;
  opacity: 0;
  position: absolute;
  top: 100px;
  width: 350px;
transition: opacity .7s; }

.accordion .panel.active .content {
  opacity: 1; }

.accordion .featured {
  left: -50px;
  height: auto;
  max-width: none;
  position: absolute;
  top: 30px;
transition: left .7s; }

.accordion .panel.active .featured {
  left: -10px; }

.accordion a, .accordion:hover {
  color: #fff;
  text-decoration: underline; }

/*------------------------------------------------------
                     Hover Balloon CSS
  ------------------------------------------------------*/
.hover-balloon {
  border-radius: 5px;
  color: #404141;
  display: inline-block;
  margin-top: 30px;
  padding: 20px 10px 20px 75px;
  text-align: left;
  width: 100%; }

.hover-balloon .icon {
  left: 10px;
  position: absolute; }

.hover-balloon .info {
  background: url("../img/primap.png") no-repeat -13px -1056px;
  display: inline-block;
  height: 52px;
  width: 53px; }

.hover-balloon .faq {
  background: url("../img/primap.png") no-repeat -198px -1056px;
  display: inline-block;
  height: 52px;
  width: 53px; }

.hover-balloon .computer {
  background: url("../img/primap.png") no-repeat -180px -590px;
  display: inline-block;
  height: 54px;
  width: 54px; }

.hover-balloon .cart {
  background: url("../img/primap.png") no-repeat -245px -590px;
  display: inline-block;
  height: 54px;
  width: 54px; }

.hover-balloon .gear {
  background: url("../img/primap.png") no-repeat -309px -590px;
  display: inline-block;
  height: 54px;
  width: 54px; }

.hover-balloon .title {
  color: #f96808;
  display: block;
  font-size: 1.3em;
  padding-bottom: 10px;
  text-transform: uppercase; }

.hover-balloon:hover {
  background: #f96808;
  color: #fff; }

.hover-balloon:hover .info {
  background: url("../img/primap.png") no-repeat -13px -1111px; }

.hover-balloon:hover .knowledge {
  background: url("../img/primap.png") no-repeat -74px -1111px; }

.hover-balloon:hover .blog {
  background: url("../img/primap.png") no-repeat -135px -1111px; }

.hover-balloon:hover .faq {
  background: url("../img/primap.png") no-repeat -198px -1111px; }

.hover-balloon:hover .computer {
  background: url("../img/primap.png") no-repeat -180px -650px; }

.hover-balloon:hover .gear {
  background: url("../img/primap.png") no-repeat -309px -650px; }

.hover-balloon:hover .cart {
  background: url("../img/primap.png") no-repeat -245px -650px; }

.hover-balloon:hover .title {
  color: #fff; }

/*------------------------------------------------------
                     Meter CSS
  ------------------------------------------------------*/
.meter {
  display: inline-block;
  margin: 20px 0;
  min-width: 50%;
  position: relative; }

.meter .bar {
  background: #ccc;
  cursor: pointer;
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 0;
  width: 9%; }

.bar.one.active, .bar.two.active, .bar.three.active {
  background: #85ca20; }

.bar.four.active, .bar.five.active, .bar.six.active {
  background: #ffad00; }

.bar.seven.active, .bar.eight.active, .bar.nine.active, .bar.ten.active {
  background: #d20000; }

.bar.one {
  height: 40px; }

.bar.two {
  height: 50px; }

.bar.three {
  height: 60px; }

.bar.four {
  height: 70px; }

.bar.five {
  height: 80px; }

.bar.six {
  height: 90px; }

.bar.seven {
  height: 100px; }

.bar.eight {
  height: 110px; }

.bar.nine {
  height: 120px; }

.bar.ten {
  height: 130px; }

.spam-level {
  font-size: 4em; }

/*------------------------------------------------------
                     Overlay CSS
  ------------------------------------------------------*/
.overlay {
  background: url("../img/overlay2.png");
  left: 0;
  height: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  transition: opacity .3s, height 0s .3s;
  -moz-transition: opacity .3s, height 0s .3s;
-o-transition: opacity .3s, height 0s .3s;
}

.overlay.active {
  height: 100%;
  opacity: 1;
  transition: opacity .3s;
  -moz-transition: opacity .3s;
-o-transition: opacity .3s;
}

/*------------------------------------------------------
                     Popups CSS
  ------------------------------------------------------*/
.popup {
  background: #fff;
  display: block;
  margin: 50px auto 0 auto;
  overflow: hidden;
  padding-bottom: 20px;
  text-align: left;
  width: 580px;
  z-index: 30;
  transform: scale(0);
  -moz-transform: scale(0);
-o-transform: scale(0);
transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -moz-transition: -moz-transform .3s;
-o-transition: -o-transform .3s;
}

.popup.active {
  transform: scale(1);
  -moz-transform: scale(1);
-o-transform: scale(1);
}

.popup h2 {
  background: #2BADE3;
  color: #fff;
  margin-bottom: 10px;
  padding: 10px 0;
  text-align: center; }

.popup h3 {
  color: #f96808;
  font-size: 1.1em;
  font-weight: 600;
  padding-top: 10px;
  text-align: center; }

.popup p {
  padding: 10px 20px; }

.popup .button-1 {
  text-transform: none; }

/*------------------------------------------------------
                     Form CSS
  ------------------------------------------------------*/
.form,
#login-form .form,
.order-form ul,
.review-form ul,
.lead-form-wrapper .form,
#wireless-prequal-forms .form {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%; }

.form-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%; }

.form li,
#login-form .form li,
.order-form ul li,
.review-form ul li {
  display: block;
  margin: 0;
  text-align: left; }

.form-error,
.input-error,
.sucess {
  border-radius: 6px;
  font-weight: 600;
  padding: 12px 16px;
  width: 100%; }

.form-error,
.input-error {
  background: rgba(210, 0, 0, 0.08);
  border: 1px solid rgba(210, 0, 0, 0.5);
  color: #a10f0f; }

.sucess {
  background: rgba(255, 173, 0, 0.12);
  color: #c97c00; }

/*------------------------------------------------------
                     Order Form CSS
  ------------------------------------------------------*/
.order-form {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 40px; }

.order-form label,
.review-form label {
  display: block;
  font-weight: 600;
  margin: 0 0 8px;
  padding: 0;
  width: auto; }

.order-form table,
.review-form table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px; }

.review-form table {
  margin: 20px 0; }

.review-form table.last {
  margin-bottom: 0; }

.order-form td,
.review-form td {
  padding: 12px 16px;
  vertical-align: top; }

.order-form table input,
.order-form table select,
.review-form table input,
.review-form table select {
  width: 100%; }

.order-form-section-header {
  background: #2BADE3;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-weight: 700;
  padding: 10px;
  text-align: center; }

.order-form-section {
  background: #fff;
  display: block;
  overflow: hidden;
  padding: 20px 0 40px 0; }

.order-form ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  position: relative;
  width: 100%; }

.order-form li {
  padding: 0; }

.order-form h3 {
  padding: 30px 0 10px; }

.order-form li h3 {
  padding-bottom: 0; }

.order-form .note, .review-form .note {
  padding: 0 0 7px 0; }

.review-form .value {
  color: #f96808;
  padding: 0 0 5px 10px; }

.order-form table .input-error {
  width: 100%; }

.order-form .input-error {
  margin: 0;
  width: 100%; }

.order-form .receipt td {
  padding: 5px 5px 10px 5px; }

/*------------------------------------------------------
                     Product CSS
  ------------------------------------------------------*/
.product {
  background: #ebebeb;
  display: block;
  font-size: .8em;
  padding: 10px;
  position: relative; }

.product img {
  height: auto;
  margin-bottom: 15px;
  max-width: 100%;
  padding: 0;
  width: 90%; }

.product p {
  padding: 5px 0; }

.product ul {
  list-style: initial;
  padding: 0 0 0 20px; }

.product hr {
  clear: both;
  margin: 5px 0;
  width: 100%; }

.product-name {
  float: left;
  font-size: 1.4em;
  font-weight: 600; }

.product-price {
  color: #f96808;
  float: right;
  font-size: 1.4em;
  font-weight: 700; }

/*------------------------------------------------------
                     Loading CSS
  ------------------------------------------------------*/
.loading {
  display: none;
  margin: 20px;
  text-align: center; }

.loading img {
  height: auto;
  padding: 0;
  width: auto; }

.loading.active {
  display: block; }

.admin-loading {
  display: block;
  text-align: center; }

.admin-loading img {
  height: 30px;
  margin-top: 6px;
  padding: 0;
  width: 30px; }

/*------------------------------------------------------
                     Admin CSS
  ------------------------------------------------------*/
.admin-control-panel {
  background: #f1f1f1;
  display: block;
  min-height: 100%;
  width: 100%; }

.admin-control-panel .h2 {
  margin: 0; }

.admin-control-panel select,
.admin-control-panel input,
.admin-control-panel textarea,
.admin-control-panel label {
  background: #fff;
  font-size: .9em;
  margin-bottom: 20px;
  width: 100%; }

.admin-control-panel label {
  color: #2bade3;
  font-size: 1.1em; }

.admin-control-panel input,
.admin-control-panel textarea {
  border-bottom: 1px solid #404141;
  border-radius: 0;
  padding: 10px; }

.admin-control-panel input[type='radio'],
.admin-control-panel input[type='checkbox'] {
  display: inline-block;
  margin: 0 15px;
  vertical-align: middle;
  width: auto; }

.admin-control-panel textarea {
  height: 140px; }

.admin-heading {
  padding: 10px 0; }

.admin-menu {
  background: #212121;
box-sizing: border-box;
  color: #757575;
  display: inline-block;
  height: 100%;
  left: 0;
  list-style: none;
  padding: 80px 0 20px 0;
  position: fixed;
  top: 0;
  width: 250px;
  z-index: 998; }

.admin-menu li {
  padding: 0; }

.admin-menu a {
  color: #757575;
  display: block;
  padding: 10px 10px 10px 20px; }

.admin-menu a:hover {
  display: block;
  background: #343434;
  color: #fff;
  cursor: pointer;
  text-decoration: none; }

.admin-menu .h2 {
  display: block;
  color: #fff;
  padding: 20px 20px 20px 20px; }

.admin-menu-category:hover, .admin-menu-category.active {
  background: #343434;
  color: #fff;
  cursor: pointer; }

.admin-content {
box-sizing: border-box;
  display: block;
  padding: 40px 60px 60px 310px;
  position: relative;
  width: 100%; }

.admin-heading {
  display: block;
  padding: 20px;
  overflow: hidden; }

.admin-edit {
  background: url("../img/primap.png") no-repeat -728px -178px;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  margin: 0 7px;
  width: 24px; }

.admin-delete {
  background: url("../img/primap.png") no-repeat -728px -204px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  margin: 0 7px;
  width: 22px; }

.admin-row, .admin-hrow, .admin-editor {
  background: #fff;
  border-bottom: 1px solid #ccc;
  display: block;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  padding: 10px 0; }

.admin-editor {
  border-radius: 5px;
  padding: 10px 30px; }

.admin-editor select {
  border: 1px solid #aaa;
  border-radius: 0; }

.admin-editor-heading {
  padding-bottom: 20px; }

.admin-editor-row {
  border-bottom: 1px dotted #bbb;
  padding: 60px 0;
  position: relative; }

.admin-editor-row:last-child {
  border: none; }

.admin-hrow {
  background: #2BADE3;
  border-bottom: 2px solid #4492b2;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
  font-weight: 700; }

.admin-rd {
box-sizing: border-box;
  display: inline-block;
  float: left;
  padding: 10px 0 10px 40px;
  width: 25%; }

.admin-close {
  background: url("../img/primap.png") no-repeat -755px -292px;
  cursor: pointer;
  display: inline-block;
  height: 27px;
  margin: 10px;
  width: 29px; }

.admin-error {
  background: #fff0f0;
  display: block;
  border: 1px solid #d20000;
  border-radius: 5px;
  bottom: 110%;
  color: #d20000;
  font-size: .9em;
  min-height: 40px;
  min-width: 40px;
  padding: 5px 40px 5px 10px;
  position: absolute;
  visibility: hidden;
transform: scale(0);
transition: visibility 0s .4s, -webkit-transform .3s;
  transition: visibility 0s .4s, transform .3s;
  transition: visibility 0s .4s, transform .3s, -webkit-transform .3s; }

.admin-error.bottom {
  top: 100%;
  bottom: auto; }

.admin-error:before {
  background: url("../img/primap.png") no-repeat -372px -144px;
  bottom: -12px;
  content: " ";
  display: inline-block;
  height: 14px;
  left: 10px;
  position: absolute;
  width: 22px;
  z-index: 100; }

.admin-error.bottom:before {
  background: url("../img/primap.png") no-repeat -372px -156px;
  bottom: auto;
  top: -10px; }

.admin-error.active {
visibility: visible;
transform: scale(1);
transition: visibility 0s, transform .3s;
}

.admin-error-close {
  background: url("../img/primap.png") no-repeat -394px -144px;
  display: inline-block;
  color: #d20000;
  content: 'x';
  cursor: pointer;
  height: 18px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 18px; }

/*------------------------------------------------------
                     Item Switcher CSS
  ------------------------------------------------------*/
.switch-item {
  display: none; }

.switch-item.active {
  display: block; }

/*------------------------------------------------------
                     Common CSS
  ------------------------------------------------------*/
.scroll-down {
  background: url("../img/primap.png") no-repeat -670px -506px;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  width: 43px; }

.button-1, .button-1:hover, .button-3, .button-3:hover {
  background: #2bade3;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  padding: 7px 15px;
  text-transform: uppercase; }

.button-2, .button-2:hover {
  background: inherit;
  border: 2px solid #fff;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-transform: uppercase; }

.button-3, .button-3:hover {
  text-transform: none; }

.button-4, .button-4:hover {
  background: #f96808;
  color: #fff;
  padding: 10px 40px;
  text-transform: uppercase; }

.button-5, .button-5:hover {
  background: #f96808;
  border: none;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 1.1em;
  margin: 60px 0 20px;
  padding: 10px 0;
  text-align: center;
  text-transform: uppercase;
  width: 260px; }

.button-6 {
  background: #2bade3;
  border: none;
  border-radius: 5px;
  color: #fff;
  margin: 10px 0;
  padding: 5px 15px; }

.button-left, .button-right, .button-left:hover, .button-right:hover {
  background: #404141;
  border: none;
  color: #fff;
  display: inline-block;
  font-size: .9em;
  padding: 10px 15px;
  text-align: center;
  width: 130px; }

.button-left {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  margin: 0 0 0 10px; }

.button-right {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  left: -4px;
  margin: 0 10px 0 0;
  position: relative; }

.button-left.active,
.button-right.active {
  background: #2BADE3; }

p.error {
  background: #fae3e3;
  border: 1px solid #d20000;
  border-radius: 3px;
  color: #d20000;
  font-size: .9em;
  margin: 0 auto 15px;
  padding: 5px;
  width: 290px; }

header p {
  padding-bottom: 30px;
  padding-top: 0; }

.text-left, .text-left-mc {
  text-align: left; }

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

.text-right, .text-right-mc {
  text-align: right; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.no-float {
  float: none; }

.centered {
  margin-left: auto;
  margin-right: auto; }

.clear {
  clear: both; }

.form-inputs.hidden {
  display: none; }

.vital, .urgent {
  color: #d20000; }

.urgent {
  font-weight: 600; }

.heavy {
  font-weight: 700; }

.emphasis {
  color: #f96808; }

.note {
  font-size: .9em;
  font-style: italic; }

.small-font {
  font-size: .8em; }

.horizon-padding {
  padding: 10px 0; }

.no-margin {
  margin: 0; }

.vertical-padding {
  padding: 0 20px; }

.inline-block {
  display: inline-block; }

.success {
  color: #85ca20; }

textarea.large {
  height: 200px;
  width: 100%; }

.default-color {
  color: #404141; }

.confirmation {
  background: #f96808;
  color: #fff;
  font-size: 1.2em;
  font-weight: 700;
  padding: 20px;
  text-align: center; }

.visual {
  height: auto;
  width: 100%; }

.good {
  background: #f6fcee;
  color: #98c15b;
  display: inline-block;
  border: 1px solid #98c15b;
  width: 250px; }

.invisible {
  visibility: hidden; }

.step-number {
  background: #404141;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 1.3em;
  margin: 0 10px;
  padding: 10px;
  text-align: center; }

.multiple {
  height: 350px; }

label.inline {
  display: inline-block;
  margin-right: 20px;
  text-align: right; }

/*------------------------------------------------------
                     Drag and Drop CSS
  ------------------------------------------------------*/
.dragging {
transform: scale(0.95);
transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s; }

.drag-over {
  background: #f1f1f1; }

/*------------------------------------------------------
                     Animation CSS
  ------------------------------------------------------*/
.float-shadow, .hover-balloon {
  cursor: pointer;
  display: inline-block;
  position: relative;
transition-duration: 0.3s;
transition-property: transform;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.float-shadow:before, .hover-balloon:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
transition-duration: 0.3s;
transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform; }

.float-shadow:hover, .float-shadow:focus, .float-shadow:active, .hover-balloon:hover {
transform: translateY(-5px);
  /* move the element up by 5px */ }

.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before, .hover-balloon:hover:before {
  opacity: 1;
transform: translateY(5px); }

.floating, .scroll-down {
  animation-name: floating;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
transform: translateY(0%); }
  50% {
transform: translateY(60%); }
  100% {
transform: translateY(0%); } }

@-webkit-keyframes floating {
  0% {
}
  50% {
}
  100% {
} }

.push, .button-1, .button-2, .button-3, .button-4 {
  display: inline-block;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.push:hover, .push:focus, .push:active, .button-1:hover, .button-2:hover, .button-3:hover, .button-4:hover {
  cursor: pointer;
animation-name: push;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-iteration-count: 1; }

@-webkit-keyframes push {
  50% {
transform: scale(0.8); }
  100% {
transform: scale 1; } }

@keyframes push {
  50% {
transform: scale(0.8); }
  100% {
transform: scale(1); } }

.grow {
  cursor: pointer;
  display: inline-block;
transition-duration: 0.3s;
transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.grow:hover, .grow:focus, .grow:active {
transform: scale(1.1); }

/*------------------------------------------------------
               Responsive CSS
  ------------------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  body {
    font-size: 95%; }
  .wrapper {
    width: 940px; }
  .one {
    padding: 40px 25px;
    width: 890px; }
  .one-half {
    width: 425px; }
  .one-third {
    width: 276px; }
  .one-fourth {
    padding: 0 5px;
    width: 210px; }
  #services h2 {
    font-size: 1.2em; }
  .hover-balloon {
    padding: 20px 5px 20px 65px;
    width: 220px; }
  .hover-balloon .icon {
    left: 5px; }
  .accordion {
    font-size: 85%;
    height: 380px; }
  .accordion .content {
    left: 230px;
    width: 300px; }
  .accordion .featured {
    height: auto;
    max-height: 230px;
    width: 200px; } }

@media only screen and (min-width: 768px) and (max-width: 959px) {
  body {
    font-size: 90%; }
  .wrapper {
    width: 758px; }
  .one {
    width: 728px;
    padding: 30px 15px; }
  .one-half, .one-fourth {
    padding: 5px;
    width: 350px; }
  .one-third {
    width: 220px; }
  .sprite {
    margin-bottom: 20px; }
  .accordion {
    font-size: 75%;
    height: 350px; }
  .accordion .content {
    left: 210px;
    width: 220px; }
  .accordion .featured {
    height: auto;
    max-height: 210px;
    width: 180px; } }

@media only screen and (max-width: 767px) {
  body {
    font-size: 80%;
    padding-top: 50px; }
  .wrapper {
    width: 90%; }
  .one, .one-half, .one-third, .one-fourth {
    padding: 20px 0;
    width: 100%; }
  .one {
    padding: 60px 0; }
  .one-half h1 {
    text-align: center; }
  .popup {
    width: 90%; }
  #desktop-menu {
    display: none; }
  #mobile-menu {
    display: block; }
  #support img.featured {
    float: none;
    margin: 0 auto; }
  .m-centered, .text-right-mc, .text-left-mc {
    text-align: center; }
  .float-left, .float-right {
    float: none; }
  #login-form::before {
    right: 65px; }
  #login-form.active {
    right: 10%; }
  .plans, .plans td, .plans tr, .plans .details, .plans .speeds, .plans tbody {
    background: #fff;
    display: block;
    margin: 0;
    width: 100%; }
  .plans, .plans tr, .plans tbody {
    background: none;
    border: none; }
  .plans td {
    padding: 10px; }
  .plans th {
    display: none; }
  .plans tr {
    margin-bottom: 20px; }
  .order-form table, .order-form tbody, .order-form tr, .order-form td {
    display: block;
    text-align: center;
    width: 100%; }
  .review-form table.last {
    float: left; }
  .review-form table {
    width: 100%; }
  .order-form table input, .order-form table select {
    width: 100%; }
  .order-form table label {
    margin: 0 auto 8px;
    width: 100%; }
  .intro-image {
    text-align: center; }
  .accordion {
    height: auto; }
  .accordion:hover {
    text-decoration: none; }
  .accordion .featured, .accordion .title {
    display: none; }
  .accordion .content {
    display: block;
    left: auto;
    opacity: 1;
    position: relative;
    top: auto;
    width: 100%; }
  .accordion .panel {
    display: block;
    height: auto;
    padding: 20px;
    position: relative;
    width: 100%; }
  .accordion .panel.first,
  .accordion .panel.second,
  .accordion .panel.third,
  .accordion .panel.fourth {
    left: auto;
background-size: 150% auto; }
  #commitment,
  #about,
  .color-scheme-bridge,
  .color-scheme-dark-wood {
    background-position: center;
background-size: auto 100%; }
  #setup-guide img {
    width: 90%; } }

#hero-intro {
  background: #ebebeb;
}
  #hero-intro .hero {
    display: block; }
    #hero-intro .hero-container {
      background: url("../img/hero/spring-background-small.jpg") no-repeat;
background-size: cover;
      display: block;
      font-size: 0;
      margin: 0 auto;
      max-width: 1440px; }
    #hero-intro .hero-creative, #hero-intro .hero-copy {
      display: block;
      font-size: 1rem;
      position: relative;
      vertical-align: middle; }
    #hero-intro .hero-creative img {
      display: block;
      height: auto;
      margin: 0 auto;
      max-width: 500px;
      width: 100%; }
    #hero-intro .hero-copy {
      font-weight: 600;
      padding: 4em 1rem;
    }
    #hero-intro .hero-content {
      display: block;
      margin: 0 auto;
      max-width: 500px; }
    #hero-intro .hero-desktop {
      display: none !important; }
    #hero-intro .hero-mobile {
      display: block !important; }
  #hero-intro h1 {
    color: #FFF;
    font-size: 2.375em;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding: 0;
    text-align: left;
    text-transform: none; }
  #hero-intro p {
    color: #FFF;
    font-size: 1.23em;
    margin: 0 0 1rem 0;
    padding: 0; }
  #hero-intro img {
    padding: 0; }
  #hero-intro .button {
    background: #7CC41F;
    border-radius: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.32);
    color: #FFF;
    display: block;
    font-weight: 600;
    margin-top: 2rem;
    padding: .8rem 2rem;
    text-align: center;
    text-transform: uppercase; }
  @media screen and (min-width: 1000px) {
    #hero-intro .hero-container {
      background: url("../img/hero/spring-background-large.jpg") no-repeat;
background-size: cover;
      direction: rtl;
      padding-top: 1rem; }
    #hero-intro .hero-creative, #hero-intro .hero-copy {
      display: inline-block;
      direction: ltr;
      width: 50%; }
    #hero-intro .hero-copy {
      padding: 0 1rem 0 2rem; }
    #hero-intro .hero-creative img {
      max-width: none; }
    #hero-intro .hero-desktop {
      display: block !important; }
    #hero-intro .hero-mobile {
      display: none !important; }
    #hero-intro .button {
      display: inline-block; } }

/* --- Consolidated modern layout blocks --- */
/*------------------------------------------------------
               Desktop Menu CSS
  ------------------------------------------------------*/
#desktop-menu {
  background: #2bade3;
  border-bottom: 2px solid #1f9ecc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
align-items: center;
  height: 72px;
  left: 0;
  padding: 0 60px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
  #desktop-menu .nav-branding {
    display: flex;
align-items: center;
    gap: 12px; }
  #desktop-menu .nav-logo {
    display: flex;
align-items: center;
    text-decoration: none; }
  #desktop-menu .nav-logo img {
    margin: 0;
    width: auto;
    /* render the brand logo white on the sky blue header */
    filter: brightness(0) invert(1); }
  #desktop-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0; }
    #desktop-menu ul li {
      margin: 0 0 0 1.15em; }
      #desktop-menu ul li:first-child {
        margin-left: 0; }
      #desktop-menu ul li a {
        font-size: 0.98rem;
        color: #fff;
        display: inline-block;
        font-weight: 600;
        letter-spacing: 0.04em;
        padding: 0.75em 0;
        text-decoration: none; }
        #desktop-menu ul li a:hover {
          color: #0b1d2a; }
        #desktop-menu ul li a.a.desktop-menu-current {
          color: #f96808; }
      #desktop-menu ul li a.nav-primary-cta {
        background: linear-gradient(135deg, #f96808, #ff8f3f);
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(249, 104, 8, 0.22);
        color: #fff;
        padding: 0.7em 1.15em; }
        #desktop-menu ul li a.nav-primary-cta:hover {
          color: #fff;
          transform: translateY(-1px); }
      #desktop-menu ul li a.nav-utility-link {
        color: #0b1d2a; }

.nav-tagline {
  color: #0b1d2a;
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap; }

#mobile-menu .nav-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
flex-direction: column;
align-items: center;
  text-align: center; }
#mobile-menu .nav-logo img {
  margin: 0 auto;
  /* render the brand logo white on the sky blue header */
  filter: brightness(0) invert(1); }
#mobile-menu .nav-tagline {
  margin-top: 6px; }

#my-account {
  background: #fff;
  border-radius: 5px;
  color: #2bade3;
  cursor: pointer;
  float: right;
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 30px;
  margin: 15px 0;
  padding: 0 14px;
  text-transform: uppercase; }
  #my-account:hover {
    background: #eaf7fd; }

#login-form {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  line-height: normal;
  position: fixed;
  right: -1000px;
  top: 72px;
  width: 300px;
  z-index: 10;
transform: scale(0);
transition: right 0s .3s, -webkit-transform .3s;
  transition: transform .3s, right 0s .3s;
  transition: transform .3s, right 0s .3s, -webkit-transform .3s;
}
  #login-form.active {
    right: 76px;
transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
transform: scale(1); }
  #login-form:before {
    background: url("../img/primap.png") no-repeat -375px -127px;
    display: inline-block;
    content: " ";
    height: 9px;
    position: absolute;
    right: 35px;
    top: -8px;
    width: 18px; }
  #login-form .form {
    padding: 20px;
    text-align: left;
    gap: 16px;
    width: 100%; }
    #login-form .form li {
      float: none;
      margin: 0; }
      #login-form .form li label {
        margin: 0 0 6px;
        width: auto; }
      #login-form .form li input[type=text], #login-form .form li input[type=password], #login-form .form li textarea, #login-form .form li select {
        width: 100%; }
      #login-form .form li input[type=submit] {
        margin: 0;
        width: auto;
        align-self: flex-start; }
  #login-form .sprite,
  #login-form .sprite:hover {
    color: #404141; }
  #login-form .icon {
    padding: 20px;
    overflow: hidden; }
  #login-form .icons {
    display: block;
    padding: 20px; }
  #login-form .sprite {
    padding: 10px 0;
    width: 125px; }

.nav-drawer {
  padding: 24px; }

.nav-drawer__eyebrow {
  color: #17807e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  text-transform: uppercase; }

.nav-drawer__title {
  color: #0b1d2a;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 18px; }

.nav-drawer__section + .nav-drawer__section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #e6edf2; }

.nav-drawer__heading {
  color: #5a6d79;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  text-transform: uppercase; }

.nav-drawer__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nav-drawer__grid--services {
  grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nav-drawer__item {
  background: #f7fbfd;
  border: 1px solid #dce8ef;
  border-radius: 12px;
  color: #0b1d2a;
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  min-height: 56px;
  padding: 14px 12px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s; }

.nav-drawer__item:hover {
  border-color: #2bade3;
  box-shadow: 0 14px 28px rgba(43, 173, 227, 0.14);
  color: #0b1d2a;
  transform: translateY(-1px); }

.nav-drawer__item--highlight {
  background: linear-gradient(135deg, #0b1d2a, #173850);
  border-color: #0b1d2a;
  color: #fff; }

.nav-drawer__item--highlight:hover {
  color: #fff; }

.nav-drawer__note {
  color: #5a6d79;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 14px 0 0; }

/*------------------------------------------------------
               Mobile Menu CSS
  ------------------------------------------------------*/
#mobile-menu {
  background: #2bade3;
  border-bottom: 2px solid #1f9ecc;
  color: #fff;
  display: none;
  left: 0;
  height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
box-shadow: 0px -6px 25px 0px rgba(0, 0, 0, 0.75); }

#mobile-menu.hidden {
  top: -60px; }

#mobile-menu img {
  display: inline-block;
  height: 60px;
  margin-left: 10px;
  padding: 0;
  max-width: 40%;
  width: auto; }

#mobile-menu ul {
  float: right;
  line-height: 60px;
  list-style: none;
  padding: 0;
  margin: 0; }

#mobile-menu li {
  float: left;
  padding-right: 10px; }

#mobile-account, #mobile-menu-button {
  cursor: pointer; }

/* Mobile menu layout overrides */
#mobile-menu {
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#mobile-menu .nav-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

#mobile-menu .nav-logo img {
  margin: 0;
  height: 48px;
  width: auto;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

#mobile-menu .nav-tagline {
  margin: 0 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mobile-menu img {
  max-width: 140px;
}

#mobile-menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  float: none;
  margin-left: auto;
  line-height: normal;
}

#mobile-menu li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  float: none;
  padding: 0 0 0 12px;
}

#real-mobile-menu {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  line-height: normal;
  list-style: none;
  padding: 0;
  position: fixed;
  right: -1000px;
  top: 60px;
  width: 320px;
  z-index: 10;
  text-align: center;
transform: scale(0);
transition: right 0s .3s, -webkit-transform .3s;
  transition: transform .3s, right 0s .3s;
  transition: transform .3s, right 0s .3s, -webkit-transform .3s;
}

#real-mobile-menu a {
  color: #000;
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 10px 0; }

#real-mobile-menu li.menu-divider {
  border-top: 1px solid #e3e3e3;
  margin: 8px 20px;
  padding: 0;
  height: 0; }

#real-mobile-menu li.menu-label {
  color: #6c7a86;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 0 0; }

#real-mobile-menu.active {
  right: 10px;
transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
transform: scale(1); }

#real-mobile-menu::before {
  background: url("../img/primap.png") no-repeat -375px -127px;
  display: inline-block;
  content: " ";
  height: 9px;
  position: absolute;
  right: 40px;
  top: -8px;
  width: 18px; }

@media only screen and (max-width: 1023px) {
  #desktop-menu .nav-tagline {
    display: none; }
  #desktop-menu {
    padding: 0 28px; }
  #login-form.active {
    right: 28px; } }

@media only screen and (max-width: 374px) {
  #mobile-menu .nav-tagline {
    display: none; }
  #real-mobile-menu {
    width: calc(100% - 16px); } }

@media only screen and (max-width: 767px) {
  #login-form {
    width: calc(100% - 20px); }
  #login-form::before {
    right: 65px; }
  #login-form.active {
    right: 10px; }
  .nav-drawer__grid,
  .nav-drawer__grid--services {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #desktop-menu {
    display: none; }
  #mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

footer {
  text-align: center; }

footer ul {
  padding: 0 0 30px 0; }

footer li {
  display: inline;
  padding: 0 10px; }

footer li a {
  text-transform: uppercase; }

footer p {
  font-size: 0.9em;
  padding-bottom: 30px; }

footer .facebook {
  background: url("../img/primap.png") no-repeat -132px -517px;
  display: inline-block;
  height: 55px;
  width: 55px; }

footer .twitter {
  background: url("../img/primap.png") no-repeat -259px -517px;
  display: inline-block;
  height: 55px;
  width: 55px; }

.service-page {
  color: #404141; }

.service-hero {
  background: var(--hero-gradient, linear-gradient(135deg, #0b1d2a, #17807e));
  color: #fff;
  padding: 40px 0;
 }
  .service-hero__inner {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
align-items: center;
justify-content: space-between;
    gap: 60px; }
  .service-hero__copy {
    max-width: 520px; }
  .service-hero__eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px; }
  .service-hero__copy h1 {
    font-size: 2.75rem;
    line-height: 1.15;
    margin: 0 0 15px; }
  .service-hero__copy p {
    font-size: 1.1rem;
    margin: 0 0 15px; }
  .service-hero__bullets {
    list-style: none;
    margin: 0 0 20px;
    padding: 0; }
    .service-hero__bullets li {
      margin-bottom: 6px;
      position: relative;
      padding-left: 22px; }
      .service-hero__bullets li:before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: #2bade3;
        font-weight: 700; }
  .service-hero__visual {
flex: 1 1 320px;
    min-height: 240px;
    border-radius: 18px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 60%), rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
    box-shadow: 0 24px 60px rgba(11, 29, 42, 0.35); }
  .service-hero__lead {
flex: 0 0 420px; }
  .service-hero__support {
    font-size: 0.95rem;
    margin-top: 1rem; }

.service-lead {
  background: #f5f8fa;
  padding: 48px 0; }
  .service-lead__inner {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px; }
  .service-lead__primary {
flex: 2 1 560px; }
  .service-lead__secondary {
flex: 1 1 280px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
flex-direction: column; }

.service-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(11, 29, 42, 0.1);
  padding: 24px;
  font-size: 0.95rem; }
  .service-card h3 {
    margin-top: 0;
    font-size: 1.1rem; }

.service-highlights {
  padding: 48px 0;
  background: #fff; }
  .service-highlights__inner {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 30px; }
  .service-highlights h2 {
    text-align: center;
    margin: 0 0 28px; }
  .feature-cards {
    display: -ms-grid;
    display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  .feature-card {
    background: #f7fbfd;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 30px rgba(32, 73, 91, 0.08); }
    .feature-card h3 {
      margin-top: 0;
      font-size: 1.25rem; }

.service-details {
  padding: 48px 0;
  background: #f0f5f8; }
  .service-details__inner {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
  .service-details__primary {
flex: 2 1 560px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(32, 73, 91, 0.08);
    padding: 30px; }
  .service-details__aside {
flex: 1 1 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
flex-direction: column;
    gap: 20px; }


.service-faq {
  padding: 48px 0;
  background: #0b1d2a;
  color: #fff; }
  .service-faq__inner {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 30px; }
  .service-faq__inner h2 {
    text-align: center;
    margin: 0 0 28px; }
  .faq-grid {
    display: -ms-grid;
    display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px; }
  .faq-item {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
    .faq-item h3 {
      margin-top: 0;
      font-size: 1.2rem; }

.lead-form-wrapper {
  background: #fff;
  color: black !important;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(11, 29, 42, 0.15);
  padding: 28px;
  position: relative; }
  .lead-form-wrapper h3 {
    margin-top: 0; }
  .lead-form-intro {
    color: black;
    margin-top: 0;
    font-size: 0.95rem; 
}

.lead-form-grid {
  display: -ms-grid;
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; }
  .lead-form-grid .lead-form-comments {
    grid-column: 1 / -1; }

.lead-form-wrapper.is-compact {
  max-width: 420px;
  margin: 20px auto 0; }

@media only screen and (max-width: 1023px) {
  .service-hero {
    padding: 48px 0 36px; }
  .service-hero__inner {
flex-direction: column;
    text-align: center; }
    .service-hero__lead {
      width: 100%; }
    .service-hero__visual {
      width: 100%; }
  .service-lead__inner {
flex-direction: column; }
  .service-lead__secondary {
    width: 100%; }
  .feature-cards {
grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .faq-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lead-form-grid {
grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lead-form-actions {
flex-direction: column;
align-items: stretch; }
    .lead-form-actions .button {
      width: 100%; }
}

body {
  color: #404141;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  margin: 0;
  width: 100%;
}

a {
  color: #2bade3;
  text-decoration: none; }

a:hover {
  color: #f96808; }

.text-left {
  text-align: left; }

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

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

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

.text-right {
  text-align: right; }

.overlay {
  background: url("../img/overlay2.png");
  left: 0;
  height: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
transition: opacity .3s, height 0s .3s; }

.overlay.active {
  height: 100%;
  opacity: 1; }

.popup {
  background: #fff;
  display: block;
  margin: 50px auto 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: left;
  width: 580px;
  z-index: 30;
  transform: scale(0);
  transition: transform .3s;
  border-radius: 2em;
}

.popup.active {
transform: scale(1); }

.popup h2 {
  background: #2BADE3;
  color: #fff;
  margin-bottom: 10px;
  padding: 10px 0;
  text-align: center; }

.popup h3 {
  color: #f96808;
  font-size: 1.1em;
  font-weight: 600;
  padding-top: 10px;
  text-align: center; }

.popup p {
  padding: 10px 20px; }

.popup .button-1 {
  text-transform: none; }

button,
.button {
  background: #404141;
  border: 1px solid #777;
  border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  outline: 0;
  padding: .8rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
transition: all .4s ease-out; }
  button:hover, button:focus,
  .button:hover,
  .button:focus {
    background: #585858; }
  button:active,
  .button:active {
transform: scale(0.9); }
  button.is-flat,
  .button.is-flat {
    background: inherit;
    border-color: transparent;
box-shadow: none;
    color: #2DABFF; }
    button.is-flat:hover, button.is-flat:focus,
    .button.is-flat:hover,
    .button.is-flat:focus {
      background: rgba(64, 65, 65, 0.1); }
    button.is-flat:active,
    .button.is-flat:active {
      background: rgba(64, 65, 65, 0.15); }


/* Modernized mobile-first grid system */
.grid {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
  width: 100%;
}

/* Mobile-first layout: stacks by default */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.col {
  box-sizing: border-box;
  padding: 0 1rem;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Desktop+ widths (single breakpoint) */
@media (min-width: 768px) {
  .one-one   { flex-basis: 100%; max-width: 100%; }
  .one-two   { flex-basis: 50%;  max-width: 50%; }
  .one-three { flex-basis: 33.333%; max-width: 33.333%; }
  .two-three { flex-basis: 66.666%; max-width: 66.666%; }
  .one-four  { flex-basis: 25%;  max-width: 25%; }
  .three-four{ flex-basis: 75%;  max-width: 75%; }
  .two-five  { flex-basis: 40%;  max-width: 40%; }
  .three-five{ flex-basis: 60%;  max-width: 60%; }
}

/* Optional: keep legacy @suffix classes working, but map them to the same modern behavior.
   This avoids hunting through HTML to remove @palm/@lap/etc immediately.
   They all become: stacked on mobile, fractional on desktop.
*/
@media (min-width: 768px) {
  .one-one\@thumb,
  .one-one\@palm,
  .one-one\@palm-and-up,
  .one-one\@pocket,
  .one-one\@lap,
  .one-one\@lap-and-up,
  .one-one\@portable,
  .one-one\@desk,
  .one-one\@wide,
  .one-one\@retina { flex-basis: 100%; max-width: 100%; }

  .one-two\@thumb,
  .one-two\@palm,
  .one-two\@palm-and-up,
  .one-two\@pocket,
  .one-two\@lap,
  .one-two\@lap-and-up,
  .one-two\@portable,
  .one-two\@desk,
  .one-two\@wide,
  .one-two\@retina { flex-basis: 50%; max-width: 50%; }

  .one-three\@thumb,
  .one-three\@palm,
  .one-three\@palm-and-up,
  .one-three\@pocket,
  .one-three\@lap,
  .one-three\@lap-and-up,
  .one-three\@portable,
  .one-three\@desk,
  .one-three\@wide,
  .one-three\@retina { flex-basis: 33.333%; max-width: 33.333%; }

  .two-three\@thumb,
  .two-three\@palm,
  .two-three\@palm-and-up,
  .two-three\@pocket,
  .two-three\@lap,
  .two-three\@lap-and-up,
  .two-three\@portable,
  .two-three\@desk,
  .two-three\@wide,
  .two-three\@retina { flex-basis: 66.666%; max-width: 66.666%; }

  .one-four\@thumb,
  .one-four\@palm,
  .one-four\@palm-and-up,
  .one-four\@pocket,
  .one-four\@lap,
  .one-four\@lap-and-up,
  .one-four\@portable,
  .one-four\@desk,
  .one-four\@wide,
  .one-four\@retina { flex-basis: 25%; max-width: 25%; }

  .three-four\@thumb,
  .three-four\@palm,
  .three-four\@palm-and-up,
  .three-four\@pocket,
  .three-four\@lap,
  .three-four\@lap-and-up,
  .three-four\@portable,
  .three-four\@desk,
  .three-four\@wide,
  .three-four\@retina { flex-basis: 75%; max-width: 75%; }

  .two-five\@thumb,
  .two-five\@palm,
  .two-five\@palm-and-up,
  .two-five\@pocket,
  .two-five\@lap,
  .two-five\@lap-and-up,
  .two-five\@portable,
  .two-five\@desk,
  .two-five\@wide,
  .two-five\@retina { flex-basis: 40%; max-width: 40%; }

  .three-five\@thumb,
  .three-five\@palm,
  .three-five\@palm-and-up,
  .three-five\@pocket,
  .three-five\@lap,
  .three-five\@lap-and-up,
  .three-five\@portable,
  .three-five\@desk,
  .three-five\@wide,
  .three-five\@retina { flex-basis: 60%; max-width: 60%; }
}

.lead-form-wrapper label {
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.95em;
  padding: 0; }

.lead-form-wrapper .input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-form-wrapper .input-error {
  color: #d11212;
  font-size: 0.9em;
  margin: -4px 0 0;
  padding: 0; }

.lead-form-wrapper .input.is-focus label {
  color: #2d9edf; }

.lead-form-wrapper .input.has-error input[type=text],
.lead-form-wrapper .input.has-error textarea,
.lead-form-wrapper .input.has-error select {
  border-color: #d11212;
  box-shadow: 0 0 0 3px rgba(209, 18, 18, 0.15); }

.input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-error {
  color: #d11212;
  font-size: 0.9em;
  margin: -4px 0 0;
  padding: 0; }

.input.is-focus label {
  color: #2d9edf; }

.input.is-focus input[type=text],
.input.is-focus textarea,
.input.is-focus select {
  border-color: #2d9edf;
  box-shadow: 0 0 0 3px rgba(45, 157, 223, 0.15); }

.input.has-error input[type=text],
.input.has-error textarea,
.input.has-error select {
  border-color: #d11212;
  box-shadow: 0 0 0 3px rgba(209, 18, 18, 0.15); }

label .checkbox {
  cursor: pointer;
  display: inline-block;
  height: 1.1rem;
  margin-right: .5rem;
  position: relative;
  width: 1.1rem; }
  label .checkbox:before {
    border: 1px solid #ccc;
    border-radius: 3px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 100%; }
  label .checkbox:after {
    display: inline-block;
    content: "\2714";
    font-size: 1.7rem;
    left: .1rem;
    position: absolute;
    opacity: 0;
    top: -.8rem;
transform: scale(0);
transform-origin: left bottom;
transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.63, 0.05, 0.43, 1.7);
    transition: transform 0.4s cubic-bezier(0.63, 0.05, 0.43, 1.7), opacity 0.4s ease-out;
    transition: transform 0.4s cubic-bezier(0.63, 0.05, 0.43, 1.7), opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.63, 0.05, 0.43, 1.7); }

label input[type=checkbox] {
  display: table;
  height: 0;
  visibility: hidden;
  width: 0; }

label input[type=checkbox]:checked:checked + .checkbox:after {
  opacity: 1;
transform: scale(1); }

.tab-content {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0; }
  .tab-content.active {
    height: auto;
    overflow: inherit;
    visibility: visible;
    width: auto; }

.modal {
  background: rgba(0, 0, 0, 0.2);
box-sizing: border-box;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
flex-direction: column;
  height: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
transition: height 0s .4s, overflow-y 0s .4s, padding 0s .4s;
  width: 100%;
  z-index: 100; }
  .modal-dialog {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
box-sizing: border-box;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
    cursor: default;
    display: block;
    margin: 0 auto;
    max-width: 768px;
    opacity: 0;
    padding: 2rem;
    position: relative;
transform: scale(0);
transition: opacity .4s ease-out, -webkit-transform .4s ease-out;
    transition: opacity .4s ease-out, transform .4s ease-out;
    transition: opacity .4s ease-out, transform .4s ease-out, -webkit-transform .4s ease-out;
    width: 100%; }
  .modal-icon {
    background: #404141;
    border-radius: 500px;
    color: #fff;
    display: block;
    font-size: 3em;
    height: 6.25rem;
    margin: -5rem auto 1rem auto;
    opacity: 0;
    position: relative;
    text-align: center;
transform: scale(7);
transition: opacity .2s .4s ease-out, -webkit-transform .2s .4s ease-out;
    transition: opacity .2s .4s ease-out, transform .2s .4s ease-out;
    transition: opacity .2s .4s ease-out, transform .2s .4s ease-out, -webkit-transform .2s .4s ease-out;
    width: 6.25rem; }
    .modal-icon * {
      left: 50%;
      position: absolute;
      top: 50%;
transform: translate(-50%, -50%); }
  .modal.active {
    overflow-y: auto;
    padding: 1rem;
    height: 100%;
transition: height 0s 0s, overflow-y 0s 0s, padding 0s 0s; }
    .modal.active .modal-icon {
      opacity: 1;
transform: scale(1); }
    .modal.active .modal-dialog {
      opacity: 1;
transform: scale(1); }
  .modal.is-middle {
justify-content: center; }
  .modal.is-small .modal-dialog {
    max-width: 400px; }
  .modal.is-notification .modal-icon {
    background: #2DABFF; }
  .modal.is-notification .modal-header {
    color: #2DABFF; }
  .modal.is-error .modal-icon {
    background: #D11212; }
  .modal.is-error .modal-header {
    color: #D11212; }
  .modal.is-success .modal-icon {
    background: #5EC900; }
  .modal.is-success .modal-header {
    color: #5EC900; }
  .modal.has-icon .modal-dialog {
    margin-top: 3.5rem; }

.popout {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  text-align: left; }
  .popout-item {
    background: #fff;
box-shadow: -4px 0 5px -2px rgba(0, 0, 0, 0.12), 4px 0 5px -2px rgba(0, 0, 0, 0.12);
    margin: 0 1em;
    padding: 0;
transition: all .2s ease-out; }
    .popout-item:first-of-type {
box-shadow: 0 -2px 5px -2px rgba(0, 0, 0, 0.14), -4px 0 5px -2px rgba(0, 0, 0, 0.12), 4px 0 5px -2px rgba(0, 0, 0, 0.12); }
    .popout-item:last-of-type {
box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.08), -4px 0 5px -2px rgba(0, 0, 0, 0.12), 4px 0 5px -2px rgba(0, 0, 0, 0.12); }
  .popout-title {
    border-bottom: 1px solid #D5D5D5;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 1rem 2rem 1rem 3rem;
    position: relative;
transition: all .2s ease-out; }
    .popout-title:before {
      content: '+';
      color: #2DABFF;
      display: inline-block;
      font-size: 1.7em;
      font-weight: 400;
      left: 1rem;
      position: absolute;
      top: 50%;
transform: translateY(-50%); }
  .popout-body {
    display: block;
    max-height: 0;
    overflow: hidden;
transition: all .2s ease-out; }
  .popout-content {
    display: block;
    padding: 1rem 2rem; }

.popout-item.active {
  border: 1px solid #D5D5D5;
box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, 0.16), 0 6px 10px -1px rgba(0, 0, 0, 0.2), -2px 0 5px 0 rgba(0, 0, 0, 0.12), 5px 0 5px -2px rgba(0, 0, 0, 0.12);
  margin: 1em 0; }
  .popout-item.active .popout-title {
    background: #F2F2F2; }
    .popout-item.active .popout-title:before {
      content: '-'; }
  .popout-item.active .popout-body {
    max-height: 10000px; }

.tooltip {
  cursor: pointer;
  display: inline-block;
  height: .9em;
  font-size: 1rem;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: .9em; }
  .tooltip:before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA5OC4yNyA5OC4yNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTguMjcgOTguMjc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNDkuMTM1LDBDMjEuOTk4LDAsMCwyMS45OTksMCw0OS4xMzVTMjEuOTk4LDk4LjI3LDQ5LjEzNSw5OC4yN2MyNy4xMzYsMCw0OS4xMzQtMjEuOTk5LDQ5LjEzNC00OS4xMzVTNzYuMjcsMCw0OS4xMzUsMHogICAgTTUzLjIzNCw4Mi4wODZjLTEuNTM5LDEuNTIxLTMuNjg0LDIuMjkzLTYuMzY5LDIuMjkzYy0yLjc0NiwwLTQuOTE4LTAuNzU0LTYuNDU2LTIuMjQxYy0xLjU0NS0xLjQ5NS0yLjMyOC0zLjYwNC0yLjMyOC02LjI2OSAgIGMwLTIuNzU0LDAuNzY5LTQuODg3LDIuMjg0LTYuMzM2YzEuNTEtMS40NCwzLjY5Ni0yLjE3Miw2LjUtMi4xNzJjMi43MTQsMCw0Ljg2MSwwLjc0Niw2LjM4NiwyLjIxOSAgIGMxLjUyOCwxLjQ3OSwyLjMwNCwzLjU5NiwyLjMwNCw2LjI4OUM1NS41NTUsNzguNDcyLDU0Ljc3Myw4MC41NjQsNTMuMjM0LDgyLjA4NnogTTY4LjQyNCw0MC4yOTUgICBjLTEuNTcyLDIuNTExLTQuNTY2LDUuMzU0LTguOSw4LjQ1Yy0yLjgxNywyLjA4My00LjYyNywzLjY4NC01LjM1NSw0Ljc0Yy0wLjY4NiwwLjk5NS0xLjAzNCwyLjM0Ni0xLjAzNCw0LjAxNHYxLjk4ICAgYzAsMC44MjgtMC42NzIsMS41LTEuNSwxLjVINDEuMDQ1Yy0wLjgyOCwwLTEuNS0wLjY3Mi0xLjUtMS41di0yLjYyMWMwLTMuMDQxLDAuNjYzLTUuNzMyLDEuOTcyLTggICBjMS4yOTYtMi4yNDQsMy42NjUtNC42MzgsNy4wNDMtNy4xMTZjMy4xMzUtMi4yMzksNS4yMDktNC4wNiw2LjE4My01LjQyMmMwLjkyMy0xLjI5NywxLjM5Mi0yLjc2OCwxLjM5Mi00LjM2OSAgIGMwLTEuNzQyLTAuNjE1LTMuMDI0LTEuODgxLTMuOTJjLTEuMzI5LTAuOTQxLTMuMjQ2LTEuNDE5LTUuNjk4LTEuNDE5Yy00LjI1MiwwLTkuMTczLDEuMzY2LTE0LjYyNCw0LjA2MSAgIGMtMC43MzksMC4zNjYtMS42MzksMC4wNjQtMi4wMDgtMC42NzZsLTQuMzE2LTguNjdjLTAuMzYtMC43MjUtMC4wODItMS42MDQsMC42My0xLjk4OGM2LjY4OS0zLjYxNCwxMy44NjQtNS40NDcsMjEuMzI1LTUuNDQ3ICAgYzYuNDIxLDAsMTEuNjEzLDEuNTc4LDE1LjQzNCw0LjY5YzMuODY0LDMuMTUsNS44MjUsNy40MDIsNS44MjUsMTIuNjM5QzcwLjgyLDM0LjY5Nyw3MC4wMTQsMzcuNzQ5LDY4LjQyNCw0MC4yOTV6IiBmaWxsPSIjMmRhYmZmIi8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
background-size: 100% 100%;
    content: " ";
    display: block;
    height: 100%;
    width: 100%; }
  .tooltip-text {
    background: #404141;
    border-radius: 4px;
    bottom: 100%;
box-sizing: border-box;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    color: #fff;
    display: table;
    font-size: .8em;
    margin: 0 0 .5rem -150px;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    text-align: left;
    width: 300px;
    z-index: 100; }
  .tooltip.active, .tooltip:hover {
    overflow: visible; }
  .tooltip.bottom .tooltip-text {
    bottom: auto;
    margin-bottom: 0;
    margin-top: .5rem;
    top: 100%; }
  .tooltip.left .tooltip-text {
    left: 100%;
    margin-left: -300px; }
  .tooltip.right .tooltip-text {
    left: 0;
    margin-left: 0; }

@font-face {
  font-family: "icons";
  src: url("../icons/icons.eot");
  src: url("../icons/icons.eot?#iefix") format("eot"), url("../icons/icons.woff2") format("woff2"), url("../icons/icons.woff") format("woff"), url("../icons/icons.ttf") format("truetype"), url("../icons/icons.svg#icons") format("svg"); 
}