/* Parscale Media Style Sheet
-----------------------------------------------------------------------------

Prototype Version:	3.6
Developer:					Joshua
Email Address:			sales@endlessvisions.net
Developer Website:	https://www.endlessvisions.net/

Client Website:			https://www.endlessvisions.net
Last Modifier:			Joshua - Endless Visions
Last Modified:			January 24th, 2026

*/

/* Table of Contents
-----------------------------------------------------------------------------

	1. Clean Base
	2. Base Typography
	3. Images
	4. Links
	5. Forms
	6. Tables
	7. Framework

*/

/* 1. Create a Clean Base
------------------------------------------------------------------------------*/

html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address,
small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label,
input, textarea, option, .nobox {background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}

blockquote, q {quotes: none;}
br {height: 0;}
ul, ol, dl {list-style: none;}

/* Class for clearing floats */
.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}

/* 2. Define Base Typography
------------------------------------------------------------------------------*/

/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 {color: #464646; font-family: 'Old Standard TT', serif; font-weight: 700; text-transform: uppercase;}

/* Create the Default Paragraphs */
p {color: #4e4d56; font-size: 14px; line-height: 30px;}
li {color: #4e4d56;}

/* Specific Header Settings */
h1 {font-size: 54px; font-weight: 400;}
h2 {font-size: 24px; line-height: 30px;}
h3 {font-size: 20px; font-family: 'Montserrat', sans-serif;}
h4 {font-size: 16px; font-family: 'Montserrat', sans-serif; text-transform: none;}
h5 {font-size: 14px; font-family: 'Montserrat', sans-serif;}
h6 {font-size: 13px; font-family: 'Georgia', serif; color: #4e4d56; font-weight: normal; letter-spacing: .2em;}

/* Other Typo */
strong {font-weight: bold;}
hr {border:0 #c2c2c2 solid; border-top-width: 1px; clear: both; height: 0;}
ol {list-style: decimal;}
ul {list-style: disc;}
blockquote {border-left: 1px solid #aa0107; padding-left: 20px; font-family: 'Old Standard TT', serif; color: #4e4d56; font-weight: 700; font-size: 18px; line-height: 42px; letter-spacing: .025em;}

/* Google Fonts
font-family: 'Old Standard TT', serif;
font-family: 'Montserrat', sans-serif;
*/

/* Google Web Font Smoothing */
html, body, p, a, h1, h2, h3, h4, h5, h6 {-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

/* 3. Images
------------------------------------------------------------------------------*/

/* Remove border around linked images */
img {border: 0; border-style: none;}

/* 4. Links
------------------------------------------------------------------------------*/

/* Default Link Types */
a {color: #b00909; text-decoration: none;}
a:hover {color: #b00909; text-decoration: none;}
a:active {outline: none;}
a:focus {outline: none;}

/* 5. Forms
------------------------------------------------------------------------------*/

/* Removes fieldset borders. even on Opea 7 */
fieldset {border: 1px solid transparent;}

/* 6. Tables
------------------------------------------------------------------------------*/

/* Table Fixes */
table {border-spacing: 0; border-collapse: collapse;}
td {text-align: left; font-weight: normal;}

/* --- General Reset & Page Setup --- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    /* REMOVE: display: flex; */
    /* REMOVE: justify-content: center; */
    /* REMOVE: align-items: center; */
    min-height: 100vh;
}
			
.white_box {border: 1px solid #fff; padding: 10px;}
.black_box {border: 1px solid #000; padding: 10px;}
.purple_box {border: 1px solid #f0f; padding: 10px;}

/* This targets the list containing Entrepreneur, Defendant, and Father */
.highlights-list {
    margin-left: 30px;      /* Pushes the whole list to the right */
    list-style-type: disc;  /* Ensures your bullets are still visible */
}

.highlights-list li {
    margin-bottom: 15px;    /* Adds a little space between each point for readability */
    line-height: 1.6;       /* Makes the 603-page story description easier to scan */
}

/* Layout Wrapper */
.main-content-flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start; /* Aligns top of text with top of carousel */
    justify-content: center;
    gap: 50px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 20px;
}

.content-spacer {
    margin-top: 60px !important; /* Forces the margin regardless of other rules */
}

/* Ensure carousel doesn't take over the whole row */
.carousel-container {
    flex: 0 0 auto;
    margin: 0 !important; /* Overrides any previous centering margins */
}

/* Text Container Styling */
.carousel-description {
    flex: 1;
    max-width: 450px;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.carousel-description h3 {
    font-size: 2rem;
    color: #1e24be; /* Matching your video header color */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.carousel-description p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* Buy Button */
.buy-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #1e24be;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.buy-button:hover {
    background-color: #0056b3;
    text-decoration: none;
}
			
/* Tighten the logo container */
.header-image-container {
    position: relative; /* Changed from absolute to keep flow */
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0px; /* Removed the 20px gap */
    padding-bottom: 0;
    z-index: 50;
}

.header-image-container img {
    width: 343px;
    height: auto;
    display: block;
}

/* Target the Gray Man heading specifically */
.carousel-container h2 {
    margin-top: 0; /* Ensures the title doesn't push the carousel down */
    margin-bottom: 15px;
}			

@media (max-width: 768px) {
.video-section { flex-direction: column; }
}

/* NEW: Video Section Styles */
.video-section {
		/* Centers the section, similar to the carousel */
		max-width: 940px; 
		width: 80%; 
		margin: 40px auto; 
		display: flex; /* Enables Flexbox for side-by-side columns */
		justify-content: space-between; /* Pushes columns to the edges */
		gap: 20px; /* Space between the columns */
}
        
.video-column {
		flex: 1; /* Makes both columns take equal width */
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.video-column h3 {
		text-align: center;
		color: #007bff;
}

/* Responsive video embedding */
.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100) */
		height: 0;
		overflow: hidden;
}

.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
}

/* Mobile Responsiveness */
@media (max-width: 950px) {
	.main-content-flex {
		flex-direction: column;
		align-items: center;
	}

	.carousel-description {
		text-align: center;
		max-width: 90%;
	}
}

/* Remove the top gap from the carousel section */
.main-content-flex {
		margin: 40px auto;				/* Centers the container itself */
		margin-top: -50px;				/* Pulls the carousel up slightly */
		display: flex;
		align-items: flex-start;	/* Aligns them vertically in the middle */
		justify-content: center;	/* Centers the whole goup on the page */
		gap: 32px;								/* Space between carousel and text */
		max-width: 1200px;
		padding: 0 20px;
}

/* Adjusting your existing container to play nice with flex */
.carousel-container {
    margin: 0;               /* Remove the 'auto' margin so flex can control it */
    flex: 0 0 auto;          /* Prevents the carousel from shrinking */
}

/* Styling for the text on the right */
.carousel-description {
    flex: 1;									/* Keeps the text area flexible */
    max-width: 400px;					/* Keeps the text from getting too wide */
    margin-top: 60px;					/* Adjust this number (e.g., 50px, 60px) to lower it further */
    line-height: 1.6;
    text-align: left;
    color: #FFFFFF;						/* Matches your site theme */
}

/* Optional: Ensure the CTA button has a bit of space below the text */
.cta-area {
    margin-top: 25px;
}

@media (max-width: 768px) {
    .carousel-description {
        margin-top: 20px; /* Less space when stacked vertically */
    }
}

/* Responsive fix: Stack them on top of each other on mobile */
@media (max-width: 900px) {
    .main-content-flex {
        flex-direction: column;
        text-align: center;
    }
    .carousel-description {
        text-align: center;
    }
}

/* --- Carousel Container --- */
.carousel-container {
    width: 100%;
    max-width: 375px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
    
    /* ADD: Use margin auto to center the block element */
    margin-left: auto;
    margin-right: auto;
    
    /* Keep the top margin to clear the absolute-positioned image */
    margin-top: 60px;
}

/* --- Image Frame/Window --- */
.carousel-frame {
    /* This creates the viewing window for one image at a time */
    width: 100%;
    height: 529px; /* Fixed height for consistency */
    overflow: hidden; /* Crucial: Hides images outside the current view */
    position: relative;
    border-radius: 8px;
}

/* --- Image Track/Slider --- */
.carousel-track {
    /* Contains all the images */
    display: flex;
    width: fit-content; /* Allows the track to be wide enough for all images */
    height: 100%;
    /* The transition property is what makes the slide animation smooth */
    transition: transform 0.5s ease-in-out;
}

/* --- Individual Image Item --- */
.carousel-item {
    /* Each item is forced to the width of the frame */
    flex-shrink: 0; /* Prevents the items from shrinking */
    width: 375px; /* Use the same max-width as the container for full image fit */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-radius: 8px;
}

/* --- Navigation Buttons (Arrows) --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    z-index: 10;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* --- Controls (Start/Stop) --- */
.carousel-controls {
    text-align: center;
    padding: 15px 0 5px;
}

.carousel-controls button {
    background-color: #1e24be;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.carousel-controls button:hover {
    background-color: #0056b3;
}

/* Ensure the page takes up at least the full screen height */
html, body {
    height: 100%;
    margin: 0;
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Minimum height of 100% viewport height */
}

/* This pushes the footer to the bottom */
.main-content-flex {
    flex: 1 0 auto; 
    padding-top: 100px; /* Gives space for your absolute-positioned logo */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

/* 7. Framework
------------------------------------------------------------------------------*/

/* Page Layout */
html, body {height: 100%; font-size: 13px; font-family: 'Montserrat', sans-serif;}

/* Wrapper */
#wrapper {min-height: 100%; height: auto !important; margin:0 auto -220px;}
.container {position: relative; margin: auto;}
.center {width: 100%; text-align: center;}

/* Top Container */
#top_container {width: 100%; background: #2b325f; height: 36px; overflow: hidden;}
#top_navigation {width: 1000px; margin: 0 auto;}
#top_navigation ul {float: right; list-style: none; margin-right: 10px;}
#top_navigation ul li {display: inline-block;}
#top_navigation ul li a {color: #c2c2c2; display: inline-block; padding: 5px 17px; font-size: 16px; text-transform: uppercase;}
#top_navigation ul li a:hover {background: #2b325f;}
#top_navigation ul li a.active {background: #2b325f;}

/* Header */
header {width: 100%; min-width: 1080px; height: 72px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; background: #2b325f;}
header .container {width: 1000px;}
header .brand {position: absolute; top: 20px; left: 4px;}
header .brand img {position: relative; z-index: 999;}
header nav {position: absolute; top: 0; right: 0;}
header nav ul li {list-style: none; float: left; border-left: 1px solid #6c0508; display: inline-block; position: relative;}
header nav ul li a {display: inline-block; padding: 0 20px; line-height: 90px; color: #c2c2c2; font-size: 14px; text-transform: uppercase; letter-spacing: .1em;}
header nav ul li a:hover, header nav ul li a.active {color: #fff;}
header nav ul li #nav_donate {background: #2b325f; font-weight: 700; font-size: 15px;}
.mobile_menu_icon{ display: none;}
header nav ul li:hover ul {display: block;}
header nav ul li ul li {display: block; border-left: none; float: none;}
header nav ul li ul li a {padding: 5px 0; line-height: 20px; color: #2b325f; font-size: 14px; font-family: 'Montserrat', sans-serif;}
header nav ul li ul li a:hover {color: #b20107;}
header nav ul li ul li a.active {color: #b20107;}
header nav ul li.mobile_only {display: none;}

/* Home */
.hero {width: 100%; min-width: 1080px; height: 680px; position: relative; overflow: hidden; background: #000;}

.hero .hero_message {padding-top: 40px; width: 531px; height: 244px; background: url(https://www.endlessvisions.net/images/white_rect_one.png) 0 0 no-repeat; position: absolute; bottom: 50px; left: 20px; margin-left: 0; text-align: center; z-index: 300;}

.hero .hero_message h1 {font-family: 'Montserrat', sans-serif; font-size: 40px; letter-spacing: .2em; color: #fff; line-height: 50px;}
.hero .hero_message h1 span {font-family: 'Old Standard TT', serif; font-weight: 400; font-size: 90px; display: block; padding: 25px 0; letter-spacing: 0em;}
.hero .hero_image {width: 100%; min-width: 1080px; height: auto;}
.hero .hero_image img {min-width: 100%; min-height: 680px;}

.newsletter {width: 100%; min-width: 1080px; height: 70px; padding-top: 10px; border-top: 4px solid #fff; border-bottom: 4px solid #fff; background: #2b325f; text-align: center;}
.newsletter .newsletter_item {display: inline-block; vertical-align: middle; margin-left: -4px;}
.newsletter .newsletter_item input[type=email] {padding: 0 35px; height: 80px; width: 295px; background: #101a1f; font-family: 'Old Standard TT', serif; font-style: italic; color: #fff; font-size: 18px;}
.newsletter .newsletter_item.title {text-align: right; margin-right: 55px;}
.newsletter .newsletter_item.title h3 {color: #fff; line-height: 60px;}

#root_left {width: 640px; float: left;}
#root_right {width: 430px; float: right;}

#root_left1 {width: 100%; float: left;}
#root_right1 {width: 100%; float: right;}

#text_root {text-align: center; margin-bottom: 40px;}
#text_root span {color: #b00909}

.media_bkg {
		background-color: #f4f4f9;	/* Screen Gray */
/*	
		background: url(https://www.endlessvisions.net/images/matte_rect_one.jpg);
*/
}

.media {width: 100%; min-width: 1080px; padding: 45px 0 55px 0; background: url(https://www.endlessvisions.net/images/matte_rect_one.jpg); border-top: 1px solid #c2c2c2; border-bottom: 1px solid #c2c2c2;}
.media .container {width: 1080px;}

.media h5 {text-align: center; color: #b20107; letter-spacing: .2em; margin-bottom: 30px;}
.media h5:before {content: ''; background: url(https://www.endlessvisions.net/images/triplestar.png) no-repeat; width: 38px; height: 11px; display: inline-block; margin-right: 15px;}
.media h5:after {content: ''; background: url(https://www.endlessvisions.net/images/triplestar.png) no-repeat; width: 38px; height: 11px; display: inline-block; margin-left: 15px;}
.media .press {text-align: center; margin-bottom: 40px;}
.media .press img {max-width: 100%;}

.media .press .press_item {padding: 20px; background: #fff; vertical-align: top; display: inline-block; width: 265px; text-align: left; margin: 0 4px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}
.media .press .press_item p, .press .main .press_item p {letter-spacing: -.02em; line-height: 28px; margin-bottom: 10px;}
.media .press .press_item h6, .press .main .press_item h6 {text-align: center; margin-bottom: 20px;}
.media .press .press_item h2, .press .main .press_item h2 {margin-bottom: 5px;}
.media .press .press_item h2 a, .press .main .press_item h2 a {color: #464646;}
.media .press .press_item h2 a:hover, .press .main .press_item h2 a:hover {color: #b00909;}

.media .press .press_item1 {padding: 20px; background: #fff; vertical-align: top; display: inline-block; width: 400px; text-align: left; margin: 0 4px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}
.media .press .press_item2 {padding: 20px; background: #fff; vertical-align: top; display: inline-block; width: 100%; text-align: left; margin: 0 4px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}

.media .multimedia {}
.media .multimedia iframe {max-width: 100% !important; width: 100% !important;}
.media .multimedia img {max-width: 100% !important; width: 100% !important;}

.media .releases {text-align: center;}
.media .releases2 {text-align: left;}

.media .releases .release_item {padding: 20px; background: #fff; vertical-align: top; display: block; width: 580px; text-align: left; margin: 20px 10px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}

.media .releases .release_item p, .releases .main .release_item p {letter-spacing: -.02em; line-height: 24px; margin-bottom: 10px;}
.media .releases .release_item h6, .releases .main .release_item h6 {text-align: center; margin-bottom: 20px;}
.media .releases .release_item h2, .releases .main .release_item h2 {margin-bottom: 5px;}
.media .releases .release_item h2 a, .releases .main .release_item h2 a {color: #464646;}
.media .releases .release_item h2 a:hover, .releases .main .release_item h2 a:hover {color: #b00909;}
.releases .main .release_item img {max-width: 100%;}

/* About */
.about .top {width: 100%; min-width: 1080px; padding: 35px 0; background: url(https://www.endlessvisions.net/images/matte_rect_one.jpg); border-top: 1px solid #c2c2c2; border-bottom: 1px solid #c2c2c2;}
.about .top .container, .about .main .container {width: 730px;}
.about .main {padding: 40px 0;}
.about .main p {margin-bottom: 40px;}
.about .main .two_col_img {display: inline-block; margin: 0 5px 40px 5px;}
.about .main .full_img {width: 100%; min-width: 1080px; margin-bottom: 40px;}

/* Press */
.press .main .container {width: 960px;}
.press .main {background: url(https://www.endlessvisions.net/images/matte_rect_one.jpg); padding: 50px 0; border-top: 1px solid #c2c2c2;}
.press .main .press_item {overflow: hidden; background: #fff; padding: 20px 25px 40px 25px; margin-bottom: 25px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}
.press .main .press_item.entry {padding: 0; position: relative;}
.press .main .press_item.entry h1 {font-size: 24px; line-height: 30px; margin-bottom: 15px; font-weight: 700;}
.press .main .press_item.entry .content {padding: 20px 25px 40px 25px;}
.press .main .press_item.entry .content p {margin-bottom: 20px;}
.press .main .press_item.entry .content ul {margin-bottom: 20px; padding-left: 20px;}
.press .main .press_item.entry .content ul li {margin-bottom: 5px; color: #4e4d56; font-size: 14px; line-height: 28px;}
.press .main .press_item.entry .content table {width: 100%; border-collapse: collapse;}
.press .main .press_item.entry .content tr td {padding: 8px;}
.press .main .press_item.entry .content tr:nth-of-type(even) {background: #eee;}
.press .main .press_item.entry .content ol {margin-bottom: 20px; padding-left: 20px;}
.press .main .press_item.entry .content ol li {margin-bottom: 10px; color: #4e4d56; font-size: 14px; line-height: 28px;}
.press .main .press_item iframe {width: 100% !important; max-width: 100% !important; min-height: 350px;}
.press .main .press_item img {max-width: 100% !important;}
.press .main .press_item.entry .share {padding: 20px; border-top: 1px solid #cccccc;}
.press .pagination {border-top: 1px solid #cccccc; margin: 65px 0 20px 0; text-align: center;}
.press .pagination ul li {display: inline-block; vertical-align: middle;}
.press .pagination ul li a {display: inline-block; padding: 25px 15px 0 15px; font-size: 16px;}
.press .pagination ul li .page-active {color: #959595; border-top: 1px solid #959595;}
.press .pagination ul li .page-next, .press .pagination ul li .page-prev {font-size: 24px; line-height: 14px;}

.press .main .container_left {width: 620px; float: left;}
.press .main .container_right {width: 320px; float: right;}
.press .main .container_right .nav_section {background: #fff; padding: 20px 25px 40px 25px; margin-bottom: 25px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}
.press .main .container_right .nav_section h5 {text-align: center; color: #b20107; letter-spacing: .2em; margin-bottom: 30px;}
.press .main .container_right .nav_section h5:before {content: ''; background: url(https://www.endlessvisions.net/images/triplestar.png) no-repeat; width: 38px; height: 11px; display: inline-block; margin-right: 15px;}
.press .main .container_right .nav_section h5:after {content: ''; background: url(https://www.endlessvisions.net/images/triplestar.png) no-repeat; width: 38px; height: 11px; display: inline-block; margin-left: 15px;}
.press .main .container_right .nav_section ul {list-style: none;}
.press .main .container_right .nav_section ul li {margin-bottom: 20px; font-size: 18px; text-transform: uppercase; font-family: 'Old Standard TT', serif; font-weight: bold;}
.press .main .container_right .nav_section ul li a {color: #464646; }
.press .main .container_right .nav_section ul li a.active {color: #b00909; }

#aSelect span.customSelect {width: 100%; font-size: 14px; background-color: #ebebeb; color: #464646; padding: 10px; width: 50%; border:1px solid #e1e1e1;}
#aSelect span.customSelect.changed {}

#event_form .event_form_item span.customSelect {width: 100%; font-size: 14px; background-color: #ebebeb; color: #464646; padding: 10px; width: 80%; border:1px solid #e1e1e1;}
#event_form .event_form_item span.customSelect.changed {}
#event_form .small_select span.customSelect {width: 100%; font-size: 14px; background-color: #ebebeb; color: #464646; padding: 10px; width: 60px; border:1px solid #e1e1e1;}
#event_form .small_select span.customSelect.changed {}

span.text-error {color: red; line-height: 16px; font-size: 12px;}

/* Root Calls */
#root_call_bar {background: #fff; padding: 40px 0 20px; margin-bottom: 30px; text-align: center;}
.root_call {width: 300px; margin: 0 30px 20px; display: inline-block; vertical-align: top;}
.root_call_button {margin: 0 auto; width: 90%;}
#root_call_bar a.button {background: #9e0b0f; display: block; width: auto; padding: 0; padding: 10px; margin: 0 auto; color: #fff; text-transform: uppercase; font-size: 17px; font-family: 'Montserrat', sans-serif; -webkit-appearance: none; border-radius: 0;}
#root_call_bar a.button:hover {cursor: pointer; background: #FFF; border: 1px solid #b20107; color: #b20107;}

/* Releases */
.releases .main .container {width: 960px;}
.releases .main .container_left {width: 620px; float: left;}
.releases .main .container_right {width: 320px; float: right;}
.releases .main .container_left .content ul {margin-bottom: 20px; padding-left: 20px;}

.releases .main {background: url(https://www.endlessvisions.net/images/matte_rect_one.jpg); padding: 50px 0; border-top: 1px solid #c2c2c2;}
.releases .main .release_item {background: #fff; padding: 20px 25px 40px 25px; margin-bottom: 25px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}
.releases .main .release_item.entry {padding: 0;}
.releases .main .release_item.entry h1 {font-size: 24px; line-height: 30px; margin-bottom: 15px; font-weight: 700;}
.releases .main .release_item.entry .content {padding: 20px 25px 40px 25px;}
.releases .main .release_item.entry .content p {margin-bottom: 20px;}
.releases .main .release_item iframe {width: 100% !important; max-width: 100% !important; min-height: 350px;}
.releases .main .release_item.entry .share {padding: 20px; border-top: 1px solid #cccccc;}
.releases .pagination {border-top: 1px solid #cccccc; margin-top: 65px; text-align: center;}
.releases .pagination ul li {display: inline-block; vertical-align: middle;}
.releases .pagination ul li a {display: inline-block; padding: 25px 15px 0 15px; font-size: 16px;}
.releases .pagination ul li .page-active {color: #959595; border-top: 1px solid #959595;}
.releases .pagination ul li .page-next, .press .pagination ul li .page-prev {font-size: 24px; line-height: 14px;}
.releases .main .container_right .nav_section {background: #fff; padding: 20px 25px 40px 25px; margin-bottom: 25px; -webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5); box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);}
.releases .main .container_right .nav_section h5 {text-align: center; color: #b20107; letter-spacing: .2em; margin-bottom: 30px;}
.releases .main .container_right .nav_section h5:before {content: ''; background: url(https://www.endlessvisions.net/images/triplestar.png) no-repeat; width: 38px; height: 11px; display: inline-block; margin-right: 15px;}
.releases .main .container_right .nav_section h5:after {content: ''; background: url(https://www.endlessvisions.net/images/triplestar.png) no-repeat; width: 38px; height: 11px; display: inline-block; margin-left: 15px;}
.releases .main .container_right .nav_section ul {list-style: none;}
.releases .main .container_right .nav_section ul li {margin-bottom: 20px; font-size: 18px; text-transform: uppercase; font-family: 'Old Standard TT', serif; font-weight: bold;}
.releases .main .container_right .nav_section ul li a {color: #464646; }
.releases .main .container_right .nav_section ul li a.active {color: #b00909; }

#media_request label.error {display: block; color: red;}

/* Footer Push */
#push {height: 220px;}

footer {
	width: 100%;
	min-width: 1080px;
	height: 360px;
	background-color: #1e24be; /* Deep Navy Blue */
	text-align: center;
	position: relative;
}

footer {
    margin-top: 24px; /* This is approximately 1/4 inch */
    padding-bottom: 40px; 
    clear: both;
}

.footer2 {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin-top: 24px; 
    border-top: 1px solid #2b324f; /* Slightly lighter blue for the border */
    color: #FFFFFF; /* Ensures text stays white */
    font-size: 0.9em;
}

/* Footer */
#web_developer {text-indent: -9999px; display: block;}
footer {width: 100%; min-width: 1080px; height: 120px; background: #2b325f; text-align: center; position: relative;}
footer p {font-family: 'Georgia', serif; line-height: 15px; padding-top: 2px; color: #fff; font-size: 14px;}
footer a {font-family: 'Georgia', serif; color: #fff; font-size: 14px;}
footer a:hover {font-family: 'Georgia', serif; color: #717171; font-size: 14px;}
.social {width: 100%; min-width: 1080px; height: 76px; background: #820408; border-bottom: 4px solid #fff;}
#credits {position: absolute; bottom: 10px; right: 10px;}
#credits span {font-size: 10px; color: #fff;}

/* Empty */
.empty .main .container {width: 960px;}
.empty .main {padding: 40px 0;}
.empty .main p {margin-bottom: 40px;}

@media only screen and (min-width: 1025px) and (max-width: 1079px)/* for all screen larger then 1200px (devices and browsers) */ {

    /* Home */
    header{ min-width: inherit;}
    #top_navigation { width: 96%;}
    .hero{ min-width: inherit;}
    .newsletter{ min-width: inherit; }
    .media{ min-width: inherit; }
    .twitter_posts{ min-width: inherit; }
    footer{ min-width: inherit; }
    .hero .hero_image{ min-width: inherit;}
    .internal .banner{ min-width: inherit;}
    .internal .banner .banner_message{ min-width: inherit;}
    .about .top{ min-width: inherit;}
    .about .main .full_img{ min-width: inherit;}
    .social{ min-width: inherit;}

}

@media only screen and (min-width: 768px) and (max-width: 1024px)/* for all device larger then 768px (devices and browsers) */ {

    /* Home */
    header{ min-width: inherit;}
    #top_navigation { width: 96%;}
    .hero{ min-width: inherit; height: auto;}
    .newsletter{ min-width: inherit; }
    .media{ min-width: inherit; }
    .twitter_posts{ min-width: inherit; }
    footer{ min-width: inherit; }
    header .container{ width: 96%;}
    .hero .hero_image{ min-width: inherit;}
    .media .container{ width: 96%;}
	#root_left {width: 59%; float: left;}
  #root_right {width: 40%; float: right;}
    .media .multimedia img{ max-width: 100%;}
    .media .press .press_item{ padding: 20px 2% 50px; width: 43%; margin: 0 1%;}
    .media .press .press_item h2, .press .main .press_item h2{ font-size: 18px; line-height: 26px;}
    .media .releases .release_item{ padding: 20px 2% 50px; width: 94%; margin: 0 1% 10px;}
    .media .releases .release_item h2, .press .main .press_item h2{ font-size: 18px; line-height: 26px;}
    .twitter_posts .twitter_item{ padding: 0 2% 35px; width: 45%; vertical-align: top;}
    .social{ min-width: inherit;}
    .social .social_item{ width: 18%; padding-left: 6%;}
    header nav ul li a{ padding: 0 15px;}
    .hero .hero_image img{ max-width: 100%; min-height: inherit; display: block;}
    .hero .hero_message{ bottom: 10%;}

    /* About */
    .internal .banner{ min-width: inherit;}
    .internal .banner .banner_message{ min-width: inherit;}
    .about .top{ min-width: inherit;}
    .about .main .full_img{ min-width: inherit;}
    .social{ min-width: inherit;}
    .about .main .two_col_img{ max-width: 48%;}
    .internal .banner .banner_image{ min-width: inherit;}

}
@media screen and (max-width: 600px){
    .hero .hero_message {display: none;}
}
@media screen and (max-width: 620px){
	.gallery_block a {width: 180px;}
}
@media screen and (max-width: 960px){
	 /* Press */
    .press .main, .empty .main{ padding: 30px 0;}
    .press .main .container, .empty .main .container{ width: 92%;}
    .press .main .container_left {width: 65%; float: left;}
	  .press .main .container_right {width: 30%; float: right;}
    .releases .main .container_left {width: 65%; float: left;}
	  .releases .main .container_right {width: 30%; float: right;}
	  .releases .main .container {width: 92%;}
    .issue_item {width: 42%; margin: 1%; padding: 2%;}
    .states_item {width: 42%; margin: 1%; padding: 2%;}
    .event_item {width: 42%; margin: 1%; padding: 2%;}
}

@media screen and (max-width: 880px)/* max-width 767px, Only for mobile device */{
    header{ min-width: inherit; border: none; height: 65px;}
    header::after{background: none; content: ""; display: block; height: auto; left: auto; position: relative; top: auto; width: auto;}
    header .container{ width: 100%;}
    #top_container {display: none;}
    header .brand{ width: 150px; top: 15px; left: 4%;}
    header .brand img{ max-width: 100%;}
    header nav{ display: none; width: 100%; top: 65px; background: #820408; z-index: 999;}
	  header nav ul li.mobile_only {display: block;}
    header nav ul li{ float: none; border-bottom: 1px solid #6c0508; border-left: none; display: block}
    header nav ul li a{ padding: 0 15px; display: block; line-height: 40px; color: #fff;}
    .newsletter .newsletter_item.title h3{ line-height: normal;}
    header .brand::after{ left: 0; width: 100%; display: none;}
    header nav ul li #nav_donate{ font-family: "Montserrat",sans-serif;}

		.mobile_menu_icon {
				background-color: #333333; /* Dark grey background */
				padding: 10px;             /* Space around the icon */
				border-radius: 5px;        /* Optional: rounded corners */
		}

		.mobile_menu_icon {
				color: #820408;				/* Modified #ffffff */
				display: block;
				float: right;
				font-size: 14px;
				font-weight: 400;
				height: 32px;
				margin: 0;
				padding: 0;
				position: absolute;
				right: 4%;
				top: 10px;
				width: 32px;
				z-index: 9;
				}
				
    .mobile_menu_icon:hover {
				color: #1e24be !important;
				text-decoration: none;
				}
				
    .mobile_menu_icon.active {
				color: #ffefff !important;
				}

		/* This targets the middle bar */
		.mobile_menu_icon span, 
		.mobile_menu_icon span::before, 
		.mobile_menu_icon span::after {
				background-color: #ff0000; /* Change this to your preferred hex code */
}


    .mobile_menu_icon span {position: absolute; top: 50%; left: 0; display: block; padding: 0; width: 32px; height: 4px; background-color: #fff; font-size: 0px; -webkit-touch-callout: none;
        -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;}
    .mobile_menu_icon span:after {position: absolute; left: 0px; width: 100%; height: 100%; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: 0;}
    .mobile_menu_icon span:before{position: absolute; left: 0px; width: 100%; height: 100%; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: 0;}
    .mobile_menu_icon span:after { -webkit-transform: translateY(250%); transform: translateY(250%);}
    .mobile_menu_icon span:before {-webkit-transform: translateY(-250%); transform: translateY(-250%);}
    .mobile_menu_icon.active span{-webkit-background: none; 	-moz-background: none; 	-ms-background: none; 	-o-background: none;	background: none;}
    .mobile_menu_icon.active span:before{-webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background: #fff;}
    .mobile_menu_icon.active span:after{-webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); top: 0; background: #fff;}
    header nav ul li a.active{ background: #720000; color: #fff !important;}

    header nav ul li ul {display: none;}
    header nav ul li:hover ul {display: none;}

	#state_form_wrapper {width: 100%; margin: 0 auto; padding: 40px;}
	#state_form {background: #fff; position: relative; padding:  20px 10px; width: 80%; border: 1px solid #484848; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);}

}

@media screen and (max-width: 767px)/* max-width 767px, Only for mobile device */{

    /* Home */
    .internal .banner {overflow: visible;}
    .hero{ min-width: inherit; height: auto; min-height: 180px;}
    .newsletter{ min-width: inherit; height: auto; padding: 20px 0; border: none;}
    .newsletter .newsletter_item.title{ margin-right: 0; text-align: center; margin-bottom: 5px; margin-left: 0; display: block;}
    .media{ min-width: inherit; padding: 30px 0 30px;}
    .twitter_posts{ min-width: inherit; padding: 90px 0 30px 0;}
    .twitter_posts .twitter_item p{ font-size: 16px; line-height: 24px; margin-bottom: 10px;}
    footer{ min-width: inherit;}
    .hero .hero_image{ min-width: inherit;}
    .media .container{ width: 92%;}

    .media .multimedia img{ max-width: 100%;}
    .media .press .press_item{ padding: 4%; width: 92%; margin: 0 0 20px 0; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);}
    .media .press .press_item h2, .press .main .press_item h2{ font-size: 18px; line-height: 26px;}

    .media .releases .release_item { padding: 4%; width: 92%; margin: 0 0 20px 0; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);}
    .media .releases .release_item h2, .press .main .release_item h2{ font-size: 18px; line-height: 26px;}


    .twitter_posts .twitter_item{ padding: 0 4% 20px; width: 41%; vertical-align: top;}
    .social{ min-width: inherit; height: auto; border: none;}
    .social .social_item{ width: 24%; padding-left: 0; height: 55px; font-size: 0px; line-height: 0px; text-indent: -999em; background-position: center center !important; vertical-align: top;}
    .hero .hero_image img{ max-width: 100%; min-height: inherit; display: block;}
    .hero .hero_message{ bottom: 4%; margin-left: 0; left: 4%; width: 92%; background-size: 100% 100%; height: calc(100% - 66px); padding: 20px 0; }
    .hero .hero_message h1{ font-size: 20px; line-height: 45px;}
    .hero .hero_message h1 span{ font-size: 50px; padding: 0;}
    footer p{ line-height: 24px; padding: 10px 0;}
    .cycle-slideshow{ height: 100%;}

    #popup_form{ padding: 20px 4%; width: 84%;}
    #popup_top h2{ background: none; font-size: 26px;}
    #popup_top h2 span{ background: none;}
    #popup_top h3{ font-size: 16px;}
    #popup_form_items .dform_label{ margin-top: 0;}
    #popup_form_items .dform_element{ padding: 0; margin: 5px 0 5px;}
    #popup_form_items input.submit{ padding: 8px 30px; font-size: 16px; -webkit-appearance: none; border-radius: 0;}
    #popup_form_items input.submit:hover{ background: #9e0b0f; border: 1px solid #e1e1e1; color: #fff;}
    #popup_form_items input[type="text"]{ width: 90%;}
    #popup_form_items input[type="email"]{ width: 90%;}
    #popup_form_items .column{ width: 49% !important; margin-right: 2%;}
    #popup_form_items .column.column-last{ margin-right: 0;}

    /* About */
    .internal .banner{ min-width: inherit; height: auto;}
    .internal .banner .banner_message h4{ font-size: 14px;}
    .internal .banner .banner_message{ min-width: inherit;  height: auto; padding-top: 6%;}
    .internal .banner .banner_message h1{ font-size: 20px; margin-bottom: 0;}
    .about .top{ min-width: inherit; padding: 20px 0;}
    .about .main .full_img{ min-width: inherit; margin-bottom: 10px;}
    .social{ min-width: inherit;}
    .about .main .two_col_img{ max-width: 92%; margin: 0 5px 20px;}
    .about .top .container, .about .main .container, .empty .main .container{ width: 92%;}
    blockquote{ border-left: none; padding-left: 0; line-height: 24px; font-size: 14px;}
    .about .main{ padding: 30px 0;}
    .about .main p{ margin-bottom: 10px; line-height: 24px;}
    .empty .main{ padding: 30px 0;}
    .empty .main p{ margin-bottom: 10px; line-height: 24px;}

    /* Press */
    .press .main{ padding: 30px 0;}
    .press .main .container{ width: 92%;}
    .press .main .container_left {width: 100%; float: none;}
	  .press .main .container_right {width: 100%; float: none;}
    .releases .main .container_left {width: 100%; float: none;}
	  .releases .main .container_right {width: 100%; float: none;}

    .press .main .press_item.entry .content img{ max-width: 100%;}
    .press .main .press_item{ box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.5);}
    .press .main .press_item.entry h1{ font-size: 18px; line-height: 26px;}
    .internal .banner .banner_message h2{ font-size: 18px;}

    .issue_item {display: block; width: 80%;margin: 0 auto 10px; padding: 20px;}
    .states_item {display: block; width: 80%;margin: 0 auto 10px; padding: 20px;}
    .event_item {display: block; width: 80%;margin: 0 auto 10px; padding: 20px;}

    /* Contact */
    .contact .main .container{ width: 92%;}
    .contact .main{ padding: 30px 0;}
    .contact .main p{ margin-bottom: 10px; line-height: 24px;}
    .contact div.fancy-select div.trigger{ width: 95%; padding: 11px 2% 11px 2%;}
    .contact #forms_field_13 .dfcolumns .column.sortable{ width: 100% !important;}
    .contact div.fancy-select{ margin-right: 0;}
    .contact div.fancy-select ul.options{ width: 99%;}
    .contact input[type="email"], .contact input[type="text"]{ height: 33px;}
    .dftop_label .dform_label{ margin: 5px 0 4px;}
    .contact input[type="submit"]{ padding: 8px 25px; font-size: 16px; margin: 5px auto;}
    .contact textarea{ height: 100px;}

    .internal .banner .banner_image {min-width: inherit;}
    .internal .banner .banner_image img{ min-height: inherit; max-width: 100%;}

    .press .main .press_item iframe {width: 100% !important; max-width: 100% !important; min-height: 0;}
    .contact .fancy-select {width: 94% !important;}
    #state_form_top h2 {font-size: 30px;}
    #state_form_top h3 {font-size: 22px;}
    .election_column {width: 90%;}
}

@media screen and (max-width: 480px)/* max-width 480px, Only for mobile device */{

    .hero .hero_message {display: none;}
    .hero .hero_message h1 span{ font-size: 30px;}
    .hero .hero_message h1{ line-height: 33px; font-size: 18px;}
    .media .press .press_item{ margin: 0 0 10px 0; width: 91%;}
    .twitter_posts .twitter_item{ width: 92%; margin-bottom: 20px;}

	.newsletter .newsletter_item.title {display: block; margin-bottom: 15px}
    .newsletter .newsletter_item {display: block; margin-bottom: 15px;}
    .newsletter .newsletter_item a {display: block; margin: 0 auto;}

    /* About */
    .internal.about .banner .banner_message{ padding-top: 3%;}
    .internal .banner .banner_message h1{ font-size: 18px;}
    .internal .banner .banner_message h4{ font-size: 12px;}

    #popup_form {margin: 50px auto;}
    #popup_top h2 {background: none; font-size: 30px;}
    #popup_top h2 span {background: none; display: inline; border-bottom: 1px solid #caab68;}
    #popup_top h3 {font-size: 22px; margin-bottom: 0;}
    #popup_form_items .column {float: none; width: 100% !important;}
    .contact .column {float: none; width: 100% !important;}
    #popup_form_items input[type="text"] {background: #ebebeb; border: 1px solid #e1e1e1; padding: 5%; width: 90%;}
    #popup_form_items input[type="email"] {background: #ebebeb; border: 1px solid #e1e1e1; padding: 5%; width: 90%;}
    #popup_form_items span.customSelect {width: 90%;}