/* widget */
.ccywidgetinfo {padding-bottom:10px; clear:both; height:25px; color: #fff}
.lastup {margin-right:6px}
.dennis {display: inline-table}
.tile {width:32.9%; margin:2px; position: relative; float:left; margin-bottom: -24px}
.ccy {font-size: 13px; font-weight: 600; text-align: center; background:  rgba(255,255,255,0.10); color:#fff; height:21px; line-height: 21px }
.bid {float:left; background: rgba(255,255,255,0.05); width:50%; text-align:center; height:80px/*100px*/; position:relative; padding:28px 0/*34px 0*/; cursor: default; border-right:1px solid rgba(255,255,255,0.05); color:#eee; letter-spacing: 1.2px}
	.bid::before {content: 'SELL'; color: rgba(255,255,255,0.5); position: absolute; top: 5px; left:8px; letter-spacing: normal}
	/*.bid:hover, .offer:hover {background: rgba(0,0,0,0.65);}*/
.offer {float:left; background: rgba(255,255,255,0.05); width:50%; text-align:center; height:80px/*100px*/; position:relative; padding:28px 0/*34px 0*/; cursor: default; border-left:1px solid rgba(255,255,255,0.05); color:#eee; letter-spacing: 1.2px}
	.offer::before {content: 'BUY'; color: rgba(255,255,255,0.5); position: absolute; top: 5px; right:8px; letter-spacing: normal}
.big {font-size:14px}
.pip {font-size: 2em; font-weight:400}
.fract {font-size:14px; position: relative; top:-13px}
.spread {text-align: center; position: relative; top: -26px; padding: 0 4px;  clear: both; width: 46px; background: rgba(11,99,153,0.9); color: #fff; margin-left: auto; margin-right: auto; font-size: 14px}
.mockup-container {
	margin-top: -22em;/*25em*/
} 

@media (max-width: 991.98px){
	.dennisx, .spreadx {
	    transform: scale(0.8)
	}
}
@media (max-width: 991.98px){
	.tile {
	    width:32.75%
	}
}
@media (max-width: 767.98px){
	.spread {
	    transform: scale(0.7)
	}
}
@media (max-width: 767.98px){
	.tile {
	    width:32.5%
	}
}
@media (max-width: 475px){
	.mockup-container {
		margin-top: -17em;/*25em*/
	} 
	.tile {
	    width:32%
	}
	.bid, .offer {
		height: 50px
	}
	.big, .fract, .bid::before, .offer::before {
		font-size: 0.8em
	}
	.pip {
		font-size:1.1em
	}
	.fract {
		top: -4px
	}
}
@media (max-width: 335px){
	.mockup-container {
		margin-top: -17em;/*25em*/
	} 
	.tile {
	    width:30%
	}
	.bid, .offer {
		height: 50px
	}
	.big, .fract, .bid::before, .offer::before {
		font-size: 0.7em
	}
	.pip {font-size: 1em
	}
	.fract {
		top: -4px
	}
}
/*.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s; 
}*/
.fade-in {
	opacity: 0
}
/*@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}*/