/* GENERAL */
html { width: 100%; height: 100%; padding: 0px; margin: 0px; }


/* TYPE */
h1 { font-family: 'Roboto', sans-serif; color: black; font-weight: 300; line-height: 1; text-align: center; padding-top: 25px;}
h2 { font-family: 'Roboto', sans-serif; color: #363636; font-weight: 300; line-height: 1.16666667; margin: 2rem 0 1rem; font-size: 26px;}
p { font-family: 'Roboto', sans-serif; color: #363636; font-weight: 300;}

/* HEADER */
#header {width: 100%;}
#header img {width: 250px; padding-top: 25px; padding-right: 25px; float: right;}
/* .grayline {border-bottom: solid 2px #e7e7e7; padding-top: 15px;} */
#header img.proj {margin-top: 4%;}
#header img.decor {z-index: -5000; width: 53%; float: left; padding-top: 4.5%;}
.content p {margin-bottom: 30px; text-align: center;}

.commentform {background: rgb(243, 241, 241);}
.commentform p {text-align: left; margin-bottom: 0;}

.no-spark {height: 563px;}
.no-spark h1 {margin-bottom: 50px;}
blockquote {border-left: 18px solid #fac917; width: 90%; margin: 0 auto;}

/* Forms */
form { margin: 18px 0; }
label { display: block; margin: 10px 0 8px; width: 100%; }
input[type="text"] { margin-bottom: 8px; padding-left: 3px; width: 100%; }
textarea { height: 80px; margin-bottom: 8px; padding: 3px 5px; resize: none; width: 100%; }
input[type="checkbox"],
input[type="radio"] { margin: 0 4px 0 2px; }
input[type="checkbox"] + label,
input[type="radio"] + label { display: inline-block; margin-right: 14px; position: relative; top: -1px; width: auto; }
input[type="submit"],
input[type="reset"] { background-color: #416d90; border-radius: 14px; border: 0; color: #fff; letter-spacing: .05em; margin-top: 14px; padding: 4px 16px; transition: background-color .2s; margin-bottom: 15px;}
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { background-color: #78be21; }

/* FOOTER */
#footer { right: 0; bottom: 0; left: 0; font-weight: 300; padding: 0; display: block;}
.footer-top { padding: 1.4rem 0; background-color: #416d90; color: #fff; text-align: center;}
.footer-top .footer-logo {margin: 0; border-right: 1px solid rgba(8, 6, 13, 0.2); border-bottom: 0; padding: .2rem 2rem 1rem 0; vertical-align: middle; display: inline-block;}
.footer-top a {padding: 0.3rem; vertical-align: middle; font-size: 1.36rem; }
.footer-top img {width: 100px; height: auto;}

.footer-social { min-width: 50px; margin: 0; vertical-align: middle; border-bottom: 0; padding: 1rem 2rem 1rem 0; display: inline-block; }
.footer-social h3 {text-align: left; font-size: 16px; font-weight: bolder; padding-left: 15px;}
.footer-social p {color: white; text-align: left; font-size: 13px; padding-left: 15px;}
.footer-social a {color: white;}


/* .social-linkgroup { width: 100%;}
.social-linkgroup ul li { display: inline-block!important; margin: 0; padding: 0; list-style: none;} */
/* .social-icon {padding: 0 10px;}
.social-icon .fab {color: white;}
.social-icon .fas {color: white; }
ul.footer-items {margin: 0; padding: 0;} */

.footer-bottom {background-color: #002437; padding: 5px 0;}
.footer-bottom p { color: #fff; font-size: 12px; text-align: center; margin-bottom: 0;}

#SparkPage-feature-overlay .crisp-theme .section .author-section .author-appreciation-container {display:none!important;}
#SparkPage-feature-overlay .crisp-theme .section .section-content .content-container {display:none!important;}
#luca-splash.crisp-theme .section.author-section .appreciate-button {display:none!important;}


@media screen and (max-width: 2048px) {
    #header img.decor {padding-top: 2.5%;}
}


@media screen and (max-width: 1229px) {
    #header img.decor {padding-top: 3.5%;}
    .no-spark {height: 316px;}

}

@media screen and (max-width: 768px) {
    #header img.decor {padding-top: 3.5%;}
    .no-spark {height: 450px;}

}


@media screen and (max-width: 640px) {
    #header {height: 50px}
    #header img {width: 100px; padding-right: 15px;}
    #header img.decor {padding-top: 7.5%; width: 47%;}

    h1 {font-size: 25px;}
.commentform h2 {padding-top: 15px; font-size: 18px;}

.no-spark {height: 380px;}

}

@media screen and (max-width: 376px) {
li.footer-logo {display:none!important;}
.no-spark {height: 420px;}


}