@charset "utf-8";
/* CSS Document */

/*********************************************************/
/* BEGIN: Global Fonts */
/*********************************************************/

@font-face {
    font-family: 'temacantanteregular';
    src: url('../fonts/temacantante-regular-webfont.woff2') format('woff2'),
         url('../fonts/temacantante-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'temacantanteitalic';
    src: url('../fonts/temacantante-italic-webfont.woff2') format('woff2'),
         url('../fonts/temacantante-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'temacantantebold';
    src: url('../fonts/temacantante-bold-webfont.woff2') format('woff2'),
         url('../fonts/temacantante-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'temacantantebolditalic';
    src: url('../fonts/temacantante-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/temacantante-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*********************************************************/
/* END: Global Fonts */
/*********************************************************/

/*********************************************************/
/* BEGIN: Universal Stylings */
/*********************************************************/
* {
    outline: none;
}

html {
    scroll-padding-top: 92px;
    --mainFont: 'Roboto Condensed', sans-serif;
    --border: #324350;
    --borderBright: #596d7b;
    --fontBright: #e4edf3;
    --fontDim: #91a6b5;
    --fontHighlight: #ff5442;
    --fontLightBlue: #88c1e7;
    --fontRed: #ca5f5f;
    --fontVeryDim: #596d7b;
    --selectionsDim: #708798;
}

body {
	overflow-y: scroll;
	background: #101c28 url("../images/fog.jpg") no-repeat center;
	background-attachment: fixed;
	background-size: cover;
	/*text-align: justify;*/
	margin: 0px;
	font-family: var(--mainFont);
	font-size: 20px; 
	line-height: 30px;
	color: var(--fontDim);
    cursor: default;
}

button { font-family: var(--mainFont); }

hr { 
    margin: 15px 0px;
	border: none;
	border-bottom: 1px solid var(--border);
}

::selection {
  background: #ff5442; /* WebKit/Blink Browsers */
  color: #FFFFFF;
}

::-moz-selection {
  background: #ff5442; /* Gecko Browsers */
  color: #FFFFFF;
}

a, a:visited { 
	cursor: pointer;
	text-decoration:none;
	color: var(--fontBright);
}

a:hover { color: var(--fontHighlight); }

:target:not(button) {
    -webkit-animation: target-fade 2s 1;
    -moz-animation: target-fade 2s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(255, 0, 0, 0.25); }
    100% { background-color: rgba(255, 0, 0, 0); }
}

@-moz-keyframes target-fade {
    0% { background-color: rgba(255, 0, 0, 0.25); }
    100% { background-color: rgba(255, 0, 0, 0); }
}

ol li:before { font-weight: bold; }

i.fa { padding: 0px 3px; }

h1 { 
	font-size: 36px; 
	line-height: 48px; 
	margin-top: 0px;
	margin-bottom: 20px;
	color: var(--fontBright); 
    text-transform: uppercase;
    letter-spacing: 1px;
}

    /*remove if NOT using Tema Cantante font */
    h1 {
        font-family: 'temacantantebolditalic';
        font-size: 56px;
		font-weight: normal;
        text-transform: none;
        letter-spacing: normal;
    }

    /*remove if NOT using Tema Cantante font */
    .callToActionBanner h1, .installStep h1 {
        font-family: var(--fontMain);
	    font-size: 34px; 
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.target div h1:first-of-type { 
	display: inline-block; 
	margin-bottom: 0px;
}

li.bulletwarning {
    list-style-type: none;
}

li.bulletwarning::before {
    content: "\f071";
    color: var(--fontHighlight);
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    margin-left: -24px;
    padding-right: 6px;
}

li.bulletcheckmark {
    list-style-type: none;
}

li.bulletcheckmark::before {
    content: "\f00c";
    color: #88C967;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    margin-left: -24px;
    padding-right: 6px;
}

body#installationGuide #troubleshooting .tableContainer ul { 
	margin: 0px; 
	margin-left: -20px; }

h2 {
	font-size: 22px; 
	line-height: 32px; 
	margin-top: 30px;
	/*margin-bottom: -15px;*/
	margin-bottom: 0px;
	color: var(--fontBright); 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sectionTitle h3, .aboutCompare h3 { margin: 0px; }

h3 {
	font-size: 28px; 
	line-height: 38px; 
    text-transform: uppercase;
	color: var(--fontBright);
    letter-spacing: 1px;
}

body#creditAndThanks h3, body#configDetails h3 { text-transform: none; }

h4 {
    color: var(--fontBright);
    text-transform: uppercase;
    margin: 20px 0px;
    font-weight: normal;
}

h6 { font-size:20px; }

#columnSide #sideLinks ul, #columnSide #sideLinks ol { padding-inline-start: 20px; }

#columnSide h6, #columnSide p, #columnSide li { position: relative; }

#columnSide p {
    padding: 0px 0px 0px 15px;
    margin: 0px;
}

#columnSide a.active h6:before, #columnSide a.active p:before, #columnSide a.active li:before {
    font-size: 16px;
    font-family: 'fontawesome';
    content: "\f0da";
    position: absolute;
    color: var(--fontDim) !important;
}

#columnSide a.active p:before { left: 0px; }
#columnSide a.active h6:before { left: -15px; }
#columnSide a.active li:before { left: -30px; }

#columnSide ol li {
    margin: 0px 0px 0px 10px;
}

#columnSide h6 {
	background: rgba(40,44,42,0.05);
	margin: 0px -26px 15px -30px;
    padding: 10px 30px 10px 30px;
    color: var(--fontBright);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(-90deg, rgba(0,0,0,0.37) 85%, rgba(0,0,0,0) 100%);
    text-align: center;
}

    /*remove if NOT using Tema Cantante font */
    #columnSide h6 {
        margin: 0px 0px 5px 0px;
        padding: 0px;
        font-family: 'temacantantebolditalic';
        font-size: 24px;
        text-transform: none;
        letter-spacing: normal;
        background: none;
        text-align: left;
    }

#columnSide a h6, #columnSide a:visited h6 { color: var(--fontBright); }

#columnSide a:hover h6 { color: var(--fontHighlight); }

.m0 { margin: 0px !important; }

.mb0 { margin-bottom: 0px !important; }

.mt0 { margin-top: 0px !important; }

.tabLinks i.fa { padding: 0px; }

sup { 
    line-height: 0px;
    font-size: small;
}

/*********************************************************/
/* END: Universal Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Scrollbar Styling */
/*********************************************************/

/* Special element scrollbars */
/*#sideLinks::-webkit-scrollbar,*/ .videoGalleryList::-webkit-scrollbar, .moreLinksInnerContent::-webkit-scrollbar { 
    width: 5px; /* width of vertical scrollbar */
    height: 5px; /* height of horizontal scrollbar */
}

/* width */
::-webkit-scrollbar {
    width: 7px; /* width of vertical scrollbar */
    height: 7px; /* height of horizontal scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
      background: transparent;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
      background: #e4edf3;
      border-radius: 7px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
      background: #FFFFFF;
}

/*********************************************************/
/* END: Scrollbar Styling */
/*********************************************************/

/*********************************************************/
/* BEGIN: Class Specific Stylings */
/*********************************************************/

[class*="columnCount"] {	
	padding-inline-start: 0px;
	display: grid;
}

ul[class*="columnCount"] li { 
	margin-left: 40px;
	padding-right: 20px;
}

.bodyInnerBGOnly {
	background: #FFFFFF url("../images/fog.png") no-repeat center;
	background-attachment: fixed;
	background-size: cover;
}

#cheats { 
    /*display: none;*/
    border: 15px solid rgb(241, 203, 97, 0.2) !important;
}

#cheats > div {
    background: url("../images/mira.png") no-repeat bottom right;
    background-color: rgba(0,0,0,0.5);
    background-size: contain;
    background-attachment: fixed;
}

.columnCount2 { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
}

.columnCount3 { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
}

.columnCount4 { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
}

.columnCount5 { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr);
}

[class*="columnCount"] p { margin: 0px; }

.noSideColumn #columnSide { display: none; }

.noSideColumn #wrapper { max-width: 1325px; }

#columnSide {
	text-align: inherit !important;
	font-size: 16px;
	width: 372px; 
	min-width: 372px; 
    z-index: 17;
}

#columnMain {
	flex: 1; 
	min-width: 1030px;
    margin-left: -4px;
	border-left: 1px solid var(--border);
    padding-left: 1px;
}

.columnMainCentered { margin: 0 auto; }

#columnMain > *:nth-last-of-type(3), #columnMain > *:nth-last-of-type(3) { border: none; }

/*#columnMain > div:last-of-type, #columnMain > div:last-of-type { margin-top: 50px; }*/

.configAnchorLink p, .creditsProfileNameTop h3, .creditsProfileLinks p { 
	display: inline-block; 
	margin-top: 0px;
	vertical-align: sub;
}

.creditsProfileNameTop { display: flex; }

.creditsProfileName, .creditsProfileLinks { 
    white-space: nowrap;
    align-self: center;
}

.creditsProfileLinks { margin-left: 20px; }

.configAnchorLink p, .creditsProfileLinks p { margin: 0px 15px 0px 0px; }

.configAnchorLink p:last-of-type, .creditsProfileLinks p:last-of-type { margin-right: 0px !important; }

[class*="expandable-"] {
    display: none;
	/*-webkit-transition: max-height 3s;
	-moz-transition: max-height 3s;
	-ms-transition: max-height 3s;
	-o-transition: max-height 3s;
	transition: max-height 3s;
	overflow: hidden;*/
	/* "height: 0" does not work with css transitions */
	/*max-height: 0;
	margin-left: -50px !important;
	margin-right: -50px !important;*/
}

#start h1, #enjoy h1 {
	margin-bottom: 0px;
	text-align: center; 
	display: block;
}

#enjoySH2EEVideoBanner {
    margin: 25px 0px;
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

#enjoySH2EEVideoBannerInner {
    border-top: 3px solid var(--border); 
    border-bottom: 3px solid var(--border); 
    height: 400px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%); 
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

#enjoySH2EEVideoBanner h1 {
    z-index: 1; 
    margin: 0px; 
    padding: 25px; 
    display: inline-block; 
    position: absolute; 
    color: var(--fontVeryDim); 
    font-family: var(--fontMain); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 44px; 
    text-shadow: 0 0 10px #070d13, 0 0 20px #070d13, 0 0 30px #070d13, 0 0 40px #070d13, 0 0 50px #070d13, 0 0 60px #070d13, 0 0 70px #070d13;
}

.flex-container {
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;	
	justify-content: center;
}

.flex-item {	
	flex: 0 1;
	min-width: calc(100% / 3 - 75px);
	background: rgba(255,255,255,.3);
	padding: 25px; 
	margin: 10px;
	border: 1px solid #C0C0C0;
}

.flex-wrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.followTheseSteps {
    font-size: 16px;
    font-weight: normal;
    margin: -5px 0px;
	color:#6A6A6A;
}

#footer {
	/*background: linear-gradient(90deg, rgba(0,0,0,0.37) 95%, rgba(0,0,0,0) 100%);*/
    height: 50px;
    color: var(--fontDim);
    font-family: 'Questrial', sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 13px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #324350;
    padding: 0px 0px;
    margin-right: 4px;
}

#footer p { padding: 0px 0px 0px 15px; }

#footer p:first-of-type { padding: 0px; }

#footer a, #footer a:visited { color: var(--fontVeryDim); }

#footer a:hover { color: var(--fontHighlight); }

#footerSpacer { height: 100px; }

#footer i {
    font-size: 22px;
    line-height: inherit;
    padding-left: 10px;
}

#columnMain .guideAnchorLink, #columnMain .configAnchorLink {
    margin-left: 20px;
    text-align: right;
}

#columnSide .guideAnchorLink, #columnSide .configAnchorLink { float: right; }

.guideAnchorLink, .configAnchorLink, .creditAnchorLink { 
    align-self: center;
    color: var(--fontVeryDim) !important;
}

.guideAnchorLink:hover, .configAnchorLink:hover, .creditAnchorLink:hover { color: var(--fontHighlight) !important; }

.imgPCRegionDifference {
	float: right;
	padding-left: 20px;
	max-height: 125px;
}

.innerStep {
	margin: 30px 0px;
	/* padding: 20px 50px; 
	margin-left: -50px !important;
	margin-right: -50px !important; */
}

.langPackReviseDate {
    padding: 5px 10px;
    margin: 0px 5px 0px 0px;
    font-size: 70%;
    background: rgba(111, 165, 204, 0.2);
    border: 1px solid #2f5a86;
    display: inline-block;
    min-width: 120px;
	text-align: center;
    color: var(--fontDim) !important;
    vertical-align: 10%;
}

#logo { 
    width: auto;
    padding: 35px 50px 35px 50px;
    text-align: center;
	margin: 0 auto;}

#logo img { width: 80% }

.noBorder { border: none !important; }

#mainColumnTopLinks { 
    position: sticky;
    top: -1px;
    z-index: 16;
	background: #101c28 url("../images/fog.jpg") no-repeat center;
	background-attachment: fixed;
	background-size: cover;
}

#mainColumnTopLinks span {
    font-family: 'Questrial', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.thickborderBG { 
	font-family: 'Questrial', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	background: rgba(17, 71, 121, 0.07);
	text-align: center;
}

.thickborderBG em { font-weight: normal; }

.thickborderBG h1 { 
	font-size: 36px; 
	color: #455671;
}

.thickborderTop { border-top: 5px solid #C0C0C0 !important; }

.thickborderBottom { border-bottom: 5px solid #C0C0C0 !important; }

#sideLinks { 
	padding: 30px; 
	overflow-y: auto;
}

#sideLinks span {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    color: var(--fontBright);
    font-size: 17px;
}

#sideLinks a, #sideLinks a:visited { color: var(--fontDim); }

#sideLinks span a, #sideLinks span a:visited { color: var(--fontBright); }

#sideLinks a:hover, #sideLinks span a:hover { color: var(--fontHighlight); }

#sideLogo {
	-webkit-transition: max-height 3.5s, opacity 1.5s;
	-moz-transition: max-height 3.5s, opacity 1.5s;
	-ms-transition: max-height 3.5s, opacity 1.5s;
	-o-transition: max-height 3.5s, opacity 1.5s;
	transition: max-height 3.5s, opacity 1.5s;
	overflow: hidden;
	/* "height: 0" does not work with css transitions */
	max-height: 0;
	opacity: 0;
}

#sideLogo img { 
	/*max-width: 290px;*/
	width: 100%;
	/*margin-bottom: 10px;*/
}

.smallCentered {
    font-size: 65%;
    vertical-align: bottom;
    padding: 0px 5px;
}

.sectionTitle { 
    display: flex;
    margin-bottom: 15px;
}

.sectionTitleLine { 
    height: 1px;
    flex-grow: 1;
    align-self: center;
    margin-left: 20px;
    border-bottom: 1px solid var(--border); 
}

.steps {
	padding: 50px; 
	/*border-bottom: 4px solid var(--border);*/
}

.steps *:last-child { margin-bottom: 0px; }

.stepsBasic { 
	padding: 50px; 
	/*border-bottom: 4px solid var(--border);*/
}

.SRModeSolutions {
    table-layout: fixed;
    margin-top: 20px !important;
    border-spacing: 0px;
    width: 100%;
    margin: 0px;
}

.SRModeSolutions th, .SRModeSolutions td {
    text-align: center;
    padding: 5px 10px;
}

.SRModeSolutions th {
    border-top: 1px solid;
    border-color: var(--border);
    padding-top: 15px;
}

#sticky {
    overflow-y: auto;
    /* padding: 40px 18px 40px 40px; */
    display: block;	
    background: url("../images/james.png") bottom right no-repeat;
    background-size: 376px auto;
}

.sticky {
	position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0px;
}

.tableLists { 
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.37) 5%, rgba(0,0,0,0.37) 95%, rgba(0,0,0,0) 100%);
    border-bottom: 1px solid var(--border);
}

.tableContainer {
	border-collapse: collapse;
	width: 100%;
}

.tableRow { border: none; }

.tableRowHeader { 
    font-weight: bold; 
    color: var(--fontVeryDim);
    border-bottom: 1px solid var(--border);
}

.tableRowHeaderSticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: -1px;
    padding-top: 15px;
    background: #101c28 url("../images/fog.jpg") no-repeat center;
	background-attachment: fixed;
	background-size: cover;
}

.tableCell { 
	display: table-cell; 
	vertical-align: text-top;
	padding: 8px 15px;
	border: none;
}

.tooltip_templates { display: none; }

.tooltip_templates > div { line-height: 0; }

.tooltip { 
    color: var(--fontDim);
    display: inline;
    border-bottom: 1px dashed;
    margin-bottom: -1px;
    cursor: help;
}

/*.tooltip:hover { color: var(--fontLightBlue); }*/

.tooltip_pathToGame { 
    color: #000000 !important;
    text-decoration: underline dotted;
    border-bottom: none;
}

#wrapper { 
	display: -webkit-flex;
	display: flex;
    margin: 0 auto;
    max-width: 1700px;
}

.thickBorder { 
    border: 15px solid rgba(145, 178, 206, 0.2);
    /*margin: 20px 0px;*/
}

.wheretostartBox { padding: 30px; }

#wheretostart > div:not(.sectionTitle):not(:last-of-type) { 
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--border);
}

/*********************************************************/
/* END: Class Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Button & Call to Action Stylings */
/*********************************************************/

body:not(#aboutTheProject) .callToActionBanner {
    margin: 25px 0px;
}

.callToActionBanner { 
	/*font-family: 'Montserrat', sans-serif;*/
	background: linear-gradient(90deg, rgba(0,0,0,0.37) 0%, rgba(0,0,0,0.37) 80%, rgba(0,0,0,0) 100%);
    text-align: center;
	text-transform: uppercase;
	border-top: 0px solid var(--border) !important;
	/*border-bottom: 4px solid var(--border) !important;*/
	font-weight: 100;
    display: flex;
    justify-content: center;
    align-self: center;
}

.callToActionBanner h1, .callToActionBanner p { 
    color: var(--fontVeryDim);
	display: inline-block;
}

.callToActionBanner h1 {
	font-size: 44px;
    line-height: 62px;
	margin-bottom: 0px;
}

.callToActionBanner p { 
	margin-left: 25px;
	width: auto;
	font-size: 30px;
    letter-spacing: 2px;
	padding: 15px 30px;
	vertical-align: super;
	font-style: normal;
}

.button {
	color: var(--fontBright) !important;
	display: inline-block;
    background: rgba(57, 80, 97, 0.3);
    border: none;
    border-bottom: 2px solid #70889a;
    text-align: center;
	text-transform: uppercase;
	margin: 0px;
	outline: none;
	cursor: pointer;
	/*border-radius: 5px;*/
}

.button:hover {
    background: #731313;
    border-bottom: 2px solid var(--fontHighlight);
}

.button:active {
    border-top: 2px solid #360909;
    border-bottom: none;
}

#columnSide .button { display: block !important; }

#columnSide .callToActionButton { 
	margin-top: 15px;
	padding: 10px;
}

.buttonTitle {
    font-family: 'Questrial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
}

.buttonTitle span { 
    display: block; 
    padding: 8px 35px;
}

.buttonMoreInfo {
    white-space: nowrap;
    min-width: 38px;
    width: inherit;
    background: rgba(0,0,0,0.30);
}

.buttonMoreInfo span { 
    display: block;
    padding: 8px 15px;
}

a.downloadButton { 
    display: block;
    margin-bottom: 15px;
}

div.downloadButton { 
    font-family: 'Questrial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 15px;
}

.downloadButton .fa { padding: 0px 0px 0px 3px; }

.callToActionButton {
    padding: 12px 25px;
    font-family: 'Questrial', sans-serif;
    letter-spacing: 1px;
	font-size: 20px;
}

/*********************************************************/
/* END: Button & Call to Action Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Notice Box Stylings */
/*********************************************************/

.notice { 
    color: #a0a6b3;
	position: relative;
	padding: 40px 20px 20px 40px;
	margin:20px 0px;
}

.notice *:first-child { margin-top: 0px; }

.notice *:last-child { margin-bottom: 0px; }

.note {
    background: rgba(111, 165, 204, 0.2);
    border: 1px solid #2f5a86;
}

.note:after { content: "NOTE"; color: #75a0cc; }

.tip {
    background: rgba(39, 103, 43, 0.2);
    border: 1px solid #436b46;
}

.tip:after { content: "TIP"; color: #6ca970; }

.warning {
    background: rgba(142, 47, 47, 0.2);
    border: 1px solid #862f2f;
}

.warning:after { content: "WARNING"; color: #af8585; }

.note:after, .warning:after, .tip:after {
	position: absolute;
	top: 8px;
	left: 15px;
	text-transform: uppercase;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 3px;
}

/*********************************************************/
/* END: Notice Box Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Breadcrumb Stylings */
/*********************************************************/

.breadcrumb {
    color: #000000;
    /* border: 1px solid #a4bfd6; */
    display: inline;
    margin: 2px 3px;
    white-space: nowrap;
    font-weight: normal;
}

.breadcrumb span { 
    background: url("../images/breadcrumb_last.png") center right no-repeat #b0b7bd;
    padding: 0px 20px 0px 7px;
}

.breadcrumb span:first-of-type { 
    background: url("../images/breadcrumb_first.png") center right no-repeat #8a96a1;
}

.breadcrumb span:nth-last-of-type(1) {
    background: #cccccc;
    padding: 0px 7px 0px 5px;
}

/*********************************************************/
/* END: Breadcrumb Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Code/INI/Folder Text Stylings */
/*********************************************************/

h3 .code { 
	border-width: 2px;
	color: #191919;
	padding: 1px 6px;
}

.code {
	color: #000000;
    background: #93aecc;
    /*border: 1px solid #a4bfd6;*/
	padding: 0px 5px; 
	display: inline; 
	margin: 2px 3px;
	white-space: nowrap;
	font-weight: normal;
}

.folder {
    background: #ca9590;
    /*border: 1px solid #afa9a1;*/
}

.ini {
	background: #dac896;
    /*border: 1px solid #afab8a;*/
}

.key {
    background: #cecece;
    background: linear-gradient(#949494, #cecece 35%);
    border: 1px solid #eaeaea;
    border-bottom: 4px solid #888888;
	border-radius: 3px;
	font-size: 16px;
    font-weight: bold;
	padding: 2px 6px;	
    color: #191919;
}

.inactive {
	color: #909090 !important;
    background: #4c4c4c;
    /*border: 1px solid #868686;*/
}

/*********************************************************/
/* END: Code/INI/Folder Text Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: System Requirements Table Stylings */
/*********************************************************/

.systemReqTable p { margin: 0px; }

.systemReqTable strong { color: var(--fontBright); }

body#speedrun .systemReqTable strong { color: var(--fontDim); }

.systemReqTable h2 { 
    margin: 0px; 
    margin-bottom: 10px;
}

.systemReqTable {
    font-size: 18px; 
    line-height: 28px; 
    display: flex; 
    justify-content: center; 
    margin: 30px 0px;
}

.systemReqColumn {
    display: inline-block; 
    text-align: left;
    width: 42%;
}

.systemReqMinimum { margin: 0px 25px 0px 0px; }

.systemReqRecommended { margin: 0px 0px 0px 25px; }

#systemreq .footnotes sup { font-weight: bold; }

#systemreq sup { color: var(--fontVeryDim); }

.orBetter {
    color: #adadad; 
    font-size: 17px;
}

/*********************************************************/
/* END: System Requirements Table Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Changelog Stylings */
/*********************************************************/

.changelogPastNotes li div:first-of-type strong { color: var(--fontVeryDim); }

#changelog li > div { display: table-cell; }

#changelog li > div:first-of-type { min-width: 110px; }

#changelog ul ul, #changelog ul ol { padding-left: 22px; } 

#changelog ul > li:not(:last-child) { margin-bottom: 0px; }

#changelogLastUpdated {
	padding: 0px 50px;
	min-width: 825px;
	width: 75%; 
	margin: 0 auto;
	font-size: 18px
}

#changelogLastUpdated tr.NEW td:first-of-type:after {
	content: 'NEW';
	font-size: 12px;
	font-weight: bold;
	color: #E03000;
	border: 1px solid #E03000;
	vertical-align: top;
	padding: 1px 3px;
	margin-left: 5px;
}

#changelogLastUpdated td:first-child { 
	text-align: left; 
	padding-left: 50px; 
}

#changelogLastUpdated td:last-child { 
	text-align: right; 
	padding-right: 50px; 
}

#changelog .tableRowHeader .tableCell { border: none; }

#changelog .tableContainer .tableCell:nth-of-type(1) { width: 28%; }
#changelog .tableContainer .tableCell:nth-of-type(2) { width: 52%; }
#changelog .tableContainer .tableCell:nth-of-type(3) { width: 20%; }

/*********************************************************/
/* END: Changelog Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Directory Tree Stylings */
/*********************************************************/

#directoryTree hr { margin: 50px 0px; }

.directoryTree .code {
	color: #000000;
    margin-left: 0px !important;
	margin-right: 8px !important;
	font-size: 20px; 
}

.directoryTree strong {
	color: var(--fontDim);
	font-weight: normal;
}

.directoryTree ul:first-child { padding-inline-start: 20px; }

.directoryTree > ul {
	color: var(--fontVeryDim);
	font-size: 17px;
	margin: 0px 0px 0px 20px;
	list-style: none !important;
}

.directoryTree > ul li {
	position: relative;
	list-style: none !important;
}

.directoryTree > ul li:before {
	position: absolute;
	left: -15px;
	top: 0px;
	content: '';
	display: block;
	border-left: 2px solid var(--border);
	height: 15px;
	border-bottom: 2px solid var(--border);
	width: 10px;
}

.directoryTree > ul li:after {
	position: absolute;
	left: -15px;
	bottom: -7px;
	content: '';
	display: block;
	border-left: 2px solid var(--border);
	height: 100%;
}

.directoryTree > ul li.root { margin: 0px 0px 0px -40px; }

.directoryTree > ul li.root:before { display: none; }

.directoryTree > ul li.root:after {	display: none; }

.directoryTree > ul li:last-child:after { display: none; }

/*********************************************************/
/* END: Directory Tree Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Image Carousel Stylings */
/*********************************************************/

.carouselDots ul {
	margin: 15px 0px 0px 0px;
    padding: 0px;
    text-align: center;
}

.carouselDots li {
    display: inline-block;
    padding: 0px 5px;
	outline: none;
	width: 3%;
}

.carouselDots li a {
    cursor: pointer;
	outline: none;
	background-color: #313e4e;
    /*border-radius: 50%;*/
    display: inline-block;
    height: 10px;
    overflow: hidden;
    text-indent: -999em;
    width: 100%;
    position: relative;
    z-index: 15;
}

/* .carouselDots li a:after {
	content: 'TEST';
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: 500;
} */

.carouselDots li a:hover { background-color: var(--fontHighlight); }

.carouselDots li.ui-tabs-active a { background-color: #6ba5cc; }

.carouselNavContainer { position: relative; }

.carouselContainer h2 { display: inline-block; }

.carouselContainer img { 
    width: 100%;
    height: auto;
}

.carouselContainer .ui-tabs-panel { padding: 0px; }

.carouselContainer > div { border: 0px; }

/*.carouselContainer .firstImageAspectRatio4x3 .jx-left img { clip-path: inset(0% 13%); }*/

.prev, .next {
	color: var(--fontVeryDim);
	cursor: pointer;
	position: absolute;
    height: 100%;
	width: 50px;
	z-index: 10;
}

.prev:hover, .next:hover { color: var(--fontHighlight); }

.prev { left: -50px; }

.next { right: -50px; }

.prev:after, .next:after {
	font-family: FontAwesome;
	font-size: 28px;
	top: 50%;
    position: absolute;
    vertical-align: middle;
	-webkit-transition: left 0.2s, right 0.2s; /* Safari prior 6.1 */
	transition: left 0.2s, right 0.2s;
}

.prev:after { 
	content: '\f053';
	right: 14px;
}

.prev:hover:after { right: 22px; }

.next:after { 
	content: '\f054';
	left: 14px;
}

.next:hover:after { left: 22px; }

/*********************************************************/
/* END: Image Carousel Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Image Grid Stylings */
/*********************************************************/

.imageGridContainer {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
    gap: 30px;
}

.imageGridBlock {
	position: relative;
	background: rgba(23, 52, 79, 0.05); 
	border: none;
}

.imageGridBlock img { display: block; }

.imageGridBlock a, .imageGridBlock a:after, .imageGridBlock a:before { box-sizing: border-box; }

.imageGridBlock a:hover { cursor: pointer; }

.imageGridBlock a:hover::before {
    width: 100%;
    border: 2px solid var(--fontHighlight);
    height: 100%;
    content: "";
    z-index: 1;
    position: absolute;
}

#beauty .imageGridBlock img { width: 272px; }

body#mediaPage .imageGridBlock { width: calc(50% - 30px); } /* 30px due to "gap" value under .imageGridContainer */

body#mediaPage .imageGridBlock img { width: 100%; }

.mediaLogo { display: flex; }

.mediaLogo > div:first-of-type {
    white-space: nowrap; 
    margin-right: 30px; 
    padding-right: 30px;  
    border-right: 1px solid var(--border);
}

/*********************************************************/
/* END: Image Grid Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Slideshow Gallery Style */
/*********************************************************/

.slideShowTextCompare {
    background: rgba(4,10,19,0.80);
	font-size: 16px;
	font-weight: bold;
	color: #BABABA;
	position: absolute; 
	bottom: 10%; 
	left: 50%; 
	transform: translateX(-50%); 
	padding: 5px;
	min-width: 50px;
	text-align: center;
	text-transform: uppercase;
}

div[class^="slideshow-"] {
	/* display: inline-flex; */
	flex-basis: 100%;
	margin: 0px auto;
}

div[class^="slideshow-"] > div {
	/* display: inline-grid; */
	width: 100%;
	position: relative;
}

div[class^="slideshow-"] img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*********************************************************/
/* END: Slideshow Gallery Style */
/*********************************************************/

/*********************************************************/
/* BEGIN: Video Gallery Style */
/*********************************************************/

.videoContainer {
    position: relative;
    /*width: 100%;
    padding-bottom: 56.25%;*/
    width: 80%;
    padding-bottom: 45%;
    margin: 0 auto;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.videoGalleryContainer {
    display: flex;
    background-color: rgba(40,44,42,0.05);
    width: 100%;
    text-align: left;
    /*border: 1px solid var(--border);*/
}

.videoGallerySideBar {
    width: 3px; 
    margin-left: -4px; 
    border-left: 1px solid var(--border);
}

.videoGalleryPlayer {
    width: 69%;
    height: 1%;
    line-height: 0;
}

.videoGalleryPlayer .video {
    position: relative;
	padding-bottom: 50%; /* 16:9 */
	height: 0;
}

.videoGalleryPlayer .ui-tabs-panel { border: none; }

.videoGalleryPlayer iframe {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoGalleryList {
    height: 0px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 31%;
    margin: 0;
    z-index: 1;
}

.videoGalleryList ul {
    margin: 0px !important;
    padding: 0px;
    list-style-type: none;
    padding-inline-start: 0px;
}

.videoGalleryList li a {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    margin: 0;
    outline: none;
}

.videoGalleryList li {
    display: block;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.37);
}

.videoGalleryList li:last-of-type { border-bottom: none; }

.videoGalleryList li.ui-state-active a { padding: 15px 20px; }

.videoGalleryList li img {
    display: inline;
    vertical-align: middle;
    width: 43%;
}

.videoGalleryList li span {
    color: var(--fontDim);
    display: inline;
    width: 50%;
    margin-left: 4%;
    margin-right: 3%;
    font-size: 18px;
    line-height: 24px;
    word-break: break-word;
    vertical-align: middle;
}

.videoGalleryList li:hover span { color: var(--fontHighlight); }

.videoGalleryList li.ui-state-active {
    background: none;
    /*box-shadow: inset 0px 25px 30px -15px #FFFFFF;*/

    /*border-right: 2px solid var(--border) !important;*/
}

.videoGalleryList li.ui-state-active span { color: var(--fontBright) !important; }

.player { width: 100%; }

/*********************************************************/
/* END: Video Gallery Style */
/*********************************************************/

/*********************************************************/
/* BEGIN: About the Project Page Specific Stylings */
/*********************************************************/

.aboutCompare { padding-top: 25px !important; }

.aboutCompare > div { padding: 0px; }

.aboutCompare .carouselContainer > div { padding: 0px 50px 0px 50px; }

.aboutCompare .footer {
    color: var(--fontVeryDim);
	font-size: 14px; 
	line-height: 18px;
	text-align: center; 
	margin-bottom: 10px; 
	padding: 0px 50px;
}

.aboutCompare .footer a, .aboutCompare .footer a:visited { color: var(--fontDim); }

.aboutCompare .footer a:hover { color: var(--fontHighlight); }

.aboutCompare h2 { text-transform: none; }

.aboutCompare .sectionTitle { 
    padding: 50px 0px 30px 0px;
    margin: 0px; 
}

/*********************************************************/
/* END: About the Project Page Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Install Guide Page Specific Stylings */
/*********************************************************/

body#installationGuide #wheretostart > div > p, body#installationGuide #wheretostart .notice { margin-left: 33px; }

.controllerFootnotes {
    display: flex; 
    align-items: flex-end;
}

.controllerFootnotes > div:first-of-type {
    flex-grow: 2;
    white-space: nowrap;
    padding-right: 50px;
}

div.controllerDiagram { 
	padding-top: 20px; 
	text-align: center;
}

.footnotes {
    color: var(--fontVeryDim);
	text-align: right;
	font-size: 16px;
	line-height: 22px;
	font-style: italic;
}

.footnotes p { margin: 0px; }

.footnotes a, .footnotes a:visited { color: var(--fontDim); }

.footnotes a:hover { color: var(--fontHighlight); }

.footnotes em { font-style: normal; }

.footnotes sup { font-style: normal; }

img.controllerDiagram { 
	width: 100%;
	max-width: 900PX;
}

.tabLinksControllerOptions { 
    /*margin: 20px 0px 0px 0px;*/
    padding-top: 25px;
}

.tabLinksControllerOptions li.ui-tabs-active:hover img { filter: none; }

.tabLinksControllerOptions li:not(.ui-tabs-active) img { filter: brightness(1.8); }

.tabLinksControllerOptions li:not(.ui-tabs-active):hover img { filter: contrast(10) saturate(0); }

/*.tabLinksControllerOptions li:nth-of-type(2) { border-left: 1px solid var(--border); }*/

/*********************************************************/
/* END: Install Guide Page Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Config Page Specific Stylings */
/*********************************************************/

body#configDetails .fa-bug { 
    align-self: center;
	color: var(--fontVeryDim);
	font-size: 85%;
    padding-left: 0px !important;
	padding-right: 5px !important; 
	/*border-bottom: 2px dotted; */
}

body#configDetails .fa-bug:hover { 
	color: var(--fontHighlight); 
	cursor: help;
}

body#configDetails .tooltip { border: none; }

body#configDetails [id^="tooltip-affects-"] ul { 
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
}

body#configDetails [id^="tooltip-affects-"]::before { content: "This issue also affects the following versions:"; }

body#configDetails [id^="tooltip-affects-"]::after { 
	content: "Note: Silent Hill HD Collection issues are not cataloged."; 
	font-size: 12px; 
}

body#configDetails { display: block !important; }

body#configDetails #commonsettings { padding: 0px; }

body#configDetails .configSetting { 
	display: flex; 
	padding: auto; 
}

body#configDetails .iniValues:before { 
    content: "=";
    margin-right: 6px;
}

body#configDetails .iniValues { 
    font-family: 'Fira Mono', monospace;
    color: var(--fontVeryDim);
    font-size: 16px;
    vertical-align: middle;
    margin-left: 7px;
}

body#configDetails .launcher {
    display: flex;
    justify-content: center;
}

body#configDetails .launcher img { display: inherit; }

body#configDetails .settingsYoullAdjust { 
    padding: 50px 50px 0px 50px;
    margin: 0px;
}

body#configDetails .configDescriptionAndCredit { flex: 1; }

body#configDetails .configDescriptionAndCredit > p:last-of-type { margin-bottom: 0px; }

body#configDetails .steps:not(#commonsettings) div:nth-child(2).configDescriptionAndCredit { padding-left: 30px; }

body#configDetails .steps div:nth-of-type(2).configDescriptionAndCredit {
    border-left: 1px solid #324350;
    margin-left: 30px;
}

body#configDetails .sectionTitle { margin-bottom: 0px; }

body#configDetails h3 {
	margin: 0px; 
	display: inline-block;
}

body#configDetails div[class^="slideshow-"] img, body#configDetails video { 
    display: inherit;
	width: 100%;
	max-width: 450px; 
}

.configMadeBy { 
	font-size: 16px;
	border-top: 1px solid var(--border);
	margin-top: 20px;
	padding: 20px 20px 0px 20px;
}

.configMadeBy ul {
    color: var(--fontVeryDim);
	margin: 0px; 
	padding-inline-start: 0px;
}

.configMadeBy li { line-height: 24px; }

.configMedia { 
	display: table;
    position: sticky !important;
    top: 120px;
    width: 35%;
    height: 1%; 
}

.configFoundIn {
	font-size: 16px;
    margin: 0px;
	clear: left;
    color: var(--fontVeryDim);
}

/*********************************************************/
/* END: Config Page Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Troubleshoot Page Specific Stylings */
/*********************************************************/

#controllerSupportTable {
    width: 90%;
}

#controllerSupportTable th {
    padding: 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

#controllerSupportTable tr > td:first-of-type, #controllerSupportTable th > td:first-of-type {
    vertical-align: top;
    width: 50%;
    padding: 10px 25px 10px 0px;
}

#controllerSupportTable tr > td:last-of-type, #controllerSupportTable th > td:last-of-type {
    vertical-align: top;
    width: 50%;
    padding: 10px 0px 10px 25px;
}

.controllerSupportTableBody td {
    padding-top: 3px !important;
    padding-bottom: 25px !important;
}

/*********************************************************/
/* END: Troubleshoot Page Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Credits Page Specific Stylings */
/*********************************************************/

body#creditAndThanks div#mainCredits .steps, body#creditAndThanks div#additionalCredits .steps { padding: 35px 50px; }

body#creditAndThanks div#mainCredits .steps:first-of-type, body#creditAndThanks div#additionalCredits .steps:first-of-type { padding-top: 50px; }

body#creditAndThanks div#mainCredits .steps:last-of-type, body#creditAndThanks div#additionalCredits .steps:last-of-type { padding-bottom: 50px; }

.creditsProfileAvatar {
	height: 65px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 20px;
    margin-bottom: -25px;
}

.creditWork {
	font-size: 18px;
	border-bottom: 1px solid var(--border);
	margin-top: -16px;
	padding: 20px;
}

.creditWork ul { margin: 0px; }

.creditWork ul li { margin-left: 20px; }

.creditWork { color: var(--fontDim); }

.creditWork strong { color: var(--fontVeryDim); }

ul.specialThanksList {
	padding-inline-start: 0px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

ul.specialThanksList li { 
	margin-left: 20px;
	padding-right: 20px;
}

/*.creditsProfileLinks p:not(:last-of-type) {
	border-right: 1px solid #C0C0C0;
    padding-right: 15px;
}*/

/*********************************************************/
/* END: Credits Page Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: 404 Page Specific Stylings */
/*********************************************************/

body#error #columnMain { max-width: 1400px; margin: 0 auto; }

body#error #columnMain .tabLinks .tabs-style-topline nav li:first-of-type { border-left: 1px solid var(--border) !important; }

body#error #columnMain .tabLinks .tabs-style-topline nav li:last-of-type { border-right: 1px solid var(--border) !important; }

@media only screen and (max-width: 1399px) {
    
    body#error #columnMain .tabLinks .tabs-style-topline nav li:first-of-type { border-left: 1px solid transparent !important; }

    body#error #columnMain .tabLinks .tabs-style-topline nav li:last-of-type { border-right: 1px solid transparent !important; }
}

/*********************************************************/
/* END: 404 Page Specific Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Social Pop-up Stylings */
/*********************************************************/

.popupBodyDisableScroll { 
	position: fixed; 
	overflow-y: scroll;
	width: 100%;
}

.socialFixedButton a span:before {
    content: '';
    padding-left: 15px;
}

.socialFixedButton a span:after {
    content: '';
    padding-right: 3px;
}

.socialFixedButton .tabs-style-topline nav a { 
    background: #121e2a;
    /*padding: 15px; */
    padding: 17px 11px;
    border-radius: 50px;
}

.socialFixedButton .tabs-style-topline nav a:hover { 
    background: #2f4356; 
    color: var(--fontBright);
}

.socialFixedButton .tabs-style-topline nav li { border-top: none; }

.troubleshootPopup, .githubPopup { display: none; }

#linksPopup {
	display: none; 
	position: fixed; 
	overflow: auto;
	z-index: 99999; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	background-color: rgba(3, 8, 16, 0.8);
    backdrop-filter: blur(3px);
}

#linksPopup .sectionTitle, #linksPopup h2 { margin: 0px; }

#linksPopup h2 {
    font-family: 'temacantantebolditalic';
    text-transform: none;
    font-size: 38px;
}

.open-btn {
	display: flex;
	justify-content: left;
}

.open-button {
    visibility: hidden;
	z-index: 98;
	cursor: pointer;
	position: fixed;
	right: 15px;
	top: 15px;
}

.form-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.form-popup-close-icon { 
    padding: 0px 10px 10px 0px;
    color: #e3e7e9;
}

.form-popup-close-icon a, .form-popup-close-icon a:visited { 
	color: var(--fontDim);
	float: right;
}

.form-popup-close-icon a:hover { color: var(--fontHighlight); }

.form-popup-close-icon span {
    font-weight: bold;
	color: #e3e7e9; 
	font-size: 25px; 
	text-transform: uppercase;
    letter-spacing: 1px;
}

/*-------------*/

.socialBoxes a, .socialBoxes a:visited { display: contents; }
    
.socialBoxes a, .socialBoxes a:visited, .socialBoxes h2 { color: var(--fontDim) !important; }

.socialBoxes { text-align: center; }

.socialBoxes .fa { 
	font-size: 75px; 
	margin-bottom: 15px; 
}

.socialBoxes p { font-size: 18px; }

.socialBoxes div {
	display: grid;
	width: 200px;
	padding: 40px;
}

.socialBoxes > :hover * { color: var(--fontHighlight); }

.socialFixedButton a i.fa { 
	display: inline-block !important; 
	padding: 0px 12px; 
}

.socialFixedButton a div {
	display: inline-block;
	overflow: hidden; 
	width: 0px;
	text-align: center;
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}

/*********************************************************/
/* END: Social Pop-up Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Top of Page Style */
/*********************************************************/

#return-to-top {
	z-index: 98;
    position: fixed;
    bottom: 14px;
    right: 14px;
    background: #121e2a;
    width: 25px;
    height: 25px;
    text-decoration: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top i {
    color: #dde1e2;
    margin: 0;
    position: relative;
    left: 3px;
    top: -5px;
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top:hover {
    background: #731313;
}

#return-to-top:hover i {
    color: #dde1e2;
    top: -9px;
}

/*********************************************************/
/* END: Top of Page Style */
/*********************************************************/

/*********************************************************/
/* BEGIN: General Tabs Stylings */
/*********************************************************/

.tabs {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
}

.tabs nav ul {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.tabs nav ul li {
	margin: 0;
	text-align: center;
	flex: 1;
}

.tabs nav a {
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tabs nav a span {
	vertical-align: top;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ui-tabs-active, nav .ui-tabs-active span, nav .ui-tabs-active a {
	color: var(--fontBright);
    cursor: default;
}

.tabs nav a:focus {
	outline: none;
}

/*********************************************************/
/* END: General Tabs Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Font Awesome Icon Stylings */
/*********************************************************/
.icon::before {
	z-index: 10;
	display: inline-block;
	margin: 0 0.4em 0 0;
	vertical-align: middle;
	text-transform: none;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-upload::before {
	content: "\e68a";
}
.icon-tools::before {
	content: "\e60a";
}
.icon-plane::before {
	content: "\e625";
}
.icon-joy::before {
	content: "\e6a4";
}
.icon-plug::before {
	content: "\e69a";
}
.icon-home::before {
	content: "\e648";
}
.icon-gift::before {
	content: "\e652";
}
.icon-display::before {
	content: "\e65e";
}
.icon-date::before {
	content: "\e660";
}
.icon-config::before {
	content: "\e666";
}
.icon-coffee::before {
	content: "\e669";
}
.icon-camera::before {
	content: "\e66f";
}
.icon-box::before {
	content: "\e674";
}

/* Content */
.content-wrap {
	position: relative;
}

.content-wrap section {
	display: none;
}

.content-wrap section.content-current {
	display: block;
}

/* Fallback */
.no-js .content-wrap section {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid #C0C0C0
}

.no-flexbox nav ul {
	display: block;
}

.no-flexbox nav ul li {
	min-width: 15%;
	display: inline-block;
}

@media screen and (max-width: 58em) {
	.tabs nav a:before {
		margin-right: 0;
	}
}

/*********************************************************/
/* END: Font Awesome Icon Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Tabs Top Line */
/*********************************************************/

.tabLinks i.fa {
    white-space: nowrap;
    display: block;
    font-size: 30px;
    line-height: 40px;
}

#columnSide .tabLinks span { font-size: 14px; }

#columnSide .tabLinks i.fa {
    font-size: 20px;
    line-height: initial;
}

.tabs-style-topline nav li.tab-filled:first-of-type { border-left: 1px solid var(--border); }

#columnSide .tabs-style-topline nav li:last-of-type { border-right: none; }

#columnSide .tabLinks nav li:last-of-type { margin-right: 4px; }
	
.tabs-style-topline nav li.tab-empty { 
	width: 1%;
	border-top: none !important; 
	border-left: none !important; 
	border-right: none !important;
	border-bottom: 1px solid var(--border) !important;
}

.tabs-style-topline nav li.tab-filled { 
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: linear-gradient(0deg, rgba(0,0,0,0.37) 0%, rgba(0,0,0,0) 100%);
}

#mainColumnTopLinks nav li.tab-filled { 
    height: 90px;
    border-bottom: 5px solid var(--borderBright);
}

.tabs-style-topline nav a {
    color: var(--fontVeryDim);
    padding: 15px 0px;
	/*-webkit-transition: color 0.2s;
	transition: color 0.2s;*/
}

.tabs-style-topline nav a:hover { 
    color: var(--fontHighlight);
}

.tabs-style-topline nav li.ui-tabs-active, #mainColumnTopLinks nav li.ui-tabs-active {
    background: none;
    border-bottom: none;
}

#columnMain .tabLinks .tabs-style-topline nav li:first-of-type { border-left: none; }

.tabs-style-topline nav li.ui-tabs-active :hover { cursor: default !important; }


.tabs-style-topline nav li.ui-tabs-active a {
	/*background: none;
	box-shadow: inset 0px 25px 30px -15px #FFFFFF;*/
	color: var(--fontBright);
}

#columnMain .tabLinks nav span { 
    display: block;
    padding-top: 5px;
    line-height: initial;
}

.tabs-style-topline .icon::before {
	display: block;
	margin: 0;
}

/*********************************************************/
/* END: Tabs Top Line */
/*********************************************************/

/*********************************************************/
/* BEGIN: Tabs More Links */
/*********************************************************/

.moreLinks {
    max-height: 0px;
	-webkit-transition: max-height 0.5s;
	-moz-transition: max-height 0.5s;
	-ms-transition: max-height 0.5s;
	-o-transition: max-height 0.5s;
	transition: max-height 0.5s;
    position: absolute; 
    top: -5px;
    right: 0px; 
    overflow: hidden;
    z-index: 9;
    border-bottom: 5px solid var(--borderBright);
    border-top: none; 
    background: #101c28 url(../images/fog.jpg) no-repeat center; 
    background-attachment: fixed; 
    background-size: cover;
}

.moreLinks span {
    font-family: 'Questrial', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.moreLinks a {
    color: var(--fontVeryDim);
    margin: 15px 0px;
    display: block;
    text-align: center;
}

.moreLinks a:hover { color: var(--fontHighlight); }

.moreLinks nav ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.moreLinks a i.fa {
	white-space: nowrap;
    display: inline-block;
    /*font-size: 30px;*/
    font-size: 25px;
    line-height: inherit;
    padding-right: 15px;
}

.moreLinksMainColumn { 
    background: rgba(0, 0, 0, 0.37);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.moreLinksInnerContent { 
    padding: 0px 50px;
    margin: 0px 15px;
    /*min-height: 274px;
    max-height: 800px;*/
    overflow-y: auto;
}

.moreLinksBorderLine {
    height: 1px;
    border-top: 1px solid var(--border);
    margin: 0 auto;
}

.moreLinksSocialRow {
    color: var(--fontVeryDim);
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.moreLinksSocialRow a { padding: 0px; }

.exploreMore, .exploreMore a { cursor: default; }

.exploreMoreSideColumn { border-bottom: none !important; }

/*********************************************************/
/* END: Tabs More Links */
/*********************************************************/

/*********************************************************/
/* BEGIN: JQuery Accordion Stylings */
/*********************************************************/

.accordionContainer { 
	margin: 0px;
    padding: 0px 25px;
}

.ui-accordion-header {
	color: var(--fontVeryDim);
	cursor: pointer;
	width: 100%;
	text-align: left;
	outline: none;
	border: 0px;
}

.ui-accordion-header { 	
	font-size: 20px;
	padding: 20px 0px;
    border-bottom: 1px solid var(--border);
}

.ui-accordion-header:not(.ui-accordion-header-active):hover { border-bottom: 1px solid var(--fontHighlight); }

.ui-accordion-header-active:hover { border-bottom: 1px solid var(--fontHighlight) !important; }

.ui-accordion-header-active { border-bottom: 1px solid var(--fontBright); }

.ui-accordion-header:after {
	font-family: FontAwesome;
	content: '\f067'; 
	font-size: 20px;
	color: var(--fontVeryDim);
	float: right;
	margin-left: 5px;
	line-height: 24px;
}

.ui-accordion-header-active:after {	content: "\f068"; }

.ui-accordion-header:hover { color: var(--fontHighlight); }

/*Must be placed below .accordion:hover */
.ui-accordion-header {
	background: none !important;
}

.ui-accordion-header-active { color: var(--fontBright); }

.ui-accordion-header-active:hover { color: var(--fontHighlight); }

.ui-accordion-content {
	padding: 30px;
	border-bottom: 1px solid var(--border);
}

.accordionContainer > div.accordionPanel:last-of-type, .accordionContainer > div:last-of-type .accordionPanel { border-bottom: none; }

.accordionPanel *:first-child { margin-top: 0px; }

.accordionPanel *:last-child { margin-bottom: 0px; }

.steps .accordionContainer > .ui-accordion-content:last-child, .steps .accordionContainer > div:last-child .ui-accordion-content { padding-bottom: 0px; }

/*********************************************************/
/* END: JQuery Accordion Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: JQuery Tabs Stylings */
/*********************************************************/

.ui-tabs-panel {
    display: block;
    padding: 50px 0px 0px 0px;
}

.toggleTabsInner .ui-tabs-panel { padding: 50px 0px 25px 0px; }

.ui-tabs-panel > *:first-child { margin-top: 0px; }

.ui-tabs-panel > *:last-child { margin-bottom: 0px; }

/*********************************************************/
/* END: JQuery Tabs Stylings */
/*********************************************************/

/*********************************************************/
/* BEGIN: Responsive Screen Sizing */
/*********************************************************/

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

	.flex-item { min-width: calc(100% / 2 - 75px) !important; }

}

@media only screen and (max-width: 1700px) {
    
    .moreLinks { right: 0px; }
    
    .moreLinksMainColumn { border-right: 1px solid transparent; }
    
    #columnMain .tabLinks nav li:last-of-type { border-right: 1px solid transparent !important; }
    
}

@media only screen and (max-width: 1500px) {
    
	.flex-item { min-width: calc(100% / 2 - 75px) !important; }
	
	.videoGalleryList li img { display: none; }
	
	.videoGalleryList li span { width: 100%; }

}

@media only screen and (max-width: 1420px) {
    
    .open-button { visibility: visible; }
    
    #columnMain {
        /* Styles below must be marked as "important" in order for side bar to correctly re-appear on page width change */
        border-left: none;
        margin-left: 0px;
    }

	#columnSide { display: none !important; }
    
    .callToActionBanner, #enjoySH2EEVideoBannerInner {
        background: rgba(0,0,0,0.37);
        -webkit-mask-image: none;
        mask-image: none;
    }
	
	.flex-item { min-width: calc(100% / 2 - 75px) !important; }
	
	.videoGalleryList li img { display: inline-block; }
	
	.videoGalleryList li span { width: 50%; }
	
	body #logo img { 
		width: 80%;
		min-width: 750px; 
	}
	
}

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

	.flex-item { min-width: calc(100% - 75px) !important; }
	
	.videoGalleryList li img { display: none; }
	
	.videoGalleryList li span { width: 100%; }

}

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

	#columnSide { display: none !important; }
	
	.flex-item { min-width: calc(100% - 75px) !important; }
	
}

@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */

	video { display: none !important; }

}

/*********************************************************/
/* END: Responsive Screen Sizing */
/*********************************************************/