html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
    font-family: 'myFirstFont';
}

#content{
    height:100%;
}

#footer {
    font-size:1.8em;
    text-align:center;
	clear: both;
	width:100%;
	height:170px;
	bottom:0;
	position:fixed;
	z-index:999;
}

#contentHolder
{
    /*position:absolute;
    top:100px;
    bottom:150px;
    width:1000px;
    overflow:hidden;
    position:relative;*/
   
    
}

#pageTitle
{
    padding:1em;
    color:white;
    margin-top:2em;
    font-size:2em;
}



.bidhOption
{
    cursor:pointer;
    display:block;
}

#question, #answerholder
{
    /*display:inline-block;*/
    font-size:2.6em;
    text-align:center;  
    padding:1em 0 1em 0;
    color:#fff; 
    
}



.correctBanner
{
    width:100%;
    font-size:4em;
    color:#36763B;
    text-align:center;
    padding:0.5em;
    
    display:none;
}

.incorrectBanner
{
    width:100%;
    font-size: 4em;
    text-align:center;
    padding:0.5em;
     color:black;
    display:none;
}



.navButtonsHolder{
    
    text-align:center;
    color:white;

}

.navButtons
{
     font-size:1em;
    text-align:center;  
    padding:1em 0 1em 0; 
    cursor:pointer;
    
}

#desktopOptions{
color:white;
}

.answersActive
{
   pointer-events: auto;   
}

.answersDeactive
{
     pointer-events: none;  
     color:#ccc;
}

.navButtons
{
     
    cursor:pointer;
    
}

.navButtons:hover{
    color: black;
}

.bidhOption:hover{
    color: black;
}

.full-screen-answer{
    
}

.tab-screen-answer{
    display:none;
}

#mobileOptions
{
    display:none;   
    width:100%;
}

#biSelected{

    font-size:1.4em;
    padding:0.2em;
    width:90%;
}

/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: black;
}

/* selected link */
a:active {
    color: white;
}

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behavior on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Targets all elements */
[class*='bit-'] {
  float: left;
  padding: 4px;
}

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
  padding-right: 10px;
  float: right;
}

/* Clearfix */
.frame:after {
  content: "";
  display: table;
  clear: both;
}

/* Main Widths */
.bit-1  {width: 100%;}
.bit-2  {width: 50%;}
.bit-3  {width: 33.33%;}
.bit-4  {width: 25%;}
.bit-5  {width: 20%;}
.bit-6  {width: 16.6666666667%;}
.bit-7  {width: 14.2857142857%;}
.bit-8  {width: 12.5%;}
.bit-9  {width: 11.1111111111%;}
.bit-10 {width: 10%;}
.bit-11 {width: 9.09090909091%;}
.bit-12 {width: 8.33%;}

/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {
  /*.bit-1,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9,
  .bit-10,
  .bit-11,
  .bit-12 {
    width: 100%;
  }

  .frame .bit-4:nth-child(2) {
    float: right;
  }

  .frame .bit-4:nth-child(3) {
    clear: both;
    float: left;
  }

  .frame .bit-4:nth-child(4) {
    float: right;
  }*/
#pageTitle
{
    padding:1.3em 0.2em 0;
    color:white;
    margin-top:2em;
    font-size:1.2em;
}
  #question, #answerholder
{
    /*display:inline-block;*/
    font-size:1.2em;
    text-align:center;  
    padding:1em 0 1em 0;
    color:#fff; 
    
}

 #contentHolder
    {
        /*position:absolute;
        top:150px;
        bottom:90px;
        width:100%;
        overflow:hidden;
        background: #ff440b;*/
        width:100%;
        
    }

   #footer {
    font-size:1em;
    height:100px;
    
}
  #desktopOptions
    {
        display:none;   
    }

    #mobileOptions
    {
        width:100%;
        display:inline; 
        margin:0.2em 0;
        padding:0.2em;  
    }
    
}

@media (min-width: 481px) and (max-width: 650px) {

    #contentHolder
    {
        /*position:absolute;
        top:150px;
        bottom:160px;
        width:100%;
        overflow:hidden;
        background: #ff440b;*/
       width:100%;
    }


  #footer {
    font-size:1.2em;
    height:120px;
    /*text-align:center;
	clear: both;
	width:100%;
	height:150px;
	bottom:0;
	position:fixed;
	z-index:999;*/
}
  
}

/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 650px) and (max-width: 780px) {
  /*.bit-4,
  .bit-6,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }

  .bit-1,
  .bit-2,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9,
  .bit-11 {
    width: 100%;
  }*/
  /*#contentHolder
    {
        position:absolute;
        top:150px;
        bottom:110px;
        width:100%;
        overflow:hidden;
        background: #ff440b;
    }*/


  #footer {
    font-size:1.2em;
    height:120px;
    /*text-align:center;
	clear: both;
	width:100%;
	height:150px;
	bottom:0;
	position:fixed;
	z-index:999;*/
}

  
}

/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 780px) and (max-width: 1000px) {
  /*.bit-2,
  .bit-7 {
    width: 100%;
  }*/

  /*.bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }*/

  /*#contentHolder
    {
        position:absolute;
        top:150px;
        bottom:160px;
        width:100%;
        overflow:hidden;
        background: #ff440b;
    }*/

  #footer {
    font-size:1.6em;
    /*text-align:center;
	clear: both;
	width:100%;
	height:150px;
	bottom:0;
	position:fixed;
	z-index:999;*/
}
  
}