/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
 
 img {max-width: 100%;}
 
 .mHide {display: none;}
 
 a, a:visited {color: #9f0e37; text-decoration: none;}
 a:hover, a:active {text-decoration: underline}

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial; background: #fe4a7d
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ===================
    ALL: Pink Theme
   =================== */
   
   h1 {color: #fff; font-size: 3.5em;font-weight: 700;text-transform: uppercase; line-height: 1; margin: 0; padding: 0; font-family: 'Oswald', sans-serif;}
   h2 {color: #fff; font-size: 2em; }
   h3 {color: #000; font-size: 1.5em; margin: 7px 0 0 0; padding: 0;}
   h3 span {white-space: nowrap}
   
.divPink {background: #ffa7c0; height: 70px; width: 100%;}
.hdrTop {background: #d31b4f; height: 36px; line-height: 36px; color: #fff; font-size: .75em; text-align: right; font-family: 'Oswald', sans-serif;}

.header-container {background: #fe4a7d; font-family: 'Oswald', sans-serif;    position:fixed;top:0;left:0; width: 100%;
  transition: height 100ms, background 500ms, font 500ms; z-index: 100;
}

.header-container h1.title-sm {display: none;}
.header-container.tiny {height:100px;background: #f34a7d;font-size: .7em; border-bottom: 5px solid #fff;
-webkit-box-shadow: 0px 3px 5px 0px rgba(204,204,204,1);
-moz-box-shadow: 0px 3px 5px 0px rgba(204,204,204,1);
box-shadow: 0px 3px 5px 0px rgba(204,204,204,1);}
.header-container.tiny .hdrTop {font-size: 1em;}
.header-container.tiny h1.title {display: none;}
.header-container.tiny h1.title-sm {display: block; color: #fff; font-size: 2.3em; margin: 6px 0 0}
.header-container.tiny .hdrLogos {display: none;}
.header-container.tiny .eventDate {margin: 0; float: left;}
.header-container.tiny .eventDate span {display: inline;}
.header-container.tiny nav {margin-top: 0;}
.header-container.tiny nav a {padding-top: 0;}
.header-container.tiny nav a:hover {background: none;}

/*a.anchor {padding-top: 100px; margin-top: 100px;}*/


h1.title {color: white;font-size: 3.5em;font-weight: 700;text-transform: uppercase;line-height: 1;margin: 15px 0;float: left;}
.hdrSmall h1.title {font-size: 1em; float: left;}

.hdrDetails {float: left;}
.eventDate {color: #fff; font-weight: 100; text-transform: uppercase; font-size: 1.5em; letter-spacing: 1px;margin: 63px 0 0 -10px}
.eventDate span {font-weight: 700; display: block;}
.hdrLogos {float: right; text-align: right;}
.hdrLogos a {display: block; margin: 10px 0 20px;}

.main-container {padding-top: 234px;}

article {padding: 30px 0; font-family: Arial, sans-serif;}
article.theEvent {background: #d31b4f; color: #fff; }
.theEvent .mainEventTitle {float: left; width: 50%;}
.theEvent .mainEventTitle p {font-size: 24px; font-weight: bold; margin: 10px 0 0 0;}
.mainEventTime {float: right; width: 10%; font-size: 36px; font-family: 'Oswald',sans-serif; font-weight: 700; text-align: center; line-height: 35px; }
.mainEventTime span {display: block; line-height: 12px;}
.mainEventDate {float: right; width: 30%; font-family: 'Oswald',sans-serif; font-size: 28px; font-weight: 700; line-height: 35px; text-transform: uppercase; margin: 5px 0 0 0; letter-spacing: 1px;}
.mainEventDate span {font-size: 24px; font-weight: 100;}

.eventLinks {text-align: center;}
.eventLink {float: left; width: 30%; padding: 0 13px; cursor: pointer;}
.eventLink .ribbon {background: url(../img/ribbon.png) no-repeat; background-size: 100%; width: 273px; height: 85px; font-weight: 700; font-family: 'Oswald', sans-serif; font-size: 36px; text-transform: uppercase; position: relative; margin: -30px auto 0; text-align: center; padding: 13px 0 0 0; line-height: .9}
.eventLink .ribbon span {font-weight: 100; font-size: 28px; display: block;}



article.featuredAdoptables {background: #fff; color: #000;}
article.featuredAdoptables h1 {color: #d31b4f}
.adoptableList {margin: 0 0 0; position: relative;}
.hovernote {position: absolute; z-index: 50; right: 0; top: -5px}
.adoptable {width: 30%; padding: 0 15px; text-align: center; float: left; margin: 30px 0 30px 0; }
.adoptableImg {border: 3px solid #972747; margin: 0 auto 0; width: 271px; height: 277px;position: relative; z-index: 30; cursor:pointer;}
.adoptable .name {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 36px; font-weight: 700;}
.adoptableHover, .adoptableHoverMobile {display: none; position: absolute; z-index: 50; top: 0; text-align: center; height: 267px; padding: 10px 5px 0;
 /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.75);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#00ffffff);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#00ffffff)";
}
.adoptableHover div {}
.adoptableHover div span, .notesMobile span {font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1em; text-transform: uppercase}

.adoptableList .photodetails {margin: 0 auto 7px; width: 100%; font-size: 11px; text-align: center;}
.adoptablesLinks {font-size: 13px; line-height: 1.5; margin: 10px 0 0 0;}

.notesMobileLink {display: none;color: #d31b4f; font-weight: bold; font-size: 15px; margin: 6px 0 0 0; cursor: pointer;}
.adoptableHoverMobile {display: none; font-size: 1em}
.adoptableHoverMobile span {font-weight: bold;}
.notesMobileClose {color: #d31b4f; font-weight: bold; font-size: 15px; margin: 6px 0 0 0; cursor: pointer; background: #ffe2ea;}

.adopted {margin: -46px 0 0 0; text-align: center; font-size: 32px; color: #fff; background: #d31b4f; display: block; width: 100%; position: relative; font-family: 'Oswald'; padding: 10px 0; text-transform: uppercase}


article.adoptionDetails {background: #d31b4f;}
.adoptionDetails .dogspuppies {float: left;width: 392px; background: url(../img/dogspuppies.jpg) no-repeat top center #fff; padding: 454px 0 0 0; margin: 20px 0px 0 3%; height: 200px}
.adoptionDetails .catskittens {float: right;width: 393px; background: url(../img/catskittens.jpg) no-repeat top center #fff; padding: 454px 0 0 0; margin: 20px 3% 0 0px; height: 200px}
.adoptionDetails .price {background: url(../img/priceBG.jpg) no-repeat; width: 110px; height: 110px; font-family: 'Oswald',sans-serif; font-weight: 700; color: #fff; font-size: 3.7em; padding: 40px 0 0 8px; float: left; margin: 0 0 0 7px;}
.adoptionDetails .price sup {font-size: .6em;}
.adoptionDetails p {font-size: 1.1em;}

.divHeart {margin: 0 auto; width: 116px;}
.divHeart img {margin: -35px 0 0 0;}

.readyToAdopt {background: #b81845; text-align: center;}
.readyToAdopt h1 {margin: 30px 0;}
.readyToAdopt p {color: #fff; font-size: 1.2em; line-height: 1.7em;}
.readyToAdopt a {color: #fff; font-size: 1.4em; text-decoration: underline}

article.aboutUs {color: #000; background: #fff;}
article.aboutUs h1 {color: #b81845; font-size: 3em;}

.mapembed {float: right; width:400px; margin: 20px 0 0 10px}

footer {background: #d31b4f; padding: 20px 0; color: #fff;}
footer .copyright {font-family: 'Oswald', sans-serif; float: right;}


nav {white-space: nowrap}
nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: white;
    font-size: 1.3em
}

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}


 nav {margin: 20px 0 0 30px; display: block;}

nav a {
    float: left;
    margin: 0 1.7%;
    padding: 0 10%;
    margin-bottom: 0;
    font-family: "Oswald", sans-serif;
    font-weight: 100;
    font-size: 1.4m;
}

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

.mNav {display: none;}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 480px) {
	nav ul li {display: inline;float: left;}
}

@media only screen and (max-width: 670px) {
	.adoptable {width: 100%; padding: 0;}
	.hovernote, .adoptableHover  {display: none !important; visibility: hidden}
	.adoptableHoverMobile {font-size: 1.4em;}
}
@media only screen and (min-width: 670px) and (max-width: 750px) {
	.adoptable {width: 45%; padding: 0 10px;}
	.hovernote, .adoptableHover {display: none !important; visibility: hidden}
	.adoptableHoverMobile {font-size: 1.4em;}
}

@media only screen and (min-width: 750px) and (max-width: 1000px) {
	.adoptable {width: 29%; padding: 0 10px;}
	.adoptableImg {width: 100%; height: auto;}
	.hovernote, .adoptableHover {display: none !important; visibility: hidden }
	.adoptableHoverMobile {font-size: 1em; line-height: 1.6em}
	
}
@media only screen and (min-width: 800px) and (max-width: 1000px) {
	.adoptableHoverMobile {font-size: .8em; line-height: 1.6em}
	
}
@media only screen and (max-width: 1000px) {
	.notesMobileLink {display: block;}
}

@media only screen and (max-width: 670px) {
	.mHide {display: block;}
	
	.main-container {padding-top: 160px;}
	
	div.main {font-size: .7em;}
	.theEvent .mainEventTitle {width: 100%;}
	.mainEventTime {width: 100%; text-align: left; font-size: 20px;}
	.mainEventTime span {display: inline;}
	.mainEventDate {width: 100% !important;}
	
	.eventLink {width: 100%; padding: 0;}
	.eventLink img {display: none;} 
	.eventLink .ribbon {margin: 10px auto;}
	
	.divPink {height: 20px;}
	

	
	.hovernote {display: none;}
	
	.adoptionDetails .dogspuppies {width: auto;padding: 0; margin: 0;background: none; height: auto; color: #fff;}
	.adoptionDetails .dogspuppies h2 {color: #fff;}
	.adoptionDetails .catskittens {width: auto;padding: 0; margin: 0;background: none; height: auto; color: #fff;}
	.adoptionDetails .catskittens h2 {color: #fff;}
	.adoptionDetails .price {background: none; width: 75px; margin: 0; padding-left: 0;}
	
	.divHeart img {margin: -18px 0 0 0;}
	.mapembed {display: none;}
}

@media only screen and (min-width: 670px) and (max-width:1000px ) {
	.adoptionDetails .catskittens, 
	.adoptionDetails .dogspuppies {width: 45%; background-size: 100% auto; padding-top: 52%;}
}


@media only screen and (max-width: 800px) {
	.hdrLogos {display: none;}
	.hdrTop {line-height: 15px;}
	.hdrTop span {display: block;}
	.hdrLogos {display: none;}
	header h1.title {font-size: 2.5em; width: 30%}
	.hdrDetails {float: right; font-size: .8em; width: 70%}
	.hdrDetails .eventDate {margin: 20px 0 0 0; text-align: right; letter-spacing: 0px;}
	
	.hdrDetails nav {display: none; margin-top: 46px;}
	.hdrDetails nav ul {float: right;}
	.hdrDetails nav ul li {text-align: right; margin: 8px 0px; display: block; float: none;}
	.hdrDetails nav ul li a {float: none; padding: 0; margin: 0; text-align: right; font-size: 2em}
	.mNav {float: right;display: block; text-align: right; background: url(../img/mNav.jpg) no-repeat; width: 39px; height: 29px; margin: 10px 0 0 0;}
	
	.header-container.tiny .hdrDetails {float: left; width: 100%}
	.header-container.tiny .hdrDetails .mNav {margin: 0;}
	.header-container.tiny .hdrDetails nav {margin: 35px 0 0 0; background: #fe4a7d; font-size: 1.5em; border:2px solid #fff; padding-right: 10px;}
	
	.main-container {padding-top: 186px;}
	
	div.main {font-size: .7em;}
	div.main p, div.main ul li {font-size: 1.3em;}
	
	.theEvent .mainEventTitle p {font-size: 16px;}
	.mainEventDate {width: 35%; font-size: 20px; letter-spacing: 0px}
	.mainEventDate span {font-size: 18px;}
	.mainEventTime {font-size: 30px;}
	

}
@media only screen and (min-width: 800px) {
    .title {float: left;}
    nav {float: left; }  
    nav a {padding-top: 20px;}
    nav a:hover{background: url(../img/navHover.png) no-repeat center top; text-decoration: none;}

}
@media only screen and (min-width: 671px) and (max-width: 900px) {
	.eventLink {padding: 0 10px;}
	.eventLink .ribbon {width: 100%; font-size: 1.5em}
	.eventLink .ribbon span {font-size: 1em;}
}
@media only screen and (max-width: 984px) {
	h1.title {font-size: 2.8em}
	.eventDate {margin: 33px 0 0 0; font-size: 1.3em; letter-spacing: 0px}
	nav {margin-left: 10px; font-size: 1em}
	.main-container {padding-top: 199px}
	
	nav a {font-size: 1.1em;}
	
	.mainEventDate {width: 36%;}
	
}
@media only screen and (min-width: 1140px) {
    .wrapper {width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}