@font-face {
    font-family: 'Lato';
	src: url('Lato-Regular.eot'); /* IE9 Compat Modes */
	src: url('Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
	     url('Lato-Regular.woff') format('woff'),
	     url('Lato-Regular.ttf') format('truetype'),
	     url('Lato-Regular.svg#latoregular') format('svg');
		font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;

}
@font-face {
    font-family: 'Lato';
	src: url('Lato-BoldItalic.eot'); /* IE9 Compat Modes */
	src: url('Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
	     url('Lato-BoldItalic.woff') format('woff'),
	     url('Lato-BoldItalic.ttf') format('truetype'),
	     url('Lato-BoldItalic.svg#latobold_italic') format('svg');
		font-style: italic;
	font-weight: bold;
	text-rendering: optimizeLegibility;

}
@font-face {
    font-family: 'LatoHeavy';
	src: url('Lato-Heavy.eot'); /* IE9 Compat Modes */
	src: url('Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
	     url('Lato-Heavy.woff') format('woff'),
	     url('Lato-Heavy.ttf') format('truetype'),
	     url('Lato-Heavy.svg#latoheavy') format('svg');
		font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;

}

/* global */
body { margin: 0; background-color: #d9dad5; font-family: Lato, Arial, sans-serif; }
blockquote { margin: 16px 20px; }
a { color: #3498db; text-decoration: none; }
a:hover { text-decoration: underline; }
.page { position: relative; margin: 0 auto; width: 100%; min-width: 320px; max-width: 1024px; box-shadow: 0 0 32px #888; }

table tr td { vertical-align: top; }

/* install banner */
div#install-banner { background-color: #fff; position: fixed; bottom: 0px; width: 100%; box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.4); z-index: 100; margin: 0 auto; min-width: 320px; max-width: 1024px; }
div#install-banner .message { padding: 20px; color: #34495e; }
div#install-banner .close { color: #34495e; border: none; position: absolute; top: 14px; right: 20px; cursor: pointer; font-size: 24px; }

/* install widget */
div.add-app-widget { text-align: center; height: 100px; display: flex; justify-content: center; align-items: center; display: none; }
div.add-app-widget #add-app-button { display: none; min-width: 256px; }
div.add-app-widget #add-app-button:after { content: "Get the App"; }
div.add-app-widget #add-app-button.enabled { display: inline-block; }
div.add-app-widget #add-app-button.installing { display: inline-block; background-color: #ccc; cursor: auto; font-style: italic; }
div.add-app-widget #add-app-button.installing:after { content: "Installing..."; }
div.add-app-widget #add-app-button.installing:hover { box-shadow: none; }
div.add-app-widget #app-check-text { font-style: italic; }
div.add-app-widget #no-app-text { font-style: italic; display: none; }
div.add-app-widget #app-installed-text { font-style: italic; display: none; }
div.add-app-widget #app-dismissed-text { font-style: italic; display: none; }

.webpage .left .content table { border-collapse: collapse; }
.webpage .left .content table th,
.webpage .left .content table td { border: 1px solid #CCD8E5; padding: 4px 6px; }
.webpage .left .content table th { background: #CCD8E5; }

/* utility */
.frame { position: relative; }
.wide-only { }
.narrow-only { display: none; }

.fade-to-white { position: absolute; bottom: 0; width: 100%; height: 32px;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.02)), color-stop(50%,rgba(255,255,255,0.75)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.fade-to-white.big { height: 120px; }

.fade-to-grey { position: absolute; bottom: 0; width: 100%; height: 32px;
	background: -moz-linear-gradient(top,  rgba(200,200,200,0.02) 0%, rgba(200,200,200,0.75) 50%, rgba(200,200,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,200,200,0.02)), color-stop(50%,rgba(200,200,200,0.75)), color-stop(100%,rgba(200,200,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(200,200,200,0.02) 0%,rgba(200,200,200,0.75) 50%,rgba(200,200,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(200,200,200,0.02) 0%,rgba(200,200,200,0.75) 50%,rgba(200,200,200,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(200,200,200,0.02) 0%,rgba(200,200,200,0.75) 50%,rgba(200,200,200,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(200,200,200,0.02) 0%,rgba(200,200,200,0.75) 50%,rgba(200,200,200,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8c8c8', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}
.fade-to-grey.big { height: 120px; }

.fade-to-white-50 { position: absolute; bottom: 0; width: 100%; height: 32px;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(55%,rgba(255,255,255,0.5)), color-stop(75%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 55%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 55%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 55%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 55%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.fade-to-white-50.big { height: 240px; }

.clear { clear: both; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* navigation */
.nav,
.nav ul { margin: 0; padding: 0; list-style: none; overflow: auto; }
.nav li { display: inline-block; vertical-align: top; }
.nav ul { display: none; position: absolute; }

.header { padding: 0 14px 0 16px; background-color: #fff; }
.header h1 { margin: 0; display: inline-block; }
.header h1 a { display: block; width: 276px; height: 92px; background: url(../img/logo.png) 0 18px no-repeat; text-indent: -9999px; }

.nav.upper { position: relative; z-index: 11; float: right; font-size: 0; }
.nav.upper > li { box-sizing: border-box; width: 104px; padding: 4px 12px 30px 12px; background: url(../img/ribbon-blue.png) center bottom no-repeat; }
.nav.upper li a { display: block; position: relative; padding: 6px 0; color: #fff; text-shadow: 0 0 32px #fff; font-size: 18px; font-weight: bold; font-style: italic; text-align: center; opacity: 0.92; }
.nav.upper li a:hover { /*background-color: rgba(255,255,255,0.8); color: #465b70;*/ text-shadow: 0 0 8px #fff; text-decoration: none; opacity: 1; }
.nav.upper li.star a:after { position: absolute; display: block; margin-top: -4px; width: 80px; height: 11px; background: url(../img/star.png) center bottom no-repeat; content: "" }
.nav.upper li.red { background-image: url(../img/ribbon-red.png); }
.nav.upper li a .bullet { border-radius: 8px; padding: 0 6px; background-color: rgba(255,255,255,0.8); color: #465b70; }
.nav.upper li a:hover .bullet { background-color: rgba(255,255,255,0.9); box-shadow: 0 0 4px #ccc; }
.nav.upper li:hover ul { display: block; }
.nav.upper li ul { position: static; }
.nav.upper li ul li { display: block; }
.nav.upper li ul li a { text-shadow: none; }
.nav.upper li ul li a:hover { background-color: rgba(255,255,255,1); color: #465b70; }

.nav.social { float: right; margin: 0 20px; font-size: 0; }
.nav.social li a { display: block; width: 38px; height: 44px; background: none center center no-repeat; text-indent: -9999px; }

.header .nav.social { position: relative; z-index: 0; }
.header .nav.social li.social-get_the_app a { background-image: url(../img/social/get_the_app-dark.png); }
.header .nav.social li.social-get_the_app a:hover { background-image: url(../img/social/get_the_app-color.png); }
.header .nav.social li.social-find_us_on_facebook a { background-image: url(../img/social/find_us_on_facebook-dark.png); }
.header .nav.social li.social-find_us_on_facebook a:hover { background-image: url(../img/social/find_us_on_facebook-color.png); }
.header .nav.social li.social-find_us_on_twitter a { background-image: url(../img/social/find_us_on_twitter-dark.png); }
.header .nav.social li.social-find_us_on_twitter a:hover { background-image: url(../img/social/find_us_on_twitter-color.png); }

.footer .nav.social li a { opacity: 0.25; }
.footer .nav.social li a:hover { opacity: 1; }
.footer .nav.social li.social-get_the_app a { background-image: url(../img/social/get_the_app-light.png); }
.footer .nav.social li.social-find_us_on_facebook a { background-image: url(../img/social/find_us_on_facebook-light.png); }
.footer .nav.social li.social-find_us_on_twitter a { background-image: url(../img/social/find_us_on_twitter-light.png); }

.navbar { position: relative; background-color: #2c81ba; height: 40px; z-index: 10; }

.nav.primary { position: absolute; display: block; width: 66%; min-width: 594px; font-size: 0; z-index: 12; }
.nav.primary li { display: inline-block; margin: 0; }
.nav.primary li a { position: relative; z-index: 12; box-sizing: border-box; display: block; padding: 0 8px; font-size: 18px; line-height: 40px; text-align: center; color: #fff; text-decoration: none; overflow: hidden; }
.nav.primary > li > a { height: 40px; }
.nav.primary > li:hover { box-shadow: 0 0 8px #444; }
.nav.primary > li:hover a { background-color: #fff; color: #2c81ba; }
.nav.primary > li.has-subnav:hover a:hover { background-color: #2c81ba; color: #fff; }

.nav.primary > li.has-subnav:hover a[href="#"] { border-bottom: 1px solid #ccc; }
.nav.primary > li.has-subnav:hover a[href="#"]:hover { background-color: #fff; color: #2c81ba; cursor: default; }

/* make navigation table to utilize full width evenly */
/* NOTE: Chrome as of September 2020 stopped handling table-layout: fixed properly.  */
/*.nav.primary { display: table; table-layout: fixed; }*/
.nav.primary { display: table; }
.nav.primary > li { width: 25%; overflow: visible; }
.nav.primary li { display: table-cell; position: relative; }
.nav.primary li a[href="#"] { cursor: default; }

.nav.primary li ul { position: absolute; min-width: 100%; margin: 0; padding: 0; background-color: #fff; box-shadow: 0 0 8px #444; z-index: 11; }
.nav.primary li:hover ul { display: block; }
.nav.primary li ul li { display: block; }
.nav.primary li ul li a { display: block; min-height: 40px; padding: 8px 16px; background-color: #fff; color: #2c81ba; line-height: 125%; }
.nav.primary li ul li a:hover { background-color: #2c81ba; color: #fff; box-shadow: none; }

.nav.secondary { position: absolute; right: 0; width: 33.333%; }
.nav.secondary .search { box-sizing: border-box; position: relative; width: 100%; padding: 4px 10%; }
.nav.secondary .search input { position: relative; box-sizing: border-box; border: 2px solid #99b2c4; border-radius: 4px; width: 100%; height: 32px; padding: 0 8px; background-color: #cadfee; color: #465b70; font-size: 18px; font-family: Lato, Arial, sans-serif; outline: none; }
.nav.secondary .narrow-only { display: none; }

/* slider */
.slideshow-responsive { width: 100%; }
.slideshow { position: relative; width: 1024px; height: 400px; }
.left .feature .slideshow { width: 624px; height: 320px; }
.slideshow .slides { position: absolute; width: 1024px; height: 400px; overflow: hidden; cursor: default; }
.left .feature .slideshow .slides { width: 624px; height: 320px; }
.left .feature .slideshow .caption { padding: 0; }
.left .feature .slideshow .caption p { margin: 0; }
.slideshow .slides .overlay { position: absolute; bottom: 80px; right: 96px; width: 480px; }
.slideshow .slides .overlay h1 { margin: 16px 0; font-family: LatoHeavy, Arial, sans-serif; font-size: 42px; line-height: 110%; text-shadow: 1px 1px 0 #444; }
.slideshow .slides .overlay p { margin: 12px 0; line-height: 125%; }
.slideshow .slides .overlay .button { display: block; float: right; margin: 12px 0 0 16px; border: 2px solid #2c81ba; border-radius: 8px; background-color: #2c81ba; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 32px #fff; white-space: nowrap; }
.slideshow .slides .overlay .button:hover {box-shadow: 0 0 8px #2c81ba; }

/* magazine issue slides */
.slideshow .slides .overlay.issue { bottom: 64px; right: 128px; width: 360px; }
.slideshow .slides .overlay.issue h1 { font-style: italic; text-align: center; }
.slideshow .slides .overlay.issue ul { margin: 16px 0 24px 0; padding: 0; list-style: none !important; }
.slideshow .slides .overlay.issue ul li { margin: 6px 0; padding: 0; font-size: 18px; font-weight: bold; text-align: center; text-shadow: 0 0 2px #fff; }

/* webcontent slides */
.slideshow .slides .overlay.webcontent { top: 40px; bottom: auto; }

/* slide themes */
.slideshow .slides .overlay.theme-1 { bottom: 64px; right: 128px; width: 360px; }
.slideshow .slides .overlay.theme-8 { top: 80px; /*left: 282px;*/ width: 460px; /*text-align: center;*/ }
.slideshow .slides .overlay.theme-10 { top: auto; bottom: 64px; right: 128px; width: 360px; }
.slideshow .slides .overlay.theme-21 { top: auto; bottom: 64px; right: 128px; width: 360px; }
.slideshow .slides .overlay.theme-23 { top: auto; bottom: 64px; right: 128px; width: 360px; }

/* slideshow themes */
.slideshow .slides .overlay.light-blue h1 { color: #3498db;  }
.slideshow .slides .overlay.light-blue p,
.slideshow .slides .overlay.light-blue ul { color: #000000; text-shadow: 0 0 2px #fff; }
.slideshow .slides .overlay.light-blue a.button { border-color: #3498db; background-color: #3498db; color: #ffffff;  }
.slideshow .slides .overlay.light-blue a.button:hover { border-color: #3498db; background-color: #3498db; box-shadow: 0 0 8px #3498db; color: #ffffff; }

.slideshow .slides .overlay.light-green2 h1 { color: #1abc9c;  }
.slideshow .slides .overlay.light-green2 p,
.slideshow .slides .overlay.light-green2 ul { color: #000000; text-shadow: 0 0 2px #fff; }
.slideshow .slides .overlay.light-green2 a.button { border-color: #1abc9c; background-color: #1abc9c; color: #ffffff;  }
.slideshow .slides .overlay.light-green2 a.button:hover { border-color: #1abc9c; background-color: #1abc9c; box-shadow: 0 0 8px #1abc9c; color: #ffffff; }

.slideshow .slides .overlay.brown h1 { color: #9b3e31; font-style: italic; text-align: center; text-shadow: 1px 1px 0 #444; }
.slideshow .slides .overlay.brown p,
.slideshow .slides .overlay.brown ul { color: #000000; font-size: 18px; font-weight: bold; text-align: center; text-shadow: 0 0 2px #fff; list-style: none; }
.slideshow .slides .overlay.brown a.button { border-color: #9b3e31; background-color: #9b3e31; color: #ffffff;  }
.slideshow .slides .overlay.brown a.button:hover { border-color: #9b3e31; background-color: #9b3e31; box-shadow: 0 0 8px #9b3e31; color: #ffffff; }

.slideshow .slides .overlay.light-green h1 { color: #1abc9c;  }
.slideshow .slides .overlay.light-green p,
.slideshow .slides .overlay.light-green ul { color: #ffffff;  }
.slideshow .slides .overlay.light-green a.button { border-color: #1abc9c; background-color: #1abc9c; color: #ffffff;  }
.slideshow .slides .overlay.light-green a.button:hover { border-color: #1abc9c; background-color: #1abc9c; box-shadow: 0 0 8px #1abc9c; color: #ffffff; }

.slideshow .slides .overlay.subscribe-red h1 { color: #be2c2c;  }
.slideshow .slides .overlay.subscribe-red p,
.slideshow .slides .overlay.subscribe-red ul { color: #ffffff; font-style: italic; }
.slideshow .slides .overlay.subscribe-red a.button { border-color: #be2c2c; background-color: #be2c2c; color: #ffffff; font-style: italic;  font-size: 18px; }
.slideshow .slides .overlay.subscribe-red a.button:hover { border-color: #be2c2c; background-color: #be2c2c; box-shadow: 0 0 8px #be2c2c; color: #ffffff; }

.slideshow .slides .overlay.dark-blue h1 { color: #34495e;  }
.slideshow .slides .overlay.dark-blue p,
.slideshow .slides .overlay.dark-blue ul { color: #34495e; font-weight: bold; text-shadow: 0 0 2px #fff; }
.slideshow .slides .overlay.dark-blue a.button { border-color: #34495e; background-color: #34495e; color: #ffffff;  }
.slideshow .slides .overlay.dark-blue a.button:hover { border-color: #34495e; background-color: #34495e; box-shadow: 0 0 8px #34495e; color: #ffffff; }

.slideshow .slides .overlay.gold h1 { color: #CC9900;  }
.slideshow .slides .overlay.gold p,
.slideshow .slides .overlay.gold ul { color: #ffffff;  }
.slideshow .slides .overlay.gold a.button { border-color: #CC9900; background-color: #CC9900; color: #ffffff;  }
.slideshow .slides .overlay.gold a.button:hover { border-color: #CC9900; background-color: #CC9900; box-shadow: 0 0 8px #CC9900; color: #ffffff; }

.slideshow .arrow-left,
.slideshow .arrow-right,
.slideshow .arrow-leftdn,
.slideshow .arrow-rightdn { position: absolute; display: block; width: 40px; height: 80px; top: 160px; background: url(../img/slideshow-arrows.png) no-repeat; overflow:hidden; cursor: pointer; }
.slideshow .arrow-left,
.slideshow .arrow-leftdn { left: 0; }
.slideshow .arrow-right,
.slideshow .arrow-rightdn { right: 0; }
.slideshow .arrow-left { background-position: 0 0; }
.slideshow .arrow-left:hover { background-position: -120px 0; }
.slideshow .arrow-leftdn { background-position: -240px 0; }
.slideshow .arrow-right { background-position: -49px 0; }
.slideshow .arrow-right:hover { background-position: -169px 0; }
.slideshow .arrow-rightdn { background-position: -289px 0; }

.left .slideshow .arrow-left,
.left .slideshow .arrow-right,
.left .slideshow .arrow-leftdn,
.left .slideshow .arrow-rightdn { top: 120px; }

/* announcement */
.announcement { padding: 12px; background: url('../img/announcement-bg.png') repeat; font-size: 17px; font-weight: bold; color: #fff; box-shadow: 0 0 32px #fff; text-align: center; }
.announcement p { margin: 12px 0; }
.announcement a { background: transparent; color: #16a085; text-shadow: 0 0 18px #fff; white-space: nowrap; }

/* issue browser */
.browser.issues { position: relative; margin: 0 0 64px 2.44%; padding: 0 0 32px 0; background-color: #fff; }
.browser.issues:after { position: absolute; z-index: 10; bottom: -24px; width: 100%; height: 24px;
	content: "";
	background: url(../img/issues-bottom.png) top center no-repeat;
	background-size: 100% 24px;
}
.browser.issues > div a { display: block; float: left; margin: 2.44% 0 0 2.44%; width: 21.95%; font-size: 13px; text-align: center; opacity: 0.8; transition: opacity .4s; }
.browser.issues > div a:hover { opacity: 1; }
.browser.issues > div a > img { display: block; width: 100%; }

.browser.issues .controls { position: absolute; bottom: -40px; width: 100%; text-align: center; }
.browser.issues .controls > ul { position: relative; z-index: 11; display: inline-block; border-radius: 8px; margin: 0; padding: 0; background-color: #be2b2b; list-style: none; font-size: 0; white-space: nowrap; }
.browser.issues .controls > ul > li { display: inline-block; margin: 0; height: 54px; padding: 0; font-size: 26px; font-weight: bold; line-height: 54px; text-align: center; color: #fff; }
.browser.issues .controls .prev,
.browser.issues .controls .next { width: 54px; background: #cf6464 center center no-repeat; text-indent: -9999px; cursor: pointer; }
.browser.issues .controls .prev:hover,
.browser.issues .controls .next:hover { box-shadow: 0 0 8px #cf6464; }
.browser.issues .controls .prev { border-radius: 8px 0 0 8px; background-image: url(../img/arrow-left.png); }
.browser.issues .controls .next { border-radius: 0 8px 8px 0; background-image: url(../img/arrow-right.png); }
.browser.issues .controls > ul > li.dropdown { position: relative; display: inline-block; padding: 0 40px 0 14px; background: url(../img/arrow-dropdown.png) center right no-repeat; cursor: default; }
.browser.issues .controls > ul > li.dropdown:hover { box-shadow: 0 0 8px #be2b2b; }
.browser.issues .controls > ul > li.dropdown span { display: block; }
.browser.issues .controls > ul > li.dropdown ul { position: absolute; display: none; left: 0; min-width: 100%; max-height: 270px; overflow: auto; margin: 0; padding: 0; list-style: none; background-color: #fff; color: #be2b2b; -webkit-overflow-scrolling: touch; }
.browser.issues .controls > ul > li.dropdown ul li { box-sizing: border-box; padding: 0 0 0 14px; text-align: left; }
.browser.issues .controls > ul > li.dropdown ul li.active { background-color: #cf6464; color: #fff; }
.browser.issues .controls > ul > li.dropdown ul li:hover { background-color: #be2b2b; color: #fff; }

.webpage .left,
.issues .left { margin-left: 0; width: 65.62%; }
.left h1 { float: left; margin: 0 0 8px 2.44%; color: #34495e; font-family: LatoHeavy, Arial, sans-serif; font-size: 30px; line-height: 30px;  }
.share { float: right; color: #34495e; line-height: 30px; }
.sharethis-inline-share-buttons { float: right; margin-left: 12px; }

.details { position: relative; clear: both; }
.details .feature { float: left; box-sizing: border-box; margin: 0 0 2.44% 2.44%; width: 47.56%; }
.details .feature.wide { float: none; width: auto; }
.details .feature.large img { box-sizing: border-box; margin: 1.5% 0 16px 1.5%; width: 97%; }

.pager { clear: both; display: block; margin: 16px 0 16px 16px; padding: 0; list-style: none; text-align: center; }
.pager li { display: inline-block; margin: 0 2px; }
.pager li.disabled,
.pager li a { display: inline-block; box-sizing: border-box; min-width: 34px; border-radius: 4px; padding: 6px 8px; background-color: #2c81ba; color: #fff; text-decoration: none; transition: background-color 0.25s ease 0s; }
.pager li.disabled { background-color: #ccc; cursor: default; }
.pager li a:hover { box-shadow: 0 0 8px #2c81ba; } /* background-color: #3699DB; */
.pager li.current a { background-color: #fff; color: #2c81ba; }
.pager li.current a:hover { box-shadow: 0 0 8px #fff; }

/* content area */
.body { position: relative; background: url(../img/content-bg.png) repeat; }

/* 3 equal width columns */
.left { float: left; margin: 1.56% 0 0 1.56%; width: 64.06%; }
.slot1 { float: left; width: 48.78%; }
.middle { float: left; margin: 0 0 0 2.43%; width: 48.78%; }
.right { float: left; margin: 1.56% 0 0 1.56%; width: 31.25%; }

.feature { position: relative; display: block; background-color: #fff; color: #34495e; box-shadow: 0 0 16px #aaa; text-decoration: none; overflow: hidden; cursor: pointer; }
.feature > a { display: block; color: #34495e; text-decoration: none; }
.feature table a,
.feature p a { color: #3498db; }
.feature:hover { box-shadow: 0 0 8px #ddd; }

.feature img { display: block; width: 100%; }
.feature img.inline { display: inline; width: auto; max-width: 20px; }
.feature .caption { box-sizing: border-box; position: absolute; bottom: 0; width: 100%; padding: 9px 2px; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 16px; font-weight: bold; text-align: center; }
.feature .caption p { margin: 0; padding: 9px 4px; }
.feature .title { display: block; margin: 16px 14px 4px 16px; font-family: LatoHeavy, Arial, sans-serif; font-size: 24px; font-weight: bold; text-decoration: none; }
.feature table,
.feature p { margin: 0 16px 16px 16px; font-size: 15px; }

.options { box-sizing: border-box; position: absolute; bottom: 16px; left: 0; right: 0; margin: 0; padding: 0; list-style: none; }
.options li { box-sizing: border-box; float: left; margin: 0 0 0 6.66%; width: 40%; text-align: center;  }
.options li a { box-sizing: border-box; display: block; border-radius: 8px; height: 45px; padding: 0 12px; color: #fff; line-height: 45px; text-decoration: none; overflow: hidden; }

.feature-group.sponsors .medium { position: relative; background-color: #c8c8c8; height: 60px; overflow: hidden; }
.feature-group.sponsors .medium > a { color: #34495e; text-decoration: none; }
.feature-group.sponsors .medium p { margin: 0; padding: 12px 12px 16px 132px; font-size: 12px; }
.feature-group.sponsors .medium img { position: absolute; width: 120px; }

.feature-group.sponsors.full-width .medium { height: auto; overflow: visible; margin-bottom: 16px; }
.feature-group.sponsors.full-width .medium > a { display: block; }
.feature-group.sponsors.full-width .medium img { display: block; position: static; width: 100%; }

.feature-group .options { position: static; margin: 0 0 16px 0; }
.feature-group .options li { margin-bottom: 24px; }
.feature-group .options.right { float: none; width: auto; }
.feature-group .options.right li { float: right; }

body.content .left { margin-left: 0; }
.left .feature.content { margin: 0 0 16px 2.44%; padding: 16px; cursor: inherit; }
.left .feature.content:hover { box-shadow: 0 0 16px #aaa; }
.left .feature.content h1 { float: none; margin: 0 0 0 0; font-size: 24px; line-height: 24px; }
.left .feature.content h2 { margin: 20px 0 6px 0; font-size: 24px; line-height: 24px; }
.left .feature.content .byline { clear: both; font-size: 14px; }
.left .feature.content .text { margin: 16px 0 0 0; clear: both; }
.left .feature.content .text p { font-size: 15px; }
.left .feature.content .text ul { overflow: hidden; zoom: 1; }
.left .feature.content table,
.left .feature.content p { margin: 0 0 16px 0; }
.left .feature.content .image { position: relative; }
.left .feature.content .image.left { float: left; margin: 0 8px 8px 0; width: 33%; }
.left .feature.content .image.right { float: right; margin: 0 0 8px 8px; width: 33%; }
.left .feature.content .image.center { margin: 0 0 16px 0; }
.left .feature.content .image img { float: none; }
.left .feature.content .image .caption { padding: 0; font-weight: normal; text-align: left; }
.left .feature.content .image .caption { position: static; bottom: auto; background-color: #000; }
.left .feature.content .image .caption p { margin: 0; padding: 10px 8px; }

.left .feature.content .options { position: static; margin-bottom: 16px; }
.left .feature.content .options li { margin: 0 16px 0 0; width: auto; min-width: 120px; }

.left .feature-group .title { margin-left: 2.44%; }

.left .feature.content a.link.login { cursor: pointer; }

.feature.content .image-row { list-style: none; margin: 0; padding: 0; }
.feature.content .image-row:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.feature.content .image-row li { position: relative; float: left; margin: 0 16px 0 0; padding: 0; }
.feature.content .image-row li:last-child { margin-right: 0; }
.feature.content .image-row li img {}
.feature.content .image-row li .caption { position: static; background-color: transparent; padding: 0; font-size: 12px; color: #000; }
.feature.content .image-row li .caption p { margin: 0; padding: 4px; font-size: 12px; }

.webpage .left .feature.content h1 { margin: 8px 0 12px 0; }

.feature.content > a.print-version { float: right; margin-bottom: 16px; background-color: #3498db; color: #fff; }
.feature.content > a.print-version:hover { box-shadow: 0 0 8px #3498db; }

.left .feature.content .image img.left { float: left; margin: 0 12px 0 0; }
.feature.content section.signup.promo { margin-bottom: 16px; border: 1px solid #3498db; border-radius: 8px; padding: 16px 12px; overflow: hidden; }
.feature.content section.signup.promo p { font-size: 22px; }
.feature.content section.signup .actions { text-align: right; }
.feature.content section.signup a.button.signup { display: inline-block; background-color: #3498db; color: #fff; }
.feature.content section.signup a.button.signup:hover { text-decoration: none; box-shadow: 0 0 8px #3498db; }

/* themes defined in CMS for reusable customizations */
.feature-group .options li.light-blue a,
.feature .options li.light-blue a { background-color: #3498db; color: #ffffff;  }
.feature-group .options li.light-blue a:hover,
.feature .options li.light-blue a:hover { background-color: #3498db; box-shadow: 0 0 8px #3498db; color: #ffffff; }
.feature-group .light-blue .caption,
.feature .light-blue .caption { background-color: rgba(52, 152, 219,0.5); color: #ffffff; }
.feature-group .options li.light-green2 a,
.feature .options li.light-green2 a { background-color: #1abc9c; color: #ffffff;  }
.feature-group .options li.light-green2 a:hover,
.feature .options li.light-green2 a:hover { background-color: #1abc9c; box-shadow: 0 0 8px #1abc9c; color: #ffffff; }
.feature-group .light-green2 .caption,
.feature .light-green2 .caption { background-color: rgba(26, 188, 156,0.5); color: #ffffff; }
.feature-group .options li.brown a,
.feature .options li.brown a { background-color: #9b3e31; color: #ffffff;  }
.feature-group .options li.brown a:hover,
.feature .options li.brown a:hover { background-color: #9b3e31; box-shadow: 0 0 8px #9b3e31; color: #ffffff; }
.feature-group .brown .caption,
.feature .brown .caption { background-color: rgba(155, 62, 49,0.5); color: #ffffff; }
.feature-group .options li.light-green a,
.feature .options li.light-green a { background-color: #1abc9c; color: #ffffff;  }
.feature-group .options li.light-green a:hover,
.feature .options li.light-green a:hover { background-color: #1abc9c; box-shadow: 0 0 8px #1abc9c; color: #ffffff; }
.feature-group .light-green .caption,
.feature .light-green .caption { background-color: rgba(26, 188, 156,0.5); color: #ffffff; }
.feature-group .options li.subscribe-red a,
.feature .options li.subscribe-red a { background-color: #be2c2c; color: #ffffff; font-style: italic;  font-size: 18px; }
.feature-group .options li.subscribe-red a:hover,
.feature .options li.subscribe-red a:hover { background-color: #be2c2c; box-shadow: 0 0 8px #be2c2c; color: #ffffff; }
.feature-group .subscribe-red .caption,
.feature .subscribe-red .caption { background-color: rgba(190, 44, 44,0.5); color: #ffffff; }
.feature-group .options li.dark-blue a,
.feature .options li.dark-blue a { background-color: #34495e; color: #ffffff;  }
.feature-group .options li.dark-blue a:hover,
.feature .options li.dark-blue a:hover { background-color: #34495e; box-shadow: 0 0 8px #34495e; color: #ffffff; }
.feature-group .dark-blue .caption,
.feature .dark-blue .caption { background-color: rgba(52, 73, 94,0.5); color: #ffffff; }
.feature-group .options li.gold a,
.feature .options li.gold a { background-color: #CC9900; color: #ffffff;  }
.feature-group .options li.gold a:hover,
.feature .options li.gold a:hover { background-color: #CC9900; box-shadow: 0 0 8px #CC9900; color: #ffffff; }
.feature-group .gold .caption,
.feature .gold .caption { background-color: rgba(204, 153, 0,0.5); color: #ffffff; }

/* tags */
.tags { margin: 0; padding: 0; list-style: none; }
.tags li { float: left; }
.tags li a { display: inline-block; margin: 1px 2px; border-radius: 6px; padding: 1px 6px; background: #B2BAC2; color: #fff; font-size: 12px; text-decoration: none; }
.tags li a:hover { box-shadow: 0 0 2px #B2BAC2; }

/* categories */
.feature .options li.category-pictorial a { background-color: #18bd9c; }
.feature .options li.category-pictorial a:hover { box-shadow: 0 0 8px #18bd9c; }
.feature.category-pictorial:hover { box-shadow: 0 0 4px #18bd9c; }
.feature.category-pictorial .caption { background-color: rgba(24, 189, 156,0.5); color: #fff; }

.feature .options li.category-news a { background-color: #3799db; }
.feature .options li.category-news a:hover { box-shadow: 0 0 8px #3799db; }
.feature.category-news:hover { box-shadow: 0 0 4px #3799db; }
.feature.category-news .caption { background-color: rgba(55, 153, 219,0.5); color: #fff; }

.feature .options li.category-video a { background-color: #18bd9c; }
.feature .options li.category-video a:hover { box-shadow: 0 0 8px #18bd9c; }
.feature.category-video:hover { box-shadow: 0 0 4px #18bd9c; }
.feature.category-video .caption { background-color: rgba(24, 189, 156,0.5); color: #fff; }

.feature .options li.category-web_exclusive a { background-color: #3799db; }
.feature .options li.category-web_exclusive a:hover { box-shadow: 0 0 8px #3799db; }
.feature.category-web_exclusive:hover { box-shadow: 0 0 4px #3799db; }
.feature.category-web_exclusive .caption { background-color: rgba(55, 153, 219,0.5); color: #fff; }


.feature.large { height: 392px; }
.issues .feature.large { margin-bottom: 0; }

.feature.medium { margin-bottom: 16px; height: 120px; }
.feature.medium img { position: absolute; top: 0; width: 120px; }
.feature.medium .caption { width: 120px; }
.feature.medium .title { margin: 16px 14px 4px 128px; font-size: 14px; }
.feature.medium p { margin-left: 128px; margin-bottom: 8px; font-size: 13px; }
.feature.medium ul { margin: 0 0 0 128px; overflow: auto; padding: 0 0 0 14px; font-size: 11px; }

.feature.medium.text-only .caption { width: 100%; }
.feature.medium.text-only .title { margin-left: 14px; }
.feature.medium.text-only p { margin-left: 14px; }

/* archive */
.feature.content .search { text-align: center; }
.archive-search { width: 240px; border: 2px solid #2c81ba; border-radius: 4px; padding: 4px 8px; font-size: 24px; outline: none; }
.link-toggle { margin: 0 0 0 2px; padding: 0 16px 0 0; background: url(../img/link-off.png) center right no-repeat; }
.link-toggle.on { background-image: url(../img/link-on.png); }
.filters { display: none; text-align: center; padding: 8px 0 0 0; }
.filters select { box-sizing: border-box; margin: 8px 0 0 0; width: 120px; border: 2px solid #2c81ba; border-radius: 4px; color: #2c81ba; font-weight: bold; outline: none; }
.filters select option { padding: 4px; background-color: #fff; color: #000; }
.filters select option[value=""] { font-weight: bold; }
.filters select.align-right option { text-align: right; }
.feature.content .modes { display: flex; justify-content: flex-end; }
.feature.content .modes .active { font-weight: bold; color: inherit; }
 
.feature.content.map-container { padding: 0px; position: relative; }
.map-container .map { height: 500px; }
.map-container .waiting { width: 100%; height: 100%; position: absolute; top: 0px; left 0px; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; }
.map-container .waiting.hide { display: none; }
.map-container .waiting img { width: auto; }
.map .marker.info { width: 320px; }
.map .marker.info p { margin-left: 128px; margin-bottom: 8px; margin-right: 16px; font-size: 13px; }
.map .gm-style-iw.gm-style-iw-c { width: 320px !important; max-width: 320px !important; height: 120px; padding: 0px; border-radius: 0px; }
.map .gm-style-iw-d { width: 320px !important; max-width: 320px !important; }

.map div.map-controls { background-color: #fff; width: 40px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; margin-right: 10px; text-align: center; }
.map div.map-controls div.divider { position: relative; overflow: hidden; width: 30px; height: 1px; margin: 2px 5px; background-color: rgb(230, 230, 230); top: 0px; }
.map div.map-controls div.control { width: 40px; height: 40px; color: rgb(25,25,25); font-family: Roboto,Arial,sans-serif; font-size: 16px; display: flex; justify-content: center; align-items: center; }
.map div.map-controls div.control img { width: 32px; }


.media-player audio { width: 100%; }
.media-player video { width: 100%; }

.embedded-media .media-center iframe { margin-left: 50%; transform: translateX(-50%); }

.embedded-media .media-full-4-3  { position: relative; padding-bottom: 75%; height: 0; }
.embedded-media .media-full-16-9 { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.embedded-media .media-center-50 { position: relative; width: 50%; margin: auto; padding-bottom: 50%; height: 0; }

.embedded-media .media-full-4-3 iframe,
.embedded-media .media-full-16-9 iframe,
.embedded-media .media-center-50 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* shop */
.feature .caption.product-promo-limited { background-color: rgba(61, 51, 255,0.75); }
.feature.content .product-promo-limited { margin: -16px -16px 16px -16px; padding: 12px 24px; background-color: #3d33ff; color: #fff; font-family: LatoHeavy,Arial,sans-serif; font-size: 24px; font-weight: bold; text-align: center; }
.feature .caption.product-promo-sale { background-color: rgba(245, 162, 54,0.75); }
.feature.content .product-promo-sale { margin: -16px -16px 16px -16px; padding: 12px 24px; background-color: #f5a236; color: #fff; font-family: LatoHeavy,Arial,sans-serif; font-size: 24px; font-weight: bold; text-align: center; }
.feature .caption.product-promo-subscribe { background-color: rgba(175, 40, 40,0.75); }
.feature.content .product-promo-subscribe { margin: -16px -16px 16px -16px; padding: 12px 24px; background-color: #AF2828; color: #fff; font-family: LatoHeavy,Arial,sans-serif; font-size: 24px; font-weight: bold; text-align: center; }

.alert { border: 1px solid black; padding: 10px; margin: 10px 0px; border-radius: 4px; position: relative; display: flex; }
.alert.alert-info { background-color: #d9edf7; border-color: #bcdff1; color: #31708f; }
.alert.alert-warning { background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; }
.alert.alert-danger { background-color: #f2dede; border-color: #ebcccc; color: #a94442; }
.alert.alert-success { background-color: #dff0d8; border-color: #d0e9c6; color: #3c763d; }
.alert .close { display: block; width: 40px; height: 40px; opacity: 0.8; text-decoration: none; color: inherit; position: absolute; right: 0px; font-weight: bold; cursor: pointer; line-height: 40px; align-self: center; text-align: center; }
.alert .close:focus, .alert .close:hover { opacity: 1; }

.product-options {}
.product-option { margin: 0 0 8px 0; }
.product-option .quantity { display: inline-block; box-sizing: border-box; width: 48px; height: 32px; text-align: center; }
.product-option select { display: inline-block; box-sizing: border-box; width: 240px; height: 32px; padding-left: 8px; }
.product-option input[type="radio"] { cursor: pointer; }
.product-option label { margin-right: 4px; cursor: pointer; }

.product-option .other { font-size: 15px; font-family: Lato, Arial, sans-serif; }
.product-option .other.dollar,
.product-option .other.number { width: 80px; }

table.product-option td { vertical-align: middle; }
table.product-option td:last-child { width: 100%; }
table.product-option td:last-child select { width: 100%; }

.product-footer { position: relative; float: right; margin: 24px 0 0 0; }
.product-result { position: absolute; bottom: 0; right: 100%; width: 200%; margin: 0 12px 0 0; overflow: auto; }
.message .note,
.message .warning,
.message .error { border: 1px solid #000; padding: 10px 12px; }
.message .note { border-color: #1abc9c; background: #C5EEE6; color: #1abc9c; }
.message .warning { border-color: #ff0; background: #ffe; color: #ff0; }
.message .error { border-color: #f00; background: #fee; color: #f00; }
.product-order { float: right; margin: 24px 0 0 0; }
.product-order .product-total { font-family: LatoHeavy,Arial,sans-serif; font-size: 24px; font-weight: bold; text-align: center; }
.product-order input[type="submit"] { display: block; box-sizing: border-box; height: 45px; margin: 8px 0 0 0; border: none; border-radius: 8px; padding: 0 24px; background-color: #1abc9c; color: #fff; line-height: 45px; overflow: hidden; font-family: Lato,​Arial,​sans-serif; font-size: 16px; cursor: pointer; -webkit-appearance: none; }
.product-order input[type="submit"]:hover { box-shadow: 0 0 8px #1abc9c; }

.discount { color: #1abc9c; }
.promo-code { white-space: nowrap; }

.left .feature.content table.cart { margin: 0; }
.left .content table.cart td { padding: 8px 12px; }
.left .content table.cart td:first-child { border-right: none; }
.cart td img { width: auto; }
.left .feature.content .cart td h2 { margin-top: 4px; }
.cart td:last-child { vertical-align: middle; text-align: center; }
.cart td:last-child .quantity { box-sizing: border-box; width: 48px; height: 32px; text-align: center; }
.cart td:last-child button.remove { display: block; box-sizing: border-box; border: 1px solid #aaa; margin: 4px auto; border-radius: 6px; padding: 4px 6px; background-color: #eee; color: #000; font-size: 11px; cursor: pointer; }
.cart td:last-child button.remove:hover { box-shadow: 0 0 8px #cf6464; border: 1px solid #cf6464; background: #cf6464; color: #fff; }
.cart .product .option { margin: 0 0 4px; }
.cart .order-total td { font-family: LatoHeavy,Arial,sans-serif; font-size: 24px; font-weight: bold; }
.cart .order-total td:first-child { text-align: right; }
.cart .order-total .product-total { min-width: 128px; }
.cart-notes { margin: 4px 0 16px 16px; padding: 0; }

.left .content table td.amount-label { border: none; }

.checkout { position: relative; }
.checkout .form-field { position: relative; display: inline-block; box-sizing: border-box; padding: 8px 8px 0 0; }
.checkout .form-field.full { display: block; padding-right: 0; }
.checkout .form-field.field2 { width: 50%; }
.checkout .form-field.field3 { width: 33.333%; }
.checkout .form-field.field4 { width: 25%; }
.checkout .form-field.field6 { width: 16.666%; }
.checkout .form-field.field8 { width: 12.5%; }
.checkout .form-field.field12 { width: 8.333%; }
.checkout .form-field.field25p { width: 25%; }
.checkout .form-field.field75p { width: 75%; }
.checkout .form-field.field100p { width: 100%; }
.checkout .form-field label { display: block; font-size: 10px; font-weight: bold; }
.checkout .form-field label.description { font-size: 12px; display: inline; }
.checkout .form-field select,
.checkout .form-field input[type="text"],
.checkout .form-field input[type="email"],
.checkout .form-field input[type="tel"] { box-sizing: border-box; width: 100%; padding: 6px 0 6px 8px; font-size: 18px; }
.checkout .form-field select:focus,
.checkout .form-field input[type="text"]:focus,
.checkout .form-field input[type="email"]:focus,
.checkout .form-field input[type="tel"]:focus { box-shadow: 0px 0px 2px 2px rgba(52,152,219,0.5); outline: none; border: 1px solid rgba(52,152,219,0.5); }
.checkout .form-field .radios { border: 1px solid #888; background: #fff; padding: 6px 4px; }
.checkout .form-field .radios label { display: inline-block; margin-right: 14px; white-space: nowrap; font-size: 18px; }
.checkout .form-field input[type="radio"] {}
.checkout .checkbox { font-size: 12px; font-weight: bold; }
.checkout .checkbox.right { float: right; position: relative; top: 8px; margin: 0 8px; width: auto; z-index: 1; }
.checkout h3 { margin: 32px 0 4px 0; font-size: 16px; }
.checkout fieldset { position: relative; margin: 0 0 12px; border: none; border-radius: 4px; padding: 2px 8px 10px; background: #eee; }
.checkout fieldset .fieldset-header:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.checkout hr { margin: 24px 0 0 0; border: none; border-top: 1px solid #ddd; }

.checkout .form-field.select { position: relative; }
.checkout .form-field.select:before { pointer-events: none; content: '\25bc'; position: absolute; top: 52%; right: 14px; color: rgb(52,73,94); font: 14px Lato, Arial, sans-serif; }
.checkout .form-field.select select { background-color: white; -webkit-appearance: none; border: 1px solid #ddd; border-radius: 0px; }


.checkout .hide { display: none; }
.checkout fieldset.stored { min-height: 61px; }

/* field validation error styles */
.form-field.error::after { content: attr(data-error); position: absolute; top: 0; left: 0; right: 8px; overflow: hidden; margin: 8px 0 0; color: #f00; font-size: 10px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; }
.form-field.error label { visibility: hidden; }
.form-field.error input,
.form-field.error select,
.checkout .form-field.error select { border: 1px solid #f00; background: #fee; }
input.error { border-color: #f00; background: #fee; }

.checkout .message { text-align: center; }
.checkout .message > div { display: inline-block; margin: 10px 0 0; }
.order .message > div { display: inline-block; margin: 10px 0 0 0; }
.message > div img.spinner { display: inline-block; width: 32px; height: 32px; vertical-align: middle; }

.order-summary { width: 100%; }
.order-summary .contact { vertical-align: top; padding: 6px 12px; }
.order-summary .quantity { text-align: center; }
.order-summary .amount { text-align: right; }
.order-summary .order-subtotal { text-align: right; }
.order-summary .order-total { font-family: LatoHeavy,Arial,sans-serif; font-size: 24px; font-weight: bold; text-align: right; }

.button { display: block; box-sizing: border-box; min-width: 128px; height: 45px; margin: 8px 0 0 0; border: none; border-radius: 8px; padding: 0 24px; background-color: #1abc9c; color: #fff; line-height: 45px; overflow: hidden; font-family: Lato,​Arial,​sans-serif; font-size: 16px; text-align: center; cursor: pointer; outline: none; -webkit-appearance: none; }
.button:hover { box-shadow: 0 0 8px #1abc9c; }
.button.next { float: right; margin-left: 12px; }
.button.print-form { margin-top: 0; }
.button.back { float: left; margin-right: 12px; background-color: #3498db; }
.button.back:hover { box-shadow: 0 0 8px #3498db; }
.button:disabled { background-color: #ddd; cursor: default; }
.button:disabled:hover { box-shadow: none; }

/* sidebar */
.sidebar {}
.sidebar .feature.promo { margin: 0 0 16px 0; height: auto; background-color: #c8c8c8; box-shadow: 0 2px 2px #888; }
.sidebar .feature.promo img { width: 120px; }
.sidebar .feature.promo.left-image,
.sidebar .feature.promo.right-image { cursor: auto; }
.sidebar .feature.promo.right-image img { float: right; width: 130px; margin: 8px 4px 8px 0; }
.sidebar .feature.promo.left-image img { float: left; width: 120px; margin: 0 16px 8px 16px; }
.sidebar .feature.promo .title { margin: 12px 14px 8px 16px; font-size: 21px; line-height: 100%; }
.sidebar .feature.promo table,
.sidebar .feature.promo p { margin-bottom: 8px; font-size: 12px; }
.sidebar .feature.promo .options { position: static; }
.sidebar .feature.promo.right-image .options li { margin: 0 0 12px 14px; }

.sidebar .feature .frame { float: left; height: 120px; }
.sidebar .feature.large { margin-bottom: 16px; }

.feature-group { position: relative; clear: both; }
.feature-group > .title { margin: 0 0 8px 0; border-top: 1px solid #c8c8c8; padding: 8px 0 0 0; font-family: LatoHeavy, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #34495e; }
.sidebar .feature-group .feature { float: left; height: auto; min-height: 120px; background-color: transparent; box-shadow: none; overflow: visible; }
.sidebar .feature-group .feature:hover { background-color: rgba(255,255,255,0.25); box-shadow: 0 0 16px #ccc; }
.sidebar .feature-group .feature .title { margin-top: 4px; font-size: 16px; }
.sidebar .feature-group .feature img { background-color: #fff; }
.sidebar .feature-group .feature table,
.sidebar .feature-group .feature p { margin: 0 4px 4px 128px; }
.sidebar .feature-group .feature.text-only p { margin-left: 0; }

.sidebar ul.categories { margin: 0 0 24px 0; padding: 0; list-style: none; }
.sidebar ul.categories li { margin: 0; padding: 0; }
.sidebar ul.categories li a { display: block; box-sizing: border-box; margin: 0 0 12px 0; border-radius: 8px; padding: 10px 12px; background-color: #3498db; color: #fff; text-align: center; text-decoration: none; }
.sidebar ul.categories li a:hover { box-shadow: 0 0 8px #3498db; }

/* promotions */
.promos { clear: both; color: #34495e; font-size: 14px; }
.promos > div { float: left; position: relative; height: 94px; background-color: #c8c8c8; overflow: hidden; }
.promos > div:hover { box-shadow: 0 0 8px #3498db; }
.promos > div > a { display: block; color: #34495e; text-decoration: none; }
.promos > div .fade-to-grey { height: 16px; }
.promos > div.medium { margin: 0 0 1.56% 1.56%; width: 47.66%; }
.promos > div img { display: block; position: absolute; top: 0; }
.promos > div p { margin: 12px 16px 16px 196px; font-size: 14px; }

/* footer */
.footer { padding: 16px 32px; background-color: #2c81ba; color: #fff; }
.footer p { float: left; color: #61a1cb; }
.footer a { color: #61a1cb; }
.footer a:hover { color: #fff; }
.footer .nav.social { float: right; }
.footer .nav.social li a { color: #fff; }

/* profile/subscriptions view */
.profile .links { margin-bottom: 20px; }
.profile form { font-size: 0px; }
.profile div.bottom { display: flex; }
.profile a.button { display: inline-block; }
.profile a.button:focus,
.profile a.button:hover { text-decoration: none; }
.profile div.message { margin-left: 20px; }

.profile .subscription { margin-top: 20px; background-color: #eee; box-shadow: 0 2px 2px #aaa; padding: 10px; }
.profile .subscription span.expire { color: #be2c2c; }
.profile .subscription .link { cursor: pointer; }
.profile .subscription .left { flex-grow: 1; float: none; margin: 0; }
.profile .subscription .right { text-align: right; float: none; margin: 0; }
.profile .subscription .bottom { flex-basis: 100%; }
.profile .subscription .product { display: flex; }
.profile .subscription .product img { align-self: center; width: 40px; margin-right: 10px; }
.profile .subscription .name { margin-top: 10px; display: flex; }
.profile .subscription .name .button { margin: 0px; }
.profile .subscription .addresses { display: none; border-top: 1px solid #c8c8c8; }
.profile .subscription .links { display: none; border-top: 1px solid #c8c8c8; }
.profile .subscription .address { display: flex; flex-wrap: wrap; padding: 10px 0px; }
.profile .subscription .address .button { margin: 0px; }
.profile .subscription .separator { margin-top: 10px; border-bottom: 1px solid #c8c8c8; color: #2c81ba; font-weight: bold; }
.profile .subscription .hide { display: none; }

.profile .subscription .links .feature-group { margin-top: 10px; }
.profile .subscription .links .feature { margin: 0 1.22% 2.44% 1.22% }
.profile .subscription .links .feature p { margin-left: 128px; }

.profile .subscription .address div.row1 { position: relative; }
.profile .subscription .address .label.mailto { margin-left: 10px; font-size: 11px; padding: 2px 5px; border-radius: 4px; background-color: #888; color: white; position: absolute; top: 0px; }
.profile .subscription .address .link.mailto { margin-left: 10px; }
.profile .subscription .address.primary .link.mailto { display: none; }
.profile .subscription .address:not(.primary) .label.mailto { display: none; }

.profile a.close { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; font-weight: bold; color: inherit; cursor: pointer; text-decoration: none; }
.profile a.close:hover { color: #be2c2c; }

.profile .address-template { display: none; }

.profile .payment { margin-top: 20px; background-color: #eee; box-shadow: 0 2px 2px #aaa; padding: 10px; display: flex; }
.profile .payment .link { cursor: pointer; }
.profile .payment .left { flex-grow: 1; float: none; margin: 0; }
.profile .payment .right { display: flex; text-align: right; float: none; margin: 0; width: auto; align-items: center; }
.profile .payment span.expired { color: #be2c2c; }

.profile a.button.red { background-color: #be2c2c; }
.profile a.button.red:focus,
.profile a.button.red:hover { box-shadow: 0 0 8px #be2c2c; }
.profile a.button.blue { background-color: rgb(52, 152, 219); }
.profile a.button.blue:focus,
.profile a.button.blue:hover { box-shadow: 0 0 8px rgb(52, 152, 219); }
.profile a.button.blue-invert { background-color: white; color: rgb(52, 152, 219); }
.profile a.button.blue-invert:focus,
.profile a.button.blue-invert:hover { box-shadow: 0 0 8px white; }

/* modal dialog */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); text-align: center; }
.modal .modal-dialog { z-index: 1001; display: inline-block; box-shadow: 0 0 16px rgba(0,0,0,0.8); background-color: white; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%; }
.modal .modal-header { padding: 5px 20px; text-align: left; line-height: 40px; color: #fff; font-weight: bold; background-color: #2c81ba; }
.modal .modal-header .modal-title { font-size: 20px; }
.modal .modal-header .close { display: block; width: 40px; text-align: center; margin-right: -10px; opacity: 0.8; float: right; font-size: 28px; }
.modal .modal-header .close:hover,
.modal .modal-header .close:focus { opacity: 1; text-decoration: none; cursor: pointer; }
.modal .modal-body { background-color: #fff; text-align: left; padding: 20px; }
.modal .modal-body .modal-alert { margin-bottom: 10px; }
.modal .modal-body .modal-content label { display: block; font-size: 10px; font-weight: bold; }
.modal .modal-body .modal-content input { display: block; box-sizing: border-box; padding: 6px 0 6px 8px; font-size: 18px; margin: 5px 0px; width: 100%; min-width: 350px; }
.modal .modal-body .modal-content input[type="radio"] { min-width: auto; }
.modal .modal-footer { display: flex; text-align: left; min-height: 40px; line-height: 40px; color: #fff; font-weight: bold; padding: 20px; padding-top: 0px; }
.modal .modal-footer div.links { display: inline-block; flex-grow: 1; text-align: right; align-self: flex-end; line-height: initial; }
.modal .modal-footer div.links a { cursor: pointer; line-height: 40px; font-weight: normal; }
.modal .modal-footer a.button { height: 40px; line-height: 40px; display: inline-block; margin: 0; margin-right: 10px; align-self: flex-end; }
.modal .modal-footer a.button:hover,
.modal .modal-footer a.button:focus { text-decoration: none; box-shadow: 0 0 8px #1abc9c; }
.modal .modal-footer a.button.red { background-color: #9b3e31; color: white; }
.modal .modal-footer a.button.red:hover,
.modal .modal-footer a.button.red:focus { box-shadow: 0 0 8px #9b3e31; }
.modal .modal-footer a.button.invert.red { background-color: #ddd; color: #9b3e31; }
.modal .modal-footer a.button.invert.red:hover,
.modal .modal-footer a.button.invert.red:focus { box-shadow: 0 0 8px #ddd; }

.modal .modal-footer a.button.delete.right { position: absolute; right: 10px; width: 128px; }

.modal .modal-body .checkout form { font-size: 0px; max-width: 600px; }
.modal .modal-body .checkout form input { min-width: auto; margin: 0px; }

.modal .modal-body .option input { display: inline; width: auto; }
.modal .modal-body .option label { display: inline; font-size: inherit; }

/* loading gif */
body > .loading { position: fixed; z-index: 5000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0); }
body > .loading > div { background: white; margin:-22px 0 0 -22px; position: fixed; top:50%; left:50%; border-radius: 10px; display:block; z-index: 5001; }
body > .loading > div > div { background:url('/img/spinner.gif') 50% 50% no-repeat; width:44px; height:44px; }
../img/spinner.gif


/* Responsive: Smaller Desktop Browsers Tablets */
@media (max-width: 1024px) {
	.header .debug .full { display: none; }
	.header .debug .fluid-wide { display: block; }
    .modal .modal-dialog { min-width: 60%; }
}

/* Responsive: Typical Tablets */
@media (max-width: 860px) {
	.header .debug .fluid-wide { display: none; }
	.header .debug .fluid-narrow { display: block; }
    .modal .modal-dialog { min-width: 70%; }

	.nav.primary { width: 90%; min-width: 280px; }
	.nav.secondary { width: 40px; height: 40px; overflow: visible; background: url(../img/search-white.png) center center no-repeat; cursor: pointer; }
	.nav.secondary.active { background: #fff url(../img/search-blue.png) center center no-repeat; box-shadow: 0 0 8px #444; }
	.nav.secondary li { display: none; position: absolute; top: 40px; right: 0; background-color: #fff; box-shadow: 0 4px 4px #888; }
	.nav.secondary .search { position: absolute; width: auto; }
	.nav.secondary .search input { margin: 8px; width: auto; }
	.nav.secondary.active li.narrow-only { display: none; }
	.nav.secondary.active li.wide-only { display: block; }

	.announcement { font-size: 16px; }

	/* two equal width columns */
	.left { width: 47.66%; }
	.feature.slot1 { width: auto; height: 120px; }
	.feature.slot1 .frame { position: static; }
	.feature.slot1 img { position: absolute; top: 0; width: 120px; height: 120px; }
	.feature.slot1 .caption { width: 120px; }
	.feature.slot1 .title { margin: 16px 14px 4px 128px; font-size: 14px; }
	.feature.slot1 p { margin-left: 128px; font-size: 13px; }
	.middle { margin: 16px 0 0 0; width: auto; }
	.slot4 { display: none; }
	.right { margin: 1.56% 0 0 1.56%; width: 47.66%; }

	/* simple two-column layout */
	.issues .left,
	.webpage .left,
	.content .left { width: 97.67%; }

	.feature.content { margin: 0 14px 16px 14px; }
	.sidebar .feature.promo { width: 97.56%; }
	.sidebar .feature.promo.cart-items { display: none; }

	.sidebar.right { position: relative; margin: 1.56% 0 0 0; width: 97.67%; }
	.sidebar .feature.promo,
	.sidebar .feature-group { margin: 0 0 2.44% 2.44%;  }
	.sidebar .feature { float: left; margin: 0 0 2.44% 2.44%; width: 47.56%; }

	.promos > div { height: 60px; }
	.promos > div img { width: 120px; }
	.promos > div p { margin: 6px 8px 8px 128px; font-size: 12px; }
	.promos > div .fade-to-grey { height: 8px; }
}
@media(max-width: 760px) {
    .modal .modal-dialog { min-width: 80%; }
    .header .nav.social { display: none; }
}

/* Responsive: Typical Smartphones in landscape and Tablets in portrait */
@media (max-width: 636px) {
    .header h1 { width: 30%; }
    .header h1 a { width: 100%; background-size: 100%; }
}
@media (max-width: 560px) {
	.header .debug .fluid-narrow { display: none; }
	.header .debug .minimum { display: block; }
	.header .debug .landscape { display: block; }
    .modal .modal-dialog { min-width: 90%; }

	.wide-only { display: none; }
	.narrow-only { display: block; }

	.header { height: 92px; /*padding: 0 10px 0 12px;*/ }
	.header h1 { position: absolute; display: block; left: 16px; right: 230px; }
	/*.header h1 a { width: 55%; background-size: 100%; }*/
	.header .nav.social { display: none; }

	/* hide small body text in slides and only show titles */
	.slideshow .slides .overlay p,
	.slideshow .slides .overlay ul { display: none; }
	.slideshow .slides .overlay .button { height: 72px; margin: 68px 0 0 16px; border: 2px solid #2c81ba; border-radius: 8px; font-size: 32px; line-height: 72px; }

	/* tighten padding around announcement */
	.announcement { font-size: 14px; padding: 4px 12px; }
	.announcement p { margin: 4px 0; }

	/* 1 column content */
	.body { padding: 0 8px; }
	.left { float: none; margin: 8px 0 0 0; width: auto; }
	.middle { float: none; margin: 8px 0 0 0; }
	.feature.medium { margin: 0 0 8px 0; }
	.slot1 { float: none; }
	.slot4 { display: block; }
	.right { float: none; margin: 0 0 8px 0; width: auto; }
	.right.feature.large { height: auto; }

	.issues .left,
	.webpage .left,
	.content .left { width: auto; }
	.issues .browser.issues { margin-left: 0; }
	.issues .left .details .feature.large { height: auto; margin-bottom: 8px; }
	.issues h1 { float: none; }
	.issues .share { margin-top: 8px; }
	.details .feature { margin: 0 0 8px 0; float: none; width: auto; }

	.left .feature.content { margin: 0 0 16px 0; }

	.sidebar.right { width: auto; }
	.sidebar .feature.promo,
	.sidebar .feature-group { width: auto; margin: 0; }
	.sidebar .feature-group > .title { margin-left: 0; padding-left: 8px; }
	.sidebar .feature { float: none; width: auto; }
	.sidebar .feature.promo { margin: 0 0 8px 0; }

	.promos > div { float: none; height: 94px; }
	.promos > div.medium { margin: 0 0 8px 0; width: auto; }
	.promos > div img { width: auto; }
	.promos > div p { margin: 12px 16px 16px 196px; font-size: 14px; }
}

@media (max-width: 480px) {

	/* small logo */
	.header { height: auto; padding: 0; }
	.header h1 { position: relative; left: auto; right: auto; margin: 0 0 0 22px; }
	.header h1 a { height: 84px; }
    .modal .modal-dialog { min-width: 100%; }
    .modal .modal-body .modal-content input { min-width: auto; }

	/* small flags to right of small logo */
	body .nav.upper { display: block; position: absolute; top: 0; right: 1px; float: none; white-space: nowrap; }
	body .nav.upper > li { width: 60px; padding: 0px 6px 14px 6px; background-size: 60px; }
	body .nav.upper li a { font-size: 9px; font-weight: normal; font-style: normal; }
	body .nav.upper li.star a:after { width: 48px; }
	body .header h1 { display: inline-block; margin: -12px 0 0 6px; }
	body .header h1 a { width: 128px; height: 54px; background-size: 128px; }

	/* reduce primary nav font */
	.nav.primary li a { font-size: 14px; font-weight: bold; }
	.nav.primary li ul li a { padding: 12px 16px; }

	/* full width search box */
	.nav.secondary .search { padding: 4px 0; }
	.nav.secondary .search input { margin: 8px; width: 304px; }

	/* narrow cart */
	.cart td img { width: 48px; }
	.cart td .summary p { font-size: 14px; }
	.order-summary td { font-size: 14px; }
	.left .content table.cart td { padding: 2px 4px; font-size: 14px; }
	.left .feature.content .cart td h2 { font-size: 18px; line-height: 18px; }
	.promo-code { white-space: normal; }
	.cart .order-total .product-total { min-width: 0; }

	/* reduce input font and padding to fit more text */
	.checkout .form-field select,
	.checkout .form-field input[type="text"],
	.checkout .form-field input[type="email"],
	.checkout .form-field input[type="tel"] { padding: 1px 0 1px 2px; font-size: 12px; }
	.checkout .same-as { float: none; position: relative; top: auto; margin: 8px 8px 8px 0; }
    
    .checkout .form-field.select:after { font-size: 12px; top: 60%; right 10px; }
}

@media (max-width: 384px) {
	/* reduce promos to help fit text */
	.promos > div { height: 60px; }
	.promos > div img { width: 120px; }
	.promos > div p { margin: 6px 8px 8px 128px; font-size: 12px; }
	.promos > div .fade-to-grey { height: 8px; }

	/* super-narrow cart - hide product image column */
	.cart td img { display: none; }
	.left .content table.cart td:first-child { border-right: none; padding: 0; }
	.left .content table.cart td:nth-child(2) { border-left: none; }
}

/* Responsive: Typical Smartphones in portrait */
@media (max-width: 336px) and (orientation: portrait) {
	/* remove left/right margins */
	.body { padding: 0; }
	.sidebar ul.categories { margin: 0 8px; }
}


@media print {
	body { background-color: transparent; }
	.printable .page { box-shadow: none; }
	.printable .body { background-image: none; }
	.printable.webpage .left { width: auto; }
	.printable.webpage .left .feature.content { margin: auto; padding: 0; box-shadow: none; }

	.printable .no-print,
	.printable .header,
	.printable .navbar,
	.printable .button,
	.printable .right.sidebar,
	.printable .promos,
	.printable .footer { display: none; }
}