html {
    height: 100%;
    margin: 0;
    padding: 0;    
}

a {
    color: rgb(75, 75, 173);
    text-decoration: none;
}

a:hover {
    color: rgb(75, 75, 173);
    text-decoration: none;
}

a:visited {
    color: rgb(56,56,143);
    text-decoration: none;
}

.psf-text {
    color: rgb(135,135,188);
}

.psf-smalltext {
    color:grey; 
    font-size:0.7em;    
}

body {
    font-family: 'Raleway', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 100%;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bbbbdb+0,ffffff+100 */
    background: #bbbbdb; /* Old browsers */
    background: -moz-linear-gradient(top,  #bbbbdb 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #bbbbdb 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #bbbbdb 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbdb', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */


    background-repeat: no-repeat;
    background-attachment: fixed;    

}

.header {
    color: #38388f;
    background: url(../img/Header.jpg) no-repeat #F1F1F1;
    background-size: 40%;
    background-position: right;
    padding: 12px 32px 1px 32px;
    border-radius: 5px;
    margin-bottom: 8px;
}

.callout {
    margin: 10px 10px 10px 0px;
    padding: 5px 5px 5px 28px;
    background-color: #E0E0E0;
    background-image: url(../img/PostQuote.png);
    background-position: left top;
    background-repeat: no-repeat;    
}

.surgeonimg {
    border: 1px solid black;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
}

main {
    padding: 16px 64px;
    margin: 8px auto;
}

footer {
    background: #CCCCE4;
    text-shadow: 1px 1px 1px #FFFFFF;    
    padding: 22px;
    border-radius: 5px;
}

footer li {
    list-style: none;
}

footer a {
    color: #000;
}

footer a:hover {
    color: #333;
    text-decoration: none;
}

footer a:visited {
    color: #333;
    text-decoration: none;
}


h1,h2 {
    font-family: 'Cinzel', 'Times New Roman', Times, serif;
}

h2 {
    font-size: 1.6em;
}

.masthead {
    font-size: 2.5em;
    text-shadow: 1px 2px 2px #FFFFFF;
}

.tagline {
    font-family: 'Cinzel', 'Times New Roman', Times, serif;
    font-size: 0.9em;
    text-shadow: 1px 2px 2px #FFFFFF;
}

.phone-number {
    font-size: 1.2em;
}

.hugoTitle {
    margin-bottom: 24px;
}

.glare {
    background-image: url(../img/page-glare.png);    /* background-color: #CCCCE4;  */
    background-repeat: no-repeat;
}

.jumbotron {
    min-height: 125px;
    max-height: 250px;
    padding: 2px 32px 2px 31px;
    margin: 0 0 12px 0;
    color: #38388f;
    background: url(../img/Header.jpg) no-repeat #F1F1F1;
    background-size: 40%;
    background-position: right;
    overflow: hidden;
}

nav {
    border-radius: 5px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}

.container {
    background-color: #FFFFFF;
    padding-top: 12px;
    border-radius: 1%;
}

.grad-footer {

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2ef+0,ffffff+100 */
background: #e2e2ef; /* Old browsers */
background: -moz-linear-gradient(top,  #e2e2ef 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e2e2ef 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e2e2ef 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2ef', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */


}

.grad {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bbbbdb+0,ffffff+73,ffffff+100 */
background: #bbbbdb; /* Old browsers */
background: -moz-linear-gradient(top,  #bbbbdb 0%, #ffffff 73%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #bbbbdb 0%,#ffffff 73%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #bbbbdb 0%,#ffffff 73%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbdb', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

.logo {
    height: 125px;
}

.validationerror {
    color: sienna;
    font-weight: 600;
    background: lemonchiffon;
}

.gotcha-element {
    display: none;
}

@Media (max-width: 1200px) {
    .header {
        background-size: 50%;
    }
}

@media (max-width: 992px) {
    .header {
        /* background-size: 62%; */
        background-image: none;
        /* background-color: rgba(231,231,243, 0.7); */

        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cccce4+0,eeeef7+100&0.75+1,0.5+100 */
        background: -moz-linear-gradient(top,  rgba(204,204,228,0.75) 0%, rgba(204,204,228,0.75) 1%, rgba(238,238,247,0.5) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(204,204,228,0.75) 0%,rgba(204,204,228,0.75) 1%,rgba(238,238,247,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(204,204,228,0.75) 0%,rgba(204,204,228,0.75) 1%,rgba(238,238,247,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfcccce4', endColorstr='#80eeeef7',GradientType=0 ); /* IE6-9 */
    }
}

@media (max-width: 766px) {

    main {
        padding: 12px 24px;
    }
        
    .masthead {
        font-size: 1.7em;
    }

    .tagline {
        font-size: 0.7em;
    }

    .phone-number {
        font-size: 1.2em;
    }

    .header {
        background-size: 80%;
    }

    .logo {
        height: 70px;
    }

    footer {
        padding: 12px;
    }

}

@media (max-width: 500px) {

    .masthead {
        font-size: 1.6em;
    }

    .tagline {
        font-size: 0.7em;
    }

    .phone-number {
        font-size: 1.0em;
    }

    .header {
        background: #F1F1F1;
        background-size: 100%;
    }

}