/* this stylesheet contains all extra styling on top of bootstrap. */
/* NOTE: declare this script AFTER the bootstrap includes */

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

/****** Navbar styling ******/
a.nav-link, a.navbar-brand{color: #cccccc; transition: ease-in 0.3s;}
a.nav-link:hover, a.navbar-brand:hover, #portalLink:hover{color: #fff;}
#portalLink{color: #e75457;}
    /****** Dropdown menu items for navbar*****/
.dropdwn-content{display: none; position: absolute; border-radius: 4px;}
.dropdwn-content a{color: white; background: rgba(0,0,0,0.8); padding: 8px 6px; display:block; text-decoration: none;}
.dropdwn-content a:hover{background: rgba(52,58,64,0.82);}
.dropdwn:hover .dropdwn-content{display: block;}
#bottomNav{background-color: #343a40; color: #fcf7f8; position: relative; bottom: 0;}
#bottomNav a{color: #fcf7f8;transition: ease-in 0.3s; }
#bottomNav a:hover{text-decoration: none; color: #e75457;}

/****** welcome paragraph styling on homepage ******/
#welcome{top: 50px; margin-bottom: 20px;}

/****** Slide show styling on homepage ******/
.carousel-item img{width: 100%; background: linear-gradient(#491217, #721c24); /*opacity: 70%;*/ }
#banner{top: 56px; width: 100%;}

/******* DEI Logo placement on homepage*********/
#dei{text-align: center; color: white; padding-top: 8vw; width: 80vw; position: absolute; top: 56px;
    right: calc(50% - 40vw); margin-bottom: 100px; z-index: 2; font-family: 'Anton', sans-serif;}
#dei img{height: 15vw; margin: 10px;}

/****** Services section on homepage******/
#services{background: #5b4c73; color: white; margin: 0; padding: 60px; text-align: center;}
#services h2{text-align: center; margin-bottom: 40px;}
#services .row{ text-align: center; padding-bottom: 50px;}
#services a{margin: auto; background: transparent; border: 2px solid white;}
#services a:hover{background: white; color: #5b4c73;}

/******** About/Staff tab *********/
.profile{text-align: center;}
.profile img{width: 70%;}
.bio{display: block; width: 80%; margin: auto;}
.roleDiv{padding: 0 40px 20px 40px; opacity: .8;}
.states ul{height: 200px; display: flex; flex-direction: column; flex-wrap: wrap; list-style-type: none; padding: 0;}
#vicePresident .vp1{display: none;}
#keyPersonnel .row{padding: 0 60px;}

/****** Contact form styling ******/
#contactUs{padding: 60px; background: #7171a0; color: white;}
#contactUs a{color: white;}

.form-control:focus{border: #e75457; box-shadow: 0 0 0 0.2rem rgba(231,84,87,0.75);}
#contactForm input[type=submit]{width: 100%; border: 2px solid white; color: white; background-color: transparent;}
#contactForm input[type=submit]:focus, #contactForm input[type=submit]:hover{background-color: white; color: #e75457; box-shadow: none;}

/****** Projects tab styling ******/
.back{filter: brightness(40%) grayscale(80%); width: 100%; height: 100%; z-index: -5; position: relative; top: 0;
    right: 0; background-position: center; transition: all 0.5s ease-in-out;}

.mtext{margin: auto; color: white; filter: none; position: relative; top: calc(-50% - 30px);}
.mtext button{display: none; color: white; border-color: white; background: transparent; transition: all 0.3s ease-in-out;}
.mtext button:hover{color: white; background: rgba(231,84,87,0.77);}

.section{height: calc(50vh - 30px); text-align: center; align-items: center;justify-content: center;}
.sec{text-align: center; height: 250px; font-size: 20px; font-weight: bold; width: 100vw;}

#hDiv .back{background-image: url("../photos/07350 SH ACC Surg.jpg");  }
#iDiv .back{background-image: url("../photos/McDs_RUSH-Clark-20923_1.jpg");}
#rDiv .back{background-image: url("../photos/04600 -  Sports Ortho 1243E.jpg"); }
#mDiv .back{background-image: url("../photos/66919-mcds.jpg");}
    /****** Healthcare section ******/
.group{display: block; width: 100%; height: 100%; cursor: pointer;}
.group img{width: 80%; position: absolute; top: 50%; left: 50%; max-width: 268px; transform: translateY(-50%) translateX(-50%);}
.container-big{width: 100%; padding: 0; margin: auto;}
.drawer{
    display: none; background: #343a40; color: white; max-width: 100vw; height: auto;
}
.descript{padding: 10px;}
.descript img{width: 100%;}

#proj1 div.row{height: 50vh;}
#proj1 >.row > div.col-sm-3{padding: 0;}
#proj1 >.row > div.col-sm-4{padding: 0;}

#project-popover .modal-content{
    background-color:#343a40;
    color: white;
}
#project-popover .info-popover{
    padding: 10px;
    display: none;
} 
ul.outer{display: flex; flex-flow: wrap column; max-height: 50vh;}
span.liTitle{font-size: 18px; font-weight: bold;}

#amita div.back{background-image: url("../photos/healthcare/St Alexius 3.JPG"); }
#adventHealth div.back{background-image: url("../photos/healthcare/munroe.JPG"); }
#advocate div.back{background: url("../photos/healthcare/advocatePic01.jpg"); background-size: cover;}
#carle div.back{background: url("../photos/healthcare/ortho-sports-building.jpeg"); }
#loyola div.back{background: url("../photos/healthcare/loyola-mc.JPG");  }
#nch div.back{background: url("../photos/healthcare/nch-h.JPG"); }
#northshore div.back{background: url("../photos/healthcare/northshore-h.JPG"); }
#northwestern div.back{background: url("../photos/healthcare/northwestern-h.JPG");}
#childrens div.back{background: url("../photos/healthcare/lurie-x.jpg");}
#presence div.back{background: url("../photos/healthcare/resurrection-mc2.jpeg"); }
#rush div.back{background: url("../photos/healthcare/rush-h.JPG"); background-size: cover; background-position: center;}
#uchicago div.back{background: url("../photos/healthcare/uchicago-h.JPG");}
#uic div.back{background: url("../photos/healthcare/uic-mc.JPG"); background-size: cover;}
#elmhurst div.back{background: url("../photos/healthcare/elmhurst-h.jpg");}
#hines div.back{background: url("../photos/healthcare/hinesva-h.JPG");}
#kindred div.back{background: url("../photos/healthcare/kindred-h.jpg"); background-size: cover;}
#mercy div.back{background: url("../photos/healthcare/mercy-h.JPG"); background-size: cover;}
#rml div.back{background: url("../photos/healthcare/rml-h.JPG");}
#shriners div.back{background: url("../photos/healthcare/shriners-h.JPG");}
#silvercross div.back{background: url("../photos/healthcare/silvercross-h.jpg");}
#stanthony div.back{background: url("../photos/healthcare/stanthony-h2.jpg");}
#westsuburban div.back{background: url("../photos/healthcare/westsuburban-h2.png");}
#columbus div.back{background: url("../photos/healthcare/columbus-h.jpg");}

#elementary div.back{background: url("../photos/institutional/elementary.jpg");}
#middle div.back{background: url("../photos/institutional/middle.jpg"); background-size: cover;}
#high div.back{background: url("../photos/institutional/high.jpg"); background-size: cover;}
#university div.back{background: url("../photos/institutional/university.jpg");}
#institutional div.back{background: url("../photos/institutional/institutional.jpg"); background-size: cover;}
#instMisc div.back{background: url("../photos/institutional/misc.JPG"); background-size: cover;}

#rec div.back{background: url("../photos/recreational/00100\ -\ Sports\ Ortho\ 1243F.jpg"); background-size: cover; background-position: center;}
#mun div.back{background: url("../photos/recreational/municipal.JPG");}
#govt div.back{background: url("../photos/recreational/government.JPG"); background-position: center;}

#corporate div.back{background: url("../photos/misc/corporate.jpg"); background-size: cover;}
#retail div.back{background: url("../photos/misc/retail.JPG"); background-size: cover; background-position: center;}
#office div.back{background: url("../photos/misc/office.JPG"); background-size: cover;}
#housing div.back{background: url("../photos/misc/housing.jpg"); background-size: cover;}
#churches div.back{background: url("../photos/misc/churches.jpg"); background-size: cover; background-position: center;}
#hotel div.back{background: url("../photos/misc/hotels.JPG"); background-size: cover; background-position: center;}
#restaurants div.back{background: url("../photos/misc/restaurants.JPG"); background-size: cover;}
#industrial div.back{background: url("../photos/misc/industrial.JPG"); background-size: cover;}
#computer div.back{background: url("../photos/misc/computer.jpg"); background-size: cover;}
#communication div.back{background: url("../photos/misc/communication.jpg"); background-size: cover;}
#medium div.back{background: url("../photos/misc/medium.jpg"); background-size: cover;}
#labs div.back{background: url("../photos/misc/labs.JPG"); background-size: cover;}
#airports div.back{background: url("../photos/misc/airports.JPG"); background-size: cover;}
#financial div.back{background: url("../photos/misc/financial.JPG"); background-size: cover;}

/****** General Styling ******/
h1{font-size: 4vw;}
h3{font-size: 3vw;}
.container, .container-fluid{ position: relative; padding: 60px;}
.container.top{top: 0; padding: 20px;}
.jumbotron{margin-top: 56px; background-color: #7171a0; color: white;}
a.btn{font-weight: bold;}
small{opacity: 0.8;}
.page-title{margin-top: 56px; padding: 20px 40px; font-family: 'Anton', sans-serif;}
.page-title h1{font-size: 3.5rem;}
.page-title.inverse{background: #343a40; color: white;}
span.role{font-style: italic;} /** From About/Staff **/
.row-big{margin-bottom: 50px;}
p.service{color: #e75457;}

/****** Resizing ******/
    /***** DEI logo on homepage ******/
@media screen and (max-width: 740px){
    #dei h1{display: none;}
    #dei h3{display: none;}
    #dei img{height: 30vw;}
}
    /***** Slide show on homepage ******/
@media screen and (max-width: 400px){
    .carousel-inner{height: 250px;}
    .carousel-item img{height: 250px; width: auto;}
    #dei img{height: 40vw;}
    #services hr{display: none;}
    #about{padding: 0 30px; top: 0;}
}
    /******* Profile pictures on About/Staff ***********/
@media screen and (max-width: 768px){
    .profile img{width: 65%;}
    .profile{margin-bottom: 20px;}
    #vicePresident .vp1{display: block;}
    #vicePresident .vp2{display: none;}
    .page-title > h1{
        font-size: 9vw; text-align: center;
    }
}
@media screen and (max-width: 576px){
    .page-title{padding: 15px;}
    .group img{display: block; max-height: 80%; width: auto; max-width: 90%; margin: auto;
        transform: translateY(-50%) translateX(-50%);}
        #bottomAddr{display: none;}
    .roleDiv{padding: 0 30px; text-align: center;}
    .roleDiv h3{font-size: 32px;}
    .bio h2{font-size: 28px;}
}