/* -------- main.scss----------- */
/* ------------- _helpers.scss ------------- */
/* -------------  VARIABLES ------------- */
/*sidebar-nav*/
/*tabs*/
/*package*/
/*form*/
/*buttons*/
/*footer*/
/* ------------- FUNCTIONS ------------- */
/* ------------- MIXINS ------------- */
/*@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition:$transition-property $transition-time $method;
  -moz-transition:$transition-property $transition-time $method;
  -ms-transition:$transition-property $transition-time $method;
  -o-transition:$transition-property $transition-time $method;
  transition:$transition-property $transition-time $method;
  }*/
/*@mixin transform($rotate: 90deg, $scale: 1, $skew: 1deg, $translate: 10px) {
  -webkit-transform:rotate($rotate) scale($scale) skew($skew) translate($translate);
  -moz-transform:rotate($rotate) scale($scale) skew($skew) translate($translate);
  -o-transform:rotate($rotate) scale($scale) skew($skew) translate($translate);
  -ms-transform:rotate($rotate) scale($scale) skew($skew) translate($translate);
  transform:rotate($rotate) scale($scale) skew($skew) translate($translate);
  }*/
.bg-cover {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

.bg-contain {
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat; }

/* -------------  PLACEHOLDERS ------------- */
/* ------------- _base.scss ------------- */
/* ------------RESET------------ */
/* Headings */
h1 {
  margin-top: 0; }

h2 {
  font-size: 1.571em; }

/* 22px */
h3 {
  font-size: 1.429em; }

/* 20px */
h4 {
  font-size: 1.286em; }

/* 18px */
h5 {
  font-size: 1.143em; }

/* 16px */
h6 {
  font-size: 1em; }

/* 14px */
h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: .8em; }

img {
  max-width: 100%; }

p {
  margin: 0 0 18px; }

/* ---------- GLOBAL ----------------- */
* {
  box-sizing: border-box; }

/* HTML5 tags */
header, main, section, footer,
aside, nav, article, figure {
  display: block; }

/* ---------------  _typography.scss ----------------- */
/* ------------- _layouts.scss ------------- */
.no-padding {
  padding: 0;
  margin: 0px; }

img {
  max-width: 100%; }

.gap-130px {
  clear: both;
  margin-top: 130px;
  display: block; }

.site_wrapper {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden; }

/*------Home page---*/
.card_hover {
  text-align:center;

  height: 100%;
  background: white;
 box-shadow: 0px 0px 0px grey;
  -webkit-transition:  box-shadow .6s ease-out;
     box-shadow: .8px .9px 3px grey;

}
.card_hover:hover{ 
     box-shadow: 1px 8px 20px grey;
    -webkit-transition:  box-shadow .6s ease-in;
}

.home-page {
  padding-top: 30px; }

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

.home-slogan {
  min-height: 330px;
  text-align: center;
  display: flex;
  align-items: center; }
  .home-slogan h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 40px;
    color: white;
    margin: 0px auto; }

.service-icon-wrapper {
  width: 100%;
  max-height: 264px;
  display: flex;
  align-items: center;
  padding: 70px; }
  .service-icon-wrapper a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0px auto;
    text-decoration: none;
    color: white; }
    .service-icon-wrapper a:hover {
      text-decoration: none;
      color: white; }
    .service-icon-wrapper a img {
      margin: 0px auto;
      clear: both; }
    .service-icon-wrapper a span {
      display: block;
      width: 100%;
      text-align: center;
      clear: both;
      font-family: 'Open Sans', sans-serif;
      font-weight: normal;
      font-size: 19px;
      margin-top: 15px; }

.home-service-bottom-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%; }

.inner-service-button-wrapper .service-icon-wrapper {
  padding: 15px;
  min-height: 160px; }
  .inner-service-button-wrapper .service-icon-wrapper a span {
    font-size: 25px; }
  .inner-service-button-wrapper .service-icon-wrapper a:focus {
    outline: none; }

/*-----inner pages--------*/
.inner-nav-wrapper {
  padding: 15px 0px; }

.service-sub-nav {
  text-align: center;
  /*padding:30px 20px;*/ }

/*-----page_title--------*/
.page_title {
  min-height: 200px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center; }
  .page_title h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 40px;
    padding: 0 30px;
    color: white;
    margin: 0px auto; }

.page_title {
  background: url(../images/header-other.jpg) no-repeat center center;
  background-size: cover !important; }

.page_title.portable-device-repair {
  background: url(../images/header-devices.jpg) no-repeat center center; }

.page_title.business-management-solutions {
  background: url(../images/header-managed.jpg) no-repeat center center; }

.page_title.it-services {
  background: url(../images/header-corporate.jpg) no-repeat center center; }

/* ------------- GRID ------------- */
/* ------------- HEADER ------------- */
/* ------------- FOOTER ------------- */
footer {
  display: block;
  width: 100%;
  height: auto;
  padding: 60px 0px; }
  footer .social-facebook, footer .social-twitter {
    height: 28px;
    display: inline-block;
    width: 28px; }
  footer .social-facebook {
    margin-right: 10px; }

/* ------------- SIDEBAR ------------- */
/*---------_design.scss------*/
body {
  background-color: white;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  color: #555555;
  font-size: 15px; }

h1 {
  color: #555555;
  font-size: 40px;
  font-weight: 100; }

h2 {
  color: #f77d39;
  font-size: 24px;
  font-weight: 500; }

h3 {
  color: #555555;
  font-size: 19px;
  font-weight: 500; }

a {
  color: #f77d39; }
  a:hover {
    color: #f77d39; }

.landing-bg {
  background-image: url("../images/home-bg.jpg");
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #005c9a;
  position: fixed;
  height: 100%;
  width: 100%; }

.service-icon-wrapper-repair-service {
  background: #f77d39; }
  .service-icon-wrapper-repair-service:hover {
    background-color: #ff9600; }

.service-icon-wrapper-cloud-service {
  background: #60b652; }
  .service-icon-wrapper-cloud-service:hover {
    background-color: #68cc57; }

.service-icon-wrapper-corporate-service {
  background: #00619f; }
  .service-icon-wrapper-corporate-service:hover {
    background-color: #0085da; }

.service-sub-nav-for-repair-service {
  background: #f77d39; }

.service-sub-nav-for-cloud-service {
  background: #60b652; }

.service-sub-nav-for-corporate-service {
  background: #00619f; }

footer {
  background-color: #00619f;
  text-align: center;
  color: white;
  font-size: 13px; }
  footer p {
    margin: 15px 0 0 0; }
  footer img {
    display: block;
    margin: 0px auto; }
  footer .developed_by {
    color: #64c32f;
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px; }
  footer .social-facebook {
    background-image: url("../images/icon-social.png");
    background-repeat: no-repeat; }
  footer .social-twitter {
    background-image: url("../images/icon-social.png");
    background-repeat: no-repeat;
    background-position: -35px 0px; }

.is-sticky + .page_title.bg-cover {
  margin-top: -90px; }

.sticky-wrapper {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  /*Firefox*/
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  /*-webkit-transition-delay:initial;
  -webkit-transition-duration:$time;
  -webkit-transition-property:$prop;
  -webkit-transition-timing-function:$ease;*/
  width: 100%; }

.sticky-group {
  background: white;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  /*Firefox*/
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  /*-webkit-transition-delay:initial;
  -webkit-transition-duration:$time;
  -webkit-transition-property:$prop;
  -webkit-transition-timing-function:$ease;*/ }
  .sticky-group .inner-nav-wrapper img {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    /*Firefox*/
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    /*-webkit-transition-delay:initial;
    -webkit-transition-duration:$time;
    -webkit-transition-property:$prop;
    -webkit-transition-timing-function:$ease;*/ }
  .sticky-group .service-icon-wrapper {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    /*Firefox*/
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    /*-webkit-transition-delay:initial;
    -webkit-transition-duration:$time;
    -webkit-transition-property:$prop;
    -webkit-transition-timing-function:$ease;*/ }
    .sticky-group .service-icon-wrapper img {
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      /*Firefox*/
      -o-transition: all 0.25s ease-in-out;
      -ms-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
      /*-webkit-transition-delay:initial;
      -webkit-transition-duration:$time;
      -webkit-transition-property:$prop;
      -webkit-transition-timing-function:$ease;*/ }

.is-sticky {
  /*margin-bottom:40px;*/ }
  .is-sticky .sticky-group {
    z-index: 999 !important; }
    .is-sticky .sticky-group .inner-nav-wrapper {
      padding: 3px 0; }
      .is-sticky .sticky-group .inner-nav-wrapper nav {
        margin-top: 6px; }
      .is-sticky .sticky-group .inner-nav-wrapper img {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8); }
    .is-sticky .sticky-group .service-icon-wrapper {
      padding: 5px;
      height: 50px;
      min-height: 50px; }
      .is-sticky .sticky-group .service-icon-wrapper span {
        display: none; }
      .is-sticky .sticky-group .service-icon-wrapper img {
        -webkit-transform: scale(0.4);
        -moz-transform: scale(0.4);
        -ms-transform: scale(0.4);
        transform: scale(0.4); }

.home-nav {
  text-align: center;
  margin-top: 15px; }
  .home-nav ul {
    padding: 0;
    margin: 0; }
    .home-nav ul li {
      display: inline-block;
      list-style: none; }
      .home-nav ul li a {
        color: white;
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 17px;
        padding: 0px 20px; }
      .home-nav ul li:first-child a {
        padding-left: 0; }
      .home-nav ul li:last-child a {
        padding-right: 0; }

/*---inner nav-----*/
.inner-nav-wrapper nav {
  margin-top: 15px;
  text-align: right; }
  .inner-nav-wrapper nav ul {
    padding: 0;
    margin: 0; }
    .inner-nav-wrapper nav ul li {
      display: inline-block;
      list-style: none; }
      .inner-nav-wrapper nav ul li a {
        color: #273036;
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 17px;
        padding: 0px 30px; }
        .inner-nav-wrapper nav ul li a:hover, .inner-nav-wrapper nav ul li a:focus {
          background: none;
          text-decoration: underline; }
      .inner-nav-wrapper nav ul li:first-child a {
        padding-left: 0; }
      .inner-nav-wrapper nav ul li:last-child a {
        padding-right: 0; }

.service-sub-nav {
  display: none; }
  .service-sub-nav ul {
    padding: 0;
    margin: 0; }
    .service-sub-nav ul li {
      display: inline;
      list-style: none;
      line-height: 2.2em; }
      .service-sub-nav ul li a {
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 15px;
        color: white;
        text-decoration: none;
        padding: 30px 40px;
        display: inline-block; }
  .service-sub-nav.active {
    display: block; }
  .service-sub-nav.service-sub-nav-for-repair-service ul li a:hover {
    background: #ff9600; }
  .service-sub-nav.service-sub-nav-for-cloud-service ul li a:hover {
    background: #68cc57; }
  .service-sub-nav.service-sub-nav-for-corporate-service ul li a:hover {
    background: #0085da; }

.is-sticky .service-sub-nav ul li a {
  padding: 10px 40px; }

.is-sticky .sticky-group .inner-nav-wrapper nav {
  margin-top: 12px; }

.service-sub-nav-wrapper ul.nav {
  text-align: center;
  padding: 35px 0; }

.is-sticky .sticky-group .service-sub-nav-wrapper ul.nav {
  padding: 10px 0; }

.green-bar {
  background: #60b652; }

.blue-bar {
  background: #00619f; }

.orange-bar {
  background: #f77d39; }

.service-sub-nav-wrapper .nav > li {
  display: inline-block; }

.service-sub-nav-wrapper .nav > li > a {
  display: inline-block;
  color: #fff;
  font-size: 17px;
  padding: 0px 30px; }

.service-sub-nav-wrapper .nav > li > a:hover,
.service-sub-nav-wrapper .nav > li > a:focus {
  background: none;
  text-decoration: underline; }

.is-sticky .sticky-group .service-sub-nav-wrapper .nav > li > a {
  font-size: 15px;
  padding: 5px 20px; }

.mobile-only-menu {
  display: none;
  margin-top: 25px;
  margin-bottom: 15px; }

.mobile-only-menu .nav > li > a {
  padding: 4px 15px; }

.mobile-only-menu .nav > li > a:hover,
.mobile-only-menu .nav > li > a:focus {
  background: none;
  text-decoration: underline; }

.btn-submit {
  background-color: #ff7000;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 20px;
  color: white;
  padding: 15px 10px;
  border: 1px solid #ff7000; }
  .btn-submit:hover, .btn-submit:focus, .btn-submit:active {
    background-color: rgba(255, 112, 0, 0.9);
    border: 1px solid #ff7000;
    color: white; }

.form-control {
  background-color: #e1e2e3;
  padding: 15px;
  border: 1px solid #e1e2e3;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  height: auto;
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .form-control::-webkit-input-placeholder {
    color: #666666;
    font-style: oblique; }
  .form-control:-moz-placeholder {
    color: #666666;
    font-style: oblique; }
  .form-control::-moz-placeholder {
    color: #666666;
    font-style: oblique; }
  .form-control:-ms-input-placeholder {
    color: #666666;
    font-style: oblique; }

.radio input[type="radio"] {
  display: none; }
.radio input[type="radio"] + label {
  background-image: url("../images/radio-bg.png");
  background-repeat: no-repeat;
  background-position: 0 -26px;
  line-height: 1em;
  padding-left: 25px; }
.radio input[type="radio"]:checked + label {
  background-position: 0 0px; }

select, select.form-control {
  background-image: url("../images/select-arrow-down.png");
  background-repeat: no-repeat;
  background-position: right center;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  border: none;
  padding: 0px 15px;
  min-height: 60px; }
  select option, select.form-control option {
    padding: 19px; }
  select:focus, select.form-control:focus {
    border: none;
    box-shadow: unset; }

.singup-form {
  background: #e1e2e3;
  padding: 20px;
  font-size: 17px; }
  .singup-form h2 {
    text-align: center;
    font-size: 30px; }
  .singup-form p {
    text-align: center; }
  .singup-form .form-control {
    background-color: white; }
  .singup-form .input-ticket, .singup-form .input-name {
    background-image: url("../images/sign-in-icon.png");
    background-repeat: no-repeat;
    height: 60px;
    padding-left: 70px; }
  .singup-form .input-name {
    background-position: 0 -69px; }

/* ------------- _components.scss ------------- */
.sidebar-nav ul {
  display: block;
  padding: 0px;
  margin: 0px; }
  .sidebar-nav ul li {
    list-style: none;
    display: block; }
    .sidebar-nav ul li a {
      display: block;
      padding: 12px 20px;
      text-align: right;
      color: #FFFFFF;
      background-color: #00619f;
      font-family: 'Open Sans', sans-serif;
      font-weight: normal; }
      .sidebar-nav ul li a:hover {
        text-decoration: none;
        background-color: #004381; }
    .sidebar-nav ul li.active a {
      background-color: #f77d39; }

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
	  
	  
/* Hexagons */
#hexGrid {
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  padding: 0.866% 0;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
}

#hexGrid:after {
  content: "";
  display: block;
  clear: both;
}

.hex {
  position: relative;
  list-style-type: none;
  float: left;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */
  transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}

.hex * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */
}

.hexIn {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  transform: skewY(-30deg) rotate(60deg);
}


/*** HEX CONTENT **********************************************************************/

.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
}

.hex h1,
.hex p {
  margin: 0;
  width: 102%;
  left: -1%;  /* prevent line on the right where background doesn't cover image */
  padding: 5%;
  box-sizing: border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  transition: transform .2s ease-out, opacity .3s ease-out;
}

.hex h1 {
  bottom: 50%;
  padding-top: 50%;
  font-size: 1.5em;
  z-index: 1;
  transform: translateY(-100%) translatez(-1px);
}

.hex h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}

.hex p {
  top: 50%;
  padding-bottom: 50%;
  transform: translateY(100%) translatez(-1px);
}


/*** HOVER EFFECT  **********************************************************************/

.hexIn:hover h1, .hexIn:focus h1, .hexIn:hover p, .hexIn:focus p {
  transform: translateY(0%) translatez(-1px);
}


/*** SPACING AND SIZING *****************************************************************/

@media (min-width:1201px) {  /* <- 2-3  hexagons per row */
  .hex {
    width: 32.666%;    /* = (100-2) / 3 */
    padding-bottom: 37.720%;    /* =  width / sin(60) */
  }
  .hex:nth-child(5n+1),
  .hex:nth-child(5n+2) {
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  .hex:nth-child(5n+3),
  .hex:nth-child(5n+4),
  .hex:nth-child(5n+5) {
    margin-top: -8.564%;
    margin-bottom: -8.564%;
  }
  .hex:nth-child(5n+2),
  .hex:nth-child(5n+4) {
    margin-right: 1%;
    margin-left: 1%;
  }
  .hex:nth-child(5n+1) {
    margin-left: 0.5%;
  }
  .hex:nth-child(5n+3),
  .hex:nth-child(5n+6) {
    clear: left;
  }
}

@media (max-width: 1200px) {  /* <- 1-2  hexagons per row */
  .hex {
    width: 49.5%;    /* = (100-1) / 2 */
    padding-bottom: 57.158%;    /* =  width / sin(60) */
  }
  .hex:nth-child(3n+1) {
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  .hex:nth-child(3n+2),
  .hex:nth-child(3n+3) {
    margin-top: -13.423%;
    margin-bottom: -13.423%;
  }
  .hex:nth-child(3n+1) {
    margin-left: 0.5%
  }
  .hex:nth-child(3n+3) {
    margin-left: 1%;
  }
  .hex:nth-child(3n+2),
  .hex:nth-child(3n+4) {
    clear: left;
  }
}

@media (max-width: 400px) {
  #hexGrid {
    font-size: 13px;
  }
}

/* End Hexagons */
/* fork on github button */
#fork{
  font-family: 'Raleway', sans-serif;
  position:fixed;
  top:0;
  left:0;
  color:#000;
  text-decoration:none;
  border:1px solid #000;
  padding:.5em .7em;
  margin:1%;
  transition: color .5s;
  overflow:hidden;
}
#fork:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 130%; height: 100%;
  background: #000;
  z-index: -1;
  transform-origin:0 0 ;
  transform:translateX(-100%) skewX(-45deg);
  transition: transform .5s;
}
#fork:hover {
  color: #fff;
}
#fork:hover:before {
  transform: translateX(0) skewX(-45deg);
}

.tab_buttons {
  display: block;
  border-bottom: 1px solid #00619f;
  padding-bottom: 3px;
  clear: both;
  margin-bottom: 5px;
  width: 100%;
  height: auto; }
  .tab_buttons ul {
    padding: 0px;
    margin: 0px; }
    .tab_buttons ul li {
      display: inline-block;
      list-style: none; }
      .tab_buttons ul li a {
        padding: 15px 65px;
        display: block;
        background-color: #00619f;
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 18px;
        color: #FFFFFF;
        text-transform: uppercase;
        text-decoration: none; }
        .tab_buttons ul li a:focus {
          outline: none; }
      .tab_buttons ul li.active a {
        background-color: #f77d39; }

.package {
  width: 100%;
  margin-bottom: 20px;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  /*Firefox*/
  -o-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  transition: all 0.25s ease;
  /*-webkit-transition-delay:initial;
  -webkit-transition-duration:$time;
  -webkit-transition-property:$prop;
  -webkit-transition-timing-function:$ease;*/ }
  .package:hover {
    -webkit-transform: scale(1.15, 1.07);
    -moz-transform: scale(1.15, 1.07);
    -ms-transform: scale(1.15, 1.07);
    transform: scale(1.15, 1.07); }
  .package .package-info {
    background-color: #555555;
    color: #FFFFFF;
    text-align: center;
    padding: 30px 10px; }
    .package .package-info h2 {
      font-size: 25px;
      margin: 0px auto;
      color: #FFFFFF; }
    .package .package-info .price {
      font-size: 50px;
      display: block;
      width: 100%;
      font-weight: 600;
      padding: 20px 0px; }
      .package .package-info .price span {
        font-size: 14px;
        display: block; }
  .package .package-signup {
    font-size: 20px;
    text-transform: uppercase;
    background-color: #ff7000;
    text-align: center; }
    .package .package-signup:hover {
      background-color: #ff9600; }
    .package .package-signup a {
      display: block;
      color: #FFFFFF;
      padding: 10px 5px;
      text-decoration: none; }
  .package .package-details {
    background-color: #555555;
    color: #FFFFFF;
    overflow: hidden;
    height: auto;
    min-height: 615px; }
    .package .package-details .mobile-details-button {
      display: none;
      text-align: center;
      text-transform: uppercase;
      margin: 0px auto;
      padding: 10px;
      cursor: pointer; }
    .package .package-details p {
      margin-bottom: 10px;
      color: #FFFFFF;
      padding: 15px;
      text-align: center;
      border-bottom: 1px solid #747474; }
      .package .package-details p:last-child {
        border-bottom: none; }
  .package.package-one .package-info {
    background-color: #2eaeff; }
  .package.package-two .package-info {
    background-color: #0085da; }
  .package.package-three .package-info {
    background-color: #0075c0; }
  .package.package-four .package-info {
    background-color: #00619f; }
  .package.package-recommended {
    position: relative; }
    .package.package-recommended .package-signup {
      background-color: #60b652; }
      .package.package-recommended .package-signup:hover {
        background-color: #68cc57; }
    .package.package-recommended .package-recommended-label {
      position: absolute;
      margin: 0px auto;
      margin-top: -50px;
      width: 90%;
      padding: 20px 0;
      left: 0;
      right: 0;
      z-index: 9;
      background-color: #60b652;
      color: #FFFFFF;
      font-size: 16px;
      text-align: center;
      text-transform: uppercase; }

.button-style, .button-orange, .button-blue, .button-green {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  /*Firefox*/
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  /*-webkit-transition-delay:initial;
  -webkit-transition-duration:$time;
  -webkit-transition-property:$prop;
  -webkit-transition-timing-function:$ease;*/
  display: block;
  padding: 15px;
  text-align: center;
  background-color: #ff7000;
  color: white;
  font-size: 23px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }
  .button-style:hover, .button-orange:hover, .button-blue:hover, .button-green:hover {
    background-color: #ff9600;
    color: white;
    text-decoration: none; }
  .button-style.button-big, .button-big.button-orange, .button-big.button-blue, .button-big.button-green {
    font-size: 30px;
    padding: 20px 15px; }

.button-blue {
  background-color: #00619f; }
  .button-blue:hover {
    background-color: #0085da; }

.button-green {
  background-color: #60b652; }
  .button-green:hover {
    background-color: #68cc57; }

/*device-icons*/
.device-icon-wrapper {
  display: flex;
  align-items: center; }
  .device-icon-wrapper .dicon-holder {
    margin: 3px auto;
    margin-left: 5px;
    text-align: center; }
    .device-icon-wrapper .dicon-holder .dicon-sm, .device-icon-wrapper .dicon-holder .dicon-lg {
      display: block;
      clear: both;
      text-align: center;
      margin: 0px auto;
      margin-bottom: 5px; }

.dicon-sm {
  background-image: url(../images/device-icon-sm.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  min-height: 86px;
  display: inline-block; }
  .dicon-sm.dicon-iphone {
    width: 26px;
    background-position: 0px 0px; }
  .dicon-sm.dicon-ipod {
    width: 22px;
    background-position: -104px 0px; }
  .dicon-sm.dicon-ipad {
    width: 51px;
    background-position: -195px 0px; }
  .dicon-sm.dicon-laptop {
    width: 104px;
    background-position: -314px 0px; }
  .dicon-sm.dicon-desktop {
    width: 101px;
    background-position: -486px 0px; }

.dicon-lg {
  background-image: url(../images/device-icon-lg.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  min-height: 122px;
  display: inline-block; }
  .dicon-lg.dicon-iphone {
    width: 37px;
    background-position: 0px 0px; }
  .dicon-lg.dicon-ipod {
    width: 31px;
    background-position: -148px 0px; }
  .dicon-lg.dicon-ipad {
    width: 72px;
    background-position: -278px 0px; }
  .dicon-lg.dicon-laptop {
    width: 148px;
    background-position: -448px 0px; }
  .dicon-lg.dicon-desktop {
    width: 143px;
    background-position: -694px 0px; }

/* ------------- _pages.scss ------------- */
/* ------------- _queries.scss ------------- */
/* ------------- QUERIES ------------- */
/* Large Devices, Desktops */
/**SMALLER THAN 1200*******************************/
@media only screen and (max-width: 1200px) {
  .inner-service-button-wrapper .service-icon-wrapper a span {
    font-size: 1.9vw; } }
@media only screen and (max-width: 1199px) {
  .package .package-details {
    min-height: 750px; } }
/**SMALLER THAN 1100*******************************/
/* TABLETS */
/**SMALLER THAN 1026*******************************/
/**SMALLER THAN 992*******************************/
@media only screen and (max-width: 992px) {
  .service-sub-nav-wrapper .nav > li > a {
    font-size: 15px;
    padding: 0px 20px; } }
@media only screen and (max-width: 991px) {
  .package .package-details {
    min-height: 976px; } }
/* iPad portrait */
/* iPad landscape */
/* PHONES */
/**SMALLER THAN 767*******************************/
@media only screen and (max-width: 767px) {
  .landing-bg {
    position: relative; }

  .home-service-bottom-wrapper {
    position: relative; }

  .inner-nav-wrapper nav {
    text-align: center; }

  .sidebar-nav ul li a {
    text-align: center; }

  .package:hover {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }
  .package .package-details {
    min-height: unset; }
    .package .package-details .text {
      display: none; }
    .package .package-details + .package-signup {
      display: none; }
    .package .package-details .mobile-details-button {
      display: block; }
      .package .package-details .mobile-details-button .closed::after, .package .package-details .mobile-details-button .opened::after {
        display: inline-block;
        width: 0px;
        height: 0px;
        border-width: 8px;
        border-color: #ff7000 transparent transparent transparent;
        border-style: solid;
        content: '';
        position: relative;
        top: 5px;
        margin-left: 5px; }
      .package .package-details .mobile-details-button .opened::after {
        border-color: transparent transparent #ff7000 transparent;
        top: 0px; }
  .package.package-recommended .package-recommended-label {
    position: relative;
    margin-bottom: -15px;
    margin-top: 20px; }

  .tab_buttons ul {
    display: flex;
    align-items: center; }
    .tab_buttons ul li {
      width: 46%;
      margin: 5px;
      flex: 1; }
      .tab_buttons ul li a {
        padding: 15px;
        text-align: center; }

  .service-sub-nav-wrapper {
    display: none; }

  .service-icon-wrapper {
    display: block;
    max-height: unset; }

  .mobile-only-menu {
    display: block; }

  .inner-service-button-wrapper .service-icon-wrapper a span {
    font-size: 25px; }

  .inner-service-button-wrapper .service-icon-wrapper {
    padding: 20px 0 15px; }

  .inner-nav-wrapper nav ul li a {
    padding: 10px 15px 0 !important; }

  .service-icon-wrapper-repair-service:hover {
    background-color: #f77d39; }

  .service-icon-wrapper-cloud-service:hover {
    background: #60b652; }

  .service-icon-wrapper-corporate-service:hover {
    background: #00619f; } }
/**SMALLER THAN 550*******************************/
/* Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .inner-service-button-wrapper .service-icon-wrapper a span {
    font-size: 19px; } }
/* Extra Small Devices, Phones */
/* IE */

/*# sourceMappingURL=style.css.map */


/*-----------------------
  Zest - Owen Richards
---------------------- */
.service-sub-nav-wrapper .nav > li > a {
    padding: 35px 30px;
}
.service-sub-nav-wrapper ul.nav,
.is-sticky .sticky-group .service-sub-nav-wrapper ul.nav {
    padding: 0px 0;
}
.is-sticky .sticky-group .service-sub-nav-wrapper .nav > li > a {
    font-size: 15px;
    padding: 15px 20px;
}
.service-sub-nav-wrapper .nav > li > a:hover, 
.service-sub-nav-wrapper .nav > li > a:focus {
    text-decoration: none;
}
.service-sub-nav-wrapper .nav.green-bar > li > a:hover {
    background: #68cc57;
}
.service-sub-nav-wrapper .nav.orange-bar > li > a:hover {
    background: #ff9600;
}
.service-sub-nav-wrapper .nav.blue-bar > li > a:hover {
    background: #0085da;
}

@media only screen and (max-width: 1200px) {
    .service-sub-nav-wrapper .nav > li > a {
        padding: 25px 20px;
        font-size: 15px;
    }
}


@media only screen and (max-width: 993px) {
    .service-sub-nav-wrapper .nav > li > a {
        padding: 15px 10px;
        font-size: 13px;
    }
    .is-sticky .sticky-group .service-sub-nav-wrapper .nav > li > a {
        font-size: 12px;
        padding: 13px 8px;
    }
}