/*
Theme Name: Hermitage
Author: Jared Nichols for Vitech
Author URI: https://vitech.org/
Description: This is a custom coded website for Hermitage Cat Shelter, Arizona.
Version: 1.3 (converted to Wordpress from twentyfifteen theme, March, 2016)
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive, html5, minimal, mnml dsgn
Text Domain: hermitage
*/

/**
 * Table of Desktop Contents
 *
 * 1.0 - Reset
 * 2.0 - Headings
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Buttons
 * 6.0 - Navigations
 *   6.1 - Desktop
 *   6.2 - Mobile
 * 7.0 - Main Content
 *   7.1 - topcontent
 *   7.2 - left column
 *   7.3 - right column
 *   7.4 - volunteer content
 *   7.5 - donate
 *   7.6 - content
 *   7.7 - second page
 * 8.0 - Sidebar / Widgets
 *   7.1 - top sidebar
 *   7.2 - middle sidebar
 *   7.3 - bottom sidebar
 * 9.0 - Footer
 * 10.0 - Social Media
 *
 * Table of Mobile Contents
 *
 *    11.1 - Main Header Img
 *    11.2 - Main Content
 *    11.3 - topcontent
 *    11.4 - volunteer content
 *    11.5 - bottom content
 *    11.6 - top sidebar
 *    11.7 - footer
 */


/**
 * 1.0 - Reset
 *
 * Resetting and rebuilding styles have been helped along thanks to the fine
 * work of Eric Meyer, Nicolas Gallagher, Jonathan Neal, and Blueprint.
 */

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/* ===========================
   ======= Body style ======== 
   =========================== */
   
body {
	background:url('http://hermitagecatshelter.org/wp-content/uploads/2016/03/bg-1.png');
	color: #000305;
	text-align: left;
	height: 100%;
	}
	
.body {
	clear: both; 
	margin: 0 auto; 
	width: 95%;
	height: 100%;
	max-width:1024px;
	background:url('http://hermitagecatshelter.org/wp-content/uploads/2016/03/bg-1.png');
	font-size: 14px; /* Base font size: 14px */
	font-family: 'Open Sans', sans-serif;
	}

.wrapper {
  	min-height: 100%;
	margin-bottom: -70px;
}

.push {
  height: 60px;
margin-bottom:10px;
}
	
/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
	}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
	outline: 0;
	}

a img {
	border: 0px; 
	text-decoration: none;
	}

a:link, a:visited {
	color: #520b45;
	text-decoration: none;
	}

a:hover {
	color: #666;
	text-decoration: underline;
	}

p {
	font-size:14px;
	font-family: 'PT Sans', sans-serif;
	font-weight:400;
	}

strong, b {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	}	
ul.square {padding-bottom:20px;}
.square li {margin-left:20px; list-style-type: square;}

em {font-style: italic; font-style: oblique;}

/* ===========================
   ========= Buttons ========= 
   =========================== */

.button {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	font-size:14px;
	font-weight:400;
	text-transform:Capitalize;
	border-radius: 10px;
	display:block;
	color: #fff !important;
	text-align:center;
	text-decoration:none !important;
	}

	
.button a {
	text-decoration:none !important;
	}

.button:hover {
	}	


.button:active,  {
	background-color:#a6218e;
	-o-box-shadow: inset 0 0 10px #89b8ce;
	box-shadow: inset 0 0 10px #89b8ce;
}

.redbutton-fixed {
	width:300px;
	margin: 0px;
	display:block;
	font-weight:300;
	font-size:small;
	border: 0;
	border-radius: 0.35em;
	line-height:20px;
	color: #fff !important;
	background-color:#d35400;
	box-shadow: 0px 3px 0px 0px #e67e22;
	padding-top:15px;
	padding-bottom:15px;
	padding-right:20px;
	padding-left:20px;
	margin-bottom:20px;
	text-align:center;
	text-decoration:none !important;
	-moz-transition: background-color 0.35s ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out;
	-o-transition: background-color 0.35s ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out;
	}
	
.redbutton-fixed:hover {
	background-color: #f39c12;
	}

.fa-ban {
	color:#900;
	}

.arf_submit_btn, .btn, .btn-info, .arfstyle-button {
	color:#fff; background-color:#8e44ad !important;
	}

.alignleft {
	float:left !important;
	padding:0px 20px 10px 0;
	}

.alignright {
	float:right !important;
	padding:0px 0px 10px 20px;
	}

.rotate-left {
	padding:15px;
		transform: rotate(355deg);
	    -ms-transform: rotate(355deg); /* IE 9 */
    	-webkit-transform: rotate(355deg); /* Chrome, Safari, Opera */
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */


 .mainHeaderlogo {
	 width: 100%;
	 margin: 0;
	 padding:0;
}

.mainHeader {
	width:100%;
	margin: 0 !important;
	padding:0;
	}

.mainHeader img {
	width: 100%;
	height: auto;
	margin:10px 0 10px 0 !important;
	}

#nav
	{
	width: 100%; /* 1000 */
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-decoration:none;
	list-style-type:none;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	border-radius: 10px;
	padding-left:0;
	padding-right:0;
	}

#nav > a {display: none;}

#nav li {
	position: relative;
	text-decoration:none;
	list-style-type:none;
	}

#nav li a
	{
	color: #fff;
	display: block;
	text-decoration:none;
	}

#nav li a:active
	{
	background-color: #999;
	}

#nav span:after
	{
	width: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #000;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
	}

/* first level */

	#nav > ul
	{
	height: 2.75em; /* 60 */
	background-color: #666;
	text-align:left;
	box-shadow: 0px 2px 0px 0px #333;
	border-radius:2px;
	}
				
#nav > ul > li
	{
	width: 12.5%;
	height: 100%;
	float: left;
	}
					
#nav > ul > li > a
	{
	height: 100%;
	font-size: small; /* 24 */
	line-height: 3.25em; /* 60 (24) */
	text-align: center;
	vertical-align:middle;
	}
					
#nav > ul > li:not( :last-child ) > a
	{
	border-right: 1px solid #333;
	}
				
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
	{
	background-color: #333;
	border-radius:2px;
	}

/* second level - Dropdown Menu */

	#nav li ul
		{
		background-color: #999;
		display: none;
		position: absolute;
		top: 100%;
		margin-top:1px;
		padding:1px auto;
		z-index:1000;
		min-width:200px;
		}
					
	#nav li:hover ul
		{
		display: block;
		left: 0;
		right: 0;
		}
						
	#nav li:not( :first-child ):hover ul
		{
		left: -1px;
		}
						
	#nav li ul a
		{
		font-size: small; /* size of font in dropdown menu */
		border-top: 1px solid #333;
		padding: 0.75em; /* 15 (20) */
		}
							
	#nav li ul li a:hover,
	#nav li ul:not( :hover ) li.active a
		{
		background-color: #666;
		}
							
	.nav-menu {
		position:relative;
		z-index:1000;
		clear:both;
		}

@media only screen and ( max-width: 1023px ) 
		{
			html
			{
				font-size: 75%; /* 12 */
			}

			#nav
			{
				position: relative;
				top: auto;
				left: auto;
				
			}
				#nav > a /* Mobile Nav Bar */
				{
					width: 100%; /* 50 */
					height:2.75em; /* 60 */
					text-align: left;
					text-indent: -9999px;
					background-color: #666; /* gray color*/			
					position: relative;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 1px solid #fff;
						top: 35%;
						left: 3%;
						right: 93%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
						content: '';
					}
					
					
					
				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
				z-index:500;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
					background-color: #444; /* background color of first layer of dropdown*/
				}
				
				#nav li ul a
						{
							font-size: small; /* size of font in dropdown menu */
							border-top: 0px;
							border-bottom: 1px solid #000;
							padding: 0.75em; /* 15 (20) */
						}
				
					#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding: 0 0.833em; /* 20 (24) */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #000; /* bottom border of drop down */
						}


				/* second level */

				#nav li ul
				{
					position: static;
					padding: 1.25em; /* 20 */
					padding-top: 0;
					background-color: #555;
				}
				
				#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
							background-color: #333;
							border-radius:2px;
						}
		}
		
	
  /* ======================================*/	
 /* Gallery ==============================*/	
/* ======================================*/		

.gallery {
	width:100%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	clear:both;
	}	
	
.gallery h1 {
	margin:.5%;
	padding-bottom:10px;
	}		

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
	width:100% !important;
	min-height: 100%;
	/*overflow: hidden;*/
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding-top: 0px;
	margin-top:20px;	
}

.mainContent h2 {
	font-size: 1.571em;
	font-weight:700;
	}
.mainContent p {
	padding-bottom:10px;}

.alignnone {width:100% !important;}

.frontImg {
	width: 90%;
	height:auto
}

.topcontent {
	width:100%;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	padding: 20px;	
	margin-top:10px;
	margin-bottom: 20px;
	position:relative;
}



.secondpage img {
	float:left;
	display:inline-block;
	
	}
	
.topcontent p {
	display:block;}	
	

.topcontent h2 {
	color: #520b45;
	}
	
.left-column {
	width:50%;
	padding-right:10px;
	float:left;
	clear:both;
	}
	
.right-column {
	width:50%;
	float:left;
	}	

.left-column strong, .right-column strong {font-weight:700 !important;}
	
.left-column p, .right-column p {
	font-family: 'Open Sans', sans-serif;
	margin-bottom:10px;
	display:block;
	}
	
.footnote {
	font-size:12px;
	font-style:italic;}

.volunteercontent {
	background-color: #FFF;	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	padding: 20px;	
	margin-top:-10px;
	margin-bottom: 20px;
	}

.donate {
	background-color: #FFF;	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	padding: 3%;
}

.content {
	width: 74%;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}


.post-info {
	font-style: italic;
	color: #999;
	font-size: 85%;
}

.secondpage {
	width: 100%;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
	width: 24%;
	float: left;
	margin-left: 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 2% 3%;
	margin-bottom: 2%;
}

.middle-sidebar {
	width: 24%;
	float: left;
	margin-left: 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 2% 3%;
	margin-bottom: 2%;
}

.middle-sidebar img {
	background: #fff !important;
	}

.bottom-sidebar {
	width: 24%;
	float: left;
	margin-left: 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 2% 3%;
}

/* ===========================
   ========= Footer ========== 
   =========================== */



.mainFooter {
	width: 100%;
	height:50px;
	margin-bottom:20px;
	float:left;
	padding-left: 0;
	background-color: #520b45;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	color: #FFF;	
	
}

.mainFooter a {
	color:#9d7696;
	}
	
.mainFooter a:hover {
	color:#dbb538;
	}	

.mainFooter p {
	float:left;
	width: 60%;
	padding:10px 10px 10px 30px;
	line-height:28px;
}

.social-media {
	width:40%;
	float:right;
	text-align:right;
	padding:10px;
	}
.social-media i {
	color:#fff;
	padding-right:20px;
	}	
	
/*
.social-media i:hover {
	color:#dbb538
	}		
*/

.hvr-float {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 780px)
{
	.body {
		clear: both; 
		margin: 0 auto; 
		width: 90%;
		font-size: 90%;
		background-color:#333;
		background:url('http://dev.hermitagecatshelter.org/wp-content/uploads/2016/03/bg-1.png');
	}
	
	#raise-the-roof-image {display:none;}
	
	.mainHeader img {
		width: 100%;
		height: auto;
		margin-bottom: 3%;
	}
	
	.mainContent {
		overflow: hidden;
		line-height: 25px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		margin-top: 4%;
		margin-bottom: 2%;
	}
	
	.topcontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		padding: 10px;
		margin-bottom: 4%;
	}

	.volunteercontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		padding: 10px;
		margin-bottom: 4%;
	}
	
	
	
	.bottomcontent {
		background-color: #FFF;	
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		padding: 10px;
	}
	
	.content {
		width: 100%;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
	}	
	

	.post-info {
		display: none;
	}

	.top-sidebar, .middle-sidebar, .bottom-sidebar {
		width: 100% !important;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
		margin-top: 4%;
		margin-left: 0;
        padding: 2% 5%;
		margin-bottom: 0;	
	}

	.top-sidebar p, .middle-sidebar p, .bottom-sidebar p  {
		width: 90%;
	}
		
	.mainFooter {
		width: 100%;
		float: left;
		margin: 2% 0;
		padding-left: 0;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		color: #FFF;	
        text-align: center;
	}

.mainFooter p {
    font-size: 12px;
	float:none !important;
	width: 96%;
    margin-left: auto;
    margin-right: auto;
	padding:10px 10px 0px 10px;
	line-height:28px;
}

.social-media {
	width:100%;
	float:right;
	text-align:center;
	padding:10px;
	}
.social-media i {
	color:#fff;
    padding-left: 20px;
	padding-right:20px;
	}	
	
}