/* common css strts here */
:root{
    --gloss_lite_color:#ccc;
    --gloss_color:#888;
    --gloss_md_color:#666;
    --gloss_active:rgba(0,0,0,0.9);

    --header_ht:72px;
    --wrapper_ht: calc(100vh - var(--sec_top_down_padding));

    --section_spacing: 0.75rem;
    --page_space:3rem;
    --sec_top_down_padding:1.25rem;

    --trans_duration: 0.5s;
    --cmn_opacity: 0.95;

    /* js requirements strts here */
    --d_none:none;
    /* js requirements ends here */
}

@font-face {
    font-family: Gloss_font;
    src: url(../fonts/AkzidenzGroteskBE-Regular.woff);
}
@font-face {
    font-family: AkzidenzGroteskBE-Light;
    src: url(../fonts/AkzidenzGroteskBE-Light.woff);
}
@font-face {
    font-family: AkzidenzGroteskBE-Md;
    src: url(../fonts/akzidenzgroteskbe-md-webfont.woff);
}
@font-face {
    font-family: 'serifttfont';
    src: url('../fonts/serifttfont.eot');
    src: url('../fonts/serifttfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/serifttfont.woff') format('woff'),
    url('../fonts/serifttfont.ttf') format('truetype'),
    url('../fonts/serifttfont.svg#serifttfont') format('svg');
}

html{
    -webkit-overflow-scrolling: touch;
    overflow:auto;
}
html,body{
    font-family:'Gloss_font';
    -webkit-overflow-scrolling: touch;
    color:var(--gloss_active) !important;
    padding:0 !important;
}
.main_wrapper{
    padding:0 var(--page_space);
}
.section_wrapper, .main_wrapper{
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
a{
    color:var(--gloss_active);
    padding:0 !important;
}
a:hover{
    text-decoration:underline;
    color:var(--gloss_active);
}
a:focus{
    outline:none;
}
.active{
    text-decoration:underline;
    color:var(--gloss_active) !important;
}
/* js classes strts here */
.overscroll_class{
    position:fixed;
    overflow:hidden !important;
}
.full_viewport{
    height:100vh;
    width:100vw;
}
/* js classes ends here */

/* modal strts here */
#popupcontainer{
    padding:0 !important;
}
.shareplus_icon{
    margin:5px 13px;
}
#shareplus_icons{
    text-align:center;
}
#sharepopup h4{
    font-size: 15px;
    margin: 0.5rem 0 0.5rem 0;
}
.share_modal_dialog{
    max-width:580px;
    margin: 37vh auto 0 auto;
}
.share_modal_body{
    min-height: 85px;
}
#shareplus_icons img{
    height: 25px;
    width: 25px;
}
#shareplus_icons span{
    line-height: 3em;
}
#shareplus_icons a:hover span{
    text-decoration:underline;
}
#sharepopup .modal-header{
    padding: 0.5rem 1rem !important;
}
#shareplus_icons a{
    text-decoration:none;
    color:var(--global-font-color);
    display: inline-block;
}
.hidepopup{
    display: none !important;
}
.modal-header .close{
    margin-top: -10px;
}
.modalClose img{
    height:25px;
}
/* modal ends here */

/* navbar strts here */
.nav_header{
    width:100%;
    transition:var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
    height:var(--header_ht);
}
.navbar{
    opacity:var(--cmn_opacity);
    box-shadow: 0 4px 5px rgba(0,0,0,.2) !important;
    min-height:70px;
    min-width:300px;
    width:100%;
    height:var(--header_ht);
    padding:0;
    color:var(--gloss_active) !important;
    transition:var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
#navbarNav{
    background:white;
}
.nav_content{
    height:100%;
    padding:0.35rem 0;
}
.logo{
    height:100%;
    padding:0;
    margin-left:var(--page_space);
}
.logo img{
    height:100%;
    width:auto;
    vertical-align:top;
    cursor:pointer;
}
/* NAV BUTTON STRTS HERE */
.nav_btn1{
    cursor:pointer;
    float:right;
    padding:0 var(--page_space);
}
.bar1, .bar2, .bar3 {
    width: 25px;
    height: 1px;
    background-color: var(--gloss_active);
    margin: 7px 0;
    transition: 0.2s;
    -moz-transition:0.2s;
    -ms-transition:0.2s;
    -o-transition:0.2s;
}
.change .bar1{
    -webkit-transform: rotate(-47deg) translate(-7px,8.5px);
    transform: rotate(-47deg) translate(-7px,8.5px);
    height: 1px;
    width: 25px;
    margin-left:-1px;
}
.change .bar2{
    opacity: 0;
}
.change .bar3{
    -webkit-transform: rotate(47deg) translate(-2.5,-5px);
    transform: rotate(47deg) translate(-2.5px,-5px);
    height: 1px;
    width: 25px;
    margin-left:-1px;
}
/* NAV BUTTON ENDS HERE */
.navbar-nav{
    background:white;
}
.nav-item{
    cursor:pointer;
}
.portfolio-navbar .navbar-nav .nav-link{
    font-weight:normal !important;
    font-size:15px;
}
.topnav_list_outer {
  position:relative;
}
.topnav_clickable{
    padding-right:2.75rem;
    color:var(--gloss_active);
    letter-spacing:1px;
}
.topnav_clickable:hover, .active .topnav_clickable{
    color:var(--gloss_active);
    text-decoration:underline;
}
.topnav_list {
    position:absolute;
    top:35px;
    left: -1.55rem;
    color:var(--gloss_active) !important;
    background:white;
    padding:0 1.5rem;
    min-width:130px;
    white-space:nowrap;
}
.nav_list_item{
    padding: 0.45rem 0 !important;
    font-size: 12px;
    display: block;
    letter-spacing:1px;
}
.nav_list_item:hover{
    color:var(--gloss_active) !important;
    text-decoration:underline;
}
/* navbar ends here */
/* common css ends here */
.projectNameHover{
    position:absolute;
    top:0;
    left:0;
    width:calc(100% - 1.13rem);
    height:calc(100% - 1.13rem);
    background-color:#ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Gloss_font';
    font-size:14px;
    visibility:hidden;
    opacity:0.9;
    text-transform:uppercase;
    text-align:center;
    padding:10px;
}

.film_project_block:hover .projectNameHover{
    visibility:visible;
}

.project_block:hover .projectNameHover {
    visibility:visible;
}

/* homepage strts here */
.homepage_wrapper{
    height:100vh;
    position:relative;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + 2*(0.5rem));
    margin-left: -0.5rem;
}
.homepage_preloader{
    display:none;
    height:100%;
    width:100%;
    background:white;
    position:absolute;
    top:0;
    left:0;
    z-index:1050;
}
.homepage_preloader_inner{
    height:100%;
    position:relative;
}
.homepage_preloader img{
    position:absolute;
    height:9vh;
    min-height:100px;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}
/* marquee strts here */
/* plugin css strts here */
.scroller_wrapper{
    overflow:hidden;
    position:relative;
}
.original, .cloned{
    position:absolute;
    width:100%;
}
/* plugin css ends here */

.marquee{
    height:100%;
    overflow:hidden;
    display:inline-block;
    float:left;
    transition:var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
.marquee_inner{
    width:100%;
}
.marquee_inner img, .marquee_inner iframe, .marquee_inner video{
    width:100%;
    background:white;
    height:auto;
    padding:0.5rem;
    outline:none;
}
.marquee_inner iframe{
    min-height:220px;
}
/* marquee ends here */
/* homepage ends here */

/* project-grid strts here */
.coming_soon_wrapper{
    height: calc(100vh - var(--sec_top_down_padding) - var(--header_ht));
    width: 100%;
    display: table;
}
.coming_soon_content{
    display: table-cell;
    text-align: center;
    font-size: 17px;
    text-transform: capitalize;
    vertical-align:middle;
    width: 100%;
}
.project_grid_wrapper, .doc_page_wrapper {
    width: calc(100% - 2.5em);
    margin: 0 0 0 auto;
}

.project_slideshow{
    height:calc(var(--wrapper_ht) - var(--header_ht));
    display:var(--d_none);
    opacity:0;
    margin-bottom:1rem;
}
.proj_desc{
    color:var(--gloss_active);
    height:55px;
    font-size:11px;
    letter-spacing:1px;
}
.proj_desc_inner{
    margin-top:9px;
    line-height:30px;
}
.proj_name_outer, .proj_name, .photographer{
    float:left;
    text-transform:uppercase;
    word-spacing: 3px;
    margin:0 3px;
    letter-spacing: 1px;
}
.center_arrow{
    width:30%;
    margin:auto;
    text-align:center;
}
.down_arw{
    cursor:pointer;
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 9px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.swiper_nav_block{
    float:right;
}
.swiper_block{
    height:calc(100% - 55px);
    padding-bottom:0.75rem;
}
.swiper-container{
    height:100%;
}
.swiper-slide{
    position:relative;
    background:white;
}
.swiper-slide img, .swiper-slide video, .swiper-slide iframe{
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background: #ddd;
}
.swiper-slide iframe{
    height:100%;
    width:100%;
    background: #000;
}
.main_wrapper.preview_page .swiper_nav{
    display: none;
}
.main_wrapper.preview_page .project_slideshow{
    height: calc(100vh - var(--header_ht));
}
.swiper_nav_block div, .swiper_nav_block a{
    color:var(--gloss_active);
    min-width:50px;
    display:inline-block;
    margin:0 1rem;
    width:auto;
    text-align:right;
}
.swiper_nav_block a:hover{
    color:var(--gloss_active);
    text-decoration:underline !important;
    cursor:pointer;
}
.nav_nxt{
    right:0;
}
.nav_prev{
    left:0;
}
.swiper_nav{
    position:absolute;
    width:50%;
    top:0;
    height:100%;
    z-index:999;
}
.project_list, .doc_images{
    margin:0 !important;
    width: calc(100% + 1.15rem);
}
.project_block{
    padding:0 1.15rem 1.15rem 0 !important;
    width:33.33332%;
    display:inline-block;
    vertical-align:top;
    position:relative;
    /*float:left;*/
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
.project_block img{
    width:100%;
    height:auto;
}
.img_block{
    padding:0;
    display:inline-block;
}
.img_block img, .img_block iframe, .img_block video{
    width:100%;
    height:auto;
    padding:0 1.15rem 1.15rem 0;
}
.img_block video:focus{
    outline:none;
}
.viewall_img_block{
    display:inline-block;
    padding:0 1.15rem 1.15rem 0 !important;
}
.viewall_img_block img{
    padding:0;
    margin:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    max-width:100%;
    max-height:100%;
    margin:auto;
}
.viewall_img_block video, .viewall_img_block iframe{
    padding:0;
}
.viewall_img_block iframe{
    min-height:25vh;
}
.viewall_nav{
    position:relative;
    min-height: 40px;
    margin-bottom: 0;
}
.viewall_model_name{
    color:var(--gloss_active) !important;
    top:0;
    left:0;
}
.viewall_model_name, .viewall_back_btn, .meta_block{
    position:absolute;
    display:inline-block;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:1px;
    margin-top:0;
}
.viewall_back_btn div:hover{
    text-decoration:underline;
}
.meta_block{
    color:var(--gloss_active) !important;
    top:17px;
    left:0;
    font-weight:lighter;
}
.viewall_photographer_name{
    float:left;
    padding:0 3px;
}
.viewall_back_btn{
    top:17px;
    right:0;
    cursor:pointer;
}
.viewall_back_btn:hover{
    color:var(--gloss_active) !important;
}
.left_arw, .video_left_arw{
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-top:-9px;
}
/* project-grid ends here */

/* film page strts here */
.p-0 .film_project_list{
    padding:var(--sec_top_down_padding) var(--page_space) 0;
}
.film_project_list_inner{
    margin:0 !important;
    width: calc(100% + 1.15rem);
}
.film_project_block{
    padding:0 1.15rem 1.15rem 0 !important;
    position:relative;
    padding:0;
    width:33.33332%;
    display:inline-block;
    vertical-align:top;
    /*float:left;*/
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
.film_project_block img{
    width:100%;
    height:auto;
}
.film_project_block video{
    display:none;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto 0;
    width:100%;
    height:100%;
    padding:0 1.15rem 1.15rem 0;
    background:white;
    outline:none;
}
.film_project_block video:focus{
    outline:none;
}
.video_left_arw{
    top:0;
    right:0;
    margin-top:13px !important;
    cursor:pointer;
}
.video_details_inner div{
    position:absolute;
    color:var(--gloss_active);
    display: inline-block;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
.video_model_name{
    left:0;
    top:14px;
}
.video_directors{
    display:none !important;
    left:0;
    top:19px;
    color:var(--gloss_active) !important;
    font-weight:lighter;
}
.video_details_inner{
    position:relative;
}
.video_player_outer{
    display:none;
    width: calc(100% - 80px);
    margin:0 auto;
    position:relative;
}
.video_player{
    position:relative;
    height:calc(100vh - var(--header_ht) - 55px);
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
.video_desc{
    height:55px;
    padding:20px var(--page_space) 0;
    color: var(--gloss_active);
    font-size: 11px;
    letter-spacing: 1px;
}
.video_desc .video_model_name{
    float: left;
    text-transform: uppercase;
    word-spacing: 3px;
}
.video_back_button, .video_share_button{
    margin-left:calc(2*var(--page_space));
    cursor:pointer;
    float: right;
    text-transform: uppercase;
    word-spacing: 3px;
}
.video_back_button:hover, .video_share_button:hover{
    color:var(--gloss_active);
    text-decoration:underline;
}
.video_desc .down_arw{
    margin-top:-5px;
}
.video_details{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:45px;
    padding:var(--page_space);
}
.video_player video, .video_player iframe{
    height:100%;
    width:100%;
    background:transparent;
    opacity:0;
    outline:none;
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
/* film page ends here */

/* about page strts here */
.about_content{
    padding-top:var(--page_space);
    width:65%;
    margin:auto;
    line-height:30px;
    letter-spacing:2px;
    text-align:justify;
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
/* about page ends here */

/* contact page strts here */
.contact_wrapper{
    margin-bottom:var(--page_space);
}
.contact_content, .gloss_insta{
    padding-top:var(--page_space);
    padding-left: 1.5rem;
    width:80%;
    margin:auto;
    line-height:25px;
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
.gloss_insta{
    padding:var(--sec_top_down_padding) 0 var(--sec_top_down_padding) 1.5rem;
    line-height:25px;
}
.gloss_insta img{
    height:30px;
    margin-right:1rem;
}
.contact_content div, .contact_content p{
    display:inline-block;
    width:24%;
    vertical-align:top;
    margin-bottom:2rem;
}
/* contact page ends here */

/* fineart page strts here */
.fineart_content{
    max-width:880px;
    margin:auto;
}
.fineart_wrapper{
    width:100%;
    padding-top:var(--sec_top_down_padding);
    transition: var(--trans_duration);
    -moz-transition:var(--trans_duration);
    -ms-transition:var(--trans_duration);
    -o-transition:var(--trans_duration);
}
.griffin_logo{
    text-align:center;
    margin-bottom:2rem;
}
.griffin_logo img{
    max-width: 100%;
    max-height: 100%;
}

.link_box p{
    text-align:center;
    margin-bottom:20px;
    line-height:30px;
}
/* fineart page ends here */

/* books page strt here */
.books_media_wrapper{
    --img_padding : 20px;
    width: calc(100% + calc(var(--img_padding) + 7px));
}
.book_block{
    display: inline-block;
    vertical-align: top;
    padding: 0 var(--img_padding) var(--img_padding) 0;
    /*background: #ddd;*/
    background-clip: content-box;
    width:33.33%;
}

.book_block_inner{
    position:relative;
    height:100%;
}

.book_block img{
    width: 100%;
    height: 100%;
    display:block;
    /*opacity:0;*/
}
/* books page end here */

.reelVideoClass1
{
    height:calc(100vh - 93px);
}

.reelVideoClass2
{
    max-width:100%;
    max-height:100%;
    display:block;
    margin:0 auto;
}

.viewAllContainerOuter {
    height: 100%;
    padding: 0 30px 0 10px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /*position: absolute;
    top: 0;
    left: 0;
    opacity: 0;*/
    /*min-width: 59.5em;
    min-height: 30em;*/
    /*z-index: 10;
    visibility: hidden;
    background-color: #ffffff;*/
    /*display:none;*/
    /*font-family: 'serifttfont' , serif;*/
}


.viewAllContainerOuterAlt1{
    padding: 0 30px 0 0;
    overflow:hidden;
}

.viewAllContainerGriffins{
    height:auto;
    margin:50px 0 0 0;
}

.viewAllContainerGriffins a{
    cursor:default;
}

.link_box{
    padding:0 20px;
}

.viewAllContainerInner {
    font-family: 'serifttfont', serif;
    width:calc(100vw - 60px);
}

.viewAllContainerInnerAlt1{
    width:calc(100vw - 136px);
}

.viewAllDiv1 {
    width: 33.33%;
    z-index: 0;
    height: auto;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.viewAllDiv1Alt1 {
    width: 25%;
}

.viewAllDiv2 {
    height: auto;
    width: auto;
    padding: 0 0 40px 40px;
}

.viewAllDiv2Alt1{
    padding: 0 18px 18px 0 !important;
}


.viewAllDiv2Inner{
    position:relative;
}

.viewAllDiv2InnerText{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Gloss_font',sans-serif;
    font-size: 14px;
    visibility: hidden;
    text-transform: uppercase;
    z-index:1;
    text-align:center;
    padding:10px;
}

    .viewAllDiv2Inner:hover .viewAllDiv2InnerText{
        visibility:visible;
    }




.viewAllDiv1 .mainImage {
    height: auto;
    width: 100%;
    display: block;
    opacity: 0;
    /*cursor: pointer;*/
}


.videoOuterContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoOuterContainerClip {
    bottom: 40px;
    left: 40px;
    top:auto;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    z-index:0;
}

.videoOuterContainer > .divTable {
    text-align: center;
}

.videoInnerContainer {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
}

.videoOuterContainerClip .videoInnerContainer
{
    height: 100%;
    width: 100%;
    display:block;
}

.videoOuterContainerClip .divTable
{
    display:block;
}

.videoOuterContainerClip .divTableCell
{
    display:block;
    width:100%;
}

.posRelative
{
    position:relative;
    z-index:1;
}

.videoInnerContainer > iframe {
    width: 100%;
    height: 100%;
    display:block;
}

video
{
    display:block;
}

.vidBottom
{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background-color:#ffffff;
    z-index:1;
    display:none;
}


.vidTop
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background-color:#ffffff;
    z-index:1;
    display:none;
}




iframe {
    border:0;
}

.classOfPlayerMP4Clip{
    width:100%;
    height:100%;
    display:block;
}

.classOfPlayerMP4{
    width:100%;
    height:100%;
    display:block;
}

.homeBackArrow{
    left:3em;
    top:6em;
    position:absolute;
    display:block;
    height:2em;
}

.homeBackArrowImg{
    display:block;
    height:100%;
}
@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}
@media (hover: hover) and (pointer: fine)  {
    .book_block_inner:hover .viewAllDiv2InnerText{
        visibility:visible;
    }
}

.viewAllDiv2InnerText.viewAllDiv2InnerTextAlt{
    visibility:visible;
}

.aboutLogo{
    font-size:0;
    width:65%;
    margin:0 auto;
}

.aboutLogo1{
    width:20%;
    display:inline-block;
    vertical-align:top;
}

.aboutLogo2{
    padding:20px 20px;
}

.aboutLogo3{
    height:70px;
    position:relative;
}

.aboutLogoContainer{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    height:10px;
    width:10px;
    opacity:0;
}

.aboutLogoContainerCache{
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:block;
}

.aboutLogo4{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#ffffff;
    opacity:0;
}

.barbieWrapper{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#ffffff;
    opacity:1;
    z-index: 1040;
}

.barbieWrapperD{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#ffffff;
    opacity:1;
    z-index: 1;
}


.barbieWrapperM{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#ffffff;
    opacity:1;
    z-index: 2;
    display:none;
}

.videoArrowLeft {
    position: absolute;
    top: calc(50% - 40px);
    left: -30px;
    height:25px;
    display:block;
    cursor:pointer;
}


.videoArrowRight {
    position: absolute;
    top: calc(50% - 40px);
    right: -30px;
    height:25px;
    display:block;
    cursor:pointer;
    rotate: 180deg;

}

.videoArrowCommon{

}

.displayNone{
    display:none;
}

.displayNoneI{
    display:none !important;
}

@media(max-width:2200px){
    /* project-grid strts here */
    .project_block, .film_project_block{
        width:25%;
    }
    /* project-grid ends here */

    /* viewall page strts here */
    .img_block{
        width:25%;
    }
    /* viewall page ends here */
}
@media(max-width:1800px){
    /* project-grid strts here */
    .project_block, .film_project_block{
        width:33.33332%;
    }
    /* project-grid ends here */

    /* viewall page strts here */
    .img_block{
        width:33.33332%;
    }
    /* viewall page ends here */


    .viewAllDiv1Alt1 {
        width: 33.33%;
    }
}
@media(max-width:1200px){
    .contact_content div, .contact_content p{
        width: 49%;
    }
}
@media(max-width:981px){
    /* common css strts here */
    .navbar{
        min-height:50px;
    }
    .navbar-nav{
        height: calc(100vh - var(--header_ht) - 0.35rem);
        margin-top:1rem;
    }
    .portfolio-navbar .navbar-nav .nav-item{
        border-top:1px solid #ccc;
        margin:0 var(--page_space);
        padding:1rem 0;
    }
    .portfolio-navbar .navbar-nav .nav-item:last-child{
        border-bottom:1px solid #ccc;
    }
    .nav-link{
        padding-x:0;
    }
    .topnav_clickable{
        font-weight:bold;
    }
    .topnav_clickable, .topnav_list{
        padding:0;
        padding-left: 1.7rem !important;
    }
    .topnav_list {
        position:static;
    }
    .list_wrapper{
        margin-top:0.65rem;
    }
    .nav_list_item{
        padding: 0.65rem 3px;
    }
    /* common css ends here */

    /* project-grid strts here */
    .project_block, .film_project_block{
        width:50%;
    }
    /* project-grid ends here */

    /* viewall page strts here */
    .img_block{
        width:50%;
    }
    /* viewall page ends here */
    /* about page strts here */
    .about_content{
        padding-top:0;
        width:85%;
    }
    /* about page ends here */

    /* contact page strts here */
    .contact_content{
        padding-top:0;
    }
    .contact_content, .gloss_insta{
        width:100%;
    }
    /* contact page ends here */
}

@media(max-width:768px){
    /* common css strts here */
    :root{
        --header_ht:60px;
        --page_space:1rem;
        --sec_top_down_padding:1rem;
    }
    .homepage_wrapper{
        width: calc(100% + 2*(0.33rem));
        margin-left:-0.33rem;
    }
    .marquee img{
        padding:0.33rem;
    }
    /* common css ends here */

    /* project-grid strts here */
    .project_block, .film_project_block{
        padding:0 0.6rem 0.6rem 0 !important;
    }
    .project_list, .film_project_list_inner{
        margin:0 !important;
        width:calc(100% + 0.6rem);
    }
    /* project-grid strts here */
    .projectNameHover{
        width:calc(100% - 0.6rem);
        height:calc(100% - 0.6rem);
    }
    /* viewall strts here */
    .doc_images{
        width:calc(100% + 0.6rem);
    }
    .img_block img, .img_block iframe, .img_block video{
        padding:0 0.6rem 0.6rem 0;
    }
    .viewall_img_block{
        padding:0 0.6rem 0.6rem 0 !important;
    }
    .viewall_img_block img, .viewall_img_block video, .viewall_img_block iframe{
        padding:0;
    }
    /* viewall ends here */

    /* film page strts here */
    .video_player video, .video_player iframe{
        height:auto;
        max-height:100%;
        min-height:33.3332%;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:var(--header_ht);
        margin:auto;
    }
    .video_player{
        height:calc(100vh - var(--header_ht));
    }
    /* film page ends here */

    /* about page strts here */
    .about_content{
        width:100%;
    }
    /* about page ends here */
    /* contact page strts here */
    .contact_content, .gloss_insta{
        width:100%;
        padding-left:0;
    }
    .contact_content div, .contact_content p{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    .gloss_insta{
        padding:0;
    }
    /* contact page ends here */
    .link_box p{
        text-align:justify;
    }


    .viewAllDiv1 {
        width: 100%;
    }

    .viewAllDiv1 {
        width: 100%;
    }

    .homeBackArrow{
        left:1em;
    }

    .viewAllContainerOuterAlt1{
        padding:0;
    }

    .viewAllContainerInnerAlt1{
        width:100%;
    }

    .viewAllDiv2Alt1{
        padding: 0 10px 10px 0 !important;
    }

    .aboutLogo{
        width:auto;
    }

    .aboutLogo1{
        width:33.33%;
    }


    .barbieWrapperD{
        display:none;
    }


    .barbieWrapperM{
        display:block;
    }

    .video_player_outer{
        width: calc(100% - 40px);
    }

    .videoArrowLeft {
        top: calc(50% - 37px);
        left: -20px;
    }


    .videoArrowRight {
        top: calc(50% - 37px);
        right: -20px;
    }
}

@media(max-width:576px){
    /* viewall page strts here */
    .img_block{
        width:100%;
    }
    /* viewall page ends here */
}

@media(min-width:1201px){
    /* contact page strt */
    .contact_content div, .contact_content p{
        width: 24%;
    }
    /* contact page end */
}
@media(min-width:2200px){
    /* viewall page strts here */
    .img_block{
        width:20%;
    }
    /* viewall page ends here */

    /* project-grid strts here */
    .project_block, .film_project_block{
        width:20%;
    }
    /* project-grid ends here */
}

@media(max-width: 608px){
        .books_media_wrapper{
        --img_padding : var(--page_space);
        width: 100%;
    }
    .book_block{
        width: 100% !important;
        height: auto !important;
        padding-right:0;
    }
    .book_block img{
        padding-right: 0;
    }
}