.activity{
  	margin-top: 2%;
}

/*#content{
	overflow-x: hidden;
}*/

.box{
	margin-bottom:2%;
	background-color: #32343a;
	padding-top:4.5%;
	font-size:1.5em;
	height:6em;
	text-align: center;
	font-family: 'Open sans', sans-serif;
	color: #FFF;
  cursor: pointer;

}

.tick{


  background-image: url("../images/tick.png");
  background-position: center;
  background-repeat: no-repeat;
}



.selectedBox{
background-color: #f4ac42;
color: #32343a;
}

#buttonsHolder
{
    position: relative;

    display: block;

    margin: auto;
    margin-left: 34.6%;
}

#checkBtn
{
    cursor: pointer;
}

#results
{
    margin-top: 2%;
    padding: 1.8% 0 1.8% 0;

    background-color: #cf4858;
}

#checkBtn,
#resetBtn,
#results
{
    font-family: 'Open sans', sans-serif;

    width: 100%;
    margin-top: 2%;
    padding: 1.8% 0 1.8% 0;

    text-align: center;

    color: white;
}

/* ----------- Large Display ----------- */
    @media screen and (max-width: 1920px) and (max-height: 1080px) { 
      /* Styles */
      .box{
        
  padding: 2% 0;
  
/*  height: 25%;
*/  
      }
    }
    /* ----------- Laptop HiDPI screen ----------- */
    @media screen  and (max-height: 900px) { 

      /* Styles */
      .activity{
    margin-top: 0;
}
 .box{
height: 4em;
    padding: 2%;
    width: 26.3%; 
    margin-bottom: 0; 
      }


    }
    /* ----------- Laptop ----------- */
    @media screen and (max-width: 1366px) and (max-height: 768px) {
      /* Styles */ 
      .activity{
    margin-top: 0;
}
      .box{
height: 4em;
    padding: 2%;
    width: 26.3%;  
      }
      .tick {
    background-position: center 70%;
}
    }
    
    /* ----------- Laptop MDPI screen ----------- */
    @media screen and (max-width: 1280px) and (max-height: 800px) { 
      /* Styles */
      .box {
        margin-bottom: 0;
      }
    }
    /* ----------- iPad ----------- */
    @media only screen and (max-device-width: 1024px) and (max-device-height: 768px) {
      /* Styles */
      #buttonsHolder {
        margin-top: 9%;
      }
    }
    /* ----------- iPhone 5 ----------- */
    @media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
      /* Styles */
    }

