/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/fonts/oswald-v49-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/oswald-v49-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/oswald-v49-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/oswald-v49-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-500 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/fonts/oswald-v49-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/oswald-v49-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-600 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/oswald-v49-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/oswald-v49-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
			font-family: 'Oswald', sans-serif;
			color: white;
		}

		img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
		img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		#page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
		#p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
		
	.box {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 600px;
     height: 280px;
     padding: 10px;
     margin-left: -300px;
     margin-top: -140px;
     background: #ffffff;
     box-sizing: border-box;
	background-color:rgba(200,200,200,0.5);
	 }
	 .boxsize {
	width: 300px;
    height: 50px;
	 }
#box1 {
        width: 50%;
        position: relative;       
        float: left;
}
 
#box2 {
        width: 49%;
        position: relative;       
        float: right;
}
#box3 {
        width: 100%;
		height: 220px;
		overflow: auto;
}
ul.circ {list-style-type: circle;}
body > ul{
 margin-left: 20px;
}
.scroll-box {
    background: #f4f4f4;
    border: 2px solid rgba(0, 0, 0, 0.1);
    height: 400px; /* maximum height of the box, feel free to change this! */
    padding: 15px;
    overflow-y: scroll;
}
/* unvisited link */
a:link {
    color: blue;
}

/* visited link */
a:visited {
    color: blue;
}

/* mouse over link */
a:hover {
    color: white;
}

/* selected link */
a:active {
    color: blue;
}