* {
		font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	}

	body {
		background: url('../images/frankiebg.jpg');
		}

	.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    }

    .middle {
    display: table-cell;
    vertical-align: middle;
    }

    .inner {
    margin-left: auto;
    margin-right: auto; 
    width:100% /*whatever width you want*/;
	
    }

@font-face {
    font-family: "Quicksand-Regular";
    src: url('../fonts/Quicksand-Regular.eot');
    src: url('../fonts/Quicksand-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Quicksand-Regular.woff') format('woff'),
         url('../fonts/Quicksand-Regular.ttf') format('truetype'),
         url('../fonts/Quicksand-Regular.svg#DINLight') format('svg');
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: "DINLight";
    src: url('../fonts/din-light-webfont.eot');
    src: url('../fonts/din-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/din-light-webfont.woff') format('woff'),
         url('../fonts/din-light-webfont.ttf') format('truetype'),
         url('../fonts/din-light-webfont.svg#DINLight') format('svg');
    font-weight: normal;
    font-style: normal;
} 


div.unsubscribeCircleinner {
    position:absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    height: 400px;
    width: 400px;
    padding:0px;
    margin: 0 auto;
    top:15px;
    left:15px;
}

div.unsubscribeCircleinner > div{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

div.unsubscribeCircleouter {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 15px solid #fff;
    margin: 0 auto;
    height: 430px;
    width: 430px;
    background: #fff;
    position:relative;
    
}

@media (max-width:767px){
  div.unsubscribeCircleinner {
    height: 270px;
    width: 270px;
    font-size:0.7em;
  }
  

  div.unsubscribeCircleouter {
      height: 300px;
      width: 300px;
  }
}


div.unsubscribeBoxInner {
    border: 1px solid #ccc;
    background-color: #fff;
    width: 400px;
	padding:20px;
    margin: 0 auto;
    padding-top: 20px;
}

div.unsubscribeBoxOuter {
    border: 15px solid #fff;
    margin: 0 auto;
    width: 430px;
    background: #fff;
    
}



.lead {
	font-size: 2.5em;
	line-height: 1em;
	color: #999;
	margin-bottom: 0px;
	font-family: "Quicksand-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;


}

p {
	font-size: 1.5em;
	color: #ccc; 
	font-family: "DINLight", "Helvetica Neue", Helvetica, Arial, sans-serif;

}


a {
	font-size: 0.8em;
	color: #333; 
}
a:hover {
	font-size: 0.8em;
	color: #666;
}
.small {
	font-size: 14px;
	text-align: center;
	color: #666;
}
.small strong{
font-family: inherit;
}