@font-face {
    font-family: 'apercubold';
    src: url('../fonts/apercu-bold-webfont.eot');
    src: url('../fonts/apercu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/apercu-bold-webfont.woff2') format('woff2'),
         url('../fonts/apercu-bold-webfont.woff') format('woff'),
         url('../fonts/apercu-bold-webfont.ttf') format('truetype'),
         url('../fonts/apercu-bold-webfont.svg#apercubold') format('svg');
    font-weight: normal;
    font-style: normal;

}
*, *:before, *:after {
  box-sizing: content-box !important;
}
.note{ color: #666666; padding-top:10px;font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; font-size: 11px; line-height:14px; margin: 5px auto 0px auto; width: 500px; text-align: center;}
.note a {color: #666666}

html{ margin: 0px; padding:}
html{ margin: 0px; padding: 0px;}
body{font-family:'Lato';position: relative; margin: 0px; padding: 0px; background: #fbd0d5 top center no-repeat;
    width: 100%;  overflow: auto; color: #000000}
img{ margin: 0px; padding: 0px; border: 0px;}
input{ position: relative; margin: 0px; padding: 0px}
a{ text-decoration: none; color: inherit; }
footer a{ vertical-align: middle; color: #ffffff}
footer img{ vertical-align: middle;}

#outer{  min-height: 618px; position: relative; background: #fbd0d5}
.inner{ width: 1000px;position: relative; margin: 0px auto 0px auto; text-align: center; }

.shadow{ -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0, 1);
-moz-box-shadow:    0px 3px 5px 0px rgba(0,0,0, 1);
box-shadow:         0px 3px 5px 0px rgba(0,0,0, 1);}

.shadow2{-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 1);}
.shadow4{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);}
.shadow5{-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 20px 0px rgba(0, 0, 0, 1);}
.sp20{ width: 100%; height: 20px; line-height: 20px; font-size: 20px; position: relative;}
 .sp40{ width: 100%; height: 40px; line-height: 40px; font-size: 40px; position: relative;}
 .sp60{ width: 100%; height: 60px; line-height: 60px; font-size: 60px; position: relative;}
 .sp80{ width: 100%; height: 80px; line-height: 80px; font-size: 80px; position: relative;}
 .sp100{ width: 100%; height: 100px; line-height: 100px; font-size: 100px; position: relative;}
.clear{ width: 100%; height: 0px; line-height: 0px; font-size: 0px; position: relative; clear: both;}
header{ position: relative; width: 100%; height: 150px; position: relative;}
.top_bar{ width: 100%; height: 125px; position: fixed; top:0px; left: 0px; background: #ffffff; border-top: 4px solid #fbd0d5; z-index: 10}

.gallery{ position: relative; margin: 40px 0px 0px 0px; }
.gallery_items{ width: 800px; position: relative; margin: 10px auto 0px auto}
.item{ width: 170px; height: 170px; position: relative; border: 5px solid #ffffff; margin: 10px; float: left;}
.widget{ width: 400px; height: 400px; position: relative; margin: 20px auto 0px auto; border: 8px solid #ffffff}
.preview_back{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%}
.preview_input{ position: absolute; width: 100%; height: 100%; top:0px; left: 0px}
.preview_result{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%;}
.input_box {
    height: 56px;
    left: 20px;
    line-height: 56px;
    position: absolute;
    top: 177px;
    vertical-align: middle;
    width: 360px;
     font-family: 'apercubold'; font-size: 25px; letter-spacing: -2px; 
}
.input_box input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    color: #ffffff;
    display: block;
   font-size: 30px; letter-spacing: -1px;
    height: 100%;
    line-height: 56px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.generate{ position: relative; margin: 20px 0px 0px 0px;}
.av{ position: relative; margin: 40px 0px 0px 0px;}
.footer{ position: relative; margin: 50px 0px 0px 0px;}

.more{ position: relative; margin: 20px 0px 0px 0px;}
.logo{ position: absolute; top:30px; left: 10px; z-index: 10}
.connect{ position: absolute; top:30px; right: 10px; text-align: right; z-index: 10}
.connect_icons{ position:relative;}
.connect_icons img{ position: relative; margin: 5px 0px 0px 5px}
.enter_web{ position: absolute; top:30px; left: 0px; width: 100%; text-align: center;}