@import url('https://fonts.googleapis.com/css?family=Montserrat:900');
.dropdown-menu.show {
    left: -50%;
}
#light {
    background-color: rgba(0, 0, 0, .15);
}
.wavy {
    --s: 1.6em; /* the size of the wave */
    --p: .8;    /* the curvature of the wave [0 2] */

    --R: calc(var(--s)*sqrt(var(--p)*var(--p) + 1)) at 50%;
    mask:
        radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%) 
        calc(50% - 2*var(--s)) 0/calc(4*var(--s)),
        radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%) 
        50% calc(-1*var(--s))/calc(4*var(--s)) repeat-x;
}
.wavy {
    width: 100%;
}
#stickit {
    position: sticky;
}
#inner-wrap {
	position: fixed;
	display: table;
	width: 100%;
	height: 100%;
	min-height: 322px;
	overflow: visible;
}
#inner-wrap .card {
    background-color: unset;
}
.waves {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	min-width: 100%;
	min-height: 70%;
	margin: auto 0;
}
.glitch-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 8;
 }
 .glitch {
    position: relative;
    font-size: 30px;
    font-weight: bold;
    color: #000000;
    letter-spacing: 3px;
    z-index: 1;
 }
 .glitch:before,
 .glitch:after {
    display: block;
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
 }
 .glitch:before {
    animation: glitch-it 30s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: #0429FF;
    z-index: -1;
 }
 .glitch:after {
    animation: glitch-it 30s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    color: #FF2525;
    z-index: -2;
 }
 @keyframes glitch-it {
    0% {
       transform: translate(0);
    }
    20% {
       transform: translate(-2px, 2px);
    }
    40% {
       transform: translate(-2px, -2px);
    }
    60% {
       transform: translate(2px, 2px);
    }
    80% {
       transform: translate(2px, -2px);
    }
    to {
       transform: translate(0);
    }
 }
.title {
    text-shadow: -2px,2px,50px,#f9f9f9;
    padding-left: 0%;
    padding-right: 0%;
}
.lead-card {
    background-color: unset;
    box-shadow: unset;
    border: unset;
}
.circle-pattern {
	background-image: radial-gradient(circle at center center, #898989, #696969), repeating-radial-gradient(circle at center center, #C8B89D, #C8B89D, 53px, transparent 106px, transparent 53px);
	background-blend-mode: multiply;
	background-color: #ffffff;
}
.cube-pattern {
	background-image:  linear-gradient(30deg, #0D4A76 12%, transparent 12.5%, transparent 87%, #0D4A76 87.5%, #0D4A76), linear-gradient(150deg, #0D4A76 12%, transparent 12.5%, transparent 87%, #0D4A76 87.5%, #0D4A76), linear-gradient(30deg, #0D4A76 12%, transparent 12.5%, transparent 87%, #0D4A76 87.5%, #0D4A76), linear-gradient(150deg, #0D4A76 12%, transparent 12.5%, transparent 87%, #0D4A76 87.5%, #0D4A76), linear-gradient(60deg, #0D4A7680 25%, transparent 25.5%, transparent 75%, #0D4A7680 75%, #0D4A7680), linear-gradient(60deg, #0D4A7680 25%, transparent 25.5%, transparent 75%, #0D4A7680 75%, #0D4A7680);
	background-size: 200px 350px;
	background-position: 0 0, 0 0, 100px 175px, 100px 175px, 0 0, 100px 175px;
	background-color: #0d6efd;
}
#about-photo {
    width: 50%;
    border-radius: 10px;
    clip-path: inset(5% 14% 11% 8% round 5% 20% 0 10%);
}
.photo-about {
    width: auto;
    position: relative;
    display: grid;
}
.about-image {
    z-index: 3;
}
.about-text {
    width: 50%;
    height: fit-content;
    top: 55%;
    left: 35%;
    position: absolute;
    justify-self: center;
    color: whitesmoke;
    background-color: rgba(108 117 125 / 75%);
    text-align: center;
    text-shadow: -2px 2px 4px rgba(0, 0, 0,50%);
    z-index: 10;
}
.mybg {
    background-color: rgb(230, 230, 230);
}
.daShadow {
    -webkit-box-shadow: -3px 3px 2px 2px rgba(0,0,0,0.2),
    -2px 1px 6px 3px rgba(0,0,0,0.57);
    -moz-box-shadow: -3px -3px 2px 2px rgba(0,0,0,0.2),
    -2px 1px 6px 3px rgba(0,0,0,0.57);
    box-shadow: -3px 3px 2px 2px rgba(0, 0, 0, 0.2),
    -2px 1px 6px 3px rgba(0, 0, 0, 0.57);
}
#social-links {
    text-align: center !important; 
}
#social-links, #about {
    display: block;
}
.columns {
    column-count: 3;
    column-gap: 25px;
    column-rule: 2px groove #000000;
}
@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#captioned-gallery { 
  width: 100%; overflow: hidden; 
}
img.slideimg {
    clip-path: inset(5% 14% 11% 8% round 5% 20% 0 10%);
}
figure.slider { 
  position: relative; width: 500%;
  font-size: 0; animation: 30s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption { 
  position: absolute; bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}
#inner-nav {
    top: 0%;
    position: fixed;
    width: 100%;
    z-index: 200;
}
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: 2px groove #3866A3;; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #63B8EE; /* Set a background color */
    background: linear-gradient(to top, #63B8EE, #468CCF);
    color: #14396A !important; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-family: 'times new roman';
    font-weight: bold;
    font-size: 18px; /* Increase font size */
  }
  
#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
#itme {
    width: 100%;
    height: 50px;
}
.sprite { 
    background: url('images/sprite.png') no-repeat top left;  
} 
.sprite.oldNewme_n { 
    background-position: 0 0; width: 1152px; height: 2048px; 
}
.mybackground-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
  /* Define styles for the background image */
.mybackground-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    z-index: -1;
}
.mybackground {
    background-image: url("images/oldNewme_n.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-clip: text;
    height: 200vh;
    font-weight: bold;
    font-size: 50rem;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    border: unset;
    overflow: hidden;
    
    &:before {
        content: '';
        background-image: inherit;
        background-size: cover;
        background-position: 50% 50%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -2;
    }
}
.parallax {
    /* The image used */
    background-image: url("images/oldNewme_n.jpg");
  
    /* Set a specific height */
    min-height: 500px;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Sections */
.mycontent{
    height: 100%;
    min-height: 500px;
    position: relative;
  }
  
  /* Containers */
.content-container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    clip: rect(auto, auto, auto, auto);
    pointer-events: none;
}
.content-inner{
    position: fixed;
    top: 10%;
    left: 20%;
    right: 0;
    height: 100%;
    padding: 0;
    z-index: 99;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-perspective: 1000;
    perspective: 1000;
    pointer-events: all;
}
.content-center{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  /* Aesthetics */
.top-section{
    background: linear-gradient(181deg, #ffffff00 0%,#3a48f4 100%);
}
.bottom-section{
    background: #d4fef2;
}
.mycontent h1{
    font-size: 100px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}
.mycontent p,
  .mycontent a{
    font-weight: 700;
    letter-spacing: 7px;
    text-transform: uppercase;
    text-align: center;
}
  
.content-theme-dark h1{
    color: #E33E39;
    text-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.content-theme-dark p,
  .content-theme-dark a{
    color: #FEA98D;
}
.content-theme-light h1{
    color:#062930;
    text-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.content-theme-light p,
  .content-theme-light a{
    color: #728E93;
  }
#test {
    width: 100%;
    height: 50%;
}
.test {
    text-align: center;
    text-shadow: #000;
    background-color: #0429FF;
}
.banner {
	margin-left: calc(50% - 50vw);
	width: 100vw; height: 62.5vmin;
	min-height: 15em;
	background: linear-gradient(#000, transparent, #000), 
		var(--img) 50%/ cover;
	background-attachment: fixed;
	background-blend-mode: multiply;
	
	&:nth-of-type(1) {
		--img: url(images/oldNewme_n.jpg);
	}
}
/* Add a black background color to the top navigation */
.navbar {
    background-color: #333;
    padding-right: 4%;
    overflow: hidden;
}
  
  /* Style the links inside the navigation bar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
  /* Change the color of links on hover */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}
  
  /* Add an active class to highlight the current page */
.navbar a.active {
    background-color: #04AA6D;
    color: white;
}
  
  /* Hide the link that should open and close the topnav on small screens */
.navbar .icon {
    display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
      float: right;
      display: block;
    }
}
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .navbar.responsive {position: relative;}
    .navbar.responsive a.icon {
      position: absolute;
      padding-right: 2%;
      right: 0;
      top: 0;
    }
    .navbar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}
@media screen and (max-width: 600px) {
    .navbar-collapse {
        padding-left: 4%;
    }
    .dropdown-item {
        background-color: #000;
    }
}
@media screen and (max-width: 600px) {
    .mycontent h1 {
        font-size: 50px;
        text-align: unset;
    }
    .mycontent p {
        font-size: 25px;
        text-align: unset;
    }
}
@media screen and (min-width: 600px) {
    .navbar {
        overflow: visible;
    }
    .navbar-collapse {
        justify-content: right;
    }
    .dropdown-menu {
        background-color: #a3a3a3;
    }
}