/* Hello KCC caretaker. This site is designed Mobile First. So all of the following code applies to mobiles and higher. 
There are sections labled with @media tags that designate code that shifts based on the screen width of the device viewing the site, desktops, tablets, etc.
If you have ANY questions or need assistance, email eddiedover@gmail.com.
*/


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 /* START */
 
html {
    background-color: #eee;
}

body {
    font-family: 'Open Sans', sans-serif;
}

p {
    margin-bottom: 14px;
}

h1, h2, h3, h4, h5, h6, .textheader, .textheader_noline {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}
h1 {
    font-size: 200%;
}
h2 {
    font-size: 150%;
}

.textheader_noline {
    margin-bottom:inherit;
}

h2:after, h3:after, h4:after, h5:after, h6:after, .textheader:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 10%;
    padding-top: 5px;
    border-bottom: 3px solid;
}


strong {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}
a {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: #839D0C;
}
a:hover {
    color: #000;
}

.menutoggle {
    content:' ';
}

.frontblockimage {
    display:none;
}

.frontblock, .adopt_module, .success_module, .person_container {
    background: #ddf198;
    color: #466417;
}

.frontblock:nth-child(odd), .adopt_module:nth-child(odd), .success_text, .person_container:nth-child(even) {
    background: #a9e6f2;
    color: #375878;
}
.frontblock:nth-child(odd) a {
    color: #2881b5;
}
.frontblock:nth-child(odd) a:hover {
    color: #000;
}

.frontdata {
    padding: 30px;
}

#content {
    display: flex;
    flex-flow: column nowrap;
    height:100%;
}

#headerwrapper {
    display:flex;
    flex-flow: row wrap;
    text-align:center;
    padding-left:15px;
    padding-right:15px;
}

#header div {
    /*padding-bottom:5px;    */
}

#pagecontent {
    padding: 20px;
}

#logo {
    width:50px;
    height:50px;
    
    flex-grow:0;
    flex-shrink:0;
}

#header_donate {
    text-align: left;
    margin-left: 10px;
    padding: 5px;
    
    flex-grow: 1;
}

.sponsormodule_lower {
    display:block;
}

.sponsormodule_upper {
    display:none;
}

#socialmedia {
    display:flex;
    flex-flow:row wrap;
    flex-shrink:0;
    margin-top: 5px;
}
#socialmedia a {
    border: none;
}
.twitter, .twitter:hover {
    color: #21ABEC;
}
.facebook, .facebook:hover {
    color: #5476D6;
}
.fab {
    font-size: 150%;
    margin-right: 10px;
}
.fas {
    font-size: 100%;
    margin-right: 10px;
}
.far {
    font-size: 130%;
    margin-right: 10px;
}
#phone {
    font-size: 140%;
    font-weight: bold;
}

.navigation {
    position:absolute;
    width:100%;
    top:0;
    left:0;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

.navigation div {
    display:none;
}

.navigation button {
    position:absolute;
    top:15px;
    right:15px;
    text-indent:200%;
    overflow:hidden;
    background:rgba(255,255,255,0.8) url(https://i.imgur.com/vKRaKDX.png) center no-repeat;
    border:1px solid #ddd;
    border-radius:3px;
    background-size:80%;
    width:30px;
    height:30px;
    outline:none;
    -webkit-transition: all 400ms ease;
    transition:all 400ms ease;
}

.navigation button .expanded {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:transparent;
    border:0;
}

.navigation a {
  display:block;
  background: #eee;
  text-align: center;
  padding: 20px 0;
  text-decoration: none;
  color: #222;
  font-weight: bold;
}

.navigation a:hover {
    background:#e7e7e7;
}

.navigation a:active {
    background:#e7e7e7;
}

.navigation a:focus {
    background:#e7e7e7;
}

.module_title {
   font-size: xx-large;
   font-weight: bold;
   text-align:center;
   margin-bottom:5px;
}

.sponsors {
    display:flex;
    flex-flow: row wrap;
}

.sponsors .sponsor {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.sponsors .sponsor a img {
    max-width:100px;
    max-height:100px;
}

.sponsors .sponsor .sponsorname {
    display:none;
}

#footer {
    background:black;
    color:white;
    text-align:center;
    padding:3px;
}

#footer span {
    font-size: 90%;
}

#content {
    margin-top: 0px;
    margin-left:auto;
    margin-right:auto;
}

.textheader {
    text-align:center;
   font-size: xx-large;
   font-weight: bold;
   text-align:center;
}

.textheader_noline {
    text-align:center;
   font-size: xx-large;
   font-weight: bold;
   text-align:center;
}



.adopt_container {
    width:100%;
    display:grid;
    margin-left:auto;
    margin-right:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto;
}

.adopt_module {
    display: flex;
    flex-flow:column wrap;
    max-width:300px;
    margin: 10px;
    margin-left:auto;
    margin-right:auto;
}

.adopt_image_holder {
    display:flex;
    flex-flow:row nowrap;
    width:300px;
    height:300px;
    justify-content:center;
    align-items:center;
}
.adopt_image_holder a {
    width:300px;
    height:300px;
}

.adopt_image {
    width:300px;
    height:300px;
    background-image: url(images/cats/ingrid1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.adopt_content {
    width:100%;
}

.adopt_details {
    display:flex;
    flex-flow:row nowrap;
    text-align: center;
    margin: 5px;
}

.adopt_name {
    text-align:center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    padding: 4px 0;
    font-size: 120%;
}

.adopt_gender {
    width:50%;
}

.gender_female {
    background-color:pink;
}
.gender_female::before {
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content:'\f221';
}

.gender_male {
    background-color:lightblue;
}

.gender_male::before {
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content:'\f222';
}

.adopt_age {
    width:50%;
    background: #eee;
}

.adopt_description {
    padding: 15px;
    line-height: 1.7;
}

.success_modules {
    width:100%;
}

.success_module {
    display:grid;
    width:100%;
    grid-template-columns:50% 50%;
    grid-template-rows:auto;
    grid-template-areas:
    "sname sdate"
    "simage simage"
    "stext stext";
    padding-top:5px;
    padding-bottom:5px;
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #CDEC6D;
}

.success_module .noimage{
    grid-template-areas:
    "sname sdate"
    "stext stext";
}

.success_module::after {
    border-bottom:5px solid #000000;
}

.success_image {
    grid-area:simage;
    text-align:center;
}

.success_image img {
    max-width: 100%;
}

.success_name {
    grid-area:sname;
    text-align:center;
}

.success_date {
    grid-area:sdate;
    text-align:center;
}

.success_text {
    grid-area:stext;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #A5E5F1;
    padding: 20px;
}

.success_text::before {
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content:'\f10d';
    padding-right: 5px;
}

.success_text::after {
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content:'\f10e';
    padding-left: 5px;
}

.person_container {
    padding: 0 20px 20px 20px;
}
.person_info {
    padding: 10px;
}

.howto_header {
    font-size: x-large;
    font-weight: bold;
    text-align: center;
}

.howto_title, .procedures_title {
    font-size: x-large;
    text-align: center;
    font-weight: bold;
}

.contactus_table {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows:auto;
    grid-template-areas:
    "cutitle1"
    "cuname1"
    "cutitle2"
    "cuname2"
    "cutitle3"
    "cuname3"
    "cutitle4"
    "cuname4";
}
.contactus_table div {
    padding: 10px;
}

.cutitle1 {
    grid-area:cutitle1;
}

.cutitle2 {
    grid-area:cutitle2;
}

.cutitle3 {
    grid-area:cutitle3;
}

.cutitle4 {
    grid-area:cutitle4;
}

.cuname1 {
    grid-area:cuname1;
}

.cuname2 {
    grid-area:cuname2;
}

.cuname3 {
    grid-area:cuname3;
}

.cuname4 {
    grid-area:cuname4;
}

.cutitle1,.cuname1,.cutitle3,.cuname3 {
    background-color:#f2f2f2;
}

.cutitle2,.cuname2,.cutitle4,.cuname4 {
    background-color:#ffffff;
}

.procedures_td:nth-of-type(even)
{
    justify-content:center;
}

.procedures_table {
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-flow:column nowrap;
    font-size:.8rem;
    line-height:1.5;
    border-bottom:1px solid #d0d0d0;
    flex: 1 1 auto;
}

.procedures_th {
    display:none;
    font-weight:700;
    background-color:#f2f2f2;
}

.procedures_th > .procedures_td {
    white-space: normal;
    justify-content:center;
}

.procedures_tr {
    width:100%;
    display:flex;
    flex-flow:row nowrap;
}

.procedures_tr:nth-of-type(even) {
    background-color:#f2f2f2;
}

.procedures_tr:nth-of-type(odd) {
    background-color:#ffffff;
}

.procedures_td {
    display:flex;
    flex-flow:row nowrap;
    flex-grow:1;
    flex-basis:0;
    padding:1em;
    word-break:break-word;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0px;
    white-space: nowrap;
    border-bottom:1px solid #d0d0d0;
}

.procedures_td:nth-of-type(even)
{
    justify-content:center;
}

.person_container {
    display:flex;
    flex-flow:column nowrap;
}

.person_image {
    align-self: center;
}
.person_info {

}

#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #839D0C;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#scrollToTopBtn:hover {
  background-color: #A5E5F1;
}

/* Start Navigation */
body.index a.index, body.about_us a.about_us, body.adopting a.adopting, body.contact_us a.contact_us, body.how_to_help a.how_to_help, body.success a.success {
    background: #A5E5F1;
}
/* End Navigation */

@media all and (min-width:768px) {
    
    #headerwrapper {
        flex-flow:row wrap;
    }

    #navlist {
        flex-flow:row nowrap;
        display: flex;
        justify-content:space-evenly;
    }
    
    #headerwrapper, #pagecontent, .navigation {
        width:760px;
        margin-left:auto;
        margin-right:auto;
    }
    
    #headerwrapper {
        background: url(../images/stockvault_header.jpg) no-repeat;
        background-size: cover;
        background-position: center;
        color: #fff;
        box-sizing: border-box;
    }
    
    .adopt_container {
        /*grid-template-columns:50% 50%;*/
        grid-template-columns:1fr 1fr;
    }

    .adopt_module {
        
    }

    .adopt_module:nth-child(2n) {
        margin-right: 0;
    }

    .adopt_module:nth-child(2n-1) {
        margin-left: 0;
    }

    .contactus_table {
        grid-template-columns:1fr 1fr;
        grid-template-areas:
        "cutitle1 cuname1"
        "cutitle2 cuname2"
        "cutitle3 cuname3"
        "cutitle4 cuname4";
    }

    .success_module {
        display:grid;
        width:100%;
        grid-template-columns:33% 33% 33%;
        grid-template-rows:auto;
        grid-template-areas:
        "simage sname sdate"
        "simage stext stext";
    }

    .success_module:nth-of-type(even) {
        grid-template-areas:
            "sname sdate simage"            
            "stext stext simage";
        padding-left:10px;
    }

    .success_module.noimage {
        grid-template-areas:
        "sname ..... sdate"
        "stext stext stext";
    }

    .success_module.noimage .success_text {
        margin-left: 10px;
    }

    .success_image {
        grid-area:simage;
        text-align:center;
        align-self:center;
    }

    .success_name {
        grid-area:sname;
        text-align:center;
    }

    .success_date {
        grid-area:sdate;
        text-align:center;
    }

    .success_text {
        grid-area:stext;
    }


    .frontblock {
        display:flex;
        flex-flow:row nowrap;
    }
    
    .frontblockleft {
        order:0;
    }
    
    .frontblockright {
        order:2;
    }
    
    .frontblockimage {
        flex-grow:0;
        flex-shrink:0;
        display: block;
        min-height: 200px;
        min-width: 200px;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #eee;
        width: 50%;
    }
    
    .frontdata {
        flex-grow:1;
        order:1;
        line-height: 1.7;
    }
    
    .sponsormodule_upper {
        display:block;
    }
    
    .sponsormodule_lower {
        display:none;
    }
    
    #logo {
        width:183px;
        height:204px;
    }
    
    .navigation { 
        background-color:#d0df00;
    }
    
    #header_donate {
        padding: 20px;
        flex-grow:1;
    }
    
    .navigation {
        position:relative;
    }
    
    #pagecontent {
        flex-grow:1;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .navigation a {
        background:#d0df00;
        width: 16.6%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        align-self: center;
    }
    
    .navigation a:last-child {
        border-right:none;
    }
    
    .navigation div {
        display:inherit;
    }
    
    .navigation button {
        display:none;
    }
    
    .navigation div {
        display:block;
    }
    
    .navigation a:hover {
        background:#CDEC6D;
    }
    
    .navigation a:active {
        background:#AAF1A5;
    }
    
    .navigation a:focus {
        background:#A5E5F1;
    }


    .person_container {
        display:flex;
        flex-flow:row nowrap;
        margin-bottom:30px;
    }

    .person_image {
        align-self: center;
    }

    .angela .person_image {
        order:0;
        padding-right: 10px;
    }

    .chris .person_image {
        order:2;
        padding-left: 10px;
    }

    .person_info {
        order:1;
    }
    
        .wanted, .ebay {
    width: 50%;
    box-sizing: border-box;
}
    .wanted {
        float: left;
        padding-right: 15px;
    }
    .ebay {
        float: right;
        padding-left: 15px;
    }
    .fundraising {
        clear: both;
    }


}

@media all and (min-width:992) {
    #headerwrapper,#pagecontent, .navigation {
        width:970px;
    }
    
    .navigation {
        overflow: auto;
    }
    
    #header_donate {
        padding: 50px;
        flex-grow:1;
    }
}

@media all and (min-width:1200px) {
    #headerwrapper,#pagecontent, .navigation, .sponsormodule {
        width: 1170px;
        box-sizing: border-box;
    }
    
    .navigation {
        overflow: auto;
    }
    
    #headerwrapper {
        background: url(../images/stockvault_header.jpg) no-repeat;
        background-size: cover;
        background-position: center;
        height: 500px;
        color: #fff;
    }
    
    #header_donate {
        padding: 50px;
        flex-grow:1;
    }
    
    .frontblockimage {
        width: 50%;
        min-height: 470px; /* Firefox fix */
        background-size: cover;
        background-position: center;
    }
    
    .frontdata {
        padding: 40px;
    }

    .adopt_container {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .adopt_module:nth-child(2n) {
        margin-right: inherit;
    }

    .adopt_module:nth-child(2n-1) {
        margin-left: inherit;
    }

    /* first column */
    .adopt_module:nth-child(3n-2){
        margin-left: 0;
    }
     
    /* middle column */
    .adopt_module:nth-child(3n+2) {
        /*padding:5px*/
    }
     
    /* 3rd column */
    .adopt_module:nth-child(3n+3){
        margin-right: 0;
    }
    
    .sponsormodule {
        margin: 0 auto;
    }
}