@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

body { padding-right: 0 !important }

s {
    text-decoration: line-through;
}

.post-entry-image{
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.post-entry-image-first{
    height: 400px;
}

.post-entry-image-other{
    height: 200px;
}

.post-entry-other{
    height: 150px;
    overflow: hidden;
}

.post-entry-overlay{
    overflow-y: auto;
}

.white-color{
    color: white;
}

.text-shadow-black{
    text-shadow: 2px 2px 2px #111;
}


@media (max-width: 768px) {
    .post-entry-image-first{
        height: 300px;
    }

    .post-entry-image-other{
        height: 150px;
    }
    
    .post-entry-other{
        height: 250px;
    }
}

.p-switch .p-switch-style{
    background: #12994a;
}

.p-switch > input[type="checkbox"]:checked + .p-switch-style{
    background: #878383;
}

label.p-switch{
    padding-top: 2px;
    margin-bottom: 0px;
}

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  display: inline-block;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 2.5em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

#swap-affix{
    position: fixed;
    top: 40%;
    left: 0px;
    z-index: 10;
}
#swap-affix img{
    width: 20px;
}
#swap-affix button{
    border: 1px solid black;
    padding: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.color-d4d2ba{
    color: #d4d2ba;
}
.color-black{
    color: black;
}
.color-white{
    color: white;
}

.height-250{
    height: 250px;
}

#kviz-konec img{
    width: 100%;
}

#kviz-odpovedi{
    padding-left: 0px;
    padding-right: 0px;
}
#kviz-odpovedi{
    padding-left: 0px;
    padding-right: 0px;
}
#kviz-odpovedi .col-sm-6, #kviz-odpovedi .col-sm-4{
    padding: 2px;
}

#kviz-odpovedi .right-column-sortable ul li:hover{
    cursor: pointer;
}

#kviz-odpovedi .progress-bar {
    padding: 1px;
}

.mt-5
{
    margin-top: 5px;
}

.article-preview-triangle {
    float: right;
    width: 70px;
    height: 70px;
    position:relative;
}

.my-affix-on{
    width: 100%;
    position: fixed;
    top: 80px;
    left: 0px;
    background: white;
    border-bottom: 1px solid #12994a;
    z-index: 20;
}

.quiz-border{
    border-top: 1px solid #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
    padding: 5px;
    margin-bottom: 30px;
}

.quiz-border .good-answer{
    background: #83c983;
    -webkit-transition: all 2s linear;
}
.quiz-border .wrong-answer{
    background: #df706d;
    -webkit-transition: all 2s linear;
}

.quiz-border btn{
    color: black;
}

#kviz-odpovedi .btn{
    white-space: normal;
    border: 1px solid black;
}

#prihlaseni-facebook{
    background: transparent;
    border: none;
    color: white;
    font-size: 12px;
    font-weight: 500;
}

#prihlaseni-facebook:hover{
    text-decoration: none;
}

.btn-link {
    background: transparent;
    border: none;
}

.left-right-icon{
    margin-top: 10px;
    width: 50px;
}

#kviz-stavx img{
    width: 30px;
    height: 30px;
}

.sortable-quiz-right{
    color: #212529;
    background: #2ECC71;
}

.sortable-quiz-good{
    color: #212529;
    background: #62dd96;
}

.sortable-quiz-ok{
    color: #212529;
    background: #ABEBC6;
}

.sortable-quiz-wrong{
    color: #212529;
    background: #F1948A;
}

.flash-wrong {
    -webkit-animation-name: flashWrong;
    animation-name: flashWrong;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flashWrong {
    0% {background: #dddddd;}
    30% {background: #df706d;}
    70% {background: #df706d;}
    100% {background: #dddddd;}
}
@keyframes flashWrong {
    0% {background: #dddddd;}
    30% {background: #df706d;}
    70% {background: #df706d;}
    100% {background: #dddddd;}
}

.fix-width-768, .fix-goal-graph
{
    overflow-x: auto;
    width: 100%;
}

.fix-width-768 .graph-fix, .fix-goal-graph .graph-fix
{
    width: 100%;
}


.left-column, .right-column{
    width: 50%;
}

.left-column{
    border-right: 1px solid black;
}

.left-column-sortable{
    width: 30%;
} 

.right-column-sortable{
    width: 70%;
}

.sortable-item{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sortable-item div{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.connection-quiz-btn-img{
    width: 100px;
    height: 100px;
}

.connection-quiz-btn, .connection-quiz-btn-img, .selection-quiz-btn {
    background: #dddddd;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 10px;
    -webkit-transition: all 0.5s linear;
}

.connection-quiz-btn.selected-button, .connection-quiz-btn-img.selected-button{
    border: 1px solid black;
    background: #88cffb;
    -webkit-transition: all 0.5s linear;
}

.connection-quiz-btn:disabled, .connection-quiz-btn-img:disabled{
    background: #83c983;
    -webkit-transition: all 1s linear;
}

.selection-quiz-btn.fade-in-correct{
    background: #83c983;
    -webkit-transition: all 1s linear;
}

.selection-quiz-btn.fade-in-wrong{
    background: #df706d;
    -webkit-transition: all 1s linear;
}

.connection-quiz-btn-img:disabled img{
    background: #83c983;
    -webkit-transition: all 1s linear;
}

.connection-quiz-btn-img img{
    transition: transform .2s;
}

.connection-quiz-btn-img img:hover {
  -ms-transform: scale(2.5); /* IE 9 */
  -webkit-transform: scale(2.5); /* Safari 3-8 */
  transform: scale(2.5);
}

.connection-quiz-btn-img.selected-button img
{
    border: 2px solid #88cffb;
    background: #88cffb;
}

.connection-quiz-btn-img.flash-wrong img{
    border: 2px solid #df706d;
    background: #df706d;
}

.connection-quiz-btn-img.flash-wrong img {
    -webkit-animation-name: flashWrongBorder;
    animation-name: flashWrongBorder;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flashWrongBorder {
    0% {background: #dddddd; border: 2px solid #dddddd;}
    30% {background: #df706d; border: 2px solid #df706d;}
    70% {background: #df706d; border: 2px solid #df706d;}
    100% {background: #dddddd; border: 2px solid #dddddd;}
}
@keyframes flashWrongBorder {
    0% {background: #dddddd; border: 2px solid #dddddd;}
    30% {background: #df706d; border: 2px solid #df706d;}
    70% {background: #df706d; border: 2px solid #df706d;}
    100% {background: #dddddd; border: 2px solid #dddddd;}
}

.connection-quiz-btn-img.hide-delay img:hover {
    -webkit-animation-name: flashOkBorder;
    animation-name: flashOkBorder;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flashOkBorder {
    0% {background: #83c983; border: 2px solid #83c983;}
    30% {background: #66b866; border: 2px solid #66b866;}
    70% {background: #66b866; border: 2px solid #66b866;}
    100% {background: #83c983; border: 2px solid #83c983;}
}
@keyframes flashOkBorder {
    0% {background: #83c983; border: 2px solid #83c983;}
    30% {background: #66b866; border: 2px solid #66b866;}
    70% {background: #66b866; border: 2px solid #66b866;}
    100% {background: #83c983; border: 2px solid #83c983;}
}

.filling-quiz-image{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: bottom;
    border: 1px solid white;
    height: 400px;
    padding-top: 10%;
    padding-bottom: 10%;
    font-size: 18pt;
    line-height: normal;
}

.quiz-border .good-answer{
    background: #83c983;
    -webkit-transition: all 2s linear;
}
.quiz-border .wrong-answer{
    background: #df706d;
    -webkit-transition: all 2s linear;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.width-ten{
    width: 10%;
}
.width-ten button{
    width: 100%;
}

.quiz-answer-one{
    white-space: normal;
    width: 100%;
    border-radius: 7px;
}
.quiz-answer-two{
    white-space: normal;
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 48%;
    border-radius: 7px;
}
.quiz-answer-three{
    white-space: normal;
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 32%;
    border-radius: 7px;
}
.quiz-answer-four{
    white-space: normal;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 5px;
    width: 48%;
    border-radius: 7px;
}

@media screen and (min-width: 992px) {
    .filling-quiz-image{
        font-size: 25pt;
    }
    .connection-quiz-btn-img{
        width: 100px;
        height: 100px;
    }
    
    .quiz-answer-four{
        margin-top: 0px;
        width: 24%;
    }
}

.btn.btn-tag-selected{
    background: black;
    color: white;
}

.quiz-result{
    width: 100%;
    border: 1px solid black;
    padding: 30px;
    font-weight: bold;
    font-size: 13pt;
    text-align: center;
    margin: 50px 0px;
}
.quiz-result p{
    font-size: 20pt;
}

.create-quiz-info{
    margin: 50px 50px;
    font-size: 22pt;
    text-align: center;
}

.create-quiz-info a{
    margin: 10px;
}

.text-napovedy{
    color: #228822;
    font-style: italic;
}

#dropdownMenuButton{
    color: white;
}

#dropdownMenuButton:hover{
    color: white;
    text-decoration: none;
}

#dropdownMenuButtonLocalization{
    color: white;
    text-decoration: none;
}

#dropdownMenuButtonLocalization:hover{
    color: white;
    text-decoration: none;
}

.flag{
    width: 30px;
}

.w-10{
    width: 10%;
}

.w-15{
    width: 15%;
}

.w-20{
    width: 20%;
}

.w-30{
    width: 30%;
}

.w-35 hr{
    border-color: transparent;
    border: 0px;
}

.w-35{
    width: 35%;
}

.w-40{
    width: 40%;
}

.w-15-h-15{
    width: 15px;
    height: 15px;
}

.w-20-h-20{
    width: 20px;
    height: 20px;
}

.single-post .post-item img.img-social-network{
    width: 20px;
    height: 20px;
}

.post-item-description .text-justify table td, .post-item-description .text-justify table th{
    padding: 5px;
}

.predplatne-ohraniceni{
    border: 1px solid #12994a;
    width: 80%;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}

.table-article-report img, .single-post .post-item .table-article-report img{
    width: 30px;
    height: 30px;
}

.w-30-h-30{
    width: 30px;
    height: 30px;
}

.w-50-h-50{
    width: 50px;
    height: 50px;
}

.w-70-h-70{
    width: 70px;
    height: 70px;
}

.alternative-place{
    width: 100%; 
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.ad-place{
    width: 100%; 
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.ad-place iframe{
    width: 100%;
    text-align: center;
}

.match-result div{
    font-size: 60px;
    line-height: 1.1;
}

.cursor-pointer{
    cursor: pointer;
}

.rozcestnik:hover{
    background-color: #2f587c;
    color: white;
}
.rozcestnik-obrazek:hover img{
    -webkit-filter: brightness(0) invert(1); 
    filter: brightness(0) invert(1);
}

.rozcestnik:hover h3, .rozcestnik:hover h5{
    color: white;
}

.rozcestnik-stejne-h5{
    height: 50px;
    overflow-y: hidden;
}

.vertical-middle, .table-bordered .vertical-middle
{
    vertical-align: middle;
}

.no-right-border, .table-bordered .no-right-border
{
    border-right-style: hidden;
}

.no-left-border, .table-bordered .no-left-border
{
    border-left-style: hidden;
}

.match-prediction-border
{
    border: 5px solid #60ed2d;
    border-radius: 20px;
    padding: 5px;
}

.table-vertical-align tr td, .table-vertical-align tr th{
    vertical-align: middle!important;
}

.table-list td{
    padding-right: 10px;
}

.my-tooltip button{
    float: left;
    border: 2px solid #2f587c;
    margin: 2px 5px;
    padding: 3px 7px;
    height: 35px;
    width: 40px;
    color: black;
}

.my-tooltip img{
    width: 20px;
}

.fantasy-last-game-win{
    padding: 5px;
    background-color: #d4edda;
    border-radius: 10px
}
.fantasy-last-game-draw{
    padding: 5px;
    background-color: #d1ecf1;
    border-radius: 10px
}
.fantasy-last-game-lost{
    padding: 5px;
    background-color: #f8d7da;
    border-radius: 10px
}

.last-game-won button{
    background: #5cb85c;
}
.last-game-draw button{
    background: #FFED85;
}
.last-game-lost button{
    background: #d9534f;
}

.user-clubs-limit-view{
    height: 300px;
    overflow-y: scroll;
}

#page-content .info-page ul{
    margin-left: 50px;
}

.poznavacka, .hraci-pole{
    border: 3px solid #black;
    width: 100%;
    color: white;
}

#hra-uvod, #hra-nacitani table{
    width: 100%;
}

#hra-hra #hra-hra-table .width-hundred{
    width: 100%;
    border-bottom: 1px solid #12994a;
}

#hra-uvod table, #hra-hra #hra-hra-table{
    width: 100%;
    border: 2px solid #12994a;
}

#hra-uvod table tbody tr p{
    padding: 0% 3%;
}

#hra-uvod table tbody tr h3{
    padding: 1% 3%;
}

#hra-uvod table button, #hra-nacitani table button{
    background-color: #12994a;
    border-color: #12994a;
    width: 200px;
}

#hra-konec, #hra-nacitani{
    height: 500px;
    width: 100%;
    border: 2px solid #12994a;
}

.hra-maly-obrazek{
    width: 30px;
    background: #12994a;
    border-radius: 5px;
    margin-right: 10px;
}

.hra-nacitani-stav div{
    padding: 10px 0px;
    background: #12994a;
    border: 1px solid #12994a;
    text-align: left;
}

.hra-obrazek-hrace{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: bottom;
    height: 400px;
    padding-top: 0%;
    padding-bottom: 0%;
    font-size: 18pt;
    line-height: normal;
}

.hra-obrazek-sibenice-konec{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: bottom;
    height: 200px;
    padding-top: 0%;
    padding-bottom: 0%;
    font-size: 18pt;
    line-height: normal;
}

.hra-spravna-odpoved p{
    color: white;
}

.hra-spravna-odpoved{
    width: 100%;
    color: white;
    padding: 2%;
    text-align: center;
    position: relative;
    -webkit-animation-name: poznavackaSpravnaOdpoved;
    animation-name: poznavackaSpravnaOdpoved;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes poznavackaSpravnaOdpoved {
    0% {background: #12994a00; top: 60%}
    100% {background: #12994acc; top: 70%}
}
@keyframes flashOkBorder {
    0% {background: #12994a00; top: 60%}
    100% {background: #12994acc; top: 70%}
}

.hra-spatna-odpoved p{
    color: white;
}

.hra-spatna-odpoved{
    width: 100%;
    color: white;
    padding: 2%;
    text-align: center;
    position: relative;
    -webkit-animation-name: poznavackaSpatnaOdpoved;
    animation-name: poznavackaSpatnaOdpoved;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes poznavackaSpatnaOdpoved {
    0% {background: #e1444400; top: 60%}
    100% {background: #e14444cc; top: 70%}
}
@keyframes poznavackaSpatnaOdpoved {
    0% {background: #e1444400; top: 60%}
    100% {background: #e14444cc; top: 70%}
}

#hra-pokus{
    font-size: 30px;
    text-align: center;
    margin-bottom: 5px;
}

#hra-hra #hra-dalsi, #hra-hra #hra-shrnuti{
    background: #12994a;
}

.hra-pomoc-button{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 2px solid #016931;
    margin: 5px;
    background: #12994a;
}

.hra-pomoc-button:disabled{
    opacity: 0.6;
}

.hra-pomoc-button img{
    width: 100%;
    height: 100%;
}

#hra-dalsi, #hra-shrnuti{
    width: 100%;
    border: 1px solid #12994a;
}

#hra-stav button:hover, #hra-hra-table #hra-dalsi:hover,
#hra-uvod button:hover, #hra-nacitani button:hover{
    background: #016931;
}

#hra-konec table{
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}

#hra-stav table td{
    width: 33.333%;
}

#hra-stav div span{
    color: #12994a;
    font-size: 40px;
    vertical-align: middle;
}

#hra-pokusy div span{
    color: #12994a;
    font-size: 25px;
    vertical-align: middle;
    margin-left: 5px;
}

#hra-zeme img{
    height: 50px;
    border: 1px solid #12994a;
}

#hra-cas img, #hra-body img{
    height: 50px;
    width: 50px;
}

#hra-body span{
    margin-right: 5px;
}

.hra-skore-leva-hrana
{
    border-left: 1px solid #dee2e6;
}

.zprava-milionare{
    width: 80%;
    margin: 10px;
    padding: 10px;
}

.milionar{
    border: 3px solid #black;
    width: 500px;
    color: white;
}

.milionar h3, .milionar p, .milionar-odpoved{
    color: white;
}
    
#milionar-hra, #milionar-uvod, #milionar-nacitani{
    width: 100%;
    background: #10232f;
}

.milionar-leva{
    width: 50%;        
    background: #10232f;
    position: relative;
}

.milionar-prava{
    width: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow-y: auto;
    background: #10234f;
}

#milionar-uvod, #milionar-nacitani{
    padding: 50px;
    color: white;
}

#milionar-uvod table, #milionar-nacitani table{
    width: 100%;
}

#milionar-uvod a{
    color: white;
    text-decoration: underline;
}

#milionar-nacitani{
    min-height: 500px;
}
.milionar-nacitani-stav div{
    padding: 10px 0px;
    background: #10234f;
    border: 1px solid #54a4bb;
    text-align: left;
}

.milionar #ssp-zone-75216{
    margin-left: auto;
    margin-right: auto;
}

#milionar-info{
    width: 100%;
    color: #dddddd;
    overflow-y: auto;
    top: 0px;
}

#milionar-info h3{
    color: #ffffff;
}

#milionar-info button{
    font-family:  "Arial Black", Gadget, sans-serif;
    color: white;
    width: 100px;
    margin: 5px;
    padding: 5px;
    border: 2px solid #54a4bb;
    border-radius: 10px;
    background: #10234f;
}

#milionar-potvrzeni-odpovedi, #milionar-konec, #milionar-potvrzeni-napovedy,
#milionar-napoveda-divaci, #milionar-napoveda-pritel{
    text-align: center;
    width: 100%;
    bottom: 10%;
}

.milionar-pozice-absolute{
    position: absolute;
}

.milionar-pozice-relative{
    position: relative;
}

#milionar-napoveda-pritel {
    padding: 5px;
}

#milionar-napoveda-vyber-pritele{
    position: absolute;
    text-align: center;
    width: 100%;
}

#milionar-otazka{
    width: 100%;
    padding-bottom: 3%;
    overflow-y: auto;
    
}

.milionar-vyska-pulka{
    height: 50%;
    position: absolute;
}

#milionar-otazka-zneni{
    width: 90%;
    margin: 10px 5%;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #54a4bb;
    background: #10234f;
    color: white;
    font-size: 12pt;
    font-weight: bold;
}

#milionar-otazka-zneni small{
    font-size: 8pt;
    font-weight: normal;
}

#milionar-odpoved-0, #milionar-odpoved-1, #milionar-odpoved-2, #milionar-odpoved-3{
    width: 90%;
    float: left;
    margin: 10px 5%;
    border-radius: 10px;
    border: 2px solid #54a4bb;
    color: white;
    font-size: 11pt;
}

.milionar-pruhledny{
    background: transparent;
}

.milionar-oznacena-odpoved{
    background: #f4840e;
}

.milionar-spravna-odpoved{
    background: #48c415;
}

.milionar-spravne-oznacena-odpoved{
    animation: milionarSpravneOznacenaOdpoved 2.5s; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: milionarSpravneOznacenaOdpoved 2.5s; /* Chrome and Safari */
}

.milionar-spatne-oznacena-odpoved{
    animation: milionarSpatneOznacenaOdpoved 2.5s; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: milionarSpatneOznacenaOdpoved 2.5s; /* Chrome and Safari */
}

.milionar-odpoved{
    width: 100%;
    border: 1px solid transparent;
    padding: 10px;
}

#milionar-napoveda{
    width: 100%;
    color: white;
    text-align: center;
}

.milionar-napoveda-icon{
    width: 40%;
    border-radius: 50%;
    border: none;
    padding: 0px;
    margin: 1%;
    background: transparent;
}

#milionar-napoveda-divaci table{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}

.milionar-divaci-pismeno{
    width: 10%;
}

.milionar-divaci-graf div{
    padding: 5px 0px;
    background: #10234f;
    border: 1px solid #54a4bb;
    text-align: left;
}

.milionar-divaci-procenta{
    width: 20%;
}

.milionar-konec-problem{
    color: #fc4c4c;
}

.milionar-konec-ulozeno{
    color: #b1e53f;
}

#milionar-konec input{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#milionar-konec div, .center-element{
    margin-left: auto;
    margin-right: auto;
}

#milionar-konec button{
    width: 150px;
    display: inline-block;
}

#milionar-napoveda-pritel button, #milionar-napoveda-divaci button{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}

#milionar-stav{
    width: 100%;
    background: #10234f;
    font-family:  "Arial Black", Gadget, sans-serif;
    font-size: 13pt;
    color: #b27a3f;
    padding: 5px;
}

#milionar-stav table{
    width: 100%;
}

#milionar-stav table td{
    text-align: right;
}

.milionar-castka{
    padding-right: 20px;
}

.milionar-diamant img{
    width: 10px;
    margin: 0px 10px;
}

.milionar-maly-obrazek{
    width: 30px;
}

.milionar-aktualni-otazka{
    background: #f4840e;
    color: black;
}

#milionar-info-neaktualnost{
    color: red;
    margin: 20px 0px;
}

#milionar-menu .btn-link{
    color: white;
}

#milionar-pritel-modal .table td{
    width: 33.3333%;
}

.milionar-pritel-tlacitko{
    width: 100%;
    height: 100px;
}

.milionar-pritel-tlacitko img{
    max-height: 100%;
    max-width: 100%;
}

.milionar-result-showed, .hra-result-showed{
    text-decoration: underline;
    font-weight: bold;
}

#milionar-konec h4{
    color: white;
}

#milionar-skore-tlacitko.hidden{
    display: none;
}

.progress.progress-odpoved-kvizu{
    height: 3px;
}
.progress .progress-bar.progress-odpoved-kvizu-spravna{
    background-color: #a0d68d;
}
.progress .progress-bar.progress-odpoved-kvizu-napoveda{
    background-color: #e7ff07;
}
.progress .progress-bar.progress-odpoved-kvizu-spatna{
    background-color: #ff7a7a;
}

.vysvetlujici-tecka-spravna{
    height: 13px;
    width: 13px;
    background-color: #a0d68d;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
}
.vysvetlujici-tecka-napoveda{
    height: 13px;
    width: 13px;
    background-color: #e7ff07;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
}
.vysvetlujici-tecka-spatna{
    height: 13px;
    width: 13px;
    background-color: #ff7a7a;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
}

@keyframes milionarSpravneOznacenaOdpoved
{
    0%   {background: #48c415;}
    10%  {background: #f4840e;}
    20%  {background: #48c415;}
    30%  {background: #f4840e;}
    40%  {background: #48c415;}
    50%  {background: #f4840e;}
    60%  {background: #48c415;}
    100% {background: #48c415;}
}

@-webkit-keyframes milionarSpravneOznacenaOdpoved /* Safari and Chrome - necessary duplicate */
{
    0%   {background: #48c415;}
    10%  {background: #f4840e;}
    20%  {background: #48c415;}
    30%  {background: #f4840e;}
    40%  {background: #48c415;}
    50%  {background: #f4840e;}
    60%  {background: #48c415;}
    100% {background: #48c415;}
}

@keyframes milionarSpatneOznacenaOdpoved
{
    0%   {background: #48c415;}
    10%  {background: transparent;}
    20%  {background: #48c415;}
    30%  {background: transparent;}
    40%  {background: #48c415;}
    50%  {background: transparent;}
    60%  {background: #48c415;}
    100% {background: #48c415;}
}

@-webkit-keyframes milionarSpatneOznacenaOdpoved /* Safari and Chrome - necessary duplicate */
{
    0%   {background: #48c415;}
    10%  {background: transparent;}
    20%  {background: #48c415;}
    30%  {background: transparent;}
    40%  {background: #48c415;}
    50%  {background: transparent;}
    60%  {background: #48c415;}
    100% {background: #48c415;}
}

@media screen and (min-width: 360px) {
    .milionar-pritel-tlacitko{
        height: 110px;
    }
}
@media screen and (min-width: 415px) {
    .milionar-pritel-tlacitko{
        height: 120px;
    }
    
    #kviz-konec img{
        width: 300px;
    }
}
@media screen and (min-width: 480px) {
    .milionar-leva{
        width: 58%;        
    }

    .milionar-prava{
        width: 42%;
    }
    .milionar-pritel-tlacitko{
        height: 140px;
    }
}
@media screen and (min-width: 520px) {
    .milionar{
        width: 100%;
    }
    .milionar-pritel-tlacitko{
        height: 170px;
    }
    
    .match-result div{
        font-size: 80px;
        line-height: 1.1;
    }

}

@media screen and (min-width: 600px) {
    .milionar-napoveda-icon{
        width: 45%;
    }
    
    .milionar-leva{
        width: 62%;        
    }

    .milionar-prava{
        width: 38%;
    }
    .milionar-pritel-tlacitko{
        height: 200px;
    }
}

@media screen and (min-width: 700px) {
    #milionar-odpoved-0, #milionar-odpoved-1, #milionar-odpoved-2, #milionar-odpoved-3{
        width: 40%;
    }
    .milionar-napoveda-icon{
        width: 29%;
    }
    .milionar-pritel-tlacitko{
        height: 220px;
    }
    
}

@media screen and (min-width: 768px) {
    .milionar-pritel-tlacitko{
        height: 190px;
    }
    .match-result div{
        font-size: 100px;
        line-height: 1.1;
    }
    .left-column-sortable{
        width: 20%;
    }
    .right-column-sortable{
        width: 80%;
    }
}

@media screen and (min-width: 992px) {
    .milionar-prava{
        width: 30%;
    }
    
    .milionar-leva{
        width: 70%;        
    }
    
    .match-result div{
        font-size: 130px;
        line-height: 1.1;
    }
}