/* basic setup */

@font-face {
    font-family: 'Didotfont';
    src: url('font/Interstate-Regular.eot');
    src: url('font/Interstate-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Interstate-Regular.woff2') format('woff2'),
        url('font/Interstate-Regular.woff') format('woff'),
        url('font/Interstate-Regular.ttf') format('truetype');
        /*url('font/Interstate-Regular.svg#Interstate-Regular') format('svg');*/
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Interstate';
  src: url('font/interstate/Interstate-Regular.eot');
  src: url('font/interstate/Interstate-Regular.eot?#iefix') format('embedded-opentype'),
  url('font/interstate/Interstate-Regular.woff2') format('woff2'),
  url('font/interstate/Interstate-Regular.woff') format('woff'),
  url('font/interstate/Interstate-Regular.ttf') format('truetype'),
  url('font/interstate/Interstate-Regular.svg#Interstate-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}




*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'Didotfont';
  width: 100%;
  float: left;
  overflow-y: auto;
  font-size: 16px;
  color: #6d6d6d;
}

#wrapper {
  width: 100%;
  float: left;
  border: none;
  border-width: 0;

}

.teaser-top-table{
  border: 1px solid #0c9fd2;
    color: #000;
    height: 170px;
    margin-top: -3px;
    padding: 10px;
}

table {
  width: 100%;
}

td {
  padding: 0.4em 0;
}

th {
  text-align: left;
  font-weight: bold;
}

h3 {
  font-weight: bold;
  margin-bottom: 20px;
}

.alteration-up {
  color: #0c0;
  font-size: 20px;
  line-height: 24px;
  font-weight: normal;
}
.alteration-equal {
  color: #c2c2c2;
  font-size: 20px;
  line-height: 24px;
  font-weight: normal;
}
.alteration-down {
  color: #c00;
  font-size: 20px;
  line-height: 24px;
  font-weight: normal;
}

#teaser-top-table{
  display: inline-block;
  color: #005695;
}
#top-company-info{
  font-family: 'Didotfont';
  clear: both;
  color: #888;
}
.sharepricelabel{
  color: #005695;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  margin-bottom: 10px;
  font-size: 20px;
}
.companynamelabel{
  margin-bottom: 15px;
  font-size: 20px;
}
.closepricelabel{
  font-size:30px;
  margin-bottom: 15px;
}
.priceholder{
  display: inline-block;
  width: 50%;
  margin-bottom: 10px;
}
.absoluteprice{
  float: left;
}
.relativeprice{
  float: right;
}
.fa-lg{
  font-size:20px;
  top: -4px;
  position: relative;
  font-size: 16px;
  line-height: 24px;
}
.greyfont{
  color: #333;
  line-height: 22px;
}
.lastdateTime{
  margin-bottom: 10px;
}

strong.company-name {
  color:#00474f;
  font-size: 20px;
  font-weight: bold;
}

strong.price {
  color:#00474f;
  font-size: 30px;
}
.teaser-t2{
  background: #127EA2;
  height: 100vh;
}

.teaser-t2 #teaser-table{
  color: white;
}
.teaser-t3{
  background: #82BD4A;
  height: 100vh;
  color: #fff;
}
.teaser-t2 .price, .teaser-t2 .alteration-up, .teaser-t3 .price, .teaser-t3 .alteration-up{
  color: #fff;
}
.teaser-t2 .col1{
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 15px;
  display: block;

}
.teaser-t2 .col2{
  color: #fff;
}
.teaser-t3 .curency-text{
  color: #fff;
  /*font-size: 12px;*/
  margin-left: -5px;
  font-size: 11.05px;
  font-weight: 700;
  font-family: 'Didotfont';
}

.info-caption{
  float: left;
  margin-top: 9px;
  padding-right: 10px;
  font-weight: 700;
  font-size: 13px;
}
.top-tpl-info{
  float: left;
}
.teaser-t1 strong.price{
  font-size: 48px;
  color: #127ea2;
  font-weight: 400;
  font-family: 'Didotfont';
}
.teaser-t1 span.curency-text{
  /*font-size: 34px;*/
  margin-left: -10px;
  color: #127ea2;
  font-size: 28.8px;
  font-family: 'Didotfont';
}

.teaser-t2 strong.price{
  /*font-size: 48px;*/
  color: #fff;
  /*font-weight: bold;*/
  font-size: 54px;
  font-weight: 400;
  font-family: 'Didotfont';
}

.teaser-t2 span.curency-text{
  /*font-size: 30px;*/
  color: #fff;
  margin-left: -10px;
  font-size: 32px;
  font-weight: 400;
  font-family: 'Didotfont';
}
.teaser-t2 td.col1.lastUpdated{
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.teaser-t3 strong.price{
  font-size: 20px;
  font-weight: 700;
  font-family: 'Didotfont';
}

.changeLabel{
  color: #fff;
  margin-top: -4px;
  margin-right: 10px;
  float: left;
  font-size: 16px;
  line-height: 24px;
}
#share_price h2{
  margin-top:20px;
  font: 400 18px 'Interstate',Tahoma,sans-serif;
  color: #00474f;
}
#share_price .table_row table{
  margin-top:20px;
}
#share_price .table_row-short_one table,
#share_price .table_row-short_two table{
  border-top: 4px solid #dae5e6;
}
.trades-table table{
  border-top: 4px solid #dae5e6;
}
.trades-table tbody tr:first-of-type td{
  font-weight: 700;
}
#share_price .table_row table thead th{
  background: #00474F;
  color: #fff;
  padding: 10px;
  font-weight: 400;
}
#share_price .table_row table thead th:not(:first-of-type),
#share_price .table_row table tbody td:not(:first-of-type){
  text-align: right;
}
#share_price .table_row table tbody{
  border-bottom: 1px solid #dae5e6;
  background-color: #EBF1F2;
  color: #6d6d6d;
}
#share_price .table_row table tbody td{
  padding: 10px;
}
#share_price .table_row.table_row-short table thead th:not(:first-child){
  text-align: right;
}
#share_price .table_row.table_row-short table tbody td:not(:first-child){
  text-align: right;
}
#share_price .table_row.table_row-short_two table thead th:first-of-type,
#share_price .table_row.table_row-short_three table thead th:first-of-type{
  width: 30%;
}
#share_price .table_row.table_row-short_two table thead th:nth-of-type(2),
#share_price .table_row.table_row-short_three table thead th:nth-of-type(2){
  width: 15%;
}
#share_price .table_row.table_row-short_two table thead th:nth-of-type(3),
#share_price .table_row.table_row-short_three table thead th:nth-of-type(3){
  width: 15%;
}
#share_price .table_row.table_row-short_two table thead th:nth-of-type(4),
#share_price .table_row.table_row-short_three table thead th:nth-of-type(4){
  width: 20%;
}
#share_price .table_row.table_row-short_two table thead th:last-of-type,
#share_price .table_row.table_row-short_three table thead th:last-of-type{
  width: 20%;
}

#share_price .table_row{
  margin-bottom: 40px;
}
.col1.lastUpdated.t1{
  font-size: 12px;
}
#share-price-today tbody tr:nth-of-type(even){
  background-color: #fff;
  border-top: 1px solid #dae5e6;
  border-bottom: 1px solid #dae5e6;
}
#share_price .alteration-up {
  color: #82bd4a;
  font-size: 16px;
  line-height: 24px;
}
#share_price .alteration-equal {
  color: #c2c2c2;
  font-size: 16px;
  line-height: 24px;
}
#share_price .alteration-down {
  color: #c00;
  font-size: 16px;
  line-height: 24px;
}

#teaser-top-table{
  display: inline-block;
  color: #005695;
}
.disclaimer{
  font-size: 11px;
  line-height: 30px;
  margin: 5px 0;
}
#share_price .table_row:last-of-type{
  margin-bottom: 0;
}
.timelabel{
  color: #6d6d6d;
  font: normal 16px 'Interstate',Tahoma,sans-serif;
  line-height: 20px;
  font-size: 16px;
}
strong.price.teaser-five {
  color: #00474f;
  font-size: 60px;
  font-weight: normal;
  font-family: 'Didotfont';
}
.teaser-t5 .alteration-down{
  color: #cc0000;
  font-size: 16px;
  line-height: 24px;
}
.teaser-t5 .alteration-up {
  color: #82bd4a;
  font-size: 16px;
  line-height: 24px;
}
.teaser-t5 .alteration-equal {
  color: #c2c2c2;
  font-size: 16px;
  line-height: 24px;
}

@media
	  only screen
    and (max-width: 760px), (min-device-width: 768px)
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
        #share_price table, #share_price thead, #share_price tbody, #share_price th, #share_price td, #share_price tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
        #share_price thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #share_price tr {
      margin: 0 0 1rem 0;
    }

    /*tr:nth-child(odd) {*/
      /*background: #ccc;*/
    /*}*/

		#share_price td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50% !important;
		}

        #share_price td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#share_price td:nth-of-type(1):before { content: "Exchange"; }
        #share_price td:nth-of-type(2):before { content: "Currency"; }
        #share_price td:nth-of-type(3):before { content: "Voting Shares in issue"; }
        #share_price td:nth-of-type(4):before { content: "Market Cap"; }
	}

/************* Share price table style ****************/

.teaser-t4{
	padding-left: 15px;
	position: relative;
}
.teaser-t4 .vertical-label{
	transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	display: block;
	position: absolute;
	font-size: 12px;
	left: -18px;
	top: 50%;
	margin-top: -32px;
}
.teaser-t1,
.teaser-t2,
.teaser-t3,
.teaser-t4,
.teaser-t5,
#share_price{
  font-family: 'Interstate';
}

@media (max-width: 350px) {
  strong.company-name {
    font-size: 24px;
  }

  strong.price {
    font-size: 22px;
  }
}