@import url('https://fonts.googleapis.com/css?family=Carter+One');
body {
    background: url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/bg.jpg);
    background-size: cover;
}
#mapid {
    height: 800px;
    position: relative;
border: 2px inset
#ff821b;
box-shadow: 0px 5px 1px
rgba(80, 32, 10, 0.7), 2px 0px 1px rgba(80, 32, 10, 0.5), -2px 0px 1px
rgba(80, 32, 10, 0.5);
border-radius: 8px;
margin-bottom: 10px;
}
.modal-dialog {
    margin-top: 50vh !important;
    transform: translate(0, -50%) !important;
}

h1 {
    font-family: 'Carter One', cursive;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -3px 3px 0 #517c00, 3px -3px 0 #517c00, -3px 0px 0 #517c00, 0px -3px 0 #517c00, 3px 3px 0 #517c00, 0px 0px 0 #517c00;
    color: #7bd400;
    font-size: 56px;
    letter-spacing: 3px;
}
.container-fluid {
    padding: 20px;
}
.logo {
    margin-bottom: 20px;
}
#currentLevel.bonus {
    font-size: 18px;
}
.modal-dialog {
    margin: 350px auto;
}
.description {
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/intro.png) no-repeat;
    background-size: contain;
    padding: 53px 111px;
    margin-top: 20px;
    text-align: center;
	max-width: 441px;
}
.modal-body {
    padding: 50px 45px;
}
.modal-content {
    background: transparent;
    background-size: contain;
    height: 713px;
    border: 0;
}
.modal-dialog {
    max-width: 748px;
    padding: 0 80px;
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/table-score.png) no-repeat;
    background-size: cover;
    border: 0;
    height: 745px !important;
}
.bel {
    max-width: 250px;
    margin-right: 30px;
}
.btn {
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/btn-left.png) no-repeat left center, url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/btn-right.png) no-repeat right center;
    padding: 0 17px !important;
    border: none !important;
    margin-bottom: 6px !important;
    transition: all 0.5s ease-out;
}
.btn-success:not([disabled]):not(.disabled).active, .btn-success:not([disabled]):not(.disabled):active, .show > .btn-success.dropdown-toggle {
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/btn-left.png) no-repeat left center, url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/btn-right.png) no-repeat right center;
    padding: 0 17px !important;
    border: none !important;
    margin-bottom: 6px !important;
    top: 3px;
    position: relative;
    color: #eee !important;
    box-shadow: none;
}
.btn-success.focus, .btn-success:focus {
    box-shadow: none;
}
.btn-inner {
    display: inline-block;
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/btn-center.png) repeat-x;
    line-height: 38px;
}
.btn.close {
}
.bonus-btn-container {
    margin: auto;
    text-align: center;
}
#currentProvince {
    text-align: center;
    line-height: 1.5em;
    margin-bottom: 0;
}
.inner-info {
    background: url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/level-center.png) repeat-y;
    padding: 20px 40px;
    padding-top: 2px;
	background-size: cover;
}
#currentProvince.namur::after {
    background: url(../namur.png);
    content: "";
    background-size: contain;
    width: 50px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 10px;
}
#currentProvince.liège::after {
    background: url(../liege.png);
    content: "";
    background-size: contain;
    width: 50px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 10px;
}
#currentProvince.hainaut::after {
    background: url(../hainaut.png);
    content: "";
    background-size: contain;
    width: 50px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 10px;
}
#currentProvince.luxembourg::after {
    background: url(../luxembourg.png);
    content: "";
    background-size: contain;
    width: 50px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 10px;
}
.medals-container {
    margin-top: 25px;
}
#currentProvince.brabant {
/*font-size: 1.2em;*/
}
#currentProvince.brabant::after {
    background: url(../bw.png);
    content: "";
    background-size: contain;
    width: 50px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: 10px;
}
#province-container {
    margin-top: 70px;
}
#province-container.no-margin {
    margin-top: 20px;
    padding-left: 20px;
}
.cityFind-container {
    background: url(../img/city-left.png) no-repeat top left, url(../img/city-right.png) no-repeat top right;
    padding: 0 53px;
    height: 73px;
}
.cityFind-container .bg-city {
    background: url(../img/city-center.png) repeat-x;
    height: 73px;
    display: inline-block;
    line-height: 70px;
}
.flex-container {
    display: flex;
    justify-content: space-between;
}
.flex-container div div {
    background: url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/bkg-niveau.png) no-repeat;
    border: 0;
    height: 65px;
    line-height: 65px;
    color: #000;
    font-size: 34px;
    text-align: center;
    width: 78px;
}
h3 {
    font-weight: bold;
    /*border-bottom: 1px solid #54AC3A;*/
    font-family: 'Carter One', cursive;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    color: #7bd400;
}
#gameinfo {
    padding: 20px 0;
    background: url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/level-top.png) no-repeat, url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/level-bottom.png) no-repeat bottom center;
	background-size: contain, contain;
}
#gameinfo .progression {
    background-color: transparent;
    margin: 10px 0;
    padding: 1px;
    display: flex;
}
#gameinfo .progression div {
    flex-grow: 1;
    margin: 2px;
    box-sizing: border-box;
    background: url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/prog-rempli.png) no-repeat;
    height: 61px;
}
#gameinfo .progression div.active {
    background: url(https://www.lavenir.net/extra/content/weblab/jeu-des-communes/img/prog-vide.png) no-repeat;
}
#gameinfo #medals-container div h4 {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
#gameinfo #medals-container div img {
    height: 20px;
}
#gamezone {
    text-align: center;
    margin-top: 20px;
    position: relative;
}
.cityFind-container {
    color: #FFF;
    text-align: center;
    font-size: 2em;
    display: inline-block;
    position: absolute;
    z-index: 5000;
    position: relative;
    margin-top: -39px;
    left: 50%;
    margin-left: -124px;
    position: absolute;
}
.colorDefinition {
    background: #F29400;
    color: #FFFFFF;
    border-color: #54AC3A;
    text-align: center;
}
.size_sm {
    border-radius: 0;
}
#currentLevel, .score {
    font-size: 2em;
    font-weight: bold;
}
button {
    cursor: pointer;
}
.results {
    margin-top: 70px;
    padding: 0 23px;
}
.trophee {
    padding: 0 23px;
}
.continue-container {
    text-align: center;
    margin-top: 40px;
}
.close {
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/close.png) no-repeat !important;
    width: 45px;
    height: 45px;
    position: relative;
    top: -36px;
    right: -36px;
    opacity: 1;
}
.close:focus, .close:hover {
    opacity: 1;
}
.close:active {
    top: -33px !important;
}
@-webkit-keyframes blink {
 from {
 opacity: 0;
 -webkit-transform: scale(0.1) rotate(30deg);
 transform: scale(0.1) rotate(30deg);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 top: 50%;
}
 50% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 70% {
 -webkit-transform: rotate(3deg);
 transform: rotate(3deg);
}
 to {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
 top: 2%;
}
}
 @keyframes blink {
 from {
 opacity: 0;
 -webkit-transform: scale(0.1) rotate(30deg);
 transform: scale(0.1) rotate(30deg);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 top: 50%;
}
 50% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 70% {
 -webkit-transform: rotate(3deg);
 transform: rotate(3deg);
}
 to {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
 top: 2%;
}
}
@-webkit-keyframes blink-mobile {
 from {
 opacity: 0;
 -webkit-transform: scale(0.1) rotate(30deg);
 transform: scale(0.1) rotate(30deg);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 top: 50%;
}
 50% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 70% {
 -webkit-transform: rotate(3deg);
 transform: rotate(3deg);
}
 to {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
 top: 13%;
}
}
 @keyframes blink-mobile {
 from {
 opacity: 0;
 -webkit-transform: scale(0.1) rotate(30deg);
 transform: scale(0.1) rotate(30deg);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 top: 50%;
}
 50% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 70% {
 -webkit-transform: rotate(3deg);
 transform: rotate(3deg);
}
 to {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
 top: 13%;
}
}
.blink {
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.credits {
    text-align: center;
    font-size: 12px;
    color: #313131;
}
.no-wrap {
	flex-wrap: nowrap;
}
.description-col {
	max-width: 441px;
}
@media (min-width: 993px) {
    .text-bonus {
        margin-top: 70px;
    }
}
@media (max-width: 992px) {
.description {
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/woodframe.png) no-repeat;
    background-size: cover;
    padding: 10px;
    box-shadow: 0px 0px 4px 4px hsl(21,64%,19%), 0 0 6px 15px hsl(21,64%,39%), 0px 0px 1px 19px hsl(21,64%,19%);
    color: #fdecd0;
    border-radius: 1px;
    margin-top: 20px;
}
    .share-box {
        text-align: center;
margin-top: 30px;
    }
.modal-dialog {
    max-width: 90%;
    background: url(https://www.lavenir.net/extra/Content/weblab/jeu-des-communes/img/woodframe.png) no-repeat;
    background-size: cover;
    padding: 20px;
    box-shadow: 0px 0px 4px 4px hsl(21,64%,19%), 0 0 6px 15px hsl(21,64%,39%), 0px 0px 1px 19px hsl(21,64%,19%);
    color: #fdecd0;
    border-radius: 1px;
    height: auto !important;
    margin: 20px auto !important;
    transform: none !important;
}
.modal-body {
    padding: 10px;
}
	#gameinfo {
		margin-top: 38px;
	}
	.timer-container h4 {
		display: none;
	}
	#gamezone.active {
		visibility: visible;
		position: fixed;
	}
	.title {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100%;
}
.title h1 {
    font-size: 32px;
}
#gamezone {
    z-index: 1000;
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: inherit;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: block;
	visibility: hidden;
}
#gamezone.actif {
    display: block;
}
div#s_timer {
    position: fixed;
    bottom: 0;
    border: none;
    left: 0;
	z-index: 2000;
	visibility: visible;
}
.credits {
    margin-top: 30px;
}
	.cityFind-container {
		/*margin-left: 0;*/
		font-size: 1.5em;
        margin-top: -73px;
	}
    
	#province-container {
	margin-top: 10px;
}
	.modal-content {
		height: auto;
	}
	.results {
		margin-top: 0;
	}
	.modal-open div#s_timer {
		visibility: hidden;
	}
	.modal-body center {
		margin-top: 10px !important;
	}
	.cityFind-container h4 {
	font-size: 1rem;
	}
    .cityFind-container .bg-city {
	line-height: 68px;
}
	img {
		max-width: 100% !important;
	}
	.blink {
    -webkit-animation-name: blink-mobile;
    animation-name: blink-mobile;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
}
@media (min-width: 992px) and (max-width: 1195px) {
	#gamezone {
		max-width: 560px;
	}
}
@media (min-width: 1195px) and (max-width: 1695px) {
	#gamezone {
		max-width: 745px;
	}
}