html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

   h3 {color: #003300;}
   h4 {color: #002400;}
 
.centeredcontainer {
   max-width: 100%;
   width: 12px;
   margin: 0px auto;	
	}
.centereredcontainerinner {
   width: 80%;
   height: auto;
   margin-left: 10%;	
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
	}
   h1 {color: #E4001B;
   text-align:center;
   }
   h2 {color: #E4001B;}
   img {max-width: 100%; height: auto;}
   .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
   .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
   .3col {column-count: 3;}

.cardgameiframe {
	display: block;
    width: 100%;
    height: calc((100vw - 10px)*(5/9)) !important;
    max-height: 100vh;}

.topnav {
  background-color: #000a00;
  overflow: hidden;
  margin: 0 0 25px 0;
  text-align: center;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

.topnav a {
  display:inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

.topnav a:hover {
  background-color: #e4001b;
  color: white;
}

.topnav a.active {
  background-color: #030;
  color: white;
}

.topnav .icon {
  display: none;
}

/* The subnavigation menu */
.subnav {
    display: inline-block;
  text-align: center;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Add a red background color to navigation links on hover */
.topnav a:hover, .subnav:hover .subnavbtn {
  background-color: #E4001B;
}



@media screen and (max-width: 600px) {

  .topnav .subnav:not(:nth-child(-1n+3)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .subnav-content {display: none;}
  
  .centereredcontainerinner {
    width: 90%;
    margin: 0 5%;
	}

  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive .subnav {
    float: none;
    display: block;
    text-align: left;
  }
  
/* Callout box - fixed position at the bottom of the page */
.callout {
  font-family: 'Roboto', Helvetica, Arial, sans-serif; 
  position: absolute;
  top: 5px;
  max-width: 100%;
/*  z-index: -1; */

}

.callout a {
	color: #8E0011;
	font-weight: bold;	
	}

/* Callout header */
.callout-header {
  padding: 10px 8px;
  background: #F7596B;
  font-size: 30px;
  color: white;
}

/* Callout container/body */
.callout-container {
  padding: 8px;
  background-color: #FCABB4;
  color: black;
  margin-bottom: 200px !important;
  clear: both;
}

/* Close button */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
  color: lightgrey;
}

.colcount2 {
	column-count: 1;	
}

.listsection {
	margin-top: 8px;
}

}


@media screen and (min-width: 601px) {

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #E4001B;
  width: 100%;
  z-index: 1;
  margin-top: 0px;
}

/* Style the subnav links */
.subnav-content a {
    display: inline-block;
  text-align: center;
  color: white;
  text-decoration: none;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}
  
  .callout { 
  display: none;
  }
	
}



table td, table th {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even){background-color: #f2f2f2;}

/*--table tr:hover {background-color: #ddd;}--*/                  

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #E4001B;
  color: white;
}   
 
/* new changes below */
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

h1 {color: #E4001B; font-weight: 500; font-size: 32px; line-height: 32px}
h2 {color: #E4001B; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 27px; line-height: 27px; padding: 0 10px; border-left: 3px solid #030; margin: 45px 0 10px 0;}
h3 {color: #003300; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 22px; line-height: 22px; border-bottom: 3px dotted #e4001b; padding-bottom: 3px; padding-top: 16px;}

p {color: #1f1f1f; font-size: 16px;}

.centereredcontainerinner ul {list-style: none;}

.centereredcontainerinner ul li::before {
  content: "\2022";  
  color: red; 
  font-weight: bold; 
  display: inline-block;
  width: 1em; 
  margin-left: -1em; 
}

a {color: #349100; font-weight: 500; transition: 0.3s;} /* old #4bb900 ... 30% mix between it and #003300 */

.centereredcontainer .centereredcontainerinner a {font-weight: 1000 !important;}


a:hover {color: #e4001b;}

.corg-tabledesign {
    width: 99%;
    background-color: #f2f9fd;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table {
    background: white;
        background-color: white;
    margin-bottom: 1.25rem;
    border: solid 1px #dddddd;
}

table thead tr {
    background: #187455;
    color: #fff;
    border-radius: 4px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 19px;
}                    

table td, table th {
    border: none;
	padding: 12px;
}

table th {
    padding-top: 16px;
    padding-bottom: 16px;
    text-align: left;
    background-color: #187455;
    color: white;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

table tr:nth-child(2n) {
    background-color: #fff;
}

.tstyle {
	width: 99%; 
	background-color: #ebf7ea;
}

.align-mid {
	text-align: center;
}

.quote1-icon {
	height: 60px; 
	width: 60px; 
	margin-bottom: -30px;
}

.quote1-text {
	padding-top: 15px; 
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	font-size: 24px; 
	color: #187455; 
	font-weight: 500; 
	padding-bottom: 5px; 
	line-height: 1.2;
}

.quote2-borderl {
	border-left: 4px solid #e4001b; 
	margin: 20px 0;
}

.quote2-icon {
	width: 64px; 
	padding: 5px 20px; 
	float: left;
}

.quote2-text {
	text-align: left; 
	font-size: 18px; 
	line-height: 24px; 
	font-style: italic; 
	color: #187455; 
	margin-bottom: 0px; 
	padding: 0 19px;
}

.w100 {
	width: 100%;
}

.colcount2 {
	column-count: 2;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.centereredcontainerinner {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #1f1f1f;
}

.mbot-neg {
	margin-bottom: -14px;
	clear: both;
}

.listsection-bg {
	padding: 20px 20px 10px 20px;
	background-color: #f6fdde;
	border-radius: 5px;
	box-sizing: border-box;
	border: 2px solid #187455;
	margin-bottom: 20px;
}

.listsection-numbg {
	background-color: #e4001b;
	border-radius: 32px;
	width: 45px;
	height: 45px;
	float: left;
	position: relative;
	padding: 1px 0px;
	position: absolute;
	margin: 10px 10px 10px 2px;
}

.listsection-num {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	margin-top: 10px;
	padding-left: 15px;
	text-shadow: 2px 2px #7b2b2b;
}

.listsection-fleft {
	float: left;
	padding-left: 65px;
}

.listsection {
	line-height: 20px;
	margin-bottom: 12px;
	font-size: 15px;	
}

.infosection1-bg {
	border: 2px solid #20394c;
    border-radius: 5px;
    background-color: #f6fdde;
    margin-bottom: 20px;
}

.infosection-pad {
	padding: 15px 25px 1px 25px;
}

.infosection-text {
	line-height: 20px;
    margin-bottom: 12px;
    font-size: 15px;
}

.infosection1-commentbg {
	background-color: #187455;
    border-radius: 0 0 2px 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.infosection-commenticon {
	margin: 14px 8px 20px 20px;
    height: 50px;
    float: left;
    padding-right: 8px;
}

.infosection-commenttext {
	margin-bottom: 0px;
    padding: 16px;
    line-height: 20px;
    font-size: 15px;
    color: white;
}

.infosection2-bg {
	border: 2px solid #e4001b;
    border-radius: 5px;
    background-color: #fffbf0;
    margin-bottom: 20px;
}

.infosection2-commentbg {
	background-color: #e4001b;
    border-radius: 0 0 2px 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
	background-color: #187455;
	color: #f7f7f7;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 17px;
	border-bottom: 1px solid #449177;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #e4001b;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: rgb(255, 251, 240);
  display: none;
  overflow: hidden;
  border: 1px solid #e4001b;
}                                              

.panel p {
	font-size: 16px;
	}
	
.infobar-tips-bg {
	color: #000; 
	border-radius: 5px; 
	background-color: #F6FDDE; 
	border: 2px solid #20394c;
}

.infobar-tips-icon {
	height: 64px; 
	float: left; 
	margin: 30px; 
	top: 50%; 
	position: relative;
}

.infobar-tips-textpad {
	padding: 10px 20px 10px 0px; 
	display: flow-root;
}

.infobar-tips-title {
	font-size: 21px; 
	line-height: 21px; 
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	margin: 10px 0; color: #003300; 
	font-weight: 400; 
	border-bottom: 1px solid #b5db7e; 
	padding-bottom: 5px;
}

.infobar-warning-bg {
	color: #000; 
	border-radius: 5px; 
	background-color: #fff3f6; 
	border: 2px solid #e4001b;}

.infobar-warning-icon {
	height: 64px; 
	float: left; 
	margin: 30px; 
	top: 50%; 
	position: relative;}

.infobar-warning-textpad {
	padding: 10px 20px 10px 0px; 
	display: flow-root;
}

.infobar-warning-title {
	font-size: 21px; 
	line-height: 21px; 
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	margin: 10px 0; color: #e4001b; 
	font-weight: 400; 
	border-bottom: 1px solid #ffc1c1; 
	padding-bottom: 5px;
}

.infobar-mahjong-bg {
	color: #000; 
	border-radius: 5px; 
	background-color: #fffbf0; 
	border: 2px solid #ffb953;
}

.infobar-mahjong-icon {
	height: 64px; 
	float: left; 
	margin: 30px; 
	top: 50%; 
	position: relative;
}

.infobar-mahjong-textpad {
	padding: 10px 20px 10px 0px; 
	display: flow-root;
}

.infobar-mahjong-title {
	font-size: 21px; 
	line-height: 21px; 
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	margin: 10px 0; color: #eea030; 
	font-weight: 400; 
	border-bottom: 1px solid #fbe2cc; 
	padding-bottom: 5px;
}

.infobar-purple-bg {
	color: #000; 
	border-radius: 5px; 
	background-color: #f9f2f4; 
	border: 2px solid #e136d7;
}

.infobar-purple-icon {
	height: 64px; 
	float: left; 
	margin: 30px; 
	top: 50%; 
	position: relative;
}

.infobar-purple-textpad {
	padding: 10px 20px 10px 0px; 
	display: flow-root;
}

.infobar-purple-title {
	font-size: 21px; 
	line-height: 21px; 
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	margin: 10px 0; 
	color: #d928cf; 
	font-weight: 400; 
	border-bottom: 1px solid #ffc1c1; 
	padding-bottom: 5px;
}

.infobar-blue-bg {
	color: #000; 
	border-radius: 5px; 
	background-color: #e6faff; 
	border: 2px solid #0a617d;
}

.infobar-blue-icon {
	height: 64px;
	float: left; 
	margin: 30px; 
	top: 50%; 
	position: relative;
}

.infobar-blue-textpad {
	padding: 10px 20px 10px 0px; 
	display: flow-root;
}

.infobar-blue-title {
	font-size: 21px; 
	line-height: 21px; 
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	margin: 10px 0; 
	color: #0a617d; 
	font-weight: 400; 
	border-bottom: 1px solid #cee4ee; 
	padding-bottom: 5px;
}