{"version":3,"sources":["C:/Users/ZDM3025/Desktop/Careers/Latest_source_code/source/src/components/common/VideoOverlayComponent/C:/Users/ZDM3025/Desktop/Careers/Latest_source_code/source/src/components/common/VideoOverlayComponent/C:/Users/ZDM3025/Desktop/Careers/Latest_source_code/source/src/components/common/VideoOverlayComponent/VideoOverlayComponent.scss"],"names":[],"mappings":"AAEA,cACE,iBAAA,CACA,eAAA,CACA,mBAAqB,CAGvB,oBACE,UAAA,CACA,gBAAiB,CAInB,uBACE,iBAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAS,CAGX,cACE,iBAAA,CACA,SAAA,CACA,WAAA,CACA,UAAW,CAGb,kBACE,gBAAiB,CAGnB,aACE,iBAAA,CACA,SAAA,CAGA,MAAA,CACA,QAAA,CAIA,UAAA,CACA,aAAA,CACA,aAAc,CAIhB,gBACC,eAAA,CACA,gBAAiB,CAKlB,kBACC,OAAA,CACG,QAAA,CACA,sCAAA,CAAA,8BAAgC,CAGpC,wBACC,QAAA,CACA,OAAQ,CAGT,WACE,iBAAA,CACA,SAAA,CAEA,UAAA,CACA,WAAA,CAEA,WAAA,CAEA,2BAAA,CACA,yBAAA,CAEA,cAAA,CACA,SAAU,CAGZ,kCACE,SAAU,CAMZ,SAEE,WAAA,CACA,OAAA,CACA,cAAA,CACA,SAAA,CACA,MAAA,CACA,KAAA,CACA,qBAAA,CACA,+BAAA,CACA,iBAAA,CACA,sBAAA,CAAA,cAAiI,CAInI,iBACE,iBAAA,CACA,OAAA,CACA,SAAA,CACA,iBAAA,CAEA,UAAA,CACA,WAAY,CAId,WACE,WAAA,CACA,oBAAA,CACA,cAAA,CACA,aAAA,CACA,aAAA,CACA,sBAAA,CAAA,cAA2D,CAI7D,kCACE,aAAc,CAIhB,mBACE,iBAAA,CACA,QAAA,CACA,UAAA,CACA,cAAA,CACA,UAAW,CAGb,cACA,kBAAA,CACA,eAAA,CACA,+BAAA,CACA,4EAAA,CACA,WAAY,CAGZ,oBACC,UAAA,CACG,WAAA,CACA,gBAAiB,CAIrB,qCACE,WAAY,cAAe,CAC3B,mBACE,cAAA,CACA,QAAA,CACA,UAAW,CACZ","file":"2.ed0aba84.chunk.css","sourcesContent":["/* Wrapper that hosts the video and the overlay */\r\n@import '../../../assets/sass/global.scss';\r\n.video-player {\r\n  position: relative;\r\n  overflow: hidden;\r\n  border-radius: 0.5rem;\r\n}\r\n\r\n.video-player video {\r\n  width: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n/* Overlay fills the parent and sits on top of the video */\r\n.click-to-play-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n\r\n.poster-image {\r\n  position: absolute;\r\n  z-index: 1;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.poster-image img {\r\n  object-fit: cover;\r\n}\r\n\r\n.video-title {\r\n  position: absolute;\r\n  z-index: 2;\r\n\r\n\r\n  left: 0;\r\n  bottom: 0;\r\n\r\n\r\n  /*background-color: rgba(0,0,0,0.8);*/\r\n  color: #FFF;\r\n  padding: 0.2rem;\r\n  margin: 10px 0;\r\n  \r\n}\r\n\r\n.video-title h3 {\r\n\tfont-weight: bold;\r\n\tfont-size: 1.3rem;\r\n}\r\n\r\n\r\n\r\n.play-icon-center {\r\n\ttop: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n}\r\n\r\n.play-icon-bottom-right {\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n\r\n.play-icon {\r\n  position: absolute;\r\n  z-index: 2;\r\n\r\n  width: 70px;\r\n  height: 70px;\r\n  \r\n  margin: 10px;\r\n\r\n  background-repeat: no-repeat;\r\n  background-size: 100% 100%;\r\n\r\n  cursor: pointer;\r\n  opacity: 1;\r\n}\r\n\r\n.play-icon:hover, .play-icon:focus {\r\n  opacity: 2;\r\n}\r\n\r\n/**************************/\r\n\r\n/* The Overlay (background) */\r\n.overlay {\r\n  /* Height & width depends on how you want to reveal the overlay (see JS below) */    \r\n  height: 100%;\r\n  width: 0;\r\n  position: fixed; /* Stay in place */\r\n  z-index: 4; /* Sit on top */\r\n  left: 0;\r\n  top: 0;\r\n  background-color: rgb(0,0,0); /* Black fallback color */\r\n  background-color: rgba(0,0,0, 0.8); /* Black w/opacity */\r\n  overflow-x: hidden; /* Disable horizontal scroll */\r\n  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */\r\n}\r\n\r\n/* Position the content inside the overlay */\r\n.overlay-content {\r\n  position: relative;\r\n  top: 20%; /* 25% from the top */\r\n  width: 60%; /* 100% width */\r\n  text-align: center; /* Centered text/links */\r\n  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */\r\n  height: 80%;\r\n  margin: auto;\r\n}\r\n\r\n/* The navigation links inside the overlay */\r\n.overlay a {\r\n  padding: 8px;\r\n  text-decoration: none;\r\n  font-size: 36px;\r\n  color: #818181;\r\n  display: block; /* Display block instead of inline */\r\n  transition: 0.3s; /* Transition effects on hover (color) */\r\n}\r\n\r\n/* When you mouse over the navigation links, change their color */\r\n.overlay a:hover, .overlay a:focus {\r\n  color: #f1f1f1;\r\n}\r\n\r\n/* Position the close button (top right corner) */\r\n.overlay .closebtn {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 45px;\r\n  font-size: 30px;\r\n  color: #fff;\r\n}\r\n\r\n.videowrapper {\r\nborder-radius: 22px;\r\noverflow: hidden;\r\n-webkit-transform: translateZ(0);\r\nbox-shadow: 0 19px 51px 0 rgba(255,255,255,0.07), 0 14px 19px 0 rgba(255,255,255,0.0);\r\nmargin: auto;\r\n}\r\n\r\n.videowrapper video {\r\n\twidth: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */\r\n@media screen and (max-height: 450px) {\r\n  .overlay a {font-size: 20px}\r\n  .overlay .closebtn {\r\n    font-size: 40px;\r\n    top: 15px;\r\n    right: 35px;\r\n  }\r\n}\r\n"]}