div {
				box-sizing: border-box;
			}
			ul {
				margin-bottom: 2rem;
			}
			a {
				text-decoration: none;
				transition: all .325s;
			}
			strong {
				font-weight: 400;
			}
			.top {
				width: 100%;
				margin: auto;
			}
			.content {
				width: 700px;
				padding: 50px;
				margin: auto;
			}
			.notes {
				padding: 7px;
			}
			.notes h6 {
				color: #666;
				line-height: 1.3;
				font-weight: 400;
				margin-bottom: 0;
			}
			@media (max-width: 713px) {
				.top {
					width: auto;
					padding-top: 0;
					margin: 0;
				}
				.content {
					width: 100%;
				}
			}
			
			.top {
				padding-bottom: 0;
				height: 100%;
			}
			.notes {
				float: right;
			}
			#slider1 {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1);
				border-radius: 5px;
			}
			#slider1 img{
				height: 100%;
			}
			
			#slider1 h3
			, #slider1 h4
			, #slider1 h5
			, #slider1 p {
				margin: 0;
				padding: 5px 10px;
				color: #fff;
				/* color: #0B99BC; */
				background: #000;
				background: rgba(255, 255, 255, 0.2);
				position: absolute;
				left: 5%;
				top: 5%;
				z-index: 1;
			}
			#slider1 h3 {
				font-size: 1.75em;
				line-height: 1;
				top: 20px;
			}
			#slider1 h4 {	
				font-size: 1em;
				line-height: 1;
				top: 63px;
			}
			#slider1 p {
				font-size: 1em;
				line-height: 1;
				top: 110px;
			}
			#slider1 p + p {
				top: 140px;
			}
			#slider1 h5 {
				font-size: 1em;
				line-height: 1;
				font-weight: normal;
				font-style: italic;
				margin-left: 150px;
				top: 180px;
			}
			
			/* responsive rules */
			@media (max-width: 713px) {
				#slider1 {
					width: 100%;
					height: 100%; /* reset slider height to automatically fix with the first image height. */
					border: none;
					margin-top: 0;
					border-radius: 0;
				}
				.notes {
					float: none;
				}
/* 				.#slider1 h3,h4,h5,p{
					display: block;
					margin-top: 30px;
				} */
			}