/* page layout */


	.home-layout {
    display: flex;
		max-width:1000px;
		width:auto;
		margin:auto;
		padding:30px 20px 20px 20px;
		color:#5b5b5b;
		text-align:left;
	}

	.login-box {
		width: 250px;
		margin-right: 30px;
		border-right:1px dotted #acacac;
		padding:0px 30px;
		font-size:0.9em;
	}
	
	.main-content {
		flex: 1;
	}

	/* text */

	h1 {
		border-bottom:none;
	}

	/* features */

	.feature {
		display: flex;
		align-items: flex-start;
		gap: 15px;
		margin-bottom: 30px;
	}

	.feature-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: #ffffff;

		display: flex;
		align-items: center;
		justify-content: center;

		overflow: hidden;
	}

	.feature-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}
	.feature-text {
		flex: 1;
	}

	.feature-text h1 {
		font-size:1.4em;
		color:var(--grey);
		font-weight:bold;
		font-style:italic;
		margin:0px;
		padding:0px;
	}

	.callout {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 15px;
		font-size:18px;

		background: #fff;
		border-radius: 20px;


		width: 270px;
		max-width: none;

		left: 50%;
		transform: translateX(-50%);

		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		margin-top:10px;
		/* border-bottom: 1px solid var(--progreen); */
	}
	
	/* callout box */

	.callout::before {
		content: "";
		position: absolute;
		top: -15px;

		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid #fff;
	}
	
	.callout-desktop {
		display: flex;
	}
	
	.callout-desktop::before {
		right: 65px;
	}
	
	.callout-mobile {
		margin-top:-33px;
		margin-bottom:20px;
		display:none;
		left: 50% !important;
		transform: translateX(-50%);
	}
	
	.callout-mobile::before {
		left: 50% !important;
		right:auto;
		transform: translateX(-50%);
	}
	
	.callout-icon {
		width: 40px;
		height: 40px;
		background-color:var(--progreen);
		border-radius: 50%;
		color:#fff;
		border:4px solid rgb(225, 225, 225);

		display: flex;
		align-items: center;
		justify-content: center;

		font-weight: bold;
		font-size: 28px;
	}
	
	.callout-icon  img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}
	
	.callout-text {
		flex: 1;
	}

	/* buttons */

	.button-row {
			display: flex;
			gap: 10px;
	}
	
	.button-row a,
	.button-row input {
			flex: 1;
	}

	/* media queries */

@media (max-width: 1000px) {

	.login-box {
		width:200px;
	}

}

@media (max-width: 800px) {

  .page-layout {
    flex-direction: column;
    align-items: center;
 }

  .main-content {
    order: 1;
  }

  .login-box {
    order: 2;
		width:auto;
		border-right:none;
		margin-right:0px;
		margin-top:30px;
		padding-top:30px;
		border-top:1px dotted #acacac;
  }

	.callout-desktop {
		display:none;
	}

	.callout-mobile {
		display:flex;
	}

  .home-layout {
    flex-direction: column;
    align-items: center;
 }

}