* {

}


/* THANKS PAGE */

#container {
	position: relative;
	margin-top: 125px;
	z-index: 10;
	border: none;
	padding: 0;
	width: 100%;
	height: auto;
	float: left;
}

/* BOXES */
/* div.layer_body { /* Teal Box 
	position: absolute;
	display: inline-block;
	z-index: 200;
	width: 400px;
	height: 200px auto;
	background-color: #50E3C2;
	top:1%;
	left:18%;
	padding: 20px 30px 20px 35px;
	text-align: left;
	vertical-align: middle;
	border:none;
} */

div.layer_body { /* Teal Box */
	position: relative;
	display: inline-block;
	z-index: 200;
	height: auto;
	max-width: 400px;
	width:45%;
	background-color: #50E3C2; /* TEAL */
	top: 50px;
 	left: 20%;
 	margin-bottom:0;
 	margin-right: auto;
 	margin-left: auto;
    text-align: left;
    vertical-align: middle;
    padding: 20px 30px 20px 45px;
    border: none;
}

#coral_nav {
	z-index: 80;
	width:100%;
	height: 175px;
	position:absolute;
	display:inline-block;
	background-color: #F77296;
	text-align: left;
	margin-top:0px;
}

div.col_title_box {
	position: absolute;
	z-index: 100;
	width:auto;
	height: auto;
	top:70px;
	left:250px;
	margin:0;
	text-align: left;
	border: none;
}

.greybox {
	display: inline-block;
	position: absolute;
	text-align: left;
	font-size: 25px;
	font-family: "Futura";
	/*background-color: #D8D8D8;*/
}

#box1 {
	z-index: 40;
	width: 550px;
	height: 200px;
	padding: 25px;
	top:63%;
	left:43%;
	background-color: #F77296;
}

#box2 {
	z-index: 40;
	width: 350px;
	height: 200px;
	padding: 25px;
	top:20%;
	left:50%;
	background-color: #F77296;
}

#box3 {
	z-index: 40;
	width: 250px;
	height: 500px;
	padding: 25px;
	top:35%;
	left:25%;
	background-color: #50E3C2;
}

#box4 {
	z-index: 40;
	width: 350px;
	height: 500px;
	padding: 25px;
	top:78%;
	left:35%;
	background-color: #50E3C2;
}

#box5 {
	z-index: 40;
	width: 250px;
	height: 300px;
	padding: 25px;
	top:95%;
	left:55%;
	background-color: #F77296;
}

#box6 {
	z-index: 40;
	width: 25%;
	height: 5%;
	top:10%;
	left:55%;
	background-color: #F77296;
}

img.stamp_bgrd {
	display: block;
	position: absolute;
	z-index: 20;
  	top:175px;
	left:75px;
 	width: 800px;
    height: auto;
    opacity:0.5;
    transform: rotate(10deg);
    border: none;
}

/* TEXT */
.col_title_box h2 {
	font-family: 'Reenie Beanie';
	font-size: 90px;
	border: none;
}

p {
	font-family: 'Futura';
	font-size: 18px;
	padding-bottom: 10px;
	line-height: 100%;
	/*padding:0px 20px 10px 20px;*/
	border: none;
}


.background h2 {
	z-index: 20;
	font-family: 'Reenie Beanie';
	font-size: 120px;
	opacity: 0.2;
	color: #F77296;
	top: 38%;
	left: 70%;
	padding:0;
	margin:0;
	position: fixed;
}

.layer_body a:hover {background-color: #f1f1f1}

#yellow_title { /* "Mellow Yellow" headline */
	text-align: center;
}

/* IMAGES */

div.displayed_hero {
    border: 5px solid #f8f8f8;
    z-index: 50;
    position: absolute;
    top: 43%;
 	left: 50%;
 	transform: translate(-50%, -50%);
    height: auto;
}

.displayed {
   	display: inline-block;
  	position: relative;
  	z-index: 100;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.img_displayed_hero {

    width:100%; /* you can use % */
}

.caption {
	position: absolute;
	display: none;
	font-size: 100px;
	z-index: 100;
	opacity: 0.5;
	background-color: blue;

}

.displayed_hero:hover .caption {
	display: block;
}

/*
.displayed:hover.caption {
	background-color: #f1f1f1;
	z-index: 200;
}*/


#likeyou .displayed {
 	top:-50px;
 	float:right;
 	padding: 1% 7% 1% 10%;
    max-width: 45%; /* you can use % */
    border:none;
}

#yesno .displayed {
    top:-200px;
    float:left;
    padding: 1% 1% 1% 10%;
    max-width:35%; /* you can use % */
    border:none;
}

#heartgirl .displayed {
    top:200px;
    float:right;
    padding: 1% 10% 1% 10%;
    max-width:30%; /* you can use % */
    border:none;
}

#allhearts .displayed {
    top:200px;
    float:right;
    padding: 1% 25% 1% 10%;
    max-width:45%; /* you can use % */
    border:none;
}

#sorry .displayed {
    top:250px;
    float:left;
    padding: 1% 20% 1% 10%;
    max-width:40%; /* you can use % */
    border:none;
}

#suck .displayed {
    top:200px;
    float:right;
    padding: 1% 20% 1% 10%;
    max-width:45%; /* you can use % */
    border:none;
}

#taco .displayed {
    top:200px;
    float:right;
    padding: 1% 45% 1% 10%;
    max-width:35%; /* you can use % */
    border:none;
}

#cali .displayed {
    top:275px;
    float:right;
    padding: 1% 5% 1% 1%;
    max-width:50%; /* you can use % */
    border: none;
}

#seattle .displayed {
    top:200px;
    float:left;
    padding: 1% 1% 1% 10%;
    max-width:40%; /* you can use % */
 	border: none;
}

#moon .displayed {
    top:200px;
    float:right;
    padding: 1% 18% 1% 10%;
    max-width:45%; /* you can use % */
    border: none;
}

#lovely .displayed {
    top:250px;
    float:left;
    padding: 1% 1% 1% 5%;
    max-width:35%; /* you can use % */
 	border: none;
}

#cats_meow .displayed {
    top:350px;
    float:right;
    padding: 1% 15% 1% 10%;
    max-width:25%; /* you can use % */
    border: none;
}

#maccheese .displayed {
    top:300px;
    float:right;
    padding: 1% 23% 1% 1%;
    max-width:30%; /* you can use % */
    border: none;
}

#unicorns .displayed {
    top:350px;
    float:left;
    padding: 1% 1% 1% 12%;
    max-width:30%; /* you can use % */
 	border: none;
}

#dreamers .displayed {
    top:450px;
    float:right;
    padding: 1% 15% 1% 20%;
    max-width:60%; /* you can use % */
 	border: none;
}

#happilyeverafter .displayed {
    top:350px;
   	float: left;
    padding: 1% 35% 1% 15%;
    max-width:50%; /* you can use % */
 	border: none;
}