<div class="wrap">
  <div class="box">
    <a href="#">
      <img src="http://cdn3.iconfinder.com/data/icons/iconic-1/32/x_alt-128.png" alt="X" />
    </a>
    <h1>Company Modal</h1>
    <object  data="http://ctec.clark.edu/~m.packard2/CTEC227/diamond.svg" type="image/svg+xml"></object>
  </div>
</div>

@import "compass/css3";

$cloud: #ecf0f1;
*{
	padding:0;
	margin:0;
}
body{
	background:#2c3e50;
	font:100%/1.5 sans-serif;
}
.wrap{
	margin:5em auto;
	width:500px;
}
.box{
	height:300px;
	width:500px;
	background-color:#bdc3c7;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
	border:2px solid $cloud;
	img{
		top:5px;
		right:5px;
		width:25px;
		height:25px;
		position:absolute;
		-webkit-transition:-webkit-transform .25s, opacity .25s;
          -moz-transition:-moz-transform .25s, opacity .25s;
                   transition: transform .25s, opacity .25s;
		opacity:.25;
	}
	h1{
		text-align:center;
		font-size:2.25em;
		position:absolute;
		left:125px;
		color:$cloud;
		letter-spacing:1px;
		top:40px;
		font-weight:100;
		font-family:"Helvetica Neue", Helvetica, Arial, Sans-serif;
	}
	img:hover{
		-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
		opacity:1;
	}
	object{
		margin: 30px 0 0 -70px;
	}
}

//Hover Animated Close Button
/*
Simple "X" close button for a modal or any type of form or pop-up on hove
r*/