.animate {
		  transition: all 0.1s;
		  -webkit-transition: all 0.1s;
		}

		.action-button {
		  position: relative;
		  padding: 5px 10px;
		  margin: 0px 10px 10px 0px;
		  float: center;
		  border-radius: 8px;
		  font-family: 'Rubik', sans-serif;
		  font-size: 20px;
		  color: #FFF;
		  text-decoration: none;
		}

		.blue {
		  background-color: #3498DB;
		  border-bottom: 5px solid #2980B9;
		  text-shadow: 0px -2px #2980B9;
		}

		.red {
		  background-color: #E74C3C;
		  border-bottom: 5px solid #BD3E31;
		  text-shadow: 0px -2px #BD3E31;
		}

		.green {
		  background-color: #82BF56;
		  border-bottom: 5px solid #669644;
		  text-shadow: 0px -2px #669644;
		}

		.yellow {
		  background-color: #F2CF66;
		  border-bottom: 5px solid #D1B358;
		  text-shadow: 0px -2px #D1B358;
		}

		.action-button:active {
		  transform: translate(0px, 5px);
		  -webkit-transform: translate(0px, 5px);
		  border-bottom: 1px solid;
		}

		h2 {

		  font-family: serifbold;

		  color: black;

		  text-align: center;
		}

		.blog {
		  display: block;
		  /* Change from flex to block */
		  clear: both;
		  /* Clear any floats before displaying */
		  margin-top: 20px;
		  /* Add margin-top to create space between the content above */
		}

		.blog2 {
		  max-width: 800px;
		  width: 100%;
		}

		.wrapper {
		  margin: auto;
		  max-width: 500px;
		  width: 98%;
		  box-shadow: 9px 9px 8px #8c8c8c,
		    -29px -29px 58px #ffffff;
		  border-radius: 10px;
		  overflow: hidden;

		}

		:root {
		  --plyr-color-main: #25d366;
		  --plyr-video-control-color: #e8ffba;
		}


		.padding-md {
		  padding: 20px;
		}

		.intro {
		  background-color: #f5f5f5;
		  padding: 20px;
		  border-radius: 5px;
		}



		.bg-main {
		  background-attachment: fixed;
		  background-image: url('https://images.unsplash.com/photo-1519882189396-71f93cb4714b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
		  background-position: center;
		  background-size: cover;
		}

		a {
		  text-decoration: none;
		}

		.flex-row {
		  display: flex;
		  flex-direction: row;
		}

		.flex-col {
		  display: flex;
		  flex-direction: column;
		}

		.center {
		  align-items: center;
		  justify-content: center;
		}


		.mt-2 {
		  margin-top: 2rem;
		}

		.wrapper {
		  margin: 0 auto;
		  max-width: 1200px;
		  width: 100%;
		}

		.padding-md {
		  padding: 1rem 1rem;
		}


		h2 {
		  font-size: 1.2rem;
		}

		.post p {
		  margin-bottom: 1rem;
		}

		.col {
		  padding: 0px
		}

		/* structure */


		.header {
		  border: 1px solid #4f3232;
		  background-color: rgba(244, 244, 249, 0.8);
		}

		main {
		  background-color: rgba(244, 244, 249, 0.8);
		  border: 1px solid #4f3232;
		  margin-top: 1rem;
		}

		.post img {
		  align-items: center;
		  width: 100%;
		  height: auto;

		}

		/* jwplayer Css Started From Here*/

		.jw-stats-item {
		  display: none;
		}

		body {
		  margin: 0px
		}

		.box-shadow {
		  width: 100%;
		  box-shadow: 9px 9px 8px #8c8c8c,
		    -29px -29px 58px #ffffff;
		  border-radius: 10px;
		  overflow: hidden;

		}

		.jwplayer.jw-flag-aspect-mode {
		  min-height: 30%;
		  max-height: 30%
		}

		#player p {
		  text-align: center;
		}

		.jw-icon-fullscreen path {
		  display: none;
		}

		.jw-icon-fullscreen svg {
		  background-image: url('/icon/full-screen.svg');
		  background-size: cover;
		  background-position: center;
		  margin-left: 5px;
		}

		.jw-icon-fullscreen.jw-off svg {
		  background-image: url('/icon/full-screen-exit.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-icon-pip path {
		  display: none;
		}

		.jw-icon-pip svg {
		  background-image: url('/icon/pip-on.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		  height: 25px;
		  width: 25px;
		  margin-top: 5px;
		  margin-left: 5px;
		}

		.jw-icon-pip.jw-off svg {
		  background-image: url('/icon/pip-off.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-rewind path {
		  display: none;
		}

		.jw-svg-icon-rewind {
		  background-image: url("icon.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-icon-rewind:hover .jw-svg-icon-rewind {
		  background-image: url("icon.svg");
		}


		.jw-state-paused .jw-svg-icon-play path {
		  display: none;
		}

		.jw-state-paused .jw-svg-icon-play {
		  background-image: url("/icon/play.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-state-paused .jw-icon-playback:hover .jw-svg-icon-play {
		  background-image: url("/icon/pause.svg");
		}

		.jw-svg-icon-pause path {
		  display: none;
		}

		.jw-svg-icon-pause {
		  background-image: url("/icon/pause.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-buffer path {
		  display: none;
		}

		.jw-svg-icon-buffer {
		  background-image: url("buffer.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-svg-icon-volume-100 path {
		  display: none;
		}

		.jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-volume-0 path {
		  display: none;
		}

		.jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-settings path {
		  display: none;
		}

		.jw-svg-icon-settings {

		  background-image: url("/icon/setting.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-left: 5px;


		}

		#player .jw-rightclick-link {
		  display: none;
		}


		.jw-stats-item {
		  display: none;
		}

		body {
		  margin: 0px
		}

		.box-shadow {
		  width: 100%;
		  box-shadow: 9px 9px 8px #8c8c8c,
		    -29px -29px 58px #ffffff;
		  border-radius: 10px;
		  overflow: hidden;

		}

		.jwplayer.jw-flag-aspect-mode {
		  min-height: 30%;
		  max-height: 30%
		}

		#player p {
		  text-align: center;
		}

		.jw-icon-fullscreen path {
		  display: none;
		}

		.jw-icon-fullscreen svg {
		  background-image: url('/icon/full-screen.svg');
		  background-size: cover;
		  background-position: center;
		  margin-left: 5px;
		}

		.jw-icon-fullscreen.jw-off svg {
		  background-image: url('/icon/full-screen-exit.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-icon-pip path {
		  display: none;
		}

		.jw-icon-pip svg {
		  background-image: url('/icon/pip-on.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		  height: 25px;
		  width: 25px;
		  margin-top: 5px;
		  margin-left: 5px;
		}

		.jw-icon-pip.jw-off svg {
		  background-image: url('/icon/pip-off.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-rewind path {
		  display: none;
		}

		.jw-svg-icon-rewind {
		  background-image: url("../icon.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-icon-rewind:hover .jw-svg-icon-rewind {
		  background-image: url("../icon.svg");
		}


		.jw-state-paused .jw-svg-icon-play path {
		  display: none;
		}

		.jw-state-paused .jw-svg-icon-play {
		  background-image: url("/icon/play.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-state-paused .jw-icon-playback:hover .jw-svg-icon-play {
		  background-image: url("/icon/pause.svg");
		}

		.jw-svg-icon-pause path {
		  display: none;
		}

		.jw-svg-icon-pause {
		  background-image: url("/icon/pause.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-buffer path {
		  display: none;
		}

		.jw-svg-icon-buffer {
		  background-image: url("buffer.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-svg-icon-volume-100 path {
		  display: none;
		}

		.jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-volume-0 path {
		  display: none;
		}

		.jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-settings path {
		  display: none;
		}

		.jw-svg-icon-settings {

		  background-image: url("/icon/setting.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-left: 5px;


		}

		#player .jw-rightclick-link {
		  display: none;
		}

		* {
		  box-sizing: border-box;
		}

		html {
		  height: 100%;
		}

		body {
		  min-height: 100%;
		}

		.jw-video.jw-reset {
		  margin: 0px;
		  
		}


.videoplayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 29.50vh; /* Full viewport height */
}

#player {
  width: 100%;
  height: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
}

		;


		a {
		  color: #000;
		  font-size: 18px;
		  text-decoration: none
		}


		p {
		  color: #000;
		}