/* ==========================================================================
   Base styles
   ========================================================================== */

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    color: #222;
    background-color: #49b9e2;
    font-size: 14px;
    line-height: 1.4;
}

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

div { position: relative; }

/* Clearfix: contain floats */
.clearfix:after { content:""; display:block; clear:both; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

h1, h2, h3 { font-family: "sutro-open-fill"; margin: 0; padding: 0; }
h1 { font-size: 6em; }
h2 { color: #f3bf13; padding-bottom: 6px; font-size: 1.6em; font-weight: 100; }
h3 { color: #44423a; font-size: 1.4em; font-weight: 100; }

ul { margin: 0 0 .8em 0; padding: 0 0 0 1.4em; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*  Reusable Classes            */
.color1 { color: #f3bf13; } /* yellow */
.color1Bk { background-color: #f3bf13; }
.color2 { color: #44423a; }  /* brown */
.color2Bk { background-color: #44423a; }
.color3 { color: #49b9e2; }  /* blue */
.color3Bk { background-color: #49b9e2; }
.white { color: white; }
.whiteBk { background-color: white; }

p, .filson { font-family: "filson-soft"; font-weight: 100; }

p { margin: 0; }

button { 
    display: block; 
    padding: 10px 24px 11px 24px;
    margin: 14px 0 0 0 0;
    background-color: white;
    color: #44423a;
    font-family: "sutro-open-fill";
    font-size: 1.4em;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    letter-spacing: 1px;
    border: none;
}

.pointer { cursor: pointer; }

.fact {
  display: none;
  position: absolute;
  background-color: white;
  color: #44423a;
  padding: 26px 30px 26px 30px;
  -webkit-box-shadow: 7px 7px 5px -4px rgba(0,0,0,0.52);
  -moz-box-shadow: 7px 7px 5px -4px rgba(0,0,0,0.52);
  box-shadow: 7px 7px 5px -4px rgba(0,0,0,0.52);
  font-size: 1em;
  z-index: 500;
}

.f-tr {
  border-radius: 30px 0 30px 30px;
  -moz-border-radius: 30px 0 30px 30px;
  -webkit-border-radius: 30px 0 30px 30px;
}
.f-br {
  border-radius: 30px 30px 0 30px;
  -moz-border-radius: 30px 30px 0 30px;
  -webkit-border-radius: 30px 30px 0 30px;
}
.f-bl {
  border-radius: 30px 30px 30px 0;
  -moz-border-radius: 30px 30px 30px 0;
  -webkit-border-radius: 30px 30px 30px 0;
}
.f-tl {
  border-radius: 0 30px 30px 30px;
  -moz-border-radius: 0 30px 30px 30px;
  -webkit-border-radius: 0 30px 30px 30px;
}

.animHold {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

@keyframes spriteanim {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}


/*  Desktop too small warning   */
.tooSmall { display: none; }


/*  Intro Screens               */
#intro {
    position: absolute;
    width:100%;
    height:100%;
    z-index: 20;
    background-color: black;
    opacity: .7;
}

.iContHold {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #75b6e2 url(../img/intro/iBkgd.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 25;
}

.iScreen1, .iScreen2 { height: 100%; overflow: hidden; }
.iScreen1 > h1, .iScreen2 > h1 { 
    width: 100%; 
    text-align: center; 
    padding-top: 30px;
    z-index: 20;
}
.iScreen1 > h1 > span { 
  display:inline-block; 
  font-size: .6em; 
  margin: 0 10px; 
  font-weight: 600;
}
.iScreen1 > h1 { opacity: 0; }

.iBee {
  width: 147px;
  height: 128px;
  margin: 25px auto 75px;
  background: transparent url('../img/intro/Bee_147x128.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(19) infinite;
}

.iLoad { display: block; margin: 0 auto; width: 120px; padding: 80px 0 0 0; }

.iScreen1Blurb {
    opacity: 0;
    top:7%;
    width: 66%;
    padding: 34px 50px 34px 50px;
    margin: 0 auto;
    font-size: .9em;
    border-radius: 60px;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    z-index: 20;
}
.iScreen1Blurb p { margin-bottom: 1.2em; }
.iScreen1Sub { color: #44423a; font-size: 1.2em; font-weight: 600; display: block; }

.iScreen1Blurb:before {
    content:url(../img/intro/introBlurbTriangle.png);
    position: absolute;
    top: -46px;
    left: 43.2%;
}

.iScreen1Blurb button { margin: 0 auto; }

.iCloud1 { width:300px; position: absolute; top:252px; left: -300px; }
.iCloud2 { width:500px; position: absolute; top:440px; left: -500px; }
.iCloud3 { width:620px; position: absolute; top:210px; right: -640px; }
.iCloud4 { width:420px; position: absolute; top:560px; right: -400px; }

.iScreen2 { display: none; }
.iScreen2 > h1 { padding-bottom: 25px; font-size: 3.6em; }

.iInstHold { margin: 0 auto 30px; width: 72%; }
.iInstLt { float: left; width: 25%; }
.iInstRt { float: right; width: 70%; color: white; }

.iInstAnim1 {
  width: 231px;
  height: 65px;
  background: transparent url('../img/intro/click-instruct_231x65.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(11) infinite;
}

.iInstAnim2 {
  width: 100px;
  height: 100px;
  margin: 0 0 0 54px;
  background: transparent url('../img/intro/bee_100x100.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(19) infinite;
}

#iStartBtn { padding: 10px 60px 10px 60px; }


/*  Arrows                      */
.arrows {
  width: 56px;
  height: 56px;
  cursor: pointer;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  z-index: 15;
  position: fixed;
  top: 45%;
  -webkit-box-shadow: 7px 7px 5px -4px rgba(0,0,0,0.52);
  -moz-box-shadow: 7px 7px 5px -4px rgba(0,0,0,0.52);
  box-shadow: 7px 7px 5px -4px rgba(0,0,0,0.52);
}
#arrowLt { 
  left: 30px; 
  background: white url(../img/intro/arrowLt.png) no-repeat;
  background-position: 40% 50%;
}
#arrowRt { 
  right: 30px; 
  background: white url(../img/intro/arrowRt.png) no-repeat;
  background-position: 60% 50%;
}


/*  Dots                        */
#dots {
  position: fixed;
  z-index: 10;
  bottom: 3.4%;
  width: 100%;
  text-align: center;
}
#dots div {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 2px;
  border: 4px solid white;
  border-radius: 50%;
  cursor: pointer;
}

.dotOn { background-color: #f3bf13; } /* #f3bf13 */
.dotOff { background-color: white; }


/*  Horizontal Slider           */
#container {
    height: 100%;
    position: absolute;
    overflow-y: hidden;
}
#container > div {
    float: left;
    height: 100%;
}

#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10 {
  background-size: 100% 100%; background-repeat: no-repeat;
}

/* SECTION 1 - HIVE */
#s1 { background-image: url(../img/s1/scene1-hive1-bkgd.jpg); }

#s1a1 { /* Queen */
  position: absolute;
  width: 25%;
  top: 24%;
  left: 28%;
}
#s1a1:before { content: ""; display: block; padding-top: 132.888%; }
#s1a1h {
  background: url('../img/s1/QueenBee_450x598.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(19) infinite;
}
#s1a1f { width:400px; top: 66%; left: -270px; }

#s1a2 { /* Crown */
  position: absolute;
  width: 8%;
  top: 11.5%;
  left: 36.5%;
}
#s1a2:before { content: ""; display: block; padding-top: 84.745%; }
#s1a2h {
  background: url('../img/s1/Crown_118x100.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(32) infinite;
}
#s1a2f { width:600px; top: -20%; left: -150%; }

#s1a3 { /* Drone */
  position: absolute;
  width: 21%;
  top: 37%;
  left: 51%;
}
#s1a3:before { content: ""; display: block; padding-top: 130.414%; }
#s1a3h {
  background: url('../img/s1/DroneBee_434x566.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(29) infinite;
}
#s1a3f { width:475px; top: 0%; left: -74%; }




/* SECTION 2 - HIVE */
#s2 { background-image: url(../img/s2/scene1-hive2-bkgd.jpg); }

#s2a1 { /* Worker Bee */
  position: absolute;
  width: 25%;
  top: 28%;
  left: 19%;
}
#s2a1:before { content: ""; display: block; padding-top: 101.867%; }
#s2a1h {
  background: url('../img/s2/workerbee-1_482x491.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 2.5s steps(30) infinite;
}
#s2a1f { width:460px; top: -20%; left: 80%; }

#s2a2 { /* Wonder Woman */
  position: absolute;
  width: 25%;
  top: 36%;
  left: 43%;
}
#s2a2:before { content: ""; display: block; padding-top: 106.578%; }
#s2a2h {
  background: url('../img/s2/workerbee-2_456x486.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(23) infinite;
}
#s2a2f { width:500px; top: 68%; left: -75%; }




/* SECTION 3 - EGYPT */
#s3 { background-image: url(../img/s3/Egypt-Bkgd1.jpg); }

#s3a1 { /* Cave Painting */
  position: absolute;
  width: 10%;
  top: 34%;
  left: 28%;
}
#s3a1:before { content: ""; display: block; padding-top: 72.016%; }
#s3a1h {
  background: url('../img/s3/CavePainting_243x175.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .5s steps(25) infinite;
}
#s3a1f { width:500px; top: -200%; right: -220%; }

#s3a2 { /* Waves */
  position: absolute;
  width: 100%;
  bottom: 0%;
}
#s3a2:before { content: ""; display: block; padding-top: 9.739583%; }
#s3a2h {
  background: url('../img/s3/waves_1920x181_6pxTop.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 2.5s steps(19) infinite;
}

#s3a3 { /* Flower Grow */
  position: absolute;
  width: 10%;
  top: 53%;
  left: 52%;
  cursor: pointer;
}
#s3a3:before { content: ""; display: block; padding-top: 99.415%; }
#s3a3h {
  background: url('../img/s3/flower-grow_171x170.png') no-repeat 0 0%;
  background-size: 100%;
}
.growOn { 
  animation: spriteanim 2.5s steps(29) 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.s3Rock {
  position: absolute;
  width:26%;
  top:40%;
  left:47%;
}
.s3Rock > img { width: 100%; }




/* SECTION 4 - EGYPT */
#s4 { background-image: url(../img/s4/Egypt-Bkgd2.jpg); }

.s4Rock {
  position: absolute;
  width:30%;
  top:35%;
  left:13%;
}
.s4Rock > img { width: 100%; }

#s4a1 { /* Boat */
  position: absolute;
  width: 48%;
  top: 29%;
  left: 33%;
}
#s4a1:before { content: ""; display: block; padding-top: 92.682927%; }
#s4a1h {
  background: url('../img/s4/boat_861x796_2px.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 1.5s steps(23) infinite;
}
#s4a1f { width:500px; top: -16%; left: -25%; }

#s4a2 { /* Beehive */
  position: absolute;
  width: 7%;
  top: 67.3%;
  left: 66%;
}
#s4a2:before { content: ""; display: block; padding-top: 94.696%; }
#s4a2h {
  background: url('../img/s4/Beehive_132x125.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .5s steps(7) infinite;
}
#s4a2f { width:400px; top: -130%; right: -220%; }

#s4a3 { /* Waves */
  position: absolute;
  width: 100%;
  bottom: 0%;
}
#s4a3:before { content: ""; display: block; padding-top: 9.739583%; }
#s4a3h {
  background: url('../img/s3/waves_1920x181_6pxTop.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 2.5s steps(19) infinite;
}

#s4a4 { /* Flower Grow */
  position: absolute;
  width: 10%;
  top: 50%;
  left: 20%;
  cursor: pointer;
}
#s4a4:before { content: ""; display: block; padding-top: 99.415%; }
#s4a4h {
  background: url('../img/s3/flower-grow_171x170.png') no-repeat 0 0%;
  background-size: 100%;
}




/* SECTION 5 - FARM */
#s5 { background-image: url(../img/s5/Farm-Bkgd1.jpg); }

#s5a1 { /* Fruit */
  position: absolute;
  width: 3.5%;
  top: 17%;
  left: 56%;
}
#s5a1:before { content: ""; display: block; padding-top: 103.278%; }
#s5a1h {
  background: url('../img/s5/fruit_61x63.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 1s steps(19) infinite;
}
#s5a1f { width:500px; top: 120%; left: -600%; }

#s5a2 { /* Spray */
  position: absolute;
  width: 6%;
  top: 74%;
  left: 43%;
}
#s5a2:before { content: ""; display: block; padding-top: 114.754%; }
#s5a2h {
  background: url('../img/s5/spray_122x140.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .5s steps(27) infinite;
}
#s5a2f { width:420px; top: -45%; left: -345%; }

#s5a3 { /* Corn */
  position: absolute;
  width: 4%;
  top: 71%;
  left: 71.25%;
}
#s5a3:before { content: ""; display: block; padding-top: 160.975%; }
#s5a3h {
  background: url('../img/s5/corn_82x132.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 1.5s steps(19) infinite;
}
#s5a3f { width:400px; top: -110%; left: -400%; }

#s5a4 { /* Flower Grow */
  position: absolute;
  width: 10%;
  top: 46%;
  left: 47%;
  cursor: pointer;
}
#s5a4:before { content: ""; display: block; padding-top: 99.415%; }
#s5a4h {
  background: url('../img/s3/flower-grow_171x170.png') no-repeat 0 0%;
  background-size: 100%;
}


/* SECTION 6 - FARM */
#s6 { background-image: url(../img/s6/Farm-Bkgd2.jpg); }

#s6a1 { /* Flowers */
  position: absolute;
  width: 26%;
  top: 62%;
  left: 14%;
}
#s6a1:before { content: ""; display: block; padding-top: 52.316%; }
#s6a1h {
  background: url('../img/s6/flowers_518x271.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .5s steps(19) infinite;
}
#s6a1f { width:500px; top: -70%; left: 35%; }

#s6a2 { /* Speed Sign */
  position: absolute;
  width: 8%;
  top: 45%;
  left: 69%;
}
#s6a2:before { content: ""; display: block; padding-top: 320.915033%; }
#s6a2h {
  background: url('../img/s6/SpeedSign_153x489_2pxTop.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 2.5s steps(23) infinite;
}
#s6a2f { width:400px; top: 50%; right: 0%; }

#s6a3 { /* Tractor */
  position: absolute;
  width: 21%;
  top: 34%;
  left: 48%;
}
#s6a3:before { content: ""; display: block; padding-top: 80.25%; }
#s6a3h {
  background: url('../img/s6/Tractor_400x317_4pxtop.png') no-repeat 0 0%;
  background-size: 100%;
}
.tractorOn {
  animation: spriteanim 2.75s steps(19) 1;
}

#s6a4 { /* Flower Grow */
  position: absolute;
  width: 10%;
  top: 43%;
  left: 56%;
  cursor: pointer;
}
#s6a4:before { content: ""; display: block; padding-top: 99.415%; }
#s6a4h {
  background: url('../img/s3/flower-grow_171x170.png') no-repeat 0 0%;
  background-size: 100%;
}


/* SECTION 7 - CITY */
#s7 { background-image: url(../img/s7/City-Bkgd1.jpg); }

#s7a1 { /* Bank */
  position: absolute;
  width: 12%;
  top: 34%;
  left: 26%;
}
#s7a1:before { content: ""; display: block; padding-top: 100%; }
#s7a1h {
  background: url('../img/s7/Bank_227x227.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 2s steps(19) infinite;
}
#s7a1f { width:480px; top: -80%; left: 40%; }

#s7a2 { /* Missing Poster */
  position: absolute;
  width: 8%;
  top: 48%;
  left: 68.5%;
}
#s7a2:before { content: ""; display: block; padding-top: 126.011%; }
#s7a2h {
  background: url('../img/s7/MissingPoster_173x218.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 2.5s steps(29) infinite;
}
#s7a2f { width:480px; top: -26%; left: -325%; }

#s7a3 { /* Flower Pot */
  position: absolute;
  width: 10%;
  top: 67.75%;
  left: 59%;
}
#s7a3:before { content: ""; display: block; padding-top: 129.508%; }
#s7a3h {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url('../img/s7/FlowerPot_244x316.png') no-repeat 0 0%;
  background-size: 100%;
}
.potOn { 
  animation: spriteanim 2.5s steps(23) 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


/* SECTION 8 - CITY */
#s8 { background-image: url(../img/s8/City-Bkgd2.jpg); }

#s8a1 { /* Street Sign */
  position: absolute;
  width: 9.5%;
  top: 25.5%;
  left: 22%;
}
#s8a1:before { content: ""; display: block; padding-top: 392.349727%; }
#s8a1h {
  background: url('../img/s8/AirportSign_183x716_2px.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 1.5s steps(19) infinite;
}
#s8a1f { width:550px; top: -30%; left: 50%; }

#s8a2 { /* Dancing Bees */
  position: absolute;
  width: 22%;
  top: 50%;
  left: 56%;
}
#s8a2:before { content: ""; display: block; padding-top: 97.836%; }
#s8a2h {
  background: url('../img/s8/BeesDancing_416x407.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim 1s steps(19) infinite;
}
#s8a2f { width:550px; top: -65%; right: -50%; }

#s8a3 { /* Flower Pot */
  position: absolute;
  width: 10%;
  top: 67.75%;
  left: 29%;
}
#s8a3:before { content: ""; display: block; padding-top: 129.508%; }
#s8a3h {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url('../img/s7/FlowerPot_244x316.png') no-repeat 0 0%;
  background-size: 100%;
}


/* SECTION 9 - HOUSE */
#s9 { background-image: url(../img/s9/House-Bkgd.jpg); }

#s9a1 { /* Bee */
  position: absolute;
  width: 7%;
  top: 5%;
  left: 48%;
  cursor: pointer;
}
#s9a1:before { content: ""; display: block; padding-top: 87.074%; }
#s9a1h {
  background: url('../img/intro/Bee_147x128.png') no-repeat 0 0%;
  background-size: 100%;
  animation: spriteanim .75s steps(19) infinite;
}

#s9blurb {
  width: 80%;
  top:16%;
  margin: 0 0 0 10%;
  padding: 34px 50px 34px 50px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

#s9a { display: block; float: left; width: 48.5%; }
#s9b { display: block; float: right; width: 48.5%; }

.s9Links img { width: 36px; padding: 0 5px 0 0; }

.s9download {
  display: inline-block;
  background-color: #f3bf13;
  text-align: center;
  padding: 7px 14px 7px 14px;
  margin: 6px 0 0 0;
  font-family: "sutro-open-fill";
  font-size: 1em;
  font-weight: 100;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}

.s9Links > a:link, .s9Links > a:visited { text-decoration: none; color: white; }
a:hover { color: white; }


/* SECTION 10 - CREDITS */
#s10 { background-image: url(../img/s10/end.jpg); background-color: #44423a; }

.s10Logos { width: 24%; display: block; margin: 6% auto 3%; }

.s10Blurb {
  width: 60%;
  padding: 34px 50px 34px 50px;
  margin: 0 auto;
  border-radius: 40px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
}

.s10Links { margin: 44px auto 0; width: 50%; font-size: 1.4em; text-align: center; }

.s10Links > a:link, .s10Links > a:visited { text-decoration: none; color: white; }
.s10Links > a:hover { color: white; }


/* ==========================================================================
   DESKTOP - 
   ========================================================================== */
@media only screen and (min-height: 810px) {

  /*  Desktop too small warning   */
  .tooSmall { display: none; }

  html, body { font-size: 1.08em; }

  ul { margin: 0 0 .8em 0; padding: 0 0 0 .9em; }

  /*  Dots                        */
  #dots { bottom: 3.4%; }

  /*  Intro Screens               */
  .iContHold {
      position: absolute;
      top: calc(50% - 394px);
      left: calc(50% - 700px);
      width: 1400px;
      height: 788px;
      margin: 0 auto;
      background: #75b6e2 url(../img/intro/iBkgd.jpg) no-repeat;
      z-index: 25;
  }

  .iScreen1 > h1, .iScreen2 > h1 { padding-top: 50px; }

  /* Section 9 */

  #s9a1 { /* Bee */ left: 40%; }

  #s9blurb {
    width: 74%;
    top:19%;
    margin: 0 0 0 6%;
  }

  .s9Links { padding-top: 4px; }
  .s9Links img { width: auto; padding: 0 16px 0 0; }

  .s9download { padding: 9px 20px 9px 20px; }

  /* Section 10 */
  .s10Logos { width: 24%; display: block; margin: 10% auto 2.5%; }
  .s10Blurb { width: 44%; }
  .s10Links { margin: 60px auto 0; }

}



/* ==========================================================================
   DESKTOP - 
   ========================================================================== */
@media only screen and (min-height: 850px) {

}



/* ==========================================================================
   DESKTOP - 
   ========================================================================== */
@media only screen and (min-height: 900px) {

}


/* ==========================================================================
   TABLET - iPAD SIZE
   ========================================================================== */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

  /* Show the "Hey, don't look at this" message */
  .tooSmall {
    display: block;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 10000;
    background-color: #49b9e2;
  }

  .tooSmall div {
    color: white;
    width: 60%;
    margin: 0 auto;
    padding: 150px 0 0 0;
    font-size: 2.4em;
    line-height: 1.4em;
  }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  /*  Desktop too small warning   */
  .tooSmall { display: none; }

  .arrows {display: none;}

  .iInstHold { margin: 0 auto 30px; width: 82%; }
  .iInstLt { float: left; width: 25%; }
  .iInstRt { float: right; width: 70%; color: white; }
}



/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}