@font-face {
  font-family: BrownStd;
  src: url(fonts/BrownStd-Regular.otf);
}
@font-face {
  font-family: Aleo;
  src: url(fonts/Aleo-Regular.otf);
}
*{
	padding: 0px;
	margin: 0px;
}

body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	color: #000;
	font-size: 13px;
	line-height: 22px;
	font-family: Verdana;
	overflow-x: hidden;
}

.mobile, .mobile-logo{
	display: none;
}
#header{
	max-width: 1280px;
	margin: 0px auto;
}
.topnav{
	display: flex;
	align-content: center;
	align-items: flex-start;
	justify-content: space-between;
	padding: 30px 25px 0px 25px;
}
#logo{
	width: 20%;
	height: auto;
	text-align: left;
	padding-right: 15%;
}
#logo img{
	width: 150px;
	height: auto;
	margin-top: -10px;

}
.spacer{
	padding-left: 20%;
}
#header .purple-btn{
	margin-top: -12px;
	margin-left: -10px;
}
.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.ytvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.call-out-casestudy{
	margin: 50px 0px 0px 0px;
	font-family: BrownStd;
}
.call-out-casestudy p{
font-size: 18px !important;
line-height: 32px;
}

.course-outline{
	text-align: left;
	font-weight: normal; 
	font-size: 12px;
	border-bottom: 1px solid #d8cfe7;
	padding: 7px 0px;
	margin-bottom: 7px;
}
.course-outline svg{
	padding: 0px 7px 0px 0px;
	margin-bottom: -2px;
}


.purple-btn{
	background-color: #4002b3; /*purple*/
	border-radius: 50px;
	text-decoration: none;
	padding: 12px 25px 12px 25px;
	color: #fff !important;
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #3902a7), var(--c1, #fb0404)) var(--x, 0)/ 200%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.purple-btn:hover{
	background-color: #FFC33F;
	--x: 100%;
	color: #fff !important;
}

.red-btn{
	background-color: #FFC33F; /*red*/
	border-radius: 50px;
	text-decoration: none;
	padding: 12px 25px 12px 25px;
	color: #fff !important;
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #fb0404), var(--c1, #3902a7)) var(--x, 0)/ 200%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	display: inline-block;
}
.red-btn:hover{
	background-color: #4002b3;
	--x: 100%;
}


.topnav a {
  color: #000;
  font-family: verdana;
  font-style: normal;
  text-decoration: none;
  font-size: 13px;
  text-align: center;
   transition-property: all;
  transition: ease-in-out;
  transition-duration: .5s;

}
.active{
  color: #4002b3; /*purple*/
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: right;
  overflow: hidden;
  z-index: 9998;
}

.dropdown .dropbtn {
  color: #000;
  font-style: normal;
  text-decoration: none;
  font-size: 13px;
  transition: ease-in-out;
  transition-duration: 0s;
  transition-duration: .5s;    
  border: none;
  outline: none;
  background-color: inherit;
  font-family: verdana;
  margin: 0;
}
.dropbtn{
	padding-bottom: 32px !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100%;
  left: 0px;
  right: 0px;
  box-shadow: 0px 4px 8px 0px rgba(57,2,167,0.1);
  z-index: 10;
  margin: 0px 0px 0px 0px;
  padding:7px 5px 7px 40%;
  border-top: 3px solid #e30404;
  box-sizing: border-box;
}

.edlumina-dd{
	  padding:7px 5px 7px 45%;
}
.compliance-dd{
	  padding:7px 5px 7px 45%;
}
.curriculum-dd{
	  padding:7px 5px 7px 45%;
}
.dropdown-content h3 a{
	color: #fff;
	font-family: BrownStd;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 18px;
	padding: 15px 0px 5px 10px;
}
.dropdown-content a {
  float: none;
  color: #ded0fa;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 12px;
  /*border-bottom: 1px solid #e30404;*/
}
.dropdown-content a:last-child{
	border-bottom: 0px solid #e30404 !important;
	
}
.topnav a:hover,  .dropbtn, .fa-caret-down {
  color: #4002b3 ;
}

.dropdown a:hover{

}

.purple-btn{
	background-color: #4002b3; /*purple*/
	border-radius: 50px;
	text-decoration: none;
	padding: 12px 25px 12px 25px;
	color: #fff !important;
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #3902a7), var(--c1, #fb0404)) var(--x, 0)/ 200%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.purple-btn:hover{
	background-color: #FFC33F;
	--x: 100%;
	color: #fff !important;
}
.dropdown-content a:hover {
  color: #fff!important;
}
.dropdown:hover .dropdown-content {
  display: block;
  }

.dropdown:hover .dropdown-content{
	animation-duration: .5s;
  animation-name: growDown;
  animation-fill-mode: forwards;
  background-color: rgba(64, 2, 179, .8);
 
}
.purple-headline{
	color: #4002b3;
	max-width: 1080px;
	margin: 0px auto 50px auto;
	width: 100%;
	font-family: BrownStd;
	font-weight: bold;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
}
/*-----------------------end navigation---*/
div.ar-examples{
	width: 33.3333% !important;
  color: #0e2336;
  background-color: #fff;
  margin: 0px 0px !important;
  box-sizing: border-box;
  padding: 0px !important;
  float: left;
}

#hero-wrapper{
	background-color: #f4e1f6;
	text-align: center;	
	width: 100%;
	display: flex;
	flex-direction: column;
	align-content: center;
}
#hero-wrapper svg{
	display: block;
	position: relative;
	z-index: 2;
	margin-bottom: -60px;
}
.home-page{
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1200px !important;
	align-items: center;
}
#home-hero-copy{
	width: 50%;
	align-items: center;
	text-align: left;
	box-sizing: border-box;
	padding: 0px 50px 0px 0px;
}
#home-hero-copy p{
	padding-bottom: 15px;
}
#home-hero-copy h2 {
  font-size: 32px !important;
  line-height: 45px !important;
   letter-spacing: 5px !important;
}
#home-hero-copy h1 {
  text-transform: none !important;
  font-size: 80px !important;
  line-height: 75px !important;
  letter-spacing: 0px !important;
}
.home-page img{
	width: 50%;
	margin: -130px 0px -150px 0px;
	position: relative;
	z-index: 4;
}
.edlumina-home{
	padding: 0px 25px 100px 25px !important;
	position: relative;
	z-index: 3;
}
.edlumina{
	background-image: url(images/edlumina-hero-bg.jpg);
	background-size: cover;
}
.comptia{
	background-image: url(https://cyanna.com/images/comptia-banners-bg.png);
	background-size: cover;
}
.cosmo{
	background-image: url(images/cosmo-hero-bg.jpg);
	background-size: cover;
}
.podcast{
	background-image: url(images/podcast-hero.jpg);
	background-size: cover;
}
.curriculum{
	background-image: url(images/curriculum-hero-bg.jpg);
	background-size: cover;
}

.acred{
	background-image: url(images/acred-hero-bg.jpg);
	background-size: cover;
}

.home{
	background-image: url(images/home-bg-2.jpg);
	background-size: cover;
}
#home-compliance-wrapper{
	background-image: url(images/edlumina-purple-bg.jpg);
	background-size: cover;
	padding-top: 75px !important;
	margin-top: -100px;
}

.professional{
	background-image: url(images/professional-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.about-hero{
	background-image: url(images/about-banners_v2.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.state-hero{
	background-image: url(images/state-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}

.immersive-hero{
	background-image: url(images/immersive-banners.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.security-hero{
	background-image: url(images/comptia-security.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.it-hero{
	background-image: url(images/comptia-it.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.network-hero{
	background-image: url(images/comptia-network.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.immersive-learn-hero{
	background-image: url(images/immersive-learn-banners.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.student-hero{
	background-image: url(images/admissions-banners.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.dlp-hero{
	background-image: url(images/DLP-banners.png) !important;
	background-size: cover;
	background-position: right top;
}
.admissions-hero{
	background-image: url(images/crm-banners.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.curriculum-hero{
	background-image: url(images/curriculum-banners.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.contact-hero{
	background-image: url(images/contact-banners_v2.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.start-a-school-hero{
	background-image: url(images/start-a-school-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.international-hero{
	background-image: url(images/international-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.cs-dj-hero{
	background-image: url(images/cs-dj-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.cs-ii-hero{
	background-image: url(images/II-case-study-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.cameo-hero{
	background-image: url(images/cameo-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.catalog-hero{
	background-image: url(images/catalog-banners.jpg) !important;
	background-size: cover;
	background-position: right top;
}
.accreditation-hero{
	background-image: url(images/accreditation-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.admissions-solutions-hero{
	background-image: url(images/admissions-solutions-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.resource-hero{
	background-image: url(images/resource-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article1-hero{
	background-image: url(images/article1-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article2-hero{
	background-image: url(images/article2-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article3-hero{
	background-image: url(images/article3-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article4-hero{
	background-image: url(images/article4-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article5-hero{
	background-image: url(images/article5-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article6-hero{
	background-image: url(images/article6-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.article7-hero{
	background-image: url(images/article7-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}
.webinar-hero{
	background-image: url(images/webinar-banners.jpg) !important;
	background-size: cover;
	background-position: center top;
}




#hero{
	max-width: 900px;
	margin: 100px auto 0px auto;
	box-sizing: border-box;
	padding: 0px 25px;
}
.interior-hero{
	max-width: 1280px;
	margin: 75px auto -25px auto;
	box-sizing: border-box;
	padding: 0px 25px;
	text-align: left;
	width: 100%;
}
.red-bg{
	background: linear-gradient(180deg, rgba(251,234,237,1) 20%, rgba(255,255,255,1) 100%);
}
.interior-hero h1, .interior-hero h2, .interior-hero p{
	max-width: 650px;
	width: 100%;
	float: left;
}
#hero h1, .interior-hero h1{
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	color: #fb0404;
	font-size: 19px;
	letter-spacing: 3px;
}
#hero h2{
	font-family: BrownStd;
	font-weight: bold;
	color: #4002b3;
	font-size: 62px;
	line-height: 70px;
	margin-bottom: 10px;
}
.interior-hero h2{
	font-family: BrownStd;
	font-weight: bold;
	color: #4002b3;
	font-size: 45px;
	line-height: 52px;
}

#hero p a, p a, .interior-hero p a, .half-column a{
	text-decoration: none;
	color: #fb0404;
	font-weight: bold;
	transition: all .5s ease-in-out;
}
#hero p a:hover, p a:hover, .interior-hero p a:hover, .half-column a:hover{
	color: #4002b3;
}

.interior-copy-box{
	/*background-color: #fff;
	border-radius: 20px;*/
	margin-top: -100px !important;
	z-index: 9999;
	position: relative;
	/*background: linear-gradient(180deg, rgba(251,234,237,1) 20%, rgba(255,255,255,1) 100%);*/
}

.knowledge-card{
	border-bottom: 1px solid #4002b3;
	padding: 0px 0px 50px 0px;
	margin-bottom: 35px;
	
}
.knowledge-card h3{
	font-size: 24px !important;
	line-height: 30px !important;
	color: #3e0ba9 !important;
}
#logos h4{
	color: #3e0ba9;
  font-family: BrownStd;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 3px;
  width: 100%;
  text-align: center;

}
.brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 25px 0px 75px 0px;
  max-width: 1280px;
  margin: 0px auto;
}

.brands__item {
  background: transparent;
  box-sizing: border-box;
  flex: 0 0 50%;
}

.brands__item img {
  display: block;
  /* Make sure max-width is added */
  max-width: 100%;
 width: 130px;
  height: 100px;
  object-fit: contain;
   mix-blend-mode: multiply;
}
.brands__item a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#home-headshots{
	width: 100%;
	text-align: center;
}
#home-headshots h4{
	font-family: BrownStd;
font-weight: bold;
text-transform: uppercase;
color: #3902a7;
font-size: 16px;
letter-spacing: 3px;
padding: 0px 0px 5px 0px;
display: inline-block;
line-height: 24px;
}
#home-headshots h3{
font-family: BrownStd;
font-weight: bold;
color: #fb0404;
font-size: 38px;
line-height: 40px;
}
#home-headshots div{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: row;
	padding: 25px 0px 75px 0px;
}
#home-headshots div img{
-webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;

  transition: .3s ease-in-out;
  width: 20%;
  height: auto;
}
.dlp-image-right{
	width: 60%; 
	float: right;
	margin-right: -50px;
}
.dlp-image-left{
	width: 50%; 
	float: left;
}
.dlp-image-full{
	width: 94%;
	margin: 2%;
	
}


@media (min-width: 700px) {
  .brands__item {
    flex: 0 0 25%;
  }
}

@media (min-width: 1100px) {
  .brands__item {
    flex: 0 0 20%;
  }
}



#copyright a:hover{
	color: #fb0404;
}
#copyright a{
	text-decoration: none;
	color: #4002b3;
	font-weight: bold;
	transition: all .5s ease-in-out;
}
.half-column{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0px auto;
	text-align: center;
	width: 60%;
}
.forty{
	width: 35% !important;
}
.forty #pd-copy{
	width: 100% !important;
	padding: 0px 0px 0px 0px !important;
}
.forty #pd-copy blockquote{
	text-align: center;
	padding: 50px 15px;
	display: block;
}
.forty #pd-copy blockquote span{
	font-weight: normal;
	font-family: Verdana;
	font-size: 13px;
	line-height: 22px;
}
.stats{
	width: 25%;
	align-self: center;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 20px;
}
.stats p{
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	 text-shadow: -1px 0 #3902a7, 0 1px #3902a7, 1px 0 #3902a7, 0 -1px #3902a7;
	 letter-spacing: 2px;
	 font-size: 60px;
}
.stats h4{
	color: #fb0404 !important;
}

#three-column, #four-column{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
	max-width: 1280px;
	margin: 0px auto;
	text-align: center;
	position: relative;
	z-index: 5;
}
#three-column h2, #four-column h2{
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	color: #fb0404;
	font-size: 19px;
	letter-spacing: 3px;
	padding: 0px 50px 15px 50px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
#three-column p{
	padding: 0px 50px 25px 50px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
#four-column p{
	padding: 0px 25px 25px 25px;
	width: 100%;
	max-width: 900px;
	margin: 0px auto;
	box-sizing: border-box;
	text-align: center;
}
#three-column div .red-btn, #bubble-cta a{
	margin: 0px auto;
}
#four-column .purple-btn{
	width: 50% !important;
	margin: 0px auto;
}

#three-column div{
	width: 31.3333%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 55px 5px;
	margin: 1%;
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3; 
	box-shadow: 0px 0px 7px -4px #3802B3;
	border-radius: 25px;
	background-color: #fff;
}
#edlumina-products{
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3; 
	box-shadow: 0px 0px 7px -4px #3802B3;
	border-radius: 25px;
	background-color: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	width: 99%;
	margin: 0px .5%;
	
}
#edlumina-products div{
	width: 23%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 55px 5px;
	margin: 1%;	
}
#three-column div h3, #edlumina-products div h3{
	font-family: BrownStd;
	font-weight: bold;
	color: #fb0404;
	font-size: 28px;
	line-height: 32px;
}
#edlumina-products div h4, #three-column div h4{
	font-family: BrownStd;
font-weight: bold;
text-transform: uppercase;
color: #3902a7;
font-size: 14px;
letter-spacing: 3px;
padding: 0px 0px 5px 0px;
display: inline-block;
line-height: 19px;
	
}
#three-column div p, #edlumina-products div p{
	font-size: 12px;
	line-height: 18px;
}
#three-column div img{
	width: 88px;
	height: 88px;
	margin: 0px auto 25px auto;
}
#edlumina-products div img{
	width: 50px;
	height: 55px;
	margin: 0px auto 15px auto;
}

#info-graphic-wrapper{
	background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 29%, rgba(251,234,237,1) 100%);
}
.immersive-bg{
	 background: rgb(255,255,255) !important;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,223,244,1) 100%) !important; 
background-image: url(images/immersive-bg@2x.jpg) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
background-position: top center !important;

}
.edlumina-bg{
	 background: rgb(255,255,255) !important;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,223,244,1) 100%) !important; 
background-image: url(images/edlumina-purple-bg.jpg) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
background-position: top center !important;

}
.immersive-bg #info-graphic{
	padding: 0px 25px 100px 25px !important;
}
#info-graphic, #about-graphic{
	max-width: 1280px;
	margin: 0px auto;
	display: flex;
	flex-direction: row;
	align-self: center;
	box-sizing: border-box;
	padding: 100px 25px;
}
.info-graphic{
	max-width:50%;
	height: auto;
	object-fit: contain;
	margin-left: -25px;
	  max-height: 750px;
}
#info-graphic div{
	width: 50%;
	display: flex;
	flex-direction: column;
	align-self: center;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 0px 25px 0px 50px;
}
#about-graphic div{
	width: 60%;
	display: flex;
	flex-direction: column;
	align-self: center;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 0px 25px;
}
.copy-image-full{
	max-width: 90%;
	width: 100%;
	display: block;
	margin: 15px auto;
}
#info-graphic div h2, #pd div h2, #about-graphic div h2{
	font-family: BrownStd;
	font-weight: bold;
	color: #fb0404;
	font-size: 38px;
	line-height: 40px;
}
#info-graphic div h2 span, #pd div h2 span, #about-graphic div h2 span{
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	color: #3902a7;
	font-size: 16px;
	letter-spacing: 3px;
	padding: 0px 0px 5px 0px;
display: inline-block;
line-height: 19px;
}
#info-graphic div p, #pd div p, #about-graphic div p{
	padding: 10px 0px 20px 0px;
}
.interior-body{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.support-pages{
	padding: 50px 25px 100px 25px !important;	
}
.body-image{
	max-width: 60%;
	height: auto;
	float: right;
	box-sizing: border-box;
	padding: 0px 15px 15px 30px;
}

.body-image-right{
	max-width: 45%;
	height: auto;
	float: right;
	box-sizing: border-box;
	padding: 0px 15px 15px 30px;
}
.body-image-left{
	max-width: 45%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding: 15px 30px 15px 15px;

	
}
.support-pages .half-column{
	flex-direction: column;
	width: 70%;
	display: inline-block;
	text-align: left;
	padding-right: 50px;
}
.support-pages .half-column h2{
	padding: 50px 0px 0px 0px;
	}
.support-pages .forty{
	width: 30%;
}
.support-pages .half{
	width: 46%;
}
.support-pages .forty #pd-copy img{
	width: 100%;
	margin: 0px auto;
	box-sizing: border-box;
	padding-top: 25px;
}
.red-gradient{
	padding-top: 25px;
	background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(251,234,237,1) 29%, rgba(255,255,255,1) 100%);
}
.red-gradient-reverse{	
	padding-top: 25px;
	background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 29%, rgba(251,234,237,1) 100%);
}
.purple-gradient{
	padding-top: 25px;
	background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(241,225,255,1) 29%, rgba(255,255,255,1) 100%);
}
.move-up{
	margin-top: -180px !important;
	background-color: none !important;
	position: relative;
	z-index: 99;
	background: linear-gradient(180deg, rgba(255,255,255,0) 29%, rgba(251,234,237,0) 100%) !important;
}

.move-up-two{
	margin-top: -100px !important;
	background-color: none !important;
	position: relative;
	z-index: 99;
	background: linear-gradient(180deg, rgba(255,255,255,0) 29%, rgba(251,234,237,0) 100%) !important;
}
#about-graphic .info-graphic{
	border-radius: 50%;
	margin: 20px 5%;
	object-fit: none !important;
	height: 400px;
	width: 400px;
}
#about-graphic blockquote, #pd blockquote{
	font-family: BrownStd;
font-weight: bold;
color: #3902a7;
font-size: 18px;
padding: 20px 0px 15px 0px;
display: inline-block;
line-height: 26px;
font-style: italic;
}
#about-graphic ul li, #info-graphic ul li, .support-pages ul li{
	margin: 0px 0px 10px 15px;
	
}
#about-graphic h3, #info-graphic h3, .support-pages h3{
	font-family: BrownStd;
font-weight: bold;
color: #fb0404;
font-size: 22px;
line-height: 28px;
padding: 10px 0px 0px 0px;
}
#pd h3{
	font-family: BrownStd;
font-weight: bold;
color: #000;
font-size: 18px;
line-height: 24px;
padding: 15px 0px 10px 0px;
}


#about-graphic ul li::marker, #info-graphic ul li::marker, .support-pages ul li::marker{
  	color: #3902a7;
  	font-size: 14px;
}

.about-card, .side-nav{
	width: 23%;
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	padding: 50px 25px;
	margin: 10px 1% 10px 1%;
	align-content: flex-start;
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3;
	box-shadow: 0px 0px 7px -4px #3802B3;
	border-radius: 25px;
	background-color: rgba(255,255,255, .3);
	box-sizing: border-box;
}
.side-nav{
	margin: 50px 1% 50px 1% !important;
}
.about-card a{
	padding: 10px;
	display: inline-block;
	color: #3e0ba9;
	text-decoration: none;
}
.about-card a:hover{
	color: #fb0404;
}
.side-nav{
	display: block;
	width: 100%;
	text-align: left;
	list-style: none;
	padding: 50px 50px;
}
.side-nav h4{
	color: #fb0404 !important;
}
.side-nav a{
	padding: 15px 0px 5px 0px;
	display: block;
	color: #3e0ba9;
	text-decoration: none;
	border-bottom: 1px solid #fb0404;
}
.side-nav a:hover{
	color: #fb0404;
}
.side-nav li {
  margin: 0px 0px 0px 0px !important;
}
.about-card h4{
	color: #fb0404 !important;
}
.about-card img{
	width: 200px;
	height: 200px;
	border-radius: 50%;
}
.center{
	text-align: center !important;
}
.center p{
	max-width: 76%;
	margin: 0px auto;
}
#timeline-wrapper{
		border: 1px solid #ece7f6;
		width: 100%;
		
}
#timeline{
	display: flex;
	flex-direction: row;
	max-width: 1280px;
	margin: 0px auto;
}
#timeline div{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	width: 25%;
	box-sizing: border-box;
	 background: rgb(255,255,255);
	 background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(234,228,245,.5) 100%); 
	 padding: 65px 0px;
	 clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%);
	 text-align: center;
}
#timeline div h4, #timeline div p{
	width: 100%;
	padding: 0px 50px 0px 25px;
	box-sizing: border-box;
}

#timeline div h4{
	color: #e30404;
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 3px;
}

#timeline div p{
	color: #c2c0c0;
	font-family: BrownStd;
	font-weight: bold;
	font-size: 35px;
	line-height: 40px;
	letter-spacing: 0px;
}
#pd{
	max-width: 1280px;
	margin: 0px auto;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	padding: 50px 25px 100px 25px;
}
#pd #pd-copy{
	width: 33.333%;
	box-sizing: border-box;
	padding: 0px 50px 0px 0px;
}

#pd .three-column{
	width: 66.6666% !important;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0px 25px;
}
#pd h4{
	color: #3e0ba9;
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 3px;
	width: 100%;
	text-align: center;
}
	
#pd .three-column a{
	width: 31.3333%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 55px;
	margin: 1%;
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3; 
	box-shadow: 0px 0px 7px -4px #3802B3;
	border-radius: 25px;
	text-align: center;
	font-family: BrownStd;
	font-size: 20px;
	text-decoration: none;
	color: #fb0404;	
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #fff), var(--c1, #eae4f5)) var(--x, 0)/ 350%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
	
#pd .three-column a:hover{
	--x: 100%;
}
#bubble-cta{
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 55px;
	margin: 1%;
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3; 
	box-shadow: 0px 0px 7px -4px #3802B3;
	border-radius: 25px;
	text-align: center;
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #fff), var(--c1, #eae4f5)) var(--x, 0)/ 350%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#bubble-cta h4{
font-family: BrownStd;
font-weight: bold;
color: #000;
font-size: 18px;
line-height: 24px;
text-transform: none;
letter-spacing: 0px;
padding: 0px 0px 15px 0px;
}

#bubble-cta img{
	border-radius: 50%;
	height: 150px;
	width: 150px;
	margin: 0px auto;
}	
#bubble-cta:hover{
	--x: 100%;
}


#pd #form-area-div{
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 55px;
	margin: -50px 1% 1% 1%;
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3; 
	box-shadow: 0px 0px 7px -4px #3802B3;
	border-radius: 25px;
	text-align: center;
	font-family: BrownStd;
	font-size: 20px;
	text-decoration: none;
	color: #fb0404;	
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #fff), var(--c1, #eae4f5)) var(--x, 0)/ 350%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
	
#pd #form-area-div:hover{
	--x: 100%;
}
.field{
	display: flex;
	flex-direction: row;
	align-items: center;
}
#form-area-div label{
	width: 100%;
	float: left;
	text-align: left;
	clear: left;
	color: #3902a7;
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 3px;
}
#form-area-div input, select, textarea{
	width: 100%;
	float: right;
	text-align: left;
	border: 0px;
	padding: 10px;
	margin: 10px; 0px;
	box-sizing: border-box;
	background-color: #fff;
}
#comptia-online-form{
	display: inline-block;
}
#comptia-online-form input{
	width: 46.5%;
	float: right;
	text-align: left;
	border: 0px;
	padding: 10px;
	margin: 10px; 0px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 5px;
}
#comptia-online-form .purple-btn{
	display: inline-block;
	text-align: center !important;
	width: 30% !important;
	margin: 15px auto !important;
	float: none !important;
	padding: 15px 10px !important;
	border-radius: 50px;
}
#leads-form-message, #form-area-div{
	padding: 25px 25px 0px 25px !important;
}
#comptia-online-form h3{
	font-family: BrownStd;
font-weight: bold;
font-size: 32px !important;
line-height: 30px !important;
color: #fff !important;
padding: 15px 0px 10px 0px;
}

.submit{
	display: inline-block !important;
	text-align: center !important;
	width: 50% !important;
	margin: 15px auto !important;
	float: none !important;
	padding: 15px 10px !important;
}
#crmWebToEntityForm{
	background-color: transparent!important;
}

.zcwf_title{
	display: none;
}


.sm-icons{
	padding: 12px 15px 12px 15px !important;
	margin: 0px 15px 0px 0px;
}

.review-icon, .licensing-icon, .implement-icon{
	background-position: center top;
	background-repeat: no-repeat;
	padding: 100px 0px 0px 0px;
}
.review-icon{
	background-image: url(images/icon-cur-review@2x.png);
}
.licensing-icon{
	background-image: url(images/icon-cur-licensing@2x.png);
}
.implement-icon{
	background-image: url(images/icon-implementation@2x.png);
}

#cta-wrapper{
	width: 100%;
	 background: rgb(233,4,4);
	 background: linear-gradient(0deg, rgba(233,4,4,1) 0%, rgba(196,3,3,1) 100%); 
}
#cta-wrapper div{
	max-width: 900px;
	margin: 0px auto;
	color: #fff;
	padding: 75px 25px;
	text-align: center;

}
#cta-wrapper div p{
	font-family: BrownStd;
	font-size: 24px;
	line-height: 30px;
	font-weight: bold;
	padding: 0px 0px 15px 0px;
}
#cta-wrapper div p span{
	font-family: BrownStd;
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	margin: 0px 0px 15px 0px;
}
#cta-wrapper div img{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	padding-bottom: 10px;
}
#inner-headshot{
 	justify-content: center;
 	text-align: center;
 	padding-bottom: 50px;
}
#inner-headshot h3{
	color: #3e0ba9;
	font-family: BrownStd;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 3px;
	width: 100%;
	text-align: center;
	padding: 0px 0px 0px 0px;
}
#inner-headshot img{
	width: 250px;
	height: 250px;
	border-radius: 50%;
	padding-bottom: 10px;
}
#footer-body{
	max-width: 1280px;
	margin: 0px auto;
	display: flex;
	flex-direction: row;
	padding: 55px 10px 75px 10px;
}
#footer-body h4{
	font-family: BrownStd;
	font-size: 18px;
	font-weight: bold;
	padding: 25px 0px 15px 0px;
}
#footer-body section{
	width: 60%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-self: flex-start;
}
#footer-body section div{
	width: 33.3333%;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	
}
.contact-more{
	width: 40% !important;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 0px 0px 0px 50px;
	align-self: flex-start;
}
.contact-more h4{
	width: 100%;
}
.contact-more a{
	/*padding: 10px;
	font-size: 20px;
	line-height: 5px;
	color: #fff;
	background-color: #3a02a8;
	border-radius: 50%;
	height: 16px;
	width: 16px;
	margin: 0px 15px 0px 0px;*/
padding: 10px;
font-size: 22px;
line-height: 20px;
color: #fff;
background-color: #3a02a8;
border-radius: 50%;
height: 25px;
width: 25px;
margin: 0px 15px 0px 0px;
text-align: center;
}
#copyright{
	text-align: center;
	box-sizing: border-box;
	padding: 25px;
	width: 100%;
	-webkit-box-shadow: 0px 0px 7px -4px #3802B3; 
	box-shadow: 0px 0px 7px -4px #3802B3;
}
.payments{
	display: flex;
	flex-direction: row;
	padding: 75px 50px 50px 50px;
	max-width: 1280px;
	margin: 0px auto;
}
.payment-half-column{
	width: 50%;
	box-sizing: border-box;
	text-align: left;
	padding: 0px 25px 0px 25px;
}
.payment-half-column h4{
	text-align: left !important;
}
.payment-half-column .brands .brands__item {
  flex: 0 0 33.3333%;
}


@keyframes growDown {

0%{
 	margin-top: -5px;
 	opacity: .5;
  }

  100% {
    margin-top: 0px;
    opacity: 1;
  }
}

@media screen and (max-width: 1100px) {
 
 .support-pages.half{
	width: 35%;
	padding: 50px 25px 50px 25px !important;
}
}


@media screen and (max-width: 900px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    border-radius: 3px;
  }
  .dropdown-content {
  margin: 0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  background-color: #3902a7;
  color: #fff;
}
.dropbtn{
	padding-bottom: 0px !important;
}
  .dropdown-content a{
	background: linear-gradient(120deg, var(--c1, #3902a7), var(--c1, #fb0404)) var(--x, 0)/ 200% !important;
  color: #fff;  
  }
  .dropdown-content a:hover{
	 background-color: #FFC33F;
	--x: 100%;
	  color: #fff;  
  }
.dropdown-content h3, .fa-caret-down{
	display: none !important;
	}
.purple-btn, {
	background-color: #4002b3; /*purple*/
	border-radius: 50px;
	padding: 7px 20px 7px 20px!important;
	margin-top: 0px;
	margin-left: 0px;
	color: #fff !important;
	transition: 0.5s;
	background: linear-gradient(120deg, var(--c1, #3902a7), var(--c1, #fb0404)) var(--x, 0)/ 200%;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}



.forty {
  width: 60% !important;
}
#pd h4 {
  font-size: 12px;
  line-height: 18px;
  }
.stats p {

  font-size: 50px;
  }
#hero {
  margin: 55px auto 0px auto;
  }
.home-page img {
  width: 50%;
  margin: -150px -40px -100px 0px;
  }
  #home-hero-copy {
  width: 60%;
  }
  #about-graphic {
  flex-direction: column;
  }
  #about-graphic div{
	  width: 100%;
	  text-align: center;
  }
  #about-graphic .info-graphic {
  height: 400px;
  width: 400px;
  margin: 0px auto;
  max-width: none;
  }
  #about-graphic div h2, #about-graphic div h3, #about-graphic div p{
	  width: 100%;
	  text-align: center;
  }
  .about-card{
  width: 31%;
  }
  .about-card img {
  width: 150px;
  height: 150px;
  }
  .move-up {
  margin-top: -80px !important;
  }
  .interior-hero {
  margin: 75px auto 15px auto;
  }
  #edlumina-products{
	  flex-wrap: wrap;  
  }
  #edlumina-products div {
  width: 48%;
  }
  #hero-wrapper{
  background-position: left top !important;
  }
  .support-pages .half-column {
  width: 90%;
  padding-right: 0px;
  }
 

}


@media screen and (max-width: 900px) {
  .topnav.responsive {
	  position: relative;
	  top: 0px;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: right;

}
.responsive-nav-icon{
	/*display: none !important;*/
	color: #fff;
	font-size: 16px;
	padding: 35px 17px;
	text-decoration: none;
	display: inline-block;
	transition:all 0.7s ease;
	position: absolute;
	right: 20px;
	top: 0px;
	z-index: 9999;
}
.responsive-nav-icon:hover{
	color: #d5b480;
}
#logo{
	display: none;
}
.mobile-logo{
	display: block;
	width: 100%;
	text-align: left;
}
.mobile-logo img{
	width: 150px;
	height: auto;
	padding: 25px;
	}
}

@media (max-width:900px) {	
	
#myTopnav{
	display: none;
}
.responsive{
	display: block !important;
	position: absolute;
	top:52px;
	width: 100% !important;
	padding: 0px 0px;
	background-color: #fff;
	min-height: 100vh;
	z-index: 9998;
}
.interior .responsive, .interior .responsive a{
	background-color: #fff !important;
}
.responsive a{
	width: 100%;
	display: block;
	text-align: center;
	padding: 30px 0px !important;
	background-color: #fff;
	font-size: 20px !important;

}

.responsive-nav-icon{
	display: inline-block !important;
	z-index: 9999;
}
/* ------------------------------------------------------- Start Hamburger animation */
.animated-icon{
width: 25px;
height: 12px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon span{
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon span {
	background: #3902a7;
}

.animated-icon span:nth-child(1) {
top: 0px;
}

.animated-icon span:nth-child(2) {
top: 10px;
}

.animated-icon span:nth-child(3) {
top: 20px;
}

.animated-icon.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
background-color: #e30404;
}

.animated-icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
background-color: #e30404;
}
#header .purple-btn {
  margin-top: 0px;
  margin-left: 0px;
}
/* ------------------------------------------------------- End Hamburger animation */

}
@media screen and (max-width: 875px) {
#three-column p {
  padding: 0px 15px 25px 15px;
  }
  #timeline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  }
  #timeline div {
  width: 25%;
  padding: 25px 0px;
  }
  #timeline div p {
  font-size: 20px;
  line-height: 24px;
  }
  #timeline div h4{
  font-size: 11px;
  line-height: 14px;
}
.immersive-bg #info-graphic div{
	padding: 25px 25px;
}
.immersive-bg #info-graphic {
  padding: 0px 25px 20px 25px !important;
}
#pd{
	flex-wrap: wrap;
}
#pd #pd-copy {
  width: 100%;
  text-align: center;
  padding: 50px 0px 50px 0px;
  }
  #pd .three-column {
  width: 100% !important;
  }


  #footer-body section div{
	  width: 100%;
	  text-align: center;
  }
  .contact-more{
	  text-align: center;
  }
  .contact-more a{
  display: inline;
  margin: 0px auto;
  }
  .forty {
  width: 98% !important;
}
.half-column {
  width: 90%;
  }
  .interior-copy-box {
  margin-top: -50px !important;
  }
  #hero-wrapper svg {

  margin-bottom: -40px;
  }
  
  #comptia-online-form input{
	width: 95%;
}
#comptia-online-form .purple-btn{
	width: 60% !important;
	
}

  
}
@media screen and (max-width: 825px) {
 #timeline div {
  padding: 25px 0px;
  }
   #timeline div p {
  font-size: 16px;
  line-height: 20px;
  }
  #timeline div h4{
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0px;
}
#home-hero-copy h1 {
  font-size: 60px !important;
  line-height: 57px !important;
  }
  .info-graphic {
  max-width: 40%;
  }
#info-graphic div {
  width: 60%;
  }
  #info-graphic div h2 span, #pd div h2 span {
  font-size: 14px;
  }
  #three-column div h3 {
  font-size: 20px;
  line-height: 24px;
  }

}

@media screen and (max-width: 700px) {
#three-column{
	padding: 25px;
}
#three-column div{
padding: 25px 15px;
}
#info-graphic{
	flex-direction: column;
	padding: 50px 25px;
	text-align: center;
}
#info-graphic ul{
	text-align: left;
}
.immersive-bg #info-graphic div {
  padding: 50px 25px;
}
#three-column div, #info-graphic div, .info-graphic{
  width: 100%;
  }
  .info-graphic{
	  margin: 0px auto 25px auto;
  }
  #info-graphic div h2, .purple-btn{
	  margin: 0px auto;
  }
	#timeline{
		flex-wrap: wrap;
	}
	#timeline div{
		width: 100%;
		padding: 15px 0px;
		clip-path: none;
		border-bottom: 1px solid #3902a7;
	}
	   #timeline div p {
  font-size: 36px;
  line-height: 38px;
  }
  #timeline div h4{
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 2.5px;
}
#pd{
	padding: 50px 0px;
}
#pd .three-column a{
	padding: 20px;
	font-size: 15px;
}
#pd #pd-copy {
  width: 100%;
  text-align: center;
  padding: 0px 25px 50px 25px;
}
#footer-body {
  max-width: 1280px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 50px 0px;
}
#footer-body section {
  width: 100% !important;
  flex-direction: column;
  }
  .contact-more {
flex-direction: row !important;
  padding: 0px 0px 0px 0px;
}
.home-page {
  flex-direction: column;
  }
#home-hero-copy {
  width: 100%;
  text-align: center;
  padding: 0px 0px 0px 0px;
  order: 1;
}
.home-page img {
  width: 65%;
  margin: -100px 0px 0px 0px;
  order: 2;
  display: none;
}
.info-graphic {
  max-width: 80%;

}
#three-column div h3 {
  font-size: 30px;
  line-height: 34px;
}

.contact-more {
  padding: 0px 0px 0px 0px;
  max-width: 60%;
  margin: 0px auto;
}
#info-graphic div {

  padding: 0px 25px 0px 25px;
  }
  #info-graphic h3{
	  width: 100%;
	  text-align: center;
  }
  .body-image-right, .body-image-left, .body-image{
	max-width: 100%;
	height: auto;
	float: none;
	margin: 0px auto;
	box-sizing: border-box;
	padding: 15px 15px 15px 15px;
}

   div.ar-examples {
  width: 100% !important;
  }
  
  #home-headshots div{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#home-headshots div img{
-webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width: 33.3333%;
  height: auto;
}

 .support-pages.half{
	width: 100%;
}
.techcred-logos{
	flex-direction: column !important;
	text-align: center;
}
.techcred-logos img{
	width: 75% !important;	
	margin: 0px auto !important;
}
.dlp-image-right, .dlp-image-left{
	width: 100%; 
	margin-right: 0px;
}


}
@media screen and (max-width: 620px) {
#hero-wrapper svg {
  margin-bottom: -25px;
}
#home-hero-copy h1 {
  font-size: 55px !important;
}
.info-graphic {
  margin: 10px auto 10px auto;
  width: 100%;
  max-width: 100%;
}
.edlumina-home {
  padding: 0px 25px 50px 25px !important;
  }
  .stats {
  width: 50%;
  }
 .about-card{
  width: 48%;
  }
  .side-nav {
  padding: 50px 20px;
  }
  .payments{
	flex-direction: column;
}
  .payment-half-column{
	width: 100%;
}

.payment-half-column .brands .brands__item {
  flex: 0 0 50%;
}


}

@media screen and (max-width: 500px) {
  #about-graphic .info-graphic {
  height: 300px;
  width: 300px;
  }
  .about-card{
  width: 98%;
  }
  #edlumina-products div {
  width: 98%;

  }
   .interior-copy-box {
  margin-top: -25px !important;
  }
  #hero-wrapper svg {

  margin-bottom: -20px;
  }
  #pd #form-area-div {
  padding: 15px;
  }
  #form-area-div label {
  width: 100%;
  }
  #form-area-div input, select, textarea {
  width: 100%;
  margin: 10px 0px;
  }
  .field{
	 flex-wrap: wrap;
	 flex-direction: column;
	 margin: 25px 0px;
  }
  #hero h2 {
  font-size: 42px;
  line-height: 45px;
  }

 }