@font-face {
    font-family: HelveticaNeueCondensedBold;
    src: url("fonts/HelveticaNeue-CondensedBold.ttf");
    
}
@font-face {
    font-family: HelveticaNeue;
    src: url("fonts/HelveticaNeue.ttf");
}
@font-face {
    font-family: HelveticaNeueItalic;
    src: url("fonts/HelveticaNeue-Italic.ttf");
}
/* GENERAL STYLES */
html {
    scroll-behavior: smooth;
}
img {
    max-width:100%;
}
h1 {
    font-family: fairplex-narrow, serif;
    font-weight: 500;
    font-style: italic;
    padding-top:2px;
}
h2 {
    font-family: HelveticaNeueCondensedBold;
    font-size:28px;
    letter-spacing:2px;
    padding-bottom:4px;
}
h3 {
    font-family:HelveticaNeue;
    font-size:20px;
    padding-bottom:4px;
}
h4 {
    font-family:HelveticaNeueItalic;
    font-size:18px;
    padding-bottom:5px;
}
h5 {
    font-family:HelveticaNeue;
    font-size:18px;
    padding: 5px 0px 4px 0px;
}
h6 {
    font-family:HelveticaNeueItalic;
    font-size:16px;
    padding-bottom:5px;
}
p {
    font-family:HelveticaNeue;
    font-size:14px;
    line-height:18px;
    padding-top:20px;
}
 .award_title p {
    font-family:HelveticaNeueCondensedBold;
 }

/* CONTACT CONTAINER */
.contact_container{
    width:100%;
    background-color:black;
    padding-bottom:5px;
    position:absolute;
    display:none;
    z-index:1;
}
.contact_container_flex {
    width:95%;
    display:flex;
    flex-direction:column;
    padding:30px 0px 4px 0px;
    margin:auto;
}
.x {
    display:flex;
    flex-direction:row;
    justify-content: flex-end;
    padding-bottom:20px;
    width:100%;
    margin:auto;
    cursor:pointer;
}
.contact_wrapper {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:nowrap;
    width:100%;
    margin:auto;
    padding-bottom:20px;
}
.contact_info {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    flex-wrap:nowrap;
    width:60%;
}
.contact_info_img {
    display:flex;
    align-self:center;
    justify-content: center;
    width:10%;
}
.email {
    width:90%;
    display:flex;
    flex-direction:column;
    padding-left:40px;
    justify-content: center;
}
.email p {
    font-family:HelveticaNeue;
    font-size:20px;
    padding-top:0px;
    padding-bottom:10px;
    color:white;
}
.email a {
    font-family:HelveticaNeueItalic;
    font-size:16px;
    font-size:16px;
    letter-spacing:1px;
    text-decoration:none;
    color:#ffcc02;
    cursor:pointer;
}
.contact_thanks {
    width:40%;
    text-align:right;
}
.contact_thanks img {
    width:100%;
}
.yellow {
    background-color:#ffcc02;
    height:4px;
    width:100%;
    margin:auto;
    border:none;
}


/* NAV STYLES */
 nav {
    background:white;
    position:sticky;
    top:0;
    z-index:1;
 }
 .nav_index {
    display:none;
    position:fixed;
    width:100%;
    background-color:white;
 }
 .mobile_nav_flextwo{
    display:none;
 }
 .nav, .nav_index_flex_wrapper {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content: space-between;
    width:95%;
    margin:auto;
    padding-bottom:5px;
    
 }
 .nav_secondary {
    padding-top:5px;
 }
 .nav_logo {
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    align-items:center;
    width:50%;
 }
 .nav_logo_flextwo {
    padding-top:15px;
 }
 .nav_logo_flextwo h1 {
    font-size:14px;
    padding-top:0px;
 }
 .nav_logo_content {
    width:120px;
    height:70px;
    background-image:url("images/nav_logo.jpg");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    margin-top:10px;
 }
 .nav_logo_content:hover {
    background-image:url("images/nav_logo_hover.gif");
 }
 .li_flex { 
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content: flex-end;
    align-items:center;
    width:50%;
    margin-top:20px;
 }
 .li_flex li a, .li_flex .contact_display {
    font-family: fairplex-narrow, serif;
    font-weight: 400;
    font-style: normal;
    font-size:20px;
    letter-spacing:1px;
    margin: 0px 20px;
    text-decoration:none;
    color:black;
    background-image: linear-gradient(black, black);
    background-size: 0% 0.05em;
    background-position-y: 100%;
    background-position-x: 0%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in-out;
 }
 .li_flex li a:hover, .li_flex li a:active, .li_flex li a:focus,  .li_flex .contact_display:hover, .li_flex .contact_display:active, .li_flex .contact_display:focus {
    background-size: 100% 0.075em;
    cursor:pointer;
 }
 /* INDEX MARQUEE STYLES */
 .marquee{
    background-color:black;
    height:40px;
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    text-align:center;
    align-items:center;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
 }
 
 .marquee_text {
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-between;
    width:95%;
    
 }
 .marquee_text h1 { 
    font-size:14px;
    color:white;
    letter-spacing:1px;
 }

 span {
    padding: 0px 15px;
 }



 /*MAIN CONTENT STYLES*/
.content_wrapper {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    width:95%;
    margin:auto;
    padding-top:50px;
}
.img_wrapper {
    width:60%;
}
.img_wrapper img {
    padding-bottom:20px;
}
.img_wrapper .img_wrapper_double {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:no-wrap;
    justify-content: space-between;
    margin:auto;
}
.img_wrapper .img_wrapper_double img {
    width:48%;
}
.iframe {
    margin-bottom:20px;
}
.info_wrapper {
    padding-left:20px;
    width:40%;
    float:right;
}
.info_sticky {
    position:sticky;
    top:160px;
    padding-bottom:20px;
    z-index: index -1;
}
.info_wrapper p {
    padding-right:10px;
    text-align:left;
}
.button{
    padding: 25px 0px 15px 0px;
    display:none;
}
.button a {
    position:relative;
    padding: 11px 20px 11px 10px;
    text-align:center;
    color:black;
    font-family:HelveticaNeueItalic;
    font-size:15px;
    font-weight:800;
    text-decoration:none;
    letter-spacing:.5px;
}
.button a:hover {
    color:white;
}
 .button a svg,  .button a svg rect {
    position:absolute;
    top:0;
    left:0;
    fill:transparent;
    z-index:-1;
    fill:#ffcc02;
}
.button a svg rect {
    stroke:black;
    stroke-width:2px;
    transition:1s;
}
.button a:hover svg rect {
    fill:black; 
    color:white;
}
.scroll_button_wrapper {
    display:none;
    position:fixed;
    bottom:30px;
    right:25px;
    z-index:1;
}
.scroll_button {
    background-image: url("images/scroll_button.png");
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    width:50px;
    height:50px;
}
.scroll_button_label {
    font-family:HelveticaNeueItalic;
    font-size:12px;
    color:black;
    border-radius: 20px;
    letter-spacing:.5px;
    width:100px;
    height:20px;
    position:fixed;
    z-index:1;
    bottom:30px;
    right:20px;
    text-align:center;
}
.scroll_button_wrapper:hover .scroll_button {
    background-image: url("images/scroll_button_hover.png");
}
.scroll_button_label:after {
    content:'TO THE TOP!';
    background-color:#ffcc02;
    border-color:black;
    border-width: 1.5px;
    border-style:inset;
    padding:3px;
    border-radius:20px;
    bottom:10px;
    right:60px;
    position: absolute;
    width: 100%;
    height:20px;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.scroll_button_label:hover:after {
    transform: scaleX(1);
    transform-origin: bottom right;
}

/* PROJECT REEL STYLES */
.project_reel_wrapper {
    width:95%;
    margin:auto;
    padding-top:50px;
}
.project_reel_wrapper h2, .slide_wrapper h2, .slide_wrapper_2 h2 {
    padding: 2px 0px 10px 2px;
    background-color:#ffcc02;
}
.project_reel, .project_reel_index, .project_reel_index_three {
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    flex-wrap:nowrap;
}

.project_reel_index_three {
    justify-content: center;
}
.project_reel_index, .project_reel_index_three {
    padding-bottom:50px;
}
.reel_container, .reel_container_center {
    width:33%;
}
.reel_container_center {
    padding:0px 20px;
}
.reel_img img {
    filter:grayscale(100%);
}
.reel_img img:hover {
    filter:grayscale(0%);
    transition: 0.3s;
}

/* SLIDESHOW STYLES */



/* Slideshow container */
.slide_wrapper_2 {
    padding: 0% 2%;
}

.slideshow_container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  box-sizing:border-box;
}

.slideshow_container_2 {
    max-width: 1980px;
    position: relative;
    margin: auto;
    box-sizing:border-box;
}

/* Hide the images by default */
.slide {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 35px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}












footer {
    background-image: url("images/footer_img.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    height:180px;
    width:100%;
    margin-top:50px;
}
footer p {
    text-align:center;
    color:white;
    padding-top:100px;
}
/* SELECT STYLES */
.pupperoni_flex_one, .pupperoni_flex_two{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    width:100%;
    justify-content: space-between;
}
.pupperoni_flex_one img {
    width:31.5%;
}
.pupperoni_flex_two img{
    width: 48.5%;
}


/* MEDIA QUERIES */
/* TABLET STYLES */
@media screen and (max-width: 1000px) and (min-width: 200px) {

    .marquee_text h1 {
        font-size:12px;
    }
    /* TABLET MAIN CONTENT STYLES */
    .content_wrapper {
        flex-direction:column-reverse;
        width:90%;
    }
    .img_wrapper {
        width:100%;
        margin:auto;
    }
    .info_wrapper {
        width:90%;
        margin:auto;
        float:none;
        padding-left:0px;
        padding-bottom:50px;
    }
    /* TABLET PROJECT REEL STYLES */
    .project_reel_wrapper {
        width:90%;
    }
    /* TABLET CONTACT CONTAINER STYLES */
    .email {
        padding-left:20px;
    }
    .contact_info {
        width:50%;
        flex-direction:column;
    }
    .contact_info_img {
        align-self: flex-start;
        padding: 0px 0px 20px 20px;
    }
    .contact_thanks {
        width:50%;
        display:flex;
        align-items:flex-end;
    }
    footer p {
        padding-top:110px;
        font-size:12px;
        line-height:14px;
        padding-left:10px;
        padding-right:10px;
    }
}

@media screen and (max-width: 780px)  {
    .marquee_cut {
        display:none;
    }
}
/* MOBILE STYLES */
@media screen and (max-width: 640px) {
    /* MOBILE NAV STYLES */
    .nav_logo_flextwo {
        display:none;
    }
    .mobile_nav_flextwo {
        background-color:black;
        height:50px;
        display:flex;
        flex-direction:row;
        justify-content: space-around;
        text-align:center;
     }
     .mobile_nav_flextwo h1 {
        font-size:16px;
        color:white;
        letter-spacing:1px;
        align-self:center;
     }
     .marquee {
        display:none;
     }
    /* MOBILE CONTACT CONTAINER */
    .contact_wrapper {
        flex-direction:column;
    }
    .contact_info {
        width:100%;
    }
    .contact_info_img {
        display:none;
    }
    .contact_thanks {
        padding-left:20px;
        padding-top:40px;
    }
    .x {
        padding-bottom:0px;
    }
    .button a {
        padding: 11px 0px 9px 10px;
    }
    /* MOBILE MAIN CONTENT STYLES */
    .scroll_button_wrapper:hover .scroll_button {
        background-image: none;
    }
    .scroll_button_label:after {
        display:none;
    }
    .scroll_button_label:hover:after {
        display:none;
    }
    .scroll_button_wrapper:active .scroll_button {
        background-image: url("images/scroll_button_hover.png");
    }
    /* MOBILE PROJECT REEL WRAPPER */
    .project_reel, .project_reel_index, .project_reel_index_three {
        flex-direction:column;
    }
    .reel_container, .reel_container_center {
        width:100%;
    }
    .reel_container_center {
        padding: 30px 0px;
    }
    /* MOBILE FOOTER */
    footer {
        height:200px;
    }
    footer p {
        padding-top:110px;
        text-align:left;
        padding-right:90px;
        padding-left:20px;
    }
}

/* SELECT MEDIQ QUERIES */
@media screen and (min-width: 1500px) {
    .nav, .nav_index_flex_wrapper, .content_wrapper, .project_reel_wrapper, .contact_container_flex {
        width:90%;
    }
    .info_wrapper {
        padding-left:40px;
    }
    .info_sticky h2 {
        font-size:40px;
    }
    .info_sticky h3 {
        font-size:30px;
    }
    .info_sticky h4 {
        font-size:25px;
    }
    .info_sticky p {
        font-size:18px;
        line-height:24px;
    }
    .marquee_text h1 {
        font-size:20px;
     }
    footer {
        height:230px;
    }
    footer  p {
        padding-top:150px;
    }
}

@media screen and (max-width: 420px) {
    .mobile_nav_flextwo h1 {
        font-size:12px;
     }
}