* {
	margin: 0;
	padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
a:hover,
a:active {
	outline: 0;
}
sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}
#map_canvas img {
	max-width: none;
}
button,
input,
select,
textarea {
	margin: 0;
	font-size: 100%;
	vertical-align: middle;
}
input, textarea {
	background-color: #FAFAFA;
	border: 1px solid #EAEAEA;
	padding: 4px;
}
button {
	line-height: normal;
	padding: 0;
	border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}
input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
body {
	margin: 0;
	font-family: 'Kanit',Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #262626;
	background-color: #fff;
	overflow-x: hidden;
}

a.logo {padding-top: 5px;width: 135px;display: block;text-align: center;margin: 0px auto;margin-top: 0px;margin-top: 10px;}

a {
	color: #5c686d;
	text-decoration: none;
}
a:hover {
	color: #fcc00d;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	line-height: normal;
	color: inherit;
}
h1 {
	font-size: 3.8em;
text-transform: uppercase;
}
h2 {
	font-size: 42px;
text-transform: uppercase;
letter-spacing: 2.6px;
  padding-bottom: 0.3em;
}
h3 {
	font-size: 36px;
padding-bottom: 20px;
}
h4 {
font-size: 20px;
margin: 0 0 20px;
}
h5 {
	font-size: 1.6em;
	text-transform: uppercase;
}
h6 {
	font-size: 14px;
  padding-bottom: 1em;
}
p {margin: 0 0 20px; line-height: 20px;}
ul,
ol {
	margin-left: 0;
	list-style: none;
}
fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}
legend {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: 18px;
	font-size: 19.5px;
	line-height: 36px;
	color: #333;
	border: 0;
}
label,
input,
button,
select,
textarea {
    font-size: 24px;
	line-height: normal;
}
label {
	display: block;
}


#system-message, .reset {
	margin: 10px;
}

#jf-wrapper {
	/* overflow: hidden; */
	position: relative;
}

.wrap {
	clear: both;
	width: 100%;
}

.main {
    margin: 0 auto;
    position: relative;
}

/* HEADER */
#jf-header {
	position: fixed;
	top: 0;
	z-index: 99;
	height: 70px;
	transition: background 0.2s linear 0s;
	width: 100%;
	opacity: 1;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

 #jf-header.transparent {
       opacity: 1;
       /* background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9); */
       -webkit-transition: all 500ms ease-in-out;
       -moz-transition: all 500ms ease-in-out;
       -ms-transition: all 500ms ease-in-out;
       -o-transition: all 500ms ease-in-out;
       transition: all 500ms ease-in-out;
       /* border-bottom: 4px solid #e81a1a; */
}



#jf-header .main {
	padding: 12px 0 0;
	position: relative;
}

#jf-mainnav {
	float: right;
}

#jf-mainnav ul:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

#jf-mainnav ul.menu li {
	cursor: pointer;
	display: block;
	float: left;
	margin-right: 25px;
}

#jf-mainnav ul.menu li a {
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
}

#jf-mainnav a {
      color: #fff;
      display: inline-block;
      /* font-weight: 700; */
      letter-spacing: 1px;
      line-height: 1;
      margin-left: 0.3125em;
      text-transform: uppercase;
      float: left;
      padding: 25px 10px;
}

body.subsite #jf-mainnav a {
      color: #f9f9f9;
      padding: 28px 10px;
      font-size: 12px;
      letter-spacing: .5px;
         -webkit-transition: all 500ms ease-in-out;
       -moz-transition: all 500ms ease-in-out;
       -ms-transition: all 500ms ease-in-out;
       -o-transition: all 500ms ease-in-out;
       transition: all 500ms ease-in-out;
}

body.subsite #jf-mainnav a:hover {
  color: #fcc00d;
         -webkit-transition: all 500ms ease-in-out;
       -moz-transition: all 500ms ease-in-out;
       -ms-transition: all 500ms ease-in-out;
       -o-transition: all 500ms ease-in-out;
       transition: all 500ms ease-in-out;
}

/* jf-home-c */
#jf-home-c {
	background-color: #fff;
	color: #404040;
	font-size: 14px;
}


#home-c-0,
#home-c-1,
#home-c-2,
#home-c-3,
#home-c-4 {
	position: relative;
	display: block;
	/* overflow: hidden; */
	/* height: 90vh; */
}



#jf-content {
	background-color: #fff;
}

#jf-content .main {
	padding: 120px 0 60px;
}

.home #jf-content .main {
	padding: 0;
}


/* FOOTER */
#jf-footer {
   background-color: #febf18;
   padding: 7em 0;
   text-align: left;
   position: relative;
   font-size: 14px;
}

#jf-footer p {
  margin: 0;
}


#jf-footer p.title {
  font-weight: 700;
  text-transform: uppercase;
    letter-spacing: 1px;
}

#jf-footer a {
  color: #333 !important;
  /* font-size: 14px; */
}

#jf-footer h4 {
    font-size: 20px;
    text-transform: uppercase;
      font-weight: 700;
    line-height: normal;
    color: inherit;
}


#home-c-0, #home-c-1 {
    position: relative;
    display: block;
    background-color: #f5f5f5;
}


/* Mobile Menu */
#jf-menu, a.gotomenu {
	display: none;
}


#jf-latest li, #jf-news li, div.k2ItemsBlock ul li.lastItem  {
	margin: 0 10px !important;
}


@media (min-width: 768px) {
  
  #site-nav.is-active {
  height: auto;
  overflow: visible;
  padding-left: 10em;
padding-top: 5em;
padding-bottom: 5em;
}
  
  .form-footer {
  width: 60%;
float: right;
}
  
.bluebox {
position: absolute;
right: 55%;
margin-left: 65px;
background-color: #172027;
color: #fafafa;
padding-left: 5em;
padding-right: 5em;
min-width: 400px;
max-width: 565px;
}
}



@media (max-width: 767px) {
  
#jf-footer a {
    line-height: 45px;
}
  
  #site-nav.is-active {
      height: 100vh;
  overflow: scroll;
  padding-left: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
  
  
  .form-footer {
float: right;
}
  
  .bluebox {
background-color: #172027;
color: #fafafa;
padding-left: 5em;
  padding-right: 5em;
min-width: 400px;
max-width: 565px;
}
  

.colspan2 {
	width: 100% !important;
}

.colspan3 {
	width: 100% !important;
}

#jf-header {
	position: absolute;
	left: 0;
	top: 0;
}


#jf-menu {
	display: block;
	background-color: #fff;
	position: relative;
    z-index: 49;
}

#jf-menu .main {
	padding: 50px 0;
}

#jf-menu ul.menu {
	border-top: 1px solid #404040;
}

#jf-menu ul.menu li {
	border-bottom: 1px solid #404040;
	padding: 5px 0;
}

#jf-menu ul.menu li a {
    color: #404040;
    font-size: 18px;
    text-transform: uppercase;
}

#jf-menu ul.menu li a:hover {
	color: #247D99;
}


#jf-contact h3 {
	font-size: 52px;
}

#jf-footer{
	font-size: 18px;
}

#jf-footer .main-inner1 {
	padding: 135px 0 0;
	bottom: 30px;
}


}




.website_optimierung_sub_box p {
  font-size: 26px;
color: #ffea00;
}


/* MENU */
#nav ul, #nav li {
  margin: 0;
  padding: 0;
}

#nav {
  text-align: center;
}
#nav a {
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
#nav li {
  display: inline-block;
  position: relative;
}
#nav li ul {
  position: absolute;
  left: -9999px;
}
#nav li a {
  display: inline-block;
  padding: 20px;
  font-size: 14px;
font-weight: 700;
  text-transform: uppercase;
  line-height: 30px;
}
#nav li:hover a {
  background-color: #fff;
  color: #414141;
}
#nav li:hover ul {
  left: 0;
  text-align: center;
  width: 100vw;
  position: fixed;
  background-color: #fff;
}
#nav li:hover ul a {
  display: block;
  padding: 30px 30px 0 30px;
}
#nav li:hover ul a:hover {
  color: #b7b7b7;
}

#nav ul li ul {
  width: 100%;
}


.website_optimierung_content.home {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
height: 85vh;
text-align: center;
padding-top: 30vh;
color: #fff;
  position: relative;
}

/* MOUSE */


*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

@media (max-width: 1024px) {
  .mouse_scroll {
display: none;
}
}

@media (min-width: 1025px) {
  .mouse_scroll {
    width: 24px;
    height: 100px;
    margin-bottom: 0;
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translate(-50%, 0);
}
}


.m_scroll_arrows
{
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  margin: 0 0 3px 4px;
  
  width: 16px;
  height: 16px;
}


.one
{
  margin-top: 1px;
}

.one, .two, .three
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
}

.one
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
}

.two
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  margin-top: -6px;
}

.three
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  margin-top: -6px;
}

.mouse
{
height: 42px;
width: 24px;
  border-radius: 14px;
  transform: none;
  border: 2px solid white;
  top: 170px;
}

.wheel
{
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: white;
  position: relative;
  height: 4px;
  width: 4px;
  border: 2px solid #fff;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
}


@-webkit-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel
{
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

/* Mouse ends */


.box h5 {
  font-size: 2em;
font-weight: 700;
color: #ffd400;
  padding: 1em;
}
.box {
	width:90%;
	background:#FFF;
	margin:40px auto;
    text-align:center;
	border: 2px dotted #d7d7d7;
	padding: 3em 1em;
	border-radius: 10px;
  -webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}

.box p  {
  line-height: 26px;
}

.box:hover {
  transform: scale(1.1);
box-shadow: 0 7px 16px #7f7f7f33;
  -webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}


/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

/* BLURRED */


*, *:before, *:after {
  box-sizing: inherit;
}
#blurredbody {
  height: 100%;
  margin: 0;
  font-weight: 400;
  color:#fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
#logo {
  position: absolute;
  top:50px;
  left: 50px;
  z-index: 2100;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: .125em;
  transform: translateY(0);
  transition: all .4s;
  transition-delay: .1s;
}
.menu-on #logo,
.menu-on2 #logo {
  opacity: 0;
  transform: translateY(-20px);
}
#menu-link,
#menu-link2 {
  position: absolute;
  left: 50px;
  top: 50%;
  margin-top: -25px;
  z-index: 2100;
  color: #222;
  text-decoration: none;
  transform: translateY(0);
  transition: all .35s;
}
#menu-link:hover,
#menu-link2:hover {
  color: #222;
}
.menu-on #menu-link,
.menu-on2 #menu-link2 {
  opacity: 0;
  transform: translateY(-20px);
}
.menu-sub {
  font-size: 14px;
  line-height: 1.2;
  display: block;
  opacity: .6;
  letter-spacing: .125em;
  font-weight: 700;
}
.menu-main,
.menu-main2 {
  font-size: 40px;
  line-height: 1.2;
  display: block;
  letter-spacing: .09em;
  font-weight: 700;
}

#bk-wrap {
width: 120%;
height: 100%;
    background-size: auto auto;
background-size: cover;
display: block;
left: -70px;
top: 0;
z-index: 1;
transform: translateX(0) scale(1);
transition: all .5s;
position: absolute;
  background-color: #f4f4f4;
}

#bk-no-blur, #bk-blur, #bk-shadow {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  left:0;
  top:0;
  z-index: 1;
}
#bk-shadow {
  index: 1;
  position: fixed;
}
#bk-blur {
  background: url(../../../images/transportabletank-blurred.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0;
  z-index: 2;
  transition: opacity .4s;
}

.menu-on #bk-wrap,
.menu-on2 #bk-wrap {
  transform:  translateX(200px) scale(1.3);
}
.menu-on #bk-blur,
.menu-on2 #bk-blur {
  opacity: 1;
}


#bk-shadow {
  background: transparent;
  box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, .75);
  z-index: 100;
}
/*.menu-on #bk-shadow  {
   box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, 1);
}*/

#menu-wrap,
#menu-wrap2 {
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: all .3s;
}
#menu-wrap.display,
#menu-wrap2.display {
  display: block;
}
#menu-wrap.visible,
#menu-wrap2.visible {
  opacity: 1;
}
#menu-inner,
#menu-inner2 {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  padding: 0 70px;
}
#menu-title,
#menu-title2 {
  font-weight: 400;
  font-size: 28px;
  padding:30px 8px;
  margin: 0;
  opacity: 0;
  transition: all .3s;
  top:10px;
  transform:   translateY(0);
  position: relative;
}
#menu-title.on,
#menu-title2.on {
  opacity: 1;
  transform:   translateY(-10px);
  color: #222;
}

#close,
#close2 {
  font-weight: 400;
  font-size: 26px;
  color: #222;
  text-decoration: none;
  border: 2px solid #222;
  width: 43px;
  height: 43px;
  text-align: center;
  border-radius: 40px;
  position: absolute;
  left: 20px;
  top:40px;
  opacity: 0;
  transform:   translateY(0);
  transition: all .3s;
  line-height: 1;
  padding: 7px 0 0 3px;
}
#close:hover,
#close2:hover {
  background: rgba(10, 10, 10, .25);
}
#close.on,
#close2.on {
  opacity: 1;
  transform:   translateY(-10px);
}
#menu-cards,
#menu-cards2 {
  background: transparent;
  perspective: 1000px;
}
#menu-cards:before, #menu-cards:after,
#menu-cards2:before, #menu-cards2:after {
    display: table;
    content: " ";
}
 #menu-cards:after,
 #menu-cards2:after  {
  clear: both;
}

.menu-card,
.menu-card2 {
  width: 33.33%;
  padding: 8px;
  float: left;
  position: relative;
  opacity: 0;
  transition: all .3s;
  transform:  scale(.975);
}
.menu-card.on,
.menu-card2.on  {
  opacity: 1;
  transform:  scale(1);
}
.menu-card:hover,
.menu-card2:hover {
  transform: scale(1.025);
  cursor: pointer;
}

.menu-card img,
.menu-card2 img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.menu-card h3,
.menu-card2 h3 {
   font-weight: 700;
  font-size: 17px;
  letter-spacing: .1em;
  margin: 0;
color: #222;
}

@media (max-width: 758px) {
  #menu-inner, #menu-inner2 {
    padding: 0 20px;
  }
  .menu-on #bk-wrap,
   .menu-on2 #bk-wrap {
    transform:  translateX(100px) scale(1.3);
  }
  #menu-title, #menu-title2 {
    padding-left: 55px;
  }
  .menu-card, .menu-card2 {
    padding: 4px;
  }
  .menu-card h3,  .menu-card2 h3  {
    font-size: 14px;
  }
}


.p-110 {
  padding: 11em 0;
}

.p-200 {
  padding: 20em 0;
}

/* Icon Forward */
.hvr-icon-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward:before {
  content: "\f105";
  position: absolute;
  right: 12px;
  padding-left: 10px;
  font-size: 16px;
  font-family: "Font Awesome 5 Free";
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}



.hvr-icon-forward2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward2:before {

  content: "\f054";
  position: absolute;
  right: 1em;
  padding: 10px 0px 0 0;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward2:hover:before, .hvr-icon-forward2:focus:before, .hvr-icon-forward2:active:before {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}


.button:hover {
    cursor: pointer;
    color: #FFF;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -ms-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    display: inline-block;
}

.button {
    color: #FFF;
    padding: 16px 30px 16px 22px;
    min-width: 200px;
    text-align: left;
    margin: 3px 0;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -ms-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    display: inline-block;
    border: 0 none;
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.7px;
    font-size: 14px;
    border-radius: 3px;
}


.button.grey {background-color: #fff;color: #111 !important;/* border: 2px solid #e2e2e2; */}

.button.grey:hover {
    background-color: #f5f5f5;
    color: #111 !important;
}

.button.default {
    font-size: 22px;
}

.button.default:hover {
    background-color: rgba(228,228,228,0.18);
}

.button.darkblue {
    background-color: #1c3577;
}

.button.darkblue:hover {
    background-color: #1c3577;
}

.button.white {
    background-color: #fff;
    color: #444;
}

.button.yellow {background: #febf18 none repeat scroll 0% 0%;display: inline-block;color: #000;text-align: center;/* border-radius: 3px; *//* width: 100%; */}


.button.yellow:hover {
    background: #C2AE52 none repeat scroll 0% 0%;
}

.button.big {
  font-size: 20px;
padding: 18px 44px;
}

.fingerprint-spinner, .fingerprint-spinner * {
      box-sizing: border-box;
    }

    .fingerprint-spinner {
      height: 64px;
      width: 64px;
      padding: 2px;
      overflow: hidden;
      position: relative;
    }

    .fingerprint-spinner .spinner-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid transparent;
      border-top-color: #a3a3a3;
      animation: fingerprint-spinner-animation 1500ms cubic-bezier(0.680, -0.750, 0.265, 1.750) infinite forwards;
      margin: auto;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
    }

    .fingerprint-spinner .spinner-ring:nth-child(1) {
      height: calc(60px / 9 + 0 * 60px / 9);
      width: calc(60px / 9 + 0 * 60px / 9);
      animation-delay: calc(50ms * 1);
    }

    .fingerprint-spinner .spinner-ring:nth-child(2) {
      height: calc(60px / 9 + 1 * 60px / 9);
      width: calc(60px / 9 + 1 * 60px / 9);
      animation-delay: calc(50ms * 2);
    }

    .fingerprint-spinner .spinner-ring:nth-child(3) {
      height: calc(60px / 9 + 2 * 60px / 9);
      width: calc(60px / 9 + 2 * 60px / 9);
      animation-delay: calc(50ms * 3);
    }

    .fingerprint-spinner .spinner-ring:nth-child(4) {
      height: calc(60px / 9 + 3 * 60px / 9);
      width: calc(60px / 9 + 3 * 60px / 9);
      animation-delay: calc(50ms * 4);
    }

    .fingerprint-spinner .spinner-ring:nth-child(5) {
      height: calc(60px / 9 + 4 * 60px / 9);
      width: calc(60px / 9 + 4 * 60px / 9);
      animation-delay: calc(50ms * 5);
    }

    .fingerprint-spinner .spinner-ring:nth-child(6) {
      height: calc(60px / 9 + 5 * 60px / 9);
      width: calc(60px / 9 + 5 * 60px / 9);
      animation-delay: calc(50ms * 6);
    }

    .fingerprint-spinner .spinner-ring:nth-child(7) {
      height: calc(60px / 9 + 6 * 60px / 9);
      width: calc(60px / 9 + 6 * 60px / 9);
      animation-delay: calc(50ms * 7);
    }

    .fingerprint-spinner .spinner-ring:nth-child(8) {
      height: calc(60px / 9 + 7 * 60px / 9);
      width: calc(60px / 9 + 7 * 60px / 9);
      animation-delay: calc(50ms * 8);
    }

    .fingerprint-spinner .spinner-ring:nth-child(9) {
      height: calc(60px / 9 + 8 * 60px / 9);
      width: calc(60px / 9 + 8 * 60px / 9);
      animation-delay: calc(50ms * 9);
    }

    @keyframes fingerprint-spinner-animation {
      100% {
        transform: rotate( 360deg );
      }
    }



div#load_screen {
    background: #fff;
    opacity: .9;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    height: 100vh;
    -webkit-transition: all 7500ms ease-in-out;
    -moz-transition: all 7500ms ease-in-out;
    -ms-transition: all 7500ms ease-in-out;
    -o-transition: all 7500ms ease-in-out;
    transition: all 7500ms ease-in-out;
    overflow: hidden;
}

div#load_screen > div#loading {
    color: #FFF;
    width: 120px;
    height: 24px;
    margin: 300px auto;
    -webkit-transition: all 7500ms ease-in-out;
    -moz-transition: all 7500ms ease-in-out;
    -ms-transition: all 7500ms ease-in-out;
    -o-transition: all 7500ms ease-in-out;
    transition: all 7500ms ease-in-out;
}

.loader{
  position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, 0);
}

div.item-page div.product-details {
  padding-top: 15vh;
}

div.details p.subtitle {
  font-weight: 700;
color: #bcbcbc;
}

div.details .overview {
  margin-bottom: 40px;
}

div.details p.price {
  font-size: 32px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.6px;
padding-bottom: 0.3em;
  padding-top: 1em;
}

div.details-images {
  padding: 0 5vw;
}

/* TABS */


.tab_container {
	width: 100%;
	padding-top: 1em;
}

.tab_container input {
  clear: both;
  padding-top: 10px;
  display: none;
}

.tab_container label {
  height: 25px !important;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  -webkit-transition: all 700ms ease-in-out;
  -moz-transition: all 700ms ease-in-out;
  -ms-transition: all 700ms ease-in-out;
  -o-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
  padding: 20px;
  background: #fff;
  color: #999;
  min-height: 240px;
  border-left: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
}

.tab_container .tab-content p,
.tab_container .tab-content h3,
.tab_container .tab-content ul {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;
}
.tab_container .tab-content h3  {
  text-align: center;
}

.tab_container [id^="tab"]:checked + label {
  background: #fff;
  box-shadow: inset 0 3px #FFF52E;
}

.tab_container [id^="tab"]:checked + label .fa {
  color: #FFD600;
}

label .fa {
  font-size: 16px;
  margin: 0 7px 0 0;
}

/*Media query*/
@media only screen and (max-width: 900px) {
  label span {
    display: none;
  }
  
  .tab_container {
    width: 98%;
  }
}

/*Content Animation*/
@keyframes fadeInScale {
  0% {
  	transform: scale(0.9);
  	opacity: 0;
  }
  
  100% {
  	transform: scale(1);
  	opacity: 1;
  }
}

.no_wrap {
  text-align:center;
  color: #0ce;
}
.link {
  text-align:center;
}


a.smallimage {
max-height: 145px;
overflow: hidden;
float: left;
position: relative;
width: 32.7%;
margin-right: 3px;
min-height: 117px;
margin-top: 2px;
opacity: 0.3;
border-radius: 2px;
}



h6.greyred {
      background-color: #424242;
    padding: 10px;
    margin-bottom: 10px;
    border-left: 3px solid #ff0000;
}

.footer-img {
      font-size: 12px !important;
    line-height: 17px;
    font-weight: 700;
    text-transform: uppercase;
}


/* hero */

.heroEffects {
  height: 100vh;
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
}
.heroEffects .bg {
  height: 100vh;
  position: fixed;
  width: 100%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
  transform: scale(1);
}
.heroEffects .shade {
  opacity: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 3;
  height: 100vh;
  position: fixed;
  width: 100%;
}
.heroEffects .title {
  width: 100%;
}
.heroEffects .title .text {
  z-index: 1;
  width: 100%;
  text-align: left;
  color: White;
  height: 100vh;
 /* background: rgba(0, 0, 0, 0.29); */
  padding-top: 43vh;
}
.heroEffects .arrow {
  position: fixed;
  left: 50%;
  margin-left: -20px;
  bottom: 0;
  width: 40px;
  height: 40px;
  opacity: 1;
}

.heroEffects .centerV {
  display: table;
  height: 100%;
}
.heroEffects .centerV > div {
  display: table-cell;
  vertical-align: middle;
}

.heroEffects h1 {
  margin: 0 auto;
  line-height: 1.5em;
  border-bottom: solid 2px rgb(252, 192, 13);
  letter-spacing: 0.015em;
  display: block;
  color: #eee;
  padding-top: 10px;
}

.heroEffects p {
  /* width: 75vw; */
  margin: 0 auto;
  line-height: 1.5em;
  border-bottom: solid 2px rgb(252, 192, 13);
  letter-spacing: 0.015em;
  display: block;
  color: #eee;
  padding-top: 10px;
}

.heroEffects .content {
  background: #cdcdcd;
  padding: 150px 50px;
}
.heroEffects .content p {
  color: #111;
  font-size: 2em;
  margin-bottom: 50px;
}

.heroEffects .bouncy {
  animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes Weeeeeeeeeee {
  0% {
    transform: translate(0, 0px);
    animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
  }
  11% {
    transform: translate(0, -25px) scaleX(0.8);
    animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
  }
  20% {
    transform: translate(0, 0px) scaleY(0.8);
    animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
  }
  28% {
    transform: translate(0, -10px);
    animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
  }
  36% {
    transform: translate(0, 0px);
    animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
  }
  100% {
    transform: translate(0, 0px);
    animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
  }
}

/* MENU */

#sidemenuhvr .menu {
	position: absolute;
	right: 0;
	top: 0;
	height: 100vh;
	width: 290px;
	z-index: 1000;
	transform: translate3d(100%,0,0);
}

#sidemenuhvr .menu__inner {
	display: flex;
	flex-direction: column;
	padding: 1rem 2rem 1rem 4rem;
	justify-content: center;
	background: #333;
	height: 100%;
	opacity: 0;
}

#sidemenuhvr .menu__button-wrap {
	padding: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	z-index: 10;
	pointer-events: none;
	transform: translate3d(-100%,0,0);
}

#sidemenuhvr .menu__button {
	border: 0;
	padding: 0;
	margin: 0 0 0 auto;
	background: none;
	color: #000;
	transform: translate3d(0,0,0);
	transition: opacity 0.3s, transform 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#sidemenuhvr .menu__button:focus {
	outline: none;
}

#sidemenuhvr .menu__item {
	font-size: 1.5rem;
	margin: 1rem 0;
	display: block;
	opacity: 0;
	color: #fff;
	transform: translate3d(100%,0,0);
	transition: opacity 0.8s, transform 0.8s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#sidemenuhvr .menu:hover .menu__item {
	opacity: 1;
	transform: translate3d(0,0,0);
}

#sidemenuhvr .menu:hover .menu__item:nth-child(2) {
	transition-delay: 0.03s;
}

#sidemenuhvr .menu:hover .menu__item:nth-child(3) {
	transition-delay: 0.06s;
}

#sidemenuhvr .menu:hover .menu__item:nth-child(4) {
	transition-delay: 0.09s;
}

#sidemenuhvr .menu:hover .menu__item:nth-child(5) {
	transition-delay: 0.12s;
}

#sidemenuhvr .menu:hover .menu__button {
	transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
	opacity: 0;
	transform: translate3d(200%,0,0);
}

@media screen and (max-width: 55em) {
	#sidemenuhvr .menu {
		display: none;
	}
}

.home {
  height: 100vh;
}

/* MENU */

/* NAV */


.container:after {
  content: "";
  display: table;
  clear: both;
}


/* 
Full screen background image
*/
.hero {
  width: 100%;
  height: 100%;
  z-index: 999;
}

/*
Blueish tint overlay
*/
.hero:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 
Making sure everything in .hero sits above our :after elements 
*/
.hero * {
  position: relative;
  z-index: 1;
}

#masthead {
  
  position: relative;
  transition: all 0.3s ease;
}

#masthead.is-active {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}


#masthead:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#masthead.is-active:after {
  opacity: 1;
}


.hamburger {
padding: 22px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  float: left;
  font: inherit;
  overflow: visible; 
  outline: none;
  text-transform: none;
  transition: opacity 0.15s;
  -webkit-appearance: none;
  -webkit-transition: all 330ms ease-in-out;
-moz-transition: all 330ms ease-in-out;
-ms-transition: all 330ms ease-in-out;
-o-transition: all 330ms ease-in-out;
transition: all 330ms ease-in-out;
}

.hamburger span {
}

.hamburger:hover {
  -webkit-transition: all 330ms ease-in-out;
-moz-transition: all 330ms ease-in-out;
-ms-transition: all 330ms ease-in-out;
-o-transition: all 330ms ease-in-out;
transition: all 330ms ease-in-out;
}

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative; 
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; 
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
  width: 30px;
  height: 2px;
  background-color: #172027;
  border-radius: 4px;
  position: absolute;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; 
}

#masthead.is-active .hamburger-inner, 
#masthead.is-active .hamburger-inner::before, 
#masthead.is-active .hamburger-inner::after {
    background-color: #172027;
}

.hamburger-inner::before, 
.hamburger-inner::after {
  content: "";
  display: block; 
}

.hamburger-inner::before {
  top: -6px; 
}

.hamburger-inner::after {
  bottom: -6px; 
}


.hamburger--boring .hamburger-inner, 
.hamburger--boring .hamburger-inner::before, 
.hamburger--boring .hamburger-inner::after {
  transition-property: none; 
}

.hamburger--boring.is-active .hamburger-inner {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); 
}

.hamburger--boring.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0; 
}

.hamburger--boring.is-active .hamburger-inner::after {
  bottom: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); 
}

.hamburger-label {
  color: #172027;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-left: 0.3125em;
  text-transform: uppercase;
}

#masthead.is-active .hamburger-label {
  color: #172027;
}

.hamburger-box,
.hamburger-label {
  display: inline-block;
  vertical-align: middle;
}

#site-nav {
  clear: both;
  display: flex;
  flex-direction: column; 
-ms-flex-direction: column; 
  height: 0;
  overflow: hidden;
/*  padding-top: 2.5em; */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
}



#site-nav .col { 
  padding-bottom: 2.5em;
} 

@media screen and (min-width: 550px) {
  #site-nav {
    flex-direction: row;
    flex-wrap: wrap;
-ms-flex-direction: row;
-ms-flex-wrap: wrap;
  }
  
  #site-nav .col {
    flex: 0 0 50%;
-ms-flex: 0 0 50%;
  } 
}

@media screen and (min-width: 768px) {
  #site-nav .col {
    flex: 0 0 33.333333333%;
-ms-flex: 0 0 33.333333333%;
  } 
}

@media screen and (min-width: 960px) {
  #site-nav {
    flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
  }
  
  #site-nav .col {
    flex: 0 0 32%;
-ms-flex: 0 0 32%;
vertical-align:top;
    width: 32%;
    display: inline-block;
    
  } 
  
  #site-nav .col:last-child {
    /* display: flex;
    justify-content: flex-end; */
  }  
}

#site-nav h4 {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 3em;
}

#site-nav ul {
  list-style-type: none;
  margin-top: 1em;
}

#site-nav li {
  margin-bottom: 0.3125em;
}

#site-nav li a {
  color: #172027;
  text-decoration: none;
  transition: color 0.3s ease;
}

#site-nav li a:hover,
#site-nav li a:focus {
  color: #686d6e;
}

#site-nav .social {
  margin: 0;
  overflow: hidden;
}

#site-nav .social li {
  float: left;
  margin: 0 0.3125em;
  width: 32px;
  height: 32px;
}

#site-nav .social li svg {
  display: block;
  fill: #b4b9ba;
  width: 100%;
  height: 100%;
  transition: fill 0.3s ease;
}

#site-nav .social li:hover svg {
  fill: #686d6e;
}

#masthead-search {
  float: right;
  margin-top: 0.625em;
  width: 100%;
  max-width: 14em;
  position: relative;
  -webkit-appearance: none;
}

#masthead-search input {
  background: transparent;
  border: none;
  border-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-radius: 50px;
  outline: none;
  width: 100%;
  padding: 0.75em 1.125em;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
}

#masthead-search button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1em;
  padding: 0;
  position: absolute;
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);
  -webkit-appearance: none;
}

#masthead.is-active #masthead-search button {
  color: #b4b9ba;
}

#masthead.is-active #masthead-search input {
  border-color: #b4b9ba;
}

#masthead-search ::-webkit-input-placeholder {
    color:    #fff;
}

#masthead-search :-moz-placeholder {
   color:    #fff;
   opacity:  1;
}

#masthead-search ::-moz-placeholder {
   color:    #fff;
   opacity:  1;
}

#masthead-search :-ms-input-placeholder {
   color:    #fff;
}

#masthead.is-active #masthead-search ::-webkit-input-placeholder {
    color:    #b4b9ba;
}

#masthead.is-active #masthead-search :-moz-placeholder {
   color:    #b4b9ba;
   opacity:  1;
}

#masthead.is-active #masthead-search ::-moz-placeholder {
   color:    #b4b9ba;
   opacity:  1;
}

#masthead.is-active #masthead-search :-ms-input-placeholder {
   color: #b4b9ba
}

#masthead .col {
  opacity: 0;
}

#masthead.is-active .col {
  transform: translateY(40px);
  transition: opacity 0.3s ease;
  animation: fade-in-stagger 0.8s ease forwards;
}

#masthead.is-active .col:nth-child(1) {
    -webkit-animation-delay: 0;
}

#masthead.is-active .col:nth-child(2) {
    -webkit-animation-delay: 0.1s;
}

#masthead.is-active .col:nth-child(3) {
    -webkit-animation-delay: 0.2s;
}

#masthead.is-active .col:nth-child(4) {
    -webkit-animation-delay: 0.3s;
}

#masthead.is-active .col:nth-child(5) {
    -webkit-animation-delay: 0.4s;
}

@keyframes fade-in-stagger {
  to {
    opacity: 1;
    transform: translateY(0); 
  }
}

.hero * {
  position: relative;
  z-index: 1;
}

#masthead {
  
  position: relative;
  transition: all 0.3s ease;
}

#masthead.is-active {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}


#masthead:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#masthead.is-active:after {
  opacity: 1;
}

/* MENU ENDS */



div.heightfull {
  width: 100%;
height: 100%;
height: 95vh;
max-height: 1280px;
}



#submenu {
position: fixed;
bottom: 5%;
margin: 0px auto;
z-index: 15;
background: #172027;
text-align: center;
display: flex;
  justify-content: center;
width: 90%;
left: 5%;
  -webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}

#submenu div {
text-align: center;
}

#submenu div a {
color: #d2d2d2;
padding: 2em 2em;
text-transform: uppercase;
letter-spacing: 1px;
/* border-right: 1px solid #384753; */
display: block;
    -webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}

#submenu div a:hover {
  background: #28353e;
  color: #ffffff;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#submenu div a:last-child {
  border-right: none;
}

/* fixed stuff */

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}
.cd-container:after {
  content: "";
  display: table;
  clear: both;
}

.has-top-margin {
  /* this class is given - using jQuery - to the .cd-main-content following the .cd-secondary-nav when it becomes fixed */
}
@media only screen and (min-width: 1170px) {
  .has-top-margin {
    -webkit-animation: animate-margin-top 0.3s;
    -moz-animation: animate-margin-top 0.3s;
    animation: animate-margin-top 0.3s;
    margin-top: 70px;
  }
}

@-webkit-keyframes animate-margin-top {
  0% {
    margin-top: 100px;
  }

  100% {
    margin-top: 70px;
  }
}
@-moz-keyframes animate-margin-top {
  0% {
    margin-top: 100px;
  }

  100% {
    margin-top: 70px;
  }
}
@keyframes animate-margin-top {
  0% {
    margin-top: 100px;
  }

  100% {
    margin-top: 70px;
  }
}
/* -------------------------------- 

Navigation

-------------------------------- */
.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #030d18;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 70px;
    background-color: transparent;
    box-shadow: none;
  }
}

#cd-logo {
  float: left;
  margin: 13px 0 0 5%;
}
#cd-logo img {
  display: block;
}
@media only screen and (min-width: 768px) {
  #cd-logo {
    margin: 23px 0 0 5%;
  }
}
@media only screen and (min-width: 1170px) {
  #cd-logo.is-hidden {
    /* assign a position fixed and move outside the viewport (on the left) */
    opacity: 0;
    position: fixed;
    left: -20%;
    margin-left: 0;
    -webkit-transition: left 0.3s, opacity 0.3s;
    -moz-transition: left 0.3s, opacity 0.3s;
    transition: left 0.3s, opacity 0.3s;
  }
  #cd-logo.is-hidden.slide-in {
    /* slide in when the secondary navigation gets fixed */
    left: 5%;
    opacity: 1;
  }
}

.cd-primary-nav {
  /* mobile first - navigation hidden by default, triggered by tap/click on navigation icon */
  float: right;
  margin-right: 5%;
  width: 44px;
  height: 100%;
  background: url("../img/cd-icon-menu.svg") no-repeat center center;
  background-size: 44px 44px;
}
.cd-primary-nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.cd-primary-nav ul.is-visible {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.cd-primary-nav a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  background: #000101;
  border-top: 1px solid #051426;
  color: #f0eee1;
}
@media only screen and (min-width: 768px) {
  .cd-primary-nav {
    /* reset navigation values */
    width: auto;
    height: auto;
    background: none;
  }
  .cd-primary-nav ul {
    position: static;
    width: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 70px;
  }
  .cd-primary-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .cd-primary-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  .cd-primary-nav a {
    display: inline-block;
    height: auto;
    line-height: normal;
    background: transparent;
    padding: .6em 1em;
    border-top: none;
    color: #030d18;
  }
}

/* -------------------------------- 

Intro

-------------------------------- */
#cd-intro {
  position: relative;
  height: 300px;
  background-size: cover;
  z-index: 2;
}
#cd-intro #cd-intro-tagline {
  width: 90%;
  /* max-width: 1170px; */
  margin: 0 auto;
  text-align: center;
  /* padding-top: 120px; */
}
#cd-intro h1 {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 400;
  color: #030d18;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 768px) {
  #cd-intro {
    height: 400px;
  }
  #cd-intro #cd-intro-tagline {
    /* padding-top: 160px; */
  }
  #cd-intro h1 {
    font-size: 32px;
    font-size: 2rem;
  }
}
@media only screen and (min-width: 1170px) {
  #cd-intro {
    height: 600px;
  }
  #cd-intro #cd-intro-tagline {
    /* padding-top: 250px; */
  }
}

.no-touch .cd-btn:hover {
  background-color: #f5484a;
}
@media only screen and (min-width: 1170px) {
  .cd-btn.is-hidden {
    /* assign a position fixed and move outside the viewport (on the right) */
    opacity: 0;
    position: fixed;
    right: -20%;
    top: 0;
    padding: .8em 1.2em;
    margin: 14px 0 0;
    -webkit-transition: right 0.3s, opacity 0.3s;
    -moz-transition: right 0.3s, opacity 0.3s;
    transition: right 0.3s, opacity 0.3s;
  }
  .cd-btn.is-hidden.slide-in {
    /* slide in when the secondary nav gets fixed */
    right: 5%;
    opacity: 1;
  }
}

/* -------------------------------- 

Secondary Fixed Navigation

-------------------------------- */
.cd-secondary-nav {
  position: relative;
  z-index: 3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-secondary-nav ul {
  /* mobile first - secondary navigation hidden by default, triggered by tap/click on .cd-secondary-nav-trigger*/
  position: fixed;
  width: 90%;
  max-width: 400px;
  right: 5%;
  bottom: 20px;
  border-radius: 0.25em;
  background: rgba(3, 13, 24, 0.96);
  visibility: hidden;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
.cd-secondary-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.cd-secondary-nav li a {
  display: block;
  padding: 1.6em;
  border-bottom: 1px solid #092645;
  color: #f0eee1;
}
.cd-secondary-nav li:last-child a {
  border-bottom: none;
}
@media only screen and (min-width: 1170px) {
  .cd-secondary-nav {
    z-index: 1;
    height: 85px; 
    background-color: rgba(3, 13, 24, 0.96);
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
  }
  .cd-secondary-nav nav, .cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {
    height: 100%;
  }
  .cd-secondary-nav ul {
    /* reset navigation values */
    position: static;
    width: auto;
    max-width: 100%;
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    text-align: center;
    background-color: transparent;
  }
  .cd-secondary-nav li {
    display: inline-block;
    margin-left: -4px;
  }
  .cd-secondary-nav li a {
    position: relative;
    text-align: center;
    display: block;
    padding: 58px 40px 0 40px;
    border-bottom: none;
    -webkit-transition: padding 0.2s;
    -moz-transition: padding 0.2s;
    transition: padding 0.2s;
  }
  .cd-secondary-nav li a b {
    text-transform: uppercase;
    font-size: 13px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(240, 238, 225, 0.3);
  }
  .cd-secondary-nav li a span {
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    top: 18px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-image: url(../img/cd-nav-icons.svg);
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .cd-secondary-nav li a:hover b, .cd-secondary-nav li a.active b {
    color: #f0eee1;
  }
  .cd-secondary-nav li:nth-child(1) a span {
    background-position: 0 0;
  }
  .cd-secondary-nav li:nth-child(2) a span {
    background-position: -40px 0;
  }
  .cd-secondary-nav li:nth-child(3) a span {
    background-position: -80px 0;
  }
  .cd-secondary-nav li:nth-child(4) a span {
    background-position: -120px 0;
  }
  .cd-secondary-nav li:nth-child(5) a span {
    background-position: -160px 0;
  }
  .cd-secondary-nav.is-fixed {
position: fixed !important;
bottom: 0 !important;
height: 85px;
width: 100% !important;
left: 0 !important;
    -webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
  }
  .cd-secondary-nav.animate-children {
    /* on Firefox CSS transition/animation fails when parent element changes position attribute*/
    /* so we defined to diffent classes: .is-fixed to change the position value and .is-animated to change childrens' attributes (padding and opacity)*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .cd-secondary-nav.animate-children li a {
    padding: 26px 30px 0 30px;
  }
  .cd-secondary-nav.animate-children li a span {
    opacity: 0;
  }
}

.cd-secondary-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
  background: rgba(3, 13, 24, 0.96);
  border-radius: 0.25em;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}
.cd-secondary-nav-trigger span {
  /* the span element is used to create the menu icon */
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f0eee1;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.cd-secondary-nav-trigger span::before, .cd-secondary-nav-trigger span::after {
  content: '';
  position: absolute;
  background: inherit;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.cd-secondary-nav-trigger span::before {
  right: -10px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.cd-secondary-nav-trigger span::after {
  left: -10px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.cd-secondary-nav-trigger.menu-is-open {
  background: transparent;
}
.cd-secondary-nav-trigger.menu-is-open span {
  background: rgba(240, 238, 225, 0);
  width: 20px;
  height: 2px;
}
.cd-secondary-nav-trigger.menu-is-open span::before, .cd-secondary-nav-trigger.menu-is-open span::after {
  background: #f0eee1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  top: 0;
  left: 0;
}
.cd-secondary-nav-trigger.menu-is-open span::before {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-secondary-nav-trigger.menu-is-open span::after {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
@media only screen and (min-width: 1170px) {
  .cd-secondary-nav-trigger {
    display: none;
  }
}

/* -------------------------------- 

Placeholder Sections

-------------------------------- */
.cd-section {
  margin: 0 auto;
}
.cd-section h2 {
  font-size: 20px;
  font-size: 1.25rem;
  margin-bottom: .6em;
  font-weight: 700;
}
.cd-section p {
  line-height: 1.6;
}
@media only screen and (min-width: 1170px) {
  .cd-section {
    margin: 0 auto;
  }
  .cd-section h2 {
    font-size: 30px;
    font-size: 1.875rem;
  }
}

.website_optimierung_sub_box {
  text-align: center;
padding-top: 20%;
padding-left: 18%;
}

body.subsite .website_optimierung_sub_box {
padding-left: 0 !important;
}


.pbottom-3 {
  padding-bottom: 3em;
}

.pbottom-5 {
  padding-bottom: 5em;
}

.pbottom-7 {
  padding-bottom: 7em;
}

.pbottom-10 {
  padding-bottom: 10em;
}

.ptop-3 {
  padding-top: 3em;
}

.ptop-5 {
  padding-top: 5em;
}

.ptop-7 {
  padding-top: 7em;
}

.ptop-10 {
  padding-top: 10em;
}

.mtop-2 {
  margin-top: 2em;
}

.mbottom-5 {
  margin-bottom: 5em;
}

.mbottom-3 {
  margin-bottom: 3em;
}


.bg-grey-gradient {
   background-color: rgb(244,244,244);
background: -moz-linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4",endColorstr="#ffffff",GradientType=1); 
}



.bluebox p {
  color: #e5e5e5 !important;
}

.imagebox-1 {
  position: absolute;
float: right;
right: 0;
top: 0;
width: 60%;
}

#section4 {
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
background-position: 50% 0%;
background-repeat: no-repeat;
}



.text-bottom {
  font-size: 14px;
}

.text-bottom p {
  color: #889198 !important;
  margin: 0;
}

#submenu_over {
  overflow: hidden;
visibility: hidden;
position: fixed;
height: 70%;
background: #172027e6;
width: 90%;
bottom: 136px;
z-index: 4;
left: 5%;
}

/* Menu footer adsila */


.menu--adsila a {
	color: #dfdfdf;
}

.menu--adsila .menu__item-name {
	font-weight: 700;
	line-height: 1.4;
	padding: 0 0.35em;
	transition: color 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-name::before {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	opacity: 0.3;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-label {
	letter-spacing: 0.05em;
	transform: translate3d(-0.5em,0,0);
	transition: transform 0.5s, color 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-label::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: calc(100% + 0.1em);
	left: 0.05em;
	width: 25%;
	height: 1px;
	opacity: 0.3;
	transform: scale3d(0,1,1);
	transform-origin: 100% 50%;
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item:nth-child(odd) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(odd) .menu__item-label::before {
	background: #ae9833;
}

.menu--adsila .menu__item:nth-child(even) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(even) .menu__item-label::before {
	background: #5562ff;
}

/* Hover */

.menu--adsila .menu__item:nth-child(odd):hover,
.menu--adsila .menu__item:nth-child(odd):focus {
	color: #ae9833;
}

.menu--adsila .menu__item:nth-child(even):hover,
.menu--adsila .menu__item:nth-child(even):focus {
	color: #5562ff;
}

.menu--adsila .menu__item:hover .menu__item-name::before,
.menu--adsila .menu__item:focus .menu__item-name::before,
.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
	transform: scale3d(1,1,1);
}

.menu--adsila .menu__item:hover .menu__item-label,
.menu--adsila .menu__item:focus .menu__item-label {
	transform: translate3d(0,0,0);
}

.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
	transform-origin: 0% 50%;
	transition-timing-function: ease;
}

@media screen and (max-width: 50em) {
	.menu--adsila .menu__item {
		margin: 0 0 2em;
	}
	.menu--adsila .menu__item-label {
		display: block;
		margin: 0.5em 0 0 1em;
	}
}

/* Color schemes */

/* Fade effect */
/* .js body {
	opacity: 0;
	transition: opacity 0.3s;
}

.js body.render {
	opacity: 1;
}
 */
.demo-adsila a {
	text-decoration: none;
	color: #5d93d8;
	color: var(--color-link);
	outline: none;
}

.demo-adsila a:hover,
.demo-adsila a:focus {
	color: #423c2b;
	color: var(--color-link-hover);
	outline: none;
}

.demo-adsila .hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Common styles for the menus */
.menu {
	position: relative;
	z-index: 10;
}

.demo-adsila .menu__item {
	line-height: 1;
	position: relative;
	display: block;
	margin: 1em 0;
	outline: none;
}

.demo-adsila .menu__item-name,
.demo-adsila .menu__item-label {
	position: relative;
	display: inline-block;
}

.demo-adsila .menu__item-label {
	margin: 0 0 0 0.5em;
}

@media screen and (min-width: 50em) {
	.demos {
		display: flex;
		padding-right: 80px;

		justify-self: end;
	}
	.demo {
		display: block;
		width: 17px;
		height: 17px;
		margin: 0 5px 0 0;
		border: 2px solid;
		border-radius: 2px;
	}
	a.demo--current {
		background: currentColor;
	}
	.demo span {
		position: absolute;
		top: -0.2em;
		right: 100%;
		display: none;
		margin: 0 1em 0 0;
	}
	.demo--current span {
		display: block;
	}
}

@media screen and (max-width: 50em) {

	.content {
		height: auto;
		min-height: 0;
	}
	.content--fixed {
		position: relative;
		z-index: 1000;
		display: block;
		padding: 0.85em;
	}
}


/* menu ends */

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

.services-row i.fas {margin-bottom: 25px;}


.width-100 {
  width: 100%;
}

#submenu div a:hover + div.submenu-title {
  opacity: 1;
  -moz-transform: translateY(-184px);
-webkit-transform: translateY(-184px);
-o-transform: translateY(-184px);
-ms-transform: translateY(-184px);
transform: translateY(-184px);
  -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
  background: #1a2934e6;
color: #e6e9ea !important;
}

.submenu-title {
  min-height: 80px;
letter-spacing: 0.5px;
  padding: 30px 50px;
  left: 0;
  width: 100%;
  opacity: 0;
position: absolute;
text-align: center !important;
z-index: -1;
  -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}


/* ---------- MOBIL ----------- */

#mobil-woims {
      background-color: #fff;

     background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#mobil-woims div.mobile-blocks {
      margin: 0;
}

#mobil-woims div.mobile-blocks div.mobile-block {
    background-color: rgb(255, 255, 255);
    color: #585858;
    display: inline-block;
    text-align: center;
      min-height: 120px;
    margin: 3px 2px;
    width: 48%;
  border: 1px solid #ddd;
}

#mobil-woims div.mobile-blocks div.mobile-block-large {
    background-color: #e8e8e8;
    color: #585858;
    display: inline-block;
    text-align: center;
    padding: 0 28px 10px 10px;
      min-height: 140px;
    margin: 0;
    width: 100%;
}

#mobil-woims div.mobile-blocks div.mobile-block:hover {
      background-color: #efeeeb;
  color:#fff;
}


#mobil-woims div.mobile-blocks a {
      color: #585858;
  text-decoration:none;
      padding: 20px 10px;
      display: block;
}

#mobil-woims div.mobile-blocks a:hover {
      color: #fff;
  text-decoration:none;
}


#mobil-woims div.mobile-blocks div.mobile-block i {
      display: block;
    margin: 0px auto;
    font-size: 2.5em;
    padding-top: 10px;
}

#mobil-woims div.mobile-blocks a span {
  font-weight: 700;
padding-top: 20px;
display: inline-block;
}

.ptop-1 {
  padding-top: 1em;
}

.ptop-5 {
  padding-top: 5em;
}

.ptop-10 {
  padding-top: 10em;
}

.pbottom-1 {
  padding-bottom: 1em;
}

.pbottom-5 {
  padding-bottom: 5em;
}

.pbottom-10 {
  padding-bottom: 10em;
}

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


/* MENU */
  
.noSelect {
  user-select: none;
}

div#investormenu {
  /*! position: g; */
  width: 100%;
  height: 70px;
  /*! background: #171717; */
}

#investormenu a {
  text-decoration: none;
  /* font-size: 15px; */
  color: #e2e2e2;
  cursor: hand;
  font-weight: 700;
  padding: 20px;
  width: 100%;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#investormenu nav {
  height: 100%;
  text-align: center;
}

#investormenu nav ul {
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #000;
  height: 100%;
  border-bottom: 2px solid #000000;
}

#investormenu nav ul > li {
  display: inline-block;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: all 0.3s;
  position: relative;
  border-right: 1px solid #3a3a3a;
}

#investormenu nav ul > li:last-child {
  border: none;
}


#investormenu nav ul > li:hover {
  background-color: none;
  cursor: pointer;
  border-bottom: 2px solid #fdc018;
  /* color: #fff; */
}

#investormenu ul li ul {
  display: none;
  white-space: nowrap;
  visibility: hidden;
  z-index: 999999;
  position: absolute;
  top: 70px;
  height: 100%;
width: 120%;
left: -5%;
}
#investormenu ul li ul li {
  background: #3a3a3a;
  width: 100%;
  display: block;
}
#investormenu ul li ul li:hover {
  cursor: pointer;
  border-bottom: 0;
  background: #fdc018;
  /* color: #000; */
}

#investormenu ul li ul li:hover a {
  color: #000; 
}

#investormenu ul li:hover > ul {
  visibility: visible;
  display: block;
  margin-top: -2px;
  min-width: 300px;  
}

#investormenu .nested-submenu {
  position: absolute;
  top: 0;
  left: 150px;
}
  
.mainli {
    margin-top: 2px;
  border-bottom: 2px solid #fff0;
  }
  
  .investor-row h5 {
    font-weight: 700;
margin-bottom: 40px;
    text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
  }
  
  .investor-row span {
    font-weight: 700;
color: #c3c3c3;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-top: 10px;
border-top: 1px solid #e3e3e3;
border-right: 0;
border-left: 0;
    display: block;
    margin-top: 10px;
    font-size: 12px;
  }
  
  .investor-row div.col-sm-4 div  {
    min-height: 180px;
  }
}
  
  @media (max-width: 767px) {
    #investormenu li a {
    text-decoration: none;
color: #222;
text-align: center;
padding: 8px 0;
display: block;
border-bottom: 1px solid #e1e1e1;
  }
    
 .investor-row h5   {
      text-align: center;
font-weight: 700;
text-transform: uppercase;
margin-top: 8%;
    }
    
      .investor-row span {
    font-weight: 700;
color: #c3c3c3;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-top: 10px;
border-top: 1px solid #e3e3e3;
border-right: 0;
border-left: 0;
    display: block;
    margin-top: 10px;
    font-size: 12px;
  }
    
    .investor-row {
      padding: 0 20px;
    }
    
  }

  /* MENU END */


.woims-footer {
background: #222;
    padding: 10px;
    text-align: center;
    color: #bdbdbd;
    font-size: 12px;
	    z-index: 5;
    position: relative;
}

.woims-footer img {
  display: inline-block;
}


/* anim box */

/* ANIM */

.anim-box,
.anim-box:hover,
.anim-box p,
.anim-box:hover p,
.anim-box div,
.anim-box:hover div,
.anim-box i,
.anim-box:hover i,
.anim-box h5,
.anim-box:hover h5 {
      -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
      /*! filter: blur(10px); */
}

.anim-box {
  padding: 7em 2em;
  border-radius: 3px;
  height: 350px;
  position: relative;
  display: block;
/*! background-image: url(../../../images/texture2.jpg); */
  color: #494949;
  background-size: cover;
  background-position: center center;
  background-color: #fff;
  margin-bottom: 3em;
}

.anim-box:hover i {
  font-size: 0px;
}

.anim-box h5 {opacity: 1;color: #fcc00d;/* font-size: 1.5em; */letter-spacing: 1px;text-align: center;}
.anim-box:hover h5 {opacity: 0;}

.anim-box .anim-textbox {
  opacity: 0;
height: 0;
  position: absolute;
  top: 2em;
  width: 90%;
  transform: scale(0.8,0.8);
  display: table;
  height: 100%;
  padding: 30px;
}

.anim-box:hover .anim-textbox {
  opacity: 1;
height: auto;
  transform: scale(1);
  vertical-align: middle;
  height: 80%;
  display: table;
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
}

.anim-over-layer {
   position: absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            padding:40% 10%;
            text-align: center;
            background:rgba(0,0,0,0.6);
            transform: rotateY(90deg);
            transition: all 0.40s ease 0.4s;
  -webkit-transition: all 0.40s ease 0.4s;
}


.anim-box::before{
            content: "";
            position: absolute;
            width: 100%;
            height:100%;
            left:0;
            top:0;
            opacity:1;
            /* border: 3px solid #fcc00d; */
            transform: scale(0.95,0.95);
            transition: all 0.40s ease 0s;
            border-radius: 3px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            /* -webkit-box-sizing: border-box; */
            outline-offset: -10px;
            outline: 5px solid #fcc00d;
        }
.anim-box:hover::before{
            transform: scale(1,1);
            opacity:0;
        }

.anim-box .anim-text {
  display: table-cell;
position: relative;
height: 100%;
vertical-align: middle;
  color: #808080;
}

/* anim ends */

/* TERMEKEK */

div.category-items ul li {
      display: inline-block;
      margin: 6px;
      background: #ffffff;
      /* text-transform: uppercase; */
      color: #c0392b;
      font-weight: 600;
      text-align: center;
      border-radius: 4px;
      -webkit-border-radius: 2px;
      border: 3px solid #ececec;
      -webkit-transition: all 500ms ease-in-out;
      -moz-transition: all 500ms ease-in-out;
      -ms-transition: all 500ms ease-in-out;
      -o-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
}


div.category-items ul li:hover {
  box-shadow: 0px 9px 10px 0px #9494941c;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  border: 3px solid #febf18;
}

a.category-item {
    user-select: none;
    display: block;
    width: 100%;
    color: #ecaf0c;
    cursor: pointer;
    transition-duration: 200ms;
    letter-spacing: .5px;
    margin-top: 18px;
    font-size: 14px;
}

a.category-item p {
      padding: 1em 1em;
    display: block;
  margin:0;
}

a.category-item span.info {
      color: #525252;
  font-size: 1.3em;
}

a.category-item span.name {text-transform:uppercase;padding-bottom: 20px;display: inline-block;font-size: 20px;}

a.category-item img {

    height: auto;
    padding-bottom: 1em;
    display: block;
    text-align: center;
    margin: 0px 25px;
}

/* termek ends */


.headertop-text {
 padding: 17px;
    vertical-align: middle;
    display: block;
    color: #000;
    position: relative;
}

.headertop-text span {
      font-size: 16px;
    top: -5px;
    font-weight: 700;
    line-height: 1;
}

/* default icons */

.icon-default {
  width: 15px;
  height: 15px;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  display: inline-block;
  opacity: 1;
  -webkit-transition: all 700ms ease-in-out;
  -moz-transition: all 700ms ease-in-out;
  margin: 2px;
  background-size: contain !important;
  -ms-transition: all 700ms ease-in-out;
  -o-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
}
.icon-default.icon-phone {
      background: url(/templates/woims/images/icon-phone.svg);
      width: 20px;
      height: 20px;
}
.icon-default.icon-mail {
      background: url(/templates/woims/images/icon-mail.svg);
      width: 22px;
      height: 22px;
}

.icon-default.icon-fb {
      background-image: url(/templates/woims/images/icon-fb.svg);
      width: 20px;
      height: 20px;
}



/* main */

.mainsite-box {background: #e81a1a;}
.mainsite-box a {
     background: #e81a1a;
     display: inline-block;
     padding: 2rem;
     width: 100%;
     height: 100%;
     min-height: 42vh;
     /* overflow: hidden; */
     position: relative;
}

.mainsite-box .bg1 {
        background-image: url(../../../images/bg1.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}
.mainsite-box .bg2 {
        background-image: url(../../../images/bg2.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}
.mainsite-box .bg3 {
        background-image: url(../../../images/bg3.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}
.mainsite-box .bg4 {
      background-image: url(../../../images/bg4.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}

.mainsite-box a h2 {
  color: #fff;
  margin-top: 15vh;
  font-size: 1.3vw;
  text-align: center;
  z-index: 2;
  position: relative;
}

.backgrd {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: .2;
  -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
	}

.mainsite-box a:hover .backgrd {
   opacity: 1;
  -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}


/* elonyok */

.custom.bg-cover {
    background-position: top right;
    background-size: cover;
}

.custom.bg-cover-center{
  background-position: top center;
}

.container-kle:before {
    content: '';
    display: inline-block;
    height: 100%;
    margin-right: -0.32em;
    min-height: inherit;
    vertical-align: middle;
}

.container-kle {
      box-sizing: border-box;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
    z-index: 2;
}

.row-middle {
  padding: 2em 0;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
  height: 100%;
  z-index: 2;
  vertical-align: middle;
  display: inline-block;
    width: 100%;
  /* display: inline-block; */
}

.kle-bganim {
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
}

div .kles1 {
      position: relative;
    min-height: 800px;
    max-width: 100%;
    display: block;
}



.kle-bganim p.title1 span {
      font-weight: 700;
}

.border-left-ylw {
      border-left: 5px solid #febf18;
    padding-left: 2em;
}

@media (min-width:1024px) {
	
	  div.headertext {
  font-size: 4em;
  /* padding: 24px 10%; */
  line-height: normal;
}
  
.kle-bganim  {  
  padding-top: 30vh;
  }
  
  .kle-bganim p.title1 {
    font-size: 3.7em;
    margin-bottom: .5em;
    line-height: 1em;
}
}


@media (max-width:1024px) {
	
	
	  div.headertext {
  font-size: 3em;
  padding: 24px 10%;
  line-height: normal;
}
  
  
 #site-nav ul {
        font-size: 12px;
    font-weight: 700;
  }
  
.heroEffects .bg {
    background-position: center top !important;
}
	
	
	.kle-bganim p.title1 {
    font-size: 2em;
    margin-bottom: .5em;
    line-height: 1em;
}
  
  
  div .kles1 {
    min-height: 600px !important;
    margin: 0 15px;
}
  
  
  .custom.bg-cover {
    background-position: right bottom !important;
    background-size: 700px !important;
    background-repeat: no-repeat !important;
}
  
}

.color-white {
	color: #fff;
}

/* titles */
@media only screen and (min-width: 768px) {
.title1 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 4em;
  line-height: inherit;
  margin-bottom: .5em;
}
.title2 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1em;
  line-height: normal;
}

.title3 {
  font-weight: 700;
    text-transform: uppercase;
    font-size: 2em;
    line-height: normal;
}
.title4 {
  font-weight: 700;
    text-transform: uppercase;
    font-size: 2em;
    line-height: normal;
}

.text-cmp-right {
        padding: 4em;
        margin-left: -100px;
}

.text-cmp-left {
        padding: 4em;
        margin-right: -100px;
        z-index: 1;
        position: relative;
}

}

@media only screen and (max-width: 768px) {
.title1 {
  font-weight: 700;
    text-transform: uppercase;
    font-size: 2em;
    line-height: normal;
}
.title2 {
  font-weight: 700;
    text-transform: uppercase;
        font-size: 10vw;
    line-height: normal;
}

.title3 {
  font-weight: 700;
    text-transform: uppercase;
    font-size: 6vw;
    line-height: normal;
}
.title4 {
  font-weight: 700;
    text-transform: uppercase;
    font-size: 6vw;
    line-height: normal;
}

.text-cmp-right {
        padding: 4em;
}

.text-cmp-left {
        padding: 4em;
        z-index: 1;
        position: relative;
}

}



.bg-yellow {
    background: #ffffff;
    box-shadow: -20px 10px 20px #2121212e;
}

.rng-shadow {
  box-shadow: 20px -19px 0px #EC6100;
}

.bg-dark {
  background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%234e4e4e' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%232d2d2d'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
  color: #fff;
  background-attachment: fixed;
}

.bg-orange {
      background: #ec6100;
    color: #fff;
}

.bg-service {
    background-image: url(../../../images/car-parts.svg);
    background-size: 650px;
    background-repeat: no-repeat;
    background-position: 0 -220px;
}


.bg-gumikerekes {
  background-image: url(../../../images/header-gumikerekes-min.jpg);
}
.bg-lancoskotro {
      background-image: url(../../../images/header-lancos-min.jpg);
}
.bg-homlokrakodo {
  background-image: url(../../../images/header-homlokrakodo-min.jpg);  
}

.bg-csuklosdomper {
   background-image: url(../../../images/header-domper-min.jpg);
}

.bg-anyagmozgatas {
  background-image: url(../../../images/dmker-anyagmozgatas-doosan-min.jpg); 
}

body.subsite .cd-header {
    background-color: black;
    position: fixed;
}

.no-padding {
      padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0;
    padding-top: 0;
}

/* expanding grid */



.expanding-grid {
  position: relative;
  width: 100%;
}
.expanding-grid .links {
  display: block;
  margin: 0 -1em;
  overflow: hidden;
  padding: 1em 0;
}
.expanding-grid .links > li {
  box-sizing: border-box;
  float: left;
  padding: 1em;
}
.expanding-grid .links > li a {
  /* background: orange; */
  color: #fff;
  display: block;
  font-size: 2em;
  line-height: 1;
  padding: 25% 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* border: 4px solid #d25600; */
}
.expanding-grid .links > li a:hover {
  background: #e25d00;
}
.expanding-grid .links > li a.active {
  background: #d25600;
}
.expanding-grid .links > li a.active:after {
  background-color: transparent;
  border-bottom: 0.375em solid #fff;
  border-left: 0.375em solid transparent;
  border-right: 0.375em solid transparent;
  bottom: -0.5em;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -0.375em;
  position: absolute;
  width: 0;
}
@media only screen and (max-width: 39.99em) {
  .expanding-grid .links > li {
    width: 50%;
  }
  .expanding-grid .links > li:nth-of-type(2n+1) {
    clear: left;
  }
}
@media only screen and (min-width: 40em) and (max-width: 59.99em) {
  .expanding-grid .links > li {
    width: 33.3333333333%;
  }
  .expanding-grid .links > li:nth-of-type(3n+1) {
    clear: left;
  }
}
@media only screen and (min-width: 60em) {
  .expanding-grid .links > li {
    width: 25%;
    /* border: 2px solid #222; */
  }
  .expanding-grid .links > li:nth-of-type(4n+1) {
    clear: left;
  }
}
.expanding-grid .spacer {
  background-color: #888;
  clear: both;
  display: block;
  margin: 0 1em;
}
.expanding-grid .expanding-container {
  clear: both;
  display: none;
  overflow: hidden;
  width: 100%;
  box-shadow: 0px 10px 13px 0px #0003;
  margin-bottom: 3em;
}
.expanding-grid .expanding-container.expanded, .expanding-grid .expanding-container:target {
  display: block;
}
.expanding-grid .hentry {
  background: #fff;
  box-sizing: border-box;
  clear: both;
  color: #292929;
  min-height: 5em;
  overflow: hidden;
  padding: 4em;
  width: 100%;
  /* margin-bottom: 3em; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* box-shadow: 0px 10px 10px 10px #0003; */
}
.expanding-grid .hentry .entry-image {
  box-sizing: border-box;
  float: right;
  margin-left: 1em;
  padding: 0.25em 0 0.52em 1em;
  text-align: center;
  width: 50%;
}
.expanding-grid .hentry .entry-title {
  font-size: 3.5em;
  margin-bottom: .5em;
  display: inline-block;
  margin-top: 1em;
}
.expanding-grid .close-button {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent;
  color: #fff;
  display: inline-block;
  height: 20px;
  line-height: 1;
  overflow: hidden;
  padding: 1.5em 2em;
  text-decoration: none;
  text-indent: 5em;
  white-space: nowrap;
  width: 20px;
  will-change: opacity;
  z-index: 5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.expanding-grid .close-button.active {
  transition: opacity 0.2s;
}
.expanding-grid .close-button:hover {
  opacity: 0.5;
}

.img-placeholder {
  /* background: orange; */
  color: #fff;
  font-size: 4em;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.table-bg div.restableDefault {
       padding: 25px; 
     background: #fff;
}

p.subtitle {
      font-size: 22px !important;
    line-height: 28px;
    padding-bottom: .5em;
}

.div.restableOverflowShow {
    overflow: auto !important;
}

.bg-white {
      background: #fff;
}