/*******************************/
/* layout page, layout classes */
/*******************************/
html, body { margin:0 0 0 0; padding:0 0 0 0; background-color:#FFFFFF; }
.container, .frame-layout-0 { width:100%; max-width:1000px; margin: 0 auto; padding: 0 1em; }

/* ----- main colors ----- */

/* links and headers */
.fontDark, .fontDark  a { color:#333333; }
.fontLight , .fontLight a { color:#FFFFFF; }
.fontMedium , .fontMedium a{ color:#969696; }
.borderColorDark { border-color:#333333; }
.spaceBottomNormal { padding-bottom:2.5em; }


* a { text-decoration:none; }
* a:hover { color:#2485c5; }


/* -- header -- */
.language-menu { padding:0; margin:0; right:1em; position:absolute; line-height:100%;}
.language-menu li {list-style-type: none;  float:left; font-size:13px;  }
.language-menu li:first-child {  }
.language-menu .active a { color:#FFFFFF; background-color:#293844; font-size:13px;  }
.language-menu a { padding:3px 4px; font-size:13px;  }


header { background-image: url('../Images/header.png'); background-size: 100% 100%; }
.header { width:100%; height:100px; position:relative; padding-top:15px;  display: flex;  flex-direction: row; flex-wrap: nowrap; }

.header-left { flex-grow: 1; align-self:flex-end;  }
.header-right { display: flex;  flex-grow:4;  display: flex; flex-direction: row-reverse; }
.header a { color:#FFFFFF; }

.logo { width:100%; max-width:220px; height:auto; }


.hideOnMobile { display:block; }
.showOnMobile { display:none; }
.hamburger-div { position:absolute; top:47px; right:0.7em; } 
.hamburger { height: 50px; width:50px; cursor:pointer; }
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color:#FFFFFF; }

/* -- content -- */
.content { width:100%; min-height: 560px; margin-top:100px; padding-bottom: 1em; }


/* -- footer -- */
.footer { min-height: 200px; padding: 2em 0; background-color: #2b2c2e;  }
.footer-content { clear:both; }
.footer-left { float:left; width:50%; flex-direction: row;}
.footer-right { float:right; width:50%; height:100%; text-align: right;}
.footer-social { margin-bottom:1em; width:100%; display:flex; flex-direction:row; }
.fb-icon { display:block; height:22px; width:22px; background: url('../Icons/fb.svg') center center no-repeat; transition: all 0.1s;  margin-right:1em; }
.yt-icon { display:block; height:22px; width:22px; background: url('../Icons/yt.png') center center/100% 100% no-repeat; transition: all 0.1s; margin-right:1em; }
.fb-icon:hover, .yt-icon:hover  { transform: translateY(-5px); }


.footer-copyright { width:100%; font-size:14px; }
.footer-copyright a { font-size:14px; }

.footer-service-nav a { display: block; }





/** -----------------  Desktop - Navigation ----------------- ***/
.top-nav { align-self:flex-end; margin-right: -6px; }
.top-nav a { display:block; float:left; padding:0.7em 0.5em; margin:0 0.3em; font-size:15px; } 
.top-nav a:hover { color:#FFFFFF; opacity:0.6; background-color:#000000; background-blend-mode: multiply;  }
.top-nav .active { background-color:#293844;  opacity:0.6; background-blend-mode: multiply; }


/* first level */
.hover-nav { display:none; width:100%;  position:absolute;  z-index:100; opacity:0.95; background-color:#293844; transition: all 0.5s; 	 }
.hover-nav-anim { transform: rotateY(-90deg) scale(0.1); background-color:#000000; }

.hover-content { display:flex; flex-direction:column; }
.hover-nav-element { min-height:100px;  padding:2em 0 4em 0; }
.hover-nav  a { display:block; padding:0.25em 0.5em;  color:#FFFFFF; } 
.hover-nav  a :hover { background-color:#2485c5; }
.hover-nav-element .secondACT span { background-color:#2485c5; }
.hover-nav-element a span { padding: 0 1em; min-width: 100px; }



/** -----------------  MOBILE - Navigation ----------------- ***/
.mobileNav { display:none; cursor:pointer; }
.mobileNavShowOrHide { display:none; }
.mobileNav a:hover { color:#FFFFFF; }

/* mobile: first level */
.mobileNavFirst { width:100%; padding-top:1em; padding-bottom:1em; position:absolute; z-index:2000; float:left; opacity:0.94; background-color:#293844; }
.mobileFirstNO, .mobileFirstACT { width:100%; padding:10px 0 13px 0; display:block;  color:#FFFFFF; font-size:20px; float:left;  }
.mobileFirstNO span, .mobileFirstACT span  { margin-left:8px; }
.mobileFirstACT  { background-color:#4EA0D4; }
.mobileFirstNO:hover, .mobileFirstACT:hover {  background-color:#8EC3E4;}


/* mobile: second level */
.mobileNavSecond { display:none; width:100%; float:left;  }
.mobileNavSecond a span { margin-left:1em; }
.mobileSecondNO, .mobileSecondACT {  width:100%; float:left; padding:5px 0 5px 1em; color:#FFFFFF; }
.mobileSecondACT { background-color:#4EA0D4; }
.mobileSecondNO:hover, .mobileNavSecond a:hover  {  background-color:#8EC3E4;}
.mobileIconClosed { background-image:url('../Images/mobile-nav-down.svg'); background-repeat:no-repeat;  background-position:96% center; }
.mobileIconOpened { background-image:url('../Images/mobile-nav-up.svg'); background-repeat:no-repeat; background-position:96% center; }




/* content elements */

.ceTextImage { width:100%; }
.ceTextImageText { width:100%; padding-bottom:1em; }
.ceTextImage img { width:100%; height:auto; }

.ceTextImageExtended { clear:both; width:100%; } 
.ceTextImageExtendedText { width:47%; float:left; padding-bottom: 1em; }
.ceTextImageExtendedImage { width:47%; height:auto; float:right; }
.imageLeft .ceTextImageExtendedText { float:right; }
.imageLeft .ceTextImageExtendedImage { float:left; }

.bannerce { max-width:100%; }
.banner-area { width:100%; margin-bottom: 10px; }

.binance {
    display: block; margin: 0 auto; width:283px;  height:154px;
}
.binance-de {
   background-image:url('../Images/banner/bin_de.jpg');  background-repeat:no-repeat; background-position:center center;
}
.binance-en {
   background-image:url('../Images/banner/bin_en.jpg');  background-repeat:no-repeat; background-position:center center;
}


.button-link { float:left; margin-bottom:3em; background-color: #34424E; color:#FFFFFF; padding: 1em 2em; min-width:200px; border-radius: 20px; transition: all .1s ease-in-out;  }
.button-link:hover { background-color: #506678; color:#FFFFFF; }


/*Feedback - CE*/
.feedbackce { width:100%; }
.feedback-inner { position:relative; }
.feedback-content { width:100%; margin:2em 0; }
.feedback-text { width:100%; text-align: center; margin-bottom:2em; }
.feedback-image { max-height:150px; width:auto!important; margin:0 auto; margin-bottom:1em;}
.feedback-who { width:100%; text-align: center; margin-bottom:2em; }
.feedback-left { position:absolute; top:50%; translate: transformX(-50%); left:0; z-index:1; background: url('../Images/arrow-left.svg') left no-repeat; height:40px; width:40px; cursor:pointer; }
.feedback-right { position:absolute; top:50%; right:0; z-index:1; background: url('../Images/arrow-right.svg') right no-repeat; height:40px; width:40px; cursor:pointer; }

.center-me { text-align: center; }



.clear-fix { clear:both; }

/* media querys */
@media only screen and (max-width: 48rem) {
	.hideOnMobile { display:none; }
	.showOnMobile {	display:block;}	
	.mobileNavShowOrHide {display:block;}
	
	.container, .frame-layout-0 { padding-left:0.5em;  padding-right:0.5em; }
	
	.language-menu { right:0.4em; }
	.header-right { flex-grow:4; align-self:flex-start;}

	
	.ceTextImageExtendedText { width:100%; float:left; }
	.ceTextImageExtendedImage { width:100%; float:left; }
	
}

@media only screen and (max-width: 42rem) {
	.footer-right { float:none; width:100%; text-align: left; }
	.footer-left { float:none; width:100%; align-self:flex-end; }
}

