@charset "UTF-8";
/* CSS Document */ :root {
  --primary-color: hsl(29.36, 93.07%, 60.39%); /* MAIN HEX #f8983c */
}
*::before, *::after {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 100%; /* Base 16px */
}
body {
  margin: 0;
  padding: 0;
  /*background-color: #121212;*/
  background-color: #121212;
  /*background: linear-gradient(321deg, rgba(65, 64, 66, 1) 0%, rgba(138, 140, 142, 1) 100%);*/
  font-weight: normal;
  font-family: Montserrat, Helvetica, sans-serif;
  z-index: 100;
  height: 100vh;
}
p {
  color: #777;
}
div, section {
  /*   border: 1px dashed #999999; */
}
h1 {
  color: #fff;
  display: block;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1%;
  font-family: 'Montserrat', 'open-sans'sans-serif;
  font-weight: 900;
  font-style: normal;
}
h2 {
  color: var(--primary-color);
}
h3 {
  color: #121212;
}
/*------------- BEGIN NAVBAR ------------------*/
header {
  width: 100%;
  height: auto;
}
.logo {
  font-family: Montserrat, sans-serif;
  display: block;
  font-size: .750em;
  margin: 1.4em auto;
  background-color: #121212;
  border-radius: 10px;
  padding: 0 4em 2em;
  position: relative;
  top: -40px;
  transition: transform 0.3s ease-in-out;
}
.logo:hover {
  transform: translateY(-10px);
}
#navbar {
  position: sticky;
  top: 0;
  background-color: transparent;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  transition: background-color 0.5s ease;
  z-index: 1000;
  height: 90px;
}
/*------------------ Navbar links -------------------*/
#navbar {
  position: sticky;
  top: 0;
  background-color: #121212;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  transition: background-color 0.5s ease;
  z-index: 1000;
  height: 90px;
}
#navbar a {
  display: inline-grid;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: clamp(0.688rem, 2vw + 1rem, 1.125rem);
  padding: 2% 1%;
  transition: all 0.5s ease;
  vertical-align: middle;
  background: transparent;
}
#navbar a:hover {
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 49%, rgba(99, 99, 99, 1) 100%);
  color: white;
  border-radius: 12px;
  transition: all 0.5s ease;
  box-shadow: 0 8px 6px 0 rgba(248, 152, 60, 0.2);
  transform: translateY(-2px);
  /*  border-radius: 0 0 10px 10px;
    */
  border-radius: 0px 0px 10px 10px;
  border-bottom: 3px solid var(--primary-color);
}
#navbar a.is-active {
  border-bottom: 3px solid var(--primary-color);
}
#navbar.shrink {
  padding: 0.5%;
  background-color: #222;
  opacity: .9;
  height: 40px;
}
#navbar.shrink a {
  font-size: 10px;
  padding: 1%;
}
.grow-item {
  flex-grow: 1;
}
.shrink-item {
  flex-shrink: 1;
}
/*------------- END NAVBAR ------------------*/
.container {
  /*   max-width: 1100px; */
  margin: 0 auto;
  color: #ffffff;
  padding: 0;
}
.visitButton {
  display: block;
  padding: 10px;
  width: 80%;
  margin: 0 auto;
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
  color: #121212;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bolder;
  transition: all 0.3s ease-in-out;
  width: 230px;
}
.visitButton:hover {
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.2);
  background-color: #feead8;
  transition: all 0.5s ease;
  transform: translateY(-2px);
}
.whiteText {
    color:#ffffff!important;
}
section {
  margin: 0 auto;
  padding: min(0, 0%);
  overflow: hidden;
  display: block;
  width: 100%;
  overflow: hidden;
}
section h1 {
  color: #121212;
  font-weight: 900;
  font-family: Montserrat black;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1%;
  width: 100%;
  margin: 1em auto 0.25em;
  padding: 0;
  text-align: center;
  font-size: clamp(3.00rem, calc(0.273rem + 3.636vw), 6rem);
}
section h2 {
  color: #121212;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1%;
  width: 100%;
  margin: 1em auto 0.25em;
  padding: 0;
  text-align: center;
  font-size: clamp(3.00rem, calc(0.273rem + 3.636vw), 6rem);
  font-family: 'Montserrat black', sans-serif;
  font-weight: 900;
}
#RodGosser {
  background: #121212;
  background: linear-gradient(180deg,rgba(18, 18, 18, 1) 0%, rgba(137, 84, 33, 1) 100%);
}
#Branding {
  background: linear-gradient(65deg, #9b1e60, #ffffff, #ffffff, #27458d);
  background-size: auto;
  background-size: 200% 200%;
  animation: gradient-animation 20s ease infinite;
}
#UIUXdesign {
  background: linear-gradient(65deg, #60248c, #ffffff, #ffffff, #25b276);
  background-size: auto;
  background-size: 200% 200%;
  animation: gradient-animation 20s ease infinite;
}
#DigitalPublications {
  background: linear-gradient(65deg, #ffffff, #036eff, #f8983c, #ffffff);
  background-size: auto;
  background-size: auto;
  background-size: 200% 200%;
  animation: gradient-animation 20s ease infinite;
  height: auto;
}
#AppDevelopment {
  background: linear-gradient(65deg, #730000, #212121, #212121, #730000);
    background-size: auto;
  background-size: auto;
  background-size: auto;
  background-size: 200% 200%;
  animation: gradient-animation 20s ease infinite;
  height: auto;
}
#VideoProduction {
  background: linear-gradient(65deg, #00fff0, #ffffff, #ffffff, #00fff0);
  background-size: auto;
  background-size: auto;
  background-size: 200% 200%;
  animation: gradient-animation 20s ease infinite;
  height: auto;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*---- GRADIENT ANIMATED SECTION H1s 
.animatedHOne {
  background: linear-gradient(to right, #ffffff 20%, #f8983c 30%, #ffffff 70%, #ffffff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 3.5s ease-in-out infinite alternate;
}
@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
} --------*/
/*---- END GRADIENT ANIMATED SECTION H1s --------*/
/*------- BRANDING SECTION SCREEN -------------*/
.sectionArtdivBranding {
  background-color: #333;
  margin: 0;
  transition: transform 0.1s ease;
  z-index: 1000;
}
.sectionArtdivBranding:hover {
  transform: scale(1.2);
}
.sectionArtdivBranding:hover ~ .shadow {
  transform: translateY(10px);
}
/*--------- SHADOW. ---------------*/
.shadow {
  width: 600px;
  height: 25px;
  margin: 1em auto;
  background-color: #333;
  filter: blur(20px);
  z-index: 500;
  transition: transform 0.1s ease;
}


/*--------- IMAGE SCROLL ON HOVER. ---------------*/
.screenBranding {
  display: block;
  width: 750px;
  height: 422px;
  overflow: hidden;
  position: relative;
  border: 10px solid #b3b3b3;
  border-radius: 6px;
  margin: 0 auto;
}
.screenBranding img {
  bottom: -4186px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 4s;
  -moz-transition: top 4s;
  -ms-transition: top 4s;
  -o-transition: top 4s;
  transition: bottom 4s;
}
.screenBranding:hover img {
  bottom: 0;
  -webkit-transition: all 20s;
  -moz-transition: all 20s;
  -ms-transition: all 20s;
  -o-transition: all 20s;
  transition: all 20s;
}


/*------- Digital Publications layout. ----------*/

.contentDivDigitalPublications {
  display: flex;
  justify-content: space-around;
  gap: 50px;
  width: 75%;
  margin: 0 auto 6em;
}

.contentDivDigitalPublications img {
    width: 25%;
    flex: 1; 
    transition: transform 0.3s ease;
    
}

.contentDivDigitalPublications img:hover {
    /* box-shadow: 0 0 115px 5px rgba(248, 152, 60, 0.7) */
    box-shadow: 0 0 115px 5px rgba(0, 0, 0, 0.7)
}










/*------- App Development layout. ----------*/

.contentDivAppDevelopment {
  display: block;
  width: 75%;
  margin: 0 auto 6em;
  text-align: center;
}

.contentDivAppDevelopment img {
  transition: transform 0.3s ease;
  border-radius: 40px;
  display: inline-block;
  width: 280px;
  margin: 0 2em;
  vertical-align: middle;
}


.contentDivAppDevelopment img:hover {
    transform: translateY(10px);
}

.contentDivAppDevelopment video {
  display: inline-block;
  width: 500px;
  margin: 0 2em;
  vertical-align: middle;
}


.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.rotate-in-ver {
	-webkit-animation: rotate-in-ver 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: rotate-in-ver 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}



@-webkit-keyframes rotate-in-ver {
  0% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}
@keyframes rotate-in-ver {
  0% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}




/*------- Video Production layout. ----------*/

.contentDivVideoProduction {
  display: flex;
  justify-content: space-around;
  gap: 50px;
  width: 75%;
  margin: 0 auto 6em;
}

.contentDivVideoProduction img {
    width: 25%;
    flex: 1; 
    transition: transform 0.3s ease;
    
}

.contentDivVideoProduction img:hover {
    transform: translateY(10px);
}



.videoContainer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
	align-items: center;
  margin: 4em auto 3em;
  max-width: 100%;
}


.vertical {
  height: 40% !important;
}


.videoContainer video {
  width: 18%;
}
















/*------- UIUXdesign SECTION SCREEN -------------*/
.sectionArtdivUIUXdesign {
  background-color: #333;
  margin: 0;
  transition: transform 0.1s ease;
  z-index: 1000;
}
.sectionArtdivUIUXdesign:hover {
  transform: scale(1.2);
}
.sectionArtdivUIUXdesign:hover ~ .shadow {
  transform: translateY(10px);
}
/*--------- SHADOW. ---------------*/
.shadow {
  width: 600px;
  height: 25px;
  margin: 1em auto;
  background-color: #333;
  filter: blur(20px);
  z-index: 500;
  transition: transform 0.1s ease;
}

/*--------- IMAGE SCROLL ON HOVER. ---------------*/
.screenUIUXdesign {
  display: block;
  width: 750px;
  height: 422px;
  overflow: hidden;
  position: relative;
  border: 10px solid #b3b3b3;
  border-radius: 6px;
  margin: 0 auto;
}
.screenUIUXdesign img {
  bottom: -2030px; /* -- (-2030) --*/
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 4s;
  -moz-transition: top 4s;
  -ms-transition: top 4s;
  -o-transition: top 4s;
  transition: bottom 4s;
}
.screenUIUXdesign:hover img {
  bottom: 0;
  -webkit-transition: all 20s;
  -moz-transition: all 20s;
  -ms-transition: all 20s;
  -o-transition: all 20s;
  transition: all 20s;
}

.descriptionDiv {
  width: 30%;
  min-width: 300px;
  margin: 0 auto 3em;
  text-align: center;
  padding: 1em;
  border-radius: 10px;
}
.descriptionDiv h2 {
  color: #121212;
}
.descriptionDiv p {
  color: #121212;
  text-align: center;
  text-decoration: none;
  font-size: 0.750em;
}



.descriptionDiv p a {
  color: #f8983c;
  text-decoration: none;
}

.descriptionDiv p a:hover {
  color: #f8983c;
  text-decoration: underline;
}




.contentDivHome {
  width: 100%;
  text-align: center;
  margin: 100px 0 150px;
}

.headshot {    
  display: inline-block;
  width: 20%;
  margin: 0;
}


.headshot img {
  max-width: 100%; 
  height: auto;
  display: block;
  margin: 0;
  border-radius: 50%;
  opacity:.8;
}


.workHistory {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin: 2.5em 0 0 1em;
  vertical-align: top;
}

.workHistory h3 {
  color: #ffffff;
  font-family: Montserrat black;
  font-size: 6em;
  margin: 0;
  padding: 0;
  display: block;
}






/*--------- homepage animations --------------*/



.slide-fwd-center {
	-webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-fwd-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(160px);
            transform: translateZ(160px);
  }
}
@keyframes slide-fwd-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(160px);
            transform: translateZ(160px);
  }
}







/*------ Headshot Glitch ------------*/


.glitch {
    width: 300px; 
    height: 340px;
    background-size: cover;
    animation: glitch .5s 1 steps(1); 
}





@keyframes glitch {
    0%, 100% {
        background: url('../images/Website-Headshot.png');
        background-size: cover;
        opacity:0;
    }
    85% {
        background: url('../images/glitch-image-1768263792.png');
        background-size: cover;
        opacity:1;
    }
    87.5% {
        background: url('../images/glitch-image-1768263794.png'); 
        background-size: cover;
        opacity:0;
    }
    90% {
        background: url('../images/glitch-image-1768263797.png'); 
        background-size: cover;
        opacity:1;
    }
    
    
    
    
    92.5% {
        background: url('../images/glitch-image-1768263792.png');
        background-size: cover;
        opacity:1;
    }
    95% {
        background: url('../images/glitch-image-1768263794.png'); 
        background-size: cover;
        opacity:0;
    }
    97.5% {
        background: url('../images/glitch-image-1768263797.png'); 
        background-size: cover;
        opacity:1;
    }
}

.workHistory p strong {
    color: #ffffff;
    font-weight: 900;
    font-style: italic;
}


.experienceList {
  list-style-type: none;
  margin: 2em 0 0;
  padding: 0;
  width: 100%;
  display: block;
  font-size: .750em;
  color: #777;
}


.experienceList li {
  display: inline-block;
  padding: .10em .5em;
  line-height: 2em;
  margin: .10em .25em;
  font-style: italic;
}

.experienceList li:nth-child(odd) {
  background-color: none;
}

.experienceList li:nth-child(2n) {
  background-color: #ffffff;
  color: #121212;
  border-radius: 10px;
}



@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.experienceList li {
  list-style: none;
  padding: 5px;
  margin-bottom: 5px;
  opacity: 0;
  animation: slideIn 0.5s ease-out forwards;
}


.experienceList li:nth-child(1) { animation-delay: 01s; }
.experienceList li:nth-child(2) { animation-delay: 1.3s; }
.experienceList li:nth-child(3) { animation-delay: 1.6s; }
.experienceList li:nth-child(4) { animation-delay: 1.9s; }
.experienceList li:nth-child(5) { animation-delay: 2.2s; }
.experienceList li:nth-child(6) { animation-delay: 2.5s; }
.experienceList li:nth-child(7) { animation-delay: 2.8s; }
.experienceList li:nth-child(8) { animation-delay: 3.1s; }
.experienceList li:nth-child(9) { animation-delay: 3.4s; }








/*---------  TITLE fade in  ----------*/
.focus-in-expand {
  -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
/*---------- screen fade in LEFT ----------------*/
.fade-in-left {
  -webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation-delay: .5s;
}
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}



/*---------- screen fade in ----------------*/
.fade-in-right {
  -webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation-delay: .5s;
}
@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
/*---------- digital pub slide UP center ----------------*/
.slide-in-fwd-bottom {
	-webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}


/*---------- description fade in ----------------*/
@keyframes insetShadowPulse {
  0% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.descriptionDiv {
  animation: insetShadowPulse 3s;
  animation-delay: 1s;
}
/*---------- text drop in -- fade in ----------------*/
.slide-in-top {
  -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay: 1.5s;
}
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
footer {
  height: 200px;
  display: flex;
}
/*---- LINKED IN HOVER --------*/
footer ul.LinkedIn {
  display: block;
  width: 60px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
footer ul.LinkedIn li {
  list-style: none;
}
footer ul.LinkedIn li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  margin: 0 10px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}
footer ul.LinkedIn li a .icon {
  position: relative;
  color: #262626;
  transition: .5s;
  z-index: 3;
}
footer ul.LinkedIn li a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}
footer ul.LinkedIn li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}
footer ul.LinkedIn li a:hover:before {
  top: 0;
}
footer ul.LinkedIn li a:before {
  background: #0077b5;
}