.menu {
    position: relative;
    top: 92px;
}
.boxStyle {
   padding: 10px;
   flex: 65%;
   display: inline-block;
   text-align: justify;
   font-family: Verdana;
   background-color: #e2e6ef;
   background-image: linear-gradient(#e2e6ef, #8998bf);
}
.moKapcsolodoKep {
   width:45%;
   margin: 0 8px 3px 0;
   border: 4px solid white;
   max-width: 880px; 
   box-shadow: 0px 2px 4px #333333;
}
.moKapcsolodo {
   background-color: #798bb9; 
   font-weight: bold; 
   padding: 5px 10px; 
   color: #fbfafd;
}
.imgStyle {
   margin: 0 8px 0 0;
   border: 10px solid white;
}
.cim {
   text-shadow: 2px 2px 4px #ffffff;
   font-weight: bold;
   text-align: left;
}
.cimLink {
   text-decoration: none; 
   color: #07678c;
   font-size: 1.1em; 
}
.cimKep {
   max-width: 100%;
   box-shadow: 0px 2px 4px #333333;
   width: 100%; 
   height: auto; 
   max-width: -webkit-fill-available;
   border: 0;
}

.tovabb_gomb {
    background-color: #542640;
    color: #f0faff;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 8px;
    margin: 4px 10px -5px 10px;
    float: right;
}
.tovabb_sarok {
    background-color: #730a4b6b;
    color: #f0faff;
    width: fit-content;
    padding: 5px 10px;
    position: absolute;
}

body {
	background-color: #730a4b;/*#aa3778;*/
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
} 
.full-content {
    background-color: #730a4b;/*#aa3778;*/
	margin: 20px;
	font-size: 1.25em;
	color: #1a2127;
}
div#heading {
    background-color: #7889b4;
    height: 215px;
    display: block;
    color: #f0faff;
    font-family: 'Poppins', sans-serif;
    background-image: url(http://www.nemzetihirhalo.hu/img21/revolvermap700x235.jpg);
}
.top-left {
    font-size: 1.7em;
    float: left;
	padding-left: 20px;
	margin: 2px	0 0 0;
  /* animation-name: example;
  animation-duration: 2s; */
}

@keyframes example {
  from { font-size: 0.1em;}
  to { font-size: 1.7em;}
}

.top-right {
    float: right;
    padding: 16px 5px 10px 5px;
}
div#email {
    width: 700px;
    background-color: #f9f9f9;
    display: block;
    margin: auto;
    box-shadow: 0px 0px 12px #333333;
	text-align: justify;
}
div#first {
    display: flex;
    background-image: url('http://www.nemzetihirhalo.hu/img21/szinpad-ezerleany_700x394.jpg');
	height:390px;
	background-repeat: no-repeat;
}
div#first-left {
    width: 50%;
    float: left;
    padding: 20px;
    background-color: #542640;
    color: #fbfafd;
    font-family: 'Pushster', cursive, sans-serif;
    font-size: 1.05em;
}
div#first-right {
    float: left;
    width: 60%;   
}
div#heading-row-1 {
    width: fit-content;
}
div#heading-row-1 {
    width: inherit;
    background-color: #798bb9;
	height: 80px;
	color: #cfdbe7;
}
span.menu {
    padding: 3px;
}
.button {
    font-family: 'Poppins', sans-serif;
    border-radius: 4px;
    background-color: #798bb9;
    padding: 8px 10px;
    width: fit-content;
	font-size: 1.0em;
}
.button-a {
	text-decoration: none;
    color: #fbfafd;
}
.button:hover {
    background-color: #6680c1;
}
span.menu:hover {
    background-color: #6680c1;
}
.fokep {
	box-shadow: 0px 2px 4px #333333;
	width: 100%;
	height: auto;
	max-width: -webkit-fill-available;
	border: 0;
}
.focim {
	background-color: #8e8e8ead;
    padding: 10px;
	position: absolute;
    font-size: 25px;
    font-weight: bold;
    font-family: Overpass-Light,Arial narrow,Arial,Sans-serif,sans-serif;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	top: auto;
    margin-top: 18px;
	width: 680px;
	text-align: left;
}
.focim2 {
	font-size: 25px;
    color: #54283f;
    font-family: Overpass-Light,Arial narrow,Arial,Sans-serif,sans-serif;
	font-weight: bold;
}
.button2 {
	width: auto;
    background-color: #542640;
}
.mail-row a {
    color: #984b77;
    text-decoration: none;
}
.mail-row a:hover {
    color: #f31a96;
}
.valaszto {
    border-radius: 20px;
    background-color: #542640;
    padding: 10px 15px;
	margin: 10px;
}
.val {
	text-decoration: none;
	color: #f6f6fa;
}
.val:hover {
	color: #f4fdac
}
.valaszto:hover {
    background-color: #6680c1;
}
.val-sor {
    margin: 15px;
    text-align: center;
}
div#footage {
    background-color: #542640;
}
#footage span {
    padding: 0 20px;
    color: #b3bdd5;
}
.kacim {
	text-decoration: none; 
	color: #07678c; 
	margin-bottom: 6px;
}
.kakep {
	background-repeat: no-repeat;
	float: left;
	border: 5px solid white;
	margin-right: 10px;
	background-position: center;
	box-shadow: 0px 2px 4px #333333;
	width: 300px;
	height: 279px;
}
.kabox {
	background-color: #e2e6ef; 
	display: inline-block; 
	padding: 10px; 
	flex: 65%;
	background-image: 
	linear-gradient(#e2e6ef, #8998bf);
	text-align: justify;
}
.kimg {
	width: 45%;
    margin: 0 8px 3px 0;
    border: 4px solid white;
    max-width: 880px;
    box-shadow: 0px 2px 4px #333333;
}
.emoti { 
	width: 20px; 
	margin: -2px; 
} 
.likea { 
	width: 31%; 
	text-align: center;  
	background: cornflowerblue; 
	padding: 5px;  
	cursor: pointer;
	float: left; 
	margin: 2px;
	color: azure;
}
a.likea {  
	color: azure; 
} 
a.likea:hover { 
	color: antiquewhite;
} 
.likebox {  
	display:none; 
	padding: 3px;
	width: fit-content;
	margin-bottom: -30px; 
	cursor: pointer; 
} 
.activebox { 
	background-color: lightgray; 
	padding: 5px; 
	display: flow-root;
} 
.likebox {
	display: none; 
	padding: 3px;
	width: fit-content;
	margin-bottom: -30px; 
	cursor: pointer; 
}

@media only screen and (max-width:600px) {  /* For tablets: */
  .focim {
	display: none;
  }
  div#email {
	width: 100%;
	margin: 0;
	box-shadow: none;
  }
  .full-content {
	margin: 0;
	background-color: #949494; 
  }
  body {
	margin: 0;
	padding:0;
	background-color: #949494; 
  }
  .top-right {
    width: 100%;
    font-size: medium;
    padding: 13px 0px 10px 10px;
    text-align: right;
  }
  .top-left {
    display: none;
  }
  div#first {
    display: none;
  }
  .heading-content {
	display: none;
  }
  .kimg {
	width: 100%;
  }

}

.likebox img {
    width: 35px;
	border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
div#sumbox {
    width: 45px;
    background: antiquewhite;
    padding: 3px;
    float: right;
    margin: 0 10px;
    padding-left: 10px;
    /*position: fixed;*/
    top: 20px;
/*    margin-left: 626px; */
    z-index: 100;
	font-size: 8pt;
	    margin-top: -22px;
}

/* slider */
.box {    
	width: 700px;
	height: 330px; 
} 
.sunrise {    
	position: absolute;  
	/* remove from flow so sunset is placed on top */    
	/*background:  url(https://photos.brighteon.com/file/brighteon-thumbnails/poster/8755c932-5fb8-4687-bfb3-ba565a682705) no-repeat;  */
	background-size: cover;  
} 
.slider {    
	/* set initial width */    
	width: 62%;    
	/* hide the content that overflows (to allow second box to show through) */   
	overflow: hidden;   
	display: inline-block;    
	/* skew container so that it has angled edge, and set up transition */   
	transform: skewX(-20deg);   
	transition: width 1.2s ease-in-out;
} .sunset {    
	/* skew back by negative of parent's skew so contents is upright */    
	transform: skewX(20deg);    
	margin-left: 76px; 
	/* give margin to push content away from left slanted edge */   
	background: url(sunset-elephant.jpg) no-repeat;   
	pointer-events: auto;    
	/* allow pointer events for the box */
} 
.slider {    
	/* give negative margin to remove gap caused by left hand skew */    
	margin-left: -76px;   
	/* hide pointer events for unseen content */   
	pointer-events: none;
} 
/* make first box bigger on hover, and smaller when hover second box */ 
.slider:hover {     
	width: 680px;
} 
.sunrise:hover + .slider {
	width: 150px;
}