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

   1. Universal
   2. Header
   3. Bio
   4. Brand Design
   5. Creative Consulting
   6. Portfolio
   6.1 Accordion
   7. Eat Drink Nash
   8. Portfolio Pages
   9. Contact
   10. Case Study
   11. Thank You
   12. Footer
   13. Colors
   14. 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: white;
}

h1 {
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	margin-bottom: 20px;
	color: #2c3e4f;
	font-size: 42px !important;
}

/* 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;
}

h5 {
	font-size: 22px;
}

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

p {
	margin-bottom: 20px;
	font-size: 16px;
}

p a, h5 a {
	border-bottom: 1px solid;
	color: inherit;
}

p a:hover, h5 a:hover {
	color: #edce60;
}

ul {
	list-style: disc inside;
}

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

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


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




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

img {
	max-width: 100%;
}



/* all of the botton styles 
----------------------------------- */



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

.button-wrapper {
	border: 1px solid #edce60;
	padding: 3px;
	width: 200px;
}

.button-wrapper:hover {
	background-color: white;
	border: 1px solid transparent;
}

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

}

.button:hover {
	
}

.b-standard {
	border: 1px solid #edce60;
	border-radius: 0;
	color: #2c3e4f;
	background-color: #edce60;
}

.b-standard:hover, .b-standard:active, .b-standard:focus {
	background-color: #82bfd8;
	border: 1px solid #82bfd8;
	/*color: #edce60;*/
}

.b-alternate {
	border: 1px solid #edce60;
	border-radius: 0;
	color: #2c3e4f;
	background-color: #edce60;
}

.b-alternate:hover {
	background-color: #e8e8e8;
	border: 1px solid #e8e8e8;
	/*color: #edce60;*/
}


/* 2. Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
	color: whitesmoke;
	background-color: rgba(44, 62, 79, 1); 

}

.h-index-wrapper {
	background-color: rgba(44, 62, 79, 1);
}

.h-index-height {
	height: 91vh;
}


/* main logo */
.h-index-wrapper object, .logo {
	width: 150px;
	margin: 0 auto;
	margin-bottom: 35px;
}

.h-index-wrapper h1 {
	display: block;
	margin-bottom: 40px;
	color: white;
}

/* Larger than desktop */
@media (min-width: 1000px) {
	.h-index-wrapper h1 {
		max-width: 620px;
		margin: 0 auto 40px auto;
		font-size: 41px;
	}
}

/* Larger than tablet */
@media (min-width: 750px) {

	.h-index-wrapper h1 {font-size: 60px;}
}

object.logo {
	/*display: block;*/
	/*margin: 0 auto;*/
	/*width: 80%;*/
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	object.logo {
			/*width: 300px;*/
	}
}





/* 3. Bio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bio-wrapper {

}

/* Larger than tablet */
@media (min-width: 750px) {
	/* put the photo there for tablet/larger */
	.h-index-wrapper {
	background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/team-bw.jpg");
	background-size: cover; 
	background-position: top center;
	}
}

/* Background photos for headers */
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.h-charter {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/charter-2.jpg"); 
		background-size: cover; 
		background-position: top center; 
		text-align:left;
	}

	.h-nashville-votes {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/nashvillevotes.jpg"); 
		background-size: cover; 
		background-position: top center; 
		text-align:left;
	}

	.h-30dos {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/30dos.jpg"); 
		background-size: cover; 
		background-position: top center;
	}

	.h-amwh {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/amwh.jpg"); 
		background-size: cover; 
		background-position: center middle;
	}

	.h-cforuth {
		background: linear-gradient(rgba(44, 62, 79, .95), rgba(44, 62, 79, .95)), url("../images/header/cforuth.jpg"); 
		background-size: cover; 
		background-position: center middle;
	}

	.h-houston-station {
		background: linear-gradient(rgba(44, 62, 79, .95), rgba(44, 62, 79, .95)), url("../images/header/houston-station.jpg"); 
		background-size: cover; 
		background-position: center middle;
	}

	.h-refinery {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/refinery.jpg"); 
		background-size: cover; 
		background-position: left center;
	}

	.h-something-new {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/something-new.jpg"); 
		background-size: cover; 
		background-position: center middle;
	}

	.h-symmetry {
		background: linear-gradient(rgba(44, 62, 79, .95), rgba(44, 62, 79, .95)), url("../images/header/symmetry.png"); 
		background-size: cover; 
		background-position: center top;
	}

	.h-teach-twice {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/teachtwice.jpg"); 
		background-size: cover; 
		background-position: bottom;
	}

	.h-vanderbilt {
		background: linear-gradient(rgba(44, 62, 79, .89), rgba(44, 62, 79, .89)), url("../images/header/vandy2.jpg"); 
		background-size: cover; 
		background-position: bottom;
	}

	.h-vvc {
		background: linear-gradient(rgba(44, 62, 79, .93), rgba(44, 62, 79, .93)), url("../images/header/vvc.jpg"); 
		background-size: cover; 
		background-position: bottom;
	}

}

.bio {
	/*height: 90vh;*/
}



.bio-info {
	text-align: center;
}



/* 4. Brand Design
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.brand-design-wrapper {}

.brand-design h1 {}

.brand-design h2 {}

.case-study {text-align: center;}

.case-study img {
	width: 200px;
	margin: 10px auto 30px auto;
	text-align: center;

	-webkit-transition: .15s ease-in-out;
	   -moz-transition: .15s ease-in-out;
			transition: .15s ease-in-out;
}


/* Larger than desktop */
@media (min-width: 1000px) {
	.case-study img {
		width: 35%;
	}
}

.case-study-diable img:hover {
			transform: scale(1.03,1.03);
		-ms-transform: scale(1.03,1.03); /* IE 9 */
	-webkit-transform: scale(1.03,1.03); /* Safari */
}

.partner-logos img {
	width: 49%;
	padding: 30px;
	vertical-align: middle;
}



/* 5. Creative Consulting
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.consulting-wrapper {
	background-color: white;
	color: black;
}

.consulting-wrapper h1 {color: #e8e8e8;}

.consulting-booking {text-align: center;}

.consulting-booking img {
	width: 200px;
	margin: 10px auto 30px auto;
	text-align: center;

	-webkit-transition: .15s ease-in-out;
	   -moz-transition: .15s ease-in-out;
			transition: .15s ease-in-out;
}


/* Larger than desktop */
@media (min-width: 1000px) {
	.consulting-booking img {
		width: 35%;
	}

}

/* 6. Portfolio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.portfolio-wrapper {background-color: white;}

.portfolio h1 {}

.work-list {
	list-style: none;
	text-align: center;
	position: relative;
}



.work-list-item {
	display: inline-block;
	margin: 0 0 20px 0;
	vertical-align: middle;

	width: 49%;
	text-align: center;
}

.work-list img {
	display: inline-block;
	width: 80%;
	padding: 0 5px;
	margin: 0 auto 10px auto;

	-webkit-filter: grayscale(100%);
	   -moz-filter: grayscale(100%);
	   		filter: grayscale(100%);
	
	-webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	   		transform: translateZ(0);

	-webkit-transition: .15s ease-in-out;
	   -moz-transition: .15s ease-in-out;
			transition: .15s ease-in-out;
	
}

.work-list img:hover {
	/*transition: all .2s ease-out;*/

	-webkit-filter: grayscale(0%);
	   -moz-filter: grayscale(0%);
	   		filter: grayscale(0%);
}

/* fine tuning of work image sizes to make them more equitable */
/* width+(img.padding x 2) == 150px */

/* images that are about the same HEIGHT are grouped */
img.w-cfo, img.w-symmetry, img.w-sn {			/*padding: 0;*/}

img.w-vvc, img.w-vandy, img.w-hw, img.w-amwh {	padding: 0px 8px;}

img.w-refinery {								/*padding: 15px 25px;*/}


.portfolio-see-more {}


/* Larger than desktop */
@media (min-width: 1000px) {

	.work-list-item {
		margin: 0 0 20px 0;
		width: 270px;
		text-align: center;
	}


	.work-list img {
		width: 80%;
		padding: 15px 45px;
		margin: 0 auto 10px auto;
	}

	img.w-refinery {
		padding: 15px 25px;
	}

	img.w-cfo, img.w-symmetry, img.w-sn {
		padding: 0;
	}

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	.work-list-item {
		margin: 0 0 30px 0;
		width: 300px;
		text-align: center;
	}
}



/* 6.1 Accordion 
___________________________ */

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
/*.accordion-content.default {display: inline-block !important;}*/


/* 7. Eat Drink Nash.
	  Currently no being used, but here in case we bring it back
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.edn-wrapper {
	background-color: whitesmoke;
}

.edn {
	padding-bottom: 0;
	z-index: 1;
}

.edn-image {
	text-align: center;
}

.edn-image img {
	width: 40%;
	position: relative;
	bottom: -8px;
	z-index: 1;

	-webkit-transition: .15s ease-in-out;
	   -moz-transition: .15s ease-in-out;
			transition: .15s ease-in-out;
}

.edn-image-disable img:hover {
			transform: scale(1.03,1.03);
		-ms-transform: scale(1.03,1.03); /* IE 9 */
	-webkit-transform: scale(1.03,1.03); /* Safari */
	z-index: 1;
}

/* 8. Contact
__________________________________________________ */
.contact-wrapper {}

input[placeholder], ::-webkit-input-placeholder {
	color: #2c3e4f;
}

textarea, select[name] {
	border: 1px solid #2c3e4f;
}

textarea:focus, select[name]:focus {
	border: 1px solid #edce60;
	border: 1px solid #e8e8e8;
}


/* 9. Portfolio Pages 
__________________________________________________ */

.header-portfolio {}

.header-portfolio object  {}

.portfolio-client-wrapper {
	/*color: white;*/
}

.portfolio-client {
	height: auto;
}

.portfolio-client img {
	width: 50%;
	margin-bottom: 40px;
}

/* Larger than desktop */
@media (min-width: 1000px) {
	.portfolio-client {
		min-height: 90vh;
	}

	.portfolio-client img {
		width: 300px;
		margin-bottom: 40px;
	}

}

.portfolio-background-wrapper {
	/*background-color: #97a4af;*/
}

.portfolio-background {}

.portfolio-background-logo {
	text-align: center;
}

.portfolio-background-logo p {
	text-align: left;
}

.portfolio-background-logo img {
	margin: 0 auto;
	width: 200px;
}

/* for something new */

.portfolio-background-logo-sn {
	vertical-align: middle;
}

.portfolio-background-logo-sn img {
	width: 100%;
	margin: 0 auto;
	margin-top: 40px;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.portfolio-background-logo-sn img {
		width: 90%;
		margin: 0 auto;
		margin-top: 40px;
	}

}

/* for the devices */

.device-wrapper {
	padding-bottom: 80px;
}

.device-group {
	/*margin-top: 40px;*/
}

.imac-screen img {
	height: 100%;
}

.iphone-screen img {
	width: 100%;
}

.ipad-screen img {
	width: 100%
}


.device1 {
	position: relative;
}

.device2 {
	width: 25%;
	position: absolute;
	bottom: 30px;
	right: 15%;
	max-width: 150px;
}

.device3 {
	width: 45%;
	position: absolute;
	bottom: 30px;
	left: 5%;
	max-width: 500px;
}

/* media queries for devices
_________________________________________ */

@media screen and (max-width: 768px) {
	.device1 {
		position: relative;
	}

	.device2 {
		width: 15%;
		position: absolute;
		bottom: 30px;
		right: 10%;
		max-width: 150px;
	}

	.device3 {
		width: 50%;
		position: absolute;
		bottom: 30px;
		left: 0;
		max-width: 500px;
	}
}

@media screen and (max-width: 540px) {

	.device1 {
		position: relative;
	}

	.device2 {
		width: 18%;
		position: absolute;
		bottom: 30px;
		right: 7%;
		max-width: 150px;
	}

	.device3 {
		width: 58%;
		position: absolute;
		bottom: 22px;
		left: 0;
		max-width: 500px;
	}


}

/* 10. Case Study.
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.case-study-logo {
	text-align: center;
}

.case-study-background-info-wrapper {
	text-align: center;
}

.case-study-background-info-wrapper img {
	width: 50%;
	margin: 0 auto;
	text-align: center;

}

/* this is freddie */
.case-study-logo img {
	width: 50%;
	margin-top: 25px;
}

.freddie-wrapper img {
	margin-top: 0px;
}

/* end freddie */


.case-study-buttons button {
	width: 200px;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.case-study-buttons button {
		margin-right: 20px;
		width: 200px;
	}

	.case-study-logo img {
		margin-top: 0;
	}

}

.freddie {
	max-width: 120px;
	display: block;
	padding-bottom: 20px;
}

.candidates-wrapper img {
	width: 100%;
	margin-top: 10px;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.candidates-wrapper img {margin-top: 0;}
}

.pledge-wrapper h1 {
	color: black;
}


/* pledge styles copied from css/nashvillevotes.css
_______________________ */


.email-button {
	vertical-align: top;
}

/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {
	.email-button {
		margin-top: 20px;
	}
}


.pledge-privacy {
	font-size: 80%;
	color: #D56C6C;
	color: #BE6060;
	padding-top: 0px;
	margin-bottom: 5px;
}

/* social icons */

.social-icon-wrapper {
	text-align: center;
}

/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {
	.social-icon-wrapper {
		margin-bottom: 5px;
	}
}


.social-icon-wrapper a, .social-icon-wrapper a:hover {
	text-decoration: none;
	border: none;
}

.social-icon-wrapper img {
	width: 25px;
	margin: 0 5px;
	-webkit-transition: .2s ease-in-out;
	   -moz-transition: .2s ease-in-out;
			transition: .2s ease-in-out;
}

.social-icon-wrapper a img:hover {
	-webkit-filter: opacity(60%);
	   -moz-filter: opacity(60%);
			filter: opacity(60%);

}

/* other nashvillevotes styles copied */

.u-just-padding-top {
	padding-top: 20px;
}

.u-inline, .u-inline a, .u-inline p, .u-inline img {
	display: inline;
	vertical-align: text-top;
}

.nashville-by-nicole iframe {
	width: 100%;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.nashville-by-nicole iframe {
		width: 95.5%;
	}

}


/* 12. thank you.
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.thank-you-body {
	/*height: 100vh;*/
}

.thank-you-header {
	height: 100vh;
}

.thank-you-footer {
	height: 10vh;
	width: 100%;
	position: fixed;
	bottom: 0;
}

/* Larger than tablet */
@media (min-width: 750px) {
	.thank-you-footer {
		/*height: 10vh;*/
		/*padding: 10px;*/
	}
}




/* 12. Footer.
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

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

}

/* 13. Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* font colors */
.c-yellow 	{color:#edce60;}
.c-red 		{color:#f08080;} /*aka light coral*/
.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-yellow {background-color:#edce60;}
.wrapper-red 	{background-color:#f08080;} /*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 #f08080;
				 border-right: 10px solid #f08080;} /*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;}




/* 14. 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;

}

.wrapper-white {
	background-color: white;
}

.wrapper-blue {
	/*background-color: #97a4af;*/
	/*background-color: rgba(52, 73, 94,.8);*/
}

.wrapper-yellow {
	background-color: #edce60;
}

.wrapper-red {
	background-color: lightcoral;
}

.wrapper-smoke {
	background-color: whitesmoke;
}

.wrapper-dark-grey {
	background-color: #666;
}

.wrapper-grey {
	background-color: rgba(160,160,160,1);
}

.border-white {
	border-left: solid #BE6060 3px;
	border-right: solid #BE6060 3px;
	padding: 30px;
}

.row {
	margin-bottom: 10px;
}