@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body,html{ margin:0; padding:0; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; height:100%; overflow:hidden; 
  	}
.top{display:block;font-family: 'Indie Flower', cursive; color:#fff; font-size:65px; font-weight:900; line-height:85px; text-align:center; overflow:hidden; }

.banner{ position:absolute; bottom:50px; left:calc(50% - 70px); z-index:99999; }
.photos img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}
.rodebalk{ position:absolute; bottom:0; left:0; right:0; display:block; height:40px; background:#FF0000; color:#fff; font-size:18px; font-weight:300; line-height:38px; text-align:center; z-index:9999;  }
.layer .title{ margin:10px; border-top-left-radius:20px; border-top-right-radius:20px; font-size:35px; font-weight:100; padding:5px; color:#fff; }
.layer{  position:absolute; top:0; display:block; left:0; bottom:0; right:0; z-index:999; }
.layer .center{ display:block; border-radius:20px; margin:0 auto; height:auto; width:900px; margin-top:100px; padding:5px; text-align:center;  }
.space-80{ clear:both; height:80px; display:block; }
.layer .center h2{ color:#fff; }
.layer .center h3{ color:#fff; }

.layer .center .yellow{ color:#fff; font-size:16px; font-weight:600; padding:5px 20px 5px 20px; }
.layer .center .button{ display:inline-block; cursor:pointer; margin:10px; padding:10px; background:#5CC084; color:#fff; font-weight:700; font-size:15px; min-width:100px; border-radius:15px; }
.layer .center .button:hover{ background:#6ABF27; }
.layer .center .step{ display:none; }
.layer .center .step select, .layer .center .step input[type="text"], .layer .center .step input[type="password"]{ width:250px; padding:8px; padding:5px; font-size:16px; color:#000; }
.layer .center .step.b{ display:block; }
.checkdetails{ color:#fff; font-size:13px; text-align:center; margin-left:30px; }
.step .image-c{ display:inline-block; margin:5px;border-radius:4px; background:#fff; padding:10px; text-align:left; font-size:13px; font-weight:bold; color:#666; }
.step .image-c .clear{ clear:both; height:10px; }
.step .image-c label{ cursor:pointer; }
.step .image-c input{ margin-top:5px; }

.step .image-c img{ width:180px; border-radius:4px; }
@media only screen and (max-width : 700px),
only screen and (max-device-width : 700px){
.rodebalk{ position:absolute; bottom:0; left:0; right:0; display:block; background:#FF0000; color:#fff; font-size:13px; font-weight:300;  text-align:center; z-index:9999;  }
.top{ font-size:15px; height:auto; line-height: normal; }
.center{ width:100% !important; margin:0 !important; padding:0px !important; }
.step .image-c img{ width:100% !important; border-radius:4px; }
.step .image-c{ width:35%; font-size:10px; }
.step .image-c .clear{ height:3px; }
.layer .center .step select, .layer .center .step input[type="text"], .layer .center .step input[type="password"]{ width:auto !important; padding:8px; padding:5px; font-size:16px; color:#000; }
.layer .center .yellow{ padding:2px !important; margin:0 !important; }
.layer .title{ font-size:22px !important; }
}