section#work-video .alert { margin-top: 20px;}
section#work-video .video_box_wrap {height:auto;width:100%;overflow:hidden;position:relative;padding-bottom:20px;/* border:1px solid #ccc; *//* border-left: 1px solid #ccc; */min-height:420px;margin-top: -1px;}
section#work-video .video_box_wrap .video_box { background:#eee;} 


section#work-video .video_project{padding: 12%;height:100%;position: relative;z-index: 10;}
section#work-video .video_project .line{position: absolute;width: 0%;height: 3px;background: #fff;z-index: 999;left: 0px;top: 50%;transition: all 0.5s ease;}
section#work-video .video_project h1 {font-size: 10vh;margin: 0px;font-family: 'open sans';position: absolute;top: 49%;left: 50%;opacity: 0;color: transparent;transform: translate(-50%,-50%);transition: all 0.5s ease-in-out;z-index: 999;}

section#work-video a.html5lightbox:hover .video_project h1 { opacity: 1;transition: all 0.5s ease-in-out;}
section#work-video .video_details {padding:0 5%;position: relative;z-index: 2;display: flex;}
section#work-video .video_details p {font-size: 15px; margin-top:20px;}
section#work-video .project_number {position: relative;margin: 0px auto;clear: both;font-size: 12px;font-family: var(--font-number);font-weight: 500;margin-top: 10px;color: transparent;-ms-transform: rotate(-270deg);-webkit-transform: rotate(-270deg);transform: rotate(-270deg);}
section#work-video .line_vertical { width: 1px;height: 30px;margin: 0px auto;background: #000;/* float: left; */
clear: both;transition: all 0.5s ease;}


section#work-video .lightboxcontainer { width:100%;text-align:left;}
section#work-video .lightboxleft { width: 40%;float:left;}
section#work-video .lightboxright { width: 60%;float:left;}
section#work-video .lightboxright iframe { min-height: 390px;}
section#work-video .divtext { margin: 36px;}
@media (max-width: 800px) { 
	section#work-video .lightboxleft { width: 100%;}
	section#work-video .lightboxright { width: 100%;}
	section#work-video .divtext { margin: 12px;}
}

span#msg {position: fixed;bottom: 0;left: 0;width: 100%;z-index: 999;margin: 0px;}
span#msg > div {margin-bottom: 0px;text-align: center;font-size: 21px;}

/*----video--overlay----*/
/* 
when .item:hover, show overlay.
overwrite .item-overlay."position"
*/

section#work-video a.html5lightbox:hover .item .item-overlay.top { top: 0;}
section#work-video a.html5lightbox:hover .item .item-overlay.right {right: 0 !important;left: inherit !important;width: 100%;transition: all .5s ease-out;}
section#work-video a.html5lightbox:hover .item .item-overlay.bottom { bottom: 0;}
section#work-video a.html5lightbox:hover .item .item-overlay.left { left: 0;}
section#work-video .item-overlay {cursor: default !important;position: absolute !important;top: 0;left: 0 !important;bottom: 0;/*background: rgba(0,0,0,0.5);*/color: #fff;overflow: hidden;text-align: center;/* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */width: 0%;z-index:1;transition: all 1s ease-in;}
section#work-video .item-overlay.orange { background: rgba(244, 142, 126, 1);}
section#work-video .item-overlay.magenta { background: rgba(184, 159, 255,1);}
section#work-video .item-overlay.greenishblue { background: rgba(80, 172, 204,1);}
section#work-video .item-overlay.blue { background: rgba(43, 104, 210, 1);}
section#work-video .item-overlay.green { background: rgba(95,226,128,1);}
section#work-video .item-overlay.yellow { background: rgba(241,200,8,1);}
section#work-video .item-overlay.darkorange { background: rgba(242,105,62,1);}
section#work-video .item-overlay.pink { background: rgba(235,0,139,1);} 
section#work-video .item-overlay.top { top: 100%;}
section#work-video .item-overlay.right {/* right: 0%; *//* left: -100%; *//* width: 0%; */}
section#work-video .item-overlay.bottom { bottom: 100%;}
section#work-video .item-overlay.left { left: 100%;}
/* misc. CSS */
* { -moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
section#work-video .item {/* position: relative; *//*border: 1px olid #333;*//* float: left; *//* margin: 2%; *//* overflow: hidden; *//* width: 21%; *//* min-height: 500px; */max-width: 540px;}
section#work-video .item img { max-width: 100%;}
/* end of misc. CSS */


section#work-video a.html5lightbox {color: #000;text-decoration: none;}
section#work-video a.html5lightbox .item img { transition: all 0.5s ease;}
section#work-video a.html5lightbox:hover .item img { opacity: 1;border-radius:50%;transition: all 0.5s ease;/*border:5px solid #fff;*/}
section#work-video a.html5lightbox:hover .video_project .line {width: 25%;opacity: 1;/* background: #FFFFFF; *//* height: 3px; */transition: all 0.5s ease;}

section#work-video a.html5lightbox .video_project .video_project-images:after { content: "";position: absolute;z-index: 99;width: 100%;height: 100%;left: 0%;top: 0%;border: 5px solid rgba(255,255,255,0.00) !important;transition: all 0.5s ease-in-out, .5s;}
section#work-video a.html5lightbox:hover .video_project .video_project-images:after { border-radius: 10%; /*border-bottom-right-radius: 50%;border-top-left-radius: 50%;*/background: rgba(51, 51, 51, 0.34);/*border:5px solid #fff;*/transition: all 0.5s ease-in-out;}


div#html5-watermark { display: none !important;}


div#html5-elem-wrap,
div#html5-elem-data-box { background: rgb(26, 26, 26) !important;}
section#work-video #html5box-html5-lightbox #html5-text { color: #FFF !important;}
section#work-video a.html5lightbox:hover .project_number1 {color:#fff !important;text-decoration: none;border: none;outline: none;transition: all 0.5s ease;}
section#work-video a.html5lightbox:hover .project_number:after {color:#fff !important;text-decoration: none;border: none;outline: none;transition: all 0.5s ease;}

section#work-video a.html5lightbox:hover .line_vertical { height:50px;background:#fff !important;transition: all 0.5s ease;}
section#work-video .video_project-images 	{border:5px solid #fff;position:relative;transition: all 0.5s ease-in-out;/*background-size: 186%  !important;*/}
section#work-video .video_project img.gif 	{opacity:0; position:absolute; top:0px; z-index:9; display:none;}
section#work-video a.html5lightbox:hover .video_project-images { border-radius: 10%; /*border-bottom-right-radius: 50%;border-top-left-radius: 50%;*/transition: all 0.5s ease-in-out;}

/*section#work-video a.html5lightbox:hover .video_project img.webp, 
section#work-video a.html5lightbox:hover .video_project-images img.webp {opacity:0; position:relative; top:1; z-index:0}*/
/*section#work-video section#work-video a.html5lightbox:hover .video_project img.gif, 
section#work-video a.html5lightbox:hover .video_project-images img.gif	{opacity:1; }*/

section#work-video .video_details p span {margin-left: 9px;font-size: 13px;font-weight: 400 !important;line-height: 20px;}
section#work-video a.html5lightbox:hover .video_project:before {left: calc( 36% - 7vh );opacity: 1;transition: all 0.5s ease;}
section#work-video a.html5lightbox .video_project:before {content: "";position: absolute;top: calc( 61% - 7vh );left: 0;/* transform: translate(-50%,-50%); *//* margin: 0px auto; */z-index: 9999;width: 6vh;height: 6vh;background: rgba(0,0,0,0.8);opacity: 0;border-radius: 1.5vh;transition: all 0.5s ease;} 


section#work-video a.html5lightbox:hover .video_project:after {/* left: 49%; */opacity: 1;transition: all 300ms ease-in-out;} 
section#work-video a.html5lightbox .video_project:after {content: "";position: absolute;top: calc( 69% - 7vh );left: calc( 46% - 7vh );transform: translate(-50%,-50%);/* margin: 0px auto; */z-index: 99999;border-top: 1.1vh solid transparent;border-right: 1.1vh solid transparent;border-bottom: 1.1vh solid transparent;border-left: 1.8vh solid rgb(255, 255, 255);opacity: 0;transition: all 300ms ease-in-out;}




section#work-ui-web .slider_vid eo_caption h2 {font-family: 'Dancing Script', cursive;}
section#work-ui-web #nav_scrollspy li a, #nav_scrollspy li .container {/*display: none;*/visibility: hidden;opacity: 0;transition: visibility 0s 1s, opacity 1s linear;}
section#work-ui-web #nav_scrollspy li.active a, #nav_scrollspy li.active .container {/*display: block;*/visibility: visible;opacity: 1;transition: opacity 1s linear;}
section#work-ui-web a.ui_box_wrap {height: auto;width: 100%;overflow:hidden;/*position:relative;*/float:left;margin-bottom:100px;}
@media screen and (min-width: 1280px)
{
    section#work-ui-web a.ui_box_wrap {padding-bottom: 28%;margin-bottom: 0;}
}

section#work-ui-web a.ui_box_wrap .project_name{color:#333333;font-size: 14px;}
section#work-ui-web a:hover.ui_box_wrap:hover .project_name{color:#000000}
section#work-ui-web a.ui_box_wrap .overlay_weblinks i{font-size:40px;position:absolute;opacity:0;top:30%;left:45%;margin:0px auto;transition:all 0.5s ease-in-out;}
section#work-ui-web a:hover.ui_box_wrap:hover .overlay_weblinks i{font-size:40px;opacity:1;margin:0px auto;transition:all 0.5s ease-in-out;}
section#work-ui-web a.ui_box_wrap .overlay_weblinks{background:rgba(0,0,0,0.00);/*opacity:0;*/color:#ffffff;position:absolute;left: 18px;z-index: 9;top:0;width: 90%;height:100%;transition:all 0.5s ease-in-out;}
section#work-ui-web a:hover.ui_box_wrap:hover .overlay_weblinks{font-size:5vw;background:rgba(0,0,0,0.7);/*opacity:.6;*/transition:all 0.5s ease-in-out;}
section#work-ui-web a.ui_box_wrap .ui_box {background:#eee;}
section#work-ui-web a.ui_box_wrap .ipad_icon{background:url(../../../works/img/ui-work/ipad-icon.webp) no-repeat top center;background-size:100%;width: calc(100% - 30px);height:100%;position:absolute;z-index: 10;}
section#work-ui-web .ipad_project{width: 67.8%;height: 100%;margin: 13.7% 0% 3% 17%;}
section#work-ui-web a.ui_box_wrap .laptop_icon{background:url(../../../works/img/ui-work/laptop-icon.webp) no-repeat top center;background-size:100%;width: calc(100% - 30px);height:100%;position:absolute;z-index: 10;}
section#work-ui-web .laptop_project{width: 75%;height:100%;margin: 10.3% 0% 3% 12.6%;}
section#work-ui-web a.ui_box_wrap .computer_icon{background:url(../../../works/img/ui-work/computer-icon.webp) no-repeat top center;background-size:100%;width: calc(100% - 30px);height:100%;position:absolute;z-index: 10;}
section#work-ui-web .computer_project{width: 92%;height: 100%;margin: 4% 0% 0% 3.5%;}
section#work-ui-web .project_name {position: absolute;z-index: 12;left: 15%;bottom: 8%;}
div#html5lightbox-watermark {display: none !important;}