@font-face {
    font-family: 'manrope_var';
    src: url('../fonts/manrope_var.woff2') format("woff2");
    src: url('../fonts/manrope_var.eot?#iefix') format('embedded-opentype'),
    url('../fonts/manrope_var.ttf') format('truetype');
}

@font-face {
    font-family: 'goudy';
    src: url('../fonts/goudy.woff') format('woff');
    src: url('../fonts/goudy.eot?#iefix') format('embedded-opentype'),
    url('../fonts/goudy.ttf') format('truetype');

}

.press_box{width:100%;display:flex;justify-content: center;flex-wrap:wrap;align-items: center; position:relative;top:0;margin:40px;height:auto;width:calc(100% - 80px);}

.logo_box{height:60px;width:80px;margin:0 20px;}

html{margin:0;scroll-behavior: smooth;width:100%;left:0;}


body{background-color:#191919;padding:0;font-family: 'goudy', serif; font-size: 16pt; color:white;overflow-x:hidden;margin:0;scroll-behavior: smooth;width:100%;}


.w33{width:calc(33.3% - 2vw);}
.w25{width:calc(25% - 2vw);}


.bg_index{background-color:#222222;}

.scroll_stop{overflow:hidden}

h1, h2, h3, h4, h6{    margin-block-start: 0 !important;
    margin-block-end: 0 !important;margin:0;padding:0;font-size:1em}


ul{ list-style-type: none;    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    padding-inline-start: 0 !important;}

a, a:visited, a:link{color:white;cursor:pointer;}

a:link, a:visited, a:active{text-decoration: none;}

.grey_card a{color:#999999}



/* overaching ele gives max-width, margin, centers, transition ready. */

.content{width:calc(100% - 100px);left:0;right:0;position:relative;opacity:1;margin:auto;
transition:all .3s;}

body::-webkit-scrollbar {display:none;}

.vimeo_fix {
   position: absolute;

   width: 100%;
   height: 100%;   overflow: hidden;

}


.vim_fix_full{
width: 100%;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100%;
   min-width: 177.77vh;/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
    aspect-ratio:16/9;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}



.vim_fix_16_9{aspect-ratio:16/9;display:flex;justify-content:center}
.vim_fix_160_71{aspect-ratio:160/71;}


.loader_gif{background:url("../pics/load_line.gif") no-repeat center center;background-size:300px auto;}

video{width:100%;height:100%;object-fit: cover;transition:all .5s}


.play_button {
  margin:auto;
  top: 0;bottom:0;left:0;right:0;
  position: absolute;  
  width: calc(3% + 20px);
    height: auto; z-index:10;
    transition:all .3s
}




.vid_square iframe{height:40vh}


.vimeo_butt{  border-radius: 5px;
  background: #060403;
  width: 55px;
  height: 35px;  
position:absolute;left:15px;
bottom:15px;}

.vimeo_tri{width: 0;
height: 0;
border-style: solid;top:9px;left:18px;
border-width: 9px 0 9px 18px;position:absolute;
border-color: transparent transparent transparent #ffffff;}


.ham{
cursor:pointer;
display:flex; 
justify-content:center; 
align-content:center; 
flex-wrap:wrap; 
z-index:801;
height:50px;
width:40px;
position:fixed;
top:25px;right:45px;
padding-top:10px;
transition:all .3s, top .5s .5s}

.ham_line{
position:relative;
width:25px;
margin:0;
margin-right:5px;
margin-bottom:6px;
border-bottom: 2.5px solid white;
left:0;transition:all .3s;
}


.ham1{width:5px;}

.ham_line1{transform:rotate(45deg) translate(2px,4.5px);width:30px}
.ham_line_hide{width:0 !important;margin:0;visibility:hidden;border-bottom: 0px solid hsla(0,0%,0%,0);}
.ham_line2{transform:rotate(-45deg) translate(2px,-4.5px);width:30px}

#menu_block{width:100%;left:0;top:0;position:fixed;font-family: 'manrope_var', sans-serif; font-size:calc(60px);font-weight: 800;text-transform: uppercase;}

.menu_on{opacity:1;z-index:800;height:100%;transition:all .5s, height 0s;}

.menu_off{ opacity:0;z-index:-10;height:0;transition:all .5s .5s}




.ham_grid{height:90px;display: inline-block;column-count: 3;column-gap: 4px;top:-20px;left:0;white-space: nowrap;position:absolute}


.ham_grid:hover .grid_col1{top:0}
.ham_grid:hover .grid_col2{top:0}
.ham_grid:hover .grid_col3{top:0}

#kill_caro{transform:rotate(45deg);height:50px;width:50px;padding:0;font-size:62px;font-weight:100;font-family:manrope_var;top:32px; transition:all .3s}
#kill_caro:hover{transform:rotate(135deg);}



.grid_col1{height:10px;}
.grid_col2{height:20px;}


.grid_col1, .grid_col2{background-color: white;top:-40px;position:relative;margin-bottom:3px;transition:all .5s;}



.menu{
margin:auto;
padding-top:90px;
left:50px;
position:absolute;
padding-inline-start: 0px;
justify-content: flex-start;flex-wrap: wrap;align-content: flex-start;
transition:all .5s;
}

.menu_item{width:60%;cursor:pointer;text-decoration:none;letter-spacing:-1px;transition:all .3s;position:relative;opacity:0;left:10px;transition:all .3s;
}


.logo_nav{
cursor:pointer;
display:flex; 
justify-content:center; 
align-content:center; 
flex-wrap:wrap; 
height:50px;
width:auto;
position:fixed;
top:20px;left:50px;
padding-top:10px;
margin-bottom:20px;
z-index:800;
margin:auto;
font-family: 'goudy', serif;
letter-spacing:-.5px;
transition:all .5s, top .5s .5s;
}

.box_rel{height:100%;width:100%;position:relative;opacity:1;}

.box_flex_cont_left{display:flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items: flex-start;
align-content: center;
position:relative;
height:auto;
width:100%;
height:auto;
transition:all .3s;}


.box_flex_cont_right{display:flex;
flex-wrap: wrap;
justify-content:flex-end;
align-items: flex-start;
align-content: center;
position:relative;
height:auto;
width:100%;
height:auto;
transition:all .3s;}

.box_flex_cont_intro{display:flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items: flex-end;
align-content: space-between;
position:relative;
height:calc(85vh - 100px);
margin-top:90px;
transition:all .3s;
}

.box_flex_cont{
display:flex;
flex-wrap: wrap;
justify-content:center;
align-items: center;
align-content: center;
position:relative;
height:100%;
width:100%;
opacity:1;
transition:all .5s;
}


.menu{
margin:auto;
padding-top:90px;
left:50px;
width: calc(100% - 50px);
position:absolute;
padding-inline-start: 0px;
justify-content: flex-start;flex-wrap: wrap;align-content: flex-start;
transition:all .5s;
}

.title_txt{font-size:28pt;line-height: 28pt;}

.title_sub{font-size:28pt;color:#f4c205;line-height:31pt;opacity:1;transition: all 1s 1s;}

.title_sub a, .title_sub a:visited, .title_sub a:link{color:#f4c205;cursor:pointer;}

.about_intro{font-size:26pt;color:#191919;line-height:30pt;opacity:1;max-width:1300px;min-height:calc(100vh - 100px);position:relative;letter-spacing: .1px}
.about_intro_sub{color:hsla(0,0%,0%,.25)!important}

.about_res{font-size:24pt;color:black;line-height:28pt;opacity:1; background-color: #3d2f0d;font-family:'manrope_var', sans-serif;}

.about_res_sub{font-size:20pt;font-weight:700;min-width: 100px!important}

.about_row{padding-top:60px;padding-bottom:10px;border-bottom:solid 1px black;width: 100%;margin:auto;margin-right:100px}
.about_row:hover{color:#f4c205}

.about_brands{color:black;width:100%;padding-right:20%}

.about_brands span{color:black;display:inline-block;transition:all .5s}

.about_brands span:hover{color:#f4c205;}

.title_sub a, .title_sub a:visited, .title_sub a:link{color:#f4c205;cursor:pointer;}

.intro_line{margin-top:5px;width:calc(100% - 100px)}

.about_copy{bottom:0;margin:auto;position:absolute;padding-bottom:40px;width:800px;max-width:100%;color:hsla(0,100%,100%,.3);}

.about_copy a, .about_copy a:link, .about_copy a:visited{color:hsla(0,100%,100%,.6); transition:all .5s;} 
.about_copy a:hover{color:hsla(0,100%,100%,1);} 

.about_head{font-weight: 900;font-size:28pt;width: 100%;}

.more_copy{max-width:570px;}

.box_logos{flex-wrap:wrap;max-width:80vw;height:auto;margin:auto;margin-top:100px;left:0;right:0;}
.logo_flex{display:flex;align-items: center; justify-content: center; width:130px;padding:10px;height:60px;}

.box_text{height:auto;}

.txt_title{width:100%;margin:70px 0}

.info_box{display:block;font-family: 'manrope_var', sans-serif; line-height:30pt;font-size:24pt;font-weight:400;  width: 100%;max-width: 950px;margin: 50px 0;}

.info_box.hide{cursor:pointer;display:block;height:auto;max-height:30px; overflow:hidden;margin-bottom:50px;padding:0; font-size:16pt;line-height:22pt;transition:all 1s}

.info_box span{transform: rotate(0deg);transition:all .5s}
.comments_txt{font-family: 'manrope_var', sans-serif; font-size:14pt;padding-bottom:0;}

.info_box.reveal{height:auto;max-height:100vh; display:block;}

img{width:100%;height:100%;object-fit: cover;display:block;}
.box_img{position:relative;height:auto;overflow: hidden;}

.box_vid:hover .play_button{width: calc(4.5% + 20px);}

.nav_bloc{position: fixed; left:0;right:0;height:85px;top:0; transition:all .3s;z-index:1}

.nav_bloc_sm{height:70px;opacity:1}

.nav_bloc_up{top:-90px}

.carousel{display: flex;flex-wrap: nowrap;opacity:1;overflow-y:hidden;width:100%;height:100%; justify-content:flex-start;position:relative;transition:opacity 1.5s .8s, transform 1.5s .8s}

.carousel::-webkit-scrollbar {display:none;}

.keep_left{margin-left:}

.caro_item{display:flex;justify-content: center;align-items: center; align-content: center; flex-wrap:wrap;
  bottom:0;width:100%; height:100%;position:relative;flex: 0 0 auto; scroll-snap-align:center;overflow-y:hidden;}



.caro_fader{position:absolute;left:0;opacity:0;transition:all 1s}

.show{opacity:1}



.caro_nav{position:absolute; left:-5px;right:0;margin:auto;height:30px;bottom:0;width:auto;}

.caro_nav span{display:inline-block;text-align: left;padding:10px;height:20px;opacity:.3;font-size:calc(.1vh + .5rem);cursor:pointer;text-decoration:none;display:inline-block; transition:all .3s}

.caro_nav .current{opacity:.7}

.dots{position:absolute}

.intro_fix{height:100vh;background-color: #191919;}

.caro_content{position:relative;width:100%;height:100%;
display:flex;flex-wrap: nowrap;scroll-behavior: smooth;scroll-snap-type: x mandatory;overflow-x: scroll;}

.caro_ph{padding:0 3vw;width:auto;aspect-ratio: 3 / 2;}
.caro_ph img{aspect-ratio: 3 / 2;object-fit:contain;height:100%;}
.caro_ph_port{width:auto;height:auto; aspect-ratio: 2 / 3;}
.caro_ph_port img{aspect-ratio: 2 / 3;height:100%;object-fit: contain;}
.caro_ph_square{width:auto;height:auto; aspect-ratio: 1 / 1;}
.caro_ph_square img{aspect-ratio: 1 / 1;height:100%;object-fit: contain;}

.caro_ph_menu{padding:0 10px;width:auto;}

.ph_caro_cont{height:50vw;max-height:80vh;padding: 0 12vw;overflow-x:scroll;overflow-y:visible;}

.has_nav{align-content: flex-end;margin-bottom:20px}
.caro_content::-webkit-scrollbar {display:none;}

.job{font-size:20pt;position:absolute;top:0;margin:30px 40px;transition:all .3s}
.job_desc{font-size:20pt;position:absolute;top:37px;line-height:24pt; margin:30px 40px;transition:all .3s}
.job_title{color:white;position:relative;font-weight: 600;margin-bottom:5px}

.spacer{position:relative;width:100%;height:200px;flex-shrink: 0;}
.spacer_sm{position:relative;width:100%;height:70px;}
.spacer_75{position:relative;width:100%;height:75px;}

.over_sib{opacity:1;transition:all .3s}

.feature{cursor:zoom-in;position:relative;}

.display_box{z-index:1000; width:100%;cursor:pointer;top:-10px;height:0;overflow:hidden;position:fixed;background-color:hsla(0,0%,0%,0.8); transition:all .3s}

.snap{scroll-snap-align: center;}
.content, html{scroll-snap-type: y proximity}

.caro_box{position:fixed;width:100%;height:100vh;top:0;left:0;background-color: hsla(0,0%,13%,.9);z-index:900}
.caro_show{margin:2vh 2.5vw;margin-top:80px;scroll-snap-align:center;width:84vw;max-height:calc(98vh - 80px); justify-content: center;transition:all .5s, justify-content .5s .5s}
.caro_show img{object-fit:contain;object-position: center;transition:all .5s}
.caro_shower{width: auto;scroll-behavior: smooth;scroll-snap-type: x mandatory;padding:0 150px;
}

.caro_item .w900{max-width:900px}

.in-viewport + .caro_item img{object-position: left;}


.prev-viewport img{object-position: right;}
.prev-viewport + .vim_fix_16_9{justify-content: flex-end;}

.prev-viewport .grey_card{margin-right:-40%}


.caro_feature{cursor:zoom-in}

.show_box{top:0;display:block;transition: all .3s}
.no_show_box{top:-105vh;transition: all .3s}

.display_image_shell{width:calc(100vw - 100px);max-width:1800px;height:calc(100% - 60px);flex:0 1 auto;opacity:0; transition:all .5s}

.display_image_shell img{object-fit: contain;}
.display_image_shell video{object-fit: contain;}

.display_image_shell .vid_play_butt {display:none}


.display_image_shell .vid_preview{display:none}
.caro_box .vid_preview, .caro_box .img_preview, .caro_box .vid_play_butt{display:none}



.display_image_shell .front{height:inherit;width:inherit}
.display_image_shell .liner:after{display:none}
.display_image_shell .liner_img{display:none}
.display_image_shell.box_flex_cont{justify-content: normal}
.display_image_shell .vid_iframe{max-width:none;display:flex;justify-content: center;}
.display_image_shell .vid_style{display:flex;justify-content: center;}



.display_nav{position:absolute;height:50px;
width:calc(100vw - 50px);top:20px;justify-content: flex-end;
padding-top:10px;}

.kill_box{width:50px;height:40px;position:absolute;right:25px;top:0}

.kill_caro_show{transition:top .5s}
.kill_up{top:-65px !important}

.display_down{height:100vh;top:0;}

.box_display .box_vid video{height:80vh;max-height:1080px;object-fit: contain}
.box_vid{position:relative;width:100%;}
    
.vid_square{height:30vh;width:30vh;background-color: red}

.line{display:inline-block;height: 3px;width:0;left:0;bottom:0;position:absolute;background-color: white; transition:all .3s;
}

.line_layout{border-bottom: 1px solid white;padding-bottom: 10px}

.logo_fix{position:absolute;top:50px;opacity:0;transition:all 1s}

.inline_fix{display:inline-block;position:relative;}
.marg_t{margin-top:10px}
.to_over{left:0;position:relative;}
.to_over:hover .line{width:100%;}

.fp_titles{position:absolute;margin: auto;width:calc(100% - 100px);padding:50px;z-index:1; font-size:26pt;line-height:26pt;transition: all 1s;}

a:hover .small_sans{color:white}

.liner {display: inline-block;position: relative;transition: color .5s;}

.liner:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2.5px;
  bottom: -1px;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.liner:before{
content: '';
  position: absolute;
  width: 15px;
  height: 2.5px;
  bottom: -1px;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: width 0.25s ease-out .25s;
}


.liner_img {display: block;position: relative;transition: color .5s;}

.liner_img:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 10px;
  bottom: -1px;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.liner_img:before{
content: '';
  position: absolute;
  width: 0;
  height: 10px;
  bottom: -1px;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: width 0.25s ease-out .25s;
}
 .to_over:hover .liner_img:after {transform: scaleX(1);transform-origin: bottom left;}
.to_over:hover .liner_img:before {width:0;}

.front{overflow:hidden;}

.front img{position:relative;left:0;}
.front:hover img{width:110%;left:-5%;margin-top:-5%}

.social{height:35px;width:35px;position:relative;display:inline-block;overflow: hidden;font-size:0}

.about_txt a:link, .about_txt a:visited{color:white}

.linkedin svg{fill:#f4c205;transition:all .3s}
.linkedin:hover svg{fill:#0072b1}

.insta svg{fill:#f4c205;transition:all .3s}
.insta:hover svg{fill:#f1474b}

.behance svg{fill:#f4c205;transition:all .3s}
.behance:hover svg{fill:#175ef7}

.vimeo svg{fill:#f4c205;transition:all .3s}
.vimeo:hover svg{fill:#1cade2}

svg{width:100%;height:100%;margin:0;padding:0}

.about_social svg{fill:hsla(0,0%,0%,.20);}
 
.spotify:hover{color:#1DB954}
.guardian:hover{color:#fbe058}
.savee:hover{color:#f8c6e2}

.bg_wk{background-color:#191919!important}
.col_wk{color:#191919}
.wk_liner:after, .wk_liner:before{background-color: #191919;}


.ph_liner:after, .ph_liner:before{background-color: #dddddd;}
.bg_ph, .ph_page{background-color: #dddddd}


.ph_liner:after, .ph_liner:before{background-color: #dddddd;}
.bg_wk, .wk_page{background-color: #222222}

.col_ab .ham_line{border-bottom-color:#f4c205;;}

#body_index{transition:all .2s;}
.about_page{background-color: white;}
.ab_liner:after, .ab_liner:before{background-color: #f4c205;}
.col_ab, .about_page, .col_ab a, .col_ab a:visited, .col_ab a:link, .about_page a:visited, .about_page a:link{color:black;}

.about_page .logo_nav{top:90px;left:150px;position:absolute;}

.col_wsj .ham_line{border-bottom-color: #eb6c99;}
.bg_wsj, .wsj_page{background-color: #ead369;}
.alt_bg_wsj{ border:solid #ead369 1px}
.col_wsj, .wsj_page, .col_wsj a, .col_wsj a:visited, .col_wsj a:link, .wsj_page a:visited, .wsj_page a:link{color:#eb6c99;}
.wsj_liner:after, .wsj_liner:before{background-color: #ead369;}
.col_wsj_d{color:#e6b800}

.col_se .ham_line{border-bottom-color: #90d5ff;}
.bg_se, .se_page{background-color: #1b76d5;}
.alt_bg_se{ border:solid #1b76d5 1px}
.col_se, .se_page, .col_se a, .col_se a:visited, .col_se a:link, .se_page a:visited, .se_page a:link{color:#90d5ff;}
.se_liner:after, .se_liner:before{background-color: #1b76d5;}
.col_se_d{color:#e6b800}

.col_gps .ham_line{border-bottom-color: #6c5744;}
.bg_gps, .gps_page{background-color:#869fba;}
.alt_bg_gps{border:solid #869fba 1px;}
.col_gps, .gps_page, .col_gps a, .col_gps a:visited, .col_gps a:link, .gps_page a:visited, .gps_page a:link{color:#6c5744;}
.gps_liner:after, .gps_liner:before{background-color: #869fba;}


.col_bud .ham_line{border-bottom-color: #cfac2f;}
.bg_bud, .bud_page{background-color: #d12028;}

.bg_se, .se_page{background-color: #1b76d5;}

.alt_bg_bud{border:solid #d12028 1px;}
.col_bud, .bud_page, .col_bud a, .col_bud a:visited, .col_bud a:link, .bud_page a:visited, .bud_page a:link{color:#cfac2f;}
.bg_bud_fix{background-color: #cfac2f;}
.bud_liner:after, .bud_liner:before{background-color: #cfac2f;}


.col_pet .ham_line{border-bottom-color: #006b83;}
.bg_pet, .pet_page{background-color: #24a2b1;}
.alt_bg_pet{border:solid #24a2b1 1px;}
.col_pet, .pet_page, .col_pet a, .col_pet a:visited, .col_pet a:link, .pet_page a:visited, .pet_page a:link{color:#006b83;}
.pet_liner:after, .pet_liner:before{background-color: #24a2b1;}

.title_logo_pet_line{font-family: 'manrope_var', sans-serif; font-size:18pt;margin-top:10px}


.col_bk .ham_line{border-bottom-color:#aa5d1b;}
.bg_bk, .bk_page{background-color: #ffdc33;}
.alt_bg_bk{border:solid #ffdc33 1px;}
.col_bk, .bk_page, .col_bk a, .col_bk a:visited, .col_bk a:link, .bk_page a:visited, .bk_page a:link{color:#aa5d1b;border-bottom-color:#aa5d1b;}
.bk_liner:after, .bk_liner:before{background-color: #aa5d1b;}

.col_opt .ham_line{border-bottom-color: #00bce4;}
.bg_opt, .opt_page{background-color: #3f53e8;}
.alt_bg_opt{border:solid #3f53e8 1px;}
.col_opt, .opt_page, .col_opt a, .col_opt a:visited, .col_opt a:link, .opt_page a:visited, .opt_page a:link{color:#00bce4;}
.opt_liner:after, .opt_liner:before{background-color: #3f53e8;}


.col_tar .ham_line{border-bottom-color: #b22025;}
.bg_tar, .tar_page{background-color: #e7b9c3;}
.alt_bg_tar{border:solid #e7b9c3 1px;}
.col_tar, .tar_page, .col_tar a, .col_tar a:visited, .col_tar a:link, .tar_page a:visited, .tar_page a:link{color:#b22025;}
.tar_liner:after, .tar_liner:before{background-color: #e7b9c3;}

.col_goo .ham_line{border-bottom-color: #cee1fb;}
.bg_goo, .goo_page{background-color: #cc5f68;}
.alt_bg_goo{border:solid #cc5f68 1px;}
.col_goo, .goo_page, .col_goo a, .col_goo a:visited, .col_goo a:link, .goo_page a:visited, .goo_page a:link{color:#cee1fb;}
.goo_liner:after, .goo_liner:before{background-color: #cc5f68;}


.col_zuj .ham_line{border-bottom-color: #efaab1;}
.bg_zuj, .zuj_page{background-color: #006ead;}
.alt_bg_zuj{border:solid #006ead 1px;}
.col_zuj, .zuj_page, .col_zuj a, .col_zuj a:visited, .col_zuj a:link, .zuj_page a:visited, .zuj_page a:link{color:#efaab1;}
.zuj_liner:after, .zuj_liner:before{background-color: #efaab1;}
.zuj_bg_fix{background-color: #e8e8e8;margin:auto;height:90%;object-position: 50% 50%; object-fit: contain}
.bg_zuji_grey{background-color: #e8e8e8}


.col_ic .ham_line{border-bottom-color: #ffdfae;}
.bg_ic, .ic_page{background-color: #950b10;}
.alt_bg_ic{border:solid #950b10 1px;}
.col_ic, .ic_page, .col_ic a, .col_ic a:visited, .col_ic a:link, .ic_page a:visited, .ic_page a:link{color:#ffdfae;}
.ic_liner:after, .ic_liner:before{background-color: #950b10;}

.ic_type_cover{position:absolute;left:0;top:0;}


.logo_wsj{width:calc(200px + 25vh);}
.logo_wsj_fp{width:190px;margin-bottom:15px}
.logo_se_fp{width:180px;margin-bottom:10px}

.logo_wsj_line{width:calc(80px + 18vh);margin-top:85px}
.logo_wsj_intro{width:210px;margin-bottom:20px}


.logo_gps{height:calc(60px + 3vh);width:auto;z-index:100}
.logo_gps_fp{width:80px;margin-bottom:10px}
.logo_gps_intro{width:110px;}

.logo_bud{height:150px;}
.logo_bud_fp{height:auto;width:110px;margin-bottom:10px;margin-left:-5px}
.logo_bud_intro{width:120px;}
.logo_bud_line{width:calc(100px + 24vh);padding-top:20vh; padding-right:20px;}
.fp_img_bud{width:auto;height:90%;right:-43%;top:23%}
.img_bud{width:auto;height:140%;margin-top:15%;}


.fp_img_ic{object-position: left}
.logo_ic_fp{width:60px;margin-bottom:5px}

.logo_pet_fp{width:70px;margin-bottom:15px}

.logo_bk{width:calc(50px + 10vh); height:auto;mix-blend-mode: multiply;}
.logo_bk_fp{width:70px;margin-bottom:10px;margin-left:-5px}
.logo_bk_line{width:calc(50px + 12vh);padding-top:calc(12vh + 80px);}

.logo_opt{width:120px;height:auto}
.logo_opt_fp{width:140px;height:auto;margin-bottom:10px;margin-left:-5px}
.logo_opt_line{width:calc(100px + 22vh);padding-top:10vh;}
.logo_opt_intro{width:150px;}

.logo_goo{width:calc(200px + 25vh);}
.logo_goo_fp{width:120px;margin-bottom:10px}
.logo_goo_line{width:calc(100px + 22vh);padding-top:10vh;}
.logo_goo_intro{width:110px;}


.logo_tar{width:calc(200px + 25vh);}
.logo_tar_fp{width:50px;margin-bottom:15px}
.logo_tar_intro{width:70px;}
.logo_tar_line{width:calc(100px + 22vh);padding-top:10vh;}

.logo_zuj{width:calc(200px + 25vh);}
.logo_zuj_fp{width:100px;margin-bottom:10px}
.logo_zuj_line{width:calc(100px + 22vh);padding-top:10vh;}
.logo_zuj_intro{width:110px;}

.logo_ic_intro{width:90px;}


.fp_img_zuj{position:absolute;height:50%;width:100%;margin:auto;top:25%;object-fit: contain;left:18%; }
.zuji_star{top:calc(25% - 50px);top:calc((25% - 1vw) - 40px);}
.zuji_price{top:calc(25% - 50px);top:calc((25% - 1vw) - 40px);}


.logo_rel{width:calc(200px + 25vh);}
.logo_rel_fp{width:calc(60px + .5vw)}
.logo_rel_line{width:calc(100px + 22vh);padding-top:10vh;}


.title_logo{width:100%;margin-bottom:8px;position:relative; display:block}
.title_logo img{object-fit: contain;object-position: left}
.title_logo_wsj{height:25px;}
.title_logo_wsj_line{height:20px;padding-top:8px}
.title_logo_ic_line{height:70px;margin-top: -20px;margin-left: 13px;}

.title_logo_gps{height:60px;}
.title_logo_bud{height:50px;left:-10px}
.title_logo_bud_line{height:20px;padding-top:5px}

.title_logo_se{height:50px;}
.title_logo_se_line{height:22.5px;padding-top:6px;left:5px;}

.title_logo_pet{height:40px;}
.title_logo_bk{height:110px;left:-12px}
.title_logo_opt{height:60px;left:-7px}
.title_logo_goo{height:50px;}
.title_logo_tar{height:70px;}
.title_logo_zuj{height:70px;}
.title_logo_ic{height:110px;}


.wk_page{background-color: #E9CCA4;}

.col_white, .col_white:link, .col_white:visited, .col_white a{color:white !important;}

.box_abs{
height:100%;
width:100%;
position:absolute;      
opacity:1;
top:0;
transition:all .5s;
}

.box_fix{
height:100%;
width:100%;
position:fixed;      
opacity:1;
top:0;
bottom:0;
left:0;right:0;margin:auto;
transition:all .5s;
}


.box_quote{width:calc(70% - 40px);max-width:700px;min-width:260px;height:auto; flex-grow: 0;margin:0 40px;margin-bottom:200px;margin-top: 40px;}

.quoter{position:relative}
.yellow_hov{transition:all .5s ease-in-out}
.quoter::before{content:'"';left:-30px;position:relative;width:0;display:inline-block;}
.quoter::after{content:'"';left:30px;width:0;display:inline-block;}

.box_quote .box_text{width:calc(100% - 20px);text-align: left;padding:10px}
.box_quote .box_text_src{width:auto;position:absolute;right:80px;margin:auto;font-size:14pt;margin-top:10px;font-family: 'manrope_var', sans-serif;}

.img_job_fp{width:100%;margin:0;height:100vh;transition:all .3s, height 1s 2s}
.img_job_wk{width:100%;margin:0;height:28vh;position:relative;transition:all .3s}

.img_job_fp_port{width:100%;margin:0;padding:0;transition:all .3s}

.copyright{width:100%;height:auto;bottom:0;position:absolute;margin-bottom:25px;font-size:12px;text-align: center;}

.grid_thirds{margin:100px 5vw;width:100%;justify-content:flex-start;align-items:flex-start;flex-wrap: wrap}

.grid{margin:0;width:100%;justify-content:center;align-items:center;flex-wrap: wrap}

.one_third{flex:1 1 auto;margin:0 2vw;margin-bottom:50px;width:calc(30% - 4vw);justify-content:flex-start;align-items:flex-start;min-width:300px;}

.two_thirds{flex:1 1 auto;margin:0 2vw; margin-bottom:50px;width:calc(60% - 4vw);align-items:flex-start;justify-content:flex-start;}

.full{margin:0 -50px; width:100vw;}

.grid_brick {position: relative;column-width: 500px;height: auto;column-gap: 50px;left:0;right:0;margin:auto;}

.ad_grid_brick {position: relative;column-count: 3;height: auto;column-gap: calc(20px + 8vw);left:0;right:0;margin:auto;font-size:14pt;}

.grid_brick_ad{position:relative;column-width: 350px;height:auto;column-gap: 50px; max-width: 1800px;align-self:flex-start;display:block;left:0;right:0;margin:auto;column-count: 3}

.grid_brick_ph{position:relative;column-width: 300px;height:auto;column-gap: 100px; max-width: 1800px;align-self:flex-start;display:block;left:0;right:0;margin:auto;column-count: 4}


@media (max-width:900px) {
.ad_grid_brick {    column-count: 1;}
}

.logos_intro{position:absolute;left:50px;bottom:50px;}

.brick {position: relative;width: 100%;height: auto;min-height: 150px;break-inside: avoid;margin-bottom: 50px;display: block;}

.ad_brick {position: relative;width: 100%;height: auto;min-height: 150px;break-inside: avoid;margin-bottom: 50px;display: block;}

.ph_brick {position: relative;width: 100%;height: auto;min-height: 150px;break-inside: avoid;margin-bottom: 100px;display: block;}

.grid_flex{gap:30px 30px;flex-wrap:wrap;}

.grid_flex_wide{gap: 60px 120px;flex-wrap:wrap;}






.grid_flex_100{width:100%;flex:1 1 auto;min-width:260px}
.grid_flex_75{width:calc(75% - 30px);flex:1 1 calc(75% - 30px);min-width:260px;}
.grid_flex_66{width:calc(66% - 30px);flex:1 1 auto;min-width:260px}
.grid_flex_60{width:calc(60% - 30px);flex:1 1 auto;min-width:260px}
.grid_flex_50{width:calc(50% - 30px);flex:1 1 auto;min-width:260px}
.grid_flex_40{width:calc(40% - 30px);flex:1 1 auto;min-width:260px}
.grid_flex_25{width:calc(25% - 30px);flex:1 1 calc(25% - 30px);min-width:260px}
.grid_flex_33{width:calc(33% - 30px);flex:1 1 auto;min-width:260px}
.grid_flex_10{width:calc(10% - 30px);flex:1 1 auto;min-width:260px}
.grid_flex_30{width:calc(30% - 30px);flex:1 1 auto;min-width:260px}

.grid_flex_33_min{width:calc(33% - 50px);flex:1 1 auto;min-width:80px;aspect-ratio:16/9;}

.grid_flex_70_s{width:calc(70% - 30px);flex:0 1 auto;}
.grid_flex_70_vw{width:calc(70vw - 30px);flex:0 1 auto;max-width:1600px}

.grid_flex_66_s{width:calc(60% - 30px);flex:1 1 auto;}
.grid_flex_50_s{width:calc(50% - 30px);flex:0 1 auto;}

.grid_flex_33_s{width:calc(32.5% - 30px);flex:1 1 auto;}

.grid_flex_fill{min-width:50px;transition:all .5s}

.ph_gap{margin: 30px 15px;}
.up_150{margin-top:-150px}
.down_150{margin-top:150px}
.display_image_shell .up_150, .display_image_shell .down_150{margin:auto}


.ph_gap_sec{margin: 50px 15px;margin-bottom:300px}
.ph_text{color:#d0d0d0;font-family: 'manrope_var', sans-serif; font-weight:800; text-transform:uppercase;font-size:34pt; line-height:34pt;margin-top:200px;margin-bottom:0}



.flex_h40{height:40vw;min-height:400px}
.flex_h20{height:20vw}
.flex_h30{height:30vw}
.flex_h50{height:50vw}
.flex_h60{height:60vw}
.flex_h80{height:80vw}
.flex_h250{height:250px}
.flex_h500{height:500px}
.flex_h600{height:600px}

.w100_p{width:100%}

.shiftd_100{top:100px}
.shiftd_300{top:300px}
.shiftd_500{top:500px}

.feat_h{height:calc(100vh - 130px)}

.flex_height_auto{height:auto}
    


.vid_iframe{position:relative;margin:auto;width:100%;aspect-ratio:16/9;left:0;right:0;max-width:1080px;top:0;bottom:0;}


.reddit_fix{height:140%;}
.twit_fix{height:130%;}

.vid_twit{width:47%;height:47%;}
.vid_reddit{width:45%;height:45%;}
.vid_insta{width:52%;height:52%;}
.vid_16_9{width:54%;height:54%;}

.mock_over{position:absolute;margin:auto;z-index:1;object-fit: contain;overflow:hidden;top: 0;bottom: 0;}
.mock_over_fix{position:absolute;right:0;left:0;margin:auto;z-index:1;aspect-ratio:1/1}

.insta_top{top:-5%}
.yout_top{top:-5%}
.twit_top{top:-2%}
.redd_top{top:0; bottom:0}

.vid_preview_under{z-index:-1}

.insta_mock{background-color: #d5dce2;overflow:hidden}
.yout_mock{background-color: #fd0d19;overflow:hidden}
.twit_mock{background-color: #3281d5;overflow:hidden}
.redd_mock{background-color: #fd0d19;overflow:hidden}


.half{margin-bottom:30px;width:calc(50% - 60px);align-items:center;justify-content:center;margin: 0 30px}

.txt_next_job{font-size: 20pt;line-height: 24pt; margin:15px 0}

.txt_job_title{font-size: 24pt;line-height: 24pt; color:white;left:0;width:100%;padding-bottom:30px}
.txt_all_jobs{font-size: calc(12pt + 1vw);line-height: calc(12pt + 1vw); margin:15px 0}

.title_copy{display:block;font-family: 'manrope_var', sans-serif; font-weight:800; text-transform:uppercase;color:black;font-size:34pt; line-height:34pt;}

.txt_prev{font-size: 24pt}

.exit_nav{top:-60px!important}
.exit_nav_bloc{top:-90px;}

.top_icon{cursor:pointer;margin:auto;height:50px;width:50px;display:block;position:relative;float:right;z-index:1;}

.box_next{position:relative;display:block;width:400px;height:auto; aspect-ratio:3/2}
.box_prev{position:relative;display:block;width:400px;height:auto;aspect-ratio:3/2}
.box_gap{position:relative;width:calc(100% - 800px);height:200px;}

.box_next_txt{position:relative;height:auto;}

.col_90{opacity:.9;width:auto;display:inline-block}
.col_70{opacity:.7}
.col_60{opacity:.6}
.col_50{opacity:.5}
.col_40{opacity:.40}
.col_30{opacity:.3}
.col_20{opacity:.2}
.col_b{color:black}

.menu_item_on{top:0;left:0;opacity:1;}


.clip{ -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
overflow:hidden;
}

.intro_h{height:calc(100% - 140px);width:calc(100% - 100px);top:90px;margin:0 auto;left:0;right:0;}

.mas_grid{  width: 100%;
  display: flex;
  flex-wrap: nowrap; 
  align-items: flex-start;top:0;position:relative;
justify-content: space-between;transition:all .5s}

.h100{height:100%;width:100%;}
.h100vh{height:100vh;}
.h80vh{height:80vh;}
.h200vh{height:200vh;width:100%;}

.base_h{height:calc(100vh - 200px)}

.h50vh{height:50vh;width:100%;}
.h20vh{height:10vh;width:100%;}
.h60vh{height:60vh;width:100%;}
.h70vh{height:70vh;width:100%;}
.h_quote_vh{height:60vh;width:100%;min-height:500px}

.cursor_down{cursor:url('../pics/arrow_pix.png'), pointer}

.slow_trans{opacity:1;top:0;position:relative;transition:all 1s 1s}
.slow_trans_long{opacity:1;top:0;position:relative;transition:opacity 1s 2s, top 1s 2s}
.page_trans{transition:all 1s 1s}
.set_trans_long{transition:opacity .5s 3.8s}
.set_trans_exit{transition: all .5s 0s}

.fade_up{top:-100px;}
.fade_out{opacity:0;transition:opacity .5s}
.fade_out_up{opacity:0;top:50px;}
.fade_in{opacity:1;transition:opacity .5s}

.opacity_nil{opacity:0;transition:opacity .3s}




.gps_screen{aspect-ratio: 3/2;height:auto;width:60vw;border-radius:10px; border:solid white 2px; overflow:hidden}

.web_screen{aspect-ratio: 16/9;height:auto;border-radius:10px; border:solid white 2px; overflow:hidden}

.gp_type{width:55%;object-fit: contain; top:1.5vh; position:absolute;transition:all 0s}
.gp_image{object-position:center top;padding-top:5%;width:100%; position:absolute;border-radius: 10px; transition:all 0s}
.gp_frame{object-fit: fill;object-position: top;width:100%;height:auto; top:0;position:absolute;transition:all 0s}

.gps_screen .gps_gmail{width:160px;margin-top:40vh}
.numbers{height:30px;padding: 10px 0;width:auto;background-color: red;z-index:10;font-family: 'gotham', sans-serif;font-size:28px;color:white;margin-top:calc(40vh - 160px);margin-left:100px;position:absolute;}

.gps_screen .red_dot {
  height: 50px;
  width: 50px;right:-27px;
  background-color: red;
  border-radius: 50%;
position:absolute;
    z-index:-1
}

.bk_bgimg{background-image:url("../pics/bk_to_fk11.webp");width:100%;height:18vh;background-size:22vh;}

.bg_noimg{background-image:none;}
.bg_shift{background-position: 11vh 0}

.gps_screen .red_dot_l {
left:-27px; background-color:red;
}

.gps_screen .email_num{margin-top: 2px;}

.out_content_fix{justify-content: space-between;gap:20px 40px; width: calc(100% - 70px);max-width:1800px}

.site_label{position:fixed;color:white;font-size:12pt;bottom:calc(300px - 12vw);right:20vw}

.vimeo_16_9{padding-bottom: 56.25%;}
.vimeo_1_1{padding-bottom: 100%;}
.vimeo_4_3{padding-bottom: 75%;}

.vid_style{margin:auto;border-radius: 1vw;flex: 1 1 auto;overflow:hidden}
.container .vid_style{border-radius: 0;}

.lazy_vim{opacity:0; transition:all 1s}
.vim_view{opacity:1;}

.text_hide{transform: rotate(-4deg) translate(0, -50px); width:auto;margin:50px;overflow:hidden;position:absolute;left:0;right:0;margin:auto;transition:transform 1s cubic-bezier(0.25,1,0.5,1),opacity 1.2s cubic-bezier(0.25,1,0.5,1);transition-delay: .5s;}

.hide_txt{transform: translate(0, 150%); opacity:0;margin:5%;width:90%;height:90%;position:relative;overflow:visible;
    transition:transform 1s cubic-bezier(0.25,1,0.5,1),opacity 1.2s cubic-bezier(0.25,1,0.5,1);transition-delay: .5s;
}

.show_txt{transform: translate(0, 0);opacity:1; }
.text_hide_show {transform: translate(0, 0); }

.down_arrow{z-index:900;margin:auto;left:0;right:0;position:fixed;width:80%;height:150px;bottom:0px;cursor:pointer;animation-name: arrow_move;
animation-duration: 1s;
animation-iteration-count: 3;
opacity:1;transform: translate(0, 0); }

.right_arrow{z-index:700;margin:auto;top:0;bottom:0;margin:auto;right:0;width:50px;height:auto;cursor:pointer;position:absolute;align-self: flex-end;
}
.right_arrow img{transform:rotate(-90deg);}
.left_arrow img{transform:rotate(90deg);}


.left_arrow{z-index:700;margin:auto;top:0;bottom:0;margin:auto;left:0;width:50px;height:auto;cursor:pointer;position:absolute;align-self: flex-start;
}

.right_arrow, .left_arrow{display:block; width:7.5vw;height:90%;opacity:1;transition:opacity .3s, left .5s .3s, right .5s .3s}
.left_arrow img, .right_arrow img{height:13px;width:auto; top:80px;bottom:0;left:0;right:0;margin:auto;position: absolute}

.l_arrow_off{left:-120px;opacity:0}
.r_arrow_off{right:-120px;opacity:0}

.arrow{  
height:15px;width:auto;top:0;position:relative;transition:all .3s;
animation-name: arrow_move;
animation-duration: 5s;
animation-delay: 9s;
animation-iteration-count: 1;}







@keyframes arrow_move {
  0%   {top:0px;}
  5%  {top:20px;}
  10%  {top:0px;}
  15%  {top:20px}
  20% {top:0px}
100% {top:0px}
}

.about_page.scroll_stop .logo_nav{left:50px;top:30px;position:fixed;transition:all .5s;}



.vid_play_butt {display:flex;
  position: absolute;
  width: 10%;
aspect-ratio:1/1;
  border-radius: 50%;
opacity:1;
  pointer-events: none;
top:40%;left:45%;
    background-color: hsla(0,100%,100%,0);
    transition:all .3s
    
}

.vid_style:hover .vid_play_butt{background-color: hsla(0,100%,100%,0.3);}



.blk_nav_txt{font-family: 'manrope_var', sans-serif;font-weight: 800;text-transform: uppercase;color: black;font-size: 34pt;line-height: 34pt;margin:5px -3px}

.blk_nav_txt a, .blk_nav_txt a:link, .blk_nav_txt a:active{color:black;transition:all .5s}

.vid_play_butt::before {
  content: '';
  position: absolute;
  top: calc(50% - calc(.5vh + .5vw));
  left: calc(50% - calc(.4vh + .4vw));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(.5vh + .5vw) 0 calc(.5vh + .5vw) calc(1.1vh + 1.1vw);
  border-color: transparent transparent transparent white;
}

.move_play{margin-left:-25px;margin-bottom:-10px;}
.menu_switch{opacity:1;left:0;right:0;margin:auto;transition:opacity 1s .5s;}
.menu_leave{opacity:0;transition:opacity .3s;transition-delay: 0s;}

.late_load{opacity:0;transition:opacity .5s}

.bk_web_fix{position:absolute;top:0;bottom:0;width:70%;left:0;right:0;margin:auto;aspect-ratio:16/9}
.vimeo_txt, .behance_txt, .insta_txt{transition:all .5s}



img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}


     .slow_move {
         top: 0 !important;
         bottom: 0 !important;
         will-change: auto !important;transition: transform 0s !important}

 @media (max-width: 900px) {
    .copyright{font-size:8px;bottom:-10px}
    .title_copy{font-size: 22pt; line-height: 22pt;color:#f4c205;}
    .small_sans{color:#3d3d3d;}
    .txt_job_title{padding-bottom:20px;}
    .logo_flex{width:80px;margin:0 10px;}
    .gps_screen{border: solid white 1px;width: 75vw;}
    .small_sans{font-size: 8pt;color:#555555;}
    #menu_block{ font-size:38px;}
    .menu{left:30px;padding-top:70px;}
    .intro_line{margin-top:-12px;}
    .logo_wsj_fp{width:160px;margin-bottom:10px}
    .logo_se_fp{width:140px;margin-bottom:10px}

    .logo_gps_fp{width:60px;}
    .logo_bud_fp{width:80px;margin-bottom:5px;}
    .info_box{font-size:16pt;line-height: 20pt;margin:15px 0;}
.about_page.scroll_stop .logo_nav{left:30px;top:10px;transition:left .5s;position:fixed;}

     .site_label{right:12.5vw}
     .full{ margin: 0 -30px;}
     .fp_titles{width: calc(100% - 60px);padding:30px;font-size: 18pt; line-height: 18pt;}
    .title_txt{font-size:22pt;line-height:22pt}
     .about_intro{width:100%}
     .content{width: calc(100% - 60px);}
     .title_sub{font-size:22pt;line-height:24pt}
     .about_intro_sub{font-size:18pt;line-height:22pt}
     .logo_box{height:30px;width:40px;margin:10px 10px;}
     .press_box{margin:20px;width:calc(100% - 40px)}
     .title_copy{font-size: 22pt; line-height: 22pt;color:#3d3d3d;}

    .about_intro{font-size:22pt;line-height:24pt}
     .about_page .logo_nav{top: 69px;left: 116px;}
     .about_head{font-size:24pt}
     .about_res_sub{font-size:14pt;line-height:16pt}
     .about_row{margin-right: 0}
     .about_brands{padding-right:0}
     
     .logo_nav{left:30px;top:10px}
    .ham{right:30px;top:12px}
     .ham_cols{z-index:900}
     .kill_up{top:-65px}
     .body{overflow-x:hidden}
     .box_quote{margin: 40px 20px;margin-bottom:120px;min-width:300px}
     .exit_nav{top: -60px;}
     .nav_bloc {height:70px}
     

     
     .grid_flex_fill{height:0;width:0;margin:0;min-width:0;display:none}
     .up_150{margin-top:50px}
.down_150{margin-top:50px}
     
.about_row .grid_flex_40{width:calc(100% - 30px)}
}

/* for grids */

.m-text_delete {position:absolute;bottom:20px;left:25%;font-family: sans-serif;font-weight: bold;font-size:50px;text-decoration: underline; color:red; z-index: 100;opacity:0}






.masonry-brick:hover .m-text_delete{opacity:1}



.masonry_text {display: flex; align-content: center; flex-wrap:wrap; justify-content: space-between; padding:5px 0;position:relative;font-family: sans-serif;font-size:calc(8px + .4vw);color:grey; height:25px;line-height: 23px;transition:all .3s}

.masonry_plus { rotate: 0deg; font-size:25px; height: 25px;width:25px;text-align:center;line-height: 20px;top:-2px;position:relative;transition:all .3s;}


.masonry_text:hover .masonry_plus{rotate: 180deg;color:hsla(0,100%,100%,1);}

.masonry_text:hover .masonry_info{color:#222222;background-color: #ffffff;}



.container_elements{display:none}

.container {
  display: flex;  
  flex-wrap: wrap;  
    justify-content:space-between;
    width:calc(20% - 2vw);
    height:auto;
}

.mas_grid_fp{width:75%;margin-left:auto;margin-right:-5%}
.mas_grid_fp .container{width:calc(25% - 2vw);}


.flex_brick{
  width: 100%; /* 5 columns with 10px gap */  
  display: flex;  
padding:10px 0;
  flex-direction: column; 
overflow:hidden;
}

.flex_hide{width:0;display:none}
.caro_box .flex_hide{width:100%;display:flex}
.caro_box .flex_h50, .caro_box .flex_h60{height:100%}

@media (max-width: 900px) {
.container {width:calc(33.3% - 2vw);}
#column04, #column05{width:0;display:none;}
.mas_grid_fp #column04{width:0;display:none;}
.mas_grid_fp .container{width:calc(33.3% - 3vw);}
.mas_grid_fp{margin-right:-10%}
    #kill_caro{top:18px}
}

@media (max-width: 500px) {
.container {width:calc(50% - 2vw);}
#column03, #column04, #column05{width:0;display:none;}
.mas_grid_fp #column04, .mas_grid_fp #column03{width:0;display:none;}
.mas_grid_fp .container{width:calc(50% - 3vw);}
.mas_grid_fp{margin-right:-10%}
}





.card{  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;}


.card-back{
  background: #03446A;
  color: white;
  transform: rotateY( 180deg );
   position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;   
}



.flex_brick img {transition:all .3s;
  width: 100%; /* Ensure images fit the brick */
  height: auto; /* Maintain aspect ratio */
    transition:all .5s;
}






.flex_brick:hover .masonry_text{color:white}
.flex_brick_hover{opacity:.7; transition:opacity .5s ease-in-out}






.card-content {
    position:relative;
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
left:0;
 transition: transform 0.4s ease-in-out, left .3s;

}



.slide_left{left:-90%;}



.card-flip {
  transform: rotateY(180deg);
}

.plus_x {
  transform: rotate(135deg); /* Changed rotateY to rotate for better spin effect */
}

.front,
.back {font-family: 'manrope_var', sans-serif;font-weight:600;font-size:calc(1vw + 5px);line-height:calc(1.2vw + 9px);letter-spacing:-.2px;
  position: relative;
  height: auto;
  width: 100%;
  backface-visibility: hidden;
display:block;
    left:0;
top:0;
}

.link_base{margin-bottom: 0;margin-top: auto;bottom: 35px;position: absolute;}



.phat{height:5%;width:0;left:0;bottom:0;display:block;position:absolute;transition:all .5s}
.flex_brick .card-content:hover .phat{  animation-name: phatter;animation-duration: .5s;}

.phat_white{background-color: hsla(0, 100%, 100%,.5);}


@keyframes phatter {
  0%   {width:0;}
  40%  {width:100%;left:0}
  60%  {width:100%;left:0}
  97%  {width:100%;left:100%}
  98%  {width:0;left:100%}
100%  {width:0;left:0}

}

.back {  position: absolute;width:calc(100% - 40px);height:calc(100% - 40px);display:block;left:0;right:0;top:0;bottom:0;margin:auto;
  color:#999999; background-color:#333333;padding:20px;
  transform: rotateY( 180deg );
}

.aspect_3_2{aspect-ratio: 3 / 2;}
.aspect_2_3{aspect-ratio: 2 / 3;}
.aspect_1_1{aspect-ratio: 1 / 1;}
.aspect_16_9{aspect-ratio: 16 / 9;}
.aspect_9_16{aspect-ratio: 9 / 16;}
.aspect_21_9{aspect-ratio: 21 / 9;}
.aspect_16_10{aspect-ratio: 10 / 16;}


.aspect_4_3{aspect-ratio: 4 / 3;}
.aspect_3_4{aspect-ratio: 3 / 4;}

.aspect_4_5{aspect-ratio: 4 / 5;}
.aspect_5_4{aspect-ratio: 5 / 4;}

.aspect_5_7{aspect-ratio: 5 / 7;}

.load{opacity:0;transform: translateY(50px);transition:all .5s, transform .5s .2s ease-in-out, opacity .5s .2s ease-in-out !important;}
.loaded{opacity:1;transform: translateY(0)}

.late_load{transform: translateY(30px); display:inline-block;transition:all 1s 1s}
.late_load.loaded{transform: translateY(0);}


/* desktops */
 @media (min-device-width: 29cm) {
     .down_arrow:hover .arrow{top:15px;}
     .vimeo_butt:hover{background: #13a3e8}
     .vimeo_line:hover .vimeo_line_ov{height:6px;top:13.5px;border-radius: 4px;}
     .ham:hover .ham_line{width:30px;transition:all .3s;}

     .ham:hover .ham1{width:0;margin-right:0;transition:all .3s}
     .ham:hover #ham1_01.ham_line1, .ham:hover #ham3_02.ham_line2{
         width:30px;transition:all .3s}

     .ham:hover #ham1_01.ham_line1, .ham:hover #ham3_02.ham_line2
     {width:30px;transition:all .3s}
     .over:hover img{opacity:0;}
     .caro_nav span:hover{opacity:1;}
     a:hover + .over_sib{opacity:.3}
     .to_over:hover .liner:after {transform: scaleX(1);transform-origin: bottom left;}
    .to_over:hover .liner:before {width:0;}
     .yellow_hov:hover{color:#def04c}

}





/* Grid container */
.gridy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
  gap: 10px; /* Spacing between items */
  grid-auto-flow: dense; /* Fill gaps densely */
  padding: 10px;
  max-width: 1200px; /* Optional max width */
  margin: 0 auto;
  grid-auto-rows: auto; /* Let rows adjust based on content (image height) */
}

/* Grid items */
.gridy_item {
  display: inline-block;
    position:relative;
  overflow: hidden;
  /* Allow height to be determined by content */
}

/* Images */
.gridy_item img {
  width: 100%; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below images */
}






.grey_card{height:0;display:none;padding:0;margin-right:0%;}


.hide_card{display:none}
.show_box .hide_card{display:block}

.caro_box .grey_card{    position: relative;
font-family: 'manrope_var', sans-serif;font-weight:400;font-size:calc(.9vh + 1.1vw);line-height:calc(1.2vh + 1.3vw);letter-spacing:-.2px;width:calc(20vw + 20vh);height:auto;max-height:80%;aspect-ratio: 3 / 4;display:block;background-color: #444444;color:#999999;padding:40px;transition:all .5s}

/* for phones. */

 @media (max-device-width: 12cm) {

     .fp_img_zuj{left:38%}
    .zuji_star{top:calc((25% - 1vw) - 20px);left:12%}
     .zuji_price{top:calc((25% - 1vw) - 20px);left:12%}
     .down_arrow {height:100px}
     .quoter::before{content:'"';left:-15px;}
     .base_h{height:calc(100vh - 80px)}
     .click_dave{top:100px}
          .info_box{font-size:14pt;line-height: 18pt;margin:30px 0;}
     .title_logo_wsj{height:18px;}
     .title_logo_se_line{height:15.5px;}
    .title_logo_se{height:35px;}
     .title_logo_wsj_line{height:18px;}
     .title_logo_gps{height:50px;}
     .title_logo_opt{height:40px;left:-7px}

     .title_logo_pet{height:30px}
     .title_logo_pet_line{font-size:12pt;}
     .title_logo_bk{height:85px; left: -9px;} 
     .title_logo_goo{height:35px;} 
     .title_logo_zuj{height:45px;}    
     .site_label{right:12.5vw;font-size: 9pt;bottom: calc(300px - 24vw);}
     .copyright{font-size:8px;bottom:-10px}
         .about_intro{font-size:22pt;line-height:24pt}
     .about_page .logo_nav{top: 69px;left: 114px;}
     .about_head{font-size:24pt}
     .about_res_sub{font-size:14pt;line-height:16pt}
     .about_row{margin-right: 0}
     .about_brands{padding-right:0}
     .about_page.scroll_stop .logo_nav{left:30px;top:10px;transition:left .5s;position:fixed}
     .logo_nav{left:30px;top:10px}
     .txt_job_title{padding-bottom:20px;}
     .logo_flex{width:80px;margin:0 10px;}
     .gps_screen{border: solid white 1px;width: 80vw;}
     #menu_block{ font-size:28pt;}
     .menu{left:30px;padding-top:70px;}
     .intro_line{margin-top:-12px;width: 100%;}
     .logo_wsj_fp{width:160px;margin-bottom:10px;margin-left:-5px}
     .logo_gps_fp{width:60px;}
     .logo_bud_fp{width:80px;margin-bottom:5px}
     .box_flex_cont_intro{margin-top:75px;}
     .full{ margin: 0 -30px;}
     .fp_titles{width: calc(100% - 60px);padding:30px;font-size: 18pt; line-height: 18pt;}
    .title_txt{font-size:22pt;line-height:22pt}
     .content{width: calc(100% - 60px);}
     .title_sub{font-size:20pt;line-height:22pt;width:100%;}
     .logo_box{height:30px;width:40px;margin:10px 10px;}
     .press_box{margin:20px;width:calc(100% - 40px)}
     .title_copy{font-size: 16pt; line-height: 16pt;color:#3d3d3d;}
     .small_sans{font-size: 8pt;color:#555555;}
     .logo_nav{left:30px;top:10px}
    .ham{right:30px;top:12px}
     .body{overflow-x:hidden}
     .box_quote{margin: 40px 20px;margin-bottom:120px;min-width:300px}
     .exit_nav{top: -60px;}
     .nav_bloc {height:70px}
.grid_flex{gap:15px 15px;}
     .to_over:hover .line{width:initial;}
     .slow_move {top: 0 !important;bottom: 0 !important;will-change: auto !important;}
    .about_copy{font-size:15pt;line-height:18pt;padding-bottom: 40px;width:100%}
     .left_arrow img, .right_arrow img{height:10px;}
         #kill_caro{top:18px}
     .caro_box .grey_card{
font-family: 'manrope_var', sans-serif;font-weight:600;font-size:calc(10px + 1.1vw);line-height:calc(12px + 1.3vw);letter-spacing:-.2px;width:calc(25vw + 25vh);height:auto;max-height:80%;aspect-ratio: 3 / 4;display:block;background-color: #444444;color:#999999;padding:20px;transition:all .5s}
.content, html{scroll-snap-type: none}
}


 @media (max-width: 900px) {
     .kill_up{top:-65px;}
}
/* for ipad */

 @media (min-device-width: 12cm) and (max-device-width: 29cm) {
     }

@media (min-aspect-ratio: 16/9) {
.vid_iframe{position:relative;margin:auto;height:100%;left:0;right:0;}

}