/*
Credit: http://www.templatemo.com
*/

body {
	/*
	margin: 0px auto;
	padding: 0px 350px;
	*/
/*	text-align: center; 
*/
   width:1200px; 
	margin:0px auto;
	color: #000000;
	font-family: "Times New Roman", Times, serif;
	/*font-size: 16px;*/
   font-size: 1.1em;
	line-height: 1.5em;
	background-color: #424242;
	/*    background-color: transparent;
*/
	background-image: url(images/templatemo_body.jpg);
	background-repeat: repeat-x;
}

a, a:link, a:visited { color: #0066AA; text-decoration: none; }
a:hover { color: #C00; text-decoration: underline; }

p {
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
img { border: none; }

.paragraph_indent {
  text-indent: 2em;
}

a.button {
    background-color: OrangeRed;
    padding: .6em;
    font-size: 1.0em;
    line-height: 1;
    color: white;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    text-decoration: none;
    transition-duration: 0.1s;
}

a.button:hover {
    background-color: DarkOrange
}

a.button2 {
    background-color: DimGray;
    padding: .6em;
    font-size: 1.0em;
    line-height: 1;
    color: white;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    text-decoration: none;
    transition-duration: 0.1s;
}

a.button2:hover {
    background-color: Black
}

h1 {
	font-size: 2.1em;
	font-weight: normal;
	margin: 0 0 30px 0;
	padding: 5px 0;
	color: #424242;
	text-align: center;
   line-height: 110%;
}
h1_subtitle { font-size: 1.6em; font-weight: normal; margin: 0 0 30px 0; padding: 5px 0; color: #424242; line-height: 105%; }
h2 { font-size: 28px; font-weight: normal; margin: 0 0 30px 0; padding: 0; color: #2d4173; line-height: 105%; }
h2_title { font-size: 1.9em; font-weight: normal; margin: 0 0 30px 0; padding: 0; color: orangered; line-height: 105%; }
h2_title_ds { font-size: 1.9em; font-weight: bold; margin: 0 0 40px 0; padding: 0; color: orangered; line-height: 110%; }
h2_subtitle { font-size: 1.6em; font-weight: normal; margin: 0 0 32px 0; padding: 0; color: orangered; line-height: 105%; }
h2 span { font-weight: bold; }
h3 { font-size: 1.5em; margin: 0 0 15px 0; padding: 0; color: #000; font-weight: normal; }
h3_sub { font-size: 1.3em; margin: 0 0 15px 0; padding: 0; color: #000; font-weight: normal; }
h4 { font-size: 1.15em; margin: 0 0 15px 0; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; color: #333; }
h5_subtitle { font-size: 0.9em; margin: 0 0 5px 0; padding: 0; color: darkslategray;}
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0; color: #000; }
h6_subtitle { font-size: 16px; margin: 0 0 5px 0; padding: 0; color: gray; }
h7 {font-size: 21px; margin: 0 0 15px 0; padding: 0; color: #000; font-weight: bold; }
h8 {font-size: 21px; margin: 0 0 15px 0; padding: 0; color: #000; font-weight: bold; text-align:center;}
h10 { font-size: 20px; margin: 0 0 10px 0; padding: 0; color: #000; font-weight: normal; }
h11 { font-size: 24px; margin: 0 0 25px 0; padding: 0; color: #000; font-weight: bold; }
h_small { font-size: 0.9em; margin: 0 0 0px 0; padding: 0; color: darkslategray; line-height: 1.4; }
ul.a {list-style-type: circle;}

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 15px; /* change this to whatever height you want it */
}

p.big {
    line-height: 105%;
}



/* Custom table style */
.custom-table {
  font-family: Times, serif;
  border-collapse: collapse;
  width: 100%;
}

.custom-table th {
   border: 1px solid black;
   font-size: 18px;
   font-weight: bold;
   text-align: left;
   padding: 8px;
}

.custom-table td {
   border: 1px solid black;
   font-size: 14px;
   text-align: left;
   padding: 8px;
}

.custom-table tr:nth-child(even) {
  background-color: #dddddd;
}

.custom-table tr:hover {
  background-color: #f1f1f1; /* Highlight row on hover */
}



.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }


.float_l { float: left; }
.float_r { float: right; }

.image_wrapper {
	display: inline-block;
	border: 1px solid #000;
	background: #333;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	top: 0px;
}
.image_wrapper img {
	border: 1px solid #ccc;
}
.image_fl {
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	float: left;
}
.image_fr { float: right; margin: 3px 0px 3px 20px; }

.image_semi_round {
    border-radius: 40%; /* This makes the image round */
    object-fit: cover; /* Ensures the image fills the circle without distortion */
    overflow: hidden; /* Ensures no part of the image spills out */
}

.image_round {
    border-radius: 50%; /* This makes the image round */
    object-fit: cover; /* Ensures the image fills the circle without distortion */
    overflow: hidden; /* Ensures no part of the image spills out */
}

blockquote { font-style: italic; margin-left: 10px;}
cite { font-weight: bold; color:#000; }
cite span { color: #333; }
em { color: #000; }

.tmo_list { margin: 20px 10px; padding: 0; list-style: none; }
.tmo_list li {
	background: transparent url(images/templatemo_list.png) no-repeat scroll 0 0px;
	margin:0 0 20px;
	padding: 0 0 0 20px;
	line-height: 0.8em;
}
.tmo_list li a { color: #fff; }
.tmo_list li a:hover { color: #ff4301; }

.btn_more a { font-size: 14px; font-weight: bold; text-decoration: none; }
.btn_more a span { font-size: 18px; color: #000; }
.btn_more a:hover { color: #000; }

.tab { margin-left: 180px; }

#templatemo_header_wrapper {
	width: 1176px;
	background: #000 url(images/Kepler9bc3.jpg) top center no-repeat;
	margin-left: 13px;
	margin-right: 0px;
	padding-left: 0px;
	-moz-box-shadow: 0px 0 4px 1px #0C0C0C;
	-webkit-box-shadow: 0px 0px 4px 1px #0C0C0C;
	box-shadow: 0px 0px 4px 1px #0C0C0C;
}
#templatemo_header {
	width: 1176px;
	background: url(images/Kepler9bc3.jpg) no-repeat top center;
	margin-bottom: 0;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0;
	padding-left: 0px;
	padding-right: 0px;
}
#site_title {
	float: left;
	width: 1176px;
	padding-bottom: 0;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
} 
#site_title a {
	padding: 0px;
	font-size: 30px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 0px;
	margin-top: 0px;
}
#site_title a span {
	text-align: left;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	margin-left: 0px;
}

#templatemo_menu {
	clear: both;
	width: 1176px;
	height: 100px;
	padding: 0 0px;
	background: url(images/templatmeo_menu.png) no-repeat bottom;
	margin-left: 0px;
}
#templatemo_menu ul {
	float: left;
	width: 840px;
	margin: 0;
	padding: 55px 0 0 30px;
	list-style: none;
} 
#templatemo_menu ul li { padding: 0px; margin: 0px; display: inline-block; }
#templatemo_menu ul li a {
	float: left;
	display: block;
	width: 100px;
	height: 26px;
	padding: 5px 0;
	margin-right: 5px;
	font-size: 14px;
	color: #fff;	

	text-align: center;
	text-decoration: none;
	font-weight: bold;
	outline: none;
	border: none;
}
#templatemo_menu ul li a:hover,  #templatemo_menu ul li .current {
	color: #333;
	background: url(images/templatemo_menu_hover.png) no-repeat;
}

#templatemo_wrapper {
	width: 1200px;
	margin-bottom: 0;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0;
}

#search_box {
	float: right;
	width: 320px;
	height: 40px;
	margin: 45px 0 0 0;
	background: url(images/templatemo_search.png) no-repeat;
}
#search_box form {
	clear: both;
	width: 320px;
	height: 40px;
	padding: 0;
} 
#searchfield {
	height: 20px;
	width: 220px;
	padding: 10px;
	color: #8a9ac5;
	line-height: 0;
	background: none;
	border: none;
} 
#searchbutton {
	height: 40px;
	width: 40px;
	padding: 0 0 5px 0;
	margin: 0;
	cursor: pointer;
	background: none;
	border: none;
}

#templatemo_flash {
	width: 1200px;
	height: 488px;
	padding: 128px;
	background: url(images/templatemo_slider.png) repeat-y;
	color: #FFF;
}
#templatemo_portfolio { width: 1202px; height: 100px; padding: 10px 10px; background: url(images/templatemo_slider.png) repeat-y; }

#templatemo_middle { width: 880px; height: 70px; padding: 40px 50px; background: url(images/templatemo_middle.png) no-repeat; }
#templatemo_middle p { float: left; width: 640px; font-size: 18px; color: #fff; line-height: 32px; font-style: italic; }
#templatemo_middle .wwu_btn a { display: block; float: right; width: 222px; height: 62px; background: url(images/templatemo_wwu_btn.png) no-repeat; }
#templatemo_middle .wwu_btn a:hover { background: url(images/templatemo_wwu_btn_hover.png) no-repeat; }

#templatemo_content_top { width: 1200px; height: 35px; background: url(images/templatemo_content_top2.png) no-repeat; }
#templatemo_content_bottom {
	width: 1202px;
	height: 35px;
	background: url(images/templatemo_content_bottom2.png) no-repeat;
}
#templatemo_content {
	width: 1200px;
	background: url(images/templatemo_content_middle2.png) repeat-y;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}
#templatemo_content p {
	margin-bottom: 0px;
}

#templatemo_main_content {
	float: left;
	width: 1150px;
	padding-bottom: 0;
	padding-left: 25px;
	padding-right: 0px;
	padding-top: 0;
}

.templatemo_main_content {
	float: left;
	width: 1150px;
	padding-bottom: 0;
	padding-left: 25px;
	padding-right: 0px;
	padding-top: 0;
}

#image_box {
	float: left;
	width: 410px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	margin-right: 15px;
}

#left_box {
	float: left;
	width: 565px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	align-content: center;
	align-items: center;
	align-self: center;
	alignment-adjust: central;
	alignment-baseline: central;
}

#middle_box {
	float: left;
	width: 4px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	margin-right: 15px;
	background: url(images/templatemo_vertical_divider.jpg) right repeat-y;
}

#middle_box2 {
	float: left;
	width: 4px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	margin-right: 8px;
	margin-left: 8px;
	background: url(images/templatemo_vertical_divider.jpg) right repeat-y;
}

#text_context_box {
	float: left;
	width: 700px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

.text_context_box2 {
	float: left;
	width: 1150px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

.text_content_center {
	float: none;
	width: 1050px;
	padding-bottom: 0px;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 0px;
	background: url(images/templatemo_hr_divider.jpg) bottom repeat-x;
	background-clip: content-box;
	align-content: center;
	align-items: center;
	align-self: center;
	alignment-adjust: central;
	alignment-baseline: central;
}

.text_content_center_no_line {
	float: none;
	width: 1050px;
	padding-bottom: 0px;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 0px;
	align-content: center;
	align-items: center;
	align-self: center;
	alignment-adjust: central;
	alignment-baseline: central;
}

#right_box {
	float: left;
	width: 565px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	align-content: center;
	align-items: center;
	align-self: center;
	alignment-adjust: central;
	alignment-baseline: central;
}

#text_context_box2 {
	float: left;
	width: 500px;
	padding-bottom: 200px;
	padding-left: 200px;
	padding-right: 200px;
	padding-top: 0px;
	margin-left: 0px;
	align-content: center;
	align-items: center;
	align-self: center;
	alignment-adjust: central;
	alignment-baseline: central;
}

#clear {
    clear: both;
}

.content_box {
	margin-bottom: 25px;
	padding-bottom: 0px;
	background: url(images/templatemo_hr_divider.jpg) bottom repeat-x;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
}
.content_box2 {
	margin-bottom: 25px;
	padding-bottom: 0px;
	background: url(images/templatemo_hr_divider.jpg) bottom repeat-x;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
}

.scrollBox {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;
	margin-left: 25px;
	margin-right: 25px;
	padding-left: 0px;
	width: 1150px;
	height: 600px;
	padding-right: 5px;
	padding-bottom: 5px;
	overflow: auto;
}

.scrollBoxCode {
   display: flex;
   align-items: flex-start; /* Ensures top alignment of content */
   align-content: flex-start;
   position: relative; /* Prevent parent positioning issues */
   line-height: 1.5; /* Adjust this if necessary */
	font-family: 'Source Code Pro';
	font-size: 13px;
   margin: 0 auto;
	width: 1030px;
	height: 450px;
   background: white;
   border: 1px solid #ccc;
	overflow: auto;
   padding: 0;  /* Remove padding */
}

.lineNumbers {
    width: 40px;
    align-items: flex-start; /* Align line numbers and code at the top */
    align-content: flex-start;
    padding-right: 10px;
    padding-top: 20px;
    margin: 0;
    text-align: right;
    background: #f5f5f5;
    line-height: 1.5; /* Same value as above */
    border-right: 1px solid #ccc;
    user-select: none; /* Prevents highlighting */
    font-family: 'Source Code Pro';
    font-size: 13px;
    color: #888;
}

.codeContent {
    width: calc(100% - 40px); /* Adjust to take the remaining width */
    padding-left: 10px;
    align-items: flex-start; /* Align line numbers and code at the top */
    align-content: flex-start;
    padding-top: 0;
    margin: 0;
    line-height: 1.5; /* Same value as above */
    white-space: pre;  /* Preserve whitespace in the code block */
    font-family: 'Source Code Pro';
    font-size: 13px;
    vertical-align: top; /* Force alignment to the top */
    top: 0; /* Ensure no extra offset */
    position: relative; /* Reset positioning */
    box-sizing: border-box; /* Standardize width/height calculations */
}

pre {
    margin: 0;
    padding: 0;
    font-family: 'Source Code Pro';
    font-size: 0.9em;
    line-height: 1.5; /* Same value as above */
    font-weight: bold;
}

.codeContent pre {
    margin: 0; /* Remove any top margin */
    padding: 0; /* Remove padding to align with line numbers */
    line-height: 1.5; /* Match line height */
    white-space: pre-wrap; /* Preserve whitespace, adjust wrapping if necessary */
    align-items: flex-start; /* Align line numbers and code at the top */
    align-content: flex-start;
}

.scrollBoxCode2 {
    display: flex;
    align-items: flex-start; /* Ensures top alignment of content */
    font-family: 'Source Code Pro';
    font-size: 0.9em;
    width: 1030px;
    height: 450px;
    overflow: auto;
    background: white;
    border: 1px solid #ccc;
    margin: 0 auto;
    padding: 0;  /* Remove padding */
}

.Code-table {
    width: 100%;
    border-collapse: collapse; /* Ensures no spacing between table cells */
}

.Code-table td {
    vertical-align: top; /* Align line numbers and code at the top */
    white-space: pre; /* Preserve whitespace in code lines */
    padding: 0; /* Remove default cell padding */
    padding-left: 10px; /* Remove default cell padding */
    padding-right: 10px;
    margin: 0; /* Remove default margin */
}

.lineNumber {
    width: 30px;
    margin-right: 10px;
    text-align: right;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    color: #888;
    user-select: none; /* Prevent highlighting of line numbers */
}

.codeLine {
    padding-left: 10px;
}

.lineNumbers2 {
    padding-right: 10px;
    padding-top: 20px;
    margin: 0;
    width: 40px;
    text-align: right;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    align-items: flex-start; /* Align line numbers and code at the top */
    user-select: none; /* Prevents highlighting */
    color: #888;
}

.codeContent2 {
    width: calc(100% - 40px); /* Adjust to take the remaining width */
    padding-left: 10px;
    align-items: flex-start; /* Align line numbers and code at the top */
    padding-top: 0;
    margin: 0;
    line-height: 1.5; /* Same value as above */
    white-space: pre;  /* Preserve whitespace in the code block */
    font-family: 'Source Code Pro';
    font-size: 13px;
    vertical-align: top; /* Force alignment to the top */
    top: 0; /* Ensure no extra offset */
}

.scrollBoxTable {
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 10px;
	width: 1030px;
	max-height: 450px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	align-content: center;
	align-items: center;
	align-self: center;
	alignment-adjust: central;
	alignment-baseline: central;
   background: white;
	overflow: auto;
}

.iframebox {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;
	margin-left: 13px;
	margin-right: 0px;
	padding-left: 0px;
	width: 1170px;
	height: 800px;
	padding-right: 0px;
	padding-bottom: px;
	margin-bottom: px;
}

.last_box { margin-bottom: 0; padding-bottom: 0; background: none; }

.col_w280 {
	float: left;
	width: 300px;
	margin-right: 0px;
	padding-right: 0px;
	padding-left: 0px;
	margin-left: 150px;
}

.col_w280_2 {
	float: left;
	width: 300px;
	margin-left: 100px;
	padding-left: 50px;
	margin-right: 0px;
}

.col_w280_m {
	float: left;
	width: 300px;
	margin-left: 300px;
	padding-left: 0px;
	margin-right: 0px;
	text-align: center;
}


.post_section { clear: both; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #CCC; background: url(images/templatemo_hr_divider.jpg) repeat-x bottom; }

.post_section h1 { margin: 0 0 5px 0; padding: 10px 0 5px 0; line-height: 34px; background: url(images/templatemo_header.png) no-repeat bottom left; }

.post_section .post_content { clear: both; margin: 20px 0 0; }

.post_content .left { float: left; width: 140px; }
.post_content .left img { width: 120px; height:120px; }
.post_content .right { float: right; width: 420px; }

.post_section p { padding-bottom: 5px; margin-bottom: 8px; }
.post_section .comment_tab { padding: 10px 0; margin: 40px 0 20px 0; border-bottom: 1px dashed #666; font-size: 20px; font-weight: bold; }

	#gallery { clear: both; }
	#gallery a { border: none; }
	#gallery ul { list-style: none; margin: 0; padding: 0; }
	#gallery ul li { float: left; display: block; width: 265px; padding: 8px; margin: 0 20px 20px 0; border: 1px solid #666; background: #fff; }
	#gallery ul li a img { width: 265px; height: 130px; margin-bottom: 10px; }
	#gallery ul .odd { margin-right: 0; }	

#templatemo_sidebar {
	float: left;
	width: 230px;
	padding: 0 30px;
}
#news_box { margin-bottom: 20px; padding-bottom: 20px; background: url(images/templatemo_hr_divider.jpg) bottom repeat-x; }
#news_box ul {
	margin: 0;
	padding: 0 5px;
	list-style: none;
}
#news_box ul li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #999; }
#news_box ul .last { margin-bottom: 0; padding: 0; border-bottom: none; }
#news_box h6 a { color: #000; }
#news_box h6 a:hover { text-decoration: underline; }

.sidebar_box { margin-bottom: 20px; padding-bottom: 20px; background: url(images/templatemo_hr_divider.jpg) bottom repeat-x; }

#contact_form {  padding: 0; }
#contact_form form { margin: 0px; padding: 0px; }
#contact_form form .input_field { width: 300px; padding: 5px; background: #fff; border: 1px solid #AAA; }
#contact_form form label { display: block; width: 250px; margin-bottom: 0px; margin-top: 15px; font-size: 14px; }
#contact_form form textarea {
	width: 500px;
	height: 250px;
	padding: 5px;
	background: #fff;
	border: 1px solid #AAA;
	font-family: Arial, Helvetica, sans-serif;
}
#contact_form form .submit_btn { padding: 8px 14px; margin: 0px; margin-right: 80px; background: #fff; border: 1px solid #AAA; }

#templatemo_footer {
	width: 1202px;
	height: 60px;
	padding: 20px;
	margin-bottom: 20px;
	text-align: center;
	color: #ccc;
	background: url(images/templatemo_footer.png) no-repeat;
}

#templatemo_footer a {
	color: #fff;
}




.modal-trigger {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.modal-trigger:hover {
  opacity: 0.7;
}

.modal-trigger-bokeh {
    transition: 0.3s;
}

.modal-trigger-bokeh:hover {
    opacity: 0.7;
    cursor: pointer;
}

.modal-trigger-pdf {
    transition: 0.3s;
}

.modal-trigger-pdf:hover {
    opacity: 0.7;
    cursor: pointer;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1100px;
}
/* Bokeh Modal Content (iframe) */
.modal-content-bokeh {
  margin: auto;
  display: block;
  width: 80%;
  height: 80%; /* Specific to Bokeh plots */
  border: none;
}
/* PDF Modal Content (iframe) */
.modal-content-pdf {
    margin: auto;
    display: block;
    width: 80%;
    height: 80%; /* Fit the iframe within the modal */
    max-width: 1100px;
    border: none;
}

/* Caption of Modal Image */
#caption, #captionBokeh, #captionPDF {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1100px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close, .close-bokeh, .close-pdf {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover, .close:focus, .close-bokeh:hover, .close-bokeh:focus, .close-pdf:hover, .close-pdf:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 800px){
  .modal-content, .modal-content-bokeh, .modal-content-pdf {
    width: 100%;
  }
}

#disqus_thread {
  background-color: #f0f0f0; /* Light background for contrast */
  padding: 20px;
  border-radius: 5px;
}