/*=== Primary Colors ===*/

/*
Based on Google's colors

red= #ff4508
dark-red= rgba(176,12,32,1)
blue= #00a6f0
dark-blue= rgba(32,124,229,1)
green= #6cba00
dark-green= rgba(0,168,59,1)
yellow= #ffb700
*/

.red {
    color: #ff4508;
}

.blue {
    color: #00a6f0;
}

.green {
    color: #6cba00;
}

.yellow {
    color: #ffb700;
}

/*=== Media Queries ===*/

/* Everything 700px and lower */
@import url("/css/styleMobile.css") only screen and (max-width: 700px);
@import url("/css/navbarMobile.css") only screen and (max-width: 700px);
@import url("/css/headerAndFooterMobile.css") only screen and (max-width: 700px);

/*=== General Tags ===*/

html, body {
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Itim', cursive;
}

/* Show something while google maps are loading */
iframe {
    background-color: #dddddd;
}

.overlay {
    position: fixed;
    
    /* make mobile and desktop browser windows the same */
    width: 100vw;
    height: 100vh;

    /* background */
    background: url(../img/website/background.jpg) no-repeat center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    overflow-x: hidden;
}

h2 {
    font-size: 1.7rem;
    letter-spacing: .15rem;
}

/* 
    The go to header.
    Colorful, easy to read
*/
h3 {

    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    text-align: center;

    color: #00a6f0;

    /* Color is purposefully darker and then we lighten up with opacity */
    opacity: .7;
}

a {
    color: #00a6f0;
    text-decoration: underline;
    cursor: pointer;
}

a:focus, a:hover {
    color: #6cba00;
    text-decoration: none;
}

/*=== Override Bootstrap ===*/


html, body {
    font-size: 16px;
    line-height: 1.3;
}

* {
    /*Do not include border or padding with width of object*/
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/*=== Overall Sizing ===*/

.scrollable {
    position: absolute;
    width: 100%;
    font-size: 16px;
    line-height: 1.3;
}

/* center content and navbar */
.container {

    /*To make side-nav absolute positioning relative to this*/
    position: relative;

    margin: 0 auto;
    width: 60rem;
}

.container > div {

    position: absolute;

    margin-left: 10rem;

    /*
    container width= 60rem
    margin = 10rem
    */
    width: calc(60rem - 10rem);
}

.container > div > div {

    position: relative;
}

/* contains the detail for the interchangable screens */
.content {

    /* pos to stack content over nav bar*/
    position: absolute;
    box-sizing: border-box;

    /* 
        view port height = 100vh
        footer height + header height = 210px
    */
    min-height: calc(100vh - 210px);
    
    /* format */
    background-color: white;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;

    /* shadow */
    -webkit-box-shadow: 0px 0px 50px 5px rgba(136,136,136,0.7);
    -moz-box-shadow: 0px 0px 50px 5px rgba(136,136,136,0.7);
    box-shadow: 0px 0px 50px 5px rgba(136,136,136,0.7);
}

/*=== Flex Logic ===*/

.flex-container {
	
    display: flex;

	/*take up parent size*/
	width: 100%;

	/*Flex*/
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

/*=== Location ===*/

.map {
	margin-top: 20px;
}

/*=== Quote ===*/

/*
Smaller text with more spacing. 
To give a different flavor to a text block. 
Also a colored line
*/
p.quote {

    border-left: 5px solid black;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;

    font-size: 90%;
    max-width: 300px;
    line-height: 1.5;
    height: 100%;

    /*Give a smaller flex basis*/
    flex-basis: 300px;
}

p.quote:nth-child(3n+0) {
	border-color: rgba(0,168,59,1); /*dark-green*/
}

p.quote:nth-child(3n+1) {
	border-color: rgba(32,124,229,1); /*dark-blue*/
}

p.quote:nth-child(3n+2) {
	border-color: rgb(213,15,37,1); /*dark-red*/
}

/*=== Profile Picture ===*/

img.profile {

	/*Set max for flex item resizing*/
	max-width: 300px;
    max-height: 300px;

    margin: 20px;

    /*Give a smaller flex basis*/
    flex-basis: 300px;
}

/*=== Page Specific ===*/

/*home*/
.carousel {
    height: 23rem;
    margin-top: -2rem;
    margin-left: -1rem;
    margin-right: -1rem;
    background: #dddddd;
}

/* Size images to fit */
.carousel-inner>.item>img {
    height: 23rem;
}

/* Default carousel overrides */

@media screen and (min-width: 768px) {
    .carousel-indicators {
        bottom: 0rem;
    }

    .carousel-caption {
        padding-bottom: 0.5rem;
    }
}

.hostess {
    display: flex;
}

.hostess > div {
    width: 30%;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    margin: 0.5rem;
}

/* Format content */

.hostess > div p {
    font-size: .9rem;
    font-weight: 300;
}

.hostess > div p > i {
    margin-right: .4rem;
}

.hostess > div > h4 {
    text-align: center;
}

/* Center container */

.hostess > div:not(.well) > h4 {
    margin-left: -.2rem;
    margin-right: -.2rem;
}

.hostess > div:not(.well) {

    width: 38%;
    padding-top: .8rem;
    border-radius: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid white;
}

.hostess > div.well {
    padding-top: .7rem;
}

.hostess .hostess__email {
    font-size: .8rem;
}

/* Hover and show clickable logic */

.hostess > div.well:hover {
    cursor: pointer;
    border: 1px solid #00a6f0;
}

.hostess > div:hover span {
    display: inline;
}

.hostess > div span {
    display:none;
    position: absolute;
    bottom: .3rem;
    right: .5rem;
    font-size: .8rem;
    color: #00a6f0;
}

/* insurance */

.insurance .flex-container {

    line-height: 8rem;
}

/* Health Plan shows grey but gains color when hovering */
.insurance .health-plan {

    /* flex box width */
    flex-basis: 13rem;

    /* Styles to be overwritten */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.75;

    /* Animation logic */
    -webkit-transition: -webkit-filter 0.2s ease, opacity 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
    transition: filter 0.2s ease, opacity 0.2s ease;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) scale(1, 1);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}

/* Option to now show health plan */
.insurance .health-plan--disabled {
    display: none;
}

.insurance .health-plan:hover {

    /* Show color */
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

.insurance .health-plan .health-plan__img {
    width: 100%;
}

/*staff*/

/*
    ___ How To Use ___
    .profile = Use to define
    <div class="profile">
        <span class="profile__pic" >
            <img>
        </span>
        <span class="profile__desc">
            <h3>Name</h3>
            <p>
                Profile description
                <a class="profile__readmore">Read More...</a>
            </p>
            <p class="profile__2-desc">Profile additional details</p>
        </span>
    </div>

    ___ Options ___
    .profile--noborder = remove picture border and shadow
        use: <div class="profile profile--noborder">
    .profile__2-desc--show = shows the additional details
        use: <p class="profile__2-desc profile__2-desc--show">
    .profile--red = border element is red
        use: <div class="profile profile--red">
    .profile--yellow = border element is yellow
    .profile--green = border element is green

*/
.profile {
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    flex-wrap: wrap;

    border-bottom: 1px solid #aaa;
}

.profile:last-of-type {
    border-bottom: 0;
}

.profile > span {
    margin: 1rem;
    position: relative;
}

.profile.profile--red .profile__pic {
    border: 5px solid #ff4508;
}

.profile.profile--yellow .profile__pic {
    border: 5px solid #ffb700;
}

.profile.profile--green .profile__pic {
    border: 5px solid #6cba00;
}

.profile.profile.profile--noborder .profile__pic {
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.profile .profile__pic {

    /* Image absolute is relative to frame */
    position: relative;
    display: inline-block;

    /* Circle crop */
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #ff4508;
    z-index: 1;

    /* sizing */
    box-sizing: border-box;
    width: 13rem;
    height: 13rem;

    /* shadow */
    -webkit-box-shadow: 10px 7px 25px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 7px 25px -5px rgba(0,0,0,0.75);
    box-shadow: 9px 7px 10px -5px rgba(0,0,0,0.55);
}

.profile .profile__pic img {
    position: absolute;
    display: inline-block;

    width: 100%;
    height: auto;

    /* ___ vertical overflow crop ___ */
    /* ASSUME -10rem is much larger than the image */
    top: -10rem;
    bottom: -10rem;
    left: 0;

    /* Center vertically */
    margin: auto 0;
}

.profile .profile__desc {
    position: relative;
    display: inline-block;
    width: 20rem;
    text-overflow: ellipsis;
}

.profile .profile__desc h3 {
    margin-top: 0;
    margin-bottom: 1.3rem;
}

.profile .profile__desc p {
    font-size: .95rem;

    /* This should not happen we should show read more before this */
    max-height: 11rem;
    overflow: hidden;

    /* Change text color for easier reading */
    color: #777;
}

/* Don't break up read more... */
.profile .profile__readmore {
    white-space: nowrap;
}

/* Default hidden */
.profile p.profile__2-desc {
    max-height: 0;
    overflow: hidden;

    transition: max-height 2s;
}

/* Show by animation */
.profile p.profile__2-desc.profile__2-desc--show {
    max-height: 40rem;
}

/*location*/
.location {

    /*center map*/
    text-align: center;
}

.info-container {
    display: flex;
    /* align-items: center; */
    justify-content: space-around;
    font-size: .9em;
    font-weight: 300;
}

.info-container .fa {
    color: #00a6f0;
}

.info-container p {
    display: block;
    text-align: left;
}

.info-container .fa {
    width: 1rem;
    text-align: right;
    padding-right: .3rem;
}

.info-container .info-container__hidden {
    visibility: hidden;
}

.info-container .info-container__email {
    font-size: 0.8rem;
}