@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
		html {
			margin: 0px;
			padding: 0px;
		}
		body {
			height: 100%;
			margin: 0px;
			/*overflow-x: hidden;*/
			font-family: 'Poppins';
			padding: 0px;
		}

		.box {
			display: flex;
			flex-flow: column;
			height: 100%;
		}

		.header-logo {
			width: 150px;
			height: 40px;
			background-image: url("/static/resources/images/tradepros-logo-light.png");
			background-size: contain;
			background-repeat: no-repeat;
			margin: auto;
		}

		.video-bar {
			background-color: #555;
			width: 100%;
			padding: 10px;
			color: white;
			text-align: center;
			font-size: 2rem;
			margin: auto;
			vertical-align: center;
			/*overflow: hidden;*/
		}

		.left-top-col {
			padding: 5rem;
		}
		
		.left-top-text {
			font-size: 3.5em;
			line-height: 1.2;
			margin: 16px auto;
		}

		.left-top-prg {
			margin: 16px auto;
			font-size: 1.7em;
			line-height: 1.3;
		}


		.how-it-works{
			background-color: #000;
			color: #fff;
			padding: 10px 10px 0px 10px;	
		}
		.how-it-works > h3 {
			font-weight: bold;
		}

		/*p {
			margin: 16px auto;
			font-size: 1.7em;
			line-height: 1.3;
		}*/

		.benefits {
			padding: 3rem 1.5rem;
		}

		.benefits > h3 {
			font-weight: bolder;
			padding-right: 4rem;
		}

		.benefit-prg {
			font-size: 2rem;
			padding-right: 7rem;
		}

		.how-it-works > p {
			font-size: 2rem;
		}

		.box .top-navbar {
			/*border: 2px solid green;*/
			flex: 0 1 auto;
		}

		.box .first-section {
			/*border: 3px solid red;*/
			flex: 1 1 auto;
			background-color: #FFFCF0;
		}

		.first-section {
			background-color: #FFFCF0;
		}

		/*.section-2 {
	    	height: 100%;
	    	background-color: black;
	    	color: white;
	    }*/
		.custom-card {
			height: 80vh;
			background-color: black;
			color: white;
			/*margin: 10px;*/
			padding: 20px;
			text-align: center;
		}

		.card-text {
			font-size: 2rem;
		}

		.worker-card {
			border-radius: 8px;
			display: inline-block;
			background-color: black;
			color: white;
			padding: 15px;
			margin: 6px 0px;
			height: 64rem;
			width: 100%;
		}

		.myBtn {
			color: #2a2b2a;
			background-color: #F8BD18;
			border-radius: 10px;
			padding: 10px 20px;
			font-size: 1.3em;
			 position: absolute;
			bottom: 3%; 
		}

		.client-tradepro-choice > a{
			color: #2a2b2a;
			font-size: 2rem;
			padding-right: 2rem;
			font-weight: bold;
		}

		.pricing-button {
			color: #2a2b2a;
			background-color: #F8BD18;
			border-radius: 10px;
			padding: 10px 20px;
			width: 20rem;
			font-size: 1.3em;
			margin: 8px auto;
			text-align: center;
		}

		.pricing-table {
			margin: 2px auto;
		}

		.worker-card>img {
			width: 100%;
			height: 27rem;
		}

		.solution-card {
			border-radius: 8px;
			display: inline-block;
			padding: 1.5rem;
			margin: 4px 0px;
		}

		.solution-card>img {
			width: 100%;
			height: 25rem;
		}

		.sect {
			padding: 40px;
			width: 100%;
		}

		.skills-section {
			padding: 40px;
			width: 100%;
		}

		.section-title {
			font-size: 4em;
			font-weight: bold;
			line-height: 1.2;
			/*width: 70%;*/
			padding-bottom: 20px;
		}

		.row {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			flex-wrap: wrap;
		}

		.row>[class*='col-'] {
			display: flex;
			flex-direction: column;
		}

		.icon {
			display: none;
			color: white;
			float: right;
		}

		.right-top-col{
			padding: 5rem 5rem 0rem 5rem; 
		}
		.right-top-col >h3 {
			font-weight: bold;

		}
		.right-top-col > p{
			font-size: 2rem;
			
		}

		.tradeskills {
			/*text-align: center;*/
		}

		.mobile-skill{
			background-color: #2a2b2a;
			color: white;
			padding: 1rem;
			border-radius: 8px; 
		}

		.mobile-tradeskills td{
			padding: 1rem;
			font-weight: bold;
			text-align: center;
			border-radius: 8px;
			margin: 3rem;
			width: 50%;
		}

		.tradeskills > li {
			display: inline-block;
			list-style-type: none;
			padding: 1rem;
			background-color: #2a2b2a;
			font-weight: bold;
			color: white;
			text-align: center;
			border-radius: 8px;
			margin: 1rem;
		}

		.tradeskills td{
			padding: 1rem;
			font-weight: bold;
			text-align: center;
			border-radius: 8px;
			margin: 3rem;
		}
		

		.skill {
			background-color: #2a2b2a;
			color: white;
			padding: 1rem;
			border-radius: 8px; 
		}
		.skill {
			background-color: #2a2b2a;
			color: white;
			padding: 1rem;
			border-radius: 8px; 
		}
		.skill > a, .mobile-skill > a{	
			color: white;
		}

		.skill:hover {
			background-color: #f8bd18;
			color: white;
			padding: 1rem;
			border-radius: 8px; 
		}

		.tradeskills > li:hover {
			display: inline-block;
			list-style-type: none;
			padding: 1rem;
			background-color: #2a2b2a;
			font-weight: bold;
			color: white;
			text-align: center;
			border-radius: 8px;
			margin: 1rem;
			opacity: 0.7;
			/*margin: 2rem;*/
		}

		.covered {
			border: 7px solid black;
			padding: 40px;
			vertical-align: middle;
			margin: auto;
			border-radius: 8px;
		}

		.covered-left > h1 {
			text-align: center;
			font-size: 6rem;
			font-weight: bolder;
			letter-spacing: 1rem;
		}
		.covered-left-clients > h1 {
			font-size: 6rem;
			font-weight: bolder;
			/*letter-spacing: 1rem;*/
		}
		.covered-left > p {
			font-size: 2rem;
			text-align: center;
			padding: 1rem;
			letter-spacing: 1px;
		}
		.covered-left-clients > p {
			font-size: 2rem;
			padding: 1rem;
			letter-spacing: 1px;
		}
		.covered-left {
			border-bottom: 3px solid #f8bd18;
		}
		.covered-left-clients {
			border-bottom: 3px solid #f8bd18;
		}

		/*.main-navbar {
			background-color: #FFFCF0;
		}*/

		.highlight {
			font-weight: bolder;
			text-decoration: underline;
		}

		.img-col {
			position: absolute;
			height: 130%; 
			width: 100%;
		}

		.mobile-skills-section {
			display: none;
		}

		.phone-extra-room{
			padding: 7vh auto; 
			text-align: center;
			width: 100%;
			background-color: white;
			color: black;
			margin-top: 5vh; 
			font-size: 3rem;
			font-weight: bolder;d
		}

		.modal {
			display: none;
			/* Hidden by default */
			position: fixed;
			/* Stay in place */
			z-index: 1;
			/* Sit on top */
			padding-top: 100px;
			/* Location of the box */
			left: 0;
			top: 0;
			width: 100%;
			/* Full width */
			height: 100%;
			/* Full height */
			overflow: auto;
			/* Enable scroll if needed */
			background-color: rgb(0, 0, 0);
			/* Fallback color */
			background-color: rgba(0, 0, 0, 0.4);
			/* Black w/ opacity */
		}

		/* Modal Content */
		.modal-content {
			text-align: center;
			/*background-color: #fefefe;*/
			margin: auto;
			width: 60%;
			color: transparent;
			background-color: transparent;
		}

		/* The Close Button */
		.close {
			/*color: #aaaaaa;*/
			color: #fff;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		#myBtn {
			color: #2a2b2a;
			padding: 20px 32px;
			font-size: 1.3em;
		}

		.close:hover,
		.close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		.app-badges {
			padding: 3vh auto; 
			text-align: center;
			width: 100%;
			background-color: white;
			color: black;
			margin-top: 5vh; 
			font-size: 3rem;
			font-weight: bolder;
		}

		.pricing-plan > img {
			width: 90%;
			height: 35rem;
		}

		.pricing-plan {
			border: 1px solid #e1f1ff;
		}

		.pricing-plan ul li {
			list-style-type: none;
			padding: 10px;
			border: 1px solid #e1f1ff;
		}
		.pricing-plan ul{
			list-style-type: none;
			padding: 0px;
		}

		.pricing-table {
			margin-top: 3rem;
			margin-bottom: 3rem;
			border-radius: 8px;
			-webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 0px 30px 14px rgba(0,0,0,0.425);
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}

		.pricing-price {
			font-weight: bold;
			font-size: 3rem;
			text-align: center;
		}

		.join-button {
			color: white;
			font-weight: bolder;
			background-color: #F8BD18;
			padding: 20px 32px;
			font-size: 2rem;
			border-radius: 32px;
			width: 20rem;
			border: none;
			margin: 2rem 1rem;
		}
		.join-button > a {
			color: white;
			
		}

		.join-button:hover{
			color: white;
			font-weight: bolder;
			background-color: #F8BD18;
			padding: 20px 32px;
			font-size: 2rem;
			border-radius: 32px;
			width: 20rem;
			border: none;
			margin: 2rem 1rem;
			opacity: 0.7;
		}

		.app-badges {
			padding: 8vh 8vw; 
			text-align: center;
			width: 100%;
			background-color: white;
			color: black;
			margin-top: 8vh; 
			font-size: 3rem;
			font-weight: bolder;
		}

		.app-badges > h4{
			font-size: 2rem;
			font-weight: bolder;
		}

		.pmo-pros {
			background-color: #F8BD18;
			border-radius: 10%;
			padding: 1px 2px;
			font-weight: 800;
		}
		.pmo-pros:visited{
			background-color: #F8BD18;
			border-radius: 10%;
			padding: 1px 2px;
			color: black;
			font-weight: 800;
		}

		.pros-navbar {
			background-color: black;
			color: white;
			border-radius: 0px;
			max-width: 100vw; 
			border: 0px;
		}
		.pmo-pros-link {
			color: white;
		}

		.main-section {
			height: 70vh;
			background: url("/static/resources/images/website/pmo-header.png") no-repeat center center fixed;
			/*background: url("/static/resources/images/website/Home Page/Top/keren-levand-wRZjRVnWPUA-unsplash.jpg") no-repeat center center fixed; */
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			background-color: black;
			position: relative;
		}

		.main-title {
			color: #fff;
			font-size: 5rem;
			font-weight: bold;
		}
		.main-description {
			color: #F8BD18;
			font-size: 3rem;

		}

		.pmo-second-section {
			max-width: 97vw;
			margin: 0px auto;
		}
		.main-row {
			max-width: 97vw;
		}

		.pmo-main-right {
			padding: 4rem;
			background-color: black;
			opacity: 0.9;
			border-radius: 20%;
			position:relative;
        	margin-top: 10rem;
        	/*margin-top: calc()*/
		}

		.pmo-second-title {
			text-align: center;
			font-size: 4rem;
			padding: 2rem;
			font-weight: bold;
		}

		.pmo-step-card {
			margin: 3rem 1rem;
			text-align: center;
			height: 40vh;
			border-radius: 1rem;
		}
		.pmo-step-card-title {
			font-size: 3rem;
			padding: 2rem 1rem;
		}
		.pmo-step-card-content {
			font-size: 2rem;
			padding: 2rem 1rem;
		}
		.pmo-card-1{
			background-color: black;
			color: white;
			padding-top: 3rem;
		}
		.pmo-card-2{
			background-color: #F8BD18;
			color: white;
			padding-top: 3rem;
		}
		.pmo-card-3{
			background-color: green;
			color: white;
		}
		.book-assessment-button {
			border-radius: 32px;
			border: 2px solid black;
			text-align: center;
			padding: 2rem;
			color: black;
			font-size: 2rem;
			font-weight: bold;
			margin: 0rem 2rem;
		}
		.pmo-third-section {
			border-top: 1rem solid #F8BD18;
			background-color: black;
			text-align: center;
			color: white;
		}
		.pmo-third-section-title {
			color: #F8BD18;
			padding: 2rem;
			font-weight: bold;
			font-size: 4rem;
		}
		.pmo-third-section-subtitle {
			padding: 2rem;
			font-weight: bold;
			font-size: 6rem;
		}
		.pmo-third-section-content {
			padding: 2rem;
			font-weight: bold;
			font-size: 2rem;
			width: 70%;
			margin: 0px auto;
		}
		.pmo-forth-section-subtitle {
			padding: 1rem;
			font-weight: bold;
			font-size: 5rem;
		}
		.pmo-forth-section-content {
			padding: 2rem;
			font-weight: bold;
			font-size: 2rem;
			width: 70%;
			margin: 0px auto;
		}

		.pmo-benefits-row {
			margin: 2rem auto; 
		}

		.pmo-benefits-card {
			text-align: center;
			font-weight: bold;
			font-size: 3rem;
			padding: 4rem 3rem 3rem 3rem;
			border: 2px solid white;
			height: 25vh;
			margin: 1rem auto;
		}

		.book-assessment-button-dark-bg{
			border-radius: 32px;
			border: 2px solid #F8BD18;
			text-align: center;
			padding: 2rem;
			color: white;
			background-color: #F8BD18;
			font-size: 2rem;
			font-weight: bold;
			margin: 0rem 2rem;
		}
		.book-assessment-button-dark-bg: active{
			border-radius: 32px;
			border: 2px solid #F8BD18;
			text-align: center;
			padding: 2rem;
			color: black;
			background-color: #F8BD18;
			font-size: 2rem;
			font-weight: bold;
			margin: 0rem 2rem;
		}

		.pmo-services {
			padding: 3rem;
		}
		.pmo-services-row {
			border: 5px solid black;
			border-radius: 8px;
			padding: 3rem;
		}

		.pmo-services-left {
			border-bottom: 4px solid #f8bd18;
		}

		.pmo-services-left > h1 {
			font-size: 6rem;
			font-weight: bolder;
		}
		.pmo-services-left > p {
			font-size: 2.5rem;
			padding: 1rem;
			letter-spacing: 1px;
		}
		.pmo-services-table {
			padding: 2rem;
		}
		.pmo-service-cell {
			padding: 1rem;
			border: 2px solid black;
			border-radius: 8px;
			margin: 1rem auto;
			text-align: center;
			width: 80%;
			font-weight: bold;
		}


	@media (max-width: 1024px) {
			.main-navbar {
				display: none;
			}
			
			.hamburger {
				background-color: black;
				max-width: 100vw;
				margin: 0px;
			}

			.icon {
				display: block;
				height: 100%;
				margin: 1rem 2rem;
				float: left;
				color: white;
				padding: 2px 10px;
				font-size: 2rem;
			}

			#right-top-image {
				display: none;
			}

			#left-top-col {
				background: url("/static/resources/images/website/Home Page/Top/keren-levand-wRZjRVnWPUA-unsplash.jpg") no-repeat center center fixed; 
			  	-webkit-background-size: cover;
			 	-moz-background-size: cover;
			  	-o-background-size: cover;
			  	background-size: cover;
			  	color: white;
			}

			.skills-section {
				display: none;
			}

			.img-col {
				position: relative;
				height: 100%;
				padding: 0px;
			}

			.mobile-skills-section {
				display: block;
				/*padding: 2rem;*/
				vertical-align: middle;
				margin: auto;
				border-radius: 8px;
			}

			.right-top-col{
				padding: 1rem 5rem;
			}

			.phone-extra-room{
				padding: 7vh auto; 
				text-align: center;
				width: 100%;
				background-color: white;
				color: black;
				margin-top: 5vh; 
				font-size: 3rem;
				font-weight: bolder;
				display: none;

			}

			.covered-left > h1 {
				text-align: center;
				font-size: 4.5rem;
				font-weight: bolder;
			}
			.covered-left-clients > h1 {
				font-size: 4.5rem;
				font-weight: bolder;
				/*letter-spacing: 1rem;*/
			}

			.client-tradepro-choice > a{
				color: white;
				font-size: 2rem;
				padding-right: 2rem;
				font-weight: bold;
			}

			.worker-card {

				border-radius: 8px;
				display: inline-block;
				background-color: black;
				color: white;
				padding: 15px;
				margin: 6px 0px;
				height: 67rem;
				width: 100%;
		
			}

			.worker-card>img {
				width: 100%;
				height: 24rem;
			}

			.left-top-text {
				font-size: 3em;
				line-height: 1.2;
				margin: 16px auto;
			}

			.left-top-prg {
				margin: 16px auto;
				font-size: 1.4em;
				line-height: 1.3;
			}
			.solution-card {
				border-radius: 8px;
				display: inline-block;
				padding: 1rem;
				margin: 4px 0px;
			}

			.pmo-main-right {
				/*padding: 4rem;
				background-color: black;
				opacity: 0.9;
				border-radius: 20%;
				position:relative;
	        	margin-top: 10rem;*/
	        	padding: 2rem;
	        	width: 80vw;
			}

			.main-title {
				color: #fff;
				font-size: 3rem;
				font-weight: bold;
			}
			.main-description {
				color: #F8BD18;
				font-size: 2rem;

			}
			.pmo-step-card-title {
				font-size: 3rem;
				padding: 0rem;
			}
			.pmo-step-card {
				margin: 2rem 1rem;
				text-align: center;
				height: auto;
				border-radius: 1rem;
			}
			.pmo-third-section-title {
				color: #F8BD18;
				padding: 1rem;
				font-weight: bold;
				font-size: 4rem;
			}
			.pmo-third-section {
				max-width: 100vw;
				margin: 0px auto;
			}
			.pmo-third-section-content {
				padding: 1rem 1rem 3rem 1rem;
				font-weight: bold;
				font-size: 2rem;
				width: 99%;
				margin: 0px auto;
			}

			.pmo-services-row {
				max-width: 97vw;
				padding: 1rem;
			}

			.pmo-services-left > h1 {
				font-size: 4rem;
				font-weight: bolder;
			}
			.pmo-services-left > p {
				font-size: 2rem;
				padding: 1rem;
				letter-spacing: 1px;
			}

			.steps-row {
				max-width: 97vw;
				margin: 0px auto;
			}
			.book-assessment-row {
				max-width: 97vw;
				margin: 0px auto;
				text-align: center;
			}
			.pmo-benefits-card {
				width: 80%;
				height: auto;
			}

			.main-section {
				height: 60vh;
				background: url("/static/resources/images/website/pmo-header.png") no-repeat center center fixed;
				/*background: url("/static/resources/images/website/Home Page/Top/keren-levand-wRZjRVnWPUA-unsplash.jpg") no-repeat center center fixed; */
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				background-color: black;
				position: relative;
			}
		
	}

	@media (max-width: 720px) {
		.main-section {
				height: 90vh;
				background: url("/static/resources/images/website/pmo-header.png") no-repeat center center fixed;
				/*background: url("/static/resources/images/website/Home Page/Top/keren-levand-wRZjRVnWPUA-unsplash.jpg") no-repeat center center fixed; */
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				background-color: black;
				position: relative;
			}

		.hamburger {
			background-color: black;
			max-width: 100vw;
		}

		.icon {
				display: block;
				height: 100%;
				margin: 1rem 2rem;
				float: left;
				color: white;
				padding: 2px 10px;
				font-size: 2rem;
			}

		.pmo-services {
			padding: 1rem;
			margin: auto;
		}

		.pmo-services-row {
			border: 5px solid black;
			border-radius: 8px;
			padding: 1rem;
			margin: 0px auto;
		}

		.pmo-services-left > h1 {
				font-size: 3rem;
				font-weight: bolder;
			}
		.pmo-services-left > p {
			font-size: 2rem;
			letter-spacing: 1px;
		}
		.services-table-col {
			padding: 0px;
			margin: 0px auto;
		}

		.pmo-service-cell {
			padding: 1rem;
			border: 2px solid black;
			border-radius: 8px;
			margin: 1rem;
			text-align: center;
			width: 80%;
			font-weight: bold;
		}

	}