/* Typography */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #333;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px 0;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.1;
	color: #00b4b2;
}
h1 {font-size: 30px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}
p {margin: 0 0 15px 0;}
p:last-child {margin: 0;}

/* Anchors */

a {color: #00b4b2;}
a:hover {color: #009997; text-decoration: underline;}

/* Bootstrap Extension - Equal Height */

.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
@media (max-width: 768px) {
	.row-eq-height {
		display: initial;
	}
}

/* Forms */

.btn.btn-default {
    border-color: #00b4b2;
    background-color: #00b4b2;
    color: #fff;
}
.btn.btn-default:hover {
    border-color: #009997;
    background-color: #009997;
    color: #fff;
}

.inputErr {
    border-color: #f00;
    background-color: #edd;
}
table.inputErr td {
    padding: 4px;
}

.btn.submit-loader {
    color: transparent;
    background: #fff url("/images/submit-loader.gif") center center no-repeat;
}
.required{
    display: none;
}

/* General */

body {
	background-color: #fff;
}

/* Header */

header {
    padding: 30px 0 30px 0;
    height: 150px;
    background: #07076b;
}
header .logo img {
    max-width: 420px;
    max-height: 90px;
    width: 100%;
    height: auto;
}
header .top-dog {
    max-width: 290px;
    max-height: 110px;
    width: auto;
    height: auto;
}

@media only screen and (max-width: 990px) {
    header {height: auto;}
    header .top-dog {display: none;}
}

/* Nav */

#navigation {
    background-color: #cff;
}

.navbar.navbar-default {
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    border-color: #cff;
    border: none;
    background-color: #cff;
}
#navigation .col-sm-12 {
    padding: 0;
}

/* Nav - Toggle Button */

.navbar.navbar-default .navbar-header .navbar-toggle {
    margin-left: 15px;
    border-color: #cff;
    background-color: #cff;
}
.navbar.navbar-default .navbar-header .navbar-toggle:hover {
    border-color: #1fbabd;
    background-color: #1fbabd;
}
.navbar.navbar-default .navbar-header .navbar-toggle .icon-bar {
    background-color: #07076b;
}
.navbar.navbar-default .navbar-header .navbar-toggle:hover .icon-bar {
    background-color: #fff;
}

/* Nav - Main */

.navbar.navbar-default .collapse.navbar-collapse {
    background-color: #cff;
}
.navbar.navbar-default .nav.navbar-nav a {
    background-color: #cff; color: #07076b;
}
.navbar.navbar-default .nav.navbar-nav a:hover {
    background-color: #1fbabd; color: #fff;
}
.navbar.navbar-default .nav.navbar-nav .active a {
    background-color: #1fbabd; color: #fff;
}
.navbar.navbar-default .nav.navbar-nav .active a:hover {
    background-color: #1fbabd; color: #fff;
}

/* Nav - Sub */

.navbar.navbar-default .collapse.navbar-collapse .nav.navbar-nav .dropdown-menu {
    background-color: #cff;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu a {
    background-color: #cff; color: #07076b;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu a:hover {
    background-color: #1fbabd; color: #fff;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu .active a {
    background-color: #1fbabd; color: #fff;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu .active a:hover {
    background-color: #1fbabd; color: #fff;
}

/* Nav - Sub Sub */

.navbar.navbar-default .collapse.navbar-collapse .nav.navbar-nav .dropdown-menu .dropdown-menu {
    background-color: #cff;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu .active .dropdown-menu a {
    background-color: #cff; color: #07076b;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu .active .dropdown-menu a:hover {
    background-color: #1fbabd; color: #fff;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu .active .dropdown-menu .active a {
    background-color: #1fbabd; color: #fff;
}
.navbar.navbar-default .nav.navbar-nav .dropdown-menu .active .dropdown-menu .active a:hover {
    background-color: #1fbabd; color: #fff;
}

/* Nav - Mobile */

@media only screen and (max-width: 767px) {
    /* Indenting */
    .navbar.navbar-default .nav.navbar-nav .dropdown-menu a {padding-left: 30px;}
    .navbar.navbar-default .nav.navbar-nav .dropdown-menu .dropdown-menu a {padding-left: 45px;}
}

/* Nav - Hide Empty Sub Nav */

.navbar.navbar-default .nav.navbar-nav .dropdown-menu:empty {display: none;}

/* Nav - Additional Fixes */

@media only screen and (min-width: 768px) {
	/* Position */
	.navbar-collapse {padding: 0;}
    .navbar .container {padding: 0 15px 0 0;}
	/* Caret */
    .navbar-nav .dropdown-menu a {position: relative;}
	.navbar-nav .dropdown-menu a .caret {transform: rotate(-90deg); position: absolute; top: 12px; right: 10px;}
}

/* Visual */

#visual {
    height: 400px;
    background-color: #eee;
}
#visual .arrow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 80px;
    color: rgba(255, 255, 255, 0.8);
    display:none;
}
#visual .arrow a {
    color: rgba(255, 255, 255, 0.8);
}
#visual .arrow a:hover {
    color: rgba(255, 255, 255, 0.6);
}

@media only screen and (max-width: 990px) {
    #visual {
        height: 200px;
        color:#fff;
    }
}

#visual .balloon {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 200px;
    height: 200px;
    
}
#visual .balloon > img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border:4px solid #fff;
}
#visual .balloon .text {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
}
#visual .balloon .text img {
    position: absolute;
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 768px) {
    #visual .balloon {
        display:none;
    }
}


/* Content */

#content {
    padding: 30px 0 0 0;
}
#content p:last-child {
    margin-bottom: 0;
}

/* Content - Panels */

#panels {
    margin: 0 0 30px 0;
}

.gmp-panel {
    display: block;
    margin: 0 0 30px 0;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    width: 100%;
    /*background-color: #65cc33;*/
    background-color: #00b4b2;
    color: #318e05;
    overflow: hidden;
}
.gmp-panel img {
    display: block;
    width: 100%;
    height: auto;
}
.gmp-panel h3 {
    margin: 0;
    padding: 10px 15px 12px 15px;
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
}
.gmp-panel:hover {
    background-color: #002850;
    text-decoration: none;
    color: #fff;
}
.gmp-panel,
.gmp-panel:hover,
#buttons a,
#buttons a:hover {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

#panels .gmp-panel {
}

@media (max-width: 768px) {
    #content .gmp-panel .img-responsive {
        margin-bottom: 0 !important;
    }
}


/* Content - news + animal */

.media {
    width: 100%;
    padding: 15px 0 15px 0;
    border-bottom: 1px solid #ccc;
}
.media-left {
    width: 210px;
}
.media-left img {
    max-width: 200px;
    height: auto;
}
.media-body {
    width: 100%;
}
.media-body .date {
    color: #aaa;
}
.media-body .text {
    clear:left;
}
.media-body .read-more {
    clear: left;
}
.media-body .table{
    margin-bottom:10px;
}
@media only screen and (max-width: 768px) {
    .media-left {
        float: left;
        width: 100%;
    }
    .media-left img {
        max-width: 100%;
    }
    #content .media .img-responsive {
        margin-bottom: 0 !important;
    }
    .media-body {
        float: left;
        clear: left;
        width: 100%;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 992px) {
    #animal .media-left {
        float: left;
        width: 100%;
    }
    #animal .media-left img {
        max-width: 100%;
    }
    #content #animal .media .img-responsive {
        margin-bottom: 0 !important;
    }
    #animal .media-body {
        float: left;
        clear: left;
        width: 100%;
        margin-top: 10px;
    }
}

/* animal detail*/
a.thumb{
    float:left;
    margin:0 15px 30px 15px;
}
a.thumb img{
    height:100px;
    width:auto;
}
@media only screen and (max-width: 768px) {
    a.thumb {
        width: 100%;
        margin:0;
        padding: 0 15px 0 15px;
        text-align:center;
    }
    a.thumb img {
        height: auto;
        display:inline-block;
    }
}

/* content - anbi */
#anbi{
    margin: 0 0 30px 0;
    padding: 0;
}

#anbi img{max-width:150px}

/* Content - Social Media */

#social-media {
    margin: 0 0 30px 0;
    padding: 0;
}

#social-media div {
    display: block;
}

#social-media a {
    display: inline-block;
    margin: 0 5px 0 5px;
}

#social-media a img {
    width: 32px;
    height: 32px;
}

/* Content - Buttons */

#buttons {
    margin: 0 0 30px 0;
}

#buttons a {
    display: block;
    margin: 0 0 2px 0;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 8px 10px 8px 10px;
    background-color: #00b4b2;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

#buttons a:hover {
    background-color: #002850;
    color: #fff;
    text-decoration: none;
}

/* Content - Recent */

#recent a {
    display: block;
    margin-bottom: 15px;
}

#recent a:hover {
    text-decoration: none;
}

#recent a img {
    display: block;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    width: 100%;
    height: auto;
}

#recent h4 {
    margin-top: 4px;
}

@media only screen and (max-width: 990px) {
    #recent {
        text-align: center;
    }

        #recent a {
            display: inline-block;
            margin: 0 15px 15px 15px;
            max-width: 300px;
        }
}

/* Footer */

footer,
footer a,
footer a:hover {
    color: #fff;
}

footer .grass {
    height: 70px;
    background: url("../images/grass.png") center center repeat-x;
}

footer .foundation {
    padding: 20px 0 20px 0;
    background-color: #65cc33;
    font-size: 20px;
}

footer .contact-info {
    padding: 15px 0 15px 0;
    background-color: #5c554b;
}

@media only screen and (max-width: 1200px) {
    footer .text-right {
        clear: left;
        width: 100%;
        text-align: left;
    }
}

/* Listing */

table.table-listing td:first-child{
    padding-right:15px;
}

@media (max-width: 768px) {
    table.table-listing td{
        float:left;
        clear:left;
    }
}

.listing .media {
    float: left;
    display: block;
    margin: 0 0 2px 0;
    padding: 20px;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
}

.listing .media:hover {
    background-color: #f6f6f6;
    text-decoration: none;
}

.listing .media img {
    margin: 0 10px 0 0;
    width: 260px;
}

.listing .media h3 {
    margin: 0 0 5px 0;
}

.listing .media .date,
.listing .media .text,
.listing .media .read-more {
    display: block;
    margin: 0 0 10px 0;
}

.listing .media .date {
    color: #999;
}

.listing .media .text {
    color: #666;
}

.listing .media .read-more {
    margin: 0;
}

.pagination {
    margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
    .listing .media-left,
    .listing .media-body,
    .listing .media-right {
        clear: both;
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .listing .media img {
        margin: 0 0 15px 0;
        width: 100%;
        height: auto;
    }
}

/* Cookie Alert */

#cookie-alert {
    position: fixed;
    bottom: 0;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding: 10px 20px 10px 20px;
    width: 100%;
    box-sizing: border-box;
    z-index: 99999;
    background-color: #eee;
    text-align: center;
}

/* Bootstrap Extension - Partially Disable Class .image-responsive */

#content .img-not-responsive {
    display: inline-block;
}

/* Bootstrap Extension - Reset Content Image Sizes */

@media (max-width: 768px) {
    #content .img-responsive {
        width: auto !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }
}