/*
2.0 Layout Styles

2.1 Header & Page
2.2 Cards
2.3 Full-Width Panels
2.4 Columns
2.5 Indents
2.8 Dialogs
2.9 Miscellaneous Responsive

*/


/* 2.1 Page */

div.page {
	margin: 0px auto 0px auto;
	padding: 150px 0px 0px 0px;
	width: 100%;
	background: #fff;
	position: relative;
    top: 0px;
    left: 0px;
 	overflow-x: hidden;
	}

div.page.short {
	padding: 110px 0px 0px 0px;
	}

div.content {
	margin: auto;
	padding: 0px 30px 0px 30px;
	max-width: 1140px;
	position: relative;
	}

@media all and (max-width: 960px) {
div.page {
	padding: 110px 0px 0px 0px;
	}
	}

@media all and (max-width: 650px) {
div.page {
	padding: 110px 0px 0px 0px;
	}

div.content {
	padding: 0px 20px 0px 20px;
	}
	}


div.inset {
	max-width: 50%;
	}

div.inset.narrow {
	max-width: 33%;
	}

div.inset.figure {
	padding: 8px 8px 8px 8px;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 0px rgba(0,0,0,0.05);
	background-color: rgba(0,0,0,0.01);
	font-size: 12px;
	line-height: 14px;
	}

div.inset.figure span.caption {
	margin: 8px 0px 0px 0px;
	font-size: 12px;
	line-height: 14px;
	display: block;
	}

div.inset.figure img {
	border: 1px solid rgba(0,0,0,0.1);
	display: block;
	}

@media all and (max-width: 650px) {
div.inset {
	max-width: 100%;
	}
	}


div.inset.right {
	margin: 0px 0px 10px 20px;
	}
	
div.inset.left {
	margin: 0px 20px 10px 0px;
	}
	


/* 2.2 Cards, Tiles */

.card {
	margin: 15px 0px 15px 0px;
	padding: 20px 20px 20px 20px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 5px 5px 5px 5px;
	background-color: #fff;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
	display: block;
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
	}
	
.card.compact {
	padding: 5px 25px 5px 5px;
	}

.card.light-gray {
	border: 1px solid rgba(0,0,0,0.05);
	background-color: #f6f6f6;
	box-shadow: none;
	}

.card.charcoal {
	border: 1px solid rgba(0,0,0,0.05);
	background-color: #444;
	box-shadow: none;
	}

.card.round {
	border-radius: 15px 15px 15px 15px;
	}

.card-new {
	margin: 15px 0px 15px 0px;
	padding-top: 100%; /* 1:1 Aspect Ratio */
	width: 100%;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 5px 5px 5px 5px;
	background-color: #fff;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
	position: relative; /* If you want text inside of it */
	display: block;
	}

.card-new.two-three {
	padding-top: 150%; 
	}

.card-new.three-four {
	padding-top: 133%; 
	}

.card-new.ten-nine {
	padding-top: 90%; 
	}

.card-new.five-four {
	padding-top: 80%; 
	}

.card-new.four-three {
	padding-top: 75%; 
	}

.card-new.three-two {
	padding-top: 66.66%; 
	}

.card-new.sixteen-nine {
	padding-top: 56.25%; 
	}

.card-new.two-one {
	padding-top: 50%; 
	}


@media all and (max-width: 650px) {
.card-new {
	margin: 15px 0px 15px 0px;
	padding-top: 0px !important;
	}
	}



.card-new div.card-text {
	margin: 0px 0px 0px 0px;
	padding: 20px 20px 20px 20px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}

@media all and (max-width: 650px) {
.card-new {
	margin: 15px 0px 15px 0px;
	padding-top: 0px !important;
	}
.card-new div.card-text {
	position:relative;
	}
	}


a.card:hover,
a.card-new:hover {
	border: 1px solid rgba(0,0,0,0.15);
	background-color: #fff;
	box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
	}

.card.logo {
	margin: 0px 0px 25px 0px;
	height: 120px;
	}

.card span.logo {
	margin: 35px auto 0px auto;
	width: 80%;
	height: 50px;
	display: block;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition-property: opacity;
	transition-duration: .2s;
	transition-timing-function: ease;
	}
		
.card span.logo.small {
	margin: 40px auto 0px auto;
	height: 40px;
	}

.card span.logo.smaller {
	margin: 45px auto 0px auto;
	height: 30px;
	}

.card span.logo.large {
	margin: 30px auto 0px auto;
	height: 60px;
	}

.card span.logo.tall {
	margin: 25px auto 0px auto;
	height: 70px;
	}

.card.award {
	margin: 0px 0px 25px 0px;
	height: 150px;
	}

.card.award span.logo {
	margin: 20px auto 20px auto;
	width: 80%;
	height: 110px;
	display: block;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition-property: opacity;
	transition-duration: .2s;
	transition-timing-function: ease;
	}

.card.award span.logo.tall {
	margin: 0px auto 0px auto;
	height: 150px;
	}
		
		
.card.cta {
	min-height: 360px;
	}

.card.cta p  {
	margin-bottom: 0px;
	}
	
.card span.thumbnail {
	margin: -20px -20px 20px -20px;
	padding: 10px 20px 0px 20px;
	border-radius: 5px 5px 0px 0px;
	width: 100%;
	height: 130px;
	background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.6));
	display: block;
	}
	
.card span.thumbnail.tall {
	height: 230px;
	background-position: 50% 35%;
	}
	
.card span.metadata {
	margin: -20px -20px 20px -20px;
	padding: 5px 20px 5px 20px;
	width: 100%;
	background: linear-gradient(to right, #009bdf, #0071bb);;
	display: block;
	}
	
.card span.metadata h6 {
	margin: 0px 0px 0px 0px;
	color: #52efff;
	}
		
		

/* 2.2.1 Legacy Cards, Tiles */


.card.fixed {
	min-height: 240px;
	}


.card.mid {
	min-height: 365px;
	}
		
.card.tall {
	min-height: 435px;
	}
		
.card.loose {
	margin: 30px 0px 30px 0px;
	}
	
.card a.thumbnail {
	margin: -1px -1px 15px -1px;
	padding: 1px 1px 0px 1px;
	width: 100%;
	height: initial;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	display: block;
	}

.card span.thumbnail span.inner {
	margin: -1px -1px 0px -1px;
	width: 100%;
	height: 130px;
	border-top: 1px dashed rgba(0,0,0,0.15);
	border-right: 1px dashed rgba(0,0,0,0.15);
	border-left: 1px dashed rgba(0,0,0,0.15);
	display: block;
	}

.card span.thumbnail.tall span.inner {
	height: 230px;
	}

a.card:hover span.thumbnail span.inner {
	border-top: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
	border-left: 1px solid rgba(0,0,0,0.2);
	}
	



/* 2.5 Indents */

.indent {
	padding-left: 150px;
	clear: left;
	}

.indent:after {
	content: "";
	display: table;
	clear: both;
	}

.indent.wide {
	padding-left: 180px;
	clear: left;
	}

.indent.small {
	padding-left: 100px;
	clear: left;
	}

.indent.photo {
	margin-top: 30px;
	padding-left: 180px;
	clear: left;
	}

.indent.photo.small {
	margin-top: 30px;
	padding-left: 90px;
	clear: left;
	}

.indent.photo.smaller {
	margin-top: 20px;
	padding-left: 65px;
	clear: left;
	}


.card.indent {
	padding-left: 150px;
	}

	
@media all and (max-width: 650px) {
div.indent h1,
div.indent h2,
div.indent h3,
div.indent h4,
div.indent h5,
div.indent h6 {
	text-align: left;
	}
	}

.indent.border-top {
	padding-top: 15px;
	padding-bottom: 10px;
	border-top: 1px dashed #ccc;
	}

.indent.border-top:first-of-type {
	border-top: none;
	}

.indent span.icon {
	margin: -20px 0px 10px -150px;
	float: left;
	}

.indent.photo span.photo {
	margin: 0px 0px 10px -165px;
	float: left;
	}

.indent.photo.small span.photo.small {
	margin: 2px 0px 10px -90px;
	float: left;
	}

.indent.photo.smaller span.photo.smaller {
	margin: 2px 0px 10px -65px;
	float: left;
	}

.indent.small span.icon {
	margin: -20px 0px 10px -100px;
	float: left;
	}

.indent.wide span.icon {
	margin: -20px 0px 10px -180px;
	float: left;
	}

.card.indent span.icon {
	margin: -20px 0px 10px -130px;
	}


.indent.logo img.logo {
	margin: 5px 0px 0px -150px;
	float: left;
	}

.indent.award img.award {
	margin: 5px 0px 0px -150px;
	float: left;
	}


div.article {
	margin: 0px 0px 20px 0px;
	}





/* 2.2 Resources */


.resource {
	margin: 15px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px dashed rgba(0,0,0,0.15);
	background-color: #fcfcfc;
	display: block;
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
	}
	
.resource.fixed {
	min-height: 260px;
	}

@media all and (max-width: 650px) {
.resource.fixed {
	min-height: 220px;
	}
	}


.resource.cta {
	min-height: 370px;
	}
		
.resource.mid {
	min-height: 300px;
	}
		
.resource.tall {
	min-height: 435px;
	}
		
.resource.loose {
	margin: 30px 0px 30px 0px;
	}
	
a.resource:hover {
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 0px rgba(0,0,0,0.05);
	transition-property: all;
	transition-duration: .1s;
	transition-timing-function: ease;
	}

.resource h4,
.resource h5,
.resource h6,
.resource p {
	margin-left: 20px;
	margin-right: 20px;
	}


.resource span.icon {
	margin: 5px auto 15px auto;
	}
	
.resource span.thumbnail {
	margin: -1px -1px 20px -1px;
	padding: 1px 1px 0px 1px;
	width: 100%;
	height: 130px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #f2f2f2;
	display: block;
	}
	
.resource span.thumbnail.tall {
	height: 230px;
	background-position: 50% 35%;
	}
	
.resource span.thumbnail span.inner {
	margin: -1px -1px 0px -1px;
	width: 100%;
	height: 130px;
	border-top: 1px dashed rgba(0,0,0,0.15);
	border-right: 1px dashed rgba(0,0,0,0.15);
	border-left: 1px dashed rgba(0,0,0,0.15);
	display: block;
	}

.resource span.thumbnail.tall span.inner {
	height: 230px;
	}

a.resource:hover span.thumbnail span.inner {
	border-top: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
	border-left: 1px solid rgba(0,0,0,0.2);
	}
	
a.resource span.asset {
	margin: -22px -1px -1px -1px;
	padding: 6px 10px 3px 10px;
	height: 14px;
	font-family: "Brandon Grotesque Bold";
    font-weight: normal;
	font-size: 11px;
	line-height: 12px;
	color: #000;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 1px;
	background: linear-gradient(to right, #1299ea, #4a78bb);
	color: #fff;
	display: block;
	}

a.resource span.asset:after {
	margin: -1px 0px 0px 3px; 
	height: 12px;
	width: 12px;
	content: " ";
	background: url('../images/widgets/arrow-right-40x40-white-simple.png') no-repeat center center;
	background-size: 12px 12px;
	position: absolute;
	}










/* 2.3 Panels */

.panel {
	position: relative;
	overflow: auto; /* prevents margin-collapse of nested column layouts */
	overflow-x: hidden;
	}

.panel.shadow-top {
	margin-top: -60px;
	padding-top: 60px;
	background-image: url('../images/bg-shadow-top.png');
	background-size: 1200px 60px;
	background-repeat: no-repeat;
	background-position: top center;
	}
	
.panel.shadow-top-reverse {
	background-image: url('../images/bg-shadow-bottom.png');
	background-size: 1200px 60px;
	background-repeat: no-repeat;
	background-position: top center;
	}
	
.panel.shadow-bottom {
	margin-bottom: -60px;
	padding-bottom: 60px;
	background-image: url('../images/bg-shadow-bottom.png');
	background-size: 1200px 60px;
	background-repeat: no-repeat;
	background-position: bottom center;
	}


/* 2.3.1 Light/Mid Gray */

.panel.light-gray {
	background-color: #f7f7f7;
	color: initial;
	}

.panel.gray {
	background-color: #e5e5e5;
	color: initial;
	}

.panel.mid-gray {
	background-color: #999;
	color: initial;
	}

.panel.medium-gray {
	background-color: #888;
	color: initial;
	}


/* 2.3.2 Dark Gray */

.panel.dark-gray {
	background:  #4d4d4d;
	}

.panel.dark-gray h5 {
	color: #fff;
	}

.panel.dark-gray p {
	color: #b2b2b2;
	}

/* 2.3.3 Borders */

.panel.border-top {
	border-top: 1px dashed #ccc;
	}

.panel.border-bottom {
	border-top: 1px dashed #ccc;
	}


/* 2.3.1  Blue */

.panel.blue {
	background: linear-gradient(to right, #009ade, #0071bb);
	}


.panel.blue.reverse {
	background: linear-gradient(to left, #009ade, #0071bb);
	}

.panel.blue h1,
.panel.blue h2 {
	color: #fff;
	}
	
.panel.blue h3,
.panel.blue h4,
.panel.blue h5,
.panel.blue h6 {
	color: #2ee1ff;
	}

.panel.blue p,
.panel.blue p a {
	color: #b0f0ff;
	}

.panel.blue p.white {
	color: #fff;
	}

.panel.blue hr {
	border-top: 1px dashed #5c758e;
	}



/* 2.3.1 Green */

.panel.green {
	background: linear-gradient(to right, #93d500, #5da602);
	}

.panel.green.reverse {
	background: linear-gradient(to left, #93d500, #5da602);
	}

.panel.green h1,
.panel.green h2 {
	color: #fff;
	}
	
.panel.green h3,
.panel.green h4,
.panel.green h5,
.panel.green h6 {
	color: #dcf98a;
	}

.panel.green p,
.panel.green p a {
	color: #dcf98a;
	}

.panel.green h3.white,
.panel.green h4.white,
.panel.green h5.white,
.panel.green h6.white,
.panel.green p.white {
	color: #fff;
	}

.panel.green hr {
	border-top: 1px dashed #78c900;
	}



/* 2.3.1 Purple */

.panel.purple {
	background: linear-gradient(to right, #a967c1, #8e5ebd);
	}

.panel.purple.reverse {
	background: linear-gradient(to left, #a967c1, #8e5ebd);
	}

.panel.purple h1,
.panel.purple h2 {
	color: #fff;
	}
	
.panel.purple h3,
.panel.purple h4,
.panel.purple h5,
.panel.purple h6 {
	color: #ec92ff;
	}

.panel.purple p,
.panel.purple p a {
	color: #f3c0fc;
	}

.panel.purple h3.white,
.panel.purple h4.white,
.panel.purple h5.white,
.panel.purple h6.white,
.panel.purple p.white {
	color: #fff;
	}

.panel.purple hr {
	border-top: 1px dashed #78c900;
	}



/* 2.3 Columns */

div.onecolumn,
div.twocolumns,
div.threecolumns,
div.fourcolumns,
div.fivecolumns,
div.sixcolumns {
	margin: 80px auto 80px auto;
	}

div.onecolumn:after,
div.twocolumns:after,
div.threecolumns:after,
div.fourcolumns:after,
div.fivecolumns:after,
div.sixcolumns:after {
	content: "";
	display: table;
	clear: both;
	}

div.onecolumn.tight-top,
div.twocolumns.tight-top,
div.threecolumns.tight-top,
div.fourcolumns.tight-top,
div.fivecolumns.tight-top,
div.sixcolumns.tight-top {
	margin-top: 20px ;
	}


div.onecolumn.tight,
div.twocolumns.tight,
div.threecolumns.tight,
div.fourcolumns.tight,
div.fivecolumns.tight,
div.sixcolumns.tight {
	margin: 60px auto 60px auto;
	}

div.onecolumn.tighter,
div.twocolumns.tighter,
div.threecolumns.tighter,
div.fourcolumns.tighter,
div.fivecolumns.tighter,
div.sixcolumns.tighter {
	margin: 40px auto 40px auto;
	}

div.onecolumn.extra-tight,
div.twocolumns.extra-tight,
div.threecolumns.extra-tight,
div.fourcolumns.extra-tight,
div.fivecolumns.extra-tight,
div.sixcolumns.extra-tight {
	margin: 20px auto 20px auto;
	}

div.onecolumn.no-margin,
div.twocolumns.no-margin,
div.threecolumns.no-margin,
div.fourcolumns.no-margin,
div.fivecolumns.no-margin,
div.sixcolumns.no-margin {
	margin: 0px auto 0px auto;
	}

div.onecolumn.no-margin-top,
div.twocolumns.no-margin-top,
div.threecolumns.no-margin-top,
div.fourcolumns.no-margin-top,
div.fivecolumns.no-margin-top,
div.sixcolumns.no-margin-top {
	margin-top: 0px;
	}

div.onecolumn.no-margin-bottom,
div.twocolumns.no-margin-bottom,
div.threecolumns.no-margin-bottom,
div.fourcolumns.no-margin-bottom,
div.fivecolumns.no-margin-bottom,
div.sixcolumns.no-margin-bottom {
	margin-bottom: 0px;
	}

div.column {
	margin: 0px 1.5% 0px 1.5%;
	float: left;
	}


/* 2.3.1 One Column */

div.onecolumn div.column {
	width: 97%;
	}


/* 2.3.2 Two Columns */
div.twocolumns div.column {
	width: 47%;
	}

div.twocolumns div.column.double {
	width: 97%;
	float: none;
	}

div.fourcolumns div.column.double div.column {
	width: 47%;
	}


div.twocolumns div.column.narrow {
	margin: 0px 7.5% 0px 7.5%;
	width: 35%;
	}

div.twocolumns div.column.narrow-left {
	margin: 0px 2.5% 0px 12.5%;
	width: 35%;
	}

div.twocolumns div.column.narrow-right {
	margin: 0px 12.5% 0px 2.5%;
	width: 35%;
	}




/* 2.3.3 Three Columns */

div.threecolumns div.column {
	width: 30.3333%;
	}

div.threecolumns div.column.double {
	width: 63.6666%;
	}

div.threecolumns div.column.double div.column.left-column,
div.threecolumns div.column.double div.column:first-of-type {
	margin: 0px 2.5% 0px 0px;
	width: 47.5%;
	}

div.threecolumns div.column.double div.column.right-column,
div.threecolumns div.column.double div.column:last-of-type {
	margin: 0px 0px 0px 2.5%;
	width: 47.5%;
	}

div.threecolumns div.column.double div.column.full {
	margin: 0px 0px 0px 0px;
	width: 100%;
	}


div.threecolumns div.column.triple {
	width: 97%;
	}


/* 2.3.4 Four Columns */

div.fourcolumns div.column {
	width: 22%;
	}

div.fourcolumns div.column.double {
	width: 47%;
	}

div.fourcolumns div.column.triple {
	width: 72%;
	}

div.fourcolumns div.column.quadruple {
	width: 97%;
	}

div.fourcolumns div.column.double div.column:first-of-type {
	margin: 0px 3% 0px 0px;
	width: 47%;
	}

div.fourcolumns div.column.double div.column:last-of-type {
	margin: 0px 0px 0px 3%;
	width: 47%;
	}


/* 2.3.5 Five Columns */

div.fivecolumns div.column {
	margin: 0px 1% 0px 1%;
	width: 18%;
	}

div.fivecolumns div.column.double {
	width: 38%;
	}

div.fivecolumns div.column.triple {
	width: 58%;
	}

div.fivecolumns div.column.triple div.twocolumns  {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	}

div.fivecolumns div.column.triple div.twocolumns div.column {
	margin: 0px 3% 0px 0px;
	width: 47%;
	}

div.fivecolumns div.column.quadruple {
	width: 78%;
	}

div.fivecolumns div.column.quintuple {
	width: 98%;
	}


/* 2.3.6 Six Columns */

div.sixcolumns div.column {
	margin: 0px 1% 0px 1%;
	width: 14.6666667%;
	}

div.sixcolumns div.column.double {
	margin: 0px 1% 0px 1%;
	width: 31.333333%;
	}

div.sixcolumns div.column.double div.column {
	margin: 0px 0px 0px 2%;
	width: 48%;
	}

div.sixcolumns div.column.double div.column:first-of-type {
	margin: 0px 2% 0px 0px;
	width: 48%;
	}

div.sixcolumns div.column.triple {
	margin: 0px 1% 0px 1%;
	width: 46%;
	}

div.sixcolumns div.column.triple div.column {
	margin: 0px 1% 0px 1%;
	width: 31.333333%;
	}

div.sixcolumns div.column.quadruple {
	margin: 0px 1% 0px 1%;
	width: 61.6666667%;
	}

div.sixcolumns div.column.quadruple div.column {
	margin: 0px 0px 0px 2%;
	width: 23.5%;
	}

div.sixcolumns div.column.quadruple div.column:first-of-type {
	margin: 0px 0px 0px 0px;
	width: 23.5%;
	}


/* 2.3.7 Wide & Narrow Columns */

div.onecolumn div.column.narrow,
div.twocolumns div.column.wide,
div.threecolumns div.column.wide,
div.fourcolumns div.column.wide, 
div.fivecolumns div.column.wide, 
div.sixcolumns div.column.wide {
	margin: 0px 10% 0px 10%;
	width: 80%;
	}

div.twocolumns div.column.full,
div.threecolumns div.column.full,
div.fourcolumns div.column.full, 
div.fivecolumns div.column.full, 
div.sixcolumns div.column.full {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	}

@media all and (max-width: 770px) {
div.onecolumn div.column.narrow,
div.twocolumns div.column.wide,
div.threecolumns div.column.wide,
div.fourcolumns div.column.wide, 
div.fivecolumns div.column.wide, 
div.sixcolumns div.column.wide {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	}

div.fourcolumns div.column,
div.fourcolumns div.column.triple {
	margin: 0px 1.5% 0px 1.5%;
	width: 47%;
	}

div.fivecolumns div.column,
div.fivecolumns div.column.double,
div.fivecolumns div.column.triple,
div.fivecolumns div.column.quadruple {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	}

div.sixcolumns div.column {
	width: 30.3333334%;
	}
	}


@media all and (max-width: 650px) {
div.twocolumns div.column,
div.twocolumns div.column.narrow,
div.twocolumns div.column.narrow-left,
div.twocolumns div.column.narrow-right {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	float: none;
	}


div.threecolumns div.column,
div.threecolumns div.column.double,
div.fourcolumns div.column,
div.fourcolumns div.column.double,
div.fourcolumns div.column.triple,
div.sixcolumns div.column,
div.sixcolumns div.column.double,
div.sixcolumns div.column.triple,
div.sixcolumns div.column.quadruple {
	margin: 0px 1.5% 0px 1.5%;
	width: 97%;
	}

div.twocolumns div.threecolumns div.column {
	width: 30.3333%;
	float: left;
	}
	}




/* 2.6 Dialogs */

div.dialog-mask {
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	transition-property: all;
	transition-duration: .3s;
	transition-timing-function: ease;
	}

div.dialog {
	padding: 1% 1% 1% 1%;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	width: 80%;
	background-color: #fff;
	position: absolute;
	top: 5%;
	left: 9%;
	z-index: 1000;
	transition-property: all;
	transition-duration: .3s;
	transition-timing-function: ease;
	}

div.dialog.video h5 {
	margin: 8px 50px 15px 5px;
	text-align: left;
	color: #666;
	}

div.dialog a.icon.close {
	width: 25px;
	height: 25px;
	background-image: url('../images/widgets/icon-close-50x50.png');
	background-size: 25px 25px;
	position: absolute;
	opacity: .5;
	top: 20px;
	right: 20px;
	display: block;
	}

div.dialog a.icon.close:hover {
	opacity: 1.0;
	}
	
@media all and (max-width: 1050px) {
div.dialog {
	position: absolute;
	width: 90%;
	top: 15px;
	left: 5%;
	}
	}

@media all and (max-width: 1300px) {
div.dialog {
	width: 80%;
	left: 10%;
	}
	}

@media all and (min-width: 1500px) {
div.dialog {
	width: 70%;
	left: 15%;
	}
	}

@media all and (min-width: 2000px) {
div.dialog {
	width: 50%;
	left: 25%;
	}
	}

@media all and (max-height: 800px) {
div.dialog {
	top: 5%;
	}
	}

@media all and (max-height: 700px) {
div.dialog {
	top: 1%;
	}
	}

div.video-wrapper {
	padding-bottom: 56.25%; /* 16:9 */
	padding-bottom: 54%; /* Evernote Video Aspect Ratio*/
	padding-top: 25px;
	height: 0;
	position: relative;
	}

div.video-wrapper iframe {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	}


/* 2.12 Miscellaneous Responsive */

@media all and (max-width: 650px) {
.no-mobile,
span.icon.no-mobile,
span.illus.no-mobile,
img.no-mobile {
	display: none; !important
	}
	}

@media all and (min-width: 651px) and (max-width: 870px) {
.no-tablet,
span.icon.no-tablet,
span.illus.no-tablet,
img.no-tablet {
	display: none; !important
	}
	}

@media all and (min-width: 871px) {
.no-desktop,
span.icon.no-desktop,
span.illus.no-desktop,
img.no-desktop {
	display: none; !important
	}
	}