body {
	width: 100%;
	height: 100%;
}

p, a, h1, h2 {
	font-family: "PT Sans";
}

hr {
	border: 0;
	border-bottom: 1px solid #d0d0d0;
	margin: 0px 80px 80px 80px; 
}

.header {
	height: 550px;
}

.caption, .tagline {
	font-size: 1.2em;
	color: #e9baa1;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
	padding-top: 30px;
}

.tagline {
	font-size: 1.5em;
	letter-spacing: 1.3pt;
}

.caption {
	padding-top: 60px;
	text-transform: none;
	color: #999;
}

.caption-mobile {
	display: block;
	margin: 0 auto;
	max-width: 80%;
	font-size: 1em;
	font-family: "PT Sans";
	color: #999;
	text-transform: none;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
	margin-top: -80px;
	visibility: hidden;
}

.letter {
	display: block;
	margin: 0 auto;
	max-width: 90%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 600px;
	background-position: center center;
}

.a {
	background-image: url("../svg/svg-pink-a.svg");	
}

.b {
	background-image: url("../svg/svg-pink-b.svg");
}

.c {
	background-image: url("../svg/svg-pink-c.svg");
}
.d {
	background-image: url("../svg/svg-pink-d.svg");
}
.e {
	background-image: url("../svg/svg-pink-e.svg");
}
.f {
	background-image: url("../svg/svg-pink-f.svg");
}
.g {
	background-image: url("../svg/svg-pink-g.svg");
}
.h {
	background-image: url("../svg/svg-pink-h.svg");
}
.i {
	background-image: url("../svg/svg-pink-i.svg");
}
.j {
	background-image: url("../svg/svg-pink-j.svg");
}
.k {
	background-image: url("../svg/svg-pink-k.svg");
}
.l {
	background-image: url("../svg/svg-pink-l.svg");
}
.m {
	background-image: url("../svg/svg-pink-m.svg");
}
.n {
	background-image: url("../svg/svg-pink-n.svg");
}
.o {
	background-image: url("../svg/svg-pink-o.svg");
}
.p {
	background-image: url("../svg/svg-pink-p.svg");
}
.q {
	background-image: url("../svg/svg-pink-q.svg");
}
.r {
	background-image: url("../svg/svg-pink-r.svg");
}
.s {
	background-image: url("../svg/svg-pink-s.svg");
}
.t {
	background-image: url("../svg/svg-pink-t.svg");
}
.u {
	background-image: url("../svg/svg-pink-u.svg");
}
.v {
	background-image: url("../svg/svg-pink-v.svg");
}
.w {
	background-image: url("../svg/svg-pink-w.svg");
}
.x {
	background-image: url("../svg/svg-pink-x.svg");
}
.y {
	background-image: url("../svg/svg-pink-y.svg");
}
.z {
	background-image: url("../svg/svg-pink-z.svg");
}




.chevron::before {
	border-color: #dfe2e5;
	border-style: solid;
	border-width: .5em 0.5em 0 0;
	content: "";
	display: block;
	margin: 0 auto;
	height: 1.45em;
	top: -220px;
	position: relative;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	width: 1.45em;
	-webkit-animation: fadein 1s ease-in alternate infinite;
    -moz-animation: fadein 1s ease-in alternate infinite;
    animation: fadein 1s ease-in alternate infinite;
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chevron2::before {
	border-color: #dfe2e5;
	border-style: solid;
	border-width: .5em 0.5em 0 0;
	content: "";
	display: block;
	margin: 0 auto;
	height: 1.45em;
	top: 100px;
	position: relative;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	width: 1.45em;
	-webkit-animation: fadein 1s ease-in alternate infinite;
    -moz-animation: fadein 1s ease-in alternate infinite;
    animation: fadein 1s ease-in alternate infinite;
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}


header {
	height: 80px;
	width: 100%;
	background-color: #fff;
	position: fixed;
}

.logo {
	max-width: 95%;
	height: auto;
	display: block;
	margin: 0 auto;
	padding-top: 130px;
}

.keyboard {
	display: block;
	margin: 0 auto;
	padding-top: 200px; 
}

.logo-top {
	height: 40px;
	width: 200px;
	background-color: #555;
	display: block;
	margin: 0 auto;
	margin-top: 20px;
}

.container {
	/*background-color: #48a3d8;*/
	height: 800px;
	/*border-bottom: 1px red solid;*/
}

.container-b {
	height: 700px;
}

footer {
	height: 70px;
	width: 100%;
	background-color: #fff;
}

.copywrite {
	margin-top: 40px;
	font-size: .8em;
	color: #808080;
	text-align: center;
}

.link {
	margin-top: 20px;
	font-size: .8em;
	color: #808080;
	text-align: center;
	margin-bottom: 160px;
}

.link-link {
	text-decoration: none;
	font-weight: 700;
	color: #808080;
}

.link-link:hover {
	color: #666;
}

.promo {
	font-size: 1em;
	margin-top: 80px;
	text-align: center;
	padding: 0px 50px;
	color: #616569;

}

.call-to-action {
	display: block;
	margin: 0 auto;
	font-size: 1.2em;
	font-weight: 400;
	margin-top: 40px;
	text-align: center;
	color: #7a7e83;
	max-width: 600px;
	padding: 0px 40px;
}

a {
	text-decoration: none;
	font-weight: 700;
	color: #cfa58f;
}

.mustache {
	display: block;
	text-align: center;
}

a:hover {
	color: #b5917d;
}

footer {
	padding-top: 80px;
	background-color: #e9ecf0;
	height: 100%;
	border: 1px solid #dfe2e5;
}


#color-picker {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 135px;
	background-color: rgba(238,238,238,.9);
	display: block;
}

.palette-container {
	text-align: center;
	overflow: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: table;
	margin: 0 auto;
	box-shadow: 0px -2px 2px rgba(0, 0, 0, .05), 0px 1px 0px #fff inset;


}

.palette {
	float: left;
	width: 80px;
	height: 80px;
	border: 10px solid #ddd;
	border-radius: 500px;
	background-color: green;
}

.palette:hover {
	border: 10px solid #fff;
}

.palette-container ul {
	display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.palette-container li {
    float: left;
    padding: 20px 20px;
}

.pink {
	background-color: #E9BAA1;
	box-shadow: 0px 3px 0px rgba(256,256,256,.2) inset;
}

.pink:hover {
	background-color: ;
}

.tan {
	background-color: #C6957B;
	box-shadow: 0px 3px 0px rgba(256,256,256,.2) inset;
}

.tan:hover {
	background-color: ;
}

.brown {
	background-color: #825D49;
	box-shadow: 0px 3px 0px rgba(256,256,256,.2) inset;
}

.brown:hover {
	background-color: ;
}

.olive {
	background-color: #E9CCA1;
	box-shadow: 0px 3px 0px rgba(256,256,256,.2) inset;
}

.olive:hover {
	background-color: ;
}


.donate {
	padding: 14px 28px;
	background-color: #809EAD;
	border-radius: 4px;
	border: none;
	margin: 0 auto;
	margin-top: 60px;
	display: table;
	  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;

}

.donate:hover {
	box-shadow: 0px 4px 13px rgba(0,0,0,.5);
}

.donate:focus {
	background-color: green;
}

.donate a {
	color: #fff;
	font-size: 14pt;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2pt;
}





@media (max-width: 767px) {
	.palette-container li {
	    float: left;
    	padding: 20px 10px 50px 10px;
    }

    #color-picker {
    	height: 100px;
    }

	.letter {
		background-size: 340px;
	}
		.palette {
		width: 40px;
		height: 40px;
		border: 10px solid #ddd;
		border-radius: 500px;
	}

	
}


@media (max-width: 563px) {

	.keyboard, .caption {
		visibility: hidden;
	}

	.caption-mobile {
		visibility: visible;
	}

	.palette-container li {
	    float: left;
    	padding: 20px 10px 50px 10px;
    }


}