@font-face {
    font-family: 'Typewalk mono 1915 Thin';
    src: url('../font/TypewalkMono1915-Thin-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-Thin-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-Thin-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 Ultralight';
    src: url('../font/TypewalkMono1915-UltraLight-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-UltraLight-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-UltraLight-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 ExtraLight';
    src: url('../font/TypewalkMono1915-ExtraLight-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-ExtraLight-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-ExtraLight-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 Light';
    src: url('../font/TypewalkMono1915-Light-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-Light-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-Light-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 Regular';
    src: url('../font/TypewalkMono1915-Regular-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-Regular-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-Regular-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 Medium';
    src: url('../font/TypewalkMono1915-Medium-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-Medium-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-Medium-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 SemiBold';
    src: url('../font/TypewalkMono1915-SemiBold-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-SemiBold-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-SemiBold-Web-Demo.woff') format('woff');
}

@font-face {
    font-family: 'Typewalk mono 1915 Bold';
    src: url('../font/TypewalkMono1915-Bold-Web-Demo.eot');
    src: url('../font/TypewalkMono1915-Bold-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/TypewalkMono1915-Bold-Web-Demo.woff') format('woff');
}



#typetester{
	width:75vw;
	margin:auto;
	margin-top:20vh;
	color:#222;
}
#typetest{
	font-size:8em;
	height:50vh;
	text-align: center;
	
}

#size{

	margin:auto;
	

	width:320px;
	size:16px;
	padding-top:.5em;
	height:2em;
	
}

#slider{
	width:200px;
	margin-top:4px;
	
	display:inline-block;
	float:left;

	
}	



#sizetxt{
	
	width:100px;

	text-align: left;

	margin-left:210px;

	
	
}

.ui-slider-horizontal {
    height: 8px;
    width: 200px;
}
.ui-slider .ui-slider-handle {
    height: 15px;
    width: 5px;
    padding-left: 2px;
}


#typetestercontroll{
	position: absolute;
	bottom:2.5em;
	width:320px;
	left:50%;
	margin-left:-160px;
}
#font{

	
	width:320px;
	display:inline-block;
	text-align: center;
white-space: nowrap;

}


#fontname{
	width:320px;
	cursor: pointer;
	text-align: center;
}


#fontnameschange{
	display:none;
	width:320px;
	position: absolute;
	bottom:4em;
	color:#888;
	text-align: center;
	white-space: nowrap;
}

#fontnameschange ul li{
	cursor: pointer;
}

#fontnameschange ul li:hover{
	color:#e73f1d;
}

#fontnameschange ul {
	list-style: none;
	margin:0;
	padding:0;	
}

.blinking-cursor {
 font-family:"Typewalk mono 1915 Thin";
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}