/* The Popupwin (background) */
.popupwin {
    display: none; /* Hidden by default */
/*    position: fixed; /* Stay in place */
    position: fixed;
    font-size: 0;
    z-index: 1001; /* Sit on top */
    padding-top: 0px; /* Location of the box */
    left: 0px;
    top: 0px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
/*    width: 450px; */ 
/*    height: 350px; */ 
/*    overflow: auto; /* Enable scroll if needed */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Popupwin Content */
.popupwin-contenth {
    position: absolute;
    display: block;
/*    background-color: transparent; */
    margin: auto;  
/*    margin: 0px; */
/*    top: 0px; */
/*    left: 200px; */
    padding: 20px;
    padding-left: 30px;  
/*    border: 1px solid #888; */
/*    width: 60%; */
/*    height: 60%; */
      width: 800px;
      height: 320px;
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); */ 
}

.banner-grow {
    -webkit-animation-name: bannergrow1;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-fill-mode: forwards;
    -animation-name: bannergrow1;
    -animation-duration: 2.5s;
    -animation-fill-mode: forwards;
}

@-webkit-keyframes bannergrow1 {
    from {width: 156px; height:35px;}
    to {width: 780px; left: 176px; -webkit-transform: rotate(720deg);} 
}

@keyframes bannergrow1 {
    from {width: 156px; height:35px;}
    to {width: 780px; left: 176px; transform: rotate(720deg);} 
}

.popupwin-contentleft1 {
    position: relative;
    display: inline-block;
    background-color: transparent;
    margin: auto; 
    padding-top: 0px; 
    width: 432px;
    height: 320px;
    overflow: hidden;
    -webkit-animation-name: animateleft1; 
    -webkit-animation-duration: 2.5s;
    -webkit-animation-fill-mode: forwards; 
    animation-name: animateleft1; 
    animation-duration: 2.5s;
    animation-fill-mode: forwards; 
}

/* Add Animation */
@-webkit-keyframes animateleft1 {
    from {top: 0px; left: 5px; opacity:1;} 
    to {top: 0px; left: -393px; opacity:1;} 
}

@keyframes animateleft1 {
    from {top: 0px; left: 5px; opacity:1;} 
    to {top: 0px; left: -393px; opacity:1;} 
}

.popupwin-contentright1 {
    position: relative;
    display: inline-block;
    background-color: transparent;
    margin: auto; 
    padding-top: 0px; 
    width: 432px;
    height: 320px;
    overflow: hidden;
    -webkit-animation-name: animateright1; 
    -webkit-animation-duration: 2.5s; 
    -webkit-animation-fill-mode: forwards; 
    animation-name: animateright1; 
    animation-duration: 2.5s; 
    animation-fill-mode: forwards; 
}

/* Add Animation */
@-webkit-keyframes animateright1 {
    from {top: 0px; right: 0px; opacity:1;} 
    to {top: 0px; right: -393px; opacity:1;} 
}

@keyframes animateright1 {
    from {top: 0px; right: 0px; opacity:1;} 
    to {top: 0px; right: -393px; opacity:1;} 
}

.popuptable-curtain {
    position: absolute;
    display: block;
    border-top: 10px solid blue;
    top: 0px;
    left: 190px;
    width: 864px;
    height: 320px;
    overflow: hidden;
    background-color: transparent;
}


.popupwin-content {
    position: relative;
    display: inline-block;
/*    background-color: #fefefe; */
    background-color: transparent;
    margin: auto;  
/*    margin: 0px; */
/*    padding: 0px; */
    padding-top: 40px;
/*    border: 1px solid #888; */
/*    width: 60%; */
/*    height: 60%; */
      width: 450px;
      height: 300px;
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); */ 
    -webkit-animation-name: animatetop1;
    -webkit-animation-duration: 1.3s;
    animation-name: animatetop1;
    animation-duration: 1.3s;
}

/* Add Animation */
@-webkit-keyframes animatetop1 {
    from {top:-300px; left: -300px; opacity:0;} 
    to {top:0px; left: 0px; opacity:1; -webkit-transform: rotate(1080deg);} 
}

@keyframes animatetop1 {
    from {top:-300px; left: -300px; opacity:0;} 
    to {top:0px; left: 0px; opacity:1; transform: rotate(1080deg);} 
}

.popupwin-content2 {
    position: relative;
    display: inline-block;
/*    background-color: #fefefe; */
    background-color: transparent;
    margin: auto;  
/*    margin: 0px; */
/*    padding: 0px; */
    padding-top: 40px;
/*    border: 1px solid #888; */
/*    width: 60%; */
/*    height: 60%; */
      width: 450px;
      height: 300px;
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); */ 
    -webkit-animation-name: animatetop2;
    -webkit-animation-duration: 1.3s;
    animation-name: animatetop2;
    animation-duration: 1.3s;
}

/* Add Animation */
@-webkit-keyframes animatetop2 {
    from {top:-300px; right: -300px; opacity:0;} 
    to {top:0; right: 0px; opacity:1; -webkit-transform: rotate(-1080deg);} 
}

@keyframes animatetop2 {
    from {top:-300px; right: -300px; opacity:0;} 
    to {top:0; right: 0px; opacity:1; transform: rotate(-1080deg);} 
}

.popupwin-content3 {
    position: relative;
    display: inline-block;
/*    background-color: #fefefe; */
    background-color: transparent;
    margin: auto;  
/*    margin: 0px; */
    padding: 0px;
/*    border: 1px solid #888; */
/*    width: 60%; */
/*    height: 60%; */
      width: 450px;
      height: 300px;
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); */ 
    -webkit-animation-name: animatetop3;
    -webkit-animation-duration: 1.3s;
    animation-name: animatetop3;
    animation-duration: 1.3s;
}

/* Add Animation */
@-webkit-keyframes animatetop3 {
    from {bottom:-300px; left: -300px; opacity:0;} 
    to {bottom:0; left: -0px; opacity:1; -webkit-transform: rotate(1080deg);} 
}

@keyframes animatetop3 {
    from {bottom:-300px; left: -300px; opacity:0;} 
    to {bottom:0px; left: 0px; opacity:1; transform: rotate(1080deg);} 
}

.popupwin-content4 {
    position: relative;
    display: inline-block;
/*    background-color: #fefefe; */
    background-color: transparent;
    margin: auto;  
/*    margin: 0px; */
    padding: 0px;
/*    border: 1px solid #888; */
/*    width: 60%; */
/*    height: 60%; */
      width: 450px;
      height: 300px;
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); */ 
    -webkit-animation-name: animatetop4;
    -webkit-animation-duration: 1.3s;
    animation-name: animatetop4;
    animation-duration: 1.3s;
}

/* Add Animation */
@-webkit-keyframes animatetop4 {
    from {bottom:-300px; right: -300px; opacity:0;} 
    to {bottom:0; right: 0px; opacity:1; -webkit-transform: rotate(-1080deg);} 
}

@keyframes animatetop4 {
    from {bottom:-300px; right: -300px; opacity:0;} 
    to {bottom:0px; right: 0px; opacity:1; transform: rotate(-1080deg);} 
}


/* Add Animation */
@-webkit-keyframes animatetop1-bounce {
      0%   {top: -400px; left: -400px; opacity: 0;}
      7%   {top: 0px; left: -373px; opacity: 1;}
      14%  {top: -350px; left: -346px; opacity: 1;}
      20%  {top: 0px; left: -319px; opacity: 1;}
      27%  {top: -300px; left: -292px; opacity: 1;}
      34%  {top: 0px; left: -265px; opacity: 1;}
      40%  {top: -250px; left: -238px; opacity: 1;}
      47%  {top: 0px; left: -211px; opacity: 1;}
      54%  {top: -200px; left: -184px; opacity: 1;}
      60%  {top: 0px; left: -157px; opacity: 1;}
      67%  {top: -150px; left: -130px; opacity: 1;}
      74%  {top: 0px; left: -103px; opacity: 1;}
      80%  {top: -100px; left: -76px; opacity: 1;}
      87%  {top: 0px; left: -49px; opacity: 1;}
      94%  {top: -50px; left: -22px; opacity: 1;}
      100% {top: 0px; left: 0px; opacity: 1;}
}

@keyframes animatetop1-bounce {
      0%   {top: -400px; left: -400px; opacity: 0;}
      7%   {top: 0px; left: -373px; opacity: 1;}
      14%  {top: -350px; left: -346px; opacity: 1;}
      20%  {top: 0px; left: -319px; opacity: 1;}
      27%  {top: -300px; left: -292px; opacity: 1;}
      34%  {top: 0px; left: -265px; opacity: 1;}
      40%  {top: -250px; left: -238px; opacity: 1;}
      47%  {top: 0px; left: -211px; opacity: 1;}
      54%  {top: -200px; left: -184px; opacity: 1;}
      60%  {top: 0px; left: -157px; opacity: 1;}
      67%  {top: -150px; left: -130px; opacity: 1;}
      74%  {top: 0px; left: -103px; opacity: 1;}
      80%  {top: -100px; left: -76px; opacity: 1;}
      87%  {top: 0px; left: -49px; opacity: 1;}
      94%  {top: -50px; left: -22px; opacity: 1;}
      100% {top: 0px; left: 0px; opacity: 1;}
}

/* Add Animation to reverse in top direction */
@-webkit-keyframes animatetop1-rev {
/*    from {top:0; opacity:1;} */ 
/*    to {top:-300px; opacity:0;} */
      0%   {top: 0px; left: 0px; opacity: 1;}
      100% {top: 300px; left: -300px; opacity: 0;}
}

@keyframes animatetop1-rev {
/*    from {top:0; opacity:1;} */
/*    to {top:-300px; opacity:0;} */
      0%   {top: 0px; left: 0px; opacity: 1;}
      100% {top: 300px; left: -300px; opacity: 0;}
}

/* Add Animation to reverse in top direction */
@-webkit-keyframes animatetop2-rev {
/*    from {top:0; opacity:1;} */ 
/*    to {top:-300px; opacity:0;} */
      0% {top:0px; right: 0px; opacity:1;} 
      100% {top:-300px; right: -300px; opacity:0;} 
}

@keyframes animatetop2-rev {
/*    from {top:0; opacity:1;} */
/*    to {top:-300px; opacity:0;} */
      0% {top:0px; right: 0px; opacity:1;} 
      100% {top:-300px; right: -300px; opacity:0;} 
}


/* Add Animation to reverse in top direction */
@-webkit-keyframes animatetop3-rev {
/*    from {top:0; opacity:1;} */ 
/*    to {top:-300px; opacity:0;} */
      0% {bottom:0px; left: 0px; opacity:1;} 
      100% {bottom:-300px; left: -300px; opacity:0} 
}

@keyframes animatetop3-rev {
/*    from {top:0; opacity:1;} */
/*    to {top:-300px; opacity:0;} */
      0% {bottom:0px; left: 0px; opacity:1;} 
      100% {bottom:-300px; left: -300px; opacity:0} 
}


/* Add Animation to reverse in top direction */
@-webkit-keyframes animatetop4-rev {
/*    from {top:0; opacity:1;} */ 
/*    to {top:-300px; opacity:0;} */
      0%   {top: 0px; left: 0px; opacity: 1;}
      100% {top: 300px; left: -300px; opacity: 0;}
}

@keyframes animatetop4-rev {
/*    from {top:0; opacity:1;} */
/*    to {top:-300px; opacity:0;} */
      0% {bottom:0px; right: 0px; opacity:1;} 
      100% {bottom:-300px; right: -300px; opacity:0;} 
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popupwin-header {
/*    padding: 2px 16px; */
    padding: 0;
/*    background-color: #5cb85c; */
    background-color: transparent; 
/*    color: white; */
}

.popupwin-body {padding: 2px 16px;}

.popupwin-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.popuptable {
/*    margin-left: 100px; */
    position: absolute;
    display: block;
    top: 0px;
    left: 197px;
    width: 845px;
    height: 250px;
    background-color: #d6eefb;
/*      background: yellow; */
/*      border: 10px solid #d6eefb; */
      border: 5px double black;
      border-radius: 20%; 
/*	margin:0 auto; */
/*	width:80%; */
/*	background: url('../images/bg1.png'); */
}

.popuptable2 {
    margin-left: 100px;
}

.arrow-ind1a {
   display: none;
   position: absolute;
   left: 200px;
   top: 200px;
}

.arrow-ind2a {
   display: none;
   position: absolute;
   left: 200px;
   top: 200px;
}

/***** Media Queries *****/
@media only screen and (max-width: 1280px) {
	.popupwin{
		width:100%;
	}
}
@media only screen and (max-width: 1024px) {
	.popupwin{
		width:100%;
	}
	.popuptable{
		left:70px;
	}
	.popuptable2{
		margin-left:40px;
	}
	.popuptable-curtain{
		left:70px;
	}
}
@media only screen and (max-width: 800px) {
	.popupwin{
		width:97%;
	}
	.popuptable{
		left:70px;
	}
	.popuptable2{
		margin-left:40px;
	}
	.popuptable-curtain{
		left:70px;
	}
}
@media only screen and (max-width: 640px){
	.popupwin{
		width:90%;
	}
	.popuptable{
		left:70px;
	}
	.popuptable2{
		margin-left:40px;
	}
	.popuptable-curtain{
		left:70px;
	}
}
@media only screen and (max-width: 480px) {
	.popupwin{
		width:90%;
	}
	.popuptable{
		left:70px;
	}
	.popuptable2{
		margin-left:40px;
	}
	.popuptable-curtain{
		left:70px;
	}
}
@media only screen and (max-width: 320px) {
	.popupwin{
		width:85%;
	}
	.popuptable{
		left:70px;
	}
	.popuptable2{
		margin-left:40px;
	}
	.popuptable-curtain{
		left:70px;
	}
}