*{ margin: 0; padding: 0; border: 0; flex-wrap: wrap; text-decoration: none; } *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root { --color-yellow: #f68d0e; --color-yellow-a15: rgba(246 141 14 / 15%); --color-green: #09995a; --color-body-text: #414141; --color-silver: #f8f8f8; --color-silver-line: #dddddd; --color-dark: #303030; } /* --------------- DEFAULT --------------- */ .inner { max-width: 1170px; margin: auto; position: relative; display:flex; justify-content:space-between; } .inner_800 { max-width: 800px; } .hide { display: none !important; } .b_r_5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .b_r_10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .vertical_center_middle { left: 50%; top: 50%; position: relative; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tags { margin-bottom: 20px; } .center { text-align: center; } .has_shadow { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); box-shadow: 0 0 10px rgba(0,0,0,0.15); } /* Animation */ .anim { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .anim_cubic { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } /* Buttons */ .btn_gray { padding: 15px 20px; font-size: 15px; font-weight: bold; text-decoration: none !important; text-transform: uppercase; color: white !important; line-height: 20px; background: url(images/btn_gray.png); border: 0; border-radius: 5px; display: inline-block; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .btn_gray:hover { background-image: url(images/btn_orange.png); } .btn_gray.btn_gray_small { padding: 10px 15px; font-size: 13px; } .btn_orange, input[type="submit"] { padding: 15px 20px; font-size: 15px; font-weight: bold; text-decoration: none !important; text-transform: uppercase; color: white !important; background: url(images/btn_orange.png); border: 0; border-radius: 5px; display: inline-block; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .btn_orange:hover { background-image: url(images/btn_gray.png); } .btn_orange.btn_orange_small { padding: 10px 15px; font-size: 13px; } /* ---------------------- MAGNIFIC POPUP ---------------------- */ .white-popup { width: auto; max-width: 600px; margin: 20px auto; padding: 20px; background: white; position: relative; } .white-popup p { margin-bottom: 20px; } .white-popup h1 { margin-bottom: 20px; font-size: 30px; } .white-popup .iframe_wrapper { margin-bottom: 0 !important; } .white-popup.exitpopup { max-width: 800px; padding: 0; } .white-popup.exitpopup .mfp-close { width: 40px; height: 40px; left: auto; right: -20px; top: -20px; padding: 0; line-height: 30px; background: #e5830d url(images/icon_close_white.svg) no-repeat center; background-size: auto 16px; cursor: pointer; opacity: 1; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .white-popup.exitpopup .mfp-close:hover { background-color: #323232; } .white-popup.exitpopup .wrapper { padding: 30px; } .white-popup.exitpopup .wrapper h3 { margin-bottom: 10px; font-size: 25px; font-weight: 700; color: #f8be50; line-height: 100%; } .white-popup.exitpopup .wrapper p { margin-bottom: 20px; line-height: 20px; } .white-popup.exitpopup .wrapper p:last-child { margin-bottom: 0; } .white-popup.exitpopup .wrapper .form-row { text-align: left !important; } .white-popup.exitpopup .wrapper .form-row a { font-size: 13px; } .white-popup.exitpopup .wrapper.has_image { width: 100%; padding: 0; font-size: 0; display: table; table-layout: fixed; } .white-popup.exitpopup .wrapper.has_image .popup_image { width: 40%; background-repeat: no-repeat; background-position: center; background-size: cover; display: table-cell; } .white-popup.exitpopup .wrapper.has_image .popup_content { width: 60%; padding: 30px; font-size: 17px; display: table-cell; } /* ---------------- RWD NAV ---------------- */ #rwd_menu { width: 100%; left: 0; top: 80px; bottom: 0; background: rgba(0 0 0 / 70%); position: fixed; z-index: 100; visibility: hidden; opacity: 0; } #rwd_menu .rwd_menu_wrap { width: 450px; height: 100%; right: -100%; top: 0; background: var(--color-silver); position: absolute; overflow-y: auto; } /* Menu */ #rwd_menu .menu ul li { float: none !important; position: relative; } #rwd_menu .menu ul li.hide_in_rwd { display: none; } #rwd_menu .menu ul li a { color: var(--color-body-text); display: block; } /* Primary menu */ #rwd_menu ul.primary_menu { background: white; } #rwd_menu ul.primary_menu li { border-bottom: 1px solid var(--color-silver-line); } #rwd_menu ul.primary_menu li a { padding: 15px 20px; font-size: 20px; font-weight: 900; color: var(--color-body-text); line-height: 1; display: block; position: relative; } #rwd_menu ul.primary_menu li a:hover { text-decoration: underline; } #rwd_menu ul.primary_menu li.menu-item-has-children > a:before { width: 0; height: 100%; left: 0; top: 0; background: var(--color-yellow); position: absolute; content: ''; } #rwd_menu ul.primary_menu li.menu-item-has-children > a:after { width: 20px; height: 20px; right: 20px; top: calc(50% - 10px); background: var(--color-yellow) url(images/icon_arrow_down.svg) no-repeat center; background-size: 8px; position: absolute; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #rwd_menu ul.primary_menu li.menu-item-has-children.open > a:before { width: 8px; } #rwd_menu ul.primary_menu li.menu-item-has-children.open > a:after { ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #rwd_menu ul.primary_menu li ul { background: var(--color-silver); border-top: 1px solid var(--color-silver-line); display: none; } #rwd_menu ul.primary_menu li ul li:last-child { border-bottom: none; } #rwd_menu ul.primary_menu li ul li a { left: auto !important; padding: 15px 15px 15px 20px; font-size: 15px; color: var(--color-body-text) !important; line-height: 20px; opacity: 100% !important; } /* Secondary menu */ #rwd_menu .menu.secondary_menu { padding-bottom: 30px; } #rwd_menu .menu.secondary_menu ul li { margin-bottom: 5px; } #rwd_menu .menu.secondary_menu ul li a { padding: 0 20px; font-size: 18px; font-weight: 500; } #rwd_menu .menu.secondary_menu ul li a:hover { text-decoration: underline; } #rwd_menu .help { margin-bottom: 20px; padding: 20px; } #rwd_menu .help a { width: 100%; margin-bottom: 10px; text-align: center; } #rwd_menu .help a:last-child { margin-bottom: 0; } #rwd_menu .help .title { margin-bottom: 10px; font-size: 20px; font-weight: 700; color: #e5830d; } body.rwd_menu__opened #rwd_menu { visibility: visible; opacity: 100%; } body.rwd_menu__opened #rwd_menu .rwd_menu_wrap { right: 0; } /* -------------- HEADER -------------- */ #header { width: 100%; height: 80px; left: 0; top: 0; background: url(images/bgr_header.png) repeat left bottom; position: fixed; z-index: 100; } #header .inner { height: 100%; } /* Logo */ #header .logo { left: 0; position: absolute !important; } /* Menu */ #header ul.menu { height: 100%; right: 80px; top: 0; display: flex; position: absolute !important; list-style: none; } #header ul.menu li { height: 100%; margin-left: 20px; position: relative; } #header ul.menu li:after { width: 100%; height: 3px; left: 0; bottom: 0; background: var(--color-yellow); display: none; position: absolute; content: ''; } #header ul.menu li:hover:after { display: block; } #header ul.menu li a { height: 100%; font-size: 15px; text-decoration: none; color: white; display: flex; align-items: center; } #header ul.menu li a:hover { color: var(--color-yellow); } #header ul.menu li.menu-item-has-children a { padding-right: 22px; position: relative; } #header ul.menu li.menu-item-has-children a:after { width: 16px; height: 16px; right: 0; top: calc(50% - 8px); background: var(--color-yellow) url(images/icon_arrow_down.svg) no-repeat center; background-size: auto 8px; position: absolute; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #header ul.menu li.menu-item-has-children ul { width: max-content; height: auto; left: 0; top: 100%; background: var(--color-dark); position: absolute; list-style: none; visibility: hidden; opacity: 0; } #header ul.menu li.menu-item-has-children ul li { height: auto; margin-left: 0; border-bottom: 1px solid rgba(255 255 255 / 10%); } #header ul.menu li.menu-item-has-children ul li:last-child { border-bottom: none; } #header ul.menu li.menu-item-has-children ul li:after { display: none !important; } #header ul.menu li.menu-item-has-children ul li a { height: auto; padding: 10px 20px !important; color: white !important; display: block; } #header ul.menu li.menu-item-has-children ul li a:hover { text-decoration: underline; } #header ul.menu li.menu-item-has-children ul li a:after { display: none !important; } #header ul.menu li.menu-item-has-children:hover:after { display: block; } #header ul.menu li.menu-item-has-children:hover a { color: var(--color-yellow); } #header ul.menu li.menu-item-has-children:hover ul { visibility: visible; opacity: 100%; } /* Language switcher */ #header .language_switcher { right: 0; position: absolute !important; } #header .language_switcher a { width: 50px; height: 50px; background: rgba(255 255 255 / 5%); border: 1px solid rgba(255 255 255 / 10%); outline: 5px solid transparent; display: flex; align-items: center; justify-content: center; } #header .language_switcher a:hover { border-color: var(--color-yellow); outline-color: var(--color-yellow-a15); } #header .language_switcher a img { width: 26px !important; height: auto !important; display: block; } /* RWD button */ #header .rwd_button { width: 50px; height: 50px; right: 20px; background: var(--color-yellow); position: absolute; z-index: 2; cursor: pointer; } #header .rwd_button .burg { width: 20px; height: 2px; left: 15px; top: calc(50% - 1px); background: white; display: block; position: absolute; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before, #header .rwd_button .burg:after { width: 20px; height: 2px; background: white; position: absolute; content: ''; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before { top: -6px; left: 0; } #header .rwd_button .burg:after { top: 6px; right: 0; } body.rwd_menu__opened #header .rwd_button .burg { background: transparent; } body.rwd_menu__opened #header .rwd_button .burg:before { top: 0; -webkit-transform: rotate(45deg); } body.rwd_menu__opened #header .rwd_button .burg:after { top: 0; -webkit-transform: rotate(-45deg); } /* -------------------------- FRONTPAGE SERVICES -------------------------- */ #frontpage_services { background: #2c2c2c url(images/bgr_header.png); } #frontpage_services .frontpage_services_wrap { display: flex; } #frontpage_services .services_list_wrap { width: calc(100% - 300px); display: flex; } #frontpage_services .services_list_wrap .wrap_left { width: 200px; color: white; display: flex; align-items: center; align-content: center; } #frontpage_services .services_list_wrap .wrap_right { width: calc(100% - 200px); padding: 10px 5px; display: flex; } #frontpage_services .services_list_wrap .wrap_right a { width: calc(33.3333333333% - 10px); margin: 5px; padding: 10px 5px; background-color: rgba(0 0 0 / 0%); display: flex; align-content: center; justify-content: center; } #frontpage_services .services_list_wrap .wrap_right a.active { background-color: rgba(0 0 0 / 50%); } #frontpage_services .services_list_wrap .wrap_right a img { width: auto; height: 40px; margin-bottom: 10px; } #frontpage_services .services_list_wrap .wrap_right a h2 { width: 100%; font-size: 16px; text-align: center; color: white; word-break: break-all; line-height: 20px; } #frontpage_services .bgr_pdf { width: 300px; padding: 20px; font-size: 14px; text-decoration: none; color: white; line-height: 20px; background: var(--color-yellow); } #frontpage_services .bgr_pdf strong { display: block; } #frontpage_services .bgr_pdf:hover strong { text-decoration: underline; } /* --------------------- FRONTPAGE BOX --------------------- */ .custom_box_1 { margin-bottom: 30px; padding-top: 50px; padding-right: 50%; padding-bottom: 50px; padding-left: 30px; font-size: 15px; line-height: 25px; background-repeat: no-repeat; background-position: right center; background-size: cover; position: relative; } .custom_box_1.homeoffice { background-image: url(images/bgr_home_office.webp); background-image: -webkit-image-set(url(images/bgr_home_office.webp) 1x); background-image: image-set(url(images/bgr_home_office.png) 1x); } /* ---------------- MAILSTER ---------------- */ .mailster-wrapper.mailster-wrapper.mailster-lastname-wrapper { width: calc(50% - 10px); float: left; } .mailster-wrapper.mailster-wrapper.mailster-firstname-wrapper { width: calc(50% - 10px); float: right; } .mailster-wrapper.mailster-wrapper.mailster-email-wrapper { clear: both; } .mailster-wrapper.mailster-policy-wrapper label { font-size: 13px; } .mailster-wrapper.mailster-policy-wrapper input[type=checkbox] { width: 20px; height: 20px; padding: 0; vertical-align: middle; } .mailster-form-info { font-size: 14px !important; } .mailster-form-info p { margin-bottom: 10px !important; } .mailster-form-info ul { margin-left: 20px; } .mailster-form-info ul li { list-style: disc; } /* --------------------- RELATED POSTS --------------------- */ .related_posts { margin-bottom: 30px; padding: 20px 20px 20px 120px; line-height: 20px; background: white; border: 2px solid #e5830d; position: relative; } .related_posts:before { width: 100px; height: 100%; left: 0; top: 0; background: url(images/icon_warning.svg) no-repeat center; background-size: auto 50px; border-right: 1px solid #eee; position: absolute; content: ''; } /* 404 */ img.arrows_404 { width: 100%; height: auto; display: block; } .staff_404_wrapper { margin-left: -20px; margin-right: -20px; font-size: 0; } .staff_404_wrapper .staff { width: 33.3333333333%; padding-left: 20px; padding-right: 20px; font-size: 16px; vertical-align: top; display: inline-block; } .staff_404_wrapper .staff img { max-width: 100%; height: auto; margin: auto; display: block; } /* HELPFUL */ .helpful { margin-bottom: 30px; padding: 20px 0; border-top: 1px solid var(--color-silver-line); border-bottom: 1px solid #ddd; position: relative; } .helpful .helpful-headline { margin: 0 0 10px; } .helpful .helpful-content { right: 0; top: 50%; font-size: 15px; font-weight: bold; position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .helpful .helpful-controls div { margin-right: 10px; vertical-align: top; display: inline-block; } .helpful .helpful-controls .helpful-button { height: 40px; padding: 0 15px; text-transform: uppercase; color: white; background: #5bb767; border: 1px solid #5bb767; position: relative; cursor: pointer; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .helpful .helpful-controls .helpful-button.helpful-contra { background: #dC3128; border-color: #dc3128; } .helpful .helpful-controls .helpful-button:hover { color: #333; background: transparent; } .helpful .helpful-controls .helpful-button .helpful-counter { height: 18px; right: -5px; top: -5px; padding: 0 5px; font-size: 12px; color: white; line-height: 18px; background: #333; position: absolute; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; } /* ----------------------- FLOATING BANNER ----------------------- */ #floating_banner { width: 70px; height: 300px; right: 0; top: 50%; font-size: 0; position: fixed; z-index: 100; overflow: hidden; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #floating_banner:after { content: ''; width: 100%; height: 135%; left: -80%; top: -110%; position: absolute; transform: rotate(-45deg); background: rgba(255 255 255 / 15%); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.15) 60%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 30%,rgba(255,255,255,0.15) 60%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 30%,rgba(255,255,255,0.15) 60%,rgba(255,255,255,0) 100%); transition-property: opacity; transition-duration: 0.15s; transition-timing-function: ease; transition-delay: .25s; animation-duration: 3s; animation-name: shine; animation-iteration-count: infinite; animation-delay: .25s; } #floating_banner:hover { width: 450px; } #floating_banner .label_wrapper { width: 70px; height: 100%; right: 0; top: 0; background: #f68d0e; display: block; position: absolute; } #floating_banner .label_wrapper .label_on_top { width: 300px; height: 70px; left: -115px; top: 115px; font-size: 18px; font-weight: 700; text-align: center; text-shadow: 1px 1px rgba(0,0,0,0.5); color: white; line-height: 70px; position: absolute; transform: rotate(-90deg); } #floating_banner .text_wrapper { width: calc(100% - 70px); height: 100%; right: 70px; top: 0; padding: 10px; font-size: 14px; background: white; border: 1px solid #e0e0e0; border-right: none; position: absolute; z-index: 99; opacity: 0; visibility: hidden; -webkit-transform: perspective(1200) rotateY(-30deg); -moz-transform: perspective(1200) rotateY(-30deg); -o-transform: perspective(1200) rotateY(-30deg); -ms-transform: perspective(1200) rotateY(-30deg); transform: perspective(1200) rotateY(-30deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; } #floating_banner:hover .text_wrapper { opacity: 1; visibility: visible; -webkit-transform: perspective(600) rotateY(0deg); -moz-transform: perspective(600) rotateY(90deg); -o-transform: perspective(600) rotateY(0deg); -ms-transform: perspective(600) rotateY(0deg); transform: perspective(600) rotateY(0deg); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #floating_banner .text_wrapper ul { margin: 0; padding: 0; display: block; } #floating_banner .text_wrapper ul li { margin-bottom: 5px; padding-left: 30px; line-height: 20px; background: url(images/icon_check.svg) no-repeat left top; background-size: auto 20px; list-style: none; } #floating_banner .text_wrapper ul li:last-child { margin-bottom: 0; } /* LANDING PAGE */ .landing_page { padding: 50px 0; line-height: 25px; } .landing_page .helpful { display: none !important; } .landing_page a { text-decoration: underline; color: #000; } .landing_page a:hover { color: #f68d0e; } .landing_page .contact_box { background: white; position: relative; z-index: 2; } .landing_page .contact_box h4 { margin: 0 0 10px; color: #f68d0e; } .landing_page .contact_box p { line-height: 30px; } .landing_page .contact_box p.last { margin-bottom: 0; } .landing_page .contact_box .row { margin: 0; } .landing_page .contact_box .row.row_table { width: 100%; display: table; border-collapse: collapse; border: none; table-layout: fixed; } .landing_page .contact_box .col { padding: 30px; vertical-align: top; display: inline-block; position: relative; } .landing_page .contact_box .col.col_50 { width: 50%; } .landing_page .contact_box .col.col_left:after { width: 1px; right: 0; top: 40px; bottom: 40px; background: #ddd; position: absolute; content: ''; } .landing_page .contact_box .col.col_left .icon { background: #f68d0e; } .landing_page .contact_box .col.col_left .icon svg { fill: white; } .landing_page .contact_box .col.col_right .icon { background: #ececec; } .landing_page .contact_box .col.col_right .icon svg { fill: #5e5e5e; } .landing_page .contact_box .row.row_table .col { display: table-cell; } .landing_page .contact_box .icon { width: 60px; height: 60px; margin: 0 auto 30px; } .landing_page .contact_box .icon svg { width: auto; height: 30px; left: 50%; top: 50%; display: block; position: relative; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .landing_page .contact_box .wpcf7 form { margin-top: 0; } .landing_page .contact_box .wpcf7 form span { padding-top: 0; } .landing_page .contact_box .wpcf7 .wpcf7-acceptance { text-align: left; } .landing_page .contact_box .wpcf7 .wpcf7-acceptance label { padding-left: 30px; font-size: 14px; line-height: 16px; position: relative; display: block; } .landing_page .contact_box .wpcf7 .wpcf7-acceptance label input[type=checkbox] { left: 0; top: 0; margin: 0; position: absolute; } /* Main contact box */ .landing_page .main_contact_box { padding: 40px 30px; background: url(images/landing_footer.png) no-repeat right center; background-size: cover; } .landing_page .main_contact_box .title { margin: 0; font-weight: bold; font-size: 30px; color: #f68d0e; } .landing_page .main_contact_box p { } /* Make offer */ .landing_page .make_offer { margin-bottom: 30px; padding: 30px; background: #f3f3f3; position: relative; z-index: 1; } .landing_page .make_offer a { text-decoration: underline; color: #000; } .landing_page .make_offer a:hover { color: #f68d0e; } .landing_page .make_offer .title { margin-bottom: 20px; font-size: 20px; font-weight: 700; } /* CF 7 */ .wpcf7 a { text-decoration: underline; color: #000; } .wpcf7 a:hover { color: #f68d0e; } .wpcf7 input[type=checkbox] { width: 20px; height: 20px; padding: 0; vertical-align: middle; } .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; } /* -------------- BANNER -------------- */ .banner { margin-bottom: 30px; background-color: white; background-repeat: no-repeat; background-position: right center; background-size: 80% auto; position: relative; z-index: 1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1); } .banner h3 { margin-top: 0 !important; font-size: 30px; line-height: 100%; } .banner .cover { padding: 50px 30px; position: relative; } .banner .cover:before { width: 100%; height: 100%; left: 0; top: 0; position: absolute; content: ''; z-index: -1; } .banner.first_aid_course { background-color: #c2c0ab; background-image: url(images/aurapro__elsosegely_tanfolyam.jpg); } .banner.first_aid_course .cover { padding-right: 40%; } .banner.first_aid_course .cover:before { background: -moz-linear-gradient(left, rgba(194,192,171,1) 20%, rgba(194,192,171,0) 100%); background: -webkit-linear-gradient(left, rgba(194,192,171,1) 20%,rgba(194,192,171,0) 100%); background: linear-gradient(to right, rgba(194,192,171,1) 20%,rgba(194,192,171,0) 100%); } /* --------------- CONTENT --------------- */ #container { padding-top: 100px; padding-bottom: 50px; } body.home #container { padding-top: 80px; padding-bottom: 0; } #container .container_wrap { display: flex; justify-content: space-between; } #container .container_wrap #content { width: calc(100% - 350px); } #content { color: var(--color-body-text); line-height: 25px; } #content h1 { margin-bottom: 20px; font-size: clamp(1.8rem, 5vw, 2.5rem); color: var(--color-body-text); line-height: 100%; } #content h2 { margin-bottom: 20px; font-size: clamp(1.5rem, 4vw, 1.875rem); color: var(--color-body-text); line-height: 100%; } #content h3 { margin-bottom: 20px; font-size: clamp(1.25rem, 3vw, 1.563rem); color: var(--color-yellow); line-height: 100%; } #content p { margin-bottom: 20px; } #content a { text-decoration: underlnie; color: var(--color-yellow); } #content a:hover { color: var(--color-body-text); } #content ul { margin-left: 30px; margin-bottom: 20px; } #content ol { margin-left: 30px; margin-bottom: 20px; } #content p + h3, #content ul + h3, #content ol + h3 { margin-top: 50px; } /* Staff */ #content .staff_wrap { margin-left: -15px; margin-right: -15px; display: flex; } #content .staff_wrap .staff { width: calc(33.3333333333% - 30px); margin: 50px 15px 0; } #content .staff_wrap .staff:nth-child(-n+3) { margin-top: 0; } #content .staff_wrap .staff .photo img { width: 100%; height: auto; display: block; } #content .staff_wrap .staff .info { padding-top: 10px; } /* Results */ #content .results article { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; } /* Services */ #content .services_wrap { margin-left: -15px; margin-right: -15px; display: flex; } #content .services_wrap .service { width: calc(33.3333333333% - 30px); top: 0; margin: 30px 15px 0; background: white; position: relative; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #content .services_wrap .service:nth-child(-n+3) { margin-top: 0; } #content .services_wrap .service:hover { top: -5px; box-shadow: 0 10px 20px rgba(0 0 0 / 10%); } #content .services_wrap .service .thumbnail { height: 200px; background-color: var(--color-body-text); background-repeat: no-repeat; background-position: center; background-size: cover; display: block; overflow: hidden; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #content .services_wrap .service .entry { height: calc(100% - 200px); padding: 20px 20px 80px; position: relative; background: white; border: 1px solid var(--color-silver-line); border-top: none; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } #content .services_wrap .service .btn_gray { left: 20px; bottom: 20px; position: absolute; } /* --------------- SIDEBAR --------------- */ #sidebar { width: 300px; } #sidebar ul.pages { margin-bottom: 20px; list-style: none; background: #f2f2f2; } #sidebar ul.pages li { border-bottom: 1px solid white; list-style: none !important; } #sidebar ul.pages li a { padding: 15px 20px; font-size: 14px; font-weight: 700; color: white; background: url(images/btn_orange.png); display: block; position: relative; } #sidebar ul.pages li a:hover { background: url(images/btn_gray.png); color: #fff; } #sidebar ul.pages li ul { background: white; border-left: 1px solid var(--color-silver-line); border-right: 1px solid var(--color-silver-line); } #sidebar ul.pages li ul li a { font-weight: normal; color: var(--color-body-text); background: none; } #sidebar ul.pages li ul li a:before { margin-right: 5px; content: '\21AA'; } /* Banner */ #sidebar .sidebar_banner { margin-bottom: 20px; padding: 20px; background: url(images/bgr_sidebar.png) no-repeat center; background-size: cover; } #sidebar .sidebar_banner p { margin-bottom: 20px; font-size: 15px; } #sidebar .sidebar_banner .title { margin-bottom: 10px; font-size: 25px; font-weight: bold; line-height: 100%; } /* ------------- BOXES ------------- */ .boxes { margin-bottom: 20px; } .boxes .boxes_wrap { display: flex; justify-content: space-between; } .boxes .boxes_wrap .boxed { width: calc(33.3333333333% - 20px); margin-top: 20px; padding: 20px 20px 20px 80px; background: white; border: 1px solid #ddd; position: relative; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); } .boxes .boxes_wrap .boxed:nth-child(-n+3) { margin-top: 0; } .boxes .boxes_wrap .boxed a { margin-bottom: 10px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--color-yellow); display: block; } .boxes .boxes_wrap .boxed p { font-size: 14px; line-height: 20px; } .boxes .boxes_wrap .boxed .icon { width: 44px; height: 44px; left: 20px; top: 20px; background: rgba(0 0 0 / 10%); display: flex; align-items: center; justify-content: center; position: absolute; } .boxes .boxes_wrap .boxed .icon img { display: block; } .boxes .boxes_wrap .boxed.boxed_custom { color: white; background: url(images/bgr_big.png); } .boxes .boxes_wrap .boxed.boxed_custom a { color: white; } .boxes .boxes_wrap .boxed.boxed_custom .icon { background: #c4720e; } /* ------------------ REFERENCES ------------------ */ #references { padding: 50px 0; background: white; } #references .title { margin-bottom: 20px; font-size: 25px; font-weight: 700; color: var(--color-body-text); line-height: 100%; } #references .references_wrap { display: flex; justify-content: space-between; gap:10px; } #references .references_wrap .logo { padding: 10px; display: flex; align-items: center; justify-content: center; flex: 1 0 20%; } /* ------------ FORM ------------ */ .form_row { width: 100%; margin-bottom: 10px; display: flex; justify-content: space-between; } .form_row.form_row_first { width: calc(50% - 10px); } .form_row.form_row_last { width: calc(50% - 10px); } .form_row.form_row_wide { width: 100%; } .form_row p { width: 100%; } .form_row label { font-weight: 700; } .form_row input[type=tel], .form_row input[type=text], .form_row input[type=email] { width: 100% !important; } .form_row .wpcf7-submit { right: auto !important; bottom: auto !important; position: relative !important; } /* WPCF7 */ .wpcf7-form { display: flex; justify-content: space-between; } /* ----------------- KEYFRAMES ----------------- */ @keyframes shine { 0% { top: -100%; left: -80%; } 100% { top: 100%; } } /* --------------------- SZÉCHENYI2020 --------------------- */ .szechenyi2020 { height: 150px; right: 0; bottom: 0; position: fixed; z-index: 100; } .szechenyi2020 img { width: auto; height: 100%; display: block; } .szechenyi2020 a { height: 100%; display: block; position: relative; z-index: 1; } .szechenyi2020 a.close { width: 30px; height: 30px; right: 20px; top: -10px; font-size: 14px; background: white; border: 1px solid var(--color-silver-line); display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; } .szechenyi2020 a.close:hover { border-color: var(--color-dark); } /* ----------- RWD ----------- */ @media only screen and (max-width: 1170px) { /* HEADER: Logo */ #header .logo { left: 20px; } /* HEADER: Menu */ #header ul.menu { right: 100px; } /* HEADER: Language switcher */ #header .language_switcher { right: 20px; } /* CONTENT: Staff */ #content .staff_wrap { margin-left: -10px; margin-right: -10px; } #content .staff_wrap .staff { width: calc(33.3333333333% - 20px); margin: 50px 10px 0; } /* CONTENT: Services */ #content .services_wrap { margin-left: -10px; margin-right: -10px; } #content .services_wrap .service { width: calc(33.3333333333% - 20px); margin: 20px 10px 0; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } /* DISPLAY: Block */ .show_in_960 { display: block !important; } /* HEADER: Language switcher */ #header .language_switcher { right: 90px; } /* FRONTPAGE SERVICES */ #frontpage_services .services_list_wrap { width: 100%; padding: 20px 0; } #frontpage_services .bgr_pdf { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; } /* FRONTPAGE BOX */ .custom_box_1 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .custom_box_1 .cover { padding: 50px 30px; background: rgba(242,241,239,0.8); } /* BANNER */ .banner { background-size: cover; } /* BOXES */ .boxes .boxes_wrap .boxed { padding: 80px 20px 20px 20px; } /* CONTENT */ #container .container_wrap #content { width: 100%; } /* CONTENT: Services */ #content .services_wrap .service { width: calc(50% - 20px); } #content .services_wrap .service:nth-child(3) { margin-top: 20px; } #content .services_wrap .service:hover { top: 0; box-shadow: 0 10px 20px rgba(0 0 0 / 0%); } } @media only screen and (max-width: 768px) { /* DISPLAY: None */ .hide_in_768 { display: none !important; } /* 404 */ .staff_404_wrapper { max-width: 400px; margin-left: auto; margin-right: auto; } .staff_404_wrapper .staff { width: 100%; margin-bottom: 30px; padding-left: 0; padding-right: 0; display: block; } /* BOXES */ .boxes .boxes_wrap .boxed { width: 100%; padding: 20px 20px 20px 80px; } .boxes .boxes_wrap .boxed:nth-child(2), .boxes .boxes_wrap .boxed:nth-child(3) { margin-top: 20px; } .boxes .boxes_wrap .boxed .icon { left: 20px; top: 20px; } /* CONTENT: Staff */ #content .staff_wrap .staff { width: calc(50% - 20px); } #content .staff_wrap .staff:nth-child(3) { margin-top: 50px; } } @media only screen and (max-width: 640px) { /* DEFAULT */ .w50 { width: 100%; float: none; } /* FRONTPAGE SERVICES */ #frontpage_services .services_list_wrap .wrap_left { width: 100%; margin-bottom: 20px; text-align: center; justify-content: center; } #frontpage_services .services_list_wrap .wrap_left strong { width: 100%; display: block; } #frontpage_services .services_list_wrap .wrap_right { width: 100%; padding: 0; } #frontpage_services .services_list_wrap .wrap_right a h2 { font-size: 14px; line-height: 16px; } /* LANDING PAGE */ .landing_page .contact_box .row.row_table { display: block; } .landing_page .contact_box .col { width: 100% !important; padding: 20px; display: block; } .landing_page .contact_box .col.col_left:after { width: auto; height: 1px; left: 40px; right: 40px; top: auto; bottom: 0; } .landing_page .contact_box .row.row_table .col { display: block; } /* Main contact box */ .landing_page .main_contact_box { padding: 20px; } /* Make offer */ .landing_page .make_offer { padding: 20px; } /* BANNER */ .banner h3 { font-size: 20px; } .banner.first_aid_course { background-image: none; } .banner.first_aid_course .cover { padding-right: 0; } /* REFERENCES */ #references .references_wrap .logo { flex: 1 0 25%; } /* CONTENT: Services */ #content .services_wrap { margin-left: 0; margin-right: 0; } #content .services_wrap .service { width: 100%; } #content .services_wrap .service:nth-child(2) { margin-top: 20px; } #content .services_wrap .service .thumbnail { height: auto; } #content .services_wrap .service .thumbnail:before { padding-top: 40%; display: block; content: ''; } #content .services_wrap .service .entry { height: auto; } /* FORM */ .form_row.form_row_first, .form_row.form_row_last { width: 100%; } } @media only screen and (max-width: 480px) { /* RWD NAV */ #rwd_menu .rwd_menu_wrap { width: calc(100% - 20px); } /* FRONTPAGE SERVICES */ #frontpage_services .services_list_wrap .wrap_right a h2 { font-size: 12px; line-height: 14px; } /* RELATED POSTS */ .related_posts { padding: 20px; } .related_posts:before { display: none; } /* REFERENCES */ #references .references_wrap .logo { flex: 1 0 33.3333333333%; } } @media only screen and (max-width: 375px) { /* REFERENCES */ #references .references_wrap .logo { flex: 1 0 50%; } }