html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#navContent h2{
	text-align:center;
	
}		
		
#navContent h2:before{
	content:open-quote;
}				
#navContent h2:after{
	content:close-quote;
}						
		
#navContainer{
margin-bottom:100px;
padding:15px;	
width:100%;
height:auto;
min-height:500px;
position:relative;
overflow:hidden;
float: left;
text-align: center;
border: 1px solid #334253;
background-color:#fff;
}
		
#navContent2{
padding:0;	
width:100%;
height:auto;
min-height:500px;
position:relative;
overflow:hidden;
float: left;
text-align: center;
}		
		
#navContent h1{
	padding: 20px 0 30px;
}		
		
#navContent p{
	font-size: 18px;
	padding: 20px 0;
	}			

.psBg{
	background-image: url("../images/003.jpg");
	background-size:cover;
}

/* PAGINATION ----------------------------------------------------------------------- */
ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
    margin: -4px;
}
ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
    color: black;
    border-bottom: 4px solid #334253;
     
}
ol.progtrckr li.progtrckr-todo {
    color: silver; 
    border-bottom: 4px solid silver;
}
ol.progtrckr li:after {
    content: "\00a0\00a0";
}
ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
    content: "\2713";
    color: white;
    background-color: #334253;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: #E0E2E0;
    font-size: 1.5em;
    bottom: -1.6em;
}		
/************************************************************/
		
#psMapContent{
    margin-left:0;
    padding-left:0;
}
        
#psMapContent {
    width:100%; 
    height:450px;
    frameborder:0;
    /* border: 1px solid #334253; */
}       
		
#navContent{
margin-bottom:100px;
padding:30px;	
/* width:450px; */width:100%;
height:auto;
min-height:400px;
position:relative;
overflow:hidden;
float: left;
text-align: center;
border: 1px solid #334253;
background-color:#fff;
}

#game1{
margin:auto;
/* width:450px; */width:100%;
height:450px;
right:0px;
position:absolute;
text-align: center;
}

#game2{
margin:auto;	
/* width:450px; */width:100%;
height:400px;
right:-800px;
position:absolute;
text-align: center;
} 


.questionText, .questionImage{
	padding: 10px 10px 0;
font-size:18px;
line-height: 25px;
color:#666;
}

.option {
    /* height: 50px; */
    margin: 23px;
    font-size: 15px;
    line-height: 18px;
    color: #FFF;
    padding: 5px;
    border: 2px solid #FFF;
    /* cursor: pointer; */
    background-color: #52657A;
}


.option-active:hover{
	border:#FC0 solid 2px;
	color:#FC0;
	cursor: pointer;
}


.pix{
/* width:185px;
height:242px; */
width:30%;
margin:5px;
float:left;
border: 5px solid white;
/* cursor:pointer; */
margin-top: 20px;
}

.pix-active:hover{
	border:#FC0 solid 5px;
	cursor: pointer;
}

 
.spacer{
height:30px;
}


.feedback1{
width:100%;
padding:5px;
margin-bottom:1px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:16px;
}

.feedback2{
width:100%;
padding:5px;
margin-bottom:1px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:16px;
}

.feedback1Image{
width:100%;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:16px;
}

.feedback2Image{
width:100%;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:16px;
}
 
 
@media screen and (max-width:1000px) {

	#navContent{margin:0 1% 0 1%;	width:98%;}
	#game1{margin:1%;	width:98%;}
	#game2{margin:1%;	width:98%;}
}


.pix{
width:30%;
margin:3px;
float:left;
border: 5px solid white;
cursor:pointer;
margin-top: 20px;
}

.feedback1{
width:100%;
padding:5px;
margin-bottom:1px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:22px;
}

.feedback2{
width:100%;
padding:5px;
margin-bottom:1px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:22px;
}

.feedback1Image{
width:100%;
padding:5px;
margin-bottom:1px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:22px;
}

.feedback2Image{
width:100%;
padding:5px;
margin-bottom:1px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:22px;
}

@media screen and (max-width:460px) {
	
	.option {
		width:80%;
		margin:5% auto;
	}
	
	.feedback2 {
	    bottom: 90px;
	}
	.feedback1 {
		bottom: 90px;
	}
}

#dv-map {
    display:none;
}

/***** Points *****/

.dv-rich-marker {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-size: cover;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 1; 
}

.dv-rich-marker.active:before {
  height: 50px;
  width: 50px;
  -webkit-animation: marker-pulse 2s ease-out 0s infinite normal;
  animation: marker-pulse 2s ease-out 0s infinite normal;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) inset;
  content: '';
  left: 50%;
  margin: -30px 0 0 -25px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  z-index: -1; 
 
 }
 
 /******************* INFOBOX *************/
 /*------------------------------------------------------------------*/
/*---------- CORE STYLE ---------*/
#infobox-points {
    line-height: 1.2;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 50%;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    -webkit-transform: translate(-25%, -175px) !important;
    transform: translate(-50%, -40px) !important;
    border-radius: 6px;
}

#infobox-points:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 90px;
    border-top: 10px solid white;
    border-left: 10px dashed transparent;
    border-right: 10px dashed transparent;
}

.infobox-points-style {
    background-color: #ffffff;
    /* height: 120px; */
}
/*------- CLOSE BUTTON -----------*/
#infobox-points .dv-point-close-btn {
  display: none;
  top: -10px;
  right: -10px;
  z-index: 99999;
  width: 18px;
  height: 18px; }

#infobox-points .dv-point-close-btn:before {
  width: 2px;
  height: 10px;
  top: 4px;
  left: 8px; }

#infobox-points .dv-point-close-btn:after {
  width: 10px;
  height: 2px;
  top: 8px;
  left: 4px; }

/* --------- IMG -------------*/
#infobox-points img {
  max-width: 100%;
  height: auto; }

#infobox-points .dv-img {
  width: 85px;
  text-align: center;
  max-height: 75px;
  vertical-align: middle;
  display: table-cell;
  float: left;
  margin: 0px 0px 0px 5px; }

#infobox-points .dv-img img {
  height: 60px;
  width: 80px; }

/* ---------- TEXT ----------------*/
#infobox-points .dv-containter {
  width: 270px;
  height: 75px; }

#infobox-points .dv-title-ib {
    z-index: 9999999999999999999;
    text-align: center;
    margin: 0px 0px 0px 0px;
    padding: 10px 3px 10px 3px;
    line-height: 1.2em;
}

#infobox-points .dv-title a {
  /*font-weight: 800;*/
  font-size: 13px;
  line-height: 1.2em;
  margin-bottom: 0.167em;
  color: #17191A; }

#infobox-points .dv-title a.title:hover {
  color: #ce6f1e; }

#infobox-points .dv-description {
  float: right;
  width: 173px;
  height: 75px;
  padding: 2px 2px 0px 5px;
  margin: 2px 2px 0px 5px; }

#infobox-points .dv-full-description {
  width: 270px;
  height: 75px;
  text-align: -webkit-center; }
  
 .dv-hidden {
 	display: none;
 }
 
 
 .dv-mrg-fix {
 	margin-bottom:100px;
 }
 
 .dv-tut-center {
 	text-align: center; 	
 }
 
 .selected-wrong {
    border: 10px solid #C96464;
}

.selected-correct {
    border: 10px solid #71C76A;
}

#psMapGame #navContent {
	
	margin-bottom: 40px;
}

@media (max-width: 400px) {
  
  #navContent {
  	min-height: 650px;
  }
  
  #game1 {
  
  	min-height: 600px;
  }
  
  #game2 {
  
  	min-height: 600px;
  }
}