﻿@font-face {
	font-family: 'exo';
	src: url('../fonts/Exo-Regular.eot');
	src: url('../fonts/Exo-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Exo-Regular.woff2') format('woff2'),
		url('../fonts/Exo-Regular.woff') format('woff'),
		url('../fonts/Exo-Regular.ttf') format('truetype'),
		url('../fonts/Exo-Regular.svg#Exo-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'exo';
	src: url('../fonts/Exo-Bold.eot');
	src: url('../fonts/Exo-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Exo-Bold.eot.woff2') format('woff2'),
		url('../fonts/Exo-Bold.eot.woff') format('woff'),
		url('../fonts/Exo-Bold.eot.ttf') format('truetype'),
		url('../fonts/Exo-Bold.eot.svg#Exo-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'exo-demibold';
	src: url('../fonts/Exo-DemiBold.eot');
	src: url('../fonts/Exo-DemiBold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Exo-DemiBold.woff2') format('woff2'),
		url('../fonts/Exo-DemiBold.woff') format('woff'),
		url('../fonts/Exo-DemiBold.ttf') format('truetype'),
		url('../fonts/Exo-DemiBold.svg#Exo-DemiBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'bebas_neue';
    src: url('../fonts/bebasneue_regular-webfont.eot');
    src: url('../fonts/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue_regular-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_regular-webfont.woff') format('woff'),
         url('../fonts/bebasneue_regular-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue_regular-webfont.svg#bebas_neue_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
    -webkit-text-size-adjust: none;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body, div {
  margin: 0;
  padding: 0;
}

body {
	font-family: 'exo', Arial, sans-serif;
	font-size: 16px;
	text-align: center;
	color: #000;
	line-height: 1.2;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 37%, #fbfbfb 64%, #f1f2f2 84%, #e7e8e8 97%, #e2e3e4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 37%,#fbfbfb 64%,#f1f2f2 84%,#e7e8e8 97%,#e2e3e4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 37%,#fbfbfb 64%,#f1f2f2 84%,#e7e8e8 97%,#e2e3e4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e3e4',GradientType=0 ); /* IE6-9 */
}

html {
	background-color: #E2E3E4;
}

/* Main Wrapper */

#mainWrapper {
	text-align: left;
	margin: 0 auto;
	min-width: 320px;
	font-size: 11.67px;
	overflow: hidden;
}

/* Section */

.section {
	max-width: 770px;
	padding: 0;
	margin: 0 auto;
}

/* Header */

#header {
	position: relative;
	height: 177px;
}

#header .logo {
	float: left;
	width: 407px;
	margin: 24px 0 0 23px;
}

#header .logo img {
	display: block;
	width: 100%;
}

#header .contacts {
	float: right;
	margin: 89px 40px 0 0;
	text-align: right;
}

#header .contacts .socials {
	margin: 0 0 10px;
	padding: 0;
	font-size: 0;
}

#header .contacts .socials li {
	margin: 0 0 0 11px;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	list-style: none;
	width: 32px;
}

#header .contacts .socials li:first-child {
	margin-left: 0;
}

#header .contacts .socials li img {
	opacity: 0.7;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

#header .contacts .socials li a:hover img {
	opacity: 1;
}

#header .contacts .phone {
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 23.22px;
}

#header .menuBtn {
	display: none;
	position: absolute;
	right: 13px;
	top: 0;
	width: 40px;
	padding: 7px;
	background: #6abe58;
}

#header .menuBtn span {
	display: block;
	height: 3px;
	background: #fff;
	margin: 3px 0;
}

/* Top Navi */

#topNavi {
	border-top: 1px solid #e9e8e8;
}

#topNavi.forMobile {
	display: none;
	height: 0;
	border-width: 0;
	overflow: hidden;
}

#topNavi ul {
	margin: 0;
	padding: 0;
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

#topNavi ul li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16.21px;
	display: table-cell;
	vertical-align: top;
	text-align: center;
	border-right: 1px solid #e9e8e8;
	border-bottom: 1px solid #e9e8e8;
}

#topNavi ul li:first-child {
	border-left: 1px solid #e9e8e8;	
}

#topNavi ul li .arrow {
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-style: solid;
	border-width: 5px 3px 0 3px;
	border-color: #000000 transparent transparent transparent;	
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	transition: transform 0.3s;
}

#topNavi ul li:hover .arrow,
#topNavi ul li.current-menu-item .arrow {
	border-color: #fff transparent transparent transparent;	
}

#topNavi ul li a.expanded .arrow {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}

#topNavi ul li a {
	display: block;
	padding: 17px 17px;
}

#topNavi ul li:hover a,
#topNavi ul li.current-menu-item a {
	background-color: #6abe58;
	color: #fff;
}

#topNavi ul li:hover ul {
	display: block;
}

#topNavi ul li ul {
	position: absolute;
	display: none;
	width: auto;
	background: #46494d;
	padding: 10px 0;
}

#topNavi ul li ul li {
	display: block;
	text-align: left;
	border: 0;
	color: #fff;
	font-size: 15.83px;
}

#topNavi ul li ul li:first-child {
	border: 0;
}

#topNavi ul li ul li a {
	padding: 6px 27px;
	white-space: nowrap;
}

#topNavi ul li:hover ul li a {
	background: #46494d;
}

/* Page Title */

#pageTitle {
	padding: 25px 34px;
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 17.5px;
	background: #e3e5e5; /* Old browsers */
	background: -moz-linear-gradient(top,  #e3e5e5 0%, #f4f5f5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #e3e5e5 0%,#f4f5f5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #e3e5e5 0%,#f4f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e5e5', endColorstr='#f4f5f5',GradientType=0 ); /* IE6-9 */
}

#pageTitle h1 {
	margin: 0;
}

/* Intro */

#intro {
	text-align: center;
	font-size: 16.67px;
}

#intro .left {
	float: left;
	width: 27.92207792207792%; /* 215px */
	height: 533px;
}

#intro .right {
	float: left;
	width: 72.079%; /* 555px */
	height: 217px;
}

#intro .image {
	float: left;
	height: 100%;
	background: no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-ms-behavior: url(./backgroundsize.min.htc);
}

#intro .bottom {
	float: left;
	width: 72.079%; /* 555px */
	height: 316px;
}

#intro a {
	display: block;
}

#intro a span {
	display: block;
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 29.52px;
	margin: 0 0 14px;
}

#intro .adoption {
	height: 342px;
	padding: 26px 5px;
	background: no-repeat left center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-ms-behavior: url(./backgroundsize.min.htc);
}

#intro .vAlign {
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	height: 100%;
	color: #fff;
}

#intro .vAlign div {
	display: table-cell;
	vertical-align: middle;
	padding: 18px;
}

#intro .volunteer {
	height: 191px;	
	background: #000;
}

#intro .right .image.one {
	width: 26.12612612612613%; /* 145px */
}

#intro .right .image.two {
	width: 32.25225225225225%; /* 179px */
}

#intro .donate {
	float: left;
	width: 41.62162162162162%; /* 231px */
	background: #6abe58;	
}

#intro .bottom .quote {
	float: left;
	width: 60%; /* 333px */
	background: #46494d;
	font-family: 'bebas_neue', Arial, sans-serif;
	font-size: 37.98px;
}

#intro .bottom .image {
	width: 40%; /* 222px */
}

/* Content */

#content {
	border-top: 9px solid #6abe58;
	background: #fff;
	padding: 28px 34px;
}

#content a {
	font-family: 'exo-demibold', Arial, sans-serif;
	color: #6abe58;
}

/* Adoption Fees */

#adoptionFees {
	margin-bottom: 19px;
}

#adoptionFees p {
	margin: 0;
	display: inline-block;
}

#adoptionFees ul {
	margin: 0;
	padding: 0;
	display: inline-block;
}

#adoptionFees ul li {
	margin: 0 0 0 30px;
	padding: 0;
	list-style: none;
	display: inline-block;
}

/* Profiles */

#profiles {
	margin: 40px 0 0 -21px;
	padding: 0;
	font-size: 0;
}

#profiles li {
	margin: 0 0 43px;
	padding: 0 0 0 21px;
	list-style: none;
	display: inline-block;
	vertical-align: top;
	width: 33.33333333333333%;
	font-size: 11.67px;
	text-align: center;
}

#profiles li img {
	display: block;
	width: 100%;
	margin: 0 0 19px;
}

#profiles li .name {
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 16.67px;
	color: #6abe58;
	margin: 0 0 18px;
}

#profiles li .type {
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 13.75px;
	color: #46494d;
	margin: 0 0 16px;
}

#profiles li .view {
	display: inline-block;
	font-size: 14.57px;
	color: #fff;
	padding: 7px 27px;
	background: #6abe58;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

#profiles li .view:hover {
	background-color: #77d563;
}

.lity {
	background: #000;
	background: rgba(0,0,0,0.8);
}

/* Contact */

#contact .left {
	float: left;
	width: 230px;
}

#contact .left .info {
	margin: 0;
	padding: 0;
}

#contact .left .info li {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

#contact .left .info li span {
	display: block;
	font-family: 'exo-demibold', Arial, sans-serif;
}

#contact .left .info li a {
	font-family: 'exo', Arial, sans-serif;
	color: inherit;
}

#contact .left .socials {
	margin: 0;
	padding: 0;
}

#contact .left .socials li {
	margin: 0 3px 0 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
}

#contact .left .socials li img {
	display: block;
	width: 100%;
}

#contact .right {
	float: right;
	width: 410px;
}

#contact .right .fields {
	margin-left: -17px;
	font-size: 0;
}

#contact .right .fields .field {
	padding-left: 17px;
	display: inline-block;
	font-size: 11.67px;
	width: 100%;
	margin-bottom: 12px;
}

#contact .right .fields .field.half {
	width: 50%;
}

#contact .right .fields .field .textbox,
#contact .right .fields .field textarea,
#contact nf-field .textbox-container input,
#contact nf-field .email-container input,
#contact nf-field .textarea-container textarea {
	margin: 0;
	padding: 5px 0 5px 40px;
	display: block;
	width: 100%;
	height: 29px;
	background: #cdcecf no-repeat 8px center;
	border: 0;
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 13px;
	color: #fff;
	-webkit-appearance: none;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

#contact .right .fields .field textarea,
#contact nf-field .textarea-container textarea {
	resize: none;
	overflow: auto;
	height: 135px;
}

#contact .right .fields .field .textbox:focus,
#contact .right .fields .field textarea:focus,
#contact nf-field .email-container input:focus,
#contact nf-field .textarea-container textarea:focus {
	background-color: #b3b4b5;
}

#contact .right .fields .field .name,
#contact nf-field .name {
	background-image: url(../img/name-ico.png) !important;
}

#contact .right .fields .field .phone,
#contact nf-field .phone {
	background-image: url(../img/phone-ico.png) !important;
	border-right: 10px solid #ffffff !important;
}

#contact .right .fields .field .email,
#contact nf-field .email {
	background-image: url(../img/email-ico.png) !important;
}

#contact .right .fields .field .message,
#contact nf-field .message {
	background-image: url(../img/message-ico.png) !important;
	background-position: 8px 8px !important;
}

#contact .right .fields .field .submitBtn,
#contact nf-field .submit-container input {
	display: block;
	width: 62px;
	height: 30px;
	background: #46494d;
	color: #fff;
	font-family: 'exo', Arial, sans-serif;
	font-size: 11.67px;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

#contact .right .fields .field .submitBtn:hover,
#contact nf-field .submit-container input:hover {
	background-color: #585c61;
}

#contact .nf-field-container, #ninja_forms_required_items {
	margin-bottom: 10px;
}

#contact .nf-multi-cell .nf-cell {
	padding: 0px;
}

#contact .nf-form-fields-required {
	display: none;
}

/* Volunteer */

#volunteer .top {
	padding-bottom: 20px;
}

#volunteer .top .left {
	float: left;
	width: 50.28490028490028%; /* 353px */
}

#volunteer .top .right {
	float: right;
	width: 45.72649572649573%; /* 321px */
}

#volunteer .top .right .image {
	display: block;
	width: 100%;
	margin-top: 10px;
}

#volunteer .bottom .left,
#volunteer .bottom .right  {
	float: left;
	width: 50%;
	padding: 0 40px 0 0;
}

#volunteer .bottom .image {
	float: left;
	width: 108px;
	margin-top: 1px;
}

#volunteer .bottom .text {
	margin-left: 130px;
}

#volunteer .bottom .getInTouch {
	clear: both;
	display: block;
	width: 207px;
	height: 56px;
	margin: 0 auto;
	text-align: center;
	background: url(../img/get-in-touch.png) no-repeat;
	text-indent: -9999em;
	-webkit-background-size: 100%;
	-moz-background-size: 100%;
	background-size: 100%;
	-ms-behavior: url(./backgroundsize.min.htc);
}

/* Images */

#images ul {
	margin: 0;
	padding: 0;
	font-size: 0;
}

#images ul li {
	margin: 0;
	padding: 0 0 19.61038961038961%;
	display: inline-block;
	width: 25%;
	list-style: none;
	background: no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-ms-behavior: url(./backgroundsize.min.htc);
}

/* Footer */

#footer {
	border-top: 8px solid #6abe58;
	color: #fff;
}

#footer .top {
	padding: 34px 34px 15px;
	background: #46494d;
}

#footer .bottom {
	background: #000000;
	text-align: center;
	padding: 28px 26px;
}

#footer .bottom .copyright {
	margin: 0;
}

/* Miscelleneous */

p {
	margin: 0 0 19px;
}

h1 {
	margin: 0 0 19px;
	padding: 0;
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 17.50px;
	font-weight: normal;
}

h2 {
	margin: 0 0 19px;
	padding: 0;
	font-family: 'exo-demibold', Arial, sans-serif;
	font-size: 14.58px;
	font-weight: normal;
}

h2 span {
	font-family: 'exo', Arial, sans-serif;
	font-weight: bold;
	font-size: 18.33px;
}

ul {
	margin: 0;
	padding: 0 0 0 14px;
}

a {
	outline: none;
	color: inherit;
	text-decoration: none;
}

img {
	border: 0;
	max-width: 100%;
}

.clear {
	clear: both;
}

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}

.clearfix { 
  display: inline-block;  
}

* html .clearfix{  
  height: 1%;  
}

.clearfix {  
  display: block;  
}

input::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

form {
	margin: 0;
	padding: 0;
}

input, select, textarea {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

::-webkit-input-placeholder {
	color: inherit;
	opacity: 1;
}

:-moz-placeholder {
	color: inherit;
	opacity: 1;
}

::-moz-placeholder {
	color: inherit;
	opacity: 1;
}

:-ms-input-placeholder {  
	color: inherit;
	opacity: 1;
}


.owl-carousel .owl-item img {
	-webkit-backface-visibility: hidden;
}

.owl-carousel .owl-item { 
	-webkit-transform: translateZ(0);
}


/* Media Queries */

/* Mobile Screens */

@media only screen and (max-width : 767px) {
	#header {
		height: auto;
		background: #fff;
		padding: 30px 0 22px;
	}
	
	#header .logo {
		float: none;
		display: block;
		width: 259px;
		margin: 0 auto 24px;
	}
	
	#header .contacts {
		float: none;
		margin: 0;
		text-align: center;
	}
	
	#header .menuBtn {
		display: block;
	}
	
	#topNavi {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 134px;
	}
	
	#topNavi ul {
		display: block;
	}
	
	#topNavi ul li {
		display: block;
		border-right: 0;
		text-align: left;
		font-size: 20.25px;
		border-bottom: 1px solid #c8c7c7;
	}
	
	#topNavi ul li a {
		padding: 10px 30px;
		background: #fff;
	}

	#topNavi ul li ul li {
		border-top: 1px solid #c8c7c7;
	}
	
	#topNavi ul li:hover a {
		background: #fff;
		color: #000;
	}
	
	#topNavi ul li.current-menu-item:hover a {
		background: #6abe58;
		color: #fff;
	}
	
	#topNavi ul li.current-menu-item ul a,
	#topNavi ul li.current-menu-item:hover ul a {
		background: #fff;
		color: #000;
	}
	
	#topNavi ul li ul {
		position: static;
		display: none;
		background: #fff;
		padding: 0;
	}	
	
	#topNavi ul li:hover ul {
		display: none;
	}
	
	#topNavi ul li ul li {
		color: #000;
		font-size: 20.25px;
		border-top: 1px solid #c8c7c7;
	}
	
	#topNavi ul li ul li:first-child,
	#topNavi.forMobile	{
		border-top: 1px solid #c8c7c7;
	}
	
	#topNavi ul li:hover ul li a {
		background: #fff;
	}
	
	#topNavi ul li:hover .arrow {
		border-color: #000 transparent transparent;
	}
	
	#topNavi ul li.current-menu-item:hover .arrow {
		border-color: #fff transparent transparent;
	}
	
	#topNavi ul li ul li a {
		padding: 10px 30px 10px 50px;
		white-space: normal;
	}
	
	#topNavi.forMobile {
		height: auto;
		overflow: auto;
		border-width: 1px;
	}

	#intro {
		font-size: 14.12px;
	}
	
	#intro .bottom {
		float: none;
		clear: both;
	}
	
	#intro .bottom .quote {
		width: auto;
	}
	
	#intro .bottom .image {
		display: none;
	}
	
	#intro .left {
		width: 60%;
	}
	
	#intro .right {
		width: 40%;
	}
	
	#intro .adoption {
		height: 307px;
	}
	
	#intro .right .image.one {
		width: 100%;
		height: 184px;
	}
	
	#intro .volunteer {
		height: 173px;
	}
	
	#intro .donate {
		width: 100%;
		height: 177px;
	}
	
	#intro .left {
		height: auto;
	}
	
	#intro .right .image.two {
		height: 119px;
		width: 100%;
	}
	
	#intro a span {
		font-size: 25.45px;
		margin-bottom: 10px;
	}
	
	#intro .vAlign div {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	#intro .bottom {
		width: auto;
		height: auto;
	}
	
	#intro .bottom .quote {
		font-size: 25.93px;
	}
	
	#intro .bottom .quote div {
		padding: 27px;
	}
	
	#content,
	#footer .top,
	#footer .bottom	{
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#content {
		border-width: 6px;
	}
	
	#profiles li {
		width: 100%;
	}

	#contact .left {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	
	#contact .right {
		float: none;
		width: auto;
	}
	
	#contact .right .fields .field.half {
		width: 100%;		
	}
	
	#contact .right .fields .field .phone,
	#contact nf-field .phone {
		border-right: 0px solid #ffffff !important;
	}
	
	#adoptionFees p {
		margin-bottom: 5px;
	}
	
	#adoptionFees ul {
		display: block;
	}
	
	#adoptionFees ul li {
		display: block;
		margin-left: 0;
	}
	
	#volunteer .top {
		margin-bottom: 20px;
	}
	
	#volunteer .top .left,
	#volunteer .top .right {
		float: none;
		width: auto;
	}
	
	#volunteer .bottom .left, #volunteer .bottom .right {
		float: none;
		width: auto;
		overflow: hidden;
		margin-bottom: 20px;
		text-align: center;
		padding-right: 0;
	}
	
	#volunteer .bottom .image {
		float: none;
		width: 107px;
		margin-bottom: 15px;
	}
	
	#volunteer .bottom .text {
		margin-left: 0;
	}
	
}


@media only screen and (max-width : 479px) {

}

#content ul {
	margin: 0 0 19px;
}