/* CSS Document for Screens */


@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i&display=swap');


body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0; }
body {
}


#page { max-width: 1200px; margin: 0 auto; position: relative; }

/* Text */

h1 { margin: 0 0 1em 0; font-size: 2em; font-weight: 700; line-height: 1.2em}
h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
h4 { margin: 0 0 .5em 0; font-size: 1em; font-weight: 700; }

p { margin: 0 1em 0; }


a { color: #FFFFFF; }
a visited { color: #65b1ff; }

a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 4px; transition: background .5s; }
a.btn:hover { background-color: rgba(0,0,0,0.3); }


/* Header */

header { height: 430px; background: url("../images/rbanner1_1200.jpg") no-repeat center bottom; position: relative; }
header a.logo { 
				z-index: 1;
				position: absolute;
				display: block; width: 200px; height: 110px;
				background: url(../images/rlogo1.svg) no-repeat 0 0; background-size: contain;
				top: 15px; left: 40px;}
				
header a.logo span { display: none; }
				
header a.btn_f {
				z-index: 1;
				position: relative;
				display: block; width: 30px; height: 30px;
				float: right;
				margin: 30px 10px 20px 20px;
				background: url(../images/facelogo.svg) no-repeat;
				 }
header a.btn_f span { display: none; }				





header div.hero { position: absolute; width: 25%; top: 130px; left: 55%;}

header div.hero h1 { line-height: 1em; margin: 0px 0px 30px 0px; color: #fff; }


header div.hero2 { position: absolute; width: 15%; top: 360px; left: 83%;}

header div.hero2 h1 { line-height: 1.2em; margin: 0px 0px 30px 0px; color: #FFFFFF; }

{
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 300%;
  height: 300%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

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

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

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

}

/* Section - All */

section { padding: 0 30px; }
section::after { content:''; display: block; clear: both; }

/* Section - Main */

section.main { margin-top: 20px; margin-bottom: 30px; padding: 0; }
section.main aside { width: 33%; float: left; text-align: center; }

section.main .content { margin:15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px; }

section.main aside h3 a { color: #000; text-decoration: none; } 
section.main aside h3 a:hover { color: #000; text-decoration: underline; }

section.main aside .content.otletek { background-image: url(../images/icon_star.svg); }
section.main aside .content.hol { background-image: url(../images/icon_marker.svg); }
section.main aside .content.uzlet { background-image: url(../images/icon_gear.svg); }

/*section - .aktualis*/

section.aktualis { background-color: #949392; padding-top: 30px; padding-bottom: 30px; padding-left: 30px; color: #FFFFFF;}

section.aktualis.archive { float: left; padding: 0 30px 0 30px; no-repeat 0 5px; min-height: 220px; }

/* Section - Atmosphere */

section.atmosphere { background-color: #cc6633; padding-top: 30px; padding-bottom: 30px; padding-left: 30px; color: #fff;}

section.atmosphere .archive { float: left; padding: 0px 30px 0px 515px; background: url(../images/Regisvsportcs1.jpg) no-repeat 0 5px; min-height: 220px; }

/*section - .vasarrend*/

section.vasarrend { background-color: #949392; padding-top: 30px; padding-bottom: 30px;  padding-left: 30px; color: #FFFFFF;}

section.vasarrend.archive { float: left; padding: 0 30px 0 30px; no-repeat 0 5px; min-height: 220px; }

/*Section - How-to*/

section.how-to { background-color: #eee9d9; position: relative; }

section.how-to aside { width: 30%; float: left; padding-left: 30px; margin-right: 30px; }

section.how-to aside .content { padding: 30px 30px 20px 0px; }

section.how-to aside .content img { display: block; margin-bottom: 15px; width: 70%; }

section.how-to aside .content h4 { margin-bottom: 0; }
section.how-to aside .content p { margin-bottom: 0.5em; }
section.how-to aside .content a { display: inline-block; color: #cc6633; font-weight: 700; }

section.how-to blockquote {
	margin: 0; width: 32%;
	color: #444444;
	background-color: #fff;
	position: absolute; bottom: 0; right: 4%; 
}

section.how-to blockquote p { margin: 30px 30px 20px 50px; }

section.how-to blockquote p.quote { font-style: italic font-size: 1.2em; } 

section.how-to blockquote p.crerdit {
				color: #777;
				font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em
				position: relative;
}

section.how-to blockquote::before { 
				content:'\201c'; color: #d2bd65;
				position: absolute;
				top: 10px; left: 8px;
				font-size: 5em;
				font-family: serif;
}

section.how-to blockquote p.quote::after { content: '\201d'; font-family: serif; }
section.how-to blockquote p .credit::before { content: '\2014'; position: absolute; top: -1px; left 0; }

/* Navigation */

nav {
				position: absolute;
				top: 0px; left: 0px;
				padding: 50px 0 0 0;
				width: 100%;
				background-color: rgba(0,0,0,.3);
}

nav::after { content:''; display: block; clear: both; }

nav ul { list-style: none; margin: 0; padding: 0px;}

nav ul li:hover { background-color: #0e0e7b; }
nav ul li:hover > ul { display: block; }

nav ul ul { position: absolute; top: 100%; background-color: #0e0e7b; display: none;}

nav ul ul li { position: relative; }

nav ul ul ul { left: 100% top: 0px; }

nav ul li a { 
				display: inline-block;
				color:#fff;
				padding: 10px 20px;
				text-decoration: none;
				width: 125px;
				position: relative;
}


nav ul li a:visited { color: #fff; }

nav ul li a:hover { background-color: #1e1eee; }

nav ul ul { position: absolute; top: 100%; background-color: #0e0e7b; display: none; }


/* Top - level */

nav > ul { padding-left: 300px; }

nav > ul > li { float: left; } 

nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px; }


			  
nav a[aria-haspopup="true"]::after {
			content:'';
			display: block; width: 0px; height: 0 px;
			position: absolute;
			top: 16px; right: 15px;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			border-left: 4px solid #fff;
		}

nav > ul > li > a[aria-haspopup="true"]
			::after {
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
			border-top: 4px solid #fff;
			left: 20px; right: auto;
			bottom: 6px; top: auto;
		}
		



/* Footer */

footer { font-size: 0.8em; margin: 40px; color: #999; }

footer .content { display: inline; }

footer a { margin-left: 30px; margin-bottom: 50px; color: #777; }
footer a:visited { color: #777; }
footer a:hover { color: #000; }

/* Media - Queries */

@media screen and (max-width: 1000px)   {
			h1 { font-size: 2em; }
			
			/* Header */
			header div.hero { left: 56%;}
			header div.hero h1 { margin-bottom: 20px; }
	
			header div.hero2 { position: absolute; width: 15%; top: 360px; left: 83%;}
			header div.hero2 h1 { line-height: 1em; margin: 0px 0px 30px 0px; color: #020271; }
			
			/* Section - Atmosphere */
			section.atmosphere .archive { padding-left: 400px; background-size: 375px auto; }
	
	
}

@media screen and (max-width: 825px)   {
			h1 { font-size: 1.5em; }
			
			/* Header */
			header { height: 300px; background-image: url(../images/rbanner1_825.jpg); }
			header div.hero { top: 100px; left: 43%; }
			header div.hero h1 { top: 120px; left: 48%; }
	
			header div.hero2 { position: absolute; width: 15%; top: 240px; left: 80%;}
			header div.hero2 h1 { line-height: 1em; margin: 0px 0px 30px 0px; color: #020271; }
			
			/* Section - Atmosphere */
			section.atmosphere article { padding-left: 425px; background-size: 300px auto; }
			
			/* Section - How to */
			section.how-to blockquote p.quote { font-size: .8em; line-height: 1.2em; }
			section.how-to blockquote credit { font-size: .6em; }
}
	
@media screen and (max-width: 760px)   {
			
			h1 { font-size: 1.2em; } 
			h2 { font-size: 1.4em; }
			h3 { font-size: 1.1em; }	
			a.btn { font-size: 1em; }	
			
			/* Header */
			header a.logo { width: 145px; height: 60px; }
			header div.hero { top: 150px; left: 48%; }
	
			header div.hero2 { position: absolute; width: 15%; top: 240px; left: 80%;}
			header div.hero2 h1 { line-height: 1em; margin: 0px 0px 30px 0px; color: #020271; }
			
			/* Section - Main */
			section.main { margin-top: 10px; margin-bottom: 10px; }
			section.main aside div.content { background-size: 55px 55px; padding top 60px; }
			
			/* Section - How to */
			section.how-to aside div.content img { width: 85%; }
			
			
			/* Navigation */
			nav { padding-top: 80px; }
			nav > ul { padding-left: 10px; }
}

@media screen and (max-width: 625px)  {
	
	
			h1 ( font-size: 1em; )
			h3 ( margin-bottom: 0px; )
			a.btn ( font-size: .9em; )
			
			/* Header */
			header { height: 625px; background-image: url(../images/rbanner1_625.jpg); background-position: left top; }
			header a.logo { width: 100%; height: 66px;
											left: 0px; top: 0px;
											background-color: rgba(0,0,0,.65);
											background-size: 112px 46px;
											background-position: 20px center; 
											}
			header div.hero { width: 300px; top: 80px; left: 130px; }
			header div.hero h1 { margin-bottom: 10px; }
	
			header div.hero2 { position: absolute; width: 15%; top: 250px; left: 85%;}
			header div.hero2 h1 { line-height: 1em; margin: 0px 0px 30px 0px; color: #020271; }
			
			/* Section - Main */
			section.main aside { width: 100%; float: none; text-align: left; }
			section.main aside div.content { 
											margin: 8px 20px 8px 0;
											padding: 5px 0px 10px 85px;
											background-size: 50px 50px; 
											background-position: 20px 5px; 
											}
						
			/* Section - Atmosphere */
			section.atmosphere .archive { padding: 160px 20px 0px 0px; background-size: 300px auto; min-height: initial; }
			
			/* Section - How to */
			
			section.how-to aside { width: 100%; float: none; margin: 0; position: relative; }
			
			section.how-to aside div.content { padding: 20px; 20px; 20px; 150px; }
			
			section.how-to aside div.content p { font-size: .9em; }
			
			section.how-to aside div.content div.content img { 
												display: inline-block;
												width: 125px;
												position: absolute;
												top: 30px; left: 0px; 
												}
												
			section.how-to blockquote { 
												margin: 0 20px 0 40px;
												width: 90% 
												padding: 1px 0px 20px 0px; 
												position: relative; 
												}
												
			section.how-to blockquote  p.credit { margin-bottom: 0; }
			
			/* Navigation */
			
			nav { position: static; width: auto; padding: 20px 15px; background-color: #666   }
			
			nav ul, 
			nav ul ul,
			nav ul ul ul { display: block; position:static; }
			
			nav > ul { padding: 0; }
			
			nav > ul > li { float; none; margin-top: 25px; }
		
			nav ul li:hover { background: none; }
			
			nav ul li a { 
				width: auto;
				display: block;
				margin: 8px 10px;
				padding: 8px 15px;
				border: 1px solid rgba (255,255,255,.25);
				}
				
			nav ul li a:hover { background-color: rgba (255,255,255,.2); }	

			nav ul ul { background: none; }
			
			nav ul ul li a { margin-left: 30px; }
			nav ul ul ul li a { margin-left: 60px; }
			
			nav a [aria-haspopup= "true"]::after { display: none; }
			
			/* Footer */
			
			footer div.content { display: block; margin-top: 15px; }
			footer div.content a { margin: 0 20px 0 0; }
			
}

@media screen and ( max-width : 425px ){
	
	/* Header */
			header { height: 113px; background-image: url(../images/rbanner1_425.jpg); }
			
			header a.logo { height: 36px; background: rgba(0,0,0,.65); url(../images/rlogo_small.svg); no-repeat; center; center; }
			
			header div.hero { width: 100%; top: 46px; left: 0px; text-align: center; }
			
			header div.hero h1 { font-size: 0.7em; margin-bottom: 10px; }
			
			header div.hero2 { position: absolute; width: 15%; top: 100px; left: 83%;}

			header div.hero a.btn { padding 2px 10px; font-size: .8em; }
			
			header div.hero a.btn span { display: none; }
			
	/* Section How-to */
	
			section.how-to aside div.content { padding: 140px 20px 20px 0px; }
 			
			section.how-to aside div.content img { width: auto; height: 100px; top: 30px; }
			
			section.how-to blockquote { margin: 10px 40px 0 20px; }
			
			
	/* Footer */
	
	footer::after { content:''; display: block; clear:both; }
	
	footer div.content a { 
							display: inline-block; margin: 0 0 10px 0; 
							float: left; 
							clear: both; }

}