* {

}


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

#blue_nav {
	z-index: 80;
	width:100%;
	height: 175px;
	position:absolute;
	display:inline-block;
	background-color: #3DBBDE;
	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: 350px;
	height: 200px;
	padding: 25px;
	top:75%;
	left:35%;
	background-color: #3DBBDE;
}

#box2 {
	z-index: 40;
	width: 250px;
	height: 350px;
	padding: 25px;
	top:20%;
	left:63%;
	background-color: #3DBBDE;
}

#box3 {
	z-index: 40;
	width: 550px;
	height: 350px;
	padding: 25px;
	top:41%;
	left:25%;
	background-color: #50E3C2;
}

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: #3DBBDE;
	top: 38%;
	left: 70%;
	padding:0;
	margin:0;
	position: fixed;
}

#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;
}

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

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

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

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

#snails .displayed {
    top:-120px;
    float:right;
    padding: 1% 10% 1% 1%;
    max-width:40%; 
    border:none;
}

#donuts .displayed {
    top:-250px;
    float:left;
    padding: 1% 30% 1% 15%;
    max-width:30%; 
    border:none;
}

#socool .displayed {
    top:-250px;
    float:right;
    padding: 1% 30% 1% 1%;
    max-width:40%; 
 	border:none;
}