/* ------- Fonts ------- */
@font-face { 
  font-family: AppleGaramond;
  src: url('../fonts/AppleGaramond.woff2') format('woff2'), url('../fonts/AppleGaramond.woff') format('woff'), url('../fonts/AppleGaramond.ttf') format('truetype'); 
}
@font-face { 
  font-family: AppleGaramond-Light;
  src: url('../fonts/AppleGaramond-Light.woff2') format('woff2'), url('../fonts/AppleGaramond-Light.woff') format('woff'), url('../fonts/AppleGaramond-Light.ttf') format('truetype'); 
}
@font-face { 
  font-family: ArialNarrow;
  src: url('../fonts/Arial Narrow.woff2') format('woff2'), url('../fonts/Arial Narrow.woff') format('woff'), url('../fonts/Arial Narrow.ttf') format('truetype'); 
}
@font-face { 
  font-family: ArialNarrowItalic;
  src: url('../fonts/Arial Narrow Italic.woff2') format('woff2'), url('../fonts/Arial Narrow Italic.woff') format('woff'), url('../fonts/Arial Narrow Italic.ttf') format('truetype'); 
}

/* ------- Core ------- */
::selection    			{ color: #fff; background: #0909FF; }
html   							{ scroll-behavior: smooth; }
body								{ font-family: 'ArialNarrow', sans-serif; background-color: #fff; color: #000; transition: background-color 0.1s ease; /* Smooth transition effect */ }
img									{ width: 100%; }
video								{ width: 100%; overflow: hidden; border: 0; }
.clear							{ clear: both; }
.wrapper 						{ width:94%; margin:0 auto; }


/* ------- Type ------- */
h1									{ font-size: 8.125rem; letter-spacing: -0.24375rem; line-height: 100%; }
h2                  { font-size: 5rem; letter-spacing: -0.15rem; line-height: 100%; }
h3                  { font-size: 3rem; letter-spacing: -0.06rem; line-height: 120%; }
h4                  { font-size: 1.25rem; line-height: 110%; letter-spacing: -0.025rem; }
h5                  { font-size: 6.5rem; letter-spacing: -0.15rem; line-height: 100%; }
p                   { font-size: 2.25rem; }
small               { font-size: 0.875rem; }

a 									{ text-decoration:none; color:inherit; }
a:hover 						{ text-decoration:underline; }

/* ------- Spacing ------- */
hr                  { border: 0; height: 4vh; margin: 0; clear: both; }
.hr_small           { border: 0; height: 1vh; margin: 0; clear: both; }
.hr_medium          { border: 0; height: 10vh; margin: 0; clear: both; }
.hr_large           { border: 0; height: 15vh; margin: 0; clear: both; }
.hr_line            { border: 0; height:1px; background:#BABABA; margin:2vh 0 2vh 0; }

/* ------- Buttons / Titles ------- */
button              { border:3px solid #000; background: #fff; border-radius:50px; padding:0.5vw 1.5vw; cursor:pointer; }
button:hover        { border:3px solid #000; background:#000; color:#fff; }
button p            { font-family: "AppleGaramond"; }
.title              { border:3px solid #000; background: #000; color: #fff; border-radius:50px; padding:0.5vw 1.5vw; display:inline-block; }
.title p            { font-family: "AppleGaramond"; }
.button_text        { color:#BABABA; cursor:pointer; display:inline-block; }
.button_text:hover  { color:#000; text-decoration:underline; }
footer button       { border:3px solid #fff; background: #000; color:#fff; }
footer button:hover { border:3px solid #fff; background: #fff; color:#000; }

/* ------- Nav ------- */
nav 								{ z-index:1; margin-top:20px; position:relative; text-align:center; }
nav a 							{ margin:0 10px; }

/* ------- Intro ------- */
.intro 							{ display: flex; justify-content: center; align-items: center; height: 85vh; position: relative; }
.ticker-wrap 				{ width: 100%; overflow: hidden; position: absolute; z-index:1; color: white; mix-blend-mode: difference; padding:1vh 0; }
.ticker-move 				{ display: inline-block; white-space: nowrap; animation: ticker 800s linear infinite; transform: translateX(0%); }
@keyframes ticker 	{ 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }


/* SLIDES */
/*
.slideshow-container{ height: 100%; display: flex; position:relative; }
.mySlides           { display: none; text-align:center; }*/
.home_img           { max-height:75%; width:auto; margin-top:20%; }
.gradient_left,
.gradient_right     { position: absolute; top: 0; width: 10%; height: 100%; }
.gradient_left      { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 5; }
.gradient_right     { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 5; }
.newProj            { position: absolute; width:7vw; height:7vw; right:-4vw; bottom:5vw; transition: transform 0.5s ease; overflow: hidden; }
.newProj:hover      { transform: scale(1.2); }


.slideshow-container {
    height: 60vh; /* Ensures it takes the full height of the viewport */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: relative;
}

.mySlides {
    display: none; /* Default state to hide inactive slides */
    text-align: center;
    width: 100%; /* Ensures images fit properly */
    height: 100%; /* Optional: Adjusts for height responsiveness */
}

.mySlides img {
    max-height: 100%; /* Ensure the image doesn't exceed container height */
    max-width: 100%; /* Ensure the image doesn't exceed container width */
    object-fit: contain; /* Preserve aspect ratio while centering the image */
    margin: auto; /* Center the image */
}



/* ------- Details ------- */
.details h1         { text-align:center; }
.smilie 						{ width:5.5rem; margin-left:1.5vw; }
.hidden_text 				{ display: none; }
.indent             { text-indent:5vw; }
@keyframes revealText	{ from { opacity: 0; } to { opacity: 1; } }

/* ------- Discipline ------- */
.discipline_holder 	{  }
.discipline_title   { color:#BABABA; font-family: ArialNarrowItalic; margin-bottom:1vh; }
.discipline h4      { margin-top:1vh; }
.discipline 				{ float: left; width:12%; margin-right:1vh; }
.discipline:last-child     { margin-right: 0; }



/* ------- Clients ------- */
.clients            {  }
.clients img        { width:8%; }


/* ------- Projects - List ------- */
.project_holder 		{ position:relative; }
.client             { float: left; width:25%; }
.project            { float: left; width:60%; }
.sector             { float: left; width:15%; text-align:right; }
.project_gradient   { position: absolute; bottom: 0; width: 100%; height: 35vh; display: block; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
.project_show       { float: left; width:75%; }
.project_show img   { height:100px; width:auto; margin:0 10px 5px 0; }

/* ------- Work - Home page ------- */
.work_holder            { position:relative; }
.work_item              { float: left; position:relative; }
.w_right                { margin-right: 1vh; }
.w_bottom               { margin-bottom: 0; }
.w_12                   { width: 100%; }
.w_11                   { width: 95%; }
.w_10                   { width: 85%; }
.w_9                    { width: 72%; }
.w_8                    { width: 65%; }
.w_7                    { width: 57%; }
.w_6                    { width: 46%; }
.w_5                    { width: 40%; }
.w_4                    { width: 30%; }
.w_3                    { width: 20%; }
.w_2                    { width: 12%; }
.w_1                    { width: 8%; }



/* ------- Footer ------- */
footer              { background:#000; color:#fff; }




/* ---------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------- */




/* ------- Responsive ------- */
@media only screen and (min-width : 1px)  and (max-width : 768px) {
/*	body 				{ background-color: lightblue; }*/

  /* ------- Type ------- */
  h1                  { font-size: 4.5rem; letter-spacing: -0.24375rem; line-height: 100%; }
  h2                  { font-size: 3rem; letter-spacing: -0.15rem; line-height: 100%; }
  h3                  { font-size: 2.25rem; letter-spacing: -0.06rem; line-height: 110%; }
  h4                  { font-size: 1.25rem; line-height: 125%; letter-spacing: -0.025rem; }
  h5                  { font-size: 3.5rem; letter-spacing: -0.15rem; line-height: 100%; }
  p                   { font-size: 1.75rem; letter-spacing: -0.045rem; }
  small               { font-size: 0.875rem; }

  /* ------- Buttons / Titles ------- */
  button              { padding:1vw 4vw; margin-bottom:1vh; }
  .title              { padding:1vw 4vw; margin-bottom:1vh; }

  /* ------- Intro ------- */
  .slideshow-container {
    height: 40vh; /* Ensures it takes the full height of the viewport */
}
.intro              { height: 65vh; }
  
  
  /* ------- Details ------- */
  .smilie             { width:4rem; margin-left:1.5vw; }

  /* ------- Clients ------- */
  .clients img        { width:18%; }
  
  /* ------- Discipline ------- */
  .discipline         { width:30%; margin-right:2%; margin-bottom:4vh; }
  .discipline:last-child     { margin-right: 0; }
  .discipline_title   { display:none; }
  
  /* ------- Projects ------- */
  .project_holder     { position:relative; }
  .client             { width:100%; }
  .project            { width:100%; color:#BABABA; }
  .sector             { display:none; }
  .project_show       { width:100%; }

  .newProj            { display:none; }

  /* ------- Work - Home page ------- */
  .work_holder            { position:relative; }
  .work_item              { float: left; position:relative; }
  .w_right                { margin-right: 1vh; }
  .w_bottom               { margin-bottom: 1vh; }
  .w_12                   { width: 100%; }
  .w_11                   { width: 100%; }
  .w_10                   { width: 100%; }
  .w_9                    { width: 100%; }
  .w_8                    { width: 100%; }
  .w_7                    { width: 100%; }
  .w_6                    { width: 100%; }
  .w_5                    { width: 100%; }
  .w_4                    { width: 100%; }
  .w_3                    { width: 100%; }
  .w_2                    { width: 100%; }
  .w_1                    { width: 100%; }

}



@media only screen and (min-width : 769px)  and (max-width : 1024px) {
/*  body 				{ background-color: lightsalmon; }*/

  /* ------- Type ------- */
  h1                  { font-size: 7rem; letter-spacing: -0.24375rem; line-height: 100%; }
  h2                  { font-size: 4rem; letter-spacing: -0.15rem; line-height: 100%; }
  h3                  { font-size: 2.5rem; letter-spacing: -0.06rem; line-height: 100%; }
  h4                  { font-size: 1.25rem; line-height: 110%; letter-spacing: -0.025rem; }
  h5                  { font-size: 4rem; letter-spacing: -0.15rem; line-height: 100%; }
  p                   { font-size: 2rem; letter-spacing: -0.045rem; }
  small               { font-size: 0.875rem; }

  /* ------- Details ------- */
  .smilie             { width:4.5rem; margin-left:1.5vw; }
  
}