/*---KERRY SMYTH CUSTOM PORTFOLIO PAGE JUNE 2019---*/

@import url('https://fonts.googleapis.com/css?family=Rufina:400,700|Titillium+Web:200i,300i,400,400i,700|La+Belle+Aurore&display=swap');

/*html {
    scroll-behavior: smooth;
}*/

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.2rem;
}

/* TYPE ---------------------------------- */
/* TYPE ---------------------------------- */

a { transition:all .2s ease-in; }

h1, h2, h3 {
    font-family: 'Rufina', serif;    
}

.small-shadow {
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

h2 + p.lead {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 200;
}

a.white-link {
    color: antiquewhite;
}

a:hover.white-link, a:active.white-link {
    color: #151616;
}

a.white-red-link {
    color: antiquewhite;
}

a:hover.white-red-link, a:active.white-red-link {
    color: rgb(165,2,2)
}

a.grey-white-link {
    color: #C7C7C7;
}

a:hover.grey-white-link, a:active.grey-white-link {
    color: #E0E0E0;
}



/* LOAD ANIM ---------------------------------- */
/* LOAD ANIM ---------------------------------- */

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .fadeInDown {
    animation-name: fadeInDown;
  }

@keyframes fadeInUp {
    from {
        opacity:0;
        transform:translate3d(0, 100%, 0)
    }
    to {
        opacity:1;
        transform:none
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

/*---NAVBAR---*/
/*---NAVBAR---*/

.navbar.bg-light {
    background: 
    linear-gradient(135deg, 
    rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 250px,
    rgba(255,255,255,0) 250px, rgba(255,255,255,0) 260px, 
    rgba(255,255,255,0.8) 260px, rgba(255,255,255,0.8) 295px,
    rgba(255,255,255,0) 295px, rgba(255,255,255,0) 100%), 
    linear-gradient(45deg,
    rgba(255,255,255,0) 0, rgba(255,255,255,0) 240px,
    rgba(255,255,255,0.15) 240px, rgba(255,255,255,0.15) 270px,
    rgba(255,255,255,0) 270px, rgba(255,255,255,0) 275px, 
    rgba(255,255,255,0.3) 275px, rgba(255,255,255,0.3) 310px,
    rgba(255,255,255,0) 310px, rgba(255,255,255,0) 100%) !important;
}

.navbar * {
    transition:all 250ms ease-in;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

/*---SMALL LOGO SVG---*/
/*---SMALL LOGO SVG---*/

#navbar-k-logo {
    width: 203px;
    height: 60px;
}

.top-nav-collapse #navbar-k-logo {
    width: 142.1px;
    height: 42px;
}

#navbar-k-logo .st0 {
    fill:#272524
}

/*---LARGE LOGO SVG ANIM---*/
/*---LARGE LOGO SVG ANIM---*/

#k-logo {
    max-width: 250px;
}

#mask {
    filter:url(#Adobe_OpacityMaskFilter);
}

/*---AVOIDING FF MASK ISSUE FOR NOW---*/
@-moz-document url-prefix() {
    #texture {
        opacity: 0 !important;
    }
  }

#texture {
    mask: url(#texture_1_);
    /*mask-size: cover;*/
    fill: rgba(255,255,255,0.8);
    animation: k-logo-texture-anim 1s ease-in 4s backwards;
}

@keyframes k-logo-texture-anim {
    0% {     
        fill: rgba(255,255,255,0);   
    }
    95% {
        fill: rgba(255,255,255,0.7);
    }

    100% {
        fill: rgba(255,255,255,0.8);
    }
}

#k-polygon {
    stroke: #fff;
    fill: none;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke-dasharray: 7400;
    opacity: 1;
    animation: k-logo-stroke-anim 4000ms cubic-bezier(0,.23,1,.2) 500ms backwards;
}

@keyframes k-logo-stroke-anim {
    0% {
        opacity: 0;
       
        stroke-dashoffset: 7400;
    }
    30% {
        opacity: 1;
        stroke-dashoffset: 7400;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/*---INTRO TO SECTIONS---*/
/*---INTRO TO SECTIONS---*/

[id$="-intro"] h2 {
    animation-delay: 1200ms;
    
}

[id$="-intro"] p.lead {
    animation-delay: 800ms;
    
}

[id$="-intro"] .row {
    animation-delay: 1600ms;
    
}

/*---SPECIFIC SECTIONS---*/
/*---SPECIFIC SECTIONS---*/

[id^="section-"] {
    box-shadow: inset 0 6px 8px -6px rgba(0,0,0,0.3);
    position: relative;
}

#section-portfolio-intro {
    background: #010101; /*#1f1e21;*/
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

#section-pasta-packaging {
    background: url(../images/portfolio-images/piccolo-pasta-logo-5-percent.png) calc(100% - 20px) 15% / 30% auto no-repeat fixed #f5f5f5;
}

#section-beer-packaging {
    background: url(../images/portfolio-images/seven-by-nine-beer-logo-grey.png) 20px 15% / 30% auto no-repeat fixed #D93527;
    color: #fff;
}

#section-brand-evolution {
    background: url(../images/portfolio-images/nintendo-old-logo-1950.png) 20px 15% / 30% auto no-repeat fixed #151616;
    color: #fff;
}

/*HORIZONTAL SCROLL ANIM*/
@keyframes animatedBackground {
	from { background-position: -500% 0; }
	to { background-position: 500% 0; }
}

/*HORIZONTAL SCROLL ANIM*/
#section-brand-evolution .bg-horiz-anim-scroll {
    height: 350px;
    background: url(../images/portfolio-images/nintendo-brand-evolution-timeline-hoarding-design-transparent.png) 100% 0 / auto 100% repeat-x;
	animation: animatedBackground 250s linear infinite;
}

#section-interactive-display {
    background: url(../images/portfolio-images/imperial-seal-of-japan.png) calc(100% - 20px) 15% / 30% auto no-repeat fixed #6E94A6;
    color: #fff;
}

/*#9E9635 LIGHT GREEN*/
/*#8C8C8C GREY*/
/*#0076B8 BLUE*/
/*#E17B1B ORANGE*/

#section-paper-packaging {
    background: url(../images/portfolio-images/lord-ariston.png) 20px bottom / 30% auto no-repeat fixed #407271;
    color: #fff;
}

#section-restaurant-rebranding {
    background: url(../images/portfolio-images/rebrand-banana-leaf-vertical-logo-10.png) calc(100% - 20px) 15% / 30% auto no-repeat fixed #fafae4;
    /* GREEN #a3be30*/
}

#section-band-pack {
    background: url(../images/portfolio-images/kurtis-blow-ripped-edge-7.png) 20px bottom / 35% auto no-repeat fixed #5784a6;
    color: #fff;
    box-shadow: inset 0 6px 8px -6px rgba(0,0,0,0.3), 0 6px 8px -6px rgba(0,0,0,0.4);
}

/* CAROUSEL OVERRIDE (FADE) ---------------------------------- */
/* CAROUSEL OVERRIDE (FADE) ---------------------------------- */

.carousel-inner {
    box-shadow:0 2px 4px rgba(0,0,0,0.15);
}

.carousel-indicators {
    position: relative;
}

.carousel-indicators li {
    width:11.5%;
    height: auto;
    max-height: 87px;
    overflow: hidden;
    text-indent: 0;
    border: 2px solid transparent; 
}

.carousel-indicators li.active {
    border-color: #e17b1b;
}

.carousel-indicators li:hover {
    opacity: 1;
}

/*[class^=carousel-control]{
    display:none
}*/

.carousel-item{
    opacity:0;
    transition:opacity .6s ease!important
}

/*.carousel-item:after{
    content:"";
    width:100%;
    height:10px;
    position:absolute;
    bottom:0;
    left:0;
    box-shadow:inset 0 -10px 7px -10px rgba(0,0,0,.3)
}*/

.carousel-item-next,.carousel-item-prev{
    left:0!important;
    transform:none
}
.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{
    transform:none
}
@supports (-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d){
    .active.carousel-item-left,.active.carousel-item-right,.carousel-item-next,.carousel-item-next.carousel-item-left,.carousel-item-prev,.carousel-item-prev.carousel-item-right{
        transform:none
    }
}
.active.carousel-item-left,.active.carousel-item-right{
    transform:none
}
.carousel-inner .active.carousel-item-left,.carousel-inner .active.carousel-item-right,.carousel-inner .carousel-item{
    opacity:0
}
.carousel-inner .active,.carousel-inner .carousel-item-next.carousel-item-left,.carousel-inner .carousel-item-prev.carousel-item-right{
    opacity:1
}

/* GENERIC ---------------------------------- */
/* GENERIC ---------------------------------- */

.border-trans-2 {
    border: 2px solid transparent;
}

.border-1 {
    border: 1px solid #f7f7ff;
    box-shadow:1px 1px 3px rgba(0,0,0,0.07);
}

/*==============================SIDE NAV STYLES==============================*/
/*==============================SIDE NAV STYLES==============================*/

#sideNav.fixed-top {
    top: 50%;
    right: -20px;
    left: auto;
    transform: translateY(-50%);	
    z-index: 999;
    transition: all .2s ease-in;
}

#sideNav.fixed-top.side-nav-move { 
    right: 20px;
}

#sideNav .list-group
{
	list-style: none;
	margin: 0;
	padding: 0;	
}

/*#sideNav .list-group a {
	outline: 0;
	vertical-align:top;
	margin: 0 0 0 15px;
	position: relative;
	top:-5px;
}*/

#sideNav .list-group li a
{
	width:10px;
	height:10px;
	font-size:0;
    position: relative;
    margin: 7px 0;
	padding: 5px;
    outline: 0;
	background-color:none;
	border:3px solid #292828;/*#bdc3c7;*/
	border-radius:50%;
    cursor: pointer; 
}

#sideNav .list-group li a.active
{
    border-color:rgb(165, 2, 2);
    background: rgba(0,0,0,0.8);
}

#sideNav .list-group li a:hover.active
{
	border-color:#fff;
	background: #292828;
}

#sideNav .list-group li a:hover
{
	background-color:#FFF;
	border-color:#292828;	
}

/* MARGINS ---------------------------------- */
/* MARGINS ---------------------------------- */

.mt-10 {
    margin-top: 6rem;
}

.mb-10 {
    margin-bottom: 6rem;
}

/* PADDING TOP + BOTTOM ---------------------------------- */
/* PADDING TOP + BOTTOM ---------------------------------- */

.pt-10 {
    padding-top: 6rem;
}

.pb-10 {
    padding-bottom: 6rem;
}

.pt-15 {
    padding-top: 9rem;
}

.pb-15 {
    padding-bottom: 9rem;
}

.pt-20 {
    padding-top: 12rem;
}

.pb-20 {
    padding-bottom: 12rem;
}

/* PADDING RIGHT LEFT ---------------------------------- */
/* PADDING RIGHT LEFT ---------------------------------- */

.no-padding-rl [class*="col-"]
{ 
    padding-left: 0;
    padding-right: 0;
}

/* FOOTER ---------------------------------- */
/* FOOTER ---------------------------------- */

#page-footer {
    background: url(../images/portfolio-images/texture-bg.png) repeat fixed #474747;
    color: #aaa;
    /*color: #808080;*/
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

#page-footer h2 {
    text-shadow: 0.5px -1px 1px #000, 0 1px 1px #555;
    color: #222;
}

#page-footer p.signed {
    font-family: 'La Belle Aurore', cursive;
    font-size: 7rem;
    color: #DCDCDC;
    text-shadow: 0 2px 2px rgba(0,0,0,0.7);
    letter-spacing: 0.04em;
}

/* SCROLL TO TOP ---------------------------------- */
/* SCROLL TO TOP ---------------------------------- */

#to-top {
    opacity: 0;
    width: 40px;
    height: 40px;
    position: fixed;
    text-align: center;
    padding-top: 2px;
    color: #01c3f0;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 1;
    -webkit-transition: 350ms;
    transition: 350ms;
}

#to-top.hidden-top-btn {
    position: fixed;
    right: 50px;
    bottom: -20px;
}

#to-top.visible-top-btn {
    opacity: 1;
    right: 50px;
    bottom: 20px;
}

#to-top {
    color: #292828;
}

#to-top:hover,
#to-top:active {
    color: #e17b1b;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.2);
}

/* It's not tragic to die doing what you love ---------------------------------- */
/* It's not tragic to die doing what you love ---------------------------------- */

@media (min-width: 576px) {
    .navbar {
        max-width: 440px;
    }

    h2 {
        font-size: 5.5rem;
        letter-spacing: 0.02em;
    }
    
    h2 + p.lead {
        font-size: 1.9rem;
    }
    
    p {
        letter-spacing: 0.02em;
    }
}

@media (min-width: 992px) {
    .row.no-padding-rl {
        margin-right: 0;
        margin-left: 0;
    }
}

@media (min-width: 1200px) {
    .cross-mask-bg {  
        background: radial-gradient(ellipse at 10% 48%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 50% 0%,rgba(0,0,0,1) 85%), url(../images/portfolio-images/x-square.svg) 0 0 / 23px 23px repeat fixed;
       -webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0) 100%) fixed;
        mask-image: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0) 100%) fixed;
    }
}

@media (min-width: 1600px) {
    .container-fluid:not(.full-width) {
        max-width: 1600px;      
    }
    /*---TARGET CHROME HACK---*/
    /*---FIXED FOOTER CAUSING ISSUE IN FF---*/
    /*@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
        body {
            margin-bottom: 900px;
        }
        #page-footer {
            position: fixed;
            bottom: 0;
            min-height: 900px;
            z-index: -1;
        }
    }*/
}