/*!
 * Start Bootstrap - Full (http://startbootstrap.com/template-overviews/full)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full/blob/master/LICENSE)
 */

/* For FAQ page */
input.text-input {
  margin: 0 auto;
  display:block;
}

ul.qanda {
    color:#000;
    list-style:none;
    margin:100px auto;
    width: 80%;
    padding:0;
}
.qanda li {
    border:1px solid #f5f5f5;
    margin:0em 0;
    padding:0;
}
.qanda .question {
    cursor:pointer;
    display:block;
    font-size:1.0em;
    font-weight:300;
    padding:.75em 1.25em;
    position:relative
}
.qanda .answer {
    border:2px solid #f59e00;
    background-color: white;
    display:block;
    padding:.75em 1.25em;
    font-size: 1.0em;
}
.qanda a {
    color:#f59e00
}
.qanda a:hover {
    color:#ec6408
}
.qanda .question {
    padding-left:1.5em;
    background-color: #e5e5e5;
    color: #000;
    transition: 250ms all linear;
}
.qanda .question.active {
    background-color: #f59e00;
    color: #fff;
    transition: 250ms all linear;
}
.qanda .question:before {
    content:"+";
    font-weight:700;
    position:absolute;
    left:.5em
}
.qanda .active:before {
    content:"-"
}

/* End of for FAQ page */

/* For media page */

/* The CSS that matters */

.media-body {
	background: rgba(0,0,0,0.6);  
}

.flexcontainer {
	margin-top: 50px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: center;
   align-content: center; 
}

.thumb {
	width: 100%;
	padding: 2%;
}

.screenshot {

}

.lb {
	display: none;
	position: fixed!important;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
  text-align:center;
}

.lb img {
	padding: 15px;	
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lb:target {
	outline: none;
	display: block;
}

a.lb:hover {cursor:default;}
img:hover {cursor:pointer;}

/*Lightbox above*/

body {
    padding: 30px 0px;
}

#lightbox .modal-content {
    display: inline-block;
    text-align: center;   
}

#lightbox .close {
    opacity: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 25);
    padding: 5px 8px;
    border-radius: 30px;
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    top: -15px;
    right: -55px;
    
    z-index:1032;
}

.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.428571429;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* End of For Media page */


body {
    background: url('front_page.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.btn-facebook {
	background-color: #3b5998;
	text-align: left;
}

.btn-google {
	background-color: #D34C3D;
	text-align: left;	
}

.btn-twitch {
	background-color: #6441A4;
	text-align: left;
}

.btn-steam {
	background-color: #444444;
	text-align: left;	
}

.btn-vk {
	background-color: #45668e;
	text-align: left;	
}

.btn-guest {
	background-color: #999;
	border-color: #999;	
}

.modal-content {
	padding: 15px;
}

.button-image:before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: text-top;
    background-color: transparent;
    background-position : center center;
    background-repeat:no-repeat;
}

.ButtonImg:before{
     background-image : url(steam-logo-black.png);
}

div#play {
	margin-top: 9.5%;
}

p {
	margin-left: auto;
	margin-right: auto;
}

.btn-play {
	max-width: 50%;
}

#logo {
	max-width: 40%; 
	height: auto;
}

.btn-xl {
    padding: 10px 20px;
    font-size: 58px;
    width:100%;
}

@import url(http://fonts.googleapis.com/css?family=Roboto);

* {
    font-family: 'Roboto', sans-serif;
}

#login-modal .modal-dialog {
    width: 350px;
}

#login-modal input[type=text], input[type=password] {
	margin-top: 10px;
}

#div-login-msg,
#div-lost-msg,
#div-register-msg {
    border: 1px solid #dadfe1;
    height: 30px;
    line-height: 28px;
    transition: all ease-in-out 500ms;
}

#div-login-msg.success,
#div-lost-msg.success,
#div-register-msg.success {
    border: 1px solid #68c3a3;
    background-color: #c8f7c5;
}

#div-login-msg.error,
#div-lost-msg.error,
#div-register-msg.error {
    border: 1px solid #eb575b;
    background-color: #ffcad1;
}

#icon-login-msg,
#icon-lost-msg,
#icon-register-msg {
    width: 30px;
    float: left;
    line-height: 28px;
    text-align: center;
    background-color: #dadfe1;
    margin-right: 5px;
    transition: all ease-in-out 500ms;
}

#icon-login-msg.success,
#icon-lost-msg.success,
#icon-register-msg.success {
    background-color: #68c3a3 !important;
}

#icon-login-msg.error,
#icon-lost-msg.error,
#icon-register-msg.error {
    background-color: #eb575b !important;
}

#img_logo {
    max-height: 100px;
    max-width: 100px;
}

/* #########################################
   #    override the bootstrap configs     #
   ######################################### */

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .8;
}

.modal-content {
    background-color: #ececec;
    border: 1px solid #bdc3c7;
    border-radius: 0px;
    outline: 0;
}

.modal-header {
    min-height: 16.43px;
    padding: 15px 15px 15px 15px;
    border-bottom: 0px;
}

.modal-body {
    position: relative;
    padding: 5px 15px 5px 15px;
}

.modal-footer {
    padding: 15px 15px 15px 15px;
    text-align: left;
    border-top: 0px;
}

.checkbox {
    margin-bottom: 0px;
}

.btn {
    border-radius: 10px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
}

.btn-lg, .btn-group-lg>.btn {
    border-radius: 0px;
}

.btn-link {
    padding: 5px 10px 0px 0px;
    color: #95a5a6;
}

.btn-link:hover, .btn-link:focus {
    color: #2c3e50;
    text-decoration: none;
}

.glyphicon {
    top: 0px;
}

.form-control {
  border-radius: 0px;
}