/* Guide page specific */

#guide h1 				{font-size:48pt; line-height:102% !important; margin:20px 0 12px 0; font-family:'Playfair', Times, "Times New Roman", serif
						xfont-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 	
						font-weight:300; letter-spacing:-.03em; padding-right:0; color:#212529;}
#guide h2 				{font-size:24pt; color:#000 !important; font-weight:500 !important; margin:4px 0 6px 0 !important;}
#guide .byline 			{float:left; margin-right:8px; font-size:14pt; line-height:135%; margin-bottom:4px;}
#guide .dateline 		{float:left; margin-right:8px; font-size:14pt; line-height:135%; margin-bottom:4px;}
#guide .social 			{float:left; margin-right:8px; font-size:14pt; line-height:135%; margin-bottom:4px;}
#guide h2.deck 			{font-size:18pt; line-height:120%; margin:-8px 0 18px 0; padding-bottom:12px; font-weight:300; font-weight:300 !important;}
#guide .image-caption 	{font-size:92%; line-height:120%; color:#666; border-top:1px dotted #CCC; margin:8px 0 10px 0; padding:8px 0 0 0;}
#guide .image-credit 		{font-size:10px; line-height:100%; color:#999; margin:6px 0 -8px 0; padding:0 2px 0 0; text-align:right;}
#guide #offsite-link 		{padding:8px; font-size:110%; width:40% !important; min-width:280px; margin-top:10px; margin-bottom:20px;}
#guide #offsite-link i	{font-style:normal !important;}
#guide #offsite-link a	{color:#DDD !important;}
#guide #offsite-link a:hover {color:#FFF !important;}

#guide .slideshow figure {width:32%; float:left; margin:4px 4px 6px 0;}
#guide .slideshow figure h2 {font-size:100%;}
#guide .slideshow figure .slideshow-desc {font-size:80%; color:#999 !important; width:100%;  min-height:20px; 
						text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#guide .slideshow figure .video {overflow:hidden; height:100px; max-height:100px; display:flex; object-fit:cover;}
#guide .slideshow figure .video img {width:110%; margin:-10px 0 -10px 0; object-position:50% 50%;}
#guide .btn-slideshow 	{width:98%; margin:4px 20px 20px 0px; font-size:120%;}
#guide .btn-slideshow a 	{color:#EEE !important;}
#guide .btn-slideshow a:hover {color:#FFF !important;}
#guide .slideshow h2		{margin-top:-4px !important;}
#guide .break			{height:0px !important;}
#guide .break::after 		{content: "";display: block;clear: both;}
#guide hr				{height:11px; margin:5px 0 5px 0;}
#guide .red-overline		{width:300px; border-bottom:1px dotted #cc0000; color:#cc6666; margin:20px 0 10px 0; padding:0 4px 4px 4px;}
#guide .hidden-summary	{display:none; visibility:hidden;}
#guide .v-space-60		{height:60px;}
#guide .v-space-90		{height:90px;}
#guide .v-space-120		{height:120px;}

#guide p img				{margin-bottom:6px; margin-top:6px;}
/*
#guide .image			{width:30%; max-width:220px; max-height:220px; margin:0 18px 0 0; float:left; overflow:hidden; 
						display:flex; align-items:center; justify-content:center;}
#guide .image img 		{width:100% !important; margin:0; object-position:50% 50%;}
*/
#guide .promobox			{font-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#666; border-radius:4px; 
						border:1px solid #DDD; background-color:#EEE; padding:4px 6px 10px 16px; min-height:240px;}
#guide .promobox h3		{color:#666; font-weight:400; font-size:140%; margin:4px 0 6px 0;}

.editors-picks .image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

.middle-column			{float:right; min-height:200px; width:36%; max-width:620px; border:1px dotted #FFF; margin:20px 0 20px 18px; color:#666; background-color:#FFF; margin-bottom:1200px;}
.middle-column .img-responsive img {width:100% !important; height:auto; border-radius:4px;}
.middle-column .img-logo img {width:100% !important; height:auto;}
.left-column				{border:1px solid #EEE;}

#guide table#noborders td {border-bottom:1px solid #FFF !important;}

/* Editor Styles */
#cms-edit				{padding:0px 0px 0px 0px; border-radius: 3px 3px 0px 0px; border:1px solid #DEDEDE; text-align:center; width:58px; height:24px;
						background:#EEEEEE; z-index:15; position: fixed;right: 0px; top:142px; -moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);
						-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform-origin: bottom right; margin:0 -1px 0 0; color:#CDCDCD;
                          text-transform:uppercase; letter-spacing:.05em;}
#cms-edit:hover			{background:#FFFFFF; border:1px solid #EEEEEE; color:#BBB !important;  width:58px; height:25px; top:141px;
						-webkit-box-shadow: -4px 7px 11px -2px rgba(77,69,77,1); -moz-box-shadow: -4px 7px 11px -2px rgba(77,69,77,1);
						box-shadow: -4px 7px 11px -2px rgba(77,69,77,1); transition-duration:.25s; transition-timing-function:linear;}
#cms-edit p 				{display:inline-block;line-height:24px; font-size:10px; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif;}

/* Story Styles */
#storybody span[style]{ line-height: inherit !important; font-size: inherit !important;}
/*span[style]{ line-height: inherit !important; font-size: inherit !important;}
span[itemprop="articleBody"] [style]{ line-height: inherit !important; font-size: inherit !important;}*/

#storybody {font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14pt; line-height:145%; padding:0 20px 0 0; color:#333; min-height:800px;}
#storybody .articleDateline {font-family:Georgia, "Times New Roman", Times, serif; font-size:16pt; line-height: 18pt; color:#666; margin:16px 0px 6px 0px;}
#storybody b {color:#333; font-weight:bold; }
#storybodysnippet a>b, .storybodysnippet a>b:visited, .storybodysnippet b>a, .storybodysnippet b>a:visited  {color:#06C;}
#storybodysnippet td {line-height:120%;}
#storybody .posted { font-family:Arial,Helvetica,sans-serif; font-size:8pt; line-height:11pt; margin-left:2px; margin-bottom:2px; font-weight:normal; color: #666;}
#storybody p {padding: 0px; margin:0px 0px 12px 0px;}
td.storyLeft {padding-right: 12px;}
#storybody blockquote p {margin:0px 0px 10px 2px; padding:6px;}
#storybody blockquote { xfont-family: Arial, Helvetica, sans-serif; /*font-size: 10pt;*/ font-style: normal; line-height: normal; color: #6492C6; border-left:2px solid #eee; margin: 0px 0px 10px 2px; padding-top: -10px; padding-right: 6px; padding-bottom: 8px; padding-left: 6px;}
#storybody blockquote ul {font-size:116%; line-height:100%;}
#storybody blockquote ol {font-size:116%; line-height:100%;}
#storybody em {font-family:Roboto, Helvetica, Arial, sans-serif; font-style: italic;}
#stroybody blah {font-family:"Lucida Bright", "DejaVu Serif", Georgia, "serif";}

#storybody font {font-size: 12pt !important; line-height:16pt !important;}
#storybody .wlWriterEditableSmartContent {display:none !important;}
#storybody table {border-collapse: collapse; font-size:90%;}
#storybody table.table-width {max-width:1000px;}
#storybody table .small {line-height:110% !important; font-size:70%;}
#storybody table tr {border:1px solid #CCC;}
#storybody table td {padding:6px;}
#storybody span {font-family:Arial, Helvetica, sans-serif !important; font-size: 12pt !important; line-height:16pt !important; color:#333 !important;}

#storybody i {font-style:italic;}
#storybody #storyside {float:left; margin:10px 18px 8px 0px; width:280px; line-height:15pt;}
#storybody h1 {color: #900; font-size:1.4em; line-height:110%; letter-spacing:-0.05em; margin: 10px 0 10px 0; text-transform: uppercase;}
#storybody h2 {font-size:22pt; color:#000; margin:14px 0px 8px 0px; letter-spacing:0px; font-weight:300;}
#storybody h3 {font-size:20pt; margin:14px 0px 8px 0px; letter-spacing:0px; font-weight:500;}
#storybody h4 {font-size:18pt !important; color:#666 !important; font-weight:300 !important;}
#storybody h6 { font-family:Arial, Helvetica, sans-serif; width:170px; float:left; margin:6px 14px 8px 0px; border-top:8px solid #C99; padding:8px 8px 4px 0px; font-size:11pt; color:#903; font-weight:bold; line-height:120%;}
#storybody h6 i {margin:6px 6px 0px 0px; clear:left; display:inline-block; width:170px; padding:4px 0px 0px 0px; border-top:1px dotted #C99; font-size:11pt; color:#903; font-weight:normal; line-height:130%; text-align:right; }
#storybody strong {/*font: bold 13pt Arial,sans-serif; */ color:#000000; margin:0px; }
#storybody .photosmleft	{float:left; margin-right: 16px; padding-top:4px; max-width:35%; width:auto; display:inline-block; width:180px;}
#storybody .photosmright {float:right; margin-left: 16px; padding-top:4px; max-width:35%; width:auto; display:inline-block; width:180px;}
#storybody .photosmleft .caption, #storybody .photosmright .caption {width:inherit; font-size:10pt; line-height:14pt; color:#777; margin:-4px 0 0 0; padding:0px;}
#storybody .photoright {float:right; margin-left: 12px; padding-top:4px;}
#storybody .photoleft {float:left; margin-right: 12px; padding-top:4px;}
#storybody .photoR {float:right; margin-left: 12px; padding-top:4px;}
#storybody .photoL {float:left; margin-right: 12px; padding-top:4px;}
#storybody .sidebar {float:left; width:240px; margin-right: 12px; padding-top:4px; font-size:11pt; line-height:12pt;}
#storybody .sidebar img {max-width:240px; padding-top:4px; margin-bottom:4px; font-size:11pt; line-height:12pt;}
#storybody .sidebarL {float:left; width:240px; margin-right:12px; padding-top:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebarL img {max-width:240px; padding-top:4px; margin-bottom:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebarL li {font-size:10pt; line-height:12pt;}
#storybody .sidebarR {float:right; width:240px; margin-left: 12px; margin-right: 20px; padding-top:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebarR img {max-width:240px; padding-top:4px; margin-bottom:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebarR li {font-size:10pt; line-height:12pt;}
#storybody .aboutbox {padding:6px 8px 6px 8px; background-color:#e9e9e9; border:1px solid #c5d0db; -moz-border-radius: 4px;-webkit-border-radius: 4px; margin-right:18px; display:table; margin-top:4px; width:100%;}
#storybody table {margin-bottom:12px; clear:left;}
#storybody img {height: auto;max-width: 100%;}
#storybody .quote { font-family:Arial, Helvetica, sans-serif; width:170px; float:left; margin:6px 14px 8px 0px; border-top:8px solid #C99; padding:8px 8px 4px 0px; font-size:11pt; color:#903; font-weight:bold; line-height:120%;}
#storybody .quote i {margin:6px 6px 0px 0px; clear:left; display:inline-block; width:170px; padding:4px 0px 0px 0px; border-top:1px dotted #C99; font-size:11pt; color:#903; font-weight:normal; line-height:130%; text-align:right; }
#storybody ul {margin: 0px 0px 20px 4px; padding-left:20px; color:#444 !important;}
#storybody ol {margin: 0px 0px 20px 8px; padding-left:24px; color:#444 !important;}
#storybody ul li {xlist-style-image:url(../bullet_gray.html);margin-left:10px;margin-bottom:8px;padding-right:30px; color:#444;font-size: 90%; line-height:130%; /*margin-top:-6px;*/}
#storybody ul ul {margin: 0px 0px 8px 20px;color:#666;}
#storybody ul ul li {color:#000; text-size:9pt important!; line-height:11pt;}
#storybody ol li {list-style-image:none;}
#storybody ol ol {margin: 0px 0px 8px 20px; color:#666;}
#storybody ol ol li {color:#000; text-size:9pt important!; line-height:11pt;}
#storybody li {list-style-image:url(../bullet_gray.html);margin-left:8px;margin-bottom:8px;padding-right:30px; font-size:100%; line-height:138%; /*margin-top:-6px;*/}
#storybody ul ul li {list-style-image:url(../bullet_gray3.html);margin-left:6px;margin-bottom:8px;padding-right:30px; font-size:96%; line-height:114%; /*margin-top:-6px;*/}
#storybody ul ul ul li {list-style-image:url(../bullet_gray2.html);margin-left:6px;margin-bottom:8px;padding-right:30px; font-size:90%; line-height:108%; /*margin-top:-6px;*/}

#storybody .photoR .sidebarR {float:left; margin-left: 0px; padding-top:0px;}
#storybody img {height:auto;}
#storybody .photoleft {float:left; margin: 0 20px 8px 0; width:36%;}
#storybody .photoright {float:right; margin:0 0 8px 20px; width:36%;}

#storybody .photofull {margin:8px 0 16px 0;}
#storybody .photofull img {width:99% !important; height:auto;}
#storybody .photofull .caption {width:99%; border-top:1px dotted #999; padding:10px 0 20px 0;}
#storybody .photoleft img, #storybody .photoright img, #storybody .photofull img {margin: 4px 0 8px 0; display:block !important; max-width:100% !important; height:auto !important;}
#storybody .photoleft .caption, #storybody .photoright .caption, #storybody .photofull .caption {font-size:86%; line-height:120%; color:#666;}
#storybody .photoleft .caption p, #storybody .photoright .caption p, #storybody .photofull .caption p {font-size:86%; line-height:120%; color:#666;}
#storybody .calloutleft {float:left; width:40%; min-width:180px; margin:5px 15px 8px 0; padding:10px 4px 4px 0; border-top:6px solid #eabda5; border-bottom:1px solid #FFF; font-size:24px; font-weight:300; line-height:28px; color:#ea5800;}
#storybody .calloutright {float:right; width:35%; min-width:180px; margin:5px 0 8px 15px; padding:10px 0 4px 4px; border-top:6px solid #eabda5; border-bottom:1px solid #FFF; font-size:24px; font-weight:300; line-height:28px; color:#ea5800;}
#storybody .calloutattrib {font-size:16px; font-weight:300; line-height:21px; font-style:italic; text-align:right;}

#storybody .sidebar 	{float:left; width:300px; margin-right: 12px; padding-top:4px; font-size:11pt; line-height:12pt;}
#storybody .sidebar img {max-width:280px; padding-top:4px; margin-bottom:4px; font-size:11pt; line-height:12pt;}
#storybody .sidebar-left {float:left; width:280px; margin-right:18px; padding-top:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebar-left img {max-width:280px; padding-top:4px; margin-bottom:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebar-right {float:right; width:280px; margin-left: 12px; margin-right: 6px; padding-top:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebar-right img {max-width:280px; padding-top:4px; margin-bottom:4px; font-size:10pt; line-height:12pt;}
#storybody .sidebar-right h3, #storybody .sidebar-right h4, #storybody .sidebar-full h3, #storybody .sidebar-full h4, #storybody .sidebar-left h3, #storybody .sidebar-left h4  {font-size:14pt !important; line-height:15pt; margin-bottom:8px; margin-top:0px; display:block !important; visibility:visible !important;}
#storybody .sidebar-right p, #storybody .sidebar-left p, #storybody .sidebar-full p {
	line-height:130% !important; color:#666 !important; margin-bottom:10px; padding:0;}
#storybody .sidebar-right li, #storybody .sidebar-left li, #storybody .sidebar-full li {font-size:10pt; line-height:12pt; margin-left:0; padding-left:0;}
#storybody .sidebar-right ul, #storybody .sidebar-left ul, #storybody .sidebar-full ul {margin-left:0; padding-left:24px;}
#storybody .sidebar-right, #storybody .sidebar-left {box-shadow:1px 2px 5px rgba(0,0,0,0.2), 1px 2px 5px rgba(0,0,0,0.2);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); padding:10px 4px 6px 10px; margin-bottom:12px;}
#storybody .sidebar-right:hover, #storybody .sidebar-left:hover {box-shadow: 0 6px 12px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.sidebar-full {background-color:#f5f6f6; padding:12px 14px 12px 16px; box-shadow:2px 2px 2px #c1c1c1; font-size:90%; display:table; border:1px solid #E9E9E9; -moz-border-radius: 4px;-webkit-border-radius: 4px; margin:20px 18px 20px 0px; display:table; width:100%; line-height:135%;}
.sideleft {background-color:#f5f6f6; float:left; width:30%; min-width:180px; padding:10px; margin:2px 18px 15px 0; box-shadow:2px 2px 2px #c1c1c1; font-size:14px;}
.sideright {background-color:#f5f6f6; float:right; width:35%; min-width:180px; padding:10px; margin:2px 0 15px 18px; box-shadow:2px 2px 2px #c1c1c1;font-size:14px;}
.sidefull {background-color:#f5f6f6; padding:10px; margin:15px 0 15px 0; box-shadow:2px 2px 2px #c1c1c1; font-size:14px; display:table;}
.sideleft h4, .sideright h4, .sidefull h4, .aboutbox h4 {font-size:24px; padding-bottom:6px; margin-top:4px; margin-bottom:12px; border-bottom:1px dotted #06C; font-weight:normal; font-family:roboto condensed, Arial, sans-serif;}
.sideleft p, .sideright p, .sidefull p, .aboutbox p {font-size:14pt; line-height:18pt;}
.sideleft img, .sideright img, .sidefull img, .aboutbox img {max-width:100% !important; display:block !important; height:auto !important; margin-bottom:8px;}
.sideright ul, .sideleft ul, .sidefull ul, .aboutbox ul {padding:0px 0 0 6px; margin:0px;}
.sideright ul li, .sideleft ul li, .sidefull ul li, .aboutbox ul li {margin-bottom:14px; list-style-type:disc; padding-left:0px; line-height:18px; font-size:14px;}
.sideright ol, .sideleft ol, .sidefull ol, .aboutbox ol {padding:0px 0 0 6px; margin:0px;}
.sideright ol li, .sideleft ol li, .sidefull ol li, .aboutbox ol li {margin-bottom:14px; list-style-type:decimal; padding-left:0px; line-height:18px; font-size:14px;}
.twocol {clear:left;}
.twocolleft {width:49%; float:left; padding:0 15px 15px 0; line-height:20px;}
.twocolright {width:50%; float:left; padding:0 0 15px 0; line-height:20px;}
#subHed {font-size:13pt; line-height:120%;}
#storybody .aboutbox hr {color:#F00 !important; width:100% !important;}
#storybody .video-container {max-width: 880px;margin-bottom: 18px;}
#storybody .video {position: relative;padding-top: 0px;height: 0;overflow: hidden;padding-bottom: 56.25%;
    /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */}
#storybody .video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;
    /*width:75%; min-width:680px; min-height:500px;*/}
#right-col .video-container {max-width: 100% !important;width: 100% !important;margin-bottom: 10px;}
#right-col .video {position: relative;padding-top: 0px;height: 0;overflow: hidden;padding-bottom: 56.25%;
    /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */}
#right-col .video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;}


/* Dummy devices (replace them with your own or something else entirely!) */
.product-device 		{position: absolute;right: 10%;bottom: -30%;width: 300px;height: 540px;
						background-color: #333;border-radius: 21px;-webkit-transform: rotate(30deg);transform: rotate(30deg);}
.product-device::before {position: absolute;top: 10%;right: 10px;bottom: 10%;left: 10px;content: "";
						background-color: rgba(255, 255, 255, .1);border-radius: 5px;}
.product-device-2 		{top: -25%;right: auto;bottom: 0;left: 5%;background-color: #e5e5e5;}

/* Wide image at top of article */
.wide-image-container	{margin:20px 0 10px 0;}


/* Related News in Right Column */
#related				{color:#666; font-weight:300; line-height:120%; width:100%;}
#related h3				{font-size:16pt; padding-bottom:4px; margin-bottom:13px; border-bottom:1px dotted #AAA;}
#related .rel-image		{width:160px; margin:0 10px 0 0; height:96px; float:left; overflow:hidden; display:flex; align-items:center; justify-content:center;}
#related .rel-image img	{width:125% !important; margin:0 0 0 -10px; object-position:50% 50%;}
#related .rel-head		{font-weight:500; font-size:115%; margin:2px 0 4px 0; padding-right:20px;}
#related .rel-text		{margin:0 0 4px 0; font-size:92%; line-height:120%; padding-right:20px;}

#related .rel-logo		{width:160px; margin:0 10px 0 0; height:96px; float:left; overflow:hidden; display:flex; align-items:center; justify-content:center;}
#related .rel-logo img	{width:90% !important; margin:0 0 0 -10px; object-position:50% 50%;}

#sm-cover-image			{margin:0; border:1px solid #DDD; width:25%; float:left;
						width:30%; max-height:300px; margin:0 18px 0 0; display:flex; align-items:center; justify-content:center;}
						-webkit-box-shadow: 2px 5px 8px 2px rgba(160,160,160,0.6); box-shadow: 2px 5px 8px 2px rgba(160,160,160,0.6);}
#sm-cover-image img 	{width:100% !important; margin:0 0 0 -10px; object-position:50% 50%;}
#related #download .image {width:20% !important; max-height:250px; margin:0 12px 0 0; float:left; overflow:hidden; display:flex; 
						align-items:center; justify-content:center; min-width:100px !important;
						-webkit-box-shadow: 2px 5px 8px 2px rgba(160,160,160,0.6); box-shadow: 2px 5px 8px 2px rgba(160,160,160,0.6);}
#related #download .image img {width:100% !important; margin:0; object-position:50% 50%;}
#related #download .image:hover {transform: scale(1.04); transition-timing-function: ease; transition: 0.3s;}


/* Download form styles */
#form					{border:1px solid #DDD; background-color:#EEE; padding:16px 12px; margin:-40px 0 20px 0;}
#form .resource-img		{width:100px; margin:0 18px 10px 18px; height:auto; float:left; overflow:hidden; display:flex; align-items:center; justify-content:center;
						border:1px solid #CCC; box-shadow:1px 2px 5px rgba(0,0,0,0.2), 1px 2px 5px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(.25,.8,.25,1); }
#form .resource-img img	{width:100% !important; margin:0; object-position:50% 50%;}
#form .resource-line	{margin:0 4px 10px 4px; border-top:1px dotted #AAA;}
#form .resource-text	{font-weight:500; font-size:100%; margin:2px 0 8px 0; line-height:110% !important; width:80%; min-width:180px;}
#form .resource-title	{font-weight:500; font-size:100%; margin:2px 0 8px 0; padding-right:20px;}
#form .resource-summary	{font-weight:500; font-size:76%; margin:2px 0 4px 0; padding-right:20px; color:#777;}
#form .row .form-group	{margin-bottom: .5rem;}
#form .g-recaptcha		{display:none; visibility:hidden;}
.anchor {content: "";display: block;height:0px;margin:40px 0 0 0;}
#world:before {
    content: '';
    display: block; 
    position: relative; 
    width: 0; 
    height: 2em; 
    margin-top: -2em;
}

/* Extra utilities */
.flex-equal > * {-ms-flex: 1;flex: 1;}
.overflow-hidden { overflow: hidden; }

/* Article modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  padding-top: 120px; /* Location of the box */
  left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8); 
}
.modal-target {width: 300px;border-radius: 5px;cursor: pointer;transition: 0.3s;}
.modal-target:hover {opacity: 0.7;}

/* Modal Content (image) */
.modal-content {margin: auto;display: block;width: 80%;opacity: 1 !important;max-width: 1200px;}

/* Caption of Modal Image */
.modal-caption {margin: auto;display: block;width: 80%;max-width: 1200px;text-align: center;color: white;font-weight: 400;font-size: 1em;margin-top: 18px;}

/* Add Animation */
.modal-content, .modal-caption {  -webkit-animation-name: zoom;-webkit-animation-duration: 0.6s;animation-name: zoom;animation-duration: 0.6s;}
@-webkit-keyframes zoom {from {-webkit-atransform:scale(0)} to {-webkit-transform:scale(1)}}
@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}

/* The Close Button */
.modal-close {position: absolute;top: 100px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight:400;transition: 0.3s;z-index:10001}
.modal-close:hover, .modal-close:focus {color: #bbb;text-decoration: none;cursor: pointer;}


/* Media Queries */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
.eoa .eoa-tags, .eoa .eoa-padright	{padding-right:0px;}
#guide .slideshow figure .video	{height:90px; max-height:90px;}
#storybody .photoleft, #storybody .photoright {width:40%;}
#guide h1 						{font-size:30pt;}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
.eoa .eoa-tags, .eoa .eoa-padright	{padding-right:0px;}
#guide .slideshow figure 			{min-height:120px;}
#guide .slideshow figure .video	{height:90px; max-height:90px; border:1px solid #F00;}
#storybody .photoleft, #storybody .photoright {width:40%;}
#guide h1 						{font-size:34pt;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
.flex-md-equal > * {-ms-flex: 1;flex: 1;  }
.bd-placeholder-img-lg {font-size: 3.5rem;}
.eoa .eoa-tags, .eoa .eoa-padright	{padding-right:20px;}
#guide .slideshow figure .video	{height:90px; max-height:90px; border:1px solid #F00;}
#storybody .photoleft, #storybody .photoright {width:50%;}
#guide h1 						{font-size:38pt;} 
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.eoa .eoa-tags, .eoa .eoa-padright	{padding-right:40px;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.header ul {margin-top:1px;}
}