/* URL: brand ID kit
 * Creatied: July 2015
 * Last update: July 2015
 *
 * Author: Alex Tapper, Compound
 * URL: compound-creative.com
 *
 *
   Table of Contents:

   1. Universal
   2. Buttons
   3. Header
   4. Footer
   5. Colors
   6. Utility Classes

 */


/* 1. Universal
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* apply a natural box layout model to all elements */
*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	     	  box-sizing: border-box;
}

html, body {
	font-family: "proxima-nova", Helvetica;
	background-color: #f7f7f7;
}

h1 {
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	/*margin-bottom: 20px;*/
	/*color: #2c3e4f;*/
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	h1 {
		/*margin-bottom: 40px;*/
	}
}

h2 {
	/*font-weight: 700;*/
	/*letter-spacing: 0.5px;*/
	/*text-align: center;*/
	margin-bottom: 40px;
	/*text-transform: uppercase;*/
}

h6 {
/*	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.3px;*/
}

p {
	margin-bottom: 20px;
}

p:last-child {
	margin-bottom: 0;
}

p a {
	/*border-bottom: 1px solid;*/
	color: inherit;
}

a {
	color: black;
	text-decoration: underline;
}

p a:hover, li a:hover {
	color: #cccccc;
	text-decoration: underline;
}

.caps {
	text-transform: uppercase;
	font-size: 95%;
	letter-spacing: 0.5px;
}

ul {
	list-style: disc inside;
}

ul li {
	margin-bottom: 0px;
	text-align: left;
}

.container {
	padding-top: 50px;
	padding-bottom: 50px;
}

.border-top {
	border-top: 2px solid #862633;

}

.ul-uses li:first-child {
	/*margin-left: 0;*/
}


/* Larger than desktop */
@media (min-width: 1000px) {
	.container {
	padding-top: 120px;
	padding-bottom: 120px;
	}	
}




img {
	max-width: 100%;
}


/* 2. Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a, button, .button, .button-2, input, .download-me-wrapper {
	-webkit-transition: .15s ease-out;
	   -moz-transition: .15s ease-out;
			transition: .15s ease-out;
}


.button, .color-label {
	background-color: transparent;
	color: white;
	letter-spacing: 1.5px;
	display: block;
	width: 100%;
	margin: 0 auto;

}

.color-label {
	display: inline-block;
	height: 38px;
	width: 200px;
	padding: 0 30px;
	/*color: #555;*/
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
}

.button:hover {
	
}

.button-2 {
	background-color: #cccccc;
	color: white;
	margin: 10px auto;
	width: 80%;
	border: none;
	display: block;
}

.button-2:hover {
	background-color: #7F7F7F;
}

.image-download-wrapper, .image-download-wrapper-padding {
	border: 1px #cccccc solid;
	margin-bottom: 20px;

}

.image-download-wrapper-padding img {
	padding: 40px;
}

.image-download-wrapper p {
	margin-bottom: 0;
}

.download-me-wrapper {
	background-color: #cccccc;
	height: 40px;
	margin-top: -8px;


}

.download-me-wrapper:hover {
	background-color: #7F7F7F;
}

.download-me {
	color: #cccccc;
	text-align: center;
	
}

/* 3. Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
	background-color: whitesmoke;

}


/* 3. Backgrounds
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bkg-nccs {
	background: linear-gradient(rgba(99, 1, 13, .60), rgba(99, 1, 13, .60)), url("../images/bkg/nccs.jpg"); 
	background-size: cover; 
	background-position: left;
	color: white;
	height: 41vh;
}

/* 00. content section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.number-heading {
	/*font-weight: 700;*/
	background-color: #862633;
	padding: 5px 20px;
	color: white;
	border-radius: 100px;
	margin-right: 10px;
}

/* 00. logo section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo-1 img{
	padding: 40px;
	padding-top: 0;
}

/* 00. Color Scheme Section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.color-wrapper {
	height: 200px;
	/*background-color: #862633;*/
	color: white;
}



.color-1-name {
	background-color: #cccccc;
	margin-bottom: 20px;
}




/* 00. Typography.
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#typography ol {
	display: inline;
}

#typography li {
	display: inline-block;
	padding: 5px 11px;
	margin: 0 10px 0 0;
	background-color: #862633;
	color: white;
	border-radius: 8px;
}

/* 00. Footer.
–––––––––––––––––––––––––––––––––––––––––––––––––– */

footer {
	padding: 25px;
	z-index: 9;
	background-color: silver;
}

footer p {
	text-align: center;
	margin-bottom: 0;

}

/* 00. Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* font colors */

.c-maroon	{color:#862633;} /*aka maroon*/
.c-grey 	{color:#CCCCCC;} /*aka light grey*/
.c-blackish	{color:#111111;} /*aka almost black*/
.c-white 	{color:#ffffff;} /*aka white*/

/*old colors */
.c-blue 	{color:#82bfd8;}
.c-navy 	{color:#2c3e4f;}
.c-grey1 	{color:#e8e8e8;}
.c-grey2 	{color:#999999;}
.c-grey3 	{color:#333333;}
.c-white	{color: white;}
.c-black	{color: black;}

/*background colors*/
.wrapper-maroon		{background-color:#862633;} /*aka maroon*/
.wrapper-grey 		{background-color:#CCCCCC;} /*aka light grey*/
.wrapper-blackish	{background-color:#111111;} /*aka almost black*/
.wrapper-white 		{background-color:#ffffff;} /*aka white*/

.wrapper-yellow {background-color:#edce60;}
.wrapper-red 	{background-color:#862633;} /*aka light coral*/
.wrapper-blue 	{background-color:#82bfd8;}
.wrapper-navy 	{background-color:#2c3e4f;}
.wrapper-grey1 	{background-color:#e8e8e8;}
.wrapper-grey2 	{background-color:#999999;}
.wrapper-grey3 	{background-color:#333333;}

/*border colors*/
.border-yellow 	{border-left:  10px solid #edce60;
				 border-right: 10px solid #edce60;}
.border-red 	{border-left:  10px solid #862633;
				 border-right: 10px solid #862633;} /*aka light coral*/
.border-blue 	{border-left:  10px solid #82bfd8;
				 border-right: 10px solid #82bfd8;}
.border-navy 	{border-left:  10px solid #2c3e4f;
				 border-right: 10px solid #2c3e4f;}
.border-grey1 	{border-left:  10px solid #e8e8e8;
				 border-right: 10px solid #e8e8e8;}
.border-grey2 	{border-left:  10px solid #999999;
				 border-right: 10px solid #999999;}
.border-grey3 	{border-left:  10px solid #333333;
				 border-right: 10px solid #333333;}




/* 6. Utility Classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-align-center {
	text-align: center;
	margin: 0 auto;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.u-align-center-desktop {
		text-align: center;
	}
}

.u-align-center p {
	text-align: left;
}

.u-align-left {
	text-align: left !important;
}

.u-border-top {
	border-top: 1px solid #ABC6C5;
}

.u-max-width-100 {
	max-width: 100%;
}

.u-no-margin-bottom {
	margin-bottom: 3px;
}

.u-margin-button {
	margin-top: 40px;
}

.u-center-vertical {
	position: relative;
  	top: 50%;
  	-webkit-transform: translateY(-50%);
  		-ms-transform: translateY(-50%);
  			transform: translateY(-50%);
}

.u-display-none {
	display: none;
}

.u-display-block {
	display: block;
}

.u-display-desktop {
	display: none;
}

.u-display-mobile {
	display: block;
}

/* Larger than desktop */
@media (min-width: 550px) {
	.u-display-mobile {
		display: none;
	}

	.u-display-desktop {
		display: block;
		padding-bottom: 5px;
	}

}

.u-display-inline-block {
	display: inline-block !important;
}

.u-third {
	width: 30%;
	display: inline-block;
}

.u-half {
	width: 49%;
		display: inline-block;

}

.row {
	margin-bottom: 100px;
	display: block;
}

.row:last-child, p:last-child, ol:last-child, ul:last-child, li:last-child, img:last-child, h1:last-child {
	margin-bottom: 0;
}