body {
    font-family: myFirstFont;
    font-size: 16px;
    line-height: 1.715;
    color: #666;
    margin: 0px;
    min-height:auto;
}

@font-face {
    font-family: myFirstFont;
    src: url("../Fonts/ClearSans-Regular.ttf");
}

.header-section {
    height: 63px;
    width: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 100;
    margin: 0;
    padding: 0;
    background-color: rgb(252,252,252);
    -webkit-box-shadow: 0 0px rgba(255,255,255,.1);
    box-shadow: 0 0px rgba(255,255,255,.1);
    color: #ccc;
    -webkit-transition: all ease .25s;
    transition: all ease .25s;
}

/*this is the top bar when it becomes filled*/
.header-section.floating {
    top:0;
    background-color: rgb(252,252,252);
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 63px;
    width: 100%;
}


/*this new part is only to define the options of top bar*/
.container-fluid {
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}


.TopBarLabel{
    background-image: url(../Images/top_logo_beta.png);
    display: inline-block;
    height: 60px;
    width: 10%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

div.TopBarLabel label{
    opacity: 0;
    cursor: pointer;
}

.nav{
    display: inline-block;
    float: right;
    height: 60px;
    width: 70%;
} 

.navbar-nav>li {
    padding: 0px 4%;
    font-size: 1.2em;
    float: right;
}

.nav a{
    color: grey;
}

.navbar-nav a{
    color: grey;
}

li {list-style-type: none;}


@media screen and (max-width: 720px) and (min-width: 320px){

.header-section {
    height:60px;
    width:100%;
    top:0;
    right: 0;
    position: fixed;
    z-index: 100;
    margin: 0;
    padding: 0;
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: 0 0px rgba(255,255,255,.1);
    box-shadow: 0 0px rgba(255,255,255,.1);
    color: #ccc;
    -webkit-transition: all ease .25s;
    transition: all ease .25s;
}

/*this is the top bar when it becomes filled*/
.header-section.floating {
    top:0;
    background-color: rgba(0,0,0,1);
    -webkit-box-shadow: none;
    box-shadow: none;
    min-height: 60px;
}


/*this new part is only to define the options of top bar*/
.container-fluid {
    /*float: right;*/
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}


.TopBarLabel{
    display: inline-block;
    height: 300px;
    padding: 35px;
    background-image: url('../Images/top_logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

div.TopBarLabel label{
    opacity: 0;
}

.nav{
    display: inline-block;
    float:right;
    height:60px;
} 

.navbar-nav>li {
    float: left;
    padding: 0px 4px;
    font-size: 0.8em;
}
}

.MainOpt{
    color:white;
}

@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.MainOpt {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 0px transparent;
}
.MainOpt:hover, .MainOpt:focus, .MainOpt:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
  color:orange;
  cursor: pointer;
}

.MainOptSelected{
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
  color:orange;
  cursor: pointer;}

/*Header Part End*/


.SignIn_Div{
    position: fixed;
    display: inline-block;
    float: right;
    margin-right: 3%;
    margin-top: 1%;
    max-height: 30px;
    max-width: 200px;
    background-color: #f0f0f0;
    color: #b3b3b3;
    vertical-align: middle;
    font-size: 1.5vh;
    width: 90px;
    padding-left: 1%;
    border: transparent;
    border-radius: 20px;
    -webkit-transform: perspective(1px) translateZ(0) scale(1);
    transform: perspective(1px) translateZ(0) scale(1);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

}

.SignIn_Div:before {
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.SignIn_Div:active{
    display: inline-block;
    float: right;
    margin-right: 3%;
    margin-top: 1%;
    max-height: 30px;
    max-width: 200px;
    background-color: #f0f0f0;
    color: #b3b3b3;
    vertical-align: middle;
    font-size: 1.5vh;
    width: 90px;
    padding-left: 1%;
    border: transparent;
    border-radius: 20px;
    -webkit-transform: perspective(1px) translateZ(0) scale(0.9);
    transform: perspective(1px) translateZ(0) scale(0.9);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.SignIn_Div:hover, .SignIn_Div:focus, .SignIn_Div:active {
  color: white;
}
.SignIn_Div:hover:before, .SignIn_Div:focus:before, .SignIn_Div:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  cursor: pointer;
}

.SignIn_Div label{
    margin-right: 15px;
    display: inline-block;
    float: right;
    line-height: 30px;
    cursor: pointer;
}

.SignIn_Div div{
    background-image: url(../Images/sign_in01.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.SignIn_Div div:before{
    background-image: url(../Images/sign_in.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.SignIn_Div div:hover, .SignIn_Div div:focus, .SignIn_Div div:active {
  background-image: url(../Images/sign_in.png);
}
.SignIn_Div div:hover:before, .SignIn_Div div:focus:before, .SignIn_Div div:active:before {
  background-image: url(../Images/sign_in.png);
}

.TopFrontPage_TaskDescription{
  margin-top: 5%;
	display:block;
	width:100%;
}

.TopFrontPage_TaskDescription_Main{
    display: block;
    font-size: 2vh;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color: #808080;
    margin-top: 1%;
}

.TopFrontPage_TaskDescription_Sub{
    display: block;
    text-align: center;
    margin: auto;
    color: #b3b3b3;
    margin-bottom: 4%;
    font-size: 1.8vh;
}

div#LearnMoreTryEmail.TopFrontPage_EmailTryNow{
    display: block;
    text-align: center;
    position: fixed;
    right: 0px;
    bottom: 2%;
    left: 0px;
    margin: auto;
}

.TopFrontPage_EmailTryNow{
	width:100%;	
	text-align:center;
}


.TopFrontPage_EmailTryNow button {
    font-family: myFirstFont;
    margin: auto;
    margin-left: 1%;
    background-color: #f0f0f0;
    color: #a9a9a9;
    padding: 6px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 1.5vh;
    height: 3.7vh;
    width: 120px;
    border: transparent;
    border-radius: 20px;
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0) scale(1);
    transform: perspective(1px) translateZ(0) scale(1);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
    cursor: pointer;
}

.TopFrontPage_EmailTryNow button:before{
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: -7%;
  left: -2%;
  right: -2%;
  bottom: -4%;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.TopFrontPage_EmailTryNow button:active{
    font-family: myFirstFont;
    margin: auto;
    margin-left: 1%;
    background-color: #f0f0f0;
    color: #a9a9a9;
    padding: 6px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 1.5vh;
    height: 3.7vh;
    width: 120px;
    border: transparent;
    border-radius: 20px;
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0) scale(0.9);
    transform: perspective(1px) translateZ(0) scale(0.9);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
    cursor: pointer;
}

.TopFrontPage_EmailTryNow button:hover, .TopFrontPage_EmailTryNow button:focus, .TopFrontPage_EmailTryNow button:active {
  color: white;
  cursor: pointer;
}

.TopFrontPage_EmailTryNow button:hover:before, .TopFrontPage_EmailTryNow button:focus:before, .TopFrontPage_EmailTryNow button:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  cursor: pointer;

}

.TopFrontPage_EmailTryNow button:focus {
    outline:none;
}

.TopFrontPage_EmailTryNow input {
    font-family: myFirstFont;
    width: 40%;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 1%;
    font-size: 1em;
    color: #666;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

.TopFrontPage_EmailTryNow input:focus {
    outline:none;
}

.TryNowError{
    display: block;
    color: #c71010;
    font-size: 1em;
    margin-top: 1%;
    margin-bottom: 1%;
}

.TryNowMessage{
	
}

/*Marta Countdown*/
.beta_title center{
  display: block;
  text-align: center;
  margin: auto;
  color: #808080;
  font-size: 1.8vh;
  margin-top: 2%;
}

div#Stage_jbeeb_3{
  margin-left: -88px;
}

div#Container_jbeeb_6{
  display: none;
}

div#TextBox_jbeeb_9{
  display: none;
}

div#Container_jbeeb_10{
  display: none;
}

div#TextBox_jbeeb_13{
  display: none;
}
/*Marta Countdown*/

.BottomFrontPage_Image_Div{
  width: 100%;
  height: 60vh;
  display: block;
  margin-top:-5%;
}

.BottomFrontPage_Image_Div #BeginImage{
    background-image: url(../Images/topfrontimage.png);
    background-repeat: no-repeat;
    width: 80%;
    max-width: 900px;
    height: 90%;
    max-height: 80%;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
    margin-top: 7%;
}

/*Marta SVGs*/

.svg-area-1 #svg-wave{
    background-image: url(../Images/top_svg_test1.svg);
    background-size: contain;
    background-repeat: no-repeat;
	background-position: top;
    width: 101vw;
    height: 21.6vw;
    margin-top: -20%;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
}

/*Marta Video Section*/
.VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -40vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 35vh;
}

.TopVideoAndText tbody{
    display: block;
    width: 100%;
}

.TopVideoAndText1{
    display: block;
    margin-bottom: 3%;
}

.TopVideoArea1{
    width: 65%;
}

.TopVideo1{
    width:80%;
}

.top-video1{
    width:100%;
    height:35vw;
    max-height: 420px;
}

.TopText1{
    margin-right: 30%;
    color: white;
    font-weight: normal;
}

.TopVideoAndText2{
    display: block;
    margin-bottom: 3%;
}

.TopTextArea2{
    display: inline-block;
    width: 33%;
}

.TopText2{
    margin-left: 25%;
    color: white;
    font-weight: normal;
}

.TopVideoArea2{
    width: 65%;
    display: inline-block;
}

.TopVideo2{
    width: 70%;
    margin-left: 27%;
}

.top-video2{
    width:100%;
    height:35vw;
    max-height: 420px;
}

.TopVideoAndText2{
    display: block;
}

.TopVideoArea3{
    width: 65%;
}

.TopVideo3{
    width:80%;
}

.top-video3{
    width:100%;
    height:35vw;
    max-height: 420px;
}

.TopText3{
    margin-right: 40%;
    font-weight: normal;
}

@media screen and (max-width: 924px) and (min-width: 320px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -10vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 20vh;
}
}

@media screen and (max-width: 1200px) and (min-width: 924px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -25vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 22vh;
}
}

@media screen and (max-width: 1360px) and (min-width: 1200px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -25vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 22vh;
}

.TopText3{
    font-weight: normal;
    margin-top: 29%;
}
}

@media screen and (max-width: 1500px) and (min-width: 1360px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -40vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 22vh;
}

.TopText3{
    margin-right: 20%;
    font-weight: normal;
    color: white;
    margin-left: 10%;
    margin-bottom: 45%;
}
}

@media screen and (max-width: 1600px) and (min-width: 1500px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -50vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 33vh;
}

.TopText3{
    margin-right: 40%;
    font-weight: normal;
    color: white;
    margin-top: -32%;
}
}

@media screen and (max-width: 1800px) and (min-width: 1600px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -60vh;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 35vh;
}

.TopText3{
    margin-right: 40%;
    font-weight: normal;
    margin-bottom: 33%;
    color: white;
}
}

@media screen and (min-width: 1800px) {
.VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 120vw;
    position: relative;
    top: -40vh;
    margin-bottom: -80vh;
}

 .TopText3{
    margin-right: 40%;
    font-weight: normal;
    color: white;
} 
}

@media screen and (max-height: 500px) and (min-height: 400px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -46vh;
    margin-bottom: -20vh;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
    margin-bottom: -204px;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 31vh;
}
}

@media screen and (max-height: 600px) and (min-height: 500px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -45vh;
    margin-bottom: -28vh;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
    margin-bottom: -100px;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 25vh;
}
}

@media screen and (max-height: 700px) and (min-height: 600px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -66vh;
    margin-bottom: -28vh;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
    margin-bottom: 62px;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 46vh;
}
}

@media screen and (max-height: 800px) and (min-height: 700px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -80vh;
    margin-bottom: -54vh;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
    margin-bottom: 88px;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 36vh;
}
}

@media screen and (max-height: 900px) and (min-height: 800px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -97vh;
    margin-bottom: -75vh;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
    margin-bottom: 193px;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 25vh;
}
}

@media screen and (min-height: 900px){
  .VideoAndTextArea{
    background-image: url(../Images/top_videosec_vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 120vw;
    position: relative;
    top: -88vh;
    margin-bottom: -75vh;
}

.svg-wave-area{
    background-image: url(../Images/top_svg_test2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: top;
    height: 625px;
    margin-top: -8px;
    z-index: -1;
    margin-bottom: 261px;
}

.TopVideoAndText{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 25vh;
}
}
/*Marta Video Section*/

.TopFrontPage_LearnMore label {
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 2%;
  left: 0;
  margin: auto;
  width: 50%;
  color: white;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.TopFrontPage_LearnMore label:hover, .TopFrontPage_LearnMore label:focus, .TopFrontPage_LearnMore label:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  cursor: pointer;
}

@media screen and (max-width: 1730px) and  (min-width: 1600px){
.TopFrontPage_LearnMore label {
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 2%;
  left: 0;
  margin: auto;
  width: 50%;
  color: #e8e8e8;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.TopFrontPage_LearnMore label:hover, .TopFrontPage_LearnMore label:focus, .TopFrontPage_LearnMore label:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: #e8e8e8;
  cursor: pointer;
}
}

@media screen and (min-width: 1730px){
.TopFrontPage_LearnMore label {
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 2%;
  left: 0;
  margin: auto;
  width: 50%;
  color: #a9a9a9;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.TopFrontPage_LearnMore label:hover, .TopFrontPage_LearnMore label:focus, .TopFrontPage_LearnMore label:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: #77c698;
  cursor: pointer;
}
}

/* Register Window */

.RegisterWindow{
    left: 30vw;
    top: 25vh;
    background-color: white;
    position: absolute;
    z-index: 15;
    width: 50%;
    max-width: 540px;
    min-height: 20%;
    border-radius: 20px;
    border: solid #d3d3d3 2px;
    padding: 5px;
    box-shadow: 4px 5px 10px #d4d4d4;
}

.Register_TopImage_Div {
  height: 0;
}
/*

.Register_TopImage_Div img{
	background: url("../Images/topfrontlogo.png") no-repeat ;
	background-size: 200px 100px;
	width:200px;
	height:100px;
} */

.TopRegisterWindow_DescriptionMain{
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color: #b6d1a7;
  }

.TopRegisterWindow_DescriptionMain01{
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: 3%;
    margin-top: 1%;
    font-size: 1em;
    color: #a9a9a9;
}

.TopRegisterWindow_DescriptionMainSub{
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: 3%;
    margin-top: 1%;
    font-size: 1em;
    color: #a9a9a9;
}


.TopRegisterWindow_Data{
	display:block;
	width:100%;
}

.TopRegisterWindow_DataName{
	display:block;
	text-align:center;
	margin:auto;
}


.TopRegisterWindow_DataName input{
    font-family: myFirstFont;
    width: 70%;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 1%;
    font-size: 1em;
    color: #c0c0c0;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

.TopRegisterWindow_DataName input:focus {
    outline:none;
}

.TopRegisterWindow_DataPass{
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: 7%;
}

.TopRegisterWindow_DataPass div{
    padding-top: 10px;
    height: 20px;
    width: 72%;
    margin: auto;
    display: block;
}

.TopRegisterWindow_DataPass input{
    float: left;
    font-family: myFirstFont;
    width: 27vw;
    max-width: 300px;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 1%;
    font-size: 1em;
    color: #c0c0c0;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

.TopRegisterWindow_DataPass input:focus {
    outline:none;
}

.TopRegisterWindow_DataPass span{
    width: 15%;
    float: right;
    font-family: myFirstFont;
    line-height: 30px;
    height: 3vh;
    margin: auto;
    margin-top: 1px;
    display: inline-block;
    padding-left: 1%;
    font-size: 0.8em;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
    background-color: #e2e2e2;
    min-width: 53px;
}

.TopRegisterWindow_DataPass span input{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 3px;
    margin-top: 6px;
}

.TopRegisterWindow_DataPass span label{
    display: inline-block;
    font-size: 1em;
    margin-right: 8px;
}


.TopRegisterWindow_Next{
    padding-top: 5%;
    padding-bottom: 3%;
    display: block;
    text-align: center;
    margin: auto;
    width: 300px;
}

.TopRegisterWindow_Next button{
    display: inline-block;
    margin-right: 3%;
    margin-top: 1%;
    max-height: 30px;
    max-width: 200px;
    background-color: #f0f0f0;
    color: #b3b3b3;
    vertical-align: middle;
    font-size: 1.5vh;
    width: 90px;
    padding-left: 1%;
    border: transparent;
    border-radius: 20px;
    -webkit-transform: perspective(1px) translateZ(0) scale(1);
    transform: perspective(1px) translateZ(0) scale(1);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.TopRegisterWindow_Next button:before {
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.TopRegisterWindow_Next button:active {
    -webkit-transform: perspective(1px) translateZ(0) scale(0.9);
    transform: perspective(1px) translateZ(0) scale(0.9);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.TopRegisterWindow_Next button:hover, .TopRegisterWindow_Next button:focus, .TopRegisterWindow_Next button:active {
  color: white;
  outline: none;
}

.TopRegisterWindow_Next button:hover:before, .TopRegisterWindow_Next button:focus:before, .TopRegisterWindow_Next button:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  cursor: pointer;
}

.TopRegisterWindow_Next label{
    margin-right: 15px;
    display: inline-block;
    float: right;
    line-height: 30px;
    cursor: pointer;
}

.TopRegisterWindow_Next div{
    background-image: url(../Images/sign_in01.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopRegisterWindow_Next div:before{
    background-image: url(../Images/sign_in.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopRegisterWindow_Next div:hover, .TopRegisterWindow_Next div:focus, .TopRegisterWindow_Next div:active {
  background-image: url(../Images/sign_in.png);
}
.TopRegisterWindow_Next div:hover:before, .TopRegisterWindow_Next div:focus:before, .TopRegisterWindow_Next div:active:before {
  background-image: url(../Images/sign_in.png);
}

.TopRegisterWindow_Error{
  display: block;
  color: #c71010;
  font-size: 1em;
  margin-top: 2%;
  margin-bottom: 1%;
  text-align: center;
}

/* Login Window*/
.LoginWindow{
    position: absolute;
    z-index: 100;
    width: 30%;
    max-width: 260px;
    right: 2%;
    top: 8%;
    background-color: white;
    min-height: 20%;
    border-radius: 20px;
    border: solid #d3d3d3 2px;
    padding: 8px;
    box-shadow: 4px 5px 10px #d4d4d4;

}

.Login_TopImage_Div{
    height:0;
 }

/*
.Login_TopImage_Div img{
	background: url("../Images/topfrontlogo.png") no-repeat ;
	background-size: 200px 100px;
	width:200px;
	height:100px;
}


.TopLoginWindow_DescriptionMain{
	display:block;
	font-size: 20px;
	font-weight: bold;
	text-align:center;
	margin:auto;
}
*/


.TopLoginWindow_DescriptionMainSub{
display: block;
    margin: auto;
    font-size: 1em;
    color: #4caf50;
    padding-left: 20px;
    margin-bottom: 4%;
}


.TopLoginWindow_RecoverPassword{
    text-align: center;
    font-size: 1em;
    color: #cecece;
    margin: auto;
    width: 100%;
    display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  }

.TopLoginWindow_RecoverPassword:hover, .TopLoginWindow_RecoverPassword:focus, .TopLoginWindow_RecoverPassword:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: #77c698;
  cursor: pointer;
  outline: none;
}

.TopLoginWindow_Data{
  margin: 0 auto;
  width: 100%;
}

.TopLoginWindow_DataName_th1{
    text-align: right;
    width: 35%;
}

.TopLoginWindow_DataName{
	display:block;
	text-align:center;
	margin:auto;
  	width: 60%;
}

.TopLoginWindow_DataName label{

}

.TopLoginWindow_DataName input{
    width: 99%;
    font-family: myFirstFont;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 1%;
    font-size: 1em;
    color: #666;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

.TopLoginWindow_DataName input {
    outline: none;
    padding-left: 5px;
}


.TopLoginWindow_DataName_th2{
}

.TopLoginWindow_DataPass{
  	display:block;
  	text-align:center;
  	margin:auto;
  	width: 60%;
}

.TopLoginWindow_DataPass label{

}

.TopLoginWindow_DataPass input{
    width: 99%;
    font-family: myFirstFont;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 5px;
    font-size: 1em;
    color: #666;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

.TopLoginWindow_DataPass input {
    outline: none;
}

.TopLoginWindow_DataPass_th1{

}

.TopLoginWindow_DataPass_th2{
	
}

.TopLoginWindow_DataOptional{
    display: block;
    text-align: center;
    width: 56%;
    margin: auto;
}

.TopLoginWindow_DataOptional div{
	display:block;
	text-align:center;
	margin:auto;
	width: 200px;
}


.TopLoginWindow_DataOptional label{

}

.TopLoginWindow_DataRecover{
	text-align:center;
	margin:auto;
}

.RecoverError{
  display: block;
  color: #c71010;
  font-size: 1em;
  margin-top: 2%;
  margin-bottom: 1%;
  text-align: center;
  width: 90%;
  margin: auto;
}


.RecoverMessage{

}

.TopLoginWindow_Next{
	width: 300px;
}

.TopLoginWindow_Next button{
    display: inline-block;
    margin-right: 3%;
    margin-top: 1%;
    max-height: 30px;
    max-width: 250px;
    background-color: #f0f0f0;
    color: #b3b3b3;
    vertical-align: middle;
    font-size: 1.5vh;
    width: 110px;
    padding-left: 1%;
    border: transparent;
    border-radius: 20px;
    -webkit-transform: perspective(1px) translateZ(0) scale(1);
    transform: perspective(1px) translateZ(0) scale(1);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    cursor: pointer;
}

.TopLoginWindow_Next button:before {
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.TopLoginWindow_Next button:active {
    -webkit-transform: perspective(1px) translateZ(0) scale(0.9);
    transform: perspective(1px) translateZ(0) scale(0.9);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    cursor: pointer;
}

.TopLoginWindow_Next button:hover, .TopLoginWindow_Next button:focus, .TopLoginWindow_Next button:active {
  color: white;
  outline: none;
  cursor: pointer;
}

.TopLoginWindow_Next button:hover:before, .TopLoginWindow_Next button:focus:before, .TopLoginWindow_Next button:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  outline: none;
  cursor: pointer;
}

.TopLoginWindow_Next label{
    font-family: myFirstFont;
    cursor: pointer;
    line-height: 30px;
}

.TopLoginWindow_Next div{
    background-image: url(../Images/sign_in01.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 20px;
    height: 25px;
    background-position: center;
    background-size: contain;
    margin: 1% auto;
    margin-left: 7px;
    margin-top: 2px;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopLoginWindow_Next div:before{
    background-image: url(../Images/sign_in.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopLoginWindow_Next div:hover, .TopLoginWindow_Next div:focus, .TopLoginWindow_Next div:active {
  background-image: url(../Images/sign_in.png);
}
.TopLoginWindow_Next div:hover:before, .TopLoginWindow_Next div:focus:before, .TopLoginWindow_Next div:active:before {
  background-image: url(../Images/sign_in.png);
}
.TopLoginError{
  display: block;
  color: #c71010;
  font-size: 1em;
  margin-top: 2%;
  margin-bottom: 1%;
  text-align: center;
}

label#LoginError{
    display: block;
    width: 70%;
    margin: auto;
    text-align: center;
}

div#infrecoveraccount{
  display: block;
  width: 100%;
}

label.EmailRecover{
    font-size: 1em;
    text-align: center;
    color: #ababab;
    display: block;
    margin: auto;
    padding-bottom: 5px;
}

input#emailrecover{
    width: 99%;
    font-family: myFirstFont;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 1%;
    font-size: 1em;
    color: #c0c0c0;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

input#emailrecover:focus{
      outline:none;
}

.RecoverButton{
font-family: myFirstFont;
    margin: auto;
    margin-left: 1%;
    background-color: #f0f0f0;
    color: #a9a9a9;
    padding: 6px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 1.5vh;
    height: 3.7vh;
    width: 120px;
    border: transparent;
    border-radius: 20px;
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }

.RecoverButton:before{
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: -7%;
  left: -2%;
  right: -2%;
  bottom: -4%;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.RecoverButton:hover, .RecoverButton:focus, .RecoverButton:active {
  color: white;
  cursor: pointer;
}

.RecoverButton:hover:before, .RecoverButton:focus:before, .RecoverButton:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  cursor: pointer;
}

.RecoverButton:focus {
    outline:none;
    cursor: pointer;
}

#return label {
    float: right;
    width: 85%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

#return label:hover, #return label:focus, #return label:active {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  cursor: pointer;
  color:#77c698;
}


/* Recover Window */

.RecoverWindow{
    left: 25%;
    top: 20%;
    background-color: white;
    position: absolute;
    z-index: 15;
    width: 50%;
    min-height: 20%;
    border-radius: 20px;
    border: solid #d3d3d3 2px;
    padding: 5px;
    box-shadow: 4px 5px 10px #d4d4d4;
}


.TopRecoverWindow_DescriptionMain{
    display: block;
    font-size: 1.5vh;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color: #b6d1a7;
  }

.TopRecoverWindow_Data{
  margin-top: 2%;
  display:block;
  width:100%;
}


.TopRecoverWindow_DataPass{
  display:block;
  text-align:center;
  margin:auto;
}

.TopRecoverWindow_DataPass div{
    padding-top: 10px;
    height: 20px;
    width: 72%;
    margin: auto;
    display: inline-block;
}

.TopRecoverWindow_DataPass input{
    float: left;
    font-family: myFirstFont;
    width: 70%;
    height: 3vh;
    margin: auto;
    display: inline-block;
    background-color: #ffffff;
    padding-left: 1%;
    font-size: 1em;
    color: #c0c0c0;
    border: solid 2px #e2e2e2;
    border-radius: 20px;
}

.TopRecoverWindow_DataPass input:focus {
    outline:none;
}

.TopRecoverWindow_DataPass span{
    width: 25%;
    float: right;
    font-family: myFirstFont;
    height: 26px;
    line-height: 26px;
    margin: auto;
    display: inline-block;
    padding-left: 1%;
    font-size: 1em;
}

.TopRecoverWindow_DataPass span input{
    display: inline-block;
    float: left;
    width: 15px;
    margin: 3px;
}

.TopRecoverWindow_DataPass span label{
  display: inline-block;
    font-size: 12px;
    float: right;
    margin-right: 8px;
}


.TopRecoverWindow_Next{
    padding-top: 5%;
    padding-bottom: 3%;
    display: block;
    text-align: center;
    margin: auto;
    width: 300px;
}

.TopRecoverWindow_Next button{
    display: inline-block;
    margin-right: 3%;
    margin-top: 1%;
    max-height: 30px;
    max-width: 200px;
    background-color: #f0f0f0;
    color: #b3b3b3;
    vertical-align: middle;
    font-size: 1.5vh;
    width: 100px;
    padding-left: 1%;
    border: transparent;
    border-radius: 20px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

}

.TopRecoverWindow_Next button:before {
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.TopRecoverWindow_Next button:hover, .TopRecoverWindow_Next button:focus, .TopRecoverWindow_Next button:active {
  color: white;
}
.TopRecoverWindow_Next button:hover:before, .TopRecoverWindow_Next button:focus:before, .TopRecoverWindow_Next button:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  cursor: pointer;
}

.TopRecoverWindow_Next label{
    margin-right: 15px;
    display: inline-block;
    float: right;
    line-height: 30px;
    cursor: pointer;
}

.TopRecoverWindow_Next div{
    background-image: url(../Images/sign_in01.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopRecoverWindow_Next div:before{
    background-image: url(../Images/sign_in.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopRecoverWindow_Next div:hover, .TopRecoverWindow_Next div:focus, .TopRecoverWindow_Next div:active {
  background-image: url(../Images/sign_in.png);
}
.TopRecoverWindow_Next div:hover:before, .TopRecoverWindow_Next div:focus:before, .TopRecoverWindow_Next div:active:before {
  background-image: url(../Images/sign_in.png);
}

.TopRecoverWindow_Error{
  display: block;
  color: #c71010;
  font-size: 1em;
  margin-top: 2%;
  margin-bottom: 1%;
  text-align: center;
}

.ChangePwdRecoverError{
  display: block;
  color: #c71010;
  font-size: 1em;
  margin-top: 2%;
  margin-bottom: 1%;
  text-align: center;
}

.TopRecoverWindow_Message{
  display: block;
  font-size: 1em;
  margin-top: 15%;
  margin-bottom: 1%;
  text-align: center;
}


.ChangePwdRecoverMsg {
    display: block;
    font-size: 1em;
    margin-top: 12%;
    margin-bottom: 1%;
    text-align: center;
}



.TopRecoverMessage_Close{
    padding-top: 5%;
    padding-bottom: 3%;
    display: block;
    text-align: center;
    margin: auto;
    width: 300px;
}

.TopRecoverMessage_Close button{
    display: inline-block;
    margin-right: 3%;
    margin-top: 1%;
    max-height: 30px;
    max-width: 200px;
    background-color: #f0f0f0;
    color: #b3b3b3;
    vertical-align: middle;
    font-size: 1.5vh;
    width: 100px;
    padding-left: 1%;
    border: transparent;
    border-radius: 20px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

}

.TopRecoverMessage_Close button:before {
  content: "";
  position: absolute;
  border-radius: 20px;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #77c698;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.TopRecoverMessage_Close button:hover, .TopRecoverMessage_Close button:focus, .TopRecoverMessage_Close button:active {
  color: white;
}
.TopRecoverMessage_Close button:hover:before, .TopRecoverMessage_Close button:focus:before, .TopRecoverMessage_Close button:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  cursor: pointer;
}

.TopRecoverMessage_Close label{
    margin-right: 15px;
    display: inline-block;
    float: right;
    line-height: 30px;
    cursor: pointer;
}

.TopRecoverMessage_Close div{
    background-image: url(../Images/sign_in01.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopRecoverMessage_Close div:before{
    background-image: url(../Images/sign_in.png);
    background-repeat: no-repeat;
    width: 30%;
    max-width: 30px;
    height: 30px;
    background-position: center;
    background-size: 80%;
    margin: 1% auto;
    display: inline-block;
    float: left;
    -webkit-transition: background-image 0.2s;
    transition: background-image 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.TopRecoverMessage_Close div:hover, .TopRecoverMessage_Close div:focus, .TopRecoverMessage_Close div:active {
  background-image: url(../Images/sign_in.png);
}
.TopRecoverMessage_Close div:hover:before, .TopRecoverMessage_Close div:focus:before, .TopRecoverMessage_Close div:active:before {
  background-image: url(../Images/sign_in.png);
}