* { margin: 0; padding: 0; box-sizing: border-box }
html { font-size: 20px }
body { font-family: 'Montserrat', sans-serif; }
img { max-width: 100% }

.keret { max-width: 1100px; margin: 0 auto; }
.fc { display: flex; justify-content: space-evenly; flex-direction: column; }



header { background-image: url('klimamosas/header5.jpg'); background-size: cover; background-position: center; padding: 1rem 0 0 0; align-items: center; width: 100%; }
.logo { width: 120px; }
h1 { font-family: 'Cabin Condensed', sans-serif; font-size: 2.5rem; color: #37c5f4; text-shadow: .1rem .1rem black; text-align: center; margin-bottom: 2rem; }
h1 span { display: block; font-weight: 400; font-size: 1.1rem; color: #dcddde; text-shadow: .1rem .1rem #6d6e71; }
.head1, .head2 { width: 100%; text-align: center; }

main { padding: 50px 0; }
.content-padding { padding: 0 6px; }

h2, h3 { color: #37c5f4; font-family: 'Cabin Condensed', sans-serif; margin: 2rem 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a 	  { text-decoration: none; }
p, li { margin: 1.5rem 0; line-height: 1.7; }
.mt-300 { margin-top: 300px; }

figure     { margin: 30px auto; text-align: center; }
figcaption { text-align: center; font-size: .8rem; margin: .5rem 0 }
.w800      { width: 800px; max-width: 100%; }
.w600      { width: 600px; max-width: 100%; }
.w400      { width: 400px; max-width: 80%; }
footer { background-color: #dcddde; border-top: 5px solid #37c5f4; margin-top: 100px; }
.foo1 { margin: 50px 0 50px 80px; width: 60%; }
.foo2 { margin: 0; width: 100%; text-align: center; color: white; }
footer .fc { flex-direction: column; }
footer a { color: black; }
footer li { margin-bottom: 30px; }
.logo2 { width: 70px; }
.foo2 p { margin-top: 0; }


main a       { color: #37c5f4; display: inline-block; transition: .1s all; }
main a:hover { transform: scale(1.05); }
main ul { margin: 1.5rem 0 1.5rem 2rem }

.center { text-align: center }

.box { border: 2px solid #000000; border-radius: 70px 0px 0 70px; margin: 0 0 2rem 0 }
.box h3 { margin: 0; text-align: left; font-size: 1.3rem }
.box .kicsi { padding: 0; margin:0; font-size: .8rem; margin: 1rem 0; line-height: 1.5 }
.box .katt { text-align: center; line-height: .4  }
.box .left { flex: 1; flex-basis: 100%; padding: 1rem 1rem 0 1rem; }
.box .right { flex-basis: 100%; text-align: right; line-height: 0; align-self: stretch }
.box .right img { width: 100% }
.box { border-radius: 0px 70px 0 0px; }

.price-box { background: #37c5f4; padding: 1rem; margin: 0 0 .5rem 0; align-items: flex-start; }
.price-box .left { flex: 1 }
.price-box .right { flex-basis: 40%; text-align: right; line-height: 0 }
.price-box .right p { margin-top: 0; font-size: 1.2rem }
.price-box .right img { width: 100% }
.price-box .left p { margin-top: 0; font-size: 1.2rem }



.icon-link   { font-size: 1.2rem; display: flex; align-items: center; justify-content: center;  margin-top: 100px; }
.icon-link a { color: #000; display: block; }
.mail 		 { height: 100px; text-align: center; background: url('https://klimamosas.hu/klimamosas/kukac.jpg') center center no-repeat; }



/* =========================
   500px+
========================= */

@media (min-width: 500px) {
    header { padding: 1rem 0; }
	
	footer .fc { flex-direction: row; }
    .foo2 { margin: 100px 20px 0 0; }
}

/* =========================
   600px+
========================= */

@media (min-width: 600px) {
    header 	   { background-image: url('klimamosas/header9.jpg'); }
    header .fc { flex-direction: row; }
	h1 		   { font-size: 3rem; margin-top: 2rem; }
    .head1 	   { width: 25%; }
    .head2 	   { width: 75%; }
	
    .content-padding { padding: 0 20px; }
    
    h2 { font-size: 2rem; }
    h3 { font-size: 1.4rem; }
	
    .foo1 { margin: 50px 0 50px 100px; width: 50%; }
    .foo2 { margin: 80px 40px 0 0; width: 50%; }
}

@media (min-width: 800px) {
	.fc { flex-direction: row; }
	.box .left  { flex-basis: 55%; padding: 1rem; }
	.box .right { flex-basis: 45%; }
	.box .right img { border-radius: 0px 70px 0 0px; }
}
/* =========================
   1000px+
========================= */

@media (min-width: 1000px) {
    header        { background-image: url('klimamosas/header16.jpg'); }
    .logo 		  { width: 150px; }
    h1 	    { font-size: 4rem; }
    h1 span { font-size: 2rem; }

    .content-padding { padding: 0 50px; }
    
    h2 { font-size: 2rem; }
    h3 { font-size: 1.8rem; }
	.icon-link { font-size: 1.6rem; }
	.foo1 { margin: 50px 0 50px 150px; }
}

/* =========================
   1650px+
========================= */

@media (min-width: 1650px) {
    header { background-image: url('klimamosas/header19.jpg'); }
}