/*
Plugin Name: AWl Animals
Plugin URI: http://neathawk.com
Author: Joseph Neathawk
Author URI: http://Neathawk.com
License: GPLv3
*/



/*@import url('navBar.css');*/

/*
element {
	layout(position)

	content(text)

	design(background)

	other(z-index)
}
@font-face
{
      font-family: title_font;
      src: url("/_font/font.ttf");
}
COLORS:
	blue:#1360aa;
	grey:#e3e3e3;
	Aqua: #6fccdd;

Table of Contents:
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Main Structur
# Elements
# Navigation
# Header Area
# Content Area
# Footer Area
# Other
# Templates
# Media Queries
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Main Structure
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Header Area
--------------------------------------------------------------*/
form#animal-search {
    margin-bottom:2em;
}
/*--------------------------------------------------------------
# Content Area
--------------------------------------------------------------*/
.animals.search-container {
    margin-top:7em;
}
.animals.search-container .animal {
    display:inline-block;
    margin-bottom: 7em;
    padding-bottom:2em;
    width:100%;

    border-radius:1em;
}
.animals.search-container .animal-thumbnail {
    display:block;
    height:200px;
    margin: -3em auto 1em auto;
    width:min(200px, calc(100% - 2em));

    background-position:center center;
    background-size:cover;
    border-radius:1em;
}
.animals.search-container .animal-name {
    margin:0.5em auto 0.5em auto;
    width: calc(100% - 30px);

    color: #7d3e1d;
    text-align: center;

    overflow: hidden;
}
.animals.search-container .animal-name .name-background {
    display:inline-block;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width: 100%;

    background-position: center -190px;
    background-size: auto 250px;
    filter: blur(10px) grayscale(0.5);
    overflow: hidden;
}
.animals.search-container .animal-name a {
    filter: blur(0px);
}
.animals.search-container .animal-age {
    color: #d7625a;
    width: 40%;
    float: left;
    text-align: right;
    border-right: 1px solid #d7625a;
    padding-right: 0.5em;
}
.animals.search-container .animal-breed {
    float: left;
    padding-left: 0.5em;
}

.animals.search-container .animal-id,
.animals.search-container .animal-sex,
.animals.search-container .animal-excerpt,
.animals.search-container .animal-content,
.animals.search-container .animal-name-simple,
.animals.search-container .animal-species,
.animals.search-container .animal-size,
.animals.search-container .animal-color {
    display:none;
    height:0px;
    width:0px;
}


.animals.pet-of-the-week {

}
.animals.pet-of-the-week .animal-thumbnail {
    clear:none;
    display:inline-block;
    float:left;
    height:150px;
    width:150px;
    margin:-15px 0 15px 0;

    background-position:center center;
    background-size:cover;
    border-radius:999px;
}

.animals.pet-of-the-week .animal-name {
    clear:none;
    float:left;
    padding:0 15px;

    font-size:1em;
    line-height:1.5;
}
.animals.pet-of-the-week .animal-age {
    clear:none;
    float:left;
    padding:0 15px;

    border:1px solid #666666;
    border-bottom:none;
    border-top:none;
}
.animals.pet-of-the-week .animal-breed {
    clear:none;
    float:left;
    padding:0 1em;
}
.animals.pet-of-the-week .animal-excerpt {
    clear:none;
    float:left;
    padding:0 0 0 15px;
    width:calc(100% - 150px);

    font-size:0.8em;
}
.animals.pet-of-the-week .animal-id,
.animals.pet-of-the-week .animal-sex,
.animals.pet-of-the-week .animal-content,
.animals.pet-of-the-week .animal-name-simple,
.animals.pet-of-the-week .animal-species,
.animals.pet-of-the-week .animal-size,
.animals.pet-of-the-week .animal-color {
    display:none;
    height:0px;
    width:0px;
}
/*--------------------------------------------------------------
# Paginate Area
--------------------------------------------------------------*/
.paginate-container {
    display:grid;
    grid-template-columns:150px auto 150px;
    justify-content:space-between;
    width:100%;
}
/*--------------------------------------------------------------
# Other
--------------------------------------------------------------*/

/* forced aspect ratios */
.aspect-ratio {
    display: inline-block;
    position: relative;
    width: 100%;
}
.aspect-ratio .dummy,
.aspect-ratio.ar-1-1 .dummy {
    /*default aspect ratio */
    margin-bottom: 100%; /* 1:1; aspect ratio */
}
.aspect-ratio.ar-4-3 .dummy {
    margin-bottom: 75%; /* 4:3 aspect ratio */
}
.aspect-ratio.ar-16-9 .dummy {
    margin-bottom: 56.25%%; /* 16:9; aspect ratio */
}
.aspect-ratio.ar-3-4 .dummy {
    margin-bottom: 125%; /* 3:4; aspect ratio */
}
.aspect-ratio.ar-9-16 .dummy {
    margin-bottom: 177.7%; /* 9:16; aspect ratio */
}
.aspect-ratio .element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/*--------------------------------------------------------------
# Templates
--------------------------------------------------------------*/
body.single-awla {

}
body.single-awla #masthead {
    height:auto;
    margin:0;
}
body.single-awla .animal-single .animal-thumbnail {
    display:block;
    height:100%;
    width:100%;

    background-size:cover;
    background-position:center;
}
body.single-awla .animal-single .animal-name {
    margin:1em 0;
    font-weight:bold;
}
body.single-awla .animal-single .animal-description {
    margin:1em 0;
}
/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/

/* for-phone-only */
@media only screen and (max-width: 599px) {

}

/* for-tablet-portrait-up */
@media only screen and (min-width: 600px) {

}

/* for-tablet-portrait-only */
@media only screen and (min-width: 600px) and (max-width: 899px) {

}

/* for-tablet-landscape-up */
@media only screen and (min-width: 900px) {
/**** DEFAULT MEDIA QUERY - 900px width and larger ****/

}

/* for-tablet-landscape-only */
@media only screen and (min-width: 900px) and (max-width: 1199px) {

}

/* for-desktop-up */
@media only screen and (min-width: 1200px) {

}

/* for-desktop-only */
@media only screen and (min-width: 1200px) and (max-width: 1799px) {

}

/* for-big-desktop-up */
@media only screen and (min-width: 1800px) {

}


@media only print {

}