/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
            /* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
            /* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            .container {
                position: relative;
                width: 100%;
                max-width: 960px;
                margin: 0 auto;
                padding: 0 20px;
                box-sizing: border-box;
            }
            
            .column,
            .columns {
                width: 100%;
                float: left;
                box-sizing: border-box;
            }
            /* For devices larger than 400px */
            
            @media (min-width: 400px) {
                .container {
                    width: 85%;
                    padding: 0;
                }
            }
            /* For devices larger than 550px */
            
            @media (min-width: 550px) {
                .container {
                    width: 80%;
                }
                .column,
                .columns {
                    margin-left: 4%;
                }
                .column:first-child,
                .columns:first-child {
                    margin-left: 0;
                }
                .one.column,
                .one.columns {
                    width: 4.66666666667%;
                }
                .two.columns {
                    width: 13.3333333333%;
                }
                .three.columns {
                    width: 22%;
                }
                .four.columns {
                    width: 30.6666666667%;
                }
                .five.columns {
                    width: 39.3333333333%;
                }
                .six.columns {
                    width: 48%;
                }
                .seven.columns {
                    width: 56.6666666667%;
                }
                .eight.columns {
                    width: 65.3333333333%;
                }
                .nine.columns {
                    width: 74.0%;
                }
                .ten.columns {
                    width: 82.6666666667%;
                }
                .eleven.columns {
                    width: 91.3333333333%;
                }
                .twelve.columns {
                    width: 100%;
                    margin-left: 0;
                }
                .one-third.column {
                    width: 30.6666666667%;
                }
                .two-thirds.column {
                    width: 65.3333333333%;
                }
                .one-half.column {
                    width: 48%;
                }
                /* Offsets */
                .offset-by-one.column,
                .offset-by-one.columns {
                    margin-left: 8.66666666667%;
                }
                .offset-by-two.column,
                .offset-by-two.columns {
                    margin-left: 17.3333333333%;
                }
                .offset-by-three.column,
                .offset-by-three.columns {
                    margin-left: 26%;
                }
                .offset-by-four.column,
                .offset-by-four.columns {
                    margin-left: 34.6666666667%;
                }
                .offset-by-five.column,
                .offset-by-five.columns {
                    margin-left: 43.3333333333%;
                }
                .offset-by-six.column,
                .offset-by-six.columns {
                    margin-left: 52%;
                }
                .offset-by-seven.column,
                .offset-by-seven.columns {
                    margin-left: 60.6666666667%;
                }
                .offset-by-eight.column,
                .offset-by-eight.columns {
                    margin-left: 69.3333333333%;
                }
                .offset-by-nine.column,
                .offset-by-nine.columns {
                    margin-left: 78.0%;
                }
                .offset-by-ten.column,
                .offset-by-ten.columns {
                    margin-left: 86.6666666667%;
                }
                .offset-by-eleven.column,
                .offset-by-eleven.columns {
                    margin-left: 95.3333333333%;
                }
                .offset-by-one-third.column,
                .offset-by-one-third.columns {
                    margin-left: 34.6666666667%;
                }
                .offset-by-two-thirds.column,
                .offset-by-two-thirds.columns {
                    margin-left: 69.3333333333%;
                }
                .offset-by-one-half.column,
                .offset-by-one-half.columns {
                    margin-left: 52%;
                }
            }
            /* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            /* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
            
            html {
                font-size: 62.5%;
            }
            
            body {
                font-size: 1.5em;
                /* currently ems cause chrome bug misinterpreting rems on body element */
                line-height: 1.6;
                font-weight: 400;
                font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
                color: #222;
            }
            /* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin-top: 0;
                margin-bottom: 2rem;
                font-weight: 300;
            }
            
            h1 {
                font-size: 4.0rem;
                line-height: 1.2;
                letter-spacing: -.1rem;
            }
            
            h2 {
                font-size: 3.6rem;
                line-height: 1.25;
                letter-spacing: -.1rem;
            }
            
            h3 {
                font-size: 3.0rem;
                line-height: 1.3;
                letter-spacing: -.1rem;
            }
            
            h4 {
                font-size: 2.4rem;
                line-height: 1.35;
                letter-spacing: -.08rem;
            }
            
            h5 {
                font-size: 1.8rem;
                line-height: 1.5;
                letter-spacing: -.05rem;
            }
            
            h6 {
                font-size: 1.5rem;
                line-height: 1.6;
                letter-spacing: 0;
            }
            /* Larger than phablet */
            
            @media (min-width: 550px) {
                h1 {
                    font-size: 5.0rem;
                }
                h2 {
                    font-size: 4.2rem;
                }
                h3 {
                    font-size: 3.6rem;
                }
                h4 {
                    font-size: 3.0rem;
                }
                h5 {
                    font-size: 2.4rem;
                }
                h6 {
                    font-size: 1.5rem;
                }
            }
            
            p {
                margin-top: 0;
            }
            /* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            a {
                color: red;
            }
            
            a:hover {
                background-color: #ffc72c;
                color: black;
            }
            /* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            .button,
            button,
            input[type="submit"],
            input[type="reset"],
            input[type="button"] {
                display: inline-block;
                height: 38px;
                padding: 0 30px;
                color: #555;
                text-align: center;
                font-size: 11px;
                font-weight: 600;
                line-height: 38px;
                letter-spacing: .1rem;
                text-transform: uppercase;
                text-decoration: none;
                white-space: nowrap;
                background-color: transparent;
                border-radius: 4px;
                border: 1px solid #bbb;
                cursor: pointer;
                box-sizing: border-box;
            }
            
            .button:hover,
            button:hover,
            input[type="submit"]:hover,
            input[type="reset"]:hover,
            input[type="button"]:hover,
            .button:focus,
            button:focus,
            input[type="submit"]:focus,
            input[type="reset"]:focus,
            input[type="button"]:focus {
                color: #333;
                border-color: #888;
                outline: 0;
            }
            
            .button.button-primary,
            button.button-primary,
            input[type="submit"].button-primary,
            input[type="reset"].button-primary,
            input[type="button"].button-primary {
                color: #FFF;
                background-color: #33C3F0;
                border-color: #33C3F0;
            }
            
            .button.button-primary:hover,
            button.button-primary:hover,
            input[type="submit"].button-primary:hover,
            input[type="reset"].button-primary:hover,
            input[type="button"].button-primary:hover,
            .button.button-primary:focus,
            button.button-primary:focus,
            input[type="submit"].button-primary:focus,
            input[type="reset"].button-primary:focus,
            input[type="button"].button-primary:focus {
                color: #FFF;
                background-color: #1EAEDB;
                border-color: #1EAEDB;
            }
            /* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            input[type="email"],
            input[type="number"],
            input[type="search"],
            input[type="text"],
            input[type="tel"],
            input[type="url"],
            input[type="password"],
            textarea,
            select {
                height: 38px;
                padding: 6px 10px;
                /* The 6px vertically centers text on FF, ignored by Webkit */
                background-color: #fff;
                border: 1px solid #D1D1D1;
                border-radius: 4px;
                box-shadow: none;
                box-sizing: border-box;
            }
            /* Removes awkward default styles on some inputs for iOS */
            
            input[type="email"],
            input[type="number"],
            input[type="search"],
            input[type="text"],
            input[type="tel"],
            input[type="url"],
            input[type="password"],
            textarea {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }
            
            textarea {
                min-height: 65px;
                padding-top: 6px;
                padding-bottom: 6px;
            }
            
            input[type="email"]:focus,
            input[type="number"]:focus,
            input[type="search"]:focus,
            input[type="text"]:focus,
            input[type="tel"]:focus,
            input[type="url"]:focus,
            input[type="password"]:focus,
            textarea:focus,
            select:focus {
                border: 1px solid #33C3F0;
                outline: 0;
            }
            
            label,
            legend {
                display: block;
                margin-bottom: .5rem;
                font-weight: 600;
            }
            
            fieldset {
                padding: 0;
                border-width: 0;
            }
            
            input[type="checkbox"],
            input[type="radio"] {
                display: inline;
            }
            
            label>.label-body {
                display: inline-block;
                margin-left: .5rem;
                font-weight: normal;
            }
            /* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            ul {
                list-style: circle inside;
            }
            
            ol {
                list-style: decimal inside;
            }
            
            ol,
            ul {
                padding-left: 0;
                margin-top: 0;
            }
            
            ul ul,
            ul ol,
            ol ol,
            ol ul {
                margin: 1.5rem 0 1.5rem 3rem;
                font-size: 90%;
            }
            
            li {
                margin-bottom: 1rem;
            }
            /* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            code {
                padding: .2rem .5rem;
                margin: 0 .2rem;
                font-size: 90%;
                white-space: nowrap;
                background: #F1F1F1;
                border: 1px solid #E1E1E1;
                border-radius: 4px;
            }
            
            pre>code {
                display: block;
                padding: 1rem 1.5rem;
                white-space: pre;
            }
            /* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            th,
            td {
                padding: 12px 15px;
                text-align: left;
                border-bottom: 1px solid #E1E1E1;
            }
            
            th:first-child,
            td:first-child {
                padding-left: 0;
            }
            
            th:last-child,
            td:last-child {
                padding-right: 0;
            }
            /* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            button,
            .button {
                margin-bottom: 1rem;
            }
            
            input,
            textarea,
            select,
            fieldset {
                margin-bottom: 1.5rem;
            }
            
            pre,
            blockquote,
            dl,
            figure,
            table,
            p,
            ul,
            ol,
            form {
                margin-bottom: 2.5rem;
            }
            /* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            .u-full-width {
                width: 100%;
                box-sizing: border-box;
            }
            
            .u-max-full-width {
                max-width: 100%;
                box-sizing: border-box;
            }
            
            .u-pull-right {
                float: right;
            }
            
            .u-pull-left {
                float: left;
            }
            /* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            
            hr {
                margin-top: 3rem;
                margin-bottom: 3.5rem;
                border-width: 0;
                border-top: 1px solid #E1E1E1;
            }
            /* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            /* Self Clearing Goodness */
            
            .container:after,
            .row:after,
            .u-cf {
                content: "";
                display: table;
                clear: both;
            }
            /* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
            /*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
            /* Larger than mobile */
            
            @media (min-width: 400px) {}
            /* Larger than phablet (also point when grid becomes active) */
            
            @media (min-width: 550px) {}
            /* Larger than tablet */
            
            @media (min-width: 750px) {}
            /* Larger than desktop */
            
            @media (min-width: 1000px) {}
            /* Larger than Desktop HD */
            
            @media (min-width: 1200px) {}
            /* Custom CSS for SkepticalVet.com */
            /* @media (max-width: 500px) {
    .danny {
        display: block;
        margin-left: 18% !important;
        margin-bottom: 10%;
        border-radius: 25%;
    }
} */
            
            .danny {
                border-radius: 25%;
            }
            
            @media (min-width: 1px) and (max-width: 525px) {
                .danny {
                    margin-left: 18%;
                }
            }
            
            @media (min-width: 526px) and (max-width: 699px) {
                .danny {
                    margin-left: 30%;
                }
            }
            
            @media (min-width: 700px) and (max-width: 900px) {
                .danny {
                    display: none;
                }
            }
            
            .button-primary:hover {
                background-color: black !important;
                color: grey !important;
            }
            
            .book {
                color: white;
                /* background-color: grey; */
            }
            
            .book:hover {
                background-color: black;
                color: grey;
            }
            
            .card {
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
                transition: 0.3s;
                width: 100%;
                border-radius: 5px;
                margin: 5px;
            }
            
            .card:hover {
                box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
            }
            
            img {
                border-radius: 5px 5px 0 0;
            }
            
            .container {
                padding: 2px 16px;
            }
            
            .avatar {
                width: 165px;
            }
            
            .h7 {
                font-size: 1.49rem;
                line-height: 1.8;
                letter-spacing: 0px;
            }
            
            .fortress:hover {
                background-color: white;
            }
            
            .facebook:hover {
                background-color: white;
            }
            
            #bannerimage {
                width: 100%;
                background-image: url(../images/dannybase.jpeg);
                height: 300px;
                opacity: 85%;
                background-position: center;
            }
            
            .bannerimage2 {
                width: 100%;
                background-image: url(../images/Southern\ Limit_The\ Arghandab\ River\ Footer.JPG);
                height: 400px;
                background-position: center;
            }
            
            @media (min-width: 350px) and (max-width: 700px) {
                /* .bookimage {
                    padding-right: 50%;
                }
                .bookimagelink:hover {
                    background-color: white;
                }
                .bookimagetext {
                    color: black;
                } */
                blockquote {
                    margin-bottom: -2%;
                    margin-left: 1%;
                    width: 80% !important;
                }
                .scrollboxBIO {
                    width: 350px !important;
                    height: 400px;
                    overflow: scroll;
                    background-color: rgba(117, 120, 122, 0.10);
                    padding: 1%;
                }
            }
            
            blockquote {
                margin: 0%;
                padding-top: 1%;
                margin-bottom: -2%;
                margin-left: 10%;
                width: 50%;
                /* text-align: center; */
                border-radius: 20px;
            }
            
            .scrollboxBIO {
                width: 640px;
                height: 400px;
                overflow: scroll;
                background-color: rgba(117, 120, 122, 0.10);
                padding: 1%;
            }
            
            .bannertext {
                word-spacing: -.1em;
            }
            /*
 CSS for the main interaction
*/
            
            .blockquote {
                margin: 0%;
                padding-top: 1%;
                margin-bottom: -2%;
                margin-left: 10%;
                width: 50%;
                /* text-align: center; */
                border-radius: 20px;
                word-spacing: -.1em;
            }
            
            .bannertext {
                word-spacing: .15em;
            }
            
            .accordion>input[type="checkbox"] {
                position: absolute;
                left: -100vw;
            }
            
            .accordion .content {
                overflow-y: hidden;
                height: 0;
                transition: height 0.3s ease;
            }
            
            .accordion>input[type="checkbox"]:checked~.content {
                height: auto;
                overflow: visible;
            }
            
            .accordion label {
                display: block;
            }
            /*
   Styling
  */
            
            body {
                font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
                color: #333;
                font-weight: 300;
            }
            
            .accordion {
                margin-bottom: 1em;
            }
            
            .accordion>input[type="checkbox"]:checked~.content {
                padding: 15px;
                border: 1px solid #e8e8e8;
                border-top: 0;
            }
            
            .accordion .handle {
                margin: 0;
                font-size: 1.125em;
                line-height: 1.2em;
            }
            
            .accordion label {
                color: #333;
                cursor: pointer;
                font-weight: normal;
                padding: 15px;
                background: #e8e8e8;
            }
            
            .accordion label:hover,
            .accordion label:focus {
                background: #d8d8d8;
            }
            
            .accordion .handle label:before {
                font-family: 'fontawesome';
                content: "\f054";
                display: inline-block;
                margin-right: 10px;
                font-size: .58em;
                line-height: 1.556em;
                vertical-align: middle;
            }
            
            .accordion>input[type="checkbox"]:checked~.handle label:before {
                content: "\f078";
            }
            /*
   Demo purposes only
  */
            
            *,
            *:before,
            *:after {
                box-sizing: border-box;
            }
            
            .accordion {
                max-width: 100em;
            }
            
            .accordion p:last-child {
                margin-bottom: 0;
            }
            
            html {
                scroll-behavior: smooth;
            }
            
            .bookimage {
                margin-left: 8%;
            }
            
            .bookimagelink:hover {
                background-color: white;
            }
            
            .bookimagetext {
                color: black;
            }
            
            .debs {
                left: 0;
                top: 0;
                text-align: center;
                padding-bottom: .1em;
                color: white;
            }
            
            .debss {
                left: 0;
                top: 0;
                text-align: center;
                color: black;
                padding-bottom: .4em;
            }
            
            .debsss {
                left: 0;
                top: 0;
                text-align: center;
                color: black;
                margin-bottom: -1em;
            }