@charset 'utf-8';

button{min-width: 30px !important; }

/*sections*/

.screen{
	display: none;
}

.screen button{
	margin-top: 1%;
}
header {margin: 0px 0px 20px 0px !important;}

.bgimage {

background-image: url('../../images/hotSemiAridGrasslandEcosystemLabelling/semi-arid-landscape-08version4.png');
background-size: contain;
background-repeat: no-repeat;
}

.bgimage-inside {
padding-top: 52%; /* this is actually (426/1140)*100 */
}

.bgimage2 {

background-image: url('../../images/hotSemiAridGrasslandEcosystemLabelling/semi-arid-landscape-10-screen2-version1.png');
background-size: contain;
background-repeat: no-repeat;
}
.bgimage-inside2 {
padding-top: 42%; /* this is actually (426/1140)*100 */
}
#ecosys {width: 700px;}

#holder {
  position: relative;
  width: 1160px;
  margin:0 auto;
}

.dropZone {

  background: #fff;
  /*background: rgba(200, 54, 54, 0.8); */
  width: 193px;
  height: 50px;
  position: absolute;
  /*top: 0;*/
  /*left: 0;*/
  -moz-border-radius:10px;  /* for Firefox */
  -webkit-border-radius:10px; /* for Webkit-Browsers */
  border-radius:10px; /* regular */
}

    #statementStack {
    text-align: center;
}

.draggable {
  background-color: #3B1D12;
    /*background: rgba(200, 54, 54, 0.8); */
    margin: 0.1rem 0.1rem 0 0.1rem;
    padding: 0.5rem;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;

    display: inline-block;
    padding: 0.9rem;
    cursor: pointer;
    text-align: center;
    height: 15px;
    width: 140px;
    border-radius: 10px;
    border: 1px dotted #fff;
    z-index: 2;
}

.dropZone .draggable {
  background: #fff;
  color: #3B1D12;
  font-size: 0.9rem;
  font-family: Arial, sans-serif;
  font-weight: bold;

}

#checkCorrect {
  font-weight: bold;
  margin-top: 2px;
  padding: 5px;
  border: 1px dashed #674172;
  width: 100%;
  text-align: left;
  color: #674172 !important;

}

#checkCorrect p { color: #674172 !important;}

.key {
    background: #fff;
    width:40px;
    height: 40px;
    border:3px solid black;
    transition: background-color 0.25s ease;
    float:left;


  
}

.colorbox{float:left;}

.span {float:right;}

 

#checkCorrectColor {
  font-weight: bold;
  margin-top: 2px;
  padding: 10px;
  border: 1px dashed #674172;
  width: 100%;
  text-align: left;
  color: #674172 !important;

}

#checkCorrectColor p { color: #674172 !important;}








@media print {
  

/*  header {display: none;}*/
/*  #footer {display: none;}*/
	.btn {display: none;}


.container {
    width: 100%;
}

#menu{display: none;}
	}



  /*@media (max-width:700px){

  #holder{width: 960px}

  .dropZone{
    background:red;
    width:80px;
    height:80px;
  }
  
  .dropZone:nth-child(0){
 top: 30px;left:395px
}
.dropZone:nth-child(1){
  top: 170px;left:395px
}
.dropZone:nth-child(2){
  top: 390px;left:30px
}
.dropZone:nth-child(3){
  top: 340px;left:260px
}

.dropZone:nth-child(4){
  top: 340px;left:570px
}

.dropZone:nth-child(5){
  top: 340px;left:980px
}

.dropZone:nth-child(6){
  top: 460px;left:180px
}

.dropZone:nth-child(7){
  top: 460px;left:640px
}

.dropZone:nth-child(8){
  top: 530px;left:180px
}
  
}*/

/*print
*/

  /* ----------- Large Display ----------- */

@media screen and (max-width: 1920px) and (max-height: 1080px) {
/* Styles */
}

/* ----------- Laptop HiDPI screen ----------- */

@media screen and (max-width: 1440px) and (max-height: 900px) {
/* Styles */
}

/* ----------- Laptop ----------- */

@media screen and (max-width: 1366px) and (max-height: 768px) {
/* Styles */


/* ----------- Laptop MDPI screen ----------- */
}
@media screen and (max-width: 1280px) and (max-height: 800px) {
/* Styles */

/* ----------- iPad ----------- */
/* ----------- iPad Landscape----------- */

}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

h1 {
    font-size: 1.5em !important;
margin: 8px 0px 5px 0px !important;
  }
  
#checkCorrect p { color: #674172 !important; font-size: 12px;}

.bgimage-inside {
padding-top: 52%;  /*this is actually (426/1140)*100 */

}

  #holder {width: 960px !important; margin: 2px auto 0px auto !important; }
    
.draggable .dropZone{
font-size: 0.8rem !important;
}
.draggable {width: 154px !important;padding: 0.8rem 0.4rem 0.8rem 0.4rem !important;}

  #holder {width: 960px !important; margin: 2px auto 0px auto !important; }
    
      .dropZone {
font-size: 0.8rem;
        width:172px !important;
        height:46px;
      }
   

    .dropZone:nth-child(1) {
     
        top: 10px !important; 
        left:300px !important;
    }
    
    .dropZone:nth-child(2){
        top: 130px !important;
        left: 300px!important;
        
    }
    
    .dropZone:nth-child(3){
         top: 315px !important;
        left: 35px !important;
     
    }
    
    .dropZone:nth-child(4){
       top: 270px !important;
        left: 210px !important;
       
    }
    
    .dropZone:nth-child(5){
         top: 270px !important;
        left: 440px !important;
    }
    
    .dropZone:nth-child(6){
           top: 270px !important;
        left: 780px !important;
    }
    
    .dropZone:nth-child(7){
       top: 364px !important;
        left: 170px !important;
       
    }
    
    .dropZone:nth-child(8){
        top: 368px !important;
        left: 530px !important;
      
    }
    
    .dropZone:nth-child(9){
      top: 444px !important;
        left: 170px  !important;
        
    }
    
    #tablet-key {
        display: none;
    }
    
     #desktop-key {
        display: block;
    }




}

/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
/* Styles */
}