/*.end-game-confirm,
.my-modal {
    font-size: 1.5em;
    text-align: center
}*/

.dim,
.lyrics {
    bottom: 0;
    right: 0
}

.dim {
    z-index: 10;
    position: absolute;
    left: 0;
    margin-left: -1500px;
    margin-right: -1500px;
    top: 0;
    background-color: #000;
    opacity: .6
}

.end-game-confirm {
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #fff;
    width: 200px;
    height: 130px;
    z-index: 999;
    padding: 10px;
    border-radius: 6px
}

.action-game-ended,
.my-modal {
    z-index: 999;
    width: 90%;
    position: absolute;
    border-radius: 20px
}

.end-game-confirm button {
    margin-top: 10px
}

.my-modal {
    left: 0;
    right: 0;
    margin: -10px auto;
    height: auto;
    top:50%;
    transform:translateY(-50%);
    background-color: #fff;
    padding: 70px;
    text-align: center;
}

.my-modal p {
    padding-bottom: 20px
}

.action-game-ended {
    background: #fff;
    left: 50%;
    margin-left: -45%;
    top: 20px;
    padding: 0 40px 40px
}

.action-audio-backround,
.game-row .media-view {
    background-size: cover;
    background-position: center center
}

.action-game-ended img {
    width: 100%;
    margin-bottom: 20px
}

.action-audio-backround {
    position: absolute;
    width: 100%;
    height: 100%
}

.lyrics {
    font-size: 3em;
    line-height: 1.2;
    color: #fff;
    position: absolute;
    padding: 50px;
    left: 0;
    text-shadow: 1px 1px 0 #000
}

.action-images-next {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.game-row {
    position: relative;
    /*height: 100%;*/
    min-height:100%;
    background-size: cover;
    background-position: top;
    
    /* vertical center */
    display: flex;
    flex-direction: column;
    justify-content: center;
	/*left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);*/
}

/*
.game-row .media-view {
    height: 45%;
}
*/

.game-row .media-view .plain-question-box {
    /*margin-top: 10px;
	background: rgba(0, 0, 0, .7);
    font-size: 2em;
    border: 2px solid #fff;
    text-shadow: 1px 1px 0 #000
    color: #fff;
	*/
	border-radius:20px;
    background:#fff;
    text-align: center;
    padding: 20px;
    color:#00AEFA;
    margin:0;
}

.icon-next {
    background-image: url(/img/icon-next.png);
    background-image: url(/img/icon-next.svg);
    background-repeat: no-repeat;
    background-size: 9px;
    background-position: right 20px center;
    padding-right: 40px;
}

.game-row .media-view .media-controls {
    z-index: 555;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    /*width: 80%;*/
    color: #fff;
    padding-bottom: 10px
}

.game-row .media-view .media-controls h3 {
    text-shadow: 1px 1px 1px #000
}

.game-row .media-view .caption {
    padding: 10px;
    color: #fff;
    text-shadow: 0 1px 1px #000;
    position: absolute
}
/*
.game-row .media-view .media-controls .progress {
    margin: 0 20px
}*/

.game-row .media-view .media-controls .progress .marker {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, .8);
    position: absolute
}

.question-index {
  /*position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  */
  font-size:1.7rem;  

  color:#fff;
  margin-top:auto;
  margin-bottom:20px;
  margin-left:auto;
  margin-right:auto;
  letter-spacing:0.1rem;
}

.game-row .media-view .caption {
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3)
}

/*
.game-row .question-view {
    height: 55%
}*/

#gamename {
	color:#fff;
	text-align:center;
	font-size:1rem;
	margin-top:0;
	padding-top:15px;
}

.game-row .question-view .answers-box button,
.game-row .question-view .btn-score {
    font-size: inherit;
    border-radius:30px;
}

.game-row .question-view .btn-score {
    margin:0 auto;
    width:90%;
}

.game-row .question-view button {
    white-space: normal;
    margin: 1rem 0 0;
    border:.25rem solid transparent;
}

.game-row .question-view .question-box {
    float: left;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    font-weight: bold;
    /*margin: 20px 0;*/
    text-align: center;
    margin:0;
}

.game-row .question-view .answers-box {
    float: left;
    margin: 0 auto 0;
    /*padding-bottom: 15px;*/
    text-align: center;
    width: 100%
}

.game-row .question-view .answers-box .btn[disabled],
.game-row .question-view .answers-box .disabled {
    opacity: 1
}

.game-row .question-view .answers-box .btn-default {
    background-color:#fff;
    color:#505050;
}
/*
.game-row .question-view .scores {
    padding-bottom: 15px
}
*/
.btnbg {
  background: #FEF9F8;
  padding: 40px 0;
  margin-top: -60px;
  border-radius: 20px;
}

.game-row .question-view .scores h1 {
    text-align: center
}

.game-row .question-view .scores button {
    margin-bottom: 10px
}

/*
.game-row .question-view .scores img {
    width: 100%;
    padding: 20px 40px
}*/

.game-row .question-view .scores .alert {
    text-align: center
}

.game-row .question-view .scores .alert h3 {
    margin-top: 0
}

.browsehappy {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

body,
html {
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-size:1.1em;
}

body .navbar,
html .navbar {
    margin-bottom: 0
}

.header {
    border-bottom: 1px solid #e5e5e5;
    font-weight: 700;
    font-size: 110%;
    flex:1;
}

.header a {
    cursor: default
}

.header .navbar-nav {
    margin: 0
}

.header .navbar-nav a {
    cursor: pointer
}

.header .navbar-nav .back {
    color: #333
}

.header .navbar-nav .back:hover {
    color: #000
}
.btn-next:hover, .btn-replay:hover {
  color:#fff !important;
}
.btn-next.ng-hide {
  visibility: hidden;
  display: initial !important;
}

.header .navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto
}

.header .navbar-collapse.collapse {
    display: block!important
}

.header .navbar-nav,
.header .navbar-nav>li {
    float: left!important
}

.b
.header .navbar-nav.navbar-right:last-child {
    margin-right: -15px!important
}

.header .navbar-right {
    float: right!important
}

.container {
    display: block;
    position: relative;
    /*height: calc(100% - 53px);*/
    padding: 0;
    height: 100%;
    width: 100%;
}

.container #ng-view {
    height: 100%
}

.container-narrow>hr {
    margin: 30px 0
}

.game-entry {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 6px
}

.game-entry:after {
    content: "";
    height: 20px
}

.game-entry span {
    display: block;
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    bottom: 0;
    padding: 30px 5px;
    line-height: 25px;
    text-align: center;
    font-size: 1.7em;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px
}

@media screen and (min-width:768px) {
    .footer,
    .header,
    .marketing {
        padding-left: 0;
        padding-right: 0
    }
    .header .navbar-nav {
        margin: 0 -15px
    }
    .header .navbar-nav a {
        cursor: pointer
    }
    .game-entry {
        height: 225px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 6px
    }
    /*.game-row,
    .game-row .media-view,
    .game-row .question-view {
        height: 100%
    }*/
    .game-entry span {
        display: block;
        position: absolute;
        bottom: 10px;
        top: 150px;
        left: 15px;
        right: 15px;
        padding: 13px 10px;
        text-align: center;
        font-size: 1.2em;
        background: rgba(0, 0, 0, .7);
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }
    .my-modal {
        width: 600px
    }
    .game-row .media-view .caption {
        padding: 20px
    }
    /*
    .game-row .media-view .question-index {
        bottom: 60px
    }*/
    .action-game-ended {
        position: absolute;
        background: #fff;
        width: 70%;
        left: 50%;
        top: 20px;
        border-radius: 6px;
        margin-left: -30%
    }
}

.btn-next, .btn-replay {
	background-color:#2BB0F3;
	color:#fff;
	text-transform: none !important;
}
.media-view, .question-view {
	max-width: 600px;
	margin: 0 auto;
	width:100%;
}
.question-view {
  flex:1;
}
.alert-warning {
    color: #2D9FD7;
    background-color: #fff;
}
.guide, .resultsbox, .hint {
    background: #FEF9F8;
    padding: 20px;
    border-radius: 20px;
}
.resultsbox {
    margin: 0 auto;
    margin-top:1rem;
    white-space: nowrap;
}
.resultsheader {
	margin: -20px;
    color: #fff !important;
    padding: 60px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background-color: #4098E9;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#46abf4+1,3b89db+100 */
	background: #46abf4; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzQ2YWJmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYjg5ZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #46abf4 1%, #3b89db 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#46abf4), color-stop(100%,#3b89db)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, #46abf4 1%,#3b89db 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, #46abf4 1%,#3b89db 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, #46abf4 1%,#3b89db 100%); /* IE10 preview */
	background: linear-gradient(to bottom, #46abf4 1%,#3b89db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46abf4', endColorstr='#3b89db',GradientType=0 ); /* IE6-8 */
}
.resultsbox .trophyimg {
    width: 33%;
    max-width: 150px;
    float: left;
    margin-right: 10%;
    margin-bottom: 10%;
    margin-top: 10%;
    margin-left: 5%;
}
.results {
	text-align: left;
	clear:both;
	color:#505050;
	white-space: normal;
}
.alert {
	border:0;
}
.lbl-oikein {
    background-image: url(/foramen/assets/img/icon-oikein.svg);
    background-repeat: no-repeat;
    padding-left: 35px;
    background-size: 27px;
}
p {
	font-size:1rem;
}
.progress-bar, h2, .h2 {
	font-size:inherit;
}
.quit {
	background-color: #F2F9F9;
	position: absolute;
    top: 0;
    left: 20px;
    bottom: unset;
    right: unset;
    background-color: #F1F9F9;
    padding: 8px 20px;
    margin-top:5px;
    margin-left:5px;
    color:#505050;
    font-size:1rem;
}
@media (max-width: 600px) {
	.btn, .btn-large {
	    padding: 10px 17px;
	}
	.quit span {
	    display: none;
	}
}

.btn {
   border-radius: 25px;
   font-size: 1rem;
   padding: 10px 30px;
}
.header {
	font-size:inherit;
	border:0;
	/*height:60px;*/
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,3f3d35+100&0+0,1+100 */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/*
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjNkMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(63,61,53,1) 100%); /* FF3.6-15 */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(63,61,53,1))); /* Chrome4-9,Safari4-5 */
	/*background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(63,61,53,1) 100%); /* Chrome10-25,Safari5.1-6 */
	/*background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(63,61,53,1) 100%); /* Opera 11.10-11.50 */
	/*background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(63,61,53,1) 100%); /* IE10 preview */
	/*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(63,61,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#3f3d35',GradientType=0 ); /* IE6-8 */
}
body {
	font-family: museo-sans-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.my-modal h3 {
	color:#46ADF5;
    margin-bottom: 2rem;
    margin-top:0;
    text-align:center;
}
.progress-bar {
    height: 40px;
    margin-top: -17px;
    border-radius:20px;
}
.progress {
	overflow:visible;
	height:7px;
}

.btn-danger {
  background-color: #fff !important;
  color: #F44336 !important;
  border: .25rem solid #F44336 !important;
  background-image: url(/foramen/assets/img/icon-vaarin.svg);
  background-repeat: no-repeat;
  background-size: 27px;
  background-position-x: 97%;
  background-position-y: 50%;
  padding-left: 1rem;
}
.btn-success {
  background-color: #fff !important;
  color: #43A047 !important;
  border: .25rem solid #43A047 !important;
  background-image: url(/foramen/assets/img/icon-oikein.svg);
  background-repeat: no-repeat;
  background-size: 27px;
  background-position-x: 97%;
  background-position-y: 50%;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
 cursor: unset;
}

.btn-primary {
  background-color:#2BB0F3;
}

.sel {
  color:#00AEFA
}