:root {
  --mc: #292929;
  --mff: 'Roboto', sans-serif;
  --sff: 'Roboto Condensed', sans-serif;
  --bg: #123F56;
  --active: #00E5FF;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,body {
  height: 100%;
  min-height: 100%;
  margin: 0;
}
body {
	font-size: 1em;
  line-height: 1.4;
  color: var(--mc);
	font-family: var(--mff);
}

#wrapper {
  background-color: var(--bg);
}

a {
  transition: color .4s ease;
}
a:hover {
  text-decoration: none;
}
a:focus {
  outline: none;
}

/* OVERWRITES */
.uk-container {
  max-width: 1280px;
}

.uk-table-divider > :first-child > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > tr:not(:first-child) {
	border-top: 1px solid #575859;
}

/* STYLE */
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

#header .fixed {
  height: 100px;
  transition: all .6s;
  z-index: 1000;
}
#header .fixed.moved {
  background: rgba(0,0,0,.8);
}

#header .logo {
  padding-top: 18px;
  margin: 0 auto;
}

.bottomnav {
  position: fixed;
  bottom: 0;
  left:0;
  width: 100%;
  height: 60px;
  z-index:200;
  background: #fff;
}
.bottomnav .toggletrigger {
  position: absolute;
  top: -30px;
  right: 0;
  width: 30px;
  height: 30px;
  color: #fff;
  text-align: center;
  padding-top: 6px;
}
.bottomnav ul {
  margin:0;
  padding: 0 10px;
  list-style: none;
  background: #fff;
  height: 100%;
}

.triggermobmenu {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
}

.mobmenu > div {
  width: 100%;
}
.mobmenu a {
  padding: 10px 0;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #000025;
}

.hero {
  background: url(../img/hero-bg.jpg) center no-repeat;
  height: 100vh;
  width: 100%;
}
.hero .uk-container {
  padding: 0;
}

.hero-block {
  width:100%;
  height: 100vh;
  background: url(../img/hero-block.jpg) top left no-repeat;
  margin: 0;
}

.hero-block p {
  color: #fff;
  font-size: 50px;
  font-weight: 900;
  padding: 120px 20px 10px 45px;
}

.hero-block .ml2 > span {
  display: block;
  word-break: break-word;
}
.hero-block .ml2 .letter {
  display: inline-block;
  line-height: 1em;
}

.hero-block .mouse {
  padding: 0 0 0 45px;
  color: #fff;
}
.hero-block .mouse span {
  color: var(--active);
  font-family: var(--sff);
  font-size: 12px;
  font-weight: 700;
  position: relative;
  width: 100%;
  border-top: 2px solid #fff;
  padding-top: 3px;
  margin-left: 12px;
  margin-top: 11px;
}

.module {
  margin-bottom: 30px;
}
.module h3 {
  color: #fff;
  font-size: 48px;
  font-weight: 900;
  text-align: center;
  line-height: 2.5rem;
}
.module h3 span {
  color: #00E5FF;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  display: block;
}

.module h3 > a {
  color: #fff;
}
.module h3 > a:hover {
  color: var(--active);
}

.slider-wrapper .uk-panel, .grid1-wrapper .uk-panel {
  height: 474px;
}
.slider-wrapper .uk-panel .layer, .grid1-wrapper .uk-panel .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.slider-wrapper .uk-panel .layer.layer1 {
  z-index: 10;
  text-align: center;
  overflow: hidden;
}
.slider-wrapper .uk-panel div > img {
  transition: all .6s;
}
.slider-wrapper .uk-panel:hover div > img {
  transform: scale(1.3);
}
.slider-wrapper .uk-panel .layer.layer2, .grid1-wrapper .uk-panel .layer.layer2 {
	background: rgb(8, 39, 55);
  background: linear-gradient(0deg, rgb(8, 39, 55) 0%, rgb(8, 39, 55) 50%, rgba(0,212,255,0) 100%);
  border: 1px solid #275268;
	z-index: 11;
}
.slider-wrapper .uk-panel .layer3, .grid1-wrapper .uk-panel .layer3 {
  z-index: 12;
}
.broker-info *, .grid1-wrapper .uk-panel article * {
  text-align: center;
}
.broker-info figure, .grid1-wrapper .uk-panel article figure {
  margin: 0;
}
.grid1-wrapper .uk-panel article figure, .payment-item figure {
  padding: 10px;
}
.broker-info figure + a, .grid1-wrapper .uk-panel article figure + a {
  color:#fff;
  font-size: 18px;
  transition: all .6s;
}
.broker-info figure + a:hover, .grid1-wrapper .uk-panel article figure + a:hover {
  color: var(--active);
}
.broker-info span:first-of-type {
  font-size: 18px;
  font-weight: 700;
  color: var(--active);
}
.broker-info span:last-of-type {
  font-size: 18px;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
}
.broker-info span.label {
  font-size: 18px;
  font-weight: 700;
  color: var(--active);
  margin-top: 10px;
}
.broker-info span.value {
  font-size: 18px;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}
.broker-info .brokeaction, .grid1-wrapper .uk-panel article .brokeaction {
  margin: 20px 0 10px;
}
.broker-info .brokeaction a, .grid1-wrapper .uk-panel article .brokeaction a, .popup-wrapper a {
  display: inline-block;
  padding: 8px 0;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  width: 114px;
  background: #fff;
  color: #123F56;
  transition: all .6s;
}
.popup-wrapper a {
  width: auto;
  padding: 8px 40px;
}
.broker-info .brokeaction a:last-of-type, .popup-wrapper a.cta {
  background: #007208;
  color: #fff;
}
.broker-info .brokeaction a:hover, .grid1-wrapper .uk-panel .brokeaction a:hover, .popup-wrapper a.cta:hover {
  background: var(--active);
  color: #fff;
}
.popup-wrapper p {
  font-size: 12px;
  color: #c4bfbf;
}
.broker-info .onelineinfo {
  color: var(--active);
  font-family: var(--sff);
}
.broker-info .onelineinfosmall {
  color: var(--active);
  font-family: var(--sff);
  margin-bottom: 10px;
  text-align: center;
  min-height: 23px;
  line-height: 23px;
}

.slider-prev, .slider-next {
  position: absolute;
  top: -116px;
  right: 0;
  padding: 5px 0;
}
.slider-prev > svg, .slider-next > svg {
  display: none;
}
.slider-prev {
  right: 55px;
}

.grid1-wrapper .uk-panel {
  margin-bottom: 10px;
}
.grid1-wrapper .uk-panel .layer3 {
  height: 100%;
}
.grid1-wrapper .uk-panel article figure + a {
  margin: 0 auto 15px;
}
.grid1-wrapper .uk-panel article span.label {
  font-size: 18px;
  font-weight: 700;
  color: var(--active);
}
.grid1-wrapper .uk-panel article span.value {
  font-size: 18px;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.grid2-wrapper article {
  position: relative;
  border: 1px solid #275268;
  margin-bottom: 10px;
}
.grid2-wrapper article.side {
  height: 150px;
  min-height: 150px;
  transition: all .6s;
}
.grid2-wrapper article figure {
  margin: 0;
  overflow: hidden;
}
.grid2-wrapper article figure img {
  transition: all .6s;
}
.grid2-wrapper article:hover figure img {
  transform: scale(1.3);
}
.grid2-wrapper article > div.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(8, 39, 55);
  background: linear-gradient(0deg, rgb(8, 39, 55) 0%, rgb(8, 39, 55) 10%, rgba(0,212,255,0) 100%);
  z-index: 11;
}
.grid2-wrapper article h2 {
  position: absolute;
  margin: 0;
  padding: 0 10px;
  width: 80%;
  bottom: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  z-index: 12;
}
.grid2-wrapper article h2 a {
  color: #fff;
  transition: all .6s;
}
.grid2-wrapper article h2 a:hover {
  color: var(--active);
}
.grid2-wrapper article .info {
  position: absolute;
  margin: 0;
  padding: 0 10px;
  width: 100%;
  bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--active);
  z-index: 12;
}

.module.banners li {
  text-align: center;
}

.middle_wrapper {
  padding-top: 100px;
}
.middle_wrapper > .uk-container {
  padding-top: 50px;
}

.component_wrapper {
  padding-bottom: 40px;
}

.blog h2, .blog-broker h2, .item-page h2 {
  margin: 0;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
}
.blog .category-desc, .blog-broker .category-desc {
  color: var(--active);
}

.blog .broker-item, .blog-broker .broker-item {
  background: #082737;
  border: 1px solid #275268;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.broker-item h3 {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  color: var(--active);
  margin: 0 0 10px 0;
}
.broker-extra > div {
  width: 100%;
  background: #8B8B8B1A;
  min-height: 35px;
}
.broker-extra > div:nth-child(odd) {
  background: transparent;
}
.broker-extra span {
  font-family: var(--sff);
  font-weight: 300;
  color:#fff;
  display: block;
  width: 50%;
  padding: 0 5px;
}
.broker-extra span:last-child {
  font-weight: 700;
  font-size: 18px;
}

.broker-extra.broker-extra2 span {
  font-family: var(--sff);
  font-weight: 300;
  font-size: 16px;
  width: 100%;
  text-align: center;
}

.item-page-broker > h2 {
  margin: 0 0 50px 0;
}
.item-page-broker h2 a {
  color:#fff;
  font-size: 36px;
  text-transform: uppercase;
}
.item-page-broker h2 a:hover {
  color:var(--active);
}

.item-page h1, .item-page-broker h1 {
  color:#fff;
  font-size: 80px;
  margin: 0 0 40px 0;
  line-height: 5rem;
}
.item-page h1 {
  margin: 20px 0;
}

.item-page figure:first-of-type {
  margin-top: 0;
}

.item-page-broker .leftcol figure {
  margin: 0;
  text-align: center;
}
.item-page-broker .leftcol figure + a {
  font-size: 18px;
  color: #fff;
  text-align: center;
}

.item-page-broker .leftcol figure + a:hover {
  color: var(--active);
}

.item-page-broker .rightcol h2, .item-page-broker .rightcol h3 {
  font-size: 36px;
  font-weight: 900;
  color: var(--active);
}
.item-page p, .item-page-broker .rightcol p {
  color: #fff;
}
.article-body *:not(h3)
{
	color:#fff;
}
.article-body a
{
	color:var(--active);
}
.article-body a:hover {
	color:#fff;
}
.article-body table {
	width:100% !important;
	height: auto !important;
}
.item-page-broker .rightcol .article-body p:first-of-type {
  font-family: var(--sff);
  font-size: 19px;
}

.item-page .article-body ul, .item-page-broker .article-body ul {
  margin: 10px 0;
  padding: 0 0 0 15px;
}
.item-page .article-body ul li, .item-page-broker .article-body ul li {
  color: #fff;
}

.blog .item {
  padding: 10px;
  transition: all .6s;
}
.blog .item:nth-child(even) {
  background:rgba(8,39,55,.2);
}
.blog .item:hover {
  background:rgba(8,39,55,.4);
}

.blog-item figure {
  overflow: hidden;
}
.blog-item figure img {
  transition: all .6s;
}
.blog .item:hover figure img {
  transform: scale(1.2);
}
.blog-item h2 a {
  color: #fff;
}
.blog-item h2 a:hover {
  color:var(--active);
}
.blog-item p {
  color: #fff;
}
.blog-item p a {
  color: var(--active);
  position: relative;
  overflow: hidden;
  display: inline-block;
  top: 5px;
}
.blog-item p a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--active);
  transform: translateX(-110%);
  transition: all .6s;
  overflow: hidden;
}
.blog-item p a:hover {
  color: var(--active);
}
.blog-item p a:hover::after {
  transform: translateX(0);
}

#index {
  margin-top: 60px;
  padding: 20px;
  background: #082737;
}
#index nav a {
  color: var(--active);
  font-family: var(--sff);
  margin-bottom: 5px;
  transition: all .6s;
}
#index nav a:hover, #index nav a.uk-active {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

.bannergroup {
  text-align: center;
}
.banneritem {
  margin-bottom: 10px;
}

.uk-pagination span {
	border: 1px solid #fff;
	border-radius: 50%;
	color: #fff;
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
  line-height: 29px;
  transition: all .6s;
}
.uk-pagination .uk-active span, .uk-pagination span:hover {
  background: #fff;
  color: var(--bg);
}
.uk-pagination .uk-disabled span {
  border-color: #999;
}


#footer > .uk-container {
  margin-bottom: 60px;
}

#footer .logo {
  margin: 0 auto;
}

#footer .copyright {
  color: var(--active);
}
#footer .devby a {
  color: var(--active);
  transition: all .6s;
}
#footer .devby a:hover {
  color: #fff;
}

a.readmore {
	color:var(--active);
}
a.readmore:hover {
	color:#fff;
}

.related-articles h3 {
  color: #fff;
}
.related-articles .uk-heading-bullet::before {
	border-color: var(--active);
}
.relateditems a {
  color: var(--active) !important;
  font-weight: bold;
}
.relateditems a:hover {
  color: #fff !important;
}

.mod-languages {
  padding: 10px 0;
  text-align: center;
}
.mod-languages a {
  padding: 0;
  font-weight: bold;
  color: #000025;
  display: inline-block;
  text-transform: uppercase;
}

@media only screen and (min-width : 30em) { /* >= 480 (Phones landscape) */

  

}

@media only screen and (min-width : 48em) { /* >= 768 (Tablets portrait) */

  .hero .uk-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  #header .logo {
    margin: 0 auto 0 0;
  }

  #header .uk-navbar-item, #header .uk-navbar-nav > li > a, #header .uk-navbar-toggle {
    min-height: 20px;
    font-size: 1rem;
    padding: 52px 20px 0;
  }
  
  #header .uk-navbar {
    margin-left: 65px;
  }
  #header .uk-navbar-nav {
    margin-top: -10px;
  }
  #header .uk-navbar-nav > li > a {
    color: #fff;
    font-family: var(--sff);
    font-weight: 700;
    position: relative;
  }
  #header .uk-navbar-nav > li.uk-active > a, #header .uk-navbar-nav > li:hover > a, #header .uk-navbar-nav > li > a:focus {
    color: #fff;
    outline: 0;
  }
  #header .uk-navbar-nav > li > a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 4px;
    background: var(--active);
    bottom: -2px;
    left: 20px;
    transition: all .6s;
  }
  #header .uk-navbar-nav > li.uk-active > a::after, #header .uk-navbar-nav > li:hover > a::after {
    width: 27px;
  }
  
  #header .socials {
    margin-top: 40px;
  }
  #header .socials a {
    color: #fff;
    padding: 0 10px;
    transition: all .6s;
  }
  #header .socials a:hover {
    color: var(--active);
  }

  .hero-block {
    max-width: 400px;
    margin: 0 auto;
  }

  .module h3 {
    font-size: 66px;
  }

  .grid2-wrapper article {
    height:100%;
  }

  .grid2-wrapper article h2 {
    width: 70%;
    font-size: 30px;
  }

  .blog-item figure {
    margin:0;
  }

  #footer {
    background: #052739;
  }

  #footer > .uk-container {
    margin-bottom: 0;
  }

  #footer .logo {
    margin: 0;
  }

  #footer .uk-navbar-item, #footer .uk-navbar-nav > li > a, #footer .uk-navbar-toggle {
    min-height: 20px;
    font-size: 1rem;
    padding: 0 10px;
  }
  
  #footer .uk-navbar-nav > li > a {
    color: #fff;
    font-family: var(--sff);
    font-weight: 700;
    position: relative;
  }
  #footer .uk-navbar-nav > li.uk-active > a, #footer .uk-navbar-nav > li:hover > a, #footer .uk-navbar-nav > li > a:focus {
    color: #fff;
    outline: 0;
  }
  #footer .uk-navbar-nav > li > a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 4px;
    background: var(--active);
    bottom: -2px;
    left: 10px;
    transition: all .6s;
  }
  #footer .uk-navbar-nav > li.uk-active > a::after, #footer .uk-navbar-nav > li:hover > a::after {
    width: 27px;
  }

}

@media only screen and (min-width : 60em) { /* >= 960 (Desktops & tablets landscape) */

  

  #header .logo {
    margin: 0;
  }
  #header nav {
    display: block;
  }

  .mod-languages {
    padding: 41px 0 0 20px;
  }
  .mod-languages a {
    font-weight: bold;
    color: #fff;
    transition: all .6s;
    display: inline-block;
    text-transform: uppercase;
  }
  .mod-languages a:hover {
    font-weight: bold;
    color: var(--active);
  }

  .hero-block {
    max-width: calc(870px - 205px);
    max-height: 586px;
    margin: 0 auto 0 205px;
  }

  .hero-block  p {
    font-size: 70px;
    padding: 170px 10px 10px 80px;
  }
  .hero-block .mouse {
    padding: 0 0 0 80px;
  }

  .grid2-wrapper article h2 {
    font-size: 20px;
  }

  #footer .uk-navbar-nav > li > a {
    padding: 0 20px;
  }
  #footer .uk-navbar-nav > li > a::after {
    left: 20px;
  }

  #footer .uk-navbar-nav > li:first-child > a {
    padding: 0 20px 0 80px;
  }
  #footer .uk-navbar-nav > li:first-child > a::after {
    left: 80px;
  }

  #footer .devby {
    text-align: right;
  }

  :root #ccc[slideout] #ccc-module {
    max-width: 325px;
  }

}

@media only screen and (min-width : 75em) { /* >= 1200 (Large Desktops) */

  .grid2-wrapper article:not(.side) h2 {
    font-size: 40px;
  }

  .broker-item .uk-margin-medium-bottom {
    margin-bottom: 0 !important;
  }

  .blog h2, .blog-broker h2, .item-page h2 {
    font-size: 36px;
  }

}