/*
Theme Name: HIARCS Theme 
Author: Steven Uniacke
*/

/*** General Styles ***/
html {padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
body {background-image: url(../images/background/cdbkgnd.jpg);color: #000000;font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;text-align: justify;}


/*** Header ***/
.logoleft {position: absolute;left: 8px;padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.logoright {position: absolute;right: 8px;top: 8px;padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.header {background-color: #87cefa;color: #000000;font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;text-align: center;height: 80px;margin-left: 80px;margin-right: 80px;}
.header a {text-decoration: none;color: #000000;font-size: 48px;}
.header p {font-size: 12px;font-style: italic;margin: 0px;}

/*** Navigation ***/
.nav {margin-top: -18px;}
.nav ul {background: #87cefa;list-style-type: none;padding: 0;margin: auto;width: 100%;text-align: center;border: 1px solid #000000;}
.nav ul li {color: #000000;background: #87cefa;display: inline-block;padding: 1rem;position: relative;text-decoration: none;}
.nav ul li a {color: #000000;text-decoration: none;padding-top: 1rem;padding-bottom: 1rem;}
.nav ul li:hover, .nav ul li:focus-within {background: #d3d3d3;cursor: pointer;}
.nav ul li:focus-within a {outline: none;}
.nav ul li a:active {color: #000000;}

.sndnav ul {background-color: #d3d3d3;list-style-type: none;padding: 0;margin: auto;width: 100%;text-align:center;border: 1px solid #000000;border-top: 0;}
.sndnav ul li {color: #000000;background: #d3d3d3;display: inline-block;padding: 1rem; position: relative;text-decoration: none;}
.sndnav ul li a {color: #000000;text-decoration: none;padding-top: 1rem;padding-bottom: 1rem;}
.sndnav ul li:focus-within a {outline: none;}
.sndnav ul li a:active {color: #000000;}

.navbar {overflow: hidden;position: relative;background-color: #87cefa;}
.navbar #links {display: none;background-color: #d3d3d3;}
.navbar a {color: #000000;padding: 11px;text-decoration: none;display: block;height: 28px;}
.navbar a:hover {color: #000000;}
.hlight a:hover {background-color: #87cefa;color: #000000;font-weight: bold;}
.active {color: #000000;text-align: center;margin-left: 48px;margin-right: 44px;font-size: 5.5vw;}
.logo {float: left;}

.sndnavbar {background-color:#87cefa;}
.sndnavbar ul {background-color:#87cefa;list-style-type: none;padding: 0;margin: auto;width: 100%;text-align:center;border: 1px solid #000000;height:auto;}
.sndnavbar ul li {color: #000000;display: inline-block;padding: 0.7rem; position: relative;text-decoration: none;font-size: 2.25vw;}
.sndnavbar ul li a {color: #000000;text-decoration: none;padding-top: 0.5rem;padding-bottom: 0.5rem;}

.quickjump {font-size: 15px;width: auto;position: fixed;z-index: 1;top: 365px;left: 10px;background: #eee;overflow-x: hidden;padding: 8px 0;}
.quickjump p {padding: 0px 0px 0px 16px;font-weight: bold;}
.quickjump a {padding: 6px 8px 6px 16px;text-decoration: none;color: #2196F3;display: block;}
.quickjump a:hover {color: #064579;}
 
.sticky {position:fixed;top: 0;width: auto;transition: 1s;}

.sidemenu {float: left;border: 1px solid #000000;background-color: #80cefa; margin-right: 10px;width:240px; height: 168px;}
.sidemenu ul {list-style-type: none;padding-left: 0; margin-top: -1px;}
.sidemenu .sidemenu-links {padding: 7px;}
.sidemenu .sidemenu-links a {text-decoration: none; color: #000000; font-size: medium;}
.sidemenu .sidemenu-links:hover {background: #d3d3d3;cursor: pointer;}
.sidemenu .sidemenu-links a:active {color: #000000;}
.sidemenu img {float: left;}
.quick-links {font-size: smaller; margin-left: 6px; margin-bottom: 0;margin-top: 0;}

.mobile-menu {position: absolute; right: 0; top: 0; height: 50px; width: 50px;}
.mob-menu {background: #d3d3d3;position: absolute;right: 0;top: 0; width: 50px; height: 50px; padding: 0px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .5s ease-in-out;}
.mob-menu-burger {width: 20px; height: 3px; background: #000000; border-radius: 5px; box-shadow: 0 2px 5px rgba(255, 101, 47,.2); transition: all .5s ease-in-out;}
.mob-menu-burger::before, .mob-menu-burger::after {content: ''; position: absolute; width: 20px; height: 3px; background: #000000; border-radius: 5px; box-shadow: 0 2px 5px rgba(255, 101, 47,.2); transition: all .5s ease-in-out;}
.mob-menu-burger::before { transform: translateY(-10px);}
.mob-menu-burger::after {transform: translateY(10px);}

.mob-menu.open .mob-menu-burger {
    transform: translateX(50px);
    background: transparent;
    box-shadow: none;
}

.mob-menu.open .mob-menu-burger::before {
    transform: rotate(45deg) translate(-35px, 35px);
}

.mob-menu.open .mob-menu-burger::after {
    transform: rotate(-45deg) translate(-35px, -35px);
}

/*** Main ***/
h1 {text-align: center;font-size: 2.5rem;}
.h2 {text-align: center;font-size: 1.8rem;}
.h2 a:hover {color:#0000ff;}
.h2 a:active {color: #000000}
.h2-books {font-size: 2rem; color: #0000ff;}
h2 {font-size: 1.5rem;}
main {width: 75%;margin: auto;}
main p {font-size: 1em;}
a {color:#0000ff;}
p a:hover {color: #008000;}
p a:active {color: #0000ff;}
.main-container {display: flex;}
.mainflex {flex: 1;}
.mainflex:first-child {margin-right: 2vw;}
.centre {text-align: center;}
.tick {color: #008000;font-weight: bold;font-size: 150%;}
.arrow {color: #000000; font-weight: bold; font-size: 150%;}
.cross {color: #ff0000;font-weight: bold;font-size: 150%;}
.tgames {width: 50%;margin: auto;}
table {border-collapse: collapse;border-spacing: 0;width: 75%;border: 1px solid #000000; margin: auto;}
th {font-size: 2vw;position:sticky; top:0;background-color:#87cefa; background-clip: padding-box;}  
th, td {text-align: center;padding: 16px;}
th:first-child, td:first-child {text-align: center;}
tr:nth-child(even) {background-color: #f2f2f2;}
tr:nth-child(odd) {background-color: #87cefa;}
hr {width:98%;}
.videos {width:75%; text-align: center;}
.previousp {font-size: 70%;font-style: italic;text-decoration: none;}
.nodeclink {text-decoration: none;}
.fs14 {font-size: 14pt;}
.fs13 {font-size: 13pt;}
ol li {font-weight: bold;}
ol ol li {font-weight: normal;}
ol ul li {font-weight: normal;list-style-type: disc;}
ul li a:active {color: #0000ff}
video {width: 75%;margin: auto;max-width:1000px;}
h3 {text-decoration: underline;text-indent: -1rem;}
h4 {text-align: center; text-decoration: underline;font-size: 1.25em;}
.newsbb li {font-size: 1.1rem;}
.newsbb i {color: #000000;font-size: 0.8rem;}
.newsbb li a {text-decoration: none;color: #0000ff;}
.newsbb li a:hover {color:#008000;}
code {border: 1px solid #000000; background-color: #eee;padding: 12px;margin: 16px;display: block;max-width:1340px;}
.tbsubcat {background-color: #ccc;height:auto;}
.tickinfo {font-size: 1rem; color: #000000; font-weight: normal;}
.tbgray {background-color: #ccc;}
.helpcol {display: flex; font-size: 0.9em;}
.helpcolleft {padding-right: 20px;}
.helpcolleft img {width: 100%; max-width: 300px; min-width: 250px;}
.helpcolright {padding-left: 20px;}
.helpcolright img {width: 100%; max-width: 300px; min-width: 250px;}
.helpcolinside {min-width: 57%;flex: 1;}
.chessicons {position: relative; bottom: 8px;}
.imgright {float: right; max-width: 300px; padding-left: 20px; padding-bottom: 20px;}
.imgleft {float: left; max-width: 300px; padding-right: 20px; padding-bottom: 20px;}
.imgleftipad {float: left; max-width: 450px; padding-right: 20px; padding-bottom: 20px;}
.imgrightipad {float: right; max-width: 450px; padding-left: 20px; padding-bottom: 20px;}
.imgrightipadl {float: right; max-width: 610px; padding-left: 20px; padding-bottom: 20px;}
.updatesbp li a {text-decoration: none;color: #0000ff;}
.updatesbp li a:hover {color:#008000;}
.iquote {color:#008000;}
.appstorelink {color: #0000ff; font-size:1.2em; text-align:center; display: block;}
.hist {text-decoration: underline; text-align: center;font-size: 1.5em;}
.gh:hover {color: #008000;}
.smallfont {font-size: 0.8rem;}
.hcefplogo {float: left; padding-right: 5px;}
.price {color: #008000;}
.pricestrike {text-decoration: line-through;}
.pricediscount {color: #ff0000;}
.obtable {border-collapse: collapse;border-spacing: 0;width: 100%;border: 1px solid #000000;}
.obtable th {font-size: 1.25rem;position:sticky; top:0;background-color:#87cefa}  
.obtable th, .obtable td {text-align: center;padding: 16px;}  
.obtable th:first-child, td:first-child {text-align: center;}
.obtable tr:nth-child(even) {background-color: #f2f2f2;}
.obtable tr:nth-child(odd) {background-color: #87cefa;}
.hceqtvid {text-align: center;margin: auto;width:60%;}
.h2n {font-size: 1rem; font-style: italic; font-weight: 400;}
.dl {font-size: 1.75rem;}
.dl2 {font-size: 1.2rem;}
.bblue {font-weight: bold; color: #0000ff}
.index-bullet-points {list-style-type: disc; list-style-position: outside; margin-left: -20px;}
.index-bullet-points li {list-style-type: disc;}
.index-internal-bullet-points {margin-left: -20px ;}
.source-code-div {display: inline-block; padding: 10px;}
.source-code-img {border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px;}
.source-code-img:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}
.jumpto {font-size: larger;}
.latest-books {font-size: larger; font-weight: bold;}
.book-download-month {font-size: larger; text-decoration: underline; text-indent: 1rem;}
.anchor-text {visibility: hidden; position: absolute;}
.title-blurb {position: relative; top: -20px;}
.customer-feedback {width: 75%; margin: auto; padding: 25px 15px 5px 15px; background-color: #eee; border: #000000 solid 1px; text-align: justify;}
.customer-feedback-text {position: relative; ;}
.quotation-image-top {float: left; padding-right: 10px; margin-top: -20px; margin-left: -5px;}
.quotation-image-bottom {float: right; margin-top: -64px;}

/** Tooltip **/
.tooltip {position: relative; display: inline-block;}
.tooltipstar {position: absolute; margin-top: 5px;}
.tooltip .tooltiptext {visibility: hidden; width: 200px; top: 100%; left: 50%; margin-left: -100px; background-color: rgba(0,0,0,0.5); color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}
.tooltip .tooltiptext::after {content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.5) transparent;}


/*** Colours ***/
.red {color: #ff0000; text-decoration: none;}
.green {color: #008000;}
.dblue {color: #00008b;}
.blue {color: #0000ff;}
.grey {color:#949494;}


/*** Latest News ***/
.ln-container {/*background-color: #eeeeee;*/height: 21px;text-align: center;}
.lnln {list-style-type: none;font-size: 16px;margin: 0;margin-left: -40px;height: 21px;}
.lnln li {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.lnPhone-container {background-color: #eeeeee;height: 21px;text-align: center;display: none;width:auto;}
.hidden {display: none;}

/*** Main Page Options ***/
.main-options-container {width: 100%; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-around;}
.main-options-container .main-table {background-color: #eeeeee; width: 35%; height: 100%; padding: 15px 15px; position: relative; box-shadow: 0 5px 10px rgba(0,0,0,0.1);margin:5px;}
.main-table .price-section {display: flex; justify-content: center;}
.main-table .price-area {height: 120px; width: 120px; border-radius: 50%; padding: 2px;}
.main-table .features {padding-top: 20px; text-align: start;}
.main-table .features li {margin-bottom: 3px;list-style: none;display: flex;}
.features li .list-name {font-size: 16px; font-weight: 400; padding-left: 10px; padding-top:8px; text-align: left;}

.main-table .buybtn {width: 100%; display: flex; margin-top: 25px; justify-content: center;}
.main-table .buybtn button {width: 80%; height: 50px; color: #eeeeee; font-size: 20px; font-weight: 500; border: none; outline: none; border-radius: 24px; cursor: pointer; transition: all 0.3s ease;}
.main-table .buybtn button:hover {border-radius: 5px;}

/** HCE **/
.main-table .hce-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .hce-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .hce-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-hce a {text-decoration: none; color: #000000}
.main-hce .hce-package::before {content: "HIARCS"}
.main-hce .hce-package::after {content: "Chess Explorer"}
.main-hce .hce-package {background: #a26bfa;}
.main-hce .features li::selection {background: #a26bfa;}
.main-hce ::selection, .main-hce .centre-area {background: #a26bfa;}
.main-hce .buybtn button {border: 2px solid #a26bfa; background: #eeeeee; color: #a26bfa;}
.main-hce .buybtn button a {color: #a26bfa;}
.main-hce .buybtn button:hover {background-color: #a26bfa; color: #eeeeee}
.main-hce .buybtn button a:hover {color: #eeeeee;}
.main-table .hceribbon{width: 150px; height: 150px; position: absolute; top: -10px; left: -10px; overflow: hidden;}
.main-table .hceribbon::before, .main-table .hceribbon::after {position: absolute; content: ""; z-index: -1; display: block; border: 7px solid #4606ac; border-top-color: transparent; border-left-color: transparent;}
.main-table .hceribbon::before {top: 0px; right: 20px;}
.main-table .hceribbon::after {bottom: 20px; left: 0px;}
.main-table .hceribbon span {position: absolute; top: 30px; right: 0; transform: rotate(-45deg); width: 200px; background: #a26bfa; padding: 5px 0; color: #fff; text-align: center; font-size: 22px; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0,0,0,0.12);}
.hce a {text-decoration: none;}

/** HCEP **/
.main-table .main-hcep-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .main-hcep-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .main-hcep-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-hcep a {text-decoration: none; color: #000000}
.main-hcep .main-hcep-package::before {content: "HIARCS"}
.main-hcep .main-hcep-package::after {content: "Chess Explorer Pro"}
.main-hcep .main-hcep-package {background: #097909;}
.main-hcep .features li::selection {background: #097909;}
.main-hcep ::selection, .main-hcep .centre-area {background: #097909;}
.main-hcep .buybtn button {border: 2px solid #097909; background: #eeeeee; color: #097909;}
.main-hcep .buybtn button a {color: #097909;}
.main-hcep .buybtn button:hover {background-color: #097909; color: #eeeeee}
.main-hcep .buybtn button a:hover {color: #eeeeee;}
.main-table .hcepribbon{width: 150px; height: 150px; position: absolute; top: -10px; left: -10px; overflow: hidden;}
.main-table .hcepribbon::before, .main-table .hcepribbon::after {position: absolute; content: ""; z-index: -1; display: block; border: 7px solid #155e1b; border-top-color: transparent; border-left-color: transparent;}
.main-table .hcepribbon::before {top: 0px; right: 20px;}
.main-table .hcepribbon::after {bottom: 20px; left: 0px;}
.main-table .hcepribbon span {position: absolute; top: 30px; right: 0; transform: rotate(-45deg); width: 200px; background: #097909; padding: 5px 0; color: #fff; text-align: center; font-size: 22px; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0,0,0,0.12);}
.hcep a {text-decoration: none;}
.dhcep a {text-decoration: none;}
.dhcepp a {text-decoration: none;}

/** Upgrade **/

.main-table .deep-upgrade-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .deep-upgrade-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .deep-upgrade-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-hce .deep-upgrade-package::before {content: "Deep"}
.main-hce .deep-upgrade-package::after {content: "HIARCS Chess Explorer Pro"}
.main-hce .deep-upgrade-package {background: #a26bfa;}
.main-hce .left-area, .main-hce .centre-area, .main-hce .right-area {background: #a26bfa; /*outline: 3px solid #a26bfa;*/}
.main-table .premium-upgrade-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .premium-upgrade-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .premium-upgrade-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-hcep .premium-upgrade-package::before {content: "Premium"}
.main-hcep .premium-upgrade-package::after {content: "HIARCS Chess Explorer Pro"}
.main-hcep .premium-upgrade-package {background: #097909;}
.main-hcep .left-area, .main-hcep .centre-area, .main-hcep .right-area {background: #097909; /*outline: 3px solid #a26bfa;*/}

/** Online Book */
.main-table .main-online-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .main-online-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .main-online-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-online-book a {text-decoration: none; color: #000000}
.main-online-book .main-online-package::before {content: "Online Book Access"}
.main-online-book .main-online-package {background: #22972c;}
.main-online-book .features li::selection {background: #22972c;}
.main-online-book ::selection, .main-online-book .centre-area {background: #22972c;}
.main-online-book .buybtn button {border: 2px solid #22972c; background: #eeeeee; color: #22972c;}
.main-online-book .buybtn button:hover { background-color: #22972c; color: #eeeeee}
.main-table .onlinebookribbon {width: 150px; height: 150px; position: absolute; top: -10px; left: -10px; overflow: hidden;}
.main-table .onlinebookribbon::before, .main-table .onlinebookribbon::after {position: absolute; content: ""; z-index: -1; display: block; border: 7px solid #155e1b; border-top-color: transparent; border-left-color: transparent;}
.main-table .onlinebookribbon::before {top: 0px; right: 15px;}
.main-table .onlinebookribbon::after {bottom: 15px; left: 0px;}
.main-table .onlinebookribbon span {position: absolute; top: 30px; right: 0; transform: rotate(-45deg); width: 200px; background: #22972c; padding: 10px 0; color: #fff; text-align: center; font-size: 16px; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0,0,0,0.12);}

/** CTG Book **/
.main-table .main-ctg-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .main-ctg-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .main-ctg-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-ctg-book a {text-decoration: none; color: #000000}
.main-ctg-book .main-ctg-package::before {content: "CTG Opening Book"}
.main-ctg-book .main-ctg-package {background: #22972c;}
.main-ctg-book .features li::selection {background: #22972c;}
.main-ctg-book ::selection, .main-ctg-book .centre-area {background: #22972c;}
.main-ctg-book .buybtn button {border: 2px solid #22972c; background: #eeeeee; color: #22972c;}
.main-ctg-book .buybtn button:hover { background-color: #22972c; color: #eeeeee}

/** iPhone **/
.main-table .main-iphone-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .main-iphone-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .main-iphone-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-iphone a {text-decoration: none; color: #000000}
.main-iphone .main-iphone-package::before {content: "HIARCS Chess for iPhone"}
.main-iphone .main-iphone-package {background: #e70707;}
.main-iphone .features li::selection {background: #e70707;}
.main-iphone ::selection, .main-iphone .centre-area {background: #e70707;}
.main-iphone .buybtn button {border: 2px solid #e70707; background: #eeeeee; color: #e70707;}

/** iPad **/
.main-table .main-ipad-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .main-ipad-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .main-ipad-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-ipad a {text-decoration: none; color: #000000}
.main-ipad .main-ipad-package::before {content: "HIARCS Chess for iPad"}
.main-ipad .main-ipad-package {background: #e70707;}
.main-ipad .features li::selection {background: #e70707;}
.main-ipad ::selection, .main-ipad .centre-area {background: #e70707;}
.main-ipad .buybtn button {border: 2px solid #e70707; background: #eeeeee; color: #e70707;}

/** HCEP Mac **/
.main-table .mac-hcep-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .mac-hcep-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .mac-hcep-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-hcep .mac-hcep-package::before {content: "Mac OS"}
/* .main-hcep .mac-hcep-package::after {content: "Chess Explorer Pro"} */
.main-hcep .mac-hcep-package {background: #a26bfa;}

/** HCEP PC **/
.main-table .pc-hcep-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .pc-hcep-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .pc-hcep-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-hcep .pc-hcep-package::before {content: "PC Windows"}
/* .main-hcep .pc-hcep-package::after {content: "Chess Explorer Pro"} */
.main-hcep .pc-hcep-package {background: #a26bfa;}

/* Deep Junior */
.main-table .dj-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.main-table .dj-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px; transform: translate(-50%, -50%);}
.main-table .dj-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #eeeeee; padding: 0 15px;}
.main-dj a {text-decoration: none; color: #000000}
.main-dj .dj-package::before {content: "Deep Junior"}
.main-dj .dj-package::after {content: "UCI Chess Engine"}
.main-dj .dj-package {background: #a26bfa;}
.main-dj .features li::selection {background: #a26bfa;}
.main-dj ::selection, .main-hce .centre-area {background: #a26bfa;}
.main-dj .buybtn button {border: 2px solid #a26bfa; background: #eeeeee; color: #a26bfa;}
.main-dj .buybtn button a {color: #a26bfa;}
.main-dj .buybtn button:hover {background-color: #a26bfa; color: #eeeeee}
.main-dj .buybtn button a:hover {color: #eeeeee;}

/*** Pricing ***/
.options-container {max-width: 1225px; width: 100%; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
.options-container .table {background-color: #fff; width: 30%; padding: 15px 15px; position: relative; box-shadow: 0 5px 10px rgba(0,0,0,0.1);}
.table .price-section {display: flex; justify-content: center;}
.table .price-area {height: 120px; width: 120px; padding: 2px;}
.price-area .left-area {height: 66%; width: 66%; z-index: 1; border-radius: 50%; border: 3px solid #fff; line-height: 80px; text-align: center; color: #fff; position:relative; float: left; top:34%; left: 50px; overflow:hidden; box-shadow:0px 0px 8px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);clip-path: circle(67px at center);}
.price-area .centre-area {height: 100%; width: 100%; border-radius: 50%; border: 3px solid #fff; line-height: 117px; text-align: center; color: #fff; position: relative;box-shadow:0px 0px 8px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);}
.price-area .right-area {height: 66%; width: 66%; border-radius: 50%; border: 3px solid #fff; line-height: 80px; text-align: center; color: #fff; position:relative; float: right; top: 34%; right: 45px;box-shadow:0px 0px 8px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);}
.price-area .centre-area .price-info {font-size: 26px; font-weight: 500;}
.price-area .left-area .price-info, .right-area .price-info {font-size: 18px; font-weight: 500;}

/*** Discount Pricing ***/

.table .price-area-discount {height: 120px; width: 120px; padding: 2px;}
.price-area-discount .left-area {height: 66%; width:66%; z-index: 1; border-radius: 50%; border: 3px solid #fff; line-height: 20px; text-align: center; color: #fff; position:relative; float: left; top:34%; left: 50px; overflow:hidden; box-shadow:0px 0px 8px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);clip-path: circle(67px at center);}
.price-area-discount .centre-area {height: 100%; width: 100%; border-radius: 50%; border: 3px solid #fff; line-height: 58px; text-align: center; color: #fff; position: relative;box-shadow:0px 0px 8px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);}
.price-area-discount .right-area {height: 66%; width: 66%; border-radius: 50%; border: 3px solid #fff; line-height: 20px; text-align: center; color: #fff; position:relative; float: right; top: 34%; right: 45px;box-shadow:0px 0px 8px rgba(0,0,0,0.3);-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);}
.price-area-discount .centre-area .price-info-strike {position: relative; top: 20px; left: 0px; font-size: 26px; font-weight: 500; text-decoration:line-through; color:#000000}
.price-area-discount .centre-area .price-info{position: relative; top: -13px; left: 0px; font-size: 26px; font-weight: 500; }
.price-area-discount .left-area .price-info-strike, .price-area-discount .right-area .price-info-strike {position: relative; float: left; top: 25%; left: 15px; font-size: 16px; font-weight: 500; text-decoration: line-through; color: #000000}
.price-area-discount .left-area .price-info, .price-area-discount .right-area .price-info {position: relative; float: left; top: 25%; left: 12px; font-size: 18px; font-weight: 500;}
.price-area-discount .left-area .price-info-strike, .price-area-discount .right-area .price-info-strike {position: relative; float: left; top: 25%; left: 15px; font-size: 16px; font-weight: 500; text-decoration: line-through; color: #000000}
.price-area-discount .left-area .price-info, .price-area-discount .right-area .price-info {position: relative; float: left; top: 25%; left: 12px; font-size: 18px; font-weight: 500;}
.price-area-discount .left-area .long-price .price-info-strike, .price-area-discount .right-area .long-price .price-info-strike {top: 20px; left: 10px;}
.price-area-discount .left-area .long-price .price-info, .price-area-discount .right-area .long-price .price-info {top: 20px; left: 6px;}

.table .hcep-package {width: 100%; height: 2px; margin: 35px 0; position:relative; text-align: center;}
.table .hcep-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #fff; padding: 0 15px; transform: translate(-50%, -50%);}
.table .hcep-package::after {position: relative; top: 15px; font-size: 24px; font-weight: 500; background: #fff; padding: 0 15px;}

.table .dhcep-package {width: 100%; height: 2px; margin: 35px 0; position: relative; text-align: center;}
.table .dhcep-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #fff; padding: 0 15px; transform: translate(-50%, -50%);}
.table .dhcep-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #fff; padding: 0 15px;}

.table .dhcepp-package {width: 100%; height: 2px; margin: 35px 0; position: relative; text-align: center;}
.table .dhcepp-package::before {position: absolute; top: 50%; left: 50%; font-size: 24px; font-weight: 500; background: #fff; padding: 0 15px; transform: translate(-50%, -50%);}
.table .dhcepp-package::after {position: relative; top:15px; font-size: 24px; font-weight: 500; background: #fff; padding: 0 15px;}

.hcep .hcep-package::before {content: "HIARCS"}
.hcep .hcep-package::after {content: "Chess Explorer Pro"}
.hcep .hcep-package {background: #87cefa;}

.dhcep .dhcep-package::before {content: "Deep HIARCS"}
.dhcep .dhcep-package::after {content: "Chess Explorer Pro"}
.dhcep .dhcep-package {background: #a26bfa;}

.dhcepp .dhcepp-package::before {content: "Deep HIARCS"}
.dhcepp .dhcepp-package::after {content: "Chess Explorer Pro"}
.dhcepp .dhcepp-package {background: #097909;}

.table .features {padding-top: 15px;}
.table .features li {margin-bottom: 10px;list-style: none;display: flex;}
.features li .list-name {font-size: 16px; font-weight: 400; padding-left: 10px; padding-top:8px;}

.table .buybtn {width: 100%; display: flex; margin-top: 35px; justify-content: center;}
.table .buybtn button {width: 80%; height: 50px; color: #fff; font-size: 20px; font-weight: 500; border: none; outline: none; border-radius: 24px; cursor: pointer; transition: all 0.3s ease;}
.table .buybtn button:hover {border-radius: 5px;}

.hcep .features li::selection {background: #83cefa;}
.hcep ::selection, .hcep .left-area, .hcep .centre-area, .hcep .right-area {background: #83cefa; /*outline: 3px solid #87cefa;*/}
.hcep .buybtn button {border: 2px solid #83cefa; background: #fff; color: #83cefa;}
.hcep .buybtn button:hover { background-color: #83cefa; color: #fff}

.dhcep .features li::selection {background: #a26bfa;}
.dhcep ::selection, .dhcep .left-area, .dhcep .centre-area, .dhcep .right-area {background: #a26bfa; /*outline: 3px solid #a26bfa;*/}
.dhcep .buybtn button {border: 2px solid #a26bfa; background: #fff; color: #a26bfa;}
.dhcep .buybtn button:hover { background-color: #a26bfa; color: #fff}
.dhcep ::selection, .dhcep .centre-area {background: #a26bfa;}
.dhcep .buybtn button {border: 2px solid #a26bfa; color: #a26bfa;}


.dhcepp .features li::selection {background: #097909;}
.dhcepp ::selection, .dhcepp .left-area, .dhcepp .centre-area, .dhcepp .right-area {background: #097909; /*outline: 3px solid #097909;*/}
.dhcepp .buybtn button {border: 2px solid #097909; background: #fff; color: #097909;}
.dhcepp .buybtn button:hover { background-color: #097909; color: #fff}
.dhcepp ::selection, .dhcepp .centre-area {background: #097909;}
.dhcepp .buybtn button {border: 2px solid #097909; color: #097909;}

.h3-engine-options-title {text-indent: 0; text-align: center; font-size: 1.5em;}
.h4-engine-options-title {font-size: 1.2em; text-align: start;}

::selection {color: #fff;}

.table .hcepribbon{width: 150px; height: 150px; position: absolute; top: -10px; left: -10px; overflow: hidden;}
.table .hcepribbon::before, .table .hcepribbon::after {position: absolute; content: ""; z-index: -1; display: block; border: 7px solid #5a90b1; border-top-color: transparent; border-left-color: transparent;}
.table .hcepribbon::before {top: 0px; right: 15px;}
.table .hcepribbon::after {bottom: 15px; left: 0px;}
.table .hcepribbon span {position: absolute; top: 30px; right: 0; transform: rotate(-45deg); width: 200px; background: #87cefa; padding: 10px 0; color: #fff; text-align: center; font-size: 16px; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0,0,0,0.12);}

.table .dhcepribbon{width: 150px; height: 150px; position: absolute; top: -10px; left: -10px; overflow: hidden;}
.table .dhcepribbon::before, .table .dhcepribbon::after {position: absolute; content: ""; z-index: -1; display: block; border: 7px solid #4606ac; border-top-color: transparent; border-left-color: transparent;}
.table .dhcepribbon::before {top: 0px; right: 15px;}
.table .dhcepribbon::after {bottom: 15px; left: 0px;}
.table .dhcepribbon span {position: absolute; top: 30px; right: 0; transform: rotate(-45deg); width: 200px; background: #a26bfa; padding: 10px 0; color: #fff; text-align: center; font-size: 16px; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0,0,0,0.12);}

.table .dhceppribbon{width: 150px; height: 150px; position: absolute; top: -10px; left: -10px; overflow: hidden;}
.table .dhceppribbon::before, .table .dhceppribbon::after {position: absolute; content: ""; z-index: -1; display: block; border: 7px solid #043604; border-top-color: transparent; border-left-color: transparent;}
.table .dhceppribbon::before {top: 0px; right: 15px;}
.table .dhceppribbon::after {bottom: 15px; left: 0px;}
.table .dhceppribbon span {position: absolute; top: 30px; right: 0; transform: rotate(-45deg); width: 200px; background: #097909; padding: 10px 0; color: #fff; text-align: center; font-size: 16px; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0,0,0,0.12);}

/*** Footer ***/
.footer {margin: auto;font-size: 75%;width: 98%;}
.testimonial-container {display: flex;width: 75%;margin: auto;}
.testimonials {border: 2px solid #ccc;background-color: #eee;border-radius: 5px;padding: 16px;margin: 16px 0;flex: 1;}
.testimonials:first-child {margin-right: 2vw;}
.testimonials::after {content: "";clear: both;display: table;}
.testimonials img {float: left;margin-right: 20px;border-radius: 50%;}
.testimonials span {font-size: 20px;margin-right: 2vw;}
.testimonials i {color: #0000ff;font-weight: bold;}

.imghalf img {width: 50%;}
.mslides img {vertical-align: middle;width: 50%;}
.email-img {position: relative; top: 3px;}

/*** SlideShow ***/
@keyframes fade {0%   { opacity: 0; }7.41%  { opacity: 1; }44.44%  { opacity: 1; }51.85%  { opacity: 0; }100% { opacity: 0; }} 
@-webkit-keyframes fade {0%   { opacity: 0; }7.41%  { opacity: 1; }44.44%  { opacity: 1; }51.85%  { opacity: 0; }100% { opacity: 0; }}
@-o-keyframes fade {0%   { opacity: 0; }7.41%  { opacity: 1; }44.44%  { opacity: 1; }51.85%  { opacity: 0; }100% { opacity: 0; }}
@-moz-keyframes fade {0%   { opacity: 0; }7.41%  { opacity: 1; }44.44%  { opacity: 1; }51.85%  { opacity: 0; }100% { opacity: 0; }}

.fadeinmain {width: 95%;display: flex;margin: auto;justify-content: center;}
.fadeinmain img {opacity:0;animation-name: fade; animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 95%;}
.fadeinmain img:nth-child(1) {animation-delay: 0s;}
.fadeinmain img:nth-child(2) {animation-delay: 9s;}
.fadeinmain img:nth-child(3) {animation-delay: 18s;}

.fadein {width: 95%;display: flex;margin: auto;justify-content: center;}
.fadein img {opacity:0;animation-name: fade; animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 47.7%;}
.fadein img:nth-child(1) {animation-delay: 0s;}
.fadein img:nth-child(2) {animation-delay: 9s;}
.fadein img:nth-child(3) {animation-delay: 18s;}

.fadeinmob {width: 95%; display: flex; margin: auto;justify-content: center;}
.fadeinmob img {opacity:0;animation-name: fade;animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 47.7%;}
.fadeinmob img:nth-child(1) {animation-delay: 0s;}
.fadeinmob img:nth-child(2) {animation-delay: 9s;}
.fadeinmob img:nth-child(3) {animation-delay: 18s;}

.iphoneimg {margin: auto;float:right;}
.iphoneimg img {opacity:0;animation-name: fade;animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 47.7%;margin-left: 15px}
.iphoneimg img:nth-child(1) {animation-delay: 0s;}
.iphoneimg img:nth-child(2) {animation-delay: 9s;}
.iphoneimg img:nth-child(3) {animation-delay: 18s;}

.ipadimg {margin: auto;float:right;}
.ipadimg img {opacity:0;animation-name: fade;animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 100%;margin-left: 15px}
.ipadimg img:nth-child(1) {animation-delay: 0s;}
.ipadimg img:nth-child(2) {animation-delay: 9s;}
.ipadimg img:nth-child(3) {animation-delay: 18s;}

.fadein-product {width: 95%;display: flex;margin: auto; justify-content: center;}
/* .fadein-product {margin: auto;} */
.fadein-product img {opacity:0;animation-name: fade; animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 47.7%;margin-left: 15px;}
.fadein-product img:nth-child(1) {animation-delay: 0s;}
.fadein-product img:nth-child(2) {animation-delay: 9s;}
.fadein-product img:nth-child(3) {animation-delay: 18s;}

.box {text-align: center;opacity: 0;margin: auto;}
.box img {max-width: 100%;}

.box-centre {text-align:center; opacity: 0; margin: auto;}
.box-centre img {max-width: 50%;}

.box-product {text-align: center; opacity: 0; margin: auto;}
.box-product img {max-width: 47.7%;}

.iphonebox {float: right;opacity: 0;margin: auto;}
.iphonebox img {max-width: 100%;margin-left: 15px;}

.iphoneboxmob {display:none}

.fadeinhce {width: 95%;display: flex;margin: auto;justify-content: center;}
.fadeinhce img {opacity:0;animation-name: fade; animation-duration: 27s;animation-iteration-count: infinite;position:absolute;max-width: 95%;}
.fadeinhce img:nth-child(1) {animation-delay: 0s;}
.fadeinhce img:nth-child(2) {animation-delay: 9s;}
.fadeinhce img:nth-child(3) {animation-delay: 18s;}
.android-gallery-column-tablet {float: left; width: 48%; padding: 5px;}
.android-gallery-column-phone {float: left; width: 24%; padding-left: 5px;}
.android-gallery-row:after {content: ""; clear: both; display: table;}

.star-rating {display: flex; height: 50px;}
.star-rating-title {font-size: 1.5rem;}
#star-rating-div {position: relative; top: 20px;
  height: fit-content;
}

.c-star {width: var(--size, 32px); height: var(--size, 32px); fill:  grey;
}

/* .c-star.show {fill: #fed94b; } */
.c-star.show {fill: #ac8e1ad7; }

.video_portrait {width: 320px; display:flex; justify-content: center; align-items: center;}

/** Youtube Vidoes **/
.video-wrapper {width: 100%; max-width: 560px; max-height: 315px; margin: auto;}
.video-container {max-height: 315px; margin: auto; position: relative; padding-bottom: 56.25%; /*16:9 aspect ratio*/ height: 0; overflow: hidden; margin-bottom: 20px;}
.video-container iframe {width: 100%; max-width: 560px; max-height: 315px; margin: auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.chessresults {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.chessresults b {
  display: inline-block;
  min-width: 68px; /* Adjust width to align text */
  text-align: right; /* Align text to the right */
}


/*** Screen Sizes ***/
@media (max-width: 1225px) {.options-container .table {margin: auto; width: 50%; margin-bottom: 40px;} .main-options-container .main-table {margin: auto; width: 42%; margin-bottom: 40px;} }
@media (max-width: 1096px) {.main-options-container .main-table {margin:auto; width: 45%; margin-bottom: 40px;}}
/*@media (max-width:698px) {.options-container .table {width: 100%;} }*/
@media (max-width:698px) {.options-container .table {width: 100%;} .android-gallery-column-tablet {width: 95%;} .android-gallery-column-phone {width: 48%;}}
@media (max-width: 730px) {.main-options-container .main-table{width: 100%;}}
@media only screen and (max-width: 653px) {main {width: 98%;margin: auto;}.main-container {display: unset;}.mainflex:first-child {margin-right: 0;}#head {display:none;}#mainnav {display: none;}#secondnav {display: none;}.testimonial-container {display: block;width:98%;}.testimonials {text-align: center;float: none;}.testimonials img {margin: auto;float: none;display: block;}h1{font-size: 20px;}th {font-size: 0.9rem;}td{font-size: 0.8rem;}.testimonials:first-child {margin-right: 0;}video{width: 100%}h4{font-size:100%;}aside {display:none;}.mslides img {width: 100%;}.imghalf img {width: 100%;}.imgleft {float:none; display: block; padding: 20px; margin: auto;}.imgleftipad {float:none; display: block; padding: 20px; margin: auto;}.imgright {float:none; display: block; padding: 20px; margin: auto;}.imgrightipad {float:none; display: block; padding: 20px; margin: auto;}.imgrightipadl {float:none; max-width: 95%; padding: none; margin: auto;}.fadein img, .fadeinmob img {max-width: 95%;}.iphoneimg {width: 100%; display: flex; justify-content: center;}.ipadimg {width: 100%; display: flex; justify-content: center;}.iphoneimg img {margin: 0;max-width: 95%;}.ipadimg img {margin: 0;max-width: 95%;}.iphonebox {display:none;}.iphoneboxmob {display:block;opacity: 0;margin: auto;}.iphoneboxmob img {max-width: 100%;}.sidemenu{display: none;}}
@media only screen and (min-width: 653px) {#mobile {display: none;}#mobilesndnav {display: none;}}
@media only screen and (min-width: 653px) {main {width: 98%;}.testimonial-container {width: 98%}}
@media only screen and (min-width: 860px) and (max-width: 964px) {.header a {font-size: 5vw;}.header p {font-size: 1.25vw;}}
@media only screen and (min-width: 653px) and (max-width: 859px) {.header a {font-size: 43px;} .header p {font-size: 11px;}}
@media only screen and (min-width: 653px) and (max-width: 933px) {nav {font-size: 1.65vw}}
@media only screen and (min-width: 653px) and (max-width: 1023px) {.quickjump {font-size: 1.3vw;}}
@media only screen and (max-height: 600px) {.sticky {overflow-y: scroll; bottom: 0;}}
@media only screen and (max-height: 800px) {.quickjump {overflow-y: scroll; bottom: 0;}}
@media only screen and (max-width: 885px) {.obtable th {font-size: 0.8rem;}.obtable td {font-size: 0.6rem;} .obtable th, .obtable td {padding: 5px;}}
@media only screen and (max-width: 1000px) {table {width: 100%;}}
@media only screen and (min-width: 1000px) {th{font-size: 1.25em;}}