@font-face {
    font-family: 'fontawesome-webfont';
    src: url('font-awesome-4.5.0/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('font-awesome-4.5.0/fonts/fontawesome-webfont.svg') format('svg'), url('font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'), url('font-awesome-4.5.0/fonts/FontAwesome.otf') format('opentype');
}

@font-face{
	font-family: 'myFirstFont';
	src: url('fonts/MyriadPro-Bold.eot');
	src: url('fonts/MyriadPro-Bold.eot?#iefix') format("embedded-opentype"),
	url('fonts/MyriadPro-Bold.woff') format('woff'),
	url('fonts/MyriadPro-Bold.ttf') format('truetype'),
	url('fonts/MyriadPro-Bold.svg#myFirstFont') format('svg');

}

.clearBoth {
     clear:both;
}

.curriculum_area_button{

    cursor:pointer;
}

#resourceWrapper{
    font-family: 'myFirstFont';
    width:1000px;
    margin:0 auto 0 auto;
}

#resourceHolder{
    width:100%;
    height:100%;
    
    position:relative;
    top:0;
    margin:0 auto 0 auto;
}

.textOverlay {
    position:absolute;
    top:0;
    left:1em;
    width:90%;
    height:100%;
    line-height:1.25;
}

.textHolder
{
    text-align:center;
    margin-top:6em;
}

.textHolderFullHex{
text-align:center;
    margin-top:3em;
    margin-left:0.2em;

}

.bidhHeader{

    font-size:2.2em;
}

.bidhRule{
    font-style:italic;
     font-size:1.1em;
}

.bidhExamples
{
font-size:1.4em;
}

.bidhExamplesFullHex
{
    
font-size:1.3em;

}

.moveUpAndLeft{
    position:relative;
    top:-6.5em;
    left:-10.5em;
}

.moveUpAndRight{
    position:relative;
    top:-12.5em;
    
}

#windowMobile
{
    display:none;
    
}

#window100
{
    display:none;
    
}

.moveUpAndLeft1000{
    position:relative;
    top:-6.5em;
    left:-12em;
}

.moveUpAndRight1000{
    position:relative;
    top:-12.5em;
    
}

.moveUpAndRight10002nd{
    position:relative;
    top:-19em;
    right:-12em;
}

.moveUp10002nd{
    position:relative;
    top:-26em;
    
}

.bee_img{

    position:relative;
    top:-1em;
    left:3em;
    overflow:visible;
}

.flipIt{
    position:relative;
    top:-1em;
    left:-5em;
    overflow:visible;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.box{
    position:relative;
color:white;
width:100%;
}

.box img{

    width:100%;
    height:auto;
}


/*#closeWrap
{
    cursor:pointer;
    float:left;
    font-size:4em;
    color:white;
     z-index: 1;
}

#close {
    float:right;
}*/

/* 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;
}

/*grid layout for resources*/

*,
*: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: 10px;
}

/* 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;
  }

   #resourceWrapper{
    width:320px;
    margin:0 auto 0 auto;
    }

   #windowMobile{

       position:relative;
    top:100px;
      width:100%;
      display:block;
      margin:0 auto 0 auto;
   }


  #window100
  {
  display:none;
  }

  #resourceHolder{
      display:none;
  }
  .textHolder
    {
        
        margin-top:5em;
    }

    .textHolderFullHex{
    
        margin-top:3em;

    }

    .bidhHeader{

    font-size:2em;
    }

    .bidhRule{
        font-style:italic;
         font-size:1.2em;
    }

    .bidhExamples
    {
    font-size:1.4em;
    }

    .bidhExamplesFullHex
    {
    
    font-size:1.1em;

    }

    #closeWrap
    {
        /*top:200px;
        width:100%;*/
        
    }
}

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

  .bit-1,
  .bit-2,
  
  .bit-5,
  .bit-7,
  .bit-9,
  .bit-11 {
    width: 100%;
  }
  #resourceWrapper{
    width:460px;
    margin:0 auto 0 auto;
    }

  #windowMobile{

       position:relative;
    top:100px;
      width:100%;
      display:block;
      margin:0 auto 0 auto;
   }


  #window100
  {
  display:none;
  }

  #resourceHolder{
      display:none;
  }
  .textHolder
    {
        
        margin-top:7em;
        
    }

    .textHolderFullHex{
    
        margin-top:4.3em;

    }

    .bidhHeader{

    font-size:3em;
    }

    .bidhRule{
        font-style:italic;
         font-size:1.6em;
    }

    .bidhExamples
    {
    font-size:1.8em;
    }

    .bidhExamplesFullHex
    {
    
    font-size:1.8em;

    }
     #closeWrap
    {
       /* top:200px;
        width:100%;*/
        
    }
}

@media (min-width: 650px) and (max-width: 780px) {
 .bit-2,
  .bit-7 {
    width: 50%;
  }
  .bit-3,
  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }
  #resourceWrapper{
    width:650px;
    margin:0 auto 0 auto;
    }

  #window100
  {
      position:relative;
    top:200px;
      width:100%;
      display:block;
      margin:0 auto 0 auto;
  }

  #resourceHolder{
      display:none;
  }

  .moveUpAndLeft1000{
    position:relative;
    top:-6.5em;
    left:-10em;
}

.moveUpAndRight1000{
    position:relative;
    top:-12.5em;
    
}

.moveUpAndRight10002nd{
    position:relative;
    top:-18em;
    right:-10em;
}

.moveUp10002nd{
    position:relative;
    top:-24em;
    
}
 #closeWrap
    {
        /*top:200px;
        width:100%;*/
        
    }
}

/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 780px) and (max-width: 1000px) {
  .bit-2,
  .bit-7 {
    width: 50%;
  }
  .bit-3,
  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }
  #resourceWrapper{
    width:780px;
    margin:0 auto 0 auto;
    }

  #window100
  {
      position:relative;
    top:60px;
      width:100%;
      display:block;
      margin:0 auto 0 auto;
  }

  #resourceHolder{
      display:none;
  }

  .textHolderFullHex{
    
        margin-top:5em;

    }

   #closeWrap
    {
        /*top:200px;
        width:100%;*/
        
    }
}