/* for test in FireFox - control shift M */

/* All Colors */
.container-connect, .container-form, .container-white, .container-purple, .container-blue, .container-blue-light, .container-orange, .container-maroon, .container-olive, .container-yellow, .container-green, .container-army-green, .container-navy-blue,  .container-red, .container-gray, .container-dark-gray {
	font-family: lato,sans-serif;
	font-size: 22px;		
    width:100%;
    margin:0;
    padding: 40px 0px 40px 0px;
}

/* All colors (other than white, gray) with white text */
.container-connect, .container-purple, .container-blue, .container-blue-light, .container-orange, .container-maroon, .container-olive, .container-yellow, .container-green, .container-army-green, .container-navy-blue, .container-red, .container-dark-gray {
	color:#ffffff;	
}

/* Setting colors with white table-header-group*/
.container-purple {background-color: #6d5790;}
.container-blue {background-color: #005ab4;}
.container-blue-light {background-color: #0099ff;}
.container-orange {background-color: #dc6900;}
.container-maroon {background-color: #5f231e;}
.container-olive {background-color: #b3b300;}
.container-yellow {background-color: #e1c300;}
.container-green {background-color: #668D3C;}
.container-dark-gray {background-color: #404041;}
.container-army-green {background-color: #C5C8A0;}
.container-navy-blue {background-color: #4E6172;}
.container-red {background-color: #b4230f;}

/* Setting white, gray */
.container-white {
	color:#404041;	
	background-color: #ffffff;
}

.container-form {
	background-color: #ffffff;
	margin: auto;
	font-family: lato,sans-serif;
    font-size: 42px;
    color: #00aeef;	
	line-height: 32px;
	margin: 0 5px 0 5px;
	display: inline-block;
}


.container-gray {
	color:#404041;	
	background-color: #f4f4f4;
}

/* Individual Containers  */
.container-connect {
	background-color: #99cc33;
	text-align: center;	
}

.container-home {
	color:#ffffff;	
	background-color: #ffffff;
    width:100%;
    margin:0;
    padding: 20px 0px 20px 0px;
}


/* @media sizings for test in FireFox - control shift M */

@media (max-width: 640px){
	/* All Colors */
	.container-connect, .container-form, .container-white, .container-purple, .container-blue, .container-blue-light, .container-orange, .container-maroon, .container-olive, .container-yellow, .container-green, .container-army-green, .container-navy-blue,  .container-red, .container-gray, .container-dark-gray {
		padding: 18px 0px 18px 0px;
	}
}

.connect-grid{
	font-family: lato,sans-serif;
    font-size: 42px;
    color: #003366;	
	line-height: 32px;
	margin: 0 5px 0 5px;
	display: inline-block;
}

.connect-col{
	float:left;
}

.connect-col.one{
	vertical-align: middle;
    padding: .5em .5em;
	text-align: left;
}

.connect-col.two{
	vertical-align: middle;
	text-align: center;	    
	padding: .3em .3em .0 .7em;
}

.btn-connect {
	padding: 10px 15px;
	background: #ffc000;
	color: #FFF;
    border: 1px solid #FFF;		
	display: inline-block;
}

.btn-join {
	padding: 10px 15px;
	background: #0099ff;
	color: #FFF;
    border: 1px solid #FFF;		
	display: inline-block;
}

.btn-process {
	padding: 10px 15px;
	background: #99cc33;
	color: #FFF;
    border: 1px solid #FFF;		
	display: inline-block;
}

.connect-col a, .connect-col a:hover{text-decoration:none; color:#fff}

.btn-connect:hover, .button-link:focus{
	background: #00aeef;
	border: solid 1px #FFF;
	color: #FFF;	
	text-decoration: none;
}

/*-- testing border: 1px solid red;	 --*/
/*-- border: 1px solid #000; --*/
/*-- responsive media queries --*/

@media (max-width: 1366px){
	.connect-grid{
		width: 85%;	
	}
}

@media (max-width: 1024px){
	.container-connect {
		padding: 40px 0px 40px 0px;
	}
	
	.container-form {
		padding: 40px 0px 40px 0px;
	}
	
	.connect-grid{
		float: none;
		position: static;
		width: 90%;			
	}
	
	.connect-col.one{
		width: 65%;	
	}		
	.connect-col.two{
		float: right;
		margin-left: 3px;
	}	
}

@media (max-width: 800px){
	.container-connect{
		padding: 30px 0px 30px 0px;	
	}
	
	.container-form{
		padding: 30px 0px 30px 0px;	
	}
	
	.connect-grid{
		font-size: 28px;
		width: 100%;	
	}	
	.connect-col.one{
		width: 65%;		
		padding: .5em .5em;
	}		
	.connect-col.two{
		width: 25%;	
		padding: .5em .5em;	
	}	
}

@media (max-width: 640px){
	.connect-grid{
		font-size: 24px;
		width: 90%;	
	}
	.btn-connect {
		padding: 6px 8px;
	}
	.connect-col.two{
		width: 30%;
	}	
}

@media (max-width: 414px){
	.container-connect{
		padding: 15px 0px 15px 0px;	
	}
	
	.container-form{
		padding: 15px 0px 15px 0px;	
	}
	
	.connect-grid{
		font-size: 22px;	
		width: 100%;	
	}			
	.connect-col.one{
		width: 100%;
		padding: 5px 5px 5px 5px;
	}		
	.connect-col.two{
		width: 100%;	
		padding: 5px 5px 5px 5px;
	}	
}

.btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}