html {
    font-family: "Trebuchet MS", Helvetica;
    font-size: 18px;
}

body {
    margin: 0;
    line-height: 1.66667;
}

/* Page Styling */
.div-top {
    padding: 25px;
}

.textpad {
    padding: 25px;
}

#jhp-hero {
    display: block;
    margin: auto;
    max-width: 55%;
    height: auto;
}

blockquote {
    padding: 0 80px;
    display: block;
    font-size: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}

h1 {
    text-align: center;
    margin: 10px;
}

h2 {
    text-align: center;
    margin: 8px;
}

h3 {
    text-align: center;
    margin: 6px;
}

h4 {
    text-align: center;
    margin: 5px;
}

.dropcap {
    float: left;
    /* width: 0.7em; */
    font-size: 300%;
    line-height: 80%;
    font-weight: bold;
}

.dropcapword {
    width: 0.7em;
    font-size: 150%;
    line-height: 80%;
    font-weight: bold;
}

.dropcap-intext {
    float: left;
    /* width: 0.7em; */
    font-size: 175%;
    line-height: 80%;
    font-weight: bold;
}

.dropcap-intext-word {
    width: 0.7em;
    font-size: 125%;
    line-height: 80%;
    font-weight: bold;
}

.indent {
    text-indent: 50px;
}

/* ---- POEM FORMAT ---- */
/*.stanza {
    text-indent: 50px;
    text-align: left;
    font-size: 16px;
    padding: 0 80px;
    display: block;
    font-family: "Source Sans Pro";
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}*/

h1.poem {
    text-indent: 50px;
    margin: 10px;
    text-align: left;
    padding: 0 80px;
    display: block;
    box-sizing: border-box;
}

h2.poem {
    text-indent: 50px;
    margin: 8px;
    text-align: left;
    padding: 0 80px;
    display: block;
    box-sizing: border-box;
}

h3.poem {
    text-indent: 50px;
    margin: 6px;
    text-align: left;
    padding: 0 80px;
    display: block;
    box-sizing: border-box;
}

#subhead {
    text-indent: 65px;
    text-align: left;
    font-size: 16px;
    margin: 5px;
    padding: 5px;
}

/* Accordion Styling */
/*----- Accordion -----*/
.accordion, .accordion *,
.accordion-red, .accordion *,
.accordion-blue, .accordion *,
.accordion-green, .accordion *,
.accordion-purple, .accordion *,
.accordion-yellow, .accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*----- Section Titles -----*/
.accordion-section-title,
.accordion-section-title-red,
.accordion-section-title-blue,
.accordion-section-title-green,
.accordion-section-title-purple,
.accordion-section-title-yellow {
    text-decoration: none;
    color: black;
    background: #dbdbdb;
    padding: 1.5px;
    border-radius: 4px;
}

.accordion-section-title-red {
    background: #FF6F6F;
}

.accordion-section-title-blue {
    background: #BCC7E5;
}

.accordion-section-title-green {
    background: #BFEFBF;
}

.accordion-section-title-purple {
    background: #A988B0;
}

.accordion-section-title-yellow {
    background: #FDF0BD;
}

.accordion-section:last-child .accordion-section-title,
.accordion-section-red:last-child .accordion-section-title-red,
.accordion-section-blue:last-child .accordion-section-title-blue,
.accordion-section-green:last-child .accordion-section-title-green,
.accordion-section-purple:last-child .accordion-section-title-purple,
.accordion-section-yellow:last-child .accordion-section-title-yellow,
{
    border-bottom: none;
}

a.accordion-section-title::after,
a.accordion-section-title-red::after,
a.accordion-section-title-blue::after,
a.accordion-section-title-green::after,
a.accordion-section-title-purple::after,
a.accordion-section-title-yellow::after {
    content: "[+]";
    font-size: 14px;
    vertical-align: middle;
}

a.accordion-section-title.active::after,
a.accordion-section-title-red.active::after,
a.accordion-section-title-blue.active::after,
a.accordion-section-title-green.active::after,
a.accordion-section-title-purple.active::after,
a.accordion-section-title-yellow.active::after {
    content: "[-]";
    font-size: 14px;
    vertical-align: middle;
}

/*----- Section Content -----*/
.accordion-section-content,
.accordion-section-content-red,
.accordion-section-content-blue,
.accordion-section-content-green,
.accordion-section-content-purple,
.accordion-section-content-yellow {
    padding: 15px;
    display: none;
    background: whitesmoke;
    border-radius: 5px;
    margin: 1em 0;
    /*type*/
    font-size: 12pt;
    color: black;
}

.accordion-section-content-red {
    background: #FF9999;
}

.accordion-section-content-blue {
    background: #E6EBF8;
}

.accordion-section-content-green {
    background: #E6FAE6;
}

.accordion-section-content-purple {
    background: #C9B3CD;
}

.accordion-section-content-yellow {
    background: #FFF8DE;
}

/* ----CONTACT FORM------ */
/* Style inputs with type="text", select elements and text areas */
input[type=text], select, textarea {
    width: 75%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    display: block;

}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
    width: 45%;
}

/* ---FOOTER--- */
.footpad {
    padding: 15px;
}

.footer {
    position: absolute;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    background-color: #f3f3f3;
    margin-left: auto;
    margin-right: auto;
}

.icon-box {
    padding: 5px;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.insta,
.youtube,
.email,
.twitter {
    float: right;
}

.footer-content-insta,
.footer-content-youtube,
.footer-content-email,
.footer-content-twitter {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

#footer-insta,
#footer-youtube,
#footer-email,
#footer-twitter {
    position: relative;
    display: inline-block;
    max-width: 50%;
    height: auto;
    padding: 2px;
}

.insta:hover,
.youtube:hover,
.email:hover,
.twitter:hover {
    opacity: 0.5;
    color: #979696;
}