/* || General styles */

a {
    color: #fff;
    padding: 12px 12px;
    text-decoration: none;
    white-space: nowrap;
}
a:hover {
    background-color: #555;
    color: #0f0;
    text-decoration: underline;
}
body {
    background-color: #fff;
    font-family: Merriweather, Georgia, "Times New Roman", serif;
    margin: 0;
    padding: 0;
    background: url(http://fortetalent.com/images/forte-talent-background-tvs-bw-1024x1024.webp) repeat;
    background-size: contain;
    background-attachment: fixed;
}

/* ------------------------------------------------------------------------- */
/* || Typography */

@font-face {
    font-family: Tangerine;
    src: url(http://fortetalent.com/fonts/Tangerine/Tangerine-Regular.ttf) format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: Tangerine;
    src: url(http://fortetalent.com/fonts/Tangerine/Tangerine-Bold.ttf) format("truetype");
    font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Tangerine, cursive;
    font-weight: 700;
}
h1 {
    font-size: 300%;
}
h2 {
    font-size: 250%;
}
h3 {
    font-size: 200%;
}
h4 {
    font-size: 150%;
}

/* ------------------------------------------------------------------------- */
/* || Header, Footer and Navigation */

header {
    align-items: center;
    background-color: #000;
    background-image: url(http://fortetalent.com/images/forte-talent-header-tv-test-pattern-1200x300.png);
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    height: 300px;
    justify-content: center;
}
footer {
    background-color: #555;
    color: #fff;
    padding: 20px 10px;
    text-align: center;
}
.footer-container {
    margin: 0 auto;
    max-width: 1200px;
}
.footer-links {
    background-color: #444;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-links a {
    padding: 15px 20px;
}
.footer-links a:hover {
    background-color: #555;
}
nav {
    background-color: #444;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
nav a {
    padding: 15px 20px;
}
nav a:hover {
    background-color: #555;
}

/* ------------------------------------------------------------------------- */
/* Utility classes */
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.image-container img {
    border-radius: 8px;
    height: auto;
    max-width: 100%;
}
.services-text p {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    display: inline;
    padding: 12px 12px;
    text-decoration: none;
}
.services-text p a:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: #0f0;
    text-decoration: underline;
}

/* ------------------------------------------------------------------------- */
/* General Container Styles */

.container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
    text-align: center;
}
/* ------------------------------------------------------------------------- */
/* Individual Page Information */

/* About Section */
.about {
    padding: 60px 20px;
}
.about .container {
    text-align: center;
}
.about h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.about-content {
    align-items: center;
    display: flex;
    flex-direction: column;
}
.about-image {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.about-image img {
    display: block;
    height: auto;
    max-width: 100%;
}
.about-text {
    margin-bottom: 20px;
    max-width: 800px;
}

/* ------------------------------------------------------------------------- */
/* Contact Section */
.contact {
    padding: 60px 20px;
}
.contact .container {
    align-items: center;
    display: flex;
    flex-direction: column;
}
.contact h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------------- */
/* Corporate Events Section */
.corporate-events {
    padding: 60px 20px;
}
.corporate-events .container {
    align-items: center;
    display: flex;
    flex-direction: column;
}
.corporate-events h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.corporate-events .event-content {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}
.corporate-events .event-content img {
    border-radius: 10px;
    max-width: 100%;
}
.corporate-events div {
    flex-grow: 1;
}
.corporate-events p {
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------------- */
/* Index Section */
.index {
    padding: 60px 20px;
}
.index .container {
    margin: 0 auto;
    max-width: 1200px;
}
.index h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------------- */
/* Interactive Characters Section */
.interactive-characters {
    padding: 60px 20px;
}
.interactive-characters .container {
    margin: 0 auto;
    max-width: 1200px;
    text-align: left;
}
.interactive-characters h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* ------------------------------------------------------------------------- */
/* Private Parties Section */
.private-parties {
    padding: 60px 20px;
}
.private-parties .container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}
.private-parties h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.private-parties .party-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.private-parties .party-image {
    border-radius: 10px;
    border-style: solid;
    border-width: 0;
    vertical-align: middle;
}
.private-parties .party-text {
    max-width: 800px;
    padding: 20px;
    text-align: center;
}
.private-parties h3 {
    margin-top: 0;
}
.private-parties p {
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------------- */
/* Raves and Reviews Section */
.raves-and-reviews {
    padding: 60px 20px;
    text-align: center;
}
.raves-and-reviews .container {
    margin: 0 auto;
    max-width: 1200px;
}

/* ------------------------------------------------------------------------- */
/* Services Section */
.services {
    padding: 60px 20px;
}
.services .container {
    text-align: center;
}
.services h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------------- */
/* Sound Reinforcement Section */
.sound-reinforcement {
    padding: 60px 20px;
    text-align: center;
}
.sound-reinforcement .container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}
.sound-reinforcement h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.sound-reinforcement .image-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.sound-reinforcement .image-container img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}
.sound-reinforcement a,
.sound-reinforcement p {
    background: 0 0;
    border-radius: 0;
    color: #333;
    margin-bottom: 10px;
    padding: 0;
    text-shadow: none;
}

/* ------------------------------------------------------------------------- */
/* TV Background */
.tv-background {
    background-image: url(http://fortetalent.com/images/forte-talent-logo-300x300.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    height: 300px;
    justify-content: center;
    width: 300px;
}

/* ------------------------------------------------------------------------- */
/* Weddings Section */
.weddings {
    padding: 60px 20px;
    text-align: center;
}
.weddings .container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}
.weddings h1 {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.weddings .image-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.weddings .image-container img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}
.weddings a,
.weddings p {
    background: 0 0;
    border-radius: 0;
    color: #333;
    margin-bottom: 10px;
    padding: 0;
    text-shadow: none;
}

/* ------------------------------------------------------------------------- */
/* Responsive Design */
@media (max-width: 768px) {
    .footer-links a,
    nav a {
        flex-basis: 50%;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .footer-links a,
    nav a {
        flex-basis: 100%;
    }
}