@font-face
{
    font-family:Avalon Medium;
    src: local(Avalon Medium), url("../fonts/Avalon Medium.ttf") format('opentype');
}
@font-face{
	font-family:ROSART_;
	src:local(ROSART_),url("../fonts/ROSART_.ttf") format('opentype');
}
@font-face{
	font-family:maria;
	src:local(maria),url("../fonts/maria.ttf") format('opentype');
}
@font-face{
	font-family:Adver;
	src:local(Adver),url("../fonts/Adver.ttf") format('opentype');
}
@font-face{
	font-family:kiss;
	src:local(Adver),url("../fonts/kiss.ttf") format('opentype');
}
@font-face{
	font-family:kiss;
	src:local(Adver),url("../fonts/kiss.woff");
}
h1, h2, h3, h4, h5, h6,
div.invitation div.text
{ 
	font-family: Avalon Medium; 
	letter-spacing: 2px;
	font-size:50px;
}
h1{position:relative;
padding-top:15px;
}
.ui-widget
{
	
	color: #fff;
	text-shadow:0 0 1px #ffb584,0px 0px 15px black, 1px 1px 5px black, 0 0 20px #ff2d95, 0 0 20px yellow, 0 0 40px black;
	letter-spacing: 2px;
	font-size:20px ;
	color:white;
	font-family:MisoRegular;
	/*font-family: 'Lobster', cursive;*/
}

.puzzle
{
	background: url("../images/wedding1.jpg");
	background-size: 100% 100%;
	opacity: 0.35;
	filter: Alpha(opacity=35);
}

.pieces
{
	position: relative;
	top: -100%;
	background-color: rgba(255, 255, 255, 0.6);
}

.puzzle, .pieces
{
	width: 82.7%;
    height: 100.5%;
    margin-left: 8.7%; 
}

.piece
{
	width: calc(25% - 2px);
	height: calc(33.33% - 2px);
	position: absolute;
	background: url("../images/wedding1.jpg");
	background-size: 400% 300%;
	border: 1px solid pink;
	z-index: 10;
}

.matched
{
	width: 25%;
	height: 33.33%;
	border: none;
	z-index: 5;
}

.map
{
	position: relative;
}

.map img
{
	width: 100%;
}

.map .tools
{
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
}

.map .hiddenObject
{
	position: absolute;
	background: #FFFFFF;
	cursor: pointer;
	opacity: 0;
	filter: Alpha(opacity=0);
}

.map .fairy
{
	height: 5%;
	width: 3%;
	top: 31%;
	left: 41%;
}

.map .bread
{
	position: absolute;
	width: 2.5%;
	height: 2.5%;
	top: 93.1%;
	left: 90.6%;
}

.map .bush
{
	position: absolute;
	top: 88.8%;
	left: 76%;
	height: 10.64%;
	width: 19.56%;
}

.map .breadClick
{
	width: 2%;
	height: 2.3%;
	top: 93.1%;
	left: 91%;
}

.map .swans
{
	width: 4%;
	height: 4.5%;
	top: 85%;
	left: 44.5%;
}

.map .bigSwan
{
	width: 5%;
	height: 5%;
	top: 94%;
	left: 41.5%;
}

.map .littleSwan
{
	width: 3%;
	height: 3%;
	top: 91%;
	left: 51%;
}

.map .invitation
{
	display: none;
	position: absolute;
	left: 25%;
	top: 0;
}

div.invitation div.scrollBody
{
	background: url("../images/scroll.png");
	width: 470px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

div.invitation img.bottom
{
	z-index: 10;
}
div.invitation img.butterfly
{
	width: auto;
	position: absolute;
	bottom: 0;
	left: 40%;
	z-index: 2000;
}

div.invitation img.sivo
{
	position: relative;
	top: 100px;
	width: auto;
}

div.invitation div.text
{
	font-size: 18px;
	line-height: 18px;
	position: absolute;
	top: 330px;
	left: 40px;
	width: 390px;
}
div.menu
{
	line-height: 65px;
}

div.menu a
{
	display: inline-block;
    background: transparent none repeat scroll 0 0;
    color: #ffb584;
    font-weight: bold;
	font-family:'kiss',Arial;
	text-transform: uppercase;
	padding: 0.4em 1em;
	letter-spacing: 2px;
    text-shadow:0 0 1px #ffb584, 0 0 5px black, 5px 5px 20px black, 0 0 2px #ff2d95, 0 0 2px yellow, 0 0 4px black;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none !important;
	line-height: 14px;
	vertical-align: middle;
}
div.user
{
   color: white;
   
   font-size:20px;
   font-weight:bolder;
   font-family:Arial;
   position:absolute;
   background-image: url("theme/images/redflower.jpg");
   background-size:cover;
   height:70px;
   width:200px;
   background-repeat:no-repeat;
   background-position:absolute;
   margin:auto;
   border-radius: 0px 5px 50px 0px;
    
   
   
}
div.background
{
	background:url("theme/images/ramka4.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:63%;
	height:510px;
	margin: 10px 50px;
	padding:75px 0;	
}
.but_menu
{
	display:none;
}
@media only screen and (max-width: 1130px)
{div.kontakt.show p {
    font-size: 12px;

}
@media only screen and (max-width: 1044px)
{
	div.menu a 
	{
	    padding: 0.4em 0.5em;
	}
	img.card
	{
		width:75%;
	}
}
@media only screen and (max-width: 900px)
{
	.menu div
	{
		display:none;
	}
	.but_menu
	{
		display:block;
		margin-left: auto;
		margin-right: auto;
	}
	.menu div.show
	{
		display:block;
	}
	.down.show
	{
		width:100%;
	}
	.down.show a
	{
		display:block;
		width:100%;
		z-index:3000;
		background:white;
		-webkit-box-shadow: inset 1px -4px 20px -1px rgba(255,249,224,1);
		-moz-box-shadow: inset 1px -4px 20px -1px rgba(255,249,224,1);
		box-shadow: inset 1px -4px 20px -1px rgba(255,249,224,1);
	}
	div.menu a 
	{
		padding: 4% 5.55%;
	}
	div.background
	{
		height:500px;
		width:98%;
		padding: 73px 0;
		margin:auto;
	}
	div.kontakt
	{
		top:0 !important;
		height:66px !important;
		cursor:pointer;
		position:absolute !important;
	}
	.kontaktadd
	{
		display:none;
	}
	div.kontakt.show
	{
		height:240px !important;
		z-index:100;
	}
	.kontakt.show .kontaktadd
	{
		display:block;
	}
}
@media only screen and (max-width: 680px)
{
	div.background
	{
		height: 350px;
		padding: 50px 0;
	}	
}
@media only screen and (max-width: 580px)
{
	div.user
	{
		background-image:none;
		color:#a13939;
		font-size:14px;
		top: 10px;
		height: auto;
	}
	div.background
	{
		height:370px;
		width:auto;
		padding: 51px 0;
	}
	.kontakt
	{
		width:180px !important;
	}
	.but_menu
	{
		margin-left:80px;
	}
}
@media only screen and (max-width: 480px)
{
	div.user
	{
		display:none;
	}
	.menu
	{
		border-radius:0;
		width:100%;
	}
	img.card
	{
		width:95%;
	}
	div.menu a 
	{
    padding: 4% 0;
	}
	.down.show a
	{
		height:45px;
	}
	div.background
	{
		height:340px;
		padding: 50px 0;
	}
}
@media only screen and (max-width: 390px)
{
	div.background
	{
		height:220px;
		padding: 32px 0;
	}
	.but_menu
	{
		margin-left:0;
	}
}
@media only screen and (max-width: 330px)
{
	div.background
	{
		height:190px;
		padding: 28px 0;
	}
}