img { max-width: 100%; display: block; }

p { margin-left: 1vw; margin-right: 1vw; }

div.callout { background-color: #f5b771; color: #f03554; margin-left: 0%; margin-right: 0%; padding-top: 1vw; padding-bottom: 1vw; padding-left: 2vw; padding-right: 2vw; font: 100% "Patua One", sans-serif; border-radius: 1vw; }

strong { font: 100% "Patua One", sans-serif; font-weight: normal; }

div.callout > a { color: #882f0c; }

body { font: 120% "Abel", sans-serif; margin: 0px; padding: 0px; background-color: #4f2e87; color: #ceddf0; }

a { color: #f75e5e; }

h1 { font: 180% "Encode Sans SC", sans-serif; }

h2 { font: 140% "Encode Sans SC", sans-serif; }

/* navigation bar */
.topnav { background-color: #4f2e87; overflow: hidden; }

.topnav a { float: left; text-align: center; padding: 2vw; text-decoration: none; font-size: 1vw; color: #ceddf0; font: 100% "Encode Sans SC", sans-serif; }

.topnav a:hover { background-color: #ceddf0; color: #4f2e87; }

.topnav a.active { font-weight: bold; background-color: #f5b771; color: #f03554; }

div.content-background { width: 100%; background-color: #3a1a59; padding-top: 1vw; padding-bottom: 1vw; }

/* Mobile */
@media only screen and (min-device-width: 220px) and (max-device-width: 550px) { div.content-whole { margin-left: auto; margin-right: auto; width: 100%; max-width: 80vw; } body { font: 100% "Abel", sans-serif; } .topnav a { display: block; float: none; } .mini-image { display: inline; margin-left: 1%; margin-right: 1%; max-width: 16%; max-height: 20vw; } .main-image { display: block; margin-left: auto; margin-right: auto; max-width: 90%; max-height: 90vw; } .appropriate-iframe { margin-left: auto; margin-right: auto; display: block; width: 100%; aspect-ratio: 2 / 1; } }

/* Desktop */
@media only screen and (min-device-width: 551px) { div.content-whole { margin-left: auto; margin-right: auto; width: 100%; max-width: 40vw; } .mini-image { display: inline; margin-left: 1%; margin-right: 1%; max-width: 16%; max-height: 10vw; } .main-image { display: block; margin-left: auto; margin-right: auto; max-width: 70%; max-height: 30vw; } .appropriate-iframe { margin-left: auto; margin-right: auto; display: block; width: 100%; aspect-ratio: 2 / 1; } }

footer { background-color: #4f2e87; overflow: hidden; padding: 2vw; text-align: center; }

div.image-bg { background-color: #251436; margin-top: 1vw; margin-left: 0%; margin-right: 0%; padding-top: 1vw; padding-bottom: 1vw; padding-left: 2vw; padding-right: 2vw; border-radius: 2vw; }

div.main-image-container { margin-top: 1vw; margin-bottom: 1vw; }

.mini-image:hover { box-shadow: 0px 0px 1px 3px #f5b771; }

.centered-image { display: block; margin-left: auto; margin-right: auto; width: 70%; }

.centered-image-small { display: block; margin-left: auto; margin-right: auto; width: 30%; }

.centered-image-large { display: block; margin-left: auto; margin-right: auto; width: 90%; }

.mailing-list-button { background-color: #f5b771; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; border-radius: 5px; font: 100% "Encode Sans SC", sans-serif; color: #f03554; }

/* Mobile */
@media only screen and (min-device-width: 220px) and (max-device-width: 550px) { /*a.background-mini-logo { color: #ff0000; } a.background-mini-logo:hover { color: #ff0000; }*/ }

/* Desktop */
@media only screen and (min-device-width: 551px) { .background-mini-logo { background-image: url("/assets/images/skyle-logo-small.png"); background-repeat: no-repeat; background-position: center; background-size: auto 96%; } a.background-mini-logo { color: rgba(0, 0, 0, 0); } a.background-mini-logo:hover { color: rgba(0, 0, 0, 0); } }

/*# sourceMappingURL=styles.css.map */