body {font-family: 'Open Sans', sans-serif;}


@font-face {
 font-family: Antipasto;
 src: url("antipasto.eot") /* EOT file for IE */
}

@font-face {
    font-family: Antipasto;
    src: url("antipasto.ttf");
}

a {color:#7f99a5}
a:visited {color:#7f99a5; text-decoration: none;}
a:hover {color: #aac3cf; text-decoration: none;}

.clear {
	clear:both;
}
section.body {
	background-color: #f4f4f4;
}

footer {
	background-color: #333;
	color: #fff;
	padding: 20px 0;
}

.grid-container {
	background-image: url('../img/bg-girl.png');
	background-repeat: no-repeat;
	background-position: 10px 10px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 1px solid #777;
}

.grid-container .grid-element {
	background-color: rgba(255,255,255,0);
	width: 20%;
	float: left;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
}

/* BORDER */

.grid-element:first-child,
.grid-element:nth-child(2),
.grid-element:nth-child(3),
.grid-element:nth-child(4),
.grid-element:nth-child(5) {
	border-top: 1px solid #777;
}

/* COLORS */
.grid-element:first-child,
.grid-element:nth-child(2),
.grid-element:nth-child(3),
.grid-element:nth-child(7),
.grid-element:nth-child(8) {
	background: rgba(200,200,200,0.5);
}

.grid-element:nth-child(4),
.grid-element:nth-child(5),
.grid-element:nth-child(10),
.grid-element:nth-child(11),
.grid-element:nth-child(17) {
	background: rgba(170,170,170,0.5);
}

.grid-element:nth-child(13),
.grid-element:nth-child(19),
.grid-element:nth-child(20),
.grid-element:nth-child(25),
.grid-element:nth-child(26) {
	background: rgba(150,150,150,0.5);
}

.grid-element:nth-child(22),
.grid-element:nth-child(23),
.grid-element:nth-child(27),
.grid-element:nth-child(28),
.grid-element:nth-child(29) {
	background: rgba(200,200,200,0.5);
}

/* FONTS */
@media (max-width: 720px) {
	.grid-element label, .addImage {
		font-size: 2vw;
	}
}







/* PLACEMENT */

.grid-element {
	z-index: 10;
}

.grid-element label {
	margin: auto;
	margin-top: 40%;
	text-align: center;
	cursor: pointer;
}

.grid-element.dropzn {
	cursor:pointer;
}


.notemplate, .submitForm {
	display: none;
}

.submitForm {
	margin-top: 20px;
}

.variation {
	margin-bottom: 25px;
}

.shareBtn {
	display: inline-block;
	border-radius: 4px;
	margin-top: 5px;
	width: 47%;
	float: left;
	color: white;
	
	text-align: center;
	background-color:#7f99a5;
	font-size: 12px;
	padding-top: 5px;
	padding-bottom: 5px;
	
}

.shareBtn:last-child {
	margin-left: 6%;
}

.shareBtn.download {
	margin: 5px 0;
	width: 100%;
}

.addImage {
	padding: 4px 8px;
	border: 1px solid white;
	border-radius: 4px;
	color: #fff;
	background: #e8b5be;
	margin: 5% 25%;
	width: 50%;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.addImage:hover {
color: #fff;
background: #df9eaa;
}