@font-face {
  font-family: "Helvetica Neue";
  src: "fonts/helvetica/HelveticaNeueLTStd-Roman.eot";
  src: local("HelveticaNeueLTStd-Roman"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Roman.eot?#iefix") format("embedded-opentype"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Roman.woff") format("woff"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Roman.woff2") format("woff2");
  font-weight: normal;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: "fonts/helvetica/HelveticaNeueLTStd-Lt.eot";
  src: local("HelveticaNeueLTStd-Lt"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Lt.eot?#iefix") format("embedded-opentype"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Lt.woff") format("woff"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Lt.woff2") format("woff2");
  font-weight: lighter;
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: "fonts/helvetica/HelveticaNeueLTStd-Bd.eot";
  src: local("HelveticaNeueLTStd-Bd"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Bd.eot?#iefix") format("embedded-opentype"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Bd.woff") format("woff"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-Bd.woff2") format("woff2");
  font-weight: bold;
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: "fonts/helvetica/HelveticaNeueLTStd-ThCn.eot";
  src: local("HelveticaNeueLTStd-ThCn"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-ThCn.eot?#iefix") format("embedded-opentype"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-ThCn.woff") format("woff"), 
  		url("fonts/helvetica/HelveticaNeueLTStd-ThCn.woff2") format("woff2");
  font-weight: normal;
  font-weight: 200;
  font-style: normal;
}

@font-face {
	font-family: 'icomoon';
	src:url('./fonts/icomoon.eot?rzpmiq');
	src:url('./fonts/icomoon.eot?#iefixrzpmiq') format('embedded-opentype'),
		url('./fonts/icomoon.ttf?rzpmiq') format('truetype'),
		url('./fonts/icomoon.woff?rzpmiq') format('woff'),
		url('./fonts/icomoon.svg?rzpmiq#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.share-alteration-up:before,
.share-alteration-equal:before,
.share-alteration-down:before{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
*{
	box-sizing:border-box;
}
body{color:#333;}
:focus{outline:0}
.clear{line-height: 0;}
.clear:after{content: " ";display: table; clear:both}
a{color:#000; text-decoration:none}
.alteration-up{color:#55AE00;}
.alteration-equal{color:#aaa;}
.alteration-down{color:#AE1100;}

#chartwrapper {/*position: relative;*/}
#wrapper{background-color: #ffffff;color: #e85100;font-family:"Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;font-size: 14px;overflow: hidden;width: 100%;position: relative;/*padding:15px 14px;*/ max-width:350px; max-height:210px; }
#chartheader {background: #ffffff none repeat scroll 0 0;height: 100%;width: 98%;color: #333;z-index: 9999;position: relative;padding: 25px;}

#top{clear: both;float: left;width: 50%;position: relative;}
#top h1{ font-size: 11px;font-weight: bold;padding: 10px 0; }
#top > span { font-size: 40px;position: absolute;top: 33px;z-index: 9999;left: -3px; font-family:"Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;font-weight: 300; }
.share-amount,
.share-cur,
.share-alteration-up,
.share-alteration-down,
.share-alteration-equal,
.change { padding: 3px 16px 8px 5px; }
/*.share-amount{ font-size: 40px; padding-top: 0px; padding-bottom: 2px; letter-spacing: -0.09em; }*/
.wkn{ font-size: 40px; padding-top: 0px; padding-bottom: 2px; letter-spacing: -0.09em; }

.change span{display:block;padding: 2px 0;}
.share-data{float:right;width: 50%;right: -10px;position: absolute;}
.share-cur span{   display: block;
    float: right;
    font-size: 12px;
    padding-left: 42px;
    position: absolute;
    right: 75px;}
.share-cur span.cur-label{font-size:15px;font-size: 18px;}
.share-alteration-down,.share-alteration-equal,.share-alteration-up{float: left;}


.amount {
   float: right;
    font-size: 40px;
    font-weight: bold;
    left: 34px;
    margin-top: 8px;
    position: absolute;
    top: 6px;
}
.share-amount{ float: right;
    max-width: 162px;
    width: 100%;
    height: 38px;
	position: relative;
 z-index: 999;}
.share-amount i{
	font-size: 11px;
	 font-weight: bold;
    left: 23px;
    margin-top: -12px;
    padding-left: 13px;
    position: absolute;
    width: 126px;
}
.share-cur{   float: right;
    margin-bottom: 8px;
    max-width: 130px;
    width: 100%;}
.share-alteration-up:before{ content: "\f0d8"; color:#fff; font-size:32px; }
.share-alteration-equal:before{ content: "\f0da"; color:#aaa; font-size:32px; }
.share-alteration-down:before{ content:"\f0d7"; color:#AE1100; font-size:10px; }
table{width:100%; margin-bottom:10px}
.values {
	position: relative;
    width: 100%;
     z-index: 999;
}
.col2,.col3{text-align:right}
#chart{  position: relative;top: -35px;width: 100%;z-index: 0;}
#chart-info,#info-footer{display:none}
.chart-link{width:100%; text-align:right}
.chart-link a{border-bottom:1px solid transparent; float:right; font-size:10px; font-weight:400; letter-spacing:.2em; line-height:10px; text-transform:uppercase}
.chart-link a:after{content:"\f054"; display:inline-block;font-style:normal; font-weight:400; line-height:1; padding-left:4px}
.change {
    float: right;
	position: absolute;
    right: 26px;
    font-weight: bold;
    margin-top: 17px;
    right: 41px;
}
			
.sharechart {
	  background: #ff6600 none repeat scroll 0 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-top: 18px;
    overflow: visible;
    padding: 10px 17px;
    position: relative;
    text-align: left;
    top: 75px;
    width: 110px;
    z-index: 9999;
}

.sharechart:hover{
    background-color: #ff6600;   
    color: #fff;
}
	
	
i {
    position: absolute;
    right: 15px;

}
.sharechart i{
	position: absolute;
    right: 15px;
    top: 13px;
}

.fa-sort-asc{
     position: absolute;
	 right: 130px;
	 top: 10px;
}
.icon-arrow-drop-right{
	font-size: 9px;
}

@media screen and (max-width: 1199px) and (min-width: 992px){    
	
	.share-cur span.cur-label {font-size: 18px;}

}

@media screen and (max-width: 440px){
	#top h1 {
    font-size: 12px;
}}
@media screen and (max-width: 380px){
	#top h1 {
    font-size: 10px !important;
    font-weight: bold;
}

.share-amount i {
    margin-top: -12px;
}
@media screen and (max-width: 350px){

.share-amount i {
    margin-top: -24px;
}
.change {
    padding: 0 0 4px 41px !important;
    width: 110px;
    right: 51px;
}

}
@media screen and (min-width:340px) and (max-width:350px){
	.share-amount i {
    margin-top: -11px;
}
}
@media screen and (min-width:350px) and (max-width:380px){
	.change {
    padding: 0 0 4px 35px !important;
    width: 110px;
}
}
@media screen and (max-width:368px) and (min-width:341px){
	.share-amount,
	.share-cur,
	.share-alteration-up,
	.share-alteration-down,
	.share-alteration-equal,
	.change { padding: 3px 14px 8px 0;}
	.share-amount{  padding-top: 0px; padding-bottom: 2px; }
	.share-alteration-up:before, .share-alteration-equal:before, .share-alteration-down:before{ font-size:32px; }
	/*.fa-sort-asc::before {
    content: "\f0de";
    font-size: 18px;
    position: relative;
    top: -21px;
}
.fa-sort-asc::before {
    content: "\f0de";
    font-size: 18px;
    position: relative;
    top: -21px;
}*/
.share-alteration-up:before{
	content: "\f0d8";
}
.share-alteration-equal:before{
	content: "\f0da";
}
.share-alteration-down:before{
	content: "\f0d7";
}
}

@media screen and (max-width: 340px){
	#wrapper{
		padding: 12px 14px 5px;
	}
	#top h1{
		padding:2px 0px;
	}
	.share-amount,
	.share-cur,
	.share-alteration-up,
	.share-alteration-down,
	.share-alteration-equal,
	.change { padding: 4px 12px 4px 0; }
	.share-amount{
		padding-top: 2px;
		line-height: 27px;
		z-index: 999;
	}
	.share-cur span.cur-label{
		 font-size: 16px;
	}
	.share-cur span{
		font-size: 12px;
	}
	.share-alteration-up::before, .share-alteration-equal::before, .share-alteration-down::before{
		font-size: 25px;
}
	.change{
		padding: 0px 0 4px;
	}
	.share-alteration-up:before{
	content: "\f0d8";
}
.share-alteration-equal:before{
	content: "\f0da";
}
.share-alteration-down:before{
	content: "\f0d7";
}

.share-amount i {
    font-size: 12px;
    margin-top: -24px;
}
}

/* desktop mode in three-col-layout has 310 x 107 */

@media screen and (max-width: 310px){
	#wrapper{
		padding: 12px 14px 5px;
	}
	.share-amount,
	.share-cur,
	.share-alteration-up,
	.share-alteration-down,
	.share-alteration-equal,
	.change { padding: 4px 7px 4px 0; }
	.share-amount{
		padding-top: 2px;
		line-height: 32px;
	}
	.change span {
		font-size: 11px;
	}
	.share-alteration-up:before{
	content: "\f0d8";
}
.share-alteration-equal:before{
	content: "\f0da";
}
.share-alteration-down:before{
	content: "\f0d7";
}
}
}

@media screen and (max-width: 277px) {
	.share-amount,
	.share-cur,
	.share-alteration-up,
	.share-alteration-down,
	.share-alteration-equal,
	.change { padding: 4px 8px 4px 0; }
	.share-amount{
		padding-top: 4px;
		font-size: 32px;
		line-height: 28px;
	}
	.share-cur span, .change span {
		font-size: 10px;
	}
}

@media screen and (max-width: 259px){
	.share-amount,
	.share-cur,
	.share-alteration-up,
	.share-alteration-down,
	.share-alteration-equal,
	.change { padding: 6px 7px 2px 0; }
	.share-amount{
		padding-top: 4px;
		font-size: 24px;
		line-height: 28px;
	}
	.share-cur span{
		font-size: 10px;
	}
	.share-cur span.cur-label{
		font-size: 12px;
	}
	.share-alteration-up::before, .share-alteration-equal::before, .share-alteration-down::before{
		font-size: 22px;
	}
	.change{
		font-size:10px;
	}
	.change span {
		padding:0px;
	}
}