body  {
font-family: "Open Sans", sans-serif;
background: rgb(24, 86, 128);
}



#toparea  {
background-color: rgba(250, 250, 250, 1);
}


#toparea #mainlogo  {
float: left;
display: block;
width: 230px;
padding: 10px 0 0 10px;
}

#toparea #mainlogo img {
position: relative;
z-index: 5;
width: 100%;
}

#toparea #teammemberdiv {
display: block;

width: 300px;
}

#toparea #teammember {
border: solid;
padding: 10px;

display: block;

}




#homeabout {
float: left;
margin: 58px 0 0 0;
}

#homeabout li  {
float: left;
margin: 0 20px;
list-style: none;
}

#homeabout li a  {
text-decoration: none;
}

/*************

Top mini "Navigation" Bar

*************/


#topnav ul li {
display: block;
padding: 10px 0;
}

#topnav ul #gsa img {
width: 45px;
}

#topnav #gsa  {
padding: 0;
margin: 0 0 0 34px;
}

#topnav ul	{
float: right;
padding: 0;
margin: 30px 6.6716% 18px 0;
}

#topnav li  {
font-weight: 600;
font-size: 0.875rem;
float: left;
margin: 0 8px;
list-style: none;
}

#topnav #phone  {
margin: 0 15px 0 8px;
}

/*************

Main Navigation Bar

*************/

nav {
text-align: center;
position: relative;
clear: right;
background: rgb(155, 184, 212);
background: -webkit-linear-gradient(top, rgba(150, 169, 187, 1) 10%,
rgba(150, 169, 187, 1) 30%, rgba(104, 122, 139, 1) 90%,
rgba(97, 113, 129, 1) 100%);
background: linear-gradient(to bottom, rgba(150, 169, 187, 1) 10%,
rgba(150, 169, 187, 1) 30%, rgba(104, 122, 139, 1) 90%,
rgba(97, 113, 129, 1) 100%);
width: 100%;
height: 58px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
z-index: 4;
}

nav > ul {
margin: 0;
padding: 0 0 0 220px;
}

nav ul li {
float: left;
position: relative;
display: block;
margin: 0 5px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}

nav li a  {
text-decoration: none;
padding: 5px;
margin: 15px 5px 14px;
display: block;
color: black;
}

nav ul li a:hover {
background: rgba(155, 184, 230, 1);
background: -webkit-linear-gradient(bottom, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
background: linear-gradient(to top, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2);
}

#prodevlink, #indeslink	{
padding: 5px;
margin: 5px;
}

nav ul li:nth-child(6) a:first-letter {
text-transform: none;
}

nav ul li:nth-child(4) li:first-child a:first-letter {
text-transform: none;
}

/*************

Submenu Area

*************/



nav ul li ul {
position: absolute;
top: 58px;
left: -5px;
background: rgb(150, 169, 187);
box-shadow: inset 5px 0 6px -2px rgba(0,0,0,0.4), 2px 3px 3px 1px rgba(0,0,0,0.4);
border-radius: 0 0 10px 10px;
opacity: 0;
padding: 0;
margin: 0;
-webkit-transition: opacity 0.3s linear 0.1s;
-moz-transition: opacity 0.3s linear 0.1s;
-o-transition: opacity 0.3s linear 0.1s;
transition: opacity 0.3s linear 0.1s;
}

nav ul li:hover ul  {opacity: 1;}


nav ul li ul li {
max-height: 0;
overflow: hidden;
width: 230px;
margin:0;
box-shadow: inset 2px -3px 6px -4px rgba(0,0,0,0.4);
-webkit-transition: all 0.4s 0.1s;
-moz-transition: all 0.4s 0.1s;
-o-transition: all 0.4s 0.1s;
transition: all 0.4s 0.1s;
}


nav ul li:hover ul li {
max-height: 88px;
height: auto;
overflow: visible;
} 

nav ul li ul li:nth-child(9) {
box-shadow: none;
}

nav ul li ul a	{
font-size: 0.75rem;
padding: 6px;
margin: 10px 20px;
display: block;
}



nav li ul li a:hover	{
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2);
background: rgba(155, 184, 230, 1);
background: -webkit-linear-gradient(bottom, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
background: linear-gradient(to top, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
}

#prodevli ul  {
width: 460px;
}

#prodevli ul li {
width: 50%
}

/*******

Moving inSITE I

*******/

nav ul {
position: relative;
}

nav #eye  {
position: absolute;
top: 10px;
left: 206px;
background: url("../img/lettereye.png") no-repeat;
background-size: 35px;
width: 35px;
height: 35px;
-webkit-transition: left 0.6s ease-in;
-moz-transition: left 0.6s ease-in;
-o-transition: left 0.6s ease-in;
transition: left 0.6s ease-in;
}






nav ul li:nth-child(2):hover ~ #eye  {
left: 287px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 428px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 543px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 670px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 774px;
}

nav ul li:nth-child(7):hover ~ #eye {
left: 873px;
}

nav ul li:nth-child(9):hover ~ #eye  {
left: 1015px;
}


/*************

Prepare slider area

*************/

#subimagearea {
width: 94%;
margin-left: 5%;
position: relative;
}

#slidercontain  {
margin-left: 15%
}

#slidercontain ul  {
padding: 0;
list-style: none;
margin: 0;
}

#imagearea	{
box-shadow: 0 3px 4px 4px rgba(0,0,0,0.6);
background: white;
}


/*************

Change css of jquery.bxslider.css

*************/

.bx-wrapper .bx-viewport  {
box-shadow: none;
border: none;
}

.bx-controls-direction  {
display: none;
}


.bx-wrapper .bx-pager.bx-default-pager a  {
background: #51aadd;
width: 12px;
height: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 2px solid rgb(231, 244, 253);
}

/*************

Postit note

*************/




#postitdiv {
display: none;
position: absolute;
z-index: 3;
width: 275px;
height: 280px;
margin: 0;
top: 20px;
left: 0;
}







/*******

Image slider

*******/
/*
#subimagearea ul  {
padding: 0;
list-style: none;
margin: 0;
}

#subimagearea ul li  {
display: block;
height: 325px;
text-align: center;
}
*/
#subimagearea ul li img {
/*height: 100%;*/  /* responsive may dictate i get rid of this  */
}



/*******

Image Words

*******/





#img1words  {
text-align: center;
position: absolute;
top: 5%;
right: 19%;
}

#img1words h1 {
margin: 0;
color: rgb(179, 110, 20);
text-shadow: 1px 1px 1px black;
}

#img1words p {
font-size: 1.1rem;
margin-bottom: 0;
text-shadow: 1px 1px 1px black;
color: rgb(218, 205, 42);
}




#img2words  {
text-transform: uppercase;
text-align: center;
position: absolute;
top: 5%;
right: 2%;
}

#img2words h1 {
margin-top: 30px;
color: rgb(179, 110, 20);
text-shadow: 1px 1px 1px black;
}

#img2words h1 a, #img4words h1 a {
text-decoration: none;
color: rgb(179, 110, 20);
}

#img2words p {
font-size: 1.2rem;
text-shadow: 1px 1px 1px black;
color: rgb(218, 205, 42);
margin-top: 53px;
}

#img2words p span {
font-size: 1.6rem;
margin-top: 11px;
display: block;
}

#img3words  {
position: absolute;
top: 4%;
right: 10%;
text-align: center;
}

#img3words h1 {
margin: 7px 0 10px 0;
text-transform: uppercase;
color: rgb(179, 110, 20);
text-shadow: 1px 1px 1px black;
font-size: 2rem;
}

#img3words h1 a {
color: rgb(179, 110, 20);
text-decoration: none;
}

#img3words p {
text-shadow: 1px 1px 1px black;
color: rgb(218, 205, 42);
}

#img3words h2  {
text-shadow: 1px 1px 1px #bdbdbd;
}

#img4words  {
position: absolute;
top: 5%;
right: 16%;
}

#img4words h1 {
text-transform: uppercase;
color: rgb(179, 110, 20);
text-shadow: 1px 1px 1px black;
}

#img4words p {
line-height: 138%;
font-size: 1.2rem;
text-shadow: 1px 1px 1px black;
color: rgb(218, 205, 42);
}


/*******

Bottom Area

*******/




#inbottomblue  {
width: 94%;
margin: auto;
height: 500px;
border-bottom: 2px solid #132a40;
}



/*******

Gamifiation Area

*******/


#leftcol {
float: left;
width: 24%;
min-width: 276px;
height: 300px;
color: white;
padding: 8px;
border: 1px solid rgba(0, 0, 0, 0.4);
}

#leftcol a {
text-decoration: none;
}

#leftcolcontent h1  {
margin-top: 10px;
text-align: center;
color: white;
font-size: 2rem;
}

#leftcolcontent span {
font-size: 0.8rem;
vertical-align: super;
}

#leftcolcontent p  {
font-size: 1.2rem;
text-shadow: 1px 1px 1px black;
color: rgb(252, 234, 7);
}

/*******

Quote Area

*******/

#midcol {
margin: 0 0 0 6%;
float: left;
width: 24%;
height: 300px;
padding: 8px;
border: 1px solid rgba(0, 0, 0, 0.4);
}

#midcolcontent p {
color: rgb(252, 234, 7);
font-size: 1rem;
}

#midcolcontent blockquote {
background: url("../img/quotesmall2c2.png") no-repeat;
padding: 0 0 0 18.21%;
width: 80.756%;
margin: 0;
}

#midcolcontent p:nth-child(3) {
color: white;
padding: 0 0 0 53px;
}

#midcolcontent p span  {
color: white;
}


/*******

Marquee Area

*******/

#rightcol {
float: right;
width: 34%;
}

#rightcol h3  {
border-radius: 20px 20px 0 0;
text-align: center;
box-shadow: 0 6px 6px 0px rgba(0, 0, 0, 0.69);
margin: 0;
padding: 10px 10%;
position: relative;
z-index: 2;
color: white;
font-size: 1.17rem;
}

#marquee  {
background-color: rgba(176, 209, 228, 1);
height: 290px;
position: relative;
overflow: hidden;
margin: 0 5px;
box-shadow: 6px 0px 10px -4px rgba(0, 0, 0, 0.74), -6px 0px 10px -4px rgba(0, 0, 0, 0.74);
}



#marquee p {
position: absolute;
top: 18px;
padding: 0 5.2256% 0 10.9263%;
margin: 0;
-webkit-animation: scrollwords 50s linear infinite;
-moz-animation: scrollwords 50s linear infinite;
-o-animation: scrollwords 50s linear infinite;
animation: scrollwords 50s linear infinite;
}



#marquee p:hover  {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}

@-webkit-keyframes scrollwords  {
  0%     {top: 18px;}
  6%     {top: 18px;}
  9%   {top: -56px;}
  15%  {top: -56px;}
  18%    {top: -119px;}
  24%  {top: -119px;}
  27%    {top: -228px;}
  33%    {top: -228px;}
  36%  {top: -339px;}
  42%  {top: -339px;}
  45%    {top: -448px;}
  51%    {top: -448px;}
  54%  {top: -537px;}
  60%  {top: -537px;}
  63%    {top:-625px;}
  70%    {top:-625px;}
  73%  {top:-711px;}
  80%  {top:-711px;}
  83%    {top:-801px;}
  90%    {top:-801px;}
  93%  {top:-889px;}
  100%  {top:-889px;}

}

@-moz-keyframes scrollwords  {
  0%     {top: 18px;}
  6%     {top: 18px;}
  9%   {top: -56px;}
  15%  {top: -56px;}
  18%    {top: -119px;}
  24%  {top: -119px;}
  27%    {top: -228px;}
  33%    {top: -228px;}
  36%  {top: -339px;}
  42%  {top: -339px;}
  45%    {top: -448px;}
  51%    {top: -448px;}
  54%  {top: -537px;}
  60%  {top: -537px;}
  63%    {top:-625px;}
  70%    {top:-625px;}
  73%  {top:-711px;}
  80%  {top:-711px;}
  83%    {top:-801px;}
  90%    {top:-801px;}
  93%  {top:-889px;}
  100%  {top:-889px;}
}

@-o-keyframes scrollwords  {
  0%     {top: 18px;}
  6%     {top: 18px;}
  9%   {top: -56px;}
  15%  {top: -56px;}
  18%    {top: -119px;}
  24%  {top: -119px;}
  27%    {top: -228px;}
  33%    {top: -228px;}
  36%  {top: -339px;}
  42%  {top: -339px;}
  45%    {top: -448px;}
  51%    {top: -448px;}
  54%  {top: -537px;}
  60%  {top: -537px;}
  63%    {top:-625px;}
  70%    {top:-625px;}
  73%  {top:-711px;}
  80%  {top:-711px;}
  83%    {top:-801px;}
  90%    {top:-801px;}
  93%  {top:-889px;}
  100%  {top:-889px;}
}

@keyframes scrollwords  {
  0%     {top: 18px;}
  6%     {top: 18px;}
  9%   {top: -56px;}
  15%  {top: -56px;}
  18%    {top: -119px;}
  24%  {top: -119px;}
  27%    {top: -228px;}
  33%    {top: -228px;}
  36%  {top: -339px;}
  42%  {top: -339px;}
  45%    {top: -448px;}
  51%    {top: -448px;}
  54%  {top: -537px;}
  60%  {top: -537px;}
  63%    {top:-625px;}
  70%    {top:-625px;}
  73%  {top:-711px;}
  80%  {top:-711px;}
  83%    {top:-801px;}
  90%    {top:-801px;}
  93%  {top:-889px;}
  100%  {top:-889px;}
}



#rightcol h3:last-child  {
border-radius: 0 0 20px 20px;
text-align: center;
box-shadow: 0px -6px 6px 0px rgba(0, 0, 0, 0.69);
margin: 0;
padding: 10px 10%;
position: relative;
z-index: 2;
color: white;
}

#marquee h3:last-child {
width: 80%;
top: 260px;
left: 0px;
border-radius: 0 0 20px 20px;
}


/*******

Footer Area

*******/

footer {
color: #e4f7ff;
height: 280px;
width: 85%;
margin: auto;
}

#leftfoot  {
width: 220px;
float: left;
margin: 30px 0 0 0;
text-align: center;
}

footer #footerlogo  {
width: 220px;
}

footer #leftfoot a  {
color: #e4f7ff;
font-size: 1rem;
}

footer #middlefoot  {
float: left;
font-size: 1.2rem;
margin: 30px 0 0 13%;
}

#rightfoot {
float: right;
margin: 60px 0 0 0;
}

#rightfoot #footergsa {
width: 200px;
}

#rightfoot #footerastd  {
width: 60px;
padding: 0 0 22px 65px;
}

#rightfoot li {
list-style: none;
float: left;
margin: 0 8px;
}
#rightfoot ul  {
margin-top: 35px;
}

#copyright  {
clear: both;
text-align: center;
font-size: 0.7rem;
padding-top: 50px;
}

/*******

Phone navigation Area

*******/

#phonenav {
  height: 40px;
  width: 100%;
  background: rgb(24, 86, 128);
  font-size: 1.0rem;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  z-index: 3;
}

#phonenav ul  {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: 40px;
}

#phonenav li  {
  display: inline;
  float: left;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

#phonenav a {
  color: #fff;
  display: inline-block;
  width: 80%;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  margin: 5px 10%;
}

#phonenav #pnprodev  {
  line-height: 20px;
  margin: 5px 10% 10px;
}

#phonenav a:hover, #phonenav a:active {
  background-color: #8c99a4;
}

#phonenav a#pull {
  display: none;
  margin: 0;
}

#phonenav .pnphone, #phonenav .pnmail {
  position: absolute;
  line-height: 0;
  height: 30px;
  display: block;
  width: 30px;
  bottom: 0;
  margin: 0;
  padding: 5px 10px;
}

#phonenav .pnphone {
  right: 0;
}

#phonenav .pnmail {
  right: 50px;
}



#phonenav img {
  width: 100%;
}




/**********************

Media queries

**********************/

@media screen and (min-width: 300px)  {


  .disappear1 {
    display: none;  /*home and about us are gone from main nav */
  }

  #topnav #phone, #topnav #twitter, #topnav #linkedin {
    display: none;	/*phone number, twitter, and linked in are gone from top*/
  }

  .disappearli  {
    display: none;  /* menu and submenu of Instructional Design is gone */
  }

  nav {
    clear: both;  /* moves the nav bar down */
  }

  .isd  {
    display: block;   /* menu of ISD appears  */
  }

  nav ul  {
    padding: 0;  /* nav ul is not next to logo so have no padding  */
  }


 

  #toparea #mainlogo  {
    float: none;   /* put main logo in center of page  */
    margin: auto;
    padding: 0;
  }

#toparea #teammemberdiv  {
    float: none;   /* put main logo in center of page  */
    margin: auto;
    padding: 20px 0 5px 20px;
  }



  #homeabout, #topnav, #toparea nav  {
    display: none;  /*disappear homeabout, topnav, and main nav */
  }

  /******************* phonenav stuff ***************/

  #phonenav {
    height: auto;
  }
  #phonenav ul  {
    display: block;
    height: auto;
    display: none;
  }
  #phonenav li  {
    width: 50%;
    float: left;
    position: relative;
  }
  
  #phonenav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
    background-image: url("../img/nav-icon.png");
    background-repeat: no-repeat;
    background-position: 21% 50%;
    text-align: left;
    text-indent: 5%;
  }




  /***************** end of phonenav stuff **********/


  /*************** postit note   *******************/


#postitdiv {

top: auto;
left: 0;
bottom: -325px;
}



  /*************** end of postit  *******************/
  /*************** imgwords  *******************/


#img1words {
right: 10px;
top: 1%;
}

#img1words p {
display: none;
margin: 7px 20px 0 0;
}


#img2words h1 {
margin-top: 0;
margin-bottom: 15px;
}

#img2words p {
display: none;
font-size: 1.0rem;
margin-top: 0;
}
#img2words p span {
font-size: 1.0rem;
}

#img3words {
right: 21%;
}

#img3words h1 {
font-size: 1.5rem;
color: rgb(87, 221, 177);
margin: 1px 0 0 0;
}

#img3words h1 a {
color: rgb(87, 221, 177);
}


#img3words p {
display: none;
}

#img3words h2 {
font-size: 0.7rem;
}



#img4words h1 {
font-size: 1.7rem;
margin-left: 32px;
}

#img4words p:nth-child(2), #img4words p:nth-child(3) {
display: none;
}


  /*************** middle blue area  *******************/

#bottomblue {
margin-top: 300px;
padding: 0;
}

#inbottomblue  {
height: auto;
}

  #leftcol  {
    float: none;
    min-width: 0px;
    font-size: 1.7rem;
    margin: auto;
    width: auto;
  }

 

#midcol {
    margin: 10px 0 0 0;
    float: none;
    width: auto;
  }

#rightcol {
float: none;
width: auto;
margin: 5px 5px 20px;
}

/*************** footer area  *******************/


footer  {
    width: 94%;
margin: auto;
height: auto;
  }

footer #leftfoot {
width: 100%;
float: none;
}

 footer #middlefoot  {
    margin: 30px 0 0 6%;  /* make middle col of footer have smaller right margin  */
    float: none;
    width: auto;
  }


  
  #rightfoot  {
    clear: both;
    float: none;
    padding: 0px 0 0 0;
    text-align: center;
  }

  #rightfoot ul  {
    padding: 0;
  }

  

  
}

@media screen and (min-width: 450px)  {


#img1words {
right: 5px;
}

#img1words p {
display: inline-block;
}

#img2words p {
display: block;
}

#img3words h2 {
font-size: 1rem;
}

#img4words h1 {
font-size: 1.5rem;
margin-left: 21px;
}

#img4words p:nth-child(2) {
display: block;
margin-left: 21px;
}

}

@media screen and (min-width: 600px)  {

/*********** putting insiteful games to right etc  **********/



#leftcol  {
float: left;
width: 50%;
padding: 8px;
margin: 0;
}

#midcol   {
float: left;
width: 40%;
margin: 0 0 15px 2%;
}

#rightcol {
clear: both;
max-width: 600px;
margin: auto;
}


#img1words {
  top: 5%;
}

#img2words h1 {
margin-top: 30px;
margin-bottom: 0.67em;
}

#img2words p {

font-size: 1.2rem;
margin-top: 53px;
}
#img2words p span {
font-size: 1.6rem;
}

#img3words h1  {
font-size: 2rem;
}

#img3words h2  {
    font-size: 1.2rem;
  }
#img4words h1 {
font-size: 2rem;
margin-top: 10px;
margin-left: 0;
}



}

@media screen and (min-width: 675px) {

#homeabout, #toparea nav  {
    display: block;  /*bring back homeabout and main nav */
  }

  #toparea #mainlogo  {
    float: left;   /* put main logo at left of page  */
    margin: auto;
    padding: 10px 0 0 10px;
  }


  #phonenav  {
    display: none;
  }


nav > ul {
margin: auto;
width: 650px;
}

nav #eye {
top: 10px;
left: -22px;
}

nav ul li:nth-child(2):hover ~ #eye  {
left: -22px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 114px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 231px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 357px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 464px;
}

nav ul li:nth-child(8):hover ~ #eye {
left: 561px;
}






#img4words p:nth-child(3) {
display: block;
margin-left: 21px;
}



}



@media screen and (min-width: 720px)  {

  nav > ul  {
    margin: auto;
    width: 650px;
  }  
  
    #postitdiv {
    top: 20px;    /* bring post it note up from the bottom  */
    left: -20px;
    bottom: auto;
  }
  #topnav {
    display: block;  /* bring back top right nav area  */
  }




#img1words p {
display: block;
margin: 10px 0 0 0;
}

#img3words {
right: 0;
}
#img3words p {
display: block;
}

#img3words h1, #img3words h1 a {
color: rgb(179, 110, 20);
}

#img4words  {
right: 2%;
}

#img4words h1 {
margin-left: 21px;
}

#bottomblue  {
margin-top: 90px;
}


}

@media screen and (min-width: 835px)  {

  #postitdiv {
    top: 20px;  /* move the post it note 20px to the right */
    left: 0;
  }


#img1words p {
margin: 16px 0 0 0;
}

#img4words {
right: 1%;
}

#img4words h1 {
margin-left: 0;
}

#img4words p:nth-child(2), #img4words p:nth-child(3) {
margin-left: 0;
}


}

@media screen and (min-width: 990px)  {


  #topnav #phone, #topnav #twitter, #topnav #linkedin {
    display: block;   /*phone number, twitter, and linked in come back on top*/
  }

  nav {
    clear: right;  /* moves the nav bar up by taking away clear: both */
  }

  nav ul  {
   padding: 0 0 0 220px;  /* add padding to nav ul when it moves up*/
  }

  .isd  {
    display: none;   /* menu of ISD disappears  */
  }
  .disappearli {
    display: block;   /* menu of Instructional Design appears  */
  }
  .disappearli ul  {
    display: none;
  }

  nav > ul  {
    margin: 0;
    width: auto;
  } 

nav #eye {
top: 10px;
left: 192px;
}

nav ul li:nth-child(2):hover ~ #eye  {
left: 218px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 357px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 472px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 599px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 701px;
}

nav ul li:nth-child(7):hover ~ #eye {
left: 802px;
}









  #img3words h2  {
    font-size: 1.5rem;
  }

/*
  #midcol {
    margin: 0 0 0 6%;
  }

  #leftcol  {
    min-width: 276px;
    font-size: 2rem;
  }

    #inbottomblue  {
    height: 500px;
  }

  footer  {
    width: 85%;
  }

  footer #middlefoot  {
    float: left;
  }
  #rightfoot  {
    clear: none;
    float: right;
  }

*/


/****************footer***************/

footer {
height: 280px;
width: 85%;
}

footer #leftfoot  {
float: left;
width: 220px;  /*keep or maybe use auto  *******/
}

footer #middlefoot  {
float: left;
margin: 30px 0 0 8%;
}

#rightfoot {
float: right;
clear: none;
}


}


@media screen and (min-width: 1100px) {


  .disappearli ul {
    display: block;   /* submenu of Instructional Design appears  */
  }


 
  #img1words  {
    right: 19%;
  }
  #img2words  {
    right: 2%;
  }
  #img3words  {
    right: 10%;
  }
  #img4words  {
    right: 16%;
  }
  
#leftcol {
width: 24%;
min-width: 276px;
height: 300px;
}

#midcol {
margin: 0 0 0 6%;
float: left;
width: 24%;
}

#rightcol {
float: right;
width: 34%;
clear: none;
}

footer {
clear: both;
}

#inbottomblue  {
height: 500px;
}







}


@media screen and (min-width: 1170px) {


  #homeabout  {
    display: none;     /*small home and about us links at top disappear */
  }

  .disappear1 {
    display: block;   /*  Home and About Us on main nav bar appear  */
  }

nav ul li:nth-child(2):hover ~ #eye  {
left: 287px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 428px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 543px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 670px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 774px;
}

nav ul li:nth-child(7):hover ~ #eye {
left: 873px;
}

nav ul li:nth-child(9):hover ~ #eye  {
left: 1015px;
}

  footer #middlefoot  {
    margin: 30px 0 0 13%;  /* make middle col of footer have smaller right margin  */
  }

}