body {
		font-size: 14pt;
		/*background: url('img/tile.jpg');*/
		background-color: #003142;
	}
	
	@media (min-width: 768px) {
		body {
			/*
			background-image: url('img/test1.jpg'); 
			background-size: cover;
			*/
			font-size: 16pt;
		}
	}
	
	@media (min-width: 992px) {	
		body {
			font-size: 13pt;
			
			 /*url('img/test1.jpg') no-repeat center center fixed; */
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		
			overflow-x: hidden;
		}
	}

	@media (min-width: 1200px) {
		body {
			font-size: 14pt;
		}
	}
	
	@media (max-width: 991px) {
		.navbar{
			border: none;
			margin-bottom: 2em;
		}
		.navbar-default{
			position:absolute;	
			top:15px;
			right:15px; 
		}
		.navbar-collapse{
			background:#004b66; 
			border-radius: 0 0 10px 10px;
		}
		.navbar-collapse.collapse{
			display: none!important;
			height: 0!important;
			padding-bottom: 0;
			overflow: hidden!important;
		}
		.navbar-toggle.collapsed{
			display:block!important;    
		}
		.navbar-toggle{
			display:block!important; 
			margin-top: 0;
		}
		.navbar-collapse.collapse.in{
			display:block!important;    
			height:auto!important;
			overflow:visible!important;
		}
		.navbar-nav>li,.navbar-header{
			float:none; 
		}
		.navbar-default .navbar-toggle.collapsed{
			background:#004b66;
		}
		
		.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
			border: none;
		}
		
		.navbar-inverse {
			background-color: #004b66;
		}
		
		.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
			background-color: #004b66;
		}
		
		.navbar-inverse .navbar-nav>li>a {
			color: #ffffff;
		}
		
		.navbar-inverse .navbar-nav>li>a:hover {
			color: #ffcc00;
			text-shadow: 0 0 8px #ff8300;
		}
		
		.navbar-inverse .navbar-collapse {
		}
		
		.navbar-fixed-top {
			background-color: #004b66;
			border-radius: 0 0 10px 10px;
			border: none;
		}
		
		.navbar-inverse .navbar-toggle {
			border: none;
		}
		
		.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
			background-color: #2AC8FF;
			border: none;
		}
	}
	
	.container {
		width: 90%;
		margin: 0 auto;
	}
	
	@media (min-width: 992px) {
		.container {
			width: 80%;
		}
	}
	
	#header {
		/*background-size: cover;*/
		border-radius: 0 0 10px 10px;
		background: #004b66;
		width: 100%;
		top: 0;
		position: fixed;
		height: 4.5em;
		z-index: 100;
	}
	
	#header-logo {
		float: left;
		color: #80dfff;
		text-align: center;
	}
	
	#header-logo a{
		text-decoration: none;
		color: #80dfff;
	}
	
	#header-logo:hover {
		float: left;
		color: #80dfff;
		text-shadow: 0 0 6px #33ccff;
		text-align: center;
	}
	
	#header-nav {
		float: right;
		margin-top: 1.35em;
	}
	
	#header-nav ul {
		text-align: center;
		list-style-type: none;
		padding: 0;
	}
	
	#header-nav ul li {
		display: inline-block;
		padding-right: 10px;
	}
	
	#header-nav ul li a {
		font-size: 16pt;
		color: #FFFFFF;
		text-decoration: none;
		padding: 2px 5px;
	}
	
	#header-nav ul li a:hover {
		font-size: 16pt;
		color: #ffcc00;
		text-shadow: 0 0 8px #FF8300;
		text-decoration: none;
	}
	
	#header-mobile{
		border-radius: 0 0 25px 25px;
		background: #004b66;
		border: none;
	}
	
	#header-mobile h3 {
		color: #80dfff;
		text-align: center;
		margin-bottom:-1.25em;
		font-weight: bold;
	}
	
	#header-mobile h3:hover {
		text-shadow: 0 0 6px #33ccff;
	}
	

	#header-mobile h3 a{
		text-decoration: none;
		color: #80dfff;
	}
	
	.content {
		margin-top: 5.5em;
	}
	
	.section {
		height: 90vh;
	}
	
	@media (min-width: 992px) {
		.section {
			height: 60vh;
		}
	}
	
	.column-layout {
		display: table;
		width: 100%;
	}

	.column {
		display: table-cell;
	}
	
	.carousel-thumbnail{
		width: 20vw;
	}
	
	@media (min-width: 992px) {
		.carousel-thumbnail{
			width: 10vw;
		}
	}
	
	#description {
		height: 50vh;
		text-align: center;
		font-weight: bold;
	}
	
	@media (min-width: 992px) {
		#description {
			height: 80vh;
		}
	}
	
	#description h1 {
		font-size: 10vw;
		color: #33ccff;
		text-shadow: 0 0 8px #33ccff;
	}
	
	#description h2 {
		font-size: 7vw;
		color: #80dfff;
		text-shadow: 0 0 10px #80dfff;
	}
	
	#description h3 {
		font-size: 4vw;
		color: #002533;
	}
	
	#description iframe {
		width: 80vw;
		height: 45vw;
		border: 5px solid;
		border-radius: 10px;
		border-color: #33ccff;
	}
	
	@media (min-width: 992px) {
		#description h1 {
			font-size: 5vw;
		}
		
		#description h2 {
			font-size: 3.5vw;
		}
		
		#description h3 {
			font-size: 2vw;
		}
		
		#description iframe {
			width: 45vw;
			height: 25.3vw;
		}
	}
	
	#project-carousel {
		margin-top: 5em;
		margin-bottom: 5em;
	}
	
	@media (min-width: 992px) {
		#project-carousel {
			margin-top: 0;
		}
	}
	
	#timeless-tale, #flair-hockey {
		background-color: #002533;
		/*
		background-image: url('img/timeless-tale-background.jpg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		*/
	}
	
	#responsibility-odd {
		background-color: #002533;
	}
	
	#responsibility-even {
		background-color: #003142;
	}

	
	.project-carousel {
		margin-top: 5em;
		margin-bottom: 2em;
		width: 100%;
		float: none;
	}
	
	@media (min-width: 992px) {
		.project-carousel {
			margin-top: 4vw;
			width: 35vw;
		}
		
		#responsibility-odd .project-carousel {
			float: left;
		}
		
		#responsibility-even .project-carousel {
			float: right;
		}
	}
	
	.project-carousel .carousel-inner { 
		border: 5px solid;
		border-radius: 10px;
	}
	
	#responsibility-odd .project-carousel .carousel-inner { 
		border-color: #33ccff;
	}
	
	#responsibility-even .project-carousel .carousel-inner { 
		border-color: #33ccff;
	}
	
	#flair-hockey .project-carousel .carousel-inner { 
		border-color: #33ccff;
	}
	
	.project-carousel .carousel-indicators { 
		margin: 10px 0 0;
		overflow: auto;
		position: static;
		text-align: center;
		white-space: nowrap;
		width: 100%;
	}
	
	#timeless-tale .project-carousel .carousel-indicators .active{ 
		border-color: #80dfff;
	}
	
	#responsibility-even .project-carousel .carousel-indicators .active{ 
		border-color: #80dfff;
	}
	
	#flair-hockey .project-carousel .carousel-indicators .active{ 
		border-color: #80dfff;
	}
	
	.project-carousel .carousel-indicators li { 
		background-color: transparent;
		border: 4px solid;
		border-radius: 10px;
		display: inline-block;
		height: auto;
		margin: 0 !important;
		width: auto;
	}
	
	#timeless-tale .project-carousel .carousel-indicators li {
		border-color: #004b66;
	}
	
	#responsibility-even .project-carousel .carousel-indicators li {
		border-color: #004b66;
	}
	
	#flair-hockey .project-carousel .carousel-indicators li {
		border-color: #004b66;
	}
	
	.project-carousel .carousel-indicators li img {
		display: block;
	}
	
	.project-carousel .carousel-outer {
		position: relative;
	}
	
	.project-description {
		margin-top: 5vh;
		height: 45vw;
		width: 100%;
		border-radius: 10px; 
		border-width: 5px 0 5px 0;
		border-style: solid;
		border-color: #33ccff;
		color:#b3ecff;
		float: none;
	}
	
	#responsibility-even .project-description {
		
	}
	
	.project-description-heading {
		margin-left: 2vw;
		margin-right: 2vw;
		clear: both;
	}
	
	.project-description-heading h1 {
		font-size: 4vw;
		float: left;
		font-weight: bold;
	}
	
	.project-description-heading h2 {
		padding-top: 0.5vw;
		font-size: 3vw;
		float: right;
	}
	
	.project-description-role {
		margin-top: 8vh;
		margin-left: 2.4vw;
		margin-right: 2.4vw;
		font-size: 2.7vw;
		color: #ffcc00;
	}
	
	.project-description-text {
		margin-top: 1.5vh;
		margin-left: 2.4vw;
		margin-right: 2.4vw;
		height: 21vw;
		font-size: 2.4vw;
	}
	
	@media (min-width: 992px) {
		.project-description {
			margin-top: 4vw;
			width: 38vw;
			height: 20vw;
			font-size: 1.2vw;
		}
			
		#responsibility-odd .project-description {
			float: right;
		}
		
		#responsibility-even .project-description {
			float: left;
		}
		
		.project-description-heading {
			margin-left: 1vw;
			margin-right: 1vw;
			clear: both;
		}
		
		.project-description-heading h1 {
			font-size: 2vw;
			float: left;
			font-weight: bold;
		}
		
		.project-description-heading h2 {
			padding-top: 0.25vw;
			font-size: 1.5vw;
			float: right;
		}
		
		.project-description-role {
			margin-top: 5.5vw;
			margin-left: 1.2vw;
			margin-right: 1.2vw;
			font-size: 1.35vw;
			color: #ffcc00;
		}
		
		.project-description-text {
			margin-top: 2vw;
			margin-left: 1.2vw;
			margin-right: 1.2vw;
			font-size: 1.2vw;
			height: 12vw;
		}
	}
	
	.project-description-buttons {
		margin-left: 2vw;
		margin-right: 2vw;
		margin-top: 1vh;
	}
	
	.project-description-buttons button {
		border: 2px solid;
		border-color: #33ccff;
		border-radius: 10px;
		text-decoration: none;
		outline: none;
		background-color: #006080;
		color: #b3ecff;
		height: 8vw;
		width: 16vw;
		font-size: 3.2vw;
	}
	
	.project-description-buttons button:hover {
		color: #ffffff;
		background-color: #0086b3;
	}
	
	.project-description-buttons button:active {
		color: #ffcc00;
		text-shadow: 0 0 8px #ff8300;
		background-color: #005e80;
	}
	
	.project-description-buttons #watch {
		float: left;
	}
	
	.project-description-buttons #play {
		float: left;
		margin-left: 2vw;
	}
	
	.project-description-buttons #learn-more a {
		margin-top: 3vw;
		text-decoration: none;
		color: #ffffff;
		float: right;
		font-size: 3.6vw;
	}
	
	.project-description-buttons #learn-more a:hover {
		color: #ffcc00;
		text-shadow: 0 0 4px #ff8300;
	}
	
	@media (min-width: 992px) {
		.project-description-buttons {
			margin-left: 1vw;
			margin-right: 1vw;
			margin-top: 1vw;
		}
		
		.project-description-buttons button {
			border: 5px solid;
			border-color: #33ccff;
			border-radius: 10px;
			text-decoration: none;
			outline: none;
			background-color: #006080;
			color: #b3ecff;
			height: 4vw;
			width: 8vw;
			font-size: 1.6vw;
		}
		
		.project-description-buttons button:hover {
			color: #ffffff;
			background-color: #0086b3;
		}
		
		.project-description-buttons button:active {
			color: #ffcc00;
			text-shadow: 0 0 8px #ff8300;
			background-color: #005e80;
		}
		
		.project-description-buttons #watch {
			float: left;
		}
		
		.project-description-buttons #play {
			float: left;
			margin-left: 2vw;
		}
		
		.project-description-buttons #learn-more a {
			margin-top: 1.5vw;
			text-decoration: none;
			color: #ffffff;
			float: right;
			font-size: 1.8vw;
		}
		
		.project-description-buttons #learn-more a:hover {
			color: #ffcc00;
			text-shadow: 0 0 4px #ff8300;
		}
	}