.body {


}
.page-background {
  background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
	width: 100%;
	margin: auto;
  
}

.logocont {
width: 100%;


}

.page {
position: fixed; /* or absolute */ 
left: 50%;
}

#frame {
    position: absolute;
    width: 420px;
    height: 420px;
    margin-left: -212px;
margin-top: 35px;
    background-size: 100% 100%;
	z-index:2;
}

#logo {
    position: absolute;
    /*top: -120px;*/
	margin: 0x auto;
    
    width: 420px;
    height: 420px;
}

#frame2 {
    position: absolute;
    width: 420px;
    height: 420px;
    margin-left: -212px;
margin-top: 35px;
    background-size: 100% 100%;
	z-index:4;
}

#frame3 {
    position: absolute;
    width: 420px;
    height: 420px;
    margin-left: -212px;
margin-top: 35px;
    background-size: 100% 100%;
	z-index:6;
}

#logo2 {
    position: absolute;
    /*top: -120px;*/
	margin: 0x auto;
    
    width: 420px;
    height: 420px;
}

#frame4 {
    /*position: absolute;
    width: 520px;
    height: 420px;
    margin-left: -260px;
margin-top: 350px;*/
	
    background-size: 100% 100%;
	z-index:28;
}

#frame5 {
    position: absolute;
    width: 420px;
    height: 320px;
    margin-left: -70px;

    background-size: 100% 100%;
	z-index:10;
}

fieldset {
    border:1px solid #999;
    border-radius:8px;
    box-shadow:0 0 10px #999;
}
legend {
    font: normal 15px/25px  "Questrial", Helvetica, sans-serif;
  color: rgb(255, 255, 255);
}
.labell {
    font: normal 12px/25px  "Questrial", Helvetica, sans-serif;
  color: rgb(255, 255, 255);
}

.enjoy-input {
width: 200px;
height: 10px;
margin: 10px 0 0 0;
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px 20px;
  border: 1px solid #0099CC;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal medium/normal Arial, Helvetica, sans-serif;
  color: rgba(0,142,198,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(252,252,252,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.enjoy-input:hover {
  border: 1px solid #ff9900;
  background: rgba(255,255,255,1);
  -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}

.enjoy-input:focus {
  border: 1px solid #ff9900;
  -webkit-box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.2) inset;
  -webkit-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
}



.butt-css {

height: 30px;
	
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  margin: 0px 0 0 0px;
  padding: 0 60px;
  border-left: 1px solid #0099CC;
  border-top: 1px solid #0099CC;
  border-right: 1px solid #0C2737;
  border-bottom: 1px solid #0C2737;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 18px/25px  "Questrial", Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, #0077A2 0, #12394C 100%), rgba(83,141,186,1);
  background: -moz-linear-gradient(180deg, #0077A2 0, #12394C 100%), rgba(83,141,186,1);
  background: linear-gradient(180deg, #0077A2 0, #12394C 100%), rgba(83,141,186,1);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 0 1px 2px rgb(50,114,40) ;
}

.butt-css:hover {
  border: 1px solid #0f5d99;
  background: #0077A2;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11) ;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11) ;
  -webkit-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
}

.butt-css:active {
  border: 1px solid rgba(180,180,180,0.2);
  -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.1) inset;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.1) inset;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

.labeller {
    font: italic normal normal 18px/25px  "Questrial", Helvetica, sans-serif;
  color: rgb(255, 255, 255);

}

/*.neon-text {

  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  font: italic normal normal 32px/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: right;

  text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;

}
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal normal bold 24px/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 1px 1px 0 rgb(77,162,252) , -1px -1px 0 rgb(77,162,252) , 1px -1px 0 rgb(77,162,252) , -1px 1px 0 rgb(77,162,252) , 4px 4px 8px rgb(44,88,137) , -4px 4px 8px rgb(44,88,137) , 4px -4px 8px rgb(44,88,137) , -4px -4px 8px rgb(44,88,137) ;
  -webkit-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
}

.neon-text:hover {
  color: rgba(33,160,206,1);
  text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  }

 /*  font: italic normal normal 20px/1 Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 0 rgb(77,162,252) , -1px -1px 0 rgb(77,162,252) , 1px -1px 0 rgb(77,162,252) , -1px 1px 0 rgb(77,162,252) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);*/
}*/


.container{overflow:hidden;width:200px}




/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
	

}

.fade-in.one {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}

/*---make a basic box ---*/
.box{


}