/*
 Theme Name:   1905 New Media
 Theme URI:    https://1905newmediacom
 Description:  Child theme for GeneratePress with Case Studies CPT and developer-specific stylesheets
 Author:       1905 New Media
 Author URI:   https://1905newmediacom
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  1905-new-media
*/

/* Keep this file minimal. Use _kyle.css, _todd.css, and _graeme.css for actual work. */

/* Removes margin above the footer */



/* Subpage Header - Sticky */
.sticky-subpage-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff; 
    min-height: 100px;
}
.gb-menu-item-mif82a66 .gb-menu-link {
  padding: 1em 26px;
  text-transform: uppercase;
}
.gb-menu-item-mif82a66:last-child  .gb-menu-link {
  padding-right: 0 !important;
}
/* Subpage Header END */

.h1 {
	font-weight: 400;
    text-transform: uppercase;
    font-style: normal;
    font-size: 36px;
    letter-spacing: 2.16px;
    line-height: normal;
}
/* remove home nav temporarily */
.home .main-navigation {
  display: none;
}

/* Newsletter Form Styling */
body .gform_wrapper .gfield_label {
   margin-top: 10px;
      font-weight: 700;
  letter-spacing: 0.96px;
}

body .gform_wrapper #gform_submit_button_1 {
       font-weight: 700;

}

body .gform_wrapper #gform_submit_button_1:hover  {
       background-color: #007E8D;

}
/* Newsletter Form Styling END */

/* Contact Us Page Styles */
.short-separator {
    width: 24px !important;
    border-top: 1px solid #13273F;
    margin: 10px 0 20px 0; 
}
.contact-info-column {
  padding: 37px 31px 0 31px; 
  max-height: 535px !important;
  width: 288px !important;
}
.contact-info-column p, 
.contact-info-column a {
  font-size: 16px !important;
}
.center-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* COntact Us END */

/* Mobile Footer Columns */

/* On desktop, keep the columns side by side */
@media (min-width: 768px) {
    .custom-container {
        display: flex; /* Use Flexbox for the container */
        justify-content: space-between; /* Space columns evenly */
    }

    .custom-container .column-1,
    .custom-container .column-2 {
        width: 48%; /* Adjust the width of the columns */
    }
}

/* On mobile, stack the columns and swap their order */
@media (max-width: 767px) {
    .custom-container {
        display: flex; /* Stack the columns vertically using Flexbox */
        flex-direction: column; /* Stack columns on top of each other */
    }

    .custom-container .column-1,
    .custom-container .column-2 {
        width: 100%; /* Make each column full width */
    }

    /* Swap the order: move column-2 above column-1 */
    .custom-container .column-1 {
        order: 2; /* Put column-1 below */
    }

    .custom-container .column-2 {
        order: 1; /* Put column-2 above */
    }

/* Mobile Accordion Section Pattern */

.gb-element-285721cf {
  background: url() top right / auto no-repeat, linear-gradient(to right, #01508c 0%, #13273f 100%) !important;
}

/* Mobile Accordion Section Pattern END*/
}

/* Email Marketing Services */

.wp-container-core-columns-is-layout-9d6595d7 li {
  margin-bottom: 20px !important;
}

.column-list {
  margin: 0;
}

.gb-element-338220fd h2 {
  margin-bottom: 8px;
}

.gb-element-338220fd h3 {
  margin-bottom: 30px;
}

.gb-element-338220fd p {
  margin-bottom: 20px;
}

.wp-container-core-columns-is-layout-9d6595d7 li:last-child {
  margin-bottom: 0 !important;
}

/*Email Marketing Services END *?


/* Accordion Section Pattern */

.gb-element-285721cf {
  background: url(https://onmediadev.wpenginepowered.com/wp-content/uploads/2025/07/Rectangle-10.svg) top right / auto no-repeat, linear-gradient(to right, #01508c 0%, #13273f 100%);
}

.gb-accordion__toggle {
  align-items: end;
}

.gb-element-d2423e55 .wp-container-core-columns-is-layout-9d6595d7 {
  margin-bottom: 0;
}

.gb-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}

.gb-accordion__item-open .gb-accordion__content {
  max-height: 500px;
  opacity: 1;
}

/* Accordion Section Pattern END*/

/* Social Media Marketing */

.col-content-right {
  display: flex;
  flex-direction: column; 
  justify-content: center;
}

.col-img-right {
  display: flex;
  flex-direction: column; 
  justify-content: center;
}

/* .custom-block-list li::marker, .custom-block-list strong {
  color: #EA9216 !important;
} */

.custom-block-list li {
  margin-bottom: 5px !important;
}

.custom-block-list {
  margin-left: 30px !important;
}

/* Social Media Marketing END */


/*    Homepage Flyout Menu Spirograph Animation    */



:root {
    --X: 28deg;
    --Y: 148deg;
    --Z: 0deg;
    --S1: 40s;
    --S2: 50s;
    --S3: 60s;
    --O1: 0.2;
    --O2: 0.4;
    --O3: 0.6;
    --XO: -510px;
    --YO: -20px;
    --XO2: -520px;
    --YO2: -35px;
}

.spiral-placeholder {
	position:absolute; 
	top:150px;
	z-index: -1;
}

.spiro {
    position:absolute; right:0; overflow:hidden; top: -500px;
    overflow: hidden !important;
    transform: perspective(800px) scale(0.9) rotateX(var(--X)) rotateY(var(--Y)) rotateZ(var(--Z));
}
.spiro2 { 
	transform: perspective(800px) scale(0.75) rotateX(var(--X)) rotateY(var(--Y)) rotateZ(var(--Z)); top: var(--XO); right: var(--YO);
}
.spiro3 { 
	transform: perspective(800px) scale(0.6) rotateX(var(--X)) rotateY(var(--Y)) rotateZ(var(--Z)); top: var(--XO2); right: var(--YO2);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spiro1 img {
    height: 50%;
    animation-name: rotate;
    animation-duration: var(--S1); 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.01s;

    /*-webkit-animation-name: rotate;
    -webkit-animation-duration: var(--S1);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0.01s;*/

    opacity: var(--O1);
}

.spiro2 img {
    height: 50%;
    animation-name: rotate;
    animation-duration: var(--S2); 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.01s;

    /*-webkit-animation-name: rotate;
    -webkit-animation-duration: var(--S2);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;   
    -webkit-animation-delay: 0.01s; */
    opacity: var(--O2);
}

.spiro3 img {
    height: 50%;
    animation-name: rotate;
    animation-duration: var(--S3); 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.01s;

    /*-webkit-animation-name: rotate;
    -webkit-animation-duration: var(--S3);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0.01s;*/

    opacity: var(--O3);
}

.subpage-spiro-container {
	position:absolute;
	width:61vw;
	z-index: 1000; 
	left: 290px;
	height:500px;
	overflow:hidden;
	top:130px;
}

.subpage-spiro-container .spiral-placeholder {
	top:0;
	width: 700px;
	overflow:visible;
	position:absolute;
	right:0;
}


/*@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {}*/
@supports selector(:nth-child(1 of x)) {
  /* Your Safari-specific styles here */
	
	.subpage-spiro-parent {
		overflow:hidden;
		position:relative;
	}
	.subpage-spiro-container {
		position: absolute;
		width: 77vw;
		z-index: 1000;
		left: 290px;
		height: 190px;
		overflow: visible;
		top: 0px;
	}
	
	.subpage-spiro-container .spiral-placeholder {
		top: -232px;
		width: 100%;
		overflow: visible;
	}
	.subpage-spiro-container .spiral-placeholder .spiro {
		overflow:visible !important;
	}
}

/* Spirograph Animation END */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  .subpage-spiro-container .spiral-placeholder {
    top: 250px;
    width: 900px;
    overflow: visible;
	  position:absolute;
	  right:0;
  }
}


@media (max-width: 768px) {
  .gb-element-111956b5 {
  	background-image: none !important;
  }
}