@charset "UTF-8";

/*
 * Theme Name: Valley Themes
 * Description: Used to style font family generator.
 * 
 */



/**
 * 1. Font family generator.
 * 
 */

/* - hundred-pixel - */

.hundred-pixel {

width: 100%;
height: 100px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /hundred-pixel - */



/* - fifty-pixel - */

.fifty-pixel {

width: 100%;
height: 50px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /fifty-pixel - */



/* - ten-pixel - */

.ten-pixel {

width: 100%;
height: 10px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /ten-pixel - */



/* - font-family-container - */

.font-family-container {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /font-family-container - */



/* - font-family-content - */

.font-family-container .font-family-content {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /font-family-content - */



/* - h2 - */

.font-family-container .font-family-content h2.heading {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

.font-family-container .font-family-content h2.heading {

font-family: sans-serif;
font-size: 2.2rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 1.0);

}

/* - /h2 - */



/* - output-container - */

.font-family-container .font-family-content .output-container {

width: 100%;
min-height: 25vh;

margin: 0px 0px 0px 0px;
padding: 25px 25px 25px 25px;

background-color: rgba(0, 0, 0, 0.0);

border: 1px solid rgba(0, 0, 0, 0.4);

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-content: flex-start;
align-content: flex-start;

-webkit-align-items: flex-start;
align-items: flex-start;

}

/* - /output-container - */



/* - output-text - */

.font-family-container .font-family-content .output-container .output-text {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

.font-family-container .font-family-content .output-container .output-text {

font-family: sans-serif;
font-size: 2.2rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 1.0);

}

/* - /output-text - */



/* - input-container - */

.font-family-container .font-family-content .input-container {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /input-container - */



/* - input - */

.font-family-container .font-family-content .input-container input {

width: 100%;
min-height: 50px;

margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;

background-color: rgba(0, 0, 0, 0.0);

border: 1px solid rgba(0, 0, 0, 0.4);

-webkit-border-radius: 0;
border-radius: 0;

transition: all .5s;

}

.font-family-container .font-family-content .input-container input {

font-family: sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 1.0);

}

.font-family-container .font-family-content .input-container input::placeholder {

font-family: sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 0.5);

}

/* - /input - */



/* - focus - */

.font-family-container .font-family-content .input-container input:focus {

border: 1px solid rgba(0, 0, 0, 0.8);

}

/* - /focus - */



/* - content - */

.font-family-container .font-family-content .content {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /content - */



/* - font-options - */

.font-family-container .font-family-content .content .font-options {

width: 100%;
height: 50px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

border: 1px solid rgba(0, 0, 0, 0.4);

overflow: auto;

transition: all .5s;

}

.font-family-container .font-family-content .content .font-options:hover {

border: 1px solid rgba(0, 0, 0, 0.8);

}

.font-family-container .font-family-content .content .font-options:active {

border: 1px solid rgba(0, 0, 0, 0.4);

}

/* - /font-options - */



/* - family-name - */

.font-family-container .font-family-content .content .font-options .family-name {

width: 100%;
min-height: 50px;

margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;

background-color: rgba(0, 0, 0, 0.0);

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-content: flex-start;
align-content: flex-start;

-webkit-align-items: flex-start;
align-items: flex-start;

}

.font-family-container .font-family-content .content .font-options .family-name {

font-family: sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 0.5);

}

/* - /family-name - */



/* - option - */

.font-family-container .font-family-content .content .font-options .option {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /option - */



/* - input - */

.font-family-container .font-family-content .content .font-options .option input[type="radio"] {

display: none;

}

/* - /input - */



/* - label - */

.font-family-container .font-family-content .content .font-options .option label {

width: 100%;
min-height: 50px;

margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;

background-color: rgba(0, 0, 0, 0.0);

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-content: flex-start;
align-content: flex-start;

-webkit-align-items: flex-start;
align-items: flex-start;

transition: all .5s;

cursor: pointer;

}

.font-family-container .font-family-content .content .font-options .option label  {

font-family: sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 1.0);

}

.font-family-container .font-family-content .content .font-options .option label:hover {

color: rgba(0, 0, 0, 0.5);

}

.font-family-container .font-family-content .content .font-options .option label:active {

color: rgba(0, 0, 0, 1.0);

}

.font-family-container .font-family-content .content .font-options .option input[type="radio"]:checked + label {

color: rgba(0, 0, 0, 0.5);

}

/* - /label - */



/* - font-option - */

.font-family-container .font-family-content .content .font-option {

width: 100%;
height: 50px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

border: 1px solid rgba(0, 0, 0, 0.4);

overflow: auto;

transition: all .5s;

}

.font-family-container .font-family-content .content .font-option:hover {

border: 1px solid rgba(0, 0, 0, 0.8);

}

.font-family-container .font-family-content .content .font-option:active {

border: 1px solid rgba(0, 0, 0, 0.4);

}

/* - /font-option - */



/* - family-name - */

.font-family-container .font-family-content .content .font-option .family-name {

width: 100%;
min-height: 50px;

margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;

background-color: rgba(0, 0, 0, 0.0);

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-content: flex-start;
align-content: flex-start;

-webkit-align-items: flex-start;
align-items: flex-start;

}

.font-family-container .font-family-content .content .font-option .family-name {

font-family: sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 0.5);

}

/* - /family-name - */



/* - input - */

.font-family-container .font-family-content .content .font-option input[type="checkbox"] {

display: none;

}

/* - /input - */



/* - option - */

.font-family-container .font-family-content .content .font-option .option {

width: 100%;
height: auto;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background-color: rgba(0, 0, 0, 0.0);

}

/* - /option - */




/* - label - */

.font-family-container .font-family-content .content .font-option .option label {

width: 100%;
min-height: 50px;

margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;

background-color: rgba(0, 0, 0, 0.0);

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-content: flex-start;
align-content: flex-start;

-webkit-align-items: flex-start;
align-items: flex-start;

transition: all .5s;

cursor: pointer;

}

.font-family-container .font-family-content .content .font-option .option label  {

font-family: sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 200;
text-decoration: none;
color: rgba(0, 0, 0, 1.0);

}

.font-family-container .font-family-content .content .font-option .option label:hover {

color: rgba(0, 0, 0, 0.5);

}

.font-family-container .font-family-content .content .font-option .option label:active {

color: rgba(0, 0, 0, 1.0);

}

.font-family-container .font-family-content .content .font-option input[type="checkbox"]:checked + .option label {

color: rgba(0, 0, 0, 0.5);

}

/* - /label - */



/**
 * 0. Media queries
 * 
 *  Breakpoints for responsive design
 * 
 */

/* - Media query for large device viewport maximum width 1024 pixels - */

@media only screen and ( max-width: 1024px ) {

}

/* - /Media query for large device viewport maximum width 1024 pixels - */



/* - Media query for medium device viewport maximum width 768 pixels - */

@media only screen and ( max-width: 768px ) {

}

/* - /Media query for medium device viewport maximum width 768 pixels - */



/* - Media query for small device viewport maximum width 480 pixels - */

@media only screen and ( max-width: 480px ) {

}

/* - /Media query for small device viewport maximum width 480 pixels - */



/* - Media query for extra small device viewport maximum width 320 pixels - */

@media only screen and ( max-width: 320px ) {

}

/* - /Media query for extra small device viewport maximum width 320 pixels - */