
.bkg-red { background-color: #B03060!important; }
.bkg-orange { background-color: #FE9A76!important;}
.bkg-yellow { background-color: #FFD700!important;}
.bkg-olive { background-color: #32CD32!important;}
.bkg-green { background-color: #016936!important;}
.bkg-teal { background-color: #008080!important;}
.bkg-blue { background-color: #0E6EB8!important;}
.bkg-violet { background-color:  #EE82EE!important;}
.bkg-purple { background-color:  #B413EC!important;}
.bkg-pink { background-color:  #FF1493!important;}
.bkg-brown { background-color:  #A52A2A!important;}
.bkg-grey { background-color:  #A0A0A0!important;}
.bkg-lt-grey { background-color:  #eeeeee!important;}
.bkg-dk-gray { background-color: #333333!important;}
.bkg-black { background-color: #000000!important;}

.txt-red { color: #B03060!important; }
.txt-orange { color: #FE9A76!important;}
.txt-yellow { color: #FFD700!important;}
.txt-olive { color: #32CD32!important;}
.txt-green { color: #016936!important;}
.txt-teal { color: #008080!important;}
.txt-blue { color: #0E6EB8!important;}
.txt-violet { color:  #EE82EE!important;}
.txt-purple { color:  #B413EC!important;}
.txt-pink { color:  #FF1493!important;}
.txt-brown { color:  #A52A2A!important;}
.txt-grey { color:  #A0A0A0!important;}
.txt-grey { color:  #A0A0A0!important;}
.txt-black { color: #000000!important;}


.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

/* MENUS */
.hidden.menu {
	display: none;
}

/* FOOTER */
.footer.segment {
	padding: 5em 0em;
}
.footer .footer-logo{
	padding: 2em 0 1em 2em;
}
.footer .footer-text{
	padding-left:2em;
}
@media only screen and (max-width: 700px) {
 	.footer .ui.stackable.grid>.row>.three.wide.column, 
	.footer .ui.stackable.grid>.wide.three.column{
		width:50%!important;
	}
	.footer .column .ui.header,
	.footer .column .ui.link.list{
		padding-left:2em;
	}
}

/* FOLLOWING NAVIGATION (SCROLL) */
.secondary.pointing.menu .toc.item {
	display: none;
}
@media only screen and (max-width: 700px) {
	.secondary.pointing.menu .item,
	.secondary.pointing.menu .menu {
		display: none;
	}
	.secondary.pointing.menu .toc.item {
		display: block;
	}
}


/* PRIMARY NAV */
.navigation .bkg-menu{
	width:100%;	
}
.navigation .logo{
	padding-top:10px;
}
.navigation .logo img{
	height:39px;
	width:auto;
}
.navigation .ui.menu .item{
	text-transform: uppercase;
}
.navigation .ui.menu .ui.button{
	margin-left: 0.5em;
}
.navigation .ui.secondary.inverted.pointing.menu{
	border-width:0;
}
@media only screen and (max-width: 700px) {
	.navigation .logo{
		display:none;
	}
}

/* MOBILE MENU */
.sidebar .logo {
	padding: 10px;
}

/* MASTHEAD */
.masthead.segment{
	background-color:#000;
	padding: 0;
	margin:0;
}
.masthead .bkg-image{ }
.masthead .bkg-overlay{
	width:100%;
}
.masthead .bkg-overlay .ui.text.container{

}
.masthead .bkg-overlay h1.ui.header{
	padding-top:50px;
	margin-bottom: 0em;
	font-size: 4em;
	font-weight: normal;
}
.masthead .bkg-overlay h2{
	font-size: 1.7em;
	padding:0 20px 20px 20px;
}
.masthead .bkg-overlay .ui.primary.button{
	margin-bottom: 50px;
}
.masthead .screen img {
	display:block;
}

@media only screen and (max-width: 700px) {
	.masthead.segment {
		min-height: 350px;
	}
	.masthead .bkg-overlay{
		/*padding-top: 1.5em;*/
	}
	.masthead .bkg-overlay h1.ui.header {
		font-size: 2em;
	}
	.masthead .bkg-overlay h2 {
		margin-top: 0.5em;
		font-size: 1.5em;
	}
	.masthead .screen img {
		max-width: 100%;
	}
}
.about .masthead .bkg-image {
	background-image: url('../img/about-dynamic-path.jpg');
	height: 500px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
}
.about .masthead .bkg-overlay {
	width: 100%;
	padding-top: 4em;
}
.about .masthead .bkg-overlay .ui.text.container {
	background-color: black;
	opacity: .75;
	/* padding-top: 3em; */
}


/* CONTENT FEATURES */
.features.ui.vertical.stripe {
	
	padding-bottom: 8em;
}
.features.ui.vertical.stripe h3 {
	font-size: 2em;
}
.features.ui.vertical.stripe .button + h3,
.features.ui.vertical.stripe p + h3 {
	margin-top: 3em;
}
.features.ui.vertical.stripe .floated.image {
	clear: both;
}
.features.ui.vertical.stripe p {
	font-size: 1.33em;
}
.features.ui.vertical.stripe .horizontal.divider {
	margin: 3em 0em;
}

@media only screen and (max-width: 700px) {
	.features.ui.vertical.stripe {
		padding: 0 2em;
	}
}

/* CONTENT COLS*/
.content-cols.ui.vertical.stripe {
	padding: 8em 0em;
}
@media only screen and (max-width: 700px) {
	.content-cols.ui.vertical.stripe {
		padding: 2em 2em;
	}
}

/* PAGE HEADER */
.page-header.ui.vertical.segment{
	padding-top: 3em;
	margin-bottom: 1em;
}


/* CUSTOMER LOGOS */
.customer-logos.ui.placeholder.segment{
	text-align: center;
	background-color: #fff;
	margin:0;
}
.customer-logos img{
	margin: 0 auto;
}
.customer-logos .ui.header{
	margin:0;
}

.features-overall.ui {
	padding: 4em 0;
}
.features-list.ui {
	padding: 2em 0;
	background-color: #eee;
}
.features-list .ui.header:first-child{
	margin-top: 1em;
}
.feature-cols.ui.segment {
	padding: 4em 0;
}
.feature-cols img{
	margin: 0 auto;
}

/*  PRICING PAGE */
.pricing-cards.ui.grid{
	padding: 4em 0;	
}
.pricing-discount.ui{
	border: 0;
	margin-bottom: 3em;

}
/* LOGIN PAGE */
.full-screen-container {
	display: flex;
	position: relative;
	width: 100%;
	min-width: 16rem;
	height: 30rem;
	min-height: 100vh;
}
.signin {
	position: relative;
}
.signin .logo-panel {
	flex: 1 1;
	display: flex;
	justify-content: flex-end;
}
.signin .logo-panel-container {
	flex: 0 1 35.6rem;
	margin: 0;
}
.signin .logo{
	margin-top: 3em;
}
.flex-container {
	margin: 0 auto;
	max-width: 61.2rem;
	width: 100%;
}
.signin .login-panel {
	flex: 1 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.signin .login-panel-container {
	display: flex;
	justify-content: center;
	width: 35.6rem;
	margin: 0;
}
.signin .login-panel-content {
	width: 28.75rem;
	padding: 0 1.5rem;
}
.flex-form-container {
	position: relative;
	padding: 6rem 0;
}

.contact .form.ui
{
	
}
/* FORMS */
	.ui.form select.error,
	.ui.form input.error
	{
		border:1px solid #d43f3a;
	}

.register .form-container {
    margin: 3em 0em;
	padding: 0 50px;
}
.register .form
{
	margin-bottom:20px;
}
.register .contact-container {
	padding: 20px 50px;
}


/* CONTACT */

.contact .acf-map-container .column { }
.contact .acf-map-container .column .acf-map { display:none;}
.contact .acf-map-container .column .acf-form-container { background-color: #eee; }
.contact .acf-map-container .column .acf-form-container .acf-form  {
	padding: 20px;
}
.contact .acf-form .form {
	margin-top:2em;
}
.contact .ui.form label {
	min-width:80px;
	width:20%;
}
.contact .ui.form input[type=text],
.contact .ui.form textarea {
	width:60%;
}
.contact .ui.form input[type=submit]
{
	margin-left:95px;
}
.contact .form-results 
{
	min-height: 100px;
	margin-top:1em;
}
@media only screen and (min-width: 768px) {
	.contact .acf-map-container .column .acf-map { display:block; min-height:900px;}
	.contact .acf-map-container .column .acf-form-container{ width: 400px; position:absolute; top:0; right:0; height:100%;}
}
@media only screen and (min-width: 1024px) 
{
	.contact .acf-map-container .column .acf-form-container{ width: 500px;}
}


/* PRICING */

@media only screen and (max-width: 1200px) 
{
	.pricing .ui.large.statistic>.value, .ui.large.statistics .statistic>.value {
		font-size: 3rem!important;
	}
	.pricing .ui.card>.content>a.header, .ui.cards>.card>.content>a.header
	{
		font-size: 1em;
	}
}

@media only screen and (max-width: 900px) 
{
	.pricing-cards.ui[class*="four column"].grid>.column:not(.row), .ui[class*="four column"].grid>.row>.column
	{
		width:50%;
	}
}
@media only screen and (max-width: 600px) 
{
	.pricing-cards.ui[class*="four column"].grid>.column:not(.row), .ui[class*="four column"].grid>.row>.column
	{
		width:100%;
	}
	.ui.cards>.card{
		min-width:350px;
	}
}
@media only screen and (max-width: 425px) {
	.ui.cards>.card{
		min-width:300px;
	}
}
@media only screen and (max-width: 320px) 
{

	.ui.cards>.card{
		min-width:240px;
	}
}