@font-face {
		  font-family: 'PT Sans';
		  font-style: normal;
		  font-weight: 400;
		  src: local('PT Sans'), local('PTSans-Regular'), url(./fonts/PT_Sans/v5/7YGmE4Ls5b94ct65u07hVQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
		}
		@font-face {
		  font-family: 'PT Sans';
		  font-style: normal;
		  font-weight: 700;
		  src: local('PT Sans Bold'), local('PTSans-Bold'), url(./fonts/PT_Sans/v5/0XxGQsSc1g4rdRdjJKZrNL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
		}
		@font-face {
		  font-family: 'PT Sans';
		  font-style: italic;
		  font-weight: 400;
		  src: local('PT Sans Italic'), local('PTSans-Italic'), url(./fonts/PT_Sans/v5/PIPMHY90P7jtyjpXuZ2cLLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
		}
		@font-face {
		  font-family: 'PT Sans';
		  font-style: italic;
		  font-weight: 700;
		  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(./fonts/PT_Sans/v5/lILlYDvubYemzYzN7GbLkKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
		}

			*{ box-sizing: border-box; background-color:#222222;
				color:#f0f0f0;}

			body {
				margin: 0px;
				font-family: 'PT Sans';
				font-size: 14px;
				line-height: 18px;
			}

			h1 {
				margin-bottom: 10px;
				font-size: 24px;
				font-weight: bold;
				color: #FF6600;
			}

			h2 {
				color: #999;
				color: #FF6600;
				font-size: 18px;
				font-weight: normal;

				margin-bottom: 30px;
			}

			hr {
				border: 0px;
				height: 1px;
				background-color: #ccc;
				margin: 30px 0px;
			}

			sup {
				position: relative;
				margin-left: 5px;
				font-size: 15px;
				top: -0.5em;
				vertical-align: top;
			}

			a {
				color: #2194CE;
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
			}

			#panel {
				position: fixed;
				left: 0px;
				top: 20px;
				bottom: 0px;
				width: 180px;
				margin-left:10px;
				margin-top:4px;

			}

				#panel #content {
					padding: 0px 20px;
					color: #2194CE;
				}

				#panel img {
					margin-top:20px;
				}

				#panel #resource {
					text-align: center;
				}

				#panel #book {
					text-align: center;
					margin-top: 15px;
				}

			.demo {
				text-align:center;
				width:200px;
				height:190px;
				margin-bottom:2.5em;
				margin-top:12px;
			}

	
				.demo img {
					margin-top:8px;
					margin-left:14px;
					width: 200px;
					height: 180px;
					display: block;
					float: left;
					transition: opacity 0.2s;
				}			

			#viewer {
				position: absolute;
				left: 180px;
				top: 0px;
				padding: 18px 20px;
				margin-left:10px;
			}


				#demo:hover {
					opacity: 0.75;
				}

			/* mobile */

			#expandButton {
				display: none;
				position: absolute;
				right: 20px;
				top: 12px;
				width: 32px;
				height: 32px;
			}

				#expandButton span {
					height: 2px;
					background-color: #2194CE;
					width: 16px;
					position: absolute;
					left: 8px;
					top: 10px;
				}

				#expandButton span:nth-child(1) {
					top: 16px;
				}

				#expandButton span:nth-child(2) {
					top: 22px;
				}
            
                .feature {
				line-height: 2em;
				width:100%;
			}

			.featuretext {
				padding-left:30px;
				padding-right:30px;
			}

			.byline {
				color: #999;
				font-weight:bold;
			}

			.heroimage {
				text-align: center;
/*				padding-top:10px;*/
                max-height: 100%;
                max-width: 100%;
                width: auto;
                height: auto;
			}
            
            .heroimage a{
                width: 100%;
            }
            
            .heroimage a img{
                width: 100%;
            }

			#demos {
				padding-top:30px;
			}

			#examples {
				padding-top:30px;
			}

			.copyright {
				font-size:10px;
				text-align:left;
				margin-left:10px;
				width:100%;
			}
            
            .left-col{
                width: 50%;
                float: left;
            }
            
            .right-col{
                width: 50%;
                float: right;
            }
            
            .multi-col{
                width: 33%;
                float: left;
            }
            
            .col-parent{
                display: inline-block;
                width: 100%;
            }
            

			@media all and ( max-width: 875px ) {
				h1{
					margin-top: 20px;
					margin-bottom: 20px;
                    text-align: center;
				}
				h2{
					margin-top: 20px;
					margin-bottom: 20px;
				}
				#panel{
					position: absolute;
					top: 0;
					height: 480px;
					width: 100%;
					right: 0;
					z-index: 100;
					border-bottom: 1px solid #dedede;
                    margin-left: 0;
				}
				#content{
					position: absolute;
					top: 50px;
                    right: 1em;
					bottom: 0;
					font-size: 2em;
					line-height: normal;
					overflow: auto;
					text-align: right;
					height: 10.5em;
					width: 10em;
                    opacity: 0.95;
					display: none;
					line-height: normal;
				}
                #panel #content {
					padding: 0px 10px;
					color: #2194CE;
border: 1px solid #2194CE;
				}
				#viewer{
					position: inherit;
					left: 0;
					top: 56px;
					width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 3em;
				}
				#viewer img {
					max-width: 80%;
                    max-height: 80%;
					height: auto;
                    width: auto;
				}
				#expandButton{
					display: block;
				}
				#panel.collapsed{
					height: 56px;
				}
                .feature {
                    width: 100%;
                }
                .feature h1{
                    text-align: center;
                }
                .left-col{
                    width: 100%;
                }

                .right-col{
                    width: 100%;
                }

                .multi-col{
                    width:50%;
                    float: left;
                }
			}