
.colwrap-byoc {
    display: block;
    width: 100%;
	height: 300px;
    float: left;
    padding: 10px;
    margin: 0;
	border: solid 0px #ccc;
}

.colwidth {padding: 0;}
.colwrap {padding: 10px 0;}
.litegray {background: #f5f5f5;}

.col50 {border: solid 0px gold;}

.col50b {
    display: block;
    width: 48%;
    float: left;
	padding: 15px;
    text-align: left;
}
.col50b img {width: 90%;}

.byoc-tag {font-size: 18px; line-height: 26px;}	

h1.byoc {font-size: 50px; line-height: 48px; margin: 10px 0 10px 0; color: #1a1a1a; font-weight: 900!important; width: 88%;}

 
.byoc-sub {
	font-size: 30px;
	line-height: 32px;
	margin: 0 0 20px 0;
	color: #1a1a1a;
	font-weight: 400;
	}
	
 
.two-col {
	display: block; 
	float: none; 
	width: 88%; 
	float: left;
	margin: 10px;
	padding: 14px;  
	border-radius: 10px;
	border:  solid 0px #ccc;
	box-shadow: 0 5px 12px rgb(44 62 80 / 10%);
	}

.two-col strong {display: block; color: #e69506; background: #f5f5f5; padding-left: 5px; margin-bottom: 1px; }

 .curve-wrap {display: block; width: 100%; height: 150px; margin: 10px 0 -10px 0; border: solid 0px red;}
  .curve-wrap svg {width: 100%; margin-top: -14px;}
 
.view-plans-gold {display: inline-block;  margin: 2px auto 2px 5px; margin-right: 12px; padding: 8px 18px; } 
a.view-plans-gold  {background: #e69506; border: solid 2px #e69506;  border-radius: 5px; text-decoration: none; color: #fff;  font-size: 18px; font-weight: 600;}
a.view-plans-gold:hover {background: #fff; border: solid 2px #e69506;  color: #e69506; border-radius: 10px; transform: scale(1.03);}


.view-plans-gold-rev {display: inline-block;  margin: 2px auto 2px auto; margin-right: 12px; padding: 8px 18px; }   
a.view-plans-gold-rev  {background: #fff; border: solid 1px #e69506;  border-radius: 5px; text-decoration: none; color: #e69506;  font-size: 18px; font-weight: 600;}
a.view-plans-gold-rev:hover {background: #e69506; border: solid 1px #e69506;  color: #fff; border-radius: 10px; transform: scale(1.03);}
 

a.teal {color: #59d6f2;}

.hiw-new-wrap {
	display: flex;
    flex-direction: row;
    flex: 1 1 auto; /* take up all available space */
	/* padding: 2px 3%; */
	padding: 10px;
	margin: 3px auto 10px auto;
    min-height: 0;  
	border: solid 0px gold;
}
.hiw-new-wrap img {
	width: 85px;
	margin: 3px auto 10px auto;
	text-align: center;
}

.hiw-new-cols {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 10px;
	min-height: 200px;
	width: 28%;
	background: #fff;
	text-align: left;
	float: left; 
	float: left; 
	font-size: 16px;
	line-height: 24px;
	padding: 30px 30px 10px 30px; 
	margin: 10px 16px 20px 0;
	border: solid 1px #e9e9e9; 
	border-radius: 7px; 	
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}
 
 /* h5.byoc2  {display: block; border-radius: 12px; width: 90%; background: #6aa6d2; color: #fff; font-weight: 600; font-size: 20px!important; padding: 10px; margin-bottom: 10px; line-height: 26px;text-align: left;} */
 
  h5.byoc2  {
	  display: block; 
	  width: 90%; 
	  color: #1a1a1a; 
	  font-weight: 600; 
	  font-size: 20px!important; 
	  padding: 10px 0 0 0; 
	  margin-bottom: 10px; 
	  line-height: 26px;
	  text-align: left;
	  border-top: solid 2px #6aa6d2; 
	  }
  

.byoc-page-wrap {
	display: block;
	padding: 10px;
	margin: 0; 
	border-radius: 8px;
	border: solid 2px #6aa6d2;
	}
 
	
.byoc-bloc-wrap {
		display: flex;
    flex-direction: row;
    flex: 1 1 auto; /* take up all available space */
	/* padding: 2px 3%; */
	padding: 1px;
	margin: 3px auto 10px auto;
    min-height: 0;  
	border: solid 0px #ccc;
	}
	
.byoc-bloc1  {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 10px;
	min-height: 128px;
	width: 33%;
	background-color: #ebab3b;
	color: #fff;
	text-align: left;
	float: left; 
	float: left; 
	font-size: 16px;
	line-height: 24px;
	padding: 30px 30px 10px 30px; 
	margin: 5px 16px 5px 0;
	border: solid 1px #e9e9e9; 
	border-radius: 7px; 	
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}

	
.byoc-border {
	display: block; 
	width: 48%; 
	float: left; 
	min-height: 440px; 
	margin: 0 10px 10px 0; 
	padding: 10px; 
	border: solid 1px #f5f5f5; 
	border-radius: 8px;
	box-shadow: 0 5px 10px rgb(44 62 80 / 10%); 
	}
	
.byoc-border2 {
	display: block; 
	width: 99%; 
	float: left; 
	min-height: 440px; 
	margin: 0 10px 25px 0; 
	padding: 10px 10px 10px 18px; 
	border: solid 1px #f5f5f5; 
	border-radius: 8px;
	box-shadow: 0 5px 10px rgb(44 62 80 / 10%); 
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	}
	
.byoc-border3 {
	display: block; 
	width: 99%; 
	float: left; 
	min-height: 100px; 
	margin: 0 10px 25px 0; 
	padding: 16px 16px 16px 18px; 
	border: solid 1px #f5f5f5; 
	border-radius: 8px;
	box-shadow: 0 5px 10px rgb(44 62 80 / 10%); 
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	}
	
	
.byoc-border2  h3 {color: #36567a;}


.pros {display: inline-block; width: 110px; padding: 3px 3px 3px 6px; margin: 0; background: #e69506; color: #fff; border-radius: 3px;}
.cons {display: inline-block; width: 110px;  padding: 3px 3px 3px 6px; margin: 0; background: #36567a; color: #fff; border-radius: 3px;}
.companies {display: inline-block; width: 200px;  padding: 3px 3px 3px 6px; margin: 0 12px 0 0; background: #e69506; color: #fff; border-radius: 3px;}

.shortcol {width: 90%; margin-top: 10px;}
 
/* Number sections */

.fact-full {display: block; margin: 0; padding: 5px 0; background: #e7f0fb;}

.fact-copy {display: block; width: 1180px; margin: -12px auto 0 auto; padding: 10px;}

.fact-content {display: block; width: 1050px; text-align: center; margin: 0 auto;}

.fact-wrapper {
	width: 980px;        
    display: flex;
    flex-direction: row;
    flex: 1 1 auto; /* take up all available space */
    margin: 1em 11%;
	margin: 1em auto;
    min-height: 0; /* fixes FF issue with minimum height */
	
	}
.fact-box {
	flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 20px;
  margin: 15px;
  min-height: 150px;
  background: #6aa6d2;
  background: #ebac3d;
	width: 30%;
	border-radius: 10px;
}
.fact-box2 {
	flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 20px 20px 20px;
  margin: 10px;
   font-weight: 600;
	background: #fff;
	width: 30%;
	border-radius: 10px;
}

 
.number-1 { 
	color: #fff;
	color: #1e3e61;
	font-size: 50px;
	line-height: 50px;
    text-align: center;
    margin: 15px auto 10px auto;
	padding: 0;
	font-weight: 600;

	}
	
.number-2 {   
	color: #fff;
	color: #1e3e61;
    font-size: 18px;
    text-align: center;
    margin: -12px 0 10px 0;
	padding: 0;

	}

.number-3 {
	color: #fff;
	color: #1e3e61;
	font-size: 16px;
	line-height: 20px;
  text-align: center;
  margin: -10px auto 0 auto; 
	}
.number-3b {
	color: #1e3e61;
	font-size: 16px;
	line-height: 20px;
  text-align: center;
  margin: 10px auto 0 auto; 
  border-top: solid 1px #fadfbc;
  padding: 10px 0 0 0;
	}
 


 .border-box  { /* basic faq */
    width: 90%;
    padding: 15px 15px 15px 30px;
	border: solid 1px #ccc;
    margin: 25px auto;
    font-style: normal;
    box-shadow: 0 5px 12px rgb(44 62 80 / 10%);
    border-radius: 8px;
}

.quote-wide {
	display: block; 
	width: 80%; 
	padding: 30px; 
	margin: 0 auto; 
	text-align: center;
	color: #777;
	font-style: italic;
	font-size: 18px;
	line-height: 32px;
	background: #fcf2e1; 
	border-radius: 12px; 
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 
	}
	
 
	
/* BYOC cards */


.byoc-wrap {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto; /* take up all available space */
    margin: 1em 11%;
	margin: 1em auto;
    min-height: 0; /* fixes FF issue with minimum height */
	}

.byoc-bloc-main {
	flex: 1 1 auto;
	overflow-y: auto;
	background: #fff;
	font-size: 14px;
	min-height: 140px;
	text-align: center;
	width: 19%; 
	float: left; 
	padding: 15px 30px 10px 30px; 
	padding: 10px;
	margin: 10px 16px 20px 0;
	border-radius:  8px; 
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	}
.byoc-bloc-main:first-child {margin: 10px 16px 20px 10px;}
.byoc-bloc-main img {width: 90%;}

.byoc-bloc {
	flex: 1 1 auto;
	overflow-y: auto;
	background: #fff;
	font-size: 14px;
	min-height: 140px;
	text-align: center;
	width: 23%; 
	float: left; 
	padding: 15px 30px 10px 30px; 
	padding: 10px;
	margin: 10px 16px 20px 0;
	border-radius:  8px; 
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	}
.byoc-bloc:first-child {margin: 10px 16px 20px 10px;}

 a:hover.byoc-bloc {
	flex: 1 1 auto;
	background: #fcf4e6;
	transform: scale(1.04); 
	box-shadow: 0 3px 12px rgb(0 0 0 / 0.2);

	}



/* featured blocks*/

.blog-int-wrap {
	display: block;
	padding: 0;
	margin: 0 auto;
	width: 1170px;
	}	
	
 
 
/* Mobile */
@media (max-width:768px) {
	

	h1.byoc {font-size: 36px; line-height: 34px; margin-top: 20px; margin-left: 0;}
	
	.colwrap {width: 100%; margin: 0;}
	.colwrap-byoc {
		display: block;
		width: 100%;
		height: auto;
	}
	.colwidth {width: 90%; margin: 0 auto;}
	
	.byoc-tag {
		width: 95%;
		font-size: 18px;
		line-height: 20pt;
		color: #555;
	}
	.byoc-sub {
		font-size: 22px;
		line-height: 26px;
		margin: 0 0 20px 0;
		color: #555;
		font-weight: 400;
		}
	
	.col50 {width: 90%; margin: 0 auto; padding: 15px; border: solid 0px #ccc;}
	.col50b{width: 90%; margin: 0 auto; border: solid 0px #ccc;}
	
	.col50b img {width: 100%; text-align: center;}
	
	a.view-plans-gold, a.view-plans-gold-rev  {font-size: 16px; width: 210px; text-align: center; margin: 4px;}
	
	.curve-wrap {display: none;}
	
	.fact-full {width: 100%; height: auto; padding: 10px;}
	.fact-copy {
		display: block;
		width: 98%;
		margin: 2px auto 0 auto;
		padding: 0;
	}
	
	.hiw-new-wrap {
		flex-direction: column;
		padding: 10px;
		margin: 3px auto 10px auto;
		min-height: 0;  
		width: 95%;
	}

	.hiw-new-cols {
		flex: 1 1 auto;
		overflow-y: auto;
		margin: 10px auto;
		min-height: 175px;
		width: 80%;
		font-size: 14px;
	}
	.byoc-border {
		display: block; 
		width: 99%; 
	}
 
	.fact-content {
		width: 95%; margin: 0 auto;
	}
	.fact-wrapper { flex-direction: column; width: 90%;}
	.fact-box {display: block; width: 85%!important; margin: 0 auto 10px auto;}
	

	.byoc-wrap {
		display: flex;
		display: block;
		float: left; 
		flex-direction: row;
		flex: 1 1 auto;
		margin: 1em auto;
		min-height: 0;  
	}
	.byoc-bloc-main {
		/* flex: 1 1 auto; */
		display: block;
		background: #fff;
		font-size: 14px;
		min-height: 100px;
		width: 45%; 
		float: left; 
		padding: 10px;
		margin: 10px 16px 20px 0;
	}
	.byoc-bloc-main:first-child {margin: 10px 16px 20px 0;}
	
	ol {padding-left: 10px;}
	
	ol li {margin-left: 10px; padding-left: 0;}

	
	.byoc-bloc {
		flex: 1 1 auto;
		overflow-y: auto;
		background: #fff;
		min-height: 75px;
		text-align: center;
		width: 95%; 
		float: left; 
		padding: 10px;
		margin: 10px 16px 20px 0;
	}
	.byoc-bloc:first-child {margin: 10px 16px 20px 0;}
	.border-box  { /* basic faq */
		width: 80%;
		padding: 15px 15px 15px 30px;
		border: solid 1px #ccc;
		margin: 25px auto;
	}	
	 

	
	 

  
 
}