* {box-sizing:border-box;}
body { background-color:#fff; font-family: 'hind_vadodara';}
h1,h2,h3,h4 {font-family: 'nunitoregular';}
h2 {font-size: 24px;}
label {cursor:pointer; font-weight:normal;}
a {cursor:pointer;}
a:hover {text-decoration:none;}
#stage ,.mapset {width:1280px;height:720px;margin:0 auto; display:block; overflow:hidden; background-color:#fff;}
#stage{border:solid 1px #eee; border-radius:12px; position:relative;margin-top:10px;}

#progress_bar {position:absolute;display:block;top:0;left:0; width:40%;z-index:999; background-color:#fff; height: 60px;} 
#progress_bar ul {position:absolute; top:0;left:0;margin: 23px;padding: 0 0 5px 0; border-bottom:solid 1px #ccc;}
#progress_bar li {display:block; float:left; border:solid 2px #666; border-radius:8px; height: 15px;width: 15px;margin: 5px; }
#progress_bar li.current {border-color:#337ab7; background-color:#eee;}
#progress_bar li.correct { background-color:#5cb85c;}
#progress_bar li.wrong { background-color:#d9534f;}
#progress_bar li:first-child{width:auto; border:none; margin:0;}
#controls {position:absolute; bottom:0; right:62%; z-index:999;} 
#controls td {padding:0 2px;} 
#controls a {font-size:20px; border-radius:20px; padding:4px 10px; cursor: pointer; }
#controls a.fas {font-size:35px;}

.markerscomment {border:1px solid #e3e3e3; background-color:#f5f5f5;border-radius:6px; padding:24px; display:none;}
.markerscomment.correct { border-color:#4cae4c;}
.markerscomment.wrong {border-color:#d43f3a;}

.mapset {position:absolute; top:0;left:0; display:none;}
.intro {width:1280px;height:720px;} 
.well {cursor:pointer;}
.well:hover,
.well:hover a,
.well a:hover,
.well.selected{background-color:#337ab7; color:#fff;}
.well.selectedwrong{background-color:#ffd1d1; color:#d9534f; border-color:#d43f3a;}
.well.selectedwrong:hover{background-color:#ffd1d1; color:#ccc; border-color:#d43f3a;}

.landing {background-image:url(../img/landing-bg.png); background-position:bottom right; background-repeat:no-repeat; background-size:cover; font-size:1.5em; }
.landing .header { padding:30px; background-color:#000;}
.landing .header h1{ color:#fff;}
.landing .content { padding:30px; background-color:transparent; }
.landing .content p{text-shadow: 2px 2px 20px #fff;}

.left {border-right:solid 1px #ccc; width:40%; float:left; display:block; position:relative; padding:60px 20px 20px 20px; overflow-y: auto; max-height:100%; min-height:100%;}
.right {width:60%; float:left; display:block; position:relative; padding:0; min-height:100%;}

.mapbaselayer, 
.mapsetlayer { background-size:contain;position:absolute; display:block; background-repeat:no-repeat; top:0; left:0;right:0;bottom:0; }

.interactivemap {position:absolute; top:0;left:0;right:0; bottom:0; z-index:1000;background-color:#fff;display:none; }
.interactivemap .maplayer  {display:none;}

.overlay {position:absolute; top:0;left:0;right:0; bottom:0; z-index:3000;background-color:rgba(0,0,0,0.4); }
.overlay a.closex {position:absolute;top:10px; right:10px; border-radius:15px; background-color:#fff;}
.maphint,
.tutorial {background-color:#000; border-radius:10px;margin:10px;overflow:visible;position:absolute; top:30px; left:30px; padding:30px; color:#fff;z-index:3001;max-width:60%;}

.arrow{width: 0; height: 0;  border-style:solid; border-width:10px; position:absolute;}
.arrow.topright{top:-9px;right:20px; border-color: #000 transparent #000 transparent; border-top:none;}
.arrow.topleft{top:-9px;left:20px;border-color:#000 transparent #000 transparent; border-top:none;}
.arrow.bottomright {bottom:-9px;right:20px;border-color:#000 transparent #000 transparent; border-bottom:none;}
.arrow.bottomleft {bottom:-9px;left:20px;border-color:#000 transparent #000 transparent; border-bottom:none;}
.arrow.righttop {right:-9px;top:20px;border-color: transparent #000 transparent #000 ; border-right:none;}
.arrow.rightbottom{right:-9px;bottom:20px;border-color:transparent #000 transparent #000; border-right:none;}
.arrow.lefttop {left:-9px;top:20px;border-color: transparent #000 transparent #000 ; border-left:none;}
.arrow.leftbottom {left:-9px;bottom:20px;border-color: transparent #000 transparent  #000; border-left:none;}



.mapcontrols {position:absolute;display:block;top:0;right:0; width:100%;z-index:999; background-color:#fff; height: 60px;} 
.mapcontrols ul {position:absolute; top:0;right:0;margin: 23px;padding: 0 0 5px 0; }
.mapcontrols li{display:block; float:left; height: 25px;width: 25px;margin: 5px 10px;cursor:pointer }
.mapcontrols li.toggle{border:solid 2px #666; border-radius:15px;}
.mapcontrols li .fas {font-size:25px;}
.mapcontrols .tooltip-inner {font-size:16px; padding:10px;}

.summary .left h2 {font-size:2em;text-align:center;}
.summary .left p {margin-top:30px;}
.summary .left p,
.summary .left li{font-size:1.3em;}
.summary .right .well {width:90%; margin:10px 5%;}
.summary .right .well:hover{background-color:#eee; border-color:#5cb85c;}
.summary .right .well a {width: 60%;display: inline-block;margin: auto 5%;white-space: pre-wrap; font-weight:bold; padding:20px; background-color:#e8fce8;color:#000;border-radius: 8px;border: solid 4px #5cb85c;}
.summary .right .well a:hover {background-color:#5cb85c}
.summary .right .well img {width:30%;}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    #stage {}
     
}

@media only screen and (max-width: 768px) and (orientation: portriat) {
    #stage {}
     
}