.seniors {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    text-align: left;
    width: 960px;
} 
.search-submit {
    position: relative;
    display: inline-block;
    z-index: 9998;
    margin-right: auto;
    margin-left: auto;
}
.lb-content {
    color: #fff;
    width: 100%;
    background-color: #4379b8;
    display: none;
    margin: auto;
    z-index: 99999;
    padding-top: 15px;
    height: auto;
    width: 100%;
}
.lb-content h2 {
    font-family: helvetica, arial, sans-serif;
    clear: both;
    font-size: 2.5em;
    margin: 0px;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 20px;
}
.lb-content p, .full-bio {
    font-family: helvetica, arial, sans-serif;
    float: right;
    clear: both;
    width: 100%;
    text-align: left;
    font-size: 1.0em;
    line-height: 19px;
    margin-top: -10px;
}
.full-bio {
	margin-top: 20px;
	position: relative;
	color: #fff;
	font-size: 1.3em;
}
.head {
    width: 28%;
    position: relative;
    clear: right;
    margin-top: 15px;
    margin-left: 5px;
}
.text {
    clear: both;
    float: right;
    width: 62%;
    margin: 20px;
}
.lb-close {
    display: block;
    height: 35px;
    width: 35px;
    background-color: #4379b8;
    color: #fff;
    position: absolute;
    top: 7px;
    right: 7px; 
    cursor: pointer;   
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.lb-close img {
    width: 35px;
}
.work {
    margin: 25px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
    height: auto;
    width: 95%;
    height: 60vh;
    position: relative;
}
.work img {
    border: 3px solid #fff;
    display: inline-block;
    height: 75%;
    width: auto;
    position: relative;
}
.work .landscape {
    height: 30%;
    width: auto;
}
.reagan-click .work img {
    height: 45%;
    width: auto;
}
.andrea-click .work img, .tara-click .work img{
    height: 60%;
    width: auto;
}
.bio-icons {
    width: 300px;
	height: 300px;
    position: relative;
	background-color: #4379b8;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
    border: 14px solid #fff;
    display: inline-block;
    margin: 40px 20px;
    background-repeat: no-repeat;
    background-position: center;   
}   
.bio-icons:hover {                              /* HOVER */
    background-size: 100%;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
    display: inline-block;
    position: relative;
}
.bio-icons p {
    font-family: 'helvetica', sans-serif;
    color: #fff;
    text-align: center;
    font-size: 0.8em;
    position: relative; 
    top: 68%;
    padding-top: 15px;
}
.bio-icons p span {display: block;}                                                              /* CHELSEA - ALTHEA */
#chelsea {
    background-image: url('../images/bios/chelsea.svg');
    background-size: 56%;
}
#chelsea:hover {
    background-image: url('../images/bios/chelsea.png');
    background-size: 100%;
}
#alice {
    background-image: url('../images/bios/alice.svg');
    background-size: 67%;
}
#alice:hover {
    background-image: url('../images/bios/alice.png');
    background-size: 100%;
}
#althea {
    background-image: url('../images/bios/althea.svg');
    background-size: 35%;
}
#althea:hover {
    background-image: url('../images/bios/althea.png');
    background-size: 100%;
}
                                                                /* KAITLIN - YARI */
#kaitlin {
    background-image: url('../images/bios/kaitlin.svg');
    background-size: 80%;
}
#kaitlin:hover {
    background-image: url('../images/bios/kaitlin.png');
    background-size: 100%;
}
#kelsey {
    background-image: url('../images/bios/kelsey.svg');
    background-size: 46%;
}
#kelsey:hover {
    background-image: url('../images/bios/kelsey.png');
    background-size: 100%;
}
#yari {
    background-image: url('../images/bios/yari.svg');
    background-size: 25%;
}
#yari:hover {
    background-image: url('../images/bios/yari.png');
    background-size: 100%;
}
                                                                /* REAGAN - ANDREA */
#reagan {
    background-image: url('../images/bios/reagan.svg');
    background-size: 65%;
}
#reagan:hover {
    background-image: url('../images/bios/reagan.png');
    background-size: 100%;
}
#kyahdric {
    background-image: url('../images/bios/kyahdric.svg');
    background-size: 52%;
}
#kyahdric:hover {
    background-image: url('../images/bios/kyahdric.png');
    background-size: 100%;
}
#andrea {
    background-image: url('../images/bios/andrea.svg');
    background-size: 65%;
}
#andrea:hover {
    background-image: url('../images/bios/andrea.png');
    background-size: 100%;
}
                                                                /* TARA - TATIANA */
#tara {
    background-image: url('../images/bios/tara.svg');
    background-size: 70%;
}
#tara:hover {
    background-image: url('../images/bios/tara.png');
    background-size: 100%;
}
#eden {
    background-image: url('../images/bios/eden.svg');
    background-size: 44%;
}
#eden:hover {
    background-image: url('../images/bios/eden.png');
    background-size: 100%;
}
#tatiana {
    background-image: url('../images/bios/tatiana.svg');
    background-size: 60%;
}
#tatiana:hover {
    background-image: url('../images/bios/tatiana.png');
    background-size: 100%;
}
                                                                /* ASHLEY - AMBER */
#ashley {
    background-image: url('../images/bios/ashley.svg');
    background-size: 42%;
}
#ashley:hover {
    background-image: url('../images/bios/ashley.png'); 
    background-size: 100%;
}
#abdul {
    background-image: url('../images/bios/abdul.svg');
    background-size: 80%;
}
#abdul:hover {
    background-image: url('../images/bios/abdul.png'); 
    background-size: 100%;
}
#amber {
    background-image: url('../images/bios/amber.svg');
    background-size: 71%;
}
#amber:hover {
    background-image: url('../images/bios/amber.png'); 
    background-size: 100%;
}

@media screen and (min-width: 1280px) {                              /* 1280PX WIDTH */
 
    .seniors {
        text-align: left;
        width: 1200px;
        margin-right: auto;
    	margin-left: auto;
    }
    .bio-icons {
        margin: 20px 20px;
    }
    .lb-content {
        position: relative;
        text-align: center;
        margin-top: -10px;
    }
    .head {
        width: 35%;
        position: relative;
        clear: right;
        margin: 7% auto 0px 20px;
    }
    .text {
        width: 56%;
        float: right;
        margin: 7% 20px 20px;
        clear: both;
    }
    .lb-content h2 {
        font-size: 3.2em;
    }
    .lb-content p {        
        float: right;
        clear: both;
        width: 100%;
        font-size: 1.5em;
        line-height: 35px;
    }
    .lb-close {
        height: 60px;
        width: 60px;
    }
    .lb-close img {
        width: 60px;
    }
    .work {
        margin: 155px 0px 10px 43px;
        width: 90%;
        height: 70vh;
        display: flex;
        justify-content: space-between;
    }
    .work img, .andrea-click .work img, .tara-click .work img{
        border: 3px solid #fff;
        height: 44%;
        width: auto;
        position: relative;
        margin-bottom: 20px;
    }
    .chelsea-click .work img, .alice-click .work img {
   		height: 68%;
   	 }
   	 .kelsey-click .work img, .yari-click .work img {
   	 	height: 52%;
   	 }
    .reagan-click .work img{
        height: 30%;
    }
    .kaitlin-click .work img{
        height: 46%;
    }
    .eden-click .work img{
        height: 76%;
    }
    .tatiana-click .work img, .abdul-click .work img{
        height: 54%;
    }
    .work .landscape {
        height: 39%;
        width: auto;
    }
    .ashley-click .work img{
        height: 37%;
    }
    .full-bio {
		margin-top: 50px;
		position: relative;
	}
    .bio-icons {
    	width: 300px;
		height: 300px;
	}
	.bio-icons p {
		top: 79%;
	}
}
@media screen and (min-width: 961px) and (max-width: 1279px) {                              /* Between 960PX and 1280px WIDTH */
    .seniors {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        width: 960px;
    }
    .search-submit {
        display: inline-block;
    } 
    .lb-content {
        height: auto;
        width: 100%;
        margin-top: -10px;
        margin-bottom: -10px;
        position: relative;
        text-align: center;
    }
    .head {
        width: 35%;
        position: relative;
        clear: right;
        margin: 7% auto 0px 5px;
    }
    .text {
        width: 50%;
        float: right;
        margin: 20px;
        clear: both;
        margin-top: 7%;
    }
    .lb-content p {        
        float: right;
        clear: both;
        width: 100%;
        font-size: 1.0em;
    }
    .full-bio {
		margin-top: 20px;
		font-size: 1.3em;
	}
    .lb-content h2 {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
    .lb-close {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 10px; 
    }
    .lb-close img {
        width: 40px;
    }
    .work {
        margin: 25px 0px 10px 20px;
        display: flex;
    	justify-content: space-between;
        width: 95%;
        height: 60vh;
    }
    .work img {
        border: 3px solid #fff;
        height: 35%;
        width: auto;
        position: relative;
        margin-bottom: 20px;
    }
    .work .landscape, .reagan-click .work img, .andrea-click .work img, .tara-click .work img  {
        height: 20%;;
        width: auto;
    }
    .bio-icons {
    	width: 225px;
		height: 225px;
	}
}
@media screen and (max-width: 960px) {                              /* 960PX WIDTH */
  
    .seniors {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        width: 960px;
    }
    .search-submit {
        display: inline-block;
    } 
    .lb-content {
        height: auto;
        width: 100%;
        margin-top: -10px;
        margin-bottom: -10px;
        position: relative;
        text-align: center;
    }
    .head {
        width: 35%;
        position: relative;
        clear: right;
        margin: 7% auto 0px 5px;
    }
    .text {
        width: 50%;
        float: right;
        margin: 20px;
        clear: both;
        margin-top: 7%;
    }
    .lb-content p {        
        float: right;
        clear: both;
        width: 100%;
        font-size: 1.0em;
    }
    .lb-content h2 {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
    .lb-close {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 10px; 
    }
    .lb-close img {
        width: 40px;
    }
    .work {
        margin: 25px 0px 10px 20px;
        display: flex;
    	justify-content: space-between;
        width: 95%;
        height: 60vh;
    }
    .work img {
        border: 3px solid #fff;
        height: 35%;
        width: auto;
        position: relative;
        margin-bottom: 20px;
    }
    .work .landscape, .reagan-click .work img, .andrea-click .work img, .tara-click .work img  {
        height: 20%;;
        width: auto;
    }
    .bio-icons {
    	width: 225px;
		height: 225px;
	}
}
@media screen and (max-width: 770px) {                              /* 770PX WIDTH */
   
    .seniors {
        text-align: center;
        width: auto;
    }
    .search-submit {
        display: block;
    }
    .bio-icons {
        margin: 20px 0px;
    }
    .lb-content {
        position: relative;
        text-align: center;
        margin-top: -10px;
    }
    .head {
        width: 40%;
        position: relative;
        clear: both;
        margin: 5px auto 0px auto;
    }
    .text {
        width: 95%;
        float: left;
        margin: 20px;
    }
    .lb-content h2 {
        font-size: 2.0em;
    }
    .lb-content p {        
        float: right;
        clear: both;
        width: 100%;
        font-size: 1.0em;
    }
    .full-bio {
		font-size: 1.0em;
	}
    .lb-close {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 10px; 
    }
    .lb-close img {
        width: 40px;
    }
    .work {
        margin: 25px 10px 10px 10px;
        display: block;
        width: 95%;
        height: 100%;
        text-align: center;
    }
    .work img, .reagan-click .work img, .andrea-click .work img, .tara-click .work img {
        border: 3px solid #fff;
        height: auto;
        width: 75%;
        position: relative;
        margin-bottom: 20px;
    }
    .work .landscape {
        height: auto;
        width: 75%;
        text-align: center;
    }
    .bio-icons {
    	width: 300px;
		height: 300px;
	}
}

@media screen and (max-width: 600px) {                              /* 600PX WIDTH */

    .seniors {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    .search-submit {
        display: block;
    }
    .bio-icons {
        width: 225px;
        height: 225px;
        margin: 20px 0px;   
    } 
    .bio-icons p {
		font-family: 'helvetica', sans-serif;
		color: #fff;
		text-align: center;
		font-size: 0.8em;
		position: relative;
		top: 79%;
    }
    .lb-content {
        height: auto;
        width: 100%;
        margin-top: -10px;
        margin-bottom: -10px;
        position: relative;
        text-align: center;
    }
    .head {
        width: 40%;
        clear: both;
        margin: 5px auto 0px auto;
    }
    .text {
        width: 90%;
        float: left;
        margin: 30px;
    }
    .lb-content h2 {
        font-size: 2.0em;
    }
    .lb-content p {
        float: right;
        clear: both;
        width: 100%;
        font-size: 1.0em;
    }
    .full-bio {
		font-size: 1.0em;
	}
    .lb-close {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 10px; 
    }
    .lb-close img {
        width: 40px;
    }
    .work {
        margin: 25px 10px 10px 10px;
        display: block;
        width: 95%;
        height: 100%;
        text-align: center;
    }
    .work img, .reagan-click .work img, .andrea-click .work img {
        border: 3px solid #fff;
        height: auto;
        width: 75%;
        position: relative;
        margin-bottom: 20px;
    }
    .work .landscape {
        height: auto;
        width: 75%;
        text-align: center;
    }
    .tara-click .work img {
    	width: 75%;
    }
    .bio-icons {
    	width: 300px;
		height: 300px;
	}
}


@media screen and (max-width: 480px) {                              /* 480PX WIDTH */
  
    .seniors {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    .search-submit {
        display: block;
    }
    .bio-icons {
        width: 225px;
        height: 225px;
        margin: 20px 0px;   
    } 
    .lb-content {
        height: auto;
        width: 100%;
        background-color: #4379b8;
        /*padding: 15px;*/
        position: relative;
        text-align: center;
    }
    .head {
        width: 40%;
        clear: both;
        margin: 5px auto 0px auto;
    }
    .text {
        width: 95%;
        float: right;
        margin: 20px;
    }
    .lb-content h2 {
        font-size: 1.9em;
        margin-bottom: 20px;
    }
    .lb-content p {
        float: right;
        clear: both;
        width: 92%;
        font-size: 1.0em;
    }
    .full-bio {
		font-size: 0.8em;
		width: 92%;
	}
    .lb-close {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 10px; 
    }
    .lb-close img {
        width: 40px;
    }
    .work {
        margin: 25px 10px 10px 10px;
        display: block;
        width: 95%;
        height: 100%;
        text-align: center;
    }
    .work img, .reagan-click .work img, .andrea-click .work img, .tara-click .work img{
        height: auto;
        width: 85%;
        position: relative;
        margin-bottom: 20px;
    }
    .work .landscape {
        height: auto;
        width: 85%;
        text-align: center;
    }
}