html, body { width:100%;height:100%; margin:0; padding:0;}
body {
	box-sizing:border-box;
	/*border:#EFBC73 15px solid;*/	
	background:#fef0d3;
}
center{
	position:absolute;
	width:400px;
	height:400px;
	left:50%;
	top:50%;
	margin-left:-200px;
	margin-top:-200px;
	overflow:hidden;
}
center h1{
	font-family: 'Lobster', cursive;
	font-size:106px;	
	color:#DE646A;
}
center p {
	font-family: 'Lobster Two', cursive;
	font-size:20px;
	color:#88BC98;
}	

nav ul{
	position:absolute;
	right:20px;
	top:35px;	
}

nav ul li {
	display:inline-block;
	padding:0 15px;
	font-family: 'Cantarell', sans-serif;
	cursor:pointer;
	padding-bottom:5px;
}

nav ul li:hover {border-bottom:4px #000 solid;	}

nav .active {
	border-bottom:4px #000 solid;	
}

nav>ul>li>a { text-decoration:none; color:#000;}


nav>ul>li>a:hover,nav>li>a:focus{color:#000; text-decoration:none;}




.l1,.l2,.l3,.l4 {
  position: absolute;
 /* background: transparent;*/
  width: 0px;
  height: 0px;
  animation-duration:.4s;
  animation-duration: .4s;
  animation-iteration-count:1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}


.l1 {
  left: 0;
  bottom: 0;
  height: 100%;
  width: 15px;
  
  animation-name: l1;
  animation-delay: 0s;
  
  -webkit-animation-name: l1;
  -webkit-animation-delay: 0s;
}

.l2 {
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  
  animation-name: l2;
  animation-delay: .4s;
  
  -webkit-animation-name: l2;
  -webkit-animation-delay: .4s;
}

.l3 {
  right: 0;
  top: 0;
  height: 100%;
  width: 15px;
    
  animation-name: l3;
  animation-delay: .8s;
  
  -webkit-animation-name: l3;
  -webkit-animation-delay: .8s;
}

.l4 {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 15px;
  
  animation-name: l4;
  animation-delay: 1.2s;
  
  -webkit-animation-name: l4;
  -webkit-animation-delay: 1.2s;
}

@keyframes l1 {
  0%    { height: 0; background: #fce7b0; }
  100%  { height: 100%; background: #fce7b0; }
}

@keyframes l2 {
  0%    { width: 0; background: #fce7b0; }
  100%  { width: 100%; background: #fce7b0; }
}

@keyframes l3 {
  0%    { height: 0; background: #fce7b0; }
  100%  { height:100%; background: #fce7b0; }
}

@keyframes l4 {
  0%    { width: 0; background: #fce7b0; }
  100%  { width: 100%; background: #fce7b0; }
}

@-webkit-keyframes l1 {
  0%    { height: 0; background: #fce7b0; }
  100%  { height: 100%; background: #fce7b0; }
}

@-webkit-keyframes l2 {
  0%    { width: 0; background: #fce7b0; }
  100%  { width: 100%; background: #fce7b0; }
}

@-webkit-keyframes l3 {
  0%    { height: 0; background: #fce7b0; }
  100%  { height:100%; background: #fce7b0; }
}

@-webkit-keyframes l4 {
  0%    { width: 0; background: #fce7b0; }
  100%  { width: 100%; background: #fce7b0; }
}

.w1,.w2,.w3,.w4 {
  position: absolute;
  z-index:999;
  width: 0px;
  height: 0px;
  animation-duration:.4s;
  animation-duration: .4s;
  animation-iteration-count:1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.w1 {
  left: 0;
  bottom: 0;
  height: 0;
  width: 15px;
  z-index:999;
  position:fixed;
}
.w1ani {
  background:white;
  animation-name: w1;
  animation-delay: 0s;
  
  -webkit-animation-name: w1;
  -webkit-animation-delay: 0s;
}

.w2 {
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  z-index:999;
  position:fixed;
}
.w2ani {
  animation-name: w2;
  animation-delay: .4s;
  
  -webkit-animation-name: w2;
  -webkit-animation-delay: .4s;	
}

.w3 {
  right: 0;
  top: 0;
  height: 100%;
  width: 15px;
  z-index:999;
  position:fixed;
}
.w3ani {
  animation-name: w3;
  animation-delay: .8s;
  
  -webkit-animation-name: w3;
  -webkit-animation-delay: .8s;	
}

.w4 {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 15px;
  z-index:999;
  position:fixed;
}

.w4ani {
  animation-name: w4;
  animation-delay: 1.2s;
  
  -webkit-animation-name: w4;
  -webkit-animation-delay: 1.2s;
}

@keyframes w1 {
  0%    { height: 0; background: #FFFFFF; }
  100%  { height: 100%; background: #FFFFFF; }
}

@keyframes w2 {
  0%    { width: 0; background: #FFFFFF; }
  100%  { width: 100%; background: #FFFFFF; }
}

@keyframes w3 {
  0%    { height: 0; background: #FFFFFF; }
  100%  { height:100%; background: #FFFFFF; }
}

@keyframes w4 {
  0%    { width: 0; background: #FFFFFF; }
  100%  { width: 100%; background: #FFFFFF; }
}

@-webkit-keyframes w1 {
  0%    { height: 0; background: #FFFFFF; }
  100%  { height: 100%; background: #FFFFFF; }
}

@-webkit-keyframes w2 {
  0%    { width: 0; background: #FFFFFF; }
  100%  { width: 100%; background: #FFFFFF; }
}

@-webkit-keyframes w3 {
  0%    { height: 0; background: #FFFFFF; }
  100%  { height:100%; background: #FFFFFF; }
}

@-webkit-keyframes w4 {
  0%    { width: 0; background: #FFFFFF; }
  100%  { width: 100%; background: #FFFFFF; }
}

#svg {
	width:48px;
	height:49px;
	position:absolute;
	z-index:20;
	display:none;
}

#logo {
	position:absolute;
	left:50%;
	top:250%;
	margin-left:-200px;
	margin-top:-200px;
	width:auto;
	min-width:400px;
	height:400px;
	background:url(../images/logo1.svg) 0 0;
	background-size:100% auto;
}

#blackC {
	width:10px;
	height:10px;
	position:relative;
	display:none;
	background:black;
	border-radius:200px;
}

#msg-box {
	width:70%;
	height:50%;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-35%;
	margin-top:-15%;
	display:none;
}
#jaminpie-msgbox-close {
	width:100px;
	height:100px;
	position:absolute;
	z-index:999;
	right:0;
	top:0;
}

#jaminpie-msgbox-close:hover {
	curson:pointer;	
}

.x::before, .x::after {
  content: "";
  border-style: solid;
  border-color: #ccc;
  border-width: 0px 3px 3px 0px;
  height: 20px;  width: 20px;
  position: absolute; 
    top: -5px; 
    left: 10px;
  transform: rotate(45deg);
  -webkit-transform::rotate(45deg); 
}
.x::before {
  border-width: 0px 3px 3px 0px;
  top: -5px;
}
.x::after {
  border-width: 3px 0px 0px 3px;
  top: 20px;
}