.activity{
  	margin-top: 2%;
}

/*#content{
	overflow-x: hidden;
}*/

.box{
	margin-bottom:2%;
	background-color: #f4ac42;
	padding-top:4.5%;
	font-size:1.5em;
	height:6em;
	text-align: center;
	font-family: 'Open sans', sans-serif;
	color: #32343a;

}


button{
	margin:2% 0 1% 0;
  height: 50px;
	width:50px;

	font-size:20px;
	font-weight: bold;
	border:1px solid #f4ac42;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px;
}

button:hover{
	color:#32343a;
}

button.positive{ 
background-image: url('../images/activity17/thumb-up.svg'); 
  background-size: 33px;
    background-position: center 3px;

}
button.negative{
background-image: url('../images/activity17/thumb-down.svg'); 
  background-size: 33px;
  background-position: center 13px;

}
button.neutral{
background-image: url('../images/activity17/thumb-side.svg'); 
  background-position: center 3px;

  

}
#next {
  width: 30.3%;
  margin: auto;
  position: relative;
  display: block;
}
.positiveColour{
	
background-color: #16a79d;
}

.negativeColour{
background-color: #cf4858;
}
.neutralColour{
background-color: #7b808e;
}

ul{
	text-align: center;
	list-style-type: none;
}

#selectableStatements{
	font-family: 'Open sans', sans-serif;
	
}

#selectableStatements.activityComplete{
  background: transparent;
  font-size: 2em;
  color: #16a79d;
  border: none;
}

.statement
{
	padding:2% 0 2% 0;
   	background-color: #f4ac42;
    color:#32343a;
   	border-bottom: 1px dashed #16a79d;

}
/* ----------- 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-width: 1440px) and (max-height: 900px) { 

      /* Styles */

    }
    /* ----------- Laptop ----------- */
    @media screen and (max-width: 1366px) and (max-height: 768px) {
      /* Styles */ 
      .box{
      	
  padding: 2% 0;
  
  height: 25%;
  
      }
    }
    
    /* ----------- Laptop MDPI screen ----------- */
    @media screen and (max-width: 1280px) and (max-height: 800px) { 
      /* Styles */
    }
    /* ----------- iPad ----------- */
    @media only screen and (max-device-width: 1024px) and (max-device-height: 768px) {
      /* Styles */
    }
    /* ----------- iPhone 5 ----------- */
    @media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
      /* Styles */
    }

