/*-------------------------
    Simple reset
--------------------------*/


*{
    margin:0;
    padding:0;
}

/*---- COLORS ------*/
:root {
    --baldur-color: #961811;
    --balduree-color: #815E6D;
    --baldur2-color: #C5DCA8;
    --baldur2ee-color: #DCCDA8;
    --iwdee-color: #E6873C;
    --pillars-color: #BD5457;
    --deadfire-color: #80FDF7;
    --pathfinder-color: #2E4533;
    --pathfinder_wotr-color: #105EB0;
    --nwn-color: #525598;
    --nwn2-color: #C6A43B;
    --tyranny-color: #E84B20;
    --blackgeyser-color: #95C04A;
    --wasteland2-color: #FFF8DD;
    --wasteland3-color: #481E2A;
    --iwd2-color: #8BC9F6;
    --srr-color: #2e7d75;
    --arcanum-color: #635145;
    --W40K-color: #5996A9;
}

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


/*-------------------------
    General Styles
--------------------------*/


a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside{
    display: block;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

header nav {
	text-align: right;
}

header nav li {
	display: inline-block;
}

header nav li a,
header nav li a:visited {
    padding: 5px 15px;
    color: #1B1B1B;
    font-size: 1.4em;
	display: block;
	text-decoration: none;
	font-family: 'PT Sans Narrow',sans-serif;
}

header nav li a:hover,
header nav li a.active {
	color: #0d0d0d;
}

nav .logo {
    display: inline-block;
    text-decoration: none;
    margin-left: 25px;
    line-height: 45px;
    float: left;
}
nav .logo img {
    width: 60px;
}

h1 {
    text-align: left;
    font-family:'PT Sans Narrow',sans-serif;
    margin: 10px 0 50px;
    font-weight: 700;
}
h2 {
    font-family:'PT Sans Narrow',sans-serif;
}
a.logo {
    font-family: 'PT Sans Narrow',sans-serif;
    font-size: 20px;
    color: #1B1B1B;
}

.username-form {display: none;}

/*----------------------------
    The file upload form
-----------------------------*/

.random-character {

}

.article {
    text-align: center;
}
.jcrop-holder {
    margin: 0 auto;
    background:transparent !important;
}
.jcrop-container {
    background: #1C1C1C;
    padding: 15px;
}
.jcrop-vline, .jcrop-hline {
    background: none;
    border: 1px dashed white;
    opacity: 1 !important;
}

.form-label {
    font-weight: 700;
}

/*----------------------------
    The Demo Footer
-----------------------------*/


footer{
    background-color: #080808;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    height: 40px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;
}

footer h2{
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    top:0;
    left: 50%;
    bottom:0;
    margin-left: -420px;
    padding:13px 20px 0;
    border:1px solid #000;
    border-width:0 1px;
    background-color:rgba(0,0,0,0.6);
    box-shadow:0 0 5px #000 inset;
    line-height: 1;
    margin-top: 0;
}

footer h2 a{
    color: #EEEEEE !important;
    text-decoration:none !important;
}

footer h2 i{
    font-style:normal;
    color:#888;
}

#tzine-download{
    opacity:0.9;
    background-color:#257691;
    font-size:11px;
    text-align:center;
    text-transform:uppercase;
    width:150px;
    height:28px;
    line-height:28px;
    text-decoration:none !important;

    display: inline-block;
    border-radius: 2px;
    color: #fff !Important;
    font-weight: bold;
    box-shadow: 0 -1px 2px #1e5e74 inset;

    border-top:1px solid #26849c;

    text-shadow:1px 1px 1px #1e6176;
    margin-top:6px;
}

#tzine-download:hover{
    opacity:1;
}

#tzine-actions{
    position:absolute;
    top:0;
    width:500px;
    right:50%;
    margin-right:-420px;
    text-align:right;
}

#tzine-actions iframe{
    display: inline-block;
    height: 21px;
    width: 95px;
    position: relative;
    float: left;
    margin-top: 11px;
}

.crop {
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 25px;
    line-height: 1;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 12px 26px;
    border:1px solid transparent;
    font-family:'PT Sans Narrow',sans-serif;
    transition: 0.3s all ease;
}

.baldur .btn.crop,
.balduree .btn.crop,
.pillars .btn.crop,
.deadfire .btn.crop,
.baldur2 .btn.crop,
.baldur2ee .btn.crop,
.iwdee .btn.crop,
.iwd2 .btn.crop,
.pathfinder .btn.crop,
.nwn .btn.crop,
.blackgeyser .btn.crop,
.wasteland2 .btn.crop,
.wasteland3 .btn.crop,
.srr .btn.crop,
.arcanum .btn.crop {
    width: auto;
}

.select-version {
    color: white;
    text-transform: uppercase;
    font-family:'PT Sans Narrow',sans-serif;
    width: 90%;
    margin: 0 auto;
}
.select-version label {
    width: calc(99% / 4);
    width: -moz-calc(99% / 4);
    width: -webkit-calc(99% / 4);
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.3s ease all;
}
.select-version img {
  width: 100%;

  filter: sepia(1);
  -webkit-filter: sepia(1);
  transition: 1s ease all;
}
.select-version label:hover img,
.select-version label.active img {
  filter: none;
  -webkit-filter: none;
}

.select-version input[type="radio"] {
  display: none;
}

/*----------------------------
    Custom CSS
-----------------------------*/
.container {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
}

pre {
    background: #FFF;
    padding: 15px;
    border-radius: 10px;
}

.btn-success {
    border: none;
}

#videos-list p,
#videos-list h3 {
    text-align: left;
}
#videos-list img {
    width: 100%;
}
#videos-list article {
    width: 33%;
    box-sizing: border-box;
    padding: 10px;
    float: left;
}
#videos-list article h2 {
    text-align: left;
    font-size: 25px;
}
#videos-list a {
    color: black;
    text-decoration: none;
}
#videos-list a:hover {
    text-decoration: underline;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background: linear-gradient(180deg, #FFFFFF 25%, rgba(255, 255, 255, 0) 100%), url('/assets/img/background.jpg');
    background-size: cover;
    background-attachment: fixed;
}
ul, li {
    list-style: none;
}

.game {
    border-radius: 10px;
    position: relative;
    padding: 0 15px 20px 15px;
    height: 375px;
    margin-right: -15px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.55);
}

.game img {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
}

.game h2 {
    color: white;
    font-weight: bold;
    text-align: left;
    text-shadow: 0px 0px 10px #000000;
}

.btn {
    border-radius: 10px;
    width: 100%;
    padding: 10px 15px;
    font-family: PT Sans Narrow;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 23px;
    text-align: center;
    transition: all ease 0.3s;
}

.game p {
    font-family: Hind Siliguri;
    font-size: 14px;
    line-height: 130%;
    color: white;
    text-shadow: 0px 0px 10px #000000;
}

/* Baldur */
.game.baldur {
    background: url(/assets/img/games/bg/bg_baldur.jpg) top center no-repeat;
}

.baldur a.btn,
.baldur input.btn {
    color: #fff;
    background: var(--baldur-color);
}

.baldur a.btn:hover,
.baldur input.btn:hover {
    color: #fff;
    background: #ad1c15;
}

.baldur .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.baldur .btn-success:hover {
    background: #228c3b;
}

/* Arcanum */
.game.arcanum {
    background: url(/assets/img/games/bg/bg_arcanum.jpg) top center no-repeat;
}

.arcanum a.btn,
.arcanum input.btn {
    color: #fff;
    background: var(--arcanum-color);
}

.arcanum a.btn:hover,
.arcanum input.btn:hover {
    color: #fff;
    background: #ad1c15;
}

.arcanum .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.arcanum .btn-success:hover {
    background: #228c3b;
}

/* W40K */
.game.W40K {
    background: url(/assets/img/games/bg/bg_W40K.jpg) top center no-repeat;
}

.W40K a.btn,
.W40K input.btn {
    color: #fff;
    background: var(--W40K-color);
}

.W40K a.btn:hover,
.W40K input.btn:hover {
    color: #fff;
    background: #3d6774;
}

.W40K .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.W40K .btn-success:hover {
    background: #228c3b;
}

/* ICEWIND DALE 2 */
.game.iwd2 {
    background: url(/assets/img/games/bg/bg_iwd2.jpg) top center no-repeat;
}

.iwd2 a.btn,
.iwd2 input.btn {
    color: #212121;
    background: var(--iwd2-color);
}

.iwd2 a.btn:hover,
.iwd2 input.btn:hover {
    color: #212121;
    background: #608ba9;
}

.iwd2 .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.iwd2 .btn-success:hover {
    background: #228c3b;
}

/* Shadowrun Returns */

.game.srr {
    background: url(/assets/img/games/bg/bg_srr.jpg) top center no-repeat;
}

.srr a.btn,
.srr input.btn {
    color: #ffffff;
    background: var(--srr-color);
}

.srr a.btn:hover,
.srr input.btn:hover {
    color: #fff;
    background: #2E7D75;
}

.srr .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.srr .btn-success:hover {
    background: #228c3b;
}

/* WASTELAND2 */

.game.wasteland2 {
    background: url(/assets/img/games/bg/bg_wasteland2.jpg) top center no-repeat;
}

.wasteland2 a.btn,
.wasteland2 input.btn {
    color: #1B1B1B;
    background: var(--wasteland2-color);
}

.wasteland2 a.btn:hover,
.wasteland2 input.btn:hover {
    color: #fff;
    background: #ad1c15;
}

.wasteland2 .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.wasteland2 .btn-success:hover {
    background: #228c3b;
}

/* WASTELAND3 */
.game.wasteland3 {
    background: url(/assets/img/games/bg/bg_wasteland3.jpg) top center no-repeat;
}

.wasteland3 a.btn,
.wasteland3 input.btn {
    color: #FFF;
    background: var(--wasteland3-color);
}

.wasteland3 a.btn:hover,
.wasteland3 input.btn:hover {
    color: #fff;
    background: #2f141a;
}

.wasteland3 .btn-success {
    background: #28a745;
    transition: all ease-in .3s;
}

.wasteland3 .btn-success:hover {
    background: #228c3b;
}

/* BLACK GEYSER */

.game.blackgeyser {
    background: url(/assets/img/games/bg/bg_blackgeyser.jpg) top center no-repeat;
}

.blackgeyser a.btn,
.blackgeyser input.btn {
    color: #321D14;
    background: var(--blackgeyser-color);
}

.game.tyranny {
    background: url(/assets/img/games/bg/bg_tyranny.jpg) top center no-repeat;
}

.tyranny a.btn,
.tyranny input.btn {
    color: #fff;
    background: var(--tyranny-color);
}

.tyranny a.btn:hover,
.tyranny input.btn:hover {
    color: #fff;
    background: #b23a18;
}

.game.balduree {
    background: url(/assets/img/games/bg/bg_balduree.jpg) top center no-repeat;
}

.balduree a.btn,
.balduree input.btn {
    color: #fff;
    background: var(--balduree-color);
}

.balduree a.btn:hover,
.balduree input.btn:hover {
    background: #80445e;
}

.game.nwn {
    background: url(/assets/img/games/bg/bg_nwn.jpg) top center no-repeat;
}

.nwn a.btn,
.nwn input.btn {
    color: #fff;
    background: var(--nwn-color);
}

.nwn a.btn:hover,
.nwn input.btn:hover {
    background: #3e4074;
}

.game.baldur2ee {
    background: url(/assets/img/games/bg/bg_baldur2ee.jpg) top center no-repeat;
}

.baldur2ee a.btn,
.baldur2ee input.btn {
    color: #1B1B1B;
    background: var(--baldur2ee-color);
}

.baldur2ee a.btn:hover,
.baldur2ee input.btn:hover {
    background: #D3C192;
}

.game.iwdee {
    background: url(/assets/img/games/bg/bg_iwd.jpg) top center no-repeat;
}

.iwdee a.btn,
.iwdee input.btn {
    color: #fff;
    background: var(--iwdee-color);
}

.iwdee a.btn:hover,
.iwdee input.btn:hover {
    background: #e67a27;
}

.game.baldur2 {
    background: url(/assets/img/games/bg/bg_baldur2.jpg) top center no-repeat;
}

.baldur2 a.btn,
.baldur2 input.btn {
    color: #1B1B1B;
    background: var(--baldur2-color);
}

.baldur2 a.btn:hover,
.baldur2 input.btn:hover {
    background: #b2db7d;
}

.game.deadfire {
    background: url(/assets/img/games/bg/bg_deadfire.jpg) top center no-repeat;
}

.deadfire a.btn,
.deadfire input.btn {
    color: #1B1B1B;
    background: var(--deadfire-color);
}

.deadfire a.btn:hover,
.deadfire input.btn:hover {
    background: #40c7c0;
}

.game.pillars {
    background: url(/assets/img/games/bg/bg_pillars.jpg) top center no-repeat;
}

.pillars a.btn,
.pillars input.btn {
    color: #FFF;
    background: var(--pillars-color);
}

.pillars a.btn:hover,
.pillars input.btn:hover {
    background: #bd4246;
}

.game.pathfinder {
    background: url(/assets/img/games/bg/bg_pathfinder.jpg) top center no-repeat;
}

.pathfinder a.btn,
.pathfinder input.btn {
    color: #fff;
    background: var(--pathfinder-color);
}

.pathfinder a.btn:hover,
.pathfinder input.btn:hover {
    background: var(--pathfinder-color);
}

.game.pathfinder_wotr {
    background: url(/assets/img/games/bg/bg_pathfinder_wotr.jpg) top center no-repeat;
}

.pathfinder_wotr a.btn,
.pathfinder_wotr input.btn {
    color: #fff;
    background: var(--pathfinder_wotr-color);
}

.pathfinder_wotr a.btn:hover,
.pathfinder_wotr input.btn:hover {
    background: var(--pathfinder_wotr-color);
}

.game.nwn2 {
    background: url(/assets/img/games/bg/bg_nwn2.jpg) top center no-repeat;
}

.nwn2 a.btn,
.nwn2 input.btn {
    color: #fff;
    background: var(--nwn2-color);
}

.nwn2 a.btn:hover,
.nwn2 input.btn:hover {
    background: var(--nwn2-color);
}

.game.notfound {
    background: url(/assets/img/games/bg/bg_notfound.jpg) top center no-repeat;
    border: 1px solid white;
}

.notfound a {
    color: #fff;
    background: rgba(27, 27, 27, 0.8);
}

.notfound a:hover {
    background: rgba(27, 27, 27, 0.7);
    color: #fff;
}

.video-container {
    align-items: stretch;
    margin-bottom: 30px;
}

.video {
    border-radius: 10px;
    position: relative;
    padding: 20px 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.55);
    height: 100%;
    background: #040202;
    transition: all ease 0.3s;
}

.video:hover {
    box-shadow: none;
}

.video > a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
}

.video p {
    color: #fff;
}

.video figure {
    overflow: hidden;
}

.video figure img {
    width: 100%;
}

.video h2 {
    color: white;
    font-weight: bold;
    text-align: left;
    text-shadow: 0 0 10px #000000;
}


.description {
    padding: 20px 30px;
    background-color: #1B1B1B;
    text-align: left;
    color: white;
    border-radius: 10px;
}

.description .cartouche {
    width: 40%;
}

.description .cartouche p {
    font-family: "Hind Siliguri";
}

.description h2 {
    margin-top: 10px;
    font-weight: bold;
    font-family: "PT Sans Narrow";
}

.description .logo {
    display: block;
}

.baldur .description {
    background-image: url(/assets/img/games/bg/bg_baldur_fiche.jpg);
    background-repeat: no-repeat;
}

.W40K .description {
    background-image: url(/assets/img/games/bg/bg_W40K_fiche.jpg);
    background-repeat: no-repeat;
}

.srr .description {
    background-image: url(/assets/img/games/bg/bg_srr_fiche.jpg);
    background-repeat: no-repeat;
}

.arcanum .description {
    background-image: url(/assets/img/games/bg/bg_arcanum_fiche.jpg);
    background-repeat: no-repeat;
}

.wasteland2 .description {
    background-image: url(/assets/img/games/bg/bg_wasteland2_fiche.jpg);
    background-repeat: no-repeat;
}

.wasteland3 .description {
    background-image: url(/assets/img/games/bg/bg_wasteland3_fiche.jpg);
    background-repeat: no-repeat;
}

.blackgeyser .description {
    background-image: url(/assets/img/games/bg/bg_blackgeyser_fiche.jpg);
    background-repeat: no-repeat;
}

.tyranny .description {
    background-image: url(/assets/img/games/bg/bg_tyranny_fiche.jpg);
    background-repeat: no-repeat;
}

.nwn .description {
    background-image: url(/assets/img/games/bg/bg_nwn_fiche.jpg);
    background-repeat: no-repeat;
}

.nwn2 .description {
    background-image: url(/assets/img/games/bg/bg_nwn2_fiche.jpg);
    background-repeat: no-repeat;
}

.iwdee .description {
    background-image: url(/assets/img/games/bg/bg_iwd_fiche.jpg);
    background-repeat: no-repeat;
}

.baldur2 .description {
    background-image: url(/assets/img/games/bg/bg_baldur2_fiche.jpg);
    background-repeat: no-repeat;
}
.balduree .description {
    background-image: url(/assets/img/games/bg/bg_balduree_fiche.jpg);
    background-repeat: no-repeat;
}
.baldur2ee .description {
    background-image: url(/assets/img/games/bg/bg_baldur2ee_fiche.jpg);
    background-repeat: no-repeat;
}
.pillars .description {
    background-image: url(/assets/img/games/bg/bg_pillars_fiche.jpg);
    background-repeat: no-repeat;
}
.deadfire .description {
    background-image: url(/assets/img/games/bg/bg_deadfire_fiche.jpg);
    background-repeat: no-repeat;
}
.pathfinder .description {
    background-image: url(/assets/img/games/bg/bg_pathfinder_fiche.jpg);
    background-repeat: no-repeat;
}

.pathfinder_wotr .description {
    background-image: url(/assets/img/games/bg/bg_pathfinder_wotr_fiche.jpg);
    background-repeat: no-repeat;
}

.description dt {
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0;
    font-family: "PT Sans Narrow";
}

.description dd {
    font-size: 16px;
    font-family: "Hind Siliguri";
}

.container.fiche {
    position: relative;
}

#upload {
    font-family:'PT Sans Narrow', sans-serif;
}

#drop {
    position: absolute;
    top: 150px;
    right: 40px;
}

#drop a {
    width: 250px;
    padding:12px 26px;
    cursor:pointer;
    display:inline-block;
    margin-top:12px;
    line-height:1;
}

#drop input{
    display:none;
}

#upload ul{
    list-style:none;
    margin:0 -30px;
    border-top:1px solid #2b2e31;
    border-bottom:1px solid #3d4043;
}

#upload ul li{

    background-color:#333639;

    background-image:-webkit-linear-gradient(top, #333639, #303335);
    background-image:-moz-linear-gradient(top, #333639, #303335);
    background-image:linear-gradient(top, #333639, #303335);

    border-top:1px solid #3d4043;
    border-bottom:1px solid #2b2e31;
    padding:15px;
    height: 52px;

    position: relative;
}

#upload ul li input{
    display: none;
}

#upload ul li p{
    width: 144px;
    overflow: hidden;
    white-space: nowrap;
    color: #EEE;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 100px;
}

#upload ul li i{
    font-weight: normal;
    font-style:normal;
    color:#7f7f7f;
    display:block;
}

#upload ul li canvas{
    top: 15px;
    left: 32px;
    position: absolute;
}

#upload ul li span{
    width: 15px;
    height: 12px;
    background: url('../img/icons.png') no-repeat;
    position: absolute;
    top: 34px;
    right: 33px;
    cursor:pointer;
}

#upload ul li.working span{
    height: 16px;
    background-position: 0 -12px;
}

#upload ul li.error p{
    color:red;
}

.jcrop-handle {
    border: 5px #fff solid;
    opacity: 1 !important;
}

.locale {
    padding-left: 0;
    padding-right: 0;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
}

.locale img {
    max-width: 25px;
}

.locale.active {
    border-bottom: 2px solid black;
}

@media (max-width: 575px) {
    .game  {
        background-size: cover!important;
    }
}