* { box-sizing:border-box; padding:0; margin:0; }

html,body { margin-top:0px; font-family:verdana,helvetica,sans-serif; color:#333333; font-size:16px; letter-spacing:0.4px; }

.blockContainer { display:block; clear:both; width:100%; }
.paddedContainer { padding:0px 3% 0px 3%; }
.clear { clear:both; }
.rule { display:block; clear:both; border-bottom:1px solid #cccccc; width:100%; padding-top:100px; margin:0 0 100px 0; }
.noMargin { margin-bottom:0; }










/* header stuff */

#supportBanner { background-color:#ff9933; text-align:center; font-size:23px; padding:20px 3% 20px 3%; line-height:30px; min-height:1px; }
#supportBanner span { font-size:28px; color:#000000; }
#supportBanner a { cursor:pointer; transition: .3s color; text-decoration:none; }
#supportBanner a:link { color:#000000; } #supportBanner a:active { color:#000000; } #supportBanner a:visited { color:#000000; } #supportBanner a:hover { color:#666666; }

#header { height:749px; background-image:url('/images/mainImage.jpg'); background-repeat:no-repeat; background-size:cover; background-position:right; }
#headerInner { display:flex; flex-direction:column; align-items:center; max-width:849px; }
.mainLogo { margin-top:100px; }

.altHeader { height:435px; background-repeat:no-repeat; background-size:cover; background-position:right; }
#one { background-image:url(/images/altHeader1.jpg); }
#two { background-image:url(/images/altHeader2.jpg); }
#three { background-image:url(/images/altHeader3.jpg); }
#four { background-image:url(/images/altHeader4.jpg); }
#five { background-image:url(/images/altHeader5.jpg); }
#altHeaderInner { display:flex; flex-direction:column; align-items:center; max-width:849px; }
.altLogo { margin-top:50px; }

#tagLine { float:left; background-color:#333333; padding:20px 20px 20px 20px; border-radius:10px; font-size:24px; color:#ffffff; }
#emergencyContact { clear:both; float:left; background-color:#ff9933; padding:20px 20px 20px 20px; border-radius:10px; font-size:50px; margin-top:10px; vertical-align:middle; text-align:center; color:#333333; }
#emergencyContact span { font-size:24px; color:#ffffff; border-top:1px solid #ffffff; line-height:30px; }
#emergencyContactMobile { display:none; background-color:#ff9933; padding:20px 3% 20px 3%; font-size:40px; vertical-align:middle; text-align:center; color:#333333; }
#emergencyContactMobile span { font-size:20px; color:#ffffff; border-top:1px solid #ffffff; line-height:30px; }

/* end header stuff */










/* navbar */

#navbar { position:sticky; position:-webkit-sticky; top:0; padding:20px 3% 20px 3%; background-color:#333333; border-top:3px solid #ff9933; border-bottom:3px solid #ff9933; font-size:21px; text-align:center; line-height:37px; }
#navbar a { color:#ffffff; cursor:pointer; margin-right:25px; transition: .3s color; }
#navbar a span { color:#ff9933; }
#navbar a:link { color:#ffffff; cursor:pointer; text-decoration:none; }
#navbar a:active { color:#ffffff; cursor:pointer; text-decoration:none; }
#navbar a:visited { color:#ffffff; cursor:pointer; text-decoration:none; }
#navbar a:hover { color:#ff9933; cursor:pointer; text-decoration:none; }
#navbar .last { margin-right:0; }




#navbarMobile { font-size:21px; text-align:center; line-height:37px; padding:20px 3% 20px 3%; }
#navbarMobile { color:#ffffff; cursor:pointer; transition: .3s color; }
#navbarMobile span { color:#ff9933; }
#navbarMobile:link { color:#ffffff; cursor:pointer; text-decoration:none; }
#navbarMobile:active { color:#ffffff; cursor:pointer; text-decoration:none; }
#navbarMobile:visited { color:#ffffff; cursor:pointer; text-decoration:none; }
#navbarMobile:hover { color:#ff9933; cursor:pointer; text-decoration:none; }



#navContainerMobile { display:none; position:fixed; bottom:0; background-color:#333333; border-top:3px solid #ff9933; width:100%; }
#navMobile { display:none; width:100%; background-color:#333333; border-top:1px solid #ffffff; }

.navbarLinkMobile { display:block; width:100%; font-size:21px; text-align:center; line-height:37px; padding:10px 3% 10px 3%; color:#ffffff; transition: .3s color; text-decoration:none; }
.navbarLinkMobile:hover { color:#ff9933; cursor:pointer; text-decoration:none; }
.navbarLinkMobile span { color:#ff9933; }

#close { width:100%; transition: .3s color; font-size:35px; text-align:center; color:#ff9933; padding:20px 3% 20px 3%; }
#close:hover { color:#ffffff; cursor:pointer; }


/* end navbar */











/* footer */

#footer { padding:30px 3% 30px 3%; color:#ff9933; background-color:#333333; border-top:3px solid #ff9933; }
#footer span { float:right; }
.footerSpacer { height:200px; }

/* end footer */


















.containerInner { float:left; padding:0 2% 0 2%; margin-bottom:50px; }
.four { width:25%; }
.three { width:33.3%; }
.two { width:50%; }
.one { width:100%; }
.first { padding-left:0; }
.last { padding-right:0; }





h1 { color:#999999; font-size:60px; letter-spacing:0.5px; font-weight:normal; margin:0; }
h1.marginTop { margin-top:80px; }
h1.marginBottom { margin-bottom:80px; }
h2 { color:#666666; font-size:25px; letter-spacing:0.5px; font-weight:normal; border-bottom:1px solid #cccccc; margin:80px 0 30px 0; line-height:35px; }
p { line-height:25px; }
h2.noMarginTop { margin-top:0; }

.facilitiesImg { float:left; border-radius:10px; width:32.5%; margin-right:1%; margin-top:50px; }
.fosteringImg { float:left; border-radius:10px; width:32.5%; margin-right:1%; margin-top:50px; }
.lastImg { margin-right:0; }
.firstImg {}

.redFoxImg { float:right; width:35%; border-radius:10px; margin:0px 0px 30px 30px; }
.mangeImg { float:right; width:35%; border-radius:10px; margin:0px 0px 30px 30px; }

ul { display:block; margin:50px 0px 0px 0px; line-height:25px; }
ul li { display:inline; float:left; margin:0px 30px 0px 0px; background-repeat:no-repeat; background-image:url(/images/tick.png); padding:10px 0px 10px 35px; font-size:18px; }







/* Forms */

.halfWidth { width:49%; }
.fullWidth { width:100%; }

.fieldContainer { float:left; margin-bottom:10px; }

.inputText { width:100%; float:left; border-radius:10px; border:1px solid #cccccc; color:#999999; font-size:15px; height:44px; padding:2px 5px 2px 5px; transition:border-color .3s; }
.inputText:hover { border-color:#333333; }

input[type=text] { font-family:verdana,helvetica,sans-serif; -webkit-appearance: none; font-size:15px; color:#333333; height:40px; width:100%; border:0; padding:0; clear:both; float:left; line-height:100%; outline:none; }

textarea { font-family:verdana,helvetica,sans-serif; font-size:15px; color:#333333; height:116px; width:100%; border:0; padding:0; clear:both; float:left; line-height:20px; resize:none; outline:none; outline-radius:6px; }

.inputTextarea { height:150px; }

.second { margin-left:2%; }

.inputText label { font-family:verdana,helvetica,sans-serif; display:none; color:#999999; font-size:12px; height:13px; float:left; line-height:0px; padding-top:7px; }

input[type=submit] { -webkit-appearance: none; }

.submit { float:left; height:60px; display:block; width:100%; cursor:pointer; font-size:22px; line-height:0px; background-color:#ff9933; border-radius:10px; color:#333333; border:1px solid #ffffff; padding-left:5px; padding-right:5px; transition: .3s background-color,border-color,color; outline:none; text-align:center; text-decoration:none; }
.submit:hover { border-color:#999999; background-color:#ffffff; color:#999999; }

.errTxt { display:none; float:left; border-radius:10px; background-color:#ff3333; color:#ffffff; padding:10px; margin-bottom:5px; width:100%; }





.contactMethod { clear:both; float:left; background-repeat:no-repeat; padding-left:100px; min-height:90px; margin-bottom:20px; }
#phone { background-image:url(/images/contactPhone.png); font-size:30px; padding-top:20px; }
#contactemail { background-image:url(/images/contactEmail.png); font-size:20px; padding-top:30px; }
#social { background-image:url(/images/contactSocial.png); font-size:16px; line-height:23px; padding-top:20px; }
#post { background-image:url(/images/contactPost.png); font-size:16px; line-height:23px; padding-top:30px; }




a.normal:link { color:#333333; cursor:pointer; text-decoration:none; transition: .3s color; }
a.normal:active { color:#333333; cursor:pointer; text-decoration:none; }
a.normal:visited { color:#333333; cursor:pointer; text-decoration:none; }
a.normal:hover { color:#ff9933; cursor:pointer; text-decoration:none; }




.helpUsContainer { float:left; padding:0 3% 0 3%; margin-bottom:100px; background-repeat:no-repeat; background-position:center top; padding-top:120px; }
#donate { background-image:url('/images/donateIcon.png'); }
#drive { background-image:url('/images/driveIcon.png'); }
#amazon { background-image:url('/images/amazonIcon.png'); }
#supplies { background-image:url('/images/suppliesIcon.png'); }
#auction { background-image:url('/images/auctionIcon.png'); }
#release { background-image:url('/images/releaseIcon.png'); }
.helpUsContainer span { clear:both; float:left; color:#ff9933; font-size:25px; width:100%; text-align:center; border-bottom:1px solid #cccccc; margin-bottom:20px; padding-bottom:20px; }
.donateBtn {margin-top:20px;padding-top:30px;}
.donateBtn:hover {cursor:pointer;}
.bottom { margin-bottom:0; }




.pastCasesContainer { display:flex; flex-direction:row; flex-wrap:wrap; clear:both; float:left; width:100%; }
.pastCase { display:-webkit-flex; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:space-between; width:24%; margin:0 0.5% 50px 0.5%; }
.pastCaseImg { border-radius:10px; clear:both; float:left; margin-bottom:10px; background-repeat:no-repeat; background-position:center; width:100%; padding-top:100%; background-size:cover; text-align:center; }
.pastCase a { line-height:20px; padding:15px; height:auto; font-size:18px; }
.pastCase h2 { width:100%; text-align:center; margin-bottom:10px; padding-bottom:20px; margin-top:0; }
.released { display:block; background-color:#333333; border-top:3px solid #ff9933; color:#ffffff; padding:15px 0 15px 0; font-size:24px; border-radius:0 0 10px 10px; }

#caseImage { float:left; height:500px; width:500px; background-size:contain; background-repeat:no-repeat; margin:0px 3% 3% 0px; border-radius:10px; }

.pageLeft { float:left; width:57%; margin:0 3% 0 0; }

.recentImgLarge { clear:both; float:right; width:100%; border-radius:10px; margin-bottom:20px; }
.recentInfo { float:left; }

.nextRescue { float:right; width:50%; }
.prevRescue { clear:both; float:left; width:50%; }

.mostRecentImg { clear:both; float:left; border-radius:10px; width:40%; }
.mostRecentRight { width:57%; margin:0 0 0 3%; float:left; }



#cubVideo { float:right; border-radius:10px; margin:0 0 3% 3%; }








/* news */

.newsArticle { clear:both; float:left; }
.newsArticle h2 { border:0; }
.newsImg { clear:both; float:left; width:30%; border-radius:10px; margin:0 3% 3% 0; }

#newsPag { clear:both; float:left; width:100%; align-self:center; display:-webkit-flex; display:-ms-flexbox; display:flex; flex-direction:row; align:center; justify-content:center; align-items:center; }
a.pagButton { float:left; display:block; font-size:22px; background-color:#ff9933; border-radius:10px; color:#333333; border:1px solid #ffffff; transition: .3s background-color,border-color,color; text-align:center; text-decoration:none; padding:10px 15px 10px 15px; margin:0 2px 0 2px; }
a.pagButton:hover { border-color:#999999; background-color:#ffffff; color:#999999; }
a.pagButtonCurrent { border-color:#999999; background-color:#ffffff; color:#999999; }








/* shop */

.itemImg { clear:both; float:left; width:40%; border-radius:10px; margin:0 3% 3% 0; }

a.storeBtn { float:left; display:block; font-size:20px; background-color:#ff9933; border-radius:10px; color:#333333; border:1px solid #ffffff; transition: .3s background-color,border-color,color; text-align:center; text-decoration:none; padding:10px 15px 10px 15px; margin:0 2px 0 2px; }
a.storeBtn:hover { border-color:#999999; background-color:#ffffff; color:#999999; }












@media only screen and (max-width: 1440px) {
/* For laptop: */



}



@media only screen and (max-width: 1100px) {
/* For inbetween: */


}



@media only screen and (max-width: 800px) {
/* For tablets: */

#header { height:550px; background-position:right bottom; }
#navbar { display:none; }
#supportBanner { font-size:21px; line-height:27px; }
#supportBanner span { font-size:26px; }
#emergencyContact { display:none; }
#emergencyContactMobile { display:block; }
#navContainerMobile { display:block; }
.mostRecentImg { width:100%; }
.mostRecentRight { width:100%; margin:30px 0 0 0; clear:both; float:left; }
.rule { margin:50px 0 50px 0; }



/* Footer */

.footerSpacer { height:50px; }
#footer { padding-bottom:140px; text-align:center; }
#footer span { clear:both; width:100%; text-align:center; padding-top:10px; }



/* About us */

.facilitiesImg { clear:both; width:100%; margin-right:0; margin-top:10px; }


/* Recent rescues */

.pastCase { width:49%; margin:0 0.5% 50px 0.5%; }
.recentImgLarge { float:left; width:100%; border-radius:10px; }
.pageLeft { clear:both; width:100%; margin:20px 0 0 0; }
.nextRescue { clear:both; float:left; width:100%; }
.prevRescue { width:100%; }


/* Contact */

.contactForm { clear:both; width:100%; }
.halfWidth { width:100%; }
.two { width:100%; }


/* Help us */

.fosteringImg { clear:both; width:100%; margin-right:0; margin-top:10px; }
.firstImg { margin-top:50px; }
#cubVideo { margin:0 0 30px 0; width:100%; }
.helpUsContainer { padding:0 3% 0 3%; margin-bottom:130px; padding-top:120px; }
.donateBtn {margin-top:20px;padding-top:30px;}
.donateBtn:hover {cursor:pointer;}
.bottom { margin-bottom:0; }


/* Information */

p { clear:both; }
.redFoxImg { width:100%;margin:0 0 30px 0; }
.mangeImg { width:100%; margin:0 0 30px 0; }



/* News */

.newsImg { width:100%; }



}



@media only screen and (max-width: 414px) {
/* For mobile phones: */

#supportBanner { font-size:18px; line-height:24px; }
#supportBanner span { font-size:23px; }
h1 { font-size:40px; }
h1.marginTop { margin-top:30px; }
h1.marginBottom { margin-bottom:30px; }
.mainLogo { width:94%; margin:30px 3% 0 3%; }
.altLogo { width:94%; margin:30px 3% 0 3%; }
#tagLine { padding:10px 15px 10px 15px; font-size:20px; }

.pastCase { width:100%; margin:0 0 50px 0; }


}