/*hello from stackcp - stacp sucks - what is this fresh hell!*/

/**
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

html {
  scroll-behavior: smooth;
}

image{width:100%;height:100%;}
img {width: 100%;height: auto;}
/*.carot img{width:auto;height:50vh}*/
.j100{width:100%;}

a:link {color:#959595;}
a:hover {color:#ffcc00;}
a:active {color:#fff;}


a.block2:active {color: #fff; text-decoration: none; display:block; border-bottom:1px solid white;}

a.index-text:link {color: #DFDFDF; text-decoration: none; display:block;}
a.index-text:visited {color: #DFDFDF; text-decoration: none; display:block;}
a.index-text:hover {color: #fff; text-decoration: none; display:block;}
a.index-text:active {color: #fff; text-decoration: none; display:block;}

a.menu-current:link {color: #fff; text-decoration: none; display:block; border-bottom: 0px dashed #454545; }
a.menu-current:visited {color: #fff; text-decoration: none; display:block;}
a.menu-current:hover {color: #fff; text-decoration: none; display:block;}
a.menu-current:active {color: #fff; text-decoration: none; display:block;}

a.mymenuhome:link {color: #DFDFDF; text-decoration: none; font-weight: bold; display:block;}
a.mymenuhome:visited {color: #DFDFDF; text-decoration: none; display:block;}
a.mymenuhome:hover {color: #fff; text-decoration: none; display:block; border-bottom: 1px solid white;}
a.mymenuhome:active {color: #fff; text-decoration: none; display:block;}

/*navigaton*/
.navigaton{overflow:hidden;}

 .mainMenu {
  font-size:16px;
  line-height:18px;
  width:190px;
}

.mymenu {
display: flex;
    line-height: 24px;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 8px;
    margin-left: 24px;
    margin-right: 0;
    align-items: center;
}

.mymenu .menu-current {
    background-color: #575b65;
    border-radius: 20px;
    padding: 2px 10px 2px 10px;
    color: white;
}

/*.menu-current::before{
  content: url(images/arrow-right-white.svg);
  margin-right: 8px;
}*/


.floater {float:left;padding-bottom:36px;margin:24px;width:300px;height:300px;}

.helper{display: inline-block;height: 100%;vertical-align: middle;}

.full { float: left; width: 100%; padding:16px; }
.fuller { float: right; width:78% ;margin:0 auto; text-align:center;padding-bottom:32px;padding-right: 16px;}
.third { float: left; width: 40%; padding:16px; }
.filler { float: right; width: 77%; padding:16px; }
.nofloat{float:right;width:70%;}

video {
  max-width: 100%;
  height: auto;
}

.sideline-s{max-width:20px;padding-top:24px}
.sideline-m{max-width:80px;padding-top:32px}
.sideline{max-width:240px;padding-top:48px}

.showreel{width:100%;margin:auto;padding-left:20%;padding-right:20%;padding-bottom:32px;}

.video-column{flex: 100;
    padding: 24px;
    border-left: 0px solid #3d3d3d;
    height: 85vh;
padding-right:48px}
.video-column-list{ display: flex; gap: 16px; flex: 100; flex-direction: column;padding: 24px;
    border-bottom: 1px solid #ffffff1c;
    border-left: 1px solid #ffffff1c;}
.vp-center{justify-content: flex-start!important;}

.logo_page{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 24px;
    justify-content: space-around;
}

.single {
    width: 20%;
    margin: 0;
    padding: 80px;
    float: left;
}

._30{width:30%;}
._60mb{margin-bottom:60px;}

.logo_text { 
font-family: 'Helvetica', Arial, sans-serif;
    color: #bcbcbc;
    font-size: 13px;
    line-height: 20px;
    padding-top: 23px;
    padding-bottom: 16px;
    border-bottom: solid 0px #686868;}

.h300{height:300px;}
.cent{text-align:center;}

.myspace{
  width:100%;
  height:1px;
}

.sticky {
    position: sticky;
    top:16px;
}

.sticky2 {
    position: -webkit-sticky;
    position: sticky;
    top: 31px;
    background-color:rgba(39,39,39,0.9);
    padding:18px 8px 18px 18px;
    z-index:99;
    padding-top: 8px;
    padding-left: 38px;
}

.horiz {
    height: auto;
    object-fit: contain;
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    border-top: 0px solid grey;
    padding-left: 16px;
}
.horiz::-webkit-scrollbar {
  height: 16px; 
}

.horiz::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0); border-radius: 10px;
}

.horiz::-webkit-scrollbar-thumb {
  height: 16px;
  background-color: #ffcc00; border-radius: 10px;
}

.horiz::-webkit-scrollbar-thumb:hover {
  background-color: #FFF; border-radius: 10px;
}

.horiz::-webkit-scrollbar:vertical {
  display: none;
}

.carot{width:auto;height:100%;margin-right:8px;padding-bottom: 16px;}

.carot:hover{/*width:60vw;transform: scale(1.005);background-color:#ffffff0f;transition: all .3s ease-in;*/}

.carot img {
        width: auto;
        height: 54vh!important;
    }


.everything {
    margin: auto;
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0px;
    align-items: flex-start;
    column-gap: 1px;
    padding-left: 0PX;
    backdrop-filter: blur(80px);
    position: sticky;
    top: 120px;
    z-index: 3;
}

.almost-everything{
font-size: 16px;
    /* text-align: center; */
    width: 100%;
    /* display: block; */
    /* padding-top: 0px; */
    /* padding-bottom: 0px; */
    padding-top: 40px;
    height: 60px;
    padding-left: 44px;
    position: sticky;
    top: 120px;
    text-shadow: 0px 0px 54px #010304;}

a.almost-everything:link {color:white!important}




      .item{
padding:0px; margin:0 0px 0px 0; 
       width:200px;
       font-size:11px:;
       opacity:0.3;
    }

    .item:hover,
.item:hover code { 
  background-color: #333; 
  color:#fff;
  opacity:1;
}

.introtext {
    color: #222;
    font-size:13px;
    font-family:"Helvetica Neue Roman",Helvetica,Arial,sans-serif;
    line-height:16px;
    margin:1px; 
    padding: 0px 5px 5px 0px;
}
.caption
{
opacity:0;
filter:alpha(opacity=0); 
font-size:12px;
padding:4px 0px 0px 10px;
background-color: red;
/* For IE8 and earlier */
}
.caption:hover
{
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}

    .im-1{
      width:96%;
      height:300px;
      background-color:#333;
      margin:10px;
    }

.iam{font-size:12px;
      padding:4px 0px 0px 10px;
    }

.topline{
      background: none repeat scroll 0 0 #fff;
    height: 1px;
    left: 10px;
    position: absolute;
    top: 0;
    width: 100%;
  }

.menuleft{
      background: none repeat scroll 0 0 #AA3355;
    height: 500px;
    width: 100px:;
}

.video1 {
    float: left;
    margin-right: 41px;
}


.wrapper-index{
    max-width: 100%;
    margin: 0 auto;
    padding: 0px 0px 16px 0px;
    border-left: 6px solid #ffce00;
    background: linear-gradient(160deg, #0a0a0a 0%, #0b121e36 50%, #322f3a 100%);
        background-attachment: fixed;
    background-size: cover;
}

.wrapper-home{
    max-width: 100%;
    margin: 0 auto;
    padding: 0px 0px 16px 0px;
    border-left: 6px solid #ffce00;
    background: linear-gradient(160deg, #0a0a0a 0%, #0b121e36 50%, #322f3a 100%);
    background-attachment: fixed;
}

.wrapper1{
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;
}

  .wrapper{
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;
}


.wrapper { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_motion { 
    margin: 0 auto;
    /*padding: 0 16px 16px 16px;*/
    height: auto;
    border-top: 6px solid #ffce00;
    background: linear-gradient(160deg, #0a0a0a 0%, #3d424b 50%, #4b4951 100%);
    background-attachment: fixed;
}

.wrapper_infographic { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_websites { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_branding { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_print { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_art { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_extra { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}

.wrapper_contact { 
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 36px;
}


.image_100p{width:100%;}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
}




.block1{
    line-height: 24px;
    height: auto;
    -moz-columns: 1;
    -webkit-column-gap: 48px;
    -moz-column-gap: 16px;
    flex-direction: column;
    flex-wrap: wrap;
        padding-bottom: 24px;
        align-content: flex-start;
}

.block2{
    display: flex;
    line-height: 24px;
    -moz-columns: 2;
    -webkit-column-gap: 48px;
    -moz-column-gap: 16px;
    flex-direction: column;
    flex-wrap: wrap;
padding: 0px 24px 24px;
align-content: flex-start;}


.block3 {
    display: flex;
    line-height: 24px;
    height: 130px !important;
    -moz-columns: 3;
    -webkit-column-gap: 48px;
    -moz-column-gap: 16px;
    flex-direction: column;
    flex-wrap: wrap;
    /* padding: 22px; */
    /* border: solid 0px #373737; */
    /* background-color: #2d2d2d; */
    /* border-radius: 8px; */
    padding: 24px;
    padding-left:48px;
    align-content: flex-start;
}

.block4{
    display: flex;
    line-height: 24px;
    height: 170px;
    -moz-columns: 4;
    -webkit-column-gap: 48px;
    -moz-column-gap: 16px;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

.blockart{
    display: flex;
    line-height: 24px;
    -moz-columns: 2;
    -webkit-column-gap: 48px;
    -moz-column-gap: 16px;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 24px;
    height: 130px;
    align-content: flex-start;
}

.subMenu {
  padding:16px 0px 16px 16px;
  float:left;
}

.caro{
    /*border-top: 1px solid #444;*/
    /*border-bottom: 1px solid #444;*/
    color: #000000;
    float: left;
    font-family: 'Helvetica',Arial,sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 40px;
    /*padding-top: 30px;*/
    width: 100%;
    margin-bottom: 16px;
    margin-top: 10px;
    /* margin-left: 250px; */
    padding-left: 0px;

        -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-delay: 3s;
    -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.vh100{height:100vh}

.single-item{padding-bottom:16px}
.single-item-label{padding-bottom:16px}
.single-item img {height:75vh; width:auto;}
.single-item-label img {height:50vh; width:auto;}
.single-item-full img {height: 100vh;width: auto;}


.collage {
  display: flex;
  flex-wrap: wrap;
  background-color: #272727;
}

.collage-item {
  flex: 0 0 48%;
  padding: 0px 16px 8px 0px;
}

  .parent {
  width: 100%;
  display: flex;
  justify-content: normal;
  margin-bottom:3em;}

  .info-box{width:100%;float:left;border-bottom:1px solid grey;margin-bottom:2em;padding-bottom:1em;}
  .main-heading{font-size:1.5em;line-height:140%;margin-bottom:0.2em;}
  .description{font-size:1.2em;line-height:140%}

  .child {padding-right:2em;}
  .child:last-child {padding-right:0em;}
  .headline{float:left;width:100%;font-size:2em;border-bottom:1px solid grey;margin-bottom:2em;}
  .describe{font-size:2em;float:left;width:100%;}

  .vid{margin-left: 35%;}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.projects{
font-size: 16px;
    padding-top: 50px;
    padding-left: 24px;
    padding-bottom: 40px;
    font-variation-settings: "wght" 200;
}

@media only screen and (max-width: 4000px)
{
.carot img {
    width: auto;
    height: 40vh;
}
}


@media only screen and (max-width: 1100px)
{
.carot img {
    width: auto;
    height: 46vh;
}
}

@media only screen and (max-width: 900px) {
    .block3 {
        height: 110px !important;
         max-height: 110px !important;
         margin-left: 0px;
        width: auto;
        padding-bottom: 16px;
        border-bottom: 0px solid #636363;
    }

    .everything {
    padding-left: 0PX;
}

.video-column-list {
    padding: 0px;
    border-bottom: 0px solid #ffffff1c;
    border-left: 0px solid #ffffff1c;
}

    .wrapper-home{
        padding: 0px 8px 8px 8px;
        border-left: 0px solid #ffcc00;
    }

    .wrapper_motion{
        padding: 0px 8px 8px 8px;
        border-left: 4px solid #a7675847;
        background:none!important;
    }

.huge {padding-right: 10%;}

.video-column {
    padding: 0px;
    border-left: 0px solid #3d3d3d;
}

  }



@media only screen and (max-width: 700px) 

{

    .projects{display:none;}
    .block3{display:block;}
    .mymenu{width:100%; padding-bottom: 25px;}
    .block4{width:100%;height:312px;}
        .block3 {
       
        -webkit-column-gap: 24px !important;
        -moz-column-gap: 24px!important;
        -webkit-column-gap: 24px !important;
        height: 170px !important;
         max-height: 170px !important;
        flex-wrap: wrap;
        padding:0px;
        margin-bottom:16px;
    }
        nav{position: relative;}
        
    .single {
        width: 100%;
        margin: 0px;
        padding-top: 70px;
        padding-bottom: 24px;
        padding-right: 20px;
        padding-left: 20px;
        border: solid #ffffff24 1px;
        border-radius: 24px;
        margin-bottom: 24px;
        position: sticky;
        top: 24px;
        background-color: #272727;
    }

    .top-link {visibility: hidden;}

    .logo_text {
        padding-bottom:0px;
        padding-top:48px;
        border-bottom: solid 0px #686868;
    }
    .carot img{width:100%;height: auto;}
    .horiz {display:none;flex-direction: column;width: auto;height:100%;white-space:normal}
    .sticky {top:0;}
    .flexy{flex-wrap:wrap;}
    .single-item-label img {height: auto;width: 90vw;}
    .flexy img {height: auto;width: 90vw;}
    .collage-item {flex: 0 0 100%;padding-bottom: 16px;padding-top: 16px;}
    .almost-everything{top: 0px;font-size:24px}
    .horiz::-webkit-scrollbar {height: 16px;}
    .single-item-full img {width: -webkit-fill-available;}
    .video-column {
    padding: 0px;
    border-left: 0px solid #3d3d3d;
    }

}


@media only screen and (max-width: 600px) {

    .wrapper-index {
    padding: 6px;
    border-left: 0px solid #a7675847;
   }

   #con{
    margin:0;
    padding: 10px;
    background:background: linear-gradient(82deg, #0a0a0acc 0%, #3d424be0 50%, #000000c7 100%);;
    backdrop-filter: blur(0px);
   }

    .block3 {
        display: flex;
        height: 280px !important;
        max-height: none !important;
        line-height:28px;
        margin-top: 20px;
    }

    .blockart{
    padding: 0px;
    height: auto;
    width: 100%;
}

    .wrapper_motion, {padding: 0px 16px;}
    .mymenu {padding-bottom: 0px;gap: 8px!important;margin-left: 4px;padding-top: 8px;}


}


/*@media only screen and (max-width: 400px) 
{
    .block1{height:232px;-webkit-column-gap: 50px;}
    .block2{height:232px;-webkit-column-gap: 50px;}
    .block3{height:240px;-webkit-column-gap: 50px;}
    .block4{height:320px;-webkit-column-gap: 50px;}

}*/


/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
}