/* Theme Name: TIM Tervező és Beruházás-Bonyolító Kft. Theme URI: https://timkft.hu Description: A TIM Tervező és Beruházás-Bonyolító Kft. weboldalának alapértelmezett sablonja. Author: Digitalform Author URI: https://digitalform.hu Version: 1.0 */ *{ margin: 0; border: 0; padding: 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-red: #d91828; --color-silver: #f5f5f5; --color-silver-line: #dadada; --color-dark: #1c1c20; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } body { margin: auto; font-family: 'Metropolis', sans-serif; font-size: 19px; font-weight: 400; line-height: 30px; overflow-x: hidden; } body.rwd_menu__opened { overflow: none; } body.page-template-under-construction { height: 100vh; } textarea, input, select, button { font-family: 'Metropolis', sans-serif; font-size: 18px; outline: none; } h1, h2, h3, h4 { font-weight: normal; line-height: 100%; } hr { margin: 30px 0; border-top: 5px solid #efefed; } img.alignleft { margin: 0 20px 5px 0; float: left; } img.alignright { margin: 0 0 5px 20px; float: right; } img.aligncenter { margin: 0 auto 20px auto; display: block; } img.alignleft, img.alignright, img.aligncenter { padding: 4px; border: 1px solid #ddd; } /* Classes */ .left { float: left; } .right { float: right; } .clear { clear: both; } .inner { max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; } .inner_800 { max-width: 800px; } .inner_900 { max-width: 900px; } .vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .uppercase { text-transform: uppercase; } .center { text-align: center; } .hide { display: none !important; } .red { color: #d63131; } .b_r_3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* Animation */ .anim_slide_top { top: 50px; position: relative; opacity: 0; } .reveal .anim_slide_top { top: 0; opacity: 1; } /* Animation */ .anim, #content a:after, #header ul.menu li a:after, #rwd_menu ul.main_menu li ul li a:after, #header .menu__language_chooser ul.menu li a:after, #header .menu__language_chooser ul.language-chooser li a:after { -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, #hero_single .project_info:before, #hero_single .project_info .info, #hero_single .project_info .info:after { -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); } /* Button */ .button { height: 38px; padding: 0 50px 0 10px; font-size: 14px !important; font-weight: 700; text-decoration: none !important; text-transform: uppercase; text-align: center; color: white !important; line-height: 36px; background: rgba(20 20 80 / 80%); border: 2px solid #fae800; display: inline-block; position: relative; cursor: pointer; -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; -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; } .button:hover { color: #fae800 !important; } .button:disabled, .button:disabled:hover { color: #999 !important; background-color: var(--color-silver); border-color: #ddd; } .button_fullwidth { height: auto; padding: 15px 10px; text-align: center; line-height: 20px; display: block; } /* Read more button */ .read_more { margin-top: 30px; padding-left: 40px; font-size: 18px; font-weight: 700; color: white; line-height: 20px !important; display: inline-block; position: relative; } .read_more:hover { padding-left: 45px; } .read_more:before { width: 20px; height: 5px; left: 0; top: 8px; line-height: 20px; background: #ffed00; position: absolute; content: ''; } .read_more:hover:before { width: 25px; } /* Checkbox and radio */ input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: white; border: 1px solid #828282; clear: none; cursor: pointer; display: inline-block; line-height: 0; outline: 0; vertical-align: middle !important; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; } input[type="radio"] { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } input[type="radio"]:checked:before { width: 14px; height: 14px; left: 4px; top: 4px; text-align: center; background: #143d8f; position: relative; border-radius: 8px; display: block; content: ''; } input[type="checkbox"]:checked:before { width: 14px; height: 14px; left: 4px; top: 4px; text-align: center; background: #143d8f; position: relative; display: block; content: ''; } /* ----------------------- COOKIE LAW INFO ----------------------- */ #cookie-law-info-bar { width: calc(100% - 30px) !important; max-width: 400px !important; padding: 20px !important; text-align: left !important; font-size: 14px !important; } #cookie-law-info-bar span { display: block; } #cookie-law-info-bar .cli_action_button { width: 100% !important; height: 40px !important; margin-left: 0 !important; margin-top: 10px; padding: 0 !important; font-size: 15px !important; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 40px !important; display: block; } #cookie-law-info-bar .cli_action_button:hover { opacity: 0.9; } #cookie-law-info-bar .cli_settings_button { width: 100% !important; height: 40px !important; margin-left: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 700; text-transform: uppercase; text-align: center; color: #292929 !important; line-height: 40px !important; display: block; } /* ---------------- FANCYBOX ---------------- */ .fancybox-container .fancybox-slide { padding: 20px; } .fancybox-container .content-bio-cf { width: 500px; padding: 20px; } .fancybox-container .content-bio-cf a { text-decoration: underline; color: #143d8f; } .fancybox-container .content-bio-cf a:hover { color: var(--color-dark); } .fancybox-container .content-bio-cf small { font-size: 12px; text-align: center; line-height: 16px; display: block; } .fancybox-container .content-bio-cf .name_and_post { margin-bottom: 30px; } .fancybox-container .content-bio-cf .name_and_post .name { margin-bottom: 10px; font-size: 21px; font-weight: 700; color: #143d8f; line-height: 22px; } .fancybox-container .content-bio-cf .name_and_post .post { font-size: 16px; font-weight: 700; color: var(--color-dark); line-height: 20px; } .fancybox-container .content-bio-cf .form_row textarea { min-height: 100px !important; } /* Bio */ .bio.fancybox-content { width: 100%; max-width: 800px; height: 440px; padding: 0 !important; overflow: hidden; } .bio.fancybox-content .wrap_left { width: 330px; } .bio.fancybox-content .wrap_left img { width: 100%; height: auto; display: block; } .bio.fancybox-content .wrap_right { width: calc(100% - 330px); height: inherit; padding: 30px; overflow: auto; } .bio.fancybox-content .wrap_right p { margin-bottom: 20px; font-size: 16px; line-height: 25px; } .bio.fancybox-content .wrap_right p:last-child { margin-bottom: 0; } .bio.fancybox-content .wrap_right .title { margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 100%; } .bio.fancybox-content .wrap_right .post { margin-bottom: 20px; font-size: 14px; line-height: 1; } .bio.fancybox-content .fancybox-button { left: 0; right: auto; background: var(--color-dark); opacity: 100% !important; } .bio.fancybox-content .fancybox-button:hover { background: var(--color-dark); } .bio.fancybox-content .fancybox-button path { fill: white !important; } .fancybox-container.fancybox-is-open .bio.fancybox-content { display: inline-flex !important; flex-wrap: wrap; } /* -------------------------- UNDER CONSTRUCTION -------------------------- */ .under_construction { max-width: 600px; left: 50%; top: 50%; padding: 50px; background: var(--color-silver); position: relative; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .under_construction p { margin-bottom: 20px; } .under_construction p:last-of-type { margin-bottom: 0; } .under_construction svg { width: auto; height: 60px; margin: auto; display: block; } .under_construction svg path { fill: var(--color-dark); } /* ------------------- NAVIGATION ------------------- */ #rwd_menu { width: 80%; right: -100%; top: 0; bottom: 0; padding-bottom: 30px; background: var(--color-dark); position: fixed; z-index: 100; overflow: auto; } #rwd_menu .rwd_menu_wrapper { height: 100%; left: 12%; right: 12%; position: absolute; } /* RWD button */ #rwd_menu .rwd_button { width: 30px; height: 30px; right: 100px; top: 70px; background: transparent; position: absolute; cursor: pointer; z-index: 10; } #rwd_menu .rwd_button .burg { width: 24px; height: 2px; left: 3px; top: 50%; background: transparent; display: block; position: relative; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #rwd_menu .rwd_button .burg:before, #rwd_menu .rwd_button .burg:after { width: 24px; height: 2px; background: white; position: absolute; content: ''; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #rwd_menu .rwd_button .burg:before { top: 0; left: 0; -webkit-transform: rotate(45deg); } #rwd_menu .rwd_button .burg:after { top: 0; right: 0; -webkit-transform: rotate(-45deg); } /* Main menu */ #rwd_menu ul.main_menu { padding-top: 10%; display: flex; flex-wrap: wrap; list-style: none; } #rwd_menu ul.main_menu li { width: 50%; } #rwd_menu ul.main_menu li a { font-size: 14px; font-weight: 700; text-transform: uppercase; color: white; letter-spacing: 3px; opacity: 30%; } #rwd_menu ul.main_menu li ul { display: block; } #rwd_menu ul.main_menu li ul li { width: 100%; margin-bottom: 10px; list-style: none !important; } #rwd_menu ul.main_menu li ul li a { padding: 10px 0; font-size: 50px; text-transform: none; line-height: 1; letter-spacing: 0; display: inline-block; position: relative; opacity: 100%; } #rwd_menu ul.main_menu li ul li a:after { width: 0; height: 4px; left: 0; bottom: 0; background: white; position: absolute; content: ''; } #rwd_menu ul.main_menu li ul li a:hover:after { width: 100%; } #rwd_menu ul.main_menu li.sec_level_menu { width: 100%; margin-bottom: 10px; } #rwd_menu ul.main_menu li.sec_level_menu a { padding: 10px 0; font-size: 50px; text-transform: none; line-height: 1; letter-spacing: 0; display: inline-block; position: relative; opacity: 100%; } #rwd_menu ul.main_menu li.sec_level_menu a:after { width: 0; height: 4px; left: 0; bottom: 0; background: white; position: absolute; content: ''; } #rwd_menu ul.main_menu li.sec_level_menu a:hover:after { width: 100%; } /* Footer menu */ #rwd_menu ul.footer_menu { left: 0; bottom: 30px; position: absolute; list-style: none; } #rwd_menu ul.footer_menu li { margin-right: 20px; vertical-align: top; display: inline-block; } #rwd_menu ul.footer_menu li a { font-size: 16px; font-weight: 700; color: white; line-height: 1; display: block; } #rwd_menu ul.footer_menu li a:hover { text-decoration: underline; } /* RWD nav opened */ body.rwd_menu__opened #rwd_menu { right: 0; } /* -------------- HEADER -------------- */ #header { width: 100%; height: 170px; left: 0; top: 0; position: fixed; z-index: 100; } /* Logo */ #header .logo { height: 80px; left: 100px; display: block; position: absolute; } #header .logo svg { width: auto; height: 100%; display: block; } #header .logo svg path { fill: var(--color-dark); } /* Menu and language chooser */ #header .menu__language_chooser { height: 30px; right: 100px; padding-right: 150px; font-size: 0; position: absolute; } #header .menu__language_chooser ul.menu { height: 30px; vertical-align: top; display: flex; } #header .menu__language_chooser ul.menu li { height: 100%; margin-right: 30px; vertical-align: top; display: inline-block; } #header .menu__language_chooser ul.menu li:last-child { margin-right: 0; } #header .menu__language_chooser ul.menu li a { height: 100%; font-size: 25px; font-weight: 700; text-transform: lowercase; color: var(--color-dark); line-height: 30px; display: block; position: relative; } #header .menu__language_chooser ul.menu li a:after { width: 0; height: 2px; left: 0; bottom: 0; background: var(--color-dark); position: absolute; content: ''; } #header .menu__language_chooser ul.menu li a:hover:after { width: 100%; } #header .menu__language_chooser ul.language-chooser { height: 30px; top: 0; right: 80px; padding-top: 30px; position: absolute; list-style: none; overflow: hidden; } #header .menu__language_chooser ul.language-chooser li { height: 100%; } #header .menu__language_chooser ul.language-chooser li.active { height: auto; left: 0; top: 0; position: absolute; } #header .menu__language_chooser ul.language-chooser li a { height: 100%; font-size: 25px; font-weight: 700; text-transform: lowercase; color: var(--color-dark); line-height: 30px; display: block; position: relative; } #header .menu__language_chooser ul.language-chooser li a:after { width: 0; height: 2px; left: 0; bottom: 0; background: var(--color-dark); position: absolute; content: ''; } #header .menu__language_chooser ul.language-chooser li a:hover:after { width: 100%; } #header .menu__language_chooser ul.language-chooser:hover { height: auto; overflow: inherit; } #header .menu__language_chooser ul.language-chooser:hover:before { left: -10px; top: -10px; right: -10px; bottom: -10px; background: rgba(0 0 0 / 20%); position: absolute; content: ''; } /* body.hu #header .menu__language_chooser ul.language-chooser li.language-chooser-item-hu, body.hu #header .menu__language_chooser ul.language-chooser li.language-chooser-item-de { display: none !important; } body.en #header .menu__language_chooser ul.language-chooser li.language-chooser-item-en, body.en #header .menu__language_chooser ul.language-chooser li.language-chooser-item-hu { display: none !important; } body.de #header .menu__language_chooser ul.language-chooser li.language-chooser-item-de, body.de #header .menu__language_chooser ul.language-chooser li.language-chooser-item-en { display: none !important; } */ /* RWD button */ #header .rwd_button { width: 30px; height: 30px; right: 0; background: transparent; position: absolute; cursor: pointer; } #header .rwd_button:before { width: 1px; height: 100%; left: -30px; top: 0; background: var(--color-dark); position: absolute; content: ''; } #header .rwd_button .burg { width: 24px; height: 2px; left: 3px; top: 50%; background: var(--color-dark); display: block; position: relative; -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: 24px; height: 2px; background: var(--color-dark); position: absolute; content: ''; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before { top: -8px; left: 0; } #header .rwd_button .burg:after { top: 8px; 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); } /* RWD nav opened */ body.rwd_menu__opened #header .logo img { width: auto !important; height: 66px !important; } /* If is Home */ body.home #header .logo svg path, body.has_post_thumbnail #header .logo svg path { fill: white; } body.home #header .menu__language_chooser ul.menu li a, body.has_post_thumbnail #header .menu__language_chooser ul.menu li a, body.home #header .menu__language_chooser ul.language-chooser li a { color: white; } body.has_post_thumbnail #header .menu__language_chooser ul.language-chooser li a { color: white; } body.home #header .menu__language_chooser ul.menu li a:after, body.has_post_thumbnail #header .menu__language_chooser ul.menu li a:after, body.home #header .menu__language_chooser ul.language-chooser li a:after { background: white; } body.has_post_thumbnail #header .menu__language_chooser ul.language-chooser li a:after { background: white; } body.home #header .rwd_button:before, body.has_post_thumbnail #header .rwd_button:before { background: white; } body.home #header .rwd_button .burg, body.has_post_thumbnail #header .rwd_button .burg { background: white; } body.home #header .rwd_button .burg:before, body.home #header .rwd_button .burg:after, body.has_post_thumbnail #header .rwd_button .burg:before, body.has_post_thumbnail #header .rwd_button .burg:after { background: white; } /* Fixed header */ body.fixed_header #header { opacity: 0; visibility: hidden; } /* -------------- SLIDER -------------- */ #slider_wrapper { height: calc(100vh - 70px); background: var(--color-dark); position: relative; } #slider_wrapper .slick-slider { height: 100%; position: relative; } #slider_wrapper .slick-list, #slider_wrapper .slick-track, #slider_wrapper .slick-slide { height: 100%; } #slider_wrapper .slick-slide { background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #slider_wrapper .slick-slide .cover { width: 100%; height: 100%; left: 0; top: 0; position: absolute; } /* Dots */ #slider_wrapper ul.slick-dots { width: 100%; left: 0; bottom: 30px; text-align: center; position: absolute; } #slider_wrapper ul.slick-dots li { margin: 0 15px; vertical-align: top; display: inline-block; } #slider_wrapper ul.slick-dots li button { width: 40px; height: 8px; text-indent: -9999px; background: rgba(255 255 255 / 50%); cursor: pointer; } #slider_wrapper ul.slick-dots li.slick-active button { background: white; } /* ------------ HERO ------------ */ #hero { max-height: 530px; min-height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #hero:before { padding-top: 30%; display: block; content: ''; } #hero .cover { width: 100%; height: 100%; left: 0; top: 0; background: rgba(28 28 32 / 50%); position: absolute; } #hero .title_breadcrumb { width: 100%; left: 0; bottom: 100px; position: absolute; } #hero .title_breadcrumb h1 { font-size: 60px; font-weight: 700; color: white; line-height: 1; position: relative; } #hero .title_breadcrumb .rank-math-breadcrumb { font-size: 16px; font-weight: 500; color: white; line-height: 16px; } #hero .title_breadcrumb .rank-math-breadcrumb a { color: white; } #hero .title_breadcrumb .rank-math-breadcrumb a:after { display: none !important; } #hero .title_breadcrumb .rank-math-breadcrumb a:hover { text-decoration: underline; } /* Hero for single */ #hero_single { height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; position: relative; } #hero_single .project_info { width: 100%; max-width: 430px; right: 40px; bottom: 40px; padding: 60px; font-size: 16px; color: #bcbcbc; background: var(--color-dark); position: absolute; z-index: 0; } #hero_single .project_info h4 { margin-bottom: 0 !important; font-size: 14px; font-weight: 700; text-transform: uppercase; color: white; } #hero_single .project_info .scroll_somewhere { width: 70px; height: 70px; right: 0; bottom: 0; background: var(--color-dark) url(images/icon_arrow_down_white.svg) no-repeat center; background-size: auto 20px; position: absolute; } #hero_single .project_info .info { margin-bottom: 20px; margin-left: -50px; position: relative; } #hero_single .project_info .info:last-of-type { margin-bottom: 0; } #hero_single .project_info .info:after { width: 100%; left: 0; top: -5px; bottom: -5px; background: var(--color-dark); position: absolute; content: ''; } #hero_single .project_info .info.title { font-size: 20px; font-weight: 500; text-transform: uppercase; color: white; line-height: 1; } #hero_single .project_info .info.short_description { line-height: 20px; } #hero_single .project_info .info:nth-child(1), #hero_single .project_info .info:nth-child(1):after { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } #hero_single .project_info .info:nth-child(2), #hero_single .project_info .info:nth-child(2):after { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } #hero_single .project_info .info:nth-child(3), #hero_single .project_info .info:nth-child(3):after { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #hero_single .project_info .info:nth-child(4), #hero_single .project_info .info:nth-child(4):after { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } #hero_single .project_info .info:nth-child(5), #hero_single .project_info .info:nth-child(5):after { -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } #hero_single .thumbnails { height: 70px; left: 0; bottom: 0; padding: 0 20px; font-size: 16px; font-weight: 500; color: white; line-height: 70px; background: var(--color-dark); display: block; position: absolute; } #hero_single .thumbnails img { width: auto; height: 16px; margin-right: 5px; margin-bottom: 1px; vertical-align: text-bottom; display: inline-block; } /* If body is loaded */ body.is_loaded #hero_single .info { margin-left: 0; } body.is_loaded #hero_single .info:after { width: 0; } /* ---------------------- BEFORE CONTENT ---------------------- */ #before_content { margin-bottom: 70px; padding: 50px 0; background: var(--color-silver); } #before_content h1 { font-size: 30px; font-weight: 700; vertical-align: baseline; color: var(--color-dark); line-height: 1; display: inline-block; } #before_content .rank-math-breadcrumb { margin-left: 20px; padding-left: 40px; font-size: 16px; font-weight: 500; line-height: 16px; display: inline-block; position: relative; } #before_content .rank-math-breadcrumb:before { width: 25px; height: 2px; left: 0; bottom: 2px; background: var(--color-dark); position: absolute; content: ''; } #before_content .rank-math-breadcrumb p { margin-bottom: 0 !important; } #before_content .rank-math-breadcrumb a:after { display: none !important; } #before_content .rank-math-breadcrumb a:hover { text-decoration: underline; } /* --------------- CONTENT --------------- */ #content { padding-top: 170px; padding-bottom: 50px; } body.has_post_thumbnail #content { padding-top: 50px; } #content p { margin-bottom: 30px; } #content h3 { margin-bottom: 20px; font-size: 25px; font-weight: 700; color: var(--color-dark); line-height: 1.4; } #content a { color: var(--color-dark); position: relative; } #content a:after { width: 0; height: 2px; left: 0; bottom: 0; background: var(--color-dark); position: absolute; content: ''; } #content a:hover:after { width: 100%; } #content ul { margin-left: 30px; margin-bottom: 20px; } #content ol { margin-left: 30px; margin-bottom: 20px; list-style: decimal; } #content table { width: 100%; margin-bottom: 20px; border-collapse: collapse; } #content table thead tr th { padding: 10px; font-size: 14px; text-transform: uppercase; text-align: left; line-height: 20px; background: var(--color-silver); border-bottom: 1px solid var(--color-dark); } #content table tbody tr td { padding: 10px; font-size: 16px; text-align: left; line-height: 20px; border-bottom: 1px solid var(--color-dark); } /* Offices */ #content .offices { margin-bottom: 150px; margin-left: -75px; margin-right: -75px; display: flex; flex-wrap: wrap; } #content .offices .office { width: 33.3333333333%; margin-top: 75px; padding: 0 75px; } #content .offices .office .title { margin-bottom: 30px; font-size: 30px; font-weight: 700; } #content .offices .office .email_contact { margin-top: 30px; padding-top: 30px; border-top: 3px solid var(--color-dark); } #content .offices.colleagues { margin-bottom: 50px; } #content .offices.colleagues .office .title { margin-bottom: 0; font-size: 30px; } #content .offices.colleagues .office .email_contact { margin-top: 20px; padding-top: 0; border-top: none; } /* Map */ #mapdiv { height: 500px; position: relative; z-index: 10; } /* Blocks */ #content .wp-block-columns { margin-bottom: 30px !important; } #content .wp-block-columns .wp-block-column { align-self: center; } #content .wp-block-columns .wp-block-column p:last-child { margin-bottom: 0 !important; } /* Justified gallery */ #content .justified-gallery a { height: 100%; display: block; } /* Iframe wrapper */ .iframe_wrapper { height: 0; margin-bottom: 30px; padding-bottom: 56.25%; padding-top: 25px; position: relative; } .iframe_wrapper iframe { width: 100%; height: 100%; left: 0; top: 0; position: absolute; } /* -------------- PEOPLE -------------- */ #content .people_wrapper { margin-left: -20px; margin-right: -20px; display: flex; flex-wrap: wrap; } #content .people_wrapper .people { width: calc(25% - 40px); margin: 50px 20px 0; } #content .people_wrapper .people:nth-child(-n+4) { margin-top: 0; } #content .people_wrapper .people .thumbnail { position: relative; } #content .people_wrapper .people .thumbnail:after { display: none !important; } #content .people_wrapper .people .thumbnail img { width: 100%; height: auto; display: block; } #content .people_wrapper .people .thumbnail .zoom { width: 100%; height: 100%; left: 0; top: 0; background: rgba(28 28 32 / 70%) url(images/icon_zoom_white.svg) no-repeat center; background-size: auto 40px; position: absolute; opacity: 0%; } #content .people_wrapper .people .thumbnail:hover .zoom { opacity: 100%; } #content .people_wrapper .people .entry { padding-top: 20px; } #content .people_wrapper .people .entry .title { margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 1; } #content .people_wrapper .people .entry .post { font-size: 14px; line-height: 1; } /* ------------- WORKS ------------- */ #content .works_wrapper { margin-left: -10px; margin-right: -10px; margin-bottom: 50px; display: flex; flex-wrap: wrap; } #content .works_wrapper .work { width: calc(33.3333333333% - 20px); margin: 60px 10px 0; } #content .works_wrapper .work:after { display: none !important; } #content .works_wrapper .work:nth-child(-n+3) { margin-top: 0; } #content .works_wrapper .work .thumbnail { width: 100%; max-height: 260px; display: block; position: relative; overflow: hidden; } #content .works_wrapper .work .thumbnail:before { padding-top: 66%; display: block; content: ''; } #content .works_wrapper .work .thumbnail img { width: calc(100% + 50px); height: auto; left: -50px; top: 0; display: block; position: absolute; -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); } #content .works_wrapper .work:hover .thumbnail img { left: 0; } #content .works_wrapper .work .entry { padding-top: 20px; } #content .works_wrapper .work .entry .work_title { margin-bottom: 10px; font-size: 20px; font-weight: 700; line-height: 1; } #content .works_wrapper .work .entry .work_category { font-size: 16px; font-weight: 500; } /* Filter */ ul#filter { margin-left: 0 !important; margin-bottom: 20px !important; font-size: 0; } ul#filter li { margin-right: 10px; vertical-align: top; display: inline-block; } ul#filter li:last-child { margin-right: 0; } ul#filter li:after { margin-left: 10px; font-size: 16px; content: '/'; } ul#filter li:last-child:after { display: none; } ul#filter li a { font-size: 16px; font-weight: 700; } /* ------------------- SINGLE WORK ------------------- */ #content .datas { margin-bottom: 30px; border-top: 2px solid var(--color-dark); display: flex; flex-wrap: wrap; } #content .datas .data { width: 50%; padding: 10px 0; font-size: 15px; line-height: 20px; border-bottom: 2px solid var(--color-dark); } #content .datas .data.full { width: 100%; } #content .datas .data strong { font-weight: 700; text-transform: uppercase; color: var(--color-dark); } #content .map_wrapper { border: 10px solid var(--color-silver); } #content .gallery_wrapper { margin-left: -200px; margin-right: -200px; } /* -------------- FOOTER -------------- */ #footer { height: 70px; padding: 20px 0; font-size: 16px; line-height: 20px; border-top: 1px solid #ddd; display: flex; flex-wrap: wrap; } #footer .footer_left { width: 50%; padding-left: 100px; display: flex; flex-wrap: wrap; align-items: center; } #footer .footer_left .copyright { vertical-align: top; display: inline-block; } #footer .footer_left .social_media { margin-right: 10px; display: flex; flex-wrap: wrap; } #footer .footer_left .social_media a { width: 40px; height: 40px; margin-right: 10px; background-repeat: no-repeat; background-position: center; background-size: auto 20px; display: block; } #footer .footer_left .social_media a.facebook { background-color: #3b579d; background-image: url(images/icon_facebook_white.svg); } #footer .footer_left .social_media a.instagram { background-color: #a13590; background-image: url(images/icon_instagram_white.svg); } #footer .footer_left .social_media a.linkedin { background-color: #007bb5; background-image: url(images/icon_linkedin_white.svg); } #footer .footer_left .social_media a.youtube { background-color: #e02f2f; background-image: url(images/icon_youtube_white.svg); } #footer .footer_left .social_media a:hover { background-color: var(--color-dark) !important; } #footer .footer_right { width: 50%; padding-right: 100px; display: flex; flex-wrap: wrap; justify-content: end; } #footer .footer_right ul { list-style: none; } #footer .footer_right ul li { margin-left: 20px; vertical-align: top; display: inline-block; } #footer .footer_right ul li:first-child { margin-left: 0; } #footer .footer_right ul li a { color: var(--color-dark); } #footer .footer_right ul li a:hover { text-decoration: underline; } /* If is Home */ body.home #footer { border-top: none; } /* ------------------ COOKIE BAR ------------------ */ #cookie-law-info-bar { font-size: 14px; line-height: 20px; } #cookie-law-info-bar .cli_settings_button { font-weight: 700; text-decoration: underline; } /* ------------ FORM ------------ */ .form_row { margin-bottom: 30px; position: relative; } .form_row.form_row_first { width: 50%; width: calc(50% - 15px); float: left; } .form_row.form_row_last { width: 50%; width: calc(50% - 15px); float: right; } .form_row.form_row_wide { clear: both; } .form_row br { display: none !important; } .form_row label { top: 10px; font-size: 16px; font-weight: 400; color: #b3b3b3; position: absolute; -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out; transition: top .2s ease-in-out, font-size .2s ease-in-out; } .form_row label.active { top: -20px; font-size: 14px; font-weight: 700; color: #143d8f; } .form_row .wpcf7-list-item { margin: 0; position: relative; } .form_row .wpcf7-list-item label { top: auto; padding-left: 35px; line-height: 20px; display: block; position: relative; } .form_row .wpcf7-list-item input[type=checkbox] { left: 0; top: 1px; position: absolute; } .form_row textarea, .form_row input[type=text], .form_row input[type=email] { width: 100%; height: 50px; font-size: 17px; background: transparent; border-bottom: 1px solid #b3b3b3; } .form_row textarea { min-height: 150px; padding: 10px 0; resize: vertical; } .form_row .button { padding: 0 20px; } .form_row .button:after { display: none; } /* ------------------- RWD DESIGN ------------------- */ @media only screen and (max-width: 1440px) { /* NAVIGATION */ #rwd_menu { width: 90%; } #rwd_menu .rwd_menu_wrapper { left: 10%; right: 10%; } /* NAVIGATION: RWD button */ #rwd_menu .rwd_button { right: 50px; } /* NAVIGATION: Main menu */ #rwd_menu ul.main_menu li ul li a, #rwd_menu ul.main_menu li.sec_level_menu a { font-size: 46px; } /* HEADER */ #header { height: 150px; } /* HEADER: Logo */ #header .logo { left: 50px; } /* HEADER: Menu and language chooser */ #header .menu__language_chooser { right: 50px; } /* HERO */ #hero .title_breadcrumb { bottom: 50px; } #hero .title_breadcrumb h1 { font-size: 50px; } /* CONTENT */ #content { padding-top: 150px; } /* FOOTER */ #footer .footer_left { padding-left: 50px; } #footer .footer_right { padding-right: 50px; } } @media only screen and (max-width: 1280px) { /* DEFAULT */ .p_l_20 { padding-left: 20px; } .p_r_20 { padding-right: 20px; } /* NAVIGATION */ #rwd_menu { width: 100%; } /* NAVIGATION: RWD button */ #rwd_menu .rwd_button { right: 20px; } /* NAVIGATION: Main menu */ #rwd_menu ul.main_menu li ul li a, #rwd_menu ul.main_menu li.sec_level_menu a { font-size: 42px; } /* HEADER */ #header { height: 120px; } /* HEADER: Logo */ #header .logo { left: 20px; } /* HEADER: Menu and language chooser */ #header .menu__language_chooser { right: 20px; } /* CONTENT */ #content { padding-top: 120px; } /* CONTENT: Offices */ #content .offices { margin-bottom: 100px; margin-left: -50px; margin-right: -50px; } #content .offices .office { margin-top: 50px; padding: 0 50px; } /* SINGLE WORK */ #content .gallery_wrapper { margin-left: -100px; margin-right: -100px; } /* FOOTER */ #footer .footer_left { padding-left: 20px; } #footer .footer_right { padding-right: 20px; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } /* DISPLAY: Block */ .show_in_960 { display: block !important; } /* NAVIGATION */ #rwd_menu .rwd_menu_wrapper { left: 50px; right: 50px } /* NAVIGATION: Main menu */ #rwd_menu ul.main_menu li { width: 100%; } #rwd_menu ul.main_menu li ul li a, #rwd_menu ul.main_menu li.sec_level_menu a { padding: 6px 0; font-size: 38px; } /* HEADER */ #header { height: 100px; } /* HEADER: Logo */ #header .logo { height: 60px; } /* HERO */ #hero .title_breadcrumb h1 { font-size: 40px; } /* HERO: Hero for single */ #hero_single .project_info { width: 70px; right: 0; bottom: 0; padding: 0; background: transparent; } #hero_single .project_info .scroll_somewhere { background-color: rgba(0 0 0 / 70%); } /* BEFORE CONTENT */ #before_content { margin-bottom: 50px; padding: 30px 0; } #before_content h1 { vertical-align: top; display: block; } #before_content .rank-math-breadcrumb { margin-top: 10px; margin-left: 0; padding-left: 0; display: block; } #before_content .rank-math-breadcrumb:before { display: none; } /* CONTENT */ #content { padding-top: 100px; } /* CONTENT: Offices */ #content .offices { margin-bottom: 50px; margin-left: 0; margin-right: 0; } #content .offices .office { width: 50%; padding: 0 30px 0 0; } /* SINGLE WORK */ #content .gallery_wrapper { margin-left: 0; margin-right: 0; } /* PEOPLE */ #content .people_wrapper .people { width: calc(33% - 40px); } #content .people_wrapper .people:nth-child(4) { margin-top: 50px; } /* FOOTER */ #footer { height: auto; border-top: 1px solid #ddd; display: flex; flex-wrap: wrap; } #footer .footer_left { width: 100%; margin-bottom: 30px; padding-right: 20px; text-align: center; justify-content: center; } #footer .footer_left .copyright { } #footer .footer_left .social_media { width: 100%; margin-right: 0; margin-bottom: 20px; justify-content: center; } #footer .footer_left .social_media a { margin-left: 5px; margin-right: 5px; } #footer .footer_right { width: 100%; padding-left: 20px; justify-content: center; } #footer .footer_right ul li { margin-left: 10px; margin-right: 10px; } } @media only screen and (max-width: 768px) { /* SLIDER */ /* #slider_wrapper { height: auto; } #slider_wrapper .slick-slide:before { padding-top: 70%; display: block; content: ''; } */ /* HERO */ #hero .title_breadcrumb { bottom: 30px; } /* CONTENT: Offices */ #content .offices .office .title { margin-bottom: 10px; font-size: 30px; } #content .offices .office .email_contact { margin-top: 10px; padding-top: 10px; } /* WORKS */ #content .works_wrapper .work { width: calc(50% - 20px); margin: 50px 10px 0; } #content .works_wrapper .work:nth-child(3) { margin-top: 50px; } /* PEOPLE */ #content .people_wrapper { margin-left: -10px; margin-right: -10px; } #content .people_wrapper .people { width: calc(50% - 20px); margin: 50px 10px 0; } #content .people_wrapper .people:nth-child(3) { margin-top: 50px; } /* WORKS: Filter */ ul#filter { border: 1px solid #ddd; display: flex; flex-wrap: wrap; } ul#filter li { width: 33.3333333333%; margin-right: 0; text-align: center; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } ul#filter li:nth-child(3n) { border-right: none; } ul#filter li:after { display: none; } ul#filter li a { padding: 10px; display: block; } /* FOOTER */ #footer .footer_right ul { margin-top: 30px; text-align: center; } #footer .footer_right ul li { margin-left: 0; margin-bottom: 10px; display: block; } #footer .footer_right ul li:last-child { margin-bottom: 0; } } @media only screen and (max-width: 768px) and (orientation: landscape) { /* SLIDER */ #slider_wrapper { height: 100vh; } } @media only screen and (max-width: 640px) { /* FANCYBOX: Bio */ .bio.fancybox-content { height: auto; } .bio.fancybox-content .wrap_left { width: 100%; padding: 20px; } .bio.fancybox-content .wrap_left img { max-width: 150px; margin: auto; } .bio.fancybox-content .wrap_right { width: 100%; height: auto; padding: 20px; } /* CONTENT: Offices */ #content .offices .office { width: 100%; padding: 0; } #content .offices .office .title { font-size: 25px; } #content .offices.colleagues .office .title { font-size: 25px; } /* WORKS */ #content .works_wrapper { margin-left: 0; margin-right: 0; } #content .works_wrapper .work { width: 100%; margin: 50px 0 0; } #content .works_wrapper .work:nth-child(2) { margin-top: 50px; } /* SINGLE WORK */ #content .datas .data { width: 100%; } /* WORKS: Filter */ ul#filter li { width: 100%; border-right: none !important; } ul#filter li:last-child { border-bottom: none !important; } } @media only screen and (max-width: 480px) { /* NAVIGATION */ #rwd_menu .rwd_menu_wrapper { left: 20px; right: 20px } /* NAVIGATION: RWD button */ #rwd_menu .rwd_button { top: 20px; } /* NAVIGATION: Main menu */ #rwd_menu ul.main_menu { margin-bottom: 30px; } #rwd_menu ul.main_menu li ul li a, #rwd_menu ul.main_menu li.sec_level_menu a { padding: 5px 0; font-size: 30px; } /* NAVIGATION: Footer menu */ #rwd_menu ul.footer_menu { left: auto; bottom: auto; position: relative; } #rwd_menu ul.footer_menu li { margin-right: 0; margin-bottom: 15px; display: block; } /* HEADER */ #header { height: 80px; } /* HEADER: Logo */ #header .logo { height: 50px; } /* HERO: Hero for single */ #hero_single .thumbnails { width: calc(100% - 70px); } /* CONTENT */ #content { padding-top: 80px; } /* WORKS */ #content .works_wrapper .work .thumbnail:before { display: none; } #content .works_wrapper .work .thumbnail img { width: 100%; left: auto; top: auto; position: relative; } /* PEOPLE */ #content .people_wrapper { margin-left: 0; margin-right: 0; } #content .people_wrapper .people { width: 100%; margin: 50px 0 0; } #content .people_wrapper .people:nth-child(2) { margin-top: 50px; } /* FOOTER: Footer menu */ #rwd_menu ul.footer_menu li a { font-size: 18px; } } @media only screen and (max-width: 320px) { }