/* Global */
html {
height: 100%;
-webkit-font-smoothing: antialiased;
}





body {
background-color: #262626;
height: 100%;
}

.back-to-top{
width:36px;
height:36px;
position:fixed;
z-index:10000;
bottom:40px;
right:40px;
display:none;
cursor:pointer;
border-radius:36px;
box-shadow: 0px 3.534px 2.153px 0px rgba(0, 0, 0, 0.03),
0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
backdrop-filter: blur(4px); /* Adjust the pixel value as needed */
background-color: rgba(255, 255, 255, 0.1);
}

.back-to-top:hover{
background-color:#262626;
}

.show{
display:block!important;
}

/*click effect*/

.ink-parent {
position: relative;
overflow: hidden;
}

.ink-child {
position: relative;
}

.ink {
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.1);
border-radius: 100%;
transform: scale(0);
}

/*animation effect*/
.ink.animate {
animation: ripple 0.55s linear;
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
transform: scale(2.5);
}
}

/* loader */
.loader {
height: 100%;
width: 100%;
background-color: #343334;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
background-position: center center;
background-image: url("../images/logo.gif");
background-repeat: no-repeat;
background-size: 15%;
/*box-shadow: 0px 3.534px 2.153px 0px rgba(36, 42, 48, 0.03), 0px 8.464px 5.14px 0px rgba(36, 42, 48, 0.04), 0px 15.67px 9.471px 0px rgba(36, 42, 48, 0.05), 0px 26.972px 16.192px 0px rgba(36, 42, 48, 0.05), 0px 47.375px 28.139px 0px rgba(36, 42, 48, 0.06), 0px 126.809px 77.44px 0px rgba(36, 42, 48, 0.09);
*/
}

/*font-colors*/
.gold {
color: #a68f6c !important;
}

.white {
color: #262626 !important;
}

.black {
color: #333 !important;
}

.dark-gray {
color: #f4f4f4;
}

.gray {
color: #bebebe !important;
}

.ghost {
color: #000 !important;
opacity:.8;
}

.dark{
color:#000!important;
opacity:.4;
}

.ghost-dark{
color:#000000!important;
opacity: .4;
}
::selection {
background: rgba(255, 222, 235, 0.99);
color: #333;
}

/* Animations/Effects */

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.delay-1 {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-4 {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-5 {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-6 {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-7 {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-8 {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-9 {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-10 {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-11 {
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
.delay-12 {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
.delay-13 {
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
}
.delay-14 {
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}

/* Style the container with overflow for demonstration */
.custom-scroll-container {
height: 200px;
overflow-y: scroll;
scrollbar-width: thin; /* For Firefox */
scrollbar-color: #a68f6c #000; /* For Firefox */

/* For WebKit browsers like Chrome and Safari */
scrollbar-face-color: #000;
scrollbar-track-color: #a68f6c;
}

/* WebKit-based browsers (Chrome, Safari) */
::-webkit-scrollbar {
width: 4px;
}

::-webkit-scrollbar-thumb {
background-color: #a68f6c;
}

::-webkit-scrollbar-track {
background-color: #000;
}

/* Firefox */
/* Note: For Firefox, you need to use 'scrollbar-color' and 'scrollbar-width' properties */
/* The color values are scrollbar-thumb-color scrollbar-track-color */
/* You can use 'auto' for the width to let the browser decide */
/* This is only supported in Firefox 64 and later versions */
/* Earlier versions of Firefox may not support these properties */
@supports (scrollbar-color: auto) {
.custom-scroll-container {
scrollbar-color: #a68f6c #000;
scrollbar-width: thin;
}
}

/* hamburger
.no-scroll {
overflow: hidden;
}

.header {
height: 80px;
background-color: transparent;
width: 100%;
margin: auto;
z-index: 9000;
position: fixed;
top: 0;
}

.header-inner {
margin: auto;
}
*/

.hamburger {
position: fixed;
left: 40px;
top: 40px;
padding-top: 2px;
height: 40px;
width: 40px;
z-index: 10000;
-webkit-transition: all 150ms cubic-bezier(0.02, 0.01, 0.47, 1);
-moz-transition: all 150ms cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 150ms cubic-bezier(0.02, 0.01, 0.47, 1);
}

.float {
box-shadow: 0px 3.534px 2.153px 0px rgba(0, 0, 0, 0.03),
0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
border-top:1px solid #262626!important;
backdrop-filter: blur(4px); /* Adjust the pixel value as needed */
background-color: rgba(255, 255, 255, 0.1);
top: 20px;
right: 40px;
}

.hamburger:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
}

#nav-icon {
width: 20px;
height: 12px;
margin: 12px 0px 0px 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
cursor: pointer;
}

#nav-icon span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: #a68f6c;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}

#nav-icon span:nth-child(even) {
left: 50%;
}

#nav-icon span:nth-child(odd) {
left: 0px;
}

#nav-icon span:nth-child(1),
#nav-icon span:nth-child(2) {
top: 0px;
}

#nav-icon span:nth-child(3),
#nav-icon span:nth-child(4) {
top: 5px;
}

#nav-icon span:nth-child(5),
#nav-icon span:nth-child(6) {
top: 10px;
}

#nav-icon.open span:nth-child(1),
#nav-icon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#nav-icon.open span:nth-child(2),
#nav-icon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(1) {
left: 2px;
top: 3px;
}

#nav-icon.open span:nth-child(2) {
left: 8px;
top: 3px;
}

#nav-icon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}

#nav-icon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}

#nav-icon.open span:nth-child(5) {
left: 2px;
top: 9px;
}

#nav-icon.open span:nth-child(6) {
left: calc(50% - 2px);
top: 9px;
}

.navigation {
list-style: none;
padding: 0;
float: none;
}

.navigation li {
font-family: "Roboto Slab";
margin: 0;
margin-bottom: 20px;
font-weight: bold;
text-transform: uppercase;
border: none;
float: none;
letter-spacing: 2.4px;
color: #a68f6c;
text-align: center;
font-size: 40px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
max-width: 1030px;
line-height: 80px;
}

#nav .back-text {
font-family: "Roboto Slab";
font-size: 35vh;
font-weight: bold;
color: #0e0e0e;
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}

.navigation li:hover {
background-color: #262626;
cursor: pointer;
color: #f4f4f4;
}

.active {
backdrop-filter: blur(8px); /* Adjust the pixel value as needed */
background-color: rgba(0, 0, 0, 0.2);
border-top:1px solid #161616!important;
color: #f4f4f4 !important;
}

.nav-inner {
width: 100%;
height: 80px;
float: left;
}

#nav {
position: fixed;
bottom: -100%;
width: 100%;
background-color: #161616;
height: 100%;
padding: 0;
opacity: 0;
z-index: 8000;
}

.nav-active {
bottom: 0 !important;
opacity: 1 !important;
}

.contact-links {
bottom: 20px;
width: 100%;
position: absolute;
}
.contact-links ul {
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 0;
float: left;
}

.contact-links a {
color: #f4f4f4;
padding: 8px;
}

.contact-links a:hover {
color: #a68f6c;
text-decoration: line-through;
}

.contact-info {
float: left;
margin-right: 40px;
border-right: solid 1px #d8d8d8;
padding-right: 40px;
font-family: "Roboto", serif;
font-weight: 500;
font-size: 12px;
color: #777677;
}

/* Font Styles */

h1 {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 5vh; /* Adjust the value as needed */
line-height: 100%;
margin: 0;
margin-bottom: 2vh; /* Adjust the value as needed */
color: #f4f4f4 !important;
}

h2 {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 3.2vh; /* Adjust the value as needed */
}

h3 {
font-family: "Roboto Slab", serif;
font-weight: 100;
font-size: 2.8vh; /* Adjust the value as needed */
line-height: 150%;
margin-top: 0;
color: #bebebe;
}

h4 {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 2.4vh; /* Adjust the value as needed */
line-height: 150%;
margin-top: 0;
}

h5 {
font-family: "Roboto", serif;
font-weight: 700;
font-size: 1.6vh; /* Adjust the value as needed */
line-height: 150%;
margin-top: 0;
color: #bebebe;
text-transform: uppercase;
letter-spacing: 0.2vh; /* Adjust the value as needed */
}

h6 {
font-family: "Roboto Slab", sans-serif;
font-weight: 700;
font-size: 1.2vh; /* Adjust the value as needed */
line-height: 150%;
margin: 0;
color: #a68f6c;
}

p {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 2vh; /* Adjust the value as needed */
line-height: 160%;
margin-top: 0;
color: #bebebe;
}

.project-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height:150%!important;
}

.space-xs {
margin-bottom: 12px;
}

.space-small {
margin-bottom: 16px;
}

.space-medium {
margin-bottom: 20px;
}

.space-large {
margin-bottom: 32px;
}

.space-xl {
margin-bottom: 48px;
}

.space-xxl {
margin-bottom: 64px;
}

.space-left-large {
margin-left: 32px;
}

.snapshot {
margin-bottom: 120px;
}

.twelve {
font-family: "Roboto", serif;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #f4f4f4;
}

.fourteen {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
color: #bebebe !important;
line-height: 150%;
}

.sixteen {
font-family: "Roboto", serif;
font-weight: 700;
font-size: 16px;
color: #a68f6c;
}

.eighteen {
font-family: "Roboto", serif;
font-weight: 700;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #a68f6c;
}
.twenty-eight {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 28px;
line-height: 100%;
color: #f4f4f4;
}
.thirty-two {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 32px;
line-height: 100%;
color: #f4f4f4;
}

.project-number {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 30vh;
color: #f4f4f4;
padding: 60% 0 0;
}

.page-head {
padding: 60px 0;
}
.page-head-wrapper {
border-bottom: solid 1px #000;
background-color: #161616;
}
/*border-styles*/
.border-all {
border: solid 20px #161616;
}

.border-no-top {
border-top: 0px !important;
border-right: solid 20px #161616;
border-left: solid 20px #161616;
border-bottom: solid 20px #161616;
}

.border-no-bottom {
border-bottom: 0px !important;
border-right: solid 20px #161616;
border-left: solid 20px #161616;
border-bottom: solid 20px #161616;
}

.border-sides-only {
border-bottom: 0px !important;
border-right: solid 20px #161616;
border-left: solid 20px #161616;
}
.border-no-bottom{
border-top:20px solid #161616;
border-right: solid 20px #161616;
border-left: solid 20px #161616;
border-bottom:0;
}

/* General Slides */

.slide {
background-attachment: fixed;
width: 100%;
height: auto;
position: relative;
padding: 120px 0;
background-color: #161616;
margin: auto;
/*box-shadow:0 20px 20px rgba(0,0,0,.06);*/
}
#datetime {
word-spacing: 8px;
letter-spacing: 1px;
}

.meta-data {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 3000;
}

.meta-data > div {
font-family: "Roboto";
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
width: 100%;
text-wrap: nowrap;
color: #bebebe;
margin-bottom: 4px;
}



.year {
position: absolute !important;
transform: rotate(90deg);
top: 48px;
left: -48px;
font-family: "Roboto";
font-size: 10px;
color: #bebebe;
font-weight: 700;
line-height: 100%;
overflow: hidden;
}

.down-arrow {
opacity: 0;
margin-left: 4px;
position: relative;
left: -8px;
-webkit-transition: all 800ms cubic-bezier(0.1, 0.9, 0.2, 1);
-moz-transition: all 800ms cubic-bezier(0.1, 0.9, 0.2, 1);
transition: all 800ms cubic-bezier(0.1, 0.9, 0.2, 1);
}

.cards a:hover .down-arrow {
opacity: 1;
left: 0;
}
.static {
opacity: 0.02;
height: 100%;
width: 100%;
background: transparent url("../images/static_animated.gif") repeat;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}


.tall {
height: 100%;
}

/* Slide 1 */
#slide1 {
background-color: #262626;
height:100%

}

.center {
top: 50%;
transform: translateY(-50%);
}

.arrow {
position: absolute;
left: 50px;
bottom: -50px;
z-index: -1;
width: 212px;
height: 246px;
}

.think {
position: absolute;
left: 0;
bottom: 12px;
z-index: -1;
}
.inquiry {
float: right;
margin: 0;
}

.button {
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  height: 48px;
  font-family: "Roboto", serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  color: #a68f6c !important; /* Light color for text */
  background-color: #343334; /* Dark background color */
  border-top: solid 1px #3d3d3d !important; /* Slightly lighter border for contrast */
  border: none;
  border-radius: 0;
  float: left;
  box-shadow: 
    0px 3.534px 2.153px 0px rgba(0, 0, 0, 0.03),
    0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
    0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
    0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
    0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
    0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
}

.button:hover {
  -webkit-transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
  -moz-transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
  transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
  background-color: #393939; /* Darker background on hover */
}

.button-inner {
  padding: 0 24px; /* Adjust padding as needed */
}

/* Slide 2 */

/* Company slides */
#slide2, #slide3, #slide4{
background-color: #262626;
padding: 0;
height:100%;
}
#the-mask rect{
width:20px;
height:243px;
}
#slide2:hover #the-mask rect {
width:953px;
:0;
transition: 1000ms cubic-bezier(0.10, 0.90, 0.20, 1.00);
}
#the-mask2 rect{
width:20px;
height:243px;
}
#slide3:hover #the-mask2 rect {
width:432px;
:0;
transition: 1000ms cubic-bezier(0.10, 0.90, 0.20, 1.00);
}

#the-mask3 rect{
width:20px;
height:280px;
}
#slide4:hover #the-mask3 rect {
width:300px;
:0;
transition: 1000ms cubic-bezier(0.10, 0.90, 0.20, 1.00);
}





/* Define the CSS animation */
@keyframes draw {
from {
stroke-dashoffset: 1160; /* Start with the stroke hidden */
}
to {
stroke-dashoffset: 0; /* End with the stroke fully drawn */
}
}


/* Apply the animation to the path element */
path {
  stroke-dasharray: 1160; /* Set the length of the stroke to cover the entire path */
  stroke-dashoffset: 1160; /* Hide the stroke initially */
}

/* animates the stroke */
.wrapper:hover  svg path {
  animation: draw 1000ms cubic-bezier(0.10, 0.90, 0.20, 1.00) forwards;
}

.arrow-outline{
  position:absolute;
  right:40px;
  top:50%;
}
/* animates direction of arrow */
.wrapper:hover .arrow-outline{
  right:0;
  transition: 1500ms cubic-bezier(0.10, 0.90, 0.20, 1.00);
}

.arrow-outline2{
  position:absolute;
  right:230px;
  top:50%;
}
/* animates direction of arrow */
.wrapper:hover  .arrow-outline2{
  right:190px;
  transition: 1500ms cubic-bezier(0.10, 0.90, 0.20, 1.00);
}

.wrapper:hover{
border-top:solid 1px #393939!important;
background-color:#262626;
box-shadow: 0px 3.534px 2.153px 0px rgba(0, 0, 0, 0.03),
0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
cursor:pointer;

}
.wrapper{
  border-top: solid 1px #393939;
display: flex;
flex-direction: column;
height: 100%;
z-index:2000;
background-color:#262626;
}

.project-logo{
flex-grow: 1; /* Allow the container to grow to fill the remaining space */
display: flex;
justify-content: center;
align-items: center;
}

.company-thumb{
width:100%;
}

.footer{
background:#161616;
font-family: "Roboto";
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color:#bebebe;
z-index:1000;
padding:20px;
border-bottom:solid 1px #000;
}

.footer div{
  margin-bottom:2px;
}

.classifier{
  width:2%;
  float:left;
  display:block;
  margin-right:20px;
}
.company-logo{
position:absolute;
right: 20px;
top:20px;
}

.cards {
top: 0;
}

a {
text-decoration: none;
}

.card {
background-color: #161616;
cursor: pointer;
float: left;
border-top: solid 1px transparent;
border-right: solid 1px #000;
border-left: solid 1px transparent;
border-bottom: solid 1px #000;
margin-bottom: 0;
-webkit-transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
-moz-transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
padding: 20px !important;
}

.card ul,
ul {
height: 100%;
padding: 0;
margin: 0;
}
.card:hover {
border-top: solid 1px #262626;
border-left: solid 1px #262626;
border-right: solid 1px #262626;
border-bottom: solid 1px #262626;
background-color: rgba(255, 255, 255, 0.4);
/* Ds */
box-shadow: 0px 3.534px 2.153px 0px rgba(0, 0, 0, 0.03),
0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
/*transform: translate(0,-10px);*/
/*transform: scale(1.01, 1.01);*/
transition-delay: 0s !important;
z-index: 1000;
}

li {
list-style: none;
}

/*interior pages*/

.project-slide {
background-color: white;

}

.portfolio-image-light{
/* Ds */
box-shadow: 0px 3.534px 2.153px 0px rgba(0, 0, 0, 0.03),
0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
margin:0;
}

.portfolio-image-dark{
box-shadow: 0px 3.534px 2.153px 0px rgba(36, 42, 48, 0.03),
0px 8.464px 5.14px 0px rgba(0, 0, 0, 0.04),
0px 15.67px 9.471px 0px rgba(0, 0, 0, 0.05),
0px 26.972px 16.192px 0px rgba(0, 0, 0, 0.05),
0px 47.375px 28.139px 0px rgba(0, 0, 0, 0.06),
0px 126.809px 77.44px 0px rgba(0, 0, 0, 0.09);
margin:0;
}

/*interior page featured image*/

#cdai {
background-image: url("../images/think.jpg");
background-repeat: no-repeat;
height: 100%;
background-size:cover;
background-color: black;
}

#ap {
background-image: url("../images/think1.jpeg");
height: 100%;
background-size: 100% !important;
}

#data-tree{
padding:0;
overflow:hidden;
}


#theme, #predictions, #dark {
background-color:#1d1d1d;
}

#dark{
padding-bottom:0;
overflow:hidden;
}

#final-word{
text-align:center;
}

.final-divider{
border-right:solid 1px #000;
}
.fade {
position: absolute;
bottom: 0;
width: 100%;
background-image: url("../images/cpd-2019/gradient.svg");
height: 120px;
z-index: 4000;
background-repeat: no-repeat;
background-size: cover;
}

.dark-fade {
position: absolute;
bottom: 0;
width: 100%;
background-image: url("../images/cpd-2019/dark-fade.svg");
height: 240px;
z-index: 4000;
background-repeat: no-repeat;
background-size: cover;
}

/*footer nav*/

#footer-nav {
border-top: solid 1px #000;
padding: 0;
}
#footer-nav li,
#footer-nav a {
list-style: none;
text-decoration: none;
}
#footer-nav a {
background-color: #262626;
width: 50%;
float: left;
display: block;
}
#footer-nav a:hover {
background-color: #000 !important;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#footer-nav ul {
padding: 48px 0px;
}

.eyebrow {
font-family: "Roboto", serif;
font-weight: 700;
font-size: 18px;
margin-bottom: 0;
color: #a68f6c;
}

.destination {
font-family: "Roboto Slab", serif;
font-size: 2.8vh; /* Adjust the value as needed */
font-weight: 600;
margin-bottom: 20px;
color: #f4f4f4;
}
.previous {
width: 36px;
height: 36px;
float: left;
margin: 10px 20px;
}
.next {
width: 36px;
height: 36px;
float: right;
margin: 10px 20px;
}
.align-right {
text-align: right;
border-left: solid 1px #000;
padding-left: 30px;
}

/* Tablet Portrait */
@media screen and (max-width: 1200px) {

.grid_3,
.grid_9{
width: 50%;
}
}

@media screen and (max-width: 768px) {
 .small-screen-hidden {
    display: none; /* Hide the element on screens 768px and smaller */
  }
  
.header {
height: 41px;
background-color: #262626;
width: 100%;
border-bottom: solid 1px #000;
}
#nav,
#slide1 {
outline: none !important;
outline-offset: none !important;
border: none !important;
}
.float,
.hamburger {
top:5%!important;
right:5%!important;
left:auto;
}




.contact-info {
float: none;
border-right: 0;
margin-right: 0;
margin-left: 0 !important;
padding-right: 0;
text-align: center;
margin-bottom: 8px;
}

/* Font Styles 

h1 {
font-family: "Roboto Slab", serif;
font-weight: 700;
font-size: 28px;
line-height: 100%;
margin: 0;
margin-bottom: 30px;
color: #f4f4f4 !important;
}

h2 {
font-family: "Roboto", serif;
font-weight: 700;
font-size: 18px;
margin-bottom: 20px;
color: #a68f6c;
}

h3 {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 150%;
margin-top: 0;
color: #bebebe;
}
*/

button {
margin-top: 30px;
}
}
@media screen and (max-width: 750px) {

.grid_3,
.grid_4,
.grid_9,
.grid_6,
.grid_11  {
width: 100%;
}
.ghost{
opacity:1;
}

.loader{
background-size:35%;
}
.snapshot{
margin-bottom:48px;
}
#intro{
padding-top: 96px!important;
}

.slide{
padding:48px 0;
}
h1{font-size:4vh;}
#slide1{
  height:auto!important;
}
.final-divider{
border:none;
margin-bottom:48px;
}

.border-all ,
.border-no-top, 
.border-no-bottom, 
.border-sides-only{
border:none;
}

.project-slide{
outline-offset:-11px;
}

}
/* Mobile */
@media screen and (max-width: 480px) {
}