/* colors */

:root  {
  --primary-color:      #1C2E4A;        /* Navy Blue */
  --secondary-color:    #435b81;        /* Bright Blue */
  --element-bg-color:   #f8f8ff;
  --body-bg:            #fff;
  
  --primary-gradient:   linear-gradient(90deg, rgba(28,46,74,1) 0%, rgba(143,203,155,1) 100%);
  --reverse-gradient:   linear-gradient(90deg, rgba(143,203,155,1)  0%, rgba(28,46,74,1) 100%);
  
  --font-display:       'made_sunflower_regular';
  --font-body-bold:     'brother_1816_bold';
  --font-body-black:    'brother_1816_black';
  --font-body-regular:  'brother_1816_book';
}

/* Display */

@font-face {
    font-family: 'made_sunflower_regular';
    src: url(/assets/font/sunflower/MADE Sunflower.eot);
    src: url(/assets/font/sunflower/MADE Sunflower.eot) format('embedded-opentype'),
        url(/assets/font/sunflower/MADE Sunflower.woff) format('woff'),
        url(/assets/font/sunflower/MADE Sunflower.ttf) format('truetype'),
        url(/assets/font/sunflower/MADE Sunflower.svg#made_sunflower) format('svg'),
    font-weight: 400;
    font-style: normal;
}


/* font Black */

@font-face {
    font-family: brother_1816_black;
    src: url(/assets/font/brother_1816/15-brother1816-black-web.eot);
    src: url(/assets/font/brother_1816/15-brother1816-black-web.eot) format('embedded-opentype'),
        url(/assets/font/brother_1816/15-brother1816-black-web.woff2) format('woff2'),
        url(/assets/font/brother_1816/15-brother1816-black-web.woff) format('woff'),
        url(/assets/font/brother_1816/15-brother1816-black-Web.ttf) format('truetype'),
        url(/assets/font/brother_1816/15-brother1816-black-web.svg#brother_1816_black) format('svg');
    font-weight: 700;
    font-style: normal
}

/* font Bold */

@font-face {
    font-family: brother_1816_bold;
    src: url(/assets/font/brother_1816/11-brother1816-bold-web.eot));
    src: url(/assets/font/brother_1816/11-brother1816-bold-web.eot) format('embedded-opentype'),
        url(/assets/font/brother_1816/11-brother1816-bold-web.woff2) format('woff2'),
        url(/assets/font/brother_1816/11-brother1816-bold-web.woff) format('woff'),
        url(/assets/font/brother_1816/11-brother1816-bold-web.ttf) format('truetype'),
        url(/assets/font/brother_1816/11-brother1816-bold-web.svg#brother_1816_bold) format('svg');
    font-weight: 600;
    font-style: normal
}

/* font Book */

@font-face {
    font-family: brother_1816_book;
    src: url(/assets/font/brother_1816/05-brother1816-book-web.eot);
    src: url(/assets/font/brother_1816/05-brother1816-book-web.eot) format('embedded-opentype'),
        url(/assets/font/brother_1816/05-brother1816-book-web.woff2) format('woff2'),
        url(/assets/font/brother_1816/05-brother1816-book-web.woff) format('woff'),
        url(/assets/font/brother_1816/05-brother1816-book-web.ttf) format('truetype'),
        url(/assets/font/brother_1816/05-brother1816-book-web.svg#brother_1816_book) format('svg');
    font-weight: 400;
    font-style: normal
}


.wait {
    cursor: wait; 
}

html {
  scroll-behavior: smooth;
}

.inner {
    background-color: var(--body-bg);
}

.inner.no-pad {
    padding: 0 !important;
}

.contact-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-body-bold) !important;
    color: var(--primary-color) !important;
}

.container {
    width: 80%;
}

.block-rel {
    position: relative;
}

.block-abs {
    position: absolute;
}

.navbar-toggle .icon-bar {
    background-color: var(--secondary-color);
    transition: all ease .5s;
}

#header {
    transition: all ease .5s;
}

#header {
    background: #fff;
}

.inverse .navbar-toggle .icon-bar {
    background-color: #222;
}

.logo-svg path {
    transition: all ease .5s;
}

svg .logo path {
    fill: var(--primary-color);
}

.filter {
    clear: inherit;
}

.inverse svg .logo path {
    fill: #fff;
}

.navbar-toggle {
    display: block !important;
}

.navbar {
    margin-bottom: 0 !important;
}

.nav {
    height: 100vh !important;
    width: 100%;
}

.nav-item {
    display: block;
    width: 100%;
    text-align: center;
}

.navbar-collapse.collapse.slide-collpase {
    display: none !important;
}

.navbar-collapse.collapse.slide-collpase.in {
    display: block !important;
}

.navbar-collapse.collapse {
    display: none !important;
}

.navbar-collapse.collapse.in {
    display: block !important;
}

.logo-svg {
    max-width: 120px;
    margin: 1em;
}

.logo {
    fill: var(--primary-color);
}

.hero-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.hero-overlay img {
    max-height: 100vh;
    width: 100%;
}

body, html {
    -webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
    text-rendering: geometricPrecision!important;
    max-width: 100%!important;
    overflow-x: hidden;
    border: none;
    padding: 0;
    margin: 0;
    background: var(--primary-color);
}

.carousel .item {
    height: 100vh;
    width: 100%;
    background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

.slide-1 { background-image: url(/assets/img/slides/twitter_wedding-invitation.jpg);}
.slide-2 { background-image: url(/assets/img/slides/nyr-crest-slide.jpg);}
.slide-3 { background-image: url(/assets/img/slides/twitter_agway-store-locator.jpg);}

.caption {
    background-color: var(--element-bg-color);
    padding: 3em;
    border-top: 10px solid var(--primary-color);
}

.breadcrumb {
    background-color: var(--secondary-color) !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.breadcrumb a, .breadcrumb li {
    color: #fff !important;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>





/*----------------------------------------------------------------
  Carousel Fade
----------------------------------------------------------------*/

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 20;
}


@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.carousel-inner .item  {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

main.inner {
    padding-top: 5em;
}

main {
     overflow: hidden;
}
/*
h1, h2, h1 span {
    font-family: 'brother_1816_black' !important; 
}

h3, h4, h5, h6 {
    font-family: 'brother_1816_bold' !important; 
}
*/
p, span, li {
    font-family: 'brother_1816_book' !important; 
}
.nav-item a {
    font-family: 'brother_1816_bold' !important; 
    font-size: 3em;
    letter-spacing: 2px;
    line-height: 100% !important;
}

.nav-item:first-child {
    margin-top: 35vh;
}

.greeting {
    font-size: 28px;
    font-family: var(--font-display) !important;
    font-weight: bold;
}

.intro-text {
    font-size: 18px;
}

p {
    color: #767676 !important; 
    font-size: 1.25em;
    line-height:150%;
    margin: 0 0 1.5em !important;
}

footer h4, footer p {
    color: var(--secondary-color) !important;
}

footer {
    padding-top: 3em;
}

footer a {
    color: #fff !important;
}

footer .footer-logo path {
    fill: #17263d !important;
}

h5 {
    font-size: 1.25em !important;
}

.nav-item a {
    text-transform: uppercase;
}

.row-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flexbox-list {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap!important;
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important;
}

.flexbox-media {
    margin-bottom: 1em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    flex-direction: column;
}

.flexbox-media * {
    width: 100%;
}

.full-height-block {
    position: relative;
    text-align: center;
    width: 100%;
    height: 80vh!important;
    max-height: 100vh;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
}

.full-height-wrap{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow-x: hidden;
    overflow-y: hidden;
}

.block-scroll {
    height: 150vh !important;
    max-height: 150vh !important;
    overflow: auto;
}

.text-upper {
    text-transform: uppercase;
}

.text-white {
    color: #fff !important;
}

.text-hero-head {
    font-size: 4em;
}

.intro {
    background-image: url(/assets/img/hero.jpg);
    background-position: center;
    background-size: cover;
    background-blend-mode: normal;
    background-color: var(--primary-color);
}


.intro-photo-container img {
    object-fit: none;
    height: 100%;
    width: 100%;
}

.intro-text-container {
    overflow: inherit;
}

.intro-text-container h1 {
    margin: 0 auto;
    max-width: 20%;
    font-family: brother_1816_bold !important;
    text-transform: upper;
}

.intro-text-container h1:after {
 content: "";
    display: block;
    height: 5px;
    width: 50px;
    margin: 20px auto;
    background-color: var(--secondary-color);
}

#text-knockout{
    background: url(/assets/img/details/xmas.jpg);
      
    background-attachment: fixed;
    background-size: cover;
    
    -webkit-text-fill-color: rgba(0,0,0,0.2);
    -webkit-background-clip: text;
      
    text-align: center;
    
    color: transparent;
    
}

#text-knockout .span {
    font-family: var(--font-body-bold)  !important;
}


.img-icon {
    max-width: 200px;   
}

.img-pad-y {
    padding: 1em 0;   
}

.img-pad-x {
    padding: 0 1em;   
}

a {
    color: var(--secondary-color) !important;
}

.btn {
    font-family: var(--font-body-bold) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.btn-blue {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
    padding: 1em 3em !important;
}

.btn-green {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
}

.btn-gradient {
    background: var(--primary-gradient) !important;
    color: #fff !important;
}

.btn-gradient-reverse {
    background: var(--reverse-gradient) !important;
    color: #fff !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    color: #fff  !important;
    border-color: transparent !important;
}

.btn-default {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: transparent !important;
}

.btn-download {
     background-color: var(--primary-color);
     color: #fff !important;
     font-weight: 700 !important;
}

.btn-social {
    -webkit-appearance: none !important;
}

.btn-social img {
   height: 30px;
}

.intro {
    margin-top: -20px;
}

.portfolio {
    padding: 3em 0;
}

.portfolio-image-wrap img {
    max-width: 100%;
    border-radius: 10px; 
}

.portfolio-image-wrap {
    position: relative;
}

.portfolio-data-wrap {
    position: absolute;
    height: 100%;
    top: 30%;
    opacity: 0;
}

.portfolio-image-wrap img:hover .portfolio-data-wrap {
    opacity: 1 !important;
}

.project-meta {
    color: var(--secondary-color);
}

.project-hero {
    background-color: #eee;
    padding: 10em 0;
    background-size: cover;
    box-shadow: inset 5000em 1em rgb(0 0 0 / 50%);
}

.back-section {
    margin-top: 5em;
    padding: 1em 0;
    background-color: var(--secondary-color);
}

.back-section h4 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.back-section .btn-blue {
    background-color: var(--primary-color) !important;
}

.back-section span.tiny {
    color: #fff;
    font-family: 'brother_1816_bold' !important;
}

.project-hero h1 {
    color: #fff !important;
}

.project-hero p strong {
    background-color: var(--secondary-color) !important;
    margin: 0 !important;
    color: #fff;
    padding: 10px;
}

.new-york-rangers-crest-third-jersey-concept { background-image: url(/assets/img/slides/rangers-liberty-hero.jpg);}
.Brick---Mortar--The-Buildings-of-our-Story { background-image: url(/assets/img/slides/home-hero.jpg);}

#portfolioList .project-image {
    border-radius: 0;
}

.project-image {
    width: 100%;
    border-radius: 1em;
}

.project-image-wrap {
    position: relative;
    margin-bottom: 2em;
}

.project-data-container {
    padding-bottom: 3em;   
}

.project-title {
    margin-top: .25em;
}

.btn-popover {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.popover {
    margin-right: 22px;
    max-width: 100% !important;
}

#header {
    width: 100%;
}  

#portfolioList {
    padding: 0 !important;
}

#portfolioList .col-sm-3, #portfolioList .col-sm-6, #portfolioList .col-sm-12, .full-height-block .col-sm-6 {
    padding: 0 !important;
}

.portfolio-item {
    position: relative;
}

.portfolio-item-data-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    
    margin: auto;
    height: 100px;
    width: 100%;
    
    text-align: center;

    opacity: 0;
    transition: all 0.8s ease 0s;
}

.portfolio-item .image-overlay {
    width: 100%;
    height: 100%;
    
    position: absolute;
    top: 0;
    z-index: 1;
    
    background: rgba(28, 46, 74,.92);
    
    opacity: 0;
    transition: all 0.8s ease 0s;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

#portfolioNav {
    padding: 2em 0;
    background-color: #eee;
}

.portfolio-item:hover .portfolio-item-data-wrap,
.portfolio-item:hover .image-overlay {
    opacity: 1;
}

.portfolio-item-data-wrap .project-title {
    color: #fff !important;
}

.portfolio-item .category {
    color: #fff;
}

#welcome {
   width: 100%;
   /*background-color: var(--primary-color);*/
   padding: 10em 0;
   background-image: url(/assets/img/header-bg.jpg);
   background-size: cover;
   background-position: center center;
}
/*
#welcome h1, #welcome p {
    color: #fff !important;
}

*/

#welcome .btn {
    margin-top: 1em;
}

.welcome-text {
    top: 30%;
    left: 0;
    width: 50%;
    z-index: 9;
}

.shadow-white {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: rgba(255,255,255,.5);
}

.shadow-dark {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: rgba(0,0,0,.5);
}


.project-link {
    z-index: 2;
}

.fixed-nav {
    top: 50%;
    right: 5%;
    z-index: 10;
}

.block-fixed {
    position: fixed;
}

.carousel-indicators {
    position: static;
}

.carousel-indicators li {
    display: block;
}

.carousel-indicators li.selected {
    background-color: red !important;
    border-color: red;
}

.full-height-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow-x: hidden;
    overflow-y: hidden;
}

.padded-inner {
    padding: 0 7em;
}

.core-web-template {
    background-image: url(/assets/img/core-header.jpg);
}

.Liquid-Retailer-Branding---Marketing-Materials {
    background-image: url(/assets/img/liquid_header.jpg);
    background-position: center;
}

.nmr-hoodie {
    background-image: url(/assets/img/details/nmr-hoodie-details_1.jpg);
    background-position: center;
}

.Utica-College-Pioneers-Jersey-Redesign {
    background-image: url(/assets/img/details/uc_header.jpg);
    background-position: center;
}

.New-York-Rangers-Liberty-Jersey-Reverse-Retro-Redesign {
    background-image: url(/assets/img/details/liberty_header.jpg);
    background-position: center;    
}

.incubus {
    background-image: url(/assets/img/details/incubus_header.jpg);
    background-position: center;    
}

.Agway-Corporate-Website {
    background-image: url(/assets/img/details/agway_header.jpg);
    background-position: bottom;  
}

.The-Kawa---Zinkievich-Wedding {
    background-image: url(/assets/img/details/wedding_header.jpg);
    background-position: center;  
}

.New-Media-Retailer-2020-Trade-Show-Materials {
    background-image: url(/assets/img/details/show_header.jpg);
    background-position: center;  
}

.Blueshirts-Breakaway-Website {
    background-image: url(/assets/img/details/bsb_header.jpg);
    background-position: center;      
}

.Church-of-Kakko {
    background-image: url(/assets/img/details/cok_header.jpg);
    background-position: center;       
}

.New-York-Rangers-Crest-Jersey-Concept {
    background-image: url(/assets/img/details/crest_header.jpg);
    background-position: center;          
}

.contact-inner {
    background-image: url(/assets/img/bob-intro-color.jpg);
    background-position: bottom;  
    height: 100%;
}

.Utica-Comets-Reverse-Retro-Concept {
    background-image: url(/assets/img/details/comets_header.jpg);
    background-position: center;      
}

.New-York-Rangers-Pajama-Jerseys-Modernization {
    background-image: url(/assets/img/details/pajama_header.jpg);
    background-position: center;      
}

.Pet-Store-Websites-Postcard {
    background-image: url(/assets/img/details/postcard_header.jpg);
    background-position: bottom;         
}

.Shopify-Web-Ads {
    background-image: url(/assets/img/details/shopify_header.jpg);
    background-position: bottom;     
}

.Valton-Jackson-Album-Art{
    background-image: url(/assets/img/details/valton-header.jpg);
    background-position: bottom;     
}

.formFooter.f6 {
    display: none !important;
}


/*----------------------------------------------------------------
   Media Queries
----------------------------------------------------------------*/

/* Mobile */
@media screen and (max-width: 449px) {
    .full-height-block {
        height: auto !important;
    }
    
    .full-height-inner {
        top: 0 !important;
        transform: none !important;
    }
    
    .padded-inner { 
        padding: 0 2em;
    }
    
    .logo-svg {
        width: 100%;
    }
    
    .navbar-nav {
        height: auto !important;
    }
    
    .container {
        width: 100%;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .back-section .btn {
        white-space: normal;
    }
    
    .quick-images, .quick-images .col-sm-6,
    .project-image-container, .project-image-container .project-image-wrap,
    .post-images, .post-images .col-sm-6,
    .lead-images, .lead-images .col-sm-12{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .project-image-wrap {
        margin-bottom: 5px !important;
    }
    
    .caption {
        padding: 1.5em;
    }
    
    .footer-block {
        padding: .5em 1em;
    }
    
    .navbar-nav {
        margin: 1em 0 !important;
    }
    
    #js-nav-responsive-collapse {
        padding: 0;
    }
    
    .block-scroll {
        height: auto !important;
        max-height: none !important;
    }
    
}

#js-nav-responsive-collapse {
    position: fixed;
    top: 6.4em;
    background-color: rgb(255, 255, 255);
    z-index: 9;
    left: 0px;
    width: 100%;
}

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

	

}

/* Medium Devices, Laptops Desktops */
@media screen and (max-width: 992px) {

	
}

/* Large Devices, Wide Screens */
@media screen and (max-width: 1200px) {

}