body {
    font-family: 'Architects Daughter';
    margin: 0;
    background-color: rgba(0,0,0,.6);
    background-image: url('../images/mainBlur.jpg');
    text-shadow: 0 1px 0px rgb(0, 0, 0);
    color: #fff;
}

.blur {
    background-image: url('../images/mainBlur.jpg');
    background-size: cover;
    background-position: center;
}

.secondBlur {
    background-image: url('../images/secondBlur.jpg');
    background-size: cover;
    background-position: center;
}

a {
    color: rgb(17, 126, 194);
}

    a:hover {
        text-decoration: none;
        text-shadow: 2px 1px #000;
        color: rgb(147, 213, 255);
    }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

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

#over {
    width: 400px;
    margin: 0 auto;
}

.centerDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
}

.paddingTop {
    padding-top: 40px;
}

.paddingBottom {
    padding-bottom: 40px;
}

.footer {
    padding-left: 0;
    padding-right: 0;
    background: #27323b;
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.6);
    height: 100%;
    width: 100%;
}

.pictureBackground {
    width: 100%;
    height: 425px;
    background-image: url(../images/smileMain.png);
    background-size: contain;
    background-position-x: right;
    background-position-y: top;
    background-repeat: no-repeat;
}

.pictureBackground2 {
    width: 100%;
    height: 425px;
    background-image: url('../images/teeth2.png');
    /*background-image: url(../images/teeth2.jpg);*/
    background-size: contain;
    background-position-x: left;
    background-position-y: top;
    background-repeat: no-repeat;
}

.patientPictureBackground {
    width: 100%;
    height: 425px;
    background-image: url(../images/coupleSmiling.png);
    background-size: contain;
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.postPictureBackground {
    width: 100%;
    height: 425px;
    background-image: url(../images/familySmiling.png);
    background-size: contain;
    background-position-x: left;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.message {
    text-shadow: 0 2px 0px rgb(0, 0, 0);
    color: #ffffff;
    padding-right: 0;
    padding-left: 0;
}

#servicesButton {
    text-align: center;
    font-size: xx-large;
    font-family: "Baloo Chettan";
    border: 1px solid black;
}

.teamPic {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 350px;
    background-image: url('../images/team.JPG');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ian {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 350px;
    background-image: url('../images/IanCustomer.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.chair {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 350px;
    background-image: url('../images/chair.JPG');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.doctors {
    margin-top: 5%;
    height: 350px;
    background-image: url('../images/ianAndNancy.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#office {
    height: 350px;
    background-image: url('../images/office.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
    margin-top: 35px;
}

#service {
    width: 100%;
    height: 425px;
    background-image: url('../images/teeth2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.about {
    font-family: 'Architects Daughter';
    font-size: 22px;
}

#michelle {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/michellephoto.jpg');
}

#dawna {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 350px;
    background-image: url('../images/dawna.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#chrissy {
    margin-top: 5%;
    margin-bottom: 5%;
    height: 350px;
    background-image: url('../images/chrissy.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.team {
    height: 300px;
    padding: 25px;
    background-image: url('http://www.blueoakschurch.org/wp-content/uploads/2014/11/person-placeholder-female.jpg');
}

#name, #email {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(28, 28, 28, 0.2);
    height: 2.75em;
    width: 100%;
    margin-top: 25px;
}

#sendButton {
    background: #4e799c;
    width: 150px;
    margin: 0 auto;
    border-radius: 5px;
}

#message {
    padding-right: 0;
    margin-top: 25px;
    width: 100%;
    border: 2px solid;
    border-color: rgba(28, 28, 28, 0.2);
    background: rgba(255, 255, 255, 0.26);
}

.MesLabel {
    font-family: "Baloo Chettan";
    font-size: 24px;
    margin-top: 15px;
    letter-spacing: 1px;
}

.sendMessage {
    font-family: "Baloo Chettan";
    margin-top: 25px;
    text-align: center;
    height: 50px;
}


.top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #3d505f;
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.6);
    border: 1px solid rgba(0,0,0,.1);
    color: #FFF;
    height: 70px;
    padding: 1em;
    position: fixed;
    width: 100%;
    z-index: 1;
}

.menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .menu > li {
        margin: 0 1rem;
    }

.dental {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .dental > li {
        margin: 0 1rem;
    }

.menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu-toggle {
    display: none;
}

.menu-button, .menu-button::before, .menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
}

    .menu-button::before {
        content: '';
        margin-top: -8px;
    }

    .menu-button::after {
        content: '';
        margin-top: 8px;
    }

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
}

    #menu-toggle:checked + .menu-button-container .menu-button::after {
        margin-top: 0px;
        transform: rotate(-405deg);
    }

.links {
    font-family: 'Architects Daughter';
    color: #fff;
}

.dropdownContent {
    display: none;
    position: absolute;
    background-color: #415c72;
    min-width: 160px;
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.6);
}



    .dropdownContent a {
        color: #fff;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        width: 100%;
        min-width: 200px;
    }

        .dropdownContent a:hover {
            background-color: #fff;
            text-shadow: 2px 1px #fff;
            /* background-color: #669ACD; */
            color: #203040;
        }

.number {
    color: #fff;
}

.logo {
    font-family: 'Rock Salt', Cursive;
    font-size: 30px;
    text-shadow: 2px 2px #000;
    color: #fff;
}

.social {
    display: inline;
}

.socialMedia:hover {
    transform: scale(1.1);
}

.mainMessage span {
    line-height: 1.7;
}

.mainTeam {
    border: 4px solid #fff;
    border-radius: 4px;
    width: 450px;
    height: auto;
    max-width: 100%;
}

.learnMore {
    background: rgb(76, 119, 154);
    border-radius: 10px;
    color: #fff;
}

    .learnMore:hover {
        color: rgb(147, 213, 255);
        box-shadow: 0 2px 10px 1px rgba(0,0,0,.6);
    }

.docPic {
    max-width: 100%;
    max-height: 425px;
    border: 10px solid #fff;
    border-radius: 10px;
    margin-bottom: 20px;
}

.aboutTeam {
    max-width: 100%;
    max-height: 350px;
    border: 10px solid #fff;
    border-radius: 10px;
    margin-right: 20px;
}

.services a {
    color: #fff;
}

    .services a:hover {
        text-decoration: none;
        text-shadow: 2px 1px #fff;
        color: rgb(17, 126, 194);
    }

.mainButton {
    color: #203040;
    border: none;
    background: #4e799c;
}

.mapContent {
    color: #000;
}

















/*400px*/
@media(max-width:25em) {
    .logo {
        font-size: 17px;
    }
}
/*400px-520px*/
@media(min-width:25em) and (max-width:32.5em) {
    .logo {
        font-size: 22px;
    }
}

@media(min-width:28em) {
    #phone {
        float: right;
        padding-left: 12px;
    }
}

/*616px*/
@media(max-width: 38.5em) {
    .pictureBackground {
        background-size: cover;
    }
}

@media (max-width: 47.98em) {
    .saying {
        background-color: rgba(0, 0, 0, 0.4);
        height: 100%;
    }
}

@media(min-width:48.063em) {
    .dropdown:hover .dropdownContent {
        display: block;
    }
}

/*768px*/
@media(min-width:48em) {
    .center {
        width: 85%;
        margin: 0 auto;
    }

    .line {
        border-right: 2px solid rgba(0, 0, 0, 0.31);
    }

    .aboutpic {
        margin: 10px;
        width: 100%;
        max-height: 425px;
        border: 10px solid #fff;
        border-radius: 10px;
    }


    .mainTeam {
        margin: 15px;
    }

    .insurance {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .insuranceImg {
        max-width: 50%;
    }
}

/*768px*/
@media (max-width: 48em) {
    .dropdown a {
        width: 100%;
        text-align: center;
    }

    .aboutpic {
        margin: 0 0 0 0;
        width: 100%;
        max-height: 425px;
        border: 10px solid #fff;
        border-radius: 10px;
    }

    .center {
        width: 100%;
        margin: 0 auto;
    }

    .menu-button-container {
        display: flex;
    }

    .menu {
        display: none;
    }

    .menu {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
    }

    .emailBox {
        padding-left: 0;
    }

    .pictureBackground2 {
        background-size: cover;
    }

    #menu-toggle ~ .menu li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        z-index: -1;
    }

    #menu-toggle:checked ~ .menu li {
        border: 1px solid #333;
        height: 2.5em;
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 2;
    }

        #menu-toggle:checked ~ .menu li a {
            color: #fff;
        }

    #menu-toggle:checked ~ .menu {
        display: block;
    }

    .menu > li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background-color: #475057;
    }

        .menu > li:not(:last-child) {
            border-bottom: 1px solid #444;
        }

    .insuranceImg {
        max-width: 75%;
    }
}

/*768px - 960px*/
@media(min-width: 48em) and (max-width:60em) {
    .logo {
        font-size: 18px;
    }
}

/*960px*/
@media (max-width: 60em) {
    ul {
        font-size: 14px;
    }

    .services li {
        font-size: 22px;
    }
}

/*960px - 1024px*/
@media(min-width:60em) and (max-width:64em) {
    #phone {
        float:none;
    }
}

/*1024px*/
@media(min-width:64em) {
}