*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{font-family: 'Raleway', sans-serif;text-align: center;height: 100vh;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#746f6a+0,2a2826+100 */background: #746f6a; /* Old browsers */background: -moz-radial-gradient(center, ellipse cover,  #746f6a 0%, #2a2826 100%); /* FF3.6-15 */background: -webkit-radial-gradient(center, ellipse cover,  #746f6a 0%,#2a2826 100%); /* Chrome10-25,Safari5.1-6 */background: radial-gradient(ellipse at center,  #746f6a 0%,#2a2826 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#746f6a', endColorstr='#2a2826',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.box{width: 70%;height: 500px;text-align:center;background:#555;display: inline-block;position: relative;top: 50%;transform:translateY(-50%);-ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); border-radius: 20px;-webkit-box-shadow: 0 10px 50px 0 rgba(0,0,0,0.6);box-shadow: 0 10px 50px 0 rgba(0,0,0,0.6);overflow: hidden;}
.box .image{width: 50%;display: inline-block;height: 100%;float: left;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.box .text{padding: 30px;width: 50%;float: right;color: white;height: 100%;}
.box .text .wrapper{position: relative;top: 50%;transform:translateY(-50%);}
.box .text .wrapper .title{font-size: 40px;font-weight: bold;text-transform: uppercase;margin-bottom: 30px;color:#ddd;}
.circle{position: absolute;width: 110px;height: 110px;background:#eee;border-radius: 50%;left: 50%;transform:translate(-50%,-300px);top: 50%;z-index: 1;-webkit-box-shadow: 0 10px 50px 0 rgba(0,0,0,0.2);box-shadow: 0 10px 50px 0 rgba(0,0,0,0.2);}
.circle i{position: relative;top: 50%; transform:translateY(-50%);font-size: 50px;color: #555;}