html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
  display: block;
}

ol,ul {
  list-style:none;
  margin:0;
  padding:0;
}

blockquote,q {
  quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after{
  content:'';
  content:none;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}

/* start editing from here */
a { text-decoration:none; }
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{  vertical-align:baseline;}/* vertical align baseline */
.vertical-top{  vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{  display:block;}/* vertical menu */
nav.horizontal ul li{  display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

body {
  height: 100%;
  background: url('/images/bg.png') no-repeat #fff;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: 'Open Sans', arial, sans-serif;
  font-weight: 300;
  color: #fff;
}
.wrap {
  width: 80%;
  margin: 0px auto;
}
.content{
  min-height: 46em;
}
.content-grid {
  text-align: center;
}
input[type='text'] {
  font-family: 'Alegreya Sans', sans-serif;
  border: none;
  -webkit-border-radius: 3px 33px 33px 3px;
  border-radius: 10px 33px 33px 10px;
  color: rgba(85, 85, 85, 0.85);
  font-size: 1.1em;
  display: inline;
  padding: 19.7px 13px;
  background: #f5f5f5;
  border-top: 2px solid #000;
  outline: none;
  width: 33%;
  box-shadow: 0px 11px 34px #111;
  vertical-align: middle;
}
form {
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}
.content-grid p img{
  text-align: center;
  z-index: -9999;
  margin-top: -9em;
}
.grid  {
  text-align: center;
  margin-top: 1em;
}
.grid h3 {
  font-family: 'Petit Formal Script', cursive;
  color: #FFF;
  display: block;
  padding-bottom: 2.5em;
  font-size: 1.6em;
  padding-top: 1.5em;
  font-weight: 600;
  text-align: center;
}

/*-----start-responsive-design------*/
@media only screen and (max-width: 1366px) and (min-width: 1280px){
  .wrap{
    width:95%;
  }
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
  .wrap{
    width:95%;
  }
  input[type='text'] {
    width: 37%;
  }
}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .wrap{
    width:95%;
  }
  .grid p {
    margin-top: 1em;
  }
  .grid h3 {
    padding-top: 1.2em;
    padding-bottom: 2em;
  }
  input[type='text'] {
    width: 45%;
  }
  .content-grid p img{
    margin-top: -8em;
  }
}
@media only screen and (max-width: 768px) and (min-width: 480px) {
  .wrap{
    width:95%;
  }
  .content-grid p {
    margin-top: 3em;
  }
  .grid p{
    margin-top: 0em;
  }
  .grid p img {
    width: 80%;
    margin-top: 1em;
  }
  .grid h3 {
    font-size: 1em;
    padding-top: 1.5em;
    padding-bottom: 3em;
  }
  input[type='text'] {
    font-size: 0.8em;
    padding: 19.7px 13px;
    width: 57%;
  }
}
@media only screen and (max-width: 480px) and (min-width: 320px) {
  .wrap{
    width:95%;
  }
  .content-grid p img{
    margin-top: -2.2em;
    width: 300px;
    text-align: center;
  }
  .content-grid {
    text-align: center;
    margin: 0px auto;
  }
  .grid {
    margin-top: 0em;
  }
  .grid p{
    margin-top: 0em;
  }
  .grid p img {
    width: 283px;
    margin-top: 0.3em;
  }
  .grid h3 {
    font-size: 0.9em;
    padding-top: 1.2em;
    padding-bottom: 1.7em;
  }
  input[type='text'] {
    font-size: 0.9em;
    padding: 10.7px 13px;
    width: 72%;
  }
}
@media only screen and (max-width: 320px) and (min-width: 240px) {
  .grid p img {
    width: 100%;
    margin-top: 0em;
  }
  .content-grid p {
    margin-top:1em;
  }
  .grid p{
    margin-top: 0em;
  }
  .grid h3 {
    font-size: 1em;
    padding-top: 1em;
    padding-bottom: 1.4em;
  }
  input[type='text'] {
    font-size: 0.9em;
    padding: 10.7px 13px;
    width: 72%;
  }
  .wrap{
    width:95%;
  }
}

h1.title {
  clear:both;
  font-family: "Petit Formal Script", cursive;
  color: #000;
  display: block;
  font-size: 1.6em;
  font-weight: 600;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 10px !important;
  text-shadow: 1px 1px 4px #ccc;
}

h2.title {
  clear:both;
  font-family: "Petit Formal Script", cursive;
  color: #000;
  display: block;
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 10px !important;
  text-shadow: 1px 1px 4px #ccc;
}


h3.title {
  padding-top: 5px;
  padding-bottom: 10px !important;
  text-shadow: 1px 1px 4px #ccc;
}

h2.subtitle {
  padding-top: 0;
  padding-bottom: 20px;
  text-shadow: 1px 1px 4px #ccc;
}

#response {
  background-color: #eee;
  padding: 20px;
  box-shadow: 0px 0px 18px 0px rgba(50, 77, 215, 0.14);
  border-radius: 10px;
  animation-name: fadeIn;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #333;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  max-width: 640px;
}

.center {
  margin: auto !important;
  width: 50% !important;
}

header {
  display: block;
  background-image: url('/images/top.png');
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100px;
}

div.content {
  height: 100% !important;
}

footer {
  text-align: center;
  padding-top: 10px;
  font-size: .85em;
  position: relative;
  clear: both;
}