/* Base Styles */

html,
body {
	height: 100%;
}

body {
	font-family: 'Segoe-Pro', 'Segoe UI', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	background-color: #ffffff;
	font-size: 16px;
	margin: 0 auto !important; /* Important for IE8 */
	position: relative;
	width: 100%;
}

h1 {
	font-family: 'Segoe-Light', 'Segoe UI', Arial, sans-serif;
	letter-spacing: -2px;
	font-size: 3.375em;
	font-weight: 300;
}

h2 {
	font-family: 'Segoe-Light', 'Segoe UI', Arial, sans-serif;
	line-height: 1.250em;
	letter-spacing: -1px;
	padding: 0 0 10px 0;
	font-size: 2.500em;
	font-weight: 300;
}

h3 {
	font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
	padding: 0 0 15px 0;
	font-size: 1.313em;
}

p {
	line-height: 1.250em;
	padding: 0 0 15px 0;
}

a {
	text-decoration: none;
}

img {
	height: auto;
}

.row:before,
.row:after {
	position: relative;
	display: table;
	content: " ";
	clear: both;
}

.mobile-break {
	display: none;
}

.none {
	opacity: 0;
	z-index: -1 !important;
}

.show {
	opacity: 1;
}

.underline {
	text-decoration: underline;
}





/* Header */

#header {
	background-color: #ffffff;
	position: fixed;
	height: 75px;
	z-index: 10;
	width: 100%;
	top: 0;

	
}


/* shadow */
#top-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    z-index: 9;
    -moz-box-shadow:0px 4px 12px -2px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow:0px 4px 12px -2px rgba(20%,20%,40%,0.5);
	box-shadow:0px 4px 12px -2px rgba(20%,20%,40%,0.5);
    display: none;
}



#header .container {
	padding: 20px 30px;
}

	#header .windows-logo {
		display: inline-block;
		float: right;
		width: 155px;
	}

	#main-nav,
	#main-nav li,
	#main-nav li a {
		vertical-align: bottom;
		display: inline-block;
	}

	#main-nav li a img {
		height: 35px;
		width: auto;
	}

	.contoso-mobile {
		display: none;
	}

	#main-nav li a.why-windows {
		margin: 0 50px;
		width: 145px;
	}

	#main-nav li a.learn {
		margin: 0 50px 0 0;
		width: 60px;
	}

	#main-nav li a.upgrade {
		width: 140px;
	}

		#main-nav li a {
			font-family: 'Segoe-Light', 'Segoe UI', Arial, sans-serif;
			font-size: 1.500em;
			font-weight: 300;
			color: #002050;
		}

		
		#main-nav li a:hover,
		#main-nav li a:focus,
		#main-nav li a.active {
			font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
		}

div.menu {
	display: none;
}		




/* Subnav */

#subnav {
	background-color: #a5a5a5;
	text-align: center;
	width: 100%;
}

	.fixed-subnav {
		position: fixed;
		z-index: 10;
		top: 75px;
		
	}

	.fixed-subnav-padding-fix {
		padding: 85px 30px 30px 30px !important;
	}

	#subnav,
	#subnav li,
	#subnav li a {
		display: inline-block;
	}

	#subnav a {
		position: relative;
		font-size: 1.125em;
		color: #ffffff;
	}

		#subnav a img {
			position: absolute;
			opacity: 0;
		}

		#subnav a:hover,
		#subnav a.active {
			font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
			background-color: #636363;
		}

		#subnav a.active img {
			opacity: 1;
			margin: 0 auto;
			bottom: 0;
			right: 0;
			left: 0;
		}

		.familiar {
			padding: 15px 20px;
			width: 116px;
		}

		.productive {
			padding: 15px 20px;
			width: 142px;
		}

		.personal {
			padding: 15px 20px;
			width: 104px;
		}

		.flexible {
			padding: 15px 20px;
			width: 94px;
		}





/* Default */

#wrapper {
	/*height: 100%;*/
}

#upgrade-hero,
.learn #wrapper {
	margin-top: 75px;
}

.container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.upgrade .hero-content {
	position: absolute;
	text-align: left;
	color: #ffffff;
	z-index: 8;
	left: 0;
	top: 0;
}

.hero-content {
	position: absolute;
	text-align: left;
	color: #ffffff;
	z-index: 8;
	left: 0;
	top: 55%;
}

.play-video {
	margin: 35% auto 0 auto;
	cursor: pointer;
}

.three-column {
	text-align: center;
	width: 33.33%;
	float: left;
}

	.three-column img {
		width: 100%;
	}

.table {
	display: table;
}

.table-cell {
	display: table-cell;
}


#upgrade-modal {
	background-color: #ffffff;
	overflow: scroll;
	border-radius: 8px;
	max-width: 700px;
	position: fixed;
	margin: 0 auto;
	padding: 30px;
	z-index: 12;
	width: 90%;
	right: 0;
	top: 12%;
	left: 0;
	-webkit-transition: all .5s ease-in-out; 
	-moz-transition: all .5s ease-in-out; 
	-o-transition: all .5s ease-in-out; 
	-ms-transition: all .5s ease-in-out; 
	transition: all .5s ease-in-out; 
}

	#upgrade-modal .close-modal {
		position: absolute;
		right: 5px;
		top: 0px;
	}

	#upgrade-modal h2 {
		color: #002050;
	}

	#upgrade-modal p {
		color: #002050;
	}

/* Videos */

.full-height-video {
	max-width: none !important;
	height: 100% !important;
	width: 100% !important;
	left: 0 !important;
	top: 0 !important;
}

	.full-height-video .video-js {
		min-height: 400px !important;
	}

#upgrade-modal.full-height-modal {
	max-width: none !important;
	height: 100% !important;
	border-radius: 0 !important;
	width: 100% !important;
	padding: 0 !important;
	left: 0 !important;
	top: 0 !important;
}

	#upgrade-modal.full-height-modal h2 {
		padding: 15px 30px 15px 30px;
		width: 90%;
	}

	#upgrade-modal.full-height-modal p {
		padding: 0 30px 15px 30px;
	}

#video-mask {
	background: url('../img/black-opacity.png');
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 11;
	left: 0;
	top: 0;
	-webkit-transition: all .4s ease-in-out; 
	-moz-transition: all .4s ease-in-out; 
	-o-transition: all .4s ease-in-out; 
	-ms-transition: all .4s ease-in-out; 
	transition: all .4s ease-in-out; 
}

.video_container {
	background-color: #000000;
	max-width: 780px;
	position: fixed;
	margin: 0 auto;
	width: 90%;
	z-index: 12;
	right: 0;
	top: 12%;
	left: 0;
	-webkit-transition: all .5s ease-in-out; 
	-moz-transition: all .5s ease-in-out; 
	-o-transition: all .5s ease-in-out; 
	-ms-transition: all .5s ease-in-out; 
	transition: all .5s ease-in-out; 
}

	.vjs-big-play-button {
		opacity: 0 !important;
	}

	.video-shop-link {
		font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
		background-color: #ffffff;
		padding: 5px;
		font-weight: 700;
		color: #072f6c !important;
		float: left !important;
	}

	.close-video,
	.close-modal {
		padding: 5px;
	}

	.close-video a,
	.close-modal a {
		color: #878787;
		padding: 5px;
		float: right;
	}

	.close-video img,
	.close-modal img {
		padding: 0px 0px 0px 4px;
		vertical-align: middle;
		width: 10px;
	}

	.video-js {
		min-height: 550px !important;
		max-width: 780px !important;
		margin: 0 auto !important;
		width: 100% !important;
	}




/* Hero */	

.desktop-gradient {
	background: url('../img/desktop-hero-gradient.png');
	background-repeat: repeat-y;
	position: absolute;
	display: block;
	height: 100%;
	width: 500px;
	left: 0;
	top: 0;
}

.mobile-opacity {
	background: url('../img/black-opacity.png');
	position: absolute;
	display: none;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}





/* Home */

#home-hero {
	position: relative;
	text-align: center;
	height: 100%;
}

	h1 span {
		line-height: 1.125em;
		font-size: 0.704em;
	}

	#home-hero .play-video {
		position: relative;
		width: 151px;
		z-index: 8;
	}

	.see-more {
		position: absolute;
		cursor: pointer;
		margin: 0 auto;
		bottom: 30px;
		width: 39px;
		z-index: 7;
		right: 0;
		left: 0;
	}

		.see-more img {
			width: 100%;
		}



	#familiar {
		background-color: #ffffff;
		padding: 30px;
	}

		#familiar .content {
			padding: 30px 0;
			float: left;
			width: 40%;
		}

			#familiar h2,
			#familiar h3,
			#familiar p {
				color: #002050;
			}

			#familiar h3,
			#familiar p {
				max-width: 90%;
			}

		#familiar img {
			float: left;
			width: 60%;
		}

	#productive {
		background-color: #0078d7;
		text-align: center;
		padding: 30px;
	}

		#productive h2 {
			padding: 0 0 30px 0;
			color: #ffffff;
		}

		#productive img {
			margin: 0 auto 20px auto;
			width: 80%;
		}

		#productive h3 {
			padding: 0 0 15px 0;
			line-height: 1.250em;
			font-size: 1.500em;
			color: #ffffff;
		}

		#productive .left h3 {
			padding: 0 30px 15px 0;
		}

		#productive .left p {
			padding: 0 30px 0 0;
		}

		#productive .right h3 {
			padding: 0 0 15px 30px;
		}

		#productive .right p {
			padding: 0 0 0 30px;
		}

		#productive .middle h3 {
			padding: 0 30px 15px 30px;
		}

		#productive .middle p {
			padding: 0 30px;
		}

		#productive p {
			color: #ffffff;
		}

	#personal {
		background-color: #ffffff;
		padding: 30px;
	}

		#personal .content {
			padding: 30px 0;
			margin: 0 0 0 5%;
			float: left;
			width: 35%;
		}

			#personal h2,
			#personal h3,
			#personal p {
				color: #002050;
			}

		#personal img {
			float: left;
			width: 60%;
		}

	#flexible {
		background-color: #0078d7;
		text-align: center;
		padding: 30px;
	}

		#flexible .three-column {
			padding: 40px 0;
		}

		#flexible h2 {
			padding: 0 0 30px 0;
			color: #ffffff;
		}

		#flexible img {
			margin: 0 auto 20px auto;
			width: 80%;
		}

		#flexible h3 {
			padding: 0 30px 15px 30px;
			line-height: 1.250em;
			font-size: 1.500em;
			color: #ffffff;
		}

		#flexible p {
			color: #ffffff;
		}

		#flexible .left h3 {
			padding: 0 30px 15px 0;
		}

		#flexible .left p {
			padding: 0 30px 0 0;
		}

		#flexible .right h3 {
			padding: 0 0 15px 30px;
		}

		#flexible .right p {
			padding: 0 0 0 30px;
		}

		#flexible .middle h3 {
			padding: 0 30px 15px 30px;
		}

		#flexible .middle p {
			padding: 0 30px;
		}






/* Learn */

#learn-hero {
	position: relative;
	height: 530px;
}

	#learn-hero .hero-content {
		position: relative;
		text-align: left;
		color: #ffffff;
		margin: 20% 0 0 0;
		left: auto;
		top: auto;
	}

		#learn-hero .hero-content h1 {
			line-height: 1.000em;
		}

#learn-videos {
	border-bottom: 1px #ffffff solid;
	border-top: 1px #ffffff solid;
	overflow: hidden;
	width: 100%;
}

	#learn-videos li {
		width: 33.33%;
		float: left;
	}

		#learn-videos li a {
			border: 1px #ffffff solid;
			background-color: #ffffff;
			display: inline-block;
			position: relative;
			overflow: hidden;
			width: 100%;
		}

			#learn-videos li img {
				width: 100%;
			}

			#learn-videos li a img.zoom { 
				-webkit-transition: all .25s ease-in-out; 
			    -moz-transition: all .25s ease-in-out; 
			    -o-transition: all .25s ease-in-out; 
			    -ms-transition: all .25s ease-in-out; 
				transition: all .25s ease-in-out; 
			}

			#learn-videos li a:hover img.zoom { 
				-webkit-transform: scale(1.1); 
				-ms-transform: scale(1.1); 
				transform: scale(1.1); 
			}

			#learn-videos li a .video-title { 
				background: url('../img/black-opacity.png');
				-webkit-transition: all .2s linear;
			    -moz-transition: all .2s linear;
			    -o-transition: all .2s linear;
			    -ms-transition: all .2s linear;
			    transition: all .2s linear;
				position: absolute;
				text-align: center;
				opacity: 0;
				height: 100%;
				width: 100%;
				z-index: 5;
				left: 0;
				top: 0;
			}

				#learn-videos li a:hover .video-title {
					opacity: 1;
				}

				#learn-videos li a .video-title p {
					font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
					letter-spacing: -1px;
					font-size: 1.313em;
					margin: 7% 0 0 0;
					color: #ffffff;
				}

			#learn-videos li img.play-video {
				position: absolute;
				margin: 0 auto;
				width: 20%;
				z-index: 8;
				right: 0;
				left: 0;
				top: 33%;
			}

#faq {
	background-color: #ffffff;
	padding: 30px;
}

	#faq .container {
		
	}

		#faq h2 {
			color: #002050;
		}

		#faq ul li {
			background-color: #ebebeb;
			position: relative;
			margin: 5px 0 0 0;
			padding: 15px 20px 20px 20px;
		}

			#faq h3 {
				font-family: 'Segoe-Light', 'Segoe UI', Arial, sans-serif;
				font-size: 1.500em;
				cursor: pointer;
				color: #002050;
				padding: 0;
				width: 75%;
			}

			#faq ul li span {
				font-family: 'Segoe-Light', 'Segoe UI', Arial, sans-serif;
				position: absolute;
				font-size: 3.125em;
				cursor: pointer;
				color: #002050;
				right: 15px;
				top: -6px;
			}

			#faq ul li div {
				line-height: 1.250em;
				color: #717171;
				width: 90%;
				-webkit-transition: all .25s ease-in-out; 
			    -moz-transition: all .25s ease-in-out; 
			    -o-transition: all .25s ease-in-out; 
			    -ms-transition: all .25s ease-in-out; 
				transition: all .25s ease-in-out; 
			}

			#faq ul li div.open {
				padding: 20px 0 0 0;
				display: block;
			}

			#faq ul li div.closed {
				display: none;
			}

				#faq ul li div ul {
					margin: 0 0 0 20px;
				}

					#faq ul li div ul li {
						padding: 10px 10px 10px 0;
						list-style-type: disc;
					}

					.dropdown-disclaimer {
						padding: 0;
					}

					#faq ul li div p em {
						font-size: 0.625em;
					}

			#upgrade-table-container {
				display: block !important;
				width: 100% !important;
			}

			#upgrade-table-container table,
			#upgrade-table-container table thead,
			#upgrade-table-container table tbody {
				width: 100% !important;
			}

			.upgrade-table {
				display: block !important;
				width: 45% !important;
				border: 5px #ebebeb solid;
				margin: 0 0 20px 0;
			}

			.upgrade-table.left {
				float: left !important;
			}

			.upgrade-table.right {
				float: right !important;
			}

				.upgrade-table h4 {
					font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
					font-size: 1.250em;
					padding: 20px 20px 20px 0;
				}

				.upgrade-table tr {
					/*border-bottom: 1px solid #aaaaaa;*/
					width: 100%;
				}

				.upgrade-table tr.last-row {
					border-bottom: 0px;
				}

				.second-column {
					/*border-left: 1px solid #ffffff;*/
				}

				.upgrade-table th,
				.upgrade-table td {
					line-height: 1.500em;
					padding: 7px;
					width: 50%;
				}

				.upgrade-table th {
					background-color: #0078d6;
					color: #ffffff;
				}

				.darker-row {
					background-color: #dddddd;
				}

				.white-row {
					background-color: #ffffff;
				}

			#faq ul li p a {
				font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
				color: #002050;
			}

				#faq ul li p a:hover,
				#faq ul li p a:focus {
					text-decoration: underline;
				}

				#faq ul li ol {
					margin: 0 0 0 30px;
				}

					#faq ul li ol li {
						list-style-type: decimal; 
						padding: 10px 10px 10px 0px;
					}

						#faq ul li ol li h4 {
							font-family: 'Segoe-Bold', 'Segoe UI', Arial, sans-serif;
							display: inline;
						}






/* Upgrade */

#upgrade-hero {
	background-color: #0078d7;
	padding: 30px 0;
}

	#upgrade-hero .hero-content {
		position: relative;
	}

		#upgrade-hero .hero-content h1 {
			padding: 0 0 30px 30px;
		}

		#upgrade-hero .hero-content ul {
			padding: 0 0 0 30px;
		}

			#upgrade-hero .hero-content h1 sup {
				font-size: 0.600em;
			}

		#upgrade-hero .hero-content ul li,
		#upgrade-hero .hero-content ul li a {
			display: inline-block;
		}

		#upgrade-hero .hero-content ul li {
			margin: 0 7px 7px 0;
		}

		#upgrade-hero .hero-content ul li a {
			border: 1px #ffffff solid;
			font-size: 1.500em;
			padding: 7px 20px 10px 21px;
			color: #ffffff;
		}

			#upgrade-hero .hero-content ul li a.upgrade-now {
				background-color: #ffffff;
				color: #0078d7;
			}
/*
			#upgrade-hero .hero-content ul li a.upgrade-now:hover,
			#upgrade-hero .hero-content ul li a.upgrade-now:focus {
				background-color: #0078d7;
				color: #ffffff;
			}
*/
	#upgrade-hero .hero-content {
		width: 50%;
	}

	#upgrade-hero img.table-cell {
		float: right;
		width: 95%;
	}

	#upgrade-hero .table-cell {
		vertical-align: middle;
	}

	#upgrade-section .table-cell {
		vertical-align: middle;
		padding: 30px;
		width: 50%;
	}


	#upgrade-section .table-cell.grey-background {
		background-color: #d7d7d7;
		padding: 75px;
	}

		#upgrade-section h2,
		#upgrade-section h3,
		#upgrade-section p,
		#upgrade-section label {
			color: #002050;
		}

		#upgrade-section .grey-background h2 {
			font-size: 2.300em;
		}

		.update-instructions-button {
			margin: 5px 0 15px 0;
			display: inline-block;
			cursor: pointer;
			padding: 0;
		}

			.update-instructions-button:hover,
			.update-instructions-button:focus {
				text-decoration: underline;
			}

			.update-instructions-button img {
				margin: 0 0 0 5px;
			}

	#serial-number-input {
		border: 1px #000000 solid;
		margin: 0 0 0 15px;
		width: 35%;
		padding: 8px;
		border-radius: 0;
	}

	#serial-number-submit {
		background-color: #002050;
		font-weight: bold;
		margin: 0 0 0 -5px;
		padding: 8px 20px;
		cursor: pointer;
		color: #ffffff;
		border: 1px #002050 solid;
		border-radius: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
	}






/* Footer */

#footer {
	background-color: #002050;
	padding: 30px;
	min-height: 350px;
}

	#footer .disclaimer {
		float: left;
		width: 80%;
	}

		#footer .disclaimer p {
			font-size: 0.625em;
			color: #ffffff;
		}

		#footer .disclaimer ul {
			/*margin: 0 0 0 20px;*/
		}

			#footer .disclaimer ol li {
				list-style-type: decimal;
				padding: 0 0 15px 0;
				font-size: 0.625em;
				color: #ffffff;
			}

				#footer .disclaimer ol li ul li {
					list-style-type: none;
				}

				#footer .disclaimer ol li ul li {
					font-size: 1.000em;
				}

				#footer .disclaimer p a,
				#footer .disclaimer ol li a,
				#footer .disclaimer ul li a {
					color: #ffffff;
				}

	#footer img {
		width: 126px;
		float: right;
	}



@media (max-width: 1200px) {

.hero-content {
	left: 30px;
}

#learn-hero .hero-content {
	margin: 20% 0 0 30px;
}
}


@media (max-width: 995px) {

	#faq ul li div {
  line-height: 1.250em;
  color: #717171;
  width: 100%;
	}

	.upgrade-table {
		display: block !important;
		width: 100% !important;
		border: 5px #ebebeb solid;
		margin: 0 0 20px 0;
	}

	.upgrade-table.left {
		float: none !important;
	}

	.upgrade-table.right {
		float: none !important;
	}

}	

@media (max-width: 960px) {

/* Base */	

	.container {
		/*width: 100%;*/
	}

	.hero-content {
		position: absolute;
		text-align: left;
		color: #ffffff;
		left: 30px;
		top: 70%;
	}

/* Upgrade */	

	#upgrade-hero img.table-cell {
		width: 100%;
	}

	#upgrade-section .table-cell img {
		width: 75%;
	}

	#upgrade-section .table-cell,
	#upgrade-section .table-cell.grey-background {
		text-align: center;
		opacity: 1;
		padding: 30px;
		/*width: auto;*/
	}

	#upgrade-section label {
		margin: 0 0 15px 0;
		display: block;
	}

	#main-nav li a.why-windows {
		margin: 0 50px;
		width: 130px;
	}

	#main-nav li a.learn {
		margin: 0 50px 0 0;
		width: 50px;
	}

	#main-nav li a.upgrade {
		width: 90px;
	}

		#main-nav li a {
			font-family: 'Segoe-Light', 'Segoe UI', Arial, sans-serif;
			font-size: 1.333em;
			font-weight: 300;
			color: #002050;
		}

	#header .windows-logo {
	    width: 145px;
	}

	#main-nav li a img {
	    height: 30px;
	}

}	

@media (max-width: 780px) {

/* Base */

	.table,
	.table-cell {
		opacity: 1;
	}

	#familiar,
	#personal {
		text-align: center;
	}

		#familiar .content,
		#personal .content {
			float: none;
			width: 100%;
		}

		#familiar .content {
			padding: 0 0 30px 0;
		}

		#personal .content {
			padding: 30px 0 0 0;
			margin: 0;
		}

			#familiar h3, #familiar p {
				max-width: none;
			}

		#familiar img,
		#personal img {
			float: none;
			width: 80%;
	  	}

	  	.three-column {
			text-align: center;
			float: none;
			width: 100%;
		}

		#productive .left h3,
		#productive .right h3,
		#flexible .left h3,
		#flexible h2 {
			padding: 0 0 15px 0;
		}

		#productive .left p,
		#productive .middle p {
			padding: 0 0 30px 0;
		}

		#productive .right p,
		#flexible .left p {
			padding: 0;
		}

		#flexible .three-column {
			padding: 10px 0;
		}

			#flexible .middle h3,
			#flexible .right h3,
			#flexible .middle p,
			#flexible .right p {
				padding: 0 0 15px 0;
			}

/* Navbar */

.slide-nav-toggle {
	display: block;
	float: right;
}			

#header .container {
	padding: 0 15px;
}

/* Subnav */

#subnav {
	display: none;
}			

/* Video */

.video_container {
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}		

	.close-video a,
	.close-modal a {
		font-size: 1.250em;
	}	

		.close-video img,
		.close-modal img {
			width: 15px;
		}

/* Hero */
/*
	#home-hero,
	#learn-hero {
		height: 400px;
	}		
*/

	#home-hero {
		text-align: center;
	}

		#home-hero .hero-content {
			text-align: center;
			position: relative;
			margin: 20% auto 50px;
			left: auto;
			top: auto;
		}

		#home-hero .play-video {
			margin: 0 auto 0 auto;
			width: 90px;
		}

	.hero {
		overflow: hidden;
	}

/* Learn */

	#learn-videos {
		border-bottom: 0px;
		border-top: 0px;
	}

	#learn-videos li a {
		display: block;
		border-bottom: 0px;
		border-right: 0px;
		border-left: 0px;
		border-top: 0px;
	}

		#learn-videos li a .video-title p {
			font-size: 1.000em;
		}

		#learn-videos li a .video-title {
			opacity: 1;
		}

	#faq {
		padding: 15px;
	}

/* Upgrade */	

	#upgrade-section .table,
	#upgrade-section .table-cell {
		display: block;
		width: auto;
	}

	#upgrade-section .table-cell, 
	#upgrade-section .table-cell.grey-background,
	#upgrade-hero {
		padding: 15px;
	}

	#upgrade-hero .hero-content {
		text-align: center;
		display: block;
		float: none;
		width: 100%;
		left: 0;
	}

	#upgrade-hero img.table-cell {
		padding: 30px 0 0 0;
		margin: 0 auto;
		display: block;
		float: none;
		width: 50%;
	}

	#upgrade-section .table-cell img {
		width: 75%;
	}

	#upgrade-section label {
		margin: 0 0 15px 0;
		display: block;
	}

/* Footer */	

	#footer {
		text-align: center;
		padding: 15px;
	}

		#footer .disclaimer {
			float: none;
			width: 100%;
		}

		#footer img {
			padding: 15px 0 0 0;
			width: 126px;
			float: none;
		}

#upgrade-hero,
.learn #wrapper {
  margin-top: 55px;
}

#header {
	padding: 0;
	height: 55px;
}

#header .contoso-mobile {
	display: block;
	height: 25px;
	width: auto;
	float: left;
	margin: 16px;
}

#header .windows-logo {
	position: absolute;
	margin: 18px auto;
	width: 125px;
	right: 0;
	left: 0;
}

#main-nav {
	display: none;
}		

.push-menu-right-toggle {
    background-color: #ffffff;
    background-image: none;
    position: absolute;
    padding: 14px 15px;
    border-radius: 0;
    cursor: pointer;
    top: 5px;
    right: 0;
    margin: 0;
    border: 0;
  }

    .push-menu-right-toggle .icon-bar {
    	background-color: #002050;
    	border-radius: 1px;
    	display: block;
        width: 23px;
		height: 2px;
    }

    .push-menu-right-toggle .icon-bar + .icon-bar {
      margin-top: 5px;
    }

      .mask {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background: url('../img/black-opacity.png');
        display: none;
      }
      .mask.mask-visible {
        display: block;
      }
      .push-menu-right-open {
        overflow: hidden;
      }
      div.menu {
      	border-top: 1px #002050 solid;
        position: fixed;
        z-index: 20;
        background-color: #ffffff;
        overflow: hidden;
        display: block;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        text-align: left;
        top: 55px;
      }
      div.menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      div.menu a {
        text-transform: normal;
        font-size: 1.250em;
        color: #002050;
        float: none;
      }

        .close-push-menu-right:hover,
        div.menu a:hover,
        div.menu a:focus {
          color: #000000;
        }
      button.close-menu:focus {
        outline: none;
      }

    div.push-menu-right {
		width: 0px;
		height: 100%;
	}
  div.push-menu-right li {
      display: block;
      text-align: left;
  }
  .close-push-menu-right,
  div.push-menu-right a {
    cursor: pointer;
      display: block;
      padding: 15px;
  }

    div.push-menu-right li.active a {
      background-color: #545454;
      text-decoration: none;
      color: #ffffff;
    }

  div.push-menu-right {
      right: -200px;
  }
  body.pmr-open div.push-menu-right {
      width: 200px;
      right: 0;
  }
  .push-menu-right-toggle {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

    #upgrade-hero .hero-content ul li {
		margin: 0 0 20px 0;
	}

	#upgrade-hero .hero-content h1 {
		padding: 0 0 30px 0;
	}

	#upgrade-hero .hero-content ul {
		padding: 0 0 0 0;
	}

}

@media (max-width: 700px) {

	#upgrade-modal {
		border-radius: 0;
		padding: 0px;
		width: 100%;
		bottom: 0;
		right: 0;
		left: 0;
		top: 0;
	}

		#upgrade-modal .close-video,
		#upgrade-modal .close-modal {
			position: absolute;
			right: 5px;
			top: 5px;
		}

		.close-video span,
		.close-modal span {
			display: none;
		}

		#upgrade-modal h2 {
			padding: 15px 30px 15px 30px;
			width: 90%;
		}

		#upgrade-modal p {
			padding: 0 30px 15px 30px;
		}

/* Hero */	

	.desktop-gradient {
		display: none;
	}

	.mobile-opacity {
		display: block;
	}	

	.hero,
	#home-hero,
	#learn-hero,
	.hero-content,
	#learn-hero .hero-content {
		text-align: center;
	}

	#learn-hero {
		height: 350px;
	}

		.hero-content {
			position: relative;
			margin: 20px auto;
			left: auto;
			top: auto;
		}

		.update .hero-content {
			margin: 20px auto 0 auto;
		}

		#learn-hero .hero-content {
			position: relative;
			margin: 30% auto 0 auto;
			left: auto;
			top: auto;
		}

		#home-hero .play-video {
			margin: 0 auto 20% auto;
			width: 90px;
		}

}

@media (max-width: 600px) {

/* Nav */

	#header .windows-logo {
		position: absolute;
		margin: 15px 0;
		width: 125px;
		right: 55px;
		left: auto;
	}

/* Learn */

	#learn-videos li {
		width: 100%;
		float: none;
	}

		#learn-videos li a {
			opacity: 1;
		}

}

@media (max-width: 500px) {

/* Base */	

	.mobile-break {
		display: block;
	}	

}	

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

	#subnav {
		display: none;
	}

	#upgrade-section .table,
	#upgrade-section .table-cell {
		display: block;
		width: auto;
	}

}