@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300';
/*
Do not work in the custom.css file! If someone compiles custom.less, everything in that file will be overwritten!

Instead, if you insist on working as if less doesn't exist, you may still use this file like you would a regular CSS file, but please be careful and ask others if you're doing something right or wrong.

The variables to choose from (at least from last updating this):

COLORS

The main site color: var(--main-color);
The site's main dark: var(--main-dark);
The site's main light: var(--main-light);
The site's main preference: var(--main-pref);

The secondary site color: var(--second-color);
The secondary site color dark: var(--second-dark);
The secondary site color light: var(--second-light);
The secondary site color preference: var(--second-pref);

The site's white color: var(--white);
The site's black color: var(--black);

The site's grey color: var(--grey);
The site's grey color dark: var(--grey-dark);
The site's grey color light: var(--grey-light);
The site's grey color preference: var(--grey-pref);

The site's panel color: var(--panel-color);
The site's em color: var(--em-color);
The site's link color: var(--link-color);
The site's link hover color: var(--link-hover);

The site's body color: var(--body-background);

FONT/TYPOGRAPHY
The site's header font: var(--header-font);
The site's body font: var(--body-font);
The site's extra font: var(--extra-font);
The site's general font size: var(--general-font-size); //this will automatically change if you update the backend

GENERAL OPTIONS
The site's max-width: var(--container-width);
}
*/
/* ==================================== General ==================================== */
* {
  box-sizing: border-box;
}
html {
  background-color: var(--main-color);
}
body {
  font-family: var(--body-font);
  background-color: var(--body-background);
}
h1,
h2,
h3,
h4,
h5,
h6,
.uk-article-title,
.uk-panel-box .uk-panel-title {
  font-weight: 700;
  line-height: 1;
  font-family: var(--header-font);
}
h1,
.uk-article-title {
  font-size: 2.4em;
}
h2 {
  font-size: 2em;
}
h3,
.uk-panel-box .uk-panel-title {
  font-size: 1.8em;
}
h4 {
  font-size: 1.6em;
}
h5 {
  font-size: 1.4em;
}
h6 {
  font-size: 1.2em;
}
.uk-article-title {
  color: var(--black);
}
.uk-panel-box {
  background-color: var(--main-color);
  color: var(--panel-color);
}
a {
  transition: .3s;
  color: var(--link-color);
}
a:hover,
a:focus,
a:active {
  color: var(--link-hover);
  text-decoration: underline;
}
em {
  color: var(--black);
}
.uk-container,
.uk-container-center,
.uk-container.uk-container-center {
  max-width: var(--container-width);
}
iframe {
  max-width: 100%;
}
.tm-logo-small > * {
  display: inline-block;
}
.tm-logo-small img {
  max-height: 45px;
}
.background-image {
  padding: 0;
  padding-bottom: 50%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0;
  height: 0;
  display: block;
}
/* ==================================== Header ==================================== */
.tm-headerbar {
  margin-bottom: 0;
  margin-top: 0;
}
.tm-toolbar.uk-clearfix.uk-hidden-small {
  text-align: right;
}
.header-wrap {
  padding: 0;
}
@media screen and (min-width: 768px) {
  .header-wrap {
    padding: 20px;
  }
}
@media screen and (max-width: 767px) {
  body > .uk-sticky-placeholder:nth-child(2) {
    min-height: 49px !important;
  }
}
/* ==================================== Social Icons ==================================== */
.fa:before {
  font-family: fontawesome;
  font-style: normal;
}
.fa.fa-facebook-official:before {
  content: '\f09a';
}
.fa.fa-instagram:before {
  content: '\f16d';
}
.fa.fa-twitter:before {
  content: '\f099';
}
.fa.fa-linkedin:before {
  content: '\f08c';
}
.fa.fa-snapchat:before {
  content: '\f2ad';
}
.fa.fa-youtube:before {
  content: '\f167';
}
/* ==================================== Justified Nav ==================================== */
.uk-sticky-placeholder {
  min-height: 67px;
}
.nav-wrap {
  background: var(--main-color);
  border-top: 2px solid var(--second-color);
  border-bottom: 2px solid var(--second-color);
  z-index: 1001;
}
.nav-wrap.uk-active .uk-navbar-nav > li > a {
  font-size: 18px;
  height: 45px;
  line-height: 45px;
}
.nav-wrap.uk-active .uk-navbar-nav > li > a:after {
  height: 2px;
  top: calc(100% - 9px);
}
.nav-wrap.uk-active .uk-dropdown .uk-nav-navbar > li > a,
.nav-wrap.uk-active .uk-nav-search .uk-nav-navbar > li > a {
  color: var(--white);
  font-size: 16px;
}
.uk-navbar {
  background: none;
}
.tm-navbar {
  background-color: var(--main-color);
  margin-top: 0;
  margin-bottom: 0;
}
.tm-navbar .uk-navbar-nav {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.tm-navbar .uk-navbar-nav > li {
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  position: relative;
}
.tm-navbar .uk-navbar-nav > li > a {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  align-items: center;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  height: 65px;
  line-height: 65px;
  flex-direction: column;
  position: relative;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  font-size: 20px;
  color: var(--white);
  font-family: var(--header-font);
}
@media screen and (min-width: 1220px) {
  .tm-navbar .uk-navbar-nav > li > a {
    font-size: 24px;
  }
}
.tm-navbar .uk-navbar-nav > li > a:hover,
.tm-navbar .uk-navbar-nav > li > a:focus,
.tm-navbar .uk-navbar-nav > li > a:active {
  background-color: var(--second-color);
}
.tm-navbar .uk-navbar-nav > li > a:after {
  background-color: var(--second-dark);
  content: " ";
  height: 3px;
  left: 50%;
  margin: 0 auto;
  max-width: 60px;
  position: absolute;
  top: calc(86%);
  transform: translateX(-50%);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  width: 0;
  z-index: 1002;
}
.tm-navbar .uk-navbar-nav > li.uk-active a {
  background-color: var(--second-color);
  color: var(--white);
}
.tm-navbar .uk-navbar-nav > li:hover > a,
.tm-navbar .uk-navbar-nav > li:focus > a,
.tm-navbar .uk-navbar-nav > li:active > a,
.tm-navbar .uk-navbar-nav > li.uk-open > a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: var(--white);
}
.tm-navbar .uk-navbar-nav > li:hover > a:after,
.tm-navbar .uk-navbar-nav > li:focus > a:after,
.tm-navbar .uk-navbar-nav > li:active > a:after,
.tm-navbar .uk-navbar-nav > li.uk-open > a:after {
  width: 100%;
}
.tm-navbar .uk-navbar-toggle {
  color: var(--link-color);
}
.tm-navbar .uk-navbar-toggle:hover,
.tm-navbar .uk-navbar-toggle:focus,
.tm-navbar .uk-navbar-toggle:active {
  color: var(--link-hover);
}
/* ==================================== Dropdown Nav ==================================== */
.uk-dropdown-navbar,
.uk-dropdown-search {
  background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0;
  border: 2px solid var(--second-color);
  color: var(--white);
}
.uk-dropdown-navbar > li > a,
.uk-dropdown-search > li > a {
  color: var(--white);
  font-size: 18px;
}
.uk-nav-navbar > li > a:hover,
.uk-nav-search > li > a:hover,
.uk-nav-navbar > li > a:focus,
.uk-nav-search > li > a:focus,
.uk-nav-navbar > li > a:active,
.uk-nav-search > li > a:active {
  background: var(--main-color);
  color: var(--white);
  outline: medium none;
}
.uk-dropdown .uk-nav-sub {
  padding-left: 30px;
}
.uk-dropdown .uk-nav-navbar ul a {
  color: var(--second-color);
}
.uk-dropdown .uk-nav-navbar ul a:hover,
.uk-dropdown .uk-nav-navbar ul a:focus,
.uk-dropdown .uk-nav-navbar ul a:active {
  color: var(--white);
}
/* ==================================== Footer ==================================== */
.footer-wrap {
  background-color: var(--main-color);
  color: var(--white);
}
.footer-wrap footer.tm-footer > .uk-grid > .uk-panel {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .footer-wrap footer.tm-footer > .uk-grid > .uk-panel {
    width: 25%;
    float: left;
  }
}
/* ==================================== Offcanvas ==================================== */
#offcanvas .uk-offcanvas-bar {
  background-color: var(--main-color);
  border-right: 2px solid var(--second-color);
}
#offcanvas .uk-offcanvas-bar .uk-panel {
  padding: 15px 20px;
  margin: 0;
  background-color: var(--white);
}
#offcanvas .uk-offcanvas-bar .uk-panel a:not([class]) {
  color: var(--link-color);
  display: inline-block;
  font-size: 18px;
  width: 100%;
}
#offcanvas .uk-offcanvas-bar .uk-panel a:not([class]):hover,
#offcanvas .uk-offcanvas-bar .uk-panel a:not([class]):focus,
#offcanvas .uk-offcanvas-bar .uk-panel a:not([class]):active {
  color: var(--link-hover);
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li.uk-active > a {
  background-color: var(--white);
  color: var(--main-color);
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li.uk-active > a:hover,
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li.uk-active > a:active,
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li.uk-active > a:focus {
  background-color: var(--black);
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > a {
  color: var(--white);
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > a:hover,
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > a:active,
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > a:focus {
  color: var(--main-color);
  background-color: var(--black);
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > .uk-nav-sub {
  padding: 0 0 10px;
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > .uk-nav-sub > li > a {
  color: var(--white);
  padding: 3px 20px;
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas > li > .uk-nav-sub > li > a:hover {
  color: var(--main-color);
  background-color: var(--black);
}
#offcanvas .uk-offcanvas-bar .uk-nav.uk-nav-offcanvas ul a {
  color: var(--white);
  font-size: 15px;
}
.uk-navbar-toggle {
  color: var(--second-color);
}
.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus {
  color: var(--second-dark);
}
/* ==================================== SITE BY TG ==================================== */
#credits {
  width: 100%;
  margin: 0 auto;
}
#credits #siteby {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #credits #siteby {
    float: right;
  }
}
#credits #siteby .sitebyTG {
  background-image: url("https://www.technogoober.com/images/footerbadgesprite.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-color: transparent;
  margin: 0 auto;
  width: 94px;
  height: 72px;
  display: block;
  position: relative;
  transition: 0s;
}
#credits #siteby .sitebyTG:hover {
  background-position: bottom center;
}
/* ==================================== Content ==================================== */
.services-container {
  justify-content: center;
  align-content: center;
  align-items: center;
}
.uk-container.uk-container-center {
  max-width: 1600px;
}
.tm-middle.uk-grid {
  padding: 45px 0;
}
.inner-content > h1 {
  color: var(--white);
}
.btn {
  background-color: var(--main-color);
  border: 1px solid var(--white);
  border-radius: 5px;
  display: inline-block;
  width: auto;
  box-sizing: 2px 2px 3px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.btn > a {
  color: var(--white);
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  padding: 10px 25px;
  text-transform: uppercase;
}
.btn > a:after {
  content: "\F0DA";
  font-family: FontAwesome;
  margin-left: .5em;
}
.btn > a:hover,
.btn > a:focus,
.btn > a:active {
  background: var(--main-light);
  text-decoration: none;
}
.btn:hover,
.btn:focus,
.btn:active {
  background: var(--main-light);
  text-decoration: none;
}
.content-wrap .uk-panel {
  background-color: transparent;
  padding: 20px 0;
}
/* ==================================== Banner/Top-A ==================================== */
.top-a-wrap .content {
  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
}
.top-a-wrap .content .uk-container.uk-container-center {
  color: var(--white);
  height: 400px;
  max-width: 1600px;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 497px) {
  .top-a-wrap .content .uk-container.uk-container-center {
    height: auto;
  }
}
.top-a-wrap .content .uk-container.uk-container-center > .inner-content {
  left: 25px;
  margin: 0 auto;
  max-width: 820px;
  position: absolute;
  right: 25px;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
@media (min-width: 1221px) {
  .top-a-wrap .content .uk-container.uk-container-center > .inner-content {
    left: 35px;
    right: 35px;
  }
}
@media screen and (max-width: 497px) {
  .top-a-wrap .content .uk-container.uk-container-center > .inner-content {
    left: initial;
    padding: 25px 0;
    position: relative;
    right: initial;
    top: initial;
    transform: none;
  }
}
.top-a-wrap .uk-panel {
  background-color: transparent;
  padding: 0;
}
.top-a-wrap .uk-panel .background-image {
  padding-bottom: 0;
  height: auto;
}
.top-a-wrap > .uk-container.uk-container-center {
  max-width: 2400px;
  padding: 0;
}
/* ==================================== Top-B ==================================== */
.top-b-wrap {
  background: var(--black);
}
.top-b-wrap .tm-top-b.uk-grid {
  padding: 45px 0;
}
@media (max-width: 767px) {
  .top-b-wrap .tm-top-b.uk-grid .uk-width-medium-1-3:not(:first-of-type) {
    margin-top: 55px;
  }
}
.top-b-wrap .uk-panel.uk-panel-box.widget_custom_post_widget {
  padding: 0;
}
.top-b-wrap .uk-panel.uk-panel-box.widget_custom_post_widget > div {
  border: 1px solid var(--second-color);
  height: 200px;
  position: relative;
}
.top-b-wrap .inner-content {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 100%;
  transform: translateY(-50%);
}
/* ==================================== Bottom-A ==================================== */
.bottom-a-wrap {
  background: var(--main-color);
}
.bottom-a-wrap section {
  padding: 25px 0;
}
/* ==================================== Bottom-B ==================================== */
.bottom-b-wrap {
  background-color: var(--main-color);
}
.bottom-b-wrap section {
  padding: 25px 0;
}
@media screen and (min-width: 1220px) {
  .bottom-a-wrap section,
  .bottom-b-wrap section {
    padding: 35px 0;
  }
}
/* ==================================== BASIC CSS STYLES ==================================== */