/*Extra Custom CSS. We can place this into the primary CSS file. For now I just wanted to separate it to avoid clutter.*/

.main {
    background-color: white;
}

.mission,
.discover {
    background: white;
}

.block-head {
    text-align: center;
}

.block hr {
    width: 20%;
    margin-top: 3.5em;
    margin-bottom: 4em;
    border-top: 3px solid #ddd;
}

.block h2 {
    font-size: 2.2em;
}

.btn-to {
    display: block;
    margin: 0 auto;
    max-width: 250px;
}

@media screen and (max-width: 850px) {
    .block hr {
        width: 60%;
        margin-top: 3.5em;
        margin-bottom: 4em;
        border-top: 3px solid #ddd;
    }
    
}

/* ----------
.Hero
---------- */

.ju-hero-lowerNav {
    padding-top: 85%;
    padding-bottom: 15%;
    width: 100%;
    position: relative;
}

.ju-hero-lowerNav .hero-large-descriptor {
    padding: 1em 5% 7%;
    color: white;
    background-color: rgba(0,0,0,0.75);
    font-size: 0.8em;
    position: absolute;
    bottom: 0;
}

.ju-hero-lowerNav h3 {
    font-size: 3em;
    font-style: normal;
    margin-top: 0em;
    margin-bottom: 0.2em;
    color: white;
    margin-right: 1em;
}

.ju-hero-lowerNav p {
    font-size: 1.15em;
}

@media screen and (min-width: 768px) {
    .ju-hero-lowerNav {
        padding-top: 60%;
        /* padding-bottom: 5%; */
    }
    .ju-hero-lowerNav .hero-large-descriptor {
        padding: 1em 2em 4% 2em;
        /* margin-left: 0em;
        margin-top: -12em; */
    }
    .ju-hero-lowerNav h3 {
        font-size: 4.2em;
    }
    .ju-hero-lowerNav p {
        font-size: 1.45em;
    }
}

@media screen and (min-width: 1150px) {
    .ju-hero-lowerNav {
        /* position: relative; */
        padding-top: 40%;
    }
    .ju-hero-lowerNav .hero-large-descriptor {
        padding: 1em 2em;
        /* position: absolute;
        bottom: 0;
        width: 100%; */
    }
    .ju-hero-lowerNav h3 {
        font-size: 4.2em;
        margin-bottom: 0.4em;
    }
    .ju-hero-lowerNav p {
        font-size: 1.6em;
    }
}


/* ----------
.Mission
---------- */

.mission {
    padding: 5em 0 6em;
    text-align: center;
    max-width: 90em;
    margin: 0 auto;
}

.block > p {
    font-size: 1.4em;
    max-width: 80%;
    margin: 1.5em auto;
}

.mission ul {
    list-style-type: none;
    width: 80%;
    margin: 0 auto;
    padding: 2em 0em;
}

.mission a {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    float: left;
    width: 100%;
    text-decoration: none;
    font-size: 1.4em;
    letter-spacing: 1px;
}

.mission a:hover {
    background: #847641;
    color: white;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .mission li {
        width: 25%;
        padding-right: 1em;
        padding-left: 1em;
        float: left;
        padding-bottom: 1em;
    }
}

/*------------
.NEW News
-------------*/

/* Modules CSS STyles */

.ju-triptych {
    width: 100%;
    padding: 3% 8% 5% 9.2%;
    background-color: #efefef;
    float: left;
}

.ju-triptych hr {
    width: 20%;
    margin-top: 3.5em;
    margin-bottom: 2em;
    border-top: 3px solid #ddd;
}

.ju-triptych .section {
    border: 1px #e0e0e0 solid;
    float: left;
    border-top: 4px solid #ab9767;
    width: 30.333%;
    background-color: white;
    margin: 3em 1% 0em 1%;
}

.ju-triptych h2 {
    font-size: 2.8em;
}

.ju-triptych 	h3 {
    font-size: 1.5em;
    font-style: normal;
    margin-bottom: 0.8em;
    text-transform: none;
    font-weight: bold;
}

.ju-triptych .content {
    padding: 1em 1em 1em 1em;
}

.bottom-pad {
    margin-bottom: 1.5em;
    float:left;
    width: 100%;
    
}

.content .read-more a {
    color: #ab9767;
    font-weight: bold;
    margin-bottom:1em;
    font-size: 1.05em;
    text-transform: uppercase;
    float: left;
}


.bottom-pad img {
    width: 100%;
}

.flex-height {
    display: flex;
    flex-wrap: wrap;
}

.flex-height .flex-item {
    width: 100%;
}


@media screen and (max-width: 1055px) {
    .ju-triptych .section {
        border: 1px #e0e0e0 solid;
        float: left;
        margin: 3em 2% 0em 2%;
        border-top: 4px solid #ab9767;
        width: 46%;
        border-radius: 5px;
    }
    
    
    
    .bottom-pad {
        margin-bottom: 1.5em;
        float:left;
        width: 100%;
        
    }
    
}

@media screen and (max-width: 850px) {
    .ju-triptych hr {
        width: 60%;
        margin-top: 3.5em;
        margin-bottom: 4em;
        border-top: 3px solid #ddd;
    }
    
}

@media screen and (max-width: 750px) {
    .ju-triptych .section {
        border: 1px #e0e0e0 solid;
        border-top: 4px solid #ab9767;
        float: left;
        margin-right: 0em;
        margin-bottom: 2em;
        width: 100%;
        border-radius: 5px;
    }
    
    .ju-triptych .content {
        padding: 1em 1em 1em 1em;
    }
    
    .bottom-pad {
        margin-bottom: 1.5em;
        float:left;
        width: 100%;
        
    }
    
}

/* ----------
.Discover
---------- */

.discover {
    padding: 3% 0 5%;
}

.discover-3-panel {
    width: 100%;
    max-width:90em;
    margin: 0 auto;
    
}

.discover .discover-panel {
    float: left;
    position: relative;
    margin-bottom: 10px;
}

.discover-panel-lg {
    height: 300px;
    width:100%;
}

.discover-panel-sm {
    height: 150px;
    width: 49%;
}

.discover-panel-sm-1 {
    margin-right: 2%;
}

a.discover-link {
    color: white !important;
    display: block;
    height: 100%;
}

a.discover-link:hover .discover-link-text {
    text-decoration: underline;
}

.discover-link-text {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: white;
    padding-left: 1em;
    font-size: 1.4em;
    position: absolute;
    bottom: 0;
}

.discover a .discover-link-text::before {
    content: "► "
}

.discover-panel .fa {
    font-size: 10em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
    .discover-panel-lg {
        width: 49%;
        height: 400px;
        margin-right: 10px;
    }
    
    .discover-panel-sm {
        width: 49%;
        height: 195px;
    }
    
    .discover-panel-sm-1 {
        margin-right: 0;
    }
    
}

@media screen and (max-width: 767px) {
    .discover-panel .fa {
        font-size: 6em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ----------
.Colleges
---------- */

.colleges {
    margin: auto;
    background: url('../img/gray-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3em 1em 5em;
}

.colleges .intro-text {
    font-size: 1.1em;
    color: black;
}

.college-section-blocks	.college-wrap {
    width: 80%;
    max-width: 90em;
    margin: 0 auto;
    text-align: left;
}

.colleges .college-block {
    width: 100%;
    padding: 0.5em;
    float: left;
    height: 350px;
}

.colleges h3 {
    color: #333;
    text-transform: none;
    text-align: left;
}

.colleges a:hover h3 {
    color: #847641;
}

.colleges.block > p {
    font-size: 1.2em;
}

.colleges img {
    max-width: 100%;
    border-top: 3px solid #ab9767;
}

.colleges .s1 {
    margin-bottom: 3.7em;
    float: left;
}

@media screen and (min-width: 400px) {
    .colleges .college-block {
        width: 100%;
        padding: 0.5em;
        float: left;
        height: 315px;
    }
    
    .colleges h3 {
        color: #333;
        text-transform: none;
        text-align: center;
    }
}

@media screen and (min-width: 500px) {
    .colleges .college-block {
        width: 100%;
        padding: 0.5em;
        float: left;
        height: 410px;
    }
    
    .colleges h3 {
        color: #333;
        text-transform: none;
        text-align: center;
    }
}

@media screen and (min-width: 680px) {
    .colleges .college-block {
        width: 50%;
        padding: 0.5em;
        float: left;
    }
    
    .block h2 {
        font-size: 2.8em;
    }
}

@media screen and (min-width: 890px) {
    .colleges .college-block {
        width: 33%;
        padding: 0.5em;
        float: left;
        height: 320px;
    }
    
    .block > p {
        font-size: 1.7em;
        max-width: 60%;
        margin: 1.5em auto;
    }
    
}

@media screen and (min-width: 1010px) {
    .colleges .college-block {
        width: 25%;
        padding: 0.5em;
        float: left;
    }
}


/* ----------
.Profiles
---------- */


.staff-container {

}

.staff-section  hr {
    width: 100%;
}

.staff-info {
    margin-bottom: 4em;
}

.staff-photo img {
    width: 100%;
    text-align:center;
}

.col-sm-9 .main .section-content h3, .single .content .section .section-content .staff-name h3 {
    font-size: 3em;
    color: #686868;
    margin-top: -5px;
    margin-bottom: 0;
    font-weight: normal;
    font-style: normal;
    padding-bottom: 0.1em;
}

.staff-title {
    color: #7a232c; 
}

.staff-title p {
    margin-top: 0em;
    margin-bottom: 0em;
    font-style: italic;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0em;
    font-size: 1.35em;
    color: #686868;
}

.staff-dept p {
    margin-bottom: 0em;
    font-style: italic;
    font-weight: normal;
}

.staff-college  p {
    font-weight: bold;
    margin-top: 0.5em;
    font-size: 1.1em;
    margin-bottom: 0em;
    color: #ab9767;
}

.staff-quickinfo {
    margin-top: 0.5em;
}

.staff-bio {
    margin-top: 1em;
}

.staff-breakpoints .col-xs-4 {
    width: 35%;
}

.staff-breakpoints .col-xs-8 {
    width: 65%;
}

@media screen and (max-width: 767px) {
    
    .staff-breakpoints .col-xs-4 {
        width: 35%;
    }
    
    .staff-breakpoints .col-xs-8 {
        width: 65%;
    }
    
    .staff-breakpoints .staff-bio p {
        margin-top: 1.5em;
        width: 100%;
    }
    
}

@media screen and (max-width: 600px) {
    
    .staff-breakpoints .col-xs-4 {
        width: 40%;
    }
    
    .staff-breakpoints .col-xs-8 {
        width: 60%;
    }
    
    .staff-breakpoints .staff-bio p {
        margin-top: 1.5em;
        width: 100%;
    }
    
}

@media screen and (max-width: 450px) {
    
    .staff-breakpoints .col-xs-4 {
        width: 100%;
    }
    
    .staff-breakpoints .col-xs-8 {
        width: 100%;
    }
    
    .staff-breakpoints .staff-name h3 {
        margin-top: 1em;
    }
    
}


/*----------
Faculty List
-----------*/

.faculty-container {
    
    width: 100%;
    margin: 0 auto;
}

.faculty-section  hr {
    width: 100%;
}


.faculty-info {
    margin-bottom: 2em;
}

.faculty-photo img {
    text-align:center;
    max-height: 110px;
}

.col-sm-9 .main .section-content h3, .single .content .section .section-content .faculty-name h3 {
    font-size: 1.75em;
    color: #686868;
    margin-top: -5px;
    margin-bottom: 0;
    font-weight: normal;
    font-style: normal;
    padding-bottom: 0.1em;
}

.faculty-job {
    color: #7a232c; 
}
.faculty-job     p {
    margin-top: 0em;
    margin-bottom: 0em;
    font-style: italic;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0em;
    font-size: 1.1em;
    color: #686868;
}



.faculty-dept  p {
    margin-bottom: 0em;
    font-style: italic;
    font-weight: normal;
}



.faculty-college  p {
    font-weight: bold;
    margin-top: 0em;
    font-size: 1em;
    margin-bottom: 0em;
    color: #ab9767;
}


.faculty-email {
    margin-top: 0.5em;
    
}

.faculty-email i {
    float: left;
    margin-top: 0.2em;
    margin-right: 0.5em;
}

.faculty-email  p {
    margin-bottom: 0;
}



.facultyf-phone  i {
    float: left;
    margin-top: 0.25em;
    margin-right: 0.5em;
}

.faculty-phone  p {
    margin-bottom: 0;
}



.faculty-bio  p {
    margin-top: 1em;
    width: 100%;
}

.faculty-breakpoints {
    width: 100%;
    float: left;
    margin-top: 0em;
}

.faculty-breakpoints .col-xs-4 {
    width: 30%;
}

.faculty-breakpoints .col-xs-8 {
    width: 70%;
}



@media screen and (max-width: 767px) {
    
    
    
    .faculty-breakpoints .col-xs-4 {
        width: 30%;
    }
    
    .faculty-breakpoints .col-xs-8 {
        width: 70%;
    }
    
    .faculty-breakpoints .staff-bio p {
        margin-top: 1.5em;
        width: 100%;
    }
    
    
}

@media screen and (max-width: 600px) {
    
    .faculty-breakpoints  .col-xs-4 {
        width: 40%;
    }
    
    .faculty-breakpoints .col-xs-8 {
        width: 60%;
    }
    
    .faculty-breakpoints .staff-bio p {
        margin-top: 1.5em;
        width: 100%;
    }
    
    
    
}



@media screen and (max-width: 450px) {
    
    .faculty-breakpoints  .col-xs-4 {
        width: 100%;
    }
    
    .faculty-breakpoints .col-xs-8 {
        width: 100%;
    }
    
    .faculty-breakpoints .staff-name h3 {
        margin-top: 1em;
    }
    
}


/*--------------------
FACULTY TABLE STYLES
-------------------*/

.faculty-list-table {

}

.faculty-list-table table {
    width: 100%;
    border-collapse: collapse;
}

.faculty-list-table .thead th {
    border: solid #e0e0e0 1px;
    padding: 0.5em;
    text-align: center;
    width: 33%;
    background-color:#dcdcdc ;
}

.faculty-list-table td, .faculty-list-table .tbody th {
    border: solid #e0e0e0 0px;
    /*text-align: center;*/
    padding: 1em 1.25em;
    
}

.faculty-list-table tr {
    border-bottom: solid #e0e0e0 1px;
}


.faculty-list-table tr:nth-of-type(odd) {
    background-color: #f7f7f7;
}


.faculty-table-name {
    font-size: 1.1em;
    font-weight: bold;
    
}

.faculty-table-email {
    color: #ab9767;
}

.faculty-table-college {
    
}

.faculty-position {
	font-weight: normal;
    line-height: 1.1;
    margin-top: 0.2em;
}

.section-content-faculty {
    max-width: 680px;
    padding: 1em;
}

@media screen and (max-width: 767px) {
    
    .faculty-list-table {
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }
    
    .faculty-list-table thead {
        border: solid #e0e0e0 1px;
        padding: 0.5em;
        text-align: center;
        background-color:#f7f7f7 ;
        display: block;
    }
    
    .faculty-list-table td, .faculty-list-table .tbody th {
        /*text-align: center;*/
        padding: 0em 0em 0.5em 1.5em;
        border: none;
        display: block;
        text-align: left;    border: none;
        position: relative;
        padding-left: 50%;

    }

    .faculty-list-table td::before,
	, .faculty-list-table .tbody th::before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    
    .faculty-list-table .tbody th:before {
        content: "Name: ";
		font-weight: bold;
    }
    
    .faculty-list-table td:nth-of-type(1):before {
        content: "Department: ";
		font-weight: bold;
    }
    
    .faculty-list-table td:nth-of-type(2):before {
        content: "College: ";
		font-weight: bold;
    }
    
    .faculty-list-table td:nth-of-type(3):before {
        content: "Contact Info: ";
		font-weight: bold;
    }

    .faculty-list-table tr {
        display: block;
        border-bottom: 1px solid #e0e0e0;
        background-color: #efefef;
        padding: 2em 0em 2em 0em;
    }
    
    .faculty-list-table .thead {
        display: none;
    }
    
    .faculty-table-name {
        font-size: 1em;
        font-weight: normal;
    }
    
    .faculty-table-email {
        color: #ab9767;
    }
    
    .faculty-position {
        line-height: 1.1;
        margin-top: 0em;
        float: none;
        margin-bottom: 0.5em;
    }
    
    .faculty-list-table .thead th {
        border: solid #e0e0e0 1px;
        padding: 0.5em;
        text-align: center;
        width: 100%;
        background-color:#f7f7f7 ;
    }
    
}



@media screen and (max-width: 400px) {
    .faculty-list-table td {
        /*text-align: center;*/
        padding: 0em 0em 0.5em 1.5em;
        border: none;
        display: block;
        text-align: left;    border: none;
        position: relative;
        padding-left: 43%;
        
        
    }
    
    .faculty-list-table tr {
        padding: 1em 0em 1em 0.5em;
    }
    
}
/*END FACULTY TABLE*/







/* START SPECIAL OCCASION HERO MODS: KINNE */
@media (min-width: 560px) {
    .ju-hero-lowerNav {
        padding-top: 65%;
    }
}
@media (min-width: 675px) {
    .ju-hero-lowerNav {
        padding-top: 50%;
    }
}
@media (min-width: 768px) {
    .ju-hero-lowerNav {
        padding-top: 50%;
    }
}
@media (min-width: 850px) {
    .ju-hero-lowerNav {
        padding-top: 40%;
    }
}
@media (min-width: 960px) {
    .ju-hero-lowerNav {
        padding-top: 40%;
    }
}
@media (min-width: 1100px) {
    .ju-hero-lowerNav {
        padding-top: 30%;
    }
    .backstretch img {
        top: 0 !important;
    }
}

/* END SPECIAL OCCASION HERO MODS: KINNE */