@charset "utf-8";

/*============================
VARIA
===========================*/

body { background:#fff; color:#333; }

/*============================
TYPO
===========================*/

h1, h2, h3, h4, h6 { font-family:"Playfair Display", Helvetica, Arial, sans-serif; letter-spacing:1px; line-height:1.4; }
h5, nav, p, a, label, [class*='button--'], .content > ul > li { font-family:"Muli", Helvetica, Arial, sans-serif; }

/*headline cím*/
h1 { font-size:60px; font-weight:700; color:#fff; position:relative; padding-bottom:15px; margin-bottom:20px; }
h1:after { bottom:0; left:50%; margin-left:-30px; width:60px; height:4px; background:#fff; }

/*modul cím*/
h2 { font-size:34px; font-weight:700; color:#5f97b9; position:relative; padding-bottom:15px; margin-bottom:20px; }
h2:after { bottom:0; left:50%; margin-left:-30px; width:60px; height:4px; background:#4b81c1; }

/*kártya cím*/
h3 { font-size:30px; font-weight:700; color:#5f97b9; position:relative; padding-bottom:20px; margin-bottom:20px; }
h3:after { bottom:0; left:50%; margin-left:-30px; width:60px; height:4px; background:#4b81c1; }

/*tartalomban cím*/
h4 { font-size:24px; font-weight:700; color:#5f97b9; position:relative; padding-bottom:20px; margin-bottom:20px; }
h4:after { bottom:0; left:-10px; width:40px; height:3px; background:#4b81c1; }

/*headline alcím*/
h5 { font-size:24px; color:#f4f7f9; letter-spacing:1px; line-height:1.4; }

h6 { font-size:24px; color:#333; }

p, .content > ul > li { font-size:20px; line-height:1.4; }

small { display:block; }


/*============================
HEADER
===========================*/

header { z-index:99; background:#fff; position:relative; }

header > div {}

header > div > a { position:absolute; top:15px; left:0; }
header > div > a > img { display:block; height:70px; }

header > div > nav { text-align:right; }
header > div > nav > a { display:inline-block; position:relative; font-size:16px; line-height:100px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#333; padding:0 20px; }
header > div > nav > a:hover { color:#5f97b9; }
header > div > nav > a.current, header > div > nav > a.current:hover { background:#5f97b9; color:#fff; }
header > div > nav > a.current:after { left:50%; bottom:-6px; margin-left:-6px; border-width:6px 6px 0 6px; border-style:solid dashed; border-color:#5f97b9 transparent; }
header > div > nav > a:last-child { background:#f4f7f9; }


.contact-card > span, .content-card > a > span, .content-card > a > i, .services-list > li > a > i, .about > div > ul > li > i
{ background:#4b81c1; 
background:-webkit-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); 
background:-o-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); 
background:-moz-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%);
background:-ms-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); 
background:linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); }

.headline, footer
{ background:#4b81c1; 
background:url('wave.svg') bottom repeat-x, -webkit-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); 
background:url('wave.svg') bottom repeat-x, -o-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); 
background:url('wave.svg') bottom repeat-x, -moz-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%);
background:url('wave.svg') bottom repeat-x, -ms-linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); 
background:url('wave.svg') bottom repeat-x, linear-gradient(135deg, #4b81c1 0%, #5f97b9 45%, #5f97b9 100%); }



/*===========================
HEADLINE
===========================*/

.headline { position:relative; overflow:hidden; z-index:90; }

.headline__title { padding:60px 2%; }
.headline__title--hero { padding:120px 2%; }
.headline__title > h1 {}
.headline__title > h5 { width:600px; max-width:100%; display:inline-block; }

.headline__hero { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; }
.headline__hero { opacity:.6; filter:alpha(opacity=60); -khtml-opacity:.6; -moz-opacity:.6; }
.headline--dark { background:#000; }

.headline > div > ul { width:800px; max-width:100%; margin:auto; padding-top:40px; }
.headline > div > ul > li { margin-bottom:20px; }
.headline > div > ul > li > div {}
.headline > div > ul > li > div > h2 { color:#fff; }
.headline > div > ul > li > div > p { color:#fff; }
.headline > div > span { padding:20px 0 60px 0; display:block; }
.headline > div > span > a { margin:10px; }
.headline > div > span > a:hover { transform:translateY(-10%); -webkit-transform:translateY(-10%); -moz-transform:translateY(-10%); -o-transform:translateY(-10%); -ms-transform:translateY(-10%); }

.happy-line { position:absolute; bottom:-1px; left:0; right:0; }
.happy-line > svg { fill:#fff; height:4.19921875vw; width:100%; vertical-align:bottom; }
.index .happy-line > svg { fill:#f4f7f9; }


/*===========================
PAGE
===========================*/

#page { padding-bottom:195px; }
.index { background:#f4f7f9; }

main {}

section, aside { margin:0 2%; padding:40px 0; display:inline-block; vertical-align:top; }

section.full { width:96%; }
section { width:62%; }
aside { width:30%; }


/*============================
FOOTER
===========================*/

footer { width:100%; position:absolute; left:0; bottom:0; padding-bottom:30px; }
footer a, footer p { font-size:12px; line-height:32px; color:#fff; font-weight:700; }
footer a:hover { color:#ddd; }
footer > div { position:relative; }
footer > div > div > span { border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:15px; text-align:center; }
footer > div > div > span > i { display:inline-block; background:#fff; padding:20px; margin:-30px 0 10px 0; }
footer > div > div > span > i > svg { fill:#5f97b9; height:30px; width:30px; }
footer > div > div > span > a { font-size:16px; display:block; }
footer > div > nav { padding-top:30px; text-align:right; } 
footer > div > nav > a { margin-left:20px; }
footer > div > p { margin:0; position:absolute; bottom:0; left:0; width:100%; }
footer > div > a { position:absolute; bottom:0; left:0; }


/*===========================
ITEMS
===========================*/

/* CONTACT CARD */
.contact-card { background:#f4f7f9; padding:20px 2%; margin-top:100px; }
.contact-card:first-child { margin-top:60px; }
.contact-card:last-child { margin:40px 0 100px 0; }
.contact-card > a { color:#4b81c1; font-size:18px; line-height:28px; display:block; }
.contact-card > a:hover { color:#333; }
.contact-card > span { display:inline-block; width:140px; height:140px; padding:3px; margin:-80px 0 10px 0; }
.contact-card > span > span { display:block; width:100%; height:100%; border:2px solid #fff; background-position:center center; }


/**/
.content > ul { padding:30px 0 0 4%; overflow:hidden; }
.content > ul > li { margin-bottom:30px; padding-left:30px; position:relative; }
.content > ul > li:before { top:50%; left:0; margin-top:-6px; width:12px; height:12px; background:#5f97b9; }
.content > ul > li:before { border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius:50%; -o-border-radius:50%; }
.content > h4 { display:inline-block; margin:0; }
.content > i { display:inline-block; float:left; position:relative; width:160px; height:160px; padding:30px 50px 50px 30px; background:#f4f7f9; margin:0 30px 20px 0; }
.content > i > svg { fill:#5f97b9; height:80px; width:80px; }
.content > i:before { width:100%; height:100%; top:-10px; left:-10px; border:5px solid #e6e6e6; }


/**/
.container-content-card { padding:0 2%; }
.container-content-card { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-flex:1 1 auto; flex:1 1 auto; }
.container-content-card > div { flex:1 0 auto; }
.content-card { background:#f4f7f9; margin-top:90px; }
aside > .content-card:first-child { margin-top:50px; }
.content-card > a { display:block; }
.content-card > a > div { padding:10px 4%; }
.content-card > a > div > h3 {}
.content-card > a:hover > div > h3 { color:#666; }
.content-card > a > div > p { color:#333; font-size:18px; }
.content-card > a > i { display:inline-block; width:140px; height:140px; padding:30px; margin-top:-60px; border:10px solid #fff; }
.content-card > a > i { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; -ms-transition:0.5s ease-out; transition:0.5s ease-out; }
.content-card > a > i > svg { fill:#fff; height:60px; width:60px; }
.content-card > a:hover > i {transform:translateY(-10%);-webkit-transform:translateY(-10%);-moz-transform:translateY(-10%); -o-transform:translateY(-10%); -ms-transform:translateY(-10%); }

.content-card > a > span { display:inline-block; width:140px; height:140px; padding:3px; margin-top:-60px; border:10px solid #fff; }
.content-card > a > span > span { display:block; width:100%; height:100%; border:2px solid #fff; background-position:center center; }





/* PRICES */
.prices {}
.prices > li { position:relative; line-height:40px; font-size:16px; padding-left:2%; border-bottom:1px solid #e6e6e6; }
.prices > li:hover { background:#f4f7f9; }
.prices > li > span { background:#5f97b9; color:#fff; font-weight:600; position:absolute; top:0; right:0; min-width:120px; text-align:center; }


/* ABOUT */
.about { position:relative; padding:20px 0 40px 0; }
.about > div { padding:0 46% 0 2%; }
.about > div > h3 { text-transform:uppercase; }
.about > div > h3:after { left:-10px; margin:0; }
.about > div > ul { padding-left:10%; }
.about > div > ul > li { padding-left:110px; margin-top:20px; position:relative; min-height:80px; }
.about > div > ul > li > i { position:absolute; top:0; left:0; padding:20px; }
.about > div > ul > li > i > svg { fill:#fff; height:40px; width:40px; }
.about > span { position:absolute; top:140px; right:2%; bottom:140px; width:40%; background-position:center center; }
.about > span:before { width:100%; height:100%; top:-15px; right:-15px; border:5px solid #e6e6e6; }
.about > span > span { position:absolute; bottom:60px; right:40px; width:70%; background:#5f97b9; padding:20px; }
.about > span > span > p { color:#fff; margin:0; }


/* ROW */
.row { position:relative; padding:20px 0; margin-bottom:20px; overflow:hidden; }
.row > div { padding:0 46% 0 2%; }
.row > div > h3:after { left:-10px; margin:0; }
.row > span { position:absolute; top:40px; right:2%; bottom:40px; width:40%; background-position:center center; }
.row > span:before { width:100%; height:100%; top:-15px; right:-15px; border:5px solid #e6e6e6; }
.row:nth-of-type(even) > div { padding:0 2% 0 46%; }
.row:nth-of-type(even) > span { right:inherit; left:2%; }
.row:nth-of-type(even) > span:before { right:inherit; left:-15px; }


/* SERVICES */
.services-list { padding:20px 1% 0 1%; }
.services-list > li { padding:20px; margin-bottom:20px; border:1px solid #e6e6e6; background:#fff; }
.services-list > li > a { display:block; position:relative; padding-left:110px; }
.services-list > li > a > i { position:absolute; top:0; left:0; padding:20px; }
.services-list > li > a > i > svg { fill:#fff; height:40px; width:40px; }
.services-list > li > a > h3 { padding:0; margin:0; line-height:80px; }
.services-list > li > a > h3:after { display:none; }
.services-list > li > a:hover > i { left:10px; }
.services-list > li > a > i { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; -ms-transition:0.5s ease-out; transition:0.5s ease-out; }


/* TAB */
.tab-menu { position:relative; text-align:center; margin-bottom:20px; }
.tab-menu:before { top:0; left:0; width:100%; height:3px; background:#e6e6e6; }
.tab-menu > div {}
.tab-menu > div > a { display:inline-block; position:relative; padding:20px; border-top:3px solid #e6e6e6; font-size:16px; text-transform:uppercase; letter-spacing:1px; color:#333; font-weight:600; }
.tab-menu > div > a.selected, .tab-menu > div > a.selected:hover { border-color:#4b81c1; color:#4b81c1; }
.tab-menu > div > a:hover { color:#666; }


/*============================
CALL
===========================*/

.call { padding:80px 0 120px 0; }
.call > div { width:400px; margin:auto; }
.call > div > div { margin-top:40px; }


/*============================
FORM
===========================*/

.form { max-width:100%; }
.form > ul { max-width:100%; padding:20px 0; text-align:left; }
.form > ul > li { margin-bottom:20px; }
.form > ul > li > label { margin-bottom:5px; color:#666; }
.form > div > span > svg { margin-right:10px; float:left; }
.form > div > a > svg { margin-right:10px; float:left; }
.form > span { display:inline-block; width:140px; height:140px; padding:3px; margin:-60px 0 10px 0; background:#fff; }
.form > span > span { display:block; width:100%; height:100%; border:2px solid #f4f7f9; background-position:center center; }

#contact-form { background:#f4f7f9; padding:40px 15%; margin-top:60px; }

input[type=text], textarea, [data-type="select"]:before { border:1px solid #5f97b9; background:0; }
[data-type="select"]:after { border-color:#5f97b9 transparent transparent; }
input[type=text], textarea, [data-type="select"]:before { border-radius:.3rem; -moz-border-radius:.3rem; -webkit-border-radius:.3rem; -khtml-border-radius:.3rem; -o-border-radius:.3rem; }


/*============================
BUTTONS
===========================*/

.button--primary { background:#4b81c1; border-color:#4b81c1; font-weight:600; }

.button--secondary { background:#5f97b9; border-color:#5f97b9; font-weight:600; }
.button--secondary.with-bottom-arrow:after { border-color:#5f97b9 transparent; }


/*============================
MOBIL NAV
===========================*/

@-webkit-keyframes submenu-show { from { -webkit-transform:scale(0.9); opacity:0; } to { -webkit-transform:scale(1); opacity:1; }}
@keyframes submenu-show { from { transform:scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; }}

[data-action='nav-button'] { display:none; position:absolute; top:50%; right:0; margin-top:-25px; }

.open { display:block; -webkit-animation:submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); animation:submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }


/*============================
RESPONSIVE
===========================*/

@media (max-width: 1024px) {



}

@media (max-width: 768px) {

[data-action='nav-button'] { display:inline-block; }

header > div { height:80px; }
header > div > a { top:10px; }
header > div > a > img { height:60px; }

header > div > nav { display:none; position:absolute; top:100px; right:0; width:400px; max-width:100%; z-index:99; padding:0; text-align:center; background:#fff; }
header > div > nav > a { display:block; line-height:60px; }
header > div > nav > a.current:after { display:none; }


#page { padding-bottom:404px; }
section, aside { padding-bottom:0; width:96%; }
aside {}


.about { padding:20px 0; }
.about > div { padding:0 2%; }
.about > div > ul { padding:0; }
.contact-card:last-child { margin:40px 0; }
#contact-form { padding:40px 10%; margin:0; }

.row > div { padding:0 26% 0 2%; }
.row > span { right:-18%; }
.row:nth-of-type(even) > div { padding:0 2% 0 26%; }
.row:nth-of-type(even) > span { left:-18%; }

.content > i { display:block; float:none; margin:0 auto 30px auto; }


footer { padding:10px 0; }
footer > div > div { padding:0 10%; }
footer > div > div > span { padding:15px 0; text-align:left; }
footer > div > div > span > i { padding:8px; margin:0 15px 0 0; float:left; }
footer > div > div > span > i > svg { height:16px; width:16px; }
footer > div > div > span > a { font-size:14px; display:inline-block; }
footer > div > nav { text-align:center; padding:30px 0; }
footer > div > nav > a { margin:0 10px; }
footer > div > p, footer > div > a { position:relative; display:block; line-height:20px; text-align:center; }


}

@media (max-width: 480px) {


h1 { font-size:32px; }
h2 { font-size:28px; }
h3 { font-size:26px; }
h4 { font-size:18px; }
h5 { font-size:18px; }
h6 { font-size:18px; }
p, .content > ul > li { font-size:16px; }

.row { margin:0; padding-bottom:0; }
.row > div, .row:nth-of-type(even) > div { padding:0 2% 30px 2%; }
.row > span, .row:nth-of-type(even) > span { position:relative; top:inherit; bottom:inherit; left:inherit; right:inherit; display:block; height:200px; width:100%; }


}