body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

body {
    background-image: url('images/background.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; }

@media (max-width: 768px) {
  body { background-attachment: scroll; }
}

a {
    color: #FFD700;
    text-decoration: underline;
    transition: color 0.3s, text-decoration 0.3s;
}

/* Make YouTube embeds responsive */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Make YouTube embeds responsive */

a:visited {
    color: #FFD700;
}

a:hover, a:focus {
  text-decoration-color: #FFD700;
  text-decoration-thickness: 2px;
}

a:active {
    color: #FFA500;
}

.container {
    display: flex;
    justify-content: center;
    min-height: 100%;
    position: relative;
}

.content-wrapper {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    height: auto;
    background-color: black;
    box-sizing: border-box;
    border: 0px;
    padding: 10px 10px 0px 10px;
}

.header_image {
    width: 100%;
}

.sectionRight {
  width: 100%;
  height: auto;      /* simplest */
  display: block;
}

.content {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    flex-grow: 1;
}

.border-image {
    width: 20px;
    background-image: url('images/border-image.jpg');
    background-repeat: repeat-y;
    animation: scrollBackground 220s linear infinite;
    flex-shrink: 0;
}

@keyframes scrollBackgroundMobile {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 -400%; /* Doubled from the original -200% */
    }
}

@media screen and (max-width: 768px) {
    .border-image {
        animation: scrollBackgroundMobile 420s linear infinite; /* Doubled from the original 10s */
    }
}

.border-image.left {
    margin-right: 0px;
}

.border-image.right {
    margin-left: 0px;
}

@keyframes scrollBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 -200%;
    }
}

h1 {
    color: #ffffff;
    text-decoration: underline;
    margin-top: 0;
}

h4 {
	color: #FFD700;
}

p {
    line-height: 1.6;
}

.menu-bar {
    background-color: rgba(0, 0, 0, 0.88);
    padding: 8px 0;
}

.menu-bar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu-bar li {
    display: inline-block;
    margin: 0 10px;
    padding: 10px;
}

.menu-bar a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 16px 12px;
    transition: background-color 0.3s;
}

.menu-bar a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

form {
    max-width: 540px;
    padding: 20px;
    border: 1px solid #ccc;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, textarea {
    width: 100%; 
    box-sizing: border-box; 
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

button {
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	border: 0 none; border-radius:4px; 
	transition: all 0.23s ease-in-out 0s; color: #FFFFFF; 
	cursor: pointer; display: inline-block; 
	font-size:15px; font-weight: normal; height: 32px; 
	line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; 
	text-align: center; text-decoration: none; vertical-align: top; 
	white-space: nowrap; width: fit-content; 
	width: -moz-fit-content;
}

button:hover {
    background-color: #218838;
}

/* New styles for 60-40 split layout */
.split-section {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 20px;
    padding: 20px;
}

.text-content {
    padding: 20px;
}

.media-content {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjust existing section styles */
section {
    padding-bottom: 60px;
    padding-left: 1%;
    padding-right: 1%;
}

/* MailChimp Form Embed Code */ 
#mc_embed_signup input {border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup .button {clear:both; background-color: #28a745; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: fit-content; width: -moz-fit-content;}
#mc_embed_signup .button:hover {background-color:#218838;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}
 
#mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px; display:grid;}
#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}
#mc_embed_signup .mc-address-fields-group {display:flex; flex-direction:row; justify-content:space-evenly; width:96%; gap:15px;}
#mc_embed_signup .mc-sms-phone-group {display:flex; flex-direction:row; justify-content:space-evenly; width:96%; gap:15px; padding-top:5px;}

#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}

#mc_embed_signup .clear {clear:both;}
#mc_embed_signup .foot {display:grid; grid-template-columns: 3fr 1fr; width:96%; align-items: center;}
@media screen and (max-width:400px) {#mc_embed_signup .foot {display:grid; grid-template-columns: 1fr; width:100%; align-items: center;}}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
#mc_embed_signup .helper_text {color: #8d8985; margin-top: 2px; display: inline-block; padding: 3px; background-color: rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; font-weight: normal; z-index: 1;}

#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 1em 0; padding:3px; background-color:rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:#e85c41;}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;}

.floating-image {
  position: absolute;
  /* Adjust these values to position the image as desired */
  top: 20px;
  right: 30px;
  /* Set a max-width to ensure responsiveness */
  max-width: 150px;
  height: auto;
  /* Add animation for floating effect */
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.modal-target {
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.modal-target:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  z-index: 9999;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  opacity: 1 !important;
  max-width: 800px;
}

/* Caption of Modal Image */
.modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1200px;
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 1em;
  margin-top: 32px;
}

/* Add Animation */
.modal-content, .modal-caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

/* The Close Button */
.modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

@media screen and (max-width: 768px) {
    .container {
        padding-left: 10px;
        box-sizing: border-box;
    }

    .border-image.left {
        position: absolute;
        left: 0;
        width: 10px;
    }

    .content-wrapper {
        width: 100%;
    }

    .split-section {
        display: flex;
        flex-direction: column;
    }

    .split-section .media-content {
        order: -1; /* This moves the media content to the top */
        margin-bottom: 20px; /* Add some space between the media and text */
    }

    .split-section .text-content,
    .split-section .media-content {
        width: 100%; /* Ensure full width on mobile */
    }

    .media-content img,
    .media-content iframe {
        max-width: 100%;
        height: auto;
    }
}

.modal-close:hover,
.modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@-webkit-keyframes zoom {
  from {-webkit-transform: scale(0)}
  to   {-webkit-transform: scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

footer {
  text-align: center;
}

.studio-tagline {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 1.25rem 0 1.25rem;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.0),
    rgba(0,0,0,0.35)
  );
}