body,td,th {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #162020;
}
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
	background-color:#edeff0;
	margin: 0;
	height:100%;
}
img {
	border-color:#b8caff;
	max-width: 100%;
    	height: auto;
}
.authorrow {
	display: flex;
	max-width: 70%;
	margin: 25px auto;
	font-size: 16px;
}
.author-date {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
-webkit-justify-content: space-between;
justify-content: space-between;
flex: 1 1 100%;
box-sizing: border-box;
}
.aktualisiert-am {
	white-space: nowrap;
}
.article-author {
	display: flex;
}
.article-authorstart {
	display: block;
	text-align: center;
}
.author-image {
	margin-right: 15px;
}
.author-image img {
	border-radius: 50%;
	margin-right: 15px;
}
.autor-ueber {
	white-space: nowrap;
}
.autor-ueberstart {
	white-space: nowrap;
	margin-top: 5px;
}
.article-date {
	flex-shrink: 100;
	text-align: right;
	max-width: 150px;
}
.artikelbilder {
	text-align:center;
	margin: 3% 5% 3% 5%;
}
.bilder p{
   	text-align:center;
	font-size: 16px;
}
.artikelbilder p{
   	text-align:center;
	font-size: 16px;
}
.bilder div{
   	text-align:center;
	font-size: 16px;
}
.social {
   	text-align:center;
	font-size: 24px;
}
.teilen p{
   	text-align:center;
	font-size: 16px;
}
.teilen h2{
   	text-align:center;
	color: #50586a;
	margin: 10px 5% 30px 5%;
}
.teilen h1{
   	text-align:center;
	color: #0c51a3;
	margin: 1% 5% 1% 5%;
}
.bilder div span {
	display:block;
}
.margin_right {
	margin: 9% 7% 5% 5%;
}
.float {
	float:right;
}
.fancy {
	line-height: 0.5;
	text-align: center;
	margin: 10px 5% 0px 5%;
}
.highlight {
	color: #0059b3;
	padding: 1% 3% 1% 3%;
	border: 2px solid #f4ad03;
	background-color: #f8f9fa;
	width: 80%;
	margin: 30px 5% 30px 5%;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
  top: 0;
  width: 250px;
}
.fancy span:before {
  right: 90%;
  margin-right: 55%;
}
.fancy span:after {
  left: 90%;
  margin-left: 55%;
}
img.aktienchart {
	padding: 0px;
	display: inline;
	margin:-5px 15px 3px 11px;
	border-style:double;
}
a:link {
        font-weight: bold;
	color: #037339;
	text-decoration: none;
}
a:hover {
        font-weight: bold;
	color: #adbbcb;
	text-decoration: underline;
}
a:visited {
        font-weight: bold;
	color: #037339;
	text-decoration: none;
}
	table.sortable {
		border:1px solid #FFFFFF;
		border-collapse:collapse;
		color:#FFFFFF;
		table-layout: fixed;
   		width: 100%;
	}
	table.sortable td{
		border:1px solid #EEEEEE;
		border-collapse:collapse;
		padding: 10px 0px 10px 0px;
		overflow: hidden;
    		width: auto;
		text-align:center;
	}	
		table.sortable th{
		border:1px solid #FFFFFF;
		border-collapse:collapse;
		padding:9px;
		background-color:#cbd3dc;
		overflow: hidden;
    		width: auto;
	}	
	
	table.sortable tbody tr:hover td { background: #EEEEEE; cursor: default; }
table.sortable a:link {
        font-weight: bold;
	text-decoration: underline;
}
table.sortable a:hover {
        font-weight: bold;
	text-decoration: none;
}
table.tableinsider2 {
        width: 80%;
	margin: 3% 13% 3% 13%;
}
table.tableinsider2 th{
        color: rgb(12, 81, 163);
	font-size: 20px;
	font-weight: normal;
	border-bottom: 2px solid #6678b1;
}
#author {
	text-align: center;
	display: block;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	margin: 20px 5% 20px 5%;
	font-size: 17px;
}
p {
	text-align: left;
	padding: 0;
	line-height: 1.50;
	margin: 10px 3% 10px 3%;
}
blockquote {
	font-style: italic;
	padding: 0.01% 0.1% 2.4% 0.1%;
	width: 60%;
	margin: 3% 1% 3% 15%;
	background: #edeff0;
	border-left: .4rem solid #0c51a3;
}
blockquote p {
	text-align: center;
}
ol,li {
	margin: 2% 1% 2% 5%;
}
li.listeins {
	color: #0c51a3;
}
li.listzwei {
	color: #f25648;
}
li.listdrei {
	color: #f4ad03;
}
li.listvier {
	color: #283545;
}
li.listfuenf {
	color: #cd560e;
}
li.listsechs {
	color: #0059b3;
}
li span {
	color: #000000;
}
h1 {
	font-size: 32px;
	color: #0059b3;
	text-align: left;
	margin: 8px 0% 5px 4%;
}
h2 {
	font-size: 25px;
}
.alth2 {
	font-size: 18px;
}
h2.handeln {
	font-size: 25px;
	text-align: center;
	background-color: yellow; 
	}
h3 {
	font-size: 22px;
}
h4 {
	font-size: 21px;
}
h5,h6 {
	font-size: 20px;
}
h2,h3,h4,h5,h6 {
	color: #0059b3;
	text-align: left;
	margin: 30px 0% 20px 1%;
}
form {
	margin: 0;
}
div.brokerhead
{
	padding: 0 0 4px 00;
    	font-size: 18px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	color: #37435e;
	margin: 5px 2px -5px 2px;
}
.kostenrechnerbullets {
	margin: 15px;
	padding: 5px;
}
.main {
	margin: auto;
	padding: 0;
	background-color: #FFFFFF;
	max-width: 1651px;
    	box-sizing: border-box;
}
.menu {
	max-width: 800px;
	margin: auto;
}
.linie1 {
	margin-right: 9px;
	margin-left: 9px;
	padding-bottom: 5px;
   	border-bottom: 5px solid #283545; 
}
.linie2 {
	margin-right: 9px;
	margin-left: 9px;
    	padding-bottom: 5px;
    	border-bottom: 5px solid #cbd3dc; 
}

a.brokerhome {
  border-color: #0c51a3;
}
a.depotrechner {
  border-color: #f25648;
}
a.aktiendepot {
  border-color: #f4ad03;
}
a.tagesgeldrechner {
  border-color: #283545;
}
a.girokonto {
  border-color: #cd560e;
}
a.boersenlexikon {
  border-color: #0059b3;
}
.menu ul {
	width: 100%;
	position: relative;
	display: table;
	padding: 0;
	list-style: none;
	margin-top: .2rem;
	margin-bottom: .2rem;
	z-index: auto;
	text-align:center;

		}
.menu li {
	display: table-cell;
	text-align: center;
	line-height: 1.1;
		}
.social li {
	display: inline;
	margin: 2% 0.4% 2% 0.4%;
		}
.menu_main a:link {
	padding: 0 0 0 0rem;
   	border-style: solid;
  	border-width: 0 0 0.2rem 0;
  	font-size: 0.9rem;
	font-weight: normal;
	text-transform: uppercase;
	margin:0 auto; 
	color: #0c51a3;
}
.menu_main a:hover {
	border-bottom: 1px dashed #333333;
}
.content {
	margin-left: 0px;
	text-align: left;
	clear: right;
	max-width: 900px;
	margin: auto;
}
.Navigation {
	text-align: center;
	font-size: 14px;
	margin-bottom: 1%;
}
.Navigation a{
	font-weight:normal;
}
.glossar {
	-moz-column-count: 3;
	-moz-column-width: 150px;
	column-count: 3;
	column-width: 150px;
	margin: 20px 5% 0px 7%;
}
.glossar h3{
	text-decoration: underline;
	color: #cd560e;
	margin: 1px 1% 3px 0%;
	}
#toc_container {
	border: 1px solid #cbd3dc;
	background-color: #f8f9fa;
	font-size: 95%;
	padding-bottom: 10px;
	margin: 30px 5% 30px 5%;
}
.toc_title {
	border-width: 2px !important;
	padding-bottom: 1%;
	width: 75%;
	border-bottom: 1px solid #283545;
	font-weight: bold;
	color: #283545;
}
.toc_list {
	list-style-type: disclosure-closed;
	color: #f25648;
}
.content ul.onlinedepot {
	list-style:outside;list-style-image:url(images/brokermin.png);background-color:#ffffff;margin:12px 0px 2px 30px;padding:4px 0px 4px 2px;
}
.footer {
	color: #666666;
	text-align: center;
	border-top: 5px solid #cbd3dc;
	border-bottom: 5px solid #283545;
	padding: 0.3rem 0;
	margin: 40px 9px 5px 9px;
}
#thumbimg {
	margin:15px;
	height:155px;
}
.thumb {
	float:left; /* must be floated for same cross browser position of larger image */
	position:relative;
	margin:3px;
	margin-left: 150px;
}
.thumb img { 
	border:1px solid #000;
	vertical-align:bottom;
}
.thumb:hover {
	border:0; /* IE6 needs this to show large image */
	z-index:1;
}
.thumb span { 
	position:absolute;
	visibility:hidden;
}
.thumb:hover span { 
	visibility:visible;
	top:-100px; left:-180px; 
}
.videowrap         {width:80%; max-width: 560px; height:100%; margin:0 auto; background:#CCC}
.tradervideo        {position:relative; padding-top: 56.25%;}
.tradervideo iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

.brokernews {
position: relative;
padding-right: 3rem;
padding-left: 2rem;
}
.aktiennews {
position: relative;
background: #F5F7F8;
}
.newsblock {
border-top: solid 0.1rem #8BA9B7;
}
.lesetipps {
border-top: solid 0.1rem #FFD800;
border-bottom: solid 0.1rem #FFD800;
width: 100%;
display: table;
}
h2.besteaktien {
border-left: .5rem solid #037339;
}
h2.mtan {
border-left: .5rem solid #0c51a3;
}
h2.binaer {
border-left: .5rem solid #f25648;
}
h2.tws {
border-left: .5rem solid #f4ad03;
}
h2.optionen {
border-left: .5rem solid #283545;
}
.brokernews h2 {
margin:1.1rem 1px 10px 0px;
padding-left: 0.6rem;
padding-right: 2rem;
font-size: 1.1rem;
text-transform: uppercase;
}
.brokernews p {
margin-bottom: 1.1rem;
padding-right: 2rem;
font-size: 1.0rem;
}
.aktiennews h2 {
margin:1.1rem 1px 10px 0px;
padding-left: 0.6rem;
padding-right: 2rem;
color: #46616e;
font-size: 1.1rem;
text-transform: uppercase;
}
.aktiennews p {
margin-bottom: 1.1rem;
margin-top: -.3rem;
padding-left: 1rem;
padding-right: 2rem;
font-size: 1.0rem;
color: #393933;
}
span.newsimage {
border: 1px solid #f2f2f2;
float: right;
width: 100px;
margin: 12px 10px 0px 35px;
vertical-align: middle;
}
.newsimage img{
height:80px;
}
#demokonto {
background: whitesmoke;
overflow: hidden;
margin: 40px 0px 40px 0px;
}
span.demokontoimage {
border: 1px solid #f2f2f2;
float: right;
display:block;
margin: 3% 5% 2% 13%;
}
#hochheader {
background-image: url("images/berg3.jpg");
background-color: whitesmoke;
overflow: hidden;
margin: 5px 0px 40px 0px;
padding-top: 10px;
width: 100%;
text-align: center;
background-size: 100% 100%;
}
#hochheader h1,#hochheader h2{
	font-size: 38px;
	color: white;
	font-weight: bold;
	text-align: center;
}
#hochheader h1{
	margin: 12px 0px 3px 0px;
	padding-bottom: 5px;
}
#hochheader h2{
	margin: 0px;
	padding-bottom: 50px;
	font-size: 22px;
}
#hochheader p {
	font-size: 16px;
	line-height: 20px;
	color: white;
	font-weight: bold;
	text-align: center;
	margin: auto;
	padding: 0px 0px 5px 0px;
}
#hochheader span {
	color: #3C63B2;
}
div.slide-left {
  width:100%;
  overflow:hidden;

}
div.slide-left h1 {
  animation: slide-left 750ms;

}

@keyframes slide-left {
  from {
    margin-left: 300%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
div.slide-right {
  width:100%;
  overflow:hidden;
}
div.slide-right h2 {
  animation: 2500ms slide-right;
}

@keyframes slide-right {
  from {
    margin-left: -200%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
div.slide-bottom {
  width:100%;
  overflow:hidden;
}
div.slide-bottom p {
  animation: slide-bottom 4s;
}

@keyframes slide-bottom {
  from {
    margin-left: -500%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

img.twspreview {
	margin: 1% 0% 2% 0%;
	}
h3.demoh3 {
	margin: 10px 0% 5px 5%;
	font-size: 14px;
	line-height: 20px;
	color: #353535;
}
h4.demoh4 {
	margin: 5px 0% 10px 5%;
	font-size: 14px;
	line-height: 20px;
	color: #353535;
}
.links {
	float: left;
	width: 60%;
}
.bestesdemokonto {
	display: flex;
	align-items: center;
	border-top: 1px solid;
	border-bottom: 1px solid;
	color: #5c5a5a;
	padding: 1% 0% 1% 13%;
	margin: 2% 5% 2% 0%;
}
.rechts {
	max-width: 40%;
	float: right;
	text-align: center;
	font-size: 11px;
	padding: 20px 0px 0px 0px;
}
.direktzumbroker {
    width: 100%;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    height: 45px;
}
.direktzumbroker span {
   

    padding: 10px 0px 8px 20px;
    text-align: left;

}
.direktzumbroker a {
    font-size: 15px;
    color: #037339;
    display: inline;
     
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.direktbox {
    max-width: 900px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px 0;
    margin: 10px auto 15px auto;
    width: 32%;
    line-height: 23px;
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.1) inset;
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    animation-duration:3s;

}
.brokerboxtext {
    display: table;
    margin: 0 auto;
}
.brokerboxtext span {
    padding: 3px 0px 0px 0px;
    color: #283545;
    display: table-cell;
    vertical-align: middle;
    line-height: 20px;
}
.button
{
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0em auto;
  padding: 8px 18px 8px 7px;
  background: white;
  border: 1px solid #0059b3;
  overflow: hidden;
  transition: all 0.5s;
}
.button:hover
{
  text-decoration: none;
  color: #0c51a3;
  border-color: #283545;
  background: #ffffff;
}
.button span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;
  
  transition: padding-right 0.5s;
}
.button span:after 
{
  content: ' ';  
  position: absolute;
  top: 0;
  right: -18px;
  opacity: 0;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  background: #cbd3dc;
  border: 3px solid #0c51a3;
  border-top: none;
  border-right: none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-45deg);
}

.button:hover span
{
  padding-right: 30px;
}
.button:hover span:after, .button:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: #0c51a3;
  right: 0;
  top: 50%;
}
@media only screen and (max-width : 1300px) {
.direktbox {
    width: 40%;
}
}
@media only screen and (max-width : 1080px) {
#hochheader h1,#hochheader h2{
	font-size: 34px;
}
#hochheader h2{
	font-size: 18px;
}
.direktbox {
    width: 44%;
}
}
@media only screen and (max-width : 900px) {
#hochheader h1,#hochheader h2{
	font-size: 26px;
}
#hochheader h2{
	font-size: 14px;
}
.direktbox {
    width: 54%;
}
.author-date {
	font-size: 16px;
}
.authorrow {
	max-width: 85%;
	margin: 20px auto;
}
}
@media only screen and (max-width : 780px) {
.direktzumbroker span {
    padding: 00px 00px 00px 00px;
    text-align: left;
}
.direktbox {
    max-width: 900px;
    padding: 0px 0;
    margin: 2px auto;
    border: 2px solid #0c51a3;
    width: 70%;
    line-height: 33px;
}
.direktzumbroker {
    height: 40px;
}
#hochheader h1,#hochheader h2{
	font-size: 22px;
}
#hochheader h2{
	font-size: 12px;
}
.author-date {
	font-size: 13px;
}
.authorrow {
	max-width: 90%;
	margin: 20px auto;
}
}
@media only screen and (max-width : 640px) {
.menu a:not(.brokerhome):not(.depotrechner):not(.boersenlexikon) {display: none;}
#hochheader h1,#hochheader h2{
	font-size: 22px;
	color: #f4ad03;
}
#hochheader h2{
	font-size: 12px;
}
#hochheader span {
	color: black;
}
.authorrow {
	display: inherit;
	max-width: 95%;
	margin: 15px auto;

}
.fancy span:before,
.fancy span:after {
  width: 150px;
}
}
@media only screen and (max-width : 500px) {
.menu a:not(.brokerhome):not(.depotrechner):not(.boersenlexikon) {display: none;}
.direktzumbroker a {font-size: 12px;}
.direktzumbroker span {
    padding: 00px 00px 00px 00px;
    text-align: left;
}
.direktbox {
    max-width: 900px;
    padding: 0px 0;
    margin: 2px auto;
    border: 2px solid #0c51a3;
    width: 100%;
    line-height: 33px;
}
.direktzumbroker {
    height: 40px;
}
#hochheader h1,#hochheader h2{
	font-size: 22px;
	color: #f4ad03;
}
#hochheader h2{
	font-size: 12px;
}
#hochheader span {
	color: black;
}
.fancy span:before,
.fancy span:after {
  width: 100px;
}
#toc_container {
	margin: 10px 1% 10px 1%;
}
ol, li {

    margin: 1% 0% 1% 0%;

}
.authorrow {
	max-width: 100%;
	margin: 5px auto;
	text-align: center;
}
.author-date {
	flex-direction: column;
}
.article-date {
    max-width: 100%;
}
.article-author {
    display: inline;
}
#doppelpunkt {
    display: none;
}
}