@charset "UTF-8";

/*

Theme Name: Tiny Turquoise

Author: Tiny Turquoise

*/



@font-face {

    font-family: 'bebas_kairegular';

    src: url('../fonts/bebaskai-webfont.woff2') format('woff2'),

         url('../fonts/bebaskai-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'poppinsregular';

    src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),

         url('../fonts/poppins-regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'poppinsthin';

    src: url('../fonts/poppins-thin-webfont.woff2') format('woff2'),

         url('../fonts/poppins-thin-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



*, *:before, *:after {

    box-sizing: border-box;

}



html, body {

    background-color: #1f1a1f;

    margin: 0;

    padding: 0;

    font-family: 'poppinsregular', Arial, Helvetica, sans-serif;

    font-size: 12pt;

    color: #ece7e1;

}



body {

    /*width: 960px;*/

    /*margin: 0 auto;*/

}



.header-bar {

    position: relative;

    width: 100%;

    height: 50px;

    line-height: 50px;

    background-color: #1779ba;

    /*padding: 0 15px;*/

}

.header-bar a {

    text-decoration: none;

    color: #ece7e1;

    font-family: 'poppinsregular', Arial, Helvetica, sans-serif;

    font-variant: small-caps;

    font-size: 25px;

}

.header-bar a:hover {

    color: #b3f1ec;

}



.header-logo {

    display: inline-block;

    float: left;

    height: 100%;

    line-height: 50px;

    text-decoration: none;

    color: #111;

    font-family: 'poppinsregular', Arial, Helvetica, sans-serif;

    font-variant: small-caps;

    font-size: 25px;

}

.header-logo img {

    height: 100%;

    display: inline-block;

    vertical-align: middle;

}



.header-hamburger-button {

    float: right;

    line-height: 50px;

    height: 50px;

    width: 50px;

    text-align: center;

    color: #111;

}

.header-hamburger-button:hover {

    color: #111 !important;

}





.header-content {

    max-width: 900px;

    margin: 0 auto;

    height: 100%;

}



.header-menu {

    margin: 0;

    padding: 0;

    list-style: none;

    height: 100%;

    width: 100%;

}

.header-menu li {

    float: right;

    height: 100%;

}

.header-menu li a {

    display: block;

    padding: 0 20px;

    height: 100%;

    line-height: 50px;

}

.header-menu li a:first-child {

    padding-left: 0;

}



@media print, screen and (max-width: 40em) {

    .header-menu-items {

        background-color: #1779ba;

        position: fixed;

        width: 100%;

        left: 0;

        top: 50px;

        height: 100%;

        z-index: 100;

    }

    .header-menu-items li {

        width: 100%;

        height: 50px;

        float: none;

        text-align: center;

        border-bottom: 1px solid #111;

    }

    .header-menu-items li:first-child {

        border-top: 1px solid #111;

    }

    .header-menu-items li a {

        height: 50px;

        width: 100%;

        padding: 0;

    }

}







/* Style the navigation menu */

.topnav {

    overflow: hidden;

    background-color: #1f8a82;

    position: relative;

    /*height: 50px;*/

    /*line-height: 50px;*/

}



/* Hide the links inside the navigation menu (except for logo/home) */

.topnav #myLinks {

  display: none;

}

.topnav #myLinks a {

  text-align: center;

}



/* Style navigation menu links */

.topnav a {

  color: white;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

  display: block;

}



/* Style the hamburger menu */

.topnav a.icon {

  background: black;

  display: block;

  position: absolute;

  right: 0;

  top: 0;

}



/* Add a grey background color on mouse-over */

.topnav a:hover {

  /*background-color: #ddd;*/

  /*color: black;*/

}



/* Style the active link (or home/logo) */

/*.active {*/

/*  background-color: #04AA6D;*/

/*  color: white;*/

/*}*/











.content {

    width: 100%;

    max-width: 900px;

    margin: 20px auto 0 auto;

    padding-bottom: 50px;

}



.unity-content {

    width: 100%;

    /*height: calc(100vh - 50px);*/
	height: 100%;

    overflow: hidden;

}



.bottom-aligned-button-container .button {

    width: 100%;

}

@media print, screen and (min-width: 64em) {

    .bottom-aligned-button-container {

        position: absolute;

        right: 0;

        bottom: 0;

    }

    .bottom-aligned-button-container .button {

        margin-bottom: 0;

        width: auto;

    }

}



.bottom-aligned-button-container-full .button {

    width: 100%;

}

.bottom-aligned-button-container-full .button:last-child {

    margin-bottom: 0;

}

@media print, screen and (min-width: 64em) {

    .bottom-aligned-button-container-full {

        position: absolute;

        right: 0;

        bottom: 0;

        width: 100%;

    }

    .bottom-aligned-button-container-full .button {

        width: 100%;

    }

}



.button-container-full .button {

    width: 100%;

}

.button-container-full .button:last-child {

    margin-bottom: 0;

}

@media print, screen and (min-width: 64em) {

    .button-container-full {

        /*position: absolute;*/

        /*right: 0;*/

        /*bottom: 0;*/

        width: 100%;

    }

    .button-container-full .button {

        width: 100%;

    }

}



.feature-image img {

    width: 100%;

}



.game-screenshots {

    display: grid;

    grid-template-columns: auto auto;

    column-gap: 20px;

    row-gap: 20px;

    padding: 0 10px;

}

.game-screenshots img {

    width:100%;

}

@media print, screen and (min-width: 64em) {

    .game-screenshots {

        grid-template-columns: auto auto auto;

    }

}



#contact-form {



}

#contact-form input {

    width: 100%;

}





.feature-game {

    position: relative;

    width: 100%;

    padding: 0 15px;

}

.feature-game img {

    width: 100%;

    height: auto;

}

.feature-game-header {

    position: absolute;

    left: 40px;

    bottom: 10px;

    color: #fff;

    font-family: 'bebas_kairegular', Arial, Helvetica, sans-serif;

    font-size: 50px;

    cursor: pointer;

}

.feature-game-tagline {

    position: absolute;

    left: 15px;

    top: 60px;

    color: #fff;

    display: none;

}





#unity-loading-graph {

    background-color: rgba(1, 0, 0, 0.2);

    /*background-color: red;*/

    backdrop-filter: blur(5px);

    z-index: 100;



    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    top: 50px;

}

#unity-loading-graph img {

    width: 15%;



    margin: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}



/*.button {*/

/*    display: inline-block;*/

/*    text-decoration: none;*/

/*    background-color: #1f8a82;*/

/*    color: #111;*/

/*    padding: 8px 12px;*/

/*    cursor: pointer;*/

/*    font-size: 20px;*/

/*}*/

/*.button:hover {*/

/*    color: #b3f1ec;*/

/*}*/





/*.feature {*/



/*}*/

/*.feature > div:first-child {*/

/*    float: left;*/

/*    width: 50%;*/

/*}*/

/*.feature > div:last-child {*/

/*    float: left;*/

/*    width: 50%;*/

/*}*/

/*.feature-left .feature-header {*/

/*    font-family: 'bebas_kairegular', Arial, Helvetica, sans-serif;*/

/*    font-size: 50px;*/

/*}*/

/*.feature-left .tagline {*/

/*    font-family: 'poppinsthin', Arial, Helvetica, sans-serif;*/

/*    font-size: 25px;*/

/*}*/



/*.prevent-select {*/

/*  -webkit-user-select: none; !* Safari *!*/

/*  -ms-user-select: none; !* IE 10 and IE 11 *!*/

/*  user-select: none; !* Standard syntax *!*/

/*}*/





/*.games-list-game {*/

/*    position: relative;*/

/*}*/

/*.games-list-game .preview-image {*/

/*    float: left;*/

/*    width: 450px;*/

/*    height: 300px;*/

/*}*/

/*.games-list-game .title {*/

/*    position: relative;*/

/*    float: right;*/

/*    width: 50%;*/

/*    padding-left: 20px;*/

/*    height: 300px;*/

/*}*/

/*.games-list-game .title .main {*/

/*    font-size: 50px;*/

/*}*/

/*.games-list-game .title .secondary {*/

/*    font-size: 18px;*/

/*    margin-top: 20px;*/

/*    line-height: 1.3;*/

/*}*/

/*.games-list-game .buttons {*/

/*    position: absolute;*/

/*    right: 0;*/

/*    bottom: 0;*/

/*}*/

/*.games-list-game .buttons a {*/

/*    float: right;*/

/*    margin-left: 20px;*/

/*}*/





/*.game-detail {*/

/*    position: relative;*/

/*}*/

/*.game-detail .preview-image {*/

/*    float: left;*/

/*    width: 450px;*/

/*    height: 300px;*/

/*}*/

/*.game-detail .title {*/

/*    position: relative;*/

/*    float: right;*/

/*    width: 50%;*/

/*    padding-left: 20px;*/

/*    height: 300px;*/

/*}*/

/*.game-detail .title .main {*/

/*    font-size: 50px;*/

/*}*/

/*.game-detail .title .secondary {*/

/*    font-size: 14px;*/

/*    !*margin-top: 20px;*!*/

/*    line-height: 1.3;*/

/*}*/

/*.game-detail .buttons {*/

/*    position: absolute;*/

/*    right: 0;*/

/*    bottom: 0;*/

/*    width:100%;*/

/*    padding-left: 20px;*/

/*}*/

/*.game-detail .buttons a {*/

/*    width:100%;*/

/*    text-align: center;*/

/*}*/





/*.demos-list-game {*/

/*    position: relative;*/

/*}*/

/*.demos-list-game .preview-image {*/

/*    float: left;*/

/*    width: 450px;*/

/*    height: 300px;*/

/*}*/

/*.demos-list-game .title {*/

/*    position: relative;*/

/*    float: right;*/

/*    width: 50%;*/

/*    padding-left: 20px;*/

/*    height: 300px;*/

/*}*/

/*.demos-list-game .title .main {*/

/*    font-size: 50px;*/

/*}*/

/*.demos-list-game .title .secondary {*/

/*    font-size: 18px;*/

/*    margin-top: 20px;*/

/*    line-height: 1.3;*/

/*}*/

/*.demos-list-game .buttons {*/

/*    position: absolute;*/

/*    right: 0;*/

/*    bottom: 0;*/

/*    width:100%;*/

/*    padding-left: 20px;*/

/*}*/

/*.demos-list-game .buttons a {*/

/*    width:100%;*/

/*    text-align: center;*/

/*}*/