* {
    box-sizing: border-box;
}
body {
    margin:5px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: white  !important;
    font-family: 'Raleway', sans-serif !important;

}
#body{
    margin-top:25px; !important;
}

p {
    color: #6B7D7E;
    font-size: 16px;
    padding:5px;
}
h1 {
    color: #326273 !important;
    /*font-size: 50px !important;*/
    font-family: 'Cutive', serif !important;
}
h3 {
    color: white !important;
    font-family: 'Raleway', sans-serif;

}
h2 {
    color: #326273 !important;
}
h5 {
    color: #326273 !important;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em !important;
}
/* hover animations */
li a:hover {
    color: #D94D42;
}
a.btn:hover {
    background-color:#fc6453 !important;
    box-shadow: 1px 2px 5px #000000;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
i.fa-arrow-circle-up:hover {
    color: #D94D42 !important;
}
i.fa.fa-facebook-square:hover {
    color: #D94D42;
}
a.nav-link.active {
    /*color: #006EC6 !important;*/
    /*background-color: #868686 !important;*/
    /*border-top: solid 2px #006EC6 !important;*/
    /*border-bottom: solid 2px #006EC6 !important;*/
}
a.nav-link:hover {
    /*background-color: white;*/
    /*color: #006EC6*/
}
/*.social {*/
    /*padding:10px;*/
/*}*/

/*header */
.media-group {
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    align-items: center;
    /*border: solid black 2px;*/
    height:150px;
    width:100%;
    padding-left:5%;

}
img.image {
    padding: 5px 0px 0px 15px;
    max-width: 100%;
    max-height: 120px;
    margin-right:30px;

}
h1.title {
    /*font-weight:bold;*/
    line-height: 1.15em;
    text-align:center;
    font-size:38px;
    margin-bottom:0px;
}
.top {
    margin-bottom:10px !important;
}
/*navigation bar */
.nav1 {
    width: 100%;
    height: 95px;
    font-size: 24px;
    line-height: 60px;
    background: #326273;
    color: #fff;
    position: relative;
    margin-bottom: 15px;
    z-index: 3;
    text-transform: uppercase;
    padding-top: 15px;

}
.nav2 {
    width: 100%;
    height: 60px;
    font-size: 16px;
    line-height: 60px;
    background: #326273;
    color: #fff;
    margin-bottom: -60px;
    z-index: 3;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    -webkit-transition: height .5s ease-in;
    transition: height .5s ease-out;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.navigation li {
    list-style: none;
}
.navigation li a {
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold !important;

}
.navigation li a:hover:not(.active) {
    color:#D94D42;
    /*background-color: #ddd;*/
    text-decoration: none;

}
.navigation li a.active {
    color: #F44336;
    text-decoration: none;
    font-weight: bold !important;

}
ul.navigation {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-left:0px;

}

div.socialtop2  {
    position: absolute !important;
    top: 10px !important;
    z-index: 1000 !important;
    right: 25px !important;
    margin-top: 20px !important;
    width:50px !important;
    height:50px !important;
}



/*carousel */
.carousel-item img {
    height:600px !important;
    width: 100%;

}


.main {
    /*padding:50px 5%;*/
    padding-top: 10px;
}
.carousel {
    margin: 15px;
}

.around {
    top:-30px;
    width:40%;
    left:30%;
    position:absolute;
    line-height:50px

}
h3#mission  {
    color: white !important;
    background-color: #326273;
    font-size:25px;
    text-align:center;
    padding:10px;
}


#main-text {
    background-color:white;
    padding:30px 15px 10px;
    position:relative;
    border:5px solid #326273;
    border-radius:5px;
    margin:30px 0;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
#main-text > p {
    font-size:1.2em;
    color:black;
    opacity: .9;

}
h3#mission  {
    color: white !important;
    background-color: #326273;
}



.side-content {
    display:flex;
    flex-direction:column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items:center;

}
.side-content .donate {
    margin: 20px 5px 40px 5px;
}
form.paypal {
    margin:10px 0 15px;
}
/*card */
.card {
    border:0px !important;
    background-color:inherit !important;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .95rem;
    width:100%;
}
.card-header {
    background-color: #326273  !important;
    /*border-top-left-radius: 15px !important;*/
    /*border-top-right-radius: 15px !important;*/
    padding: .75em 1.25em;
    margin-bottom: 0;
}
.card-body {
    /*border-bottom-left-radius: 15px !important;*/
    /*border-bottom-right-radius: 15px !important;*/
    flex: 1 1 auto;
    padding: 1.25rem;
    /*background-color: #EEEEEE !important;*/
}
.card .donate {
    padding:1.25em .5em !important;
    width:95%;
    align-items:center;
}

/*Notepad Donations */
.notepad, .notepad:before, .notepad:after {
    background-color: white;
    background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#e8e8e8 1px, transparent 1px)!important;
    background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#e8e8e8 1px, transparent 1px) !important;
    background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e8 1px, transparent 1px)!important;
    background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px, transparent 1px) !important;
    background-size: 1px 1px, 1px 1px, 23px 23px;
    background-repeat: repeat-y, repeat-y, repeat;
    background-position: 22px 0, 24px 0, 0 50px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
}
.notepad {
    position: relative;
    margin: 30px auto;
    padding: 0 23px 14px 35px;
    line-height: 23px;
    color: #666;
    width:100%;
}
.notepad p, .notepad blockquote {
    margin-bottom: 23px;
}
.notepad :last-child {
    margin-bottom: 0;
}
.notepad:before, .notepad:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 3px;
    right: 3px;
    margin-top: -2px;
    height: 4px;
    background-size: 1px 1px, 1px 1px, 0 0;
}
.notepad:before {
    z-index: -2;
    left: 6px;
    right: 6px;
    height: 6px;
    background-color: #eee;
}
.notepad-heading {
    position: relative;
    margin: 0 -23px 9px -35px;
    height: inherit;
    background: #326273;
    border-radius: 2px 2px 0 0;
    /*background-image: -webkit-linear-gradient(top, #226797, #0c3452);*/
    /*background-image: -moz-linear-gradient(top, #226797, #0c3452);*/
    /*background-image: -o-linear-gradient(top, #226797, #0c3452);*/
    /*background-image: linear-gradient(to bottom, #226797, #0c3452);*/
    /*-webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;*/
    /*box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;*/
}
.notepad-heading > h4 {
    color: white;
    text-align: center;
    font-size:22px;
    padding:7px 5px;
    overflow: auto;

}
.notepad-heading:before, .notepad-heading:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 1px;
    right: 1px;
    height: 0;
    /*border-color: rgba(255, 255, 255, 0.35);*/
}
.notepad-heading:after {
    bottom: 3px;
    border-color: #071c2c;
    border-color: rgba(0, 0, 0, 0.5);
}

#needed ul {
    list-style: circle;
    text-align: left !important;
    line-height:1.2em !important;
}

/*   Blockquotes   */
blockquote{
    display:block;
    background: #fff;
    padding: 15px 20px 15px 45px;
    margin: 0 0 50px 0 !important;
    position: relative;

    /*Font*/
    font-family: Georgia, serif;
    font-size: 19px;
    line-height: 1.2;
    color: #666;
    text-align: justify;

    /*Borders - (Optional)*/
    border-left: 15px solid #326273;
    border-right: 2px solid #326273;

    /*Box Shadow - (Optional)*/
    -moz-box-shadow: 2px 2px 15px #ccc;
    -webkit-box-shadow: 2px 2px 15px #ccc;
    box-shadow: 2px 2px 15px #ccc;

}
blockquote::before{
    content: "\201C"; /*Unicode for Left Double Quote*/

    /*Font*/
    font-family: Georgia, serif;
    font-size: 60px;
    font-weight: bold;
    color: #999;

    /*Positioning*/
    position: absolute;
    left: 10px;
    top:5px;
}
blockquote::after{
    /*Reset to make sure*/
    content: "";
}

/*Footer */
.footer {
    background-color: #326273;
    opacity:.9;
}
.footer > p {
    color:white !important;
}

.footerinfo {
    display:flex;
    justify-content:space-evenly    ;
    align-items:center;
}

.end {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content:space-around;
    margin-bottom:0px;
    align-items:center;

}
.end > p {
    color:white;font-size:14px;
    margin-bottom:0px;

}
.end a {
    color:white; font-size:14px;
    margin-right:3px;
}
.end a:hover {
    text-decoration:underline;
    color:white;
}


/* Involved Style Sheet */

#involved > div {
    margin-bottom:20px;
}
#involved {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    padding:10px;
}

#involved h4 {

    padding:5px !important;
}
#involved i.fa {
    color: #326273;
    font-size: 45px;
    padding:0 10px !important;
}
a#contactlink {
    color: #326273;
    font-weight: 900;
}
a#contactlink:hover {
    color: #F44336;
    font-weight: 900;
}

#help {
    padding:0px;
    margin: 85px 0px 25px 0;
    border-bottom: 4px solid #326273;
}
/* Contact style sheet */
#contact {
    margin-top:50px;
}

#map {
    height: 300px;
    width: 90%;

    margin: 10px 5% 30px 5%;
}

#contactcontainer {
    background-color: #326273;
    padding: 10px 12%;
}
label {
    color:white;
    font-family: 'Raleway', sans-serif;
    font-size:1.2em;
}




/* Services style sheet */
#services {
    margin: 50px 0 30px 0;
}
#services ul li {
    font-family: 'Raleway', sans-serif;
    color:#6B7D7E;
    font-size:1em;

}
#servicemain {
    padding:0px 15px;
}
.around2 {
    top:-50px;
    width:50%;
    left:25%;
    position:absolute;
    line-height:50px;
    background-color:white;
    text-align: center;


}
h3#servicetext {
    color:#326273 !important;
    border:2px solid #326273;
    border-radius:2px;
    margin:0;
    padding:15px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
.grid h5  {
    margin-bottom:15px !important;
    margin-top:5px;
    font-size:1.375em !important;
}

#main-text2 {
    background-color:white;

    position:relative;
    /*   border:4px dotted #326273; */
    border-radius:5px;

}
.outer2 {

    padding:15px;
    background-color:#326273;
    margin:75px 0;
}


.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }
.item6 { grid-area: item6; }
.item7 { grid-area: item7; }


.grid {
    display: grid;
    grid-template-areas:
            'item1 item2 item3'
            'item4 item4 item4'
            'item5 item6 item7';
    grid-gap: 25px;
    background-color: #326273;
    justify-content: space-evenly;
    align-content: start;
    margin: 0px;
    padding: 60px 10px 20px;
}

.grid > div {
    padding: 10px 15px;
    border:1px solid black;
    background-color:white;

}
.grid > div > h5  {
    text-align:center;
}

.item4 > p {
    text-align:left !important;
}

#servicesmain {
    padding-bottom:10px;
}
p#introp {
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    font-size: 1.7em;
    margin: 30px;
    padding: 30px;
}
i.fa {
    color:#326273;
}

i.fa.fa-facebook-square
i.fa.fa-facebook-square:hover {
    color:#F44336;
}
/* Contact */
#contactbegin {
    margin: 0px 15px 15px !important;
}
.left > div > i.fa {
    color: #326273;
    padding:3px 5px;
    line-height: 30px;
}
.left > div > p {
    margin-bottom:.3em !important;
}
p.hours {font-size:1.2em !important; font-weight:600;margin:0px}
.footer h3 {
    font-size:1.5em !important;
}

/*Responseness */
@media only screen and (max-width: 650px) {
    .grid {grid-template-areas:
            'item1 item2'
            'item4 item4'
            'item3 item5'
            'item6 item7';
    }
}

/*       Phones            */
/*!*small *!*/
/*@media only screen and (max-width: 320px) {*/
    /*h1.title {*/
        /*text-align:left;*/
        /*line-height: 1em !important;*/
        /*font-size: 1em !important;*/
        /*line-height:1em }*/
    /*.media-group {padding-left:0px !important;}*/
/*}*/
/*!*medium phone *!*/
/*@media only screen*/
/*and (min-width : 375px)*/
/*and (max-width : 580px) {*/

/*}*/
@media only screen
and (max-width : 580px) {
    h1.title { text-align:left; font-size: 1.75em !important; line-height:1.1em}
    /*{ margin: 10px 0px 5px !important;}*/
    i.fa.fa-facebook-square {display:none;}
    .nav1 {font-size:16px !important;}
    img.image {width:45%}
    .left > h2 {text-align:center !important;}
    .right > h2 {text-align:center !important;}
    .right p:last-child {margin-top:-1em !important;}
    .left {margin-bottom:1.5em !important;}
    #contactcontainer.container-fluid {width:90%;}
    #involved i.fa.fa-calender {margin-bottom:2.5em !important;}
    #involved i.fa.fa-users, #involved i.fa.fa-shower, #involved i.fa.fa-gavel, #involved i.fa.fa-cc-paypal {margin-bottom:1.5em;}
    #main-text {padding:60px 15px 10px}
    .navigation li a {padding: 1px 5px;
        margin: 1px;
        font-size: .8em;}


}
/*      Small Screens           */
@media only screen and (max-width: 767px) {
    p { font-size:1em; !important; }
    h1.title { font-size: 2em; line-height:1.25em; text-align:left;}
    h2 { font-size: 1.625em }
    h3 { font-size: 1.375em}
    h4 { font-size: 1.125em}
    .nav1 {font-size:20px}
    i.fa {font-size: 24px !important;}
    /*i.fa.fa-facebook-square {margin:5px 0px !important; padding:5px !important;}*/
    .media-group {height:150px;}
    .nav1 {line-height:50px;}
    img.car{height:250px !important;}
    blockquote {font-size:1em;}
    .notepad {margin:30px 0px 50px;}
    footer i.fa {font-size:1.25em !important; padding:8px 8px;}
    i.fa.fa-home.pull-left.foot{margin-bottom:5px !important;}
    p#introp {font-size: 1.3em }
    #servicesmain > p {line-height: 1.75em;}
    #services h4 {font-size: 1.125em !important}
    #involved > h4 {font-size: 1.375em !important;}
    div.container.involved {max-width:90%;}
    #involved h4 {font-size:1.125em}
    #involved i.fa {margin-top:10px; !important}
    #help h2 {font-size:1.725em !important;}
    #involved h3 {font-size:1.55em !important;}
    #contact i.fa {font-size:1.1em !important;}
    p#hours1 {margin: -1.1em 0 .3em 0}
    p#hours2 {margin-bottom: 0px !important;padding-bottom: 0px;}
    div.socialtop2  {
        position: absolute !important;
        top: 10px !important;
        z-index: 1000 !important;
        right: 25px !important;
        margin-top: 20px !important;
        width:50px !important;
        height:50px !important;

    }







}

@media only screen
and (min-width : 768px) {
    /* Styles */
    p { font-size:1em; }
    h1.tite { font-size: 2em !important; line-height:1.25em}
    h2 { font-size: 1.625em}
    h3 { font-size: 1.375em}
    h4 { font-size: 1.125em}
    i.fa.fa-facebook-square, i.fa.fa-share {font-size: 24px !important;color: #326273; padding: 0px 30px;}
    #contactbegin > h2 {text-align:left !important;}
    .socialtop2  {
        position: absolute !important;
        top: 10px !important;
        z-index: 1000 !important;
        right: 25px !important;
        margin-top: 20px !important;
        width:50px !important;
        height:50px !important;

    }
}


/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1025px) {

    /* Styles */
    .footer h3 {
        margin-right:55px !important;
    }

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .nav1 {
        color:yellow;
    }
}