@font-face {
    font-family: 'Museo';
    font-weight: 100;
    src: url("../fonts/MuseoSans_100.otf");
}

@font-face {
    font-family: 'Museo';
    font-weight: 300;
    src: url("../fonts/MuseoSans_300.otf");
}

@font-face {
    font-family: 'Museo';
    font-weight: 500;
    src: url("../fonts/MuseoSans_500.otf");
}

@font-face {
    font-family: 'Museo';
    font-weight: 700;
    src: url("../fonts/MuseoSans_700.otf");
}


@font-face {
    font-family: 'Museo';
    font-weight: 900;
    src: url("../fonts/MuseoSans_900.otf");
}


* {
    font-size: 100%;
    /*font-family: 'Roboto', sans-serif;*/
    font-family: Museo, sans-serif;
}

body {
    /* Location of the image */
    background-image: url(../Images/bckg_vitanje.jpg);
    /* Image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Image doesn't repeat */
    background-repeat: no-repeat;
    /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based on its container's size */
    background-size: cover;
    /* Pick a solid background color that will be displayed while the background image is loading */
    background-color: black;
    /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
}

.form-control::-webkit-input-placeholder {
    color: white !important;
}
/* WebKit, Blink, Edge */
.form-control:-moz-placeholder {
    color: white !important;
}
/* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder {
    color: white !important;
}
/* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder {
    color: white !important;
}
/* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder {
    color: white !important;
}
/* Microsoft Edge */

/* For mobile devices */
/* For mobile devices */
@media only screen and (max-width: 767px) {
    body {
        background-image: url(../Images/bckg_vitanje.jpg);
    }

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }

    .col-5.logo {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        margin-bottom: 60px;
    }
}
/* Move down content because we have a fixed navbar that is 50px tall */
body {
    /*padding-top: 50px;*/
    /*padding-bottom: 20px;*/
    background-color: transparent;
    height: 100%;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}




h2 {
    color: white;
}


.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="checkbox"] input[type="select"] {
    max-width: 280px;
    background-color: transparent;
    border-color: white;
    outline: 0;
    border-radius: unset;
    color: rgba(44, 189, 190, 1) !important;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

html {
    height: 100% !important;
}

/** centr div  */
.center-div {
    position: fixed;
    margin: auto;
    top: 50%;
    right: 0;
    bottom: 50%;
    left: 0;
    width: 50%;
    height: 20%;
    text-align: center;
    color: #2cbdbe;
    font-weight: 700;
}


    .center-div h1 {
        font-size: 6.5em;
        line-height: normal;
        text-transform: uppercase;
    }

    .center-div p {
        font-size: 2em;
    }

    .center-div h2 {
        font-size: 2.5em;
        line-height: normal;
        text-transform: uppercase;
        color: #3ef002;
    }

form {
    width: 100%;
}

.form.login {
    max-width: 280px;
    display: block;
    margin: 0 auto;
}

/** header */
#header {
    display: block;
    width: 100%;
    /*    background-color: black;
*/ padding: 75px 0 0 0;
}

.row.header-wrapper {
    position: relative;
}

.dragon {
    display: none;
}

    .dragon img {
        width: 100%;
    }

.logo img {
    /* width: 100%; */
    max-width: 230px;
    margin-bottom: 10px;
}


/* icons */
.icons-only {
    max-width: 200px;
    display: block;
    min-width: 154px;
    /* float: right; */
    margin: 0 auto;
}

.icons {
    margin-top: 25px;
    margin-bottom: 50px;
}

.btn-download, .btn-mailto, .btn-tweeter, .btn-facebook {
    float: right;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    background-position: center;
}

.btn-download, .btn-mailto {
    width: 21%;
}

.btn-facebook, .btn-tweeter {
    width: 19%;
}

.btn-mailto {
    background-image: url(../Images/icon-mailto.png);
    background-size: 73%;
    margin-left: -8px;
    /* center center fixed;*/
}

.btn-download {
    background-image: url(../Images/icon-dl.png);
}

.btn-tweeter {
    background-image: url(../Images/icon-tweet.png);
    margin-right: 11px;
}

.btn-facebook {
    background-image: url(../Images/icon-fb.png);
}

}

.info {
    float: left;
}

    .info a {
        text-decoration: none;
        color: white !important;
        font-weight: 500;
    }

    .info img {
        display: block;
        margin: 0 auto 30px auto;
        max-width: 75px;
    }


.vert {
    float: right;
    font-size: 30px;
    /* font-weight: unset; */
    color: white;
    padding: 0 9% 0 0;
    line-height: 20px;
}

footer {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    color: white;
    background-color: black;
    text-align: center;
}


/* IFRAME */
iframe {
    width: 100%;
    height: 200px;
    border: none;
}
/* GAME PLAYER */

.form-100 {
    width: 100%;
}

.game-player_login {
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: larger;
}

.game-player_login_rfid {
    background-color: transparent;
    border-color: white;
    border-radius: unset;
}

    .game-player_login_rfid::placeholder { /* Chrome/Opera/Safari */
        color: rgba(44, 189, 190, 0.40);
        font-weight: 100;
    }

    .game-player_login_rfid::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(44, 189, 190, 0.40);
        font-weight: 100;
    }

    .game-player_login_rfid::-moz-placeholder { /* Firefox 19+ */
        color: rgba(44, 189, 190, 0.40);
        font-weight: 100;
    }

    .game-player_login_rfid:-ms-input-placeholder { /* IE 10+ */
        color: rgba(44, 189, 190, 0.40);
        font-weight: 100;
    }

    .game-player_login_rfid:-moz-placeholder { /* Firefox 18- */
        color: rgba(44, 189, 190, 0.40);
        font-weight: 100;
    }

    .game-player_login_rfid input {
        background-color: transparent;
        border-color: rgba(44, 189, 190, 1);
        border-radius: unset;
        color: rgba(44, 189, 190, 0.40);
        font-weight: 100;
    }

.game-player_login .form-control {
    background-color: transparent;
    color: rgba(44, 189, 190, 1) !important;
    border-radius: unset;
}

.game-player_login_rfid optgroup {
    background-color: transparent;
    border-color: white;
    border-radius: unset;
}

option:not(:checked) {
    background-color: black;
    color: rgba(44, 189, 190, 0.50);
}

.form-group_experience .form-control {
    border-radius: unset;
}

.form-control:focus {
    background-color: transparent;
    border-color: rgba(44, 189, 190, 1);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(44, 189, 190, 0.07);
    ,0 0 8px rgba(44, 189, 190, 0.40);
    box-shadow: inset 0 1px 1px rgba(44, 189, 190, 0.07);
    ,0 0 8px rgba(44, 189, 190, 0.40);
    border-radius: unset;
}

.btn-experience {
    border-color: rgba(44, 189, 190, 1);
    background-color: transparent;
    color: rgba(44, 189, 190, 1);
    border-radius: unset;
}

    .btn-experience:hover,
    .btn-experience:focus,
    .btn-experience:active,
    .btn-experience.active,
    .btn-experience::selection {
        background-color: rgba(44, 189, 190, 0.20) !important;
        color: rgba(44, 189, 190, 1) !important;
        border-radius: unset !important;
        border-color: rgba(44, 189, 190, 1) !important;
    }

.btn-experience {
    text-transform: uppercase;
}

    .btn-experience i {
        display: inline-table;
        border-color: rgba(44, 189, 190, 1);
        border-style: solid;
        border-width: thin;
    }

.btn-experience_left-i i {
    margin-right: 10px;
    padding-right: 10px;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: thin;
    border-right-color: inherit;
    border-right-style: solid;
    border-right-width: thin;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: thin;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: thin;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.btn-experience_right-i i {
    margin-left: 10px;
    padding-left: 10px;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: thin;
    border-left-color: inherit;
    border-left-style: solid;
    border-left-width: thin;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: thin;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: thin;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.btn-experience_noborder {
    padding: unset;
    border: unset;
}

/* game player */

iframe.game-player_pogoji {
    height: 200px;
    width: 100%;
    border: thin;
    border-color: rgba(44, 189, 190, .40);
    /* color: rgba(44, 189, 190, 1); */
    background-color: transparent;
    padding: 10px;
}

.game-player_form,
.game-player_agree {
    color: white;
}

.game-player_form {
    padding: 20px;
}


.game-player_form {
    padding: 20px;
}

    .game-player_form input {
        color: rgba(44, 189, 190, 1);
    }

    .game-player_form .form-group {
        width: 100%;
    }

    .game-player_form input[type="submit"] {
        border-color: rgba(44, 189, 190, 1);
        background-color: transparent;
        color: rgba(44, 189, 190, 1);
        border-radius: unset;
    }

.game-player_agree {
    margin-top: 30px;
}

.game-player_checkbox {
    color: rgba(44, 189, 190, 1);
    font-size: larger;
    margin-left: 20px;
}

.game-player_icon-left {
    border-color: rgba(44, 189, 190, 1);
    background-color: transparent;
    color: rgba(44, 189, 190, 1);
    border-radius: unset;
    display: block;
}

/* GAME PLAYER TABLE */
.form-group.game-player_table,
.game-player_table tbody tr,
.game-player_table tbody td,
.table-responsive {
    background-color: transparent;
}

.game-player_table,
.game-player_table tbody tr,
.game-player_table tbody td,
.table-responsive {
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
}

.table-responsive {
    border: none !important;
}

.game-player_table,
.game-player_table tbody tr,
.game-player_table tbody td {
    color: white;
}

.game-payer_table-header {
    border-color: rgba(44, 189, 190, 1) !important;
    color: rgba(44, 189, 190, 1);
    text-transform: uppercase;
    background-color: transparent !important;
    font-weight: 100;
    border-left: none !important;
    border-right: none !important;
}

th {
    background: transparent !important;
}

.game-player_text-danger {
    color: rgba(44, 189, 190, 1);
}

.form-group.row.game-player_form {
}

.game-player_form input[disabled] {
    color: rgba(44, 189, 190, 1);
    background: black;
}

.game-player_form-check {
    background: transparent;
    border: none;
}

span.form-check-input.game-player_checkbox input {
    width: 40px;
    height: 40px;
    margin-top: -10px;
    margin-left: 100%;
    background-color: red;
    color: red;
}

@media (max-width: 576px) {
    .info-col {
        text-align: center;
    }

    .icons-only-col {
        margin-top: 10px;
    }

    .icons-only {
        max-width: 200px;
        display: block;
        min-width: 154px;
        margin: 0 auto;
        float: unset;
    }
}



.col-md-12.game-player_login input {
    background: transparent;
}