@CHARSET "UTF-8";
/* © eckblick GbR  */

#bg 			{width:100%; width:100vw; height:100%; height:100vh; position:fixed; z-index:1; top:30px; padding:0; overflow:hidden; display:block; text-align:center;}
#bg img 		{display:none; position:absolute; top:0; left:0; max-width:none !important;}
#bg img.start 	{display:block;}
img#bgimg 		{position:absolute; display:block; z-index:1;}


#bg { opacity:1 !important; }


div.loginLogo {
position:fixed;
height:180px; width:180px; 
background-image:url(pic/logo-ryago.svg);
background-size:contain; 
background-repeat: no-repeat !important; 
left:4%; top:80px; 
z-index:5; }



/*////////////////////////////LOGINBOX//////////////////////////////////////*/
.loginpage  {margin:auto;display:block;width:100%;}
div.login   {height:296px; width:360px; padding-top:79px; background-image:url(pic/loginbg.svg); 
			 background-repeat: no-repeat !important; 
			 background-position: center top; position:absolute; right:-80px; top:64px; z-index:10; font-size:85%;}
			 
.login input  		{ 	-webkit-border-radius: 7px;
						border-radius: 7px;
						background: none;
						background-color: #fafafa;
						box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.35);
						-webkit-box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.35);
						width:240px;
						height:48px;
						text-align: center;
						outline: 0px;
						border:0.33px solid rgba(90,90,90,0.30);
						letter-spacing: normal;
						color: #767676; 
						font-size:133%;font-weight: 100;
						margin-top: 18px;
						margin-left: 60px;
						padding:4px 0;
						-webkit-transition: all 200ms ease-in-out;
						-moz-transition: all 200ms ease-in-out;
						-ms-transition: all 200ms ease-in-out;
						-o-transition: all 200ms ease-in-out;
						transition: all 200ms ease-in-out;
					 }


.login input:active, .login input:focus		  	{ 	
						-webkit-border-radius: 12px; border: none; outline: 0px;
						border-radius: 12px;
						background-color: #ececec;
						-webkit-box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.76);
						box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.76);
						border:0.33px solid rgba(90,90,90,0.30); }

/* #1fa4d0 */
/* #006fb7 */

.login button		  	{ 	

					-webkit-border-radius: 7px;
					border-radius: 7px;
					-webkit-box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.35);
					box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.35);

					text-align: center;
					letter-spacing: normal;

					margin-left: 60px;
					
					-webkit-transition: all 200ms ease-in-out;
					-moz-transition: all 200ms ease-in-out;
					-ms-transition: all 200ms ease-in-out;
					-o-transition: all 200ms ease-in-out;
					transition: all 200ms ease-in-out;



					margin-top: 56px;
					
					width:240px;
					height:53px;
					
					color: #cdcdcd; 
					font-size:167%;
					font-weight: 400;
					text-shadow: inset 1px 1px 0px #000000;
					
					outline: 0px;
					border: medium rgba(0,0,0,1.00) !important;
					
					background: #006fb7; }
				 
.login button:hover {
	
					cursor:pointer; color: #ffffff; 
					background: #1fa4d0; }



/*////////////////////////////////////////////////////////////////////////////////////// */
/*////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* //////   Responsive Design: Media Queries  | AUSSCHIESSLICHE VERAENDERUNGEN   /////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
/*////////////////////////////////////////////////////////////////////////////////////// */
/*////////////////////////////////////////////////////////////////////////////////////// */


@media only screen  
	and (max-width: 1440px) {
		div.login 			{right:10px; top:50px;}  }

@media only screen  
	and (max-width: 1290px) {
		div.login 			{right:10px; top:-20px;}  }
		


@media only screen
	and (max-width: 940px) {
		
		
		#page { margin-top: 0px; }
			
		header {
			
			margin-top:0px;
    width: 100%;
			box-sizing: border-box;
			padding-right: 0px;

			
			text-align: center;		
    height: 72px;
    background-image: none;
    background-color: rgba(255,255,255,1.00);
}

		
		
		div#clock {
    width: auto;
    margin-right: auto;
    margin-top: 50px;
    float: none;
    text-align: center;
    color: rgb(45,45,45);
}

		
		
		
		
		
		
		
		#bg 				{top:0px; }
		div.login 			{position:absolute; 
							 left:50%; 
							 margin-left:-180px; 
							 top:0px;}
		div.loginLogo 		{position:fixed !important;
							 top: 8px;
							 left: 0px !important;
							 height:40px; 
							 width:100%;
							 width:100vw; 
							 background-size: contain; 
							 background-position:center;	
							 background-color:rgba(255,255,255,0.00); opacity:0.5; }

		}

@media only screen
	and (max-width: 780px),
only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
		/* //////////////   Responsive Design: Smartphone //////////////// */
		
			div#bg				{ display:none !important; }	
		
			div.login 			{ top:120px; }
							 
			section#footer,.brfoo,.restaurants,
			.restcent,.restpopup,.restpopup:hover,
			.restinfo,.restaurant,
			.restaurant:hover,.footerpart,
			a.resta,a.resta:hover, 
			a.resta:active, 
			a.resta:focus {display:none !important; visibility:hidden !important;}	}