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

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


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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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


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

@font-face {
    font-family: 'Typewalk 1915 Heavy Italic';
    src: url('../font/Typewalk1915-Heavy-Italic-Web-Demo.eot');
    src: url('../font/Typewalk1915-Heavy-Italic-Web-Demo.eot?#iefix') format('embedded-opentype'),
         url('../font/Typewalk1915-Heavy-Italic-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:rgba(1,1,1,1);
	text-align: center;
	white-space: nowrap;
	background-color:#fff;
	padding:1em;
	padding-bottom:1.5;
	border:4px solid #e73f1d;
}

#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 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;
  }
}