#development-di .fa{
	color:#888b8d;
}
#development-di-alt .fa{
	color:#c3c8d0;
}
#development-or .fa{
	color:#FDB913;
}
#development-visibility .fa{
	color:#c3c8d0;
	-webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}
#development-visibility:hover .fa{
	color:#FDB913;
	-webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
/*client branding palette*/
.palette-primary{
	color:#f6f8f9;
}
.palette-secondary{
	color:#c3c8d0;
}
.palette-tertiary{
	color:#FDB913;
}
.palette-quaternary{
	color:#888b8d;
}
.palette-opacity00{
opacity: 0.0;
}
.palette-opacity10{
opacity: 0.1;
}
.palette-opacity20{
opacity: 0.2;
}
.palette-opacity30{
opacity: 0.3;
}
.palette-opacity40{
opacity: 0.4;
}
.palette-opacity50{
opacity: 0.5;
}
.palette-opacity60{
opacity: 0.6;
}
.palette-opacity70{
opacity: 0.7;
}
.palette-opacity80{
opacity: 0.8;
}
.palette-opacity90{
opacity: 0.9;
}
.palette-opacity100{
opacity: 1;
}

.lc {
	text-transform: none;
}
#development-stlab{
	display: block;
	width: 60px;
	height: 52px;
	position:absolute;
	top:-2px;
	left:200px;
	padding: 8px 8px 10px 8px;
	text-align: right;
	text-transform: none;
	font-weight: 600;
}
#development-stdata{
	display: block;
	width: 60px;
	height: 52px;
	position:absolute;
	top:-2px;
	left:260px;
	padding: 8px 8px 10px 8px;
	text-align: left;
	text-transform: none;
	/*font-weight: 300;*/
}
@media(max-width:1249px) {
.page-border.bottom{
		display:block;
	}
	#development{
		/*font-family: "Trebuchet MS", Helvetica, sans-serif;*/
		font-weight: 400;
		display: block;
		width: 100%;
		height: 52px;
		position:fixed;
		bottom:0px;
		border-top: 1px solid;
    border-color: rgba(149, 220, 255, 0.16);
		border-color: #888;
		/*left:25px;*/
		/*margin-left: 25px;*/
		/*bottom: 77px;
		right: 0;
		left: 0;*/
		/*padding:14px 10px 0px 0px;*/
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#080f1a+0,002f4f+50,080f1a+100 */
		background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(45deg,  rgba(0,0,0,1) 0%, rgba(24,24,24,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(24,24,24,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(24,24,24,1) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#161616',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		z-index:1050;
		opacity:1;
	}
	/*device icons*/
	#development-di{
		display: block;
		width: 52px;
		height: 52px;
	  line-height: 40px;
	  position:absolute;
	  top:0px;
	  right:0px;
	  padding:2px 10px 0px 0px;
		text-align: center;
	}
	/*device icons OR delimiter*/
	#development-or{
		display: block;
		width: 8px;
		height: 52px;
		line-height: 40px;
		position:absolute;
		top:0px;
		right:60px;
		padding:2px 10px 0px 0px;
		text-align: center;
	}
	/*device icons alternate*/
	#development-di-alt{
		display: block;
		width: 52px;
		height: 52px;
		line-height: 40px;
		position:absolute;
		top:0px;
		right:66px;
		padding:2px 10px 0px 0px;
		text-align: center;
	}
	/*dev output*/
	#development-io{
	  display: block;
		width: 160px;
		height: 52px;
	  position:absolute;
	  top:0px;
	  left:32px;
	  padding:10px 8px;
		text-align: left;
		text-transform: none;
		font-weight: 600;
	}
	#development-stlab{
		display: block;
		width: 70px;
		height: 52px;
		position:absolute;
		top:-3px;
		left:200px;
		padding:10px 8px;
		text-align: right;
		text-transform: none;
		font-weight: 600;
	}
	#development-stdata{
		display: block;
		width: 60px;
		height: 52px;
		position:absolute;
		top:-3px;
		left:260px;
		padding:10px 8px;
		text-align: left;
		text-transform: none;
		font-weight: 400;
	}
	/*dev tool toggle*/
	#development-visibility{
		display: block;
		width: 32px;
		height: 32px;
		position:absolute;
		top:4px;
		left:1px;
		padding:10px 8px;
		text-align: left;
		text-transform: none;
		font-weight: 600;
	}
}
@media(min-width:1250px) {
	#development{
		/*font-family: "Trebuchet MS", Helvetica, sans-serif;*/
		font-weight: 400;
	  display: block;
		width: 100%;
		height: 52px;
	  position:fixed;
	  bottom:0px;
		border-top: 1px solid;
		border-color: rgba(149, 220, 255, 0.16);
		background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(45deg,  rgba(0,0,0,1) 0%, rgba(24,24,24,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(24,24,24,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(24,24,24,1) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#161616',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		/*z-index:9999999;*/
	}
	/*device icons*/
	#development-di{
		display: block;
		width: 52px;
		height: 52px;
	  line-height: 40px;
	  position:absolute;
	  top:0px;
	  right:25px;
	  padding:2px 10px 0px 0px;
		text-align: center;
	}
	/*device icons OR delimiter*/
	#development-or{
		display: block;
		width: 8px;
		height: 52px;
		line-height: 40px;
		position:absolute;
		top:3px;
		right:83px;
		padding:2px 10px 0px 0px;
		text-align: center;
	}
	/*device icons alternate*/
	#development-di-alt{
		display: block;
		width: 52px;
		height: 52px;
		line-height: 40px;
		position:absolute;
		top:0px;
		right:85px;
		padding:2px 10px 0px 0px;
		text-align: center;
	}
	/*dev output*/
	#development-io{
	  display: block;
		width: 160px;
		height: 52px;
	  position:absolute;
	  top:-2px;
	  left:62px;
	  padding: 8px 8px 10px 8px;
		text-align: left;
		text-transform: none;
		font-weight: 600;
	}
	#development-stlab{
		display: block;
		width: 70px;
		height: 52px;
		position:absolute;
		top:-3px;
		left:200px;
		padding: 8px 8px 10px 8px;
		text-align: right;
		text-transform: none;
		font-weight: 600;
	}
	#development-stdata{
		display: block;
		width: 60px;
		height: 52px;
		position:absolute;
		top:-3px;
		left:260px;
		padding: 8px 8px 10px 8px;
		text-align: left;
		text-transform: none;
		/*font-weight: 300;*/
	}
	/*dev tool toggle*/
	#development-visibility{
		display: block;
		width: 32px;
		height: 32px;
		position:absolute;
		top:4px;
		left:26px;
		padding:8px 8px;
		text-align: left;
		text-transform: none;
		font-weight: 600;
	}
}
#dev-display_device-o, #dev-display_device-h, #dev-display_device-w, #dev-display_dom-ready, dev-display_win-ready{
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
		font-family: "Open Sans", arial, sans-serif;
		font-family: Dosis, arial, sans-serif;
}
#dev-display_device-h, #dev-display_device-w{
	font-size: 13px;
  line-height: 15px;
}
#dev-display_device-o{
	font-family: Dosis, arial, sans-serif;
	font-family: "Open Sans", arial, sans-serif;
	font-size: 10px;
  line-height: 11px;
	position:relative;
	top:-10px;
	right:0px;
	font-weight: 400;
}

#dev-display_dom-container, #dev-display_win-container{

}


#dev-display_dom-container_data, #dev-display_dom-container_label{
position:relative;
top:0px;
opacity:0.5;
font-size: 13px;
line-height: 13px;
}
#dev-display_win-container_data, #dev-display_win-container_label{
position:relative;
top:-7px;
opacity:1;
font-size: 13px;
line-height: 13px;
}
#dev-display_dom-ready, #dev-display_win-ready{
font-weight: 300;
font-family: "Open Sans", arial, sans-serif;
font-size: 13px;
line-height: 13px;
}
#development-di-alt, #development-or{
	/*display:none;*/
	opacity:0;
	-webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

/*In responsive above*/


#development-di .fa.fa-mobile {
	/*display:inline-block;*/
	display:none;
	-webkit-transition-duration: 2.2s; /* Safari */
	transition-duration: 2.2s;
}
#development-di .fa.fa-tablet {
	/*display:inline-block;*/
	display:none;
	-webkit-transition-duration: 2.2s; /* Safari */
	transition-duration: 2.2s;
}
#development-di .fa.fa-laptop {
	/*display:inline-block;*/
	display:none;
	-webkit-transition-duration: 2.2s; /* Safari */
	transition-duration: 2.2s;
}
#development-di .fa.fa-desktop {
	/*display:inline-block;*/
	display:none;
	-webkit-transition-duration: 2.2s; /* Safari */
	transition-duration: 2.2s;
}

@media(min-width:0px) {
/* Fomr here up we assume visitor is on a tablet.*/
	#development-di .fa.fa-mobile {
		display:inline-block;
		/*display:none;*/
	}
	#development-di .fa.fa-tablet {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-laptop {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-desktop {
		/*display:inline-block;*/
		display:none;
	}
}

/* After iPhone6 ends (at 375px) and Start of iPhone6+ (at 414px) */
@media(min-width:380px) {
	/* For mobile devices who are not big enough to go tablet, typically used if we want to bump up a font size, or expose a bit more optional information */
}

@media(min-width:430px) {
	/* Another common point we bump up minor items, like size and padding */
}

@media(min-width:500px) {
	/* Another common point we bump up minor items, like size and padding */
}

@media(min-width:600px){
	/* Another common point we bump up minor items, like size and padding */
}

/* Phone End */
@media(max-width:767px) {

}

 /* Tablet */
@media (min-width:768px) {
	/* From here up we assume visitor is on a tablet.*/
	#development-di .fa.fa-mobile {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-tablet {
		display:inline-block;
		/*display:none;*/
	}
	#development-di .fa.fa-laptop {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-desktop {
		/*display:inline-block;*/
		display:none;
	}
}


/* Desktop Small */
@media(min-width:992px) {
	#development-di .fa.fa-mobile {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-tablet {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-laptop {
		display:inline-block;
		/*display:none;*/
	}
	#development-di .fa.fa-desktop {
		/*display:inline-block;*/
		display:none;
	}
}

/* Desktop Large */
@media(min-width:1421px) {
	#development-di .fa.fa-mobile {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-tablet {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-laptop {
		/*display:inline-block;*/
		display:none;
	}
	#development-di .fa.fa-desktop {
		display:inline-block;
		/*display:none;*/
	}

}

@media screen and (min-width: 1024px) and (max-width: 1536px) {
	#development-di-alt, #development-or{
		/*display:none;*/
		opacity:1;
		-webkit-transition: all 0.4s;
	  -moz-transition: all 0.4s;
	  -ms-transition: all 0.4s;
	  -o-transition: all 0.4s;
	  transition: all 0.4s;
	}
	/* Could be High Density Pixel Display Tablet.*/
	#development-di-alt .fa.fa-mobile {
		/*display:inline-block;*/
		display:none;
	}
	#development-di-alt .fa.fa-tablet {
		display:inline-block;
		/*display:none;*/
	}
	#development-di-alt .fa.fa-laptop {
		/*display:inline-block;*/
		display:none;
	}
	#development-di-alt .fa.fa-desktop {
		/*display:inline-block;*/
		display:none;
	}
}


#development.dev-display_window-icon, #development.dev-display_window-w, #development.dev-display_window-w{
  display: inline-block;
  float:right;
}
#dev-display_window-icon i.fa{
font-size: 40px;
line-height: 48px;
}
#fdevice-orientaion i.fa{
font-size: 40px;
line-height: 48px;
}
/*i.fa{
font-size: 40px;
line-height: 48px;
}*/
.fa-rotate-0 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
		-webkit-transition-duration: 2.2s;
    transition-duration: 2.2s;
}
.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
		-webkit-transition-duration: 2.2s;
    transition-duration: 2.2s;
}
.fa-rotate-180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
		-webkit-transition-duration: 2.2s;
    transition-duration: 2.2s;
}
.fa-rotate-270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
		-webkit-transition-duration: 2.2s;
    transition-duration: 2.2s;
}