@import url('https://fonts.googleapis.com/css?family=Chivo');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/*
@font-face {
    font-family: myHeaderFont;
    src: url("assets/fonts/leaguegothic-regular-webfont.ttf"); }*/

* {
    padding: 0;
    margin: 0;

}

  *:focus {
    outline: none;}

.navText {
    font-family: Chivo;
    /*'Open Sans', serif;*/
    text-decoration: none;
    /*-webkit-text-stroke: 1px;*/
}

.headerText {
    font-family: 'Chivo', serif;
    text-decoration: none;
}


html,
body {
    margin: 0;
    padding: 0;
    height: auto;

    /*height: 10000px;
    overflow: auto;
        -webkit-overflow-scrolling: touch;
*/
    border: none;
    font-size: 100%;
}


 




/*div {
    border: solid Red;
}*/


/* font styles */

h1 {
    text-transform: uppercase;
    width: 100%;
    margin: .7em auto;
    overflow: hidden;
    font-size: 5.7vw;
    text-align: center;
    font-weight: 700;
    line-height: 5.5vw;
    color: Slate Gray;
    font-family: 'Chivo';
    /*   -moz-text-align-last: left; /* Code for Firefox */
    /*text-align-last: left;*/
}

h1:after {
    margin: 0 -55% 0 .5em;
}

.imgHorRow h1 {
    font-size: 4vw;
    font-family: 'Oswald';
    font-weight: 100;
    text-transform: uppercase;
    line-height: 4vw;
    margin:0 ;
}

.imgVertRow h1 {
    font-size: 7vw;
    font-family: 'Oswald';
    font-weight: 100;
    text-transform: uppercase;
    line-height: 7vw;
}

.imgHorRow h2 {
    font-size: 4vw;
    font-family: 'Oswald';
    font-weight: 100;
    text-transform: uppercase;
    line-height: 4vw;
    margin: 0;
}

.imgVertRow h2 {
    font-size: 7vw;
    font-family: 'Oswald';
    font-weight: 100;
    text-transform: uppercase;
    line-height: 7vw;
}

h2 {
    text-transform: uppercase;

    margin: .7em auto;
    overflow: hidden;
    font-size: 4vw;
    text-align: center;
    font-weight: 700;
    color: Slate Gray;
    font-family: 'Chivo';
}

h3 {
    font-size: 2vw;
    text-align: center;
}

.pubSub h3 {
    font-family: 'Chivo';
}

.overviewText {
    font-size: 150%;
    font-family: 'Roboto', serif;
    font-weight: 100;
}

.project p {
    font-size: 150%;
    font-family: 'Roboto', serif;
    font-weight: 100;
    margin: 0;
}

.bodyAnchorEng {
    text-decoration: none;
    color: rgb(183, 36, 103);
    font-weight: bold;
}

.bodyAnchorNeuro {
    text-decoration: none;
    color: #F2EB16;
    font-weight: bold;
}

.bodyAnchorStem {
    text-decoration: none;
    color: rgb(82, 79, 161);
    font-weight: bold;
}

.bodyAnchorWeb {
    text-decoration: none;
    color: rgb(0, 173, 220);
    font-weight: bold;
}


/* findings*/

.home_col h3 {
    margin: 0;
}

.inner_box h3 {
    font-family: 'Chivo';
    margin-bottom: 1vh;
}


/*media queries for font sizes */


/*media queries for font sizes */



@media screen and (max-width: 1000px) {
    h1 {
        font-size: 7vw;
        font-weight: 300;
    }
    h2 {
        font-size: 4vw;
    }
   
    .imgHorRow h1 {
        font-size: 4vw;
    }
    .imgVertRow h1 {
        font-size: 8vw;
        line-height: 8vw;
    }
    .imgHorRow h2 {
        font-size: 4vw;
    }
    .imgVertRow h2 {
        font-size: 6vw;
    }
    .overviewText {
        font-size: 2.5vw;
    }

  .project p {
    font-size: 2vw;
   }

    .home_col h2 {
        font-size: 26px;
    }
    .home_col p {
        font-size: 18px;
    }
    .home_icon h3 {
        font-size: 24px;
    }

   .project p {
    font-size: 2vw;
   }
}




@media screen and (min-width: 500px) and (max-width: 950px) {
    h1 {
        font-size: 7vw;
        font-weight: 300;
       margin: 0;
    }

    h2 {
        font-size: 6vw;
    }

    h3 {
    font-size:    4vw;
    }


   
   /* overview text */
    .imgHorRow h1 {
        font-size: 6vw;
        line-height: 6vw;
    }

    .imgVertRow h1 {
        font-size: 8vw;
        line-height: 8vw;
    }

    .imgHorRow h2 {
        font-size: 6vw;
        line-height: 6vw;
    }
    .imgVertRow h2 {
        font-size: 6vw;
    }
      .overviewText {
        font-size: 3.5vw;
    }

  .project p {
    font-size: 3vw;
   }

 
    .home_col h2 {
        font-size: 26px;
    }


/*    .home_col p {
        font-size: 4vw;
    }
*/  

  .home_icon h3 {
        font-size: 24px;
    }
}




@media screen and (max-width: 499px) {
    h1 {
        font-size: 8vw;
        font-weight: 300;
        line-height: 9vw;
    }
    h2 {
        font-size: 7vw;
    }
    .imgHorRow h1 {
        font-size: 7vw;
    }
    .imgVertRow h1 {
        font-size: 8vw;
    }
    .imgHorRow h2 {
        font-size: 6vw;
    }
    .imgVertRow h2 {
        font-size: 6.5vw;
    }

        .home_col p {
            font-size: 4vw;
    }

    .overviewText {
        font-size: 24px;
    }

  .overviewText p {
        margin-top: 12px;
    }


  .project p {
    font-size: 100%;
   }



}








/* section sizes */





#fullpage {
    padding: 0;
    margin-top: 40px;
        /*       background-image: url("http://previews.123rf.com/images/szefei/szefei1005/szefei100500033/7030787-Close-up-on-human-hair-Stock-Photo-hair-loss-scalp.jpg");*/

}

.scrollto .active section {
    border-width: 0;
}


/*keeps the page below the menu * this is nested by accident*/

@media screen and (max-width: 800px) {
 
 /*   #fullpage {
        padding-top: 75px;
    }
*/
  
  #overviewAnc {
        margin-top: 150px;
    }



    section {
        box-sizing: border-box;
        border: 0;
        width: 100%;
        padding: 5%;
        border-style: hidden !important;
    }


}

    /*keeps the page below the menu */

/*@media screen and (max-width: 400px) {
    #fullpage {
        padding-top: 200px;
    }
}
*/






/*margins for every  section on every page*/

.sectionContentWrapper {
    margin: 0  3%;
}




.areaSub {
    margin: 10%;
    clear: both;
    overflow: hidden;
    font-size: 150%;
    font-family: 'Roboto', serif;
    font-weight: 100;
}

/* current project annoucement Div*/

.currentProjects { 
    padding-top: 2%;
}


.project {
    margin: 5% 10%;
}


/*margins for home page*/

.mainSub {
    overflow: hidden;
    clear: both;
}

/*------------------------------------------*/
/*padding that controls the amount of space  the sections and keeps them below navigaiton bar */
/*------------------------------------------*/


.scrollto {
    padding-top: 90px; 
    
}


/* section responsiveness */

.fp-normal-scroll {
    padding: 0 15%;
}


@media screen and (max-aspect-ratio: 2/1) {
    .fp-normal-scroll {
        padding: 0 7%;
    }
    
}

@media screen and (max-aspect-ratio: 1/1) {
    .fp-normal-scroll {
        padding: 0 3px;
    }
    
}

@media screen and (max-width: 600px) {
    .fp-normal-scroll {
        padding: 0 3px !important;
    }
    .areaSection {
        padding: 0 3px !important;
    }


    .areaSection .home_col {
        text-align: center;

    }

    .projectWrapper{

        margin-bottom: 18vw;
    }
}



/*
@media screen and (max-aspect-ratio: 2/1) {
    .scrollto {
        padding: 0 7%;
    }
}5

@media screen and (max-aspect-ratio: 1/1) {
    .scrollto {
        padding: 0 3px;
    }
}

@media screen and (max-width: 600px) {
    .scrollto {
        padding: 0 3px !important;
    }
    .areaSection {
        padding: 0 3px !important;
    }
}

*/


/*------------------------------------------*/
/*formatting for main icons that appear on the landing page and footer */
/*------------------------------------------*/



.fillDark {
    fill: #939598;
    /*DimGray*/
}

.fillWhite {
    fill: White;
}

.strokeDark {
    stroke: #939598;
    /*DimGray*/
}

.strokeWhite {
    stroke: White;
}

.eSVG:hover #circle-background-e,
.active #circle-background-e,
.eSVG:hover #sclera,
.active #sclera,
.eSVG:hover #pupil,
.active #pupil {
    fill: rgb(183, 36, 103);
}

.eSVG:hover #eyelid,
.eSVG:hover #iris,
.active #eyelid,
.active #iris {
    stroke: rgb(183, 36, 103);
}

.eSVG:hover #eyelid,
.eSVG:hover #iris,
.active #eyelid,
.active #iris {
    fill: white;
}

.eSVG:hover #pupil {
    -webkit-transform: translate(-38.53px, -36.95px) scale(2);
    transform: translate(-38.53px, -36.95px) scale(2);
}


.sSVG:hover #circle-background-s,
.active #circle-background-s {
    fill: rgb(82, 79, 161);
}

.sSVG:hover #oval-line_2_,
.sSVG:hover #oval-line_1_,
.sSVG:hover #oval-line,
.sSVG:hover #trans-oval,
.sSVG:hover #trans-oval_1_,
.active #oval-line_2_,
.active #oval-line_1_,
.active #oval-line,
.active #trans-oval,
.active #trans-oval_1_ {
    stroke: rgb(82, 79, 161);
}

.sSVG:hover #oval-line_2_,
.sSVG:hover #oval-line_1_,
.sSVG:hover #oval-line,
.active #oval-line_2_,
.active #oval-line_1_,
.active #oval-line {
    fill: White;
}

.active #trans-oval,
.active #trans-oval_1_ {
    fill-opacity: 0;
}

#stemSVG {
    -ms-perspective: 1500px;
    -webkit-perspective: 1500px;
    perspective: 1500px;
}


/*makes the letters move slowly*/

#stem-S,
#stem-T,
#stem-E,
#stem-M {
    -ms-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    fill: rgb(82, 79, 161);
    /*transform: translate3d(0, 0, 0);*/
    fill-opacity: 0;
    font-weight: 100;
    stroke-opacity: 0;
}

#stem-S-Text,
#stem-T-Text,
#stem-E-Text,
#stem-M-Text {
    font-family: 'Chivo', serif;
    font-size: 20px;
}

.sSVG:hover #stem-S {
    -webkit-transform: translate(-16px, -15px);
    transform: translate(-16px, -15px);
    fill-opacity: 1;
}

.sSVG:hover #stem-T {
    -webkit-transform: translate3d(19px, -15px, 0px);
    transform: translate3d(19px, -15px, 0px);
    fill-opacity: 1;
}

.sSVG:hover #stem-E {
    -webkit-transform: translate3d(-15px, 16px, 0px);
    transform: translate3d(-15px, 16px, 0px);
    fill-opacity: 1;
}

.sSVG:hover #stem-M {
    -webkit-transform: translate3d(17px, 16px, 0px);
    transform: translate3d(17px, 16px, 0px);
    fill-opacity: 1;
}

.wSVG:hover #circle-background-w,
.active #circle-background-w {
    fill: rgb(0, 173, 220);
}

.wSVG:hover #left-hand-outline,
.wSVG:hover #right-hand-outline,
.active #left-hand-outline,
.active #right-hand-outline {
    stroke: rgb(0, 173, 220);
}

.wSVG:hover #left-hand,
.wSVG:hover #right-hand,
.active #left-hand,
.active #right-hand {
    fill: white;
}

.wSVG:hover #left-hand-outline,
.active #right-hand-outline,
.wSVG:hover #left-hand,
.active #right-hand {
    -webkit-transform: translate(-3px, -5px);
    transform: translate(-3px, -5px);
}

.wSVG:hover #right-hand-outline,
.active #left-hand-outline,
.wSVG:hover #right-hand,
.active #left-hand {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
}

.shocks {
    fill-opacity: 0;
}

.nSVG:hover #circle-background-n,
.active #circle-background-n {
    fill: #F2EB16;
}

.nSVG:hover #brain-fill,
.active #brain-fill {
    fill: white;
}

.nSVG:hover #brain-outline,
.active #brain-outline {
    stroke: #F2EB16;
}

.nSVG:hover .shocks,
.active .shocks {
    fill-opacity: 1;
    stroke: #939598;
    fill: #F2EB16;
    stroke-width: .5;
}

.wSVG #right-hand-outline,
.wSVG #left-hand-outline,
.wSVG #right-hand,
.wSVG #left-hand,
.sSVG #oval-line_2_,
.sSVG #oval-line_1_,
.sSVG #oval-line,
.sSVG #oval-fill_2_,
.sSVG #oval-fill_1_,
.sSVG #oval-fill,
.nSVG #brain-fill {
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}


/* .sSVG svg #stem-S,
 .sSVG svg #stem-T,
 .sSVG svg #stem-E,
 .sSVG svg #stem-M,
 .sSVG svg:hover #stem-S,
 .sSVG svg:hover #stem-T,
 .sSVG svg:hover #stem-E,
 .sSVG svg:hover #stem-M,
*/

.eSVG #pupil {
    -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

.wSVG:hover #right-hand,
.wSVG:hover #left-hand,
.wSVG:hover #right-hand-outline,
.wSVG:hover #left-hand-outline,
.nSVG:hover #brain-fill {
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

.wC:hover {
    background: radial-gradient(100px 100px, rgb(0, 173, 220), #000);
}

.nC:hover {
    background: radial-gradient(100px 100px, #F2EB16, #000);
}

.eC:hover {
    background: radial-gradient(100px 100px, rgb(183, 36, 103), #000);
}

.sC:hover {
    background: radial-gradient(100px 100px, rgb(82, 79, 161), #000);
}






/*-----------------------------------------------------------------------*/
/*--------------------LANDING SECTION ----------------------------------*/
/*-----------------------------------------------------------------------*/

/*formatting for first section of landing first section and landing footer*/
/*if there is no background in the header, content will overlap upon scroll*/

/*-----------------------------------------------------------------------*/


#section0img {
    z-index: 2100;
    background: url('assets/img/ChrisVWideDarkSep.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right bottom;
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

#headerCont.fixed {
    bottom: auto;
    top: 0;
    margin-top: 0;
    position: fixed;
}

#nameBoxIndex {
    letter-spacing: -2px;
    font-size: 150%;
    display: inline-block;
    padding-top: 5px;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    color: DimGray;
    white-space: nowrap;
}

#newHeader {
    display: none;
    -webkit-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
    -moz-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
    -o-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
    transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: #909090;
    /*area color*/
    height: 40px;
    z-index: 2000;
}

#newHeader.fixed {
    display: inline;
    background-color: White;
}

#nameBoxIndexTop {
    display: none;
    letter-spacing: -2px;
    font-size: 200%;
    float: left;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    color: Black;
    white-space: nowrap;
}

#nameBoxIndexTop.fixed {
    display: inline;
    float: left;
}

#nameBoxIndexTop.fixed a {
    color: Black;
}

#indexIconsContainer {
    /*helps move the buttons up and down*/
    display: none;
    bottom: auto;
    top: 0;
    right: 0;
    margin-top: 6px;
    margin-bottom: 0;
    /* padding: 0 10px 0 0;*/
    height: 24px;
    position: fixed;
    background-color: White;
    width: 33%;
}

#indexIconsContainer.fixed {
    /*helps move the buttons up and down*/
    /*;
  float:right;*/
    display: inline;
    background-color: White;
    float: right;
    z-index: 2001;
}

#indexIconsList {
    list-style: none outside none;
    text-align: center;
}

#indexIconsList.fixed {
    display: inline;
    float: right;
    width: 100%;
    list-style: none outside none;
    text-align: center;
    margin: 0;
}

#indexIconsList li {
    width: 20%;
    display: inline-block;
}

#staffSVG,
#contactSVG,
#cvSVG,
#pubsSVG {
    display: inline;
    fill-opacity: 1;
    stroke-opacity: 1;
}

#staffSVG.fixed,
#contactSVG.fixed,
#cvSVG.fixed,
#pubsSVG.fixed {
    margin-top: 12px;
    margin-bottom: 12px;
    fill-opacity: 0;
    stroke-opacity: 0;
    width: 100%;
}


/* media query for landing links on top of landing page*/

@media screen and (max-width: 440px) {
    #indexIconsList {
        margin: 0;
        padding: 0;
    }
}

@media screen and (max-width: 400px) {
    #landingLinksWrapper {
        display: none;
    }
    #indexIconsContainer {
        display: inline;
        width: 100%;
        z-index: 4000;
        margin: 0;
        padding-left: 0;
        padding-top: 2px;
        padding-bottom: 3px;
    }
    #newHeader.fixed {
        display: inline;
        padding: 0 0 2px 0;
        height: 30px;
    }
    #nameBoxIndexTop {
        display: none;
    }
    #nameBoxIndexTop.fixed {
        display: none;
    }
}


.textWrapResearchArea {
    min-width: 5%;
    max-width: 50%;
    text-align: center;
    margin: 0;
    text-align: center;
    display: none;
}

#researchAreaAnnounce {
    font-size: 20px;
    float: right;
    position: relative;
    padding-top: 3%;
    padding-bottom: 5px;
    text-decoration: none;
    color: Black;
    margin: 0;
}



#emptyAligningDiv {
    clear: both;
}

#subMenuCell {
    width: 100%;
}

#topWrapperHome {
    background-color: White;
    margin: 0;
    /*position:relative;*/
    vertical-align: middle;
    display: block;
    width: 100%;
    overflow: hidden;
    height: 300px;
    /* <----this matters for fixed navs to be the same (home and area)*/
    /* <----and must be specified for every screen size change */
}

#topWrapperHome.fixed {
    border-style: none;
    height: 100px;
    /* <----this matters for fixed navs to be the same (home and area)*/
    /* <----and must be specified for every screen size change */
}

.topWrapperArea {
    background-color: White;
    margin: 0;
    /*position:relative;*/
    vertical-align: middle;
    display: block;
    width: 100%;
    overflow: hidden;
    height: 60px;
    /* <----this matters for fixed navs to be the same (home and area)*/
    /* <----and must be specified for every screen size change */
}

#indexFooter {
    text-align: center;
    box-sizing: border-box;
    position: fixed;
    vertical-align: middle;
    bottom: 0;
    left: 0;
    z-index: 5000;
    max-height: 33.33vh;
    /* how tall the heigh of the footer is */
    width: 100%;
    /*    height: 33.33vh; how tall the heigh of the footer is */
    border-top: 5px Gray;
    border-bottom: 5px Gray;
    border-top-style: solid;
    border-bottom-style: solid;
}

#indexFooter.fixed {
    border-style: none;
}

#linkCell {
    margin: 0;
    padding: 0;
}


/*this is the container for the  bottom svg */

.areaSVG {
   display: none;
  max-height: 18vh;  
 box-sizing: content-box;
    margin: 0;



}

.areaSVG.fixed {
    max-height: 6vh;

}


#circle-background {
    /*    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
 Color='#444')";
 filter: url(#f1);*/
    -moz-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    -webkit-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    filter: box-shadow(3px 3px 2px rgb(0, 0, 0, 0.5));
    fill: Gainsboro;
}

#bottomRow {
    width: 100%;
    display: inline;
    text-align: right;
    vertical-align: top;
    /* border-collapse: collapse;*/
    border: none;
    border: 0;
}

#lastRowIndex {
    /*      border-collapse: collapse;*/
    height: 1px;
    border: 0;
    margin: 0;
}

.home {
    background-color: Gray;
}

.stem {
    background-color: rgb(82, 79, 161);
}

#menu.stem {
    background-color: transparent;
}

.stem .hamburgerDiv {
    background-color: transparent;
}

.eng {
    background-color: rgb(183, 36, 103);
}

.web {
    background-color: rgb(0, 173, 220);
}

.neuro {
    background-color: #F2EB16;
}

.pub {
    background-color: Dark Gray;
}

.con {
    background-color: Dark Gray;
}

.stemMenuList a {
    /*color: rgb(82, 79, 161);*/
    color: white;
}

.engMenuList a {
    /*color: rgb(183, 36, 103);*/
    color: white;
}

.webMenuList a {
    /*color: rgb(0, 173, 220);*/
    color: white;
}

.neuroMenuList a {
    /*color: #F2EB16;*/
    color: white;
}

.pubMenuList a {
    color: WhiteSmoke;
}

#finalCell {
    width: 80%;
    text-align: right;
}


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

#header {
    position: fixed;
    top: 0;
    margin-bottom: -100px;
    left: 0;
    z-index: 999;
    /* text-align: left;*/
    /* padding-top: 2px;*/
    padding-left: .5%;
    padding-right: .5%;
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    /*    height: auto;*/
    background-color: #909090!important;
    /*area color*/
    width: 100%;
    display: -webkit-flex;
    /*safari*/
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
}



/*   landing links homepage  */


/*   ----------------------  */

#section0 {
    padding: 0 !important;
    margin: 0 !important;
}

/*  For responsive images */




/*   preview area for index*/

#section0img {
    z-index: 2100;
    /* url('https://41.media.tumblr.com/774cc28c43323b724fc7d4c722ae3630/tumblr_mpg1ff7IwC1r2jnbbo1_500.jpg' */
    background: url('assets/img/ChrisVWideDarkSepCut.jpg') no-repeat center center fixed;
    /*background:   linear-gradient(
      rgba(10, 100, 100, 0.45), 
      rgba(10, 100, 100, 0.45)
    ), url('assets/img/ChrisWideSmall2.jpg') no-repeat center center fixed;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: right bottom;
    position: absolute;
    /*-webkit-filter: sepia(100%);*/
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background-attachment: scroll;
    border-style: none;
    border-collapse: collapse;
}

.landingLinksListTall {
    display: none;
}

.landingText {
    float: left;
    clear: left;
    color: White;
    margin-top: 3vh;
}

#landingName {
    color: White;
    line-height: 10vh;
    text-transform: uppercase;
    /*        border: solid green;*/
}

#firstName {
    font-size: 12.3vh;
    padding-bottom: 1vh;
    float: left;
    clear: left;
}

#lastName {
    float: left;
    clear: left;
    font-size: 17.5vh;
    letter-spacing: -1vh;
}

#landingTitle {
    color: White;
    font-size: 4vh;
    text-transform: uppercase;
    padding: 1vh 0;
    /*        border: solid rgb(0,173,220);*/
}

#landingAbout {
    color: White;
    margin-top: 5%;
    margin-bottom: 10%;
    font-size: 1vh;
    max-width: 50%;
}

#landingTitle.landingText span {
    display: block;
    line-height: 3.85vh;
    font-size: 4.6vh;
}




.landingText a {
    color: #F2EB16;
    text-decoration: none;
    white-space:    nowrap;
}

#landingTitle.landingText a:hover {
    color: rgb(82, 79, 161);
}


.line1 {letter-spacing: .06vh}

.line2 {
    letter-spacing: 1.17vh;
    font-weight: 900;
}

.line3 {
    letter-spacing: .78vh
}

.line4 {
    letter-spacing: .9vh;
    font-weight: 900;
    line-height: 7vh;
    font-size: 5.7vh;
}

#landingTextWrapper {
    position: absolute;
    left: 1%;
    bottom: 5%;
    width: auto;
    padding: 1vh;
    background-color: rgba(34, 23, 17, .4);
    border-radius: 3px;
    /*height:100%;*/
    /*  border: solid white;*/
}

#landingName {
    color: White;
    line-height: 10vh;
    text-transform: uppercase;
    /*        border: solid green;*/
}

#firstName {
    font-size: 12.3vh;
    padding-bottom: 1vh;
    float: left;
    clear: left;
}

#lastName {
    float: left;
    clear: left;
    font-size: 17.5vh;
    letter-spacing: -1vh;
}

#landingTitle {
    color: White;
    font-size: 4vh;
    text-transform: uppercase;
    padding: 1vh 0;
    /*        border: solid rgb(0,173,220);*/
}

#landingAbout {
    color: White;
    margin-top: 5%;
    margin-bottom: 10%;
    font-size: 1vh;
    max-width: 50%;
}

#landingLinksWrapper {
    /*    min-height: 20% !important;*/
    /*margin-top: 5vh;*/
    box-sizing: border-box;
    /*   max-width: 30%;*/
    margin: 0;
    padding: 0;
    text-align: left;
    display: block;
    /*border:     solid rgb(82,79,161);*/
}

.landingLinksList {
    display: inline-block;
    list-style: none;
    width: 64vh;
    margin: 0;
    padding: 0;
    /*border: solid blue;*/
    /*height: 100%;*/
}

.landingLinksList li {
    display: inline-block;
    box-sizing: border-box;
    width: 50% !important;
}

.landingLinksList li a {
    box-sizing: border-box;
    white-space: nowrap;
    display: block;
    height: 100%;
    font-size: 3vh;
    border-radius: 5px;
    border-color: White;
    border-style: solid;
    /*padding: .5vh 2.5vh .5vh 2.5vh;*/
    width: calc(100%-1vh);
    !important box-sizing: border-box;
    margin: .5vh;
    border-width: 1px;
    text-align: center;
    color: White;
    text-decoration: none;
    /*    background-color: rgba(255, 255, 255, .2);*/
    text-transform: capitalize;
}

ul#navlist li#active a {
    background: #f0e7d7;
    color: #800000;
}

#landingLinksList li a:hover,
ul#navlist li#active a:hover {
    color: #800000;
    background: transparent;
    border-color: #aaab9c #fff #fff #ccc;
}


/* hover colors for landing buttons*/

.buttonText {
    border-color: white;
    color: white;
}

.buttonContainer:hover {
    border-color: white;
    background-color: rgba(255, 255, 255, .1);
}

.buttonText:hover {
    color: white;
    /*background-color: rgba(255, 255, 255, .4)*/
    ;
    border-color: blue;
}

.buttonContainer:hover .buttonText {
    border-color: white;
    background-color: rgba(255, 255, 255, .1);
    color: white;
}


/*chris popup image code */

#smallChris {
    display: none;
}


/* icon row first try  */

.indexAnimateLand svg {
    -webkit-transition-property: max-height, max-width;
    -moz-transition-property: max-height, max-width;
    -o-transition-property: height, width;
    transition-property: max-height, max-width;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    /*     -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);*/
}



#linkCell {
    text-align: center;
    width: 100%;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    font-size: 3vh;
    display: block;
    padding: 2vh 0;
}

#linkCell.fixed {
    display: none;
}

.areaAnchor {
    text-decoration: none !important;
    text-align: center;
}


.ey-nav-bar {
    width: 100% !important;
    height: 100%;
    overflow: hidden;
    text-align: center;
}


.ey-col-svg.fixed {
    height: 100%;
    max-height: 6vh;
}




.ey-text-content.fixed {
    max-height: 0;
}


/*end code bar*/


/*icon row first try end */


/*icon row final version */


/*wrapper for svg columns*/

.ey-row-scale {
    display: inline-block;
    width: 75%;
margin:0;
    vertical-align:top;
    padding-bottom: 0;
    padding-left: 12.5%;
    padding-right: 12.5%;
    text-align: center;
    overflow: hidden;
    /*changes the top border of the icons*/
    line-height: 0;
    /*    width: 90% !important;*/
    /*        border: solid rgb(0,173,220);*/
}

.ey-row-scale.fixed {
    padding-left: 0;
    padding-right: 0;
}

/*icon svg wrapper */


/* the size of the rendered icons is controlled by the size of this element */

.ey-col-svg {


   display: none;
  height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    -webkit-transition-property: height;
    -moz-transition-property: height;
    -o-transition-property: height;
    transition-property: height;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

}

.ey-col-1 {
    text-align: center !important;
    width: 24%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;

}

.ey-col-1.fixed {
    width: 20%;
    padding: 0! important;
    margin: 0 !important;
    display: inline-block;
    float: none;
    box-sizing: border-box;
}

.ey-row-scale.fixed {
    padding-bottom: 0 !important;
    display: inline-block;
    margin-bottom: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.ey-nav-bar.fixed {
    padding-bottom: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    vertical-align: middle;
}


.ey-text-content {
    width:100%;
    text-rendering: optimizeLegibility;
    /*display: block;*/
    display: block;
    text-align: center !important;
    white-space: nowrap;
    max-height: calc(2vw + 5px);
    line-height: calc(2vw + 5px);
    color: black;
    z-index: 10000;
    /*padding-bottom: 10%;*/
    font-size: 4vh;
    vertical-align: middle;

    -webkit-transition-property: font-size, max-height;
    -moz-transition-property: font-size, max-height;
    -o-transition-property: font-size, max-height;
    transition-property: font-size, max-height;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    /*margin: 3vh 0 .5vh 0 !important;*/
    /*        border: solid yellow;*/
}
.ey-text-content.fixed {
    font-size:0;
    line-height:0;
}
/* media responsiveness for icon Text*/

@media screen and (max-width: 1600px){

    .ey-text-content {
    font-size: 2vw;

}



} 


#indexIconsList {
    display: inline;
    width: 100%;
    list-style: none outside none;
    text-align: center;
}

#indexIconsList li {
    width: 25%;
    display: inline-block;
    padding: 0;
    margin: 0;
}



.indexRow {
    background-color: #FBFBFA;
}







@media screen and (max-aspect-ratio: 8/7) {

    .areaSVG{
        max-height:12vh;

    }


    #section0img {
        /*background-position: left bottom;*/
        background-image: none;
        background-color: rgba(1, 1, 1, .95);
        margin: 0;
        padding: 0;
        border-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    .landingLinksList {
        display: none;
    }
    
    .landingLinksListTall {
        min-height: 0;
        height: auto;
        text-align: center;
        width: 17%;
        box-sizing: border-box;
        font-size: 2vw;
        display: inline;
        float: left;
        padding: .5vh 1.5vh .5vh 1.5vh;
        border-width: 1px;
        margin-top: 1vh;
        margin-left: 1.5%;
        margin-right: 1.5%;
        border-width: 1px;
        border-color: White;
        border-style: solid;
        color: White;
        text-decoration: none;
        border-radius: 40px;
        /*        background-color: rgba(255, 255, 255, .2);*/
        text-transform: capitalize;
    }
    
    .first-cell {
        margin-left: 11.5%;
    }
    
    .last-cell {
        margin-right: 11.5%;
    }
    
    .landingLinksListTall a {
        text-transform: capitalize;
        color: White;
        text-align: center;
    }
    
    #landingTextWrapper {
        left: 0;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        margin: 5vh 0 0 0;
        padding: 0;
        height: calc(100% - 12vh);
        /*this controls the top the big text */
        border-style: none;
        border-collapse: collapse;
        bottom: 0;
        margin-top: 15vh;
    }
    
    #smallChris {
        background: url('assets/img/ChrisDarkSepCenteredExt.jpg') no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*background-position: right bottom;*/
        height: 35vh !important;
        width: 100%;
        box-sizing: border-box;
        display: block;
        position: absolute;
        bottom: 0;
        !important
    }
    
    #landingNameInfo {
        background-image: none;
        height: auto;
        width: 100%;
        text-align: center !important;    
        position:absolute;
        right:0; 
        left:0;    
        display: table-row;
        vertical-align: top;

    }
    
    
    #landingName {
        display: table-cell;
        width:50%;
        text-align:right;
/*        float: left;
*/       /* clear: none;*/
position: relative;
margin: 0 auto;
box-sizing:border-box   ;
    }
    #firstName {
        font-size: 8vh;
        letter-spacing
        padding-bottom: .2vh;
        float: right;
        clear: both! important;
        line-height: 5vh;
        padding: 0 .5vw 0 0 ;
    }
    #lastName {
        float: right;
        clear: left;
        font-size: 11.25vh;
        letter-spacing: -.5vh;
        padding: 0 .5vw;
    }


    #landingTitle.landingText {
        display: table-cell;
        /*float: left;*/
        float:none;
text-align:left;
        clear: none;
        padding: 0  0 0 .5vw;
        position: relative;
        margin: 0 auto;
        width:50%;
        box-sizing:border-box   ;
    }


    #landingTitle.landingText span {
        line-height: 3vh;
        font-size: 3vh;
    }

    .line1 {}

    .line2 {
        letter-spacing: .8vh;
        font-weight: 900;
    }

    .line3 {
        letter-spacing: .53vh
    }

    .line4 {
        letter-spacing: .75vh;
        font-weight: 900;
        line-height: 7vh;
        font-size: 3.5vh;
    }


}/* end of 8/7 */


/* wide but narrow */

@media screen and (max-aspect-ratio: 8/7) and (max-width:  900px) {


#smallChris {
        height: 24vh !important;
    }

 #firstName {
        padding: 0;
    }

    #lastName {
        padding: 0;
    
    }

    

    #landingTitle.landingText {
        padding:0;
        width: 100%;
        text-align: center;
        display:block;


    }

.landingText span {
        display: inline-block;
        float:none;
        text-align: center;
    }

    .landingText a {
        display: inline-block;
        float:none;
    text-align: center;
}

    #landingTitle a {
        display: inline-block;
        float:none;
        text-align: center;
        width: 100%;
    }
    

    #landingName {
        width: 100%;
        text-align: center;
    }
    #firstName {
        padding-top: 7vh;
        width: 100%;
        text-align: center;
    }
    #lastName {
        width: 100%;
        text-align: center;
    }
    #landingTextWrapper {
        margin-top: 10vh;
        height: calc(100% - 7vh);
    }
   

}



/* media query for section when screen is square*/

/*  (I nested two other media quries by accident, but the page needs the nesting to work)*/
@media screen and (max-aspect-ratio: 1/1) {


    .ey-nav-bar.fixed {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .ey-row-scale.fixed {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .ey-col-1.fixed {
        width: 25% !important;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        padding: 0;
        display: inline-block;
    }



    .areaSVG {
        box-sizing: border-box;
    }

    .first-cell {
        margin-left: 11.5%;
    }
    .last-cell {
        margin-right: 11.5%;
    }


/* media queries for horizontal list of links at top when screen is in portrait*/
@media screen and (max-width: 600px) {

        .first-cell {
            margin-left: 0;
        }
        .last-cell {
            margin-right: 0;
        }
        .landingLinksListTall {
            width: 23%;
            box-sizing: border-box;
            margin-right: 1%;
            margin-left: 1%;
            font-size: 3vw;
        }
    }
    @media screen and (max-width: 400px) {
        .landingLinksListTall {
            display: none;
        }
    }
    .ey-row-scale {
        width: 100%;
        max-width: 100%;
        /*       padding: 0 15% 0 15% !important;*/
        padding: 0 10%;
        margin: 0;
        /*     border-color: Green;*/
        box-sizing: border-box;
    }
    .ey-col-1 {
        width: 50%;
        display: block;
        float: left;
        padding-bottom: 2vh;
        box-sizing: border-box;
    }
    .areaSVG{
        max-height: 6vh;

    }
    .ey-text-content {
        margin: 0 !important;
        padding: 0 !important;
    }

}/*end of nested media queries




/*first version media query at 700 */

@media screen and (max-width: 700px) {
    .ey-nav-bar.fixed {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .ey-row-scale.fixed {
        width: 100% !important;
        padding: 0 !important;
        margin: 0!important;
        max-height: 16vh;
        float: left;
        text-align: center;
        box-sizing: border-box;
    }
    .ey-col-1.fixed {
        width: 25%;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block;
        box-sizing: border-box;
    }
    .ey-text-content {
        font-size: 80%;
        padding-bottom: 0;
    }
}









@media screen (max-width: 400px) and (max-aspect-ratio: 1/1) {
    #landingLinksWrapper {
        display: none;
    }
    .ey-row-scale {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .ey-col-1 {
        width: 50% !important;
        display: block;
        float: left;
        padding: 0 5px 2vh 5px;
    }
}



/*media queries for icons when screen is tiny*/

@media screen and (max-width: 250px) {
    .ey-text-content {
        max-height:0;
    }
}

@media screen and (max-height: 300px) {
    .ey-text-content {
        padding-bottom: 0;
        font-size: 3vh;
        margin: 0;
        max-height: .5vh;
    }
    #linkCell {
        padding: 0;
        margin: 0;
        max-height: 1%;
        height: 1%;
    }
    .ey-col-1 {
        padding-bottom: 0;
    }
    .ey-row-scale {
        height: 20%;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}




@media screen and (min-width: 200px) and (max-width: 750px) and (max-aspect-ratio: 13/14) {
    #firstName {
        padding: 0;
    }
    #lastName {
        padding: 0;
    }
    #landingTitle {
        padding: 0;
    }
    .ey-col-svg {
        display: none;
    }
    .ey-col-svg.fixed {
        display: block;
        margin: 0;
    }
    .indexRow {
        background-color: transparent;
        text-align: center;
        padding: 0;
    }
    #linkCell {
        background-color: white;
    }
    .indexRow {
        background-color: transparent;
        text-align: center;
    }
    .ey-row-scale {
        padding: 0;
    }
    .indexRow.ey-col-1 {
        padding: 2vh 0;
    }
    .ey-col-1 {
        height: 8vh;
    }

    .areaSVG{
        max-height:0;
    }
    .ey-col-1.fixed {
        height: auto;
    }
    .areaSVG.fixed {
        padding-top: .4vh;
        padding-bottom: .4vh;
    }
    .ey-col-1.eng {
        background-color: rgb(183, 36, 103);
    }
    .ey-col-1.neuro {
        background-color: rgb(242, 235, 22);
    }
    .ey-col-1.web {
        background-color: rgb(0, 173, 220);
    }
    .ey-col-1.stem {
        background-color: rgb(82, 79, 161);
    }
    .ey-nav-bar {
        max-height: none;
    }
    /*.ey-col-1.eng.fixed {background-color:transparent ;}*/
    .ey-text-content {
        padding: 5vh 0;
        color: white;
    }

    .ey-text-content.navText {
        font-size: 2.5vh;
        line-height: 3vh;
        padding: 5vh 0;

    }


    .ey-text-content.neuro {
        color: black !important;
    }
    .ey-text-content.navText.fixed {
        font-size: 0;
        /*font-size: 2.5vh;*/
        line-height: 0;
        /*line-height: 3vh;*/
        /*padding: 5vh 0;*/
        padding: 0;
    }
    #indexFooter {
        height: auto;
    }
    #indexFooter.fixed {
        height: auto;
    }
    /*@media screen and (max-aspect-ratio: 3/4) {
*/
   

    #landingTitle {
        width: 100%;
        text-align: center;

    }

.landingText span {
        display: inline-block;
        float:none;
        text-align: center;
    }

    .landingText a {
        display: inline-block;
        float:none;
    text-align: center;}

    #landingTitle a {
        display: inline-block;
        float:none;
        text-align: center;
    }
    

    #landingName {
        width: 100%;
        text-align: center;
    }
    #firstName {
        padding-top: 7vh;
        width: 100%;
        text-align: center;
    }
    #lastName {
        width: 100%;
        text-align: center;
    }
    #landingTextWrapper {
        margin-top: 10vh;
        height: calc(100% - 7vh);
    }
    #smallChris {
        height: 24vh !important;
    }
}

@media screen and (min-width: 1px) and (max-width: 475px) and (max-aspect-ratio: 7/8) {
    .ey-text-content.navText {
        font-size: 4.5vw;
        line-height: 3vh;
        padding: 10vh 0;
    }
}

/*-----------------------------------------------------------------------*/
/*--------------------CONTACT SECTION ----------------------------------*/
/*-----------------------------------------------------------------------*/

#contactDiv {
    clear: both;
    box-sizing: border-box;
    padding: 5%;
    width: 100% !important;
}

#contactInfoLeftRight {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    border: solid #F5F5F5;
    height: auto;
}

#contactInfoLeftRight a {
    display: block;
}

#contactInfoLeft,
#contactInfoRight {
    text-align: center;
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
}

#contactInfoLeft {
    box-sizing: border-box;
    padding: 5vh;
    background-color: White;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: start;
}


#contactInfoRight {
    text-align: right !important;
    background: url('https://maps.googleapis.com/maps/api/staticmap?center=40.4442,-79.9586&size=640x400&zoom=16&maptype=roadmap%20&style=feature:administrative%7Celement:geometry.fill%7Ccolor:0xf5f5f5&style=feature:administrative%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0xf5f5f5&style=feature:poi%7Celement:all%7Ccolor:0xcdd7cd&style=feature:poi%7Celement:labels.text%7Cvisibility:simplified&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:road.highway%7Celement:all%7Ccolor:0xe0e0e0&style=feature:road.highway%7Celement:labels%7C:visibility:off&style=feature:road.arterial%7Celement:all%7Ccolor:0xe0e0e0&style=feature:road.arterial%7Celement:labels.text.fill%7C:visibility:off&style=feature:road.local%7Celement:all%7C:visibility:on%7Ccolor:0xe0e0e0&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit.station%7Celement:geometry.fill%7Ccolor:0xe0e0e0&style=feature:water%7Celement:geometry.fill%7Ccolor:0xa5b4c8&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x616161&markers=icon:http://i.imgur.com/AbjgSKn.png%7C40.4442,-79.9586&key=AIzaSyCfFYeKwXeZQQRBJtkRmosRXDncNN--HUw') no-repeat;
    background-size: cover;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
}

#contactInfoLeft a, 
#contactInfoRight a {
    display: block;
}

.contactMethodDiv {
    -webkit-flex: 1 1 20%;
    flex: 1 1 20%;
    background-color: White;
    text-align: left;
    padding: 1%;
    box-sizing: border-box;
}

#footDiv {
    -webkit-flex: 1 1 20%;
    flex: 1 1 20%;
}

.contactMethodDiv a {
    color: #616161;
    -webkit-text-decoration: underline;
    text-decoration: underline;
    -moz-text-decoration-color: #616161 !important;
    -webkit-text-decoration-color: #616161 !important;
    /* Code for Firefox */
    text-decoration-color: #616161 !important;
}

.contactTitle {
    display: block;
    font-weight: bold;
    padding-right: 5%;
    color: #CDD7CD;
    font-size: 4vh;
    font-family: Chivo !important;
}

.contactInfoSpan {
    display: block;
    color: #616161;
    font-size: 2vh;
    font-family: Roboto !important;
}


#map {
    text-align: right !important;
    width: 100%;
    height: 100%;
}

.labels {
    color: rgb(82, 79, 161);
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: 60px;
    border: 2px solid black;
    white-space: nowrap;
}


@media screen and (max-aspect-ratio: 7/3) {
    #contactInfoLeftRight {
        display: block;
    }
    #contactInfoLeft,
    #contactInfoRight {
        -webkit-flex: 1 1 50%;
        flex: 1 1 50%;
    }
    #contactInfoLeft {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #contactInfoRight {
        height: 400px;
        -webkit-flex: 1 0 400px;
        flex: 1 0 400px;
    }
    .contactMethodDiv {
        background-color: White;
        box-sizing: border-box;
        -webkit-flex: 1 1 33%;
        flex: 1 1 33%;
        text-align: center;
        padding: 1%;
    }
    #footDiv {
        -webkit-flex: 1 0 66%;
        flex: 1 0 66%;
    }
}

@media screen and (max-aspect-ratio: 7/5) {
    
    #contactInfoLeftRight, 
    #contactInfoLeft {
        display: block;
      }
    
    .contactMethodDiv {
        display: block;
        background-color: White;
        box-sizing: border-box;
        text-align: left;
        padding: 1%;
    }
 

 /* this overruns a bit , too small */   
    #footDiv {display:block;
    
        text-align: left;
        padding: 1%;
    }
}

@media screen and (max-height: 600px) {
    .contactInfoSpan {
        font-size: 12px;
    }
    .contactTitle {
        font-size: 24px !important;
    }
}


/*-----------------------------------------------------------------------*/
/*--------------------lab member SECTION ----------------------------------*/
/*--------(some formatting also applies to areas pages)----------------------*/
/*-----------------------------------------------------------------------*/



/*--------------------lab member photos ----------------------------------*/
/*--------(some formatting also applies to areas pages)----------------------*//*-----------------------------------------------------------------------*/



/
/* color styles for the "other" collaborators  on area pages*/







/* lab member css*/

#membersSection {
    background-color: white;
    /* rgba(242,239,145,.5)*/
}

#membersSection h3 {
    margin-top: 4vw;
    margin-bottom: 1vw;

}


@media screen and (max-width: 500px){

    #membersSection h3{
        font-size: 5vw;

    }

}

.wrapper--team {
    margin: 0;
    padding: 2rem 1rem;
    /*    background-color: rgb(42, 55, 57);
    background-color: #E9E7D0;*/
}

.l-container {
    margin: 0 auto;
    position: relative;
    /*    border: 5px solid rgb(82, 79, 161);*/
}



@media screen and (min-width: 64em) {
    .l-container {
        max-width: 64rem;
    }
}

@media screen and (min-width: 75em) {
    .l-container {
        max-width: 75rem;
    }
}

.team-grid {
    margin: 0;
    text-align: center;
    *zoom: 1;
}

.team-grid:before,
.team-grid:after {
    content: " ";
    display: table;
}

.team-grid:after {
    clear: both;
}

.team-grid__member {
    font-family: 'Roboto';
    font-weight: 100;
    max-width: 100%;
    padding: 0.5rem;
    margin: 0 0 0.5rem;
    display: inline-block;
    float: none;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

@media screen and (min-width: 15em) {
    .team-grid__member {
        width: 49%;
        max-width: none;
    }
}

@media screen and (min-width: 42em) {
    .team-grid__member {
        width: 32.5%;
    }
}

@media screen and (min-width: 62em) {
    .team-grid__member {
        width: 19.45%;
    }
}


.team-grid__member img {
    width: 100%;
    height: auto;
    border: 8px solid #fff;
    box-sizing: border-box;
    display: block;
}

.member__info {
    color: #fff;
    height: calc(100% - 32px);
    width: calc(100% - 32px);
    position: absolute;
    top: 16px;
    left: 16px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.85);
    backface-visibility: hidden;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    z-index: 50;
    vertical-align: middle;
}

.member__name {
    color: #D9BC55;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.2rem;
    margin-bottom: 0;
    padding: 0 12px;
}

.member__title {
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1rem;
    padding: 0 1.5rem;
}

a.member__link {
    background: #D68D2C;
    color: #FFF;
    border-radius: 2px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}

.team-grid__member:hover .member__info {
    opacity: 1;
}

@media screen and (max-width: 1500px) {
    /*media responsiveness for member info */
    .member__info {}
    .member__name {}
    .member__title {}
    a.member__link {}
    .team-grid__member:hover .member__info {}
}


/* ----- Middle Alignment Vertical ----- */

.member__info:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.center-vert-content {
    display: inline-block;
    vertical-align: middle;
    padding-top: 20%;
    padding-bottom: 20%;
}

/* styles for staff on area pages */

#currentMembersDiv .center-vert-content {
    padding-top: 5%;
    padding-bottom: 5%;
}

#membersSection h3.member__name {
    margin-top:0;

}
#currentMembersDiv .member__info {
}

#currentMembersDiv .member__name {
    font-size: .8rem;
    line-height: .8rem;

}

#currentMembersDiv .member__title {
    font-size: 0.8rem;

}

#currentMembersDiv a.member__link {
    font-size: 10px;

}


/*  media responsive text for staff-images, and mouse-over text (index and area pages)*/


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


    /* styles for area pages*/

    .center-vert-content {
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .member__info {
    }

    .member__name {
        font-size: .8rem;
        line-height: .8rem;

    }

    .member__title {
        font-size: 0.8rem;

    }

    a.member__link {
        font-size: 10px;

    }


 /* styles for staff on main page */

    #currentMembersDiv .center-vert-content {
        padding-top: 5%;
        padding-bottom: 5%;
    }

    #currentMembersDiv .member__info {
    }

    #currentMembersDiv .member__name {
        font-size: .8rem;
        line-height: .8rem;

    }

    #currentMembersDiv .member__title {
        font-size: 0.8rem;

    }

    #currentMembersDiv a.member__link {
        font-size: 10px;

    }



}

@media screen and (min-width: 670px) and (max-width: 800px ){


/* styles for area pages*/

    .center-vert-content {
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .member__name {
        font-size: .8rem;
        line-height: .8rem;
        padding-left: 6px;
        padding-right: 6px;

    }

    .member__title {
        font-size: 0.6rem;

    }

    a.member__link {
        font-size: 9px;

    }


    /* styles for main page*/

    #currentMembersDiv .center-vert-content {
        padding-top: 1%;
        padding-bottom: 1%;
    }

    #currentMembersDiv .member__name {
        font-size: .8rem;
        line-height: .8rem;
        padding-left: 6px;
        padding-right: 6px;

    }

    #currentMembersDiv .member__title {
        font-size: 0.6rem;

    }

    #currentMembersDiv a.member__link {
        font-size: 9px;

    }

}


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

    /* styles for area pages */


    .center-vert-content {
        padding-top: 1%;
        padding-bottom: 1%;
    }

    #teamAnc h3 {
        font-size:3vw;
        line-height: 3vw;
    }


    .member__title {
        font-size: 0.8rem;

    }

    a.member__link {
        font-size: 11px;

    }


    /* styles for main page */

    #currentMembersDiv .center-vert-content {
        padding-top: 1%;
        padding-bottom: 1%;
    }

    #currentMembersDiv #teamAnc h3 {
        font-size:3vw;
        line-height: 3vw;
    }


    #currentMembersDiv .member__title {
        font-size: 0.8rem;

    }

    #currentMembersDiv a.member__link {
        font-size: 11px;

    }

}




@media screen and (max-width: 450px) {
    /* styles for area pages */

    .team-grid__member {
        width:100%;

    }

    .center-vert-content {
        padding-top: 20%;
        padding-bottom: 20%;
    }

    #teamAnc h3 {
        font-size:5vw;
        line-height: 5vw;
    }

    .member__name{
        padding-left: 12px;
        padding-right: 12px;
    }


    .member__title {
        font-size: 1rem;
        line-height: 2rem;

    }

    a.member__link {
        font-size: 14px;

    }

/* styles for main page */

    #currentMembersDiv .team-grid__member {
        width:100%;

    }

    #currentMembersDiv .center-vert-content {
        padding-top: 20%;
        padding-bottom: 20%;
    }

    #currentMembersDiv #teamAnc h3 {
        font-size:5vw;
        line-height: 5vw;
    }

    #currentMembersDiv .member__name{
        padding-left: 12px;
        padding-right: 12px;
    }


    #currentMembersDiv .member__title {
        font-size: 1rem;
        line-height: 2rem;

    }

    #currentMembersDiv a.member__link {
        font-size: 14px;

    }



}




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


    /* styles for area pages*/

    .center-vert-content {
padding-top: 10%;
padding-bottom: 10%;
}
.member__name {
font-size: .7rem;
padding: 0 6px;
}
.member__title {
font-size: 0.6rem;
padding: 0 .3rem;
}
a.member__link {
font-size: 10px;
}
.team-grid__member:hover .member__info {}

/*styles for main page */

    #currentMembersDiv .center-vert-content {
        padding-top: 10%;
        padding-bottom: 10%;
    }

    #currentMembersDiv .member__name {
        font-size: .7rem;
        padding: 0 6px;
    }

    #currentMembersDiv .member__title {
        font-size: 0.6rem;
        padding: 0 .3rem;
    }
    #currentMembersDiv a.member__link {
        font-size: 10px;
    }

    #currentMembersDiv .team-grid__member:hover .member__info {}

}














/* styling to prevent changes in team member hover */



/*alignment styles for the other collaborators*/

.collabList {
    list-style-type: none !important;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    /*style*/
    padding: 0.5em;
}

.collabList li {
    white-space: nowrap;
    justify-content: center;
    /*style*/
    margin: 0.5em;
    /*  min-height: 80px;*/
    width: 150px;
    background-color: #CDD7CD;
    padding: 1em;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    -webkit-box-align: center !important;
    align-items: center !important;
}

.collabList a {
    /* kill the inline-block white-space */
    letter-spacing: -1px;
    /* http://stackoverflow.com/a/6351697/759144 */
    text-align: center;
    padding: 0;
    margin: 0;
    color: #616161;
    display: block;
}

.collabList .affiliation a {
    font-size: 60%;
}

.collab span {
    display: block;
    font-size: 100%;
}

.collab .affiliation {
    font-size: 80%;
}


/*media queries for the "other" collaborators */

@media screen and (max-aspect-ratio: 1/1) {
    .collab li {
        margin: 0.3em;
        padding: .25em 1.5em;
        width: 90px;
    }
    .collab span {
        font-size: 100%;
    }
    .collab .affiliation {
        font-size: 80%;
    }
}





/*--------------------lab member text blocks ----------------------------------*/
/*--------(some formatting also applies to areas pages)----------------------*//*-----------------------------------------------------------------------*/


/* color ofr landing header */
.collabList.engCollabList li {
    background-color: rgba(183, 36, 103, 0);
}

.collabList.engCollabList a {
    color: white;
    text-decoration: none;
}


.collabList.neuroCollabList li {
    background-color: rgba(242, 235, 22, 0);
}

.collabList.neuroCollabList a {
    color: color: rgb(100, 100, 100);
    text-decoration: none;
}


.collabList.webCollabList li {
    background-color: rgba(0, 173, 220, 0);
}

.collabList.webCollabList a {
    color: black;
    text-decoration: none;
}


.collabList.stemCollabList li {
    background-color: rgba(82, 79, 161, 0);
}

.collabList.stemCollabList a {
    color: white;
    text-decoration: none;
}



/* background color for area collaborator section */

#teamAnc.stem {
    background: rgba(82, 79, 161, .7);
}

#teamAnc.neuro {
    background: #f2eb16;
}

#teamAnc.web {
    background: rgba(0, 173, 220, .7);
}

#teamAnc.eng {
    background: rgba(183, 36, 103, .7);
}



/*text introducing the "other" collaborators on area pages */

.teamContentWrapper h3 {
    color: white;
    text-align: center;
    padding-top: 3vh;
    padding-bottom: 3vh;
    text-transform: uppercase;
}

.teamContentWrapper .dark h3 {
    color: rgb(100, 100, 100);
}


/* keeps the text in the team grid small */
.team-grid h3 {
    padding-top: 0;
    padding-bottom: 0;
    text-transform: none;
}


#teamAnc h1 {
    color: white;
}

#teamAnc.dark h1 {
    color: rgb(100, 100, 100);
}

.memberHeader {
    color: rgb(1, 1, 1);
}

.teamList {
    list-style: none;
    text-align: center;
}

.teamList li {
    text-align: center;
}



#pastPostDocs li:hover,
#pastGrads li:hover  {

    background-color: darkgrey;

}


#membersDiv li:hover .activeMember {

    font-weight: 700;

}

#pastPostDocs li:hover .affiliation,
#pastGrads li:hover .affiliation {

    font-weight: 300;

}

#membersDiv li:hover .affiliation {

     color: #f2eb16;

}


#stemCollabDiv li:hover span,
#neuroCollabDiv li:hover span,
#engCollabDiv li:hover span,
#webCollabDiv li:hover span {

    font-weight:700;
}



#stemCollabDiv li:hover span,
#neuroCollabDiv li:hover span,
#engCollabDiv li:hover span {
    color:black;
}



#webCollabDiv li:hover span  {
    color:white;
}

#stemCollabDiv li:hover span.affiliation   {
    color: #FFE9A4;
}

#neuroCollabDiv li:hover span.affiliation   {
    color:#6718A3;
}


#engCollabDiv li:hover span.affiliation   {
    color:#B1DF6E;
}


#webCollabDiv li:hover span.affiliation   {
    color:#FFA84E;
}










#pastPostDocs {
    list-style-type: none !important;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    /*style*/
    padding: 0.5em;
    /* background-color: royalblue;*/
}

#pastPostDocs a {
    display: block;
}

.pastPostDoc {
    white-space: nowrap;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    /*style*/
    margin: 0.5em;
    width: 150px;
    padding: 1em;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    -webkit-box-align: center !important;
    align-items: center !important;
}

.pastPostDoc a {
    /* kill the inline-block white-space */
    letter-spacing: -1px;
    /* http://stackoverflow.com/a/6351697/759144 */
    text-align: center;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.pastPostDoc span {
    display: block;
}

@media screen and (max-aspect-ratio: 1/1) {
    .pastPostDoc {
        margin: 0.3em;
        padding: .25em 1.5em;
        width: 90px;
    }
}

#pastGrads {
    list-style-type: none !important;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    /*style*/
    padding: 0.5em;
    /* background-color: royalblue;*/
}

#pastGrads a {
    display: block;
}

.pastGrad {
    white-space: nowrap;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    /*style*/
    margin: 0.5em;
    /*  min-height: 80px;*/
    width: 150px;
    /*  background-color: rgb(40, 137, 191);*/
    padding: 1em;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    -webkit-box-align: center !important;
    align-items: center !important;
}

.pastGrad a {
    /* kill the inline-block white-space */
    letter-spacing: -1px;
    /* http://stackoverflow.com/a/6351697/759144 */
    text-align: center;
    padding: 0;
    margin: 0;
    display: block;
    /*   color: white;*/
    text-decoration: none;
}

.pastGrad span {
    display: block;
}

@media screen and (max-aspect-ratio: 1/1) {
    .pastGrad {
        margin: 0.3em;
        padding: .25em 1.5em;
        width: 90px;
    }
}

#staffPlural {
    list-style-type: none !important;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    /*style*/
    padding: 0.5em;
    /* background-color: royalblue;*/
}

#staffPlural a {
    display: flex;
}

.staff {
    white-space: nowrap;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    /*style*/
    margin: 0.5em;
    /*  min-height: 80px;*/
    width: 150px;
    /*background-color: rgb(40, 137, 191);*/
    padding: 1em;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    -webkit-box-align: center !important;
    align-items: center !important;
}

.staff a {
    display: block;
}

.staff {
    /*    color: white;*/
}

.pastPostDoc span {
    display: block;
}

#pastMembersDiv span {
    color: Black;
    font-family: 'Chivo';
    font-weight: 100;
    font-size: 120%;
}

#pastMembersDiv span.affiliation {
    font-size: 100%;
}

@media screen and (max-aspect-ratio: 1/1) {
    #pastMembersDiv span {
        font-size: 100%;
    }
    #pastMembersDiv span.affiliation {
        font-size: 80%;
    }
}


@media screen and (max-aspect-ratio: 1/1) {
    .staff {
        margin: 0.3em;
        padding: .5em 1.5em;
        width: 90px;
    }
    .staff a {
        font-size: 9px !important;
    }
}


/*__________________________________________________________*/
/* footer contact section */
/* (applies to all pages) */
/*__________________________________________________________*/


#footerSection,
#footerSection .fp-slide,
#footerSection .fp-tableCell {
    height: 50px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.footerList {
    text-align: center;
    margin: 0 auto;
    float: right;
    color: Slate Gray;
    vertical-align: top;
    width: 100%;
    list-style: none;
    -webkit-text-stroke: 1px;
    text-stroke: 1px;
    letter-spacing: 2px;
}


/*    the heights for navmenu and hover li need to be the same*/

.footerList li {
    display: inline;
    vertical-align: middle;
    color: #909090;
    /*area color*/
}

.footerList li a {
    font-size: 24px;
    color: #909090;
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 30px;
    padding-right: 30px;
    display: inline;
    white-space: nowrap;
}

@media screen and (max-width: 500px){
    .footerList li a {
        padding-left: 0px;
        padding-right: 0px;

    }



}

/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
                /*AREA PAGES AND PUBLICATIONS EXCLUSIVELY*/
/*---------------------------------------------------------------*/







/*---------------------------------------------------------------*/
                /*HEADER FOR AREA AND PUBLICATION PAGES */
/*---------------------------------------------------------------*/







#header {
    position: fixed;
    top: 0;
    margin-bottom: -100px;
    left: 0;
    z-index: 999;
    /* text-align: left;*/
    /* padding-top: 2px;*/
    padding-left: .5%;
    padding-right: .5%;
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    /*    height: auto;*/
    background-color: #909090!important;
    /*area color*/
    width: 100%;
    display: -webkit-flex;
    /*safari*/
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
}



#headerSVG {
    margin: 0;
    display: block;
}

#headerSVGDiv {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 0 !important;
    vertical-align: middle !important;
    height: auto;
    /*width: auto;
    display: inline-block;
*/
}



/*---------------------------------------------------------------*/
/*header icon specific svg formatting (mostly color) */
/*---------------------------------------------------------------*/


#iris-header {
    fill: rgb(183, 36, 103);
}

.eSVG:hover #circle-background-e,

/*.active #circle-background-e,*/

#iris-header,
{
    fill: rgb(183, 36, 103);
}

.eSVG:hover #eyelid-header,
.eSVG:hover #iris-header,
#eyelid-header,
#iris-header {
    stroke: rgb(183, 36, 103);
}

.eSVG:hover #sclera-header,
#sclera-header,
.eSVG:hover #pupil-header,
#pupil-header {
    fill: white;
}

#eyelid-header {
    fill: #939598;
}

.eSVG:hover #pupil-header {
    -webkit-transform: translate(-38.53px, -36.95px) scale(2);
    transform: translate(-38.53px, -36.95px) scale(2);
}

#pupil-header {
    -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

.shocks-header {
    fill-opacity: 0;
}

.nSVG:hover #brain-fill-header,
#brain-fill-header,
.shocks-header {
    fill: white;
}

.nSVG:hover #brain-outline-header,
#brain-outline-header {
    stroke: #F2EB16;
}

.nSVG:hover .shocks-header {
    fill-opacity: 1;
    stroke: #939598;
    fill: #F2EB16;
    stroke-width: .5;
}

/*end of svg formatting*/








#areaTitle {
    /*display: inline-block;
    max-width: 100%;*/
    text-transform: uppercase;
    /*    display: inline-block;
max-width: 100%;
    height: 100%;
   */
    box-sizing: border-box;
    text-transform: uppercase;
    text-decoration: none;
    color: White;
    vertical-align: middle;
    -webkit-flex: 0 1 15%;
    flex: 0 1 15%;
    padding: 0 0 0 3px !important;
    margin: 0!important;
}

#areaTitle a {
    text-transform: uppercase;
    font-size: 30px;
    text-decoration: none;
    color: White;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0!important;
    white-space: nowrap;
}

#nav {
    /*max-width: 90%;
    text-align: right;
    float: right;*/
    -webkit-flex: 1 1 90%;
    flex: 1 1 90%;
    padding: 0;
}

#menu {
    padding-left: 0;
    /*   padding-top: 15px;
    padding-bottom: 15px;*/
    padding-right: 20px;
    text-align: right;
    vertical-align: top;
    width: auto;
    list-style: none;
    /*   -webkit-text-stroke: 1px;*/
    letter-spacing: 2px;
}

.nav.e {
    background-color: rgb(183, 36, 103);
}


/*    the heights for navmenu and hover li need to be the same*/

#menu li {
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    color: #909090;
    /*area color*/
    display: inline;
}

#menu li a {
    text-transform: uppercase;
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
}


/* publications menu */
.pubMenuList a {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

ul.nav#menu a:hover {
    border-bottom-style: solid;
    border-bottom-width: 6px;
}


ul.nav.stemMenuList#menu a:hover {
    border-bottom-color: #FFE9A4;
}


ul.nav.neuroMenuList#menu a:hover {
    border-bottom-color: #8763A3;
}

ul.nav.engMenuList#menu a:hover {
    border-bottom-color: #B1DF6E ;
}

ul.nav.webMenuList#menu a:hover {
    border-bottom-color: #FFA84E;
}
ul.nav.pubMenuList#menu a:hover {
    border-bottom-color: black;
}






ul.nav#menu li:hover a {
    color: white;
    text-decoration: none;
}


/* stem menu changes first because of long text */
@media screen and (max-width:930px) {
    #menu.stem li {
        display: inline;
        float: left;
        box-sizing: border-box !important;
        width: 33%;
        margin: 0 !important;
        padding: 3px 0 !important;
        border-style: none;
        border-left-width: 0;
        border-right-width: 0;
        border-left-style: none;
        border-right-style: none;
        /*  border: 1px solid WhiteSmoke;*/
    }
}

@media screen and (max-width:800px) {
    #menu.stem li {
        width: 50%;
    }
    /* if there is an odd child in the menu list have it stretch*/
    #menu.stem li:last-child:nth-child(odd) {
        width: 100%;
    }
}


@media screen and (max-width:400px) {
    #menu.stem li {
        width: 100%;
    }
    /* if there is an odd child in the menu list have it stretch*/
    #menu.stem li:last-child:nth-child(odd) {
        width: 100%;
    }
}




/* media queries for publication hamburger menu */

@media screen and (max-width:1050px) {
    #menu.pub  {
        width:100%;
    }
 

    #menu.pub li {
        display: inline;
        box-sizing: border-box !important;
        width: auto;
        margin: 0 !important;
        padding: 3px 0 !important;
        border-style: none;
        border-left-width: 0;
        border-right-width: 0;
        border-left-style: none;
        border-right-style: none;
    }
 
    #menu .pubMenuList li {
        display: inline !important;
        float: left !important;
        box-sizing: border-box !important;
        width: 50% !important;
        margin: 0 !important;
        padding: 3px 0 !important;
        border-style: none !important;
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        border-left-style: none !important;
        border-right-style: none !important;
        /*  border: 1px solid WhiteSmoke;*/
    }

}


@media screen and (max-width:930px) {
    #menu.pub li {
        float: left;
        width: 50%;
    }

    #menu.pub li:last-child:nth-child(odd) {
        width: 100%;
    }
}



@media screen and (max-width:800px) {
    #menu.pub li {
    
        width: 100%;
    }
}




@media screen and (max-width:400px) {
    #menu.pub li {
        width: 100%;
    }
    /* if there is an odd child in the menu list have it stretch*/
    #menu.pub li:last-child:nth-child(odd) {
        width: 100%;
    }
}


 

@media screen and (max-width:800px) {
    #menu li {
        display: inline;
        float: left;
        box-sizing: border-box !important;
        width: 50%;
        margin: 0 !important;
        padding: 3px 0 !important;
        border-style: none;
        border-left-width: 0;
        border-right-width: 0;
        border-left-style: none;
        border-right-style: none;
        /*  border: 1px solid WhiteSmoke;*/
    }
    /* if there is an odd child in the menu list have it stretch*/
    #menu li:last-child:nth-child(odd) {
        width: 100%;
    }
}




@media screen and (max-width:400px) {
    #menu li {
        display: inline;
        float: left;
        box-sizing: border-box !important;
        width: 100%;
        margin: 0 !important;
        padding: 3px 0 !important;
        border-style: none;
        border-left-width: 0;
        border-right-width: 0;
        border-left-style: none;
        border-right-style: none;
        /*  border: 1px solid WhiteSmoke;*/
    }

}

/* media query for resizing area page main header text */

@media screen and (max-width:1200px) {
    #areaTitle a {
        font-size: 3vw;
    }
    #menu li a {
        font-size: 1.2vw;
    }
    ul.nav#menu li.active a {
        border-bottom: 3px solid DimGray;
    }
}

@media screen and (max-width:950px) {
    #menu li a {
        font-size: 1.5vw;
        padding-left: 3px;
        padding-right: 3px;
    }
    #menu li {
        padding-left: 5px;
        padding-right: 5px;
    }
}


/* added to make active special */
/*this class must be designated as the "activeClass" parameter in the javascript*/


.pubActiveMenu {
    text-decoration: none;
    border-bottom: 6px solid WhiteSmoke;
    color: #000;
    text-decoration: underline;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.neuroActiveMenu {
    text-decoration: none;
    border-bottom: 6px solid rgb(242, 239, 141);
    color: #000;
    text-decoration: underline;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.webActiveMenu {
    text-decoration: none;
    border-bottom: 6px solid rgb(122, 209, 234);
    color: #000;
    text-decoration: underline;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.engActiveMenu {
    text-decoration: none;
    border-bottom: 6px solid rgb(217, 127, 168);
    color: #000;
    text-decoration: underline;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.stemActiveMenu {
    text-decoration: none;
    border-bottom: 6px solid rgb(156, 155, 204);
    color: #000;
    text-decoration: underline;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* formatting for hamburger button and cross*/


.cross {
    color: White !important;
    float: right;
    font-size: 20px;
    line-height: 30px;
    /*  margin-top: 5px;*/
    margin-right: 5px;
    padding: 0 3px 0 3px;
    display: none;
}

.hamburger {
    color: White;
    float: right;
    font-size: 20px;
    line-height: 30px;
    /*margin-top: 5px;*/
    padding: 0 4px 0 4px;
    display: none;
    margin-right: 5px;
}

.hamburgerDiv {
    display: none;
}



/*_______________________________________________________________*/
/*                      triggering hamburger menu */
/*_______________________________________________________________*/



/*______________________________________________*/
/*          publiction hamburger  menu */

@media screen and (max-width: 1050px) {
    .hamburgerDiv.pub {
        display: inline;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        padding-right: 5px;
    }
    #header.pub {
        justify-content: left;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #areaTitle.pub a {
        font-size: 3vw;
    }
    #nav.pub {
        text-align: center;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        padding: 0 0 5px 0;
    }
    #menu.pub {
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #menu.pub li {
        padding: 0;
        margin-left: 1%;
        margin-right: 1%;
    }
    #menu.pub li a {
        padding: 0;
        margin: 0;
        font-size: 100%;
    }
}



/*______________________________________________*/
/*          stem  hamburger  menu */

@media screen and (max-width: 930px) {
    .hamburgerDiv.stem {
        display: inline;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        padding-right: 5px;
    }
    #header.stem {
        justify-content: left;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #areaTitle.stem a {
        font-size: 3vw;
    }
    #nav.stem {
        text-align: center;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        padding: 0 0 5px 0;
    }
    #menu.stem {
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #menu.stem li {
        padding: 0;
        margin-left: 1%;
        margin-right: 1%;
    }
    #menu.stem li a {
        padding: 0;
        margin: 0;
        font-size: 100%;
    }
}


/*______________________________________________*/
/*          all other   hamburger  menus */

@media screen and (max-width: 800px) {
    .hamburgerDiv {
        display: inline;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        padding-right: 5px;
    }
    #header {
        justify-content: left;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #areaTitle a {
        font-size: 4vw;
    }
    #nav {
        text-align: center;
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        /*padding: 0 0 5px 0;*/
        padding: 0 0 0 0;
    }
    #menu {
        width: 100% !important;
        min-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #menu li {
        padding: 0;
        margin-left: 1%;
        margin-right: 1%;
    }
    #menu li a {
        padding: 0;
        margin: 0;
        font-size: 100%;
    }
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/* AREA PAGES CONTENT  */
/*-------------------------------------------------*/
/*-------------------------------------------------*/



/*-------------------------------------------------*/
/* OVERVIEW AND PROJECT SECTIONS  */
/*-------------------------------------------------*/



/*overview color*/

#overviewAnc {
    background-color: rgb(245, 245, 245);
    margin-top: 0;
    padding: 10px 0;
}



/* overVIEW INTRO */

.imgTableDiv {
    padding:  0 8%;
}

.imgTableDiv img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.imgVertRow {
    display: none;
}

.imgHorRow {
    display: table-row;
}

.imgTable {
    border-collapse: collapse;
}

.imgText {
    background-color: rgb(245, 245, 245);
}

.imgImg {
    background-color: rgb(245, 245, 245);
}

.imgTextHor {
    width: 55%;
}

.imgImgHor {
    width: 45%;
}



/* FORMATING FOR WIDE IMAGES LIKE SWORD */
/*-------------------*/
.imgTextHor.wideImgText {
    width: 20%;
}

.imgImgHor.wideImgImg {
    width: 80%;
}
/*-------------------*/


.project td {
    padding: 1vw;
}


/*media query for area Images to display below header text when screen is tall */

@media (max-width: 950px)  {
   
 .imgTableDiv {
    padding: 0 3%;
}
 
.project {margin: 3%;}

}


@media (max-width: 500px) and (max-aspect-ratio: 1/1) {
    .imgHorRow {
        display: none;
    }
    .imgVertRow {
        display: table-row;
    }

 .imgTableDiv {
    padding: 0;
}
 
.project {margin:5% 0 ;}

}


/* STEM IMAGES */

.stemMainLeftImg,
.stemMainRightImg,
.stemMainLeftText,
.stemMainRightText {
    width: 50.0%;
    background-color: WhiteSmoke;
}

.imgTableDiv div {
    width: 50%;
}


/*_____________________________________*/
/*            findings boxes*/
/*_____________________________________*/


/* outer findings box */
.home_col {
    border-radius: 10px;
    /*height:506px;*/
    border-width: 1px;
    text-align: center;
           margin: 2vw 12vw 2vw 12vw;

box-sizing:     border-box; 
}

    /*border-style: solid;*/



.home_col.eng {
    background-color: rgba(183, 36, 103, .05);
    color: rgb (144, 144, 144);
    border-color: rgb(183, 36, 103)
}

.home_col.web {
    background-color: rgba(0, 173, 220, .05);
    color: rgb (144, 144, 144);
    border-color: rgb(0, 173, 220)
}

.home_col.stem {
    background-color: rgba(82, 79, 161, .05);
    color: rgb (144, 144, 144);
    border-color: rgb(82, 79, 161)
}

.home_col.neuro {
    background-color: rgba(242, 235, 22, .05);
    color: rgb (144, 144, 144);
    border-color: rgb(242, 235, 22)
}

.home_col p {
    margin-bottom: 20px;
    text-align: center;
}

.home_col .home_col_inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /*height:200px;*/
    background: url(images/bg_home_section.jpg) top center no-repeat;
    overflow: hidden;
}

.home_col .home_col_inner .left_box {
    width: 50%;
    float: left;
}

.home_col .home_col_inner .right_box {
    width: 50%;
    float: left;
}

.home_col .home_col_inner .left_third {
    width: 33%;
    float: left;
}

.home_col .home_col_inner .middle_third {
    width: 33%;
    float: left;
}

.home_col .home_col_inner .right_third {
    width: 33%;
    float: left;
}



.home_col .inner_box {
    padding: 0 3vw;
    text-align: center;
    display: inline-block;
}



.home_col h3 {
    text-align: left;
    width: 100%;
    background-color: lightGray;
    margin-bottom: 20px;
    letter-spacing: 4px;
    display: inline-block;
    -webkit-box-shadow: 0px 1px 5px #888888;
    -moz-box-shadow: 0px 1px 5px #888888;
    box-shadow: 0px 1px 5px #888888;
    box-shadow: 0px 1px 5px #888888;
}


.home_icon {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 29px 0 20px 0;
    text-align: center;
    box-sizing:     border-box; 
}

.home_icon h3 {
    color: #303030;
    margin-bottom: 20px;
}

.home_icon a {
    margin: 0 3px;
}

/*padding changes for findings*/

@media screen and (max-width: 1000px) {

    .home_col .inner_box {
        padding: 0 20px 0 20px;
        text-align: center;
        display: inline-block;
    }

/* outer findings box */

      .home_col {
            margin: 2vw 10vw 2vw 10vw;
    }

}

@media screen and (max-width: 600px) {
    .right_box,
    .left_box {
        width: 100% !important;
        }


      .home_icon {     padding: 29px 0 20px 0;
 }  
    

    .home_col {
            margin: 2vw 6vw 2vw 6vw;
    }


    .areaSection h3{

        font-size: 4vw;
        text-align: center;

    }


}


/*  PUBLICATION LINK/BUTTON AT THE BOTTOM OF AREA PAGES */

/* PUBLCIATION button for area pages */

.pubsContentWrapper {
    text-align: center;
    !important
}

#publicationButton {
    text-align: center;
    max-width: 80%;
    margin: 0;
    padding: 3vw;
    display: inline-block;
}


.pubsContentWrapper span {
    text-transform: uppercase;
    color: White;
    width: auto;
    white-space: nowrap;
    /*  font-family: 'Chivo';*/
}



#publicationButton a {
    text-decoration: none;
    color: White;
}

.svgPubDiv {
    width: auto;
    margin: 0;
    display: inline-block;
}

/* publication button media query */

@media screen and (max-width: 1000px) {
    .pubsContentWrapper span {
        white-space: normal;
        display: block;
    }
}



/* ================================================ */


/*                 FOOTER CODE                      */


/* ================================================ */

#navFooter {
    -webkit-box-shadow: 0px 16px 8px 15px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 16px 8px 15px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 16px 8px 15px rgba(0, 0, 0, 0.75);
    width: 100% !important;
    /*display: block; 
     overflow: auto;
    word-break: break-all; */
    z-index: 100000;
    table-layout: fixed;
    display: table;
    background-color: #909090;
    /*area color*/
    text-align: center;
    top: auto;
    padding: 0;
    bottom: 0;
    margin: 0;
    position: fixed;
    width: auto;
    vertical-align: middle;
    border-collapse: collapse;
    -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

#rowDiv {
    display: table-row;
    vertical-align: middle;
}

.footerButtonUl {
    list-style: none outside none;
    margin: 0;
    padding: 2px 0;
    display: table-cell;
    width: 25%;
    vertical-align: middle;
}

.buttonListLeft {
    text-align: right;
    padding-right: 3% !important;
}

.buttonListRight {
    padding-left: 3% !important;
    text-align: left;
    vertical-align: middle;
}

.footerButtonLi {
    border: 0;
    width: 20% !important;
    padding: 0;
    vertical-align: middle;
    position: relative;
}

.svgSpan {
    display: none;
    vertical-align: middle;
    color: rgb(82, 79, 161);
    margin-top: -30px;
}

.footerLeftLi {
    float: right;
    margin: 0;
    vertical-align: middle;
}

.footerRightLi {
    float: left;
    margin: 0;
    vertical-align: middle;
}

.footerSVGDiv {
    width: 100%;
    vertical-align: middle;
}

.footerSVG {
    display: inline;
    vertical-align: middle;
}

#nameBoxFooter {
    text-align: center !important;
    display: table-cell;
    width: 190px;
    margin: 0;
    padding: 0;
    height: 100% !important;
    vertical-align: middle;
}

#nameBoxFooter a {
    /*letter-spacing: -2px;*/
    font-size: 150%;
    margin: 0;
    padding: 0;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    color: White;
    white-space: nowrap;
    height: 100% !important;
    text-align: center !important;
}

#initials {
    display: none;
}

#nameBox {
    letter-spacing: -2px;
    font-size: 150%;
    display: inline-block;
    padding-top: 5px;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    color: White;
    /*    white-space: nowrap;*/
}


.footerButtonUl {
    vertical-align: middle;
}


.eSVG>span,
.sSVG>span,
.wSVG>span,
.nSVG>span,
#nameBoxFooter:hover span {
    background-color: White;
    -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 1);
    /*text-shadow: 2px 2px 3px #000000;*/
}

.nSVG:hover > span,
.eSVG:hover > span,
.wSVG:hover > span,
.sSVG:hover > span,
#nameBoxFooter:hover span
{
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
}

.sSVG:hover > span {
    float: right;
}

.wSVG:hover > span {
    float: left;
}

.eSVG:hover > span {
    position: absolute;
    left: 5px;
}

.nSVG:hover > span {
    position: absolute;
    right: 5px;
}

#nameBoxFooter:hover span {
display:block;
position: fixed;
    text-align: center;
    left: 50%;
    font-size: 66%;
    margin-left: -20px;
    vertical-align: middle;
    color: #909090;
    margin-top: -30px;
    line-height: 20px;

}


.eSVG>span,
.sSVG>span,
.wSVG>span,
.nSVG>span {
    color: #909090;
    
}


span.notFixed {
    display: none !important;
}

.indexRow.nSVG:hover > span.fixed,
.indexRow.eSVG:hover > span.fixed,
.indexRow.wSVG:hover > span.fixed,
.indexRow.sSVG:hover > span.fixed
{
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    position: absolute;
    background-color: white;
    -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 1);


}


.indexRow.sSVG:hover > span.fixed {
    margin-left: -20px;
}

.indexRow.wSVG:hover > span.fixed {
    margin-left: -52px;
}

.indexRow.eSVG:hover > span.fixed {
    left: 20%;
}

.indexRow.nSVG:hover > span.fixed {
    right: 20%;
}

span.fixed{
    bottom: 60px;
    font-size: 100%;
    vertical-align: middle;
    color: #909090;
    margin-top: -30px;
    line-height: 20px;


}


.indexRow.eSVG>span,
.indexRow.sSVG>span,
.indexRow.wSVG>span,
.indexRow.nSVG>span {
    color: #909090;

}

@media screen and (max-width: 800px){


    .indexRow.eSVG:hover > span.fixed {
        left: 5%;
    }

    .indexRow.nSVG:hover > span.fixed {
        right: 5%;
    }



}


/* ================================================ */


/*             FOOTER MEDIA QUERIES                 */


/* ================================================ */

@media screen and (max-width: 700px) {
    .footerButtonLi {
        border: 0;
        width: 50% !important;
        padding: 0;
    }
    #initials {
        display: inline;
    }
    #nameBoxFooter {
        width: 10%;
    }
    #longName {
        display: none;
    }
    #navFooter {
        width: 100%;
        box-sizing: border-box;
    }
}






/*------------------------------------------*/

/*------------------------------------------*/
/*      PUBLICATION PAGE EXCLUSIVELY */
/*------------------------------------------*/

/*------------------------------------------*/

.publicationPage section {
    padding: 5% 10%;
}

.publicationPage section > div {
    padding: 0 5%;
}

#booksAnc {
    padding: 0;
}

#booksPubDiv {
    padding: 0;
}


@media screen {
    .apa,
    .apa ul,
    .apa ol,
    .apa dl,
    .ref-apa,
    .ref-apa ul,
    .ref-apa ol,
    .ref-apa dl,
    .apa-ref,
    .apa-ref ul,
    .apa-ref ol,
    .apa-ref dl,
    .refapa,
    .refapa ul,
    .refapa ol,
    .refapa dl,
    .aparef,
    .aparef ul,
    .aparef ol,
    .aparef dl {
        padding-left: 0;
        margin-left: 0;
        font-family: 'Roboto';
    }
    .apa li,
    .ref-apa li,
    .refapa li,
    .apa-ref li,
    .aparef li {
        list-style-type: none;
    }
    .apa p,
    .apa li,
    .apa dd,
    .ref-apa p,
    .ref-apa li,
    .ref-apa dd,
    .refapa p,
    .refapa li,
    .refapa dd,
    .apa-ref p,
    .apa-ref li,
    .apa-ref dd,
    .aparef p,
    .aparef li,
    .aparef dd {
        margin-left: 2em;
        text-indent: -2em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

.pubSub {
    vertical-align: top;
    padding: 0;
    vertical-align: top;
    border-left: 15px solid;
    border-right: 15px solid;
}

#stemPubDiv {
    display: table;
    table-layout: fixed;
    border-style: none;
    padding: 0;
    width: 100%;
    position:relative;
}

/*border between two stem columns*/
 #stemPubDiv:after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  background:  rgba(82, 79, 161, .5);
  content: "";
  height: 100%;
  display: block;
}

.stemExperts,
.stemLearning {
    /*box-sizing: border-box; */
    width: 50%;
    display: table-cell;
    margin: 0;
}

.stemExperts {
    border-collapse: collapse;
    border-left: 15px solid;
    border-left-color: rgb(82, 79, 161);
}

.stemLearning {
    border-collapse: collapse;
    border-right: 15px solid;
    border-right-color: rgb(82, 79, 161);
}

#stemPubDiv h3 {
    display: table-cell;
    width: 100% !important;
    min-height: 200px;
    box-sizing: border-box;
    vertical-align: bottom;
    padding: 5%;
}

.expertList {
    border-collapse: collapse;
    padding: 2.5%;

}

.learningList {
    border-collapse: collapse;
    padding: 2.5%;
}

@media screen and (max-width: 850px) {
    #stemPubDiv {
        display: inline-block;
    }

 #stemPubDiv:after {
  background:  rgba(82, 79, 161, 0);
}


    .stemExperts,
    .stemLearning {
        display: block;
        /*box-sizing: border-box; */
        width: 100% !important;
    }

    .stemExperts {
border-style:none;

    }

.stemLearning {
    border-style:none;
}

    #stemPubDiv h3 {
        display: block;
        width: 100% !important;
        min-height: 0;
        text-align: center;
    }
    .expertList {
        padding: 0 5%;
        /* box-sizing:     border-box; 
   */

 border-left: 15px solid;
    border-left-color: rgb(82, 79, 161);

        border-right: 15px solid;
        border-right-color: rgb(82, 79, 161);
    }
    .learningList {
        padding: 0 5%;
        border-left: 15px solid;
        border-left-color: rgb(82, 79, 161);

        border-right: 15px solid;
    border-right-color: rgb(82, 79, 161);
    }

}
#stemPubDiv {
    border-left-color: rgb(82, 79, 161);
    border-right-color: rgb(82, 79, 161);
}

#webPubDiv {
    border-left-color: rgb(0, 173, 220);
    border-right-color: rgb(0, 173, 220);
}

#neuroPubDiv {
    border-left-color: #F2EB16;
    border-right-color: #F2EB16;
}

#engPubDiv {
    border-left-color: rgb(183, 36, 103);
    border-right-color: rgb(183, 36, 103);
}

#hciPubDiv {
    border-left-color: Green;
    border-right-color: Green;
}

#strategyPubDiv {
    border-left-color: Turquoise;
    border-right-color: Turquoise;
}

#generalPubDiv {
    border-left-color: Gray;
    border-right-color: Gray;
}


#booksPubDiv {
    border-right-style: solid;
    border-left-style: solid;
    border-right-width: 15px;
    border-left-width: 15px;
    border-right-color: red;
    border-left-color: Red !important;
    padding: 0 5%;
    margin: 5% 10%;
}

/*#booksAnc {
    border-left-color: Red !important;
    padding: 5% 10%;
}
*/
#proceedingsPubDiv {
    border-left-color: Brown;
}

.title {
    font-weight: bold;
    font-size: 14;
}

.ref-apa a {
    color: black;
    text-decoration: none;
    padding: 0 5px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    /*border: 0px solid #000000;*/
    border: 0px solid #000000;
    box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
    /*
-webkit-box-shadow: 1px 1px 2px 0px rgba(94,94,94,1);
-moz-box-shadow: 1px 1px 2px 0px rgba(94,94,94,1);
box-shadow: 1px 1px 2px 0px rgba(94,94,94,1);*/
}

.ref-apa.stemExperts a {
    background-color: rgba(82, 79, 161, .1);
}

.ref-apa.stemLearning a {
    background-color: rgba(82, 79, 161, .1);
}

.ref-apa.webtitle a {
    background-color: rgba(0, 173, 220, .1);
}

.ref-apa.engtitle a {
    background-color: rgba(183, 36, 103, .1);
}

.ref-apa.neurotitle a {
    background-color: rgba(242, 235, 22, .1);
}

.ref-apa.hci a {
    background-color: rgba(0, 128, 0, .1);
}

.ref-apa.strategy a {
    background-color: rgba(64, 224, 208, .1);
}

.ref-apa.general a {
    background-color: rgba(128, 128, 128, .1);
}

.ref-apa.books a {
    background-color: rgba(255, 255, 255);
}

.ref-apa.old a {
    background-color: rgba(165, 42, 42);
}

#invisible {
    background-color: transparent;
    padding: 0;
}


/*book list between animated books*/

.bookList {
    width: auto ;
    display: inline-block;
    text-align: center;

display: block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;

}

.bookList > ol {
    display: block;
text-align:left;
}




/* ------------------------- */


/* code for interactive books */


/* ------------------------- */

.booksWrapper{
    display: inline-block;

}

.bk-list {
    list-style: none;
    width: 25vw ;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;


}

/* this is the container for the books columns*/

.bk-list > div {
    position: relative;
    z-index: 1;
/*    margin: 0 1.5vw .5vw 1.5vw;*/
    -webkit-perspective: 1800px;
    perspective: 1800px;
}

.leftBookList{
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    width: 50%;

}

.rightBookList{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     float: right;
    text-align: left;
    box-sizing: border-box;
    width: 50%;

}

.rightBookList > div {
    float: right;
    text-align: right;
}

.bk-info {
    position: relative;
    padding: 1vw 2vw;
}

.bk-info h3 {
    padding: 25px 0 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-size: 26px;
}

.bk-info h3 span:first-child {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 5px;
    display: block;
    color: #777;
}

.bk-info p {
    line-height: 24px;
    color: #444;
    min-height: 160px;
    text-align:left;

}



.bk-list > div .rightBookDiv {
/*    right: 0;*/
text-align:center;
    display: block;
}

.bk-list > div .bk-book .rightBookDiv {
/*    right: 0 !important; */
    text-align:center;
    display: inline-block;
}



/* new interactive book code */
.libro {

    width: 276px;
    height: 375px;
    margin: 20px auto 0;
    -moz-transform: scaleX(0.88) scaleY(0.95);
    -moz-perspective: 150px;
    -moz-perspective-origin: right center;

    -webkit-perspective: 150px;
    -webkit-perspective-origin: right center;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: scaleX(0.88) scaleY(0.95);

    -o-perspective: 150px;
    -o-perspective-origin: right center;
    -o-transform-style: preserve-3d;
    -o-transform: scaleX(0.88) scaleY(0.95);

    -ms-perspective: 150px;
    -ms-perspective-origin: right center;
    -ms-transform-style: preserve-3d;
    -ms-transform: scaleX(0.88) scaleY(0.95);

    perspective: 150px;
    perspective-origin: right center;
    transform-style: preserve-3d;
    transform: scaleX(0.88) scaleY(0.95);

}
.libro img {
    display: block;
    height: 375px;
    width: 276px;
    position: absolute;
    z-index:5;
    -moz-transform: rotateY(-4deg) translateZ(0px);
    -webkit-transform: rotateY(-4deg) translateZ(0px);
    -o-transform: rotateY(-4deg) translateZ(0px);
    -ms-transform: rotateY(-4deg) translateZ(0px);
    transform: rotateY(-4deg) translateZ(0px);
}

.libro:before, .libro:after {
    content: '';
    position: absolute;
}

.libro:before {
    height: 100%;
    width: 40px;
    position: absolute;
    right: -25px;
    top: 0%;
    z-index: 2;
    -moz-transform: rotateY(-4deg) translateZ(0px);
    -webkit-transform: rotateY(-4deg) translateZ(0px);
    -o-transform: rotateY(-4deg) translateZ(0px);
    -ms-transform: rotateY(-4deg) translateZ(0px);
    transform: rotateY(-4deg) translateZ(0px);
}

.leftLibro:before{
    background: #3B3153;

}

.rightLibro:before{

    background: #3E1652;
;

}
.libro:after {
    background: #F5F5F5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 18px 3px 20px rgba(0, 0, 0, 0.25) inset;
    height: 98%;
    width: 25px;
    right: -19px;
    top: 1%;
    z-index: 3;
    -moz-perspective: 5px;
    -moz-transform: rotateY(20deg) translateZ(5px);
    -webkit-perspective: 5px;
    -webkit-transform: rotateY(20deg) translateZ(5px);
    -o-perspective: 5px;
    -o-transform: rotateY(20deg) translateZ(5px);
    -ms-perspective: 5px;
    -ms-transform: rotateY(20deg) translateZ(5px);
    perspective: 5px;
    transform: rotateY(20deg) translateZ(5px);
}

/*.libro span {
    display: block;
    position: absolute;
    bottom: -13px;
    height: 100px;
    right: -110px;
    height: 100px;
    width: 200px;
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
    border-radius: 15px;
    box-shadow: 5px 12px 15px 5px rgba(0, 0, 0, 0.1);
    -moz-transform: rotate(5deg) skew(-65deg);
    -webkit-transform: rotate(5deg) skew(-35deg);
    -o-transform: rotate(5deg) skew(-35deg);
    -ms-transform: rotate(5deg) skew(-35deg);
    transform: rotate(5deg) skew(-35deg);
}
*/

/*media queries for featured books */


    @media screen and (max-width:1280px) {
        .bookList {
            width: auto;
            float: none;
            display: inline-block;

        }

        #booksAnc {
            padding: 5% 10%;

        }


    .bk-info {
        position: relative;
    }


    #booksPubDiv{
        border-left-style: solid;
        border-left-width:15px;
        border-left-color:red ;
        border-right-style: solid;
        border-right-width:15px;
        border-right-color:red ;
margin:0;
        width: auto;
    }

    .bk-list{
        width: auto;
    }
}