.overlay{background:#fff;    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;}
	.box{width:280px; height:22px; position: absolute; left:50%; top:50%;  margin-left:-140px; margin-top:-21px;}
	
	
    .above {
      position: relative;
      width: 57px;
      height: 20px;
      opacity: 0;
      left: 0%;
      top: 0%;
    }
    .customer {
      position: absolute;
      width: 90px;
      height: 20px;
      left: 26%;
      top: 0%;
      opacity: 0;
    }
    .expectation {
      position: absolute;
      width: 111px;
      height: 20px;
      opacity: 0;
      right:0%;
      top: 0%;
    }
	
	.logointro{
      position: absolute;
      width: 120px;
      height: 67px;
      opacity: 0;
      left:50%;
      top: -85px;
	  margin-left:-60px
    }
	.continue{
      position: absolute;
      width: 200px;
      height: 39px;
      opacity: 0;
      left:50%;
      top: 35px;
	  margin-left:-100px; cursor:pointer
    }
	
	
    @keyframes gwd-empty-animation {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    body .above {
      animation: above_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes customer_gwd-keyframes {
      0% {
        opacity: 0;
        left: 25%;
        top: 100%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 25%;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 25%;
        top: 0%;
        animation-timing-function: linear;
      }
    }
	
	 body .above {
      -webkit-animation: above_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @-webkit-keyframes customer_gwd-keyframes {
      0% {
        opacity: 0;
        left: 25%;
        top: 100%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 25%;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 25%;
        top: 0%;
        animation-timing-function: linear;
      }
    }
    body .customer {
      animation: customer_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes expectation_gwd-keyframes {
      0% {
        right: 0%;
        opacity: 0;
        top: -100%;
        animation-timing-function: linear;
      }
      50% {
        right:0%;
        opacity: 1;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        right:0%;
        opacity: 1;
        top: 0%;
        animation-timing-function: linear;
      }
    }
	
	body .customer {
      -webkit-animation: customer_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @-webkit-keyframes expectation_gwd-keyframes {
      0% {
        right: 0%;
        opacity: 0;
        top: -100%;
        animation-timing-function: linear;
      }
      50% {
        right:0%;
        opacity: 1;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        right:0%;
        opacity: 1;
        top: 0%;
        animation-timing-function: linear;
      }
    }
	
    body .expectation {
      animation: expectation_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes above_gwd-keyframes {
      0% {
        opacity: 0;
        left: 0%;
        top: -100%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 0%;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 0%;
        top: 0%;
        animation-timing-function: linear;
      }
    }
	
	body .expectation {
      -webkit-animation: expectation_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @-webkit-keyframes above_gwd-keyframes {
      0% {
        opacity: 0;
        left: 0%;
        top: -100%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 0%;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 0%;
        top: 0%;
        animation-timing-function: linear;
      }
    }
	 body .logointro {
      animation: logointro_gwd-keyframes 1.5s linear 1s 1 normal forwards;
    }
    @keyframes logointro_gwd-keyframes {
      0% {
        opacity: 0;
        left: 50%;
        top: 0%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 50%;
        top: -85px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 50%;
        top: -85px%;
        animation-timing-function: linear;
      }
    }
	
	body .logointro {
      -webkit-animation: logointro_gwd-keyframes 1.5s linear 1s 1 normal forwards;
    }
    @-webkit-keyframes logointro_gwd-keyframes {
      0% {
        opacity: 0;
        left: 50%;
        top: 0%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 50%;
        top: -85px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 50%;
        top: -85px%;
        animation-timing-function: linear;
      }
    }
	 body .continue {
      animation: continue_gwd-keyframes 1.5s linear 2s 1 normal forwards;
    }
    @keyframes continue_gwd-keyframes {
      0% {
        opacity: 0;
        left: 50%;
        top: 0%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 50%;
        top: 35px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 50%;
        top: 35px%;
        animation-timing-function: linear;
      }
    }
	body .continue {
      -webkit-animation: continue_gwd-keyframes 1.5s linear 2s 1 normal forwards;
    }
    @-webkit-keyframes continue_gwd-keyframes {
      0% {
        opacity: 0;
        left: 50%;
        top: 0%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 50%;
        top: 35px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 50%;
        top: 35px%;
        animation-timing-function: linear;
      }
    }
	
	
	 @media(min-width:768px) {
.box{width:568px; height:42px; position: absolute; left:50%; top:50%;  margin-left:-284px; margin-top:-21px;}
	
	
    .above {
      position: relative;
      width: 119px;
      height: 42px;
      opacity: 0;
      left: 0%;
      top: 0%;
    }
    .customer {
      position: absolute;
      width: 189px;
      height: 42px;
      left: 23.5%;
      top: 0%;
      opacity: 0;
    }
    .expectation {
      position: absolute;
      width: 234px;
      height: 42px;
      opacity: 0;
      right:0%;
      top: 0%;
    }
	
	.logointro{
      position: absolute;
      width: 210px;
      height: 117px;
      opacity: 0;
      left:50%;
      top: -150px;
	  margin-left:-105px
    }
	.continue{
      position: absolute;
      width: 269px;
      height: 53px;
      opacity: 0;
      left:50%;
      top: 75px;
	  margin-left:-135px
    }
	
	
    @keyframes gwd-empty-animation {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    body .above {
      animation: above_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes customer_gwd-keyframes {
      0% {
        opacity: 0;
        left: 23.5%;
        top: 100%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 23.5%;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 23.5%;
        top: 0%;
        animation-timing-function: linear;
      }
    }
    body .customer {
      animation: customer_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes expectation_gwd-keyframes {
      0% {
        right: 0%;
        opacity: 0;
        top: -100%;
        animation-timing-function: linear;
      }
      50% {
        right:0%;
        opacity: 1;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        right:0%;
        opacity: 1;
        top: 0%;
        animation-timing-function: linear;
      }
    }
    body .expectation {
      animation: expectation_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes above_gwd-keyframes {
      0% {
        opacity: 0;
        left: 0%;
        top: -100%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 0%;
        top: 0%;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 0%;
        top: 0%;
        animation-timing-function: linear;
      }
    }
	
	 body .logointro {
      animation: logointro_gwd-keyframes 1.5s linear 1s 1 normal forwards;
    }
    @keyframes logointro_gwd-keyframes {
      0% {
        opacity: 0;
        left: 50%;
        top: 0%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 50%;
        top: -150px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 50%;
        top: -150px%;
        animation-timing-function: linear;
      }
    }
	
	 body .continue {
      animation: continue_gwd-keyframes 1.5s linear 2s 1 normal forwards;
    }
    @keyframes continue_gwd-keyframes {
      0% {
        opacity: 0;
        left: 50%;
        top: 0%;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 50%;
        top: 75px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 50%;
        top: 75px%;
        animation-timing-function: linear;
      }
    }
	
}