#kontakt		{	position: fixed; z-index: 6; top: 0; }
	
		a.soko		{	position: relative; z-index: 2; display: block; top: 0; right: 0; height: 50px; padding: 30px 1rem 0; 
						background-image: url('../img/svg/minus-white.svg'); background-repeat: no-repeat; background-position: right 1.00em center; background-size: 0.80rem; }
	
	
		form		{	position: absolute; top: 80px; max-height: 800px; padding: 1.00rem; overflow: auto; -webkit-overflow-scrolling: touch;}
		
					form > *	{	margin-bottom: 1.00em; font-size: 0.80rem; }
			
					input, textarea		{	width: calc(100% - 2.00em - 2px); border-width: 1px; margin-bottom: 0.30rem; padding: 0.60em 1.00rem; font-size: 0.90rem; color: #000; }
					button[type=submit] {	width: 100%; margin-top: 1.00rem; margin-bottom: 0; border-width: 0; padding: 0.60rem 1.00rem; cursor: pointer; }
						
							::-moz-placeholder 			{	font-size: 0.90rem; font-family: 'sofi-101'; color:#999; font-weight: 100; }
							::-webkit-input-placeholder {	font-size: 0.90rem; font-family: 'sofi-101'; color:#999; font-weight: 100; }
							:-ms-input-placeholder 		{	font-size: 0.90rem; font-family: 'sofi-101'; color:#999; font-weight: 100; }
					
		#kontakt.form-off			{	box-shadow: 0 0 0 0 #000; }
		#kontakt.form-off > form	{	overflow: hidden; }
		#kontakt.form-off a.soko	{	background-image: url('../img/svg/plus-white.svg'); }

		#kontakt, #kontakt > form	{	-webkit-transition: 	all 600ms ease-in-out; 
										-moz-transition: 		all 600ms ease-in-out; 
										-o-transition: 			all 600ms ease-in-out; 
										-ms-transition: 		all 600ms ease-in-out; 
										transition: 			all 600ms ease-in-out; }


/* ======================
		Phone
========================= */

@media only screen and (min-width : 0) and (max-width : 600px)
{						
	@media only screen and (orientation : portrait)
	{		
		#kontakt					{	width: 100%; height: 100%; right: 0; }
		#kontakt.form-off 			{	right: -100%; }
	}
	@media only screen and (orientation : landscape)
	{		
		#kontakt					{	width: 70%; height: 100%; right: 0; }
		#kontakt.form-off 			{	right: -70%; }
	}

	#kontakt					{	width: 100%; height: 100%; right: 0; }
	#kontakt.form-off 			{	right: -100%; }
}

/* ======================
		PAD
========================= */

@media only screen and (min-width : 601px) and (max-width : 1024px)
{			
	#kontakt					{	width: 50%; height: 100%; right: 0; }
	#kontakt.form-off 			{	right: -50%; }	
}

/* ======================
		DESKTOP
========================= */

@media only screen and (min-width : 1025px)
{		
		#kontakt					{	width: 320px; height: auto; right: 0; }
		#kontakt.form-off > form	{	top: -600px; }
}
/* ======================
		THE END
========================= */