body
{
    z-index:0;
    color:#000000;
    font-family: Helvetica, Lucida Grande, 'Lucida Sans Unicode', Times, Arial, Verdana, Sans-serif;
    font-size: 100%; /* 12px/16=0.75em */
    background-color:#FFFFFF; /* #DEDEDE */
    margin:0px;
    padding:0px;
    min-width:260px;
}
iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}
.sitecontent
{
    width:100%;
    background-color: #FFFFFF;
}

.topbar
{
    width:100%;
    height: 50px;
    display: flex;
    align-items: center;
}
a.logo
{
    z-index:4;
    position: absolute;
    left: 50%; transform: translate(-50%, 0);
}
img.logo
{
    margin:2px;
    height:46px;
}

.navitem
{
    position:relative;
    float: right;
    margin:15px;
    font-size:1.2em;
    color:#FFFFFF;
    text-decoration:none;
    z-index:4;
}

/******************* Home page style *******************/

.largetopbar
{
    display: flex;
    align-items: top;
   /* Height, must be set because of flex box issue, see below */
   height: 170px;
}

.homelogo
{
/* Silly position absolute hack to be able to get this logo
  centered while having navitems on the right. This is not
  possible with flex layout current, without having this hack.
  As the position is now absolute, the div essentially 'disappears'
  from the document and the size of the topbar must be set as well
*/
    position: absolute;
    left: 50%; transform: translate(-50%, 0);
    width:150px;
    padding-top:10px;
    padding-bottom: 10px;
}
@media (max-width:767px)
{
    .largetopbar
    {
        height:175px;
    }
    .homelogo
    {
        padding-top: 40px;
        width:125px;
    }
}

.navitemcontainer
{
    margin-left: auto;
}

.menuappicon-grid
{
    position:relative;
    max-width:960px;
    width: 100%;
    padding-top:40px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
}
@media (max-width:960px)
{
    .menuappicon-grid
    {
        max-width:480px;
        padding-top:50px;
    }
}

@media (max-width:500px)
{
    .menuappicon-grid
    {
        max-width:240px;
        padding-top:30px;
    }
}

.horizontal-line
{
    width: 100%;
    height: 1px;
    background-color: gray;
}

.menuappicon
{
    display: inline-block;
    padding:18px;
    height:200px;
    width:200px;
    text-align:center;
    /* Enable this shadow when white text is active */
    /* text-shadow: 0px 0px 10px #000000; */
}

img.menuicon
{
    height:200px;
    width:200px;
}
a.apptitle
{
    color:#515151;
    font-family: Helvetica, Lucida Grande;
    font-size:1.0em; /* 16px/16=1em */
    text-decoration:none;
    line-height: 200%;
}

.mainfeature
{
    position:relative;
    width:100%;
    height:400px;
    background-color:#000000;
    overflow: hidden;
    margin-top: 1pt;
    margin-bottom: 1pt;
}

/******************* App page style *******************/
.appfeature
{
    position:relative;
    width:100%;
    height:400px;
    background-color:#000000;
    overflow: hidden;
}
img.appfeatureimg
{
    position:absolute;
    height:400px;
    width:2133.33px;
    margin-left:-1066.66px;
    left:50%;
    z-index:1;
}
img.titleimg
{
	position:absolute;
	width:450px;
	margin-left:-225px;
	left:50%;
	z-index:2;
}
.appfeatureinfo
{
    position:absolute;
    bottom:0px;
    height:100px;
    width:100%;
    z-index:4;
}
.appfeatureinfocontainer
{
    position:relative;
    width: 675px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
}
.appfeaturetext
{
    position:relative;
    float:left;
    color:#FFFFFF;
    font-size:2em;
    width:450px;
    /* margin:10px; */
    /* text-shadow: 0px 0px 5px #000000; */
}
.appfeaturedownload
{
    position:relative;
    float:right;
    width:200px;
    margin:10px;
}
.main
{
    position:relative;
    padding-bottom:30px;
    width: 675px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
    font-size:0.9em; /* 12px/16=0.75em */
    text-decoration:none;
    z-index:1;
}
.appinfo
{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:675px;
    height:100%;
}
/* The download badge below the app info */
.appdownload
{
    position:relative;
    width:200px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.appdownload a
{
  flex: 1;
  margin: 0 10px;
}

.appfooter
{
    position:relative;
    width:100%;
    height:600px;
    background-color:#000000;
    overflow: hidden;
}
img.appfooter
{
    position:absolute;
    height:600px;
    width:2133.33px;
    margin-left:-1066.66px;
    left:50%;
    z-index:1;
}


/* Portrait screenshot rules */
.multi-portrait-screenshot
{
    display: flex;
    justify-content: space-between;
    width: 675px;
    margin-top:20px;
}
img.multi-portrait-appscreenshot
{
    position:relative;
    width:210px;
    border:none;
}
img.single-portrait-appscreenshot
{
    max-width: 320px;
}
.single-portrait-appscreenshot
{
    position:relative;
    max-width: 320px;
    margin-top: 15px;
    margin-left:auto;
    margin-right:auto;
}
.single-portrait-screenshot
{
    display:none;
    width:100%;
}

/* Landscape screenshot rules */
.multi-landscape-screenshot
{
    display: flex;
    justify-content: space-between;
    width: 675px;
    margin-top:20px;
    flex-wrap: wrap;
}
img.multi-landscape-appscreenshot
{
    position:relative;
    width:330px;
    margin-top: 10px;
    margin-bottom: 10px;
}
img.single-landscape-appscreenshot
{
    max-width: 100%;
}
.single-landscape-appscreenshot
{
    position:relative;
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:auto;
    margin-right:auto;
}
.single-landscape-screenshot
{
    display:inherit;
    width:100%;
}

.copyright
{
	padding-top: 20px;
	position: relative;
	width:100%;
	text-align:center;
	font-size:0.75em;
}

.copyright-spacing
{
	height: 100px;
}

@media (max-width:767px)
{
    .topbar
    {
	height:40px;
    }
    img.logo
    {
	height:36px;
    }
    .navitem
    {
       font-size:1em;
       margin:10px;
    }
    .mainfeature
    {
        height:200px;
    }

    .appfeature
    {
        height:200px;
    }
    img.titleimg
    {
        width:225px;
        margin-left:-112.5px;
    }
    img.appfeatureimg
    {
    	height:200px;
        width:1066.66px;
    	margin-left:-533.33px;
    }
    .appfeatureinfocontainer
    {
        width:320px;
    }
    .appfeaturetext
    {
	display:none;
    }
    .appfeaturedownload
    {
	float:none;
	margin-left:auto;
	margin-right:auto;
    }
    .appfooter
    {
        height:300px;
    }
    img.appfooter
    {
	height:300px;
	width:1066.66px;
	margin-left:-533.33px;
    }
    .multi-portrait-screenshot
    {
        display:none;
    }
    .single-portrait-screenshot
    {
        display:inherit;
    }
    .multi-landscape-screenshot
    {
        display:none;
    }
    .single-landscape-screenshot
    {
        display:inherit;
    }
    .main
    {
        font-size:1em;
        width:100%;
        min-width:320px;
    }
    .appinfo
    {
        width: 90%;
        margin-left:auto;
        margin-right:auto;
    }
}


h1
{
    font-family: Helvetica, Lucida Grande, 'Lucida Sans Unicode', Times, Arial, Verdana, Sans-serif;
    font-size: 2em;
    font-weight: 500;
    margin-top:30px;
    margin-bottom: 15px;
}

h2
{
    font-family: Helvetica, Lucida Grande, 'Lucida Sans Unicode', Times, Arial, Verdana, Sans-serif;
    font-size: 1.6em;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 12px;
}

h3
{
    font-family: Helvetica, Lucida Grande, 'Lucida Sans Unicode', Times, Arial, Verdana, Sans-serif;
    font-size: 1.15em;
    font-weight: normal;
    margin-top: 16px;
    margin-bottom: 8px;
}

h4
{
    font-family: Helvetica, Lucida Grande, 'Lucida Sans Unicode', Times, Arial, Verdana, Sans-serif;
    font-size: 1em;
    font-weight: normal;
    margin-top: 12px;
    margin-bottom: 6px;
}


p
{
  /* Overrides Webkit defaults */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0;
}


a.text
{
    text-decoration:none;
    font-weight: 600;
}
a.grey
{
    text-decoration:none;
    color:#666666;
}
a.grey:hover
{
    color:#b8131b;
}
img
{
    border:none;
}

img.shadow
{
    border:none;
    -moz-box-shadow: 5px 5px 10px #888888; /* Firefox */
    box-shadow: 5px 5px 10px #888888;
}

.platform_capsule {
    position: absolute;
    top: 7px;
    right: 20px;
    z-index: 6;
    height: 60px;
    background-size: cover;
}

/* Adjusted capsule positioning for windows exceeding this width */
@media (min-width: 1100px) {
    .platform_capsule {
        right: 200px; /* More inward for larger screens */
    }
}
@media (min-width: 1500px) {
    .platform_capsule {
        right: 400px; /* More inward for larger screens */
    }
}

.platform_capsule.platform_capsule_1icon {
    width: 50.0px;
    background: url('/images/platform_capsule_1icon.svg') no-repeat center center;
}

.platform_capsule.platform_capsule_2icons {
    width: 89.7px; /* Adjusted width for 2 icons */
    background: url('/images/platform_capsule_2icons.svg') no-repeat center center;
}

.platform_capsule.platform_capsule_3icons {
    width: 129.4px; /* Adjusted width for 3 icons */
    background: url('/images/platform_capsule_3icons.svg') no-repeat center center;
}

.platform_capsule a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.platform_capsule.platform_capsule_1icon a {
    left: 50%;
    transform: translate(-50%, -50%);
}

.platform_capsule.platform_capsule_2icons a:nth-child(1) {
    left: 28%; /* Adjust based on the capsule size */
    transform: translateX(-50%) translateY(-50%);
}

.platform_capsule.platform_capsule_2icons a:nth-child(2) {
    right: 28%;
    transform: translateX(50%) translateY(-50%);
}

.platform_capsule.platform_capsule_3icons a:nth-child(1) {
    left: 17px; /* Position towards the left */
    transform: translateY(-50%);
}

.platform_capsule.platform_capsule_3icons a:nth-child(2) {
    left: 50%; /* Center */
    transform: translate(-50%, -50%);
}

.platform_capsule.platform_capsule_3icons a:nth-child(3) {
    right: 17px; /* Position towards the right */
    transform: translateY(-50%);
}

.platform_icon {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

.platform_steam {
    background-image: url('/images/platform_steam.svg');
    width: 22.8px; /* Width of the icon */
    height: 22.8px; /* Height of the icon */
}

.platform_windows {
    background-image: url('/images/platform_windows.svg');
    width: 21.76px; /* Width of the icon */
    height: 23.8px; /* Height of the icon */
}

.platform_ios {
    background-image: url('/images/platform_ios.svg');
    width: 19.72px; /* Width of the icon */
    height: 23.8px; /* Height of the icon */
}

.platform_android {
    background-image: url('/images/platform_android.svg');
    width: 19.8px; /* Width of the icon */
    height: 22.3px; /* Height of the icon */
}