@import url("https://fonts.googleapis.com/css?family=Manjari&display=swap");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,800");
footer { position: relative; bottom: 0; width: 100%; padding-bottom: 50px; padding-top: 60px; background-color: #171515f0; text-align: center; }

footer a { color: white; text-decoration: none; }

footer img { width: 32px; height: auto; border-radius: 40px; box-shadow: 7px 7px 3px #1f1f1f; margin-right: 10px; }

/* Mobile Styles */
@media only screen and (max-width: 400px) { .wrapper { position: relative; max-width: 100vw; margin: 0 auto; min-height: 100vh; padding-bottom: 2.5rem; } }

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) { .wrapper { position: relative; width: 90vw; margin: 0 auto; min-height: 100vh; padding-bottom: 2.5rem; } }

/* Desktop Styles */
@media only screen and (min-width: 961px) { .wrapper { position: relative; width: 75vw; margin: 0 auto; min-height: 100vh; padding-bottom: 2.5rem; } }

footer div { width: calc(33.333333% - 40px); height: 1px; background: white; position: absolute; display: block; top: 50%; }

.div-right { right: 0; }

#footer-content { display: flex; justify-content: center; }

.topnav { overflow: hidden; width: 100vw; display: flex; justify-content: space-between; padding: 0 15px; position: absolute; z-index: 4; background-color: transparent; }

.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 24px 26px; text-decoration: none; font-size: 1.5rem; text-transform: uppercase; }

.topnav a:hover { -webkit-animation: neon 1.5s ease-in-out infinite alternate; }

@-webkit-keyframes neon { from { text-shadow: 0 0 10px #fff, 0 0 20px  #fff, 0 0 30px  #fff, 0 0 40px  #FF9900, 0 0 70px  #FF9900, 0 0 80px  #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; }
  to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } }

.topnav a.active { color: white; }

.topnav .icon { display: none; }

@media screen and (max-width: 600px) { .topnav a { font-size: 1rem; } }

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

body { background: #ffffff; color: #000000; font-family: "Manjari", sans-serif; }

.season-img { background-size: 314px 383px; }

.anim750 { transition: all 750ms ease-in-out; }

#Awesome { position: relative; width: 180px; height: 180px; margin: 0 auto; backface-visibility: hidden; }

#Awesome .sticky { transform: rotate(45deg); }

#Awesome:hover .sticky { transform: rotate(10deg); }

#Awesome .sticky { position: absolute; top: 0; left: 0; width: 180px; height: 180px; }

#Awesome .reveal .circle { box-shadow: 0 1px 0px rgba(0, 0, 0, 0.15); font-family: 'helvetica neue', arial; font-weight: 200; line-height: 140px; text-align: center; cursor: pointer; }

#Awesome .reveal .circle { background-image: url("/assets/images/bl/bl-space.png"); background-size: cover; }

#Awesome .circle_wrapper { position: absolute; width: 180px; height: 180px; left: 0px; top: 0px; overflow: hidden; }

#Awesome .circle { position: absolute; width: 140px; height: 140px; margin: 20px; border-radius: 999px; }

#Awesome .back { height: 10px; top: 30px; }

#Awesome:hover .back { height: 90px; top: 110px; }

#Awesome .back .circle { margin-top: -130px; background-color: #fbec3f; background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, 0), rgba(255, 255, 255, 0.8)); }

#Awesome:hover .back .circle { margin-top: -50px; }

#Awesome .front { height: 150px; bottom: 0; top: auto; }

#Awesome:hover .front { height: 70px; }

#Awesome .front .circle { margin-top: -10px; background-image: url("/assets/images/bl/bl-sun.png"); background-size: cover; background-repeat: no-repeat; }

#Awesome h4 { font-family: 'helvetica neue', arial; font-weight: 200; text-align: center; position: absolute; width: 180px; height: 140px; line-height: 140px; transition: opacity 50ms linear 400ms; }

#Awesome:hover h4 { opacity: 0; transition: opacity 50ms linear 300ms; }

#Awesome:hover .front .circle { margin-top: -90px; background-color: transparent; background-position: 0 150px; }

.container { display: flex; flex-wrap: wrap; }

.flex-cards { flex: 1 0 30%; margin: 5px; text-align: center; }

/* Mobile Styles */
@media only screen and (max-width: 500px) { .card-header img { width: 80vw; height: auto; } }

/* Tablet Styles */
@media only screen and (min-width: 501px) and (max-width: 960px) { .card-header img { width: 30vw; height: auto; } }

/* Desktop Styles */
@media only screen and (min-width: 961px) { .card-header img { width: 16vw; height: auto; }
  .portfolio-container { position: relative; }
  .portfolio-image { display: block; }
  .portfolio-overlay { position: absolute; top: 0; left: 10%; opacity: 0; transition: .5s ease; }
  .portfolio-overlay-pp { position: absolute; top: 0; left: 10%; opacity: 0; transition: .1s ease; }
  .portfolio-container:hover .portfolio-overlay-pp { opacity: 1; }
  .portfolio-container:hover .portfolio-overlay { opacity: 1; } }

html { scroll-behavior: smooth; }

body { overflow-x: hidden; background-color: black; color: white; }

footer { background-color: #0021ff0d; }

#winter, #summer, #spring, #autumn { display: none; }

.season-img { background: url("/assets/images/test-bg.jpg"); background-repeat: no-repeat; background-size: cover; }

.wrapper { width: 100vw; }

.card-header img { border: 1px solid white; width: 25vw; }

.pagetwo-undone img { filter: saturate(0%); }

/* Included color classes..  .red  .blue  .yellow  */
figure.snip1104 { font-family: 'Raleway', Arial, sans-serif; position: relative; overflow: hidden; margin: 10px; background: #000000; color: #ffffff; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

figure.snip1104 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

figure.snip1104 img { max-width: 100vw; position: relative; opacity: 0.4; }

figure.snip1104 figcaption { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

figure.snip1104 h2 { position: absolute; left: 40px; right: 40px; display: inline-block; background: #000000; -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%); transform: skew(-10deg) rotate(-10deg) translate(0, -50%); padding: 12px 5px; margin: 0; top: 50%; text-transform: uppercase; font-weight: 400; }

figure.snip1104 h2 span { font-weight: 800; }

figure.snip1104.blue { background: #123851; }

figure.snip1104.blue h2 { background: #0a212f; }

figure.snip1104:hover img, figure.snip1104.hover img { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); border: none; }

figure.snip1104:hover h2, figure.snip1104.hover h2 { -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); }

figure.snip1104:hover:before, figure.snip1104.hover:before { -webkit-transform: rotate(110deg) translateY(-150%); transform: rotate(110deg) translateY(-150%); }

.pagetwo-bg { height: 100vh; width: 100vw; }

.arrow { text-decoration: none; color: #afe8ff; font-size: 2rem; position: absolute; top: 90vh; left: 50vw; text-shadow: 15px 5px 3px #93adff; }

.profile-picture { display: none; }

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.s-wrapper { width: 300px; min-height: 100vh; position: absolute; top: 0; border-left: 40px solid #00000038; padding: 15px; color: rgba(0, 0, 0, 0.5); font-size: small; display: inline-block; z-index: 3; }

.s-wrapper h1 { top: 610px; font-size: 1rem; color: white; text-transform: uppercase; letter-spacing: 12px; position: absolute; bottom: 0; left: 0; margin-left: -30px; transform: rotate(270deg); transform-origin: 0 0; }

.pagetwo-content { max-width: 800px; margin: 0 auto; font-size: 1.2rem; }

.pagetwo-content h2 { padding-top: 40px; }

.pagetwo-content p { padding-bottom: 20px; }

.freelance h2, .freelance p { display: flex; justify-content: flex-end; }

@media only screen and (min-width: 961px) { .s-wrapper { position: fixed; } }

.bl { display: none; }

#Awesome .reveal .circle { background-image: url("/assets/images/bl/bl-sun.png"); background-size: cover; }

#Awesome .front .circle { margin-top: -10px; background-image: url("/assets/images/bl/bl-space.png"); }

#Awesome .circle_wrapper { overflow: initial; }

@media only screen and (max-width: 500px) { .card-header img { width: 80vw; height: auto; }
  p, h2 { text-align: center; padding: 0 20px; } }

/* Tablet Styles */
@media only screen and (min-width: 501px) and (max-width: 960px) { .card-header img { width: 30vw; height: auto; }
  h2, p { padding-left: 30px; padding-right: 30px; } }

/* Desktop Styles */
@media only screen and (min-width: 961px) { .inscroll { opacity: 0; transition: all 1s ease-in; }
  .right { transform: translateX(100px); }
  .left { transform: translateX(-100px); }
  .visible { opacity: 1; transform: translateX(0); }
  .bgscroll { opacity: 0; transition: all 0.5s ease-in; }
  .bg-visible { opacity: 1; } }

/*# sourceMappingURL=portfolio.css.map */