/* External Style Sheet for WePlay2Learn.com website */

html {height: 100%; margin: 0; 
    /* font-family: 'Raleway', sans-serif; } */
    /* font-family: sans-serif; */
        font-family: Lato, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body,h1,h2,h3 {
  margin: 0;
}

@font-face {font-family: Raleway; font-display: swap;}

hr {width: 95%;}

/*---------------------------------------------------------------------------------------------------------- */
/*Start Responsive Navigation Bar CSS from: https://codepen.io/mutedblues/pen/MmPNPG */


/* header */

.header {
  background-color: #264d73; /*#333333; */
  /* box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); */
  /*position: fixed; */
 /* position: relative; */
  position: fixed;  /*Set top bar to always stay at top of screen */
  top: 0;  /*positions at top of page */
  width: 100%;
  z-index: 3;
}

.header ul {
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #333333; /*#264d73; /*#336699; /*#333333; */
}

.header li a {
  display: block;
  /* padding: 20px 20px; */
  padding: 18px;
  text-decoration: none;
  color: #f2f2f2;
  font-size: 1.0em;  
  font-weight: bolder; 
  font-family: 'Raleway';
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #6699cc; /*#3f913b; */
}

/*.header {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}*/

.header .logo {
  display: block; /*none; */
  float: left;
  font-size: 2em;
  padding: 5px 10px 0px 10px; 
  text-decoration: none;
}
.logo-image {width:35px;}  /*reduce size for phone screens*/ 

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 20px 20px 15px 20px; /*28px 20px  */
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #fff; /*#333*/
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;  /*#333*/
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 440px; /*360px; /*240px; */
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

.menu-item {padding: 0;}

.topbar-sitename {

    margin-top: 0px; /* 10% */
    margin-bottom: 0px;
    padding-top: 10px;
    color: #FFFFFF; 
    display: inline-block; /* inline-block; */
    margin-left: auto;
    margin-right: auto;
    /*text-align: center;*/
    /* font-family: 'Permanent Marker', cursive;   */
   /* font-size: 1.25em; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;*/
    
    font-size: 2em; 
    font-family: 'Lilita One', cursive;
    font-weight: 400;
    text-decoration: none;
}

.fb-mobile-format {margin-left: 15px; margin-bottom: 15px;}
.review-page {margin-top: 4.8em;}  /* add margin at top of review pages for mobile version so header bar doesn't overlap */
.hero  {margin-top: 4.8em;}  /* add margin at top of home page for mobile version so header bar doesn't overlap */

#Footer {
  background-color: #264d73; /*#333333; */
  /* box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); */
  /*position: fixed; */
 /* position: relative; */
  width: 100%;
  z-index: 3;
}

.footer-icons{
    margin-left: auto;
    margin-right: auto;
    padding: .6em;
    display: block;
    text-align: center;
}

.social_logo_image{
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.footer-links-div{
      margin-left: auto;
    margin-right: auto;
    padding: 1em;
    display: block;
    text-align: center;
}

.footer-bar-item{
  padding: 0.3em;
  margin: 0.20em;
  text-decoration: none;
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
}
.footer-link{
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8em;
  text-align: center
}

#copyright{
      margin-left: auto;
    margin-right: auto;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    padding: .25em;
    display: block;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    font-size: .85em;
}

#contact-form{
  margin-bottom: 3em;
}

/* 48em = 768px */
@media (min-width: 48em) {
  .header {background-color: #264d73;}
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 20px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .header .logo {padding: 20px 20px 10px 30px; display: block;}
  .logo { }
 /*  .header {display: block;}  */
    .logo-image {width:60px;} 
    .header ul {background-color: #264d73; } /*#336699; }/*#333333; }*/
    .banner-button-mobile {display: none;}
    .fb-like-mobile {display: none;}
  .topbar-sitename {font-size: 2.5em; padding-top: 30px}  /*font-size: 1.5em;*/
      .review-page {margin-top: 0px;} /* remove margin at top of home page for non-mobile version, this is included in the top-bar2 which only displays at these larger sizes */
      .hero  {margin-top: 0px;}  /* remove margin at top of home page for non-mobile version, this is included in the top-bar2 which only displays at these larger sizes */

}


@media all and (min-width: 1024px) {
 /* .logo-image {width:328px;} */
   /* .topbar-sitename {font-size: 2.25em; padding-top: 20px} */
      .topbar-sitename {font-size: 3em; padding-top: 20px}

}



.top-bar2       {background: #333333; color: #fff; display:    none; overflow: hidden; margin: 0px; margin-top: 5.7em; padding-left: 2em; padding-right: 2em;} /* set top margin to 5.7em so header bar doesn't overlap this bar.  margin: 0px;  background: #262626; color: white; background: #19334d; color: white; */
.wrapper-body2      {display: inline-block; border: none;  background-color: #333; position:     relative;   padding:    0.2em;  overflow: hidden; margin-left: auto; margin-right: auto;}
.top-bar2-header{display: none; font-size: 1em; margin: 0;}
a.banner-button    {
    display: inline-block; /*inline-block; */
    /*position: absolute;
    top: 75%;
    left: 23%; */
    background-color: #397f34; /*#004d80; */
    font-weight: bold; 
    /* border-color: #0077b3; 
    border: outset;  */
    color: #ffffff;
    border: thin solid #285a26; /* #002e4d */
    border-radius: .25em;
    text-decoration: none; 
    padding: 0.2em .25em; 
    text-align: center; 
    font-size: 0.75em;  
    margin-top: 5px; /*3%; */
    margin-bottom:  5px; /*2%; */
    /* width: 40%; */
    margin-left: auto; 
    margin-right: auto;} /*border: outset #2B3941; */



@media all and (min-width: 768px) {
  .top-bar2 {display:    block;}
  .top-bar2-header {display: inline-block; padding-right: .75em;}
  a.banner-button {font-size: 1em; }
  .wrapper-body2{float: right;}
  .desktop-hidden {display: none;}

}

@media all and (min-width: 1024px) {
  .wrapper-body2 {}

}
.clearfix {
  clear: both;
}
.clearfix:after {
  clear: both; 
  content: "";
  display: table; 
}
/* ---------------------- End Navigation Section ---------------------------------------------------------------------------*/
/* ---------------------- Start Homepage Section ---------------------------------------------------------------------------*/
.hero {
    background-image: url(/risk-cropped-140.png); /*/background-bright-1440-lower-res.png); */
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 35px;
}

.call-to-action {
    color: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(255,255,255,0.5); /*rgba(38,38,38,.9); /* #464646; */ 

}

.headline{

    margin-top: 1%; /* 10% */
    margin-bottom: 0px;
    padding: 1px; 
    color: #204060; /*#264d73; /*#FFFFFF; */
    display: block; /* inline-block; */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  /*   font-family: 'Permanent Marker', cursive; */
    /* 
    font-size: 2.5em; 
    font-family: 'Montserrat', sans-serif;
        font-weight: 900; */
   
    font-size: 2.5em; 
    font-family: 'Lilita One', cursive;
    font-weight: 400;

    /* font-family: 'Verdana','Arial Black','Comic Sans MS'; */
    
        text-shadow:
        -2px -2px 0 #FFF,
        2px -2px 0 #FFF,
        -2px 2px 0 #FFF,
        2px 2px 0 #FFF; 
}
/*.call-to-action h1 {
    font-size: 35px;
    line-height: 40px;
    margin-top: 5px;
    margin-bottom: 25px;
} */

.sub-headline {
    /*font-family: times, georgia; */
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5em; /*25px;*/
    font-weight: bold;
    font-style: oblique;
    opacity: 1.0;
    color: #262626; /*#0d0d0d; /*#FFF; */
}

/* From my original page */
/*
.sub-headline{
    font-size: 2em; 
    margin-top: .25%; 
    margin-bottom: 0px;
    padding: .1em; 
    color: #FFFFFF; 
    display: inline-block;
    text-align: center;
    font-family: 'Kalam','Arial Black','Comic Sans MS';
} */

/* From my original page */
.sub-headline1{
    font-size: 1.5em; 
    margin-top: 0em; 
    margin-bottom: 0px;
    padding: .1em; 
    color: #264d73; /*#336699; /*#ffff80; */
    display: block; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  /*  font-family: "Arial Black","Comic Sans MS"; */
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;
} 

/*From my original page */
a.home-action-button    {
    background-color: rgba(255,51,0,0.85);
    font-weight: bold; 
    color: #ffffff;
    border: thin #b32400 solid;
    border-radius: .75em;
    text-decoration: none; 
    /* padding: 0.2em .25em;  */
    padding: 0.4em .5em;
    text-align: center; 
    font-size: 1.5em;  
    margin-top: 3%;
    margin-bottom:  2%;
    width: 40%;
    margin-left: auto; 
    margin-right: auto;
} 

.large-screen {  display: none;}
.mobile {    display: block; /*inline-block; */}



.header-container {
  width: 100%; 
  margin: 0 auto;
  /*  max-width: 1200px; */
  box-sizing: border-box;
}

.container {
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    box-sizing: border-box;
}

.brand {
    float: left;
    padding-left: 20px;
}
.brand a {
    display: block;
}

.mrow {
    border: none; /*#9b59b6;*/
    overflow: hidden; 
}


.icon-section {
  margin-bottom: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.icon-section h3 {
  text-transform: uppercase;
}

.icon-section img {
  margin-bottom: 10px
}

.icon-section p {
  margin-top: 10px;
}

.rule {
  background-color: #f57365;
  display: block;
  height: 1px;
  margin: 5px auto;
  width: 100px;
}

 .icon-text {font-size: 1em;}

.top5 {
  background-color: #c6d8ec; /*#f2f2f2; */
}

.top5-header{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .1em;
    margin-top: 15px;
    text-align: center;
    /* background-color: #464646; */
   /* font-size: 1.25em; */
    color: #264d73; 
    width: 100%;
    padding: .1em 0em;
    font-size: 2.5em; 
    font-family: 'Lilita One', cursive;
    font-weight: 400;
    /*font-size: 2em;
    font-style: bolder; */
}

.TextLinkHeader{
    color: #264d73; 
    text-decoration: none;
}

.top5-subheader{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .3em;
    margin-top: 0px;
    text-align: center;
    /* background-color: #464646; */
   /* font-size: 1.25em; */
    color: #333333; 
    width: 100%;
    padding: .05em 0em;
    font-size: 1.5em; 
    font-family: 'Lilita One', cursive;
    font-weight: 400;
    /*font-size: 1.2em;
    font-style: bolder; */

}

.top5-justify-scores {
    display: flex;
    flex-direction: row; /*column; */
    flex-wrap: wrap;
    justify-content: center; /* space-evenly; */
    align-items: center;
    width: 100%;
   /* height: 700px; */
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    /* background-color: #004d99; */
}

.top5-item    {
    display: inline-block; 
   /* background-color: rgba(198,216,236); /*(38,38,38,0); /* #0077b3;  */
    font-weight: bold; 
    color: #ffffff;
    border: none;
    text-decoration: none; 
    padding: 5px;
    text-align: center; 
    font-size: 1.5em;  
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100px;
    height: 100px;
    margin-left: auto; 
    margin-right: auto;} /*border: outset #2B3941; */

.new-video-item    {
    display: inline-block; 
   /* background-color: rgba(198,216,236); /*(38,38,38,0); /* #0077b3;  */
    font-weight: bold; 
    color: #ffffff;
    border: none;
    text-decoration: none; 
    padding: 5px;
    text-align: center; 
    font-size: 1.5em;  
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100px; /* 150px; */
    height: 56px; /* 100px; */
    margin-left: auto; 
    margin-right: auto;} /*border: outset #2B3941; */    

.top5-item a img {width: 100%; height: 100%;} /* width: 100%; height: auto;} */
.new-video-item a img {width: 100%; height: 100%;} /* width: 100%; height: auto;} */

.new-reviews {  background-color: #ffffff;}
.new-videos {  background-color: #c6d8ec;}

.new-reviews-header{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .1em;
    margin-top: 15px;
    text-align: center;
    /* background-color: #464646; */
   /* font-size: 1.25em; */
    color: #264d73; 
    width: 100%;
    padding: .1em 0em;
    font-size: 2.5em; 
    font-family: 'Lilita One', cursive;
    font-weight: 400;
    /*font-size: 2em;
    font-style: bolder; */
}

.new-justify-scores {
    display: flex;
    flex-direction: row;
    justify-content: center; /* space-evenly; */
    align-items: center;
    width: 100%;
   /* height: 700px; */
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    /* background-color: #004d99; */}

.new-desktop {display: none;}
.youtube-video {margin-left: auto; margin-right: auto; width: 100%; text-align: center;}
.youtube-video-list {margin-left: auto; margin-right: auto; width: 100%; text-align: center; padding: 1em;}
.youtube-text {margin-left: auto; margin-right: auto; color: #264d73; font-family: 'Lilita One', cursive; font-weight: 200; font-size: 2em;  margin-left: auto; margin-right: auto; text-align: center; padding: 0.25em; }
.youtube-size {width:90%;}
.graphic-center-size {width: 60%;}
.gearpic-home {margin-left: auto; margin-right: auto; width: 100%; text-align: center; padding-top: 2em; padding-bottom: 2em;}
.gearpic-size {width:90%;}
.gearpic-home-size {width:70%;}
.youtube-size-home {width:50%;}
.list_YT_icon {padding-left: 0.25em; padding-top: 0.25em; margin: 0;}
.gearlinktext {margin-left: auto; margin-right: auto; color: #264d73; font-family: 'Lilita One', cursive; font-weight: 200; font-size: 1.25em;  margin-left: auto; margin-right: auto; text-align: center; padding: 0.25em; }

@media all and (min-width: 768px) {
  .youtube-size {width:560px; height:315px;}
  .graphic-center-size {width:40%;}
  .gearpic-size {width:80%;}
  .gearpic-home-size {width:60%;}
  .list_YT_icon {padding-left: 0.5em; padding-top: 0.5em; margin: 0;}
    .call-to-action {
        padding-top: 50px;
    }
    .headline{font-size: 6em; } /* 5em; */
    .sub-headline1{font-size: 2.5em; }
    .sub-headline{font-size: 2.25em; }
    .call-to-action h1 {
   /*     font-size: 70px;
        line-height: 100px; */
    }
    .hero {    background-image: url(/risk-cropped-300.png);} /* url(/risk-cropped-1440-full-res.png);} */
    .mobile {display: none;}
   .large-screen {display: block;}
  /* .icon-section h3 {margin-top: 25px;} */
  .top5-justify-scores {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    /* background-color: #004d99; */}

  .top5-item    {
      display: inline-block; 
     /* background-color: rgba(198,216,236); /*(38,38,38,0); /* #0077b3;  */
      font-weight: bold; 
      color: #ffffff;
      border: none;
      padding: 5px;
      text-align: center; 
      font-size: 1.5em;  
      margin-top: 0%;
      width: 150px;
      height: 150px;
      margin-left: auto; 
      margin-right: auto;} /*border: outset #2B3941; */

  .new-video-item    {
      display: inline-block; 
     /* background-color: rgba(198,216,236); /*(38,38,38,0); /* #0077b3;  */
      font-weight: bold; 
      color: #ffffff;
      border: none;
      padding: 5px;
      text-align: center; 
      font-size: 1.5em;  
      margin-top: 0%;
      width: 150px;
      height: 150px;
      margin-left: auto; 
      margin-right: auto;} /*border: outset #2B3941; */


  .top5-item a img {width: auto; height: 100%;}
  .new-video-item a img {width: auto; height: 100%;}
  .icon-text {font-size: 1.5em;}
  .new-desktop {display: inline-block;}
}

@media all and (min-width: 1024px) {
  .top5-justify-scores {
    display: flex;
    flex-direction: row;
  }
  .headline{font-size: 8em; } /* 5em; */
  a.home-action-button    {
    padding: 0.2em .25em;}
}


.Amazon-footer {
  background-color: #c6d8ec; /*#464646;*/
  /* width: 95%; */
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  padding: 5px 5px;
  text-align: center;
}

.disclaimer {margin-left: auto; margin-right: auto; text-align: center; color: #0d0d0d;} /*#bfbfbf;} */

/* ---------------------- End Homepage Section ---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------Grid-----------------------------------------------------------------------------*/
/*.container {
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    box-sizing: border-box;
}*/
.mrow {
    border: #9b59b6;
    overflow: hidden;
}
.col-12 {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}
.col-11 {
    float: left;
    width: 91.66666667%;
    box-sizing: border-box;
}
.col-10 {
    float: left;
    width: 83.33333333%;
    box-sizing: border-box;
}
.col-9 {
    float: left;
    width: 75%;
    box-sizing: border-box;
}
.col-8 {
    float: left;
    width: 66.66666667%;
    box-sizing: border-box;
}
.col-7 {
    float: left;
    width: 58.33333333%;
    box-sizing: border-box;
}
.col-5 {
    float: left;
    width: 41.66666667%;
    box-sizing: border-box;
}
.col-3 {
    float: left;
    width: 25%;
    box-sizing: border-box;
}
.col-2 {
    float: left;
    width: 16.66666667%;
    box-sizing: border-box;
}
.col-1 {
    float: left;
    width: 8.33333333%;
    box-sizing: border-box;
}
.mobile-hidden {
  display: none;
}


@media all and (min-width: 768px) {
  .col-6 {
      float: left;
      width: 50%;
      box-sizing: border-box;
      padding: 0 20px;
  }
  .col-4 {
      float: left;
      width: 33.33333333%;
      padding: 0 20px;
      box-sizing: border-box;
  }
  .category,
  .stat {
    float: left;
    width: 20%;
    box-sizing: border-box;
  }
  .mobile-hidden {
    display: block;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}


@media all and (min-width: 1024px) {

}

/* ---------------------- End Grid Section ---------------------------------------------------------------------------*/
/*----------------------- Start General Section -----------------------------------------------------------------------------*/
  
  .SummaryTitle {font-size: 1.75em; color: #264d73; margin-bottom: 0; padding-bottom: 0; margin-top: 0.5em; font-family: 'Montserrat', sans-serif; display: block; margin-left: auto; margin-right: auto; text-align: center; font-weight: 900; }
  .center-content {margin-left: auto; margin-right: auto; text-align: center; }
  .table-pages-text {font-weight: bold; font-size: 1.1em; width: 80%;}
  .table-pages-text-small {font-weight: bold; font-size: 1.0em; width: 80%;}
  .table-overflow {overflow-x: auto; width: 95%; margin-left: auto; margin-right: auto;}
  .EndAd {margin-left: auto; margin-right: auto;}

  a.TextLinkWhite  {color: #F2F2F2; }
  a.TextLinkBlack  {color: #0b0d0f; }
  a.TextLinkGreen  {color: #3f913b; }
  .TextBlue {color: #264d73;}
  .TextRed {color: #800000;}

@media all and (min-width: 768px) {
  .SummaryTitle {font-size: 3em;}
  .table-pages-text {font-weight: bold; font-size: 1.5em; width: 80%;}
  .table-pages-text-small {font-weight: bold; font-size: 1.1em; width: 80%;}
  .table-overflow {overflow-x: auto; width: 95%; margin-left: auto; margin-right: auto;}
  .EndAd {width: 60%;}
}

@media all and (min-width: 1024px) {

}

/* ---------------------- End Grid Section ---------------------------------------------------------------------------*/
/*----------------------- Start General Section -----------------------------------------------------------------------------*/

.SubTitle {font-size: 1.25em; text-align: center;}
.TitleImage1 {margin-top: 10px; padding: 0px; margin-bottom: 0px; width:125px; margin-left: auto; margin-right: auto; display: block; }
.OverflowProtect {overflow: hidden;}
.HeaderSection {margin-left: auto; margin-right: auto; width: 100%;}
.GameTitle  {font-size: 1.75em; color: #264d73; margin-bottom: 0; padding-bottom: 0; margin-top: 0.0em; font-family: 'Montserrat', sans-serif; display: block; margin-left: auto; margin-right: auto; text-align: center; font-weight: 900; }  /* display: inline-block; margin-left: auto; margin-right: auto; */
.boxed-blue-scores {padding: 0.75em 0.75em 0.75em 0.75em; border-style: solid;border-width: thin;background-color: #d1d6e0; width: 80%; margin-left: auto; margin-right: auto; margin-top: 20px;}
.boxed-overview {padding: 0.75em 0.75em 0.75em 0.75em; border-style: solid;border-width: thin;background-color: #d1d6e0; width: 90%; margin-left: auto; margin-right: auto; margin-top: 20px;}
.scores-header{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .3em;
    text-align: center;
    background-color: #264d73; /*#333333; /*#464646; */
    color: #ffffff;
    width: 100%; 
    padding: .15em 0em;
}

/*.logo-image-scores {width:35px; padding: 5px;}
.score-sitename {display: inline-block; margin-top: 5px; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; font-weight: 700;  } */

.logo-image-scores {width:35px; padding: 5px; float: left;} /*margin-left: 15%;*/
.score-sitename {display: block; color: #fff; margin-top: 5px; margin-bottom: 0px;  font-family: 'Lilita One', cursive; font-weight: 400; font-size: 1.1em;  margin-left: auto; margin-right: auto; text-align: left; text-decoration: underline; } /*background-color: #fff; color: #264d73;  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.0em; */
.score-sitename-background {background-color: #fff; }
.score-sitename-title {text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.15em; display: block; margin: 0; margin-bottom: 5px; }
.scores-container {width: 70%; margin-left: auto; margin-right: auto;}


.justify-scores {
    display: flex;
    flex-direction: row; /*column; */
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #004d99; */
}

.justify-overview {
    display: flex;
    flex-direction: row; /*column; */
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #004d99; */
}

.score-item    {
    display: inline-block; 
    position: relative;
    /*position: absolute;
    top: 75%;
    left: 23%; */
    background-color: #333333; /*#ff2200 #333333 #264d73; /*#004d99; /* #0077b3;  */
    font-weight: bold; 
    /* border-color: #0077b3; 
    border: outset;  */
    color: #ffffff; /*#ffffff;  */
    border: thin #333 solid; /*thin #003366 solid; */
    border-radius: .33em;
    text-decoration: none; 
    padding: 0.15em .2em;
    text-align: center; 
    font-size: 1.5em;  
    margin-top: 0%;
    width: 17%;
    margin-left: auto; 
    margin-right: auto;
    } /*border: outset #2B3941; */

.overview-item    {
    display: inline-block; 
    position: relative;
    /*position: absolute;
    top: 75%;
    left: 23%; */
    background-color: #333333; /*#ff2200 #333333 #264d73; /*#004d99; /* #0077b3;  */
    font-weight: bold; 
    /* border-color: #0077b3; 
    border: outset;  */
    color: #ffffff; 
    border: thin #003366 solid; /*thin #003366 solid; */
    border-radius: .33em;
    text-decoration: none; 
    padding: 0.15em .2em;
    text-align: center; 
    /* font-size: 1.5em;  */
    margin-top: 0%;
    width: 20%;
    margin-left: auto; 
    margin-right: auto;
    } /*border: outset #2B3941; */

.overview-item-header    {
    display: inline-block; 
    position: relative;
    /*position: absolute;
    top: 75%;
    left: 23%; */
    background-color: #FFFFFF; /*#ff2200 #333333 #264d73; /*#004d99; /* #0077b3;  */
    font-weight: bold; 
    /* border-color: #0077b3; 
    border: outset;  */
    color: #264d73; 
    border: thin #003366 solid; /*thin #003366 solid; */
    border-radius: .33em;
    text-decoration: none; 
    padding: 0.15em .2em;
    text-align: center; 
    /* font-size: 1.5em;   */
    margin-top: 0%;
    width: 100%;
    margin-left: auto; 
    margin-right: auto;
    } /*border: outset #2B3941; */

.overview-item-detail    {
    display: inline-block; 
    position: relative;
    /*position: absolute;
    top: 75%;
    left: 23%; */
    background-color: #264d73; /*#ff2200 #333333 #264d73; /*#004d99; /* #0077b3;  */
    font-weight: bold; 
    /* border-color: #0077b3; 
    border: outset;  */
    color: #ffffff; 
    border: thin #003366 solid; /*thin #003366 solid; */
    border-radius: .33em;
    text-decoration: none; 
    padding: 0.15em .2em;
    text-align: center; 
    /* font-size: 1.5em;   */
    margin-top: 0%;
    width: 100%;
    margin-left: auto; 
    margin-right: auto;
    } /*border: outset #2B3941; */

.score-title    {
    font-size: .5em; /*0.7em; */
    /* text-decoration: underline; */
    padding-bottom: 0px;
    margin: 0px;
  }

.score-score    {
    font-size: 1em; /*0.8em;*/
    padding-bottom: 0px;
    margin: 0px;
  }

.score-score-bottom    {
    position: relative;
    top: 0.6em;
  }

.overview-detail-bottom    {
    font-size: 2.5em; /*0.8em;*/
    padding-bottom: 0.5em;
    margin-top: 0px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

.review-nav-bar {margin-left: auto; margin-right: auto; width: 100%; margin-top: .5%; }
.justify-links {
    display: flex;
    flex-direction: row; /*column; */
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #004d99; */
  }
  .link-bar-item    { padding: 0.3em; margin: 0.20em; border: outset #FFFFFF; background-color: #19334d; color: #FFFFFF; text-decoration: none; text-align: center;} /* background-color: #19334d; #004258 #264d73 */
  a.TextLink-white  {color: #ffffff; text-decoration: none; font-size: 0.8em; text-align: center;}
  #Overview {width: 90%; margin-left: auto; margin-right: auto;}
  .OverviewTitle  {color: #990000; font-size: 1.75em; font-weight: bold; margin-left: auto; margin-right: auto; text-align: center; padding: 1em 0em 0.25em 0em;} /* margin: 0; */
  /* .IntroTable {border-style: none; background-color: #333333; margin-left: auto; margin-right: auto; color: white; border-collapse: collapse; padding: 1em;}  /* margin-left: auto; margin-right: auto; */ 
  /*.IntroTableDetails {border: solid;  background-color: #d1d6e0; color: #1a1a1a; border-color: #333333; text-align: center; padding: .35em; border-width: thin; } /*background-color: #333333 font-size: 1.25em; border-color: #404040;*/
 /*.IntroDetailsLink {color: #F2F2F2;}
  .IntroTableHeaders {font-size: 1em; background-color: #264d73; color: #F2F2F2; border-color: #333333; text-align: center; padding: .35em; } /*background-color:#545454; border-color: #404040;  #464646 */
  /*td.IntroTableHeaders   {border: 2px solid; border-color: #333333;} 
  .IntroTableTitle {font-size: 1.5em; background-color: #333333; color: white; border-style: none;} */


  .IntroTable {border-style: solid white; background-color: #333333; margin-left: auto; margin-right: auto; color: white; border-collapse: collapse; padding: 1em;}  /* margin-left: auto; margin-right: auto; */
  .IntroTableDetails {border: solid white;  background-color: #d1d6e0; color: #1a1a1a; text-align: center; padding: .35em; border-width: thin; font-weight: bold; } /*background-color: #333333 font-size: 1.25em; border-color: #404040;*/
  .IntroDetailsLink {color: #F2F2F2;}
  .IntroTableHeaders {font-size: 1em; background-color: #264d73; color: #F2F2F2; border-color: #333333; text-align: center; padding: .35em; font-weight: bolder; border-width: medium; } /*background-color:#545454; border-color: #404040;  #464646 */
  /* td.IntroTableHeaders   {border: 2px solid; border-color: #333333;}  */
  .IntroTableTitle {font-size: 1.5em; background-color: #333333; color: white; border-style: none;}
  
  p.content { } /*text-indent: 0px; margin-left: 20px; margin-top: 0.25em;}*/
  .OverviewContent {padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto;}

  /* Using lightbox to display photos based on example here: https://www.w3schools.com/howto/howto_js_lightbox.asp */
.row > .column {
    padding: 0 0px;
}
.row {
    margin-left: auto; /* 25px set this back to 25px for non boxed method*/
    margin-right: auto; /* delete this back to 25px for non boxed method*/
   /* width: 90%;*/
}
.column {
   margin: 10px;
   padding: 0px;
}
.row:after  {
    content: "";
    display: table;
    clear: both;
} 
/*Create four equal columns that float next to each other */
.column{
/* float: left; */
width: 25%; 
  display: inline-block;
/* margin-left: auto; 
    margin-right: auto;  */
}

.column-photos {
   margin: 5px 10px;
   padding: 0px;
   display: inline-block;
}

/* The Modal (background) */
.modal{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px; /* 100px; */
    left: 12.5%;
    top: 10%; /*1%; */
    width: 85%;
    height: 90%;
    overflow: auto;
    background-color: rgba(0,0,0, 0.9); /*rgba(153,204,255,0.9); */
}
/* Modal Content */
.modal-content  {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 70%; /*80%; */
    max-width: 1200px;
}
/* The Close Button */
.close {
    background-color: rgba(79,181,74,0.8); /*rgba(0, 0, 0, 0.9); /*rgba(153,204,255,0.9); */
    padding: 3px;
    color: white; /*white; */
    position: fixed; /*fixed; */
    top: 15%; /*20px; */
    right: 5%; /*50px;*/
    font-size: 30px; /*35px; */
    font-weight: bold;
    z-index: 3;
}
.close:hover,
.close:focus    {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}
/* Hide the slides by default */
.mySlides   {
    display: none;
    max-width:  700px;
    margin-left:  auto;
    margin-right:   auto;
}
/*Next & previous buttons */
.prev, 
.next{
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 40px; /*20px;*/
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkist-user-select: none;
}
/*Position the "next button" to the right */
.next{
    right: -60px; /*-32px;/*0;*/
    border-radius: 3px; /*3px 0 0 3px;*/
}

/*Position the "prev button" to the left */
.prev{
    left: -60px; /*-32px;/*0;*/
    border-radius: 3px; /*3px 0 0 3px;*/
}

/*On hover, add a black background color with a little bit of see-through */
.prev:hover,
.next:hover{
    background-color: rgba(79,181,74,0.8); /*0, 0, 0, 0.8);*/
}
/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
/*Caption text */
.caption-container  {
    text-align: center;
    background-color: #404040;
    padding: 2px 16px;
    color: white;
}
img.demo {
    opacity: 0.6;
}
.active,
.demo:hover{
    opacity: 1;
}
img.hover-shadow {
    transition: 0.3s;
    margin-top: 15px;
}
.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxed-photos {padding: 5px 0px; overflow: hidden; border-style: solid;border-width: thin;background-color: #d1d6e0; width: 95%; margin-left: auto; margin-right: auto;} /* float: left; margin-left: 2%; margin-right: 2%;} /*width: 75% */
.justify-photos {
    display: flex;
    justify-content: flex-start; /*space-evenly; */
    align-items: center;
    width: 90%;
    padding: 0px;
    overflow: scroll; 
   /* overflow: visible; */
    margin-left: 5%;
    margin-right: 5%;
    /* background-color: #004d99; */
}


.photo-amazon-ad-mobile {display: block; margin-left: auto; margin-right: auto; margin-top: 15px; width: 118px;} /*30%;} */
.photo-amazon-ad-desktop {display: none;}

  #HowPlayed, #FastFacts, #Education, #CustomRules, #Buy, #SimilarGames {width: 90%; margin-left: auto; margin-right: auto;}
  .SectionTitle  {color: #990000; font-size: 1.25em; margin: 0; padding: 1em 0em 0.25em 0em;}
  .boxed_blue {padding: 0.75em 0.75em 0.75em 0.75em; border-style: solid;border-width: thin;background-color: #d1d6e0;}
  .boxed_white {padding: 0.75em 0.75em 0.75em 0.75em; border-style: solid;border-width: thin;background-color: #ffffff; margin-left: auto; margin-right: auto; width: 80%; text-align: center;}
  .about-text {padding: 0.75em 0.75em 0.75em 0.75em;  margin-left: auto; margin-right: auto; width: 80%; text-align: center;}
  a.TextLink  {color: #002b80; font-weight: bold;}
  a.buy_text {color: #3f913b; text-decoration: underline; font-size: 1.25em; font-weight: bold;}
  .CustomSuggest  {font-style: italic;}
  p.content { text-indent: 0px; margin-left: 20px; margin-top: 0.25em;}
  h4 {margin: 0; padding: 0;}
  h4 + ul {margin-top: 0.25em;}
    /* Video Page */
    .VideoPageTitle  {font-size: 1.75em; color: #264d73; margin-bottom: 0; padding-bottom: 0; margin-top: 0.0em; font-family: 'Lilita One', cursive; display: block; margin-left: auto; margin-right: auto; text-align: center; }  /* display: inline-block; margin-left: auto; margin-right: auto; */
    .video_text {margin-left:   auto; margin-right:   auto; text-align:   center; font-weight:  bold; font-size: 1.5em; }
    .VideoSubTitle {margin-left:   auto; margin-right:   auto; text-align:   center; font-weight:  bold; font-size: 1.5em; padding-bottom: 2em;}
    .VideoSubTitle2 {margin-left:   auto; margin-right:   auto; text-align:   center; font-weight:  bold; font-size: 1.25em; padding-bottom: 2em; padding-left: 1em; padding-right: 1em;}
    .GearPageTitle  {font-size: 1.75em; color: #264d73; margin-bottom: 0; padding-bottom: 0; margin-top: 0.0em; font-family: 'Lilita One', cursive; display: block; margin-left: auto; margin-right: auto; text-align: center; }  /* display: inline-block; margin-left: auto; margin-right: auto; */
    


@media all and (min-width: 768px) {
  .TitleImage1 {margin: 15px; margin-left: 20%; width:200px; float: left; } 
  .SubTitle {font-size: 2em; text-align: left; }
  .GameTitle {text-align: left; font-size: 3em; margin-top: 0.5em; }
  .VideoPageTitle {text-align: center; font-size: 3em; margin-top: 0.5em; }
  .VideoSubTitle2 {margin-left:   auto; margin-right:   auto; text-align:   center; font-weight:  bold; font-size: 1.25em; padding-bottom: 2em;}
  .GearPageTitle {text-align: center; font-size: 5em; margin-top: 0.5em; }
  .HeaderSection {margin-top: 1em; width: 80%;}
  .boxed-blue-scores {margin-top: 0px; width: 60%;}
  .logo-image-scores {width:50px; } /*margin-left: 25%;*/
  .score-sitename {margin-top: 5px; margin-bottom: 0px; font-size: 1.75em; } /* font-size: 1.5em; */
  .score-sitename-title {font-size: 1.75em; width: auto;}
  .scores-container {width: 60%; margin-left: auto; margin-right: auto;}
  .justify-scores {
    display: flex;

    flex-direction: row; /*column; */
    flex-wrap: wrap;

    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #004d99; */
    }
    .score-title    {
    font-size: .7em;
    /* text-decoration: underline; */
    padding-bottom: 0px;
    margin: 0px;
    }

  .score-score    {
    font-size: 1.5em; /*1.0em; */
    padding-bottom: 0px;
    margin: 0px;
    }

    .score-score-bottom    {
    position: relative;
    top: 0.5em;
  }
  
  .review-nav-bar {margin-left: auto; margin-right: auto; width: 100%; margin-top: .5%; }
  .justify-links {
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* background-color: #004d99; */
    }
  .link-bar-item    { padding: 0.5em; margin: 0.25em;}
  a.TextLink-white  {font-size: 1.0em;}
  #Overview {width: 95%; margin-left: auto; margin-right: auto;}
  .OverviewTitle  {font-size: 2.25em;}

  .IntroTableHeaders {font-size: 1em;}
  .IntroTableDetails {font-size: 1.25em;}
  .boxed-photos {width: 65%; overflow: hidden;}
  .justify-photos {overflow: hidden; justify-content: space-evenly;}
  /*.close {
    top: 20px;
    right: 200px; /*25px;*/}
    .mySlides   {
    /*height: 400px;*/}

 .OverviewContent {padding-left: 15%; padding-right: 15%;}
}

    .score-score    {  /*this is only here because the width check was not working otherwise, no idea why */
      font-size: 4em; /*1.0em; */
    }

@media all and (min-width: 1024px) {

  .desktop-search-bar {width: 15%; float: right;}
  .logo-image-scores {width:50px; } /*margin-left: 35%;*/
  .scores-container {width: 45%; margin-left: auto; margin-right: auto;}
  a.TextLink-white  {font-size: 1.25em;}
  .photo-amazon-ad-mobile {display: none;} /*30%;} */
  .photo-amazon-ad-desktop {display: inline;} /* margin-left: auto; margin-right: auto; margin-top: 15px; width: 118px;} */
  .row {
    display: flex;
    justify-content: center;
    align-items: center;}
    .boxed-photos{margin: 15px; }/*display: inline-block;} */
  .score-score    {
      font-size: 2em; /*1.0em; */
      padding-bottom: 0px;
      margin: 0px;
    }

    .mySlides   {
    max-width:  1200px;}

  .score-score-bottom    {
      position: relative;
      top: 0em;
    }

  .close {
      padding: 10px;
      color: white; /*white; */
      position: fixed; /*fixed; */
      top: 15%; /*20px; */
      right: 12%; /*50px;*/
      font-size: 50px; /*35px; */
      font-weight: bold;
      }
}

@media all and (min-width: 1200px) {
  .logo-image-scores {width:50px; margin-left: 15%;} /*margin-left: 35%;*/
    .boxed-photos {width: 50%; overflow: hidden;}
}