body 			{margin: 0; padding: 0; background: #FFF; font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif; box-sizing: border-box;}
	div, ul, li, a 	{box-sizing: border-box;}

	.mt15			{margin-top: 15px; }
	.mt25			{margin-top: 25px; }
	.mt30			{margin-top: 30px; }
	.mt45			{margin-top: 45px; }	
	
	.mr30			{margin-right: 30px; }
	
	.d-vert			{flex-direction: column;}
	
	.cnt-center		{display: flex;  justify-content: center;}

      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }

      .modal[data-type] {
        display: block;
      }

      .modalDialog {
        margin: auto;
        padding: 0 0 20px 0;
        background: #e3e3e3;
		border-radius: 10px;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
/*		border-left: 3px solid #d23f07;
		border-right: 3px solid #d23f07;*/
		border-top: 3px solid #d23f07;
		border-bottom: 3px solid #d23f07;
      }
	  
	  .modalDialog h3	{margin: 0 0 20px 0; padding: 25px; background: #FFF; border-radius: 10px 10px 0 0; border-bottom: 1px solid #cecece;}

      .grantButtons,
      .rewardButtons {
        display: none;
      }

      .modal[data-type="grant"] .grantButtons,
      .modal[data-type="reward"] .rewardButtons {
        display: block;
      }

      .modal input[type="button"] {
        padding: 1.0rem 1.5rem;
        background: #fe5b1c;
        border: none;
        border-radius: 4px;
        margin: 4px;
        color: #FFF; font-weight: bold;
      }
	  
	  .modal input[type="button"]:hover {background: #d23f07; cursor: pointer;}
	  
	  input[type="button"].btn-no-reward {background: #868686}
	  input[type="button"].btn-no-reward:hover {background: #aaaaaa}

	.video-content	{margin-right: 30px;}

	.side-content .article-box	{width: 100%; margin: 0 0 25px 0; display: flex; flex-direction: column;}
	.side-content .article-box .article-title	{color: #cecece;}
	
	.video-box		{background: #FFF; padding: 15px; margin: 1%; border-radius: 3px; display: flex; flex-direction: column; width: 100%;}

	video:hover		{cursor: pointer;}
	#vidPlayer		{width: 800px; height: 450px;}
	#vidPlayer		{width: 100% !important; height: 100% !important;}
	
	@media screen and (max-width: 1300px) {
		.main-content	{width: 1000px;}
	}
	
	@media screen and (max-width: 1050px) {
		.main-content	{width: 900px;}
		.video-example .right-side		{display: none;}
		.video-content	{margin-right: 0;}
		.ad, .ad2		{width: 160px; height: 600px;}
	}
	
	@media screen and (max-width: 950px) {
		.main-content	{width: 700px;}
		#vidPlayer		{width: 600px; height: 338px;}
	}
	
	@media screen and (max-width: 768px) {
		.main-content	{width: 100%;}
		.left-side>.row {flex-direction: column;}
		.article-box  	{width: 96%; margin: 2%;}
		.video-box		{width: auto;}
	}
	
	@media screen and (max-width: 654px) {
		#vidPlayer		{width: 480px; height: 270px;}
	}
	
	@media screen and (max-width: 475px) {
		.header		{flex-direction: column; }
		.menu		{margin: 10px 0 0 0;}
		.header-text	{display: none;}
		
	}
	
	@media screen and (max-width: 400px) {
		#vidPlayer		{width: 330px; height: 186px;}
		.video-box		{margin: 0 .5%;}
	}
	
	@media screen and (max-width: 300px) {
		#vidPlayer		{width: 330px; height: 186px;}
		.video-box		{margin: 0 .5%;}
	}