@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;700&family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap');


*    { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 22px; }
body		  		    	{ font-family: 'Work Sans', sans-serif; }
nav, h1, h2, h3, h4, footer { font-family: "Roboto", sans-serif; }
h1, h2, h3           	    { text-align: center; }

nav    { background-color: #f8f8f8; height: 5rem; padding: 1rem 0; }
.flex  { display: inline-flex; justify-content: flex-start; flex-direction: row; margin-left: 3rem;}
.logo  { height: 3rem; }   
.navi  { margin: auto 0 auto 2rem; }                        
nav a  { font-size: 1.2rem; color: red; text-shadow: 1px 1px white; }


header    { background-color: #f8f8f8; }
.bg       { height: 500px; background: url('futesirendszermosas.jpg'); background-repeat: no-repeat;  background-size: cover; background-position: center; }
h1 { font-size: 4rem; padding-top: 300px; color: red; text-shadow: 2px 2px white;}



.fc           { display: flex; flex-flow: row wrap; }
.wrapper      { max-width: 1200px; margin: 0 auto; }
.kek-hatter   { background: #f8f8f8; width: 100%; padding: 1rem 1rem 4rem 1rem; }
.feher-hatter { background: #ffffff; width: 100%; padding: 0 7rem 2rem 7rem; }

img { width: 100% }

a  { text-decoration: none; }
ul { margin: 1.5rem 0 1.5rem 2rem }
li { margin: .5rem 0 }
h2     { font-size: 2rem; }
h3     { font-size: 1.3rem; } 
h2, h3 { padding: 3rem 0 1rem 0; color: red; }
h4	   { font-size: 1.2rem; text-align: left; padding: .5rem; }





.bal-szoveg  { flex: 1; padding: 1.2rem;  }
.jobb-kep    { flex-basis: 55%; line-height: 0; padding: 0; align-self: flex-end; }
.bal-kep     { flex: 1; padding: 0; }
.jobb-szoveg { flex-basis: 45%;  padding: 0; padding: 1.2rem;}
.box1 { text-align: center; padding: 0 0 .4rem 0; }
.box2 { text-align: left; padding: .4rem auto; }


.logo-box   { display: flex; text-align: center; }
.fer-rot    { margin: 0 auto 30px auto; flex: 50%; max-width: 200px;}




 
/* 3 grid container */
.grid-container {
  padding: 0 1rem;
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left left middle middle right right' 
} 

.header  { grid-area: header; padding: 0 30px; text-align: center; font-size: 35px; }
.left    { grid-area: left; }
.middle  { grid-area: middle; padding: 0 40px; }
.right   { grid-area: right; }
.justify { text-align: justify; }
.kicsi   { padding: 0 0 20px 0; width: 100%}

footer    { background: #f8f8f8; padding: 0 0 3rem 5rem; text-align: left;  line-height: 3; font-size: 1.2rem; }
footer a  { color: black; } 
footer h3 { text-align: left;  }

.ceg, .email, .telefon, .cim { background-size: 2rem; background-repeat: no-repeat; padding: .3rem 0 .3rem 3rem; }
.ceg      { background-image: url('ceg.jpg');  }
.email    { background-image: url('email.jpg');  }
.telefon  { background-image: url('telefon.jpg');  }
.cim	  { background-image: url('budapest.jpg');  }



@media(max-width:1000px) {
	.flex  { margin: 10px; }
	nav a  { font-size: 1rem; }
	h1     { font-size: 3.2rem; }
	
	
	.bg { height: 600px; background-size: cover; }
	
	
	h2     { font-size: 1.5rem; }
	.justify { text-align: left; }
	.feher-hatter { padding: 0 1rem 2rem 1rem; }
	.kek-hatter   { padding: 0 1rem 2rem 1rem; }
	
	.jobb-kep, .bal-kep, .jobb-szoveg   { flex-basis: 100%; }
	.bal-szoveg  { padding: 3rem 1rem;  }
	
	
	
	
	ul { margin: 1.5rem 0 0 2rem }
	
	
	footer     {  padding: 0 0 3rem 2rem; line-height: 3; font-size: 1.3rem; }
	


  /* 3 grid container */
  .grid-container  {
	  padding: 0 1rem 1rem 1rem;
    grid-template-areas: 
      'header'  
      'left' 
      'middle' 
      'right' 
  }
  .middle { padding: 0; }
}


@media(max-width:800px) {
	.logo  { height: 45px; }   
	.flex { margin-left: 0;}
	.navi  { margin: auto 0 auto 15px; }    
	.bg { height: 400px; }
	h1 { font-size: 2.5rem; padding-top: 250px; }
	
	.feher-hatter { padding: 0 .5rem 2rem .5rem; }
	ul { margin: 1.5rem 0 0 1rem }
	
}

@media(max-width:600px) {
	nav { height: 3rem; }
	.logo  { height: 0; }   
	
	.navi  { margin: auto 0 auto 10px; } 
	h1 { font-size: 2rem;  }
	
	h2     { font-size: 1.2rem; }
	.fer-rot    { max-width: 150px;}
	.grid-container  { padding: 0 0 20px 0; }
	footer                 { padding: 0 0 3rem 1rem; }
	.ceg, .email, .telefon, .cim { background-size: 1.5rem; padding: .3rem 0 .3rem 2.2rem; font-size: 1rem;}
}

@media(max-width:500px) {
	nav a { font-size: .9rem }
	
	.navi  { margin: auto 0 auto .5rem; }   
	.flex { margin-left: 0;}
	header h1 { font-size: 1.5rem; padding-top: 250px; }
	
	h2     { font-size: 1.1rem; }
	.fer-rot    { max-width: 120px;}
	footer                 { padding: 0 0 3rem .5rem; }
	.ceg, .email, .telefon, .cim { background-size: 1.3rem; padding: .3rem 0 .3rem 2rem; }
}