@font-face {
    font-family: 'Gla';
    src: url('fsgla.eot');
    src: url('fsgla.eot?#iefix') format('embedded-opentype'), url('fsgla.woff') format('woff'), url('fsgla.TTF') format('truetype');
}

@font-face {
    font-family: 'Gla';
    src: url('fsgla.TTF');
}

@font-face {
    font-family: cardo;
    src: url(Cardo-Regular.ttf)
}

@font-face {
    font-family: cardo-strong;
    src: url(Cardo-Bold.ttf)
}

@font-face {
    font-family: cardo-italic;
    src: url(Cardo-Italic.ttf)
}

@font-face {
    font-family: cardo;
    src: url(Cardo-Regular.ttf)
}

@font-face {
    font-family: cardo-strong;
    src: url(Cardo-Bold.ttf)
}

@font-face {
    font-family: cardo-italic;
    src: url(Cardo-Italic.ttf)
}

.w3-display-topleft {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 1;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
}

.w3-display-topleft:hover {
    color: black;
}

.home {
    color: rgb(104, 0, 2);
    font-size: 60px;
    line-height: 0.5;
    font-weight: 600;
    position: fixed;
}

html,
body {
    height: 100%;
    font-family: cardo;
    font-size: 18px
}

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

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.origin>ul {
    background: gray;
    padding: 10px;
    min-height: 20px;
    border-radius: 5px
}

.draggable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    list-style: none;
    width: 100%;
    width: initial;
    width: initial;
}

.draggable:not(:last-child) {
    margin-bottom: 10px;
    margin-right: 10px;
}

.drake-slots {
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.drake-slots .slot {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}

.drake-slots .slot:not(:last-child) {
    margin-bottom: 5px;
}

.drake-slots .slot .matchable {
    padding: 5px;
    background: #808080;
    display: table-cell;
    width: 50%;
    color: white;
    font-family: "gla";
    font-size: 20px;
    border-radius: 5px
}

.drake-slots .slot .drake-match {
    display: table-cell;
    width: auto;
    border: 1px dashed;
    border-radius: 5px
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: white;
    text-decoration: none;
}

#drake-origin2 div {
    font-family: "gla";
}

#drake-origin li {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    margin-right: 5px;
}

ul li {
    display: inline-block;
}

#p1,
#p2,
#p3,
#p4,
#p5,
#p6,
#p7,
#p0,
#p8,
#p9 {
    font-family: "gla";
    width: 50px;
    height: 50px;
    border: 1px solid rgb(104, 0, 2);
    border-radius: 50px;
    line-height: 50px;
    text-align: center;
    background: rgb(214, 202, 178);
}

ul li {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.prijevod {
    text-align: center
}

.btn {
    margin: 1rem auto 0;
    margin-bottom: 0px;
    display: block;
    font-size: 1.5rem;
    background: rgb(104, 0, 2);
    border: none;
    color: white;
    border-radius: 5px;
    transition: background-color 0.5s ease;
    font-family: cardo;
    margin-bottom: 20px;
}

.init-page__btn2 {
    display: none
}

.btn:hover {
    cursor: pointer;
    background: rgb(124, 7, 16);
    color: white;
}


/*  SECTIONS  */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}


/*  COLUMN SETUP  */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 */
}


/*  GRID OF TWO  */

.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

@media only screen and (max-width:1200px) {
    .col-xs-6 {
        width: 100%
    }
    .container {
        position: relative;
        left: initial;
        top: initial;
        transform: initial;
        padding-top: 20px
    }
}

@media only screen and (max-width:800px) {
    .w3-display-topleft {
        top: 1%;
        left: 1%;
        font-size: 30px
    }
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_2_of_2,
    .span_1_of_2 {
        width: 100%;
    }
}